diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 4b246db180..465c71af0f 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -86,12 +87,14 @@ declare module '@vue/runtime-core' {
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -104,6 +107,7 @@ declare module '@vue/runtime-core' {
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
@@ -116,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
@@ -124,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -141,12 +147,14 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -155,6 +163,7 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index e7d2e1cc88..2ac4a21ef2 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { onUnmounted, useEventListener, useGlobal, watch } from '#imports'
-import { useState } from '#app'
+import { onUnmounted, useEventListener, useGlobal, useState, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
@@ -54,13 +53,14 @@ watch(previewAs, () => window.location.reload())
     :style="{ top: position.y, left: position.x }"
   >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
+
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
       <span>Preview as :</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
-        <a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
+        <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
           >{{ role.title }}
         </a-radio>
       </a-radio-group>
@@ -77,8 +77,8 @@ watch(previewAs, () => window.location.reload())
   <template v-else>
     <template v-for="role of roleList" :key="role.title">
       <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
-        <div class="p-1 flex gap-2 items-center">
-          <component :is="roleIcon[role.title]" />
+        <div class="nc-project-menu-item group">
+          <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
 
           <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
         </div>
@@ -87,8 +87,8 @@ watch(previewAs, () => window.location.reload())
 
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
-        <div class="p-1 flex gap-2 items-center">
-          <mdi-close />
+        <div class="nc-project-menu-item group">
+          <MdiClose class="group-hover:text-pink-500" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
         </div>
@@ -98,6 +98,10 @@ watch(previewAs, () => window.location.reload())
 </template>
 
 <style scoped>
+.nc-project-menu-item {
+  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+}
+
 .floating-reset-btn {
   @apply z-1000 index-100 fixed text-white
   @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;