diff --git a/packages/esm-patient-queues-app/package.json b/packages/esm-patient-queues-app/package.json
index c51a7dac..56f2a0f5 100644
--- a/packages/esm-patient-queues-app/package.json
+++ b/packages/esm-patient-queues-app/package.json
@@ -52,6 +52,7 @@
     "react-router-dom": "6.x"
   },
   "devDependencies": {
+    "react-tooltip": "^5.26.3",
     "webpack": "^5.83.1"
   }
 }
diff --git a/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx b/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx
index c48cd041..5ad63666 100644
--- a/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx
@@ -181,6 +181,7 @@ function ActiveVisitsReceptionTable() {
                 <TableToolbarContent className={styles.toolbarContent}>
                   <Layer>
                     <TableToolbarSearch
+                      expanded
                       className={styles.search}
                       onChange={onInputChange}
                       placeholder={t('searchThisList', 'Search this list')}
diff --git a/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss b/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss
index c994f48c..e5645deb 100644
--- a/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss
+++ b/packages/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss
@@ -3,7 +3,7 @@
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
-  background-color: $ui-01;
+  //background-color: $ui-01;
 }
 
 .headerContainer {
@@ -69,7 +69,7 @@
 }
 
 .tableContainer {
-  background-color: $ui-01;
+  border: 1px solid $ui-03;
   margin: 0 spacing.$spacing-05;
   padding: 0;
 
@@ -89,6 +89,10 @@
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
   }
+
+  :global(.cds--toolbar-search-container-active.cds--search) {
+    margin-right: 1rem;
+  }
 }
 
 .emptyRow {
diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx
index 5ad6a81c..1ba66a6a 100644
--- a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx
@@ -215,6 +215,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
                 <TableToolbarContent className={styles.toolbarContent}>
                   <Layer>
                     <TableToolbarSearch
+                      expanded
                       className={styles.search}
                       onChange={onInputChange}
                       placeholder={t('searchThisList', 'Search this list')}
diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
index c994f48c..a18ebb58 100644
--- a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
@@ -3,7 +3,11 @@
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
-  background-color: $ui-01;
+  :global(.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected) {
+    background-color: transparent;
+    border-left: 1px solid $ui-03;
+    border-right: 1px solid $ui-03;
+  }
 }
 
 .headerContainer {
@@ -69,7 +73,7 @@
 }
 
 .tableContainer {
-  background-color: $ui-01;
+  border: 1px solid $ui-03;
   margin: 0 spacing.$spacing-05;
   padding: 0;
 
@@ -88,6 +92,10 @@
   .toolbarContent {
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
+
+    :global(.cds--toolbar-search-container-active.cds--search) {
+      margin-right: 1rem;
+    }
   }
 }
 
diff --git a/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss b/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss
index dbaaf177..b7ace5e6 100644
--- a/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss
+++ b/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss
@@ -11,6 +11,7 @@
   border-left: 0px;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2rem;
 }
 
 .left-justified-items {
diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
index 28112005..e777b060 100644
--- a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
+++ b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -1,5 +1,5 @@
 import { UserHasAccess, useSession } from '@openmrs/esm-framework';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PRIVILEGE_RECEPTION_METRIC, PRIVILIGE_TRIAGE_METRIC } from '../constants';
 
@@ -13,8 +13,11 @@ import styles from './clinic-metrics.scss';
 import MetricsCard from './metrics-card.component';
 import { useParentLocation } from '../active-visits/patient-queues.resource';
 import { usePatientQueuesList } from '../active-visit-patient-reception/active-visits-reception.resource';
+import { CheckmarkOutline, Pending, ProgressBarRound } from '@carbon/react/icons';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { values } from 'lodash-es';
 
-function ClinicMetrics() {
+const ClinicMetrics: React.FC = () => {
   const { t } = useTranslation();
   const session = useSession();
   const { location } = useParentLocation(session?.sessionLocation?.uuid);
@@ -22,33 +25,9 @@ function ClinicMetrics() {
   const { patientQueueCount: pendingCount } = usePatientQueuesList(location?.parentLocation?.uuid);
   const { appointmentList } = useAppointmentList('Scheduled');
   const creatorUuid = session?.user?.person?.display;
-
   const { patientQueueCount } = usePatientsBeingServed(session?.sessionLocation?.uuid, 'pending', creatorUuid);
 
-  const { stats: patientStats } = useServicePointCount(location?.parentLocation?.uuid, new Date(), new Date());
-
-  const getMetrics = (locationTag) => {
-    const stats = patientStats?.find((item) => item.locationTag?.display === locationTag) || {
-      pending: 0,
-      serving: 0,
-      completed: 0,
-    };
-    return {
-      label: locationTag,
-      value: stats.serving + stats.completed + stats.pending,
-      status: [
-        { status: 'Pending', value: stats.pending, color: 'orange' },
-        { status: 'Serving', value: stats.serving, color: 'green' },
-        { status: 'Completed', value: stats.completed, color: 'blue' },
-      ],
-    };
-  };
-
-  const triage = getMetrics('Triage');
-  const clinicalRoom = getMetrics('Clinical Room');
-  const laboratory = getMetrics('Laboratory');
-  const radiology = getMetrics('Radiology');
-  const pharmacy = getMetrics('Main Pharmacy');
+  const { stats } = useServicePointCount(location?.parentLocation?.uuid, new Date(), new Date());
 
   return (
     <div className={styles.cardContainer}>
@@ -61,10 +40,7 @@ function ClinicMetrics() {
           values={[{ label: 'Expected Appointments', value: appointmentList?.length }]}
           headerLabel={t('noOfExpectedAppointments', 'No. Of Expected Appointments')}
         />
-        <MetricsCard
-          values={[triage, clinicalRoom, laboratory, radiology, pharmacy]}
-          headerLabel={t('currentlyServing', 'No. of Currently being Served')}
-        />
+        <MetricsCard values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
       </UserHasAccess>
 
       <UserHasAccess privilege={PRIVILIGE_TRIAGE_METRIC}>
@@ -83,6 +59,50 @@ function ClinicMetrics() {
       </UserHasAccess>
     </div>
   );
-}
+};
+
+export const getMetrics = (locationTag, patientStats) => {
+  const stats = patientStats?.find((item) => item.locationTag?.display === locationTag) || {
+    pending: 0,
+    serving: 0,
+    completed: 0,
+  };
+  return {
+    label: locationTag,
+    value: stats.serving + stats.completed + stats.pending,
+    status: [
+      {
+        status: (
+          <>
+            <Pending data-tooltip-id="tooltip-pending" />
+            <ReactTooltip id="tooltip-pending" place="right" content="Pending" variant="warning" />
+          </>
+        ),
+        value: stats.pending,
+        color: 'orange',
+      },
+      {
+        status: (
+          <>
+            <ProgressBarRound data-tooltip-id="tooltip-serving" />
+            <ReactTooltip id="tooltip-serving" place="right" content="Serving" variant="info" />
+          </>
+        ),
+        value: stats.serving,
+        color: 'blue',
+      },
+      {
+        status: (
+          <>
+            <CheckmarkOutline data-tooltip-id="tooltip-completed" />
+            <ReactTooltip id="tooltip-completed" place="right" content="Completed" variant="success" />
+          </>
+        ),
+        value: stats.completed,
+        color: 'green',
+      },
+    ],
+  };
+};
 
 export default ClinicMetrics;
diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx
index f12bcba2..76620c71 100644
--- a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx
+++ b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx
@@ -16,6 +16,8 @@ import { PatientQueue } from '../types/patient-queues';
 import { omrsDateFormat } from '../constants';
 import { amPm } from '../helpers/time-helpers';
 import { configSchema } from '../config-schema';
+import { Value } from './metrics-card.component';
+import { getMetrics } from './clinic-metrics.component';
 
 export type PickedResponse = {
   results: IResultsItem[];
@@ -577,17 +579,22 @@ export interface Link {
   resourceAlias: string;
 }
 
-// patients in the different service points
-
 export function useServicePointCount(parentLocation: string, beforeDate: Date, afterDate: Date) {
-  const apiUrl = `/ws/rest/v1/queuestatistics?parentLocation=${parentLocation}&after=${afterDate}&before=${beforeDate}`;
+  const apiUrl = `/ws/rest/v1/queuestatistics?parentLocation=${parentLocation}&toDate=${afterDate}&fromDate=${beforeDate}`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientStats> } }, Error>(
     apiUrl,
     openmrsFetch,
   );
 
+  const servicePoints = ['Triage', 'Clinical Room', 'Laboratory', 'Radiology', 'Main Pharmacy'];
+  let patientStatsArray: Array<Value> = [];
+
+  servicePoints.map((servicePoint) => {
+    patientStatsArray.push(getMetrics(servicePoint, data?.data?.results));
+  });
+
   return {
-    stats: data?.data.results,
+    stats: patientStatsArray,
     isLoading,
     isError: error,
     isValidating,
diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx
index 5d870068..5eccddac 100644
--- a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx
+++ b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx
@@ -1,6 +1,5 @@
 import { Layer, Tile } from '@carbon/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import styles from './metrics-card.scss';
 
 export interface Value {
@@ -10,7 +9,7 @@ export interface Value {
 }
 
 interface Status {
-  status: string;
+  status: any;
   value: number;
   color: string;
 }
@@ -21,7 +20,6 @@ interface MetricsCardProps {
 }
 
 const MetricsCard: React.FC<MetricsCardProps> = ({ values, headerLabel }) => {
-  // Assuming "styles" is imported from a CSS module or styling library
   return (
     <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
       <Tile className={styles.tileContainer}>
@@ -30,25 +28,28 @@ const MetricsCard: React.FC<MetricsCardProps> = ({ values, headerLabel }) => {
             <label className={styles.headerLabel}>{headerLabel}</label>
           </div>
         </div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          {values.map((value) => (
-            <div key={value.label}>
-              <label className={styles.totalsLabel}>{value.label}</label>
-              <p className={styles.totalsValue}>{value.value}</p>
-              <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <div className={styles.valueContainer}>
+          {values?.map((value) => (
+            <div className={styles.valueInnerContainer}>
+              <div key={value.label}>
+                <label className={styles.totalsLabel}>{value.label}</label>
+                <p className={styles.totalsValue}>{value.value}</p>
+              </div>
+              <div className={styles.valueStatus}>
                 {value?.status?.map((status, index) => (
-                  <div
-                    key={index}
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'start',
-                      marginRight: '10px',
-                      color: `${status.color}`,
-                    }}
-                  >
-                    <p style={{ margin: 0, fontSize: '0.8em', marginRight: '5px' }}>{status.value}</p>
-                    <label style={{ margin: 0, fontSize: '0.8em' }}>{status.status}</label>
+                  <div key={index} className={styles.status}>
+                    <p className={styles.statusValue}>{status.value}</p>
+                    <label
+                      className={`${styles.statusLabel} ${
+                        status.color === 'orange'
+                          ? styles.statusOrange
+                          : status.color === 'green'
+                          ? styles.statusGreen
+                          : styles.statusBlue
+                      }`}
+                    >
+                      {status.status}
+                    </label>
                   </div>
                 ))}
               </div>
diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss
index 769a8db2..d2448f47 100644
--- a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss
+++ b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss
@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
@@ -34,7 +35,7 @@
 }
 
 .totalsLabel {
-  font-weight: bold;
+  font-weight: bold !important;
   @include type.type-style('label-01');
   color: $text-02;
 }
@@ -68,3 +69,45 @@
     margin-left: spacing.$spacing-03;
   }
 }
+
+.valueContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.valueInnerContainer {
+  display: flex;
+}
+
+.valueStatus {
+  padding-left: 0.5rem;
+}
+
+.status {
+  display: flex;
+  align-items: start;
+  margin-right: 10px;
+}
+
+.statusValue {
+  margin: 0 5px 0 0;
+  font-size: 0.8em;
+}
+
+.statusLabel {
+  margin: 0;
+  font-size: 0.8em;
+}
+
+.statusOrange {
+  color: colors.$orange-30;
+}
+
+.statusGreen {
+  color: colors.$green-50;
+}
+
+.statusBlue {
+  color: colors.$blue-30;
+}
diff --git a/yarn.lock b/yarn.lock
index de23d70b..29859317 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2250,6 +2250,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.0.0":
+  version: 1.6.0
+  resolution: "@floating-ui/core@npm:1.6.0"
+  dependencies:
+    "@floating-ui/utils": ^0.2.1
+  checksum: 2e25c53b0c124c5c9577972f8ae21d081f2f7895e6695836a53074463e8c65b47722744d6d2b5a993164936da006a268bcfe87fe68fd24dc235b1cb86bed3127
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.3
+  resolution: "@floating-ui/dom@npm:1.6.3"
+  dependencies:
+    "@floating-ui/core": ^1.0.0
+    "@floating-ui/utils": ^0.2.0
+  checksum: 81cbb18ece3afc37992f436e469e7fabab2e433248e46fff4302d12493a175b0c64310f8a971e6e1eda7218df28ace6b70237b0f3c22fe12a21bba05b5579555
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 9ed4380653c7c217cd6f66ae51f20fdce433730dbc77f95b5abfb5a808f5fdb029c6ae249b4e0490a816f2453aa6e586d9a873cd157fdba4690f65628efc6e06
+  languageName: node
+  linkType: hard
+
 "@formatjs/ecma402-abstract@npm:1.18.2":
   version: 1.18.2
   resolution: "@formatjs/ecma402-abstract@npm:1.18.2"
@@ -7906,6 +7932,7 @@ __metadata:
     lodash-es: ^4.17.15
     qrcode.react: ^3.1.0
     react-to-print: ^2.14.13
+    react-tooltip: ^5.26.3
     swr: ^2.1.1
     webpack: ^5.83.1
   peerDependencies:
@@ -10239,6 +10266,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.3.0":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
+  languageName: node
+  linkType: hard
+
 "clean-css@npm:^5.2.2":
   version: 5.3.2
   resolution: "clean-css@npm:5.3.2"
@@ -23147,6 +23181,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:^5.26.3":
+  version: 5.26.3
+  resolution: "react-tooltip@npm:5.26.3"
+  dependencies:
+    "@floating-ui/dom": ^1.6.1
+    classnames: ^2.3.0
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: 52e37dc2726f0c2e47505cf3ce1d51576d2007b16b470970c7d26f8c5afb14bd36571ca9b18eb151bf6d6d892fddb91900a51e834539bc43bacba66a46d6b370
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:2.9.0":
   version: 2.9.0
   resolution: "react-transition-group@npm:2.9.0"