diff --git a/package-lock.json b/package-lock.json
index fde3b35..c57a773 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
       "devDependencies": {
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
+        "clsx": "^2.1.1",
         "postcss": "^8.5.1",
         "prop-types": "^15.8.1",
         "tailwindcss": "^3.4.17",
@@ -1440,6 +1441,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index 55aea02..040d313 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "postcss": "^8.5.1",
     "prop-types": "^15.8.1",
     "tailwindcss": "^3.4.17",
diff --git a/src/App.jsx b/src/App.jsx
index c157eda..424e586 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,19 @@
-import { Projects } from './components';
+import clsx from 'clsx';
+import { Header, Projects } from './components';
 
 import { projects } from './data';
+import { useTheme } from './hooks';
 
 export default function App() {
+  const { isDarkMode } = useTheme();
   return (
-    <div className="container mx-auto w-full flex justify-center py-6">
+    <div
+      className={clsx(
+        'container mx-auto w-full flex flex-col gap-8 justify-center py-6',
+        isDarkMode && 'bg-gray-800'
+      )}
+    >
+      <Header />
       <Projects projects={projects} />
     </div>
   );
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..b23381d
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+import { useTheme } from '../hooks';
+
+export const Header = () => {
+  const { isDarkMode, toggleTheme } = useTheme();
+
+  return (
+    <header
+      className={clsx(
+        'flex justify-between items-center p-4',
+        isDarkMode ? 'app-dark' : 'app-light'
+      )}
+    >
+      <h1 className="text-xl font-bold">React JS Fall 2024</h1>
+      <button
+        onClick={toggleTheme}
+        className="px-4 py-2 border rounded-md text-sm font-medium"
+      >
+        {isDarkMode ? 'Light Mode' : 'Dark Mode'}
+      </button>
+    </header>
+  );
+};
diff --git a/src/components/index.jsx b/src/components/index.jsx
index 912fb59..4ff32c5 100644
--- a/src/components/index.jsx
+++ b/src/components/index.jsx
@@ -1 +1,2 @@
 export * from './project/Projects';
+export * from './Header';
diff --git a/src/components/project/Project.jsx b/src/components/project/Project.jsx
index 8b9d3a9..296f307 100644
--- a/src/components/project/Project.jsx
+++ b/src/components/project/Project.jsx
@@ -1,8 +1,11 @@
+import clsx from 'clsx';
 import { useState } from 'react';
 
+import { useTheme } from '../../hooks';
 import { ProjectPropType } from '../propTypesDefs';
 
 export const Project = ({ project }) => {
+  const { isDarkMode } = useTheme();
   const [selectedContributor, setSelectedContributor] = useState();
 
   return (
@@ -12,7 +15,12 @@ export const Project = ({ project }) => {
         {project.contributors.map((contributor) => (
           <button
             key={contributor}
-            className="text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-200 rounded-md px-4 py-2"
+            className={clsx(
+              'text-sm font-medium text-gray-500 hover:text-gray-700 border border-gray-200 rounded-md px-4 py-2',
+              isDarkMode
+                ? 'text-gray-300 hover:text-gray-400 border-gray-600'
+                : 'text-gray-500 hover:text-gray-700 border-gray-200'
+            )}
             onClick={() => setSelectedContributor(contributor)}
           >
             {contributor}
diff --git a/src/components/project/Projects.jsx b/src/components/project/Projects.jsx
index f84cac1..989bac3 100644
--- a/src/components/project/Projects.jsx
+++ b/src/components/project/Projects.jsx
@@ -1,12 +1,22 @@
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 import { ProjectPropType } from '../propTypesDefs';
 
+import { useTheme } from '../../hooks';
+
 import { Project } from './Project';
 
 export const Projects = ({ projects }) => {
+  const { isDarkMode } = useTheme();
+
   return (
-    <div className="container space-y-6">
+    <div
+      className={clsx(
+        'container space-y-6',
+        isDarkMode ? 'app-dark' : 'app-light'
+      )}
+    >
       {projects.map((project) => (
         <Project key={project.name} project={project} />
       ))}
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..21b7352
--- /dev/null
+++ b/src/contexts/ThemeContext.jsx
@@ -0,0 +1,26 @@
+import { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const ThemeContext = createContext({
+  isDarkMode: false,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    // document.documentElement.classList.toggle('dark', !isDarkMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/src/contexts/index.jsx b/src/contexts/index.jsx
new file mode 100644
index 0000000..4e34105
--- /dev/null
+++ b/src/contexts/index.jsx
@@ -0,0 +1 @@
+export * from './ThemeContext';
diff --git a/src/hooks/index.jsx b/src/hooks/index.jsx
new file mode 100644
index 0000000..7baad7d
--- /dev/null
+++ b/src/hooks/index.jsx
@@ -0,0 +1 @@
+export * from './useTheme';
diff --git a/src/hooks/useTheme.jsx b/src/hooks/useTheme.jsx
new file mode 100644
index 0000000..7f8b172
--- /dev/null
+++ b/src/hooks/useTheme.jsx
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts';
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};
diff --git a/src/index.css b/src/index.css
index b5c61c9..18911f7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.app-dark {
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1)) !important;
+}
+
+.app-light {
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
+}
diff --git a/src/main.jsx b/src/main.jsx
index 09d446d..16f1f83 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { ThemeProvider } from './contexts';
 import App from './App';
 
 import './index.css';
@@ -8,6 +9,8 @@ import './index.css';
 const root = createRoot(document.getElementById('react-app-root'));
 root.render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 );
diff --git a/tailwind.config.js b/tailwind.config.js
index d21f1cd..aaa470c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class', // Enable dark mode
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},