diff --git a/src/routes/(app)/links/+page.svelte b/src/routes/(app)/links/+page.svelte
index 8695809..151fd38 100644
--- a/src/routes/(app)/links/+page.svelte
+++ b/src/routes/(app)/links/+page.svelte
@@ -1,12 +1,66 @@
 <script lang="ts">
 	import type { PageData } from './$types'
 	import { Separator } from '$lib/components/ui/separator'
+	import { Button, buttonVariants } from '$lib/components/ui/button'
+	import * as Dialog from '$lib/components/ui/dialog'
+	import { Input } from '$lib/components/ui/input'
+	import { Label } from '$lib/components/ui/label'
+	import { Loader2, PlusCircle } from 'lucide-svelte'
+	import { invalidateAll } from '$app/navigation'
 
 	export let data: PageData
-	console.log('data', data)
+
+	let dialogOpen = false
+	let inputLink = ''
+	let isLoading = false
+	const addShortener = async () => {
+		isLoading = true
+
+		await fetch('/api/shortener', {
+			method: 'post',
+			body: JSON.stringify({ link: inputLink }),
+		})
+
+		isLoading = false
+		await invalidateAll()
+		dialogOpen = false
+	}
+	$: console.log(inputLink)
 </script>
 
-<div class="p-8 text-4xl font-bold">Links</div>
+<div class="flex justify-between p-8">
+	<div class="text-4xl font-bold">Links</div>
+	<Dialog.Root bind:open={dialogOpen}>
+		<Dialog.Trigger
+			class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}
+		>
+			<PlusCircle />
+			Add Shortner
+		</Dialog.Trigger>
+		<Dialog.Content class="sm:max-w-[425px]">
+			<Dialog.Header>
+				<Dialog.Title>Add Shortener</Dialog.Title>
+				<Dialog.Description>
+					Create A New Shortner Here. Click Add To Save.
+				</Dialog.Description>
+			</Dialog.Header>
+			<div class="grid gap-4 py-4">
+				<div class="grid grid-cols-4 items-center gap-4">
+					<Label class="text-right">Link</Label>
+					<Input id="name" bind:value={inputLink} class="col-span-3" />
+				</div>
+			</div>
+			<Dialog.Footer>
+				<Button on:click={addShortener} class="flex gap-2">
+					{#if isLoading}
+						<Loader2 class="animate-spin" />
+					{/if}
+					Add</Button
+				>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+</div>
 <Separator />
 
 {#if data.shorteners.length > 0}
diff --git a/src/routes/api/shortener/+server.ts b/src/routes/api/shortener/+server.ts
new file mode 100644
index 0000000..04bbce1
--- /dev/null
+++ b/src/routes/api/shortener/+server.ts
@@ -0,0 +1,61 @@
+import { z } from 'zod'
+import type { RequestHandler } from './$types'
+import { db } from '$lib/db'
+import { getUserFromSessionToken } from '$lib/server/auth'
+import { shortener } from '$lib/db/schema'
+import { nanoid } from 'nanoid'
+
+export const GET: RequestHandler = async () => {
+	return new Response()
+}
+
+const shortenerInsertSchema = z.object({
+	link: z.string().url(),
+})
+
+export const POST: RequestHandler = async (event) => {
+	const body = await event.request.json()
+
+	const shortenerInsert = shortenerInsertSchema.safeParse(body)
+
+	if (!shortenerInsert.success) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+				message: 'Invalid Link',
+			}),
+		)
+	}
+
+	const token = event.cookies.get('token')
+
+	if (!token) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+				message: 'Invalid User',
+			}),
+		)
+	}
+
+	const user = await getUserFromSessionToken(token)
+
+	if (!user) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+				message: 'Invalid User',
+			}),
+		)
+	}
+
+	const code = nanoid(8)
+
+	await db.insert(shortener).values({
+		link: shortenerInsert.data.link,
+		userId: user,
+		code: code,
+	})
+
+	return new Response(JSON.stringify(body))
+}