diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 92d729579..24a243d7d 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -27,7 +27,7 @@ color: #e6eaea;
 background-color: #365558;
 line-height: 160%;
 border-top: 5px solid #0295aa;
-margin: 150px 0 0 0;
+margin: 80px 0 0 0;
 padding: 50 0 20 0px;
 }
 
@@ -314,8 +314,8 @@ box-sizing: border-box;
 
 .docs-topic-index {
 background-color:white;
-padding: 0 20 20 20px;
-margin: 20px 0;
+padding: 30 20px;
+margin: 40px 0;
 border: 1px solid rgba(49, 112, 143, .2);
 border-left-width: 5px;
 border-radius: 5px;
@@ -324,10 +324,17 @@ width: 100%;
 box-sizing: border-box;
 }
 
-.docs-topic-index h3 {
-  font-size: 100%;
+.docs-topic-index h2 {
+  font-size: 170%;
   font-weight: 300;
-  margin: 0px;
+  margin: 20px -5px;
+  padding: 0px;
+}
+
+.docs-topic-index h3 {
+  font-size: 140%;
+  font-weight: 300;
+  margin: 20px 0;
   padding: 0px;
 }
 
@@ -420,36 +427,43 @@ width: 100%;
 .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;
+  margin: 35px 0;
+  /* 
+  border-top: 1px solid rgba(54, 85, 88, .3);
+  margin: 60px 0 0 0;
+  padding-top: 20px;
+  */
 }
 
 .docs-topic-navigation div {
   display: table-cell;
-  width: 33%;
-  height: 50px;
-  max-width: 34%;
+  width: 50%;
+  height: 10px;
+  max-width: 50%;
   text-align: center;
   vertical-align: middle;
+  padding: 10px;
+  /* 
+    height: 40px;
+  */
 }
 
 .docs-topic-navigation div button{
-  border: 1px outset #365558;
   border-radius: 50px;
-  background-color: transparent;
-  color: #365558;
-  padding: 10px;
+  border: 0px;
+  color: #e6eaea; 
+  background-color: #365558;
+  padding: 5px;
   margin: 0 0 0 10px;
   font-size: 100%;
   line-height: 150%;
-  width: 100%; 
+  width: 100%;
   height:100%;
 }
 
 .docs-topic-navigation div button:hover {
-  border: 1px inset #365558;
+  background-color: #0295aa;
   cursor: pointer;
 }
 
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
index b7e866355..2aebfe1c8 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
@@ -150,12 +150,22 @@ function newSuperalgosDocsDocumentPage() {
             if (UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.category === 'Topic') {
 
                 buildOrderedTopicPageIndex(thisObject.docsSchemaDocument.topic)
-                generateTopicPreviousAndNextPageNavigation()
+
+                HTML = HTML = HTML + '<div class="docs-topic-index">' // Container for whole Topic Navigation including buttons, title and index
+
                 /* Topic Title */
-                titleLabel = thisObject.docsSchemaDocument.topic + ' Topic Content'
+                titleLabel = thisObject.docsSchemaDocument.topic + ' Topic Navigation'
                 HTML = HTML + '<div id="docs-main-title-div" class="docs-title-table"><div class="docs-table-cell"><h2 class="docs-h2" id="' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.type.toLowerCase().replace(' ', '-') + '" > ' + titleLabel + '</h2></div><div id="projectImageDiv" class="docs-image-container"/></div></div>'
 
+                generateTopicPreviousAndNextPageNavigation()
+
+                /* TOC*/
+
+                HTML = HTML + '<h3 class="docs-h3"> Table of Contents</h3>'
+
                 generateTopicMultiPageIndex()
+
+                HTML = HTML = HTML + '</div>'  // END Container for whole Topic Navigation
             }
 
             if (UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.category === 'Tutorial') {
@@ -164,7 +174,7 @@ function newSuperalgosDocsDocumentPage() {
                 generateTutorialPreviousAndNextPageNavigation()
                 /* Tutorial Title */
                 titleLabel = thisObject.docsSchemaDocument.tutorial + ' Tutorial Content'
-                HTML = HTML + '<div id="docs-main-title-div" class="docs-title-table"><div class="docs-table-cell"><h2 class="docs-h2" id="' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.type.toLowerCase().replace(' ', '-') + '" > ' + titleLabel + '</h2></div><div id="projectImageDiv" class="docs-image-container"/></div></div>'
+                HTML = HTML + '<h2 id="' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.type.toLowerCase().replace(' ', '-') + '" > ' + titleLabel + '</h2>'
 
                 generateTutorialMultiPageIndex()
             }
@@ -269,13 +279,15 @@ function newSuperalgosDocsDocumentPage() {
                         previousPage = orderedTopicPageIndexArray[i - 1]
                         nextPage = orderedTopicPageIndexArray[i + 1]
 
+                        HTML = HTML + '<p>You just read page <strong>' + thisObject.docsSchemaDocument.pageNumber + '</strong> in the series. Click the buttons below for the previous and next pages...</p>'
+
                         HTML = HTML + '<div class="docs-topic-navigation"><div>'
                         if (previousPage !== undefined) {
-                            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 + '<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><br/>&#8592;'
                         }
-                        HTML = HTML + '</div><div> << Current Page: ' + thisObject.docsSchemaDocument.pageNumber + ' >> </div><div>'
+                        HTML = HTML + '</div><div>'
                         if (nextPage !== undefined) {
-                            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 + '<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><br/>&#8594;'
                         }
                         HTML = HTML + '</div></div>'
                         return
@@ -292,6 +304,8 @@ function newSuperalgosDocsDocumentPage() {
                 let key = 'auto-generated-index-paragraph-' + autoGeneratedParagraphIndex
                 let paragraph
 
+                
+
                 for (let i = 0; i < orderedTopicPageIndexArray.length; i++) {
                     let arrayItem = orderedTopicPageIndexArray[i]
                     key = 'auto-generated-index-paragraph-' + autoGeneratedParagraphIndex
@@ -300,8 +314,9 @@ function newSuperalgosDocsDocumentPage() {
                         text: "" + arrayItem.type + ""
                     }
                     autoGeneratedParagraphIndex++
-                    HTML = HTML + '<p>' + arrayItem.pageNumber + '. ' + '<a class="docs-link" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')">' + paragraph.text + '</a></p>'
+                    HTML = HTML + '<p>' + arrayItem.pageNumber + '. ' + '<a onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')">' + paragraph.text + '</a></p>'
                 }
+
             }
 
             function buildOrderedTutorialPageIndex(tutorial) {