diff --git a/packages/frontend/src/lib/Badge.spec.ts b/packages/frontend/src/lib/Badge.spec.ts
index 7705a5b5e..c515aff99 100644
--- a/packages/frontend/src/lib/Badge.spec.ts
+++ b/packages/frontend/src/lib/Badge.spec.ts
@@ -27,14 +27,14 @@ test('print Badge with custom text and default background', async () => {
 
   const badgeContent = screen.getByText('custom-text');
   expect(badgeContent).toBeInTheDocument();
-  expect(badgeContent).toHaveClass('bg-charcoal-600');
+  expect(badgeContent).toHaveClass('bg-[var(--pd-label-bg)]');
 });
 
 test('print Badge with custom text and custom background', async () => {
-  render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-charcoal-100' });
+  render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-[var(--pd-label-text)]' });
 
   const badgeContent = screen.getByText('custom-text');
   expect(badgeContent).toBeInTheDocument();
-  expect(badgeContent).toHaveClass('bg-charcoal-100');
-  expect(badgeContent).not.toHaveClass('bg-charcoal-600');
+  expect(badgeContent).toHaveClass('bg-[var(--pd-label-text)]');
+  expect(badgeContent).not.toHaveClass('bg-[var(--pd-label-bg)]');
 });
diff --git a/packages/frontend/src/lib/Badge.svelte b/packages/frontend/src/lib/Badge.svelte
index 07d7ca25e..9bd71efe3 100644
--- a/packages/frontend/src/lib/Badge.svelte
+++ b/packages/frontend/src/lib/Badge.svelte
@@ -4,11 +4,11 @@ import Fa from 'svelte-fa';
 
 export let icon: IconDefinition;
 export let content: string;
-export let background: string = 'bg-charcoal-600';
+export let background: string = 'bg-[var(--pd-label-bg)]';
 </script>
 
 <div
-  class="{background} rounded-md px-2 py-1 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
+  class="{background} rounded-md px-2 py-1 flex flex-row w-min h-min text-xs text-[var(--pd-label-text)] text-nowrap items-center">
   {#if icon}
     <Fa class="mr-2" icon="{icon}" />
   {/if}
diff --git a/packages/frontend/src/lib/icons/ModelWhite.svelte b/packages/frontend/src/lib/icons/ModelWhite.svelte
index 872423f36..acdad4299 100644
--- a/packages/frontend/src/lib/icons/ModelWhite.svelte
+++ b/packages/frontend/src/lib/icons/ModelWhite.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 export let solid: boolean = false;
+const fg = solid ? 'white' : '#888';
 </script>
 
 <div role="img" class="rounded py-[6px] pl-[7px] pr-[5px]" class:bg-green-400="{solid}">
@@ -8,15 +9,15 @@ export let solid: boolean = false;
       <g clip-path="url(#clip1_47_118)">
         <path
           d="M14.9984 7.94844C14.9703 7.13751 14.2922 6.50001 13.4813 6.50001H13.2891C13.2641 6.50001 13.2406 6.49063 13.2234 6.47188L9.23126 2.48594C9.20001 2.45469 9.19689 2.40626 9.22188 2.37032C9.39688 2.12501 9.50001 1.82501 9.50001 1.50001C9.50001 0.676569 8.82501 6.10354e-06 8.00157 -0.0015564C7.37188 -0.0015564 6.83126 0.385944 6.60939 0.935944C6.59532 0.968756 6.56407 0.992194 6.52657 0.992194H2.97345C2.93751 0.992194 2.9047 0.970319 2.89063 0.935944C2.66876 0.387506 2.12813 6.10354e-06 1.49688 6.10354e-06C0.682822 6.10354e-06 0.0109465 0.664069 8.99853e-06 1.47813C-0.0109285 2.31563 0.664072 3.00001 1.50001 3.00001C2.00001 3.00001 1.94063 2.95001 2.13282 2.86094C2.1672 2.84532 2.20626 2.85157 2.23282 2.87813L3.75938 4.40469C3.79376 4.43907 3.79376 4.49532 3.75938 4.52969L1.79688 6.49219C1.77657 6.51251 1.75001 6.52188 1.72188 6.51719C1.6422 6.50469 1.56095 6.50001 1.47813 6.50157C0.670321 6.51094 0.0109465 7.17188 8.99853e-06 7.97969C-0.0109285 8.81719 0.664072 9.50001 1.50001 9.50001C2.33595 9.50001 1.6547 9.49376 1.7297 9.48282C1.75938 9.47813 1.78907 9.48907 1.81095 9.50938L3.68907 11.4375C3.72345 11.4719 3.72345 11.5266 3.68907 11.5609L2.18595 13.1C2.16095 13.1266 2.12188 13.1344 2.08751 13.1188C1.89688 13.0375 1.68438 12.9938 1.46251 13C0.660946 13.0188 0.0109465 13.6766 8.99853e-06 14.4781C-0.0109285 15.3156 0.664072 16 1.50001 16C2.33595 16 2.67657 15.6063 2.89532 15.05C2.90938 15.0156 2.94063 14.9938 2.97813 14.9938H6.52032C6.55626 14.9938 6.58907 15.0156 6.60314 15.05C6.82189 15.6063 7.36251 16 7.99688 16C8.81407 16 9.48751 15.3391 9.50001 14.5219C9.5047 14.2031 9.40938 13.9078 9.24376 13.6625C9.22032 13.6266 9.22345 13.5797 9.2547 13.55L13.2828 9.52188C13.3031 9.50157 13.3297 9.49219 13.3578 9.49532C13.4047 9.50001 13.4516 9.50157 13.5 9.50157C14.3453 9.50157 15.0281 8.80157 14.9984 7.95001V7.94844ZM1.50001 2.00001C1.22345 2.00001 1.00001 1.77657 1.00001 1.50001C1.00001 1.22344 1.22345 1.00001 1.50001 1.00001C1.77657 1.00001 2.00001 1.22344 2.00001 1.50001C2.00001 1.77657 1.77657 2.00001 1.50001 2.00001ZM1.50001 15C1.22345 15 1.00001 14.7766 1.00001 14.5C1.00001 14.2234 1.22345 14 1.50001 14C1.77657 14 2.00001 14.2234 2.00001 14.5C2.00001 14.7766 1.77657 15 1.50001 15ZM8.00001 1.00001C8.27657 1.00001 8.50001 1.22344 8.50001 1.50001C8.50001 1.77657 8.27657 2.00001 8.00001 2.00001C7.72345 2.00001 7.50001 1.77657 7.50001 1.50001C7.50001 1.22344 7.72345 1.00001 8.00001 1.00001ZM2.91563 2.14532C2.89063 2.12032 2.88282 2.08282 2.89532 2.05001C2.90938 2.01563 2.94063 1.99219 2.97813 1.99219H6.0797C6.15938 1.99219 6.19845 2.08751 6.1422 2.14376L4.59063 3.69532C4.55626 3.72969 4.50001 3.72969 4.46563 3.69532L2.91563 2.14532ZM1.50001 8.50001C1.22345 8.50001 1.00001 8.27657 1.00001 8.00001C1.00001 7.72344 1.22345 7.50001 1.50001 7.50001C1.77657 7.50001 2.00001 7.72344 2.00001 8.00001C2.00001 8.27657 1.77657 8.50001 1.50001 8.50001ZM2.71251 6.98907L4.46563 5.23594C4.50001 5.20157 4.55626 5.20157 4.59063 5.23594L6.61876 7.26407C6.64688 7.29219 6.65313 7.33438 6.63751 7.37032C6.62657 7.39376 6.6172 7.41719 6.60626 7.44063C6.5922 7.47657 6.55782 7.50001 6.51876 7.50001H2.97657C2.94063 7.50001 2.90782 7.47813 2.89376 7.44376C2.84532 7.32188 2.78126 7.20782 2.7047 7.10469C2.67813 7.07032 2.68282 7.02032 2.71407 6.98907H2.71251ZM2.71876 9.00157C2.68751 8.97032 2.68282 8.92188 2.70938 8.88594C2.78438 8.78438 2.84532 8.67344 2.89376 8.55469C2.90782 8.52032 2.93907 8.49844 2.97657 8.49844H6.52188C6.55938 8.49844 6.59376 8.52188 6.60782 8.55626C6.61095 8.56563 6.61563 8.57501 6.61876 8.58438C6.63439 8.62032 6.62657 8.66094 6.59845 8.68751L4.56095 10.6875C4.52657 10.7219 4.47032 10.7219 4.43595 10.6875L2.7172 9.00001L2.71876 9.00157ZM6.0797 13.9922H2.97345C2.93751 13.9922 2.9047 13.9703 2.89063 13.9359C2.88595 13.925 2.88126 13.9141 2.87657 13.9031C2.86251 13.8703 2.86876 13.8313 2.89532 13.8047L4.43907 12.2609C4.47345 12.2266 4.5297 12.2266 4.56407 12.2609L6.1422 13.8391C6.19845 13.8953 6.15782 13.9906 6.0797 13.9906V13.9922ZM7.99845 14.9984C7.72188 14.9984 7.49845 14.775 7.49845 14.4984C7.49845 14.2219 7.72188 13.9984 7.99845 13.9984C8.27501 13.9984 8.49845 14.2219 8.49845 14.4984C8.49845 14.775 8.27501 14.9984 7.99845 14.9984ZM12.3234 9.06251L8.38126 13.0047C8.36095 13.025 8.3297 13.0344 8.30157 13.0297C8.20313 13.0094 8.10314 12.9984 7.99845 12.9984C7.6672 12.9984 7.36095 13.1063 7.11251 13.2875C7.07657 13.3141 7.02657 13.3109 6.99532 13.2781L5.30782 11.5594C5.27345 11.525 5.27345 11.4703 5.30782 11.4344L7.30157 9.39532C7.32813 9.36876 7.37032 9.36094 7.4047 9.37501C7.58595 9.45313 7.78595 9.49688 7.99688 9.49688C8.62813 9.49688 9.1672 9.10782 9.38907 8.55626C9.40314 8.52032 9.43751 8.49688 9.47657 8.49688H11.9969C12.0469 8.49688 12.0922 8.52657 12.1125 8.57344C12.1672 8.70469 12.2406 8.82813 12.3297 8.93751C12.3594 8.97501 12.3563 9.02813 12.3234 9.06251ZM7.49845 7.99844C7.49845 7.72188 7.72188 7.49844 7.99845 7.49844C8.27501 7.49844 8.49845 7.72188 8.49845 7.99844C8.49845 8.27501 8.27501 8.49844 7.99845 8.49844C7.72188 8.49844 7.49845 8.27501 7.49845 7.99844ZM12.4063 7.06094C12.2531 7.17657 12.1688 7.29688 12.1141 7.42188C12.0938 7.46719 12.0484 7.49844 11.9984 7.49844H9.47657C9.43751 7.49844 9.40314 7.47501 9.38907 7.43907C9.1672 6.88751 8.62813 6.49844 7.99688 6.49844C8 6.5 7.61876 6.53438 7.45001 6.60157C7.41563 6.61563 7.37501 6.60782 7.35001 6.58126L5.29688 4.52813C5.26251 4.49376 5.26251 4.43751 5.29688 4.40313L6.98751 2.71251C7.01876 2.68126 7.0672 2.67813 7.10314 2.70313C7.35314 2.88907 7.66251 3.00001 7.99845 3.00001C8.33438 3.00001 8.17188 2.99219 8.2547 2.97813C8.28282 2.97344 8.31095 2.98282 8.33126 3.00157L12.4156 6.92032C12.4578 6.96094 12.4531 7.02813 12.4063 7.06251V7.06094ZM13.4984 8.49844C13.2219 8.49844 12.9984 8.27501 12.9984 7.99844C12.9984 7.72188 13.2219 7.49844 13.4984 7.49844C13.775 7.49844 13.9984 7.72188 13.9984 7.99844C13.9984 8.27501 13.775 8.49844 13.4984 8.49844Z"
-          fill="white"></path>
+          fill="{fg}"></path>
       </g>
     </g>
     <defs>
       <clipPath id="clip0_47_118">
-        <rect width="16" height="16" fill="white"></rect>
+        <rect width="16" height="16" fill="{fg}"></rect>
       </clipPath>
       <clipPath id="clip1_47_118">
-        <rect width="16" height="16" fill="white"></rect>
+        <rect width="16" height="16" fill="{fg}"></rect>
       </clipPath>
     </defs>
   </svg>
diff --git a/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts
index 5d4085f36..6ff59e48c 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts
+++ b/packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts
@@ -47,5 +47,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText('2 days');
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-700');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text)]');
 });
diff --git a/packages/frontend/src/lib/table/model/ModelColumnAge.svelte b/packages/frontend/src/lib/table/model/ModelColumnAge.svelte
index 8ea826801..5ff3aafe0 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnAge.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnAge.svelte
@@ -4,7 +4,7 @@ import { humanizeAge } from '/@/utils/dimensions';
 export let object: ModelInfo;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm text-[var(--pd-table-body-text)]">
   {#if object.file?.creation}
     {humanizeAge(object.file.creation.getTime() / 1000)}
   {/if}
diff --git a/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte b/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte
index 670865ff3..209f32703 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnLabels.svelte
@@ -6,7 +6,7 @@ import Badge from '../../Badge.svelte';
 export let object: ModelInfo;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm">
   <div class="flex gap-x-2">
     <Badge icon="{faMemory}" content="RAM usage: {object.memory ? filesize(object.memory, { base: 2 }) : 'N/A'}" />
     <Badge icon="{faMicrochip}" content="{object.hw}" />
diff --git a/packages/frontend/src/lib/table/model/ModelColumnName.svelte b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
index be83a7cf1..4ae0e22e7 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnName.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
@@ -13,13 +13,16 @@ function openDetails() {
   title="{object.name}"
   on:click="{() => openDetails()}"
   aria-label="Open Model Details">
-  <div class="text-sm text-gray-300 overflow-hidden text-ellipsis w-full text-left" aria-label="Model Name">
+  <div
+    class="text-sm text-[var(--pd-table-body-text-highlight)] overflow-hidden text-ellipsis w-full text-left"
+    aria-label="Model Name">
     {object.name}
   </div>
   {#if object.registry || object.license}
-    <span class="text-xs text-gray-700" aria-label="Model Info">{object.registry} - {object.license}</span>
+    <span class="text-xs text-[var(--pd-table-body-text)]" aria-label="Model Info"
+      >{object.registry} - {object.license}</span>
   {/if}
   {#if !object.registry && !object.license && !object.url}
-    <span class="text-xs text-gray-700" aria-label="Imported Model Info">Imported by User</span>
+    <span class="text-xs text-[var(--pd-table-body-text)]" aria-label="Imported Model Info">Imported by User</span>
   {/if}
 </button>
diff --git a/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts b/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts
index 570aae321..af7237869 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts
+++ b/packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts
@@ -44,5 +44,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText('1 kB');
   expect(text).toBeInTheDocument();
   expect(text.parentElement).toHaveClass('text-xs');
-  expect(text.parentElement).toHaveClass('text-gray-700');
+  expect(text.parentElement).toHaveClass('text-[var(--pd-table-body-text)]');
 });
diff --git a/packages/frontend/src/lib/table/model/ModelColumnSize.svelte b/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
index 9825dac08..ec3f4b676 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnSize.svelte
@@ -4,7 +4,7 @@ import { filesize } from 'filesize';
 export let object: ModelInfo;
 </script>
 
-<div class="text-xs text-gray-700 flex-flex-row">
+<div class="text-xs text-[var(--pd-table-body-text)] flex-flex-row">
   {#if object.file?.size}
     <div>{filesize(object.file.size)}</div>
   {/if}
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index 710562fa3..45bb00f0e 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -132,7 +132,7 @@ async function importModel() {
               {#if filteredModels.length > 0}
                 <Table kind="model" data="{filteredModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -141,7 +141,7 @@ async function importModel() {
               {#if localModels.length > 0}
                 <Table kind="model" data="{localModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -150,7 +150,7 @@ async function importModel() {
               {#if importedModels.length > 0}
                 <Table kind="model" data="{importedModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -159,7 +159,7 @@ async function importModel() {
               {#if remoteModels.length > 0}
                 <Table kind="model" data="{remoteModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
           {/if}