diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index 218de19..83eea97 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -113,11 +113,15 @@ const onSwiper = (swiper: SwiperClass) => {
                 </Swiper>
             </div>
             <template #fallback>
-                <div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6">
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
-                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                <div class="w-full flex sm:grid justify-between sm:grid-cols-4 gap-6">
+                    <div
+                        class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-e-2xl sm:rounded-2xl sm:aspect-square"
+                    />
+                    <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                    <div
+                        class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-s-2xl sm:rounded-2xl sm:aspect-square"
+                    />
+                    <div class="bg-neutral-100 size-full rounded-2xl aspect-square max-sm:hidden" />
                 </div>
             </template>
         </ClientOnly>
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index 44c8a2b..4277a3b 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -72,45 +72,54 @@ const changeSlide = (id: number) => {
             </div>
 
             <div class="relative w-full">
-                <Swiper
-                    :slides-per-view="3"
-                    :space-between="20"
-                    @swiper="onSwiper"
-                    class="w-full"
-                >
-                    <SwiperSlide
-                        v-for="slide in slides"
-                        :key="slide.id"
+                <ClientOnly>
+                    <Swiper
+                        :slides-per-view="3"
+                        :space-between="20"
+                        @swiper="onSwiper"
+                        class="w-full"
                     >
-                        <div
-                            @click="changeSlide(slide.id)"
-                            :class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
-                            class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
+                        <SwiperSlide
+                            v-for="slide in slides"
+                            :key="slide.id"
                         >
-                            <NuxtImg
-                                class="absolute object-cover size-full"
-                                :src="slide.image"
-                                loading="lazy"
-                                fetch-priority="low"
-                                :alt="String(slide.id)"
-                            />
-                        </div>
-                    </SwiperSlide>
-                    <SwiperSlide
-                        v-if="emptySlidesCount > 0"
-                        v-for="slide in emptySlidesCount"
-                        :key="slide"
-                    >
-                        <div
-                            class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
+                            <div
+                                @click="changeSlide(slide.id)"
+                                :class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
+                                class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
+                            >
+                                <NuxtImg
+                                    class="absolute object-cover size-full"
+                                    :src="slide.image"
+                                    loading="lazy"
+                                    fetch-priority="low"
+                                    :alt="String(slide.id)"
+                                />
+                            </div>
+                        </SwiperSlide>
+                        <SwiperSlide
+                            v-if="emptySlidesCount > 0"
+                            v-for="slide in emptySlidesCount"
+                            :key="slide"
                         >
-                            <Icon
-                                name="ci:image-slash"
-                                class="size-[40px] sm:size-[60px] **:fill-black/20"
-                            />
+                            <div
+                                class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
+                            >
+                                <Icon
+                                    name="ci:image-slash"
+                                    class="size-[40px] sm:size-[60px] **:fill-black/20"
+                                />
+                            </div>
+                        </SwiperSlide>
+                    </Swiper>
+                    <template #fallback>
+                        <div class="w-full grid grid-cols-3 gap-6">
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
+                            <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
                         </div>
-                    </SwiperSlide>
-                </Swiper>
+                    </template>
+                </ClientOnly>
 
                 <div
                     v-if="slides.length > 3"