diff --git a/src/app.js b/src/app.js
index ed7ce1c..6c3e406 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1941,6 +1941,8 @@ function updateNavHighlight(route) {
 
 		if (route?.type === RouteType.SECTION && link.dataset.section === route.sectionId) {
 			link.classList.add("active");
+		} else if (route?.type === RouteType.REFERENCE && link.dataset.section === "reference") {
+			link.classList.add("active");
 		} else if (route?.type === RouteType.LESSON) {
 			// Highlight section based on module's inferred section
 			const module = lessonEngine.modules.find((m) => m.id === route.moduleId);
diff --git a/src/index.html b/src/index.html
index aef4a7a..f21cf4e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,6 +31,7 @@
 						<a href="#css" class="nav-link" data-section="css">CSS</a>
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
 						<a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a>
+						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
 				</div>
diff --git a/src/main.css b/src/main.css
index 5d9d840..fee3aa5 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1521,6 +1521,12 @@ input:checked + .toggle-slider::before {
 	color: var(--primary-color);
 }
 
+.nav-link-ref {
+	margin-left: 0.5rem;
+	padding-left: 1rem;
+	border-left: 1px solid var(--border-color);
+}
+
 @media (min-width: 769px) {
 	.main-nav {
 		display: flex;