diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 772a649..37aefa7 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -3,7 +3,6 @@ import { Icon } from 'astro-icon/components';
 import NotebookLayout from '../layouts/NotebookLayout.astro';
 import NotebookGallery from '../components/NotebookGallery';
 import PipelineStrip from '../components/PipelineStrip.astro';
-import ResistorColorGuide from '../components/ResistorColorGuide.astro';
 import FeaturedNotebooks from '../components/FeaturedNotebooks.astro';
 import OscilloscopeDisplay from '../components/OscilloscopeDisplay.astro';
 import { fetchNotebookList } from '../lib/server-api';
@@ -73,9 +72,38 @@ try {
     <PipelineStrip />
   </section>
 
-  <!-- Resistor Color Code Guide -->
+  <!-- Resistor Color Code Reference link -->
   <section class="border-b border-slate-800/60">
-    <ResistorColorGuide />
+    <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
+      <a href="/reference/resistor-colors"
+         class="inline-flex items-center gap-4 px-5 py-3 rounded-lg border border-slate-700
+                hover:border-slate-500 hover:bg-slate-800/40 transition-colors group">
+        <!-- Inline 50-ohm resistor SVG: Green(5)-Black(0)-Black(x1)-Gold(±5%) -->
+        <svg viewBox="0 0 120 32" class="w-24 h-8 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" aria-label="50 ohm resistor color bands">
+          <!-- Left lead wire -->
+          <line x1="0" y1="16" x2="16" y2="16" stroke="#555" stroke-width="1.5"/>
+          <!-- Band 1: Green (digit 5) -->
+          <polyline points="16,16 26,6 36,26" fill="none" stroke="#006400" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 2: Black (digit 0) -->
+          <polyline points="36,26 46,6 56,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 3: Black (multiplier x1) -->
+          <polyline points="56,26 66,6 76,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 4: Gold (tolerance ±5%) -->
+          <polyline points="76,26 86,6 96,16" fill="none" stroke="#B8860B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Right lead wire -->
+          <line x1="96" y1="16" x2="120" y2="16" stroke="#555" stroke-width="1.5"/>
+        </svg>
+        <div>
+          <span class="text-sm font-semibold text-slate-200 group-hover:text-slate-100">
+            Resistor Color Codes
+          </span>
+          <span class="block text-xs text-slate-500">
+            Learn to read 4-band color codes
+          </span>
+        </div>
+        <Icon name="lucide:chevron-right" class="w-4 h-4 text-slate-600 group-hover:text-slate-400 transition-colors" />
+      </a>
+    </div>
   </section>
 
   <!-- Featured Notebooks -->
diff --git a/frontend/src/pages/reference/resistor-colors.astro b/frontend/src/pages/reference/resistor-colors.astro
new file mode 100644
index 0000000..8abc7d5
--- /dev/null
+++ b/frontend/src/pages/reference/resistor-colors.astro
@@ -0,0 +1,12 @@
+---
+import NotebookLayout from '../../layouts/NotebookLayout.astro';
+import ResistorColorGuide from '../../components/ResistorColorGuide.astro';
+---
+
+<NotebookLayout
+  title="Resistor Color Codes — SpiceBook"
+  description="Visual guide to reading 4-band resistor color codes used in SpiceBook circuit schematics."
+  canonicalPath="/reference/resistor-colors"
+>
+  <ResistorColorGuide />
+</NotebookLayout>