diff --git a/sass/style.scss b/sass/style.scss
index 7c10809..9e917fd 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -81,6 +81,9 @@ nav {
 	align-self: start;
 	top: 2em;
 	margin-bottom: 4rem;
+	max-height: calc(100vh - 2em);
+	box-sizing: border-box;
+	overflow-y: auto;
 
 	span.title {
 		display: block;
@@ -94,7 +97,8 @@ nav {
 		li a {
 			color: #000;
 			display: block;
-			padding: 0 .5em;
+			line-height: 1;
+			padding: .25em .5em;
 
 			&:hover {
 				color: #fff;
@@ -103,6 +107,35 @@ nav {
 			}
 		}
 	}
+	ul.table-of-contents li {
+		a {
+			color: #e1140a;
+			position: relative;
+
+			&::before, &::after {
+				content: "";
+				background-color: #bbb;
+				position: absolute;
+				left: 0;
+				top: 0;
+			}
+			&::before {
+				height: 2px;
+				width: .5em;
+			}
+			&::after {
+				width: 2px;
+				height: .5em;
+			}
+			&:hover { color: #fff }
+			&:hover::before, &:hover::after { display: none }
+		}
+
+		li {
+			padding: 0 .5em;
+			&>a::before, &>a::after { display: none }
+		}
+	}
 }
 
 main {
@@ -253,14 +286,19 @@ a {
 		color: inherit;
 	}
 
-	nav ul li a {
+	nav ul li a, nav ul.table-of-contents li a {
 		color: inherit;
-
 		&:hover {
 			color: #131516;
 			background-color: #cdcdcd;
 		}
 	}
+	nav ul.table-of-contents li a {
+		color: #ff6e67;
+		&::before, &::after {
+			background-color: #383838;
+		}
+	}
 
 	main {
 		.info, input.search { border-color: #383838 }
diff --git a/templates/index.html b/templates/index.html
index d5cdf24..6f1e26c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -29,6 +29,10 @@
 					<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
 				{% endfor %}
 			</ul>
+			{% if page.toc and not page.extra.notoc %}
+				<span class="title">Table of Contents</span>
+				{{ macros::toc() }}
+			{% endif %}
 			<span class="title">Categories</span>
 			{{ macros::list_taxonomy(kind="categories") }}
 		</nav>
diff --git a/templates/macros.html b/templates/macros.html
index 1725823..793f27d 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -48,24 +48,22 @@
 {% endmacro %}
 
 {% macro toc() %}
-	{% if page.toc and not page.extra.notoc %}
-		<ul>
-		{% for h1 in page.toc %}
-			<li>
-				<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-				{% if h1.children %}
-					<ul>
-						{% for h2 in h1.children %}
-							<li>
-								<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-							</li>
-						{% endfor %}
-					</ul>
-				{% endif %}
-			</li>
-		{% endfor %}
-		</ul>
-	{% endif %}
+	<ul class="table-of-contents">
+	{% for h1 in page.toc %}
+		<li>
+			<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+			{% if h1.children %}
+				<ul>
+					{% for h2 in h1.children %}
+						<li>
+							<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+						</li>
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</li>
+	{% endfor %}
+	</ul>
 {% endmacro %}
 
 {% macro list_taxonomy(kind, page=false, prepend="") %}
diff --git a/templates/page.html b/templates/page.html
index bb1b7a3..dfe6ceb 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -6,7 +6,6 @@
 
 {% block content %}
 	<h1>{{ page.title }}</h1>
-	{{ macros::toc() }}
 	{{ page.content | safe }}
 	{{ macros::page_info(page=page) }}
 	{{ macros::page_updates(page=page) }}