diff --git a/packages/nc-gui/components/smartsheet-toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet-toolbar/StackedBy.vue
new file mode 100644
index 0000000000..630c9fca5b
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet-toolbar/StackedBy.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { ColumnType, GalleryType } from 'nocodb-sdk'
+import { ViewTypes, isVirtualCol } from 'nocodb-sdk'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useNuxtApp,
+  useViewColumns,
+  watch,
+} from '#imports'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
+
+const meta = inject(MetaInj)!
+
+const activeView = inject(ActiveViewInj)!
+
+const reloadDataHook = inject(ReloadViewDataHookInj)!
+
+const rootFields = inject(FieldsInj)
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const isPublic = inject(IsPublicInj, ref(false))
+
+const { $api, $e } = useNuxtApp()
+
+const {
+  showSystemFields,
+  sortedAndFilteredFields,
+  fields,
+  loadViewColumns,
+  filteredFieldList,
+  filterQuery,
+  showAll,
+  hideAll,
+  saveOrUpdate,
+  metaColumnById,
+} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+
+watch(
+  () => (activeView.value as any)?.id,
+  async (newVal, oldVal) => {
+    if (newVal !== oldVal && meta.value) {
+      await loadViewColumns()
+    }
+  },
+  { immediate: true },
+)
+
+const coverImageColumnId = computed({
+  get: () =>
+    activeView.value?.type === ViewTypes.GALLERY ? (activeView.value?.view as GalleryType).fk_cover_image_col_id : undefined,
+  set: async (val) => {
+    if (val && activeView.value.type === ViewTypes.GALLERY && activeView.value.id && activeView.value.view) {
+      await $api.dbView.galleryUpdate(activeView.value.id, {
+        ...activeView.value.view,
+        fk_cover_image_col_id: val,
+      })
+      ;(activeView.value?.view as GalleryType).fk_cover_image_col_id = val
+      reloadDataHook.trigger()
+    }
+  },
+})
+
+const getIcon = (c: ColumnType) =>
+  h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+    columnMeta: c,
+  })
+</script>
+
+<template>
+  <a-dropdown :trigger="['click']">
+    <div>
+      <a-button v-t="['c:stacked-by']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
+        <div class="flex items-center gap-1">
+          <mdi-arrow-down-drop-circle-outline />
+          <!-- TODO: update the title -->
+          <span class="text-capitalize !text-sm font-weight-normal">Stacked By XXX</span>
+
+          <MdiMenuDown class="text-grey" />
+        </div>
+      </a-button>
+    </div>
+    <template #overlay>
+      <div
+        class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
+        @click.stop
+      >
+        <div>
+          <!-- TODO: i18n -->
+          <span class="font-bold">Choose a grouping field</span>
+          <a-divider class="!my-2" />
+        </div>
+        <div class="nc-fields-list py-1">
+          <div class="grouping-field">
+            <!-- TODO: add v-model:value -->
+            <a-radio-group>
+              <!-- TODO: filter field - only allow single select -->
+              <a-radio v-for="field of fields" :key="field.id" class="h-[30px] !leading-[30px]" :value="field.id">
+                {{ field.title }}
+              </a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-dropdown>
+</template>