diff --git a/AGENTS.md b/AGENTS.md
index af1adb6..8e50093 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -29,9 +29,9 @@
 
 Ключевые сущности:
 - `BlockNode` содержит `rows`, `settings` (`BlockSettings`) и `label`.
-- `RowNode` содержит `cells` и `settings` (`RowSettings` с `gap`, optional `height`).
-- `CellNode` содержит `atoms`, `rows` (вложенность поддерживается рекурсивно) и `settings` (`CellSettings` с `verticalAlign`, `horizontalAlign`, `borderRadius`, `width`, `height`, `link`).
-- `Atom` — контентный узел (`text`, `button`, `divider`, `image`, `menu`). Базовый `BaseAtom` имеет `id`, `type`, optional `spacing`.
+- `RowNode` содержит `cells` и `settings` (`RowSettings` с `gap`, optional `height`, optional `hiddenOnMobile`, optional `collapseOnMobile`).
+- `CellNode` содержит `atoms`, `rows` (вложенность поддерживается рекурсивно) и `settings` (`CellSettings` с `verticalAlign`, `horizontalAlign`, `borderRadius`, `width`, `height`, `link`, optional `hiddenOnMobile`).
+- `Atom` — контентный узел (`text`, `button`, `divider`, `image`, `menu`). Базовый `BaseAtom` имеет `id`, `type`, optional `spacing`, optional `hiddenOnMobile`.
 - `CanvasBlockInstance` — элемент канваса с `id`, `version: 2`, `block`.
 - `BlockPreset` — расширяет `CanvasBlockInstance`, добавляет `name`, `label`, `type` (`ComponentType`), `preview`.
 
@@ -57,14 +57,17 @@ ID-правила:
 | Валидация/санитизация/migration/remap id шаблона | `src/entities/template/template-io.ts` |
 | Barrel-export модели редактора | `src/features/editor/model/index.ts` |
 | Типы модели редактора (`BlockSelectionLevel`, `SidebarTab`, re-export entities) | `src/features/editor/model/types.ts` |
-| Shared reactive state (`installed`, `editableId`, `isDragging`, `general`, `list`, `templateImportIssues`) | `src/features/editor/model/state.ts` |
+| Shared reactive state (`installed`, `editableId`, `isDragging`, `previewMode`, `general`, `list`, `templateImportIssues`) | `src/features/editor/model/state.ts` |
 | CRUD дерева на канвасе | `src/features/editor/model/use-canvas.ts` (`useCanvas`) |
 | Выделение block/row/cell/atom, sidebar tab, tree scroll | `src/features/editor/model/use-selection.ts` (`useSelection`) |
 | Template IO интеграция со store | `src/features/editor/model/use-template-io.ts` (`useTemplateIO`) |
 | Persist/Hydrate localStorage | `src/features/editor/model/use-persistence.ts` (`usePersistence`) |
 | Tool-утилиты (трансформации, defaults) | `src/features/editor/model/tools.ts` |
-| Главный рендер блока | `src/features/email-preview/ui/BlockRenderer.vue` |
-| Рендер row/cell/atom | `src/features/email-preview/ui/BlockRendererRowNode.vue` |
+| Главный рендер блока (preview) | `src/features/email-preview/ui/BlockRenderer.vue` |
+| Рендер row/cell/atom (preview) | `src/features/email-preview/ui/BlockRendererRowNode.vue` |
+| Главный рендер блока (export) | `src/features/email-preview/ui/ExportBlockRenderer.vue` |
+| Рендер row/cell/atom (export) | `src/features/email-preview/ui/ExportBlockRendererRowNode.vue` |
+| HTML-документ экспорта | `src/features/email-preview/ui/EmailExportDocument.vue` |
 | Панель настроек блока/атома | `src/features/editor/components/tools/BlockSettingsPanel.vue` |
 | Каталог пресетов (JSON-файлы, загрузчик, хелперы) | `src/features/email-preview/catalog/` |
 | JSON-схема пресетов | `src/features/email-preview/catalog/block.schema.json` |
@@ -88,7 +91,7 @@ ID-правила:
 
 - **`useSelection()`** — выделение: `selectBlock`, `selectRow`, `selectCell`, `selectAtom`, `resetSelection`. Computed: `selectedBlock`, `selectedRow`, `selectedCell`, `selectedAtom`. Управление UI: `sidebarActiveTab`, `treeScrollTarget`, `treeScrollRequestId`, `requestTreeScroll`, `openTreeAndScroll`, `selectionLevel`.
 
-- **`useTemplateIO()`** — импорт/экспорт: `importTemplate`, `importTemplateFromJson`, `exportTemplate`, `exportTemplateJson`, `applyImportedTemplate`, `withPersistLock`, `isPersistIgnored`, `triggerPersist`.
+- **`useTemplateIO()`** — импорт/экспорт: `importTemplate`, `importTemplateFromJson`, `exportTemplate`, `exportTemplateJson`, `exportTemplateHtml`, `applyImportedTemplate`, `withPersistLock`, `isPersistIgnored`, `triggerPersist`.
 
 - **`usePersistence()`** — localStorage: `persistTemplateToLocalStorage`, `hydrateTemplateFromLocalStorage`, `initTemplatePersistence` (auto-init при создании singleton).
 
@@ -96,6 +99,7 @@ ID-правила:
 - `installed` — `ref<CanvasBlockInstance[]>` — установленные блоки на канвасе.
 - `editableId` — `ref<string>` — ID выбранного блока.
 - `isDragging` — `ref<boolean>` — состояние перетаскивания.
+- `previewMode` — `ref<'desktop' | 'mobile'>` — режим предпросмотра.
 - `general` — `reactive<GeneralTool>` — глобальные настройки (padding, background, font, previewText).
 - `list` — `shallowRef<ComponentList[]>` — категории пресетов с блоками (Menu, Header, Content, Feature, Call to Action, E-Commerce, Footer).
 - `templateImportIssues` — `ref<TemplateValidationIssue[]>` — проблемы импорта.
@@ -216,6 +220,7 @@ Smoke-check вручную (критично для этого проекта):
 3. Import в обоих режимах: `replace` и `append`.
 4. Перезагрузка страницы восстанавливает состояние из localStorage.
 5. В Shadow DOM стили элемента выглядят корректно и не текут наружу.
+6. Export HTML повторяет ключевое поведение preview (mobile hide/collapse).
 
 ## 9. Антипаттерны (не делать)
 
diff --git a/src/entities/block/block-factory.ts b/src/entities/block/block-factory.ts
index b86da5c..0e90717 100644
--- a/src/entities/block/block-factory.ts
+++ b/src/entities/block/block-factory.ts
@@ -26,6 +26,8 @@ export function createDefaultRowSettings(): RowSettings {
   return {
     spacing: {},
     backgroundColor: 'transparent',
+    hiddenOnMobile: false,
+    collapseOnMobile: true,
     gap: 0,
   }
 }
@@ -35,6 +37,7 @@ export function createDefaultCellSettings(): CellSettings {
     spacing: {},
     backgroundColor: 'transparent',
     link: undefined,
+    hiddenOnMobile: false,
     verticalAlign: 'top',
     horizontalAlign: 'left',
     borderRadius: undefined,
diff --git a/src/entities/block/types.ts b/src/entities/block/types.ts
index 6ab37da..6406905 100644
--- a/src/entities/block/types.ts
+++ b/src/entities/block/types.ts
@@ -4,6 +4,7 @@ export interface BaseAtom {
   id: string
   type: AtomType
   spacing?: SpacingValue
+  hiddenOnMobile?: boolean
 }
 
 export interface TextAtom extends BaseAtom {
@@ -80,6 +81,8 @@ export interface RowSettings {
   spacing: SpacingValue
   backgroundColor: string
   backgroundImage?: BackgroundImageValue
+  hiddenOnMobile?: boolean
+  collapseOnMobile?: boolean
   height?: number
   gap: number
 }
@@ -89,6 +92,7 @@ export interface CellSettings {
   backgroundColor: string
   backgroundImage?: BackgroundImageValue
   link?: string
+  hiddenOnMobile?: boolean
   verticalAlign: 'top' | 'middle' | 'bottom'
   horizontalAlign?: 'left' | 'center' | 'right'
   borderRadius?: number
diff --git a/src/entities/template/template-io.ts b/src/entities/template/template-io.ts
index 3923480..1de38fb 100644
--- a/src/entities/template/template-io.ts
+++ b/src/entities/template/template-io.ts
@@ -137,6 +137,10 @@ function isString(value: unknown): value is string {
   return typeof value === 'string'
 }
 
+function toOptionalBoolean(value: unknown): boolean | undefined {
+  return typeof value === 'boolean' ? value : undefined
+}
+
 function pushIssue(issues: TemplateValidationIssue[], path: string, message: string) {
   issues.push({ path, message })
 }
@@ -511,6 +515,10 @@ function validateAtom(value: unknown, path: string, issues: TemplateValidationIs
   if (!isString(value.type))
     pushIssue(issues, `${path}.type`, 'atom.type must be a string')
 
+  if (value.hiddenOnMobile !== undefined && typeof value.hiddenOnMobile !== 'boolean') {
+    pushIssue(issues, `${path}.hiddenOnMobile`, 'atom.hiddenOnMobile must be a boolean')
+  }
+
   if (value.type === 'text') {
     if (!isString(value.value))
       pushIssue(issues, `${path}.value`, 'text atom value must be a string')
@@ -722,6 +730,25 @@ function validateCellNode(value: unknown, path: string, issues: TemplateValidati
       pushIssue(issues, `${path}.settings.link`, 'cell.settings.link must be a string')
     }
 
+    if (
+      value.settings.hiddenOnMobile !== undefined
+      && typeof value.settings.hiddenOnMobile !== 'boolean'
+    ) {
+      pushIssue(
+        issues,
+        `${path}.settings.hiddenOnMobile`,
+        'cell.settings.hiddenOnMobile must be a boolean',
+      )
+    }
+
+    if (value.settings.collapseOnMobile !== undefined) {
+      pushIssue(
+        issues,
+        `${path}.settings.collapseOnMobile`,
+        'cell.settings.collapseOnMobile is no longer supported. Use row.settings.collapseOnMobile',
+      )
+    }
+
     if (value.settings.width !== undefined && !isFiniteNumber(value.settings.width)) {
       pushIssue(issues, `${path}.settings.width`, 'cell.settings.width must be a number')
     }
@@ -798,6 +825,28 @@ function validateRowNode(value: unknown, path: string, issues: TemplateValidatio
       pushIssue(issues, `${path}.settings.gap`, 'row.settings.gap must be a number')
     }
 
+    if (
+      value.settings.hiddenOnMobile !== undefined
+      && typeof value.settings.hiddenOnMobile !== 'boolean'
+    ) {
+      pushIssue(
+        issues,
+        `${path}.settings.hiddenOnMobile`,
+        'row.settings.hiddenOnMobile must be a boolean',
+      )
+    }
+
+    if (
+      value.settings.collapseOnMobile !== undefined
+      && typeof value.settings.collapseOnMobile !== 'boolean'
+    ) {
+      pushIssue(
+        issues,
+        `${path}.settings.collapseOnMobile`,
+        'row.settings.collapseOnMobile must be a boolean',
+      )
+    }
+
     validateBackgroundImageValue(
       value.settings.backgroundImage,
       `${path}.settings.backgroundImage`,
@@ -981,6 +1030,7 @@ function sanitizeAtoms(atoms: Atom[]): Atom[] {
     if (atom.type === 'text') {
       return {
         ...atom,
+        hiddenOnMobile: toOptionalBoolean(atom.hiddenOnMobile),
         color: atom.color || '#111827',
         value: sanitizeTextEditorHtml(atom.value),
       }
@@ -989,6 +1039,7 @@ function sanitizeAtoms(atoms: Atom[]): Atom[] {
     if (atom.type === 'image') {
       return {
         ...atom,
+        hiddenOnMobile: toOptionalBoolean(atom.hiddenOnMobile),
         src: typeof atom.src === 'string' ? atom.src : '',
         link: typeof atom.link === 'string' ? atom.link : '',
         alt: typeof atom.alt === 'string' ? atom.alt : '',
@@ -1013,6 +1064,7 @@ function sanitizeAtoms(atoms: Atom[]): Atom[] {
 
       return {
         ...atom,
+        hiddenOnMobile: toOptionalBoolean(atom.hiddenOnMobile),
         itemType: normalizedItemType,
         gap: isFiniteNumber(atom.gap) && atom.gap >= 0 ? atom.gap : 10,
         items: Array.isArray(atom.items)
@@ -1065,29 +1117,46 @@ function sanitizeAtoms(atoms: Atom[]): Atom[] {
       }
     }
 
-    return atom
+    return {
+      ...atom,
+      hiddenOnMobile: toOptionalBoolean(atom.hiddenOnMobile),
+    }
   })
 }
 
 function sanitizeCellNodes(cells: CellNode[]): CellNode[] {
-  return cells.map(cell => ({
-    ...cell,
-    settings: {
+  return cells.map((cell) => {
+    const settings = {
       ...cell.settings,
       link: typeof cell.settings?.link === 'string' ? cell.settings.link : undefined,
+      hiddenOnMobile: toOptionalBoolean(cell.settings?.hiddenOnMobile),
       borderRadius:
         isFiniteNumber(cell.settings?.borderRadius) && cell.settings.borderRadius >= 0
           ? cell.settings.borderRadius
           : undefined,
-    },
-    atoms: sanitizeAtoms(cell.atoms),
-    rows: sanitizeRowNodes(cell.rows || []),
-  }))
+    }
+
+    // Hard-drop legacy per-cell collapse to keep exported schema clean.
+    delete (settings as Record<string, unknown>).collapseOnMobile
+
+    return {
+      ...cell,
+      settings,
+      atoms: sanitizeAtoms(cell.atoms),
+      rows: sanitizeRowNodes(cell.rows || []),
+    }
+  })
 }
 
 function sanitizeRowNodes(rows: RowNode[]): RowNode[] {
   return rows.map(row => ({
     ...row,
+    settings: {
+      ...row.settings,
+      hiddenOnMobile: toOptionalBoolean(row.settings?.hiddenOnMobile),
+      collapseOnMobile:
+        typeof row.settings?.collapseOnMobile === 'boolean' ? row.settings.collapseOnMobile : true,
+    },
     cells: sanitizeCellNodes(row.cells),
   }))
 }
diff --git a/src/features/editor/components/header/TheHeader.vue b/src/features/editor/components/header/TheHeader.vue
index b69ce33..6ec5775 100644
--- a/src/features/editor/components/header/TheHeader.vue
+++ b/src/features/editor/components/header/TheHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TemplateImportMode } from '@/entities/template'
-import { MoreHorizontal as MoreHorizontalIcon } from 'lucide-vue-next'
+import { Monitor, MoreHorizontal, Smartphone } from 'lucide-vue-next'
 import { computed, ref, watch } from 'vue'
 import { useCanvas, useTemplateIO } from '@/features/editor/model'
 import { Button } from '@/shared/ui/button'
@@ -10,6 +10,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/shared/ui/dropdown-menu'
 import { Switch } from '@/shared/ui/switch'
@@ -25,8 +27,8 @@ const pendingImportRaw = ref('')
 const pendingImportFileName = ref('')
 const fileInputRef = ref<HTMLInputElement>()
 
-const { exportTemplateJson, importTemplateFromJson } = useTemplateIO()
-const { templateImportIssues, clearCanvas } = useCanvas()
+const { exportTemplateHtml, exportTemplateJson, importTemplateFromJson } = useTemplateIO()
+const { templateImportIssues, clearCanvas, previewMode } = useCanvas()
 
 const importModeValue = computed<string>({
   get: () => importMode.value,
@@ -36,6 +38,14 @@ const importModeValue = computed<string>({
   },
 })
 
+const previewModeValue = computed<string>({
+  get: () => previewMode.value,
+  set: (next) => {
+    if (next === 'desktop' || next === 'mobile')
+      previewMode.value = next
+  },
+})
+
 const visibleImportIssues = computed(() => {
   if (importStatus.value !== 'error')
     return []
@@ -63,6 +73,24 @@ function exportTemplateToFile() {
   importMessage.value = ''
 }
 
+function exportTemplateHtmlToFile() {
+  const now = new Date().toISOString().replace(/[:.]/g, '-')
+  const payload = exportTemplateHtml()
+  const file = new Blob([payload], { type: 'text/html;charset=utf-8' })
+  const url = URL.createObjectURL(file)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `email-template-${now}.html`
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+  URL.revokeObjectURL(url)
+
+  importStatus.value = 'idle'
+  importMessage.value = ''
+}
+
 function resetImportDialog() {
   importStatus.value = 'idle'
   importMessage.value = ''
@@ -140,8 +168,20 @@ watch(importDialogVisible, (open) => {
     <div class="flex items-center">
       <SvgLogoWhite width="100" />
     </div>
-    <div class="tools">
-      tools
+    <div class="tools flex items-center justify-center">
+      <ToggleGroup
+        v-model="previewModeValue"
+        type="single"
+        variant="outline"
+        size="xs"
+      >
+        <ToggleGroupItem value="desktop">
+          <Monitor class="size-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="mobile">
+          <Smartphone class="size-4" />
+        </ToggleGroupItem>
+      </ToggleGroup>
     </div>
     <div class="actions flex items-center">
       <ButtonGroup>
@@ -159,15 +199,23 @@ watch(importDialogVisible, (open) => {
               size="icon-sm"
               aria-label="More Options"
             >
-              <MoreHorizontalIcon />
+              <MoreHorizontal />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Export</DropdownMenuLabel>
+            <DropdownMenuItem @select="exportTemplateHtmlToFile">
+              HTML
+            </DropdownMenuItem>
             <DropdownMenuItem @select="exportTemplateToFile">
-              Export JSON
+              Template JSON
             </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuLabel>Import</DropdownMenuLabel>
             <DropdownMenuItem @select="openImportDialog">
-              Import JSON
+              Template JSON
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/features/editor/components/tools/BlockSettingsPanel.vue b/src/features/editor/components/tools/BlockSettingsPanel.vue
index 659f5aa..d86f5ff 100644
--- a/src/features/editor/components/tools/BlockSettingsPanel.vue
+++ b/src/features/editor/components/tools/BlockSettingsPanel.vue
@@ -19,6 +19,7 @@ import { computed } from 'vue'
 import { useSelection } from '@/features/editor/model'
 import { Input } from '@/shared/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { Switch } from '@/shared/ui/switch'
 import { ToggleGroup, ToggleGroupItem } from '@/shared/ui/toggle-group'
 
 const { selectionLevel, selectedBlock, selectedRow, selectedCell, selectedAtom } = useSelection()
@@ -173,21 +174,31 @@ function toOptionalNumber(value: string | number) {
 function normalizeSpacingValue(
   value?: SpacingTool['value'],
   fallbackPadding: [number, number, number, number] = [0, 0, 0, 0],
+  options: {
+    includeMargin?: boolean
+    includePadding?: boolean
+  } = {},
 ): SpacingTool['value'] {
-  const margin
-    = Array.isArray(value?.margin) && value.margin.length === 4
-      ? (value.margin.map(i => Number(i) || 0) as [number, number, number, number])
-      : ([0, 0, 0, 0] as [number, number, number, number])
+  const includeMargin = options.includeMargin !== false
+  const includePadding = options.includePadding !== false
 
-  const padding
-    = Array.isArray(value?.padding) && value.padding.length === 4
-      ? (value.padding.map(i => Number(i) || 0) as [number, number, number, number])
-      : ([...fallbackPadding] as [number, number, number, number])
+  const normalized: SpacingTool['value'] = {}
 
-  return {
-    margin,
-    padding,
+  if (includeMargin) {
+    normalized.margin
+      = Array.isArray(value?.margin) && value.margin.length === 4
+        ? (value.margin.map(i => Number(i) || 0) as [number, number, number, number])
+        : ([0, 0, 0, 0] as [number, number, number, number])
+  }
+
+  if (includePadding) {
+    normalized.padding
+      = Array.isArray(value?.padding) && value.padding.length === 4
+        ? (value.padding.map(i => Number(i) || 0) as [number, number, number, number])
+        : ([...fallbackPadding] as [number, number, number, number])
   }
+
+  return normalized
 }
 
 const blockAppearanceTools = computed<Tool[]>(() => {
@@ -200,7 +211,9 @@ const blockAppearanceTools = computed<Tool[]>(() => {
       key: 'padding',
       label: 'Spacing',
       type: 'spacing',
-      value: normalizeSpacingValue(selectedBlock.value.settings.spacing),
+      value: normalizeSpacingValue(selectedBlock.value.settings.spacing, [0, 0, 0, 0], {
+        includeMargin: false,
+      }),
     },
     {
       id: settingToolId('block', selectedBlock.value.id, 'backgroundColor'),
@@ -219,7 +232,7 @@ const blockAppearanceTools = computed<Tool[]>(() => {
   ]
 })
 
-const rowAppearanceTools = computed<Tool[]>(() => {
+const rowSpacingTools = computed<Tool[]>(() => {
   if (!selectedRow.value)
     return []
 
@@ -229,8 +242,28 @@ const rowAppearanceTools = computed<Tool[]>(() => {
       key: 'padding',
       label: 'Spacing',
       type: 'spacing',
-      value: normalizeSpacingValue(selectedRow.value.settings.spacing),
+      value: normalizeSpacingValue(selectedRow.value.settings.spacing, [0, 0, 0, 0], {
+        includeMargin: false,
+      }),
     },
+  ]
+})
+
+const rowHiddenOnMobile = computed<boolean>({
+  get: () => selectedRow.value?.settings.hiddenOnMobile ?? false,
+  set: (next) => {
+    if (!selectedRow.value)
+      return
+
+    selectedRow.value.settings.hiddenOnMobile = Boolean(next)
+  },
+})
+
+const rowAppearanceTools = computed<Tool[]>(() => {
+  if (!selectedRow.value)
+    return []
+
+  return [
     {
       id: settingToolId('row', selectedRow.value.id, 'gap'),
       key: 'gap',
@@ -262,6 +295,16 @@ const rowAppearanceTools = computed<Tool[]>(() => {
   ]
 })
 
+const rowCollapseOnMobile = computed<boolean>({
+  get: () => selectedRow.value?.settings.collapseOnMobile !== false,
+  set: (next) => {
+    if (!selectedRow.value)
+      return
+
+    selectedRow.value.settings.collapseOnMobile = Boolean(next)
+  },
+})
+
 const cellSpacingTools = computed<Tool[]>(() => {
   if (!selectedCell.value)
     return []
@@ -272,11 +315,23 @@ const cellSpacingTools = computed<Tool[]>(() => {
       key: 'padding',
       label: 'Spacing',
       type: 'spacing',
-      value: normalizeSpacingValue(selectedCell.value.settings.spacing),
+      value: normalizeSpacingValue(selectedCell.value.settings.spacing, [0, 0, 0, 0], {
+        includeMargin: false,
+      }),
     },
   ]
 })
 
+const cellHiddenOnMobile = computed<boolean>({
+  get: () => selectedCell.value?.settings.hiddenOnMobile ?? false,
+  set: (next) => {
+    if (!selectedCell.value)
+      return
+
+    selectedCell.value.settings.hiddenOnMobile = Boolean(next)
+  },
+})
+
 const cellAppearanceTools = computed<Tool[]>(() => {
   if (!selectedCell.value)
     return []
@@ -378,19 +433,51 @@ function atomToolId(field: string) {
   return `v2-atom::${selectedAtom.value.id}::${field}`
 }
 
+const atomHiddenOnMobile = computed<boolean>({
+  get: () => selectedAtom.value?.hiddenOnMobile ?? false,
+  set: (next) => {
+    if (!selectedAtom.value)
+      return
+
+    selectedAtom.value.hiddenOnMobile = Boolean(next)
+  },
+})
+
+function atomSpacingTool(): Tool | undefined {
+  if (!selectedAtom.value)
+    return undefined
+
+  if (selectedAtom.value.type === 'button') {
+    return {
+      id: atomToolId('spacing'),
+      key: 'spacing',
+      label: 'Spacing',
+      type: 'spacing',
+      value: normalizeSpacingValue(selectedAtom.value.spacing, selectedAtom.value.padding),
+    }
+  }
+
+  return {
+    id: atomToolId('spacing'),
+    key: 'spacing',
+    label: 'Spacing',
+    type: 'spacing',
+    value: normalizeSpacingValue(selectedAtom.value.spacing),
+  }
+}
+
+const atomSpacingTools = computed<Tool[]>(() => {
+  const spacingTool = atomSpacingTool()
+
+  return spacingTool ? [spacingTool] : []
+})
+
 const atomTools = computed<Tool[]>(() => {
   if (!selectedAtom.value)
     return []
 
   if (selectedAtom.value.type === 'text') {
     return [
-      {
-        id: atomToolId('spacing'),
-        key: 'spacing',
-        label: 'Spacing',
-        type: 'spacing',
-        value: normalizeSpacingValue(selectedAtom.value.spacing),
-      },
       {
         id: atomToolId('color'),
         key: 'mainColor',
@@ -410,13 +497,6 @@ const atomTools = computed<Tool[]>(() => {
 
   if (selectedAtom.value.type === 'button') {
     return [
-      {
-        id: atomToolId('spacing'),
-        key: 'spacing',
-        label: 'Spacing',
-        type: 'spacing',
-        value: normalizeSpacingValue(selectedAtom.value.spacing, selectedAtom.value.padding),
-      },
       {
         id: atomToolId('borderRadius'),
         key: 'borderRadius',
@@ -464,13 +544,6 @@ const atomTools = computed<Tool[]>(() => {
 
   if (selectedAtom.value.type === 'image') {
     return [
-      {
-        id: atomToolId('spacing'),
-        key: 'spacing',
-        label: 'Spacing',
-        type: 'spacing',
-        value: normalizeSpacingValue(selectedAtom.value.spacing),
-      },
       {
         id: atomToolId('borderRadius'),
         key: 'borderRadius',
@@ -496,13 +569,6 @@ const atomTools = computed<Tool[]>(() => {
 
   if (selectedAtom.value.type === 'menu') {
     return [
-      {
-        id: atomToolId('spacing'),
-        key: 'spacing',
-        label: 'Spacing',
-        type: 'spacing',
-        value: normalizeSpacingValue(selectedAtom.value.spacing),
-      },
       {
         id: atomToolId('gap'),
         key: 'gap',
@@ -538,13 +604,6 @@ const atomTools = computed<Tool[]>(() => {
   }
 
   return [
-    {
-      id: atomToolId('spacing'),
-      key: 'spacing',
-      label: 'Spacing',
-      type: 'spacing',
-      value: normalizeSpacingValue(selectedAtom.value.spacing),
-    },
     {
       id: atomToolId('height'),
       key: 'height',
@@ -582,6 +641,26 @@ const atomTools = computed<Tool[]>(() => {
         title="Row"
       >
         <div class="space-y-3 pb-2">
+          <EditorComponentTools :tools="rowSpacingTools" />
+
+          <div class="space-y-3">
+            <EditorToolLabel>View</EditorToolLabel>
+            <div class="flex gap-6 -mt-2">
+              <div>
+                <EditorToolLabel type="secondary">
+                  Hide on Mobile
+                </EditorToolLabel>
+                <Switch v-model="rowHiddenOnMobile" />
+              </div>
+              <div>
+                <EditorToolLabel type="secondary">
+                  Collapse on Mobile
+                </EditorToolLabel>
+                <Switch v-model="rowCollapseOnMobile" />
+              </div>
+            </div>
+          </div>
+
           <EditorComponentTools :tools="rowAppearanceTools" />
         </div>
       </EditorPanelItem>
@@ -594,6 +673,15 @@ const atomTools = computed<Tool[]>(() => {
       >
         <div class="space-y-3 pb-2">
           <EditorComponentTools :tools="cellSpacingTools" />
+          <div class="space-y-3">
+            <EditorToolLabel>View</EditorToolLabel>
+            <div>
+              <EditorToolLabel type="secondary">
+                Hide on Mobile
+              </EditorToolLabel>
+              <Switch v-model="cellHiddenOnMobile" />
+            </div>
+          </div>
 
           <div class="grid grid-cols-[minmax(0,120px)_minmax(0,1fr)] gap-4">
             <div>
@@ -735,6 +823,21 @@ const atomTools = computed<Tool[]>(() => {
         :title="selectedAtom.type.charAt(0).toUpperCase() + selectedAtom.type.slice(1)"
       >
         <div class="space-y-3 pb-2">
+          <EditorComponentTools
+            v-if="atomSpacingTools.length"
+            :tools="atomSpacingTools"
+          />
+
+          <div class="space-y-3">
+            <EditorToolLabel>View</EditorToolLabel>
+            <div>
+              <EditorToolLabel type="secondary">
+                Hide on Mobile
+              </EditorToolLabel>
+              <Switch v-model="atomHiddenOnMobile" />
+            </div>
+          </div>
+
           <EditorComponentTools
             v-if="atomTools.length"
             :tools="atomTools"
diff --git a/src/features/editor/components/tools/spacing/SpacingTool.vue b/src/features/editor/components/tools/spacing/SpacingTool.vue
index 82c3a90..150ce2a 100644
--- a/src/features/editor/components/tools/spacing/SpacingTool.vue
+++ b/src/features/editor/components/tools/spacing/SpacingTool.vue
@@ -55,6 +55,8 @@ watch(
     localMarginLeft.value,
   ],
   (v) => {
+    const margin = props.value.margin ? (v as SpacingTool['value']['margin']) : props.value.margin
+
     const padding = props.value.padding
       ? ([
           localPaddingTop.value,
@@ -66,7 +68,7 @@ watch(
 
     updateToolById<SpacingTool>(props.id, 'value', {
       padding,
-      margin: v as SpacingTool['value']['margin'],
+      margin,
     })
   },
 )
diff --git a/src/features/editor/model/state.ts b/src/features/editor/model/state.ts
index 7d3ac02..0565535 100644
--- a/src/features/editor/model/state.ts
+++ b/src/features/editor/model/state.ts
@@ -1,4 +1,4 @@
-import type { CanvasBlockInstance, ComponentList, GeneralTool } from './types'
+import type { CanvasBlockInstance, ComponentList, GeneralTool, PreviewMode } from './types'
 import type { TemplateValidationIssue } from '@/entities/template'
 import { reactive, ref, shallowRef } from 'vue'
 import { content, header, menu } from '@/features/email-preview/catalog/load-blocks'
@@ -16,6 +16,7 @@ export const list = shallowRef<ComponentList[]>([
 export const installed = ref<CanvasBlockInstance[]>([])
 export const editableId = ref<string>()
 export const isDragging = ref(false)
+export const previewMode = ref<PreviewMode>('desktop')
 export const templateImportIssues = ref<TemplateValidationIssue[]>([])
 
 export const general = reactive<GeneralTool>({
diff --git a/src/features/editor/model/types.ts b/src/features/editor/model/types.ts
index 3419053..6f962f3 100644
--- a/src/features/editor/model/types.ts
+++ b/src/features/editor/model/types.ts
@@ -30,3 +30,4 @@ export type {
 
 export type BlockSelectionLevel = 'block' | 'row' | 'cell' | 'atom'
 export type SidebarTab = 'components' | 'tree'
+export type PreviewMode = 'desktop' | 'mobile'
diff --git a/src/features/editor/model/use-canvas.ts b/src/features/editor/model/use-canvas.ts
index 1bced47..43be1b5 100644
--- a/src/features/editor/model/use-canvas.ts
+++ b/src/features/editor/model/use-canvas.ts
@@ -4,7 +4,15 @@ import { nanoid } from 'nanoid'
 import { computed } from 'vue'
 import { createAtom, createBlockNode, createCellNode, createRowNode } from '@/entities/block'
 import { clone } from '@/shared/lib/clone'
-import { editableId, general, installed, isDragging, list, templateImportIssues } from './state'
+import {
+  editableId,
+  general,
+  installed,
+  isDragging,
+  list,
+  previewMode,
+  templateImportIssues,
+} from './state'
 import {
   DEFAULT_MENU_ATOM_GAP,
   DEFAULT_MENU_IMAGE_ITEM,
@@ -446,6 +454,16 @@ function _createCanvas() {
         return true
       }
 
+      if (field === 'hiddenOnMobile') {
+        row.settings.hiddenOnMobile = Boolean(value)
+        return true
+      }
+
+      if (field === 'collapseOnMobile') {
+        row.settings.collapseOnMobile = Boolean(value)
+        return true
+      }
+
       if (field === 'height') {
         row.settings.height = toOptionalPositiveNumber(value)
         return true
@@ -480,6 +498,11 @@ function _createCanvas() {
         return true
       }
 
+      if (field === 'hiddenOnMobile') {
+        cell.settings.hiddenOnMobile = Boolean(value)
+        return true
+      }
+
       if (field === 'borderRadius') {
         cell.settings.borderRadius = toNonNegativeFiniteNumber(value)
         return true
@@ -505,6 +528,11 @@ function _createCanvas() {
     if (scope !== 'v2-atom' || atomId !== atom.id || !field)
       return false
 
+    if (field === 'hiddenOnMobile') {
+      atom.hiddenOnMobile = Boolean(value)
+      return true
+    }
+
     if (atom.type === 'text') {
       if (field === 'content') {
         atom.value = String(value ?? '')
@@ -771,6 +799,7 @@ function _createCanvas() {
     installed,
     editableId,
     isDragging,
+    previewMode,
     general,
     templateImportIssues,
     editableIndex,
diff --git a/src/features/editor/model/use-template-io.ts b/src/features/editor/model/use-template-io.ts
index b6636a5..bc36610 100644
--- a/src/features/editor/model/use-template-io.ts
+++ b/src/features/editor/model/use-template-io.ts
@@ -3,12 +3,15 @@ import type {
   TemplateImportMode,
   TemplateValidationIssue,
 } from '@/entities/template'
+import { render as renderEmailHtml } from '@mysigmail/vue-email-components'
+import { defineComponent, h } from 'vue'
 import {
   createRuntimeComponents,
   createTemplateExportPayload,
   parseTemplateExportJson,
   parseTemplateExportPayload,
 } from '@/entities/template'
+import EmailExportDocument from '@/features/email-preview/ui/EmailExportDocument.vue'
 import { clone } from '@/shared/lib/clone'
 import { general, installed, templateImportIssues } from './state'
 import { usePersistence } from './use-persistence'
@@ -19,6 +22,28 @@ let _instance: ReturnType<typeof _createTemplateIO> | null = null
 function _createTemplateIO() {
   let ignoreTemplatePersist = false
 
+  function isConditionalEmailComment(content: string) {
+    const normalized = content.trim().toLowerCase()
+    return (
+      normalized.startsWith('[if')
+      || normalized.startsWith('[endif]')
+      || normalized.startsWith('<![endif]')
+    )
+  }
+
+  function sanitizeExportedHtml(html: string) {
+    const withoutTechnicalAttrs = html
+      .replace(/\sdata-node-id="[^"]*"/g, '')
+      .replace(/\sdata-v-[\w-]+="[^"]*"/g, '')
+
+    const withoutTechnicalComments = withoutTechnicalAttrs.replace(
+      /<!--([\s\S]*?)-->/g,
+      (full, content: string) => (isConditionalEmailComment(content) ? full : ''),
+    )
+
+    return withoutTechnicalComments.replace(/\n{3,}/g, '\n\n').trim()
+  }
+
   function withPersistLock<T>(task: () => T): T {
     ignoreTemplatePersist = true
     try {
@@ -64,6 +89,25 @@ function _createTemplateIO() {
     return JSON.stringify(exportTemplate(title), null, 2)
   }
 
+  function exportTemplateHtml() {
+    const componentsSnapshot = clone(installed.value)
+    const generalSnapshot = clone(general)
+
+    const ExportRoot = defineComponent({
+      name: 'TemplateExportRoot',
+      setup() {
+        return () =>
+          h(EmailExportDocument, {
+            components: componentsSnapshot,
+            general: generalSnapshot,
+          })
+      },
+    })
+
+    const html = renderEmailHtml(ExportRoot)
+    return sanitizeExportedHtml(html)
+  }
+
   function triggerPersist() {
     usePersistence().persistTemplateToLocalStorage()
   }
@@ -131,6 +175,7 @@ function _createTemplateIO() {
   return {
     applyImportedTemplate,
     exportTemplate,
+    exportTemplateHtml,
     exportTemplateJson,
     importTemplate,
     importTemplateFromJson,
diff --git a/src/features/editor/ui/EditorCanvas.vue b/src/features/editor/ui/EditorCanvas.vue
index 620a444..82f4630 100644
--- a/src/features/editor/ui/EditorCanvas.vue
+++ b/src/features/editor/ui/EditorCanvas.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
-import { MBody, MContainer, MHtml, MPreview } from '@mysigmail/vue-email-components'
+import { MBody, MContainer, MHead, MHtml, MPreview } from '@mysigmail/vue-email-components'
 import Sortable from 'sortablejs'
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useCanvas, useSelection } from '@/features/editor/model'
 import { addGhost, BlockRenderer, removeGhost } from '@/features/email-preview'
+import { EMAIL_RESPONSIVE_CSS } from '@/features/email-preview/constants'
 
-const { installed, isDragging, moveComponent, general, isCanvasBlockInstance } = useCanvas()
+const { installed, isDragging, moveComponent, general, previewMode, isCanvasBlockInstance }
+  = useCanvas()
 
 const {
   selectionLevel,
@@ -33,15 +35,19 @@ let overlayRafId: number | undefined
 let overlayMutationObserver: MutationObserver | undefined
 let overlayResizeObserver: ResizeObserver | undefined
 
-const EMAIL_TEMPLATE_WIDTH = 600
+const DESKTOP_TEMPLATE_WIDTH = 600
+const MOBILE_TEMPLATE_WIDTH = 375
+const HEAD_STYLE_TAG = 'style'
 
-const container: CSSProperties = {
-  position: 'relative',
-  width: `${EMAIL_TEMPLATE_WIDTH}px`,
-  maxWidth: '100%',
-  margin: '0 auto',
-  tableLayout: 'fixed',
-}
+const containerStyle = computed<CSSProperties>(() => {
+  return {
+    position: 'relative',
+    width: `${previewMode.value === 'mobile' ? MOBILE_TEMPLATE_WIDTH : DESKTOP_TEMPLATE_WIDTH}px`,
+    maxWidth: '100%',
+    margin: '0 auto',
+    tableLayout: 'fixed',
+  }
+})
 
 const style = computed<CSSProperties>(() => {
   return {
@@ -55,6 +61,13 @@ const style = computed<CSSProperties>(() => {
   }
 })
 
+const bodyClass = computed(() => {
+  return {
+    'p-body': true,
+    'p-preview-mobile': previewMode.value === 'mobile',
+  }
+})
+
 const selectedNodeId = computed(() => {
   switch (selectionLevel.value) {
     case 'block':
@@ -241,12 +254,17 @@ watch(
 
 <template>
   <MHtml class="p-html">
+    <MHead>
+      <component :is="HEAD_STYLE_TAG">
+        {{ EMAIL_RESPONSIVE_CSS }}
+      </component>
+    </MHead>
     <MPreview :text="general.previewText" />
     <MBody
       :style="style"
-      class="p-body"
+      :class="bodyClass"
     >
-      <MContainer :style="container">
+      <MContainer :style="containerStyle">
         <div
           ref="surfaceRef"
           class="p-canvas-surface"
diff --git a/src/features/editor/ui/TheEditor.vue b/src/features/editor/ui/TheEditor.vue
index b4b2cbc..d97bffb 100644
--- a/src/features/editor/ui/TheEditor.vue
+++ b/src/features/editor/ui/TheEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useCanvas, usePersistence, useSelection } from '@/features/editor/model'
 import Editor from '@/features/editor/ui/EditorCanvas.vue'
 import { renderToShadowDom } from '@/shared/lib/shadow-dom'
@@ -10,6 +10,15 @@ const { general } = useCanvas()
 const { resetSelection } = useSelection()
 const { hydrateTemplateFromLocalStorage } = usePersistence()
 
+const previewHostStyle = computed(() => {
+  return {
+    backgroundColor: general.background.color,
+    width: '100%',
+    maxWidth: '100%',
+    justifySelf: 'stretch',
+  }
+})
+
 onMounted(() => {
   hydrateTemplateFromLocalStorage()
 
@@ -30,9 +39,7 @@ onMounted(() => {
     <TheSidebar />
     <div
       ref="previewRef"
-      :style="{
-        backgroundColor: general.background.color,
-      }"
+      :style="previewHostStyle"
     />
     <EditorTools />
   </div>
diff --git a/src/features/email-preview/catalog/block.schema.json b/src/features/email-preview/catalog/block.schema.json
index ea95ac8..a724929 100644
--- a/src/features/email-preview/catalog/block.schema.json
+++ b/src/features/email-preview/catalog/block.schema.json
@@ -66,6 +66,7 @@
         "type": { "const": "text" },
         "value": { "type": "string", "description": "HTML-контент текстового атома" },
         "color": { "type": "string" },
+        "hiddenOnMobile": { "type": "boolean" },
         "spacing": { "$ref": "#/$defs/SpacingValue" }
       }
     },
@@ -83,6 +84,7 @@
         "fontSize": { "type": "number" },
         "borderRadius": { "type": "number" },
         "padding": { "$ref": "#/$defs/Insets" },
+        "hiddenOnMobile": { "type": "boolean" },
         "spacing": { "$ref": "#/$defs/SpacingValue" }
       }
     },
@@ -95,6 +97,7 @@
         "type": { "const": "divider" },
         "color": { "type": "string" },
         "height": { "type": "number" },
+        "hiddenOnMobile": { "type": "boolean" },
         "spacing": { "$ref": "#/$defs/SpacingValue" }
       }
     },
@@ -111,6 +114,7 @@
         "width": { "type": "number" },
         "height": { "type": "number" },
         "borderRadius": { "type": "number" },
+        "hiddenOnMobile": { "type": "boolean" },
         "spacing": { "$ref": "#/$defs/SpacingValue" }
       }
     },
@@ -149,6 +153,7 @@
         "type": { "const": "menu" },
         "itemType": { "type": "string", "enum": ["text", "image"] },
         "gap": { "type": "number" },
+        "hiddenOnMobile": { "type": "boolean" },
         "items": {
           "type": "array",
           "items": {
@@ -177,6 +182,7 @@
         "backgroundColor": { "type": "string" },
         "backgroundImage": { "$ref": "#/$defs/BackgroundImageValue" },
         "link": { "type": "string" },
+        "hiddenOnMobile": { "type": "boolean" },
         "verticalAlign": { "type": "string", "enum": ["top", "middle", "bottom"] },
         "horizontalAlign": { "type": "string", "enum": ["left", "center", "right"] },
         "borderRadius": { "type": "number" },
@@ -191,6 +197,8 @@
         "spacing": { "$ref": "#/$defs/SpacingValue" },
         "backgroundColor": { "type": "string" },
         "backgroundImage": { "$ref": "#/$defs/BackgroundImageValue" },
+        "hiddenOnMobile": { "type": "boolean" },
+        "collapseOnMobile": { "type": "boolean" },
         "height": { "type": "number" },
         "gap": { "type": "number" }
       },
diff --git a/src/features/email-preview/catalog/blocks/content1.json b/src/features/email-preview/catalog/blocks/content1.json
index 489f337..4660d76 100644
--- a/src/features/email-preview/catalog/blocks/content1.json
+++ b/src/features/email-preview/catalog/blocks/content1.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content2.json b/src/features/email-preview/catalog/blocks/content2.json
index 6baa821..4c05f9d 100644
--- a/src/features/email-preview/catalog/blocks/content2.json
+++ b/src/features/email-preview/catalog/blocks/content2.json
@@ -5,22 +5,22 @@
   "type": "content",
   "preview": "img/components/content-2.png",
   "block": {
-    "id": "rP1cX6zx",
+    "id": "hsA4vpdM",
     "label": "Content 2",
     "settings": {
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
     },
     "rows": [
       {
-        "id": "T8NnLCgM",
+        "id": "s-xJMRet",
         "settings": {
           "spacing": {
             "padding": [
@@ -35,7 +35,7 @@
         },
         "cells": [
           {
-            "id": "KmZA3_cP",
+            "id": "wUhoZZ7R",
             "settings": {
               "spacing": {},
               "backgroundColor": "transparent",
@@ -44,7 +44,7 @@
             },
             "atoms": [
               {
-                "id": "lZ1M_Ufc",
+                "id": "i6ZZ65s-",
                 "type": "text",
                 "value": "<p style=\"text-align: left\"><span style=\"color: rgb(159, 163, 167); font-size: 14px\">12 July '19</span></p><p style=\"text-align: left\"><strong><span style=\"font-size: 24px\">How Music Affects</span></strong><br><strong><span style=\"font-size: 24px\">Your Productivity</span></strong></p>",
                 "color": "#111111",
@@ -64,10 +64,43 @@
                 }
               }
             ],
-            "rows": []
+            "rows": [
+              {
+                "id": "7ZHGpCa-",
+                "settings": {
+                  "spacing": {},
+                  "backgroundColor": "transparent",
+                  "hiddenOnMobile": false,
+                  "collapseOnMobile": true,
+                  "gap": 0
+                },
+                "cells": [
+                  {
+                    "id": "04wBdNwk",
+                    "settings": {
+                      "spacing": {},
+                      "backgroundColor": "transparent",
+                      "hiddenOnMobile": false,
+                      "verticalAlign": "top",
+                      "horizontalAlign": "left",
+                      "borderRadius": 5,
+                      "backgroundImage": {
+                        "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg",
+                        "repeat": "no-repeat",
+                        "size": "cover",
+                        "position": "center"
+                      },
+                      "height": 200
+                    },
+                    "atoms": [],
+                    "rows": []
+                  }
+                ]
+              }
+            ]
           },
           {
-            "id": "76v_0S_Q",
+            "id": "yPslkSrr",
             "settings": {
               "spacing": {},
               "backgroundColor": "transparent",
@@ -76,7 +109,7 @@
             },
             "atoms": [
               {
-                "id": "U9OIgtDW",
+                "id": "A0X_Pkap",
                 "type": "text",
                 "value": "<p style=\"text-align: left\"><span style=\"color: rgb(159, 163, 167); font-size: 14px\">12 July '19</span></p><p style=\"text-align: left\"><strong><span style=\"font-size: 24px\">Background Music for</span></strong><br><strong><span style=\"font-size: 24px\">Coding</span></strong></p>",
                 "color": "#111111",
@@ -96,57 +129,40 @@
                 }
               }
             ],
-            "rows": []
-          }
-        ]
-      },
-      {
-        "id": "ax_w6WxT",
-        "settings": {
-          "spacing": {},
-          "backgroundColor": "transparent",
-          "gap": 20
-        },
-        "cells": [
-          {
-            "id": "D0oyoFGe",
-            "settings": {
-              "spacing": {},
-              "backgroundColor": "transparent",
-              "link": "https://example.com",
-              "verticalAlign": "top",
-              "horizontalAlign": "left",
-              "borderRadius": 5,
-              "backgroundImage": {
-                "url": "img/juja-han-HU-uL54pfQI-unsplash.jpg",
-                "position": "center",
-                "repeat": "no-repeat",
-                "size": "cover"
-              },
-              "height": 200
-            },
-            "atoms": [],
-            "rows": []
-          },
-          {
-            "id": "D9YxBJm0",
-            "settings": {
-              "spacing": {},
-              "backgroundColor": "transparent",
-              "link": "https://example.com",
-              "verticalAlign": "top",
-              "horizontalAlign": "left",
-              "borderRadius": 5,
-              "backgroundImage": {
-                "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg",
-                "position": "center",
-                "repeat": "no-repeat",
-                "size": "cover"
-              },
-              "height": 200
-            },
-            "atoms": [],
-            "rows": []
+            "rows": [
+              {
+                "id": "0xol4F9Y",
+                "settings": {
+                  "spacing": {},
+                  "backgroundColor": "transparent",
+                  "hiddenOnMobile": false,
+                  "collapseOnMobile": true,
+                  "gap": 0
+                },
+                "cells": [
+                  {
+                    "id": "dGlGDtYb",
+                    "settings": {
+                      "spacing": {},
+                      "backgroundColor": "transparent",
+                      "hiddenOnMobile": false,
+                      "verticalAlign": "top",
+                      "horizontalAlign": "left",
+                      "borderRadius": 5,
+                      "backgroundImage": {
+                        "url": "img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg",
+                        "repeat": "no-repeat",
+                        "size": "cover",
+                        "position": "center"
+                      },
+                      "height": 200
+                    },
+                    "atoms": [],
+                    "rows": []
+                  }
+                ]
+              }
+            ]
           }
         ]
       }
diff --git a/src/features/email-preview/catalog/blocks/content3.json b/src/features/email-preview/catalog/blocks/content3.json
index bff2dfa..052b304 100644
--- a/src/features/email-preview/catalog/blocks/content3.json
+++ b/src/features/email-preview/catalog/blocks/content3.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content4.json b/src/features/email-preview/catalog/blocks/content4.json
index 241c662..a06b14f 100644
--- a/src/features/email-preview/catalog/blocks/content4.json
+++ b/src/features/email-preview/catalog/blocks/content4.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content5.json b/src/features/email-preview/catalog/blocks/content5.json
index 3458ecd..cf083d9 100644
--- a/src/features/email-preview/catalog/blocks/content5.json
+++ b/src/features/email-preview/catalog/blocks/content5.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content6.json b/src/features/email-preview/catalog/blocks/content6.json
index 52d9bd0..78377bb 100644
--- a/src/features/email-preview/catalog/blocks/content6.json
+++ b/src/features/email-preview/catalog/blocks/content6.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222"
diff --git a/src/features/email-preview/catalog/blocks/content7.json b/src/features/email-preview/catalog/blocks/content7.json
index 3cd2330..9249746 100644
--- a/src/features/email-preview/catalog/blocks/content7.json
+++ b/src/features/email-preview/catalog/blocks/content7.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content8.json b/src/features/email-preview/catalog/blocks/content8.json
index 5625b78..dab5852 100644
--- a/src/features/email-preview/catalog/blocks/content8.json
+++ b/src/features/email-preview/catalog/blocks/content8.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/content9.json b/src/features/email-preview/catalog/blocks/content9.json
index d2205d5..61ccbec 100644
--- a/src/features/email-preview/catalog/blocks/content9.json
+++ b/src/features/email-preview/catalog/blocks/content9.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/header1.json b/src/features/email-preview/catalog/blocks/header1.json
index 65b72cc..f0fffb1 100644
--- a/src/features/email-preview/catalog/blocks/header1.json
+++ b/src/features/email-preview/catalog/blocks/header1.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222",
@@ -30,7 +30,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/header2.json b/src/features/email-preview/catalog/blocks/header2.json
index 71223ec..01d6a12 100644
--- a/src/features/email-preview/catalog/blocks/header2.json
+++ b/src/features/email-preview/catalog/blocks/header2.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -37,7 +37,8 @@
             ]
           },
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
@@ -151,9 +152,9 @@
                 ],
                 "padding": [
                   140,
+                  0,
                   20,
-                  20,
-                  20
+                  0
                 ]
               },
               "backgroundColor": "transparent",
@@ -182,9 +183,9 @@
                   ],
                   "padding": [
                     0,
+                    20,
                     0,
-                    0,
-                    0
+                    20
                   ]
                 }
               }
diff --git a/src/features/email-preview/catalog/blocks/header3.json b/src/features/email-preview/catalog/blocks/header3.json
index 35f01a4..c8fbead 100644
--- a/src/features/email-preview/catalog/blocks/header3.json
+++ b/src/features/email-preview/catalog/blocks/header3.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -96,9 +96,9 @@
                 ],
                 "padding": [
                   45,
-                  20,
+                  0,
                   16,
-                  20
+                  0
                 ]
               },
               "backgroundColor": "transparent",
@@ -127,9 +127,9 @@
                   ],
                   "padding": [
                     0,
+                    20,
                     0,
-                    0,
-                    0
+                    20
                   ]
                 }
               },
diff --git a/src/features/email-preview/catalog/blocks/header4.json b/src/features/email-preview/catalog/blocks/header4.json
index b4e0f3f..61844e3 100644
--- a/src/features/email-preview/catalog/blocks/header4.json
+++ b/src/features/email-preview/catalog/blocks/header4.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
diff --git a/src/features/email-preview/catalog/blocks/header5.json b/src/features/email-preview/catalog/blocks/header5.json
index da39a85..a0758fa 100644
--- a/src/features/email-preview/catalog/blocks/header5.json
+++ b/src/features/email-preview/catalog/blocks/header5.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -169,8 +169,7 @@
                     0,
                     0
                   ]
-                },
-                "height": 300
+                }
               }
             ],
             "rows": []
diff --git a/src/features/email-preview/catalog/blocks/header6.json b/src/features/email-preview/catalog/blocks/header6.json
index 60d3704..47fffec 100644
--- a/src/features/email-preview/catalog/blocks/header6.json
+++ b/src/features/email-preview/catalog/blocks/header6.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           40,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -267,7 +267,8 @@
             ]
           },
           "backgroundColor": "transparent",
-          "gap": 12
+          "gap": 12,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu1-dark.json b/src/features/email-preview/catalog/blocks/menu1-dark.json
index 32e93d8..448c874 100644
--- a/src/features/email-preview/catalog/blocks/menu1-dark.json
+++ b/src/features/email-preview/catalog/blocks/menu1-dark.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu1-light.json b/src/features/email-preview/catalog/blocks/menu1-light.json
index 2e942b7..49566bf 100644
--- a/src/features/email-preview/catalog/blocks/menu1-light.json
+++ b/src/features/email-preview/catalog/blocks/menu1-light.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu2-dark.json b/src/features/email-preview/catalog/blocks/menu2-dark.json
index bbc2549..749d6e4 100644
--- a/src/features/email-preview/catalog/blocks/menu2-dark.json
+++ b/src/features/email-preview/catalog/blocks/menu2-dark.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu2-light.json b/src/features/email-preview/catalog/blocks/menu2-light.json
index 1b4a9de..ac2f838 100644
--- a/src/features/email-preview/catalog/blocks/menu2-light.json
+++ b/src/features/email-preview/catalog/blocks/menu2-light.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu3-dark.json b/src/features/email-preview/catalog/blocks/menu3-dark.json
index 94d71f9..3cf1fe5 100644
--- a/src/features/email-preview/catalog/blocks/menu3-dark.json
+++ b/src/features/email-preview/catalog/blocks/menu3-dark.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu3-light.json b/src/features/email-preview/catalog/blocks/menu3-light.json
index f18aac8..b2fcc38 100644
--- a/src/features/email-preview/catalog/blocks/menu3-light.json
+++ b/src/features/email-preview/catalog/blocks/menu3-light.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu4-dark.json b/src/features/email-preview/catalog/blocks/menu4-dark.json
index 11203d0..0f027ce 100644
--- a/src/features/email-preview/catalog/blocks/menu4-dark.json
+++ b/src/features/email-preview/catalog/blocks/menu4-dark.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#222222"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/catalog/blocks/menu4-light.json b/src/features/email-preview/catalog/blocks/menu4-light.json
index 5e94a39..c7beab4 100644
--- a/src/features/email-preview/catalog/blocks/menu4-light.json
+++ b/src/features/email-preview/catalog/blocks/menu4-light.json
@@ -11,9 +11,9 @@
       "spacing": {
         "padding": [
           30,
-          35,
+          24,
           30,
-          35
+          24
         ]
       },
       "backgroundColor": "#FFFFFF"
@@ -24,7 +24,8 @@
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "gap": 0,
+          "collapseOnMobile": false
         },
         "cells": [
           {
diff --git a/src/features/email-preview/constants.ts b/src/features/email-preview/constants.ts
index 010224a..f487a87 100644
--- a/src/features/email-preview/constants.ts
+++ b/src/features/email-preview/constants.ts
@@ -8,3 +8,30 @@ export const COLOR = {
     dark: '#444444',
   },
 }
+
+export const EMAIL_RESPONSIVE_CSS = `
+@media only screen and (max-width: 600px) {
+  td.e-col-mobile-collapse {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  td.e-col-gap-mobile-collapse {
+    display: block !important;
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    height: var(--e-row-gap, 0px) !important;
+    min-height: var(--e-row-gap, 0px) !important;
+    line-height: 0 !important;
+  }
+
+  .e-mobile-hidden {
+    display: none !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+    mso-hide: all !important;
+  }
+}
+`
diff --git a/src/features/email-preview/index.ts b/src/features/email-preview/index.ts
index 5f63c8f..140e54b 100644
--- a/src/features/email-preview/index.ts
+++ b/src/features/email-preview/index.ts
@@ -3,3 +3,4 @@ export { saveBlockAsJson } from './catalog/save-block'
 export * from './lib/utils'
 export { default as BlockRenderer } from './ui/BlockRenderer.vue'
 export { default as BlockRendererRowNode } from './ui/BlockRendererRowNode.vue'
+export { default as EmailExportDocument } from './ui/EmailExportDocument.vue'
diff --git a/src/features/email-preview/ui/BlockRendererRowNode.vue b/src/features/email-preview/ui/BlockRendererRowNode.vue
index e3add81..d001566 100644
--- a/src/features/email-preview/ui/BlockRendererRowNode.vue
+++ b/src/features/email-preview/ui/BlockRendererRowNode.vue
@@ -129,7 +129,7 @@ function normalizeGap(value: unknown) {
 
 function rowStyle(row: RowNode): CSSProperties {
   const s = row.settings
-  const style: CSSProperties = {
+  const style: CSSProperties & Record<string, string> = {
     width: '100%',
     tableLayout: 'fixed',
   }
@@ -152,11 +152,78 @@ function rowStyle(row: RowNode): CSSProperties {
     style.backgroundPosition = s.backgroundImage.position
   }
 
+  style['--e-row-gap'] = `${normalizeGap(s.gap)}px`
+
   return style
 }
 
+function isRowHiddenOnMobile(row: RowNode) {
+  return Boolean(row.settings.hiddenOnMobile)
+}
+
+function rowClass(row: RowNode) {
+  return {
+    'e-mobile-hidden': isRowHiddenOnMobile(row),
+  }
+}
+
+function isCellHiddenOnMobile(cell: CellNode) {
+  return Boolean(cell.settings.hiddenOnMobile)
+}
+
+function isRowCollapseOnMobile(row: RowNode) {
+  return row.settings.collapseOnMobile !== false
+}
+
+function cellClass(cell: CellNode, row: RowNode) {
+  const hiddenOnMobile = isRowHiddenOnMobile(row) || isCellHiddenOnMobile(cell)
+
+  return {
+    'e-col': true,
+    'e-mobile-hidden': hiddenOnMobile,
+    'e-col-mobile-collapse': isRowCollapseOnMobile(row),
+  }
+}
+
+function shouldCollapseSpacer(cells: CellNode[], index: number, row: RowNode) {
+  if (isRowHiddenOnMobile(row))
+    return false
+
+  const current = cells[index]
+  const next = cells[index + 1]
+
+  if (!current || !next)
+    return false
+
+  if (isCellHiddenOnMobile(current) || isCellHiddenOnMobile(next))
+    return false
+
+  return isRowCollapseOnMobile(row)
+}
+
+function shouldHideSpacerOnMobile(cells: CellNode[], index: number, row: RowNode) {
+  if (isRowHiddenOnMobile(row))
+    return true
+
+  const current = cells[index]
+  const next = cells[index + 1]
+
+  if (!current || !next)
+    return false
+
+  return isCellHiddenOnMobile(current) || isCellHiddenOnMobile(next)
+}
+
+function spacerClass(cells: CellNode[], index: number, row: RowNode) {
+  return {
+    'e-col-gap': true,
+    'e-col-gap-mobile-collapse': shouldCollapseSpacer(cells, index, row),
+    'e-mobile-hidden': shouldHideSpacerOnMobile(cells, index, row),
+  }
+}
+
 function shouldDistributeAutoWidth(items: CellNode[]) {
-  return items.every(item => item.settings.width === undefined)
+  return items.length > 1 && items.every(item => item.settings.width === undefined)
 }
 
 function itemStyle(item: CellNode, items: CellNode[], rawGap: number): CSSProperties {
@@ -238,6 +305,13 @@ function emptyLinkedItemStyle(item: CellNode): CSSProperties {
   }
 }
 
+function atomWrapperClass(atom: Atom) {
+  return {
+    'e-atom': true,
+    'e-mobile-hidden': Boolean(atom.hiddenOnMobile),
+  }
+}
+
 function selectRowNode(rowId: string) {
   selectRow(props.blockId, rowId)
 }
@@ -253,6 +327,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
 <template>
   <MRow
+    :class="rowClass(row)"
     :style="rowStyle(row)"
     :data-node-id="`row:${row.id}`"
     @click.stop="selectRowNode(row.id)"
@@ -262,6 +337,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
       :key="cell.id"
     >
       <MColumn
+        :class="cellClass(cell, row)"
         :style="itemStyle(cell, row.cells, row.settings.gap)"
         :data-node-id="`cell:${cell.id}`"
         @click.stop="selectCellNode(row.id, cell.id)"
@@ -281,6 +357,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
           >
             <div
               v-if="atom.type === 'text'"
+              :class="atomWrapperClass(atom)"
               :data-node-id="`atom:${atom.id}`"
               :style="textAtomStyle(atom)"
               @click.stop="selectAtomNode(row.id, cell.id, atom.id)"
@@ -289,6 +366,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
             <div
               v-else-if="atom.type === 'button'"
+              :class="atomWrapperClass(atom)"
               :data-node-id="`atom:${atom.id}`"
               :style="atomSpacingStyle(atom, { includePadding: false })"
               @click.stop="selectAtomNode(row.id, cell.id, atom.id)"
@@ -303,6 +381,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
             <div
               v-else-if="atom.type === 'divider'"
+              :class="atomWrapperClass(atom)"
               :data-node-id="`atom:${atom.id}`"
               :style="atomSpacingStyle(atom)"
               @click.stop="selectAtomNode(row.id, cell.id, atom.id)"
@@ -321,6 +400,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
             <div
               v-else-if="atom.type === 'image'"
+              :class="atomWrapperClass(atom)"
               :data-node-id="`atom:${atom.id}`"
               :style="atomSpacingStyle(atom)"
               @click.stop="selectAtomNode(row.id, cell.id, atom.id)"
@@ -339,6 +419,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
             <div
               v-else-if="atom.type === 'menu'"
+              :class="atomWrapperClass(atom)"
               :data-node-id="`atom:${atom.id}`"
               :style="atomSpacingStyle(atom)"
               @click.stop="selectAtomNode(row.id, cell.id, atom.id)"
@@ -380,6 +461,7 @@ function selectAtomNode(rowId: string, cellId: string, atomId: string) {
 
       <MColumn
         v-if="shouldRenderSpacer(cellIndex, row.cells.length, row.settings.gap)"
+        :class="spacerClass(row.cells, cellIndex, row)"
         :style="spacerStyle(row.settings.gap)"
         aria-hidden="true"
       >
diff --git a/src/features/email-preview/ui/EmailExportDocument.vue b/src/features/email-preview/ui/EmailExportDocument.vue
new file mode 100644
index 0000000..d4e992d
--- /dev/null
+++ b/src/features/email-preview/ui/EmailExportDocument.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { CanvasBlockInstance, GeneralTool } from '@/entities/template'
+import { MBody, MContainer, MHead, MHtml, MPreview } from '@mysigmail/vue-email-components'
+import { computed } from 'vue'
+import { EMAIL_RESPONSIVE_CSS } from '@/features/email-preview/constants'
+import ExportBlockRenderer from '@/features/email-preview/ui/ExportBlockRenderer.vue'
+
+interface Props {
+  components: CanvasBlockInstance[]
+  general: GeneralTool
+}
+
+const props = defineProps<Props>()
+
+const EMAIL_TEMPLATE_WIDTH = 600
+const HEAD_STYLE_TAG = 'style'
+
+const container: CSSProperties = {
+  width: `${EMAIL_TEMPLATE_WIDTH}px`,
+  maxWidth: '100%',
+  margin: '0 auto',
+  tableLayout: 'fixed',
+}
+
+const bodyStyle = computed<CSSProperties>(() => {
+  return {
+    backgroundImage: props.general.background.image ? `url(${props.general.background.image})` : '',
+    backgroundRepeat: props.general.background.repeat,
+    backgroundColor: props.general.background.color,
+    backgroundSize: props.general.background.size,
+    backgroundPosition: props.general.background.position,
+    fontFamily: props.general.font,
+    padding: props.general.padding.map(i => `${i}px`).join(' '),
+  }
+})
+
+function isCanvasBlockInstance(component: CanvasBlockInstance): component is CanvasBlockInstance {
+  return component.version === 2
+}
+</script>
+
+<template>
+  <MHtml>
+    <MHead>
+      <component :is="HEAD_STYLE_TAG">
+        {{ EMAIL_RESPONSIVE_CSS }}
+      </component>
+    </MHead>
+    <MPreview :text="general.previewText" />
+    <MBody :style="bodyStyle">
+      <MContainer :style="container">
+        <template
+          v-for="component in components"
+          :key="component.id"
+        >
+          <ExportBlockRenderer
+            v-if="isCanvasBlockInstance(component)"
+            :block="component.block"
+          />
+        </template>
+      </MContainer>
+    </MBody>
+  </MHtml>
+</template>
diff --git a/src/features/email-preview/ui/ExportBlockRenderer.vue b/src/features/email-preview/ui/ExportBlockRenderer.vue
new file mode 100644
index 0000000..cb06aeb
--- /dev/null
+++ b/src/features/email-preview/ui/ExportBlockRenderer.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { BlockNode } from '@/entities/block'
+import { MContainer } from '@mysigmail/vue-email-components'
+import { computed } from 'vue'
+import ExportBlockRendererRowNode from '@/features/email-preview/ui/ExportBlockRendererRowNode.vue'
+
+interface Props {
+  block: BlockNode
+}
+
+const props = defineProps<Props>()
+
+const blockStyle = computed<CSSProperties>(() => {
+  const s = props.block.settings
+  const style: CSSProperties = {}
+
+  if (s.backgroundColor)
+    style.backgroundColor = s.backgroundColor
+
+  if (s.spacing?.padding) {
+    const [t, r, b, l] = s.spacing.padding
+    style.padding = `${t}px ${r}px ${b}px ${l}px`
+  }
+
+  if (s.backgroundImage?.url) {
+    style.backgroundImage = `url(${s.backgroundImage.url})`
+    style.backgroundRepeat = s.backgroundImage.repeat
+    style.backgroundSize = s.backgroundImage.size
+    style.backgroundPosition = s.backgroundImage.position
+  }
+
+  return style
+})
+</script>
+
+<template>
+  <MContainer>
+    <div :style="blockStyle">
+      <ExportBlockRendererRowNode
+        v-for="row in block.rows"
+        :key="row.id"
+        :row="row"
+      />
+    </div>
+  </MContainer>
+</template>
diff --git a/src/features/email-preview/ui/ExportBlockRendererRowNode.vue b/src/features/email-preview/ui/ExportBlockRendererRowNode.vue
new file mode 100644
index 0000000..b475b88
--- /dev/null
+++ b/src/features/email-preview/ui/ExportBlockRendererRowNode.vue
@@ -0,0 +1,436 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { Atom, CellNode, RowNode } from '@/entities/block'
+import { MButton, MColumn, MHr, MImg, MLink, MRow } from '@mysigmail/vue-email-components'
+
+interface Props {
+  row: RowNode
+}
+
+defineProps<Props>()
+
+function tupleToCss(value?: [number, number, number, number]) {
+  if (!value || value.length !== 4)
+    return undefined
+
+  return `${value[0]}px ${value[1]}px ${value[2]}px ${value[3]}px`
+}
+
+function atomSpacingStyle(atom: Atom, options: { includePadding?: boolean } = {}): CSSProperties {
+  const style: CSSProperties = {}
+  const spacing = atom.spacing
+
+  const margin = tupleToCss(spacing?.margin)
+  if (margin)
+    style.margin = margin
+
+  if (options.includePadding === false)
+    return style
+
+  const padding = tupleToCss(spacing?.padding)
+  if (padding)
+    style.padding = padding
+
+  return style
+}
+
+function textAtomStyle(atom: Extract<Atom, { type: 'text' }>): CSSProperties {
+  return {
+    ...atomSpacingStyle(atom),
+    ...(atom.color ? { color: atom.color } : {}),
+  }
+}
+
+function buttonStyle(atom: Extract<Atom, { type: 'button' }>): CSSProperties {
+  const padding = tupleToCss(atom.spacing?.padding) || tupleToCss(atom.padding)
+
+  return {
+    backgroundColor: atom.backgroundColor,
+    color: atom.color,
+    fontSize: `${atom.fontSize}px`,
+    borderRadius: `${atom.borderRadius}px`,
+    ...(padding ? { padding } : {}),
+    display: 'inline-block',
+    textDecoration: 'none',
+    textAlign: 'center',
+    cursor: 'pointer',
+  }
+}
+
+function imageStyle(
+  atom: Extract<Atom, { type: 'image' }>,
+  horizontalAlign?: CellNode['settings']['horizontalAlign'],
+): CSSProperties {
+  const align = horizontalAlign || 'left'
+
+  return {
+    display: 'block',
+    maxWidth: '100%',
+    width: atom.width ? `${atom.width}px` : undefined,
+    height: atom.height ? `${atom.height}px` : undefined,
+    borderRadius:
+      atom.borderRadius !== undefined && Number.isFinite(atom.borderRadius)
+        ? `${Math.max(0, atom.borderRadius)}px`
+        : undefined,
+    marginLeft: align === 'center' || align === 'right' ? 'auto' : '0',
+    marginRight: align === 'center' ? 'auto' : '0',
+  }
+}
+
+function imageLinkStyle(): CSSProperties {
+  return {
+    display: 'inline-block',
+    lineHeight: '0',
+    fontSize: '0',
+    textDecoration: 'none',
+  }
+}
+
+function menuItemLinkBaseStyle(gap: number, isLast: boolean): CSSProperties {
+  return {
+    display: 'inline-block',
+    marginRight: isLast ? '0' : `${gap}px`,
+  }
+}
+
+function menuTextLinkStyle(color: string, fontSize: number): CSSProperties {
+  return {
+    color,
+    fontSize: `${fontSize}px`,
+  }
+}
+
+function menuImageStyle(item: Extract<Atom, { type: 'menu' }>['items'][number]): CSSProperties {
+  if (item.type !== 'image')
+    return {}
+
+  return {
+    display: 'block',
+    width: item.width ? `${item.width}px` : undefined,
+    height: item.height ? `${item.height}px` : undefined,
+    maxWidth: '100%',
+  }
+}
+
+function menuAtomStyle(horizontalAlign?: CellNode['settings']['horizontalAlign']): CSSProperties {
+  return {
+    textAlign: horizontalAlign || 'left',
+  }
+}
+
+function normalizeGap(value: unknown) {
+  const gap = Number(value)
+  return Number.isFinite(gap) && gap > 0 ? gap : 0
+}
+
+function rowStyle(row: RowNode): CSSProperties {
+  const s = row.settings
+  const style: CSSProperties & Record<string, string> = {
+    width: '100%',
+    tableLayout: 'fixed',
+  }
+
+  if (s.backgroundColor && s.backgroundColor !== 'transparent')
+    style.backgroundColor = s.backgroundColor
+
+  if (s.spacing?.padding) {
+    const [t, r, b, l] = s.spacing.padding
+    style.padding = `${t}px ${r}px ${b}px ${l}px`
+  }
+
+  if (s.height)
+    style.minHeight = `${s.height}px`
+
+  if (s.backgroundImage?.url) {
+    style.backgroundImage = `url(${s.backgroundImage.url})`
+    style.backgroundRepeat = s.backgroundImage.repeat
+    style.backgroundSize = s.backgroundImage.size
+    style.backgroundPosition = s.backgroundImage.position
+  }
+
+  style['--e-row-gap'] = `${normalizeGap(s.gap)}px`
+
+  return style
+}
+
+function isRowHiddenOnMobile(row: RowNode) {
+  return Boolean(row.settings.hiddenOnMobile)
+}
+
+function rowClass(row: RowNode) {
+  return {
+    'e-mobile-hidden': isRowHiddenOnMobile(row),
+  }
+}
+
+function isCellHiddenOnMobile(cell: CellNode) {
+  return Boolean(cell.settings.hiddenOnMobile)
+}
+
+function isRowCollapseOnMobile(row: RowNode) {
+  return row.settings.collapseOnMobile !== false
+}
+
+function cellClass(cell: CellNode, row: RowNode) {
+  const hiddenOnMobile = isRowHiddenOnMobile(row) || isCellHiddenOnMobile(cell)
+
+  return {
+    'e-col': true,
+    'e-mobile-hidden': hiddenOnMobile,
+    'e-col-mobile-collapse': isRowCollapseOnMobile(row),
+  }
+}
+
+function shouldCollapseSpacer(cells: CellNode[], index: number, row: RowNode) {
+  if (isRowHiddenOnMobile(row))
+    return false
+
+  const current = cells[index]
+  const next = cells[index + 1]
+
+  if (!current || !next)
+    return false
+
+  if (isCellHiddenOnMobile(current) || isCellHiddenOnMobile(next))
+    return false
+
+  return isRowCollapseOnMobile(row)
+}
+
+function shouldHideSpacerOnMobile(cells: CellNode[], index: number, row: RowNode) {
+  if (isRowHiddenOnMobile(row))
+    return true
+
+  const current = cells[index]
+  const next = cells[index + 1]
+
+  if (!current || !next)
+    return false
+
+  return isCellHiddenOnMobile(current) || isCellHiddenOnMobile(next)
+}
+
+function spacerClass(cells: CellNode[], index: number, row: RowNode) {
+  return {
+    'e-col-gap': true,
+    'e-col-gap-mobile-collapse': shouldCollapseSpacer(cells, index, row),
+    'e-mobile-hidden': shouldHideSpacerOnMobile(cells, index, row),
+  }
+}
+
+function shouldDistributeAutoWidth(items: CellNode[]) {
+  return items.length > 1 && items.every(item => item.settings.width === undefined)
+}
+
+function itemStyle(item: CellNode, items: CellNode[], rawGap: number): CSSProperties {
+  const s = item.settings
+  const style: CSSProperties = {}
+
+  if (s.backgroundColor && s.backgroundColor !== 'transparent')
+    style.backgroundColor = s.backgroundColor
+
+  if (s.spacing?.padding) {
+    const [t, r, b, l] = s.spacing.padding
+    style.padding = `${t}px ${r}px ${b}px ${l}px`
+  }
+
+  if (s.verticalAlign)
+    style.verticalAlign = s.verticalAlign
+
+  if (s.horizontalAlign)
+    style.textAlign = s.horizontalAlign
+
+  if (s.borderRadius !== undefined && Number.isFinite(s.borderRadius) && s.borderRadius >= 0) {
+    style.borderRadius = `${s.borderRadius}px`
+    style.overflow = s.borderRadius > 0 ? 'hidden' : undefined
+  }
+
+  if (s.width !== undefined) {
+    style.width = `${s.width}%`
+    style.maxWidth = `${s.width}%`
+  }
+  else if (shouldDistributeAutoWidth(items) && normalizeGap(rawGap) === 0) {
+    const autoWidth = `${100 / Math.max(1, items.length)}%`
+    style.width = autoWidth
+    style.maxWidth = autoWidth
+  }
+
+  if (s.height)
+    style.height = `${s.height}px`
+
+  if (s.backgroundImage?.url) {
+    style.backgroundImage = `url(${s.backgroundImage.url})`
+    style.backgroundRepeat = s.backgroundImage.repeat
+    style.backgroundSize = s.backgroundImage.size
+    style.backgroundPosition = s.backgroundImage.position
+  }
+
+  return style
+}
+
+function shouldRenderSpacer(index: number, total: number, rawGap: number) {
+  return normalizeGap(rawGap) > 0 && index < total - 1
+}
+
+function spacerStyle(rawGap: number): CSSProperties {
+  const gap = normalizeGap(rawGap)
+
+  return {
+    width: `${gap}px`,
+    minWidth: `${gap}px`,
+    maxWidth: `${gap}px`,
+    padding: '0',
+    fontSize: '0',
+    lineHeight: '0',
+  }
+}
+
+function emptyLinkedItemStyle(item: CellNode): CSSProperties {
+  const itemHeight
+    = item.settings.height && Number.isFinite(item.settings.height)
+      ? Math.max(1, Number(item.settings.height))
+      : 40
+
+  return {
+    display: 'block',
+    width: '100%',
+    minHeight: `${itemHeight}px`,
+    lineHeight: `${itemHeight}px`,
+    fontSize: '0',
+    textDecoration: 'none',
+  }
+}
+
+function atomWrapperClass(atom: Atom) {
+  return {
+    'e-mobile-hidden': Boolean(atom.hiddenOnMobile),
+  }
+}
+</script>
+
+<template>
+  <MRow
+    :class="rowClass(row)"
+    :style="rowStyle(row)"
+  >
+    <template
+      v-for="(cell, cellIndex) in row.cells"
+      :key="cell.id"
+    >
+      <MColumn
+        :class="cellClass(cell, row)"
+        :style="itemStyle(cell, row.cells, row.settings.gap)"
+      >
+        <MLink
+          v-if="cell.settings.link && cell.atoms.length === 0 && cell.rows.length === 0"
+          :href="cell.settings.link"
+          :style="emptyLinkedItemStyle(cell)"
+        >
+          &nbsp;
+        </MLink>
+
+        <template
+          v-for="atom in cell.atoms"
+          :key="atom.id"
+        >
+          <div
+            v-if="atom.type === 'text'"
+            :class="atomWrapperClass(atom)"
+            :style="textAtomStyle(atom)"
+            v-html="atom.value || '&nbsp;'"
+          />
+
+          <div
+            v-else-if="atom.type === 'button'"
+            :class="atomWrapperClass(atom)"
+            :style="atomSpacingStyle(atom, { includePadding: false })"
+          >
+            <MButton
+              :href="atom.link"
+              :style="buttonStyle(atom)"
+            >
+              {{ atom.text }}
+            </MButton>
+          </div>
+
+          <div
+            v-else-if="atom.type === 'divider'"
+            :class="atomWrapperClass(atom)"
+            :style="atomSpacingStyle(atom)"
+          >
+            <MHr
+              :style="{
+                borderColor: atom.color,
+                borderWidth: `${atom.height}px`,
+                borderStyle: 'solid',
+                borderTop: 'none',
+                borderLeft: 'none',
+                borderRight: 'none',
+              }"
+            />
+          </div>
+
+          <div
+            v-else-if="atom.type === 'image'"
+            :class="atomWrapperClass(atom)"
+            :style="atomSpacingStyle(atom)"
+          >
+            <MLink
+              :href="atom.link"
+              :style="imageLinkStyle()"
+            >
+              <MImg
+                :src="atom.src"
+                :alt="atom.alt"
+                :style="imageStyle(atom, cell.settings.horizontalAlign)"
+              />
+            </MLink>
+          </div>
+
+          <div
+            v-else-if="atom.type === 'menu'"
+            :class="atomWrapperClass(atom)"
+            :style="atomSpacingStyle(atom)"
+          >
+            <div :style="menuAtomStyle(cell.settings.horizontalAlign)">
+              <MLink
+                v-for="(menuItem, menuIndex) in atom.items"
+                :key="`menu_${menuIndex}`"
+                :href="menuItem.link"
+                :style="menuItemLinkBaseStyle(atom.gap ?? 10, atom.items.length === menuIndex + 1)"
+              >
+                <template v-if="menuItem.type === 'image'">
+                  <MImg
+                    :src="menuItem.url"
+                    :alt="menuItem.alt"
+                    :style="menuImageStyle(menuItem)"
+                  />
+                </template>
+                <template v-else>
+                  <span :style="menuTextLinkStyle(menuItem.color, menuItem.fontSize)">
+                    {{ menuItem.text }}
+                  </span>
+                </template>
+              </MLink>
+            </div>
+          </div>
+        </template>
+
+        <ExportBlockRendererRowNode
+          v-for="nestedRow in cell.rows"
+          :key="nestedRow.id"
+          :row="nestedRow"
+        />
+      </MColumn>
+
+      <MColumn
+        v-if="shouldRenderSpacer(cellIndex, row.cells.length, row.settings.gap)"
+        :class="spacerClass(row.cells, cellIndex, row)"
+        :style="spacerStyle(row.settings.gap)"
+        aria-hidden="true"
+      >
+        &nbsp;
+      </MColumn>
+    </template>
+  </MRow>
+</template>
diff --git a/src/shared/assets/css/preview.css b/src/shared/assets/css/preview.css
index e63f2e2..226cd01 100644
--- a/src/shared/assets/css/preview.css
+++ b/src/shared/assets/css/preview.css
@@ -227,3 +227,25 @@ a {
   font-size: 16px;
   content: 'Drop Here';
 }
+
+.p-preview-mobile td.e-col-mobile-collapse {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.p-preview-mobile td.e-col-gap-mobile-collapse {
+  display: block !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  height: var(--e-row-gap, 0px) !important;
+  min-height: var(--e-row-gap, 0px) !important;
+  line-height: 0 !important;
+}
+
+.p-preview-mobile .e-mobile-hidden {
+  display: none !important;
+  max-height: 0 !important;
+  overflow: hidden !important;
+}