diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index d7376c4..51105eb 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
-	// Header component with "vod frog" title and frog illustration
+	let { onHomeClick }: { onHomeClick?: () => void } = $props();
+
+	function handleClick(e: MouseEvent) {
+		if (onHomeClick) {
+			e.preventDefault();
+			onHomeClick();
+		}
+	}
 </script>
 
 <header class="frog-header">
 	<div class="title-area">
-		<a href="/" class="logo-link"><h1 class="logo-text">vod frog</h1></a>
+		<a href="/" class="logo-link" onclick={handleClick}><h1 class="logo-text">vod frog</h1></a>
 		<img src="/froggie.png" alt="A cute frog" class="header-frog" />
 	</div>
 	<div class="subtitle-lines">
diff --git a/src/lib/VideoCard.svelte b/src/lib/VideoCard.svelte
index ec74c3c..2732f57 100644
--- a/src/lib/VideoCard.svelte
+++ b/src/lib/VideoCard.svelte
@@ -325,6 +325,7 @@
 		margin: 0;
 		font-family: 'Fang', system-ui, sans-serif;
 		font-size: 0.9rem;
+		font-weight: 700;
 		color: #0A182B;
 		line-height: 1.3;
 		display: -webkit-box;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0e19daa..45c44ab 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,29 +13,50 @@
     import FrogHeader from "$lib/FrogHeader.svelte";
     import WavyBorder from "$lib/WavyBorder.svelte";
 
+    const PAGE_SIZE = 10;
+
     let videos: VideoRecord[] = $state([]);
-    let cursor: string | undefined = $state();
     let loading = $state(false);
-    let hasMore = $state(true);
     let selectedVideo: VideoRecord | null = $state(null);
     let selectedHandle = $state("");
     let error = $state("");
 
+    // Pagination state
+    let cursorHistory: (string | undefined)[] = $state([undefined]);
+    let pageIndex = $state(0);
+    let hasMore = $state(true);
+
     async function loadPage() {
-        if (loading || !hasMore) return;
         loading = true;
         error = "";
         try {
-            const res = await listVideos(cursor, 24);
-            videos = [...videos, ...res.records];
-            cursor = res.cursor;
-            hasMore = !!res.cursor && res.records.length > 0;
+            const res = await listVideos(cursorHistory[pageIndex], PAGE_SIZE);
+            videos = res.records;
+            hasMore = !!res.cursor && res.records.length === PAGE_SIZE;
+            // Store the next cursor if we haven't been to this page before
+            if (hasMore && cursorHistory.length <= pageIndex + 1) {
+                cursorHistory = [...cursorHistory, res.cursor];
+            }
         } catch (e: any) {
             error = e.message;
         }
         loading = false;
     }
 
+    function nextPage() {
+        if (!hasMore || loading) return;
+        pageIndex++;
+        loadPage();
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+
+    function prevPage() {
+        if (pageIndex <= 0 || loading) return;
+        pageIndex--;
+        loadPage();
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+
     function selectVideo(video: VideoRecord) {
         selectedVideo = video;
         resolveHandle(video.value.creator).then((h) => (selectedHandle = h));
@@ -53,7 +74,7 @@
         window.history.pushState({}, "", url.toString());
     }
 
-    // On mount: load videos, then check URL for a selected video
+    // On mount: load first page, then check URL for a selected video
     onMount(async () => {
         await loadPage();
         const params = new URLSearchParams(window.location.search);
@@ -91,7 +112,7 @@
 </svelte:head>
 
 <div class="app">
-    <FrogHeader />
+    <FrogHeader onHomeClick={closePlayer} />
 
     {#if selectedVideo}
         <section class="player-section">
@@ -124,13 +145,19 @@
         {/each}
     </section>
 
-    {#if hasMore}
-        <div class="load-more">
-            <button onclick={loadPage} disabled={loading}>
-                {loading ? "loading..." : "load more"}
+    <div class="pagination">
+        {#if pageIndex > 0}
+            <button class="page-btn" onclick={prevPage} disabled={loading}>
+                ← previous
             </button>
-        </div>
-    {/if}
+        {/if}
+        <span class="page-num">page {pageIndex + 1}</span>
+        {#if hasMore}
+            <button class="page-btn" onclick={nextPage} disabled={loading}>
+                next →
+            </button>
+        {/if}
+    </div>
 </div>
 
 <style>
@@ -205,16 +232,19 @@
         padding: 20px clamp(16px, 3vw, 24px);
     }
 
-    .load-more {
-        text-align: center;
+    .pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
         padding: 30px;
     }
 
-    .load-more button {
+    .page-btn {
         background: #0a182b;
         color: #39ff44;
         border: 3px solid #0a182b;
-        padding: 12px 36px;
+        padding: 12px 32px;
         border-radius: 40px;
         font-family: "PicNic", cursive, system-ui;
         font-size: 1.1rem;
@@ -223,13 +253,13 @@
         letter-spacing: 0.5px;
     }
 
-    .load-more button:hover {
+    .page-btn:hover {
         background: #39ff44;
         color: #0a182b;
         border-color: #0a182b;
     }
 
-    .load-more button:disabled {
+    .page-btn:disabled {
         background: #1a8c22;
         color: #0a182b;
         border-color: #1a8c22;
@@ -237,6 +267,12 @@
         opacity: 0.6;
     }
 
+    .page-num {
+        font-family: "PicNic", cursive, system-ui;
+        font-size: 1.1rem;
+        color: #0a182b;
+    }
+
     .error {
         background: rgba(255, 57, 146, 0.15);
         color: #ff3992;