diff --git a/src/app/pages/matrix/matrix.component.css b/src/app/pages/matrix/matrix.component.css
index 33061168f..bcfcda59d 100644
--- a/src/app/pages/matrix/matrix.component.css
+++ b/src/app/pages/matrix/matrix.component.css
@@ -124,9 +124,8 @@
   font-size: medium;
 }
 
-.matrix-table {
-  width: 100%;
-  margin-bottom: 20px;
+.mat-table-container {
+  overflow-x: auto;
 }
 
 /* No data message styling */
diff --git a/src/app/pages/matrix/matrix.component.html b/src/app/pages/matrix/matrix.component.html
index 320f22ae9..a99cd046d 100644
--- a/src/app/pages/matrix/matrix.component.html
+++ b/src/app/pages/matrix/matrix.component.html
@@ -30,66 +30,68 @@
   <button class="reset-button" (click)="reset()">RESET</button>
 
   <!-- eslint-disable -->
-  <table
-    mat-table
-    [dataSource]="dataSource"
-    class="mat-elevation-z8 matrix-table">
+  <div class="mat-table-container">
+    <table
+      mat-table
+      [dataSource]="dataSource"
+      class="mat-elevation-z8 matrix-table">
 
-    <!-- Category Column -->
-    <ng-container matColumnDef="Category">
-      <th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
-      <td mat-cell *matCellDef="let element" class="table-small-width">
-        <div class="dim-icon">
-          <mat-icon mat-list-icon color="primary">{{dataStore?.meta?.getIcon(element.Category)}}</mat-icon>
-          {{ element.Category }}
-        </div>
-      </td>
-    </ng-container>
-    
-    <!-- Dimension Column -->
-    <ng-container matColumnDef="Dimension">
-      <th mat-header-cell *matHeaderCellDef class="table-small-width">Sub-dimension</th>
-      <td mat-cell *matCellDef="let element" class="table-small-width">
-        {{ element.Dimension }}
-      </td>
-    </ng-container>
-    
-    <div *ngFor="let level of levels | keyvalue">
-      <ng-container matColumnDef="{{ level.key }}">
-        <th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
-        <td mat-cell *matCellDef="let element">
-          <ul class="activity-list">
-            <li class="mat-cell-activity" *ngFor="let activity of element[level.key]">
-              <div>
-                <div>
-                  <a 
-                  class="activity-title"
-                  (click)="navigate(activity.uuid)"
-                  >{{ activity.name }}</a
-                  >
-                </div>
-                <span *ngIf="activity.tags" class="tags-activity">
-                  <span *ngFor="let tag of activity.tags; let i = index">
-                    <span *ngIf="i > 0">, </span>[{{ tag }}]</span
-                  >
-                </span>
-              </div>
-            </li>
-          </ul>
+      <!-- Category Column -->
+      <ng-container matColumnDef="Category">
+        <th mat-header-cell *matHeaderCellDef class="table-small-width">Dimension</th>
+        <td mat-cell *matCellDef="let element" class="table-small-width">
+          <div class="dim-icon">
+            <mat-icon mat-list-icon color="primary">{{dataStore?.meta?.getIcon(element.Category)}}</mat-icon>
+            {{ element.Category }}
+          </div>
+        </td>
+      </ng-container>
+      
+      <!-- Dimension Column -->
+      <ng-container matColumnDef="Dimension">
+        <th mat-header-cell *matHeaderCellDef class="table-small-width">Sub-dimension</th>
+        <td mat-cell *matCellDef="let element" class="table-small-width">
+          {{ element.Dimension }}
         </td>
       </ng-container>
-    </div>
-    <!-- eslint-enable -->
+      
+      <div *ngFor="let level of levels | keyvalue">
+        <ng-container matColumnDef="{{ level.key }}">
+          <th mat-header-cell *matHeaderCellDef>{{ level.value }}</th>
+          <td mat-cell *matCellDef="let element">
+            <ul class="activity-list">
+              <li class="mat-cell-activity" *ngFor="let activity of element[level.key]">
+                <div>
+                  <div>
+                    <a 
+                    class="activity-title"
+                    (click)="navigate(activity.uuid)"
+                    >{{ activity.name }}</a
+                    >
+                  </div>
+                  <span *ngIf="activity.tags" class="tags-activity">
+                    <span *ngFor="let tag of activity.tags; let i = index">
+                      <span *ngIf="i > 0">, </span>[{{ tag }}]</span
+                    >
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </td>
+        </ng-container>
+      </div>
+      <!-- eslint-enable -->
 
-    <!-- No data message -->
-    <tr class="mat-row" *matNoDataRow>
-      <td class="mat-cell" [attr.colspan]="columnNames.length">
-        No activities match the selected filters
-      </td>
-    </tr>
+      <!-- No data message -->
+      <tr class="mat-row" *matNoDataRow>
+        <td class="mat-cell" [attr.colspan]="columnNames.length">
+          No activities match the selected filters
+        </td>
+      </tr>
 
-    <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
-    <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
-    <tr mat-footer-row></tr>
-  </table>
+      <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
+      <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
+      <tr mat-footer-row></tr>
+    </table>
+  </div>
 </div>