diff --git a/src/App.tsx b/src/App.tsx
index e2d6172..c7045d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,8 +21,8 @@ export default function App() {
         <Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
         <Route path="/pricing" element={<PricingPage />} />
       </Routes>
-      <div id="hero" data-section="hero">
-        <ImageOrVideo src="https://source.unsplash.com/random/1600x900/?cityscape" alt="Cityscape" className="w-full h-auto object-cover" />
+      <div id="hero" data-section="hero" className="w-full h-[60vh] overflow-hidden">
+        <ImageOrVideo imageSrc="https://source.unsplash.com/random/1600x900/?cityscape" />
       </div>
       <div id="pricing" data-section="pricing">
         <PricingSimpleCards
diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index de8cb8c..4bd40b4 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -50,7 +50,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 50);
+    const handleScroll = () => setIsScrolled(window.scrollY > 20);
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
@@ -59,37 +59,39 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg pl-6 pr-2 py-2 backdrop-blur-xl border transition-all duration-300 w-[min(92vw,56rem)]",
+          isScrolled ? "bg-background/80 border-foreground/10" : "bg-background/40 border-foreground/5"
         )}
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
-          <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
+        <div className="flex items-center gap-6">
+          <Link to="/" className="text-lg font-bold text-foreground flex-shrink-0">
+            {logo}
+          </Link>
 
-          <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
+          <div className="hidden md:flex items-center gap-6 flex-1 justify-center">
             {navItems.map((item) => (
               <NavLink
                 key={item.name}
                 href={item.href}
-                className="text-base text-foreground hover:opacity-70 transition-opacity"
+                className="text-sm font-medium text-foreground hover:text-foreground/70 transition-colors"
               >
                 {item.name}
               </NavLink>
             ))}
           </div>
 
-          <div className="hidden md:block">
-            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
+          <div className="hidden md:block flex-shrink-0">
+            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="rounded-full px-6 h-10" />
           </div>
 
           <button
-            className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+            className="flex md:hidden items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer ml-auto"
             onClick={() => setMenuOpen(!menuOpen)}
             aria-label="Toggle menu"
             aria-expanded={menuOpen}
           >
             <Plus
-              className={cls("w-1/2 h-1/2 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
+              className={cls("w-5 h-5 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
               strokeWidth={1.5}
             />
           </button>
@@ -103,16 +105,16 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             animate={{ y: 0 }}
             exit={{ y: "-135%" }}
             transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
+            className="md:hidden fixed z-50 top-4 left-4 right-4 p-6 card rounded-3xl shadow-xl border border-foreground/10"
           >
             <div className="flex items-center justify-between mb-6">
-              <p className="text-xl text-foreground">Menu</p>
+              <p className="text-xl font-bold text-foreground">Menu</p>
               <button
-                className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+                className="flex items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer"
                 onClick={() => setMenuOpen(false)}
                 aria-label="Close menu"
               >
-                <Plus className="w-1/2 h-1/2 text-background rotate-45" strokeWidth={1.5} />
+                <Plus className="w-5 h-5 text-background rotate-45" strokeWidth={1.5} />
               </button>
             </div>
 
@@ -128,14 +130,14 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
                     <ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
                   </NavLink>
                   {index < navItems.length - 1 && (
-                    <div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
+                    <div className="h-px bg-foreground/10" />
                   )}
                 </div>
               ))}
             </div>
 
             <div className="mt-6">
-              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full" />
+              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full rounded-full h-12" />
             </div>
           </motion.div>
         )}
@@ -144,4 +146,4 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   );
 };
 
-export default NavbarCentered;
+export default NavbarCentered;
\ No newline at end of file