diff --git a/client/configs/storybook/preview.ts b/client/configs/storybook/preview.ts
index 75b8a24..d0b942f 100644
--- a/client/configs/storybook/preview.ts
+++ b/client/configs/storybook/preview.ts
@@ -1,4 +1,4 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react-vite';
 import { setupWorker } from 'msw/browser';
 
@@ -28,12 +28,11 @@ const preview: Preview = {
   decorators: [
     StyleDecorator,
     RouterDecorator,
-    withThemeByClassName({
-      themes: {
-        twitter: 'theme-twt',
-        facebook: 'theme-fb',
-      },
-      defaultTheme: 'twitter',
+    withThemeByDataAttribute({
+      themes: { light: 'light', dark: 'dark' },
+      defaultTheme: 'dark',
+      attributeName: 'data-theme',
+      parentSelector: 'body',
     }),
   ],
 };
diff --git a/client/src/app/providers/router/ui/MainLayout/Layout.module.scss b/client/src/app/providers/router/ui/MainLayout/Layout.module.scss
index 729cbb2..f96a0b9 100644
--- a/client/src/app/providers/router/ui/MainLayout/Layout.module.scss
+++ b/client/src/app/providers/router/ui/MainLayout/Layout.module.scss
@@ -1,8 +1,8 @@
 .layout {
   display: grid;
-  grid-template-columns: 280px auto;
-  gap: 20px;
-  margin: 20px;
 
   height: var(--layout-height);
+  margin: 20px;
+  gap: 20px;
+  grid-template-columns: 280px auto;
 }
diff --git a/client/src/app/providers/router/ui/WithoutAside/WithoutAside.module.scss b/client/src/app/providers/router/ui/WithoutAside/WithoutAside.module.scss
index aa0936a..61319e8 100644
--- a/client/src/app/providers/router/ui/WithoutAside/WithoutAside.module.scss
+++ b/client/src/app/providers/router/ui/WithoutAside/WithoutAside.module.scss
@@ -1,6 +1,6 @@
 .layout {
 
-  margin: 20px;
-
   height: var(--layout-height);
+
+  margin: 20px;
 }
diff --git a/client/src/app/styles/index.scss b/client/src/app/styles/index.scss
index 76aa8b4..b41983a 100644
--- a/client/src/app/styles/index.scss
+++ b/client/src/app/styles/index.scss
@@ -1,3 +1,4 @@
-@use "./scss/reset.scss";
-@use "./scss/vars.scss";
-@use "./scss/base.scss";
+@use "./scss/reset";
+@use "./scss/vars";
+@use "./scss/fonts";
+@use "./scss/base";
diff --git a/client/src/app/styles/scss/base.scss b/client/src/app/styles/scss/base.scss
index 48bf466..17a6a65 100644
--- a/client/src/app/styles/scss/base.scss
+++ b/client/src/app/styles/scss/base.scss
@@ -5,9 +5,9 @@
 }
 
 body {
+  overflow: hidden;
   width: 100%;
   height: 100vh;
-  color: var(--color-text);
   background: conic-gradient(
     from 330deg at 50% 50%,
     var(--grad-1) 0deg,
@@ -16,10 +16,10 @@ body {
     var(--grad-4) 270deg,
     var(--grad-1) 360deg
   );
+  background-blend-mode: screen;
 
   background-size: 100% 100%;
-  background-blend-mode: screen;
-  overflow: hidden;
+  color: var(--color-text);
 
   font: var(--font-m);
 }
diff --git a/client/src/app/styles/scss/fonts.scss b/client/src/app/styles/scss/fonts.scss
index 1d7d8e8..28aa7c3 100644
--- a/client/src/app/styles/scss/fonts.scss
+++ b/client/src/app/styles/scss/fonts.scss
@@ -1,21 +1,21 @@
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
-  font-weight: 500;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 500;
+  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
-  font-weight: 400;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
-  font-weight: 600;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
 }
 
diff --git a/client/src/app/styles/scss/vars.scss b/client/src/app/styles/scss/vars.scss
index 0bf3498..5108e56 100644
--- a/client/src/app/styles/scss/vars.scss
+++ b/client/src/app/styles/scss/vars.scss
@@ -1,17 +1,15 @@
-@use './fonts.scss';
+@use './fonts';
 
 :root {
+
   /* Шрифты */
   --family-main: 'Manrope-Custom';
-
   --font-size-m: 16px;
   --font-line-m: 24px;
   --font-m: 16px / 24px var(--family-main);
-
   --font-size-l: 24px;
   --font-line-l: 32px;
   --font-l: 24px / 32px var(--family-main);
-
   --font-size-xl: 32px;
   --font-line-xl: 40px;
   --font-xl: 32px / 40px var(--family-main);
@@ -25,7 +23,7 @@
   --z-index-modal: 10;
 
   /* Цвета */
-  --overlay: rgba(0, 0, 0, 0.5);
+  --overlay: rgba(0 0 0 / 0.5);
   --red-light: #ff0000;
   --red-dark: #c50a0a;
   --color-error: #ff0000;
@@ -38,6 +36,6 @@
 
   /* Модальное окно */
 
-  --modal-background: #fff;
+  --modal-background: #ffffff;
 
 }
diff --git a/client/src/app/styles/themes/index.scss b/client/src/app/styles/themes/index.scss
index f95ef86..23db001 100644
--- a/client/src/app/styles/themes/index.scss
+++ b/client/src/app/styles/themes/index.scss
@@ -2,15 +2,12 @@
   --color-primary-dark: #0f4c81;
   --color-primary: #2a73ff;
   --color-primary-light: #dde8ff;
-
   --grad-1: #e8f1ff;
   --grad-2: #c9ddff;
   --grad-3: #8bb2ff;
   --grad-4: #3b6ec8;
-
   --color-background: #eaf6ff;
   --color-section: #ffffff;
-
   --color-title: #0a3d62;
   --color-text: #4a4a4a;
   --color-active-link: #dde8ff;
@@ -20,15 +17,12 @@
   --color-primary: #6366f1;
   --color-primary-light: #a5b4fc;
   --color-primary-dark: #4338ca;
-
   --color-background: #0f172a;
   --color-section: #1e293b;
-
   --grad-1: #1e293b;
   --grad-2: #334155;
   --grad-3: #475569;
   --grad-4: #64748b;
-
   --color-title: #e2e8f0;
   --color-text: #cbd5e1;
   --color-active-link: #4338ca;
diff --git a/client/src/features/auth/model/hooks/useLoginForm.ts b/client/src/features/auth/model/hooks/useLoginForm.ts
index 5e54ffa..9c1b4b4 100644
--- a/client/src/features/auth/model/hooks/useLoginForm.ts
+++ b/client/src/features/auth/model/hooks/useLoginForm.ts
@@ -15,14 +15,14 @@ export const useLoginForm = () => {
     },
   });
 
+  const onSubmit = form.handleSubmit((values) => {
+    alert(JSON.stringify(values));
+  });
+
   useEffect(() => {
     form.setFocus('login');
   }, [form, form.setFocus]);
 
-  const onSubmit = (values: LoginFormValues) => {
-    alert(values?.login);
-  };
-
   return {
     form,
     onSubmit,
diff --git a/client/src/features/auth/model/hooks/useRegisterForm.ts b/client/src/features/auth/model/hooks/useRegisterForm.ts
index ca15ad4..c47f925 100644
--- a/client/src/features/auth/model/hooks/useRegisterForm.ts
+++ b/client/src/features/auth/model/hooks/useRegisterForm.ts
@@ -20,9 +20,9 @@ export const useRegisterForm = () => {
     form.setFocus('email');
   }, [form, form.setFocus]);
 
-  const onSubmit = (values: RegisterFormValues) => {
-    alert(values?.email);
-  };
+  const onSubmit = form.handleSubmit((values) => {
+    alert(JSON.stringify(values));
+  });
 
   return {
     form,
diff --git a/client/src/features/auth/ui/LoginForm/LoginForm.module.scss b/client/src/features/auth/ui/LoginForm/LoginForm.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/features/auth/ui/LoginForm/LoginForm.tsx b/client/src/features/auth/ui/LoginForm/LoginForm.tsx
index 4fbbed7..d76c685 100644
--- a/client/src/features/auth/ui/LoginForm/LoginForm.tsx
+++ b/client/src/features/auth/ui/LoginForm/LoginForm.tsx
@@ -13,7 +13,7 @@ export const LoginForm = memo(({ onSwap }: LoginFormProps) => {
   const { register, formState } = form;
 
   return (
-    <Form form={form} onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <Typography tag={'h2'} variant={'bold_24'}>
         Authorization
       </Typography>
diff --git a/client/src/features/auth/ui/RegisterForm/RegisterForm.module.scss b/client/src/features/auth/ui/RegisterForm/RegisterForm.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/features/auth/ui/RegisterForm/RegisterForm.tsx b/client/src/features/auth/ui/RegisterForm/RegisterForm.tsx
index 64e3fef..5b645da 100644
--- a/client/src/features/auth/ui/RegisterForm/RegisterForm.tsx
+++ b/client/src/features/auth/ui/RegisterForm/RegisterForm.tsx
@@ -3,8 +3,6 @@ import { memo } from 'react';
 import { useRegisterForm } from '@/features/auth/model/hooks/useRegisterForm.ts';
 import { Button, Checkbox, Form, Input, Typography } from '@/shared/ui';
 
-import styles from './RegisterForm.module.scss';
-
 interface RegisterFormProps {
   onSwap: () => void;
 }
@@ -17,7 +15,7 @@ export const RegisterForm = memo(({ onSwap }: RegisterFormProps) => {
   } = form;
 
   return (
-    <Form form={form} onSubmit={onSubmit} className={styles.form}>
+    <Form onSubmit={onSubmit}>
       <Typography tag='h2' variant='bold_24'>
         Registration
       </Typography>
@@ -38,7 +36,7 @@ export const RegisterForm = memo(({ onSwap }: RegisterFormProps) => {
         error={errors.password?.message}
       />
 
-      <Checkbox {...register('agreeToTerms')} error={errors.agreeToTerms}>
+      <Checkbox {...register('agreeToTerms')} error={errors.agreeToTerms?.message}>
         I agree to the <a>Terms and Conditions</a>
       </Checkbox>
 
diff --git a/client/src/features/journey/ui/Journey.module.scss b/client/src/features/journey/ui/Journey.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/features/journey/ui/Journey.tsx b/client/src/features/journey/ui/Journey.tsx
index 28c8257..7a241f1 100644
--- a/client/src/features/journey/ui/Journey.tsx
+++ b/client/src/features/journey/ui/Journey.tsx
@@ -1,9 +1,5 @@
 import { memo } from 'react';
 
-interface JourneyProps {}
-
-export const Journey = memo((props: JourneyProps) => {
-  const {} = props;
-
+export const Journey = memo(() => {
   return <div>Journey</div>;
 });
diff --git a/client/src/pages/AuthPage/ui/AuthPage/AuthPage.module.scss b/client/src/pages/AuthPage/ui/AuthPage/AuthPage.module.scss
index 152a731..00df22f 100644
--- a/client/src/pages/AuthPage/ui/AuthPage/AuthPage.module.scss
+++ b/client/src/pages/AuthPage/ui/AuthPage/AuthPage.module.scss
@@ -1,7 +1,7 @@
 .auth {
   display: flex;
+  width: 100%;
+  min-height: 100vh;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
-  width: 100%;
 }
\ No newline at end of file
diff --git a/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.module.scss b/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.module.scss
deleted file mode 100644
index c3089c5..0000000
--- a/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.error{
-    
-}
\ No newline at end of file
diff --git a/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.tsx
index 0c02989..01b8d05 100644
--- a/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.tsx
+++ b/client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.tsx
@@ -1,7 +1,5 @@
-import styles from './ErrorPage.module.scss';
-
 const ErrorPage = () => {
-  return <div className={styles.error}>404</div>;
+  return <div>404</div>;
 };
 
 export default ErrorPage;
diff --git a/client/src/pages/LoaderPage/ui/LoaderPage/LoaderPage.module.scss b/client/src/pages/LoaderPage/ui/LoaderPage/LoaderPage.module.scss
index f23834b..b8ba6ef 100644
--- a/client/src/pages/LoaderPage/ui/LoaderPage/LoaderPage.module.scss
+++ b/client/src/pages/LoaderPage/ui/LoaderPage/LoaderPage.module.scss
@@ -1,6 +1,6 @@
 .page {
-  width: 100%;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
 }
diff --git a/client/src/pages/MainPage/ui/DashboardPage/DashboardPage.module.scss b/client/src/pages/MainPage/ui/DashboardPage/DashboardPage.module.scss
index 9c47cf5..dbeb713 100644
--- a/client/src/pages/MainPage/ui/DashboardPage/DashboardPage.module.scss
+++ b/client/src/pages/MainPage/ui/DashboardPage/DashboardPage.module.scss
@@ -1,12 +1,12 @@
 .main {
-  font-size: 40px;
-  font-weight: 700;
-
-  color: var(--color-title);
 
   width: 100%;
   height: 100%;
   padding: 20px;
   border-radius: 12px;
   background-color: var(--color-section);
+
+  color: var(--color-title);
+  font-size: 40px;
+  font-weight: 700;
 }
diff --git a/client/src/shared/config/storybook/decorators/StyleDecorator.tsx b/client/src/shared/config/storybook/decorators/StyleDecorator.tsx
index ccb0a8d..ec90847 100644
--- a/client/src/shared/config/storybook/decorators/StyleDecorator.tsx
+++ b/client/src/shared/config/storybook/decorators/StyleDecorator.tsx
@@ -2,5 +2,6 @@ import type { Decorator } from '@storybook/react';
 
 import '@/app/styles/index.scss';
 import '../styles/index.scss';
+import '@/app/styles/themes/index.scss';
 
 export const StyleDecorator: Decorator = (StoryComponent) => <StoryComponent />;
diff --git a/client/src/shared/config/storybook/styles/index.scss b/client/src/shared/config/storybook/styles/index.scss
index 7fb861a..4fd9ae6 100644
--- a/client/src/shared/config/storybook/styles/index.scss
+++ b/client/src/shared/config/storybook/styles/index.scss
@@ -1,5 +1,5 @@
-*{
-  width: #000;
+* {
+  width: #000000;
 }
 
 .title {
@@ -8,10 +8,10 @@
   font-weight: 600;
 }
 
-//------Typography---
+// ------Typography---
 
 .typography_inner {
-  color: #ffffff;
+  color: #7f7f7f;
   font-family: Helvetica, sans-serif;
 }
 
@@ -23,7 +23,7 @@
 
 .typography_block {
   display: flex;
-  color: #ffffff;
+  color: #1c1c1c;
   gap: 20px;
 }
 
@@ -34,6 +34,7 @@
 }
 
 // ------Icons---
+
 .icons_wrapper {
   display: grid;
   gap: 20px;
@@ -45,7 +46,6 @@
   width: 100%;
   align-items: center;
   padding: 12px;
-  border: 1px solid #575970;
   border-radius: 4px;
   gap: 12px;
 }
diff --git a/client/src/shared/ui/Button/Button.module.scss b/client/src/shared/ui/Button/Button.module.scss
index e76e61e..6a30de2 100644
--- a/client/src/shared/ui/Button/Button.module.scss
+++ b/client/src/shared/ui/Button/Button.module.scss
@@ -2,10 +2,10 @@
   display: flex;
   width: 100%;
   align-items: center;
-  color: var(--color-title);
 
   padding: 6px 12px;
   border-radius: 4px;
+  color: var(--color-title);
   cursor: pointer;
   font-size: 1rem;
   gap: 8px;
@@ -19,9 +19,11 @@
 .start {
   justify-content: flex-start;
 }
+
 .center {
   justify-content: center;
 }
+
 .end {
   justify-content: flex-end;
 }
diff --git a/client/src/shared/ui/Button/Button.stories.tsx b/client/src/shared/ui/Button/Button.stories.tsx
new file mode 100644
index 0000000..f68c657
--- /dev/null
+++ b/client/src/shared/ui/Button/Button.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as Icons from '../../assets/icons/index';
+
+import { Button, type ButtonProps } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+};
+
+const buttonProps: ButtonProps = {
+  variant: 'primary',
+  children: 'button',
+  loading: false,
+};
+
+const buttonIcon = <Icons.SearchIcon />;
+
+type Story = StoryObj<typeof Button>;
+const Template: Story = { render: (args) => <Button {...args} /> };
+
+export const Primary = { ...Template };
+Primary.args = buttonProps;
+
+export const Outline = { ...Template };
+Outline.args = { ...buttonProps, variant: 'outline' };
+
+export const PrimaryDisabled = { ...Template };
+PrimaryDisabled.args = { ...buttonProps, variant: 'primary', disabled: true };
+
+export const OutlineDisabled = { ...Template };
+OutlineDisabled.args = { ...buttonProps, variant: 'outline', disabled: true };
+
+export const PrimaryStartIcon = { ...Template };
+PrimaryStartIcon.args = { ...buttonProps, startIcon: buttonIcon };
+
+export const PrimaryEndIcon = { ...Template };
+PrimaryEndIcon.args = { ...buttonProps, endIcon: buttonIcon };
+
+export const OutlineStartIcon = { ...Template };
+OutlineStartIcon.args = {
+  ...buttonProps,
+  variant: 'outline',
+  startIcon: buttonIcon,
+};
+
+export const OutlineEndIcon = { ...Template };
+OutlineEndIcon.args = {
+  ...buttonProps,
+  variant: 'outline',
+  endIcon: buttonIcon,
+};
+
+export default meta;
diff --git a/client/src/shared/ui/Checkbox/Checkbox.module.scss b/client/src/shared/ui/Checkbox/Checkbox.module.scss
index 52b0395..447d418 100644
--- a/client/src/shared/ui/Checkbox/Checkbox.module.scss
+++ b/client/src/shared/ui/Checkbox/Checkbox.module.scss
@@ -1,54 +1,32 @@
 .wrapper {
+  position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
-  position: relative;
   gap: 0.25rem;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     position: absolute;
-    opacity: 0;
-    height: 0;
     width: 0;
+    height: 0;
     cursor: pointer;
-  }
-
-  input[type="checkbox"]:checked + .checkmark {
-    border-color: var(--color-primary);
-    background-color: var(--color-primary);
-  }
-
-  input[type="checkbox"]:checked + .checkmark::after {
-    display: block;
-  }
-
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .checkmark {
-      background-color: var(--color-primary-light);
-    }
-
-    .text {
-      color: rgba(0, 0, 0, 0.25);
-    }
+    opacity: 0;
   }
 }
 
 .checkmark {
+  position: relative;
   display: inline-block;
   border-radius: 5px;
   background-color: var(--color-background-checkbox);
   transition: all 0.3s;
-  position: relative;
 
-  &::after {
-    content: "";
+  &:after {
     position: absolute;
     display: none;
     border: solid var(--color-primary-light);
     border-width: 0 2px 2px 0;
+    content: '';
     transform: rotate(45deg);
   }
 
@@ -56,9 +34,9 @@
     width: 14px;
     height: 14px;
 
-    &::after {
+    &:after {
+      top: 0;
       left: 3px;
-      top: 0px;
       width: 4px;
       height: 8px;
     }
@@ -68,9 +46,9 @@
     width: 18px;
     height: 18px;
 
-    &::after {
-      left: 5px;
+    &:after {
       top: 1px;
+      left: 5px;
       width: 5px;
       height: 10px;
     }
@@ -80,9 +58,9 @@
     width: 24px;
     height: 24px;
 
-    &::after {
-      left: 7px;
+    &:after {
       top: 1px;
+      left: 7px;
       width: 7px;
       height: 14px;
     }
@@ -91,4 +69,26 @@
 
 .text {
   margin-left: 5px;
-}
\ No newline at end of file
+}
+
+
+.wrapper .disabled {
+  cursor: not-allowed;
+
+  .checkmark {
+    background-color: var(--color-primary-light);
+  }
+
+  .text {
+    color: rgba(0 0 0 / 0.25);
+  }
+}
+
+input[type='checkbox']:checked + .checkmark {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+}
+
+input[type='checkbox']:checked + .checkmark:after {
+  display: block;
+}
diff --git a/client/src/shared/ui/Checkbox/Checkbox.stories.tsx b/client/src/shared/ui/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 0000000..fb8b158
--- /dev/null
+++ b/client/src/shared/ui/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Checkbox, type CheckboxProps } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+};
+
+const checkboxProps: CheckboxProps = {
+  children: <div>Content</div>,
+};
+
+type Story = StoryObj<typeof Checkbox>;
+const Template: Story = { render: (args) => <Checkbox {...args} /> };
+
+export const Default = { ...Template };
+Default.args = { ...checkboxProps };
+
+export const Checked = { ...Template };
+Checked.args = { ...checkboxProps, checked: true };
+
+export const Disabled = { ...Template };
+Disabled.args = { ...checkboxProps, disabled: true };
+
+export const Error = { ...Template };
+Disabled.args = { ...checkboxProps, error: 'error checkbox' };
+
+export const CheckboxLarge = { ...Template };
+CheckboxLarge.args = { ...checkboxProps, size: 'large' };
+export default meta;
diff --git a/client/src/shared/ui/Checkbox/Checkbox.tsx b/client/src/shared/ui/Checkbox/Checkbox.tsx
index a2a6653..e287e75 100644
--- a/client/src/shared/ui/Checkbox/Checkbox.tsx
+++ b/client/src/shared/ui/Checkbox/Checkbox.tsx
@@ -1,12 +1,11 @@
 import { type CSSProperties, memo, type ReactNode } from 'react';
-import type { FieldError } from 'react-hook-form';
 import clsx from 'clsx';
 
 import { Typography } from '../Typography/Typography';
 
 import styles from './Checkbox.module.scss';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   className?: string;
   style?: CSSProperties;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -15,7 +14,7 @@ interface CheckboxProps {
   disabled?: boolean;
   value?: string | number;
   size?: 'small' | 'medium' | 'large';
-  error?: FieldError;
+  error?: string;
 }
 
 export const Checkbox = memo((props: CheckboxProps) => {
@@ -47,7 +46,7 @@ export const Checkbox = memo((props: CheckboxProps) => {
       {children && <span className={styles.text}>{children}</span>}
       {error && (
         <Typography tag={'p'} type={'error'} variant={'regular_14'}>
-          {error.message}
+          {error}
         </Typography>
       )}
     </label>
diff --git a/client/src/shared/ui/Form/Form.module.scss b/client/src/shared/ui/Form/Form.module.scss
index 3957f04..d50a9ec 100644
--- a/client/src/shared/ui/Form/Form.module.scss
+++ b/client/src/shared/ui/Form/Form.module.scss
@@ -1,11 +1,11 @@
 
 .primary {
-  padding: 24px;
-  background-color: var(--modal-background);
   display: flex;
-  flex-direction: column;
-  gap: 36px;
+  width: 100%;
 
   max-width: 400px;
-  width: 100%;
+  flex-direction: column;
+  padding: 24px;
+  background-color: var(--modal-background);
+  gap: 36px;
 }
\ No newline at end of file
diff --git a/client/src/shared/ui/Form/Form.stories.tsx b/client/src/shared/ui/Form/Form.stories.tsx
new file mode 100644
index 0000000..711c19f
--- /dev/null
+++ b/client/src/shared/ui/Form/Form.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Form, type FormProps } from './Form';
+
+const meta: Meta<typeof Form> = {
+  title: 'UI/Form',
+  component: Form,
+};
+
+const formProps: FormProps = {
+  onSubmit: () => {},
+  children: <div>Content</div>,
+};
+
+type Story = StoryObj<typeof Form>;
+const Template: Story = { render: (args) => <Form {...args} /> };
+
+export const Default = { ...Template };
+Default.args = { ...formProps };
+
+export default meta;
diff --git a/client/src/shared/ui/Form/Form.tsx b/client/src/shared/ui/Form/Form.tsx
index 129a3f6..c9825e1 100644
--- a/client/src/shared/ui/Form/Form.tsx
+++ b/client/src/shared/ui/Form/Form.tsx
@@ -1,28 +1,21 @@
 import React from 'react';
-import { type FieldValues, type UseFormReturn } from 'react-hook-form';
 import clsx from 'clsx';
 
 import styles from './Form.module.scss';
 
 type FormVariant = 'primary';
 
-interface FormProps<T extends FieldValues> {
-  form: UseFormReturn<T>;
-  onSubmit: (values: T) => void;
+export interface FormProps {
+  onSubmit: () => void;
   children: React.ReactNode;
   className?: string;
   variant?: FormVariant;
 }
 
-export const Form = <T extends FieldValues>({
-  form,
-  onSubmit,
-  children,
-  className,
-  variant = 'primary',
-}: FormProps<T>) => {
+export const Form = (props: FormProps) => {
+  const { onSubmit, children, className, variant = 'primary' } = props;
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)} className={clsx(styles[variant], className)}>
+    <form onSubmit={onSubmit} className={clsx(styles[variant], className)}>
       {children}
     </form>
   );
diff --git a/client/src/shared/ui/Input/Input.module.scss b/client/src/shared/ui/Input/Input.module.scss
index 6251878..c5fac67 100644
--- a/client/src/shared/ui/Input/Input.module.scss
+++ b/client/src/shared/ui/Input/Input.module.scss
@@ -1,14 +1,14 @@
-.inputWrapper {
+.input_wrapper {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
 .label {
+  color: #000000;
   font: var(--font-m);
   font-size: 14px;
   line-height: 20px;
-  color: #000;
 }
 
 .input {
@@ -36,14 +36,14 @@
 
 .input:focus {
   border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+  box-shadow: 0 0 0 2px rgba(37 99 235 / 0.2);
 }
 
 
 .input:disabled {
+  border-color: #e5e7eb;
   background: #f3f4f6;
   color: #9ca3af;
-  border-color: #e5e7eb;
   cursor: not-allowed;
 }
 
diff --git a/client/src/shared/ui/Input/Input.stories.tsx b/client/src/shared/ui/Input/Input.stories.tsx
new file mode 100644
index 0000000..16d458a
--- /dev/null
+++ b/client/src/shared/ui/Input/Input.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input, type InputProps } from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'UI/Input',
+  component: Input,
+};
+
+const inputProps: InputProps = {
+  placeholder: 'User...',
+};
+
+type Story = StoryObj<typeof Input>;
+const Template: Story = { render: (args) => <Input {...args} /> };
+
+export const Default = { ...Template };
+Default.args = { ...inputProps };
+
+export const WithLabel = { ...Template };
+WithLabel.args = { ...inputProps, label: 'username' };
+
+export const InputError = { ...Template };
+InputError.args = { ...inputProps, error: 'error username!' };
+
+export const InputErrorWithLable = { ...Template };
+InputErrorWithLable.args = { ...inputProps, label: 'username', error: 'error username!' };
+
+export default meta;
diff --git a/client/src/shared/ui/Input/Input.tsx b/client/src/shared/ui/Input/Input.tsx
index 5f66445..e9e88d9 100644
--- a/client/src/shared/ui/Input/Input.tsx
+++ b/client/src/shared/ui/Input/Input.tsx
@@ -1,11 +1,11 @@
-import { type InputHTMLAttributes, memo, useId } from 'react';
+import { type ComponentProps, memo, useId } from 'react';
 import clsx from 'clsx';
 
 import { Typography } from '../Typography/Typography';
 
 import styles from './Input.module.scss';
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends ComponentProps<'input'> {
   label?: string;
   error?: string;
 }
@@ -16,7 +16,7 @@ export const Input = memo((props: InputProps) => {
   const id = useId();
 
   return (
-    <div className={clsx(styles.inputWrapper, className)}>
+    <div className={clsx(styles.input_wrapper, className)}>
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}
diff --git a/client/src/shared/ui/Modal/Modal.module.scss b/client/src/shared/ui/Modal/Modal.module.scss
index f7fd9b8..bca0f0b 100644
--- a/client/src/shared/ui/Modal/Modal.module.scss
+++ b/client/src/shared/ui/Modal/Modal.module.scss
@@ -1,7 +1,7 @@
 .modal {
   position: fixed;
-  inset: 0;
   z-index: var(--z-index-modal);
+  inset: 0;
 
   opacity: 0;
   pointer-events: none;
@@ -20,38 +20,38 @@
 }
 
 .overlay {
+  display: flex;
   width: 100%;
   height: 100%;
-  background: var(--overlay);
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  background: var(--overlay);
 
 
   transition: background 300ms ease;
 }
 
 .content {
+
+  max-width: 60%;
   padding: 20px;
   border-radius: 20px;
   background: var(--modal-background);
-
-  max-width: 60%;
-  transform: scale(0.95);
   opacity: 0;
+  transform: scale(0.95);
 
   transition: transform 300ms ease,
   opacity 300ms ease;
 
 
   .modal.opened & {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
 
 
   .modal.closing & {
-    transform: scale(0.95);
     opacity: 0;
+    transform: scale(0.95);
   }
 }
diff --git a/client/src/shared/ui/Page/Page.module.scss b/client/src/shared/ui/Page/Page.module.scss
index 812c1aa..66e5c75 100644
--- a/client/src/shared/ui/Page/Page.module.scss
+++ b/client/src/shared/ui/Page/Page.module.scss
@@ -1,4 +1,4 @@
 .page {
-  overflow-y: auto;
   height: 100%;
+  overflow-y: auto;
 }
diff --git a/client/src/shared/ui/Skeleton/Skeleton.module.scss b/client/src/shared/ui/Skeleton/Skeleton.module.scss
index 494bdf8..f440d0a 100644
--- a/client/src/shared/ui/Skeleton/Skeleton.module.scss
+++ b/client/src/shared/ui/Skeleton/Skeleton.module.scss
@@ -1,25 +1,25 @@
 .skeleton {
-  width: 100%;
-  height: 50px;
   position: relative;
   overflow: hidden;
+  width: 100%;
+  height: 50px;
   background-color: #4a4949;
 
-  &::before {
-    content: "";
-    display: block;
+  &:before {
     position: absolute;
-    left: -150px;
     top: 0;
-    height: 100%;
+    left: -150px;
+    display: block;
     width: 80%;
+    height: 100%;
+    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     background: linear-gradient(
       to right,
       transparent 0%,
-      rgb(129, 128, 128) 50%,
+      rgba(129 128 128) 50%,
       transparent 100%
     );
-    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    content: "";
   }
 }
 
diff --git a/client/src/shared/ui/Spinner/Spinner.stories.tsx b/client/src/shared/ui/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000..7b9af68
--- /dev/null
+++ b/client/src/shared/ui/Spinner/Spinner.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Spinner, type SpinnerProps } from './Spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'UI/Spinner',
+  component: Spinner,
+};
+
+const spinnerProps: SpinnerProps = {
+  size: '24',
+};
+
+type Story = StoryObj<typeof Spinner>;
+const Template: Story = { render: (args) => <Spinner {...args} /> };
+
+export const Default24 = { ...Template };
+Default24.args = { ...spinnerProps };
+
+export const Default32 = { ...Template };
+Default32.args = { ...spinnerProps, size: '32' };
+
+export const Default48 = { ...Template };
+Default48.args = { ...spinnerProps, size: '48' };
+
+export const Default64 = { ...Template };
+Default64.args = { ...spinnerProps, size: '64' };
+
+export const Default128 = { ...Template };
+Default128.args = { ...spinnerProps, size: '128' };
+
+export default meta;
diff --git a/client/src/shared/ui/Spinner/Spinner.tsx b/client/src/shared/ui/Spinner/Spinner.tsx
index 7303c1c..edd96d8 100644
--- a/client/src/shared/ui/Spinner/Spinner.tsx
+++ b/client/src/shared/ui/Spinner/Spinner.tsx
@@ -4,7 +4,7 @@ import styles from "./Spinner.module.scss";
 
 type SpinnerSizes = "16" | "24" | "32" | "48" | "64" | "128";
 
-interface SpinnerProps {
+export interface SpinnerProps {
   size?: SpinnerSizes;
   border?: number;
 }
diff --git a/client/src/shared/ui/Stack/Flex/Flex.module.scss b/client/src/shared/ui/Stack/Flex/Flex.module.scss
index 5dd6308..913e62a 100644
--- a/client/src/shared/ui/Stack/Flex/Flex.module.scss
+++ b/client/src/shared/ui/Stack/Flex/Flex.module.scss
@@ -6,49 +6,58 @@
   width: 100%;
 }
 
-.justifyStart {
+.justify_start {
   justify-content: flex-start;
 }
-.justifyCenter {
+
+.justify_center {
   justify-content: center;
 }
-.justifyEnd {
+
+.justify_end {
   justify-content: flex-end;
 }
-.justifyBetween {
+
+.justify_between {
   justify-content: space-between;
 }
 
-.alignStart {
+.align_start {
   align-items: flex-start;
 }
-.alignCenter {
+
+.align_center {
   align-items: center;
 }
-.alignEnd {
+
+.align_end {
   align-items: flex-end;
 }
 
-.directionRow {
+.direction_row {
   flex-direction: row;
 }
 
-.directionColumn {
+.direction_column {
   flex-direction: column;
 }
 
 .gap4 {
   gap: 4px;
 }
+
 .gap8 {
   gap: 8px;
 }
+
 .gap12 {
   gap: 12px;
 }
+
 .gap16 {
   gap: 16px;
 }
+
 .gap32 {
   gap: 32px;
 }
diff --git a/client/src/shared/ui/Stack/Flex/Flex.tsx b/client/src/shared/ui/Stack/Flex/Flex.tsx
index 68bb579..cc1e4c0 100644
--- a/client/src/shared/ui/Stack/Flex/Flex.tsx
+++ b/client/src/shared/ui/Stack/Flex/Flex.tsx
@@ -19,21 +19,21 @@ export interface FlexProps {
 }
 
 const justifyClasses: Record<FlexJustify, string> = {
-  start: styles.justifyStart,
-  center: styles.justifyCenter,
-  end: styles.justifyEnd,
-  between: styles.justifyBetween,
+  start: styles.justify_start,
+  center: styles.justify_center,
+  end: styles.justify_end,
+  between: styles.justify_between,
 };
 
 const alignClasses: Record<FlexAlign, string> = {
-  start: styles.alignStart,
-  center: styles.alignCenter,
-  end: styles.alignEnd,
+  start: styles.align_start,
+  center: styles.align_center,
+  end: styles.align_end,
 };
 
 const directionClasses: Record<FlexDirection, string> = {
-  column: styles.directionRow,
-  row: styles.directionColumn,
+  column: styles.direction_row,
+  row: styles.direction_column,
 };
 
 const gapClasses: Record<FlexGap, string> = {
diff --git a/client/src/shared/ui/Typography/Typography.module.scss b/client/src/shared/ui/Typography/Typography.module.scss
index 7da19a4..4413902 100644
--- a/client/src/shared/ui/Typography/Typography.module.scss
+++ b/client/src/shared/ui/Typography/Typography.module.scss
@@ -1,7 +1,7 @@
 .typography {
-  font-size: 20px;
-  color: inherit;
   display: inline-block;
+  color: inherit;
+  font-size: 20px;
 }
 
 .title {
diff --git a/client/src/widgets/AsideMenu/ui/AsideMenu/AsideMenu.module.scss b/client/src/widgets/AsideMenu/ui/AsideMenu/AsideMenu.module.scss
index 3bd5aa2..4b7b7dc 100644
--- a/client/src/widgets/AsideMenu/ui/AsideMenu/AsideMenu.module.scss
+++ b/client/src/widgets/AsideMenu/ui/AsideMenu/AsideMenu.module.scss
@@ -1,27 +1,30 @@
 .aside {
-  padding-bottom: 12px;
-  border-radius: 12px;
-  background-color: var(--color-section);
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
   flex-direction: column;
   justify-content: space-between;
+  padding-bottom: 12px;
+  border-radius: 12px;
+  background-color: var(--color-section);
 }
+
 .content {
   padding-top: 12px;
 }
+
 .actions {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   gap: 20px;
 }
+
 .avatar {
-  object-fit: cover;
   width: 100px;
   height: 100px;
   border-radius: 200px;
+  object-fit: cover;
 }
 
 .icon {
@@ -57,14 +60,14 @@
 }
 
 .img {
-  object-fit: cover;
   width: 210px;
+  object-fit: cover;
 }
 
 .btn_action {
-  padding: 12px;
-  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 12px;
+  border-radius: 4px;
 }
diff --git a/client/src/widgets/AsideMenu/ui/AsideMenuItem/AsideMenuItem.module.scss b/client/src/widgets/AsideMenu/ui/AsideMenuItem/AsideMenuItem.module.scss
index 624ed27..9435264 100644
--- a/client/src/widgets/AsideMenu/ui/AsideMenuItem/AsideMenuItem.module.scss
+++ b/client/src/widgets/AsideMenu/ui/AsideMenuItem/AsideMenuItem.module.scss
@@ -1,18 +1,18 @@
 .link {
-  font-size: 16px;
-  font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 8px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  gap: 8px;
 }
 
 .active {
-  color: var(--color-primary);
   border-left: 4px solid var(--color-primary);
   background: linear-gradient(
     90deg,
     var(--color-active-link),
     var(--color-section)
   );
+  color: var(--color-primary);
 }