diff --git a/public/assets/css/progress.css b/public/assets/css/progress.css
index e6cea05..18e77df 100644
--- a/public/assets/css/progress.css
+++ b/public/assets/css/progress.css
@@ -1,3 +1,13 @@
 /*
 MOVE PROGRESS CSS HERE
 */
+#quick-nav a {
+	color: var(--text-shade-1);
+	text-decoration: none;
+	width: fit-content;
+}
+
+#quick-nav a:hover {
+	color: var(--text-shade-3);
+	text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/server.js b/src/server.js
index 002ca73..940ed15 100644
--- a/src/server.js
+++ b/src/server.js
@@ -187,6 +187,9 @@ app.engine('handlebars', handlebars({
 
 			return value;
 		},
+		slug(string) {
+			return string.toLowerCase().replaceAll(/ /g, '-');
+		}
 	}
 }));
 app.set('view engine', 'handlebars');
diff --git a/views/progress.handlebars b/views/progress.handlebars
index 0013e77..2f0f574 100644
--- a/views/progress.handlebars
+++ b/views/progress.handlebars
@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="/assets/css/progress.css">
+
 <div class="wrapper">
 
 	{{> header}}
@@ -19,8 +21,19 @@
 			<p class="localeReplace">{{{ localeHelper locale "donation.progress" }}} {{{ localeHelper locale "donation.upgradePush" }}}</p>
 		</div>
 
+		<div id="quick-nav">
+			<h1 class="title dot">Quick Nav</h1>
+			<ul>
+				{{#each progressLists.sections}}
+				<li>
+					<a href="#{{slug this.title}}">{{this.title}}</a>
+				</li>
+				{{/each}}
+			</ul>
+		</div>
+		<br>
 		{{#each progressLists.sections}}
-		<div class="purple-card">
+		<div class="purple-card" id="{{slug this.title}}">
 			{{> progress-list data=this }}
 		</div>
 		{{/each}}