diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index e4854a3..faf07a7 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -1062,7 +1062,7 @@ def render_message(log_type, message_json, timestamp):
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
diff --git a/src/claude_code_transcripts/templates/macros.html b/src/claude_code_transcripts/templates/macros.html
index 06018d3..0b5ea69 100644
--- a/src/claude_code_transcripts/templates/macros.html
+++ b/src/claude_code_transcripts/templates/macros.html
@@ -1,10 +1,11 @@
 {# Pagination for regular pages #}
 {% macro pagination(current_page, total_pages) %}
 {% if total_pages <= 1 %}
-<div class="pagination"><a href="index.html" class="index-link">Index</a></div>
+<div class="pagination"><a href="index.html">Index</a></div>
 {%- else %}
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 {% if current_page > 1 -%}
 <a href="page-{{ '%03d'|format(current_page - 1) }}.html">&larr; Prev</a>
 {%- else -%}
@@ -33,15 +34,12 @@
 {%- else %}
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 {% for page in range(1, total_pages + 1) -%}
 <a href="page-{{ '%03d'|format(page) }}.html">{{ page }}</a>
 {% endfor -%}
-{% if total_pages >= 1 -%}
-<a href="page-001.html">Next &rarr;</a>
-{%- else -%}
 <span class="disabled">Next &rarr;</span>
-{%- endif %}
 </div>
 {%- endif %}
 {% endmacro %}
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index 693c48f..a77f74c 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -95,7 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -158,10 +158,11 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
 <a href="page-002.html">2</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
@@ -180,10 +181,11 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
 <a href="page-002.html">2</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
 
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index cdc794b..5a10702 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -95,7 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,7 +149,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
@@ -283,7 +284,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index 2d46a78..8f13461 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -95,7 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,7 +149,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
@@ -180,7 +181,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index e83424a..242f443 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -95,7 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -158,9 +158,10 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
@@ -172,9 +173,10 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
 
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index 25c2822..336f3c7 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -85,6 +85,33 @@ def test_generates_page_002_html(self, output_dir, snapshot_html):
         page_html = (output_dir / "page-002.html").read_text(encoding="utf-8")
         assert page_html == snapshot_html
 
+    def test_index_link_not_highlighted_on_transcript_pages(self, output_dir):
+        """The index button should not have the same style as the current page button."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+        # The index link should NOT be styled like the active/current page
+        assert "index-link" not in page_html
+
+    def test_index_page_has_disabled_next_button(self, output_dir):
+        """On the index page, Next should be disabled since index is separate from transcript pages."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        index_html = (output_dir / "index.html").read_text(encoding="utf-8")
+        assert 'Next &rarr;</a>' not in index_html
+        assert 'Next &rarr;</span>' in index_html
+
+    def test_pagination_has_separator_between_index_and_pages(self, output_dir):
+        """A visual separator should exist between the Index button and the page nav buttons."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        for filename in ("index.html", "page-001.html"):
+            html = (output_dir / filename).read_text(encoding="utf-8")
+            assert "pagination-sep" in html
+
     def test_github_repo_autodetect(self, sample_session):
         """Test GitHub repo auto-detection from git push output."""
         loglines = sample_session["loglines"]