diff --git a/src/app/_modules/administration/page/administration-page.component.html b/src/app/_modules/administration/page/administration-page.component.html
index 5b7fe4b..15d3c31 100644
--- a/src/app/_modules/administration/page/administration-page.component.html
+++ b/src/app/_modules/administration/page/administration-page.component.html
@@ -1,15 +1,16 @@
-<div class="limiter">
-  <div class="line">
-    <h1>Панель управления</h1>
+<div class="administration-page">
+  <div>
+    <h2>Панель управления</h2>
   </div>
 
   <!-- <div class="tabs default">
     <button type="button" *ngFor="let tab of tabs" [class.active]="tab.active" routerLink="/administrate/{{tab.name}}">{{tab.title}}</button>
   </div> -->
-  <div class="limiter" [ngSwitch]="tab.name">
+  <div [ngSwitch]="tab.name">
     <administrate-company *ngSwitchCase="'company'" [companyId]="'main'"></administrate-company>
     <administrate-committee *ngSwitchCase="'committee'"></administrate-committee>
     <administrate-site-pages *ngSwitchCase="'site-pages'"></administrate-site-pages>
     <p *ngSwitchDefault>Страница не найдена</p>
   </div>
 </div>
+  
\ No newline at end of file
diff --git a/src/app/_modules/administration/page/administration-page.component.scss b/src/app/_modules/administration/page/administration-page.component.scss
index 7195ade..8b13789 100644
--- a/src/app/_modules/administration/page/administration-page.component.scss
+++ b/src/app/_modules/administration/page/administration-page.component.scss
@@ -1,22 +1 @@
-.line{
-  display: inline-block;
-  border-bottom: 12px solid var(--blue-0);
-  margin-top: 24px;
-  margin-bottom: 40px;
-  h1{
-    display: inline;
-    padding-right: 40px;
-    vertical-align: 2px;
-    font-family: PT Sans Narrow;
-    font-size: 76px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 60px; /* 100% */
-    letter-spacing: 0.76px;
-    color: var(--second-act);
-  }
-}
-:host{
-  font-size: 20px;
-}
 
diff --git a/src/app/_modules/administration/site-pages/administrate-site-pages.component.html b/src/app/_modules/administration/site-pages/administrate-site-pages.component.html
index ac13a87..194e958 100644
--- a/src/app/_modules/administration/site-pages/administrate-site-pages.component.html
+++ b/src/app/_modules/administration/site-pages/administrate-site-pages.component.html
@@ -1,3 +1,8 @@
-<button (click)="addLocale()">Добавить языковую версию</button>
-<span (click)="toggle()"><switch [val]="showDeleted"></switch> Показать удаленные</span>
+<div class="site-admin-control">
+    <button (click)="addLocale()" class="outline">Добавить языковую версию</button>
+    <span class="site-admin-control-toggle" (click)="toggle()">
+        Показать удаленные
+        <switch [val]="showDeleted"></switch>        
+    </span>
+</div>
 <pages-tree></pages-tree>
diff --git a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss
index b1af125..e69de29 100644
--- a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss
+++ b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss
@@ -1,171 +0,0 @@
-
-
-.item.home .bar .mid .info .logo::before{
-    background-image: url('~src/assets/images/icons/home_page_24dp.svg');
-  }
-  
-  .item:not(.home){
-      .bar{
-        padding-left: 50px;
-  
-      }
-      .item .bar{
-        padding-left: 100px;
-      }
-      .item .item .bar{
-        padding-left: 150px;
-      }
-      .item .item .item .bar{
-        padding-left: 200px;
-      }
-  
-      .item .item .item .item .bar{
-        padding-left: 250px;
-      }
-   }
-  
-  
-  
-  .item {
-    .bar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: 16px 0;
-      border-bottom: #E0E0E0 solid 1px;
-      .left {
-        flex-shrink: 0;
-        width: 40px;
-        height: 24px;
-        cursor: pointer;
-        .toggle {
-          border:none;
-          width: 100%;
-          height: 100%;
-          background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat;
-          transform: rotate(90deg);
-          transition: transform .3s;
-        }
-      }
-      .mid {
-        flex-grow: 1;
-        padding: 0 16px;
-        .info {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          .logo {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            margin-right: 16px;
-            border-radius: 100px;
-            background-color: var(--prime);
-            color: #ffffff;
-            span{
-              display: none;
-  
-            }
-            &::before {
-              content: "";
-              display: block;
-              background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat;
-              width: 24px;
-              height: 24px;
-            }
-  
-            img {
-              width: 100%;
-              height: 100%;
-              border-radius: 100px;
-              object-fit: cover;
-              background-color: #ffffff;
-            }
-          }
-          .name {
-            p {
-              margin: 0;
-              a {
-                color: var(--grey-7);
-              }
-              &.sub {
-                font-size: 0.875rem;
-                color: #7f7f7f;
-              }
-            }
-          }
-        }
-      }
-      .right {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-shrink: 1;
-        button {
-          margin-left: 24px;
-          &.edit {
-            background-image: url('~src/assets/images/icons/edit_24dp.svg');
-          }
-          &.add {
-            background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
-          }
-          &.delete {
-            background-image: url('~src/assets/images/icons/close_24dp.svg');
-          }
-          &.move {
-            background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
-            cursor: move;
-          }
-        }
-      }
-      .right-home {
-        width: 144px;
-      }
-    }
-    .items {
-      display: none;
-  
-    }
-    &.active {
-      >.bar {
-        .left {
-          .toggle {
-            transform: rotate(180deg);
-          }
-        }
-      }
-      >.items {
-        display: block;
-      }
-    }
-  }
-  
-  
-  @media screen and (max-width: 1330px) {
-    .item {
-      .bar {
-        .mid {
-          padding: 0 12px;
-          .info .logo {
-            display: none;
-          }
-        }
-        .right {
-          display: none;
-        }
-      }
-      .items {
-        padding-left: 16px;
-      }
-      &.company {
-        .items {
-          padding-left: 40px;
-        }
-      }
-    }
-  }
-  
\ No newline at end of file
diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts
index 2b713e1..700de46 100644
--- a/src/app/_modules/layout/header/header.component.ts
+++ b/src/app/_modules/layout/header/header.component.ts
@@ -14,6 +14,11 @@ export class HeaderComponent {
     public pagesService: PagesService
     ) {
   }
+  // ngOnInit(){
+  //   this.pagesService.root().subscribe(
+  //     resp=> this.pagesService.rootPages = resp
+  //   )
+  // }
 
   get rootPage() {
     return this.pagesService.rootPage;
@@ -22,5 +27,4 @@ export class HeaderComponent {
   openMobileMenu(){
     this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
   }
-
-}
+}
\ No newline at end of file
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 f933e4a..e31ee79 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
@@ -58,6 +58,7 @@ export class HeaderUserBarComponent {
   }
 
   link(link: string) {
+    this.pagesService.currentPageSubject.next(null);
     this.close()
     this.router.navigate([link]).then();
   }
diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.html b/src/app/_modules/layout/jumbotron/jumbotron.component.html
index 9972ebf..3b5bf6e 100644
--- a/src/app/_modules/layout/jumbotron/jumbotron.component.html
+++ b/src/app/_modules/layout/jumbotron/jumbotron.component.html
@@ -1,7 +1,7 @@
-<div class="jumbotron-bg space" [ngStyle]="back">
+<div class="jumbotron-bg space" [ngStyle]="bgStyle">
     <div class="jumbotron-content layout-corral">
         <header-user-bar></header-user-bar>
-        <h1>{{name}}</h1>
+        <h1  [ngStyle]="h1Style">{{name}}</h1>
         <div></div>
     </div>
 </div>
diff --git a/src/app/_modules/layout/jumbotron/jumbotron.component.ts b/src/app/_modules/layout/jumbotron/jumbotron.component.ts
index 8c3b083..2ad5e97 100644
--- a/src/app/_modules/layout/jumbotron/jumbotron.component.ts
+++ b/src/app/_modules/layout/jumbotron/jumbotron.component.ts
@@ -20,9 +20,22 @@ export class JumbotronComponent {
     return this.currentPage?.h1 || this.currentPage?.name
   }
 
-  get back(){
-    let pictURL = this.currentPage?.picture?.data.links.open;
-    return {'background-image' : `url(${pictURL})`||'none'}
+  get bgStyle(){
+    let height = 50;
+    let pictURL:string;
+    if (this.currentPage){
+      height = 150;
+      pictURL = this.currentPage?.picture?.data.links.open;
+    }
+    
+    return {
+      'background-image' : `url(${pictURL})`||'none',
+      'height': (pictURL?400:height) + 'px'
+    }
+  }
+
+  get h1Style(){
+    return { color: this.currentPage?.picture?'var(--white)':'var(--second-act)'}
   }
 
   get editable(){
diff --git a/src/app/_modules/layout/left-content/left-content.component.html b/src/app/_modules/layout/left-content/left-content.component.html
index 30b99f9..54e286d 100644
--- a/src/app/_modules/layout/left-content/left-content.component.html
+++ b/src/app/_modules/layout/left-content/left-content.component.html
@@ -1 +1 @@
-<pages-menu class="lvl-0"></pages-menu>
\ No newline at end of file
+<!-- <pages-menu class="lvl-0"></pages-menu> -->
\ No newline at end of file
diff --git a/src/app/_modules/layout/left-content/left-content.component.ts b/src/app/_modules/layout/left-content/left-content.component.ts
index 54b7b27..d338c95 100644
--- a/src/app/_modules/layout/left-content/left-content.component.ts
+++ b/src/app/_modules/layout/left-content/left-content.component.ts
@@ -1,6 +1,4 @@
 import {Component} from '@angular/core';
-import {Router} from "@angular/router";
-import {PagesService} from "@app/_services/pages.service";
 
 @Component({
   selector: 'left-content',
@@ -9,20 +7,6 @@ import {PagesService} from "@app/_services/pages.service";
 })
 export class LeftContentComponent {
 
-  constructor(
-    private router: Router,
-    public pagesService: PagesService
-    ) {
-  }
-
-  get rootPage() {
-    return this.pagesService.rootPage;
-  }
-
-  openMobileMenu(){
-    this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
-  }
-
 }
 
 
diff --git a/src/app/_modules/layout/right-content/right-content.component.html b/src/app/_modules/layout/right-content/right-content.component.html
index 2ea0efe..2e81f78 100644
--- a/src/app/_modules/layout/right-content/right-content.component.html
+++ b/src/app/_modules/layout/right-content/right-content.component.html
@@ -1 +1 @@
-<pages-menu></pages-menu>
+<pages-menu *ngIf="show"></pages-menu>
diff --git a/src/app/_modules/layout/right-content/right-content.component.ts b/src/app/_modules/layout/right-content/right-content.component.ts
index 2cfc12b..e594d33 100644
--- a/src/app/_modules/layout/right-content/right-content.component.ts
+++ b/src/app/_modules/layout/right-content/right-content.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { PagesService } from '@app/_services/pages.service';
 
 @Component({
   selector: 'right-content',
@@ -6,5 +7,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./right-content.component.scss']
 })
 export class RightContentComponent {
-
+  constructor(
+    private pagesService:PagesService
+  ){}
+  get show(){
+    return !!this.pagesService.currentPage
+  }
+  
 }
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 f980d17..aa9c02f 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
@@ -28,7 +28,7 @@ export class PagesMenuItemComponent {
   }
 
   get current(){
-    return this.item.link == this.pagesService.currentPage.link
+    return this.item.link == this.pagesService.currentPage?.link
   }
 
   get selected(){
@@ -36,7 +36,7 @@ export class PagesMenuItemComponent {
   }
 
   get parent(){
-    return !this.current && this.pagesService.currentPage.link.startsWith(this.item.link)
+    return !this.current && this.pagesService.currentPage?.link.startsWith(this.item.link)
   }
 
   get nav(){
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index f96d1cd..d8df33b 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -24,10 +24,10 @@ export class PagesMenuComponent implements OnInit {
 
       this.subscription = combineLatest([
         this.pagesService.currentPageSubject,
-        this.pagesService.rootPageSubject
+        this.pagesService.rootPagesSubject
       ]).subscribe(
         resp=>{    
-          let [currentPage, rootPage] = resp     
+          let [currentPage, rootPages] = resp     
           if(currentPage){
             let menuTree = currentPage.parents.data.reduceRight(
               (menuTree,item)=>{
@@ -39,7 +39,7 @@ export class PagesMenuComponent implements OnInit {
               }, currentPage);
             this.items = menuTree.children.data;
           }else{
-            this.items = rootPage?.data[0].children.data
+            this.items = rootPages?.data[0].children.data
           }
         }     
       )
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
index 66082c8..ba5f5c3 100644
--- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html
+++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html
@@ -1,7 +1,7 @@
 <slider [width]="'320px'" side="left">
 
     <div body>
-        <pages-menu *ngIf="rootPage" [root]="rootPage" class="top-menu"></pages-menu>
+        <pages-menu *ngIf="rootPages" [root]="rootPages" class="top-menu"></pages-menu>
         <div class="btn-menu">
             <div>
                 <a>!!!</a>
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
index 01b3c31..f2592bf 100644
--- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts
+++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts
@@ -15,8 +15,8 @@ export class SliderMenuComponent {
     ) {
   }
 
-  get rootPage() {
-    return this.pagesService.rootPage;
+  get rootPages() {
+    return this.pagesService.rootPages;
   }
 
 }
diff --git a/src/app/_modules/pages/sections/add/add-section.component.scss b/src/app/_modules/pages/sections/add/add-section.component.scss
index 4cc3aa6..e69de29 100644
--- a/src/app/_modules/pages/sections/add/add-section.component.scss
+++ b/src/app/_modules/pages/sections/add/add-section.component.scss
@@ -1,17 +0,0 @@
-.add{
-  position: relative;
-.toggle{
-  position:inherit;
-  display: flex;
-  gap:8px;
-  align-items: center;
-  drop-down{
-    margin-top: 4px;
-  }
-  &.active{
-    a{
-      color: var(--prime-act);
-    }
-  }
-}
-}
\ No newline at end of file
diff --git a/src/app/_modules/pages/sections/menu/page-menu.component.html b/src/app/_modules/pages/sections/menu/page-menu.component.html
index e25d580..322320b 100644
--- a/src/app/_modules/pages/sections/menu/page-menu.component.html
+++ b/src/app/_modules/pages/sections/menu/page-menu.component.html
@@ -1,8 +1,8 @@
 <div class="menu" *ngIf="editMode">
   <div class="block">
-    <button type="button" class="up" *ngIf="!isFirst" (click)="move(ord - 1)"></button>
-    <button type="button" class="down" *ngIf="!isLast" (click)="move(ord + 1)"></button>
-    <button type="button" class="edit" (click)="edit()"></button>
-    <button type="button" class="delete" (click)="delete()"></button>
+    <a><ico ico="arrow_upward_24"  (click)="move(ord - 1)"></ico></a>
+    <a><ico ico="arrow_downward_24"  (click)="move(ord + 1)"></ico></a>
+    <a><ico ico="edit_24"  (click)="edit()"></ico></a>
+    <a><ico ico="delete_24"  (click)="delete()"></ico></a>
   </div>
 </div>
diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss
index fb9d97b..e69de29 100644
--- a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss
@@ -1,11 +0,0 @@
-.items {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  gap: 24px;
-  flex-wrap: wrap;
-
-  cards-section-item {
-    width: 240px
-  }
-}
diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss
index 23b2875..8b13789 100644
--- a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss
@@ -1,5 +1 @@
-.card {
-  height: 100%;
-  padding: 12px;
-  border: #dedede solid 1px;
-}
+
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
index 14d628e..c1903cf 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
@@ -71,7 +71,7 @@
 }
 
 .carousel {
-
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content:center;
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
index 30bbb32..cb07c34 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
@@ -47,7 +47,6 @@ export class ImagesSectionComponent {
     return type.name;
   }
   get imageClass(){
-    console.log(this.imageType)
     return {
       small : this.imageType=='tiles',
       large : this.imageType=='full-width',
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.html b/src/app/_modules/pages/tree/item/pages-tree-item.component.html
index 8f9ebbd..98f4a45 100644
--- a/src/app/_modules/pages/tree/item/pages-tree-item.component.html
+++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.html
@@ -1,26 +1,35 @@
-<div class="item" [class.active]="active" [class.deleted]="isDeleted" [class.hidden]="isHidden" [class.home]="!parent" (click)="touched = true">
+<div class="item" [class.deleted]="isDeleted" [class.hidden]="isHidden" [class.home]="!parent" (click)="touched = true">
   <div class="bar">
     <div class="left">
-      <button *ngIf="hasChildren" type="button" class="toggle" (click)="toggle()"></button>
+      <drop-down ico="chevron_right_24" [angle]="[0,90]" *ngIf="hasChildren"  (toggle)="active=$event"></drop-down>
     </div>
     <div class="mid">
       <div class="info">
-        <div class="logo"></div>
+        <div class="logo">
+          <ico ico="web_page_24" color="#FFF"></ico>
+        </div>
         <div class="name"><p><a [routerLink]="page.link" target="_blank">{{page.name}}</a></p></div>
       </div>
     </div>
     <div class="right">
-      <div class="menu">
-        <!--div class="move" title="Переместить"></div-->
-        <button type="button" *ngIf="parent && !isDeleted" class="clear clone" title="Копировать" (click)="clone()">C</button>
-        <button type="button" *ngIf="!isDeleted" class="clear add-child" title="Добавить страницу" (click)="add()"></button>
-        <button type="button" *ngIf="!isDeleted" class="clear edit" title="Редактировать" (click)="edit()" [class.orphan]="!parent"></button>
-        <button type="button" *ngIf="isDeleted" class="clear restore" title="Восстановить" (click)="restore()">R</button>
-        <button type="button" *ngIf="page.slug" class="clear close-blue" title="{{isDeleted ? 'Удалить безвозвратно' : 'Удалить'}}" (click)="delete()"></button>
-      </div>
+      <a *ngIf="parent && !isDeleted" class="clear clone" title="Копировать" (click)="clone()">
+        <ico ico="add_circle_24"></ico>
+      </a>
+      <a  *ngIf="!isDeleted" class="clear add-child" title="Добавить страницу" (click)="add()">
+        <ico ico="add_web_page_24"></ico>
+      </a>
+      <a *ngIf="!isDeleted" class="clear edit" title="Редактировать" (click)="edit()">
+        <ico ico="edit_24"></ico>
+      </a>
+      <a *ngIf="isDeleted" class="clear restore" title="Восстановить" (click)="restore()">
+        <ico ico="visibility_on_24"></ico>
+      </a>
+      <a *ngIf="page.slug" class="clear close-blue" title="{{isDeleted ? 'Удалить безвозвратно' : 'Удалить'}}" (click)="delete()">
+        <ico ico="delete_24"></ico>
+      </a>
     </div>
   </div>
-  <div class="items">
-    <pages-tree *ngIf="active" [parent]="page"></pages-tree>
+  <div class="items" *ngIf="active">
+    <pages-tree  [parent]="page"></pages-tree>
   </div>
 </div>
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
index 0044012..eb7fd39 100644
--- a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
+++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
@@ -15,7 +15,10 @@ export class PagesTreeItemComponent {
   public touched = false;
   public subscription: Subscription;
 
-  constructor(public pagesService: PagesService, private formsService: FormsService, private listsService: ListsService) {
+  constructor(
+    public pagesService: PagesService, 
+    private formsService: FormsService, 
+    private listsService: ListsService) {
   }
 
   ngOnInit() {
diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss
index ec08638..e69de29 100644
--- a/src/app/_modules/pages/tree/pages-tree.component.scss
+++ b/src/app/_modules/pages/tree/pages-tree.component.scss
@@ -1,181 +0,0 @@
-
-.item:not(.home){
-    .bar{
-      padding-left: 50px;
-
-    }
-    .item .bar{
-      padding-left: 100px;
-    }
-    .item .item .bar{
-      padding-left: 150px;
-    }
-    .item .item .item .bar{
-      padding-left: 200px;
-    }
-
-    .item .item .item .item .bar{
-      padding-left: 250px;
-    }
- }
-
-
-
-.item {
-  flex-direction: column;
-  align-items: stretch;
-  .bar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 16px 0;
-    border-bottom: #E0E0E0 solid 1px;
-    .left {
-      flex-shrink: 0;
-      width: 40px;
-      height: 24px;
-      cursor: pointer;
-      .toggle {
-        border:none;
-        width: 100%;
-        height: 100%;
-        background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat;
-        transform: rotate(90deg);
-        transition: transform .3s;
-      }
-    }
-    .mid {
-      flex-grow: 1;
-      padding: 0 16px;
-      .info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .logo {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          flex-shrink: 0;
-          width: 40px;
-          height: 40px;
-          margin-right: 16px;
-          border-radius: 100px;
-          background-color: var(--prime);
-          color: #ffffff;
-          cursor: move;
-          span{
-            display: none;
-
-          }
-          &::before {
-            content: "";
-            display: block;
-            background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat;
-            width: 24px;
-            height: 24px;
-          }
-          &.orphan::before{
-            background-image: url('~src/assets/images/icons/home_page_24dp.svg');
-          }
-          img {
-            width: 100%;
-            height: 100%;
-            border-radius: 100px;
-            object-fit: cover;
-            background-color: #ffffff;
-          }
-        }
-        .name {
-          p {
-            margin: 0;
-            a {
-              color: var(--grey-7);
-            }
-            &.sub {
-              font-size: 0.875rem;
-              color: #7f7f7f;
-            }
-          }
-        }
-      }
-    }
-    .right {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex-shrink: 1;
-      button {
-        margin-left: 24px;
-        &.edit {
-          background-image: url('~src/assets/images/icons/edit_24dp.svg');
-        }
-        &.add {
-          background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
-        }
-        &.delete {
-          background-image: url('~src/assets/images/icons/close_24dp.svg');
-        }
-        &.move {
-          background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
-          cursor: move;
-        }
-        &.clone {
-          width: 24px;
-          background-color: #dedede;
-        }
-        &.restore {
-          width: 24px;
-          background-color: #dedede;
-        }
-      }
-      .orphan{
-        margin-right: 48px;
-      }
-    }
-    .right-home {
-      width: 144px;
-    }
-  }
-  .items {
-    display: none;
-
-  }
-  &.active {
-    >.bar {
-      .left {
-        .toggle {
-          transform: rotate(180deg);
-        }
-      }
-    }
-    >.items {
-      display: block;
-    }
-  }
-}
-
-
-@media screen and (max-width: 1330px) {
-  .item {
-    .bar {
-      .mid {
-        padding: 0 12px;
-        .info .logo {
-          display: none;
-        }
-      }
-      .right {
-        display: none;
-      }
-    }
-    .items {
-      padding-left: 16px;
-    }
-    &.company {
-      .items {
-        padding-left: 40px;
-      }
-    }
-  }
-}
diff --git a/src/app/_modules/widjet/locale/locale.component.ts b/src/app/_modules/widjet/locale/locale.component.ts
index 3057c8c..34f8952 100644
--- a/src/app/_modules/widjet/locale/locale.component.ts
+++ b/src/app/_modules/widjet/locale/locale.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import {PagesService} from "@app/_services/pages.service";
 import { environment } from '@environments/environment';
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'locale',
@@ -11,19 +12,33 @@ export class LocaleComponent {
 
   public locales = <any>[];
   public ddMenu:boolean;
+  private rootSubscription: Subscription
 
   constructor(
     public pagesService: PagesService
   ){}
 
   ngOnInit() {
-    this.pagesService.root().subscribe(res => {
-      this.locales = res.data;
-    });
+    this.pagesService.rootPagesSubject.subscribe(
+      
+      res=>{
+        console.log(res)
+        this.locales = res?.data
+      }
+    )
   }
 
-  get rootPage() {
-    return this.pagesService.rootPage;
+  ngOnDestroy() {
+    this.rootSubscription.unsubscribe()
+  }
+
+  
+  get rootPage(){
+    return this.pagesService.rootPage
+  }
+
+  get rootPages() {
+    return this.pagesService.rootPages;
   }
 
   flag(localeName:string){
diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts
index 9a6293e..83fa4ca 100644
--- a/src/app/_services/pages.service.ts
+++ b/src/app/_services/pages.service.ts
@@ -7,14 +7,18 @@ import {Observable, BehaviorSubject} from "rxjs";
 @Injectable({providedIn: 'root'})
 export class PagesService {
   public currentPageSubject = new BehaviorSubject<any>(null);
-  public rootPageSubject = new BehaviorSubject<any>(null);
+  public rootPagesSubject = new BehaviorSubject<any>(null);
   public metaSubject = new BehaviorSubject<any>({title: '', description: '', keywords: ''});
   public editModeSubject = new BehaviorSubject<boolean>(false);
   public showDeletedSubject = new BehaviorSubject<boolean>(false);
   public menuSelectedLink: string;
 
   constructor(private http: HttpClient) {
-    //this.find('/').subscribe(res => {this.rootPage = res.data});
+    //this.find('/').subscribe(res => {this.rootPages = res.data});
+  }
+  rootPage={
+    link:'',
+    slug:environment.defaultLocale
   }
 
   get currentPage() {
@@ -25,11 +29,11 @@ export class PagesService {
     this.rootPage = val?.parents?.data[0] || val;
     this.setMetaFromPage(val);
   }
-  get rootPage() {
-    return this.rootPageSubject.value;
+  get rootPages() {
+    return this.rootPagesSubject.value;
   }
-  set rootPage(val: any) {
-    this.rootPageSubject.next(val);
+  set rootPages(val: any) {
+    this.rootPagesSubject.next(val);
   }
 
   get editMode() {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7908d3d..833981b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -10,6 +10,7 @@ import {Subscription} from "rxjs";
   styleUrls: ['app.component.scss']})
 export class AppComponent {
   public subscription: Subscription;
+  private rootSubscription: Subscription
 
   constructor(private authService: AuthenticationService, private pagesService: PagesService, private titleService: Title, private metaService: Meta) {
     authService.checkUser();
@@ -18,8 +19,16 @@ export class AppComponent {
     });
   }
 
+  ngOnInit() {
+    this.rootSubscription = this.pagesService.root({include:'children'}).subscribe(res => {
+      this.pagesService.rootPages = res
+    });
+  }
+
+
   ngOnDestroy() {
     this.subscription?.unsubscribe();
+    this.rootSubscription.unsubscribe()
   }
 
   applyMetaData(data: any) {
diff --git a/src/assets/css/_admin.scss b/src/assets/css/_admin.scss
new file mode 100644
index 0000000..9aa4031
--- /dev/null
+++ b/src/assets/css/_admin.scss
@@ -0,0 +1,148 @@
+.administration-page{
+    font-size: 20px;
+    h2{
+        color: var(--second-act);
+        margin-bottom: 48px;
+    }
+
+}
+
+
+.site-admin-control{
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    .site-admin-control-toggle{
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+}
+administrate-site-pages>pages-tree{
+    display: block;
+    margin-bottom: 128px;
+}
+  
+
+pages-tree{
+    
+.item:not(.home){
+    .bar{
+      padding-left: 50px;
+
+    }
+    .item .bar{
+      padding-left: 100px;
+    }
+    .item .item .bar{
+      padding-left: 150px;
+    }
+    .item .item .item .bar{
+      padding-left: 200px;
+    }
+
+    .item .item .item .item .bar{
+      padding-left: 250px;
+    }
+
+    .item .item .item .item .item .bar{
+      padding-left: 300px;
+    }
+ }
+
+
+
+.item {
+  flex-direction: column;
+  align-items: stretch;
+  .bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: #E0E0E0 solid 1px;
+    .left {
+      flex-shrink: 0;
+      width: 40px;
+      height: 24px;
+      cursor: pointer;
+
+    }
+    .mid {
+      flex-grow: 1;
+      padding: 0 16px;
+      .info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .logo {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          margin-right: 16px;
+          border-radius: 100px;
+          background-color: var(--prime);
+          color: #ffffff;
+          cursor: move;
+          &:hover{
+            background-color: var(--prime-act);
+          }
+          span{
+            display: none;
+          }
+        }
+        .name {
+          p {
+            margin: 0;
+            a {
+              color: var(--grey-7);
+            }
+            &.sub {
+              font-size: 0.875rem;
+              color: #7f7f7f;
+            }
+          }
+        }
+      }
+    }
+    .right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-shrink: 1;
+      gap: 8px;
+    }
+  }
+}
+
+
+@media screen and (max-width: 1330px) {
+  .item {
+    .bar {
+      .mid {
+        padding: 0 12px;
+        .info .logo {
+          display: none;
+        }
+      }
+      .right {
+        display: none;
+      }
+    }
+    .items {
+      padding-left: 16px;
+    }
+    &.company {
+      .items {
+        padding-left: 40px;
+      }
+    }
+  }
+}
+
+}
\ No newline at end of file
diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss
index 8ff1b26..f16489e 100644
--- a/src/assets/css/_basics.scss
+++ b/src/assets/css/_basics.scss
@@ -19,7 +19,7 @@
 // }
 
 .toggle-hide{
-  visibility: collapse;
+  display: none;
 }
 
 .inline{
@@ -43,49 +43,17 @@ $pxxs:4px;
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.menu, .page-header {
+.menu {
   display: flex;
   .block {
     background: #fff;
     border: 1px solid var(--second-dis);
-    border-radius: 12px;
-    padding: 12px 24px;
+    border-radius: $pxs;
+    padding: $pxs $ps;
     display: flex;
-    margin-bottom: 16px;
-    column-gap: 20px;
-    button {
-      background-position: center;
-      background-repeat: no-repeat;
-      padding: 0;
-      background-color: #ffffff;
-      border: none;
-      border-radius: 0;
-      &.up, &.down, &.edit, &.publish, &.unpublish, &.delete {
-        width: 24px;
-        height: 24px;
-      }
-      &.up {background-image: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
-      &.down {background-image: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
-      &.edit {background-image: url("~src/assets/images/icons/edit_24dp.svg");}
-      &.publish {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");}
-      &.unpublish {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");}
-      &.delete {background-image: url("~src/assets/images/icons/trash_24dp.svg");}
-    }
+    margin-bottom: $ps;
+    margin-top: $ps;
+    column-gap: $ps;
   }
 }
 
diff --git a/src/assets/css/_grid.scss b/src/assets/css/_grid.scss
index f603cc5..715b524 100644
--- a/src/assets/css/_grid.scss
+++ b/src/assets/css/_grid.scss
@@ -58,12 +58,16 @@ jumbotron{
 
 
 left-content{
+  flex-basis: 180px;
+  flex-shrink: 0;
   pages-menu:not(.lvl-0,.open){
     display: none;
   }
 }
 
 right-content{
+  flex-basis: 180px;
+  flex-shrink: 0;
   .item{display: none;}
   pages-menu.current{
     pages-menu-item>.item{
@@ -169,24 +173,25 @@ footer{
 pages-menu-item{
   display: flex;
   flex-direction: column;
-
-}
-
-.item{
-  display: flex;
-  align-items: flex-start;
-  drop-down{
-      margin-left: -24px;
-  }
-  min-height: 24px;
-  >a{
-    margin-top: 4px;
-    &.active {
-      color: #000000;
+  .item{
+    display: flex;
+    align-items: flex-start;
+    drop-down{
+        margin-left: -24px;
+    }
+    min-height: 24px;
+    >a{
+      margin-top: 4px;
+      &.active {
+        color: #000000;
+      }
     }
   }
+
 }
 
+
+
 .pages{
   width: 100%;
 }
\ No newline at end of file
diff --git a/src/assets/css/_pages-section.scss b/src/assets/css/_pages-section.scss
new file mode 100644
index 0000000..d54b882
--- /dev/null
+++ b/src/assets/css/_pages-section.scss
@@ -0,0 +1,45 @@
+add-section{
+    .add{
+        position: relative;
+      .toggle{
+        position:inherit;
+        display: flex;
+        gap:8px;
+        align-items: center;
+        padding-bottom: 8px;
+        drop-down{
+          margin-top: 4px;
+        }
+        
+        &.active{
+          a{
+            color: var(--prime-act);
+          }
+        }
+      }
+      .dropdown{
+        left:48px;
+        top:32px;
+      }
+    }
+}
+
+
+cards-section-items{
+    .items {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        gap: 24px;
+        flex-wrap: wrap;
+      
+        cards-section-item {
+          width: 240px;
+          .card {
+            height: 100%;
+            padding: 12px;
+            border: #dedede solid 1px;
+          }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/images/ico/add_web_page_24.svg b/src/assets/images/ico/add_web_page_24.svg
new file mode 100644
index 0000000..24ab34f
--- /dev/null
+++ b/src/assets/images/ico/add_web_page_24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM8 12V14H11V17H13V14H16V12H13V9H11V12H8Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/images/ico/arrow_drop_down_24-1.svg b/src/assets/images/ico/drop_down_24.svg
similarity index 100%
rename from src/assets/images/ico/arrow_drop_down_24-1.svg
rename to src/assets/images/ico/drop_down_24.svg
diff --git a/src/styles.scss b/src/styles.scss
index 19e9526..686d428 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,4 +11,6 @@
 @import 'registry';
 @import 'slider';
 @import 'tables';
-@import 'tabs.scss';
\ No newline at end of file
+@import 'tabs.scss';
+@import 'pages-section';
+@import 'admin';
\ No newline at end of file