diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index bb581ab1..29b38acb 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -103,10 +103,15 @@
         }
     </script>
     <body>
-        <!-- Chat Header -->
-        <h1>
-            <img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
-        </h1>
+       <!--Add Header Logo and Nav Pane-->
+        <div class="khoj-header">
+            <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
+            <nav class="khoj-nav">
+                <a href="/chat">Chat</a>
+                <a href="/">Search</a>
+                <a href="/config">Settings</a>
+            </nav>
+        </div>
 
         <!-- Chat Body -->
         <div id="chat-body"></div>
@@ -142,12 +147,34 @@
             padding: 10px;
             margin: 10px;
         }
-        h1 {
-            margin: 8px 0;
-            padding: 0;
+        .khoj-header {
+            display: grid;
+            grid-auto-flow: row;
+            gap: 20px;
+            padding: 16px 0;
+            margin: 0;
+        }
+        .khoj-nav {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 32px;
+            justify-self: center;
+        }
+        .khoj-nav a {
+            color: #333;
+            text-decoration: none;
+            font-size: 20px;
+            font-weight: normal;
+            padding: 8px;
+            border-radius: 4px;
+            justify-self: center;
+        }
+        .khoj-nav a:hover {
+            background-color: var(--evening-sun);
         }
         img.khoj-logo {
             width: min(60vw, 150px);
+            justify-self: center;
         }
 
         #chat-body {
diff --git a/src/khoj/interface/web/index.html b/src/khoj/interface/web/index.html
index 8b9c5307..084a7cd4 100644
--- a/src/khoj/interface/web/index.html
+++ b/src/khoj/interface/web/index.html
@@ -188,9 +188,15 @@
     </script>
 
     <body>
-        <h1>
-            <img class="khoj-logo" src="static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
-        </h1>
+        <!--Add Header Logo and Nav Pane-->
+        <div class="khoj-header">
+            <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways.svg" alt="Khoj"></img>
+            <nav class="khoj-nav">
+                <a href="/chat">Chat</a>
+                <a href="/">Search</a>
+                <a href="/config">Settings</a>
+            </nav>
+        </div>
 
         <!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
         <input type="text" id="query" class="option" onkeyup=incrementalSearch(event) autofocus="autofocus" placeholder="What is the meaning of life?">
@@ -215,7 +221,7 @@
             body {
                 display: grid;
                 grid-template-columns: 1fr;
-                grid-template-rows: 1fr 1fr 1fr minmax(80px, 100%);
+                grid-template-rows: 1fr auto auto minmax(80px, 100%);
             }
             body > * {
                 grid-column: 1;
@@ -225,7 +231,7 @@
             body {
                 display: grid;
                 grid-template-columns: 1fr min(70vw, 100%) 1fr;
-                grid-template-rows: 1fr 1fr 1fr minmax(80px, 100%);
+                grid-template-rows: 1fr auto auto minmax(80px, 100%);
                 padding-top: 60vw;
             }
             body > * {
@@ -248,12 +254,34 @@
             padding: 10px;
             margin: 10px;
         }
-        h1 {
-            margin: 8px 0;
-            padding: 0;
+        .khoj-header {
+            display: grid;
+            grid-auto-flow: row;
+            gap: 20px;
+            padding: 16px 0;
+            margin: 0;
+        }
+        .khoj-nav {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 32px;
+            justify-self: center;
+        }
+        .khoj-nav a {
+            color: #333;
+            text-decoration: none;
+            font-size: 20px;
+            font-weight: normal;
+            padding: 8px;
+            border-radius: 4px;
+            justify-self: center;
+        }
+        .khoj-nav a:hover {
+            background-color: var(--evening-sun);
         }
         img.khoj-logo {
             width: min(60vw, 150px);
+            justify-self: center;
         }
 
         #options {
