diff --git a/public/css/common.css b/public/css/common.css
new file mode 100644
index 0000000..a1518fb
--- /dev/null
+++ b/public/css/common.css
@@ -0,0 +1,4 @@
+/* hide scrollbar on full sized pages */
+html {
+    overflow: auto;
+}
diff --git a/public/js/common.js b/public/js/common.js
new file mode 100644
index 0000000..a33111f
--- /dev/null
+++ b/public/js/common.js
@@ -0,0 +1,16 @@
+// activate navbar burger buttons when page finishes loading
+document.addEventListener("DOMContentLoaded", function () {
+  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+
+  if ($navbarBurgers.length > 0) {
+    $navbarBurgers.forEach(function ($el) {
+      $el.addEventListener("click", function () {
+        var target = $el.dataset.target;
+        var $target = document.getElementById(target);
+
+        $el.classList.toggle("is-active");
+        $target.classList.toggle("is-active");
+      });
+    });
+  }
+});
diff --git a/views/index.hbs b/views/index.hbs
index 55f01a4..b3a6f6e 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,17 +1,19 @@
 {{#> layouts/base title="Home" }}
 
     {{#*inline "body"}}
-        <div class="container-fluid">
-            <h1>Shine Index</h1>
-            <p>Welcome to <strong>Shine</strong>, Glowstone's in-house download center and plugin repository.</p>
-            <p>
-                {{#if user}}
-                    You are currently logged in as <a href="#">{{user.username}}</a>.
-                {{else}}
-                    You are not currently logged in. <a href="login">Sign in</a> or <a href="register">create an account</a> to
-                    submit plugins.
-                {{/if}}
-            </p>
+        <div class="section">
+            <div class="container">
+                <h1 class="title">Shine Index</h1>
+                <p>Welcome to <strong>Shine</strong>, Glowstone's in-house download center and plugin repository.</p>
+                <p>
+                    {{#if user}}
+                        You are currently logged in as <a href="#">{{user.username}}</a>.
+                    {{else}}
+                        You are not currently logged in. <a href="/login">Sign in</a> or <a href="/register">create an account</a> to
+                        submit plugins.
+                    {{/if}}
+                </p>
+            </div>
         </div>
     {{/inline}}
 
diff --git a/views/login.hbs b/views/login.hbs
index 495fa78..807752d 100644
--- a/views/login.hbs
+++ b/views/login.hbs
@@ -1,44 +1,40 @@
 {{#> layouts/base title="Login" }}
 
     {{#*inline "body"}}
-        <div class="container">
-            <div class="panel panel-default">
-                <div class="panel-heading">Login</div>
-
-                <div class="panel-body">
-                    {{#alerts.error}}
-                        <div class="alert alert-danger" role="alert">{{.}}</div>
-                    {{/alerts.error}}
-
-                    <form method="post">
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">
-                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
-                                </span>
-
-                                <input type="text" name="username" class="form-control" placeholder="Username">
+        <div class="section">
+            <div class="columns">
+                <div class="container column is-half">
+                    <h1 class="title">Login</h1>
+
+                    <div class="box">
+                        <form method="post">
+                            <div class="field">
+                                <div class="control">
+                                    <input class="input" type="text" placeholder="Username or Email Address">
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">
-                                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
-                                </span>
-
-                                <input type="password" name="password" class="form-control" placeholder="Password">
+                            <div class="field">
+                                <div class="control">
+                                    <input class="input" type="text" placeholder="Password">
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox"> Remember me
-                            </label>
-                        </div>
+                            <div class="field">
+                                <div class="control">
+                                    <label class="checkbox">
+                                        <input type="checkbox"> Remember me
+                                    </label>
+                                </div>
+                            </div>
 
-                        <input type="submit" class="btn btn-default" value="Sign in">
-                    </form>
+                            <div class="field">
+                                <div class="control">
+                                    <button type="submit" class="button is-primary">Sign in</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/views/partials/layouts/base.hbs b/views/partials/layouts/base.hbs
index 0ff9eef..2cc5ae0 100644
--- a/views/partials/layouts/base.hbs
+++ b/views/partials/layouts/base.hbs
@@ -2,9 +2,13 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
         <title>Shine | {{title}}</title>
 
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
+        <link rel="stylesheet" href="/css/common.css">
+
         {{#> head }}
             {{!-- custom head content from other pages --}}
         {{/head}}
@@ -17,8 +21,8 @@
             {{!-- body content --}}
         {{/body}}
 
-        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script type="text/javascript" src="js/common.js"></script>
+
         {{#> scripts }}
             {{!-- custom scripts from other pages --}}
         {{/scripts}}
diff --git a/views/partials/menu.hbs b/views/partials/menu.hbs
index 6b72185..0ca3f12 100644
--- a/views/partials/menu.hbs
+++ b/views/partials/menu.hbs
@@ -1,53 +1,61 @@
-<nav class="navbar navbar-default">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">Shine</a>
+<nav class="navbar is-transparent" role="navigation">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="/">Shine</a>
+
+        <div class="navbar-burger" data-target="navMenu">
+            <span></span>
+            <span></span>
+            <span></span>
         </div>
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <ul class="nav navbar-nav">
-                <li class="active"><a href="#">Index</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                       aria-expanded="false">Glowstone <span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="#">Glowstone Server</a></li>
-                        <li><a href="#">Glowkit</a></li>
-                    </ul>
-                </li>
-                <li><a href="#">Plugins</a></li>
-                <li><a href="#">API</a></li>
-            </ul>
-            <ul class="nav navbar-nav navbar-right">
-                <form class="navbar-form navbar-left">
-                    <div class="form-group">
-                        <input type="text" class="form-control" placeholder="Search">
+    </div>
+
+    <div class="navbar-menu" id="navMenu">
+        <div class="navbar-start">
+            <a href="/" class="navbar-item">Home</a>
+
+            <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link">Glowstone</a>
+
+                <div class="navbar-dropdown is-boxed">
+                    <a class="navbar-item">Glowstone Server</a>
+                    <a class="navbar-item">Glowkit</a>
+                </div>
+            </div>
+
+            <a class="navbar-item">Plugins</a>
+            <a class="navbar-item">API</a>
+        </div>
+
+        <div class="navbar-end">
+            <div class="navbar-item">
+                <div class="field has-addons">
+                    <div class="control">
+                        <input class="input" type="text" placeholder="Find a plugin">
+                    </div>
+
+                    <div class="control">
+                        <a class="button is-info">
+                            Search
+                        </a>
                     </div>
-                    <button type="submit" class="btn btn-default">Submit</button>
-                </form>
-                <li><a href="https://glowstone.net">glowstone.net</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                       aria-expanded="false">User <span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                        {{#if user}}
-                            <li><a href="#">Profile</a></li>
-                            <li><a href="#">Preferences</a></li>
-                            <li role="separator" class="divider"></li>
-                            <li><a href="/logout">Sign out</a></li>
-                        {{else}}
-                            <li><a href="login">Sign in</a></li>
-                            <li><a href="register">Register</a></li>
-                        {{/if}}
-                    </ul>
-                </li>
-            </ul>
+                </div>
+            </div>
         </div>
+
+        {{#if user}}
+            <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link">{{user.username}}</a>
+
+                <div class="navbar-dropdown is-boxed is-right">
+                    <a class="navbar-item">Profile</a>
+                    <a class="navbar-item">Preferences</a>
+                    <hr class="navbar-divider">
+                    <a class="navbar-item" href="/logout">Sign out</a>
+                </div>
+            </div>
+        {{else}}
+            <a class="navbar-item" href="/login">Sign in</a>
+            <a class="navbar-item" href="/register">Register</a>
+        {{/if}}
     </div>
 </nav>
diff --git a/views/register.hbs b/views/register.hbs
index e540697..121b8a0 100644
--- a/views/register.hbs
+++ b/views/register.hbs
@@ -1,69 +1,58 @@
 {{#> layouts/base title="Home" }}
 
     {{#*inline "body"}}
-        <div class="container">
-            <div class="panel panel-default">
-                <div class="panel-heading">Register</div>
-
-                <div class="panel-body">
-                    <form method="post">
-                        <div class="form-group">
-                            <div class="input-group">
-                                <span class="input-group-addon">
-                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
-                                </span>
-
-                                <input type="text" name="username" class="form-control" placeholder="Username">
+        <div class="section">
+            <div class="columns">
+                <div class="container column is-half">
+                    <h1 class="title">Register</h1>
+
+                    <div class="box">
+                        <form method="post">
+                            <div class="field">
+                                <div class="control">
+                                    <input class="input" type="text" placeholder="Username">
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="row">
-                            <div class="form-group col-md-6">
-                                <div class="input-group">
-                                    <span class="input-group-addon">
-                                        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
-                                    </span>
-
-                                    <input type="email" name="email" class="form-control" placeholder="Email address">
+                            <div class="field">
+                                <div class="control">
+                                    <input class="input" type="email" placeholder="Email Address">
                                 </div>
                             </div>
 
-                            <div class="form-group col-md-6">
-                                <input type="email" class="form-control" placeholder="Confirm email address">
+                            <div class="field is-horizontal">
+                                <div class="field-body">
+                                    <div class="field">
+                                        <div class="control">
+                                            <input class="input" type="text" placeholder="Password">
+                                        </div>
+                                    </div>
+
+                                    <div class="field">
+                                        <div class="control">
+                                            <input class="input" type="text" placeholder="Confirm Password">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-
-                        <div class="row">
-                            <div class="form-group col-md-6">
-                                <div class="input-group">
-                                    <span class="input-group-addon">
-                                        <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
-                                    </span>
 
-                                    <input type="password" name="password" class="form-control" placeholder="Password">
+                            <div class="field">
+                                <div class="control">
+                                    <label class="checkbox">
+                                        <input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
+                                    </label>
                                 </div>
                             </div>
 
-                            <div class="form-group col-md-6">
-                                <input type="password" class="form-control" placeholder="Confirm password">
+                            <div class="field">
+                                <div class="control">
+                                    <button type="submit" class="button is-primary">Register</button>
+                                </div>
                             </div>
-                        </div>
-
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox"> I agree to xyz.
-                            </label>
-                        </div>
-
-                        <input type="submit" class="btn btn-default" value="Sign in">
-                    </form>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
     {{/inline}}
-
-    {{#*inline "scripts"}}
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
-    {{/inline}}
-
 {{/layouts/base}}