diff --git a/server/prisma/dev.db b/server/prisma/dev.db
index 82933cb..e5a42cf 100644
Binary files a/server/prisma/dev.db and b/server/prisma/dev.db differ
diff --git a/webapp/src/app.html b/webapp/src/app.html
index 2f8e356..843cdaa 100644
--- a/webapp/src/app.html
+++ b/webapp/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -21,7 +21,7 @@
 			};
 		</script>
 	</head>
-	<body>
-		<div>%sveltekit.body%</div>
+	<body class="dark h-full">
+		<div class="h-full bg-white dark:dark:bg-background-dark">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/webapp/src/lib/components/Callout.svelte b/webapp/src/lib/components/Callout.svelte
index 31ea8fe..a25f225 100644
--- a/webapp/src/lib/components/Callout.svelte
+++ b/webapp/src/lib/components/Callout.svelte
@@ -32,7 +32,10 @@
 	}
 </script>
 
-<div style="--callout-color: var({color})" class="border-l-4 border-l-callout bg-neutral-100 my-4">
+<div
+	style="--callout-color: var({color})"
+	class="border-l-4 border-l-callout bg-zinc-100 dark:bg-zinc-800 my-4"
+>
 	<div class="p-[10px] bg-callout-bg flex items-center gap-2">
 		<span class="font-bold text-md text-callout h-5"><CalloutIcon {icon} /></span>
 		<span class="font-bold text-md">{title}</span>
diff --git a/webapp/src/lib/components/Footer.svelte b/webapp/src/lib/components/Footer.svelte
index 1ac8806..0776fa2 100644
--- a/webapp/src/lib/components/Footer.svelte
+++ b/webapp/src/lib/components/Footer.svelte
@@ -1,6 +1,8 @@
-<hr />
+<hr class="border-zinc-200 dark:border-zinc-700" />
 
-<footer class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-neutral-500">
+<footer
+	class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-zinc-500 dark:text-zinc-500"
+>
 	<span>
 		Built with love by <a class="underline" href="https://mcndt.dev" alt="blog">mcndt</a>
 	</span>
diff --git a/webapp/src/lib/components/MarkdownRenderer.svelte b/webapp/src/lib/components/MarkdownRenderer.svelte
index feb61f7..ecc6427 100644
--- a/webapp/src/lib/components/MarkdownRenderer.svelte
+++ b/webapp/src/lib/components/MarkdownRenderer.svelte
@@ -24,7 +24,7 @@
 
 <div
 	id="md-box"
-	class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
+	class="prose prose-zinc dark:prose-invert max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
 prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
 prose-blockquote:first:before:content-['']"
 >
diff --git a/webapp/src/lib/components/navbar/NavBar.svelte b/webapp/src/lib/components/navbar/NavBar.svelte
index efd728b..26aa30d 100644
--- a/webapp/src/lib/components/navbar/NavBar.svelte
+++ b/webapp/src/lib/components/navbar/NavBar.svelte
@@ -1,16 +1,13 @@
-<script>
-	import NavBarLink from './NavBarLink.svelte';
-	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
-</script>
-
-<div id="navbar" class="h-14 border-b border-neutral-200">
+<div id="navbar" class="h-14 border-b border-zinc-200 dark:border-neutral-700">
 	<div
 		id="navbar-content"
-		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap "
+		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap"
 	>
 		<div id="navbar-left" class="flex gap-8 flex">
 			<a href="/">
-				<span id="name" class="font-extrabold text-lg">[Obsidian Note Sharing]</span>
+				<span id="name" class="font-extrabold text-lg dark:text-white"
+					>[[Obsidian Note Sharing]]</span
+				>
 			</a>
 			<ul class="flex gap-5 content-center">
 				<slot name="left" />
diff --git a/webapp/src/lib/components/navbar/NavBarLink.svelte b/webapp/src/lib/components/navbar/NavBarLink.svelte
index 1be75f6..9a08d83 100644
--- a/webapp/src/lib/components/navbar/NavBarLink.svelte
+++ b/webapp/src/lib/components/navbar/NavBarLink.svelte
@@ -2,7 +2,7 @@
 	export let href: string = '/';
 </script>
 
-<a {href} class="self-center w-full h-full text-neutral-600">
+<a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400">
 	<div class="h-full flex flex-col justify-center">
 		<slot />
 	</div>
diff --git a/webapp/src/lib/marked/renderers/Blockquote.svelte b/webapp/src/lib/marked/renderers/Blockquote.svelte
index a5a0c1e..1b66669 100644
--- a/webapp/src/lib/marked/renderers/Blockquote.svelte
+++ b/webapp/src/lib/marked/renderers/Blockquote.svelte
@@ -11,7 +11,7 @@
 		<slot />
 	</Callout>
 {:else}
-	<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4">
+	<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4 dark:border-zinc-600">
 		<slot />
 	</p>
 {/if}
diff --git a/webapp/src/lib/marked/renderers/InternalEmbed.svelte b/webapp/src/lib/marked/renderers/InternalEmbed.svelte
index c7ad7c9..b11a5dd 100644
--- a/webapp/src/lib/marked/renderers/InternalEmbed.svelte
+++ b/webapp/src/lib/marked/renderers/InternalEmbed.svelte
@@ -8,15 +8,15 @@
 <div>
 	<dfn class="not-italic" title="Interal embeds are not shared currently.">
 		<div
-			class="px-4 py-12 border border-neutral-300 inline-flex flex-col items-center justify-center"
+			class="px-4 py-12 border border-zinc-300 dark:border-zinc-600 inline-flex flex-col items-center justify-center"
 		>
-			<span class="h-8 text-neutral-400 ml-0.5 inline-flex items-center whitespace-nowrap gap-1"
+			<span class="h-8 text-zinc-400 ml-0.5 inline-flex items-center whitespace-nowrap gap-1"
 				><EmbedIcon />
 				<span>Internal embed</span>
 			</span>
 			<span class="underline cursor-not-allowed inline-flex items-center">
 				<span class="text-[#705dcf] opacity-50">{text}</span>
-				<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
+				<span class="h-3 mb-2 text-zinc-400 ml-0.5"><FaRegQuestionCircle /></span>
 			</span>
 		</div>
 	</dfn>
diff --git a/webapp/src/lib/marked/renderers/InternalLink.svelte b/webapp/src/lib/marked/renderers/InternalLink.svelte
index 2b315f8..6d5d096 100644
--- a/webapp/src/lib/marked/renderers/InternalLink.svelte
+++ b/webapp/src/lib/marked/renderers/InternalLink.svelte
@@ -7,6 +7,6 @@
 <dfn class="not-italic" title="Internal link">
 	<span class="underline cursor-not-allowed inline-flex items-center">
 		<span class="text-[#705dcf] opacity-50">{text}</span>
-		<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
+		<span class="h-3 mb-2 text-zinc-400 ml-0.5"><FaRegQuestionCircle /></span>
 	</span>
 </dfn>
diff --git a/webapp/src/lib/marked/renderers/Link.svelte b/webapp/src/lib/marked/renderers/Link.svelte
index fbc133c..4b2b5d5 100644
--- a/webapp/src/lib/marked/renderers/Link.svelte
+++ b/webapp/src/lib/marked/renderers/Link.svelte
@@ -10,5 +10,5 @@
 
 <span class="underline cursor-not-allowed inline-flex items-center font-normal">
 	<a {href} {title} class="text-[#705dcf]"><slot /></a>
-	<span class="h-3 mb-2 text-neutral-400 ml-0.5"><LinkIcon /></span>
+	<span class="h-3 mb-2 text-zinc-400 ml-0.5"><LinkIcon /></span>
 </span>
diff --git a/webapp/src/lib/marked/renderers/Tag.svelte b/webapp/src/lib/marked/renderers/Tag.svelte
index 0039cc3..d42d72d 100644
--- a/webapp/src/lib/marked/renderers/Tag.svelte
+++ b/webapp/src/lib/marked/renderers/Tag.svelte
@@ -1,3 +1,3 @@
-<span class="underline text-neutral-500 cursor-pointer">
+<span class="underline text-zinc-500 dark:text-zinc-400 cursor-pointer">
 	<slot />
 </span>
diff --git a/webapp/src/routes/__error.svelte b/webapp/src/routes/__error.svelte
index a39ef63..f729963 100644
--- a/webapp/src/routes/__error.svelte
+++ b/webapp/src/routes/__error.svelte
@@ -22,7 +22,7 @@
 	export let explainText: string;
 </script>
 
-<div class="prose max-w-2xl">
+<div class="prose max-w-2xl prose-zinc dark:prose-invert">
 	<h1>{title}</h1>
 	<p class="prose-xl">{explainText}</p>
 </div>
diff --git a/webapp/src/routes/__layout.svelte b/webapp/src/routes/__layout.svelte
index 04e07b4..2ee805b 100644
--- a/webapp/src/routes/__layout.svelte
+++ b/webapp/src/routes/__layout.svelte
@@ -6,8 +6,8 @@
 	import '../app.css';
 </script>
 
-<div class="">
-	<div class="z-50 sticky top-0 w-full bg-white">
+<div class="bg-white dark:bg-background-dark min-h-full">
+	<div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark">
 		<div class="top-0 left-0 right-0">
 			<NavBar>
 				<svelte:fragment slot="left">
@@ -19,7 +19,7 @@
 						><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
 					>
 					<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
-						<span class="h-7 text-black"><LogoGithub /></span>
+						<span class="h-7 text-black dark:text-zinc-300"><LogoGithub /></span>
 					</NavBarLink>
 				</svelte:fragment>
 				></NavBar
@@ -27,7 +27,7 @@
 		</div>
 	</div>
 
-	<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 prose-neutral">
+	<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 ">
 		<slot />
 		<div class="mt-12">
 			<Footer />
diff --git a/webapp/src/routes/note/[id].svelte b/webapp/src/routes/note/[id].svelte
index daf6fc7..6cdd985 100644
--- a/webapp/src/routes/note/[id].svelte
+++ b/webapp/src/routes/note/[id].svelte
@@ -9,6 +9,7 @@
 		if (response.ok) {
 			try {
 				const note: EncryptedNote = await response.json();
+				console.log(note.expire_time);
 				note.insert_time = new Date(note.insert_time as unknown as string);
 				note.expire_time = new Date(note.expire_time as unknown as string);
 				const maxage = Math.floor((note.expire_time.valueOf() - note.insert_time.valueOf()) / 1000);
@@ -98,7 +99,7 @@
 
 {#if plaintext}
 	<div class="max-w-2xl mx-auto">
-		<p class="mb-4 text-sm flex justify-between text-neutral-500">
+		<p class="mb-4 text-sm flex justify-between text-zinc-500 dark:text-zinc-400">
 			<span class="flex gap-1.5 items-center uppercase">
 				<span class="h-5"><IconEncrypted /></span>
 				<span>e2e encrypted | <span>Shared {timeString} ago</span></span>
@@ -113,7 +114,7 @@
 {/if}
 
 {#if decryptFailed}
-	<div class="prose max-w-2xl">
+	<div class="prose max-w-2xl prose-zinc dark:prose-invert">
 		<h1>Error: Cannot decrypt file</h1>
 		<p class="prose-xl">This note could not be decrypted with this link.</p>
 		<p class="prose-xl">
diff --git a/webapp/tailwind.config.cjs b/webapp/tailwind.config.cjs
index 5288f96..8c45bda 100644
--- a/webapp/tailwind.config.cjs
+++ b/webapp/tailwind.config.cjs
@@ -1,3 +1,5 @@
+const colors = require('tailwindcss/colors');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	darkMode: 'class',
@@ -5,6 +7,7 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
+				'background-dark': colors.zinc[900],
 				callout: 'rgb(var(--callout-color))',
 				'callout-bg': 'rgba(var(--callout-color), 0.1)'
 			}
