diff --git a/assets/controllers/result_filter_controller.js b/assets/controllers/result_filter_controller.js
index a039da8..3806cdf 100644
--- a/assets/controllers/result_filter_controller.js
+++ b/assets/controllers/result_filter_controller.js
@@ -27,10 +27,23 @@ export default class extends Controller {
         'episodes': Array,
     }
 
-    connect() {
-        if (this.mediaTypeValue === "tvshows") {
-            this.activeFilter['season'] = 1;
-        }
+    async connect() {
+        await fetch('/api/preferences/media')
+            .then(response => response.json())
+            .then(response => {
+                this.addResolutions(response['resolution']);
+                this.addCodecs(response['codec']);
+            });
+
+        await fetch('/api/user/preferences/values')
+            .then(response => response.json())
+            .then(response => {
+                this.activeFilter = response;
+                if (this.mediaTypeValue === "tvshows") {
+                    this.activeFilter['season'] = 1;
+                }
+                console.log(this.activeFilter);
+            })
     }
 
     async movieResultsOutletConnected(outlet) {
@@ -51,6 +64,20 @@ export default class extends Controller {
         })
     }
 
+    addResolutions(resolutions) {
+        this.resolutionTarget.innerHTML = '<option value="">n/a</option>';
+        this.resolutionTarget.innerHTML += resolutions.preferenceOptions
+            .map((resolution) => '<option value="'+resolution.name.toLowerCase()+'">'+resolution.name+'</option>')
+            .join();
+    }
+
+    addCodecs(codecs) {
+        this.codecTarget.innerHTML = '<option value="">n/a</option>';
+        this.codecTarget.innerHTML += codecs.preferenceOptions
+            .map((codec) => '<option value="'+codec.name.toLowerCase()+'">'+codec.name+'</option>')
+            .join();
+    }
+
     addLanguages(option, props) {
         const languages = Object.assign([], JSON.parse(props['languages']));
         languages.forEach((language) => {
diff --git a/src/Twig/Components/Filter.php b/src/Twig/Components/Filter.php
new file mode 100644
index 0000000..0617073
--- /dev/null
+++ b/src/Twig/Components/Filter.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class Filter
+{
+    use DefaultActionTrait;
+}
diff --git a/src/User/Framework/Controller/Api/PreferencesApiController.php b/src/User/Framework/Controller/Api/PreferencesApiController.php
new file mode 100644
index 0000000..218b680
--- /dev/null
+++ b/src/User/Framework/Controller/Api/PreferencesApiController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\User\Framework\Controller\Api;
+
+use Aimeos\Map;
+use App\User\Framework\Repository\PreferencesRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class PreferencesApiController extends AbstractController
+{
+    #[Route('/api/preferences/media', name: 'api_preferences_media')]
+    public function getMediaPreferences(
+        PreferencesRepository $preferencesRepository,
+    ): Response {
+        return $this->json(
+            Map::from($preferencesRepository->findEnabled())
+                ->rekey(fn($element) => $element->getId())
+                ->toArray()
+        );
+    }
+}
diff --git a/src/User/Framework/Controller/Api/UserApiController.php b/src/User/Framework/Controller/Api/UserApiController.php
new file mode 100644
index 0000000..950db6f
--- /dev/null
+++ b/src/User/Framework/Controller/Api/UserApiController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\User\Framework\Controller\Api;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class UserApiController extends AbstractController
+{
+    #[Route('/api/user/preferences/values', name: 'api_user_preferences_values')]
+    public function getUserPreferenceValues(
+        Security $security
+    ): Response {
+        return $this->json(
+            $security->getUser()->getUserPreferenceValues()
+        );
+    }
+}
diff --git a/src/User/Framework/Entity/PreferenceOption.php b/src/User/Framework/Entity/PreferenceOption.php
index d9fd8ca..6fa7cad 100644
--- a/src/User/Framework/Entity/PreferenceOption.php
+++ b/src/User/Framework/Entity/PreferenceOption.php
@@ -4,6 +4,7 @@ namespace App\User\Framework\Entity;
 
 use App\User\Framework\Repository\PreferenceOptionRepository;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Ignore;
 
 #[ORM\Entity(repositoryClass: PreferenceOptionRepository::class)]
 class PreferenceOption
@@ -19,6 +20,7 @@ class PreferenceOption
     #[ORM\Column(length: 255, nullable: true)]
     private ?string $value = null;
 
+    #[Ignore]
     #[ORM\ManyToOne(inversedBy: 'preferenceOptions')]
     private ?Preference $preference = null;
 
diff --git a/src/User/Framework/Entity/User.php b/src/User/Framework/Entity/User.php
index ae5ea0a..eb2eb91 100644
--- a/src/User/Framework/Entity/User.php
+++ b/src/User/Framework/Entity/User.php
@@ -2,6 +2,7 @@
 
 namespace App\User\Framework\Entity;
 
+use Aimeos\Map;
 use App\User\Framework\Repository\PreferencesRepository;
 use App\User\Framework\Repository\UserRepository;
 use Doctrine\Common\Collections\ArrayCollection;
@@ -184,4 +185,12 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
 
         return $this;
     }
+
+    public function getUserPreferenceValues()
+    {
+        return Map::from($this->userPreferences)
+            ->rekey(fn(UserPreference $userPreference) => $userPreference->getPreference()->getId())
+            ->map(fn(UserPreference $userPreference) => $userPreference->getPreferenceValue())
+            ->toArray();
+    }
 }
diff --git a/templates/components/Filter.html.twig b/templates/components/Filter.html.twig
new file mode 100644
index 0000000..7ec7964
--- /dev/null
+++ b/templates/components/Filter.html.twig
@@ -0,0 +1,88 @@
+<div id="filter" class="flex flex-col gap-4"
+        {{ stimulus_controller('result_filter') }}
+        {{ stimulus_action('result_filter', 'filter', 'change') }}
+     data-result-filter-media-type-value="{{ results.media.mediaType }}"
+     data-result-filter-movie-results-outlet=".results"
+     data-result-filter-tv-results-outlet=".results"
+>
+    <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
+        <label for="resolution">
+            Resolution
+            <select id="resolution"
+                    data-result-filter-target="resolution"
+                    class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
+                    value="{{ app.user.userPreferenceValues["resolution"] }}"
+            >
+{#                <option {{ filter.resolution == "n/a" ? "selected" }}#}
+{#                        value="">n/a</option>#}
+{#                <option {{ filter.resolution == "720p" ? "selected" }}#}
+{#                        value="720p">720p</option>#}
+{#                <option {{ filter.resolution == "1080p" ? "selected" }}#}
+{#                        value="1080p">1080p</option>#}
+{#                <option {{ filter.resolution == "2160p" ? "selected" }}#}
+{#                        value="2160p">2160p</option>#}
+            </select>
+        </label>
+        <label for="codec">
+            Codec
+            <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-md">
+{#                <option {{ filter.codec == "n/a" ? "selected" }}#}
+{#                        value="">n/a</option>#}
+{#                <option {{ filter.codec == "-" ? "selected" }}#}
+{#                        value="-">-</option>#}
+{#                <option {{ filter.codec == "h264" ? "selected" }}#}
+{#                        value="h264">h264</option>#}
+{#                <option {{ filter.codec == "h265" ? "selected" }}#}
+{#                        value="h265">h265/HEVC</option>#}
+            </select>
+        </label>
+        <label for="language">
+            Language
+            <select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
+                <option selected value="{{ filter.language }}">{{ filter.language }}</option>
+            </select>
+        </label>
+        <label for="provider">
+            Provider
+            <select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
+                <option selected value="">n/a</option>
+            </select>
+        </label>
+        {% if results.media.mediaType == "tvshows" %}
+            <label for="season">
+                Season
+                <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
+                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}>
+                    <option selected value="1">1</option>
+                    {% for season in range(2, results.media.episodes|length) %}
+                        <option value="{{ season }}">{{ season }}</option>
+                    {% endfor %}
+                </select>
+            </label>
+            {#                        <label for="episodeNumber">#}
+            {#                            Episode#}
+            {#                            <select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">#}
+            {#                                <option selected value="">n/a</option>#}
+            {#                            </select>#}
+            {#                        </label>#}
+        {% endif %}
+        <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+            class="loading-icon"
+        >
+            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
+        </span>
+    </div>
+
+    {% if results.media.mediaType == "tvshows" %}
+        <div class="flex flex-row gap-2 justify-end px-8">
+            <button class="px-1.5 py-1 bg-green-600 rounded-md text-sm"
+                    {{ stimulus_target('result_filter', 'downloadSelected') }}
+                    {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
+            >Download Selected</button>
+            <input type="checkbox" name="selectAll" id="selectAll"
+                    {{ stimulus_target('result_filter', 'selectAll') }}
+                    {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
+            />
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/templates/search/partial/filter.html.twig b/templates/search/partial/filter.html.twig
index 2de9e58..a85269b 100644
--- a/templates/search/partial/filter.html.twig
+++ b/templates/search/partial/filter.html.twig
@@ -8,7 +8,11 @@
     <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
         <label for="resolution">
             Resolution
-            <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
+            <select id="resolution"
+                    data-result-filter-target="resolution"
+                    class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
+                    value="{{ app.user.userPreferenceValues["resolution"] }}"
+            >
                 <option {{ filter.resolution == "n/a" ? "selected" }}
                         value="">n/a</option>
                 <option {{ filter.resolution == "720p" ? "selected" }}
diff --git a/templates/search/result.html.twig b/templates/search/result.html.twig
index 157298a..3b790da 100644
--- a/templates/search/result.html.twig
+++ b/templates/search/result.html.twig
@@ -19,7 +19,7 @@
                     </div>
                 </div>
 
-                {{ include('search/partial/filter.html.twig') }}
+                <twig:Filter results="{{ results }}" filter="{{ filter }}" />
 
                 {% if "movies" == results.media.mediaType %}
                 <div class="results" {{ stimulus_controller('movie_results', {title: results.media.title, tmdbId: results.media.tmdbId, imdbId: results.media.imdbId}) }}>