diff --git a/app/static/styles.css b/app/static/styles.css
index fc62c87..6a99bef 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -2,6 +2,48 @@ html {
   height: 100%;
 }
 
+body {
+  background-color: #f0f0f0;
+  line-height: 180%;
+  font-size: 110%;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Barlow', sans-serif;
+}
+
+.transition, .transition * {
+  transition-duration: 0.5s;
+  transition-property: color, border-color, background-color;
+}
+
+.theme-toggler {
+  cursor: pointer;
+}
+
+body.dark-mode {
+  color: #e7e7e7;
+  background: linear-gradient(to bottom right, #2e2e62, #1a1226);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+h1, h2 {
+  font-family: 'BarlowMedium', sans-serif;
+  text-align: center;
+  color: #111;
+}
+
+
+body.dark-mode h1 {
+  color: #e7e7e7;
+}
+
+body.dark-mode h2 {
+  color: #e7e7e7;
+}
+
 ::placeholder {
   color: #999;
 }
@@ -37,26 +79,10 @@ h1:hover span.logo.right {
   background-color: white;
 }
 
-body {
-  background-color: #f0f0f0;
-  line-height: 180%;
-  font-size: 110%;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Barlow', sans-serif;
-}
-
 strong {
   font-family: 'BarlowMedium', sans-serif;
 }
 
-h1, h2 {
-  font-family: 'BarlowMedium', sans-serif;
-  text-align: center;
-}
-
 h1 {
   user-select: none;
 }
@@ -84,6 +110,10 @@ label {
   transition-timing-function: ease-out;
 }
 
+body.dark-mode label {
+  color: #eee;
+}
+
 label:hover {
   color: white;
   background-color: #222;
@@ -93,12 +123,37 @@ input, textarea {
   font-family: 'Barlow', sans-serif;
 }
 
+body.dark-mode input {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 8px;
+}
+
+body.dark-mode textarea {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 12px;
+}
+
 select {
-  background-color: white;
   border-radius: 0;
   border-style: solid;
   border-width: 1px;
-  border-color: #ccc;
+  padding: 10px;
+}
+
+select, body.dark-mode select:hover {
+  background-color: white;
+  border-color: #8f8f9d;
+  color: black;
+}
+
+body.dark-mode select, select:hover {
+  background-color: black;
+  border-color: black;
+  color: #eee;
 }
 
 .letter-form {
@@ -130,18 +185,19 @@ div.user form input, label {
 
 div.user form input {
   font-size: 120%;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #ddd;
-  padding: 0.3em;
 }
 
 .btn {
+  cursor: pointer;
   font-weight: bold;
   border-radius: 0;
   border-style: none;
 }
 
+input.btn {
+  padding: 0.8em 2em;
+}
+
 .color-fade {
   transition-property: color, background-color;
   transition-duration: 135ms;
@@ -158,14 +214,20 @@ div.user form input {
   background-color: white;
 }
 
-.secondary {
+.secondary, body.dark-mode .secondary:hover {
   color: black;
   background-color: white;
+  border: 1px solid #8f8f9d;
 }
 
-.secondary:hover {
+.secondary a {
+  color: inherit;
+}
+
+.secondary:hover, body.dark-mode .secondary  {
   color: white;
   background-color: black;
+  border: 1px solid black;
 }
 
 .logged-in {
@@ -269,6 +331,10 @@ textarea {
   transition-timing-function: ease-out;
 }
 
+body.dark-mode div.modal-content {
+  background-color: #111;
+}
+
 .modal-background {
   background: none;
 }
@@ -306,6 +372,10 @@ textarea {
   color: #000;
 }
 
+body.dark-mode .text-button:hover {
+  color: #fff;
+}
+
 /* Small screens */
 @media only screen and (max-width: 720px) {
   body {
@@ -356,6 +426,7 @@ textarea {
   input, textarea {
     margin-bottom: 0.5em;
     font-size: 105%;
+    padding: 4px;
   }
   dd {
     margin-left: 0.5em;
@@ -370,8 +441,6 @@ textarea {
     width: 50%;
   }
   div.user form input {
-    font-size: 110%;
-    padding: 0.5em;
     height: min-content;
   }
   .user {
diff --git a/app/templates/_formhelpers.jinja2 b/app/templates/_formhelpers.jinja2
index 7445118..15b0b0f 100644
--- a/app/templates/_formhelpers.jinja2
+++ b/app/templates/_formhelpers.jinja2
@@ -51,7 +51,7 @@
           <input id="password" maxlength="32" minlength="4" name="password" type="password">
         </div>
         <div id="confirm-password-div">
-          <div style="font-size: 80%; margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
+          <div style="margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
           <label id='confirm-password-label' for="confirm-password">Confirm Password: </label>
           <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
         </div>
diff --git a/app/templates/base.jinja2 b/app/templates/base.jinja2
index 2d62735..a2b5c08 100644
--- a/app/templates/base.jinja2
+++ b/app/templates/base.jinja2
@@ -3,50 +3,75 @@
 {% from "_formhelpers.jinja2" import modal %}
 
 <head>
-    <title>{% block title %}UnderCover{% endblock title %}</title>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
-    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
-    <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
-    <meta name="viewport" content="user-scalable=no; width=device-width">
-    <script type="text/javascript">
-      function closeModal() {
-        document.getElementById('modal').classList.add('transparent')
-        document.body.classList.remove('scroll-lock')
+  <title>{% block title %}UnderCover{% endblock title %}</title>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+  <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" />
+  <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
+  <meta name="viewport" content="user-scalable=no; width=device-width">
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const darkSystem = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+      const lightStored = () => localStorage.getItem('dark-mode') === 'false'
+      const darkStored = () => localStorage.getItem('dark-mode') === 'true'
+      if (!lightStored() && (darkSystem() || darkStored())) {
+        document.body.classList.add('dark-mode')
       }
-      function showModal(login, text) {
-        document.getElementById('modal').classList.remove('transparent')
-        document.getElementById('modal-title').innerText = text
-        document.body.classList.add('scroll-lock')
-
-        const createAccountElements = [
-          'confirm-password',
-          'confirm-password-label',
-          'create-account-form-button'
-        ]
-        const loginElements = [
-          'log-in-form-button'
-        ]
-        const [visibleElements, hiddenElements] = login
-            ? [loginElements, createAccountElements]
-            : [createAccountElements, loginElements]
-
-        visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
-        hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
+      const togglers = document.getElementsByClassName('theme-toggler');
+      for (let i = 0; i < togglers.length; i++) {
+        togglers[i].addEventListener('click', () => {
+          document.body.classList.toggle('dark-mode')
+          const darkMode = document.body.classList.contains('dark-mode')
+          localStorage.setItem("dark-mode", darkMode)
+        })
       }
-    </script>
-    <style>
-        @font-face {
-            font-family: 'Barlow';
-            font-display: swap;
-            src: url('/static/fonts/Barlow-Regular.ttf');
-        }
-        @font-face {
-            font-family: 'BarlowMedium';
-            font-display: swap;
-            src: url('/static/fonts/Barlow-Medium.ttf');
-        }
-    </style>
-    {% block head %}{{ head }}{% endblock head %}
+        setTimeout(() => document.body.classList.add('transition'), 600)
+    })
+    function toggleTheme() {
+      document.body.classList.toggle('dark-mode')
+    }
+    function closeModal() {
+      document.getElementById('modal').classList.add('transparent')
+      document.body.classList.remove('scroll-lock')
+    }
+    function showModal(login, text) {
+      document.getElementById('modal').classList.remove('transparent')
+      document.getElementById('modal-title').innerText = text
+      document.body.classList.add('scroll-lock')
+
+      const createAccountElements = [
+        'confirm-password',
+        'confirm-password-label',
+        'create-account-form-button'
+      ]
+      const loginElements = [
+        'log-in-form-button'
+      ]
+      const [visibleElements, hiddenElements] = login
+          ? [loginElements, createAccountElements]
+          : [createAccountElements, loginElements]
+
+      visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
+      hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
+    }
+  </script>
+  <style>
+    @font-face {
+      font-family: 'Barlow';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Regular.ttf');
+    }
+    @font-face {
+      font-family: 'BarlowMedium';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Medium.ttf');
+    }
+    @font-face {
+      font-family: 'BarlowBold';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Bold.ttf');
+    }
+  </style>
+  {% block head %}{{ head }}{% endblock head %}
 </head>
 
 <body>
@@ -55,7 +80,7 @@
   <div class="user logged-in">
       <p style="margin: 0 1em 0 0;">{{ username }}</p>
       <form action="/logout">
-          <input class="btn primary color-fade" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
+        <input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em;  margin: 0;" type="submit" value="Log Out"></input>
       </form>
   </div>
 {% else %}
@@ -68,9 +93,9 @@
     </form>
   </div>
 {% endif %}
-<a href="/" style="text-decoration: none;">
-    <h1><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
-</a>
+<!--<a href="/" style="text-decoration: none;">-->
+    <h1 title="Click to toggle dark mode" class="theme-toggler"><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
+<!--</a>-->
 <h2>The secret cover letter generator</h2>
 {% if error %}
   <div class="errors">
diff --git a/app/templates/writing.jinja2 b/app/templates/writing.jinja2
index e3d3aaf..d26f292 100644
--- a/app/templates/writing.jinja2
+++ b/app/templates/writing.jinja2
@@ -49,11 +49,12 @@
                    onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
                )
             }}
-            <a
-                href="/add_letter"
-                class="btn secondary color-fade"
-                style="padding-left: 0.75em; padding-right: 0.75em; text-decoration: none; margin-left: 0.5em; text-align: center;"
-            > + </a>
+            <div class="btn secondary color-fade" style="display: flex; justify-content: center; align-items: center; padding-left: 0.75em; padding-right: 0.75em; margin-left: 0.5em;">
+              <a
+                  href="/add_letter"
+                  style="text-decoration: none; margin: 0; padding: 0;"
+              > + </a>
+            </div>
           </div>
         </div>
       {% endif %}
diff --git a/start b/start
index 75406f5..2214092 100755
--- a/start
+++ b/start
@@ -2,7 +2,7 @@
 
 SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )"
 
-source ./env
+source $SCRIPT_DIR/env
 
 if ! test -f "$SCRIPT_DIR/.undercover_init_successful"; then
     if ! "$SCRIPT_DIR/init"; then