5 files changed, 46 insertions, 22 deletions
diff --git a/assets/fonts/sugarmagicpersonaluseonly-jemyo.otf b/assets/fonts/sugarmagicpersonaluseonly-jemyo.otf
new file mode 100644
index 0000000..a0716aa
--- /dev/null
+++ b/assets/fonts/sugarmagicpersonaluseonly-jemyo.otf
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index 305cb2e..b0d4a5f 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -14,12 +14,16 @@
 <body>
     <div class="container">
         <header class="app-header">
-            <div class="logo-container">
-                <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
-                <h1 class="app-title">ZenInternet Settings</h1>
+            <div id="header-container">
+                <div class="logo-container">
+                    <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
+                    <h1 class="app-title">Zen Internet Settings</h1>
+                </div>
+                <div class="miniheader">
+                    <div id="addon-version" class="addon-version"></div>
+                    <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
+                </div>
             </div>
-            <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
-            <div id="addon-version" class="addon-version"></div>
         </header>
 
         <main class="app-content">
diff --git a/popup/popup.css b/popup/popup.css
index 67eab43..ba754e0 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,6 +1,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
 @import url("../theme.css");
 
+@font-face {
+  font-family: "sugar-magic";
+  src: url("../assets/fonts/sugarmagicpersonaluseonly-jemyo.otf")
+    format("opentype");
+}
+
 body {
   width: 360px;
   margin: 0;
@@ -30,12 +36,15 @@ body {
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: var(--shadow);
   position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .logo-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 
 .logo-img {
@@ -46,16 +55,24 @@ body {
 }
 
 .app-title {
+  font-family: "sugar-magic", sans-serif;
   margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.5px;
+  font-size: 30px;
 }
 
-.author {
-  font-size: 12px;
-  margin-top: 4px;
-  opacity: 0.9;
+#header-container{
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  width: 100%;
+}
+
+.miniheader{
+  margin-top: 2px;
+  font-size: 11px;
+  display: flex;
+  gap: 4px;
+  flex-direction: row;
 }
 
 .author a {
@@ -70,9 +87,9 @@ body {
 
 /* What's New Button */
 .whats-new-button {
-  position: absolute;
+  /* position: absolute;
   top: 16px;
-  right: 16px;
+  right: 16px; */
   background: none;
   border: none;
   color: white;
@@ -474,7 +491,6 @@ input:checked + .slider:before {
   margin-right: 4px;
 }
 
-#addon-version,
 #last-fetched-time {
   font-size: 0.75em;
 }
diff --git a/popup/popup.html b/popup/popup.html
index bc53134..9d8d042 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -12,12 +12,16 @@
 <body>
   <div class="container">
     <header class="app-header">
-      <div class="logo-container">
-        <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
-        <h1 class="app-title">ZenInternet</h1>
+      <div id="header-container">
+        <div class="logo-container">
+          <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
+          <h1 class="app-title">Zen Internet</h1>
+        </div>
+        <div class="miniheader">
+          <div id="addon-version" class="addon-version"></div>
+          <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
+        </div>
       </div>
-      <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
-      <div id="addon-version" class="addon-version"></div>
       <button id="whats-new" class="whats-new-button" title="What's New">✨</button>
     </header>
 
diff --git a/popup/popup.js b/popup/popup.js
index 44123ee..64036a9 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -593,7 +593,7 @@ new (class ExtensionPopup {
     const version = manifest.version;
     document.getElementById(
       "addon-version"
-    ).textContent = `Version: ${version}`;
+    ).textContent = `v${version}`;
   }
 
   setupAutoUpdate() {