diff --git a/bin/purify-css.js b/bin/purify-css.js
index 663d8e3..f8f627a 100755
--- a/bin/purify-css.js
+++ b/bin/purify-css.js
@@ -20,6 +20,7 @@ const css = [
   './node_modules/highlight.js/styles/monokai-sublime.css',
   './node_modules/codemirror/lib/codemirror.css',
   './node_modules/codemirror/theme/monokai.css',
+  './node_modules/preact-material-components/style.css',
   './src/server/index.css'
 ]
 
@@ -27,6 +28,9 @@ const whitelist = [
   // Highlight.js
   '*hljs*',
 
+  // Material Design Components
+  '*mdc*',
+
   // CodeMirror
   'CodeMirror',
   '*CodeMirror*',
diff --git a/package.json b/package.json
index 278af51..f5cb936 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "path-to-regexp": "^2.1.0",
     "preact": "^8.2.1",
     "preact-context-provider": "^1.1.1",
+    "preact-material-components": "^1.3.4",
     "run-parallel": "^1.1.6",
     "sqlite3": "^3.1.9",
     "tachyons": "^4.7.4",
diff --git a/src/views/header.js b/src/views/header.js
index 07807a2..ea816ce 100644
--- a/src/views/header.js
+++ b/src/views/header.js
@@ -3,7 +3,7 @@ const c = require('classnames')
 
 const config = require('../../config')
 
-const Button = require('./button')
+const Button = require('preact-material-components/Button')
 const Image = require('./image')
 const Link = require('./link')
 const Search = require('./search')
@@ -17,11 +17,8 @@ const Header = (props, context) => {
     $submitButton = (
       <Button
         class='mh1'
-        color={mainColor}
-        fill
         href='https://github.com/submit'
-        pill
-        size='medium'
+        unelevated
       >
         Add a snippet ✨
       </Button>