diff --git a/README.md b/README.md
index b4563b9..349360b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
 # Sad Ellie's cool website
-Build with SvelteKit
+
+```
+npm run dev
+```
diff --git a/src/lib/images/unitto/hero.png b/src/lib/images/unitto/hero.png
new file mode 100644
index 0000000..1b757da
Binary files /dev/null and b/src/lib/images/unitto/hero.png differ
diff --git a/src/lib/images/unitto/post-horizontal1.png b/src/lib/images/unitto/post-horizontal1.png
index 34c8600..abdf7a7 100644
Binary files a/src/lib/images/unitto/post-horizontal1.png and b/src/lib/images/unitto/post-horizontal1.png differ
diff --git a/src/lib/images/unitto/post-horizontal2.png b/src/lib/images/unitto/post-horizontal2.png
index 221a09c..f2cd9f0 100644
Binary files a/src/lib/images/unitto/post-horizontal2.png and b/src/lib/images/unitto/post-horizontal2.png differ
diff --git a/src/lib/images/unitto/post-horizontal3.png b/src/lib/images/unitto/post-horizontal3.png
index 699ae8e..d6130c0 100644
Binary files a/src/lib/images/unitto/post-horizontal3.png and b/src/lib/images/unitto/post-horizontal3.png differ
diff --git a/src/lib/images/unitto/post-horizontal4.png b/src/lib/images/unitto/post-horizontal4.png
index 161ce9f..762cee8 100644
Binary files a/src/lib/images/unitto/post-horizontal4.png and b/src/lib/images/unitto/post-horizontal4.png differ
diff --git a/src/lib/images/unitto/post-vertical1.png b/src/lib/images/unitto/post-vertical1.png
index 09a2a9c..5ad4ff7 100644
Binary files a/src/lib/images/unitto/post-vertical1.png and b/src/lib/images/unitto/post-vertical1.png differ
diff --git a/src/lib/images/unitto/post-vertical2.png b/src/lib/images/unitto/post-vertical2.png
index 7dfd681..ab6bafc 100644
Binary files a/src/lib/images/unitto/post-vertical2.png and b/src/lib/images/unitto/post-vertical2.png differ
diff --git a/src/lib/images/unitto/post-vertical3.png b/src/lib/images/unitto/post-vertical3.png
index eb6e568..3b70846 100644
Binary files a/src/lib/images/unitto/post-vertical3.png and b/src/lib/images/unitto/post-vertical3.png differ
diff --git a/src/lib/images/unitto/post-vertical4.png b/src/lib/images/unitto/post-vertical4.png
index dd6664a..c0bbae9 100644
Binary files a/src/lib/images/unitto/post-vertical4.png and b/src/lib/images/unitto/post-vertical4.png differ
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2cd0724..5386039 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,12 +16,12 @@
 	import Telegram from "./Telegram.svelte";
 </script>
 
-<div class="flex flex-col place-items-center p-8 bg-fuchsia-50">
+<div class="flex flex-col place-items-center p-8 bg-fuchsia-50 dark:bg-fuchsia-950 text-black dark:text-white">
 	<div
-		class="flex flex-col bg-fuchsia-200 py-16 xl:py-32 rounded-3xl place-items-center gap-8 bg-center bg-cover w-full relative"
+		class="flex flex-col py-16 xl:py-32 rounded-3xl place-items-center gap-8 bg-center bg-cover w-full relative dark:invert"
 		style="background-image: url({hero});"
 	>
-		<div class="flex flex-col place place-items-center">
+		<div class="flex flex-col place place-items-center dark:invert">
 			<p class="text-6xl md:text-8xl xl:text-9xl text-center font-medium">
 				Sad Ellie
 			</p>
@@ -29,14 +29,14 @@
 		</div>
 		<a href="#contact">
 			<button
-				class="py-6 px-12 bg-fuchsia-600 hover:bg-fuchsia-500 transition-colors rounded-full text-2xl font-medium text-white"
+				class="py-6 px-12 bg-fuchsia-600 dark:bg-fuchsia-800 hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors rounded-full text-2xl font-medium text-white dark:invert"
 			>
 				Contact
 			</button>
 		</a>
 	</div>
 
-	<div class="max-w-screen-xl">
+	<div class="max-w-screen-xl text-black dark:text-fuchsia-50">
 		<p class="text-4xl font-medium pt-16 pb-4 w-full">Who is Sad Ellie?</p>
 
 		<p class="w-full text-lg pb-2">
diff --git a/src/routes/Contact.svelte b/src/routes/Contact.svelte
index f9e2f2c..6cfebec 100644
--- a/src/routes/Contact.svelte
+++ b/src/routes/Contact.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-    import Email from "./Email.svelte";
-
     export let title: string;
     export let href: string;
     export let img: string;
 </script>
 
 <a
-    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 hover:bg-fuchsia-200 overflow-hidden transition-all"
+    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 dark:bg-fuchsia-900 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 overflow-hidden transition-all h-full"
     {href}
     ><div
-        class="relative flex place-content-center place-items-center rounded-b-2xl bg-gradient-to-tl overflow-hidden from-fuchsia-100 via-pink-100 to-blue-100"
+        class="relative flex place-content-center place-items-center rounded-b-2xl bg-gradient-to-tl overflow-hidden from-fuchsia-800 via-pink-900 to-blue-900"
     >
         <div class="opacity-0 group-hover/item:opacity-100 transition-all rounded-b-2xl h-48 w-full bg-cover bg-center object-scale-down" style="background-image: url({img})"/>
         <div
diff --git a/src/routes/Product.svelte b/src/routes/Product.svelte
index 320e43c..3eeb7a0 100644
--- a/src/routes/Product.svelte
+++ b/src/routes/Product.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <a
-    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 hover:bg-fuchsia-200 overflow-hidden transition-all h-full"
+    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 dark:bg-fuchsia-900 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 overflow-hidden transition-all h-full"
     href={href}
 >
     <div class="rounded-b-2xl h-48 w-full bg-cover bg-center object-scale-down" style="background-image: url({imgSrc})"/>
diff --git a/src/routes/unitto/+layout.svelte b/src/routes/unitto/+layout.svelte
index b2e2dfa..29e0f15 100644
--- a/src/routes/unitto/+layout.svelte
+++ b/src/routes/unitto/+layout.svelte
@@ -24,7 +24,7 @@
     }
 </script>
 
-<div class="relative bg-white">
+<div class="relative bg-unitto-dark-background text-unitto-dark-onBackground">
     <!-- Top bar -->
     <TopBar on:menuClick={openMenu} />
 
@@ -33,12 +33,12 @@
 
     <!-- Nav bar -->
     <div
-        class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-surface"
+        class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-dark-surface text-unitto-dark-onSurface"
         id="drawer"
     >
         <button on:click={closeMenu}>
             <span
-                class="material-symbols-outlined hover:bg-unitto-surfaceContainer-inactive-hover rounded-full p-3 m-2"
+                class="material-symbols-outlined hover:bg-unitto-dark-surfaceContainer-inactive-hover rounded-full p-3 m-2"
             >
                 menu_open
             </span>
@@ -67,7 +67,7 @@
     </div>
 
     <div class="flex flex-row relative">
-        <div class="hidden lg:block sticky top-0 h-screen bg-unitto-surface">
+        <div class="hidden lg:block sticky top-0 h-screen bg-unitto-dark-surface text-unitto-dark-onSurface">
             <!-- Navigation rail -->
             <div class="flex flex-col gap-4 pt-6">
                 <TabListItemVertical
diff --git a/src/routes/unitto/+page.svelte b/src/routes/unitto/+page.svelte
index fff8d58..6336242 100644
--- a/src/routes/unitto/+page.svelte
+++ b/src/routes/unitto/+page.svelte
@@ -61,7 +61,7 @@
                 },
                 {
                     title: "Unit converter",
-                    support: "700 Units and currencies for every situation",
+                    support: "570 Units and currencies for every situation",
                 },
                 {
                     title: "The list goes on",
@@ -204,6 +204,6 @@
         </div>
     </div>
 
-    <hr />
+    <hr class="border-unitto-dark-outline"/>
     <Footer />
 </div>
diff --git a/src/routes/unitto/FeatureDetail.svelte b/src/routes/unitto/FeatureDetail.svelte
index 8676f66..534aff5 100644
--- a/src/routes/unitto/FeatureDetail.svelte
+++ b/src/routes/unitto/FeatureDetail.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import snake from "$lib/images/unitto/snake.svg";
     import Snake from "./Snake.svelte";
     export let image: string;
     export let title: string;
diff --git a/src/routes/unitto/FeatureItem.svelte b/src/routes/unitto/FeatureItem.svelte
index a5c806d..66a4b5a 100644
--- a/src/routes/unitto/FeatureItem.svelte
+++ b/src/routes/unitto/FeatureItem.svelte
@@ -12,7 +12,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-    class="p-6 rounded-3xl bg-unitto-surface flex flex-row items-stretch hover:bg-unitto-surfaceContainer-active-hover transition-colors"
+    class="p-6 rounded-3xl bg-unitto-dark-surface text-unitto-dark-onSurface flex flex-row items-stretch hover:bg-unitto-dark-surfaceContainer-inactive-hover transition-colors"
     class:cursor-pointer={href}
     class:gap-2={support != ""}
     on:click={onClick}
diff --git a/src/routes/unitto/Footer.svelte b/src/routes/unitto/Footer.svelte
index eb64f63..d93279f 100644
--- a/src/routes/unitto/Footer.svelte
+++ b/src/routes/unitto/Footer.svelte
@@ -6,7 +6,7 @@
     <div class="grid grid-cols-1 p-4 gap-4">
         <div class="flex justify-start items-center gap-4">
             <img
-                class="w-28 p-2 rounded-3xl border-2 bg-unitto-background hover:scale-110 hover:-translate-y-5 transition-all hover:shadow-2xl"
+                class="w-28 p-2 rounded-3xl border-2 border-unitto-dark-outline bg-unitto-dark-background hover:scale-110 hover:-translate-y-5 transition-all hover:shadow-2xl"
                 src={unittoLogo}
                 alt="unitto"
             />
diff --git a/src/routes/unitto/Hero.svelte b/src/routes/unitto/Hero.svelte
index abda0ff..e6623a8 100644
--- a/src/routes/unitto/Hero.svelte
+++ b/src/routes/unitto/Hero.svelte
@@ -3,15 +3,14 @@
 
     export let features: Array<Feature>
     import FeatureItem from "./FeatureItem.svelte";
-    import hero from "$lib/images/unitto/hero.jpg";
+    import hero from "$lib/images/unitto/hero.png";
 </script>
 
 <div
-    class="flex flex-col bg-green-200 py-24 xl:py-32 rounded-3xl place-items-center gap-16 bg-center bg-cover"
+    class="flex flex-col py-24 xl:py-32 rounded-3xl place-items-center gap-16 bg-center bg-cover backdrop-invert-0 bg-white/30"
     style="background-image: url({hero});"
 >
     <div class="flex flex-col place place-items-center">
-        <!-- <img src={heroSymbols} alt="hero" /> -->
         <p class="text-6xl md:text-8xl xl:text-9xl text-center font-medium">
             Unitto
         </p>
diff --git a/src/routes/unitto/TabListItemHorizontal.svelte b/src/routes/unitto/TabListItemHorizontal.svelte
index e924fcd..6c2569c 100644
--- a/src/routes/unitto/TabListItemHorizontal.svelte
+++ b/src/routes/unitto/TabListItemHorizontal.svelte
@@ -5,8 +5,8 @@
     export let href: string;
 
     $: background = isSelected
-    ? "bg-unitto-secondaryContainer hover:bg-unitto-surfaceContainer-active-hover"
-    : "hover:bg-unitto-surfaceContainer-inactive-hover"
+    ? "bg-unitto-dark-secondaryContainer hover:bg-unitto-dark-surfaceContainer-active-hover"
+    : "hover:bg-unitto-dark-surfaceContainer-inactive-hover"
 
     $: icon_state_class = isSelected
         ? "text-unitto-on-secondary-container"
diff --git a/src/routes/unitto/TopBar.svelte b/src/routes/unitto/TopBar.svelte
index 90b71f3..d82a421 100644
--- a/src/routes/unitto/TopBar.svelte
+++ b/src/routes/unitto/TopBar.svelte
@@ -4,11 +4,6 @@
     const dispatch = createEventDispatcher();
     let y: number
 
-    // $: background = (y > 0) ? "bg-unitto-surface-variant" : "bg-white"
-    // $: iconHover = (y > 0) ? "hover:bg-unitto-surface-variant-hover" : "hover:bg-slate-100"
-    $: background = "bg-white"
-    $: iconHover = "hover:bg-slate-100"
-
     function click() {
         console.log(y);
         
@@ -16,15 +11,15 @@
     }
 </script>
 
-<div class="lg:hidden flex place-items-center sticky px-2 top-0 z-10 transition-colors {background}">
+<div class="lg:hidden flex place-items-center sticky px-2 top-0 z-10 transition-colors bg-unitto-dark-background text-unitto-dark-onBackground">
     <button on:click={click}>
         <span
-            class="material-symbols-outlined rounded-full p-3 m-2 {iconHover}"
+            class="material-symbols-outlined rounded-full p-3 m-2 hover:bg-unitto-dark-surfaceContainer-inactive-hover"
             >menu</span
         >
     </button>
     <a
-        class="rounded-full flex flex-row items-center gap-4 p-2 {iconHover}"
+        class="rounded-full flex flex-row items-center gap-4 p-2 hover:bg-unitto-dark-surfaceContainer-inactive-hover"
         href="/unitto"
     >
         <img class="w-8" src={unittoLogo} alt="" />
diff --git a/src/routes/unitto/privacy/+page.svelte b/src/routes/unitto/privacy/+page.svelte
index d44f3c6..896f044 100644
--- a/src/routes/unitto/privacy/+page.svelte
+++ b/src/routes/unitto/privacy/+page.svelte
@@ -36,12 +36,13 @@
         <p class="text-2xl font-medium">Log Data</p>
         <p>
             I want to inform you that whenever you use my Service, in a case of
-            an error in the app I collect data and information (through
+            an error in the app I may collect data and information (through
             third-party products) on your phone called Log Data. This Log Data
             may include information such as your device Internet Protocol (“IP”)
             address, device name, operating system version, the configuration of
             the app when utilizing my Service, the time and date of your use of
-            the Service, and other statistics.
+            the Service, and other statistics. This information may be send by
+            Google Play Services.
         </p>
         <p class="text-2xl font-medium">Cookies</p>
         <p>
@@ -115,7 +116,7 @@
             notify you of any changes by posting the new Privacy Policy on this
             page.
         </p>
-        <p>This policy is effective as of 2023-01-18</p>
+        <p>This policy is effective as of 2023-11-28</p>
         <p class="text-2xl font-medium">Contact Us</p>
         <p>
             If you have any questions or suggestions about my Privacy Policy, do
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 62511b4..bff6639 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,58 +5,113 @@ const config = {
   theme: {
     extend: {
       colors: {
-        'unitto': {
-          "primary": "#006d34",
-          "onPrimary": "#ffffff",
-          "primaryContainer": "#7efba0",
-          "onPrimaryContainer": "#00210b",
-          "primaryFixed": "#7efba0",
-          "onPrimaryFixed": "#00210b",
-          "primaryFixedDim": "#61de87",
-          "onPrimaryFixedVariant": "#005226",
-          "secondary": "#506352",
-          "onSecondary": "#ffffff",
-          "secondaryContainer": "#d3e8d2",
-          "onSecondaryContainer": "#0e1f12",
-          "secondaryFixed": "#d3e8d2",
-          "onSecondaryFixed": "#0e1f12",
-          "secondaryFixedDim": "#b7ccb7",
-          "onSecondaryFixedVariant": "#394b3b",
-          "tertiary": "#3a656e",
-          "onTertiary": "#ffffff",
-          "tertiaryContainer": "#bdeaf5",
-          "onTertiaryContainer": "#001f25",
-          "tertiaryFixed": "#bdeaf5",
-          "onTertiaryFixed": "#001f25",
-          "tertiaryFixedDim": "#a2ced8",
-          "onTertiaryFixedVariant": "#204d55",
-          "error": "#ba1a1a",
-          "errorContainer": "#ffdad6",
-          "onError": "#ffffff",
-          "onErrorContainer": "#410002",
-          "background": "#fcfdf7",
-          "onBackground": "#191c19",
-          "outline": "#717970",
-          "inverseOnSurface": "#f0f1ec",
-          "inverseSurface": "#2e312e",
-          "inversePrimary": "#61de87",
-          "shadow": "#000000",
-          "surfaceTint": "#006d34",
-          "outlineVariant": "#c1c9be",
-          "scrim": "#000000",
-          "surface": "#f9faf4",
-          "onSurface": "#191c19",
-          "surfaceVariant": "#dde5da",
-          "onSurfaceVariant": "#414941",
-          "surfaceContainerHighest": "#e2e3de",
-          "surfaceContainerHigh": "#e7e9e3",
-          "surfaceContainer": "#edeee9",
-          "surfaceContainerLow": "#f3f4ef",
-          "surfaceContainerLowest": "#ffffff",
-          "surfaceDim": "#d9dbd5",
-          "surfaceBright": "#f9faf4",
-          "surfaceContainer-active-hover": "#C4D8C4",
-          "surfaceContainer-inactive-hover": "#EAECE6"
+        "unitto": {
+          "light": {
+            "primary": "#196c32",
+            "onPrimary": "#ffffff",
+            "primaryContainer": "#a3f6ab",
+            "onPrimaryContainer": "#002109",
+            "primaryFixed": "#a3f6ab",
+            "onPrimaryFixed": "#002109",
+            "primaryFixedDim": "#87d991",
+            "onPrimaryFixedVariant": "#005320",
+            "secondary": "#516351",
+            "onSecondary": "#ffffff",
+            "secondaryContainer": "#d4e8d1",
+            "onSecondaryContainer": "#0f1f11",
+            "secondaryFixed": "#d4e8d1",
+            "onSecondaryFixed": "#0f1f11",
+            "secondaryFixedDim": "#b8ccb6",
+            "onSecondaryFixedVariant": "#3a4b3a",
+            "tertiary": "#39656c",
+            "onTertiary": "#ffffff",
+            "tertiaryContainer": "#bdeaf3",
+            "onTertiaryContainer": "#001f24",
+            "tertiaryFixed": "#bdeaf3",
+            "onTertiaryFixed": "#001f24",
+            "tertiaryFixedDim": "#a1ced7",
+            "onTertiaryFixedVariant": "#1f4d54",
+            "error": "#ba1a1a",
+            "errorContainer": "#ffdad6",
+            "onError": "#ffffff",
+            "onErrorContainer": "#410002",
+            "background": "#fcfdf7",
+            "onBackground": "#1a1c19",
+            "outline": "#727970",
+            "inverseOnSurface": "#f0f1eb",
+            "inverseSurface": "#2e312d",
+            "inversePrimary": "#87d991",
+            "shadow": "#000000",
+            "surfaceTint": "#196c32",
+            "outlineVariant": "#c1c9be",
+            "scrim": "#000000",
+            "surface": "#f9faf4",
+            "onSurface": "#1a1c19",
+            "surfaceVariant": "#dde5d9",
+            "onSurfaceVariant": "#424940",
+            "surfaceContainerHighest": "#e2e3dd",
+            "surfaceContainerHigh": "#e7e9e3",
+            "surfaceContainer": "#edeee9",
+            "surfaceContainerLow": "#f3f4ee",
+            "surfaceContainerLowest": "#ffffff",
+            "surfaceDim": "#d9dbd5",
+            "surfaceBright": "#f9faf4",
+            "surfaceContainer-active-hover": "#C4D8C4",
+            "surfaceContainer-inactive-hover": "#EAECE6"
+          },
+          "dark": {
+            "primary": "#87d991",
+            "onPrimary": "#003914",
+            "primaryContainer": "#005320",
+            "onPrimaryContainer": "#a3f6ab",
+            "primaryFixed": "#a3f6ab",
+            "onPrimaryFixed": "#002109",
+            "primaryFixedDim": "#87d991",
+            "onPrimaryFixedVariant": "#005320",
+            "secondary": "#b8ccb6",
+            "onSecondary": "#243425",
+            "secondaryContainer": "#3a4b3a",
+            "onSecondaryContainer": "#d4e8d1",
+            "secondaryFixed": "#d4e8d1",
+            "onSecondaryFixed": "#0f1f11",
+            "secondaryFixedDim": "#b8ccb6",
+            "onSecondaryFixedVariant": "#3a4b3a",
+            "tertiary": "#a1ced7",
+            "onTertiary": "#00363d",
+            "tertiaryContainer": "#1f4d54",
+            "onTertiaryContainer": "#bdeaf3",
+            "tertiaryFixed": "#bdeaf3",
+            "onTertiaryFixed": "#001f24",
+            "tertiaryFixedDim": "#a1ced7",
+            "onTertiaryFixedVariant": "#1f4d54",
+            "error": "#ffb4ab",
+            "errorContainer": "#93000a",
+            "onError": "#690005",
+            "onErrorContainer": "#ffdad6",
+            "background": "#1a1c19",
+            "onBackground": "#e2e3dd",
+            "outline": "#8b9389",
+            "inverseOnSurface": "#1a1c19",
+            "inverseSurface": "#e2e3dd",
+            "inversePrimary": "#196c32",
+            "shadow": "#000000",
+            "surfaceTint": "#87d991",
+            "outlineVariant": "#424940",
+            "scrim": "#000000",
+            "surface": "#111411",
+            "onSurface": "#c6c7c2",
+            "surfaceVariant": "#424940",
+            "onSurfaceVariant": "#c1c9be",
+            "surfaceContainerHighest": "#333532",
+            "surfaceContainerHigh": "#282b27",
+            "surfaceContainer": "#1e201d",
+            "surfaceContainerLow": "#1a1c19",
+            "surfaceContainerLowest": "#0c0f0c",
+            "surfaceDim": "#111411",
+            "surfaceBright": "#373a36",
+            "surfaceContainer-active-hover": "#455A47",
+            "surfaceContainer-inactive-hover": "#364036"
+          },
         }
       }
     },
diff --git a/vite.config.ts b/vite.config.ts
index bbf8c7d..f3dbf08 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		port: 7777
+	}
 });