diff --git a/assets/ui.png b/assets/ui.png
index f4b3654..c157300 100644
Binary files a/assets/ui.png and b/assets/ui.png differ
diff --git a/public/styles.css b/public/styles.css
index bc26dbe..9050722 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -286,19 +286,22 @@ p {
 /* Tab Styles */
 .tabs-container {
     margin-top: 1rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    padding: 0.5rem;
 }
 
 .tabs-header {
     display: flex;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     margin-bottom: 1rem;
     gap: 0.5rem;
 }
 
 .tab-button {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.8);
     padding: 0.5rem 1rem;
     border-radius: 8px 8px 0 0;
     cursor: pointer;
@@ -308,14 +311,16 @@ p {
 }
 
 .tab-button:hover {
-    background: rgba(0, 0, 0, 0.5);
-    color: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.95);
+    border-color: rgba(255, 255, 255, 0.25);
 }
 
 .tab-button.active {
-    background: rgba(255, 255, 255, 0.1);
-    color: #ecf0f1;
-    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
 }
 
 .tab-content {