diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index 78fe72378c..1819b2c6a8 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -3,17 +3,16 @@ interface Props {
   width?: number
   height?: number
   animate?: boolean
-  dark?: boolean
 }
 
-const { width = 90, height = 90, animate = false, dark = false } = defineProps<Props>()
+const { width = 90, height = 90, animate = false } = defineProps<Props>()
 </script>
 
 <template>
   <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
     <div class="relative">
-      <img v-show="dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-      <img v-show="!dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+      <img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      <img class="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
       <template v-if="animate">
         <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 4d13318325..e0934eae82 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -38,14 +38,10 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
-    <div class="flex w-full items-end mt-12">
-      <GeneralPoweredBy :dark="isDark" />
-    </div>
-
     <div
       class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 6f2aa46a44..9b6cca67b7 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -20,102 +20,106 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
-  <div
-    class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
-  >
-    <template v-if="sharedFormView">
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
-        {{ sharedFormView.subheading }}
-      </h2>
-
-      <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
-
-      <template v-else-if="submitted">
-        <div class="flex justify-center">
-          <div v-if="sharedFormView" class="min-w-350px mt-3">
-            <a-alert
-              type="success"
-              class="my-4 text-center"
-              outlined
-              :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-            />
-
-            <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
-              New form will be loaded after {{ secondsRemain }} seconds
-            </p>
-
-            <div v-if="sharedFormView.submit_another_form" class="text-center">
-              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+  <div>
+    <div
+      class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
+    >
+      <template v-if="sharedFormView">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+
+        <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
+          {{ sharedFormView.subheading }}
+        </h2>
+
+        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
+
+        <template v-else-if="submitted">
+          <div class="flex justify-center">
+            <div v-if="sharedFormView" class="min-w-350px mt-3">
+              <a-alert
+                type="success"
+                class="my-4 text-center"
+                outlined
+                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+              />
+
+              <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+                New form will be loaded after {{ secondsRemain }} seconds
+              </p>
+
+              <div v-if="sharedFormView.submit_another_form" class="text-center">
+                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+              </div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
 
-      <template v-else>
-        <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
-          <div class="w-full h-full flex items-center justify-center">
-            <a-spin size="large" />
-          </div>
-        </GeneralOverlay>
-
-        <div class="nc-form-wrapper">
-          <div class="nc-form h-full">
-            <div class="flex flex-col gap-6">
-              <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
-                <div class="flex nc-form-column-label">
-                  <LazySmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(field)"
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-
-                  <LazySmartsheetHeaderCell
-                    v-else
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-                </div>
+        <template v-else>
+          <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
+            <div class="w-full h-full flex items-center justify-center">
+              <a-spin size="large" />
+            </div>
+          </GeneralOverlay>
+
+          <div class="nc-form-wrapper">
+            <div class="nc-form h-full">
+              <div class="flex flex-col gap-6">
+                <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
+                  <div class="flex nc-form-column-label">
+                    <LazySmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(field)"
+                      :column="{ ...field, title: field.label || field.title }"
+                      :required="isRequired(field, field.required)"
+                      :hide-menu="true"
+                    />
+
+                    <LazySmartsheetHeaderCell
+                      v-else
+                      :column="{ ...field, title: field.label || field.title }"
+                      :required="isRequired(field, field.required)"
+                      :hide-menu="true"
+                    />
+                  </div>
 
-                <div>
-                  <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(field)"
-                    class="mt-0 nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                  />
-
-                  <LazySmartsheetCell
-                    v-else
-                    v-model="formState[field.title]"
-                    class="nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                    :edit-enabled="true"
-                  />
-
-                  <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                    <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                      {{ error.$message }}
+                  <div>
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(field)"
+                      class="mt-0 nc-input"
+                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :column="field"
+                    />
+
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="formState[field.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :column="field"
+                      :edit-enabled="true"
+                    />
+
+                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                      <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                        {{ error.$message }}
+                      </div>
+
+                      {{ field.description }}
                     </div>
-
-                    {{ field.description }}
                   </div>
                 </div>
               </div>
-            </div>
 
-            <div class="text-center mt-4">
-              <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
-                {{ $t('general.submit') }}
-              </button>
+              <div class="text-center mt-4">
+                <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
+                  {{ $t('general.submit') }}
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        </template>
       </template>
-    </template>
+    </div>
+
+    <GeneralPoweredBy />
   </div>
 </template>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 8bb6d96f82..5d31023b30 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -151,25 +151,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="w-full grid">
-    <template v-if="sharedFormView">
-      <div class="max-h-33vh max-w-[max(33%,600px)] mx-auto">
-        <div class="h-33vh flex flex-col justify-end">
-          <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-          <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-            {{ sharedFormView.subheading }}
-          </h2>
-        </div>
+  <div ref="el" class="pt-8 md:p-0 w-full h-full flex flex-col">
+    <div
+      v-if="sharedFormView"
+      style="height: max(40vh, 250px); min-height: 250px"
+      class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
+    >
+      <div class="px-4 md:px-0 flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+
+        <h2
+          v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
+          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+        >
+          {{ sharedFormView?.subheading }}
+        </h2>
       </div>
-    </template>
+    </div>
 
     <div class="h-full w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
+          class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -210,7 +215,7 @@ onMounted(() => {
                   {{ error.$message }}
                 </div>
 
-                <div class="block">
+                <div class="block text-[14px]">
                   {{ field.description }}
                 </div>
               </div>
@@ -255,14 +260,6 @@ onMounted(() => {
             </div>
           </div>
 
-          <template v-if="!submitted">
-            <div class="flex-1" />
-
-            <div class="select-none text-center text-gray-500 dark:text-slate-200">
-              {{ index + 1 }} / {{ formColumns?.length }}
-            </div>
-          </template>
-
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
               <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
@@ -294,31 +291,41 @@ onMounted(() => {
       </Transition>
     </div>
 
-    <Transition name="fade">
-      <div
-        v-if="!submitted"
-        class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
-      >
-        <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
-          <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
-            <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
-          </button>
-        </a-tooltip>
-
-        <a-tooltip
-          :title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
-          :mouse-enter-delay="0.25"
-          :mouse-leave-delay="0"
-        >
-          <button class="p-0.5 flex items-center group color-transition" @click="goNext">
-            <MdiChevronRight
-              :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
-              class="text-2xl md:text-md"
-            />
-          </button>
-        </a-tooltip>
+    <template v-if="!submitted">
+      <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200">
+        {{ index + 1 }} / {{ formColumns?.length }}
       </div>
-    </Transition>
+    </template>
+
+    <div class="relative flex w-full items-end">
+      <Transition name="fade">
+        <div
+          v-if="!submitted"
+          class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
+        >
+          <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
+            <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
+              <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
+            </button>
+          </a-tooltip>
+
+          <a-tooltip
+            :title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
+            :mouse-enter-delay="0.25"
+            :mouse-leave-delay="0"
+          >
+            <button class="p-0.5 flex items-center group color-transition" @click="goNext">
+              <MdiChevronRight
+                :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
+                class="text-2xl md:text-md"
+              />
+            </button>
+          </a-tooltip>
+        </div>
+      </Transition>
+
+      <GeneralPoweredBy />
+    </div>
   </div>
 </template>