diff --git a/.gitignore b/.gitignore
index f40d561..67709bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,15 @@
 __pycache__
 *.pyc
-db.sqlite3
+*.sqlite3
+credentials.json
 credentials
 local_settings.py
-env
-old
-test.*
-static
-teststore
-cache
-local_storage
-media
+.coverage
+/env
+/data
+/old
+/static
+/teststore
+/cache
+/local_storage
+/media
diff --git a/app/interface/static/interface/icon.png b/app/interface/static/interface/icon.png
new file mode 100644
index 0000000..237adb0
Binary files /dev/null and b/app/interface/static/interface/icon.png differ
diff --git a/app/interface/static/interface/js/interface.js b/app/interface/static/interface/js/interface.js
new file mode 100644
index 0000000..28cbbe6
--- /dev/null
+++ b/app/interface/static/interface/js/interface.js
@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Add a click event on each of them
+  navbarBurgers.forEach( el => {
+    el.addEventListener('click', () => {
+
+      // Get the target from the "data-target" attribute
+      const target = document.getElementById(el.dataset.target);
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      target.classList.toggle('is-hidden-touch');
+
+    });
+  });
+
+
+  // set all active links
+  const here = location.toString();
+  for (const el of document.getElementsByTagName('a')) {
+      if (el.href == here) {
+          el.classList.add('is-active');
+      }
+  }
+
+});
\ No newline at end of file
diff --git a/app/interface/templates/base.html b/app/interface/templates/base.html
index 8e2cbe3..2d9eca7 100644
--- a/app/interface/templates/base.html
+++ b/app/interface/templates/base.html
@@ -23,8 +23,8 @@
   <nav class="navbar" role="navigation">
     <div class="navbar-brand has-text-primary">
       <a class="navbar-item" href="/">
-        <span class="icon fancy is-size-2 imx-4"><i class="fas fa-random"></i></span>
-        <span class="fancy is-size-2 is-size-4-touch">Polyphonic</span>
+        <span class="icon fancy is-size-2 is-size-4-mobile mx-4"><i class="fas fa-random"></i></span>
+        <span class="fancy is-size-2 is-size-4-mobile">Polyphonic</span>
       </a>
       <span class="navbar-item is-hidden-mobile fancy is-size-5">Musical Ensemble Manager</span>