diff --git a/Makefile b/Makefile
index 70d4e2b..5f6765c 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,7 @@
 binary: go-binary ui
 
 go-binary:
-	go-bindata-assetfs -prefix ui/public ui/public
+	go-bindata-assetfs -prefix ui/dist ui/dist
 	go build .
 
 ui:
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 06650d5..7acb508 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1100,6 +1100,19 @@
             "integrity": "sha512-aXAa1Pv6w32URacE9LfMsl9zI6hFwx1K0Lp3Xpyf4rAkmaAB6z0gOkhicOrVFc0f64YheJgHjE7hJFieVenQdw==",
             "dev": true
         },
+        "@material/icon-button": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz",
+            "integrity": "sha512-UTX1q4x5FxntBeb5TxBsXIjbhwFjQxJxovaUGo8+eUL9V9tU6rJ3NnlrFirx9gZnFIU1Xpssm91NCItVZy/Dpg==",
+            "dev": true,
+            "requires": {
+                "@material/base": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@material/ripple": "^3.2.0",
+                "@material/theme": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/ripple": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-3.2.0.tgz",
@@ -1138,6 +1151,24 @@
                 "@material/feature-targeting": "^3.1.0"
             }
         },
+        "@material/top-app-bar": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-3.2.0.tgz",
+            "integrity": "sha512-p3PuCIbg0uDveS30D1R8/fcwqeTMXe4oRFnB6Z5Wlej0NySi6038i+TPsHtgYLCR3QpVThnkVch37zyXcNpQoQ==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/elevation": "^3.1.0",
+                "@material/icon-button": "^3.2.0",
+                "@material/ripple": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/typography": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@material/typography/-/typography-3.1.0.tgz",
@@ -1213,6 +1244,17 @@
                 "@material/ripple": "^3.1.0"
             }
         },
+        "@smui/top-app-bar": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/top-app-bar/-/top-app-bar-1.0.0-beta.16.tgz",
+            "integrity": "sha512-iI4wzwier6VuxBJ/9XumRetoZf+7Y7wRy/3Vc2f4Tvy4jYj9131LjYvwdL6TlO+m/pNZnvCt92bGRGPIZ30sQA==",
+            "dev": true,
+            "requires": {
+                "@material/feature-targeting": "^3.1.0",
+                "@material/top-app-bar": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@types/anymatch": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index db4a6ea..4f2f593 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,7 +4,7 @@
     "description": "Wireguard VPN web UI",
     "main": "index.js",
     "scripts": {
-        "dev": "webpack-dev-server --mode=development --open",
+        "dev": "webpack-dev-server --mode=development --open --port 5000",
         "build": "cross-env NODE_ENV=production webpack --mode=production --progress",
         "test": "jest",
         "prettier": "prettier --check ./src/**/*.{js,css,json,md}"
@@ -19,7 +19,8 @@
         "@babel/core": "^7.6.2",
         "@babel/preset-env": "^7.6.2",
         "@material/typography": "^3.1.0",
-        "@smui/button": "^1.0.0-beta.10",
+        "@smui/button": "^1.0.0-beta.16",
+        "@smui/top-app-bar": "^1.0.0-beta.16",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",
         "clean-webpack-plugin": "^3.0.0",
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 8e415c4..bc8655a 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -1,3 +1,7 @@
+<svelte:head>
+  <title>Wireguard VPN</title>
+</svelte:head>
+
 <script>
   import { onMount } from 'svelte';
   import { Router, Link, Route } from "svelte-routing";
@@ -13,6 +17,7 @@
   export let url = "";
 </script>
 
+<div class="mdc-typography">
 <Router url="{url}">
   <Nav user="{user}" />
   <main role="main" class="container">
@@ -23,3 +28,4 @@
     </div>
   </main>
 </Router>
+</div>
diff --git a/ui/src/Nav.svelte b/ui/src/Nav.svelte
index 81f4f8a..80d75d3 100644
--- a/ui/src/Nav.svelte
+++ b/ui/src/Nav.svelte
@@ -1,4 +1,5 @@
 <script>
+  import TopAppBar, {Row, Section, Title} from "@smui/top-app-bar";
   import { Router, Link, Route } from "svelte-routing";
   import About from "./About.svelte";
   import Clients from "./Clients.svelte";
@@ -7,21 +8,13 @@
   export let user;
 </script>
 
-<header>
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-    <a class="navbar-brand" href="/">Wireguard VPN</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarCollapse">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item"><NavLink to="/">Clients</NavLink></li>
-        <li class="nav-item"><NavLink to="about">About</NavLink></li>
-      </ul>
-    </div>
-
-    <div class="text-light">
-     <small>Logged in as {user}</small>
-    </div>
-  </nav>
-</header>
+<TopAppBar variant="static" color="primary">
+  <Row>
+    <Section>
+      <Title>Wireguard VPN</Title>
+    </Section>
+    <Section align="end" toolbar>
+     Logged in as {user}
+    </Section>
+  </Row>
+</TopAppBar>
diff --git a/ui/src/index.ejs b/ui/src/index.ejs
index 3350e94..08127af 100644
--- a/ui/src/index.ejs
+++ b/ui/src/index.ejs
@@ -1,11 +1,14 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
 </head>
 <body>
 </body>
diff --git a/ui/src/style.scss b/ui/src/style.scss
index a28e233..8dba9c8 100644
--- a/ui/src/style.scss
+++ b/ui/src/style.scss
@@ -1,4 +1,8 @@
-body {
-    background-color: aliceblue;
-    color: #ff392d;
+@import "@material/typography/mdc-typography";
+
+.container {
+  padding: 30px;
+}
+
+body {
 }
diff --git a/ui/theme/_smui-theme.scss b/ui/theme/_smui-theme.scss
new file mode 100644
index 0000000..d56948c
--- /dev/null
+++ b/ui/theme/_smui-theme.scss
@@ -0,0 +1 @@
+// Nothing here. Just use the default theme.
\ No newline at end of file
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index f37d464..a0bc0a2 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -61,7 +61,14 @@ module.exports = {
                      * */
                     prod ? MiniCssExtractPlugin.loader : "style-loader",
                     "css-loader",
-                    "sass-loader"
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            sassOptions: {
+                                includePaths: ["./theme", "./node_modules"]
+                            }
+                        }
+                    }
                 ]
             },
             {