diff --git a/packages/frontend/src/lib/ExpandableMessage.svelte b/packages/frontend/src/lib/ExpandableMessage.svelte
index 07dbecf4a..926217ef0 100644
--- a/packages/frontend/src/lib/ExpandableMessage.svelte
+++ b/packages/frontend/src/lib/ExpandableMessage.svelte
@@ -7,7 +7,7 @@ let showMessage: boolean = false;
 {#if message}
   <div role="note" class:hidden="{!showMessage}" class="text-xs my-2 break-words">{message}</div>
   <div class="flex flex-col w-full items-end">
-    <button on:click="{() => (showMessage = !showMessage)}" class="text-purple-200 text-xs">
+    <button on:click="{() => (showMessage = !showMessage)}" class="text-[var(--pd-link)] text-xs">
       {title}
       {#if showMessage}
         <i class="fas fa-chevron-up"></i>
diff --git a/packages/frontend/src/lib/progress/TaskItem.svelte b/packages/frontend/src/lib/progress/TaskItem.svelte
index 0bc1a99b7..27da15fdb 100644
--- a/packages/frontend/src/lib/progress/TaskItem.svelte
+++ b/packages/frontend/src/lib/progress/TaskItem.svelte
@@ -20,7 +20,7 @@ const cancel = () => {
     {#if task.state === 'success'}
       <svg
         role="img"
-        class="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0"
+        class="w-4 h-4 text-green-500 flex-shrink-0"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         viewBox="0 0 20 20">
@@ -31,7 +31,7 @@ const cancel = () => {
     {:else if task.state === 'loading'}
       <svg
         role="img"
-        class="w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-purple-500"
+        class="w-4 h-4 text-[var(--pd-content-card-text)] animate-spin fill-purple-500"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/frontend/src/lib/progress/TasksProgress.svelte b/packages/frontend/src/lib/progress/TasksProgress.svelte
index dea6bcfd0..b9436e956 100644
--- a/packages/frontend/src/lib/progress/TasksProgress.svelte
+++ b/packages/frontend/src/lib/progress/TasksProgress.svelte
@@ -6,9 +6,9 @@ import TaskItem from './TaskItem.svelte';
 export let tasks: Task[] = [];
 </script>
 
-<ul class="space-y-2 text-gray-500 list-inside dark:text-gray-400">
+<ul class="space-y-2 text-[var(--pd-content-card-text)] list-inside">
   {#each tasks as task}
-    <li class="flex flex-col rounded-md bg-charcoal-800 p-2">
+    <li class="flex flex-col rounded-md bg-[var(--pd-content-card-bg)] p-2">
       <TaskItem task="{task}" />
       <ExpandableMessage message="{task.error}" title="View Error" />
     </li>