diff --git a/README.md b/README.md
index 457fe46..acfed62 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
   An open source personal site builder. Powered by Together.ai.
 </p>
 
-## Tech stack
+## Tech stack!!!!
 
 - Together.ai for the LLM
 - Vercel's AI SDK as the LLM framework
diff --git a/app/(private)/preview/client.tsx b/app/(private)/preview/client.tsx
index 7ab0c99..a84a517 100644
--- a/app/(private)/preview/client.tsx
+++ b/app/(private)/preview/client.tsx
@@ -88,6 +88,21 @@ export default function PreviewClient({ messageTip }: { messageTip?: string }) {
     setHasUnsavedChanges(true);
   };
 
+  if (resumeQuery.isError || usernameQuery.isError) {
+    const errorMessage =
+      resumeQuery.error instanceof Error
+        ? resumeQuery.error.message
+        : usernameQuery.error instanceof Error
+          ? usernameQuery.error.message
+          : 'Something went wrong. Please refresh the page.';
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen gap-4">
+        <p className="text-red-500 text-lg">{errorMessage}</p>
+        <Button onClick={() => window.location.reload()}>Refresh Page</Button>
+      </div>
+    );
+  }
+
   if (
     resumeQuery.isLoading ||
     usernameQuery.isLoading ||
@@ -237,7 +252,7 @@ export default function PreviewClient({ messageTip }: { messageTip?: string }) {
         )}
       </div>
 
-      <div className="max-w-3xl mx-auto w-full md:rounded-lg border-[0.5px] border-neutral-300 flex items-center justify-between px-4">
+      <div className="max-w-3xl mx-auto w-full md:rounded-lg border-[0.5px] border-border flex items-center justify-between px-4">
         {isEditMode ? (
           <EditResume
             resume={localResumeData}
diff --git a/app/(private)/upload/client.tsx b/app/(private)/upload/client.tsx
index 2761726..3b456d3 100644
--- a/app/(private)/upload/client.tsx
+++ b/app/(private)/upload/client.tsx
@@ -74,10 +74,10 @@ export default function UploadPageClient() {
           {fileState.status !== 'empty' && (
             <button
               onClick={handleReset}
-              className="absolute top-2 right-2 p-1 hover:bg-gray-100 rounded-full z-10"
+              className="absolute top-2 right-2 p-1 hover:bg-muted rounded-full z-10"
               disabled={isUpdating}
             >
-              <X className="h-4 w-4 text-gray-500" />
+              <X className="h-4 w-4 text-muted-foreground" />
             </button>
           )}
 
@@ -86,20 +86,20 @@ export default function UploadPageClient() {
             maxFiles={1}
             icon={
               fileState.status !== 'empty' ? (
-                <img src="/uploaded-pdf.svg" className="h-6 w-6" />
+                <img src="/uploaded-pdf.svg" className="h-6 w-6 dark:invert" />
               ) : (
-                <Linkedin className="h-6 w-6 text-gray-600" />
+                <Linkedin className="h-6 w-6 text-muted-foreground" />
               )
             }
             title={
-              <span className="text-base font-bold text-center text-design-black">
+              <span className="text-base font-bold text-center text-foreground">
                 {fileState.status !== 'empty'
                   ? fileState.file.name
                   : 'Upload PDF'}
               </span>
             }
             description={
-              <span className="text-xs font-light text-center text-design-gray">
+              <span className="text-xs font-light text-center text-muted-foreground">
                 {fileState.status !== 'empty'
                   ? `${(fileState.file.size / 1024 / 1024).toFixed(2)} MB`
                   : 'Resume or LinkedIn'}
@@ -117,19 +117,19 @@ export default function UploadPageClient() {
           <DialogTrigger asChild>
             <Button
               variant="ghost"
-              className="mt-3 hover:bg-white border border-transparent hover:border-gray-200 font-mono text-center cursor-help flex flex-row gap-1.5 justify-center mx-auto"
+              className="mt-3 hover:bg-muted border border-transparent hover:border-border font-mono text-center cursor-help flex flex-row gap-1.5 justify-center mx-auto"
             >
-              <span className="ml-1 inline-block w-4 h-4 rounded-full border border-gray-300 items-center justify-center text-xs cursor-help">
+              <span className="ml-1 inline-block w-4 h-4 rounded-full border border-border items-center justify-center text-xs cursor-help">
                 i
               </span>
-              <p className="text-xs text-center text-design-gray whitespace-normal">
+              <p className="text-xs text-center text-muted-foreground whitespace-normal">
                 How to upload LinkedIn profile
               </p>
             </Button>
           </DialogTrigger>
           <DialogContent className="w-full max-w-[652px] text-center font-mono !p-0 gap-0">
-            <DialogTitle className="font-mono text-base text-center text-design-gray px-7 py-4">
-              Go to your profile → Click on “Resources” → Then “Save to PDF”
+            <DialogTitle className="font-mono text-base text-center text-muted-foreground px-7 py-4">
+              Go to your profile → Click on &quot;Resources&quot; → Then &quot;Save to PDF&quot;
             </DialogTitle>
             <img src="/linkedin-save-to-pdf.png" className="h-auto w-full" />
           </DialogContent>
@@ -138,7 +138,7 @@ export default function UploadPageClient() {
       <div className="font-mono">
         <div className="relative">
           <Button
-            className="px-4 py-3 h-auto bg-design-black hover:bg-design-black/95"
+            className="px-4 py-3 h-auto bg-primary hover:bg-primary/90 text-primary-foreground"
             disabled={fileState.status === 'empty' || isUpdating}
             onClick={() => router.push('/pdf')}
           >
@@ -152,7 +152,7 @@ export default function UploadPageClient() {
                 <img
                   src="/sparkle.png"
                   alt="Sparkle Icon"
-                  className="h-5 w-5 mr-2"
+                  className="h-5 w-5 mr-2 dark:invert"
                 />
                 Generate Website
               </>
diff --git a/app/layout.tsx b/app/layout.tsx
index b5ea15d..175c6de 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import { ClerkProvider } from '@clerk/nextjs';
 import './globals.css';
 import { Toaster } from '@/components/ui/sonner';
 import { ReactQueryClientProvider } from '@/components/ReactQueryClientProvider';
+import { ThemeProvider } from '@/components/theme-provider';
 import { Metadata } from 'next';
 import PlausibleProvider from 'next-plausible';
 
@@ -28,7 +29,7 @@ export default function RootLayout({
     <ClerkProvider>
       <PlausibleProvider domain="self.so">
         <ReactQueryClientProvider>
-          <html lang="en">
+          <html lang="en" suppressHydrationWarning>
             <head>
               {/* {process.env.NODE_ENV === "development" && (
               <script
@@ -39,8 +40,10 @@ export default function RootLayout({
               {/* rest of your scripts go under */}
             </head>
             <body className={`${mono.className} min-h-screen flex flex-col`}>
-              <main className="flex-1 flex flex-col">{children}</main>
-              <Toaster richColors position="bottom-center" />
+              <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+                <main className="flex-1 flex flex-col">{children}</main>
+                <Toaster richColors position="bottom-center" />
+              </ThemeProvider>
             </body>
           </html>
         </ReactQueryClientProvider>
diff --git a/app/page.tsx b/app/page.tsx
index d0971fb..c6d6cdb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,18 +17,18 @@ export default function Home() {
             {/* Left side - Call to action */}
             <div className="w-full md:w-1/2 max-w-[378px] flex flex-col justify-center items-center md:items-start ">
               <div className="max-w-md text-center md:text-left">
-                <div className="inline-block font-mono gap-2.5 px-2.5 py-1.5 rounded bg-gray-100 text-sm mb-5 text-design-gray">
+                <div className="inline-block font-mono gap-2.5 px-2.5 py-1.5 rounded bg-muted text-sm mb-5 text-muted-foreground">
                   100% free & open source
                 </div>
 
-                <h1 className="text-[32px] font-bold mb-4 flex items-center justify-center md:justify-start gap-4 flex-wrap text-design-black font-mono leading-4">
+                <h1 className="text-[32px] font-bold mb-4 flex items-center justify-center md:justify-start gap-4 flex-wrap text-foreground font-mono leading-4">
                   <span>LinkedIn</span>
                   <img
                     src="/right-arrow.png"
                     alt="Arrow Right Icon"
                     width={32}
                     height={32}
-                    className="inline size-8"
+                    className="inline size-8 dark:invert"
                   />
                   <span>Website</span>
                   <br />
@@ -40,30 +40,30 @@ export default function Home() {
                     alt="Pointer Icon"
                     width={37}
                     height={37}
-                    className="size-[37px] text-gray-400"
+                    className="size-[37px] text-gray-400 dark:invert"
                   />
                 </h1>
 
-                <p className="text-base text-gray-600 mb-[30px] font-mono text-center md:text-left">
+                <p className="text-base text-muted-foreground mb-[30px] font-mono text-center md:text-left">
                   Turn your resume/LinkedIn
                   <br /> into a professional website.
                 </p>
 
                 <div className="relative flex flex-col items-center font-mono w-full md:w-fit">
                   <Link href="/upload">
-                    <Button className="relative group flex items-center bg-design-black hover:bg-design-black/95 text-white px-6 py-3 h-auto text-base overflow-hidden">
+                    <Button className="relative group flex items-center bg-primary hover:bg-primary/90 text-primary-foreground px-6 py-3 h-auto text-base overflow-hidden">
                       <div className="h-[120px] w-10 bg-gradient-to-r from-white/10 via-white/50 to-white/10 absolute blur-sm -rotate-45 -left-16 group-hover:left-[150%] duration-500 delay-200" />
                       <img
                         src="/sparkle.png"
                         alt="Sparkle Icon"
-                        className="h-5 w-5 mr-2 relative"
+                        className="h-5 w-5 mr-2 relative dark:invert"
                       />
                       <span className="relative">Upload Resume</span>
                       <BorderBeam colorFrom="#5d5d5d" colorTo="#ffffff" />
                     </Button>
                   </Link>
 
-                  <p className="text-sm text-gray-500 mt-4 text-center">
+                  <p className="text-sm text-muted-foreground mt-4 text-center">
                     Takes 1 minute!
                   </p>
                 </div>
diff --git a/components/CustomSpinner.tsx b/components/CustomSpinner.tsx
index 757f353..4ffbbb2 100644
--- a/components/CustomSpinner.tsx
+++ b/components/CustomSpinner.tsx
@@ -8,7 +8,7 @@ export const CustomSpinner = ({ className }: { className?: string }) => {
       viewBox="0 0 28 28"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn('animate-spin', className)}
+      className={cn('animate-spin dark:invert', className)}
     >
       <g clipPath="url(#clip0_199_1000)">
         <path
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 4caf9c6..8067081 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -2,14 +2,14 @@ import { TOGETHER_LINK } from '@/lib/utils';
 
 export function Footer() {
   return (
-    <footer className="w-full py-4 px-6  mt-auto border-t border-gray-200">
+    <footer className="w-full py-4 px-6 mt-auto border-t border-border">
       <div className="max-w-4xl justify-between items-center mx-auto w-full flex flex-col-reverse md:flex-row gap-2">
-        <div className="text-sm text-design-gray font-mono font-bold">
+        <div className="text-sm text-muted-foreground font-mono font-bold">
           Powered by{' '}
           <a
             target="_blank"
             href={TOGETHER_LINK}
-            className="text-design-black underline underline-offset-2"
+            className="text-foreground underline underline-offset-2"
           >
             Together.ai
           </a>{' '}
@@ -17,7 +17,7 @@ export function Footer() {
           <a
             target="_blank"
             href={TOGETHER_LINK}
-            className="text-design-black underline underline-offset-2"
+            className="text-foreground underline underline-offset-2"
           >
             Qwen Next
           </a>
@@ -28,18 +28,18 @@ export function Footer() {
             target="_blank"
             rel="noopener noreferrer"
             href="https://github.com/Nutlope/self.so"
-            className="size-6 flex items-center justify-center border-design-gray border rounded-md"
+            className="size-6 flex items-center justify-center border border-border rounded-md"
           >
-            <img src="/footer/github.svg" className="size-4" />
+            <img src="/footer/github.svg" className="size-4 dark:invert" />
             <span className="sr-only">GitHub</span>
           </a>
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://x.com/nutlope"
-            className="size-6 flex items-center justify-center border-design-gray border rounded-md"
+            className="size-6 flex items-center justify-center border border-border rounded-md"
           >
-            <img src="/footer/x.svg" className="size-4" />
+            <img src="/footer/x.svg" className="size-4 dark:invert" />
             <span className="sr-only">Social</span>
           </a>
         </div>
diff --git a/components/PreviewActionbar.tsx b/components/PreviewActionbar.tsx
index fac6f8f..7bb9352 100644
--- a/components/PreviewActionbar.tsx
+++ b/components/PreviewActionbar.tsx
@@ -34,13 +34,13 @@ export default function PreviewActionbar({
 
   return (
     <>
-      <div className="w-full rounded-lg bg-[#fcfcfc] border-[0.5px] border-neutral-300 flex items-center justify-between py-3 px-5  sm:px-4 sm:py-2.5  flex-col sm:flex-row gap-4">
+      <div className="w-full rounded-lg bg-card border-[0.5px] border-border flex items-center justify-between py-3 px-5  sm:px-4 sm:py-2.5  flex-col sm:flex-row gap-4">
         <div className="flex flex-col sm:flex-row items-center gap-4 w-full">
           <div className="flex items-center gap-1 mr-1">
             <img
               src="/link-icon.png"
               className={cn(
-                'w-4 h-4 text-design-black ',
+                'w-4 h-4 dark:invert',
                 status === 'live' && 'cursor-pointer'
               )}
               onClick={() => {
@@ -50,11 +50,11 @@ export default function PreviewActionbar({
                 toast.success('Copied link to your website');
               }}
             />
-            <p className="text-sm text-design-black">{prefix}</p>
+            <p className="text-sm text-foreground">{prefix}</p>
           </div>
 
-          <div className="overflow-hidden rounded bg-white border-[0.5px] border-neutral-300 flex flex-row md:w-80 w-full">
-            <span className="flex-1 p-3 text-sm text-[#5d5d5d] border-none outline-none focus:ring-0 bg-transparent w-fit truncate">
+          <div className="overflow-hidden rounded bg-background border-[0.5px] border-border flex flex-row md:w-80 w-full">
+            <span className="flex-1 p-3 text-sm text-muted-foreground border-none outline-none focus:ring-0 bg-transparent w-fit truncate">
               {initialUsername}
             </span>
 
@@ -113,13 +113,13 @@ export default function PreviewActionbar({
               onClick={handleStatusChange}
               className={`flex items-center min-w-[100px] min-h-8 gap-1.5 px-3 py-1.5 h-auto ${
                 status === 'draft'
-                  ? 'bg-design-black hover:bg-[#333333] text-[#fcfcfc]'
-                  : 'bg-design-white text-design-black hover:bg-gray-100'
+                  ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
+                  : 'bg-background text-foreground hover:bg-muted border border-border'
               }`}
             >
               {isChangingStatus ? (
                 <>
-                  <span className="mr-2 h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent"></span>
+                  <span className="mr-2 h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
                 </>
               ) : (
                 <span className="text-sm">
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..51c028f
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Moon, Sun, Monitor } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="size-9">
+          <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 size-4" />
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 size-4" />
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className="mr-2 size-4" />
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/TopMenu.tsx b/components/TopMenu.tsx
index 661e25b..dc41f57 100644
--- a/components/TopMenu.tsx
+++ b/components/TopMenu.tsx
@@ -1,22 +1,24 @@
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 export function TopMenu() {
   return (
     <>
       <header className="w-full py-4 md:px-0 px-6 flex justify-between items-center max-w-4xl mx-auto h-[67px]">
         <Link href="/" className="flex items-center gap-2">
-          <img src="/logo.svg" alt="Self.so Logo" className="h-[30px] w-auto" />
+          <img src="/logo.svg" alt="Self.so Logo" className="h-[30px] w-auto dark:invert" />
         </Link>
 
-        <div>
+        <div className="flex items-center gap-3">
+          <ThemeToggle />
           <SignedIn>
             {/* User is signed in */}
             <UserButton />
           </SignedIn>
           <SignedOut>
-            <div className="flex flex-row gap-3 font-mono ">
+            <div className="flex flex-row gap-3 font-mono">
               <a
                 href="https://github.com/nutlope/self.so"
                 target="_blank"
@@ -24,12 +26,12 @@ export function TopMenu() {
               >
                 <Button
                   variant="outline"
-                  className=" flex flex-row gap-1.5 py-2 px-4 border-gray-300 text-design-gray text-sm font-medium"
+                  className="flex flex-row gap-1.5 py-2 px-4 border text-muted-foreground text-sm font-medium"
                 >
                   <img
                     src="/github.svg"
                     alt="Github Logo"
-                    className="size-[14px]"
+                    className="size-[14px] dark:invert"
                   />
                   <span>Github</span>
                 </Button>
@@ -37,7 +39,7 @@ export function TopMenu() {
               <Link href="/upload">
                 <Button
                   variant="default"
-                  className="text-sm font-medium py-2 px-4 bg-design-black hover:bg-design-black/95"
+                  className="text-sm font-medium py-2 px-4 bg-primary hover:bg-primary/90 text-primary-foreground"
                 >
                   Sign up
                 </Button>
diff --git a/components/resume/Header.tsx b/components/resume/Header.tsx
index 5f07d64..a44a810 100644
--- a/components/resume/Header.tsx
+++ b/components/resume/Header.tsx
@@ -178,7 +178,13 @@ export function Header({
                 className="underline hover:text-foreground/70"
                 href={socialLinks.website}
               >
-                {new URL(socialLinks.website).hostname}
+                {(() => {
+                  try {
+                    return new URL(socialLinks.website).hostname;
+                  } catch {
+                    return socialLinks.website;
+                  }
+                })()}
               </a>
               <span aria-hidden="true">/</span>
             </>
diff --git a/components/resume/Summary.tsx b/components/resume/Summary.tsx
index e22e823..89e3774 100644
--- a/components/resume/Summary.tsx
+++ b/components/resume/Summary.tsx
@@ -17,7 +17,7 @@ export function Summary({ summary, className }: AboutProps) {
         About
       </h2>
       <div
-        className="text-pretty font-mono text-sm text-design-resume print:text-[12px]"
+        className="text-pretty font-mono text-sm text-design-resume print:text-[12px] whitespace-pre-wrap"
         aria-labelledby="about-section"
       >
         {summary}
diff --git a/components/resume/editing/EditResume.tsx b/components/resume/editing/EditResume.tsx
index de50e63..72fdc04 100644
--- a/components/resume/editing/EditResume.tsx
+++ b/components/resume/editing/EditResume.tsx
@@ -20,14 +20,14 @@ export const EditResume = ({
   const [isAddSkillDialogOpen, setIsAddSkillDialogOpen] = useState(false);
 
   const handleAddSkill = (skillToAdd: string) => {
-    if (resume.header.skills.includes(skillToAdd)) {
+    if ((resume.header.skills ?? []).includes(skillToAdd)) {
       toast.warning('This skill is already added.');
     } else {
       onChangeResume({
         ...resume,
         header: {
           ...resume.header,
-          skills: [...resume.header.skills, skillToAdd],
+          skills: [...(resume.header.skills ?? []), skillToAdd],
         },
       });
       toast.success('Skill added successfully.');
@@ -357,13 +357,13 @@ export const EditResume = ({
         <div className="space-y-4">
           <h2 className="text-xl font-bold">Skills</h2>
           <div className="flex flex-wrap gap-2">
-            {resume.header.skills.map((skill, index) => (
+            {(resume.header.skills ?? []).map((skill, index) => (
               <SkillField
                 key={index}
                 skill={skill}
                 index={index}
                 onUpdate={(index, updatedSkill) => {
-                  const newSkills = [...resume.header.skills];
+                  const newSkills = [...(resume.header.skills ?? [])];
                   newSkills[index] = updatedSkill;
                   onChangeResume({
                     ...resume,
@@ -374,7 +374,7 @@ export const EditResume = ({
                   });
                 }}
                 onDelete={(index) => {
-                  const newSkills = [...resume.header.skills];
+                  const newSkills = [...(resume.header.skills ?? [])];
                   newSkills.splice(index, 1);
                   onChangeResume({
                     ...resume,
diff --git a/styles/globals.css b/styles/globals.css
index 78f3af9..3cc4213 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -49,10 +49,10 @@ body {
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --background: 0 0% 9%;
+    --foreground: 0 0% 95%;
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 95%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;