diff --git a/src/index.html b/src/index.html
index b73a2e9bf..6f4b014d2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -26,7 +26,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Dashboard</div>
+                <h3>Dashboard</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -43,7 +43,7 @@
             <div class="row">
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-primary">
+                <div class="small-box text-bg-primary">
                   <div class="inner">
                     <h3>150</h3>
 
@@ -58,7 +58,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-success">
+                <div class="small-box text-bg-success">
                   <div class="inner">
                     <h3>53<sup class="fs-5">%</sup></h3>
 
@@ -73,7 +73,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-warning">
+                <div class="small-box text-bg-warning">
                   <div class="inner">
                     <h3>44</h3>
 
@@ -88,7 +88,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-danger">
+                <div class="small-box text-bg-danger">
                   <div class="inner">
                     <h3>65</h3>
 
@@ -146,7 +146,7 @@
                     <h3 class="card-title">Direct Chat</h3>
 
                     <div class="card-tools">
-                      <span title="3 New Messages" class="badge bg-primary">3</span>
+                      <span title="3 New Messages" class="badge text-bg-primary">3</span>
                       <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fa-solid fa-minus"></i>
                       </button>
diff --git a/src/index2.html b/src/index2.html
index 2605ccd59..fd7d882cf 100644
--- a/src/index2.html
+++ b/src/index2.html
@@ -25,7 +25,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Dashboard v2</div>
+                <h3>Dashboard v2</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -42,7 +42,7 @@
             <div class="row">
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
+                  <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">CPU Traffic</span>
@@ -58,7 +58,7 @@
               <!-- /.col -->
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
+                  <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -75,7 +75,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
+                  <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Sales</span>
@@ -88,7 +88,7 @@
               <!-- /.col -->
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
+                  <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">New Members</span>
@@ -153,7 +153,7 @@
                           Add Products to Cart
                           <span class="float-end"><b>160</b>/200</span>
                           <div class="progress progress-sm">
-                            <div class="progress-bar bg-primary" style="width: 80%"></div>
+                            <div class="progress-bar text-bg-primary" style="width: 80%"></div>
                           </div>
                         </div>
                         <!-- /.progress-group -->
@@ -162,7 +162,7 @@
                           Complete Purchase
                           <span class="float-end"><b>310</b>/400</span>
                           <div class="progress progress-sm">
-                            <div class="progress-bar bg-danger" style="width: 75%"></div>
+                            <div class="progress-bar text-bg-danger" style="width: 75%"></div>
                           </div>
                         </div>
 
@@ -171,7 +171,7 @@
                           <span class="progress-text">Visit Premium Page</span>
                           <span class="float-end"><b>480</b>/800</span>
                           <div class="progress progress-sm">
-                            <div class="progress-bar bg-success" style="width: 60%"></div>
+                            <div class="progress-bar text-bg-success" style="width: 60%"></div>
                           </div>
                         </div>
 
@@ -180,7 +180,7 @@
                           Send Inquiries
                           <span class="float-end"><b>250</b>/500</span>
                           <div class="progress progress-sm">
-                            <div class="progress-bar bg-warning" style="width: 50%"></div>
+                            <div class="progress-bar text-bg-warning" style="width: 50%"></div>
                           </div>
                         </div>
                         <!-- /.progress-group -->
@@ -203,7 +203,7 @@
                       <!-- /.col -->
                       <div class="col-sm-3 col-6">
                         <div class="description-block border-end">
-                          <span class="description-percentage text-purple"><i class="fa-solid fa-caret-left"></i> 0%</span>
+                          <span class="description-percentage text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
                           <h5 class="description-header">$10,390.90</h5>
                           <span class="description-text">TOTAL COST</span>
                         </div>
@@ -250,7 +250,7 @@
                         <h3 class="card-title">Direct Chat</h3>
 
                         <div class="card-tools">
-                          <span title="3 New Messages" class="badge bg-warning">3</span>
+                          <span title="3 New Messages" class="badge text-bg-warning">3</span>
                           <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                             <i class="fa-solid fa-minus"></i>
                           </button>
@@ -455,7 +455,7 @@
                         <h3 class="card-title">Latest Members</h3>
 
                         <div class="card-tools">
-                          <span class="badge bg-danger">8 New Members</span>
+                          <span class="badge text-bg-danger">8 New Members</span>
                           <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                             <i class="fa-solid fa-minus"></i>
                           </button>
@@ -552,7 +552,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR9842</a></td>
                           <td>Call of Duty IV</td>
-                          <td><span class="badge bg-success">Shipped</span></td>
+                          <td><span class="badge text-bg-success">Shipped</span></td>
                           <td>
                             <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
                           </td>
@@ -560,7 +560,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR1848</a></td>
                           <td>Samsung Smart TV</td>
-                          <td><span class="badge bg-warning">Pending</span></td>
+                          <td><span class="badge text-bg-warning">Pending</span></td>
                           <td>
                             <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
                           </td>
@@ -568,7 +568,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR7429</a></td>
                           <td>iPhone 6 Plus</td>
-                          <td><span class="badge bg-danger">Delivered</span></td>
+                          <td><span class="badge text-bg-danger">Delivered</span></td>
                           <td>
                             <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
                           </td>
@@ -576,7 +576,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR7429</a></td>
                           <td>Samsung Smart TV</td>
-                          <td><span class="badge bg-purple">Processing</span></td>
+                          <td><span class="badge text-bg-info">Processing</span></td>
                           <td>
                             <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
                           </td>
@@ -584,7 +584,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR1848</a></td>
                           <td>Samsung Smart TV</td>
-                          <td><span class="badge bg-warning">Pending</span></td>
+                          <td><span class="badge text-bg-warning">Pending</span></td>
                           <td>
                             <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
                           </td>
@@ -592,7 +592,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR7429</a></td>
                           <td>iPhone 6 Plus</td>
-                          <td><span class="badge bg-danger">Delivered</span></td>
+                          <td><span class="badge text-bg-danger">Delivered</span></td>
                           <td>
                             <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
                           </td>
@@ -600,7 +600,7 @@
                         <tr>
                           <td><a href="pages/examples/invoice.html">OR9842</a></td>
                           <td>Call of Duty IV</td>
-                          <td><span class="badge bg-success">Shipped</span></td>
+                          <td><span class="badge text-bg-success">Shipped</span></td>
                           <td>
                             <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
                           </td>
@@ -623,7 +623,7 @@
 
               <div class="col-md-4">
                 <!-- Info Boxes Style 2 -->
-                <div class="info-box mb-3 bg-warning">
+                <div class="info-box mb-3 text-bg-warning">
                   <span class="info-box-icon"><i class="fa-solid fa-tag"></i></span>
 
                   <div class="info-box-content">
@@ -633,7 +633,7 @@
                   <!-- /.info-box-content -->
                 </div>
                 <!-- /.info-box -->
-                <div class="info-box mb-3 bg-success">
+                <div class="info-box mb-3 text-bg-success">
                   <span class="info-box-icon"><i class="fa-regular fa-heart"></i></span>
 
                   <div class="info-box-content">
@@ -643,7 +643,7 @@
                   <!-- /.info-box-content -->
                 </div>
                 <!-- /.info-box -->
-                <div class="info-box mb-3 bg-danger">
+                <div class="info-box mb-3 text-bg-danger">
                   <span class="info-box-icon"><i class="fa-solid fa-cloud-download-alt"></i></span>
 
                   <div class="info-box-content">
@@ -653,7 +653,7 @@
                   <!-- /.info-box-content -->
                 </div>
                 <!-- /.info-box -->
-                <div class="info-box mb-3 bg-purple">
+                <div class="info-box mb-3 text-bg-info">
                   <span class="info-box-icon"><i class="fa-regular fa-comment"></i></span>
 
                   <div class="info-box-content">
@@ -723,7 +723,7 @@
                       <li class="nav-item">
                         <a href="#" class="nav-link">
                           China
-                          <span class="float-end text-purple">
+                          <span class="float-end text-info">
                             <i class="fa-solid fa-arrow-left fs-7"></i> 0%
                           </span>
                         </a>
@@ -757,7 +757,7 @@
                         </div>
                         <div class="product-info">
                           <a href="javascript:void(0)" class="product-title">Samsung TV
-                            <span class="badge bg-warning float-end">$1800</span></a>
+                            <span class="badge text-bg-warning float-end">$1800</span></a>
                           <span class="product-description">
                             Samsung 32" 1080p 60Hz LED Smart HDTV.
                           </span>
@@ -770,7 +770,7 @@
                         </div>
                         <div class="product-info">
                           <a href="javascript:void(0)" class="product-title">Bicycle
-                            <span class="badge bg-purple float-end">$700</span></a>
+                            <span class="badge text-bg-info float-end">$700</span></a>
                           <span class="product-description">
                             26" Mongoose Dolomite Men's 7-speed, Navy Blue.
                           </span>
@@ -783,7 +783,7 @@
                         </div>
                         <div class="product-info">
                           <a href="javascript:void(0)" class="product-title">
-                            Xbox One <span class="badge bg-danger float-end">
+                            Xbox One <span class="badge text-bg-danger float-end">
                             $350
                           </span>
                           </a>
@@ -799,7 +799,7 @@
                         </div>
                         <div class="product-info">
                           <a href="javascript:void(0)" class="product-title">PlayStation 4
-                            <span class="badge bg-success float-end">$399</span></a>
+                            <span class="badge text-bg-success float-end">$399</span></a>
                           <span class="product-description">
                             PlayStation 4 500GB Console (PS4)
                           </span>
diff --git a/src/index3.html b/src/index3.html
index 0a79814d0..256ed656c 100644
--- a/src/index3.html
+++ b/src/index3.html
@@ -26,7 +26,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Dashboard v3</div>
+                <h3>Dashboard v3</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -164,7 +164,7 @@
                         <td>
                           <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
                           Perfect Item
-                          <span class="badge bg-danger">NEW</span>
+                          <span class="badge text-bg-danger">NEW</span>
                         </td>
                         <td>$199 USD</td>
                         <td>
diff --git a/src/pages/examples/login.html b/src/pages/examples/login.html
index a1f42e636..7103f7a7f 100644
--- a/src/pages/examples/login.html
+++ b/src/pages/examples/login.html
@@ -6,7 +6,7 @@
     <!-- icheck bootstrap -->
     @@include('./_head.html', {
       "path": "../..",
-      "title": "AdminLTE 4 | General Form Elements"
+      "title": "AdminLTE 4 | Login Page"
     })
   </head>
   <body class="login-page">
diff --git a/src/pages/examples/register.html b/src/pages/examples/register.html
new file mode 100644
index 000000000..bd51a64cc
--- /dev/null
+++ b/src/pages/examples/register.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- For RTL verison -->
+<!-- <html lang="en" dir="rtl"> -->
+  <head>
+    <!-- icheck bootstrap -->
+    @@include('./_head.html', {
+      "path": "../..",
+      "title": "AdminLTE 4 | Register Page"
+    })
+  </head>
+  <body class="register-page">
+    <div class="register-box">
+      <div class="register-logo">
+        <a href="../../index2.html"><b>Admin</b>LTE</a>
+      </div>
+      <!-- /.register-logo -->
+      <div class="card">
+        <div class="card-body register-card-body">
+          <p class="register-box-msg">Register a new membership</p>
+
+          <form action="../../index3.html" method="post">
+            <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>
+              </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>
+              </div>
+            </div>
+            <div class="input-group mb-3">
+              <input type="password" class="form-control" placeholder="Password">
+              <div class="input-group-text">
+                <span class="fa-solid fa-lock"></span>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-8">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                  <label class="form-check-label" for="flexCheckDefault">
+                    I agree to the <a href="#">terms</a>
+                  </label>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-4">
+                <div class="d-grid gap-2">
+                  <button type="submit" class="btn btn-primary">Sign In</button>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+          </form>
+
+          <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
+            </a>
+            <a href="#" class="btn btn-danger">
+              <i class="fa-brands fa-google-plus me-2"></i> Sign in using Google+
+            </a>
+          </div>
+          <!-- /.social-auth-links -->
+
+          <p class="mb-0">
+            <a href="login.html" class="text-center">I already have a membership</a>
+          </p>
+        </div>
+        <!-- /.register-card-body -->
+      </div>
+    </div>
+    <!-- /.register-box -->
+
+    @@include('./_scripts.html', {
+      "path": "../.."
+    })
+  </body>
+</html>
diff --git a/src/pages/forms/general.html b/src/pages/forms/general.html
index 030f4e729..f9bf6342d 100644
--- a/src/pages/forms/general.html
+++ b/src/pages/forms/general.html
@@ -25,7 +25,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">General Form</div>
+                <h3>General Form</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
diff --git a/src/pages/layout/fixed-sidebar.html b/src/pages/layout/fixed-sidebar.html
index a7db1e4c7..fffa69e13 100644
--- a/src/pages/layout/fixed-sidebar.html
+++ b/src/pages/layout/fixed-sidebar.html
@@ -25,7 +25,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Fixed Layout</div>
+                <h3>Fixed Layout</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
diff --git a/src/pages/tables/simple.html b/src/pages/tables/simple.html
index a167aff93..2a9a38519 100644
--- a/src/pages/tables/simple.html
+++ b/src/pages/tables/simple.html
@@ -25,7 +25,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Simple Tables</div>
+                <h3>Simple Tables</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -65,37 +65,37 @@
                               <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-danger">55%</span></td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
                         <tr>
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar bg-warning" style="width: 70%"></div>
+                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-warning">70%</span></td>
+                          <td><span class="badge text-bg-warning">70%</span></td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-primary" style="width: 30%"></div>
+                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-primary">30%</span></td>
+                          <td><span class="badge text-bg-primary">30%</span></td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-success" style="width: 90%"></div>
+                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-success">90%</span></td>
+                          <td><span class="badge text-bg-success">90%</span></td>
                         </tr>
                       </tbody>
                     </table>
@@ -137,37 +137,37 @@
                               <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-danger">55%</span></td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
                         <tr>
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar bg-warning" style="width: 70%"></div>
+                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-warning">70%</span></td>
+                          <td><span class="badge text-bg-warning">70%</span></td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-primary" style="width: 30%"></div>
+                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-primary">30%</span></td>
+                          <td><span class="badge text-bg-primary">30%</span></td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-success" style="width: 90%"></div>
+                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-success">90%</span></td>
+                          <td><span class="badge text-bg-success">90%</span></td>
                         </tr>
                       </tbody>
                     </table>
@@ -212,37 +212,37 @@
                               <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-danger">55%</span></td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
                         <tr>
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar bg-warning" style="width: 70%"></div>
+                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-warning">70%</span></td>
+                          <td><span class="badge text-bg-warning">70%</span></td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-primary" style="width: 30%"></div>
+                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-primary">30%</span></td>
+                          <td><span class="badge text-bg-primary">30%</span></td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-success" style="width: 90%"></div>
+                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-success">90%</span></td>
+                          <td><span class="badge text-bg-success">90%</span></td>
                         </tr>
                       </tbody>
                     </table>
@@ -275,37 +275,37 @@
                               <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-danger">55%</span></td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
                         <tr>
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar bg-warning" style="width: 70%"></div>
+                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-warning">70%</span></td>
+                          <td><span class="badge text-bg-warning">70%</span></td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-primary" style="width: 30%"></div>
+                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-primary">30%</span></td>
+                          <td><span class="badge text-bg-primary">30%</span></td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
                             <div class="progress progress-xs progress-striped active">
-                              <div class="progress-bar bg-success" style="width: 90%"></div>
+                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
                             </div>
                           </td>
-                          <td><span class="badge bg-success">90%</span></td>
+                          <td><span class="badge text-bg-success">90%</span></td>
                         </tr>
                       </tbody>
                     </table>
diff --git a/src/pages/widgets/cards.html b/src/pages/widgets/cards.html
index 9c4f60d37..8b732513f 100644
--- a/src/pages/widgets/cards.html
+++ b/src/pages/widgets/cards.html
@@ -25,7 +25,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Cards</div>
+                <h3>Cards</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
diff --git a/src/pages/widgets/info-box.html b/src/pages/widgets/info-box.html
index 42aa5e474..eae02a68c 100644
--- a/src/pages/widgets/info-box.html
+++ b/src/pages/widgets/info-box.html
@@ -26,7 +26,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Info Box</div>
+                <h3>Info Box</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -44,7 +44,7 @@
             <div class="row">
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
+                  <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">CPU Traffic</span>
@@ -61,7 +61,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
+                  <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Sales</span>
@@ -78,7 +78,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
+                  <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">New Members</span>
@@ -92,7 +92,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
+                  <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -111,7 +111,7 @@
             <div class="row">
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-none">
-                  <span class="info-box-icon bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
+                  <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">CPU Traffic</span>
@@ -128,7 +128,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-sm">
-                  <span class="info-box-icon bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
+                  <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Sales</span>
@@ -145,7 +145,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow">
-                  <span class="info-box-icon bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
+                  <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">New Members</span>
@@ -159,7 +159,7 @@
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-lg">
-                  <span class="info-box-icon bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
+                  <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -177,7 +177,7 @@
             <h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
             <div class="row">
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-primary">
+                <div class="info-box text-bg-primary">
                   <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
 
                   <div class="info-box-content">
@@ -197,7 +197,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-success">
+                <div class="info-box text-bg-success">
                   <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
 
                   <div class="info-box-content">
@@ -217,7 +217,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-warning">
+                <div class="info-box text-bg-warning">
                   <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
 
                   <div class="info-box-content">
@@ -237,7 +237,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-danger">
+                <div class="info-box text-bg-danger">
                   <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
 
                   <div class="info-box-content">
@@ -263,7 +263,7 @@
             <h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
             <div class="row">
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-primary bg-gradient">
+                <div class="info-box text-bg-primary bg-gradient">
                   <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
 
                   <div class="info-box-content">
@@ -283,7 +283,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-success bg-gradient">
+                <div class="info-box text-bg-success bg-gradient">
                   <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
 
                   <div class="info-box-content">
@@ -303,7 +303,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-warning bg-gradient">
+                <div class="info-box text-bg-warning bg-gradient">
                   <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
 
                   <div class="info-box-content">
@@ -323,7 +323,7 @@
               </div>
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
-                <div class="info-box bg-danger bg-gradient">
+                <div class="info-box text-bg-danger bg-gradient">
                   <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
 
                   <div class="info-box-content">
diff --git a/src/pages/widgets/small-box.html b/src/pages/widgets/small-box.html
index e5be0c51a..b01bb1a5e 100644
--- a/src/pages/widgets/small-box.html
+++ b/src/pages/widgets/small-box.html
@@ -26,7 +26,7 @@
           <div class="container-fluid">
             <div class="row mb-2">
               <div class="col-sm-6">
-                <div class="fs-3">Small Box</div>
+                <h3>Small Box</h3>
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
@@ -45,7 +45,7 @@
             <div class="row">
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-primary">
+                <div class="small-box text-bg-primary">
                   <div class="inner">
                     <h3>150</h3>
 
@@ -60,7 +60,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-success">
+                <div class="small-box text-bg-success">
                   <div class="inner">
                     <h3>53<sup class="fs-5">%</sup></h3>
 
@@ -75,7 +75,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-warning">
+                <div class="small-box text-bg-warning">
                   <div class="inner">
                     <h3>44</h3>
 
@@ -90,7 +90,7 @@
               <!-- ./col -->
               <div class="col-lg-3 col-6">
                 <!-- small box -->
-                <div class="small-box bg-danger">
+                <div class="small-box text-bg-danger">
                   <div class="inner">
                     <h3>65</h3>
 
diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html
index a560f802f..6f7b0f15d 100644
--- a/src/partials/dashboard/_sidenav.html
+++ b/src/partials/dashboard/_sidenav.html
@@ -2,7 +2,7 @@
 <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
   <div class="brand-container">
     <a href="javascript:;" class="brand-link">
-      <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
+      <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
     <a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
@@ -76,7 +76,7 @@
             <i class="nav-icon fa-solid fa-circle"></i>
             <p>
               Layout Options
-              <span class="badge bg-info float-end me-3">6</span>
+              <span class="badge text-bg-info float-end me-3">6</span>
               <i class="end fa-solid fa-angle-right"></i>
             </p>
           </a>
@@ -123,6 +123,30 @@
             </li>
           </ul>
         </li>
+        <li class="nav-header">EXAMPLES</li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
+            <p>
+              Login & Register
+              <i class="end fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="@@path/pages/examples/login.html" class="nav-link ">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Login v1</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="@@path/pages/examples/register.html" class="nav-link ">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Register v1</p>
+              </a>
+            </li>
+          </ul>
+        </li>
         <li class="nav-header">MULTI LEVEL EXAMPLE</li>
         <li class="nav-item">
           <a href="javascript:;" class="nav-link">
diff --git a/src/partials/dashboard/_topbar.html b/src/partials/dashboard/_topbar.html
index 8409a3eca..2e00dc25e 100644
--- a/src/partials/dashboard/_topbar.html
+++ b/src/partials/dashboard/_topbar.html
@@ -27,7 +27,7 @@
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="fa-regular fa-comments"></i>
-          <span class="navbar-badge badge bg-danger">3</span>
+          <span class="navbar-badge badge text-bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <a href="#" class="dropdown-item">
@@ -91,7 +91,7 @@
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="fa-regular fa-bell"></i>
-          <span class="navbar-badge badge bg-warning">15</span>
+          <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>
@@ -121,7 +121,7 @@
         </a>
         <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <!-- User image -->
-          <li class="user-header bg-primary">
+          <li class="user-header text-bg-primary">
             <img src="@@path/assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
 
             <p>
@@ -156,7 +156,6 @@
           <span class="theme-icon-active">
             <i class="my-1"></i>
           </span>
-          <span class="d-lg-none ms-2">Toggle theme</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
           <li>