diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..3cebe01
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pandektes Tech Challenge</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+</head>
+
+<body class="bg-slate-900 text-slate-50 min-h-screen flex items-center justify-center m-0">
+    <div
+        class="bg-slate-800/70 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 w-full max-w-xl text-center shadow-2xl">
+        <h1 class="text-3xl font-bold mb-2">Pandektes Tech Challenge</h1>
+        <p class="text-slate-400 mb-8">PDF/HTML metadata extraction</p>
+
+        <div class="mb-8">
+            <input type="file" id="file-input" accept=".pdf,.html"
+                class="block w-full text-sm text-slate-400 file:mr-4 file:py-3 file:px-6 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-indigo-500/10 file:text-indigo-400 hover:file:bg-indigo-500/20 cursor-pointer transition-colors" />
+        </div>
+
+        <button id="upload-btn" onclick="handleUpload()"
+            class="bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-4 px-8 rounded-xl w-full transition-all disabled:bg-slate-700 disabled:cursor-not-allowed shadow-lg shadow-indigo-500/20">
+            Upload and Extract
+        </button>
+
+        <div class="mt-8 border-t border-white/5 pt-8">
+            <div class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-3">Lookup Previous</div>
+            <div class="flex space-x-2">
+                <input id="search-input" placeholder="ID or Case Number"
+                    class="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm grow focus:outline-none focus:border-indigo-500 transition-colors" />
+                <button onclick="handleSearch()"
+                    class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-xl text-sm transition-colors grow-0 whitespace-nowrap">Find
+                    Case</button>
+            </div>
+        </div>
+
+        <div id="result-box"
+            class="mt-8 hidden text-left bg-indigo-500/5 rounded-2xl border border-indigo-500/10 overflow-hidden shadow-inner">
+            <div class="flex items-center justify-between px-6 py-4 bg-white/5 border-b border-white/5">
+                <div id="result-status" class="text-sm font-bold flex items-center"></div>
+                <div id="result-actions"></div>
+            </div>
+            <pre id="result-data"
+                class="p-6 text-[11px] font-mono max-h-96 overflow-y-auto text-slate-400 no-scrollbar"></pre>
+        </div>
+    </div>
+
+    <div id="tray-view"
+        class="fixed bottom-6 right-6 flex flex-col-reverse space-y-reverse space-y-4 z-50 w-80 max-h-[80vh] overflow-y-auto no-scrollbar">
+    </div>
+
+    <script>
+        const activeJobs = {};
+
+        async function fetchGraphQL(query, variables = {}, isFileUpload = false) {
+        }
+
+        async function handleUpload() {
+
+        }
+
+        function createJobTerminal(jobId, filename) {
+
+        }
+
+        function renderResultView(jobId) {
+
+        }
+
+        async function handleSearch() {
+
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
