diff --git a/.gitignore b/.gitignore
index 6f2c7bf..3b346be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,9 @@ local/
 share/
 lib64
 
+uploads/
+thumbnails/
+
 config.toml
 __pycache__/
 photos.db
\ No newline at end of file
diff --git a/app.py b/app.py
index 407abb2..50b7279 100644
--- a/app.py
+++ b/app.py
@@ -74,7 +74,7 @@ scheduler.add_job(generate_all_thumbnails, 'date', run_date=datetime.now())  # R
 
 @app.route('/')
 def index():
-    return render_template('index.html')
+    return render_template('index.html', accent_color=config['appearance']['accent_color'])
 
 @app.route('/api/images')
 def get_images():
@@ -116,7 +116,7 @@ def admin():
     photos = db_session.query(Photo).order_by(Photo.date_taken.desc()).all()
     db_session.close()
     
-    return render_template('admin.html', photos=photos)
+    return render_template('admin.html', photos=photos, accent_color=config['appearance']['accent_color'])
 
 @app.route('/admin/login', methods=['GET', 'POST'])
 def admin_login():
@@ -126,7 +126,7 @@ def admin_login():
             return redirect(url_for('admin'))
         else:
             flash('Invalid password')
-    return render_template('admin_login.html')
+    return render_template('admin_login.html', accent_color=config['appearance']['accent_color'])
 
 @app.route('/admin/upload', methods=['POST'])
 def admin_upload():
@@ -183,7 +183,7 @@ def admin_upload():
             orientation=int(exif.get('Orientation', 1)),
             width=width,
             height=height,
-            highlight_color=get_highlight_color(THUMBNAIL_FOLDER + f"{os.path.splitext(filename)[0]}/256_{filename}")
+            highlight_color=get_highlight_color(THUMBNAIL_FOLDER + f"/{os.path.splitext(filename)[0]}/256_{filename}")
         )
         db_session.add(new_photo)
         db_session.commit()
diff --git a/config.py b/config.py
index b929a5b..0c5b9a7 100644
--- a/config.py
+++ b/config.py
@@ -14,6 +14,9 @@ def load_or_create_config():
             'directories': {
                 'upload': 'uploads',
                 'thumbnail': 'thumbnails'
+            },
+            'appearance': {
+                'accent_color': '{{ accent_color }}'
             }
         }
         with open(CONFIG_FILE, 'w') as f:
diff --git a/templates/admin.html b/templates/admin.html
index ae11af1..f54bde2 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -3,56 +3,146 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Interface</title>
+    <title>Admin Interface - Tanishq Dubey Photography</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
     <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Noto Sans Mono', monospace;
+            background-color: #f0f0f0;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        h1 {
+            color: {{ accent_color }};
+            margin-bottom: 1.5rem;
+        }
+        .upload-form {
+            background-color: #ffffff;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        input[type="file"] {
+            margin-right: 1rem;
+        }
+        input[type="submit"] {
+            background-color: {{ accent_color }};
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-weight: bold;
+        }
+        input[type="submit"]:hover {
+            background-color: {{ accent_color }}e0;  /* Slightly darker version of the accent color */
+        }
         table {
-            border-collapse: collapse;
             width: 100%;
+            border-collapse: collapse;
+            background-color: #ffffff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         th, td {
-            border: 1px solid #ddd;
-            padding: 8px;
+            padding: 0.75rem;
             text-align: left;
+            border-bottom: 1px solid #e0e0e0;
         }
         th {
-            background-color: #f2f2f2;
+            background-color: #f5f5f5;
+            font-weight: bold;
+            color: #333;
+        }
+        tr:hover {
+            background-color: #f9f9f9;
+        }
+        .thumbnail {
+            max-width: 100px;
+            max-height: 100px;
+            object-fit: cover;
+        }
+        .flash-messages {
+            margin-bottom: 1rem;
+        }
+        .flash-messages p {
+            background-color: #4CAF50;
+            color: white;
+            padding: 0.5rem;
+            border-radius: 4px;
+        }
+        .logout {
+            text-align: right;
+            margin-bottom: 1rem;
+        }
+        .logout a {
+            color: {{ accent_color }};
+            text-decoration: none;
+        }
+        .logout a:hover {
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
-    <h1>Admin Interface</h1>
-    {% with messages = get_flashed_messages() %}
-        {% if messages %}
-            <ul>
-                {% for message in messages %}
-                    <li>{{ message }}</li>
+    <div class="container">
+        <div class="logout">
+            <a href="{{ url_for('admin_logout') }}">Logout</a>
+        </div>
+        <h1>Admin Interface</h1>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="flash-messages">
+                    {% for message in messages %}
+                        <p>{{ message }}</p>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+        <div class="upload-form">
+            <h2>Upload New Image</h2>
+            <form action="{{ url_for('admin_upload') }}" method="POST" enctype="multipart/form-data">
+                <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif" required>
+                <input type="submit" value="Upload">
+            </form>
+        </div>
+        <h2>Uploaded Images</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Thumbnail</th>
+                    <th>Filename</th>
+                    <th>Date Taken</th>
+                    <th>Focal Length</th>
+                    <th>Aperture</th>
+                    <th>Shutter Speed</th>
+                    <th>ISO</th>
+                    <th>Dimensions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for photo in photos %}
+                <tr>
+                    <td><img src="{{ url_for('serve_thumbnail', filename=photo.thumbnail_filename) }}" alt="Thumbnail" class="thumbnail"></td>
+                    <td>{{ photo.input_filename }}</td>
+                    <td>{{ photo.date_taken.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                    <td>{{ photo.focal_length }}</td>
+                    <td>{{ photo.aperture }}</td>
+                    <td>{{ photo.shutter_speed }}</td>
+                    <td>{{ photo.iso }}</td>
+                    <td>{{ photo.width }}x{{ photo.height }}</td>
+                </tr>
                 {% endfor %}
-            </ul>
-        {% endif %}
-    {% endwith %}
-    <h2>Upload New Image</h2>
-    <form action="{{ url_for('admin_upload') }}" method="POST" enctype="multipart/form-data">
-        <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif" required>
-        <input type="submit" value="Upload">
-    </form>
-    <h2>Uploaded Images</h2>
-    <table>
-        <tr>
-            <th>ID</th>
-            <th>Thumbnail</th>
-            <th>Filename</th>
-            <th>Date Taken</th>
-            <th>Technical Info</th>
-        </tr>
-        {% for photo in photos %}
-        <tr>
-            <td>{{ photo.id }}</td>
-            <td><img src="{{ url_for('static', filename='thumbnails/' + photo.thumbnail_filename) }}" alt="Thumbnail" width="100"></td>
-            <td>{{ photo.input_filename }}</td>
-            <td>{{ photo.date_taken.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-            <td>{{ photo.focal_length }}mm f/{{ photo.aperture }} {{ photo.shutter_speed }}s ISO{{ photo.iso }}</td>
-        </tr>
-        {% endfor %}
-    </table>
+            </tbody>
+        </table>
+    </div>
 </body>
 </html>
diff --git a/templates/admin_login.html b/templates/admin_login.html
index fca4dac..a41adb8 100644
--- a/templates/admin_login.html
+++ b/templates/admin_login.html
@@ -3,22 +3,75 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Login</title>
+    <title>Admin Login - Tanishq Dubey Photography</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Noto Sans Mono', monospace;
+            background-color: #f0f0f0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        .login-container {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        h1 {
+            color: {{ accent_color }};
+            margin-bottom: 1.5rem;
+        }
+        input[type="password"] {
+            width: 100%;
+            padding: 0.5rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-family: inherit;
+        }
+        input[type="submit"] {
+            background-color: {{ accent_color }};
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-weight: bold;
+        }
+        input[type="submit"]:hover {
+            background-color: #e55c00;
+        }
+        .flash-messages {
+            margin-bottom: 1rem;
+            color: #ff0000;
+        }
+    </style>
 </head>
 <body>
-    <h1>Admin Login</h1>
-    {% with messages = get_flashed_messages() %}
-        {% if messages %}
-            <ul>
-                {% for message in messages %}
-                    <li>{{ message }}</li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-    {% endwith %}
-    <form method="POST">
-        <input type="password" name="password" required>
-        <input type="submit" value="Login">
-    </form>
+    <div class="login-container">
+        <h1>Admin Login</h1>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="flash-messages">
+                    {% for message in messages %}
+                        <p>{{ message }}</p>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+        <form method="POST">
+            <input type="password" name="password" required placeholder="Enter password">
+            <input type="submit" value="Login">
+        </form>
+    </div>
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index e4642d9..fda2ef6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -55,13 +55,13 @@
             position: absolute;
             bottom: 4rem;
             font-size: 1rem;
-            padding-right: 10px;
-            color: #ff6600;
-            padding: 2px 5px;
+            right: 1rem;
+            text-align: right;
+            color: #ec5a11;
             font-family: "Noto Sans Mono", monospace;
             font-size: 0.7rem;
             opacity: 0;
-            text-shadow: 0 0 2px #ff6600;
+            text-shadow: 0 0 2px #ec5a11;
             transition: opacity 0.3s ease;
         }
 
@@ -121,7 +121,7 @@
         }
         .sidebar-nav a {
             text-decoration: none;
-            color: #ff6600;
+            color: {{ accent_color }};
         }
 
 
@@ -149,12 +149,6 @@
             height: auto;
           }
         }
-
-        @media (min-width: 769px) and (max-width: 1024px) {
-          .grid-container {
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-          }
-        }
     </style>
 </head>
 <body>
