diff --git a/frontend/src/routes/(app)/links/+page.server.ts b/frontend/src/routes/(app)/links/+page.server.ts
index 7e65b17..fbfd5d7 100644
--- a/frontend/src/routes/(app)/links/+page.server.ts
+++ b/frontend/src/routes/(app)/links/+page.server.ts
@@ -4,13 +4,33 @@ import type { PageServerLoad } from './$types'
 export const load = (async (event) => {
 	const user = event.locals.userObject
 
+	const project_uuid = event.url.searchParams.get('project')
+
+	let project_id: number | undefined
+
+	if (project_uuid) {
+		try {
+			const project = await db.query.project.findFirst({
+				where: (project, { eq }) => eq(project.uuid, project_uuid),
+			})
+			project_id = project?.id
+		} catch (error) {
+			project_id = undefined
+		}
+	}
+
 	const shorteners = await db.query.shortener.findMany({
 		with: {
 			visitor: true,
 			project: true,
 		},
 		where: (shortener, { eq, and, isNull }) =>
-			and(eq(shortener.userId, user.id), isNull(shortener.projectId)),
+			and(
+				eq(shortener.userId, user.id),
+				project_id
+					? eq(shortener.projectId, project_id)
+					: isNull(shortener.projectId),
+			),
 	})
 
 	const projects = await db.query.project.findMany()
diff --git a/frontend/src/routes/(app)/projects/+page.svelte b/frontend/src/routes/(app)/projects/+page.svelte
index 5926950..3513f90 100644
--- a/frontend/src/routes/(app)/projects/+page.svelte
+++ b/frontend/src/routes/(app)/projects/+page.svelte
@@ -82,7 +82,7 @@
 {#if data.projects.length > 0}
 	<div class="flex flex-col gap-4 overflow-scroll p-4">
 		{#each data.projects as project}
-			<a href={'/projects/' + project.uuid}>
+			<a href={'/links?project=' + project.uuid}>
 				<Card.Root
 					class="hover:bg-secondary w-full max-w-[500px] hover:cursor-pointer">
 					<Card.Header>
diff --git a/frontend/src/routes/(app)/projects/[uuid]/+page.server.ts b/frontend/src/routes/(app)/projects/[uuid]/+page.server.ts
deleted file mode 100644
index 0761246..0000000
--- a/frontend/src/routes/(app)/projects/[uuid]/+page.server.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { db } from '$lib/db'
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
-
-export const load = (async (event) => {
-	const uuid = event.params.uuid
-
-	const user = event.locals.userObject
-
-	try {
-		const project = await db.query.project.findFirst({
-			where: (project, { eq }) => eq(project.uuid, uuid),
-		})
-
-		if (!project) {
-			throw redirect(303, '/projects')
-		}
-
-		const shorteners = await db.query.shortener.findMany({
-			with: {
-				visitor: true,
-			},
-			where: (shortener, { eq, and }) =>
-				and(
-					eq(shortener.userId, user.id),
-					eq(shortener.projectId, project.id),
-				),
-		})
-
-		const projects = await db.query.project.findMany()
-
-		return { project, shorteners, projects }
-	} catch (error) {
-		throw redirect(303, '/projects')
-	}
-}) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/projects/[uuid]/+page.svelte b/frontend/src/routes/(app)/projects/[uuid]/+page.svelte
deleted file mode 100644
index 4776be3..0000000
--- a/frontend/src/routes/(app)/projects/[uuid]/+page.svelte
+++ /dev/null
@@ -1,222 +0,0 @@
-<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 * as Card from '$lib/components/ui/card'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
-	import * as Select from '$lib/components/ui/select'
-	import { Input } from '$lib/components/ui/input'
-	import { Label } from '$lib/components/ui/label'
-	import {
-		BarChart,
-		ExternalLink,
-		Loader2,
-		MoreVertical,
-		PlusCircle,
-	} from 'lucide-svelte'
-	import { goto, invalidateAll } from '$app/navigation'
-
-	export let data: PageData
-
-	let dialogOpen = false
-	let inputLink = ''
-	let isLoading = false
-
-	const addShortener = async () => {
-		isLoading = true
-
-		const response = await fetch('/api/shortener', {
-			method: 'post',
-			body: JSON.stringify({ link: inputLink }),
-		})
-
-		const responseData = await response.json()
-
-		isLoading = false
-
-		if (responseData.success) {
-			await invalidateAll()
-			dialogOpen = false
-		}
-	}
-
-	let editDialogOpen = false
-	let editShortenerCode = ''
-	let editShortenerLink = ''
-	let editShortenerCategory: any = undefined
-	let isEditLoading = false
-
-	const openEditDialog = (code: string, link: string) => {
-		editDialogOpen = true
-		editShortenerCode = code
-		editShortenerLink = link
-		editShortenerCategory = undefined
-	}
-
-	const editShortener = async (code: string, link: string) => {
-		isEditLoading = true
-		await fetch(`/api/shortener/${code}`, {
-			method: 'put',
-			body: JSON.stringify({
-				link,
-				projectId: editShortenerCategory
-					? editShortenerCategory.value
-					: undefined,
-			}),
-		})
-		await invalidateAll()
-		isEditLoading = false
-		editDialogOpen = false
-	}
-
-	const deleteShortener = async (code: string) => {
-		await fetch(`/api/shortener/${code}`, {
-			method: 'delete',
-		})
-		await invalidateAll()
-	}
-</script>
-
-<div class="flex h-20 items-center justify-between p-4">
-	<div class="text-3xl 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}
-	<div class="flex flex-col gap-4 overflow-scroll p-4">
-		{#each data.shorteners as shortener}
-			<Card.Root class="w-full max-w-[500px]">
-				<Card.Header>
-					<Card.Title class="flex items-center gap-2">
-						<a
-							href={'https://' +
-								data.shortener_url +
-								'/' +
-								shortener.code}
-							target="_blank"
-							class="hover:underline">
-							{data.shortener_url + '/' + shortener.code}
-						</a>
-						<ExternalLink size={16} />
-					</Card.Title>
-					<Card.Description>{shortener.link}</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<div class="flex items-center justify-between">
-						<div class="flex gap-2">
-							<Button
-								class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm"
-								on:click={() => goto(`/links/${shortener.code}`)}>
-								<BarChart size={20} />
-								<div>
-									{shortener.visitor.length} visits
-								</div>
-							</Button>
-						</div>
-						<DropdownMenu.Root>
-							<DropdownMenu.Trigger>
-								<MoreVertical />
-							</DropdownMenu.Trigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Group>
-									<DropdownMenu.Item
-										on:click={() =>
-											openEditDialog(shortener.code, shortener.link)}>
-										Edit
-									</DropdownMenu.Item>
-									<DropdownMenu.Item
-										on:click={() => deleteShortener(shortener.code)}
-										class="text-destructive data-[highlighted]:bg-destructive">
-										Delete
-									</DropdownMenu.Item>
-								</DropdownMenu.Group>
-							</DropdownMenu.Content>
-						</DropdownMenu.Root>
-					</div>
-				</Card.Content>
-			</Card.Root>
-		{/each}
-	</div>
-{:else}
-	<div>No Data</div>
-{/if}
-
-<Dialog.Root bind:open={editDialogOpen}>
-	<Dialog.Content class="sm:max-w-[425px]">
-		<Dialog.Header>
-			<Dialog.Title>Edit Shortener {editShortenerCode}</Dialog.Title>
-			<Dialog.Description>
-				Edit Shortner Here. Click Save To Update.
-			</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={editShortenerLink}
-					class="col-span-3" />
-			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label class="text-right">Category</Label>
-				<Select.Root
-					bind:selected={editShortenerCategory}
-					multiple={false}>
-					<Select.Trigger class="col-span-3">
-						<Select.Value placeholder="Select a Category" />
-					</Select.Trigger>
-					<Select.Content>
-						{#each data.projects as project}
-							<Select.Item value={project.id}
-								>{project.name}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-		</div>
-		<Dialog.Footer>
-			<Button
-				on:click={() =>
-					editShortener(editShortenerCode, editShortenerLink)}
-				class="flex gap-2">
-				{#if isEditLoading}
-					<Loader2 class="animate-spin" />
-				{/if}
-				Save
-			</Button>
-		</Dialog.Footer>
-	</Dialog.Content>
-</Dialog.Root>