diff --git a/RIGS/templates/activity_feed.html b/RIGS/templates/activity_feed.html
index 31658c5a..850f544e 100644
--- a/RIGS/templates/activity_feed.html
+++ b/RIGS/templates/activity_feed.html
@@ -1,10 +1,6 @@
 {% load static %}
 
 {% block js %}
-<script src="{% static "js/tooltip.js" %}"></script>
-<script src="{% static "js/popover.js" %}"></script>
-<script src="{% static "js/moment.min.js" %}"></script>
-<script src="{% static "js/moment-twitter.js" %}"></script>
 <script>
 	$(function () {
   $('[data-toggle="popover"]').popover().click(function(){
diff --git a/gulpfile.js b/gulpfile.js
index 15007699..178d8d40 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,7 +4,7 @@ var gulp = require('gulp');
 
 var concat = require('gulp-concat');
 var rename = require('gulp-rename');
-var uglify = require('gulp-uglify');
+var terser = require('gulp-terser');
 var sass = require('gulp-sass');
 var flatten = require('gulp-flatten');
 let cleanCSS = require('gulp-clean-css');
@@ -20,9 +20,9 @@ gulp.task('sass', function () {
 });
 
 gulp.task('scripts', function() {
-    return gulp.src(['web_assets/js/**/*.js', 'node_modules/bootstrap/**/bootstrap.min.js', 'node_modules/jquery/**/jquery.min.js'])
+    return gulp.src(['web_assets/js/**/*.js', 'node_modules/bootstrap/**/bootstrap.min.js', 'node_modules/popper\.js/**/popper.js', 'node_modules/moment/**/moment.js'])
     .pipe(flatten())
-    .pipe(uglify())
+    .pipe(terser())
     .pipe(gulp.dest('RIGS/static/js'));
 });
 
diff --git a/package.json b/package.json
index 2aab59da..5b2911b7 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.0.2",
-    "gulp-uglify": "^3.0.2",
+    "gulp-terser": "^1.2.0",
     "node-sass": "^4.13.1"
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 0ebe7ac8..9369fee5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,19 +9,18 @@
 <head>
     <title>{% block title %}{% endblock %} | Rig Information Gathering System</title>
 
-    <meta name="viewport" content="initial-scale=1">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <link rel="icon" type="image/png" href="{% static "imgs/pyrigs-avatar.png" %}">
-    <link rel="apple-touch-icon" href="{% static "imgs/pyrigs-avatar.png" %}">
+    <link rel="icon" type="image/png" href="{% static 'imgs/pyrigs-avatar.png' %}">
+    <link rel="apple-touch-icon" href="{% static 'imgs/pyrigs-avatar.png' %}">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700,300,400' rel='stylesheet'
           type='text/css'>
 
-    <link rel="stylesheet" type="text/css" href="{% static "css/screen.css" %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/screen.css' %}">
     {% block css %}
     {% endblock %}
 
-    <script src="https://code.jquery.com/jquery-1.8.3.min.js"
-            integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8=" crossorigin="anonymous"></script>
     <script src="https://cdn.ravenjs.com/1.3.0/jquery,native/raven.min.js"></script>
     <script>Raven.config('{% sentry_public_dsn %}').install()</script>
     {% block preload_js %}
@@ -42,35 +41,19 @@
     <ul class="navbar-nav mr-auto">
         {% block titleelements %}
         {% endblock %}
-        <li class="dropdown" id="user">
+        <li class="nav-item dropdown align-self-end" id="user">
                 {% if user.is_authenticated %}
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <span class="glyphicon glyphicon-user"></span>
                         Hi {{ user.first_name }}
-                        <b class="caret"></b>
                     </a>
-                    <ul class="dropdown-menu nav media-list pull-right" id="userdropdown">
-                        <li class="media">
-                            <a href="{% url 'profile_detail' %}">
-                                <div class="media-left">
-                                    <img src="{{ request.user.profile_picture }}" class="media-object"/>
-                                </div>
-
-                                <div class="media-body">
-                                    <b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
-
-                                    <p class="muted">{{ request.user.email }}</p>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <div class="col-sm-12 text-right">
-                                <a href="{% url 'logout' %}" class="btn btn-primary">Logout</a>
-                            </div>
-                        </li>
-                    </ul>
+                    <div class="dropdown-menu" id="userdropdown">
+                    <div class="col-sm-12 text-right">
+                        <a href="{% url 'logout' %}" class="dropdown-item btn btn-primary" >Logout</a>
+                    </div>
+                    </div>
                 {% else %}
-                    <a href="{% url 'login' %}">
+                    <a class="nav-link" href="{% url 'login' %}">
                         <span class="icon-user"></span>
                         Login
                     </a>
@@ -102,7 +85,6 @@
     </div>
 
     <div id="sidebar" class="column">
-        test
         {% block sidebar %}
         {% endblock %}
     </div>
@@ -110,6 +92,10 @@
 
 <div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
 
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="{% static 'js/popper.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
+<script src="{% static 'js/moment.js' %}"></script>
 <script>
     Date.prototype.getISOString = function () {
         var yyyy = this.getFullYear().toString();
@@ -118,15 +104,6 @@
         return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]); // padding
     };
 </script>
-<script src="{% static "js/jquery.cookie.js" %}"></script>
-<script src="{% static "js/alert.js" %}"></script>
-<script src="{% static "js/collapse.js" %}"></script>
-<script>
-    $('.navbar-collapse').addClass('collapse')
-</script>
-<script src="{% static "js/dropdown.js" %}"></script>
-<script src="{% static "js/modal.js" %}"></script>
-<script src="{% static "js/konami.js" %}"></script>
 <script>
     jQuery(document).ready(function () {
         jQuery(document).on('click', '.modal-href', function (e) {
diff --git a/templates/base_rigs.html b/templates/base_rigs.html
index 34bfd04b..1b586d85 100644
--- a/templates/base_rigs.html
+++ b/templates/base_rigs.html
@@ -1,56 +1,54 @@
 {% extends 'base.html' %}
 {% block titleheader %}
-    <a class="navbar-brand" href="/">RIGS</a>
+<a class="navbar-brand" href="/">RIGS</a>
 {% endblock %}
 
 {% block titleelements %}
-    {% if user.is_authenticated %}
-        <a href="/">Home</a>
-            <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Rigboard
-        </a>
-        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <li><a href="{% url 'rigboard' %}"><span class="glyphicon glyphicon-list"></span>
-                    Rigboard</a></li>
-                <li><a href="{% url 'event_archive' %}"><span class="glyphicon glyphicon-book"></span>
-                    Archive</a></li>
-                <li><a href="{% url 'web_calendar' %}"><span class="glyphicon glyphicon-calendar"></span>
-                    Calendar</a></li>
-                {% if perms.RIGS.view_event %}
-                    <li><a href="{% url 'activity_table' %}"><span
-                            class="glyphicon glyphicon-random"></span> Recent Changes</a></li>
-                {% endif %}
-                {% if perms.RIGS.add_event %}
-                    <li><a href="{% url 'event_create' %}"><span class="glyphicon glyphicon-plus"></span>
-                        New Event</a></li>
-                {% endif %}
-        </div>
-            </ul>
-        </li>
+{% if user.is_authenticated %}
+<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+<li class="nav-item dropdown">
+  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownRigboard" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Rigboard
+  </a>
+  <div class="dropdown-menu" aria-labelledby="navbarDropdownRigboard">
+    <a class="dropdown-item" href="{% url 'rigboard' %}"><span class="glyphicon glyphicon-list"></span>
+                        Rigboard</a>
+    <a class="dropdown-item" href="{% url 'event_archive' %}"><span class="glyphicon glyphicon-book"></span>
+                        Archive</a>
+    <a class="dropdown-item" href="{% url 'web_calendar' %}"><span class="glyphicon glyphicon-calendar"></span>
+                        Calendar</a>
+    {% if perms.RIGS.view_event %}
+    <a class="dropdown-item" href="{% url 'activity_table' %}"><span
+                                class="glyphicon glyphicon-random"></span> Recent Changes</a>
     {% endif %}
-    {% if perms.RIGS.view_invoice %}
-        <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Invoices<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-                {% if perms.RIGS.add_invoice %}
-                    <li><a href="{% url 'invoice_waiting' %}"><span
-                            class="glyphicon glyphicon-briefcase text-danger"></span> Waiting</a></li>
-                {% endif %}
-                <li><a href="{% url 'invoice_list' %}"><span class="glyphicon glyphicon-gbp text-warning"></span> Outstanding</a>
-                </li>
-                <li><a href="{% url 'invoice_archive' %}"><span class="glyphicon glyphicon-book"></span>
-                    Archive</a></li>
-            </ul>
-        </li>
+    {% if perms.RIGS.add_event %}
+    <a class="dropdown-item" href="{% url 'event_create' %}"><span class="glyphicon glyphicon-plus"></span>
+                            New Event</a>
     {% endif %}
-    {% if perms.RIGS.view_person %}
-        <li><a href="{% url 'person_list' %}">People</a></li>
-    {% endif %}
-    {% if perms.RIGS.view_organisation %}
-        <li><a href="{% url 'organisation_list' %}">Organisations</a></li>
-    {% endif %}
-    {% if perms.RIGS.view_venue %}
-        <li><a href="{% url 'venue_list' %}">Venues</a></li>
+   </div>
+</li>
+{% endif %}
+{% if perms.RIGS.view_invoice %}
+<li class="nav-item dropdown">
+  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownInvoices" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Invoices
+  </a>
+  <div class="dropdown-menu" aria-labelledby="navbarDropdownInvoices">
+    {% if perms.RIGS.add_invoice %}
+    <a class="dropdown-item" href="{% url 'invoice_waiting' %}"><span class="glyphicon glyphicon-briefcase text-danger"></span> Waiting</a>
     {% endif %}
+    <a class="dropdown-item" href="{% url 'invoice_list' %}"><span class="glyphicon glyphicon-gbp text-warning"></span> Outstanding</a>
+    <a class="dropdown-item" href="{% url 'invoice_archive' %}"><span class="glyphicon glyphicon-book"></span> Archive</a>
+  </div>
+</li>
+{% endif %}
+{% if perms.RIGS.view_person %}
+<li class="nav-item"><a class="nav-link" href="{% url 'person_list' %}">People</a></li>
+{% endif %}
+{% if perms.RIGS.view_organisation %}
+<li class="nav-item"><a class="nav-link" href="{% url 'organisation_list' %}">Organisations</a></li>
+{% endif %}
+{% if perms.RIGS.view_venue %}
+<li class="nav-item"><a class="nav-link" href="{% url 'venue_list' %}">Venues</a></li>
+{% endif %}
 {% endblock %}
