diff --git a/layouts/index.qmd b/layouts/index.qmd
index 004a62fe..7ccff23d 100644
--- a/layouts/index.qmd
+++ b/layouts/index.qmd
@@ -48,14 +48,14 @@ Shiny Layouts
 ::: {.sticky-xl-top .pt-4}
 
 <h3 class="mt-4">
-  <a href="navbars/" class="dark text-decoration-none">
+  <a href="navbars" class="dark text-decoration-none">
     <img src="/images/navbars-blue.svg" class="me-2" style="height: 34px;margin-bottom:7px;">Navbars
   </a>
 </h3>
 
 A navbar adds a navigation bar to your app, allowing users to easily navigate your app.
 
-<a href="navbars/" class="fw-500">Learn Navbars <i class="bi bi-chevron-right"></i></a>
+<a href="navbars" class="fw-500">Learn Navbars <i class="bi bi-chevron-right"></i></a>
 :::
 ::::
 :::: {.g-col-xl-9 .g-col-12 .pt-3 .pt-xl-5 .ps-0 .ps-xl-5 .ms-0 .ms-xl-4}
@@ -63,17 +63,17 @@ A navbar adds a navigation bar to your app, allowing users to easily navigate yo
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="navbars/index.html#navbar-at-top">
+<a class="component-list-header-text" href="navbars/#navbar-at-top">
 <h5>Navbar at Top</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="navbars/index.html#navbar-at-top">
+<p class="my-0"><a class="text-decoration-none dark" href="navbars/#navbar-at-top">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="navbars/index.html#navbar-at-top"><img src="/images/navbar-top.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="navbars/#navbar-at-top"><img src="/images/navbar-top.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -81,17 +81,17 @@ A navbar adds a navigation bar to your app, allowing users to easily navigate yo
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="navbars/index.html#navbar-at-bottom">
+<a class="component-list-header-text" href="navbars/#navbar-at-bottom">
 <h5>Navbar at Bottom</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="navbars/index.html#navbar-at-bottom">
+<p class="my-0"><a class="text-decoration-none dark" href="navbars/#navbar-at-bottom">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="navbars/index.html#navbar-at-bottom"><img src="/images/navbar-bottom.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="navbars/#navbar-at-bottom"><img src="/images/navbar-bottom.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -110,14 +110,14 @@ A navbar adds a navigation bar to your app, allowing users to easily navigate yo
 
 
 <h3 class="mt-4">
-  <a href="sidebars/" class="dark text-decoration-none">
+  <a href="sidebars" class="dark text-decoration-none">
     <img src="/images/sidebars-blue.svg" class="me-2" style="height: 34px;margin-bottom:7px;">Sidebars
   </a>
 </h3>
 
 A sidebar layout creates a sidebar, typically used for inputs, and a large main area, typically used for outputs.
 
-<a href="sidebars/" class="fw-500">Learn Sidebars <i class="bi bi-chevron-right"></i></a>
+<a href="sidebars" class="fw-500">Learn Sidebars <i class="bi bi-chevron-right"></i></a>
 
 :::
 ::::
@@ -128,17 +128,17 @@ A sidebar layout creates a sidebar, typically used for inputs, and a large main
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="sidebars/index.html#sidebar-on-the-left">
+<a class="component-list-header-text" href="sidebars/#sidebar-on-the-left">
 <h5>Sidebar on the Left</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="sidebars/index.html#sidebar-on-the-left">
+<p class="my-0"><a class="text-decoration-none dark" href="sidebars/#sidebar-on-the-left">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/index.html#sidebar-on-the-left"><img src="/images/sidebar-left.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/#sidebar-on-the-left"><img src="/images/sidebar-left.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -146,17 +146,17 @@ A sidebar layout creates a sidebar, typically used for inputs, and a large main
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="sidebars/index.html#sidebar-on-the-right">
+<a class="component-list-header-text" href="sidebars/#sidebar-on-the-right">
 <h5>Sidebar on the Right</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="sidebars/index.html#sidebar-on-the-right">
+<p class="my-0"><a class="text-decoration-none dark" href="sidebars/#sidebar-on-the-right">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/index.html#sidebar-on-the-right"><img src="/images/sidebar-right.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/#sidebar-on-the-right"><img src="/images/sidebar-right.png" class="h-100 w-100"></a></p>
 
 </div>
 </div>
@@ -164,34 +164,34 @@ A sidebar layout creates a sidebar, typically used for inputs, and a large main
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="sidebars/index.html#sidebar-within-a-card">
+<a class="component-list-header-text" href="sidebars/#sidebar-within-a-card">
 <h5>Sidebar Within a Card</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="sidebars/index.html#sidebar-within-a-card">
+<p class="my-0"><a class="text-decoration-none dark" href="sidebars/#sidebar-within-a-card">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/index.html#sidebar-within-a-card"><img src="/images/sidebar-left-card.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/#sidebar-within-a-card"><img src="/images/sidebar-left-card.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="sidebars/index.html#collapsed-sidebar">
+<a class="component-list-header-text" href="sidebars/#collapsed-sidebar">
 <h5>Collapsed Sidebar</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="sidebars/index.html#collapsed-sidebar">
+<p class="my-0"><a class="text-decoration-none dark" href="sidebars/#collapsed-sidebar">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/index.html#collapsed-sidebar"><img src="/images/sidebar-collapsed.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="sidebars/#collapsed-sidebar"><img src="/images/sidebar-collapsed.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -208,14 +208,14 @@ A sidebar layout creates a sidebar, typically used for inputs, and a large main
 
 
 <h3 class="mt-4">
-  <a href="tabs/" class="dark text-decoration-none">
+  <a href="tabs" class="dark text-decoration-none">
     <img src="/images/tabs-blue.svg" class="me-2" style="height: 34px;margin-bottom:7px;">Tabs
   </a>
 </h3>
 
 Tabs and navigation allow you to create apps that have multiple pages.
 
-<a href="tabs/" class="fw-500">Learn Tabs <i class="bi bi-chevron-right"></i></a>
+<a href="tabs" class="fw-500">Learn Tabs <i class="bi bi-chevron-right"></i></a>
 :::
 ::::
 :::: {.g-col-xl-9 .g-col-12 .pt-3 .pt-xl-5 .ps-0 .ps-xl-5 .ms-0 .ms-xl-4}
@@ -225,17 +225,17 @@ Tabs and navigation allow you to create apps that have multiple pages.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#tabset-with-pill-navigation">
+<a class="component-list-header-text" href="tabs/#tabset-with-pill-navigation">
 <h5>Tabset with Pill Nav</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#tabset-with-pill-navigation">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#tabset-with-pill-navigation">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#tabset-with-pill-navigation"><img src="/images/tabset-pill.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#tabset-with-pill-navigation"><img src="/images/tabset-pill.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -243,34 +243,34 @@ Tabs and navigation allow you to create apps that have multiple pages.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#tabset-with-pill-list-navigation">
+<a class="component-list-header-text" href="tabs/#tabset-with-pill-list-navigation">
 <h5>Tabset with Pill List Nav</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#tabset-with-pill-list-navigation">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#tabset-with-pill-list-navigation">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#tabset-with-pill-list-navigation"><img src="/images/tabset-pill-list.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#tabset-with-pill-list-navigation"><img src="/images/tabset-pill-list.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#tabset-with-tab-navigation">
+<a class="component-list-header-text" href="tabs/#tabset-with-tab-navigation">
 <h5>Tabset with Tab Nav</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#tabset-with-tab-navigation">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#tabset-with-tab-navigation">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#tabset-with-tab-navigation"><img src="/images/tabset-tab.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#tabset-with-tab-navigation"><img src="/images/tabset-tab.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -278,18 +278,18 @@ Tabs and navigation allow you to create apps that have multiple pages.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#card-with-a-tabbed-tabset">
+<a class="component-list-header-text" href="tabs/#card-with-a-tabbed-tabset">
 <h5>Card with a tabbed tabset
 </h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#card-with-a-tabbed-tabset">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#card-with-a-tabbed-tabset">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#card-with-a-tabbed-tabset"><img src="/images/tabset-tab-card.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#card-with-a-tabbed-tabset"><img src="/images/tabset-tab-card.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -297,34 +297,34 @@ Tabs and navigation allow you to create apps that have multiple pages.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#card-with-a-pill-tabset">
+<a class="component-list-header-text" href="tabs/#card-with-a-pill-tabset">
 <h5>Card with a pill tabset</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#card-with-a-pill-tabset">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#card-with-a-pill-tabset">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#card-with-a-pill-tabset"><img src="/images/tabset-pill-card.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#card-with-a-pill-tabset"><img src="/images/tabset-pill-card.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="tabs/index.html#vertically-collapsing-accordion-panels">
+<a class="component-list-header-text" href="tabs/#vertically-collapsing-accordion-panels">
 <h5>Collapsing accordion panels</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="tabs/index.html#vertically-collapsing-accordion-panels">
+<p class="my-0"><a class="text-decoration-none dark" href="tabs/#vertically-collapsing-accordion-panels">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/index.html#vertically-collapsing-accordion-panels"><img src="/images/accordion.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="tabs/#vertically-collapsing-accordion-panels"><img src="/images/accordion.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -339,14 +339,14 @@ Tabs and navigation allow you to create apps that have multiple pages.
 ::: {.sticky-xl-top .pt-4}
 
 <h3 class="mt-4">
-  <a href="panels-cards/" class="dark text-decoration-none">
+  <a href="panels-cards" class="dark text-decoration-none">
     <img src="/images/cards-blue.svg" class="me-2" style="height: 34px;margin-bottom:7px;">Panels & Cards
   </a>
 </h3>
 
 Use panels and cards to define areas of related content.
 
-<a href="panels-cards/" class="fw-500">Learn Panels & Cards <i class="bi bi-chevron-right"></i></a>
+<a href="panels-cards" class="fw-500">Learn Panels & Cards <i class="bi bi-chevron-right"></i></a>
 :::
 ::::
 :::: {.g-col-xl-9 .g-col-12 .pt-3 .pt-xl-5 .ps-0 .ps-xl-5 .ms-0 .ms-xl-4}
@@ -356,17 +356,17 @@ Use panels and cards to define areas of related content.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="panels-cards/index.html#main-image-with-panel-floating-above">
+<a class="component-list-header-text" href="panels-cards/#main-image-with-panel-floating-above">
 <h5>Main image with panel floating above</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="panels-cards/index.html#main-image-with-panel-floating-above">
+<p class="my-0"><a class="text-decoration-none dark" href="panels-cards/#main-image-with-panel-floating-above">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="panels-cards/index.html#main-image-with-panel-floating-above"><img src="/images/drag.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="panels-cards/#main-image-with-panel-floating-above"><img src="/images/drag.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -374,17 +374,17 @@ Use panels and cards to define areas of related content.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="panels-cards/index.html#content-divided-by-cards">
+<a class="component-list-header-text" href="panels-cards/#content-divided-by-cards">
 <h5>Content divided by bounding boxes (cards)</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="panels-cards/index.html#content-divided-by-cards">
+<p class="my-0"><a class="text-decoration-none dark" href="panels-cards/#content-divided-by-cards">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="component-list-header-text" href="panels-cards/index.html#content-divided-by-cards"><img src="/images/two-cards.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="component-list-header-text" href="panels-cards/#content-divided-by-cards"><img src="/images/two-cards.png" class="h-100 w-100"></a></p>
 
 </div>
 </div>
@@ -402,14 +402,14 @@ Use panels and cards to define areas of related content.
 ::: {.sticky-xl-top .pt-4}
 
 <h3 class="mt-4">
-  <a href="arrange/" class="dark text-decoration-none">
+  <a href="arrange" class="dark text-decoration-none">
     <img src="/images/arrange-blue.svg" class="me-2" style="height: 34px;margin-bottom:7px;">Arrange Elements
   </a>
 </h3>
 
 Use rows and columns to create your own layout for every device size.
 
-<a href="arrange/" class="fw-500">Arrange Elements <i class="bi bi-chevron-right"></i></a>
+<a href="arrange" class="fw-500">Arrange Elements <i class="bi bi-chevron-right"></i></a>
 
 :::
 ::::
@@ -420,17 +420,17 @@ Use rows and columns to create your own layout for every device size.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="arrange/index.html#grid-layouts">
+<a class="component-list-header-text" href="arrange/#grid-layouts">
 <h5>Grid Layouts</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="arrange/index.html#grid-layouts">
+<p class="my-0"><a class="text-decoration-none dark" href="arrange/#grid-layouts">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/index.html#grid-layouts"><img src="/images/grid-layout.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/#grid-layouts"><img src="/images/grid-layout.png" class="h-100 w-100"></a></p>
 </div>
 </div>
 
@@ -438,17 +438,17 @@ Use rows and columns to create your own layout for every device size.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="arrange/index.html#column-nesting">
+<a class="component-list-header-text" href="arrange/#column-nesting">
 <h5>Column nesting</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="arrange/index.html#column-nesting">
+<p class="my-0"><a class="text-decoration-none dark" href="arrange/#column-nesting">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/index.html#column-nesting"><img src="/images/column-nesting.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/#column-nesting"><img src="/images/column-nesting.png" class="h-100 w-100"></a></p>
 
 </div>
 </div>
@@ -456,17 +456,17 @@ Use rows and columns to create your own layout for every device size.
 
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
-<a class="component-list-header-text" href="arrange/index.html#controlling-for-page-width-and-height">
+<a class="component-list-header-text" href="arrange/#controlling-for-page-width-and-height">
 <h5>Control for page size</h5>
 </a>
 <div class="component-list-icon">
-<p class="my-0"><a class="text-decoration-none dark" href="arrange/index.html#controlling-for-page-width-and-height">
+<p class="my-0"><a class="text-decoration-none dark" href="arrange/#controlling-for-page-width-and-height">
 <i class="component-link-icon dark bi fst-normal"></i>
 </a></p>
 </div>
 </div>
 <div class="component-list-card layout-list-card">
-<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/index.html#controlling-for-page-width-and-height"><img src="/images/controlling.png" class="h-100 w-100"></a></p>
+<p class="my-0 h-100 w-100"><a class="layout-list-image" href="arrange/#controlling-for-page-width-and-height"><img src="/images/controlling.png" class="h-100 w-100"></a></p>
 </div>
 </div>