diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 599ca8c..f1e0ec5 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -106,10 +106,10 @@ function About() {
 
   return (
     <>
-      <div className="w-full min-h-screen pt-24 pb-0">
+      <div className="w-full min-h-screen pt-24 pb-0 bg-white dark:bg-transparent">
 
         {/* SECTION 1: Corporate Hero - bg-[#0b1220] */}
-        <div className="bg-[#0b1220] relative">
+        <div className="bg-white dark:bg-[#0b1220] relative">
           {/* Depth mask */}
           <div className="absolute inset-0 bg-gradient-to-b from-black/10 to-transparent pointer-events-none"></div>
 
@@ -117,13 +117,13 @@ function About() {
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
               {/* Left: Headline and Trust */}
               <div>
-                <h1 className="text-4xl md:text-5xl font-semibold text-white mb-4 leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                <h1 className="text-4xl md:text-5xl font-semibold text-black dark:text-white mb-4 leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
                   Enterprise-Level Commerce Experience
                 </h1>
-                <p className="text-xl text-gray-200 mb-6 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                <p className="text-xl text-gray-700 dark:text-gray-200 mb-6 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                   Built for Reliability, Designed for Trust
                 </p>
-                <p className="text-sm text-gray-400 mb-8 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-8 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                   Riveto is a modern, responsive e-commerce platform designed to deliver a seamless and intuitive shopping experience.
                   We combine cutting-edge technology with exceptional design to create a shopping journey that's both enjoyable and efficient.
                 </p>
@@ -131,9 +131,9 @@ function About() {
                 {/* Trust Badges */}
                 <div className="grid grid-cols-2 gap-3">
                   {trustBadges.map((badge, index) => (
-                    <div key={index} className="flex items-center gap-2 p-3 bg-[#1a2332] border border-[#1f2a44] rounded-lg">
+                    <div key={index} className="flex items-center gap-2 p-3 bg-gray-100 dark:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg">
                       <div className="text-blue-400">{badge.icon}</div>
-                      <span className="text-sm text-gray-300" style={{ fontFamily: 'Inter, sans-serif' }}>{badge.text}</span>
+                      <span className="text-sm text-gray-600 dark:text-gray-300" style={{ fontFamily: 'Inter, sans-serif' }}>{badge.text}</span>
                     </div>
                   ))}
                 </div>
@@ -141,7 +141,7 @@ function About() {
 
               {/* Right: Visual */}
               <div className="relative">
-                <div className="rounded-2xl overflow-hidden shadow-xl border border-[#1f2a44]">
+                <div className="rounded-2xl overflow-hidden shadow-xl border border-gray-200 dark:border-[#1f2a44]">
                   <Carousel
                     baseWidth={500}
                     autoplay={true}
@@ -157,27 +157,27 @@ function About() {
         </div>
 
         {/* SECTION 2: Operational Overview - bg-[#0f172a] */}
-        <div className="bg-[#0f172a] py-16">
+        <div className="bg-gray-50 dark:bg-[#0f172a] py-16">
           <div className="max-w-7xl mx-auto px-4 lg:px-8">
-            <h2 className="text-2xl font-semibold text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
               Operational Overview
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
-                <h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Platform Stability</h3>
-                <p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
+                <h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Platform Stability</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                   99.9% uptime with enterprise-grade infrastructure ensuring your shopping experience is always available when you need it.
                 </p>
               </div>
-              <div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
-                <h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Fulfillment Network</h3>
-                <p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
+                <h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Fulfillment Network</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                   Strategic warehouse locations and vetted logistics partners enable fast, reliable delivery across all regions.
                 </p>
               </div>
-              <div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
-                <h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Customer Protection</h3>
-                <p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
+                <h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Customer Protection</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                   Comprehensive buyer protection policies, secure payment processing, and transparent return procedures.
                 </p>
               </div>
@@ -186,14 +186,14 @@ function About() {
         </div>
 
         {/* SECTION 3: Scale Indicators - bg-[#111c33] Slab Strip */}
-        <div ref={statsRef} className="bg-[#111c33] border-y border-[#1f2a44]">
-          <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 divide-x divide-[#1f2a44] py-10 text-center">
+        <div ref={statsRef} className="bg-gray-100 dark:bg-[#111c33] border-y border-gray-200 dark:border-[#1f2a44]">
+          <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 divide-x divide-gray-200 dark:divide-[#1f2a44] py-10 text-center">
             {stats.map((stat, index) => (
               <div key={index} className="px-6">
-                <div className="text-3xl md:text-4xl font-bold text-white mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                <div className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
                   {stat.number}
                 </div>
-                <div className="text-sm text-gray-400 uppercase tracking-wide" style={{ fontFamily: 'Inter, sans-serif' }}>
+                <div className="text-sm text-gray-600 dark:text-gray-400 uppercase tracking-wide" style={{ fontFamily: 'Inter, sans-serif' }}>
                   {stat.label}
                 </div>
               </div>
@@ -202,29 +202,29 @@ function About() {
         </div>
 
         {/* SECTION 4: Platform Capabilities - bg-[#0b1220] with Contained Zone */}
-        <div className="bg-[#0b1220] py-20">
+        <div className="bg-white dark:bg-[#0b1220] py-20">
           <div className="max-w-7xl mx-auto px-4 lg:px-8">
-            <h2 className="text-2xl font-semibold text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
               Platform Capabilities
             </h2>
 
             {/* Contained Platform Zone */}
-            <div ref={capabilitiesRef} className="bg-[#111c33] border border-[#1f2a44] rounded-2xl p-10">
+            <div ref={capabilitiesRef} className="bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-2xl p-10">
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {capabilities.map((capability, index) => (
                   <div
                     key={index}
-                    className="capability-card bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg transition-all duration-300 hover:-translate-y-1 hover:border-blue-500/40 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
+                    className="capability-card bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg transition-all duration-300 hover:-translate-y-1 hover:border-blue-500/40 dark:hover:border-blue-500/40 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
                   >
                     <div className="flex items-start gap-4">
                       <div className="text-blue-400 mt-1">
                         {capability.icon}
                       </div>
                       <div className="flex-1">
-                        <h3 className="text-base font-semibold text-white mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>
+                        <h3 className="text-base font-semibold text-black dark:text-white mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>
                           {capability.title}
                         </h3>
-                        <p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                           {capability.text}
                         </p>
                       </div>
@@ -237,9 +237,9 @@ function About() {
         </div>
 
         {/* SECTION 5: Core Principles - bg-[#0f172a] Pure Typography */}
-        <div className="bg-[#0f172a] py-16">
+        <div className="bg-gray-50 dark:bg-[#0f172a] py-16">
           <div className="max-w-7xl mx-auto px-4 lg:px-8">
-            <h2 className="text-2xl font-semibold text-gray-200 mb-12 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-12 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
               Core Principles
             </h2>
             <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 text-left">
@@ -250,10 +250,10 @@ function About() {
                 { title: 'Community', desc: 'Fostering connections and supporting the communities we serve' }
               ].map((principle, index) => (
                 <div key={index}>
-                  <h3 className="text-xl font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
+                  <h3 className="text-xl font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
                     {principle.title}
                   </h3>
-                  <p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                  <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
                     {principle.desc}
                   </p>
                 </div>
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
index c99522b..62ad979 100644
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -32,80 +32,80 @@ function Contact() {
 
   return (
     <>
-      <div className='w-full min-h-screen bg-[#0b1220] pt-24 pb-20 overflow-x-hidden relative'>
+      <div className='w-full min-h-screen bg-white dark:bg-[#0b1220] pt-24 pb-20 overflow-x-hidden relative'>
         <div ref={sectionRef} className="max-w-7xl mx-auto px-4 lg:px-8 relative z-10">
           {/* Customer Support Center Hero */}
           <div className="contact-title text-center mb-12">
-            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Customer Support Center</h1>
-            <p className="text-lg text-gray-400 max-w-3xl mx-auto leading-relaxed mb-6">
+            <h1 className="text-4xl md:text-5xl font-bold text-black dark:text-white mb-4">Customer Support Center</h1>
+            <p className="text-lg text-gray-700 dark:text-gray-400 max-w-3xl mx-auto leading-relaxed mb-6">
               Our support team is available to assist with orders, product inquiries, and account management. Select your preferred contact method below.
             </p>
 
             {/* Trust Chips */}
             <div className="flex flex-wrap items-center justify-center gap-4 text-sm">
-              <div className="flex items-center gap-2 px-4 py-2 bg-[#0f172a] border border-[#1f2a44] rounded-lg">
+              <div className="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg">
                 <FaClock className="w-4 h-4 text-blue-400" />
-                <span className="text-gray-300">Avg. Response: 2 hours</span>
+                <span className="text-gray-700 dark:text-gray-300">Avg. Response: 2 hours</span>
               </div>
-              <div className="flex items-center gap-2 px-4 py-2 bg-[#0f172a] border border-[#1f2a44] rounded-lg">
+              <div className="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg">
                 <FaCheckCircle className="w-4 h-4 text-green-400" />
-                <span className="text-gray-300">98% Satisfaction Rate</span>
+                <span className="text-gray-700 dark:text-gray-300">98% Satisfaction Rate</span>
               </div>
-              <div className="flex items-center gap-2 px-4 py-2 bg-[#0f172a] border border-[#1f2a44] rounded-lg">
+              <div className="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg">
                 <HiSparkles className="w-4 h-4 text-amber-400" />
-                <span className="text-gray-300">24/7 Email Support</span>
+                <span className="text-gray-700 dark:text-gray-300">24/7 Email Support</span>
               </div>
             </div>
           </div>
 
           {/* Contact Methods Slab - Horizontal Strip */}
-          <div className="mb-16 bg-[#0f172a] border border-[#1f2a44] rounded-lg overflow-hidden">
-            <div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-[#1f2a44]">
+          <div className="mb-16 bg-gray-50 dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg overflow-hidden">
+            <div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-[#1f2a44]">
               {/* Phone */}
-              <div className="p-6 hover:bg-[#111c33] transition-colors duration-200">
+              <div className="p-6 hover:bg-gray-100 dark:hover:bg-[#111c33] transition-colors duration-200">
                 <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-[#111c33] border border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
+                  <div className="w-12 h-12 bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
                     <FaPhone className="w-5 h-5 text-blue-400" />
                   </div>
-                  <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Phone</h3>
-                  <p className="text-white font-medium mb-1">+91-9307342318</p>
-                  <p className="text-gray-500 text-sm">Mon-Fri 9AM-6PM</p>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-2">Phone</h3>
+                  <p className="text-black dark:text-white font-medium mb-1">+91-9307342318</p>
+                  <p className="text-gray-600 dark:text-gray-500 text-sm">Mon-Fri 9AM-6PM</p>
                 </div>
               </div>
 
               {/* Email */}
-              <div className="p-6 hover:bg-[#111c33] transition-colors duration-200">
+              <div className="p-6 hover:bg-gray-100 dark:hover:bg-[#111c33] transition-colors duration-200">
                 <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-[#111c33] border border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
+                  <div className="w-12 h-12 bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
                     <FaEnvelope className="w-5 h-5 text-blue-400" />
                   </div>
-                  <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Email</h3>
-                  <p className="text-white font-medium mb-1">admin@riveto.com</p>
-                  <p className="text-gray-500 text-sm">24/7 Support</p>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-2">Email</h3>
+                  <p className="text-black dark:text-white font-medium mb-1">admin@riveto.com</p>
+                  <p className="text-gray-600 dark:text-gray-500 text-sm">24/7 Support</p>
                 </div>
               </div>
 
               {/* Address */}
-              <div className="p-6 hover:bg-[#111c33] transition-colors duration-200">
+              <div className="p-6 hover:bg-gray-100 dark:hover:bg-[#111c33] transition-colors duration-200">
                 <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-[#111c33] border border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
+                  <div className="w-12 h-12 bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
                     <FaMapMarkerAlt className="w-5 h-5 text-blue-400" />
                   </div>
-                  <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Visit Us</h3>
-                  <p className="text-white font-medium mb-1">123 lorem ipsum Street</p>
-                  <p className="text-gray-500 text-sm">lorem2, ipsum3, 10001</p>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-2">Visit Us</h3>
+                  <p className="text-black dark:text-white font-medium mb-1">123 lorem ipsum Street</p>
+                  <p className="text-gray-600 dark:text-gray-500 text-sm">lorem2, ipsum3, 10001</p>
                 </div>
               </div>
 
               {/* Business Hours */}
-              <div className="p-6 hover:bg-[#111c33] transition-colors duration-200">
+              <div className="p-6 hover:bg-gray-100 dark:hover:bg-[#111c33] transition-colors duration-200">
                 <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-[#111c33] border border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
+                  <div className="w-12 h-12 bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-lg flex items-center justify-center mb-3">
                     <FaClock className="w-5 h-5 text-blue-400" />
                   </div>
-                  <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Hours</h3>
-                  <p className="text-white font-medium mb-1">Mon - Fri: 9AM - 6PM</p>
-                  <p className="text-gray-500 text-sm">Sat: 10AM - 4PM</p>
+                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-2">Hours</h3>
+                  <p className="text-black dark:text-white font-medium mb-1">Mon - Fri: 9AM - 6PM</p>
+                  <p className="text-gray-600 dark:text-gray-500 text-sm">Sat: 10AM - 4PM</p>
                 </div>
               </div>
             </div>
@@ -113,28 +113,28 @@ function Contact() {
 
           {/* Support Panel - Contained */}
           <div className="mb-20">
-            <div className="max-w-6xl mx-auto bg-[#111c33] border border-[#1f2a44] rounded-lg overflow-hidden">
+            <div className="max-w-6xl mx-auto bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-lg overflow-hidden">
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-0">
                 {/* Left: Support Topics */}
-                <div className="lg:border-r border-[#1f2a44] p-8">
-                  <h3 className="text-xl font-semibold text-white mb-6">How can we help?</h3>
+                <div className="lg:border-r border-gray-200 dark:border-[#1f2a44] p-8">
+                  <h3 className="text-xl font-semibold text-black dark:text-white mb-6">How can we help?</h3>
                   <div className="space-y-3">
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                      <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       Order Status & Tracking
                     </button>
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                    <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       Product Information
                     </button>
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                    <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       Returns & Exchanges
                     </button>
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                    <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       Account Management
                     </button>
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                    <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       Technical Support
                     </button>
-                    <button className="w-full text-left px-4 py-3 bg-[#0f172a] hover:bg-[#1a2332] border border-[#1f2a44] rounded-lg text-gray-300 hover:text-white hover:border-blue-500/40 transition-all duration-200">
+                    <button className="w-full text-left px-4 py-3 bg-white dark:bg-[#0f172a] hover:bg-gray-100 dark:hover:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-gray-700 dark:text-gray-300 dark:hover:text-white hover:border-blue-500/40 transition-all duration-200">
                       General Inquiry
                     </button>
                   </div>
@@ -142,7 +142,7 @@ function Contact() {
 
                 {/* Right: Contact Form */}
                 <div className="lg:col-span-2 p-8">
-                  <h3 className="text-xl font-semibold text-white mb-6">Submit a Request</h3>
+                  <h3 className="text-xl font-semibold text-black dark:text-white mb-6">Submit a Request</h3>
 
                   {isSubmitted ? (
                     <div className="text-center py-12">
@@ -155,14 +155,14 @@ function Contact() {
                   ) : (
                     <form ref={formRef} onSubmit={handleSubmit} className="space-y-5">
                       <div className="form-field">
-                        <label className="block text-sm font-medium text-gray-400 mb-2">Name</label>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Name</label>
                         <input
                           type="text"
                           name="name"
                           value={formData.name}
                           onChange={handleInputChange}
                           placeholder="Your Full Name"
-                          className="w-full px-4 py-3 bg-[#0f172a] border border-[#1f2a44] rounded-lg text-white placeholder-gray-500
+                          className="w-full px-4 py-3 bg-white dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-black dark:text-white placeholder-gray-500
                           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
                           transition-all duration-200"
                           required
@@ -170,14 +170,14 @@ function Contact() {
                       </div>
 
                       <div className="form-field">
-                        <label className="block text-sm font-medium text-gray-400 mb-2">Email</label>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Email</label>
                         <input
                           type="email"
                           name="email"
                           value={formData.email}
                           onChange={handleInputChange}
                           placeholder="your.email@example.com"
-                          className="w-full px-4 py-3 bg-[#0f172a] border border-[#1f2a44] rounded-lg text-white placeholder-gray-500
+                          className="w-full px-4 py-3 bg-white dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-black dark:text-white placeholder-gray-500
                           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
                           transition-all duration-200"
                           required
@@ -185,14 +185,14 @@ function Contact() {
                       </div>
 
                       <div className="form-field">
-                        <label className="block text-sm font-medium text-gray-400 mb-2">Message</label>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Message</label>
                         <textarea
                           name="message"
                           value={formData.message}
                           onChange={handleInputChange}
                           placeholder="Describe your inquiry..."
                           rows="6"
-                          className="w-full px-4 py-3 bg-[#0f172a] border border-[#1f2a44] rounded-lg text-white placeholder-gray-500
+                          className="w-full px-4 py-3 bg-white dark:bg-[#0f172a] border border-gray-200 dark:border-[#1f2a44] rounded-lg text-black dark:text-white placeholder-gray-500
                           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
                           transition-all duration-200 resize-none"
                           required
@@ -203,7 +203,7 @@ function Contact() {
                         type="submit"
                         className="form-field w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg
                         transition-all duration-200 flex items-center justify-center gap-2
-                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#111c33]"
+                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#111c33]"
                       >
                         <FaPaperPlane className="w-4 h-4" />
                         Submit Request