diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 347fd470d6..292589023c 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -1,465 +1,467 @@
 /*
  * Copyright (c) 2001-2021, The FreeBSD Documentation Project
  * Copyright (c) 2021, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
  * ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
  * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
  * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
  * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
  * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
  * SUCH DAMAGE.
  *
  */
 
 .articles-books-list {
   list-style: none;
   padding-left: 10px;
 
   li {
 
     a {
       text-decoration: none;
       font-weight: bolder;
       color: var(--global-font);
     }
 
     p {
       margin-top: 0px;
     }
   }
 
 }
 
 .main-wrapper-article {
   display: flex;
   margin-top: var(--header-height);
 
   .article {
     flex-grow: 1;
     padding: var(--documentation-padding);
     width: 90vw;
     width: clamp(16rem, 90vw, 70rem);
     min-width: 20rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     transition: .2s ease-in-out;
   }
 
   .article-toc {
     flex: 0 0 16rem;
     font-size: .75rem;
 
     .article-toc-content {
       width: 16rem;
       position: sticky;
       top: var(--header-height);
       bottom: 0;
       overflow-x: hidden;
       overflow-y: auto;
       transition: .2s ease-in-out;
 
       h3 {
         border-bottom: none;
       }
 
       #TableOfContents {
         overflow-y: auto;
         position: sticky;
         overflow: auto;
         max-height: calc(90vh);
       }
 
       #TableOfContents, .resources {
         ul {
           list-style: none;
           margin: 0;
           padding: 0;
 
           li {
             margin: 0;
 
             a {
               color: var(--global-font-color);
               display: inline-block;
               padding: .25rem 0 .25rem .5rem;
               text-decoration: none;
               border-left: 1px solid var(--lines-color);
 
               &:hover {
                 font-weight: bolder;
               }
             }
           }
         }
       }
 
       .resources {
         .contents {
           i {
             margin-right: 5px;
           }
         }
       }
     }
   }
 
   .toc-mobile {
     h3 {
       border-bottom: none;
     }
 
     #TableOfContents, .resources {
       ul {
         list-style: none;
         margin: 0;
         padding: 0;
 
         li {
           margin: 0;
 
           a {
             color: var(--global-font-color);
             display: inline-block;
             padding: .25rem 0 .25rem .5rem;
             text-decoration: none;
             border-left: 1px solid var(--lines-color);
 
             &:hover {
               font-weight: bolder;
             }
           }
 
         }
       }
     }
   }
 }
 
 .main-wrapper-book {
   display: flex;
   margin-top: var(--header-height);
 
+  .book-menu {
+    flex: 0 0 16rem;
+    font-size: .75rem;
+    background-color: var(--global-background-color);
+
+    .book-menu-content {
+      width: 16rem;
+      position: sticky;
+      top: var(--header-height);
+      bottom: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      background-color: var(--global-background-color);
+      transition: .2s ease-in-out;
+
+      h3 {
+        margin: 1rem 0;
+        border-bottom: none;
+        padding-left: .5rem;
+      }
+
+      input.toggle ~ .icon::after {
+        display: inline-block;
+        font: 1rem FontAwesome;
+        text-rendering: auto;
+        content: "\f105";
+      }
+
+      input.toggle:checked ~ .icon::after {
+        display: inline-block;
+        font: 1rem FontAwesome;
+        text-rendering: auto;
+        content: "\f107";
+      }
+
+      input.toggle ~ ul {
+        display:none
+      }
+
+      input.toggle:checked ~ ul {
+        display:block
+      }
+
+      #MenuContents {
+        position: sticky;
+        overflow: auto;
+        max-height: calc(90vh);
+
+        ul {
+          margin: 0 0 0 .75rem;
+          padding: 0;
+
+          li {
+            list-style: none;
+            margin: 0;
+
+            label {
+              position: absolute;
+              cursor: pointer;
+            }
+
+            a {
+              color: var(--global-font-color);
+              display: block;
+              padding-left: 1rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .book {
     flex-grow: 1;
     padding: var(--documentation-padding);
     width: 90vw;
     min-width: 20rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     transition-duration: 0.2s;
     background-color: var(--global-background-color);
 
+    h1 {
+      margin: .8rem 0;
+    }
+
     .book-menu-mobile {
       margin-top: 10px;
 
       .menu-control-button {
         border-radius: 2px;
         cursor: pointer;
         font-weight: 500;
         padding: 5px;
         border: 1px solid var(--lines-color);
       }
     }
 
     .buttons {
       display: flex;
 
       .prev, .next {
         display: flex;
         flex-direction: row;
         align-items: center;
 
         i {
           padding: 1rem;
         }
       }
 
       .next {
         margin-left: auto;
       }
 
       .container {
         display: flex;
         flex-direction: column;
 
         .direction {
           font-weight: bolder;
         }
       }
     }
 
   }
 
   .book-toc {
     flex: 0 0 16rem;
     font-size: .75rem;
     background-color: var(--global-background-color);
 
     .book-toc-content {
       width: 16rem;
       position: sticky;
       top: var(--header-height);
       bottom: 0;
       overflow-x: hidden;
       overflow-y: auto;
       transition: .2s ease-in-out;
 
       h3 {
         border-bottom: none;
+        margin: 1rem 0;
       }
 
       #TableOfContents {
         position: sticky;
         overflow: auto;
         max-height: calc(90vh);
-      }
-
-      #TableOfContents, .resources {
+  
         ul {
-          list-style: none;
           margin: 0;
           padding: 0;
 
           li {
             margin: 0;
+            list-style: none;
 
             a {
               color: var(--global-font-color);
               display: inline-block;
               padding: .25rem 0 .25rem .5rem;
+              margin-left: .5rem;
               text-decoration: none;
-              border-left: 1px solid var(--lines-color);
+
+              i {
+                margin-right: .5rem;
+              }
 
               &:hover {
-                font-weight: bolder;
+                font-weight: 500;
               }
             }
 
           }
         }
       }
 
       .resources {
-        .contents {
-          i {
-            margin-right: 5px;
-          }
+        h3 {
+          margin: 1rem 0;
         }
-      }
-    }
-  }
-
-  .book-menu input.toggle+label+ul {
-    display:none
-  }
-  .book-menu input.toggle:checked+label+ul {
-    display:block
-  }
-
-  .book-menu {
-    flex: 0 0 16rem;
-    font-size: .75rem;
-    background-color: var(--global-background-color);
-
-    .book-menu-content {
-      width: 16rem;
-      position: sticky;
-      top: var(--header-height);
-      bottom: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      background-color: var(--global-background-color);
-      transition: .2s ease-in-out;
-
-      h3 {
-        border-bottom: none;
-        padding-left: .5rem;
-      }
-
-      input.toggle + .icon::after {
-        display: flex;
-        align-items: center;
-        font: 1rem FontAwesome;
-        text-rendering: auto;
-        content: "\f105";
-      }
-
-      input.toggle:checked + .icon::after {
-        display: flex;
-        align-items: center;
-        font: 1rem FontAwesome;
-        text-rendering: auto;
-        content: "\f107";
-      }
-
-      #MenuContents {
-        position: sticky;
-        overflow: auto;
-        max-height: calc(90vh);
 
         ul {
-          list-style: none;
           margin: 0;
           padding: 0;
-          padding-right: 10px;
 
           li {
+            list-style: none;
             margin: 0;
 
-            label {
-              display: flex;
-              justify-content: space-between;
-              cursor: pointer;
-            }
-
             a {
               color: var(--global-font-color);
-              display: flex;
-              width: 90%;
+              display: inline-block;
               padding: .25rem 0 .25rem .5rem;
-              text-decoration: none;
-              border-left: 1px solid var(--lines-color);
-              font-weight: bolder;
             }
 
-            ul {
-              li {
-                padding-left: 10px;
-
-                a {
-                  font-weight: normal;
-                  border-left: 3px solid var(--lines-color);
-                }
-              }
-
+            i {
+              margin-left: 1rem;
             }
 
           }
         }
       }
     }
   }
 
   .toc-mobile {
     h3 {
       border-bottom: none;
     }
 
     #TableOfContents, .resources {
       ul {
         list-style: none;
         margin: 0;
         padding: 0;
 
         li {
           margin: 0;
 
           a {
             color: var(--global-font-color);
             display: inline-block;
             padding: .25rem 0 .25rem .5rem;
             text-decoration: none;
             border-left: 1px solid var(--lines-color);
 
             &:hover {
               font-weight: bolder;
             }
           }
 
         }
       }
     }
   }
 
 }
 
 .hidden {
   display: none;
 }
 
 input.toggle {
   height: 0;
   width: 0;
   overflow: hidden;
   opacity: 0;
   position: absolute;
 }
 
 @media (max-width: 55em) {
   .article-toc {
     display: none;
   }
 
   .book-toc {
     display: none;
   }
 
   #menu-control {
     display: inline;
   }
 
   .book-menu {
     visibility: hidden;
     margin-inline-start: -16rem;
     z-index: 1;
   }
 
-  #menu-control:focus ~ main label[for="menu-control"] {
-    outline-style: auto;
-    outline-color: currentColor;
-  }
-
   #menu-control:checked ~ main {
     .book-menu {
       visibility: initial;
     }
 
     .book-menu .book-menu-content {
       transform: translateX(16rem);
       box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
     }
 
     .book {
       opacity: 0.25;
     }
 
     .book-menu-overlay {
       display: block;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
     }
   }
 
 }
 
 @media (min-width: 55em) {
   .toc-mobile {
     display: none;
   }
   .book-menu-mobile {
     display: none;
   }
 
 }
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index 72d1919a12..7446ec9fa6 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/documentation/themes/beastie/assets/styles/global.scss
@@ -1,711 +1,717 @@
 /*
  * Copyright (c) 2001-2021, The FreeBSD Documentation Project
  * Copyright (c) 2021, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
  * ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
  * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
  * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
  * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
  * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
  * SUCH DAMAGE.
  *
  */
 
 html {
   font-family: 'Inter', sans-serif;
   scroll-padding-top: var(--header-height);
   scroll-behavior: smooth;
 }
 
 @supports (font-variation-settings: normal) {
   html {
     font-family: 'Inter var', sans-serif;
   }
 }
 
+@supports (scrollbar-width:thin) {
+  body * {
+    scrollbar-width: thin;
+    scrollbar-color: #D9D9D9 transparent;
+  }
+}
+
 html, body {
   text-rendering: optimizeLegibility;
   line-height: calc(1ex / 0.32);
 }
 
 body {
   display: flex;
   flex-direction: column;
   color: var(--global-font-color);
   padding: 0;
   margin: 0;
   font-size: 16px;
   font-weight: 400;
   font-style: normal;
   cursor: auto;
-  scrollbar-width: thin;
   background-color: var(--global-background-color);
 }
 
 /* Main */
 .main-wrapper {
   display: flex;
   flex-direction: column;
   padding: 0rem 2rem 2rem 2rem;
   margin-top: var(--header-height);
   transition: padding .15s;
   background-color: var(--global-background-color);
 
   .welcome-container {
     display: flex;
     width: 100%;
     margin-top: 2.5rem;
     text-align: center;
     align-items: center;
     flex-direction: column;
 
     .title-language-container {
       display: flex;
       width: 100%;
       justify-content: center;
 
       h2 {
         margin: 0;
         border-bottom: 0px;
         margin-left: auto;
       }
 
       a {
         margin-left: auto;
 
         img {
           display: inline-flex;
           padding-right: 10px;
           align-items: center;
           justify-content: center;
           height: 1.5rem;
           width: 1.5rem;
         }
       }
     }
 
     form {
       display: flex;
       width: 100%;
       background-color: var(--global-background-color);
       justify-content: center;
 
       input {
         display: block;
         width: 50%;
         padding: 10px 20px;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-shadow: inset 0 1px 3px #ddd;
         box-sizing: border-box;
       }
     }
   }
 
   .cards-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     margin-top: 3rem;
     margin-bottom: 3rem;
 
     .row {
       display: flex;
       flex-direction: row;
       justify-content: center;
       width: 100%;
       margin-bottom: 2rem;
 
       .card {
         display: flex;
         flex: 280px 0;
         margin-left: 16px;
         padding: 24px;
         border: 1px solid var(--card-border-color);
         background-color: var(--card-background-color);
 
         a {
           display: flex;
           flex-direction: column;
           text-decoration: none;
 
           h5 {
             color: var(--global-font-color);
             font-weight: 700;
             font-size: 22px;
             margin: 0px 0px 8px 0px;
             border-bottom: 0px;
           }
 
           p {
             color: var(--global-font-color);
             font-size: 18px;
             margin: 0px;
             margin-top: auto;
             text-align: inherit;
           }
         }
       }
     }
   }
 }
 
 ul.language-list {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
 
   li {
     flex: 1 0 25%;
     list-style-type: none;
     max-width: 25%;
 
     a {
       cursor: pointer;
       color: var(--global-font-color);
     }
   }
 
   .selected {
     font-weight: bolder;
   }
 }
 
 @media (max-width: 55em) {
   .main-wrapper {
     padding: 0rem 1rem 2rem 1rem;
 
     .welcome-container {
       margin-bottom: 2.5rem;
 
       form {
         input {
           width: 100%;
           background-color: var(--white);
         }
       }
 
     }
 
     .cards-container {
       display: block;
       width: 100%;
       margin: 0;
       padding: 0;
 
       .row {
         display: block;
         width: 100%;
 
         .card {
           display: block;
           width: 100%;
           margin: 0px;
           margin-bottom: 2rem;
           padding: 0px;
 
           a {
             display: flex;
             padding: 20px;
             min-height: 100px;
           }
         }
       }
     }
   }
 
 }
 
 @media (min-width: 1200px) {
   .main-wrapper {
     .cards-container {
       .row {
         .card {
           width: 33.3%;
         }
       }
     }
   }
 }
 
 @media (min-width: 768px) {
   .main-wrapper {
     .cards-container {
       .row {
         .card {
           width: 50%;
         }
       }
     }
   }
 }
 
 .abstract-title {
   font-size: 24px;
   font-weight: 700;
 }
 
 h1,
 h2,
 h3,
 h4 {
   line-height: 1.3;
 }
 
 h1,
 h2 {
   font-weight: 900;
 }
 
 h1 {
   font-size: var(--size-750);
 }
 
 h2 {
   font-size: var(--size-600);
 }
 
 h3 {
   font-size: var(--size-550);
 }
 
 h4 {
   font-size: var(--size-500);
 }
 
 h5 {
   font-size: var(--size-400);
 }
 
 h6 {
   font-size: var(--size-300);
 }
 
 h2,
 h3,
 h4,
 h5,
 h6 {
   border-bottom: 1px solid var(--lines-color);
 }
 
 h1 .anchor,
 h2 .anchor,
 h3 .anchor,
 h4 .anchor,
 h5 .anchor,
 h6 .anchor,
 h1 .link,
 h2 .link,
 h3 .link,
 h4 .link,
 h5 .link,
 h6 .link {
   text-decoration: none !important;
   color: var(--global-font-color);
 }
 
 h1 .anchor,
 h2 .anchor,
 h3 .anchor,
 h4 .anchor,
 h5 .anchor,
 h6 .anchor {
   visibility: hidden;
   font-weight: normal;
   margin-right: 5px;
 }
 
 h1 .anchor::before,
 h2 .anchor::before,
 h3 .anchor::before,
 h4 .anchor::before,
 h5 .anchor::before,
 h6 .anchor::before {
   content: "\00a7";
 }
 
 h1:hover .anchor,
 h2:hover .anchor,
 h3:hover .anchor,
 h4:hover .anchor,
 h5:hover .anchor,
 h6:hover .anchor {
   visibility: visible;
   font-weight: normal;
   margin-right: 5px;
 }
 
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
   border-top: 1px solid var(--lines-color);
 }
 
 a {
   text-decoration: none;
   color: var(--links-color);
 
   &:hover {
     text-decoration: underline;
   }
 
 }
 
 img {
   max-width: 100%;
 }
 
 .imageblock {
   .title {
     margin-top: .5rem;
     padding-bottom: 0;
     font-weight: bolder;
     font-style: italic;
   }
 }
 
 figcaption {
   font-size: var(--size-300);
   font-style: italic;
   margin-top: 1rem;
 }
 
 pre {
   border-radius: 0.25rem;
   font-family: monospace;
   background-color: var(--pre-background-color);
   font-size: 1rem;
   color: var(--pre-font-color);
   line-height: 1.4;
   margin: 0 0 24px;
   overflow: auto !important;
   padding: 1rem;
   margin: 0;
 }
 
 p {
   text-justify: inter-word;
 }
 
 b, dt, strong, th {
   font-weight: bolder;
 }
 
 dt {
   font-style: italic;
 }
 
 blockquote {
   padding-left: var(--size-600);
   border-left: 5px solid;
   font-style: italic;
 }
 
 .literalblock {
   margin: .75em 0;
   overflow: auto;
 
   .content {
     overflow: auto;
   }
 }
 
 /* callouts */
 .conum {
   display: inline-block;
   color: #FFF !important;
   background-color: #000;
   border-radius: 100px;
   text-align: center;
   font-size: .75em;
   width: 1.67em;
   height: 1.67em;
   font-style: normal;
   font-weight: bold;
 }
 
 .conum[data-value] {
   color: #FFF !important;
   text-align: center;
   font-size: .75em;
   line-height: 1.67em;
   font-style: normal;
   font-weight: bold;
 }
 
 .conum[data-value]::after {
   content: attr(data-value);
 }
 
 .colist td {
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .colist tr td b, .programlisting b {
   display: none;
 }
 
 .rouge b {
   display: none;
 }
 
 /* Tables */
 table {
   caption {
     text-rendering: optimizeLegibility;
     text-align: left;
     font-weight: bolder;
     font-size: 1rem;
   }
 }
 
 table.tableblock {
   display: block;
   margin: auto;
   margin-bottom: 1.25em;
   max-width: 100%;
   border-collapse: collapse;
   overflow-x: auto;
 
   th {
     text-align: left;
     background-color: var(--table-header-background-color);
     text-rendering: optimizeLegibility;
     padding: .5em .625em .625em;
     border: 0 solid #DEDEDE;
     border-width: 0 1px 1px 0;
   }
 
   td {
     text-align: left;
     border: 0 solid #DEDEDE;
     text-rendering: optimizeLegibility;
     line-height: 1.6;
     padding: .5em .625em .625em;
     font-size: inherit;
     border-width: 0 1px 1px 0;
   }
 
   td.icon {
     border: none;
   }
 
   td:first-of-type, th:first-of-type {
     border-left: none;
   }
 
   td:last-of-type, th:last-of-type {
     border-right: none;
   }
 }
 
 table.stretch {
   width: 100%;
 }
 
 /* Admonitions */
 .admonitionblock {
   margin: 1.4rem 0;
   padding: 1rem;
   color: var(--admonition-font-color);
 
   table {
     table-layout: fixed;
     position: relative;
     width: 100%;
 
     tbody {
       tr {
         td.icon {
           position: absolute;
           top: 0;
           left: 0;
           line-height: 1;
           padding-bottom: .5rem;
 
           i {
             display: inline-flex;
             align-items: center;
             width: auto;
             background-position-x: .5em;
             vertical-align: initial;
 
             &:after {
               content: attr(title);
               font-weight: bolder;
               padding: 0 .5em;
               margin: -.05em;
             }
           }
 
           .icon-note::before {
             content:"\f05a";
             color: var(--admonition-note-color);
           }
 
           .icon-tip::before {
             content:"\f0eb";
             color: var(--admonition-tip-color)
           }
 
           .icon-warning::before {
             content:"\f071";
             color: var(--admonition-warning-color);
           }
 
           .icon-caution::before {
             content:"\f06d";
             color: var(--admonition-caution-color);
           }
 
           .icon-important::before {
             content:"\f06a";
             color: var(--admonition-important-color);
           }
         }
 
         td.icon [class^="fa icon-"] {
           font-size: 1.2rem;
           cursor: default;
         }
 
         td.content {
           width: 100%;
           word-wrap: anywhere;
 
           .paragraph {
             padding-top: .5rem;
           }
         }
       }
     }
   }
 }
 
 .note {
   border-left: 5px solid var(--admonition-note-color);
   background-color: var(--admonition-note-background-color);
 }
 
 .warning {
   border-left: 5px solid var(--admonition-warning-color);
   background-color: var(--admonition-warning-background-color);
 }
 
 .important {
   border-left: 5px solid var(--admonition-important-color);
   background-color: var(--admonition-important-background-color);
 }
 
 .caution {
   border-left: 5px solid var(--admonition-caution-color);
   background-color: var(--admonition-caution-background-color);
 }
 
 .tip {
   border-left: 5px solid var(--admonition-tip-color);
   background-color: var(--admonition-tip-background-color);
 }
 
 /* Example */
 .example, .exampleblock {
   border-left: 5px solid var(--example-block-color);
   padding: 1rem;
   background-color: var(--example-block-background-color);
 }
 
 .exampleblock {
   margin: .75rem 0;
 
   .title {
     font-weight: bolder;
   }
 
   .content {
     .literalblock {
       .content{
         background: #fefde6 !important;
         border: none !important;
       }
     }
   }
 }
 
 .procedure {
   border-left: 5px solid #B3B3B3;
   padding: 1rem;
   margin-bottom: 1.4rem;
 }
 
 /* Misc */
 .listingblock {
   margin: .75em 0;
 }
 
 code {
   font-family: "DejaVu Sans Mono", monospace;
   font-size: 0.75rem;
 }
 
 .filename {
   font-weight: bolder;
 }
 
 details {
   summary {
     cursor: pointer;
   }
 }
 
 kbd {
   font-family: "DejaVu Sans", "DejaVu Sans Bold";
   display: inline-block;
   color: rgba(0,0,0,.8);
   font-size: .65em;
   line-height: 1.45;
   background-color: #F7F7F7;
   border: 1px solid #ccc;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #FFF inset;
   margin: 0 .15em;
   padding: .2em .5em;
   vertical-align: middle;
   position: relative;
   top: -.1em;
   white-space: nowrap;
 }
 
 .to-top {
   opacity: 1;
   visibility: visible;
   transition: .2s;
   position: fixed;
   bottom: 1.2rem;
   right: 1.5rem;
   z-index: 15;
   text-decoration: none;
 
   i {
     font-size: 2rem;
     color: var(--global-font-color);
   }
 }
diff --git a/documentation/themes/beastie/layouts/books/list.html b/documentation/themes/beastie/layouts/books/list.html
index 251a7a625e..8694ff66ac 100644
--- a/documentation/themes/beastie/layouts/books/list.html
+++ b/documentation/themes/beastie/layouts/books/list.html
@@ -1,97 +1,97 @@
 {{ define "main" }}
 <input type="checkbox" class="hidden toggle" id="menu-control">
 <main class="main-wrapper-book">
   <a id="top"></a>
   {{ if eq .Params.showBookMenu true }}
   <aside class="book-menu">
     <div class="book-menu-content">
       <h3>{{ i18n "book-chapters" }}</h3>
       <nav id="MenuContents">
         {{ partial "menu" . }}
       </nav>
     </div>
   </aside>
   {{ end }}
   <div class="book">
     <div class="book-menu-mobile">
       <label for="menu-control">
         <span class="menu-control-button">
           <i class="fa fa-list" aria-hidden="true"></i>
           {{ i18n "book-menu" }}
         </span>
       </label>
     </div>
     <h1 class="title">{{ .Title }}</h1>
     {{ if .Params.subtitle }}
       <h3 class="subtitle">{{ .Params.subtitle }}</h3>
     {{ end }}
     <div>
     </div>
     {{ if .Params.copyright }}
       <div class="copyright">
         Copyright © {{ .Params.copyright }}
       </div>
     {{ end}}
     {{ if isset .Params "trademarks" }}
       {{ partial "trademarks" .Params.trademarks }}
     {{ end }}
     <div>
     </div>
     <div class="toc-mobile">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
     </div>
     {{ if .Params.add_split_page_link }}
     <div>
       [ <a href="../">{{ i18n "split-html" }}</a> / {{ i18n "single-html" }} ]
     </div>
     {{ end }}
     {{ if .Params.add_single_page_link }}
     <div>
       [ {{ i18n "split-html" }} / <a href="book/">{{ i18n "single-html" }}</a> ]
     </div>
     {{ end }}
     <div class="book-content">
       {{ .Content }}
     </div>
     <hr />
     <div class="buttons">
       {{ if .Params.prev }}
       <div class="prev">
         <i class="fa fa-angle-left" aria-hidden="true"></i>
         <div class="container">
           <a href={{ .Params.Prev | absLangURL }} class="direction">{{ i18n "prev" }}</a>
         </div>
       </div>
       {{ end }}
       {{ if .Params.next }}
       <div class="next">
         <div class="container">
           <a href={{ .Params.Next | absLangURL }}  class="direction">{{ i18n "next" }}</a>
         </div>
         <i class="fa fa-angle-right" aria-hidden="true"></i>
       </div>
       {{ end }}
     </div>
     <label class="hidden book-menu-overlay" for="menu-control"></label>
   </div>
   <aside class="book-toc">
     <div class="book-toc-content">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
       <hr />
       <div class="resources">
         <h3>{{ i18n "resources" }}</h3>
         <ul class="contents">
           <!--<li><a href="#"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>{{ i18n "download-pdf" }}</a></li>-->
           {{ $editUrl := printf "%s%s/%s" $.Site.Params.editBaseUrl $.Site.Home.Language .Page.File }}
-          <li><a href="{{ $editUrl }}" target="_blank"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>{{ i18n "edit-page" }}</a></li>
+          <li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="{{ $editUrl }}" target="_blank">{{ i18n "edit-page" }}</a></li>
         </ul>
       </div>
     </div>
   </aside>
   <a class="to-top" href="#top">
     <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
   </a>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/books/single.html b/documentation/themes/beastie/layouts/books/single.html
index 251a7a625e..8694ff66ac 100644
--- a/documentation/themes/beastie/layouts/books/single.html
+++ b/documentation/themes/beastie/layouts/books/single.html
@@ -1,97 +1,97 @@
 {{ define "main" }}
 <input type="checkbox" class="hidden toggle" id="menu-control">
 <main class="main-wrapper-book">
   <a id="top"></a>
   {{ if eq .Params.showBookMenu true }}
   <aside class="book-menu">
     <div class="book-menu-content">
       <h3>{{ i18n "book-chapters" }}</h3>
       <nav id="MenuContents">
         {{ partial "menu" . }}
       </nav>
     </div>
   </aside>
   {{ end }}
   <div class="book">
     <div class="book-menu-mobile">
       <label for="menu-control">
         <span class="menu-control-button">
           <i class="fa fa-list" aria-hidden="true"></i>
           {{ i18n "book-menu" }}
         </span>
       </label>
     </div>
     <h1 class="title">{{ .Title }}</h1>
     {{ if .Params.subtitle }}
       <h3 class="subtitle">{{ .Params.subtitle }}</h3>
     {{ end }}
     <div>
     </div>
     {{ if .Params.copyright }}
       <div class="copyright">
         Copyright © {{ .Params.copyright }}
       </div>
     {{ end}}
     {{ if isset .Params "trademarks" }}
       {{ partial "trademarks" .Params.trademarks }}
     {{ end }}
     <div>
     </div>
     <div class="toc-mobile">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
     </div>
     {{ if .Params.add_split_page_link }}
     <div>
       [ <a href="../">{{ i18n "split-html" }}</a> / {{ i18n "single-html" }} ]
     </div>
     {{ end }}
     {{ if .Params.add_single_page_link }}
     <div>
       [ {{ i18n "split-html" }} / <a href="book/">{{ i18n "single-html" }}</a> ]
     </div>
     {{ end }}
     <div class="book-content">
       {{ .Content }}
     </div>
     <hr />
     <div class="buttons">
       {{ if .Params.prev }}
       <div class="prev">
         <i class="fa fa-angle-left" aria-hidden="true"></i>
         <div class="container">
           <a href={{ .Params.Prev | absLangURL }} class="direction">{{ i18n "prev" }}</a>
         </div>
       </div>
       {{ end }}
       {{ if .Params.next }}
       <div class="next">
         <div class="container">
           <a href={{ .Params.Next | absLangURL }}  class="direction">{{ i18n "next" }}</a>
         </div>
         <i class="fa fa-angle-right" aria-hidden="true"></i>
       </div>
       {{ end }}
     </div>
     <label class="hidden book-menu-overlay" for="menu-control"></label>
   </div>
   <aside class="book-toc">
     <div class="book-toc-content">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
       <hr />
       <div class="resources">
         <h3>{{ i18n "resources" }}</h3>
         <ul class="contents">
           <!--<li><a href="#"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>{{ i18n "download-pdf" }}</a></li>-->
           {{ $editUrl := printf "%s%s/%s" $.Site.Params.editBaseUrl $.Site.Home.Language .Page.File }}
-          <li><a href="{{ $editUrl }}" target="_blank"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>{{ i18n "edit-page" }}</a></li>
+          <li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="{{ $editUrl }}" target="_blank">{{ i18n "edit-page" }}</a></li>
         </ul>
       </div>
     </div>
   </aside>
   <a class="to-top" href="#top">
     <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
   </a>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/partials/menu.html b/documentation/themes/beastie/layouts/partials/menu.html
index 4c4261ef52..1d118e85e4 100644
--- a/documentation/themes/beastie/layouts/partials/menu.html
+++ b/documentation/themes/beastie/layouts/partials/menu.html
@@ -1,25 +1,24 @@
 {{ with .Site.GetPage .Params.path }}
   <ul>
     {{ range .Pages }}
       <li>
         {{ if ne .Page.File.LogicalName "book.adoc" }}
 
           {{ $finalPath := printf "%s%s" .Page.Permalink "#" }}
           {{ $toc := htmlUnescape .Page.TableOfContents }}
           {{ $toc = replace $toc "<nav id=\"TableOfContents\">" "" }}
           {{ $toc = replace $toc "</nav>" "" }}
 
           <input type="checkbox" id="chapter-{{ md5 .Page }}" class="toggle" {{ if eq .Page.Permalink $.Permalink }} checked {{ end }} />
-          <label {{ if gt (len $toc) 0 }} class="icon" {{ end }} for="chapter-{{ md5 .Page }}">
-            <a {{ if eq (len $toc) 0 }} href="{{ .Page.Permalink }}" {{ else }} role="button" {{ end }} class="cursor" >
-              <span>{{ .Page.Title }}</span>
-            </a>
-          </label>
+          <label {{ if gt (len $toc) 0 }} class="icon cursor" {{ end }} for="chapter-{{ md5 .Page }}"><a role="button"></a></label>
+          <a href="{{ .Page.Permalink }}">
+            {{ .Page.Title }}
+          </a>
 
           {{ $toc = replace $toc "#" $finalPath }}
           {{ $toc | safeHTML }}
         {{ end }}
       </li>
     {{ end }}
   </ul>
 {{ end }}