diff --git a/src/App.jsx b/src/App.jsx
index 195cfd6..af16402 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
   return (
     <Router>
       <Navigation />
-      <main className="pt-16 bg-background text-foreground">
+      <main className="pt-16 bg-background text-foreground transition-colors duration-300">
         <Routes>
           <Route path="/" element={<NewHome />} />
           <Route path="/tiers" element={<TierSHPage />} />
diff --git a/src/components/BecomeMember.jsx b/src/components/BecomeMember.jsx
index 3054b5d..b7f35ea 100644
--- a/src/components/BecomeMember.jsx
+++ b/src/components/BecomeMember.jsx
@@ -8,7 +8,6 @@ import { Checkbox } from '@/components/ui/checkbox.jsx'
 import { Badge } from '@/components/ui/badge.jsx'
 import { Globe, Mail, User, MessageSquare, CheckCircle, AlertCircle, DollarSign } from 'lucide-react'
 import { Link } from 'react-router-dom'
-import Navigation from './Navigation.jsx'
 import { loadStripe } from '@stripe/stripe-js'
 
 // Make sure to call `loadStripe` outside of a component’s render to avoid
@@ -438,11 +437,10 @@ function DirectBuy() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
 
       {/* Hero Section */}
-      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="py-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">Direct Purchase</Badge>
           <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 07d6d6a..2e9478d 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -4,8 +4,6 @@ import { Button } from './ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
 import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
-import Navigation from './Navigation'
-
 // Import images
 import heroBanner from '../assets/images/hero_banner.png' // This image might need to be replaced with a relevant one for ThreeFold
 
@@ -22,11 +20,10 @@ function Homepage() {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      {/* Navigation */}
-      <Navigation />
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
 
       {/* Hero Section */}
-      <section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+      <section className={`py-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
         <div className="max-w-6xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div className="space-y-8">
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index a1fb9af..e72ce36 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -15,12 +15,12 @@ function Navigation() {
   }
 
   return (
-    <nav className="fixed top-0 w-full bg-background text-foreground z-50">
+    <nav className="fixed top-0 w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 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">
             <Globe className="h-8 w-8 text-blue-600" />
-            <span className="text-xl font-bold text-slate-900">ThreeFold Galaxy</span>
+            <span className="text-xl font-bold text-slate-900 dark:text-white">ThreeFold Galaxy</span>
           </Link>
 
           {/* Desktop Navigation */}
@@ -31,7 +31,7 @@ function Navigation() {
                 <Link
                   key={item.path}
                   to={item.path}
-                  className={`transition-colors ${isActive(item.path) ? 'text-blue-600 font-medium' : 'text-slate-600 hover:text-blue-600'}`}
+                  className={`transition-colors ${isActive(item.path) ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400'}`}
                 >
                   {item.label}
                 </Link>
@@ -50,7 +50,7 @@ function Navigation() {
                   <Menu className="h-6 w-6" />
                 </Button>
               </SheetTrigger>
-              <SheetContent side="right" className="bg-white text-slate-900 sm:max-w-sm py-6">
+              <SheetContent side="right" className="bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-200 sm:max-w-sm py-6">
                 <div className="flex flex-col items-center space-y-4 pt-6">
                   {navigationData
                     .filter(item => item.show !== false)
@@ -58,7 +58,7 @@ function Navigation() {
                       <SheetClose asChild key={item.path}>
                         <Link
                           to={item.path}
-                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-blue-600' : 'text-slate-900 hover:text-blue-600'}`}
+                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-blue-600 dark:text-blue-400' : 'text-slate-900 dark:text-slate-200 hover:text-blue-600 dark:hover:text-blue-400'}`}
                           onClick={() => setIsMobileMenuOpen(false)}
                         >
                           {item.label}
diff --git a/src/components/NewHome.jsx b/src/components/NewHome.jsx
index 6fc4410..149a432 100644
--- a/src/components/NewHome.jsx
+++ b/src/components/NewHome.jsx
@@ -1,11 +1,8 @@
 import React from 'react';
-import Navigation from './Navigation';
-
 function NewHome() {
   return (
     <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">
+      <main className="flex-grow flex flex-col items-center justify-center text-center p-4 pt-24">
         <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
           <video
             src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
diff --git a/src/components/ProductsPage.jsx b/src/components/ProductsPage.jsx
index 8fb0631..fac5a55 100644
--- a/src/components/ProductsPage.jsx
+++ b/src/components/ProductsPage.jsx
@@ -3,18 +3,15 @@ import { Button } from './ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
 import { Cpu, Home, Shield, Network, DollarSign, CheckCircle, Users, Zap, TrendingUp, Layers, Scale, Globe } from 'lucide-react'
-import Navigation from './Navigation'
-
 function ProductsPage() {
   return (
     <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">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
       </div>
 
       {/* Product Overview Hero */}
-      <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="pt-24 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-primary/10 text-primary hover:bg-primary/20">Our Solutions</Badge>
           <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
diff --git a/src/components/RegisterPage.jsx b/src/components/RegisterPage.jsx
index c1d6869..7208784 100644
--- a/src/components/RegisterPage.jsx
+++ b/src/components/RegisterPage.jsx
@@ -8,7 +8,6 @@ import { Label } from './ui/label'
 import { Textarea } from './ui/textarea'
 import { Checkbox } from './ui/checkbox'
 import { CheckCircle, AlertCircle, ArrowRight, Zap, TrendingUp, Target, Shield, Network, BookOpen, Globe, Users } from 'lucide-react'
-import Navigation from './Navigation'
 import Step1Form from './Step1Form'
 import InterestSpecificStep from './InterestSpecificStep'
 import FinalStepForm from './FinalStepForm'
@@ -198,11 +197,10 @@ function RegisterPage() {
 
   return (
     <div className="min-h-screen bg-background">
-      {/* Navigation */}
-      <Navigation />
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
 
       {/* Hero Section */}
-      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="py-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-foreground leading-tight">
diff --git a/src/components/TechnologyPage.jsx b/src/components/TechnologyPage.jsx
index 5b68fb5..a08eb86 100644
--- a/src/components/TechnologyPage.jsx
+++ b/src/components/TechnologyPage.jsx
@@ -6,18 +6,18 @@ import { Cpu, Database, Network, Shield, Zap, Scale, Globe, CheckCircle, BookOpe
 import quantumSafeImage from '../assets/quantum_safe.png'
 import MyceliumImage from '../assets/myceliumn.png'
 import { AlertCircle } from 'lucide-react'
-import Navigation from './Navigation'
+import Navigation from './Navigation.jsx'
 
 function TechnologyPage() {
   return (
     <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">
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
         <img src="/src/assets/tenstorrent_galaxy_internal_components.png" alt="Tenstorrent Galaxy Internal Components" className="w-full h-auto rounded-lg shadow-lg" />
       </div>
 
       {/* Technology Hero Section */}
-      <section className="pt-12 pb-16 px-4 sm:px-6 lg:px-8">
+      <section className="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-primary/10 text-primary hover:bg-primary/20">Our Innovations</Badge>
           <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
diff --git a/src/components/TierSHPage.jsx b/src/components/TierSHPage.jsx
index bb3d338..3dc4205 100644
--- a/src/components/TierSHPage.jsx
+++ b/src/components/TierSHPage.jsx
@@ -4,8 +4,6 @@ import { Button } from './ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
 import { Badge } from './ui/badge'
 import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
-import Navigation from './Navigation'
-
 // Import images
 
 function TierSHPage() {
@@ -21,11 +19,10 @@ function TierSHPage() {
 
   return (
     <div className="min-h-screen bg-background text-foreground">
-      {/* Navigation */}
-      <Navigation />
+      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
 
       {/* Hero Section */}
-      <section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+      <section className={`py-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
         <div className="max-w-6xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div className="space-y-8">
diff --git a/src/styles/index.css b/src/styles/index.css
index 8b89799..e5b165e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -47,7 +47,7 @@ html[data-theme='dark'] {
 }
 
 body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+  @apply bg-background text-foreground;
+
   transition: background-color 0.3s ease, color 0.3s ease;
 }
\ No newline at end of file