diff --git a/src/khoj/interface/web/assets/icons/orgmode.svg b/src/khoj/interface/web/assets/icons/org.svg
similarity index 100%
rename from src/khoj/interface/web/assets/icons/orgmode.svg
rename to src/khoj/interface/web/assets/icons/org.svg
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 59e66f49..b1cd654c 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
+<html data-theme="light">
     <head>
         <meta charset="utf-8">
         <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
         <title>Khoj - Settings</title>
-    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
     </head>
     <body class="khoj-configure">
         <div class="khoj-header">
@@ -20,6 +21,47 @@
         </div>
     </body>
     <style>
+        /* Amber Light scheme (Default) */
+        /* Can be forced with data-theme="light" */
+        [data-theme="light"],
+        :root:not([data-theme="dark"]) {
+            --primary: #ffb300;
+            --primary-hover: #ffa000;
+            --primary-focus: rgba(255, 179, 0, 0.125);
+            --primary-inverse: rgba(0, 0, 0, 0.75);
+        }
+
+        /* Amber Dark scheme (Auto) */
+        /* Automatically enabled if user has Dark mode enabled */
+        @media only screen and (prefers-color-scheme: dark) {
+            :root:not([data-theme]) {
+                --primary: #ffb300;
+                --primary-hover: #ffc107;
+                --primary-focus: rgba(255, 179, 0, 0.25);
+                --primary-inverse: rgba(0, 0, 0, 0.75);
+            }
+        }
+        /* Amber Dark scheme (Forced) */
+        /* Enabled if forced with data-theme="dark" */
+        [data-theme="dark"] {
+            --primary: #ffb300;
+            --primary-hover: #ffc107;
+            --primary-focus: rgba(255, 179, 0, 0.25);
+            --primary-inverse: rgba(0, 0, 0, 0.75);
+        }
+        /* Amber (Common styles) */
+        :root {
+            --form-element-active-border-color: var(--primary);
+            --form-element-focus-color: var(--primary-focus);
+            --switch-color: var(--primary-inverse);
+            --switch-checked-background-color: var(--primary);
+        }
+
+        html, body {
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
         .khoj-configure {
             display: grid;
             grid-template-columns: 1fr;
@@ -54,5 +96,92 @@
             width: min(60vw, 150px);
             justify-self: center;
         }
+
+        .page {
+            display: grid;
+            grid-auto-flow: row;
+            gap: 32px;
+        }
+        .section {
+            display: grid;
+            justify-self: center;
+        }
+        .section-title {
+            margin: 0;
+            padding: 0 0 16px 0;
+            font-size: 32;
+            font-weight: normal;
+        }
+        .section-cards {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            justify-items: start;
+        }
+        .card {
+            display: grid;
+            grid-template-rows: repeat(3, 1fr);
+            gap: 8px;
+            padding: 24px 16px;
+            width: 320px;
+            height: 160px;
+            background: white;
+            border: 1px solid rgb(229, 229, 229);
+            border-radius: 4px;
+            box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .card-title-row {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            padding: 0;
+            gap: 12px;
+        }
+        .card-icon {
+            width: 40px;
+            height: 40px;
+        }
+        .card-title {
+            font-size: 20px;
+            font-weight: normal;
+            margin: 0;
+            padding: 0;
+            align-self: center;
+        }
+        .card-title-text {
+            vertical-align: middle;
+        }
+        .card-description {
+            margin: 0;
+            color: grey;
+            font-size: 16px;
+        }
+        .card-button-row {
+            display: grid;
+            grid-template-columns: auto;
+            text-align: right;
+        }
+        .card-button {
+            border: none;
+            font-weight: bold;
+            color: rgb(64,64,64);
+            background: transparent;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 0;
+            padding: 0;
+            height: 32px;
+            text-align: right;
+        }
+        .primary-button {
+            background-color: var(--evening-sun);
+            border: none;
+            color: white;
+            padding: 15px 32px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+        }
     </style>
 </html>
diff --git a/src/khoj/interface/web/base_data_integration.html b/src/khoj/interface/web/base_data_integration.html
deleted file mode 100644
index 7b732a36..00000000
--- a/src/khoj/interface/web/base_data_integration.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-  	<head>
-    	<title>Khoj: Data Settings</title>
-    	<link rel=”stylesheet” href=”static/styles.css”>
-    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
-  	</head>
-  	<body class="data-integration">
-    	<header class=”header”>
-      	<h1>Configure your data integrations for Khoj</h1>
-    	</header>
-		<a href="/config">Go back</a>
-
-    	<div class=”content”>
-      		{% block content %}
-      		{% endblock %}
-    	</div>
-
-    	<footer class=”footer”>
-    	</footer>
-  	</body>
-	<style>
-		body.data-integration {
-			padding: 0 10%
-		}
-	</style>
-</html>
diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index df2d5fa7..f10cce49 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -1,5 +1,6 @@
 {% extends "base_config.html" %}
 {% block content %}
+
 <div class="page">
     <div class="section">
         <h2 class="section-title">Plugins</h2>
@@ -13,7 +14,10 @@
                 <p class="card-description">Set repositories for Khoj to index</p>
                 </div>
                 <div class="card-action-row">
-                <button class="card-button" onclick="window.location.href='/config/content_type/github';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
+                    <button class="card-button" onclick="window.location.href='/config/content_type/github';">
+                        Setup
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
+                    </button>
                 </div>
             </div>
             <div class="card">
@@ -22,22 +26,28 @@
                     <h3 class="card-title">Markdown</h3>
                 </div>
                 <div class="card-description-row">
-                <p class="card-description">Set markdown files for Khoj to index</p>
+                    <p class="card-description">Set markdown files for Khoj to index</p>
                 </div>
                 <div class="card-action-row">
-                <button class="card-button" onclick="window.location.href='/config/content_type/markdown';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
+                    <button class="card-button" onclick="window.location.href='/config/content_type/markdown';">
+                        Setup
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
+                    </button>
                 </div>
             </div>
             <div class="card">
                 <div class="card-title-row">
-                    <img class="card-icon" src="/static/assets/icons/orgmode.svg" alt="org-mode">
-                    <h3 class="card-title">Org-Mode</h3>
+                    <img class="card-icon" src="/static/assets/icons/org.svg" alt="org">
+                    <h3 class="card-title">Org</h3>
                 </div>
                 <div class="card-description-row">
-                <p class="card-description">Set org-mode files for Khoj to index</p>
+                <p class="card-description">Set org files for Khoj to index</p>
                 </div>
                 <div class="card-action-row">
-                <button class="card-button" onclick="window.location.href='/config/content_type/org';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
+                    <button class="card-button" onclick="window.location.href='/config/content_type/org';">
+                        Setup
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
+                    </button>
                 </div>
             </div>
             <div class="card">
@@ -49,7 +59,10 @@
                 <p class="card-description">Set PDF files for Khoj to index</p>
                 </div>
                 <div class="card-action-row">
-                <button class="card-button" onclick="window.location.href='/config/content_type/pdf';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
+                    <button class="card-button" onclick="window.location.href='/config/content_type/pdf';">
+                        Setup
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
+                    </button>
                 </div>
             </div>
         </div>
@@ -66,104 +79,15 @@
                 <p class="card-description">Setup Khoj Chat</p>
                 </div>
                 <div class="card-action-row">
-                <button class="card-button" onclick="window.location.href='/config/processor/conversation/';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
+                <button class="card-button" onclick="window.location.href='/config/processor/conversation';">Setup <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
                 </div>
             </div>
         </div>
     </div>
     <div class="section">
-        <button id="save" type="submit">Save</button>
+        <button id="save" type="submit">⚙️ Configure</button>
     </div>
 </div>
-<style>
-:root {
-    --night-black: #282c34;
-    --evening-sun: #fbb912;
-}
-.page {
-    display: grid;
-    grid-auto-flow: row;
-    gap: 32px;
-}
-.section {
-    justify-self: center;
-}
-.section-title {
-    margin: 0;
-    padding: 0 0 16px 0;
-    font-size: 32;
-    font-weight: normal;
-}
-.section-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-    justify-items: start;
-}
-.card {
-    display: grid;
-    grid-template-rows: repeat(3, 1fr);
-    gap: 8px;
-    padding: 24px 16px;
-    width: 320px;
-    height: 160px;
-    background: white;
-    border: 1px solid rgb(229, 229, 229);
-    border-radius: 4px;
-    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
-    overflow: hidden;
-}
-.card-title-row {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    padding: 0;
-    gap: 12px;
-}
-.card-icon {
-    width: 40px;
-    height: 40px;
-}
-.card-title {
-    font-size: 20px;
-    font-weight: normal;
-    margin: 0;
-    padding: 0;
-    align-self: center;
-}
-.card-description {
-    margin: 0;
-    color: grey;
-    font-size: 16px;
-}
-.card-button-row {
-    display: grid;
-    grid-template-columns: auto;
-    text-align: right;
-}
-.card-button {
-    border: none;
-    font-weight: bold;
-    color: rgb(64,64,64);
-    background: transparent;
-    font-size: 16px;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    height: 32px;
-    text-align: right;
-}
-
-button#save {
-    background-color: var(--evening-sun);
-    border: none;
-    color: white;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-}
-</style>
 <script>
     var regenerate = document.getElementById("save");
     regenerate.addEventListener("click", function(event) {
diff --git a/src/khoj/interface/web/content_type_github_input.html b/src/khoj/interface/web/content_type_github_input.html
index 029b434a..6c715b82 100644
--- a/src/khoj/interface/web/content_type_github_input.html
+++ b/src/khoj/interface/web/content_type_github_input.html
@@ -1,64 +1,73 @@
-{% extends "base_data_integration.html" %}
+{% extends "base_config.html" %}
 {% block content %}
-<h2>Github</h2>
-<form id="config-form">
-    <div id="success" style="display: none;"></div>
-    <table>
-        <tr>
-            <td>
-                <label for="pat-token">Personal Access Token</label>
-            </td>
-            <td>
-                <input type="text" id="pat-token" name="pat" value="{{ current_config['pat_token'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="repo-owner">Repository Owner</label>
-            </td>
-            <td>
-                <input type="text" id="repo-owner" name="repo_owner" value="{{ current_config['repo_owner'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="repo-name">Repository Name</label>
-            </td>
-            <td>
-                <input type="text" id="repo-name" name="repo_name" value="{{ current_config['repo_name'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="repo-branch">Repository Branch</label>
-            </td>
-            <td>
-                <input type="text" id="repo-branch" name="repo_branch" value="{{ current_config['repo_branch'] }}">
-            </td>
-        </tr>
-    </table>
-    <h4>You probably don't need to edit these.</h4>
+<div class="page">
+    <div class="section">
+        <h2 class="section-title">
+            <img class="card-icon" src="/static/assets/icons/github.svg" alt="Github">
+            <span class="card-title-text">Github</span>
+        </h2>
+        <form>
+            <div id="success" style="display: none;"></div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="pat-token">Personal Access Token</label>
+                    </td>
+                    <td>
+                        <input type="text" id="pat-token" name="pat" value="{{ current_config['pat_token'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="repo-owner">Repository Owner</label>
+                    </td>
+                    <td>
+                        <input type="text" id="repo-owner" name="repo_owner" value="{{ current_config['repo_owner'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="repo-name">Repository Name</label>
+                    </td>
+                    <td>
+                        <input type="text" id="repo-name" name="repo_name" value="{{ current_config['repo_name'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="repo-branch">Repository Branch</label>
+                    </td>
+                    <td>
+                        <input type="text" id="repo-branch" name="repo_branch" value="{{ current_config['repo_branch'] }}">
+                    </td>
+                </tr>
+            </table>
+            <h4>You probably don't need to edit these.</h4>
 
-    <table>
-        <tr>
-            <td>
-                <label for="compressed-jsonl">Compressed JSONL (Output)</label>
-            </td>
-            <td>
-                <input type="text" id="compressed-jsonl" name="compressed-jsonl" value="{{ current_config['compressed_jsonl'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="embeddings-file">Embeddings File (Output)</label>
-            </td>
-            <td>
-                <input type="text" id="embeddings-file" name="embeddings-file" value="{{ current_config['embeddings_file'] }}">
-            </td>
-        </tr>
-    </table>
-    <button id="submit" type="submit">Submit</button>
-</form>
+            <table>
+                <tr>
+                    <td>
+                        <label for="compressed-jsonl">Compressed JSONL (Output)</label>
+                    </td>
+                    <td>
+                        <input type="text" id="compressed-jsonl" name="compressed-jsonl" value="{{ current_config['compressed_jsonl'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="embeddings-file">Embeddings File (Output)</label>
+                    </td>
+                    <td>
+                        <input type="text" id="embeddings-file" name="embeddings-file" value="{{ current_config['embeddings_file'] }}">
+                    </td>
+                </tr>
+            </table>
+            <div class="section">
+                <button id="submit" type="submit">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
 <script>
     submit.addEventListener("click", function(event) {
         event.preventDefault();
diff --git a/src/khoj/interface/web/content_type_input.html b/src/khoj/interface/web/content_type_input.html
index 6110e5bd..b7441ac9 100644
--- a/src/khoj/interface/web/content_type_input.html
+++ b/src/khoj/interface/web/content_type_input.html
@@ -1,75 +1,82 @@
-{% extends "base_data_integration.html" %}
+{% extends "base_config.html" %}
 {% block content %}
-<h2>{{ content_type }}</h2>
-<form id="config-form">
-    <div id="success" style="display: none;" ></div>
-    <table>
-        <tr>
-            <td>
-                <label for="input-files">Input Files</label>
-            </td>
-            <td id="input-files-cell">
-                {% if current_config['input_files'] is none %}
-                    <input type="text" id="input-files" name="input-files">
-                {% else %}
-                    {% for input_file in current_config['input_files'] %}
-                        <input type="text" id="input-files" name="input-files" value="{{ input_file }}">
-                    {% endfor %}
-                {% endif %}
-            </td>
-            <td>
-                <button type="button" id="input-files-button">Add</button>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="input-filter">Input Filter</label>
-            </td>
-            <td id="input-filter-cell">
-                {% if current_config['input_filter'] is none %}
-                    <input type="text" id="input-filter" name="input-filter">
-                {% else %}
-                    {% for input_filter in current_config['input_filter'] %}
-                        <input type="text" id="input-filter" name="input-filter" value="{{ input_filter }}">
-                    {% endfor %}
-                {% endif %}
-            </td>
-            <td>
-                <button type="button" id="input-filter-button">Add</button>
-            </td>
-        </tr>
-    </table>
+<div class="page">
+    <div class="section">
+        <h2 class="section-title">
+            <img class="card-icon" src="/static/assets/icons/{{ content_type }}.svg" alt="{{ content_type|capitalize }}">
+            <span class="card-title-text">{{ content_type|capitalize }}</span>
+        </h2>
+        <form id="config-form">
+            <div id="success" style="display: none;" ></div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="input-files">Input Files</label>
+                    </td>
+                    <td id="input-files-cell">
+                        {% if current_config['input_files'] is none %}
+                            <input type="text" id="input-files" name="input-files">
+                        {% else %}
+                            {% for input_file in current_config['input_files'] %}
+                                <input type="text" id="input-files" name="input-files" value="{{ input_file }}">
+                            {% endfor %}
+                        {% endif %}
+                    </td>
+                    <td>
+                        <button type="button" id="input-files-button">Add</button>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="input-filter">Input Filter</label>
+                    </td>
+                    <td id="input-filter-cell">
+                        {% if current_config['input_filter'] is none %}
+                            <input type="text" id="input-filter" name="input-filter">
+                        {% else %}
+                            {% for input_filter in current_config['input_filter'] %}
+                                <input type="text" id="input-filter" name="input-filter" value="{{ input_filter }}">
+                            {% endfor %}
+                        {% endif %}
+                    </td>
+                    <td>
+                        <button type="button" id="input-filter-button">Add</button>
+                    </td>
+                </tr>
+            </table>
 
-    <h4>You probably don't need to edit these.</h4>
+            <h4>You probably don't need to edit these.</h4>
 
-    <table>
-        <tr>
-            <td>
-                <label for="compressed-jsonl">Compressed JSONL (Output)</label>
-            </td>
-            <td>
-                <input type="text" id="compressed-jsonl" name="compressed-jsonl" value="{{ current_config['compressed_jsonl'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="embeddings-file">Embeddings File (Output)</label>
-            </td>
-            <td>
-                <input type="text" id="embeddings-file" name="embeddings-file" value="{{ current_config['embeddings_file'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="index-heading-entries">Index Heading Entries</label>
-            </td>
-            <td>
-                <input type="text" id="index-heading-entries" name="index-heading-entries" value="{{ current_config['index_heading_entries'] }}">
-            </td>
-        </tr>
-    </table>
-    <button id="submit" type="submit">Submit</button>
-</form>
+            <table>
+                <tr>
+                    <td>
+                        <label for="compressed-jsonl">Compressed JSONL (Output)</label>
+                    </td>
+                    <td>
+                        <input type="text" id="compressed-jsonl" name="compressed-jsonl" value="{{ current_config['compressed_jsonl'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="embeddings-file">Embeddings File (Output)</label>
+                    </td>
+                    <td>
+                        <input type="text" id="embeddings-file" name="embeddings-file" value="{{ current_config['embeddings_file'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="index-heading-entries">Index Heading Entries</label>
+                    </td>
+                    <td>
+                        <input type="text" id="index-heading-entries" name="index-heading-entries" value="{{ current_config['index_heading_entries'] }}">
+                    </td>
+                </tr>
+            </table>
+            <button id="submit" type="submit">Save</button>
+        </form>
+    </div>
+</div>
 <script>
     function addButtonEventListener(fieldName) {
         var button = document.getElementById(fieldName + "-button");
diff --git a/src/khoj/interface/web/processor_conversation_input.html b/src/khoj/interface/web/processor_conversation_input.html
index fd499574..fa5885a5 100644
--- a/src/khoj/interface/web/processor_conversation_input.html
+++ b/src/khoj/interface/web/processor_conversation_input.html
@@ -1,49 +1,56 @@
-{% extends "base_processor_integration.html" %}
+{% extends "base_config.html" %}
 {% block content %}
-<h2>Conversation</h2>
-<form id="config-form">
-    <div id="success" style="display: none;" ></div>
-    <table>
-        <tr>
-            <td>
-                <label for="openai-api-key">OpenAI API key</label>
-            </td>
-            <td>
-                <input type="text" id="openai-api-key" name="openai-api-key" value="{{ current_config['openai_api_key'] }}">
-            </td>
-        </tr>
-    </table>
+<div class="page">
+    <div class="section">
+        <h2 class="section-title">
+            <img class="card-icon" src="/static/assets/icons/chat.svg" alt="Chat">
+            <span class="card-title-text">Chat</span>
+        </h2>
+        <form id="config-form">
+            <div id="success" style="display: none;" ></div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="openai-api-key">OpenAI API key</label>
+                    </td>
+                    <td>
+                        <input type="text" id="openai-api-key" name="openai-api-key" value="{{ current_config['openai_api_key'] }}">
+                    </td>
+                </tr>
+            </table>
 
-    <h4>You probably don't need to edit these.</h4>
+            <h4>You probably don't need to edit these.</h4>
 
-    <table>
-        <tr>
-            <td>
-                <label for="conversation-logfile">Conversation Logfile</label>
-            </td>
-            <td>
-                <input type="text" id="conversation-logfile" name="conversation-logfile" value="{{ current_config['conversation_logfile'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="model">Model</label>
-            </td>
-            <td>
-                <input type="text" id="model" name="model" value="{{ current_config['model'] }}">
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <label for="chat-model">Chat Model</label>
-            </td>
-            <td>
-                <input type="text" id="chat-model" name="chat-model" value="{{ current_config['chat_model'] }}">
-            </td>
-        </tr>
-    </table>
-    <button id="submit" type="submit">Submit</button>
-</form>
+            <table>
+                <tr>
+                    <td>
+                        <label for="conversation-logfile">Conversation Logfile</label>
+                    </td>
+                    <td>
+                        <input type="text" id="conversation-logfile" name="conversation-logfile" value="{{ current_config['conversation_logfile'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="model">Model</label>
+                    </td>
+                    <td>
+                        <input type="text" id="model" name="model" value="{{ current_config['model'] }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="chat-model">Chat Model</label>
+                    </td>
+                    <td>
+                        <input type="text" id="chat-model" name="chat-model" value="{{ current_config['chat_model'] }}">
+                    </td>
+                </tr>
+            </table>
+            <button id="submit" type="submit">Save</button>
+        </form>
+    </div>
+</div>
 <script>
     submit.addEventListener("click", function(event) {
         event.preventDefault();
