diff --git a/package.json b/package.json
index fb39368..bc357c4 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
@@ -90,7 +91,7 @@
     "pnpm": "^9.5.0",
     "postcss": "^8.4.39",
     "posthog-js": "^1.148.0",
-    "r2r-js": "^0.3.10",
+    "r2r-js": "file:/Users/nolantremelling/R2R/js/sdk/r2r-js-0.3.10.tgz",
     "radix-ui": "^1.0.1",
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e4ea61..f957af6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.0
         version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menubar':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -178,16 +181,16 @@ importers:
         version: 5.24.1
       next:
         specifier: 14.2.5
-        version: 14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
+        version: 14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nextra:
         specifier: ^2.13.4
-        version: 2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nextra-theme-docs:
         specifier: ^2.13.4
-        version: 2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(nextra@2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(nextra@2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       pnpm:
         specifier: ^9.5.0
         version: 9.10.0
@@ -198,8 +201,8 @@ importers:
         specifier: ^1.148.0
         version: 1.161.5
       r2r-js:
-        specifier: ^0.3.10
-        version: 0.3.10
+        specifier: file:/Users/nolantremelling/R2R/js/sdk/r2r-js-0.3.10.tgz
+        version: file:../R2R/js/sdk/r2r-js-0.3.10.tgz
       radix-ui:
         specifier: ^1.0.1
         version: 1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -329,20 +332,20 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@babel/code-frame@7.25.9':
-    resolution: {integrity: sha512-z88xeGxnzehn2sqZ8UdGQEvYErF1odv2CftxInpSYJt6uHuPe9YjahKZITGs3l5LeI9d2ROG+obuDAoSlqbNfQ==}
+  '@babel/code-frame@7.26.0':
+    resolution: {integrity: sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.25.9':
-    resolution: {integrity: sha512-yD+hEuJ/+wAJ4Ox2/rpNv5HIuPG82x3ZlQvYVn8iYCprdxzE7P1udpGF1jyjQVBU4dgznN+k2h103vxZ7NdPyw==}
+  '@babel/compat-data@7.26.0':
+    resolution: {integrity: sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.25.9':
-    resolution: {integrity: sha512-WYvQviPw+Qyib0v92AwNIrdLISTp7RfDkM7bPqBvpbnhY4wq8HvHBZREVdYDXk98C8BkOIVnHAY3yvj7AVISxQ==}
+  '@babel/core@7.26.0':
+    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.9':
-    resolution: {integrity: sha512-omlUGkr5EaoIJrhLf9CJ0TvjBRpd9+AXRG//0GEQ9THSo8wPiTlbpy1/Ow8ZTrbXpjd9FHXfbFQx32I04ht0FA==}
+  '@babel/generator@7.26.0':
+    resolution: {integrity: sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-compilation-targets@7.25.9':
@@ -353,8 +356,8 @@ packages:
     resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.25.9':
-    resolution: {integrity: sha512-TvLZY/F3+GvdRYFZFyxMvnsKi+4oJdgZzU3BoGN9Uc2d9C6zfNwJcKKhjqLAhK8i46mv93jsO74fDh3ih6rpHA==}
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -363,10 +366,6 @@ packages:
     resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-simple-access@7.25.9':
-    resolution: {integrity: sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.25.9':
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
@@ -379,16 +378,12 @@ packages:
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.25.9':
-    resolution: {integrity: sha512-oKWp3+usOJSzDZOucZUAMayhPz/xVjzymyDzUN8dk0Wd3RWMlGLXi07UCQ/CgQVb8LvXx3XBajJH4XGgkt7H7g==}
+  '@babel/helpers@7.26.0':
+    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.25.9':
-    resolution: {integrity: sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.25.9':
-    resolution: {integrity: sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==}
+  '@babel/parser@7.26.0':
+    resolution: {integrity: sha512-aP8x5pIw3xvYr/sXT+SEUwyhrXT8rUJRZltK/qN3Db80dcKpTett8cJxHyjk+xYSVXvNnl2SfcJVjbwxpOSscA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -413,8 +408,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.25.9':
-    resolution: {integrity: sha512-u3EN9ub8LyYvgTnrgp8gboElouayiwPdnM7x5tcnW3iSt09/lQYPwMNK40I9IUxo7QOZhAsPHCmmuO7EPdruqg==}
+  '@babel/plugin-syntax-import-attributes@7.26.0':
+    resolution: {integrity: sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -495,8 +490,8 @@ packages:
     resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.9':
-    resolution: {integrity: sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==}
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
   '@braintree/sanitize-url@6.0.4':
@@ -1839,6 +1834,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menubar@1.1.2':
+    resolution: {integrity: sha512-cKmj5Gte7LVyuz+8gXinxZAZECQU+N7aq5pw7kUPpx3xjnDXDbsdzHtCCD2W72bwzy74AvrqdYnKYS42ueskUQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-navigation-menu@1.2.1':
     resolution: {integrity: sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==}
     peerDependencies:
@@ -3690,10 +3698,6 @@ packages:
     resolution: {integrity: sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==}
     engines: {node: '>=4'}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -4694,10 +4698,6 @@ packages:
     resolution: {integrity: sha512-P+1n3MnwjR/Epg9BBo1KT8qbye2g2Ou4sFumihwt6I4tsUX7jnLcX4BTOSKg/B1ZrIYMN9FcEnG4x5a7NB8Eng==}
     engines: {node: '>=0.10.0'}
 
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -5992,8 +5992,8 @@ packages:
   posthog-js@1.161.5:
     resolution: {integrity: sha512-KGkb12grSQvGRauH6z+AUB83c4dgWqzmJFDjyMXarWRafaLN80HzjN1jk806x27HvdDXi21jtwiXekioWzEQ9g==}
 
-  posthog-js@1.174.3:
-    resolution: {integrity: sha512-fRLncd3jkT9Y7gLiyQe8v8sJ9yuTIiQBBWcYQ8l+vv+m504LWFtxl+/JZtHXPhaG3Eyf7AzZ/Kafkw8jorWV9w==}
+  posthog-js@1.176.0:
+    resolution: {integrity: sha512-T5XKNtRzp7q6CGb7Vc7wAI76rWap9fiuDUPxPsyPBPDkreKya91x9RIsSapAVFafwD1AEin1QMczCmt9Le9BWw==}
 
   posthog-node@4.2.1:
     resolution: {integrity: sha512-l+fsjYEkTik3m/G0pE7gMr4qBJP84LhK779oQm6MBzhBGpd4By4qieTW+4FUAlNCyzQTynn3Nhsa50c0IELSxQ==}
@@ -6041,8 +6041,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  r2r-js@0.3.10:
-    resolution: {integrity: sha512-cILHZQr2dSxZeC+X29ptpEz7SeytY8ewoc28r+OFKdMMmSMUbgqTaiDlewmeIq3laWEbFqRHGDOUoBMgtkLksA==}
+  r2r-js@file:../R2R/js/sdk/r2r-js-0.3.10.tgz:
+    resolution: {integrity: sha512-2RzqERBFePVKypRrwzObocieShjIrvi8WCv3zryj6t2hC2Ygqip66fS6I30aHsmar/4bYv0ADBHTzjhZTpBqMw==, tarball: file:../R2R/js/sdk/r2r-js-0.3.10.tgz}
+    version: 0.3.10
 
   radix-ui@1.0.1:
     resolution: {integrity: sha512-qfGibbqtbOlxP3b+1JjbLUc8Q7+e9DL8gFycLtkBkoAQyUkKuHAEBfFUcyG5MaQHjqRuML+YLtt/R1/dUYQafQ==}
@@ -6556,10 +6557,6 @@ packages:
     resolution: {integrity: sha512-ycQR/UbvI9xIlEdQT1TQqwoXtEldExbCEAJgRo5YXlmSKjv6ThHnP9/vwGa1gr19Gfw+LkFd7KqYMhzrRC5JYw==}
     engines: {node: '>=4'}
 
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -7064,25 +7061,26 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@babel/code-frame@7.25.9':
+  '@babel/code-frame@7.26.0':
     dependencies:
-      '@babel/highlight': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
       picocolors: 1.1.0
 
-  '@babel/compat-data@7.25.9': {}
+  '@babel/compat-data@7.26.0': {}
 
-  '@babel/core@7.25.9':
+  '@babel/core@7.26.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.25.9
-      '@babel/generator': 7.25.9
+      '@babel/code-frame': 7.26.0
+      '@babel/generator': 7.26.0
       '@babel/helper-compilation-targets': 7.25.9
-      '@babel/helper-module-transforms': 7.25.9(@babel/core@7.25.9)
-      '@babel/helpers': 7.25.9
-      '@babel/parser': 7.25.9
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helpers': 7.26.0
+      '@babel/parser': 7.26.0
       '@babel/template': 7.25.9
       '@babel/traverse': 7.25.9
-      '@babel/types': 7.25.9
+      '@babel/types': 7.26.0
       convert-source-map: 2.0.0
       debug: 4.3.7
       gensync: 1.0.0-beta.2
@@ -7091,16 +7089,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.25.9':
+  '@babel/generator@7.26.0':
     dependencies:
-      '@babel/types': 7.25.9
+      '@babel/parser': 7.26.0
+      '@babel/types': 7.26.0
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 3.0.2
 
   '@babel/helper-compilation-targets@7.25.9':
     dependencies:
-      '@babel/compat-data': 7.25.9
+      '@babel/compat-data': 7.26.0
       '@babel/helper-validator-option': 7.25.9
       browserslist: 4.24.0
       lru-cache: 5.1.1
@@ -7109,15 +7108,14 @@ snapshots:
   '@babel/helper-module-imports@7.25.9':
     dependencies:
       '@babel/traverse': 7.25.9
-      '@babel/types': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.25.9(@babel/core@7.25.9)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-module-imports': 7.25.9
-      '@babel/helper-simple-access': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
       '@babel/traverse': 7.25.9
     transitivePeerDependencies:
@@ -7125,118 +7123,104 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.25.9': {}
 
-  '@babel/helper-simple-access@7.25.9':
-    dependencies:
-      '@babel/traverse': 7.25.9
-      '@babel/types': 7.25.9
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-string-parser@7.25.9': {}
 
   '@babel/helper-validator-identifier@7.25.9': {}
 
   '@babel/helper-validator-option@7.25.9': {}
 
-  '@babel/helpers@7.25.9':
+  '@babel/helpers@7.26.0':
     dependencies:
       '@babel/template': 7.25.9
-      '@babel/types': 7.25.9
+      '@babel/types': 7.26.0
 
-  '@babel/highlight@7.25.9':
+  '@babel/parser@7.26.0':
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.0
-
-  '@babel/parser@7.25.9':
-    dependencies:
-      '@babel/types': 7.25.9
+      '@babel/types': 7.26.0
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-attributes@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
   '@babel/runtime@7.25.6':
@@ -7245,23 +7229,23 @@ snapshots:
 
   '@babel/template@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.25.9
-      '@babel/parser': 7.25.9
-      '@babel/types': 7.25.9
+      '@babel/code-frame': 7.26.0
+      '@babel/parser': 7.26.0
+      '@babel/types': 7.26.0
 
   '@babel/traverse@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.25.9
-      '@babel/generator': 7.25.9
-      '@babel/parser': 7.25.9
+      '@babel/code-frame': 7.26.0
+      '@babel/generator': 7.26.0
+      '@babel/parser': 7.26.0
       '@babel/template': 7.25.9
-      '@babel/types': 7.25.9
+      '@babel/types': 7.26.0
       debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.25.9':
+  '@babel/types@7.26.0':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
@@ -7526,7 +7510,7 @@ snapshots:
 
   '@jest/transform@29.7.0':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
       babel-plugin-istanbul: 6.1.1
@@ -9128,6 +9112,24 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-menubar@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-navigation-menu@1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -11578,24 +11580,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-preset-current-node-syntax@1.1.0(@babel/core@7.25.9):
-    dependencies:
-      '@babel/core': 7.25.9
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.9)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.9)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.9)
-      '@babel/plugin-syntax-import-attributes': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.9)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.9)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.9)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.9)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.9)
+  babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.0):
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.0)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.0)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.0)
 
   bail@2.0.2: {}
 
@@ -11693,12 +11695,6 @@ snapshots:
       escape-string-regexp: 1.0.5
       supports-color: 4.5.0
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -12917,8 +12913,6 @@ snapshots:
 
   has-flag@2.0.0: {}
 
-  has-flag@3.0.0: {}
-
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
@@ -13301,8 +13295,8 @@ snapshots:
 
   istanbul-lib-instrument@5.2.1:
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/parser': 7.25.9
+      '@babel/core': 7.26.0
+      '@babel/parser': 7.26.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -13365,7 +13359,7 @@ snapshots:
 
   jest-message-util@29.7.0:
     dependencies:
-      '@babel/code-frame': 7.25.9
+      '@babel/code-frame': 7.26.0
       '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
@@ -13385,15 +13379,15 @@ snapshots:
 
   jest-snapshot@29.7.0:
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/generator': 7.25.9
-      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.25.9)
-      '@babel/types': 7.25.9
+      '@babel/core': 7.26.0
+      '@babel/generator': 7.26.0
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
       '@jest/expect-utils': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.25.9)
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
       chalk: 4.1.2
       expect: 29.7.0
       graceful-fs: 4.2.11
@@ -14401,15 +14395,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  next-seo@6.6.0(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-seo@6.6.0(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
+      next: 14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next-themes@0.2.1(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.2.1(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
+      next: 14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -14418,7 +14412,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0):
+  next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0):
     dependencies:
       '@next/env': 14.2.5
       '@swc/helpers': 0.5.5
@@ -14428,7 +14422,7 @@ snapshots:
       postcss: 8.4.31
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(@babel/core@7.25.9)(react@18.3.1)
+      styled-jsx: 5.1.1(@babel/core@7.26.0)(react@18.3.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.5
       '@next/swc-darwin-x64': 14.2.5
@@ -14444,7 +14438,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(nextra@2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra-theme-docs@2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(nextra@2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@popperjs/core': 2.11.8
@@ -14455,16 +14449,16 @@ snapshots:
       git-url-parse: 13.1.1
       intersection-observer: 0.12.2
       match-sorter: 6.3.4
-      next: 14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
-      next-seo: 6.6.0(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-themes: 0.2.1(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nextra: 2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
+      next-seo: 6.6.0(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-themes: 0.2.1(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nextra: 2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.23.8
 
-  nextra@2.13.4(next@14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra@2.13.4(next@14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mdx-js/mdx': 2.3.0
@@ -14478,7 +14472,7 @@ snapshots:
       gray-matter: 4.0.3
       katex: 0.16.11
       lodash.get: 4.4.2
-      next: 14.2.5(@babel/core@7.25.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
+      next: 14.2.5(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.78.0)
       next-mdx-remote: 4.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       p-limit: 3.1.0
       react: 18.3.1
@@ -14754,7 +14748,7 @@ snapshots:
       preact: 10.24.0
       web-vitals: 4.2.3
 
-  posthog-js@1.174.3:
+  posthog-js@1.176.0:
     dependencies:
       core-js: 3.38.1
       fflate: 0.4.8
@@ -14802,13 +14796,13 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  r2r-js@0.3.10:
+  r2r-js@file:../R2R/js/sdk/r2r-js-0.3.10.tgz:
     dependencies:
       '@jest/globals': 29.7.0
       '@rrweb/types': 2.0.0-alpha.17
       axios: 1.7.7
       form-data: 4.0.1
-      posthog-js: 1.174.3
+      posthog-js: 1.176.0
       posthog-node: 4.2.1
       rrweb-snapshot: 2.0.0-alpha.4
       uuid: 10.0.0
@@ -15473,12 +15467,12 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.1(@babel/core@7.25.9)(react@18.3.1):
+  styled-jsx@5.1.1(@babel/core@7.26.0)(react@18.3.1):
     dependencies:
       client-only: 0.0.1
       react: 18.3.1
     optionalDependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.26.0
 
   stylis@4.3.4: {}
 
@@ -15496,10 +15490,6 @@ snapshots:
     dependencies:
       has-flag: 2.0.0
 
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
diff --git a/src/components/ChatDemo/CreateDialog.tsx b/src/components/ChatDemo/CreateDialog.tsx
new file mode 100644
index 0000000..e0f2b1c
--- /dev/null
+++ b/src/components/ChatDemo/CreateDialog.tsx
@@ -0,0 +1,214 @@
+import { Plus, X } from 'lucide-react';
+import React, { useState } from 'react';
+
+import { Button } from '@/components/ui/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input'; // Assuming you have this
+import { Textarea } from '@/components/ui/textarea'; // Assuming you have this
+
+interface CreateDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateChunks: (
+    chunks: Array<{ text: string }>,
+    documentId?: string,
+    metadata?: Record<string, any>
+  ) => Promise<void>;
+}
+
+interface ChunkInput {
+  id: number;
+  text: string;
+}
+
+export const CreateDialog: React.FC<CreateDialogProps> = ({
+  isOpen,
+  onClose,
+  onCreateChunks,
+}) => {
+  const [chunks, setChunks] = useState<ChunkInput[]>([{ id: 1, text: '' }]);
+  const [documentId, setDocumentId] = useState<string>('');
+  const [metadata, setMetadata] = useState<string>('');
+  const [isMetadataValid, setIsMetadataValid] = useState<boolean>(true);
+  const [isDocumentIdValid, setIsDocumentIdValid] = useState<boolean>(true);
+
+  const validateMetadata = (value: string) => {
+    if (!value) {
+      setIsMetadataValid(true);
+      return;
+    }
+
+    try {
+      JSON.parse(value);
+      setIsMetadataValid(true);
+    } catch {
+      setIsMetadataValid(false);
+    }
+  };
+
+  const validateDocumentId = (value: string) => {
+    if (!value) {
+      setIsDocumentIdValid(true);
+      return;
+    }
+
+    const uuidRegex =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    setIsDocumentIdValid(uuidRegex.test(value));
+  };
+
+  const handleMetadataChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setMetadata(value);
+    validateMetadata(value);
+  };
+
+  const handleDocumentIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setDocumentId(value);
+    validateDocumentId(value);
+  };
+
+  const addChunk = () => {
+    const newId =
+      chunks.length > 0 ? Math.max(...chunks.map((c) => c.id)) + 1 : 1;
+    setChunks([...chunks, { id: newId, text: '' }]);
+  };
+
+  const removeChunk = (id: number) => {
+    if (chunks.length > 1) {
+      setChunks(chunks.filter((chunk) => chunk.id !== id));
+    }
+  };
+
+  const updateChunkText = (id: number, text: string) => {
+    setChunks(
+      chunks.map((chunk) => (chunk.id === id ? { ...chunk, text } : chunk))
+    );
+  };
+
+  const handleCreate = async () => {
+    try {
+      await onCreateChunks(
+        chunks.map((chunk) => ({ text: chunk.text })),
+        documentId || undefined,
+        metadata ? JSON.parse(metadata) : undefined
+      );
+      // Reset form
+      setChunks([{ id: 1, text: '' }]);
+      setDocumentId('');
+      setMetadata('');
+      onClose();
+    } catch (error) {
+      console.error('Error creating chunks:', error);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Create Chunks</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Optional Document ID */}
+          <div>
+            <label className="block text-sm font-medium mb-1">
+              Document ID
+            </label>
+            <Input
+              value={documentId}
+              onChange={handleDocumentIdChange}
+              placeholder="Optional UUID"
+              className={`${
+                !isDocumentIdValid
+                  ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                  : ''
+              }`}
+            />
+            {!isDocumentIdValid && (
+              <p className="mt-1 text-sm text-red-500">Invalid UUID format</p>
+            )}
+          </div>
+
+          {/* Chunks */}
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <label className="block text-sm font-medium">Chunks</label>
+              <Button
+                onClick={addChunk}
+                color="secondary"
+                className="flex items-center gap-1"
+              >
+                <Plus className="h-4 w-4" />
+                Add Chunk
+              </Button>
+            </div>
+
+            {chunks.map((chunk) => (
+              <div key={chunk.id} className="relative">
+                <Textarea
+                  value={chunk.text}
+                  onChange={(e) => updateChunkText(chunk.id, e.target.value)}
+                  placeholder="Enter chunk text"
+                  rows={3}
+                  className="pr-8"
+                />
+                {chunks.length > 1 && (
+                  <button
+                    onClick={() => removeChunk(chunk.id)}
+                    className="absolute top-2 right-2 text-red-500 hover:text-red-700"
+                  >
+                    <X size={16} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Metadata */}
+          <div>
+            <label className="block text-sm font-medium mb-1">Metadata</label>
+            <Textarea
+              value={metadata}
+              onChange={handleMetadataChange}
+              placeholder='Optional JSON: {"key": "value"}'
+              rows={4}
+              className={`${
+                !isMetadataValid
+                  ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                  : ''
+              }`}
+            />
+            {!isMetadataValid && (
+              <p className="mt-1 text-sm text-red-500">Invalid JSON format</p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 mt-4">
+          <Button onClick={onClose} color="secondary">
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={
+              chunks.some((chunk) => !chunk.text.trim()) ||
+              !isMetadataValid ||
+              !isDocumentIdValid
+            }
+            color="filled"
+          >
+            Create Chunks
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/components/ChatDemo/DocumentsTable.tsx b/src/components/ChatDemo/DocumentsTable.tsx
index d3f7435..c3ba0c6 100644
--- a/src/components/ChatDemo/DocumentsTable.tsx
+++ b/src/components/ChatDemo/DocumentsTable.tsx
@@ -17,7 +17,7 @@ import {
   PopoverContent,
 } from '@/components/ui/popover';
 import { useToast } from '@/components/ui/use-toast';
-import { IngestionStatus, DocumentInfoType } from '@/types';
+import { IngestionStatus, KGExtractionStatus, DocumentInfoType } from '@/types';
 
 interface DocumentsTableProps {
   documents: DocumentInfoType[];
@@ -45,6 +45,8 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
   onSelectItem,
   selectedItems,
   hideActions = false,
+  visibleColumns,
+  onToggleColumn,
 }) => {
   const { toast } = useToast();
   const [selectedDocumentId, setSelectedDocumentId] = useState('');
@@ -56,27 +58,13 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
   }>({ key: 'title', order: 'asc' });
   const [filters, setFilters] = useState<Record<string, any>>({
     ingestion_status: ['success', 'failed', 'pending'],
+    kg_extraction_status: ['success', 'failed', 'pending'],
   });
   const [currentPage, setCurrentPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState('');
-  const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>(
-    {}
-  );
 
   const itemsPerPage = 10;
 
-  useEffect(() => {
-    const initialVisibility: Record<string, boolean> = {};
-    columns.forEach((col) => {
-      initialVisibility[col.key] = col.selected !== false;
-    });
-    setVisibleColumns(initialVisibility);
-  }, []);
-
-  const handleToggleColumn = (columnKey: string, isVisible: boolean) => {
-    setVisibleColumns((prev) => ({ ...prev, [columnKey]: isVisible }));
-  };
-
   const mapIngestionStatus = (status: string): IngestionStatus => {
     const lowerStatus = status?.toLowerCase();
     if (lowerStatus === 'success') {
@@ -88,11 +76,22 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
     return IngestionStatus.PENDING;
   };
 
+  const mapKGExtractionStatus = (status: string): KGExtractionStatus => {
+    const lowerStatus = status?.toLowerCase();
+    if (lowerStatus === 'success') {
+      return KGExtractionStatus.SUCCESS;
+    }
+    if (lowerStatus === 'failed') {
+      return KGExtractionStatus.FAILED;
+    }
+    return KGExtractionStatus.PENDING;
+  };
+
   const mappedDocuments = useMemo(() => {
     return documents.map((doc) => ({
       ...doc,
       ingestion_status: mapIngestionStatus(doc.ingestion_status),
-      kg_extraction_status: mapIngestionStatus(doc.kg_extraction_status),
+      kg_extraction_status: mapKGExtractionStatus(doc.kg_extraction_status),
     }));
   }, [documents]);
 
@@ -148,13 +147,13 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
       renderCell: (doc) => {
         let variant: 'success' | 'destructive' | 'pending' = 'pending';
         switch (doc.kg_extraction_status) {
-          case IngestionStatus.SUCCESS:
+          case KGExtractionStatus.SUCCESS:
             variant = 'success';
             break;
-          case IngestionStatus.FAILED:
+          case KGExtractionStatus.FAILED:
             variant = 'destructive';
             break;
-          case IngestionStatus.PENDING:
+          case KGExtractionStatus.PENDING:
             variant = 'pending';
             break;
         }
@@ -263,7 +262,7 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
                             checked: boolean | 'indeterminate'
                           ) => {
                             if (typeof checked === 'boolean') {
-                              handleToggleColumn(col.key, checked);
+                              onToggleColumn(col.key, checked);
                             }
                           }}
                         />
@@ -323,7 +322,7 @@ const DocumentsTable: React.FC<DocumentsTableProps> = ({
 
           <Table
             data={filteredDocuments}
-            columns={columns.filter((col) => visibleColumns[col.key] !== false)}
+            columns={columns.filter((col) => visibleColumns[col.key] === true)}
             onSelectAll={handleSelectAllInternal}
             onSelectItem={handleSelectItemInternal}
             selectedItems={selectedItems}
diff --git a/src/components/ChatDemo/Table.tsx b/src/components/ChatDemo/Table.tsx
index 416b434..9bc2590 100644
--- a/src/components/ChatDemo/Table.tsx
+++ b/src/components/ChatDemo/Table.tsx
@@ -1,12 +1,6 @@
-import {
-  ChevronUpSquare,
-  ChevronDownSquare,
-  Filter,
-  SlidersHorizontal,
-} from 'lucide-react';
+import { ChevronUpSquare, ChevronDownSquare, Filter } from 'lucide-react';
 import React, { useState, useMemo } from 'react';
 
-import { Button } from '@/components/ui/Button';
 import { Checkbox } from '@/components/ui/checkbox';
 import CopyableContent from '@/components/ui/CopyableContent';
 import Pagination from '@/components/ui/pagination';
@@ -82,15 +76,21 @@ function Table<T extends { [key: string]: any }>({
   const filteredAndSortedData = useMemo(() => {
     let result = [...data];
 
-    // Apply filters
     Object.entries(filters).forEach(([key, value]) => {
-      if (value !== undefined && value !== null && value !== '') {
+      const column = columns.find((col) => col.key === key);
+      if (
+        column &&
+        value !== undefined &&
+        value !== null &&
+        value !== '' &&
+        ((Array.isArray(value) && value.length > 0) ||
+          typeof value === 'string')
+      ) {
         result = result.filter((item) => {
           const itemValue = (item as any)[key];
-          const column = columns.find((col) => col.key === key);
-          if (column?.filterType === 'multiselect') {
-            return (value as string[]).includes(itemValue);
-          } else if (column?.filterType === 'select') {
+          if (column.filterType === 'multiselect') {
+            return value.includes(itemValue?.toLowerCase());
+          } else if (column.filterType === 'select') {
             return itemValue === value;
           } else if (typeof value === 'string') {
             return itemValue
@@ -103,7 +103,6 @@ function Table<T extends { [key: string]: any }>({
       }
     });
 
-    // Apply sorting
     if (sort.key) {
       result.sort((a, b) => {
         const aValue = (a as any)[sort.key];
diff --git a/src/components/ChatDemo/deleteButton.tsx b/src/components/ChatDemo/deleteButton.tsx
index a66b45d..82b6a62 100644
--- a/src/components/ChatDemo/deleteButton.tsx
+++ b/src/components/ChatDemo/deleteButton.tsx
@@ -96,10 +96,10 @@ export const DeleteButton: React.FC<ExtendedDeleteButtonProps> = ({
           color="danger"
           shape="rounded"
           disabled={isDisabled}
-          style={{ zIndex: 20 }}
+          style={{ zIndex: 20, minWidth: '100px' }}
         >
           <Trash2 className="mr-2 h-4 w-4 mt-1" />
-          Delete {isCollection ? 'Collection' : 'File(s)'}
+          Delete
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
diff --git a/src/components/ChatDemo/upload.tsx b/src/components/ChatDemo/upload.tsx
index 0d60763..c84b39f 100644
--- a/src/components/ChatDemo/upload.tsx
+++ b/src/components/ChatDemo/upload.tsx
@@ -1,9 +1,16 @@
+import { FileUp, PencilLine, Plus } from 'lucide-react';
 import React, { useState, Dispatch, SetStateAction } from 'react';
 
 import { Button } from '@/components/ui/Button';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@/components/ui/popover';
 import { useUserContext } from '@/context/UserContext';
 import { generateIdFromLabel } from '@/lib/utils';
 
+import { CreateDialog } from './CreateDialog';
 import { UploadDialog } from './UploadDialog';
 
 export interface UploadButtonProps {
@@ -32,7 +39,9 @@ export const UploadButton: React.FC<UploadButtonProps> = ({
   documentsPerPage,
 }) => {
   const [isUploading, setIsUploading] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+
   const { getClient } = useUserContext();
 
   const handleDocumentUpload = async (files: File[]) => {
@@ -98,24 +107,84 @@ export const UploadButton: React.FC<UploadButtonProps> = ({
     }
   };
 
+  const handleCreateChunks = async (
+    chunks: Array<{ text: string }>,
+    documentId?: string,
+    metadata?: Record<string, any>
+  ) => {
+    const client = await getClient();
+    if (!client) {
+      throw new Error('Failed to get authenticated client');
+    }
+
+    try {
+      await client.ingestChunks(chunks, documentId, metadata);
+
+      showToast({
+        variant: 'success',
+        title: 'Chunks Created',
+        description: 'All chunks have been created successfully.',
+      });
+
+      if (onUploadSuccess) {
+        await onUploadSuccess();
+      }
+    } catch (error: any) {
+      console.error('Error creating chunks:', error);
+      showToast({
+        variant: 'destructive',
+        title: 'Creation Failed',
+        description: error.message,
+      });
+    }
+  };
+
   return (
     <>
-      <Button
-        type="button"
-        color="filled"
-        shape="rounded"
-        onClick={() => setIsDialogOpen(true)}
-        disabled={isUploading}
-        className={`pl-2 pr-2 text-white py-2 px-4`}
-        style={{ zIndex: 20 }}
-      >
-        {isUploading ? 'Uploading...' : 'Upload File(s)'}
-      </Button>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            className="pl-2 pr-2 py-2 px-4"
+            color="filled"
+            shape="rounded"
+            disabled={isUploading}
+            style={{ zIndex: 20, minWidth: '100px' }}
+          >
+            <Plus className="mr-2 h-4 w-4 mt-1" />
+            {isUploading ? 'Uploading...' : 'New'}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[150px] p-1">
+          <div className="flex flex-col gap-1">
+            <Button
+              onClick={() => setIsUploadDialogOpen(true)}
+              color="secondary"
+              className="flex justify-between items-center"
+            >
+              <FileUp className="mr-2 h-4 w-4" />
+              <span>File Upload</span>
+            </Button>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              color="secondary"
+              className="flex justify-between items-center"
+            >
+              <PencilLine className="mr-2 h-4 w-4" />
+              <span>Create Chunks</span>
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
       <UploadDialog
-        isOpen={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
+        isOpen={isUploadDialogOpen}
+        onClose={() => setIsUploadDialogOpen(false)}
         onUpload={handleDocumentUpload}
       />
+      <CreateDialog
+        isOpen={isCreateDialogOpen}
+        onClose={() => setIsCreateDialogOpen(false)}
+        onCreateChunks={handleCreateChunks}
+      />
     </>
   );
 };
diff --git a/src/components/ChatDemo/utils/documentDialogInfo.tsx b/src/components/ChatDemo/utils/documentDialogInfo.tsx
index 4bd611f..b988927 100644
--- a/src/components/ChatDemo/utils/documentDialogInfo.tsx
+++ b/src/components/ChatDemo/utils/documentDialogInfo.tsx
@@ -1,9 +1,18 @@
 import { format, parseISO } from 'date-fns';
-import { Loader } from 'lucide-react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import React, { useEffect, useState, useCallback } from 'react';
+import { Edit, Loader, Trash, ChevronDown, ChevronUp } from 'lucide-react';
+import { useEffect, useState, useCallback } from 'react';
 
 import PdfPreviewDialog from '@/components/ChatDemo/utils/pdfPreviewDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/Button';
 import {
   Dialog,
@@ -112,6 +121,12 @@ const DocumentInfoDialog: React.FC<DocumentInfoDialogProps> = ({
     prefetchThreshold: 2,
   });
 
+  const refreshChunks = useCallback(() => {
+    if (currentPage) {
+      goToPage(currentPage);
+    }
+  }, [currentPage, goToPage]);
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -230,9 +245,11 @@ const DocumentInfoDialog: React.FC<DocumentInfoDialogProps> = ({
                       </Button>
                     </div>
                   )}
-                <ExpandableDocumentChunks chunks={currentChunks} />
+                <ExpandableDocumentChunks
+                  chunks={currentChunks}
+                  onChunkDeleted={refreshChunks}
+                />
 
-                {/* Display Loader only for active page loads */}
                 {chunksLoading && (
                   <Loader className="mx-auto mt-4 animate-spin" size={32} />
                 )}
@@ -262,8 +279,8 @@ const InfoRow: React.FC<{
   value?: any;
   values?: { label?: string; value: any }[];
 }> = ({ label, value, values }) => (
-  <div className="flex items-center justify-between py-2 border-b border-gray-700">
-    <span className="font-medium">{label}:</span>
+  <div className="flex items-center justify-between py-2 border-b border-gray-700/50">
+    <span className="font-medium text-gray-200">{label}:</span>
     <span className="text-gray-300 flex items-center space-x-4">
       {value !== undefined
         ? formatValue(value)
@@ -271,7 +288,7 @@ const InfoRow: React.FC<{
           ? values.map((item, index) => (
               <span key={index} className="flex items-center">
                 {item.label && (
-                  <span className="mr-1 text-gray-500">{item.label}:</span>
+                  <span className="mr-1 text-gray-400">{item.label}:</span>
                 )}
                 <span>{formatValue(item.value)}</span>
               </span>
@@ -312,7 +329,8 @@ const ExpandableInfoRow: React.FC<{
 
 const ExpandableDocumentChunks: React.FC<{
   chunks: DocumentChunk[] | undefined;
-}> = ({ chunks }) => {
+  onChunkDeleted?: () => void;
+}> = ({ chunks, onChunkDeleted }) => {
   const [allExpanded, setAllExpanded] = useState(false);
 
   const toggleAllExpanded = () => {
@@ -325,7 +343,7 @@ const ExpandableDocumentChunks: React.FC<{
 
   return (
     <div className="mt-4">
-      <div className="flex justify-between items-center mb-2">
+      <div className="flex justify-between items-center mb-4">
         <h3 className="text-xl font-bold">Document Chunks</h3>
         <button
           onClick={toggleAllExpanded}
@@ -334,13 +352,14 @@ const ExpandableDocumentChunks: React.FC<{
           {allExpanded ? 'Collapse All' : 'Expand All'}
         </button>
       </div>
-      <div className="space-y-2">
+      <div className="space-y-4">
         {chunks.map((chunk, index) => (
           <ExpandableChunk
-            key={chunk.fragment_id || index}
+            key={index}
             chunk={chunk}
             index={index}
             isExpanded={allExpanded}
+            onDelete={onChunkDeleted}
           />
         ))}
       </div>
@@ -352,54 +371,239 @@ const ExpandableChunk: React.FC<{
   chunk: DocumentChunk;
   index: number;
   isExpanded: boolean;
-}> = ({ chunk, index, isExpanded }) => {
+  onDelete?: () => void;
+}> = ({ chunk, index, isExpanded, onDelete }) => {
   const [localExpanded, setLocalExpanded] = useState(false);
+  const [metadataExpanded, setMetadataExpanded] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(chunk.text);
+  const [updating, setUpdating] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showDeleteAlert, setShowDeleteAlert] = useState(false);
+  const { getClient } = useUserContext();
 
   useEffect(() => {
     setLocalExpanded(isExpanded);
   }, [isExpanded]);
 
+  // Abort editing when collapsing the chunk
+  useEffect(() => {
+    if (!localExpanded && isEditing) {
+      // Abort the edit
+      setIsEditing(false);
+      setEditText(chunk.text);
+    }
+  }, [localExpanded, isEditing, chunk.text]);
+
   const toggleExpanded = () => {
     setLocalExpanded(!localExpanded);
   };
 
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsEditing(true);
+    setEditText(chunk.text);
+    setLocalExpanded(true); // Expand the chunk when editing
+  };
+
+  const handleCancel = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsEditing(false);
+    setEditText(chunk.text);
+  };
+
+  const handleUpdate = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setUpdating(true);
+    try {
+      const client = await getClient();
+      if (!client) {
+        throw new Error('Failed to get authenticated client');
+      }
+
+      await client.updateChunk(
+        chunk.document_id,
+        chunk.extraction_id,
+        editText,
+        chunk.metadata
+      );
+
+      chunk.text = editText;
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Error updating chunk:', error);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowDeleteAlert(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    setDeleting(true);
+    try {
+      const client = await getClient();
+      if (!client) {
+        throw new Error('Failed to get authenticated client');
+      }
+
+      await client.delete({
+        extraction_id: {
+          $eq: chunk.extraction_id,
+        },
+      });
+
+      onDelete?.();
+    } catch (error) {
+      console.error('Error deleting chunk:', error);
+    } finally {
+      setDeleting(false);
+      setShowDeleteAlert(false);
+    }
+  };
+
+  const toggleMetadata = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setMetadataExpanded(!metadataExpanded);
+  };
+
   return (
-    <div className="border-b border-gray-700">
+    <div className="border border-gray-700 rounded-lg mb-4 bg-zinc-800/50 transition-colors">
       <div
-        className="flex items-center justify-between py-2 cursor-pointer"
+        className="flex items-center justify-between p-4 cursor-pointer"
         onClick={toggleExpanded}
       >
-        <span className="font-medium">
+        <span className="font-medium text-lg">
           Chunk {chunk.metadata?.chunk_order ?? index + 1}
         </span>
-        <button className="text-gray-300 flex items-center space-x-2">
-          {localExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-        </button>
+        <div className="flex items-center space-x-2">
+          {!isEditing && !deleting && (
+            <>
+              <Button
+                onClick={handleEdit}
+                color="filled"
+                className="text-gray-300 hover:text-white"
+              >
+                <Edit className="h-5 w-5" />
+              </Button>
+              <Button
+                onClick={handleDeleteClick}
+                color="danger"
+                disabled={deleting}
+              >
+                <Trash className="h-5 w-5" />
+              </Button>
+            </>
+          )}
+          <button className="text-gray-300 hover:text-white transition-colors">
+            {localExpanded ? (
+              <ChevronUp size={20} />
+            ) : (
+              <ChevronDown size={20} />
+            )}
+          </button>
+        </div>
       </div>
       {localExpanded && (
-        <div className="py-2 pl-4 text-gray-300 space-y-4">
-          <InfoRow label="Fragment ID" value={chunk.fragment_id} />
-          <InfoRow label="Extraction ID" value={chunk.extraction_id} />
-          <InfoRow label="Document ID" value={chunk.document_id} />
-          <InfoRow label="User ID" value={chunk.user_id} />
-          <ExpandableInfoRow
-            label="Collection IDs"
-            values={chunk.collection_ids}
-          />
-          <div className="space-y-2">
-            <span className="font-medium">Text:</span>
-            <p className="pl-4 pr-2 py-2">{chunk.text}</p>
+        <div className="px-6 pb-4 text-gray-300 space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <InfoRow label="Extraction ID" value={chunk.extraction_id} />
+            <InfoRow label="Document ID" value={chunk.document_id} />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <InfoRow label="User ID" value={chunk.user_id} />
+            <ExpandableInfoRow
+              label="Collection IDs"
+              values={chunk.collection_ids}
+            />
+          </div>
+
+          <div className="space-y-2 bg-zinc-800 p-4 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-medium text-white">Content:</span>
+              {isEditing && (
+                <div className="flex space-x-2">
+                  <Button
+                    onClick={handleUpdate}
+                    color="secondary"
+                    shape="slim"
+                    disabled={updating}
+                  >
+                    {updating ? (
+                      <Loader className="animate-spin mr-2" size={16} />
+                    ) : null}
+                    Save
+                  </Button>
+                  <Button
+                    onClick={handleCancel}
+                    color="secondary"
+                    shape="slim"
+                    disabled={updating}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              )}
+            </div>
+            {isEditing ? (
+              <textarea
+                value={editText}
+                onChange={(e) => setEditText(e.target.value)}
+                className="w-full h-32 bg-zinc-900 text-gray-300 p-2 rounded-md border border-gray-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+              />
+            ) : (
+              <p className="pl-4 pr-2 py-2 text-gray-300 leading-relaxed">
+                {chunk.text}
+              </p>
+            )}
           </div>
-          <div>
-            <span className="font-medium">Chunk Metadata:</span>
-            <div className="mt-2 pl-4 space-y-2">
-              {Object.entries(chunk.metadata || {}).map(([key, value]) => (
-                <InfoRow key={key} label={key} value={value} />
-              ))}
+
+          <div className="bg-zinc-800 rounded-lg">
+            <div
+              className="flex items-center justify-between p-4 cursor-pointer"
+              onClick={toggleMetadata}
+            >
+              <span className="font-medium text-white">Chunk Metadata</span>
+              <button className="text-gray-300 hover:text-white transition-colors">
+                {metadataExpanded ? (
+                  <ChevronUp size={16} />
+                ) : (
+                  <ChevronDown size={16} />
+                )}
+              </button>
             </div>
+            {metadataExpanded && (
+              <div className="px-4 pb-4 space-y-2">
+                {Object.entries(chunk.metadata || {}).map(([key, value]) => (
+                  <InfoRow key={key} label={key} value={value} />
+                ))}
+              </div>
+            )}
           </div>
         </div>
       )}
+      <AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Are you sure you want to delete this chunk?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. The chunk will be permanently
+              deleted.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConfirm}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 };
diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx
index 970aeb2..0a80c66 100644
--- a/src/components/SearchResults/index.tsx
+++ b/src/components/SearchResults/index.tsx
@@ -17,7 +17,7 @@ const VectorSearchResultItem: FC<{
   index: number;
   onOpenPdfPreview: (documentId: string, page?: number) => void;
 }> = ({ source, index, onOpenPdfPreview }) => {
-  const { document_id, metadata, text, score, fragment_id } = source;
+  const { document_id, metadata, text, score, extraction_id } = source;
 
   const isPdf =
     metadata.document_type === 'pdf' ||
@@ -49,7 +49,7 @@ const VectorSearchResultItem: FC<{
         <p className="text-xs pt-4 text-zinc-500">
           Document ID: {document_id}
           <br />
-          Fragment ID: {fragment_id}
+          Extraction ID: {extraction_id}
         </p>
       </div>
     </div>
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
new file mode 100644
index 0000000..9612c1b
--- /dev/null
+++ b/src/components/ui/menubar.tsx
@@ -0,0 +1,234 @@
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = 'MenubarShortcut';
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
diff --git a/src/pages/collection/[collection_id].tsx b/src/pages/collection/[collection_id].tsx
index a3a04ec..ba0552e 100644
--- a/src/pages/collection/[collection_id].tsx
+++ b/src/pages/collection/[collection_id].tsx
@@ -14,7 +14,12 @@ import { Button } from '@/components/ui/Button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useToast } from '@/components/ui/use-toast';
 import { useUserContext } from '@/context/UserContext';
-import { DocumentInfoType, IngestionStatus, User } from '@/types';
+import {
+  DocumentInfoType,
+  IngestionStatus,
+  KGExtractionStatus,
+  User,
+} from '@/types';
 
 const MAX_RETRIES = 5;
 const RETRY_DELAY = 2000;
@@ -245,9 +250,9 @@ const CollectionIdPage: React.FC = () => {
       renderCell: (doc) => (
         <Badge
           variant={
-            doc.kg_extraction_status === 'success'
+            doc.kg_extraction_status === KGExtractionStatus.SUCCESS
               ? 'success'
-              : doc.kg_extraction_status === 'failed'
+              : doc.kg_extraction_status === KGExtractionStatus.FAILED
                 ? 'destructive'
                 : 'pending'
           }
diff --git a/src/pages/collections.tsx b/src/pages/collections.tsx
index e60370a..171a699 100644
--- a/src/pages/collections.tsx
+++ b/src/pages/collections.tsx
@@ -289,13 +289,14 @@ const Index: React.FC = () => {
                     className="flex-grow"
                   />
                   <Button
+                    className="pl-2 pr-2 py-2 px-4"
                     onClick={handleAddCollection}
                     color="filled"
-                    shape="outline"
-                    className="flex items-center space-x-2 whitespace-nowrap min-w-fit"
+                    shape="rounded"
+                    style={{ zIndex: 20, minWidth: '100px' }}
                   >
                     <Plus className="w-5 h-5" />
-                    <span>Create New Collection</span>
+                    <span>New</span>
                   </Button>
                 </div>
               </div>
diff --git a/src/pages/documents.tsx b/src/pages/documents.tsx
index 313de48..70cf9fb 100644
--- a/src/pages/documents.tsx
+++ b/src/pages/documents.tsx
@@ -16,6 +16,22 @@ const Index: React.FC = () => {
   );
   const [loading, setLoading] = useState<boolean>(true);
 
+  useEffect(() => {
+    setVisibleColumns({
+      title: true,
+      id: true,
+      user_id: true,
+      collection_ids: false,
+      ingestion_status: true,
+      kg_extraction_status: false,
+      type: false,
+      metadata: false,
+      version: false,
+      created_at: true,
+      updated_at: false,
+    });
+  }, []);
+
   const fetchAllDocuments = useCallback(async () => {
     if (!pipeline?.deploymentUrl) {
       console.error('No pipeline deployment URL available');
diff --git a/src/types.ts b/src/types.ts
index 0c1e33b..333a8e3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -101,6 +101,13 @@ export enum IngestionStatus {
   SUCCESS = 'success',
 }
 
+export enum KGExtractionStatus {
+  PENDING = 'pending',
+  PROCESSING = 'processing',
+  SUCCESS = 'success',
+  FAILED = 'failed',
+}
+
 export interface DocumentInfoType {
   id: string;
   user_id: string;
@@ -111,7 +118,7 @@ export interface DocumentInfoType {
   version: string;
   size_in_bytes: number;
   ingestion_status: IngestionStatus;
-  kg_extraction_status: string;
+  kg_extraction_status: KGExtractionStatus;
   created_at: string;
   updated_at: string;
 }
@@ -124,7 +131,6 @@ export interface DocumentInfoDialogProps {
 }
 
 export interface DocumentChunk {
-  fragment_id: string;
   extraction_id: string;
   document_id: string;
   user_id: string;
@@ -423,7 +429,6 @@ export type Collection = {
 };
 
 export interface VectorSearchResult {
-  fragment_id: string;
   extraction_id: string;
   document_id: string;
   user_id: string;
@@ -461,7 +466,6 @@ export interface KGSearchResult {
   method: 'local' | 'global';
   content: any;
   result_type: 'entity' | 'relationship' | 'community' | 'global';
-  fragment_ids: string[];
   document_ids: string[];
   metadata: Record<string, any>;
 }