diff --git a/app/page.tsx b/app/page.tsx
index ba58369..beff0b4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,21 @@
-
 import Footer from "./footer";
 import Posts from "./posts";
+import { useState } from "react";
 
 export default function Home() {
+    const [darkMode, setDarkMode] = useState(false);
+
+    const toggleDarkMode = () => {
+        setDarkMode(!darkMode);
+        if (typeof document !== "undefined") {
+            if (darkMode) {
+                document.documentElement.classList.remove("dark");
+            } else {
+                document.documentElement.classList.add("dark");
+            }
+        }
+    };
+
     return (
         <div>
             <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
@@ -12,6 +25,9 @@ export default function Home() {
                     <p className="text-center sm:text-left">
                         I'm a software engineer and musical theatre performer based in Melbourne, Australia.
                     </p>
+                    <button onClick={toggleDarkMode} className="mt-4 px-4 py-2 bg-gray-800 text-white rounded">
+                        Toggle Dark Mode
+                    </button>
                     <Posts />
                 </main>
                 <Footer />
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index ea71573..363471c 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,43 +7,44 @@ const cardVariants = cva("w-full relative", {
     variant: {
       default: [
         "border rounded-lg",
-        "border-zinc-200 dark:border-zinc-800",
-        "bg-white dark:bg-zinc-950",
+        "border-border",
+        "bg-card",
+        "text-card-foreground",
       ],
       dots: [
         "relative mx-auto w-full",
         "rounded-lg border border-dashed",
-        "border-zinc-300 dark:border-zinc-800",
+        "border-border",
         "px-4 sm:px-6 md:px-8",
       ],
       gradient: ["relative mx-auto w-full", "px-4 sm:px-6 md:px-8"],
       plus: [
         "border border-dashed",
-        "border-zinc-400 dark:border-zinc-700",
+        "border-border",
         "relative",
       ],
       neubrutalism: [
         "border-[0.5px]",
-        "border-zinc-400 dark:border-white/70",
+        "border-border",
         "relative",
         "shadow-[4px_4px_0px_0px_rgba(0,0,0)]",
         "dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)]",
       ],
       inner: [
         "border-[0.5px] rounded-sm p-2",
-        "border-zinc-300 dark:border-zinc-800",
+        "border-border",
       ],
       lifted: [
         "border rounded-xl",
-        "border-zinc-400 dark:border-zinc-700",
+        "border-border",
         "relative",
         "shadow-[0px_5px_0px_0px_rgba(0,0,0,0.7)]",
         "dark:shadow-[0px_4px_0px_0px_rgba(255,255,255,0.5)]",
-        "bg-zinc-50 dark:bg-zinc-900/50",
+        "bg-card",
       ],
       corners: [
         "border-2 rounded-md",
-        "border-zinc-100 dark:border-zinc-700",
+        "border-border",
         "relative",
       ],
     },
@@ -78,10 +79,10 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
       return (
         <>
-          <div className="absolute left-0 top-4 -z-0 h-px w-full bg-zinc-400 dark:bg-zinc-700 sm:top-6 md:top-8" />
-          <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-zinc-400 dark:bg-zinc-700 sm:bottom-6 md:bottom-8" />
+          <div className="absolute left-0 top-4 -z-0 h-px w-full bg-border sm:top-6 md:top-8" />
+          <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-border sm:bottom-6 md:bottom-8" />
 
-          <div className="relative w-full border-x border-zinc-400 dark:border-zinc-700">
+          <div className="relative w-full border-x border-border">
             <div className="absolute z-0 grid h-full w-full items-center">
               <section className="absolute z-0 grid h-full w-full grid-cols-2 place-content-between">
                 <div className={`${sharedClasses} -translate-x-[2.5px]`} />
@@ -98,12 +99,12 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
             <div className="relative z-20 mx-auto py-8">
               <CardContent>
                 {title && (
-                  <h3 className="text-lg font-bold mb-1 text-gray-900 dark:text-gray-100">
+                  <h3 className="text-lg font-bold mb-1 text-foreground">
                     {title}
                   </h3>
                 )}
                 {description && (
-                  <p className="text-gray-700 dark:text-gray-300">
+                  <p className="text-muted-foreground">
                     {description}
                   </p>
                 )}
@@ -117,11 +118,11 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
     const GradientLines = () => (
       <>
-        <div className="absolute left-0 top-4 -z-0 h-px w-full bg-gradient-to-l from-zinc-200 via-zinc-400 to-zinc-600 dark:from-zinc-900 dark:via-zinc-700 dark:to-zinc-500 sm:top-6 md:top-8" />
-        <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-gradient-to-r from-zinc-200 via-zinc-400 to-zinc-600 dark:from-zinc-900 dark:via-zinc-700 dark:to-zinc-500 sm:bottom-6 md:bottom-8" />
+        <div className="absolute left-0 top-4 -z-0 h-px w-full bg-gradient-to-l from-border via-border to-border sm:top-6 md:top-8" />
+        <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-gradient-to-r from-border via-border to-border sm:bottom-6 md:bottom-8" />
         <div className="relative w-full border-x border-gradient-x">
-          <div className="absolute inset-y-0 left-0 w-px bg-gradient-to-t from-zinc-200 via-zinc-400 to-zinc-600 dark:from-zinc-900 dark:via-zinc-700 dark:to-zinc-500" />
-          <div className="absolute inset-y-0 right-0 w-px bg-gradient-to-t from-zinc-200 via-zinc-400 to-zinc-600 dark:from-zinc-900 dark:via-zinc-700 dark:to-zinc-500" />
+          <div className="absolute inset-y-0 left-0 w-px bg-gradient-to-t from-border via-border to-border" />
+          <div className="absolute inset-y-0 right-0 w-px bg-gradient-to-t from-border via-border to-border" />
           <div className="relative z-20 mx-auto py-8">{content}</div>
         </div>
       </>
@@ -137,7 +138,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           height={24}
           strokeWidth="1"
           stroke="currentColor"
-          className="dark:text-white text-black size-6 absolute -top-3 -left-3"
+          className="text-foreground size-6 absolute -top-3 -left-3"
         >
           <path
             strokeLinecap="round"
@@ -153,7 +154,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           height={24}
           strokeWidth="1"
           stroke="currentColor"
-          className="dark:text-white text-black size-6 absolute -top-3 -right-3"
+          className="text-foreground size-6 absolute -top-3 -right-3"
         >
           <path
             strokeLinecap="round"
@@ -169,7 +170,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           height={24}
           strokeWidth="1"
           stroke="currentColor"
-          className="dark:text-white text-black size-6 absolute -bottom-3 -left-3"
+          className="text-foreground size-6 absolute -bottom-3 -left-3"
         >
           <path
             strokeLinecap="round"
@@ -185,7 +186,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           height={24}
           strokeWidth="1"
           stroke="currentColor"
-          className="dark:text-white text-black size-6 absolute -bottom-3 -right-3"
+          className="text-foreground size-6 absolute -bottom-3 -right-3"
         >
           <path
             strokeLinecap="round"
@@ -198,10 +199,10 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
     const CornerBorders = () => (
       <>
-        <div className="dark:border-zinc-200 border-zinc-700 size-6 absolute -top-0.5 -left-0.5 border-l-2 border-t-2 rounded-tl-md" />
-        <div className="dark:border-zinc-200 border-zinc-700 size-6 absolute -top-0.5 -right-0.5 border-r-2 border-t-2 rounded-tr-md" />
-        <div className="dark:border-zinc-200 border-zinc-700 size-6 absolute -bottom-0.5 -left-0.5 border-l-2 border-b-2 rounded-bl-md" />
-        <div className="dark:border-zinc-200 border-zinc-700 size-6 absolute -bottom-0.5 -right-0.5 border-r-2 border-b-2 rounded-br-md" />
+        <div className="border-foreground size-6 absolute -top-0.5 -left-0.5 border-l-2 border-t-2 rounded-tl-md" />
+        <div className="border-foreground size-6 absolute -top-0.5 -right-0.5 border-r-2 border-t-2 rounded-tr-md" />
+        <div className="border-foreground size-6 absolute -bottom-0.5 -left-0.5 border-l-2 border-b-2 rounded-bl-md" />
+        <div className="border-foreground size-6 absolute -bottom-0.5 -right-0.5 border-r-2 border-b-2 rounded-br-md" />
       </>
     )
 
@@ -216,12 +217,12 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const content = (
       <CardContent>
         {title && (
-          <h3 className="text-lg font-bold mb-1 text-gray-900 dark:text-gray-100">
+          <h3 className="text-lg font-bold mb-1 text-foreground">
             {title}
           </h3>
         )}
         {description && (
-          <p className="text-gray-700 dark:text-gray-300">{description}</p>
+          <p className="text-muted-foreground">{description}</p>
         )}
         {children}
       </CardContent>
@@ -234,9 +235,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           className={cn(cardVariants({ variant, className }))}
           {...props}
         >
-          <div className="absolute left-0 top-4 -z-0 h-px w-full bg-zinc-400 dark:bg-zinc-700 sm:top-6 md:top-8" />
-          <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-zinc-400 dark:bg-zinc-700 sm:bottom-6 md:bottom-8" />
-          <div className="relative w-full border-x border-zinc-400 dark:border-zinc-700">
+          <div className="absolute left-0 top-4 -z-0 h-px w-full bg-border sm:top-6 md:top-8" />
+          <div className="absolute bottom-4 left-0 z-0 h-px w-full bg-border sm:bottom-6 md:bottom-8" />
+          <div className="relative w-full border-x border-border">
             <div className="absolute z-0 grid h-full w-full items-center">
               <section className="absolute z-0 grid h-full w-full grid-cols-2 place-content-between">
                 <div className="rounded-full outline outline-8 dark:outline-gray-950 sm:my-6 md:my-8 size-1 my-4 outline-gray-50 bg-green-400 -translate-x-[2.5px]" />
@@ -258,7 +259,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           className={cn(cardVariants({ variant, className }))}
           {...props}
         >
-          <div className="border rounded-sm bg-gradient-to-br from-white to-zinc-200/60 border-zinc-300 shadow-[2px_0_8px_rgba(0,_0,_0,_0.15)] dark:from-zinc-950 dark:to-zinc-900/60 dark:border-zinc-900/50 dark:shadow-inner">
+          <div className="border rounded-sm bg-gradient-to-br from-card to-card/60 border-border shadow-[2px_0_8px_rgba(0,_0,_0,_0.15)] dark:from-card dark:to-card/60 dark:border-border dark:shadow-inner">
             {content}
           </div>
         </div>