diff --git a/package.json b/package.json
index d8837dc..faf5625 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/component/auth/Forgetpwd2.jsx b/src/component/auth/Forgetpwd2.jsx
index ecbef92..1393e99 100644
--- a/src/component/auth/Forgetpwd2.jsx
+++ b/src/component/auth/Forgetpwd2.jsx
@@ -36,7 +36,7 @@ export default function Forgetpwd2() {
                                         <div className="login p-50">
                                             <h1 className="mb-2">Recover Password</h1>
                                             <p>Please enter your email.</p>
-                                            <form action="auth-login.html" className="mt-3 mt-sm-5">
+                                            <form className="mt-3 mt-sm-5">
                                                 <div className="row">
                                                     <div className="col-12">
                                                         <div className="form-group">
@@ -45,7 +45,7 @@ export default function Forgetpwd2() {
                                                         </div>
                                                     </div>
                                                     <div className="col-12 mt-3">
-                                                        <button onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button>
+                                                        <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button>
                                                     </div>
                                                     <div className="col-12  mt-3">
                                                         <p>Go <Link to={siteLinks.home}> Back</Link></p>
diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx
index 19fdc61..32cf313 100644
--- a/src/component/auth/Login2.jsx
+++ b/src/component/auth/Login2.jsx
@@ -36,7 +36,7 @@ export default function Login() {
                                         <div className="login p-50">
                                             <h1 className="mb-2">MERMS Panel</h1>
                                             <p>Welcome back, please login to your account.</p>
-                                            <form action="auth-login.html" className="mt-3 mt-sm-5">
+                                            <form className="mt-3 mt-sm-5">
                                                 <div className="row">
                                                     <div className="col-12">
                                                         <div className="form-group">
@@ -62,7 +62,7 @@ export default function Login() {
                                                         </div>
                                                     </div>
                                                     <div className="col-12 mt-3">
-                                                        <button onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
+                                                        <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
                                                     </div>
                                                     <div className="col-12  mt-3">
                                                         <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
diff --git a/src/component/auth/Signup2.jsx b/src/component/auth/Signup2.jsx
index 6493cb3..f79415f 100644
--- a/src/component/auth/Signup2.jsx
+++ b/src/component/auth/Signup2.jsx
@@ -36,7 +36,7 @@ export default function Signup2() {
                                     <div class="register p-5">
                                         <h1 class="mb-2">MERMS Panel</h1>
                                         <p>Welcome, Please create your account.</p>
-                                        <form action="auth-register.html" class="mt-2 mt-sm-5">
+                                        <form class="mt-2 mt-sm-5">
                                             <div class="row">
                                                 <div class="col-12 col-sm-6">
                                                     <div class="form-group">
@@ -77,7 +77,7 @@ export default function Signup2() {
                                                     </div>
                                                 </div>
                                                 <div class="col-12 mt-3">
-                                                    <button onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
+                                                    <button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
                                                 </div>
                                                 <div class="col-12  mt-3">
                                                     <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx
index 5f99bef..b755fbd 100644
--- a/src/component/authorization/UserExist.jsx
+++ b/src/component/authorization/UserExist.jsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { Outlet } from 'react-router-dom'
 import BSMainLoader from '../loaders/BSMainLoader'
+import Layout from '../layout/Layout'
+
 
 export default function UserExist() {
 
@@ -19,7 +21,9 @@ export default function UserExist() {
     {loading ? 
         <BSMainLoader />
         :
-        <Outlet />
+        <Layout>
+          <Outlet />
+        </Layout>
     }
     </>
   )
diff --git a/src/component/home/Home.jsx b/src/component/home/Home.jsx
index f86ece7..b96313a 100644
--- a/src/component/home/Home.jsx
+++ b/src/component/home/Home.jsx
@@ -7,22 +7,8 @@ import LoaderImage from "../../parts/LoaderImage";
 
 export default function Home() {
   return (
-      <div className="app">
-        <div className="app-wrap">
-         {/*<LoaderImage />*/}
-          <UserHeader />
-          <div className="app-container">
-            <aside className="app-navbar">
-              <UserMenu />
-            </aside>
-            <div className="app-main" id="main">
-              <div className="container-fluid">
-                <HomeSections />
-              </div>
-            </div>
-          </div>
-          <UserFooter />
-        </div>
-      </div>
+    <>
+      <HomeSections />
+    </>
   )
 }
diff --git a/src/component/layout/Layout.jsx b/src/component/layout/Layout.jsx
new file mode 100644
index 0000000..6795f2d
--- /dev/null
+++ b/src/component/layout/Layout.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import UserMenu from "../../parts/UserMenu";
+import UserHeader from "../../parts/UserHeader";
+import UserFooter from "../../parts/UserFooter";
+import { Outlet } from 'react-router-dom';
+
+
+export default function Layout() {
+  return (
+      <div className="app">
+        <div className="app-wrap">
+          <UserHeader />
+          <div className="app-container">
+            <aside className="app-navbar">
+              <UserMenu />
+            </aside>
+            <div className="app-main" id="main">
+              <div className="container-fluid">
+                <Outlet />
+              </div>
+            </div>
+          </div>
+          <UserFooter />
+        </div>
+      </div>
+  )
+}
diff --git a/src/index.js b/src/index.js
index 98aecf8..e405b18 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +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 './custom.scss';
 import  './css/style.scss';
 
diff --git a/src/parts/UserHeader.jsx b/src/parts/UserHeader.jsx
index fd9d524..c2def03 100644
--- a/src/parts/UserHeader.jsx
+++ b/src/parts/UserHeader.jsx
@@ -254,7 +254,7 @@ export default function UserHeader(){
                             {/*    </div>*/}
                             {/*</li>*/}
                             <li className="nav-item dropdown user-profile">
-                                <a href="javascript:void(0)" className="nav-link dropdown-toggle " id="navbarDropdown4"
+                                <a href="#" className="nav-link dropdown-toggle " id="navbarDropdown4"
                                    role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <img src="assets/img/avtar/02.jpg" alt="avtar-img" />
                                     <span className="bg-success user-status"></span>
@@ -272,16 +272,16 @@ export default function UserHeader(){
                                         </div>
                                     </div>
                                     <div className="p-4">
-                                        <a className="dropdown-item d-flex nav-link" href="javascript:void(0)">
+                                        <a className="dropdown-item d-flex nav-link" href="#">
                                             <i className="fa fa-user pr-2 text-success"></i> Profile</a>
-                                        <a className="dropdown-item d-flex nav-link" href="javascript:void(0)">
+                                        <a className="dropdown-item d-flex nav-link" href="#">
                                             <i className="fa fa-envelope pr-2 text-primary"></i> Inbox
                                             <span className="badge badge-primary ml-auto">6</span>
                                         </a>
-                                        <a className="dropdown-item d-flex nav-link" href="javascript:void(0)">
+                                        <a className="dropdown-item d-flex nav-link" href="#">
                                             <i className=" ti ti-settings pr-2 text-info"></i> Settings
                                         </a>
-                                        <a className="dropdown-item d-flex nav-link" href="javascript:void(0)">
+                                        <a className="dropdown-item d-flex nav-link" href="#">
                                             <i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
                                         <div className="row mt-2">
                                             <div className="col">
diff --git a/src/parts/UserMenu.jsx b/src/parts/UserMenu.jsx
index 7142ef1..5ec0fa2 100644
--- a/src/parts/UserMenu.jsx
+++ b/src/parts/UserMenu.jsx
@@ -1,39 +1,42 @@
 import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import siteLinks from '../links/siteLinks'
 export default function UserMenu() {
 
+    const {pathname} = useLocation()
     return (
         <>
             <div className="sidebar-nav scrollbar scroll_dark">
                 <ul className="metismenu " id="sidebarNav">
                     <li className="nav-static-title">Panel</li>
-                    <li className="active">
-                        <a className="has-arrow" href="javascript:void(0)" aria-expanded="false">
+                    <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
+                        <Link className="has-arrow" to='#' aria-expanded="false">
                             <i className="nav-icon ti ti-rocket"></i>
                             <span className="nav-title">Dashboard</span>
-                            {/*<span className="nav-label label label-danger">9</span>*/}
-                        </a>
+                            {/* <span className="nav-label label label-danger">9</span> */}
+                        </Link>
                         <ul aria-expanded="false">
-                            <li><a href='/dash'>Home</a></li>
-                            <li className="active"><a href='#'>Calendar</a></li>
-                            <li><a href='#'>Contacts</a></li>
-                            <li><a href='#'>Comments</a></li>
+                            <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>
+                            <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Comments</Link></li>
 
                         </ul>
                     </li>
-                    <li><a href="/dash" aria-expanded="false"><i className="nav-icon ti ti-comment"></i><span
-                        className="nav-title">Reports</span></a></li>
-                    <li><a className="has-arrow" href="javascript:void(0)" aria-expanded="false"><i
-                        className="nav-icon ti ti-calendar"></i><span className="nav-title">Account</span></a>
+                    <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><a href='/dash'>Users</a></li>
-                            <li><a href='/dash'>Settings</a></li>
+                            <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>
                     </li>
 
 
                     <li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
                         <h5 className="text-white mb-1">MERMS Panel</h5>
-                        <a className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" href="/"> Log Out</a>
+                        <Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to={siteLinks.login}> Log Out</Link>
                     </li>
                 </ul>
             </div>