diff --git a/frontend/components/Base/Card.vue b/frontend/components/Base/Card.vue
index 624a44b59..49daf671d 100644
--- a/frontend/components/Base/Card.vue
+++ b/frontend/components/Base/Card.vue
@@ -12,7 +12,7 @@
         </h3>
       </component>
       <div>
-        <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
+        <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-foreground/70">
           <slot name="subtitle" />
         </p>
         <template v-if="$slots['title-actions']">
diff --git a/frontend/components/Form/MarkdownEditor.vue b/frontend/components/Form/MarkdownEditor.vue
index c5e9177a2..e18293f69 100644
--- a/frontend/components/Form/MarkdownEditor.vue
+++ b/frontend/components/Form/MarkdownEditor.vue
@@ -67,7 +67,7 @@
       </div>
 
       <div class="col-span-1 flex items-center justify-start gap-2 md:col-span-3 md:justify-end">
-        <label class="text-xs text-slate-500">{{ $t("global.preview") }}</label>
+        <label class="text-xs text-foreground/70">{{ $t("global.preview") }}</label>
         <Checkbox v-model="showPreview" />
       </div>
     </div>
diff --git a/frontend/components/Item/AttachmentsList.vue b/frontend/components/Item/AttachmentsList.vue
index 9e84228b9..cf71a7e26 100644
--- a/frontend/components/Item/AttachmentsList.vue
+++ b/frontend/components/Item/AttachmentsList.vue
@@ -6,7 +6,7 @@
       class="flex items-center justify-between py-3 pl-3 pr-4 text-sm"
     >
       <div class="flex w-0 flex-1 items-center">
-        <MdiPaperclip class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
+        <MdiPaperclip class="size-5 shrink-0 text-foreground/50" aria-hidden="true" />
         <span class="ml-2 w-0 flex-1 truncate"> {{ attachment.title }}</span>
       </div>
       <div class="ml-4 flex shrink-0 gap-2">
diff --git a/frontend/components/Maintenance/ListView.vue b/frontend/components/Maintenance/ListView.vue
index 1b8ae2967..93545bc42 100644
--- a/frontend/components/Maintenance/ListView.vue
+++ b/frontend/components/Maintenance/ListView.vue
@@ -272,7 +272,9 @@
           "
         >
           <MdiWrenchClock class="inline size-16" />
-          <span class="mt-2 block text-sm font-medium text-gray-900"> {{ $t("maintenance.list.create_first") }} </span>
+          <span class="mt-2 block text-sm font-medium text-foreground">
+            {{ $t("maintenance.list.create_first") }}
+          </span>
         </button>
       </div>
     </div>
diff --git a/frontend/components/WipeInventoryDialog.vue b/frontend/components/WipeInventoryDialog.vue
index a61de62dd..0a289297e 100644
--- a/frontend/components/WipeInventoryDialog.vue
+++ b/frontend/components/WipeInventoryDialog.vue
@@ -10,38 +10,28 @@
 
       <div class="space-y-2">
         <div class="flex items-center space-x-2">
-          <input id="wipe-tags-checkbox" v-model="wipeTags" type="checkbox" class="size-4 rounded border-gray-300" />
+          <Checkbox id="wipe-tags-checkbox" v-model="wipeTags" />
           <label for="wipe-tags-checkbox" class="cursor-pointer text-sm font-medium">
             {{ $t("tools.actions_set.wipe_inventory_tags") }}
           </label>
         </div>
 
         <div class="flex items-center space-x-2">
-          <input
-            id="wipe-locations-checkbox"
-            v-model="wipeLocations"
-            type="checkbox"
-            class="size-4 rounded border-gray-300"
-          />
+          <Checkbox id="wipe-locations-checkbox" v-model="wipeLocations" />
           <label for="wipe-locations-checkbox" class="cursor-pointer text-sm font-medium">
             {{ $t("tools.actions_set.wipe_inventory_locations") }}
           </label>
         </div>
 
         <div class="flex items-center space-x-2">
-          <input
-            id="wipe-maintenance-checkbox"
-            v-model="wipeMaintenance"
-            type="checkbox"
-            class="size-4 rounded border-gray-300"
-          />
+          <Checkbox id="wipe-maintenance-checkbox" v-model="wipeMaintenance" />
           <label for="wipe-maintenance-checkbox" class="cursor-pointer text-sm font-medium">
             {{ $t("tools.actions_set.wipe_inventory_maintenance") }}
           </label>
         </div>
       </div>
 
-      <p class="text-sm text-gray-600">
+      <p class="text-sm text-foreground/90">
         {{ $t("tools.actions_set.wipe_inventory_note") }}
       </p>
 
@@ -70,6 +60,7 @@
     AlertDialogTitle,
   } from "@/components/ui/alert-dialog";
   import { Button } from "@/components/ui/button";
+  import { Checkbox } from "@/components/ui/checkbox";
 
   const { registerOpenDialogCallback, closeDialog, addAlert, removeAlert } = useDialog();
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 16a58b09a..b1f80c5d1 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -126,6 +126,20 @@ export default {
       typography: {
         DEFAULT: {
           css: {
+            "--tw-prose-headings": "hsl(var(--foreground))",
+            "--tw-prose-lead": "hsl(var(--muted-foreground))",
+            "--tw-prose-bold": "hsl(var(--foreground))",
+            "--tw-prose-counters": "hsl(var(--foreground) / 0.7)",
+            "--tw-prose-bullets": "hsl(var(--foreground) / 0.7)",
+            "--tw-prose-hr": "hsl(var(--foreground) / 0.25)",
+            "--tw-prose-quotes": "hsl(var(--foreground))",
+            "--tw-prose-quote-borders": "hsl(var(--foreground) / 0.4)",
+            "--tw-prose-captions": "hsl(var(--muted-foreground))",
+            "--tw-prose-kbd": "hsl(var(--foreground))",
+            "--tw-prose-kbd-shadows": "hsl(var(--foreground) / 0.1)",
+            "--tw-prose-code": "hsl(var(--foreground))",
+            "--tw-prose-th-borders": "hsl(var(--foreground) / 0.25)",
+            "--tw-prose-td-borders": "hsl(var(--foreground) / 0.2)",
             color: "hsl(var(--foreground))",
             a: {
               color: "hsl(var(--primary))",