diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4051874..393a0ec 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -128,10 +128,12 @@ const routes: Routes = [
   //   resolve: { envSpecific: EnvironmentSpecificResolver  },
   //   data: {hasAdminMenu: true}
   // },
+  { path: 'theme', loadChildren: './openaireLibrary/utils/theme/theme.module#ThemeModule'},
   {
     path: '',
     loadChildren: './monitor/monitor.module#MonitorModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
+    data: {hasMiniMenu: true, isFrontPage: true}
   },
   {
     path: '**',
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6c1b0de..9978cc8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,7 @@
 <!--disable_transitions -->
-<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar">
-  <div *ngIf="hasHeader" id="header_main" [class.header_full]="!hasSidebar">
+<div class="sidebar_main_swipe " [class.sidebar_main_active]="open && hasSidebar" [class.sidebar_mini]="!open &&
+hasMiniMenu && hasSidebar" [class.stakeholderPage]="isFrontPage">
+   <div *ngIf="hasHeader" id="header_main" [class.header_full]="!hasSidebar">
     <img *ngIf="!open || !hasSidebar"  class="badge small-badge"
          src="assets/theme-assets/prototype_flag.svg"
          alt="BETA">
@@ -29,7 +30,7 @@
 
     </nav>
   </div>
-  <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor Dashboard"
+  <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor"
                      headerDashboard="Administration Panel"
   ></dashboard-sidebar>
   <div *ngIf="hasSidebar" id="hide_controls">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 28a2829..cbec079 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,6 +22,8 @@ export class AppComponent implements OnInit, OnDestroy {
   hasSidebar: boolean = false;
   hasHeader: boolean = false;
   hasAdminMenu: boolean = false;
+  hasMiniMenu:boolean = false;
+  isFrontPage:boolean = false;
   userMenuItems: MenuItem[] = [];
   adminMenuItems: MenuItem[] = [];
   stakeHolder:Stakeholder = null;
@@ -62,6 +64,14 @@ export class AppComponent implements OnInit, OnDestroy {
       this.hasAdminMenu = hasAdminMenu;
       this.cdr.detectChanges();
     }));
+    this.subscriptions.push(this.layoutService.hasMiniMenu.subscribe(hasMiniMenu => {
+      this.hasMiniMenu = hasMiniMenu;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
+      this.isFrontPage = isFrontPage;
+      this.cdr.detectChanges();
+    }));
     this.layoutService.setOpen(false);
     this.propertiesService.loadEnvironment()
       .then(properties => {
@@ -119,7 +129,7 @@ export class AppComponent implements OnInit, OnDestroy {
     }*/
     if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isCommunityCurator(this.user)) {
       this.userMenuItems.push(new MenuItem("", "Manage Stakeholders",
-        "", "/admin", true, [], [], {communityId:'openaire'}))
+        "", "/admin", true, [], [], {}))
 
     }
     if (this.user) {
@@ -127,7 +137,7 @@ export class AppComponent implements OnInit, OnDestroy {
     }
     if (this.adminMenuItems.length == 0) {
       //nstructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {
-      this.adminMenuItems.push(new MenuItem("stakeholders", "Manage Stakeholders", "", "/admin", false, [], [], {}));
+      this.adminMenuItems.push(new MenuItem("stakeholders", "Manage Stakeholders", "", "/admin", false, [], [], {}, "settings"));
       /*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
       adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
       adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 85054df..37a8142 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -1,73 +1,70 @@
-<!--disable_transitions -->
-<div class="double-header stakeholderPage">
-  <div class="">
-    <div id="header_menu" class="uk-width-1-1">
-      <nav class="uk-navbar">
+<div class=" stakeholderPage">
+  <div id="header_main" class=" light_header">
+    <nav class="uk-navbar">
+      <div  *ngIf="stakeholder" class="uk-navbar-left">
+        <a class="uk-logo uk-navbar-item ng-star-inserted uk-link uk-margin-small-top"
+           routerlink="/"
+           routerlinkactive="uk-link">
+          <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
 
-        <div class="uk-navbar-left">
-          <img class="badge"
-               src="assets/theme-assets/prototype_flag.svg"
-               alt="BETA">
-          <a *ngIf="stakeholder"
-             class="uk-logo uk-navbar-item ng-star-inserted uk-link uk-margin-small-top  uk-margin-medium-left"
-             routerlink="/"
-             routerlinkactive="uk-link">
-            <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-responsive-height">
-            <div *ngIf="!stakeholder.logoUrl">
-              {{stakeholder.index_name}}
-            </div>
-          </a>
-          <div class="uk-margin-large-left uk-width-medium ng-star-inserted">
-            <div class="">
-              <!--              <div dashboard-input label="Search for..." [formInput]="keyword"></div>-->
-            </div>
-          </div>
+        </a>
+        <div class="uk-text-capitalize uk-h4" >
+          {{'OpenAIRE Monitor '
+        +(stakeholder.type == 'ri'?'Research Initiative':stakeholder.type)+ ' - ' +
+        stakeholder.index_name}}
         </div>
 
-        <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-right uk-margin-right">
-          <ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
-            <li>
-              <user-mini *ngIf="properties"
-                         [user]="user" [dashboard]="true"
-                         [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
-                         [cookieDomain]=properties.cookieDomain
-                         [userMenuItems]=userMenuItems>
-              </user-mini>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </div>
+      </div>
+      <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-right uk-margin-right">
+        <ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
+          <li>
+            <user-mini *ngIf="properties"
+                       [user]="user" [dashboard]="true"
+                       [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
+                       [cookieDomain]=properties.cookieDomain
+                       [userMenuItems]=userMenuItems >
+            </user-mini>
+          </li>
+        </ul>
+      </div>
+    </nav>
   </div>
-  <div class="sidebar_main_swipe  header_full" [class.sidebar_main_active]="open">
-    <div id="header_main">
-      <nav class="uk-light uk-navbar">
-        <!--<div class="main_logo_top">
-          <div *ngIf="stakeholder && stakeholder.index_name" class=" uk-margin-small-top">
-            <div class="uk-text-bold uk-h4 uk-margin-remove-bottom">{{stakeholder.index_name}}</div>
-            <div class="uk-h5 uk-margin-remove">Monitor Dashboard</div>
-          </div>
-        </div>-->
-        <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-center">
-          <ul class="uk-navbar-nav">
-            <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
-              <li *ngIf="isPublicOrIsMember(topic.isPublic) && topic.isActive"
-                  [ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''">
-                <a (click)="navigateTo(stakeholder.alias, topic.alias)" class="uk-margin-remove-bottom uk-h4"
-                ><span>{{topic.name}}</span></a>
-              </li>
-            </ng-template>
-          </ul>
-        </div>
-      </nav>
-    </div>
     <dashboard-sidebar *ngIf="sideBarItems.length > 0 && stakeholder" [items]="sideBarItems"
-                       [activeItem]="activeCategory?activeCategory.alias:null"
-                       [activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=false
+                       [activeItem]="activeTopic?activeTopic.alias:null"
+                       [activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=true
+                       headerName="Monitor" [showSearch]="true"
     ></dashboard-sidebar>
-<!--    *ngIf="activeSubCategory"-->
     <div id="page_content">
-      <div id="page_content_inner">
+      <div  class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
+      fixed; width: 100%">
+        <nav class=" " >
+          <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
+            <ul *ngIf="activeTopic && activeTopic.categories.length > 1"
+                class="uk-tab uk-padding uk-padding-remove-bottom uk-padding-remove-left uk-margin-remove">
+              <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
+                <li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive"
+                    [ngClass]="(category.alias === activeCategory.alias)?'uk-active':''">
+                  <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
+                     class="uk-margin-remove-bottom uk-h4"
+                  ><span>{{category.name}}</span></a>
+                </li>
+              </ng-template>
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div id="page_content_inner" class="uk-margin-large-top">
+        <div class="uk-margin-top">
+        <ul *ngIf="activeCategory && activeCategory.subCategories.length > 1" class="uk-tab">
+          <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
+            <li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
+                [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
+              <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
+                 class="uk-margin-remove-bottom uk-h3"
+              ><span>{{subCategory.name}}</span></a>
+            </li>
+          </ng-template>
+        </ul>
         <!--      <div>
                 Filters
                 <input class="uk-input uk-form-width-medium" placeholder="Funding Stream" type="text" name="fund_level_0"
@@ -171,8 +168,8 @@
           </div>
         </div>
       </div>
+      </div>
     </div>
-  </div>
   <div *ngIf="stakeholder" id="style_switcher" title="This functionality is comming soon. Stay tuned!">
     <div id="style_switcher_toggle">
     <a *ngIf="isAdmin() " [routerLink]="['/admin', this.stakeholder.alias]" >
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index c7356a5..2ab23a7 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -47,6 +47,7 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
   public activeCategory: Category = null;
   public activeSubCategory: SubCategory = null;
   public sideBarItems: MenuItem[] = [];
+  public topBarItems: MenuItem[] = [];
   public errorCodes: ErrorCodes;
   public stakeholder: Stakeholder;
   public numberResults: Map<string, number> = new Map<string, number>();
@@ -273,16 +274,26 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
   
   private setSideBar() {
     let items: MenuItem[] = [];
+    this.stakeholder.topics.forEach((topic) => {
+      if (this.isPublicOrIsMember(topic.isPublic) && topic.isActive) {
+        let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
+          '/' + this.stakeholder.alias + '/' + topic.alias ),
+          null, [], [], {});
+         topicItem.icon = "donut_large";
+        items.push(topicItem);
+        }
+    });
+    let categoryItems: MenuItem[] = [];
     this.activeTopic.categories.forEach((category, index) => {
       if (this.isPublicOrIsMember(category.isPublic) && category.isActive) {
         let subItems: MenuItem[] = [];
-        category.subCategories.forEach(subCategory => {
+        /*category.subCategories.forEach(subCategory => {
           if (this.isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive) {
             subItems.push(new MenuItem(subCategory.alias, subCategory.name, "", (
               '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias),
               null, null, [], {}));
           }
-        });
+        });*/
         let open = this.activeCategory.alias === category.alias;
         if (MonitorComponent.sidebarStatus && MonitorComponent.sidebarStatus.id === this.activeTopic.alias) {
           open = MonitorComponent.sidebarStatus.status[index];
@@ -293,9 +304,10 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
           null, [], [], {});
         categoryItem.items = subItems;
         categoryItem.open = open;
-        items.push(categoryItem);
+        categoryItems.push(categoryItem);
       }
     });
+    this.topBarItems = categoryItems;
     if (items.length === 0) {
       items.push(new MenuItem('noCategories', 'No categories available yet', "", "", false, [], [], {}));
     }
diff --git a/src/assets/logo-large-monitor.png b/src/assets/logo-large-monitor.png
new file mode 100644
index 0000000..c4565fe
Binary files /dev/null and b/src/assets/logo-large-monitor.png differ
diff --git a/src/assets/logo-small-monitor.png b/src/assets/logo-small-monitor.png
new file mode 100644
index 0000000..b58e78d
Binary files /dev/null and b/src/assets/logo-small-monitor.png differ
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index 9ef5822..99a90dd 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -37,98 +37,51 @@
     transform: rotate(90deg);
 }
 
-.double-header #header_menu a {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
+.stakeholderPage #sidebar_main .sidebar_main_header .logo{
+    margin-top: 15px;
+}
+.stakeholderPage .uk-navbar-container{
+    background-color: white !important;
+    padding-left: 0px;
+
+}
+.stakeholderPage .uk-navbar-center .uk-logo{
+    max-height: 80px;
 }
 
-.dashboard .double-header  #header_main .uk-navbar-nav > li > a {
-    font-size: 16px;
-    font-family: "Open Sans", serif;
-}
-
-.double-header #header_main .uk-navbar-nav > li.uk-active {
-    position: relative;
-    display: inline;
-    transition:  position 0s linear 0.2s;
-}
-
-.double-header #header_main .uk-navbar-nav > li.uk-active a {
+.stakeholderPage .uk-navbar ul li.uk-active a{
+    color:var(--monitor-portal-color);
     font-weight: bold;
 }
-
-.double-header #header_main .uk-navbar-nav > li.uk-active a:before {
-    top: 45px;
-    left: 50%;
-    border-style: solid;
-    content: "";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-color: transparent;
-    border-bottom-color: #ECECEC;
-    border-width: 13px;
-    transform: translateX(-50%);
+.stakeholderPage #header_main{
+    padding-left: 6px;
+}
+#header_main.light_header {
+    background: white !important;
+    color: #000000B3;
+}
+.dashboard #header_main.light_header .login, .dashboard #header_main.light_header .uk-navbar-nav > li > a{
+    color: #000000B3;
+    /*text-transform: uppercase;*/
+}
+.dashboard #header_main.light_header circle, .dashboard #header_main.light_header .login svg * {
+    stroke: #000000B3;
+}
+.stakeholderPage #hide_controls:hover #toggle:hover .material-icons, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
+    color: var(--portal-main-color);
+    border: var(--portal-main-color) solid 1px;
+}
+.stakeholderPage #hide_controls #toggle:hover, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open),.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a .menu_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
+    color: var(--portal-main-color) !important;
 }
 
-
-.double-header #header_main .uk-navbar-nav > li a span {
-    padding-bottom: 4px;
-    text-transform: capitalize;
+.dashboard #header_main .uk-logo img{
+    max-height: calc(var(--header-height) - 30px);
 }
-.double-header #header_main{
-    top: var(--monitor-header-menu-height);
+.stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
+    border-bottom-color: var(--portal-main-color) !important;
 }
-.double-header #header_menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height:var(--monitor-header-menu-height);
-    background:white;
-    z-index: 1215;
-}
-
-.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
-    -webkit-box-shadow: inset 0 -2px 0 #333;
-    box-shadow: inset 0 -2px 0  #333;
-    padding-bottom: 2px;
-
-}
-
-.dashboard .double-header .header_full #sidebar_main {
-    top: calc(var(--header-height) + var(--monitor-header-menu-height));
-}
-
-.dashboard .double-header .header_full #page_content_inner {
-    /*top:  calc(var(--header-height) + var(--monitor-header-menu-height));*/
-    /*position: absolute;*/
-    margin-top: calc(var(--header-height) + 24px);
-}
-
-.double-header .uk-logo img{
-    max-height: calc(var(--header-height) - 20px);
-}
-
 .stakeholderPage #style_switcher {
     top:200px;
 }
 
-
-/* Login Box*/
-.dashboard .double-header .login {
-    color: rgba(0,0,0,.54);
-    font-weight: bold;
-}
-
-.dashboard .double-header circle, .dashboard .double-header .login svg,
-.dashboard .double-header svg svg *, .dashboard .double-header .login svg *  {
-    stroke: rgba(0,0,0,.54);
-    fill: none;
-}
-
-.dashboard .double-header text {
-    stroke: rgba(0,0,0,.54);
-    fill: rgba(0,0,0,.54);
-}
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index 73ad222..cc4ff08 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -49,11 +49,33 @@ html .dashboard {
   height: calc(var(--header-height) - 20px);
 }
 
-.dashboard #sidebar_main .menu_section {
+.dashboard .sidebar_main_active #sidebar_main .menu_section {
   overflow: auto;
   flex: 1;
   margin-bottom: 45px;
 }
+.dashboard .sidebar_mini #sidebar_main .menu_section>ul>li>ul {
+  margin-top: var(--header-height);
+}
+
+.dashboard .sidebar_main_active .submenu_trigger ul {
+  display: block;
+}
+
+
+.dashboard #sidebar_main .sidebar_main_header .portalLogo{
+  background: url("/assets/logo-large-monitor.png") no-repeat;
+  background-size: contain ;
+  margin-left: 35px;
+  margin-top: 5px;
+}
+
+.dashboard .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{
+  background: url("/assets/logo-small-monitor.png") no-repeat !important;
+  background-size: contain !important;
+  margin-left: 5px;
+
+}
 
 .dashboard #hide_controls {
   bottom: 0;
@@ -67,7 +89,7 @@ html .dashboard {
 
 .dashboard .sidebar_main_active #hide_controls {
   background: rgba(255, 255, 255, 1);
-  border-top: 1px solid rgba(0,0,0,.30);
+  /*border-top: 1px solid rgba(0,0,0,.30);*/
   width: 320px;
   transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -218,6 +240,8 @@ body.dashboard {
 .dashboard #header_main .login {
   color: white;
   font-weight: bold;
+  text-transform: uppercase;
+
 }
 
 .dashboard #header_main circle, .dashboard #header_main .login svg {