diff --git a/README.md b/README.md
index 0ab35d1..85e0e9c 100644
--- a/README.md
+++ b/README.md
@@ -211,6 +211,11 @@ Access Logs use the shared table pagination controls with 15 rows by default and
 15, 25, 50 and 100. Filtering and paging run in the controller. Changing filters or page size,
 or choosing Refresh, starts again on the first page.
 
+The searchable host dropdown includes configured domains and hosts found in the retained
+log scan. The status dropdown lists status codes found in that scan. General search matches
+host, method, or path and applies after a short typing pause; Apply filters also applies the
+current host and status selection immediately.
+
 Each result has a short-lived snapshot so new requests and log rotation cannot move rows
 between pages. Snapshots expire after two minutes and may be evicted sooner under load; the
 UI announces a reset and returns to the first page. Refresh loads the latest logs. The controller
@@ -218,6 +223,12 @@ keeps at most eight snapshots within a 16 MiB cache. They are temporary, are los
 and are excluded from backups. The existing bounded log scan and visible truncation notice
 still apply; pagination does not promise access to logs beyond that retained window.
 
+Access logs render a country flag when the stored entry supplies a country code.
+The web service and UI do not perform GeoIP lookups. Unknown countries have no flag.
+Country flags in access logs and language settings use
+[country-flag-icons](https://github.com/catamphetamine/country-flag-icons) under the MIT license.
+Language flags do not depend on a GeoIP database.
+
 ### Certificates requested from proxy hosts
 
 Create and Edit offer a new ACME certificate using the host's domains. The host row also
diff --git a/bun.lock b/bun.lock
index eaab4c5..91feb69 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "@tanstack/react-router": "1.170.35",
         "@tanstack/react-start": "1.168.52",
         "@tanstack/react-table": "9.2.4",
+        "country-flag-icons": "1.6.20",
         "drizzle-orm": "0.45.2",
         "i18next": "26.4.2",
         "i18next-resources-to-backend": "1.2.3",
@@ -608,6 +609,8 @@
 
     "cookie-es": ["cookie-es@3.1.1", "", {}, "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg=="],
 
+    "country-flag-icons": ["country-flag-icons@1.6.20", "", {}, "sha512-py8JiEKzjhYw6HPJ0L7SxLgCYim36UPRTZX43/kqGueUCZLSvnrqAiwW8HtQibur7mdkFQUkjOgdK+o/9FBtaw=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
diff --git a/controller/src/runtime/access_logs.rs b/controller/src/runtime/access_logs.rs
index 9ab6b4b..c39ccd3 100644
--- a/controller/src/runtime/access_logs.rs
+++ b/controller/src/runtime/access_logs.rs
@@ -17,6 +17,7 @@ pub(crate) const MAX_SNAPSHOTS: usize = 8;
 pub(crate) const MAX_SNAPSHOT_BYTES: usize = 16 * 1024 * 1024;
 pub(crate) const MAX_SINGLE_SNAPSHOT_BYTES: usize = MAX_LOG_BYTES;
 const MAX_SNAPSHOT_ID: usize = 64;
+const MAX_AVAILABLE_HOSTS: usize = MAX_RECORDS;
 const MAX_PATH: usize = 2048;
 const MAX_HOST: usize = 253;
 const MAX_METHOD: usize = 32;
@@ -139,6 +140,10 @@ pub(crate) struct AccessLogResponse {
     pub limit: usize,
     pub offset: usize,
     pub total: usize,
+    #[serde(rename = "availableHosts")]
+    pub available_hosts: Vec<String>,
+    #[serde(rename = "availableStatuses")]
+    pub available_statuses: Vec<u16>,
     #[serde(rename = "hasMore")]
     pub has_more: bool,
     pub truncated: bool,
@@ -165,6 +170,15 @@ pub(crate) struct AccessLogEntry {
     pub protocol: String,
 }
 
+fn bounded_available_hosts(hosts: impl IntoIterator<Item = String>) -> Vec<String> {
+    let mut bounded = hosts
+        .into_iter()
+        .take(MAX_AVAILABLE_HOSTS)
+        .collect::<Vec<_>>();
+    bounded.shrink_to_fit();
+    bounded
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub(super) struct SnapshotQuery {
     host: Option<String>,
@@ -269,6 +283,11 @@ fn matches_query(entry: &AccessLogEntry, query: &ValidatedAccessLogQuery) -> boo
         .is_none_or(|host| entry.host.eq_ignore_ascii_case(host))
         && query.status.is_none_or(|status| entry.status == status)
         && query.search.as_ref().is_none_or(|search| {
+            let search = search.trim();
+            if search.is_empty() {
+                return true;
+            }
+            let search = search.to_ascii_lowercase();
             [
                 entry.host.as_str(),
                 entry.method.as_str(),
@@ -278,7 +297,7 @@ fn matches_query(entry: &AccessLogEntry, query: &ValidatedAccessLogQuery) -> boo
                 entry.upstream.as_deref().unwrap_or(""),
             ]
             .into_iter()
-            .any(|field| field.contains(search))
+            .any(|field| field.to_ascii_lowercase().contains(&search))
         })
 }
 
diff --git a/controller/src/runtime/access_logs/cache.rs b/controller/src/runtime/access_logs/cache.rs
index 42cfa83..59ce7a7 100644
--- a/controller/src/runtime/access_logs/cache.rs
+++ b/controller/src/runtime/access_logs/cache.rs
@@ -25,6 +25,8 @@ struct CachedSnapshot {
     entries: Vec<AccessLogEntry>,
     total: usize,
     truncated: bool,
+    available_hosts: Vec<String>,
+    available_statuses: Vec<u16>,
     expires_at: Instant,
     expires_at_utc: String,
     bytes: usize,
@@ -88,6 +90,8 @@ impl SnapshotCache {
         let bytes = snapshot_memory_bytes(
             capture_query,
             &capture.entries,
+            &capture.available_hosts,
+            &capture.available_statuses,
             snapshot_id.capacity(),
             expires_at_utc.capacity(),
         );
@@ -111,6 +115,8 @@ impl SnapshotCache {
             total: capture.entries.len(),
             entries: capture.entries,
             truncated: capture.truncated,
+            available_hosts: capture.available_hosts,
+            available_statuses: capture.available_statuses,
             expires_at,
             expires_at_utc,
             bytes,
@@ -183,6 +189,8 @@ fn page_response(
         limit: query.limit,
         offset: query.offset,
         total: snapshot.total,
+        available_hosts: snapshot.available_hosts.clone(),
+        available_statuses: snapshot.available_statuses.clone(),
         has_more,
         truncated: snapshot.truncated,
         snapshot: snapshot_id.to_owned(),
@@ -194,6 +202,8 @@ fn page_response(
 fn snapshot_memory_bytes(
     query: &ValidatedAccessLogQuery,
     entries: &Vec<AccessLogEntry>,
+    available_hosts: &[String],
+    available_statuses: &[u16],
     snapshot_id_capacity: usize,
     expires_at_capacity: usize,
 ) -> usize {
@@ -202,6 +212,10 @@ fn snapshot_memory_bytes(
         .saturating_add(snapshot_id_capacity)
         .saturating_add(expires_at_capacity)
         .saturating_add(query_memory_bytes(query))
+        .saturating_add(available_filters_memory_bytes(
+            available_hosts,
+            available_statuses,
+        ))
         .saturating_add(
             entries
                 .capacity()
@@ -239,9 +253,15 @@ pub(super) fn cap_snapshot_entries(
     entries: Vec<AccessLogEntry>,
     query: &ValidatedAccessLogQuery,
     mut truncated: bool,
+    available_hosts: &[String],
+    available_statuses: &[u16],
 ) -> (Vec<AccessLogEntry>, bool) {
     let base = SNAPSHOT_FIXED_BYTES
         .saturating_add(query_memory_bytes(query))
+        .saturating_add(available_filters_memory_bytes(
+            available_hosts,
+            available_statuses,
+        ))
         .saturating_add(SNAPSHOT_ID_BYTES * 2)
         .saturating_add(64);
     let mut used = base;
@@ -261,7 +281,8 @@ pub(super) fn cap_snapshot_entries(
     let mut bounded = Vec::with_capacity(keep);
     bounded.extend(entries.into_iter().take(keep));
     bounded.shrink_to_fit();
-    while snapshot_memory_bytes(query, &bounded, 64, 64) > MAX_SINGLE_SNAPSHOT_BYTES
+    while snapshot_memory_bytes(query, &bounded, available_hosts, available_statuses, 64, 64)
+        > MAX_SINGLE_SNAPSHOT_BYTES
         && !bounded.is_empty()
     {
         let next_len = bounded.len().saturating_sub(1);
@@ -271,6 +292,14 @@ pub(super) fn cap_snapshot_entries(
     (bounded, truncated)
 }
 
+fn available_filters_memory_bytes(hosts: &[String], statuses: &[u16]) -> usize {
+    hosts
+        .len()
+        .saturating_mul(size_of::<String>())
+        .saturating_add(hosts.iter().map(String::capacity).sum::<usize>())
+        .saturating_add(statuses.len().saturating_mul(size_of::<u16>()))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -303,11 +332,56 @@ mod tests {
             bytes: 0,
             protocol: "HTTP/2".into(),
         });
-        assert!(snapshot_memory_bytes(&query, &entries, 64, 64) > MAX_SINGLE_SNAPSHOT_BYTES);
-        let (bounded, truncated) = cap_snapshot_entries(entries, &query, false);
+        assert!(
+            snapshot_memory_bytes(&query, &entries, &[], &[], 64, 64) > MAX_SINGLE_SNAPSHOT_BYTES
+        );
+        let (bounded, truncated) = cap_snapshot_entries(entries, &query, false, &[], &[]);
         assert!(!truncated);
         assert_eq!(bounded.len(), 1);
-        assert!(snapshot_memory_bytes(&query, &bounded, 64, 64) < 4096);
+        assert!(snapshot_memory_bytes(&query, &bounded, &[], &[], 64, 64) < 4096);
+    }
+
+    #[test]
+    fn metadata_is_reserved_before_truncating_snapshot_entries() {
+        let query = query();
+        let hosts = (0..1000)
+            .map(|index| format!("host-{index}.{}.example", "a".repeat(200)))
+            .collect::<Vec<_>>();
+        let statuses = vec![200];
+        let entry = AccessLogEntry {
+            timestamp: "2026-09-13T00:00:00Z".into(),
+            host: "app.example".into(),
+            method: "GET".into(),
+            path: format!("/{}", "a".repeat(2047)),
+            status: 200,
+            duration_ms: 1,
+            client_ip: "192.0.2.1".into(),
+            upstream: None,
+            bytes: 0,
+            protocol: "HTTP/2".into(),
+        };
+        let (entries, truncated) =
+            cap_snapshot_entries(vec![entry; 2000], &query, false, &hosts, &statuses);
+        assert!(truncated);
+        assert!(!entries.is_empty());
+        let cache = SnapshotCache::new();
+        let response = cache
+            .insert(
+                &query,
+                &query,
+                CapturedLogs {
+                    entries,
+                    truncated,
+                    available_hosts: hosts,
+                    available_statuses: statuses,
+                },
+                false,
+                Instant::now(),
+            )
+            .unwrap();
+        assert_eq!(response.available_hosts.len(), 1000);
+        assert!(response.truncated);
+        assert!(cache.state.lock().unwrap().bytes <= MAX_SINGLE_SNAPSHOT_BYTES);
     }
 
     #[test]
@@ -323,6 +397,8 @@ mod tests {
                     CapturedLogs {
                         entries,
                         truncated: false,
+                        available_hosts: Vec::new(),
+                        available_statuses: Vec::new(),
                     },
                     false,
                     Instant::now(),
diff --git a/controller/src/runtime/access_logs/reader.rs b/controller/src/runtime/access_logs/reader.rs
index 8969107..718a1c8 100644
--- a/controller/src/runtime/access_logs/reader.rs
+++ b/controller/src/runtime/access_logs/reader.rs
@@ -1,5 +1,6 @@
 use std::{
     cmp::{Ordering, Reverse},
+    collections::BTreeSet,
     fs::{self, File},
     io::{ErrorKind, Read, Seek, SeekFrom},
     path::Path,
@@ -28,6 +29,8 @@ pub(crate) enum ReadError {
 pub(crate) struct CapturedLogs {
     pub(crate) entries: Vec<AccessLogEntry>,
     pub(crate) truncated: bool,
+    pub(crate) available_hosts: Vec<String>,
+    pub(crate) available_statuses: Vec<u16>,
 }
 
 struct IndexedEntry {
@@ -91,6 +94,8 @@ pub(crate) fn read_blocking(
         limit: query.limit,
         offset: query.offset,
         total,
+        available_hosts: capture.available_hosts,
+        available_statuses: capture.available_statuses,
         has_more: query.offset.saturating_add(page_len) < total,
         truncated: capture.truncated,
         snapshot: String::new(),
@@ -103,6 +108,8 @@ fn empty_capture() -> CapturedLogs {
     CapturedLogs {
         entries: Vec::new(),
         truncated: false,
+        available_hosts: Vec::new(),
+        available_statuses: Vec::new(),
     }
 }
 
@@ -153,6 +160,8 @@ fn read_snapshot_blocking(
     let mut scanned = 0usize;
     let mut truncated = inventory_truncated || file_limit_truncated;
     let mut matches = Vec::new();
+    let mut available_hosts = BTreeSet::new();
+    let mut available_statuses = BTreeSet::new();
     for (_, name) in files {
         if remaining == 0 || scanned >= MAX_RECORDS {
             truncated = true;
@@ -188,6 +197,8 @@ fn read_snapshot_blocking(
             let Some(entry) = parse_entry(&value, cutoff) else {
                 continue;
             };
+            available_hosts.insert(entry.host.clone());
+            available_statuses.insert(entry.status);
             if matches_query(&entry, query) {
                 matches.push(IndexedEntry {
                     timestamp_nanos: OffsetDateTime::parse(&entry.timestamp, &Rfc3339)
@@ -202,8 +213,21 @@ fn read_snapshot_blocking(
     }
     matches.sort_by(compare_indexed_entries);
     let matches = matches.into_iter().map(|indexed| indexed.entry).collect();
-    let (entries, truncated) = cap_snapshot_entries(matches, query, truncated);
-    Ok(CapturedLogs { entries, truncated })
+    let available_hosts = super::bounded_available_hosts(available_hosts);
+    let available_statuses = available_statuses.into_iter().collect::<Vec<_>>();
+    let (entries, truncated) = cap_snapshot_entries(
+        matches,
+        query,
+        truncated,
+        &available_hosts,
+        &available_statuses,
+    );
+    Ok(CapturedLogs {
+        entries,
+        truncated,
+        available_hosts,
+        available_statuses,
+    })
 }
 
 fn compare_indexed_entries(left: &IndexedEntry, right: &IndexedEntry) -> Ordering {
diff --git a/controller/src/runtime/access_logs/tests.rs b/controller/src/runtime/access_logs/tests.rs
index 29c41aa..b61497d 100644
--- a/controller/src/runtime/access_logs/tests.rs
+++ b/controller/src/runtime/access_logs/tests.rs
@@ -164,6 +164,32 @@ fn filters_and_pagination_report_filtered_indexes() {
     assert_eq!(response.entries[0].path, "/two");
 }
 
+#[test]
+fn search_matches_partial_host_without_returning_unrelated_rows() {
+    let state = TempState::new(true);
+    let now = OffsetDateTime::now_utc().unix_timestamp() as f64;
+    state.write(
+        "access.log",
+        &format!(
+            "{}\n{}\n",
+            line(now, "ts-laser.example", "/laser", 200, "laser"),
+            line(now, "other.example", "/other", 200, "other")
+        ),
+    );
+    let mut filtered = query(20, 0);
+    filtered.search = Some("ts-laser".into());
+
+    let response = read_blocking(state.path(), &filtered).unwrap();
+
+    assert_eq!(response.total, 1);
+    assert_eq!(response.entries[0].host, "ts-laser.example");
+    assert_eq!(
+        response.available_hosts,
+        vec!["other.example", "ts-laser.example"]
+    );
+    assert_eq!(response.available_statuses, vec![200]);
+}
+
 #[test]
 fn malformed_and_partial_lines_are_ignored() {
     let state = TempState::new(true);
@@ -336,6 +362,8 @@ fn snapshot_cache_expiry_is_fixed_and_evicts_lru_entries() {
             CapturedLogs {
                 entries: Vec::new(),
                 truncated: false,
+                available_hosts: Vec::new(),
+                available_statuses: Vec::new(),
             },
             false,
             now,
@@ -374,6 +402,8 @@ fn snapshot_cache_expiry_is_fixed_and_evicts_lru_entries() {
                     CapturedLogs {
                         entries: Vec::new(),
                         truncated: false,
+                        available_hosts: Vec::new(),
+                        available_statuses: Vec::new(),
                     },
                     false,
                     now,
@@ -392,6 +422,8 @@ fn snapshot_cache_expiry_is_fixed_and_evicts_lru_entries() {
             CapturedLogs {
                 entries: Vec::new(),
                 truncated: false,
+                available_hosts: Vec::new(),
+                available_statuses: Vec::new(),
             },
             false,
             now,
diff --git a/package.json b/package.json
index 2710232..36962bd 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "@tanstack/react-router": "1.170.35",
         "@tanstack/react-start": "1.168.52",
         "@tanstack/react-table": "9.2.4",
+        "country-flag-icons": "1.6.20",
         "drizzle-orm": "0.45.2",
         "i18next": "26.4.2",
         "i18next-resources-to-backend": "1.2.3",
diff --git a/web/public/images/flags/de.svg b/web/public/images/flags/de.svg
deleted file mode 100644
index c73090c..0000000
--- a/web/public/images/flags/de.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40">
-  <path d="M0 0h60v40H0z"/>
-  <path fill="#d00" d="M0 13.333h60V40H0z"/>
-  <path fill="#ffce00" d="M0 26.667h60V40H0z"/>
-</svg>
diff --git a/web/public/images/flags/en.svg b/web/public/images/flags/en.svg
deleted file mode 100644
index 33ff9ec..0000000
--- a/web/public/images/flags/en.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40">
-  <path fill="#012169" d="M0 0h60v40H0z"/>
-  <path stroke="#fff" stroke-width="9" d="m0 0 60 40M60 0 0 40"/>
-  <path stroke="#c8102e" stroke-width="3" d="m0 0 60 40M60 0 0 40"/>
-  <path fill="#fff" d="M24 0h12v40H24zM0 14h60v12H0z"/>
-  <path fill="#c8102e" d="M27 0h6v40h-6zM0 17h60v6H0z"/>
-</svg>
diff --git a/web/public/images/flags/es.svg b/web/public/images/flags/es.svg
deleted file mode 100644
index 5d78e58..0000000
--- a/web/public/images/flags/es.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40">
-  <path fill="#aa151b" d="M0 0h60v40H0z"/>
-  <path fill="#f1bf00" d="M0 10h60v20H0z"/>
-</svg>
diff --git a/web/public/images/flags/fr.svg b/web/public/images/flags/fr.svg
deleted file mode 100644
index 71cc823..0000000
--- a/web/public/images/flags/fr.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40">
-  <path fill="#002654" d="M0 0h20v40H0z"/>
-  <path fill="#fff" d="M20 0h20v40H20z"/>
-  <path fill="#ed2939" d="M40 0h20v40H40z"/>
-</svg>
diff --git a/web/src/config/language.config.ts b/web/src/config/language.config.ts
index b4f7ff1..4991216 100644
--- a/web/src/config/language.config.ts
+++ b/web/src/config/language.config.ts
@@ -21,11 +21,11 @@ export const LANGUAGE_LOCALES: Record<AppLanguage, string> = {
     fr: 'fr-FR',
 }
 
-export const FLAG_IMAGES: Record<AppLanguage, string> = {
-    en: '/images/flags/en.svg',
-    de: '/images/flags/de.svg',
-    es: '/images/flags/es.svg',
-    fr: '/images/flags/fr.svg',
+export const LANGUAGE_COUNTRY_CODES: Record<AppLanguage, string> = {
+    en: 'GB',
+    de: 'DE',
+    es: 'ES',
+    fr: 'FR',
 }
 
 export const PUBLIC_ENGLISH: Record<string, string> = {
diff --git a/web/src/features/Admin/ProxyAccessLogs/Components/ClientIpCountry.tsx b/web/src/features/Admin/ProxyAccessLogs/Components/ClientIpCountry.tsx
new file mode 100644
index 0000000..4614d67
--- /dev/null
+++ b/web/src/features/Admin/ProxyAccessLogs/Components/ClientIpCountry.tsx
@@ -0,0 +1,28 @@
+import { hasFlag } from 'country-flag-icons'
+import useTranslationStore from '../../../../language/useTranslationStore'
+import { Tooltip } from '../../../../shared/Tooltip'
+import type { ProxyAccessLogEntry } from '../../../../shared/Types/proxy-access-logs.types'
+
+export default function ClientIpCountry({ entry }: { readonly entry: ProxyAccessLogEntry }) {
+    const { locale } = useTranslationStore()
+    const code = entry.countryCode
+    const country =
+        code && /^[A-Z]{2}$/u.test(code) && hasFlag(code)
+            ? new Intl.DisplayNames([locale], { type: 'region' }).of(code)
+            : undefined
+
+    return (
+        <span className="inline-flex items-center gap-2 whitespace-nowrap">
+            {entry.clientIp}
+            {country && code ? (
+                <Tooltip content={country}>
+                    <span
+                        className={`flag:${code} shrink-0 rounded-[2px] [--CountryFlagIcon-height:1rem]`}
+                    >
+                        <span className="sr-only">{country}</span>
+                    </span>
+                </Tooltip>
+            ) : null}
+        </span>
+    )
+}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsHostFilter.tsx b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsHostFilter.tsx
new file mode 100644
index 0000000..69d95c9
--- /dev/null
+++ b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsHostFilter.tsx
@@ -0,0 +1,152 @@
+import { ChevronDown } from 'lucide-react'
+
+import useProxyAccessLogsHostFilter from '../Hooks/useProxyAccessLogsHostFilter'
+
+interface ProxyAccessLogsHostFilterProps {
+    readonly allHostsLabel: string
+    readonly ariaDescribedBy?: string | undefined
+    readonly invalid: boolean
+    readonly label: string
+    readonly noResultsLabel: string
+    readonly onChange: (value: string) => void
+    readonly options: readonly string[]
+    readonly placeholder: string
+    readonly searchPlaceholder: string
+    readonly value: string
+}
+
+const controlClassName =
+    'box-border inline-flex h-12 w-full min-w-0 items-center justify-between gap-2 rounded-xl border border-input-border bg-surface-raised px-3 text-left text-sm text-ink outline-hidden transition-[border-color,box-shadow,background-color] hover:border-border-strong focus:border-brand-600 focus:ring-[3px] focus:ring-brand-500/20 aria-invalid:border-red-500'
+const optionClassName =
+    'flex min-h-10 w-full cursor-pointer items-center rounded-lg px-3 py-2 text-left text-sm font-bold text-ink-soft transition-colors hover:bg-surface-hover focus:bg-surface-hover focus:outline-hidden'
+
+export default function ProxyAccessLogsHostFilter({
+    allHostsLabel,
+    ariaDescribedBy,
+    invalid,
+    label,
+    noResultsLabel,
+    onChange,
+    options,
+    placeholder,
+    searchPlaceholder,
+    value,
+}: ProxyAccessLogsHostFilterProps) {
+    const {
+        activeIndex,
+        filteredOptions,
+        handleOptionKeyDown,
+        handleSearchChange,
+        handleSearchKeyDown,
+        handleTriggerKeyDown,
+        listboxId,
+        open,
+        search,
+        setOptionRef,
+        setRootRef,
+        setSearchRef,
+        setTriggerRef,
+        selectOption,
+        toggle,
+    } = useProxyAccessLogsHostFilter({ onChange, options })
+
+    return (
+        <div ref={setRootRef} className="relative min-w-0">
+            <button
+                type="button"
+                ref={setTriggerRef}
+                id="proxy-log-host-filter"
+                aria-label={label}
+                aria-controls={open ? listboxId : undefined}
+                aria-describedby={ariaDescribedBy}
+                aria-expanded={open}
+                aria-haspopup="listbox"
+                className={`${controlClassName} ${invalid ? 'border-red-500' : ''}`}
+                onClick={toggle}
+                onKeyDown={handleTriggerKeyDown}
+            >
+                <span className={value ? 'truncate text-ink' : 'truncate text-muted-soft'}>
+                    {value || placeholder}
+                </span>
+                <ChevronDown
+                    aria-hidden="true"
+                    className={`size-4 shrink-0 text-muted transition-transform ${open ? 'rotate-180' : ''}`}
+                    strokeWidth={1.8}
+                />
+            </button>
+            {open ? (
+                <div className="absolute top-[calc(100%+0.4rem)] left-0 z-[70] max-h-[min(20rem,calc(100vh-1rem))] w-full min-w-64 overflow-y-auto rounded-xl border border-border bg-surface-raised p-1.5 text-ink shadow-panel outline-hidden">
+                    <div className="sticky top-0 z-10 bg-surface-raised p-1.5">
+                        <input
+                            ref={setSearchRef}
+                            type="search"
+                            aria-label={searchPlaceholder}
+                            aria-controls={listboxId}
+                            aria-autocomplete="list"
+                            value={search}
+                            placeholder={searchPlaceholder}
+                            onChange={(event) => handleSearchChange(event.target.value)}
+                            onKeyDown={handleSearchKeyDown}
+                            className="box-border h-10 w-full rounded-lg border border-input-border bg-surface px-3 text-sm text-ink outline-hidden placeholder:text-muted-soft focus:border-brand-600 focus:ring-[3px] focus:ring-brand-500/20"
+                        />
+                    </div>
+                    <div
+                        id={listboxId}
+                        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- The searchable popup needs a listbox container while retaining a text input.
+                        role="listbox"
+                        aria-label={label}
+                    >
+                        <button
+                            type="button"
+                            // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- Buttons provide the required keyboard interaction for options.
+                            role="option"
+                            aria-selected={value.length === 0}
+                            tabIndex={activeIndex === 0 ? 0 : -1}
+                            ref={(element) => {
+                                setOptionRef(0, element)
+                            }}
+                            onClick={() => selectOption(0)}
+                            onKeyDown={(event) => handleOptionKeyDown(0, event)}
+                            className={`${optionClassName} ${activeIndex === 0 ? 'bg-surface-hover' : ''}`}
+                        >
+                            {allHostsLabel}
+                        </button>
+                        {filteredOptions.length > 0 ? (
+                            filteredOptions.map((option, optionIndex) => {
+                                const index = optionIndex + 1
+                                return (
+                                    <button
+                                        key={option}
+                                        type="button"
+                                        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- Buttons provide the required keyboard interaction for options.
+                                        role="option"
+                                        aria-selected={value === option}
+                                        tabIndex={activeIndex === index ? 0 : -1}
+                                        ref={(element) => {
+                                            setOptionRef(index, element)
+                                        }}
+                                        onClick={() => selectOption(index)}
+                                        onKeyDown={(event) => handleOptionKeyDown(index, event)}
+                                        className={`${optionClassName} ${activeIndex === index ? 'bg-surface-hover' : ''}`}
+                                    >
+                                        {option}
+                                    </button>
+                                )
+                            })
+                        ) : (
+                            <div
+                                // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- Keep the empty state in the same listbox semantics.
+                                role="option"
+                                aria-selected={false}
+                                aria-disabled="true"
+                                className="px-3 py-2 text-sm text-muted"
+                            >
+                                {noResultsLabel}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    )
+}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsPageView.tsx b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsPageView.tsx
index 82f3f66..697b6a6 100644
--- a/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsPageView.tsx
+++ b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsPageView.tsx
@@ -43,6 +43,8 @@ export default function ProxyAccessLogsPageView({
             ) : (
                 <ProxyAccessLogsTable
                     entries={state.entries}
+                    availableHosts={state.availableHosts}
+                    availableStatuses={state.availableStatuses}
                     expandedEntry={state.expandedEntry}
                     formatTimestamp={state.formatTimestamp}
                     filters={state.filters}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsTable.tsx b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsTable.tsx
index 23a9611..2bd53c9 100644
--- a/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsTable.tsx
+++ b/web/src/features/Admin/ProxyAccessLogs/Components/ProxyAccessLogsTable.tsx
@@ -1,5 +1,6 @@
 import { RefreshCw } from 'lucide-react'
 import { Fragment } from 'react'
+import useProxyAccessLogsFilterOptions from '../Hooks/useProxyAccessLogsFilterOptions'
 
 import useTranslationStore from '../../../../language/useTranslationStore'
 import TableBodyState from '../../../../shared/Table/Components/TableBodyState'
@@ -9,6 +10,7 @@ import useTableFilters from '../../../../shared/Table/Hooks/useTableFilters'
 import TableLayout from '../../../../shared/Table/Components/TableLayout'
 import TableLoadingBody from '../../../../shared/Table/Components/TableLoadingBody'
 import RemoteTablePagination from '../../../../shared/Table/Components/RemoteTablePagination'
+import SelectControl from '../../../../shared/Select'
 import { ActionMenu } from '../../../../shared/ActionMenu'
 import { uiClassNames } from '../../../../shared/Styles/uiClassNames'
 import { Tooltip } from '../../../../shared/Tooltip'
@@ -21,6 +23,8 @@ import {
     withoutQueryString,
 } from '../Helpers/proxyAccessLogs'
 import type { ProxyAccessLogsTableProps } from '../Types/proxy-access-logs.types'
+import ClientIpCountry from './ClientIpCountry'
+import ProxyAccessLogsHostFilter from './ProxyAccessLogsHostFilter'
 
 const tableControlClassName =
     'h-12 min-w-0 w-full rounded-xl border border-input-border bg-surface-raised px-3 text-sm text-ink outline-hidden transition-[border-color,box-shadow] placeholder:text-muted-soft focus:border-brand-600 focus:ring-[3px] focus:ring-brand-500/20'
@@ -53,6 +57,8 @@ function LogDetails({ entry }: { readonly entry: ProxyAccessLogEntry }) {
 
 export default function ProxyAccessLogsTable({
     entries,
+    availableHosts,
+    availableStatuses,
     expandedEntry,
     formatTimestamp,
     filters,
@@ -76,6 +82,11 @@ export default function ProxyAccessLogsTable({
 }: ProxyAccessLogsTableProps) {
     const { locale, t } = useTranslationStore()
     const filterPanel = useTableFilters()
+    const { hostOptions, statusOptions } = useProxyAccessLogsFilterOptions({
+        availableHosts,
+        availableStatuses,
+        entries,
+    })
     const activeFilterCount = [
         filters.host.trim(),
         filters.status.trim(),
@@ -118,27 +129,31 @@ export default function ProxyAccessLogsTable({
                     onReset={onResetFilters}
                 >
                     <form
-                        className="grid min-w-0 gap-4 sm:grid-cols-2 xl:grid-cols-3 items-end"
+                        className="grid min-w-0 items-end gap-4 sm:grid-cols-2 lg:grid-cols-4"
                         onSubmit={(event) => {
                             event.preventDefault()
                             onApplyFilters()
                         }}
                     >
-                        <label className="grid min-w-0 gap-1.5">
+                        <div className="grid min-w-0 gap-1.5">
                             <span className="text-xs font-extrabold text-muted">
                                 {t('admin.proxyAccessLogs.filters.host')}
                             </span>
-                            <input
-                                type="text"
-                                value={filters.host}
-                                maxLength={254}
-                                placeholder={t('admin.proxyAccessLogs.filters.hostPlaceholder')}
-                                onChange={(event) => onHostChange(event.target.value)}
-                                aria-invalid={filterErrors.host !== undefined}
-                                aria-describedby={
+                            <ProxyAccessLogsHostFilter
+                                allHostsLabel={t('admin.proxyAccessLogs.filters.allHosts')}
+                                ariaDescribedBy={
                                     filterErrors.host ? 'proxy-log-host-error' : undefined
                                 }
-                                className={tableControlClassName}
+                                invalid={filterErrors.host !== undefined}
+                                label={t('admin.proxyAccessLogs.filters.host')}
+                                noResultsLabel={t('admin.proxyAccessLogs.filters.noHosts')}
+                                onChange={onHostChange}
+                                options={hostOptions}
+                                placeholder={t('admin.proxyAccessLogs.filters.hostPlaceholder')}
+                                searchPlaceholder={t(
+                                    'admin.proxyAccessLogs.filters.hostSearchPlaceholder',
+                                )}
+                                value={filters.host}
                             />
                             {filterErrors.host ? (
                                 <span
@@ -149,25 +164,25 @@ export default function ProxyAccessLogsTable({
                                     {t(filterErrors.host)}
                                 </span>
                             ) : null}
-                        </label>
+                        </div>
                         <label className="grid min-w-0 gap-1.5">
                             <span className="text-xs font-extrabold text-muted">
                                 {t('admin.proxyAccessLogs.filters.status')}
                             </span>
-                            <input
-                                type="number"
-                                value={filters.status}
-                                min={100}
-                                max={599}
-                                step={1}
-                                inputMode="numeric"
-                                placeholder={t('admin.proxyAccessLogs.filters.statusPlaceholder')}
-                                onChange={(event) => onStatusChange(event.target.value)}
-                                aria-invalid={filterErrors.status !== undefined}
-                                aria-describedby={
+                            <SelectControl
+                                ariaLabel={t('admin.proxyAccessLogs.filters.status')}
+                                className="w-full"
+                                describedBy={
                                     filterErrors.status ? 'proxy-log-status-error' : undefined
                                 }
-                                className={tableControlClassName}
+                                invalid={filterErrors.status !== undefined}
+                                onValueChange={onStatusChange}
+                                options={statusOptions.map((status) => ({
+                                    label: String(status),
+                                    value: String(status),
+                                }))}
+                                placeholder={t('admin.proxyAccessLogs.filters.allStatuses')}
+                                value={filters.status}
                             />
                             {filterErrors.status ? (
                                 <span
@@ -248,18 +263,7 @@ export default function ProxyAccessLogsTable({
             }
         >
             <div className="overflow-x-auto">
-                <table className="w-full min-w-[64rem] table-fixed border-collapse">
-                    <colgroup>
-                        <col className="w-44" />
-                        <col className="w-32" />
-                        <col className="w-20" />
-                        <col />
-                        <col className="w-20" />
-                        <col className="w-24" />
-                        <col className="w-28" />
-                        <col className="w-20" />
-                        <col className="w-20" />
-                    </colgroup>
+                <table className="w-full min-w-[64rem] table-auto border-collapse">
                     <thead className="bg-surface-subtle font-mono text-[0.62rem] tracking-[0.07em] text-muted uppercase">
                         <tr>
                             <th
@@ -383,8 +387,8 @@ export default function ProxyAccessLogsTable({
                                             <td className="whitespace-nowrap px-4 py-[0.85rem] align-middle font-mono text-xs text-muted">
                                                 {formatDuration(entry.durationMs)}
                                             </td>
-                                            <td className="max-w-44 break-all px-4 py-[0.85rem] align-middle font-mono text-xs text-muted">
-                                                {entry.clientIp}
+                                            <td className="whitespace-nowrap px-4 py-[0.85rem] align-middle font-mono text-xs text-muted">
+                                                <ClientIpCountry entry={entry} />
                                             </td>
                                             <td className="whitespace-nowrap px-4 py-[0.85rem] align-middle font-mono text-xs text-muted">
                                                 {formatBytes(entry.bytes, locale)}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsFilterOptions.ts b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsFilterOptions.ts
new file mode 100644
index 0000000..196236e
--- /dev/null
+++ b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsFilterOptions.ts
@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import type { ProxyAccessLogsTableProps } from '../Types/proxy-access-logs.types'
+
+export default function useProxyAccessLogsFilterOptions({
+    availableHosts,
+    availableStatuses,
+    entries,
+}: Pick<ProxyAccessLogsTableProps, 'availableHosts' | 'availableStatuses' | 'entries'>) {
+    const hostOptions = useMemo(
+        () =>
+            [...new Set([...availableHosts, ...entries.map((entry) => entry.host)])].toSorted(
+                (left, right) => left.localeCompare(right),
+            ),
+        [availableHosts, entries],
+    )
+    const statusOptions = useMemo(
+        () =>
+            [...new Set([...availableStatuses, ...entries.map((entry) => entry.status)])].toSorted(
+                (left, right) => left - right,
+            ),
+        [availableStatuses, entries],
+    )
+    return { hostOptions, statusOptions }
+}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsHostFilter.ts b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsHostFilter.ts
new file mode 100644
index 0000000..3e060a9
--- /dev/null
+++ b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsHostFilter.ts
@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
+import type { KeyboardEvent } from 'react'
+
+interface UseProxyAccessLogsHostFilterOptions {
+    readonly onChange: (value: string) => void
+    readonly options: readonly string[]
+}
+
+export default function useProxyAccessLogsHostFilter({
+    onChange,
+    options,
+}: UseProxyAccessLogsHostFilterOptions) {
+    const [open, setOpen] = useState(false)
+    const [search, setSearch] = useState('')
+    const [activeIndex, setActiveIndex] = useState(0)
+    const rootRef = useRef<HTMLDivElement>(null)
+    const searchRef = useRef<HTMLInputElement>(null)
+    const triggerRef = useRef<HTMLButtonElement>(null)
+    const optionRefs = useRef<Array<HTMLButtonElement | null>>([])
+    const listboxId = useId()
+
+    const setRootRef = useCallback((element: HTMLDivElement | null) => {
+        rootRef.current = element
+    }, [])
+    const setTriggerRef = useCallback((element: HTMLButtonElement | null) => {
+        triggerRef.current = element
+    }, [])
+    const setSearchRef = useCallback((element: HTMLInputElement | null) => {
+        searchRef.current = element
+    }, [])
+    const setOptionRef = useCallback((index: number, element: HTMLButtonElement | null) => {
+        optionRefs.current[index] = element
+    }, [])
+
+    const filteredOptions = useMemo(() => {
+        const normalizedSearch = search.trim().toLocaleLowerCase()
+        if (!normalizedSearch) return options
+        return options.filter((option) => option.toLocaleLowerCase().includes(normalizedSearch))
+    }, [options, search])
+
+    const optionCount = filteredOptions.length + 1
+
+    const close = useCallback((restoreFocus: boolean) => {
+        setOpen(false)
+        setSearch('')
+        setActiveIndex(0)
+        if (restoreFocus) triggerRef.current?.focus()
+    }, [])
+
+    const openPopup = useCallback(() => {
+        setSearch('')
+        setActiveIndex(0)
+        setOpen(true)
+    }, [])
+
+    const toggle = useCallback(() => {
+        if (open) {
+            close(false)
+        } else {
+            openPopup()
+        }
+    }, [close, open, openPopup])
+
+    const focusOption = useCallback(
+        (index: number) => {
+            const boundedIndex = Math.min(Math.max(index, 0), optionCount - 1)
+            setActiveIndex(boundedIndex)
+            optionRefs.current[boundedIndex]?.focus()
+        },
+        [optionCount],
+    )
+
+    const selectOption = useCallback(
+        (index: number) => {
+            const nextValue = index === 0 ? '' : filteredOptions[index - 1]
+            if (nextValue === undefined) return
+            onChange(nextValue)
+            close(true)
+        },
+        [close, filteredOptions, onChange],
+    )
+
+    const handleTriggerKeyDown = useCallback(
+        (event: KeyboardEvent<HTMLButtonElement>) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault()
+                if (!open) openPopup()
+                return
+            }
+            if (event.key === 'Escape' && open) {
+                event.preventDefault()
+                close(true)
+            }
+        },
+        [close, open, openPopup],
+    )
+
+    const handleSearchChange = useCallback((nextSearch: string) => {
+        setSearch(nextSearch)
+        setActiveIndex(0)
+    }, [])
+
+    const handleSearchKeyDown = useCallback(
+        (event: KeyboardEvent<HTMLInputElement>) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault()
+                focusOption(activeIndex)
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault()
+                focusOption(optionCount - 1)
+            } else if (event.key === 'Enter') {
+                event.preventDefault()
+                if (search.trim()) {
+                    if (filteredOptions.length > 0) selectOption(1)
+                } else {
+                    selectOption(activeIndex)
+                }
+            } else if (event.key === 'Escape') {
+                event.preventDefault()
+                close(true)
+            }
+        },
+        [activeIndex, close, filteredOptions, focusOption, optionCount, search, selectOption],
+    )
+
+    const handleOptionKeyDown = useCallback(
+        (index: number, event: KeyboardEvent<HTMLButtonElement>) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault()
+                focusOption(index + 1)
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault()
+                focusOption(index - 1)
+            } else if (event.key === 'Enter') {
+                event.preventDefault()
+                selectOption(index)
+            } else if (event.key === 'Escape') {
+                event.preventDefault()
+                close(true)
+            }
+        },
+        [close, focusOption, selectOption],
+    )
+
+    useEffect(() => {
+        if (!open) return
+        searchRef.current?.focus()
+    }, [open])
+
+    useEffect(() => {
+        if (!open) return
+
+        const handlePointerDown = (event: PointerEvent) => {
+            if (!rootRef.current?.contains(event.target as Node)) close(false)
+        }
+        const handleFocusIn = (event: FocusEvent) => {
+            if (!rootRef.current?.contains(event.target as Node)) close(false)
+        }
+        document.addEventListener('pointerdown', handlePointerDown)
+        document.addEventListener('focusin', handleFocusIn)
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown)
+            document.removeEventListener('focusin', handleFocusIn)
+        }
+    }, [close, open])
+
+    return {
+        activeIndex,
+        filteredOptions,
+        handleOptionKeyDown,
+        handleSearchChange,
+        handleSearchKeyDown,
+        handleTriggerKeyDown,
+        listboxId,
+        open,
+        search,
+        setOptionRef,
+        setRootRef,
+        setSearchRef,
+        setTriggerRef,
+        selectOption,
+        toggle,
+    }
+}
diff --git a/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsLogic.ts b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsLogic.ts
index fdd7da8..f4ee63c 100644
--- a/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsLogic.ts
+++ b/web/src/features/Admin/ProxyAccessLogs/Hooks/useProxyAccessLogsLogic.ts
@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PERMISSIONS } from '../../../../config/permissions.config'
 import useTranslationStore from '../../../../language/useTranslationStore'
@@ -132,6 +132,14 @@ export default function useProxyAccessLogsLogic({ permissions }: ProxyAccessLogs
         setCaptureVersion((current) => current + 1)
         setExpandedEntry(null)
     }, [])
+    useEffect(() => {
+        if (draftFilters.search === filters.search) return
+
+        const timeout = setTimeout(() => {
+            applyFilters()
+        }, 300)
+        return () => clearTimeout(timeout)
+    }, [applyFilters, draftFilters.search, filters.search])
     const refresh = useCallback(async () => {
         await queryClient.invalidateQueries({
             queryKey: proxyAccessLogsQueryKeys.all,
@@ -173,6 +181,8 @@ export default function useProxyAccessLogsLogic({ permissions }: ProxyAccessLogs
         state: {
             canView,
             entries,
+            availableHosts: logsQuery.data?.availableHosts ?? [],
+            availableStatuses: logsQuery.data?.availableStatuses ?? [],
             expandedEntry,
             formatTimestamp,
             filterErrors,
diff --git a/web/src/features/Admin/ProxyAccessLogs/Types/proxy-access-logs.types.ts b/web/src/features/Admin/ProxyAccessLogs/Types/proxy-access-logs.types.ts
index 8a1bcd4..4473acf 100644
--- a/web/src/features/Admin/ProxyAccessLogs/Types/proxy-access-logs.types.ts
+++ b/web/src/features/Admin/ProxyAccessLogs/Types/proxy-access-logs.types.ts
@@ -20,6 +20,8 @@ export type ProxyAccessLogsFilterErrors = Partial<Record<keyof ProxyAccessLogsFi
 
 export interface ProxyAccessLogsTableProps {
     readonly entries: readonly ProxyAccessLogEntry[]
+    readonly availableHosts: readonly string[]
+    readonly availableStatuses: readonly number[]
     readonly expandedEntry: string | null
     readonly formatTimestamp: (value: string) => string
     readonly filters: ProxyAccessLogsFilters
diff --git a/web/src/features/Admin/ProxyAccessLogs/validation.ts b/web/src/features/Admin/ProxyAccessLogs/validation.ts
index acc253a..fef0f65 100644
--- a/web/src/features/Admin/ProxyAccessLogs/validation.ts
+++ b/web/src/features/Admin/ProxyAccessLogs/validation.ts
@@ -6,7 +6,9 @@ export const PROXY_ACCESS_LOGS_DEFAULT_LIMIT = 15
 export const PROXY_ACCESS_LOGS_MAX_LIMIT = 200
 export const PROXY_ACCESS_LOGS_MAX_OFFSET = 10_000
 export const PROXY_ACCESS_LOGS_MAX_SEARCH_BYTES = 128
-export const PROXY_ACCESS_LOGS_MAX_RESPONSE_BYTES = 2 * 1_024 * 1_024
+export const PROXY_ACCESS_LOGS_MAX_RESPONSE_BYTES = 4 * 1_024 * 1_024
+export const PROXY_ACCESS_LOGS_MAX_AVAILABLE_HOSTS = 10_000
+export const PROXY_ACCESS_LOGS_MAX_AVAILABLE_STATUSES = 500
 
 // oxlint-disable-next-line no-control-regex -- Access-log filters must reject C0/C1 controls.
 const CONTROL_CHARACTER_PATTERN = /[\u0000-\u001F\u007F-\u009F]/u
@@ -98,6 +100,11 @@ const proxyAccessLogEntrySchema = z.strictObject({
     status: z.number().int().min(100).max(599),
     durationMs: safeNonNegativeNumberSchema,
     clientIp: responseTextSchema(64),
+    countryCode: z
+        .string()
+        .regex(/^[A-Z]{2}$/u)
+        .nullable()
+        .optional(),
     upstream: responseTextSchema(512).nullable(),
     bytes: safeNonNegativeNumberSchema,
     protocol: responseTextSchema(32),
@@ -109,6 +116,14 @@ export const proxyAccessLogsResultSchema = z
         limit: z.number().int().min(1).max(PROXY_ACCESS_LOGS_MAX_LIMIT),
         offset: z.number().int().min(0).max(PROXY_ACCESS_LOGS_MAX_OFFSET),
         total: z.number().int().min(0).max(PROXY_ACCESS_LOGS_MAX_OFFSET),
+        availableHosts: z
+            .array(responseTextSchema(253))
+            .max(PROXY_ACCESS_LOGS_MAX_AVAILABLE_HOSTS)
+            .default([]),
+        availableStatuses: z
+            .array(z.number().int().min(100).max(599))
+            .max(PROXY_ACCESS_LOGS_MAX_AVAILABLE_STATUSES)
+            .default([]),
         hasMore: z.boolean(),
         truncated: z.boolean(),
         snapshot: snapshotSchema,
diff --git a/web/src/features/Admin/ProxyHostManagement/Components/CaddyConfigCodeBlock.tsx b/web/src/features/Admin/ProxyHostManagement/Components/CaddyConfigCodeBlock.tsx
new file mode 100644
index 0000000..c6db6ca
--- /dev/null
+++ b/web/src/features/Admin/ProxyHostManagement/Components/CaddyConfigCodeBlock.tsx
@@ -0,0 +1,162 @@
+import type { ReactNode } from 'react'
+
+type CaddyConfigTokenKind =
+    | 'key'
+    | 'string'
+    | 'number'
+    | 'boolean'
+    | 'null'
+    | 'punctuation'
+    | 'plain'
+
+export interface CaddyConfigToken {
+    readonly kind: CaddyConfigTokenKind
+    readonly start: number
+    readonly value: string
+}
+
+const TOKEN_CLASS_NAMES: Record<CaddyConfigTokenKind, string> = {
+    key: 'text-brand-text',
+    string: 'text-info-text',
+    number: 'text-warning-text',
+    boolean: 'text-success-text',
+    null: 'text-muted',
+    punctuation: 'text-muted',
+    plain: 'text-ink-soft',
+}
+
+export function formatCaddyConfig(source: string): string {
+    try {
+        const parsed: unknown = JSON.parse(source)
+        return JSON.stringify(parsed, null, 2) ?? source
+    } catch {
+        return source
+    }
+}
+
+function readJsonString(source: string, start: number): number {
+    let escaped = false
+    for (let index = start + 1; index < source.length; index += 1) {
+        const character = source[index]
+        if (escaped) escaped = false
+        else if (character === '\\') escaped = true
+        else if (character === '"') return index + 1
+    }
+    return source.length
+}
+
+function readWhile(source: string, start: number, predicate: (character: string) => boolean) {
+    let index = start
+    while (index < source.length && predicate(source[index] ?? '')) index += 1
+    return index
+}
+
+function readJsonNumber(source: string, start: number): number {
+    let index = start
+    if (source[index] === '-') index += 1
+    if (source[index] === '0') index += 1
+    else index = readWhile(source, index, (value) => /\d/u.test(value))
+    if (source[index] === '.') {
+        index = readWhile(source, index + 1, (value) => /\d/u.test(value))
+    }
+    if (source[index] === 'e' || source[index] === 'E') {
+        index += 1
+        if (source[index] === '+' || source[index] === '-') index += 1
+        index = readWhile(source, index, (value) => /\d/u.test(value))
+    }
+    return index
+}
+
+function readJsonLiteral(
+    source: string,
+    start: number,
+): { readonly kind: 'boolean' | 'null'; readonly end: number } | null {
+    for (const [literal, kind] of [
+        ['true', 'boolean'],
+        ['false', 'boolean'],
+        ['null', 'null'],
+    ] as const) {
+        const end = start + literal.length
+        if (source.slice(start, end) !== literal) continue
+        const next = source[end]
+        if (next === undefined || /\s/u.test(next) || '{}[],:'.includes(next)) return { kind, end }
+    }
+    return null
+}
+
+export function tokenizeCaddyConfig(source: string): CaddyConfigToken[] {
+    const tokens: CaddyConfigToken[] = []
+    const pushToken = (kind: CaddyConfigTokenKind, start: number, value: string) => {
+        tokens.push({ kind, start, value })
+    }
+    let index = 0
+    while (index < source.length) {
+        const character = source[index] ?? ''
+        if (/\s/u.test(character)) {
+            const end = readWhile(source, index, (value) => /\s/u.test(value))
+            pushToken('plain', index, source.slice(index, end))
+            index = end
+            continue
+        }
+        if (character === '"') {
+            const end = readJsonString(source, index)
+            const nextToken = readWhile(source, end, (value) => /\s/u.test(value))
+            pushToken(source[nextToken] === ':' ? 'key' : 'string', index, source.slice(index, end))
+            index = end
+            continue
+        }
+        if ('{}[],:'.includes(character)) {
+            pushToken('punctuation', index, character)
+            index += 1
+            continue
+        }
+        if (character === '-' || /\d/u.test(character)) {
+            const end = readJsonNumber(source, index)
+            if (end > index) {
+                pushToken('number', index, source.slice(index, end))
+                index = end
+                continue
+            }
+        }
+        const literal = readJsonLiteral(source, index)
+        if (literal) {
+            pushToken(literal.kind, index, source.slice(index, literal.end))
+            index = literal.end
+            continue
+        }
+        const end = readWhile(
+            source,
+            index,
+            (value) => !/\s/u.test(value) && !'{}[],:'.includes(value),
+        )
+        pushToken('plain', index, source.slice(index, end || index + 1))
+        index = end || index + 1
+    }
+    return tokens
+}
+
+export interface CaddyConfigCodeBlockProps {
+    readonly source: string
+    readonly ariaLabel: string
+}
+
+export default function CaddyConfigCodeBlock({ source, ariaLabel }: CaddyConfigCodeBlockProps) {
+    const formattedSource = formatCaddyConfig(source)
+    const content: ReactNode[] = tokenizeCaddyConfig(formattedSource).map((token) => (
+        <span
+            key={`${token.kind}-${token.start}`}
+            className={TOKEN_CLASS_NAMES[token.kind]}
+            data-token={token.kind}
+        >
+            {token.value}
+        </span>
+    ))
+    return (
+        <pre
+            className="max-h-96 overflow-auto rounded-xl border border-border bg-code p-3 font-mono text-xs leading-relaxed"
+            aria-label={ariaLabel}
+        >
+            <code>{content}</code>
+        </pre>
+    )
+}
diff --git a/web/src/features/Admin/ProxyHostManagement/Components/ProxyGlobalConfigEditorModal.tsx b/web/src/features/Admin/ProxyHostManagement/Components/ProxyGlobalConfigEditorModal.tsx
index 936f395..55d23c9 100644
--- a/web/src/features/Admin/ProxyHostManagement/Components/ProxyGlobalConfigEditorModal.tsx
+++ b/web/src/features/Admin/ProxyHostManagement/Components/ProxyGlobalConfigEditorModal.tsx
@@ -1,13 +1,11 @@
-import { Eye, RefreshCw, RotateCcw, Save } from 'lucide-react'
+import { RotateCcw, Save } from 'lucide-react'
 
 import useTranslationStore from '../../../../language/useTranslationStore'
 import { Modal } from '../../../../shared/Modal'
 import { uiClassNames } from '../../../../shared/Styles/uiClassNames'
+import CaddyConfigCodeBlock from './CaddyConfigCodeBlock'
 import useProxyGlobalConfigEditorLogic from '../Hooks/useProxyGlobalConfigEditorLogic'
-import type {
-    ProxyConfigEditorTab,
-    ProxyGlobalConfigEditorModalProps,
-} from '../Types/proxy-config-editor.types'
+import type { ProxyGlobalConfigEditorModalProps } from '../Types/proxy-config-editor.types'
 
 const FIELDS = [
     ['clientMaxBodySizeBytes', 'fieldClientMaxBodySizeBytes', 1024, 1073741824, 'bytes'],
@@ -21,15 +19,8 @@ const FIELDS = [
 export default function ProxyGlobalConfigEditorModal(props: ProxyGlobalConfigEditorModalProps) {
     const { t } = useTranslationStore()
     const { state, handler } = useProxyGlobalConfigEditorLogic(props)
-    const busy = state.isRefreshing || state.isSaving || state.isResetting || state.isPreviewing
-    const source =
-        state.activeTab === 'active'
-            ? state.data?.active?.config
-            : state.activeTab === 'defaults'
-              ? state.data?.defaults?.config
-              : state.activeTab === 'preview'
-                ? state.preview?.config
-                : undefined
+    const busy = state.isRefreshing || state.isSaving || state.isResetting
+    const source = state.data?.active?.config
     return (
         <Modal
             open={props.open}
@@ -59,15 +50,6 @@ export default function ProxyGlobalConfigEditorModal(props: ProxyGlobalConfigEdi
                                 <RotateCcw className="size-4" />
                                 {t('admin.proxyHosts.config.resetButton')}
                             </button>
-                            <button
-                                type="button"
-                                className={uiClassNames.button.secondary}
-                                onClick={handler.preview}
-                                disabled={busy || !state.data}
-                            >
-                                <Eye className="size-4" />
-                                {t('admin.proxyHosts.config.preview')}
-                            </button>
                             <button
                                 type="button"
                                 className={uiClassNames.button.primary}
@@ -93,14 +75,7 @@ export default function ProxyGlobalConfigEditorModal(props: ProxyGlobalConfigEdi
             ) : (
                 <div className="grid gap-4">
                     <div className="flex flex-wrap gap-1">
-                        {(
-                            [
-                                'edit',
-                                'active',
-                                'defaults',
-                                ...(state.preview ? ['preview'] : []),
-                            ] as ProxyConfigEditorTab[]
-                        ).map((tab) => (
+                        {(['edit', 'active'] as const).map((tab) => (
                             <button
                                 key={tab}
                                 type="button"
@@ -112,15 +87,6 @@ export default function ProxyGlobalConfigEditorModal(props: ProxyGlobalConfigEdi
                                 {t(`admin.proxyHosts.config.${tab === 'edit' ? 'settings' : tab}`)}
                             </button>
                         ))}
-                        <button
-                            type="button"
-                            className={uiClassNames.button.quiet}
-                            onClick={handler.refresh}
-                            disabled={busy}
-                        >
-                            <RefreshCw className="size-4" />
-                            {t('admin.proxyHosts.config.reload')}
-                        </button>
                     </div>
                     {state.activeTab === 'edit' ? (
                         <fieldset className="grid gap-3">
@@ -154,10 +120,11 @@ export default function ProxyGlobalConfigEditorModal(props: ProxyGlobalConfigEdi
                                 </label>
                             ))}
                         </fieldset>
-                    ) : source ? (
-                        <pre className="max-h-96 overflow-auto rounded-xl border border-border bg-code p-3 text-xs text-ink-soft">
-                            {source}
-                        </pre>
+                    ) : state.activeTab === 'active' && source ? (
+                        <CaddyConfigCodeBlock
+                            source={source}
+                            ariaLabel={t('admin.proxyHosts.config.active')}
+                        />
                     ) : (
                         <p className="m-0 text-sm text-muted">
                             {t('admin.proxyHosts.config.unavailable')}
diff --git a/web/src/features/Admin/ProxyHostManagement/Hooks/useProxyGlobalConfigEditorLogic.ts b/web/src/features/Admin/ProxyHostManagement/Hooks/useProxyGlobalConfigEditorLogic.ts
index bba58ec..9abedec 100644
--- a/web/src/features/Admin/ProxyHostManagement/Hooks/useProxyGlobalConfigEditorLogic.ts
+++ b/web/src/features/Admin/ProxyHostManagement/Hooks/useProxyGlobalConfigEditorLogic.ts
@@ -1,14 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import useToast from '../../../../shared/Toast/Hooks/useToast'
-import type {
-    ProxyHttpSettings,
-    ProxyConfigSource,
-} from '../../../../shared/Types/proxy-runtime.types'
+import type { ProxyHttpSettings } from '../../../../shared/Types/proxy-runtime.types'
 import {
     getProxyConfigEditorHandler,
-    previewProxyConfigEditorHandler,
     resetProxyConfigEditorHandler,
     saveProxyConfigEditorHandler,
 } from '../server'
@@ -27,15 +23,13 @@ export default function useProxyGlobalConfigEditorLogic({
 }: ProxyGlobalConfigEditorModalProps) {
     const toast = useToast()
     const queryClient = useQueryClient()
-    const [activeTab, setActiveTab] = useState<'edit' | 'active' | 'defaults' | 'preview'>('edit')
+    const [activeTab, setActiveTab] = useState<'edit' | 'active'>('edit')
     const [draft, setDraft] = useState<{
         settings: ProxyHttpSettings
         baseline: ProxyHttpSettings
         baseRevision: string
     } | null>(null)
-    const [preview, setPreview] = useState<ProxyConfigSource | null>(null)
     const [actionError, setActionError] = useState<string | null>(null)
-    const refreshingRef = useRef(false)
     const query = useQuery({
         queryKey: proxyHostManagementQueryKeys.configEditor,
         queryFn: () => getProxyConfigEditorHandler(),
@@ -48,19 +42,11 @@ export default function useProxyGlobalConfigEditorLogic({
     const baseRevision = draft?.baseRevision ?? data?.baseRevision ?? null
     const setSetting = useCallback(
         (key: keyof ProxyHttpSettings, value: number | undefined) => {
-            if (
-                !canEdit ||
-                refreshingRef.current ||
-                query.isFetching ||
-                !data ||
-                baseRevision === null
-            )
-                return
+            if (!canEdit || query.isFetching || !data || baseRevision === null) return
             const next = { ...settings }
             if (value === undefined) delete next[key]
             else next[key] = value
             setDraft({ settings: next, baseline: draft?.baseline ?? data.settings, baseRevision })
-            setPreview(null)
             setActionError(null)
         },
         [baseRevision, canEdit, data, draft, query.isFetching, settings],
@@ -82,7 +68,6 @@ export default function useProxyGlobalConfigEditorLogic({
             }
             await invalidate()
             setDraft(null)
-            setPreview(null)
             onOpenChange(false)
             toast[result.runtimeStatus === 'pending' ? 'warning' : 'success'](result.message)
         },
@@ -91,18 +76,6 @@ export default function useProxyGlobalConfigEditorLogic({
             toast.error('admin.proxyHosts.config.errors.saveFailed')
         },
     })
-    const previewMutation = useMutation({
-        mutationFn: () => previewProxyConfigEditorHandler({ data: { settings } }),
-        onSuccess: (result) => {
-            setPreview(result)
-            setActiveTab('preview')
-            setActionError(null)
-        },
-        onError: () => {
-            setPreview(null)
-            setActionError('admin.proxyHosts.config.errors.previewFailed')
-        },
-    })
     const resetMutation = useMutation({
         mutationFn: () =>
             resetProxyConfigEditorHandler({ data: { baseRevision: baseRevision ?? '' } }),
@@ -114,7 +87,6 @@ export default function useProxyGlobalConfigEditorLogic({
             }
             await invalidate()
             setDraft(null)
-            setPreview(null)
             onOpenChange(false)
             toast[result.runtimeStatus === 'pending' ? 'warning' : 'success'](result.message)
         },
@@ -123,29 +95,6 @@ export default function useProxyGlobalConfigEditorLogic({
             toast.error('admin.proxyHosts.config.errors.saveFailed')
         },
     })
-    const refresh = useCallback(() => {
-        if (refreshingRef.current || query.isFetching) return
-        refreshingRef.current = true
-        setActionError(null)
-        void query
-            .refetch()
-            .then((result) => {
-                if (result.isError || !result.data) {
-                    setActionError('admin.proxyHosts.config.errors.loadFailed')
-                    toast.error('admin.proxyHosts.config.errors.loadFailed')
-                    return
-                }
-                setDraft(null)
-                setPreview(null)
-            })
-            .catch(() => {
-                setActionError('admin.proxyHosts.config.errors.loadFailed')
-                toast.error('admin.proxyHosts.config.errors.loadFailed')
-            })
-            .finally(() => {
-                refreshingRef.current = false
-            })
-    }, [query, toast])
     const state: ProxyGlobalConfigEditorState = {
         actionError,
         activeTab,
@@ -156,43 +105,18 @@ export default function useProxyGlobalConfigEditorLogic({
         isRefreshing: query.isFetching,
         isSaving: saveMutation.isPending,
         isResetting: resetMutation.isPending,
-        isPreviewing: previewMutation.isPending,
-        preview,
     }
     return {
         state,
         handler: {
-            refresh,
             save: () => {
-                if (
-                    canEdit &&
-                    !refreshingRef.current &&
-                    !query.isFetching &&
-                    baseRevision &&
-                    !saveMutation.isPending
-                )
+                if (canEdit && !query.isFetching && baseRevision && !saveMutation.isPending)
                     saveMutation.mutate()
             },
             reset: () => {
-                if (
-                    canEdit &&
-                    !refreshingRef.current &&
-                    !query.isFetching &&
-                    baseRevision &&
-                    !resetMutation.isPending
-                )
+                if (canEdit && !query.isFetching && baseRevision && !resetMutation.isPending)
                     resetMutation.mutate()
             },
-            preview: () => {
-                if (
-                    canEdit &&
-                    !refreshingRef.current &&
-                    !query.isFetching &&
-                    baseRevision &&
-                    !previewMutation.isPending
-                )
-                    previewMutation.mutate()
-            },
             setActiveTab,
             setSetting,
         },
diff --git a/web/src/features/Admin/ProxyHostManagement/Types/proxy-config-editor.types.ts b/web/src/features/Admin/ProxyHostManagement/Types/proxy-config-editor.types.ts
index 5a941e6..f9684d8 100644
--- a/web/src/features/Admin/ProxyHostManagement/Types/proxy-config-editor.types.ts
+++ b/web/src/features/Admin/ProxyHostManagement/Types/proxy-config-editor.types.ts
@@ -68,7 +68,7 @@ export interface ProxyGlobalConfigEditorModalProps {
 
 export interface ProxyGlobalConfigEditorState {
     readonly actionError: string | null
-    readonly activeTab: ProxyConfigEditorTab
+    readonly activeTab: 'edit' | 'active'
     readonly settings: ProxyHttpSettings
     readonly baseRevision: string | null
     readonly data: ProxyConfigEditorData | undefined
@@ -76,6 +76,4 @@ export interface ProxyGlobalConfigEditorState {
     readonly isRefreshing: boolean
     readonly isSaving: boolean
     readonly isResetting: boolean
-    readonly isPreviewing: boolean
-    readonly preview: ProxyConfigSource | null
 }
diff --git a/web/src/features/UserSettings/Hooks/useLanguageSettingsLogic.ts b/web/src/features/UserSettings/Hooks/useLanguageSettingsLogic.ts
index 77e80d2..701b9f5 100644
--- a/web/src/features/UserSettings/Hooks/useLanguageSettingsLogic.ts
+++ b/web/src/features/UserSettings/Hooks/useLanguageSettingsLogic.ts
@@ -2,7 +2,11 @@ import { useRef, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { useRouter } from '@tanstack/react-router'
 
-import { AVAILABLE_LANGUAGES, FLAG_IMAGES, isAppLanguage } from '../../../config/language.config'
+import {
+    AVAILABLE_LANGUAGES,
+    isAppLanguage,
+    LANGUAGE_COUNTRY_CODES,
+} from '../../../config/language.config'
 import useTranslationStore, {
     loadLanguageBootstrap,
     type AppLanguage,
@@ -64,7 +68,7 @@ export default function useLanguageSettingsLogic() {
             options: AVAILABLE_LANGUAGES.map((value) => ({
                 value,
                 label: t(`language.names.${value}`),
-                imageSrc: FLAG_IMAGES[value],
+                countryCode: LANGUAGE_COUNTRY_CODES[value],
             })),
         },
         handler: {
diff --git a/web/src/language/Locales/de.json b/web/src/language/Locales/de.json
index 569144d..efbffdc 100644
--- a/web/src/language/Locales/de.json
+++ b/web/src/language/Locales/de.json
@@ -1557,11 +1557,15 @@
             },
             "filters": {
                 "host": "Host",
-                "hostPlaceholder": "example.com",
+                "hostPlaceholder": "Alle Hosts",
                 "status": "Status",
                 "statusPlaceholder": "404",
                 "search": "Suche",
-                "searchPlaceholder": "Host, Methode oder Pfad suchen…"
+                "searchPlaceholder": "Host, Methode oder Pfad suchen…",
+                "allHosts": "Alle Hosts",
+                "hostSearchPlaceholder": "Hosts suchen…",
+                "noHosts": "Keine passenden Hosts",
+                "allStatuses": "Alle Statuscodes"
             },
             "actions": {
                 "apply": "Filter anwenden",
diff --git a/web/src/language/Locales/en.json b/web/src/language/Locales/en.json
index 8600fcd..2d46409 100644
--- a/web/src/language/Locales/en.json
+++ b/web/src/language/Locales/en.json
@@ -1557,11 +1557,15 @@
             },
             "filters": {
                 "host": "Host",
-                "hostPlaceholder": "example.com",
+                "hostPlaceholder": "All hosts",
                 "status": "Status",
                 "statusPlaceholder": "404",
                 "search": "Search",
-                "searchPlaceholder": "Search host, method, or path…"
+                "searchPlaceholder": "Search host, method, or path…",
+                "allHosts": "All hosts",
+                "hostSearchPlaceholder": "Search hosts…",
+                "noHosts": "No matching hosts",
+                "allStatuses": "All statuses"
             },
             "actions": {
                 "apply": "Apply filters",
diff --git a/web/src/language/Locales/es.json b/web/src/language/Locales/es.json
index 4cd8ffd..99e9f79 100644
--- a/web/src/language/Locales/es.json
+++ b/web/src/language/Locales/es.json
@@ -1557,11 +1557,15 @@
             },
             "filters": {
                 "host": "Host",
-                "hostPlaceholder": "example.com",
+                "hostPlaceholder": "Todos los hosts",
                 "status": "Estado",
                 "statusPlaceholder": "404",
                 "search": "Buscar",
-                "searchPlaceholder": "Buscar host, método o ruta…"
+                "searchPlaceholder": "Buscar host, método o ruta…",
+                "allHosts": "Todos los hosts",
+                "hostSearchPlaceholder": "Buscar hosts…",
+                "noHosts": "No hay hosts coincidentes",
+                "allStatuses": "Todos los estados"
             },
             "actions": {
                 "apply": "Aplicar filtros",
diff --git a/web/src/language/Locales/fr.json b/web/src/language/Locales/fr.json
index f6b4b58..69cd1b4 100644
--- a/web/src/language/Locales/fr.json
+++ b/web/src/language/Locales/fr.json
@@ -1557,11 +1557,15 @@
             },
             "filters": {
                 "host": "Hôte",
-                "hostPlaceholder": "example.com",
+                "hostPlaceholder": "Tous les hôtes",
                 "status": "Statut",
                 "statusPlaceholder": "404",
                 "search": "Rechercher",
-                "searchPlaceholder": "Rechercher un hôte, une méthode ou un chemin…"
+                "searchPlaceholder": "Rechercher un hôte, une méthode ou un chemin…",
+                "allHosts": "Tous les hôtes",
+                "hostSearchPlaceholder": "Rechercher un hôte…",
+                "noHosts": "Aucun hôte correspondant",
+                "allStatuses": "Tous les statuts"
             },
             "actions": {
                 "apply": "Appliquer les filtres",
diff --git a/web/src/server/Admin/ProxyAccessLogs/proxy-access-logs.service.ts b/web/src/server/Admin/ProxyAccessLogs/proxy-access-logs.service.ts
index 94732fb..e1e939e 100644
--- a/web/src/server/Admin/ProxyAccessLogs/proxy-access-logs.service.ts
+++ b/web/src/server/Admin/ProxyAccessLogs/proxy-access-logs.service.ts
@@ -1,25 +1,46 @@
 import '@tanstack/react-start/server-only'
 
+import { asc } from 'drizzle-orm'
+
 import type {
     ProxyAccessLogsQuery,
     ProxyAccessLogsResult,
 } from '../../../shared/Types/proxy-access-logs.types'
+import { hostDomains } from '../../../db/schema'
 import { requirePermissionService } from '../../Auth/Access/authorization.service'
 import { AuthDomainError } from '../../Auth/Core/errors.server'
+import { getAuthDatabase } from '../../Auth/Core/database.server'
 import { getProxyAccessLogs } from '../../Foundation/controller.server'
 import { proxyAccessLogsQuerySchema } from '../../../features/Admin/ProxyAccessLogs/validation'
 import { PERMISSIONS } from '../../../config/permissions.config'
 
+async function configuredProxyHostDomains(): Promise<readonly string[]> {
+    const rows = await getAuthDatabase()
+        .select({ domain: hostDomains.domain })
+        .from(hostDomains)
+        .orderBy(asc(hostDomains.domain))
+    return rows.map(({ domain }) => domain)
+}
+
 export async function getProxyAccessLogsService(
     input: ProxyAccessLogsQuery,
 ): Promise<ProxyAccessLogsResult> {
     await requirePermissionService(PERMISSIONS.PROXY_ACCESS_LOGS_VIEW)
     const query = proxyAccessLogsQuerySchema.parse(input)
-    const result = await getProxyAccessLogs(query)
+    const [result, configuredHosts] = await Promise.all([
+        getProxyAccessLogs(query),
+        configuredProxyHostDomains(),
+    ])
 
     if (!result) {
         throw new AuthDomainError('service_unavailable', 'Proxy access logs are unavailable.')
     }
 
-    return result
+    const availableHosts = [
+        ...new Set([...(result.availableHosts ?? []), ...configuredHosts]),
+    ].toSorted((left, right) => left.localeCompare(right))
+    const availableStatuses = [...new Set(result.availableStatuses ?? [])].toSorted(
+        (left, right) => left - right,
+    )
+    return { ...result, availableHosts, availableStatuses }
 }
diff --git a/web/src/shared/Select/Components/SelectOptionLabel.tsx b/web/src/shared/Select/Components/SelectOptionLabel.tsx
index ad1b1e8..bad5caa 100644
--- a/web/src/shared/Select/Components/SelectOptionLabel.tsx
+++ b/web/src/shared/Select/Components/SelectOptionLabel.tsx
@@ -1,16 +1,16 @@
+import { hasFlag } from 'country-flag-icons'
+
 import type { SelectControlOption } from '../Types/select-control.types'
 
 export default function SelectOptionLabel({ option }: { readonly option: SelectControlOption }) {
+    const hasCountryFlag = option.countryCode ? hasFlag(option.countryCode) : false
+
     return (
         <span className="inline-flex min-w-0 max-w-full items-center gap-2">
-            {option.imageSrc ? (
-                <img
-                    alt=""
+            {hasCountryFlag ? (
+                <span
                     aria-hidden="true"
-                    className="h-4 w-6 shrink-0 rounded-sm object-cover ring-1 ring-black/10"
-                    height={16}
-                    src={option.imageSrc}
-                    width={24}
+                    className={`flag:${option.countryCode} h-4 w-6 shrink-0 rounded-sm ring-1 ring-black/10 [--CountryFlagIcon-height:1rem]`}
                 />
             ) : null}
             <span className="truncate">{option.label}</span>
diff --git a/web/src/shared/Select/Types/select-control.types.ts b/web/src/shared/Select/Types/select-control.types.ts
index 62b3cd2..0e658b6 100644
--- a/web/src/shared/Select/Types/select-control.types.ts
+++ b/web/src/shared/Select/Types/select-control.types.ts
@@ -1,6 +1,6 @@
 export interface SelectControlOption {
+    readonly countryCode?: string | undefined
     readonly disabled?: boolean | undefined
-    readonly imageSrc?: string | undefined
     readonly label: string
     readonly value: string
 }
diff --git a/web/src/shared/Types/proxy-access-logs.types.ts b/web/src/shared/Types/proxy-access-logs.types.ts
index a98fc69..45be91a 100644
--- a/web/src/shared/Types/proxy-access-logs.types.ts
+++ b/web/src/shared/Types/proxy-access-logs.types.ts
@@ -6,6 +6,7 @@ export interface ProxyAccessLogEntry {
     readonly status: number
     readonly durationMs: number
     readonly clientIp: string
+    readonly countryCode?: string | null | undefined
     readonly upstream: string | null
     readonly bytes: number
     readonly protocol: string
@@ -25,6 +26,8 @@ export interface ProxyAccessLogsResult {
     readonly limit: number
     readonly offset: number
     readonly total: number
+    readonly availableHosts?: readonly string[]
+    readonly availableStatuses?: readonly number[]
     readonly hasMore: boolean
     readonly truncated: boolean
     readonly snapshot: string
diff --git a/web/src/styles.css b/web/src/styles.css
index 38e53d9..0b84435 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1,5 +1,6 @@
 @import '@fontsource/lilita-one/latin-400.css';
 @import 'react-easy-crop/react-easy-crop.css';
+@import 'country-flag-icons/3x2/flags.css';
 @import 'tailwindcss';
 
 @custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
diff --git a/web/src/tests/caddy-config-code-block.test.tsx b/web/src/tests/caddy-config-code-block.test.tsx
new file mode 100644
index 0000000..eb3cd68
--- /dev/null
+++ b/web/src/tests/caddy-config-code-block.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, test } from 'bun:test'
+
+import {
+    formatCaddyConfig,
+    tokenizeCaddyConfig,
+} from '../features/Admin/ProxyHostManagement/Components/CaddyConfigCodeBlock'
+
+describe('CaddyConfigCodeBlock', () => {
+    test('pretty prints valid Caddy JSON while preserving its data', () => {
+        const source = '{"http":{"servers":{"srv":{"listen":[":443"]}}}}'
+
+        expect(formatCaddyConfig(source)).toBe(`{
+  "http": {
+    "servers": {
+      "srv": {
+        "listen": [
+          ":443"
+        ]
+      }
+    }
+  }
+}`)
+    })
+
+    test('keeps an unavailable source readable when it is not valid JSON', () => {
+        const source = 'Caddy returned an unavailable configuration'
+
+        expect(formatCaddyConfig(source)).toBe(source)
+    })
+
+    test('classifies JSON keys and values for semantic syntax colors', () => {
+        const tokens = tokenizeCaddyConfig(
+            '{ "name": "edge", "port": 443, "enabled": true, "tls": null }',
+        )
+
+        expect(tokens.filter(({ kind }) => kind === 'key').map(({ value }) => value)).toEqual([
+            '"name"',
+            '"port"',
+            '"enabled"',
+            '"tls"',
+        ])
+        expect(
+            tokens
+                .filter(({ kind }) => kind === 'string')
+                .map(({ kind, value }) => ({ kind, value })),
+        ).toEqual([{ kind: 'string', value: '"edge"' }])
+        expect(
+            tokens
+                .filter(({ kind }) => kind === 'number')
+                .map(({ kind, value }) => ({ kind, value })),
+        ).toEqual([{ kind: 'number', value: '443' }])
+        expect(
+            tokens
+                .filter(({ kind }) => kind === 'boolean')
+                .map(({ kind, value }) => ({ kind, value })),
+        ).toEqual([{ kind: 'boolean', value: 'true' }])
+        expect(
+            tokens
+                .filter(({ kind }) => kind === 'null')
+                .map(({ kind, value }) => ({ kind, value })),
+        ).toEqual([{ kind: 'null', value: 'null' }])
+    })
+})
diff --git a/web/src/tests/client-ip-country-ui.test.tsx b/web/src/tests/client-ip-country-ui.test.tsx
new file mode 100644
index 0000000..93662fa
--- /dev/null
+++ b/web/src/tests/client-ip-country-ui.test.tsx
@@ -0,0 +1,50 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import ClientIpCountry from '../features/Admin/ProxyAccessLogs/Components/ClientIpCountry'
+import withTestLanguage from './Helpers/withTestLanguage'
+import { TooltipProvider } from '../shared/Tooltip'
+
+const entry = {
+    timestamp: '2026-09-13T12:00:00Z',
+    host: 'example.com',
+    method: 'GET',
+    path: '/',
+    status: 200,
+    durationMs: 1,
+    clientIp: '8.8.8.8',
+    upstream: null,
+    bytes: 0,
+    protocol: 'HTTP/2',
+}
+
+describe('client IP country display', () => {
+    test('keeps the address and locally rendered flag together with a localized country name', () => {
+        const html = renderToStaticMarkup(
+            withTestLanguage(
+                <TooltipProvider>
+                    <ClientIpCountry entry={{ ...entry, countryCode: 'US' }} />
+                </TooltipProvider>,
+                'de',
+            ),
+        )
+        expect(html).toContain('8.8.8.8')
+        expect(html).toContain('whitespace-nowrap')
+        expect(html).toContain('flag:US')
+        expect(html).toContain('Vereinigte Staaten')
+        expect(html).not.toContain('http')
+    })
+
+    test('shows just the IP for unknown or invalid country codes', () => {
+        for (const countryCode of [null, '', '../us', 'USA', 'ZZ']) {
+            const html = renderToStaticMarkup(
+                withTestLanguage(
+                    <TooltipProvider>
+                        <ClientIpCountry entry={{ ...entry, countryCode }} />
+                    </TooltipProvider>,
+                ),
+            )
+            expect(html).toContain(entry.clientIp)
+            expect(html).not.toContain('flag:')
+        }
+    })
+})
diff --git a/web/src/tests/i18n-ui.test.tsx b/web/src/tests/i18n-ui.test.tsx
index 488ff19..b39b9d5 100644
--- a/web/src/tests/i18n-ui.test.tsx
+++ b/web/src/tests/i18n-ui.test.tsx
@@ -5,8 +5,8 @@ import type { Root } from 'react-dom/client'
 
 import {
     AVAILABLE_LANGUAGES,
-    FLAG_IMAGES,
     isAppLanguage,
+    LANGUAGE_COUNTRY_CODES,
     LANGUAGE_RESOURCE_LOADERS,
 } from '../config/language.config'
 import { emailSchema } from '../features/Auth/Shared/validation'
@@ -50,7 +50,7 @@ function PickerProbe() {
             options={AVAILABLE_LANGUAGES.map((value) => ({
                 value,
                 label: t(`language.names.${value}`),
-                imageSrc: FLAG_IMAGES[value],
+                countryCode: LANGUAGE_COUNTRY_CODES[value],
             }))}
             onValueChange={(value) => {
                 if (isAppLanguage(value)) void setLanguage?.(value)
@@ -101,7 +101,7 @@ describe('authenticated language UI', () => {
         expect(renderToString(withTestLanguage(<LanguageProbe />, 'de'))).toBe(german)
         const dropdown = renderToString(withTestLanguage(<PickerProbe />, 'de'))
         expect(dropdown).toContain('Deutsch')
-        expect(dropdown).toContain(FLAG_IMAGES.de)
+        expect(dropdown).toContain('flag:DE')
     })
 
     test('preserves the selected language through StrictMode effect replay', async () => {
@@ -172,7 +172,7 @@ describe('authenticated language UI', () => {
     test('shows all four flags in the dropdown and keeps the selected flag after switching', async () => {
         const container = await render(withTestLanguage(<PickerProbe />))
         const trigger = container.querySelector<HTMLButtonElement>('[role="combobox"]')!
-        expect(trigger.querySelector('img')?.getAttribute('src')).toBe(FLAG_IMAGES.en)
+        expect(trigger.querySelector('[class*="flag:GB"]')).not.toBeNull()
         await act(async () => {
             trigger.dispatchEvent(
                 new PointerEvent('pointerdown', {
@@ -186,9 +186,13 @@ describe('authenticated language UI', () => {
         await waitFor(() => document.querySelector('[role="listbox"]') !== null)
         const options = [...document.querySelectorAll<HTMLElement>('[role="option"]')]
         expect(options.length).toBe(4)
-        expect(options.map((option) => option.querySelector('img')?.getAttribute('src'))).toEqual(
-            AVAILABLE_LANGUAGES.map((language) => FLAG_IMAGES[language]),
-        )
+        for (const language of AVAILABLE_LANGUAGES) {
+            expect(
+                options.some((option) =>
+                    option.querySelector(`[class*="flag:${LANGUAGE_COUNTRY_CODES[language]}"]`),
+                ),
+            ).toBe(true)
+        }
         const german = options.find((option) => option.textContent?.trim() === 'German')!
         await act(async () => {
             german.dispatchEvent(
@@ -202,7 +206,7 @@ describe('authenticated language UI', () => {
             german.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
         })
         await waitFor(() => trigger.textContent?.trim() === 'Deutsch')
-        expect(trigger.querySelector('img')?.getAttribute('src')).toBe(FLAG_IMAGES.de)
+        expect(trigger.querySelector('[class*="flag:DE"]')).not.toBeNull()
         expect(trigger.getAttribute('aria-label')).toBe('Anzeigesprache')
     })
 
diff --git a/web/src/tests/proxy-access-logs-service.test.ts b/web/src/tests/proxy-access-logs-service.test.ts
index 2bb74d5..bbf432d 100644
--- a/web/src/tests/proxy-access-logs-service.test.ts
+++ b/web/src/tests/proxy-access-logs-service.test.ts
@@ -11,6 +11,8 @@ const serviceScript = `
         limit: 100,
         offset: 0,
         total: 0,
+        availableHosts: [],
+        availableStatuses: [],
         hasMore: false,
         truncated: false,
     }
@@ -27,6 +29,15 @@ const serviceScript = `
             return expectedResult
         },
     }))
+    mock.module('./server/Auth/Core/database.server.ts', () => ({
+        getAuthDatabase: () => ({
+            select: () => ({
+                from: () => ({
+                    orderBy: async () => [{ domain: 'demo.test' }],
+                }),
+            }),
+        }),
+    }))
 
     const { getProxyAccessLogsService } = await import(
         './server/Admin/ProxyAccessLogs/proxy-access-logs.service.ts'
@@ -69,6 +80,8 @@ describe('proxy access-log service authorization', () => {
             limit: 100,
             offset: 0,
             total: 0,
+            availableHosts: ['demo.test'],
+            availableStatuses: [],
             hasMore: false,
             truncated: false,
         })
diff --git a/web/src/tests/proxy-access-logs-ui.test.tsx b/web/src/tests/proxy-access-logs-ui.test.tsx
index 0d2fcac..cede5be 100644
--- a/web/src/tests/proxy-access-logs-ui.test.tsx
+++ b/web/src/tests/proxy-access-logs-ui.test.tsx
@@ -48,6 +48,8 @@ const getProxyAccessLogsHandlerMock = mock(
             limit: data.limit ?? 15,
             offset: snapshotReset ? 0 : (data.offset ?? 0),
             total: 101,
+            availableHosts: ['app.example.com', 'other.example', 'ts-laser.example'],
+            availableStatuses: [200, 404],
             hasMore: (data.offset ?? 0) < 100,
             truncated: false,
             snapshot: snapshotReset
@@ -152,6 +154,22 @@ async function openActionMenu(container: HTMLElement): Promise<void> {
     await waitFor(() => document.querySelector('[role="menuitem"]') !== null)
 }
 
+async function chooseHost(container: HTMLElement, searchValue: string, optionLabel: string) {
+    await click(getButton(container, 'Host'))
+    await waitFor(() => document.querySelector('[role="listbox"]') !== null)
+    const searchInput = container.querySelector<HTMLInputElement>(
+        'input[placeholder="Search hosts…"]',
+    )
+    expect(searchInput).not.toBeNull()
+    expect(document.activeElement).toBe(searchInput)
+    await setInputValue(searchInput!, searchValue)
+    const option = [...document.querySelectorAll<HTMLElement>('[role="option"]')].find(
+        (candidate) => candidate.textContent?.trim() === optionLabel,
+    )
+    expect(option).toBeDefined()
+    await click(option!)
+}
+
 async function chooseActionMenuItem(label: string): Promise<void> {
     const item = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
         (candidate) => candidate.textContent?.trim() === label,
@@ -231,11 +249,7 @@ describe('proxy access-log UI', () => {
         })
         expect(container.textContent).toContain('/dashboard')
 
-        const hostInput = container.querySelector<HTMLInputElement>(
-            'input[placeholder="example.com"]',
-        )
-        expect(hostInput).not.toBeNull()
-        await setInputValue(hostInput!, 'app.example.com')
+        await chooseHost(container, 'app.example', 'app.example.com')
         expect(getProxyAccessLogsHandlerMock).toHaveBeenCalledTimes(1)
 
         await click(getButton(container, 'Apply filters'))
@@ -348,23 +362,49 @@ describe('proxy access-log UI', () => {
         const filterPanel = getFilterPanel(container, filtersButton)
         expectFilterTogglePlacement(filtersButton, filterPanel)
         expect(filtersButton.getAttribute('aria-expanded')).toBe('false')
-        const hostInput = container.querySelector<HTMLInputElement>(
-            'input[placeholder="example.com"]',
-        )
-        expect(hostInput).not.toBeNull()
+        const hostTrigger = getButton(container, 'Host')
 
         await click(filtersButton)
         expect(filtersButton.getAttribute('aria-expanded')).toBe('true')
-        await setInputValue(hostInput!, 'app.example.com')
+        await chooseHost(container, 'app.example', 'app.example.com')
         await click(filtersButton)
         expect(filtersButton.getAttribute('aria-expanded')).toBe('false')
-        expect(hostInput?.value).toBe('app.example.com')
+        expect(hostTrigger.textContent).toContain('app.example.com')
 
         await click(getButton(container, 'Reset filters'))
-        expect(hostInput?.value).toBe('')
+        expect(hostTrigger.textContent).toContain('All hosts')
         expect(getButton(container, 'Filters').getAttribute('aria-label')).toBe('Filters')
     })
 
+    test('selects a status from the available status options', async () => {
+        const container = await renderPage([PERMISSIONS.PROXY_ACCESS_LOGS_VIEW])
+        await waitFor(() => container.textContent?.includes('/dashboard') === true)
+
+        await chooseSelectOption('Status', '404')
+        await click(getButton(container, 'Apply filters'))
+        await waitFor(() => getProxyAccessLogsHandlerMock.mock.calls.length === 2)
+
+        expect(getProxyAccessLogsHandlerMock.mock.calls[1]?.[0]).toEqual({
+            data: { limit: 15, offset: 0, status: 404 },
+        })
+    })
+
+    test('debounces general search and includes partial host names in the query', async () => {
+        const container = await renderPage([PERMISSIONS.PROXY_ACCESS_LOGS_VIEW])
+        await waitFor(() => container.textContent?.includes('/dashboard') === true)
+
+        const searchInput = container.querySelector<HTMLInputElement>(
+            'input[placeholder="Search host, method, or path…"]',
+        )
+        expect(searchInput).not.toBeNull()
+        await setInputValue(searchInput!, 'ts-laser')
+        await waitFor(() => getProxyAccessLogsHandlerMock.mock.calls.length === 2)
+
+        expect(getProxyAccessLogsHandlerMock.mock.calls[1]?.[0]).toEqual({
+            data: { limit: 15, offset: 0, search: 'ts-laser' },
+        })
+    })
+
     test('opens request details from the action column while keeping time non-interactive', async () => {
         const container = await renderPage([PERMISSIONS.PROXY_ACCESS_LOGS_VIEW])
         await waitFor(() => container.textContent?.includes('/dashboard') === true)
diff --git a/web/src/tests/proxy-access-logs.test.ts b/web/src/tests/proxy-access-logs.test.ts
index 0e75a91..427cd35 100644
--- a/web/src/tests/proxy-access-logs.test.ts
+++ b/web/src/tests/proxy-access-logs.test.ts
@@ -44,6 +44,27 @@ function restoreControllerEnvironment(): void {
 afterEach(restoreControllerEnvironment)
 
 describe('proxy access-log validation', () => {
+    test('preserves stored country codes and rejects malformed values', () => {
+        const result = {
+            entries: [{ ...entry, countryCode: 'DE' }],
+            limit: 15,
+            offset: 0,
+            total: 1,
+            hasMore: false,
+            truncated: false,
+            ...snapshotMetadata,
+        }
+        expect(proxyAccessLogsResultSchema.parse(result).entries[0]?.countryCode).toBe('DE')
+        for (const countryCode of ['de', 'USA', '../DE']) {
+            expect(
+                proxyAccessLogsResultSchema.safeParse({
+                    ...result,
+                    entries: [{ ...entry, countryCode }],
+                }).success,
+            ).toBeFalse()
+        }
+    })
+
     test('requires valid snapshot metadata and resets only to the first page', () => {
         const result = {
             entries: [],
@@ -198,6 +219,8 @@ describe('proxy access-log controller transport', () => {
                 limit: 20,
                 offset: 40,
                 total: 41,
+                availableHosts: [],
+                availableStatuses: [],
                 hasMore: false,
                 truncated: false,
                 ...snapshotMetadata,
@@ -219,6 +242,8 @@ describe('proxy access-log controller transport', () => {
                 limit: 20,
                 offset: 40,
                 total: 41,
+                availableHosts: [],
+                availableStatuses: [],
                 hasMore: false,
                 truncated: false,
                 ...snapshotMetadata,
diff --git a/web/src/tests/proxy-hosts-ui.test.tsx b/web/src/tests/proxy-hosts-ui.test.tsx
index 9e65a47..8cee9d2 100644
--- a/web/src/tests/proxy-hosts-ui.test.tsx
+++ b/web/src/tests/proxy-hosts-ui.test.tsx
@@ -1278,47 +1278,18 @@ describe('Caddy global proxy configuration editor', () => {
         await waitFor(() => document.querySelectorAll('input[type="number"]').length === 6)
     }
 
-    test('disables editing and guards duplicate reloads while refresh is pending', async () => {
+    test('shows only settings and active config with formatted syntax colors', async () => {
         await openEditor()
-        const input = document.querySelectorAll<HTMLInputElement>('input[type="number"]')[2]!
-        await setControlValue(input, '77777')
+        expect(document.body.textContent).not.toContain('Generated defaults')
+        expect(document.body.textContent).not.toContain('Preview')
+        expect(document.body.textContent).not.toContain('Reload')
 
-        let releaseReload!: (value: ProxyConfigEditorData) => void
-        getProxyConfigEditorHandlerMock.mockImplementationOnce(
-            () =>
-                new Promise<ProxyConfigEditorData>((resolve) => {
-                    releaseReload = resolve
-                }),
-        )
-        const reload = getButton('Reload')
-        await click(reload)
-        await waitFor(() => getProxyConfigEditorHandlerMock.mock.calls.length === 2)
-        await waitFor(() => reload.disabled && input.disabled)
-        expect(input.value).toBe('77777')
-
-        await click(reload)
-        expect(getProxyConfigEditorHandlerMock).toHaveBeenCalledTimes(2)
-
-        releaseReload(globalEditorFixture)
-        await waitFor(() => input.disabled === false)
-        expect(input.value).toBe('90')
-    })
-
-    test('preserves the draft and reports a safe error when refresh fails', async () => {
-        await openEditor()
-        const input = document.querySelectorAll<HTMLInputElement>('input[type="number"]')[2]!
-        await setControlValue(input, '88888')
-        getProxyConfigEditorHandlerMock.mockRejectedValueOnce(new Error('private config details'))
-
-        await click(getButton('Reload'))
-        await waitFor(() => getProxyConfigEditorHandlerMock.mock.calls.length === 2)
-        await waitFor(
-            () =>
-                document.body.textContent?.includes('The configuration could not be loaded.') ===
-                true,
-        )
-        expect(input.value).toBe('88888')
-        expect(document.body.textContent).not.toContain('private config details')
+        await click(getButton('Active config'))
+        const codeBlock = document.querySelector('pre[aria-label="Active config"]')
+        expect(codeBlock).not.toBeNull()
+        expect(codeBlock?.textContent).toContain('\n  "http"')
+        expect(codeBlock?.querySelector('[data-token="key"]')).not.toBeNull()
+        expect(codeBlock?.querySelector('[data-token="number"]')).not.toBeNull()
     })
 })