diff --git a/.meteor/packages b/.meteor/packages
index 62200af..8fb5ac3 100644
--- a/.meteor/packages
+++ b/.meteor/packages
@@ -19,7 +19,6 @@ shell-server@0.2.4            # Server-side component of the `meteor shell` comm
 react-meteor-data
 alanning:roles
 fourseven:scss
-twbs:bootstrap
 accounts-base@1.3.2
 accounts-password@1.4.0
 service-configuration@1.0.11
diff --git a/.meteor/versions b/.meteor/versions
index 87e5bde..0fa2f09 100644
--- a/.meteor/versions
+++ b/.meteor/versions
@@ -97,7 +97,6 @@ templating-tools@1.1.2
 themeteorchef:bert@2.1.3
 tmeasday:check-npm-versions@0.3.1
 tracker@1.1.3
-twbs:bootstrap@3.3.6
 underscore@1.0.10
 url@1.1.0
 webapp@1.3.19
diff --git a/client/main.html b/client/main.html
index db2b85f..172a2fb 100644
--- a/client/main.html
+++ b/client/main.html
@@ -3,6 +3,17 @@
   <title>Pup</title>
   <meta name="description" content="A description for the application.">
   <meta name="viewport" content="initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />
+
+  <!-- FIXME integrate this better with meteor
+       https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/ -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
+  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/js/bootstrap-material-design.js" integrity="sha384-3xciOSDAlaXneEmyOo0ME/2grfpqzhhTcM4cE32Ce9+8DW/04AGoTACzQpphYGYe" crossorigin="anonymous"></script>
+  <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
+  <!-- End:FIXME -->
+
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
   <link rel="shortcut icon" type="image/png" href="/favicon.png?v1" sizes="16x16 32x32 64x64">
   <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-precomposed.png">
diff --git a/imports/ui/stylesheets/app.scss b/imports/ui/stylesheets/app.scss
index be7cbf1..21c9469 100644
--- a/imports/ui/stylesheets/app.scss
+++ b/imports/ui/stylesheets/app.scss
@@ -1,4 +1,3 @@
 @import './colors';
 @import './forms';
 @import './bootstrap-overrides';
-@import 'web-fonts';
diff --git a/package.json b/package.json
index bdeaf69..2246aa5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "@cleverbeagle/seeder": "^1.2.0",
     "babel-runtime": "^6.26.0",
     "bcrypt": "^1.0.3",
+    "bootstrap": "^4.0.0-beta.2",
+    "bootstrap-material-design": "^4.0.0-beta.4",
     "commonmark": "^0.28.1",
     "core-js": "^2.5.1",
     "fs": "0.0.1-security",
@@ -24,6 +26,7 @@
     "lodash": "^4.17.4",
     "meteor-node-stubs": "^0.2.11",
     "moment": "^2.19.2",
+    "popper.js": "^1.12.7",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-addons-pure-render-mixin": "^15.6.0",