diff --git a/landing-page/src/Pages/Footer/Footer.tsx b/landing-page/src/Pages/Footer/Footer.tsx
index f81fbe959..ecbb65a5d 100644
--- a/landing-page/src/Pages/Footer/Footer.tsx
+++ b/landing-page/src/Pages/Footer/Footer.tsx
@@ -3,7 +3,7 @@ import { FaDiscord } from 'react-icons/fa'  // Import Discord icon from React Ic
 
 const Footer: React.FC = () => {
   return (
-    <footer className="relative bg-black text-white py-8 overflow-hidden">
+    <footer className="relative bg-white dark:bg-black text-gray-900 dark:text-white py-8 overflow-hidden transition-colors duration-300 border-t border-gray-100 dark:border-gray-900">
       <div className="relative container mx-auto px-6">
         <div className="flex justify-between items-center">
           {/* Left-aligned PictoPy text */}
@@ -15,10 +15,10 @@ const Footer: React.FC = () => {
 
           {/* Right-aligned Discord Icon and "Made with love" text */}
           <div className="flex items-center space-x-2">
-            <a 
-              href="https://discord.com/channels/1022871757289422898/1311271974630330388" 
-              target="_blank" 
-              rel="noopener noreferrer" 
+            <a
+              href="https://discord.com/channels/1022871757289422898/1311271974630330388"
+              target="_blank"
+              rel="noopener noreferrer"
               className="text-sm font-medium text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-green-400 hover:bg-gradient-to-r hover:from-yellow-500 hover:to-green-500 transition duration-300 ease-in-out"
             >
               <FaDiscord className="inline-block mr-2 text-yellow-400 hover:text-green-400 transition duration-300 ease-in-out transform scale-150" /> {/* Scale it to 1.5x */}