diff --git a/templates/404.html b/templates/404.html
index acea536..0452c0b 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nathan.Woodburn/</title>
     <link rel="icon" href="/assets/img/favicon.png" type="image/png">
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/assets/css/404.css">
 </head>
 
diff --git a/templates/assets/css/404.css b/templates/assets/css/404.css
index 9635f9c..1001d2c 100644
--- a/templates/assets/css/404.css
+++ b/templates/assets/css/404.css
@@ -1,20 +1,45 @@
+:root {
+    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+    --bg-color: #0f172a;
+    --text-primary: #f8fafc;
+    --accent-color: #8b5cf6;
+}
+
 body {
-    background-color: #000000;
-    color: #ffffff;
-}
-h1 {
-    font-size: 50px;
+    background-color: var(--bg-color);
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
+        radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     margin: 0;
-    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
+
+h1 {
+    font-size: 3rem;
+    margin: 0 0 1rem 0;
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
 .centre {
-    margin-top: 10%;
+    margin: auto;
     text-align: center;
+    padding: 2rem;
 }
+
 a {
-    color: #ffffff;
+    color: var(--accent-color);
     text-decoration: none;
+    transition: color 0.2s ease;
 }
+
 a:hover {
+    color: #a78bfa;
     text-decoration: underline;
 }
\ No newline at end of file
diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css
index d46628f..41286bf 100644
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -1,3 +1,15 @@
+:root {
+    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+    --bg-color: #0f172a;
+    --card-bg: rgba(30, 41, 59, 0.7);
+    --card-border: rgba(148, 163, 184, 0.1);
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --accent-color: #8b5cf6;
+    --success-color: #10b981;
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -5,9 +17,12 @@
 }
 
 body {
-    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-    color: #e0e0e0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: var(--bg-color);
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
+        radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     min-height: 100vh;
 }
@@ -20,24 +35,53 @@ body {
 
 /* Header */
 header {
-    background: linear-gradient(135deg, #8b2f0a 0%, #6b3d0a 100%);
-    padding: 2rem 0;
-    text-align: center;
-    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
-    margin: 0 0 2rem 0;
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: 1.5rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid var(--card-border);
+    margin-bottom: 2rem;
+}
+
+header .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
 header h1 {
-    font-size: 3rem;
+    font-size: 1.8rem;
+    font-weight: 700;
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
     margin: 0;
-    color: #ffffff;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .subtitle {
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 1.2rem;
-    margin-top: 0.5rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    display: none; /* Hidden on mobile, shown on desktop */
+}
+
+@media (min-width: 768px) {
+    .subtitle {
+        display: block;
+    }
 }
 
 /* Main Content */
@@ -47,24 +91,38 @@ main {
 
 /* Cards */
 .card {
-    background: rgba(30, 30, 30, 0.8);
-    border-radius: 12px;
+    background: var(--card-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-radius: 16px;
     padding: 2rem;
     margin-bottom: 2rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 107, 53, 0.2);
+    box-shadow: var(--glass-shadow);
+    border: 1px solid var(--card-border);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+    border-color: rgba(139, 92, 246, 0.3);
 }
 
 .card h2 {
-    color: #ff6b35;
+    color: var(--text-primary);
     margin-bottom: 1.5rem;
-    font-size: 1.8rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .card h3 {
-    color: #f7931e;
+    color: var(--text-secondary);
     margin-bottom: 1rem;
-    font-size: 1.3rem;
+    font-size: 1.1rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 /* Status Section */
@@ -77,25 +135,30 @@ main {
 
 .status-card {
     padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .status-content {
-    color: #b0b0b0;
-    font-size: 0.9rem;
+    color: var(--text-primary);
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin-top: auto;
 }
 
 /* Info Grid */
 .info-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 0.75rem;
+    gap: 1rem;
 }
 
 .info-item {
-    padding: 0.5rem;
-    background: rgba(20, 20, 20, 0.5);
-    border-radius: 6px;
-    border: 1px solid rgba(255, 107, 53, 0.15);
+    padding: 1rem;
+    background: rgba(15, 23, 42, 0.4);
+    border-radius: 12px;
+    border: 1px solid var(--card-border);
 }
 
 .info-item.no-border {
@@ -109,86 +172,120 @@ main {
 }
 
 .info-item strong {
-    color: #ff6b35;
-    display: inline-block;
-    min-width: 100px;
+    color: var(--text-secondary);
+    display: block;
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .mono {
-    font-family: 'Courier New', monospace;
-    font-size: 0.85rem;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.9rem;
     word-break: break-all;
+    color: var(--text-primary);
 }
 
 .view-all-btn {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.6rem 1.2rem;
+    background: var(--primary-gradient);
     color: #ffffff !important;
     text-decoration: none !important;
-    border-radius: 6px;
+    border-radius: 8px;
     font-weight: 600;
+    font-size: 0.9rem;
     transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
 }
 
 .view-all-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
 }
 
 /* Mempool Transaction List */
 .mempool-txs-container {
-    margin-top: 1rem;
+    margin-top: 1.5rem;
 }
 
 .mempool-header {
     padding: 0.75rem;
-    background: rgba(255, 107, 53, 0.1);
-    border-radius: 6px;
-    margin-bottom: 0.75rem;
-    color: #ff6b35;
+    background: rgba(139, 92, 246, 0.1);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    color: var(--accent-color);
+    font-weight: 600;
+    font-size: 0.9rem;
 }
 
 .tx-list {
     max-height: 400px;
     overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+/* Custom Scrollbar */
+.tx-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tx-list::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.3);
+    border-radius: 3px;
+}
+
+.tx-list::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.3);
+    border-radius: 3px;
 }
 
 .tx-item {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem;
-    background: rgba(20, 20, 20, 0.5);
-    border: 1px solid rgba(255, 107, 53, 0.15);
-    border-radius: 6px;
-    margin-bottom: 0.5rem;
+    gap: 1rem;
+    padding: 0.75rem;
+    background: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    margin-bottom: 0.75rem;
+    transition: border-color 0.2s ease;
+}
+
+.tx-item:hover {
+    border-color: rgba(139, 92, 246, 0.3);
 }
 
 .tx-hash {
     flex: 1;
-    font-size: 0.8rem;
-    color: #b0b0b0;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .tx-view-btn {
     padding: 0.4rem 0.8rem;
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
-    color: #ffffff;
-    border: none;
-    border-radius: 4px;
+    background: rgba(139, 92, 246, 0.1);
+    color: var(--accent-color);
+    border: 1px solid rgba(139, 92, 246, 0.2);
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
     flex-shrink: 0;
 }
 
 .tx-view-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
+    background: var(--accent-color);
+    color: white;
 }
 
 /* Transaction Modal */
@@ -198,23 +295,39 @@ main {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(15, 23, 42, 0.9);
+    backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     padding: 1rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.tx-modal.active {
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .tx-modal-content {
-    background: rgba(30, 30, 30, 0.95);
-    border-radius: 12px;
+    background: #1e293b;
+    border-radius: 16px;
     max-width: 900px;
     width: 100%;
-    max-height: 80vh;
-    border: 1px solid rgba(255, 107, 53, 0.3);
+    max-height: 85vh;
+    border: 1px solid var(--card-border);
     display: flex;
     flex-direction: column;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+
+.tx-modal.active .tx-modal-content {
+    transform: translateY(0);
 }
 
 .tx-modal-header {
@@ -222,33 +335,30 @@ main {
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid rgba(255, 107, 53, 0.2);
+    border-bottom: 1px solid var(--card-border);
 }
 
 .tx-modal-header h3 {
     margin: 0;
-    color: #ff6b35;
+    color: var(--text-primary);
+    font-size: 1.2rem;
 }
 
 .tx-modal-close {
-    background: none;
+    background: transparent;
     border: none;
-    color: #e0e0e0;
-    font-size: 2rem;
+    color: var(--text-secondary);
+    font-size: 1.5rem;
     cursor: pointer;
-    padding: 0;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: all 0.3s ease;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    line-height: 1;
 }
 
 .tx-modal-close:hover {
-    background: rgba(255, 107, 53, 0.2);
-    color: #ff6b35;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
 }
 
 .tx-modal-body {
@@ -258,8 +368,8 @@ main {
 }
 
 .tx-modal-body pre {
-    color: #b0b0b0;
-    font-family: 'Courier New', monospace;
+    color: var(--text-secondary);
+    font-family: 'JetBrains Mono', monospace;
     font-size: 0.9rem;
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -268,70 +378,78 @@ main {
 
 /* Transaction Details */
 .tx-details {
-    color: #e0e0e0;
+    color: var(--text-primary);
 }
 
 .tx-section {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .tx-section h4 {
-    color: #ff6b35;
+    color: var(--accent-color);
     margin-bottom: 1rem;
-    font-size: 1.1rem;
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .tx-io-list {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 1rem;
 }
 
 .tx-io-item {
-    background: rgba(20, 20, 20, 0.5);
-    border: 1px solid rgba(255, 107, 53, 0.15);
-    border-radius: 6px;
-    padding: 0.75rem;
+    background: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    padding: 1rem;
 }
 
 .tx-io-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 
 .tx-io-index {
-    color: #ff6b35;
-    font-weight: 600;
-    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
 }
 
 .tx-io-value {
-    color: #f7931e;
+    color: var(--success-color);
     font-weight: 600;
     font-size: 1rem;
+    font-family: 'JetBrains Mono', monospace;
 }
 
 .tx-io-address {
-    color: #b0b0b0;
-    font-family: 'Courier New', monospace;
-    font-size: 0.85rem;
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
     margin-bottom: 0.5rem;
     word-break: break-all;
 }
 
 .tx-io-hash {
-    color: #808080;
-    font-size: 0.75rem;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
     word-break: break-all;
+    font-family: 'JetBrains Mono', monospace;
 }
 
 .tx-covenant {
-    color: #ff6b35;
+    color: var(--accent-color);
     font-size: 0.85rem;
-    margin-top: 0.5rem;
-    font-style: italic;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--card-border);
+    font-family: 'JetBrains Mono', monospace;
 }
 
 /* Tabs */
@@ -340,38 +458,50 @@ main {
     gap: 0.5rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
+    background: rgba(15, 23, 42, 0.4);
+    padding: 0.5rem;
+    border-radius: 12px;
+    border: 1px solid var(--card-border);
 }
 
 .tab-btn {
-    background: rgba(50, 50, 50, 0.5);
-    color: #e0e0e0;
-    border: 1px solid rgba(255, 107, 53, 0.3);
-    padding: 0.75rem 1.5rem;
+    flex: 1;
+    background: transparent;
+    color: var(--text-secondary);
+    border: none;
+    padding: 0.75rem 1rem;
     border-radius: 8px;
     cursor: pointer;
-    font-size: 1rem;
-    transition: all 0.3s ease;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
 .tab-btn:hover {
-    background: rgba(255, 107, 53, 0.2);
-    border-color: #ff6b35;
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .tab-btn.active {
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+    background: var(--primary-gradient);
     color: #ffffff;
-    border-color: #ff6b35;
+    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
 }
 
 .tab-content {
     display: none;
+    animation: fadeIn 0.3s ease;
 }
 
 .tab-content.active {
     display: block;
 }
 
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
 /* Search Box */
 .search-box {
     display: flex;
@@ -383,39 +513,42 @@ main {
 .search-box input {
     flex: 1;
     min-width: 200px;
-    padding: 0.75rem 1rem;
-    background: rgba(20, 20, 20, 0.8);
-    border: 1px solid rgba(255, 107, 53, 0.3);
-    border-radius: 8px;
-    color: #e0e0e0;
+    padding: 0.8rem 1.2rem;
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid var(--card-border);
+    border-radius: 10px;
+    color: var(--text-primary);
     font-size: 1rem;
+    transition: all 0.2s ease;
 }
 
 .search-box input:focus {
     outline: none;
-    border-color: #ff6b35;
-    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+    background: rgba(15, 23, 42, 0.8);
 }
 
 .search-box input::placeholder {
-    color: rgba(224, 224, 224, 0.5);
+    color: var(--text-secondary);
 }
 
 .search-box button {
-    padding: 0.75rem 1.5rem;
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+    padding: 0.8rem 1.5rem;
+    background: var(--primary-gradient);
     color: #ffffff;
     border: none;
-    border-radius: 8px;
+    border-radius: 10px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 600;
     transition: all 0.3s ease;
+    white-space: nowrap;
 }
 
 .search-box button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
 }
 
 .search-box button:active {
@@ -423,30 +556,32 @@ main {
 }
 
 .secondary-btn {
-    padding: 0.75rem 1.5rem;
-    background: rgba(50, 50, 50, 0.8);
-    color: #ff6b35;
-    border: 1px solid #ff6b35;
-    border-radius: 8px;
+    padding: 0.8rem 1.5rem;
+    background: transparent;
+    color: var(--text-primary);
+    border: 1px solid var(--card-border);
+    border-radius: 10px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
 }
 
 .secondary-btn:hover {
-    background: rgba(255, 107, 53, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--text-secondary);
 }
 
 /* Result Box */
 .result-box {
-    background: rgba(10, 10, 10, 0.8);
-    border: 1px solid rgba(255, 107, 53, 0.2);
-    border-radius: 8px;
-    padding: 1rem;
+    background: rgba(15, 23, 42, 0.4);
+    border: 1px solid var(--card-border);
+    border-radius: 12px;
+    padding: 1.5rem;
     min-height: 100px;
     max-height: 600px;
     overflow-y: auto;
+    margin-top: 1rem;
 }
 
 .result-box:empty {
@@ -454,16 +589,20 @@ main {
 }
 
 .result-box pre {
-    color: #b0b0b0;
-    font-family: 'Courier New', monospace;
+    color: var(--text-secondary);
+    font-family: 'JetBrains Mono', monospace;
     font-size: 0.9rem;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
 .result-box .error {
-    color: #ff4444;
+    color: #ef4444;
     font-weight: 600;
+    background: rgba(239, 68, 68, 0.1);
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 /* Scrollbar */
@@ -472,58 +611,55 @@ main {
 }
 
 .result-box::-webkit-scrollbar-track {
-    background: rgba(20, 20, 20, 0.5);
+    background: rgba(15, 23, 42, 0.3);
     border-radius: 4px;
 }
 
 .result-box::-webkit-scrollbar-thumb {
-    background: rgba(255, 107, 53, 0.5);
+    background: rgba(148, 163, 184, 0.3);
     border-radius: 4px;
 }
 
 .result-box::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 107, 53, 0.7);
+    background: rgba(148, 163, 184, 0.5);
 }
 
 /* Footer */
 footer {
-    background: rgba(20, 20, 20, 0.8);
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(12px);
     padding: 2rem 0;
     text-align: center;
-    margin-top: 3rem;
-    border-top: 1px solid rgba(255, 107, 53, 0.2);
+    margin-top: 4rem;
+    border-top: 1px solid var(--card-border);
 }
 
 footer p {
-    color: rgba(224, 224, 224, 0.7);
+    color: var(--text-secondary);
     margin: 0.5rem 0;
 }
 
 .timestamp {
-    font-size: 0.9rem;
-    color: rgba(224, 224, 224, 0.5);
+    font-size: 0.85rem;
+    opacity: 0.7;
 }
 
 /* Links */
 a {
-    color: #ff6b35;
+    color: var(--accent-color);
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: color 0.2s ease;
 }
 
 a:hover {
-    color: #f7931e;
+    color: #a78bfa;
     text-decoration: underline;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
     header h1 {
-        font-size: 2rem;
-    }
-
-    .subtitle {
-        font-size: 1rem;
+        font-size: 1.5rem;
     }
 
     .card {
@@ -542,6 +678,11 @@ a:hover {
     .status-section {
         grid-template-columns: 1fr;
     }
+    
+    .tab-btn {
+        padding: 0.5rem;
+        font-size: 0.85rem;
+    }
 }
 
 /* Loading Animation */
@@ -557,4 +698,6 @@ a:hover {
 .status-content:empty::after {
     content: 'Loading...';
     animation: pulse 1.5s ease-in-out infinite;
+    color: var(--text-secondary);
+    font-style: italic;
 }
diff --git a/templates/index.html b/templates/index.html
index a894a70..7591308 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,9 @@
     <title>Fire Explorer</title>
     <link rel="icon" href="/assets/img/favicon.png" type="image/png">
     <link rel="stylesheet" href="/assets/css/index.css">
+    <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <meta name="description" content="A hot new Handshake Blockchain Explorer">
 
     <!-- Open Graph Meta Tags -->
@@ -30,8 +33,10 @@
 <body>
     <header>
         <div class="container">
-            <h1><img src="/assets/img/favicon.png" alt="Fire Icon" style="height: 1em; vertical-align: middle;"> Fire Explorer</h1>
-            <p class="subtitle">Handshake Blockchain Explorer</p>
+            <div class="brand">
+                <h1><img src="/assets/img/favicon.png" alt="Fire Icon" style="height: 1.2em; vertical-align: middle;"> Fire Explorer</h1>
+                <span class="subtitle">Handshake Blockchain Explorer</span>
+            </div>
         </div>
     </header>