diff --git a/src/component/contacts/Contacts.js b/src/component/contacts/Contacts.js
index d896698..b920d46 100644
--- a/src/component/contacts/Contacts.js
+++ b/src/component/contacts/Contacts.js
@@ -47,7 +47,7 @@ export default function Contacts() {
     if (id == "0") {
       filteredConData = contactsData;
     } else {
-      filteredConData = contactsData.filter((item) => item.category == `A00000${id}`);
+      filteredConData = contactsData.filter((item) => item.category == id);
     }
     setFiltererdContactData(filteredConData);
     changeActiveUID(filteredConData[0]?.uid);
@@ -87,7 +87,7 @@ export default function Contacts() {
           <div className="col-12">
             <div
               className="card card-statistics mail-contant"
-              style={{ minHeight: "550px", borderRadius: "10px" }}
+              style={{ minHeight: "200px", borderRadius: "10px" }}
             >
               <div className="card-body p-0">
                 <div className="row no-gutters">
@@ -197,20 +197,20 @@ export default function Contacts() {
                       </div>
                     </div>
                   </div>
-                  <div className="col-md-8  col-xxl-4 border-md-t">
-                    <div className="mail-content  border-right border-n h-100">
-                      <div className="mail-search border-bottom">
+                  <div className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
+                    <div className="mail-content  border-right border-n h-100" style={{placeContent: 'center'}}>
+                      {/* <div className="mail-search border-bottom">
                         <div className="row align-items-center mx-0">
                           <div className="col-12">
-                            {/*<div className="form-group pt-3">*/}
-                            {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
-                            {/*        <i className="fa fa-search"></i>*/}
-                            {/*</div>*/}
+                            <div className="form-group pt-3">
+                               <input type="text" className="form-control" id="search" placeholder="Search.." />
+                                   <i className="fa fa-search"></i>
+                            </div>
                           </div>
                         </div>
-                      </div>
+                      </div> */}
                       <div className="mail-msg scrollbar scroll_dark">
-                        {contactsData &&
+                        { filteredContactData.length ?
                           filteredContactData?.map((contact, index) => {
                             const isActive =
                               contact?.uid == activeContactUID ||
@@ -282,16 +282,20 @@ export default function Contacts() {
                                 </a>
                               </div>
                             );
-                          })}
+                          })
+                          :
+                          <p className="text-center">Messages will appear here as soon as they are available for selection</p>
+                        }
                       </div>
                     </div>
                   </div>
+                  {filteredContactData.length > 0 &&
                   <div className="col-xxl-6 border-t border-xxl-t">
                     <div className="mail-chat py-5 px-5">
                       <div className="media align-items-center">
                         <div className="bg-img mr-3">
                           <img
-                            src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : contactsData ? getImage("avtar/" + contactsData[0]?.category + ".png") : getImage("avtar/01.jpg")}
+                            src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
                             className="img-fluid"
                             alt="user"
                           />
@@ -333,6 +337,7 @@ export default function Contacts() {
                       </div>
                     </div>
                   </div>
+                  }
                 </div>
               </div>
             </div>
diff --git a/src/component/home/DashPayments.jsx b/src/component/home/DashPayments.jsx
new file mode 100644
index 0000000..fd29a52
--- /dev/null
+++ b/src/component/home/DashPayments.jsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import { getDashPayments } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+import getImage from '../../utils/getImage'
+
+export default function DashPayments() {
+
+    
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.dash_payments,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getDashPayments(reqData)
+        }
+    })
+
+    const payments = data?.data
+    // console.log('data', payments)
+
+  return (
+    <>
+        <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
+            <div className="card card-statistics h-100 mb-0 panel_round_c3">
+                <div className="card-header d-flex justify-content-between">
+                    <div className="card-heading">
+                        <h4 className="card-title">Payments</h4>
+                    </div>
+                </div>
+                <div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
+                    <div className="datatable-wrapper table-responsive">
+                    {isFetching ? 
+                        <>
+                            <div className="col-12">
+                                <div className="p-4">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </div>
+                        </>
+                        : isError ?
+                        <div className="col-12">
+                            <div className="p-4">
+                                <p className='text-danger'>{error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <table id="datatable" className="table table-borderless table-striped">
+                            <thead>
+                            <tr>
+                                {/* <th style={{width: '30px'}}>#</th> */}
+                                <th>Date</th>
+
+                                <th  style={{width: '130px'}}>Subscription</th>
+                                <th  style={{width: '80px'}}>Amount</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                {payments.length > 0 ? 
+                                payments.map((item, index) => {
+                                    return (
+                                        <tr key={index}>
+                                            <td>{Number(item?.id).toString().padStart(6,'0')}</td>
+                                            <td>
+                                                <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
+                                            </td>
+
+                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></td>
+                                            <td>
+                                                <a className="mr-3" href={productUrl}>
+                                                    <img src={getImage('arrow-next.png')} alt='next' />
+                                                </a>
+                                            </td>
+                                        </tr>
+                                    )
+                                })
+                                :
+                                    <td colSpan={3} className='text-center'>No record found</td>
+                                }
+                            </tbody>
+                        </table>
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}
diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index d7727e6..e65dc45 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -5,6 +5,7 @@ import Products from "./Products";
 import TopBar from "./TopBar";
 import ProductsURL from "./ProductsURL";
 import { SocketContextValues } from "../context/SocketIOContext";
+import DashPayments from "./DashPayments";
 
 export default function HomeSections(){
 
@@ -52,41 +53,7 @@ export default function HomeSections(){
         <div className="row">
             <ProductsURL />
 
-            <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
-                <div className="card card-statistics h-100 mb-0 panel_round_c3">
-                    <div className="card-header d-flex justify-content-between">
-                        <div className="card-heading">
-                            <h4 className="card-title">Payments</h4>
-                        </div>
-                        {/*<div className="dropdown">*/}
-                        {/*    <a className="p-2" href="#!" data-toggle="dropdown" aria-haspopup="true"*/}
-                        {/*       aria-expanded="false">*/}
-                        {/*        <i className="fe fe-circle"></i>*/}
-                        {/*    </a>*/}
-                        {/*    <div className="dropdown-menu custom-dropdown dropdown-menu-right p-4">*/}
-                        {/*        <h6 className="mb-1">Action</h6>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-o pr-2"></i>View*/}
-                        {/*            reports</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-edit pr-2"></i>Edit reports</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-bar-chart-o pr-2"></i>Statistics</a>*/}
-                        {/*        <h6 className="mb-1 mt-3">Export</h6>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-pdf-o pr-2"></i>Export*/}
-                        {/*            to PDF</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-excel-o pr-2"></i>Export*/}
-                        {/*            to CSV</a>*/}
-                        {/*    </div>*/}
-                        {/*</div>*/}
-                    </div>
-                    <div className="card-body">
-                        {/*<h5>We only started collecting data from February 2019 </h5>*/}
-                        {/*<p>Questions about the Net Earnings number? <a*/}
-                        {/*    className="btn btn-square btn-inverse-success btn-xs ml-1" href="#">Click here</a></p>*/}
-                        <div className="row mt-4">
-                            .
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <DashPayments />
         </div>
     </>;
 
diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx
index ff0d851..f369ea5 100644
--- a/src/component/home/TopBar.jsx
+++ b/src/component/home/TopBar.jsx
@@ -64,28 +64,30 @@ export default function TopBar() {
             }
 
             return (
-            <div key={item.id + index} className="col-sm-6 col-xxl-3">
-                <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
-                    <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?.extra_style ? dataSpan : item?.data_span}</small>
+                <div key={item.id + index} className="col-sm-6 col-xxl-3">
+                    <Link to={item?.link}>
+                        <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
+                            <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?.extra_style ? dataSpan : item?.data_span}</small>
+                                            </div>
+                                            <div className="col text-right">
+                                                <h5 className="text-muted mb-0">{item?.description}</h5>
+                                            </div>
+                                        </div>
+                                        <div className="apexchart-wrapper">
+                                            <div id="ecommercedemo3" className="chart-fit"></div>
+                                        </div>
                                     </div>
-                                    <div className="col text-right">
-                                        <h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
-                                    </div>
-                                </div>
-                                <div className="apexchart-wrapper">
-                                    <div id="ecommercedemo3" className="chart-fit"></div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </Link>
                 </div>
-            </div>
             )
         })}
         </>
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index 082d694..b4069af 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -1,6 +1,7 @@
 const queryKeys = {
     user_details: ['user_details'],
     product_url: ['product_url'],
+    dash_payments: ['dash_payments'],
     products: ['product-data'],
     myproduct_provision: ['myproduct_provision'],
     product_page: ['product_page'],
diff --git a/src/services/services.js b/src/services/services.js
index d9cf8a5..12bd03f 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -114,6 +114,14 @@ export const productsURL = (reqData) => {
     return postAuxEnd(`/panel/account/products/url`, postData, false)
 }
 
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const getDashPayments = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/payments`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
 export const productsData = (reqData) => {
     let postData = {