diff --git a/index.html b/index.html
index 8b13789..0c2f168 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,70 @@
+<!doctype html><html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>4ev.link — tiny links that last</title><meta name="description" content="Free: random short link • Paid: custom URLs (coming soon).">
+<link rel="icon" href="data:,"><style>[x-cloak]{display:none!important}</style>
+<script src="https://cdn.tailwindcss.com"></script>
+<script>tailwind.config={theme:{extend:{fontFamily:{sans:['Inter','ui-sans-serif','system-ui','-apple-system','Segoe UI','Roboto','Arial']}}}}</script>
+<script src="//unpkg.com/alpinejs" defer></script>
+<script src="https://unpkg.com/lucide@latest" defer></script>
+</head><body class="bg-white text-gray-900 antialiased">
+<header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
+  <nav class="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
+    <a href="/" class="font-semibold tracking-tight text-xl">4ev.link</a>
+    <div class="flex items-center gap-4">
+      <a href="/login" class="text-sm text-gray-700 hover:text-black">Log in</a>
+      <a href="/signup" class="text-sm bg-black text-white px-3 py-1.5 rounded-md hover:bg-gray-900">Sign up</a>
+    </div>
+  </nav>
+</header>
 
+<main class="max-w-3xl mx-auto px-4 pt-16 pb-24" x-data="{t:'',o:'',e:'',l:!1,async s(){this.e='',this.o='';let u=this.t.trim();try{new URL(u)}catch(_){this.e='Enter a valid URL';return}this.l=!0;try{let r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:u})});if(!r.ok)throw 0;let j=await r.json();this.o=j.shortUrl;this.$nextTick(()=>lucide?.createIcons())}catch(_){this.e='Something went wrong. Try again.'}finally{this.l=!1}},async c(){try{await navigator.clipboard.writeText(this.o);let b=this.$refs.copy;b?.classList.add('text-green-600');setTimeout(()=>b?.classList.remove('text-green-600'),900)}catch(_){}}">
+  <section class="text-center">
+    <h1 class="text-3xl sm:text-4xl font-semibold tracking-tight">Get ur 4ev.link <span class="text-red-500">❤</span></h1>
+    <p class="mt-3 text-gray-600 text-sm">
+      Free: random short link • Paid: custom URLs
+      <span class="ml-1 inline-flex items-center gap-1 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-700">coming soon</span>
+    </p>
+  </section>
+
+  <section class="mt-8">
+    <form @submit.prevent="s()" class="flex items-stretch gap-2">
+      <input x-model="t" type="url" inputmode="url" placeholder="https://example.com/very/long/link"
+        class="w-full rounded-md border border-gray-300 bg-white px-3 py-3 text-[15px] placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900/10 focus:border-gray-400" required>
+      <button type="submit" :disabled="l"
+        class="shrink-0 inline-flex items-center gap-2 rounded-md bg-black text-white px-4 py-3 text-sm font-medium hover:bg-gray-900 disabled:opacity-50 disabled:cursor-not-allowed">
+        <i data-lucide="link" class="w-4 h-4"></i><span x-text="l?'Shortening…':'Shorten'"></span>
+      </button>
+    </form>
+    <p x-show="e" x-text="e" class="mt-2 text-sm text-red-600" role="alert"></p>
+  </section>
+
+  <section x-show="o" x-cloak class="mt-6">
+    <div class="rounded-md border border-gray-200 bg-white p-4 flex items-center justify-between">
+      <a :href="o" target="_blank" rel="noopener" class="font-medium text-gray-900 hover:underline truncate max-w-[75%]">
+        <i data-lucide="sparkles" class="inline w-4 h-4 mr-1 text-gray-500"></i><span x-text="o"></span>
+      </a>
+      <div class="flex items-center gap-2">
+        <a :href="o" target="_blank" rel="noopener" class="inline-flex items-center gap-1 text-sm text-gray-700 hover:text-black px-2 py-1 rounded-md border border-gray-200">
+          <i data-lucide="external-link" class="w-4 h-4"></i><span>Open</span>
+        </a>
+        <button @click="c()" class="inline-flex items-center gap-1 text-sm text-gray-700 hover:text-black px-2 py-1 rounded-md border border-gray-200">
+          <i data-lucide="copy" class="w-4 h-4" x-ref="copy"></i><span>Copy</span>
+        </button>
+      </div>
+    </div>
+    <p class="mt-2 text-xs text-gray-500">Free plan generates random slugs. Custom URLs for paid — coming soon.</p>
+  </section>
+</main>
+
+<footer class="border-t border-gray-200">
+  <div class="max-w-3xl mx-auto px-4 py-8 text-sm text-gray-600 flex items-center justify-between">
+    <span>© <span x-text="new Date().getFullYear()"></span> 4ev.link</span>
+    <div class="flex gap-4">
+      <a href="https://github.com/4ev-link/4ev.link" class="hover:text-black inline-flex items-center gap-1"><i data-lucide="github" class="w-4 h-4"></i>GitHub</a>
+      <a href="/pricing" class="hover:text-black">Pricing</a>
+    </div>
+  </div>
+</footer>
+
+<script>document.addEventListener('alpine:init',()=>{lucide?.createIcons()})</script>
+</body></html>
