diff --git a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss b/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss
index 42c77db..f0a9f17 100644
--- a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss
+++ b/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss
@@ -21,22 +21,6 @@
   width: 100%;
 }
 
-/* Ensure good contrast in dark/light modes */
-.table-theme th.mat-mdc-header-cell,
-.table-theme td.mat-mdc-cell,
-.table-theme .mat-mdc-header-row,
-.table-theme .mat-mdc-row {
-  color: var(--font-color);
-}
-
-/* Apply class to table via HTML's class attribute if needed; here we style all mat tables in this component */
-table.mat-mdc-table {
-  color: var(--font-color);
-}
-
-.mat-sort-header-arrow {
-  color: var(--font-color);
-}
 
 .no-data td {
   text-align: center;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index f9ff852..653feea 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -483,3 +483,42 @@ main .container {
 .margin-auto {
   margin: auto
 }
+
+
+/* Angular Material global theme bridge to app CSS variables */
+.theme-light, .theme-dark {
+  /* Ensure Material table text and headers follow theme font color */
+  .mat-mdc-table,
+  .mat-mdc-header-cell,
+  .mat-mdc-cell,
+  .mat-mdc-header-row,
+  .mat-mdc-row {
+    color: var(--font-color);
+  }
+
+  /* Sort arrow color */
+  .mat-sort-header-arrow {
+    color: var(--font-color);
+  }
+}
+
+/* Dark theme overrides for Angular Material tables to ensure readable backgrounds */
+.theme-dark {
+  /* Set a dark surface for the table container */
+  .mat-mdc-table {
+    background-color: var(--color-secondary);
+  }
+
+  /* Ensure rows and cells don't bring back white backgrounds from the prebuilt theme */
+  .mat-mdc-header-row,
+  .mat-mdc-row,
+  .mat-mdc-header-cell,
+  .mat-mdc-cell {
+    background-color: transparent;
+  }
+
+  /* Optional: keep sort header arrow readable (already set in the bridge, but safe here) */
+  .mat-sort-header-arrow {
+    color: var(--font-color);
+  }
+}