diff --git a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html
index 3bca916e2..904b111e2 100644
--- a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html
+++ b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html
@@ -1,3 +1 @@
-<div>
-  <app-admin-level></app-admin-level>
-</div>
+<app-admin-level></app-admin-level>
diff --git a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss
index dfa04dc36..ba5f20823 100644
--- a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss
+++ b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss
@@ -1,7 +1,6 @@
-div {
+app-admin-level {
   position: absolute;
   top: -10px;
   left: 45px;
   z-index: 500;
-  max-width: 60%;
 }
diff --git a/interfaces/IBF-dashboard/src/app/components/map/map.component.ts b/interfaces/IBF-dashboard/src/app/components/map/map.component.ts
index 51c484011..d381c12b4 100644
--- a/interfaces/IBF-dashboard/src/app/components/map/map.component.ts
+++ b/interfaces/IBF-dashboard/src/app/components/map/map.component.ts
@@ -330,7 +330,10 @@ export class MapComponent implements AfterViewInit, OnDestroy {
           index === self.findIndex((t) => t.name === value.name),
       ); // deduplicate based on name (for e.g. waterpoints_internal)
 
-    this.legendDiv.innerHTML = this.mapLegendService.getLegendTitle();
+    let detailsString = `<details open><summary><div class="legend-header">${this.mapLegendService.getLegendTitle()}
+    <ion-icon class="icon-down" name="chevron-down-outline"></ion-icon>
+    <ion-icon class="icon-up" name="chevron-up-outline"></ion-icon></div>
+    </summary>`;
     for (const layer of layersToShow.sort(this.sortLayers)) {
       const elements = [];
       switch (layer.type) {
@@ -372,9 +375,12 @@ export class MapComponent implements AfterViewInit, OnDestroy {
       }
 
       for (const element of elements) {
-        this.legendDiv.innerHTML += element;
+        detailsString += element;
       }
     }
+    detailsString += '</details>';
+
+    this.legendDiv.innerHTML = detailsString;
   }
 
   private isMultiLinePointLayer(layerName: IbfLayerName): boolean {
diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
index 2e8971b0a..cfd3893f8 100644
--- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
+++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html
@@ -1,92 +1,69 @@
-<div class="ibf-map-layer-control">
-  <ion-menu-toggle
-    menu="layer-control"
-    [class.ion-hide]="hideLayerControlToggleButton"
+<div
+  id="layer-menu-container"
+  [ngStyle]="{ height: getLayerMenuContainerHeightInRem() + 'rem' }"
+>
+  <ion-button
+    class="ion-no-margin ion-justify-content-between"
+    color="ibf-no-alert-primary "
+    id="layer-menu-toggle-button"
+    (click)="toggleLayerMenu()"
   >
-    <ion-header>
-      <ion-toolbar color="ibf-no-alert-primary">
-        <ion-buttons slot="end">
-          <ion-icon name="chevron-down-outline"></ion-icon>
-        </ion-buttons>
-        <ion-title data-test="layers-toggle">Layers</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-menu-toggle>
-  <ion-menu
-    side="end"
-    type="overlay"
-    contentId="ibf-dashboard-map"
-    menuId="layer-control"
-    (ionDidOpen)="isLayerControlMenuOpen()"
-    (ionDidClose)="isLayerControlMenuOpen()"
-    data-test="layers-control-menu"
-    swipeGesture="false"
-  >
-    <ion-menu-toggle menu="layer-control">
-      <ion-header>
-        <ion-toolbar color="ibf-no-alert-primary">
-          <ion-buttons slot="end">
-            <ion-icon name="chevron-up-outline"></ion-icon>
-          </ion-buttons>
-          <ion-title>{{
-            'layers-menu.menu-toggle-label' | translate
-          }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-    </ion-menu-toggle>
-    <ion-content>
-      <ion-list class="ion-no-padding">
-        <ion-row
-          *ngFor="let layer of getLayersInOrder()"
-          class="ion-justify-content-between ion-nowrap"
-        >
-          <ion-item lines="none">
-            <ion-spinner *ngIf="layer.isLoading"></ion-spinner>
-            <div
-              *ngIf="!layer.isLoading"
+    <div>
+      <ion-text> {{ 'layers-menu.menu-toggle-label' | translate }}</ion-text
+      ><ion-icon
+        [name]="isLayerMenuOpen ? 'chevron-down-outline' : 'chevron-up-outline'"
+      ></ion-icon>
+    </div>
+  </ion-button>
+  <div *ngIf="isLayerMenuOpen" id="layer-menu">
+    <ion-list class="ion-no-padding">
+      <ion-row
+        *ngFor="let layer of getLayersInOrder()"
+        class="ion-justify-content-between ion-nowrap"
+      >
+        <ion-item lines="none">
+          <ion-spinner *ngIf="layer.isLoading"></ion-spinner>
+          <ng-container *ngIf="!layer.isLoading">
+            <ion-icon
+              *ngIf="isCheckBox(layer.group)"
+              [name]="layer.active ? 'checkbox' : 'square-outline'"
+              (click)="toggleLayer(layer)"
+              class="single-layer-toggler"
+            ></ion-icon>
+            <ion-icon
+              *ngIf="isRadioButton(layer.group)"
+              [name]="
+                layer.active
+                  ? 'radio-button-on-outline'
+                  : 'radio-button-off-outline'
+              "
               (click)="toggleLayer(layer)"
-              class="matrix-toggler ion-no-margin"
-              [class.matrix-check]="isCheckBox(layer.group)"
-              [class.matrix-radio]="isRadioButton(layer.group)"
-              slot="start"
-            >
-              <svg
-                *ngIf="isCheckBox(layer.group) && layer.active"
-                class="matrix-check-mark"
-                viewBox="-4 -4 35 35"
-                part="container"
-              >
-                <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
-              </svg>
-              <div
-                *ngIf="isRadioButton(layer.group) && layer.active"
-                class="matrix-radio-circle"
-              ></div>
-            </div>
-            <ion-label
-              class="ion-text-wrap ion-no-margin"
-              [title]="layer.label"
-              style="margin-left: 8px"
-            >
-              {{ layer.label }}
-            </ion-label>
-            <ion-button
-              slot="end"
-              fill="clear"
-              class="ion-no-margin info-button"
-              (click)="presentPopover($event, layer)"
-              [title]="'aggregates-component.more-information' | translate"
-            >
-              <ion-icon
-                color="ibf-no-alert-primary"
-                name="information-circle-outline"
-                data-test="matrix-icon"
-                class="info-icon"
-              ></ion-icon>
-            </ion-button>
-          </ion-item>
-        </ion-row>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
+              class="single-layer-toggler"
+            ></ion-icon>
+          </ng-container>
+          <ion-label
+            class="ion-text-wrap ion-no-margin"
+            [title]="layer.label"
+            style="margin-left: 8px"
+          >
+            {{ layer.label }}
+          </ion-label>
+          <ion-button
+            slot="end"
+            fill="clear"
+            class="ion-no-margin info-button"
+            (click)="presentPopover($event, layer)"
+            [title]="'aggregates-component.more-information' | translate"
+          >
+            <ion-icon
+              color="ibf-no-alert-primary"
+              name="information-circle-outline"
+              data-test="matrix-icon"
+              class="info-icon"
+            ></ion-icon>
+          </ion-button>
+        </ion-item>
+      </ion-row>
+    </ion-list>
+  </div>
 </div>
diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss
index bf7fc80c2..79a087bea 100644
--- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss
+++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss
@@ -1,105 +1,87 @@
-.ibf-map-layer-control {
-  position: absolute;
-  top: 10px;
-  bottom: 0;
-  right: 0;
-  width: 28%;
-
-  ion-menu {
-    --width: 100%;
-    --background: transparent;
-
-    ion-content {
-      --background: transparent;
-    }
-
-    ion-content::part(scroll),
-    ion-content::part(background) {
-      height: max-content;
-    }
+$z-index: 900;
+$menu-width: 13vw;
+$menu-width-small-res: 16vw;
+$toggle-button-bottom: 1.5rem;
+$toggle-button-right: 0;
+$toggle-button-height: 2.26rem;
+$line-height: 1.5rem;
+
+#layer-menu-container {
+  position: fixed;
+  z-index: $z-index;
+  bottom: $toggle-button-bottom;
+  right: $toggle-button-right;
+  width: $menu-width;
+  height: $line-height;
+  display: flex;
+  flex-direction: column;
+  max-height: calc($toggle-button-height + ($line-height * 10));
+  @media (max-width: 1280px) {
+    width: $menu-width-small-res;
   }
 
-  ion-menu::part(backdrop) {
-    display: none;
-    background: transparent;
-  }
-
-  ion-menu-toggle {
-    cursor: pointer;
-
-    ion-toolbar {
-      --min-height: 36px;
-
-      ion-title {
-        font-size: 12px;
+  #layer-menu-toggle-button {
+    width: 100%;
+    height: $toggle-button-height;
+    min-height: $toggle-button-height;
+    --border-radius: 0.25rem 0 0 0;
+    div {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      ion-icon {
+        font-size: 1rem;
       }
     }
   }
-  ion-row {
-    min-height: 36px;
-    border: 1px solid var(--ion-color-ibf-no-alert-primary);
-    border-top: none;
-  }
 
-  ion-item {
-    width: 100%;
-    --min-height: 36px;
-    --padding-bottom: 0;
-    --padding-top: 0;
-    --padding-start: 4px;
-    --padding-end: 4px;
-    --inner-padding-start: 0;
-    --inner-padding-end: 0;
+  #layer-menu {
+    bottom: 0px;
+    overflow-y: auto;
 
-    ion-spinner {
-      width: 18px;
-      height: 18px;
+    ion-row {
+      min-height: $line-height;
+      border: 1px solid var(--ion-color-ibf-no-alert-primary);
+      border-top: none;
     }
 
-    .matrix-toggler {
-      width: 18px;
-      height: 18px;
-      background-color: #fff;
-      border: 2px solid var(--ion-color-ibf-no-alert-primary);
-      cursor: pointer;
-
-      &.matrix-check {
-        border-radius: 2px;
+    ion-item {
+      width: 98%;
+      --min-height: $line-height;
+      --padding-bottom: 0;
+      --padding-top: 0;
+      --padding-start: 0.25rem;
+      --padding-end: 0.25rem;
+      --inner-padding-start: 0;
+      --inner-padding-end: 0;
+
+      ion-spinner {
+        width: 1rem;
+        height: 1rem;
       }
 
-      &.matrix-radio {
-        border-radius: 50%;
+      .single-layer-toggler {
+        font-size: 1.3rem;
+        cursor: pointer;
+        color: var(--ion-color-ibf-no-alert-primary);
       }
 
-      .matrix-check-mark {
-        width: 16px;
-        height: 16px;
-        background-color: var(--ion-color-ibf-no-alert-primary);
-        stroke: #fff;
-        stroke-width: 4px;
+      ion-label {
+        width: 80%;
+        font-size: 0.75rem;
       }
-      .matrix-radio-circle {
-        width: 14px;
-        height: 14px;
-        background-color: var(--ion-color-ibf-no-alert-primary);
-        border: 2px solid #fff;
-        border-radius: 50%;
-      }
-    }
 
-    ion-label {
-      width: 80%;
-      font-size: 12px;
-    }
-
-    .info-button {
-      --background-hover: #fff;
-      --ripple-color: #fff;
-    }
-    .info-icon {
-      font-size: 24px;
+      .info-button {
+        --background-hover: #fff;
+        --ripple-color: #fff;
+      }
+      .info-icon {
+        font-size: 1.3rem;
 
-      cursor: pointer;
+        cursor: pointer;
+      }
     }
   }
 }
diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts
index 5458dac44..c672049a8 100644
--- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts
+++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts
@@ -29,6 +29,11 @@ export class MatrixComponent implements OnDestroy {
   public IbfLayerGroup = IbfLayerGroup;
   public hideLayerControlToggleButton = false;
 
+  private BUTTON_HEIGHT = 2.26;
+  private LINE_HEIGHT = 1.5;
+
+  public isLayerMenuOpen = false;
+
   constructor(
     private analyticsService: AnalyticsService,
     public eventService: EventService,
@@ -57,6 +62,7 @@ export class MatrixComponent implements OnDestroy {
       if (newLayerIndex >= 0) {
         this.layers.splice(newLayerIndex, 1, newLayer);
       } else {
+        this.isLayerMenuOpen = false;
         if (newLayer.group !== IbfLayerGroup.adminRegions) {
           this.layers.push(newLayer);
         }
@@ -128,4 +134,18 @@ export class MatrixComponent implements OnDestroy {
       layerGroup,
     );
   }
+
+  public toggleLayerMenu(): void {
+    this.isLayerMenuOpen = !this.isLayerMenuOpen;
+  }
+
+  public getLayerMenuContainerHeightInRem = (): number => {
+    if (!this.isLayerMenuOpen) {
+      return this.BUTTON_HEIGHT;
+    }
+    return (
+      (this.getLayersInOrder().length + 1) * this.LINE_HEIGHT +
+      this.BUTTON_HEIGHT
+    );
+  };
 }
diff --git a/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts b/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts
index 3207063bb..c73db370f 100644
--- a/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts
+++ b/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts
@@ -25,7 +25,7 @@ enum SingleRowLegendType {
   providedIn: 'root',
 })
 export class MapLegendService {
-  private legendDivTitle = `<div style='margin-bottom: 16px'><strong>Map Legend</strong></div>`;
+  private legendDivTitle = `<div><strong>Map Legend</strong></div>`;
 
   public eventState: EventState;
   private country: Country;
@@ -363,13 +363,13 @@ export class MapLegendService {
 
     const labelStyle =
       type === SingleRowLegendType.pin && label !== IbfLayerLabel.typhoonTrack
-        ? 'style="padding-top: 2px"'
+        ? 'style="padding-top: 2px;"'
         : '';
 
     return `
-    <ion-row ${rowStyle}>
+    <ion-row class="ion-nowrap" ${rowStyle}>
       <div style="${divStyle}">${pinImg}</div>
-      <ion-label ${labelStyle}>${label}</ion-label>
+      <ion-label class="ion-text-wrap" ${labelStyle}>${label}</ion-label>
     </ion-row>
     `;
   };
diff --git a/interfaces/IBF-dashboard/src/global.scss b/interfaces/IBF-dashboard/src/global.scss
index 39e259aa6..886914e27 100644
--- a/interfaces/IBF-dashboard/src/global.scss
+++ b/interfaces/IBF-dashboard/src/global.scss
@@ -63,10 +63,39 @@
 
 .info {
   padding: 6px 8px;
-  font: 12px Arial, Helvetica, sans-serif;
+  font: 0.75rem Arial, Helvetica, sans-serif;
   background: white;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
+  box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.2);
+  border-radius: 0.3125rem;
+  width: 13vw;
+
+  details {
+    summary {
+      list-style-type: none;
+
+      .legend-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        cursor: pointer;
+
+        .icon-up {
+          display: block;
+        }
+        .icon-down {
+          display: none;
+        }
+      }
+    }
+    &[open] summary {
+      .icon-down {
+        display: block;
+      }
+      .icon-up {
+        display: none;
+      }
+    }
+  }
 }
 
 .leaflet-popup-content-wrapper {