diff --git a/frontend/src/app/pages/learner-portal/learner-portal.component.ts b/frontend/src/app/pages/learner-portal/learner-portal.component.ts
index 957a268..3a85705 100644
--- a/frontend/src/app/pages/learner-portal/learner-portal.component.ts
+++ b/frontend/src/app/pages/learner-portal/learner-portal.component.ts
@@ -347,8 +347,8 @@ import { V2PlatformService } from '../../services/v2-platform.service';
     .learn-progress { background: var(--ee-surface-muted, #f8fafc); border: 1px solid var(--ee-border); border-radius: var(--ee-radius, 6px); display: grid; gap: .65rem; padding: .85rem; }
     .learn-progress > div:first-child { align-items: center; display: flex; justify-content: space-between; }
     .learn-progress strong { color: var(--ee-action-primary); }
-    .learn-progress__track { background: var(--ee-border); border-radius: 999px; height: .7rem; overflow: hidden; }
-    .learn-progress__bar { background: var(--ee-action-primary); border-radius: inherit; height: 100%; min-width: .15rem; }
+    .learn-progress__track { background: var(--ee-color-border-subtle, var(--ee-border, #dccdb7)); border-radius: 999px; height: .7rem; overflow: hidden; }
+    .learn-progress__bar { background: var(--ee-color-action-primary-background, var(--ee-action-primary, #0f766e)); border-radius: inherit; height: 100%; min-width: .15rem; }
     .learn-progress--compact { padding: .65rem; }
     .learn-support { border: 1px solid var(--ee-border); border-radius: var(--ee-radius, 6px); display: grid; gap: .45rem; padding: .85rem; }
     .learn-support[data-support-state="remediation"] { background: var(--ee-status-warning-bg, #fef3c7); border-color: var(--ee-status-warning-border, #f59e0b); }
diff --git a/frontend/src/app/pages/learner-portal/student-course-overview.component.ts b/frontend/src/app/pages/learner-portal/student-course-overview.component.ts
index c0bcb81..6b1a377 100644
--- a/frontend/src/app/pages/learner-portal/student-course-overview.component.ts
+++ b/frontend/src/app/pages/learner-portal/student-course-overview.component.ts
@@ -245,14 +245,14 @@ import { ToastService } from '../../services/toast.service';
     }
 
     .student-course__track {
-      background: var(--ee-border);
+      background: var(--ee-color-border-subtle, var(--ee-border, #dccdb7));
       border-radius: 999px;
       height: 0.72rem;
       overflow: hidden;
     }
 
     .student-course__bar {
-      background: var(--ee-action-primary);
+      background: var(--ee-color-action-primary-background, var(--ee-action-primary, #0f766e));
       border-radius: inherit;
       height: 100%;
       min-width: 0.15rem;