diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 2aaf01f8b..0c98681dd 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -291,17 +291,53 @@ box-sizing: border-box;
 }
 
 .docs-callout {
+  background-color:white;
 padding: 20px;
 margin: 20px 0;
-border: 1px solid #eee;
+border: 1px solid rgba(188, 214, 67, .5);
 border-left-width: 5px;
 border-radius: 3px;
 border-left-color: #bcd643;
-font-weight: 500;
+font-weight: 550 !important;
 width: 100%;
 box-sizing: border-box;
 }
 
+.docs-topic-index {
+background-color:white;
+padding: 0 20 20 20px;
+margin: 20px 0;
+border: 1px solid rgba(49, 112, 143, .2);
+border-left-width: 5px;
+border-radius: 5px;
+border-left-color: #365558;
+width: 100%;
+box-sizing: border-box;
+}
+
+.docs-topic-index h3 {
+  font-size: 100%;
+  font-weight: 300;
+  margin: 0px;
+  padding: 0px;
+}
+
+.docs-topic-index p {
+  font-size: 100%;
+  padding: 0px;
+  margin: 2px 0;
+}
+
+.docs-topic-index a {
+  color: #365558;
+}
+
+.docs-topic-index a:hover {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #0295aa;
+}
+
 .docs-summary {
 font-size:120%;
 color: #808080;
@@ -381,7 +417,7 @@ width: 100%;
 }
 
 .docs-footer-cell {
-  padding: 0 15px 40px 15px;
+  padding: 10px 15px 0px 15px;
   display: table-cell;
   width: 33%;
 }
@@ -402,6 +438,7 @@ width: 100%;
   background-color: transparent;
   color: e6eaea;
   padding: 10px;
+  margin: 0px;
 }
 
 #docs-footer button:hover {
@@ -703,21 +740,21 @@ width: 100%;
 .docs-search-results-header-tabs-container > label {
   display: inline-block; 
   vertical-align: bottom;
-  padding: 0 15px 5px 15px;
+  padding: 0 15px 3px 15px;
   color: #365558;
   font-size: 90%;
 }
 
 .docs-search-results-header-tabs-container > label:hover {
   color: #0295aa;
-  padding-bottom: 5px;
+  padding-bottom: 3px;
   cursor: pointer;
 }
 
 .docs-search-results-header-tabs-container > input:checked + label {
   color: #0295aa;
   padding-bottom: 2px;
-  border-bottom:  5px solid #0295aa;
+  border-bottom:  3px solid #0295aa;
 }
 
 /* Search Results Page Content */
@@ -798,15 +835,7 @@ a:active.docs-search-result-content-record-title {
   margin-top: 5px!important;
 }
 
-.docs-topic-index-link {
-  font-size: 80%;
-  color: #31708f;
-}
 
-a:hover.docs-topic-index-link {
-  text-decoration: underline;
-  cursor: pointer;
-}
 
 /* Command Results Page Content */
 .docs-command-result-content {
diff --git a/Projects/Superalgos/Schemas/Docs-Nodes/trading-strategy.json b/Projects/Superalgos/Schemas/Docs-Nodes/trading-strategy.json
index cc57d94c9..9d92b63ea 100644
--- a/Projects/Superalgos/Schemas/Docs-Nodes/trading-strategy.json
+++ b/Projects/Superalgos/Schemas/Docs-Nodes/trading-strategy.json
@@ -13,7 +13,7 @@
             "text": "The definition of a strategy may be analyzed in three sections:"
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "A strategy is a set of actions occurring in stages"
         },
         {
@@ -41,7 +41,7 @@
             "text": "While stages are played in a sequence, upon execution there are overlaps. That is, a stage doesn't need to be closed for the next stage to be opened. The framework sets a clear separation of the concepts embodied in each stage to facilitate the process of defining and developing a trading system. But the truth is that, both at the conceptual level and during execution, the lines between stages are rather blurry."
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "designed to achieve a specific goal within a broader plan"
         },
         {
@@ -61,7 +61,7 @@
             "text": "In other words, the infrastructure provided by Superalgos enables the hyperspecialization of strategies. Do not aim to trade in all sorts of market situations with the same strategy. Instead, develop a strategy for each market situation you wish to trade."
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "via taking and managing positions"
         },
         {
diff --git a/Projects/Superalgos/Schemas/Docs-Nodes/tutorial.json b/Projects/Superalgos/Schemas/Docs-Nodes/tutorial.json
index 9d0c129c9..3d4c41ad2 100644
--- a/Projects/Superalgos/Schemas/Docs-Nodes/tutorial.json
+++ b/Projects/Superalgos/Schemas/Docs-Nodes/tutorial.json
@@ -9,7 +9,7 @@
             "text": "Content"
         },
         {
-            "style": "Text",
+            "style": "Callout",
             "text": "Nodes in the hierarchy may be arranged freely, meaning that there may be as many tutorial topics and tutorial steps as desired. In general terms, all types of nodes behave similarly in the sense that each node, independently of the precise type, represents a tutorial step in and of itself. There are subtle differences to be covered where appropriate."
         },
         {
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
index 80a82d03e..cf1871426 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
@@ -195,8 +195,11 @@ function newSuperalgosDocsDocumentPage() {
                 let key = 'auto-generated-index-paragraph-' + autoGeneratedParagraphIndex
                 let paragraph = {
                     style: "Title",
-                    text: "" + docsSchemaDocument.topic + " Topic Index"
+                    text: "<h3>" + docsSchemaDocument.topic + " TOC</H3>"
                 }
+
+                HTML = HTML = HTML + '<div class="docs-topic-index">' // Container for title and index
+
                 renderParagraph(paragraph, key)
                 autoGeneratedParagraphIndex++
 
@@ -236,8 +239,10 @@ function newSuperalgosDocsDocumentPage() {
                         text: "" + arrayItem.pageNumber + '. ' + arrayItem.type + ""
                     }
                     autoGeneratedParagraphIndex++
-                    HTML = HTML + '<p><a onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.objectBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')" class="docs-topic-index-link">' + paragraph.text + '</a></p>'
+                    HTML = HTML + '<p><a onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.objectBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')">' + paragraph.text + '</a></p>'
                 }
+
+                HTML = HTML = HTML + '</div>'  // END Container for title and index
             }
 
             function addContent() {