diff --git a/src/app/_modules/layout/grid/grid.component.html b/src/app/_modules/layout/grid/grid.component.html
index 184e8a7..58d964f 100644
--- a/src/app/_modules/layout/grid/grid.component.html
+++ b/src/app/_modules/layout/grid/grid.component.html
@@ -4,12 +4,24 @@
 
 
 
-<div class="wrapper {{classActive}}">
+<!-- <div class="wrapper {{classActive}}">
   <header></header>
   <div class="content">
       <router-outlet></router-outlet>
   </div>
   <footer></footer>
   
+</div> -->
+
+<div class="wrapper">
+  <header></header>
+  <div class="content">    
+      <left-content></left-content>    
+    <div class="main-content">
+      <router-outlet></router-outlet>
+    </div>    
+    <!-- <right-content></right-content> -->
+  </div>
+  <footer></footer>
 </div>
 
diff --git a/src/app/_modules/layout/grid/grid.component.scss b/src/app/_modules/layout/grid/grid.component.scss
index 7d088be..8b13789 100644
--- a/src/app/_modules/layout/grid/grid.component.scss
+++ b/src/app/_modules/layout/grid/grid.component.scss
@@ -1,12 +1 @@
-.wrapper {
-  width: 100%;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  header, footer {
-    flex-grow: 0;
-  }
-  .content {
-    flex-grow: 1;
-  }
-}
+
diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html
index da3b2fb..bcf33e1 100644
--- a/src/app/_modules/layout/header/header.component.html
+++ b/src/app/_modules/layout/header/header.component.html
@@ -1,8 +1,23 @@
 <div class="header">
+  <a class="burger">
+    <ico ico="burger_blue_40dp"></ico>
+
+  </a>
+  <a [routerLink]="'glavnaia'" class="logo" >
+    <img src="assets/images/logo_vniigaz_1163x816.svg">
+  </a>
+  <pages-menu class="top-menu"></pages-menu>
+  <a class="btn vnii" href="https://ais.vniigaz-cert.ru/" target="_blank">АИС СЦ ВНИИГАЗ</a>
+</div>
+  
+
+
+
+
+
+
+<!-- <div class="header">
   <div class="bottom">
-    <div class="main-menu-btn" (click)="showBottom=true">
-      <button class=" clear"></button>
-    </div>
     <a href="/glavnaia/" class="logo hidemobile"></a>
     <div class="grid-menu" >
       <button class="close" (click)="showBottom=false"></button>
@@ -28,7 +43,7 @@
     </div>
     <div class="fog"  (click)="showBottom=false" [ngClass]="{hidemobile:!showBottom,showmobile:showBottom}"></div>
   </div>
-</div>
+</div> -->
 
 
 
diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss
index 022d937..e69de29 100644
--- a/src/app/_modules/layout/header/header.component.scss
+++ b/src/app/_modules/layout/header/header.component.scss
@@ -1,185 +0,0 @@
-@media screen and (max-width: 1330px){
-
-.hidemobile{
-  display: none !important;
-}
-.header{
-  flex-grow: 1;
-  padding: 0px 24px;
-  background-color: #FFF;
-  min-height: 100%;
-
-  .bottom{
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    .main-menu-btn{
-      display: flex;
-      align-items: center;
-      button{
-        width: 40px;
-        height: 40px;
-        background: url('~src/assets/images/icons/burger_blue_40dp.svg') no-repeat center;;  
-      }
-    }
-    .logo { 
-      display: inline-flex;
-      width:114px; 
-      height: 80px;
-      margin: 12px 24px 12px 40px;
-      background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
-      background-size: contain;
-      flex-shrink: 0;
-    }
-    .fog{
-      flex-grow: 1;
-    }
-
-    
-
-    
-  }
-
-  .grid-menu {
-    display: none;
-  }
-  &.showmobile{
-    position:fixed;
-    top:0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color:rgba(45, 45, 45, 0.63);
-    z-index:100;
-    overflow-y: scroll;
-    .bottom{
-      overflow-y: scroll;
-      height: 100%;
-      .grid-menu{
-        overflow-y: scroll;
-        .left-block{
-
-        }
-        display: block;
-        background: var(--prime-act);
-        color: white;
-        width: 480px;
-        padding: 32px 40px;
-        button.close{
-          width: 24px;
-          height: 24px;
-          padding: 0;
-          border: none;
-          border-radius: 0;
-          background: transparent url('~src/assets/images/icons/close_white_24dp.svg') no-repeat center;
-        }
-        .ais{
-          display: block;
-          margin-top: 20px;
-          padding-top: 20px;
-          border-top: 1px solid rgba(255, 255, 255, 0.63);
-        }
-      }
-    }
-
-  }
-  
-  }
-  .right{
-   
-  }
-  
-}
-
-
-
-
-
-@media screen and (min-width: 1330px){
-  .showmobile{
-    display: none;
-  }
-  .header{
-    position: relative;
-    background-color: #FFF;
-    .top{
-      padding: 20px 0;
-      background-color: var(--white);
-      .limiter{
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .main-menu-btn{
-          display: none;
-          width: 24px;
-          height: 24px;
-        }
-        .menu{
-          margin-left: auto;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 24px;
-        }
-      }
-    }
-    .bottom { 
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      justify-content: normal;
-      align-items: stretch;
-      align-content: stretch; 
-      padding: 0 calc( (100% - 1400px) / 2);
-      position: relative;
-      .logo { 
-        width:114px; 
-        height: 80px;
-        margin: 12px 24px 12px 60px;
-        background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
-        background-size: contain;
-        flex-shrink: 0;
-      }
-        .grid-menu{
-          display: flex;
-          .close{
-            display: none;
-          }
-          >a{
-            display: none;
-          }
-        }
-        .main-menu {
-          overflow: hidden;
-          &.hidden {
-            display: none;
-          }
-        }
-        
-
-      .ftr{
-        display: none;
-      }
-      .right{
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        align-items: center;
-        align-content: stretch;
-        flex-grow: 1;
-        flex-shrink: 1;
-        margin-right: 60px;
-        button{
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-}
-
-header-user-bar{
-  position: absolute;
-  right: 0;
-  bottom: -96px;
-}
diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts
index 3e26b11..c8cd049 100644
--- a/src/app/_modules/layout/header/header.component.ts
+++ b/src/app/_modules/layout/header/header.component.ts
@@ -11,10 +11,10 @@ import {Subscription} from "rxjs";
 })
 export class HeaderComponent {
   public menuItems = <any>[];
-  public user: any;
+
   public loading: boolean = false;
   public error: string = '';
-  subscriptionUser: Subscription;
+
   showBottom = false;
 
   controlsSubscriptionMenu: Subscription;
@@ -26,9 +26,7 @@ export class HeaderComponent {
       public authenticationService: AuthenticationService,
       private listsService: ListsService
   ) {
-    this.subscriptionUser = this.authenticationService.user.subscribe(user => {
-      this.user = user;
-    });
+
   }
 
   ngOnInit() {
@@ -49,7 +47,7 @@ export class HeaderComponent {
   }
 
   ngOnDestroy() {
-    this.subscriptionUser?.unsubscribe();
+
     this.controlsSubscriptionMenu?.unsubscribe();
     this.resultSubscriptionMenu?.unsubscribe();
   }
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
index 0339f3f..31427cb 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
@@ -1,4 +1,4 @@
-<div class="user" (click)="ddHidden=!ddHidden"(mouseover)="ddHidden=false" (mouseleave)="ddHidden=true">
+<div class="user" (click)="ddHidden=!ddHidden"(mouseover)="ddHidden=false" (mouseleave)="ddHidden=true" *ngIf="user">
   <div class="avatar">
     <img *ngIf="avatar" [src]="avatar.links?.thumb" />
     <span *ngIf="!avatar" class="initials">{{user.initials}}</span>
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
index c9ed7f8..2a5ed6c 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
@@ -40,6 +40,14 @@
 
 
 
+
+    drop-down {
+
+      margin-top: 6px;
+
+    }
+
+
 }
 @media screen and (max-width: 1330px) {
   .user {
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts
index 30aad37..471ff1e 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.ts
@@ -1,6 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {AuthenticationService} from "@app/_services";
 import {Router} from "@angular/router";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'header-user-bar',
@@ -8,11 +9,17 @@ import {Router} from "@angular/router";
   styleUrls: ['header-user-bar.component.scss']
 })
 export class HeaderUserBarComponent {
-  @Input() user: any;
+  public user: any;
   public menuItems = <any>[];
   public ddHidden = true;
+  subscriptionUser: Subscription;
 
-  constructor(public authService: AuthenticationService, private router: Router) {
+  constructor(
+    public authService: AuthenticationService, 
+    private router: Router) {
+      this.subscriptionUser = this.authService.user.subscribe(user => {
+        this.user = user;
+      });
   }
 
   get avatar() {
@@ -26,6 +33,10 @@ export class HeaderUserBarComponent {
     
   }
 
+  ngOnDestroy() {
+    this.subscriptionUser?.unsubscribe();
+  }
+
 
   close() {
     setTimeout(() => {
diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts
index 5aef2a5..e99c549 100644
--- a/src/app/_modules/layout/layout.module.ts
+++ b/src/app/_modules/layout/layout.module.ts
@@ -5,14 +5,12 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { VigetModule } from '@app/_modules/viget/viget.module';
 
 import {PagesModule} from "@app/_modules/pages/pages.module";
-import { PagesMenuModule } from '../pages/menu/pages-menu.module';
 import {HeaderComponent} from "@app/_modules/layout/header/header.component";
 import {FooterComponent} from "@app/_modules/layout/footer/footer.component";
 import {GridComponent} from "@app/_modules/layout/grid/grid.component";
 import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-site.component";
 import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component";
-import { RetainerComponent } from './retainer/retainer.component';
-
+import { LeftContentComponent } from './left-content/left-content.component';
 
 @NgModule({
   imports: [
@@ -21,7 +19,6 @@ import { RetainerComponent } from './retainer/retainer.component';
     ReactiveFormsModule,
     RouterModule,
     PagesModule,
-    PagesMenuModule,
     VigetModule
   ],
   declarations: [
@@ -30,7 +27,7 @@ import { RetainerComponent } from './retainer/retainer.component';
     FooterComponent,
     SettingSiteComponent,
     HeaderUserBarComponent,
-    // RetainerComponent,
+    LeftContentComponent
   ],
   exports: [
     GridComponent,
diff --git a/src/app/_modules/layout/left-content/left-content.component.html b/src/app/_modules/layout/left-content/left-content.component.html
new file mode 100644
index 0000000..a918d09
--- /dev/null
+++ b/src/app/_modules/layout/left-content/left-content.component.html
@@ -0,0 +1,20 @@
+<div class="background"  [ngStyle]="{'background-image':background}">
+    <div class="left-content">
+        <header-user-bar></header-user-bar>
+        <h1 class="h1-jumbotron">
+            {{pageName}}
+        </h1>
+        <div class="menu" *ngIf="editMode">
+            <div class="block">
+                <a (click)="editBackground()"><ico ico="edit_24"></ico></a>
+                <a (click)="removeBackground()"><ico ico="delete_24"></ico></a>
+            </div>
+        </div>      
+    </div>
+</div>
+<div class="edit-field" *ngIf="editable">
+    <div class="edit-field-row switch-host" (click)="toggleEditMode()">
+        Режим редактирования
+        <switch [val]="editMode"></switch>
+    </div>
+</div>
diff --git a/src/app/_modules/layout/left-content/left-content.component.scss b/src/app/_modules/layout/left-content/left-content.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/_modules/layout/left-content/left-content.component.ts b/src/app/_modules/layout/left-content/left-content.component.ts
new file mode 100644
index 0000000..c90810b
--- /dev/null
+++ b/src/app/_modules/layout/left-content/left-content.component.ts
@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Subscription } from "rxjs";
+import { PagesService } from "@app/_services/pages.service";
+import { FormsService } from '@app/_services';
+
+@Component({
+  selector: 'left-content',
+  templateUrl: './left-content.component.html',
+  styleUrls: ['./left-content.component.scss']
+})
+export class LeftContentComponent {
+
+  public url: string = "";
+  public background:string;
+  public pageName:string;
+  public editable:string;
+  public editMode: boolean = false;
+  private pageID: string;
+  private routeSubscription: Subscription;
+
+
+
+  constructor(
+    private router: Router,
+    private pagesService:PagesService,
+    private formsService: FormsService) {
+    this.routeSubscription = this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) this.onNavigationEnd(event);
+    });
+  }
+
+  onNavigationEnd(event: NavigationEnd) {
+    let url = event.url.split('(')[0];
+    url = url.split('?')[0];
+    if (url !== this.url) {
+      this.url = url;
+      this.fetch()
+    }
+  }
+
+  fetch(){
+    let include = [
+      'permissions',
+    ];
+    this.pagesService.find(this.url, {include: include.join(',')}).subscribe(
+      resp => {
+        let page = resp.data;
+        if (page){
+          console.log(page);
+          this.background = page.image?.data?.links?.full;
+          if (this.background) this.background = 'url('+this.background+')';
+          this.pageName = page.name;
+          this.editable = page.permissions.edit || page.permissions.anything;
+          this.pageID = page.id
+          console.log(this.background);
+        }
+
+      }
+    )
+  }
+
+  toggleEditMode(){
+    this.editMode =!this.editMode;
+    this.pagesService.editMode.next(this.editMode)
+  }
+
+  editBackground() {
+    this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
+  }
+
+  removeBackground() {
+    if (confirm('Вы деествительно хотите удалить этот фон?')) {
+      this.pagesService.deleteBackground(this.pageID).subscribe(res => {
+      });
+    }
+  }
+
+}
+
+ 
+
diff --git a/src/app/_modules/layout/retainer/retainer.component.html b/src/app/_modules/layout/retainer/retainer.component.html
deleted file mode 100644
index f3f078b..0000000
--- a/src/app/_modules/layout/retainer/retainer.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<div>AAA</div>
diff --git a/src/app/_modules/layout/retainer/retainer.component.scss b/src/app/_modules/layout/retainer/retainer.component.scss
deleted file mode 100644
index c154629..0000000
--- a/src/app/_modules/layout/retainer/retainer.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-::ng-deep app{
- overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/app/_modules/layout/retainer/retainer.component.ts b/src/app/_modules/layout/retainer/retainer.component.ts
deleted file mode 100644
index cca8a2c..0000000
--- a/src/app/_modules/layout/retainer/retainer.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-retainer',
-  templateUrl: './retainer.component.html',
-  styleUrls: ['./retainer.component.scss']
-})
-export class RetainerComponent {
-
-}
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
index f967fb9..da3fbc2 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
@@ -1,7 +1,11 @@
-<div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="toggle()"></div>
-
-<a routerLinkActive="active" (click)="click()"
-[ngClass]="cssClass"><span>{{item.name}}</span></a>
-
-<pages-menu *ngIf="children?.length" [items]="children"  
-(onSelected)="select($event)" [ngClass]="cssClass"></pages-menu>
+<div class="item" [ngClass]="itemClass">
+    <drop-down *ngIf="children?.length" 
+        ico="chevron_right_24" [visible]="toggle" [target]="menu" [angle]="[0,90]">
+    </drop-down>
+    <a [routerLink]="item.link">
+        {{item.name}}
+    </a>
+</div>
+<div #menu class="sub-menu" [ngClass]="menuClass">
+    <pages-menu *ngIf="children?.length" [items]="children" [lavel]="lavel+1"></pages-menu>
+</div>
\ No newline at end of file
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.scss b/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
index 8b13789..39cd8ec 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.scss
@@ -1 +1,17 @@
+:host{
+    display: flex;
+    flex-direction: column;
 
+}
+
+.item{
+    display: flex;
+    align-items: flex-start;
+    drop-down{
+        margin-left: -24px;
+    }
+    min-height: 24px;
+    >a{
+        margin-top: 4px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
index 068b916..e23e887 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output,OnInit} from '@angular/core';
 import { Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 
@@ -9,15 +9,12 @@ import {Subscription} from 'rxjs';
 })
 export class PagesMenuItemComponent {
   @Input() item: any;
-  @Output() onSelected = new EventEmitter();
-  showChildren = false;
+  @Input() lavel: number;
+  public toggle=false;
 
   currentURL:string;
   constructor(private router: Router) {
-    router.events.subscribe((event:any)=>{
-      if(event.url)this.currentURL = event.url
-    })
-    this.currentURL = router.url
+    
   }
 
 
@@ -25,39 +22,39 @@ export class PagesMenuItemComponent {
     return this.item?.children?.data;
   }
 
-  get parentItem(){
+  ngOnInit(){
+    this.currentURL = this.router.url;
+    this.toggle = this.current||this.parent;
+    this.router.events.subscribe((event:any)=>{        
+      if (event.url){
+        this.currentURL = event.url;
+        this.toggle = this.current||this.parent;
+      }      
+    })
+  }
+
+  get parent(){
     return this.currentURL.startsWith(this.item.link)
   }
 
-  get link(){
-    return ( this.item.depth>0 && this.item.parents?.data.length==1 )?null:this.item.link
+  get current(){
+    return this.currentURL==this.item.link
   }
 
-  ngOnInit() {
-    this.showChildren = this.parentItem;
-  }
-
-  toggle(){
-    this.showChildren=!this.showChildren
-  }
-
-  click(){
-    if (this.link) {
-      this.select(this.item)   
-      this.router.navigate([this.link])   
-    }else{
-      this.toggle()
+  get menuClass(){
+    let menuClass = {
+      selected: this.toggle
     }
+    menuClass['lavel-'+(this.lavel+1)] = true;
+    return  menuClass
   }
 
-  select(item:any){
-    this.onSelected.emit(item);
+  get itemClass(){
+    let itemClass = {
+      selected: this.toggle,
+      parent: this.parent&&!this.current,
+      current: this.current
+    }
+    return itemClass
   }
-  get cssClass(){
-    return {
-      'hide-children':!this.showChildren,
-      'current-item':this.item.link==this.currentURL,
-      'parent-item':this.parentItem    }
-  }
-
 }
diff --git a/src/app/_modules/pages/menu/pages-menu.component.html b/src/app/_modules/pages/menu/pages-menu.component.html
index 32b8b0e..7c9d90b 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.html
+++ b/src/app/_modules/pages/menu/pages-menu.component.html
@@ -1,9 +1,3 @@
-<pages-menu-item 
-  (click)="setOpen(i,!open[i])" 
-  (mouseleave)="setOpen(i,false)" 
-  (mouseover)="setOpen(i,true)" 
-  (onSelected)="itemSelect($event)" 
-  [class.opened]="open[i]" 
-  [class.depth]="getDepth(item)" 
-  [item]="item" *ngFor="let item of visibleItems; let i=index;">
+<pages-menu-item [item]="item" [lavel]="lavel"
+*ngFor="let item of visibleItems">
 </pages-menu-item>
diff --git a/src/app/_modules/pages/menu/pages-menu.component.scss b/src/app/_modules/pages/menu/pages-menu.component.scss
index e69de29..49e499e 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.scss
+++ b/src/app/_modules/pages/menu/pages-menu.component.scss
@@ -0,0 +1,8 @@
+:host(pages-menu){
+    display:flex;
+    flex-direction: column;
+    padding-left: 0;
+}
+pages-menu{
+    padding-left: 24px;
+}
\ No newline at end of file
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index 8e8ede8..b0b0f81 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -1,44 +1,46 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, OnInit} from '@angular/core';
+import { Router } from '@angular/router';
+import { PagesService } from '@app/_services/pages.service';
 
 @Component({
   selector: 'pages-menu',
   templateUrl: 'pages-menu.component.html',
   styleUrls: ['pages-menu.component.scss']
 })
-export class PagesMenuComponent {
-  @Input() items = <any>[];
-  @Output() onSelected = new EventEmitter();
-  public open:boolean[]=[]
+export class PagesMenuComponent implements OnInit {
+  @Input() items: any[];
+  @Input() lavel = 0;
+
+
+  private currentURL:string;
+  private root = false;
+
+  constructor(
+    private pagesService: PagesService,
+    private router: Router,
+    
+  ){
+    router.events.subscribe((event:any)=>{
+      if(event.url)this.currentURL = event.url
+    })
+    this.currentURL = router.url
+  }
+  
 
   private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
-
-
-
   get visibleItems() {
     return this.items?.filter(item => {
       return this.hiddenPages.indexOf(item.link) === -1;
     });
   }
 
-  itemSelect(event:any){
-    this.onSelected.emit(event);
-  }
+  ngOnInit() {
 
-  setOpen(i:number,open:boolean){
-    this.open=[];
-    this.open[i]=open;
+    if (!this.items){
+      this.root = true;
+      this.pagesService.pagesTree.subscribe(res=>{
+        this.items = res.data
+      }); 
+    }    
   }
-
-  getDepth(item){
-    if (item.hasOwnProperty('depth')) return item.depth
-    if (!item.hasOwnProperty('depth')) item.depth=0;
-    if (item.children?.data.length) {
-      item.depth = 1;
-      item.children.data.forEach(child => {
-        let childDepth = this.getDepth(child)
-        if (childDepth>=item.depth) item.depth=childDepth+1;
-      });
-    }
-    return item.depth
-  }
-}
\ No newline at end of file
+}
diff --git a/src/app/_modules/pages/menu/pages-menu.module.ts b/src/app/_modules/pages/menu/pages-menu.module.ts
deleted file mode 100644
index f473fec..0000000
--- a/src/app/_modules/pages/menu/pages-menu.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
-import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
-import {RouterModule} from "@angular/router";
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-
-  ],
-  declarations: [
-    PagesMenuComponent,
-    PagesMenuItemComponent,
-
-  ],
-  exports: [
-    PagesMenuComponent,
-
-  ]
-})
-export class PagesMenuModule {}
\ No newline at end of file
diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html
new file mode 100644
index 0000000..bec3fe6
--- /dev/null
+++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html
@@ -0,0 +1,22 @@
+<slider [width]="'320px'" side="left">
+
+    <div body>
+        <pages-menu ></pages-menu>
+        <div class="btn-menu">
+            <div>
+                <a>МТК 523</a>
+                <a>Портал ТК 023</a>
+            </div>
+            <div>
+                <button>
+                    <ico [size]="24" ico="search_24"></ico>
+                    Поиск
+                </button>
+                <button>            
+                    <ico [size]="24" ico="en_24"></ico>
+                    English
+                </button>
+            </div>       
+        </div>
+    </div>        
+</slider>
\ No newline at end of file
diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.scss b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts
new file mode 100644
index 0000000..b1d7bf1
--- /dev/null
+++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'slider-menu',
+  templateUrl: './slider-menu.component.html',
+  styleUrls: ['./slider-menu.component.scss']
+})
+export class SliderMenuComponent {
+
+}
diff --git a/src/app/_modules/pages/page/page.component.html b/src/app/_modules/pages/page/page.component.html
index c5cf7d1..8f24a0a 100644
--- a/src/app/_modules/pages/page/page.component.html
+++ b/src/app/_modules/pages/page/page.component.html
@@ -1,22 +1,4 @@
 <div class="content" *ngIf="page">
-  <div class="row">
-    <div class="page-header" style="background-image: url('{{page?.image?.data?.links?.full}}')">
-      <div class="block" *ngIf="editMode">
-        <button (click)="editBackground()" class="edit"></button>
-        <button (click)="removeBackground()" class="delete"></button>
-      </div>
-      <div class="limiter">
-        <div class="line">
-          <h1>{{pageTopName}}</h1>
-        </div>
-      </div>
-    </div>
-    <div class="limiter nav-info" *ngIf="isEditable">
-      <div class="col right" (click)="toggleEditMode()">
-        <div class="label">Режим редактирования</div><div class="switch" [class.active]="editMode"></div>
-      </div>
-    </div>
-  </div>
   <!-- <div  class="limiter">
     <page-breadcrumbs [page]="page"></page-breadcrumbs>
   </div> -->
diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts
index 2421246..7e52410 100644
--- a/src/app/_modules/pages/page/page.component.ts
+++ b/src/app/_modules/pages/page/page.component.ts
@@ -44,8 +44,10 @@ export class PageComponent {
   ngAfterContentInit() {    
     this.listsService.controls().subscribe(res => {
       this.inited ? this.fetch() : this.inited = true;
-
-    });    
+    });
+    this.pagesService.editMode.subscribe(
+      mode=>this.editMode = mode
+    )
   }
 
   ngOnDestroy() {
@@ -102,22 +104,5 @@ export class PageComponent {
   }
 
 
-  toggleEditMode() {
-    this.editMode = !this.editMode;
-  }
 
-  editBackground() {
-    this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.page.id}}});
-  }
-
-  itemSelect(event){
-
-  }
-
-  removeBackground() {
-    if (confirm('Вы деествительно хотите удалить этот фон?')) {
-      this.pagesService.deleteBackground(this.page.id).subscribe(res => {
-      });
-    }
-  }
 }
diff --git a/src/app/_modules/pages/pages-routing.module.ts b/src/app/_modules/pages/pages-routing.module.ts
index 451cd60..3981825 100644
--- a/src/app/_modules/pages/pages-routing.module.ts
+++ b/src/app/_modules/pages/pages-routing.module.ts
@@ -14,7 +14,6 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
 import {PublicationsModule} from "@app/_modules/publications/publications.module";
 import {TkStructurePageComponent} from "@app/_modules/pages/page/types/tk-structure/tk-structure-page.component";
 import {HomepageModule} from "@app/_modules/pages/home/homepage.module";
-import { PagesMenuModule } from './menu/pages-menu.module';
 
 const routes: Routes = [
   {path: '', component: HomepageComponent},
@@ -29,8 +28,7 @@ const routes: Routes = [
     PageSectionsModule,
     PageSidebarsModule,
     RegistriesModule,
-    PublicationsModule,
-    PagesMenuModule
+    PublicationsModule
   ],
   declarations: [
     PageComponent,
diff --git a/src/app/_modules/pages/pages.module.ts b/src/app/_modules/pages/pages.module.ts
index a0263ef..dde7b48 100644
--- a/src/app/_modules/pages/pages.module.ts
+++ b/src/app/_modules/pages/pages.module.ts
@@ -6,6 +6,8 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
 import {PublicationsModule} from "@app/_modules/publications/publications.module";
 import {PagesListComponent} from "@app/_modules/pages/list/pages-list.component";
 import {PagesListItemComponent} from "@app/_modules/pages/list/item/pages-list-item.component";
+import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
+import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
 import {RouterModule} from "@angular/router";
 import {PaginationModule} from "@app/_modules/pagination/pagination.module";
 import {SearchSectionsComponent} from "@app/_modules/pages/sections/search/search-sections.component";
@@ -14,6 +16,8 @@ import {SwiperModule} from "swiper/angular";
 import {PagesTreeComponent} from "@app/_modules/pages/tree/pages-tree.component";
 import {PagesTreeItemComponent} from "@app/_modules/pages/tree/item/pages-tree-item.component";
 import {SortablejsModule} from "ngx-sortablejs";
+import { VigetModule } from '../viget/viget.module';
+import { SliderMenuComponent } from './menu/slider-menu/slider-menu.component';
 
 @NgModule({
   imports: [
@@ -26,20 +30,24 @@ import {SortablejsModule} from "ngx-sortablejs";
     PaginationModule,
     SwiperModule,
     SortablejsModule,
+    VigetModule
   ],
   declarations: [
+    PagesMenuComponent,
+    PagesMenuItemComponent,
     PagesListComponent,
     PagesListItemComponent,
     PagesTreeComponent,
     PagesTreeItemComponent,
     SearchSectionsComponent,
     SearchSectionsItemComponent,
+    SliderMenuComponent,
   ],
   exports: [
+    PagesMenuComponent,
     PagesListComponent,
     SearchSectionsComponent,
     PagesTreeComponent,
-    PagesTreeItemComponent,
   ]
 })
 export class PagesModule {}
diff --git a/src/app/_modules/viget/switch/switch.component.scss b/src/app/_modules/viget/switch/switch.component.scss
index 6f068f6..c8982e8 100644
--- a/src/app/_modules/viget/switch/switch.component.scss
+++ b/src/app/_modules/viget/switch/switch.component.scss
@@ -1,7 +1,7 @@
 
-$bull: 12px;
+$bull: 18px;
 $offset: 2px;
-$track: 14px;
+$track: 20px;
 div{
     border: 1px solid var(--second);
     display: inline-flex;
@@ -9,7 +9,7 @@ div{
     div{
        width: $bull;
        height: $bull;
-       background-color: var(--second); 
+       background-color: var(--second-dis); 
        border-radius: 50%;
        margin: $offset $track $offset $offset;
        border: none;
@@ -30,18 +30,21 @@ div.off{
         animation: switch-off 0.1s;
     }
 }
+::ng-deep .switch-host{
+    cursor: pointer;
+}
 :host-context(.switch-host:hover){
     div.on{        
-        background-color: var(--active);
+        background-color: var(--prime-act);
         div{
            background-color: var(--white);
            border: none;
         }
     }
     div{
-        border-color: var(--active);
+        border-color: var(--prime-act);
         div{
-           background-color: var(--active);
+           background-color: var(--prime-act);
            border: none;
         }
     }
diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts
index 463e792..c536f8e 100644
--- a/src/app/_services/pages.service.ts
+++ b/src/app/_services/pages.service.ts
@@ -1,13 +1,27 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '@environments/environment';
-import {Observable} from "rxjs";
+import {Observable, BehaviorSubject} from "rxjs";
+
 
 @Injectable({providedIn: 'root'})
 export class PagesService {
   constructor(private http: HttpClient) {
+    this.pagesTree = new BehaviorSubject({data:[]})
+    this.changedPages()
   }
 
+  public pagesTree: BehaviorSubject<any>
+  public editMode = new BehaviorSubject<boolean>(false);
+
+  changedPages(){
+    let include = ['children.children.children.children.children.children.children'];
+    this.root({include: include.join(',')}).subscribe(res => {
+      this.pagesTree.next(res)
+    });
+  }
+
+
   root(params?: {}): Observable<any> {
     return this.http.get(`${environment.apiUrl}/api/pages/root`, {params: params});
   }
diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss
index 733b348..bd6a6fb 100644
--- a/src/assets/css/basics.scss
+++ b/src/assets/css/basics.scss
@@ -14,6 +14,8 @@
   --prime-act: #004077;
   --prime-dis: #A1CAE5;
 
+
+
   --second: #6C6C6C;
   --second-hov: #4D4D4D;
   --second-act: #2D2D2D;
@@ -77,6 +79,82 @@ body {
   margin: 0;
   color: var(--second-act);
   background-color: var(--light);
+  .wrapper {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      left-content{
+        flex-basis: 100%;
+        background-color: var(--second);
+        .background{
+          width: 100%;
+          height: 400px;
+          background-size: cover;
+          background-position: center;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          border-bottom: 1px solid var(--second-dis);
+          border-top: 1px solid var(--second-dis);
+          .left-content{
+            width: 100%;
+            height: 100%;
+            max-width: 900px;
+            margin: 0 40px;
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .h1-jumbotron{
+              display: inline-block;
+              border-bottom: 12px solid var(--blue-0);
+                font-family: PT Sans Narrow;
+                font-size: 76px;
+                font-weight: 700;
+                line-height:100%;
+                letter-spacing: 0.76px;
+                color: white;
+            }
+            header-user-bar{
+              position: absolute;
+              right: 0;
+              top: 32px;
+            }
+            .menu{
+              position: absolute;
+              left: 0px;
+              top: 32px;
+            }        
+          }
+        }
+        .edit-field{
+          height: 58px;
+          width: 100%;
+          background-color: var(--white);
+          display: flex;
+          justify-content: center;
+          .edit-field-row{
+            width: 100%;
+            max-width: 900px;
+            margin: 0 40px;
+            display: flex;
+            justify-content: right;
+            align-items: center;
+            font-size: 20px;
+            gap: 8px;
+          }
+
+        }
+      }
+    }
+  }
 }
 
 .limiter {
diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss
index 41d5c94..3804b11 100644
--- a/src/assets/css/main-menu.scss
+++ b/src/assets/css/main-menu.scss
@@ -1,247 +1,81 @@
+header{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--white);
+  .header{
+    width: 1360px;
+    height: 80px;
+    margin: 12px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    
+  }
+};
+
+
+
+a.logo{
+  img{
+    width:114px; 
+    height: 80px;
+  }
+}
+
+
+
+
+
 
 @media screen and (max-width: 1330px){
-
-  .sub-menu{ display: none};
-
-  .grid-menu {
-    a{
-      color:  #FFF;
-      font-size: 20px;
-      font-weight: 700;
+  .header{
+    >pages-menu.top-menu, >a.vnii{
+      display: none;
     }
+  }
+
+}
 
 
 
-    // level 1
-    pages-menu{
-      display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      align-items: stretch;
-      align-content: normal;
-      grid-gap: 20px;
-      margin-top: 20px; 
-               
-      
-      pages-menu-item {
 
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-items: flex-start;
-        align-content: flex-start;
-        a {
-          flex-basis:50%;
-          flex-grow: 1;
 
-          flex-grow: 1;
-          flex-shrink: 1;
-          align-self: auto;
-          order: 0;
+@media screen and (min-width: 1330px){
+  .header{
+    .burger{
+      display: none;
+    }
+    >pages-menu.top-menu{
+      flex-direction: row;
+      gap:24px;
+      pages-menu-item{
+        font-size: 20px;
+        .item{
+          drop-down{
+            display: none;
+          }
         }
-
         pages-menu{
-          padding-left: 40px;
-          flex-basis: 100%;
-          &.hide-children{display: none;}
-          pages-menu-item {
-
-            a{
-              font-weight: 400;
-              
-            }
+          position: absolute;
+          height: 68px;
+          width: 100vw;
+          background-color: var(--white);
+          left: 0px;
+          top: 104px;
+          flex-direction: row;
+          gap:24px;
+          align-items: top;
+          justify-content: center;
+          pages-menu-item{
             pages-menu{
-              pages-menu-item {
-                a{
-                  color: rgba(255, 255, 255, 0.63);
-                }
-              }
+              display: none;
             }
           }
-
-        }
-  
-  
-      
-        .expand{
-          flex-shrink: 0;
-          flex-basis:24px;
-          height: 24px;
-          display: inline-block; 
-          margin-right: 16px;
-        }
-        .toggle{
-            background: url('~src/assets/images/icons/chevron_cirle_right_24dp.svg') center no-repeat;
-            transition: transform 0.3s;
-        }
-        .open {
-            transform: rotateZ(90deg);
-        }
-    
-        
-        a.current-item span{
-          border-bottom: 2px solid  rgba(255, 255, 255, 0.63);
         }
       }
     }
   }
 }
 
-
-
-@media  screen and (min-width: 1330px){
-  pages-menu {
-    display: none;
-  }
-
-  // level 1
-  .grid-menu>pages-menu {
-    width: 100%;
-    display: flex;
-    align-items: stretch;
-    overflow: hidden;    
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin: 0;
-    
-    >pages-menu-item {
-      animation: slide-from-top-and-fade-in 0.2s;            
-      padding: 0 20px;
-      margin: 0 -4px;      
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      align-items: center;      
-  
-      a {
-        color:  var(--prime);
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 32px;
-        &.parent-item{
-          >span{
-            display: inline-block;
-            border-bottom: 2px solid var(--prime);
-          }
-        }
-      }
-
-      // level 2
-
-      &.depth{
-        >a::after{
-          content:"";
-          display: inline-block;
-          width: 24px;
-          height: 24px;
-          background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
-          transform: rotateZ(90deg);
-          transition: transform 0.3s;
-          vertical-align: -6px;
-          margin-left: 4px;
-        }
-        &.opened{
-          >a::after{
-            transform: rotateZ(-90deg);
-          }          
-          >pages-menu {
-            position:absolute ;
-            height: 68px;
-            background-color: #FFF;
-            top:104px;
-            left: 0;
-            width: 100%;
-            display: flex;
-            align-items: flex-start;
-            justify-content: center;
-            overflow: hidden;    
-            flex-grow: 0;
-            flex-shrink: 0;
-            >pages-menu-item{
-              animation: slide-from-top-and-fade-in 0.2s;            
-              padding: 0 20px;
-              margin: 0 -4px;      
-              display: flex;
-              flex-direction: row;
-              flex-wrap: nowrap;
-              align-items: center;      
-            }
-          }
-        }
-      }
-
-
-    }
-  }
-
-  .sub-menu{
-    a{
-      display: block;
-      padding: 10px 20px;
-    }   
-
-    >pages-menu{
-      display: block;
-      padding: 20px;
-      border-radius: 8px;
-      background: #FFF;
-      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
-
-
-      >pages-menu-item{
-
-
-
-        >a.active>span{
-          color: var(--prime)
-        }
-
-        a{
-          span{
-          color: var(--second);
-          font-family: PT Sans Narrow;
-          font-size: 24px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 32px; /* 133.333% */
-          letter-spacing: 0.24px;
-          }
-        }
-
-        :hover{
-          color:var(--prime-hov)
-        }
-        .current-item{
-          color:var(--prime)
-        }
-
-        >pages-menu.parent-item{ //second level
-          display: block;
-          >pages-menu-item{
-            >a{
-              
-              >span{
-                font-size: 20px;
-                font-family: PT Sans;
-                font-style: normal;
-                font-weight: 400;
-                line-height: 24px;
-              }
-            }
-            >a.active{
-              background-color: #EDEDED;
-              border-radius: 8px;
-              span{
-                color:var(--second-act)
-              }
-            }
-          }
-        }
-      }
-    }
-
-  
-  }
-}
\ No newline at end of file
diff --git a/src/assets/images/ico/burger_blue_40dp.svg b/src/assets/images/ico/burger_blue_40dp.svg
new file mode 100644
index 0000000..0f58fbc
--- /dev/null
+++ b/src/assets/images/ico/burger_blue_40dp.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
+<rect x="6" y="10" width="28" height="4" fill="#0070BA"/>
+<rect x="6" y="18" width="28" height="4" fill="#0070BA"/>
+<rect x="6" y="26" width="28" height="4" fill="#0070BA"/>
+</svg>