diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 39d4c1d27f..dbb015b745 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -1,403 +1,403 @@
 /*
  * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, 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 {
+.documents-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;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
   max-width: var(--max-width);
   width: 100%;
 
   .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;
   }
 }
 
 .main-wrapper-book {
   display: flex;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
   max-width: var(--max-width);
   width: 100%;
 
   .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;
         padding-left: .5rem;
         border-bottom: none;
       }
 
       #search-book {
         margin-top: 1.5rem;
         margin-bottom: .75rem;
         border: 1px solid #CCC;
         border-radius: 4px;
         box-shadow: inset 0 1px 3px #DDD;
         box-sizing: border-box;
         background-color: #FCFCFD;
         color: #444;
         width: 95%;
         margin-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);
+        max-height: calc(100vh - 8rem);
         line-height: 2;
 
         ul {
           margin: 0;
           padding: 0;
           padding-left: .5rem;
 
           li {
             list-style: none;
             margin: 0;
 
             label {
               position: absolute;
               cursor: pointer;
               font-size: 0.875rem;
             }
 
             a {
               color: var(--global-font-color);
               display: block;
               padding-left: 1rem;
               padding-right: .5rem;
               font-size: 0.875rem;
             }
           }
         }
       }
     }
   }
 
   .book {
     flex-grow: 1;
     padding: var(--documentation-padding);
     width: 90vw;
     min-width: 20rem;
     max-width: var(--max-width);
     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;
       align-content: center;
       align-items: center;
       justify-content: center;
       flex-direction: row;
 
       .prev, .home, .next {
         display: flex;
         flex-direction: row;
         align-items: center;
 
         i {
           padding: 1rem;
         }
       }
 
       .home {
         margin-left: auto;
         margin-right: auto;
 
         i {
           padding-left: .2rem;
           padding-right: .2rem;
         }
       }
 
       .container {
         display: flex;
         flex-direction: column;
 
         .direction {
           font-weight: bolder;
         }
       }
     }
 
   }
 }
 
 .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;
 
     h3 {
       border-bottom: none;
       margin: 1rem 0;
     }
 
     #TableOfContents {
       position: sticky;
       overflow: auto;
       max-height: 60vh;
 
       ul {
         margin: 0;
         padding: 0;
 
         li {
           margin: 0;
           margin-bottom: .5rem;
           list-style: none;
 
           a {
             color: var(--global-font-color);
             display: inline-block;
             padding: .25rem .5rem .25rem .5rem;
             margin-left: .5rem;
             font-size: 0.875rem;
             text-decoration: none;
 
             &:hover {
               text-decoration: underline;
             }
           }
         }
       }
     }
 
     .resources {
       h3 {
         margin: 1rem 0;
       }
 
       ul {
         margin: 0;
         padding: 0;
 
         li {
           list-style: none;
           margin: 0;
 
           a {
             color: var(--global-font-color);
             display: inline-block;
             padding: .25rem .5rem .25rem .5rem;
             font-size: 0.875rem;
           }
 
           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) {
   .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, .book-menu-mobile {
     display: none;
   }
 }
diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss
index 947687c4fe..041e8db47d 100644
--- a/documentation/themes/beastie/assets/styles/footer.scss
+++ b/documentation/themes/beastie/assets/styles/footer.scss
@@ -1,182 +1,187 @@
 /*
  * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, 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.
  *
  */
 
 footer {
   margin-top: 1rem;
   padding: 1rem;
   color: var(--global-font-color);
   background-color: var(--footer-background-color);
 }
 
 .footer-container {
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr;
   grid-template-areas:
     "logo"
     "about"
     "documentation"
     "community"
     "legal"
     "copyright";
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
 }
 
 .logo-column {
   grid-area: logo;
 }
 
 .about-column {
   grid-area: about;
 }
 
 .community-column {
   grid-area: community;
 }
 
 .documentation-column {
   grid-area: documentation;
 }
 
 .legal-column {
   grid-area: legal;
 }
 
 .copyright-column {
   grid-area: copyright;
   padding-top: 1rem;
   border-top: 1px solid #E5E7EB;
   line-height: 1rem;
   font-size: .8rem;
 }
 
 .column-title {
   margin-top: 0;
   font-size: inherit;
   border-bottom: none;
 }
 
 .column-elements-container {
   margin: .5rem 0;
   padding: 0;
   list-style: none;
 }
 
 .column-elements-container li {
   margin-top: .7rem;
 }
 
 .column-element {
   text-decoration: none;
   line-height: 2rem;
   color: inherit;
   font-size: inherit;
 }
 
 .heart {
-  color: red;
+  font-size: 1.2rem;
+  color: #E38582;
+}
+
+.heart:hover {
+  color: #D1332E;
 }
 
 .options-container {
   display: flex;
   align-items: center;
 }
 
 .theme-container {
   display: none;
   margin-left: 2rem;
 }
 
 .theme-container select {
   border: 1px solid #CCC;
   border-radius: 4px;
   box-sizing: border-box;
   background-color: #FCFCFD;
   color: #444;
 }
 
 .language-container {
   display: flex;
   align-items: center;
 }
 
 .language-container a {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: var(--global-font-color);
   border-radius: 1px;
   padding: .3rem;
 }
 
 .language-container a img {
   display: inline-flex;
   padding-right: 10px;
   align-items: center;
   justify-content: center;
   height: 1.5rem;
   width: 1.5rem;
 }
 
 @media screen and (min-width: 450px) {
   .footer-container {
     gap: 2rem;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
       "logo logo"
       "about community"
       "documentation legal"
       "copyright copyright";
   }
 }
 
 @media screen and (min-width: 900px) {
   footer {
     padding: 2rem;
   }
 
   .footer-container {
     grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
     grid-template-areas:
       "logo about documentation community legal"
       "copyright copyright copyright copyright copyright";
     gap: 1rem;
   }
 }
 
 @media screen and (min-width: 1451px) {
   footer {
     padding: 2rem 5rem;
   }
 
   .footer-container {
     gap: 2rem;
   }
 }
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index 83537922e5..a1d8b40e5b 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/documentation/themes/beastie/assets/styles/global.scss
@@ -1,792 +1,747 @@
 /*
  * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, 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', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   scroll-padding-top: var(--header-height);
   scroll-behavior: auto;
 }
 
 @supports (font-variation-settings: normal) {
   html {
     font-family: 'Inter var', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   }
 }
 
-html, body {
+html,
+body {
   text-rendering: optimizeLegibility;
   line-height: 1.5;
 }
 
 body {
   display: flex;
   flex-direction: column;
   color: var(--global-font-color);
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: 400;
   font-style: normal;
   cursor: auto;
   background-color: var(--global-background-color);
 }
 
 /* Main */
 .main-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
   max-width: var(--max-width);
   transition: padding .15s;
   background-color: var(--global-background-color);
 
-  .article {
-    .paragraph {
-      padding-left: .5rem;
-    }
-  }
-
   .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;
+        margin-left: 10%;
       }
 
       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%;
+        width: 80%;
         padding: 10px 20px;
         border: 1px solid #CCC;
         border-radius: 4px;
         box-shadow: inset 0 1px 3px #DDD;
         box-sizing: border-box;
         background-color: #FCFCFD;
         color: #444;
       }
     }
   }
 
   .cards-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
+    display: grid;
+    grid-gap: 1rem;
+    margin: 0 auto;
     margin-top: 3rem;
     margin-bottom: 3rem;
+    padding-right: 10%;
+    padding-left: 10%;
 
-    .row {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      width: 100%;
-      margin-bottom: 2rem;
+    .card {
+      padding: 1rem;
+      border: 1px solid var(--card-border-color);
+      background-color: var(--card-background-color);
 
-      .card {
+      a {
         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;
-          }
+        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;
-          }
+        p {
+          color: var(--global-font-color);
+          font-size: 18px;
+          margin: 0px;
+          margin-top: auto;
+          text-align: inherit;
         }
       }
     }
   }
+
+  .document {
+    padding: var(--documentation-padding);
+  }
 }
 
 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) {
+@media (min-width: 600px) {
   .main-wrapper {
-    padding: 0rem 1rem 2rem 1rem;
-
     .welcome-container {
-      margin-bottom: 2.5rem;
-
-      form {
-        input {
-          width: 100%;
-          background-color: var(--white);
+      .title-language-container {
+        h2 {
+          margin-left: auto;
         }
       }
 
-    }
-
-    .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;
-          }
+      form {
+        input {
+          width: 50%;
         }
       }
     }
   }
 
-}
-
-@media (min-width: 1200px) {
-  .main-wrapper {
-    .cards-container {
-      .row {
-        .card {
-          width: 33.3%;
-        }
-      }
-    }
+  .cards-container {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (min-width: 768px) {
-  .main-wrapper {
-    .cards-container {
-      .row {
-        .card {
-          width: 50%;
-        }
-      }
-    }
+@media (min-width: 900px) {
+  .cards-container {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
 .abstract-title {
   font-size: 24px;
   font-weight: 700;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   margin: 0;
   padding-bottom: .3rem;
 }
 
 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 > .anchor,
-h3 > .anchor,
-h4 > .anchor,
-h5 > .anchor,
-h6 > .anchor {
+h2>.anchor,
+h3>.anchor,
+h4>.anchor,
+h5>.anchor,
+h6>.anchor {
   text-decoration: none;
 
   &:hover {
     text-decoration: none;
   }
 }
 
-h2 > .anchor::before,
-h3 > .anchor::before,
-h4 > .anchor::before,
-h5 > .anchor::before,
-h6 > .anchor::before {
+h2>.anchor::before,
+h3>.anchor::before,
+h4>.anchor::before,
+h5>.anchor::before,
+h6>.anchor::before {
   visibility: hidden;
   margin-left: .3rem;
   content: "#";
   color: var(--global-font-color);
 }
 
 h2,
 h3,
 h4,
 h5,
 h6 {
   border-bottom: 1px solid var(--lines-color);
 
   &:hover .anchor::before {
     visibility: visible;
     transition: visibility 0s easy 0s;
   }
 }
 
 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: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, 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 {
+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 {
+.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);
     color: var(--table-header-font-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 {
+  td:first-of-type,
+  th:first-of-type {
     border-left: none;
   }
 
-  td:last-of-type, th:last-of-type {
+  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;
             font-style: normal;
 
             &:after {
               content: attr(title);
               font-family: 'Inter var', sans-serif;
               font-weight: bolder;
               padding: 0 .5em;
               margin: -.05em;
             }
           }
 
           .icon-note::before {
-            content:"\f05a";
+            content: "\f05a";
             color: var(--admonition-note-color);
           }
 
           .icon-tip::before {
-            content:"\f0eb";
+            content: "\f0eb";
             color: var(--admonition-tip-color)
           }
 
           .icon-warning::before {
-            content:"\f071";
+            content: "\f071";
             color: var(--admonition-warning-color);
           }
 
           .icon-caution::before {
-            content:"\f06d";
+            content: "\f06d";
             color: var(--admonition-caution-color);
           }
 
           .icon-important::before {
-            content:"\f06a";
+            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;
 
           .title {
             margin-top: 2rem;
           }
 
           .paragraph {
             padding-top: .5rem;
           }
 
           a {
             color: var(--admonition-links-color);
           }
         }
       }
     }
   }
 }
 
 .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 {
+.example,
+.exampleblock {
   border-left: 5px solid var(--example-block-color);
   padding: 1rem;
   background-color: var(--example-block-background-color);
 }
 
 .exampleblock {
   margin: .75rem 0;
   color: var(--example-block-font-color);
 
   .title {
     font-weight: bolder;
     font-family: 'Inter var', sans-serif;
   }
 
   .content {
     .literalblock {
-      .content{
+      .content {
         background: #fefde6 !important;
         border: none !important;
         color: var(--global-font-color);
       }
     }
 
     a {
       color: var(--admonition-links-color);
     }
   }
 }
 
 .procedure {
   border-left: 5px solid #B3B3B3;
   padding: 1rem;
   margin-bottom: 1.4rem;
 }
 
 /* Misc */
 .fa {
-    font-family: FontAwesome;
-    font-style: normal;
+  font-family: FontAwesome;
+  font-style: normal;
 }
 
 .listingblock {
   margin: .75em 0;
   position: relative;
 }
 
 .highlight {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
 code {
   font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
   font-size: 0.75rem;
 }
 
 .filename {
   font-weight: bolder;
 }
 
 details {
   margin: 1rem 0;
 
   summary {
     cursor: pointer;
   }
 }
 
 kbd {
   font-family: "DejaVu Sans", "DejaVu Sans Bold";
   display: inline-block;
-  color: rgba(0,0,0,.8);
+  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;
+  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);
   }
 }
 
 .copy-to-clipboard-wrapper {
   position: absolute;
   margin: 0;
   padding: .50rem;
   right: .5rem;
   top: 0rem;
 
   button {
     display: flex;
     flex-direction: column;
     border: none;
     cursor: pointer;
     align-items: center;
     width: 1rem;
     height: 1rem;
     background: none;
 
     &:focus {
       outline: none;
     }
 
     i {
       color: var(--white);
     }
   }
 
   .tooltip {
     visibility: hidden;
     opacity: 0;
     justify-content: center;
     margin-top: 1em;
     background-color: var(--copy-clipboard-tooltip-background-color);
     border-radius: .25em;
     padding: .5em;
     color: var(--white);
     z-index: 999;
 
     &:focus {
       outline: none;
     }
   }
 
   .show-tooltip {
     visibility: visible;
     opacity: 1;
     transition: visibility 0s easy 0s;
   }
 
-}
+}
\ No newline at end of file
diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss
index 25c38759c7..3e151aeb76 100644
--- a/documentation/themes/beastie/assets/styles/header.scss
+++ b/documentation/themes/beastie/assets/styles/header.scss
@@ -1,346 +1,348 @@
 /*
  * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, 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.
  *
  */
 
 header {
   position: sticky;
   top: 0;
   z-index: 9999;
   padding: .5rem 1rem;
   background-color: var(--header-background);
 }
 
 .header-container {
   display: flex;
   width: 100%;
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
   align-items: center;
 }
 
 .logo-menu-bars-container {
   display: flex;
   align-items: center;
 }
 
 .logo {
   display: flex;
   align-items: center;
   margin-right: 1rem;
 }
 
 header nav {
   margin-left: 0;
   margin-right: 0;
 }
 
 header ul {
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
 }
 
 header ul li {
   list-style: none;
 }
 
 .menu-bars {
   display: none;
   margin-left: auto;
   color: var(--white);
   cursor: pointer;
 }
 
 input[type='checkbox'] {
   display: none;
 }
 
 .menu {
   display: flex;
   padding: 0;
   margin: 0;
 }
 
 .menu-item {
   display: flex;
   margin-right: 1rem;
   align-items: center;
   color: var(--white) !important;
   margin-top: 0px !important;
 }
 
 .menu-item a {
   padding: 1rem 0;
   color: inherit;
 }
 
 .menu-item a,
 .donate a {
   text-decoration: none;
   font-weight: 600;
 }
 
 .menu-item a:hover,
 .donate a:hover {
   text-decoration: none;
 }
 
 .donate a {
   color: var(--black) !important;
 }
 
 .menu-item i {
   margin-left: .1rem;
 }
 
 .sub-menu {
   visibility: hidden;
   position: absolute;
   top: 55px;
   padding: 1rem .75rem;
   min-width: 250px;
   background-color: var(--white);
   border-radius: .4rem;
   color: #444;
   border: 1px solid #CDCDCD;
   z-index: 999;
 }
 
 .sub-menu:hover {
   visibility: visible;
 }
 
 .menu-item a:hover+.sub-menu {
   visibility: visible;
 }
 
 .sub-menu li {
   margin-top: 0;
   padding: .75rem .6rem;
 }
 
 .sub-menu .title {
   border-bottom: 1px solid #E5E7EB;
 }
 
 .sub-menu li a {
   font-weight: normal !important;
 }
 
 .sub-menu .title a {
   font-weight: bolder !important;
 }
 
 .search-donate-container {
   display: flex;
   align-items: center;
   margin-top: 0px;
   margin-left: auto;
 }
 
 .search {
   display: flex;
   border-radius: .4rem;
   background-color: var(--white);
   border: 1px solid var(--white);
   margin-top: 0px;
 }
 
 .search input[type='text'] {
   display: inline-block;
   width: 100%;
   padding: .3rem .8rem;
   border: none;
   border-radius: .4rem;
   appearance: none;
   outline: none;
   background-color: var(--white);
   color: var(--global-font-color);
 }
 
 .search button {
   background-color: var(--white);
   border: none;
   border-radius: .4rem;
 }
 
 .search button i {
   color: var(--black);
 }
 
 .donate {
   margin-left: .5rem;
 }
 
 .donate a {
   display: inline-block;
   padding: .5rem 1rem;
   background-color: var(--white);
   border-radius: .4rem;
 }
 
-.donate a i,
-.heart i {
+.donate a .heart,
+.heart .heart {
+  font-size: 1.2rem;
   color: #E38582;
 }
 
-.donate:hover a i,
-.heart:hover i {
+.donate:hover a .heart,
+.heart:hover .heart {
   color: #D1332E;
 }
 
 @media screen and (max-width: 1100px) {
   .header-container {
     flex-direction: column;
   }
 
   .logo-menu-bars-container {
     width: 100%;
     padding: .5rem 0;
   }
 
   nav {
     width: 100%;
     margin: 0;
     padding: 0;
   }
 
   .menu-bars {
     display: block;
   }
 
   .menu {
     display: none;
     width: 100%;
   }
 
   #menu-bars:checked~nav .menu {
     display: block !important;
   }
 
   .menu-item {
     flex-direction: column;
     width: 100%;
     margin-right: 0px;
     border-top: 1px solid var(--white);
     cursor: pointer;
   }
 
   .menu-item a {
     width: 100%;
   }
 
   .menu-item a:hover+.sub-menu {
     visibility: visible;
   }
 
   .menu-item-description {
     display: flex;
     width: 100%;
     cursor: pointer;
   }
 
   .menu-item-description i {
     margin-left: auto;
   }
 
   .sub-menu {
     display: none;
     flex-direction: column;
     width: 100%;
     padding: 0px;
     position: static;
     visibility: visible;
     border: none;
     background-color: inherit;
     color: inherit;
     box-shadow: inherit;
   }
 
   .sub-menu .title {
     display: none;
     border-bottom: none;
   }
 
   .sub-menu li {
     padding-left: 0px;
     padding-right: 0px;
   }
 
   #about:checked~.sub-menu,
   #download:checked~.sub-menu,
   #documentation:checked~.sub-menu,
   #community:checked~.sub-menu {
     display: flex;
   }
 
   .search-donate-container {
     display: none;
   }
 
   .search {
     width: 100%;
   }
 
   #menu-bars:checked~.search-donate-container {
     display: flex;
     flex-direction: column;
     width: 100%;
     margin-left: unset;
     padding-top: .2rem;
   }
 
   .donate {
     display: flex;
     width: 100%;
     margin-left: unset;
     padding-top: .8rem;
   }
 
   .donate a {
     width: 100%;
     text-align: center;
   }
 
-  .donate a i {
+  .donate a .heart {
+    font-size: 1.2rem;
     color: #D1332E;
   }
 }
 
 @media screen and (min-width: 900px) {
   header {
     padding: .5rem 2rem;
   }
 }
 
 @media screen and (min-width: 1451px) {
   header {
     padding: .5rem 5rem;
   }
 }
diff --git a/documentation/themes/beastie/layouts/_default/languages.html b/documentation/themes/beastie/layouts/_default/languages.html
index ba487c26c3..8743c86312 100644
--- a/documentation/themes/beastie/layouts/_default/languages.html
+++ b/documentation/themes/beastie/layouts/_default/languages.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="{{ $.Site.Language.Lang | default "en" }}">
   {{ partial "site-head.html" . }}
   <body>
     {{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}
     <main class="main-wrapper">
-      {{ $home := .Site.Home }}
-      <h1>{{ i18n "select-language" }}</h1>
-      <p>{{ i18n "current-selection" }} {{ .Site.Language.LanguageName }}</p>
-      <ul class="language-list">
-        {{ range $.Site.Home.AllTranslations }}
-        {{ $isCurrentLang := eq $home.Language .Language }}
-          <li {{ if $isCurrentLang}} class="selected" {{ end }}>
-            <a href="{{ .RelPermalink }}" lang="{{ .Language.Params.languageCode }}">{{.Language.LanguageName }}</a>
-          </li>
-        {{ end }}
-      </ul>
+      <div class="document">
+        {{ $home := .Site.Home }}
+        <h1>{{ i18n "select-language" }}</h1>
+        <p>{{ i18n "current-selection" }} {{ .Site.Language.LanguageName }}</p>
+        <ul class="language-list">
+          {{ range $.Site.Home.AllTranslations }}
+          {{ $isCurrentLang := eq $home.Language .Language }}
+            <li {{ if $isCurrentLang}} class="selected" {{ end }}>
+              <a href="{{ .RelPermalink }}" lang="{{ .Language.Params.languageCode }}">{{.Language.LanguageName }}</a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
     </main>
     {{ block "footer" . }}{{ partial "site-footer.html" .}}{{ end }}
   </body>
 </html>
diff --git a/documentation/themes/beastie/layouts/articles/total-list.html b/documentation/themes/beastie/layouts/articles/total-list.html
index 1a279510ad..e266ed2618 100644
--- a/documentation/themes/beastie/layouts/articles/total-list.html
+++ b/documentation/themes/beastie/layouts/articles/total-list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="main-wrapper">
-  <div class="article">
+  <div class="document">
     {{ .Content }}
   </div>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/books/total-list.html b/documentation/themes/beastie/layouts/books/total-list.html
index 1a279510ad..e266ed2618 100644
--- a/documentation/themes/beastie/layouts/books/total-list.html
+++ b/documentation/themes/beastie/layouts/books/total-list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <main class="main-wrapper">
-  <div class="article">
+  <div class="document">
     {{ .Content }}
   </div>
 </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/index.html b/documentation/themes/beastie/layouts/index.html
index ac491fa7cd..6ee1b26a3b 100644
--- a/documentation/themes/beastie/layouts/index.html
+++ b/documentation/themes/beastie/layouts/index.html
@@ -1,73 +1,67 @@
 {{ define "main" }}
   {{ $language := "" }}
   {{ $currentLang := $.Site.Language.Lang }}
 
   {{ if ne $currentLang "en" }}
     {{ $language = $currentLang }}
   {{ end }}
   <main class="main-wrapper">
     {{ partial "global-search.html" . }}
     <section class="cards-container">
-      <div class="row">
-        <div class="card">
-          <a href={{ "books/handbook/basics" | absLangURL }}>
-            <h5>{{ i18n "getting-started" }}</h5>
-            <p>{{ i18n "learn-basics" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href={{ printf "%s%s/%s" $.Site.Params.websiteURL $language "where" }}>
-            <h5>{{ i18n "download" }}</h5>
-            <p>{{ i18n "download-freebsd" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href={{ "books/handbook/" | absLangURL }}>
-            <h5>{{ i18n "handbook" }}</h5>
-            <p>{{ i18n "handbook-desc" }}</p>
-          </a>
-        </div>
+      <div class="card">
+        <a href={{ "books/handbook/basics" | absLangURL }}>
+          <h5>{{ i18n "getting-started" }}</h5>
+          <p>{{ i18n "learn-basics" }}</p>
+        </a>
       </div>
-      <div class="row">
-        <div class="card">
-          <a href={{ "books/porters-handbook/" | absLangURL }}>
-            <h5>{{ i18n "porters-handbook" }}</h5>
-            <p>{{ i18n "porters-handbook-desc" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href={{ "books/faq/" | absLangURL }}>
-            <h5>{{ i18n "faq" }}</h5>
-            <p>{{ i18n "faq-desc" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href="https://docs.FreeBSD.org/en/books/fdp-primer/">
-            <h5>{{ i18n "fdp" }}</h5>
-            <p>{{ i18n "fdp-desc" }}</p>
-          </a>
-        </div>
+      <div class="card">
+        <a href={{ printf "%s%s/%s" $.Site.Params.websiteURL $language "where" }}>
+          <h5>{{ i18n "download" }}</h5>
+          <p>{{ i18n "download-freebsd" }}</p>
+        </a>
       </div>
-      <div class="row">
-        <div class="card">
-          <a href={{ "books" | absLangURL }}>
-            <h5>{{ i18n "books" }}</h5>
-            <p>{{ i18n "books-list" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href={{ "articles" | absLangURL }}>
-            <h5>{{ i18n "articles" }}</h5>
-            <p>{{ i18n "articles-list" }}</p>
-          </a>
-        </div>
-        <div class="card">
-          <a href="https://www.FreeBSD.org/cgi/man.cgi">
-            <h5>{{ i18n "manual-pages" }}</h5>
-            <p>{{ i18n "manual-pages-desc" }}</p>
-          </a>
-        </div>
+      <div class="card">
+        <a href={{ "books/handbook/" | absLangURL }}>
+          <h5>{{ i18n "handbook" }}</h5>
+          <p>{{ i18n "handbook-desc" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href={{ "books/porters-handbook/" | absLangURL }}>
+          <h5>{{ i18n "porters-handbook" }}</h5>
+          <p>{{ i18n "porters-handbook-desc" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href={{ "books/faq/" | absLangURL }}>
+          <h5>{{ i18n "faq" }}</h5>
+          <p>{{ i18n "faq-desc" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href="https://docs.FreeBSD.org/en/books/fdp-primer/">
+          <h5>{{ i18n "fdp" }}</h5>
+          <p>{{ i18n "fdp-desc" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href={{ "books" | absLangURL }}>
+          <h5>{{ i18n "books" }}</h5>
+          <p>{{ i18n "books-list" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href={{ "articles" | absLangURL }}>
+          <h5>{{ i18n "articles" }}</h5>
+          <p>{{ i18n "articles-list" }}</p>
+        </a>
+      </div>
+      <div class="card">
+        <a href="https://www.FreeBSD.org/cgi/man.cgi">
+          <h5>{{ i18n "manual-pages" }}</h5>
+          <p>{{ i18n "manual-pages-desc" }}</p>
+        </a>
       </div>
     </section>
   </main>
 {{ end }}
diff --git a/documentation/themes/beastie/layouts/partials/site-footer.html b/documentation/themes/beastie/layouts/partials/site-footer.html
index 015be73356..be343f7545 100755
--- a/documentation/themes/beastie/layouts/partials/site-footer.html
+++ b/documentation/themes/beastie/layouts/partials/site-footer.html
@@ -1,113 +1,113 @@
 <footer>
   <div class="footer-container">
     <section class="logo-column">
         {{ if $.Site.Params.isOnline }}
           <img src="{{ absLangURL ($.Site.BaseURL) }}images/FreeBSD-colors.svg" width="160" height="50" alt="FreeBSD logo" />
         {{ else }}
           <img src="/images/FreeBSD-colors.svg" width="160" height="50" alt="FreeBSD logo" />
         {{ end }}
         <div class="options-container">
           {{ if $.Site.Params.isOnline }}
             <div class="language-container">
               <a id="languages" href="{{ "languages" | absLangURL }}">
                 <img src="{{ absLangURL ($.Site.BaseURL ) }}images/language.png" class="language-image" alt="{{ i18n "choose-language" }}">
                 <span>{{ .Site.Language.LanguageName }}</span>
               </a>
             </div>
           {{ end }}
           <div class="theme-container">
             <select id="theme-chooser">
               <option value="theme-light">{{ i18n "light" }}</option>
               <option value="theme-dark">{{ i18n "dark" }}</option>
               <option value="theme-high-contrast">{{ i18n "high-contrast" }}</option>
             </select>
           </div>
         </div>
       </section>
       <section class="about-column">
         <h3 class="column-title">{{ i18n "f-about" }}</h3>
         <ul class="column-elements-container">
           <li>
             <a href="https://www.freebsd.org/about/" target="_blank" class="column-element">{{ i18n "f-freebsd" }}</a>
           </li>
           <li>
             <a href="https://freebsdfoundation.org/" target="_blank" class="column-element">{{ i18n "f-freebsd-foundation" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/where/" target="_blank" class="column-element">{{ i18n "f-get-freebsd" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/internal/code-of-conduct" target="_blank" class="column-element">{{ i18n "f-code-of-conduct" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/security/" target="_blank" class="column-element">{{ i18n "f-security-advisories" }}</a>
           </li>
         </ul>
       </section>
       <section class="documentation-column">
         <h3 class="column-title">{{ i18n "f-documentation" }}</h3>
         <ul class="column-elements-container">
           <li>
             <a href="{{ .Site.BaseURL | relLangURL }}" class="column-element">{{ i18n "f-documentation-portal" }}</a>
           </li>
           <li>
             <a href="https://man.FreeBSD.org" target="_blank" class="column-element">{{ i18n "f-manual-pages" }}</a>
           </li>
           <li>
             <a href="https://papers.FreeBSD.org" target="_blank" class="column-element">{{ i18n "f-presentation-and-papers" }}</a>
           </li>
           <li>
             <a href="https://docs-legacy.freebsd.org/doc/" target="_blank" class="column-element">{{ i18n "f-previous-versions" }}</a>
           </li>
           <li>
             <a href="https://docs-legacy.freebsd.org/44doc/" target="_blank" class="column-element">{{ i18n "f-44bsd-documents" }}</a>
           </li>
           <li>
             <a href="https://wiki.freebsd.org/" target="_blank" class="column-element">{{ i18n "f-wiki" }}</a>
           </li>
         </ul>
       </section>
       <section class="community-column">
         <h3 class="column-title">{{ i18n "f-community" }}</h3>
         <ul class="column-elements-container">
           <li>
             <a href={{ "articles/contributing" | absLangURL }} class="column-element">{{ i18n "f-get-involved" }}</a>
           </li>
           <li>
             <a href="https://forums.freebsd.org/" target="_blank" class="column-element">{{ i18n "f-community-forum" }}</a>
           </li>
           <li>
             <a href="https://lists.freebsd.org/" target="_blank" class="column-element">{{ i18n "f-mailing-lists" }}</a>
           </li>
           <li>
             <a href="https://wiki.freebsd.org/IRC/Channels" target="_blank" class="column-element">{{ i18n "f-irc-channels" }}</a>
           </li>
           <li>
             <a href="https://bugs.freebsd.org/bugzilla/" target="_blank" class="column-element">{{ i18n "f-bug-tracker" }}</a>
           </li>
         </ul>
       </section>
       <section class="legal-column">
         <h3 class="column-title">{{ i18n "f-legal" }}</h3>
         <ul class="column-elements-container">
           <li>
             <a href="https://freebsdfoundation.org/donate/" target="_blank" class="column-element">{{ i18n "f-donations" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/copyright/freebsd-license/" target="_blank"
               class="column-element">{{ i18n "f-licensing" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/privacy/" target="_blank" class="column-element">{{ i18n "f-privacy-policy" }}</a>
           </li>
           <li>
             <a href="https://www.freebsd.org/copyright/" target="_blank" class="column-element">{{ i18n "f-legal-notices" }}</a>
           </li>
         </ul>
       </section>
       <section class="copyright-column">
         <p>&copy; 1994-{{ now.Format "2006" }} {{ i18n "f-all-rights-reserved" }}</p>
-        <span>{{ i18n "f-made-with" }} <span class="heart"><i class="fa fa-heart" aria-hidden="true"></i></span>{{ i18n "f-by-freebsd-community" }}</span>
+        <span>{{ i18n "f-made-with" }} <span class="heart">♥</span> {{ i18n "f-by-freebsd-community" }}</span>
       </section>
   </div>
 </footer>
diff --git a/documentation/themes/beastie/layouts/partials/site-header.html b/documentation/themes/beastie/layouts/partials/site-header.html
index 18480e6d3e..96341eb4ae 100755
--- a/documentation/themes/beastie/layouts/partials/site-header.html
+++ b/documentation/themes/beastie/layouts/partials/site-header.html
@@ -1,107 +1,107 @@
 <header>
   <div class="header-container">
     <div class="logo-menu-bars-container">
       <a href="{{ $.Site.Params.websiteURL }}" class="logo">
       {{ if $.Site.Params.isOnline }}
         <img src="{{ absLangURL ($.Site.BaseURL) }}images/FreeBSD-monochromatic.svg" width="160" height="50" alt="FreeBSD logo" />
       {{ else }}
         <img src="/images/FreeBSD-monochromatic.svg" width="160" height="50" alt="FreeBSD logo" />
       {{ end }}
       </a>
       <label class="menu-bars" for="menu-bars">
         <i class="fa fa-bars" aria-hidden="true"></i>
       </label>
     </div>
     <input id="menu-bars" type="checkbox" />
     <nav>
       <ul class="menu">
         <li class="menu-item">
           <input id="about" type="checkbox" />
           <a href="#" aria-label="Navigate to About section">
             <label class="menu-item-description" for="about">
               {{ i18n "h-about" }}
               <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
             </label>
           </a>
           <ul class="sub-menu">
             <li class="title"><a href="https://www.freebsd.org/about/" target="_blank">{{ i18n "h-about" }}</a></li>
             <li><a href="https://www.freebsd.org/about/" target="_blank">{{ i18n "h-freebsd" }}</a></li>
             <li><a href="https://freebsdfoundation.org/about-us/about-the-foundation/" target="_blank">{{ i18n "h-freebsd-foundation" }}</a></li>
             <li><a href="https://www.freebsd.org/internal/code-of-conduct/" target="_blank">{{ i18n "h-code-of-conduct" }}</a></li>
           </ul>
         </li>
         <li class="menu-item">
           <input id="download" type="checkbox" />
           <a href="#" aria-label="Navigate to get FreeBSD section">
             <label class="menu-item-description" for="download">
               {{ i18n "h-get-freebsd" }}
               <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
             </label>
           </a>
           <ul class="sub-menu">
             <li class="title"><a href="https://www.freebsd.org/where/" target="_blank">{{ i18n "h-get-freebsd" }}</a></li>
             <li><a href="https://www.freebsd.org/releases/" target="_blank">{{ i18n "h-release-information" }}</a></li>
             <li><a href="https://www.freebsd.org/releng/" target="_blank">{{ i18n "h-release-engineering" }}</a></li>
             <li><a href="https://www.freebsd.org/security/" target="_blank">{{ i18n "h-security-advisories" }}</a></li>
           </ul>
         </li>
         <li class="menu-item">
           <input id="documentation" type="checkbox" />
           <a href="#" aria-label="Navigate to get Documentation section">
             <label class="menu-item-description" for="documentation">
               {{ i18n "h-documentation" }}
               <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
             </label>
           </a>
           <ul class="sub-menu">
             <li class="title"><a href="{{ .Site.BaseURL | relLangURL }}">{{ i18n "h-documentation-portal" }}</a></li>
             <li><a href={{ "books/handbook" | absLangURL }}>{{ i18n "h-freebsd-handbook" }}</a></li>
             <li><a href={{ "books/porters-handbook" | absLangURL }}>{{ i18n "h-porter-handbook" }}</a></li>
             <li><a href="https://docs.FreeBSD.org/en/books/fdp-primer">{{ i18n "h-documentation-handbook" }}</a></li>
             <li><a href="https://man.FreeBSD.org" target="_blank">{{ i18n "h-manual-pages" }}</a></li>
             <li><a href="https://papers.FreeBSD.org" target="_blank">{{ i18n "h-presentation-and-papers" }}</a></li>
             <li><a href="https://wiki.FreeBSD.org" target="_blank">{{ i18n "h-wiki" }}</a></li>
             <li><a href={{ "books" | absLangURL }}>{{ i18n "h-books" }}</a></li>
             <li><a href={{ "articles" | absLangURL }}>{{ i18n "h-articles" }}</a></li>
           </ul>
         </li>
         <li class="menu-item">
           <input id="community" type="checkbox" />
           <a href="#" aria-label="Navigate to get Community section">
             <label class="menu-item-description" for="community">
               {{ i18n "h-community" }}
               <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
             </label>
           </a>
           <ul class="sub-menu">
             <li class="title"><a href="https://www.freebsd.org/community/">{{ i18n "h-community" }}</a></li>
             <li><a href={{ "articles/contributing" | absLangURL }}>{{ i18n "h-get-involved" }}</a></li>
             <li><a href="https://forums.freebsd.org/" target="_blank">{{ i18n "h-community-forum" }}</a></li>
             <li><a href="https://lists.freebsd.org/" target="_blank">{{ i18n "h-mailing-lists" }}</a></li>
             <li><a href="https://wiki.freebsd.org/IRC/Channels" target="_blank">{{ i18n "h-irc-channels" }}</a></li>
             <li><a href="https://bugs.freebsd.org/bugzilla/" target="_blank">{{ i18n "h-bug-tracker" }}</a></li>
             <li><a href="https://www.freebsd.org/support/" target="_blank">{{ i18n "h-support" }}</a></li>
           </ul>
         </li>
       </ul>
     </nav>
     <div class="search-donate-container">
       <form class="search" method="get" id="search-form" action="https://duckduckgo.com/" onsubmit="document.getElementById('words').value+=' site:FreeBSD.org'" name="search-form">
         <input type="hidden" name="ka" value="v" />
         <input type="hidden" name="kt" value="v" />
         <input type="hidden" name="kh" value="1" />
         <input type="hidden" name="kj" value="r2" />
         <input id="words" name="q" type="text" size="20" maxlength="255" onfocus="if( this.value==this.defaultValue ) this.value='';" />
         <button>
           <i class="fa fa-search" aria-hidden="true"></i>
         </button>
       </form>
       <div class="donate">
         <a href="https://freebsdfoundation.org/donate/" target="_blank">
-          <i class="fa fa-heart" aria-hidden="true"></i>
+          <span class="heart">♥</span>
           {{ i18n "h-donate" }}
         </a>
       </div>
     </div>
   </div>
 </header>
diff --git a/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html b/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html
index 6105d1e874..843300d4aa 100644
--- a/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html
+++ b/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html
@@ -1,41 +1,41 @@
 {{ $articles := slice}}
 
 {{ range where .Site.Pages "Section" "articles" }}
   {{ with .File }}
     {{ $subDirsNumer := .File.Path | strings.Count "/" }}
     {{ if eq $subDirsNumer 2 }}
       {{ $articles  = $articles  | append (dict "page" . "path" .File.Path) }}
     {{ end }}
   {{ end }}
 {{ end }}
 
 {{ partial "global-search.html" . }}
 
 <h1>{{ i18n "articles" }}</h1>
 
 <p>{{ i18n "list-desc-articles" }}</p>
 
 <hr class="line"/>
 
 {{ $articles := slice}}
 
 {{ range where .Site.Pages "Section" "articles" }}
   {{ $subDirsNumer := .File.Path | strings.Count "/" }}
   {{ if eq $subDirsNumer 2 }}
     {{ $articles  = $articles  | append (dict "page" . "path" .File.Path) }}
   {{ end }}
 {{ end }}
 
-<ul class="articles-books-list">
+<ul class="documents-list">
 {{ range sort $articles "weight" "path" }}
   {{ if in .path "_index.adoc" }}
     {{ $articlePath := replaceRE "/_index.adoc" "" .path }}
     {{ $articlePath = replaceRE "articles/" "" $articlePath }}
     {{ $articleName := replaceRE "articles/" "" $articlePath }}
     <li>
       <a href="{{ $articlePath }}"><strong>{{ .page.Title }}</strong></a>
       <p>{{ .page.Params.description }}</p>
     </li>
   {{ end }}
 {{ end }}
 </ul>
diff --git a/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html b/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html
index 46e8aef165..10df5da34c 100644
--- a/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html
+++ b/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html
@@ -1,41 +1,41 @@
 {{ $books := slice}}
 
 {{ range where .Site.Pages "Section" "books" }}
   {{ with .File }}
     {{ $subDirsNumer := .File.Path | strings.Count "/" }}
     {{ if eq $subDirsNumer 2 }}
       {{ $books  = $books  | append (dict "page" . "path" .File.Path) }}
     {{ end }}
   {{ end }}
 {{ end }}
 
 {{ partial "global-search.html" . }}
 
 <h1>{{ i18n "books" }}</h1>
 
 <p>{{ i18n "list-desc-books" }}</p>
 
 <hr class="line"/>
 
 {{ $books := slice}}
 
 {{ range where .Site.Pages "Section" "books" }}
   {{ $subDirsNumer := .File.Path | strings.Count "/" }}
   {{ if eq $subDirsNumer 2 }}
     {{ $books  = $books  | append (dict "page" . "path" .File.Path) }}
   {{ end }}
 {{ end }}
 
-<ul class="articles-books-list">
+<ul class="documents-list">
 {{ range sort $books "bookOrder" "path" }}
   {{ if in .path "_index.adoc" }}
     {{ $bookPath := replaceRE "/_index.adoc" "" .path }}
     {{ $bookPath = replaceRE "books/" "" $bookPath }}
     {{ $articleName := replaceRE "books/" "" $bookPath }}
     <li>
       <a href="{{ $bookPath }}"><strong>{{ .page.Title }}</strong></a>
       <p>{{ .page.Params.description }}</p>
     </li>
   {{ end }}
 {{ end }}
 </ul>