diff --git a/src/static/admin_custom.css b/src/static/admin_custom.css
index 629d6c09b024c7598d1fecd17bd3941a52af0a9b..5d0d0d5177797cf057044e5c8dbee470e4189479 100644
--- a/src/static/admin_custom.css
+++ b/src/static/admin_custom.css
@@ -2,16 +2,6 @@
     display: inline-block;
 }
 
-.logo span {
-    transform: rotate(45deg);
-}
-
-.logo span:hover {
-    animation: spin 0.5s linear infinite;
-}
-
-@keyframes spin { 100% { transform: rotate(360deg); } }
-
 #branding h1 {
     float: left;
 }
@@ -21,16 +11,11 @@
     margin-right: -440px;
 }
 
-#header {
-    padding: 0;
-    height: auto;
-}
-
 #admin-header {
     padding: 0px 40px;
 }
 
-#admin-header, #container {
+#admin-header, body {
     overflow: auto;
 }
 
diff --git a/src/static/shared.css b/src/static/shared.css
index 7ded656bd42e901312923226139443497ec35fb5..16e7797ac715cf6d1d97fd175b02d90277f79992 100644
--- a/src/static/shared.css
+++ b/src/static/shared.css
@@ -1,70 +1,272 @@
-/* memberdb: css used by both main site & admin pages
- * some of this is just copied from the admin css */
+/* Apply foating card style */
+nav, .form-container {
+	background: #303030;
+	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
+}
+
+* {
+	box-sizing: border-box;
+}
 
-/* BEGIN MEMBERDB.CSS */
+a {
+    color: inherit;
+}
 
 html {
- height: 100%;
+	height: 100%;
+}
+
+body {
+	position: relative;
+	min-height: 100%;
+    padding-bottom: 80px; /* allows room for footer */
+    padding-top: 80px; /* allows room for header */
+
+	background-color: #181818;
+	color: #fff;
+
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-weight: normal;
+
+	margin: 0;
 }
 
-#content {
- width: 80%;
- margin: 0 10%;
+@media (max-width: 1280px) {
+    main, nav, footer {
+        width: 100%;
+    	margin: 0px;
+    }
+
+    nav {
+        width: 100%;
+        top: 0px;
+    }
+
+    nav, .form-container {
+        border-radius: 0px;
+    }
 }
 
-.centered {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+@media (min-width: 1280px) {
+    main, nav, footer {
+        width: 1280px;
+    	margin: 0px auto;
+        left: 0px; right: 0px;
+    }
+
+    nav {
+        top: 10px;
+    }
+
+    nav, .form-container {
+        border-radius: 8px;
+    }
 }
 
+nav {
+	display: flex;
+	position: fixed;
+    line-height: 60px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 100;
+}
+    nav, nav ul, nav li, nav li > * {
+        height: 60px;
+    }
+
+    nav ul, nav li, nav li > * {
+        position: relative;
+    }
+
+    nav ul {
+        display: flex;
+        margin: 0px;
+        padding: 0px;
+        list-style: none;
+        flex-shrink: 1;
+    }
+        nav > ul.-left, nav > ul.-right {
+            width: 100%; /* this will automatically collapse as appropriate with flex-shrink applied */
+            flex-grow: 0;
+        }
+
+        nav > ul.-centre {
+            flex-grow: 1;
+            justify-content: center;
+        }
+
+        nav > ul.-right {
+            flex-grow: 0;
+            justify-content: flex-end;
+        }
+
+    nav li {
+        display: block;
+        flex-shrink: 0;
+        position: relative;
+        margin: 0px 1px;
+    }
+        nav li > * {
+            display: block;
+            position: relative;
+            padding: 0px 20px;
+
+            font-size: 20px;
+            font-variant-caps: all-petite-caps;
+            text-decoration: none;
+
+            transition-property: background, color;
+            transition-duration: 100ms;
+        }
+
+        nav li > :first-child {
+            margin-left: 0px;
+        }
+
+        nav li > :last-child {
+            margin-right: 0px;
+        }
+
+        nav li > a:hover, nav li > a:focus {
+            color: #fff;
+            background-color: rgba(255,255,255,0.1);
+            outline: none;
+        }
+
+        nav li > a.-selected {
+            color: #fff;
+            box-shadow: 0px -2px 0px 0px #fff inset;
+        }
+
+        nav li > a.logo {
+            display: block;
+            width: 60px;
+            padding: 0px;
+        }
+
+    nav li+li::before,
+    nav > ul.-left > li:last-child::after,
+    nav > ul.-centre > li:first-child::before,
+    nav > ul.-centre > li:last-child::after,
+    nav > ul.-right > li:first-child::before {
+        display: block;
+        position: absolute;
+        top: 0px; bottom: 0px; left: -2px;
+        content: "";
+
+        border-left: 1px solid rgba(0,0,0,0.5);
+        border-right: 1px solid rgba(255,255,255,0.1);
+    }
+        nav > ul.-left > li:last-child::after,
+        nav > ul.-centre > li:last-child::after {
+            left: auto;
+            right: -2px;
+        }
+
+nav li > a.logo::before {
+    display: block;
+    position: absolute;
+    width: 42px; height: 42px;
+    top: 0px; right: 0px; bottom: 0px; left: 0px;
+    margin: auto;
+    content: "";
+
+    background-image: url("ucc-logo-white.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+    @keyframes logo-rotate {
+        0% {transform: rotate(0deg);}
+        25% {transform: rotate(90deg);}
+        50% {transform: rotate(180deg);}
+        75% {transform: rotate(270deg);}
+        100% {transform: rotate(360deg);}
+    }
+
+    nav li > a.logo:hover::before {
+        animation-name: logo-rotate;
+        animation-delay: 5s;
+        animation-duration: 500ms;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+
+footer {
+	display: block;
+	position: absolute;
+    bottom: 0px;
+	overflow: hidden;
+	text-align: center;
+
+    color: #707070;
+}
+
+	footer > p {
+		padding: 0;
+		margin: 12px 0 6px 0;
+	}
+
+	footer > ul {
+        margin-left: 0px;
+        margin-right: 0px;
+        padding: 0px;
+		list-style: none;
+	}
+
+	footer > ul > li {
+		display: inline;
+		margin: 0px;
+	}
+
+	footer > ul > li+li::before {
+		content: "\2022  ";
+	}
+
 .form-container {
- position: relative;
+	position: relative;
 	margin: 20px auto;
 	padding: 10px;
-
-	border-radius: 8px;
-	background: #303030;
-	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
 }
 
 .text-center, .form-header {
- text-align: center;
+	text-align: center;
 }
 
 .form-header .tips {
- color: #333;
- font-weight: 400;
- border-radius: 10px;
- background-color: #feb;
- padding: 10px 10px 7px 10px;
- margin: 10px 10px 20px 10px;
- display: inline-block;
- text-align: center;
- line-height: 23px;
+	color: #333;
+	font-weight: 400;
+	border-radius: 10px;
+	background-color: #feb;
+	padding: 10px 10px 7px 10px;
+	margin: 10px 10px 20px 10px;
+	display: inline-block;
+	text-align: center;
+	line-height: 23px;
 }
 
 .form-header .tips.error {
- color: #000;
- background-color: rgb(255, 145, 0);
+	color: #000;
+	background-color: rgb(255, 145, 0);
 }
 
 fieldset {
- border: none;
+	border: none;
 }
 
 .form-row, .submit-row {
- margin: 10px 0px;
+	margin: 10px 0px;
 }
 
 .submit-row {
-    display: flex;
-    margin-bottom: 0px;
+	   display: flex;
+	   margin-bottom: 0px;
 }
 
 .submit-row *+* {
- margin-left: 10px;
+	margin-left: 10px;
 }
 
 .form-row label {}
@@ -74,335 +276,231 @@ fieldset {
 .form-row input[type="email"],
 .form-row input[type="password"],
 .form-row textarea {
- width: 100%;
+	width: 100%;
 }
 
 .form-row input[type=checkbox],
 .form-row.readonly .text {
- display: inline;
- line-height: 20px;
+	display: inline;
+	line-height: 20px;
 }
 
 .form-row.readonly .text {
- padding-left: 10px;
- color: #444;
+	padding-left: 10px;
+	color: #444;
 }
 
 .help {
- margin: 8px 8px 0 8px;
+	margin: 8px 8px 0 8px;
 }
 
 .help a {
- color: #777;
+	color: #777;
 }
 
 ul.errorlist {
- list-style: none;
- background-color: #a33;
- color: white;
- padding: 10px 30px;
- margin: 30px 0 10px 0;
- font-weight: bold;
+	list-style: none;
+	background-color: #a33;
+	color: white;
+	padding: 10px 30px;
+	margin: 30px 0 10px 0;
+	font-weight: bold;
 }
 
-nav {
- background-color: #333;
- overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */
-}
-
-.navtab {
- 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;
-}
 
 .member-details, .membership-details {
- width: 100%;
- text-align: left;
-}
-
-/* END MEMBERDB.CSS */
-
-
-
-
-
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    position: relative;
-    min-height: 100%;
-
-    background-color: #181818;
-    color: #fff;
-
-    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;
+	width: 100%;
+	text-align: left;
 }
 
 /* make div expand to contain float children */
 .float-container {
-    overflow: auto;
-    display: inline-block;
+	overflow: auto;
+	display: inline-block;
 }
 
 
 
 /* MESSAGES & ERRORS */
 ul.messagelist {
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
 }
 
 ul.messagelist li {
-    display: block;
-    font-weight: 400;
-    padding: 10px 10px 10px 65px;
-    margin: 0 0 10px 0;
-    background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
-    color: #333;
+	display: block;
+	font-weight: 400;
+	padding: 10px 10px 10px 65px;
+	margin: 0 0 10px 0;
+	background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat;
+	background-size: 16px auto;
+	color: #333;
 }
 
 ul.messagelist li.warning {
-    background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
-    background-size: 14px auto;
+	background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat;
+	background-size: 14px auto;
 }
 
 ul.messagelist li.error {
-    background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
-    background-size: 16px auto;
+	background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat;
+	background-size: 16px auto;
 }
 
 .errornote {
-    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;
+	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] {
-    display: inline-block;
-    height: 36px;
-    transform: translateY(0px);
-    padding: 0 16px;
-
-    border: 1px solid rgba(0,0,0,0.4);
-    border-radius: 4px;
-    box-shadow:
-        0px -2px 0px 0px rgba(0,0,0,0.4) inset,
-        0px 1px 3px 0px rgba(0,0,0,0.2),
-        0px 1px 0px 0px rgba(0,0,0,0.1)
-    ;
-    background: #484848;
-    color: white;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: inherit;
-
-    transition-duration: 50ms;
-    transition-property: height, margin, transform, box-shadow, filter;
+	display: inline-block;
+	height: 36px;
+	transform: translateY(0px);
+	padding: 0 16px;
+
+	border: 1px solid rgba(0,0,0,0.4);
+	border-radius: 4px;
+	box-shadow:
+		0px -2px 0px 0px rgba(0,0,0,0.4) inset,
+		0px 1px 3px 0px rgba(0,0,0,0.2),
+		0px 1px 0px 0px rgba(0,0,0,0.1)
+	;
+	background: #484848;
+	color: white;
+	cursor: pointer;
+	text-decoration: none;
+	font-size: inherit;
+    white-space: nowrap;
+
+	transition-duration: 50ms;
+	transition-property: height, margin, transform, box-shadow, filter;
 }
 
 /* Hack to get text vertically centred in a.button */
 .button::before {
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    content: "";
+	display: inline-block;
+	height: 100%;
+	vertical-align: middle;
+	content: "";
 }
 
 .button:focus, input[type=submit]:focus, input[type=button]:focus,
 .button:hover, input[type=submit]:hover, input[type=button]:hover,
 .button:active, input[type=submit]:active, input[type=button]:active {
-    filter: brightness(1.35);
-    outline: none;
+	filter: brightness(1.35);
+	outline: none;
 }
 
 .button.-disabled, input[type=submit]:disabled, input[type=button]:disabled {
-    filter: none;
-    text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
-    color: rgba(0, 0, 0, 0.5);
-    opacity: 0.5;
-    cursor: default;
+	filter: none;
+	text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
+	color: rgba(0, 0, 0, 0.5);
+	opacity: 0.5;
+	cursor: default;
 }
 
 .button:active, input[type=submit]:active, input[type=button]:active {
-    height: 33px;
-    margin-bottom: 3px;
-    transform: translateY(3px);
+	height: 33px;
+	margin-bottom: 3px;
+	transform: translateY(3px);
 
-    box-shadow: none;
-    filter: brightness(0.5);
-    outline: none;
+	box-shadow: none;
+	filter: brightness(0.5);
+	outline: none;
 }
 
 .button.-default, input[type=submit].-default {
-    margin-left: auto;
-    font-weight: 400;
-    background: #609ab6;
+	margin-left: auto;
+	font-weight: 400;
+	background: #609ab6;
 }
 
 .help, p.help, form p.help, div.help, form div.help, div.help li {
-    color: #999;
+	color: #999;
 }
 
 /* TEXT BOXES */
 input[type="text"], input[type="email"], input[type="password"], textarea {
-    display: block;
-    position: relative;
-    height: 36px;
-    padding: 4px;
+	display: block;
+	position: relative;
+	height: 36px;
+	padding: 4px;
 
-    border: 1px solid rgba(0,0,0,0.4);
-    border-radius: 4px;
-    box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
-    background-color: #484848;
-    color: white;
+	border: 1px solid rgba(0,0,0,0.4);
+	border-radius: 4px;
+	box-shadow: 0px 2px 1px rgba(0,0,0,0.2) inset;
+	background-color: #484848;
+	color: white;
 
-    transition-property: background-color;
-    transition-duration: 100ms;
+	transition-property: background-color;
+	transition-duration: 100ms;
 }
 
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus,
 textarea:active {
-    background-color: #686868;
-    outline: none;
+	background-color: #686868;
+	outline: none;
 }
 
 /* TABLES */
 
 table {
-    border-collapse: collapse;
-    border-color: #ccc;
+	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;*/
+	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;
+	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;
+	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;
+	border-bottom: none;
+	border-top: 1px solid #eee;
 }
 
 thead th.required {
-    color: #000;
+	color: #000;
 }
 
 tr.alt {
-    background: #f6f6f6;
+	background: #f6f6f6;
 }
 
 .row1 {
-    background: rgba(255, 255, 255, 0.7);
+	background: rgba(255, 255, 255, 0.7);
 }
 
 .row2 {
-    background: rgba(230, 230, 230, 0.7);
+	background: rgba(230, 230, 230, 0.7);
 }
diff --git a/src/templates/base.html b/src/templates/base.html
index 60c4565b1d81b12977227d0ed3d721af29b4a6ee..81264f3acc310d2c4647ccda4fa61ab6208c0da1 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -7,55 +7,51 @@
     <link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/>
     {% block prestyle %}{% endblock %}
     <link rel="stylesheet" type="text/css" href="{% static "shared.css" %}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% block extrahead %}{% endblock %}
     {% block extrastyle %}{% endblock %}
     {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
 </head>
 
 <body {% block bodyattrs %}{% endblock %}>
-
-<!-- Container -->
-<div id="container">
-
     {% block header_div %}<!-- Header -->
-    <div id="header">
-        {% block navbar %}
+    <header>
+        {% block navbar %}{% with url_name=request.resolver_match.url_name %}
         <nav>
-            {% block branding %}
-            <a class="logo" title="UCCPortal homepage">
-                <span></span>
-            </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>
+            <ul class="-left">
+                {% block branding %}
+                    <li><a class="logo" title="UCCPortal homepage"></a></li>
+                {% endblock %}
+            </ul>
+            <ul class="-centre">
+                {# fancy automatic navbar thing from https://stackoverflow.com/questions/39639264 #}
 
-            {% 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.member %}
+                    <li><a class="{% if url_name == 'home' %}-selected{% endif %}" href="{% url "memberdb:home" %}">Member home</a></li>
+                {% endif %}
 
-            {% if request.user.is_staff %}
-            <a class="navtab {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a>
-            {% endif %}
+                <li><a class="{% if url_name == 'register' %}-selected{% endif %}" href="{% url "memberdb:register" %}">Register</a></li>
 
-            {% 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 %}
+                {% if not request.user.is_authenticated %}
+                    <li><a class="{% if url_name == 'login' %}-selected{% endif %}" href="{% url "memberdb:login" %}">Login</a></li>
+                {% else %}
+                    <li><a class="{% if url_name == 'renew' %}-selected{% endif %}" href="{% url "memberdb:renew" %}">Renew membership</a></li>
+                    {% if request.user.is_staff %}
+                        <li><a class="{% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">Admin site</a></li>
+                        {% endif %}
+                {% endif %}
+            </ul>
+            <ul class="-right">
+                {% if request.user.is_authenticated or request.member %}
+                    <li><a class="{% if url_name == 'logout' %}-selected{% endif %}" href="{% url "memberdb:logout" %}">Logout</a></li>
+                {% endif %}
+            </ul>
         </nav>
-        {% endblock %}
-
+        {% endwith %}{% endblock %}
         {% block header %}{% endblock %}
-
-    </div>
+    </header>
     {% endblock %}<!-- END Header -->
+
     {% block breadcrumbs %}{% endblock %}
     {% block messages %}{% if messages %}
     <ul class="messagelist">{% for message in messages %}
@@ -64,7 +60,7 @@
     {% endif %}{% endblock messages %}
 
     <!-- Content -->
-    <div id="content">
+    <main>
         {% block pretitle %}{% endblock %}
         {% block content_title %}<h1></h1>{% endblock %}
         {% block content %}
@@ -72,27 +68,24 @@
         <!-- sidebar -->
         {% block sidebar %}{% endblock %}
         <br class="clear">
-    </div>
+    </main>
     <!-- END Content -->
 
     <!-- Footer -->
     {% block footer %}
-    <div id="footer">
+    <footer>
         <p>
-            The University Computer Club Inc.
+            The University Computer Club Inc.<br/>
             ABN: 98 843 368 069
         </p>
-        <div class="linkslist">
-            <a href="https://www.ucc.asn.au">main website</a>&#8226;
-            <a href="https://wiki.ucc.asn.au">UCC wiki</a>&#8226;
-            <a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a>&#8226;
-            <a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a>
-        </div>
-    </div>
+        <ul>
+            <li><a href="https://www.ucc.asn.au">main website</a></li>
+            <li><a href="https://wiki.ucc.asn.au">UCC wiki</a></li>
+            <li><a href="https://www.ucc.asn.au/aboutucc/contact.ucc">contact us</a></li>
+            <li><a href="https://gitlab.ucc.asn.au/frekk/uccportal">source code</a></li>
+        </ul>
+    </footer>
     {% endblock %}
     <!-- END Footer -->
-</div>
-<!-- END Container -->
-
 </body>
 </html>