diff --git a/components/Project/Create/Components/Select.vue b/components/Project/Create/Components/Select.vue
index c970856..3405c51 100644
--- a/components/Project/Create/Components/Select.vue
+++ b/components/Project/Create/Components/Select.vue
@@ -24,7 +24,10 @@ const selectedValue = useVModel(props, 'modelValue', emits)
     lg="flex flex-row gap-24px"
     relative
   >
-    <div v-bind="$attrs" lg="w-1/2">
+    <div
+      v-bind="$attrs"
+      lg="w-1/2"
+    >
       <HeadlessListbox
         v-model="selectedValue"
         as="div"
@@ -52,7 +55,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
           >
             <span
               class="block truncate mr-8px"
-              :class="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']"
+              :style="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']"
             >
               {{ props.options.find(option => option.value === selectedValue)?.label || props.placeholder }}
             </span>
diff --git a/pages/project/[id]/edit.vue b/pages/project/[id]/edit.vue
index 1d7d3c2..1715a6c 100644
--- a/pages/project/[id]/edit.vue
+++ b/pages/project/[id]/edit.vue
@@ -173,13 +173,12 @@ const transitionDone = ref(false)
           gap-46px
           lg="mt-24px"
         >
-          <SelectBox
+          <ProjectCreateComponentsSelect
             :model-value="selectedTab"
             label="Choose category"
-            :options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
-            :border-opacity="100"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
             w-full
-            lg:hidden
+            class="lg:hidden! block!"
             block
             mt-16px
             @update:model-value="$event => jumpTo($event)"
@@ -251,64 +250,72 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
-    <div
-      flex
-      flex-col
-      gap-10px
-      justify-center
-      text-center
-      md:fixed
-      bottom-0
-      w-full
-      bg-app-bg-dark_grey
-      class="border-app-white/30"
-      lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
-      p-12px
+    <Transition
+      name="fade"
+      mode="out-in"
+      appear
     >
-      <Button
-        v-if="selectedTab !== tabsArray.length - 1"
+      <div
+        v-if="transitionDone"
         flex
-        lg="w-fit hidden!"
-        border
-        @click="next()"
-      >
-        <span px-24px>NEXT SECTION</span>
-      </Button>
-      <span
-        v-if="selectedTab !== tabsArray.length - 1"
-        lg="hidden"
+        flex-col
+        gap-10px
+        justify-center
+        text-center
         block
-        text="12px italic app-white/50"
-      >or you can submit changes by publishing them</span>
-      <div flex>
+        lg:fixed
+        bottom-0
+        w-full
+        bg-app-bg-dark_grey
+        class="border-app-white/30"
+        lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
+        p-12px
+      >
         <Button
-          w-full
-          lg="w-fit"
+          v-if="selectedTab !== tabsArray.length - 1"
+          flex
+          lg="w-fit hidden!"
           border
-          @click="navigateTo(`/project/${route.params.id}`)"
+          @click="next()"
         >
-          <span px-24px>CANCEL</span>
-        </Button>
-        <Button
-          w-full
-          lg="w-fit"
-          inverted-color
-          @click="publish()"
-        >
-          <UnoIcon
-            v-if="isPublishing"
-            w-108px
-            i-eos-icons-loading
-            text-black
-            text-18px
-          />
-          <span
-            v-else
-            px-24px
-          >PUBLISH</span>
+          <span px-24px>NEXT SECTION</span>
         </Button>
+        <span
+          v-if="selectedTab !== tabsArray.length - 1"
+          lg="hidden"
+          block
+          text="12px italic app-white/50"
+        >or you can submit changes by publishing them</span>
+        <div flex>
+          <Button
+            w-full
+            lg="w-fit"
+            border
+            @click="navigateTo(`/project/${route.params.id}`)"
+          >
+            <span px-24px>CANCEL</span>
+          </Button>
+          <Button
+            w-full
+            lg="w-fit"
+            inverted-color
+            @click="publish()"
+          >
+            <UnoIcon
+              v-if="isPublishing"
+              w-108px
+              i-eos-icons-loading
+              text-black
+              text-18px
+            />
+            <span
+              v-else
+              px-24px
+            >PUBLISH</span>
+          </Button>
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
diff --git a/pages/project/create.vue b/pages/project/create.vue
index ff4b1cd..a04b84c 100644
--- a/pages/project/create.vue
+++ b/pages/project/create.vue
@@ -160,14 +160,12 @@ const transitionDone = ref(false)
           gap-46px
           lg="mt-24px"
         >
-          <SelectBox
+          <ProjectCreateComponentsSelect
             :model-value="selectedTab"
             label="Choose category"
-            :options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
-            :border-opacity="30"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
             w-full
-            lg:hidden
-            block
+            class="lg:hidden! block!"
             mt-16px
             @update:model-value="$event => jumpTo($event)"
           />
@@ -194,7 +192,6 @@ const transitionDone = ref(false)
     >
       <div
         app-container
-        mb-170px
         lg="mb-55px"
       >
         <ClientOnly>
@@ -238,64 +235,72 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
-    <div
-      flex
-      flex-col
-      gap-16px
-      justify-center
-      text-center
-      fixed
-      bottom-0
-      w-full
-      bg-app-bg-dark_grey
-      class="border-app-white/30"
-      lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
-      p-12px
+    <Transition
+      name="fade"
+      mode="out-in"
+      appear
     >
-      <Button
-        v-if="selectedTab !== tabsArray.length - 1"
+      <div
+        v-if="transitionDone"
         flex
-        lg="w-fit hidden!"
-        border
-        @click="next()"
-      >
-        <span px-24px>NEXT SECTION</span>
-      </Button>
-      <span
-        v-if="selectedTab !== tabsArray.length - 1"
-        lg="hidden"
+        flex-col
+        gap-16px
+        justify-center
+        text-center
         block
-        text="12px italic app-white/50"
-      >or you can submit changes by publishing them</span>
-      <div flex>
+        lg:fixed
+        bottom-0
+        w-full
+        bg-app-bg-dark_grey
+        class="border-app-white/30"
+        lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
+        p-12px
+      >
         <Button
-          w-full
-          lg="w-fit"
+          v-if="selectedTab !== tabsArray.length - 1"
+          flex
+          lg="w-fit hidden!"
           border
-          @click="navigateTo('/')"
+          @click="next()"
         >
-          <span px-24px>CANCEL</span>
-        </Button>
-        <Button
-          w-full
-          lg="w-fit"
-          inverted-color
-          @click="publish(true)"
-        >
-          <UnoIcon
-            v-if="isPublishing"
-            w-108px
-            i-eos-icons-loading
-            text-black
-            text-18px
-          />
-          <span
-            v-else
-            px-24px
-          >PUBLISH</span>
+          <span px-24px>NEXT SECTION</span>
         </Button>
+        <span
+          v-if="selectedTab !== tabsArray.length - 1"
+          lg="hidden"
+          block
+          text="12px italic app-white/50"
+        >or you can submit changes by publishing them</span>
+        <div flex>
+          <Button
+            w-full
+            lg="w-fit"
+            border
+            @click="navigateTo('/')"
+          >
+            <span px-24px>CANCEL</span>
+          </Button>
+          <Button
+            w-full
+            lg="w-fit"
+            inverted-color
+            @click="publish(true)"
+          >
+            <UnoIcon
+              v-if="isPublishing"
+              w-108px
+              i-eos-icons-loading
+              text-black
+              text-18px
+            />
+            <span
+              v-else
+              px-24px
+            >PUBLISH</span>
+          </Button>
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>