diff --git a/assets/components/download-list-row.js b/assets/components/download-list-row.js
index 72d3a82..1a81df3 100644
--- a/assets/components/download-list-row.js
+++ b/assets/components/download-list-row.js
@@ -33,75 +33,75 @@ export default class DownloadListRow extends HTMLTableRowElement {
             <thead>
                 <tr class="flex flex-col">
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">ID</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">ID</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">IMDB ID</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">IMDB ID</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Title</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Title</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">URL</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">URL</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Filename</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Filename</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Status</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Status</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Progress</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Progress</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Media Type</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Media Type</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Episode ID</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Episode ID</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Created At</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Created At</div>
                     </th>
                     <th class="px-4 py-2">
-                      <div class="text-right whitespace-nowrap ">Updated At</div>
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Updated At</div>
                     </th>
                 </tr>
             </thead>
             <tbody>
                 <tr class="flex flex-col">
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('download-id') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('imdb-id') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('media-title') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('url') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('filename') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('status') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('progress') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('media-type') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('episode-id') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('created-at') ?? "-"}</div>
-                    </th>
-                    <th class="px-4 py-2">
-                      <div class="text-left whitespace-nowrap font-normal">${this.getAttribute('updated-at') ?? "-"}</div>
-                    </th>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('download-id') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('imdb-id') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-title') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('url') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('filename') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('status') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('progress') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-type') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('episode-id') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('created-at') ?? "-"}</div>
+                    </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('updated-at') ?? "-"}</div>
+                    </td>
                 </tr>
             </tbody>
         </table>
diff --git a/templates/components/PreviewModal.html.twig b/templates/components/PreviewModal.html.twig
index d192e40..a4f84be 100644
--- a/templates/components/PreviewModal.html.twig
+++ b/templates/components/PreviewModal.html.twig
@@ -1,4 +1,4 @@
-<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md">
+<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md dark:bg-gray-950/80 dark:border dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-md">
     <div class="flex flex-row justify-end">
         <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-middle text-red-600 hover:text-red-700" />
     </div>