diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8a20ccd..57cb6c2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -48,14 +48,14 @@ export default async function RootPage() {
   return (
     <div className="min-h-screen bg-background">
       {/* Navbar */}
-      <header className="sticky top-0 z-20 border-b border-border/60 bg-background/80 px-6 py-4 backdrop-blur-md sm:px-10">
+      <header className="sticky top-0 z-20 border-b border-border/60 bg-background/80 px-4 py-4 backdrop-blur-md sm:px-6 lg:px-10">
         <div className="mx-auto flex max-w-6xl items-center justify-between">
           <div className="flex items-center gap-2">
             <PawPrint className="h-6 w-6 text-orange-500" fill="currentColor" strokeWidth={0} aria-hidden="true" />
             <span className="text-lg font-bold text-foreground">PawFeed</span>
           </div>
 
-          <nav className="hidden items-center gap-6 text-sm font-medium text-muted-foreground md:flex">
+          <nav className="hidden items-center gap-6 text-sm font-medium text-muted-foreground lg:flex">
             {navLinks.map((link) =>
               link.href ? (
                 <Link key={link.label} href={link.href} className="transition-colors hover:text-foreground">
@@ -72,7 +72,7 @@ export default async function RootPage() {
             )}
           </nav>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1 sm:gap-3">
             <ThemeToggleButton />
             <LanguageSwitcher />
             <Link
@@ -83,7 +83,7 @@ export default async function RootPage() {
             </Link>
             <Link
               href="/sign-up"
-              className="inline-flex items-center justify-center rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-600"
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-full bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 sm:px-4"
             >
               {t("navSignUp")}
             </Link>
diff --git a/src/components/i18n/LanguageSwitcher.tsx b/src/components/i18n/LanguageSwitcher.tsx
index 1e20159..40d9bad 100644
--- a/src/components/i18n/LanguageSwitcher.tsx
+++ b/src/components/i18n/LanguageSwitcher.tsx
@@ -25,9 +25,9 @@ export function LanguageSwitcher() {
   }
 
   return (
-    <div className="flex items-center gap-1 px-2 py-1.5 rounded-md text-muted-foreground">
-      <Globe className="h-3.5 w-3.5 shrink-0" />
-      <span className="text-xs">{t("switch")}:</span>
+    <div className="flex items-center gap-1 px-1 py-1.5 sm:px-2 rounded-md text-muted-foreground">
+      <Globe className="hidden sm:block h-3.5 w-3.5 shrink-0" />
+      <span className="hidden sm:inline text-xs">{t("switch")}:</span>
       {LOCALES.map((l) => (
         <button
           key={l.code}