diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index f397e1048..d7e721a4d 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -337,6 +337,8 @@ a:active.docs-footer-link {
     text-align: left;
     outline: none;
     font-size: 125%;
+    vertical-align: auto;
+    margin-bottom: 10px;
   }
 
   /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
@@ -349,11 +351,12 @@ a:active.docs-footer-link {
     padding: 0 18px;
     display: none;
     overflow: hidden;
+    margin-left: 85px;
   }
 
   .docs-collapsible-element:after {
     content: '\02795'; /* Unicode character for "plus" sign (+) */
-    font-size: 8px;
+    font-size: 5px;
     color: white;
     float: right;
     margin-left: 5px;
@@ -361,4 +364,12 @@ a:active.docs-footer-link {
   
   .docs-collapsible-active:after {
     content: "\2796"; /* Unicode character for "minus" sign (-) */
+  }
+
+  .docs-menu-item-image {
+    margin-left: 25px;
+    margin-right: 25px;
+    width: 30px;
+    height: 30px;
+    vertical-align: auto;
   }
\ No newline at end of file
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 174666610..7f150599c 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -445,7 +445,7 @@ function newSuperalgosDocSpace() {
 
     function enableCollapsibleContent() {
         let collapsibleElementsArray = document.getElementsByClassName("docs-collapsible-element")
-        
+
         for (let i = 0; i < collapsibleElementsArray.length; i++) {
             collapsibleElementsArray[i].addEventListener("click", function () {
                 this.classList.toggle("docs-collapsible-active")
@@ -540,12 +540,81 @@ function newSuperalgosDocSpace() {
             HTML = HTML + '</div>' // Content Ends
             HTML = HTML + '</div>' // Container Ends
 
+            /*
+            Here we inject the HTML we built into the DOM at the Docs Space Div.
+            */
+            let docsSpaceDiv = document.getElementById('docs-space-div')
+            docsSpaceDiv.innerHTML = HTML + addFooter()
+
             hightlightEmbeddedCode()
 
-            addProjectImage()
+            /*
+            After generating the html, we will add the images at all the points we know
+            there are images to be added.
+            */
+            addImages()
 
-            if (nodeDocsDefinition.definition !== undefined) {
-                addDefinitionImage(objectBeingRendered.project)
+
+            function addImages() {
+                addProjectImage()
+                if (nodeDocsDefinition.definition !== undefined) {
+                    addDefinitionImage(objectBeingRendered.project)
+                }
+                addMenuItemsImages()
+
+                function addDefinitionImage(project) {
+                    let imageElement
+                    if (nodeAppDefinition.icon === undefined) {
+                        let imageName = nodeAppDefinition.type.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
+                        imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
+                    } else {
+                        imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, objectBeingRendered.type)
+                    }
+
+                    imageElement.width = "150"
+                    imageElement.height = "150"
+
+                    let definitionImageDiv = document.getElementById('definitionImageDiv')
+                    definitionImageDiv.appendChild(imageElement)
+                }
+
+                function addProjectImage() {
+                    let imageName = project.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
+                    let imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
+                    imageElement.width = "50"
+                    imageElement.height = "50"
+
+                    let projectImageDiv = document.getElementById('projectImageDiv')
+                    projectImageDiv.appendChild(imageElement)
+                }
+
+                function addMenuItemsImages() {
+                    if (nodeAppDefinition !== undefined && nodeAppDefinition.menuItems !== undefined) {
+                        for (let i = 0; i < nodeAppDefinition.menuItems.length; i++) {
+                            let menuItem = nodeAppDefinition.menuItems[i]
+                            let collectionImage = getMenuItemIcon()
+                            let imageElement = collectionImage.cloneNode()
+
+                            imageElement.className = "docs-menu-item-image"
+
+                            let menuItemElement = document.getElementById('docs-menu-item-' + i + '')
+                            let dummyImage = menuItemElement.childNodes[0]
+                            menuItemElement.replaceChild(imageElement, dummyImage)
+
+                            function getMenuItemIcon() {
+                                if (menuItem.relatedUiObject !== undefined) {
+                                    return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, menuItem.relatedUiObject)
+                                } else {
+                                    if (menuItem.iconPathOn !== undefined) {
+                                        return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, menuItem.iconPathOn)
+                                    } else {
+                                        return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName('Superalgos', 'bitcoin')
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
             }
 
             function autoGeneratedHtml() {
@@ -570,9 +639,9 @@ function newSuperalgosDocSpace() {
                     for (let i = 0; i < nodeAppDefinition.menuItems.length; i++) {
                         let menuItem = nodeAppDefinition.menuItems[i]
 
-                        HTML = HTML + '<button type="button" class="docs-collapsible-element">' + menuItem.label + '</button>'
+                        HTML = HTML + '<button id="docs-menu-item-' + i + '" type="button" class="docs-collapsible-element"><img>' + menuItem.label + '</button>'
                         HTML = HTML + '<div class="docs-collapsible-content">'
-                        
+
                         paragraph = {
                             style: "Text",
                             text: 'The ' + menuItem.label + ' menu item has the following properties:'
@@ -699,10 +768,7 @@ function newSuperalgosDocSpace() {
             }
 
             function hightlightEmbeddedCode() {
-                let docsSpaceDiv = document.getElementById('docs-space-div')
-                docsSpaceDiv.innerHTML = HTML + addFooter()
                 _self.Prism.highlightAllUnder(docsSpaceDiv, true, onHighlighted)
-
                 function onHighlighted() {
                     // nothing to do here
                 }
@@ -742,32 +808,6 @@ function newSuperalgosDocSpace() {
         }
     }
 
-    function addDefinitionImage(project) {
-        let imageElement
-        if (nodeAppDefinition.icon === undefined) {
-            let imageName = nodeAppDefinition.type.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
-            imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
-        } else {
-            imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, objectBeingRendered.type)
-        }
-        
-        imageElement.width = "150"
-        imageElement.height = "150"
-
-        let definitionImageDiv = document.getElementById('definitionImageDiv')
-        definitionImageDiv.appendChild(imageElement)
-    }
-
-    function addProjectImage() {
-        let imageName = project.toLowerCase().replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-')
-        let imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName)
-        imageElement.width = "50"
-        imageElement.height = "50"
-        
-        let projectImageDiv = document.getElementById('projectImageDiv')
-        projectImageDiv.appendChild(imageElement)
-    }
-
     function addBold(text) {
         let splittedText = text.split(':')
         if (splittedText.length > 1 && splittedText[1].length > 0) {