diff --git a/src/static/css/diary.css b/src/static/css/diary.css
index 4ed6b0a..167690b 100755
--- a/src/static/css/diary.css
+++ b/src/static/css/diary.css
@@ -12,7 +12,7 @@ ul { list-style-position: inside; }
 .grid {
     display: grid;
     grid-template-columns: auto 533px 267px auto;
-    grid-template-rows: 25px 90px 40px repeat(2, auto);
+    grid-template-rows: 25px 90px 40px auto 40px auto; 
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
@@ -124,7 +124,6 @@ ul { list-style-position: inside; }
 }
 
 .diary-dir {
-    grid-area: 3 / 1 / 4 / 5;
     background-color: #080410;
     color: #F9B3D7;
     font-size: 20px;
@@ -142,6 +141,9 @@ ul { list-style-position: inside; }
 .diary-dir a:active {
     color: #f463ad;
 }
+.diary-dir.top {
+    grid-area: 3 / 1 / 4 / 5;
+}
 
 .body-row {
     grid-area: 4 / 1 / 5 / 5;
@@ -237,8 +239,12 @@ ul { list-style-position: inside; }
     padding-bottom: 15px;
 }
 
-.footer-row {
+.diary-dir.bottom {
     grid-area: 5 / 1 / 6 / 5; 
+}
+
+.footer-row {
+    grid-area: 6 / 1 / 7 / 5;
     background-color: #080410;
 }
 
diff --git a/src/views/diary.tpl b/src/views/diary.tpl
index a1a4f75..0b26632 100644
--- a/src/views/diary.tpl
+++ b/src/views/diary.tpl
@@ -1,7 +1,7 @@
 % rebase('frame.tpl')
 % import re
     <div class="dir-row"> </div>
-    <div class="diary-dir">
+    <div class="diary-dir top">
     <center>
         % max_pages = int((total - 1) / limit)
 <%
@@ -91,5 +91,65 @@
             </div>
         % end
     </div>
+    <div class="diary-dir bottom">
+    <center>
+        % max_pages = int((total - 1) / limit)
+<%
+        # page never below 0
+        if page <= 0:
+            page = 0
+        end
+        # page never over maximum
+        if page > max_pages:
+            page = max_pages
+        end 
+%>
+        % # << is always active link pointing to 0
+        <a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+
+        % # < points to 0 if page 0 or below
+        % if page <= 0:
+            <a href=/diary/0 rel="nofollow">&lt;</a>
+        % # < points to previous page otherwise
+        % else:
+            <a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+        % end
 
+        % # fill out number cluster to the left when page is high
+        % if max_pages > cluster and page > max_pages - cluster:
+            % for j in range(cluster - max_pages + page):
+                <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+            % end
+        % end
+
+        % # form cluster of number links around page
+        % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
+            % # bold current page number
+            % if i == page:
+                <b>{{i}}</b>
+            % # form neighboring numbers into links
+            % else:
+                <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+            % end
+        % end
+
+        % # fill out number cluster to the right when page is low
+        % if page <= cluster - 1 and max_pages > page + cluster:
+            % for j in range(cluster - page):
+                <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+            % end
+        % end
+
+        % # > points to max if page is at or above maximum
+        % if page >= max_pages:
+            <a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+        % # > point to next page otherwise
+        % else:
+            <a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+        % end
+
+        % # >> is always active link to maximum page
+        <a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+    </center>
+    </div>
 % include diary-boxes.tpl