diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..f40c22d
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Link Shortener</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+</head>
+<body class="bg-gray-900 text-gray-200 antialiased flex items-center justify-center min-h-screen">
+<div class="w-full max-w-md p-8 space-y-6 bg-gray-800 rounded-lg shadow-lg" 
+     x-data="{u:'',s:'',e:'',l:false,c:false,
+     async go(){this.l=!0;this.s=this.e='';try{const r=await fetch('/api/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.u})});if(!r.ok)throw new Error(await r.text()||'Error');const d=await r.json();this.s=d.shortUrl;this.u=''}catch(t){this.e=t.message}finally{this.l=!1}},
+     copy(){navigator.clipboard.writeText(this.s);this.c=!0;setTimeout(()=>this.c=!1,2e3)}}">
+  <h1 class="text-3xl font-bold text-center text-white">Shorten a URL</h1>
+  <form @submit.prevent="go">
+    <div class="flex items-center border border-gray-600 rounded-md focus-within:ring-2 focus-within:ring-indigo-500">
+      <input type="url" x-model="u" placeholder="https://example.com" required class="w-full p-3 bg-transparent text-white placeholder-gray-400 focus:outline-none">
+      <button type="submit" :disabled="l" class="p-3 text-white bg-indigo-600 rounded-r-md hover:bg-indigo-700 disabled:bg-indigo-400 disabled:cursor-not-allowed">
+        <i x-show="!l" data-lucide="link-2" class="w-5 h-5"></i>
+        <i x-show="l" data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
+      </button>
+    </div>
+  </form>
+  <template x-if="s"><div class="p-4 mt-4 text-center bg-gray-700 border border-green-500 rounded-md">
+    <p class="text-sm text-gray-400">Your shortened link:</p>
+    <div class="flex items-center justify-center mt-2 space-x-2">
+      <a :href="s" target="_blank" class="text-lg font-mono text-green-400 hover:underline" x-text="s"></a>
+      <button @click="copy()" class="p-1 text-gray-400 hover:text-white">
+        <i x-show="!c" data-lucide="copy" class="w-5 h-5"></i>
+        <i x-show="c" data-lucide="check" class="w-5 h-5 text-green-400"></i>
+      </button>
+    </div>
+  </div></template>
+  <template x-if="e"><div class="p-4 mt-4 text-center text-red-400 bg-gray-700 border border-red-500 rounded-md" x-text="e"></div></template>
+</div>
+<script>lucide.createIcons()</script>
+</body>
+</html>
