diff --git a/assets/bootstrap.js b/assets/bootstrap.js
index db65109..7aacd6f 100644
--- a/assets/bootstrap.js
+++ b/assets/bootstrap.js
@@ -1,3 +1,4 @@
+import '@ungap/custom-elements'
 import PreviewContentDialog from "./components/preview-content-dialog.js";
 import EpisodeContainer from './components/episode-container.js';
 import DownloadOptionTr from './components/download-option-tr.js';
diff --git a/assets/components/download-list-row.js b/assets/components/download-list-row.js
index 1a81df3..5f7ed4d 100644
--- a/assets/components/download-list-row.js
+++ b/assets/components/download-list-row.js
@@ -24,11 +24,12 @@ export default class DownloadListRow extends HTMLTableRowElement {
         if (oldValue !== newValue) {
             this[name] = newValue;
             this.setAttribute(name, newValue);
+            this.setPreviewContent();
         }
     }
 
-    previewContent() {
-        return `
+    setPreviewContent() {
+        this.previewContent = `
         <table class="table-auto flex flex-row">
             <thead>
                 <tr class="flex flex-col">
diff --git a/assets/controllers/download_list_controller.js b/assets/controllers/download_list_controller.js
index 5d7905f..50d46ec 100644
--- a/assets/controllers/download_list_controller.js
+++ b/assets/controllers/download_list_controller.js
@@ -44,19 +44,19 @@ export default class extends Controller {
         console.log(target)
 
         downloads.forEach(download => {
-            console.log(download)
-            download.mediaTitle = download.getAttribute('media-title');
             download.addEventListener('click', (event) => {
                 // let previewContentModal = document.querySelector('#previewContentModal');
                 let content, heading = ""
                 if (event.target.tagName !== "TR") {
-                    content = event.target.parentElement.previewContent();
+                    content = event.target.parentElement.previewContent;
                     heading = event.target.parentElement.mediaTitle;
                 } else {
-                    content = event.target.previewContent();
+                    content = event.target.previewContent;
                     heading = event.target.mediaTitle;
                 }
 
+                console.log(content)
+
                 document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
             })
         })
diff --git a/importmap.php b/importmap.php
index fa87c7b..83ec592 100644
--- a/importmap.php
+++ b/importmap.php
@@ -67,4 +67,7 @@ return [
     'pulltorefreshjs' => [
         'version' => '0.1.22',
     ],
+    '@ungap/custom-elements' => [
+        'version' => '1.3.0',
+    ],
 ];
diff --git a/src/User/Framework/Controller/Web/PreferencesController.php b/src/User/Framework/Controller/Web/PreferencesController.php
index 87a0f64..84b52d8 100644
--- a/src/User/Framework/Controller/Web/PreferencesController.php
+++ b/src/User/Framework/Controller/Web/PreferencesController.php
@@ -36,6 +36,8 @@ class PreferencesController extends AbstractController
         $formData = (array) UserPreferencesFactory::createFromUser($this->getUser());
         $form = $this->createForm(UserMediaPreferencesForm::class, $formData);
 
+//        dd($form);
+
         return $this->render(
             'user/preferences.html.twig',
             [
diff --git a/templates/components/PreviewModal.html.twig b/templates/components/PreviewModal.html.twig
index a4f84be..645a2c4 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 dark:bg-gray-950/80 dark:border dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-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-2 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>