diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index f98052a3b..c629e7cf5 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -60,7 +60,7 @@
   
     /* Position the docs-tooltip text */
     position: absolute;
-    z-index: 1;
+    z-index: 101;
     bottom: 125%;
     left: 50%;
     margin-left: -120px;
@@ -222,4 +222,20 @@
   
   div.docs-font-small {
     margin-bottom:7px;
+  }
+
+  hr.docs-shaded {
+    box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.5);
+  }
+
+  .docs-footer-row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+
+  .docs-footer-body {
+    position: relative;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
   }
\ No newline at end of file
diff --git a/Client/WebServer/index.html b/Client/WebServer/index.html
index 500b11f91..01ba38a2d 100644
--- a/Client/WebServer/index.html
+++ b/Client/WebServer/index.html
@@ -109,12 +109,13 @@
     <ul id="menu">
         <li class="menu-item" onClick="window.contextMenu.editParagraph()">Edit Paragraph</li>
         <li class="menu-item" onClick="window.contextMenu.addParagraph()">Add Paragraph</li>
-        <li class="menu-item" onClick="window.contextMenu.code()">Turn into JS Code</li>
-        <li class="menu-item" onClick="window.contextMenu.code()">Turn into JSON Code</li>
-        <li class="menu-item" onClick="window.contextMenu.note()">Turn into Note</li>
-        <li class="menu-item" onClick="window.contextMenu.warning()">Turn into Warning</li>
-        <li class="menu-item" onClick="window.contextMenu.important()">Turn into Important</li>
-        <li class="menu-item" onClick="window.contextMenu.important()">Turn into Success</li>
+        <li class="menu-item" onClick="window.contextMenu.toJsCode()">JS Code Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toJsonCode()">JSON Code Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toText()">Text Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toNote()">Note Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toWarning()">Warning Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toImportant()">Important Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toSuccess()">Success Style</li>
     </ul>
 
 </body>
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 4462997eb..0a9834541 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -53,10 +53,13 @@ function newSuperalgosDocSpace() {
             window.contextMenu = {
                 editParagraph: editParagraph,
                 addParagraph: addParagraph,
-                code: code,
-                note: note,
-                warning: warning,
-                important: important
+                toJsCode: toJsCode,
+                toJsonCode: toJsonCode,
+                toText: toText,
+                toNote: toNote,
+                toWarning: toWarning,
+                toImportant: toImportant,
+                toSuccess: toSuccess
             }
 
             function editParagraph() {
@@ -99,20 +102,42 @@ function newSuperalgosDocSpace() {
                 contextMenuForceOutClick()
             }
 
-            function code() {
+            function toJsCode() {
 
             }
 
-            function note() {
+            function toJsonCode() {
 
             }
 
-            function warning() {
-
+            function toText() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Text'
+                renderPage()
             }
 
-            function important() {
+            function toNote() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Note'
+                renderPage()
+            }
 
+            function toWarning() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Warning'
+                renderPage()
+            }
+
+            function toImportant() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Important'
+                renderPage()
+            }
+
+            function toSuccess() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Success'
+                renderPage()
             }
         }
     }
@@ -217,9 +242,9 @@ function newSuperalgosDocSpace() {
         We need to locate the parent node that it is a Paragraph,
         otherwise we could end up in an inner html element.
         */
-        let paragraphNode = selection.baseNode.parentNode
+        let paragraphNode = selection.baseNode
 
-        if (paragraphNode.id !== undefined && paragraphNode.className === "docs-tooltip") {
+        if (paragraphNode.id !== undefined && paragraphNode.parentNode.className === "docs-tooltip") {
             return false
         }
 
@@ -352,7 +377,7 @@ function newSuperalgosDocSpace() {
                             styleClass = 'class="docs-font-small docs-alert-success"'
                             prefix = '<i class="docs-fa docs-check-square-o"></i> <b>Tip:</b>'
                             role = 'role="alert"'
-                            key = key + '-sucess'
+                            key = key + '-success'
                             break
                         }
                         case 'Important': {
@@ -413,11 +438,36 @@ function newSuperalgosDocSpace() {
             HTML = HTML + '</div>' // Container Ends
 
             let docsAppDiv = document.getElementById('docsDiv')
-            docsAppDiv.innerHTML = HTML
+            docsAppDiv.innerHTML = HTML + addFooter()
 
             if (nodeDocsDefinition.definition !== undefined) {
                 addDefinitionImage(nodeAppDefinition, renderingNode.project)
             }
+
+            function addFooter() {
+                let HTML = ''
+                HTML = HTML + '<hr class="docs-shaded"></hr>'
+                HTML = HTML + '<footer>'
+                HTML = HTML + '<div class="docs-footer-row">'
+                HTML = HTML + '<div class="docs-footer-body" style="text-align: left;">'
+                HTML = HTML + '<p><a href="#"><kbd>BACK TO TOP ↑</kbd></a></p>'
+
+                HTML = HTML + '<ul>'
+                HTML = HTML + '<li><a href="https://superalgos.org/" target="_blank">Superalgos Project</a> — Learn more about the project.</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgoscommunity" rel="nofollow" target="_blank">Community Group</a> — Lets talk Superalgos!</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgossupport" rel="nofollow" target="_blank">Support Group</a> — Need help using the <code>master</code> branch?</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgosdevelop" rel="nofollow" target="_blank">Develop Group</a> — Come test the <code>develop</code> branch!</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgosuxui" rel="nofollow" target="_blank">UX/UI Design Group</a> — Help us improve the GIU!</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgos_es" rel="nofollow" target="_blank">Grupo en Español</a> — Hablemos en español!</li>'
+                HTML = HTML + '<li><a href="https://t.me/superalgos" rel="nofollow" target="_blank">Superalgos Announcements</a> — Be the first to know about new releases, hotfixes, and important issues.</li>'
+                HTML = HTML + '</ul>'
+                HTML = HTML + '<img src="Images/superalgos-logo.png" width="200 px">'
+
+                HTML = HTML + '</div>'
+                HTML = HTML + '</div>'
+                HTML = HTML + '</footer>'
+                return HTML
+            }
         }
 
         thisObject.sidePanelTab.open()