diff --git a/components/Footer.tsx b/components/Footer.tsx
index 19b6b5e..c58127a 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,7 +12,7 @@ const Footer: React.FC = () => {
       { name: 'Integrations', href: '#integrations' },
     ],
     resources: [
-      { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' }, // Placeholder - will link to actual docs
+      { name: 'Documentation', href: 'https://opsimate.vercel.app/#integrations' },
     ],
     opensource: [
       { name: 'GitHub Repository', href: 'https://github.com/OpsiMate/OpsiMate' },
@@ -25,29 +25,29 @@ const Footer: React.FC = () => {
   const socialLinks = [
     { 
       name: 'GitHub', 
-      href: 'https://github.com/OpsiMate/OpsiMate', // From documentation
+      href: 'https://github.com/OpsiMate/OpsiMate',
       icon: Github 
     },
     { 
       name: 'Slack Community', 
-      href: 'https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA', // From documentation
+      href: 'https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA',
       icon: Slack 
     },
     { 
       name: 'Email', 
-      href: 'mailto:idan.lut@gmail.com', // Placeholder
+      href: 'mailto:idan.lut@gmail.com',
       icon: Mail 
     },
   ];
 
   return (
-    <footer className="bg-gray-900 text-white">
+    <footer className="bg-[#FEFEFE] dark:bg-gray-900 text-gray-900 dark:text-white border-t border-gray-200 dark:border-gray-800 transition-colors duration-200">
       <div className="container-max section-padding">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
           {/* Company Info */}
           <div className="lg:col-span-2">
             <Logo className="mb-4" />
-            <p className="text-gray-300 mb-6 max-w-md">
+            <p className="text-gray-700 dark:text-gray-300 mb-6 max-w-md">
               Simplify your infrastructure management with one unified platform. 
               Monitor, manage, and optimize your entire infrastructure from a single dashboard.
             </p>
@@ -58,7 +58,7 @@ const Footer: React.FC = () => {
                   <Link
                     key={social.name}
                     href={social.href}
-                    className="text-gray-400 hover:text-white transition-colors duration-200"
+                    className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={social.name}
@@ -72,13 +72,13 @@ const Footer: React.FC = () => {
 
           {/* Product Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Product</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Product</h3>
             <ul className="space-y-2">
               {footerLinks.product.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                     {...(link.href.startsWith('http') && {
                        target: "_blank",
                        rel: "noopener noreferrer"
@@ -93,13 +93,15 @@ const Footer: React.FC = () => {
 
           {/* Resources Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Resources</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Resources</h3>
             <ul className="space-y-2">
               {footerLinks.resources.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     {link.name}
                   </Link>
@@ -110,13 +112,13 @@ const Footer: React.FC = () => {
 
           {/* Open Source Links */}
           <div>
-            <h3 className="font-semibold text-white mb-4">Open Source</h3>
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Open Source</h3>
             <ul className="space-y-2">
               {footerLinks.opensource.map((link) => (
                 <li key={link.name}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-white transition-colors duration-200"
+                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white transition-colors duration-200"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -129,15 +131,21 @@ const Footer: React.FC = () => {
         </div>
 
         {/* Bottom Section */}
-        <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-          <p className="text-gray-400 text-sm">
+        <div className="border-t border-gray-200 dark:border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
             © {currentYear} OpsiMate. All rights reserved.
           </p>
           <div className="flex space-x-6 mt-4 md:mt-0">
-            <Link href="/privacy" className="text-gray-400 hover:text-white text-sm transition-colors duration-200">
+            <Link 
+              href="/privacy" 
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm transition-colors duration-200"
+            >
               Privacy Policy
             </Link>
-            <Link href="/terms" className="text-gray-400 hover:text-white text-sm transition-colors duration-200">
+            <Link 
+              href="/terms" 
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-white text-sm transition-colors duration-200"
+            >
               Terms of Service
             </Link>
           </div>