diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 0f69b68..33b6b6a 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -234,44 +234,31 @@
 </div>
 <!--(click)="filterToggle= !filterToggle"
      [style.display]="(filterToggle?'none':'inherit')"-->
-<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle">
-  <i class="  uk-text-muted">
-    <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-         viewBox="0 0 20 20"
-         fill="white" width="24px" height="16px">
-      <g>
-        <path d="M0,0h24 M24,24H0" fill="none"/>
-        <path
-            d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
-        <path d="M0,0h24v24H0V0z" fill="none"/>
-      </g>
-    </svg>
-  </i>
+<div *ngIf="stakeholder && !privateStakeholder " href="#style_switcher" uk-toggle="" id="filters_switcher_toggle"
+     class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle" [class.open]="offcanvasOpen">
+  <icon name="filter_alt" ratio="1.5" customClass="uk-text-primary-gradient" visuallyHidden="Filters"></icon>
 </div>
-<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas filters_switcher"
+<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
      uk-offcanvas="flip:true; overlay: true">
-  <div class="uk-offcanvas-bar offcanvas-white">
+  <div class="uk-offcanvas-bar">
     <div class="uk-float-right">
-      <button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
-
+      <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
+        <icon name="close" ratio="1.5"></icon>
+      </button>
     </div>
     <div class="uk-padding">
       <div class="uk-grid uk-flex uk-flex-middle">
-        <h5>Filters</h5>
+        <h4>Filters</h4>
         <a *ngIf="countSelectedFilters() > 1"
            class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a>
       </div>
       <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
         <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
       </div>
-      <div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-small-top"><i
-          class="uk-text-muted uk-text-small"> If your filter
-        selection cannot be
-        applied to a chart, that chart will appear grayed-out.</i></div>
       <div
           *ngIf="!user" class="uk-margin-top uk-alert uk-alert-warning"> Sign in to apply filters
       </div>
-      <ul *ngIf="user" class="uk-list uk-list-divider  uk-margin-medium">
+      <ul *ngIf="user" class="uk-list uk-list-divider  uk-margin-top">
         <li>
           <range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
                         (onFilterChange)="filter()"></range-filter>
@@ -283,7 +270,9 @@
           </li>
         </ng-container>
       </ul>
-
+      <div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-alert uk-alert-primary">
+        If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index 0d8bda7..6d67f98 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -33,6 +33,8 @@ import {properties} from "../../environments/environment";
 import {IndexInfoService} from "../openaireLibrary/utils/indexInfo.service";
 import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
 
+declare var UIkit;
+
 @Component({
   selector: 'monitor',
   templateUrl: 'monitor.component.html',
@@ -77,7 +79,8 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public keyword: FormControl;
   public statsUpdateDate: Date;
   public stickyPageHeader: boolean = false;
-  
+  public offcanvasOpen: boolean = false;
+
   constructor(
     private route: ActivatedRoute,
     private _router: Router,
@@ -217,7 +220,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
         }
       }));
     }));
-    
+
+    UIkit.util.on('#style_switcher', 'beforeshow', () => {
+      this.offcanvasOpen = true;
+    });
+
+    UIkit.util.on('#style_switcher', 'beforehide', () => {
+      this.offcanvasOpen = false;
+    });
   }
   
   private initializeFilters() {
diff --git a/src/assets/monitor-dashboard-custom.css b/src/assets/monitor-dashboard-custom.css
index 22eaf7f..78a5001 100644
--- a/src/assets/monitor-dashboard-custom.css
+++ b/src/assets/monitor-dashboard-custom.css
@@ -83,17 +83,7 @@
 /*}*/
 
 #filters_switcher_toggle {
-  top: 320px !important;
-  position: fixed;
-  height: 36px;
-  background-color: var(--secondary-color);
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  padding: 0 2px;
-  box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
-  box-sizing: border-box;
-  /*z-index: 981;*/
-  right: 0;
+  top: 400px !important;
 }
 
 /*!*Sidebar*!*/