diff --git a/docs/responsive-testing.md b/docs/responsive-testing.md
new file mode 100644
index 0000000..8a24459
--- /dev/null
+++ b/docs/responsive-testing.md
@@ -0,0 +1,18 @@
+# Responsive testing notes
+
+Check the admin shell at these widths before merging layout changes:
+
+| Width | What to verify |
+| --- | --- |
+| 390px | Sidebar collapses, header text truncates, primary actions wrap. |
+| 768px | Forms keep readable gaps and do not create horizontal scroll. |
+| 1024px | Sidebar labels are visible and dashboard content uses available width. |
+| 1440px | Product editor cards and side panels remain balanced. |
+
+Core flows:
+
+- catalog product form;
+- product editor master attributes;
+- completeness side panel;
+- header search and profile actions;
+- long missing-attribute names.
diff --git a/frontend/apps/admin/src/app/(dashboard)/catalog/editor/page.tsx b/frontend/apps/admin/src/app/(dashboard)/catalog/editor/page.tsx
index c4a3849..ebf9b37 100644
--- a/frontend/apps/admin/src/app/(dashboard)/catalog/editor/page.tsx
+++ b/frontend/apps/admin/src/app/(dashboard)/catalog/editor/page.tsx
@@ -18,18 +18,18 @@ export default function ProductEditorPage() {
 
     return (
         <div className="space-y-6">
-            <div className="flex justify-between items-center bg-card p-4 rounded-lg border">
-                <div>
+            <div className="flex flex-col gap-4 rounded-lg border bg-card p-4 sm:flex-row sm:items-center sm:justify-between">
+                <div className="min-w-0">
                     <h2 className="text-2xl font-bold tracking-tight">Product Editor</h2>
                     <p className="text-sm text-muted-foreground">Editing: T-Shirt Basic (TSHIRT-001)</p>
                 </div>
-                <div className="flex space-x-2">
-                    <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded-md text-sm">Save as Draft</button>
-                    <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">Publish</button>
+                <div className="flex flex-wrap gap-2">
+                    <button className="min-w-32 rounded-md bg-secondary px-4 py-2 text-sm text-secondary-foreground">Save as Draft</button>
+                    <button className="min-w-24 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">Publish</button>
                 </div>
             </div>
 
-            <div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
+            <div className="grid grid-cols-1 gap-6 xl:grid-cols-4 xl:gap-8">
                 <div className="xl:col-span-3">
                     <div className="bg-card p-6 rounded-lg border shadow-sm">
                         <h3 className="text-lg font-medium mb-4">Master Attributes</h3>
diff --git a/frontend/apps/admin/src/app/(dashboard)/layout.tsx b/frontend/apps/admin/src/app/(dashboard)/layout.tsx
index b1dcbd9..7e2db54 100644
--- a/frontend/apps/admin/src/app/(dashboard)/layout.tsx
+++ b/frontend/apps/admin/src/app/(dashboard)/layout.tsx
@@ -7,11 +7,11 @@ export default function DashboardLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <div className="flex h-screen w-full">
+        <div className="flex h-screen w-full overflow-hidden">
             <Sidebar />
-            <div className="flex flex-1 flex-col overflow-hidden">
+            <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
                 <Header />
-                <main className="flex-1 overflow-y-auto bg-muted/20 p-6">
+                <main className="flex-1 overflow-y-auto bg-muted/20 p-4 sm:p-6">
                     {children}
                 </main>
             </div>
diff --git a/frontend/apps/admin/src/components/catalog/DynamicAttributeForm.tsx b/frontend/apps/admin/src/components/catalog/DynamicAttributeForm.tsx
index 28bcafb..260264a 100644
--- a/frontend/apps/admin/src/components/catalog/DynamicAttributeForm.tsx
+++ b/frontend/apps/admin/src/components/catalog/DynamicAttributeForm.tsx
@@ -32,15 +32,15 @@ export function DynamicAttributeForm({ attributes, initialValues, onSubmit }: Dy
 
     return (
         <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+                <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
                     {attributes.map((attr) => (
                         <FormField
                             key={attr.code}
                             control={form.control}
                             name={attr.code}
                             render={({ field }) => (
-                                <FormItem className={attr.type === "boolean" ? "flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4" : ""}>
+                                <FormItem className={attr.type === "boolean" ? "flex flex-row items-start gap-3 rounded-md border p-4" : ""}>
                                     {attr.type !== "boolean" && <FormLabel>{attr.label}</FormLabel>}
                                     <FormControl>
                                         {attr.type === "text" ? (
@@ -67,7 +67,7 @@ export function DynamicAttributeForm({ attributes, initialValues, onSubmit }: Dy
                         />
                     ))}
                 </div>
-                <Button type="submit">Save Attributes</Button>
+                <Button type="submit" className="w-full sm:w-fit">Save Attributes</Button>
             </form>
         </Form>
     );
diff --git a/frontend/apps/admin/src/components/catalog/ProductCompletenessSidebar.tsx b/frontend/apps/admin/src/components/catalog/ProductCompletenessSidebar.tsx
index 7022eb2..aaaf4bd 100644
--- a/frontend/apps/admin/src/components/catalog/ProductCompletenessSidebar.tsx
+++ b/frontend/apps/admin/src/components/catalog/ProductCompletenessSidebar.tsx
@@ -14,17 +14,17 @@ export function ProductCompletenessSidebar({ score, missingAttributes, channel,
     const scoreColor = score >= 100 ? "bg-green-500" : score >= 50 ? "bg-yellow-500" : "bg-red-500";
 
     return (
-        <Card>
+        <Card className="min-w-0">
             <CardHeader>
                 <CardTitle className="text-sm font-semibold">Completeness Score</CardTitle>
-                <div className="text-xs text-muted-foreground">{channel} - {locale}</div>
+                <div className="truncate text-xs text-muted-foreground">{channel} - {locale}</div>
             </CardHeader>
-            <CardContent className="space-y-4">
+            <CardContent className="flex flex-col gap-4">
                 <div>
                     <div className="flex justify-between mb-1">
                         <span className="text-2xl font-bold">{score}%</span>
                     </div>
-                    <div className="w-full bg-secondary rounded-full h-3">
+                    <div className="h-3 w-full overflow-hidden rounded-full bg-secondary">
                         <div className={`h-3 rounded-full transition-all ${scoreColor}`} style={{ width: `${score}%` }}></div>
                     </div>
                 </div>
@@ -32,9 +32,9 @@ export function ProductCompletenessSidebar({ score, missingAttributes, channel,
                 {missingAttributes.length > 0 && (
                     <div className="pt-4 border-t">
                         <h4 className="text-xs font-semibold mb-2 text-destructive">Missing Required Data:</h4>
-                        <ul className="text-xs space-y-1 text-muted-foreground list-disc list-inside">
+                        <ul className="list-inside list-disc text-xs text-muted-foreground">
                             {missingAttributes.map(attr => (
-                                <li key={attr}>{attr}</li>
+                                <li key={attr} className="break-words">{attr}</li>
                             ))}
                         </ul>
                     </div>
diff --git a/frontend/apps/admin/src/components/layout/Header.tsx b/frontend/apps/admin/src/components/layout/Header.tsx
index e0dd933..a4fef04 100644
--- a/frontend/apps/admin/src/components/layout/Header.tsx
+++ b/frontend/apps/admin/src/components/layout/Header.tsx
@@ -9,12 +9,12 @@ export function Header() {
     const { t } = useTranslation();
 
     return (
-        <header className="flex h-14 items-center justify-between border-b bg-card px-6">
-            <div className="flex flex-1 items-center">
-                <span className="text-sm text-muted-foreground">OmniPIM MAX / {t("dashboard")}</span>
+        <header className="flex min-h-14 items-center justify-between gap-3 border-b bg-card px-3 py-2 sm:px-6">
+            <div className="flex min-w-0 flex-1 items-center">
+                <span className="truncate text-sm text-muted-foreground">OmniPIM MAX / {t("dashboard")}</span>
             </div>
-            <div className="flex items-center gap-4">
-                <div className="relative hidden md:block w-64">
+            <div className="flex min-w-0 items-center gap-2 sm:gap-4">
+                <div className="relative hidden w-48 md:block lg:w-64">
                     <input
                         type="text"
                         placeholder={t("search")}
diff --git a/frontend/apps/admin/src/components/layout/Sidebar.tsx b/frontend/apps/admin/src/components/layout/Sidebar.tsx
index 12a8290..7bb2e28 100644
--- a/frontend/apps/admin/src/components/layout/Sidebar.tsx
+++ b/frontend/apps/admin/src/components/layout/Sidebar.tsx
@@ -32,9 +32,12 @@ export function Sidebar() {
     ];
 
     return (
-        <div className="flex h-full w-64 flex-col border-r bg-card px-3 py-4">
-            <div className="mb-8 px-4">
-                <h1 className="text-2xl font-bold Tracking-tight text-primary">OmniPIM MAX</h1>
+        <div className="flex h-full w-16 shrink-0 flex-col border-r bg-card px-2 py-4 lg:w-64 lg:px-3">
+            <div className="mb-8 px-2 lg:px-4">
+                <h1 className="text-center text-lg font-bold tracking-tight text-primary lg:text-left lg:text-2xl">
+                    <span className="lg:hidden">OP</span>
+                    <span className="hidden lg:inline">OmniPIM MAX</span>
+                </h1>
             </div>
             <nav className="flex-1 space-y-1">
                 {routes.map((route) => {
@@ -44,19 +47,19 @@ export function Sidebar() {
                             key={route.path}
                             href={route.path}
                             className={cn(
-                                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all",
+                                "flex items-center justify-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all lg:justify-start",
                                 isActive
                                     ? "bg-primary text-primary-foreground"
                                     : "text-muted-foreground hover:bg-muted hover:text-foreground"
                             )}
                         >
                             <route.icon className="h-4 w-4" />
-                            {route.name}
+                            <span className="hidden truncate lg:inline">{route.name}</span>
                         </Link>
                     );
                 })}
             </nav>
-            <div className="mt-auto px-4 py-2 text-xs text-muted-foreground">
+            <div className="mt-auto hidden px-4 py-2 text-xs text-muted-foreground lg:block">
                 Version 1.0.0-enterprise
             </div>
         </div>