diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index fc4f878..d32d9c8 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  bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
-      <div className="flex items-center gap-3">
+    <header className="relative flex items-center justify-between px-4 py-3 border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
+      <div className="flex items-center gap-3 z-[100]">
         <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 xl:hidden"
+          className="inline-flex h-8 w-8 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" />
@@ -33,7 +33,7 @@ export function AppHeader() {
           </span>
         </button>
         <Link href="/" aria-label="홈" className="shrink-0">
-          <Image src="/logo.png" alt="logo" width={120} height={28} priority />
+          <Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 md:w-28 xl:w-[120px] h-auto" />
         </Link>
       </div>
       <nav className="flex items-center gap-4">
@@ -86,13 +86,11 @@ export function AppHeader() {
         </div>
       </nav>
       {mobileOpen && (
-        <div id="mobile-menu" role="dialog" aria-modal="true" className="fixed inset-0 z-50 bg-black/40" onClick={() => setMobileOpen(false)}>
-          <div className="absolute left-0 top-0 h-full w-4/5 max-w-sm bg-white p-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
-            <div className="mb-3 flex items-center justify-between">
-              <strong>메뉴</strong>
-              <button aria-label="닫기" className="text-sm text-neutral-600 hover:text-neutral-900" onClick={() => setMobileOpen(false)}>닫기</button>
+        <div  className="fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)}>
+          <div className="absolute left-0 xl:top-0 h-[100vh] w-4/5 max-w-sm bg-white p-4 shadow-xl overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+            <div className="mb-3 h-10 flex items-center justify-between">
             </div>
-            <div className="hiddenflex-col gap-3">
+            <div className="flex flex-col gap-3">
               <SearchBar />
               {categories.map((cat) => (
                 <div key={cat.id}>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 340f69b..bc8bdc0 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="mx-auto px-4">
+                <div className="mx-auto">
                   <AppHeader />
                 </div>
               </div>