From e267ae1f33cd8492a26f3a67b1f633e13ba8ec80 Mon Sep 17 00:00:00 2001
From: Raphael Jackstadt <raphael@wunderbit.de>
Date: Mon, 19 Jun 2023 20:23:52 +0200
Subject: [PATCH] feat: reworked card-widget

- renamed `data-lte-dismiss="card-remove"` to `data-lte-toggle="card-remove"`
- removed icon setter/replacer
- reworked button markup
---
 src/html/components/_head.astro               |  10 +-
 src/html/components/dashboard/_sidenav.astro  | 114 +++++++++---------
 src/html/components/dashboard/_topbar.astro   |  26 ++--
 src/html/components/docs/color-mode.mdx       |  14 +--
 .../docs/components/main-header.mdx           |  26 ++--
 .../docs/components/main-sidebar.mdx          |  20 +--
 src/html/pages/UI/timeline.astro              |  22 ++--
 src/html/pages/docs/color-mode.astro          |  14 +--
 .../pages/docs/components/main-header.astro   |  26 ++--
 src/html/pages/examples/login.astro           |   8 +-
 src/html/pages/examples/register.astro        |  10 +-
 src/html/pages/index.astro                    |  20 +--
 src/html/pages/index2.astro                   |  76 ++++++------
 src/html/pages/index3.astro                   |  36 +++---
 src/html/pages/layout/collapsed-sidebar.astro |   7 +-
 src/html/pages/layout/fixed-complete.astro    |   7 +-
 src/html/pages/layout/fixed-sidebar.astro     |   7 +-
 src/html/pages/layout/layout-rtl.astro        |   7 +-
 src/html/pages/layout/logo-switch.astro       |  29 ++---
 src/html/pages/layout/sidebar-mini.astro      |   7 +-
 src/html/pages/layout/unfixed-sidebar.astro   |   7 +-
 src/html/pages/widgets/cards.astro            |  39 +++---
 src/html/pages/widgets/info-box.astro         |  32 ++---
 src/html/pages/widgets/small-box.astro        |   8 +-
 src/scss/_cards.scss                          |  21 ++++
 src/ts/card-widget.ts                         |  63 +++-------
 26 files changed, 334 insertions(+), 322 deletions(-)

diff --git a/src/html/components/_head.astro b/src/html/components/_head.astro
index 3ee308ccc2b..628de16a446 100644
--- a/src/html/components/_head.astro
+++ b/src/html/components/_head.astro
@@ -34,14 +34,14 @@ const cssPath = isRtl ? ".rtl" : "";
   crossorigin="anonymous"
 />
 <!--end::Third Party Plugin(OverlayScrollbars)-->
-<!--begin::Third Party Plugin(Font Awesome)-->
+<!--begin::Third Party Plugin(Bootstrap Icons)-->
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css"
-  integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc="
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
+  integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
   crossorigin="anonymous"
-/>
-<!--end::Third Party Plugin(Font Awesome)-->
+>
+<!--end::Third Party Plugin(Bootstrap Icons)-->
 <!--begin::Required Plugin(AdminLTE)-->
 <link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
 <!--end::Required Plugin(AdminLTE)-->
diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index 4a964de4790..106bd7e3c03 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -39,10 +39,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "dashboard" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-gauge-high"></i>
+            <i class="nav-icon bi bi-speedometer"></i>
             <p>
               Dashboard
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -51,7 +51,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/index.html"}
                 class:list={["nav-link", page === "index" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Dashboard v1</p>
               </a>
             </li>
@@ -60,7 +60,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/index2.html"}
                 class:list={["nav-link", page === "index2" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Dashboard v2</p>
               </a>
             </li>
@@ -69,7 +69,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/index3.html"}
                 class:list={["nav-link", page === "index3" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Dashboard v3</p>
               </a>
             </li>
@@ -80,10 +80,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "widgets" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-box-open"></i>
+            <i class="nav-icon bi bi-box-seam-fill"></i>
             <p>
               Widgets
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -92,7 +92,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/widgets/small-box.html"}
                 class:list={["nav-link", page === "small-box" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Small Box</p>
               </a>
             </li>
@@ -101,7 +101,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/widgets/info-box.html"}
                 class:list={["nav-link", page === "info-box" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>info Box</p>
               </a>
             </li>
@@ -110,7 +110,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/widgets/cards.html"}
                 class:list={["nav-link", page === "cards" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Cards</p>
               </a>
             </li>
@@ -121,13 +121,13 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "layout" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-copy"></i>
+            <i class="nav-icon bi bi-clipboard-fill"></i>
             <p>
               Layout Options
               <span class="nav-badge badge text-bg-secondary me-3"
                 >6</span
               >
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -139,7 +139,7 @@ const htmlPath = convertPathToHtml(path);
                   page === "unfixed-sidebar" && "active",
                 ]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Default Sidebar</p>
               </a>
             </li>
@@ -148,7 +148,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/layout/fixed-sidebar.html"}
                 class:list={["nav-link", page === "fixed-sidebar" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Fixed Sidebar</p>
               </a>
             </li>
@@ -157,7 +157,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/layout/fixed-complete.html"}
                 class:list={["nav-link", page === "fixed-complete" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Fixed Complete</p>
               </a>
             </li>
@@ -166,7 +166,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/layout/sidebar-mini.html"}
                 class:list={["nav-link", page === "sidebar-mini" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Sidebar Mini</p>
               </a>
             </li>
@@ -178,7 +178,7 @@ const htmlPath = convertPathToHtml(path);
                   page === "collapsed-sidebar" && "active",
                 ]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Sidebar Mini <small>+ Collapsed</small></p>
               </a>
             </li>
@@ -187,7 +187,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/layout/logo-switch.html"}
                 class:list={["nav-link", page === "logo-switch" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Sidebar Mini <small>+ Logo Switch</small></p>
               </a>
             </li>
@@ -196,7 +196,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/layout/layout-rtl.html"}
                 class:list={["nav-link", page === "layout-rtl" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Layout RTL</p>
               </a>
             </li>
@@ -209,10 +209,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "ui-elements" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-tree"></i>
+            <i class="nav-icon bi bi-tree-fill"></i>
             <p>
               UI Elements
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -221,7 +221,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/UI/timeline.html"}
                 class:list={["nav-link", page === "timeline" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Timeline</p>
               </a>
             </li>
@@ -232,10 +232,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "forms" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-pen-to-square"></i>
+            <i class="nav-icon bi bi-pencil-square"></i>
             <p>
               Forms
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -244,7 +244,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/forms/general.html"}
                 class:list={["nav-link", page === "general" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>General Elements</p>
               </a>
             </li>
@@ -255,10 +255,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "tables" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-table"></i>
+            <i class="nav-icon bi bi-table"></i>
             <p>
               Tables
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -267,7 +267,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/tables/simple.html"}
                 class:list={["nav-link", page === "simple" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Simple Tables</p>
               </a>
             </li>
@@ -277,22 +277,22 @@ const htmlPath = convertPathToHtml(path);
         <li class="nav-header">EXAMPLES</li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
+            <i class="nav-icon bi bi-box-arrow-in-right"></i>
             <p>
               Login & Register
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
               <a href={htmlPath + "/examples/login.html"} class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Login v1</p>
               </a>
             </li>
             <li class="nav-item">
               <a href={htmlPath + "/examples/register.html"} class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Register v1</p>
               </a>
             </li>
@@ -305,7 +305,7 @@ const htmlPath = convertPathToHtml(path);
             href={htmlPath + "/docs/introduction.html"}
             class:list={["nav-link", page === "introduction" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-download"></i>
+            <i class="nav-icon bi bi-download"></i>
             <p>Installation</p>
           </a>
         </li>
@@ -314,7 +314,7 @@ const htmlPath = convertPathToHtml(path);
             href={htmlPath + "/docs/layout.html"}
             class:list={["nav-link", page === "layout" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-grip"></i>
+            <i class="nav-icon bi bi-grip-horizontal"></i>
             <p>Layout</p>
           </a>
         </li>
@@ -323,7 +323,7 @@ const htmlPath = convertPathToHtml(path);
             href={htmlPath + "/docs/color-mode.html"}
             class:list={["nav-link", page === "color-mode" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-star-half-stroke"></i>
+            <i class="nav-icon bi bi-star-half"></i>
             <p>Color Mode</p>
           </a>
         </li>
@@ -332,10 +332,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "components" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-swatchbook"></i>
+            <i class="nav-icon bi bi-palette2"></i>
             <p>
               Components
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -344,7 +344,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/docs/components/main-header.html"}
                 class:list={["nav-link", page === "main-header" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Main Header</p>
               </a>
             </li>
@@ -353,7 +353,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/docs/components/main-sidebar.html"}
                 class:list={["nav-link", page === "main-sidebar" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Main Sidebar</p>
               </a>
             </li>
@@ -364,10 +364,10 @@ const htmlPath = convertPathToHtml(path);
             href="#"
             class:list={["nav-link", mainPage === "javascript" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-swatchbook"></i>
+            <i class="nav-icon bi bi-palette2"></i>
             <p>
               Javascript
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
@@ -376,7 +376,7 @@ const htmlPath = convertPathToHtml(path);
                 href={htmlPath + "/docs/javascript/treeview.html"}
                 class:list={["nav-link", page === "treeview" && "active"]}
               >
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Treeview</p>
               </a>
             </li>
@@ -387,7 +387,7 @@ const htmlPath = convertPathToHtml(path);
             href={htmlPath + "/docs/browser-support.html"}
             class:list={["nav-link", page === "browser-support" && "active"]}
           >
-            <i class="nav-icon fa-solid fa-edge"></i>
+            <i class="nav-icon bi bi-browser-edge"></i>
             <p>Browser Support</p>
           </a>
         </li>
@@ -395,49 +395,49 @@ const htmlPath = convertPathToHtml(path);
         <li class="nav-header">MULTI LEVEL EXAMPLE</li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>Level 1</p>
           </a>
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>
               Level 1
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
               <a href="#" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Level 2</p>
               </a>
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>
                   Level 2
-                  <i class="nav-arrow fa-solid fa-angle-right"></i>
+                  <i class="nav-arrow bi bi-chevron-right"></i>
                 </p>
               </a>
               <ul class="nav nav-treeview">
                 <li class="nav-item">
                   <a href="#" class="nav-link">
-                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
                     <p>Level 3</p>
                   </a>
                 </li>
                 <li class="nav-item">
                   <a href="#" class="nav-link">
-                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
                     <p>Level 3</p>
                   </a>
                 </li>
                 <li class="nav-item">
                   <a href="#" class="nav-link">
-                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
                     <p>Level 3</p>
                   </a>
                 </li>
@@ -445,7 +445,7 @@ const htmlPath = convertPathToHtml(path);
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Level 2</p>
               </a>
             </li>
@@ -453,7 +453,7 @@ const htmlPath = convertPathToHtml(path);
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>Level 1</p>
           </a>
         </li>
@@ -461,19 +461,19 @@ const htmlPath = convertPathToHtml(path);
         <li class="nav-header">LABELS</li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-regular fa-circle text-danger"></i>
+            <i class="nav-icon bi bi-circle text-danger"></i>
             <p class="text">Important</p>
           </a>
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-regular fa-circle text-warning"></i>
+            <i class="nav-icon bi bi-circle text-warning"></i>
             <p>Warning</p>
           </a>
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-regular fa-circle text-info"></i>
+            <i class="nav-icon bi bi-circle text-info"></i>
             <p>Informational</p>
           </a>
         </li>
diff --git a/src/html/components/dashboard/_topbar.astro b/src/html/components/dashboard/_topbar.astro
index e0538d0668b..c26ab360bf3 100644
--- a/src/html/components/dashboard/_topbar.astro
+++ b/src/html/components/dashboard/_topbar.astro
@@ -11,7 +11,7 @@ const distPath = path;
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
-          <i class="fa-solid fa-bars"></i>
+          <i class="bi bi-list"></i>
         </a>
       </li>
       <li class="nav-item d-none d-md-block">
@@ -28,7 +28,7 @@ const distPath = path;
       <!--begin::Navbar Search-->
       <li class="nav-item">
         <a class="nav-link" data-widget="navbar-search" href="#" role="button">
-          <i class="fa-solid fa-search"></i>
+          <i class="bi bi-search"></i>
         </a>
       </li>
       <!--end::Navbar Search-->
@@ -36,7 +36,7 @@ const distPath = path;
       <!--begin::Messages Dropdown Menu-->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-comments"></i>
+          <i class="bi bi-chat-text"></i>
           <span class="navbar-badge badge text-bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@@ -54,12 +54,12 @@ const distPath = path;
                 <h3 class="dropdown-item-title">
                   Brad Diesel
                   <span class="float-end fs-7 text-danger"
-                    ><i class="fa-solid fa-star"></i></span
+                    ><i class="bi bi-star-fill"></i></span
                   >
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -80,12 +80,12 @@ const distPath = path;
                 <h3 class="dropdown-item-title">
                   John Pierce
                   <span class="float-end fs-7 text-secondary">
-                    <i class="fa-solid fa-star"></i>
+                    <i class="bi bi-star-fill"></i>
                   </span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -106,12 +106,12 @@ const distPath = path;
                 <h3 class="dropdown-item-title">
                   Nora Silvester
                   <span class="float-end fs-7 text-warning">
-                    <i class="fa-solid fa-star"></i>
+                    <i class="bi bi-star-fill"></i>
                   </span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -126,24 +126,24 @@ const distPath = path;
       <!--begin::Notifications Dropdown Menu-->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-bell"></i>
+          <i class="bi bi-bell-fill"></i>
           <span class="navbar-badge badge text-bg-warning">15</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <span class="dropdown-item dropdown-header">15 Notifications</span>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-envelope me-2"></i> 4 new messages
+            <i class="bi bi-envelope me-2"></i> 4 new messages
             <span class="float-end text-secondary fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-users me-2"></i> 8 friend requests
+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
             <span class="float-end text-secondary fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-file me-2"></i> 3 new reports
+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
             <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
diff --git a/src/html/components/docs/color-mode.mdx b/src/html/components/docs/color-mode.mdx
index 515d4026bf8..a448723cf52 100644
--- a/src/html/components/docs/color-mode.mdx
+++ b/src/html/components/docs/color-mode.mdx
@@ -7,7 +7,7 @@
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
-          ><i class="fa-solid fa-bars"></i
+          ><i class="bi bi-list"></i
         ></a>
       </li>
       <li class="nav-item d-none d-md-block">
@@ -46,9 +46,9 @@
               data-bs-theme-value="light"
               aria-pressed="false"
             >
-              <i class="fa-regular fa-sun me-2"></i>
+              <i class="bi bi-sun-fill me-2"></i>
               Light
-              <i class="fa-solid fa-check ms-auto d-none"></i>
+              <i class="bi bi-check-lg ms-auto d-none"></i>
             </button>
           </li>
           <li>
@@ -58,9 +58,9 @@
               data-bs-theme-value="dark"
               aria-pressed="false"
             >
-              <i class="fa-solid fa-moon me-2"></i>
+              <i class="bi bi-moon-fill me-2"></i>
               Dark
-              <i class="fa-solid fa-check ms-auto d-none"></i>
+              <i class="bi bi-check-lg ms-auto d-none"></i>
             </button>
           </li>
           <li>
@@ -70,9 +70,9 @@
               data-bs-theme-value="auto"
               aria-pressed="true"
             >
-              <i class="fa-solid fa-circle-half-stroke me-2"></i>
+              <i class="bi bi-circle-fill-half-stroke me-2"></i>
               Auto
-              <i class="fa-solid fa-check ms-auto d-none"></i>
+              <i class="bi bi-check-lg ms-auto d-none"></i>
             </button>
           </li>
         </ul>
diff --git a/src/html/components/docs/components/main-header.mdx b/src/html/components/docs/components/main-header.mdx
index 412d7e522aa..5cbfb4396ae 100644
--- a/src/html/components/docs/components/main-header.mdx
+++ b/src/html/components/docs/components/main-header.mdx
@@ -7,7 +7,7 @@
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
-          <i class="fa-solid fa-bars"></i>
+          <i class="bi bi-list"></i>
         </a>
       </li>
       <li class="nav-item d-none d-md-block">
@@ -23,14 +23,14 @@
       <!-- Navbar Search -->
       <li class="nav-item">
         <a class="nav-link" data-widget="navbar-search" href="#" role="button">
-          <i class="fa-solid fa-search"></i>
+          <i class="bi bi-search"></i>
         </a>
       </li>
 
       <!-- Messages Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-comments"></i>
+          <i class="bi bi-chat-text"></i>
           <span class="navbar-badge badge text-bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@@ -48,12 +48,12 @@
                 <h3 class="dropdown-item-title">
                   Brad Diesel
                   <span class="float-end fs-7 text-danger">
-                    <i class="fa-solid fa-star"></i>
+                    <i class="bi bi-star-fill"></i>
                   </span>
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -74,12 +74,12 @@
                 <h3 class="dropdown-item-title">
                   John Pierce
                   <span class="float-end fs-7 text-secondary">
-                    <i class="fa-solid fa-star"></i>
+                    <i class="bi bi-star-fill"></i>
                   </span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -100,12 +100,12 @@
                 <h3 class="dropdown-item-title">
                   Nora Silvester
                   <span class="float-end fs-7 text-warning">
-                    <i class="fa-solid fa-star"></i>
+                    <i class="bi bi-star-fill"></i>
                   </span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
                 <p class="fs-7 text-secondary">
-                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                 </p>
               </div>
             </div>
@@ -118,24 +118,24 @@
       <!-- Notifications Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-bell"></i>
+          <i class="bi bi-bell-fill"></i>
           <span class="navbar-badge badge text-bg-warning">15</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <span class="dropdown-item dropdown-header">15 Notifications</span>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-envelope me-2"></i> 4 new messages
+            <i class="bi bi-envelope me-2"></i> 4 new messages
             <span class="float-end text-secondary fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-users me-2"></i> 8 friend requests
+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
             <span class="float-end text-secondary fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-file me-2"></i> 3 new reports
+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
             <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
diff --git a/src/html/components/docs/components/main-sidebar.mdx b/src/html/components/docs/components/main-sidebar.mdx
index c484afe1828..b21913a65c3 100644
--- a/src/html/components/docs/components/main-sidebar.mdx
+++ b/src/html/components/docs/components/main-sidebar.mdx
@@ -34,22 +34,22 @@ The sidebar used in this page to the left provides an example of what your sideb
         <li class="nav-header">Nav Header</li>
         <li class="nav-item">
           <a href="./index.html" class="nav-link">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>Level 1</p>
           </a>
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>
               Treeview
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
               <a href="./index.html" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>
                   Level 2 (Badge)
                   <span
@@ -62,7 +62,7 @@ The sidebar used in this page to the left provides an example of what your sideb
             </li>
             <li class="nav-item">
               <a href="./index.html" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Level 2</p>
               </a>
             </li>
@@ -70,29 +70,29 @@ The sidebar used in this page to the left provides an example of what your sideb
         </li>
         <li class="nav-item">
           <a href="./index.html" class="nav-link active">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>Level 1 Active</p>
           </a>
         </li>
 
         <li class="nav-item menu-open">
           <a href="#" class="nav-link active">
-            <i class="nav-icon fa-solid fa-circle"></i>
+            <i class="nav-icon bi bi-circle-fill"></i>
             <p>
               Treeview Menu Open
-              <i class="nav-arrow fa-solid fa-angle-right"></i>
+              <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
               <a href="./index.html" class="nav-link active">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Level 2 Active</p>
               </a>
             </li>
             <li class="nav-item">
               <a href="./index.html" class="nav-link">
-                <i class="nav-icon fa-regular fa-circle"></i>
+                <i class="nav-icon bi bi-circle"></i>
                 <p>Level 2</p>
               </a>
             </li>
diff --git a/src/html/pages/UI/timeline.astro b/src/html/pages/UI/timeline.astro
index bcbdb51e090..928f42732b6 100644
--- a/src/html/pages/UI/timeline.astro
+++ b/src/html/pages/UI/timeline.astro
@@ -66,12 +66,12 @@ const page = "timeline";
                   <!-- timeline item -->
                   <div>
                     <i
-                      class="timeline-icon fa-solid fa-envelope text-bg-primary"
+                      class="timeline-icon bi bi-envelope text-bg-primary"
                     >
                     </i>
                     <div class="timeline-item">
                       <span class="time">
-                        <i class="fa-solid fa-clock"></i> 12:05
+                        <i class="bi bi-clock-fill"></i> 12:05
                       </span>
                       <h3 class="timeline-header">
                         <a href="#">Support Team</a> sent you an email
@@ -93,11 +93,11 @@ const page = "timeline";
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-user text-bg-success">
+                    <i class="timeline-icon bi bi-person text-bg-success">
                     </i>
                     <div class="timeline-item">
                       <span class="time">
-                        <i class="fa-solid fa-clock"></i> 5 mins ago
+                        <i class="bi bi-clock-fill"></i> 5 mins ago
                       </span>
                       <h3 class="timeline-header no-border">
                         <a href="#">Sarah Young</a> accepted your friend request
@@ -108,12 +108,12 @@ const page = "timeline";
                   <!-- timeline item -->
                   <div>
                     <i
-                      class="timeline-icon fa-solid fa-comments text-bg-warning"
+                      class="timeline-icon bi bi-chat-text-fill text-bg-warning"
                     >
                     </i>
                     <div class="timeline-item">
                       <span class="time">
-                        <i class="fa-solid fa-clock"></i> 27 mins ago
+                        <i class="bi bi-clock-fill"></i> 27 mins ago
                       </span>
                       <h3 class="timeline-header">
                         <a href="#">Jay White</a> commented on your post
@@ -136,11 +136,11 @@ const page = "timeline";
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-camera text-bg-primary">
+                    <i class="timeline-icon bi bi-camera text-bg-primary">
                     </i>
                     <div class="timeline-item">
                       <span class="time">
-                        <i class="fa-solid fa-clock"></i> 2 days ago
+                        <i class="bi bi-clock-fill"></i> 2 days ago
                       </span>
                       <h3 class="timeline-header">
                         <a href="#">Mina Lee</a> uploaded new photos
@@ -168,11 +168,11 @@ const page = "timeline";
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
+                    <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
 
                     <div class="timeline-item">
                       <span class="time">
-                        <i class="fa-solid fa-clock"></i> 5 days ago
+                        <i class="bi bi-clock-fill"></i> 5 days ago
                       </span>
 
                       <h3 class="timeline-header">
@@ -196,7 +196,7 @@ const page = "timeline";
                   <!-- END timeline item -->
                   <div>
                     <i
-                      class="timeline-icon fa-solid fa-clock text-bg-secondary"
+                      class="timeline-icon bi bi-clock-fill text-bg-secondary"
                     >
                     </i>
                   </div>
diff --git a/src/html/pages/docs/color-mode.astro b/src/html/pages/docs/color-mode.astro
index 5d141ed3d15..038cbc59a7c 100644
--- a/src/html/pages/docs/color-mode.astro
+++ b/src/html/pages/docs/color-mode.astro
@@ -78,7 +78,7 @@ const page = "color-mode";
                           class="nav-link"
                           data-lte-toggle="sidebar"
                           href="#"
-                          role="button"><i class="fa-solid fa-bars"></i></a
+                          role="button"><i class="bi bi-list"></i></a
                         >
                       </li>
                       <li class="nav-item d-none d-md-block">
@@ -119,9 +119,9 @@ const page = "color-mode";
                               data-bs-theme-value="light"
                               aria-pressed="false"
                             >
-                              <i class="fa-regular fa-sun me-2"></i>
+                              <i class="bi bi-sun-fill me-2"></i>
                               Light
-                              <i class="fa-solid fa-check ms-auto d-none"></i>
+                              <i class="bi bi-check-lg ms-auto d-none"></i>
                             </button>
                           </li>
                           <li>
@@ -131,9 +131,9 @@ const page = "color-mode";
                               data-bs-theme-value="dark"
                               aria-pressed="false"
                             >
-                              <i class="fa-solid fa-moon me-2"></i>
+                              <i class="bi bi-moon-fill me-2"></i>
                               Dark
-                              <i class="fa-solid fa-check ms-auto d-none"></i>
+                              <i class="bi bi-check-lg ms-auto d-none"></i>
                             </button>
                           </li>
                           <li>
@@ -143,10 +143,10 @@ const page = "color-mode";
                               data-bs-theme-value="auto"
                               aria-pressed="true"
                             >
-                              <i class="fa-solid fa-circle-half-stroke me-2"
+                              <i class="bi bi-circle-fill-half-stroke me-2"
                               ></i>
                               Auto
-                              <i class="fa-solid fa-check ms-auto d-none"></i>
+                              <i class="bi bi-check-lg ms-auto d-none"></i>
                             </button>
                           </li>
                         </ul>
diff --git a/src/html/pages/docs/components/main-header.astro b/src/html/pages/docs/components/main-header.astro
index 98cb36bc560..6124da00516 100644
--- a/src/html/pages/docs/components/main-header.astro
+++ b/src/html/pages/docs/components/main-header.astro
@@ -87,7 +87,7 @@ const distPath = path;
                       href="#"
                       role="button"
                     >
-                      <i class="fa-solid fa-bars"></i>
+                      <i class="bi bi-list"></i>
                     </a>
                   </li>
                   <li class="nav-item d-none d-md-block">
@@ -108,14 +108,14 @@ const distPath = path;
                       href="#"
                       role="button"
                     >
-                      <i class="fa-solid fa-search"></i>
+                      <i class="bi bi-search"></i>
                     </a>
                   </li>
 
                   <!-- Messages Dropdown Menu -->
                   <li class="nav-item dropdown">
                     <a class="nav-link" data-bs-toggle="dropdown" href="#">
-                      <i class="fa-regular fa-comments"></i>
+                      <i class="bi bi-chat-text"></i>
                       <span class="navbar-badge badge text-bg-danger">3</span>
                     </a>
                     <div
@@ -135,12 +135,12 @@ const distPath = path;
                             <h3 class="dropdown-item-title">
                               Brad Diesel
                               <span class="float-end fs-7 text-danger">
-                                <i class="fa-solid fa-star"></i>
+                                <i class="bi bi-star-fill"></i>
                               </span>
                             </h3>
                             <p class="fs-7">Call me whenever you can...</p>
                             <p class="fs-7 text-secondary">
-                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                             </p>
                           </div>
                         </div>
@@ -161,12 +161,12 @@ const distPath = path;
                             <h3 class="dropdown-item-title">
                               John Pierce
                               <span class="float-end fs-7 text-secondary">
-                                <i class="fa-solid fa-star"></i>
+                                <i class="bi bi-star-fill"></i>
                               </span>
                             </h3>
                             <p class="fs-7">I got your message bro</p>
                             <p class="fs-7 text-secondary">
-                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                             </p>
                           </div>
                         </div>
@@ -187,12 +187,12 @@ const distPath = path;
                             <h3 class="dropdown-item-title">
                               Nora Silvester
                               <span class="float-end fs-7 text-warning">
-                                <i class="fa-solid fa-star"></i>
+                                <i class="bi bi-star-fill"></i>
                               </span>
                             </h3>
                             <p class="fs-7">The subject goes here</p>
                             <p class="fs-7 text-secondary">
-                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                             </p>
                           </div>
                         </div>
@@ -207,7 +207,7 @@ const distPath = path;
                   <!-- Notifications Dropdown Menu -->
                   <li class="nav-item dropdown">
                     <a class="nav-link" data-bs-toggle="dropdown" href="#">
-                      <i class="fa-regular fa-bell"></i>
+                      <i class="bi bi-bell-fill"></i>
                       <span class="navbar-badge badge text-bg-warning">15</span>
                     </a>
                     <div
@@ -218,20 +218,20 @@ const distPath = path;
                       >
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
-                        <i class="fa-solid fa-envelope me-2"></i> 4 new messages
+                        <i class="bi bi-envelope me-2"></i> 4 new messages
                         <span class="float-end text-secondary fs-7">3 mins</span
                         >
                       </a>
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
-                        <i class="fa-solid fa-users me-2"></i> 8 friend requests
+                        <i class="bi bi-people-fill me-2"></i> 8 friend requests
                         <span class="float-end text-secondary fs-7">
                           12 hours
                         </span>
                       </a>
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
-                        <i class="fa-solid fa-file me-2"></i> 3 new reports
+                        <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
                         <span class="float-end text-secondary fs-7">
                           2 days
                         </span>
diff --git a/src/html/pages/examples/login.astro b/src/html/pages/examples/login.astro
index a7d00d27c3b..f1daa1380ac 100644
--- a/src/html/pages/examples/login.astro
+++ b/src/html/pages/examples/login.astro
@@ -29,7 +29,7 @@ const htmlPath = "..";
             <div class="input-group mb-3">
               <input type="email" class="form-control" placeholder="Email" />
               <div class="input-group-text">
-                <span class="fa-solid fa-envelope"></span>
+                <span class="bi bi-envelope"></span>
               </div>
             </div>
             <div class="input-group mb-3">
@@ -39,7 +39,7 @@ const htmlPath = "..";
                 placeholder="Password"
               />
               <div class="input-group-text">
-                <span class="fa-solid fa-lock"></span>
+                <span class="bi bi-lock-fill"></span>
               </div>
             </div>
             <!--begin::Row-->
@@ -71,10 +71,10 @@ const htmlPath = "..";
           <div class="social-auth-links text-center mb-3 d-grid gap-2">
             <p>- OR -</p>
             <a href="#" class="btn btn-primary">
-              <i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
             </a>
             <a href="#" class="btn btn-danger">
-              <i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
+              <i class="bi bi-google me-2"></i> Sign in using Google+
             </a>
           </div>
           <!-- /.social-auth-links -->
diff --git a/src/html/pages/examples/register.astro b/src/html/pages/examples/register.astro
index f21a00c2305..5261202f2ef 100644
--- a/src/html/pages/examples/register.astro
+++ b/src/html/pages/examples/register.astro
@@ -29,13 +29,13 @@ const htmlPath = "..";
             <div class="input-group mb-3">
               <input type="text" class="form-control" placeholder="Full Name" />
               <div class="input-group-text">
-                <span class="fa-solid fa-user"></span>
+                <span class="bi bi-person"></span>
               </div>
             </div>
             <div class="input-group mb-3">
               <input type="email" class="form-control" placeholder="Email" />
               <div class="input-group-text">
-                <span class="fa-solid fa-envelope"></span>
+                <span class="bi bi-envelope"></span>
               </div>
             </div>
             <div class="input-group mb-3">
@@ -45,7 +45,7 @@ const htmlPath = "..";
                 placeholder="Password"
               />
               <div class="input-group-text">
-                <span class="fa-solid fa-lock"></span>
+                <span class="bi bi-lock-fill"></span>
               </div>
             </div>
             <!--begin::Row-->
@@ -77,10 +77,10 @@ const htmlPath = "..";
           <div class="social-auth-links text-center mb-3 d-grid gap-2">
             <p>- OR -</p>
             <a href="#" class="btn btn-primary">
-              <i class="fa-brands fa-facebook me-2"></i> Sign in using Facebook
+              <i class="bi bi-facebook me-2"></i> Sign in using Facebook
             </a>
             <a href="#" class="btn btn-danger">
-              <i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
+              <i class="bi bi-google me-2"></i> Sign in using Google+
             </a>
           </div>
           <!-- /.social-auth-links -->
diff --git a/src/html/pages/index.astro b/src/html/pages/index.astro
index 8cb3956eb05..8e7e56d2489 100644
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -92,7 +92,7 @@ const page = "index";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
                 <!--end::Small Box Widget 1-->
@@ -118,7 +118,7 @@ const page = "index";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
                 <!--end::Small Box Widget 2-->
@@ -144,7 +144,7 @@ const page = "index";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
                 <!--end::Small Box Widget 3-->
@@ -177,7 +177,7 @@ const page = "index";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
                 <!--end::Small Box Widget 4-->
@@ -217,7 +217,8 @@ const page = "index";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
@@ -225,14 +226,14 @@ const page = "index";
                         title="Contacts"
                         data-lte-toggle="chat-pane"
                       >
-                        <i class="fa-solid fa-comments"></i>
+                        <i class="bi bi-chat-text-fill"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
@@ -519,7 +520,8 @@ const page = "index";
                         class="btn btn-primary btn-sm"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-plus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/index2.astro b/src/html/pages/index2.astro
index 43c79cfc42d..d81ec463866 100644
--- a/src/html/pages/index2.astro
+++ b/src/html/pages/index2.astro
@@ -63,7 +63,7 @@ const page = "index2";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-primary shadow-sm">
-                    <i class="fa-solid fa-cog"></i>
+                    <i class="bi bi-gear-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -81,7 +81,7 @@ const page = "index2";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-danger shadow-sm">
-                    <i class="fa-solid fa-thumbs-up"></i>
+                    <i class="bi bi-hand-thumbs-up-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -100,7 +100,7 @@ const page = "index2";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-success shadow-sm">
-                    <i class="fa-solid fa-shopping-cart"></i>
+                    <i class="bi bi-cart-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -115,7 +115,7 @@ const page = "index2";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-warning shadow-sm">
-                    <i class="fa-solid fa-users"></i>
+                    <i class="bi bi-people-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -143,7 +143,8 @@ const page = "index2";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <div class="btn-group">
                         <button
@@ -151,7 +152,7 @@ const page = "index2";
                           class="btn btn-tool dropdown-toggle"
                           data-bs-toggle="dropdown"
                         >
-                          <i class="fa-solid fa-wrench"></i>
+                          <i class="bi bi-wrench"></i>
                         </button>
                         <div
                           class="dropdown-menu dropdown-menu-end"
@@ -169,9 +170,9 @@ const page = "index2";
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
@@ -255,7 +256,7 @@ const page = "index2";
                       <div class="col-md-3 col-6">
                         <div class="text-center border-end">
                           <span class="text-success">
-                            <i class="fa-solid fa-caret-up"></i> 17%
+                            <i class="bi bi-caret-up-fill"></i> 17%
                           </span>
                           <h5 class="fw-bold mb-0">$35,210.43</h5>
                           <span class="text-uppercase">TOTAL REVENUE</span>
@@ -266,7 +267,7 @@ const page = "index2";
                       <div class="col-md-3 col-6">
                         <div class="text-center border-end">
                           <span class="text-info">
-                            <i class="fa-solid fa-caret-left"></i> 0%
+                            <i class="bi bi-caret-left-fill"></i> 0%
                           </span>
                           <h5 class="fw-bold mb-0">$10,390.90</h5>
                           <span class="text-uppercase">TOTAL COST</span>
@@ -276,7 +277,7 @@ const page = "index2";
                       <div class="col-md-3 col-6">
                         <div class="text-center border-end">
                           <span class="text-success">
-                            <i class="fa-solid fa-caret-up"></i> 20%
+                            <i class="bi bi-caret-up-fill"></i> 20%
                           </span>
                           <h5 class="fw-bold mb-0">$24,813.53</h5>
                           <span class="text-uppercase">TOTAL PROFIT</span>
@@ -286,7 +287,7 @@ const page = "index2";
                       <div class="col-md-3 col-6">
                         <div class="text-center">
                           <span class="text-danger">
-                            <i class="fa-solid fa-caret-down"></i> 18%
+                            <i class="bi bi-caret-down-fill"></i> 18%
                           </span>
                           <h5 class="fw-bold mb-0">1200</h5>
                           <span class="text-uppercase">GOAL COMPLETIONS</span>
@@ -327,7 +328,8 @@ const page = "index2";
                             class="btn btn-tool"
                             data-lte-toggle="card-collapse"
                           >
-                            <i class="fa-solid fa-minus"></i>
+                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                           </button>
                           <button
                             type="button"
@@ -335,14 +337,14 @@ const page = "index2";
                             title="Contacts"
                             data-lte-toggle="chat-pane"
                           >
-                            <i class="fa-solid fa-comments"></i>
+                            <i class="bi bi-chat-text-fill"></i>
                           </button>
                           <button
                             type="button"
                             class="btn btn-tool"
-                            data-lte-dismiss="card-remove"
+                            data-lte-toggle="card-remove"
                           >
-                            <i class="fa-solid fa-times"></i>
+                            <i class="bi bi-x-lg"></i>
                           </button>
                         </div>
                       </div>
@@ -633,14 +635,15 @@ const page = "index2";
                             class="btn btn-tool"
                             data-lte-toggle="card-collapse"
                           >
-                            <i class="fa-solid fa-minus"></i>
+                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                           </button>
                           <button
                             type="button"
                             class="btn btn-tool"
-                            data-lte-dismiss="card-remove"
+                            data-lte-toggle="card-remove"
                           >
-                            <i class="fa-solid fa-times"></i>
+                            <i class="bi bi-x-lg"></i>
                           </button>
                         </div>
                       </div>
@@ -785,14 +788,15 @@ const page = "index2";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
@@ -971,7 +975,7 @@ const page = "index2";
                 <!-- Info Boxes Style 2 -->
                 <div class="info-box mb-3 text-bg-warning">
                   <span class="info-box-icon">
-                    <i class="fa-solid fa-tag"></i>
+                    <i class="bi bi-tag-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -983,7 +987,7 @@ const page = "index2";
                 <!-- /.info-box -->
                 <div class="info-box mb-3 text-bg-success">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-heart"></i>
+                    <i class="bi bi-heart-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -995,7 +999,7 @@ const page = "index2";
                 <!-- /.info-box -->
                 <div class="info-box mb-3 text-bg-danger">
                   <span class="info-box-icon">
-                    <i class="fa-solid fa-cloud-download-alt"></i>
+                    <i class="bi bi-cloud-download"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -1007,7 +1011,7 @@ const page = "index2";
                 <!-- /.info-box -->
                 <div class="info-box mb-3 text-bg-info">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-comment"></i>
+                    <i class="bi bi-chat-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -1028,14 +1032,15 @@ const page = "index2";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
@@ -1057,7 +1062,7 @@ const page = "index2";
                         <a href="#" class="nav-link">
                           United States of America
                           <span class="float-end text-danger">
-                            <i class="fa-solid fa-arrow-down fs-7"></i>
+                            <i class="bi bi-arrow-down fs-7"></i>
                             12%
                           </span>
                         </a>
@@ -1066,7 +1071,7 @@ const page = "index2";
                         <a href="#" class="nav-link">
                           India
                           <span class="float-end text-success">
-                            <i class="fa-solid fa-arrow-up fs-7"></i> 4%
+                            <i class="bi bi-arrow-up fs-7"></i> 4%
                           </span>
                         </a>
                       </li>
@@ -1074,7 +1079,7 @@ const page = "index2";
                         <a href="#" class="nav-link">
                           China
                           <span class="float-end text-info">
-                            <i class="fa-solid fa-arrow-left fs-7"></i> 0%
+                            <i class="bi bi-arrow-left fs-7"></i> 0%
                           </span>
                         </a>
                       </li>
@@ -1095,14 +1100,15 @@ const page = "index2";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/index3.astro b/src/html/pages/index3.astro
index 57958f648e3..1000441b593 100644
--- a/src/html/pages/index3.astro
+++ b/src/html/pages/index3.astro
@@ -76,7 +76,7 @@ const page = "index3";
                       </p>
                       <p class="ms-auto d-flex flex-column text-end">
                         <span class="text-success">
-                          <i class="fa-solid fa-arrow-up"></i> 12.5%
+                          <i class="bi bi-arrow-up"></i> 12.5%
                         </span>
                         <span class="text-secondary">Since last week</span>
                       </p>
@@ -89,11 +89,11 @@ const page = "index3";
 
                     <div class="d-flex flex-row justify-content-end">
                       <span class="me-2">
-                        <i class="fa-solid fa-square text-primary"></i> This Week
+                        <i class="bi bi-square-fill text-primary"></i> This Week
                       </span>
 
                       <span>
-                        <i class="fa-solid fa-square text-secondary"></i> Last Week
+                        <i class="bi bi-square-fill text-secondary"></i> Last Week
                       </span>
                     </div>
                   </div>
@@ -105,10 +105,10 @@ const page = "index3";
                     <h3 class="card-title">Products</h3>
                     <div class="card-tools">
                       <a href="#" class="btn btn-tool btn-sm">
-                        <i class="fa-solid fa-download"></i>
+                        <i class="bi bi-download"></i>
                       </a>
                       <a href="#" class="btn btn-tool btn-sm">
-                        <i class="fa-solid fa-bars"></i>
+                        <i class="bi bi-list"></i>
                       </a>
                     </div>
                   </div>
@@ -135,14 +135,14 @@ const page = "index3";
                           <td>$13 USD</td>
                           <td>
                             <small class="text-success me-1">
-                              <i class="fa-solid fa-arrow-up"></i>
+                              <i class="bi bi-arrow-up"></i>
                               12%
                             </small>
                             12,000 Sold
                           </td>
                           <td>
                             <a href="#" class="text-secondary">
-                              <i class="fa-solid fa-search"></i>
+                              <i class="bi bi-search"></i>
                             </a>
                           </td>
                         </tr>
@@ -158,14 +158,14 @@ const page = "index3";
                           <td>$29 USD</td>
                           <td>
                             <small class="text-warning me-1">
-                              <i class="fa-solid fa-arrow-down"></i>
+                              <i class="bi bi-arrow-down"></i>
                               0.5%
                             </small>
                             123,234 Sold
                           </td>
                           <td>
                             <a href="#" class="text-secondary">
-                              <i class="fa-solid fa-search"></i>
+                              <i class="bi bi-search"></i>
                             </a>
                           </td>
                         </tr>
@@ -181,14 +181,14 @@ const page = "index3";
                           <td>$1,230 USD</td>
                           <td>
                             <small class="text-danger me-1">
-                              <i class="fa-solid fa-arrow-down"></i>
+                              <i class="bi bi-arrow-down"></i>
                               3%
                             </small>
                             198 Sold
                           </td>
                           <td>
                             <a href="#" class="text-secondary">
-                              <i class="fa-solid fa-search"></i>
+                              <i class="bi bi-search"></i>
                             </a>
                           </td>
                         </tr>
@@ -205,14 +205,14 @@ const page = "index3";
                           <td>$199 USD</td>
                           <td>
                             <small class="text-success me-1">
-                              <i class="fa-solid fa-arrow-up"></i>
+                              <i class="bi bi-arrow-up"></i>
                               63%
                             </small>
                             87 Sold
                           </td>
                           <td>
                             <a href="#" class="text-secondary">
-                              <i class="fa-solid fa-search"></i>
+                              <i class="bi bi-search"></i>
                             </a>
                           </td>
                         </tr>
@@ -239,7 +239,7 @@ const page = "index3";
                       </p>
                       <p class="ms-auto d-flex flex-column text-end">
                         <span class="text-success">
-                          <i class="fa-solid fa-arrow-up"></i> 33.1%
+                          <i class="bi bi-arrow-up"></i> 33.1%
                         </span>
                         <span class="text-secondary">Since Past Year</span>
                       </p>
@@ -252,11 +252,11 @@ const page = "index3";
 
                     <div class="d-flex flex-row justify-content-end">
                       <span class="me-2">
-                        <i class="fa-solid fa-square text-primary"></i> This year
+                        <i class="bi bi-square-fill text-primary"></i> This year
                       </span>
 
                       <span>
-                        <i class="fa-solid fa-square text-secondary"></i> Last year
+                        <i class="bi bi-square-fill text-secondary"></i> Last year
                       </span>
                     </div>
                   </div>
@@ -268,10 +268,10 @@ const page = "index3";
                     <h3 class="card-title">Online Store Overview</h3>
                     <div class="card-tools">
                       <a href="#" class="btn btn-sm btn-tool">
-                        <i class="fa-solid fa-download"></i>
+                        <i class="bi bi-download"></i>
                       </a>
                       <a href="#" class="btn btn-sm btn-tool">
-                        <i class="fa-solid fa-bars"></i>
+                        <i class="bi bi-list"></i>
                       </a>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/collapsed-sidebar.astro b/src/html/pages/layout/collapsed-sidebar.astro
index 5a3ba9cf919..0d17e2fd069 100644
--- a/src/html/pages/layout/collapsed-sidebar.astro
+++ b/src/html/pages/layout/collapsed-sidebar.astro
@@ -70,15 +70,16 @@ const page = "collapsed-sidebar";
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/fixed-complete.astro b/src/html/pages/layout/fixed-complete.astro
index 25959a5b05f..263a187f15b 100644
--- a/src/html/pages/layout/fixed-complete.astro
+++ b/src/html/pages/layout/fixed-complete.astro
@@ -69,15 +69,16 @@ const page = "fixed-complete";
                       data-lte-toggle="card-collapse"
                       title="Collapse"
                     >
-                      <i class="fa-solid fa-minus"></i>
+                      <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                      <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                     </button>
                     <button
                       type="button"
                       class="btn btn-tool"
-                      data-lte-dismiss="card-remove"
+                      data-lte-toggle="card-remove"
                       title="Remove"
                     >
-                      <i class="fa-solid fa-times"></i>
+                      <i class="bi bi-x-lg"></i>
                     </button>
                   </div>
                 </div>
diff --git a/src/html/pages/layout/fixed-sidebar.astro b/src/html/pages/layout/fixed-sidebar.astro
index 75cd1680ba5..adcafe6b44e 100644
--- a/src/html/pages/layout/fixed-sidebar.astro
+++ b/src/html/pages/layout/fixed-sidebar.astro
@@ -69,15 +69,16 @@ const page = "fixed-sidebar";
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/layout-rtl.astro b/src/html/pages/layout/layout-rtl.astro
index f7f746df731..3b06aff5d31 100644
--- a/src/html/pages/layout/layout-rtl.astro
+++ b/src/html/pages/layout/layout-rtl.astro
@@ -69,15 +69,16 @@ const isRtl = true;
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/logo-switch.astro b/src/html/pages/layout/logo-switch.astro
index 5167e1512ab..b6a3bcda9f4 100644
--- a/src/html/pages/layout/logo-switch.astro
+++ b/src/html/pages/layout/logo-switch.astro
@@ -59,49 +59,49 @@ const htmlPath = convertPathToHtml(path);
               <li class="nav-header">MULTI LEVEL EXAMPLE</li>
               <li class="nav-item">
                 <a href="#" class="nav-link">
-                  <i class="nav-icon fa-solid fa-circle"></i>
+                  <i class="nav-icon bi bi-circle-fill"></i>
                   <p>Level 1</p>
                 </a>
               </li>
               <li class="nav-item">
                 <a href="#" class="nav-link">
-                  <i class="nav-icon fa-solid fa-circle"></i>
+                  <i class="nav-icon bi bi-circle-fill"></i>
                   <p>
                     Level 1
-                    <i class="nav-arrow fa-solid fa-angle-right"></i>
+                    <i class="nav-arrow bi bi-chevron-right"></i>
                   </p>
                 </a>
                 <ul class="nav nav-treeview">
                   <li class="nav-item">
                     <a href="#" class="nav-link">
-                      <i class="nav-icon fa-regular fa-circle"></i>
+                      <i class="nav-icon bi bi-circle"></i>
                       <p>Level 2</p>
                     </a>
                   </li>
                   <li class="nav-item">
                     <a href="#" class="nav-link">
-                      <i class="nav-icon fa-regular fa-circle"></i>
+                      <i class="nav-icon bi bi-circle"></i>
                       <p>
                         Level 2
-                        <i class="nav-arrow fa-solid fa-angle-right"></i>
+                        <i class="nav-arrow bi bi-chevron-right"></i>
                       </p>
                     </a>
                     <ul class="nav nav-treeview">
                       <li class="nav-item">
                         <a href="#" class="nav-link">
-                          <i class="nav-icon fa-regular fa-dot-circle"></i>
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
                           <p>Level 3</p>
                         </a>
                       </li>
                       <li class="nav-item">
                         <a href="#" class="nav-link">
-                          <i class="nav-icon fa-regular fa-dot-circle"></i>
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
                           <p>Level 3</p>
                         </a>
                       </li>
                       <li class="nav-item">
                         <a href="#" class="nav-link">
-                          <i class="nav-icon fa-regular fa-dot-circle"></i>
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
                           <p>Level 3</p>
                         </a>
                       </li>
@@ -109,7 +109,7 @@ const htmlPath = convertPathToHtml(path);
                   </li>
                   <li class="nav-item">
                     <a href="#" class="nav-link">
-                      <i class="nav-icon fa-regular fa-circle"></i>
+                      <i class="nav-icon bi bi-circle"></i>
                       <p>Level 2</p>
                     </a>
                   </li>
@@ -117,7 +117,7 @@ const htmlPath = convertPathToHtml(path);
               </li>
               <li class="nav-item">
                 <a href="#" class="nav-link">
-                  <i class="nav-icon fa-solid fa-circle"></i>
+                  <i class="nav-icon bi bi-circle-fill"></i>
                   <p>Level 1</p>
                 </a>
               </li>
@@ -172,15 +172,16 @@ const htmlPath = convertPathToHtml(path);
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/sidebar-mini.astro b/src/html/pages/layout/sidebar-mini.astro
index 66c0496855f..142d3b46ce3 100644
--- a/src/html/pages/layout/sidebar-mini.astro
+++ b/src/html/pages/layout/sidebar-mini.astro
@@ -68,15 +68,16 @@ const page = "sidebar-mini";
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/layout/unfixed-sidebar.astro b/src/html/pages/layout/unfixed-sidebar.astro
index 3730daf76ac..b89f496b7e5 100644
--- a/src/html/pages/layout/unfixed-sidebar.astro
+++ b/src/html/pages/layout/unfixed-sidebar.astro
@@ -68,15 +68,16 @@ const page = "unfixed-sidebar";
                         data-lte-toggle="card-collapse"
                         title="Collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                         title="Remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                   </div>
diff --git a/src/html/pages/widgets/cards.astro b/src/html/pages/widgets/cards.astro
index 1791695b324..f67a156e960 100644
--- a/src/html/pages/widgets/cards.astro
+++ b/src/html/pages/widgets/cards.astro
@@ -69,7 +69,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-plus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -92,7 +93,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -113,9 +115,9 @@ const page = "cards";
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -138,7 +140,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-maximize"
                       >
-                        <i class="fa-solid fa-expand"></i>
+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -167,7 +170,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-plus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -190,7 +194,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -211,9 +216,9 @@ const page = "cards";
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -236,7 +241,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-maximize"
                       >
-                        <i class="fa-solid fa-expand"></i>
+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -265,7 +271,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-plus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -288,7 +295,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-collapse"
                       >
-                        <i class="fa-solid fa-minus"></i>
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -309,9 +317,9 @@ const page = "cards";
                       <button
                         type="button"
                         class="btn btn-tool"
-                        data-lte-dismiss="card-remove"
+                        data-lte-toggle="card-remove"
                       >
-                        <i class="fa-solid fa-times"></i>
+                        <i class="bi bi-x-lg"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -334,7 +342,8 @@ const page = "cards";
                         class="btn btn-tool"
                         data-lte-toggle="card-maximize"
                       >
-                        <i class="fa-solid fa-expand"></i>
+                        <i data-lte-icon="maximize" class="bi bi-fullscreen"></i>
+                        <i data-lte-icon="minimize" class="bi bi-fullscreen-exit"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
diff --git a/src/html/pages/widgets/info-box.astro b/src/html/pages/widgets/info-box.astro
index 1c193ebc50d..d7a85903fd8 100644
--- a/src/html/pages/widgets/info-box.astro
+++ b/src/html/pages/widgets/info-box.astro
@@ -59,7 +59,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-primary shadow-sm">
-                    <i class="fa-solid fa-cog"></i>
+                    <i class="bi bi-gear-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -78,7 +78,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-success shadow-sm">
-                    <i class="fa-solid fa-shopping-cart"></i>
+                    <i class="bi bi-cart-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -97,7 +97,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-warning shadow-sm">
-                    <i class="fa-solid fa-users"></i>
+                    <i class="bi bi-people-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -113,7 +113,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
                   <span class="info-box-icon text-bg-danger shadow-sm">
-                    <i class="fa-solid fa-thumbs-up"></i>
+                    <i class="bi bi-hand-thumbs-up-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -139,7 +139,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-none">
                   <span class="info-box-icon text-bg-primary shadow-sm">
-                    <i class="fa-solid fa-cog"></i>
+                    <i class="bi bi-gear-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -158,7 +158,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-sm">
                   <span class="info-box-icon text-bg-success shadow-sm">
-                    <i class="fa-solid fa-shopping-cart"></i>
+                    <i class="bi bi-cart-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -177,7 +177,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow">
                   <span class="info-box-icon text-bg-warning shadow-sm">
-                    <i class="fa-solid fa-users"></i>
+                    <i class="bi bi-people-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -193,7 +193,7 @@ const page = "info-box";
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-lg">
                   <span class="info-box-icon text-bg-danger shadow-sm">
-                    <i class="fa-solid fa-thumbs-up"></i>
+                    <i class="bi bi-hand-thumbs-up-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -215,7 +215,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-primary">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-bookmark"></i>
+                    <i class="bi bi-bookmark-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -237,7 +237,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-success">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-thumbs-up"></i>
+                    <i class="bi bi-hand-thumbs-up"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -259,7 +259,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-warning">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-calendar-alt"></i>
+                    <i class="bi bi-calendar3"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -281,7 +281,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-danger">
                   <span class="info-box-icon">
-                    <i class="fa-solid fa-comments"></i>
+                    <i class="bi bi-chat-text-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -310,7 +310,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-primary bg-gradient">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-bookmark"></i>
+                    <i class="bi bi-bookmark-fill"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -332,7 +332,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-success bg-gradient">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-thumbs-up"></i>
+                    <i class="bi bi-hand-thumbs-up"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -354,7 +354,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-warning bg-gradient">
                   <span class="info-box-icon">
-                    <i class="fa-regular fa-calendar-alt"></i>
+                    <i class="bi bi-calendar3"></i>
                   </span>
 
                   <div class="info-box-content">
@@ -376,7 +376,7 @@ const page = "info-box";
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-danger bg-gradient">
                   <span class="info-box-icon">
-                    <i class="fa-solid fa-comments"></i>
+                    <i class="bi bi-chat-text-fill"></i>
                   </span>
 
                   <div class="info-box-content">
diff --git a/src/html/pages/widgets/small-box.astro b/src/html/pages/widgets/small-box.astro
index 63bcf18a4da..954f2430303 100644
--- a/src/html/pages/widgets/small-box.astro
+++ b/src/html/pages/widgets/small-box.astro
@@ -77,7 +77,7 @@ const page = "small-box";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
               </div>
@@ -102,7 +102,7 @@ const page = "small-box";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
               </div>
@@ -127,7 +127,7 @@ const page = "small-box";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
               </div>
@@ -159,7 +159,7 @@ const page = "small-box";
                     ></path>
                   </svg>
                   <a href="#" class="small-box-footer">
-                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                    More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
               </div>
diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss
index 96ad8fd5d0f..17928d6e27a 100644
--- a/src/scss/_cards.scss
+++ b/src/scss/_cards.scss
@@ -45,20 +45,41 @@
       display: none;
     }
 
+    [data-lte-icon="maximize"] {
+      display: none;
+    }
+
     .card-header,
     .card-footer {
       @include border-radius(0 !important);
     }
   }
 
+  &:not(.maximized-card) {
+    [data-lte-icon="minimize"] {
+      display: none;
+    }
+  }
+
   // collapsed mode
   &.collapsed-card {
+    [data-lte-icon="collapse"] {
+      display: none;
+    }
+
     .card-body,
     .card-footer {
       display: none;
     }
   }
 
+  &:not(.collapsed-card) {
+    [data-lte-icon="expand"] {
+      display: none;
+    }
+  }
+
+
   .nav.flex-column {
     > li {
       margin: 0;
diff --git a/src/ts/card-widget.ts b/src/ts/card-widget.ts
index 0c7bc7b0365..d3cfe0fcd8f 100644
--- a/src/ts/card-widget.ts
+++ b/src/ts/card-widget.ts
@@ -31,40 +31,33 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
 const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
 const CLASS_NAME_MAXIMIZED = 'maximized-card'
 
-const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
+const SELECTOR_DATA_REMOVE = '[data-lte-toggle="card-remove"]'
 const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
 const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
 const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
-const SELECTOR_CARD_HEADER = '.card-header'
 const SELECTOR_CARD_BODY = '.card-body'
 const SELECTOR_CARD_FOOTER = '.card-footer'
 
-const Default = {
-  animationSpeed: 500,
-  collapseTrigger: SELECTOR_DATA_COLLAPSE,
-  removeTrigger: SELECTOR_DATA_REMOVE,
-  maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
-  collapseIcon: 'fa-minus',
-  expandIcon: 'fa-plus',
-  maximizeIcon: 'fa-expand',
-  minimizeIcon: 'fa-compress'
-}
-
 type Config = {
   animationSpeed: number;
   collapseTrigger: string;
   removeTrigger: string;
   maximizeTrigger: string;
-  collapseIcon: string;
-  expandIcon: string;
-  maximizeIcon: string;
-  minimizeIcon: string;
+}
+
+const Default: Config = {
+  animationSpeed: 500,
+  collapseTrigger: SELECTOR_DATA_COLLAPSE,
+  removeTrigger: SELECTOR_DATA_REMOVE,
+  maximizeTrigger: SELECTOR_DATA_MAXIMIZE
 }
 
 class CardWidget {
   _element: HTMLElement
   _parent: HTMLElement | undefined
+  _clone: HTMLElement | undefined
   _config: Config
+
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._parent = element.closest(SELECTOR_CARD) as HTMLElement | undefined
@@ -98,13 +91,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
-
-    if (icon) {
-      icon.classList.remove(this._config.collapseIcon)
-      icon.classList.add(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -130,13 +116,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
-
-    if (icon) {
-      icon.classList.add(this._config.collapseIcon)
-      icon.classList.remove(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -163,15 +142,8 @@ class CardWidget {
     const event = new Event(EVENT_MAXIMIZED)
 
     if (this._parent) {
-      const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
-
-      if (maxElm) {
-        maxElm.classList.add(this._config.minimizeIcon)
-        maxElm.classList.remove(this._config.maximizeIcon)
-      }
-
-      this._parent.style.height = `${this._parent.scrollHeight}px`
-      this._parent.style.width = `${this._parent.scrollWidth}px`
+      this._parent.style.height = `${this._parent.offsetHeight}px`
+      this._parent.style.width = `${this._parent.offsetWidth}px`
       this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
@@ -198,14 +170,9 @@ class CardWidget {
     const event = new Event(EVENT_MINIMIZED)
 
     if (this._parent) {
-      const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
-
-      if (minElm) {
-        minElm.classList.add(this._config.maximizeIcon)
-        minElm.classList.remove(this._config.minimizeIcon)
-      }
-
-      this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
+      this._parent.style.height = 'auto'
+      this._parent.style.width = 'auto'
+      this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
         const htmlTag = document.querySelector('html')