diff --git a/apps/crud/assets/fonts/bion-book.otf b/apps/crud/assets/fonts/bion-book.otf
new file mode 100644
index 0000000..61c4b76
Binary files /dev/null and b/apps/crud/assets/fonts/bion-book.otf differ
diff --git a/apps/crud/assets/fonts/bion-book.ttf b/apps/crud/assets/fonts/bion-book.ttf
new file mode 100644
index 0000000..54f2876
Binary files /dev/null and b/apps/crud/assets/fonts/bion-book.ttf differ
diff --git a/apps/crud/assets/fonts/bion-book.woff b/apps/crud/assets/fonts/bion-book.woff
new file mode 100644
index 0000000..4b112f4
Binary files /dev/null and b/apps/crud/assets/fonts/bion-book.woff differ
diff --git a/apps/crud/assets/fonts/bion-book.woff2 b/apps/crud/assets/fonts/bion-book.woff2
new file mode 100644
index 0000000..2b82061
Binary files /dev/null and b/apps/crud/assets/fonts/bion-book.woff2 differ
diff --git a/apps/crud/src/app/app.tsx b/apps/crud/src/app/app.tsx
index 0645eb4..39257ce 100644
--- a/apps/crud/src/app/app.tsx
+++ b/apps/crud/src/app/app.tsx
@@ -1,13 +1,21 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.scss';
-
-import NxWelcome from './nx-welcome';
+import {Routes, Route} from "react-router-dom"
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import Main from "../../../../page/src/lib//main/main"
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import {Navbar} from "@perm-hack/ui";
+import {Statistics} from "@perm-hack/page";
 
 export function App() {
   return (
-    <div>
-      <NxWelcome title="crud" />
-    </div>
+    <main>
+      <Navbar/>
+      <Routes>
+        <Route element={<Main/>} path="/"/>
+        <Route element={<Statistics/>} path="/statistics"/>
+      </Routes>
+    </main>
   );
 }
 
diff --git a/apps/crud/src/main.tsx b/apps/crud/src/main.tsx
index 5b0ece9..19e01fb 100644
--- a/apps/crud/src/main.tsx
+++ b/apps/crud/src/main.tsx
@@ -2,12 +2,15 @@ import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 import App from './app/app';
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );
diff --git a/apps/crud/src/styles.scss b/apps/crud/src/styles.scss
index 844323d..3e20b8f 100644
--- a/apps/crud/src/styles.scss
+++ b/apps/crud/src/styles.scss
@@ -1,4 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* You can add global styles to this file, and also import other style files */
+
+
+
+@font-face {
+  font-family: "Bion";
+  font-weight: 400;
+  src: local('Bion'), url(../assets/fonts/bion-book.otf) format("otf");
+  src: local('Bion'), url(../assets/fonts/bion-book.ttf) format("ttf");
+  src: local('Bion'), url(../assets/fonts/bion-book.woff) format("woff");
+  src: local('Bion'), url(../assets/fonts/bion-book.woff2) format("woff2");
+}
+#root {
+  --bg: #D9D9D9;
+  --white: #fff;
+  --black: #000;
+  --gray: #4A4A4A;
+  --green: #65843F;
+
+
+  --border-large: 42px;
+  --border-medium: 28px;
+
+
+  font-family: "Bion", sans-serif;
+  font-size: 20px;
+}
diff --git a/package-lock.json b/package-lock.json
index a08a226..a1f41be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,16 @@
         "@nestjs/core": "^10.0.2",
         "@nestjs/platform-express": "^10.0.2",
         "@swc/helpers": "~0.5.2",
+        "@tanstack/react-query": "^5.0.5",
+        "@types/classnames": "^2.3.1",
         "@types/react-router-dom": "^5.3.3",
+        "antd": "^5.10.2",
         "axios": "^1.0.0",
+        "classnames": "^2.3.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-router-dom": "^6.17.0",
+        "react-switch-selector": "^2.2.1",
         "reflect-metadata": "^0.1.13",
         "rxjs": "^7.8.0",
         "tslib": "^2.3.0"
@@ -217,6 +222,71 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.0.tgz",
+      "integrity": "sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.17.2.tgz",
+      "integrity": "sha512-vu7lnfEx4Mf8MPzZxn506Zen3Nt4fRr2uutwvdCuTCN5IiU0lDdQ0tiJ24/rmB8+pefwjluYsbyzbQSbgfJy+A==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.0.10",
+        "rc-util": "^5.35.0",
+        "stylis": "^4.0.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz",
+      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.3.0",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
+      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
+    },
+    "node_modules/@ant-design/react-slick": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
+      "integrity": "sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
@@ -2239,7 +2309,6 @@
       "version": "7.23.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
       "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2334,6 +2403,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@cypress/request": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
@@ -2411,6 +2488,16 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -4405,6 +4492,118 @@
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
       "dev": true
     },
+    "node_modules/@rc-component/color-picker": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.4.1.tgz",
+      "integrity": "sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@ctrl/tinycolor": "^3.6.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/context": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/mini-decimal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/mutate-observer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/tour": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.10.0.tgz",
+      "integrity": "sha512-voV0BKaTJbewB9LLgAHQ7tAGG7rgDkKQkZo82xw2gIk542hY+o7zwoqdN16oHhIKk7eG/xi+mdXrONT62Dt57A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "@rc-component/trigger": "^1.3.6",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/trigger": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.0.tgz",
+      "integrity": "sha512-vloGnWpeTmt7DBw0OHnG9poQ8h1WFh0hebq6fpgVjGYSxm6JU8rLH+kNwVNNvhL6Rg5He4ESjOk6O7uF9dJhxA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.38.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
@@ -5175,6 +5374,40 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.0.5.tgz",
+      "integrity": "sha512-MThCETMkHDHTnFZHp71L+SqTtD5d6XHftFCVR1xRJdWM3qGrlQ2VCXaj0SKVcyJej2e1Opa2c7iknu1llxCDNQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.0.5.tgz",
+      "integrity": "sha512-ZG0Q4HZ0iuI8mWiZ2/MdVYPHbrmAVhMn7+gLOkxJh6zLIgCL4luSZlohzN5Xt4MjxfxxWioO1nemwpudaTsmQg==",
+      "dependencies": {
+        "@tanstack/query-core": "5.0.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -5458,6 +5691,15 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "classnames": "*"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.37",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.37.tgz",
@@ -6658,6 +6900,69 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/antd": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.10.2.tgz",
+      "integrity": "sha512-0kV6PmlJi7vhPmYH9GCAlU62ZhiuLF+gE3REJ/9MZTo++/3i5q6SALNoRgHLMsa+rX50U3RO3wJVY+fPib594Q==",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/cssinjs": "^1.17.2",
+        "@ant-design/icons": "^5.2.6",
+        "@ant-design/react-slick": "~1.0.2",
+        "@babel/runtime": "^7.18.3",
+        "@ctrl/tinycolor": "^3.6.1",
+        "@rc-component/color-picker": "~1.4.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/tour": "~1.10.0",
+        "@rc-component/trigger": "^1.17.2",
+        "classnames": "^2.2.6",
+        "copy-to-clipboard": "^3.2.0",
+        "dayjs": "^1.11.1",
+        "qrcode.react": "^3.1.0",
+        "rc-cascader": "~3.18.1",
+        "rc-checkbox": "~3.1.0",
+        "rc-collapse": "~3.7.1",
+        "rc-dialog": "~9.3.4",
+        "rc-drawer": "~6.5.2",
+        "rc-dropdown": "~4.1.0",
+        "rc-field-form": "~1.39.0",
+        "rc-image": "~7.3.1",
+        "rc-input": "~1.2.1",
+        "rc-input-number": "~8.1.0",
+        "rc-mentions": "~2.8.0",
+        "rc-menu": "~9.12.2",
+        "rc-motion": "^2.9.0",
+        "rc-notification": "~5.2.0",
+        "rc-pagination": "~3.6.1",
+        "rc-picker": "~3.14.5",
+        "rc-progress": "~3.5.1",
+        "rc-rate": "~2.12.0",
+        "rc-resize-observer": "^1.4.0",
+        "rc-segmented": "~2.2.2",
+        "rc-select": "~14.9.2",
+        "rc-slider": "~10.3.1",
+        "rc-steps": "~6.0.1",
+        "rc-switch": "~4.1.0",
+        "rc-table": "~7.34.4",
+        "rc-tabs": "~12.12.1",
+        "rc-textarea": "~1.4.0",
+        "rc-tooltip": "~6.1.1",
+        "rc-tree": "~5.7.12",
+        "rc-tree-select": "~5.13.0",
+        "rc-upload": "~4.3.5",
+        "rc-util": "^5.38.0",
+        "scroll-into-view-if-needed": "^3.0.3",
+        "throttle-debounce": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -6760,6 +7065,11 @@
       "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==",
       "dev": true
     },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -6887,6 +7197,11 @@
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -8011,6 +8326,11 @@
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -8293,6 +8613,11 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8429,6 +8754,14 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/copy-webpack-plugin": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
@@ -9221,8 +9554,7 @@
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "dev": true
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -11789,6 +12121,14 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
+      "integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -13984,6 +14324,14 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -16642,6 +16990,14 @@
         }
       ]
     },
+    "node_modules/qrcode.react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
+      "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -16737,6 +17093,576 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rc-cascader": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.18.1.tgz",
+      "integrity": "sha512-M7Xr5Fs/E87ZGustfObtBYQjsvBCET0UX2JYXB2GmOP+2fsZgjaRGXK+CJBmmWXQ6o4OFinpBQBXG4wJOQ5MEg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.9.0",
+        "rc-tree": "~5.7.0",
+        "rc-util": "^5.35.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-checkbox": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.1.0.tgz",
+      "integrity": "sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.25.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-collapse": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.1.tgz",
+      "integrity": "sha512-N/7ejyiTf3XElNJBBpxqnZBUuMsQWEOPjB2QkfNvZ/Ca54eAvJXuOD1EGbCWCk2m7v/MSxku7mRpdeaLOCd4Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog": {
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz",
+      "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-drawer": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.5.2.tgz",
+      "integrity": "sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.1.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.36.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dropdown": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
+      "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/trigger": "^1.7.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
+      }
+    },
+    "node_modules/rc-field-form": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.39.0.tgz",
+      "integrity": "sha512-V7Wk7uji1jBsUGGgP788H9rpFy55HLiD4lywTlktUGjK7EgW5dt+mq1MPbtCpPRMzs83vZBW4SOChOmCACz4WA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "async-validator": "^4.1.0",
+        "rc-util": "^5.32.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-image": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.3.1.tgz",
+      "integrity": "sha512-Tu3vcUyMHa6zxTiQRzHt1glbGwuNWzeQBG9O6qIdy/+1ue0Qb70it+jUct1YPVNkJa/QfaTfUhmsNsqrw7mgsg==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.3.0",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-input": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.2.1.tgz",
+      "integrity": "sha512-nQRmBvEFoGi+SNRDavccZ8ueyhFgmxkWqIt4aDyuNJgUZF12HJKIwDhAafUM7N+g7PyuW9FH3pf3zPHzdiCWbA==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-input-number": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.1.0.tgz",
+      "integrity": "sha512-bdHgduOxuN0lrhzgPmoKbhRD4GLIzVcddVz972/JHPHr7oLwPX5xDb9w4bXhuMzyT2VzQy7nggRCfH3yAl09oA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-input": "~1.2.1",
+        "rc-util": "^5.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-mentions": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.8.0.tgz",
+      "integrity": "sha512-LBMkO6bSGhEvS1CvMK978qGN82tI+mzk7l/uTiQJH+UDiwpvq+pxK4DxU5b6Q1T5LW6bn2pSua9RaZKZrDoBOw==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "^2.2.6",
+        "rc-input": "~1.2.1",
+        "rc-menu": "~9.12.0",
+        "rc-textarea": "~1.4.0",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-menu": {
+      "version": "9.12.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.2.tgz",
+      "integrity": "sha512-NzloFH2pRUYmQ3S/YbJAvRkgCZaLvq0sRa5rgJtuIHLfPPprNHNyepeSlT64+dbVqI4qRWL44VN0lUCldCbbfg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.17.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-motion": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.0.tgz",
+      "integrity": "sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-notification": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.2.0.tgz",
+      "integrity": "sha512-HwUSypEW4mfOpiakJ7dm6TAKf+3zuSR2xm0I0XMes493rtA3n4EVMvQyldrp23hUwCE3RFj8oncyU1E8iNC4ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.9.0",
+        "rc-util": "^5.20.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-overflow": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
+      "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-pagination": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.6.1.tgz",
+      "integrity": "sha512-R/sUnKKXx1Nm4kZfUKS3YKa7yEPF1ZkVB/AynQaHt+nMER7h9wPTfliDJFdYo+RM/nk2JD4Yc5QpUq8fIQHeug==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.32.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-picker": {
+      "version": "3.14.6",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz",
+      "integrity": "sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rc-progress": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz",
+      "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-rate": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.12.0.tgz",
+      "integrity": "sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-resize-observer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.38.0",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-segmented": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.2.2.tgz",
+      "integrity": "sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-select": {
+      "version": "14.9.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.9.2.tgz",
+      "integrity": "sha512-VQ15sRFgPURHb8ZcZNSDtb2rAw3+C9xlL0nDziwNHTEW1KvEpZ8y+0v5w24X/Bpl9b3cW1BOyW1F5UqSAq+7Dg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-slider": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.3.1.tgz",
+      "integrity": "sha512-XszsZLkbjcG9ogQy/zUC0n2kndoKUAnY/Vnk1Go5Gx+JJQBz0Tl15d5IfSiglwBUZPS9vsUJZkfCmkIZSqWbcA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.27.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-steps": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-switch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-table": {
+      "version": "7.34.4",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.34.4.tgz",
+      "integrity": "sha512-os+i88Y2AO/6dNkOgJkKSHgXYaZZGnuOEEe+nyaq5IRgvAQNhLysUjXt2objtBeFDEZR8TqXrajwBNRUwunmdw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.4.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.36.0",
+        "rc-virtual-list": "^3.11.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tabs": {
+      "version": "12.12.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.12.1.tgz",
+      "integrity": "sha512-e10VBjEkECdPl4XZSs9to81SE+mgclBTM7J8/LMsFqmJoi05Tci91bRnmeeDtrcOCx2PuZdJv57XUlC4d8PEIw==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.1.0",
+        "rc-menu": "~9.12.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.34.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-textarea": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.4.0.tgz",
+      "integrity": "sha512-CiqK+uyoJlnfufbC0kwfHJpfElhQacuDSNyNQ/xGnA/QMaJLDbgmqRT8QmX0T0KD/ws/hy6qqRaGJSsrRR5uiQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-input": "~1.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tooltip": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.2.tgz",
+      "integrity": "sha512-89zwvybvCxGJu3+gGF8w5AXd4HHk6hIN7K0vZbkzjilVaEAIWPqc1fcyeUeP71n3VCcw7pTL9LyFupFbrx8gHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/trigger": "^1.18.0",
+        "classnames": "^2.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tree": {
+      "version": "5.7.12",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.7.12.tgz",
+      "integrity": "sha512-LXA5nY2hG5koIAlHW5sgXgLpOMz+bFRbnZZ+cCg0tQs4Wv1AmY7EDi1SK7iFXhslYockbqUerQan82jljoaItg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.1"
+      },
+      "engines": {
+        "node": ">=10.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-tree-select": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.13.0.tgz",
+      "integrity": "sha512-g01JU9EdE7j/9KfDKtmvFqJ7ZDNIYDzkpmAXllbTBFoRNhWJBjW1x/dCZLVG+IdZeIz8SKJkgZzCf1CUZrzV/Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-select": "~14.9.0",
+        "rc-tree": "~5.7.0",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-upload": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.5.tgz",
+      "integrity": "sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.38.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.0.tgz",
+      "integrity": "sha512-yV/YBNdFn+edyBpBdCqkPE29Su0jWcHNgwx2dJbRqMrMfrUcMJUjCRV+ZPhcvWyKFJ63GzEerPrz9JIVo0zXmA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-virtual-list": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.2.tgz",
+      "integrity": "sha512-MTFLL2LOHr3+/+r+WjTIs6j8XmJE6EqdOsJvCH8SWig7qyik3aljCEImUtw5tdWR0tQhXUfbv7P7nZaLY91XPg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -16763,8 +17689,7 @@
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.0",
@@ -16805,6 +17730,55 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-switch-selector": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-switch-selector/-/react-switch-selector-2.2.1.tgz",
+      "integrity": "sha512-Dttz6LuyRoDuf5QfF4wzV+UtNRsa54toyTUEud7Z9++Cc5s59BpCzYGLJ0kNqs093SHDHjBAaCxAuKHGKsMJEA==",
+      "dependencies": {
+        "goober": "2.1.8",
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+      },
+      "peerDependencies": {
+        "goober": "^2.1.1",
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-switch-selector/node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-switch-selector/node_modules/react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      },
+      "peerDependencies": {
+        "react": "17.0.2"
+      }
+    },
+    "node_modules/react-switch-selector/node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16882,8 +17856,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -16991,6 +17964,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -17313,6 +18291,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
     "node_modules/secure-compare": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
@@ -17925,6 +18911,11 @@
         "node": ">=0.6.19"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -18158,6 +19149,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/stylus": {
       "version": "0.59.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
@@ -18552,6 +19548,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/throttleit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -18633,6 +19637,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/package.json b/package.json
index baaa70a..f2ccd54 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,16 @@
     "@nestjs/core": "^10.0.2",
     "@nestjs/platform-express": "^10.0.2",
     "@swc/helpers": "~0.5.2",
+    "@tanstack/react-query": "^5.0.5",
+    "@types/classnames": "^2.3.1",
     "@types/react-router-dom": "^5.3.3",
+    "antd": "^5.10.2",
     "axios": "^1.0.0",
+    "classnames": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.17.0",
+    "react-switch-selector": "^2.2.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
     "tslib": "^2.3.0"
diff --git a/page/src/index.ts b/page/src/index.ts
index 6ee05e4..6a9135b 100644
--- a/page/src/index.ts
+++ b/page/src/index.ts
@@ -1 +1,3 @@
+export * from './lib/statistics/statistics';
+export * from './lib/main/main';
 export * from './lib/page';
diff --git a/page/src/lib/main/main.module.scss b/page/src/lib/main/main.module.scss
new file mode 100644
index 0000000..7caa9c6
--- /dev/null
+++ b/page/src/lib/main/main.module.scss
@@ -0,0 +1,8 @@
+.container {
+  margin: 0 20px;
+  padding: 20px;
+  border-radius: 42px;
+  background-color: var(--bg);
+  display: flex;
+  gap: 0 50px;
+}
diff --git a/page/src/lib/main/main.spec.tsx b/page/src/lib/main/main.spec.tsx
new file mode 100644
index 0000000..ba7bef2
--- /dev/null
+++ b/page/src/lib/main/main.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Main from './main';
+
+describe('Main', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Main />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/page/src/lib/main/main.tsx b/page/src/lib/main/main.tsx
new file mode 100644
index 0000000..9602dee
--- /dev/null
+++ b/page/src/lib/main/main.tsx
@@ -0,0 +1,19 @@
+import styles from './main.module.scss';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import {Camera, Sidebar} from "@perm-hack/ui";
+
+/* eslint-disable-next-line */
+export interface MainProps {
+}
+
+
+export function Main(props: MainProps) {
+  return (
+    <div className={styles.container}>
+      <Sidebar/>
+      <Camera/>
+    </div>
+  );
+}
+
+export default Main;
diff --git a/page/src/lib/statistics/statistics.module.scss b/page/src/lib/statistics/statistics.module.scss
new file mode 100644
index 0000000..9888053
--- /dev/null
+++ b/page/src/lib/statistics/statistics.module.scss
@@ -0,0 +1,5 @@
+.container {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/page/src/lib/statistics/statistics.spec.tsx b/page/src/lib/statistics/statistics.spec.tsx
new file mode 100644
index 0000000..8603850
--- /dev/null
+++ b/page/src/lib/statistics/statistics.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Statistics from './statistics';
+
+describe('Statistics', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Statistics />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/page/src/lib/statistics/statistics.tsx b/page/src/lib/statistics/statistics.tsx
new file mode 100644
index 0000000..7e84aef
--- /dev/null
+++ b/page/src/lib/statistics/statistics.tsx
@@ -0,0 +1,15 @@
+import cls from './statistics.module.scss';
+import {Filters} from "@perm-hack/ui";
+
+/* eslint-disable-next-line */
+export interface StatisticsProps {}
+
+export function Statistics(props: StatisticsProps) {
+  return (
+    <div className={cls.container}>
+      <Filters/>
+    </div>
+  );
+}
+
+export default Statistics;
diff --git a/ui/src/index.ts b/ui/src/index.ts
index 48da4fd..2656081 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -1 +1,7 @@
+export * from './lib/filters/filters';
+export * from './lib/button/button';
+export * from './lib/sidebar-item/sidebar-item';
+export * from './lib/camera/camera';
+export * from './lib/sidebar/sidebar';
+export * from './lib/navbar/navbar';
 export * from './lib/ui';
diff --git a/ui/src/lib/button/button.module.scss b/ui/src/lib/button/button.module.scss
new file mode 100644
index 0000000..da19c9a
--- /dev/null
+++ b/ui/src/lib/button/button.module.scss
@@ -0,0 +1,15 @@
+.button {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  border: 1px solid var(--black);
+  border-radius: var(--border-medium);
+  padding: 2px 10px;
+  & a {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+}
diff --git a/ui/src/lib/button/button.spec.tsx b/ui/src/lib/button/button.spec.tsx
new file mode 100644
index 0000000..aff7007
--- /dev/null
+++ b/ui/src/lib/button/button.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Button from './button';
+
+describe('Button', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Button />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/button/button.tsx b/ui/src/lib/button/button.tsx
new file mode 100644
index 0000000..ecc583c
--- /dev/null
+++ b/ui/src/lib/button/button.tsx
@@ -0,0 +1,25 @@
+import cls from './button.module.scss';
+import {DetailedHTMLProps, HTMLAttributes, ReactNode} from "react";
+import {Link} from "react-router-dom";
+import cn from "classnames"
+/* eslint-disable-next-line */
+export interface ButtonProps extends DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>{
+  children: ReactNode
+  link: string
+}
+
+export function Button({link, children, className, ...props}: ButtonProps) {
+  return (
+    <button className={cn(cls.button, className)}>
+      <Link to={link}>
+        {children}
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4.375 10.625L10.625 4.375" stroke="#4A4A4A" strokeLinecap="round" strokeLinejoin="round"/>
+          <path d="M4.375 4.375H10.625V10.625" stroke="#4A4A4A" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </Link>
+    </button>
+  );
+}
+
+export default Button;
diff --git a/ui/src/lib/camera/camera.module.scss b/ui/src/lib/camera/camera.module.scss
new file mode 100644
index 0000000..4ab1b21
--- /dev/null
+++ b/ui/src/lib/camera/camera.module.scss
@@ -0,0 +1,64 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  flex: 1 1 auto;
+  padding: 20px;
+  background-color: var(--white);
+  border-radius: var(--border-large);
+}
+
+.select {
+  border: 1px solid var(--black);
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  & div {
+    padding: 5px 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+  }
+
+  & div:not(:first-child) {
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+  }
+
+  & .date {
+    color: var(--green);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+
+  & .time {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+
+  & .line {
+    height: 100%;
+    width: 1px;
+    background-color: var(--black);
+  }
+
+  & .name {
+    color: var(--green);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+
+  & .number {
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+}
diff --git a/ui/src/lib/camera/camera.spec.tsx b/ui/src/lib/camera/camera.spec.tsx
new file mode 100644
index 0000000..c0625e3
--- /dev/null
+++ b/ui/src/lib/camera/camera.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Camera from './camera';
+
+describe('Camera', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Camera />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/camera/camera.tsx b/ui/src/lib/camera/camera.tsx
new file mode 100644
index 0000000..55e1f8d
--- /dev/null
+++ b/ui/src/lib/camera/camera.tsx
@@ -0,0 +1,42 @@
+import cls from './camera.module.scss';
+
+/* eslint-disable-next-line */
+export interface CameraProps {
+}
+
+export function Camera(props: CameraProps) {
+  return (
+    <div className={cls.container}>
+      <div className={cls.select}>
+        <div>
+          <p className={cls.date}>
+            2020-23-21
+          </p>
+          <p className={cls.time}>
+            14:32
+          </p>
+        </div>
+        <span className={cls.line}></span>
+        <div>
+          <p className={cls.name}>
+            Cum
+          </p>
+          <p className={cls.number}>
+            №69
+          </p>
+          <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M21 9.16699H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M21 5.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M21 12.833H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M21 16.5H3" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div>
+        here camera
+      </div>
+    </div>
+  );
+}
+
+export default Camera;
diff --git a/ui/src/lib/filters/filters.module.scss b/ui/src/lib/filters/filters.module.scss
new file mode 100644
index 0000000..1c38f2f
--- /dev/null
+++ b/ui/src/lib/filters/filters.module.scss
@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+}
+.button {
+  font-size: 14px;
+  border-radius: 20px;
+  padding: 5px 10px;
+  color: var(--white);
+  background-color: #94BF5E;
+}
diff --git a/ui/src/lib/filters/filters.spec.tsx b/ui/src/lib/filters/filters.spec.tsx
new file mode 100644
index 0000000..655d608
--- /dev/null
+++ b/ui/src/lib/filters/filters.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Filters from './filters';
+
+describe('Filters', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Filters />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/filters/filters.tsx b/ui/src/lib/filters/filters.tsx
new file mode 100644
index 0000000..2e54e82
--- /dev/null
+++ b/ui/src/lib/filters/filters.tsx
@@ -0,0 +1,64 @@
+import cls from './filters.module.scss';
+import {ConfigProvider, DatePicker} from "antd";
+import SwitchSelector from "react-switch-selector";
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import {useState} from "react";
+
+/* eslint-disable-next-line */
+
+enum timeFormatEnum {
+  DATE = "date",
+  PERIOD = "period"
+}
+
+export function Filters() {
+  const [timeFormat, setTimeFormat] = useState<timeFormatEnum>(timeFormatEnum.DATE)
+  const options = [
+    {
+      label: "Дата",
+      value: "date",
+      selectedBackgroundColor: "#94BF5E"
+    },
+    {
+      label: "Период",
+      value: "period",
+      selectedBackgroundColor: "#94BF5E"
+    },
+  ]
+
+  const handleChange = (time: never, timeString: string) => {
+    console.log(timeString)
+  }
+  const onChange = (newValue: timeFormatEnum) => {
+    setTimeFormat(newValue)
+  };
+
+  return (
+    <div className={cls.container}>
+      <div className="your-required-wrapper" style={{width: 200, height: 30}}>
+        <SwitchSelector
+          onChange={onChange}
+          options={options}
+          fontSize={16}
+          backgroundColor={"#fff"}
+          fontColor={"#94BF5E"}
+          border={"1px solid #94BF5E"}
+        />
+      </div>
+      <ConfigProvider theme={{
+        token: {
+          colorPrimary: "#94BF5E"
+        }
+      }}>
+        {timeFormat === timeFormatEnum.PERIOD ?
+          <DatePicker.RangePicker placeholder={["Время начала", "Время конца"]} onChange={handleChange} showTime/> :
+          <DatePicker onChange={handleChange} showTime placeholder="Дата и время"/>
+        }
+      </ConfigProvider>
+      <button className={cls.button}>Показать</button>
+    </div>
+  );
+}
+
+export default Filters;
diff --git a/ui/src/lib/navbar/navbar.module.scss b/ui/src/lib/navbar/navbar.module.scss
new file mode 100644
index 0000000..4db8c93
--- /dev/null
+++ b/ui/src/lib/navbar/navbar.module.scss
@@ -0,0 +1,24 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  background-color: var(--bg);
+  padding: 10px;
+  border-radius: var(--border-medium);
+  margin: 10px;
+  gap: 20px;
+  -webkit-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+  -moz-box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+  box-shadow: 0px 5px 9px -8px rgba(34, 60, 80, 0.6);
+}
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.logo {
+  padding: 5px 10px;
+  border-radius: 20px;
+  background-color: var(--white);
+}
diff --git a/ui/src/lib/navbar/navbar.spec.tsx b/ui/src/lib/navbar/navbar.spec.tsx
new file mode 100644
index 0000000..25dd4ae
--- /dev/null
+++ b/ui/src/lib/navbar/navbar.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Navbar from './navbar';
+
+describe('Navbar', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Navbar />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/navbar/navbar.tsx b/ui/src/lib/navbar/navbar.tsx
new file mode 100644
index 0000000..6c9b2d6
--- /dev/null
+++ b/ui/src/lib/navbar/navbar.tsx
@@ -0,0 +1,20 @@
+import styles from './navbar.module.scss';
+import {Link} from "react-router-dom";
+
+/* eslint-disable-next-line */
+export interface NavbarProps {}
+
+export function Navbar(props: NavbarProps) {
+  return (
+    <div className={styles.wrapper}>
+      <Link to={"/"} className={styles.logo}>Logo</Link>
+      <ul className={styles.container}>
+        <li>link1</li>
+        <li>link2</li>
+        <li>link3</li>
+      </ul>
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/ui/src/lib/sidebar-item/sidebar-item.module.scss b/ui/src/lib/sidebar-item/sidebar-item.module.scss
new file mode 100644
index 0000000..4153ee0
--- /dev/null
+++ b/ui/src/lib/sidebar-item/sidebar-item.module.scss
@@ -0,0 +1,59 @@
+.item {
+  background: var(--white);
+  border-radius: var(--border-medium);
+  padding: 10px 20px;
+  display: flex;
+  gap: 0 8px;
+  justify-content: space-between;
+}
+
+.line {
+  width: 1px;
+  background-color: var(--black);
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: 0 10px;
+  justify-content: center;
+  .text {
+    text-align: end;
+    color: var(--gray);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+
+  .percent {
+    font-size: 54px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+}
+
+.info {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  & p {
+    padding: 0;
+    margin: 0;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    color: var(--black
+    );
+  }
+
+  & span {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+  }
+}
diff --git a/ui/src/lib/sidebar-item/sidebar-item.spec.tsx b/ui/src/lib/sidebar-item/sidebar-item.spec.tsx
new file mode 100644
index 0000000..1ffcf2f
--- /dev/null
+++ b/ui/src/lib/sidebar-item/sidebar-item.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import SidebarItem from './sidebar-item';
+
+describe('SidebarItem', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<SidebarItem />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/sidebar-item/sidebar-item.tsx b/ui/src/lib/sidebar-item/sidebar-item.tsx
new file mode 100644
index 0000000..4390169
--- /dev/null
+++ b/ui/src/lib/sidebar-item/sidebar-item.tsx
@@ -0,0 +1,63 @@
+import styles from './sidebar-item.module.scss';
+import Button from "../button/button";
+
+/* eslint-disable-next-line */
+export interface SidebarItemProps {
+  name: string
+  percent: number | string
+  weight: number | string
+  href: string
+}
+
+export function SidebarItem() {
+  const obj: SidebarItemProps[] = [
+    {
+      name: "Дерево",
+      href: "some",
+      percent: "10%",
+      weight: 200
+    },
+    {
+      name: "Металл",
+      href: "some",
+      percent: "10%",
+      weight: 200
+    },
+    {
+      name: "Пластик",
+      href: "some",
+      percent: "10%",
+      weight: 200
+    },
+    {
+      name: "Стекло",
+      href: "some",
+      percent: "10%",
+      weight: 200
+    }
+  ]
+  return (
+    <>
+      {obj.map((item, i) => (
+        <div className={styles.item} key={i * 2}>
+          <div className={styles.heading}>
+            <p className={styles.text}>
+              {item.name}
+            </p>
+            <p className={styles.percent}>
+              {item.percent}
+            </p>
+          </div>
+          <span className={styles.line}></span>
+          <div className={styles.info}>
+            <p>{item.weight}</p>
+            <span>Тонн</span>
+            <Button link={"some"} className={styles.link}>Аналитика</Button>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default SidebarItem;
diff --git a/ui/src/lib/sidebar/sidebar.module.scss b/ui/src/lib/sidebar/sidebar.module.scss
new file mode 100644
index 0000000..6048683
--- /dev/null
+++ b/ui/src/lib/sidebar/sidebar.module.scss
@@ -0,0 +1,6 @@
+.container {
+  flex: 0 0 20%;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
diff --git a/ui/src/lib/sidebar/sidebar.spec.tsx b/ui/src/lib/sidebar/sidebar.spec.tsx
new file mode 100644
index 0000000..58cc891
--- /dev/null
+++ b/ui/src/lib/sidebar/sidebar.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Sidebar from './sidebar';
+
+describe('Sidebar', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Sidebar />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/ui/src/lib/sidebar/sidebar.tsx b/ui/src/lib/sidebar/sidebar.tsx
new file mode 100644
index 0000000..20f1d87
--- /dev/null
+++ b/ui/src/lib/sidebar/sidebar.tsx
@@ -0,0 +1,15 @@
+import styles from './sidebar.module.scss';
+import SidebarItem from "../sidebar-item/sidebar-item";
+
+/* eslint-disable-next-line */
+export interface SidebarProps {}
+
+export function Sidebar(props: SidebarProps) {
+  return (
+    <div className={styles['container']}>
+      <SidebarItem/>
+    </div>
+  );
+}
+
+export default Sidebar;
diff --git a/ui/src/lib/ui.module.scss b/ui/src/lib/ui.module.scss
index 45c2aa4..8acd1d9 100644
--- a/ui/src/lib/ui.module.scss
+++ b/ui/src/lib/ui.module.scss
@@ -1,7 +1,6 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}