diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd8d9648..ad57e7c4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -98,6 +98,7 @@
     "smhd",
     "socketio",
     "sstr",
+    "SUPPRESSHELP",
     "tebibytes",
     "tiktok",
     "timespec",
diff --git a/app/library/Utils.py b/app/library/Utils.py
index 9cf1c146..26257ad4 100644
--- a/app/library/Utils.py
+++ b/app/library/Utils.py
@@ -43,7 +43,21 @@ REMOVE_KEYS: list = [
         "progress_template": "--progress-template",
         "consoletitle": "--console-title",
         "progress_with_newline": "--newline",
-        "forcejson": "-j, --dump-json",
+        "forcejson": "-j, --dump-single-json",
+        "opt_update_to": "--update-to",
+        "opt_ap_list_mso": "--ap-list-mso",
+        "opt_batch_file": "-a, --batch-file",
+        "opt_alias": "--alias",
+        "opt_list_extractors": "--list-extractors",
+        "opt_version": "--version",
+        "opt_help": "-h, --help",
+        "opt_update": "-U, --update",
+        "opt_list_subtitles": "--list-subs",
+        "opt_list_thumbnails": "--list-thumbnails",
+        "opt_list_format": "-F, --list-formats",
+        "opt_dump_agent": "--dump-user-agent",
+        "opt_extractor_descriptions": "--extractor-descriptions",
+        "opt_list_impersonate_targets": "--list-impersonate-targets"
     },
 ]
 
diff --git a/app/library/ytdlp.py b/app/library/ytdlp.py
index 5dae3510..ecbc61e9 100644
--- a/app/library/ytdlp.py
+++ b/app/library/ytdlp.py
@@ -1,3 +1,7 @@
+from __future__ import annotations
+
+from typing import Any
+
 import yt_dlp
 
 import app.postprocessors  # noqa: F401
@@ -12,3 +16,44 @@ class YTDLP(yt_dlp.YoutubeDL):
             return None
 
         return super()._delete_downloaded_files(*args, **kwargs)
+
+
+def ytdlp_options() -> list[dict[str, Any]]:
+    """
+    Collect yt-dlp options and return them in a structured format.
+
+    Returns:
+        list[dict[str, Any]]: A list of dictionaries containing option flags, descriptions,
+
+    """
+    from yt_dlp.options import create_parser
+
+    from app.library.Utils import REMOVE_KEYS
+
+    parser = create_parser()
+
+    ignored_flags: set[str] = {
+        f.strip() for group in REMOVE_KEYS for v in group.values() for f in v.split(",") if f.strip()
+    }
+
+    def collect(opts, group: str) -> list[dict[str, Any]]:
+        return [
+            {
+                "flags": list(getattr(opt, "_short_opts", [])) + list(getattr(opt, "_long_opts", [])),
+                "description": getattr(opt, "help", None),
+                "group": group,
+                "ignored": any(
+                    f in ignored_flags for f in getattr(opt, "_short_opts", []) + getattr(opt, "_long_opts", [])
+                ),
+            }
+            for opt in opts
+            if (
+                (getattr(opt, "_short_opts", []) or getattr(opt, "_long_opts", []))
+                and getattr(opt, "help", None)
+                and "SUPPRESSHELP" not in getattr(opt, "help", "")
+            )
+        ]
+
+    return collect(parser.option_list, "root") + [
+        entry for grp in parser.option_groups for entry in collect(grp.option_list, grp.title or "other")
+    ]
diff --git a/app/routes/api/yt_dlp.py b/app/routes/api/yt_dlp.py
index ca7c2677..49291c20 100644
--- a/app/routes/api/yt_dlp.py
+++ b/app/routes/api/yt_dlp.py
@@ -296,3 +296,19 @@ async def archive_recheck(cache: Cache) -> Response:
             response.append({id: bool(data.get("id", None)) if isinstance(data, dict) else False})
 
     return web.json_response(data=response, status=web.HTTPOk.status_code)
+
+
+@route("GET", "api/yt-dlp/options/", "get_options")
+async def get_options() -> Response:
+    """
+    Get the yt-dlp CLI options.
+
+    Returns:
+        Response: The response object with the yt-dlp CLI options.
+
+    """
+    from app.library.ytdlp import ytdlp_options
+
+    return web.json_response(
+        body=json.dumps(ytdlp_options(), indent=4, default=str), status=web.HTTPOk.status_code
+    )
diff --git a/ui/app/assets/css/style.css b/ui/app/assets/css/style.css
index e2b67b87..f4db7fe0 100644
--- a/ui/app/assets/css/style.css
+++ b/ui/app/assets/css/style.css
@@ -357,3 +357,10 @@ table.is-fixed {
 div.is-centered {
   justify-content: center;
 }
+
+
+.modal-content-max {
+  width: max-content;
+  padding: 0;
+  margin: 0;
+}
diff --git a/ui/app/components/ConditionForm.vue b/ui/app/components/ConditionForm.vue
index 4ede9228..ee1edaa7 100644
--- a/ui/app/components/ConditionForm.vue
+++ b/ui/app/components/ConditionForm.vue
@@ -59,7 +59,7 @@
                     <input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress"
                       placeholder="For the problematic channel or video name.">
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>The name that refers to this condition.</span>
                   </span>
@@ -81,7 +81,7 @@
                     <input type="text" class="input" id="filter" v-model="form.filter" :disabled="addInProgress"
                       placeholder="availability = 'needs_auth' & channel_id = 'channel_id'">
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>yt-dlp <code>[--match-filters]</code> logic.</span>
                   </span>
@@ -92,19 +92,20 @@
                 <div class="field">
                   <label class="label is-inline" for="cli_options">
                     <span class="icon"><i class="fa-solid fa-terminal" /></span>
-                    Command options for yt-dlp
+                    <span>
+                      Command options for yt-dlp -
+                      <NuxtLink @click="showOptions = true" v-text="'View Options'" />
+                    </span>
                   </label>
                   <div class="control">
                     <textarea class="textarea is-pre" v-model="form.cli" id="cli_options" :disabled="addInProgress"
                       placeholder="command options to use, e.g. --proxy 1.2.3.4:3128" />
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>If the filter is matched, these options will be used.
-                      <span class="has-text-danger">This will override the command options for yt-dlp given with the
-                        URL. it's recommended to use presets and keep that field with url empty if you plan to use this
-                        feature.</span>
-                    </span>
+                    <span>Not all options are supported <NuxtLink target="_blank"
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
+                        ignored</NuxtLink>. Use with caution.</span>
                   </span>
                 </div>
               </div>
@@ -202,6 +203,9 @@
         </form>
       </Modal>
     </div>
+    <Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
+      <YTDLPOptions />
+    </Modal>
   </main>
 </template>
 
@@ -233,6 +237,7 @@ const test_data = ref<{
   changed: boolean,
   data: { status: boolean | null, data: Record<string, any> }
 }>({ show: false, url: '', in_progress: false, changed: false, data: { status: null, data: {} } })
+const showOptions = ref<boolean>(false)
 
 watch(() => form.filter, () => test_data.value.changed = true)
 
diff --git a/ui/app/components/DLInput.vue b/ui/app/components/DLInput.vue
index e06797cc..d927ef2a 100644
--- a/ui/app/components/DLInput.vue
+++ b/ui/app/components/DLInput.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="field">
     <label :for="`dlf-${id}`" class="label is-unselectable">
-      <span v-if="icon" class="icon"><i :class="icon" /></span>
-      <span v-tooltip="field ? `yt-dlp option: ${field}` : null" :class="{ 'has-tooltip': field }">{{ label }}</span>
+      <template v-if="$slots.title">
+        <slot name="title"></slot>
+      </template>
+      <template v-else>
+        <span v-if="icon" class="icon"><i :class="icon" /></span>
+        <span v-tooltip="field ? `yt-dlp option: ${field}` : null" :class="{ 'has-tooltip': field }">{{ label }}</span>
+      </template>
     </label>
     <div class="control is-expanded" v-if="'string' === type">
       <input :id="`dlf-${id}`" :type="type" class="input" v-model="model" :placeholder="placeholder"
diff --git a/ui/app/components/Modal.vue b/ui/app/components/Modal.vue
index 3fa0e8e9..0f04cbcb 100644
--- a/ui/app/components/Modal.vue
+++ b/ui/app/components/Modal.vue
@@ -1,9 +1,14 @@
+<style>
+.model-content {
+  width: 70vw;
+}
+</style>
 <template>
   <div>
     <div class="modal is-active">
       <div class="model-title" v-if="title" />
       <div class="modal-background" @click="emitter('close')"></div>
-      <div class="modal-content" style="width:70vw;">
+      <div class="modal-content" :class="contentClass">
         <slot />
       </div>
       <button class="modal-close is-large" aria-label="close" @click="emitter('close')"></button>
@@ -22,6 +27,11 @@ defineProps({
     default: '',
     required: false,
   },
+  contentClass: {
+    type: String,
+    default: '',
+    required: false,
+  },
 })
 
 const handle_event = (e: KeyboardEvent) => {
diff --git a/ui/app/components/NewDownload.vue b/ui/app/components/NewDownload.vue
index 1ee4760f..da6f2d1e 100644
--- a/ui/app/components/NewDownload.vue
+++ b/ui/app/components/NewDownload.vue
@@ -118,16 +118,18 @@
             <div class="column is-6-tablet is-12-mobile">
               <DLInput id="cli_options" type="text" label="Command options for yt-dlp" v-model="form.cli"
                 icon="fa-solid fa-terminal" :disabled="!socket.isConnected || addInProgress">
+                <template #title>
+                  <span class="icon"><i class="fa-solid fa-terminal" /></span>
+                  <span>Command options for yt-dlp -
+                    <NuxtLink @click="showOptions = true" v-text="'View Options'" />
+                  </span>
+                </template>
                 <template #help>
                   <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>Check <NuxtLink target="_blank" to="https://github.com/yt-dlp/yt-dlp#general-options">this
-                        page</NuxtLink> for more info. <span class="has-text-danger">Not all options are supported
-                        <NuxtLink target="_blank"
-                          to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26-L48">some are
-                          ignored</NuxtLink>. Use with caution these options can break yt-dlp or the frontend.
-                      </span>
-                    </span>
+                    <span>Not all options are supported <NuxtLink target="_blank"
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
+                        ignored</NuxtLink>. Use with caution.</span>
                   </span>
                 </template>
               </DLInput>
@@ -230,6 +232,9 @@
       @cancel="() => dialog_confirm.visible = false" />
 
     <DLFields v-if="showFields" @cancel="() => showFields = false" />
+    <Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
+      <YTDLPOptions />
+    </Modal>
   </main>
 </template>
 
@@ -252,10 +257,11 @@ const showAdvanced = useStorage<boolean>('show_advanced', false)
 const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
 const auto_start = useStorage<boolean>('auto_start', true)
 const show_description = useStorage<boolean>('show_description', true)
+const dlFields = useStorage<Record<string, any>>('dl_fields', {})
 
 const addInProgress = ref<boolean>(false)
 const showFields = ref<boolean>(false)
-const dlFields = useStorage<Record<string, any>>('dl_fields', {})
+const showOptions = ref<boolean>(false)
 const dlFieldsExtra = ['--no-download-archive']
 
 const form = useStorage<item_request>('local_config_v1', {
diff --git a/ui/app/components/PresetForm.vue b/ui/app/components/PresetForm.vue
index 4b33b200..1d48fc05 100644
--- a/ui/app/components/PresetForm.vue
+++ b/ui/app/components/PresetForm.vue
@@ -96,7 +96,7 @@
                   <div class="control">
                     <input type="text" class="input" id="name" v-model="form.name" :disabled="addInProgress">
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>The name to refers to this preset of settings.</span>
                   </span>
@@ -113,7 +113,7 @@
                     <input type="text" class="input" id="folder" placeholder="Leave empty to use default download path"
                       v-model="form.folder" :disabled="addInProgress" list="folders">
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>Use this folder if non is given with URL. Leave empty to use default download path. Default
                       download path <code>{{ config.app.download_path }}</code>.</span>
@@ -131,7 +131,7 @@
                     <input type="text" class="input" id="output_template" :disabled="addInProgress"
                       placeholder="Leave empty to use default template." v-model="form.template">
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>Use this output template if non are given with URL. if not set, it will defaults to
                       <code>{{ config.app.output_template }}</code>.
@@ -146,20 +146,19 @@
               <div class="column is-6-tablet is-12-mobile">
                 <div class="field">
                   <label class="label is-inline" for="cli_options">
-                    <span class="icon"><i class="fa-solid fa-terminal" /></span>
-                    Command options for yt-dlp
+                    <span>Command options for yt-dlp -
+                      <NuxtLink @click="showOptions = true" v-text="'View Options'" />
+                    </span>
                   </label>
                   <div class="control">
                     <textarea class="textarea is-pre" v-model="form.cli" id="cli_options" :disabled="addInProgress"
                       placeholder="command options to use, e.g. --no-embed-metadata --no-embed-thumbnail" />
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span>yt-dlp cli arguments. Check <NuxtLink target="_blank"
-                        to="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#general-options">this page</NuxtLink>.
-                      For more info. <span class="has-text-danger">Not all options are supported some are ignored. Use
-                        with caution those arguments can break yt-dlp or the frontend.</span>
-                    </span>
+                    <span>Not all options are supported <NuxtLink target="_blank"
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
+                        ignored</NuxtLink>. Use with caution.</span>
                   </span>
                 </div>
               </div>
@@ -174,7 +173,7 @@
                     <textarea class="textarea is-pre" id="cookies" v-model="form.cookies" :disabled="addInProgress"
                       placeholder="Leave empty to use default cookies" />
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>Use this cookies if non are given with the URL. Use the <NuxtLink target="_blank"
                         to="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp">
@@ -195,7 +194,7 @@
                     <textarea class="textarea" id="description" v-model="form.description" :disabled="addInProgress"
                       placeholder="Extras instructions for users to follow" />
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
                     <span>Use this field to help users to understand how to use this preset.</span>
                   </span>
@@ -227,6 +226,10 @@
     <datalist id="folders" v-if="config?.folders">
       <option v-for="dir in config.folders" :key="dir" :value="dir" />
     </datalist>
+
+    <Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
+      <YTDLPOptions />
+    </Modal>
   </main>
 </template>
 
@@ -252,6 +255,7 @@ const form = reactive<Preset>(JSON.parse(JSON.stringify(props.preset)))
 const import_string = ref<string>('')
 const showImport = useStorage<boolean>('showImport', false)
 const selected_preset = ref<string>('')
+const showOptions = ref<boolean>(false)
 
 const checkInfo = async (): Promise<void> => {
   for (const key of ['name']) {
diff --git a/ui/app/components/TaskForm.vue b/ui/app/components/TaskForm.vue
index 02205c4a..a37425c9 100644
--- a/ui/app/components/TaskForm.vue
+++ b/ui/app/components/TaskForm.vue
@@ -234,20 +234,20 @@
                 <div class="field">
                   <label class="label is-inline" for="cli_options">
                     <span class="icon"><i class="fa-solid fa-terminal" /></span>
-                    Command options for yt-dlp
+                    <span>Command options for yt-dlp -
+                      <NuxtLink @click="showOptions = true" v-text="'View Options'" />
+                    </span>
                   </label>
                   <div class="control">
                     <textarea type="text" class="textarea is-pre" v-model="form.cli" id="cli_options"
                       :disabled="addInProgress"
                       placeholder="command options to use, e.g. --no-embed-metadata --no-embed-thumbnail" />
                   </div>
-                  <span class="help">
+                  <span class="help is-bold">
                     <span class="icon"><i class="fa-solid fa-info" /></span>
-                    <span class="is-bold">yt-dlp cli arguments. Check <NuxtLink target="_blank"
-                        to="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#general-options">this page</NuxtLink>.
-                      For more info. <span class="has-text-danger">Not all options are supported some are ignored. Use
-                        with caution those arguments can break yt-dlp or the frontend.</span>
-                    </span>
+                    <span>Not all options are supported <NuxtLink target="_blank"
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26">some are
+                        ignored</NuxtLink>. Use with caution.</span>
                   </span>
                 </div>
               </div>
@@ -297,6 +297,9 @@
     <datalist id="folders" v-if="config?.folders">
       <option v-for="dir in config.folders" :key="dir" :value="dir" />
     </datalist>
+    <Modal v-if="showOptions" @close="showOptions = false" :contentClass="'modal-content-max'">
+      <YTDLPOptions />
+    </Modal>
   </main>
 </template>
 
@@ -324,6 +327,7 @@ const showImport = useStorage('showImport', false)
 
 const convertInProgress = ref<boolean>(false)
 const import_string = ref<string>('')
+const showOptions = ref<boolean>(false)
 
 const CHANNEL_REGEX = /^https?:\/\/(?:www\.)?youtube\.com\/(?:(?:channel\/(?<channelId>UC[0-9A-Za-z_-]{22}))|(?:c\/(?<customName>[A-Za-z0-9_-]+))|(?:user\/(?<userName>[A-Za-z0-9_-]+))|(?:@(?<handle>[A-Za-z0-9_-]+)))(?<suffix>\/.*)?\/?$/
 
diff --git a/ui/app/components/YTDLPOptions.vue b/ui/app/components/YTDLPOptions.vue
new file mode 100644
index 00000000..5ca1470b
--- /dev/null
+++ b/ui/app/components/YTDLPOptions.vue
@@ -0,0 +1,285 @@
+<!-- ui/app/pages/options.vue -->
+<template>
+  <div class="p-1 container" style="border-radius: 0; padding:0">
+
+    <div class="box m-2">
+      <div class="columns is-multiline is-vcentered">
+        <div class="column is-12 is-6-desktop">
+          <label class="label is-small">Search</label>
+          <div class="control has-icons-left">
+            <input v-model.trim="filters.query" type="text" class="input" placeholder="Filter by flag or description..."
+              autocomplete="off" />
+            <span class="icon is-left"><i class="fa-solid fa-magnifying-glass" /></span>
+          </div>
+        </div>
+
+        <div class="column is-6-tablet is-3-desktop">
+          <label class="label is-small">Group Filter</label>
+          <div class="select is-fullwidth">
+            <select v-model="filters.group">
+              <option value="">All</option>
+              <option v-for="g in groupNames" :key="g" :value="g">{{ g }}</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="column is-6-tablet is-3-desktop">
+          <label class="label is-small">Display</label>
+          <div class="control">
+            <div class="select is-fullwidth">
+              <select v-model="displayMode">
+                <option value="grouped">Grouped</option>
+                <option value="list">List</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="column is-6-tablet is-3-desktop">
+          <label class="label is-small">Sort By</label>
+          <div class="select is-fullwidth">
+            <select v-model="sortBy">
+              <option value="flag">Flag</option>
+              <option value="group">Group</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="column is-6-tablet is-3-desktop">
+          <label class="label is-small">Order</label>
+          <div class="select is-fullwidth">
+            <select v-model="sortDir">
+              <option value="asc">Asc</option>
+              <option value="desc">Desc</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="column is-12 is-6-desktop">
+          <label class="label is-small">Flags</label>
+          <div class="buttons are-small">
+            <button class="button" :class="{ 'is-link': filters.flagKind === 'any' }"
+              @click="filters.flagKind = 'any'">Any</button>
+            <button class="button" :class="{ 'is-link': filters.flagKind === 'short' }"
+              @click="filters.flagKind = 'short'">Short Only (-x)</button>
+            <button class="button" :class="{ 'is-link': filters.flagKind === 'long' }"
+              @click="filters.flagKind = 'long'">Long Only (--xyz)</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="0 === visible.length" class="has-text-centered has-text-grey">
+      <p>No options match your criteria.</p>
+    </div>
+
+    <template v-if="'grouped' === displayMode && 0 !== grouped.length">
+      <section v-for="group in grouped" :key="group.name" class="m-2 mb-5">
+        <h2 class="title is-6 mb-3">
+          <span class="icon-text">
+            <span class="icon"><i class="fa-regular fa-folder-open" /></span>
+            <span>{{ group.name }} <small class="has-text-grey">({{ group.items.length }})</small></span>
+          </span>
+        </h2>
+        <div class="table-container">
+          <table class="table is-fullwidth is-striped is-hoverable is-bordered">
+            <thead>
+              <tr>
+                <th style="width: 30%">Flags</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="opt in group.items" :key="opt.flags.join('|')">
+                <tr v-if="!opt.ignored">
+                  <td>
+                    <i class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
+                      @click="copyFlag(opt.flags)" />
+                    <div class="is-flex is-align-items-center">
+                      <div class="tags">
+                        <span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    <span v-if="opt.description && 0 !== opt.description.length">{{ opt.description }}</span>
+                    <span v-else class="has-text-grey">—</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </template>
+
+    <template v-else>
+      <div class="table-container">
+        <table class="table is-fullwidth is-striped is-hoverable is-bordered m-2">
+          <thead>
+            <tr>
+              <th style="width: 30%">Flags</th>
+              <th style="width: 20%">Group</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="opt in visible" :key="opt.flags.join('|')">
+              <tr v-if="!opt.ignored">
+                <td>
+                  <i class="has-text-primary is-pointer is-pulled-right fa-regular fa-copy is-unselectable"
+                    @click="copyFlag(opt.flags)" />
+                  <div class="is-flex is-align-items-center">
+                    <div class="tags">
+                      <span v-for="f in opt.flags" :key="f" class="tag is-info">{{ f }}</span>
+                    </div>
+                  </div>
+                </td>
+                <td class="is-bold">
+                  {{ opt.group || 'root' }}
+                </td>
+                <td>
+                  <span v-if="opt.description && 0 !== opt.description.length">{{ opt.description }}</span>
+                  <span v-else class="has-text-grey">—</span>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+
+type YTDLPOption = {
+  flags: string[],
+  description: string | null,
+  group: string | null,
+  ignored: boolean,
+}
+
+const isLoading = ref(false)
+const options = ref<YTDLPOption[]>([])
+const displayMode = useStorage<'grouped' | 'list'>('opts_display', 'grouped')
+const sortBy = useStorage<'flag' | 'group'>('opts_sort_by', 'flag')
+const sortDir = useStorage<'asc' | 'desc'>('opts_sort_dir', 'asc')
+
+const filters = reactive({
+  query: '',
+  group: '',
+  flagKind: 'any' as 'any' | 'short' | 'long',
+})
+
+const reload = async (): Promise<void> => {
+  try {
+    isLoading.value = true
+    const resp = await request('/api/yt-dlp/options', { credentials: 'include' })
+    if (!resp.ok) {
+      return
+    }
+    const data = await resp.json()
+    if (Array.isArray(data)) {
+      options.value = data as YTDLPOption[]
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const copyFlag = async (flags: string[]): Promise<void> => {
+  const longFlag = flags.find(f => f.startsWith('--'))
+  if (!longFlag) {
+    return
+  }
+  copyText(longFlag)
+}
+
+onMounted(async () => await reload())
+
+const groupNames = computed<string[]>(() => {
+  const s = new Set<string>()
+  for (const o of options.value) {
+    s.add(o.group || 'root')
+  }
+  return Array.from(s).sort((a, b) => a.localeCompare(b))
+})
+
+const filtered = computed<YTDLPOption[]>(() => {
+  const q = filters.query.toLowerCase()
+  const g = filters.group
+
+  return options.value.filter((o) => {
+    if (g && (o.group || 'root') !== g) {
+      return false
+    }
+
+    if ('short' === filters.flagKind && !o.flags.some((f) => /^-\w(,|$)|^-\w$/.test(f))) {
+      return false
+    }
+
+    if ('long' === filters.flagKind && !o.flags.some((f) => /^--[a-zA-Z0-9][\w-]*/.test(f))) {
+      return false
+    }
+
+    if (0 !== q.length) {
+      const hay = [o.flags.join(' '), o.description || '', o.group || 'root'].join(' ').toLowerCase()
+      if (-1 === hay.indexOf(q)) {
+        return false
+      }
+    }
+
+    return true
+  })
+})
+
+const sorted = computed<YTDLPOption[]>(() => {
+  const dir = 'asc' === sortDir.value ? 1 : -1
+  const arr = [...filtered.value]
+
+  arr.sort((a, b) => {
+    if ('group' === sortBy.value) {
+      const ga = (a.group || 'root').localeCompare(b.group || 'root')
+      if (0 !== ga) {
+        return ga * dir
+      }
+    }
+
+    const fa = (a.flags[0] || '').localeCompare(b.flags[0] || '')
+    return fa * dir
+  })
+
+  return arr
+})
+
+const visible = computed<YTDLPOption[]>(() => sorted.value)
+
+const grouped = computed<{ name: string, items: YTDLPOption[] }[]>(() => {
+  const map = new Map<string, YTDLPOption[]>()
+
+  for (const o of visible.value) {
+    const key = o.group || 'root'
+    if (!map.has(key)) {
+      map.set(key, [])
+    }
+    map.get(key)!.push(o)
+  }
+
+  const out = Array.from(map.entries()).map(([name, items]) => {
+    items.sort((a, b) => (a.flags[0] || '').localeCompare(b.flags[0] || ''))
+    return { name, items }
+  })
+
+  out.sort((a, b) => a.name.localeCompare(b.name))
+  return out
+})
+</script>
+
+<style scoped>
+.table td,
+.table th {
+  vertical-align: top;
+}
+</style>