diff --git a/babyblotter/templates/babyblotter/base.html b/babyblotter/templates/babyblotter/base.html
index 88f8bf2c..66cb6796 100644
--- a/babyblotter/templates/babyblotter/base.html
+++ b/babyblotter/templates/babyblotter/base.html
@@ -22,7 +22,15 @@
 {% block nav %}{% endblock %}
 {% block page %}{% endblock %}
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
+        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
+        crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
+        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+        crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"
         integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg="
         crossorigin="anonymous"></script>
diff --git a/babyblotter/templates/babyblotter/nav-dropdown.html b/babyblotter/templates/babyblotter/nav-dropdown.html
new file mode 100644
index 00000000..0900e93c
--- /dev/null
+++ b/babyblotter/templates/babyblotter/nav-dropdown.html
@@ -0,0 +1,84 @@
+{% extends 'babyblotter/base.html' %}
+
+{% block nav %}
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+        <a class="navbar-brand" href="/"><span class="text-info">Baby</span> Blotter</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse"
+                data-target="#navbarsExampleDefault"
+                aria-controls="navbarsExampleDefault" aria-expanded="false"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item{% if request.path == '/' %} active{% endif %}">
+                    <a class="nav-link" href="{% url 'index' %}">
+                        <i class="fa fa-dashboard" aria-hidden="true"></i> Dashboard
+                    </a>
+                </li>
+
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle"
+                       id="nav-activity-menu-link"
+                       data-toggle="dropdown"
+                       aria-haspopup="true"
+                       aria-expanded="false"><i class="fa fa-child" aria-hidden="true"></i> Activites</a>
+                    <div class="dropdown-menu" aria-labelledby="nav-activity-menu-link">
+
+                        {% if perms.core.view_diaperchange %}
+                            <a class="dropdown-item{% if request.path == '/changes/' %} active{% endif %}"
+                               href="{% url 'diaperchange-list' %}"><i class="fa fa-trash" aria-hidden="true"></i> Changes</a>
+                        {% endif %}
+                        {% if perms.core.add_diaperchange %}
+                            <a class="dropdown-item pl-5{% if request.path == '/changes/add/' %} active{% endif %}"
+                               href="{% url 'diaperchange-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Change</a>
+                        {% endif %}
+
+                        {% if perms.core.view_feeding %}
+                            <a class="dropdown-item{% if request.path == '/feedings/' %} active{% endif %}"
+                               href="{% url 'feeding-list' %}"><i class="fa fa-spoon" aria-hidden="true"></i> Feedings</a>
+                        {% endif %}
+                        {% if perms.core.add_diaperchange %}
+                            <a class="dropdown-item pl-5{% if request.path == '/feedings/add/' %} active{% endif %}"
+                               href="{% url 'feeding-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Feeding</a>
+                        {% endif %}
+
+                        {% if perms.core.view_sleep %}
+                            <a class="dropdown-item{% if request.path == '/sleep/' %} active{% endif %}"
+                               href="{% url 'sleep-list' %}"><i class="fa fa-bed" aria-hidden="true"></i> Sleep</a>
+                        {% endif %}
+                        {% if perms.core.add_sleep %}
+                            <a class="dropdown-item pl-5{% if request.path == '/sleep/add/' %} active{% endif %}"
+                               href="{% url 'sleep-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Sleep entry</a>
+                        {% endif %}
+
+                        {% if perms.core.view_tummytime %}
+                            <a class="dropdown-item{% if request.path == '/tummy-time/' %} active{% endif %}"
+                               href="{% url 'tummytime-list' %}"><i class="fa fa-smile-o" aria-hidden="true"></i> Tummy Time</a>
+                        {% endif %}
+                        {% if perms.core.add_tummytime %}
+                            <a class="dropdown-item pl-5{% if request.path == '/tummy-time/add/' %} active{% endif %}"
+                               href="{% url 'tummytime-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Tummy Time entry</a>
+                        {% endif %}
+
+                        <div class="dropdown-divider"></div>
+
+                        {% if perms.core.view_child %}
+                            <a class="dropdown-item{% if request.path == '/children/' %} active{% endif %}" href="{% url 'child-list' %}">
+                                <i class="fa fa-child" aria-hidden="true"></i> Children
+                            </a>
+                        {% endif %}
+
+                        {% if perms.core.view_note %}
+                            <a class="dropdown-item{% if request.path == '/notes/' %} active{% endif %}" href="{% url 'note-list' %}">
+                                <i class="fa fa-sticky-note" aria-hidden="true"></i> Notes
+                            </a>
+                        {% endif %}
+
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </nav>
+{% endblock %}
\ No newline at end of file
diff --git a/babyblotter/templates/babyblotter/page.html b/babyblotter/templates/babyblotter/page.html
index 7db7cdb7..35b0d035 100644
--- a/babyblotter/templates/babyblotter/page.html
+++ b/babyblotter/templates/babyblotter/page.html
@@ -1,4 +1,4 @@
-{% extends 'babyblotter/nav-horizontal.html' %}
+{% extends 'babyblotter/nav-dropdown.html' %}
 {% load static %}
 {% load timers %}