diff --git a/Modules/Content/Resources/views/admin/form.blade.php b/Modules/Content/Resources/views/admin/form.blade.php
index 16fd829..dbec35c 100644
--- a/Modules/Content/Resources/views/admin/form.blade.php
+++ b/Modules/Content/Resources/views/admin/form.blade.php
@@ -105,6 +105,10 @@
     function normaliseNode(node) {
         node.id ||= uid();
         node.type ||= 'field';
+        node.styles ||= { desktop: {}, tablet: {}, mobile: {} };
+        node.styles.desktop ||= {};
+        node.styles.tablet ||= {};
+        node.styles.mobile ||= {};
         if (node.type === 'columns') {
             node.columns ||= [{ children: [] }, { children: [] }];
             node.columns.forEach(column => {
@@ -127,6 +131,51 @@
     layout.forEach(normaliseNode);
     let selectedId = layout[0]?.id || null;
     let dragId = null;
+    let activeBreakpoint = 'desktop';
+
+
+    const styleDefaults = {
+        width: '', minHeight: '', textAlign: '', paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
+        marginTop: '', marginRight: '', marginBottom: '', marginLeft: '', backgroundColor: '', color: '',
+        borderColor: '', borderWidth: '', borderRadius: '', display: '', alignItems: '', justifyContent: ''
+    };
+
+    function resolvedStyles(node) {
+        const desktop = node.styles?.desktop || {};
+        const tablet = node.styles?.tablet || {};
+        const mobile = node.styles?.mobile || {};
+        if (activeBreakpoint === 'desktop') return { ...styleDefaults, ...desktop };
+        if (activeBreakpoint === 'tablet') return { ...styleDefaults, ...desktop, ...tablet };
+        return { ...styleDefaults, ...desktop, ...tablet, ...mobile };
+    }
+
+    function cssValue(value, unit = 'px') {
+        if (value === '' || value === null || value === undefined) return '';
+        if (typeof value === 'number' || /^-?\d+(\.\d+)?$/.test(String(value))) return `${value}${unit}`;
+        return String(value);
+    }
+
+    function nodeStyle(node) {
+        const s = resolvedStyles(node);
+        const declarations = {
+            width: s.width, minHeight: cssValue(s.minHeight), textAlign: s.textAlign,
+            paddingTop: cssValue(s.paddingTop), paddingRight: cssValue(s.paddingRight),
+            paddingBottom: cssValue(s.paddingBottom), paddingLeft: cssValue(s.paddingLeft),
+            marginTop: cssValue(s.marginTop), marginRight: cssValue(s.marginRight),
+            marginBottom: cssValue(s.marginBottom), marginLeft: cssValue(s.marginLeft),
+            backgroundColor: s.backgroundColor, color: s.color, borderColor: s.borderColor,
+            borderWidth: cssValue(s.borderWidth), borderRadius: cssValue(s.borderRadius),
+            borderStyle: s.borderWidth ? 'solid' : '', display: s.display, alignItems: s.alignItems,
+            justifyContent: s.justifyContent
+        };
+        return Object.entries(declarations).filter(([, value]) => value !== '').map(([key, value]) => `${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}:${value}`).join(';');
+    }
+
+    function responsiveBadge(node) {
+        const hasTablet = Object.values(node.styles?.tablet || {}).some(value => value !== '');
+        const hasMobile = Object.values(node.styles?.mobile || {}).some(value => value !== '');
+        return `${hasTablet ? '<span class="rounded bg-indigo-100 px-1.5 py-0.5 text-[10px] text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">T</span>' : ''}${hasMobile ? '<span class="rounded bg-violet-100 px-1.5 py-0.5 text-[10px] text-violet-700 dark:bg-violet-950 dark:text-violet-300">M</span>' : ''}`;
+    }
 
     const library = document.getElementById('builder-library');
     const layoutLibrary = document.getElementById('layout-library');
@@ -217,12 +266,12 @@
         if (node.type === 'field') {
             const definition = schema[node.key] || {};
             const value = data[node.key];
-            return `<article draggable="true" data-node-id="${node.id}" class="${base} bg-white p-4 dark:bg-zinc-900"><div class="mb-2 flex items-start justify-between gap-2"><button type="button" data-select-node="${node.id}" class="text-left"><span class="block text-xs font-semibold uppercase tracking-wide text-zinc-500">${escapeHtml(titleFor(node.key, definition))}</span><span class="text-[11px] text-zinc-400">Field</span></button>${nodeToolbar(node)}</div><p class="whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200">${escapeHtml(value === true ? 'Enabled' : value === false ? 'Disabled' : value || 'Click to add content')}</p></article>`;
+            return `<article draggable="true" data-node-id="${node.id}" style="${nodeStyle(node)}" class="${base} bg-white p-4 dark:bg-zinc-900"><div class="mb-2 flex items-start justify-between gap-2"><button type="button" data-select-node="${node.id}" class="text-left"><span class="block text-xs font-semibold uppercase tracking-wide text-zinc-500">${escapeHtml(titleFor(node.key, definition))}</span><span class="text-[11px] text-zinc-400">Field</span>${responsiveBadge(node)}</button>${nodeToolbar(node)}</div><p class="whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200">${escapeHtml(value === true ? 'Enabled' : value === false ? 'Disabled' : value || 'Click to add content')}</p></article>`;
         }
         if (node.type === 'columns') {
-            return `<section draggable="true" data-node-id="${node.id}" class="${base} bg-zinc-50 p-3 dark:bg-zinc-950/50"><div class="mb-3 flex items-center justify-between"><button type="button" data-select-node="${node.id}" class="text-left"><strong class="text-sm">${escapeHtml(node.label || 'Columns')}</strong><span class="ml-2 text-[11px] text-zinc-500">${node.columns.length} columns</span></button>${nodeToolbar(node)}</div><div class="grid gap-3" style="grid-template-columns:repeat(${node.columns.length},minmax(0,1fr))">${node.columns.map((column, index) => `<div class="min-h-28 rounded-lg border border-dashed border-zinc-300 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900">${renderDropZone(node.id, `column:${index}`, `Column ${index + 1}`)}<div class="space-y-2">${column.children.map(renderNode).join('')}</div></div>`).join('')}</div></section>`;
+            return `<section draggable="true" data-node-id="${node.id}" style="${nodeStyle(node)}" class="${base} bg-zinc-50 p-3 dark:bg-zinc-950/50"><div class="mb-3 flex items-center justify-between"><button type="button" data-select-node="${node.id}" class="text-left"><strong class="text-sm">${escapeHtml(node.label || 'Columns')}</strong><span class="ml-2 text-[11px] text-zinc-500">${node.columns.length} columns</span>${responsiveBadge(node)}</button>${nodeToolbar(node)}</div><div class="grid gap-3" style="grid-template-columns:repeat(${node.columns.length},minmax(0,1fr))">${node.columns.map((column, index) => `<div class="min-h-28 rounded-lg border border-dashed border-zinc-300 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900">${renderDropZone(node.id, `column:${index}`, `Column ${index + 1}`)}<div class="space-y-2">${column.children.map(renderNode).join('')}</div></div>`).join('')}</div></section>`;
         }
-        return `<section draggable="true" data-node-id="${node.id}" class="${base} ${node.type === 'section' ? 'bg-zinc-50 p-4 dark:bg-zinc-950/50' : 'bg-white p-3 dark:bg-zinc-900'}"><div class="mb-3 flex items-center justify-between"><button type="button" data-select-node="${node.id}" class="text-left"><strong class="text-sm">${escapeHtml(node.label || titleFor(node.type))}</strong><span class="ml-2 text-[11px] uppercase text-zinc-500">${node.type}</span></button>${nodeToolbar(node)}</div>${renderDropZone(node.id, 'children')}<div class="space-y-3">${(node.children || []).map(renderNode).join('')}</div></section>`;
+        return `<section draggable="true" data-node-id="${node.id}" style="${nodeStyle(node)}" class="${base} ${node.type === 'section' ? 'bg-zinc-50 p-4 dark:bg-zinc-950/50' : 'bg-white p-3 dark:bg-zinc-900'}"><div class="mb-3 flex items-center justify-between"><button type="button" data-select-node="${node.id}" class="text-left"><strong class="text-sm">${escapeHtml(node.label || titleFor(node.type))}</strong><span class="ml-2 text-[11px] uppercase text-zinc-500">${node.type}</span>${responsiveBadge(node)}</button>${nodeToolbar(node)}</div>${renderDropZone(node.id, 'children')}<div class="space-y-3">${(node.children || []).map(renderNode).join('')}</div></section>`;
     }
 
     function bindCanvas() {
@@ -295,8 +344,24 @@
         const node = found.node;
         if (node.type === 'field') return renderFieldInspector(node);
         document.getElementById('inspector-help').textContent = node.label || titleFor(node.type);
-        inspector.innerHTML = `<div class="space-y-4"><label class="block text-sm font-medium">Label<input id="node-label" class="mt-2 w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm dark:border-zinc-700 dark:bg-zinc-950" value="${escapeHtml(node.label || '')}"></label>${node.type === 'columns' ? `<label class="block text-sm font-medium">Columns<select id="column-count" class="mt-2 w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"><option value="2" ${node.columns.length === 2 ? 'selected' : ''}>Two</option><option value="3" ${node.columns.length === 3 ? 'selected' : ''}>Three</option></select></label>` : ''}<p class="rounded-lg bg-zinc-50 p-3 text-xs text-zinc-500 dark:bg-zinc-800">Drag components using their cards. Drop them into sections, containers, columns, or the page root.</p></div>`;
+        const current = node.styles[activeBreakpoint] || (node.styles[activeBreakpoint] = {});
+        const input = (key, label, type = 'text', placeholder = '') => `<label class="block text-xs font-medium text-zinc-600 dark:text-zinc-300">${label}<input data-style-key="${key}" type="${type}" placeholder="${placeholder}" value="${escapeHtml(current[key] ?? '')}" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-2.5 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-950"></label>`;
+        const select = (key, label, options) => `<label class="block text-xs font-medium text-zinc-600 dark:text-zinc-300">${label}<select data-style-key="${key}" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-2.5 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-950">${options.map(([value, text]) => `<option value="${value}" ${String(current[key] ?? '') === value ? 'selected' : ''}>${text}</option>`).join('')}</select></label>`;
+        inspector.innerHTML = `<div class="space-y-5">
+            <div class="rounded-lg bg-zinc-100 p-2 text-xs dark:bg-zinc-800"><strong>${activeBreakpoint[0].toUpperCase() + activeBreakpoint.slice(1)} styles</strong><span class="block text-zinc-500">Tablet and mobile inherit larger breakpoints until overridden.</span></div>
+            <label class="block text-sm font-medium">Label<input id="node-label" class="mt-2 w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm dark:border-zinc-700 dark:bg-zinc-950" value="${escapeHtml(node.label || '')}"></label>
+            ${node.type === 'columns' ? `<label class="block text-sm font-medium">Columns<select id="column-count" class="mt-2 w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"><option value="2" ${node.columns.length === 2 ? 'selected' : ''}>Two</option><option value="3" ${node.columns.length === 3 ? 'selected' : ''}>Three</option></select></label>` : ''}
+            <details open class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><summary class="cursor-pointer text-sm font-semibold">Layout</summary><div class="mt-3 grid grid-cols-2 gap-2">${input('width','Width','text','100%')}${input('minHeight','Min height','number')}${select('display','Display',[['','Default'],['block','Block'],['flex','Flex']])}${select('textAlign','Text align',[['','Default'],['left','Left'],['center','Centre'],['right','Right']])}${select('alignItems','Align items',[['','Default'],['flex-start','Start'],['center','Centre'],['flex-end','End'],['stretch','Stretch']])}${select('justifyContent','Justify',[['','Default'],['flex-start','Start'],['center','Centre'],['space-between','Space between'],['flex-end','End']])}</div></details>
+            <details open class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><summary class="cursor-pointer text-sm font-semibold">Spacing</summary><div class="mt-3 grid grid-cols-2 gap-2">${input('paddingTop','Padding top','number')}${input('paddingRight','Padding right','number')}${input('paddingBottom','Padding bottom','number')}${input('paddingLeft','Padding left','number')}${input('marginTop','Margin top','number')}${input('marginRight','Margin right','number')}${input('marginBottom','Margin bottom','number')}${input('marginLeft','Margin left','number')}</div></details>
+            <details open class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><summary class="cursor-pointer text-sm font-semibold">Appearance</summary><div class="mt-3 grid grid-cols-2 gap-2">${input('backgroundColor','Background','color')}${input('color','Text colour','color')}${input('borderColor','Border colour','color')}${input('borderWidth','Border width','number')}${input('borderRadius','Corner radius','number')}</div></details>
+            <button type="button" id="clear-breakpoint-styles" class="w-full rounded-lg border border-zinc-300 px-3 py-2 text-xs dark:border-zinc-700">Clear ${activeBreakpoint} overrides</button>
+        </div>`;
         document.getElementById('node-label')?.addEventListener('input', event => { node.label = event.target.value; sync(); renderCanvas(); });
+        inspector.querySelectorAll('[data-style-key]').forEach(control => control.addEventListener('input', event => {
+            node.styles[activeBreakpoint][control.dataset.styleKey] = event.target.value;
+            sync(); renderCanvas();
+        }));
+        document.getElementById('clear-breakpoint-styles')?.addEventListener('click', () => { node.styles[activeBreakpoint] = {}; update(); });
         document.getElementById('column-count')?.addEventListener('change', event => {
             const count = Number(event.target.value);
             while (node.columns.length < count) node.columns.push({ id: uid(), children: [] });
@@ -327,9 +392,11 @@
         }
     });
     document.querySelectorAll('.builder-width').forEach(button => button.addEventListener('click', () => {
+        activeBreakpoint = button.textContent.trim().toLowerCase();
         document.getElementById('builder-viewport').style.maxWidth = button.dataset.width;
         document.querySelectorAll('.builder-width').forEach(item => item.classList.remove('font-medium','bg-zinc-100','dark:bg-zinc-800'));
         button.classList.add('font-medium','bg-zinc-100','dark:bg-zinc-800');
+        renderCanvas(); renderInspector();
     }));
     document.getElementById('content-document-form').addEventListener('submit', sync);
     document.getElementById('content-type-select')?.addEventListener('change', event => {