diff --git a/static/index.html b/static/index.html
index 4362a86..fcf8799 100644
--- a/static/index.html
+++ b/static/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
     <div class="container">
-        <h1>NTP TimeTurner</h1>
+        <img src="assets/header.png" alt="NTP Timeturner" class="header-logo">
 
         <!-- Mock Data Controls (hidden by default) -->
         <div id="mock-controls" class="card full-width" style="display: none;">
diff --git a/static/style.css b/static/style.css
index ddfdf8f..a9f180e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,7 +10,7 @@
 
 body {
     font-family: 'FuturaStdHeavy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    background-color: #f4f4f9;
+    background-color: #221f1f;
     color: #333;
     margin: 0;
     padding: 20px;
@@ -23,9 +23,10 @@ body {
     max-width: 960px;
 }
 
-h1 {
-    text-align: center;
-    color: #444;
+.header-logo {
+    display: block;
+    margin: 0 auto 20px auto;
+    max-width: 100%;
 }
 
 .grid {
@@ -35,7 +36,7 @@ h1 {
 }
 
 .card {
-    background: #fff;
+    background: #c5ced6;
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -43,7 +44,7 @@ h1 {
 
 .card h2 {
     margin-top: 0;
-    color: #0056b3;
+    color: #1a7db6;
 }
 
 #ltc-timecode, #system-clock {
