diff --git a/client/public/icons/drawer/reg.svg b/client/public/icons/drawer/reg.svg
new file mode 100644
index 0000000..8567abe
--- /dev/null
+++ b/client/public/icons/drawer/reg.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 16V13.2C0.5 12.65 0.641667 12.1333 0.925 11.65C1.20833 11.1667 1.6 10.8 2.1 10.55C2.95 10.1167 3.90833 9.75 4.975 9.45C6.04167 9.15 7.21667 9 8.5 9C9 9 9.4875 9.025 9.9625 9.075C10.4375 9.125 10.9 9.2 11.35 9.3L9.6 11.05C9.41667 11.0167 9.2375 11 9.0625 11H8.5C7.31667 11 6.25417 11.1417 5.3125 11.425C4.37083 11.7083 3.6 12.0167 3 12.35C2.85 12.4333 2.72917 12.55 2.6375 12.7C2.54583 12.85 2.5 13.0167 2.5 13.2V14H8.75L10.75 16H0.5ZM14.05 16.4L10.6 12.95L12 11.55L14.05 13.6L19.1 8.55L20.5 9.95L14.05 16.4ZM8.5 8C7.4 8 6.45833 7.60833 5.675 6.825C4.89167 6.04167 4.5 5.1 4.5 4C4.5 2.9 4.89167 1.95833 5.675 1.175C6.45833 0.391667 7.4 0 8.5 0C9.6 0 10.5417 0.391667 11.325 1.175C12.1083 1.95833 12.5 2.9 12.5 4C12.5 5.1 12.1083 6.04167 11.325 6.825C10.5417 7.60833 9.6 8 8.5 8ZM8.5 6C9.05 6 9.52083 5.80417 9.9125 5.4125C10.3042 5.02083 10.5 4.55 10.5 4C10.5 3.45 10.3042 2.97917 9.9125 2.5875C9.52083 2.19583 9.05 2 8.5 2C7.95 2 7.47917 2.19583 7.0875 2.5875C6.69583 2.97917 6.5 3.45 6.5 4C6.5 4.55 6.69583 5.02083 7.0875 5.4125C7.47917 5.80417 7.95 6 8.5 6Z" fill="#606060"/>
+</svg>
diff --git a/client/public/icons/drawer/save.svg b/client/public/icons/drawer/save.svg
new file mode 100644
index 0000000..f23b41b
--- /dev/null
+++ b/client/public/icons/drawer/save.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 4V16C18.5 16.55 18.3042 17.0208 17.9125 17.4125C17.5208 17.8042 17.05 18 16.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16V2C0.5 1.45 0.695833 0.979167 1.0875 0.5875C1.47917 0.195833 1.95 0 2.5 0H14.5L18.5 4ZM16.5 4.85L13.65 2H2.5V16H16.5V4.85ZM9.5 15C10.3333 15 11.0417 14.7083 11.625 14.125C12.2083 13.5417 12.5 12.8333 12.5 12C12.5 11.1667 12.2083 10.4583 11.625 9.875C11.0417 9.29167 10.3333 9 9.5 9C8.66667 9 7.95833 9.29167 7.375 9.875C6.79167 10.4583 6.5 11.1667 6.5 12C6.5 12.8333 6.79167 13.5417 7.375 14.125C7.95833 14.7083 8.66667 15 9.5 15ZM3.5 7H12.5V3H3.5V7Z" fill="#606060"/>
+</svg>
diff --git a/client/public/icons/header/add_2.svg b/client/public/icons/header/add_2.svg
new file mode 100644
index 0000000..a53ab05
--- /dev/null
+++ b/client/public/icons/header/add_2.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.125 18V10H0.125V8H8.125V0H10.125V8H18.125V10H10.125V18H8.125Z" fill="#606060"/>
+</svg>
diff --git a/client/public/icons/sider/more.svg b/client/public/icons/header/more.svg
similarity index 100%
rename from client/public/icons/sider/more.svg
rename to client/public/icons/header/more.svg
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 1dd99bf..2ff9076 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -3,9 +3,10 @@ import Title from 'antd/es/typography/Title';
 
 interface HeaderProps {
   title: string;
+  additionalContent?: React.ReactNode;
 }
 
-export default function Header({ title }: HeaderProps) {
+export default function Header({ title, additionalContent }: HeaderProps) {
   return (
     <div
       style={{
@@ -26,8 +27,9 @@ export default function Header({ title }: HeaderProps) {
           marginRight: '26px',
         }}
       >
+        {additionalContent}
         <img
-          src="./icons/sider/more.svg"
+          src="./icons/header/more.svg"
           alt="more"
           style={{ height: '16px', width: '16px' }}
         />
diff --git a/client/src/config/customTheme.ts b/client/src/config/customTheme.ts
index 3863996..fa1ae99 100644
--- a/client/src/config/customTheme.ts
+++ b/client/src/config/customTheme.ts
@@ -1,7 +1,7 @@
 export const theme = {
   token: {
     fontFamily: 'Roboto, sans-serif',
-    colorPrimary: '#548d10',
+    colorPrimary: '#C2DA3D',
     Menu: {
       itemColor: 'f2f2f2',
       itemBg: '#f2f2f2',
diff --git a/client/src/index.css b/client/src/index.css
index 46693ff..1cd3abf 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -26,6 +26,15 @@ code {
   color: #548d10;
 }
 
+.ant-menu-item-selected {
+  background-color: transparent !important;
+}
+
+.ant-menu-item-selected a,
+.ant-menu-item-selected {
+  color: #548d10 !important;
+}
+
 .sider {
   background-color: #f2f2f2;
 }
diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx
index 979f796..cb47e41 100644
--- a/client/src/pages/AccountsPage.tsx
+++ b/client/src/pages/AccountsPage.tsx
@@ -1,9 +1,143 @@
+import { Button, Form, Input, Select } from 'antd';
 import Header from '../components/Header';
+import { useState } from 'react';
+import ContentDrawer from '../components/ContentDrawer';
+
+const { Option } = Select;
 
 export default function AccountsPage() {
+  const [open, setOpen] = useState(false);
+
+  const showDrawer = () => setOpen(true);
+  const closeDrawer = () => setOpen(false);
+
+  const userEdit = (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Form
+        name="user-edit-form"
+        layout="vertical"
+        // onFinish={onFinish}
+        initialValues={{
+          name: 'Александр Александров',
+          login: 'alexandralex@vorkout.ru',
+          password: 'jKUUl776GHd',
+          email: 'alexandralex@vorkout.ru',
+          tenant: 'text',
+          role: 'Директор магазина',
+          status: 'Активен',
+        }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+      >
+        <Form.Item
+          label="Имя"
+          name="name"
+          rules={[{ required: true, message: 'Введите имя' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Логин"
+          name="login"
+          rules={[{ required: true, message: 'Введите логин' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Пароль (последний ввод)"
+          name="password"
+          rules={[{ required: true, message: 'Введите пароль' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label="E-mail"
+          name="email"
+          rules={[
+            { required: true, message: 'Введите имейл' },
+            { type: 'email', message: 'Некорректный имейл' },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Привязка"
+          name="tenant"
+          rules={[{ required: true, message: 'Введите привязку' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Роль"
+          name="role"
+          rules={[{ required: true, message: 'Выберите роль' }]}
+        >
+          <Select placeholder="Выберите роль">
+            <Option value="Директор магазина">Директор магазина</Option>
+            <Option value="Менеджер">Менеджер</Option>
+            <Option value="Кассир">Кассир</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label="Статус"
+          name="status"
+          rules={[{ required: true, message: 'Выберите статус' }]}
+        >
+          <Select placeholder="Выберите статус">
+            <Option value="ACTIVE">Активен</Option>
+            <Option value="DISABLED">Неактивен</Option>
+            <Option value="BLOCKED">Заблокирован</Option>
+            <Option value="DELETED">Удален</Option>
+          </Select>
+        </Form.Item>
+
+        <div style={{ flexGrow: 1 }} />
+
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            block
+            style={{ color: '#000' }}
+          >
+            <img
+              src="/icons/drawer/reg.svg"
+              alt="save"
+              style={{ height: '18px', width: '18px' }}
+            />{' '}
+            Сохранить изменения
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+
   return (
     <>
-      <Header title="Учетные записи" />
+      <Header
+        title="Учетные записи"
+        additionalContent={
+          <img
+            src="./icons/header/add_2.svg"
+            alt="add"
+            style={{
+              height: '18px',
+              width: '18px',
+              cursor: 'pointer',
+            }}
+            onClick={showDrawer}
+          />
+        }
+      />
+
+      <ContentDrawer open={open} closeDrawer={closeDrawer}>
+        {userEdit}
+      </ContentDrawer>
     </>
   );
 }