diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index a1e6378b9a..4452dff71f 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -1,37 +1,36 @@
 <script lang="ts" setup>
-import MdiHeartsCard from '~icons/mdi/cards-heart'
-
 interface Props {
   nav?: boolean
-  img?: boolean
 }
 
-const { nav = false, img = true } = defineProps<Props>()
+const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <v-card :rounded="0" class="dark:bg-gray-900" href="https://github.com/sponsors/nocodb" target="_blank">
-    <v-img v-if="img" src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" />
+  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg" href="https://github.com/sponsors/nocodb" target="_blank">
+    <template #cover>
+      <img class="max-h-[180px]" alt="cover" src="/ants-leaf-cutter.jpeg" />
+    </template>
 
-    <v-card-title v-if="!nav" class="pb-2">
-      {{ $t('msg.info.sponsor.header') }}
-    </v-card-title>
+    <a-card-meta>
+      <template #title>
+        <span v-if="!nav" class="text-xl pb-4">
+          {{ $t('msg.info.sponsor.header') }}
+        </span>
+      </template>
+    </a-card-meta>
 
-    <v-card-text v-if="!nav" class="pb-0">
+    <div v-if="!nav" class="py-5 text-sm">
       {{ $t('msg.info.sponsor.message') }}
-    </v-card-text>
+    </div>
 
-    <v-card-actions class="justify-center">
-      <v-btn color="primary" class="dark:(!text-white)">
-        <MdiHeartsCard class="text-red-500 mr-2" />
-        {{ $t('activity.sponsorUs') }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="flex justify-center">
+      <a-button class="!shadow" size="large">
+        <div class="flex items-center">
+          <mdi-cards-heart class="text-red-500 mr-2" />
+          {{ $t('activity.sponsorUs') }}
+        </div>
+      </a-button>
+    </div>
+  </a-card>
 </template>
-
-<style>
-a img {
-  margin: 0 !important;
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 75bc87d53a..5a1d4c36e4 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -58,97 +58,108 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
-      <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
-        <!-- My Projects -->
-        <b>{{ $t('title.myProject') }}</b>
-
-        <MdiRefresh
-          v-t="['a:project:refresh']"
-          class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
-          @click="loadProjects"
-        ></MdiRefresh>
-      </h1>
-
-      <div class="flex mb-6">
-        <a-input-search
-          v-model:value="filterQuery"
-          class="max-w-[200px] nc-project-page-search"
-          :placeholder="$t('activity.searchProject')"
-        ></a-input-search>
-        <div class="flex-grow"></div>
-
-        <a-dropdown @click.stop>
-          <a-button class="nc-new-project-menu !shadow">
-            <div class="flex align-center">
-              {{ $t('title.newProj') }}
-              <MdiMenuDown class="menu-icon" />
-            </div>
-          </a-button>
-
-          <template #overlay>
-            <a-menu>
-              <div
-                v-t="['c:project:create:xcdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
-                @click="navigateTo('/project/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
-                v-t="['c:project:create:extdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
-                @click="navigateTo('/project/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>
-            </a-menu>
-          </template>
-        </a-dropdown>
-      </div>
-
-      <div v-if="isLoading">
-        <a-skeleton />
-      </div>
-
-      <a-table
-        v-else
-        :custom-row="
-          (record) => ({
-            onClick: () => {
-              $e('a:project:open')
-              navigateTo(`/nc/${record.id}`)
-            },
-          })
-        "
-        :data-source="filteredProjects"
-        :pagination="{ position: ['bottomCenter'] }"
-      >
-        <!--        Title -->
-        <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text }">
-            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text">
-              {{ text }}
-            </div>
-          </template>
-        </a-table-column>
-        <!--        Actions -->
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div class="flex align-center">
-              <MdiEditOutline
-                v-t="['c:project:edit:rename']"
-                class="nc-action-btn"
-                @click.stop="navigateTo(`/project/${text}`)"
-              />
-              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
-            </div>
-          </template>
-        </a-table-column>
-      </a-table>
-    </a-card>
+    <a-row>
+      <a-col :span="8"></a-col>
+      <a-col :span="8" class="!bg-red">
+        <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
+          <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
+            <!-- My Projects -->
+            <b>{{ $t('title.myProject') }}</b>
+
+            <MdiRefresh
+              v-t="['a:project:refresh']"
+              class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
+              @click="loadProjects"
+            ></MdiRefresh>
+          </h1>
+
+          <div class="flex mb-6">
+            <a-input-search
+              v-model:value="filterQuery"
+              class="max-w-[200px] nc-project-page-search"
+              :placeholder="$t('activity.searchProject')"
+            ></a-input-search>
+            <div class="flex-grow"></div>
+
+            <a-dropdown @click.stop>
+              <a-button class="nc-new-project-menu !shadow">
+                <div class="flex align-center">
+                  {{ $t('title.newProj') }}
+                  <MdiMenuDown class="menu-icon" />
+                </div>
+              </a-button>
+
+              <template #overlay>
+                <a-menu>
+                  <div
+                    v-t="['c:project:create:xcdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
+                    @click="navigateTo('/project/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
+                    v-t="['c:project:create:extdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
+                    @click="navigateTo('/project/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>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+
+          <div v-if="isLoading">
+            <a-skeleton />
+          </div>
+
+          <a-table
+            v-else
+            :custom-row="
+              (record) => ({
+                onClick: () => {
+                  $e('a:project:open')
+                  navigateTo(`/nc/${record.id}`)
+                },
+              })
+            "
+            :data-source="filteredProjects"
+            :pagination="{ position: ['bottomCenter'] }"
+          >
+            <!-- Title -->
+            <a-table-column key="title" :title="$t('general.title')" data-index="title">
+              <template #default="{ text }">
+                <div
+                  class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
+                  :title="text"
+                >
+                  {{ text }}
+                </div>
+              </template>
+            </a-table-column>
+            <!-- Actions -->
+            <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
+              <template #default="{ text, record }">
+                <div class="flex align-center">
+                  <MdiEditOutline
+                    v-t="['c:project:edit:rename']"
+                    class="nc-action-btn"
+                    @click.stop="navigateTo(`/project/${text}`)"
+                  />
+                  <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
+                </div>
+              </template>
+            </a-table-column>
+          </a-table>
+        </a-card>
+      </a-col>
+      <a-col :span="8" class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start">
+        <GeneralSponsors />
+      </a-col>
+    </a-row>
   </NuxtLayout>
 </template>