diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 0fbdaa8d0..4ba35285b 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -28,6 +28,7 @@
 		"@tanstack/svelte-query": "^4.29.19",
 		"@trpc/client": "^10.33.0",
 		"@trpc/server": "^10.33.0",
+		"@types/frappe-gantt": "^0.6.1",
 		"@types/js-cookie": "^3.0.3",
 		"@types/lodash-es": "^4.17.7",
 		"@types/nprogress": "^0.2.0",
@@ -50,6 +51,7 @@
 		"eslint-plugin-svelte": "^2.32.2",
 		"flowbite": "^1.6.6",
 		"flowbite-svelte": "^0.39.1",
+		"frappe-gantt": "^0.6.1",
 		"htm": "^3.1.1",
 		"i18next": "^23.0.0",
 		"i18next-browser-languagedetector": "^7.1.0",
@@ -71,7 +73,6 @@
 		"svelte-check": "^3.4.4",
 		"svelte-copy": "^1.4.1",
 		"svelte-dnd-action": "^0.9.22",
-		"svelte-gantt": "4.0.9-beta",
 		"svelte-grid": "^5.1.1",
 		"svelte-i18next": "^2.0.0",
 		"svelte-jsoneditor": "^0.17.8",
diff --git a/apps/frontend/src/lib/gantt/GanttIndex.svelte b/apps/frontend/src/lib/gantt/GanttIndex.svelte
index efbc43697..eeab8de49 100644
--- a/apps/frontend/src/lib/gantt/GanttIndex.svelte
+++ b/apps/frontend/src/lib/gantt/GanttIndex.svelte
@@ -3,6 +3,7 @@
 	import { Card } from 'flowbite-svelte'
 	import type { DateRangeField } from '@undb/core'
 	import GanttConfig from './GanttConfig.svelte'
+	import GanttView from './GanttView.svelte'
 
 	const table = getTable()
 	const view = getView()
@@ -12,8 +13,7 @@
 </script>
 
 {#if field}
-	gantt!!!
-	<!-- <svelte:component this={map[field.type]} {field} /> -->
+	<GanttView {field} />
 {:else}
 	<div class="flex items-center justify-center h-screen w-full bg-gray-100 dark:bg-slate-800/80">
 		<Card class="flex-1">
diff --git a/apps/frontend/src/lib/gantt/GanttView.svelte b/apps/frontend/src/lib/gantt/GanttView.svelte
new file mode 100644
index 000000000..9c3f318ed
--- /dev/null
+++ b/apps/frontend/src/lib/gantt/GanttView.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { getTable, listRecordFn } from '$lib/store/table'
+	import { RecordFactory, type DateRangeField } from '@undb/core'
+	import { endOfMonth, startOfMonth } from 'date-fns'
+	import Gantt from 'frappe-gantt'
+
+	const table = getTable()
+
+	export let field: DateRangeField
+	export let ele: HTMLElement | undefined
+
+	let start = startOfMonth(new Date())
+	let end = endOfMonth(new Date())
+
+	const listRecords = $listRecordFn([
+		{
+			path: field.id.value,
+			type: field.type,
+			operator: '$between',
+			value: [start.toISOString(), end.toISOString()],
+		},
+	])
+
+	$: records = RecordFactory.fromQueryRecords($listRecords?.data?.records ?? [], $table.schema.toIdMap()) ?? []
+
+	$: tasks = records.map((r) => ({
+		id: r.id.value,
+		name: r.getDisplayFieldsValue($table),
+		start: r.valuesJSON[field.id.value]?.[0],
+		end: r.valuesJSON[field.id.value]?.[1],
+		progress: 100,
+		dependencies: '',
+	}))
+
+	let gantt: Gantt | undefined
+	$: if (ele && tasks.length) {
+		gantt = new Gantt(ele, tasks, {
+			view_mode: 'Day',
+		})
+	}
+</script>
+
+{#if $listRecords.isLoading}
+	<span>loading</span>
+{:else}
+	<div class="h-full" bind:this={ele} />
+{/if}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 939013e6b..4c5147eaa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -454,6 +454,9 @@ importers:
       '@trpc/server':
         specifier: ^10.33.0
         version: 10.33.0
+      '@types/frappe-gantt':
+        specifier: ^0.6.1
+        version: 0.6.1
       '@types/js-cookie':
         specifier: ^3.0.3
         version: 3.0.3
@@ -520,6 +523,9 @@ importers:
       flowbite-svelte:
         specifier: ^0.39.1
         version: 0.39.1(svelte@4.0.1)
+      frappe-gantt:
+        specifier: ^0.6.1
+        version: 0.6.1
       htm:
         specifier: ^3.1.1
         version: 3.1.1
@@ -583,9 +589,6 @@ importers:
       svelte-dnd-action:
         specifier: ^0.9.22
         version: 0.9.22(svelte@4.0.1)
-      svelte-gantt:
-        specifier: 4.0.9-beta
-        version: 4.0.9-beta(moment@2.29.4)
       svelte-grid:
         specifier: ^5.1.1
         version: 5.1.1
@@ -5306,6 +5309,10 @@ packages:
       '@types/serve-static': 1.15.1
     dev: true
 
+  /@types/frappe-gantt@0.6.1:
+    resolution: {integrity: sha512-YAYhLkcm+0z6Wx0CwFDj7IINUPczl0Flh/0Co6xC9EkW+KnF2g+85UgSEvNdhzWt4NjBJpTX1WjK5Rpq0UJwaw==}
+    dev: true
+
   /@types/fs-extra@11.0.1:
     resolution: {integrity: sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==}
     dependencies:
@@ -7301,11 +7308,6 @@ packages:
   /consola@2.15.3:
     resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
 
-  /console-clear@1.1.1:
-    resolution: {integrity: sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
@@ -8956,6 +8958,10 @@ packages:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
 
+  /frappe-gantt@0.6.1:
+    resolution: {integrity: sha512-1cSU9vLbwypjzaxnCfnEE03Xr3HlAV2S8dRtjxw62o+amkx1A8bBIFd2jp84mcDdTCM77Ij4LzZBslAKZB8oMg==}
+    dev: true
+
   /fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -9130,11 +9136,6 @@ packages:
   /get-port-please@3.0.1:
     resolution: {integrity: sha512-R5pcVO8Z1+pVDu8Ml3xaJCEkBiiy1VQN9za0YqH8GIi1nIqD4IzQhzY6dDzMRtdS1lyiGlucRzm8IN8wtLIXng==}
 
-  /get-port@3.2.0:
-    resolution: {integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==}
-    engines: {node: '>=4'}
-    dev: true
-
   /get-stream@3.0.0:
     resolution: {integrity: sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==}
     engines: {node: '>=4'}
@@ -10932,11 +10933,6 @@ packages:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
 
-  /local-access@1.1.0:
-    resolution: {integrity: sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==}
-    engines: {node: '>=6'}
-    dev: true
-
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
@@ -11530,10 +11526,6 @@ packages:
       ufo: 1.1.2
     dev: true
 
-  /moment@2.29.4:
-    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
-    dev: true
-
   /mongodb-connection-string-url@2.6.0:
     resolution: {integrity: sha512-WvTZlI9ab0QYtTYnuMLgobULWhokRjtC7db9LtcVfJ+Hsnyr5eo6ZtNAt3Ly24XZScGMelOcGtm7lSn0332tPQ==}
     dependencies:
@@ -13487,11 +13479,6 @@ packages:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
     dev: false
 
-  /semiver@1.1.0:
-    resolution: {integrity: sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==}
-    engines: {node: '>=6'}
-    dev: true
-
   /semver-compare@1.0.0:
     resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
     dev: true
@@ -13740,30 +13727,6 @@ packages:
       semver: 7.0.0
     dev: true
 
-  /sirv-cli@1.0.14:
-    resolution: {integrity: sha512-yyUTNr984ANKDloqepkYbBSqvx3buwYg2sQKPWjSU+IBia5loaoka2If8N9CMwt8AfP179cdEl7kYJ//iWJHjQ==}
-    engines: {node: '>= 10'}
-    hasBin: true
-    dependencies:
-      console-clear: 1.1.1
-      get-port: 3.2.0
-      kleur: 3.0.3
-      local-access: 1.1.0
-      sade: 1.8.1
-      semiver: 1.1.0
-      sirv: 1.0.19
-      tinydate: 1.3.0
-    dev: true
-
-  /sirv@1.0.19:
-    resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@polka/url': 1.0.0-next.21
-      mrmime: 1.0.1
-      totalist: 1.1.0
-    dev: true
-
   /sirv@2.0.3:
     resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
     engines: {node: '>= 10'}
@@ -14371,15 +14334,6 @@ packages:
       '@floating-ui/dom': 1.2.9
     dev: true
 
-  /svelte-gantt@4.0.9-beta(moment@2.29.4):
-    resolution: {integrity: sha512-uWFKUekZH3xYechaLuPwQ8HMDzL5XRLJiQzy4Iz97dbVC+scFlPnjqesWSeoGQhDFxPtnrB45nqf9n+Qp6MYJw==}
-    peerDependencies:
-      moment: ^2.22.2
-    dependencies:
-      moment: 2.29.4
-      sirv-cli: 1.0.14
-    dev: true
-
   /svelte-grid@5.1.1:
     resolution: {integrity: sha512-PJTC4PUejb8RzcUjymWnf1HALqseUBwxl+p+i5uJlDIC1+zXKok1J16IDoHQxXhNj+INcF9KHE7hIm++NurSAQ==}
     dev: true
@@ -14813,11 +14767,6 @@ packages:
     resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
     dev: true
 
-  /tinydate@1.3.0:
-    resolution: {integrity: sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==}
-    engines: {node: '>=4'}
-    dev: true
-
   /tinypool@0.5.0:
     resolution: {integrity: sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==}
     engines: {node: '>=14.0.0'}
@@ -14875,11 +14824,6 @@ packages:
       ieee754: 1.2.1
     dev: true
 
-  /totalist@1.1.0:
-    resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==}
-    engines: {node: '>=6'}
-    dev: true
-
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}