diff --git a/frontend/src/components/ui/sheet-form.tsx b/frontend/src/components/ui/sheet-form.tsx
index 471b802..c19e1db 100644
--- a/frontend/src/components/ui/sheet-form.tsx
+++ b/frontend/src/components/ui/sheet-form.tsx
@@ -15,6 +15,8 @@ export interface SheetFormProps {
 	isPending?: boolean;
 	/** Override the Save button label (default "Save"). */
 	saveLabel?: string;
+	/** Disable the Save button (e.g. when required fields are empty). */
+	saveDisabled?: boolean;
 	children: React.ReactNode;
 	/** Optional className applied to the scrolling body. */
 	bodyClassName?: string;
@@ -39,6 +41,7 @@ export function SheetForm({
 	onSave,
 	onCancel,
 	isPending = false,
+	saveDisabled = false,
 	saveLabel = "Save",
 	children,
 	bodyClassName,
@@ -75,7 +78,7 @@ export function SheetForm({
 					<Button variant="outline" onClick={onCancel} disabled={isPending}>
 						Cancel
 					</Button>
-					<Button onClick={onSave} disabled={isPending}>
+					<Button onClick={onSave} disabled={isPending || saveDisabled}>
 						{isPending ? (
 							<>
 								<Loader2 className="animate-spin" />
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 5d76a68..40ab5be 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -17,6 +17,8 @@ import {
 	useSaveSSHKey,
 	useTestMonitoringMachineSSH,
 } from "../hooks/useSettings";
+import { useIsMobile } from "../hooks/useIsMobile";
+import { SheetForm } from "@/components/ui/sheet-form";
 import { DialogFooter } from "../components/DialogFooter";
 import { HoverEditButton } from "../components/HoverEditButton";
 import { SectionCard } from "../components/SectionCard";
@@ -850,6 +852,7 @@ export function Settings() {
 	const [editingMachine, setEditingMachine] =
 		useState<MonitoringMachine | null>(null);
 	const [selectedMachineId, setSelectedMachineId] = useState("");
+	const isMobile = useIsMobile();
 	const orderedMachines = useMemo(() => machines ?? [], [machines]);
 	const selectedMachine = useMemo(
 		() =>
@@ -1135,21 +1138,24 @@ export function Settings() {
 				)}
 				{tab === "danger" && <ResetLocalDatabaseCard />}
 			</TabbedCard>
-			<Dialog
-				open={machineDialogOpen}
-				onOpenChange={(open) => {
-					if (!open) closeMachineDialog();
-				}}
-			>
-				<DialogContent className="sm:max-w-4xl">
-					<DialogHeader>
-						<DialogTitle>
-							{machineDraft.id ? "Edit machine" : "Create machine"}
-						</DialogTitle>
-						<DialogDescription>
-							{machineDraft.mode === "local" ? "Local API host" : "SSH target"}
-						</DialogDescription>
-					</DialogHeader>
+			{isMobile ? (
+				<SheetForm
+					open={machineDialogOpen}
+					onOpenChange={(open) => {
+						if (!open) closeMachineDialog();
+					}}
+					title={machineDraft.id ? "Edit machine" : "Create machine"}
+					onSave={() => {
+						void saveMachineDraft(machineDraft);
+					}}
+					onCancel={closeMachineDialog}
+					isPending={saveMachine.isPending}
+					saveDisabled={
+						!machineDraft.name ||
+						(machineDraft.mode === "ssh" && !machineDraft.host.trim())
+					}
+					saveLabel={machineDraft.id ? "Save machine" : "Create machine"}
+				>
 					<MachineEditor
 						key={`${machineDraft.id ?? machineDraft.mode}-${machineDraft.mode}`}
 						title={
@@ -1170,32 +1176,80 @@ export function Settings() {
 						sshValidationError={sshValidationError}
 						sshValidationStatus={sshValidationStatus}
 					/>
-					<DialogFooter
-						onCancel={closeMachineDialog}
-						cancelLabel="Cancel"
-						onConfirm={() => {
-							void saveMachineDraft(machineDraft);
-						}}
-						confirmLabel={machineDraft.id ? "Save machine" : "Create machine"}
-						confirmDisabled={
-							!machineDraft.name ||
-							(machineDraft.mode === "ssh" && !machineDraft.host.trim())
-						}
-						secondaryAction={
-							machineDraft.id ? (
-								<Button
-									variant="destructive"
-									onClick={() => {
-										setDeleteMachineId(machineDraft.id as string);
-									}}
-								>
-									Delete
-								</Button>
-							) : undefined
-						}
-					/>
-				</DialogContent>
-			</Dialog>
+					{machineDraft.id ? (
+						<Button
+							variant="destructive"
+							onClick={() => setDeleteMachineId(machineDraft.id as string)}
+						>
+							Delete machine
+						</Button>
+					) : null}
+				</SheetForm>
+			) : (
+				<Dialog
+					open={machineDialogOpen}
+					onOpenChange={(open) => {
+						if (!open) closeMachineDialog();
+					}}
+				>
+					<DialogContent className="sm:max-w-4xl">
+						<DialogHeader>
+							<DialogTitle>
+								{machineDraft.id ? "Edit machine" : "Create machine"}
+							</DialogTitle>
+							<DialogDescription>
+								{machineDraft.mode === "local"
+									? "Local API host"
+									: "SSH target"}
+							</DialogDescription>
+						</DialogHeader>
+						<MachineEditor
+							key={`${machineDraft.id ?? machineDraft.mode}-${machineDraft.mode}`}
+							title={
+								machineDraft.id
+									? machineDraft.name || "Edit machine"
+									: "New machine"
+							}
+							hint={
+								machineDraft.mode === "local" ? "Local API host" : "SSH target"
+							}
+							machine={machineDraft}
+							sshKeys={sshKeys}
+							editingMachine={editingMachine}
+							onChange={updateMachineDraft}
+							onValidateSSH={validateMachineSSH}
+							isValidatingSSH={testMachineSSH.isPending}
+							sshValidationMessage={sshValidationMessage}
+							sshValidationError={sshValidationError}
+							sshValidationStatus={sshValidationStatus}
+						/>
+						<DialogFooter
+							onCancel={closeMachineDialog}
+							cancelLabel="Cancel"
+							onConfirm={() => {
+								void saveMachineDraft(machineDraft);
+							}}
+							confirmLabel={machineDraft.id ? "Save machine" : "Create machine"}
+							confirmDisabled={
+								!machineDraft.name ||
+								(machineDraft.mode === "ssh" && !machineDraft.host.trim())
+							}
+							secondaryAction={
+								machineDraft.id ? (
+									<Button
+										variant="destructive"
+										onClick={() => {
+											setDeleteMachineId(machineDraft.id as string);
+										}}
+									>
+										Delete
+									</Button>
+								) : undefined
+							}
+						/>
+					</DialogContent>
+				</Dialog>
+			)}
 			<ConfirmDialog
 				open={Boolean(deleteMachineId)}
 				title="Delete machine?"
diff --git a/frontend/src/pages/__tests__/Settings.test.tsx b/frontend/src/pages/__tests__/Settings.test.tsx
index debb550..7530a7a 100644
--- a/frontend/src/pages/__tests__/Settings.test.tsx
+++ b/frontend/src/pages/__tests__/Settings.test.tsx
@@ -6,12 +6,10 @@ import type { MonitoringMachine } from "../../types";
 
 const saveMachineMutate = vi.fn().mockResolvedValue({});
 const deleteMachineMutate = vi.fn();
-const testSSHMutate = vi
-	.fn()
-	.mockResolvedValue({
-		message: "SSH auth succeeded",
-		known_hosts_updated: true,
-	});
+const testSSHMutate = vi.fn().mockResolvedValue({
+	message: "SSH auth succeeded",
+	known_hosts_updated: true,
+});
 
 let machines: MonitoringMachine[] = [];
 
@@ -113,3 +111,80 @@ describe("Settings", () => {
 		expect(deleteMachineMutate).toHaveBeenCalledWith("m1");
 	});
 });
+
+// jsdom has no window.matchMedia; default to desktop so existing tests are
+// unaffected.
+function setMatchMedia(matches: boolean) {
+	window.matchMedia = ((query: string) => ({
+		matches: query.includes("768") ? matches : false,
+		media: query,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	})) as unknown as typeof window.matchMedia;
+}
+
+describe("Settings (mobile SheetForm — slice 7)", () => {
+	beforeEach(() => setMatchMedia(true));
+
+	it("opens the machine editor in a SheetForm below md", async () => {
+		machines = [localMachine()];
+		render(<Settings />);
+
+		// Open the editor via the detail-pane Edit button (visible text).
+		const detailEdit = screen
+			.getAllByRole("button", { name: "Edit" })
+			.find((button) => button.textContent === "Edit") as HTMLButtonElement;
+		await userEvent.click(detailEdit);
+
+		// SheetForm renders a dialog; the DialogTitle shows the editor title.
+		expect(screen.getByText("Edit machine")).toBeInTheDocument();
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+		// Desktop DialogDescription text is not rendered as a dialog description
+		// on mobile (the MachineEditor has its own hint labels, which is fine).
+		expect(
+			screen.queryByRole("heading", { name: "Create machine" }),
+		).not.toBeInTheDocument();
+	});
+
+	it("saves a machine via the SheetForm on mobile", async () => {
+		machines = [localMachine()];
+		render(<Settings />);
+
+		const detailEdit = screen
+			.getAllByRole("button", { name: "Edit" })
+			.find((button) => button.textContent === "Edit") as HTMLButtonElement;
+		await userEvent.click(detailEdit);
+
+		const nameInput = screen.getByLabelText("Name");
+		await userEvent.clear(nameInput);
+		await userEvent.type(nameInput, "Renamed node");
+
+		await userEvent.click(screen.getByRole("button", { name: "Save machine" }));
+
+		expect(saveMachineMutate).toHaveBeenCalledTimes(1);
+		const saved = saveMachineMutate.mock.calls[0][0];
+		expect(saved.name).toBe("Renamed node");
+		expect(saved.mode).toBe("local");
+	});
+
+	it("cancel closes the SheetForm on mobile", async () => {
+		machines = [localMachine()];
+		render(<Settings />);
+
+		const detailEdit = screen
+			.getAllByRole("button", { name: "Edit" })
+			.find((button) => button.textContent === "Edit") as HTMLButtonElement;
+		await userEvent.click(detailEdit);
+
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+		await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+		// The sheet is now closed — the dialog role should no longer be present.
+		// (The page content itself is still rendered; only the sheet unmounts.)
+		expect(screen.queryByText("Edit machine")).not.toBeInTheDocument();
+	});
+});