diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 207fbca4b..a63f2a6f0 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -462,3 +462,12 @@ width: 100%;
 border: 1px solid #dedede;
 border-spacing: 1px;
 }
+
+/* Search Page */
+.docs-image-logo-search {
+width: 300 px;
+}
+
+.docs-search-box {
+  width: 500 px;
+}
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index af0952540..d3ec88d16 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -503,11 +503,21 @@ function newSuperalgosDocSpace() {
     }
 
     function onOpening() {
-
+        if (objectBeingRendered === undefined) {
+            renderSearchPage()
+        }
     }
 
     function onClosing() {
+        objectBeingRendered = undefined
+    }
 
+    function renderSearchPage() {
+        HTML = HTML + '<div id="docs-main-title-div"><img src="Images/superalgos-logo.png" class="docs-image-logo-search">'
+        HTML = HTML + '<input class="docs-search-box"></input>' 
+        HTML = HTML + '</div>' 
+        let docsSpaceDiv = document.getElementById('docs-space-div')
+        docsSpaceDiv.innerHTML = HTML + addFooter()
     }
 
     function scrollToElement(htmlElementId) {
@@ -591,7 +601,7 @@ function newSuperalgosDocSpace() {
         function buildHtmlPage() {
             let HTML = ''
 
-            HTML = HTML + '<div id="docs-context-menu-clickeable-div" class="docs-node-html-page-container">' // Container Starts
+            HTML = HTML + '<div id="docs-context-menu-clickeable-div" class="docs-node-html-page-container">' // Clickeable Container Starts
 
             /* Title */
             HTML = HTML + '<div id="docs-main-title-div"><table class="docs-title-table"><tr><td width="50px"><div id="projectImageDiv" class="docs-image-container"/></td><td><h2 class="docs-h2" id="' + objectBeingRendered.type.toLowerCase().replace(' ', '-') + '" > ' + objectBeingRendered.project + ' / ' + objectBeingRendered.type + '</h2></td></tr></table></div>'
@@ -624,7 +634,7 @@ function newSuperalgosDocSpace() {
 
             autoGeneratedHtml()
             HTML = HTML + '</div>' // Content Ends
-            HTML = HTML + '</div>' // Container Ends
+            HTML = HTML + '</div>' // Clickeable Container Ends
 
             /*
             Here we inject the HTML we built into the DOM at the Docs Space Div.