diff --git a/public/assets/vendor/css/core-customization.txt b/public/assets/vendor/css/core-customization.txt
new file mode 100644
index 00000000..72c560b4
--- /dev/null
+++ b/public/assets/vendor/css/core-customization.txt
@@ -0,0 +1,3 @@
+ --bs-body-font-size: 0.8375rem;
+
+ 
\ No newline at end of file
diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index 1626d507..4963ddc4 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -80,7 +80,7 @@
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-root-font-size: 16px;
    --bs-body-font-family: var(--bs-font-sans-serif);
-   --bs-body-font-size: 0.9375rem;
+   --bs-body-font-size: 0.8375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.375;
    --bs-body-color: #646e78;
@@ -5855,7 +5855,7 @@
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "/")
-     /* rtl: var(--bs-breadcrumb-divider, "\\") */
+     rtl: var(--bs-breadcrumb-divider, "\\") 
  }
  
  .breadcrumb-item.active {
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index c3f7c790..4e948cbb 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -74,18 +74,15 @@ const Header = () => {
         id="navbar-collapse"
       >
         {/* Search */}
-        <div class="navbar-nav align-items-center">
-          <div class="nav-item navbar-search-wrapper mb-0">
-            <a
-              class="nav-item nav-link search-toggler px-0"
-              href="javascript:void(0);"
-            >
+        <div className="navbar-nav align-items-center">
+          <div className="nav-item navbar-search-wrapper mb-0">
+            <a className="nav-item nav-link search-toggler px-0" href="#;">
               <span
-                class="d-inline-block text-body-secondary fw-normal"
+                className="d-inline-block text-body-secondary fw-normal"
                 id="autocomplete"
               >
                 <div
-                  class="aa-Autocomplete"
+                  className="aa-Autocomplete"
                   role="combobox"
                   aria-expanded="false"
                   aria-haspopup="listbox"
@@ -93,15 +90,15 @@ const Header = () => {
                 >
                   <button
                     type="button"
-                    class="aa-DetachedSearchButton"
+                    className="aa-DetachedSearchButton"
                     title="Search"
                     id="autocomplete-0-label"
                   >
-                    <div class="aa-DetachedSearchButtonIcon"></div>
-                    <div class="aa-DetachedSearchButtonPlaceholder">
+                    <div className="aa-DetachedSearchButtonIcon"></div>
+                    <div className="aa-DetachedSearchButtonPlaceholder">
                       Search - <span className="font-italic">Comming Soon</span>
                     </div>
-                    <div class="aa-DetachedSearchButtonQuery"></div>
+                    <div className="aa-DetachedSearchButtonQuery"></div>
                   </button>
                 </div>
               </span>
@@ -117,67 +114,67 @@ const Header = () => {
 
         {/* icon list */}
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
-          <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
+          <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
             <a
-              class="nav-link dropdown-toggle hide-arrow"
-              href="javascript:void(0);"
+              className="nav-link dropdown-toggle hide-arrow"
+              href="#;"
               data-bs-toggle="dropdown"
               data-bs-auto-close="outside"
               aria-expanded="false"
             >
-              <i class="icon-base bx bx-grid-alt icon-md"></i>
+              <i className="icon-base bx bx-grid-alt icon-md"></i>
             </a>
-            <div class="dropdown-menu dropdown-menu-end p-0">
-              <div class="dropdown-menu-header border-bottom">
-                <div class="dropdown-header d-flex align-items-center py-3">
-                  <h6 class="mb-0 me-auto">Shortcuts</h6>
+            <div className="dropdown-menu dropdown-menu-end p-0">
+              <div className="dropdown-menu-header border-bottom">
+                <div className="dropdown-header d-flex align-items-center py-3">
+                  <h6 className="mb-0 me-auto">Shortcuts</h6>
                   <a
-                    class="dropdown-shortcuts-add py-2 cusror-pointer"
+                    className="dropdown-shortcuts-add py-2 cusror-pointer"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     aria-label="Add shortcuts"
                     data-bs-original-title="Add shortcuts"
                   >
-                    <i class="icon-base bx bx-plus-circle text-heading"></i>
+                    <i className="icon-base bx bx-plus-circle text-heading"></i>
                   </a>
                 </div>
               </div>
-              <div class="dropdown-shortcuts-list scrollable-container ps">
-                <div class="row row-bordered overflow-visible g-0">
-                  <div class="dropdown-shortcuts-item col">
-                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i class="icon-base bx bx-home icon-26px text-heading"></i>
+              <div className="dropdown-shortcuts-list scrollable-container ps">
+                <div className="row row-bordered overflow-visible g-0">
+                  <div className="dropdown-shortcuts-item col">
+                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                      <i className="icon-base bx bx-home icon-26px text-heading"></i>
                     </span>
-                    <a href="/dashboard" class="stretched-link">
+                    <a href="/dashboard" className="stretched-link">
                       Dashboard
                     </a>
                     <small>User Dashboard</small>
                   </div>
-                  <div class="dropdown-shortcuts-item col">
-                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i class="icon-base bx bx-building-house icon-26px text-heading"></i>
+                  <div className="dropdown-shortcuts-item col">
+                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                      <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
                     </span>
-                    <a href="/projects" class="stretched-link">
+                    <a href="/projects" className="stretched-link">
                       Projects
                     </a>
                     <small>Projects List</small>
                   </div>
                 </div>
-                <div class="row row-bordered overflow-visible g-0">
-                  <div class="dropdown-shortcuts-item col">
-                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i class="icon-base bx bx-user-check icon-26px text-heading"></i>
+                <div className="row row-bordered overflow-visible g-0">
+                  <div className="dropdown-shortcuts-item col">
+                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                      <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
                     </span>
-                    <a href="/activities/Attendance" class="stretched-link">
+                    <a href="/activities/Attendance" className="stretched-link">
                       Attendance
                     </a>
                     <small>Manage Attendance</small>
                   </div>
-                  <div class="dropdown-shortcuts-item col">
-                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i class="icon-base bx bx-dumbbell icon-26px text-heading"></i>
+                  <div className="dropdown-shortcuts-item col">
+                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                      <i className="icon-base bx bx-dumbbell icon-26px text-heading"></i>
                     </span>
-                    <a href="/activities/task" class="stretched-link">
+                    <a href="/activities/task" className="stretched-link">
                       Task
                     </a>
                     <small>Work Allocations</small>
@@ -187,362 +184,321 @@ const Header = () => {
             </div>
           </li>
 
-          <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
+          <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
             <a
-              class="nav-link dropdown-toggle hide-arrow cursor-pointer"
+              className="nav-link dropdown-toggle hide-arrow cursor-pointer"
               data-bs-toggle="dropdown"
               data-bs-auto-close="outside"
               aria-expanded="false"
             >
-              <span class="position-relative">
-                <i class="icon-base bx bx-bell icon-lg"></i>
-                <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+              <span className="position-relative">
+                <i className="icon-base bx bx-bell icon-lg"></i>
+                <span className="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
               </span>
             </a>
-            <ul class="dropdown-menu dropdown-menu-end p-0">
-              <li class="dropdown-menu-header border-bottom">
-                <div class="dropdown-header d-flex align-items-center py-3">
-                  <h6 class="mb-0 me-auto">Notification</h6>
-                  <div class="d-flex align-items-center h6 mb-0">
-                    <span class="badge bg-label-primary me-2">8 New</span>
+            <ul className="dropdown-menu dropdown-menu-end p-0">
+              <li className="dropdown-menu-header border-bottom">
+                <div className="dropdown-header d-flex align-items-center py-3">
+                  <h6 className="mb-0 me-auto">Notification</h6>
+                  <div className="d-flex align-items-center h6 mb-0">
+                    <span className="badge bg-label-primary me-2">8 New</span>
                     <a
-                      href="javascript:void(0)"
-                      class="dropdown-notifications-all p-2"
+                      href="#"
+                      className="dropdown-notifications-all p-2"
                       data-bs-toggle="tooltip"
                       data-bs-placement="top"
                       aria-label="Mark all as read"
                       data-bs-original-title="Mark all as read"
                     >
-                      <i class="icon-base bx bx-envelope-open text-heading"></i>
+                      <i className="icon-base bx bx-envelope-open text-heading"></i>
                     </a>
                   </div>
                 </div>
               </li>
-              <li class="dropdown-notifications-list scrollable-container ps">
-                <ul class="list-group list-group-flush">
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
+              <li className="dropdown-notifications-list scrollable-container ps">
+                <ul className="list-group list-group-flush">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
                           <img
                             src="../../assets/img/avatars/1.png"
                             alt=""
-                            class="rounded-circle"
+                            className="rounded-circle"
                           ></img>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Congratulation Lettie 🎉</h6>
+                        <small className="mb-1 d-block text-body">
                           Won the monthly best seller gold badge
                         </small>
-                        <small class="text-body-secondary">1h ago</small>
+                        <small className="text-body-secondary">1h ago</small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
-                          <span class="avatar-initial rounded-circle bg-label-danger">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-danger">
                             CF
                           </span>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">Charles Franklin</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Charles Franklin</h6>
+                        <small className="mb-1 d-block text-body">
                           Accepted your connection
                         </small>
-                        <small class="text-body-secondary">12hr ago</small>
+                        <small className="text-body-secondary">12hr ago</small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
                           <img
                             src="../../assets/img/avatars/2.png"
                             alt=""
-                            class="rounded-circle"
+                            className="rounded-circle"
                           ></img>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">New Message ✉️</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New Message ✉️</h6>
+                        <small className="mb-1 d-block text-body">
                           You have new message from Natalie
                         </small>
-                        <small class="text-body-secondary">1h ago</small>
+                        <small className="text-body-secondary">1h ago</small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
-                          <span class="avatar-initial rounded-circle bg-label-success">
-                            <i class="icon-base bx bx-cart"></i>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-cart"></i>
                           </span>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Whoo! You have new order 🛒
+                        </h6>
+                        <small className="mb-1 d-block text-body">
                           ACME Inc. made new order $1,154
                         </small>
-                        <small class="text-body-secondary">1 day ago</small>
+                        <small className="text-body-secondary">1 day ago</small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
                           <img
                             src="../../assets/img/avatars/9.png"
                             alt=""
-                            class="rounded-circle"
+                            className="rounded-circle"
                           ></img>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
                           Application has been approved 🚀
                         </h6>
-                        <small class="mb-1 d-block text-body">
+                        <small className="mb-1 d-block text-body">
                           Your ABC project application has been approved.
                         </small>
-                        <small class="text-body-secondary">2 days ago</small>
+                        <small className="text-body-secondary">
+                          2 days ago
+                        </small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
-                          <span class="avatar-initial rounded-circle bg-label-success">
-                            <i class="icon-base bx bx-pie-chart-alt"></i>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-pie-chart-alt"></i>
                           </span>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">Monthly report is generated</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Monthly report is generated
+                        </h6>
+                        <small className="mb-1 d-block text-body">
                           July monthly financial report is generated{" "}
                         </small>
-                        <small class="text-body-secondary">3 days ago</small>
+                        <small className="text-body-secondary">
+                          3 days ago
+                        </small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
                           <img
                             src="../../assets/img/avatars/5.png"
                             alt=""
-                            class="rounded-circle"
+                            className="rounded-circle"
                           ></img>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">Send connection request</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Send connection request</h6>
+                        <small className="mb-1 d-block text-body">
                           Peter sent you connection request
                         </small>
-                        <small class="text-body-secondary">4 days ago</small>
+                        <small className="text-body-secondary">
+                          4 days ago
+                        </small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
                           <img
                             src="../../assets/img/avatars/6.png"
                             alt=""
-                            class="rounded-circle"
+                            className="rounded-circle"
                           ></img>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">New message from Jane</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New message from Jane</h6>
+                        <small className="mb-1 d-block text-body">
                           Your have new message from Jane
                         </small>
-                        <small class="text-body-secondary">5 days ago</small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
-                  <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                    <div class="d-flex">
-                      <div class="flex-shrink-0 me-3">
-                        <div class="avatar">
-                          <span class="avatar-initial rounded-circle bg-label-warning">
-                            <i class="icon-base bx bx-error"></i>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-warning">
+                            <i className="icon-base bx bx-error"></i>
                           </span>
                         </div>
                       </div>
-                      <div class="flex-grow-1">
-                        <h6 class="small mb-0">CPU is running high</h6>
-                        <small class="mb-1 d-block text-body">
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">CPU is running high</h6>
+                        <small className="mb-1 d-block text-body">
                           CPU Utilization Percent is currently at 88.63%,
                         </small>
-                        <small class="text-body-secondary">5 days ago</small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
                       </div>
-                      <div class="flex-shrink-0 dropdown-notifications-actions">
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-read"
-                        >
-                          <span class="badge badge-dot"></span>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
                         </a>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-archive"
-                        >
-                          <span class="icon-base bx bx-x"></span>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
                         </a>
                       </div>
                     </div>
                   </li>
                 </ul>
-                {/* <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
+                {/* <div className="ps__rail-x" style="left: 0px; bottom: 0px;">
                   <div
-                    class="ps__thumb-x"
+                    className="ps__thumb-x"
                     tabindex="0"
                     style="left: 0px; width: 0px;"
                   ></div>
                 </div>
-                <div class="ps__rail-y" style="top: 0px; right: 0px;">
+                <div className="ps__rail-y" style="top: 0px; right: 0px;">
                   <div
-                    class="ps__thumb-y"
+                    className="ps__thumb-y"
                     tabindex="0"
                     style="top: 0px; height: 0px;"
                   ></div>
                 </div> */}
               </li>
-              <li class="border-top">
-                <div class="d-grid p-4">
-                  <a
-                    class="btn btn-primary btn-sm d-flex"
-                    href="javascript:void(0);"
-                  >
-                    <small class="align-middle">View all notifications</small>
+              <li className="border-top">
+                <div className="d-grid p-4">
+                  <a className="btn btn-primary btn-sm d-flex" href="#;">
+                    <small className="align-middle">
+                      View all notifications
+                    </small>
                   </a>
                 </div>
               </li>