diff --git a/.gitignore b/.gitignore
index 266478df..4bb1a18e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,6 @@ tests/data/embeddings
 src/.data
 .vscode
 *.gz
-*.pt
\ No newline at end of file
+*.pt
+/src/interface/web/*.jpg
+/src/interface/web/*.png
\ No newline at end of file
diff --git a/src/interface/web/index.html b/src/interface/web/index.html
new file mode 100644
index 00000000..611c1f55
--- /dev/null
+++ b/src/interface/web/index.html
@@ -0,0 +1,78 @@
+<html lang="en">
+    <script>
+        function render_image(item) {
+            return `<a href="${item.entry}">
+                <img src="${item.entry}"
+                    title="Effective Score: ${item.score}, Meta: ${item.metadata_score}, Image: ${item.image_score}"
+                    class="image">
+            </a>`
+        }
+
+        function render_json(data) {
+            return `<pre id="json">${JSON.stringify(data, null, 2)}</pre>`
+        }
+
+        function search() {
+            query = document.getElementById("query").value;
+            type = document.getElementById("type").value;
+            console.log(query, type);
+            fetch(`/search?q=${query}&t=${type}`)
+                .then(response => response.json())
+                .then(data => {
+                    console.log(data);
+                    document.getElementById("results").innerHTML =
+                        type == "image"
+                        ? data.map(render_image).join('')
+                        : render_json(data);
+                });
+            }
+    </script>
+
+    <body>
+        <!--Add Text Box To Enter Query -->
+        <input id="query" type="text" placeholder="Search">
+
+        <!--Add Dropdown to Select Query Type.
+            Query Types can be: notes, ledger, images, music.
+            Set Default type to images-->
+        <select id="type">
+            <option value="image">Image</option>
+            <option value="notes">Notes</option>
+            <option value="ledger">Ledger</option>
+            <option value="music">Music</option>
+        </select>
+
+        <!--Add Button To Search -->
+        <button id="search" onclick="search()">Search</button>
+
+        <div id="results"></div>
+    </body>
+
+    <style>
+        body {
+            display: grid;
+            grid-template-columns: 1fr min(65ch, 100%) 1fr;
+            margin: 0px;
+            padding: 0px;
+            text-align: center;
+        }
+        body > * {
+            grid-column: 2;
+            margin: 10px;
+        }
+        #search {
+            border-radius: 5px;
+            border: 1px solid #ccc;
+        }
+        .image {
+            width: 20vw;
+            display: inline-grid;
+            border-radius: 10px;
+            border: 1px solid #ccc;
+        }
+        #json {
+            white-space: pre-wrap;
+        }
+    </style>
+
+</html>
diff --git a/src/main.py b/src/main.py
index 68d0c401..34e73c4d 100644
--- a/src/main.py
+++ b/src/main.py
@@ -1,12 +1,12 @@
 # Standard Packages
-import sys, json, yaml
+import sys, json, yaml, os
 from typing import Optional
 
 # External Packages
 import uvicorn
 import torch
 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
@@ -27,10 +27,16 @@ processor_config = ProcessorConfigModel()
 config_file = ""
 verbose = 0
 app = FastAPI()
+web_directory = f'src/interface/web/'
 
+app.mount("/static", StaticFiles(directory=web_directory), name="static")
 app.mount("/views", StaticFiles(directory="views"), name="views")
 templates = Jinja2Templates(directory="views/")
 
+@app.get("/", response_class=FileResponse)
+def index():
+    return FileResponse(web_directory + "index.html")
+
 @app.get('/ui', response_class=HTMLResponse)
 def ui(request: Request):
     return templates.TemplateResponse("config.html", context={'request': request})
