diff --git a/README.md b/README.md
index d1979cd..ada1d21 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # coredump
 
-My personal website and its associated blog. Written in [SvelteKit](https://kit.svelte.dev) and [TailwindCSS](https://tailwindcss.com/).
+My personal website and its associated blog. Written in [SvelteKit](https://kit.svelte.dev) using [TailwindCSS](https://tailwindcss.com/) and components from [shadcn-svelte](https://www.shadcn-svelte.com/).
 
 ## Running locally
 
diff --git a/bun.lockb b/bun.lockb
index 24f12a9..ffb85bf 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/lib/assets/Coredump.svelte b/src/lib/assets/Coredump.svelte
index a343ea1..8e72441 100644
--- a/src/lib/assets/Coredump.svelte
+++ b/src/lib/assets/Coredump.svelte
@@ -10,7 +10,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	version="1.1"
 	viewBox="0 0 2048 416"
-	class="diagram select-none font-mono"
+	class="diagram select-none font-mono hidden sm:block"
 	text-anchor="middle"
 	font-size="13px"
 	stroke-linecap="round"
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 2b0cbd6..47f8556 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,9 +1,10 @@
 <script>
 	import { GithubLogo } from 'svelte-radix';
+	import Separator from './ui/separator/separator.svelte';
 </script>
 
 <footer class="h-24 px-2 mb-4 text-sm md:text-md xl:text-lg">
-	<hr class="mb-4" />
+	<Separator class="mb-4" />
 	<div class="flex justify-center flex-col gap-4">
 		<div class="flex justify-around gap-4">
 			<a
@@ -13,8 +14,16 @@
 			>
 		</div>
 		<p class="text-zinc-400 dark:text-zinc-700 text-center">
-			&copy 2024 Youwen Wu | Built with <strong>SvelteKit</strong> and
-			<strong>shad-cn</strong> |
+			&copy 2024 Youwen Wu | Built with <a
+				href="https://kit.svelte.dev"
+				target="_blank"
+				class="hover:underline"><strong>SvelteKit</strong></a
+			>
+			and
+			<a href="https://www.shadcn-svelte.com/" class="hover:underline" target="_blank"
+				><strong>shadcn-svelte</strong></a
+			>
+			|
 			<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
 				>View the source</a
 			>
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index ab0aee6..534ea00 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -6,6 +6,7 @@
 	import { onMount } from 'svelte';
 	import { navigating } from '$app/stores';
 	import Coredump from '$lib/assets/Coredump.svelte';
+	import Separator from '../ui/separator/separator.svelte';
 
 	let current: 'blog' | 'about' | 'home' | 'projects' | string;
 
@@ -31,7 +32,7 @@
 		{:else}
 			<Name height="100%" href="/" />
 		{/if}
-		<div class="flex gap-14 justify-around align-middle">
+		<div class="flex gap-1 sm:gap-2 md:gap-4 lg:gap-14 justify-around align-middle">
 			<a
 				href="/"
 				class="text-md sm:text-lg md:text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
@@ -64,7 +65,7 @@
 			</Button>
 		</div>
 	</div>
-	<hr />
+	<Separator />
 </nav>
 
 <style lang="postcss">
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..be3843a
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>