diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
index 139597f9cb..e69de29bb2 100644
--- a/apps/dashboard/README.md
+++ b/apps/dashboard/README.md
@@ -1,2 +0,0 @@
-
-
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 2775424d90..105324d948 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -24,10 +24,10 @@
     "@novu/headless": "^0.21.0",
     "@trigger.dev/nextjs": "^2.2.10",
     "@vercel/edge-config": "^0.4.1",
-    "@vercel/toolbar": "^0.1.5",
+    "@vercel/toolbar": "^0.1.6",
     "@zip.js/zip.js": "^2.7.31",
     "change-case": "^5.2.0",
-    "framer-motion": "^10.16.10",
+    "framer-motion": "^10.16.12",
     "ms": "^2.1.3",
     "next": "14.0.3",
     "next-international": "^1.1.4",
@@ -45,8 +45,8 @@
   "devDependencies": {
     "@midday/tsconfig": "workspace:*",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
+    "@types/node": "^20.10.2",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
     "typescript": "^5.3.2"
   }
diff --git a/apps/dashboard/src/app/[locale]/@login/page.tsx b/apps/dashboard/src/app/[locale]/@login/page.tsx
index 6d7df355cc..0729e7a376 100644
--- a/apps/dashboard/src/app/[locale]/@login/page.tsx
+++ b/apps/dashboard/src/app/[locale]/@login/page.tsx
@@ -59,27 +59,27 @@ export default async function Login() {
       <div className="flex min-h-screen justify-center items-center overflow-hidden p-6 md:p-0">
         <div className="relative z-20 m-auto flex w-full max-w-[380px] flex-col">
           <div className="flex w-full flex-col relative">
-            <div className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
-            <div className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
+            <div className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
+            <div className="w-[3px] h-[3px] bg-primary rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
             <div
-              className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
               style={{ animationDelay: "500ms" }}
             />
             <div
-              className="w-[5px] h-[5px] bg-white rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
               style={{ animationDelay: "0ms" }}
             />
             <div
-              className="w-[3px] h-[3px] bg-white rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
+              className="w-[3px] h-[3px] bg-[#FFD02B] rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
               style={{ animationDelay: "200ms" }}
             />
             <div
-              className="w-[2px] h-[2px] bg-white rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
+              className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
               style={{ animationDelay: "2s" }}
             />
 
             <div
-              className="w-[5px] h-[5px] bg-white rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
               style={{ animationDelay: "0ms" }}
             />
 
diff --git a/apps/website/package.json b/apps/website/package.json
index 0411361954..18a941fcbf 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -17,14 +17,15 @@
     "@vercel/analytics": "^1.1.1",
     "next": "14.0.2",
     "next-international": "^1.1.4",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sharp": "^0.33.0"
   },
   "devDependencies": {
     "@midday/tsconfig": "workspace:*",
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
+    "@types/node": "^20.10.2",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17"
   }
 }
diff --git a/apps/website/public/overview-light.png b/apps/website/public/overview-light.png
new file mode 100644
index 0000000000..2adda009cf
Binary files /dev/null and b/apps/website/public/overview-light.png differ
diff --git a/apps/website/public/search-light.png b/apps/website/public/search-light.png
new file mode 100644
index 0000000000..cc9747ae4e
Binary files /dev/null and b/apps/website/public/search-light.png differ
diff --git a/apps/website/public/tracking-light.png b/apps/website/public/tracking-light.png
new file mode 100644
index 0000000000..0eb09f1823
Binary files /dev/null and b/apps/website/public/tracking-light.png differ
diff --git a/apps/website/public/transactions-light.png b/apps/website/public/transactions-light.png
new file mode 100644
index 0000000000..91034681e7
Binary files /dev/null and b/apps/website/public/transactions-light.png differ
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 26fa6d77f9..5e35eca623 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@/components/theme-provider";
 import "@/styles/globals.css";
 import "@midday/ui/globals.css";
 import { cn } from "@midday/ui/utils";
@@ -24,7 +25,9 @@ export default function Layout({ children }: { children: ReactElement }) {
   return (
     <html lang="en" className="dark whitespace-pre-line">
       <body className={cn(fontSans.variable, "bg-background")}>
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+        </ThemeProvider>
         <Analytics />
       </body>
     </html>
diff --git a/apps/website/src/components/header.tsx b/apps/website/src/components/header.tsx
index fd4580b4c8..1c9396d78d 100644
--- a/apps/website/src/components/header.tsx
+++ b/apps/website/src/components/header.tsx
@@ -8,10 +8,7 @@ export function Header() {
   const t = useScopedI18n("header");
 
   return (
-    <header
-      className="pt-4 pb-4 md:pt-10 md:pb-5 flex justify-between px-5 lg:px-10  backdrop-filter backdrop-blur-2xl z-[999]"
-      style={{ background: "rgba(18, 18, 18,.8)" }}
-    >
+    <header className="pt-4 pb-4 md:pt-10 md:pb-5 flex justify-between px-5 lg:px-10">
       <Link href="/" title="Midday">
         <Icons.Logo />
       </Link>
@@ -19,7 +16,7 @@ export function Header() {
       <Link href="https://app.midday.ai">
         <button
           type="button"
-          className="relative rounded-lg overflow-hidden p-[1px]"
+          className="relative rounded-lg overflow-hidden dark:p-[1px] border border-primary dark:border-0"
           style={{
             background:
               "linear-gradient(-45deg, rgba(235,248,255,.18) 0%, #848f9c 50%, rgba(235,248,255,.18) 100%)",
diff --git a/apps/website/src/components/startpage.tsx b/apps/website/src/components/startpage.tsx
index 9d7e100de2..279a314abb 100644
--- a/apps/website/src/components/startpage.tsx
+++ b/apps/website/src/components/startpage.tsx
@@ -6,9 +6,13 @@ import { Icons } from "@midday/ui/icons";
 import { Loader2 } from "lucide-react";
 import Image from "next/image";
 import mobile from "public/mobile.png";
+import overviewLight from "public/overview-light.png";
 import overview from "public/overview.png";
+import searchLight from "public/search-light.png";
 import search from "public/search.png";
+import trackingLight from "public/tracking-light.png";
 import tracking from "public/tracking.png";
+import transactionsLight from "public/transactions-light.png";
 import transactions from "public/transactions.png";
 import { useState } from "react";
 import { useFormStatus } from "react-dom";
@@ -21,7 +25,7 @@ function SubmitButton() {
   if (pending) {
     return (
       <div className="absolute top-1 right-0">
-        <Loader2 className="absolute w-4 h-4 mr-3 text-black animate-spin top-2.5 right-2" />
+        <Loader2 className="absolute w-4 h-4 mr-3 text-base animate-spin top-2.5 right-2" />
       </div>
     );
   }
@@ -29,7 +33,7 @@ function SubmitButton() {
   return (
     <button
       type="submit"
-      className="absolute right-2 h-7 bg-white top-2 px-4 rounded-md font-medium text-sm z-10 text-black"
+      className="absolute right-2 h-7 bg-primary top-2 px-4 rounded-md font-medium text-sm z-10 text-primary-foreground"
     >
       {t("join")}
     </button>
@@ -45,10 +49,12 @@ export function StartPage() {
       <Header />
       <div className="px-5 lg:px-10">
         <div className="text-center mt-16 md:mt-20">
-          <div className="pb-4 bg-gradient-to-r from-white via-white to-[#848484] inline-block text-transparent bg-clip-text">
+          <div className="pb-4 bg-gradient-to-r from-primary dark:via-primary dark:to-[#848484] to-[#000] inline-block text-transparent bg-clip-text">
             <h1 className="font-medium pb-1 text-5xl">{t("title")}</h1>
           </div>
-          <p className="text-[#B0B0B0]">{t("description")}</p>
+          <p className="text-[#696969] dark:text-[#B0B0B0]">
+            {t("description")}
+          </p>
         </div>
 
         <div className="flex justify-center mt-8">
@@ -85,7 +91,7 @@ export function StartPage() {
                   autoComplete="email"
                   aria-label="Email address"
                   required
-                  className="bg-[#1A1A1A] font-sm text-primary outline-none py-1 px-3 w-[360px] placeholder-[#606060] rounded-lg h-11"
+                  className="bg-background font-sm text-primary outline-none py-1 px-3 w-[360px] placeholder-[#606060] rounded-lg h-11 border border-color-[#DCDAD2]"
                 />
                 <SubmitButton />
               </fieldset>
@@ -134,54 +140,54 @@ export function StartPage() {
           </div>
         </div>
 
-        <div className="w-[1px] h-[1px] bg-white rounded-full absolute top-[35%] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
+        <div className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[35%] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
         <div
-          className="w-[5px] h-[5px] bg-white rounded-full absolute top-[44%] left-[10%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[44%] left-[10%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "500ms" }}
         />
         <div
-          className="w-[1px] h-[1px] bg-white rounded-full absolute top-[41%] left-[15%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[41%] left-[15%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "0ms" }}
         />
         <div
-          className="w-[2px] h-[2px] bg-white rounded-full absolute top-[39%] left-[25%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[2px] h-[2px] bg-primary invisible md:visible rounded-full absolute top-[39%] left-[25%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "700ms" }}
         />
         <div
-          className="w-[5px] h-[5px] bg-[#22FF66] rounded-full absolute top-[34%] left-[30%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-[#22FF66] rounded-full invisible md:visible absolute top-[34%] left-[30%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "1s" }}
         />
         <div
-          className="w-[1px] h-[1px] bg-white rounded-full absolute top-[45%] left-[44%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[1px] h-[1px] bg-primary invisible md:visible rounded-full absolute top-[45%] left-[44%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "400ms" }}
         />
 
         <div
-          className="w-[5px] h-[5px] bg-white rounded-full absolute top-[54%] right-[5%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[54%] right-[5%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "2s" }}
         />
         <div
-          className="w-[3px] h-[3px] bg-[#8306FF] rounded-full absolute top-[60%] right-[10%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[3px] h-[3px] bg-[#8306FF] rounded-full invisible md:visible absolute top-[60%] right-[10%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "4s" }}
         />
         <div
-          className="w-[5px] h-[5px] bg-white rounded-full absolute top-[50%] right-[20%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[50%] right-[20%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "200ms" }}
         />
         <div
-          className="w-[2px] h-[2px] bg-white rounded-full absolute top-[59%] right-[27%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[2px] h-[2px] bg-primary invisible md:visible rounded-full absolute top-[59%] right-[27%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "50ms" }}
         />
         <div
-          className="w-[5px] h-[5px] bg-white rounded-full absolute top-[40%] right-[24%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[40%] right-[24%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "10ms" }}
         />
         <div
-          className="w-[3px] h-[3px] bg-white rounded-full absolute top-[53%] right-[32%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[3px] h-[3px] bg-primary invisible md:visible rounded-full absolute top-[53%] right-[32%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "100ms" }}
         />
         <div
-          className="w-[5px] h-[5px] bg-white rounded-full absolute top-[50%] right-[40%] animate-[pulse_2s_ease-in-out_infinite]"
+          className="w-[5px] h-[5px] bg-primary invisible md:visible rounded-full absolute top-[50%] right-[40%] animate-[pulse_2s_ease-in-out_infinite]"
           style={{ animationDelay: "190ms" }}
         />
 
@@ -204,7 +210,20 @@ export function StartPage() {
             src={overview}
             alt="Midday | Overview"
             width={993}
-            className="hidden md:block"
+            className="hidden dark:md:block dark:block"
+            height={645}
+            style={{
+              objectFit: "contain",
+            }}
+          />
+
+          <Image
+            quality={100}
+            loading="eager"
+            src={overviewLight}
+            alt="Midday | Overview"
+            width={993}
+            className="hidden md:block dark:hidden"
             height={645}
             style={{
               objectFit: "contain",
@@ -217,7 +236,16 @@ export function StartPage() {
             alt="Midday | Search"
             width={638}
             height={260}
-            className="absolute left-[50%] -ml-[319px] z-10 bottom-[70px] hidden md:block"
+            className="absolute left-[50%] -ml-[319px] z-10 bottom-0 hidden dark:md:block dark:block"
+          />
+
+          <Image
+            quality={100}
+            src={searchLight}
+            alt="Midday | Search"
+            width={638}
+            height={260}
+            className="absolute left-[50%] -ml-[319px] z-10 bottom-0 hidden md:block dark:hidden"
           />
 
           <Image
@@ -226,12 +254,21 @@ export function StartPage() {
             alt="Midday | Tracking"
             width={360}
             height={268}
-            className="absolute right-[20%] z-10 bottom-[240px] hidden md:block"
+            className="absolute right-[20%] z-10 bottom-[240px] hidden dark:md:block dark:block"
           />
 
           <Image
             quality={100}
-            className="absolute right-0 bottom-0 hidden md:block"
+            src={trackingLight}
+            alt="Midday | Tracking"
+            width={360}
+            height={268}
+            className="absolute right-[22%] z-10 bottom-[180px] hidden md:block dark:hidden"
+          />
+
+          <Image
+            quality={100}
+            className="absolute right-0 bottom-0 hidden dark:md:block dark:block"
             src={transactions}
             alt="Midday | Transactions"
             width={993}
@@ -240,6 +277,18 @@ export function StartPage() {
               objectFit: "contain",
             }}
           />
+
+          <Image
+            quality={100}
+            className="absolute right-0 bottom-0 hidden md:block dark:hidden"
+            src={transactionsLight}
+            alt="Midday | Transactions"
+            width={993}
+            height={645}
+            style={{
+              objectFit: "contain",
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/website/src/components/theme-provider.tsx b/apps/website/src/components/theme-provider.tsx
new file mode 100644
index 0000000000..08c7e516a9
--- /dev/null
+++ b/apps/website/src/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+import * as React from "react";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/bun.lockb b/bun.lockb
index 7fd4d1c5a5..100d67585c 100755
Binary files a/bun.lockb and b/bun.lockb differ