diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index cb3c32b..41e3f5e 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -730,6 +730,34 @@ fieldset > table td input[type="radio"] {
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+nav.episodes {
+	color: var(--background-primary);
+}
+nav.episodes span {
+	color: var(--text-primary);
+	display: inline-block;
+	text-align: center;
+	border: inset thin var(--text-primary);
+}
+nav.episodes span:nth-child(-n+2) {
+	border-top-left-radius: 2rem;
+	border-bottom-left-radius: 2rem;
+}
+nav.episodes span:nth-child(n+3) {
+	border-top-right-radius: 2rem;
+	border-bottom-right-radius: 2rem;
+}
+nav.episodes span.no-link,
+nav.episodes span a {
+	padding: 0.5rem;
+	display: inline-block;
+	min-width: 5.5rem;
+}
+nav.episodes object {
+	margin: 0 0.2rem;
+	heigth: 0.85rem;
+	vertical-align: middle;
+}
 @media (min-width: 600px) {
 	body > header .bounding-box {
 		justify-content: space-between;
diff --git a/templates/shared-utils.tpl.html b/templates/shared-utils.tpl.html
index 4d9a2c5..39e9c89 100644
--- a/templates/shared-utils.tpl.html
+++ b/templates/shared-utils.tpl.html
@@ -117,16 +117,16 @@
 <!--% IF folder %-->
 <!--% folder = folder %--><!--% ELSE %--><!--% folder = "hpr" %-->
 <!--% END %-->
-<small><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first">&lt;&lt; First</a>,
+<nav class="episodes"><span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.earliest) %-->/index.html" rel="first"><object href="/images/icons/arrow-first-plain.svg">&lt;&lt;</object>First</a></span>,
     <!--% IF links.previous %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous">&lt; Previous</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.previous) %-->/index.html" rel="previous"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</a></span>,
     <!--% ELSE %-->
-    <span>&lt;</span> Previous,
+    <span class="no-link"><object href="/images/icons/arrow-previous-plain.svg">&lt;</object>Previous</span>,
     <!--% END %-->
     <!--% IF links.next %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next &gt;</a>,
+    <span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.next) %-->/index.html" rel="next">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></a></span>, 
     <!--% ELSE %-->
-    Next <span>&gt;</span>
+    <span class="no-link">Next<object href="/images/icons/arrow-next-plain.svg">&gt;</object></span>, 
     <!--% END %-->
-    <a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest &gt;&gt;</a></small>
+	<span><a href="<!--% absolute_path(baseurl) %-->eps/<!--% folder %--><!--% zero_pad_left(links.latest) %-->/index.html" rel="last">Latest<object href="/images/icons/arrow-last-plain.svg">&gt;&gt;</object></a></span></nav>
 <!--% END %-->