diff --git a/Cargo.lock b/Cargo.lock
index fc05d080a..14609e8c2 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -885,6 +885,7 @@ dependencies = [
  "redoxer",
  "regex",
  "serde",
+ "serde_json",
  "strip-ansi-escapes",
  "termion",
  "toml",
@@ -1018,24 +1019,47 @@ checksum = "d767eb0aabc880b29956c35734170f26ed551a859dbd361d140cdbeca61ab1e2"
 
 [[package]]
 name = "serde"
-version = "1.0.197"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3fb1c873e1b9b056a4dc4c0c198b24c3ffa059243875552b2bd0933b1aee4ce2"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.197"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7eb0b34b42edc17f6b7cac84a52a1c5f0e1bb2227e997ca9011ea3dd34e8610b"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
  "proc-macro2",
  "quote",
  "syn",
 ]
 
+[[package]]
+name = "serde_json"
+version = "1.0.149"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+dependencies = [
+ "itoa",
+ "memchr",
+ "serde",
+ "serde_core",
+ "zmij",
+]
+
 [[package]]
 name = "serde_spanned"
 version = "0.6.9"
@@ -1458,3 +1482,9 @@ dependencies = [
  "quote",
  "syn",
 ]
+
+[[package]]
+name = "zmij"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
diff --git a/Cargo.toml b/Cargo.toml
index ad32286ff..91e9cca2f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -42,12 +42,13 @@ redox-pkg = { git = "https://gitlab.redox-os.org/redox-os/pkgutils.git", default
 redox_installer = { git = "https://gitlab.redox-os.org/redox-os/installer.git", default-features = false }
 redoxer = { git = "https://gitlab.redox-os.org/redox-os/redoxer.git", default-features = false }
 regex = "1.11"
-serde = { version = "=1.0.197", features = ["derive"] }
+serde = { version = "1", features = ["derive"] }
 termion = "4"
 toml = "0.8"
 walkdir = "2.3.1"
 ansi-to-tui = { version = "8", optional = true }
 strip-ansi-escapes = { version = "0.2.1", optional = true }
+serde_json = "1"
 
 [dependencies.ratatui]
 version = "0.30"
diff --git a/src/web.rs b/src/web.rs
index e669bc8ad..922483e26 100644
--- a/src/web.rs
+++ b/src/web.rs
@@ -13,6 +13,7 @@ use crate::{
 };
 
 pub mod html;
+pub mod search;
 
 #[derive(Clone)]
 pub struct CliWebConfig {
@@ -49,6 +50,7 @@ impl CliWebConfig {
 }
 
 const CSS: &str = include_str!("./web/style.css");
+const FILES: &str = include_str!("./web/files.html");
 
 pub fn generate_web(all_packages: &Vec<String>, config: &CliWebConfig) {
     let repo_path = &config.out_dir.join(redoxer::target());
@@ -58,6 +60,7 @@ pub fn generate_web(all_packages: &Vec<String>, config: &CliWebConfig) {
 
     let mut valid_packages = Vec::new();
     let mut dependents_map: HashMap<String, BTreeSet<String>> = HashMap::new();
+    let mut files_map: BTreeMap<String, String> = BTreeMap::new();
 
     for package_name in all_packages {
         let Ok(package_name) = PackageName::new(package_name) else {
@@ -108,6 +111,10 @@ pub fn generate_web(all_packages: &Vec<String>, config: &CliWebConfig) {
             &html_path,
             &config,
         );
+
+        if let Some(file_map) = stage_files {
+            files_map.insert(package.name.to_string(), file_map);
+        }
     }
 
     let mut grouped_packages: BTreeMap<String, Vec<&(Package, CookRecipe)>> = BTreeMap::new();
@@ -120,7 +127,18 @@ pub fn generate_web(all_packages: &Vec<String>, config: &CliWebConfig) {
     let index_path = repo_path.join("index.html");
     let style_path = repo_path.join("style.css");
     generate_html_index(grouped_packages, &index_path, &config);
-    fs::write(style_path, CSS).expect("Failed to write CSS file");
+    fs::write(style_path, CSS).expect("Failed to write style.css");
+
+    let mut index_files = search::FileIndexBuilder::new();
+    for (package, files) in &files_map {
+        index_files.parse(package, files);
+    }
+    let files_json = repo_path.join("files.json");
+    index_files
+        .write(&files_json)
+        .expect("Failed to write files.json");
+    let files_path = repo_path.join("files.html");
+    fs::write(files_path, FILES).expect("Failed to write files.html");
 }
 
 pub(crate) fn get_category(dir: &Path) -> String {
diff --git a/src/web/files.html b/src/web/files.html
new file mode 100644
index 000000000..f4dccde1b
--- /dev/null
+++ b/src/web/files.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Package File Browser</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="container">
+    <h1 class="category-title">Package File Browser</h1>
+
+    <div class="card">
+      <input type="text" id="searchInput" class="search-box" placeholder="Type file name" autocomplete="off">
+
+      <div class="browser-panels">
+        <div class="panel">
+          <div class="panel-header" id="dirHeader">/</div>
+          <div class="panel-body" id="dirPanel">
+            <div style="padding: 15px; color: #777;">Loading files...</div>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="panel-header" id="fileHeader">Files</div>
+          <div class="panel-body" id="filePanel"></div>
+        </div>
+        <div class="panel">
+          <div class="panel-header" id="contentHeader">File Content</div>
+          <div class="panel-body" id="contentPanel" style="padding: 15px;">
+            <div style="color: #777; text-align: center; margin-top: 50px;">
+              Select a file to reveal details.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // @ts-check
+
+    /** @type {DB} */
+    let db = {};
+    /** @type {DB} */
+    let activeDb = {};
+    /** @type {string[]} */
+    let pathStack = ["/"];
+    /** @type {string[][]} */
+    let historyStack = [];
+    let currentSearch = "";
+    /** @type {string[]|null} */
+    let lockedFileViewPath = null;
+
+
+    const searchInput = document.getElementById('searchInput') || (() => { throw new Error("missing html"); })();
+    const dirHeader = document.getElementById('dirHeader') || (() => { throw new Error("missing html"); })();
+    const dirPanel = document.getElementById('dirPanel') || (() => { throw new Error("missing html"); })();
+    const fileHeader = document.getElementById('fileHeader') || (() => { throw new Error("missing html"); })();
+    const filePanel = document.getElementById('filePanel') || (() => { throw new Error("missing html"); })();
+    const contentHeader = document.getElementById('contentHeader') || (() => { throw new Error("missing html"); })();
+    const contentPanel = document.getElementById('contentPanel') || (() => { throw new Error("missing html"); })();
+
+    /** 
+     * @typedef {Record<string, any>} DB
+     */
+
+    /**
+     *  @param {DB} node
+     *  @param {string} query
+     *  @param {boolean} parentMatched
+     *  @returns {DB|null}
+     */
+    function filterDb(node, query, parentMatched = false) {
+      /** @type {DB} */
+      let result = {};
+      let filesCount = 0;
+
+      for (const [key, value] of Object.entries(node)) {
+        if (typeof value === 'object') {
+          const isMatch = parentMatched || key.toLowerCase().includes(query);
+          const subTree = filterDb(value, query, isMatch);
+          if (subTree !== null) {
+            result[key] = subTree;
+            filesCount++;
+          }
+        } else {
+          if (parentMatched || key.toLowerCase().includes(query)) {
+            result[key] = value;
+            filesCount++;
+          }
+        }
+      }
+      return filesCount > 0 ? result : null;
+    }
+
+    /**
+     *  @param {DB} node
+     *  @returns {DB}
+     */
+    function cascadeTree(node) {
+      if (typeof node !== 'object' || node === null) return node;
+
+      /** @type {DB} */
+      let newNode = {};
+      /** @type {Record<string, string>} */
+      let files = {};
+      /** @type {Record<string, DB>} */
+      let dirs = {};
+
+      for (const [key, value] of Object.entries(node)) {
+        if (typeof value === 'object') {
+          dirs[key] = cascadeTree(value);
+        } else {
+          files[key] = value;
+        }
+      }
+
+      for (const [dirKey, dirNode] of Object.entries(dirs)) {
+        let childHasFiles = false;
+
+        for (const val of Object.values(dirNode)) {
+          if (typeof val !== 'object') {
+            childHasFiles = true;
+            break;
+          }
+        }
+
+        if (!childHasFiles && Object.keys(dirNode).length > 0) {
+          for (const [subKey, subValue] of Object.entries(dirNode)) {
+            newNode[`${dirKey}/${subKey}`] = subValue;
+          }
+        } else {
+          newNode[dirKey] = dirNode;
+        }
+      }
+
+      for (const [fileKey, fileVal] of Object.entries(files)) {
+        newNode[fileKey] = fileVal;
+      }
+
+      return newNode;
+    }
+
+    /**
+     *  @param {string[]} pathArray
+     */
+    function getNodeByPath(pathArray) {
+      let node = activeDb;
+      if (!node) return null;
+      for (let i = 1; i < pathArray.length; i++) {
+        if (node[pathArray[i]]) {
+          node = node[pathArray[i]];
+        } else {
+          return null;
+        }
+      }
+      return node;
+    }
+
+    function getCurrentNode() {
+      return getNodeByPath(pathStack);
+    }
+
+
+    /**
+     *  @param {DB|null} node
+     *  @param {string[]} basePathArray
+     */
+    function renderFiles(node, basePathArray, isPeeking = false) {
+      filePanel.innerHTML = '';
+
+      if (isPeeking) {
+        const peekName = basePathArray[basePathArray.length - 1];
+        fileHeader.innerHTML = `Files <span style="color:#777; font-weight:normal; font-size:0.9em;">(Peeking: ${peekName})</span>`;
+      } else if (lockedFileViewPath) {
+        const lockName = lockedFileViewPath[lockedFileViewPath.length - 1];
+        fileHeader.innerHTML = `Files <span style="color:#ddd; font-weight:normal; font-size:0.9em;">(Selected: ${lockName})</span>`;
+      } else {
+        fileHeader.innerHTML = `Files`;
+      }
+
+      if (!node) {
+        filePanel.innerHTML = `<div style="padding: 15px; color: #777;">No files available</div>`;
+        return;
+      }
+
+      let files = [];
+      for (const [key, value] of Object.entries(node)) {
+        if (typeof value === 'string') {
+          files.push({ name: key, pkgs: value });
+        }
+      }
+      files.sort((a, b) => a.name.localeCompare(b.name));
+
+      files.forEach(file => {
+        const fileDiv = document.createElement('div');
+        fileDiv.className = 'list-item';
+        const pkgSpans = file.pkgs.split(',').map(p => `<span class="pkg-badge">${p}</span>`).join(' ');
+        fileDiv.innerHTML = `<span style="margin-right: auto">${file.name}</span> <div>${pkgSpans}</div>`;
+
+        fileDiv.onclick = () => {
+          Array.from(filePanel.children).forEach(c => c.classList.remove('selected'));
+          fileDiv.classList.add('selected');
+          showFileContent(file.name, file.pkgs, basePathArray);
+        };
+        filePanel.appendChild(fileDiv);
+      });
+
+      if (files.length === 0) {
+        filePanel.innerHTML = `<div style="padding: 15px; color: #777;">No files in this directory</div>`;
+      }
+    }
+
+    /**
+     *  @param {HTMLElement} container
+     *  @param {DB} node
+     *  @param {number} currentDepth
+     *  @param {number} maxDepth
+     *  @param {string[]} currentPathArray
+     */
+    function renderDirTree(container, node, currentDepth, maxDepth, currentPathArray) {
+      if (currentDepth >= maxDepth || !node) return;
+
+      let dirs = [];
+      for (const [key, value] of Object.entries(node)) {
+        if (typeof value === 'object') dirs.push(key);
+      }
+      dirs.sort();
+
+      dirs.forEach(dir => {
+        const dirDiv = document.createElement('div');
+        dirDiv.className = 'list-item';
+
+        dirDiv.style.paddingLeft = `${15 + (currentDepth * 20)}px`;
+
+        if (currentDepth > 0) {
+          dirDiv.style.fontSize = '0.95em';
+          dirDiv.style.borderLeft = "1px solid #eee";
+        }
+
+        const nextPathArray = [...currentPathArray, dir];
+
+        let hasSubDirs = false;
+        for (const val of Object.values(node[dir])) {
+          if (typeof val === 'object') {
+            hasSubDirs = true;
+            break;
+          }
+        }
+
+        if (lockedFileViewPath && lockedFileViewPath.join('/') === nextPathArray.join('/')) {
+          dirDiv.classList.add('selected');
+        }
+
+        dirDiv.innerHTML = `<span>${dir}</span>`;
+
+        dirDiv.addEventListener('mouseenter', () => {
+          renderFiles(node[dir], nextPathArray, true);
+        });
+        dirDiv.addEventListener('mouseleave', () => {
+          const targetPath = lockedFileViewPath || pathStack;
+          renderFiles(getNodeByPath(targetPath), targetPath, false);
+        });
+        dirDiv.onclick = () => {
+          if (hasSubDirs) {
+            historyStack.push([...pathStack]);
+            pathStack = nextPathArray;
+            lockedFileViewPath = null;
+          } else {
+            if (lockedFileViewPath && lockedFileViewPath.join('/') === nextPathArray.join('/')) {
+              lockedFileViewPath = null;
+            } else {
+              lockedFileViewPath = nextPathArray;
+            }
+          }
+          clearContentPanel();
+          render();
+        };
+
+        container.appendChild(dirDiv);
+
+        renderDirTree(container, node[dir], currentDepth + 1, maxDepth, nextPathArray);
+      });
+    }
+
+    function render() {
+      let node = getCurrentNode();
+
+      if (!node) {
+        // reset to root
+        pathStack = ["/"];
+        historyStack = [];
+        node = getCurrentNode();
+        lockedFileViewPath = null;
+        if (!node) return;
+      }
+
+      dirHeader.innerText = pathStack.join('/').replace('//', '/');
+
+      dirPanel.innerHTML = '';
+
+      if (historyStack.length > 0) {
+        const backDiv = document.createElement('div');
+        backDiv.className = 'list-item up-icon';
+        backDiv.innerHTML = `<span>Back</span>`;
+        backDiv.onclick = () => {
+          pathStack = historyStack.pop() || ['/'];
+          lockedFileViewPath = null;
+          clearContentPanel();
+          render();
+        };
+        dirPanel.appendChild(backDiv);
+      }
+
+      renderDirTree(dirPanel, node, 0, 3, pathStack);
+
+      if (dirPanel.children.length === 0 || (dirPanel.children.length === 1 && pathStack.length > 1)) {
+        const emptyMsg = document.createElement('div');
+        emptyMsg.style.padding = '15px';
+        emptyMsg.style.color = '#777';
+        emptyMsg.innerText = 'No subdirectories';
+        dirPanel.appendChild(emptyMsg);
+      }
+
+      renderFiles(node, pathStack, false);
+    }
+
+
+    /**
+     *  @param {string} fileName
+     *  @param {string} packages
+     *  @param {string[]} basePathArray
+     */
+    function showFileContent(fileName, packages, basePathArray) {
+      const fullPath = (basePathArray.join('/') + '/' + fileName).replace('//', '/');
+      contentHeader.innerText = fileName;
+      contentPanel.innerHTML = `
+        <div style="margin-bottom: 15px;">
+            <strong>Path:</strong> <br>
+            <code>${fullPath}</code>
+        </div>
+        <div style="margin-bottom: 15px;">
+            <strong>Provided by:</strong> <br>
+            ${packages.split(',').map(p => `<code>${p}</code>`).join(', ')}
+        </div>
+        `;
+    }
+
+    function clearContentPanel() {
+      contentHeader.innerText = 'File Content';
+      contentPanel.innerHTML = `
+        <div style="color: #777; text-align: center; margin-top: 50px;">
+            Select a file to reveal details.
+        </div>
+        `;
+    }
+
+    searchInput.addEventListener('input', (e) => {
+      /** @type {HTMLInputElement|null} */
+      // @ts-ignore
+      let el = e.currentTarget;
+      if (!el) {
+        return;
+      }
+      currentSearch = el.value.trim().toLowerCase();
+
+      if (currentSearch === "") {
+        activeDb = cascadeTree(db);
+      } else {
+        activeDb = cascadeTree(filterDb(db, currentSearch) || {});
+      }
+
+      lockedFileViewPath = null;
+      clearContentPanel();
+      render();
+    });
+
+    fetch('files.json')
+      .then(response => {
+        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+        return response.json();
+      })
+      .then(data => {
+        db = data;
+        activeDb = cascadeTree(db);
+        render();
+      })
+      .catch(error => {
+        console.error("Failed to load files.json:", error);
+        dirPanel.innerHTML = `
+            <div style="padding: 15px; color: #f00;">
+                <strong>Error loading files.json</strong><br><br>
+            </div>
+            `;
+      });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/web/search.rs b/src/web/search.rs
new file mode 100644
index 000000000..85653709b
--- /dev/null
+++ b/src/web/search.rs
@@ -0,0 +1,113 @@
+use serde::Serialize;
+use std::collections::BTreeMap;
+use std::fs::File;
+use std::io::Write;
+use std::path::Path;
+
+use crate::{Result, wrap_io_err};
+
+#[derive(Serialize, Debug, Clone)]
+#[serde(untagged)]
+enum FsNode {
+    Dir(BTreeMap<String, FsNode>),
+    File(String),
+}
+
+pub struct FileIndexBuilder {
+    inner: BTreeMap<String, FsNode>,
+}
+impl FileIndexBuilder {
+    pub const fn new() -> Self {
+        Self {
+            inner: BTreeMap::new(),
+        }
+    }
+    fn insert_node(&mut self, path_stack: &[String], name: &str, pkg_name: Option<&str>) {
+        let mut current = &mut self.inner;
+        for dir in path_stack {
+            let node = current
+                .entry(dir.clone())
+                .or_insert_with(|| FsNode::Dir(BTreeMap::new()));
+
+            if let FsNode::File(_) = node {
+                // previously a file, silently replace to dir
+                *node = FsNode::Dir(BTreeMap::new());
+            }
+
+            match node {
+                FsNode::Dir(map) => current = map,
+                _ => unreachable!(),
+            }
+        }
+
+        if let Some(pkg) = pkg_name {
+            current
+                .entry(name.to_string())
+                .and_modify(|node| {
+                    if let FsNode::File(existing_pkgs) = node {
+                        existing_pkgs.push(',');
+                        existing_pkgs.push_str(pkg);
+                    } else {
+                        *node = FsNode::File(pkg.to_string());
+                    }
+                })
+                .or_insert_with(|| FsNode::File(pkg.to_string()));
+        } else {
+            current
+                .entry(name.to_string())
+                .or_insert_with(|| FsNode::Dir(BTreeMap::new()));
+        }
+    }
+    pub fn parse(&mut self, pkg: &str, content: &str) {
+        let mut path_stack: Vec<String> = Vec::new();
+
+        for line in content.lines() {
+            if line.trim().is_empty() {
+                continue;
+            }
+
+            let mut prefix_chars: usize = 0;
+            let mut name_start_byte = 0;
+
+            for (idx, c) in line.char_indices() {
+                if "│├└─ ".contains(c) {
+                    prefix_chars += 1;
+                } else {
+                    name_start_byte = idx;
+                    break;
+                }
+            }
+
+            if name_start_byte == 0 && prefix_chars == 0 {
+                continue;
+            }
+
+            let depth = (prefix_chars / 4).saturating_sub(1);
+            let remainder = line[name_start_byte..].trim();
+
+            path_stack.truncate(depth);
+
+            if remainder.ends_with('/') {
+                let name = remainder.trim_end_matches('/');
+                self.insert_node(&path_stack, name, None);
+                path_stack.push(name.to_string());
+            } else {
+                let name = if let Some(paren_idx) = remainder.rfind('(') {
+                    // Strip size
+                    remainder[..paren_idx].trim()
+                } else {
+                    remainder
+                };
+                self.insert_node(&path_stack, name, Some(pkg));
+            }
+        }
+    }
+    pub fn write(&self, path: &Path) -> Result<()> {
+        // JSON: because javascript have them natively
+        let json_output = serde_json::to_string(&self.inner).unwrap();
+        let mut file = File::create(path).map_err(wrap_io_err!(path, "Opening file"))?;
+        file.write_all(json_output.as_bytes())
+            .map_err(wrap_io_err!(path, "Writing file"))?;
+        Ok(())
+    }
+}
diff --git a/src/web/style.css b/src/web/style.css
index 560735ea6..87773f551 100644
--- a/src/web/style.css
+++ b/src/web/style.css
@@ -43,11 +43,9 @@ body {
     border-radius: 6px;
     padding: 15px;
     margin: 10px;
-    
     display: inline-block;
     width: 30%;
     vertical-align: top;
-    
     display: flex;
     flex: 0 1 280px;
     flex-direction: column;
@@ -162,7 +160,7 @@ code {
 }
 
 .install-action {
-    display: inline-block; 
+    display: inline-block;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 6px;
@@ -191,7 +189,7 @@ code {
 }
 
 .pkg-main, .pkg-meta {
-    width: 100%; 
+    width: 100%;
 }
 
 @media (min-width: 768px) {
@@ -245,13 +243,90 @@ th {
     width: 50%;
 }
 
+.search-box {
+    width: 100%;
+    padding: 12px 15px;
+    font-size: 1.1rem;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    font-family: inherit;
+}
+
+.browser-panels {
+    display: flex;
+    gap: 20px;
+    height: 80vh;
+    min-height: 400px;
+}
+
+.panel {
+    flex: 1;
+    border: 1px solid #eee;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    overflow: hidden;
+}
+
+.panel-header {
+    font-weight: 600;
+    padding: 10px 15px;
+    border-bottom: 1px solid #eee;
+    background-color: #f9f9f9;
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 0.9rem;
+}
+
+.panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 0;
+}
+
+.list-item {
+    padding: 8px 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.list-item:hover {
+    background-color: #f1f8ff;
+}
+
+.list-item.selected {
+    background-color: #0366d6;
+    color: #fff;
+}
+
+.list-item.selected .pkg-badge {
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pkg-badge {
+    font-size: 0.75rem;
+    color: #6a737d;
+    background-color: #eee;
+    padding: 2px 6px;
+    border-radius: 12px;
+}
+.up-icon::before {
+    content: "↵ ";
+    margin-right: 0.2em;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #000;
         color: #ccc;
     }
 
-    .package-card, .card, .pkg-header, .index-header {
+    .package-card, .card, .panel, .pkg-header, .index-header {
         background-color: #111;
         border-color: #333;
     }
@@ -289,4 +364,30 @@ th {
     th, td, .pkg-deps li, .pkg-dependents li {
         border-bottom-color: #333;
     }
-}
+
+    .search-box {
+        background-color: #000;
+        color: #ccc;
+        border-color: #333;
+    }
+
+    .panel-header {
+        background-color: #1a1a1a;
+        border-bottom-color: #333;
+        color: #8b949e;
+    }
+
+    .list-item:hover {
+        background-color: #222;
+    }
+
+    .list-item.selected {
+        background-color: #1f6feb;
+        color: #fff;
+    }
+
+    .pkg-badge {
+        background-color: #333;
+        color: #8b949e;
+    }
+}
\ No newline at end of file