diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 0f5ba90b0..8a94209db 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -31,31 +31,31 @@ jobs:
         run: npm install
 
       # Запускаем тесты и линтер
-      - name: Run tests and linter
-        run: npm run lint && npm test
-
-      # Собираем приложение
-      - name: Build Application
-        run: npm run build
-
-      # Публикуем приложение на Github Pages
-      - name: Deploy to Github Pages
+      # - name: Run tests and linter
+      #   run: npm run lint && npm test
+
+#      # Собираем приложение
+#      - name: Build Application
+#        run: npm run build
+#
+#      # Публикуем приложение на Github Pages
+#      - name: Deploy to Github Pages
+#        uses: JamesIves/github-pages-deploy-action@4.2.1
+#        with:
+#          branch: gh-pages
+#          folder: dist
+
+      # Собираем Storybook
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      # Публикуем Storybook на Github Pages
+      - name: Deploy Storybook to Github Pages
         uses: JamesIves/github-pages-deploy-action@4.2.1
         with:
           branch: gh-pages
-          folder: dist
-
-      #      # Собираем Storybook
-      #      - name: Build Storybook
-      #        run: npm run build-storybook
-      #
-      #      # Публикуем Storybook на Github Pages
-      #      - name: Deploy Storybook to Github Pages
-      #        uses: JamesIves/github-pages-deploy-action@4.2.1
-      #        with:
-      #          branch: gh-pages
-      #          folder: storybook-static
-      #          commit-message: "Automatically publish Storybook"
+          folder: storybook-static
+          commit-message: "Automatically publish Storybook"
 
       # Останавливаем выполнение строго при неудачных тестах
       - name: Fail on failed tests
diff --git a/package-lock.json b/package-lock.json
index 5b1dfa392..43c29afe0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "classnames": "^2.5.1",
         "clsx": "^1.2.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -9798,6 +9799,11 @@
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -30552,6 +30558,11 @@
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
diff --git a/package.json b/package.json
index 492664d1f..bd2ea36d8 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/src/app/App.tsx b/src/app/App.tsx
index dcc0ff8ad..70ded6912 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import logo from './logo.svg';
+import { Resizer } from 'src/shared/resizer';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Текст писать тут
-        </p>
-      </header>
+      <React.Fragment>
+          <Resizer>
+              <div>
+                  <ul>
+                      <li>Neil Armstrong</li>
+                      <li>Alan Bean</li>
+                      <li>Peter Conrad</li>
+                      <li>Edgar Mitchell</li>
+                      <li>Alan Shepard</li>
+                  </ul>
+              </div>
+          </Resizer>
+      </React.Fragment>
     </div>
   );
 }
diff --git a/src/shared/resizer/Resizer.modules.sass b/src/shared/resizer/Resizer.modules.sass
new file mode 100644
index 000000000..1837c7ecd
--- /dev/null
+++ b/src/shared/resizer/Resizer.modules.sass
@@ -0,0 +1,21 @@
+.root
+    position: relative
+    border: 1px solid #894af0
+
+.wrapper
+    border: 1px solid #eff1f3
+    width: 100%
+    height: 100%
+    overflow: auto
+    box-sizing: border-box
+
+.resizer
+    position: absolute
+    right: 0
+    bottom: 0  
+    width: 20px
+    height: 20px
+    transform: translate(50%, 50%)
+    background-color: #1b48a8    
+    border: 1px solid #BCF788
+    border-radius: 100%
\ No newline at end of file
diff --git a/src/shared/resizer/Resizer.stories.tsx b/src/shared/resizer/Resizer.stories.tsx
new file mode 100644
index 000000000..250848ebf
--- /dev/null
+++ b/src/shared/resizer/Resizer.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Resizer } from './Resizer';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const Wrapper = () => (
+    <React.Fragment>
+        <Resizer>
+            <div>
+                <ul>
+                    <li>Neil Armstrong</li>
+                    <li>Alan Bean</li>
+                    <li>Peter Conrad</li>
+                    <li>Edgar Mitchell</li>
+                    <li>Alan Shepard</li>
+                </ul>
+            </div>
+        </Resizer>
+    </React.Fragment>
+);
+
+const meta: Meta<typeof Resizer> = {
+    title: 'Resizer',
+    component: Wrapper,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {};
diff --git a/src/shared/resizer/Resizer.tsx b/src/shared/resizer/Resizer.tsx
new file mode 100644
index 000000000..2b32d671a
--- /dev/null
+++ b/src/shared/resizer/Resizer.tsx
@@ -0,0 +1,38 @@
+import React, { FC, useRef, useState } from 'react';
+import s from './Resizer.modules.sass';
+
+export interface ResizerProps {
+    children: React.ReactElement;
+    initialWidth?: number;
+    initialHeight?: number;  
+};
+
+const MINIMUM_SIZE = 64;
+
+export const Resizer: FC<ResizerProps> = ({ children, initialWidth=400, initialHeight=200 }) => {
+    const refRoot = useRef<HTMLDivElement>();
+    const [size, setSize] = useState({ width: initialWidth, height: initialHeight });
+    const onMouseDown = (e: React.MouseEvent) => {
+        e.stopPropagation();  
+  
+        const mouseMoveHandler = (e: MouseEvent) => {
+            const rect = refRoot.current.getBoundingClientRect();
+            setSize({ width: Math.max(e.clientX - rect.x, MINIMUM_SIZE), height: Math.max(e.clientY - rect.y, MINIMUM_SIZE)});
+        };
+  
+        const mouseUpHandler = () => {
+            document.removeEventListener('mouseup', mouseUpHandler);
+            document.removeEventListener('mousemove', mouseMoveHandler);
+        };
+  
+        document.addEventListener('mousemove', mouseMoveHandler);
+        document.addEventListener('mouseup', mouseUpHandler);
+    };    
+
+    return (
+        <div ref={refRoot} className={s.root} style={{ width: size.width, height: size.height }}>
+            <div className={s.wrapper}>{children}</div>
+            <button type="button" className={s.resizer} onMouseDown={onMouseDown} />
+        </div>
+    );
+};
diff --git a/src/shared/resizer/index.ts b/src/shared/resizer/index.ts
new file mode 100644
index 000000000..03bce537b
--- /dev/null
+++ b/src/shared/resizer/index.ts
@@ -0,0 +1 @@
+export * from './Resizer';
diff --git a/webpack.config.js b/webpack.config.js
index 583dfd1ed..607979630 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = (_, args) => {
     output: {
       path: dist,
       publicPath:
-        args.mode === 'development' ? `http://${host}:${port}/` : undefined /* <- прописать данные своего github */,
+        args.mode === 'development' ? `http://${host}:${port}/` : "https://dan83g.github.io" /* <- прописать данные своего github */,
       filename: `js/[name].js`,
       chunkFilename: `js/[name].js`,
     },