diff --git a/_templates/_nav_openshift.html.erb b/_templates/_nav_openshift.html.erb
index 64a05d518d..0dca28e262 100644
--- a/_templates/_nav_openshift.html.erb
+++ b/_templates/_nav_openshift.html.erb
@@ -1,25 +1,115 @@
 <ul class="nav nav-sidebar">
   <%- navigation.each.with_index do |topic_group, groupidx| -%>
+
+<!--  the top level  groupings start here -->
+
+<%# group_id %>
+<%# topic_group[:id] %>
+<%# topic_id %>
+
     <%- current_group = topic_group[:id] == group_id -%>
     <li class="nav-header">
+
       <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicGroup<%= groupidx %>">
-        <span id="tgSpan<%= groupidx %>" class="fa <%= current_group ? 'fa-angle-down' : 'fa-angle-right' %>"></span><%= topic_group[:name] %>
+        <span id="tgSpan<%= groupidx %>" class="fa <%= current_group ? 'fa-angle-down' : 'fa-angle-right' %>"></span>
+          <%= topic_group[:name] %>
+          <!-- prints out the names of the top level books with arrow down or to right
+               So in this case: Welcome 1 and Another Book -->
       </a>
+
+
+      <!-- this then goes through all the topics within the top level groups
+      depending on whether it itself contains further topics or is a single file -->
+
       <ul id="topicGroup<%= groupidx %>" class="collapse <%= current_group ? 'in' : '' %> list-unstyled">
+
         <%- topic_group[:topics].each.with_index do |topic, topicidx| -%>
+
+        <!-- for each topic in this topic_group, for example in Welcome 1, what topics exist?
+        Welcome 2 and Welcome 1 More -->
+
           <%- if not topic.has_key?(:topics) -%>
+
+          <!-- is this is a single page? That is, does this topic have more topics?
+          Welcome 1 More -->
+
             <%- current_topic = current_group && (topic[:id] == topic_id) -%>
+            <!-- ^ this establishs whether we are reading this current page -->
+
             <li><a class="<%= current_topic ? ' active' : '' %>" href="<%= subtopic_shim %><%= topic[:path] %>"><%= topic[:name] %></a></li>
+            <!--  if active, then highlight it,  otherwise nothing to do -->
+
           <%- else -%>
+
+            <!-- this topic contains subtopics - Welcome 2 -->
+
             <%- current_subgroup = topic[:id] == subgroup_id -%>
+
+            <!-- start a new heading area -->
+
             <li class="nav-header">
               <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicSubGroup-<%= groupidx %>-<%= topicidx %>">
-                <span id="sgSpan-<%= groupidx %>-<%= topicidx %>" class="fa <%= current_subgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>&nbsp;<%= topic[:name] %>
+                <span id="sgSpan-<%= groupidx %>-<%= topicidx %>" class="fa <%= current_subgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>
+                  &nbsp;<%= topic[:name] %>
+
+                  <!-- prints out the names of the second level books with arrow down or to right
+                  So in this case: Welcome 2 -->
+
               </a>
               <ul id="topicSubGroup-<%= groupidx %>-<%= topicidx %>" class="nav-tertiary list-unstyled collapse<%= current_subgroup ? ' in' : '' %>">
                 <%- topic[:topics].each do |subtopic| -%>
+
+                <!-- for each topic in this topic_group, in Welcome 2, what topics exist?
+                     Welcome 2 Index Page, Welcome 3 and Welcome 2 More - we list them all.. -->
+
+                <%# subtopic[:path] %>
+                <%# subgroup_id %>
+                <%# current_group %>
+                <%# current_subgroup %>
+                <%# topic_id %>
+
+                <%- if not subtopic.has_key?(:topics) -%>
+
+                <!-- is this is a single page? That is, does this topic have more topics?
+                 Welcome 2 Index Page and Welcome 2 More -->
+
                   <%- current_subtopic = current_group && current_subgroup && (subtopic[:id] == topic_id) %>
-                  <li><a class="<%= current_subtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subtopic[:path] %>"><%= subtopic[:name] %></a></li>
+                  <li>
+                    <a class="<%= current_subtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subtopic[:path] %>">
+                      <%= subtopic[:name] %>
+                    </a>
+                  </li>
+
+                <% else %>
+
+                <!-- Welcome 3 -->
+
+                <%- current_subsubgroup = subtopic[:id] == subgroup_id -%>
+
+
+                <li class="nav-header">
+                  <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicSubSubGroup-<%= groupidx %>-<%= topicidx %>">
+                    <span id="sgSpan-<%= groupidx %>-<%= topicidx %>" class="fa <%= current_subsubgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>
+                    &nbsp;<%= subtopic[:name] %>
+                  </a>
+                  <ul id="topicSubSubGroup-<%= groupidx %>-<%= topicidx %>" class="nav-tertiary list-unstyled collapse<%= current_subsubgroup ? ' in' : '' %>">
+                  <%- subtopic[:topics].each do |subsubtopic| -%>
+
+                    <!-- list all topics within Welcome 3 here. Note that we are not coding this for more subtopics here -->
+                    <%- current_subsubtopic = current_group && current_subgroup && current_subsubgroup && (subtopic[:id] == topic_id) %>
+                    <li>
+                      <a class="<%= current_subsubtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subsubtopic[:path] %>" style="padding-left: 70px;">
+                        <%= subsubtopic[:name] %>
+                      </a>
+                    </li>
+
+                  <%- end -%>
+                  </ul>
+                  </li>
+
+                <%- end -%>
+
+
                 <%- end -%>
               </ul>
             </li>
diff --git a/_templates/_page_openshift.html.erb b/_templates/_page_openshift.html.erb
index 0dcd75727f..7be6710049 100644
--- a/_templates/_page_openshift.html.erb
+++ b/_templates/_page_openshift.html.erb
@@ -8,12 +8,10 @@
   <meta charset="utf-8">
   <meta content="IE=edge" http-equiv="X-UA-Compatible">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <!-- change this when 3.11 and 4.0 are released -->
-  <%= (version == "3.11" || version == "4.0") ? '<meta name="robots" content="noindex,nofollow">' : '' %>
   <title><%= [topic_title, subgroup_title].compact.join(' - ') %> | <%= group_title %> | <%= distro %> <%= version %></title>
   <link href="https://assets.openshift.net/content/subdomain.css" rel="stylesheet" type="text/css">
-  <link href="<%= File.join(css_path, 'docs.css') %>" rel="stylesheet" />
-  <link href="<%= File.join(css_path, 'search.css') %>" rel="stylesheet" />
+  <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet" />
+  <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/search.css" rel="stylesheet" />
   <link href="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png">
   <link href="https://assets.openshift.net/content/subdomain/favicon32x32.png" rel="shortcut icon" type="text/css">
   <link href="https://assets.openshift.net/content/osh-nav-footer.css" rel="stylesheet" type="text/css" media="screen, print" />
@@ -22,21 +20,6 @@
   <meta content="OpenShift" name="application-name">
   <meta content="#000000" name="msapplication-TileColor">
   <meta content="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" name="msapplication-TileImage">
-  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
-  <!--[if lt IE 9]>
-    <script src="https://assets.openshift.net/content/html5shiv.js" type="text/javascript"></script>
-    <script src="https://assets.openshift.net/content/respond.js" type="text/javascript"></script>
-    <link href="https://assets.openshift.net/content/vendor/respond-js/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
-    <link href="<%= File.join(images_path, "respond.proxy.gif") %>" id="respond-redirect" rel="respond-redirect">
-    <script src="<%= File.join(javascripts_path, "respond.proxy.js") %>" type="text/javascript"></script>
-  <![endif]-->
-  <script src="https://assets.openshift.net/content/modernizr.js" type="text/javascript"></script>
-  <script src="https://assets.openshift.net/content/subdomain.js" type="text/javascript"></script>
-  <script src="https://assets.openshift.net/content/nav-tertiary.js" type="text/javascript"></script>
-  <script src="<%= File.join(javascripts_path, "bootstrap-offcanvas.js") %>" type="text/javascript"></script>
-  <script src="<%= File.join(javascripts_path, "reformat-html.js") %>" type="text/javascript"></script>
-  <script src="<%= File.join(javascripts_path, "hc-search.js") %>" type="text/javascript"></script>
-  <script src="<%= File.join(javascripts_path, "page-loader.js") %>" type="text/javascript"></script>
   <%= render("_templates/_analytics.html.erb", :distro_key => distro_key) %>
 </head>
 <body onload="selectVersion('<%= version %>');">
@@ -51,26 +34,28 @@
       </li>
       <li class="hidden-xs active">
         <% if (distro_key == "openshift-enterprise") %>
-        <% if (version = "3.10" || version >= "3.3") %>
-          <a href="https://docs.openshift.com/container-platform/<%= version %>/welcome/index.html">
-            <%= distro %>
-          </a>
-        <% else %>
-          <a href="https://docs.openshift.com/enterprise/<%= version %>/welcome/index.html">
-            <%= distro %>
-          </a>
-        <% end %>
+          <% if (version == "3.10" || version == "3.11" || version >= "3.3") %>
+            <a href="https://docs.openshift.com/container-platform/<%= version %>/welcome/index.html">
+              <%= distro %>
+            </a>
+          <% else %>
+            <a href="https://docs.openshift.com/enterprise/<%= version %>/welcome/index.html">
+              <%= distro %>
+            </a>
+          <% end %>
           <select id="version-selector" onchange="versionSelector(this);">
-            <option value="3.10">3.10</option>
-            <option value="3.9">3.9</option>
-            <option value="3.7">3.7</option>
-            <option value="3.6">3.6</option>
-            <option value="3.5">3.5</option>
-            <option value="3.4">3.4</option>
-            <option value="3.3">3.3</option>
-            <option value="3.2">3.2</option>
-            <option value="3.1">3.1</option>
-            <option value="3.0">3.0</option>
+              <option value="4.1">4.1</option>
+              <option value="3.11">3.11</option>
+              <option value="3.10">3.10</option>
+              <option value="3.9">3.9</option>
+              <option value="3.7">3.7</option>
+              <option value="3.6">3.6</option>
+              <option value="3.5">3.5</option>
+              <option value="3.4">3.4</option>
+              <option value="3.3">3.3</option>
+              <option value="3.2">3.2</option>
+              <option value="3.1">3.1</option>
+              <option value="3.0">3.0</option>
           </select>
         <% else %>
           <%= breadcrumb_root %>
@@ -85,7 +70,7 @@
       </li>
       <% if (distro_key != "openshift-origin") %>
       <span text-align="right" style="float: right !important">
-        <a href="https://github.com/openshift/openshift-docs/commits/enterprise-<%= (distro_key == "openshift-enterprise") ? version : ((distro_key == "openshift-dedicated") ? "3.9" : "3.9") %>/<%= repo_path %>">
+        <a href="https://github.com/openshift/openshift-docs/commits/enterprise-<%= (distro_key == "openshift-enterprise") ? version : ((distro_key == "openshift-dedicated") ? "3.11" : "3.11") %>/<%= repo_path %>">
           Page history
         </a>
         /
@@ -98,20 +83,61 @@
     </ol>
     <div class="row row-offcanvas row-offcanvas-left">
       <div class="col-xs-8 col-sm-3 col-md-3 sidebar sidebar-offcanvas">
+        <!-- change this when 4.1 docs are released -->
+        <% if (version != "4.1") %>
         <div class="row-fluid">
-          <%= render("_templates/_search.html.erb", :distro_key => distro_key, :version => version) %>
+          <div id="hc-search">
+            <input id="hc-search-input" type="text">
+            <button id="hc-search-btn">Search</button>
+          </div>
+
+          <div id="hc-search-modal">
+            <div id="hc-modal-content">
+              <span id="hc-modal-close">&times;</span>
+              <div id="hc-search-results-wrapper">
+                <div id="hc-search-results"></div>
+                <div id="hc-search-progress-indicator" class="text-center search-progress-indicator"><i class="fa fa-circle-o-notch fa-spin" style="font-size:42px"></i></div>
+                <div class="text-center">
+                  <button id="hc-search-more-btn">Show more results</button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+        <% end %>
         <%= render("_templates/_nav_openshift.html.erb", :distro_key => distro_key, :navigation => navigation, :group_id => group_id, :topic_id => topic_id, :subgroup_id => subgroup_id, :subtopic_shim => subtopic_shim) %>
       </div>
       <div class="col-xs-12 col-sm-9 col-md-9 main">
         <div class="page-header">
           <h1><%= article_title %></h1>
         </div>
-        <font size="+1" color="red">This documentation is for Beta only and might not be complete or fully tested.</font>        
         <%= content %>
       </div>
     </div>
   </div>
+
+  <script src="https://assets.openshift.net/content/modernizr.js" type="text/javascript"></script>
+  <script src="https://assets.openshift.net/content/subdomain.js" type="text/javascript"></script>
+  <script src="https://assets.openshift.net/content/nav-tertiary.js" type="text/javascript"></script>
+  <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/bootstrap-offcanvas.js" type="text/javascript"></script>
+  <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/reformat-html.js" type="text/javascript"></script>
+  <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/hc-search.js" type="text/javascript"></script>
+  <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/page-loader.js" type="text/javascript"></script>
+
+  <script>
+  var dk = '<%= distro_key %>';
+  var version = '<%= version %>';
+
+  var distros = {
+    'openshift-origin': ['docs_origin', version],
+    'openshift-dedicated': ['docs_dedicated', version],
+    'openshift-online': ['docs_online'],
+    'openshift-enterprise': ['docs_cp', version]
+  };
+
+  distros[dk] ? hcSearchCategory.apply(null, distros[dk]) : hcSearchCategory("docs");
+  </script>
+
   <script type="text/javascript">
     /*<![CDATA[*/
     $(document).ready(function() {