diff --git a/README.md b/README.md
index ae4328d688d3..df633e669e76 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,6 @@ Information from YouTube API is also added to the database for videos.
 
 - [x] Build with Jekyll
   - [ ] Revamp index page
-  - [ ] Provide an item page for each API item
+  - [x] Provide an item page for each API item
 - [ ] Add unit tests
 - [ ] Add code coverage
diff --git a/gh-pages-template/_config.yml b/gh-pages-template/_config.yml
new file mode 100644
index 000000000000..29db1100929a
--- /dev/null
+++ b/gh-pages-template/_config.yml
@@ -0,0 +1,2 @@
+---
+site-js: []  # disable crowdin for this site
diff --git a/gh-pages-template/_includes/image_modal.html b/gh-pages-template/_includes/image_modal.html
new file mode 100644
index 000000000000..cfbc8e978f08
--- /dev/null
+++ b/gh-pages-template/_includes/image_modal.html
@@ -0,0 +1,74 @@
+<!-- Image Gallery Modal -->
+<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content bg-dark">
+      <div class="modal-header border-0">
+        <h5 class="modal-title" id="imageModalLabel">Image Gallery</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body d-flex align-items-center justify-content-center position-relative p-0">
+        <button type="button" class="btn btn-light position-absolute start-0 ms-3 rounded-circle" id="modal-prev-btn" style="z-index: 1050; width: 50px; height: 50px;">
+          <span class="material-symbols-outlined">chevron_left</span>
+        </button>
+        <img id="modal-image" src="" alt="" class="img-fluid" style="max-height: 90vh; max-width: 100%;">
+        <button type="button" class="btn btn-light position-absolute end-0 me-3 rounded-circle" id="modal-next-btn" style="z-index: 1050; width: 50px; height: 50px;">
+          <span class="material-symbols-outlined">chevron_right</span>
+        </button>
+      </div>
+      <div class="modal-footer border-0 justify-content-center">
+        <span id="modal-counter">1 / 1</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Image modal functionality
+(function() {
+    let currentImages = [];
+    let currentIndex = 0;
+
+    const modal = document.getElementById('imageModal');
+    const modalImage = document.getElementById('modal-image');
+    const modalCounter = document.getElementById('modal-counter');
+    const prevBtn = document.getElementById('modal-prev-btn');
+    const nextBtn = document.getElementById('modal-next-btn');
+
+    function updateImage() {
+        if (currentImages.length === 0) return;
+        modalImage.src = currentImages[currentIndex];
+        modalCounter.textContent = `${currentIndex + 1} / ${currentImages.length}`;
+    }
+
+    function showPrev() {
+        currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length;
+        updateImage();
+    }
+
+    function showNext() {
+        currentIndex = (currentIndex + 1) % currentImages.length;
+        updateImage();
+    }
+
+    // Event listeners
+    prevBtn.addEventListener('click', showPrev);
+    nextBtn.addEventListener('click', showNext);
+
+    // Keyboard navigation
+    document.addEventListener('keydown', function(e) {
+        if (modal.classList.contains('show')) {
+            if (e.key === 'ArrowLeft') showPrev();
+            else if (e.key === 'ArrowRight') showNext();
+        }
+    });
+
+    // Global function to open modal
+    globalThis.openImageModal = function(images, index) {
+        currentImages = images;
+        currentIndex = index;
+        updateImage();
+        const bsModal = new bootstrap.Modal(modal);
+        bsModal.show();
+    };
+})();
+</script>
diff --git a/gh-pages-template/assets/js/character_detail.js b/gh-pages-template/assets/js/character_detail.js
new file mode 100644
index 000000000000..c4edd9b5c056
--- /dev/null
+++ b/gh-pages-template/assets/js/character_detail.js
@@ -0,0 +1,46 @@
+/**
+ * character_detail.js
+ * Renders a single character detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderCharacter(data) {
+    document.title = (data.name || "Character") + " – GameDB";
+    document.getElementById("character-name").textContent = data.name || "Unknown Character";
+
+    // Mug shot
+    const mugEl = document.getElementById("character-mug");
+    const mugPlaceholder = document.getElementById("character-mug-placeholder");
+    const mugUrl = data.mug_shot?.url
+        ? igdbImageUrl(data.mug_shot.url, "t_cover_big_2x")
+        : null;
+    if (mugUrl) {
+        mugEl.src = mugUrl;
+        mugEl.alt = data.name || "";
+        mugEl.style.display = "";
+    } else {
+        mugPlaceholder.style.display = null;
+        mugPlaceholder.style.removeProperty("display");
+    }
+
+    // Badges / meta
+    const badgesEl = document.getElementById("character-badges");
+
+    if (data.character_gender?.name) {
+        badgesEl.appendChild(makeBadge(data.character_gender.name, "bg-info text-dark"));
+    }
+    if (data.character_species?.name) {
+        badgesEl.appendChild(makeBadge(data.character_species.name, "bg-secondary"));
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("character-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("character-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("characters", renderCharacter);
+});
diff --git a/gh-pages-template/assets/js/collection_detail.js b/gh-pages-template/assets/js/collection_detail.js
new file mode 100644
index 000000000000..cfdf91eb460c
--- /dev/null
+++ b/gh-pages-template/assets/js/collection_detail.js
@@ -0,0 +1,28 @@
+/**
+ * collection_detail.js
+ * Renders a single collection (series) detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderCollection(data) {
+    document.title = (data.name || "Series") + " – GameDB";
+    document.getElementById("collection-name").textContent = data.name || "Unknown Series";
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("collection-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("collection-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("collection-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("collections", renderCollection);
+});
diff --git a/gh-pages-template/assets/js/franchise_detail.js b/gh-pages-template/assets/js/franchise_detail.js
new file mode 100644
index 000000000000..b0229d4089b7
--- /dev/null
+++ b/gh-pages-template/assets/js/franchise_detail.js
@@ -0,0 +1,28 @@
+/**
+ * franchise_detail.js
+ * Renders a single franchise detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+function renderFranchise(data) {
+    document.title = (data.name || "Franchise") + " – GameDB";
+    document.getElementById("franchise-name").textContent = data.name || "Unknown Franchise";
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("franchise-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+
+    // Games
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("franchise-games-section");
+        section.classList.remove("d-none");
+        renderGameList(document.getElementById("franchise-games"), data.games);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("franchises", renderFranchise);
+});
diff --git a/gh-pages-template/assets/js/game_detail.js b/gh-pages-template/assets/js/game_detail.js
new file mode 100644
index 000000000000..6abb37961368
--- /dev/null
+++ b/gh-pages-template/assets/js/game_detail.js
@@ -0,0 +1,534 @@
+/**
+ * game_detail.js
+ * Renders a single game detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+/**
+ * Set up game banner/artworks in page header
+ */
+function setupGameBanner(data) {
+    const pageHeading = document.querySelector("header.header-section .page-heading");
+
+    if (data.artworks && data.artworks.length > 0) {
+        const bigImgsEl = document.getElementById("header-big-imgs");
+        const pageHeader = document.querySelector("header.header-section .intro-header");
+
+        if (pageHeader) {
+            // Set data attributes for each artwork
+            bigImgsEl.dataset.numImg = data.artworks.length;
+            data.artworks.forEach((artwork, index) => {
+                const imgNum = index + 1;
+                bigImgsEl.setAttribute(`data-img-src-${imgNum}`, igdbImageUrl(artwork.url, "t_screenshot_huge_2x"));
+            });
+
+            // Add big-img class and img-desc span to existing header
+            pageHeader.classList.add("big-img");
+
+            // Add img-desc span if it doesn't exist
+            if (!pageHeader.querySelector(".img-desc")) {
+                const imgDesc = document.createElement("span");
+                imgDesc.className = "img-desc";
+                pageHeader.appendChild(imgDesc);
+            }
+
+            // Hide the .page-heading (but keep space) when there's a banner image
+            if (pageHeading) {
+                pageHeading.style.visibility = "hidden";
+            }
+
+            // Initialize the image display
+            initGameBanner();
+        }
+    } else if (pageHeading) {
+        // No banner image, completely hide the .page-heading
+        pageHeading.style.display = "none";
+    }
+}
+
+/**
+ * Render game cover image or placeholder
+ */
+function renderGameCover(data) {
+    const coverEl = document.getElementById("game-cover");
+    const coverPlaceholder = document.getElementById("game-cover-placeholder");
+    if (data.cover?.url) {
+        coverEl.src = igdbImageUrl(data.cover.url, "t_cover_big_2x");
+        coverEl.alt = data.name || "";
+        coverEl.style.display = "";
+    } else {
+        coverPlaceholder.style.display = null;
+        coverPlaceholder.style.removeProperty("display");
+    }
+}
+
+/**
+ * Render game badges (genres, themes, modes, perspectives)
+ */
+function renderGameBadges(data) {
+    const badgesEl = document.getElementById("game-badges");
+
+    const addBadgeGroup = (items, cls) => {
+        if (items && items.length > 0) {
+            items.forEach(item => badgesEl.appendChild(makeBadge(item.name, cls)));
+        }
+    };
+
+    addBadgeGroup(data.genres, "bg-primary");
+    addBadgeGroup(data.themes, "bg-info text-dark");
+    addBadgeGroup(data.game_modes, "bg-success");
+    addBadgeGroup(data.player_perspectives, "bg-warning text-dark");
+}
+
+/**
+ * Render ratings (user and critic)
+ */
+function renderGameRatings(data, metaDl) {
+    if (data.rating !== undefined && data.rating !== null) {
+        addDlRow(metaDl, "User Rating", `${Math.round(data.rating)} / 100`);
+    }
+    if (data.aggregated_rating !== undefined && data.aggregated_rating !== null) {
+        addDlRow(metaDl, "Critic Rating", `${Math.round(data.aggregated_rating)} / 100`);
+    }
+
+    // Age ratings
+    if (data.age_ratings && data.age_ratings.length > 0) {
+        const ratingsEl = document.createDocumentFragment();
+        data.age_ratings.forEach(r => {
+            if (r.rating_category && r.organization) {
+                const badge = makeBadge(`${r.organization.name}: ${r.rating_category.rating}`, "bg-dark");
+                ratingsEl.appendChild(badge);
+            }
+        });
+        if (ratingsEl.childElementCount > 0) {
+            addDlRow(metaDl, "Age Ratings", ratingsEl);
+        }
+    }
+}
+
+/**
+ * Render platforms (async)
+ */
+function renderGamePlatforms(data, metaDl) {
+    if (data.platforms && data.platforms.length > 0) {
+        const platformsEl = document.createDocumentFragment();
+        const platformUrl = `${base_url}/platforms/all.json`;
+        fetch(platformUrl)
+            .then(r => r.json())
+            .then(allPlatforms => {
+                data.platforms.forEach(platformId => {
+                    const p = allPlatforms[String(platformId)];
+                    const name = p ? p.name : `Platform #${platformId}`;
+                    const a = document.createElement("a");
+                    a.href = `${base_path}/browse/platforms/?id=${platformId}`;
+                    a.className = "text-decoration-none me-1";
+                    a.appendChild(makeBadge(name, "bg-secondary"));
+                    platformsEl.appendChild(a);
+                });
+                addDlRow(metaDl, "Platforms", platformsEl);
+            })
+            .catch(() => {
+                const el = document.createDocumentFragment();
+                data.platforms.forEach(pid => {
+                    const a = document.createElement("a");
+                    a.href = `${base_path}/browse/platforms/?id=${pid}`;
+                    a.className = "text-decoration-none me-1";
+                    a.appendChild(makeBadge(`#${pid}`, "bg-secondary"));
+                    el.appendChild(a);
+                });
+                addDlRow(metaDl, "Platforms", el);
+            });
+    }
+}
+
+/**
+ * Render release dates
+ */
+function renderReleaseDates(data, metaDl) {
+    if (data.release_dates && data.release_dates.length > 0) {
+        const releasesEl = document.createDocumentFragment();
+        data.release_dates.forEach(rd => {
+            if (rd.date || rd.y) {
+                const div = document.createElement("div");
+                const regionName = rd.release_region?.region || null;
+                const flag = regionName ? getRegionFlag(regionName) : "";
+                div.textContent = `${flag} ${rd.human || rd.y || ""}`.trim();
+                releasesEl.appendChild(div);
+            }
+        });
+        if (releasesEl.childElementCount > 0) {
+            addDlRow(metaDl, "Release Dates", releasesEl);
+        }
+    }
+}
+
+/**
+ * Render developers and publishers
+ */
+function renderCompanies(data, metaDl) {
+    if (data.involved_companies && data.involved_companies.length > 0) {
+        const devs = data.involved_companies.filter(c => c.developer).map(c => c.company?.name).filter(Boolean);
+        const pubs = data.involved_companies.filter(c => !c.developer).map(c => c.company?.name).filter(Boolean);
+        if (devs.length > 0) {
+            addDlRow(metaDl, "Developer(s)", devs.join(", "));
+        }
+        if (pubs.length > 0) {
+            addDlRow(metaDl, "Publisher(s)", pubs.join(", "));
+        }
+    }
+}
+
+/**
+ * Render collections and franchises
+ */
+function renderCollectionsAndFranchises(data, metaDl) {
+    // Collections / series
+    if (data.collections && data.collections.length > 0) {
+        const el = document.createDocumentFragment();
+        data.collections.forEach(c => {
+            const a = document.createElement("a");
+            a.href = `${base_path}/browse/collections/?id=${c.id || c}`;
+            a.className = "text-decoration-none me-1";
+            a.appendChild(makeBadge(c.name || `#${c}`, "bg-primary"));
+            el.appendChild(a);
+        });
+        addDlRow(metaDl, "Series", el);
+    }
+
+    // Franchises
+    if (data.franchises && data.franchises.length > 0) {
+        const el = document.createDocumentFragment();
+        data.franchises.forEach(f => {
+            const a = document.createElement("a");
+            a.href = `${base_path}/browse/franchises/?id=${f.id || f}`;
+            a.className = "text-decoration-none me-1";
+            a.appendChild(makeBadge(f.name || `#${f}`, "bg-info text-dark"));
+            el.appendChild(a);
+        });
+        addDlRow(metaDl, "Franchise(s)", el);
+    } else if (data.franchise?.name) {
+        const el = document.createDocumentFragment();
+        const a = document.createElement("a");
+        a.href = `${base_path}/browse/franchises/?id=${data.franchise.id || ""}`;
+        a.className = "text-decoration-none me-1";
+        a.appendChild(makeBadge(data.franchise.name, "bg-info text-dark"));
+        el.appendChild(a);
+        addDlRow(metaDl, "Franchise", el);
+    }
+}
+
+/**
+ * Render multiplayer information
+ */
+function renderMultiplayer(data, metaDl) {
+    if (data.multiplayer_modes && data.multiplayer_modes.length > 0) {
+        const mm = data.multiplayer_modes[0];
+        const parts = [];
+        if (mm.offlinecoopmax) parts.push(`Co-op (offline): ${mm.offlinecoopmax} players`);
+        if (mm.onlinecoopmax) parts.push(`Co-op (online): ${mm.onlinecoopmax} players`);
+        if (mm.offlinemax) parts.push(`Versus (offline): ${mm.offlinemax} players`);
+        if (mm.onlinemax) parts.push(`Versus (online): ${mm.onlinemax} players`);
+        if (parts.length > 0) {
+            addDlRow(metaDl, "Multiplayer", parts.join(" · "));
+        }
+    }
+}
+
+function renderGame(data) {
+    // Title
+    document.title = (data.name || "Game") + " – GameDB";
+
+    // Set game name in both the page header and the content section
+    const gameName = data.name || "Unknown Game";
+    document.getElementById("game-name").textContent = gameName;
+
+    // Also set in page header if it exists
+    const pageHeaderH1 = document.querySelector("header.header-section .page-heading h1");
+    if (pageHeaderH1) {
+        pageHeaderH1.textContent = gameName;
+    }
+
+    setupGameBanner(data);
+    renderGameCover(data);
+    renderGameBadges(data);
+
+    // Metadata dl
+    const metaDl = document.getElementById("game-meta");
+
+    renderGameRatings(data, metaDl);
+    renderGamePlatforms(data, metaDl);
+    renderReleaseDates(data, metaDl);
+    renderCompanies(data, metaDl);
+    renderCollectionsAndFranchises(data, metaDl);
+    renderMultiplayer(data, metaDl);
+
+    // Summary
+    if (data.summary) {
+        const summarySection = document.getElementById("game-summary-section");
+        summarySection.classList.remove("d-none");
+        document.getElementById("game-summary").textContent = data.summary;
+    }
+
+    // Storyline
+    if (data.storyline) {
+        const storylineSection = document.getElementById("game-storyline-section");
+        storylineSection.classList.remove("d-none");
+        document.getElementById("game-storyline").textContent = data.storyline;
+    }
+
+    renderScreenshots(data);
+    renderVideos(data);
+    renderExternalLinks(data);
+    renderCharacters(data);
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("game-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+}
+
+/**
+ * Render screenshots section
+ */
+function renderScreenshots(data) {
+    if (data.screenshots && data.screenshots.length > 0) {
+        const section = document.getElementById("game-screenshots-section");
+        section.classList.remove("d-none");
+        const container = document.getElementById("game-screenshots");
+
+        // Prepare full-size image URLs for modal
+        const fullSizeUrls = data.screenshots.map(ss => igdbImageUrl(ss.url, "t_screenshot_huge_2x"));
+
+        data.screenshots.forEach((ss, index) => {
+            const col = document.createElement("div");
+            col.className = "col";
+            const btn = document.createElement("button");
+            btn.className = "btn p-0 border-0 w-100";
+            btn.onclick = () => globalThis.openImageModal(fullSizeUrls, index);
+            const img = document.createElement("img");
+            img.className = "img-fluid rounded shadow-sm w-100";
+            img.src = igdbImageUrl(ss.url, "t_screenshot_med_2x");
+            img.alt = "";
+            img.loading = "lazy";
+            img.style.cursor = "pointer";
+            btn.appendChild(img);
+            col.appendChild(btn);
+            container.appendChild(col);
+        });
+    }
+}
+
+/**
+ * Render videos section
+ */
+function renderVideos(data) {
+    if (data.videos && data.videos.length > 0) {
+        const section = document.getElementById("game-videos-section");
+        section.classList.remove("d-none");
+        const container = document.getElementById("game-videos");
+        data.videos.forEach(video => {
+            if (!video.video_id) return;
+            const col = document.createElement("div");
+            col.className = "col";
+            const card = document.createElement("div");
+            card.className = "card h-100 border-0 shadow-sm rounded-0";
+            col.appendChild(card);
+            container.appendChild(col);
+
+            // Embed YouTube video
+            const embedContainer = document.createElement("div");
+            embedContainer.className = "ratio ratio-16x9 rounded-0";
+            const iframe = document.createElement("iframe");
+            iframe.src = `https://www.youtube.com/embed/${video.video_id}`;
+            iframe.title = video.name || video.title || "Video";
+            iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+            iframe.allowFullscreen = true;
+            iframe.loading = "lazy";
+            embedContainer.appendChild(iframe);
+            card.appendChild(embedContainer);
+
+            if (video.name || video.title) {
+                const cardBody = document.createElement("div");
+                cardBody.className = "card-body p-2";
+                const title = document.createElement("p");
+                title.className = "card-text small mb-0 fw-semibold";
+                title.textContent = video.name || video.title;
+                cardBody.appendChild(title);
+                card.appendChild(cardBody);
+            }
+        });
+    }
+}
+
+/**
+ * Render external links section
+ */
+function renderExternalLinks(data) {
+    if (data.external_games && data.external_games.length > 0) {
+        const section = document.getElementById("game-external-section");
+        section.classList.remove("d-none");
+        const container = document.getElementById("game-external");
+        data.external_games.forEach(ext => {
+            if (!ext.url && !ext.uid) return;
+            const sourceName = ext.external_game_source?.name || "External";
+            const a = document.createElement("a");
+            a.href = ext.url || "#";
+            a.target = "_blank";
+            a.rel = "noopener";
+            a.className = "btn btn-outline-secondary btn-sm";
+            a.textContent = sourceName;
+            container.appendChild(a);
+        });
+    }
+}
+
+/**
+ * Render characters section
+ */
+function renderCharacters(data) {
+    if (data.characters && data.characters.length > 0) {
+        const section = document.getElementById("game-characters-section");
+        section.classList.remove("d-none");
+        const container = document.getElementById("game-characters");
+
+        data.characters.forEach(char => {
+            const col = document.createElement("div");
+            col.className = "col";
+            const card = document.createElement("a");
+            card.href = `${base_path}/browse/characters/?id=${char.id || char}`;
+            card.className = "card h-100 text-decoration-none border-0 shadow-sm";
+            col.appendChild(card);
+            container.appendChild(col);
+
+            if (char.mug_shot?.url) {
+                const img = document.createElement("img");
+                img.className = "card-img-top rounded-top";
+                img.src = igdbImageUrl(char.mug_shot.url, "t_cover_small_2x");
+                img.alt = char.name || "";
+                img.loading = "lazy";
+                card.appendChild(img);
+            } else {
+                const placeholder = document.createElement("div");
+                placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center";
+                placeholder.style.height = "120px";
+                const icon = document.createElement("span");
+                icon.className = "material-symbols-outlined text-white";
+                icon.textContent = "person";
+                placeholder.appendChild(icon);
+                card.appendChild(placeholder);
+            }
+
+            if (char.name) {
+                const cardBody = document.createElement("div");
+                cardBody.className = "card-body p-2";
+                const name = document.createElement("p");
+                name.className = "card-text small mb-0 text-center";
+                name.textContent = char.name;
+                cardBody.appendChild(name);
+                card.appendChild(cardBody);
+            }
+        });
+    }
+}
+
+/**
+ * Map region string (from release_region.region) to an emoji flag.
+ * @param {string} regionName
+ * @returns {string}
+ */
+function getRegionFlag(regionName) {
+    const map = {
+        "europe": "🇪🇺",
+        "north_america": "🇺🇸",
+        "australia": "🇦🇺",
+        "new_zealand": "🇳🇿",
+        "japan": "🇯🇵",
+        "china": "🇨🇳",
+        "asia": "🌏",
+        "worldwide": "🌍",
+        "korea": "🇰🇷",
+        "brazil": "🇧🇷",
+    };
+    return map[regionName] || "🌐";
+}
+
+/**
+ * Initialize game banner with cycling images (mimics beautiful-jekyll-next behavior)
+ */
+function initGameBanner() {
+    const bigImgsEl = document.getElementById("header-big-imgs");
+    const numImgs = Number.parseInt(bigImgsEl.dataset.numImg, 10);
+
+    if (!numImgs || numImgs === 0) return;
+
+    // Target the existing page header
+    const introHeader = document.querySelector("header.header-section .intro-header.big-img");
+    if (!introHeader) return;
+
+    // Set initial image
+    const getImgInfo = function(imgNum) {
+        const src = bigImgsEl.getAttribute(`data-img-src-${imgNum}`);
+        const desc = bigImgsEl.getAttribute(`data-img-desc-${imgNum}`);
+        return { src, desc };
+    };
+
+    const setImg = function(src, desc) {
+        introHeader.style.backgroundImage = `url(${src})`;
+
+        const imgDesc = introHeader.querySelector(".img-desc");
+        if (imgDesc) {
+            if (desc && desc !== "null") {
+                imgDesc.textContent = desc;
+                imgDesc.style.display = "block";
+            } else {
+                imgDesc.style.display = "none";
+            }
+        }
+    };
+
+    // Set first image
+    const firstImg = getImgInfo(1);
+    setImg(firstImg.src, firstImg.desc);
+
+    // Cycle through images if multiple
+    if (numImgs > 1) {
+        let currentImgNum = 1;
+
+        const getNextImg = function() {
+            currentImgNum = (currentImgNum % numImgs) + 1;
+            const imgInfo = getImgInfo(currentImgNum);
+            const src = imgInfo.src;
+            const desc = imgInfo.desc;
+
+            // Prefetch next image
+            const prefetchImg = new Image();
+            prefetchImg.src = src;
+
+            setTimeout(function() {
+                const img = document.createElement("div");
+                img.className = "big-img-transition";
+                img.style.backgroundImage = `url(${src})`;
+                introHeader.prepend(img);
+
+                setTimeout(function() {
+                    img.style.opacity = "1";
+                }, 50);
+
+                // After fade-in completes, update main image and remove transition element
+                setTimeout(function() {
+                    setImg(src, desc);
+                    img.remove();
+                    getNextImg();
+                }, 1000);
+            }, 6000);
+        };
+
+        getNextImg();
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("games", renderGame);
+});
diff --git a/gh-pages-template/assets/js/item_detail.js b/gh-pages-template/assets/js/item_detail.js
new file mode 100644
index 000000000000..b51f568c0662
--- /dev/null
+++ b/gh-pages-template/assets/js/item_detail.js
@@ -0,0 +1,230 @@
+/**
+ * item_detail.js
+ *
+ * Shared utility for GameDB item detail pages.
+ * Each page calls `loadItemDetail(endpoint, renderFn)` on DOMContentLoaded.
+ *
+ * The page URL is expected to contain `?id=<item_id>`.
+ *
+ * Requires window.GAMEDB_CONFIG to be set by an inline <script> in the page:
+ *   window.GAMEDB_CONFIG = { base_path: "{{ site.baseurl }}", base_url: "{{ site.url }}{{ site.baseurl }}" };
+ */
+
+const base_path = (globalThis.GAMEDB_CONFIG?.base_path
+    ? ("/" + globalThis.GAMEDB_CONFIG.base_path).replaceAll(/\/+/g, "/").replace(/\/$/, "")
+    : "/GameDB");
+const base_url = globalThis.location.origin + base_path;
+
+/**
+ * Read a query-string parameter from the current URL.
+ * @param {string} name
+ * @returns {string|null}
+ */
+function getQueryParam(name) {
+    const params = new URLSearchParams(globalThis.location.search);
+    return params.get(name);
+}
+
+/**
+ * Build an IGDB image URL at a given size.
+ * @param {string} url - raw URL from IGDB (may start with //)
+ * @param {string} [size="t_cover_big"]
+ * @returns {string}
+ */
+function igdbImageUrl(url, size = "t_cover_big") {
+    if (!url) return null;
+    return url.replace("t_thumb", size).replace(/^\/\//, "https://");
+}
+
+/**
+ * Create a Bootstrap badge element.
+ * @param {string} text
+ * @param {string} [cls="bg-secondary"]
+ * @returns {HTMLElement}
+ */
+function makeBadge(text, cls = "bg-secondary") {
+    const b = document.createElement("span");
+    b.className = `badge ${cls} me-1 mb-1`;
+    b.style.whiteSpace = "nowrap";
+    b.textContent = text;
+    return b;
+}
+
+/**
+ * Render a key-value row inside a <dl>.
+ * @param {HTMLElement} dl
+ * @param {string} label
+ * @param {string|HTMLElement} value
+ */
+function addDlRow(dl, label, value) {
+    const dt = document.createElement("dt");
+    dt.className = "col-sm-4 col-md-3 fw-semibold";
+    dt.textContent = label;
+    dl.appendChild(dt);
+
+    const dd = document.createElement("dd");
+    dd.className = "col-sm-8 col-md-9";
+    if (value instanceof HTMLElement || value instanceof DocumentFragment) {
+        dd.appendChild(value);
+    } else {
+        dd.textContent = value;
+    }
+    dl.appendChild(dd);
+}
+
+/**
+ * Show an error message in #item-error and hide #item-content.
+ * @param {string} message
+ */
+function showError(message) {
+    const errEl = document.getElementById("item-error");
+    const contentEl = document.getElementById("item-content");
+    if (errEl) {
+        errEl.textContent = message;
+        errEl.classList.remove("d-none");
+    }
+    if (contentEl) {
+        contentEl.classList.add("d-none");
+    }
+    const loadingEl = document.getElementById("item-loading");
+    if (loadingEl) loadingEl.classList.add("d-none");
+}
+
+/**
+ * Load an item from the API and call the render function.
+ * @param {string} endpoint - e.g. "games", "platforms"
+ * @param {function} renderFn - called with the item data object
+ */
+function loadItemDetail(endpoint, renderFn) {
+    const id = getQueryParam("id");
+    if (!id) {
+        showError("No item ID specified. Please go back and select an item.");
+        return;
+    }
+
+    const url = `${base_url}/${endpoint}/${encodeURIComponent(id)}.json`;
+
+    fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Item not found (HTTP ${response.status})`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            const loadingEl = document.getElementById("item-loading");
+            if (loadingEl) loadingEl.classList.add("d-none");
+            const contentEl = document.getElementById("item-content");
+            if (contentEl) contentEl.classList.remove("d-none");
+            renderFn(data);
+        })
+        .catch(err => {
+            showError(`Failed to load item: ${err.message}`);
+        });
+}
+
+/**
+ * Render a list of game cards (compact) into a container element.
+ * Games are fetched from individual game files when needed to get cover art.
+ * @param {HTMLElement} container
+ * @param {Array<number|object>} games - array of game IDs or game objects with {id, name, cover}
+ */
+function renderGameList(container, games) {
+    if (!games || games.length === 0) {
+        container.textContent = "No games listed.";
+        return;
+    }
+
+    const row = document.createElement("div");
+    row.className = "row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2";
+    container.appendChild(row);
+
+    // Separate games into those with full data and those that need fetching
+    const gamesToFetch = [];
+    const gamesWithData = [];
+
+    games.forEach(game => {
+        const gameId = typeof game === "object" ? game.id : game;
+        const hasFullData = typeof game === "object" && game.name && game.cover;
+
+        if (hasFullData) {
+            gamesWithData.push(game);
+        } else {
+            gamesToFetch.push(gameId);
+        }
+    });
+
+    // Render games that already have full data
+    gamesWithData.forEach(game => {
+        renderGameCard(row, game.id, game.name, game.cover ? igdbImageUrl(game.cover.url, "t_cover_small_2x") : null);
+    });
+
+    // Fetch and render games that only have IDs
+    if (gamesToFetch.length > 0) {
+        // Fetch each game's data
+        const fetchPromises = gamesToFetch.map(gameId => {
+            return fetch(`${base_path}/games/${gameId}.json`)
+                .then(r => r.ok ? r.json() : null)
+                .then(gameData => ({ id: gameId, data: gameData }))
+                .catch(() => ({ id: gameId, data: null }));
+        });
+
+        Promise.all(fetchPromises).then(results => {
+            results.forEach(({ id, data }) => {
+                const name = data ? data.name : null;
+                const coverUrl = data?.cover ? igdbImageUrl(data.cover.url, "t_cover_small_2x") : null;
+                renderGameCard(row, id, name, coverUrl);
+            });
+        });
+    }
+}
+
+/**
+ * Helper function to render a single game card
+ */
+function renderGameCard(row, gameId, gameName, coverUrl) {
+    const col = document.createElement("div");
+    col.className = "col";
+    row.appendChild(col);
+
+    const card = document.createElement("a");
+    card.className = "card h-100 text-decoration-none shadow-sm border-0 rounded-0 game-card";
+    card.href = `${base_path}/browse/games/?id=${gameId}`;
+    col.appendChild(card);
+
+    if (coverUrl) {
+        const img = document.createElement("img");
+        img.className = "card-img-top rounded-0";
+        img.src = coverUrl;
+        img.alt = gameName || "";
+        img.loading = "lazy";
+        card.appendChild(img);
+    } else {
+        const placeholder = document.createElement("div");
+        placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center";
+        placeholder.style.height = "120px";
+        const icon = document.createElement("span");
+        icon.className = "material-symbols-outlined text-white";
+        icon.textContent = "sports_esports";
+        placeholder.appendChild(icon);
+        card.appendChild(placeholder);
+    }
+
+    const cardBody = document.createElement("div");
+    cardBody.className = "card-body p-1";
+    card.appendChild(cardBody);
+
+    if (gameName) {
+        const nameEl = document.createElement("p");
+        nameEl.className = "card-text small mb-0 text-truncate";
+        nameEl.textContent = gameName;
+        nameEl.title = gameName;
+        cardBody.appendChild(nameEl);
+    } else {
+        // Show game ID as fallback
+        const nameEl = document.createElement("p");
+        nameEl.className = "card-text small mb-0 text-muted";
+        nameEl.textContent = `Game #${gameId}`;
+        cardBody.appendChild(nameEl);
+    }
+}
diff --git a/gh-pages-template/assets/js/item_loader.js b/gh-pages-template/assets/js/item_loader.js
index 9345b642afe7..e658b6a22ab3 100644
--- a/gh-pages-template/assets/js/item_loader.js
+++ b/gh-pages-template/assets/js/item_loader.js
@@ -1,13 +1,399 @@
-// setup defaults
-let org_name = "LizardByte"
-let base_url = `https://app.${org_name.toLowerCase()}.dev/GameDB`
+// setup defaults — base_path is injected by Jekyll via globalThis.GAMEDB_CONFIG
+const _cfg = globalThis.GAMEDB_CONFIG || {};
+let base_path = _cfg.base_path
+    ? ("/" + _cfg.base_path).replaceAll(/\/+/g, "/").replace(/\/$/, "")
+    : "/GameDB";
+let base_url = globalThis.location.origin + base_path;
 
-// get search options, we will append each platform to this list
-let search_options = document.getElementById("search_type")
 
 // get platforms container
 let platforms_container = document.getElementById("platforms-container")
 
+/**
+ * Split string for card display
+ */
+function splitString(string) {
+    if (string === undefined) {
+        return [undefined];
+    }
+
+    // Ensure the string is longer than 200 characters for more consistent card heights
+    if (string.length > 200) {
+        // Find the last full word prior to the 200th character using regex
+        const regex = /(.{0,200})\b/;
+        const match = regex.exec(string);
+
+        if (match) {
+            // Split the string at the end of the last full word
+            const splitIndex = match[1].length;
+            const firstPart = string.slice(0, splitIndex);
+
+            return [firstPart, string];
+        }
+  }
+
+  // Return the string as is if it's shorter than 200 characters
+  return [string];
+}
+
+/**
+ * Fetch game data for search results
+ */
+function fetchGameData(id, gameName) {
+    return fetch(`${base_url}/games/${id}.json`)
+        .then(r => r.ok ? r.json() : null)
+        .then(fullGame => ({ id, game: fullGame || { name: gameName } }))
+        .catch(() => ({ id, game: { name: gameName } }));
+}
+
+/**
+ * Create game card element for search results
+ */
+function createGameCard(id, game, allPlatforms = null) {
+    const col = document.createElement("div")
+    col.className = "col"
+    col.style.maxWidth = "180px"
+
+    const card = document.createElement("a")
+    card.className = "card h-100 text-decoration-none shadow-sm border-0 rounded-0"
+    card.href = `${base_path}/browse/games/?id=${id}`
+    col.appendChild(card)
+
+    // Cover image or placeholder
+    if (game.cover?.url) {
+        const coverImg = document.createElement("img")
+        coverImg.className = "card-img-top rounded-top-0"
+        let coverUrl = game.cover.url
+        coverUrl = 'https:' + coverUrl.replace('t_thumb', 't_cover_big_2x')
+        coverImg.src = coverUrl
+        coverImg.alt = game.name
+        coverImg.loading = "lazy"
+        coverImg.style.width = "100%"
+        coverImg.style.aspectRatio = "3 / 4"
+        coverImg.style.objectFit = "cover"
+        card.appendChild(coverImg)
+    } else {
+        const placeholder = document.createElement("div")
+        placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center"
+        placeholder.style.width = "100%"
+        placeholder.style.aspectRatio = "3 / 4"
+        const icon = document.createElement("span")
+        icon.className = "material-symbols-outlined text-white"
+        icon.style.fontSize = "3rem"
+        icon.textContent = "sports_esports"
+        placeholder.appendChild(icon)
+        card.appendChild(placeholder)
+    }
+
+    const cardBody = document.createElement("div")
+    cardBody.className = "card-body p-2"
+    card.appendChild(cardBody)
+
+    // Game name
+    const nameEl = document.createElement("h6")
+    nameEl.className = "card-title small mb-2 fw-bold"
+    nameEl.textContent = game.name
+    nameEl.title = game.name
+    nameEl.style.overflow = "hidden"
+    nameEl.style.display = "-webkit-box"
+    nameEl.style.webkitLineClamp = "2"
+    nameEl.style.setProperty("-webkit-box-orient", "vertical")
+    cardBody.appendChild(nameEl)
+
+    // Platforms with release years
+    if (allPlatforms && game.platforms && game.platforms.length > 0) {
+        const platformsDiv = document.createElement("div")
+        platformsDiv.className = "mb-2"
+        platformsDiv.style.wordBreak = "break-word"
+        platformsDiv.style.overflow = "hidden"
+
+        // Group release dates by platform
+        const platformYears = {}
+        if (game.release_dates && game.release_dates.length > 0) {
+            game.release_dates.forEach(rd => {
+                if (rd.platform && rd.y) {
+                    if (!platformYears[rd.platform] || rd.y < platformYears[rd.platform]) {
+                        platformYears[rd.platform] = rd.y
+                    }
+                }
+            })
+        }
+
+        // Show first 3 platforms
+        game.platforms.slice(0, 3).forEach(platformId => {
+            const platform = allPlatforms[String(platformId)]
+            const platformName = platform ? platform.name : `Platform ${platformId}`
+            const year = platformYears[platformId] ? ` (${platformYears[platformId]})` : ""
+
+            const badge = document.createElement("span")
+            badge.className = "badge bg-secondary me-1 mb-1 small"
+            badge.style.fontSize = "0.7rem"
+            badge.style.whiteSpace = "normal"
+            badge.style.wordBreak = "break-word"
+            badge.textContent = platformName + year
+            platformsDiv.appendChild(badge)
+        })
+
+        if (game.platforms.length > 3) {
+            const moreBadge = document.createElement("span")
+            moreBadge.className = "badge bg-secondary me-1 mb-1 small"
+            moreBadge.style.fontSize = "0.7rem"
+            moreBadge.textContent = `+${game.platforms.length - 3} more`
+            platformsDiv.appendChild(moreBadge)
+        }
+
+        cardBody.appendChild(platformsDiv)
+    }
+
+    return col
+}
+
+/**
+ * Render search results into the row container
+ */
+function renderSearchResults(results, row, allPlatforms) {
+    results.forEach(({ id, game }) => {
+        row.appendChild(createGameCard(id, game, allPlatforms))
+    })
+}
+
+/**
+ * Add "showing X of Y" note if there are more results
+ */
+function addMoreResultsNote(container, totalCount, shownCount) {
+    if (totalCount > shownCount) {
+        const moreNote = document.createElement("p")
+        moreNote.className = "text-muted mt-3 small"
+        moreNote.textContent = `Showing first ${shownCount} of ${totalCount} results. Try a more specific search term.`
+        container.appendChild(moreNote)
+    }
+}
+
+/**
+ * Create banner image element for platform card
+ */
+function createPlatformBanner(platform, basePath) {
+    const banner = document.createElement("img");
+    banner.className = "card-img-top rounded-0";
+    banner.alt = "";
+
+    if (platform.screenscraper_id !== null && platform.screenscraper_region !== null) {
+        banner.src = `https://screenscraper.fr/image.php?plateformid=${platform.screenscraper_id}&media=wheel&region=${platform.screenscraper_region}&num=&version=&maxwidth=600&maxheight=600`;
+        banner.classList.add("bg-dark", "bg-gradient", "p-4");
+    } else {
+        const logoUrl = platform.platform_logo?.url;
+        if (logoUrl) {
+            banner.src = logoUrl.replace("t_thumb", "t_720p");
+        } else {
+            banner.src = `${basePath}/assets/img/no-logo.png`;
+            banner.classList.add("bg-dark", "bg-gradient", "p-4");
+        }
+    }
+
+    return banner;
+}
+
+/**
+ * Create card body content for platform card
+ */
+function createPlatformCardBody(platform, basePath) {
+    const card_body = document.createElement("div");
+    card_body.className = "card-body p-4 rounded-0";
+
+    const card_title_link = document.createElement("a");
+    card_title_link.className = "text-decoration-none project-card-link";
+    card_title_link.href = `${basePath}/browse/platforms/?id=${platform.id}`;
+    card_body.appendChild(card_title_link);
+
+    const card_title_text = document.createElement("h5");
+    card_title_text.className = "card-title mb-1 fw-bolder";
+    card_title_text.textContent = platform.name;
+    card_title_link.appendChild(card_title_text);
+
+    const igdb_link = document.createElement("a");
+    igdb_link.href = platform.url;
+    igdb_link.target = "_blank";
+    igdb_link.rel = "noopener";
+    igdb_link.className = "small text-muted text-decoration-none mb-2 d-inline-block";
+    igdb_link.textContent = "View on IGDB ↗";
+    card_body.appendChild(igdb_link);
+
+    if (platform.game_count !== undefined && platform.game_count > 0) {
+        const game_count = document.createElement("div");
+        game_count.className = "small text-muted mb-2";
+        game_count.textContent = `${platform.game_count} game${platform.game_count === 1 ? '' : 's'}`;
+        card_body.appendChild(game_count);
+    }
+
+    return card_body;
+}
+
+/**
+ * Get appropriate version based on platform category
+ */
+function getPlatformVersion(platform) {
+    if (!platform.versions || platform.versions.length === 0) {
+        return null;
+    }
+
+    if (platform.category === 4) {
+        // Operating system - get last version (newest)
+        return platform.versions[platform.versions.length - 1];
+    } else {
+        // Console/PC/etc - get first version (initial)
+        return platform.versions[0];
+    }
+}
+
+/**
+ * Add metadata from version to card footer
+ */
+function addVersionMetadataToFooter(version, card_paragraph, card_footer, platform, platform_region_flag_map, metadata_key_icon_map) {
+    for (let key in metadata_key_icon_map) {
+        if (version[key] === undefined) continue;
+
+        if (key === 'summary') {
+            if (platform.summary === undefined) {
+                const summary = splitString(version[key]);
+                card_paragraph.textContent = summary[0];
+            }
+        } else if (key === 'platform_version_release_dates') {
+            addReleaseDatesToFooter(version[key], card_footer, platform_region_flag_map);
+        } else if (metadata_key_icon_map[key]) {
+            addMetadataItemToFooter(key, version[key], card_footer, metadata_key_icon_map[key]);
+        }
+    }
+}
+
+/**
+ * Add release dates to card footer
+ */
+function addReleaseDatesToFooter(releaseDates, card_footer, platform_region_flag_map) {
+    const metadata_div = document.createElement("div");
+    metadata_div.className = "ms-4 mb-2";
+
+    for (let release_date of releaseDates) {
+        const release_date_div = document.createElement("div");
+        release_date_div.className = "d-flex align-items-center";
+        metadata_div.appendChild(release_date_div);
+
+        const regionName = release_date.release_region?.region;
+        if (regionName && platform_region_flag_map[regionName]) {
+            const flag_prefix = document.createElement("span");
+            flag_prefix.className = `${platform_region_flag_map[regionName].size} me-3 text-center`;
+            flag_prefix.style.width = "2rem";
+            flag_prefix.textContent = platform_region_flag_map[regionName].code;
+            release_date_div.appendChild(flag_prefix);
+        }
+
+        const release_text = document.createElement("small");
+        release_text.className = "text-muted";
+        release_text.textContent = release_date.human || release_date.y || "";
+        release_date_div.appendChild(release_text);
+    }
+
+    card_footer.appendChild(metadata_div);
+}
+
+/**
+ * Add single metadata item to card footer
+ */
+function addMetadataItemToFooter(key, value, card_footer, iconName) {
+    const metadata_div = document.createElement("div");
+    metadata_div.className = "ms-4 mb-2 d-flex align-items-start";
+
+    const icon = document.createElement("span");
+    icon.className = "material-symbols-outlined me-3 text-muted";
+    icon.style.fontSize = "1.25rem";
+    icon.textContent = iconName;
+    metadata_div.appendChild(icon);
+
+    const text = document.createElement("small");
+    text.className = "text-muted flex-grow-1";
+    text.textContent = value;
+    metadata_div.appendChild(text);
+
+    card_footer.appendChild(metadata_div);
+}
+
+/**
+ * Process platforms data and add screenscraper IDs
+ */
+function processPlatformsData(result, platform_xref) {
+    const platforms = [];
+    for (let platform in result) {
+        result[platform].screenscraper_id = null;
+        result[platform].screenscraper_region = null;
+
+        for (let xref in platform_xref) {
+            if (platform_xref[xref].ids?.igdb === result[platform].id) {
+                result[platform].screenscraper_id = platform_xref[xref].ids?.screenscraper;
+                result[platform].screenscraper_region = platform_xref[xref].variables?.screenscraper?.region;
+                break;
+            }
+        }
+
+        platforms.push(result[platform]);
+    }
+    return platforms;
+}
+
+/**
+ * Create complete platform card element
+ */
+function createPlatformCardElement(platform, platform_region_flag_map, metadata_key_icon_map, basePath) {
+    const column = document.createElement("div");
+    column.className = "col-lg-4 mb-5";
+
+    const card = document.createElement("div");
+    card.className = "card h-100 shadow border-0 rounded-0";
+    column.appendChild(card);
+
+    // Banner
+    const banner_div = document.createElement("div");
+    banner_div.className = "hover-zoom";
+    card.append(banner_div);
+
+    const banner_link = document.createElement("a");
+    banner_link.href = `${basePath}/browse/platforms/?id=${platform.id}`;
+    banner_div.append(banner_link);
+
+    const banner = createPlatformBanner(platform, basePath);
+
+    // Remove hover effect if using placeholder image
+    if (platform.screenscraper_id === null && !platform.platform_logo?.url) {
+        banner_div.classList.remove("hover-zoom");
+    }
+
+    banner_link.append(banner);
+
+    // Card body
+    const card_body = createPlatformCardBody(platform, basePath);
+    card.appendChild(card_body);
+
+    // Summary
+    const summary = splitString(platform.summary);
+    const card_paragraph_div = document.createElement("div");
+    card_paragraph_div.className = "mb-3";
+    card_body.appendChild(card_paragraph_div);
+
+    const card_paragraph = document.createElement("p");
+    card_paragraph.className = "card-text mb-0";
+    card_paragraph.textContent = summary[0];
+    card_paragraph_div.appendChild(card_paragraph);
+
+    const card_footer = document.createElement("div");
+    card_footer.className = "card-footer p-2 pt-0 border-0 rounded-0";
+    card.appendChild(card_footer);
+
+    // Add metadata from version if available
+    const version = getPlatformVersion(platform);
+    if (version) {
+        addVersionMetadataToFooter(version, card_paragraph, card_footer, platform, platform_region_flag_map, metadata_key_icon_map);
+    }
+
+    return column;
+}
 
 $(document).ready(function(){
     // Set cache = false for all jquery ajax requests.
@@ -89,29 +475,6 @@ $(document).ready(function(){
         'summary': null,
     }
 
-    let splitString = function(string) {
-        if (string === undefined) {
-            return [undefined];
-        }
-
-        // Ensure the string is longer than 500 characters
-        if (string.length > 500) {
-            // Find the last full word prior to the 500th character using regex
-            const regex = /(.{0,500})\b/;
-            const match = regex.exec(string);
-
-            if (match) {
-                // Split the string at the end of the last full word
-                const splitIndex = match[1].length;
-                const firstPart = string.slice(0, splitIndex);
-
-                return [firstPart, string];
-            }
-      }
-
-      // Return the string as is if it's shorter than 500 characters
-      return [string];
-    }
 
     // create platform cards
     let initialize = function(){
@@ -120,206 +483,107 @@ $(document).ready(function(){
             type: "GET",
             dataType:"json",
             success: function (result) {
-                let platforms = []
-                for (let platform in result) {
-
-                    // add screenscraper id to platform, start with null value
-                    result[platform]['screenscraper_id'] = null
-                    result[platform]['screenscraper_region'] = null
-
-                    for (let xref in platform_xref) {
-                        if (platform_xref[xref]['ids']['igdb'] === result[platform]['id']) {
-                            result[platform]['screenscraper_id'] = platform_xref[xref]['ids']['screenscraper']
-                            result[platform]['screenscraper_region'] = platform_xref[xref]['variables']['screenscraper']['region']
-                        }
-                    }
-
-                    platforms.push(result[platform])
-                }
-
-                let sorted = platforms.sort(window.rankingSorter("name", "id")).reverse()
+                const platforms = processPlatformsData(result, platform_xref);
+                const sorted = platforms.toSorted(globalThis.rankingSorter("name", "id")).reverse();
 
                 for(let item in sorted) {
-                    // create search option
-                    let search_option = document.createElement("option")
-                    search_option.value = sorted[item]['id']
-                    search_option.textContent = sorted[item]['name']
-                    search_options.appendChild(search_option)
-
-                    let column = document.createElement("div")
-                    column.className = "col-lg-4 mb-5"
-                    platforms_container.appendChild(column)
-
-                    let card = document.createElement("div")
-                    card.className = "card h-100 shadow border-0 rounded-0"
-                    column.appendChild(card)
-
-                    let banner_div = document.createElement("div")
-                    banner_div.className = "hover-zoom"
-                    card.append(banner_div)
-
-                    let banner_link = document.createElement("a")
-                    banner_link.href = sorted[item]['url']
-                    banner_link.target = "_blank"
-                    banner_div.append(banner_link)
-
-                    let banner = document.createElement("img")
-                    banner.className = "card-img-top rounded-0"
-
-                    // see if screensraper id has an image
-                    if (sorted[item]['screenscraper_id'] !== null && sorted[item]['screenscraper_region'] !== null) {
-                        banner.src = `https://screenscraper.fr/image.php?plateformid=${sorted[item]['screenscraper_id']}&media=wheel&region=${sorted[item]['screenscraper_region']}&num=&version=&maxwidth=600&maxheight=600`
-                        banner.classList.add("bg-dark")
-                        banner.classList.add("bg-gradient")
-                        banner.classList.add("p-4")
-                    }
-                    else {
-                        try {
-                            banner.src = sorted[item]['platform_logo']['url'].replace("t_thumb", "t_cover_big")
-                        }
-                        catch (err) {
-                            banner.src = "/GameDB/assets/img/no-logo.png"
-                            banner.classList.add("bg-dark")
-                            banner.classList.add("bg-gradient")
-                            banner.classList.add("p-4")
-                            banner_div.classList.remove("hover-zoom")
-                        }
-                    }
-                    banner.alt = ""
-                    banner_link.append(banner)
-
-                    let card_body = document.createElement("div")
-                    card_body.className = "card-body p-4 rounded-0"
-                    card.appendChild(card_body)
-
-                    let card_title_link = document.createElement("a")
-                    card_title_link.className = "text-decoration-none project-card-link"
-                    card_title_link.href = sorted[item]['url']
-                    card_title_link.target = "_blank"
-                    card_body.appendChild(card_title_link)
-
-                    let card_title_text = document.createElement("h5")
-                    card_title_text.className = "card-title mb-3 fw-bolder"
-                    card_title_text.textContent = sorted[item]['name']
-                    card_title_link.appendChild(card_title_text)
-
-                    let summary = splitString(sorted[item]['summary'])
-
-                    let card_paragraph_div = document.createElement("div")
-                    card_paragraph_div.className = "mb-3"
-                    card_body.appendChild(card_paragraph_div)
-
-                    let card_paragraph = document.createElement("p")
-                    card_paragraph.className = "card-text mb-0"
-                    card_paragraph.textContent = summary[0]
-                    card_paragraph_div.appendChild(card_paragraph)
-
-                    let card_footer = document.createElement("div")
-                    card_footer.className = "card-footer p-2 pt-0 border-0 rounded-0"
-                    card.appendChild(card_footer)
-
-                    // get first or last version depending on "category"
-                    let version
-                    if (sorted[item]['category'] === 4) {
-                        // this is an operating system, so get the last version (hopefully newest)
-                        version = sorted[item]['versions'][sorted[item]['versions'].length - 1]
-                    }
-                    else {
-                        // this is a console/pc/etc., so get the first version (initial version)
-                        version = sorted[item]['versions'][0]
-                    }
-
-                    for (let key in metadata_key_icon_map) {
-                        if (version[key] !== undefined) {
-                            // process summary first
-                            if (key === 'summary') {
-                                if (sorted[item]['summary'] === undefined) {
-                                    summary = splitString(version[key])
-                                    card_paragraph.textContent = summary[0]
-                                }
-                            }
-                            else {
-                                // create div for metadata
-                                let metadata_div = document.createElement("div")
-                                metadata_div.className = "ms-4 mb-2"
-
-                                if (key === 'platform_version_release_dates') {
-                                    // get the region and release date for each release date
-                                    for (let release_date in version[key]) {
-                                        // create div container for each release date
-                                        let release_date_div = document.createElement("div")
-                                        release_date_div.className = "d-flex align-items-center"
-                                        metadata_div.appendChild(release_date_div)
-
-                                        // show flag emoji as prefix
-                                        let regionName = version[key][release_date]['release_region']['region']
-                                        let flag_prefix = document.createElement("span")
-                                        flag_prefix.className = `${platform_region_flag_map[regionName]['size']} me-3 text-center`
-                                        flag_prefix.textContent = platform_region_flag_map[regionName]['code']
-                                        flag_prefix.title = regionName.replace("_", " ")
-                                        release_date_div.appendChild(flag_prefix)
-
-                                        // add date
-                                        let date = document.createElement("span")
-                                        date.textContent = version[key][release_date]['human']
-                                        release_date_div.appendChild(date)
-                                    }
-                                }
-                                else {
-                                    let key_div = document.createElement("div")
-                                    key_div.className = "d-flex align-items-center"
-                                    metadata_div.appendChild(key_div)
-
-                                    // add key symbol as prefix
-                                    let key_prefix = document.createElement("span")
-                                    key_prefix.className = "material-symbols-outlined fs-2 me-3 text-center"
-                                    key_prefix.textContent = metadata_key_icon_map[key]
-                                    key_prefix.title = key.replace("_", " ")
-                                    key_div.appendChild(key_prefix)
-
-                                    // add value
-                                    let key_value = document.createElement("span")
-                                    key_value.textContent = version[key]
-                                    key_div.appendChild(key_value)
-                                }
-
-                                // add metadata div to footer
-                                card_body.appendChild(metadata_div)
-                            }
-                        }
-                    }
-
-                    if (summary.length > 1) {
-                        // create a see more "action/link"
-                        let see_more = document.createElement("a")
-
-                        // create a see less "action/link"
-                        let see_less = document.createElement("a")
-
-                        // populate see more/less links
-                        see_more.className = ""
-                        see_more.onclick = function() {
-                            card_paragraph.textContent = summary[1]
-                            see_more.classList.add("d-none")
-                            see_less.classList.remove("d-none")
-                        }
-                        see_more.textContent = "See more"
-                        card_paragraph_div.appendChild(see_more)
-
-                        see_less.className = "d-none"
-                        see_less.onclick = function() {
-                            card_paragraph.textContent = summary[0]
-                            see_less.classList.add("d-none")
-                            see_more.classList.remove("d-none")
-                        }
-                        see_less.textContent = "See less"
-                        card_paragraph_div.appendChild(see_less)
-                    }
+                    const column = createPlatformCardElement(sorted[item], platform_region_flag_map, metadata_key_icon_map, base_path);
+                    platforms_container.appendChild(column);
                 }
             }
-        })
+        });
     }
 
     get_platform_xref()
     initialize()
 })
+
+/**
+ * Search for games by name across all buckets.
+ * Results link to game detail pages.
+ */
+function run_search() {
+    const search_term = document.getElementById("search_term").value.trim()
+    const search_container = document.getElementById("search-container")
+
+    search_container.innerHTML = ""
+
+    if (!search_term) {
+        return
+    }
+
+
+    // Determine the bucket for the search term (same logic as Python backend)
+    const bucket = search_term.replaceAll(/[^a-z0-9]/gi, '').slice(0, 2).toLowerCase() || '@'
+    const bucket_url = `${base_url}/buckets/${encodeURIComponent(bucket)}.json`
+
+    const loading = document.createElement("p")
+    loading.className = "text-muted"
+    loading.textContent = "Searching…"
+    search_container.appendChild(loading)
+
+    fetch(bucket_url)
+        .then(r => {
+            if (!r.ok) throw new Error(`Bucket not found`)
+            return r.json()
+        })
+        .then(bucket_data => {
+            loading.remove()
+
+            // Filter results by name (case-insensitive)
+            const term_lower = search_term.toLowerCase()
+            const matches = Object.entries(bucket_data).filter(([_id, game]) =>
+                game.name.toLowerCase().includes(term_lower)
+            )
+
+            if (matches.length === 0) {
+                const noResults = document.createElement("p")
+                noResults.className = "text-muted"
+                noResults.textContent = `No games found matching "${search_term}".`
+                search_container.appendChild(noResults)
+                return
+            }
+
+            const resultsHeading = document.createElement("h5")
+            resultsHeading.className = "mb-3"
+            resultsHeading.textContent = `Search Results for "${search_term}" (${matches.length} found)`
+            search_container.appendChild(resultsHeading)
+
+            const row = document.createElement("div")
+            row.className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3"
+            search_container.appendChild(row)
+
+            // Fetch platform names to display
+            fetch(`${base_url}/platforms/all.json`)
+                .then(r => r.json())
+                .then(allPlatforms => {
+                    // Fetch full game data for each match
+                    const gamePromises = matches.slice(0, 60).map(([id, _game]) =>
+                        fetchGameData(id, _game.name)
+                    )
+
+                    Promise.all(gamePromises).then(results => {
+                        renderSearchResults(results, row, allPlatforms)
+                        addMoreResultsNote(search_container, matches.length, 60)
+                    })
+                })
+                .catch(() => {
+                    // Fallback if platforms can't be loaded - still fetch game data
+                    const gamePromises = matches.slice(0, 60).map(([id, _game]) =>
+                        fetchGameData(id, _game.name)
+                    )
+
+                    Promise.all(gamePromises).then(results => {
+                        renderSearchResults(results, row, null)
+                        addMoreResultsNote(search_container, matches.length, 60)
+                    })
+                })
+        })
+        .catch(err => {
+            loading.remove()
+            const errEl = document.createElement("p")
+            errEl.className = "text-danger"
+            errEl.textContent = `Search failed: ${err.message}`
+            search_container.appendChild(errEl)
+        })
+}
diff --git a/gh-pages-template/assets/js/platform_detail.js b/gh-pages-template/assets/js/platform_detail.js
new file mode 100644
index 000000000000..4c7377d06d7e
--- /dev/null
+++ b/gh-pages-template/assets/js/platform_detail.js
@@ -0,0 +1,255 @@
+/**
+ * platform_detail.js
+ * Renders a single platform detail page.
+ * Depends on item_detail.js being loaded first.
+ */
+
+const SPEC_LABELS = {
+    cpu: "CPU",
+    graphics: "Graphics",
+    memory: "Memory",
+    storage: "Storage",
+    media: "Media",
+    connectivity: "Connectivity",
+    output: "Output",
+    resolutions: "Resolutions",
+    sound: "Sound",
+    os: "OS",
+};
+
+const CATEGORY_NAMES = {
+    1: "Console",
+    2: "Arcade",
+    3: "Platform",
+    4: "Operating System",
+    5: "Portable Console",
+    6: "Computer",
+};
+
+function getRegionFlag(regionName) {
+    const map = {
+        "europe": "🇪🇺",
+        "north_america": "🇺🇸",
+        "australia": "🇦🇺",
+        "new_zealand": "🇳🇿",
+        "japan": "🇯🇵",
+        "china": "🇨🇳",
+        "asia": "🌏",
+        "worldwide": "🌍",
+        "korea": "🇰🇷",
+        "brazil": "🇧🇷",
+    };
+    return map[regionName] || "🌐";
+}
+
+/**
+ * Render platform logo or placeholder
+ */
+function renderPlatformLogo(data) {
+    const logoEl = document.getElementById("platform-logo");
+    const logoPlaceholder = document.getElementById("platform-logo-placeholder");
+    const logoUrl = data.platform_logo?.url
+        ? igdbImageUrl(data.platform_logo.url, "t_logo_med_2x")
+        : null;
+    if (logoUrl) {
+        logoEl.src = logoUrl;
+        logoEl.alt = data.name || "";
+        logoEl.style.display = "";
+    } else {
+        logoPlaceholder.style.display = null;
+        logoPlaceholder.style.removeProperty("display");
+    }
+}
+
+/**
+ * Render platform badges (category, generation)
+ */
+function renderPlatformBadges(data) {
+    const badgesEl = document.getElementById("platform-badges");
+    if (data.category !== undefined) {
+        badgesEl.appendChild(makeBadge(CATEGORY_NAMES[data.category] || `Category ${data.category}`, "bg-primary"));
+    }
+    if (data.generation !== undefined) {
+        badgesEl.appendChild(makeBadge(`Gen ${data.generation}`, "bg-secondary"));
+    }
+}
+
+/**
+ * Render platform metadata (games count, abbreviation, etc.)
+ */
+function renderPlatformMetadata(data) {
+    const metaDl = document.getElementById("platform-meta");
+
+    if (data.games && data.games.length > 0) {
+        addDlRow(metaDl, "Games", `${data.games.length} game${data.games.length === 1 ? '' : 's'}`);
+    }
+
+    if (data.abbreviation) {
+        addDlRow(metaDl, "Abbreviation", data.abbreviation);
+    }
+    if (data.alternative_name) {
+        addDlRow(metaDl, "Also Known As", data.alternative_name);
+    }
+    if (data.platform_type?.name) {
+        addDlRow(metaDl, "Type", data.platform_type.name);
+    }
+}
+
+/**
+ * Create accordion item for a platform version
+ */
+function createVersionAccordionItem(version, index) {
+    const itemId = `version-accordion-${index}`;
+    const headingId = `version-heading-${index}`;
+
+    const item = document.createElement("div");
+    item.className = "accordion-item rounded-0";
+
+    // Header
+    const header = document.createElement("h2");
+    header.className = "accordion-header";
+    header.id = headingId;
+    item.appendChild(header);
+
+    const button = document.createElement("button");
+    button.className = "accordion-button" + (index > 0 ? " collapsed" : "");
+    button.type = "button";
+    button.dataset.bsToggle = "collapse";
+    button.dataset.bsTarget = `#${itemId}`;
+    button.setAttribute("aria-expanded", index === 0 ? "true" : "false");
+    button.setAttribute("aria-controls", itemId);
+    button.textContent = version.name || `Version ${index + 1}`;
+
+    // Add logo next to version name if available
+    if (version.platform_logo?.url) {
+        const vLogo = document.createElement("img");
+        vLogo.src = igdbImageUrl(version.platform_logo.url, "t_thumb");
+        vLogo.alt = "";
+        vLogo.className = "me-2";
+        vLogo.style.height = "35px";
+        vLogo.style.objectFit = "contain";
+        button.prepend(vLogo);
+    }
+
+    header.appendChild(button);
+
+    // Collapse body
+    const collapseDiv = document.createElement("div");
+    collapseDiv.id = itemId;
+    collapseDiv.className = "accordion-collapse collapse" + (index === 0 ? " show" : "");
+    collapseDiv.setAttribute("aria-labelledby", headingId);
+    item.appendChild(collapseDiv);
+
+    const body = document.createElement("div");
+    body.className = "accordion-body";
+    collapseDiv.appendChild(body);
+
+    populateVersionBody(body, version);
+
+    return item;
+}
+
+/**
+ * Populate version accordion body with content
+ */
+function populateVersionBody(body, version) {
+    // Summary
+    if (version.summary) {
+        const p = document.createElement("p");
+        p.textContent = version.summary;
+        body.appendChild(p);
+    }
+
+    // Release dates
+    if (version.platform_version_release_dates && version.platform_version_release_dates.length > 0) {
+        const rdHeading = document.createElement("h6");
+        rdHeading.textContent = "Release Dates";
+        body.appendChild(rdHeading);
+
+        const rdList = document.createElement("ul");
+        rdList.className = "list-unstyled ms-2 mb-3";
+        version.platform_version_release_dates.forEach(rd => {
+            const li = document.createElement("li");
+            const regionName = rd.release_region?.region;
+            const flag = regionName ? getRegionFlag(regionName) : "🌐";
+            li.textContent = `${flag} ${rd.human || rd.y || ""}`;
+            rdList.appendChild(li);
+        });
+        body.appendChild(rdList);
+    }
+
+    // Specs
+    const specDl = document.createElement("dl");
+    specDl.className = "row mb-0";
+    let hasSpecs = false;
+
+    Object.entries(SPEC_LABELS).forEach(([key, label]) => {
+        if (version[key]) {
+            hasSpecs = true;
+            addDlRow(specDl, label, version[key]);
+        }
+    });
+
+    if (hasSpecs) {
+        const specHeading = document.createElement("h6");
+        specHeading.textContent = "Specifications";
+        body.appendChild(specHeading);
+        body.appendChild(specDl);
+    }
+
+    // IGDB link
+    if (version.url) {
+        const a = document.createElement("a");
+        a.href = version.url;
+        a.target = "_blank";
+        a.rel = "noopener";
+        a.className = "btn btn-outline-secondary btn-sm mt-2";
+        a.textContent = "View version on IGDB";
+        body.appendChild(a);
+    }
+}
+
+function renderPlatform(data) {
+    document.title = (data.name || "Platform") + " – GameDB";
+    document.getElementById("platform-name").textContent = data.name || "Unknown Platform";
+
+    renderPlatformLogo(data);
+    renderPlatformBadges(data);
+    renderPlatformMetadata(data);
+
+    // Summary
+    if (data.summary) {
+        const summarySection = document.getElementById("platform-summary-section");
+        summarySection.classList.remove("d-none");
+        document.getElementById("platform-summary").textContent = data.summary;
+    }
+
+    // Hardware Versions
+    if (data.versions && data.versions.length > 0) {
+        const section = document.getElementById("platform-versions-section");
+        section.classList.remove("d-none");
+        const accordion = document.getElementById("platform-versions");
+        data.versions.forEach((version, index) => {
+            accordion.appendChild(createVersionAccordionItem(version, index));
+        });
+    }
+
+    // Games on this platform
+    if (data.games && data.games.length > 0) {
+        const section = document.getElementById("platform-games-section");
+        section.classList.remove("d-none");
+        const container = document.getElementById("platform-games");
+        renderGameList(container, data.games);
+    }
+
+    // IGDB link
+    if (data.url) {
+        const igdbLink = document.getElementById("platform-igdb-link");
+        igdbLink.href = data.url;
+        igdbLink.classList.remove("d-none");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadItemDetail("platforms", renderPlatform);
+});
diff --git a/gh-pages-template/browse/characters.html b/gh-pages-template/browse/characters.html
new file mode 100644
index 000000000000..e7f7d96a3908
--- /dev/null
+++ b/gh-pages-template/browse/characters.html
@@ -0,0 +1,56 @@
+---
+title: Character
+layout: page
+full-width: false
+css:
+  - /assets/css/hide-heading.css
+js:
+  - /GameDB/assets/js/item_detail.js
+  - /GameDB/assets/js/character_detail.js
+ext-css:
+  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+---
+
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
+<div id="item-loading" class="text-center py-5">
+  <output class="spinner-border">
+    <span class="visually-hidden">Loading...</span>
+  </output>
+  <p class="mt-2 text-muted">Loading character data…</p>
+</div>
+
+<div id="item-error" class="alert alert-danger d-none" role="alert"></div>
+
+<div id="item-content" class="d-none">
+
+  <div class="row gx-4 gy-4 mb-4">
+    <!-- Mug shot -->
+    <div class="col-12 col-lg-3 col-md-4 text-center">
+      <img id="character-mug" src="" alt="" class="img-fluid rounded shadow w-100" style="max-width:240px; display:none;">
+      <div id="character-mug-placeholder" class="bg-secondary d-flex align-items-center justify-content-center rounded"
+           style="min-height:240px; display:none !important;">
+        <span class="material-symbols-outlined text-white" style="font-size:5rem;">person</span>
+      </div>
+    </div>
+
+    <!-- Core info -->
+    <div class="col-12 col-lg-9 col-md-8">
+      <h1 id="character-name" class="mb-2"><span class="visually-hidden">Character name loading</span></h1>
+      <div id="character-badges" class="mb-3 d-flex flex-wrap gap-1"></div>
+    </div>
+  </div>
+
+  <!-- Appears in -->
+  <div id="character-games-section" class="d-none mb-5">
+    <h3 class="mb-3">Appears In</h3>
+    <div id="character-games"></div>
+  </div>
+
+</div>
+
+{% include image_modal.html %}
diff --git a/gh-pages-template/browse/collections.html b/gh-pages-template/browse/collections.html
new file mode 100644
index 000000000000..d618bcf03899
--- /dev/null
+++ b/gh-pages-template/browse/collections.html
@@ -0,0 +1,46 @@
+---
+title: Series
+layout: page
+full-width: false
+css:
+  - /assets/css/hide-heading.css
+js:
+  - /GameDB/assets/js/item_detail.js
+  - /GameDB/assets/js/collection_detail.js
+ext-css:
+  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+---
+
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
+<div id="item-loading" class="text-center py-5">
+  <output class="spinner-border">
+    <span class="visually-hidden">Loading...</span>
+  </output>
+  <p class="mt-2 text-muted">Loading series data…</p>
+</div>
+
+<div id="item-error" class="alert alert-danger d-none" role="alert"></div>
+
+<div id="item-content" class="d-none">
+
+  <h1 id="collection-name" class="mb-2"><span class="visually-hidden">Collection name loading</span></h1>
+  <div class="mb-3">
+    <a id="collection-igdb-link" href="#" target="_blank" rel="noopener" class="btn btn-outline-secondary btn-sm d-none">
+      View on IGDB <span class="material-symbols-outlined" style="font-size:1em;vertical-align:middle;">open_in_new</span>
+    </a>
+  </div>
+
+  <!-- Games -->
+  <div id="collection-games-section" class="d-none mb-5">
+    <h3 class="mb-3">Games in this Series</h3>
+    <div id="collection-games"></div>
+  </div>
+
+</div>
+
+{% include image_modal.html %}
diff --git a/gh-pages-template/browse/franchises.html b/gh-pages-template/browse/franchises.html
new file mode 100644
index 000000000000..ada56e0030c5
--- /dev/null
+++ b/gh-pages-template/browse/franchises.html
@@ -0,0 +1,46 @@
+---
+title: Franchise
+layout: page
+full-width: false
+css:
+  - /assets/css/hide-heading.css
+js:
+  - /GameDB/assets/js/item_detail.js
+  - /GameDB/assets/js/franchise_detail.js
+ext-css:
+  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+---
+
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
+<div id="item-loading" class="text-center py-5">
+  <output class="spinner-border">
+    <span class="visually-hidden">Loading...</span>
+  </output>
+  <p class="mt-2 text-muted">Loading franchise data…</p>
+</div>
+
+<div id="item-error" class="alert alert-danger d-none" role="alert"></div>
+
+<div id="item-content" class="d-none">
+
+  <h1 id="franchise-name" class="mb-2"><span class="visually-hidden">Franchise name loading</span></h1>
+  <div class="mb-3">
+    <a id="franchise-igdb-link" href="#" target="_blank" rel="noopener" class="btn btn-outline-secondary btn-sm d-none">
+      View on IGDB <span class="material-symbols-outlined" style="font-size:1em;vertical-align:middle;">open_in_new</span>
+    </a>
+  </div>
+
+  <!-- Games -->
+  <div id="franchise-games-section" class="d-none mb-5">
+    <h3 class="mb-3">Games in this Franchise</h3>
+    <div id="franchise-games"></div>
+  </div>
+
+</div>
+
+{% include image_modal.html %}
diff --git a/gh-pages-template/browse/games.html b/gh-pages-template/browse/games.html
new file mode 100644
index 000000000000..30fa8b53fac3
--- /dev/null
+++ b/gh-pages-template/browse/games.html
@@ -0,0 +1,94 @@
+---
+layout: page
+full-width: false
+cover-img: "https://via.placeholder.com/1920x400/333/333"
+js:
+  - /GameDB/assets/js/item_detail.js
+  - /GameDB/assets/js/game_detail.js
+ext-css:
+  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+---
+
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
+<div id="item-loading" class="text-center py-5">
+  <output class="spinner-border">
+    <span class="visually-hidden">Loading...</span>
+  </output>
+  <p class="mt-2 text-muted">Loading game data…</p>
+</div>
+
+<div id="item-error" class="alert alert-danger d-none" role="alert"></div>
+
+<div id="item-content" class="d-none">
+
+  <!-- Banner Images (hidden, holds data attributes) -->
+  <div id="header-big-imgs" style="display:none;"></div>
+
+  <div class="row gx-4 gy-4 mb-4">
+    <!-- Cover image -->
+    <div class="col-12 col-lg-3 col-md-4 text-center">
+      <img id="game-cover" src="" alt="" class="img-fluid rounded shadow w-100" style="display:none;">
+      <div id="game-cover-placeholder" class="bg-secondary d-flex align-items-center justify-content-center rounded"
+           style="min-height:300px; display:none !important;">
+        <span class="material-symbols-outlined text-white" style="font-size:5rem;">sports_esports</span>
+      </div>
+    </div>
+
+    <!-- Core info -->
+    <div class="col-12 col-lg-9 col-md-8">
+      <h1 id="game-name" class="mb-2"><span class="visually-hidden">Game name loading</span></h1>
+      <div id="game-badges" class="mb-3 d-flex flex-wrap gap-1"></div>
+
+      <dl class="row g-2" id="game-meta"></dl>
+
+      <div id="game-summary-section" class="d-none mt-3">
+        <h5>Summary</h5>
+        <p id="game-summary"></p>
+      </div>
+
+      <div id="game-storyline-section" class="d-none mt-3">
+        <h5>Storyline</h5>
+        <p id="game-storyline"></p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Characters -->
+  <div id="game-characters-section" class="d-none mb-5">
+    <h3 class="mb-3">Characters</h3>
+    <div id="game-characters" class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-3"></div>
+  </div>
+
+  <!-- Screenshots -->
+  <div id="game-screenshots-section" class="d-none mb-5">
+    <h3 class="mb-3">Screenshots</h3>
+    <div id="game-screenshots" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2"></div>
+  </div>
+
+  <!-- Videos -->
+  <div id="game-videos-section" class="d-none mb-5">
+    <h3 class="mb-3">Videos</h3>
+    <div id="game-videos" class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3"></div>
+  </div>
+
+  <!-- External links -->
+  <div id="game-external-section" class="d-none mb-5">
+    <h3 class="mb-3">External Links</h3>
+    <div id="game-external" class="d-flex flex-wrap gap-2"></div>
+  </div>
+
+  <!-- View on IGDB -->
+  <div class="mb-3">
+    <a id="game-igdb-link" href="#" target="_blank" rel="noopener" class="btn btn-outline-secondary btn-sm d-none">
+      View on IGDB <span class="material-symbols-outlined" style="font-size:1em;vertical-align:middle;">open_in_new</span>
+    </a>
+  </div>
+
+</div>
+
+{% include image_modal.html %}
diff --git a/gh-pages-template/browse/platforms.html b/gh-pages-template/browse/platforms.html
new file mode 100644
index 000000000000..c79032023734
--- /dev/null
+++ b/gh-pages-template/browse/platforms.html
@@ -0,0 +1,76 @@
+---
+title: Platform
+layout: page
+full-width: false
+css:
+  - /assets/css/hide-heading.css
+js:
+  - /GameDB/assets/js/item_detail.js
+  - /GameDB/assets/js/platform_detail.js
+ext-css:
+  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
+---
+
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
+<div id="item-loading" class="text-center py-5">
+  <output class="spinner-border">
+    <span class="visually-hidden">Loading...</span>
+  </output>
+  <p class="mt-2 text-muted">Loading platform data…</p>
+</div>
+
+<div id="item-error" class="alert alert-danger d-none" role="alert"></div>
+
+<div id="item-content" class="d-none">
+
+  <div class="row gx-4 gy-4 mb-4">
+    <!-- Logo -->
+    <div class="col-12 col-lg-3 col-md-4 text-center">
+      <img id="platform-logo" src="" alt="" class="img-fluid rounded shadow p-3 bg-dark w-100" style="max-width:240px; display:none;">
+      <div id="platform-logo-placeholder" class="bg-secondary d-flex align-items-center justify-content-center rounded"
+           style="min-height:200px; display:none !important;">
+        <span class="material-symbols-outlined text-white" style="font-size:5rem;">devices</span>
+      </div>
+    </div>
+
+    <!-- Core info -->
+    <div class="col-12 col-lg-9 col-md-8">
+      <h1 id="platform-name" class="mb-2"><span class="visually-hidden">Platform name loading</span></h1>
+      <div id="platform-badges" class="mb-3 d-flex flex-wrap gap-1"></div>
+
+      <dl class="row g-2" id="platform-meta"></dl>
+
+      <div id="platform-summary-section" class="d-none mt-3">
+        <h5>About</h5>
+        <p id="platform-summary"></p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Versions / Hardware specs -->
+  <div id="platform-versions-section" class="d-none mb-5">
+    <h3 class="mb-3">Hardware Versions</h3>
+    <div id="platform-versions" class="accordion"></div>
+  </div>
+
+  <!-- Games on this platform -->
+  <div id="platform-games-section" class="d-none mb-5">
+    <h3 class="mb-3">Games</h3>
+    <div id="platform-games"></div>
+  </div>
+
+  <!-- View on IGDB -->
+  <div class="mb-3">
+    <a id="platform-igdb-link" href="#" target="_blank" rel="noopener" class="btn btn-outline-secondary btn-sm d-none">
+      View on IGDB <span class="material-symbols-outlined" style="font-size:1em;vertical-align:middle;">open_in_new</span>
+    </a>
+  </div>
+
+</div>
+
+{% include image_modal.html %}
diff --git a/gh-pages-template/index.html b/gh-pages-template/index.html
index 2e51e1aa29d7..ac31b09956e2 100644
--- a/gh-pages-template/index.html
+++ b/gh-pages-template/index.html
@@ -11,30 +11,37 @@
 ext-css:
   - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
 ext-js:
-- https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
-- https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2024.921.191855/dist/levenshtein-distance.js
-- https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2024.921.191855/dist/ranking-sorter.js
+  - https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
+  - https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2024.921.191855/dist/levenshtein-distance.js
+  - https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2024.921.191855/dist/ranking-sorter.js
 js:
-- /GameDB/assets/js/item_loader.js
+  - /GameDB/assets/js/item_loader.js
 ---
 
+<script>
+globalThis.GAMEDB_CONFIG = {
+  base_path: "{{ site.baseurl }}"
+};
+</script>
+
 <div class="container px-auto my-5">
     <div class="col-lg-12 mx-auto" id="db-container" style="min-width: 335px">
 
         <!-- Search section-->
         <section class="py-5 offset-anchor" id="Search">
             <div class="container mb-5">
-                <form id="searchForm">
-                    <div class="form-group d-flex">
-                        <div class="col-3 me-3">
-                            <select class="form-select rounded-0" aria-label="Search Type" id="search_type">
-                            </select>
-                        </div>
-                        <div class="col-6 me-3">
-                            <input type="text" class="form-control rounded-0" placeholder="Search" id="search_term">
+                <form id="searchForm" onsubmit="event.preventDefault(); run_search();">
+                    <div class="row justify-content-center">
+                        <div class="col-12 col-md-8 col-lg-6">
+                            <label for="search_term" class="visually-hidden">Search games by name</label>
+                            <div class="input-group">
+                                <input type="text" class="form-control rounded-0" placeholder="Search games by name..." id="search_term"
+                                       onkeydown="if(event.key==='Enter'){event.preventDefault(); run_search()}">
+                                <button type="button" class="btn btn-warning rounded-0" onclick="run_search()">
+                                    <i class="fa-fw fas fa-search"></i> Search
+                                </button>
+                            </div>
                         </div>
-                        <button type="button" class="btn btn-warning ml-3 rounded-0" onclick="run_search()">
-                            <i class="fa-fw fas fa-search"></i>Search</button>
                     </div>
                 </form>
             </div>
diff --git a/src/platforms.py b/src/platforms.py
index 02773644254f..987dc19424a3 100644
--- a/src/platforms.py
+++ b/src/platforms.py
@@ -1793,7 +1793,7 @@
     {
         "ids": {
             "igdb": 167,
-            "screenscraper": None,
+            "screenscraper": 284,
         },
         "name": "PlayStation 5",
         "variables": {
diff --git a/src/update_db.py b/src/update_db.py
index f4edbf76adf8..2b2618a0f552 100644
--- a/src/update_db.py
+++ b/src/update_db.py
@@ -36,12 +36,12 @@ def igdb_authorization(client_id: str, client_secret: str) -> dict:
     dict
         Dictionary containing access token and expiration.
     """
-    auth_headers = dict(
-        Accept='application/json',
-        client_id=client_id,
-        client_secret=client_secret,
-        grant_type='client_credentials'
-    )
+    auth_headers = {
+        'Accept': 'application/json',
+        'client_id': client_id,
+        'client_secret': client_secret,
+        'grant_type': 'client_credentials',
+    }
 
     token_url = 'https://id.twitch.tv/oauth2/token'
 
@@ -88,7 +88,7 @@ def get_youtube(video_ids: list) -> dict:
     videos = ','.join(video_ids)
     fields = 'items(id,snippet(title,description,thumbnails,localized))'
     url = f'{uri}?id={videos}&key={args.youtube_api_key}&part=snippet&fields={fields}'
-    headers = dict(Accept='application/json')
+    headers = {'Accept': 'application/json'}
 
     session = requests_cache.CachedSession(
         cache_name='cache/youtube_cache',
@@ -107,37 +107,37 @@ def get_data():
     is appended to the games list. Games are appended to platforms. Videos metadata is also added to the games list.
     Individual files will be written to disk for each item.
     """
-    request_dict = dict(
-        characters=dict(
-            fields=[
+    request_dict = {
+        'characters': {
+            'fields': [
                 'character_gender.name',
                 'character_species.name',
                 'games',
                 'mug_shot.url',
                 'name',
             ],
-            write_all=True,
-        ),
-        collections=dict(
-            fields=[
+            'write_all': True,
+        },
+        'collections': {
+            'fields': [
                 'games',
                 'name',
                 'slug',
                 'url',
             ],
-            write_all=True,
-        ),
-        franchises=dict(
-            fields=[
+            'write_all': True,
+        },
+        'franchises': {
+            'fields': [
                 'games',
                 'name',
                 'slug',
                 'url',
             ],
-            write_all=True,
-        ),
-        games=dict(
-            fields=[
+            'write_all': True,
+        },
+        'games': {
+            'fields': [
                 'age_ratings.organization.name',
                 'age_ratings.rating_category.rating',
                 'aggregated_rating',
@@ -174,21 +174,21 @@ def get_data():
                 'videos.name',
                 'videos.video_id',
             ],
-            append=dict(
-                characters=dict(
-                    fields=[
+            'append': {
+                'characters': {
+                    'fields': [
                         'id',
                         'gender',
                         'mug_shot',
                         'name',
                         'species',
-                    ]
-                )
-            ),
-            write_all=False,
-        ),
-        platforms=dict(
-            fields=[
+                    ],
+                },
+            },
+            'write_all': False,
+        },
+        'platforms': {
+            'fields': [
                 'abbreviation',
                 'alternative_name',
                 'generation',
@@ -218,27 +218,28 @@ def get_data():
                 'versions.summary',
                 'versions.url',
             ],
-            append=dict(
-                games=dict(
-                    fields=[
+            'append': {
+                'games': {
+                    'fields': [
                         'id',
                         'cover',
                         'name',
                         'release_dates',
-                    ]
-                )
-            ),
-            write_all=True,
-        ),
-    )
+                    ],
+                },
+            },
+            'write_all': True,
+        },
+    }
     limit = 500
-    full_dict = dict()
+    full_dict = {}
 
     for end_point, end_point_dict in request_dict.items():
         print(f'now processing endpoint: {end_point}')
         offset = 0
         result = True
-        full_dict[end_point] = dict()
+        full_dict[end_point] = {}
+        test_count = 0
 
         while result:
             try:
@@ -257,7 +258,10 @@ def get_data():
                 full_dict[end_point][item['id']] = item
 
                 if args.test_mode:
-                    break
+                    test_count += 1
+                    if test_count >= args.test_limit:
+                        result = False
+                        break
 
             offset += limit
 
@@ -297,7 +301,7 @@ def get_data():
                                 except KeyError:
                                     full_dict[end_point][item_id_dest][item_type] = []
                                 finally:
-                                    full_dict[end_point][item_id_dest][item_type].append(dict())
+                                    full_dict[end_point][item_id_dest][item_type].append({})
 
                                     for field in item_type_dict['fields']:
                                         try:
@@ -308,9 +312,23 @@ def get_data():
                                         else:
                                             full_dict[end_point][item_id_dest][item_type][-1][field] = field_value
 
+    # Add game counts to platforms for the all.json file
+    print('calculating game counts for platforms')
+    for platform_id, platform_data in full_dict['platforms'].items():
+        try:
+            games = platform_data['games']
+            platform_data['game_count'] = len(games)
+        except KeyError:
+            # no games for this platform
+            platform_data['game_count'] = 0
+
+    # Rewrite platforms/all.json with game counts
+    file_path = os.path.join(args.out_dir, 'platforms', 'all')
+    write_json_files(file_path=file_path, data=full_dict['platforms'])
+
     # create buckets and get list of all videos
     print('creating buckets / collecting video ids')
-    buckets = dict()
+    buckets = {}
     all_videos = []
     for game_id, game_data in full_dict['games'].items():
         # games
@@ -321,11 +339,9 @@ def get_data():
         try:
             buckets[bucket]
         except KeyError:
-            buckets[bucket] = dict()
+            buckets[bucket] = {}
         finally:
-            buckets[bucket][game_id] = dict(
-                name=game_data['name']
-            )
+            buckets[bucket][game_id] = {'name': game_data['name']}
 
         # videos
         try:
@@ -349,7 +365,7 @@ def get_data():
     print('collecting video metadata')
 
     end_point = 'videos'
-    full_dict[end_point] = dict()
+    full_dict[end_point] = {}
 
     all_videos.sort()
 
@@ -473,7 +489,14 @@ def get_platform_cross_reference():
         '-t',
         '--test_mode',
         action='store_true',
-        help='Only write one item file per end point, per request.',
+        help='Only write limited items per endpoint.',
+    )
+    parser.add_argument(
+        '--test_limit',
+        type=int,
+        required=False,
+        default=1000,
+        help='Number of items to collect per endpoint when test_mode is enabled (default: 10).',
     )
     parser.add_argument(
         '-i',