diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 717335ec9..80b47351a 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -4,15 +4,28 @@
     background-color: #fdfdfd;
   }
 
+  .docs-node-html-page-container {
+    font:17px/1.5 "segoeui";
+    color: #111; 
+    text-rendering:auto;
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale;
+    line-height: 150%;
+    margin: 20 20 20 30px;
+  }
+
   .docs-definitionTable {
     background-color: #f3f3f3;
     vertical-align: middle;
-    width: 95%;
+    width: 100%;
     min-width: 95px;
     margin: auto;
     margin-bottom: 20px;
     margin-top: 20px;
+    margin-right: 20px;
     border: 1px solid #dedede;
+    padding: 10px;
+    line-height: 150%;
   }
 
   .docs-image-container {
@@ -23,31 +36,6 @@
     width: 100%;
   }
 
-  .docs-font-medium {
-    font:normal normal normal 32px/1 "segoeui";
-    text-rendering:auto;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    line-height: 150%
-  }
-  
-  .docs-font-large {
-    font:bold normal normal 40px/1 "segoeui";
-    text-rendering:auto;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    line-height: 150%
-  }
-
-  .docs-font-bold-small {
-    font:bold normal normal 24px/1 "segoeui";
-    font-size:inherit;
-    text-rendering:auto;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    line-height: 150%
-  }
-
   /* Tooltip container */
   .docs-tooltip {
     position: relative;
@@ -99,13 +87,31 @@
     opacity: 1;
   }
 
-/* Headers */
+  /* Headings */
 
-h2 {font-weight:700; font-size:170%; margin-top: 60px; padding-bottom: 5px;}
-h3 {font-weight:500; font-size:150%; margin-top: 30px;}
-h4 {font-weight:400; font-size:150%; margin-top: 30px;}
-h5 {font-weight:400; font-size:140%; margin-top: 30px; font-style:italic;}
-h6 {font-weight:400; font-size:130%; margin-top: 30px; font-style:italic;}
-h7 {font-weight:400; font-size:120%; margin-top: 30px; font-style:italic;}
+  .docs-h1 {font-size:210%; margin-top: 40px; padding-bottom: 5px;}
 
-/* Line on main headings spanning across the screen */
+  .docs-h2 {
+  font-weight: bold; 
+  font-size: 160%; 
+  margin-top: 60px; 
+  padding-bottom: 5px;
+  overflow:hidden;
+  }
+
+  .docs-h2::after{
+  content:'';
+  display:inline-block;
+  width:90%;
+  margin-right:-100%;
+  border-bottom: 1px solid #cdd4d5;
+  margin-left: 20px;
+  }
+
+  .docs-h3 {font-weight:500; font-size:150%; margin-top: 30px;}
+
+  .docs-h4 {font-weight:400; font-size:150%; margin-top: 30px;}
+
+  .docs-h5 {font-weight:400; font-size:140%; margin-top: 30px; font-style:italic;}
+
+  .docs-h6 {font-weight:400; font-size:130%; margin-top: 30px; font-style:italic;}
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 12dd874aa..99d1424a7 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -69,8 +69,10 @@ function newSuperalgosDocSpace() {
         function buildNodeHtmlPage() {
             let HTML = ''
 
+            HTML = HTML + '<div class="docs-node-html-page-container">' // Container Starts
+
             /* Title */
-            HTML = HTML + '<div><h1 class="docs-font-large" id="' + node.type.toLowerCase().replace(' ', '-') + '" > ' + node.type + '</h1></div>'
+            HTML = HTML + '<div><h1 class="docs-h1" id="' + node.type.toLowerCase().replace(' ', '-') + '" > ' + node.type + '</h1></div>'
 
             /* We start with the Definition Table */
             if (nodeDocsDefinition.definition !== undefined) {
@@ -80,7 +82,7 @@ function newSuperalgosDocSpace() {
                 HTML = HTML + '<div id="definitionImageDiv" class="docs-image-container"/>'
                 HTML = HTML + '</td>'
                 HTML = HTML + '<td>'
-                HTML = HTML + '<strong class="docs-font-bold-small">' + addToolTips(node, nodeDocsDefinition.definition) + '</strong>'
+                HTML = HTML + '<strong>' + addToolTips(node, nodeDocsDefinition.definition) + '</strong>'
                 HTML = HTML + '</td>'
                 HTML = HTML + '</tr>'
                 HTML = HTML + '</table>'
@@ -97,7 +99,7 @@ function newSuperalgosDocSpace() {
             /* Adding Section */
             if (nodeDocsDefinition.adding !== undefined) {
                 if (nodeDocsDefinition.adding.length > 0) {
-                    HTML = HTML + '<h2>Adding a ' + node.type + '</h2>'
+                    HTML = HTML + '<h2 class="docs-h2">Adding a ' + node.type + '</h2>'
                     for (let i = 0; i < nodeDocsDefinition.adding.length; i++) {
                         let paragraph = nodeDocsDefinition.adding[i]
                         HTML = HTML + '<p>' + paragraph + '</p>'
@@ -108,7 +110,7 @@ function newSuperalgosDocSpace() {
             /* Configuring Section */
             if (nodeDocsDefinition.configuring !== undefined) {
                 if (nodeDocsDefinition.configuring.length > 0) {
-                    HTML = HTML + '<h2>Configuring a ' + node.type + '</h2>'
+                    HTML = HTML + '<h2 class="docs-h2">Configuring a ' + node.type + '</h2>'
                     for (let i = 0; i < nodeDocsDefinition.configuring.length; i++) {
                         let paragraph = nodeDocsDefinition.configuring[i]
                         HTML = HTML + '<p>' + paragraph + '</p>'
@@ -119,7 +121,7 @@ function newSuperalgosDocSpace() {
             /* Starting Section */
             if (nodeDocsDefinition.starting !== undefined) {
                 if (nodeDocsDefinition.starting.length > 0) {
-                    HTML = HTML + '<h2>Starting a ' + node.type + '</h2>'
+                    HTML = HTML + '<h2 class="docs-h2">Starting a ' + node.type + '</h2>'
                     for (let i = 0; i < nodeDocsDefinition.starting.length; i++) {
                         let paragraph = nodeDocsDefinition.starting[i]
                         HTML = HTML + '<p>' + paragraph + '</p>'
@@ -127,6 +129,8 @@ function newSuperalgosDocSpace() {
                 }
             }
 
+            HTML = HTML + '</div>' // Container Ends
+
             let docsAppDiv = document.getElementById('docsDiv')
             docsAppDiv.innerHTML = HTML