diff --git a/assets/js/resizable-panels.js b/assets/js/resizable-panels.js
new file mode 100644
index 00000000000..7acd175e661
--- /dev/null
+++ b/assets/js/resizable-panels.js
@@ -0,0 +1,337 @@
+/**
+ * Resizable docs panels.
+ *
+ * Lets readers adjust the left navigation and right TOC widths, persists those
+ * preferences in localStorage, and provides a reset control.
+ */
+(function () {
+  'use strict';
+
+  const STORAGE_KEY = 'layer5-docs-panel-widths';
+  const RESIZABLE_QUERY = '(min-width: 768px)';
+  const STEP = 1;
+  const DEFAULT_WIDTHS = {
+    sidebar: 16.6667,
+    toc: 16.6667,
+  };
+  const LIMITS = {
+    sidebar: { min: 12, max: 32 },
+    toc: { min: 10, max: 28 },
+    main: { min: 42 },
+  };
+  const LEGACY_GRID_COLUMNS = 12;
+
+  function setupResizablePanels(row) {
+    const sidebar = row.querySelector('.td-sidebar');
+    const main = row.querySelector('main[role="main"]');
+    const toc = row.querySelector('.td-sidebar-toc');
+    const mediaQuery = window.matchMedia(RESIZABLE_QUERY);
+    let activeHandle = null;
+    let sidebarHandle = null;
+    let tocHandle = null;
+    let startX = 0;
+    let startWidths = null;
+    let widths = getStoredWidths();
+
+    if (!sidebar || !main) {
+      return;
+    }
+
+    row.classList.add('resizable-panels-ready');
+    applyWidths(widths);
+    createHandles();
+    createResetButton();
+    bindEvents();
+
+    function bindEvents() {
+      const onBreakpointChange = () => {
+        if (mediaQuery.matches) {
+          applyWidths(widths);
+        }
+      };
+
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', onBreakpointChange);
+      } else {
+        mediaQuery.addListener(onBreakpointChange);
+      }
+    }
+
+    function createHandles() {
+      sidebarHandle = createHandle('sidebar', 'Resize navigation sidebar');
+      sidebar.appendChild(sidebarHandle);
+
+      if (toc) {
+        tocHandle = createHandle('toc', 'Resize table of contents');
+        toc.appendChild(tocHandle);
+      }
+    }
+
+    function createHandle(target, label) {
+      const handle = document.createElement('div');
+      handle.className = `resizable-panel-handle resizable-panel-handle--${target}`;
+      handle.dataset.resizeTarget = target;
+      handle.tabIndex = 0;
+      handle.setAttribute('aria-label', label);
+      handle.setAttribute('aria-orientation', 'vertical');
+      handle.setAttribute('role', 'separator');
+      handle.title = label;
+
+      handle.addEventListener('pointerdown', (event) => {
+        startResize(event, handle);
+      });
+      handle.addEventListener('keydown', (event) => {
+        onHandleKeydown(event, target);
+      });
+
+      return handle;
+    }
+
+    function createResetButton() {
+      const resetButton = document.createElement('button');
+      resetButton.type = 'button';
+      resetButton.className = 'resizable-panel-reset';
+      resetButton.innerHTML =
+        '<i class="bi bi-arrow-clockwise" aria-hidden="true"></i><span>Reset layout</span>';
+      resetButton.title = 'Reset panel widths to default';
+      resetButton.addEventListener('click', reset);
+
+      sidebar.appendChild(resetButton);
+    }
+
+    function startResize(event, handle) {
+      if (!mediaQuery.matches) {
+        return;
+      }
+
+      event.preventDefault();
+      activeHandle = handle;
+      startX = event.clientX;
+      startWidths = { ...widths };
+      handle.classList.add('resizable-panel-handle--active');
+      handle.setPointerCapture(event.pointerId);
+      document.body.classList.add('resizable-panels-dragging');
+
+      const controller = new AbortController();
+      const { signal } = controller;
+
+      const endResize = () => {
+        stopResize();
+        controller.abort();
+      };
+
+      document.addEventListener('pointermove', onPointerMove, { signal });
+      document.addEventListener('pointerup', endResize, { signal });
+      document.addEventListener('pointercancel', endResize, { signal });
+    }
+
+    function onPointerMove(event) {
+      if (!activeHandle || !startWidths) {
+        return;
+      }
+
+      const rowWidth = row.getBoundingClientRect().width;
+      if (!rowWidth) {
+        return;
+      }
+
+      const target = activeHandle.dataset.resizeTarget;
+      const delta = ((event.clientX - startX) / rowWidth) * 100;
+      const nextWidths = { ...startWidths };
+
+      if (target === 'sidebar') {
+        nextWidths.sidebar = startWidths.sidebar + delta;
+      }
+
+      if (target === 'toc') {
+        nextWidths.toc = startWidths.toc - delta;
+      }
+
+      widths = normalizeWidths(nextWidths);
+      applyWidths(widths);
+    }
+
+    function stopResize() {
+      if (!activeHandle) {
+        return;
+      }
+
+      activeHandle.classList.remove('resizable-panel-handle--active');
+      activeHandle = null;
+      startWidths = null;
+      document.body.classList.remove('resizable-panels-dragging');
+      saveWidths();
+    }
+
+    function onHandleKeydown(event, target) {
+      if (!mediaQuery.matches) {
+        return;
+      }
+
+      const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+      if (!keys.includes(event.key)) {
+        return;
+      }
+
+      event.preventDefault();
+      const nextWidths = { ...widths };
+      const direction = event.key === 'ArrowRight' ? 1 : -1;
+
+      if (event.key === 'Home') {
+        nextWidths[target] = LIMITS[target].min;
+      } else if (event.key === 'End') {
+        nextWidths[target] = LIMITS[target].max;
+      } else if (target === 'toc') {
+        nextWidths.toc -= direction * STEP;
+      } else {
+        nextWidths.sidebar += direction * STEP;
+      }
+
+      widths = normalizeWidths(nextWidths);
+      applyWidths(widths);
+      saveWidths();
+    }
+
+    function applyWidths(nextWidths) {
+      const normalized = normalizeWidths(nextWidths);
+      const mainWidth = 100 - normalized.sidebar - normalized.toc;
+
+      row.style.setProperty('--docs-sidebar-width', `${normalized.sidebar}%`);
+      row.style.setProperty('--docs-toc-width', `${normalized.toc}%`);
+      row.style.setProperty('--docs-main-width', `${mainWidth}%`);
+      row.style.setProperty(
+        '--docs-main-without-toc-width',
+        `${100 - normalized.sidebar}%`,
+      );
+      updateHandleValues(normalized);
+    }
+
+    function updateHandleValues(nextWidths) {
+      if (sidebarHandle) {
+        sidebarHandle.setAttribute('aria-valuemin', LIMITS.sidebar.min);
+        sidebarHandle.setAttribute('aria-valuemax', LIMITS.sidebar.max);
+        sidebarHandle.setAttribute(
+          'aria-valuenow',
+          Math.round(nextWidths.sidebar),
+        );
+      }
+
+      if (tocHandle) {
+        tocHandle.setAttribute('aria-valuemin', LIMITS.toc.min);
+        tocHandle.setAttribute('aria-valuemax', LIMITS.toc.max);
+        tocHandle.setAttribute('aria-valuenow', Math.round(nextWidths.toc));
+      }
+    }
+
+    function reset() {
+      widths = { ...DEFAULT_WIDTHS };
+      applyWidths(widths);
+      localStorage.removeItem(STORAGE_KEY);
+    }
+
+    function getStoredWidths() {
+      try {
+        const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
+
+        if (isLegacyColumnWidths(saved)) {
+          return normalizeWidths({
+            sidebar: saved.sidebar
+              ? (saved.sidebar / LEGACY_GRID_COLUMNS) * 100
+              : DEFAULT_WIDTHS.sidebar,
+            toc: saved.toc
+              ? (saved.toc / LEGACY_GRID_COLUMNS) * 100
+              : DEFAULT_WIDTHS.toc,
+          });
+        }
+
+        return normalizeWidths(saved || DEFAULT_WIDTHS);
+      } catch (error) {
+        return { ...DEFAULT_WIDTHS };
+      }
+    }
+
+    function isLegacyColumnWidths(saved) {
+      if (!saved) {
+        return false;
+      }
+
+      return ['sidebar', 'toc', 'main'].some((key) => {
+        const value = Number(saved[key]);
+        const limit = LIMITS[key];
+
+        if (!Number.isFinite(value) || !limit) {
+          return false;
+        }
+
+        return value < limit.min || (limit.max && value > limit.max);
+      });
+    }
+
+    function saveWidths() {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(widths));
+      } catch (error) {
+        // Ignore storage failures so resizing still works in private modes.
+      }
+    }
+
+    function normalizeWidths(nextWidths) {
+      const next = {
+        sidebar: clamp(
+          Number(nextWidths && nextWidths.sidebar),
+          LIMITS.sidebar.min,
+          LIMITS.sidebar.max,
+          DEFAULT_WIDTHS.sidebar,
+        ),
+        toc: toc
+          ? clamp(
+            Number(nextWidths && nextWidths.toc),
+            LIMITS.toc.min,
+            LIMITS.toc.max,
+            DEFAULT_WIDTHS.toc,
+          )
+          : 0,
+      };
+
+      const availableForPanels = 100 - LIMITS.main.min;
+      const panelTotal = next.sidebar + next.toc;
+
+      if (panelTotal > availableForPanels) {
+        const overflow = panelTotal - availableForPanels;
+
+        if (next.sidebar >= next.toc) {
+          next.sidebar = Math.max(LIMITS.sidebar.min, next.sidebar - overflow);
+        } else {
+          next.toc = Math.max(LIMITS.toc.min, next.toc - overflow);
+        }
+      }
+
+      return {
+        sidebar: Number(next.sidebar.toFixed(4)),
+        toc: Number(next.toc.toFixed(4)),
+      };
+    }
+
+    function clamp(value, min, max, fallback) {
+      if (!Number.isFinite(value)) {
+        return fallback;
+      }
+
+      return Math.min(max, Math.max(min, value));
+    }
+  }
+
+  function initResizablePanels() {
+    const row = document.querySelector('.row.flex-xl-nowrap');
+    if (row && !row.dataset.resizablePanelsInitialized) {
+      row.dataset.resizablePanelsInitialized = 'true';
+      setupResizablePanels(row);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initResizablePanels);
+  } else {
+    initResizablePanels();
+  }
+})();
\ No newline at end of file
diff --git a/assets/scss/_resizable-panels.scss b/assets/scss/_resizable-panels.scss
new file mode 100644
index 00000000000..68c67c6747b
--- /dev/null
+++ b/assets/scss/_resizable-panels.scss
@@ -0,0 +1,213 @@
+/**
+ * Resizable docs side panels.
+ *
+ * Docs widths are driven by CSS variables set from resizable-panels.js.
+ * Mobile keeps the existing Bootstrap column behavior.
+ */
+
+.resizable-panel-handle,
+.resizable-panel-reset {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .row.flex-xl-nowrap.resizable-panels-ready {
+    --docs-sidebar-width: 16.6667%;
+    --docs-main-width: 66.6666%;
+    --docs-main-without-toc-width: 83.3333%;
+    --docs-toc-width: 16.6667%;
+
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    min-width: 0;
+  }
+
+  /**
+   * LEFT SIDEBAR
+   */
+  .row.flex-xl-nowrap.resizable-panels-ready > .td-sidebar {
+    flex: 0 0 var(--docs-sidebar-width);
+    width: var(--docs-sidebar-width);
+    max-width: 420px;
+    min-width: 240px;
+    position: relative;
+    padding-right: 12px;
+    order: 1;
+  }
+
+  /**
+   * MAIN CONTENT
+   */
+  .row.flex-xl-nowrap.resizable-panels-ready > main[role='main'] {
+    flex: 1 1 auto;
+    flex-basis: var(--docs-main-without-toc-width);
+    max-width: var(--docs-main-without-toc-width);
+    min-width: 500px;
+    overflow-x: auto;
+    position: relative;
+    order: 2;
+  }
+
+  /**
+   * TOC SIDEBAR
+   */
+  .row.flex-xl-nowrap.resizable-panels-ready > .td-sidebar-toc {
+    width: var(--docs-toc-width);
+    max-width: 320px;
+    min-width: 220px;
+    position: relative;
+    padding-left: 12px;
+    order: 3;
+  }
+
+  /**
+   * RESIZE HANDLE
+   */
+  .resizable-panel-handle {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    cursor: col-resize;
+    display: block;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    z-index: 20;
+  }
+
+  /**
+   * Subtle divider line
+   */
+  .resizable-panel-handle::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  /**
+   * Handle visual indicator
+   */
+  .resizable-panel-handle::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 32px;
+    border-radius: 999px;
+    background-color: rgba(0, 211, 169, 0.55);
+    opacity: 0;
+    transition: opacity 0.16s ease;
+  }
+
+  /**
+   * SHOW HANDLE ON INTERACTION
+   */
+  .resizable-panel-handle:hover::after,
+  .resizable-panel-handle:focus-visible::after,
+  .resizable-panel-handle--active::after {
+    opacity: 1;
+  }
+
+  /**
+   * LEFT SIDEBAR HANDLE
+   */
+  .resizable-panel-handle--sidebar {
+    right: 0;
+  }
+
+  .resizable-panel-handle--sidebar::before,
+  .resizable-panel-handle--sidebar::after {
+    right: 1px;
+  }
+
+  /**
+   * TOC HANDLE
+   */
+  .resizable-panel-handle--toc {
+    display: none;
+    left: 0;
+  }
+
+  .resizable-panel-handle--toc::before,
+  .resizable-panel-handle--toc::after {
+    left: 1px;
+  }
+
+  /**
+   * RESET BUTTON
+   */
+  .resizable-panel-reset {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 211, 169, 0.45);
+    border-radius: 4px;
+    color: #ccc;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 0.8125rem;
+    gap: 0.35rem;
+    line-height: 1.2;
+    margin: 1rem 0 0;
+    padding: 0.45rem 0.65rem;
+    white-space: nowrap;
+  }
+
+  .resizable-panel-reset:hover,
+  .resizable-panel-reset:focus-visible {
+    background: #00d3a9;
+    border-color: #00d3a9;
+    color: #000;
+    outline: none;
+  }
+
+  /**
+   * DRAGGING STATE
+   */
+  .resizable-panels-dragging {
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  .resizable-panels-dragging iframe,
+  .resizable-panels-dragging img,
+  .resizable-panels-dragging a {
+    pointer-events: none;
+  }
+}
+
+/**
+ * LARGE SCREENS
+ */
+@media (min-width: 1200px) {
+  .row.flex-xl-nowrap.resizable-panels-ready > main[role='main'] {
+    flex-basis: var(--docs-main-width);
+    max-width: var(--docs-main-width);
+  }
+
+  .row.flex-xl-nowrap.resizable-panels-ready > .td-sidebar-toc {
+    flex: 0 0 var(--docs-toc-width);
+  }
+
+  .resizable-panel-handle--toc {
+    display: block;
+  }
+}
+
+/**
+ * PRINT MODE
+ */
+@media print {
+  .resizable-panel-handle,
+  .resizable-panel-reset {
+    display: none !important;
+  }
+}
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 00ca1b8770b..7be6edc1115 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -1,20 +1,21 @@
-@import "fonts_project.scss";
-@import "content_project.scss";
-@import "image-modal_project.scss";
-@import "elements_project.scss";
-@import "footer_project.scss";
-@import "variables_project.scss";
-@import "landing_project.scss";
-@import "_navbar_project.scss";
-@import "tax_project.scss";
-@import "search_project.scss";
-@import "_videos_project.scss";
-@import "subscription.scss";
-@import "rest-api-reference.scss";
-@import "_video-landing_project.scss";
-@import "elements_project";
-@import "summary.scss";
-@import "_kanvas-corner-popup.scss";
+@import 'fonts_project.scss';
+@import 'content_project.scss';
+@import 'image-modal_project.scss';
+@import 'elements_project.scss';
+@import 'footer_project.scss';
+@import 'variables_project.scss';
+@import 'landing_project.scss';
+@import '_navbar_project.scss';
+@import 'tax_project.scss';
+@import 'search_project.scss';
+@import '_videos_project.scss';
+@import 'subscription.scss';
+@import 'rest-api-reference.scss';
+@import '_video-landing_project.scss';
+@import 'elements_project';
+@import 'summary.scss';
+@import '_kanvas-corner-popup.scss';
+@import '_resizable-panels.scss';
 
 .navbar-dark {
   min-height: 5rem;
@@ -44,10 +45,13 @@
 .nav-link.active {
   border-width: 1px;
   border-style: solid;
-  border-image: linear-gradient(to bottom,
+  border-image: linear-gradient(
+      to bottom,
       rgba($dark, 0.2) 30%,
       rgba($primary, 0.3) 60%,
-      $primary 90% 100%) 1;
+      $primary 90% 100%
+    )
+    1;
   padding-bottom: 0.3rem;
   align-items: center;
   justify-content: center;
@@ -81,6 +85,10 @@
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
+  article {
+    max-width: 900px;
+  }
 }
 
 body {
@@ -96,7 +104,7 @@ body {
 
   // Inline code
   p code,
-  li>code,
+  li > code,
   table code {
     color: inherit;
     padding: 0.2em 0.4em;
@@ -117,7 +125,7 @@ body {
     background-color: $gray-900;
     padding: $spacer;
 
-    >code {
+    > code {
       background-color: inherit !important;
       padding: 0;
       margin: 0;
@@ -143,7 +151,7 @@ body {
   overflow-x: hidden;
 }
 .td-content .card img {
-  width: 100% ;
+  width: 100%;
 }
 
 // Links
@@ -174,7 +182,6 @@ a:not([href]):not([class]):hover {
   // .taxonomy-terms-cloud
 
   .taxonomy-term {
-
     border-width: 0;
     border-radius: 0 3px 3px 0;
     display: inline-block;
@@ -189,13 +196,10 @@ a:not([href]):not([class]):hover {
     transition: color 0.2s;
     clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
 
-
     &:hover {
       background-color: $primary;
       color: $white;
-
     }
-
   }
 
   .article-teaser {
@@ -224,12 +228,14 @@ a:not([href]):not([class]):hover {
 }
 
 .td-sidebar {
-  background-image: linear-gradient(to top,
-      #1e2117,
-      #1d1912,
-      #18120e,
-      #0f0a09,
-      #000000);
+  background-image: linear-gradient(
+    to top,
+    #1e2117,
+    #1d1912,
+    #18120e,
+    #0f0a09,
+    #000000
+  );
   position: sticky;
   height: calc(100vh - 5.5rem);
   top: 5.5rem;
@@ -237,6 +243,31 @@ a:not([href]):not([class]):hover {
   padding-top: 1rem;
   margin-top: 0;
   overflow-x: hidden;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+
+  nav {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  a {
+    display: block;
+    max-width: 100%;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3) !important;
+    border-radius: 999px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.45) !important;
+    }
+  }
+
   &__inner {
     @include media-breakpoint-up(md) {
       @supports (position: sticky) {
@@ -272,6 +303,7 @@ a:not([href]):not([class]):hover {
       color: $gray-400;
       font-weight: $font-weight-bold;
     }
+    margin-top: 0.5rem;
   }
 
   .td-sidebar-link {
@@ -283,17 +315,17 @@ a:not([href]):not([class]):hover {
     &__section {
       margin-top: 1rem;
       font-family:
-        "Qanelas Soft",
+        'Qanelas Soft',
         sans-serif,
         -apple-system,
         BlinkMacSystemFont,
-        "Segoe UI",
+        'Segoe UI',
         Roboto,
-        "Helvetica Neue",
+        'Helvetica Neue',
         Arial,
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol";
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol';
     }
   }
 
@@ -306,14 +338,20 @@ a:not([href]):not([class]):hover {
     &.active:not(.tree-root) {
       border-width: 1px;
       border-style: solid;
-      border-image: linear-gradient(to left,
+      border-image: linear-gradient(
+          to left,
           rgba($dark, 0) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%) 1;
-      background-image: linear-gradient(to left,
+          $primary 90% 100%
+        )
+        1;
+      background-image: linear-gradient(
+          to left,
           rgba($dark, 0.2) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%) 1;
+          $primary 90% 100%
+        )
+        1;
       padding: 0.25rem;
       padding-left: 0.5rem !important;
       // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
@@ -336,12 +374,38 @@ a:not([href]):not([class]):hover {
   margin-top: 0rem;
   line-height: 1.25rem;
   border-left: 1px solid $border-color;
-  background-image: linear-gradient(to top,
-      #1e2117,
-      #1d1912,
-      #18120e,
-      #0f0a09,
-      #000000);
+  background-image: linear-gradient(
+    to top,
+    #1e2117,
+    #1d1912,
+    #18120e,
+    #0f0a09,
+    #000000
+  );
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+
+  nav {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  a {
+    display: block;
+    max-width: 100%;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3) !important;
+    border-radius: 999px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.45) !important;
+    }
+  }
 
   @supports (position: sticky) {
     position: sticky;
@@ -382,7 +446,9 @@ a:not([href]):not([class]):hover {
       color: $lightslategray;
       padding: 0.25rem 0.5rem;
       border-radius: 4px;
-      transition: background-color 0.2s ease, color 0.2s ease;
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
 
       &:hover,
       &:focus-visible {
@@ -398,7 +464,7 @@ a:not([href]):not([class]):hover {
 .pageinfo {
   font-weight: $font-weight-medium;
   background: $black;
-  font-family: "Open Sans";
+  font-family: 'Open Sans';
   border-style: solid;
   border-color: #00b39f;
 }
@@ -407,7 +473,7 @@ a:not([href]):not([class]):hover {
 .matterinfo {
   font-weight: $font-weight-medium;
   background: $black;
-  font-family: "Qanelas Soft";
+  font-family: 'Qanelas Soft';
   border-color: #00b39f;
   border-radius: 10px;
 }
@@ -423,13 +489,13 @@ a:not([href]):not([class]):hover {
 }
 
 .matterinfo .plan-support {
-  padding: .5rem;
-  border: .5px solid $border-color;
+  padding: 0.5rem;
+  border: 0.5px solid $border-color;
   display: flex;
   align-items: center;
   color: $casper;
   &:hover {
-    background-color: rgba($primary, 0.3)
+    background-color: rgba($primary, 0.3);
   }
 }
 
@@ -449,7 +515,6 @@ a:not([href]):not([class]):hover {
   color: $casper;
 }
 
-
 // Style alert boxes.
 
 .alert {
@@ -476,12 +541,12 @@ a:not([href]):not([class]):hover {
   transition: color 0.8s;
   transition: background-color 0.8s;
 
-  >img {
+  > img {
     width: 2rem;
     margin-right: 0.5rem;
   }
 
-  >img:hover {
+  > img:hover {
     filter: brightness(0) invert(1);
   }
 
@@ -504,7 +569,7 @@ a:not([href]):not([class]):hover {
 .td-content figure > img {
   width: auto;
   max-width: 100%;
-  border-radius: .5rem .5rem 0 0;
+  border-radius: 0.5rem 0.5rem 0 0;
   box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);
   transition: box-shadow 0.2s;
 }
@@ -515,7 +580,7 @@ a:not([href]):not([class]):hover {
   padding: 0.5rem 1rem;
   background-color: rgba($lightslategray, 1);
   color: $dark;
-  border-radius: 0 0 .5rem .5rem;
+  border-radius: 0 0 0.5rem 0.5rem;
   box-sizing: border-box;
 }
 
@@ -524,8 +589,13 @@ a:not([href]):not([class]):hover {
   margin-bottom: 4rem;
   font-size: 5rem;
   text-align: left;
-  background-image: 
-    linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.9) 0px,
+    rgb(0, 211, 169) 34%,
+    rgb(235, 192, 23) 71%,
+    rgb(255, 243, 197) 100%
+  );
   background-position:
     0% 0%,
     0% 0%;
@@ -554,16 +624,17 @@ a:not([href]):not([class]):hover {
   }
 }
 
-
 .dash-tangle {
   width: 78.14231rem;
   height: 74.72rem;
   transform: rotate(-55.68deg);
   flex-shrink: 0;
   overflow: hidden;
-  background-image: linear-gradient(180deg,
-      rgba(0, 179, 115, 0) 0%,
-      rgba(0, 179, 159, 0.3) 100%);
+  background-image: linear-gradient(
+    180deg,
+    rgba(0, 179, 115, 0) 0%,
+    rgba(0, 179, 159, 0.3) 100%
+  );
   position: absolute;
   top: -18rem;
   right: -32rem;
@@ -592,13 +663,15 @@ a:not([href]):not([class]):hover {
   left: -24rem;
   overflow: hidden;
 
-  >.dash-ircle {
+  > .dash-ircle {
     width: 74.125rem;
     height: 74.125rem;
     flex-shrink: 0;
-    background: radial-gradient(50% 50% at 50% 50%,
-        rgba(0, 179, 159, 0.2) 0%,
-        rgba(0, 179, 159, 0) 100%);
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgba(0, 179, 159, 0.2) 0%,
+      rgba(0, 179, 159, 0) 100%
+    );
     position: absolute;
     overflow: hidden;
     background-clip: border-box;
@@ -620,11 +693,11 @@ a:not([href]):not([class]):hover {
 .dash-sign-container {
   display: flex;
   align-items: center;
-  justify-content: space-between; 
+  justify-content: space-between;
   text-align: right;
 
   h1.dashboard {
-    max-width: 70%;        
+    max-width: 70%;
     text-align: left;
     flex-shrink: 0;
     @media (max-width: 768px) {
@@ -660,7 +733,7 @@ a:not([href]):not([class]):hover {
     transform: translateX(0%) translateY(0%);
 
     &:hover {
-      color: #EBC017;
+      color: #ebc017;
     }
 
     @media (max-width: 768px) {
@@ -670,7 +743,7 @@ a:not([href]):not([class]):hover {
 
   a.dash-sign:before,
   a.dash-sign:after {
-    content: "";
+    content: '';
     padding: 0.9em 0.4em;
     position: absolute;
     left: 50%;
@@ -745,8 +818,8 @@ a:not([href]):not([class]):hover {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .nav-tabs::-webkit-scrollbar {
@@ -815,7 +888,12 @@ html {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-top: 1rem;
 }
 
diff --git a/layouts/404.html b/layouts/404.html
index 410580771b7..a51a4bd2228 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js">
+<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Name }}" dir="{{ .Site.Language.Direction }}" class="no-js">
   <head>
     {{ partial "head.html" . }}
   </head>
@@ -32,6 +32,11 @@ <h1>Not found</h1>
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
+    {{ $resizablePanels := resources.Get "js/resizable-panels.js" -}}
+    {{ if $resizablePanels }}
+      {{ $resizablePanels = $resizablePanels | minify | fingerprint -}}
+      <script defer src="{{ $resizablePanels.RelPermalink }}" integrity="{{ $resizablePanels.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
   </body>
 </html>
 
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 3503963fb79..c2e7829c51b 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js">
+<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Name }}" dir="{{ .Site.Language.Direction }}" class="no-js">
 
 <head>
   {{ partial "head.html" . }}
@@ -37,6 +37,11 @@
     {{ partial "footer.html" . }}
   </div>
   {{ partial "scripts.html" . }}
+  {{ $resizablePanels := resources.Get "js/resizable-panels.js" -}}
+  {{ if $resizablePanels }}
+    {{ $resizablePanels = $resizablePanels | minify | fingerprint -}}
+    <script defer src="{{ $resizablePanels.RelPermalink }}" integrity="{{ $resizablePanels.Data.Integrity }}" crossorigin="anonymous"></script>
+  {{ end -}}
   {{ partial "image-modal.html" . }}
 </body>
 
diff --git a/layouts/release/baseof.html b/layouts/release/baseof.html
index 2145f978f24..b7750a7b53b 100644
--- a/layouts/release/baseof.html
+++ b/layouts/release/baseof.html
@@ -2,7 +2,7 @@
 <html
   itemscope
   itemtype="http://schema.org/WebPage"
-  lang="{{ .Site.Language.Lang }}"
+  lang="{{ .Site.Language.Name }}"
   dir="{{ .Site.Language.Direction }}"
   class="no-js"
 >
@@ -32,6 +32,12 @@
       </div>
       {{ partial "footer.html" . }}
     </div>
-    {{ partial "scripts.html" . }} {{ partial "image-modal.html" . }}
+    {{ partial "scripts.html" . }}
+    {{ $resizablePanels := resources.Get "js/resizable-panels.js" -}}
+    {{ if $resizablePanels }}
+      {{ $resizablePanels = $resizablePanels | minify | fingerprint -}}
+      <script defer src="{{ $resizablePanels.RelPermalink }}" integrity="{{ $resizablePanels.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/video/baseof.html b/layouts/video/baseof.html
index 395dec3e888..9e859b35451 100644
--- a/layouts/video/baseof.html
+++ b/layouts/video/baseof.html
@@ -2,7 +2,7 @@
 <html
   itemscope
   itemtype="http://schema.org/WebPage"
-  lang="{{ .Site.Language.Lang }}"
+  lang="{{ .Site.Language.Name }}"
   dir="{{ .Site.Language.Direction }}"
   class="no-js"
 >
@@ -32,6 +32,12 @@
       </div>
       {{ partial "footer.html" . }}
     </div>
-    {{ partial "scripts.html" . }} {{ partial "image-modal.html" . }}
+    {{ partial "scripts.html" . }}
+    {{ $resizablePanels := resources.Get "js/resizable-panels.js" -}}
+    {{ if $resizablePanels }}
+      {{ $resizablePanels = $resizablePanels | minify | fingerprint -}}
+      <script defer src="{{ $resizablePanels.RelPermalink }}" integrity="{{ $resizablePanels.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>