diff --git a/packages/client/src/app/App.scss b/packages/client/src/app/App.scss
deleted file mode 100644
index ec75296..0000000
--- a/packages/client/src/app/App.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../scss/vars.scss';
diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
index 0f22150..dae0732 100644
--- a/packages/client/src/app/App.tsx
+++ b/packages/client/src/app/App.tsx
@@ -1,6 +1,3 @@
-// import { useEffect } from 'react'
-
-import '@/app/App.scss'
 import AuthLayout from '@/layouts/AuthLayout/AuthLayout'
 import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
 import PublicLayout from '@/layouts/PublicLayout/PublicLayout'
diff --git a/packages/client/src/components/common/Header/Header.scss b/packages/client/src/components/common/Header/Header.scss
index e29d410..f32ad3b 100644
--- a/packages/client/src/components/common/Header/Header.scss
+++ b/packages/client/src/components/common/Header/Header.scss
@@ -1,43 +1,41 @@
 @import '../../../scss/vars';
 
 .main-header {
-    &__container {
-        display: flex;
-    }
-
-    &__logo-block {
-        margin-right: auto;
-    }
+  &__container {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
 .logo-block {
-    user-select: none;
+  user-select: none;
 
-    &__image {
-        width: 114px;
-        margin-bottom: -62px;
-    }
+  &__image {
+    width: 114px;
+    margin-bottom: -62px;
+  }
 }
 
 .main-nav {
-    display: flex;
-    gap: $nav_list-gap;
-    padding: $nav_list-padding-y $nav_list-padding-x;
-
-    &__link {
-        font-size: $nav_link-font-size;
-        font-weight: $nav_link-font-weight;
-        letter-spacing: 1px;
-        
-        text-shadow: $main-text-shadow;
-        text-transform: uppercase;
-        text-decoration: none;
-
-        color: #fff;
-        transition: color $animation-base-speed;
-
-        &:hover, &_active {
-            color: $primary-color;
-        }
+  display: flex;
+  gap: $nav_list-gap;
+  padding: $nav_list-padding-y $nav_list-padding-x;
+
+  &__link {
+    font-size: $nav_link-font-size;
+    font-weight: $nav_link-font-weight;
+    letter-spacing: 1px;
+
+    text-shadow: $main-text-shadow;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    color: $text-color;
+    transition: color $animation-base-speed;
+
+    &:hover,
+    &_active {
+      color: $primary-color;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/client/src/components/common/Header/Header.tsx b/packages/client/src/components/common/Header/Header.tsx
index f7072f4..8b71340 100644
--- a/packages/client/src/components/common/Header/Header.tsx
+++ b/packages/client/src/components/common/Header/Header.tsx
@@ -8,8 +8,8 @@ type HeaderProps = {
 
 export const Header = (props: HeaderProps) => {
   const { className = '' } = props
-  const isActiveNavLink = (isActive: boolean) =>
-    isActive ? 'main-nav__link main-nav__link_active' : 'main-nav__link';
+  const getNavLinkClassName = (isActive: boolean) =>
+    isActive ? 'main-nav__link main-nav__link_active' : 'main-nav__link'
 
   return (
     <header className={`main-header ${className}`}>
@@ -26,22 +26,22 @@ export const Header = (props: HeaderProps) => {
         </div>
         <nav className="main-header__nav main-nav">
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/">
             Главная
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/leaderboard">
             Лидеры
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/forum">
             Форум
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/profile">
             Профиль
           </NavLink>
diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.scss b/packages/client/src/components/ui/PageTitle/PageTitle.scss
index e49181f..97832d2 100644
--- a/packages/client/src/components/ui/PageTitle/PageTitle.scss
+++ b/packages/client/src/components/ui/PageTitle/PageTitle.scss
@@ -1,121 +1,120 @@
 @import '../../../scss/vars';
 
 @mixin decorParentPosition {
-    position: absolute;
-    top: - $border-width;
-    left: - $border-width;
-    right: - $border-width;
-    bottom: - $border-width;
+  position: absolute;
+  top: -$border-width;
+  left: -$border-width;
+  right: -$border-width;
+  bottom: -$border-width;
 }
 
-$bg-color: #1E1E1E;
+$bg-color: #1e1e1e;
 $border-width: 7px;
-$border-gradient: 
-    linear-gradient(45deg, #414243, #7F7F7F) top left,
-    linear-gradient(135deg, #7F7F7F, #414243) top right,
-    linear-gradient(225deg, #414243, #414042) bottom right,
-    linear-gradient(315deg, #414042, #414243) bottom left; 
+$border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
+  linear-gradient(135deg, #7f7f7f, #414243) top right,
+  linear-gradient(225deg, #414243, #414042) bottom right,
+  linear-gradient(315deg, #414042, #414243) bottom left;
 $border-radius: 24px;
 $block-width: 350px;
 $outline-color: #101010;
 
 .page-title {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  &__block {
     position: relative;
-    display: flex;
-    justify-content: center;
-    
-    &__block {
-        position: relative;
-        display: block;
-        border-radius: $border-radius;
-        z-index: 0;
-        width: $block-width;
-        max-width: 100%;
+    display: block;
+    border-radius: $border-radius;
+    z-index: 0;
+    width: $block-width;
+    max-width: 100%;
+  }
+
+  &__border {
+    @mixin borderDecorSettings($top, $bottom) {
+      content: '';
+      position: absolute;
+      top: $top;
+      bottom: $bottom;
+      left: 0;
+      right: 0;
+      height: $border-width;
+
+      background: url('@/assets/images/svg/title-decor.svg') no-repeat center
+        center;
+      background-size: contain;
+    }
+
+    @include decorParentPosition();
+
+    border-radius: $border-radius;
+    background: $border-gradient;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    z-index: -1;
+    padding: 10px;
+    outline: 3px solid $outline-color;
+
+    &::before {
+      @include borderDecorSettings(0, 'auto');
     }
 
-    &__border {
-        @mixin borderDecorSettings($top, $bottom) {
-            content: '';
-            position: absolute;
-            top: $top;
-            bottom: $bottom;
-            left: 0;
-            right: 0;
-            height: $border-width;
-            
-            background: 
-                url('@/assets/images/svg/title-decor.svg') no-repeat center center;
-            background-size: contain;
-        }
-
-        @include decorParentPosition();
-
-        border-radius: $border-radius;
-        background: $border-gradient;
-        background-size: 50% 50%;
-        background-repeat: no-repeat;
-        z-index: -1;
-        padding: 10px;
-        outline: 3px solid $outline-color;
-
-        &::before {
-            @include borderDecorSettings(0, 'auto');
-        }
-
-        &::after {
-            @include borderDecorSettings('auto', 0);
-
-            transform: rotate(180deg);
-        }
+    &::after {
+      @include borderDecorSettings('auto', 0);
+
+      transform: rotate(180deg);
     }
+  }
+
+  &__screws {
+    @mixin screwSettings($left, $right) {
+      content: '';
+      position: absolute;
+      left: $left;
+      right: $right;
+      top: 50%;
+      width: 33px;
+      height: 41px;
+      z-index: -2;
+    }
+
+    @include decorParentPosition();
+
+    &::before {
+      @include screwSettings(0, 'auto');
 
-    &__screws {
-        @mixin screwSettings($left, $right) {
-            content: '';
-            position: absolute;
-            left: $left;
-            right: $right;
-            top: 50%;
-            width: 33px;
-            height: 41px;
-            z-index: -2;
-        }
-
-        @include decorParentPosition();
-
-        &::before {
-            @include screwSettings(0, 'auto');
-
-            transform: translate(calc(-100%), -50%) rotate(180deg);
-            background: 
-                url('@/assets/images/svg/title-decor--bolt.svg') no-repeat center center;
-            background-size: contain;
-        }
-
-        &::after {
-            @include screwSettings('auto', 0);
-            
-            transform: translate(calc(100%), -50%);
-            background: 
-                url('@/assets/images/svg/title-decor--bolt.svg') no-repeat center center;
-            background-size: contain;
-        }
+      transform: translate(calc(-100%), -50%) rotate(180deg);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
     }
 
-    &__content {
-        border-radius: calc($border-radius - 6px);
-        border: 1px solid $primary-color;
-        background-color: $bg-color;
-        text-align: center;
-        color: $text-color;
-        padding: 12px;
-
-        & > * {
-            font-size: 24px;
-            font-weight: 700;
-            letter-spacing: 1px;
-            margin: 0;
-            padding: 0;
-        }
+    &::after {
+      @include screwSettings('auto', 0);
+
+      transform: translate(calc(100%), -50%);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
+    }
+  }
+
+  &__content {
+    border-radius: calc($border-radius - 6px);
+    border: 1px solid $primary-color;
+    background-color: $bg-color;
+    text-align: center;
+    color: $text-color;
+    padding: 12px;
+
+    & > * {
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      margin: 0;
+      padding: 0;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.tsx b/packages/client/src/components/ui/PageTitle/PageTitle.tsx
index 2f0aa3b..fba38f8 100644
--- a/packages/client/src/components/ui/PageTitle/PageTitle.tsx
+++ b/packages/client/src/components/ui/PageTitle/PageTitle.tsx
@@ -1,21 +1,23 @@
 import './PageTitle.scss'
 import React from 'react'
 
-type PageTitleProps = {
+type PageTitlePropsType = {
   text: string
-  className: string
-  tagName: string
+  className?: string
+  tagName?: string
 }
 
-type DynamicTagElementProps = {
+type DynamicTagElementPropsType = {
   tagName: string
   children: React.ReactNode
 }
 
-export const PageTitle = (props: PageTitleProps) => {
+export const PageTitle = (props: PageTitlePropsType) => {
   const { text, className = '', tagName = 'h2' } = props
-  const DynamicTagElement = ({ tagName, children }: DynamicTagElementProps) =>
-    React.createElement(tagName, null, children)
+  const DynamicTagElement = ({
+    tagName,
+    children,
+  }: DynamicTagElementPropsType) => React.createElement(tagName, null, children)
 
   return (
     <div className={`page-title ${className}`}>
diff --git a/packages/client/src/layouts/PublicLayout/PublicLayout.scss b/packages/client/src/layouts/PublicLayout/PublicLayout.scss
index 25755a0..166c805 100644
--- a/packages/client/src/layouts/PublicLayout/PublicLayout.scss
+++ b/packages/client/src/layouts/PublicLayout/PublicLayout.scss
@@ -1,14 +1,14 @@
-@import "../../scss/vars.scss";
+@import '../../scss/vars.scss';
 
 .public-layout {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    min-height: 100vh;
-    z-index: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 100vh;
+  z-index: 0;
 
-    &__body {
-        flex: 1 1 100%;
-        padding-top: $layout_body-m-top;
-    }
-}
\ No newline at end of file
+  &__body {
+    flex: 1 1 100%;
+    padding-top: $layout_body-m-top;
+  }
+}
diff --git a/packages/client/src/pages/Error/Error.tsx b/packages/client/src/pages/Error/Error.tsx
index 8072165..9a4a42f 100644
--- a/packages/client/src/pages/Error/Error.tsx
+++ b/packages/client/src/pages/Error/Error.tsx
@@ -18,7 +18,7 @@ export const Error = () => {
 
   return (
     <div className="error-page-layout">
-      <Header className='error-page-layout__header'/>
+      <Header className="error-page-layout__header" />
       <div className="error-page-layout__body">
         <div className={'error-page'}>
           <div className={'error-page__info'}>
diff --git a/packages/client/src/pages/Main/Main.scss b/packages/client/src/pages/Main/Main.scss
index 2ed39bd..d772213 100644
--- a/packages/client/src/pages/Main/Main.scss
+++ b/packages/client/src/pages/Main/Main.scss
@@ -1,15 +1,15 @@
 @import '../../scss/vars';
 
-.promo-page { 
+.promo-page {
   &__content {
     width: 600px;
     margin: auto;
   }
-  
+
   &__title {
     margin-bottom: 40px;
   }
-  
+
   &__desc {
     font-size: 18px;
     line-height: 1.6;
@@ -17,11 +17,11 @@
     margin-bottom: 60px;
     text-shadow: $main-text-shadow;
   }
-  
+
   &__actions {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/client/src/pages/Main/Main.tsx b/packages/client/src/pages/Main/Main.tsx
index f1d1317..6cac5c8 100644
--- a/packages/client/src/pages/Main/Main.tsx
+++ b/packages/client/src/pages/Main/Main.tsx
@@ -33,13 +33,13 @@ export const Main = () => {
           <div className="promo-page__actions">
             <Button
               className="promo-page__btn custom-button_blue"
-              useFixWidth={true}
+              useFixWidth
               href="/game"
               text="Вход / Регистрация"
             />
             <Button
               className="promo-page__btn"
-              useFixWidth={true}
+              useFixWidth
               href="/game"
               text="Играть"
             />
diff --git a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss
index 4514840..7b07b16 100644
--- a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss
+++ b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss
@@ -41,14 +41,14 @@
 
 .tank-smoke {
   &::after {
-      content: '';
-      position: absolute;
-      width: 600px;
-      height: 600px;
-      bottom: 0;
-      left: 0;
-      transform: translate(-50%, 50%);
-      background: $red_ligth_gradient;
+    content: '';
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+    background: $red_ligth_gradient;
   }
 
   &_right {
@@ -62,7 +62,7 @@
   &__bottom {
     @include absoluteAndUserselect();
     @include smokeAnimate(2s, 0.6s, 15s);
-    
+
     left: -200px;
     bottom: -200px;
     width: 600px;
@@ -90,7 +90,7 @@
   &__top {
     @include absoluteAndUserselect();
     @include smokeAnimate(0s, 1s, 10s);
-    
+
     left: -50px;
     bottom: 410px;
     width: 200px;
@@ -124,4 +124,4 @@
   0% {
     bottom: -300px;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx
index ed6a0a4..faf7db6 100644
--- a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx
+++ b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx
@@ -6,13 +6,13 @@ import SmokeMiddle from '@/assets/images/smoke-middle.png'
 import SmokeTop from '@/assets/images/smoke-top.png'
 
 type EnemyTanksPropsType = {
-  side?: '' | 'left' | 'right'
+  side?: 'left' | 'right'
   title?: string
   isLoaded?: boolean
 }
 
 export const EnemyTank = (props: EnemyTanksPropsType) => {
-  const { side = '', title = 'tank wars', isLoaded = false } = props
+  const { side = 'left', title = 'tank wars', isLoaded = false } = props
   const tankImage = side === 'right' ? EnemyTankRight : EnemyTankLeft
 
   return (
diff --git a/packages/client/src/scss/base.scss b/packages/client/src/scss/base.scss
index efbe95d..4bca365 100644
--- a/packages/client/src/scss/base.scss
+++ b/packages/client/src/scss/base.scss
@@ -20,4 +20,4 @@ body,
 
 #root {
   background-image: $img_default-background;
-}
\ No newline at end of file
+}
diff --git a/packages/client/src/scss/grid-system.scss b/packages/client/src/scss/grid-system.scss
index de0960a..784b0ea 100644
--- a/packages/client/src/scss/grid-system.scss
+++ b/packages/client/src/scss/grid-system.scss
@@ -1,40 +1,40 @@
 @use 'sass:math';
-@import "./vars.scss";
+@import './vars.scss';
 
 .container-fluid {
-    display: flex;
-    width: 100%;
-    max-width: $container_fluid-max-width;
-    padding: $container_fluid-padding;
-  }
-  
-  .container {
-    max-width: $container-max-width;
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: $gutter-width;
-    padding-left: $gutter-width;
-    width: 100%;
-  }
+  display: flex;
+  width: 100%;
+  max-width: $container_fluid-max-width;
+  padding: $container_fluid-padding;
+}
 
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: calc($gutter-width / 2 * -1);
-    margin-left: calc($gutter-width / 2 * -1);
-  }
+.container {
+  max-width: $container-max-width;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $gutter-width;
+  padding-left: $gutter-width;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc($gutter-width / 2 * -1);
+  margin-left: calc($gutter-width / 2 * -1);
+}
+
+.column {
+  padding-right: calc($gutter-width / 2);
+  padding-left: calc($gutter-width / 2);
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
 
-  .column {
-    padding-right: calc($gutter-width / 2);
-    padding-left: calc($gutter-width / 2);
-    flex-basis: 0;
-    flex-grow: 1;
-    max-width: 100%;
+@for $i from 1 through $grid-columns {
+  .col-#{$i} {
+    flex: 0 0 math.percentage(math.div($i, $grid-columns));
+    max-width: math.percentage(math.div($i, $grid-columns));
   }
-  
-  @for $i from 1 through $grid-columns {
-    .col-#{$i} {
-      flex: 0 0 math.percentage(math.div($i, $grid-columns));
-      max-width: math.percentage(math.div($i, $grid-columns));
-    }
-  }
\ No newline at end of file
+}
diff --git a/packages/client/src/scss/vars.scss b/packages/client/src/scss/vars.scss
index 3160fc8..6993b3e 100644
--- a/packages/client/src/scss/vars.scss
+++ b/packages/client/src/scss/vars.scss
@@ -6,10 +6,10 @@ $f_default-font-family: 'Roboto', sans-serif;
 // images
 $img_default-background: url('@/assets/images/page-background.png');
 
-// main colors 
+// main colors
 $primary-color: #839d22;
-$second-color: #00AEEF;
-$text-color: #F8F8F8;
+$second-color: #00aeef;
+$text-color: #f8f8f8;
 
 // colors
 $c_default-background: #010101;
@@ -19,8 +19,8 @@ $c_button-top: #d9eca2;
 $c_button-bottom: #53650b;
 
 $c_button_blue: $second-color;
-$c_button-top_blue: #5FE1FF;
-$c_button-bottom_blue: #0079A7;
+$c_button-top_blue: #5fe1ff;
+$c_button-bottom_blue: #0079a7;
 
 $c_white: #ffffff;
 $c_black: #000;
@@ -29,13 +29,13 @@ $c_black: #000;
 $c_font-default: $c_white;
 
 // animations
-$animation-base-speed: .18s;
+$animation-base-speed: 0.18s;
 
 // effects
-$red-ligth-gradient: radial-gradient(#FC2204 -40%, transparent 70%);
+$red-ligth-gradient: radial-gradient(#fc2204 -40%, transparent 70%);
 $main-text-shadow: 1px 0 $c_black, -1px 0 $c_black, 0 1px $c_black,
-    0 -1px $c_black, 1px 1px $c_black, -1px -1px $c_black, 1px -1px $c_black,
-    -1px 1px $c_black;  
+  0 -1px $c_black, 1px 1px $c_black, -1px -1px $c_black, 1px -1px $c_black,
+  -1px 1px $c_black;
 
 // headers
 $nav_list-gap: 40px;
@@ -52,4 +52,4 @@ $grid-columns: 12;
 $gutter-width: 15px;
 $container-max-width: 1140px;
 $container_fluid-padding: 0 40px;
-$container_fluid-max-width: 100%;
\ No newline at end of file
+$container_fluid-max-width: 100%;