diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..58ec3b0
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import { badgeVariants, type Variant } from ".";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/frontend/src/lib/components/ui/badge/index.ts b/frontend/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..2824b56
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	variants: {
+		variant: {
+			default:
+				"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+			secondary:
+				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+			destructive:
+				"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
+			outline: "text-foreground"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];
diff --git a/frontend/src/routes/(app)/links/+page.server.ts b/frontend/src/routes/(app)/links/+page.server.ts
index c4b3da1..6831290 100644
--- a/frontend/src/routes/(app)/links/+page.server.ts
+++ b/frontend/src/routes/(app)/links/+page.server.ts
@@ -35,9 +35,7 @@ export const load = (async (event) => {
 		where: (shortener, { eq, and, isNull }) =>
 			and(
 				eq(shortener.userId, user.id),
-				project_id
-					? eq(shortener.projectId, project_id)
-					: isNull(shortener.projectId),
+				project_id ? eq(shortener.projectId, project_id) : undefined,
 			),
 	})
 
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 6a78d09..3ac60a4 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -8,6 +8,7 @@
 	import * as Select from '$lib/components/ui/select'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
+	import { Badge } from '$lib/components/ui/badge'
 	import {
 		BarChart,
 		ExternalLink,
@@ -155,17 +156,23 @@
 		{#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 class="flex items-center justify-between gap-2">
+						<div 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} />
+						</div>
+						<Badge variant="default"
+							>{shortener.project
+								? shortener.project.name
+								: 'Uncategorized'}</Badge>
 					</Card.Title>
 					<Card.Description>{shortener.link}</Card.Description>
 				</Card.Header>