diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index f6fe7e9..62804a8 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import RecentActions from "./RecentActions";
 import Products from "./Products";
+import TopBar from "./TopBar";
 // import { useQuery } from "@tanstack/react-query";
 // import { accountDashboard } from "../../services/services";
 // import queryKeys from "../../services/queryKeys";
@@ -63,104 +64,7 @@ export default function HomeSections(){
         </div> */}
         <BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} />
         <div className="row">
-            <div 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">0</h3>
-                                        <small className="d-block">Last 2 months</small>
-                                    </div>
-                                    <div className="col text-right">
-                                        <h5 className="text-muted mb-0">Contacts</h5>
-                                        <strong className="text-danger 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>
-            <div 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 ecommerce-contant-text m-b-0 h-100">
-                            <div className="w-100">
-                                <div className="row p-3">
-                                    <div className="col">
-                                        <h3 className="mb-0">0</h3>
-                                        <small className="d-block">Past 12 hours</small>
-                                    </div>
-                                    <div className="col text-right">
-                                        <h5 className="text-muted mb-0">Site Traffic</h5>
-                                        <strong className="text-primary m-t-5"><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 0.00%</strong>
-                                    </div>
-                                </div>
-                                <div className="apexchart-wrapper">
-                                    <div id="ecommercedemo1" className="chart-fit"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div 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="w-100">
-                                    <div className="row p-3">
-                                        <div className="col">
-                                            <h3 className="mb-0">0</h3>
-                                            <small className="d-block">Last 14 days</small>
-                                        </div>
-                                        <div className="col text-right">
-                                            <h5 className="text-muted mb-0">Appointments</h5>
-                                            <strong className="text-orange m-t-5"><i
-                                                className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 0.00%</strong>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="apexchart-wrapper">
-                                    <div id="ecommercedemo2" className="chart-fit"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div 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">5,687</h3>
-                                        <small className="d-block">Last 3 months</small>
-                                    </div>
-                                    <div className="col text-right">
-                                        <h5 className="text-muted mb-0">Purchases</h5>
-                                        <strong className="text-success m-t-5"><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 9.89%</strong>
-                                    </div>
-                                </div>
-                                <div className="apexchart-wrapper">
-                                    <div id="ecommercedemo4" className="chart-fit"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <TopBar />
         </div>
         <div className="row">
             <div className="col-xxl-6 m-b-30">
diff --git a/src/component/home/RecentActions.jsx b/src/component/home/RecentActions.jsx
index f2a1128..ffd4836 100644
--- a/src/component/home/RecentActions.jsx
+++ b/src/component/home/RecentActions.jsx
@@ -43,7 +43,7 @@ export default function RecentActions() {
                     <div className="d-xxs-flex align-items-center">
                         <div className="total-sales">
                             <p>Last Update</p>
-                            <h1>{dataAction?.data?.action_data?.last_update}</h1>
+                            <h3>{dataAction?.data?.action_data?.last_update}</h3>
                         </div>
                         <div className="mb-3 mb-sm-0 ml-auto">
                             {/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx
new file mode 100644
index 0000000..8febf4c
--- /dev/null
+++ b/src/component/home/TopBar.jsx
@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import { recentActions } 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 actionData = dataAction?.data?.action_data
+
+  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>
+        :
+        <>
+        {actionData && actionData?.top_bar?.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>
+            )
+        })}
+        </>
+        }
+    </>
+  )
+}