diff --git a/packages/nc-gui-v2/pages/projects/index/index.vue b/packages/nc-gui-v2/pages/projects/index/index.vue
index c401c659fc..8e44fe2664 100644
--- a/packages/nc-gui-v2/pages/projects/index/index.vue
+++ b/packages/nc-gui-v2/pages/projects/index/index.vue
@@ -33,53 +33,47 @@ const formatTitle = (title: string) =>
 
 <template>
   <div class="grid grid-cols-2 md:grid-cols-4 3xl:grid-cols-6 gap-6 md:gap-12">
-    <div class="col-span-2 md:col-span-1">
-      <div class="group flex flex-col items-center gap-2">
-        <v-menu>
-          <template #activator="{ props }">
-            <div
-              class="cursor-pointer w-full md:w-1/2 min-w-[150px] shadow-md nc-project-thumbnail opacity-50 hover:(opacity-100 shadow-lg) bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
-              @click="props.onClick"
-            >
-              <MdiPlus />
-            </div>
-            <div class="prose-lg font-semibold">
-              {{ $t('title.newProj') }}
-            </div>
-          </template>
-          <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
-            <div
-              class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-              @click="navigateTo('/projects/create')"
-            >
-              <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-              <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-            </div>
-            <div
-              class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
-              @click="navigateTo('/projects/create-external')"
-            >
-              <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-              <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-            </div>
-          </v-list>
-        </v-menu>
-      </div>
+    <div class="group flex flex-col items-center gap-2">
+      <v-menu>
+        <template #activator="{ props }">
+          <div
+            class="thumbnail !bg-gradient-to-br from-primary to-gray-500 !opacity-25 hover:(!opacity-100 shadow-lg to-primary/50) bg-gray-400"
+            @click="props.onClick"
+          >
+            <MdiPlus />
+          </div>
+          <div class="prose-lg font-semibold">
+            {{ $t('title.newProj') }}
+          </div>
+        </template>
+        <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+          <div
+            class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+            @click="navigateTo('/projects/create')"
+          >
+            <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+            <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+          </div>
+          <div
+            class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+            @click="navigateTo('/projects/create-external')"
+          >
+            <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+            <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+          </div>
+        </v-list>
+      </v-menu>
     </div>
 
     <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
-      <div
-        class="nc-project-thumbnail w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg"
-        :style="{ backgroundColor: getColorByIndex(i) }"
-        @click="openProject(project)"
-      >
+      <div class="thumbnail" :style="{ backgroundColor: getColorByIndex(i) }" @click="openProject(project)">
         {{ formatTitle(project.title) }}
 
-        <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
+        <MdiStarOutline class="star-icon group-hover:opacity-100" @click.stop />
 
         <v-menu>
           <template #activator="{ props }">
-            <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
+            <MdiMenuDown class="menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
           </template>
 
           <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
@@ -99,33 +93,21 @@ const formatTitle = (title: string) =>
 </template>
 
 <style scoped>
-.nc-project-thumbnail {
-  @apply font-bold text-white text-[75px] h-[150px] w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg;
+.thumbnail {
+  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease-in duration-300 hover:(shadow-lg opacity-100);
+  background-image: linear-gradient(#0002, #0002);
 }
 
-.nc-project-option-menu-icon,
-.nc-project-star-icon {
-  width: auto;
-  height: 1.5rem;
-  position: absolute;
-  opacity: 0;
-  transition: 0.3s opacity;
+.menu-icon,
+.star-icon {
+  @apply w-auto opacity-0 absolute h-[1.75rem] transition-opacity duration-300;
 }
 
-.nc-project-star-icon {
+.star-icon {
   @apply top-1 right-1 transform hover:(scale-120 text-yellow-300/75) transition-all duration-100 ease;
 }
 
-.nc-project-option-menu-icon {
+.menu-icon {
   @apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease;
 }
-
-.nc-project-thumbnail {
-  background-image: linear-gradient(#0002, #0002);
-  opacity: 0.5;
-}
-
-.nc-project-thumbnail:hover {
-  opacity: 1;
-}
 </style>