diff --git a/src/App.js b/src/App.js
index 1a5ece6..5f0b727 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,9 +8,10 @@ function App() {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        // staleTime: Infinity,
         refetchOnWindowFocus: false,
         retry: 3,
+        // refetchOnMount: false,
+        staleTime: 3000
       },
     },
   })
diff --git a/src/component/home/RecentActions.jsx b/src/component/home/RecentActions.jsx
index d128990..5ec76a2 100644
--- a/src/component/home/RecentActions.jsx
+++ b/src/component/home/RecentActions.jsx
@@ -14,7 +14,7 @@ export default function RecentActions() {
 
   return (
     <>
-        <div className="card card-statistics h-100 mb-0 panel_round_c2">
+        <div className="card card-statistics h-100 mb-0 panel_round_c2" style={{minHeight: '460px'}}>
             <div className="card-header">
                 <div className="card-heading">
                     <h4 className="card-title">Recent Actions</h4>
diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx
index 8febf4c..f2f1fd9 100644
--- a/src/component/home/TopBar.jsx
+++ b/src/component/home/TopBar.jsx
@@ -1,16 +1,17 @@
 import { useQuery } from '@tanstack/react-query'
 import React from 'react'
-import { recentActions } from '../../services/services'
+import { topBar } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-    const {data:dataAction, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.recentAction,
-        queryFn: () => recentActions()
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topBar,
+        queryFn: () => topBar()
     })
 
-    const actionData = dataAction?.data?.action_data
+    const topData = data?.data?.bar_data?.top_bar
+    console.log('TOP', topData)
 
   return (
     <>
@@ -30,7 +31,7 @@ export default function TopBar() {
         </div>
         :
         <>
-        {actionData && actionData?.top_bar?.map((item, index)=>{
+        {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">
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index f263e8a..3a25f02 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -1,5 +1,6 @@
 const queryKeys = {
     dashboard: ['dashboard'],
+    topBar: ['top-bar'],
     recentAction: ['recent-action'],
     product: ['product-data'],
     product_url: ['product_url']
diff --git a/src/services/services.js b/src/services/services.js
index 76cc837..700be83 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -72,6 +72,11 @@ export const accountDashboard = () => {
     return getAuxEnd(`/panel/account/dash`)
 }
 
+// FUNCTION TO GET DASHBOARD TOP BAR SECTION
+export const topBar = () => {
+    return getAuxEnd(`/panel/account/bar`)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = () => {
     return getAuxEnd(`/panel/account/actions`)