diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 93cf810fe..92d729579 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -415,6 +415,44 @@ background: white;
 width: 100%;
 }
 
+/* Topic Navigation */
+
+.docs-topic-navigation {
+  display: table;
+  width: 100%;
+  margin: 60px 0 0 0;
+  border-top: 1px solid rgba(54, 85, 88, .3);
+  padding-top: 40px;
+  vertical-align: middle;
+}
+
+.docs-topic-navigation div {
+  display: table-cell;
+  width: 33%;
+  height: 50px;
+  max-width: 34%;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.docs-topic-navigation div button{
+  border: 1px outset #365558;
+  border-radius: 50px;
+  background-color: transparent;
+  color: #365558;
+  padding: 10px;
+  margin: 0 0 0 10px;
+  font-size: 100%;
+  line-height: 150%;
+  width: 100%; 
+  height:100%;
+}
+
+.docs-topic-navigation div button:hover {
+  border: 1px inset #365558;
+  cursor: pointer;
+}
+
 /* Footer */
 
 .docs-node-html-footer-table {
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
index 616f23adc..3005cebfe 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
@@ -242,15 +242,15 @@ function newSuperalgosDocsDocumentPage() {
                         previousPage = orderedTopicPageIndexArray[i - 1]
                         nextPage = orderedTopicPageIndexArray[i + 1]
 
-                        HTML = HTML + '<p><center>'
+                        HTML = HTML + '<div class="docs-topic-navigation"><div>'
                         if (previousPage !== undefined) {
-                            HTML = HTML + '<a class="docs-link" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + previousPage.type.replace(/'/g, 'AMPERSAND') + '\')">' + previousPage.type + '</a> << '
+                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + previousPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button>' + previousPage.type + '</button></span>'
                         }
-                        HTML = HTML + ' Current Page: ' + thisObject.docsSchemaDocument.pageNumber + ' '
+                        HTML = HTML + '</div><div> << Current Page: ' + thisObject.docsSchemaDocument.pageNumber + ' >> </div><div>'
                         if (nextPage !== undefined) {
-                            HTML = HTML + ' >> <a class="docs-link" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + nextPage.type.replace(/'/g, 'AMPERSAND') + '\')">' + nextPage.type + '</a>'
+                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + nextPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button>' + nextPage.type + '</button></span>'
                         }
-                        HTML = HTML + '</center></p>'
+                        HTML = HTML + '</div></div>'
                         return
                     }
                 }