diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index e86aa4800d..960bfce9d1 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -66,21 +66,24 @@
   }
 
   .switcher > button {
+    text-rendering: optimizeLegibility;
     display: inline-block;
     border: none;
     margin: 0;
     padding: 0;
     cursor: pointer;
     font-size: 14px;
-    font-weight: 400;
     text-transform: uppercase;
-    color: var(--secondary60);
     background: rgba(0,0,0,0);
+    font-weight: 500;
+    color: var(--secondary40);
+    margin-right: 20px;
+    letter-spacing: 1px;
   }
 
   .switcher > .selected {
     color: var(--secondary100);
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .panel {
diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte
index f48c1f3c77..bffbe9eb0c 100644
--- a/packages/builder/src/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/userInterface/LayoutEditor.svelte
@@ -54,9 +54,7 @@
   const newValue = n => Array(n).fill("")
 </script>
 
-<h3>Styles</h3>
-
-<h4>Display</h4>
+<h3>Layout</h3>
 <div class="layout-pos">
   {#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -87,7 +85,7 @@
   {/each}
 </div> -->
 
-<h4>Spacing</h4>
+<h3>Spacing</h3>
 <div class="layout-spacing">
   {#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -102,7 +100,7 @@
   {/each}
 </div>
 
-<h4>Size</h4>
+<h3>Size</h3>
 <div class="layout-layer">
   {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -117,7 +115,7 @@
   {/each}
 </div>
 
-<h4>Z-Index</h4>
+<h3>Order</h3>
 <div class="layout-layer">
   {#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
     <div class="grid">
@@ -144,10 +142,11 @@
   h4 {
     text-transform: uppercase;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 600;
     color: #000333;
     opacity: 0.4;
-    margin-bottom: 15px;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
   }
 
   h5 {
@@ -168,6 +167,6 @@
   }
 
   .grid {
-    grid-template-columns: 70px 1fr;
+    grid-template-columns: 70px 2fr;
   }
 </style>
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index 8fd3039eb5..c466c7aac0 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -160,8 +160,9 @@
     text-transform: uppercase;
     padding-left: 20px;
     margin-top: 20px;
-    font-weight: 700;
-    opacity: 0.6;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
   }
 
   .components-nav-header {
@@ -169,8 +170,9 @@
     color: #000333;
     text-transform: uppercase;
     margin-top: 20px;
-    font-weight: 700;
-    opacity: 0.6;
+    font-weight: 600;
+    opacity: 0.4;
+    letter-spacing: 1px;
   }
 
   .nav-header {
@@ -220,10 +222,11 @@
   .navigator-title {
     font-size: 14px;
     color: var(--secondary100);
-    font-weight: 500;
+    font-weight: 600;
     text-transform: uppercase;
     padding: 0 20px 20px 20px;
     line-height: 1rem !important;
+    letter-spacing: 1px;
   }
 
   .border-line {
diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index d017e54b11..6922b1bec7 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -111,6 +111,52 @@
     }, 
     "tags": []
   },
+  "Card": {
+    "name": "Card",
+    "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
+    "props": {
+      "width": "string",
+      "height": "string",
+      "variant": {
+        "type": "options",
+        "options": ["standard", "outlined"],
+        "default": "standard"
+      }
+    }
+  },
+  "CardBody": {
+    "name": "CardBody",
+    "description": "A Material CardBody component. Contains the main content of a Material Card component",
+    "props": {
+      "onClick": "event"
+    }
+  },
+  "CardImage": {
+    "name": "CardImage",
+    "description": "An image component for the Material Card component",
+    "props": {
+      "displayHorizontal": "bool",
+      "url": "string",
+      "title": "string",
+      "subtitle": "string"
+    }
+  },
+  "CardHeader": {
+    "name": "CardHeader",
+    "description": "Displays a icon, title and subtitle above main body of the Material Card component",
+    "props": {
+      "title": "string",
+      "subtitle": "string",
+      "icon": "string"
+    }
+  },
+  "CardFooter": {
+    "name": "CardFooter",
+    "description": "Displays buttons / icon buttons as actions for the Material Card component",
+    "props": {
+      "padding": "string"
+    }
+  },
   "Checkbox": {
     "name": "Checkbox",
     "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
@@ -357,6 +403,37 @@
       "persistent": "bool"
     },
     "tags": []
+  },
+  "Switch": {
+    "name": "Switch",
+    "description": "A material design switch component",
+    "props": {
+      "alignEnd": "bool",
+      "disabled": "bool",
+      "checked": "bool",
+      "label": "string",
+      "id": "string"
+    },
+    "tags": []
+  },
+  "Slider": {
+    "name": "Slider",
+    "description": "A material design slider component",
+    "props": {
+      "variant": {
+        "type": "options",
+        "options": ["continuous", "discrete"],
+        "default": "continuous"
+      },
+      "showTicks": "bool",
+      "min": "number",
+      "max": "number",
+      "value": "number",
+      "step": "number",
+      "label": "string",
+      "disabled": "bool"
+    },
+    "tags": []
   }
 }
 
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index f21c6c8d6b..7328dcfa0b 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -17,12 +17,15 @@
     "@material/button": "^4.0.0",
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
+    "@material/dialog": "4.0.0",
     "@material/form-field": "^4.0.0",
     "@material/icon-button": "4.0.0",
     "@material/list": "4.0.0",
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
     "@material/select": "4.0.0",
+    "@material/slider": "4.0.0",
+    "@material/switch": "4.0.0",
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
@@ -50,5 +53,7 @@
   "version": "0.0.27",
   "license": "MIT",
   "gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e",
-  "dependencies": {}
+  "dependencies": {
+    "@material/card": "4.0.0"
+  }
 }
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index 7c8821547a..7b7880e2ff 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { setContext, getContext } from "svelte"
+  import { onMount } from "svelte"
   import Icon from "../Common/Icon.svelte"
   import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
@@ -22,14 +22,20 @@
 
   export let _bb
 
+  onMount(() => {
+    let ctx = _bb.getContext("BBMD:button:context")
+    extras = [ctx]
+  })
+
+  let extras = ""
   let modifiers = {}
   let customs = { size, colour }
 
   if (!href) modifiers = { variant }
 
-  let props = { modifiers, customs }
+  $: props = { modifiers, customs, extras }
 
-  let blockClasses = cb.build({ props })
+  $: blockClasses = cb.build({ props })
   const labelClass = cb.elem("label")
 
   const clicked = () => _bb.call(onClick)
diff --git a/packages/materialdesign-components/src/Card/Card.svelte b/packages/materialdesign-components/src/Card/Card.svelte
new file mode 100644
index 0000000000..125013a75a
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/Card.svelte
@@ -0,0 +1,34 @@
+<script>
+  import CardHeader from "./CardHeader.svelte"
+  import CardBody from "./CardBody.svelte"
+  import CardImage from "./CardImage.svelte"
+  import CardFooter from "./CardFooter.svelte"
+  import { H2, H6, Body2 } from "../Typography"
+  import { Button } from "../Button"
+  import { IconButton } from "../IconButton"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  export let width = "350px"
+  export let height = "auto"
+  export let variant = "standard"
+
+  export let _bb
+  let card
+
+  const cb = new ClassBuilder("card", ["standard"])
+
+  $: modifiers = { variant }
+  $: props = { modifiers }
+  $: cardClass = cb.build({ props })
+
+  $: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
+  $: safeHeight =
+    height !== "auto" && !/px$/.test(height) ? `${width}px` : height
+
+  $: card && _bb.attachChildren(card)
+</script>
+
+<div
+  bind:this={card}
+  style={`width: ${safeWidth}; height: ${safeHeight}`}
+  class={cardClass} />
diff --git a/packages/materialdesign-components/src/Card/CardBody.svelte b/packages/materialdesign-components/src/Card/CardBody.svelte
new file mode 100644
index 0000000000..08cb549e06
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardBody.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let _bb
+  export let onClick = () => {}
+
+  let cardBody
+
+  $: cardBody && _bb.attachChildren(cardBody)
+</script>
+
+<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} />
diff --git a/packages/materialdesign-components/src/Card/CardFooter.svelte b/packages/materialdesign-components/src/Card/CardFooter.svelte
new file mode 100644
index 0000000000..b3702ee47f
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardFooter.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { onMount } from "svelte"
+  let cardFooter
+  export let _bb
+  export let padding = "5px"
+
+  onMount(() => {
+    _bb.setContext(
+      "BBMD:icon-button:context",
+      "mdc-card__action mdc-card__action--icon"
+    )
+    _bb.setContext(
+      "BBMD:button:context",
+      "mdc-card__action mdc-card__action--button"
+    )
+  })
+
+  $: cardFooter && _bb.attachChildren(cardFooter)
+</script>
+
+<div
+  bind:this={cardFooter}
+  style={`padding: ${padding}`}
+  class="mdc-card__actions bbmd-card__actions" />
+
+<style>
+  .bbmd-card__actions {
+    display: flex;
+    flex-flow: row wrap;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/CardHeader.svelte b/packages/materialdesign-components/src/Card/CardHeader.svelte
new file mode 100644
index 0000000000..72f1bc4ace
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardHeader.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { H6, Sub2 } from "../Typography"
+  import Icon from "../Common/Icon.svelte"
+  export let _bb
+  export let title = ""
+  export let subtitle = ""
+  export let icon = ""
+
+  $: useIcon = !!icon
+  $: useSubtitle = !!subtitle
+</script>
+
+<div class="card-header">
+  {#if useIcon}
+    <div class="card-header__icon">
+      <Icon {icon} />
+    </div>
+  {/if}
+  <div class="card-header__title">
+    <H6 text={title} />
+    {#if useSubtitle}
+      <Sub2 text={subtitle} />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .card-header {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 10px;
+  }
+
+  .card-header__icon {
+    flex: 0;
+    padding: 10px;
+  }
+
+  .card-header__title {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/CardImage.svelte b/packages/materialdesign-components/src/Card/CardImage.svelte
new file mode 100644
index 0000000000..e7207271a0
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardImage.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { H6, Sub2 } from "../Typography"
+  export let _bb
+  export let displayHorizontal = false //aligns image on row with title and subtitle text
+  export let url = ""
+  export let title = ""
+  export let subtitle = ""
+
+  $: useTitle = !!title
+  $: useSubTitle = !!subtitle
+</script>
+
+{#if !displayHorizontal}
+  <div
+    class="my-card__media mdc-card__media mdc-card__media--16-9"
+    style={`background-image: url(${url})`}>
+    <div class="mdc-card__media-content bbmd-card-media__content">
+      {#if useTitle}
+        <H6 text={title} verticalMargin={0} horizontalMargin={10} />
+        {#if useSubTitle}
+          <Sub2 text={subtitle} horizontalMargin={10} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="bbmd-card--horizontal">
+    <div
+      class="mdc-card__media mdc-card__media mdc-card__media--square
+      bbmd-card--horizontal-image"
+      style={`background-image: url(${url})`} />
+    <div class="bbmd-card--horizontal-text">
+      {#if useTitle}
+        <H6 text={title} verticalMargin={0} horizontalMargin={10} />
+        {#if useSubTitle}
+          <Sub2 text={subtitle} horizontalMargin={10} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .bbmd-card--horizontal {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .bbmd-card--horizontal-image {
+    flex: 0 0 110px;
+  }
+
+  .bbmd-card--horizontal-text {
+    flex: 1;
+    padding: 10px 5px;
+  }
+
+  .bbmd-card-media__content {
+    top: 125px;
+    color: white;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/_styles.scss b/packages/materialdesign-components/src/Card/_styles.scss
new file mode 100644
index 0000000000..67be710d6f
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/_styles.scss
@@ -0,0 +1 @@
+@import "@material/card/mdc-card.scss"
diff --git a/packages/materialdesign-components/src/Card/index.js b/packages/materialdesign-components/src/Card/index.js
new file mode 100644
index 0000000000..d950503099
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/index.js
@@ -0,0 +1,7 @@
+import "./_styles.scss"
+export { default as Card } from "./Card.svelte"
+export { default as CardBody } from "./CardBody.svelte"
+export { default as CardFooter } from "./CardFooter.svelte"
+export { default as CardHeader } from "./CardHeader.svelte"
+export { default as CardImage } from "./CardImage.svelte"
+
diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
index d4820fcf6c..7a825f8cca 100644
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { getContext } from "svelte"
-
   export let icon = ""
   export let context = ""
 
diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
index d43cbc072e..1dc3defd1b 100644
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -25,6 +25,7 @@
   let navDate = new Date()
   const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
 
+  export let _bb
   export let date = new Date()
   export let label = ""
   export let onSelect = selectedDate => {}
@@ -105,13 +106,13 @@
     <div class="calendar-container">
       <div class="month-picker">
         <div>
-          <IconButton icon="chevron_left" onClick={subtractMonth} />
+          <IconButton icon="chevron_left" {_bb} onClick={subtractMonth} />
         </div>
         <div class="centreText">
           <Body1 text={monthAndYear} />
         </div>
         <div>
-          <IconButton icon="chevron_right" onClick={addMonth} />
+          <IconButton icon="chevron_right" {_bb} onClick={addMonth} />
         </div>
       </div>
       <div class="week-days">
diff --git a/packages/materialdesign-components/src/Dialog/Dialog.svelte b/packages/materialdesign-components/src/Dialog/Dialog.svelte
new file mode 100644
index 0000000000..c316c6a249
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/Dialog.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
+  import { MDCDialog } from "@material/dialog"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  let dialog
+  let dialogSurface
+  let instance
+
+  export let _bb
+  // TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side
+  export let open = true
+
+  onMount(() => {
+    instance = new MDCDialog(dialog)
+    return () => {
+      instance && instance.destroy()
+    }
+  })
+
+  $: dialogSurface && _bb.attachChildren(dialogSurface)
+
+  $: {
+    if (open) {
+      instance && instance.open()
+    } else {
+      instance && instance.close()
+    }
+  }
+</script>
+
+<div bind:this={dialog} class="mdc-dialog">
+  <div class="mdc-dialog__container">
+    <div
+      bind:this={dialogSurface}
+      class="mdc-dialog__surface"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-content" />
+  </div>
+  <div class="mdc-dialog__scrim" on:click={() => (open = false)} />
+</div>
diff --git a/packages/materialdesign-components/src/Dialog/DialogActions.svelte b/packages/materialdesign-components/src/Dialog/DialogActions.svelte
new file mode 100644
index 0000000000..1bb23cee44
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogActions.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { onMount } from "svelte"
+  export let _bb
+  let dialogActions
+
+  onMount(() => {
+    _bb.setContext("BBMD:button:context", "mdc-dialog__button")
+  })
+
+  $: dialogActions && _bb.attachChildren(dialogActions)
+</script>
+
+<footer bind:this={dialogActions} class="mdc-dialog__actions" />
diff --git a/packages/materialdesign-components/src/Dialog/DialogContent.svelte b/packages/materialdesign-components/src/Dialog/DialogContent.svelte
new file mode 100644
index 0000000000..f3155ffced
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogContent.svelte
@@ -0,0 +1,11 @@
+<script>
+  let dialogContent
+  export let _bb
+
+  $: dialogContent && _bb.attachChildren(dialogContent)
+</script>
+
+<div
+  class="mdc-dialog__content"
+  bind:this={dialogContent}
+  id="my-dialog-content" />
diff --git a/packages/materialdesign-components/src/Dialog/DialogHeader.svelte b/packages/materialdesign-components/src/Dialog/DialogHeader.svelte
new file mode 100644
index 0000000000..d2fda14280
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogHeader.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let title = ""
+</script>
+
+<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2>
diff --git a/packages/materialdesign-components/src/Dialog/_style.scss b/packages/materialdesign-components/src/Dialog/_style.scss
new file mode 100644
index 0000000000..fb123801ff
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/_style.scss
@@ -0,0 +1 @@
+@import "@material/dialog/mdc-dialog.scss"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Dialog/index.js b/packages/materialdesign-components/src/Dialog/index.js
new file mode 100644
index 0000000000..0776cd6543
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/index.js
@@ -0,0 +1,5 @@
+import "./_style.scss"
+export { default as Dialog } from "./Dialog.svelte"
+export { default as DialogActions } from "./DialogActions.svelte"
+export { default as DialogContent } from "./DialogContent.svelte"
+export { default as DialogHeader } from "./DialogHeader.svelte"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/IconButton/IconButton.svelte b/packages/materialdesign-components/src/IconButton/IconButton.svelte
index 57580776e3..a6caf48d97 100644
--- a/packages/materialdesign-components/src/IconButton/IconButton.svelte
+++ b/packages/materialdesign-components/src/IconButton/IconButton.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
 
@@ -15,6 +16,14 @@
   export let onIcon = "" //on state icon for toggle button
   export let size = "medium"
 
+  onMount(() => {
+    let ctx = !!_bb ? _bb.getContext("BBMD:icon-button:context") : ""
+    //It isn't possible to use context within nested components as they do not have their own _bb instance (has to be passed down from parent component). This allows context to be passed as props
+    if (!context && !!ctx) {
+      context = ctx
+    }
+  })
+
   function onButtonClick() {
     open = !open
     onClick()
diff --git a/packages/materialdesign-components/src/Slider/Slider.svelte b/packages/materialdesign-components/src/Slider/Slider.svelte
new file mode 100644
index 0000000000..02193510dd
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/Slider.svelte
@@ -0,0 +1,119 @@
+<script>
+  import { MDCSlider } from "@material/slider"
+  import { onMount } from "svelte"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("slider", ["continuous"])
+
+  let slider
+  let instance
+
+  export let variant = "continuous" //or discrete
+  export let showTicks = false
+  export let min = 0
+  export let max = 100
+  export let value = 1
+  export let step = 1
+  export let label = ""
+  export let disabled = false
+
+  onMount(() => {
+    let s = MDCSlider.attachTo(slider)
+    return () => instance.destroy()
+  })
+
+  $: {
+    if (instance) {
+      instance.value = value
+    }
+  }
+
+  $: instance && console.log("instance dot value: ", instance.value)
+
+  $: isDiscrete = variant === "discrete"
+  $: displayMarkers = isDiscrete && showTicks
+
+  $: modifiers = { variant, displayMarkers }
+  $: props = { modifiers }
+  $: sliderCls = cb.build({ props })
+
+  $: console.log("VALUE", value)
+</script>
+
+<div
+  bind:this={slider}
+  class="mdc-slider mdc-slider--discrete"
+  tabindex="0"
+  role="slider"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow="0"
+  aria-label="Select Value"
+  on:MDCSlider:change={e => console.log('SLIDER VAL', e.detail.value)}>
+  <div class="mdc-slider__track-container">
+    <div class="mdc-slider__track" />
+  </div>
+  <div class="mdc-slider__thumb-container">
+    <div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker" />
+    </div>
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875" />
+    </svg>
+    <div class="mdc-slider__focus-ring" />
+  </div>
+</div>
+
+<!-- 
+<div
+  bind:this={slider}
+  class={sliderCls}
+  tabindex="0"
+  role="slider"
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  data-step={step}
+  aria-label={label}
+  on:MDCSlider:input={e => console.log('INPUT', e.detail.value)}
+  on:MDCSlider:change={e => console.log('CHANGE', e.detail.value)}
+  aria-disabled={disabled}>
+  <div class="mdc-slider__track-container">
+    {#if displayMarkers}
+      <div class="mdc-slider__track-container">
+        <div class="mdc-slider__track" />
+        <div class="mdc-slider__track-marker-container" />
+      </div>
+    {:else}
+      <div class="mdc-slider__track" />
+    {/if}
+  </div>
+  <div class="mdc-slider__thumb-container">
+    {#if isDiscrete}
+      <div class="mdc-slider__pin">
+        <span class="mdc-slider__pin-value-marker" />
+      </div>
+    {/if}
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875" />
+    </svg>
+    <div class="mdc-slider__focus-ring" />
+  </div>
+</div> -->
+
+<!-- <div class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
+     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+     aria-label="Select Value">
+  <div class="mdc-slider__track-container">
+    <div class="mdc-slider__track"></div>
+  </div>
+  <div class="mdc-slider__thumb-container">
+    <div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker"></span>
+    </div>
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875"></circle>
+    </svg>
+    <div class="mdc-slider__focus-ring"></div>
+  </div>
+</div> -->
diff --git a/packages/materialdesign-components/src/Slider/_style.scss b/packages/materialdesign-components/src/Slider/_style.scss
new file mode 100644
index 0000000000..0be8b2ea70
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/_style.scss
@@ -0,0 +1 @@
+@import "@material/slider/mdc-slider.scss"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Slider/index.js b/packages/materialdesign-components/src/Slider/index.js
new file mode 100644
index 0000000000..d59f34d7fe
--- /dev/null
+++ b/packages/materialdesign-components/src/Slider/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss"
+export {default as Slider} from "./Slider.svelte"
diff --git a/packages/materialdesign-components/src/Switch/Switch.svelte b/packages/materialdesign-components/src/Switch/Switch.svelte
new file mode 100644
index 0000000000..c98d384859
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/Switch.svelte
@@ -0,0 +1,41 @@
+<script>
+  import ClassBuilder from "../ClassBuilder.js"
+  import Formfield from "../Common/Formfield.svelte"
+  import Label from "../Common/Label.svelte"
+  export let onChange = checked => {}
+
+  export let _bb
+  export let alignEnd = true
+  export let disabled = false
+  export let checked = false
+  export let label = ""
+  export let id = "my-switch-component"
+
+  const cb = new ClassBuilder("switch")
+
+  function handleChange() {
+    checked = !checked
+    onChange(checked)
+  }
+
+  $: modifiers = { disabled, checked }
+  $: props = { modifiers }
+  $: switchCls = cb.build({ props })
+</script>
+
+<Formfield {_bb} {label} {alignEnd}>
+  <div class={switchCls} on:change={handleChange} style="margin: 0px 5px">
+    <div class="mdc-switch__track" />
+    <div class="mdc-switch__thumb-underlay">
+      <div class="mdc-switch__thumb" />
+      <input
+        type="checkbox"
+        {id}
+        class="mdc-switch__native-control"
+        role="switch"
+        aria-checked={checked}
+        {disabled}
+        {checked} />
+    </div>
+  </div>
+</Formfield>
diff --git a/packages/materialdesign-components/src/Switch/_style.scss b/packages/materialdesign-components/src/Switch/_style.scss
new file mode 100644
index 0000000000..a600664513
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/_style.scss
@@ -0,0 +1 @@
+@import "@material/switch/mdc-switch.scss";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Switch/index.js b/packages/materialdesign-components/src/Switch/index.js
new file mode 100644
index 0000000000..f57acc1407
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss"
+export { default as Switch } from "./Switch.svelte"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index a84d0280d4..d839988147 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -19,6 +19,10 @@
     Select,
     DatePicker,
     IconButton,
+    Card,
+    Dialog,
+    Switch,
+    Slider,
   } = props
 
   let currentComponent
@@ -30,7 +34,6 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            Button,
             BodyBoundToStore,
             Textfield,
             Select,
@@ -38,6 +41,8 @@
             Radiobuttongroup,
             DatePicker,
             IconButton,
+            Switch,
+            Slider,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index e53441c8ce..75244cf0c8 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -210,11 +210,112 @@ export const props = {
     _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
     label: "Date of Admission",
-    onSelect: date => console.log("SELECTED DATE", date)
+    onSelect: date => console.log("SELECTED DATE", date),
   },
   IconButton: {
     _component: "@budibase/materialdesign-components/IconButton",
     _children: [],
     icon: "calendar_today",
   },
+  Card: {
+    _id: "card",
+    width: "400",
+    _component: "@budibase/materialdesign-components/Card",
+    _children: [
+      {
+        _id: "cardbody",
+        _component: "@budibase/materialdesign-components/CardBody",
+        onClick: () => alert`Hi`,
+        _children: [
+          {
+            _id: "cardimage1",
+            _component: "@budibase/materialdesign-components/CardImage",
+            _children: [],
+            displayHorizontal: true,
+            url: "https://picsum.photos/350",
+            title: "Our New World",
+            subtitle: "Out now in cinemas",
+          },
+        ],
+      },
+      {
+        _component: "@budibase/materialdesign-components/CardFooter",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Save",
+          },
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Cancel",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "3d_rotation",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "accessibility",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "alarm_on",
+          },
+        ],
+      },
+    ],
+  },
+  Dialog: {
+    _component: "@budibase/materialdesign-components/Dialog",
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/DialogHeader",
+        title: "Important Message",
+        _children: [],
+      },
+      {
+        _component: "@budibase/materialdesign-components/DialogContent",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/H3",
+            text: "An announcement from your service provider",
+            _children: [],
+          },
+          {
+            _component: "@budibase/materialdesign-components/Body2",
+            text:
+              "All non-essential services will be shut down as of tomorrow. Please acknowledge that you have seen this message by confirming below.",
+            _children: [],
+          },
+        ],
+      },
+      {
+        _component: "@budibase/materialdesign-components/DialogActions",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Confirm",
+            variant: "unelevated",
+            _children: [],
+          },
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Cancel",
+            _children: [],
+          },
+        ],
+      },
+    ],
+  },
+  Switch: {
+    _component: "@budibase/materialdesign-components/Switch",
+    label: "On / Off",
+    checked: true,
+    onChange: () => console.log("Switch Changed"),
+    _children: [],
+  },
+  Slider: {
+    _component: "@budibase/materialdesign-components/Slider",
+    _children: [],
+  },
 }
diff --git a/packages/materialdesign-components/src/Typography/Body1.svelte b/packages/materialdesign-components/src/Typography/Body1.svelte
index 9d71d17e62..d653bcee98 100644
--- a/packages/materialdesign-components/src/Typography/Body1.svelte
+++ b/packages/materialdesign-components/src/Typography/Body1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--body1">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--body1">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Body2.svelte b/packages/materialdesign-components/src/Typography/Body2.svelte
index 5e1cbb850d..eddd94c3f7 100644
--- a/packages/materialdesign-components/src/Typography/Body2.svelte
+++ b/packages/materialdesign-components/src/Typography/Body2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--body2">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--body2">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Caption.svelte b/packages/materialdesign-components/src/Typography/Caption.svelte
index 84c8c39d61..33406afb1e 100644
--- a/packages/materialdesign-components/src/Typography/Caption.svelte
+++ b/packages/materialdesign-components/src/Typography/Caption.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--caption">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--caption">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/H1.svelte b/packages/materialdesign-components/src/Typography/H1.svelte
index f5daec4c67..92492a971e 100644
--- a/packages/materialdesign-components/src/Typography/H1.svelte
+++ b/packages/materialdesign-components/src/Typography/H1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h1 class="mdc-typography--headline1">{text}</h1>
+<h1
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline1">
+  {text}
+</h1>
diff --git a/packages/materialdesign-components/src/Typography/H2.svelte b/packages/materialdesign-components/src/Typography/H2.svelte
index cd75c8facb..9576570a5c 100644
--- a/packages/materialdesign-components/src/Typography/H2.svelte
+++ b/packages/materialdesign-components/src/Typography/H2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h2 class="mdc-typography--headline2">{text}</h2>
+<h2
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline2">
+  {text}
+</h2>
diff --git a/packages/materialdesign-components/src/Typography/H3.svelte b/packages/materialdesign-components/src/Typography/H3.svelte
index abcf5d3a78..d5f0c2b4eb 100644
--- a/packages/materialdesign-components/src/Typography/H3.svelte
+++ b/packages/materialdesign-components/src/Typography/H3.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h3 class="mdc-typography--headline3">{text}</h3>
+<h3
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline3">
+  {text}
+</h3>
diff --git a/packages/materialdesign-components/src/Typography/H4.svelte b/packages/materialdesign-components/src/Typography/H4.svelte
index b48ad4c4e4..0a0e490a3e 100644
--- a/packages/materialdesign-components/src/Typography/H4.svelte
+++ b/packages/materialdesign-components/src/Typography/H4.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h4 class="mdc-typography--headline4">{text}</h4>
+<h4
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline4">
+  {text}
+</h4>
diff --git a/packages/materialdesign-components/src/Typography/H5.svelte b/packages/materialdesign-components/src/Typography/H5.svelte
index 1854ed494c..d45e4e15ab 100644
--- a/packages/materialdesign-components/src/Typography/H5.svelte
+++ b/packages/materialdesign-components/src/Typography/H5.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h5 class="mdc-typography--headline5">{text}</h5>
+<h5
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline5">
+  {text}
+</h5>
diff --git a/packages/materialdesign-components/src/Typography/H6.svelte b/packages/materialdesign-components/src/Typography/H6.svelte
index 18a191d787..8a9d36c9e2 100644
--- a/packages/materialdesign-components/src/Typography/H6.svelte
+++ b/packages/materialdesign-components/src/Typography/H6.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h6 class="mdc-typography--headline6">{text}</h6>
+<h6
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline6">
+  {text}
+</h6>
diff --git a/packages/materialdesign-components/src/Typography/Overline.svelte b/packages/materialdesign-components/src/Typography/Overline.svelte
index 160b60b0eb..df33194a29 100644
--- a/packages/materialdesign-components/src/Typography/Overline.svelte
+++ b/packages/materialdesign-components/src/Typography/Overline.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--overline">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--overline">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Sub1.svelte b/packages/materialdesign-components/src/Typography/Sub1.svelte
index c2092868aa..a887f7372c 100644
--- a/packages/materialdesign-components/src/Typography/Sub1.svelte
+++ b/packages/materialdesign-components/src/Typography/Sub1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--subtitle1">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--subtitle1">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Sub2.svelte b/packages/materialdesign-components/src/Typography/Sub2.svelte
index d6377cadab..c8860a5869 100644
--- a/packages/materialdesign-components/src/Typography/Sub2.svelte
+++ b/packages/materialdesign-components/src/Typography/Sub2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--subtitle2">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--subtitle2">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 13cf4fb2ca..14a5c6f583 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -21,3 +21,7 @@ export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
 export { IconButton } from "./IconButton"
+export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
+export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
+export { Switch } from "./Switch"
+export { Slider } from "./Slider"