diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx
index cffb7e8d..65e78f64 100644
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -218,14 +218,14 @@ export function AppContent() {
       </ErrorBoundary>
 
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col gap-0 p-0 overflow-hidden">
-             <DialogHeader className="p-6 pb-4 border-b">
-                <DialogTitle>{editingRecord ? 'Edit' : 'Create'} {currentObjectDef?.label}</DialogTitle>
-                <DialogDescription>
+          <DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col gap-0 p-0 overflow-hidden w-[calc(100vw-2rem)] sm:w-full">
+             <DialogHeader className="p-4 sm:p-6 pb-3 sm:pb-4 border-b">
+                <DialogTitle className="text-lg sm:text-xl">{editingRecord ? 'Edit' : 'Create'} {currentObjectDef?.label}</DialogTitle>
+                <DialogDescription className="text-sm">
                     {editingRecord ? `Update details for ${currentObjectDef?.label}` : `Add a new ${currentObjectDef?.label} to your database.`}
                 </DialogDescription>
              </DialogHeader>
-             <div className="flex-1 overflow-y-auto p-6">
+             <div className="flex-1 overflow-y-auto p-4 sm:p-6">
                 {currentObjectDef && (
                     <ObjectForm
                         key={editingRecord?.id || 'new'}
diff --git a/apps/console/src/components/AppHeader.tsx b/apps/console/src/components/AppHeader.tsx
index e8caaaaf..59d37506 100644
--- a/apps/console/src/components/AppHeader.tsx
+++ b/apps/console/src/components/AppHeader.tsx
@@ -76,23 +76,23 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
     }
 
     return (
-        <div className="flex items-center justify-between w-full h-full px-2 md:px-4 gap-2">
-             <div className="flex items-center gap-2">
+        <div className="flex items-center justify-between w-full h-full px-2 sm:px-3 md:px-4 gap-1.5 sm:gap-2">
+             <div className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
                 {/* Mobile sidebar trigger */}
-                <SidebarTrigger className="md:hidden" />
-                <Separator orientation="vertical" className="h-4 md:hidden" />
+                <SidebarTrigger className="md:hidden shrink-0" />
+                <Separator orientation="vertical" className="h-4 md:hidden shrink-0" />
                 
-                <Breadcrumb className="hidden sm:flex">
+                <Breadcrumb className="hidden sm:flex min-w-0">
                   <BreadcrumbList>
                     {breadcrumbItems.map((item, index) => (
                       <Fragment key={index}>
                         {index > 0 && <BreadcrumbSeparator />}
                         <BreadcrumbItem>
                           {index === breadcrumbItems.length - 1 || !item.href ? (
-                            <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                            <BreadcrumbPage className="truncate max-w-[200px]">{item.label}</BreadcrumbPage>
                           ) : (
                             <BreadcrumbLink asChild>
-                              <Link to={item.href}>{item.label}</Link>
+                              <Link to={item.href} className="truncate max-w-[150px]">{item.label}</Link>
                             </BreadcrumbLink>
                           )}
                         </BreadcrumbItem>
@@ -102,12 +102,12 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
                 </Breadcrumb>
                 
                 {/* Mobile: Just show current page */}
-                <span className="text-sm font-medium sm:hidden truncate max-w-37.5">
+                <span className="text-sm font-medium sm:hidden truncate min-w-0">
                   {breadcrumbItems[breadcrumbItems.length - 1]?.label || appName}
                 </span>
              </div>
              
-             <div className="flex items-center gap-1 md:gap-2">
+             <div className="flex items-center gap-0.5 sm:gap-1 md:gap-2 shrink-0">
                 {/* Connection Status */}
                 {connectionState && <ConnectionStatus state={connectionState} />}
                 
@@ -127,24 +127,26 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="lg:hidden h-8 w-8"
+                  className="lg:hidden h-8 w-8 shrink-0"
                   onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
                 >
                   <Search className="h-4 w-4" />
                 </Button>
                 
                 {/* Notifications */}
-                <Button variant="ghost" size="icon" className="h-8 w-8 hidden sm:flex">
+                <Button variant="ghost" size="icon" className="h-8 w-8 hidden sm:flex shrink-0">
                   <Bell className="h-4 w-4" />
                 </Button>
                 
                 {/* Help */}
-                <Button variant="ghost" size="icon" className="h-8 w-8 hidden md:flex">
+                <Button variant="ghost" size="icon" className="h-8 w-8 hidden md:flex shrink-0">
                   <HelpCircle className="h-4 w-4" />
                 </Button>
                 
                 {/* Theme toggle */}
-                <ModeToggle />
+                <div className="shrink-0">
+                  <ModeToggle />
+                </div>
              </div>
         </div>
     );
diff --git a/apps/console/src/components/DashboardView.tsx b/apps/console/src/components/DashboardView.tsx
index cb128f23..e0a09ad9 100644
--- a/apps/console/src/components/DashboardView.tsx
+++ b/apps/console/src/components/DashboardView.tsx
@@ -30,18 +30,20 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-background">
-      <div className="flex justify-between items-center p-6 border-b shrink-0">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">{dashboard.label || dashboard.name}</h1>
+      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0">
+        <div className="min-w-0 flex-1">
+          <h1 className="text-xl sm:text-2xl font-bold tracking-tight truncate">{dashboard.label || dashboard.name}</h1>
           {dashboard.description && (
-            <p className="text-muted-foreground mt-1">{dashboard.description}</p>
+            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{dashboard.description}</p>
           )}
         </div>
-        <MetadataToggle open={showDebug} onToggle={toggleDebug} />
+        <div className="shrink-0">
+          <MetadataToggle open={showDebug} onToggle={toggleDebug} />
+        </div>
       </div>
 
       <div className="flex-1 overflow-hidden flex flex-row relative">
-         <div className="flex-1 overflow-auto p-6">
+         <div className="flex-1 overflow-auto p-4 sm:p-6">
             <DashboardRenderer schema={dashboard} dataSource={dataSource} />
          </div>
 
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
index faa9673b..3db8b83a 100644
--- a/apps/console/src/components/ObjectView.tsx
+++ b/apps/console/src/components/ObjectView.tsx
@@ -208,19 +208,19 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     return (
         <div className="h-full flex flex-col bg-background">
              {/* 1. Main Header */}
-             <div className="flex justify-between items-center py-3 px-4 border-b shrink-0 bg-background z-10">
-                 <div className="flex items-center gap-3">
-                    <div className="bg-primary/10 p-2 rounded-md shrink-0">
+             <div className="flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10">
+                 <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                    <div className="bg-primary/10 p-1.5 sm:p-2 rounded-md shrink-0">
                         <TableIcon className="h-4 w-4 text-primary" />
                     </div>
-                    <div>
-                        <h1 className="text-lg font-semibold tracking-tight text-foreground">{objectDef.label}</h1>
+                    <div className="min-w-0">
+                        <h1 className="text-base sm:text-lg font-semibold tracking-tight text-foreground truncate">{objectDef.label}</h1>
                     </div>
                  </div>
                  
-                 <div className="flex items-center gap-2">
+                 <div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
                     <MetadataToggle open={showDebug} onToggle={toggleDebug} className="hidden sm:flex" />
-                    <Button size="sm" onClick={actions.create} className="shadow-none gap-2">
+                    <Button size="sm" onClick={actions.create} className="shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9">
                         <Plus className="h-4 w-4" /> 
                         <span className="hidden sm:inline">New</span>
                     </Button>
@@ -230,7 +230,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">
                 <div className="flex-1 relative h-full">
-                    <div className="absolute inset-0 overflow-auto p-4">
+                    <div className="absolute inset-0 overflow-auto p-3 sm:p-4">
                         <PluginObjectView
                             key={refreshKey}
                             schema={objectViewSchema}
@@ -238,7 +238,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                             views={views}
                             activeViewId={activeViewId}
                             onViewChange={handleViewChange}
-                            onEdit={(record) => onEdit?.(record)}
+                            onEdit={(record: any) => onEdit?.(record)}
                             onRowClick={onRowClick || ((record: any) => onEdit?.(record))}
                             renderListView={renderListView}
                         />
@@ -254,10 +254,10 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
              </div>
 
              {/* Drawer for Record Details */}
-             <Sheet open={!!drawerRecordId} onOpenChange={(open) => !open && handleDrawerClose()}>
-                <SheetContent side="right" className="w-[85vw] sm:w-150 sm:max-w-none p-0 overflow-hidden">
+             <Sheet open={!!drawerRecordId} onOpenChange={(open: boolean) => !open && handleDrawerClose()}>
+                <SheetContent side="right" className="w-[90vw] sm:w-150 sm:max-w-none p-0 overflow-hidden">
                     {drawerRecordId && (
-                        <div className="h-full bg-background overflow-auto p-4 lg:p-6">
+                        <div className="h-full bg-background overflow-auto p-3 sm:p-4 lg:p-6">
                             <DetailView
                                 schema={{
                                     type: 'detail-view',
diff --git a/apps/console/src/components/PageView.tsx b/apps/console/src/components/PageView.tsx
index 6b7d8b02..ca34dd8c 100644
--- a/apps/console/src/components/PageView.tsx
+++ b/apps/console/src/components/PageView.tsx
@@ -35,7 +35,7 @@ export function PageView() {
   return (
     <div className="flex flex-row h-full w-full overflow-hidden relative">
         <div className="flex-1 overflow-auto h-full relative group">
-             <div className={`absolute top-2 right-2 z-50 transition-opacity ${showDebug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
+             <div className={`absolute top-1.5 sm:top-2 right-1.5 sm:right-2 z-50 transition-opacity ${showDebug ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
                  <MetadataToggle open={showDebug} onToggle={toggleDebug} />
              </div>
              <SchemaRenderer 
diff --git a/apps/console/src/components/RecordDetailView.tsx b/apps/console/src/components/RecordDetailView.tsx
index 9aff1c97..097ced0b 100644
--- a/apps/console/src/components/RecordDetailView.tsx
+++ b/apps/console/src/components/RecordDetailView.tsx
@@ -56,12 +56,12 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
 
   return (
     <div className="h-full bg-background overflow-hidden flex flex-col relative">
-      <div className="absolute top-4 right-4 z-50">
+      <div className="absolute top-2 sm:top-4 right-2 sm:right-4 z-50">
         <MetadataToggle open={showDebug} onToggle={toggleDebug} />
       </div>
 
       <div className="flex-1 overflow-hidden flex flex-row">
-        <div className="flex-1 overflow-auto p-4 lg:p-6">
+        <div className="flex-1 overflow-auto p-3 sm:p-4 lg:p-6">
           <DetailView
             schema={detailSchema}
             dataSource={dataSource}
diff --git a/apps/console/src/components/ReportView.tsx b/apps/console/src/components/ReportView.tsx
index b38a6c55..d79a151c 100644
--- a/apps/console/src/components/ReportView.tsx
+++ b/apps/console/src/components/ReportView.tsx
@@ -48,12 +48,13 @@ export function ReportView({ dataSource: _dataSource }: { dataSource?: any }) {
   if (isEditing) {
     return (
       <div className="flex flex-col h-full overflow-hidden bg-background">
-         <div className="flex items-center p-4 border-b bg-muted/10 gap-2">
-            <Button variant="ghost" size="sm" onClick={() => setIsEditing(false)}>
+         <div className="flex items-center p-3 sm:p-4 border-b bg-muted/10 gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setIsEditing(false)} className="shrink-0">
                <ChevronLeft className="h-4 w-4 mr-1" />
-               Back to View
+               <span className="hidden sm:inline">Back to View</span>
+               <span className="sm:hidden">Back</span>
             </Button>
-            <div className="font-medium">Edit Report: {reportData.title}</div>
+            <div className="font-medium truncate">Edit Report: {reportData.title}</div>
          </div>
          <div className="flex-1 overflow-auto">
             <ReportBuilder 
@@ -82,23 +83,23 @@ export function ReportView({ dataSource: _dataSource }: { dataSource?: any }) {
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-background">
-      <div className="flex justify-between items-center p-6 border-b shrink-0 bg-muted/10">
-        <div>
+      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0 bg-muted/10">
+        <div className="min-w-0">
            {/* Header is handled by ReportViewer usually, but we can have a page header too */}
-           <h1 className="text-lg font-medium text-muted-foreground">{reportData.title || 'Report Viewer'}</h1>
+           <h1 className="text-base sm:text-lg font-medium text-muted-foreground truncate">{reportData.title || 'Report Viewer'}</h1>
         </div>
-        <div className="flex items-center gap-2">
-           <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
-              <PenLine className="h-4 w-4 mr-2" />
-              Edit Report
+        <div className="flex items-center gap-2 shrink-0">
+           <Button variant="outline" size="sm" onClick={() => setIsEditing(true)} className="h-8">
+              <PenLine className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">Edit Report</span>
            </Button>
            <MetadataToggle open={showDebug} onToggle={toggleDebug} />
         </div>
       </div>
 
       <div className="flex-1 overflow-hidden flex flex-row relative">
-         <div className="flex-1 overflow-auto p-8 bg-muted/5">
-            <div className="max-w-5xl mx-auto shadow-sm border rounded-xl bg-background overflow-hidden min-h-150">
+         <div className="flex-1 overflow-auto p-4 sm:p-6 lg:p-8 bg-muted/5">
+            <div className="max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150">
                 <ReportViewer schema={viewerSchema} />
             </div>
          </div>
diff --git a/apps/console/src/pages/ForgotPasswordPage.tsx b/apps/console/src/pages/ForgotPasswordPage.tsx
index 5dc99661..5fb9053d 100644
--- a/apps/console/src/pages/ForgotPasswordPage.tsx
+++ b/apps/console/src/pages/ForgotPasswordPage.tsx
@@ -6,7 +6,7 @@ import { ForgotPasswordForm } from '@object-ui/auth';
 
 export function ForgotPasswordPage() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
       <ForgotPasswordForm loginUrl="/login" />
     </div>
   );
diff --git a/apps/console/src/pages/LoginPage.tsx b/apps/console/src/pages/LoginPage.tsx
index 55fab5ce..ef0c60b7 100644
--- a/apps/console/src/pages/LoginPage.tsx
+++ b/apps/console/src/pages/LoginPage.tsx
@@ -9,7 +9,7 @@ export function LoginPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
       <LoginForm
         onSuccess={() => navigate('/')}
         registerUrl="/register"
diff --git a/apps/console/src/pages/RegisterPage.tsx b/apps/console/src/pages/RegisterPage.tsx
index 91165571..b5214711 100644
--- a/apps/console/src/pages/RegisterPage.tsx
+++ b/apps/console/src/pages/RegisterPage.tsx
@@ -9,7 +9,7 @@ export function RegisterPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
       <RegisterForm
         onSuccess={() => navigate('/')}
         loginUrl="/login"
diff --git a/apps/console/src/pages/system/AuditLogPage.tsx b/apps/console/src/pages/system/AuditLogPage.tsx
index 435692d1..5fbd58c4 100644
--- a/apps/console/src/pages/system/AuditLogPage.tsx
+++ b/apps/console/src/pages/system/AuditLogPage.tsx
@@ -11,20 +11,20 @@ const auditObject = systemObjects.find((o) => o.name === 'sys_audit_log')!;
 
 export function AuditLogPage() {
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Audit Log</h1>
-        <p className="text-muted-foreground">View system activity and user actions</p>
+    <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
+      <div className="min-w-0">
+        <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Audit Log</h1>
+        <p className="text-sm text-muted-foreground mt-1">View system activity and user actions</p>
       </div>
 
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
               {auditObject.views[0].columns.map((col) => {
                 const field = auditObject.fields.find((f) => f.name === col);
                 return (
-                  <th key={col} className="h-10 px-4 text-left font-medium text-muted-foreground">
+                  <th key={col} className="h-10 px-3 sm:px-4 text-left font-medium text-muted-foreground whitespace-nowrap">
                     {field?.label ?? col}
                   </th>
                 );
@@ -33,7 +33,7 @@ export function AuditLogPage() {
           </thead>
           <tbody>
             <tr className="border-b">
-              <td className="p-4 text-muted-foreground" colSpan={auditObject.views[0].columns.length}>
+              <td className="p-3 sm:p-4 text-sm text-muted-foreground" colSpan={auditObject.views[0].columns.length}>
                 Connect to ObjectStack server to load audit logs. In production, this page uses plugin-grid in read-only mode.
               </td>
             </tr>
diff --git a/apps/console/src/pages/system/OrgManagementPage.tsx b/apps/console/src/pages/system/OrgManagementPage.tsx
index 691541ed..1605e8ae 100644
--- a/apps/console/src/pages/system/OrgManagementPage.tsx
+++ b/apps/console/src/pages/system/OrgManagementPage.tsx
@@ -15,30 +15,30 @@ export function OrgManagementPage() {
   const isAdmin = currentUser?.role === 'admin';
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Organization Management</h1>
-          <p className="text-muted-foreground">Manage organizations and their members</p>
+    <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Organization Management</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage organizations and their members</p>
         </div>
         {isAdmin && (
           <button
             type="button"
-            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0"
           >
             Add Organization
           </button>
         )}
       </div>
 
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
               {orgObject.views[0].columns.map((col) => {
                 const field = orgObject.fields.find((f) => f.name === col);
                 return (
-                  <th key={col} className="h-10 px-4 text-left font-medium text-muted-foreground">
+                  <th key={col} className="h-10 px-3 sm:px-4 text-left font-medium text-muted-foreground whitespace-nowrap">
                     {field?.label ?? col}
                   </th>
                 );
@@ -47,7 +47,7 @@ export function OrgManagementPage() {
           </thead>
           <tbody>
             <tr className="border-b">
-              <td className="p-4 text-muted-foreground" colSpan={orgObject.views[0].columns.length}>
+              <td className="p-3 sm:p-4 text-sm text-muted-foreground" colSpan={orgObject.views[0].columns.length}>
                 Connect to ObjectStack server to load organizations. In production, this page uses plugin-grid for full CRUD functionality.
               </td>
             </tr>
diff --git a/apps/console/src/pages/system/ProfilePage.tsx b/apps/console/src/pages/system/ProfilePage.tsx
index 4db127a3..97d8d44b 100644
--- a/apps/console/src/pages/system/ProfilePage.tsx
+++ b/apps/console/src/pages/system/ProfilePage.tsx
@@ -30,16 +30,16 @@ export function ProfilePage() {
   if (!user) return null;
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Profile</h1>
-        <p className="text-muted-foreground">Manage your account settings</p>
+    <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
+      <div className="min-w-0">
+        <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Profile</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage your account settings</p>
       </div>
 
-      <div className="max-w-lg space-y-6">
+      <div className="max-w-lg space-y-4 sm:space-y-6">
         {/* Profile Info */}
-        <div className="rounded-md border p-6">
-          <h2 className="mb-4 text-lg font-semibold">Personal Information</h2>
+        <div className="rounded-md border p-4 sm:p-6">
+          <h2 className="mb-4 text-base sm:text-lg font-semibold">Personal Information</h2>
           <form onSubmit={handleSave} className="space-y-4">
             {error && (
               <div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive" role="alert">
@@ -94,7 +94,7 @@ export function ProfilePage() {
             <button
               type="submit"
               disabled={isLoading}
-              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 w-full sm:w-auto"
             >
               {isLoading ? 'Saving...' : 'Save Changes'}
             </button>
@@ -102,8 +102,8 @@ export function ProfilePage() {
         </div>
 
         {/* Password Change */}
-        <div className="rounded-md border p-6">
-          <h2 className="mb-4 text-lg font-semibold">Change Password</h2>
+        <div className="rounded-md border p-4 sm:p-6">
+          <h2 className="mb-4 text-base sm:text-lg font-semibold">Change Password</h2>
           <p className="text-sm text-muted-foreground">
             To change your password, use the password reset flow from the login page.
           </p>
diff --git a/apps/console/src/pages/system/RoleManagementPage.tsx b/apps/console/src/pages/system/RoleManagementPage.tsx
index ac41ed68..beedf227 100644
--- a/apps/console/src/pages/system/RoleManagementPage.tsx
+++ b/apps/console/src/pages/system/RoleManagementPage.tsx
@@ -15,30 +15,30 @@ export function RoleManagementPage() {
   const isAdmin = currentUser?.role === 'admin';
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Role Management</h1>
-          <p className="text-muted-foreground">Define roles and assign permissions</p>
+    <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Role Management</h1>
+          <p className="text-sm text-muted-foreground mt-1">Define roles and assign permissions</p>
         </div>
         {isAdmin && (
           <button
             type="button"
-            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0"
           >
             Add Role
           </button>
         )}
       </div>
 
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
               {roleObject.views[0].columns.map((col) => {
                 const field = roleObject.fields.find((f) => f.name === col);
                 return (
-                  <th key={col} className="h-10 px-4 text-left font-medium text-muted-foreground">
+                  <th key={col} className="h-10 px-3 sm:px-4 text-left font-medium text-muted-foreground whitespace-nowrap">
                     {field?.label ?? col}
                   </th>
                 );
@@ -47,7 +47,7 @@ export function RoleManagementPage() {
           </thead>
           <tbody>
             <tr className="border-b">
-              <td className="p-4 text-muted-foreground" colSpan={roleObject.views[0].columns.length}>
+              <td className="p-3 sm:p-4 text-sm text-muted-foreground" colSpan={roleObject.views[0].columns.length}>
                 Connect to ObjectStack server to load roles. In production, this page uses plugin-grid with a permission assignment matrix.
               </td>
             </tr>
diff --git a/apps/console/src/pages/system/UserManagementPage.tsx b/apps/console/src/pages/system/UserManagementPage.tsx
index 92434d51..65b52da7 100644
--- a/apps/console/src/pages/system/UserManagementPage.tsx
+++ b/apps/console/src/pages/system/UserManagementPage.tsx
@@ -15,30 +15,30 @@ export function UserManagementPage() {
   const isAdmin = currentUser?.role === 'admin';
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
-          <p className="text-muted-foreground">Manage system users and their roles</p>
+    <div className="flex flex-col gap-4 sm:gap-6 p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-xl sm:text-2xl font-bold tracking-tight">User Management</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage system users and their roles</p>
         </div>
         {isAdmin && (
           <button
             type="button"
-            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0"
           >
             Add User
           </button>
         )}
       </div>
 
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
               {userObject.views[0].columns.map((col) => {
                 const field = userObject.fields.find((f) => f.name === col);
                 return (
-                  <th key={col} className="h-10 px-4 text-left font-medium text-muted-foreground">
+                  <th key={col} className="h-10 px-3 sm:px-4 text-left font-medium text-muted-foreground whitespace-nowrap">
                     {field?.label ?? col}
                   </th>
                 );
@@ -47,7 +47,7 @@ export function UserManagementPage() {
           </thead>
           <tbody>
             <tr className="border-b">
-              <td className="p-4 text-muted-foreground" colSpan={userObject.views[0].columns.length}>
+              <td className="p-3 sm:p-4 text-sm text-muted-foreground" colSpan={userObject.views[0].columns.length}>
                 Connect to ObjectStack server to load users. In production, this page uses plugin-grid for full CRUD functionality.
               </td>
             </tr>
diff --git a/packages/layout/src/AppShell.tsx b/packages/layout/src/AppShell.tsx
index d7cd0f84..624391d1 100644
--- a/packages/layout/src/AppShell.tsx
+++ b/packages/layout/src/AppShell.tsx
@@ -135,12 +135,12 @@ export function AppShell({
     <SidebarProvider defaultOpen={defaultOpen}>
       {sidebar}
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4">
           <SidebarTrigger className="-ml-1" />
-          <div className="w-px h-4 bg-border mx-2" />
+          <div className="w-px h-4 bg-border mx-1 sm:mx-2" />
           {navbar}
         </header>
-        <main className={cn("flex-1 overflow-auto p-4 md:p-6", className)}>
+        <main className={cn("flex-1 overflow-auto p-3 sm:p-4 md:p-6", className)}>
           {children}
         </main>
       </SidebarInset>