feat: improve header

public/styles.css

@@ -18,13 +18,17 @@ body {
 }
 
 .header {
-    text-align: center;
-    margin-bottom: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding: 1.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 h1 {
-    font-size: 3rem;
-    margin-bottom: 1rem;
+    font-size: 2.5rem;
+    margin: 0;
     font-weight: 700;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
@@ -37,11 +41,12 @@ p {
 
 .status {
     background: rgba(255, 255, 255, 0.2);
-    padding: 1rem 2rem;
-    border-radius: 50px;
+    padding: 0.75rem 1.5rem;
+    border-radius: 25px;
     font-weight: 500;
     display: inline-block;
-    margin-bottom: 2rem;
+    margin: 0;
+    font-size: 1rem;
 }
 
 .cluster-section {
@@ -279,3 +284,21 @@ p {
     margin-bottom: 1rem;
     opacity: 0.5;
 }
+
+/* Responsive design for smaller screens */
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+    
+    h1 {
+        font-size: 2rem;
+    }
+    
+    .status {
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+    }
+}