diff --git a/config.py b/config.py
index c59f1ec..fc798e4 100644
--- a/config.py
+++ b/config.py
@@ -1,64 +1,128 @@
+"""
+Scientific Gallery Configuration Management
+
+This module provides dataclasses and utilities for managing configuration
+of the scientific gallery system, including paths, gallery settings,
+UI preferences, and data sources.
+"""
+
 from dataclasses import dataclass, field, asdict
 from pathlib import Path
-
 import yaml
 
 
+@dataclass
+class PathConfig:
+    """Configuration for system paths and directories."""
+    work_dir: str
+    web_folder: str
+    cgi_script: str
+    config_path: str
+
+
+@dataclass
+class GalleryConfig:
+    """Configuration for gallery generation and display settings."""
+    plot_root: str
+    png_dpi: int
+    backup_folder: str
+
+
+@dataclass
+class UIConfig:
+    """Configuration for user interface behavior and preferences."""
+    max_recent_plots: int
+    search_debounce_ms: int
+
+
 @dataclass
 class GalleryItem:
+    """Represents a single data source for the gallery."""
     name: str
     path: Path
 
 
 @dataclass
 class Config:
-    web_folder: str = ""
-    backup_folder: str = ""
-    png_dpi: int = 400
-    plot_root: str = "gallery"
+    """
+    Main configuration class that aggregates all gallery settings.
+    
+    Provides backward compatibility properties and methods for loading
+    configuration from YAML files.
+    """
+    paths: PathConfig
+    gallery: GalleryConfig
+    ui: UIConfig
     sources: list[GalleryItem] = field(default_factory=list)
 
+    @property
+    def web_folder(self):
+        """Backward compatibility property for web folder path."""
+        return self.paths.web_folder
+
+    @property
+    def png_dpi(self):
+        """Backward compatibility property for PNG conversion DPI."""
+        return self.gallery.png_dpi
+
+    @property
+    def plot_root(self):
+        """Backward compatibility property for plot root directory."""
+        return self.gallery.plot_root
+
+    @property
+    def backup_folder(self):
+        """Backward compatibility property for backup folder path."""
+        return self.gallery.backup_folder
+
     @classmethod
     def from_yaml(cls, yaml_file: str) -> "Config":
         """
         Load configuration from a YAML file.
 
         Args:
-            yaml_file (str): Path to the YAML file.
-            strict (bool):
-                If True, raises an error if a key in the YAML file does not exist in the Config class.
-                If False (default), adds all keys as attributes
+            yaml_file: Path to the YAML configuration file
 
         Returns:
-            Config: Instance of this class
+            Config instance with loaded settings
+
+        Raises:
+            FileNotFoundError: If the YAML file doesn't exist
+            yaml.YAMLError: If the YAML file is malformed
         """
-
         with open(yaml_file, "r") as f:
-            new_config: dict = yaml.safe_load(f)
+            data = yaml.safe_load(f)
 
-        new_config["sources"] = [
-            GalleryItem(name=src["name"], path=Path(src["path"]))
-            for src in new_config.get("sources", False)
+        paths_data = data.get('paths', {})
+        gallery_data = data.get('gallery', {})
+        ui_data = data.get('ui', {})
+        sources_data = data.get('sources', [])
+
+        paths = PathConfig(**paths_data)
+        gallery = GalleryConfig(**gallery_data)
+        ui = UIConfig(**ui_data)
+
+        sources = [
+            GalleryItem(name=source["name"], path=Path(source["path"]))
+            for source in sources_data
         ]
 
-        instance = cls(**{
-            k: v
-            for k, v in new_config.items()
-        })
-
-        return instance
+        return cls(paths=paths, gallery=gallery, ui=ui, sources=sources)
 
     def to_yaml(self, yaml_file: str) -> None:
         """
         Save the current configuration to a YAML file.
 
         Args:
-            yaml_file (str): Path to the YAML file.
+            yaml_file: Path where to save the YAML configuration
+
+        Raises:
+            IOError: If unable to write to the specified file
         """
         with open(yaml_file, "w") as f:
             yaml.dump(asdict(self), f, default_flow_style=False)
 
 
 if __name__ == "__main__":
-    config = Config()
-    config.to_yaml("config.yaml")
+    config = Config.from_yaml("config.yaml")
+    print("Loaded config successfully:", config)
diff --git a/config.yaml b/config.yaml
index 0b38414..a4d5b46 100644
--- a/config.yaml
+++ b/config.yaml
@@ -1,7 +1,41 @@
-backup_folder: ''
-plot_root: gallery
-png_dpi: 400
+# Gallery Configuration
+# ===================
+
+# Paths Configuration
+paths:
+  # Working directory where the script runs from
+  work_dir: "/work/kschmidt/web"
+  
+  # Web hosting directory where gallery files are served
+  web_folder: "/web/kschmidt/public_html/"
+  
+  # CGI script path (relative to web folder)
+  cgi_script: "cgi-bin/refresh_gallery.py"
+  
+  # Config file path for CGI scripts
+  config_path: "/work/kschmidt/web"
+
+# Gallery Settings
+gallery:
+  # Root folder name for plots in web directory
+  plot_root: "gallery"
+  
+  # PNG conversion quality
+  png_dpi: 400
+  
+  # Backup folder (leave empty to disable)
+  backup_folder: ""
+
+# UI Settings
+ui:
+  # Maximum number of recent plots to track
+  max_recent_plots: 20
+  
+  # Search settings
+  search_debounce_ms: 300
+
+# Data Sources
+# Each source represents a collection of plots to include in the gallery
 sources: 
   - name: "ttbar_analysis"
     path: "/work/kschmidt/NEEDLE/test_analysis/data/cf_store/test_analysis/cf.PlotVariables1D/run2_2016_nano_v9/"
-web_folder: '/web/kschmidt/public_html/'
diff --git a/generate_gallery.py b/generate_gallery.py
index ac47a18..22d0f65 100644
--- a/generate_gallery.py
+++ b/generate_gallery.py
@@ -1,6 +1,20 @@
+"""
+Scientific Gallery Generator
+
+This module generates static HTML galleries from scientific plot collections.
+It converts PDF plots to PNG thumbnails, creates responsive web interfaces,
+and organizes plots into hierarchical directory structures.
+
+Features:
+- PDF to PNG conversion with configurable DPI
+- Incremental updates (only converts when source is newer)
+- Jinja2 templating for consistent HTML generation
+- Support for nested folder structures
+- Responsive grid layout with search and navigation
+"""
+
 import subprocess
 import shutil
-
 from pathlib import Path
 from jinja2 import Environment, FileSystemLoader
 from config import Config
@@ -12,15 +26,25 @@ env = Environment(loader=FileSystemLoader("."))
 template = env.get_template("template.html")
 
 
-def convert_pdf_to_png(pdf_path: Path):
+def convert_pdf_to_png(pdf_path: Path) -> None:
+    """
+    Convert a PDF file to PNG format using ImageMagick.
+
+    Only converts if the PNG doesn't exist or if the PDF is newer than
+    the PNG (with a 30-second buffer to handle filesystem timing issues).
+
+    Args:
+        pdf_path: Path to the source PDF file
+
+    Raises:
+        subprocess.CalledProcessError: If ImageMagick conversion fails
+    """
     png_path = pdf_path.with_suffix(".png")
 
-    # Check if PNG exists and is newer than PDF (with 30 second buffer)
     if png_path.exists():
         pdf_mtime = pdf_path.stat().st_mtime
         png_mtime = png_path.stat().st_mtime
-        if png_mtime >= (pdf_mtime + 30):  # 30 second buffer
-            # PNG is up to date, no need to convert
+        if png_mtime >= (pdf_mtime + 30):
             return
         else:
             print(f"PDF {pdf_path.name} is newer than PNG, reconverting...")
@@ -36,72 +60,85 @@ def convert_pdf_to_png(pdf_path: Path):
 
 
 def needs_update(source_file: Path, target_file: Path) -> bool:
-    """Check if target file needs to be updated based on source file modification time"""
+    """
+    Check if target file needs updating based on source modification time.
+
+    Args:
+        source_file: Path to the source file
+        target_file: Path to the target file
+
+    Returns:
+        True if target needs update, False otherwise
+    """
     if not target_file.exists():
         return True
 
     source_mtime = source_file.stat().st_mtime
     target_mtime = target_file.stat().st_mtime
 
-    # Return True if source is newer than target (with 30 second buffer)
     return source_mtime > (target_mtime + 30)
 
 
-def build_gallery(source_dir: Path, web_dir: Path, relative_path: Path = None):
+def build_gallery(source_dir: Path, web_dir: Path,
+                  relative_path: Path = None) -> None:
     """
-    Build gallery for a directory, copying files to web directory and generating index.html
+    Recursively build gallery structure from source directory.
+
+    Processes all PDF files in the source directory, converts them to PNG,
+    copies both to the web directory, and generates index.html files with
+    navigation and thumbnails.
 
     Args:
-        source_dir: Source directory containing PDFs
-        web_dir: Target web directory
-        relative_path: Relative path for navigation (None for root)
+        source_dir: Source directory containing PDF files
+        web_dir: Target web directory for gallery output
+        relative_path: Relative path from gallery root (for navigation)
     """
     if relative_path is None:
         relative_path = Path(".")
 
-    # Ensure web directory exists
-    target_dir = web_dir / relative_path
-    target_dir.mkdir(parents=True, exist_ok=True)
+    pdf_files = list(source_dir.glob("*.pdf"))
+    subdirs = [d for d in source_dir.iterdir() if d.is_dir()]
 
-    # Find all PDFs in source directory
-    pdfs = sorted(source_dir.glob("*.pdf"))
     items = []
 
-    for pdf in pdfs:
-        # Convert PDF to PNG in source directory
-        convert_pdf_to_png(pdf)
-        png_path = pdf.with_suffix(".png")
+    for pdf_file in pdf_files:
+        png_file = pdf_file.with_suffix(".png")
 
-        # Copy both PDF and PNG to target directory only if needed
-        target_pdf = target_dir / pdf.name
-        target_png = target_dir / png_path.name
+        web_pdf = web_dir / pdf_file.name
+        web_png = web_dir / png_file.name
 
-        if needs_update(pdf, target_pdf):
-            print(f"Copying {pdf.name} to {target_pdf}")
-            shutil.copy2(pdf, target_pdf)
+        if needs_update(pdf_file, web_pdf):
+            print(f"Copying {pdf_file} to {web_pdf}")
+            shutil.copy2(pdf_file, web_pdf)
         else:
-            print(f"Skipping {pdf.name} (up to date)")
+            print(f"Skipping {pdf_file.name} (up to date)")
 
-        if png_path.exists() and needs_update(png_path, target_png):
-            print(f"Copying {png_path.name} to {target_png}")
-            shutil.copy2(png_path, target_png)
-        elif png_path.exists():
-            print(f"Skipping {png_path.name} (up to date)")
+        if not png_file.exists():
+            convert_pdf_to_png(pdf_file)
+
+        if needs_update(png_file, web_png):
+            print(f"Copying {png_file} to {web_png}")
+            shutil.copy2(png_file, web_png)
+        else:
+            print(f"Skipping {png_file.name} (up to date)")
 
         items.append({
-            "name": pdf.name,
-            "pdf_href": pdf.name,
-            "png_href": png_path.name
+            "name": pdf_file.stem,
+            "pdf_href": pdf_file.name,
+            "png_href": png_file.name
         })
 
-    # Find subdirectories in source
-    subdirs = sorted([d.name for d in source_dir.iterdir() if d.is_dir()])
+    subdir_names = []
+    for subdir in subdirs:
+        subdir_web = web_dir / subdir.name
+        subdir_web.mkdir(exist_ok=True)
+        subdir_relative = relative_path / subdir.name
+        build_gallery(subdir, subdir_web, subdir_relative)
+        subdir_names.append(subdir.name)
 
-    # Generate index.html in target directory
-    output_html = target_dir / "index.html"
+    output_html = web_dir / "index.html"
 
-    # Create a meaningful title
-    if str(relative_path) == ".":
+    if relative_path == Path("."):
         title = "Gallery"
     else:
         title = f"Gallery: {relative_path}"
@@ -110,75 +147,89 @@ def build_gallery(source_dir: Path, web_dir: Path, relative_path: Path = None):
         f.write(template.render(
             title=title,
             items=items,
-            subdirs=subdirs,
-            relpath=str(relative_path)
+            subdirs=subdir_names,
+            relpath=str(relative_path),
+            ui=CONFIG.ui
         ))
 
     print(f"Generated {output_html}")
 
-    # Recursively process subdirectories
-    for subdir in subdirs:
-        source_subdir = source_dir / subdir
-        new_relative_path = relative_path / subdir
-        build_gallery(source_subdir, web_dir, new_relative_path)
 
+def main() -> None:
+    """
+    Main entry point for gallery generation.
 
-def loop_over_sources():
-    web_root = Path(CONFIG.web_folder)
+    Processes all configured sources and generates the complete gallery
+    structure in the web directory. Cleans up the gallery directory
+    on first run to ensure consistency.
+    """
+    gallery_root = Path(CONFIG.web_folder) / CONFIG.plot_root
+
+    if gallery_root.exists():
+        print(f"Gallery directory {gallery_root} exists, cleaning up...")
+        shutil.rmtree(gallery_root)
+
+    gallery_root.mkdir(parents=True, exist_ok=True)
 
     for source in CONFIG.sources:
-        print(f"Processing {source.name}: {source.path}")
-        if source.path.is_dir():
-            # Create a subdirectory based on plot_root and source name
-            source_web_dir = web_root / CONFIG.plot_root / source.name
-            build_gallery(source.path, source_web_dir)
-            print(f"Processed {source.name}: {source.path}")
-        elif source.path.suffix == ".pdf":
-            # For single PDF files, copy to web root with plot_root and source name as directory
-            source_web_dir = web_root / CONFIG.plot_root / source.name
-            convert_pdf_to_png(source.path)
-            png_path = source.path.with_suffix(".png")
+        source_path = Path(source.path)
 
-            # Ensure web directory exists
+        if source_path.is_file() and source_path.suffix == '.pdf':
+            source_web_dir = gallery_root / source.name
             source_web_dir.mkdir(parents=True, exist_ok=True)
 
-            # Copy PDF and PNG to web directory only if needed
-            target_pdf = source_web_dir / source.path.name
-            target_png = source_web_dir / png_path.name
+            pdf_name = source_path.name
+            png_name = source_path.with_suffix('.png').name
 
-            if needs_update(source.path, target_pdf):
-                print(f"Copying {source.path.name} to {target_pdf}")
-                shutil.copy2(source.path, target_pdf)
+            web_pdf_path = source_web_dir / pdf_name
+            web_png_path = source_web_dir / png_name
+            source_png_path = source_path.with_suffix('.png')
+
+            if needs_update(source_path, web_pdf_path):
+                print(f"Copying {source_path} to {web_pdf_path}")
+                shutil.copy2(source_path, web_pdf_path)
             else:
-                print(f"Skipping {source.path.name} (up to date)")
+                print(f"Skipping {source_path.name} (up to date)")
 
-            if png_path.exists() and needs_update(png_path, target_png):
-                print(f"Copying {png_path.name} to {target_png}")
-                shutil.copy2(png_path, target_png)
-            elif png_path.exists():
-                print(f"Skipping {png_path.name} (up to date)")
+            if not source_png_path.exists():
+                convert_pdf_to_png(source_path)
+
+            if needs_update(source_png_path, web_png_path):
+                print(f"Copying {source_png_path} to {web_png_path}")
+                shutil.copy2(source_png_path, web_png_path)
+            else:
+                print(f"Skipping {source_png_path.name} (up to date)")
 
-            # Create items list for template
             items = [{
-                "name": source.path.name,
-                "pdf_href": source.path.name,
-                "png_href": png_path.name
+                "name": source_path.stem,
+                "pdf_href": pdf_name,
+                "png_href": png_name
             }]
 
-            # Generate index.html for single PDF
             output_html = source_web_dir / "index.html"
             with output_html.open("w") as f:
                 f.write(template.render(
                     title=source.name,
                     items=items,
                     subdirs=[],
-                    relpath=source.name
+                    relpath=source.name,
+                    ui=CONFIG.ui
                 ))
 
             print(f"Generated {output_html}")
             print(f"Processed {source.name}: {source.path}")
 
+        elif source_path.is_dir():
+            source_web_dir = gallery_root / source.name
+            source_web_dir.mkdir(parents=True, exist_ok=True)
+            build_gallery(source_path, source_web_dir, Path(source.name))
+            print(f"Processed {source.name}: {source.path}")
+        else:
+            print(f"Warning: Source {source.path} is neither a "
+                  f"directory nor a PDF file")
+
+    print("Done")
+
 
 if __name__ == "__main__":
-    loop_over_sources()
-    print("Done")
+    main()
diff --git a/template.html b/template.html
index 036fb6a..d46ee3c 100644
--- a/template.html
+++ b/template.html
@@ -4,42 +4,606 @@
   <meta charset="UTF-8">
   <title>{{ title }}</title>
   <style>
-    body { font-family: sans-serif; margin: 1em; }
-    h1 { font-size: 1.5em; }
+    /* ========================================
+       CSS VARIABLES AND THEME DEFINITIONS
+       ======================================== */
+    :root {
+      --bg-color: #1e1e1e;
+      --text-color: #ffffff;
+      --card-bg: #2d2d2d;
+      --border-color: #404040;
+      --link-color: #569cd6;
+      --link-hover: #4a9eff;
+      --button-bg: #0078d4;
+      --button-hover: #106ebe;
+      --breadcrumb-color: #cccccc;
+      --tree-bg: #252526;
+      --tree-current-bg: #0078d4;
+      --success-color: #28a745;
+      --success-hover: #218838;
+      --disabled-color: #6c757d;
+    }
+    
+    [data-theme="light"] {
+      --bg-color: #ffffff;
+      --text-color: #333333;
+      --card-bg: #f8f8f8;
+      --border-color: #ddd;
+      --link-color: #007acc;
+      --link-hover: #005a9e;
+      --button-bg: #007acc;
+      --button-hover: #005a9e;
+      --breadcrumb-color: #666;
+      --tree-bg: #f8f8f8;
+      --tree-current-bg: #007acc;
+    }
+
+    /* ========================================
+       BASE LAYOUT AND TYPOGRAPHY
+       ======================================== */
+    * {
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 1rem;
+      padding-bottom: 2rem;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      transition: background-color 0.3s, color 0.3s;
+      line-height: 1.5;
+    }
+    
+    h1 {
+      font-size: 1.8rem;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+    }
+    
+    h2 {
+      color: var(--text-color);
+      font-size: 1.3rem;
+      margin: 1.5rem 0 0.5rem 0;
+    }
+
+    /* ========================================
+       NAVIGATION COMPONENTS
+       ======================================== */
+    .breadcrumb {
+      margin: 0.5rem 0 1rem 0;
+      font-size: 0.9rem;
+      color: var(--breadcrumb-color);
+    }
+    
+    .breadcrumb a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+    
+    .breadcrumb a:hover {
+      text-decoration: underline;
+      color: var(--link-hover);
+    }
+    
+    .breadcrumb .separator {
+      margin: 0 0.3rem;
+      color: var(--breadcrumb-color);
+      opacity: 0.7;
+    }
+    
+    .navigation {
+      margin: 1rem 0;
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    
+    .nav-btn {
+      background: var(--button-bg);
+      color: white;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 6px;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.3rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    }
+    
+    .nav-btn:hover {
+      background: var(--button-hover);
+      transform: translateY(-1px);
+    }
+    
+    .nav-btn:disabled {
+      background: var(--disabled-color);
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* ========================================
+       SEARCH FUNCTIONALITY
+       ======================================== */
+    .search-container {
+      margin: 1rem 0;
+      position: relative;
+      max-width: 500px;
+    }
+    
+    .search-box {
+      width: 100%;
+      padding: 0.8rem 2.5rem 0.8rem 1rem;
+      border: 2px solid var(--border-color);
+      border-radius: 25px;
+      background: var(--card-bg);
+      color: var(--text-color);
+      font-size: 1rem;
+      outline: none;
+      transition: all 0.3s ease;
+    }
+    
+    .search-box:focus {
+      border-color: var(--button-bg);
+      box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
+    }
+    
+    .search-icon {
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-color);
+      opacity: 0.6;
+      pointer-events: none;
+    }
+    
+    .search-results {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      margin-top: 0.5rem;
+      max-height: 400px;
+      overflow-y: auto;
+      display: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 100;
+    }
+    
+    .search-result-item {
+      padding: 0.75rem;
+      margin: 0;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      border-bottom: 1px solid var(--border-color);
+    }
+    
+    .search-result-item:last-child {
+      border-bottom: none;
+    }
+    
+    .search-result-item:hover {
+      background: var(--button-bg);
+      color: white;
+    }
+    
+    .search-highlight {
+      background: #ffeb3b;
+      color: #000;
+      font-weight: bold;
+      padding: 0.1rem 0.2rem;
+      border-radius: 2px;
+    }
+
+    /* ========================================
+       FOLDER TREE
+       ======================================== */
+    .folder-tree {
+      background: var(--tree-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 1rem;
+      margin: 1rem 0;
+      font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+      font-size: 0.85rem;
+      max-height: 350px;
+      overflow-y: auto;
+      transition: all 0.3s ease;
+    }
+    
+    .tree-item {
+      margin: 0.2rem 0;
+      white-space: pre;
+      font-family: inherit;
+    }
+    
+    .tree-current {
+      background: var(--tree-current-bg);
+      color: white;
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+    
+    .tree-link {
+      color: var(--link-color);
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+    
+    .tree-link:hover {
+      text-decoration: underline;
+      color: var(--link-hover);
+    }
+
+    /* ========================================
+       PLOT GRID
+       ======================================== */
     .grid {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 1rem;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 1.2rem;
       padding: 1rem 0;
     }
-    .grid-item img {
-      max-width: 100%;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-    }
+    
     .grid-item {
       text-align: center;
-      max-width: 200px; /* Constrain to grid column width */
+      background: var(--card-bg);
+      border-radius: 8px;
+      padding: 0.8rem;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
     }
+    
+    .grid-item:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      border-color: var(--border-color);
+    }
+    
+    .grid-item img {
+      max-width: 100%;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      transition: all 0.2s ease;
+    }
+    
+    .grid-item a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+    
     .plot-name {
-      margin-top: 0.5rem;
+      margin-top: 0.8rem;
       word-wrap: break-word;
       word-break: break-word;
       hyphens: auto;
-      font-size: 0.9em;
-      line-height: 1.2;
-      max-height: 3.6em; /* Limit to ~3 lines */
+      font-size: 0.9rem;
+      line-height: 1.3;
+      max-height: 3.9rem;
       overflow: hidden;
       padding: 0 0.2rem;
+      font-weight: 500;
+    }
+
+    /* ========================================
+       SIDEBAR (RECENT PLOTS)
+       ======================================== */
+    .sidebar {
+      position: fixed;
+      top: 0;
+      right: -350px;
+      width: 330px;
+      height: 100vh;
+      background: var(--card-bg);
+      border-left: 2px solid var(--border-color);
+      z-index: 2000;
+      transition: right 0.3s ease;
+      overflow-y: auto;
+      box-shadow: -4px 0 15px rgba(0,0,0,0.2);
+    }
+    
+    .sidebar.open {
+      right: 0;
+    }
+    
+    .sidebar-header {
+      padding: 1.2rem;
+      border-bottom: 1px solid var(--border-color);
+      position: sticky;
+      top: 0;
+      background: var(--card-bg);
+      z-index: 1;
+    }
+    
+    .sidebar-title {
+      margin: 0;
+      font-size: 1.2rem;
+      color: var(--text-color);
+      font-weight: 600;
+    }
+    
+    .sidebar-close {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      cursor: pointer;
+      color: var(--text-color);
+      padding: 0.2rem;
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+    }
+    
+    .sidebar-close:hover {
+      background: var(--border-color);
+    }
+    
+    .sidebar-content {
+      padding: 1rem;
+    }
+    
+    .recent-plot {
+      display: flex;
+      gap: 0.7rem;
+      padding: 0.8rem;
+      margin-bottom: 0.8rem;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid var(--border-color);
+    }
+    
+    .recent-plot:hover {
+      background: var(--button-bg);
+      color: white;
+      transform: translateX(2px);
+    }
+    
+    .recent-plot-thumb {
+      width: 60px;
+      height: 48px;
+      object-fit: cover;
+      border-radius: 4px;
+      flex-shrink: 0;
+    }
+    
+    .recent-plot-info {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .recent-plot-name {
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .recent-plot-path {
+      font-size: 0.8rem;
+      color: var(--breadcrumb-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .sidebar-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.5);
+      z-index: 1500;
+      display: none;
+      backdrop-filter: blur(2px);
+    }
+    
+    .sidebar-overlay.open {
+      display: block;
+    }
+
+    /* ========================================
+       FLOATING ACTION BUTTONS
+       ======================================== */
+    .floating-buttons {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      z-index: 1000;
+    }
+    
+    .floating-btn {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      font-size: 1.3rem;
+      box-shadow: 0 3px 10px rgba(0,0,0,0.3);
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .floating-btn:hover {
+      transform: scale(1.1);
+    }
+    
+    .sidebar-toggle {
+      background: var(--button-bg);
+      color: white;
+    }
+    
+    .theme-toggle {
+      background: var(--button-bg);
+      color: white;
+    }
+    
+    .refresh-btn {
+      background: var(--success-color);
+      color: white;
+    }
+    
+    .refresh-btn:hover {
+      background: var(--success-hover);
+    }
+    
+    .refresh-btn:disabled {
+      background: var(--disabled-color);
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* ========================================
+       KEYBOARD SHORTCUTS HELP
+       ======================================== */
+    .shortcuts-help {
+      position: fixed;
+      bottom: 140px;
+      right: 20px;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 1rem;
+      display: none;
+      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+      z-index: 1000;
+      font-size: 0.9rem;
+      max-width: 280px;
+    }
+    
+    .shortcuts-help h4 {
+      margin: 0 0 0.8rem 0;
+      color: var(--text-color);
+      font-size: 1rem;
+    }
+    
+    .shortcut-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0.4rem 0;
+    }
+    
+    .shortcut-key {
+      background: var(--border-color);
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      font-family: 'JetBrains Mono', 'Courier New', monospace;
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+
+    /* ========================================
+       SUBDIRECTORIES LIST
+       ======================================== */
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+    
+    ul li {
+      margin: 0.5rem 0;
+    }
+    
+    ul li a {
+      color: var(--link-color);
+      text-decoration: none;
+      padding: 0.3rem 0;
+      display: inline-block;
+      transition: color 0.2s ease;
+    }
+    
+    ul li a:hover {
+      color: var(--link-hover);
+      text-decoration: underline;
+    }
+
+    /* ========================================
+       RESPONSIVE DESIGN
+       ======================================== */
+    @media (max-width: 768px) {
+      body {
+        padding: 0.5rem;
+      }
+      
+      .grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 0.8rem;
+      }
+      
+      .sidebar {
+        width: 100%;
+        right: -100%;
+      }
+      
+      .navigation {
+        gap: 0.3rem;
+      }
+      
+      .nav-btn {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+      }
+      
+      .search-container {
+        max-width: 100%;
+      }
     }
   </style>
 </head>
 <body>
-  <h1>{{ relpath or 'Root' }}</h1>
+  <!-- Main Content -->
+  <h1>{{ title }}</h1>
+  
+  <!-- Search Bar -->
+  <div class="search-container">
+    <input type="text" class="search-box" id="searchBox" placeholder="Search plots..." />
+    <span class="search-icon">🔍</span>
+    <div class="search-results" id="searchResults"></div>
+  </div>
+  
+  <!-- Breadcrumb Navigation -->
+  <div class="breadcrumb" id="breadcrumb"></div>
+  
+  <!-- Navigation Buttons -->
+  <div class="navigation">
+    <button class="nav-btn" onclick="goToContent()" id="contentBtn">
+      🎯 Go to Content
+    </button>
+    <button class="nav-btn" onclick="window.history.back()">
+      ← Back
+    </button>
+    {% if relpath != "." %}
+    <a href="../index.html" class="nav-btn">
+      ↑ Parent Directory
+    </a>
+    {% endif %}
+  </div>
+
+  <!-- Folder Tree -->
+  <div class="folder-tree" id="folderTree"></div>
+  
+  <!-- Plot Grid -->
   <div class="grid">
     {% for item in items %}
       <div class="grid-item">
-        <a href="{{ item.pdf_href }}" target="_blank">
+        <a href="{{ item.pdf_href }}">
           <img src="{{ item.png_href }}" alt="{{ item.name }}">
         </a>
         <div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
@@ -47,13 +611,682 @@
     {% endfor %}
   </div>
 
+  <!-- Subdirectories -->
   {% if subdirs %}
     <h2>Subdirectories</h2>
     <ul>
       {% for sub in subdirs %}
-        <li><a href="{{ sub }}/index.html">{{ sub }}</a></li>
+        <li><a href="{{ sub }}/index.html">📁 {{ sub }}</a></li>
       {% endfor %}
     </ul>
   {% endif %}
+
+  <!-- Recent Plots Sidebar -->
+  <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
+  <div class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <h3 class="sidebar-title">Recent Plots</h3>
+      <button class="sidebar-close" onclick="toggleSidebar()">×</button>
+    </div>
+    <div class="sidebar-content" id="sidebarContent">
+      <div style="text-align: center; color: var(--breadcrumb-color); margin: 2rem 0;">
+        No recent plots yet
+      </div>
+    </div>
+  </div>
+  
+  <!-- Floating Action Buttons -->
+  <div class="floating-buttons">
+    <button class="floating-btn sidebar-toggle" onclick="toggleSidebar()" id="sidebarToggle" title="Recent Plots (Ctrl+R)">
+      📋
+    </button>
+    <button class="floating-btn theme-toggle" onclick="toggleTheme()" id="themeToggle" title="Toggle Theme (Ctrl+T)">
+      ☀️
+    </button>
+    <button class="floating-btn refresh-btn" onclick="refreshGallery()" id="refreshBtn" title="Regenerate Gallery (F5)">
+      🔄
+    </button>
+  </div>
+  
+  <!-- Keyboard Shortcuts Help -->
+  <div class="shortcuts-help" id="shortcutsHelp">
+    <h4>Keyboard Shortcuts</h4>
+    <div class="shortcut-item">
+      <span>Search</span>
+      <span class="shortcut-key">Ctrl+K</span>
+    </div>
+    <div class="shortcut-item">
+      <span>Recent plots</span>
+      <span class="shortcut-key">Ctrl+R</span>
+    </div>
+    <div class="shortcut-item">
+      <span>Refresh</span>
+      <span class="shortcut-key">F5</span>
+    </div>
+    <div class="shortcut-item">
+      <span>Toggle theme</span>
+      <span class="shortcut-key">Ctrl+T</span>
+    </div>
+    <div class="shortcut-item">
+      <span>Help</span>
+      <span class="shortcut-key">?</span>
+    </div>
+  </div>
+
+  <script>
+    // ========================================
+    // GALLERY APPLICATION CLASS
+    // ========================================
+    class GalleryApp {
+      constructor() {
+        this.searchTimeout = null;
+        this.SEARCH_DEBOUNCE_MS = {{ ui.search_debounce_ms|default(300) }};
+        this.MAX_RECENT_PLOTS = {{ ui.max_recent_plots|default(20) }};
+        this.init();
+      }
+
+      /**
+       * Initialize the gallery application
+       */
+      init() {
+        this.initTheme();
+        this.buildBreadcrumb();
+        this.buildFolderTree();
+        this.initSearch();
+        this.initKeyboardShortcuts();
+        this.updateRecentPlotsDisplay();
+        this.trackPlotClicks();
+        this.hideContentButtonIfNeeded();
+      }
+
+      /**
+       * Initialize theme system and load saved preference
+       */
+      initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const html = document.documentElement;
+        const themeToggle = document.getElementById('themeToggle');
+        
+        if (savedTheme === 'light') {
+          html.setAttribute('data-theme', 'light');
+          themeToggle.textContent = '🌙';
+        } else {
+          html.removeAttribute('data-theme');
+          themeToggle.textContent = '☀️';
+        }
+      }
+
+      /**
+       * Toggle between light and dark themes
+       */
+      toggleTheme() {
+        const html = document.documentElement;
+        const themeToggle = document.getElementById('themeToggle');
+        
+        if (html.getAttribute('data-theme') === 'light') {
+          html.removeAttribute('data-theme');
+          themeToggle.textContent = '☀️';
+          localStorage.setItem('theme', 'dark');
+        } else {
+          html.setAttribute('data-theme', 'light');
+          themeToggle.textContent = '🌙';
+          localStorage.setItem('theme', 'light');
+        }
+      }
+
+      /**
+       * Build breadcrumb navigation based on current path
+       */
+      buildBreadcrumb() {
+        const currentPath = window.location.pathname;
+        const pathParts = currentPath.split('/').filter(part => part !== '' && part !== 'index.html');
+        const breadcrumb = document.getElementById('breadcrumb');
+        
+        if (pathParts.length === 0) {
+          breadcrumb.innerHTML = '<span>🏠 Root</span>';
+          return;
+        }
+        
+        let html = '<a href="/">🏠 Root</a>';
+        
+        for (let i = 0; i < pathParts.length; i++) {
+          const part = pathParts[i];
+          html += '<span class="separator">/</span>';
+          
+          if (i === pathParts.length - 1) {
+            html += `<span>${decodeURIComponent(part)}</span>`;
+          } else {
+            const levelsUp = pathParts.length - 1 - i;
+            const relativePath = '../'.repeat(levelsUp) + 'index.html';
+            html += `<a href="${relativePath}">${decodeURIComponent(part)}</a>`;
+          }
+        }
+        
+        breadcrumb.innerHTML = html;
+      }
+
+      /**
+       * Build and display the folder tree structure
+       */
+      async buildFolderTree() {
+        const treeContainer = document.getElementById('folderTree');
+        const currentPath = window.location.pathname;
+        
+        try {
+          const tree = await this.buildTreeRecursive(currentPath, 0, currentPath);
+          treeContainer.innerHTML = tree;
+        } catch (error) {
+          console.error('Error building folder tree:', error);
+          treeContainer.innerHTML = '<div class="tree-item">❌ Error loading folder tree</div>';
+        }
+      }
+
+      /**
+       * Recursively build tree structure for folders
+       */
+      async buildTreeRecursive(path, depth, currentPath, maxDepth = 5) {
+        if (depth > maxDepth) {
+          const indent = '  '.repeat(depth);
+          return `<div class="tree-item">${indent}└─ ...</div>`;
+        }
+        
+        const indent = '  '.repeat(depth);
+        const folderName = path.split('/').filter(p => p !== '' && p !== 'index.html').pop() || 'Gallery';
+        
+        try {
+          const response = await fetch(path);
+          const htmlContent = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(htmlContent, 'text/html');
+          
+          const subdirs = doc.querySelectorAll('h2 + ul li a');
+          const items = doc.querySelectorAll('.grid-item');
+          const totalItems = items.length + subdirs.length;
+          const arrow = depth === 0 ? '' : '└─ ';
+          
+          let html = '';
+          if (path === currentPath) {
+            html += `<div class="tree-item">${indent}${arrow}📁 <span class="tree-current">${folderName}</span> (${totalItems} items)</div>`;
+          } else {
+            html += `<div class="tree-item">${indent}${arrow}📁 <a href="${path}" class="tree-link">${folderName}</a> (${totalItems} items)</div>`;
+          }
+          
+          for (let i = 0; i < subdirs.length; i++) {
+            const subdir = subdirs[i];
+            const href = subdir.getAttribute('href');
+            if (href) {
+              const baseUrl = path.replace(/\/[^\/]*$/, '/');
+              const subPath = baseUrl + href;
+              html += await this.buildTreeRecursive(subPath, depth + 1, currentPath, maxDepth);
+            }
+          }
+          
+          return html;
+        } catch (error) {
+          const arrow = depth === 0 ? '' : '└─ ';
+          return `<div class="tree-item">${indent}${arrow}📁 ${folderName} (error loading)</div>`;
+        }
+      }
+
+      /**
+       * Initialize search functionality with debouncing
+       */
+      initSearch() {
+        const searchBox = document.getElementById('searchBox');
+        const searchResults = document.getElementById('searchResults');
+        
+        searchBox.addEventListener('input', (e) => {
+          clearTimeout(this.searchTimeout);
+          const query = e.target.value.trim();
+          
+          if (query.length === 0) {
+            searchResults.style.display = 'none';
+            return;
+          }
+          
+          this.searchTimeout = setTimeout(() => {
+            this.performSearch(query);
+          }, this.SEARCH_DEBOUNCE_MS);
+        });
+        
+        document.addEventListener('click', (e) => {
+          if (!searchBox.contains(e.target) && !searchResults.contains(e.target)) {
+            searchResults.style.display = 'none';
+          }
+        });
+      }
+
+      /**
+       * Perform search across plot names
+       */
+      async performSearch(query) {
+        const searchResults = document.getElementById('searchResults');
+        searchResults.innerHTML = '<div style="padding: 1rem;">🔍 Searching...</div>';
+        searchResults.style.display = 'block';
+        
+        try {
+          const results = await this.searchPlots(query);
+          this.displaySearchResults(results, query);
+        } catch (error) {
+          console.error('Search error:', error);
+          searchResults.innerHTML = '<div style="padding: 1rem; color: red;">❌ Search failed</div>';
+        }
+      }
+
+      /**
+       * Search for plots matching the query
+       */
+      async searchPlots(query) {
+        const results = [];
+        const visited = new Set();
+        const lowerQuery = query.toLowerCase();
+        
+        await this.searchInPage(window.location.pathname, lowerQuery, results, visited);
+        await this.searchRecursive(window.location.pathname, lowerQuery, results, visited, 0, 5);
+        
+        return results.slice(0, 20);
+      }
+
+      /**
+       * Search for plots in a specific page
+       */
+      async searchInPage(path, query, results, visited, maxResults = 50) {
+        if (visited.has(path) || results.length >= maxResults) return;
+        visited.add(path);
+        
+        try {
+          const response = await fetch(path);
+          const html = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, 'text/html');
+          
+          const items = doc.querySelectorAll('.grid-item');
+          items.forEach(item => {
+            const nameElement = item.querySelector('.plot-name');
+            const imgElement = item.querySelector('img');
+            const linkElement = item.querySelector('a');
+            
+            if (nameElement && imgElement && linkElement) {
+              const name = nameElement.textContent.toLowerCase();
+              if (name.includes(query)) {
+                results.push({
+                  name: nameElement.textContent,
+                  path: path,
+                  href: linkElement.href,
+                  imgSrc: imgElement.src,
+                  relevance: this.calculateRelevance(name, query)
+                });
+              }
+            }
+          });
+        } catch (error) {
+          console.error('Error searching in', path, error);
+        }
+      }
+
+      /**
+       * Recursively search in subdirectories
+       */
+      async searchRecursive(path, query, results, visited, depth, maxDepth) {
+        if (depth >= maxDepth || results.length >= 50) return;
+        
+        try {
+          const response = await fetch(path);
+          const html = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, 'text/html');
+          
+          const subdirs = doc.querySelectorAll('h2 + ul li a');
+          for (const subdir of subdirs) {
+            const href = subdir.getAttribute('href');
+            if (href) {
+              const baseUrl = path.replace(/\/[^\/]*$/, '/');
+              const subPath = baseUrl + href;
+              await this.searchInPage(subPath, query, results, visited);
+              await this.searchRecursive(subPath, query, results, visited, depth + 1, maxDepth);
+            }
+          }
+        } catch (error) {
+          console.error('Error in recursive search:', error);
+        }
+      }
+
+      /**
+       * Calculate search relevance score
+       */
+      calculateRelevance(text, query) {
+        const exactMatch = text === query;
+        const startsWith = text.startsWith(query);
+        const wordMatch = text.split(/\s+/).some(word => word.startsWith(query));
+        
+        if (exactMatch) return 100;
+        if (startsWith) return 80;
+        if (wordMatch) return 60;
+        return 40;
+      }
+
+      /**
+       * Display search results with highlighting
+       */
+      displaySearchResults(results, query) {
+        const searchResults = document.getElementById('searchResults');
+        
+        if (results.length === 0) {
+          searchResults.innerHTML = '<div style="padding: 1rem;">📭 No plots found</div>';
+          return;
+        }
+        
+        results.sort((a, b) => b.relevance - a.relevance);
+        
+        let html = '';
+        results.forEach(result => {
+          const highlightedName = this.highlightText(result.name, query);
+          const relativePath = this.getRelativePath(result.path);
+          
+          html += `
+            <div class="search-result-item" onclick="app.openSearchResult('${result.href}')" title="${result.name}">
+              <div style="display: flex; gap: 0.7rem; align-items: center;">
+                <img src="${result.imgSrc}" style="width: 50px; height: 40px; object-fit: cover; border-radius: 4px;" />
+                <div style="flex: 1; min-width: 0;">
+                  <div style="font-weight: 600; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                    ${highlightedName}
+                  </div>
+                  <div style="font-size: 0.8rem; color: var(--breadcrumb-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                    📍 ${relativePath}
+                  </div>
+                </div>
+              </div>
+            </div>
+          `;
+        });
+        
+        searchResults.innerHTML = html;
+      }
+
+      /**
+       * Highlight search query in text
+       */
+      highlightText(text, query) {
+        const regex = new RegExp(`(${query})`, 'gi');
+        return text.replace(regex, '<span class="search-highlight">$1</span>');
+      }
+
+      /**
+       * Get relative path for display
+       */
+      getRelativePath(fullPath) {
+        const parts = fullPath.split('/').filter(p => p !== '' && p !== 'index.html');
+        return parts.length > 0 ? parts.join(' / ') : 'Root';
+      }
+
+      /**
+       * Open search result and track it
+       */
+      openSearchResult(href) {
+        this.addToRecentPlots(href);
+        window.open(href, '_blank');
+        document.getElementById('searchResults').style.display = 'none';
+      }
+
+      /**
+       * Add plot to recent plots list
+       */
+      addToRecentPlots(plotHref) {
+        const plotName = plotHref.split('/').pop().replace('.pdf', '');
+        const pathParts = plotHref.split('/').filter(p => p !== '' && p !== plotName + '.pdf');
+        const plotPath = pathParts.join(' / ');
+        const thumbUrl = plotHref.replace('.pdf', '.png');
+        
+        const plotInfo = {
+          name: plotName,
+          path: plotPath,
+          href: plotHref,
+          thumbUrl: thumbUrl,
+          timestamp: Date.now()
+        };
+        
+        let recentPlots = JSON.parse(localStorage.getItem('recentPlots') || '[]');
+        recentPlots = recentPlots.filter(p => p.href !== plotHref);
+        recentPlots.unshift(plotInfo);
+        recentPlots = recentPlots.slice(0, this.MAX_RECENT_PLOTS);
+        
+        localStorage.setItem('recentPlots', JSON.stringify(recentPlots));
+        this.updateRecentPlotsDisplay();
+      }
+
+      /**
+       * Update recent plots sidebar display
+       */
+      updateRecentPlotsDisplay() {
+        const sidebarContent = document.getElementById('sidebarContent');
+        const recentPlots = JSON.parse(localStorage.getItem('recentPlots') || '[]');
+        
+        if (recentPlots.length === 0) {
+          sidebarContent.innerHTML = `
+            <div style="text-align: center; color: var(--breadcrumb-color); margin: 2rem 0;">
+              📭 No recent plots yet<br>
+              <small style="opacity: 0.7;">Open some plots to see them here</small>
+            </div>
+          `;
+          return;
+        }
+        
+        let html = '';
+        recentPlots.forEach(plot => {
+          html += `
+            <div class="recent-plot" onclick="app.openRecentPlot('${plot.href}')" title="${plot.name}">
+              <img src="${plot.thumbUrl}" class="recent-plot-thumb" alt="${plot.name}" />
+              <div class="recent-plot-info">
+                <div class="recent-plot-name">${plot.name}</div>
+                <div class="recent-plot-path">📍 ${plot.path}</div>
+              </div>
+            </div>
+          `;
+        });
+        
+        sidebarContent.innerHTML = html;
+      }
+
+      /**
+       * Open recent plot and close sidebar
+       */
+      openRecentPlot(href) {
+        window.open(href, '_blank');
+        this.toggleSidebar();
+      }
+
+      /**
+       * Toggle recent plots sidebar
+       */
+      toggleSidebar() {
+        const sidebar = document.getElementById('sidebar');
+        const overlay = document.getElementById('sidebarOverlay');
+        
+        sidebar.classList.toggle('open');
+        overlay.classList.toggle('open');
+      }
+
+      /**
+       * Track clicks on plot links
+       */
+      trackPlotClicks() {
+        document.addEventListener('click', (e) => {
+          const link = e.target.closest('a[href$=".pdf"]');
+          if (link) {
+            this.addToRecentPlots(link.href);
+          }
+        });
+      }
+
+      /**
+       * Initialize keyboard shortcuts
+       */
+      initKeyboardShortcuts() {
+        document.addEventListener('keydown', (e) => {
+          if (e.ctrlKey && e.key === 'k') {
+            e.preventDefault();
+            document.getElementById('searchBox').focus();
+          }
+          
+          if (e.ctrlKey && e.key === 'r') {
+            e.preventDefault();
+            this.toggleSidebar();
+          }
+          
+          if (e.ctrlKey && e.key === 't') {
+            e.preventDefault();
+            this.toggleTheme();
+          }
+          
+          if (e.key === 'F5') {
+            e.preventDefault();
+            this.refreshGallery();
+          }
+          
+          if (e.key === '?' && !e.ctrlKey && !e.altKey && !e.metaKey) {
+            e.preventDefault();
+            this.toggleShortcutsHelp();
+          }
+          
+          if (e.key === 'Escape') {
+            document.getElementById('searchResults').style.display = 'none';
+            if (document.getElementById('sidebar').classList.contains('open')) {
+              this.toggleSidebar();
+            }
+            document.getElementById('shortcutsHelp').style.display = 'none';
+          }
+        });
+      }
+
+      /**
+       * Toggle keyboard shortcuts help display
+       */
+      toggleShortcutsHelp() {
+        const help = document.getElementById('shortcutsHelp');
+        help.style.display = help.style.display === 'block' ? 'none' : 'block';
+      }
+
+      /**
+       * Refresh gallery by calling CGI script
+       */
+      async refreshGallery() {
+        const refreshBtn = document.getElementById('refreshBtn');
+        refreshBtn.disabled = true;
+        refreshBtn.textContent = '⏳';
+        
+        try {
+          const response = await fetch('/cgi-bin/refresh_gallery.py', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            }
+          });
+          
+          if (response.ok) {
+            refreshBtn.textContent = '✅';
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          } else {
+            throw new Error('Refresh failed');
+          }
+        } catch (error) {
+          console.error('Error refreshing gallery:', error);
+          refreshBtn.textContent = '❌';
+          setTimeout(() => {
+            refreshBtn.disabled = false;
+            refreshBtn.textContent = '🔄';
+          }, 3000);
+        }
+      }
+
+      /**
+       * Navigate to deepest content folder automatically
+       */
+      async goToContent() {
+        const contentBtn = document.getElementById('contentBtn');
+        contentBtn.disabled = true;
+        contentBtn.textContent = '🔍 Searching...';
+        
+        let currentPath = window.location.pathname;
+        let visited = new Set();
+        let deepestWithContent = currentPath;
+        
+        while (true) {
+          if (visited.has(currentPath)) break;
+          visited.add(currentPath);
+          
+          try {
+            const response = await fetch(currentPath);
+            const html = await response.text();
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            
+            const items = doc.querySelectorAll('.grid-item');
+            const subdirs = doc.querySelectorAll('h2 + ul li a');
+            
+            if (items.length > 0) {
+              deepestWithContent = currentPath;
+            }
+            
+            if (subdirs.length === 1) {
+              const nextPath = subdirs[0].getAttribute('href');
+              if (nextPath) {
+                const baseUrl = currentPath.replace(/\/[^\/]*$/, '/');
+                currentPath = baseUrl + nextPath;
+              } else {
+                break;
+              }
+            } else {
+              break;
+            }
+          } catch (error) {
+            console.error('Error fetching:', error);
+            break;
+          }
+        }
+        
+        if (deepestWithContent !== window.location.pathname) {
+          window.location.href = deepestWithContent;
+        } else {
+          contentBtn.textContent = '✓ Already at content';
+          setTimeout(() => {
+            contentBtn.disabled = false;
+            contentBtn.textContent = '🎯 Go to Content';
+          }, 2000);
+        }
+      }
+
+      /**
+       * Hide 'Go to Content' button if not needed
+       */
+      hideContentButtonIfNeeded() {
+        const items = document.querySelectorAll('.grid-item');
+        const subdirs = document.querySelectorAll('h2 + ul li a');
+        const contentBtn = document.getElementById('contentBtn');
+        
+        if (items.length > 0 && subdirs.length === 0) {
+          contentBtn.style.display = 'none';
+        }
+      }
+    }
+
+    // ========================================
+    // GLOBAL FUNCTIONS (for backward compatibility)
+    // ========================================
+    let app;
+
+    function toggleTheme() { app.toggleTheme(); }
+    function toggleSidebar() { app.toggleSidebar(); }
+    function refreshGallery() { app.refreshGallery(); }
+    function goToContent() { app.goToContent(); }
+
+    // ========================================
+    // INITIALIZE APPLICATION
+    // ========================================
+    document.addEventListener('DOMContentLoaded', function() {
+      app = new GalleryApp();
+    });
+  </script>
 </body>
 </html>