diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 711dd21..fc4f878 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -17,14 +17,14 @@ export function AppHeader() {
       .catch(() => setCategories([]));
   }, []);
   return (
-    <header className="flex items-center justify-between px-4 py-3 border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
+    <header className="flex items-center justify-between px-4 py-3  bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
       <div className="flex items-center gap-3">
         <button
           aria-label="메뉴 열기"
           aria-expanded={mobileOpen}
           aria-controls="mobile-menu"
           onClick={() => setMobileOpen((v) => !v)}
-          className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-200 md:hidden"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-200 xl:hidden"
         >
           <span className="flex flex-col items-center justify-center gap-1">
             <span className="block h-0.5 w-4 bg-neutral-800" />
@@ -36,7 +36,8 @@ export function AppHeader() {
           <Image src="/logo.png" alt="logo" width={120} height={28} priority />
         </Link>
       </div>
-      <nav className="hidden items-center gap-4 md:flex">
+      <nav className="flex items-center gap-4">
+        <div className="hidden items-center gap-4 xl:flex">
         {categories.map((cat) => {
           const isOpen = openSlug === cat.slug;
           return (
@@ -79,7 +80,10 @@ export function AppHeader() {
             </div>
           );
         })}
-        <SearchBar />
+        </div>
+        <div className="hidden md:block">
+          <SearchBar/>
+        </div>
       </nav>
       {mobileOpen && (
         <div id="mobile-menu" role="dialog" aria-modal="true" className="fixed inset-0 z-50 bg-black/40" onClick={() => setMobileOpen(false)}>
@@ -88,7 +92,7 @@ export function AppHeader() {
               <strong>메뉴</strong>
               <button aria-label="닫기" className="text-sm text-neutral-600 hover:text-neutral-900" onClick={() => setMobileOpen(false)}>닫기</button>
             </div>
-            <div className="flex flex-col gap-3">
+            <div className="hiddenflex-col gap-3">
               <SearchBar />
               {categories.map((cat) => (
                 <div key={cat.id}>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 43bfdc9..340f69b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
           <ToastProvider>
             <div className="min-h-screen flex flex-col">
               <div className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur">
-                <div className="max-w-7xl mx-auto px-4">
+                <div className="mx-auto px-4">
                   <AppHeader />
                 </div>
               </div>