diff --git a/templates/index.html b/templates/index.html
index d80cc08..584dc9d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,10 +4,22 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Lidarr Barcode Scanner</title>
+
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+
 <script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
+
 <style>
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Roboto', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    background: #1e1e2f;
+    color: #eee;
+    text-align: center;
+    padding: 20px;
+}
+<style>
+body {
+    font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
     background: #1e1e2f;
     color: #eee;
     text-align: center;
@@ -15,11 +27,11 @@ body {
 }
 h1 { color: #5c9d4e; margin-bottom: 10px; }
 #lidarr-logo { max-width: 128px; margin: 10px auto; display: block; }
-#status { margin: 10px 0; font-weight: bold; }
+#status { margin: 10px 0; font-weight: 500; }
 #preview-container { position: relative; width: 100%; max-width: 500px; margin: 20px auto; border: 2px solid #5c9d4e; border-radius: 4px; overflow: hidden; background: #000; height: 300px; }
 #scanner-guides::before { content: ""; position: absolute; top: 20%; left: 10%; right: 10%; height: 60%; border: 2px dashed rgba(92,157,78,0.7); }
 .button-group { display: flex; gap: 10px; justify-content: center; margin: 15px 0; }
-.button-group button { flex: 1; padding: 10px; border: none; border-radius: 4px; background: #5c9d4e; color: #fff; font-weight: bold; cursor: pointer; }
+.button-group button { flex: 1; padding: 10px; border: none; border-radius: 4px; background: #5c9d4e; color: #fff; font-weight: 500; cursor: pointer; }
 .button-group button:hover { background: #4b8440; }
 #toggle-container { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
 #toggle-container button { padding: 10px; border-radius: 4px; border: none; background: #888; color: #fff; cursor: pointer; flex: 1; }
@@ -28,7 +40,7 @@ h1 { color: #5c9d4e; margin-bottom: 10px; }
 .progress-bar { height: 100%; width: 0%; background: #5c9d4e; transition: width 0.3s; }
 #debug-info { margin-top: 10px; color: #ccc; }
 #album-info { margin-top: 10px; }
-#add-album-btn { padding: 10px 20px; margin-top: 10px; border-radius: 4px; border: none; background: #5c9d4e; color: #fff; font-weight: bold; cursor: pointer; display: none; }
+#add-album-btn { padding: 10px 20px; margin-top: 10px; border-radius: 4px; border: none; background: #5c9d4e; color: #fff; font-weight: 500; cursor: pointer; display: none; }
 #add-album-btn:hover { background: #4b8440; }
 </style>
 </head>