diff --git a/frontend/src/components/features/about/AboutRosetta.tsx b/frontend/src/components/features/about/AboutRosetta.tsx
index 923ea1a..61b7f99 100644
--- a/frontend/src/components/features/about/AboutRosetta.tsx
+++ b/frontend/src/components/features/about/AboutRosetta.tsx
@@ -11,10 +11,8 @@ export function AboutRosetta() {
         viewport={{ once: true }}
         transition={{ duration: 0.5 }}
         className="about-section-title"
-      >
-        Why Rosetta Exists
-      </motion.h2>
-
+      />
+      
       {/* Bento Grid Layout */}
       <div className="bento-grid">
         {/* Row 1: Three equal cards - Problem, Result, Built for AI */}
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 4d96aaa..83c3421 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,5 +1,7 @@
-import { Link, useLocation } from 'react-router-dom';
-import { Github, Moon, Sun } from 'lucide-react';
+import { useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Github, Moon, Sun, Menu, X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 import logo from '../../assets/logo.svg';
 
 interface HeaderProps {
@@ -9,8 +11,15 @@ interface HeaderProps {
 
 export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
   const location = useLocation();
+  const navigate = useNavigate();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const isActive = (path: string) => location.pathname === path;
 
+  const handleNavClick = (path: string) => {
+    setIsMenuOpen(false);
+    navigate(path);
+  };
+
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-white/80 dark:bg-gray-950/80 border-b border-gray-200 dark:border-gray-800">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -22,7 +31,8 @@ export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
             </span>
           </Link>
 
-          <div className="flex items-center gap-6">
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
             <Link
               to="/"
               className={`relative px-4 py-2 transition-all ${
@@ -71,8 +81,96 @@ export function Header({ isDarkMode, onToggleDarkMode }: HeaderProps) {
               <Github className="w-5 h-5 text-gray-600 dark:text-gray-400" />
             </button>
           </div>
+
+          {/* Mobile Actions */}
+          <div className="md:hidden flex items-center gap-2">
+            <button
+              onClick={onToggleDarkMode}
+              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+            >
+              {isDarkMode ? (
+                <Sun className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+              ) : (
+                <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+              )}
+            </button>
+
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              aria-label="Toggle menu"
+            >
+              {isMenuOpen ? (
+                <X className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+              ) : (
+                <Menu className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+              )}
+            </button>
+          </div>
         </div>
       </div>
+
+      {/* Mobile Menu */}
+      <AnimatePresence>
+        {isMenuOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 top-16 bg-black/50 backdrop-blur-sm z-40 md:hidden"
+              onClick={() => setIsMenuOpen(false)}
+            />
+
+            {/* Menu */}
+            <motion.div
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+              className="md:hidden absolute top-16 left-0 right-0 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 shadow-lg z-40"
+            >
+              <div className="px-4 py-2">
+                <button
+                  onClick={() => handleNavClick('/')}
+                  className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
+                    isActive('/')
+                      ? 'bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400'
+                      : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                  }`}
+                >
+                  Home
+                </button>
+
+                <button
+                  onClick={() => handleNavClick('/about')}
+                  className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
+                    isActive('/about')
+                      ? 'bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400'
+                      : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                  }`}
+                >
+                  About
+                </button>
+
+                <a
+                  href="https://github.com/ewalid/rosetta"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 w-full px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  <Github className="w-5 h-5" />
+                  GitHub
+                </a>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
     </nav>
   );
 }
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 6505be3..89434b3 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -17,7 +17,7 @@ export function About() {
 
       <main className="flex-1 pt-16">
         {/* Hero Section */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 py-20">
+        <section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 pt-20 pb-10">
           {/* Animated background grid */}
           <div className="absolute inset-0 opacity-20">
             <div
@@ -53,8 +53,22 @@ export function About() {
         </section>
 
         {/* Meet the Builder Section */}
-        <section className="py-20 bg-white dark:bg-gray-950" id="builder">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 pt-10 pb-20" id="builder">
+          {/* Animated background grid */}
+          <div className="absolute inset-0 opacity-20">
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: `
+                  linear-gradient(to right, rgb(16 185 129 / 0.1) 1px, transparent 1px),
+                  linear-gradient(to bottom, rgb(16 185 129 / 0.1) 1px, transparent 1px)
+                `,
+                backgroundSize: '40px 40px'
+              }}
+            />
+          </div>
+
+          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}