diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index f35a0422b0..1aef5d6beb 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -332,6 +332,13 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              {
+                label: "Theme",
+                key: "theme",
+                control: OptionSelect,
+                options: ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
+                placeholder: "alpine",
+              },
             ],
           },
           children: [],
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 12ce6aeae4..4a7773377b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -226,7 +226,18 @@
 		"data": true,
 		"props": {
 			"datasource": "models",
-			"editable": "bool"
+			"editable": "bool",
+			"theme": {
+				"type": "options",
+				"default": "alpine",
+				"options": [
+					"alpine",
+					"alpine-dark",
+					"balham",
+					"balham-dark",
+					"material"
+				]
+			}
 		}
 	},
 	"dataform": {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 842990b22b..d99aeb1fd3 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -26,7 +26,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "shortid": "^2.2.15",
     "sirv-cli": "^0.4.4",
-    "svelte": "^3.28.0"
+    "svelte": "^3.29.0"
   },
   "keywords": [
     "svelte"
@@ -37,15 +37,16 @@
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.41.0",
-    "@budibase/svelte-ag-grid": "^0.0.11",
+    "@budibase/svelte-ag-grid": "^0.0.12",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",
+    "flatpickr": "^4.6.6",
     "fusioncharts": "^3.15.1-sr.1",
     "lodash.debounce": "^4.0.8",
-    "svelte-flatpickr": "^2.4.0",
+    "svelte-flatpickr": "^3.1.0",
     "svelte-fusioncharts": "^1.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
index 720cd78f42..7715ea94cf 100644
--- a/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
+++ b/packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte
@@ -12,22 +12,22 @@
   export let files
 </script>
 
-<div bind:this={anchor}>
+<AttachmentList {files} />
+<!-- <div bind:this={anchor}>
   <Button text small on:click={dropdown.show}>
     <Icon name="edit" />
   </Button>
-  <AttachmentList {files} />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <h5>Edit Attachment(s)</h5>
-  <!-- <Modal
+   <Modal
         {_bb}
         {model}
         onClosed={dropdown.hide}
-        on:newRecord={() => dispatch('newRecord')} /> -->
-</DropdownMenu>
+        on:newRecord={() => dispatch('newRecord')} />
+ </DropdownMenu> -->
 
-<style>
+<!-- <style>
   div {
     display: grid;
     grid-template-columns: auto auto;
@@ -38,4 +38,4 @@
     margin: 0;
     font-weight: 500;
   }
-</style>
+</style> -->
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 280f62a066..6df3bcc5e4 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -17,6 +17,7 @@
   export let _bb
   export let datasource = {}
   export let editable
+  export let theme = 'alpine'
 
   let dataLoaded = false
   let data
@@ -29,7 +30,7 @@
       minWidth: 150,
       filter: true,
     },
-    rowSelection: editable ? "multiple" : "single",
+    rowSelection: editable ? "multiple" : false,
     suppressRowClickSelection: !editable,
   }
 
@@ -50,12 +51,7 @@
             hide: shouldHideField(key),
             sortable: true,
             editable: editable && isEditable(schema[key].type),
-            cellRenderer:
-              editable &&
-              getRenderer(
-                schema[key].type, // type
-                schema[key].constraints // options
-              ),
+            cellRenderer: editable && getRenderer(schema[key]),
             autoHeight: true,
           }
         })
@@ -67,8 +63,8 @@
   const isEditable = type =>
     type !== "boolean" &&
     type !== "options" &&
-    type !== "attachment" &&
-    type !== "datetime"
+    // type !== "datetime" &&
+    type !== "attachment" 
 
   const shouldHideField = name => {
     if (name.startsWith("_")) return true
@@ -107,6 +103,12 @@
   }
 </script>
 
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
+</svelte:head>
+
 <div class="container">
   {#if dataLoaded}
     {#if editable}
@@ -121,6 +123,7 @@
       </div>
     {/if}
     <AgGrid
+      {theme}
       {options}
       {data}
       {columnDefs}
@@ -131,7 +134,7 @@
 
 <style>
   .container {
-    --grid-height: 400px;
+    --grid-height: 800px;
   }
   .container :global(form) {
     display: grid;
diff --git a/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte b/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte
new file mode 100644
index 0000000000..b493626d64
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/DateTime/Wrapper.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { DatePicker } from "@budibase/bbui"
+</script>
+
+<DatePicker />
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 51a7338c0b..4949e07f77 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -3,19 +3,18 @@
 
 import AttachmentCell from './AttachmentCell/Button.svelte'
 import Select from './Select/Wrapper.svelte'
-import { DatePicker } from "@budibase/bbui"
+import DatePicker from "./DateTime/Wrapper.svelte"
 
 const renderers = new Map([
     ["boolean", booleanRenderer],
     ["attachment", attachmentRenderer],
-    ["datetime", dateRenderer],
     ["options", optionsRenderer],
 ])
 
 
-export function getRenderer(type, options) {
+export function getRenderer({ type, constraints }) {
     if (renderers.get(type)) {
-        return renderers.get(type)(options)
+        return renderers.get(type)(constraints)
     } else {
         return false
     }
@@ -50,7 +49,7 @@ function attachmentRenderer(options) {
     }
 }
 function dateRenderer(options) {
-    return params => {
+    return function (params) {
         const container = document.createElement("div")
         const toggle = (e) => {
             params.setValue(e.detail[0][0])
@@ -62,12 +61,9 @@ function dateRenderer(options) {
             target: container,
             props: {
                 value: params.value,
-                thin: true
             }
         });
 
-        datePickerInstance.$on('change', toggle)
-
         return container
     }
 }