diff --git a/src/component/layout/layoutcom/UserMenu.jsx b/src/component/layout/layoutcom/UserMenu.jsx
index 688c42a..5d649ef 100644
--- a/src/component/layout/layoutcom/UserMenu.jsx
+++ b/src/component/layout/layoutcom/UserMenu.jsx
@@ -10,12 +10,12 @@ export default function UserMenu() {
                 <ul className="metismenu " id="sidebarNav">
                     <li className="nav-static-title">Panel</li>
                     <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
-                        <Link className="has-arrow" to='#' aria-expanded="false">
+                        <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                             <i className="nav-icon ti ti-rocket"></i>
                             <span className="nav-title">Dashboard</span>
                             {/* <span className="nav-label label label-danger">9</span> */}
                         </Link>
-                        <ul aria-expanded="false">
+                        <ul id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
                             <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
                             <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Calendar</Link></li>
                             <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Contacts</Link></li>
@@ -23,11 +23,16 @@ export default function UserMenu() {
 
                         </ul>
                     </li>
-                    <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link href="/dash" aria-expanded="false"><i className="nav-icon ti ti-comment"></i><span
-                        className="nav-title">Reports</span></Link></li>
-                    <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link className="has-arrow" to='#' aria-expanded="false"><i
-                        className="nav-icon ti ti-calendar"></i><span className="nav-title">Account</span></Link>
-                        <ul aria-expanded="false">
+                    <li className={`${pathname == siteLinks.error ? 'active' : ''}`}>
+                        <Link href="/dash" aria-expanded="false"><i className="nav-icon ti ti-comment">
+                            </i><span className="nav-title">Reports</span>
+                        </Link>
+                    </li>
+                    <li className={`${pathname == siteLinks.error ? 'active' : ''}`}>
+                        <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                            <i className="nav-icon ti ti-calendar"></i><span className="nav-title">Account</span>
+                        </Link>
+                        <ul id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
                             <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to={siteLinks.dash}>Users</Link></li>
                             <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to={siteLinks.dash}>Settings</Link></li>
                         </ul>
diff --git a/src/index.js b/src/index.js
index e405b18..6336a95 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 //import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.css';
-// import 'bootstrap/dist/js/bootstrap.min.js'
+import 'bootstrap/dist/js/bootstrap.min.js'
 // import './custom.scss';
 import  './css/style.scss';