diff --git a/src/gms/settings.py b/src/gms/settings.py
index 9dfb8a715859e6fdffa1eeafc675faf7976fc48c..3f0a39eb468785754eb2b014a3ff06a9e10482aa 100644
--- a/src/gms/settings.py
+++ b/src/gms/settings.py
@@ -25,6 +25,7 @@ INSTALLED_APPS = (
 	'import_members',
 	'squarepay',
 	'formtools',
+	'bootstrap4',
 )
 
 MIDDLEWARE = [
diff --git a/src/templates/base.html b/src/templates/base.html
index 1710d6a2daf95b22e08de6dc1024c4853b882a7f..6fa69b2e248bbb94245933e1866be8b794fe1304 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -1,13 +1,23 @@
 {% load static %}
+
 <!DOCTYPE html>
 <html>
+{# Load Bootstrap #}
+{% load bootstrap4 %}
+{% bootstrap_css %}
+{% bootstrap_javascript jquery='full' %}
+
+{# Display django.contrib.messages as Bootstrap alerts #}
+{% bootstrap_messages %}
+
+
 <head>
 	<!-- MemberDB base template -->
 	<title>{% block title %}UCC MemberDB{% endblock %}</title>
 	<link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/>
-	<link rel="stylesheet" type="text/css" href="{% static "memberdb.css" %}">
+	<link rel="stylesheet" type="text/css" href="{% static 'shared.css' %}"/>
+	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 	{% block prestyle %}{% endblock %}
-	<link rel="stylesheet" type="text/css" href="{% static "shared.css" %}">
 	{% block extrahead %}{% endblock %}
 	{% block extrastyle %}{% endblock %}
 	{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
@@ -21,45 +31,59 @@
 	{% block header_div %}<!-- Header -->
 	<div id="header">
 		{% block navbar %}
-		<nav>
+		<nav class="navbar navbar-expand-lg navbar-dark bg-grey-900 font-weight-bold">
+
 			{% block branding %}
-			<a class="logo" title="UCCPortal homepage">
-				<span></span>
-			</a>
+			<a class="navbar-brand logo" title="UCCPortal homepage"></a>
 			{% endblock %}
 
-			{# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #}
-			{% with url_name=request.resolver_match.url_name %}
-			{% if request.member %}
-			<a class="navtab {% if url_name == 'home' %}active{% endif %}" href="{% url "memberdb:home" %}">Member home</a>
-			{% endif %}
-			<a class="navtab {% if url_name == 'register' %}active{% endif %}" href="{% url "memberdb:register" %}">Register</a>
-
-			{% if not request.user.is_authenticated %}
-			<a class="navtab {% if url_name == 'login' %}active{% endif %}" href="{% url "memberdb:login" %}">Login</a>
-			{% else %}
-			<a class="navtab {% if url_name == 'renew' %}active{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a>
-
-			{% if request.user.is_staff %}
-			<a class="navtab {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a>
-			{% endif %}
-
-			{% endif %}
-
-			{% if request.user.is_authenticated or request.member %}
-			<a class="navtab {% if url_name == 'logout' %}active{% endif %}" href="{% url "memberdb:logout" %}">Logout</a>
-			{% endif %}
-			{% endwith %}
-
-			{# add the groups class only if we have groups to display #}
-			<div class="userinfo{% if request.user.is_authenticated %}{% if request.member %} groups{% endif %}">
-				<span class="username">Welcome, {{ request.user.username }}</span>
-				{% if request.member %}
-				{% for g in request.member.groups %}<span class="group {{ g }}">{{ g }}</span>{% endfor %}
-				{% endif %}
-			{% else %}">
-				<span class="username">Not logged in</span>
-			{% endif %}
+			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+
+			<div class="collapse navbar-collapse" id="navbarSupportedContent">
+				{% with url_name=request.resolver_match.url_name %}
+				<div class="navbar-nav mr-auto">
+					{% if not request.user.is_authenticated or request.user.is_staff %}
+					{% endif %}
+
+
+					{% if request.member %}
+						<a class="nav-item nav-link {% if url_name == 'home' %}active{% endif %}" href="{% url "memberdb:home" %}">Member home</a>
+						<a class="nav-item nav-link {% if url_name == 'renew' %}active{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a>
+					{% endif %}
+
+					{% if request.user.is_staff %}
+						<a class="nav-item nav-link {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a>
+						<a class="nav-item nav-link {% if url_name == 'register' %}active{% endif %}" href="{% url "memberdb:register" %}">Add Member</a>
+					{% endif %}
+
+				</div>
+
+				<div class="navbar-nav">
+					{% if request.user.is_authenticated and request.member %}
+					<div class="nav-item">
+						<i class=" align-baseline icon md-light">person</i>
+					</div>
+					<div class="nav-item userinfo groups dropdown">
+
+						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							Welcome, {{ request.user.username }}
+							<!--<div class="navbar-nav userinfo{ if request.user.is_authenticated %}{ if request.member %} groups{ endif %}">
+								{ if request.member %}
+									{ for g in request.member.groups %}<span class="group { g }}">{ g }}</span>{ endfor %}
+								{ endif %}
+							</div>-->
+						</a>
+						<div class="dropdown-menu bg-grey-900" aria-labelledby="navbarDropdownMenuLink">
+							<a class="nav-item nav-link {% if url_name == 'logout' %}active{% endif %}" href="{% url "memberdb:logout" %}">Logout</a>
+						</div>
+					</div>
+					{%else%}
+						<a class="nav-item nav-link {% if url_name == 'login' %}active{% endif %}" href="{% url "memberdb:login" %}">Login</a>
+					{%endif%}
+				</div>
+				{% endwith %}
 			</div>
 		</nav>
 		{% endblock %}
@@ -76,7 +100,7 @@
 	{% endif %}{% endblock messages %}
 
 	<!-- Content -->
-	<div id="content">
+	<div class="text-light bg-dark" id="content">
 		{% block pretitle %}{% endblock %}
 		{% block content_title %}<h1></h1>{% endblock %}
 		{% block content %}
@@ -111,9 +135,9 @@
 	transform: translate(-50%, -50%);
 	opacity: 0.3;
 	{% if DEPLOYMENT_ENV == "STAGE" %}
-	color: RED; 
+	color: RED;
 	{% else %}
-	color: GREEN; 
+	color: GREEN;
 	{% endif %}
 	font-size: 15em;
 	top: 50%;