diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
index 17dc506dc..8f78192d7 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
@@ -36,52 +36,52 @@
 
     <div class="row g-3 mt-md-5">
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/accordion">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Accordion_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ChevronBarExpand" class="me-2" /> Accordion</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/alerts">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Alerts_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CheckCircleFill" class="me-2" /> Alerts</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/autocomplete">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_AutoComplete_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursorText" class="me-2" /> Auto Complete</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/badge">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Badge_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.AppIndicator" class="me-2" /> Badge</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/breadcrumb">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Breadcrumb_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.SegmentedNav" class="me-2" /> Breadcrumb</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/buttons">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Buttons_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Buttons</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/callout">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Callout_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.StickyFill" class="me-2" /> Callout</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/card">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Card_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CardHeading" class="me-2" /> Card</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/carousel">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Carousel_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CollectionPlayFill" class="me-2" /> Carousel</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Charts_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts</h4>
             </a>
         </div>
@@ -91,97 +91,97 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/collapse">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Collapse_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsCollapse" class="me-2" /> Collapse</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/confirm-dialog">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_ConfirmDialog_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/currency-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_CurrencyInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CurrencyDollar" class="me-2" /> Currency Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/date-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_DateInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CalendarDate" class="me-2" /> Date Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/dropdown">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Dropdown_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/google-map">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_GoogleMap_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Map</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/grid/overview">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Overview_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Grid3X2" class="me-2" /> Grid <Badge Color="BadgeColor.Success">Updated</Badge></h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/icons">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Icons_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PersonSquare" class="me-2" /> Icons</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/images">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Images_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Image" class="me-2" /> Images</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Markdown_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/modals">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Modal_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/number-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_NumberInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/password-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_PasswordInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.EyeSlashFill" class="me-2" /> Password Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/offcanvas">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Offcanvas_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarReverse" class="me-2" /> Offcanvas</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pagination">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Pagination_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ThreeDots" class="me-2" /> Pagination</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_PDFViewer_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/placeholders">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Placeholders_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ColumnsGap" class="me-2" /> Placeholders</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/preload">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Preload_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowClockwise" class="me-2" /> Preload</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/progress">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Progress_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.UsbC" class="me-2" /> Progress</h4>
             </a>
         </div>
@@ -191,17 +191,17 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/range-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_RangeInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Ribbon_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/script-loader">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_ScriptLoader_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CodeSlash" class="me-2" /> Script Loader</h4>
             </a>
         </div>
@@ -211,32 +211,32 @@
             </a>
         </div> *@
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Sidebar_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Sidebar2_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sortable-list">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_SortableList_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsMove" class="me-2" /> Sortable List</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/spinners">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Spinners_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowRepeat" class="me-2" /> Spinners</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/switch">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Switch_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Switch</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/tabs">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Tabs_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowPlus" class="me-2" /> Tabs</h4>
             </a>
         </div>
@@ -251,22 +251,22 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/time-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_TimeInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ClockFill" class="me-2" /> Time Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/theme-switcher">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_ThemeSwitcher_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.NintendoSwitch" class="me-2" /> Theme Switcher</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/toasts">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Toasts_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ExclamationTriangleFill" class="me-2" /> Toasts</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/tooltips">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Tooltips_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ChatSquareDotsFill" class="me-2" /> Tooltips</h4>
             </a>
         </div>
@@ -280,7 +280,7 @@
 
     <div class="row g-3 mt-5">
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/autocomplete">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_AutoComplete_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursorText" class="me-2" /> Auto Complete</h4>
             </a>
         </div>
@@ -290,22 +290,22 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/currency-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_CurrencyInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CurrencyDollar" class="me-2" /> Currency Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/date-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_DateInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CalendarDate" class="me-2" /> Date Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/number-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_NumberInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/password-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_PasswordInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.EyeSlashFill" class="me-2" /> Password Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
             </a>
         </div>
@@ -315,7 +315,7 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/range-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_RangeInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
             </a>
         </div>
@@ -325,7 +325,7 @@
             </a>
         </div> *@
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/switch">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Switch_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Switch</h4>
             </a>
         </div>
@@ -340,7 +340,7 @@
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/time-input">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_TimeInput_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ClockFill" class="me-2" /> Time Input</h4>
             </a>
         </div>
@@ -354,37 +354,37 @@
 
     <div class="row g-3 mt-5">
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/bar-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_BarChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartFill" class="me-2" /> Bar Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/doughnut-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_DoughnutChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CircleFill" class="me-2" /> Doughnut Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/line-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_LineChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/pie-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_PieChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChart" class="me-2" /> Pie Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/polar-area-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_PolarAreaChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChartFill" class="me-2" /> Polar Area Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/radar-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_RadarChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Radar" class="me-2" /> Radar Chart</h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/scatter-chart">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_ScatterChart_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUpArrow" class="me-2" /> Scatter Chart</h4>
             </a>
         </div>
@@ -398,7 +398,7 @@
 
     <div class="row g-3 mt-5">
         <div class="col-sm-4 mb-2">
-            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/utils/color-utility">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_ColorUtils_Documentation">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Palette2" class="me-2" /> Color Utility </h4>
             </a>
         </div>