diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 1ec8e5935d..ed7c8d2df5 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,7 +214,7 @@ a {
   }
 
   &:hover::after {
-    @apply !border-0 transform scale-110 ring ring-accent;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
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 3c2f3d4eac..cef0f5cf4b 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -285,28 +285,31 @@ onMounted(() => {
       </Transition>
     </div>
 
-    <div
-      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="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 ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-        :mouse-enter-delay="0.25"
-        :mouse-leave-delay="0"
+    <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"
       >
-        <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>
+        <a-tooltip title="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 ? v$.localState[field.title].$errors[0].$message : '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>
   </div>
 </template>