diff --git a/src/App.tsx b/src/App.tsx
index 07b55fb..1032844 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -805,120 +805,138 @@ export default function App() {
   return (
     <>
       {/* Dynamic Header */}
-      <header className="app-header">
-        <div className="logo-container" onClick={() => navigateTo('home')}>
-          <div className="logo-icon">{CONFIG.logoLetter}</div>
-          <span className="logo-text">{CONFIG.companyName}</span>
-        </div>
-        <nav className="nav-links">
-          <button
-            className={`nav-link ${currentPage === 'home' ? 'active' : ''}`}
-            onClick={() => navigateTo('home')}
-          >
-            Platform
+      <nav className="w-full top-0 sticky z-50 bg-white border-b border-[#D9C5B2] transition-all duration-300">
+        <div className="flex justify-between items-center max-w-7xl mx-auto px-8 py-4">
+          <button className="font-caslon text-2xl font-bold text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>
+            Tradhox
           </button>
-          <button
-            className="nav-link"
-            onClick={() => navigateTo('home')}
-          >
-            Pricing
-          </button>
-          <button
-            className={`nav-link ${currentPage === 'about' ? 'active' : ''}`}
-            onClick={() => navigateTo('about')}
-          >
-            Success Stories
-          </button>
-          <button
-            className={`nav-link ${currentPage === 'contact' ? 'active' : ''}`}
-            onClick={() => navigateTo('contact')}
-          >
-            Support
-          </button>
-        </nav>
-        <div className="nav-buttons">
-          {currentPage === 'dashboard' ? (
-            <button className="btn btn-secondary" onClick={handleLogout}>
-              Logout
-            </button>
-          ) : (
-            <>
-              <button className="btn btn-secondary" onClick={() => { setActiveTab('login'); navigateTo('login'); }}>
-                Login
-              </button>
-              <button className="btn btn-primary" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
-                Get Started
-              </button>
-            </>
-          )}
-        </div>
-      </header>
+          
+          <div className="hidden md:flex gap-8 items-center text-sm font-semibold">
+            <button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>Shop</button>
+            <button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Artisans</button>
+            <button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Our Story</button>
+            <button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('contact')}>Support</button>
+          </div>
 
+          <div className="flex items-center gap-4 text-sm font-semibold">
+            {currentPage === 'dashboard' ? (
+              <button className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer" onClick={handleLogout}>
+                Logout
+              </button>
+            ) : (
+              <>
+                <button 
+                  className="text-secondary hover:text-primary bg-transparent border-none cursor-pointer"
+                  onClick={() => { setActiveTab('login'); navigateTo('login'); }}
+                >
+                  Login
+                </button>
+                <button 
+                  className="bg-primary text-white px-4 py-2 rounded font-semibold transition-opacity hover:opacity-90 cursor-pointer"
+                  onClick={() => { setActiveTab('register'); navigateTo('signup'); }}
+                >
+                  Get Started
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </nav>
       {/* Main Content Area */}
       {currentPage !== 'dashboard' ? (
         <main className={`main-content ${currentPage === 'home' ? 'full-width' : ''}`}>
 
           {/* HOMEPAGE VIEW */}
           {currentPage === 'home' && (
-            <div>
-              <section className="hero-section">
-                <div className="hero-content">
-                  <h1>
-                    {CONFIG.hero.title.split('. ')[0]}.<br />
-                    {CONFIG.hero.title.split('. ')[1]}
-                  </h1>
-                  <p>
-                    {CONFIG.hero.subtitle}
-                  </p>
-                  <div style={{ display: 'flex', gap: '1rem' }}>
-                    <button className="btn btn-dark" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
-                      Get Started Today
+            <div className="animate-fadeIn">
+              {/* Hero Section */}
+              <section className="relative w-full h-[600px] flex items-center justify-center overflow-hidden">
+                <div className="absolute inset-0 z-0">
+                  <img src="/artisan_weaving.jpg" className="w-full h-full object-cover" />
+                  <div className="absolute inset-0 bg-black/50"></div>
+                </div>
+                <div className="relative z-10 text-center max-w-3xl px-8 mx-auto text-white space-y-6">
+                  <h1 className="font-caslon text-5xl md:text-6xl font-bold leading-tight">Sell Globally. Celebrate Craft.</h1>
+                  <p className="text-lg md:text-xl max-w-2xl mx-auto opacity-90">Discover authentic Indian craftsmanship, preserved for generations and handcrafted for you.</p>
+                  <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+                    <button className="bg-primary text-white px-8 py-3 rounded font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2 cursor-pointer" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
+                      Shop the Collection
+                      <span className="material-symbols-outlined text-lg">arrow_forward</span>
                     </button>
-                    <button className="btn btn-outline-dark" onClick={() => navigateTo('about')}>
-                      Learn More
+                    <button className="bg-transparent border border-white text-white px-8 py-3 rounded font-semibold hover:bg-white/10 transition-colors cursor-pointer" onClick={() => navigateTo('about')}>
+                      Meet our Artisans
                     </button>
                   </div>
                 </div>
-                <div className="hero-image-wrapper">
-                  <img
-                    src={CONFIG.hero.image}
-                    alt="Artisans Crafting"
-                    className="hero-img"
-                  />
-                </div>
               </section>
 
-              <section className="features-section">
-                <div className="features-grid">
-                  {CONFIG.features.map((feature, i) => (
-                    <div className="feature-card" key={i}>
-                      <div className="feature-icon-wrapper">{feature.icon}</div>
-                      <h3>{feature.title}</h3>
-                      <p>{feature.description}</p>
+              {/* Discover Heritage Cards */}
+              <section className="max-w-7xl mx-auto px-8 py-16">
+                <h2 className="font-caslon text-3xl font-bold text-center text-primary mb-12">Discover Heritage</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {/* Category 1 */}
+                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    <div className="absolute bottom-0 left-0 p-4 w-full text-white">
+                      <h3 className="font-caslon text-lg font-bold mb-1">Hand-Thrown Pottery</h3>
+                      <p className="text-xs opacity-90">Explore Collection</p>
                     </div>
-                  ))}
+                  </div>
+                  {/* Category 2 */}
+                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/kanchipuram_silk.jpg" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    <div className="absolute bottom-0 left-0 p-4 w-full text-white">
+                      <h3 className="font-caslon text-lg font-bold mb-1">Traditional Textiles</h3>
+                      <p className="text-xs opacity-90">Explore Collection</p>
+                    </div>
+                  </div>
+                  {/* Category 3 */}
+                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    <div className="absolute bottom-0 left-0 p-4 w-full text-white">
+                      <h3 className="font-caslon text-lg font-bold mb-1">Metallic Arts</h3>
+                      <p className="text-xs opacity-90">Explore Collection</p>
+                    </div>
+                  </div>
+                  {/* Category 4 */}
+                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/kanchipuram_silk.jpg" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    <div className="absolute bottom-0 left-0 p-4 w-full text-white">
+                      <h3 className="font-caslon text-lg font-bold mb-1">Wooden Heritage</h3>
+                      <p className="text-xs opacity-90">Explore Collection</p>
+                    </div>
+                  </div>
                 </div>
               </section>
 
-              <section className="featured-artisan-section">
-                <div className="artisan-card">
-                  <img
-                    src={CONFIG.featuredArtisan.avatar}
-                    alt="Featured Artisan"
-                    className="artisan-avatar"
-                  />
-                  <div className="artisan-info">
-                    <h4>Featured Artisan</h4>
-                    <p className="artisan-quote">
-                      {CONFIG.featuredArtisan.quote}
-                    </p>
-                    <p style={{ fontWeight: 'bold' }}>- {CONFIG.featuredArtisan.name} ({CONFIG.featuredArtisan.role})</p>
+              {/* The Tradhox Promise */}
+              <section className="bg-surface-container-low py-16 border-y border-outline-variant/30">
+                <div className="max-w-7xl mx-auto px-8">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+                    <div className="flex flex-col items-center p-4">
+                      <span className="material-symbols-outlined text-primary text-4xl mb-2">verified</span>
+                      <h3 className="font-caslon text-xl font-bold text-primary mb-2">Expand Your Reach</h3>
+                      <p className="text-sm text-secondary max-w-xs mx-auto">Every piece is verified for its origin and traditional crafting methods, ensuring you receive true heritage art.</p>
+                    </div>
+                    <div className="flex flex-col items-center p-4">
+                      <span className="material-symbols-outlined text-primary text-4xl mb-2">handshake</span>
+                      <h3 className="font-caslon text-xl font-bold text-primary mb-2">Easy Inventory Tools</h3>
+                      <p className="text-sm text-secondary max-w-xs mx-auto">We empower creators directly, bypassing intermediaries to foster sustainable livelihoods for artisanal communities.</p>
+                    </div>
+                    <div className="flex flex-col items-center p-4">
+                      <span className="material-symbols-outlined text-primary text-4xl mb-2">eco</span>
+                      <h3 className="font-caslon text-xl font-bold text-primary mb-2">Secure Payments</h3>
+                      <p className="text-sm text-secondary max-w-xs mx-auto">Committed to eco-friendly materials and ethical production processes that respect both people and the planet.</p>
+                    </div>
                   </div>
                 </div>
               </section>
             </div>
           )}
-
           {/* ABOUT US VIEW */}
           {currentPage === 'about' && (
             <div>