diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
new file mode 100644
index 0000000000..946bcd9dd7
--- /dev/null
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { Menu } from "../Menu"
+  import { Textfield } from "../Textfield"
+
+  let open = false
+  debugger
+</script>
+
+<Textfield label="Select Date" />
+<Menu {open} />
diff --git a/packages/materialdesign-components/src/DatePicker/index.js b/packages/materialdesign-components/src/DatePicker/index.js
new file mode 100644
index 0000000000..76af457b24
--- /dev/null
+++ b/packages/materialdesign-components/src/DatePicker/index.js
@@ -0,0 +1 @@
+export { default as DatePicker } from "./DatePicker.svelte"
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index 8439128208..7d2c40c3d0 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -39,6 +39,7 @@
   })
 
   $: menuList && _bb.attachChildren(menuList)
+  debugger
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index baf3db4c81..f011be3089 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -17,6 +17,7 @@
     Icon,
     List,
     Select,
+    DatePicker,
   } = props
 
   let currentComponent
@@ -28,6 +29,7 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
+            DatePicker,
             Button,
             BodyBoundToStore,
             Textfield,
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 73672f7b3e..e1f148c963 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -205,5 +205,9 @@ export const props = {
         value: "2",
       },
     ],
-  }
+  },
+  DatePicker: {
+    _component: "@budibase/materialdesign-components/ListItem",
+    _children: [],
+  },
 }
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 5e1df0081e..7575f19786 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -19,3 +19,4 @@ export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
 export { Menu } from "./Menu"
 export { Select } from "./Select"
+export { DatePicker } from "./DatePicker"