diff --git a/src/pages/widgets/cards.html b/src/pages/widgets/cards.html
new file mode 100644
index 000000000..d18b38a9d
--- /dev/null
+++ b/src/pages/widgets/cards.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- For RTL verison -->
+<!-- <html lang="en" dir="rtl"> -->
+  <head>
+    @@include('./_head.html', {
+      "path": "../..",
+      "title": "AdminLTE 4 | Widgets - Cards"
+    })
+  </head>
+  <body class="layout-fixed">
+    <div class="wrapper">
+      @@include('./dashboard/_topbar.html', {
+        "path": "../.."
+      })
+
+      @@include('./dashboard/_sidenav.html', {
+        "mainPage": "widgets",
+        "page": "cards",
+        "path": "../.."
+      })
+      <!-- Main content -->
+      <div class="content-wrapper">
+        @@include('./dashboard/_content-header.html', {
+          "header_name": "Widgets - Cards"
+        })
+        <!-- Main content -->
+        <div class="content">
+          <div class="container-fluid">
+            <h4 class="mb-2 mt-4">Cards</h4>
+            <h5 class="mb-2">Abilities</h5>
+            <div class="row">
+              <div class="col-md-3">
+                <div class="card card-primary collapsed-card">
+                  <div class="card-header">
+                    <h3 class="card-title">Expandable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-success">
+                  <div class="card-header">
+                    <h3 class="card-title">Collapsable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-warning">
+                  <div class="card-header">
+                    <h3 class="card-title">Removable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-danger">
+                  <div class="card-header">
+                    <h3 class="card-title">Maximizable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+          </div><!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </div>
+      <!-- /.content-wrapper -->
+
+      @@include('./dashboard/_footer.html', {
+        "path": "../.."
+      })
+    </div>
+    <!--  ./wrapper -->
+
+    @@include('./_scripts.html', {
+      "path": "../.."
+    })
+  </body>
+</html>
diff --git a/src/pages/widgets.html b/src/pages/widgets/info-box.html
similarity index 68%
rename from src/pages/widgets.html
rename to src/pages/widgets/info-box.html
index 66e146bc8..ac2bc8474 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets/info-box.html
@@ -4,26 +4,26 @@
 <!-- <html lang="en" dir="rtl"> -->
   <head>
     @@include('./_head.html', {
-      "path": "..",
-      "title": "AdminLTE 4 | Widgets"
+      "path": "../..",
+      "title": "AdminLTE 4 | Widgets - Info Box"
     })
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   </head>
   <body class="layout-fixed">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
-        "path": ".."
+        "path": "../.."
       })
 
       @@include('./dashboard/_sidenav.html', {
-        "mainPage": "pages",
-        "page": "widgets",
-        "path": ".."
+        "mainPage": "widgets",
+        "page": "info-box",
+        "path": "../.."
       })
       <!-- Main content -->
       <div class="content-wrapper">
         @@include('./dashboard/_content-header.html', {
-          "header_name": "Widgets"
+          "header_name": "Widgets - Info Box"
         })
         <!-- Main content -->
         <div class="content">
@@ -332,161 +332,6 @@
               <!-- /.col -->
             </div>
             <!-- /.row -->
-
-            <!-- =========================================================== -->
-
-            <!-- Small Box (Stat card) -->
-            <h5 class="mb-2 mt-4">Small Box</h5>
-            <div class="row">
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box bg-primary">
-                  <div class="inner">
-                    <h3>150</h3>
-
-                    <p>New Orders</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-bag"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box bg-success">
-                  <div class="inner">
-                    <h3>53<sup class="fs-5">%</sup></h3>
-
-                    <p>Bounce Rate</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-stats-bars"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box bg-warning">
-                  <div class="inner">
-                    <h3>44</h3>
-
-                    <p>User Registrations</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-person-add"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box bg-danger">
-                  <div class="inner">
-                    <h3>65</h3>
-
-                    <p>Unique Visitors</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-pie-graph"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-            </div>
-            <!-- /.row -->
-
-            <!-- =========================================================== -->
-            <h4 class="mb-2 mt-4">Cards</h4>
-            <h5 class="mb-2">Abilities</h5>
-            <div class="row">
-              <div class="col-md-3">
-                <div class="card card-primary collapsed-card">
-                  <div class="card-header">
-                    <h3 class="card-title">Expandable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-success">
-                  <div class="card-header">
-                    <h3 class="card-title">Collapsable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-warning">
-                  <div class="card-header">
-                    <h3 class="card-title">Removable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-danger">
-                  <div class="card-header">
-                    <h3 class="card-title">Maximizable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-            </div>
-            <!-- /.row -->
           </div><!-- /.container-fluid -->
         </div>
         <!-- /.content -->
@@ -494,13 +339,13 @@
       <!-- /.content-wrapper -->
 
       @@include('./dashboard/_footer.html', {
-        "path": ".."
+        "path": "../.."
       })
     </div>
     <!--  ./wrapper -->
 
     @@include('./_scripts.html', {
-      "path": ".."
+      "path": "../.."
     })
   </body>
 </html>
diff --git a/src/pages/widgets/small-box.html b/src/pages/widgets/small-box.html
new file mode 100644
index 000000000..d2268ea00
--- /dev/null
+++ b/src/pages/widgets/small-box.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- For RTL verison -->
+<!-- <html lang="en" dir="rtl"> -->
+  <head>
+    @@include('./_head.html', {
+      "path": "../..",
+      "title": "AdminLTE 4 | Widgets - Small Box"
+    })
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  </head>
+  <body class="layout-fixed">
+    <div class="wrapper">
+      @@include('./dashboard/_topbar.html', {
+        "path": "../.."
+      })
+
+      @@include('./dashboard/_sidenav.html', {
+        "mainPage": "widgets",
+        "page": "small-box",
+        "path": "../.."
+      })
+      <!-- Main content -->
+      <div class="content-wrapper">
+        @@include('./dashboard/_content-header.html', {
+          "header_name": "Widgets - Small Box"
+        })
+        <!-- Main content -->
+        <div class="content">
+          <div class="container-fluid">
+            <!-- Small Box (Stat card) -->
+            <h5 class="mb-2">Small Box</h5>
+            <section class="row">
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box bg-primary">
+                  <div class="inner">
+                    <h3>150</h3>
+
+                    <p>New Orders</p>
+                  </div>
+                  <div class="icon">
+                    <i class="inner-icon ion ion-bag"></i>
+                  </div>
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box bg-success">
+                  <div class="inner">
+                    <h3>53<sup class="fs-5">%</sup></h3>
+
+                    <p>Bounce Rate</p>
+                  </div>
+                  <div class="icon">
+                    <i class="inner-icon ion ion-stats-bars"></i>
+                  </div>
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box bg-warning">
+                  <div class="inner">
+                    <h3>44</h3>
+
+                    <p>User Registrations</p>
+                  </div>
+                  <div class="icon">
+                    <i class="inner-icon ion ion-person-add"></i>
+                  </div>
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box bg-danger">
+                  <div class="inner">
+                    <h3>65</h3>
+
+                    <p>Unique Visitors</p>
+                  </div>
+                  <div class="icon">
+                    <i class="inner-icon ion ion-pie-graph"></i>
+                  </div>
+                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+            </section>
+            <!-- /.row -->
+          </div><!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </div>
+      <!-- /.content-wrapper -->
+
+      @@include('./dashboard/_footer.html', {
+        "path": "../.."
+      })
+    </div>
+    <!--  ./wrapper -->
+
+    @@include('./_scripts.html', {
+      "path": "../.."
+    })
+  </body>
+</html>
diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html
index 73f06846b..e6ea91e1e 100644
--- a/src/partials/dashboard/_sidenav.html
+++ b/src/partials/dashboard/_sidenav.html
@@ -41,15 +41,36 @@
             </li>
           </ul>
         </li>
-        <li class="nav-item">
-          <a href="@@path/pages/widgets.html" class="nav-link @@if (context.page === 'widgets') {active}">
+        <li class="nav-item @@if (context.mainPage === 'widgets') {menu-open}">
+          <a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'widgets') {active}">
             <i class="nav-icon fas fa-circle"></i>
             <p>
               Widgets
-              <span class="end badge bg-danger">New</span>
+              <i class="end fas fa-angle-left"></i>
             </p>
           </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="@@path/pages/widgets/small-box.html" class="nav-link @@if (context.page === 'small-box') {active}">
+                <i class="nav-icon far fa-circle"></i>
+                <p>Small Box</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="@@path/pages/widgets/info-box.html" class="nav-link @@if (context.page === 'info-box') {active}">
+                <i class="nav-icon far fa-circle"></i>
+                <p>info Box</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="@@path/pages/widgets/cards.html" class="nav-link @@if (context.page === 'cards') {active}">
+                <i class="nav-icon far fa-circle"></i>
+                <p>Cards</p>
+              </a>
+            </li>
+          </ul>
         </li>
+
         <li class="nav-item @@if (context.mainPage === 'layout') {menu-open}">
           <a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'layout') {active}">
             <i class="nav-icon fas fa-circle"></i>
