diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index 63c59742cb..306ccb1169 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -7,15 +7,13 @@
   const _appPromise = createApp()
   _appPromise.then(a => (_bb = a))
 
-  const testProps = props.justAnH1
-  const button = props.button
-  const textfield = props.textfield
+  const { h1, overline, button, textfield } = props
 
   let currentComponent
 
   $: {
     if (_bb && currentComponent) {
-      _bb.hydrateChildren([testProps, button, textfield], currentComponent)
+      _bb.hydrateChildren([h1, overline, button, textfield], currentComponent)
     }
   }
 </script>
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 70145635ec..d150945401 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -1,11 +1,16 @@
-const getComponent = comp => `@budibase//materialdesign-components/${comp}`;
+const getComponent = comp => `@budibase/materialdesign-components/${comp}`;
 
 
 export const props = {
-  justAnH1: {
-    _component: "@budibase/materialdesign-components/h1",
+  h1: {
+    _component: "@budibase/materialdesign-components/H1",
     _children: [],
-    text: "This is a Header",
+    text: "Im a big header",
+  },
+  overline: {
+    _component: getComponent`Overline`,
+    _children: [],
+    text: "A wee Overline",
   },
   button: {
     _component: "@budibase/materialdesign-components/button",
diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js
index ac39796264..bae276512f 100644
--- a/packages/materialdesign-components/src/Test/testComponents.js
+++ b/packages/materialdesign-components/src/Test/testComponents.js
@@ -1,4 +1,3 @@
-import h1 from "../H1.svelte";
-import { button, icon, textfield } from "@BBMD";
-export default { h1, button, icon, textfield };
+import { button, icon, textfield, H1, Overline } from "@BBMD";
+export default { H1, Overline, button, icon, textfield };
 
diff --git a/packages/materialdesign-components/src/Typography/Body1.svelte b/packages/materialdesign-components/src/Typography/Body1.svelte
new file mode 100644
index 0000000000..9d71d17e62
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Body1.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--body1">{text}</span>
diff --git a/packages/materialdesign-components/src/Typography/Body2.svelte b/packages/materialdesign-components/src/Typography/Body2.svelte
new file mode 100644
index 0000000000..5e1cbb850d
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Body2.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--body2">{text}</span>
diff --git a/packages/materialdesign-components/src/Typography/Caption.svelte b/packages/materialdesign-components/src/Typography/Caption.svelte
new file mode 100644
index 0000000000..17d60048d3
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Caption.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<div class="mdc-typography--caption">{text}</div>
diff --git a/packages/materialdesign-components/src/Typography/H1.svelte b/packages/materialdesign-components/src/Typography/H1.svelte
new file mode 100644
index 0000000000..f5daec4c67
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H1.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h1 class="mdc-typography--headline1">{text}</h1>
diff --git a/packages/materialdesign-components/src/Typography/H2.svelte b/packages/materialdesign-components/src/Typography/H2.svelte
new file mode 100644
index 0000000000..cd75c8facb
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H2.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h2 class="mdc-typography--headline2">{text}</h2>
diff --git a/packages/materialdesign-components/src/Typography/H3.svelte b/packages/materialdesign-components/src/Typography/H3.svelte
new file mode 100644
index 0000000000..abcf5d3a78
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H3.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h3 class="mdc-typography--headline3">{text}</h3>
diff --git a/packages/materialdesign-components/src/Typography/H4.svelte b/packages/materialdesign-components/src/Typography/H4.svelte
new file mode 100644
index 0000000000..b48ad4c4e4
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H4.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h4 class="mdc-typography--headline4">{text}</h4>
diff --git a/packages/materialdesign-components/src/Typography/H5.svelte b/packages/materialdesign-components/src/Typography/H5.svelte
new file mode 100644
index 0000000000..1854ed494c
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H5.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h5 class="mdc-typography--headline5">{text}</h5>
diff --git a/packages/materialdesign-components/src/Typography/H6.svelte b/packages/materialdesign-components/src/Typography/H6.svelte
new file mode 100644
index 0000000000..18a191d787
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/H6.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h6 class="mdc-typography--headline6">{text}</h6>
diff --git a/packages/materialdesign-components/src/Typography/Overline.svelte b/packages/materialdesign-components/src/Typography/Overline.svelte
new file mode 100644
index 0000000000..160b60b0eb
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Overline.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--overline">{text}</span>
diff --git a/packages/materialdesign-components/src/Typography/Sub1.svelte b/packages/materialdesign-components/src/Typography/Sub1.svelte
new file mode 100644
index 0000000000..c2092868aa
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Sub1.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--subtitle1">{text}</span>
diff --git a/packages/materialdesign-components/src/Typography/Sub2.svelte b/packages/materialdesign-components/src/Typography/Sub2.svelte
new file mode 100644
index 0000000000..d6377cadab
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/Sub2.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--subtitle2">{text}</span>
diff --git a/packages/materialdesign-components/src/Typography/_style.scss b/packages/materialdesign-components/src/Typography/_style.scss
new file mode 100644
index 0000000000..1f490f1999
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/_style.scss
@@ -0,0 +1 @@
+@import "@material/typography/mdc-typography.scss";
diff --git a/packages/materialdesign-components/src/Typography/index.js b/packages/materialdesign-components/src/Typography/index.js
new file mode 100644
index 0000000000..7c2a6d8a45
--- /dev/null
+++ b/packages/materialdesign-components/src/Typography/index.js
@@ -0,0 +1,13 @@
+import "./_style.scss";
+export { default as H1 } from "./H1.svelte";
+export { default as H2 } from "./H2.svelte";
+export { default as H3 } from "./H3.svelte";
+export { default as H4 } from "./H4.svelte";
+export { default as H5 } from "./H5.svelte";
+export { default as H6 } from "./H6.svelte";
+export { default as Body1 } from "./Body1.svelte";
+export { default as Body2 } from "./Body2.svelte";
+export { default as Sub1 } from "./Sub1.svelte";
+export { default as Sub2 } from "./Sub2.svelte";
+export { default as Caption } from "./Caption.svelte";
+export { default as Overline } from "./Overline.svelte";
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index adec0891b5..a81658b5f0 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -1,5 +1,6 @@
-export { default as h1 } from "./H1.svelte";
+// export { default as h1 } from "./H1.svelte";
 
 export { default as icon } from "./Icon.svelte";
 export { button } from "./Button";
 export { textfield } from "./Textfield";
+export * from "./Typography"