diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 6c633649c..03d5c43f8 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,5 +1,5 @@
 <link rel="stylesheet" href="https://fusion.ironsrc.net/Angular_14/v26/styles.5859cbb869f0ab3e.css">
-<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/5.6.8/style/v4/fonts.css">
+<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/5.7.7/style/v4/fonts.css">
 
 <style>
     body {
@@ -60,6 +60,36 @@
     }
     /* endregion */
 
+    /* region shadows */
+    .fu-shadow-xs{box-shadow:0px 1px 2px 0px rgba(16,24,40,.05)}.fu-shadow-sm{box-shadow:0px 1px 3px 0px rgba(16,24,40,.1),0px 1px 2px 0px rgba(16,24,40,.06)}.fu-shadow-md{box-shadow:0px 4px 8px -2px rgba(16,24,40,.1),0px 2px 4px -2px rgba(16,24,40,.06)}.fu-shadow-lg{box-shadow:0px 12px 16px -4px rgba(16,24,40,.08),0px 4px 6px -2px rgba(16,24,40,.03)}.fu-shadow-xl{box-shadow:0px 20px 24px -6px rgba(16,24,40,.08),0px 8px 8px -4px rgba(16,24,40,.03)}.fu-shadow-xxl{box-shadow:0px 24px 48px -12px rgba(16,24,40,.18)}.fu-shadow-xxxl{box-shadow:0px 19px 32px 2px rgba(44,45,45,.14)}.fu-shadow-slg{box-shadow:0px 27px 27px 2px rgba(44,45,45,.14)}
+
+    .fu-shadow-examples{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 38px;
+        padding: 80px;
+        background-color: #EDEDED;
+    }
+    .fu-shadow-example {
+        width: 124px;
+        height: 124px;
+        background-color: #fff;
+        border-radius: 16px;
+        display: flex;
+        gap: 8px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+    }
+    .fu-shadow-hr{
+        flex-basis: 100%;
+    }
+    /* endregion */
+
+    /* region grid */
     .fu-grid-example-wrapper{
         padding: 16px;
         border-radius: 16px;
@@ -102,7 +132,9 @@
         height: 32px;
         background-color: rgba(150, 192, 255, 0.3);
     }
+    /* endregion */
 
+    /*region breackpoints*/
     .fu-breakpoint_xl{
         background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 48 43\'%3E%3Cpath d=\'M44 0H4C1.792 0 0 1.806 0 4.031v24.188c0 2.225 1.792 4.031 4 4.031h16l-2 8.063h-6c-.733 0-1.333.604-1.333 1.343 0 .74.6 1.344 1.333 1.344h24c.733 0 1.333-.605 1.333-1.344 0-.739-.6-1.343-1.333-1.343h-6l-2-8.063h16c2.208 0 4-1.806 4-4.031V4.031C48 1.806 46.208 0 44 0zM20.75 40.313l1.333-5.376h3.834l1.333 5.376h-6.5zm24.583-12.094c0 .739-.6 1.343-1.333 1.343H4a1.342 1.342 0 01-1.333-1.343V4.031c0-.739.6-1.343 1.333-1.343h40c.733 0 1.333.604 1.333 1.343v24.188z\' fill=\'%23C2CDD7\' fill-rule=\'nonzero\'/%3E%3C/svg%3E');
         width: 48px;
@@ -149,4 +181,5 @@
         font-family: monospace, monospace;
         width: fit-content;
     }
+    /*endregion*/
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ea80bc17e..176e56aed 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -14,7 +14,7 @@ const preview = {
             }
         },
         stackblitzAdditionalDependency: {
-            "@ironsource/fusion-ui": '5.6.3'
+            "@ironsource/fusion-ui": '5.7.15'
         },
         viewMode: 'story',
         docs: {inlineStories: true},
diff --git a/projects/fusion-ui/components/layout/v4/layout.component.ts b/projects/fusion-ui/components/layout/v4/layout.component.ts
index d210a14b1..71769fb9c 100644
--- a/projects/fusion-ui/components/layout/v4/layout.component.ts
+++ b/projects/fusion-ui/components/layout/v4/layout.component.ts
@@ -129,6 +129,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
         if (itemFound) {
             this.navigationMenu.setActiveMenu(primaryItemFound, itemFound);
             this.menuItemSelectedByRoute.emit(itemFound);
+        } else {
+            this.navigationMenu.setActiveMenu(null, null);
         }
         return !!itemFound;
     }
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts b/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts
index 2e1669fbd..e590d31ce 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts
@@ -171,12 +171,18 @@ export class NavigationMenuComponent implements OnInit {
     }
 
     setActiveMenu(primary: PrimaryMenuItem, secondary: MenuItem) {
-        this.selectedPrimaryMenuItem = primary;
-        this.preSelectedPrimaryMenuItem = primary;
-        this.selectedSecondaryMenuItem = secondary;
-        this.setSecondaryMenu(primary);
-        this.primaryMenu.setSelectedPrimaryMenuItem(primary);
-        this.primaryMenu.setColorTheme(primary?.cssTheme ?? null);
+        if (isNullOrUndefined(primary) || isNullOrUndefined(secondary)) {
+            this.secondaryMenu.setSelected(null);
+        } else {
+            this.selectedPrimaryMenuItem = primary;
+            this.preSelectedPrimaryMenuItem = primary;
+            this.selectedSecondaryMenuItem = secondary;
+            this.setSecondaryMenu(primary);
+            this.primaryMenu.setSelectedPrimaryMenuItem(primary);
+            setTimeout(() => {
+                this.primaryMenu.setColorTheme(primary?.cssTheme ?? null);
+            });
+        }
     }
 
     private setSecondaryMenu(selectedNetwork: PrimaryMenuItem) {
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html
index 5eae9c474..802a490c3 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html
@@ -6,8 +6,8 @@
             <fusion-icon *ngIf="!layoutUser.avatar" class="fu-user-icon" [name]="userIcon"></fusion-icon>
         </div>
         <div class="fu-user-data-holder">
-            <div class="fu-user-name">{{layoutUser.name}}</div>
-            <div class="fu-user-email">{{layoutUser.email}}</div>
+            <div class="fu-user-name truncate" [fusionTooltip]="layoutUser.name">{{layoutUser.name}}</div>
+            <div class="fu-user-email truncate" [fusionTooltip]="layoutUser.email">{{layoutUser.email}}</div>
         </div>
     </div>
     <!--endregion logged user info-->
@@ -15,10 +15,14 @@
         <!--region menu items-->
         <ng-container *ngFor="let menuItem of menuItems">
             <div *ngIf="menuItem.withTopDelimiter" class="fu-pop-menu-item-delimiter"></div>
-            <div class="fu-pop-menu-item {{menuItem.cssClass}}" (click)="menuItemClicked.emit(menuItem)">
+            <a class="fu-pop-menu-item {{menuItem.cssClass}}"
+               [href]="menuItem.route || menuItem.redirect"
+               [target]="menuItem.target ?? '_self'"
+               (click)="onMenuItemClicked($event,menuItem)"
+            >
                 <fusion-icon class="fu-pop-menu-icon" *ngIf="menuItem.icon" [name]="menuItem.icon"></fusion-icon>
                 <div class="fu-pop-menu-text">{{menuItem.name}}</div>
-            </div>
+            </a>
         </ng-container>
         <!--endregion menu items-->
     </div>
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss
index 00e06104a..62a71dbd9 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss
@@ -24,6 +24,10 @@ $menuItemHoverColor: #F5F5F5;
         box-shadow: $boxShadowLG;
         border-radius: $borderRadius;
 
+        .truncate{
+            @extend %truncate;
+        }
+
         .fu-pop-menu-header{
             display: flex;
             flex-direction: row;
@@ -52,17 +56,23 @@ $menuItemHoverColor: #F5F5F5;
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 4px;
+                width: calc(#{$menuWidth} - 88px); // 88px = 8px +8px + 32px + 16px + 16px + 8px
                 .fu-user-name{
+                    cursor: default;
                     @extend %font-v4-heading-4;
                     color: $fu-nav-text-primary;
                 }
                 .fu-user-email{
+                    cursor: default;
                     @extend %font-v4-caption;
                     color: $fu-nav-text-secondary;
                 }
             }
         }
 
+        a {
+            text-decoration: none;
+        }
         .fu-pop-menu-items{
             display: flex;
             flex-direction: column;
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts
index e1e6ff419..6b85d5aa5 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts
@@ -3,11 +3,12 @@ import {CommonModule} from '@angular/common';
 import {IconData, IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {LayoutUser} from '@ironsource/fusion-ui/entities';
 import {MenuItem} from '@ironsource/fusion-ui/components/menu/common/base';
+import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip';
 
 @Component({
     selector: 'fusion-navigation-pop-menu',
     standalone: true,
-    imports: [CommonModule, IconModule],
+    imports: [CommonModule, IconModule, TooltipModule],
     templateUrl: './navigation-pop-menu.component.html',
     styleUrls: ['./navigation-pop-menu.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -31,4 +32,15 @@ export class NavigationPopMenuComponent implements OnInit, AfterViewInit {
             this.element.nativeElement.style.height = `${popupHeight}px`;
         }
     }
+
+    onMenuItemClicked($event: MouseEvent, menuItem: MenuItem) {
+        if ($event && $event.metaKey) {
+            return;
+        }
+        if ($event && !menuItem.target) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this.menuItemClicked.emit(menuItem);
+        }
+    }
 }
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html b/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html
index 958aafaf4..a97ab3712 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html
@@ -34,6 +34,7 @@
                         [menuItems]="bottomItem.menuItems"
                         [fusionReposition]="'#fu-bottom-nav-item-btn_'+bottomItemIndex"
                         [fusionRepositionPlacement]="popMenuPosition"
+                        [fusionRepositionOffset]="popMenuOffset$ | async"
                         (menuItemClicked)="onPopMenuItemClicked($event)"
                         (fusionClickOutside)="onPopMenuOutsideClick($event)"></fusion-navigation-pop-menu>
                 </ng-container>
@@ -54,6 +55,7 @@
     <div class="fu-navigation-bar-button" id="fu-bottom-nav-item-btn_{{index}}"
          [class.fu-selected]="selectedItem"
          [class.fu-with-pop-menu]="popMenu"
+         [class.fu-selected]="popMenu && (showPopMenu$ | async)"
          [class.fu-triangle]="menuOpened && (item === menuOpenForPrimaryMenuItem)"
          (click)="networkItemClicked(item)"
     >
diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts b/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts
index 74dc6fb7c..e73a03254 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts
+++ b/projects/fusion-ui/components/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts
@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {isNullOrUndefined} from '@ironsource/fusion-ui/utils';
 import {SvgModule} from '@ironsource/fusion-ui/components/svg';
 import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
@@ -8,10 +8,11 @@ import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip';
 import {ClickOutsideModule} from '@ironsource/fusion-ui/directives/click-outside';
 import {LayoutUser} from '@ironsource/fusion-ui/entities';
 import {TooltipPosition} from '@ironsource/fusion-ui/components/tooltip/common/base';
-import {RepositionDirective} from '@ironsource/fusion-ui/directives/reposition';
+import {RepositionDirective, RepositionOffset} from '@ironsource/fusion-ui/directives/reposition';
 import {MenuItem} from '@ironsource/fusion-ui/components/menu/common/base';
 import {NavigationBarItemType, PrimaryMenuItem} from '../navigation-menu.entities';
 import {NavigationPopMenuComponent} from '../navigation-pop-menu/navigation-pop-menu.component';
+import {map} from 'rxjs/operators';
 
 @Component({
     selector: 'fusion-navigation-primary-menu',
@@ -43,6 +44,7 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     get nativeElement(): HTMLElement {
         return this.elementRef.nativeElement;
     }
+
     get bottomItemsTopPosition(): number {
         return (this.nativeElement.querySelector('.fu-navigation-bar-bottom-items > div:first-child') as HTMLElement)?.offsetTop ?? 0;
     }
@@ -60,6 +62,12 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     menuExpandedIcon = {iconName: 'arrowLineRight', iconVersion: 'v4'};
     popMenuPosition = TooltipPosition.BottomLeft;
 
+    popMenuOffset$: Observable<RepositionOffset> = this.selectedBarItem$.asObservable().pipe(
+        map((selectedBarItem: PrimaryMenuItem) => {
+            return selectedBarItem?.type === NavigationBarItemType.Main ? {x: 64, y: 48} : {x: 64};
+        })
+    );
+
     private primaryMenuOpenedItem: PrimaryMenuItem;
 
     defaultCssTheme: {[key: string]: string};
@@ -113,7 +121,6 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     }
 
     menuToggleButtonClicked(event: MouseEvent) {
-        event.stopPropagation();
         this.menuToggleCollapsed = !this.menuToggleCollapsed;
         this.toggleMenu.emit();
     }
diff --git a/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts b/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts
index e2621370c..3a67b5cc5 100644
--- a/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts
+++ b/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts
@@ -24,7 +24,8 @@ export const USER_PROFILE_MENU_ITEMS: MenuItem[] = [
         withTopDelimiter: true,
         icon: {iconName: 'mail_outline', iconVersion: 'v4'},
         name: 'Contact us',
-        route: '/'
+        redirect: 'https://ironsrc.formtitan.com/contact-us',
+        target: '_contactUs'
     },
     {
         name: 'Logout',
@@ -341,7 +342,7 @@ export const IS_MENU_ITEMS: MenuItem[] = [
         children: [
             {
                 name: 'MMP',
-                route: '/MMP'
+                route: '/docs/components/checkbox'
             },
             {
                 name: 'SKAdNetwork',
diff --git a/projects/fusion-ui/components/shadows-v4.mdx b/projects/fusion-ui/components/shadows-v4.mdx
new file mode 100644
index 000000000..eefb587bc
--- /dev/null
+++ b/projects/fusion-ui/components/shadows-v4.mdx
@@ -0,0 +1,65 @@
+import {Meta} from '@storybook/addon-docs';
+
+<Meta title="Styleguide/V4/Shadows"/>
+
+# Shadows
+
+CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating.
+
+To use our shadows scss variables add in your *.scss
+```css
+  @import '~@ironsource/fusion-ui/style/v4/vars/shadows';
+```
+Or Import css file for *.css with shadow classes
+```css
+  @import '~@ironsource/fusion-ui/style/v4/shadows.css';
+```
+
+## Shadows:
+<div class="sb-unstyled">
+    <div class="fu-shadow-examples">
+        <div class="fu-shadow-example fu-shadow-xs">
+            <div class="font-v4-subtitle-2">x small</div>
+            <div>$boxShadowXS</div>
+            <div>.fu-shadow-xs</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-sm">
+            <div class="font-v4-subtitle-2">small</div>
+            <div>$boxShadowSM</div>
+            <div>.fu-shadow-sm</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-md">
+            <div class="font-v4-subtitle-2">medium</div>
+            <div>$boxShadowMD</div>
+            <div>.fu-shadow-md</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-lg">
+            <div class="font-v4-subtitle-2">large</div>
+            <div>$boxShadowLG</div>
+            <div>.fu-shadow-lg</div>
+        </div>
+        <div class="fu-shadow-hr"></div>
+        <div class="fu-shadow-example fu-shadow-xl">
+            <div class="font-v4-subtitle-2">x large</div>
+            <div>$boxShadowXL</div>
+            <div>.fu-shadow-xl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-xxl">
+            <div class="font-v4-subtitle-2">xx large</div>
+            <div>$boxShadowXXL</div>
+            <div>.fu-shadow-xxl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-xxxl">
+            <div class="font-v4-subtitle-2">xxx large</div>
+            <div>$boxShadowXXXL</div>
+            <div>.fu-shadow-xxxl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-slg">
+            <div class="font-v4-subtitle-2">super large</div>
+            <div>$boxShadowSLG</div>
+            <div>.fu-shadow-slg</div>
+        </div>
+    </div>
+</div>
+
+
diff --git a/projects/fusion-ui/components/typography-v4.mdx b/projects/fusion-ui/components/typography-v4.mdx
index 0e074bdcb..8375eb67f 100644
--- a/projects/fusion-ui/components/typography-v4.mdx
+++ b/projects/fusion-ui/components/typography-v4.mdx
@@ -1,4 +1,4 @@
-import {Meta} from '@storybook/addon-docs';
+import {Meta, Source} from '@storybook/addon-docs';
 
 <Meta title="Styleguide/V4/Typography"/>
 
@@ -37,6 +37,8 @@ Or Import css file for *.css
 <div class="sb-unstyled">
     <div class="fu-typeface-v4-row fu-typeface-v4-row-title">
         <div class="fu-typeface-v4-col font-v4-subtitle-1">Name</div>
+        <div class="fu-typeface-v4-col font-v4-subtitle-1">CSS class name</div>
+        <div class="fu-typeface-v4-col font-v4-subtitle-1">SCSS name</div>
         <div class="fu-typeface-v4-col font-v4-subtitle-1">Weight</div>
         <div class="fu-typeface-v4-col font-v4-subtitle-1">Size</div>
         <div class="fu-typeface-v4-col font-v4-subtitle-1">Line height</div>
@@ -45,6 +47,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-title">title</div>
+        <div class="fu-typeface-v4-col font-v4-subtitle-1">.font-v4-title</div>
+        <div class="fu-typeface-v4-col font-v4-subtitle-1">%font-v4-title</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">40px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">48px</div>
@@ -53,6 +57,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-1">h1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-1</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">24px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">28px</div>
@@ -60,6 +66,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-2">h2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-2</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">18px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">28px</div>
@@ -67,6 +75,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-3">h3</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-3</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-3</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">16px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">24px</div>
@@ -74,6 +84,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-4">h4</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-4</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-4</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">14px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -81,6 +93,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-5">h5</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-5</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-5</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">13px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">16px</div>
@@ -88,6 +102,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-heading-6">h6</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-heading-6</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-heading-6</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">12px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">12px</div>
@@ -96,6 +112,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-body-1">body1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-body-1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-body-1</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Regular (400)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">14px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -103,6 +121,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-body-2">body2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-body-2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-body-2</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Regular (400)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">13px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -111,6 +131,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-subtitle-1">subtitle1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-subtitle-1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-subtitle-1</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Medium (500)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">14px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -118,6 +140,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-subtitle-2">subtitle2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-subtitle-2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-subtitle-2</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Medium (500)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">13px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -126,6 +150,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-button">button</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-button</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-button</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">14px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -134,6 +160,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-overline">overline</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-overline)</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-overline</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Medium (500)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">12px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">16px</div>
@@ -142,6 +170,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-caption">caption</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-caption</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-caption</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Regular (400)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">12px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">16px</div>
@@ -150,6 +180,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-table-header">table header</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-table-header</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-table-header</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">13px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -158,6 +190,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-chip-label">chip label</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-chip-label</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-chip-label</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Semibold (600)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">12px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">16px</div>
@@ -166,6 +200,8 @@ Or Import css file for *.css
 
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-chart-1">chart1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-chart-1</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-chart-1</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Bold (700)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">24px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">24px</div>
@@ -173,6 +209,8 @@ Or Import css file for *.css
     </div>
     <div class="fu-typeface-v4-row">
         <div class="fu-typeface-v4-col font-v4-chart-2">chart2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">.font-v4-chart-2</div>
+        <div class="fu-typeface-v4-col font-v4-body-1">%font-v4-chart-2</div>
         <div class="fu-typeface-v4-col font-v4-body-1">Bold (700)</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
         <div class="fu-typeface-v4-col font-v4-body-1">20px</div>
@@ -180,4 +218,58 @@ Or Import css file for *.css
     </div>
 </div>
 
+<br/><br/>
+
+## Code example for CSS classes.
+<Source code={`
+<div class="font-v4-title">Title</div>
+<div class="font-v4-heading-1">Heading 1</div>
+<div class="font-v4-heading-2">Heading 2</div>
+<div class="font-v4-heading-3">Heading 3</div>
+<div class="font-v4-heading-4">Heading 4</div>
+<div class="font-v4-heading-5">Heading 5</div>
+<div class="font-v4-heading-6">Heading 6</div>
+<div class="font-v4-body-1">Body 1</div>
+<div class="font-v4-body-2">Body 2</div>
+<div class="font-v4-subtitle-1">Subtitle 1</div>
+<div class="font-v4-subtitle-2">Subtitle 2</div>
+<div class="font-v4-button">Button</div>
+<div class="font-v4-overline">Overline</div>
+<div class="font-v4-caption">Caption</div>
+<div class="font-v4-table-header">Table header</div>
+<div class="font-v4-chip-label">chip label</div>
+<div class="font-v4-chart-1">Chart 1</div>
+<div class="font-v4-chart-2">chart 2</div>
+`} />
+
+## Code example for SCSS.
+<Source language="css" code={`
+@import '~@ironsource/fusion-ui/style/v4/vars/fonts';
+
+.font-v4-bold {@extend %font-v4-bold;}
+.font-v4-semibold {@extend %font-v4-semibold; }
+.font-v4-medium {@extend %font-v4-medium;}
+.font-v4-regular {@extend %font-v4-regular;}
+.font-v4-title {@extend %font-v4-title;}
+.font-v4-heading-1 {@extend %font-v4-heading-1;}
+.font-v4-heading-2 {@extend %font-v4-heading-2;}
+.font-v4-heading-3 {@extend %font-v4-heading-3;}
+.font-v4-heading-4 {@extend %font-v4-heading-4;}
+.font-v4-heading-5 {@extend %font-v4-heading-5;}
+.font-v4-heading-6 {@extend %font-v4-heading-6;}
+.font-v4-body-1 {@extend %font-v4-body-1;}
+.font-v4-body-2 {@extend %font-v4-body-2;}
+.font-v4-subtitle-1 {@extend %font-v4-subtitle-1;}
+.font-v4-subtitle-2 {@extend %font-v4-subtitle-2;}
+.font-v4-chart-1 {@extend %font-v4-chart-1;}
+.font-v4-chart-2 {@extend %font-v4-chart-2;}
+.font-v4-button {@extend %font-v4-button;}
+.font-v4-overline {@extend %font-v4-overline;}
+.font-v4-caption {@extend %font-v4-caption;}
+.font-v4-table-header {@extend %font-v4-table-header;}
+.font-v4-input-label {@extend %font-v4-input-label;}
+.font-v4-tab-label {@extend %font-v4-tab-label;}
+.font-v4-chip-label {@extend %font-v4-chip-label;}
+`} />
+
 
diff --git a/projects/fusion-ui/src/style/scss/v4/shadows.scss b/projects/fusion-ui/src/style/scss/v4/shadows.scss
new file mode 100644
index 000000000..d18b06e1d
--- /dev/null
+++ b/projects/fusion-ui/src/style/scss/v4/shadows.scss
@@ -0,0 +1,27 @@
+@import './vars/shadows';
+
+.fu-shadow-xs {
+    @extend %shadow-v4-xs;
+}
+.fu-shadow-sm {
+    @extend %shadow-v4-sm;
+}
+.fu-shadow-md {
+    @extend %shadow-v4-md;
+}
+.fu-shadow-lg {
+    @extend %shadow-v4-lg;
+}
+.fu-shadow-xl {
+    @extend %shadow-v4-xl;
+}
+.fu-shadow-xxl {
+    @extend %shadow-v4-xxl;
+}
+.fu-shadow-xxxl {
+    @extend %shadow-v4-xxxl;
+}
+.fu-shadow-slg {
+    @extend %shadow-v4-slg;
+}
+
diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_borders.scss b/projects/fusion-ui/src/style/scss/v4/vars/_borders.scss
index 7ea9170d5..abbb48f43 100644
--- a/projects/fusion-ui/src/style/scss/v4/vars/_borders.scss
+++ b/projects/fusion-ui/src/style/scss/v4/vars/_borders.scss
@@ -3,15 +3,6 @@
 $borderRadius: var(--fu-border-radius, 8px);
 $borderLine: 1px solid $fu-divider;
 
-$boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-$boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-$boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-$boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-$boxShadowXL: 0px 20px 24px -6px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-$boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-$boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
-$boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
-
 %noBorderRadiusTR{
     border-top-right-radius: 0 !important;
 }
diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss b/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss
new file mode 100644
index 000000000..347e215ff
--- /dev/null
+++ b/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss
@@ -0,0 +1,33 @@
+$boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+$boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+$boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+$boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+$boxShadowXL: 0px 20px 24px -6px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+$boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+$boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+$boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+
+%shadow-v4-xs{
+    box-shadow: $boxShadowXS;
+}
+%shadow-v4-sm{
+    box-shadow: $boxShadowSM;
+}
+%shadow-v4-md{
+    box-shadow: $boxShadowMD;
+}
+%shadow-v4-lg{
+    box-shadow: $boxShadowLG;
+}
+%shadow-v4-xl{
+    box-shadow: $boxShadowXL;
+}
+%shadow-v4-xxl{
+    box-shadow: $boxShadowXXL;
+}
+%shadow-v4-xxxl{
+    box-shadow: $boxShadowXXXL;
+}
+%shadow-v4-slg{
+    box-shadow: $boxShadowSLG;
+}
diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss b/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss
index e24ac0dfe..80f7b305f 100644
--- a/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss
+++ b/projects/fusion-ui/src/style/scss/v4/vars/_vars.scss
@@ -1,6 +1,7 @@
 @import 'fonts';
 @import 'colors';
 @import 'screen';
+@import "shadows";
 
 %border-box-normalize {
     * {box-sizing: border-box;}