diff --git a/front/static/dashboard.html b/front/static/dashboard.html
index 44506e6..a8b588e 100644
--- a/front/static/dashboard.html
+++ b/front/static/dashboard.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
@@ -10,6 +11,22 @@
     <title>Reimbursinator</title>
 </head>
 <body>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+        <a class="navbar-brand" href="#">Reimbursinator</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-dashboard-navbar">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="collapsing-dashboard-navbar">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link log-out-link" href="#">
+                        <i class="fas fa-sign-out-alt"></i>
+                        Log out
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </nav>
     <div class="container">
         <div class="jumbotron">
             <h1>Reimbursinator Report</h1>
@@ -31,7 +48,7 @@
             </ul>
             <ul class="nav justify-content-end">
                 <li class="nav-item">
-                    <a id="logoutLink" class="nav-link" href="#">Logout</a>
+                    <a class="nav-link log-out-link" href="#">Log out</a>
                 </li>
             </ul>
         </nav>
diff --git a/front/static/index.html b/front/static/index.html
index c55dda5..ff26455 100644
--- a/front/static/index.html
+++ b/front/static/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
@@ -10,6 +11,28 @@
     <title>Reimbursinator</title>
 </head>
 <body>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+        <a class="navbar-brand" href="#">Reimbursinator</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-index-navbar">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="collapsing-index-navbar">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="login.html">
+                        <i class="fas fa-sign-in-alt"></i>
+                        Log in
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="signup.html">
+                        <i class="fas fa-user-plus"></i>
+                        Sign up
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </nav>
     <div class="container">
         <div class="jumbotron">
             <h1>Reimbursinator</h1>
@@ -19,7 +42,7 @@
                 <a class="nav-link active" href="signup.html">Sign up</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="login.html">Login</a>
+                <a class="nav-link" href="login.html">Log in</a>
             </li>
         </ul>
     </div>
diff --git a/front/static/login.html b/front/static/login.html
index 75f3087..5f44283 100644
--- a/front/static/login.html
+++ b/front/static/login.html
@@ -3,20 +3,24 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
     <link rel="shortcut icon" href="/favicon.ico">
-    <title>Login</title>
+    <title>Log in</title>
 </head>
-    <body>
-        <h1>Login Page</h1>
-        <form method="POST">
-            username: <input type="text" name="username" required><br>
-            password: <input type="password" name="password" required><br>
-            <input type="submit" name="submit" value="submit">
-        </form>
-        <p id="errorReport"><p>
-        <script src="login.js"></script>
-    </body>
+<body>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+        <a class="navbar-brand" href="index.html">Reimbursinator</a>
+    </nav>
+    <h1>Log in</h1>
+    <form method="POST">
+        username: <input type="text" name="username" required><br>
+        password: <input type="password" name="password" required><br>
+        <input type="submit" name="submit" value="submit">
+    </form>
+    <p id="errorReport"><p>
+    <script src="login.js"></script>
+</body>
 </html>
diff --git a/front/static/logout.js b/front/static/logout.js
index 181372e..e7a3a21 100644
--- a/front/static/logout.js
+++ b/front/static/logout.js
@@ -29,5 +29,6 @@ function postToLogoutEndpoint(event) {
     xhr.send();
 }
 
-const logoutLink = document.querySelector("#logoutLink");
-logoutLink.addEventListener("click", postToLogoutEndpoint);
+const logoutLinks = document.querySelectorAll(".log-out-link");
+logoutLinks[0].addEventListener("click", postToLogoutEndpoint);
+logoutLinks[1].addEventListener("click", postToLogoutEndpoint);
diff --git a/front/static/signup.html b/front/static/signup.html
index d8e66fa..7635b4e 100644
--- a/front/static/signup.html
+++ b/front/static/signup.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
@@ -10,14 +11,17 @@
     <title>Sign up</title>
 </head>
 <body>
-<h1>Sign up page</h1>
-<form id="signup">
-    User Name: <input type="text" id="userName" minlength="4" size="10" required="required"><br>
-    Password: <input type="password" id="password" minlength="4" size="10" required="required"><br>
-    Confirm Password: <input type="password" id="confirmPassword"><br>
-    <input type="submit" value="Submit" formaction="index.html">
-    <a class="nav-link" href="index.html">Return to main menu</a>
-</form>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+        <a class="navbar-brand" href="index.html">Reimbursinator</a>
+    </nav>
+    <h1>Sign up page</h1>
+    <form id="signup">
+        User Name: <input type="text" id="userName" minlength="4" size="10" required="required"><br>
+        Password: <input type="password" id="password" minlength="4" size="10" required="required"><br>
+        Confirm Password: <input type="password" id="confirmPassword"><br>
+        <input type="submit" value="Submit" formaction="index.html">
+        <a class="nav-link" href="index.html">Return to main menu</a>
+    </form>
 </body>
 <script src="signupPage.js"></script>
 </html>
