From aaca5f6d6c9861372cbd74d75ebb9dd97ceeff07 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Thu, 24 Jul 2025 17:27:51 +0200
Subject: [PATCH] ...

---
 src/App.jsx                       |   2 +-
 src/components/Navigation.jsx     |   7 +-
 src/components/NewHome.jsx        |  12 +-
 src/components/ProductsPage.jsx   | 142 ++++++++--------
 src/components/RegisterPage.jsx   |  26 +--
 src/components/TechnologyPage.jsx | 262 +++++++++++++++---------------
 src/components/ThemeToggle.jsx    |  25 +++
 src/components/TierSHPage.jsx     | 128 +++++++--------
 src/components/ui/button.jsx      |   2 +-
 src/styles/index.css              |  53 +++++-
 tailwind.config.js                |  58 ++++++-
 11 files changed, 427 insertions(+), 290 deletions(-)
 create mode 100644 src/components/ThemeToggle.jsx

diff --git a/src/App.jsx b/src/App.jsx
index bd163ec..ae37fc2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
   return (
     <Router>
       <Navigation />
-      <main className="pt-16">
+      <main className="pt-16 bg-background text-foreground">
         <Routes>
           <Route path="/" element={<NewHome />} />
           <Route path="/tiers" element={<TierSHPage />} />
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 4ae187c..a1fb9af 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -4,6 +4,7 @@ import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/s
 import { Globe, Menu } from 'lucide-react'
 import { Link, useLocation } from 'react-router-dom'
 import navigationData from '../config/navigation.json'
+import ThemeToggle from './ThemeToggle.jsx'
 
 function Navigation() {
   const location = useLocation()
@@ -14,7 +15,7 @@ function Navigation() {
   }
 
   return (
-    <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50">
+    <nav className="fixed top-0 w-full bg-background text-foreground z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <Link to="/" className="flex items-center space-x-2">
@@ -38,6 +39,7 @@ function Navigation() {
             <Button asChild className="bg-blue-600 hover:bg-blue-700">
               <Link to="/register">Join Now</Link>
             </Button>
+            <ThemeToggle />
           </div>
 
           {/* Mobile Navigation */}
@@ -68,6 +70,9 @@ function Navigation() {
                       <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
                     </Button>
                   </SheetClose>
+                  <SheetClose asChild>
+                    <ThemeToggle />
+                  </SheetClose>
                 </div>
               </SheetContent>
             </Sheet>
diff --git a/src/components/NewHome.jsx b/src/components/NewHome.jsx
index abf4ea5..6fc4410 100644
--- a/src/components/NewHome.jsx
+++ b/src/components/NewHome.jsx
@@ -3,7 +3,7 @@ import Navigation from './Navigation';
 
 function NewHome() {
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col">
+    <div className="min-h-screen bg-background flex flex-col">
       <Navigation />
       <main className="flex-grow flex flex-col items-center justify-center text-center p-4">
         <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
@@ -19,17 +19,17 @@ function NewHome() {
             preload="metadata"
           ></video>
         </div>
-        <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
           As ThreeFold Galaxy we deliver the future of Datacenters
         </h1>
-        <p className="text-xl text-gray-600 max-w-2xl">
+        <p className="text-xl text-muted-foreground max-w-2xl">
           resulting in better performance, greener and more security.
         </p>
       </main>
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto text-center">
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+          <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
+          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
         </div>
       </footer>
     </div>
diff --git a/src/components/ProductsPage.jsx b/src/components/ProductsPage.jsx
index 29d8c15..8fb0631 100644
--- a/src/components/ProductsPage.jsx
+++ b/src/components/ProductsPage.jsx
@@ -7,7 +7,7 @@ import Navigation from './Navigation'
 
 function ProductsPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+    <div className="min-h-screen bg-background">
       {/* Navigation */}
       <Navigation />
 <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
@@ -16,37 +16,37 @@ function ProductsPage() {
       {/* Product Overview Hero */}
       <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
         <div className="max-w-5xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Solutions</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Two Solutions, <span className="text-blue-600">Infinite Possibilities</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Solutions</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Two Solutions, <span className="text-primary">Infinite Possibilities</span>
           </h1>
-          <p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
+          <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
             ThreeFold's datacenter solutions scale from residential deployments to industrial infrastructure, all powered by the same revolutionary technology stack.
           </p>
         </div>
       </section>
 
       {/* Tier-H Datacenters: Residential & Office Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
           {/* Left Column: Text Content */}
           <div className="space-y-8">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-H: Plug-and-Play Digital Infrastructure</h2>
-            <p className="text-xl text-slate-600">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-H: Plug-and-Play Digital Infrastructure</h2>
+            <p className="text-xl text-muted-foreground">
               A Tier-H datacenter is a decentralized, plug-and-play digital infrastructure solution designed for deployment in homes, offices, and mixed-use buildings. Unlike traditional, centralized datacenters, Tier-H units leverage existing physical spaces to host compute, storage, and networking capacity.
             </p>
-            <p className="text-xl text-slate-600">
+            <p className="text-xl text-muted-foreground">
               By integrating these nodes directly into buildings, we can provide distributed cloud and AI capacity closer to the edge, enabling faster processing, reduced latency, and enhanced data sovereignty. This approach transforms any building into a potential source of digital infrastructure, contributing to a more resilient, decentralized, and accessible global grid.
             </p>
-            <h3 className="text-2xl font-bold text-blue-600">Perfect For:</h3>
-            <ul className="space-y-3 text-lg text-slate-700">
+            <h3 className="text-2xl font-bold text-primary">Perfect For:</h3>
+            <ul className="space-y-3 text-lg text-foreground">
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Homes, offices, and mixed-use buildings</li>
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Edge computing and local AI processing</li>
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community networks and local services</li>
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Development and testing environments</li>
             </ul>
-            <h3 className="text-2xl font-bold text-blue-600">Technical Specifications:</h3>
-            <ul className="space-y-3 text-lg text-slate-700">
+            <h3 className="text-2xl font-bold text-primary">Technical Specifications:</h3>
+            <ul className="space-y-3 text-lg text-foreground">
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Full compute, storage, and networking capabilities</li>
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-touch deployment and maintenance</li>
               <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Supports AI workloads, Web2/Web3 applications</li>
@@ -63,22 +63,22 @@ function ProductsPage() {
       </section>
 
       {/* Tier-S Datacenters: Industrial Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto grid md:grid-cols-1 gap-12 items-start">
           {/* Left Column: Text Content */}
           <div className="space-y-8">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Tier-S: Industrial-Grade Modular Datacenters</h2>
-            <p className="text-xl text-slate-600">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Tier-S: Industrial-Grade Modular Datacenters</h2>
+            <p className="text-xl text-muted-foreground">
               Comprehensive overview of the enterprise-grade solution for large-scale deployments.
             </p>
           {/* Image */}
           <div className="col-span-2">
             <img src="/src/assets/tiers_2.png" alt="Tier-S Datacenter" className="w-full object-cover rounded-lg" />
-          </div>            
+          </div>
             <div className="grid md:grid-cols-2 gap-8">
               <div>
-                <h3 className="text-2xl font-bold text-purple-600  mb-4">Perfect For:</h3>
-                <ul className="space-y-3 text-lg text-slate-700">
+                <h3 className="text-2xl font-bold text-primary mb-4">Perfect For:</h3>
+                <ul className="space-y-3 text-lg text-foreground">
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Government digital infrastructure</li>
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Telecom edge deployment</li>
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enterprise private clouds</li>
@@ -87,8 +87,8 @@ function ProductsPage() {
                 </ul>
               </div>
               <div>
-                <h3 className="text-2xl font-bold text-purple-600  mb-4">Technical Specifications:</h3>
-                <ul className="space-y-3 text-lg text-slate-700">
+                <h3 className="text-2xl font-bold text-primary mb-4">Technical Specifications:</h3>
+                <ul className="space-y-3 text-lg text-foreground">
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Modular container-based design</li>
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Handle 1+ million transactions per second For Web4</li>
                   <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Support 100,000+ concurrent users per unit For Web 4</li>
@@ -103,19 +103,19 @@ function ProductsPage() {
           <div className="mt-12 text-center col-span-2">
             <h3 className="text-2xl font-bold text-purple-600 mb-6">Key Benefits:</h3>
             <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Rapid deployment</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Rapid deployment</CardTitle></CardHeader>
                 <CardContent>Faster setup compared to traditional datacenters.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Complete sovereignty</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Complete sovereignty</CardTitle></CardHeader>
                 <CardContent>Full control over data and operations.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-green-600">Scales horizontally</CardTitle></CardHeader>
                 <CardContent>Unlimited scalability without bottlenecks.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-orange-600">Built-in redundancy</CardTitle></CardHeader>
                 <CardContent>Self-healing and resilient infrastructure.</CardContent>
               </Card>
@@ -125,65 +125,65 @@ function ProductsPage() {
       </section>
 
       {/* Technology Stack Comparison */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-4xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Shared Technology Foundation</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Shared Technology Foundation</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
               Both Tier-H and Tier-S solutions are built on the same revolutionary underlying technology stack.
             </p>
           </div>
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
               <thead>
-                <tr className="bg-blue-600 text-white">
+                <tr className="bg-primary text-primary-foreground">
                   <th className="py-3 px-4 text-left">Feature</th>
                   <th className="py-3 px-4 text-left">Tier-H</th>
                   <th className="py-3 px-4 text-left">Tier-S</th>
                 </tr>
               </thead>
               <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Zero-OS</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Quantum-Safe Storage</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Mycelium Network</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Smart Contract for IT</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">AI/ML Support</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Kubernetes Compatible</td>
                   <td className="py-3 px-4">✓</td>
                   <td className="py-3 px-4">✓</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Deployment Time</td>
                   <td className="py-3 px-4">Days</td>
                   <td className="py-3 px-4">Months</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Maintenance</td>
                   <td className="py-3 px-4">Zero-touch</td>
                   <td className="py-3 px-4">Minimal</td>
                 </tr>
-                <tr>
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Scale</td>
                   <td className="py-3 px-4">Local/Edge</td>
                   <td className="py-3 px-4">Regional/Global</td>
@@ -195,21 +195,21 @@ function ProductsPage() {
       </section>
 
       {/* Use Case Matrix */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Choose Your Deployment Strategy</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Choose Your Deployment Strategy</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Clear mapping of products to specific use cases.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-green-600">Tier-H Ideal For:</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                   <li>Personal AI assistants and agents</li>
                   <li>Local file storage and backup</li>
                   <li>Home automation and IoT</li>
@@ -219,12 +219,12 @@ function ProductsPage() {
                 </ul>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-blue-600">Tier-S Ideal For:</CardTitle>
+                <CardTitle className="text-primary">Tier-S Ideal For:</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                   <li>National digital infrastructure</li>
                   <li>Regional cloud services</li>
                   <li>Large-scale AI training</li>
@@ -239,24 +239,24 @@ function ProductsPage() {
       </section>
 
       {/* Deployment Models */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Flexible Deployment Options</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Flexible Deployment Options</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Different ways to implement ThreeFold's solutions.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-blue-600">Single Node Deployment</CardTitle>
+                <CardTitle className="text-primary">Single Node Deployment</CardTitle>
               </CardHeader>
               <CardContent>
                 Start with one Tier-H node. Perfect for testing and small applications. Scales by adding more nodes.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-green-600">Hybrid Deployment</CardTitle>
               </CardHeader>
@@ -264,9 +264,9 @@ function ProductsPage() {
                 Combine Tier-H and Tier-S. Edge processing with centralized coordination. Optimal for distributed organizations.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-purple-600">Regional Grid</CardTitle>
+                <CardTitle className="text-primary">Regional Grid</CardTitle>
               </CardHeader>
               <CardContent>
                 Multiple Tier-S datacenters. Geo-distributed for sovereignty. Enterprise-grade redundancy.
@@ -277,21 +277,21 @@ function ProductsPage() {
       </section>
 
       {/* Economic Model */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Investment and Returns</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Investment and Returns</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Revenue and cost structure for each product.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-blue-600">Tier-H Economics</CardTitle>
+                <CardTitle className="text-primary">Tier-H Economics</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                   <li>Low initial investment</li>
                   <li>Immediate revenue from spare capacity</li>
                   <li>ROI typically within 12-24 months</li>
@@ -299,12 +299,12 @@ function ProductsPage() {
                 </ul>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-purple-600">Tier-S Economics</CardTitle>
+                <CardTitle className="text-primary">Tier-S Economics</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                   <li>Higher initial investment</li>
                   <li>Enterprise-grade revenue potential</li>
                   <li>3x higher ROI compared to traditional datacenters</li>
@@ -319,14 +319,14 @@ function ProductsPage() {
 
 
       {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
+            <Globe className="h-6 w-6 text-primary" />
+            <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
           </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+          <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
+          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
         </div>
       </footer>
     </div>
diff --git a/src/components/RegisterPage.jsx b/src/components/RegisterPage.jsx
index 927e8a3..a0cb62b 100644
--- a/src/components/RegisterPage.jsx
+++ b/src/components/RegisterPage.jsx
@@ -197,7 +197,7 @@ function RegisterPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-950 dark:to-blue-950">
       {/* Navigation */}
       <Navigation />
 
@@ -205,10 +205,10 @@ function RegisterPage() {
       <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
         <div className="max-w-3xl mx-auto text-center space-y-8">
           <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Join the Revolution</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
+          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
             Ready to Transform Your <span className="text-blue-600">Infrastructure?</span>
           </h1>
-          <p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
+          <p className="text-xl text-slate-600 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">
             Join the growing network of forward-thinking organizations building the future of decentralized digital infrastructure. From single nodes to regional grids, we'll help you deploy sovereign, profitable, and resilient datacenter solutions.
           </p>
         </div>
@@ -247,10 +247,10 @@ function RegisterPage() {
       </div>
 
       {/* What Happens Next */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens After You Submit?</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">What Happens After You Submit?</h2>
           </div>
           
           <div className="grid md:grid-cols-3 gap-8">
@@ -294,10 +294,10 @@ function RegisterPage() {
       </section>
 
       {/* Frequently Asked Questions */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950">
         <div className="max-w-4xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Common Questions</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">Common Questions</h2>
           </div>
           <div className="space-y-6">
             <Card className="hover:shadow-lg transition-shadow">
@@ -325,9 +325,9 @@ function RegisterPage() {
       </section>
 
       {/* Social Proof & Urgency */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
         <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Join Leading Organizations Already Building the Future</h2>
+          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">Join Leading Organizations Already Building the Future</h2>
           <div className="grid md:grid-cols-2 gap-8">
             <Card className="text-center hover:shadow-lg transition-shadow">
               <CardHeader><CardTitle className="text-blue-600">70+ countries with active infrastructure</CardTitle></CardHeader>
@@ -346,7 +346,7 @@ function RegisterPage() {
               <CardContent>Empowering local digital infrastructure.</CardContent>
             </Card>
           </div>
-          <p className="text-lg text-slate-600 mt-8">
+          <p className="text-lg text-slate-600 dark:text-gray-300 mt-8">
             Limited Availability: Priority access for early partners, exclusive pricing for first deployments, limited technical support capacity, growing demand for deployment slots.
           </p>
           <p className="text-xl font-bold text-blue-600 mt-4">Don't Wait - The Future is Being Built Now</p>
@@ -354,14 +354,14 @@ function RegisterPage() {
       </section>
 
       {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white dark:bg-gray-950 dark:text-gray-200">
         <div className="max-w-6xl mx-auto text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
             <Globe className="h-6 w-6 text-blue-400" />
             <span className="text-xl font-bold">ThreeFold Galaxy</span>
           </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+          <p className="text-slate-400 dark:text-gray-400">Building the new internet, together in our sovereign digital freezone.</p>
+          <p className="text-sm text-slate-500 dark:text-gray-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
         </div>
       </footer>
     </div>
diff --git a/src/components/TechnologyPage.jsx b/src/components/TechnologyPage.jsx
index 17da916..5b68fb5 100644
--- a/src/components/TechnologyPage.jsx
+++ b/src/components/TechnologyPage.jsx
@@ -10,7 +10,7 @@ import Navigation from './Navigation'
 
 function TechnologyPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+    <div className="min-h-screen bg-background">
       <Navigation />
 <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <img src="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" />
@@ -19,59 +19,59 @@ function TechnologyPage() {
       {/* Technology Hero Section */}
       <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
         <div className="max-w-5xl mx-auto text-center space-y-8">
-          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Our Innovations</Badge>
-          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
-            Infrastructure Reimagined from <span className="text-blue-600">First Principles</span>
+          <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Innovations</Badge>
+          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
+            Infrastructure Reimagined from <span className="text-primary">First Principles</span>
           </h1>
-          <p className="text-xl text-slate-600 max-w-4xl mx-auto leading-relaxed">
+          <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
             ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
           </p>
         </div>
       </section>
 
       {/* Core Technology Pillars */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Three Pillars of Innovation</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Three Pillars of Innovation</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Overview of the three main technology innovations that power ThreeFold.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
-                <CardTitle className="text-blue-600">Zero-OS Compute System</CardTitle>
+                <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Zero-OS Compute System</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                   <li>Stateless, autonomous operating system</li>
                   <li>Depending the usecase can more efficient than traditional systems</li>
                   <li>Self-healing and cryptographically secured</li>
                 </ul>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
                 <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                   <li>Mathematical data dispersion (not replication)</li>
                   <li>20% overhead vs 400% in traditional systems</li>
                   <li>Unbreakable and self-healing architecture</li>
                 </ul>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <Network className="w-16 h-16 mx-auto mb-4 text-purple-600" />
-                <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
+                <Network className="w-16 h-16 mx-auto mb-4 text-primary" />
+                <CardTitle className="text-primary">Mycelium Network</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-1 text-sm text-slate-700">
+                <ul className="space-y-1 text-sm text-foreground">
                   <li>Peer-to-peer mesh overlay network</li>
                   <li>End-to-end encryption with shortest path routing</li>
                   <li>Resilient to internet failures and attacks</li>
@@ -83,26 +83,26 @@ function TechnologyPage() {
       </section>
 
       {/* Zero-OS: Autonomous Compute */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Zero-OS: The World's First Stateless Cloud OS</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Zero-OS: The World's First Stateless Cloud OS</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Deep dive into the revolutionary operating system that powers ThreeFold.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Core Principles:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Core Principles:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Avoid layers, less is more</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless:</strong> Immune to corruption</li>
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Unique:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Unique:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
@@ -111,17 +111,17 @@ function TechnologyPage() {
             </div>
           </div>
           <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Technical Advantages:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
                 <CardContent>Ensures integrity of all components.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Self-healing and autonomous</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Self-healing and autonomous</CardTitle></CardHeader>
                 <CardContent>Operates without human intervention.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-orange-600">Compatible with Kubernetes and VMs</CardTitle></CardHeader>
                 <CardContent>Flexible for diverse workloads.</CardContent>
               </Card>
@@ -131,11 +131,11 @@ function TechnologyPage() {
       </section>
 
       {/* Quantum-Safe Storage: Unbreakable Data */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Quantum-Safe Storage: Mathematics Over Replication</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Quantum-Safe Storage: Mathematics Over Replication</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Explanation of the mathematical storage breakthrough that ensures unbreakable data.
             </p>
           </div>
@@ -145,18 +145,18 @@ function TechnologyPage() {
             </div>
             <div className="md:col-span-1 space-y-6">
               <h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Data is fragmented and transformed into mathematical equations</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Equations are distributed across multiple nodes</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Original data fragments are discarded</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Any subset of equations can reconstruct the original data</li>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Data is fragmented and transformed into mathematical equations</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Equations are distributed across multiple nodes</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Original data fragments are discarded</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Any subset of equations can reconstruct the original data</li>
               </ul>
             <h3 className="text-2xl font-bold text-green-600">Zero-Knowledge Architecture:</h3>
-            <ul className="space-y-3 text-lg text-slate-700">
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> No single node knows what it stores</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Cryptographic proof without data exposure</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Post-quantum security resistant</li>
-              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Self-healing against bitrot and failures</li>
+            <ul className="space-y-3 text-lg text-foreground">
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> No single node knows what it stores</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Post-quantum security resistant</li>
+              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Self-healing against bitrot and failures</li>
             </ul>
             </div>
           </div>
@@ -164,28 +164,28 @@ function TechnologyPage() {
       </section>
 
       {/* Mycelium Network: Intelligent Connectivity */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Mycelium Network: The Internet's Missing Layer</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Mycelium Network: The Internet's Missing Layer</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8 items-center">
             <div className="md:col-span-1 space-y-6">
-              <h3 className="text-2xl font-bold text-teal-600">Core Capabilities:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>End-to-End Encryption</strong> </li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Shortest Path Routing</strong> </li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> <strong>Geographic Awareness:</strong></li>
+              <h3 className="text-2xl font-bold text-primary">Core Capabilities:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>End-to-End Encryption</strong> </li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Shortest Path Routing</strong> </li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Geographic Awareness:</strong></li>
               </ul>
-              <h3 className="text-2xl font-bold text-teal-600 mt-8">Technical Implementation:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Peer-to-peer mesh topology</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Up to 1 Gbps throughput per agent</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Protocol-agnostic data transport</li>
-                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-blue-500" /> Authentication-based security (not perimeter-based)</li>
+              <h3 className="text-2xl font-bold text-primary mt-8">Technical Implementation:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Peer-to-peer mesh topology</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Up to 1 Gbps throughput per agent</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Protocol-agnostic data transport</li>
+                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Authentication-based security (not perimeter-based)</li>
               </ul>
             </div>
             <div className="md:col-span-1 flex justify-center">
@@ -193,18 +193,18 @@ function TechnologyPage() {
             </div>
           </div>
           <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-teal-600 mb-6">Beyond Traditional Networking:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Beyond Traditional Networking:</h3>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Survives internet outages</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Survives internet outages</CardTitle></CardHeader>
                 <CardContent>Ensures continuity even during major disruptions.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
                 <CardContent>Facilitates direct communication between users.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Reduces latency</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Reduces latency</CardTitle></CardHeader>
                 <CardContent>Through optimal path selection and local routing.</CardContent>
               </Card>
             </div>
@@ -213,18 +213,18 @@ function TechnologyPage() {
       </section>
 
       {/* Architectural Innovations */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Integrated Architecture: Greater Than Sum of Parts</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Integrated Architecture: Greater Than Sum of Parts</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               How ThreeFold's core technologies work together to create a superior infrastructure.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Geo-Aware Infrastructure:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
@@ -232,8 +232,8 @@ function TechnologyPage() {
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Smart Contract for IT:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
@@ -246,60 +246,60 @@ function TechnologyPage() {
       </section>
 
       {/* Technical Comparisons */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-4xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">ThreeFold vs Traditional Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">ThreeFold vs Traditional Infrastructure</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
               Side-by-side comparison with traditional approaches.
             </p>
           </div>
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
               <thead>
-                <tr className="bg-blue-600 text-white">
+                <tr className="bg-primary text-primary-foreground">
                   <th className="py-3 px-4 text-left">Aspect</th>
                   <th className="py-3 px-4 text-left">Traditional Cloud</th>
                   <th className="py-3 px-4 text-left">ThreeFold</th>
                 </tr>
               </thead>
               <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">OS Deployment</td>
                   <td className="py-3 px-4">Local installation, complex updates</td>
                   <td className="py-3 px-4 font-semibold">Network boot, stateless</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Container Images</td>
                   <td className="py-3 px-4">2GB+ monolithic images</td>
                   <td className="py-3 px-4 font-semibold">2MB metadata-only</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Storage Redundancy</td>
                   <td className="py-3 px-4">400% overhead (4 copies)</td>
                   <td className="py-3 px-4 font-semibold">20% overhead (math)</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Network Security</td>
                   <td className="py-3 px-4">Perimeter-based firewalls</td>
                   <td className="py-3 px-4 font-semibold">End-to-end encryption</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Management</td>
                   <td className="py-3 px-4">Human administrators</td>
                   <td className="py-3 px-4 font-semibold">Autonomous agents</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Scalability</td>
                   <td className="py-3 px-4">Vertical, expensive</td>
                   <td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
                 </tr>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Energy Efficiency</td>
                   <td className="py-3 px-4">High consumption</td>
                   <td className="py-3 px-4 font-semibold">10x more efficient</td>
                 </tr>
-                <tr>
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Data Sovereignty</td>
                   <td className="py-3 px-4">Limited control</td>
                   <td className="py-3 px-4 font-semibold">Complete control</td>
@@ -311,18 +311,18 @@ function TechnologyPage() {
       </section>
 
       {/* Implementation Status & Roadmap */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Production-Ready Technology & Roadmap</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Production-Ready Technology & Roadmap</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Current status and future developments of ThreeFold's technology.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Currently Available:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Currently Available:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
@@ -330,8 +330,8 @@ function TechnologyPage() {
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Coming H2 2025:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
@@ -340,8 +340,8 @@ function TechnologyPage() {
               </ul>
             </div>
 <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Live Deployment Stats:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Live Deployment Stats:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li>2000+ nodes across 70+ countries</li>
                 <li>60,000+ CPU cores active</li>
                 <li>1+ million contracts processed</li>
@@ -353,18 +353,18 @@ function TechnologyPage() {
       </section>
 
       {/* Open Source & Standards */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Open Principles</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Open Principles</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Commitment to openness and interoperability.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Open Source Components:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Open Source Components:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
@@ -372,8 +372,8 @@ function TechnologyPage() {
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Standards Compliance:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
@@ -381,8 +381,8 @@ function TechnologyPage() {
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-purple-600">Developer Ecosystem:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Developer Ecosystem:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li>Comprehensive APIs and SDKs</li>
                 <li>Extensive documentation</li>
                 <li>Active community support</li>
@@ -394,18 +394,18 @@ function TechnologyPage() {
       </section>
 
       {/* Security & Compliance */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Security by Design & Compliance</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Security by Design & Compliance</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Advanced security features and compliance capabilities.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Cryptographic Foundation:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
@@ -413,8 +413,8 @@ function TechnologyPage() {
               </ul>
             </div>
             <div className="space-y-6">
-              <h3 className="text-2xl font-bold text-blue-600">Compliance Features:</h3>
-              <ul className="space-y-3 text-lg text-slate-700">
+              <h3 className="text-2xl font-bold text-primary">Compliance Features:</h3>
+              <ul className="space-y-3 text-lg text-foreground">
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
                 <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
@@ -423,21 +423,21 @@ function TechnologyPage() {
             </div>
           </div>
           <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Threat Resistance:</h3>
+            <h3 className="text-2xl font-bold text-primary mb-6">Threat Resistance:</h3>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-blue-600">Immune to ransomware</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Immune to ransomware</CardTitle></CardHeader>
                 <CardContent>Stateless OS prevents persistent threats.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
                 <CardContent>Distributed architecture mitigates attacks.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
-                <CardHeader><CardTitle className="text-purple-600">Quantum computing resistant</CardTitle></CardHeader>
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
+                <CardHeader><CardTitle className="text-primary">Quantum computing resistant</CardTitle></CardHeader>
                 <CardContent>Future-proof security protocols.</CardContent>
               </Card>
-              <Card className="text-center hover:shadow-lg transition-shadow">
+              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                 <CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
                 <CardContent>Mycelium network routes around blocking.</CardContent>
               </Card>
@@ -447,21 +447,21 @@ function TechnologyPage() {
       </section>
 
       {/* Technical Resources */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dive Deeper into ThreeFold Technology</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dive Deeper into ThreeFold Technology</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Access comprehensive technical documentation and resources.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-blue-600">Technical Documentation</CardTitle>
+                <CardTitle className="text-primary">Technical Documentation</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
+                <ul className="space-y-2 text-foreground">
                   <li>Architecture whitepapers</li>
                   <li>API documentation</li>
                   <li>Deployment guides</li>
@@ -469,13 +469,13 @@ function TechnologyPage() {
                 </ul>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
-                <CardTitle className="text-purple-600">Try It Yourself</CardTitle>
+                <CardTitle className="text-primary">Try It Yourself</CardTitle>
               </CardHeader>
               <CardContent>
-                <ul className="space-y-2 text-slate-700">
-                  <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://dashboard.grid.tf</a></li>
+                <ul className="space-y-2 text-foreground">
+                  <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://dashboard.grid.tf</a></li>
                   <li>GitHub repositories</li>
                   <li>Developer sandbox</li>
                   <li>Community forums</li>
@@ -484,8 +484,8 @@ function TechnologyPage() {
             </Card>
           </div>
           <div className="mt-12 text-center">
-            <h3 className="text-2xl font-bold text-blue-600 mb-6">Get Support:</h3>
-            <ul className="space-y-2 text-lg text-slate-700">
+            <h3 className="text-2xl font-bold text-primary mb-6">Get Support:</h3>
+            <ul className="space-y-2 text-lg text-foreground">
               <li>Technical community</li>
               <li>Professional services</li>
               <li>Training programs</li>
@@ -496,13 +496,13 @@ function TechnologyPage() {
       </section>
 
       {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
-            <Globe className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold">ThreeFold Galaxy</span>
+            <Globe className="h-6 w-6 text-primary" />
+            <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
           </div>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
         </div>
       </footer>
     </div>
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..b605f85
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+};
+
+export default ThemeToggle;
\ No newline at end of file
diff --git a/src/components/TierSHPage.jsx b/src/components/TierSHPage.jsx
index b98fc07..bb3d338 100644
--- a/src/components/TierSHPage.jsx
+++ b/src/components/TierSHPage.jsx
@@ -20,7 +20,7 @@ function TierSHPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Navigation */}
       <Navigation />
 
@@ -30,23 +30,23 @@ function TierSHPage() {
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div className="space-y-8">
               <div className="space-y-4">
-                <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
-                <h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
+                <Badge className="bg-primary/10 text-primary hover:bg-primary/20">The Future of Infrastructure</Badge>
+                <h1 className="text-2xl md:text-4xl font-bold text-foreground leading-tight">
                   Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
                 </h1>
-                <p className="text-xl text-slate-600 leading-relaxed">
+                <p className="text-xl text-muted-foreground leading-relaxed">
                   ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
                 </p>
               </div>
               <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3">
+                <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-lg px- py-3">
                   <Link to="/register">Register Interest</Link>
                 </Button>
                 <Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
                   Learn More About Products
                 </Button>
               </div>
-              <p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
+              <p className="text-sm text-muted-foreground">Join the revolution in decentralized digital infrastructure.</p>
             </div>
             <div className="relative">
               <video
@@ -65,16 +65,16 @@ function TierSHPage() {
       </section>
 
       {/* What Are Tier-S and Tier-H? */}
-      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">What Are Tier-S and Tier-H Datacenters?</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
             </p>
           </div>
           <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
                 <CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
@@ -83,7 +83,7 @@ function TierSHPage() {
                 <p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
                 <CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
@@ -97,16 +97,16 @@ function TierSHPage() {
       </section>
 
       {/* From Real Estate to Digital Infrastructure */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">From Real Estate to Digital Infrastructure</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
                 <CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
@@ -115,7 +115,7 @@ function TierSHPage() {
                 Your building can produce essential digital resources.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
                 <CardTitle className="text-green-600">AI Inference Power</CardTitle>
@@ -124,7 +124,7 @@ function TierSHPage() {
                 Host AI workloads and contribute to decentralized AI.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                 <CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
@@ -134,23 +134,23 @@ function TierSHPage() {
               </CardContent>
             </Card>
           </div>
-          <p className="text-center text-xl text-slate-600 mt-12">
+          <p className="text-center text-xl text-muted-foreground mt-12">
             Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
           </p>
         </div>
       </section>
 
       {/* Why Real Estate Developers Should Join */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Why Real Estate Developers Should Join</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Transform your properties into digital assets and unlock new revenue streams.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-blue-600">
                   <DollarSign className="h-5 w-5" />
@@ -161,7 +161,7 @@ function TierSHPage() {
                 Monetize idle compute, bandwidth, and storage capacity.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-green-600">
                   <TrendingUp className="h-5 w-5" />
@@ -172,7 +172,7 @@ function TierSHPage() {
                 Market properties as cloud-enabled and future-proof.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-purple-600">
                   <Zap className="h-5 w-5" />
@@ -183,7 +183,7 @@ function TierSHPage() {
                 10x less energy vs traditional datacenters, resilient to outages.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-orange-600">
                   <CheckCircle className="h-5 w-5" />
@@ -194,7 +194,7 @@ function TierSHPage() {
                 No IT expertise required for installation and operation.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-teal-600">
                   <Shield className="h-5 w-5" />
@@ -205,7 +205,7 @@ function TierSHPage() {
                 Data stays local and private, under your control.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-indigo-600">
                   <Globe className="h-5 w-5" />
@@ -221,16 +221,16 @@ function TierSHPage() {
       </section>
 
       {/* Technical Advantages */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Built on Revolutionary Technology</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Key differentiators that make ThreeFold superior to traditional infrastructure.
             </p>
           </div>
           <div className="grid md:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
                 <CardTitle className="text-blue-600">Zero-OS</CardTitle>
@@ -239,7 +239,7 @@ function TierSHPage() {
                 Stateless, self-healing operating system for autonomous compute.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
                 <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
@@ -248,7 +248,7 @@ function TierSHPage() {
                 Unbreakable data protection with 10x efficiency through mathematical dispersion.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                 <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
@@ -257,7 +257,7 @@ function TierSHPage() {
                 Mesh networking that routes around failures, ensuring resilient connectivity.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-orange-600">
                   <Shield className="h-5 w-5" />
@@ -268,7 +268,7 @@ function TierSHPage() {
                 Autonomous, cryptographically secured deployments for IT resources.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-teal-600">
                   <Brain className="h-5 w-5" />
@@ -279,7 +279,7 @@ function TierSHPage() {
                 Private AI agents that respect boundaries and data sovereignty.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow border-indigo-200">
+            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-indigo-600">
                   <Globe className="h-5 w-5" />
@@ -295,16 +295,16 @@ function TierSHPage() {
       </section>
 
       {/* Real Cost Comparison */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-4xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2>
-            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Dramatic Cost Savings</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
               Experience significant cost advantages compared to traditional cloud providers.
             </p>
           </div>
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-white rounded-lg shadow-md">
+            <table className="min-w-full bg-card rounded-lg shadow-md">
               <thead>
                 <tr className="bg-blue-600 text-white">
                   <th className="py-3 px-4 text-left">Service</th>
@@ -313,7 +313,7 @@ function TierSHPage() {
                 </tr>
               </thead>
               <tbody>
-                <tr className="border-b border-slate-200">
+                <tr className="border-b border-border">
                   <td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
                   <td className="py-3 px-4 font-semibold">Less than $5/month</td>
                   <td className="py-3 px-4">$12–$160/month</td>
@@ -326,23 +326,23 @@ function TierSHPage() {
               </tbody>
             </table>
           </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
+          <p className="text-center text-lg text-muted-foreground mt-8">
             Up to 10x more energy efficient than traditional datacenters.
           </p>
         </div>
       </section>
 
       {/* Who It's For */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
         <div className="max-w-6xl mx-auto">
           <div className="text-center space-y-8 mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
-            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground">Perfect For</h2>
+            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
               Clear target markets and use cases for ThreeFold's solutions.
             </p>
           </div>
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-blue-600">
                   <Shield className="h-5 w-5" />
@@ -353,7 +353,7 @@ function TierSHPage() {
                 Building sovereign AI and cloud infrastructure.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-green-600">
                   <Network className="h-5 w-5" />
@@ -364,7 +364,7 @@ function TierSHPage() {
                 Deploying local compute grids and edge solutions.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-purple-600">
                   <Users className="h-5 w-5" />
@@ -375,7 +375,7 @@ function TierSHPage() {
                 Seeking cloud independence and decentralized hosting.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-orange-600">
                   <Brain className="h-5 w-5" />
@@ -386,7 +386,7 @@ function TierSHPage() {
                 Hosting inference or full-stack decentralized applications.
               </CardContent>
             </Card>
-            <Card className="hover:shadow-lg transition-shadow">
+            <Card className="hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-teal-600">
                   <Globe className="h-5 w-5" />
@@ -402,14 +402,14 @@ function TierSHPage() {
       </section>
 
       {/* Proven at Scale */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-4xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2>
-          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground">Proven at Scale</h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
             ThreeFold's technology is already deployed globally and proven in production.
           </p>
           <div className="grid md:grid-cols-2 gap-8">
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
               </CardHeader>
@@ -417,7 +417,7 @@ function TierSHPage() {
                 Our decentralized grid spans across the globe.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
               </CardHeader>
@@ -425,7 +425,7 @@ function TierSHPage() {
                 Massive computational power available on the grid.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
               </CardHeader>
@@ -433,7 +433,7 @@ function TierSHPage() {
                 Secure and transparent deployments managed by smart contracts.
               </CardContent>
             </Card>
-            <Card className="text-center hover:shadow-lg transition-shadow">
+            <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
               <CardHeader>
                 <CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
               </CardHeader>
@@ -442,24 +442,24 @@ function TierSHPage() {
               </CardContent>
             </Card>
           </div>
-          <p className="text-center text-lg text-slate-600 mt-8">
+          <p className="text-center text-lg text-muted-foreground mt-8">
             View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
           </p>
         </div>
       </section>
 
       {/* Call to Action */}
-      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white">
+      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-primary text-primary-foreground">
         <div className="max-w-4xl mx-auto text-center space-y-8">
           <h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
           <p className="text-xl opacity-90 leading-relaxed">
             The future of digital infrastructure starts with your building.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3">
+            <Button asChild size="lg" className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 text-lg px-8 py-3">
               <Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
             </Button>
-            <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3">
+            <Button asChild variant="outline" size="lg" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary text-lg px-8 py-3">
               <Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
             </Button>
           </div>
@@ -468,14 +468,14 @@ function TierSHPage() {
       </section>
 
       {/* Footer */}
-      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
+      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
         <div className="max-w-6xl mx-auto text-center">
           <div className="flex items-center justify-center space-x-2 mb-4">
             <Globe className="h-6 w-6 text-blue-400" />
             <span className="text-xl font-bold">ThreeFold Galaxy</span>
           </div>
-          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
-          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
+          <p className="text-muted-foreground">Building the new internet, together in our sovereign digital freezone.</p>
+          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
         </div>
       </footer>
     </div>
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index 69ad71f..e4df4ba 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
diff --git a/src/styles/index.css b/src/styles/index.css
index bc69e20..8b89799 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,2 +1,53 @@
 @import "tailwindcss";
-@import "tw-animate-css";
\ No newline at end of file
+@import "tw-animate-css";
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+html[data-theme='dark'] {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index db166a4..2fb198f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,12 +2,68 @@ import typography from '@tailwindcss/typography';
 
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ['attribute', '[data-theme="dark"]'],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
   plugins: [
     typography,