diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx
index d1f2034..aeda597 100644
--- a/src/component/auth/Login2.jsx
+++ b/src/component/auth/Login2.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 // import LoginImg from '../../assets/bg/login.svg'
 
@@ -14,6 +14,9 @@ import IOSDownload from '../../assets/img/download/apple.jpg'
 
 export default function Login() {
 
+  const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+  let loggedIn = token && room ? true : false; // variable to determine if user is logged in
+
   const dispatch = useDispatch()
 
   const navigate = useNavigate()
@@ -67,6 +70,12 @@ export default function Login() {
     }
   }
 
+  useEffect(()=>{ // NAVIGATES USER TO HOME PAGE IF USER IS ACTIVE
+    if(loggedIn){
+        navigate(siteLinks.dash)
+    }
+  },[])
+
   return (
     <div className="app">
         <div className="app-wrap">
diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx
index 8d81040..f8a6c35 100644
--- a/src/component/home/TopBar.jsx
+++ b/src/component/home/TopBar.jsx
@@ -1,20 +1,37 @@
-import React from 'react'
-import { useQuery } from '@tanstack/react-query'
+import React, {useEffect} from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
-import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.topBar,
-        queryFn: () => topBar()
-    })
+  const topBarData = useMutation({
+    mutationFn: (reqData) => {
+        return topBar(reqData)
+    },
+    onError: (error) => {
+        console.log(error)
+        location.reload();
+    },
+      onSuccess: (res) => {
+        if(res?.data?.resultCode != '0'){
+            throw({message: 'Something went wrong'})
+        }
+    }
+  })
 
-    const topData = data?.data?.bar_data?.top_bar
+    useEffect(()=>{
+      let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+      }
+      topBarData.mutate(reqData)
+    },[])
+    
+    const data = topBarData?.data?.data?.top_bar // top bar data
 
   return (
     <>
-        {isFetching ? 
+        {topBarData.isPending ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -22,15 +39,15 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : isError ?
+        : topBarData.error ?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{error.message}</p>
+                <p className='text-danger'>{topBarData.error.message}</p>
             </div>
         </div>
         :
         <>
-        {topData && topData?.map((item, index)=>{
+        {data && data?.map((item, index)=>{
             let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
             return (
             <div key={item.id + index} className="col-sm-6 col-xxl-3">
diff --git a/src/component/home/_TopBar.jsx b/src/component/home/_TopBar.jsx
new file mode 100644
index 0000000..223288d
--- /dev/null
+++ b/src/component/home/_TopBar.jsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { topBar } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
+
+export default function TopBar() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topBar,
+        queryFn: () => topBar()
+    })
+
+    const topData = data?.data?.bar_data?.top_bar
+    console.log('topData', topData)
+
+  return (
+    <>
+        {isFetching ? 
+        <>
+            <div className="col-12">
+                <div className="card p-4">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </div>
+        </>
+        : isError ?
+        <div className="col-12">
+            <div className="card p-4">
+                <p className='text-danger'>{error.message}</p>
+            </div>
+        </div>
+        :
+        <>
+        {topData && topData?.map((item, index)=>{
+            let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
+            return (
+            <div key={item.id + index} className="col-sm-6 col-xxl-3">
+                <div className="card card-statistics ecommerce-contant overflow-h">
+                    <div className="card-body p-0">
+                        <div className="d-flex m-b-0 ecommerce-contant-text h-100">
+                            <div className="w-100">
+                                <div className="row p-3">
+                                    <div className="col">
+                                        <h3 className="mb-0">{item?.value || 0}</h3>
+                                        <small className="d-block">{item?.data_span}</small>
+                                    </div>
+                                    <div className="col text-right">
+                                        <h5 className="text-muted mb-0">{item?.description}</h5>
+                                        <strong className={`${textColor} m-t-5`}><i
+                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
+                                    </div>
+                                </div>
+                                <div className="apexchart-wrapper">
+                                    <div id="ecommercedemo3" className="chart-fit"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            )
+        })}
+        </>
+        }
+    </>
+  )
+}
diff --git a/src/services/services.js b/src/services/services.js
index cc1d37b..7d8c4ec 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -65,9 +65,7 @@ export const userInfo = (reqData) => {
     }
     return postAuxEnd('/panel/Account', postData, false)
 }
-// export const getUserDetails = (reqData) => {
-//     return getAuxEnd(`/panel/Account`, reqData)
-// }
+
 
 
 
@@ -114,10 +112,11 @@ export const recoverPWD = (reqData) => {
 }
 
 // FUNCTION TO GET DASHBOARD TOP BAR SECTION
-export const topBar = () => {
+export const topBar = (reqData) => {
     let postData = {
-        "token":"there-will-be-token",
-        "uid": "there-will-be-uid"
+        ...reqData,
+        // "token":"there-will-be-token",
+        // "uid": "there-will-be-uid"
     }
     return postAuxEnd(`/panel/account-bar`, postData, false)
 }