diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
index fd98d25..98c73f0 100644
--- a/app/(protected)/layout.tsx
+++ b/app/(protected)/layout.tsx
@@ -29,7 +29,7 @@ export default async function ProtectedLayout({
         userName={profile?.name ?? user.email ?? ''}
         userEmail={profile?.email ?? user.email ?? ''}
       />
-      <div className="md:ml-60 pb-16 md:pb-0">
+      <div className="sm:ml-60 pb-16 sm:pb-0">
         {children}
       </div>
     </div>
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 4ade245..c447757 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -151,7 +151,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
   return (
     <>
       {/* Desktop sidebar */}
-      <aside className="hidden md:flex fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 flex-col z-40">
+      <aside className="hidden sm:flex fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 flex-col z-40">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-4 border-b border-gray-100">
           <span className="text-base font-bold text-gray-900 tracking-tight">IMS</span>
@@ -200,7 +200,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
       </aside>
 
       {/* Mobile bottom tab bar */}
-      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-40 safe-area-pb">
+      <nav className="sm:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-40 safe-area-pb">
         {mobileItems.map(item => {
           const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account']
           const isActive = exactRoots.includes(item.href)