diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
deleted file mode 100644
index 1c61a40b4..000000000
--- a/src/components/Button/Button.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <button class="mdc-button" :class="classes" :id="id" v-bind="$attrs" v-on="$listeners">
-        <a v-if="icon" class="material-icons mdc-button__icon">{{icon}}</a>
-        <slot>
-            {{text}}
-        </slot>
-    </button>
-</template>
-
-<script>
-import { MDCRipple } from '@material/ripple'
-export default {
-    props: {
-        text: {
-            type: String,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        },
-        icon: {
-            type: String,
-            required: false
-        },
-        raised: {
-            type: Boolean,
-            required: false
-        },
-        unelevated: {
-            type: Boolean,
-            required: false
-        },
-        stroked: {
-            type: Boolean,
-            required: false
-        },
-        dense: {
-            type: Boolean,
-            required: false
-        },
-        compact: {
-            type: Boolean,
-            required: false
-        },
-        interactive: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcRipple: null
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-button--raised': this.raised,
-                'mdc-button--unelevated': this.unelevated,
-                'mdc-button--stroked': this.stroked,
-                'mdc-button--dense': this.dense,
-                'mdc-button--compact': this.compact
-            }
-        }
-    },
-    mounted() {
-        if (this.interactive)
-            this.mdcRipple = new MDCRipple(this.$el)
-    },
-    destroyed() {
-        this.mdcRipple.destroy()
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/button/mdc-button";
-</style>
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
deleted file mode 100644
index 93219c4e8..000000000
--- a/src/components/Button/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Button from './Button'
-
-export { Button }
-
-export default {
-  install (vm) {
-    vm.component('m-button', Button)
-  }
-}
diff --git a/src/components/Card/Card.vue b/src/components/Card/Card.vue
deleted file mode 100644
index 111e35c91..000000000
--- a/src/components/Card/Card.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="mdc-card" :class="classes" :id="id">
-    <div class="mdc-card__horizontal-block" v-if="horizontal && ($slots['cardHorizontalMedia'] || $slots['cardHorizontalTitle'] || $slots['cardHorizontalSubtitle'])">
-        <section class="mdc-card__primary" >
-          <section class="mdc-card__media" v-if="$slots['cardHorizontalMedia']">
-            <slot name="cardHorizontalMedia" />
-          </section>
-          <div class="mdc-card__title" :class="classesTitle" v-if="$slots['cardHorizontalTitle']">
-            <slot name="cardHorizontalTitle" />
-          </div>
-          <div class="mdc-card__subtitle" v-if="$slots['cardHorizontalSubtitle']">
-            <slot name="cardHorizontalSubtitle" />
-          </div>
-        </section>
-    </div>
-    <section class="mdc-card__primary" v-else-if="!horizontal && ($slots['cardMedia'] || $slots['cardTitle'] || $slots['cardSubtitle'])">
-      <section class="mdc-card__media" v-if="$slots['cardMedia']">
-        <slot name="cardMedia" />
-      </section>
-      <div class="mdc-card__title" :class="classesTitle" v-if="$slots['cardTitle']">
-        <slot name="cardTitle" />
-      </div>
-      <div class="mdc-card__subtitle " v-if="$slots['cardSubtitle']">
-        <slot name="cardSubtitle" />
-      </div>
-    </section>
-    <section class="mdc-card__supporting-text " v-if="$slots['cardSupportingText']">
-      <slot name="cardSupportingText" />
-    </section>
-    <section class="mdc-card__actions " :class="classesActions" v-if="$slots['cardActions']">
-      <slot name="cardActions" />
-    </section>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: false
-    },
-    darkTheme: {
-      type: Boolean,
-      required: false
-    },
-    verticalActions: {
-      type: Boolean,
-      required: false
-    },
-    largeTitle: {
-      type: Boolean,
-      required: false
-    },
-    horizontal: {
-      type: Boolean,
-      required: false
-    }
-  },
-  mounted() {
-    if (this.$slots.actions)
-      this.$slots.actions.map((n) => {
-        n.elm.classList.add('mdc-card__action')
-      })
-  },
-  computed: {
-    classes() {
-      return {
-        'mdc-card--theme-dark': this.darkTheme
-      }
-    },
-    classesActions() {
-      return {
-        'mdc-card__actions--vertical': this.verticalActions
-      }
-    },
-    classesTitle() {
-      return {
-        'mdc-card__title--large': this.largeTitle
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "@material/card/mdc-card";
-</style>
-
-
diff --git a/src/components/Card/CardMediaItem.vue b/src/components/Card/CardMediaItem.vue
deleted file mode 100644
index b59a8d646..000000000
--- a/src/components/Card/CardMediaItem.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <img class="mdc-card__media-item" :class="classes" :id="id" :src="src">
-</template>
-
-<script>
-
-export default {
-    props: {
-         id: {
-            type: String,
-            required: false
-        },
-        src: {
-            type: String,
-            required: true
-        },
-        height: {
-            type: Number,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-card__media-item--1x': (height === 1),
-                'mdc-card__media-item--2x': (height === 2),
-                'mdc-card__media-item--3x': (height === 3)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/card/mdc-card";
-</style>
\ No newline at end of file
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
deleted file mode 100644
index 9c1ca0502..000000000
--- a/src/components/Card/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Card from './Card'
-import CardMediaItem from './CardMediaItem'
-
-export { Card, CardMediaItem }
-
-export default {
-  install (vm) {
-    vm.component('m-card', Card)
-    vm.component('m-card-media-item', CardMediaItem)
-  }
-}
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
deleted file mode 100644
index 88202cf7d..000000000
--- a/src/components/Checkbox/Checkbox.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <div class="mdc-checkbox">
-        <input type="checkbox" class="mdc-checkbox__native-control" :id="id" v-bind="$attrs" v-model="model" />
-        <div class="mdc-checkbox__background">
-            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-            </svg>
-            <div class="mdc-checkbox__mixedmark"></div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { MDCCheckbox } from '@material/checkbox'
-export default {
-    props: {
-        checked: {
-            type: Boolean,
-            required: false
-        },
-        indeterminate: {
-            type: Boolean,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        }
-    },
-    model: {
-        prop: 'checked',
-        event: 'change'
-    },
-    data() {
-        return {
-            mdcCheckbox: null
-        }
-    },
-    mounted() {
-        this.mdcCheckbox = new MDCCheckbox(this.$el)
-        this.mdcCheckbox.indeterminate = this.indeterminate
-    },
-    destroyed() {
-        this.mdcCheckbox.destroy()
-    },
-    watch: {
-        checked() {
-            this.mdcCheckbox.indeterminate = false
-        }
-    },
-    computed: {
-        model: {
-            get() {
-                return this.checked
-            },
-            set(state) {
-                this.$emit('change', state)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/checkbox/mdc-checkbox";
-</style>
-
-
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
deleted file mode 100644
index 7cfec2796..000000000
--- a/src/components/Checkbox/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Checkbox from './Checkbox'
-
-export { Checkbox }
-
-export default {
-  install (vm) {
-    vm.component('m-checkbox', Checkbox)
-  }
-}
diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
deleted file mode 100644
index 949d4f033..000000000
--- a/src/components/Dialog/Dialog.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <aside class="mdc-dialog" role="alertdialog" :id="id">
-        <div class="mdc-dialog__surface">
-            <header class="mdc-dialog__header" v-if="$slots['dialogHeader']">                
-                <h1 v-if="heading === 1" class="mdc-dialog__header__title">
-                    <slot name="dialogHeader" />
-                </h1>
-                <h2 v-else-if="heading === 2" class="mdc-dialog__header__title">
-                    <slot name="dialogHeader" />
-                </h2>
-                <h3 v-else-if="heading === 3" class="mdc-dialog__header__title">
-                    <slot name="dialogHeader" />
-                </h3>
-            </header>
-            <section class="mdc-dialog__body" v-if="$slots['dialogBody']">
-                <slot name="dialogBody" />
-            </section>
-            <footer class="mdc-dialog__footer" v-if="$slots['dialogAcceptButton'] || $slots['dialogCancelButton'] || $slots['dialogButton']">
-                <slot name="dialogAcceptButton" />
-                <slot name="dialogCancelButton" />
-                <slot name="dialogButton" />
-            </footer>
-        </div>
-        <div class="mdc-dialog__backdrop"></div>
-    </aside>
-</template>
-
-<script>
-import { MDCDialog } from '@material/dialog';
-
-export default {
-    props: {
-        show: {
-            type: Boolean,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        },
-        heading: {
-            type: Number,
-            required: true
-        }
-    },
-    data() {
-        return {
-            mdcDialog: null
-        }
-    },
-    mounted() {
-        let vm = this;
-        vm.mdcDialog = new MDCDialog(this.$el)
-        vm.mdcDialog.listen('MDCDialog:accept', function() {
-            vm.$emit('accept')
-        })
-        vm.mdcDialog.listen('MDCDialog:cancel', function() {
-            vm.$emit('cancel')
-        })
-
-        if (vm.$slots.dialogAcceptButton)
-            vm.$slots.dialogAcceptButton.map((n) => {
-                n.elm.classList.add('mdc-dialog__footer__button')
-                n.elm.classList.add('mdc-dialog__footer__button--accept')
-            })
-        if (vm.$slots.dialogCancelButton)
-            vm.$slots.dialogCancelButton.map((n) => {
-                n.elm.classList.add('mdc-dialog__footer__button')
-                n.elm.classList.add('mdc-dialog__footer__button--cancel')
-            })
-        if (vm.$slots.dialogButton)
-            vm.$slots.dialogButton.map((n) => {
-                n.elm.classList.add('mdc-dialog__footer__button')
-            })
-    },
-    destroyed() {
-        this.mdcDialog.destroy()
-    },
-    watch: {
-        show() {
-            this.show ? this.mdcDialog.show() : this.mdcDialog.close()
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/dialog/mdc-dialog";
-</style>
-
-
diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js
deleted file mode 100644
index 538dc60ae..000000000
--- a/src/components/Dialog/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Dialog from './Dialog'
-
-export { Dialog }
-
-export default {
-  install (vm) {
-    vm.component('m-dialog', Dialog)
-  }
-}
diff --git a/src/components/Drawer/TemporaryDrawer.vue b/src/components/Drawer/TemporaryDrawer.vue
deleted file mode 100644
index b354255b1..000000000
--- a/src/components/Drawer/TemporaryDrawer.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <div class="mdc-temporary-drawer" :id="id" @click="$emit('toggleDrawer')">
-        <nav class="mdc-temporary-drawer__drawer">
-            <header class="mdc-temporary-drawer__header" v-if="$slots['drawerHeader']">
-                <div class="mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary">
-                    <slot name="drawerHeader" />
-                </div>
-            </header>
-            <nav class="mdc-temporary-drawer__content" v-if="$slots['drawerContent']">
-                <slot name="drawerContent" />
-            </nav>
-        </nav>
-    </div>
-</template>
-
-<script>
-import { MDCTemporaryDrawer } from '@material/drawer'
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        visible: {
-            type: Boolean,
-            required: true
-        }
-    },
-    data() {
-        return {
-            mdcTemporaryDrawer: null
-        }
-    },
-    mounted() {
-        this.mdcTemporaryDrawer = new MDCTemporaryDrawer(this.$el)
-    },
-    destroyed() {
-        this.mdcTemporaryDrawer.destroy()
-    },
-    watch: {
-        visible() {
-            this.mdcTemporaryDrawer.open = this.visible
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/drawer/mdc-drawer";
-</style>
-
diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js
deleted file mode 100644
index 99ec5b2e8..000000000
--- a/src/components/Drawer/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import TemporaryDrawer from './TemporaryDrawer'
-
-export { TemporaryDrawer }
-
-export default {
-  install (vm) {
-    vm.component('m-temporary-drawer', TemporaryDrawer)
-  }
-}
diff --git a/src/components/Fab/Fab.vue b/src/components/Fab/Fab.vue
deleted file mode 100644
index 05cee5c4f..000000000
--- a/src/components/Fab/Fab.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <button class="mdc-fab material-icons" :class="classes" :id="id" v-on="$listeners">
-        <span class="mdc-fab__icon">
-            {{icon}}
-        </span>
-    </button>
-</template>
-
-<script>
-import { MDCRipple } from '@material/ripple';
-export default {
-    props: {
-        mini: {
-            type: Boolean,
-            required: false
-        },
-        absoluteRight: {
-            type: Boolean,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        },
-        icon: {
-            type: String,
-            required: true
-        },
-        interactive: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcRipple: null
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-fab--mini': this.mini,
-                'mdc-fab--absolute-right': this.absoluteRight
-            }  
-        }
-    },
-    mounted() {
-        if (this.interactive)
-            this.mdcRipple = new MDCRipple(this.$el)
-    },
-    destroyed() {
-        this.mdcRipple.destroy()
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/fab/mdc-fab";
-.mdc-fab--absolute-right.mdc-fab--absolute-right {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-}
-
-@media(min-width: 1024px) {
-    .mdc-fab--absolute-right.mdc-fab--absolute-right {
-        bottom: 1.5rem;
-        right: 1.5rem;
-    }
-}
-</style>
diff --git a/src/components/Fab/index.js b/src/components/Fab/index.js
deleted file mode 100644
index 146d0077d..000000000
--- a/src/components/Fab/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Fab from './Fab'
-
-export { Fab }
-
-export default {
-  install (vm) {
-    vm.component('m-fab', Fab)
-  }
-}
diff --git a/src/components/FormField/FormField.vue b/src/components/FormField/FormField.vue
deleted file mode 100644
index ad167ccab..000000000
--- a/src/components/FormField/FormField.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="mdc-form-field" :class="classes" :id="id">
-    <slot />
-  </div>
-</template>
-
-<script>
-import { MDCFormField } from '@material/form-field'
-
-export default {
-  props: {
-    alignEnd: {
-      type: Boolean,
-      required: false
-    },
-    id: {
-      type: String,
-      required: false
-    }
-  },
-  data() {
-    return {
-      mdcFormField: null
-    }
-  },
-  mounted() {
-    this.mdcFormField = new MDCFormField(this.$el)
-  },
-  destroyed() {
-    this.mdcFormField.destroy()
-  },
-  computed: {
-    classes() {
-      return {
-        'mdc-form-field--align-end': this.alignEnd
-      }
-    }
-  }
-}
-
-</script>
-
-<style lang="scss">
-@import "@material/form-field/mdc-form-field";
-</style>
-
-
diff --git a/src/components/FormField/index.js b/src/components/FormField/index.js
deleted file mode 100644
index 597713d41..000000000
--- a/src/components/FormField/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import FormField from './FormField'
-
-export { FormField }
-
-export default {
-  install (vm) {
-    vm.component('m-form-field', FormField)
-  }
-}
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
deleted file mode 100644
index 1eda7dde0..000000000
--- a/src/components/Icon/Icon.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <a class="material-icons" :class="classes" :id="id" v-on="$listeners">
-        {{icon}}
-    </a>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        icon: {
-            type: String,
-            required: true
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                
-            }
-        }
-    }
-}
-</script>
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
deleted file mode 100644
index 4e6560665..000000000
--- a/src/components/Icon/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Icon from './Icon'
-
-export { Icon }
-
-export default {
-  install (vm) {
-    vm.component('m-icon', Icon)
-  }
-}
diff --git a/src/components/IconToggle/IconToggle.vue b/src/components/IconToggle/IconToggle.vue
deleted file mode 100644
index c7978ddbd..000000000
--- a/src/components/IconToggle/IconToggle.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-    <i class="mdc-icon-toggle" :class="classes" :id="id" role="button" :data-toggle-on="dataToggleOn" :data-toggle-off="dataToggleOff" @click="toggleState">
-        {{icon+'_border'}}
-    </i>
-</template>
-
-<script>
-import { MDCIconToggle } from '@material/icon-toggle'
-import { debounce } from '../utils'
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        icon: {
-            type: String,
-            required: true
-        },
-        disabled: {
-            type: Boolean,
-            required: false
-        },
-        primary: {
-            type: Boolean,
-            required: false
-        },
-        accent: {
-            type: Boolean,
-            required: false
-        },
-        labelOn: {
-            type: String,
-            required: false
-        },
-        labelOff: {
-            type: String,
-            required: false
-        },
-        value: {
-            type: Boolean,
-            required: true
-        }
-    },
-    data() {
-        return {
-            mdcIconToggle: null
-        }
-    },
-    mounted() {
-        this.mdcIconToggle = new MDCIconToggle(this.$el)
-        this.mdcIconToggle.disabled = this.disabled
-        this.mdcIconToggle.on = this.value
-    },
-    destroy() {
-        this.mdcIconToggle.destroy()
-    },
-    computed: {
-        classes() {
-            return {
-                'material-icons': true,
-                'mdc-icon-toggle--disabled': this.disabled,
-                'mdc-icon-toggle--primary': this.primary,
-                'mdc-icon-toggle--accent': this.accent
-            }
-        },
-        dataToggleOn() {
-            return JSON.stringify({ 'content': this.icon, 'label': this.labelOn })
-        },
-        dataToggleOff() {
-            return JSON.stringify({ 'content': this.icon + '_border', 'label': this.labelOff })
-        }
-    },
-    methods: {
-        toggleState() {
-            debounce(this.$emit('input', !this.value))
-        }
-    },
-    watch: {
-        disabled() {
-            this.iconToggle.disabled = this.disabled
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import '@material/icon-toggle/mdc-icon-toggle';
-</style>
diff --git a/src/components/IconToggle/index.js b/src/components/IconToggle/index.js
deleted file mode 100644
index 8e819af57..000000000
--- a/src/components/IconToggle/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import IconToggle from './IconToggle'
-
-export { IconToggle }
-
-export default {
-  install (vm) {
-    vm.component('m-icon-toggle', IconToggle)
-  }
-}
diff --git a/src/components/LayoutGrid/LayoutGrid.vue b/src/components/LayoutGrid/LayoutGrid.vue
deleted file mode 100644
index 3ca3685e8..000000000
--- a/src/components/LayoutGrid/LayoutGrid.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <div class="mdc-layout-grid" :class="classes" :id="id">
-        <slot />
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            require: false
-        },
-        toolbarAdjust: {
-            type: Boolean,
-            required: false
-        },
-        fixedColumnWidth: {
-            type: Boolean,
-            required: false
-        },
-        align: {
-            type: String,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-toolbar-fixed-adjust': this.toolbarAdjust,
-                'mdc-layout-grid--fixed-column-width': this.fixedColumnWidth,
-                'mdc-layout-grid--align-left': (this.align === 'left'),
-                'mdc-layout-grid--align-right': (this.align === 'right')
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/layout-grid/mdc-layout-grid";
-@import "@material/toolbar/mdc-toolbar";
-</style>
-
-
diff --git a/src/components/LayoutGrid/LayoutGridCell.vue b/src/components/LayoutGrid/LayoutGridCell.vue
deleted file mode 100644
index 39ea13564..000000000
--- a/src/components/LayoutGrid/LayoutGridCell.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <div class="mdc-layout-grid__cell" :class="classes" :id="id">
-        <slot />
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String, 
-            require: false
-        },
-        span: {
-            type: Number,
-            required: false
-        },
-        spanDesktop: {
-            type: Number,
-            required: false
-        },
-        spanTablet: {
-            type: Number,
-            required: false
-        },
-        spanPhone: {
-            type: Number,
-            required: false
-        },
-        order: {
-            type: Number,
-            required: false
-        },
-        align: {
-            type: String,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return Object.assign({},
-                {
-                    'mdc-layout-grid__cell--span-1': (this.span === 1),
-                    'mdc-layout-grid__cell--span-2': (this.span === 2),
-                    'mdc-layout-grid__cell--span-3': (this.span === 3),
-                    'mdc-layout-grid__cell--span-4': (this.span === 4),
-                    'mdc-layout-grid__cell--span-5': (this.span === 5),
-                    'mdc-layout-grid__cell--span-6': (this.span === 6),
-                    'mdc-layout-grid__cell--span-7': (this.span === 7),
-                    'mdc-layout-grid__cell--span-8': (this.span === 8),
-                    'mdc-layout-grid__cell--span-9': (this.span === 9),
-                    'mdc-layout-grid__cell--span-10': (this.span === 10),
-                    'mdc-layout-grid__cell--span-11': (this.span === 11),
-                    'mdc-layout-grid__cell--span-12': (this.span === 12)
-                },
-                {
-                    'mdc-layout-grid__cell--span-1-desktop': (this.spanDesktop === 1),
-                    'mdc-layout-grid__cell--span-2-desktop': (this.spanDesktop === 2),
-                    'mdc-layout-grid__cell--span-3-desktop': (this.spanDesktop === 3),
-                    'mdc-layout-grid__cell--span-4-desktop': (this.spanDesktop === 4),
-                    'mdc-layout-grid__cell--span-5-desktop': (this.spanDesktop === 5),
-                    'mdc-layout-grid__cell--span-6-desktop': (this.spanDesktop === 6),
-                    'mdc-layout-grid__cell--span-7-desktop': (this.spanDesktop === 7),
-                    'mdc-layout-grid__cell--span-8-desktop': (this.spanDesktop === 8),
-                    'mdc-layout-grid__cell--span-9-desktop': (this.spanDesktop === 9),
-                    'mdc-layout-grid__cell--span-10-desktop': (this.spanDesktop === 10),
-                    'mdc-layout-grid__cell--span-11-desktop': (this.spanDesktop === 11),
-                    'mdc-layout-grid__cell--span-12-desktop': (this.spanDesktop === 12)
-                },
-                {
-                    'mdc-layout-grid__cell--span-1-tablet': (this.spanTablet === 1),
-                    'mdc-layout-grid__cell--span-2-tablet': (this.spanTablet === 2),
-                    'mdc-layout-grid__cell--span-3-tablet': (this.spanTablet === 3),
-                    'mdc-layout-grid__cell--span-4-tablet': (this.spanTablet === 4),
-                    'mdc-layout-grid__cell--span-5-tablet': (this.spanTablet === 5),
-                    'mdc-layout-grid__cell--span-6-tablet': (this.spanTablet === 6),
-                    'mdc-layout-grid__cell--span-7-tablet': (this.spanTablet === 7),
-                    'mdc-layout-grid__cell--span-8-tablet': (this.spanTablet === 8),
-                    'mdc-layout-grid__cell--span-9-tablet': (this.spanTablet === 9),
-                    'mdc-layout-grid__cell--span-10-tablet': (this.spanTablet === 10),
-                    'mdc-layout-grid__cell--span-11-tablet': (this.spanTablet === 11),
-                    'mdc-layout-grid__cell--span-12-tablet': (this.spanTablet === 12)
-                },
-                {
-                    'mdc-layout-grid__cell--span-1-phone': (this.spanPhone === 1),
-                    'mdc-layout-grid__cell--span-2-phone': (this.spanPhone === 2),
-                    'mdc-layout-grid__cell--span-3-phone': (this.spanPhone === 3),
-                    'mdc-layout-grid__cell--span-4-phone': (this.spanPhone === 4),
-                    'mdc-layout-grid__cell--span-5-phone': (this.spanPhone === 5),
-                    'mdc-layout-grid__cell--span-6-phone': (this.spanPhone === 6),
-                    'mdc-layout-grid__cell--span-7-phone': (this.spanPhone === 7),
-                    'mdc-layout-grid__cell--span-8-phone': (this.spanPhone === 8),
-                    'mdc-layout-grid__cell--span-9-phone': (this.spanPhone === 9),
-                    'mdc-layout-grid__cell--span-10-phone': (this.spanPhone === 10),
-                    'mdc-layout-grid__cell--span-11-phone': (this.spanPhone === 11),
-                    'mdc-layout-grid__cell--span-12-phone': (this.spanPhone === 12)
-                },
-                {
-                    'mdc-layout-grid__cell--align-top': (this.align === 'top'),
-                    'mdc-layout-grid__cell--align-middle': (this.align === 'middle'),
-                    'mdc-layout-grid__cell--align-bottom': (this.align === 'bottom')
-                },
-                {
-                    'mdc-layout-grid__cell--order-1': (this.order === 1),
-                    'mdc-layout-grid__cell--order-2': (this.order === 2),
-                    'mdc-layout-grid__cell--order-3': (this.order === 3),
-                    'mdc-layout-grid__cell--order-4': (this.order === 4),
-                    'mdc-layout-grid__cell--order-5': (this.order === 5),
-                    'mdc-layout-grid__cell--order-6': (this.order === 6),
-                    'mdc-layout-grid__cell--order-7': (this.order === 7),
-                    'mdc-layout-grid__cell--order-8': (this.order === 8),
-                    'mdc-layout-grid__cell--order-9': (this.order === 9),
-                    'mdc-layout-grid__cell--order-10': (this.order === 10),
-                    'mdc-layout-grid__cell--order-11': (this.order === 11),
-                    'mdc-layout-grid__cell--order-12': (this.order === 12)
-                })
-
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/layout-grid/mdc-layout-grid";
-</style>
-
-
diff --git a/src/components/LayoutGrid/LayoutGridInner.vue b/src/components/LayoutGrid/LayoutGridInner.vue
deleted file mode 100644
index b027bd819..000000000
--- a/src/components/LayoutGrid/LayoutGridInner.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="mdc-layout-grid__inner" :id="id">
-        <slot />
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            require: false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/layout-grid/mdc-layout-grid";
-</style>
-
diff --git a/src/components/LayoutGrid/index.js b/src/components/LayoutGrid/index.js
deleted file mode 100644
index a5924e9fe..000000000
--- a/src/components/LayoutGrid/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import LayoutGrid from './LayoutGrid'
-import LayoutGridCell from './LayoutGridCell'
-import LayoutGridInner from './LayoutGridInner'
-
-export { LayoutGrid, LayoutGridCell, LayoutGridInner }
-
-export default {
-  install (vm) {
-    vm.component('m-layout-grid', LayoutGrid)
-    vm.component('m-layout-grid-cell', LayoutGridCell)
-    vm.component('m-layout-grid-inner', LayoutGridInner)
-  }
-}
diff --git a/src/components/List/List.vue b/src/components/List/List.vue
deleted file mode 100644
index a95014145..000000000
--- a/src/components/List/List.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <ul class="mdc-list" :class="classes" :id="id">
-        <slot />
-    </ul>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        darkTheme: {
-            type: Boolean,
-            required: false
-        },
-        dense: {
-            type: Boolean,
-            required: false
-        },
-        twoLine: {
-            type: Boolean,
-            required: false
-        },
-        avatar: {
-            type: Boolean,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-list--theme-dark': this.darkTheme,
-                'mdc-list--theme-dense': this.dense,
-                'mdc-list--two-line': this.twoLine,
-                'mdc-list--avatar-list': this.avatar
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
-
-
diff --git a/src/components/List/ListDivider.vue b/src/components/List/ListDivider.vue
deleted file mode 100644
index 33b458eb5..000000000
--- a/src/components/List/ListDivider.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <li role="separator" class="mdc-list-divider" :class="classes" :id="id" />
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        isnet: {
-            type: Boolean,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-list-divider--inset': this.inset
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
-
-
diff --git a/src/components/List/ListGroup.vue b/src/components/List/ListGroup.vue
deleted file mode 100644
index 08bbd2520..000000000
--- a/src/components/List/ListGroup.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <div class="mdc-list-group" :id="id">
-        <slot />
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
-
-
diff --git a/src/components/List/ListGroupDivider.vue b/src/components/List/ListGroupDivider.vue
deleted file mode 100644
index 2642c9cf9..000000000
--- a/src/components/List/ListGroupDivider.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <hr class="mdc-list-divider" :id="id">
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
-
-
diff --git a/src/components/List/ListGroupSubheader.vue b/src/components/List/ListGroupSubheader.vue
deleted file mode 100644
index e7bab2f80..000000000
--- a/src/components/List/ListGroupSubheader.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <span>
-    <h1 v-if="heading === 1" class="mdc-list-group__subheader" :id="id">{{text}}</h1>
-    <h2 v-if="heading === 2" class="mdc-list-group__subheader" :id="id">{{text}}</h2>
-    <h3 v-if="heading === 3" class="mdc-list-group__subheader" :id="id">{{text}}</h3>
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: false
-    },
-    text: {
-      type: String,
-      required: false
-    },
-    heading: {
-      type: Number,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
diff --git a/src/components/List/ListItem.vue b/src/components/List/ListItem.vue
deleted file mode 100644
index e3f971bc5..000000000
--- a/src/components/List/ListItem.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <li class="mdc-list-item" :id="id" v-on="$listeners">
-        <slot name="listItemStartDetail" />
-        <slot name="listItemContent" />
-        <slot name="listItemEndDetail" />
-        <span class="mdc-list-item__text" v-if="$slots['listItemText'] && $slots['listItemTextSecondary']">
-            <slot name="listItemText" />
-            <slot name="listItemTextSecondary" />
-        </span>
-    </li>
-</template>
-  
-<script>
-import { MDCRipple } from '@material/ripple'
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        interactive: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcRipple: null
-        }
-    },
-    mounted() {
-        if (this.interactive)
-            this.mdcRipple = new MDCRipple(this.$el)
-
-        if (this.$slots.listItemStartDetail)
-            this.$slots.listItemStartDetail.map((n) => {
-                n.elm.classList.add('mdc-list-item__start-detail')
-            })
-        if (this.$slots.listItemEndDetail)
-            this.$slots.listItemEndDetail.map((n) => {
-                n.elm.classList.add('mdc-list-item__end-detail')
-            })
-        if (this.$slots.listItemTextSecondary && this.$slots.listItemText)
-            this.$slots.listItemTextSecondary.map((n) => {
-                n.elm.classList.add('mdc-list-item__text__secondary')
-            })
-    },
-    destroyed() {
-        if (this.interactive)
-            this.mdcRipple.destroy()
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/list/mdc-list";
-</style>
-
-
diff --git a/src/components/List/index.js b/src/components/List/index.js
deleted file mode 100644
index 5cb61700f..000000000
--- a/src/components/List/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import List from './List'
-import ListDivider from './ListDivider'
-import ListGroup from './ListGroup'
-import ListGroupDivider from './ListGroupDivider'
-import ListGroupSubheader from './ListGroupSubheader'
-import ListItem from './ListItem'
-
-export { List, ListDivider, ListGroup, ListGroupDivider, ListGroupSubheader, ListItem }
-
-export default {
-  install (vm) {
-    vm.component('m-list', List)
-    vm.component('m-list-divider', ListDivider)
-    vm.component('m-list-group', ListGroup)
-    vm.component('m-list-list-group-divider', ListGroupDivider)
-    vm.component('m-list-list-group-subheader', ListGroupSubheader)
-    vm.component('m-list-item', ListItem)
-  }
-}
diff --git a/src/components/Snackbar/Snackbar.vue b/src/components/Snackbar/Snackbar.vue
deleted file mode 100644
index c563abec2..000000000
--- a/src/components/Snackbar/Snackbar.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="mdc-snackbar" :class="classes">
-        <div class="mdc-snackbar__text" />
-        <div class="mdc-snackbar__action-wrapper">
-            <button type="button" class="mdc-button mdc-snackbar__action-button" />
-        </div>
-    </div>
-</template>
-
-<script>
-import { MDCSnackbar } from '@material/snackbar';
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        alignStart: {
-            type: Boolean,
-            required: false
-        },
-        dismissesOnAction: {
-            type: Boolean,
-            default: true
-        },
-        show: {
-            type: Boolean,
-            default: false
-        },
-        message: {
-            type: String,
-            required: true
-        },
-        timeout: {
-            type: Number,
-            required: false
-        },
-        actionHandler: {
-            type: Function,
-            required: false
-        },
-        actionText: {
-            type: String,
-            required: false
-        },
-        multiline: {
-            type: Boolean,
-            required: false
-        },
-        actionOnBottom: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcSnackbar: null
-        }
-    },
-    watch: {
-        show() {
-            let options = {
-                message: this.message,
-                timeout: this.timeout !== undefined ? this.timeout : null,
-                actionHandler: this.actionHandler !== undefined ? this.actionHandler : null,
-                actionText: this.actionText !== undefined ? this.actionText : null,
-                multiline: this.multiline ? true : false,
-                actionOnBottom: this.actionOnBottom ? true : false
-            }
-            this.mdcSnackbar.show(options)
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-snackbar--align-start': this.alignStart
-            }
-        }
-    },
-    mounted() {
-        this.mdcSnackbar = new MDCSnackbar(this.$el);
-        this.mdcSnackbar.dismissesOnAction = this.dismissesOnAction
-    },
-    destroyed() {
-        this.mdcSnackbar.destroy()
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/snackbar/mdc-snackbar";
-@import "@material/button/mdc-button";
-
-.mdc-snackbar {
-    transform: translateY(100%);
-}
-</style>
-
diff --git a/src/components/Snackbar/index.js b/src/components/Snackbar/index.js
deleted file mode 100644
index dceb499a5..000000000
--- a/src/components/Snackbar/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Snackbar from './Snackbar'
-
-export { Snackbar }
-
-export default {
-  install (vm) {
-    vm.component('m-snackbar', Snackbar)
-  }
-}
diff --git a/src/components/Textfield/Textfield.vue b/src/components/Textfield/Textfield.vue
deleted file mode 100644
index 1c04428ba..000000000
--- a/src/components/Textfield/Textfield.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <div class="mdc-textfield" :class="classes">
-        <i v-if="leadingIcon" class="material-icons mdc-textfield__icon">{{leadingIcon}}</i>
-        <input :id="id" class="mdc-textfield__input" :value="value" @input="updateModel" :placeholder="placeholder" v-bind="$attrs" />
-        <label v-if="label" class="mdc-textfield__label" :class="classesLabel">{{label}}</label>
-        <i v-if="trailingIcon" class="material-icons mdc-textfield__icon">{{trailingIcon}}</i>
-        <div v-if="bottomLine" class="mdc-textfield__bottom-line"></div>
-    </div>
-</template>
-
-<script>
-import { MDCTextfield } from '@material/textfield'
-import { MDCRipple } from '@material/ripple'
-import { debounce } from '../utils'
-
-export default {
-    props: {
-        label: {
-            type: String,
-            required: false
-        },
-        value: {
-            type: String,
-            required: true
-        },
-        placeholder: {
-            type: String,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        },
-        disabled: {
-            type: Boolean,
-            required: false
-        },
-        upgraded: {
-            type: Boolean,
-            required: false
-        },
-        fullWidth: {
-            type: Boolean,
-            required: false
-        },
-        box: {
-            type: Boolean,
-            required: false
-        },
-        labelFloat: {
-            type: Boolean,
-            required: false
-        },
-        interactive: {
-            type: Boolean,
-            required: false
-        },
-        bottomLine: {
-            type: Boolean,
-            required: false
-        },
-        leadingIcon: {
-            type: String,
-            required: false
-        },
-        trailingIcon: {
-            type: String,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcTextfield: null,
-            mdcRipple: null
-        }
-    },
-    mounted() {
-        this.mdcTextfield = new MDCTextfield(this.$el)
-       
-        if (this.interactive && this.box)
-            this.mdcRipple = new MDCRipple(this.$el)
-    },
-    destroyed() {
-        this.mdcTextfield.destroy()
-
-        if (this.mdcRipple !== null)
-            this.mdcRipple.destroy()
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-textfield--disabled': this.disabled,
-                'mdc-textfield--upgraded': this.upgraded,
-                'mdc-textfield--fullwidth': this.fullWidth,
-                'mdc-textfield--box': this.box,
-                'mdc-textfield--with-leading-icon': this.leadingIcon,
-                'mdc-textfield--with-trailing-icon': this.trailingIcon
-            }
-        },
-        classesLabel() {
-            return {
-                'mdc-textfield__label--float-above': this.labelFloat
-            }
-        }
-    },
-    methods: {
-        updateModel(event) {
-            debounce(this.$emit('input', event.target.value))
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/textfield/mdc-textfield";
-</style>
diff --git a/src/components/Textfield/TextfieldHelptext.vue b/src/components/Textfield/TextfieldHelptext.vue
deleted file mode 100644
index d29e3feeb..000000000
--- a/src/components/Textfield/TextfieldHelptext.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <p class="mdc-textfield-helptext" :class="classes" :id="id"> {{text}} </p>
-</template>
-
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        text: {
-            type: String,
-            required: true
-        },
-        persistent: {
-            type: Boolean,
-            required: false
-        },
-        validationMsg: {
-            type: Boolean,
-            required: false
-        }
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-textfield-helptext--persistent': this.persistent,
-                'mdc-textfield-helptext--validation-msg': this.validationMsg
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/textfield/mdc-textfield";
-</style>
diff --git a/src/components/Textfield/TextfieldMultiline.vue b/src/components/Textfield/TextfieldMultiline.vue
deleted file mode 100644
index 85d1f64f7..000000000
--- a/src/components/Textfield/TextfieldMultiline.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <div class="mdc-textfield mdc-textfield--textarea" :class="classes">
-        <textarea :id="id" class="mdc-textfield__input" v-model="model" :placeholder="placeholder" :rows="rows" :cols="cols" />
-        <label v-if="label" class="mdc-textfield__label" :class="classesLabel">{{label}}</label>
-    </div>
-</template>
-
-<script>
-import { MDCTextfield } from '@material/textfield'
-import { debounce } from '../utils'
-
-export default {
-    model: {
-        prop: 'value',
-        event: 'input'
-    },
-    props: {
-        label: {
-            type: String,
-            required: false
-        },
-        value: {
-            type: String,
-            required: true
-        },
-        placeholder: {
-            type: String,
-            required: false
-        },
-        id: {
-            type: String,
-            required: false
-        },
-        rows: {
-            type: Number,
-            required: false
-        },
-        cols: {
-            type: Number,
-            required: false
-        },
-        disabled: {
-            type: Boolean,
-            required: false
-        },
-        upgraded: {
-            type: Boolean,
-            required: false
-        },
-        fullWidth: {
-            type: Boolean,
-            required: false
-        },
-        box: {
-            type: Boolean,
-            required: false
-        },
-        labelFloat: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcTextfield: null
-        }
-    },
-    mounted() {
-        this.mdcTextfield = new MDCTextfield(this.$el)
-    },
-    destroyed() {
-        this.mdcTextfield.destroy()
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-textfield--disabled': this.disabled,
-                'mdc-textfield--upgraded': this.upgraded,
-                'mdc-textfield--fullwidth': this.fullWidth,
-                'mdc-textfield--box': this.box
-            }
-        },
-        classesLabel() {
-            return {
-                'mdc-textfield__label--float-above': this.labelFloat
-            }
-        },
-        model: {
-            get() {
-                return this.value
-            },
-            set(value) {
-                this.$emit('input', value)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/textfield/mdc-textfield";
-</style>
diff --git a/src/components/Textfield/index.js b/src/components/Textfield/index.js
deleted file mode 100644
index c9ab8a891..000000000
--- a/src/components/Textfield/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Textfield from './Textfield'
-import TextfieldHelptext from './TextfieldHelptext'
-import TextfieldMultiline from './TextfieldMultiline'
-
-export { Textfield, TextfieldHelptext, TextfieldMultiline }
-
-export default {
-  install (vm) {
-    vm.component('m-textfield', Textfield)
-    vm.component('m-textfield-helptext', TextfieldHelptext)
-    vm.component('m-textfield-multiline', TextfieldMultiline)
-  }
-}
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
deleted file mode 100644
index c6f8d1bb6..000000000
--- a/src/components/Toolbar/Toolbar.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="mdc-toolbar" :class="classes" :id="id">
-        <div class="mdc-toolbar__row">
-            <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-                <a class="material-icons mdc-toolbar__icon--menu" @click="toggleDrawer()">
-                    menu
-                </a>
-                <span class="mdc-toolbar__title">{{title}}</span>
-                <slot name="toolbarStart" />
-            </section>
-            <section class="mdc-toolbar__section" v-if="$slots['toolbarCenter']">
-                <slot name="toolbarCenter" />
-            </section>
-            <section class="mdc-toolbar__section mdc-toolbar__section--align-end" v-if="$slots['toolbarEnd']">
-                <slot name="toolbarEnd" />
-            </section>
-        </div>
-    </div>
-</template>
-
-<script>
-import { MDCToolbar } from '@material/toolbar'
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: false
-        },
-        title: {
-            type: String,
-            required: false
-        },
-        fixed: {
-            type: Boolean,
-            required: false
-        },
-        waterfall: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            mdcToolbar: null
-        }
-    },
-    mounted() {
-        this.mdcToolbar = new MDCToolbar(this.$el)
-    },
-    destroyed() {
-        this.mdcToolbar.destroy()
-    },
-    computed: {
-        classes() {
-            return {
-                'mdc-toolbar--fixed': this.fixed,
-                'mdc-toolbar--waterfall': this.waterfall
-            }
-        }
-    },
-    methods: {
-        toggleDrawer() {
-            this.$emit('toggleDrawer');
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-@import "@material/toolbar/mdc-toolbar";
-</style>
-
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
deleted file mode 100644
index 487455827..000000000
--- a/src/components/Toolbar/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Toolbar from './Toolbar'
-
-export { Toolbar }
-
-export default {
-  install (vm) {
-    vm.component('m-toolbar', Toolbar)
-  }
-}
diff --git a/src/components/index.js b/src/components/index.js
deleted file mode 100644
index 7a9b945e4..000000000
--- a/src/components/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Button from './Button'
-import Card from './Card'
-import Checkbox from './Checkbox'
-import Dialog from './Dialog'
-import Fab from './Fab'
-import FormField from './FormField'
-import Icon from './Icon'
-import IconToggle from './IconToggle'
-import LayoutGrid from './LayoutGrid'
-import List from './List'
-import Snackbar from './Snackbar'
-import TemporaryDrawer from './Drawer'
-import Textfield from './Textfield'
-import Toolbar from './Toolbar'
-
-const plugin = {
-  install (vue) {
-    vue.use(Button)
-    vue.use(Card)
-    vue.use(Checkbox)
-    vue.use(Dialog)
-    vue.use(Fab)
-    vue.use(FormField)
-    vue.use(Icon)
-    vue.use(IconToggle)
-    vue.use(LayoutGrid)
-    vue.use(List)
-    vue.use(Snackbar)
-    vue.use(TemporaryDrawer)
-    vue.use(Textfield)
-    vue.use(Toolbar)
-  }
-}
-
-// Install by default if using the script tag
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(plugin)
-}
-
-export default plugin
diff --git a/src/components/utils.js b/src/components/utils.js
deleted file mode 100644
index b99fa3f50..000000000
--- a/src/components/utils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function debounce (fn, debounceDuration) {
-  debounceDuration = debounceDuration || 100
-  return function () {
-    if (!fn.debouncing) {
-      var args = Array.prototype.slice.apply(arguments)
-      fn.lastReturnVal = fn.apply(window, args)
-      fn.debouncing = true
-    }
-    clearTimeout(fn.debounceTimeout)
-    fn.debounceTimeout = setTimeout(function () {
-      fn.debouncing = false
-    }, debounceDuration)
-
-    return fn.lastReturnVal
-  }
-}