diff --git a/src/component/layout/layoutcom/UserHeader.jsx b/src/component/layout/layoutcom/UserHeader.jsx
index bae38f8..42a625f 100644
--- a/src/component/layout/layoutcom/UserHeader.jsx
+++ b/src/component/layout/layoutcom/UserHeader.jsx
@@ -3,18 +3,27 @@ import getImage from "../../../utils/getImage";
 
 
 export default function UserHeader(){
+
+    const toggleSidebar = (e) => {
+        e.preventDefault()
+    }
+
+    // const toggleSidebarMini = (e) => {
+    //     e.preventDefault()
+    // }
+
     return (
         <header className="app-header top-bar">
             <nav className="navbar navbar-expand-md">
                 <div className="navbar-header d-flex align-items-center">
-                    <a href="#" className="mobile-toggle"><i className="ti ti-align-right"></i></a>
+                    <a href="#" onClick={toggleSidebar} className="mobile-toggle"><i className="ti ti-align-right"></i></a>
                     <a className="navbar-brand" href="/dash">
                         <img src={getImage('logo-light.png')} className="img-fluid logo-desktop" alt="logo"/>
                         <img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
                     </a>
                 </div>
-                <button className="navbar-toggler" type="button" data-toggle="collapse"
-                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                         aria-label="Toggle navigation">
                     <i className="ti ti-align-left"></i>
                 </button>
diff --git a/src/css/partials/_header.scss b/src/css/partials/_header.scss
index dc4b04a..4817592 100644
--- a/src/css/partials/_header.scss
+++ b/src/css/partials/_header.scss
@@ -324,19 +324,19 @@
 
             @include mobile-landscape {
                margin:0 !important;
-               justify-content: space-between;
+               justify-content: end;
                padding:0 30px;
                width: 100%;;
             }
             @include mobile-portrait-sm {
                 margin:0 !important;
-                justify-content: space-between;
+                justify-content: end;
                 padding:0 30px;
                 width: 100%;;
             }
             @include mobile-portrait-xs {
                 margin:0 !important;
-                justify-content: space-between;
+                justify-content: end;
                 padding:0 30px;
                 width: 100%;;
             }