diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a44aef4..aa4cd16 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -150,7 +150,7 @@ export default function Home() {
             </div>
 
             {/* Automazioni & IA */}
-            <div className="md:col-span-2 bg-zinc-900 text-white p-8 lg:p-12 flex flex-col md:flex-row justify-between items-center gap-8 group">
+            <div className="md:col-span-2 bg-surface-container-high text-on-surface p-8 lg:p-12 flex flex-col md:flex-row justify-between items-center gap-8 group transition-colors duration-300">
               <div className="max-w-xl">
                 <h3 className="text-2xl lg:text-3xl font-black uppercase mb-4">
                   Automazioni &amp; IA
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index f626575..1cd3ae0 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -2,13 +2,13 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="bg-dark-bg w-full py-16 px-6 lg:px-8 mt-auto border-t border-zinc-800 relative overflow-hidden">
+    <footer className="bg-surface-container-high w-full py-16 px-6 lg:px-8 mt-auto border-t border-outline-variant/20 relative overflow-hidden transition-colors duration-300">
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 max-w-7xl mx-auto">
         <div className="lg:col-span-1">
-          <span className="text-xl font-bold text-white tracking-tighter mb-4 block uppercase">
+          <span className="text-xl font-bold text-on-surface tracking-tighter mb-4 block uppercase">
             CiMa Progetti
           </span>
-          <p className="font-sans text-sm tracking-wide text-zinc-400 leading-relaxed">
+          <p className="font-sans text-sm tracking-wide text-on-surface-variant leading-relaxed">
             Via Otranto 39
             <br />
             00192 Roma, Italia
@@ -20,7 +20,7 @@ export default function Footer() {
         </div>
 
         <div>
-          <p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
+          <p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest">
             Navigazione
           </p>
           <ul className="space-y-3">
@@ -28,7 +28,7 @@ export default function Footer() {
               <li key={item}>
                 <Link
                   href={`/#${item.toLowerCase().replace(" ", "-")}`}
-                  className="font-sans text-sm tracking-wide text-zinc-400 hover:text-blue-400 transition-colors"
+                  className="font-sans text-sm tracking-wide text-on-surface-variant hover:text-primary transition-colors"
                 >
                   {item}
                 </Link>
@@ -38,7 +38,7 @@ export default function Footer() {
         </div>
 
         <div>
-          <p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
+          <p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest">
             Supporto
           </p>
           <ul className="space-y-3">
@@ -46,7 +46,7 @@ export default function Footer() {
               <li key={item}>
                 <Link
                   href="#"
-                  className="font-sans text-sm tracking-wide text-zinc-400 hover:text-blue-400 transition-colors"
+                  className="font-sans text-sm tracking-wide text-on-surface-variant hover:text-primary transition-colors"
                 >
                   {item}
                 </Link>
@@ -56,32 +56,32 @@ export default function Footer() {
         </div>
 
         <div>
-          <p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
+          <p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest">
             Contatti
           </p>
-          <p className="font-sans text-sm tracking-wide text-zinc-400 mb-4">
-            <a href="mailto:info@cimaprogetti.it" className="text-blue-400 hover:text-blue-300">
+          <p className="font-sans text-sm tracking-wide text-on-surface-variant mb-4">
+            <a href="mailto:info@cimaprogetti.it" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all">
               info@cimaprogetti.it
             </a>
             <br />
-            <a href="https://wa.me/393382451171" className="text-blue-400 hover:text-blue-300">
+            <a href="https://wa.me/393382451171" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all">
               +39 338 245 1171
             </a>
             <br />
-            <a href="mailto:cima.progetti@pec-societa.it" className="text-blue-400 hover:text-blue-300">
+            <a href="mailto:cima.progetti@pec-societa.it" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all">
               cima.progetti@pec-societa.it
             </a>
           </p>
         </div>
       </div>
 
-      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-zinc-800 text-center sm:text-left">
-        <p className="font-sans text-xs tracking-wide text-zinc-500 uppercase">
+      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-outline-variant/20 text-center sm:text-left">
+        <p className="font-sans text-xs tracking-wide text-on-surface-variant/60 uppercase">
           &copy; 2026 CiMa Progetti Srls. Soluzioni digitali.
         </p>
       </div>
       {/* Watermark */}
-      <span className="hidden lg:block absolute bottom-0 right-0 text-[200px] font-black tracking-tighter leading-none select-none pointer-events-none text-[#2e2e2e] translate-x-4 translate-y-12">
+      <span className="hidden lg:block absolute bottom-0 right-0 text-[200px] font-black tracking-tighter leading-none select-none pointer-events-none text-on-surface/10 dark:text-on-surface/5 translate-x-4 translate-y-12 transition-colors duration-300">
         CIMA
       </span>
     </footer>