diff --git a/src/static/base.scss b/src/static/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..57ddfb9cb999ce6daf893a71361530e90afc29d4
--- /dev/null
+++ b/src/static/base.scss
@@ -0,0 +1,30 @@
+	.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 48px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sidebar-sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+}
+
+#footer {
+    color: #777;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/static/memberdb.css b/src/static/memberdb.css
index a5059159e31511c445593d3d2687baa63919e287..ecd684873e89d3531535e8e974f65a72eb21208a 100644
--- a/src/static/memberdb.css
+++ b/src/static/memberdb.css
@@ -100,37 +100,6 @@ ul.errorlist {
     font-weight: bold;
 }
 
-nav {
-    background-color: #333;
-    overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
-}
-
-.navtab, .userinfo {
-    float: left;
-    text-decoration: none;
-    color: white;
-    text-align: center;
-    font-size: 22px;
-    font-variant-caps: all-petite-caps;
-    font-weight: 400;
-    line-height: 26px;
-    padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */
-    border-style: solid;
-    border-color: #555;
-    border-width: 0 1px 0 1px;
-    margin-right: -1px;
-    background-color: #3c3c3c;
-}
-
-.navtab:hover, .navtab.active {
-    color: #eee;
-    background-color: black;
-}
-
-.navtab:last-child {
-    border-right: 1.5px solid #555;
-}
-
 .userinfo {
 	float: right;
 	border-right: 0;
@@ -138,11 +107,9 @@ nav {
 	font-variant-caps: normal;
 	border: none;
 	background-color: none;
-	padding: 19px 20px;
 }
 
 .userinfo.groups {
-	padding: 7px 20px;
 }
 
 .userinfo .username {
diff --git a/src/static/shared.css b/src/static/shared.css
deleted file mode 100644
index c226de2a0bed888e63f784cb6b2544a417f06a47..0000000000000000000000000000000000000000
--- a/src/static/shared.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* memberdb: css used by both main site & admin pages 
- * some of this is just copied from the admin css */
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    min-height: 100%;
-    position: relative;
-    background-color: #f8f8f8;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: normal;
-    margin: 0;
-}
-
-.logo {
-    float: left;
-    margin: 5px 30px 5px 20px;
-    height: 50px;
-    width: 50px;
-    overflow: hidden; /* hide the overflow when it is rotated on the admin site */
-}
-
-.logo span {
-    height: 100%;
-    width: 100%;
-    display: block;
-    background-image: url("ucc-logo-white.png");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-}
-
-#container {
-    padding-bottom: 60px;
-    position: static;
-}
-
-#footer {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    clear: both;
-    background-color: #ccc;
-    color: #777;
-    text-align: center;
-    overflow: hidden;
-}
-
-#footer p {
-    padding: 0;
-    margin: 12px 0 6px 0;
-}
-
-.linkslist a {
-    display: inline-block;
-    padding: 0;
-    margin: 6px 10px 12px 10px;
-    color: #555;
-}
-
-.linkslist a:visited {
-    color: #333;
-}
-
-/* make div expand to contain float children */
-.float-container {
-    overflow: auto;
-    display: inline-block;
-}
-
-
-
-/* MESSAGES & ERRORS */
-ul.messagelist {
-    padding: 0;
-    margin: 0;
-}
-
-ul.messagelist li {
-    display: block;
-    font-weight: 400;
-    font-size: 13px;
-    padding: 10px 10px 10px 65px;
-    margin: 0 0 10px 0;
-    background: #dfd url(/media/admin/img/icon-yes.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
-    color: #333;
-}
-
-ul.messagelist li.warning {
-    background: #ffc url(/media/admin/img/icon-alert.svg) 40px 14px no-repeat;
-    background-size: 14px auto;
-}
-
-ul.messagelist li.error {
-    background: #ffefef url(/media/admin/img/icon-no.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
-}
-
-.errornote {
-    font-size: 14px;
-    font-weight: 700;
-    display: block;
-    padding: 10px 12px;
-    margin: 0 0 10px 0;
-    color: #ba2121;
-    border: 1px solid #ba2121;
-    border-radius: 4px;
-    background-color: #fff;
-    background-position: 5px 12px;
-}
-
-/* FORM BUTTONS */
-
-.button, input[type=submit], input[type=button], .submit-row input,.submit-row button, a.button {
-    background: #79aec8;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 4px;
-    color: #fff;
-    cursor: pointer;
-}
-
-a.button {
-    padding: 4px 5px;
-    display: inline-block;
-}
-
-.button:active, input[type=submit]:active, input[type=button]:active,
-.button:focus, input[type=submit]:focus, input[type=button]:focus,
-.button:hover, input[type=submit]:hover, input[type=button]:hover {
-    background: #609ab6;
-}
-
-.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
-    opacity: 0.4;
-}
-
-.button.default, input[type=submit].default, .submit-row input.default {
-    float: right;
-    border: none;
-    font-weight: 400;
-    background: #417690;
-}
-
-.button.default:active, input[type=submit].default:active,
-.button.default:focus, input[type=submit].default:focus,
-.button.default:hover, input[type=submit].default:hover {
-    background: #205067;
-}
-
-.button[disabled].default,
-input[type=submit][disabled].default,
-input[type=button][disabled].default {
-    opacity: 0.4;
-}
-
-.help, p.help, form p.help, div.help, form div.help, div.help li {
-    font-size: 12px;
-    color: #999;
-}
-
-/* TABLES */
-
-table {
-    border-collapse: collapse;
-    border-color: #ccc;
-}
-
-td, th {
-    font-size: 13px;
-    line-height: 16px;
-    border-bottom: 1px solid #eee;
-    vertical-align: top;
-    padding: 8px;
-    /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
-}
-
-th {
-    font-weight: 600;
-    text-align: left;
-}
-
-thead th,
-tfoot td {
-    color: #666;
-    padding: 5px 10px;
-    font-size: 11px;
-    background: #fff;
-    border: none;
-    border-top: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-}
-
-tfoot td {
-    border-bottom: none;
-    border-top: 1px solid #eee;
-}
-
-thead th.required {
-    color: #000;
-}
-
-tr.alt {
-    background: #f6f6f6;
-}
-
-.row1 {
-    background: rgba(255, 255, 255, 0.7);
-}
-
-.row2 {
-    background: rgba(230, 230, 230, 0.7);
-}
-
diff --git a/src/static/shared.scss b/src/static/shared.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d45825c0f1f853371f03db0c7fe000ac15192fb6
--- /dev/null
+++ b/src/static/shared.scss
@@ -0,0 +1,311 @@
+/* memberdb: css used by both main site & admin pages
+ * some of this is just copied from the admin css */
+/* static theme colors */
+.grey-900 {
+  background-color: #272c30;
+}
+.grey-800 {
+  background-color: #343a40;
+}
+.grey-700 {
+  background-color: #495057;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.nav .nav-item .nav-link {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 400;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  vertical-align: text-bottom;
+}
+
+/* Rules for sizing the icon. */
+.icon.md-18 {
+  width: 18px;
+  height: 18px;
+}
+.icon.md-36 {
+  width: 36px;
+  height: 36px;
+}
+.icon.md-48 {
+  width: 48px;
+  height: 48px;
+}
+
+/* Rules for using icons as black on a light background. */
+.icon.md-dark {
+  color: rgba(0, 0, 0, 0.54);
+}
+.icon.md-dark.md-inactive {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+/* Rules for using icons as white on a dark background. */
+.icon.md-light {
+  color: rgba(255, 255, 255, 1);
+}
+.icon.md-light.md-inactive {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+body {
+  min-height: 100%;
+  position: relative;
+  font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
+  font-weight: normal;
+  margin: 0;
+}
+
+.logo {
+  overflow: hidden; /* hide the overflow when it is rotated on the admin site */
+  float: left;
+  margin: 0px 10px 0px 10px;
+  height: 30px;
+  width: 30px;
+  display: block;
+  background-image: url("ucc-logo-white.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  color: #fefefe;
+}
+
+.navbar .active {
+  background-color: #343a40;
+}
+
+.nav .nav-item .nav-link:hover {
+  color: rgba(0, 0, 0, 0.9);
+  .icon {
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+
+.sidebar .nav-link.active {
+    color: #007bff;
+    .icon {
+        color: #007bff;
+    }
+} 
+.sidebar .nav-link.disabled {
+  color: rgba(0, 0, 0, 0.25);
+    .icon {
+        color: rgba(0, 0, 0, 0.25);
+    }
+} 
+
+.dropdown-menu {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin: 1px .125rem 0 0;
+}
+
+.dropdown-item:hover {
+  background-color: #3e454c;
+  color: #ffffff;
+}
+#header {
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+}
+
+#footer p {
+  padding: 0;
+  margin: 12px 0 6px 0;
+}
+
+.linkslist a {
+  display: inline-block;
+  padding: 0;
+  margin: 6px 10px 12px 10px;
+  color: #555;
+}
+
+.linkslist a:visited {
+  color: #333;
+}
+
+/* make div expand to contain float children */
+.float-container {
+  overflow: auto;
+  display: inline-block;
+}
+
+/* MESSAGES & ERRORS */
+ul.messagelist {
+  padding: 0;
+  margin: 0;
+}
+
+ul.messagelist li {
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  padding: 10px 10px 10px 65px;
+  margin: 0 0 10px 0;
+  background: #dfd url(/media/admin/img/icon-yes.svg) 40px 12px no-repeat;
+  background-size: 16px auto;
+  color: #333;
+}
+
+ul.messagelist li.warning {
+  background: #ffc url(/media/admin/img/icon-alert.svg) 40px 14px no-repeat;
+  background-size: 14px auto;
+}
+
+ul.messagelist li.error {
+  background: #ffefef url(/media/admin/img/icon-no.svg) 40px 12px no-repeat;
+  background-size: 16px auto;
+}
+
+.errornote {
+  font-size: 14px;
+  font-weight: 700;
+  display: block;
+  padding: 10px 12px;
+  margin: 0 0 10px 0;
+  color: #ba2121;
+  border: 1px solid #ba2121;
+  border-radius: 4px;
+  background-color: #fff;
+  background-position: 5px 12px;
+}
+
+/* FORM BUTTONS */
+
+.button,
+input[type="submit"],
+input[type="button"],
+.submit-row input,
+.submit-row button,
+a.button {
+  background: #79aec8;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+}
+
+a.button {
+  padding: 4px 5px;
+  display: inline-block;
+}
+
+.button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+.button:focus,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+.button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background: #609ab6;
+}
+
+.button[disabled],
+input[type="submit"][disabled],
+input[type="button"][disabled] {
+  opacity: 0.4;
+}
+
+.button.default,
+input[type="submit"].default,
+.submit-row input.default {
+  float: right;
+  border: none;
+  font-weight: 400;
+  background: #417690;
+}
+
+.button.default:active,
+input[type="submit"].default:active,
+.button.default:focus,
+input[type="submit"].default:focus,
+.button.default:hover,
+input[type="submit"].default:hover {
+  background: #205067;
+}
+
+.button[disabled].default,
+input[type="submit"][disabled].default,
+input[type="button"][disabled].default {
+  opacity: 0.4;
+}
+
+.help,
+p.help,
+form p.help,
+div.help,
+form div.help,
+div.help li {
+  font-size: 12px;
+  color: #999;
+}
+
+/* TABLES */
+
+table {
+  border-collapse: collapse;
+  border-color: #ccc;
+}
+
+td,
+th {
+  font-size: 13px;
+  line-height: 16px;
+  border-bottom: 1px solid #eee;
+  vertical-align: top;
+  padding: 8px;
+  /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/
+}
+
+th {
+  font-weight: 600;
+  text-align: left;
+}
+
+thead th,
+tfoot td {
+  color: #666;
+  padding: 5px 10px;
+  font-size: 11px;
+  background: #fff;
+  border: none;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+tfoot td {
+  border-bottom: none;
+  border-top: 1px solid #eee;
+}
+
+thead th.required {
+  color: #000;
+}
+
+tr.alt {
+  background: #f6f6f6;
+}
+
+.row1 {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.row2 {
+  background: rgba(230, 230, 230, 0.7);
+}
diff --git a/src/templates/base.html b/src/templates/base.html
index 496776536c9326a4685b8003390d400ba1f63039..4776dcb7f330ebd74656f1cbbabf5f40aa0d5d4f 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -15,8 +15,15 @@
 	<!-- 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 'shared.css' %}"/>
-	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+	{% if request.user.dark_theme_enabled	%}
+		<link rel="stylesheet" type="text/css" href="{% sass_src 'theme-dark.scss' %}"/>
+	{%else%}
+		<link rel="stylesheet" type="text/css" href="{% sass_src 'theme-light.scss' %}"/>
+	{%endif%}
+	<link rel="stylesheet" type="text/css" href="{% sass_src 'shared.scss' %}"/>
+	<link rel="stylesheet" type="text/css" href="{% sass_src 'base.scss' %}"/>
+	<link rel="stylesheet" type="text/css" href="{% static 'memberdb.css' %}"/>
+	<script src="https://unpkg.com/feather-icons"></script>
 	{% block prestyle %}{% endblock %}
 	{% block extrahead %}{% endblock %}
 	{% block extrastyle %}{% endblock %}