diff --git a/packages/nc-gui-v2/components/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
similarity index 93%
rename from packages/nc-gui-v2/components/PreviewAs.vue
rename to packages/nc-gui-v2/components/general/PreviewAs.vue
index 2fd51d7048..9947902841 100644
--- a/packages/nc-gui-v2/components/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -48,7 +48,12 @@ watch(previewAs, () => window.location.reload())
 </script>
 
 <template>
-  <div v-if="float" class="floating-reset-btn nc-floating-preview-btn px-2" :style="{ top: position.y, left: position.x }">
+  <div
+    v-if="float"
+    v-show="previewAs"
+    class="floating-reset-btn nc-floating-preview-btn px-2"
+    :style="{ top: position.y, left: position.x }"
+  >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
     <div class="divider" />
 
@@ -95,7 +100,7 @@ watch(previewAs, () => window.location.reload())
 
 <style scoped>
 .floating-reset-btn {
-  @apply bg-primary/80 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
+  @apply bg-primary/90 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold
   @apply flex items-center overflow-hidden whitespace-nowrap gap-2 rounded shadow-md;
 }
 
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index a7104621fd..23b56546b5 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports'
+import PreviewAs from '~/components/general/PreviewAs.vue'
 import { TabType } from '~/composables'
 import { openLink } from '~/utils'