diff --git a/app/announcements/page.tsx b/app/announcements/page.tsx
index 4c27fd1..094ba93 100644
--- a/app/announcements/page.tsx
+++ b/app/announcements/page.tsx
@@ -31,21 +31,21 @@ export default async function AnnouncementsPage() {
     <ul>
       {Array.from(groupedAnnouncements).map(
         ([dateKey, announcementForDate], index) => (
-          <li className="mb-6" key={index}>
+          <li className="mb-6 text-palette-900 dark:text-palette-100" key={index}>
             <h4>
               {dateKey.slice(0, 2)}
               <sup>{dateKey.slice(2, 4)}</sup>
               {dateKey.slice(4)}
             </h4>
 
-            <ul className="text-palette-300 ml-4 sm:ml-6 md:ml-8">
+            <ul className="text-palette-800 dark:text-palette-300 ml-4 sm:ml-6 md:ml-8">
               {announcementForDate.map((announcement, innerIndex) => (
                 <li className="list-disc mt-2" key={`${index}-${innerIndex}`}>
                   {announcement.subtitle ? (
                     <ul>
                       <li>
                         <a
-                          className="hover:text-palette-100"
+                          className="hover:text-palette-400 dark:hover:text-palette-100"
                           href={announcement.title_link}
                           target="_blank"
                         >
@@ -54,7 +54,7 @@ export default async function AnnouncementsPage() {
                       </li>
                       <li>
                         <a
-                          className="hover:text-palette-100"
+                          className="hover:text-palette-400 dark:hover:text-palette-100"
                           href={announcement.subtitle_link}
                           target="_blank"
                         >
@@ -64,7 +64,7 @@ export default async function AnnouncementsPage() {
                     </ul>
                   ) : (
                     <a
-                      className="hover:text-palette-100"
+                      className="hover:text-palette-400 dark:hover:text-palette-100"
                       href={announcement.title_link}
                       target="_blank"
                     >
diff --git a/app/breadcrumb.tsx b/app/breadcrumb.tsx
index b39eef3..68fdebf 100644
--- a/app/breadcrumb.tsx
+++ b/app/breadcrumb.tsx
@@ -1,56 +1,57 @@
-'use client';
+"use client";
 
-import clsx from 'clsx';
-import { signIn, signOut, useSession } from 'next-auth/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useSelectedLayoutSegments } from 'next/navigation';
-import { Fragment, useState } from 'react';
-import { BiBell } from 'react-icons/bi';
-import { BsLink45Deg, BsPersonFill } from 'react-icons/bs';
-import { TbLogout } from 'react-icons/tb';
+import clsx from "clsx";
+import { signIn, signOut, useSession } from "next-auth/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import { Fragment, useState } from "react";
+import { BiBell } from "react-icons/bi";
+import { BsLink45Deg, BsPersonFill } from "react-icons/bs";
+import { TbLogout } from "react-icons/tb";
 
-import ImageWithFallback from '@/components/fallback-image';
+import ImageWithFallback from "@/components/fallback-image";
+import DarkModeToggle from "@/components/dark-mode-toggle";
 
 const capitalise = (text: string) => {
   return text
-    .split(' ')
+    .split(" ")
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+    .join(" ");
 };
 
 const quickList = [
   {
-    heading: 'Calendars',
+    heading: "Calendars",
     items: [
-      { name: 'Academic Calendar', link: '1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U' },
-      { name: 'Holidays', link: '1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun' },
+      { name: "Academic Calendar", link: "1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U" },
+      { name: "Holidays", link: "1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun" },
     ],
   },
   {
-    heading: 'Syllabi',
+    heading: "Syllabi",
     items: [
-      { name: 'Civil Engineering', link: '16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d' },
-      { name: 'Computer Science', link: '1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL' },
+      { name: "Civil Engineering", link: "16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d" },
+      { name: "Computer Science", link: "1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL" },
       {
-        name: 'Electronics And Communication Engineering',
-        link: '1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-',
+        name: "Electronics And Communication Engineering",
+        link: "1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-",
       },
       {
-        name: 'Electrical Engineering',
-        link: '1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t',
+        name: "Electrical Engineering",
+        link: "1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t",
       },
       {
-        name: 'Information Technology',
-        link: '1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD',
+        name: "Information Technology",
+        link: "1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD",
       },
       {
-        name: 'Mechanical Engineering',
-        link: '1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI',
+        name: "Mechanical Engineering",
+        link: "1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI",
       },
       {
-        name: 'Production and Industrial Engineering',
-        link: '1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9',
+        name: "Production and Industrial Engineering",
+        link: "1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9",
       },
     ],
   },
@@ -58,7 +59,7 @@ const quickList = [
 
 export default function Breadcrumb() {
   const segments = useSelectedLayoutSegments()
-    .filter((segment) => !(segment.startsWith('(') && segment.endsWith(')')))
+    .filter((segment) => !(segment.startsWith("(") && segment.endsWith(")")))
     .map((segment) => decodeURIComponent(segment));
 
   const [showQuickList, setShowQuickList] = useState(false);
@@ -68,7 +69,7 @@ export default function Breadcrumb() {
   return (
     <nav
       aria-label="Breadcrumb"
-      className={clsx('mb-4 md:mb-8', 'bg-palette-700 py-2')}
+      className={clsx("mb-4 md:mb-8", "bg-palette-500 dark:bg-palette-700 py-2")}
     >
       <section className="container flex flex-wrap justify-between max-w-screen-lg md:text-[22px]">
         <ol className="gap-2 inline-flex items-center justify-start">
@@ -76,10 +77,10 @@ export default function Breadcrumb() {
             <Link href="/">
               <Image
                 className={clsx(
-                  'h-7 w-7',
-                  'sm:h-8 sm:w-8',
-                  'md:h-9 md:w-9',
-                  'rounded-full ring ring-palette-700 hover:ring-palette-200'
+                  "h-7 w-7",
+                  "sm:h-8 sm:w-8",
+                  "md:h-9 md:w-9",
+                  "rounded-full ring ring-palette-700 hover:ring-palette-200"
                 )}
                 height={34}
                 width={34}
@@ -94,11 +95,11 @@ export default function Breadcrumb() {
               <span>➜</span>
               <li
                 className={clsx(
-                  'sm:p-1 md:p-2',
-                  index === segments.length - 1 && 'font-bold'
+                  "sm:p-1 md:p-2",
+                  index === segments.length - 1 && "font-bold"
                 )}
               >
-                <Link href={'/' + segments.slice(0, index + 1).join('/')}>
+                <Link href={"/" + segments.slice(0, index + 1).join("/")}>
                   <h3 className="mb-0">{capitalise(segment)}</h3>
                 </Link>
               </li>
@@ -108,10 +109,23 @@ export default function Breadcrumb() {
 
         <ol
           className={clsx(
-            'sm:gap-1 md:gap-2',
-            'inline-flex items-center justify-end'
+            "sm:gap-1 md:gap-2",
+            "inline-flex items-center justify-end"
           )}
         >
+          <li className="p-1 relative">
+            <ol
+              className={clsx(
+                "sm:gap-1 md:gap-2",
+                "inline-flex items-center justify-end mt-2"
+              )}
+            >
+              <li>
+                <DarkModeToggle />
+              </li>
+            </ol>
+          </li>
+
           <li
             className="p-1 relative"
             onMouseEnter={() => {
@@ -122,7 +136,7 @@ export default function Breadcrumb() {
             }}
           >
             <BsLink45Deg
-              className={clsx('h-5 w-5', 'sm:h-6 sm:w-6', 'md:h-7 md:w-7')}
+              className={clsx("h-5 w-5", "sm:h-6 sm:w-6", "md:h-7 md:w-7")}
             />
             {showQuickList && (
               <nav className="absolute right-0 bg-palette-500 min-w-max mt-1 rounded-md shadow-lg">
@@ -170,25 +184,25 @@ export default function Breadcrumb() {
           </li> */}
 
           <li className="p-1">
-            {session && segments[0] == 'profile' ? (
+            {session && segments[0] == "profile" ? (
               <TbLogout
                 className={clsx(
-                  'hover:cursor-pointer',
-                  'h-5 w-5',
-                  'sm:h-6 sm:w-6',
-                  'md:h-7 md:w-7'
+                  "hover:cursor-pointer",
+                  "h-5 w-5",
+                  "sm:h-6 sm:w-6",
+                  "md:h-7 md:w-7"
                 )}
-                onClick={() => signOut({ callbackUrl: '/' })}
+                onClick={() => signOut({ callbackUrl: "/" })}
                 title="Sign Out"
               />
             ) : session ? (
               <Link href="/profile" title="Open Profile">
                 <ImageWithFallback
                   className={clsx(
-                    'rounded-full',
-                    'h-5 w-5',
-                    'sm:h-6 sm:w-6',
-                    'md:h-7 md:w-7'
+                    "rounded-full",
+                    "h-5 w-5",
+                    "sm:h-6 sm:w-6",
+                    "md:h-7 md:w-7"
                   )}
                   src={session.user?.image}
                   height={32}
@@ -199,12 +213,12 @@ export default function Breadcrumb() {
             ) : (
               <BsPersonFill
                 className={clsx(
-                  'hover:cursor-pointer',
-                  'h-5 w-5',
-                  'sm:h-6 sm:w-6',
-                  'md:h-7 md:w-7'
+                  "hover:cursor-pointer",
+                  "h-5 w-5",
+                  "sm:h-6 sm:w-6",
+                  "md:h-7 md:w-7"
                 )}
-                onClick={() => signIn('google', { callbackUrl: '/profile' })}
+                onClick={() => signIn("google", { callbackUrl: "/profile" })}
                 title="Sign in using Google"
               />
             )}
diff --git a/app/clubs/page.tsx b/app/clubs/page.tsx
index cdeefaf..d159319 100644
--- a/app/clubs/page.tsx
+++ b/app/clubs/page.tsx
@@ -26,7 +26,7 @@ const getCategorisedClubs = (
   const filteredClubs = clubs.filter((club) => club.category === category);
 
   if (filteredClubs.length === 0)
-    return <p>No club found for the {category} category</p>;
+    return <p className='text-red-400'>No club found for the {category} category</p>;
 
   return filteredClubs.map((club, index) => (
     <li key={index}>
@@ -63,7 +63,7 @@ export default async function ClubsPage() {
       {clubCategories.map((category: ClubCategory, categoryIndex) => {
         return (
           <Fragment key={categoryIndex}>
-            <h2>{category}</h2>
+            <h2 className='text-palette-700 dark:text-palette-100'>{category}</h2>
             <ol className="flex flex-row flex-wrap gap-2 sm:gap-4 mb-8">
               {getCategorisedClubs(category, clubs)}
             </ol>
diff --git a/app/courses/(non-code)/page.tsx b/app/courses/(non-code)/page.tsx
index 28de57e..61ff374 100644
--- a/app/courses/(non-code)/page.tsx
+++ b/app/courses/(non-code)/page.tsx
@@ -59,7 +59,7 @@ export default function CoursesPage() {
     <>
       <table className="w-full">
         <tbody>
-          <tr className="flex flex-row justify-between gap-4">
+          <tr className="flex flex-row justify-between gap-4 text-palette-800 dark:text-palette-100">
             <td className="border-none px-0">
               <fieldset className="p-2 sm:p-3 md:p-4 border-2 rounded border-palette-400">
                 <legend className="px-2">Choose your branch</legend>
@@ -124,15 +124,15 @@ export default function CoursesPage() {
 
       {!isLoading && !(branch && semester) && filteredCourses.length > 0 ? (
         <>
-          {branch || semester ? <></> : <h2>All courses</h2>}
-          {branch ? <h2>All courses in the {branch} branch</h2> : <></>}
-          {semester ? <h2>All courses in semester {semester}</h2> : <></>}
+          {branch || semester ? <></> : <h2 className='text-palette-800 dark:text-palette-100'>All courses</h2>}
+          {branch ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in the {branch} branch</h2> : <></>}
+          {semester ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in semester {semester}</h2> : <></>}
 
           <ul>
             {filteredCourses.map((course) => {
               return (
                 <Link href={`/courses/${course.code}`} key={course.code}>
-                  <li className="list-disclosure-closed ml-4">
+                  <li className="list-disclosure-closed ml-4 text-palette-800 dark:text-palette-100">
                     <h4>
                       {course.code}:{' '}
                       <span className="font-normal">{course.title}</span>
diff --git a/app/layout.tsx b/app/layout.tsx
index 845daa4..d10a77e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
   return (
     <html>
       <head />
-      <body className="flex flex-col">
+      <body className="flex flex-col bg-palette-200 dark:bg-palette-900">
         <noscript>You need to enable JavaScript to run this app</noscript>
 
         <AuthProvider>
@@ -24,7 +24,7 @@ export default function RootLayout({
           </section>
         </AuthProvider>
 
-        <footer className="bg-palette-800 py-4 mt-8">
+        <footer className="bg-palette-700 dark:bg-palette-800 py-4 mt-8">
           <section className="align-middle container flex flex-row flex-wrap justify-between max-w-screen-lg">
             <ul className="gap-4 inline-flex flex-wrap">
               <li>
diff --git a/app/page.tsx b/app/page.tsx
index b9637d3..4b6ecca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -41,11 +41,11 @@ export default function HomePage() {
   return (
     <article className="my-auto">
       <hgroup className="mb-12">
-        <h1 className="mb-6">
+        <h1 className="mb-6 text-palette-800 dark:text-palette-100">
           <Balancer>NIT-KKR Student Support</Balancer>
         </h1>
 
-        <p>
+        <p className='text-palette-600 dark:text-palette-200'>
           Welcome! This project aims to enable an easier path to figuring your
           way in this college! We have many more features planned that you can
           find out about on our Discord server linked below.
@@ -59,7 +59,7 @@ export default function HomePage() {
       <nav className="h-min">
         <ol className="grid grid-cols-1 sm:grid-cols-6 grid-auto-rows gap-8">
           <li
-            className={clsx('col-start-1 row-start-1 w-fit', 'sm:col-span-2')}
+            className={clsx('col-start-1 row-start-1 w-fit hover:shadow-lg shadow p-4 rounded-3xl', 'sm:col-span-2')}
           >
             <HomeCardsLayout
               href="/announcements"
@@ -72,7 +72,7 @@ export default function HomePage() {
 
           <li
             className={clsx(
-              'col-start-1 row-start-2 w-fit',
+              'col-start-1 row-start-2 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
               'sm:col-span-2 sm:col-start-5 sm:row-start-1 sm:justify-self-end',
               'md:col-start-3 md:row-start-1 md:justify-self-center'
             )}
@@ -88,7 +88,7 @@ export default function HomePage() {
 
           <li
             className={clsx(
-              'col-start-1 row-start-3 w-fit',
+              'col-start-1 row-start-3 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
               'sm:col-span-2 sm:col-start-3 sm:row-start-2 sm:justify-self-center',
               'md:col-start-5 md:row-start-1 md:justify-self-end'
             )}
diff --git a/components/chip.tsx b/components/chip.tsx
index d6ead62..35a7e74 100644
--- a/components/chip.tsx
+++ b/components/chip.tsx
@@ -20,7 +20,7 @@ export default function Chip({
         'md:h-8 md:px-3 md:text-sm',
         isSelected && 'bg-palette-500',
         'border items-center rounded-full',
-        'text-palette-200 hover:bg-palette-500'
+        'text-palette-800 dark:text-palette-200 hover:bg-palette-500 hover:text-palette-100'
       )}
       disabled={disabled}
       onClick={onClick}
diff --git a/components/dark-mode-toggle.tsx b/components/dark-mode-toggle.tsx
new file mode 100644
index 0000000..b0c479b
--- /dev/null
+++ b/components/dark-mode-toggle.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useState } from "react";
+
+const DarkModeToggle = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const handleClick = () => {
+    setIsDarkMode(!isDarkMode);
+    document.documentElement.classList.toggle("dark");
+  };
+
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input
+        type="checkbox"
+        value=""
+        className="sr-only peer"
+        onChange={handleClick}
+      />
+      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+    </label>
+  );
+};
+
+export default DarkModeToggle;
diff --git a/components/default-layout.tsx b/components/default-layout.tsx
index 19fe15f..9f0fb43 100644
--- a/components/default-layout.tsx
+++ b/components/default-layout.tsx
@@ -15,7 +15,7 @@ export default function DefaultLayout({
 }) {
   return (
     <>
-      <hgroup className="mb-2 sm:mb-4 md:mb-6">
+      <hgroup className="mb-2 sm:mb-4 md:mb-6 text-palette-700 dark:text-palette-100">
         <h1>
           <Balancer>{title}</Balancer>
         </h1>
diff --git a/components/home-cards-layout.tsx b/components/home-cards-layout.tsx
index a26d501..aabb2c0 100644
--- a/components/home-cards-layout.tsx
+++ b/components/home-cards-layout.tsx
@@ -26,7 +26,7 @@ export default function HomeCardsLayout({
           className={clsx(
             'h-12 w-12 p-3',
             'md:h-16 md:w-16 md:p-4',
-            'bg-palette-400 rounded-full'
+            'bg-palette-800 dark:bg-palette-400 rounded-full'
           )}
         >
           {children}
@@ -38,7 +38,7 @@ export default function HomeCardsLayout({
           >
             <Balancer className="min-w-fit">{title}</Balancer>
           </h3>
-          <p className="max-w-fit">
+          <p className="max-w-fit text-palette-800 dark:text-palette-300">
             <small className="min-w-fit">{description}</small>
           </p>
         </hgroup>
diff --git a/tailwind.config.js b/tailwind.config.js
index efe92e7..a8ddbd4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     container: {
       center: true,