diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 6ca23e21d3..fc2526711e 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -113,7 +113,7 @@ const logout = () => {
         </Transition>
       </a-tooltip>
 
-      <div class="w-full h-full overflow-hidden">
+      <div style="height: calc(100% - var(--header-height))" class="w-full h-full overflow-hidden">
         <slot />
       </div>
     </a-layout>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 111ec3ce3e..c12ae11436 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -1,8 +1,17 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { computed, navigateTo, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import {
+  computed,
+  extractSdkResponseErrorMsg,
+  navigateTo,
+  onMounted,
+  ref,
+  useApi,
+  useNuxtApp,
+  useSidebar,
+  useUIPermission,
+} from '#imports'
 
 const { $e } = useNuxtApp()
 
@@ -54,8 +63,8 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <div class="flex gap-6 py-6 px-12">
-      <div>
+    <div class="flex flex-col md:flex-row flex-wrap gap-6 py-6 px-12">
+      <div class="hidden xl:(block)">
         <GeneralSponsors />
       </div>
 
@@ -69,16 +78,17 @@ onMounted(() => {
               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">
+          <div class="order-1 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>
+            />
+
+            <div class="flex-grow" />
 
             <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
               <a-button class="nc-new-project-menu !shadow">
@@ -96,14 +106,17 @@ onMounted(() => {
                     @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>
@@ -156,8 +169,12 @@ onMounted(() => {
         </a-card>
       </div>
 
-      <div>
+      <div class="flex gap-6 md:block">
         <GeneralSocialCard />
+
+        <div class="block mt-0 md:(!mt-6) xl:hidden">
+          <GeneralSponsors />
+        </div>
       </div>
     </div>
   </NuxtLayout>