diff --git a/frontend/components/global/ColorCircle.vue b/frontend/components/global/ColorCircle.vue
index 3db00be..0d3c2df 100644
--- a/frontend/components/global/ColorCircle.vue
+++ b/frontend/components/global/ColorCircle.vue
@@ -3,18 +3,21 @@
 // types
 
 type Props = {
+    selectable?: boolean,
     selected?: boolean;
 }
 
 // props
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    selectable: false
+});
 
 </script>
 
 <template>
     <div
-        class="size-[25px] rounded-full transition-all ring-2 ring-offset-4 shadow-black/30 shadow-inner"
-        :class="selected ? 'ring-blue-500' : 'ring-transparent'"
+        class="size-[25px] rounded-full transition-all shadow-black/30 shadow-inner"
+        :class="[selectable ? 'ring-2 ring-offset-4 ' : '', selected ? 'ring-blue-500' : 'ring-transparent']"
     />
 </template>
\ No newline at end of file
diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
index 6329eca..7b22a94 100644
--- a/frontend/components/global/LoadingOverlay.vue
+++ b/frontend/components/global/LoadingOverlay.vue
@@ -1,33 +1,54 @@
 <script lang="ts" setup>
 
+// import
+
+import type { LoadingOverlayProvideType } from "~/pages/index.vue";
+
+// provide / inject
+
+const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
+
 // state
 
 const { $gsap: gsap } = useNuxtApp();
 
+const shouldRenderLoadingOverlay = ref(true);
+
 // lifecycle
 
-onMounted(() => {
-    const timeline = gsap.timeline();
+watch(() => showLoadingOverlay.value, (value) => {
+    if (!value) {
+        const timeline = gsap.timeline();
 
-    timeline
-        .to("#loading-overlay", {
-            scale: 1
-        })
-        .to("#loading-overlay", {
-            scale: 0.8,
-            opacity: 0,
-            delay: 5
-        })
-        .to("#loading-overlay", {
-            opacity: 0,
-            y: "20%"
-        });
+        timeline
+            .to("#loading-overlay", {
+                scale: 1
+            })
+            .to("#loading-overlay", {
+                scale: 0.8,
+                opacity: 0,
+                delay: 3
+            })
+            .to("#loading-overlay", {
+                opacity: 0,
+                y: "20%",
+                onComplete: () => {
+                    shouldRenderLoadingOverlay.value = false;
+                }
+            });
+    }
+}, {
+    once: true
 });
 
 </script>
 
 <template>
-    <div id="loading-overlay" class="fixed inset-0 size-full z-9999 flex-center bg-black">
+    <div
+        v-if="shouldRenderLoadingOverlay"
+        id="loading-overlay"
+        class="fixed inset-0 size-full z-9999 flex-center bg-black"
+    >
         <img id="loading-overlay-image" src="/video/loading-2.gif" class="opacity-0 scale-70 absolute z-20" alt="" />
         <div
             id="loading-overlay-gradient"
@@ -41,7 +62,7 @@ onMounted(() => {
 #loading-overlay-image {
     animation-name: loading-overlay-image-animation;
     animation-duration: 1s;
-    animation-delay: 0.75s;
+    animation-delay: 0.35s;
     animation-fill-mode: forwards;
 }
 
diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index dea310e..a7df480 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -92,7 +92,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         brand="برند محصول"
                         :title="product.name"
                         :picture="product.variants[0].images[0].image"
-                        :colors="product.variants.map(v => v.color)"
+                        :colors="product.colors"
                         :price="product.variants[0].price"
                         :rate="product.rating"
                         :dark-layer="true"
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 6d7143b..aaca471 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -5,6 +5,11 @@
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
 import useHomeData from "~/composables/api/home/useHomeData";
+import type { LoadingOverlayProvideType } from "~/pages/index.vue";
+
+// provide / inject
+
+const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
 
 // state
 
@@ -31,6 +36,7 @@ let gsapTimeline: gsap.core.Timeline;
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
+    changeLoadingOverlay(false);
     swiper_instance.value = swiper;
 };
 
@@ -105,7 +111,7 @@ onMounted(() => {
             padding: "0px 80px"
         }, {
             padding: "0px 40px"
-        }, "=")
+        }, "=");
 
     ScrollTrigger.create({
         trigger: "#header-slider-container",
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index ec46008..730ce69 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -101,6 +101,7 @@ watch(() => selectedVariant.value, (newValue) => {
                         v-for="color in product!.colors"
                         :key="color"
                         @click="selectedColor = color"
+                        selectable
                         :selected="selectedColor === color "
                         :style="{backgroundColor: color}"
                         class="cursor-pointer"
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 3d15436..e94ceed 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -4,10 +4,32 @@
 
 import useHomeData from "~/composables/api/home/useHomeData";
 
+// type
+
+export type LoadingOverlayProvideType = {
+    showLoadingOverlay: Ref<boolean>,
+    changeLoadingOverlay: (value: boolean) => void,
+}
+
 // state
 
 const { suspense } = useHomeData();
 
+const showLoadingOverlay = ref(true);
+
+// method
+
+const changeLoadingOverlay = (value: boolean) => {
+    showLoadingOverlay.value = value;
+};
+
+// provide / inject
+
+provide("loadingOverlay", {
+    showLoadingOverlay,
+    changeLoadingOverlay
+});
+
 // ssr
 
 const response = await suspense();
@@ -23,7 +45,7 @@ if (response.isError) {
 
 <template>
     <div class="w-full">
-<!--        <LoadingOverlay />-->
+        <LoadingOverlay />
         <Hero />
         <Preview />
         <ProductsShowcase />