diff --git a/website/src/app.css b/website/src/app.css
index 2bf5b4f..8803aeb 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -3,6 +3,23 @@
 @import "tailwindcss/utilities";
 
 :root {
+	--color-background: 255 245 230;
+	--color-card: 245 230 210;
+	--color-card-hover: 240 225 205;
+	--color-border: 200 180 160;
+
+	--color-body: 84 70 50;
+	--color-heading: 70 55 35;
+	--color-light: 0 0 0;
+
+	--color-input-bg: 245 230 210;
+	--color-input-border: 180 160 140;
+	--color-placeholder: 130 90 40;
+
+	--color-primary: 120 70 10;
+	--color-primary-hover: 255 172 42;
+	--color-primary-bg: 241 157 30;
+	--color-primary-fg: 10 7 4;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -10,6 +27,7 @@
 		--color-background: 10 7 4;
 		--color-card: 28 22 17;
 		--color-card-hover: 40 32 25;
+		--color-border: 28 22 17;
 
 		--color-body: 198 167 140;
 		--color-heading: 227 213 200;
@@ -21,7 +39,8 @@
 
 		--color-primary: 241 157 30;
 		--color-primary-hover: 255 172 42;
-		--color-primary-fg: var(--color-background);
+		--color-primary-bg: 241 157 30;
+		--color-primary-fg: 10 7 4;
 	}
 }
 
diff --git a/website/src/lib/components/Logo.svelte b/website/src/lib/components/Logo.svelte
new file mode 100644
index 0000000..f333830
--- /dev/null
+++ b/website/src/lib/components/Logo.svelte
@@ -0,0 +1,23 @@
+<svg {...$$restProps} viewBox="0 0 56 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<title>pesde</title>
+	<path
+		d="M0 28V26.3156H2.25652V12.2361H0.0635639V10.5517H4.44947L4.48125 11.9819L3.78205 12.3315C4.41769 11.6746 5.16986 11.1661 6.03857 10.8059C6.92846 10.4245 7.82895 10.2338 8.74003 10.2338C9.863 10.2338 10.88 10.4775 11.7911 10.9648C12.7234 11.4522 13.4544 12.1726 13.9841 13.126C14.5349 14.0795 14.8104 15.2448 14.8104 16.6221C14.8104 18.0416 14.5138 19.26 13.9205 20.277C13.3272 21.2728 12.5327 22.0356 11.5368 22.5653C10.5622 23.095 9.5028 23.3598 8.35865 23.3598C7.72301 23.3598 7.11916 23.2751 6.54708 23.1056C5.99619 22.9361 5.50887 22.7242 5.08511 22.4699C4.66135 22.1945 4.34353 21.8873 4.13165 21.5483L4.60838 21.4529L4.5766 26.3156H7.02381V28H0ZM7.94549 21.6118C9.19558 21.6118 10.2444 21.2092 11.0919 20.4041C11.9394 19.5778 12.3632 18.3807 12.3632 16.8127C12.3632 15.2872 11.9606 14.1113 11.1555 13.2849C10.3503 12.4586 9.3333 12.0454 8.1044 12.0454C7.72301 12.0454 7.26747 12.1196 6.73777 12.2679C6.20807 12.395 5.67837 12.6069 5.14867 12.9035C4.61898 13.2002 4.17403 13.5922 3.81383 14.0795L4.5766 12.7446L4.60838 20.7219L3.8774 19.7367C4.42828 20.3299 5.06392 20.7961 5.78431 21.1351C6.5047 21.4529 7.2251 21.6118 7.94549 21.6118Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M18.37 17.7448C17.0563 17.7448 15.8592 17.4694 14.7786 16.9185C13.7192 16.3676 12.8717 15.5942 12.236 14.5984C11.6216 13.6026 11.3144 12.4478 11.3144 11.1341C11.3144 9.77811 11.611 8.61277 12.2043 7.63813C12.7975 6.64229 13.5921 5.87953 14.5879 5.34983C15.5837 4.79894 16.6961 4.5235 17.925 4.5235C19.1963 4.5235 20.2875 4.78835 21.1986 5.31805C22.1308 5.84775 22.8406 6.59992 23.3279 7.57456C23.8153 8.54921 24.0589 9.69336 24.0589 11.007V11.6109H13.3802L13.412 10.1489H21.7388C21.7388 9.32257 21.5693 8.62337 21.2303 8.05129C20.9125 7.45803 20.4676 7.01308 19.8955 6.71645C19.3234 6.39863 18.6666 6.23972 17.925 6.23972C17.1411 6.23972 16.4313 6.43042 15.7956 6.8118C15.16 7.17199 14.6515 7.70169 14.2701 8.4009C13.9099 9.07891 13.7298 9.90524 13.7298 10.8799C13.7298 11.9181 13.9205 12.8186 14.3019 13.5814C14.6833 14.3229 15.213 14.9056 15.891 15.3294C16.5902 15.732 17.3847 15.9332 18.2746 15.9332C19.2281 15.9332 20.1074 15.7425 20.9125 15.3612C21.7177 14.9798 22.4169 14.503 23.0101 13.931L23.8365 15.3612C23.2644 16.018 22.5228 16.5795 21.6117 17.0456C20.7006 17.5117 19.6201 17.7448 18.37 17.7448Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M28.7199 22.6288C28.0631 22.6288 27.4275 22.5441 26.813 22.3746C26.2198 22.2051 25.7007 21.972 25.2557 21.6754C24.8108 21.3788 24.4718 21.0292 24.2387 20.6266L24.7154 20.9126V22.311H22.8721V17.9887H24.5247L24.7154 20.0545L24.2705 18.5608C24.5035 19.3447 25.0227 19.9486 25.8278 20.3723C26.6541 20.7961 27.5122 21.008 28.4021 21.008C29.2073 21.008 29.8747 20.8491 30.4044 20.5312C30.9553 20.2134 31.2307 19.7685 31.2307 19.1964C31.2307 18.5184 30.9977 18.0522 30.5315 17.798C30.0866 17.5225 29.3662 17.2789 28.3703 17.067L26.6223 16.6856C25.457 16.389 24.5353 15.997 23.8573 15.5097C23.1793 15.0012 22.8403 14.1642 22.8403 12.9989C22.8403 11.8759 23.2746 11.0178 24.1434 10.4245C25.0332 9.81009 26.135 9.50286 27.4487 9.50286C27.9572 9.50286 28.4869 9.57702 29.0378 9.72534C29.6098 9.85246 30.129 10.0538 30.5951 10.3292C31.0612 10.6046 31.3896 10.9436 31.5803 11.3462L31.1036 11.1873V9.75712H32.9787V14.0477H31.3261L30.9129 11.0284L31.4532 13.126C31.3684 12.7446 31.1248 12.4162 30.7222 12.1408C30.3408 11.8441 29.8853 11.6111 29.3556 11.4416C28.8471 11.2721 28.3386 11.1873 27.8301 11.1873C27.152 11.1873 26.5376 11.325 25.9867 11.6005C25.457 11.8759 25.1922 12.3209 25.1922 12.9353C25.1922 13.4015 25.3723 13.7617 25.7325 14.0159C26.1138 14.2702 26.7283 14.5033 27.5758 14.7151L29.1967 15.0647C30.0018 15.2554 30.7222 15.4885 31.3579 15.7639C32.0147 16.0182 32.5338 16.3996 32.9152 16.9081C33.2966 17.3954 33.4872 18.0946 33.4872 19.0057C33.4872 19.832 33.2542 20.5206 32.788 21.0715C32.3431 21.6012 31.7498 21.9932 31.0083 22.2475C30.2879 22.5017 29.5251 22.6288 28.7199 22.6288Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M37.1104 18.5607C35.9662 18.5607 34.9068 18.3064 33.9322 17.7979C32.9787 17.2682 32.2054 16.5054 31.6121 15.5096C31.0188 14.5138 30.7222 13.3272 30.7222 11.95C30.7222 10.5304 30.9977 9.34389 31.5485 8.39043C32.1206 7.41579 32.8728 6.67421 33.8051 6.1657C34.7373 5.65719 35.7544 5.40293 36.8561 5.40293C37.746 5.40293 38.6253 5.57243 39.494 5.91144C40.3839 6.22926 41.1679 6.6848 41.8459 7.27807L41.0831 7.5641V1.65266H38.8584V0H43.435V16.5266H45.4055V18.2111H41.0831V16.5584L41.8141 16.6855C41.1997 17.2788 40.5005 17.7449 39.7165 18.0839C38.9537 18.4018 38.085 18.5607 37.1104 18.5607ZM37.6189 16.7809C38.4452 16.7809 39.208 16.622 39.9072 16.3042C40.6276 15.9863 41.2844 15.5626 41.8777 15.0329L41.0831 16.1135V7.85014L41.8777 8.99429C41.2208 8.42221 40.4793 7.97727 39.6529 7.65945C38.8478 7.34163 38.0744 7.18272 37.3329 7.18272C36.5277 7.18272 35.8073 7.37341 35.1717 7.75479C34.5572 8.13618 34.0699 8.69766 33.7097 9.43924C33.3495 10.1596 33.1694 11.0601 33.1694 12.1407C33.1694 13.1366 33.3707 13.9841 33.7733 14.6833C34.1759 15.3613 34.7056 15.8804 35.3624 16.2406C36.0404 16.6008 36.7926 16.7809 37.6189 16.7809Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M50.3188 24.2004C49.0051 24.2004 47.808 23.925 46.7274 23.3741C45.668 22.8232 44.8205 22.0498 44.1848 21.054C43.5704 20.0582 43.2632 18.9034 43.2632 17.5898C43.2632 16.2337 43.5598 15.0684 44.1531 14.0937C44.7463 13.0979 45.5409 12.3351 46.5367 11.8054C47.5325 11.2545 48.6449 10.9791 49.8738 10.9791C51.1451 10.9791 52.2363 11.2439 53.1474 11.7736C54.0796 12.3033 54.7894 13.0555 55.2767 14.0302C55.7641 15.0048 56.0077 16.149 56.0077 17.4626V18.0665H45.329L45.3608 16.6045H53.6876C53.6876 15.7782 53.5181 15.079 53.1791 14.5069C52.8613 13.9136 52.4164 13.4687 51.8443 13.172C51.2722 12.8542 50.6154 12.6953 49.8738 12.6953C49.0899 12.6953 48.3801 12.886 47.7444 13.2674C47.1088 13.6276 46.6003 14.1573 46.2189 14.8565C45.8587 15.5345 45.6786 16.3609 45.6786 17.3355C45.6786 18.3737 45.8693 19.2742 46.2507 20.037C46.6321 20.7786 47.1617 21.3612 47.8398 21.785C48.539 22.1876 49.3335 22.3888 50.2234 22.3888C51.1769 22.3888 52.0562 22.1982 52.8613 21.8168C53.6665 21.4354 54.3657 20.9587 54.9589 20.3866L55.7853 21.8168C55.2132 22.4736 54.4716 23.0351 53.5605 23.5012C52.6494 23.9673 51.5688 24.2004 50.3188 24.2004Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/website/src/lib/registry-api.ts b/website/src/lib/registry-api.ts
index aa5a7d1..74b1272 100644
--- a/website/src/lib/registry-api.ts
+++ b/website/src/lib/registry-api.ts
@@ -1,9 +1,14 @@
 import { PUBLIC_REGISTRY_URL } from "$env/static/public"
 
+export type SearchResponse = {
+	count: number
+	data: PackageResponse[]
+}
+
 export type PackageResponse = {
 	name: string
 	version: string
-	target: TargetInfo
+	targets: TargetInfo[]
 	description: string
 	published_at: string
 	license: string
diff --git a/website/src/routes/+error.svelte b/website/src/routes/+error.svelte
new file mode 100644
index 0000000..99b3ae6
--- /dev/null
+++ b/website/src/routes/+error.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { page } from "$app/stores"
+</script>
+
+<div class="mx-auto max-w-screen-xl px-4 py-32 text-center">
+	<h1 class="mb-1 text-4xl font-bold text-heading">{$page.status}</h1>
+	<p class="text-lg">{$page.error?.message}</p>
+</div>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index ed8e2ef..b48ceaf 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -1,6 +1,13 @@
 <script>
-	import '@fontsource-variable/nunito-sans';
-	import '../app.css';
+	import Header from "./Header.svelte"
+
+	import "@fontsource-variable/nunito-sans"
+	import "../app.css"
+	import Footer from "./Footer.svelte"
 </script>
 
-<slot></slot>
+<Header />
+<main class="mt-16 min-h-screen">
+	<slot></slot>
+</main>
+<Footer />
diff --git a/website/src/routes/+page.server.ts b/website/src/routes/+page.server.ts
index df30f7d..a419b94 100644
--- a/website/src/routes/+page.server.ts
+++ b/website/src/routes/+page.server.ts
@@ -1,8 +1,8 @@
-import { fetchRegistry, type PackageResponse } from "$lib/registry-api"
+import { fetchRegistry, type SearchResponse } from "$lib/registry-api"
 import type { PageServerLoad } from "./$types"
 
 export const load: PageServerLoad = async ({ fetch }) => {
-	const packages = await fetchRegistry<PackageResponse[]>("search", fetch)
+	const { data: packages } = await fetchRegistry<SearchResponse>("search", fetch)
 
 	return { packages }
 }
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index d50c947..7971d22 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -17,17 +17,25 @@
 	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 		{#each data.packages.slice(0, 24) as pkg}
 			{@const [scope, name] = pkg.name.split("/")}
-			{@const targetName = pkg.target.kind[0].toUpperCase() + pkg.target.kind.slice(1)}
 
 			<article
-				class="hover:bg-card-hover relative overflow-hidden rounded bg-card px-5 py-4 transition"
+				class="relative overflow-hidden rounded bg-card px-5 py-4 transition hover:bg-card-hover"
 			>
-				<h3 class="text-xl font-semibold">
+				<h3 class="truncate text-xl font-semibold">
 					<a href={`/packages/${pkg.name}`} class="after:absolute after:inset-0 after:content-['']">
 						<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
 					</a>
 				</h3>
-				<div class="mb-3 text-sm font-semibold text-primary">v{pkg.version} · {targetName}</div>
+				<div class="mb-3 flex overflow-hidden whitespace-nowrap text-sm font-semibold text-primary">
+					<span class="truncate">v{pkg.version}</span>
+					<span class="whitespace-pre"
+						>{` · ${pkg.targets
+							.map((target) => {
+								return target.kind[0].toUpperCase() + target.kind.slice(1)
+							})
+							.join(", ")}`}</span
+					>
+				</div>
 				<p class="mb-3 line-clamp-2 h-[2lh] overflow-hidden text-sm">{pkg.description}</p>
 				<div class="text-sm font-semibold text-heading">
 					<time datetime={pkg.published_at}>
diff --git a/website/src/routes/Footer.svelte b/website/src/routes/Footer.svelte
new file mode 100644
index 0000000..b9f3356
--- /dev/null
+++ b/website/src/routes/Footer.svelte
@@ -0,0 +1,17 @@
+<footer class="mx-auto max-w-screen-xl px-4">
+	<div class="border-t py-16 text-sm">
+		<p>Licensed under the MIT License.</p>
+		<p class="mb-4">Copyright © 2024 daimond113</p>
+		<p>
+			Designed with ♥︎ by
+			<a
+				href="https://github.com/lukadev-0"
+				class="font-semibold underline underline-offset-2"
+				target="_blank"
+				rel="noreferrer noopener"
+			>
+				lukadev
+			</a>.
+		</p>
+	</div>
+</footer>
diff --git a/website/src/routes/Header.svelte b/website/src/routes/Header.svelte
new file mode 100644
index 0000000..35b0436
--- /dev/null
+++ b/website/src/routes/Header.svelte
@@ -0,0 +1,54 @@
+<script>
+	import Logo from "$lib/components/Logo.svelte"
+</script>
+
+<header class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
+	<div class="mx-auto flex h-16 max-w-screen-xl items-center justify-between px-4">
+		<a href="/">
+			<Logo class="h-9 text-primary" />
+		</a>
+		<div class="hidden w-full max-w-80 md:flex">
+			<form action="/search" class="w-full">
+				<label
+					class="ring-primary-bg/20 relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 transition focus-within:border-primary focus-within:ring-4"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class=" h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-label="search"
+					>
+						<circle cx="11" cy="11" r="8" />
+						<path d="m21 21-4.3-4.3" />
+					</svg>
+					<input
+						name="q"
+						placeholder="search packages..."
+						class="absolute inset-0 bg-transparent pl-9 pr-2 text-heading placeholder:text-placeholder"
+					/>
+				</label>
+			</form>
+		</div>
+		<div class="hidden items-center space-x-6 md:flex [&_a:hover]:text-heading [&_a]:transition">
+			<nav class="flex items-center space-x-6 font-medium">
+				<a href="/docs">Docs</a>
+				<a href="/policies">Policies</a>
+			</nav>
+
+			<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
+				<svg class="h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+					<title>GitHub</title>
+					<path
+						d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+						fill="currentColor"
+					/>
+				</svg>
+			</a>
+		</div>
+	</div>
+</header>
diff --git a/website/src/routes/Hero.svelte b/website/src/routes/Hero.svelte
index b18f616..bec9f9f 100644
--- a/website/src/routes/Hero.svelte
+++ b/website/src/routes/Hero.svelte
@@ -83,7 +83,7 @@
 
 	<a
 		href="/docs/get-started"
-		class="inline-flex h-10 items-center rounded bg-primary px-4 font-semibold text-primary-fg transition hover:bg-primary-hover md:h-11 md:px-5"
+		class="bg-primary-bg inline-flex h-10 items-center rounded px-4 font-semibold text-primary-fg transition hover:bg-primary-hover md:h-11 md:px-5"
 	>
 		Get Started
 	</a>
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 3102833..1f19abc 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -15,6 +15,7 @@ export default {
 					DEFAULT: "rgb(var(--color-card) / <alpha-value>)",
 					hover: "rgb(var(--color-card-hover) / <alpha-value>)",
 				},
+				border: "rgb(var(--color-border) / <alpha-value>)",
 
 				body: "rgb(var(--color-body) / <alpha-value>)",
 				heading: "rgb(var(--color-heading) / <alpha-value>)",
@@ -29,6 +30,7 @@ export default {
 				primary: {
 					DEFAULT: "rgb(var(--color-primary) / <alpha-value>)",
 					hover: "rgb(var(--color-primary-hover) / <alpha-value>)",
+					bg: "rgb(var(--color-primary-bg) / <alpha-value>)",
 					fg: "rgb(var(--color-primary-fg) / <alpha-value>)",
 				},
 			},
@@ -40,6 +42,9 @@ export default {
 				sm: `${4 / 16}rem`,
 				DEFAULT: `${8 / 16}rem`,
 			},
+			borderColor: {
+				DEFAULT: "rgb(var(--color-border) / <alpha-value>)",
+			},
 		},
 	},