diff --git a/frontend/src/components/GroupBy.vue b/frontend/src/components/GroupBy.vue
new file mode 100644
index 00000000..781e33f9
--- /dev/null
+++ b/frontend/src/components/GroupBy.vue
@@ -0,0 +1,40 @@
+<template>
+  <Dropdown :options="options">
+    <template #default="{ open }">
+      <Button :label="__('Group By: Status')">
+        <template #prefix>
+          <DetailsIcon />
+        </template>
+        <template #suffix>
+          <FeatherIcon
+            :name="open ? 'chevron-up' : 'chevron-down'"
+            class="h-4"
+          />
+        </template>
+      </Button>
+    </template>
+  </Dropdown>
+</template>
+<script setup>
+import DetailsIcon from '@/components/icons/DetailsIcon.vue'
+import { Dropdown } from 'frappe-ui';
+import { ref } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const list = defineModel()
+
+const selected = ref('Status')
+
+const options = ref([
+  { label: 'Status', value: 'status' },
+  { label: 'Source', value: 'source' },
+  { label: 'Owner', value: 'owner' },
+  { label: 'Created At', value: 'created_at' },
+])
+</script>