diff --git a/.env b/.env
index dbedc28..ee792fb 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
-REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 
 # Inactivity timeout/logout AT 10MINS
diff --git a/.env.development b/.env.development
index 60fab15..12643e6 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
-REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com/"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 
 # Inactivity timeout/logout AT 10MINS
diff --git a/package.json b/package.json
index fd40f6b..c2a9685 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,12 @@
   "private": true,
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-query": "^5.62.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "apexcharts": "^4.1.0",
+    "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
diff --git a/src/App.js b/src/App.js
index aa5ba72..ee9a893 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,47 +1,27 @@
-import { Routes, Route } from 'react-router-dom';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import AppRouters from './AppRouters';
+import axios from 'axios';
 // import './App.css';
 
-import UserExist from './component/authorization/UserExist';
-import AuthLayout from './component/auth/AuthLayout';
-import siteLinks from './links/siteLinks';
 
-import LoginPage from './views/LoginPage';
-import SignupPage from './views/SignupPage';
-import ForgetpwdPage from './views/ForgetpwdPage';
-import HomePage from './views/HomePage';
-import ReportsPage from './views/ReportsPage'
-import CommentsPage from './views/CommentsPage'
-import ContactsPage from './views/ContactsPage'
-import UserPage from './views/UserPage'
-import CalendarPage from './views/CalendarPage'
-import SettingsPage from './views/SettingsPage'
+// axios.interceptors.request.use(
+//   config => {
+//     config.headers['Authorization'] = `Bearer localStorage.getItem('access_token')`;
+//     config.baseURL = 'https://devapi.mermsemr.com'
+//         return config;
+//     },
+//     error => {
+//         return Promise.reject(error);
+//     }
+// );
 
 
 function App() {
+  const queryClient = new QueryClient()
   return (
-    <div className="">
-      <Routes>
-        {/* auth routes wrapper */}
-        <Route element={<AuthLayout />}>
-          <Route path={siteLinks.home} element={<LoginPage />} />
-          <Route path={siteLinks.login} element={<LoginPage />} />
-          <Route path={siteLinks.signup} element={<SignupPage />} />
-          <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
-          <Route path={siteLinks.error} element={<ForgetpwdPage />} />
-        </Route>
-
-        {/* protected routes */}
-        <Route element={<UserExist />}> 
-          <Route path={siteLinks.dash} element={<HomePage />} />
-          <Route path={siteLinks.reports} element={<ReportsPage />} />
-          <Route path={siteLinks.comments} element={<CommentsPage />} />
-          <Route path={siteLinks.contacts} element={<ContactsPage />} />
-          <Route path={siteLinks.user} element={<UserPage />} />
-          <Route path={siteLinks.calendar} element={<CalendarPage />} />
-          <Route path={siteLinks.settings} element={<SettingsPage />} />
-        </Route>
-      </Routes>
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <AppRouters />
+    </QueryClientProvider>
   );
 }
 
diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx
new file mode 100644
index 0000000..26f1a00
--- /dev/null
+++ b/src/AppRouters.jsx
@@ -0,0 +1,47 @@
+import { Routes, Route } from 'react-router-dom';
+
+import UserExist from './component/authorization/UserExist';
+import AuthLayout from './component/auth/AuthLayout';
+import siteLinks from './links/siteLinks';
+
+import LoginPage from './views/LoginPage';
+import SignupPage from './views/SignupPage';
+import ForgetpwdPage from './views/ForgetpwdPage';
+import HomePage from './views/HomePage';
+import ReportsPage from './views/ReportsPage'
+import CommentsPage from './views/CommentsPage'
+import ContactsPage from './views/ContactsPage'
+import UserPage from './views/UserPage'
+import CalendarPage from './views/CalendarPage'
+import SettingsPage from './views/SettingsPage'
+
+
+function AppRouters() {
+  return (
+    <div className="">
+      <Routes>
+        {/* auth routes wrapper */}
+        <Route element={<AuthLayout />}>
+          <Route path={siteLinks.home} element={<LoginPage />} />
+          <Route path={siteLinks.login} element={<LoginPage />} />
+          <Route path={siteLinks.signup} element={<SignupPage />} />
+          <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
+          <Route path={siteLinks.error} element={<ForgetpwdPage />} />
+        </Route>
+
+        {/* protected routes */}
+        <Route element={<UserExist />}> 
+          <Route path={siteLinks.dash} element={<HomePage />} />
+          <Route path={siteLinks.reports} element={<ReportsPage />} />
+          <Route path={siteLinks.comments} element={<CommentsPage />} />
+          <Route path={siteLinks.contacts} element={<ContactsPage />} />
+          <Route path={siteLinks.user} element={<UserPage />} />
+          <Route path={siteLinks.calendar} element={<CalendarPage />} />
+          <Route path={siteLinks.settings} element={<SettingsPage />} />
+        </Route>
+      </Routes>
+    </div>
+  );
+}
+
+export default AppRouters;
diff --git a/src/assets/img/_logo-light.png b/src/assets/img/_logo-light.png
new file mode 100644
index 0000000..7881c26
Binary files /dev/null and b/src/assets/img/_logo-light.png differ
diff --git a/src/assets/img/logo-light.png b/src/assets/img/logo-light.png
index 7881c26..52d8f3b 100644
Binary files a/src/assets/img/logo-light.png and b/src/assets/img/logo-light.png differ
diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx
index 182f87b..698421f 100644
--- a/src/component/auth/Login2.jsx
+++ b/src/component/auth/Login2.jsx
@@ -1,13 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
 import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
+import { loginUser } from '../../services/services'
 
 export default function Login() {
 
   const navigate = useNavigate()
 
+  const [fields, setFields] = useState({
+    username: '',
+    password: ''
+  })
+
+  const handleChange = ({target:{name, value}}) => {
+    console.log('working')
+    setFields(prev => ({...prev, [name]:value}))
+  }
+
+  const login = useMutation({
+    mutationFn: (fields) => {
+      return loginUser('panel/auth/login', fields)
+    },
+    onError: (error) => {
+        console.log('error', error)
+        navigate('/dash') // remove later
+      },
+  })
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -25,13 +48,13 @@ export default function Login() {
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">User Name*</label>
-                                                        <input type="text" className="form-control" placeholder="Username" />
+                                                        <input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">Password*</label>
-                                                        <input type="password" className="form-control" placeholder="Password" />
+                                                        <input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
@@ -46,7 +69,7 @@ export default function Login() {
                                                     </div>
                                                 </div>
                                                 <div className="col-12 mt-3">
-                                                    <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
+                                                    <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : '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/layout/layoutcom/UserHeader.jsx b/src/component/layout/layoutcom/UserHeader.jsx
index fdcf610..cfe54bf 100644
--- a/src/component/layout/layoutcom/UserHeader.jsx
+++ b/src/component/layout/layoutcom/UserHeader.jsx
@@ -9,6 +9,11 @@ export default function UserHeader(){
         document.body.classList.toggle('sidebar-toggled')
     }
 
+    const removeSidebar = (e) => {
+        e.preventDefault()
+        document.body.classList.remove('sidebar-toggled')
+    }
+
     // const toggleSidebarMini = (e) => {
     //     e.preventDefault()
     // }
@@ -23,7 +28,7 @@ export default function UserHeader(){
                         <img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
                     </a>
                 </div>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                <button onClick={removeSidebar} 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>
diff --git a/src/services/services.js b/src/services/services.js
new file mode 100644
index 0000000..e47c9d0
--- /dev/null
+++ b/src/services/services.js
@@ -0,0 +1,29 @@
+import axios from "axios"
+
+
+axios.interceptors.request.use(
+    config => {
+        // config.headers = {
+        //     Accept: "application/json",
+        //     "Access-Control-Allow-Origin": "*",
+        //     "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
+        //     "Access-Control-Allow-Headers":
+        //         "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+        //     "Content-Type": "application/json;charset=UTF-8",
+        //     'Authorization': '22222'
+        //   };
+    config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
+    config.baseURL = process.env.REACT_APP_MAIN_API
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+export const loginUser = (path, reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return axios.post(path, postData)
+}
\ No newline at end of file