diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 292589023c..b537252b4f 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -1,467 +1,369 @@
 /*
  * 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);
+
+        i {
+          padding-right: 5px;
+        }
       }
     }
 
     .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);
-  
-        ul {
-          margin: 0;
-          padding: 0;
-
-          li {
-            margin: 0;
-            list-style: none;
+.toc {
+  flex: 0 0 16rem;
+  font-size: .75rem;
+  background-color: var(--global-background-color);
+
+  .toc-content {
+    width: 16rem;
+    position: sticky;
+    top: var(--header-height);
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    transition: .2s ease-in-out;
 
-            a {
-              color: var(--global-font-color);
-              display: inline-block;
-              padding: .25rem 0 .25rem .5rem;
-              margin-left: .5rem;
-              text-decoration: none;
-
-              i {
-                margin-right: .5rem;
-              }
-
-              &:hover {
-                font-weight: 500;
-              }
-            }
+    h3 {
+      border-bottom: none;
+      margin: 1rem 0;
+    }
 
-          }
-        }
-      }
+    #TableOfContents {
+      position: sticky;
+      overflow: auto;
+      max-height: 60vh;
 
-      .resources {
-        h3 {
-          margin: 1rem 0;
-        }
+      ul {
+        margin: 0;
+        padding: 0;
 
-        ul {
+        li {
           margin: 0;
-          padding: 0;
-
-          li {
-            list-style: none;
-            margin: 0;
+          list-style: none;
 
-            a {
-              color: var(--global-font-color);
-              display: inline-block;
-              padding: .25rem 0 .25rem .5rem;
-            }
+          a {
+            color: var(--global-font-color);
+            display: inline-block;
+            padding: .25rem 0 .25rem .5rem;
+            margin-left: .5rem;
+            text-decoration: none;
 
             i {
-              margin-left: 1rem;
+              margin-right: .5rem;
             }
 
+            &:hover {
+              font-weight: 500;
+            }
           }
         }
       }
     }
-  }
 
-  .toc-mobile {
-    h3 {
-      border-bottom: none;
-    }
+    .resources {
+      h3 {
+        margin: 1rem 0;
+      }
 
-    #TableOfContents, .resources {
       ul {
-        list-style: none;
         margin: 0;
         padding: 0;
 
         li {
+          list-style: none;
           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;
-            }
           }
 
+          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 {
+  .toc {
     display: none;
   }
 
   #menu-control {
     display: inline;
   }
 
   .book-menu {
     visibility: hidden;
     margin-inline-start: -16rem;
     z-index: 1;
   }
 
   #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 {
+  .toc-mobile, .book-menu-mobile {
     display: none;
   }
-  .book-menu-mobile {
-    display: none;
-  }
-
 }
diff --git a/documentation/themes/beastie/layouts/articles/list.html b/documentation/themes/beastie/layouts/articles/list.html
index 2954accc8b..d79f13bb32 100644
--- a/documentation/themes/beastie/layouts/articles/list.html
+++ b/documentation/themes/beastie/layouts/articles/list.html
@@ -1,54 +1,54 @@
 {{ define "main" }}
 <main class="main-wrapper-article">
   <div class="article">
     <h1 class="title">{{ .Title }}</h1>
     {{ if .Params.subtitle }}
       <h3 class="subtitle">{{ .Params.subtitle }}</h3>
     {{ end }}
     <div>
       {{ $releaseInfo := split .Params.releaseinfo " " }}
 
       {{if gt (len $releaseInfo) 3}}
         {{ i18n "revision" }}:
         <a href="https://cgit.freebsd.org/doc/commit/?id=">
           <span class="gitref">{{ index $releaseInfo 2 }}</span>
         </a>
       {{ end }}
     </div>
     {{ if .Params.copyright }}
       <div class="copyright">
         Copyright © {{ .Params.copyright }}
       </div>
     {{ end}}
     {{ if isset .Params "trademarks" }}
       {{ partial "trademarks" .Params.trademarks }}
     {{ end }}
     <div>
       {{if gt (len $releaseInfo) 5}}
         {{ $hour := replace (index $releaseInfo 4) "Z" "" }}
         {{ i18n "last-modified" }} {{ index $releaseInfo 3 }} {{ $hour }} {{ i18n "by" }} {{ index $releaseInfo 5 }}.
       {{ end }}
     </div>
     <div class="toc-mobile">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
     </div>
     {{ .Content }}
   </div>
-  <aside class="article-toc">
-    <div class="article-toc-content">
+  <aside class="toc">
+    <div class="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>
         </ul>
       </div>
     </div>
   </aside>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/articles/single.html b/documentation/themes/beastie/layouts/articles/single.html
index 2954accc8b..d79f13bb32 100644
--- a/documentation/themes/beastie/layouts/articles/single.html
+++ b/documentation/themes/beastie/layouts/articles/single.html
@@ -1,54 +1,54 @@
 {{ define "main" }}
 <main class="main-wrapper-article">
   <div class="article">
     <h1 class="title">{{ .Title }}</h1>
     {{ if .Params.subtitle }}
       <h3 class="subtitle">{{ .Params.subtitle }}</h3>
     {{ end }}
     <div>
       {{ $releaseInfo := split .Params.releaseinfo " " }}
 
       {{if gt (len $releaseInfo) 3}}
         {{ i18n "revision" }}:
         <a href="https://cgit.freebsd.org/doc/commit/?id=">
           <span class="gitref">{{ index $releaseInfo 2 }}</span>
         </a>
       {{ end }}
     </div>
     {{ if .Params.copyright }}
       <div class="copyright">
         Copyright © {{ .Params.copyright }}
       </div>
     {{ end}}
     {{ if isset .Params "trademarks" }}
       {{ partial "trademarks" .Params.trademarks }}
     {{ end }}
     <div>
       {{if gt (len $releaseInfo) 5}}
         {{ $hour := replace (index $releaseInfo 4) "Z" "" }}
         {{ i18n "last-modified" }} {{ index $releaseInfo 3 }} {{ $hour }} {{ i18n "by" }} {{ index $releaseInfo 5 }}.
       {{ end }}
     </div>
     <div class="toc-mobile">
       <h3>{{ i18n "toc" }}</h3>
       {{ .TableOfContents }}
     </div>
     {{ .Content }}
   </div>
-  <aside class="article-toc">
-    <div class="article-toc-content">
+  <aside class="toc">
+    <div class="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>
         </ul>
       </div>
     </div>
   </aside>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/books/list.html b/documentation/themes/beastie/layouts/books/list.html
index 8694ff66ac..d612387092 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">
+  <aside class="toc">
+    <div class="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><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 8694ff66ac..d612387092 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">
+  <aside class="toc">
+    <div class="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><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 }}