diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 8317c25d91..32ef22c7a2 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -66,7 +66,7 @@ const signOut = () => {
                   class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
                   to="/user/settings"
                 >
-                  <MdiAt class="mt-1 color-transition group-hover:text-success" />&nbsp;
+                  <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
                   <span class="prose">{{ email }}</span>
                 </nuxt-link>
 
@@ -77,7 +77,7 @@ const signOut = () => {
                   class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2"
                   @click="signOut"
                 >
-                  <MdiLogout class="color-transition dark:text-white group-hover:(!text-red-500)" />&nbsp;
+                  <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
                   <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
                 </div>
               </v-list>
diff --git a/packages/nc-gui-v2/components/general/Share.vue b/packages/nc-gui-v2/components/general/Share.vue
index ca6303138c..a48cd29a38 100644
--- a/packages/nc-gui-v2/components/general/Share.vue
+++ b/packages/nc-gui-v2/components/general/Share.vue
@@ -292,6 +292,6 @@ const openUrl = (url: string) => {
 }
 
 a {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200);
 }
 </style>
diff --git a/packages/nc-gui-v2/components/general/Social.vue b/packages/nc-gui-v2/components/general/Social.vue
index 3cf23a1f6b..509e723a98 100644
--- a/packages/nc-gui-v2/components/general/Social.vue
+++ b/packages/nc-gui-v2/components/general/Social.vue
@@ -46,7 +46,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
 
 <style scoped>
 .icon {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200);
 }
 
 .discourse {
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index cddf5351b5..aa8b664119 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
     '~/assets/css/global.css',
     '~/assets/style/style.css',
     '~/assets/style.css',
-    '~/assets/style-v2.css',
+    '~/assets/style-v2.scss',
   ],
 
   meta: {
@@ -53,6 +53,7 @@ export default defineNuxtConfig({
       Icons({
         autoInstall: true,
         compiler: 'vue3',
+        defaultClass: 'nc-icon',
       }),
       Components({
         resolvers: [AntDesignVueResolver()],
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index ac2200f60a..43dbcdbc7e 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index.vue
@@ -114,12 +114,12 @@ const activePage = $ref(navDrawerOptions[0].title)
         <div class="self-end flex text-4xl mb-1">
           <MaterialSymbolsGridView
             :class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects')"
           />
           <MaterialSymbolsFormatListBulletedRounded
             :class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects/list')"
           />
         </div>
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
index e179029262..6670452987 100644
--- a/packages/nc-gui-v2/pages/projects/index/list.vue
+++ b/packages/nc-gui-v2/pages/projects/index/list.vue
@@ -28,7 +28,7 @@ const openProject = async (project: ProjectType) => {
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 color-transition"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2"
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 101f77a015..a1a667f7df 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -81,12 +81,7 @@ const resetError = () => {
         <div
           class="bg-white dark:(!bg-gray-900 !text-white) md:relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
-          <div
-            style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
-            class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
-          >
-            <img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
-          </div>
+          <general-noco-icon />
 
           <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
 
@@ -132,9 +127,9 @@ const resetError = () => {
               :class="[
                 !valid
                   ? '!opacity-50 !cursor-default'
-                  : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
+                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
@@ -144,8 +139,8 @@ const resetError = () => {
               <nuxt-link to="/signup">{{ $t('general.signUp') }}</nuxt-link>
             </div>
 
-            <div class="prose-sm md:hidden">
-              <nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/reset-password">
+            <div class="md:hidden">
+              <nuxt-link class="prose-sm" to="/reset-password">
                 {{ $t('msg.info.signUp.forgotPassword') }}
               </nuxt-link>
             </div>
@@ -155,13 +150,3 @@ const resetError = () => {
     </v-form>
   </NuxtLayout>
 </template>
-
-<style lang="scss">
-.v-field__field {
-  @apply bg-white dark:(!bg-gray-900 text-white);
-
-  input {
-    @apply bg-white dark:(!bg-gray-700) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
-  }
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 3c01eee925..21477202de 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -71,12 +71,7 @@ const resetError = () => {
         <div
           class="bg-white dark:(!bg-gray-900 !text-white) md:relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
-          <div
-            style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
-            class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
-          >
-            <img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
-          </div>
+          <general-noco-icon />
 
           <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signUp') }}</h1>
 
@@ -128,9 +123,9 @@ const resetError = () => {
               :class="[
                 !valid
                   ? '!opacity-50 !cursor-default'
-                  : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
+                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
diff --git a/packages/nc-gui-v2/windi.config.ts b/packages/nc-gui-v2/windi.config.ts
index 6c901809c4..c04b40c111 100644
--- a/packages/nc-gui-v2/windi.config.ts
+++ b/packages/nc-gui-v2/windi.config.ts
@@ -15,12 +15,10 @@ import colors, { themeColors } from './utils/colorsUtils'
 
 export default defineConfig({
   extract: {
-    include: ['**/*.{vue,html,jsx,tsx}'],
+    include: ['**/*.{vue,html,jsx,tsx,css}'],
     exclude: ['node_modules', '.git'],
   },
 
-  attributify: true,
-
   darkMode: 'class',
 
   plugins: [