diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c00d296..f204e7a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,14 +2,32 @@
 import { siteConfig } from "../config/site";
 ---
 
-<footer class="bg-base-200 py-8" role="contentinfo">
+<footer class="bg-neutral text-neutral-content" role="contentinfo">
     <div class="max-w-7xl mx-auto px-6">
-        <div class="text-center">
-            <p class="text-base-content/80 font-medium">
+        <div class="footer footer-center py-10">
+            <aside class="space-y-4">
+                <div class="flex items-center gap-2 text-2xl font-bold">
+                    <span>🔥</span>
+                    <span>{siteConfig.name}</span>
+                </div>
+                <p class="text-neutral-content/70 max-w-md">
+                    {siteConfig.description}
+                </p>
+                <nav class="flex gap-6">
+                    {
+                        siteConfig.header.nav.map(({ text, href }) => (
+                            <a href={href} class="link link-hover text-neutral-content/70 hover:text-neutral-content transition-colors">
+                                {text}
+                            </a>
+                        ))
+                    }
+                </nav>
+            </aside>
+        </div>
+        <div class="border-t border-neutral-content/10 py-6">
+            <p class="text-center text-neutral-content/60 text-sm">
                 <span class="sr-only">Copyright</span>
-                © {new Date().getFullYear()} - All rights reserved by {
-                    siteConfig.name
-                }
+                © {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
             </p>
         </div>
     </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 71addd5..233663c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,69 +2,73 @@
 import { siteConfig } from "../config/site";
 ---
 
-<header class="navbar bg-base-100 shadow-lg" role="banner">
-    <div class="navbar-start">
-        <div class="dropdown">
-            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-hidden="true"
+<header class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200" role="banner">
+    <div class="navbar max-w-7xl mx-auto px-4 lg:px-6">
+        <div class="navbar-start">
+            <div class="dropdown">
+                <div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-5 w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        aria-hidden="true"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 6h16M4 12h8m-8 6h16"></path>
+                    </svg>
+                </div>
+                <ul
+                    tabindex="0"
+                    class="menu menu-sm dropdown-content bg-base-100 rounded-xl z-50 mt-3 w-56 p-3 shadow-xl border border-base-200"
+                    role="menu"
                 >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M4 6h16M4 12h8m-8 6h16"></path>
-                </svg>
+                    {
+                        siteConfig.header.nav.map(({ text, href }) => (
+                            <li role="none">
+                                <a href={href} role="menuitem" class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors">
+                                    {text}
+                                </a>
+                            </li>
+                        ))
+                    }
+                </ul>
             </div>
-            <ul
-                tabindex="0"
-                class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
-                role="menu"
+            <a
+                href={siteConfig.header.logo.href}
+                class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors"
+                aria-label="Home"
             >
+                <span class="text-primary">🔥</span>
+                <span class="hidden sm:inline">{siteConfig.header.logo.text}</span>
+                <span class="sm:hidden">Atash</span>
+            </a>
+        </div>
+        <nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
+            <ul class="menu menu-horizontal gap-1" role="menubar">
                 {
                     siteConfig.header.nav.map(({ text, href }) => (
                         <li role="none">
-                            <a href={href} role="menuitem">
+                            <a href={href} role="menuitem" class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">
                                 {text}
                             </a>
                         </li>
                     ))
                 }
             </ul>
+        </nav>
+        <div class="navbar-end">
+            <a
+                href={siteConfig.header.cta.href}
+                class="btn btn-primary btn-sm lg:btn-md shadow-md hover:shadow-lg transition-all"
+                role="button"
+            >
+                {siteConfig.header.cta.text}
+            </a>
         </div>
-        <a
-            href={siteConfig.header.logo.href}
-            class="btn btn-ghost text-xl"
-            aria-label="Home"
-        >
-            {siteConfig.header.logo.text}
-        </a>
-    </div>
-    <nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
-        <ul class="menu menu-horizontal px-1" role="menubar">
-            {
-                siteConfig.header.nav.map(({ text, href }) => (
-                    <li role="none">
-                        <a href={href} role="menuitem">
-                            {text}
-                        </a>
-                    </li>
-                ))
-            }
-        </ul>
-    </nav>
-    <div class="navbar-end">
-        <a
-            href={siteConfig.header.cta.href}
-            class="btn btn-primary"
-            role="button"
-        >
-            {siteConfig.header.cta.text}
-        </a>
     </div>
 </header>
diff --git a/src/components/sections/AboutSection.astro b/src/components/sections/AboutSection.astro
index 11b4842..d30f6be 100644
--- a/src/components/sections/AboutSection.astro
+++ b/src/components/sections/AboutSection.astro
@@ -1,113 +1,71 @@
-<section id="about" class="py-16 lg:py-24">
+<section id="about" class="py-20 lg:py-28">
     <div class="max-w-7xl mx-auto px-6">
-        <div class="hero bg-base-200 rounded-2xl shadow-lg">
-            <div class="hero-content text-center py-12 lg:py-16 px-6">
-                <div class="max-w-4xl w-full space-y-8">
-                    <div class="space-y-4">
-                        <div
-                            class="inline-flex items-center gap-3 bg-secondary/10 text-secondary px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold"
-                        >
-                            <svg
-                                class="w-8 h-8"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                                ></path>
-                            </svg>
-                            Why Choose Atash Consulting?
-                        </div>
-                    </div>
-                    <p
-                        class="text-lg text-base-content/80 leading-relaxed max-w-3xl mx-auto"
-                    >
-                        With over a decade of experience in the software
-                        industry, I bring deep technical expertise and a
-                        commitment to excellence to every project.
-                    </p>
-                    <div
-                        class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 mt-12"
-                    >
-                        <div class="text-center space-y-4">
-                            <div
-                                class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center mx-auto shadow-lg"
-                            >
-                                <svg
-                                    class="w-8 h-8 text-primary-content"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-base-content">
-                                Fast Delivery
-                            </h3>
-                            <p class="text-base-content/70 leading-relaxed">
-                                Quick turnaround without compromising quality
-                            </p>
-                        </div>
-                        <div class="text-center space-y-4">
-                            <div
-                                class="w-16 h-16 bg-secondary rounded-xl flex items-center justify-center mx-auto shadow-lg"
-                            >
-                                <svg
-                                    class="w-8 h-8 text-secondary-content"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                                    ></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-base-content">
-                                Quality Assured
-                            </h3>
-                            <p class="text-base-content/70 leading-relaxed">
-                                Rigorous testing and quality control processes
-                            </p>
-                        </div>
-                        <div class="text-center space-y-4">
-                            <div
-                                class="w-16 h-16 bg-accent rounded-xl flex items-center justify-center mx-auto shadow-lg"
-                            >
-                                <svg
-                                    class="w-8 h-8 text-accent-content"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                                    ></path>
-                                </svg>
-                            </div>
-                            <h3 class="text-xl font-bold text-base-content">
-                                Expert Support
-                            </h3>
-                            <p class="text-base-content/70 leading-relaxed">
-                                Ongoing support and maintenance services
-                            </p>
-                        </div>
-                    </div>
+        <div class="text-center mb-16">
+            <span class="badge badge-secondary badge-lg font-semibold mb-4">Why Us</span>
+            <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
+                Why Choose Atash Consulting?
+            </h2>
+            <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
+                With over a decade of experience in the software industry, we bring deep
+                technical expertise and a commitment to excellence to every project.
+            </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-primary/30 hover:shadow-xl transition-all duration-300">
+                <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                    </svg>
+                </div>
+                <h3 class="text-xl font-bold text-base-content mb-3">Fast Delivery</h3>
+                <p class="text-base-content/60 leading-relaxed">
+                    Quick turnaround without compromising quality
+                </p>
+            </div>
+
+            <div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-secondary/30 hover:shadow-xl transition-all duration-300">
+                <div class="w-16 h-16 bg-secondary/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </div>
+                <h3 class="text-xl font-bold text-base-content mb-3">Quality Assured</h3>
+                <p class="text-base-content/60 leading-relaxed">
+                    Rigorous testing and quality control processes
+                </p>
+            </div>
+
+            <div class="group text-center p-8 rounded-2xl bg-base-100 border border-base-300/50 hover:border-accent/30 hover:shadow-xl transition-all duration-300">
+                <div class="w-16 h-16 bg-accent/10 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                    </svg>
+                </div>
+                <h3 class="text-xl font-bold text-base-content mb-3">Expert Support</h3>
+                <p class="text-base-content/60 leading-relaxed">
+                    Ongoing support and maintenance services
+                </p>
+            </div>
+        </div>
+
+        <div class="mt-20 p-8 lg:p-12 rounded-2xl bg-gradient-to-br from-neutral to-neutral/90">
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="text-center">
+                    <div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">10+</div>
+                    <div class="text-neutral-content/60 text-sm font-medium">Years Experience</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">50+</div>
+                    <div class="text-neutral-content/60 text-sm font-medium">Projects Delivered</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">100%</div>
+                    <div class="text-neutral-content/60 text-sm font-medium">Client Satisfaction</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">24/7</div>
+                    <div class="text-neutral-content/60 text-sm font-medium">Support Available</div>
                 </div>
             </div>
         </div>
diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 3762f11..4698449 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -61,175 +61,147 @@ ${message()}`,
   };
 
   return (
-    <section id="contact" class="py-16 lg:py-24">
+    <section id="contact" class="py-20 lg:py-28 bg-base-200/50">
       <div class="max-w-7xl mx-auto px-6">
-        <div class="text-center mb-12 lg:mb-16">
-          <div class="inline-flex items-center gap-3 bg-accent/10 text-accent px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold">
-            <svg
-              class="w-8 h-8"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-              ></path>
-            </svg>
+        <div class="text-center mb-16">
+          <span class="badge badge-accent badge-lg font-semibold mb-4">Contact</span>
+          <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
             Get In Touch
-          </div>
-          <p class="text-lg text-base-content/70 max-w-2xl mx-auto leading-relaxed mt-6">
-            Ready to start your project? Let's discuss how I can help.
+          </h2>
+          <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
+            Ready to start your project? Let's discuss how we can help.
           </p>
         </div>
 
         <div class="max-w-2xl mx-auto">
-          <div class="card bg-base-100 shadow-xl border border-base-200 rounded-2xl">
-            <div class="card-body p-6 lg:p-8">
+          <div class="card bg-base-100 border border-base-300/50 shadow-xl">
+            <div class="card-body p-8 lg:p-10">
               <form class="space-y-6" onSubmit={handleSubmit}>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div class="form-control">
-                    <label class="label">
-                      <span class="label-text font-semibold text-base text-base-content">
-                        First Name *
-                      </span>
-                    </label>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                  <fieldset class="fieldset">
+                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                      First Name *
+                    </legend>
                     <input
                       type="text"
                       name="firstName"
-                      class="input input-bordered w-full focus:input-primary"
+                      class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
                       required
                       value={firstName()}
                       onInput={(e) => setFirstName(e.currentTarget.value)}
                       disabled={status() === "sending"}
-                      placeholder="Enter your first name"
+                      placeholder="John"
                     />
-                  </div>
-                  <div class="form-control">
-                    <label class="label">
-                      <span class="label-text font-semibold text-base text-base-content">
-                        Last Name *
-                      </span>
-                    </label>
+                  </fieldset>
+                  <fieldset class="fieldset">
+                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                      Last Name *
+                    </legend>
                     <input
                       type="text"
                       name="lastName"
-                      class="input input-bordered w-full focus:input-primary"
+                      class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
                       required
                       value={lastName()}
                       onInput={(e) => setLastName(e.currentTarget.value)}
                       disabled={status() === "sending"}
-                      placeholder="Enter your last name"
+                      placeholder="Doe"
                     />
-                  </div>
+                  </fieldset>
                 </div>
 
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold text-base text-base-content">
-                      Email Address *
-                    </span>
-                  </label>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    Email Address *
+                  </legend>
                   <input
                     type="email"
                     name="email"
-                    class="input input-bordered w-full focus:input-primary"
+                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
                     required
                     value={email()}
                     onInput={(e) => setEmail(e.currentTarget.value)}
                     disabled={status() === "sending"}
-                    placeholder="your.email@example.com"
+                    placeholder="john@example.com"
                   />
-                </div>
+                </fieldset>
 
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold text-base text-base-content">
-                      Company
-                    </span>
-                  </label>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    Company
+                  </legend>
                   <input
                     type="text"
                     name="company"
-                    class="input input-bordered w-full focus:input-primary"
+                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
                     value={company()}
                     onInput={(e) => setCompany(e.currentTarget.value)}
                     disabled={status() === "sending"}
                     placeholder="Your company name (optional)"
                   />
-                </div>
+                </fieldset>
 
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold text-base text-base-content">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                  <fieldset class="fieldset">
+                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
                       Service Needed
-                    </span>
-                  </label>
-                  <select
-                    name="service"
-                    class="select select-bordered w-full focus:select-primary"
-                    value={service()}
-                    onChange={(e) => setService(e.currentTarget.value)}
-                    disabled={status() === "sending"}
-                  >
-                    <option value="">Select a service...</option>
-                    <option value="web-development">Web Development</option>
-                    <option value="mobile-development">
-                      Mobile App Development
-                    </option>
-
-                    <option value="devops">DevOps</option>
-                    <option value="it-support">IT Support Processes</option>
-                    <option value="consultation">General Consultation</option>
-                  </select>
-                </div>
-
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text font-semibold text-base text-base-content">
+                    </legend>
+                    <select
+                      name="service"
+                      class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                      value={service()}
+                      onChange={(e) => setService(e.currentTarget.value)}
+                      disabled={status() === "sending"}
+                    >
+                      <option value="">Select a service...</option>
+                      <option value="web-development">Web Development</option>
+                      <option value="mobile-development">Mobile App Development</option>
+                      <option value="devops">DevOps</option>
+                      <option value="it-support">IT Support Processes</option>
+                      <option value="consultation">General Consultation</option>
+                    </select>
+                  </fieldset>
+                  <fieldset class="fieldset">
+                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
                       Project Budget
-                    </span>
-                  </label>
-                  <select
-                    name="budget"
-                    class="select select-bordered w-full focus:select-primary"
-                    value={budget()}
-                    onChange={(e) => setBudget(e.currentTarget.value)}
-                    disabled={status() === "sending"}
-                  >
-                    <option value="">Select budget range...</option>
-                    <option value="under-5k">Under $5,000</option>
-                    <option value="5k-15k">$5,000 - $15,000</option>
-                    <option value="15k-50k">$15,000 - $50,000</option>
-                    <option value="50k-plus">$50,000+</option>
-                  </select>
+                    </legend>
+                    <select
+                      name="budget"
+                      class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                      value={budget()}
+                      onChange={(e) => setBudget(e.currentTarget.value)}
+                      disabled={status() === "sending"}
+                    >
+                      <option value="">Select budget range...</option>
+                      <option value="under-5k">Under $5,000</option>
+                      <option value="5k-15k">$5,000 - $15,000</option>
+                      <option value="15k-50k">$15,000 - $50,000</option>
+                      <option value="50k-plus">$50,000+</option>
+                    </select>
+                  </fieldset>
                 </div>
 
-                <div class="form-control">
-                  <label class="label" for="project-details">
-                    <span class="label-text font-semibold text-base text-base-content">
-                      Project Details *
-                    </span>
-                  </label>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    Project Details *
+                  </legend>
                   <textarea
                     id="project-details"
                     name="message"
-                    class="textarea textarea-bordered h-32 w-full resize-none focus:textarea-primary"
+                    class="textarea textarea-bordered h-36 w-full resize-none bg-base-100 focus:border-primary focus:outline-primary"
                     placeholder="Tell me about your project requirements, timeline, and any specific needs..."
                     required
                     value={message()}
                     onInput={(e) => setMessage(e.currentTarget.value)}
                     disabled={status() === "sending"}
                   />
-                </div>
+                </fieldset>
 
                 <Show when={status() === "error"}>
-                  <div class="alert alert-error">
+                  <div role="alert" class="alert alert-error">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      class="stroke-current shrink-0 h-6 w-6"
+                      class="stroke-current shrink-0 h-5 w-5"
                       fill="none"
                       viewBox="0 0 24 24"
                     >
@@ -240,18 +212,17 @@ ${message()}`,
                         d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                       />
                     </svg>
-                    <span>
-                      {errorMessage() ||
-                        "Error sending message. Please try again."}
+                    <span class="text-sm">
+                      {errorMessage() || "Error sending message. Please try again."}
                     </span>
                   </div>
                 </Show>
 
                 <Show when={status() === "success"}>
-                  <div class="alert alert-success">
+                  <div role="alert" class="alert alert-success">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      class="stroke-current shrink-0 h-6 w-6"
+                      class="stroke-current shrink-0 h-5 w-5"
                       fill="none"
                       viewBox="0 0 24 24"
                     >
@@ -262,44 +233,55 @@ ${message()}`,
                         d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                       />
                     </svg>
-                    <span>Message sent successfully!</span>
+                    <span class="text-sm">Message sent successfully! We'll get back to you soon.</span>
                   </div>
                 </Show>
 
-                <div class="form-control pt-4">
-                  <button
-                    type="submit"
-                    class="btn btn-primary btn-lg w-full"
-                    disabled={status() === "sending"}
-                  >
-                    {status() === "sending" ? (
-                      <>
-                        <span class="loading loading-spinner"></span>
-                        Sending Message...
-                      </>
-                    ) : (
-                      <>
-                        <svg
-                          class="w-5 h-5 mr-2"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                          ></path>
-                        </svg>
-                        Send Message
-                      </>
-                    )}
-                  </button>
-                </div>
+                <button
+                  type="submit"
+                  class="btn btn-primary btn-lg w-full shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
+                  disabled={status() === "sending"}
+                >
+                  {status() === "sending" ? (
+                    <>
+                      <span class="loading loading-spinner loading-sm"></span>
+                      Sending...
+                    </>
+                  ) : (
+                    <>
+                      <svg
+                        class="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                        ></path>
+                      </svg>
+                      Send Message
+                    </>
+                  )}
+                </button>
               </form>
             </div>
           </div>
+
+          <div class="mt-10 text-center">
+            <p class="text-base-content/60 mb-4">Prefer to reach out directly?</p>
+            <a
+              href="mailto:hello@atash.dev"
+              class="link link-primary font-medium inline-flex items-center gap-2 hover:gap-3 transition-all"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+              </svg>
+              hello@atash.dev
+            </a>
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index 482c26a..01f84fe 100644
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -2,80 +2,91 @@
 import { siteConfig } from "../../config/site";
 ---
 
-<section class="relative overflow-hidden py-12 lg:py-20">
-    <div class="max-w-7xl mx-auto px-6">
-        <div
-            class="hero min-h-[65vh] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-2xl shadow-xl relative"
-        >
-            <div
-                class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-secondary/20 rounded-2xl"
-            >
+<section class="relative overflow-hidden bg-neutral">
+    <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff06_1px,transparent_1px),linear-gradient(to_bottom,#ffffff06_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>
+    
+    <div class="relative max-w-7xl mx-auto px-6 py-20 lg:py-32">
+        <div class="text-center max-w-4xl mx-auto">
+            <div class="inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10">
+                <span class="relative flex h-2 w-2">
+                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
+                    <span class="relative inline-flex rounded-full h-2 w-2 bg-success"></span>
+                </span>
+                Accepting new clients
             </div>
-            <div
-                class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-black/5 rounded-2xl"
-            >
+            
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6">
+                Building
+                Digital Solutions
+                <br class="hidden sm:block" />
+                That Drive Growth
+            </h1>
+            
+            <p class="text-lg sm:text-xl text-white/70 max-w-2xl mx-auto mb-10 leading-relaxed">
+                {siteConfig.hero.description}. Delivering reliable, scalable
+                solutions tailored to your business needs.
+            </p>
+            
+            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                <a
+                    href="#contact"
+                    class="btn btn-accent btn-lg shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 hover:-translate-y-0.5 transition-all duration-300 group"
+                >
+                    <svg
+                        class="w-5 h-5 transition-transform group-hover:rotate-12"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                    </svg>
+                    Start Your Project
+                </a>
+                <a
+                    href="#services"
+                    class="btn btn-outline btn-lg border-white/30 text-white hover:bg-white hover:text-neutral hover:border-white transition-all duration-300"
+                >
+                    <svg
+                        class="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                    Explore Services
+                </a>
             </div>
-            <div
-                class="hero-content text-center text-primary-content py-16 lg:py-20 px-8"
-            >
-                <div class="max-w-4xl w-full space-y-8">
-                    <div>
-                        <h1
-                            class="text-4xl sm:text-6xl lg:text-7xl font-bold mb-4 leading-tight text-white"
-                        >
-                            {siteConfig.name}
-                        </h1>
-                        <div
-                            class="w-20 h-1 bg-accent mx-auto mb-6 rounded-full"
-                        >
-                        </div>
+            
+            <div class="mt-16 pt-10 border-t border-white/10">
+                <p class="text-white/50 text-sm mb-6 uppercase tracking-wider font-medium">Trusted expertise in</p>
+                <div class="flex flex-wrap justify-center items-center gap-8 lg:gap-12">
+                    <div class="flex items-center gap-2.5 text-white/80">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                        </svg>
+                        <span class="font-medium">Web Development</span>
                     </div>
-                    <p
-                        class="text-lg sm:text-xl lg:text-2xl mb-8 opacity-90 max-w-3xl mx-auto leading-relaxed text-white"
-                    >
-                        {siteConfig.hero.description} — Delivering reliable, scalable
-                        solutions tailored to your business needs.
-                    </p>
-                    <div
-                        class="flex flex-col sm:flex-row gap-4 justify-center items-center"
-                    >
-                        <a
-                            href="#contact"
-                            class="btn btn-accent btn-lg text-accent-content hover:bg-accent/90 shadow-lg border-0"
-                        >
-                            <svg
-                                class="w-5 h-5 mr-2"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                            </svg>
-                            Start Your Project
-                        </a>
-                        <a
-                            href="#services"
-                            class="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary"
-                        >
-                            <svg
-                                class="w-5 h-5 mr-2"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                                ></path>
-                            </svg>
-                            View Services
-                        </a>
+                    <div class="flex items-center gap-2.5 text-white/80">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                        </svg>
+                        <span class="font-medium">Mobile Apps</span>
+                    </div>
+                    <div class="flex items-center gap-2.5 text-white/80">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <span class="font-medium">DevOps</span>
                     </div>
                 </div>
             </div>
diff --git a/src/components/sections/ServicesSection.astro b/src/components/sections/ServicesSection.astro
index e9a4a21..54e19dc 100644
--- a/src/components/sections/ServicesSection.astro
+++ b/src/components/sections/ServicesSection.astro
@@ -1,127 +1,57 @@
 ---
 import { siteConfig } from "../../config/site";
+
+const serviceIcons = [
+    `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>`,
+    `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>`,
+    `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>`,
+    `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 109.75 9.75A9.75 9.75 0 0012 2.25z" /></svg>`,
+];
 ---
 
-<section id="services" class="py-16 lg:py-24">
+<section id="services" class="py-20 lg:py-28 bg-base-200/50">
     <div class="max-w-7xl mx-auto px-6">
-        <div class="text-center mb-12 lg:mb-16">
-            <div
-                class="inline-flex items-center gap-3 bg-primary/10 text-primary px-8 py-4 rounded-full text-2xl lg:text-3xl font-bold"
-            >
-                <svg
-                    class="w-8 h-8"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                </svg>
+        <div class="text-center mb-16">
+            <span class="badge badge-primary badge-lg font-semibold mb-4">What We Do</span>
+            <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
                 Our Services
-            </div>
-            <p
-                class="text-lg text-base-content/70 max-w-2xl mx-auto leading-relaxed mt-6"
-            >
-                Comprehensive software solutions designed to drive your business
-                forward
+            </h2>
+            <p class="text-lg text-base-content/60 max-w-2xl mx-auto">
+                Comprehensive software solutions designed to drive your business forward
             </p>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
             {
                 siteConfig.featureCards.cards.map((card, index) => (
-                    <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-200 hover:border-primary/30 rounded-xl">
-                        <div class="card-body p-6 lg:p-8">
-                            <div class="flex items-start gap-4">
+                    <div class="group card bg-base-100 border border-base-300/50 hover:border-primary/30 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                        <div class="card-body p-8">
+                            <div class="flex items-start gap-5">
                                 <div
                                     class={`
-                                    w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0
-                                    ${
-                                        card.variant === "primary"
-                                            ? "bg-primary text-primary-content"
-                                            : card.variant === "secondary"
-                                              ? "bg-secondary text-secondary-content"
-                                              : "bg-accent text-accent-content"
-                                    }
-                                `}
+                                        flex-shrink-0 w-14 h-14 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110
+                                        ${card.variant === "primary" ? "bg-primary/10 text-primary" : ""}
+                                        ${card.variant === "secondary" ? "bg-secondary/10 text-secondary" : ""}
+                                        ${card.variant === "accent" ? "bg-accent/10 text-accent" : ""}
+                                    `}
                                 >
-                                    {index === 0 && (
-                                        <svg
-                                            class="w-7 h-7"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                                            />
-                                        </svg>
-                                    )}
-                                    {index === 1 && (
-                                        <svg
-                                            class="w-7 h-7"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
-                                            />
-                                        </svg>
-                                    )}
-                                    {index === 2 && (
-                                        <svg
-                                            class="w-7 h-7"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                                            />
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                                            />
-                                        </svg>
-                                    )}
-                                    {index === 3 && (
-                                        <svg
-                                            class="w-7 h-7"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 109.75 9.75A9.75 9.75 0 0012 2.25z"
-                                            />
-                                        </svg>
-                                    )}
+                                    <Fragment set:html={serviceIcons[index]} />
                                 </div>
                                 <div class="flex-1 space-y-3">
-                                    <h3 class="text-xl font-bold text-base-content">
+                                    <h3 class="text-xl font-bold text-base-content group-hover:text-primary transition-colors">
                                         {card.title}
                                     </h3>
-                                    <p class="text-base-content/70 leading-relaxed">
+                                    <p class="text-base-content/60 leading-relaxed">
                                         {card.content}
                                     </p>
+                                    <div class="pt-2">
+                                        <a href="#contact" class="inline-flex items-center gap-2 text-primary font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                            Learn more
+                                            <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                                            </svg>
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/config/site.ts b/src/config/site.ts
index 94731f0..09c2e79 100644
--- a/src/config/site.ts
+++ b/src/config/site.ts
@@ -16,20 +16,24 @@ export const siteConfig = {
     nav: [
       {
         text: "Home",
-        href: "/",
+        href: "#",
       },
       {
         text: "Services",
-        href: "/services",
+        href: "#services",
+      },
+      {
+        text: "About",
+        href: "#about",
       },
       {
         text: "Contact",
-        href: "/contact",
+        href: "#contact",
       },
     ],
     cta: {
       text: "Get Started",
-      href: "/contact",
+      href: "#contact",
     },
   },
 
@@ -59,19 +63,19 @@ export const siteConfig = {
       {
         title: "IT Support Processes",
         content:
-          "I provide expert technical support expertise, backed by over a decade of client support experience.",
+          "We provide expert technical support expertise, backed by over a decade of client support experience.",
         variant: "primary",
       },
     ] as Card[],
   },
 
   contact: {
-    title: "Contact Me",
-    description: "Ready to get started? Reach out to me for a consultation.",
+    title: "Contact Us",
+    description: "Ready to get started? Reach out to us for a consultation.",
     cta: {
       text: "Get in Touch",
-      href: "/contact",
-      ariaLabel: "Contact me for consultation",
+      href: "#contact",
+      ariaLabel: "Contact us for consultation",
     },
   },
 } as const;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 74ba500..675a9e6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { siteConfig } from "../config/site";
 import "../styles/global.css";
@@ -19,7 +20,7 @@ const metaTitle =
 <html lang="en" data-theme="light">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link
             rel="icon"
             href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>"
@@ -27,8 +28,12 @@ const metaTitle =
         <meta name="generator" content={Astro.generator} />
         <meta name="description" content={description} />
         <title>{metaTitle}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     </head>
-    <body class="min-h-screen flex flex-col bg-base-100">
+    <body class="min-h-screen flex flex-col bg-base-100 font-sans antialiased">
+        <Header />
         <main class="flex-grow">
             <slot />
         </main>
diff --git a/src/styles/global.css b/src/styles/global.css
index e64b5b6..c78a9ef 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -26,9 +26,9 @@
     --color-warning-content: oklch(20% 0 0);
     --color-error: oklch(60% 0.25 30);
     --color-error-content: oklch(98% 0 0);
-    --radius-selector: 1rem;
-    --radius-field: 1rem;
-    --radius-box: 1rem;
+    --radius-selector: 0.5rem;
+    --radius-field: 0.5rem;
+    --radius-box: 0.75rem;
     --size-selector: 0.25rem;
     --size-field: 0.25rem;
     --border: 1px;
@@ -36,7 +36,10 @@
     --noise: 0;
 }
 
-/* Only essential styles - all visual styling handled by Tailwind */
 html {
     scroll-behavior: smooth;
 }
+
+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}