diff --git a/history.html.theme b/history.html.theme
index e12403b..76428ea 100644
--- a/history.html.theme
+++ b/history.html.theme
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
     <link rel="manifest" href="assets/site.webmanifest">
     <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="description" content="TinyStatus is a simple, customizable status page generator that allows you to monitor the status of various services and display them on a clean, responsive web page.">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <style>
@@ -20,16 +21,20 @@
             --card-shadow: rgba(0,0,0,0.1);
             --footer-color: #7f8c8d;
             --link-color: #3498db;
+            --secondary-bg-color: #fff;
+            --status-down-color: #e74c3c;
         }
         @media (prefers-color-scheme: dark) {
             :root {
-                --bg-color: #1a1a1a;
+                --bg-color: #18181b;
                 --text-color: #e0e0e0;
                 --heading-color: #b0b0b0;
-                --card-bg: #2a2a2a;
-                --card-shadow: rgba(255,255,255,0.1);
+                --card-bg: #27272a;
+                --card-shadow: rgba(9,9,11,0.4);
                 --footer-color: #888;
                 --link-color: #5dade2;
+                --secondary-bg-color: #27272a;
+                --status-down-color: #FF9185;
             }
         }
         body {
@@ -70,7 +75,7 @@
             justify-content: space-between;
         }
         .status-up { color: #27ae60; }
-        .status-down { color: #e74c3c; }
+        .status-down { color: var(--status-down-color); }
         .footer {
             text-align: center;
             font-size: .9em;
diff --git a/index.html.theme b/index.html.theme
index df4ade3..9e6317b 100644
--- a/index.html.theme
+++ b/index.html.theme
@@ -11,6 +11,11 @@
     <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
+    <meta name="description" content="TinyStatus is a simple, customizable status page generator that allows you to monitor the status of various services and display them on a clean, responsive web page.">
+    <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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Golos+Text:wght@400..900&display=swap" rel="stylesheet">
+
     <style>
         :root {
             --bg-color: #f4f4f4;
@@ -20,16 +25,20 @@
             --card-shadow: rgba(0,0,0,0.1);
             --footer-color: #7f8c8d;
             --link-color: #3498db;
+            --secondary-bg-color: #fff;
+            --status-down-color: #e74c3c;
         }
         @media (prefers-color-scheme: dark) {
             :root {
-                --bg-color: #1a1a1a;
+                --bg-color: #18181b;
                 --text-color: #e0e0e0;
                 --heading-color: #b0b0b0;
-                --card-bg: #2a2a2a;
-                --card-shadow: rgba(255,255,255,0.1);
+                --card-bg: #27272a;
+                --card-shadow: rgba(9,9,11,0.4);
                 --footer-color: #888;
                 --link-color: #5dade2;
+                --secondary-bg-color: #27272a;
+                --status-down-color: #FF9185;
             }
             a,
             a:link,
@@ -43,7 +52,7 @@
             }
         }
         body {
-            font-family: sans-serif;
+            font-family: 'Golos Text', sans-serif;
             line-height: 1.6;
             color: var(--text-color);
             max-width: 1200px;
@@ -55,6 +64,42 @@
             color: var(--heading-color);
             text-align: center;
         }
+        hr{
+            border-color: var(--secondary-bg-color);
+            opacity: 10%;
+        }
+        .logo{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap:10px;
+        }
+        .logo img{
+            width: 50px;
+        }
+        .icons{
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            margin-bottom: 10px;
+        }
+        .icons a{
+            display: flex;
+            align-items: center;
+            padding: 5px 20px;
+            gap:10px;
+            background: var(--secondary-bg-color);
+            border-radius: 50px 50px;
+        }
+        .sub-heading{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+        }
+        .sub-heading svg{
+            fill: var(--heading-color);
+        }
         .status-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -75,8 +120,21 @@
         .status-item h3 {
             margin: 0 0 10px;
         }
-        .status-up { color: #27ae60; }
-        .status-down { color: #e74c3c; }
+        .status-up { 
+            color: #27ae60;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            fill: #27ae60;
+            justify-content: center;
+         }
+        .status-down { color: var(--status-down-color); 
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            fill: var(--status-down-color);
+            justify-content: center;
+        }
         .incidents {
             background: var(--card-bg);
             border-radius: 8px;
@@ -99,19 +157,28 @@
         a:link,
         a:visited {
             cursor: pointer;
-            color: rgb(255, 255, 255);
+            color: var(--link-color);
             text-decoration: none !important;
         }
 
+        .status-item h3, .icons a {
+            color: var(--text-color) !important;
+        }
+
         a:hover {
             color: rgb(86, 86, 86);
         }
-
     </style>
 </head>
 <body>
-    <h1>TinyStatus</h1>
-    <h2>Current Status</h2>
+    <div class="logo"><img src="assets/apple-touch-icon.png" alt="Logo"/><h1>TinyStatus</h1></div>
+    <div class="icons">
+        <a href="https://github.com/harsxv/tinystatus" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg> GitHub</a>
+    </div>
+    <hr>
+    <div class="sub-heading">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M240,128a8,8,0,0,1-8,8H204.94l-37.78,75.58A8,8,0,0,1,160,216h-.4a8,8,0,0,1-7.08-5.14L95.35,60.76,63.28,131.31A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.85L88.72,36.69a8,8,0,0,1,14.76.46l57.51,151,31.85-63.71A8,8,0,0,1,200,120h32A8,8,0,0,1,240,128Z"></path></svg>
+    <h2>Current Status</h2></div>
     {% for group, checks in groups.items() %}
     <h3>{{group}} Status</h3>
     <div class="status-grid">
@@ -122,7 +189,7 @@
         <div class="status-item">
             <h3>{{ check.name }}</h3>
             <p class="{% if check.status %}status-up{% else %}status-down{% endif %}">
-                {{ 'Operational' if check.status else 'Down' }}
+                {{ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-52.2,6.84-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg> Operational' if check.status else '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg> Down' }}
             </p>
         </div>
             {% if check.url %}
@@ -131,7 +198,9 @@
         {% endfor %}
     </div>
     {% endfor %}
-    <h2>Incident History</h2>
+    <div class="sub-heading">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"></path></svg>
+    <h2>Incident History</h2></div>
     <div class="incidents">
         {{ incidents | safe }}
     </div>