diff --git a/app/_components/ThemeProvider.js b/app/_components/ThemeProvider.js
new file mode 100644
index 0000000..7b9dd8b
--- /dev/null
+++ b/app/_components/ThemeProvider.js
@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+const ThemeContext = createContext(undefined);
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState("dark");
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        // Get theme from localStorage or default to dark
+        const savedTheme = localStorage.getItem("theme") || "dark";
+        setTheme(savedTheme);
+        document.documentElement.setAttribute("data-theme", savedTheme);
+        setMounted(true);
+    }, []);
+
+    const toggleTheme = () => {
+        const newTheme = theme === "dark" ? "light" : "dark";
+        setTheme(newTheme);
+        localStorage.setItem("theme", newTheme);
+        document.documentElement.setAttribute("data-theme", newTheme);
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme, mounted }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within ThemeProvider");
+    }
+    return context;
+}
diff --git a/app/_components/ThemeToggle.js b/app/_components/ThemeToggle.js
new file mode 100644
index 0000000..71849ed
--- /dev/null
+++ b/app/_components/ThemeToggle.js
@@ -0,0 +1,33 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "./ThemeProvider";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+    const [mounted, setMounted] = useState(false);
+    const { theme, toggleTheme } = useTheme();
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className="fixed top-4 left-4 z-50 rounded-full p-2 bg-foreground/10 hover:bg-foreground/20 transition-colors duration-200 flex items-center justify-center"
+            aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+            title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+        >
+            {theme === "dark" ? (
+                <Sun size={24} className="text-yellow-400" />
+            ) : (
+                <Moon size={24} className="text-gray-700" />
+            )}
+        </button>
+    );
+}
diff --git a/app/_components/TheoryTooltip.js b/app/_components/TheoryTooltip.js
index 2f076f4..054ab3e 100644
--- a/app/_components/TheoryTooltip.js
+++ b/app/_components/TheoryTooltip.js
@@ -17,22 +17,22 @@ export default function TheoryTooltip({ id }) {
                 onMouseEnter={() => setIsVisible(true)}
                 onMouseLeave={() => setIsVisible(false)}
                 onClick={() => setIsVisible(!isVisible)}
-                className="text-gray-600 hover:text-blue-600 transition-colors duration-200 focus:outline-none flex items-center"
+                className="text-gray-400 hover:text-blue-400 transition-colors duration-200 focus:outline-none flex items-center"
                 aria-label="Theoretical Information"
             >
                 <Info size={18} />
             </button>
 
             {isVisible && (
-                <div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 p-4 rounded-2xl bg-white/90 backdrop-blur-xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] transition-all duration-200 ease-out transform opacity-100 scale-100">
+                <div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 p-4 rounded-2xl bg-gray-800 backdrop-blur-xl border border-gray-600 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] transition-all duration-200 ease-out transform opacity-100 scale-100 text-foreground">
                     <div className="relative">
-                        <h5 className="font-bold text-gray-900 text-sm mb-1 uppercase tracking-wider">
+                        <h5 className="font-bold text-foreground text-sm mb-1 uppercase tracking-wider">
                             {data.title}
                         </h5>
-                        <p className="text-gray-600 text-xs leading-relaxed">
+                        <p className="text-gray-300 text-xs leading-relaxed">
                             {data.explanation}
                         </p>
-                        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 border-8 border-transparent border-t-white/90" />
+                        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 border-8 border-transparent border-t-gray-800" />
                     </div>
                 </div>
             )}
diff --git a/app/auth/page.js b/app/auth/page.js
index be75bff..798ffff 100644
--- a/app/auth/page.js
+++ b/app/auth/page.js
@@ -74,8 +74,8 @@ export default function Auth() {
     };
 
     return (
-        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
-            <div className="flex items-center justify-center overflow-hidden h-32">
+        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+            <div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
                 <Image
                     src="/LOGO.png"
                     alt="EVOLVE OnClick logo"
@@ -87,13 +87,13 @@ export default function Auth() {
             <main className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
                 <form
                     onSubmit={handleLogin}
-                    className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
+                    className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
                 >
                     <div className="mb-4">
-                        <h2 className="text-xl font-semibold text-center">
+                        <h2 className="text-xl font-semibold text-center text-foreground">
                             Sign In To EvOC
                         </h2>
-                        <p className="text-xs text-gray-500 text-center">
+                        <p className="text-xs text-foreground text-center opacity-60">
                             Sign in to your account to continue.
                         </p>
                     </div>
@@ -103,7 +103,7 @@ export default function Auth() {
                         placeholder="Email/Username"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -113,7 +113,7 @@ export default function Auth() {
                         placeholder="Password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
-                        className="w-full p-2 mb-3 border rounded-xl"
+                        className="w-full p-2 mb-3 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -139,7 +139,7 @@ export default function Auth() {
 
                     <button
                         type="submit"
-                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
                         disabled={isLoading}
                     >
                         {isLoading ? "Loading..." : "Sign In ->"}
diff --git a/app/auth/recover/page.js b/app/auth/recover/page.js
index 2b7e789..fa02c5d 100644
--- a/app/auth/recover/page.js
+++ b/app/auth/recover/page.js
@@ -68,8 +68,8 @@ export default function Recover() {
     };
 
     return (
-        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
-            <div className="flex items-center justify-center overflow-hidden h-32">
+        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+            <div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
                 <Image
                     src="/LOGO.png"
                     alt="EVOLVE OnClick logo"
@@ -80,13 +80,13 @@ export default function Recover() {
             <div className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
                 <form
                     onSubmit={handleSubmit}
-                    className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
+                    className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
                 >
                     <div className="mb-4">
-                        <h2 className="text-xl font-semibold text-center">
+                        <h2 className="text-xl font-semibold text-center text-foreground">
                             Recover Your Password
                         </h2>
-                        <p className="text-xs text-gray-500 text-center">
+                        <p className="text-xs text-foreground text-center opacity-60">
                             Enter your email to get started.
                         </p>
                     </div>
@@ -96,13 +96,13 @@ export default function Recover() {
                         placeholder="Email"
                         value={formData.email}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
                     <button
                         type="submit"
-                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
+                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
                             isLoading ? "opacity-50 cursor-not-allowed" : ""
                         }`}
                         disabled={isLoading}
@@ -111,7 +111,7 @@ export default function Recover() {
                     </button>
                 </form>
                 <div className="flex flex-wrap gap-4 justify-center mt-8">
-                    <p className="text-gray-500 text-center">
+                    <p className="text-gray-400 text-center">
                         Create a new account
                     </p>
                     <Link
diff --git a/app/auth/recover/verify/page.js b/app/auth/recover/verify/page.js
index db313ea..dc33e08 100644
--- a/app/auth/recover/verify/page.js
+++ b/app/auth/recover/verify/page.js
@@ -83,8 +83,8 @@ export default function VerifyOTP() {
     };
 
     return (
-        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
-            <div className="flex items-center justify-center overflow-hidden h-32">
+        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+            <div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
                 <Image
                     src="/LOGO.png"
                     alt="EVOLVE OnClick logo"
@@ -95,22 +95,22 @@ export default function VerifyOTP() {
             <div className="flex flex-col flex-grow min-w-[32%] w-full md:max-w-[80%] lg:max-w-[60%] xl:max-w-[40%] mx-auto justify-center items-center align-middle">
                 <form
                     onSubmit={handleSubmit}
-                    className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
+                    className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
                 >
                     <div className="mb-4">
-                        <h2 className="text-xl font-semibold text-center">
+                        <h2 className="text-xl font-semibold text-center text-foreground">
                             Verify OTP
                         </h2>
-                        <p className="text-xs text-gray-500 text-center break-words px-2">
+                        <p className="text-xs text-foreground text-center break-words px-2 opacity-60">
                             {`Please enter the OTP sent to ${email ?? "your email"}.`}
                         </p>
-                        <p className="text-xs text-gray-500 text-center break-words px-2 mt-2 mx-auto justify-center items-center align-middle">
+                        <p className="text-xs text-foreground text-center break-words px-2 mt-2 mx-auto justify-center items-center align-middle opacity-60">
                             OTP will be sent only if the email is registered. If
                             you did not receive an OTP, please check the email
                             ID you typed again and{" "}
                             <Link
                                 href="/auth/recover"
-                                className="text-blue-600 hover:text-blue-800 underline cursor-pointer"
+                                className="text-blue-400 hover:text-blue-300 underline cursor-pointer"
                             >
                                 retry
                             </Link>
@@ -123,7 +123,7 @@ export default function VerifyOTP() {
                         placeholder="Enter OTP"
                         value={formData.otp}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         pattern="\d*"
                         maxLength={6}
@@ -137,7 +137,7 @@ export default function VerifyOTP() {
                         placeholder="Enter new password"
                         value={formData.newPassword}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -147,13 +147,13 @@ export default function VerifyOTP() {
                         placeholder="Confirm new password"
                         value={formData.confirmPassword}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
                     <button
                         type="submit"
-                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
+                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
                             isLoading ? "opacity-50 cursor-not-allowed" : ""
                         }`}
                         disabled={isLoading}
diff --git a/app/auth/register/page.js b/app/auth/register/page.js
index b5583bd..af5eddf 100644
--- a/app/auth/register/page.js
+++ b/app/auth/register/page.js
@@ -83,8 +83,8 @@ export default function Register() {
     };
 
     return (
-        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
-            <div className="flex items-center justify-center overflow-hidden h-32">
+        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+            <div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
                 <Image
                     src="/LOGO.png"
                     alt="EVOLVE OnClick logo"
@@ -95,13 +95,13 @@ export default function Register() {
             <div className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
                 <form
                     onSubmit={handleSubmit}
-                    className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
+                    className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
                 >
                     <div className="mb-4">
-                        <h2 className="text-xl font-semibold text-center">
+                        <h2 className="text-xl font-semibold text-center text-foreground">
                             Sign Up for EvOC
                         </h2>
-                        <p className="text-xs text-gray-500 text-center">
+                        <p className="text-xs text-foreground text-center opacity-60">
                             Create your account to get started.
                         </p>
                     </div>
@@ -111,7 +111,7 @@ export default function Register() {
                         placeholder="Full Name"
                         value={formData.fullName}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -121,7 +121,7 @@ export default function Register() {
                         placeholder="Choose an Username"
                         value={formData.username}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -131,7 +131,7 @@ export default function Register() {
                         placeholder="Email"
                         value={formData.email}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -141,7 +141,7 @@ export default function Register() {
                         placeholder="Password"
                         value={formData.password}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
@@ -151,13 +151,13 @@ export default function Register() {
                         placeholder="Confirm Password"
                         value={formData.confirmPassword}
                         onChange={handleChange}
-                        className="w-full p-2 mt-4 mb-3 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         disabled={isLoading}
                     />
                     <button
                         type="submit"
-                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
+                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
                             isLoading ? "opacity-50 cursor-not-allowed" : ""
                         }`}
                         disabled={isLoading}
@@ -166,7 +166,7 @@ export default function Register() {
                     </button>
                 </form>
                 <div className="flex flex-wrap gap-4 justify-center mt-8">
-                    <p className="text-gray-500 text-center">
+                    <p className="text-gray-400 text-center">
                         Already have an account?
                     </p>
                     <Link
diff --git a/app/auth/register/verify/page.js b/app/auth/register/verify/page.js
index 4b681f5..73b372a 100644
--- a/app/auth/register/verify/page.js
+++ b/app/auth/register/verify/page.js
@@ -65,8 +65,8 @@ export default function VerifyOTP() {
     };
 
     return (
-        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
-            <div className="flex items-center justify-center overflow-hidden h-32">
+        <div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+            <div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
                 <Image
                     src="/LOGO.png"
                     alt="EVOLVE OnClick logo"
@@ -77,13 +77,13 @@ export default function VerifyOTP() {
             <div className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
                 <form
                     onSubmit={handleSubmit}
-                    className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
+                    className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
                 >
                     <div className="mb-4">
-                        <h2 className="text-xl font-semibold text-center">
+                        <h2 className="text-xl font-semibold text-center text-foreground">
                             Verify OTP
                         </h2>
-                        <p className="text-xs text-gray-500 text-center break-words px-2">
+                        <p className="text-xs text-foreground text-center break-words px-2 opacity-60">
                             {`Please enter the OTP sent to ${email ?? "your email"}.`}
                         </p>
                     </div>
@@ -93,7 +93,7 @@ export default function VerifyOTP() {
                         placeholder="Enter OTP"
                         value={otp}
                         onChange={(e) => setOtp(e.target.value)}
-                        className="w-full p-2 mt-4 border rounded-xl"
+                        className="w-full p-2 mt-4 border rounded-xl input-field"
                         required
                         pattern="\d*"
                         maxLength={6}
@@ -103,7 +103,7 @@ export default function VerifyOTP() {
                     />
                     <button
                         type="submit"
-                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
+                        className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
                             isLoading ? "opacity-50 cursor-not-allowed" : ""
                         }`}
                         disabled={isLoading}
diff --git a/app/bin/ea/[id]/page.js b/app/bin/ea/[id]/page.js
index f9fb2f6..2f15282 100644
--- a/app/bin/ea/[id]/page.js
+++ b/app/bin/ea/[id]/page.js
@@ -890,13 +890,13 @@ export default function Execution() {
                                 <button
                                     type="button"
                                     onClick={() => setShowSharePopup(false)}
-                                    className="rounded-full px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+                                    className="rounded-full px-4 py-2 text-sm font-medium border border-gray-600 bg-gray-900 text-foreground hover:bg-gray-800"
                                 >
                                     Cancel
                                 </button>
                                 <button
                                     type="submit"
-                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full   border border-black gap-2"
+                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base h-12 p-4 w-full   border border-yellow-600 gap-2"
                                 >
                                     Share
                                 </button>
diff --git a/app/bin/gp/[id]/page.js b/app/bin/gp/[id]/page.js
index 26057b9..7f9fffe 100644
--- a/app/bin/gp/[id]/page.js
+++ b/app/bin/gp/[id]/page.js
@@ -900,13 +900,13 @@ export default function GPRunResult() {
                                 <button
                                     type="button"
                                     onClick={() => setShowSharePopup(false)}
-                                    className="rounded-full px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+                                    className="rounded-full px-4 py-2 text-sm font-medium border border-gray-600 bg-gray-900 text-foreground hover:bg-gray-800"
                                 >
                                     Cancel
                                 </button>
                                 <button
                                     type="submit"
-                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full   border border-black gap-2"
+                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base h-12 p-4 w-full   border border-yellow-600 gap-2"
                                 >
                                     Share
                                 </button>
diff --git a/app/bin/ml/[id]/page.js b/app/bin/ml/[id]/page.js
index f731a2c..ab94b9b 100644
--- a/app/bin/ml/[id]/page.js
+++ b/app/bin/ml/[id]/page.js
@@ -915,7 +915,7 @@ export default function MLExecResult() {
                                 </button>
                                 <button
                                     type="submit"
-                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full   border border-black gap-2"
+                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base h-12 p-4 w-full   border border-yellow-600 gap-2"
                                 >
                                     Share
                                 </button>
diff --git a/app/bin/page.js b/app/bin/page.js
index 13d97d9..0a0362c 100644
--- a/app/bin/page.js
+++ b/app/bin/page.js
@@ -221,10 +221,10 @@ export default function Results() {
                                                             className="transition-transform duration-500 hover:scale-110"
                                                         />
                                                     </div>
-                                                    <p className="text-gray-600 text-sm truncate">
+                                                    <p className="text-gray-400 text-sm truncate">
                                                         {run.description}
                                                     </p>
-                                                    <p className="text-gray-500 text-xs mt-2">
+                                                    <p className="text-gray-400 text-xs mt-2">
                                                         {run.name.split("-")[0]}{" "}
                                                         generations
                                                     </p>
@@ -271,7 +271,7 @@ export default function Results() {
                                                         </p>
                                                     )}
 
-                                                    <p className="text-gray-500 text-xs mt-2 mb-6">
+                                                    <p className="text-gray-400 text-xs mt-2 mb-6">
                                                         Created At:{" "}
                                                         {
                                                             run.createdAt
@@ -280,7 +280,7 @@ export default function Results() {
                                                         }
                                                     </p>
                                                     <Link
-                                                        className="rounded-full border border-solid border-yellow-900 transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 gap-2 text-sm sm:text-base p-2 h-8 mt-auto w-full"
+                                                        className="rounded-full border border-solid border-yellow-600 transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 gap-2 text-sm sm:text-base p-2 h-8 mt-auto w-full"
                                                         href={`/bin/${runType}/${run.id}`}
                                                     >
                                                         <DnaIcon size={24} />
diff --git a/app/bin/pso/[id]/page.js b/app/bin/pso/[id]/page.js
index 5a46b80..7a022c8 100644
--- a/app/bin/pso/[id]/page.js
+++ b/app/bin/pso/[id]/page.js
@@ -851,7 +851,7 @@ export default function PSOExecResult() {
                                 </button>
                                 <button
                                     type="submit"
-                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full   border border-black gap-2"
+                                    className="rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base h-12 p-4 w-full   border border-yellow-600 gap-2"
                                 >
                                     Share
                                 </button>
diff --git a/app/create/gp/_components/bloatLimits.js b/app/create/gp/_components/bloatLimits.js
index faed4a0..b8be149 100644
--- a/app/create/gp/_components/bloatLimits.js
+++ b/app/create/gp/_components/bloatLimits.js
@@ -24,7 +24,7 @@ export default function ConfigureBloatLimits({
                     <input
                         type="number"
                         value={mateHeight}
-                        className="border border-gray-300 p-2 rounded-lg"
+                        className="border border-gray-600 p-2 rounded-lg bg-gray-800 text-foreground"
                         placeholder="Enter a number"
                         onChange={(e) => {
                             if (isNaN(e.target.value)) {
@@ -51,7 +51,7 @@ export default function ConfigureBloatLimits({
                     <input
                         type="number"
                         value={mutHeight}
-                        className="border border-gray-300 p-2 rounded-lg"
+                        className="border border-gray-600 p-2 rounded-lg bg-gray-800 text-foreground"
                         placeholder="Enter a number"
                         onChange={(e) => {
                             if (isNaN(e.target.value)) {
diff --git a/app/create/gp/_components/equation.js b/app/create/gp/_components/equation.js
index c6da553..1dbf958 100644
--- a/app/create/gp/_components/equation.js
+++ b/app/create/gp/_components/equation.js
@@ -70,7 +70,7 @@ export default function ConfigureEquation({
                         type="number"
                         min="0"
                         value={degree}
-                        className="border border-gray-300 p-2 rounded-lg w-full"
+                        className="border border-gray-600 p-2 rounded-lg w-full bg-gray-800 text-foreground"
                         placeholder="Enter degree of the polynomial"
                         onChange={(e) => handleDegreeChange(e)}
                     />
@@ -93,7 +93,7 @@ export default function ConfigureEquation({
                                         <input
                                             type="text"
                                             value={coefficients[index] || ""}
-                                            className="border border-gray-300 p-2 rounded-lg w-full"
+                                            className="border border-gray-600 p-2 rounded-lg w-full bg-gray-800 text-foreground"
                                             placeholder={`Enter coefficient for x^${degree - i}`}
                                             onChange={(e) =>
                                                 handleCoefficientChange(
@@ -112,7 +112,7 @@ export default function ConfigureEquation({
                 {/* Display Polynomial Equation */}
                 <div className="mt-4">
                     <h5 className="text-lg font-bold">Polynomial Equation</h5>
-                    <p className="mt-2 p-4 border border-gray-300 rounded-lg bg-gray-50">
+                    <p className="mt-2 p-4 border border-gray-600 rounded-lg bg-gray-800 text-foreground">
                         {formatEquation(equation) ||
                             "Equation will appear here"}
                     </p>
diff --git a/app/create/gp/page.js b/app/create/gp/page.js
index 4f14ffa..bfeb307 100644
--- a/app/create/gp/page.js
+++ b/app/create/gp/page.js
@@ -292,7 +292,7 @@ export default function ConfigureGP() {
                 </Link>
             </div>
 
-            <div className="flex flex-wrap mt-16 gap-4 border border-gray-400 rounded-2xl bg-gray-100 bg-opacity-70">
+            <div className="flex flex-wrap mt-16 gap-4 border border-gray-600 rounded-2xl bg-gray-900 bg-opacity-70">
                 <PreviewGP
                     algo={chosenAlgo}
                     parameters={parameters}
@@ -321,7 +321,7 @@ export default function ConfigureGP() {
                     currentStep={currentStep}
                 />
 
-                <div className="border border-gray-400 rounded-2xl p-4 bg-white">
+                <div className="border border-gray-600 rounded-2xl p-4 bg-gray-900">
                     <form
                         onSubmit={(e) => {
                             e.preventDefault();
@@ -331,7 +331,7 @@ export default function ConfigureGP() {
                         <h3 className="text-xl font-bold">
                             Configure Algorithm
                         </h3>
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-gray-400">
                             Genetic Programming -{" "}
                             <span className="text-green-500">
                                 PrimitiveTree
diff --git a/app/create/non-gp/_components/getIndividualSize.js b/app/create/non-gp/_components/getIndividualSize.js
index 7db761d..e79a0bb 100644
--- a/app/create/non-gp/_components/getIndividualSize.js
+++ b/app/create/non-gp/_components/getIndividualSize.js
@@ -16,7 +16,7 @@ export function GetIndividualSize({
             <input
                 type="number"
                 value={indSize}
-                className="border border-gray-300 p-2 rounded-lg"
+                className="border border-gray-600 p-2 rounded-lg bg-gray-800 text-foreground"
                 placeholder="Enter a number"
                 onChange={(e) => {
                     if (isNaN(e.target.value)) {
diff --git a/app/create/non-gp/page.js b/app/create/non-gp/page.js
index 924a5d1..99dc908 100644
--- a/app/create/non-gp/page.js
+++ b/app/create/non-gp/page.js
@@ -281,7 +281,7 @@ export default function ConfigureNonGP() {
                 </Link>
             </div>
 
-            <div className="flex flex-wrap mt-16 gap-4 border border-gray-400 rounded-2xl bg-gray-100 bg-opacity-70">
+            <div className="flex flex-wrap mt-16 gap-4 border border-gray-600 rounded-2xl bg-gray-900 bg-opacity-70">
                 <Preview
                     algo={chosenAlgo}
                     parameters={parameters}
@@ -301,7 +301,7 @@ export default function ConfigureNonGP() {
                     hofSize={hof}
                 />
 
-                <div className="border border-gray-400 rounded-2xl p-4 bg-white">
+                <div className="border border-gray-600 rounded-2xl p-4 bg-gray-900">
                     <form
                         onSubmit={(e) => {
                             e.preventDefault();
@@ -311,7 +311,7 @@ export default function ConfigureNonGP() {
                         <h3 className="text-xl font-bold">
                             Configure Algorithm
                         </h3>
-                        <p className="text-sm text-gray-500">Non-GP</p>
+                        <p className="text-sm text-gray-400">Non-GP</p>
                         <hr className="my-4" />
 
                         {currentStep >= 1 && (
diff --git a/app/create/page.js b/app/create/page.js
index 9fc2ffb..7416956 100644
--- a/app/create/page.js
+++ b/app/create/page.js
@@ -23,9 +23,9 @@ export default function ChooseGpOrNotGp() {
     }, []);
 
     return (
-        <main className="flex flex-col items-center justify-between min-h-screen p-4 bg-gradient-to-br from-gray-50 to-gray-100 font-[family-name:var(--font-geist-mono)]">
+        <main className="flex flex-col items-center justify-between min-h-screen p-4 bg-background font-[family-name:var(--font-geist-mono)]">
             <header className="flex flex-col w-full justify-center items-center p-4">
-                <div className="flex items-center space-x-2 h-32">
+                <div className="flex items-center space-x-2 h-32 bg-white rounded-lg p-4">
                     <Image
                         src="/LOGO.png"
                         alt="EVOLVE OnClick logo"
@@ -55,10 +55,10 @@ export default function ChooseGpOrNotGp() {
             </header>
             <div className="container mx-auto px-4 py-8">
                 <div className="text-center mb-12">
-                    <h1 className="text-4xl font-bold text-gray-800 mb-4">
+                    <h1 className="text-4xl font-bold text-foreground mb-4">
                         Unleash the Power of Evolution
                     </h1>
-                    <p className="text-lg text-gray-600">
+                    <p className="text-lg text-gray-400">
                         Explore different evolutionary algorithms to optimize
                         your solutions.
                     </p>
@@ -68,12 +68,12 @@ export default function ChooseGpOrNotGp() {
                         href="/create/non-gp"
                         className="block h-full rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
                     >
-                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-green-50 to-green-100 p-6 flex flex-col items-center justify-center">
+                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-green-900 to-green-800 p-6 flex flex-col items-center justify-center">
                             <div className="text-5xl mb-3">🚀</div>
-                            <div className="font-bold text-lg text-center text-gray-700">
+                            <div className="font-bold text-lg text-center text-green-100">
                                 Evolutionary Algorithm (EA)
                             </div>
-                            <div className="text-sm text-gray-500 text-center mt-2">
+                            <div className="text-sm text-green-300 text-center mt-2">
                                 DE & Non-GP Approach
                             </div>
                         </div>
@@ -82,12 +82,12 @@ export default function ChooseGpOrNotGp() {
                         href="/create/gp"
                         className="block h-full rounded-xl   shadow-md hover:shadow-lg transition-shadow duration-300"
                     >
-                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-blue-50 to-blue-100 p-6 flex flex-col items-center justify-center">
+                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-blue-900 to-blue-800 p-6 flex flex-col items-center justify-center">
                             <div className="text-5xl mb-3">🧬</div>
-                            <div className="font-bold text-lg text-center text-gray-700">
+                            <div className="font-bold text-lg text-center text-blue-100">
                                 Genetic Programming (GP)
                             </div>
-                            <div className="text-sm text-gray-500 text-center mt-2">
+                            <div className="text-sm text-blue-300 text-center mt-2">
                                 Evolve Programs
                             </div>
                         </div>
@@ -96,12 +96,12 @@ export default function ChooseGpOrNotGp() {
                         href="/create/pso"
                         className="block h-full rounded-xl   shadow-md hover:shadow-lg transition-shadow duration-300"
                     >
-                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-purple-50 to-purple-100 p-6 flex flex-col items-center justify-center">
+                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-purple-900 to-purple-800 p-6 flex flex-col items-center justify-center">
                             <div className="text-5xl mb-3">🕊️</div>
-                            <div className="font-bold text-lg text-center text-gray-700">
+                            <div className="font-bold text-lg text-center text-purple-100">
                                 Particle Swarm Optimization (PSO)
                             </div>
-                            <div className="text-sm text-gray-500 text-center mt-2">
+                            <div className="text-sm text-purple-300 text-center mt-2">
                                 Swarm Intelligence
                             </div>
                         </div>
@@ -110,12 +110,12 @@ export default function ChooseGpOrNotGp() {
                         href="/create/ml"
                         className="block h-full rounded-xl   shadow-md hover:shadow-lg transition-shadow duration-300"
                     >
-                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-yellow-50 to-yellow-100 p-6 flex flex-col items-center justify-center">
+                        <div className="bg-gradient-to-br h-full rounded-xl overflow-hidden from-yellow-900 to-yellow-800 p-6 flex flex-col items-center justify-center">
                             <div className="text-5xl mb-3">🤖</div>
-                            <div className="font-bold text-lg text-center text-gray-700">
+                            <div className="font-bold text-lg text-center text-yellow-100">
                                 EA for ML Model Tuning
                             </div>
-                            <div className="text-sm text-gray-500 text-center mt-2">
+                            <div className="text-sm text-yellow-300 text-center mt-2">
                                 Fine-tune ML models with EA
                             </div>
                         </div>
@@ -125,13 +125,13 @@ export default function ChooseGpOrNotGp() {
             <footer className="flex justify-center space-x-4 p-4">
                 <Link
                     href="/"
-                    className="bg-white hover:bg-gray-200 text-gray-700 rounded-full px-6 py-3 transition-colors duration-300 border border-gray-300"
+                    className="bg-gray-900 hover:bg-gray-800 text-foreground rounded-full px-6 py-3 transition-colors duration-300 border border-gray-700"
                 >
                     ← Back to Home
                 </Link>
                 <Link
                     href="/bin"
-                    className="bg-white hover:bg-gray-200 text-gray-700 rounded-full px-6 py-3 transition-colors duration-300 border border-gray-300"
+                    className="bg-gray-900 hover:bg-gray-800 text-foreground rounded-full px-6 py-3 transition-colors duration-300 border border-gray-700"
                 >
                     Previous Runs →
                 </Link>
diff --git a/app/create/pso/page.js b/app/create/pso/page.js
index f23fcb1..c397f0d 100644
--- a/app/create/pso/page.js
+++ b/app/create/pso/page.js
@@ -200,7 +200,7 @@ export default function ConfigurePSO() {
                 </Link>
             </div>
 
-            <div className="flex flex-wrap mt-16 gap-4 border border-gray-400 rounded-2xl bg-gray-100 bg-opacity-70">
+            <div className="flex flex-wrap mt-16 gap-4 border border-gray-600 rounded-2xl bg-gray-900 bg-opacity-70">
                 <PreviewPSO
                     algorithm={algorithm}
                     dimensions={dimensions}
@@ -217,7 +217,7 @@ export default function ConfigurePSO() {
                     currentStep={currentStep}
                 />
 
-                <div className="border border-gray-400 rounded-2xl p-4 bg-white">
+                <div className="border border-gray-600 rounded-2xl p-4 bg-gray-900">
                     <form
                         onSubmit={(e) => {
                             e.preventDefault();
@@ -227,7 +227,7 @@ export default function ConfigurePSO() {
                         <h3 className="text-xl font-bold">
                             Configure Algorithm
                         </h3>
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-gray-400">
                             PSO -{" "}
                             <span className="text-green-500">
                                 ParticleSwarmOptimization
diff --git a/app/explain/[id]/page.js b/app/explain/[id]/page.js
index ea14bf7..f32cf24 100644
--- a/app/explain/[id]/page.js
+++ b/app/explain/[id]/page.js
@@ -154,9 +154,9 @@ export default function ExplainPage() {
 
     if (isLoadingData) {
         return (
-            <main className="flex flex-col items-center justify-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-slate-100">
-                <Loader2 className="h-12 w-12 animate-spin text-slate-600" />
-                <p className="mt-4 text-slate-600">
+            <main className="flex flex-col items-center justify-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
+                <Loader2 className="h-12 w-12 animate-spin text-gray-400" />
+                <p className="mt-4 text-gray-400">
                     Loading code and configuration...
                 </p>
             </main>
@@ -165,18 +165,18 @@ export default function ExplainPage() {
 
     if (!codeContent || (!configContent && error)) {
         return (
-            <main className="flex flex-col items-center justify-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-slate-100">
+            <main className="flex flex-col items-center justify-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
                 <BadgeX className="h-12 w-12 text-red-500" />
-                <h2 className="mt-4 text-xl font-bold text-red-600">
+                <h2 className="mt-4 text-xl font-bold text-red-400">
                     Error Loading Context
                 </h2>
-                <p className="mt-2 text-center text-red-500 max-w-lg">
+                <p className="mt-2 text-center text-red-400 max-w-lg">
                     {error ||
                         "Could not load essential context data. Please check the run ID or try again."}
                 </p>
                 <button
                     onClick={router.back}
-                    className="mt-6 rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center bg-white text-slate-900 hover:bg-slate-900 hover:text-white text-sm sm:text-base px-4 py-2"
+                    className="mt-6 rounded-full border border-solid border-white/[.08] transition-colors flex items-center justify-center bg-gray-900 text-foreground hover:bg-white hover:text-slate-900 text-sm sm:text-base px-4 py-2"
                 >
                     ← Back to Execution Details
                 </button>
@@ -185,11 +185,11 @@ export default function ExplainPage() {
     }
 
     return (
-        <div className="flex h-screen w-screen bg-slate-100 font-[family-name:var(--font-geist-mono)]">
-            <div className="w-[37%] flex-shrink-0 border-r border-slate-300 bg-white">
+        <div className="flex h-screen w-screen bg-background font-[family-name:var(--font-geist-mono)]">
+            <div className="w-[37%] flex-shrink-0 border-r border-gray-700 bg-gray-900">
                 <div className="h-full flex flex-col overflow-hidden">
-                    <div className="p-4 border-b border-slate-200 flex items-center justify-between flex-shrink-0">
-                        <h2 className="text-lg font-semibold text-slate-800 truncate pr-2">
+                    <div className="p-4 border-b border-gray-700 flex items-center justify-between flex-shrink-0">
+                        <h2 className="text-lg font-semibold text-foreground truncate pr-2">
                             Context (ID: {id})
                         </h2>
                         <div className="flex gap-2 items-center flex-shrink-0">
@@ -199,7 +199,7 @@ export default function ExplainPage() {
                                         setShowCode(true);
                                         setShowConfig(false);
                                     }}
-                                    className={`p-2 rounded-lg transition-colors ${showCode ? "bg-blue-100 text-blue-700" : "text-slate-500 hover:bg-slate-100"}`}
+                                    className={`p-2 rounded-lg transition-colors ${showCode ? "bg-blue-600 text-white" : "text-gray-400 hover:bg-gray-800"}`}
                                     title="Show Code"
                                 >
                                     {" "}
@@ -212,7 +212,7 @@ export default function ExplainPage() {
                                         setShowCode(false);
                                         setShowConfig(true);
                                     }}
-                                    className={`p-2 rounded-lg transition-colors ${showConfig ? "bg-green-100 text-green-700" : "text-slate-500 hover:bg-slate-100"}`}
+                                    className={`p-2 rounded-lg transition-colors ${showConfig ? "bg-green-600 text-white" : "text-gray-400 hover:bg-gray-800"}`}
                                     title="Show Configuration"
                                 >
                                     {" "}
@@ -221,7 +221,7 @@ export default function ExplainPage() {
                             )}
                             <button
                                 onClick={() => router.back()}
-                                className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 transition-colors"
+                                className="p-2 rounded-lg text-gray-400 hover:bg-gray-800 transition-colors"
                                 title="Go Back"
                             >
                                 <svg
@@ -241,14 +241,14 @@ export default function ExplainPage() {
                             </button>
                         </div>
                     </div>
-                    <div className="flex-grow overflow-y-auto p-6 bg-slate-50 text-sm">
+                    <div className="flex-grow overflow-y-auto p-6 bg-gray-950 text-sm text-foreground">
                         {showCode && codeContent && (
                             <div>
                                 {" "}
-                                <h3 className="text-base font-medium text-slate-700 mb-2">
+                                <h3 className="text-base font-medium text-foreground mb-2">
                                     code.py
                                 </h3>{" "}
-                                <pre className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm overflow-auto text-xs">
+                                <pre className="bg-gray-800 p-4 rounded-xl border border-gray-700 shadow-sm overflow-auto text-xs text-foreground">
                                     <code>{codeContent}</code>
                                 </pre>{" "}
                             </div>
@@ -256,10 +256,10 @@ export default function ExplainPage() {
                         {showConfig && configContent && (
                             <div>
                                 {" "}
-                                <h3 className="text-base font-medium text-slate-700 mb-2">
+                                <h3 className="text-base font-medium text-foreground mb-2">
                                     input.json
                                 </h3>{" "}
-                                <pre className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm overflow-auto text-xs">
+                                <pre className="bg-gray-800 p-4 rounded-xl border border-gray-700 shadow-sm overflow-auto text-xs text-foreground">
                                     <code>
                                         {JSON.stringify(configContent, null, 2)}
                                     </code>
@@ -267,7 +267,7 @@ export default function ExplainPage() {
                             </div>
                         )}
                         {!codeContent && (
-                            <p className="text-yellow-700 bg-yellow-50 p-3 rounded-lg border border-yellow-200 text-center">
+                            <p className="text-yellow-200 bg-yellow-900 bg-opacity-30 p-3 rounded-lg border border-yellow-700 text-center">
                                 Code context missing.
                             </p>
                         )}
@@ -280,7 +280,7 @@ export default function ExplainPage() {
                 </div>
             </div>
 
-            <div className="w-[63%] flex-shrink-0 bg-slate-100">
+            <div className="w-[63%] flex-shrink-0 bg-gray-950">
                 <div className="h-full flex flex-col overflow-hidden">
                     {(error || chatError) && (
                         <div className="p-3 border-b border-red-200 bg-red-50 text-center flex-shrink-0">
@@ -300,7 +300,7 @@ export default function ExplainPage() {
                             !isChatLoading &&
                             initialPromptSent && (
                                 <div className="flex justify-center items-center h-full">
-                                    <p className="text-slate-500">
+                                    <p className="text-gray-400">
                                         Waiting for initial explanation...
                                     </p>
                                 </div>
@@ -314,7 +314,7 @@ export default function ExplainPage() {
                                     className={`flex items-start gap-3 max-w-[80%] ${m.role === "user" ? "flex-row-reverse" : ""}`}
                                 >
                                     <span
-                                        className={`flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center text-white ${m.role === "user" ? "bg-blue-500" : "bg-slate-700"}`}
+                                        className={`flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center text-white ${m.role === "user" ? "bg-blue-600" : "bg-gray-800"}`}
                                     >
                                         {m.role === "user" ? (
                                             <User size={16} />
@@ -323,7 +323,7 @@ export default function ExplainPage() {
                                         )}
                                     </span>
                                     <div
-                                        className={`px-4 py-3 text-sm break-words shadow-sm ${m.role === "user" ? "bg-blue-500 text-white rounded-l-xl rounded-br-xl" : "bg-white text-slate-800 border border-slate-200 rounded-r-xl rounded-bl-xl"}`}
+                                        className={`px-4 py-3 text-sm break-words shadow-sm ${m.role === "user" ? "bg-blue-600 text-white rounded-l-xl rounded-br-xl" : "bg-gray-800 text-foreground border border-gray-700 rounded-r-xl rounded-bl-xl"}`}
                                     >
                                         <ReactMarkdown
                                             components={{
@@ -335,7 +335,7 @@ export default function ExplainPage() {
                                                 ),
                                                 pre: ({ node, ...props }) => (
                                                     <pre
-                                                        className="my-2 bg-slate-100 p-2 rounded-lg overflow-x-auto border border-slate-300 text-xs font-mono"
+                                                        className="my-2 bg-gray-900 p-2 rounded-lg overflow-x-auto border border-gray-600 text-xs font-mono text-foreground"
                                                         {...props}
                                                     />
                                                 ),
@@ -348,7 +348,7 @@ export default function ExplainPage() {
                                                 }) =>
                                                     inline ? (
                                                         <code
-                                                            className="bg-slate-200 text-slate-800 px-1 py-0.5 rounded text-xs mx-0.5"
+                                                            className="bg-gray-700 text-gray-100 px-1 py-0.5 rounded text-xs mx-0.5"
                                                             {...props}
                                                         >
                                                             {children}
@@ -390,11 +390,11 @@ export default function ExplainPage() {
                         {isChatLoading && (
                             <div className="flex justify-start">
                                 <div className="flex items-start gap-3 max-w-[80%]">
-                                    <span className="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center bg-slate-700 text-white">
+                                    <span className="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center bg-gray-800 text-foreground">
                                         <Bot size={16} />
                                     </span>
-                                    <div className="rounded-r-xl rounded-bl-xl px-4 py-3 text-sm bg-white text-slate-800 border border-slate-200 flex items-center shadow-sm">
-                                        <Loader2 className="h-4 w-4 animate-spin mr-2 text-slate-500" />{" "}
+                                    <div className="rounded-r-xl rounded-bl-xl px-4 py-3 text-sm bg-gray-800 text-foreground border border-gray-700 flex items-center shadow-sm">
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2 text-gray-400" />{" "}
                                         <span>Thinking...</span>
                                     </div>
                                 </div>
@@ -402,7 +402,7 @@ export default function ExplainPage() {
                         )}
                     </div>
 
-                    <div className="p-4 border-t border-slate-200 bg-white flex-shrink-0">
+                    <div className="p-4 border-t border-gray-700 bg-gray-900 flex-shrink-0">
                         <form
                             onSubmit={handleSubmitWithContext}
                             className="flex items-center gap-3"
@@ -416,7 +416,7 @@ export default function ExplainPage() {
                                         ? "Context missing..."
                                         : "Ask EvOC AI..."
                                 }
-                                className="flex-grow border border-slate-300 rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 disabled:opacity-50 disabled:bg-slate-100 transition-shadow"
+                                className="flex-grow border border-gray-600 rounded-full px-4 py-2.5 text-sm bg-gray-800 text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:bg-gray-700 transition-shadow"
                                 disabled={
                                     isLoadingData ||
                                     isChatLoading ||
@@ -426,7 +426,7 @@ export default function ExplainPage() {
                             />
                             <button
                                 type="submit"
-                                className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-blue-400 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                                className="bg-blue-600 hover:bg-blue-700 text-white rounded-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-blue-500 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                 disabled={
                                     isChatLoading ||
                                     !input.trim() ||
diff --git a/app/globals.css b/app/globals.css
index e968872..9950df8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,8 +7,24 @@
 }
 
 :root {
+    --background: #0c0b0b;
+    --foreground: #f0ecec;
+    --input-bg: #1a1a1a;
+    --input-border: #333333;
+}
+
+[data-theme="light"] {
     --background: #ffffff;
-    --foreground: #343434;
+    --foreground: #1a1a1a;
+    --input-bg: #f3f4f6;
+    --input-border: #e5e7eb;
+}
+
+[data-theme="dark"] {
+    --background: #0c0b0b;
+    --foreground: #f0ecec;
+    --input-bg: #1a1a1a;
+    --input-border: #333333;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -23,6 +39,27 @@ body {
     background: var(--background);
 }
 
+input::placeholder {
+    color: var(--foreground);
+    opacity: 0.6;
+}
+
+.input-field {
+    background-color: var(--input-bg);
+    border-color: var(--input-border);
+    color: var(--foreground);
+}
+
+.form-container {
+    background-color: #1a1a1a;
+    border-color: #333333;
+}
+
+[data-theme="light"] .form-container {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+}
+
 @layer utilities {
     .text-balance {
         text-wrap: balance;
diff --git a/app/layout.js b/app/layout.js
index fbe2b11..512ed50 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,6 +1,8 @@
 import localFont from "next/font/local";
 import "./globals.css";
 import { PublicEnvScript } from "next-runtime-env";
+import { ThemeProvider } from "./_components/ThemeProvider";
+import ThemeToggle from "./_components/ThemeToggle";
 
 const geistSans = localFont({
     src: "./fonts/GeistVF.woff",
@@ -51,7 +53,10 @@ export default function RootLayout({ children }) {
             <body
                 className={`${geistSans.variable} ${geistMono.variable} antialiased`}
             >
-                {children}
+                <ThemeProvider>
+                    <ThemeToggle />
+                    {children}
+                </ThemeProvider>
             </body>
         </html>
     );
diff --git a/app/not-found.js b/app/not-found.js
new file mode 100644
index 0000000..ed085dc
--- /dev/null
+++ b/app/not-found.js
@@ -0,0 +1,14 @@
+export default function NotFound() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-background text-foreground">
+            <h1 className="text-6xl font-bold mb-4">404</h1>
+            <p className="text-2xl mb-8">Page Not Found</p>
+            <a
+                href="/"
+                className="px-6 py-3 bg-yellow-500 text-black rounded-full hover:bg-yellow-600 transition-colors"
+            >
+                Go Home
+            </a>
+        </div>
+    );
+}
diff --git a/app/page.js b/app/page.js
index 4d48d55..1c26bb1 100644
--- a/app/page.js
+++ b/app/page.js
@@ -7,7 +7,7 @@ export default function Home() {
         <div className="min-h-screen flex flex-col items-center p-8 sm:p-20 bg-background font-[family-name:var(--font-geist-mono)]">
             <main className="flex flex-col items-center flex-grow w-full max-w-3xl">
                 <div className="flex flex-col items-center justify-center flex-1 w-full">
-                    <div className="flex items-center justify-center overflow-hidden h-40 mb-8">
+                    <div className="flex items-center justify-center overflow-hidden h-40 mb-8 bg-white rounded-lg p-4">
                         <Image
                             src="/LOGO.png"
                             alt="EVOLVE OnClick logo"
@@ -19,14 +19,14 @@ export default function Home() {
 
                     <div className="flex flex-col sm:flex-row gap-4 items-center font-bold w-full max-w-md">
                         <Link
-                            className="rounded-full border border-solid border-black transition-colors flex items-center justify-center bg-background text-foreground gap-2 hover:bg-gray-100 text-sm sm:text-base p-4 w-full h-12"
+                            className="rounded-full border border-solid border-white/20 transition-colors flex items-center justify-center bg-background text-foreground gap-2 hover:bg-gray-900 text-sm sm:text-base p-4 w-full h-12"
                             href="/auth"
                         >
                             <Pickaxe size={24} />
                             Get Started
                         </Link>
                         <Link
-                            className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full border border-black gap-2"
+                            className="rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base h-12 p-4 w-full border border-yellow-600 gap-2"
                             href="https://evolutionary-algorithms-on-click.github.io/user_docs/"
                             target="_blank"
                             rel="noopener noreferrer"
diff --git a/app/uploadPopulation/page.js b/app/uploadPopulation/page.js
index f8075ac..0adccf3 100644
--- a/app/uploadPopulation/page.js
+++ b/app/uploadPopulation/page.js
@@ -51,12 +51,12 @@ export default function UploadPage() {
     });
 
     return (
-        <main className="items-center justify-items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8">
+        <main className="items-center justify-items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
             <div>
                 <h1 className="text-3xl sm:text-4xl font-bold text-center mb-4">
                     Evolve OnClick Unpickler
                 </h1>
-                <p className="text-center">
+                <p className="text-center text-foreground">
                     View Pickled Population on your Browser.
                 </p>
             </div>
@@ -66,13 +66,13 @@ export default function UploadPage() {
             </h1>
             <div
                 {...getRootProps()}
-                className={`border-2 border-dashed p-6 rounded-lg ${isDragActive ? "border-blue-500" : "border-gray-400"} mb-4`}
+                className={`border-2 border-dashed p-6 rounded-lg ${isDragActive ? "border-blue-500" : "border-gray-600"} mb-4`}
             >
                 <input {...getInputProps()} />
                 {isDragActive ? (
                     <p className="text-blue-500">Drop the files here...</p>
                 ) : (
-                    <p className="text-gray-600">
+                    <p className="text-gray-400">
                         Drag 'n' drop a .pkl file here, or click to select one
                     </p>
                 )}
@@ -80,7 +80,7 @@ export default function UploadPage() {
 
             {file && (
                 <div className="mb-4">
-                    <p className="text-gray-800">
+                    <p className="text-foreground">
                         Selected File: <strong>{file.name}</strong>
                     </p>
                 </div>
@@ -88,7 +88,7 @@ export default function UploadPage() {
 
             <button
                 onClick={handleSubmit}
-                className="bg-black text-white py-2 px-4 rounded"
+                className="bg-yellow-500 text-black py-2 px-4 rounded hover:bg-yellow-600"
             >
                 Upload
             </button>