diff --git a/src/assets/hero-facility.jpg b/src/assets/hero-facility.jpg
new file mode 100644
index 0000000..f824069
Binary files /dev/null and b/src/assets/hero-facility.jpg differ
diff --git a/src/assets/hero-welder.jpg b/src/assets/hero-welder.jpg
new file mode 100644
index 0000000..d139bab
Binary files /dev/null and b/src/assets/hero-welder.jpg differ
diff --git a/src/components/CompanyBlurb.tsx b/src/components/CompanyBlurb.tsx
index 223f421..9eb616a 100644
--- a/src/components/CompanyBlurb.tsx
+++ b/src/components/CompanyBlurb.tsx
@@ -8,35 +8,49 @@ const CompanyBlurb = () => {
     <section className="py-24 bg-bg-elevated">
       <div className="container mx-auto px-4">
         <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            <div className="space-y-6 animate-fade-in">
-              <h2 className="text-display-sm font-bold text-foreground">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div className="space-y-8 animate-fade-in">
+              <h2 className="text-4xl lg:text-5xl font-bold text-ink leading-tight">
                 Precision Craftsmanship, Reliable Service
               </h2>
-              <p className="text-muted leading-relaxed text-lg">
+              <p className="text-muted leading-relaxed text-xl font-light">
                 {content.home.blurbLeft}
               </p>
-              <Button className="group">
+              <Button size="lg" className="group bg-accent hover:bg-accent/90">
                 Learn More About Us
                 <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
               </Button>
             </div>
             
-            <div className="space-y-6 animate-fade-in">
-              <div className="bg-gradient-card rounded-xl p-8 shadow-subtle border border-border">
-                <p className="text-muted leading-relaxed">
+            <div className="space-y-8 animate-fade-in-up">
+              <div className="bg-gradient-card rounded-2xl p-8 shadow-elevated border border-border">
+                <p className="text-muted leading-relaxed text-lg mb-8">
                   {content.home.blurbRight}
                 </p>
                 
-                {/* Stats */}
-                <div className="grid grid-cols-2 gap-6 mt-8 pt-6 border-t border-border">
-                  <div className="text-center">
-                    <div className="text-2xl font-bold text-accent">500+</div>
-                    <div className="text-sm text-muted">Projects Completed</div>
+                {/* Enhanced Stats Grid */}
+                <div className="grid grid-cols-2 gap-8">
+                  <div className="text-center group">
+                    <div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">500+</div>
+                    <div className="text-sm text-muted font-medium">Projects Completed</div>
+                    <div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
                   </div>
-                  <div className="text-center">
-                    <div className="text-2xl font-bold text-accent">20+</div>
-                    <div className="text-sm text-muted">Years Experience</div>
+                  <div className="text-center group">
+                    <div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">20+</div>
+                    <div className="text-sm text-muted font-medium">Years Experience</div>
+                    <div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
+                  </div>
+                </div>
+                
+                {/* Additional highlights */}
+                <div className="mt-8 pt-6 border-t border-border">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted">Certified Welders</span>
+                    <span className="text-ink font-medium">✓ AWS Certified</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm mt-2">
+                    <span className="text-muted">Safety Record</span>
+                    <span className="text-ink font-medium">✓ Zero Incidents</span>
                   </div>
                 </div>
               </div>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 050a055..0701524 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,77 +2,109 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Wrench, Shield, Award } from 'lucide-react';
 import content from '@/content/content.json';
+import heroWelder from '@/assets/hero-welder.jpg';
+import heroFacility from '@/assets/hero-facility.jpg';
 
 const Hero = () => {
   return (
     <section className="relative min-h-screen flex items-center hero-gradient overflow-hidden">
-      {/* Background Image Overlay */}
-      <div className="absolute inset-0 bg-gradient-to-r from-bg/90 to-transparent z-10"></div>
+      {/* Geometric Background Elements */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="absolute top-0 right-0 w-1/2 h-full border-l border-t border-accent/20"></div>
+        <div className="absolute bottom-0 left-0 w-1/3 h-2/3 border-r border-b border-accent/10"></div>
+      </div>
       
       <div className="container mx-auto px-4 relative z-20">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <div className="space-y-8 animate-fade-in-up">
-            <div className="space-y-4">
-              <h1 className="text-display-lg font-bold text-ink leading-none">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-screen py-24">
+          {/* Content - Left Side */}
+          <div className="lg:col-span-6 space-y-8 animate-fade-in">
+            <div className="space-y-6">
+              <h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-ink leading-[0.9] tracking-tight">
                 {content.home.heroTitle}
               </h1>
-              <p className="text-xl text-muted max-w-lg leading-relaxed">
+              <p className="text-xl lg:text-2xl text-muted max-w-2xl leading-relaxed font-light">
                 {content.home.heroSubtitle}
               </p>
             </div>
 
-            {/* CTAs */}
-            <div className="flex flex-col sm:flex-row gap-4">
-              <Button size="lg" className="group">
+            {/* CTAs - Matching Dispel Style */}
+            <div className="flex flex-col sm:flex-row gap-4 pt-4">
+              <Button 
+                size="xl" 
+                variant="hero"
+                className="bg-ink text-bg hover:bg-ink/90 shadow-elevated font-semibold text-lg px-8 py-4 h-auto"
+              >
+                Get Quote
+              </Button>
+              <Button 
+                variant="outline" 
+                size="xl"
+                className="border-ink/30 text-ink hover:bg-ink/10 hover:border-ink font-semibold text-lg px-8 py-4 h-auto"
+              >
                 {content.home.ctaServices}
-                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
               </Button>
-              <Button variant="outline" size="lg">
-                {content.home.ctaExplore}
-              </Button>
-            </div>
-
-            {/* Features */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8">
-              {content.home.features.map((feature, index) => (
-                <div key={index} className="flex items-start space-x-3">
-                  <div className="flex-shrink-0 w-8 h-8 bg-accent/20 rounded-md flex items-center justify-center">
-                    {index === 0 && <Wrench className="h-4 w-4 text-accent" />}
-                    {index === 1 && <Shield className="h-4 w-4 text-accent" />}
-                    {index === 2 && <Award className="h-4 w-4 text-accent" />}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-ink text-sm">{feature.title}</h3>
-                    <p className="text-muted text-xs leading-relaxed mt-1">{feature.description}</p>
-                  </div>
-                </div>
-              ))}
             </div>
           </div>
 
-          {/* Hero Image Placeholder */}
-          <div className="relative lg:ml-8">
-            <div className="relative bg-gradient-card rounded-2xl p-8 shadow-elevated">
-              <div className="aspect-[4/3] bg-muted/20 rounded-xl flex items-center justify-center">
-                <div className="text-center space-y-4">
-                  <Wrench className="h-16 w-16 text-accent mx-auto" />
-                  <p className="text-muted text-sm">Industrial Facility Image</p>
+          {/* Hero Images - Right Side */}
+          <div className="lg:col-span-6 relative">
+            <div className="relative">
+              {/* Main Hero Image Container */}
+              <div className="relative bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-2xl">
+                <div className="relative overflow-hidden rounded-xl">
+                  <img 
+                    src={heroWelder}
+                    alt="Professional welder working with industrial equipment"
+                    className="w-full h-[500px] object-cover"
+                  />
+                  {/* Overlay gradient */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent"></div>
                 </div>
               </div>
               
-              {/* Floating Cards */}
-              <div className="absolute -bottom-4 -left-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
-                <div className="flex items-center space-x-2">
-                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                  <span className="text-xs text-ink font-medium">Active Projects: 15+</span>
+              {/* Secondary Image - Overlaid */}
+              <div className="absolute -top-8 -right-8 w-64 h-48 bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-xl">
+                <div className="relative overflow-hidden rounded-lg h-full">
+                  <img 
+                    src={heroFacility}
+                    alt="Industrial fabrication facility"
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-bg/40 to-transparent"></div>
+                  
+                  {/* Label */}
+                  <div className="absolute top-3 left-3 bg-bg/80 backdrop-blur-sm rounded px-2 py-1">
+                    <span className="text-ink text-xs font-medium">Our Facility</span>
+                  </div>
                 </div>
               </div>
               
-              <div className="absolute -top-4 -right-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
-                <div className="flex items-center space-x-2">
-                  <Award className="h-4 w-4 text-accent" />
-                  <span className="text-xs text-ink font-medium">20+ Years Experience</span>
+              {/* Decorative border elements */}
+              <div className="absolute -inset-4 border border-accent/20 rounded-2xl pointer-events-none"></div>
+              <div className="absolute -inset-8 border-l border-t border-accent/10 rounded-2xl pointer-events-none"></div>
+            </div>
+
+            {/* Floating Stats Cards */}
+            <div className="absolute -bottom-6 -left-6 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                  <Wrench className="h-6 w-6 text-accent" />
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-ink">500+</div>
+                  <div className="text-sm text-muted">Projects Completed</div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="absolute -top-6 right-8 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
+              <div className="flex items-center space-x-4">
+                <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                  <Award className="h-6 w-6 text-accent" />
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-ink">20+</div>
+                  <div className="text-sm text-muted">Years Experience</div>
                 </div>
               </div>
             </div>
diff --git a/src/components/LogoSection.tsx b/src/components/LogoSection.tsx
new file mode 100644
index 0000000..76d496f
--- /dev/null
+++ b/src/components/LogoSection.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+const LogoSection = () => {
+  const clients = [
+    { name: 'ExxonMobil', logo: 'EM' },
+    { name: 'Chevron', logo: 'CV' },
+    { name: 'Valero', logo: 'VL' },
+    { name: 'Phillips 66', logo: 'P66' },
+    { name: 'Marathon', logo: 'MPC' },
+    { name: 'Citgo', logo: 'CG' }
+  ];
+
+  return (
+    <section className="py-16 bg-bg border-t border-border/50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <p className="text-muted text-sm uppercase tracking-wider font-medium">
+            Trusted by Industry Leaders
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
+          {clients.map((client, index) => (
+            <div
+              key={client.name}
+              className="flex items-center justify-center group hover-scale"
+              style={{
+                animationDelay: `${index * 0.1}s`
+              }}
+            >
+              <div className="w-24 h-16 bg-gradient-card border border-border rounded-lg flex items-center justify-center group-hover:border-accent/30 transition-smooth">
+                <div className="text-center">
+                  <div className="text-ink font-bold text-sm opacity-70 group-hover:opacity-100 transition-opacity">
+                    {client.logo}
+                  </div>
+                  <div className="text-xs text-muted opacity-50 group-hover:opacity-70 transition-opacity mt-1">
+                    {client.name}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default LogoSection;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 0d7ac09..4886a5a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -100,6 +100,16 @@
   .focus-ring {
     @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
   }
+  
+  /* Interactive hover effects */
+  .hover-scale {
+    @apply transition-all duration-300 ease-out hover:scale-105;
+  }
+  
+  /* Story link with underline animation */
+  .story-link {
+    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
+  }
 }
 
 @layer utilities {
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index d76d685..49c8993 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -3,13 +3,15 @@ import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import Hero from '@/components/Hero';
 import CompanyBlurb from '@/components/CompanyBlurb';
+import LogoSection from '@/components/LogoSection';
 
 const Index = () => {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <main>
+      <main id="main">
         <Hero />
+        <LogoSection />
         <CompanyBlurb />
       </main>
       <Footer />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6d2c9bf..878ab79 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -140,12 +140,43 @@ export default {
             transform: "translateY(0)",
           },
         },
+        "scale-in": {
+          from: {
+            opacity: "0",
+            transform: "scale(0.95)",
+          },
+          to: {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+        },
+        "slide-in-right": {
+          from: {
+            opacity: "0",
+            transform: "translateX(100px)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+        "glow": {
+          "0%, 100%": {
+            boxShadow: "0 0 20px hsl(355 75% 47% / 0.3)",
+          },
+          "50%": {
+            boxShadow: "0 0 40px hsl(355 75% 47% / 0.5)",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.6s ease-out",
         "fade-in-up": "fade-in-up 0.8s ease-out",
+        "scale-in": "scale-in 0.4s ease-out",
+        "slide-in-right": "slide-in-right 0.6s ease-out",
+        "glow": "glow 2s ease-in-out infinite",
       },
     },
   },