diff --git a/src/html/components/_head.astro b/src/html/components/_head.astro
index 5a71c4fe6..82d24075e 100644
--- a/src/html/components/_head.astro
+++ b/src/html/components/_head.astro
@@ -1,6 +1,5 @@
 ---
 const { title, path, isRtl } = Astro.props
-const distPath = (path != undefined) ? path : '../../../dist'
 const cssPath = isRtl ? '.rtl' : ''
 ---
 
@@ -29,4 +28,4 @@ const cssPath = isRtl ? '.rtl' : ''
 <!-- REQUIRED LINKS -->
 
 <!-- Theme style -->
-<link rel="stylesheet" href={distPath + '/css/adminlte' + cssPath + '.css'} >
+<link rel="stylesheet" href={path + '/css/adminlte' + cssPath + '.css'} >
diff --git a/src/html/components/_scripts.astro b/src/html/components/_scripts.astro
index 775345d82..53ff4da43 100644
--- a/src/html/components/_scripts.astro
+++ b/src/html/components/_scripts.astro
@@ -1,7 +1,6 @@
 ---
 const { path } = Astro.props
-const distPath = (path != undefined) ? path : '../../../dist'
-const adminlteJsUrl = distPath + '/js/adminlte.js'
+const adminlteJsUrl = path + '/js/adminlte.js'
 ---
 <!-- OPTIONAL SCRIPTS -->
 <!-- overlayscrollbars -->
diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index e897415fd..21ff2d382 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -1,13 +1,14 @@
 ---
+import { convertPathToHtml } from '../../../utils/index.js';
 const { path, mainPage, page } = Astro.props
-const distPath = (path != undefined) ? path : '../../../dist'
-const htmlPath = (path != undefined) ? '.' : '..'
+const htmlPath = convertPathToHtml(path)
 ---
+
 <!-- Sidebar Container -->
 <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
   <div class="sidebar-brand">
     <a href={htmlPath + '/index.html'} class="brand-link">
-      <img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+      <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
   </div>
diff --git a/src/html/components/dashboard/_topbar.astro b/src/html/components/dashboard/_topbar.astro
index dc39d47d0..5e628cc80 100644
--- a/src/html/components/dashboard/_topbar.astro
+++ b/src/html/components/dashboard/_topbar.astro
@@ -1,6 +1,6 @@
 ---
 const { path } = Astro.props
-const distPath = (path != undefined) ? path : '../../../dist'
+const distPath = path
 ---
 <!-- Navbar -->
 <nav class="app-header navbar navbar-expand bg-body">
diff --git a/src/html/pages/UI/timeline.astro b/src/html/pages/UI/timeline.astro
index ce9ba57ec..966f37d9a 100644
--- a/src/html/pages/UI/timeline.astro
+++ b/src/html/pages/UI/timeline.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Timeline Elements'
+const path = '../../../dist'
 const mainPage = 'ui-elements'
 const page = 'timeline'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -106,10 +107,10 @@ const page = 'timeline'
                       <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
                       <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
                       <div class="timeline-body">
-                        <img src="../../assets/img/user1-128x128.jpg" alt="...">
-                        <img src="../../assets/img/user3-128x128.jpg" alt="...">
-                        <img src="../../assets/img/user4-128x128.jpg" alt="...">
-                        <img src="../../assets/img/user5-128x128.jpg" alt="...">
+                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
                       </div>
                     </div>
                   </div>
@@ -152,6 +153,6 @@ const page = 'timeline'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/docs/color-mode.astro b/src/html/pages/docs/color-mode.astro
index 41ce69ae2..89479431e 100644
--- a/src/html/pages/docs/color-mode.astro
+++ b/src/html/pages/docs/color-mode.astro
@@ -7,6 +7,7 @@ import Scripts from "@components/_scripts.astro";
 import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
 import ToggleScript from "@components/docs/color-mode/toggle-script.md";
 const title = "AdminLTE 4 | General Form Elements";
+const path = '../../../dist'
 const mainPage = "forms";
 const page = "general";
 ---
@@ -14,12 +15,12 @@ const page = "general";
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -146,7 +147,7 @@ const page = "general";
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
 
     <script is:inline>
       // Color Mode Toggler
diff --git a/src/html/pages/examples/login.astro b/src/html/pages/examples/login.astro
index 3d77b0a01..6584d196b 100644
--- a/src/html/pages/examples/login.astro
+++ b/src/html/pages/examples/login.astro
@@ -3,13 +3,13 @@ import Head from '@components/_head.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Login Page'
-const { path } = Astro.props
-const htmlPath = (path != undefined) ? '.' : '..'
+const path = '../../../dist'
+const htmlPath = '..'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="login-page bg-body-secondary">
     <div class="login-box">
@@ -76,6 +76,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
     </div>
     <!-- /.login-box -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/examples/register.astro b/src/html/pages/examples/register.astro
index 3efbe0351..5dd178158 100644
--- a/src/html/pages/examples/register.astro
+++ b/src/html/pages/examples/register.astro
@@ -3,13 +3,13 @@ import Head from '@components/_head.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Register Page'
-const { path } = Astro.props
-const htmlPath = (path != undefined) ? '.' : '..'
+const path = '../../../dist'
+const htmlPath = '..'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="register-page bg-body-secondary">
     <div class="register-box">
@@ -79,6 +79,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
     </div>
     <!-- /.register-box -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro
index ab1f3f81d..5f84b2c64 100644
--- a/src/html/pages/forms/general.astro
+++ b/src/html/pages/forms/general.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | General Form Elements'
+const path = '../../../dist'
 const mainPage = 'forms'
 const page = 'general'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -87,6 +88,6 @@ const page = 'general'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/layout/fixed-sidebar.astro b/src/html/pages/layout/fixed-sidebar.astro
index 7c8e48503..c63ada248 100644
--- a/src/html/pages/layout/fixed-sidebar.astro
+++ b/src/html/pages/layout/fixed-sidebar.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Fixed Sidebar'
+const path = '../../../dist'
 const mainPage = 'layout'
 const page = 'fixed-sidebar'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
       <!-- Main content -->
       <main class="app-main">
@@ -78,6 +79,6 @@ const page = 'fixed-sidebar'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/layout/layout-rtl.astro b/src/html/pages/layout/layout-rtl.astro
index 2ef196d7e..8645f2934 100644
--- a/src/html/pages/layout/layout-rtl.astro
+++ b/src/html/pages/layout/layout-rtl.astro
@@ -6,6 +6,7 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Layout RTL'
+const path = '../../../dist'
 const mainPage = 'layout'
 const page = 'layout-rtl'
 const isRtl = true
@@ -17,8 +18,8 @@ const isRtl = true
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -78,6 +79,6 @@ const isRtl = true
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/layout/sidebar-mini.astro b/src/html/pages/layout/sidebar-mini.astro
index 300e96d8e..f998388ff 100644
--- a/src/html/pages/layout/sidebar-mini.astro
+++ b/src/html/pages/layout/sidebar-mini.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Sidebar Mini'
+const path = '../../../dist'
 const mainPage = 'layout'
 const page = 'sidebar-mini'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -77,6 +78,6 @@ const page = 'sidebar-mini'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/layout/unfixed-sidebar.astro b/src/html/pages/layout/unfixed-sidebar.astro
index 94424851e..c5feac9b0 100644
--- a/src/html/pages/layout/unfixed-sidebar.astro
+++ b/src/html/pages/layout/unfixed-sidebar.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Unfixed Sidebar'
+const path = '../../../dist'
 const mainPage = 'layout'
 const page = 'unfixed-sidebar'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -77,6 +78,6 @@ const page = 'unfixed-sidebar'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/tables/simple.astro b/src/html/pages/tables/simple.astro
index 1463242ec..d64d9b9f2 100644
--- a/src/html/pages/tables/simple.astro
+++ b/src/html/pages/tables/simple.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Simple Tables'
+const path = '../../../dist'
 const mainPage = 'tables'
 const page = 'simple'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -326,6 +327,6 @@ const page = 'simple'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/widgets/cards.astro b/src/html/pages/widgets/cards.astro
index af34b405d..f75c0a355 100644
--- a/src/html/pages/widgets/cards.astro
+++ b/src/html/pages/widgets/cards.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Widgets - Cards'
+const path = '../../../dist'
 const mainPage = 'widgets'
 const page = 'cards'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -302,6 +303,6 @@ const page = 'cards'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/widgets/info-box.astro b/src/html/pages/widgets/info-box.astro
index f3e917bd8..8f4d39374 100644
--- a/src/html/pages/widgets/info-box.astro
+++ b/src/html/pages/widgets/info-box.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Widgets - Info Box'
+const path = '../../../dist'
 const mainPage = 'widgets'
 const page = 'info-box'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -352,6 +353,6 @@ const page = 'info-box'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/html/pages/widgets/small-box.astro b/src/html/pages/widgets/small-box.astro
index 282f376d4..ca4db02a3 100644
--- a/src/html/pages/widgets/small-box.astro
+++ b/src/html/pages/widgets/small-box.astro
@@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
 import Scripts from '@components/_scripts.astro';
 
 const title = 'AdminLTE 4 | Widgets - Small Box'
+const path = '../../../dist'
 const mainPage = 'widgets'
 const page = 'small-box'
 ---
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <Head title={title} />
+    <Head title={title} path={path} />
   </head>
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
-      <Topbar />
-      <Sidenav mainPage={mainPage} page={page} />
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
       <!-- Main content -->
       <main class="app-main">
         <div class="app-content-header">
@@ -115,6 +116,6 @@ const page = 'small-box'
     </div>
     <!--  ./app-wrapper -->
 
-    <Scripts />
+    <Scripts path={path} />
   </body>
 </html>
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 000000000..4230cec1b
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,27 @@
+function convertPathToHtml(path) {
+  let count = 0
+  while (path.startsWith('../')) {
+    count++
+    path = path.slice(3)
+  }
+
+  if (count === 2) {
+    return '.'
+  }
+
+  if (count === 3) {
+    return '..'
+  }
+
+  if (count === 4) {
+    return '../..'
+  }
+
+  if (count === 5) {
+    return '../../..'
+  }
+
+  return ''
+}
+
+export { convertPathToHtml }
