diff --git a/index.html b/index.html
index 4927dc3..6c0f552 100644
--- a/index.html
+++ b/index.html
@@ -8,48 +8,544 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>raw-content</title>
+<style>
+:root {
+  --color-fg: #1f2328;
+  --color-fg-muted: #59636e;
+  --color-fg-accent: #0969da;
+  --color-fg-danger: #d1242f;
+  --color-bg: #ffffff;
+  --color-bg-subtle: #f6f8fa;
+  --color-border: #d1d9e0;
+  --color-border-muted: #d8dee4;
+  --color-shadow: rgba(31, 35, 40, 0.12);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg: #e6edf3;
+    --color-fg-muted: #8b949e;
+    --color-fg-accent: #4493f8;
+    --color-fg-danger: #f85149;
+    --color-bg: #0d1117;
+    --color-bg-subtle: #161b22;
+    --color-border: #30363d;
+    --color-border-muted: #21262d;
+    --color-shadow: rgba(0, 0, 0, 0.4);
+  }
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+body {
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  padding: 32px 16px;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--color-fg-accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.container { max-width: 1012px; margin: 0 auto; }
+
+/* --- Repo header (immutable) --- */
+.repo-header {
+  font-size: 20px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+.repo-header a { color: var(--color-fg-accent); }
+.repo-header .repo { font-weight: 600; }
+.repo-header .sep { color: var(--color-fg-muted); padding: 0 4px; font-weight: 300; }
+
+/* --- Toolbar (branch + path) --- */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 6px 6px 0 0;
+}
+
+/* --- Branch selector --- */
+.branch-selector { position: relative; }
+.branch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 12px;
+  font-size: 14px;
+  font-family: var(--font);
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 20px;
+}
+.branch-btn:hover { background: var(--color-bg-subtle); }
+.branch-btn svg { fill: var(--color-fg-muted); flex-shrink: 0; }
+
+/* --- Branch dropdown --- */
+.branch-dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 220px;
+  max-height: 300px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px var(--color-shadow);
+  z-index: 100;
+}
+.branch-dropdown.open { display: flex; flex-direction: column; }
+.dropdown-header {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-muted);
+  border-bottom: 1px solid var(--color-border-muted);
+  flex-shrink: 0;
+}
+.dropdown-list {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  color: var(--color-fg);
+  text-decoration: none;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dropdown-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
+.dropdown-item.active { font-weight: 600; }
+.dropdown-item .check { width: 16px; flex-shrink: 0; display: flex; }
+.dropdown-item .check svg { fill: var(--color-fg); }
+.dropdown-item .branch-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dropdown-loading {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+  font-size: 13px;
+}
+
+/* --- Path breadcrumb --- */
+.path-crumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 0;
+}
+.path-crumb .sep { color: var(--color-fg-muted); padding: 0 4px; }
+.path-crumb .cur { font-weight: 600; }
+
+/* --- Listing --- */
+.listing {
+  border: 1px solid var(--color-border);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
+}
+.row {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border-muted);
+  gap: 8px;
+  color: var(--color-fg);
+  text-decoration: none;
+}
+.row:first-child { border-top: none; }
+.row:hover { background: var(--color-bg-subtle); }
+.row svg { flex-shrink: 0; fill: var(--color-fg-muted); }
+.row.dir svg { fill: var(--color-fg-accent); }
+.row .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row:hover .name { color: var(--color-fg-accent); }
+
+/* --- File viewer --- */
+.file-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+.file-info {
+  color: var(--color-fg-muted);
+  font-size: 12px;
+}
+.file-actions a {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 12px;
+  font-size: 12px;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}
+.file-actions a:hover { background: var(--color-bg-subtle); text-decoration: none; }
+.file-content {
+  display: flex;
+  overflow-x: auto;
+}
+.file-content pre {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.45;
+  tab-size: 4;
+  white-space: pre;
+  color: var(--color-fg);
+}
+.line-nums {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  flex-shrink: 0;
+  padding: 16px 12px 16px 16px;
+  text-align: right;
+  color: var(--color-fg-muted);
+  background: var(--color-bg);
+  border-right: 1px solid var(--color-border-muted);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.line-code {
+  flex: 1;
+  padding: 16px;
+  min-width: 0;
+}
+.file-content.image {
+  display: block;
+}
+.file-content img {
+  display: block;
+  max-width: 100%;
+  margin: 16px auto;
+}
+.file-binary {
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+}
+
+/* --- States --- */
+.state {
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--color-fg-muted);
+}
+.state.error { color: var(--color-fg-danger); }
+.spinner {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-fg-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* --- Hint (landing) --- */
+.hint {
+  text-align: center;
+  padding: 80px 16px;
+  color: var(--color-fg-muted);
+}
+.hint h1 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-fg);
+  margin-bottom: 8px;
+}
+.hint p { margin-top: 8px; }
+.hint code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 2px 8px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}
+</style>
 </head>
 <body>
-<h1 id="dirname">.</h1>
-<a id="up">..</a>
-<div id="listing">Loading...</div>
+<div class="container">
+  <div id="repo-header" class="repo-header"></div>
+  <div id="toolbar" class="toolbar">
+    <div class="branch-selector">
+      <button id="branch-btn" class="branch-btn" type="button">
+        <svg width="16" height="16" viewBox="0 0 16 16"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/></svg>
+        <span id="branch-name"></span>
+        <svg width="16" height="16" viewBox="0 0 16 16"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"/></svg>
+      </button>
+      <div id="branch-dropdown" class="branch-dropdown">
+        <div class="dropdown-header">Switch branches</div>
+        <div id="branch-list" class="dropdown-list"></div>
+      </div>
+    </div>
+    <nav id="path-crumb" class="path-crumb"></nav>
+  </div>
+  <div id="listing" class="listing">
+    <div class="state"><div class="spinner"></div></div>
+  </div>
+</div>
 <script>
-var path = window.location.search.substring(1).split('/');
-const owner = path.shift();
-const repo = path.shift();
-const branch = path.shift();
+var ICON_DIR = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1Z"/></svg>';
+var ICON_FILE = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914Z"/></svg>';
+var ICON_CHECK = '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>';
+
+function esc(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+var segments = window.location.search.substring(1).split('/').filter(Boolean);
+var owner = segments[0];
+var repo = segments[1];
+var branch = segments[2];
+var pathParts = segments.slice(3);
+
+var listing = document.getElementById('listing');
+
 if (!owner || !repo || !branch) {
-  document.getElementById('dirname').textContent = 'Invalid URL format';
-  document.getElementById('listing').textContent = `Expected: ${window.location.host}?OWNER/REPO/BRANCH/path/to/directory`;
+  document.querySelector('.container').innerHTML = '<div class="hint"><h1>raw-content</h1>'
+    + '<p>Browse the raw contents of any GitHub repository.</p>'
+    + '<p><code>' + esc(window.location.host) + '?OWNER/REPO/BRANCH/path</code></p></div>';
   throw new Error('Invalid URL format');
 }
-document.getElementById('dirname').textContent = window.location.search.substring(1);
-document.getElementById('up').href = window.location.href.split('/').slice(0, -1).join('/');
-document.getElementsByTagName('title')[0].textContent = `${path.join('/') || '/'} | ${owner}/${repo}`;
-var listing = document.getElementById('listing');
+
+/* Repo header */
+document.getElementById('repo-header').innerHTML =
+  '<a href="https://github.com/' + esc(owner) + '">' + esc(owner) + '</a>'
+  + '<span class="sep">/</span>'
+  + '<a href="https://github.com/' + esc(owner) + '/' + esc(repo) + '" class="repo">' + esc(repo) + '</a>';
+
+/* Branch button */
+document.getElementById('branch-name').textContent = branch;
+
+/* Path breadcrumb */
+var base = window.location.pathname + '?' + esc(owner) + '/' + esc(repo) + '/' + esc(branch);
+if (pathParts.length > 0) {
+  var parts = [];
+  for (var i = 0; i < pathParts.length; i++) {
+    if (i === pathParts.length - 1) {
+      parts.push('<span class="cur">' + esc(pathParts[i]) + '</span>');
+    } else {
+      var segHref = base + '/' + pathParts.slice(0, i + 1).map(esc).join('/');
+      parts.push('<a href="' + segHref + '">' + esc(pathParts[i]) + '</a>');
+    }
+  }
+  document.getElementById('path-crumb').innerHTML =
+    '<span class="sep">/</span>' + parts.join('<span class="sep">/</span>');
+}
+
+document.title = (pathParts.join('/') || '/') + ' \u00b7 ' + owner + '/' + repo;
+
+/* Branch dropdown */
+var branchBtn = document.getElementById('branch-btn');
+var branchDropdown = document.getElementById('branch-dropdown');
+var branchList = document.getElementById('branch-list');
+var branchesLoaded = false;
+
+function checkResponse(r) {
+  if (!r.ok) {
+    if (r.status === 404) throw new Error('Not found \u2014 check that the repository, branch, and path exist');
+    if (r.status === 403) throw new Error('API rate limit exceeded \u2014 try again later');
+    throw new Error('HTTP ' + r.status + ' ' + r.statusText);
+  }
+  return r.json();
+}
+
+branchBtn.addEventListener('click', function(e) {
+  e.stopPropagation();
+  branchDropdown.classList.toggle('open');
+  if (!branchesLoaded) {
+    branchList.innerHTML = '<div class="dropdown-loading">Loading\u2026</div>';
+    fetch('https://api.github.com/repos/' + owner + '/' + repo + '/branches?per_page=100')
+      .then(checkResponse)
+      .then(function(branches) {
+        branchesLoaded = true;
+        branchList.innerHTML = branches.map(function(b) {
+          var isActive = b.name === branch;
+          return '<a class="dropdown-item' + (isActive ? ' active' : '') + '" data-branch="' + esc(b.name) + '" href="#">'
+            + '<span class="check">' + (isActive ? ICON_CHECK : '') + '</span>'
+            + '<span class="branch-name">' + esc(b.name) + '</span></a>';
+        }).join('');
+      })
+      .catch(function(err) {
+        branchList.innerHTML = '<div class="dropdown-loading">' + esc(err.message) + '</div>';
+      });
+  }
+});
+
+/* Resolve the deepest valid prefix of targetPath in a branch tree */
+function resolveDeepest(tree, targetPath, resolved) {
+  if (targetPath.length === 0) return Promise.resolve(resolved);
+  var next = targetPath[0];
+  var entry = tree.tree.find(function(x) { return x.path === next; });
+  if (!entry) return Promise.resolve(resolved);
+  if (entry.type === 'blob') return Promise.resolve(resolved.concat(next));
+  return fetch(entry.url).then(checkResponse).then(function(sub) {
+    return resolveDeepest(sub, targetPath.slice(1), resolved.concat(next));
+  }).catch(function() { return resolved; });
+}
+
+/* Switch branch: validate path, fall back to deepest valid prefix */
+function switchBranch(newBranch) {
+  branchDropdown.classList.remove('open');
+  if (newBranch === branch && pathParts.length === 0) return;
+  var newBase = window.location.pathname + '?' + owner + '/' + repo + '/' + newBranch;
+  if (pathParts.length === 0 || newBranch === branch) {
+    window.location.href = newBase + (pathParts.length ? '/' + pathParts.join('/') : '');
+    return;
+  }
+  listing.innerHTML = '<div class="state"><div class="spinner"></div></div>';
+  fetch('https://api.github.com/repos/' + owner + '/' + repo + '/git/trees/' + encodeURIComponent(newBranch))
+    .then(checkResponse)
+    .then(function(tree) { return resolveDeepest(tree, pathParts.slice(), []); })
+    .then(function(valid) {
+      window.location.href = newBase + (valid.length ? '/' + valid.join('/') : '');
+    })
+    .catch(function() { window.location.href = newBase; });
+}
+
+branchList.addEventListener('click', function(e) {
+  var item = e.target.closest('.dropdown-item');
+  if (!item) return;
+  e.preventDefault();
+  switchBranch(item.getAttribute('data-branch'));
+});
+
+branchDropdown.addEventListener('click', function(e) { e.stopPropagation(); });
+document.addEventListener('click', function() { branchDropdown.classList.remove('open'); });
+
+/* API */
+function showError(msg) {
+  listing.innerHTML = '<div class="state error">' + esc(msg) + '</div>';
+}
+
+var IMAGE_EXT = /\.(png|jpe?g|gif|svg|webp|ico|bmp)$/i;
+var BINARY_EXT = /\.(zip|tar|gz|bz2|xz|7z|rar|pdf|exe|dll|so|dylib|wasm|class|o|bin|dat|db|sqlite|mp[34]|avi|mov|mkv|flac|wav|ogg|ttf|otf|woff2?)$/i;
+
+function rawUrl(filePath) {
+  return 'https://raw.githubusercontent.com/' + owner + '/' + repo + '/refs/heads/' + branch + '/' + filePath;
+}
+
+function formatBytes(b) {
+  if (b < 1024) return b + ' bytes';
+  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+  return (b / 1048576).toFixed(1) + ' MB';
+}
+
+function showFile() {
+  var fileName = pathParts[pathParts.length - 1];
+  var url = rawUrl(pathParts.join('/'));
+
+  var header = '<div class="file-header">'
+    + '<span class="file-info" id="file-info"></span>'
+    + '<span class="file-actions"><a href="' + esc(url) + '">Raw</a></span>'
+    + '</div>';
+
+  if (IMAGE_EXT.test(fileName)) {
+    listing.innerHTML = header
+      + '<div class="file-content image"><img src="' + esc(url) + '" alt="' + esc(fileName) + '"></div>';
+    return;
+  }
+
+  if (BINARY_EXT.test(fileName)) {
+    listing.innerHTML = header
+      + '<div class="file-binary">Binary file not shown. <a href="' + esc(url) + '">Download</a></div>';
+    return;
+  }
+
+  listing.innerHTML = header
+    + '<div class="file-content"><pre class="line-nums" id="file-nums"></pre>'
+    + '<pre class="line-code" id="file-code">Loading\u2026</pre></div>';
+
+  fetch(url)
+    .then(function(r) {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.text();
+    })
+    .then(function(text) {
+      document.getElementById('file-code').textContent = text;
+      var lines = text.split('\n');
+      var lineCount = text.endsWith('\n') ? lines.length - 1 : lines.length;
+      var nums = [];
+      for (var n = 1; n <= lineCount; n++) nums.push(n);
+      document.getElementById('file-nums').textContent = nums.join('\n');
+      var bytes = new Blob([text]).size;
+      document.getElementById('file-info').textContent = lineCount + ' lines \u00b7 ' + formatBytes(bytes);
+    })
+    .catch(function(e) {
+      document.getElementById('file-code').textContent = 'Error loading file: ' + e.message;
+    });
+}
 
 function traverse(tree, path) {
-  if (path.length === 0) return Promise.resolve(tree);
-  const next = path.shift();
-  return fetch(tree.tree.find(x => x.path === next).url)
-    .then(response => response.json())
-    .then(subtree => traverse(subtree, path))
-    .catch(error => { listing.textContent = 'Error loading directory: ' + error; });
-}
-fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/${branch}`)
-  .then(response => response.json())
-  .then(tree => {
-    traverse(tree, path).then(dir => {
-      listing.innerHTML = '<ul>' + dir.tree.map(
-        x => `<li><a href="${
-          x.type == 'tree' ? window.location.href : `https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/${branch}/${
-            window.location.search.substring(1).split('/').slice(3).join('/')
-          }`
-        }/${x.path}">${x.path}</a></li>`
-      ).join('') + '</ul>';
+  if (path.length === 0) return tree;
+  var next = path.shift();
+  var entry = tree.tree.find(function(x) { return x.path === next; });
+  if (!entry) throw new Error('Path not found: ' + next);
+  if (entry.type === 'blob') return { _isBlob: true };
+  return fetch(entry.url).then(checkResponse).then(function(sub) { return traverse(sub, path); });
+}
+
+fetch('https://api.github.com/repos/' + owner + '/' + repo + '/git/trees/' + branch)
+  .then(checkResponse)
+  .then(function(tree) { return traverse(tree, pathParts.slice()); })
+  .then(function(result) {
+    if (!result) return;
+    if (result._isBlob) { showFile(); return; }
+    var rows = [];
+
+    if (pathParts.length > 0) {
+      var upHref = pathParts.length > 1
+        ? base + '/' + pathParts.slice(0, -1).map(esc).join('/')
+        : base;
+      rows.push('<a class="row dir" href="' + upHref + '">' + ICON_DIR + '<span class="name">..</span></a>');
+    }
+
+    var sorted = result.tree.slice().sort(function(a, b) {
+      if (a.type === 'tree' && b.type !== 'tree') return -1;
+      if (a.type !== 'tree' && b.type === 'tree') return 1;
+      return a.path.localeCompare(b.path);
     });
+
+    sorted.forEach(function(x) {
+      var isDir = x.type === 'tree';
+      var href = base + '/' + pathParts.concat(x.path).map(esc).join('/');
+      rows.push(
+        '<a class="row' + (isDir ? ' dir' : '') + '" href="' + href + '">'
+        + (isDir ? ICON_DIR : ICON_FILE)
+        + '<span class="name">' + esc(x.path) + '</span></a>'
+      );
+    });
+
+    listing.innerHTML = rows.length ? rows.join('') : '<div class="state">Empty directory</div>';
   })
-  .catch(error => { listing.textContent = 'Error loading directory: ' + error; });
+  .catch(function(e) { showError(e.message); });
 </script>
 </body>
 </html>