diff --git a/.gitignore b/.gitignore
index bff6b5a..ecbb8b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 app/routes/__pycache__
 app/utils/__pycache__
 app/__pycache__
-uploads/classless.html
+uploads/*
 classless.html
+uploads
+uploads/uri_map.json
diff --git a/app/templates/base.html b/app/templates/base.html
index 5180d6e..f1bec6f 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,6 +7,44 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css">
     <link rel="stylesheet" href="https://esm.sh/@wooorm/starry-night@3/style/both">
     <style>
+        :root {
+            /* --background-color: #1a1a1a; */
+            --text-color: #ffffff;
+            --border-color: #ffffff;
+            --red: #ff0000;
+            --green: #00ff00;
+            --blue: #0000ff;
+            --yellow: #ffff00;
+            --purple: #800080;
+            --orange: #ffa500;
+            --gray: #808080;
+        }
+
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background-color: var(--background-color);
+        }
+
+        .nav-left {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .nav-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-left: auto;
+        }
+
+        .nav-right button {
+            margin-left: auto;
+        }
+
         .card {
             padding: 1rem;
             border-radius: 0.5rem;
@@ -42,6 +80,17 @@
             cursor: pointer;
         }
 
+        .upload_button {
+            position: relative;
+            float: right;
+            margin: 0;
+            padding: 0.25rem 0.5rem;
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            cursor: pointer;
+            max-width: 8rem;
+        }
+
         .container {
             display: flex;
             flex-direction: column;
@@ -81,10 +130,16 @@
     </script>
 </head>
 
-<nav>
-    <a class="glass" href="{{ url_for('main.index') }}">Home</a>
-    <a class="glass" href="{{ url_for('main.upload_file') }}">Upload</a>
-    <button class="outline" id="darkModeToggle">Toggle Theme</button>
+<nav style="justify-content: baseline;">
+    <button class="nav-left"><a href="{{ url_for('main.index') }}">Home</a></button>
+    <div class="nav-right">
+        <a href="{{ url_for('main.upload_file') }}" class="button">Add New</a>
+    </div>
+    <button class="outline nav-right" id="darkModeToggle">Toggle Theme</button>
+    <div class="nav-right">
+        {% block nav %}
+        {% endblock %}
+    </div>
 </nav>
 
 <body>
diff --git a/app/templates/index.html b/app/templates/index.html
index 9aaf861..8f605e6 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -3,22 +3,12 @@
 {% block content %}
 <h1>Markdown Viewer</h1>
 
-<div>
-    <a href="{{ url_for('main.upload_file') }}" class="button">Upload New Document</a>
-</div>
-
 {% if documents %}
 <div class="container">
     <h2>Available Documents</h2>
 
     {% for doc in documents %}
     <div class="card">
-        <!-- <div>
-            <a href="{{ url_for('main.view_file', uri=doc.uri) }}" class="card-title">
-                {{ doc.filename }}
-            </a>
-            <span class="file-uri">URI: {{ doc.uri }}</span>
-        </div> -->
         <div>
             <a href="{{ url_for('main.view_file', uri=doc.uri) }}" class="card-title">
                 <h3>{{ doc.filename }}</h3>
