diff --git a/packages/vkui/shared.config.js b/packages/vkui/shared.config.js
index 1b36aa5411..79049a3a50 100644
--- a/packages/vkui/shared.config.js
+++ b/packages/vkui/shared.config.js
@@ -13,6 +13,8 @@ module.exports.VERSION = pkg.version;
 module.exports.URLS = {
   REPOSITORY: pkg.repository.url.replace('.git', ''),
   ISSUES: pkg.bugs,
+  HOMEPAGE: pkg.homepage,
+  NPM: 'https://www.npmjs.com/package/@vkontakte/vkui',
 };
 
 /**
diff --git a/packages/vkui/src/components/AppRoot/AppRoot.stories.mdx b/packages/vkui/src/components/AppRoot/AppRoot.stories.mdx
new file mode 100644
index 0000000000..2b3f8f9a71
--- /dev/null
+++ b/packages/vkui/src/components/AppRoot/AppRoot.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { AppRoot } from './AppRoot';
+
+<Meta title="Service/AppRoot" />
+<Title>AppRoot</Title>
+
+<ArgTypes of={AppRoot} />
diff --git a/packages/vkui/src/components/AspectRatio/AspectRatio.stories.tsx b/packages/vkui/src/components/AspectRatio/AspectRatio.stories.tsx
index 3602a6b4ba..67ba4cb927 100644
--- a/packages/vkui/src/components/AspectRatio/AspectRatio.stories.tsx
+++ b/packages/vkui/src/components/AspectRatio/AspectRatio.stories.tsx
@@ -26,7 +26,7 @@ const story: Meta<AspectRatioProps> = {
 
 export default story;
 
-type Story = StoryObj<AspectRatioProps>;
+type Story = StoryObj<Omit<AspectRatioProps, 'ratio'> & { ratio: '16/9' | '1/1' | '3/4' | 'None' }>;
 
 export const Playground: Story = {
   args: {
@@ -37,6 +37,7 @@ export const Playground: Story = {
         src="https://sun9-35.userapi.com/TH0O6TfKR2O5W8hjgSdzQzHvV_2TGRAXhLHuog/Js_f2L5EMYM.jpg"
       />
     ),
+    ratio: '16/9',
   },
   decorators: [
     (Component, context) => (
@@ -54,7 +55,7 @@ export const Playground: Story = {
 export const WithModeNone: Story = {
   ...Playground,
   args: {
-    ratio: 16 / 9,
+    ratio: '16/9',
     mode: 'none',
     children: (
       <img
diff --git a/packages/vkui/src/components/Image/Image.stories.tsx b/packages/vkui/src/components/Image/Image.stories.tsx
new file mode 100644
index 0000000000..77de3ffa93
--- /dev/null
+++ b/packages/vkui/src/components/Image/Image.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { getAvatarUrl } from '../../testing/mock';
+import { Image, ImageProps } from './Image';
+
+const story: Meta<ImageProps> = {
+  title: 'Blocks/Image',
+  component: Image,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ImageProps>;
+
+export const Playground: Story = {
+  args: {
+    src: getAvatarUrl('app_shorm_online'),
+  },
+};
diff --git a/packages/vkui/src/components/List/List.stories.tsx b/packages/vkui/src/components/List/List.stories.tsx
index 240f298c78..ca20ffefc9 100644
--- a/packages/vkui/src/components/List/List.stories.tsx
+++ b/packages/vkui/src/components/List/List.stories.tsx
@@ -15,21 +15,41 @@ const story: Meta<ListProps> = {
 
 export default story;
 
-type Story = StoryObj<ListProps>;
+type Story = StoryObj<
+  ListProps & {
+    items: Array<{
+      before: React.ReactNode;
+      title: string;
+    }>;
+  }
+>;
 
 export const Playground: Story = {
-  render: ({ children, ...args }) => <List {...args}>{children}</List>,
+  render: function Render({ items, ...args }) {
+    const [draggingList, updateDraggingList] = React.useState(items);
+
+    const onDragFinish = ({ from, to }: { from: number; to: number }) => {
+      const _list = [...draggingList];
+      _list.splice(from, 1);
+      _list.splice(to, 0, draggingList[from]);
+      updateDraggingList(_list);
+    };
+
+    return (
+      <List {...args}>
+        {draggingList.map((item) => (
+          <Cell key={item.title} before={item.before} draggable onDragFinish={onDragFinish}>
+            {item.title}
+          </Cell>
+        ))}
+      </List>
+    );
+  },
   args: {
-    children: [
-      <Cell key={0} expandable before={<Icon28UserOutline />}>
-        Учетная запись
-      </Cell>,
-      <Cell key={1} expandable before={<Icon28SettingsOutline />}>
-        Основные
-      </Cell>,
-      <Cell key={2} expandable before={<Icon28PrivacyOutline />}>
-        Приватность
-      </Cell>,
+    items: [
+      { before: <Icon28UserOutline />, title: 'Учетная запись' },
+      { before: <Icon28SettingsOutline />, title: 'Основные' },
+      { before: <Icon28PrivacyOutline />, title: 'Приватность' },
     ],
   },
   decorators: [
diff --git a/packages/vkui/src/components/ModalDismissButton/ModalDismissButton.stories.tsx b/packages/vkui/src/components/ModalDismissButton/ModalDismissButton.stories.tsx
new file mode 100644
index 0000000000..90d5f63255
--- /dev/null
+++ b/packages/vkui/src/components/ModalDismissButton/ModalDismissButton.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { ModalDismissButton, ModalDismissButtonProps } from './ModalDismissButton';
+
+const story: Meta<ModalDismissButtonProps> = {
+  title: 'Modals/ModalDismissButton',
+  component: ModalDismissButton,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ModalDismissButtonProps>;
+
+export const Playground: Story = {
+  decorators: [
+    (Component) => (
+      <div style={{ position: 'relative' }}>
+        <Component />
+      </div>
+    ),
+  ],
+};
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx
new file mode 100644
index 0000000000..f20815db2d
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon24Cancel, Icon24Done } from '@vkontakte/icons';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { ModalWrapper } from '../../storybook/ModalWrapper';
+import { withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Div } from '../Div/Div';
+import { ModalPage } from '../ModalPage/ModalPage';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { ModalPageHeader, ModalPageHeaderProps } from './ModalPageHeader';
+
+const story: Meta<ModalPageHeaderProps> = {
+  title: 'Modals/ModalPageHeader',
+  component: ModalPageHeader,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [withVKUILayout],
+};
+
+export default story;
+
+type Story = StoryObj<ModalPageHeaderProps>;
+
+const MODAL_ID = 'MODAL_ID';
+
+export const Example: Story = {
+  render: function Render(args) {
+    const platform = usePlatform();
+
+    return (
+      <ModalWrapper modalId={MODAL_ID}>
+        <ModalPage
+          id={MODAL_ID}
+          header={
+            <ModalPageHeader
+              before={
+                <React.Fragment>
+                  {(platform === Platform.ANDROID || platform === Platform.VKCOM) && (
+                    <PanelHeaderButton>
+                      <Icon24Cancel />
+                    </PanelHeaderButton>
+                  )}
+                </React.Fragment>
+              }
+              after={
+                <React.Fragment>
+                  {(platform === Platform.ANDROID || platform === Platform.VKCOM) && (
+                    <PanelHeaderButton>
+                      <Icon24Done />
+                    </PanelHeaderButton>
+                  )}
+                  {platform === Platform.IOS && <PanelHeaderButton>Готово</PanelHeaderButton>}
+                </React.Fragment>
+              }
+              {...args}
+            >
+              Заголовок модальной страницы
+            </ModalPageHeader>
+          }
+        >
+          <Div style={{ height: 1000 }}>Example</Div>
+        </ModalPage>
+      </ModalWrapper>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.stories.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.stories.tsx
index 32813b0a4b..dddc435b2e 100644
--- a/packages/vkui/src/components/PanelHeader/PanelHeader.stories.tsx
+++ b/packages/vkui/src/components/PanelHeader/PanelHeader.stories.tsx
@@ -1,29 +1,17 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import {
-  Icon16Dropdown,
-  Icon24Done,
-  Icon28AddOutline,
-  Icon28Notifications,
-  Icon28PictureOutline,
-  Icon28SettingsOutline,
-  Icon28UsersOutline,
-} from '@vkontakte/icons';
+import { Icon28Notifications, Icon28PictureOutline, Icon28SettingsOutline } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { Avatar } from '../Avatar/Avatar';
-import { Cell } from '../Cell/Cell';
 import { Counter } from '../Counter/Counter';
 import { Div } from '../Div/Div';
-import { List } from '../List/List';
 import { Panel } from '../Panel/Panel';
 import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose';
-import { PanelHeaderContent } from '../PanelHeaderContent/PanelHeaderContent';
-import { PanelHeaderContext } from '../PanelHeaderContext/PanelHeaderContext';
 import { Search } from '../Search/Search';
 import { Tabs } from '../Tabs/Tabs';
 import { TabsItem } from '../TabsItem/TabsItem';
@@ -123,27 +111,6 @@ export const PanelHeaderWithMultipleIcons: Story = {
   ),
 };
 
-export const PanelHeaderWithPanelHeaderContent: Story = {
-  render: function Render() {
-    const platform = usePlatform();
-
-    return (
-      <View id="main" activePanel="panel1">
-        <Panel id="panel1">
-          <PanelHeader
-            before={<PanelHeaderBack label={platform === Platform.VKCOM ? 'Назад' : undefined} />}
-          >
-            <PanelHeaderContent before={<Avatar size={36} />} status="Был в сети вчера">
-              Влад Анесов
-            </PanelHeaderContent>
-          </PanelHeader>
-          <Div>PanelHeaderContent</Div>
-        </Panel>
-      </View>
-    );
-  },
-};
-
 export const PanelHeaderWithSearch: Story = {
   render: function Render() {
     const platform = usePlatform();
@@ -176,71 +143,3 @@ export const PanelHeaderWithTabs: Story = {
     </View>
   ),
 };
-
-export const PanelHeaderWithPanelHeaderContext: Story = {
-  render: function Render() {
-    const [contextOpened, setContextOpened] = React.useState(true);
-    const [mode, setMode] = React.useState<string | undefined>('all');
-
-    const toggleContext = () => {
-      setContextOpened((prev) => !prev);
-    };
-
-    const select = (e: React.MouseEvent<HTMLElement>) => {
-      const mode = e.currentTarget.dataset.mode;
-      setMode(mode);
-      requestAnimationFrame(toggleContext);
-    };
-
-    return (
-      <View id="main" activePanel="panel1">
-        <Panel id="panel1">
-          <PanelHeader
-            before={<PanelHeaderBack />}
-            after={
-              <PanelHeaderButton>
-                <Icon28AddOutline />
-              </PanelHeaderButton>
-            }
-          >
-            <PanelHeaderContent
-              aside={
-                <Icon16Dropdown
-                  style={{
-                    transform: `rotate(${contextOpened ? '180deg' : '0'})`,
-                  }}
-                />
-              }
-              onClick={toggleContext}
-            >
-              Communities
-            </PanelHeaderContent>
-          </PanelHeader>
-          <PanelHeaderContext opened={contextOpened} onClose={toggleContext}>
-            <List>
-              <Cell
-                before={<Icon28UsersOutline />}
-                after={mode === 'all' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null}
-                onClick={select}
-                data-mode="all"
-              >
-                Communities
-              </Cell>
-              <Cell
-                before={<Icon28SettingsOutline />}
-                after={
-                  mode === 'managed' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null
-                }
-                onClick={select}
-                data-mode="managed"
-              >
-                Managed Communities
-              </Cell>
-            </List>
-          </PanelHeaderContext>
-          <Div>PanelHeaderContext</Div>
-        </Panel>
-      </View>
-    );
-  },
-};
diff --git a/packages/vkui/src/components/PanelHeaderBack/Readme.md b/packages/vkui/src/components/PanelHeaderBack/Readme.md
deleted file mode 100644
index 23ca3f6a57..0000000000
--- a/packages/vkui/src/components/PanelHeaderBack/Readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы.
-
-```jsx static
-import { PanelHeaderBack } from '@vkontakte/vkui';
-
-<PanelHeader before={<PanelHeaderBack onClick={this.props.onBackClick} />}>
-  Заголовок панели
-</PanelHeader>;
-```
diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx
new file mode 100644
index 0000000000..3b30663391
--- /dev/null
+++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon28AddOutline } from '@vkontakte/icons';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { PanelHeaderBack as PanelHeaderBackCmp } from '../PanelHeaderBack/PanelHeaderBack';
+import { PanelHeaderClose as PanelHeaderCloseCmp } from '../PanelHeaderClose/PanelHeaderClose';
+import {
+  PanelHeaderEdit as PanelHeaderEditCmp,
+  PanelHeaderEditProps,
+} from '../PanelHeaderEdit/PanelHeaderEdit';
+import { PanelHeaderSubmit as PanelHeaderSubmitCmp } from '../PanelHeaderSubmit/PanelHeaderSubmit';
+import { PanelHeaderButton, PanelHeaderButtonProps } from './PanelHeaderButton';
+
+const story: Meta<PanelHeaderButtonProps> = {
+  title: 'Layout/PanelHeaderButton',
+  component: PanelHeaderButton,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<PanelHeaderButtonProps>;
+
+export const Playground: Story = {
+  render: (args) => {
+    return (
+      <PanelHeaderButton {...args}>
+        <Icon28AddOutline />
+      </PanelHeaderButton>
+    );
+  },
+};
+
+export const PanelHeaderClose: Story = {
+  render: (args) => {
+    return <PanelHeaderCloseCmp {...args} />;
+  },
+};
+
+export const PanelHeaderBack: Story = {
+  render: (args) => {
+    return <PanelHeaderBackCmp {...args} />;
+  },
+};
+
+export const PanelHeaderEdit: StoryObj<PanelHeaderEditProps> = {
+  args: {
+    isActive: true,
+  },
+  render: (args) => {
+    return <PanelHeaderEditCmp {...args} />;
+  },
+};
+
+export const PanelHeaderSubmit: Story = {
+  render: (args) => {
+    return <PanelHeaderSubmitCmp {...args} />;
+  },
+};
diff --git a/packages/vkui/src/components/PanelHeaderButton/Readme.md b/packages/vkui/src/components/PanelHeaderButton/Readme.md
index c634fce81c..3abb446194 100644
--- a/packages/vkui/src/components/PanelHeaderButton/Readme.md
+++ b/packages/vkui/src/components/PanelHeaderButton/Readme.md
@@ -40,3 +40,53 @@ import { Icon28SettingsOutline, Icon28Notifications } from '@vkontakte/icons';
   }
 />;
 ```
+
+## Пресеты
+
+### PanelHeaderBack
+
+Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы.
+
+```jsx static
+import { PanelHeaderBack } from '@vkontakte/vkui';
+
+<PanelHeader before={<PanelHeaderBack onClick={this.props.onBackClick} />}>
+  Заголовок панели
+</PanelHeader>;
+```
+
+### PanelHeaderClose
+
+Этот компонент используется для показа кнопки "Отмена" в модальных окнах для закрытия текущего `View` в рамках `Root`. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28CancelOutline />`:
+
+```jsx static
+import { PanelHeaderClose } from '@vkontakte/vkui';
+
+<PanelHeader before={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
+  Заголовок модального окна
+</PanelHeader>;
+```
+
+### PanelHeaderEdit
+
+Компонент для отрисовки кнопки **Редактировать** в шапке. Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).
+
+```jsx static
+import { PanelHeaderEdit } from '@vkontakte/vkui';
+
+<PanelHeader after={<PanelHeaderEdit onClick={this.props.onEdit}>Готово</PanelHeaderSubmit>}>
+  Заголовок модального окна
+</PanelHeader>;
+```
+
+### PanelHeaderSubmit
+
+Этот компонент используется для показа кнопки "Готово" в модальных окнах для закрытия текущего `View` в рамках `Root` и сохранения какого-либо результата. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28DoneOutline />`:
+
+```jsx static
+import { PanelHeaderSubmit } from '@vkontakte/vkui';
+
+<PanelHeader after={<PanelHeaderSubmit onClick={this.props.onSubmit}>Готово</PanelHeaderSubmit>}>
+  Заголовок модального окна
+</PanelHeader>;
+```
diff --git a/packages/vkui/src/components/PanelHeaderClose/Readme.md b/packages/vkui/src/components/PanelHeaderClose/Readme.md
deleted file mode 100644
index 2e5303e2e9..0000000000
--- a/packages/vkui/src/components/PanelHeaderClose/Readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Этот компонент используется для показа кнопки "Отмена" в модальных окнах для закрытия текущего `View` в рамках `Root`. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28CancelOutline />`:
-
-```jsx static
-import { PanelHeaderClose } from '@vkontakte/vkui';
-
-<PanelHeader before={<PanelHeaderClose onClick={this.props.onCloseClick} />}>
-  Заголовок модального окна
-</PanelHeader>;
-```
diff --git a/packages/vkui/src/components/PanelHeaderContent/PanelHeaderContent.stories.tsx b/packages/vkui/src/components/PanelHeaderContent/PanelHeaderContent.stories.tsx
new file mode 100644
index 0000000000..d53de61ba0
--- /dev/null
+++ b/packages/vkui/src/components/PanelHeaderContent/PanelHeaderContent.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Avatar } from '../Avatar/Avatar';
+import { Div } from '../Div/Div';
+import { Panel } from '../Panel/Panel';
+import { PanelHeader } from '../PanelHeader/PanelHeader';
+import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
+import { View } from '../View/View';
+import { PanelHeaderContent, PanelHeaderContentProps } from './PanelHeaderContent';
+
+const story: Meta<PanelHeaderContentProps> = {
+  title: 'Layout/PanelHeaderContent',
+  component: PanelHeaderContent,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [withVKUILayout],
+};
+
+export default story;
+
+type Story = StoryObj<PanelHeaderContentProps>;
+
+const PANEL_ID = 'panel1';
+
+export const Example: Story = {
+  render: function Render() {
+    const platform = usePlatform();
+
+    return (
+      <View id="main" activePanel={PANEL_ID}>
+        <Panel id={PANEL_ID}>
+          <PanelHeader
+            before={<PanelHeaderBack label={platform === Platform.VKCOM ? 'Назад' : undefined} />}
+          >
+            <PanelHeaderContent before={<Avatar size={36} />} status="Был в сети вчера">
+              Влад Анесов
+            </PanelHeaderContent>
+          </PanelHeader>
+          <Div>PanelHeaderContent</Div>
+        </Panel>
+      </View>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.stories.tsx b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.stories.tsx
new file mode 100644
index 0000000000..b39cf097ac
--- /dev/null
+++ b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.stories.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Icon16Dropdown,
+  Icon24Done,
+  Icon28AddOutline,
+  Icon28SettingsOutline,
+  Icon28UsersOutline,
+} from '@vkontakte/icons';
+import { withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Cell } from '../Cell/Cell';
+import { Div } from '../Div/Div';
+import { Panel } from '../Panel/Panel';
+import { PanelHeader } from '../PanelHeader/PanelHeader';
+import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { PanelHeaderContent } from '../PanelHeaderContent/PanelHeaderContent';
+import { View } from '../View/View';
+import { PanelHeaderContext, PanelHeaderContextProps } from './PanelHeaderContext';
+
+const story: Meta<PanelHeaderContextProps> = {
+  title: 'Layout/PanelHeaderContext',
+  component: PanelHeaderContext,
+  parameters: {
+    ...CanvasFullLayout,
+    ...DisableCartesianParam,
+  },
+  decorators: [withVKUILayout],
+};
+
+export default story;
+
+type Story = StoryObj<PanelHeaderContextProps>;
+
+export const Example: Story = {
+  render: function Render() {
+    const [contextOpened, setContextOpened] = React.useState(true);
+    const [mode, setMode] = React.useState<string | undefined>('all');
+
+    const toggleContext = () => {
+      setContextOpened((prev) => !prev);
+    };
+
+    const select = (e: React.MouseEvent<HTMLElement>) => {
+      const mode = e.currentTarget.dataset.mode;
+      setMode(mode);
+      requestAnimationFrame(toggleContext);
+    };
+
+    return (
+      <View id="main" activePanel="panel1">
+        <Panel id="panel1">
+          <PanelHeader
+            before={<PanelHeaderBack />}
+            after={
+              <PanelHeaderButton>
+                <Icon28AddOutline />
+              </PanelHeaderButton>
+            }
+          >
+            <PanelHeaderContent
+              aside={
+                <Icon16Dropdown
+                  style={{
+                    transform: `rotate(${contextOpened ? '180deg' : '0'})`,
+                  }}
+                />
+              }
+              onClick={toggleContext}
+            >
+              Communities
+            </PanelHeaderContent>
+          </PanelHeader>
+          <PanelHeaderContext opened={contextOpened} onClose={toggleContext}>
+            <Cell
+              before={<Icon28UsersOutline />}
+              after={mode === 'all' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null}
+              onClick={select}
+              data-mode="all"
+            >
+              Communities
+            </Cell>
+            <Cell
+              before={<Icon28SettingsOutline />}
+              after={
+                mode === 'managed' ? <Icon24Done fill="var(--vkui--color_icon_accent)" /> : null
+              }
+              onClick={select}
+              data-mode="managed"
+            >
+              Managed Communities
+            </Cell>
+          </PanelHeaderContext>
+          <Div>PanelHeaderContext</Div>
+        </Panel>
+      </View>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/PanelHeaderEdit/Readme.md b/packages/vkui/src/components/PanelHeaderEdit/Readme.md
deleted file mode 100644
index f7bd85265c..0000000000
--- a/packages/vkui/src/components/PanelHeaderEdit/Readme.md
+++ /dev/null
@@ -1 +0,0 @@
-Компонент для отрисовки кнопки **Редактировать** в шапке. Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).
diff --git a/packages/vkui/src/components/PanelHeaderSubmit/Readme.md b/packages/vkui/src/components/PanelHeaderSubmit/Readme.md
deleted file mode 100644
index 2f29b2a017..0000000000
--- a/packages/vkui/src/components/PanelHeaderSubmit/Readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Этот компонент используется для показа кнопки "Готово" в модальных окнах для закрытия текущего `View` в рамках `Root` и сохранения какого-либо результата. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28DoneOutline />`:
-
-```jsx static
-import { PanelHeaderSubmit } from '@vkontakte/vkui';
-
-<PanelHeader after={<PanelHeaderSubmit onClick={this.props.onSubmit}>Готово</PanelHeaderSubmit>}>
-  Заголовок модального окна
-</PanelHeader>;
-```
diff --git a/packages/vkui/src/components/Popper/Popper.stories.tsx b/packages/vkui/src/components/Popper/Popper.stories.tsx
new file mode 100644
index 0000000000..e00c84bfcd
--- /dev/null
+++ b/packages/vkui/src/components/Popper/Popper.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Button } from '../Button/Button';
+import { Div } from '../Div/Div';
+import { Popper, PopperProps } from './Popper';
+
+const story: Meta<PopperProps> = {
+  title: 'Poppers/Popper',
+  component: Popper,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<PopperProps>;
+
+export const Playground: Story = {
+  render: function Render(args) {
+    const [shown, setShown] = React.useState(false);
+    const buttonRef = React.useRef(null);
+
+    return (
+      <React.Fragment>
+        <Button getRootRef={buttonRef} onClick={() => setShown(!shown)}>
+          {shown ? 'Закрыть' : 'Открыть'}
+        </Button>
+        {shown && (
+          <Popper forcePortal={false} offsetDistance={8} {...args} targetRef={buttonRef}>
+            <Div>Привет</Div>
+          </Popper>
+        )}
+      </React.Fragment>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/ScrollArrow/ScrollArrow.stories.tsx b/packages/vkui/src/components/ScrollArrow/ScrollArrow.stories.tsx
new file mode 100644
index 0000000000..aa69b3fbb0
--- /dev/null
+++ b/packages/vkui/src/components/ScrollArrow/ScrollArrow.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { ScrollArrow, ScrollArrowProps } from './ScrollArrow';
+
+const story: Meta<ScrollArrowProps> = {
+  title: 'Blocks/ScrollArrow',
+  component: ScrollArrow,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ScrollArrowProps>;
+
+export const Playground: Story = {};
diff --git a/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx b/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
new file mode 100644
index 0000000000..ea4062f2b1
--- /dev/null
+++ b/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon56MentionOutline, Icon56UsersOutline } from '@vkontakte/icons';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Button } from '../Button/Button';
+import { Group } from '../Group/Group';
+import { Panel } from '../Panel/Panel';
+import { Placeholder } from '../Placeholder/Placeholder';
+import { Separator } from '../Separator/Separator';
+import { SplitLayout } from '../SplitLayout/SplitLayout';
+import { View } from '../View/View';
+import { SplitCol, SplitColProps } from './SplitCol';
+
+const story: Meta<SplitColProps> = {
+  title: 'Layout/SplitCol',
+  component: SplitCol,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<SplitColProps>;
+
+const panels = ['panel 1', 'panel 2'];
+
+export const Playground: Story = {
+  args: {
+    width: '100%',
+    maxWidth: 560,
+  },
+  render: function Render(args) {
+    const [panel, setPanel] = React.useState(panels[0]);
+
+    return (
+      <SplitLayout style={{ justifyContent: 'center' }}>
+        <SplitCol {...args}>
+          <View activePanel={panel}>
+            <Panel id={panels[0]}>
+              <Group>
+                <Placeholder
+                  icon={<Icon56UsersOutline />}
+                  header="Уведомления от сообществ"
+                  action={
+                    <Button size="m" onClick={() => setPanel(panels[1])}>
+                      Подключить сообщества
+                    </Button>
+                  }
+                >
+                  Подключите сообщества, от которых Вы хотите получать уведомления
+                </Placeholder>
+                <Separator />
+                <Placeholder icon={<Icon56MentionOutline />}>
+                  Введите адрес страницы в поле поиска
+                </Placeholder>
+              </Group>
+            </Panel>
+            <Panel id={panels[1]}>
+              <Group>
+                <Placeholder>Доступ запрещён</Placeholder>
+                <Separator />
+                <Placeholder
+                  header="Находите друзей"
+                  action={
+                    <Button size="m" onClick={() => setPanel(panels[0])}>
+                      Найти друзей
+                    </Button>
+                  }
+                >
+                  Здесь будут отображаться люди, которых вы добавите в друзья
+                </Placeholder>
+              </Group>
+            </Panel>
+          </View>
+        </SplitCol>
+      </SplitLayout>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.stories.tsx b/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
index 142811e85a..6c425196e5 100644
--- a/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
+++ b/packages/vkui/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
@@ -10,7 +10,7 @@ interface VisuallyHiddenProps
     HasComponent {}
 
 const story: Meta<VisuallyHiddenProps> = {
-  title: 'Helpers/VisuallyHidden',
+  title: 'Service/VisuallyHidden',
   component: VisuallyHidden,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
 };
diff --git a/packages/vkui/src/components/WriteBarIcon/WriteBarIcon.stories.tsx b/packages/vkui/src/components/WriteBarIcon/WriteBarIcon.stories.tsx
new file mode 100644
index 0000000000..14411f6716
--- /dev/null
+++ b/packages/vkui/src/components/WriteBarIcon/WriteBarIcon.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { WriteBarIcon, WriteBarIconProps } from './WriteBarIcon';
+
+const story: Meta<WriteBarIconProps> = {
+  title: 'Blocks/WriteBarIcon',
+  component: WriteBarIcon,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<WriteBarIconProps>;
+
+export const Playground: Story = {
+  args: {
+    mode: 'attach',
+  },
+};
diff --git a/styleguide/Components/ReactComponent/ReactComponent.css b/styleguide/Components/ReactComponent/ReactComponent.css
index 246af87a6e..1bcd8d9eed 100644
--- a/styleguide/Components/ReactComponent/ReactComponent.css
+++ b/styleguide/Components/ReactComponent/ReactComponent.css
@@ -17,6 +17,13 @@
 
 .ReactComponent__name {
   margin-top: 4px;
+  display: flex;
+}
+
+.ReactComponent__logo {
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
 }
 
 .ReactComponent__name--deprecated {
diff --git a/styleguide/Components/ReactComponent/ReactComponent.js b/styleguide/Components/ReactComponent/ReactComponent.js
index 02f50631ec..3d45528499 100644
--- a/styleguide/Components/ReactComponent/ReactComponent.js
+++ b/styleguide/Components/ReactComponent/ReactComponent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useStyleGuideContext } from '@rsg-components/Context';
 import Examples from '@rsg-components/Examples';
 import Markdown from '@rsg-components/Markdown';
 import Slot from '@rsg-components/Slot';
@@ -12,13 +13,20 @@ import './ReactComponent.css';
 const toKebabCase = (str) =>
   str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, '');
 
-const ReactComponent = ({ component, exampleMode }) => {
+const getSectionName = (sections) => {
+  return sections[0].slug?.split('-')[1];
+};
+
+const ReactComponent = ({ component, exampleMode, ...rest }) => {
   const { name, visibleName, pathLine } = component;
   const { description = '', examples = [] } = component.props || {};
   const deprecated = getDeprecatedFromComponentTags(component);
+  const { sections } = useStyleGuideContext();
 
   const githubTag = `cmp:${toKebabCase(visibleName)}`;
   const issuesQuery = `is:open is:issue label:${githubTag}`;
+  const sectionName = getSectionName(sections);
+  const storybooComponentUrl = `/story/${sectionName}-${visibleName.toLowerCase()}`;
 
   return (
     <div className="ReactComponent">
@@ -40,6 +48,16 @@ const ReactComponent = ({ component, exampleMode }) => {
       >
         <Caption>Issues</Caption>
       </Link>
+      <div className="ReactComponent__divider">•</div>
+      <Link
+        target="_blank"
+        className="ReactComponent__src"
+        href={`${VKUI_PACKAGE.URLS.HOMEPAGE}playground?path=${encodeURIComponent(
+          storybooComponentUrl,
+        )}`}
+      >
+        <Caption>Storybook</Caption>
+      </Link>
       <Heading
         level={1}
         className={classNames(
diff --git a/styleguide/Components/StyleGuide/StyleGuide.js b/styleguide/Components/StyleGuide/StyleGuide.js
index d9d37a63e1..47ea9e6589 100644
--- a/styleguide/Components/StyleGuide/StyleGuide.js
+++ b/styleguide/Components/StyleGuide/StyleGuide.js
@@ -38,6 +38,7 @@ export default class StyleGuide extends Component {
           config,
           slots,
           cssRevision,
+          sections,
         }}
       >
         <StyleGuideRenderer
diff --git a/styleguide/Components/StyleGuide/StyleGuideHeader.js b/styleguide/Components/StyleGuide/StyleGuideHeader.js
index 20db3b06ed..662072a9e5 100644
--- a/styleguide/Components/StyleGuide/StyleGuideHeader.js
+++ b/styleguide/Components/StyleGuide/StyleGuideHeader.js
@@ -24,15 +24,19 @@ export const StyleGuideHeader = ({ switchStyleGuideAppearance }) => {
     },
     {
       title: 'NPM',
-      href: 'https://www.npmjs.com/package/@vkontakte/vkui',
+      href: `${VKUI_PACKAGE.URLS.NPM}`,
     },
     {
       title: 'Github',
-      href: 'https://github.com/VKCOM/VKUI',
+      href: `${VKUI_PACKAGE.URLS.REPOSITORY}`,
+    },
+    {
+      title: 'Storybook',
+      href: `${VKUI_PACKAGE.URLS.HOMEPAGE}playground`,
     },
     {
       title: 'Релизы',
-      href: 'https://github.com/VKCOM/VKUI/releases',
+      href: `${VKUI_PACKAGE.URLS.REPOSITORY}/releases`,
     },
   ];
 
diff --git a/styleguide/config.js b/styleguide/config.js
index 8efc43a9d4..aec0631ede 100644
--- a/styleguide/config.js
+++ b/styleguide/config.js
@@ -158,10 +158,6 @@ const baseConfig = {
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Panel/Panel.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeader/PanelHeader.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderButton/PanelHeaderButton.tsx`,
-            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderBack/PanelHeaderBack.tsx`,
-            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderClose/PanelHeaderClose.tsx`,
-            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderSubmit/PanelHeaderSubmit.tsx`,
-            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderEdit/PanelHeaderEdit.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderContent/PanelHeaderContent.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PanelHeaderContext/PanelHeaderContext.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Epic/Epic.tsx`,