diff --git a/Gemfile.lock b/Gemfile.lock
index f38a2058c..4b3c20c1c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -15,7 +15,7 @@ GEM
     coffee-script-source (1.11.1)
     colorator (1.1.0)
     commonmarker (0.23.4)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     dnsruby (1.61.9)
       simpleidn (~> 0.1)
     em-websocket (0.5.3)
@@ -23,7 +23,6 @@ GEM
       http_parser.rb (~> 0)
     ethon (0.15.0)
       ffi (>= 1.15.0)
-    eventmachine (1.2.7)
     eventmachine (1.2.7-x64-mingw32)
     execjs (2.8.1)
     faraday (1.10.0)
@@ -49,7 +48,6 @@ GEM
     faraday-patron (1.0.0)
     faraday-rack (1.0.0)
     faraday-retry (1.0.3)
-    ffi (1.15.5)
     ffi (1.15.5-x64-mingw32)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
@@ -104,7 +102,7 @@ GEM
       octokit (~> 4.0)
       public_suffix (>= 3.0, < 5.0)
       typhoeus (~> 1.3)
-    html-pipeline (2.14.0)
+    html-pipeline (2.14.1)
       activesupport (>= 2)
       nokogiri (>= 1.4)
     http_parser.rb (0.8.0)
@@ -227,15 +225,13 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
-    mini_portile2 (2.8.0)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.15.0)
     multipart-post (2.1.1)
-    nokogiri (1.13.3)
-      mini_portile2 (~> 2.8.0)
+    nokogiri (1.13.3-x64-mingw32)
       racc (~> 1.4)
     octokit (4.22.0)
       faraday (>= 0.9)
@@ -273,13 +269,12 @@ GEM
       tzinfo (>= 1.0.0)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.8.1)
+    unf_ext (0.0.8.1-x64-mingw32)
     unicode-display_width (1.8.0)
     wdm (0.1.1)
     zeitwerk (2.5.4)
 
 PLATFORMS
-  ruby
   x64-mingw32
 
 DEPENDENCIES
@@ -290,4 +285,4 @@ DEPENDENCIES
   wdm (>= 0.1.0)
 
 BUNDLED WITH
-   2.3.9
+   2.3.10
diff --git a/_includes/footer.html b/_includes/footer.html
index c8f9ba8a7..162aeb98f 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,9 +1,13 @@
 <footer>
-            <div class="row">
-                <div class="col-lg-12 footer">
-               &copy;{{ site.time | date: "%Y"  }} {{site.company_name}}. All rights reserved. <br />
-{% if page.last_updated %}<span>Page last updated:</span> {{page.last_updated}}<br/>{% endif %} Site last generated: {{ site.time | date: "%b %-d, %Y"  }} <br />
-<p><img src="{{ "/images/company_logo.png" | relative_url }}" width="25%" alt="Microsoft logo"/></p>
-                </div>
+    <div class="container-fluid">
+        <div class="row footer">
+            <div class="col-lg-6 text-left pb-1">
+           &copy;{{ site.time | date: "%Y"  }} {{site.company_name}}. All rights reserved. 
+{% if page.last_updated %}<span>Page last updated:</span> {{page.last_updated}}<br/>{% endif %} Site last generated: {{ site.time | date: "%b %-d, %Y"  }}
             </div>
+            <div class="col-lg-6 text-right">
+                <p><img src="{{ "/images/company_logo.png" | relative_url }}" width="100px" alt="Microsoft logo"/></p>
+            </div>
+        </div>
+    </div>
 </footer>
diff --git a/_includes/releases/pkgrow.md b/_includes/releases/pkgrow.md
index 0b0bb15b3..98a9b085d 100644
--- a/_includes/releases/pkgrow.md
+++ b/_includes/releases/pkgrow.md
@@ -14,8 +14,8 @@
 
     <tr scope="row">
         <td title="{{ item.Package }}">
-            <div>{{ item.DisplayName }} {% if include.type == "all" and item.New == "true" %}<i>(New)</i>{%endif%}</div>
-            <div><small class="text-muted">{{item.Package}}</small></div>
+            <div><strong>{{ item.DisplayName }} {% if include.type == "all" and item.New == "true" %}<i>(New)</i>{%endif%}</strong></div>
+            <div><small>{{item.Package}}</small></div>
             <div>{% include releases/replace.md %}</div>
         </td>
     {% if include.type != "deprecated" %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 9d6b8ca1c..c20a6fc7e 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,6 +1,6 @@
 {% assign sidebar = site.data.sidebars[page.sidebar].entries %}
 
-<ul id="mysidebar" class="nav">
+<div id="mysidebar" class="nav">
 
   <script src="{{ "/js/tipuesearch_content.js" | relative_url }}"></script>
   <script src="{{ "/js/tipuesearch_set.js" | relative_url }}"></script>
@@ -8,57 +8,58 @@
 
 <p>
 <form action="{{folder.url}}/azure-sdk/search.html" >
-    <div class=" tipue_search_left"><img src="{{ "/images/search.png" | relative_url }}" class="tipue_search_icon"></div>
+    <div class=" tipue_search_left"><img src="{{ "/images/search.png" | relative_url }}" alt="Search Icon" class="tipue_search_icon"></div>
     <input type="text" class="form-control tipue_search_right" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" required placeholder="Search website">
 </form>
 </p>
 <div style="clear: both;"></div>
-
-  <li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
-  {% for entry in sidebar %}
-    {% for folder in entry.folders %}
-      {% if page.url == folder.url %}
-      <li class="active">
-      {% else %}
-      <li>
-      {% endif %}
-        {% if folder.url %}
-        <a title="{{folder.title}}" href="{{folder.url | relative_url}}">{{folder.title}}</a>
+  <ol>
+    <li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
+    {% for entry in sidebar %}
+      {% for folder in entry.folders %}
+        {% if page.url == folder.url %}
+        <li class="active">
         {% else %}
-        <a title="{{folder.title}}" href="#">{{folder.title}}</a>
+        <li>
         {% endif %}
-        <ul>
-          {% for folderitem in folder.folderitems %}
-            {% if folderitem.external_url %}
-              <li><a title="{{folderitem.title}}" href="{{folderitem.external_url}}" target="_blank" rel="noopener">{{folderitem.title}}</a></li>
-            {% elsif page.url == folderitem.url %}
-              <li class="active"><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
-            {% elsif folderitem.type == "empty" %}
-              <li><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
-            {% else %}
-              <li><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
-            {% endif %}
-            {% for subfolders in folderitem.subfolders %}
-              <li class="subfolders">
-                <a title="{{subfolders.title}}" href="#">{{ subfolders.title }}</a>
-                <ul>
-                  {% for subfolderitem in subfolders.subfolderitems %}
-                    {% if subfolderitem.external_url %}
-                      <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.external_url}}" target="_blank" rel="noopener">{{subfolderitem.title}}</a></li>
-                    {% elsif page.url == subfolderitem.url %}
-                      <li class="active"><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | relative_url }}">{{subfolderitem.title}}</a></li>
-                    {% else %}
-                      <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | relative_url }}">{{subfolderitem.title}}</a></li>
-                    {% endif %}
-                  {% endfor %}
-                </ul>
-              </li>
+          {% if folder.url %}
+          <a title="{{folder.title}}" href="{{folder.url | relative_url}}">{{folder.title}}</a>
+          {% else %}
+          <a title="{{folder.title}}" href="#">{{folder.title}}</a>
+          {% endif %}
+          <ul>
+            {% for folderitem in folder.folderitems %}
+              {% if folderitem.external_url %}
+                <li><a title="{{folderitem.title}}" href="{{folderitem.external_url}}" target="_blank" rel="noopener">{{folderitem.title}}</a></li>
+              {% elsif page.url == folderitem.url %}
+                <li class="active"><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
+              {% elsif folderitem.type == "empty" %}
+                <li><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
+              {% else %}
+                <li><a title="{{folderitem.title}}" href="{{folderitem.url | relative_url }}">{{folderitem.title}}</a></li>
+              {% endif %}
+              {% for subfolders in folderitem.subfolders %}
+                <li class="subfolders">
+                  <a title="{{subfolders.title}}" href="#">{{ subfolders.title }}</a>
+                  <ul>
+                    {% for subfolderitem in subfolders.subfolderitems %}
+                      {% if subfolderitem.external_url %}
+                        <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.external_url}}" target="_blank" rel="noopener">{{subfolderitem.title}}</a></li>
+                      {% elsif page.url == subfolderitem.url %}
+                        <li class="active"><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | relative_url }}">{{subfolderitem.title}}</a></li>
+                      {% else %}
+                        <li><a title="{{subfolderitem.title}}" href="{{subfolderitem.url | relative_url }}">{{subfolderitem.title}}</a></li>
+                      {% endif %}
+                    {% endfor %}
+                  </ul>
+                </li>
+              {% endfor %}
             {% endfor %}
-          {% endfor %}
-        </ul>
-      </li>
+          </ul>
+        </li>
+      {% endfor %}
     {% endfor %}
-  {% endfor %}
-</ul>
+  </ol>
+</div>
 
 <script>$("li.active").parents('li').toggleClass("active");</script>
diff --git a/_includes/toc.html b/_includes/toc.html
index 067141a6a..e2ac5730e 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -11,7 +11,7 @@ $('#toc').on('click', 'a', function() {
   var target = $(this.getAttribute('href'))
     , scroll_target = target.offset().top
 
-  $(window).scrollTop(scroll_target - 10);
+  $(window).scrollTop(scroll_target - 60);
   return false
 })
   
diff --git a/_includes/topnav.html b/_includes/topnav.html
index 5d2b313aa..fecd43062 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,6 +1,6 @@
 <!-- Navigation -->
-<nav class="navbar navbar-inverse">
-    <div class="container topnavlinks">
+<nav class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                 <span class="sr-only">Toggle navigation</span>
@@ -9,7 +9,7 @@
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="{{ "/releases/latest/index.html" | relative_url }}"/>
-                <span class="projectTitle"><img style="margin-top: -8px;" class="d-inline-block align-top" src="{{ "/images/azure-sdk-glyph.svg" | relative_url }}" width="42" height="42" alt=""/> {{site.topnav_title}}</span>
+                <span class="projectTitle"><img style="margin-top: -8px;" class="d-inline-block align-top" src="{{ "/images/azure-sdk-glyph.svg" | relative_url }}" width="35" height="35" alt=""/> {{site.topnav_title}}</span>
             </a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
@@ -64,13 +64,13 @@
                 {% endif %}
                 <li>
                     {% if page.repository %}
-                        <a style="font-size: 1.666em !important" class="fa fa-github fa-2x" href="https://github.com/{{ page.repository }}"></a>
+                        <a style="font-size: 1.666em !important" class="fa fa-github fa-2x" title="GitHub Link" href="https://github.com/{{ page.repository }}"></a>
                     {% elsif site.repository %}
-                        <a style="font-size: 1.666em !important" class="fa fa-github fa-2x" href="https://github.com/{{ site.repository }}"></a>
+                        <a style="font-size: 1.666em !important" class="fa fa-github fa-2x" title="GitHub Link" href="https://github.com/{{ site.repository }}"></a>
                     {% endif %}
                 </li>
                 <li>
-                    <a style="font-size: 1.666em !important" class="fa fa-twitter fa-2x" href="https://twitter.com/AzureSDK"></a>
+                    <a style="font-size: 1.666em !important" class="fa fa-twitter fa-2x" title="Twitter Link" href="https://twitter.com/AzureSDK"></a>
                 </li>
             </ul>
         </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index fdd3d1f09..7a0d36309 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
     {% include head.html %}
@@ -90,17 +90,17 @@
 <body>
     {% include topnav.html %}
     <!-- Page Content -->
-    <div class="container">
+    <div class="container-fluid" style="margin-top: 60px; min-height: calc(100vh - 50px);">
         <div id="main">
             <!-- Content Row -->
             <div class="row">
                 {% assign content_col_size = "col-md-12" %}
                 {% unless page.hide_sidebar %}
                 <!-- Sidebar Column -->
-                <div class="col-md-3" id="tg-sb-sidebar">
+                <div class="col-md-2 col-xs-12" id="tg-sb-sidebar">
                     {% include sidebar.html %}
                 </div>
-                {% assign content_col_size = "col-md-9" %}
+                {% assign content_col_size = "col-md-10 col-xs-12" %}
                 {% endunless %}
 
                 <!-- Content Column -->
@@ -108,6 +108,7 @@
                     {{content}}
                 </div>
                 <!-- /.row -->
+
             </div>
             <!-- /.container -->
         </div>
@@ -120,5 +121,6 @@
     {% include app_insights.html %}
     {% endif %}
 </body>
-
+{{site.data.alerts.hr_shaded}}
+{% include footer.html %}
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
index a1b4d6550..7794f0026 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,68 +1,66 @@
 ---
 layout: default
 ---
-
-<div class="post-header">
-   <h1 class="post-title-main">{{ page.title }}</h1>
-</div>
-
-{% if page.simple_map == true %}
-
-<script>
-    $(document).ready ( function(){
-        $('.box{{page.box_number}}').addClass('active');
-    });
-</script>
-
-{% include custom/{{page.map_name}}.html %}
-
-{% elsif page.complex_map == true %}
-
-<script>
-    $(document).ready ( function(){
-        $('.modalButton{{page.box_number}}').addClass('active');
-    });
-</script>
-
-{% include custom/{{page.map_name}}.html %}
-
-{% endif %}
-
-<div class="post-content">
-
-   {% if page.summary %}
-    <div class="summary">{{page.summary}}</div>
-   {% endif %}
-
+<div class="row">
     {% unless page.toc == false %}
-    {% include toc.html %}
+    <div class="col-md-2 col-xs-12 content-right pull-right">
+        {% include toc.html %}
+    </div>
     {% endunless %}
 
-
-    {% if site.github_editme_path %}
-
-    <a target="_blank" rel="noopener" href="https://github.com/{{site.github_editme_path}}{{page.path}}" class="btn btn-default githubEditButton" role="button"><i class="fa fa-github fa-lg"></i> Edit me</a>
-
-    {% endif %}
-
-   {{content}}
-
-    <div class="tags">
-        {% if page.tags != null %}
-        <b>Tags: </b>
-        {% assign projectTags = site.data.tags.allowed-tags %}
-        {% for tag in page.tags %}
-        {% if projectTags contains tag %}
-        <a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-default navbar-btn cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
-        {% endif %}
-        {% endfor %}
+    <div class="col-md-10  col-xs-12 content-center pull-left">
+        <div class="post-header">
+        <h1 class="post-title-main">{{ page.title }}</h1>
+        </div>
+        
+        {% if page.simple_map == true %}
+        
+        <script>
+            $(document).ready ( function(){
+                $('.box{{page.box_number}}').addClass('active');
+            });
+        </script>
+        
+        {% include custom/{{page.map_name}}.html %}
+        
+        {% elsif page.complex_map == true %}
+        
+        <script>
+            $(document).ready ( function(){
+                $('.modalButton{{page.box_number}}').addClass('active');
+            });
+        </script>
+        
+        {% include custom/{{page.map_name}}.html %}
+        
         {% endif %}
+        
+        <div class="post-content">
+            {% if page.summary %}
+            <div class="summary">{{page.summary}}</div>
+            {% endif %}
+        
+            {% if site.github_editme_path %}
+        
+            <a target="_blank" rel="noopener" href="https://github.com/{{site.github_editme_path}}{{page.path}}" class="btn btn-default githubEditButton" role="button"><i class="fa fa-github fa-lg"></i> Edit me</a>
+        
+            {% endif %}
+        
+            {{content}}
+        
+            <div class="tags">
+                {% if page.tags != null %}
+                <b>Tags: </b>
+                {% assign projectTags = site.data.tags.allowed-tags %}
+                {% for tag in page.tags %}
+                {% if projectTags contains tag %}
+                <a href="{{ "tag_" | append: tag | append: ".html" }}" class="btn btn-default navbar-btn cursorNorm" role="button">{{page.tagName}}{{tag}}</a>
+                {% endif %}
+                {% endfor %}
+                {% endif %}
+            </div>
+        
+            {% include disqus.html %}
+        </div>
     </div>
-
-{% include disqus.html %}
-
-</div>
-
-{{site.data.alerts.hr_shaded}}
-
-{% include footer.html %}
+</div>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index 1a890b22a..9d770ba14 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,44 +1,45 @@
 ---
 layout: default
 ---
-
-<article class="post" itemscope itemtype="https://schema.org/BlogPosting">
-
-    <header class="post-header">
-        <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
-        <p class="post-meta">
-            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time> 
-<!--
-            {% if page.author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">/ {{ page.author }}</span></span>{% endif %}
-            {% if page.tags != null %}/
-            {% assign projectTags = site.data.tags.allowed-tags %}
-            {% for tag in page.tags %}
-            {% if projectTags contains tag %}
-            <a href="{{ "tag_" | append: tag | append: ".html"}}">{{tag}}</a>{% unless forloop.last %}, {% endunless%}
-            {% endif %}
-            {% endfor %}
-            {% endif %}
--->
-        </p>
-
-
-    </header>
-
-    <div class="post-content" itemprop="articleBody">
-
-        {% if page.summary %}
-        <div class="summary">{{page.summary}}</div>
-        {% endif %}
-
-        {{ content }}
+<div class="row">
+    {% unless page.toc == false %}
+    <div class="col-md-2 col-xs-12 content-right pull-right">
+        {% include toc.html %}
     </div>
+    {% endunless %}
+    <div class="col-md-10  col-xs-12 content-center pull-left">
+        <article class="post" itemscope itemtype="https://schema.org/BlogPosting">
 
-
-
-</article>
-
-{% include disqus.html %}
-
-{{site.data.alerts.hr_shaded}}
-
-{% include footer.html %}
+            <header class="post-header">
+                <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
+                <p class="post-meta">
+                    <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time> 
+        <!--
+                    {% if page.author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">/ {{ page.author }}</span></span>{% endif %}
+                    {% if page.tags != null %}/
+                    {% assign projectTags = site.data.tags.allowed-tags %}
+                    {% for tag in page.tags %}
+                    {% if projectTags contains tag %}
+                    <a href="{{ "tag_" | append: tag | append: ".html"}}">{{tag}}</a>{% unless forloop.last %}, {% endunless%}
+                    {% endif %}
+                    {% endfor %}
+                    {% endif %}
+        -->
+                </p>
+        
+        
+            </header>
+        
+            <div class="post-content" itemprop="articleBody">
+        
+                {% if page.summary %}
+                <div class="summary">{{page.summary}}</div>
+                {% endif %}
+        
+                {{ content }}
+            </div>
+        </article>
+        
+        {% include disqus.html %}
+    </div>
+</div>
diff --git a/css/customstyles.css b/css/customstyles.css
index 3c9f9df4e..59ecfc570 100644
--- a/css/customstyles.css
+++ b/css/customstyles.css
@@ -1,5 +1,8 @@
 body {
-  font-size: 15px;
+  font-size: 16px;
+  font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
+  text-rendering: optimizeLegibility;
+  line-height: 160%
 }
 
 #tg-sb-content {
@@ -96,6 +99,29 @@ body {
   color: #777 !important;
 }
 
+.dropdown-menu:before {
+  position: absolute;
+  top: -6px;
+  right: 6px; /* Example: right:10px; */
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #fff;
+  border-left: 7px solid transparent;
+  content: '';
+}
+
+.dropdown-menu > li > a {
+  margin: 0px !important;
+  border: 0px !important;
+  border-radius: 0px !important;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+
+div.navbar-collapse .dropdown-menu > li > a:hover {
+  background-color: #f5f5f5;
+}
+
 /* make room for the nav bar */
 h1[id]
 .requirement {
@@ -108,7 +134,7 @@ h1[id]
   padding: 10px 15px;
   margin-left: -15px;
   margin-right: -10px;
-  background-color: #ebf3fb;
+  background-color: #f6ffff;
 }
 
 .post-content img {
@@ -173,12 +199,13 @@ table > tfoot > tr > td {
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #ddd;
+  padding-left: 15px;
 }
 table > thead > tr > th {
   vertical-align: bottom;
   border-bottom: 2px solid #ddd;
   text-transform: none;
-  background-color: #777;
+  background-color: #717171;
   color: white;
   text-align: left;
 }
@@ -277,17 +304,29 @@ ul#results-container a:hover {
   margin: 3px;
 }
 
+@media (min-width: 1000px) {
+  #toc {
+    position: fixed;
+    overflow-y: auto;
+    overflow-x: hidden;
+    bottom: 60px;
+    top: 60px;
+    scrollbar-width: thin;
+    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
+    padding-bottom: 10%;
+  }
+}
+
 div#toc ul li {
   margin: 8px 0px 8px 22px;
   font-size: 90%;
   list-style: square;
 }
+
 div#toc ul {
-  background-color: whitesmoke;
-  padding: 5px;
-  border-radius: 5px;
-  max-width: 300px;
   color: gray;
+  padding: 0px;
+  line-height: normal;
 }
 
 div#toc ul li ul {
@@ -309,6 +348,7 @@ div#toc > ul::before {
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 10px;
+  font-size: 1.1em;
 }
 
 li.dropdownActive a {
@@ -319,6 +359,10 @@ li.dropdownActive a {
   color: orange;
 }
 
+.navbar {
+  border-radius: 0px;
+}
+
 .navbar-inverse .navbar-nav > li > a {
   background-color: transparent;
   margin-top: 10px;
@@ -330,6 +374,7 @@ li.dropdownActive a {
 
 footer {
   font-size: smaller;
+  margin: 0px;
 }
 
 /* FAQ page */
@@ -343,6 +388,10 @@ a.accordion-collapsed {
   text-decoration: none;
 }
 
+a {
+  color: #0071c5;
+}
+
 /* navgoco sidebar styles (customized) */
 .nav,
 .nav ul,
@@ -356,17 +405,23 @@ a.accordion-collapsed {
   margin: 0px;
 }
 
+.nav ol {
+  padding: 0;
+  /*margin: 0 0 0 18px;*/
+  margin: 0px;
+}
+
 .nav {
   /* padding: 4px;*/
   padding: 0px;
   margin: 0px;
 }
 
-.nav > li {
+.nav > ol > li {
   margin: 1px 0;
 }
 
-.nav > li li {
+.nav > ol > li li {
   margin: 2px 0;
 }
 
@@ -387,27 +442,29 @@ a.accordion-collapsed {
 }
 
 .nav li > a > span:after {
-  content: "\25be";
+  content: "\002B";
 }
 .nav li.active > a > span:after {
-  content: "\25b4";
+  content: "\2212";
 }
 
-.nav a:hover,
-.nav li.active > a {
-  background-color: #BBB8B8;
-  color: #f5f5f5;
-}
-
-.nav > li.active > a {
-  background-color: #347dbe;
+.nav > ol > li.active > a {
+  border: solid 1px #347dbe;
+  border-radius: 4px;
+  background-color: #f5f5f5;
 }
 
 .nav li a {
   font-size: 12px;
   line-height: 18px;
   padding: 2px 10px;
-  background-color: #bcc9cf;
+  border-radius: 4px;
+}
+
+.nav > ol > li > a {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 10px;
 }
 
 .nav > li > a {
@@ -416,12 +473,13 @@ a.accordion-collapsed {
   padding: 4px 10px;
 }
 
-ul#mysidebar {
+div#mysidebar {
   border-radius: 0px;
 }
 
 .nav ul li ul li a {
-  padding-left: 40px;
+  padding-left: 20px;
+  border: 0px;
 }
 
 .nav li.thirdlevel > a {
@@ -431,21 +489,18 @@ ul#mysidebar {
   background-color: whitesmoke !important;
 }
 
-.nav ul li a {
-  background-color: #fafafa;
-}
-
 .nav li a {
   padding-right: 10px;
 }
 
 .nav li a:hover {
-  background-color: #BBB8B8;
+  background-color: #f5f5f5;
 }
 
 .nav ul li a {
-  border-top: 1px solid whitesmoke;
-  padding-left: 10px;
+  margin-left: 15px;
+  border-left: solid 2px #0071c5;
+  border-radius: 0px;
 }
 /* end sidebar */
 
@@ -466,10 +521,6 @@ span.projectTitle {
   font-weight: bold;
 }
 
-.footer {
-  text-align: right;
-}
-
 .footerMeta {
   background-color: whitesmoke;
   padding: 10px;
@@ -610,7 +661,6 @@ hr.faded {
 hr.shaded {
   height: 12px;
   border: 0;
-  margin-top: 70px;
   background: white;
   width: 100%;
   margin-bottom: 10px;
@@ -659,16 +709,18 @@ a.fa.fa-envelope-o.mailto {
 }
 
 h3 {
-  color: #ed1951;
-  font-weight: normal;
+  color: #333;
+  font-weight: 600;
   font-size: 130%;
 }
+
 h4 {
-  color: #808080;
+  color: #727272;
   font-weight: normal;
   font-size: 120%;
   font-style: italic;
 }
+
 h5 {
   font-weight: bold;
   font-size: 115%;
@@ -759,10 +811,18 @@ button.cursorNorm {
   cursor: pointer;
 }
 
+h1 {
+  font-size: 2.5em;
+  margin: 0.67em 0;
+  font-weight: 600;
+}
+
 h2 {
   font-size: 24px;
   line-height: 29px;
+  font-weight: 600;
 }
+
 span.otherProgrammingLanguages {
   font-style: normal;
 }
@@ -869,6 +929,7 @@ table code {
 
 pre {
   margin: 25px 0px;
+  background-color: #ffffff;
 }
 
 #json-box-container pre {
@@ -979,13 +1040,14 @@ span.soft {
 }
 
 @media (min-width: 1000px) {
-  ul#mysidebar {
-    width: 225px;
+  div#mysidebar {
+    width: 100%;
+    max-width: 14%;
   }
 }
 
 @media (max-width: 900px) {
-  ul#mysidebar {
+  div#mysidebar {
     max-width: 100%;
   }
 }
@@ -1128,7 +1190,7 @@ span.label.label-primary {
 }
 
 a code {
-  color: #248ec2;
+  color: #1c729c;
 }
 
 code + a > code {
@@ -1275,6 +1337,10 @@ h4.panel-title {
   margin-top: 0px;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /*set navbar breakpoint so that it converts to hamburger earlier */
 
 @media (max-width: 1200px) {
@@ -1326,8 +1392,8 @@ h4.panel-title {
 }
 
 .btn-preview {
-  background-color: #a9a9a9;
-  border-color: #a9a9a9;
+  background-color: #737373;
+  border-color: #737373;
   /*
   align-items: center;
   display: flex;
@@ -1359,6 +1425,10 @@ h4.panel-title {
   padding: 7px;
 }
 
+.navbar-nav > li > .dropdown-menu {
+  border-radius: 4px;
+}
+
 .nav-language-filter {
   background-color: #F9F9F9;
   border: 1px solid #dedede;
@@ -1408,23 +1478,24 @@ pre code {
   background-color: #F9F9F9;
 }
 
+.standard-verbs-table-cell-verb p {
+  padding-left: 15px;
+}
+
 .standard-verbs-table-cell-verb {
-  color: rgb(221, 73, 110);
+  color: #c64162;
   font-family: monospace, monospace;
   font-size: 1em;
+  flex: 2;
 }
 
 .standard-verbs-table-cell-header {
-  background-color: #777;
+  background-color: #717171;
   border-bottom: 2px solid #ddd;
   color: white;
   font-weight: bold;
 }
 
-.standard-verbs-table-cell-verb {
-  flex: 2;
-}
-
 .standard-verbs-table-cell-comments {
   flex: 3;
 }
@@ -1471,3 +1542,39 @@ pre code {
   display: flex;
   margin-bottom: 2rem;
 }
+
+.content-center {
+  border-left: solid 1px #f5f5f5;
+  border-right: solid 1px #f5f5f5;
+  padding-left: 65px;
+  padding-right: 65px;
+}
+
+:target::before {
+  content: "";
+  display: block;
+  height: 65px;
+  margin: -65px 0 0;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 20px;
+  border: transparent;
+}
+
+#myTable > tr > td {
+  vertical-align: middle;
+  padding: 10px 20px;
+}
+
+#myTable > tr > th {
+  vertical-align: middle;
+  padding: 10px 20px;
+}
\ No newline at end of file
diff --git a/css/syntax.css b/css/syntax.css
index 1e651cf79..cd91200c6 100644
--- a/css/syntax.css
+++ b/css/syntax.css
@@ -1,11 +1,11 @@
 .highlight  { background: #ffffff; }
-.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .c { color: #747467; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */
 .highlight .o { font-weight: bold } /* Operator */
-.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cm { color: #747467; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #747474; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #008922; font-style: italic } /* Comment.Single */
 .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
 .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
 .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
@@ -24,10 +24,10 @@
 .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
 .highlight .kr { font-weight: bold } /* Keyword.Reserved */
 .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .m { color: #008282 } /* Literal.Number */
 .highlight .s { color: #d14 } /* Literal.String */
 .highlight .na { color: #008080 } /* Name.Attribute */
-.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nb { color: #007faa } /* Name.Builtin */
 .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
 .highlight .no { color: #008080 } /* Name.Constant */
 .highlight .ni { color: #800080 } /* Name.Entity */
@@ -40,7 +40,7 @@
 .highlight .w { color: #bbbbbb } /* Text.Whitespace */
 .highlight .mf { color: #009999 } /* Literal.Number.Float */
 .highlight .mh { color: #009999 } /* Literal.Number.Hex */
-.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mi { color: #008282 } /* Literal.Number.Integer */
 .highlight .mo { color: #009999 } /* Literal.Number.Oct */
 .highlight .sb { color: #d14 } /* Literal.String.Backtick */
 .highlight .sc { color: #d14 } /* Literal.String.Char */
@@ -53,7 +53,7 @@
 .highlight .sr { color: #009926 } /* Literal.String.Regex */
 .highlight .s1 { color: #d14 } /* Literal.String.Single */
 .highlight .ss { color: #990073 } /* Literal.String.Symbol */
-.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .bp { color: #747474 } /* Name.Builtin.Pseudo */
 .highlight .vc { color: #008080 } /* Name.Variable.Class */
 .highlight .vg { color: #008080 } /* Name.Variable.Global */
 .highlight .vi { color: #008080 } /* Name.Variable.Instance */
diff --git a/images/company_logo.png b/images/company_logo.png
index d5ce22375..07158247e 100644
Binary files a/images/company_logo.png and b/images/company_logo.png differ