diff --git a/a.svg b/a.svg
new file mode 100644
index 0000000..d4cef3c
--- /dev/null
+++ b/a.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100" height="100" fill="#2c3e50" />
+
+  <circle cx="50" cy="50" r="40" fill="#f1c40f" stroke="#e67e22" stroke-width="2"/>
+
+  <circle cx="50" cy="50" r="35" fill="none" stroke="#2c3e50" stroke-width="1" stroke-dasharray="2 3"/>
+  
+  <line x1="50" y1="10" x2="50" y2="18" stroke="#2c3e50" stroke-width="1.5"/>
+  <line x1="90" y1="50" x2="82" y2="50" stroke="#2c3e50" stroke-width="1.5"/>
+  <line x1="50" y1="90" x2="50" y2="82" stroke="#2c3e50" stroke-width="1.5"/>
+  <line x1="10" y1="50" x2="18" y2="50" stroke="#2c3e50" stroke-width="1.5"/>
+  
+  <path d="M 50 50 L 50 18 L 47 23 L 53 23 Z" fill="#c0392b"/>
+  <circle cx="68" cy="32" r="3" fill="#2980b9"/>
+  <line x1="50" y1="50" x2="68" y2="32" stroke="#c0392b" stroke-width="1"/>
+
+  <rect x="15" y="48.5" width="70" height="3" fill="#2c3e50" fill-opacity="0.6"/>
+
+  <circle cx="50" cy="50" r="3" fill="#e67e22" stroke="#2c3e50" stroke-width="1"/>
+
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 34d9857..389a189 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Astrolabe - Vega-Lite Snippet Manager</title>
     <link rel="stylesheet" href="src/styles.css">
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+
+
+    <!-- Google Fonts - IBM Plex Mono -->
+    <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=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 
     <!-- Monaco Editor -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
diff --git a/src/favicon.svg b/src/favicon.svg
new file mode 100644
index 0000000..7cccb52
--- /dev/null
+++ b/src/favicon.svg
@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <title>Astrolabe Icon (Thin)</title>
+  <rect width="100%" height="100%" fill="#ffffff"/>
+
+  <g stroke="#000000" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <!-- Suspension ring -->
+    <circle cx="256" cy="64" r="24"/>
+    <!-- Shackle -->
+    <path d="M236 96 L276 96 L276 120 L236 120 Z"/>
+
+    <!-- Outer mater -->
+    <circle cx="256" cy="284" r="220"/>
+    <!-- Inner ring -->
+    <circle cx="256" cy="284" r="180"/>
+
+    <!-- Cardinal spokes -->
+    <line x1="256" y1="104" x2="256" y2="464"/>
+    <line x1="76"  y1="284" x2="436" y2="284"/>
+    <!-- Diagonals -->
+    <line x1="128" y1="156" x2="384" y2="412"/>
+    <line x1="384" y1="156" x2="128" y2="412"/>
+
+    <!-- Ecliptic ring -->
+    <g transform="translate(256,284) rotate(-23)">
+      <ellipse cx="0" cy="0" rx="150" ry="110"/>
+    </g>
+
+    <!-- Alidade -->
+    <g transform="translate(256,284) rotate(-12)">
+      <line x1="-150" y1="0" x2="150" y2="0"/>
+      <circle cx="0" cy="0" r="18" fill="#ffffff" stroke="#000000" stroke-width="6"/>
+      <path d="M150 0 L120 -12 L120 12 Z" fill="#000000" stroke="none"/>
+      <circle cx="-110" cy="0" r="6" stroke-width="6"/>
+      <circle cx="110"  cy="0" r="6" stroke-width="6"/>
+    </g>
+
+    <!-- Degree ticks -->
+    <g transform="translate(256,284)">
+      <g>
+        <line x1="0" y1="-200" x2="0" y2="-186"/>
+        <line x1="100" y1="-173.2" x2="94" y2="-160"/>
+        <line x1="173.2" y1="-100" x2="160" y2="-94"/>
+        <line x1="200" y1="0" x2="186" y2="0"/>
+        <line x1="173.2" y1="100" x2="160" y2="94"/>
+        <line x1="100" y1="173.2" x2="94" y2="160"/>
+        <line x1="0" y1="200" x2="0" y2="186"/>
+        <line x1="-100" y1="173.2" x2="-94" y2="160"/>
+        <line x1="-173.2" y1="100" x2="-160" y2="94"/>
+        <line x1="-200" y1="0" x2="-186" y2="0"/>
+        <line x1="-173.2" y1="-100" x2="-160" y2="-94"/>
+        <line x1="-100" y1="-173.2" x2="-94" y2="-160"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 18b1958..6498e83 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -11,8 +11,8 @@
     --bg-white: #fff;
     --bg-light: #f0f0f0;
     --bg-lighter: #e0e0e0;
-    --font-main: 'MS Sans Serif', Tahoma, sans-serif;
-    --font-mono: 'Courier New', monospace;
+    --font-main: 'IBM Plex Mono', 'Courier New', Consolas, monospace;
+    --font-mono: 'IBM Plex Mono', 'Courier New', Consolas, monospace;
 }
 
 /* Base */