diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index f95098792d8c4..e8e89d6d73e48 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -8,7 +8,11 @@ interface SidebarProps {
 }
 
 export const Sidebar: FC<SidebarProps> = ({ className, children }) => {
-	return <nav className={cn("w-60 flex-shrink-0", className)}>{children}</nav>;
+	return (
+		<nav className={cn("w-full lg:w-60 flex-shrink-0", className)}>
+			{children}
+		</nav>
+	);
 };
 
 interface SidebarHeaderProps {
diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx
index 6a16f2eda79d7..6a97f752cdce8 100644
--- a/site/src/modules/management/DeploymentSettingsLayout.tsx
+++ b/site/src/modules/management/DeploymentSettingsLayout.tsx
@@ -51,10 +51,10 @@ const DeploymentSettingsLayout: FC = () => {
 					</BreadcrumbList>
 				</Breadcrumb>
 				<div className="h-px border-none bg-border" />
-				<section className="px-10 max-w-screen-2xl mx-auto">
-					<div className="flex flex-row gap-28 py-10">
+				<section className="px-4 sm:px-6 lg:px-10 max-w-screen-2xl mx-auto">
+					<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-28 lg:py-10">
 						<DeploymentSidebar />
-						<div className="grow">
+						<div className="grow min-w-0">
 							<Suspense fallback={<Loader />}>
 								<Outlet />
 							</Suspense>
diff --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.tsx
index 447046bfaedff..abaee4227ae00 100644
--- a/site/src/modules/management/OrganizationSidebarLayout.tsx
+++ b/site/src/modules/management/OrganizationSidebarLayout.tsx
@@ -5,10 +5,10 @@ import { OrganizationSidebar } from "./OrganizationSidebar";
 
 const OrganizationSidebarLayout: FC = () => {
 	return (
-		<section className="px-10 max-w-screen-2xl mx-auto">
-			<div className="flex flex-row gap-28 py-10">
+		<section className="px-4 sm:px-6 lg:px-10 max-w-screen-2xl mx-auto">
+			<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-28 lg:py-10">
 				<OrganizationSidebar />
-				<div className="grow">
+				<div className="grow min-w-0">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>
diff --git a/site/src/pages/AISettingsPage/AISettingsLayout.tsx b/site/src/pages/AISettingsPage/AISettingsLayout.tsx
index 8a44e10352f6c..bb523820ecf38 100644
--- a/site/src/pages/AISettingsPage/AISettingsLayout.tsx
+++ b/site/src/pages/AISettingsPage/AISettingsLayout.tsx
@@ -5,10 +5,10 @@ import { AISettingsSidebar } from "#/modules/management/AISettingsSidebar";
 
 const AISettingsLayout = () => {
 	return (
-		<section className="px-10 w-full max-w-screen-2xl mx-auto">
-			<div className="flex flex-row gap-28 py-10">
+		<section className="px-4 sm:px-6 lg:px-10 w-full max-w-screen-2xl mx-auto">
+			<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-28 lg:py-10">
 				<AISettingsSidebar />
-				<div className="grow">
+				<div className="grow min-w-0">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>
diff --git a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
index f92fb33538ed0..e64cea7302bde 100644
--- a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
+++ b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx
@@ -55,7 +55,7 @@ const MCPServersPageView: FC<MCPServersPageViewProps> = ({
 					<ErrorAlert error={error} />
 				</div>
 			)}
-			<Table className="table-fixed" aria-label="MCP servers">
+			<Table className="table-fixed min-w-[640px]" aria-label="MCP servers">
 				<TableHeader>
 					<TableRow>
 						<TableHead className="w-1/2">Name</TableHead>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
index 9de61b416c771..8cce82d23b964 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -52,8 +52,8 @@ export const TemplateSettingsLayout: FC = () => {
 		<>
 			<title>Codestin Search App</title>
 
-			<Margins>
-				<div className="flex flex-row gap-20 py-12">
+			<Margins className="max-sm:!px-4">
+				<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-20 lg:py-12">
 					{templateQuery.isError || permissionsQuery.isError ? (
 						<ErrorAlert error={templateQuery.error} />
 					) : (
@@ -65,7 +65,7 @@ export const TemplateSettingsLayout: FC = () => {
 						>
 							<Sidebar template={templateQuery.data} />
 							<Suspense fallback={<Loader />}>
-								<div className="w-full">
+								<div className="w-full min-w-0">
 									<Outlet />
 								</div>
 							</Suspense>
diff --git a/site/src/pages/UserSettingsPage/Layout.tsx b/site/src/pages/UserSettingsPage/Layout.tsx
index 86c0dfb291edc..5146207f8f1c6 100644
--- a/site/src/pages/UserSettingsPage/Layout.tsx
+++ b/site/src/pages/UserSettingsPage/Layout.tsx
@@ -29,10 +29,10 @@ const Layout: FC = () => {
 					</BreadcrumbList>
 				</Breadcrumb>
 				<div className="h-px border-none bg-border" />
-				<section className="px-10 max-w-screen-2xl mx-auto">
-					<div className="flex flex-row gap-28 py-10">
+				<section className="px-4 sm:px-6 lg:px-10 max-w-screen-2xl mx-auto">
+					<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-28 lg:py-10">
 						<Sidebar user={me} />
-						<div className="grow">
+						<div className="grow min-w-0">
 							<Suspense fallback={<Loader />}>
 								<Outlet />
 							</Suspense>
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
index 6a03e0b71c89a..31d351e475978 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
@@ -35,8 +35,8 @@ export const WorkspaceSettingsLayout: FC = () => {
 		<>
 			<title>Codestin Search App</title>
 
-			<Margins>
-				<div className="flex flex-row gap-20 py-12">
+			<Margins className="max-sm:!px-4">
+				<div className="flex flex-col gap-8 py-6 lg:flex-row lg:gap-20 lg:py-12">
 					{error ? (
 						<ErrorAlert error={error} />
 					) : (
@@ -50,7 +50,7 @@ export const WorkspaceSettingsLayout: FC = () => {
 							>
 								<Sidebar />
 								<Suspense fallback={<Loader />}>
-									<div className="w-full">
+									<div className="w-full min-w-0">
 										<Outlet />
 									</div>
 								</Suspense>