diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 82685945a..6bdbed989 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -73,7 +73,7 @@ <h2 class="header-descr">{{ headerSubtitle }}</h2>
     <button mat-flat-button class="menu" [matMenuTriggerFor]="log">
       <mat-icon class="account-circle">account_circle</mat-icon>
       <span class="user-name">{{ userShortName }}</span>
-      <mat-icon class="arrow-drop-down">arrow_drop_down</mat-icon>
+      <mat-icon iconPositionEnd class="arrow-drop-down">arrow_drop_down</mat-icon>
     </button>
   </ng-container>
 
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 7a3cbfd49..6e144e1a2 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -43,11 +43,8 @@
   }
 
   .info-link {
-    display: flex;
     background: none;
     color: white;
-    align-items: center;
-    justify-content: flex-end;
     font-size: 0.7rem;
     font-family: 'Innerspace';
     font-weight: bold;
@@ -56,8 +53,10 @@
     cursor: pointer;
     padding: 6px;
 
-    .mat-icon {
-      margin-right: 5px;
+    ::ng-deep .mdc-button__label {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
     }
   }
 
@@ -68,7 +67,7 @@
     border-color: white;
     color: white;
 
-    &.mat-stroked-button {
+    &.mat-mdc-outlined-button {
       font-size: 0.7rem;
     }
   }
@@ -137,9 +136,16 @@
 .lang,
 .menu,
 .login {
-  background: none;
-  color: white;
+  background: none !important;
+  color: white !important;
   font-size: 0.7rem !important;
+
+  .mat-icon {
+    margin: 0;
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
 }
 
 .menu .mat-icon {
diff --git a/src/app/shared/components/notifications/notifications.component.html b/src/app/shared/components/notifications/notifications.component.html
index bb7b79615..deb07280f 100644
--- a/src/app/shared/components/notifications/notifications.component.html
+++ b/src/app/shared/components/notifications/notifications.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="!(isMobileScreen$ | async); else isMobileScreen">
   <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon class="notifications-menu" [matBadge]="notificationAmount?.amount || null"> notifications_none </mat-icon>
+    <mat-icon class="notifications-menu" [matBadge]="notificationAmount?.amount || null"> notifications_none</mat-icon>
   </button>
   <mat-menu xPosition="before" #menu="matMenu" [class]="'notification-menu'">
     <app-notifications-list [notificationAmount]="notificationAmount" [receivedNotification]="receivedNotification">
@@ -9,10 +9,11 @@
 </ng-container>
 
 <ng-template #isMobileScreen>
-  <div *ngIf="notificationAmount" class="full-width flex flex-row justify-start items-center">
-    <button mat-icon-button class="btn-notifications flex flex-row justify-between">
-      <mat-icon class="notifications-icon">notifications_none</mat-icon>{{ 'NOTIFICATIONS' | translate }}
+  <div *ngIf="notificationAmount" class="full-width">
+    <button mat-button class="btn-notifications full-width">
+      <mat-icon class="notifications-icon">notifications_none</mat-icon>
+      {{ 'NOTIFICATIONS' | translate }}
+      <mat-icon iconPositionEnd *ngIf="notificationAmount.amount" [matBadge]="notificationAmount.amount"></mat-icon>
     </button>
-    <mat-icon *ngIf="notificationAmount.amount" [matBadge]="notificationAmount.amount" class="icon-mobile"> </mat-icon>
   </div>
 </ng-template>
diff --git a/src/app/shared/components/notifications/notifications.component.scss b/src/app/shared/components/notifications/notifications.component.scss
index 7dd679937..c776644c2 100644
--- a/src/app/shared/components/notifications/notifications.component.scss
+++ b/src/app/shared/components/notifications/notifications.component.scss
@@ -1,8 +1,18 @@
+.mat-mdc-icon-button.mat-mdc-button-base {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 :host::ng-deep .mat-icon {
-  position: relative;
   overflow: visible;
   font-size: 30px;
-  top: -1px;
 
   @media (min-width: 750px) {
     height: auto;
@@ -10,8 +20,8 @@
   }
 
   .mat-badge-content {
-    right: -20px !important;
-    top: -5px;
+    top: -4px;
+    left: 25px;
     background-color: #f5bc4a;
     width: 25px;
     height: 15px;
@@ -21,18 +31,26 @@
   }
 }
 
-.icon-mobile {
-  top: 8px;
-  margin-left: 73px;
-}
-
 .btn-notifications {
-  margin-left: -8px;
-}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 13px;
+  line-height: normal;
 
-.notifications-icon {
-  margin-left: 5px;
-  margin-right: 15px;
+  .notifications-icon {
+    font-size: 30px;
+    height: 30px;
+    width: 30px;
+    margin: 0 9px 0 0;
+  }
+
+  ::ng-deep {
+    .mat-badge-content {
+      top: 1.5px;
+    }
+  }
 }
 
 .full-width {
diff --git a/src/app/shared/components/paginator/paginator.component.scss b/src/app/shared/components/paginator/paginator.component.scss
index 1b5a3c98b..59e8d8b52 100644
--- a/src/app/shared/components/paginator/paginator.component.scss
+++ b/src/app/shared/components/paginator/paginator.component.scss
@@ -12,6 +12,10 @@
   padding: 1rem;
   min-width: 20px !important;
 
+  .mat-icon {
+    margin: 0;
+  }
+
   &-selected {
     color: #3849f9;
   }
diff --git a/src/app/shared/components/sidenav-menu/sidenav-menu.component.html b/src/app/shared/components/sidenav-menu/sidenav-menu.component.html
index bf598a288..0a7822580 100644
--- a/src/app/shared/components/sidenav-menu/sidenav-menu.component.html
+++ b/src/app/shared/components/sidenav-menu/sidenav-menu.component.html
@@ -5,12 +5,11 @@
 
     <ng-template #isUnauthorized>
       <div class="mobile-sidenav-header">
-        <button mat-stroked-button class="header_login" (click)="login()">{{ 'LOGIN' | translate }}</button>
-        <button mat-button (click)="changeView()">
+        <button mat-stroked-button class="header-login" (click)="login()">{{ 'LOGIN' | translate }}</button>
+        <button mat-button class="button-close" (click)="changeView()">
           <mat-icon>close</mat-icon>
         </button>
       </div>
-      <ng-container *ngTemplateOutlet="Language"> </ng-container>
     </ng-template>
 
     <ng-template #isAuthorized>
@@ -19,7 +18,7 @@
           <mat-icon>account_circle</mat-icon>
         </button>
         <ng-container>{{ user.firstName }} {{ user.lastName }}</ng-container>
-        <button mat-button (click)="changeView()">
+        <button mat-button class="button-close" (click)="changeView()">
           <mat-icon>close</mat-icon>
         </button>
       </div>
@@ -27,7 +26,7 @@
       <div class="mobile-sidenav-shell">
         <ng-container *ngTemplateOutlet="Language"> </ng-container>
 
-        <div class="mobile-sidenav-menu" *ngIf="(featuresList$ | async)?.release2">
+        <div class="mobile-sidenav-menu-notification full-width" *ngIf="(featuresList$ | async)?.release2">
           <a [routerLink]="'./notifications'" (click)="changeView()" class="full-width notif">
             <app-notifications class="flex flex-row justify-between content-center items-center"> </app-notifications>
           </a>
diff --git a/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss b/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss
index 5cc9b3659..8f648ac74 100644
--- a/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss
+++ b/src/app/shared/components/sidenav-menu/sidenav-menu.component.scss
@@ -26,20 +26,24 @@
 }
 
 @media (max-width: 750px) {
-  .header_login {
-    position: relative;
-    bottom: 5px;
-    border-radius: 20px;
+  .mat-mdc-outlined-button.header-login {
+    color: white;
     border-color: white;
+    border-radius: 20px;
+  }
+
+  .mat-mdc-button.button-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     color: white;
-    font-size: 13px;
-    margin-left: 10px;
+  }
 
-    ::ng-deep span.mat-button-wrapper {
-      position: relative;
-      top: 3px;
-      padding: 0 12px;
-    }
+  mat-icon.mat-icon {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+    margin: 0;
   }
 
   .mobile-sidenav {
@@ -85,7 +89,12 @@
     }
 
     &-account {
-      vertical-align: middle;
+      height: 40px;
+      width: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     &-language {
@@ -99,6 +108,11 @@
       flex-direction: column;
       align-items: flex-start;
       padding: 0 1rem;
+
+      &-notification {
+        padding: 0;
+      }
+
       & > a {
         padding: 0.5rem 0;
       }
diff --git a/src/app/shared/modules/material.module.ts b/src/app/shared/modules/material.module.ts
index 934085d1d..9227acb50 100644
--- a/src/app/shared/modules/material.module.ts
+++ b/src/app/shared/modules/material.module.ts
@@ -8,7 +8,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatChipsModule } from '@angular/material/chips';
diff --git a/src/app/shell/details/side-menu/actions/actions.component.scss b/src/app/shell/details/side-menu/actions/actions.component.scss
index 772637edf..beb8cc1b0 100644
--- a/src/app/shell/details/side-menu/actions/actions.component.scss
+++ b/src/app/shell/details/side-menu/actions/actions.component.scss
@@ -1,2 +1,9 @@
 @import 'src/app/shared/styles/buttons.scss';
 @import 'src/app/shared/styles/side-menu-cards.scss';
+
+.mat-icon {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+  margin: 0 4px 0 0;
+}
diff --git a/src/app/shell/main/main.component.html b/src/app/shell/main/main.component.html
index 2a3259151..5e9d69312 100644
--- a/src/app/shell/main/main.component.html
+++ b/src/app/shell/main/main.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="!(isLoadingData$ | async) && !!settlement">
     <div class="main-header">
       <h3>{{ 'TOP_DIRECTIONS' | translate }}</h3>
-      <a routerLink="/all-categories" class="main_link">
+      <a routerLink="/all-categories" class="main-link">
         {{ isMobile ? ('ALL' | translate) : ('VIEW_ALL' | translate) }} <span class="material-icons arrow">arrow_forward</span>
       </a>
     </div>
@@ -22,16 +22,17 @@ <h3>{{ 'TOP_DIRECTIONS' | translate }}</h3>
 
     <div class="main-header">
       <h3>{{ 'TOP_WORKSHOPS' | translate }}</h3>
-      <a routerLink="/result" class="main_link">
+      <a routerLink="/result" class="main-link">
         {{ isMobile ? ('ALL' | translate) : ('VIEW_ALL' | translate) }} <span class="material-icons arrow">arrow_forward</span>
       </a>
     </div>
 
     <ng-container *ngIf="(topWorkshops$ | async)?.length; then topWorkshops; else emptyData"></ng-container>
   </ng-container>
+
   <ng-template #topWorkshops>
     <div class="card-wrapper">
-      <app-workshop-card class="card" *ngFor="let workshop of topWorkshops$ | async" [workshop]="workshop"> </app-workshop-card>
+      <app-workshop-card class="card" *ngFor="let workshop of topWorkshops$ | async" [workshop]="workshop"></app-workshop-card>
     </div>
   </ng-template>
 
@@ -43,13 +44,13 @@ <h3>{{ 'TOP_WORKSHOPS' | translate }}</h3>
 </div>
 <div
   *ngIf="(role$ | async) === Role.unauthorized"
-  class="main_registration flex flex-row box-border justify-between content-center items-center">
-  <div class="main_description">
-    <h2 class="main_question">{{ 'DO_YOU_PROVIDE_EDUCATIONAL_SERVICES' | translate }}</h2>
-    <h4 class="main_hint">{{ 'SIGN_UP_WE_WILL_HELP_YOU_ATTRACT_NEW_STUDENTS' | translate }}</h4>
+  class="main-registration flex flex-row box-border justify-between content-center items-center">
+  <div class="main-description">
+    <h2 class="main-question">{{ 'DO_YOU_PROVIDE_EDUCATIONAL_SERVICES' | translate }}</h2>
+    <h4 class="main-hint">{{ 'SIGN_UP_WE_WILL_HELP_YOU_ATTRACT_NEW_STUDENTS' | translate }}</h4>
   </div>
-  <div class="main_button-wrapper">
-    <button mat-stroked-button class="main_button" (click)="onRegister()" data-testid="register-button">
+  <div class="main-button-wrapper">
+    <button mat-stroked-button class="main-button" (click)="onRegister()" data-testid="register-button">
       {{ 'SIGN_UP' | translate }}
     </button>
   </div>
diff --git a/src/app/shell/main/main.component.scss b/src/app/shell/main/main.component.scss
index c3251ef09..2fb139b0f 100644
--- a/src/app/shell/main/main.component.scss
+++ b/src/app/shell/main/main.component.scss
@@ -1,10 +1,11 @@
 @import 'src/app/shared/styles/list-wrappers.scss';
 @import 'src/app/shared/styles/card-wrapper.scss';
+
 .main {
   width: 100%;
   min-height: 500px;
 
-  &_registration {
+  &-registration {
     padding: 32px 40px;
     background: #3849f9;
     border-radius: 5px;
@@ -12,6 +13,7 @@
     height: 125px;
     margin-top: 4rem;
     margin-bottom: 4rem;
+
     &::before {
       content: '';
       display: block;
@@ -23,32 +25,39 @@
       top: 0;
     }
   }
-  &_button {
+
+  &-button {
     border-radius: 20px;
     padding: 10px 30px;
     font-size: 13px;
     line-height: 13px;
     border-color: white;
     color: white;
+    height: 35px !important;
   }
-  &_question {
+
+  &-question {
     color: #ffffff;
   }
-  &_hint {
+
+  &-hint {
     margin-top: 16px;
     color: #ffffff;
   }
-  &_link {
+
+  &-link {
     display: flex;
     font-weight: bold;
     color: #3849f9;
     align-items: center;
+
     .arrow {
       margin-left: 8px;
       font-size: 15px;
       line-height: 24px;
     }
   }
+
   &-header {
     display: flex;
     flex-direction: row;
@@ -64,13 +73,13 @@ app-footer {
 }
 
 @media (max-width: 675px) {
-  .main_registration {
+  .main-registration {
     padding: 20px;
     height: inherit;
     margin: 24px 16px;
     display: block !important;
 
-    .main_button-wrapper {
+    .main-button-wrapper {
       text-align: center;
       margin-top: 10px;
     }
@@ -82,27 +91,34 @@ app-footer {
     visibility: visible;
     position: static;
   }
-  .main_title {
+
+  .main-title {
     font-size: 16px !important;
   }
+
   .main-header {
     padding: 0 1rem;
+
     h3 {
       font-size: 14px;
     }
-    .main_link {
+
+    .main-link {
       font-size: 13px;
     }
   }
+
   .card-wrapper {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
     justify-content: flex-start;
     scroll-snap-type: x mandatory;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     .card {
       margin-right: 8px;
       scroll-snap-align: center;
diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.html b/src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.html
index 790d758d5..37ad3dfb2 100644
--- a/src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.html
+++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-description-form/create-description-form.component.html
@@ -50,7 +50,7 @@
     <label class="step-characters-count">{{ keyWords.length }}/{{ validationConstants.MAX_KEYWORDS_LENGTH }}</label>
   </div>
   <div class="step-input keywords" (click)="setFocus()">
-    <span *ngIf="!keyWordsCtrl.value && keyWords.length < 1 " class="keywordsPlaceholder"
+    <span *ngIf="!keyWordsCtrl.value && keyWords.length < 1" class="keywordsPlaceholder"
       >{{ 'FORMS.PLACEHOLDERS.KEYWORDS_START' | translate }} {{ validationConstants.MAX_KEYWORDS_LENGTH }}
       {{ 'FORMS.PLACEHOLDERS.KEYWORDS_END' | translate }}</span
     >
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
index 5b6099ff9..46beb111b 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.html
@@ -1,7 +1,7 @@
 <div class="wrapper flex flex-row flex-wrap justify-start" *ngIf="user$ | async as user">
   <div class="config">
     <a routerLink="edit" class="config_edit-icon">
-      <button mat-button style="color: #3849f9">
+      <button mat-button class="edit-button">
         <mat-icon style="color: #3849f9">edit</mat-icon>
         {{ 'BUTTONS.EDIT' | translate }}
       </button>
diff --git a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.scss b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.scss
index f08daf4bc..00303eee0 100644
--- a/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.scss
+++ b/src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config.component.scss
@@ -1,6 +1,19 @@
 @import 'src/app/shared/styles/config.scss';
 
 .config {
+  .edit-button {
+    color: #3849f9;
+    padding: 0 16px;
+    line-height: normal;
+
+    .mat-icon {
+      height: 24px;
+      font-size: 24px;
+      width: 24px;
+      margin-right: 4px;
+    }
+  }
+
   p {
     &.important {
       color: red;
diff --git a/src/styles.scss b/src/styles.scss
index f4bc47f68..870d7c36c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,12 +10,13 @@
 
 $primary-color: #3849f9;
 
-$config: mat.define-legacy-typography-config(
+$config: mat.define-typography-config(
   $font-family: 'Innerspace',
   $button: mat.define-typography-level(13px, 15px, 700)
 );
 
 @mixin mat-button-toggle-typography($config) {
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
   .mat-button-toggle,
   .mat-button-toggle-button {
     @include mat.typography-level($config, button);
@@ -72,7 +73,7 @@ $theme: mat.define-light-theme(
       primary: $primary-palette,
       accent: $accent-palette
     ),
-    typography: mat.define-legacy-typography-config(),
+    typography: mat.define-typography-config(),
     density: 0
   )
 );
@@ -86,7 +87,9 @@ $theme: mat.define-light-theme(
 @include mat.all-component-themes($theme);
 
 @include mat.button-toggle-typography($config);
-@include mat.legacy-button-typography($config);
+@include mat.button-typography($config);
+@include mat.fab-typography($config);
+@include mat.icon-button-typography($config);
 @include mat-form-typography($config);
 
 html,