diff --git a/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx b/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx
index 2814efd5d..aa3a71100 100644
--- a/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx
+++ b/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx
@@ -41,12 +41,12 @@ export async function generateMetadata() {
 
 const heroDescription = (
   <div className="flex flex-col gap-y-4 z-20 relative font-inter max-w-3xl">
-    <p className="text-sm md:text-base text-gray-400">
+    <p className="text-sm md:text-base text-gray-700 dark:text-gray-400">
       Explore our curated lists of coding questions, ranging from Javascript, React, Node, Web
       Development. Perfect for your daily coding practice.
     </p>
     <div className="flex flex-col gap-y-2">
-      <p className="text-gray-400">Can't find what you're looking for?</p>
+      <p className="text-gray-700 dark:text-gray-400">Can't find what you're looking for?</p>
       <div className="flex items-center gap-x-2">
         <Button href="/questions" variant="secondary">
           View all questions
@@ -161,9 +161,9 @@ export default async function ExploreQuestionsPage() {
                 missionsPromise={missionsPromise}
                 userMissionRecordsPromise={userMissionRecordsPromise}
               />
-              <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg h-fit">
-                <div className="flex items-center space-x-2 text-white">
-                  <Mail className="size-5 text-white" />
+              <div className="bg-secondary dark:bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-secondary dark:border-black-50 p-4 rounded-lg h-fit">
+                <div className="flex items-center space-x-2 text-black dark:text-white">
+                  <Mail className="size-5 text-black dark:text-white" />
                   <span>Suggest a roadmap</span>
                 </div>
                 <p className="text-sm text-muted-foreground">
diff --git a/src/app/(app)/providers.tsx b/src/app/(app)/providers.tsx
index 86951d210..9e1237b37 100644
--- a/src/app/(app)/providers.tsx
+++ b/src/app/(app)/providers.tsx
@@ -7,10 +7,14 @@ export default function RootProvider({ children }: { children: React.ReactNode }
 
   return (
     <main
-      className={cn('w-full transition-[width] duration-200 ease-in-out', 'py-4 lg:pb-5', {
-        'lg:w-[calc(100%-15rem)]': state === 'expanded',
-        'lg:w-[calc(100%-3rem)]': state === 'collapsed',
-      })}
+      className={cn(
+        'w-full transition-[width] duration-200 ease-in-out bg-white dark:bg-[#000000]',
+        'py-4 lg:pb-5',
+        {
+          'lg:w-[calc(100%-15rem)]': state === 'expanded',
+          'lg:w-[calc(100%-3rem)]': state === 'collapsed',
+        }
+      )}
     >
       {children}
     </main>
diff --git a/src/app/globals.css b/src/app/globals.css
index 0b6c240fe..563101cb2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -255,7 +255,7 @@ html {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 5% 1;
+    --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -266,7 +266,7 @@ html {
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 237 59.3% 60%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
@@ -278,13 +278,13 @@ html {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 7%;
-    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 10% 3.9%;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 240 5.9% 90%;
     --sidebar-ring: 217.2 91.2% 59.8%;
     --mantine-color-text: var(--foreground) !important;
     --mantine-color-red-6: var(--foreground) !important;
@@ -294,6 +294,36 @@ html {
     --mantine-primary-color-light-hover: rgba(94, 102, 214, 0.12) !important;
     --mantine-color-gray-0: var(--background) !important;
   }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 5% 1;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 237 59.3% 60%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --sidebar-background: 0 0% 7%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 }
 
 @layer base {
@@ -301,7 +331,7 @@ html {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-white dark:bg-background text-foreground;
   }
 
   h1,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 21eed0993..292a82424 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,17 +3,24 @@ import { OnestFont } from './styles/fonts/font';
 import { UbuntuFont } from './styles/fonts/font';
 import { SatoshiFont } from './styles/fonts/font';
 import { InterFont } from './styles/fonts/font';
+import { ThemeProvider } from '@/components/theme-provider';
 import './globals.css';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <ReactQueryClientProvider>
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
         <body
           className={`${InterFont.variable} ${SatoshiFont.variable} ${UbuntuFont.variable} ${OnestFont.variable} antialiased`}
-          suppressHydrationWarning
         >
-          {children}
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
         </body>
       </html>
     </ReactQueryClientProvider>
diff --git a/src/components/app/dashboard/all-questions-bento-box.tsx b/src/components/app/dashboard/all-questions-bento-box.tsx
index 64974b947..e1c1a9480 100644
--- a/src/components/app/dashboard/all-questions-bento-box.tsx
+++ b/src/components/app/dashboard/all-questions-bento-box.tsx
@@ -42,15 +42,20 @@ export default function AllQuestionsDashboardBentoBox() {
   return (
     <section className="flex flex-col gap-y-5 group p-4 relative overflow-hidden h-[350px] lg:h-fit">
       <div className="space-y-3 z-10 relative">
-        <Chip color="bg-white" text="Questions" textColor="text-black" border="border-black-50" />
-        <h6 className="text-lg lg:text-xl flex items-center">
+        <Chip
+          color="bg-white"
+          text="Questions"
+          textColor="text-black"
+          border="border-secondary dark:border-black-50"
+        />
+        <h6 className="text-lg lg:text-xl flex items-center text-black dark:text-white">
           View all Questions
           <ArrowRight className="size-4 inline-block ml-1 group-hover:ml-2 duration-300" />
         </h6>
       </div>
 
       <div className="relative overflow-hidden mt-3 md:h-64 xl:h-[20rem]">
-        <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-[#000] to-transparent z-10" />
+        <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-white dark:from-[#000] to-transparent z-10" />
 
         {/* Scrolling content */}
         <div
@@ -63,7 +68,7 @@ export default function AllQuestionsDashboardBentoBox() {
         </div>
 
         {/* Bottom fade effect */}
-        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-[#000] to-transparent z-10" />
+        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-[#000] to-transparent z-10" />
       </div>
     </section>
   );
diff --git a/src/components/app/dashboard/dashboard-bento-grid.tsx b/src/components/app/dashboard/dashboard-bento-grid.tsx
index fccb848bd..50409399d 100644
--- a/src/components/app/dashboard/dashboard-bento-grid.tsx
+++ b/src/components/app/dashboard/dashboard-bento-grid.tsx
@@ -19,19 +19,19 @@ export default async function DashboardBentoGrid() {
     },
     {
       header: <AllQuestionsDashboardBentoBox />,
-      className: 'col-span-2 text-white lg:min-h-auto lg:h-[370px]',
+      className: 'col-span-2 text-black dark:text-white lg:min-h-auto lg:h-[370px]',
       href: '/questions',
       padded: false,
     },
     {
       header: <ProgressBentoBox />,
-      className: 'col-span-2 text-white lg:h-[370px]',
+      className: 'col-span-2 text-black dark:text-white lg:h-[370px]',
       padded: false,
     },
     {
       header: <NextRoadmapBentoBox />,
       className:
-        'h-full text-white justify-center min-h-[18rem] lg:h-[370px] col-span-2 lg:col-span-1',
+        'h-full text-black dark:text-white justify-center min-h-[18rem] lg:h-[370px] col-span-2 lg:col-span-1',
       href: studyPath ? `/roadmaps/${studyPath.studyPath.slug}` : '/roadmaps',
       padded: false,
       gradientBg: true,
diff --git a/src/components/app/dashboard/dashboard-question-card.tsx b/src/components/app/dashboard/dashboard-question-card.tsx
index 3abbf752d..4adede561 100644
--- a/src/components/app/dashboard/dashboard-question-card.tsx
+++ b/src/components/app/dashboard/dashboard-question-card.tsx
@@ -13,16 +13,16 @@ export default function DashboardQuestionCard(opts: DashboardQuestionCardProps)
   const { name, correct } = opts.question;
 
   return (
-    <div className="bg-black-100 border border-black-50 rounded-md p-4 mb-4">
+    <div className="bg-secondary dark:bg-black-100 border border-secondary dark:border-black-50 rounded-md p-4 mb-4">
       <div className="flex items-center">
-        <div className="flex items-center justify-center size-4 border rounded-sm border-black-50 mr-3">
+        <div className="flex items-center justify-center size-4 border rounded-sm border-secondary dark:border-black-50 mr-3">
           {correct ? (
-            <Check className="w-4 h-4 text-green-500" />
+            <Check className="size-4 text-green-500" />
           ) : (
-            <X className="w-4 h-4 text-red-500" />
+            <X className="size-4 text-red-500" />
           )}
         </div>
-        <span className={`text-sm font-ubuntu`}>{name}</span>
+        <span className={`text-sm font-ubuntu text-black dark:text-white`}>{name}</span>
       </div>
     </div>
   );
diff --git a/src/components/app/dashboard/next-question-bento-box.tsx b/src/components/app/dashboard/next-question-bento-box.tsx
index ad9c6d9bd..7d511b5f4 100644
--- a/src/components/app/dashboard/next-question-bento-box.tsx
+++ b/src/components/app/dashboard/next-question-bento-box.tsx
@@ -41,8 +41,8 @@ export default async function NextQuestionBentoBox() {
       <>
         <div className="flex w-full justify-between mb-4 gap-4">
           <div className="space-y-1">
-            <h6 className="text-xl">Your Next Challenge Awaits</h6>
-            <p className="text-xs font-onest text-gray-400">
+            <h6 className="text-xl text-black dark:text-white">Your Next Challenge Awaits</h6>
+            <p className="text-xs font-onest text-gray-600 dark:text-gray-400">
               Take just 2 minutes to answer your next question and keep your streak alive!
             </p>
           </div>
@@ -52,7 +52,7 @@ export default async function NextQuestionBentoBox() {
         </div>
         <div className="flex flex-wrap space-y-2 w-full items-end justify-between">
           <div className="space-y-1">
-            <h6>Topics to Explore:</h6>
+            <h6 className="text-black dark:text-white">Topics to Explore:</h6>
             <div className="flex gap-x-2 mt-2">
               <TagDisplay tags={tags} numberOfTags={2} variant="default" />
             </div>
@@ -61,8 +61,11 @@ export default async function NextQuestionBentoBox() {
 
         <div className="w-fit flex self-center relative -bottom-8 sm:-bottom-20 md:-bottom-8 lg:-bottom-20 group-hover:lg:-bottom-14 duration-300">
           <DatePicker
-            className="z-30 text-white bg-black-100 border border-black-50 p-2 rounded-md hover:cursor-default xs:scale-100 sm:scale-125 md:scale-105 xl:scale-[1.2] group-hover:lg:scale-[1.07] group-hover:xl:scale-[1.22] duration-300"
-            color="white"
+            className="
+              z-30 text-black dark:text-white bg-secondary dark:bg-black-100 border border-white/80 dark:border-black-50 
+              dark:border-white-50 p-2 rounded-md hover:cursor-default xs:scale-100 sm:scale-125 md:scale-105 xl:scale-[1.2] 
+              group-hover:lg:scale-[1.07] group-hover:xl:scale-[1.22] duration-300
+            "
             type="range"
             value={dateArray}
             c="gray"
diff --git a/src/components/app/dashboard/progression-bento-box.tsx b/src/components/app/dashboard/progression-bento-box.tsx
index cc3e1f6e2..1b54d9059 100644
--- a/src/components/app/dashboard/progression-bento-box.tsx
+++ b/src/components/app/dashboard/progression-bento-box.tsx
@@ -64,21 +64,21 @@ export default async function ProgressBentoBox() {
     >
       <div className="absolute z-10">
         <Chip
-          textColor="text-white"
-          color="bg-primary"
+          textColor="text-black dark:text-white"
+          color="bg-secondarybg-primary"
           text={user?.userLevel === 'FREE' ? 'Upgrade to access Roadmaps' : 'Roadmaps'}
-          border="border-black-50"
+          border="border-secondary dark:border-black-50"
         />
       </div>
       <Grid size={20} position="top-right" />
       <div className="h-full flex items-center justify-center relative">
         <InfiniteMovingCards items={items} speed="slow" />
-        <Separator className="absolute top-1/2 -translate-y-1/2 z-50 bg-black-50" />
+        <Separator className="absolute top-1/2 -translate-y-1/2 z-50 bg-secondary dark:bg-black-50" />
       </div>
       <div className="flex flex-col md:flex-row gap-y-2 w-full justify-between items-end">
         <div className="space-y-1">
-          <h6 className="text-xl">Personalised Progression</h6>
-          <p className="hidden md:block font-satoshi text-sm">
+          <h6 className="text-xl text-black dark:text-white">Personalised Progression</h6>
+          <p className="hidden md:block font-satoshi text-sm text-black dark:text-white">
             Your very own, personalised progression framework to help you grow as a developer.
           </p>
         </div>
diff --git a/src/components/app/navigation/sidebar-dropdown.tsx b/src/components/app/navigation/sidebar-dropdown.tsx
index 474805cce..7c0a6e580 100644
--- a/src/components/app/navigation/sidebar-dropdown.tsx
+++ b/src/components/app/navigation/sidebar-dropdown.tsx
@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import LogoutButton from '@/components/auth/logout';
 import ProfilePicture from '@/components/ui/profile-picture';
+import { ThemeToggle } from '@/components/theme-toggle';
 
 import type { UserRecord } from '@/types/User';
 import { getUserDisplayName } from '@/utils/user';
@@ -38,12 +39,12 @@ export default function SidebarAreaComponent(opts: {
   const { user } = opts;
 
   return (
-    <SidebarContent className="bg-[#000000] w-full p-0">
+    <SidebarContent className="bg-white dark:bg-[#000000] w-full p-0">
       <SidebarMenu>
         <SidebarMenuItem>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <SidebarMenuButton variant="default" className="text-white h-fit">
+              <SidebarMenuButton variant="default" className="text-black dark:text-white h-fit">
                 <ProfilePicture
                   src={user?.userProfilePicture}
                   alt="Profile Picture"
@@ -51,17 +52,17 @@ export default function SidebarAreaComponent(opts: {
                 />
 
                 <div className="flex flex-col">
-                  <span className="text-white font-medium text-lg line-clamp-1">
+                  <span className="text-black dark:text-white font-medium text-lg line-clamp-1">
                     {user && getUserDisplayName(user)}
                   </span>
-                  <span className="text-xs text-white">
+                  <span className="text-xs text-black dark:text-white">
                     {capitalise(user?.userLevel || 'Anonymous')}
                   </span>
                 </div>
                 <ChevronsUpDown className="ml-auto" />
               </SidebarMenuButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56 bg-[#000] !text-white border-black-50">
+            <DropdownMenuContent className="w-56 bg-white dark:bg-[#000000] !text-black dark:text-white border-black-50 dark:border-white-50">
               <DropdownMenuItem>
                 <Link href={getUpgradeUrl()} className="w-full">
                   Upgrade
@@ -84,6 +85,16 @@ export default function SidebarAreaComponent(opts: {
               <DropdownMenuItem>
                 <Link href="https://git.new/blitz">GitHub</Link>
               </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Button
+                  variant="ghost"
+                  padding="none"
+                  className="flex items-center gap-x-2 h-auto !bg-transparent justify-between"
+                >
+                  <span>Theme</span>
+                  <ThemeToggle />
+                </Button>
+              </DropdownMenuItem>
               {user && (
                 <DropdownMenuItem>
                   <LogoutButton variant="ghost" padding="none" />
diff --git a/src/components/app/navigation/sidebar-footer.tsx b/src/components/app/navigation/sidebar-footer.tsx
index 3c0a0eb48..98222fdf6 100644
--- a/src/components/app/navigation/sidebar-footer.tsx
+++ b/src/components/app/navigation/sidebar-footer.tsx
@@ -14,7 +14,7 @@ export default function SidebarFooter({ user }: SidebarFooterProps) {
   const pathname = usePathname();
 
   return (
-    <div className="p-4 flex flex-col gap-4">
+    <div className="p-4 flex flex-col gap-4 bg-white dark:bg-[#000000] border-t-0">
       {!user && (
         <SidebarMenuItem className="group-data-[collapsible=icon]:hidden flex flex-col gap-2">
           <Button variant="default" fullWidth className="" href={`/login?redirectUrl=${pathname}`}>
diff --git a/src/components/app/navigation/sidebar.tsx b/src/components/app/navigation/sidebar.tsx
index e5182a52a..9eb91386e 100644
--- a/src/components/app/navigation/sidebar.tsx
+++ b/src/components/app/navigation/sidebar.tsx
@@ -282,14 +282,14 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
                 {state === 'collapsed' ? (
                   <Link href={item.url} className="flex items-center w-full" prefetch>
                     {item.icon && <item.icon />}
-                    <span className="text-sm font-inter group-data-[collapsible=icon]:hidden">
+                    <span className="text-sm font-inter group-data-[collapsible=icon]:hidden text-black dark:text-white">
                       {item.title}
                     </span>
                     <div className="ms-auto group-data-[collapsible=icon]:hidden">
                       {item.chip && <item.chip />}
                     </div>
                     <div className="group-data-[collapsible=icon]:hidden">
-                      <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
+                      <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
                     </div>
                   </Link>
                 ) : (
@@ -335,11 +335,15 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
                   href={item.url}
                   prefetch
                   className={`flex items-center font-inter font-medium text-sm py-2 ${
-                    isActive(item.url) ? 'bg-black-25 text-white border border-black-50' : ''
+                    isActive(item.url)
+                      ? 'bg-black-25 dark:bg-white-25 text-white dark:text-black border border-secondary dark:border-black-50 dark:border-white-50'
+                      : ''
                   }`}
                 >
                   {item.icon && <item.icon />}
-                  <span className="text-sm group-data-[collapsible=icon]:hidden">{item.title}</span>
+                  <span className="text-sm group-data-[collapsible=icon]:hidden text-black dark:text-white">
+                    {item.title}
+                  </span>
                   {item.chip && (
                     <div className="ms-auto group-data-[collapsible=icon]:hidden">
                       {item.chip && <item.chip />}
@@ -364,7 +368,7 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
 
   return (
     <Sidebar collapsible="icon" className="z-50 group">
-      <SidebarContent className="py-6 bg-[#000000]">
+      <SidebarContent className="py-6 bg-white dark:bg-[#000000]">
         <SidebarGroup>
           <SidebarGroupLabel className="w-full flex items-center px-0">
             <SidebarDropdown user={user} profile={profile} />
@@ -373,14 +377,14 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
           <div className="hidden group-data-[collapsible=icon]:flex items-center justify-center h-8 mb-5">
             <Link
               href="/dashboard"
-              className="text-sm xl:text-2xl font-inter hover:text-white duration-300 size-10"
+              className="text-sm xl:text-2xl font-inter hover:text-white duration-300 size-10 text-black dark:text-white"
               prefetch
               aria-label="Go back to dashboard"
             >
               <SidebarDropdown user={user} profile={profile} />
             </Link>
           </div>
-          <SidebarGroupContent className="mt-10 bg-[#000000]">
+          <SidebarGroupContent className="mt-10 bg-white dark:bg-[#000000]">
             <SidebarMenu>{items.map((item) => renderSidebarItem(item))}</SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
diff --git a/src/components/app/shared/feedback/feedback-button.tsx b/src/components/app/shared/feedback/feedback-button.tsx
index 9c36a5e13..63670c817 100644
--- a/src/components/app/shared/feedback/feedback-button.tsx
+++ b/src/components/app/shared/feedback/feedback-button.tsx
@@ -34,7 +34,10 @@ export default function FeedbackButton({
           {icon && <MsgWriting height="1.25rem" width="1.25rem" />}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-80 bg-black-75 text-white border border-black-50" align="end">
+      <PopoverContent
+        className="w-80 bg-white dark:bg-black-75 text-black dark:text-white border border-secondary dark:border-black-50"
+        align="end"
+      >
         <FeedbackModal title={title} description={description} reference={reference}>
           {children}
         </FeedbackModal>
diff --git a/src/components/app/shared/feedback/feedback-modal.tsx b/src/components/app/shared/feedback/feedback-modal.tsx
index 8ee9dc07b..ec2156b6c 100644
--- a/src/components/app/shared/feedback/feedback-modal.tsx
+++ b/src/components/app/shared/feedback/feedback-modal.tsx
@@ -48,7 +48,7 @@ export function FeedbackModal({
         placeholder="Enter your feedback here..."
         value={feedback}
         onChange={(e) => setFeedback(e.target.value)}
-        className="mb-4 text-white border border-black-50"
+        className="mb-4 text-black dark:text-white border border-secondary dark:border-black-50"
         disabled={isPending}
       />
       <div className="flex justify-end gap-2">
@@ -72,7 +72,7 @@ export function FeedbackModal({
                     repeat: Number.POSITIVE_INFINITY,
                     ease: 'linear',
                   }}
-                  className="w-5 h-5 border-2 border-white border-t-transparent rounded-full"
+                  className="size-5 border-2 border-black dark:border-white border-t-transparent rounded-full"
                 />
               ) : (
                 <motion.span
diff --git a/src/components/app/shared/question/daily-goals-card.tsx b/src/components/app/shared/question/daily-goals-card.tsx
index 62f78044a..5d2bd2b44 100644
--- a/src/components/app/shared/question/daily-goals-card.tsx
+++ b/src/components/app/shared/question/daily-goals-card.tsx
@@ -39,13 +39,13 @@ const DailyGoalsCard: React.FC<DailyGoalsCardProps> = ({
     <motion.div
       initial={{ height: 'auto' }}
       transition={{ duration: 0.3 }}
-      className="bg-[#090909] border border-black-50 rounded-lg p-4 overflow-hidden"
+      className="bg-secondary dark:bg-[#090909] border border-secondary dark:border-black-50 rounded-lg p-4 overflow-hidden"
     >
       <div className="flex items-center gap-x-2">
         {/*
         <Spaceship2 height="36" width="36" />
         */}
-        <h3 className="font-semibold">Daily Missions</h3>
+        <h3 className="font-semibold text-black dark:text-white">Daily Missions</h3>
       </div>
 
       <motion.div variants={container} initial="hidden" animate="show" className="mt-6 space-y-6">
@@ -83,7 +83,7 @@ function MissionItem({
       </div>
       <div className="flex flex-col gap-y-1 w-full">
         <div className="flex items-center gap-x-2">
-          <p className="text-sm text-white font-onest">{mission.title}</p>
+          <p className="text-sm text-black dark:text-white font-onest">{mission.title}</p>
           {userMissionRecord?.status === 'COMPLETED' && (
             <Check height="16" width="16" className="text-green-500" />
           )}
diff --git a/src/components/app/shared/upgrade/upgrade-card.tsx b/src/components/app/shared/upgrade/upgrade-card.tsx
index be1e2611c..d09f8f8ed 100644
--- a/src/components/app/shared/upgrade/upgrade-card.tsx
+++ b/src/components/app/shared/upgrade/upgrade-card.tsx
@@ -11,8 +11,8 @@ export default function UpgradeCard({
   description?: string;
 }) {
   return (
-    <div className="bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg">
-      <div className="flex items-center space-x-2 text-white">
+    <div className="bg-secondary dark:bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-secondary dark:border-black-50 p-4 rounded-lg">
+      <div className="flex items-center space-x-2 text-black dark:text-white">
         <Sparkles className="size-7 text-yellow-400 fill-yellow-500" />
         <span>{title || 'Looking for a more personalized experience?'}</span>
       </div>
diff --git a/src/components/app/study-paths/study-path-card.tsx b/src/components/app/study-paths/study-path-card.tsx
index f82d43b02..c3975f7fe 100644
--- a/src/components/app/study-paths/study-path-card.tsx
+++ b/src/components/app/study-paths/study-path-card.tsx
@@ -20,19 +20,21 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) {
     <Link
       href={roadmapUrl}
       className={cn(
-        'rounded-lg h-fit w-full overflow-hidden transition-all duration-300 bg-[#090909] hover:border-black border border-black-50 group',
+        'rounded-lg h-fit w-full overflow-hidden transition-all duration-300 bg-secondary dark:bg-[#090909] hover:border-black border border-secondary dark:border-black-50 group',
         !studyPath.isPublished && 'cursor-not-allowed'
       )}
     >
       <CardHeader className="relative p-0">
         <div className="relative p-4 text-primary-foreground group-hover:opacity-80 transition-all duration-300">
-          <h3 className="text-xl font-bold mb-2">{studyPath.title}</h3>
-          <p className="text-xs text-gray-400 line-clamp-2">{studyPath.description}</p>
+          <h3 className="text-xl font-bold mb-2 text-black dark:text-white">{studyPath.title}</h3>
+          <p className="text-xs text-gray-700 dark:text-gray-400 line-clamp-2">
+            {studyPath.description}
+          </p>
         </div>
       </CardHeader>
       <CardContent className="p-4 pt-3 relative">
         <div className="flex flex-col gap-y-2 w-full">
-          <div className="text-sm text-gray-400 font-onest">
+          <div className="text-sm text-gray-700 dark:text-gray-400 font-onest">
             {/** if 100% then show 100% else show the progress */}
             {Math.round(
               user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid)?.progress ??
@@ -40,7 +42,7 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) {
             ) === 100 ? (
               <div className="flex items-center gap-x-2">
                 <CheckCircle className="size-4 text-green-500" />
-                <p className="text-sm text-gray-400 font-onest">completed</p>
+                <p className="text-sm text-gray-700 dark:text-gray-400 font-onest">completed</p>
               </div>
             ) : (
               `${Math.round(
@@ -50,7 +52,7 @@ export async function StudyPathCard({ studyPath }: { studyPath: StudyPath }) {
             )}
           </div>
           <Progress
-            className="border border-black-50 bg-black-50 relative z-10"
+            className="border border-secondary dark:border-black-50 bg-secondary dark:bg-black-50 relative z-10"
             value={
               user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid)?.progress ??
               0
diff --git a/src/components/app/study-paths/study-path-goal-modal.tsx b/src/components/app/study-paths/study-path-goal-modal.tsx
index 148ec13a0..3be9d2b7e 100644
--- a/src/components/app/study-paths/study-path-goal-modal.tsx
+++ b/src/components/app/study-paths/study-path-goal-modal.tsx
@@ -221,7 +221,7 @@ export default function StudyPathGoalModal({ user, studyPath, goal }: StudyPathG
         </motion.div>
       </DialogTrigger>
 
-      <DialogContent className="bg-black max-w-[39.4rem]">
+      <DialogContent className="bg-secondary dark:bg-black max-w-[39.4rem]">
         <DialogHeader className="flex flex-col">
           <ArcheryTarget height="48" width="48" />
           <motion.div
@@ -230,14 +230,14 @@ export default function StudyPathGoalModal({ user, studyPath, goal }: StudyPathG
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.2, duration: 0.3 }}
           >
-            <DialogTitle className="text-2xl">Set a Goal</DialogTitle>
+            <DialogTitle className="text-2xl text-black dark:text-white">Set a Goal</DialogTitle>
             <DialogDescription className="flex flex-col gap-y-2">
-              <p>
+              <p className="text-black dark:text-white">
                 Set a goal date to complete this study path. Receive a daily reminder to complete
                 the next question.
               </p>
               <div className="flex items-center gap-x-2">
-                <p>
+                <p className="text-black dark:text-white">
                   Your recommended completion date is{' '}
                   {recommendedCompletionDate?.toLocaleDateString('en-US', {
                     month: 'long',
diff --git a/src/components/app/study-paths/study-path-sidebar.tsx b/src/components/app/study-paths/study-path-sidebar.tsx
index 612b55d6e..12af9a60f 100644
--- a/src/components/app/study-paths/study-path-sidebar.tsx
+++ b/src/components/app/study-paths/study-path-sidebar.tsx
@@ -104,7 +104,7 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study
                   </div>
                 ) : (
                   <>
-                    <p className="text-sm text-gray-400 font-onest">
+                    <p className="text-sm text-gray-700 dark:text-gray-400 font-onest">
                       {Math.round(
                         user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid)
                           ?.progress ?? 0
@@ -112,7 +112,7 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study
                       % completed
                     </p>
                     <Progress
-                      className="border border-black-50 bg-black-50"
+                      className="border border-secondary dark:border-black-50 bg-secondary dark:bg-black-50"
                       value={
                         user?.studyPathEnrollments?.find((e) => e.studyPathUid === studyPath.uid)
                           ?.progress ?? 0
@@ -137,8 +137,8 @@ export default async function StudyPathSidebar({ studyPath }: { studyPath: Study
                 />
               </div>
 
-              <div className="w-full md:w-1/2 lg:w-full bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-black-50 p-4 rounded-lg">
-                <div className="flex items-center space-x-2 text-white">
+              <div className="w-full md:w-1/2 lg:w-full bg-secondary dark:bg-[#090909] flex flex-col gap-y-2 backdrop-blur-sm border border-secondary dark:border-black-50 p-4 rounded-lg">
+                <div className="flex items-center space-x-2 text-black dark:text-white">
                   <ArcheryTarget height="36" width="36" />
                   <h3 className="text-lg font-semibold">Set a Goal</h3>
                 </div>
diff --git a/src/components/marketing/global/navigation/mobile-menu.tsx b/src/components/marketing/global/navigation/mobile-menu.tsx
index dd3049b65..696e2e52c 100644
--- a/src/components/marketing/global/navigation/mobile-menu.tsx
+++ b/src/components/marketing/global/navigation/mobile-menu.tsx
@@ -9,6 +9,7 @@ import { HamburgerMenuIcon, Cross1Icon, ChevronDownIcon } from '@radix-ui/react-
 import { ArrowRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useUser } from '@/hooks/use-user';
+import { ThemeToggle } from '@/components/theme-toggle';
 
 interface MenuItem {
   label: string;
@@ -165,6 +166,10 @@ export function MobileMenu() {
             </ul>
           </nav>
           <div className="mt-auto py-4">
+            <div className="flex items-center justify-between mb-4">
+              <span className="text-sm font-medium">Theme</span>
+              <ThemeToggle />
+            </div>
             {isLoggedIn ? (
               <Button
                 href="/dashboard"
diff --git a/src/components/marketing/global/navigation/navigation.tsx b/src/components/marketing/global/navigation/navigation.tsx
index d81f44672..bd84eeeae 100644
--- a/src/components/marketing/global/navigation/navigation.tsx
+++ b/src/components/marketing/global/navigation/navigation.tsx
@@ -4,6 +4,7 @@ import { NavigationMenuItems } from '@/components/marketing/global/navigation/na
 import { MobileMenu } from '@/components/marketing/global/navigation/mobile-menu';
 import NavigationButtons from '@/components/marketing/global/navigation/navigation-buttons';
 import { GithubStars } from '@/components/marketing/global/navigation/navigation-buttons';
+import { ThemeToggle } from '@/components/theme-toggle';
 
 export default function MarketingNavigation() {
   return (
@@ -20,12 +21,14 @@ export default function MarketingNavigation() {
         {/* Right side content */}
         <div className="flex items-center gap-x-2">
           {/* Show NavigationButtons only on desktop */}
-          <div className="hidden lg:block h-9">
+          <div className="hidden lg:flex items-center gap-x-2">
+            <ThemeToggle />
             <NavigationButtons />
           </div>
 
           {/* Show GitHub stars and mobile menu on mobile */}
           <div className="flex items-center gap-x-2 lg:hidden">
+            <ThemeToggle />
             <GithubStars />
             <MobileMenu />
           </div>
diff --git a/src/components/shared/hero.tsx b/src/components/shared/hero.tsx
index 6ae121722..55762a67a 100644
--- a/src/components/shared/hero.tsx
+++ b/src/components/shared/hero.tsx
@@ -15,14 +15,14 @@ export default function Hero(opts: {
       <div className={cn('flex flex-col gap-y-3 z-10', container ? 'md:container' : '')}>
         {chip}
         {typeof heading === 'string' ? (
-          <h1 className="relative z-20 text-3xl md:text-5xl text-wrap text-start font-onest max-w-2xl text-gradient from-white to-white/55 py-1">
+          <h1 className="relative z-20 text-3xl md:text-5xl text-wrap text-start font-onest max-w-2xl text-gradient from-black to-black/55 dark:from-white dark:to-white/55 py-1">
             {heading}
           </h1>
         ) : (
           heading
         )}
         {typeof subheading === 'string' ? (
-          <h6 className="text-sm md:text-base text-gray-400 font-onest max-w-xl z-50">
+          <h6 className="text-sm md:text-base text-gray-700 dark:text-gray-400 font-onest max-w-xl z-50">
             {subheading}
           </h6>
         ) : (
@@ -33,7 +33,7 @@ export default function Hero(opts: {
       <Grid size={25} position="bottom-left" />
 
       {/* Fade-out gradient overlay */}
-      <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-[#000000] to-transparent pointer-events-none"></div>
+      <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white dark:from-[#000000] to-transparent pointer-events-none"></div>
     </section>
   );
 }
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
new file mode 100644
index 000000000..530befd6e
--- /dev/null
+++ b/src/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+'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>;
+}
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 000000000..658b37fea
--- /dev/null
+++ b/src/components/theme-toggle.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex items-center gap-x-2">
+          <Sun className="rotate-0 size-3 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute rotate-90 size-3 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="bg-white dark:bg-[#000000]">
+        <DropdownMenuItem className="text-black dark:text-white" onClick={() => setTheme('light')}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem className="text-black dark:text-white" onClick={() => setTheme('dark')}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem className="text-black dark:text-white" onClick={() => setTheme('system')}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
index 072ac7145..ca94b274e 100644
--- a/src/components/ui/bento-grid.tsx
+++ b/src/components/ui/bento-grid.tsx
@@ -60,7 +60,7 @@ export const BentoGridItem = ({
   };
 
   const baseClasses = cn(
-    'rounded-xl group/bento overflow-hidden hover:shadow-xl transition duration-200 shadow-input border border-black-50 justify-between flex flex-col',
+    'rounded-xl group/bento overflow-hidden hover:shadow-xl transition duration-200 shadow-input border border-secondary dark:border-black-50 justify-between flex flex-col',
     header || title || description || icon ? 'space-y-3 md:space-y-4' : '',
     className,
     padded ? 'p-3 md:p-4' : ''
@@ -71,18 +71,6 @@ export const BentoGridItem = ({
       {renderContent()}
     </Link>
   ) : (
-    <div
-      className={baseClasses}
-      style={
-        gradientBg
-          ? {
-              background:
-                'radial-gradient(128% 107% at 0% 0%,#212121 0%,rgb(0,0,0) 77.61472409909909%)',
-            }
-          : undefined
-      }
-    >
-      {renderContent()}
-    </div>
+    <div className={cn(baseClasses, 'bg-white dark:bg-transparent')}>{renderContent()}</div>
   );
 };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index b5ee4cf18..e8d7f4fe2 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -24,11 +24,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-red-600 text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default:
+          'bg-secondary dark:bg-primary text-black dark:text-primary-foreground shadow hover:bg-secondary/90 dark:hover:bg-primary/90',
+        destructive:
+          'bg-red-600 dark:bg-red-600 text-destructive-foreground shadow-sm hover:bg-destructive/90 dark:hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm shadow-black/5 hover:bg-primary hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
+          'bg-secondary dark:bg-primary text-secondary-foreground shadow-sm hover:bg-secondary/80 dark:hover:bg-primary/80',
         ghost: 'hover:text-gray-400 duration-300',
         link: 'text-primary underline-offset-4 hover:underline',
         accent: 'bg-accent text-white shadow-sm hover:bg-accent/90 font-onest',
diff --git a/src/components/ui/current-streak.tsx b/src/components/ui/current-streak.tsx
index 11292a587..f4fe7ffd0 100644
--- a/src/components/ui/current-streak.tsx
+++ b/src/components/ui/current-streak.tsx
@@ -38,7 +38,9 @@ async function CurrentStreakData() {
 
   return (
     <div className="flex items-center gap-x-1">
-      <p className="font-onest font-medium">{userStreak?.streakData?.currentstreakCount ?? 0}</p>
+      <p className="font-onest font-medium text-black dark:text-white">
+        {userStreak?.streakData?.currentstreakCount ?? 0}
+      </p>
     </div>
   );
 }
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 84751c91f..54278aff1 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'hover:!text-white hover:!bg-black-50 relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'text-black dark:text-white hover:!text-white hover:!bg-black-50 dark:hover:!bg-white-50 relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
diff --git a/src/components/ui/grid.tsx b/src/components/ui/grid.tsx
index e716474b2..33042786f 100644
--- a/src/components/ui/grid.tsx
+++ b/src/components/ui/grid.tsx
@@ -31,14 +31,14 @@ export const Grid = ({
       className={`pointer-events-none absolute ${positionClasses[position]} 
       w-full h-full -mt-2 [mask-image:linear-gradient(white,transparent)]`}
     >
-      <div className="absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] from-zinc-900/30 to-zinc-900/30 opacity-100">
+      <div className="absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] from-zinc-900/30 to-zinc-900/30 dark:from-zinc-100/20 dark:to-zinc-100/20 opacity-100">
         <GridPattern
           width={size ?? 20}
           height={size ?? 20}
           x="-12"
           y="4"
           squares={p}
-          className="absolute inset-0 h-full w-full mix-blend-overlay fill-white/10 stroke-black-50 z-0"
+          className="absolute inset-0 h-full w-full mix-blend-overlay fill-white/10 stroke-secondary dark:stroke-black-50 dark:fill-black/10 z-0"
         />
       </div>
     </div>
diff --git a/src/components/ui/icons/blog-3.tsx b/src/components/ui/icons/blog-3.tsx
index 0a7cbd9a5..accc22955 100644
--- a/src/components/ui/icons/blog-3.tsx
+++ b/src/components/ui/icons/blog-3.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { cn } from '@/lib/utils';
 
 type iconProps = {
   fill?: string;
@@ -7,32 +8,33 @@ type iconProps = {
   width?: string;
   height?: string;
   title?: string;
+  className?: string;
 };
 
 function Blog3(props: iconProps) {
-  const fill = props.fill || 'white';
   const strokewidth = props.strokewidth || 2;
   const width = props.width || '1em';
   const height = props.height || '1em';
   const title = props.title || 'blog 3';
+  const className = props.className || '';
 
   return (
     <svg
-      className="text-white"
+      className={cn('text-[#000000] dark:text-white', className)}
       height={height}
       width={width}
       viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title>{title}</title>
-      <g fill={fill} strokeLinecap="butt" strokeLinejoin="miter">
+      <g strokeLinecap="butt" strokeLinejoin="miter">
         <rect
           height="28"
           width="24"
           fill="none"
           rx="3"
           ry="3"
-          stroke="white"
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
@@ -43,7 +45,7 @@ function Blog3(props: iconProps) {
           height="8"
           width="14"
           fill="none"
-          stroke="white"
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
@@ -52,7 +54,7 @@ function Blog3(props: iconProps) {
         />
         <line
           fill="none"
-          stroke="white"
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
@@ -63,7 +65,7 @@ function Blog3(props: iconProps) {
         />
         <line
           fill="none"
-          stroke="white"
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
diff --git a/src/components/ui/icons/home.tsx b/src/components/ui/icons/home.tsx
index 952ca3e2f..98a6f8a3a 100644
--- a/src/components/ui/icons/home.tsx
+++ b/src/components/ui/icons/home.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { cn } from '@/lib/utils';
 
 type iconProps = {
   fill?: string;
@@ -7,24 +8,30 @@ type iconProps = {
   width?: string;
   height?: string;
   title?: string;
+  className?: string;
 };
 
 function Home3(props: iconProps) {
-  const fill = props.fill || 'currentColor';
-  const secondaryfill = props.secondaryfill || fill;
   const strokewidth = props.strokewidth || 1;
   const width = props.width || '1em';
   const height = props.height || '1em';
   const title = props.title || 'home 3';
+  const className = props.className || '';
 
   return (
-    <svg height={height} width={width} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={cn('text-black dark:text-white', className)}
+      height={height}
+      width={width}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <title>{title}</title>
-      <g fill={fill} strokeLinecap="butt" strokeLinejoin="miter">
+      <g strokeLinecap="butt" strokeLinejoin="miter">
         <polyline
           fill="none"
           points="2 13 16 2 30 13"
-          stroke={fill}
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
@@ -32,14 +39,14 @@ function Home3(props: iconProps) {
         <polyline
           fill="none"
           points="13 29 13 20 19 20 19 29"
-          stroke={secondaryfill}
+          stroke="currentColor"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
         />
         <path
           d="m5,16v10c0,1.657,1.343,3,3,3h16c1.657,0,3-1.343,3-3v-10"
           fill="none"
-          stroke={fill}
+          stroke="currentColor"
           strokeLinecap="square"
           strokeMiterlimit="10"
           strokeWidth={strokewidth}
diff --git a/src/components/ui/infinite-moving-cards.tsx b/src/components/ui/infinite-moving-cards.tsx
index da5bba1a7..44ba06ed0 100644
--- a/src/components/ui/infinite-moving-cards.tsx
+++ b/src/components/ui/infinite-moving-cards.tsx
@@ -33,7 +33,7 @@ export const InfiniteMovingCards = ({
           return (
             <div
               className={cn(
-                'bg-[#000] w-[150px] relative rounded-2xl border flex-shrink-0 border-black-50 p-4 md:w-[200px] transition-all',
+                'bg-secondary dark:bg-[#000] w-[150px] relative rounded-2xl border flex-shrink-0 border-secondary dark:border-black-50 p-4 md:w-[200px] transition-all',
                 idx % 2 === 0 ? '-translate-y-16' : 'translate-y-16'
               )}
               key={`${item.name}-${idx}`}
@@ -41,7 +41,7 @@ export const InfiniteMovingCards = ({
               {/* Roadmap marker line */}
               <div
                 className={cn(
-                  'absolute left-1/2 w-px bg-black-50',
+                  'absolute left-1/2 w-px bg-secondary dark:bg-black-50',
                   idx % 2 === 0
                     ? 'bottom-0 h-[25px] translate-y-full'
                     : 'top-0 h-[25px] -translate-y-full'
@@ -50,7 +50,7 @@ export const InfiniteMovingCards = ({
                 {/* Dot at the connection point */}
                 <div
                   className={cn(
-                    'absolute left-1/2 size-1.5 rounded-full bg-black-50 -translate-x-1/2',
+                    'absolute left-1/2 size-1.5 rounded-full bg-secondary dark:bg-black-50 -translate-x-1/2',
                     idx % 2 !== 0 ? 'top-0' : 'bottom-0'
                   )}
                 />
@@ -61,7 +61,9 @@ export const InfiniteMovingCards = ({
                 className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
               ></div>
               <div className="relative z-20 flex size-full justify-center items-center">
-                <span className="text-white font-onest text-center">{item.title}</span>
+                <span className="text-black dark:text-white font-onest text-center">
+                  {item.title}
+                </span>
               </div>
             </div>
           );
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 89b916781..3873d7e05 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -14,7 +14,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      'shrink-0 bg-border',
+      'shrink-0 bg-secondary dark:bg-border',
       orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
       className
     )}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index b70c7d4d9..1ae0cdb28 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -237,7 +237,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col border-r border-black-50 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-black-50 group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col border-r border-secondary dark:border-black-50 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-secondary dark:group-data-[variant=floating]:border-black-50 group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
diff --git a/src/components/ui/user-xp.tsx b/src/components/ui/user-xp.tsx
index cda3f2884..df3c7f8dd 100644
--- a/src/components/ui/user-xp.tsx
+++ b/src/components/ui/user-xp.tsx
@@ -11,7 +11,7 @@ interface UserXpProps {
 async function UserXpData() {
   const { userXp } = await getUserXp();
 
-  return <p className="font-onest font-medium">{userXp} XP</p>;
+  return <p className="font-onest font-medium text-black dark:text-white">{userXp} XP</p>;
 }
 
 export default async function UserXp({ className }: UserXpProps) {