diff --git a/front/src/components/CardLayout.tsx b/front/src/components/CardLayout.tsx
new file mode 100644
index 0000000..588e780
--- /dev/null
+++ b/front/src/components/CardLayout.tsx
@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react'
+import { Card } from 'react-bootstrap'
+
+import { BackHeader } from '.'
+
+type CardLayoutProps = {
+    text: string
+}
+
+const CardLayout = ({ text, children }: PropsWithChildren<CardLayoutProps>) => (
+    <>
+        <div className='mx-4 px-3'>
+            <BackHeader text={text} />
+        </div>
+        <Card className='m-4 mt-0'>
+            <Card.Body>
+                {children}
+            </Card.Body>
+        </Card>
+    </>
+)
+
+export default CardLayout
diff --git a/front/src/pages/AddPage.tsx b/front/src/pages/AddPage.tsx
index eaa8195..b653b91 100644
--- a/front/src/pages/AddPage.tsx
+++ b/front/src/pages/AddPage.tsx
@@ -3,20 +3,15 @@ import { Form, Button, Card } from 'react-bootstrap'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
 
-import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
+import { BackHeader, ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
 import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
 import { fallbackError, gotError } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
+import CardLayout from '../components/CardLayout'
 
 const styles = {
-    modal: {
-        height: 'calc(100vh - 3rem)',
-    } as CSSProperties,
-    body: {
-        overflowY: 'auto',
-    } as CSSProperties,
     map: {
         width: '100%',
         height: 400,
@@ -48,138 +43,136 @@ function AddPage() {
     }
 
     return (
-        <Card className='m-4' style={styles.modal}>
-            <Card.Body style={styles.body} >
-                <Form onSubmit={handleSubmit}>
-                    <Form.Group className='mb-3' controlId='name'>
-                        <Form.Label>Заголовок объявления</Form.Label>
-                        <Form.Control type='text' required name='name' />
-                    </Form.Group>
+        <CardLayout text='Опубликовать объявление'>
+            <Form onSubmit={handleSubmit}>
+                <Form.Group className='mb-3' controlId='name'>
+                    <Form.Label>Заголовок объявления</Form.Label>
+                    <Form.Control type='text' required name='name' />
+                </Form.Group>
 
-                    <Form.Group className='mb-3' controlId='category'>
-                        <Form.Label>Категория</Form.Label>
-                        <Form.Select required name='category'>
-                            <option value='' hidden>
-                                Выберите категорию
-                            </option>
-                            {categories.map(category =>
-                                <option key={category} value={category}>{categoryNames[category]}</option>
-                            )}
-                        </Form.Select>
-                    </Form.Group>
-
-                    <Form.Group className='mb-3' controlId='bestBy'>
-                        <Form.Label>Срок годности</Form.Label>
-                        <Form.Control type='date' required name='bestBy' />
-                    </Form.Group>
-
-                    <Form.Group className='mb-3' controlId='address'>
-                        <Form.Label>Адрес выдачи</Form.Label>
-                        <div className='mb-3'>
-                            <MapContainer
-                                scrollWheelZoom={false}
-                                style={styles.map}
-                                center={addressPosition}
-                                zoom={13}
-                            >
-                                <TileLayer
-                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-                                />
-                                <LocationMarker
-                                    address={fallbackError(address)}
-                                    position={addressPosition}
-                                    setPosition={setAddressPosition}
-                                />
-                                <ClickHandler
-                                    setPosition={setAddressPosition}
-                                />
-                            </MapContainer>
-                        </div>
-                        <p>Адрес: {fallbackError(address)}</p>
-                    </Form.Group>
-
-                    <Form.Group className='mb-3' controlId='description'>
-                        <Form.Label>Описание</Form.Label>
-                        <Form.Control as='textarea' name='description' rows={3} placeholder='Укажите свои контакты, а так же, когда вам будет удобно передать продукт' />
-                    </Form.Group>
-
-                    <Form.Group className='mb-3' controlId='src'>
-                        <Form.Label>Иллюстрация (фото или видео)</Form.Label>
-                        <Form.Control
-                            type='file'
-                            name='src'
-                            accept='video/mp4,video/mkv, video/x-m4v,video/*, image/*'
-                            capture='environment'
-                        />
-                    </Form.Group>
-                    <Form.Group className='mb-3' controlId='metro'>
-                        <Form.Label>
-                            Станция метро
-                        </Form.Label>
-                        <Form.Select name='metro'>
-                            <option value=''>
-                                Укажите ближайщую станцию метро
-                            </option>
-                            {lines.map(
-                                line =>
-                                    <optgroup key={line} label={lineNames[line]}>
-                                        {Array.from(stations[line]).map(metro =>
-                                            <option key={metro} value={metro}>{metro}</option>
-                                        )}
-                                    </optgroup>
-                            )}
-                        </Form.Select>
-                    </Form.Group>
-
-                    <Form.Group className='mb-3' controlId='trashbox'>
-                        <Form.Label>Пункт сбора мусора</Form.Label>
-                        <div className='mb-3'>
-                            {trashboxes.loading
-                                ? (
-                                    <div style={styles.map}>
-                                        <p>Загрузка...</p>
-                                    </div>
-                                ) : (
-                                    gotError(trashboxes) ? (
-                                        <p
-                                            style={styles.map}
-                                            className='text-danger'
-                                        >{trashboxes.error}</p>
-                                    ) : (
-                                        <MapContainer
-                                            scrollWheelZoom={false}
-                                            style={styles.map}
-                                            center={addressPosition}
-                                            zoom={13}
-                                            className=''
-                                        >
-                                            <TileLayer
-                                                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                                                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-                                            />
-                                            <TrashboxMarkers
-                                                trashboxes={trashboxes.data}
-                                                selectTrashbox={setSelectedTrashbox}
-                                            />
-                                        </MapContainer>
-                                    )
-                                )
-                            }
-                        </div>
-                        {!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
-                            <p>Выбран пункт сбора мусора на {
-                                trashboxes.data[selectedTrashbox.index].Address
-                            } с категорией {selectedTrashbox.category}</p>
-                        ) : (
-                            <p>Выберите пунк сбора мусора и категорию</p>
+                <Form.Group className='mb-3' controlId='category'>
+                    <Form.Label>Категория</Form.Label>
+                    <Form.Select required name='category'>
+                        <option value='' hidden>
+                            Выберите категорию
+                        </option>
+                        {categories.map(category =>
+                            <option key={category} value={category}>{categoryNames[category]}</option>
                         )}
-                    </Form.Group>
+                    </Form.Select>
+                </Form.Group>
 
-                    <Button variant='success' type='submit' {...addButton} />
-                </Form>
-            </Card.Body>
-        </Card>
+                <Form.Group className='mb-3' controlId='bestBy'>
+                    <Form.Label>Срок годности</Form.Label>
+                    <Form.Control type='date' required name='bestBy' />
+                </Form.Group>
+
+                <Form.Group className='mb-3' controlId='address'>
+                    <Form.Label>Адрес выдачи</Form.Label>
+                    <div className='mb-3'>
+                        <MapContainer
+                            scrollWheelZoom={false}
+                            style={styles.map}
+                            center={addressPosition}
+                            zoom={13}
+                        >
+                            <TileLayer
+                                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                            />
+                            <LocationMarker
+                                address={fallbackError(address)}
+                                position={addressPosition}
+                                setPosition={setAddressPosition}
+                            />
+                            <ClickHandler
+                                setPosition={setAddressPosition}
+                            />
+                        </MapContainer>
+                    </div>
+                    <p>Адрес: {fallbackError(address)}</p>
+                </Form.Group>
+
+                <Form.Group className='mb-3' controlId='description'>
+                    <Form.Label>Описание</Form.Label>
+                    <Form.Control as='textarea' name='description' rows={3} placeholder='Укажите свои контакты, а так же, когда вам будет удобно передать продукт' />
+                </Form.Group>
+
+                <Form.Group className='mb-3' controlId='src'>
+                    <Form.Label>Иллюстрация (фото или видео)</Form.Label>
+                    <Form.Control
+                        type='file'
+                        name='src'
+                        accept='video/mp4,video/mkv, video/x-m4v,video/*, image/*'
+                        capture='environment'
+                    />
+                </Form.Group>
+                <Form.Group className='mb-3' controlId='metro'>
+                    <Form.Label>
+                        Станция метро
+                    </Form.Label>
+                    <Form.Select name='metro'>
+                        <option value=''>
+                            Укажите ближайщую станцию метро
+                        </option>
+                        {lines.map(
+                            line =>
+                                <optgroup key={line} label={lineNames[line]}>
+                                    {Array.from(stations[line]).map(metro =>
+                                        <option key={metro} value={metro}>{metro}</option>
+                                    )}
+                                </optgroup>
+                        )}
+                    </Form.Select>
+                </Form.Group>
+
+                <Form.Group className='mb-3' controlId='trashbox'>
+                    <Form.Label>Пункт сбора мусора</Form.Label>
+                    <div className='mb-3'>
+                        {trashboxes.loading
+                            ? (
+                                <div style={styles.map}>
+                                    <p>Загрузка...</p>
+                                </div>
+                            ) : (
+                                gotError(trashboxes) ? (
+                                    <p
+                                        style={styles.map}
+                                        className='text-danger'
+                                    >{trashboxes.error}</p>
+                                ) : (
+                                    <MapContainer
+                                        scrollWheelZoom={false}
+                                        style={styles.map}
+                                        center={addressPosition}
+                                        zoom={13}
+                                        className=''
+                                    >
+                                        <TileLayer
+                                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                            url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                                        />
+                                        <TrashboxMarkers
+                                            trashboxes={trashboxes.data}
+                                            selectTrashbox={setSelectedTrashbox}
+                                        />
+                                    </MapContainer>
+                                )
+                            )
+                        }
+                    </div>
+                    {!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
+                        <p>Выбран пункт сбора мусора на {
+                            trashboxes.data[selectedTrashbox.index].Address
+                        } с категорией {selectedTrashbox.category}</p>
+                    ) : (
+                        <p>Выберите пунк сбора мусора и категорию</p>
+                    )}
+                </Form.Group>
+
+                <Button variant='success' type='submit' {...addButton} />
+            </Form>
+        </CardLayout>
     )
 }
 
diff --git a/front/src/pages/LoginPage.tsx b/front/src/pages/LoginPage.tsx
index 57c9fc4..68b348c 100644
--- a/front/src/pages/LoginPage.tsx
+++ b/front/src/pages/LoginPage.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react'
-import { Card, Tabs, Tab } from 'react-bootstrap'
+import { Tabs, Tab } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 import { AuthForm } from '../components'
 import { isLiteralUnion } from '../utils/types'
+import CardLayout from '../components/CardLayout'
 
 const tabKeys = ['register', 'login'] as const
 type TabKeys = typeof tabKeys[number]
@@ -22,23 +23,21 @@ function LoginPage() {
     ), [navigate])
 
     return (
-        <Card className='m-4'>
-            <Card.Body>
-                <Tabs
-                    activeKey={tab}
-                    onSelect={(k) => isTabKeys(k) && setTab(k)}
-                    fill justify
-                    className='mb-3'
-                >
-                    <Tab eventKey='register' title='Регистрация'>
-                        <AuthForm goBack={goBack} register={true} />
-                    </Tab>
-                    <Tab eventKey='login' title='Вход'>
-                        <AuthForm goBack={goBack} register={false} />
-                    </Tab>
-                </Tabs>
-            </Card.Body>
-        </Card>
+        <CardLayout text='Представьтесь'>
+            <Tabs
+                activeKey={tab}
+                onSelect={(k) => isTabKeys(k) && setTab(k)}
+                fill justify
+                className='mb-3'
+            >
+                <Tab eventKey='register' title='Регистрация'>
+                    <AuthForm goBack={goBack} register={true} />
+                </Tab>
+                <Tab eventKey='login' title='Вход'>
+                    <AuthForm goBack={goBack} register={false} />
+                </Tab>
+            </Tabs>
+        </CardLayout>
     )
 }