diff --git a/package-lock.json b/package-lock.json
index 96f9349..57ebc90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "date-fns": "^3.6.0",
         "lucide-react": "^0.394.0",
         "next": "14.2.3",
+        "next-themes": "^0.3.0",
         "react": "^18",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
@@ -4724,6 +4725,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index b147413..0dc8b8a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "date-fns": "^3.6.0",
     "lucide-react": "^0.394.0",
     "next": "14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
diff --git a/src/app/globals.css b/src/app/globals.css
index bc724a1..8260db7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,70 +2,104 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "rose-pine.css";
+
+/* @layer base { */
+/*     :root { */
+/*       --background: 43 62% 98%; */
+/*       --foreground: 43 73% 2%; */
+/*       --muted: 43 24% 85%; */
+/*       --muted-foreground: 43 10% 37%; */
+/*       --popover: 43 62% 98%; */
+/*       --popover-foreground: 43 73% 2%; */
+/*       --card: 43 62% 98%; */
+/*       --card-foreground: 43 73% 2%; */
+/*       --border: 43 15% 91%; */
+/*       --input: 43 15% 91%; */
+/*       --primary: 43 50% 69%; */
+/*       --primary-foreground: 43 50% 9%; */
+/*       --secondary: 43 6% 92%; */
+/*       --secondary-foreground: 43 6% 32%; */
+/*       --accent: 43 13% 83%; */
+/*       --accent-foreground: 43 13% 23%; */
+/*       --destructive: 8 84% 20%; */
+/*       --destructive-foreground: 8 84% 80%; */
+/*       --ring: 43 50% 69%; */
+/*       --radius: 0.5rem; */
+/*     } */
+/*    */
+/*     .dark { */
+/*       --background: 43 48% 4%; */
+/*       --foreground: 43 26% 97%; */
+/*       --muted: 43 24% 15%; */
+/*       --muted-foreground: 43 10% 63%; */
+/*       --popover: 43 48% 4%; */
+/*       --popover-foreground: 43 26% 97%; */
+/*       --card: 43 48% 4%; */
+/*       --card-foreground: 43 26% 97%; */
+/*       --border: 43 15% 13%; */
+/*       --input: 43 15% 13%; */
+/*       --primary: 43 50% 69%; */
+/*       --primary-foreground: 43 50% 9%; */
+/*       --secondary: 43 8% 18%; */
+/*       --secondary-foreground: 43 8% 78%; */
+/*       --accent: 43 14% 23%; */
+/*       --accent-foreground: 43 14% 83%; */
+/*       --destructive: 8 84% 52%; */
+/*       --destructive-foreground: 0 0% 100%; */
+/*       --ring: 43 50% 69%; */
+/*     } */
+/*   } */
+
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
+    --background: 258 70% 100%;
+    --foreground: 258 77% 0%;
+    --muted: 258 29% 85%;
+    --muted-foreground: 258 10% 40%;
+    --popover: 258 70% 100%;
+    --popover-foreground: 258 77% 0%;
+    --card: 258 70% 100%;
+    --card-foreground: 258 77% 0%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --primary: 258 58% 37%;
+    --primary-foreground: 258 58% 97%;
+    --secondary: 258 19% 81%;
+    --secondary-foreground: 258 19% 21%;
+    --accent: 258 19% 81%;
+    --accent-foreground: 258 19% 21%;
+    --destructive: 19 98% 27%;
+    --destructive-foreground: 19 98% 87%;
+    --ring: 258 58% 37%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --background: 258 53% 3%;
+    --foreground: 258 40% 97%;
+    --muted: 258 29% 15%;
+    --muted-foreground: 258 10% 60%;
+    --popover: 258 53% 3%;
+    --popover-foreground: 258 40% 97%;
+    --card: 258 53% 3%;
+    --card-foreground: 258 40% 97%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 258 58% 37%;
+    --primary-foreground: 258 58% 97%;
+    --secondary: 258 15% 10%;
+    --secondary-foreground: 258 15% 70%;
+    --accent: 258 15% 10%;
+    --accent-foreground: 258 15% 70%;
+    --destructive: 19 98% 46%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 258 58% 37%;
   }
 }
 
+
 @layer base {
   * {
     @apply border-border;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 81fea42..8727d14 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
+import { ThemeProvider } from "./ui/theme";
 import { Toaster } from "@/components/ui/toaster";
 import "./tailwind.css";
 import Link from "next/link";
@@ -15,11 +16,6 @@ export const metadata: Metadata = {
   description: "A self-hosted literary submission tracker."
 };
 
-function NavLink(props: ComponentProps<"div"> & { href: string }) {
-  return (
-    <Link href={props.href}><h1 className="text-4xl font-black my-2">{props.children}</h1></Link>
-  )
-}
 
 
 export default function RootLayout({
@@ -30,21 +26,28 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
-          <div className="grid grid-cols-6 w-5/6">
-            <div id="sidebar" className="col-start-1 col-end-2">
-              <header className="">
-                <h1 className="font-black text-4xl antialiased inline">SubMan</h1>
-                <p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
-              </header>
-              <Navlinks />
-            </div>
-            <div className="col-start-2 col-span-full">
-              {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
+            <div className="grid grid-cols-6 w-5/6">
+              <div id="sidebar" className="col-start-1 col-end-2">
+                <header className="">
+                  <h1 className="font-black text-5xl antialiased inline">SubMan</h1>
+                  <p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
+                </header>
+                <Navlinks />
+              </div>
+              <div className="col-start-2 col-span-full">
+                {children}
+              </div>
             </div>
           </div>
-        </div>
-        <Toaster />
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html >
   );
diff --git a/src/app/rose-pine.css b/src/app/rose-pine.css
new file mode 100644
index 0000000..be847ce
--- /dev/null
+++ b/src/app/rose-pine.css
@@ -0,0 +1,53 @@
+.theme-rp {
+  --rp-base: 249 22 12;
+  --rp-surface: 247 23 15;
+  --rp-overlay: 248 25 18;
+  --rp-muted: 249 12 47;
+  --rp-subtle: 248 15 61;
+  --rp-text: 245 50 91;
+  --rp-love: 343 76 68;
+  --rp-gold: 35 88 72;
+  --rp-rose: 2 55 83;
+  --rp-pine: 197 49 38;
+  --rp-foam: 189 43 73;
+  --rp-iris: 267 57 78;
+  --rp-highlight-low: 244 18 15;
+  --rp-highlight-med: 249 15 28;
+  --rp-highlight-high: 248 13 36;
+}
+
+.theme-rp-moon {
+  --rp-base: 246 24 17;
+  --rp-surface: 248 24 20;
+  --rp-overlay: 248 21 26;
+  --rp-muted: 249 12 47;
+  --rp-subtle: 248 15 61;
+  --rp-text: 245 50 91;
+  --rp-love: 343 76 68;
+  --rp-gold: 35 88 72;
+  --rp-rose: 2 66 75;
+  --rp-pine: 197 48 47;
+  --rp-foam: 189 43 73;
+  --rp-iris: 267 57 78;
+  --rp-highlight-low: 245 22 20;
+  --rp-highlight-med: 247 16 30;
+  --rp-highlight-high: 249 15 38;
+}
+
+.theme-rp-dawn {
+  --rp-base: 32 57 95;
+  --rp-surface: 35 100 98;
+  --rp-overlay: 33 43 91;
+  --rp-muted: 257 9 61;
+  --rp-subtle: 248 12 52;
+  --rp-text: 248 19 40;
+  --rp-love: 343 35 55;
+  --rp-gold: 35 81 56;
+  --rp-rose: 3 53 67;
+  --rp-pine: 197 53 34;
+  --rp-foam: 189 30 48;
+  --rp-iris: 268 21 57;
+  --rp-highlight-low: 25 35 93;
+  --rp-highlight-med: 10 9 86;
+  --rp-highlight-high: 315 4 80;
+}
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 0064126..4625413 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -447,25 +447,25 @@ video {
 }
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
+  --background: 258 70% 100%;
+  --foreground: 258 77% 0%;
+  --muted: 258 29% 85%;
+  --muted-foreground: 258 10% 40%;
+  --popover: 258 70% 100%;
+  --popover-foreground: 258 77% 0%;
+  --card: 258 70% 100%;
+  --card-foreground: 258 77% 0%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --primary: 258 58% 37%;
+  --primary-foreground: 258 58% 97%;
+  --secondary: 258 19% 81%;
+  --secondary-foreground: 258 19% 21%;
+  --accent: 258 19% 81%;
+  --accent-foreground: 258 19% 21%;
+  --destructive: 19 98% 27%;
+  --destructive-foreground: 19 98% 87%;
+  --ring: 258 58% 37%;
   --radius: 0.5rem;
 }
 
@@ -700,10 +700,6 @@ body {
   grid-column-end: 2;
 }
 
-.col-end-3 {
-  grid-column-end: 3;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -733,10 +729,6 @@ body {
   margin-bottom: 1rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -761,10 +753,6 @@ body {
   margin-top: 1.5rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .inline {
   display: inline;
 }
@@ -878,6 +866,10 @@ body {
   width: 1rem;
 }
 
+.w-5\/6 {
+  width: 83.333333%;
+}
+
 .w-7 {
   width: 1.75rem;
 }
@@ -915,14 +907,6 @@ body {
   width: 100vw;
 }
 
-.w-3\/5 {
-  width: 60%;
-}
-
-.w-5\/6 {
-  width: 83.333333%;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -994,18 +978,6 @@ body {
           user-select: none;
 }
 
-.grid-cols-\[1fr_4fr\] {
-  grid-template-columns: 1fr 4fr;
-}
-
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
 .grid-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
@@ -1124,14 +1096,6 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.place-self-center {
-  place-self: center;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
 .justify-self-end {
   justify-self: end;
 }
@@ -1302,11 +1266,6 @@ body {
   padding-bottom: 0.375rem;
 }
 
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1354,13 +1313,8 @@ body {
   line-height: 2.25rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-6xl {
-  font-size: 3.75rem;
+.text-5xl {
+  font-size: 3rem;
   line-height: 1;
 }
 
@@ -1393,16 +1347,6 @@ body {
   line-height: 1rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -1488,6 +1432,18 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-secondary {
+  color: hsl(var(--secondary));
+}
+
+.text-accent {
+  color: hsl(var(--accent));
+}
+
+.text-popover {
+  color: hsl(var(--popover));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1590,6 +1546,98 @@ body {
   animation-duration: 200ms;
 }
 
+/* @layer base { */
+
+/*     :root { */
+
+/*       --background: 43 62% 98%; */
+
+/*       --foreground: 43 73% 2%; */
+
+/*       --muted: 43 24% 85%; */
+
+/*       --muted-foreground: 43 10% 37%; */
+
+/*       --popover: 43 62% 98%; */
+
+/*       --popover-foreground: 43 73% 2%; */
+
+/*       --card: 43 62% 98%; */
+
+/*       --card-foreground: 43 73% 2%; */
+
+/*       --border: 43 15% 91%; */
+
+/*       --input: 43 15% 91%; */
+
+/*       --primary: 43 50% 69%; */
+
+/*       --primary-foreground: 43 50% 9%; */
+
+/*       --secondary: 43 6% 92%; */
+
+/*       --secondary-foreground: 43 6% 32%; */
+
+/*       --accent: 43 13% 83%; */
+
+/*       --accent-foreground: 43 13% 23%; */
+
+/*       --destructive: 8 84% 20%; */
+
+/*       --destructive-foreground: 8 84% 80%; */
+
+/*       --ring: 43 50% 69%; */
+
+/*       --radius: 0.5rem; */
+
+/*     } */
+
+/*    */
+
+/*     .dark { */
+
+/*       --background: 43 48% 4%; */
+
+/*       --foreground: 43 26% 97%; */
+
+/*       --muted: 43 24% 15%; */
+
+/*       --muted-foreground: 43 10% 63%; */
+
+/*       --popover: 43 48% 4%; */
+
+/*       --popover-foreground: 43 26% 97%; */
+
+/*       --card: 43 48% 4%; */
+
+/*       --card-foreground: 43 26% 97%; */
+
+/*       --border: 43 15% 13%; */
+
+/*       --input: 43 15% 13%; */
+
+/*       --primary: 43 50% 69%; */
+
+/*       --primary-foreground: 43 50% 9%; */
+
+/*       --secondary: 43 8% 18%; */
+
+/*       --secondary-foreground: 43 8% 78%; */
+
+/*       --accent: 43 14% 23%; */
+
+/*       --accent-foreground: 43 14% 83%; */
+
+/*       --destructive: 8 84% 52%; */
+
+/*       --destructive-foreground: 0 0% 100%; */
+
+/*       --ring: 43 50% 69%; */
+
+/*     } */
+
+/*   } */
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 8d89256..b419cc7 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -20,9 +20,9 @@ export default function Navlinks(props: ComponentProps<"div">) {
   return (
     <>
       {links.map(e => (<NavLink key={e.link} href={e.link}
-        className={clsx("text-2xl font-black my-2",
+        className={clsx("text-3xl font-black my-2",
           {
-            "text-destructive": pathname === e.link
+            "text-primary": pathname === e.link
           }
         )}
       >{e.label}</NavLink >))
diff --git a/src/app/ui/theme.tsx b/src/app/ui/theme.tsx
new file mode 100644
index 0000000..7e99c53
--- /dev/null
+++ b/src/app/ui/theme.tsx
@@ -0,0 +1,10 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+