diff --git a/package-lock.json b/package-lock.json
index 5431fc5eb38..7a5f2a18c24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3415,6 +3415,7 @@
       "version": "14.6.0",
       "resolved": "https://registry.npmjs.org/@gravity-ui/markdown-editor/-/markdown-editor-14.6.0.tgz",
       "integrity": "sha512-yrsXwHrrxvhPEECLWSOgvJtCfhWWGQLhUGERcG4JGYdQ8TEw+9ZuQghpBewyF1YDKebDd+xIcRJobjiIfjCmqg==",
+      "license": "MIT",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
         "@bem-react/classnames": "1.3.10",
diff --git a/src/components/Examples/pages/Email/Email.scss b/src/components/Examples/pages/Email/Email.scss
index 97e3efecb81..9a2ba10cf04 100644
--- a/src/components/Examples/pages/Email/Email.scss
+++ b/src/components/Examples/pages/Email/Email.scss
@@ -20,4 +20,47 @@ $block: '.#{variables.$ns}examples-email';
         border-top: 1px solid var(--g-color-line-generic);
         gap: var(--g-spacing-5);
     }
+
+    &__container {
+        height: 80vh;
+        margin: 2rem 0;
+    }
+
+    &__navigation {
+        //flex: 2;
+        border: #4e3d2e 1px solid;
+    }
+    &__mail-list {
+        //flex: 3;
+        border: #4e3d2e 1px solid;
+    }
+
+    &__mail-content {
+        // /flex: 3;
+        border: #4e3d2e 1px solid;
+    }
+
+    &__icons {
+        height: 52px;
+        border: #4e3d2e 1px solid;
+    }
+
+    &__left-icons {
+        width: 152px;
+    }
+
+    &__name-container {
+        border: #4e3d2e 1px solid;
+        height: 64px;
+    }
+
+    &__mail-text {
+        border: #4e3d2e 1px solid;
+        height: 300px;
+    }
+
+    &__markdown-panel {
+        border: #4e3d2e 1px solid;
+        height: 400px;
+    }
 }
diff --git a/src/components/Examples/pages/Email/Email.tsx b/src/components/Examples/pages/Email/Email.tsx
index 62bcfffb2e6..0a6e05b5518 100644
--- a/src/components/Examples/pages/Email/Email.tsx
+++ b/src/components/Examples/pages/Email/Email.tsx
@@ -1,4 +1,9 @@
-import {Button, Flex, Icon, Link, Text} from '@gravity-ui/uikit';
+'use client';
+import {Clock, Folder, LayoutTabs, TrashBin} from '@gravity-ui/icons';
+import {MarkdownEditorView, useMarkdownEditor} from '@gravity-ui/markdown-editor';
+import {Button, Col, Container, Flex, Icon, Link, Row, ThemeProvider} from '@gravity-ui/uikit';
+import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
+import {useEffect, useState} from 'react';
 
 import figmaIcon from '../../../../assets/icons/figma-fill.svg';
 import {block} from '../../../../utils';
@@ -12,32 +17,76 @@ type EmailProps = {};
 // @todo-opensourcenight Make email page
 // https://www.figma.com/design/MnKaEyxPs9Zeyhg6pmf4uX/OS-Night-Design-(Published)?node-id=1-20225&t=cBOGiZgT0jwhnCOY-4
 export const Email: React.FC<EmailProps> = () => {
+    const editor = useMarkdownEditor({allowHTML: false});
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        setReady(true);
+    });
     return (
-        <div className={b()}>
-            <main className={b('main')}>
-                <Text variant="code-3">
-                    <Flex direction="row" justifyContent="space-between">
-                        <span>@todo-opensourcenight make email page</span>
-                        <Button
-                            key="figma"
-                            className={b('button')}
-                            view="action"
-                            size="xl"
-                            href={
-                                'https://www.figma.com/design/MnKaEyxPs9Zeyhg6pmf4uX/OS-Night-Design-(Published)?node-id=1-20225&t=cBOGiZgT0jwhnCOY-4'
-                            }
-                            target="_blank"
-                        >
-                            <Icon className={b('button-icon')} data={figmaIcon} size={16} />
-                            <span>Open Figma</span>
-                        </Button>
-                    </Flex>
-                </Text>
-            </main>
-            <footer className={b('footer')}>
-                <Link href={'/examples'}>Open in Examples page</Link>
-                <Link href={'/examples/email'}>Open in Separate page</Link>
-            </footer>
-        </div>
+        <ThemeProvider theme="dark">
+            <div className={b('what')}>
+                <main className={b('main')}>
+                    <Container>
+                        <Row space={0} className={b('container')}>
+                            <Col s="3" className={b('navigation')}>
+                                what
+                            </Col>
+                            <Col s="4" className={b('mail-list')}>
+                                the
+                            </Col>
+                            <Col s="5" className={b('mail-content')}>
+                                <Row space={0} className={b('icons')}>
+                                    <Col s="12" className={b('left-icons')}>
+                                        <Flex>
+                                            <Folder />
+                                            <LayoutTabs />
+                                            <TrashBin />
+                                            <Clock />
+                                        </Flex>
+                                    </Col>
+                                </Row>
+
+                                <Row space={0} className={b('name-container')}>
+                                    Имя и дата
+                                </Row>
+                                <Row space={0} className={b('mail-text')}>
+                                    Текст
+                                </Row>
+                                <Row space={0} className={b('markdown-panel')}>
+                                    {ready ? (
+                                        <MarkdownEditorView
+                                            stickyToolbar
+                                            autofocus
+                                            toaster={toaster}
+                                            editor={editor}
+                                        />
+                                    ) : (
+                                        <></>
+                                    )}
+                                </Row>
+                            </Col>
+                        </Row>
+                    </Container>
+                </main>
+
+                <footer className={b('footer')}>
+                    <Link href={'/examples'}>Open in Examples page</Link>
+                    <Link href={'/examples/email'}>Open in Separate page</Link>
+                    <Button
+                        key="figma"
+                        className={b('button')}
+                        view="action"
+                        size="xl"
+                        href={
+                            'https://www.figma.com/design/MnKaEyxPs9Zeyhg6pmf4uX/OS-Night-Design-(Published)?node-id=1-20225&t=cBOGiZgT0jwhnCOY-4'
+                        }
+                        target="_blank"
+                    >
+                        <Icon className={b('button-icon')} data={figmaIcon} size={16} />
+                        <span>Open Figma</span>
+                    </Button>
+                </footer>
+            </div>
+        </ThemeProvider>
     );
 };