diff --git a/index.html b/index.html
index cda3ff6..6a0d551 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,18 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jsonc-parser@3.2.0/lib/umd/main.js"></script>
     <link rel="stylesheet" href="src/styles.css">
+    <!-- favicon goes here -->
+    <link rel="icon" href="src/astrolabe.svg" type="image/svg+xml">
 </head>
 
 <body>
     <div class="container">
+        <header class="app-header">
+            <a href="/">
+                <img src="src/astrolabe.svg" alt="Astrolabe logo">
+                <h1>Astrolabe</h1>
+            </a>
+        </header>
         <div class="panel">
             <div class="panel-header">
                 <h2>Snippets</h2>
diff --git a/src/astrolabe.svg b/src/astrolabe.svg
new file mode 100644
index 0000000..66f501f
--- /dev/null
+++ b/src/astrolabe.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg 
+    width="512" 
+    height="512" 
+    viewBox="0 0 512 512" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Outer Circle -->
+  <circle 
+    cx="256" 
+    cy="256" 
+    r="200" 
+    stroke="#000000" 
+    stroke-width="16" 
+    fill="none"
+  />
+
+  <!-- Inner Circle -->
+  <circle 
+    cx="256" 
+    cy="256" 
+    r="130" 
+    stroke="#000000" 
+    stroke-width="8" 
+    fill="none"
+  />
+
+  <!-- Stylized Rotating Arm/Pincer -->
+  <g transform="translate(256,256)">
+    <!-- Horizontal bar -->
+    <line 
+      x1="-80" y1="0" x2="80" y2="0" 
+      stroke="#000000" 
+      stroke-width="8"
+    />
+    <!-- Outer arc on one side -->
+    <path 
+      d="M 80 0 A 80 80 0 0 1 0 80" 
+      stroke="#000000" 
+      stroke-width="8" 
+      fill="none"
+    />
+    <!-- Outer arc on the other side -->
+    <path 
+      d="M -80 0 A 80 80 0 0 0 0 80" 
+      stroke="#000000" 
+      stroke-width="8" 
+      fill="none"
+    />
+    <!-- Center pivot circle -->
+    <circle 
+      cx="0" 
+      cy="0" 
+      r="8" 
+      fill="#000000"
+    />
+  </g>
+
+  <!-- Decorative radial lines -->
+  <g stroke="#000000" stroke-width="4">
+    <line x1="256" y1="56"  x2="256" y2="105"/>
+    <line x1="456" y1="256" x2="407" y2="256"/>
+    <line x1="256" y1="456" x2="256" y2="407"/>
+    <line x1="56"  y1="256" x2="105" y2="256"/>
+  </g>
+</svg>
diff --git a/src/styles.css b/src/styles.css
index fcb4c62..550aecf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,6 +2,41 @@
     --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
+.app-header {
+    background: #f5f5f5;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.app-header a {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity 0.2s;
+}
+
+.app-header a:hover {
+    opacity: 0.8;
+}
+
+.app-header img {
+    width: 24px;
+    height: 24px;
+}
+
+.app-header h1 {
+    font-family: var(--ui-font);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
 #vis {
     width: 100%;
     height: 100%;
@@ -37,11 +72,16 @@
 
 .container {
     display: grid;
+    grid-template-rows: auto 1fr;
     grid-template-columns: var(--snippet-width, 1fr) 5px var(--editor-width, 1fr) 5px var(--preview-width, 2fr);
     height: 100vh;
     background-color: #e0e0e0;
 }
 
+.app-header {
+    grid-column: 1 / -1;
+}
+
 .panel {
     background: white;
     overflow-y: auto;
