diff --git a/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx b/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
index 22b89d7cb..d9264ac30 100644
--- a/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
+++ b/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
@@ -19,6 +19,7 @@ export default function HomeDashboard() {
   return (
     <section className={isDesktop(layout) && styles.dashboardContainer}>
       {isDesktop(layout) && <ExtensionSlot name="home-sidebar-slot" key={layout} />}
+      <ExtensionSlot className={styles.homeMetricsWidgets} name="home-metrics-widgets-slot" />
       <DashboardView title={activeDashboard?.name} dashboardSlot={activeDashboard?.slot} />
     </section>
   );
diff --git a/packages/esm-home-app/src/dashboard/home-dashboard.scss b/packages/esm-home-app/src/dashboard/home-dashboard.scss
index 3b65ae19d..52204848f 100644
--- a/packages/esm-home-app/src/dashboard/home-dashboard.scss
+++ b/packages/esm-home-app/src/dashboard/home-dashboard.scss
@@ -14,12 +14,13 @@
     width: 100%;
   }
 }
+
 /*TO BE REMOVED ONCE WE IMPROVE LEFT SIDE NAVIGATION*/
-li::marker{
+li::marker {
   font-size: 0px;
 }
 
 .logoSection {
   display: flex;
   justify-content: center;
-}
+}
\ No newline at end of file
diff --git a/packages/esm-home-app/src/homepage-metrics/home-metrics-widget.scss b/packages/esm-home-app/src/homepage-metrics/home-metrics-widget.scss
new file mode 100644
index 000000000..bb8772f54
--- /dev/null
+++ b/packages/esm-home-app/src/homepage-metrics/home-metrics-widget.scss
@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  padding: 0.5rem 0.5rem 0 0.5rem
+}
\ No newline at end of file
diff --git a/packages/esm-home-app/src/homepage-metrics/metrics-container.component.tsx b/packages/esm-home-app/src/homepage-metrics/metrics-container.component.tsx
new file mode 100644
index 000000000..5910f6fde
--- /dev/null
+++ b/packages/esm-home-app/src/homepage-metrics/metrics-container.component.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import MetricTile from './metrics-tile/metrics-tile.component';
+import styles from '../homepage-metrics/home-metrics-widget.scss';
+import useAppointmentsData from '../hooks/useAppointmentsData';
+import useActiveVisits from '../hooks/useActiveVisits';
+import useVisitSummary from '../hooks/useVisitSummary';
+
+const MetricsContainer: React.FC = () => {
+  const { data: appointmentsData } = useAppointmentsData();
+  const { data: activeVisitsData } = useActiveVisits();
+  const { data: visitSummaryData } = useVisitSummary();
+
+  return (
+    <div className={styles.container}>
+      <MetricTile data={appointmentsData} header="Scheduled For Today" />
+      <MetricTile data={activeVisitsData} header="Active Visits" />
+      <MetricTile data={visitSummaryData} header="Total Visits Today" />
+    </div>
+  );
+};
+
+export default MetricsContainer;
diff --git a/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.component.tsx b/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.component.tsx
new file mode 100644
index 000000000..48a98b930
--- /dev/null
+++ b/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.component.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tile, InlineLoading } from '@carbon/react';
+import styles from './metrics-tile.scss';
+import { useTranslation } from 'react-i18next';
+
+interface MetricTileProps {
+  data: any[] | undefined;
+  header: string;
+}
+
+const VisitTile: React.FC<MetricTileProps> = ({ data, header }) => {
+  const { t } = useTranslation();
+  return (
+    <React.Fragment>
+      <Tile className={styles.tileContainer}>
+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('tileHeader', header)}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div>Patients</div>
+              <div className={styles.displayData}>{data?.length}</div>
+            </div>
+          </div>
+        </div>
+      </Tile>
+    </React.Fragment>
+  );
+};
+
+export default VisitTile;
diff --git a/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.scss b/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.scss
new file mode 100644
index 000000000..39c13b8da
--- /dev/null
+++ b/packages/esm-home-app/src/homepage-metrics/metrics-tile/metrics-tile.scss
@@ -0,0 +1,39 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+}
+
+.tileContainer {
+  background-color: white;
+  border: 0.0625rem solid #e0e0e0;
+  height: 7.875rem;
+  padding: 1rem;
+  margin: 0.5rem 0.5rem;
+  flex-grow: 1;
+}
+
+.tileHeader {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.28572;
+  letter-spacing: 0.16px;
+  color: #525252;
+}
+
+.displayDetails {
+  margin-top: 1.5rem;
+}
+
+.displayData {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.28572;
+  letter-spacing: 0;
+  color: #161616;
+}
\ No newline at end of file
diff --git a/packages/esm-home-app/src/hooks/useActiveVisits.ts b/packages/esm-home-app/src/hooks/useActiveVisits.ts
new file mode 100644
index 000000000..81f28a10b
--- /dev/null
+++ b/packages/esm-home-app/src/hooks/useActiveVisits.ts
@@ -0,0 +1,33 @@
+import { openmrsFetch, useConfig, useSession, Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+export function useActiveVisits() {
+  const session = useSession();
+  const sessionLocation = session?.sessionLocation?.uuid;
+
+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const getUrl = () => {
+    let url = `/ws/rest/v1/visit?v=${customRepresentation}&`;
+    let urlSearchParams = new URLSearchParams();
+
+    urlSearchParams.append('includeInactive', 'false');
+    urlSearchParams.append('totalCount', 'true');
+    urlSearchParams.append('location', `${sessionLocation}`);
+
+    return url + urlSearchParams.toString();
+  };
+
+  const { data, error, isLoading } = useSWR<{ data: { results: any[]; totalCount: number } }>(getUrl, openmrsFetch);
+
+  const responseData = data?.data.results;
+
+  return {
+    data: responseData,
+    error,
+    isLoading,
+  };
+}
+
+export default useActiveVisits;
diff --git a/packages/esm-home-app/src/hooks/useAppointmentsData.ts b/packages/esm-home-app/src/hooks/useAppointmentsData.ts
new file mode 100644
index 000000000..63c313271
--- /dev/null
+++ b/packages/esm-home-app/src/hooks/useAppointmentsData.ts
@@ -0,0 +1,18 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+const useAppointmentsData = () => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const appointmentDate = dayjs(new Date().setHours(0, 0, 0, 0)).format(omrsDateFormat);
+
+  const url = `ws/rest/v1/appointment/all?forDate=${appointmentDate}`;
+
+  const { data, error, isLoading } = useSWR<{ data: Array<any> }>(url, openmrsFetch);
+
+  const responseData = data?.data;
+
+  return { data: responseData, error, isLoading };
+};
+
+export default useAppointmentsData;
diff --git a/packages/esm-home-app/src/hooks/useVisitSummary.ts b/packages/esm-home-app/src/hooks/useVisitSummary.ts
new file mode 100644
index 000000000..86ab6f224
--- /dev/null
+++ b/packages/esm-home-app/src/hooks/useVisitSummary.ts
@@ -0,0 +1,21 @@
+import { openmrsFetch, useSession, Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+const useVisitSummary = () => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const currentVisitDate = dayjs(new Date().setHours(0, 0, 0, 0)).format(omrsDateFormat);
+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const visitsUrl = `/ws/rest/v1/visit?includeInactive=true&v=${customRepresentation}&fromStartDate=${dayjs(
+    currentVisitDate,
+  ).format('YYYY-MM-DD')}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Visit[] } }>(visitsUrl, openmrsFetch);
+
+  const responseData = data?.data.results;
+
+  return { data: responseData, error, isLoading };
+};
+
+export default useVisitSummary;
diff --git a/packages/esm-home-app/src/index.ts b/packages/esm-home-app/src/index.ts
index 3b79dc733..32d6d7f1e 100644
--- a/packages/esm-home-app/src/index.ts
+++ b/packages/esm-home-app/src/index.ts
@@ -24,6 +24,11 @@ export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(dashboardMe
 
 export const homeWidgetDashboard = getSyncLifecycle(homeWidgetDashboardComponent, options);
 
+export const metricContainer = getAsyncLifecycle(
+  () => import('./homepage-metrics/metrics-container.component'),
+  options,
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, esmHomeSchema);
   // t('Home', 'Home');
diff --git a/packages/esm-home-app/src/routes.json b/packages/esm-home-app/src/routes.json
index c131cc1fc..29cc9f9a1 100644
--- a/packages/esm-home-app/src/routes.json
+++ b/packages/esm-home-app/src/routes.json
@@ -32,12 +32,26 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "home-metrics-widget-dashboard",
+      "slot": "home-dashboard-slot",
+      "component": "homeMetricsWidgetDashboard",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "home-widget-dashboard",
       "slot": "home-dashboard-slot",
       "component": "homeWidgetDashboard",
       "online": true,
       "offline": true
+    },
+    {
+      "name": "metric-container",
+      "slot": "home-metrics-widgets-slot",
+      "component": "metricContainer",
+      "online": true,
+      "offline": true
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/esm-home-app/translations/en.json b/packages/esm-home-app/translations/en.json
index a5ff8c612..b01fbb107 100644
--- a/packages/esm-home-app/translations/en.json
+++ b/packages/esm-home-app/translations/en.json
@@ -1,3 +1,4 @@
 {
-  "Home": "Home"
+  "Home": "Home",
+  "tileHeader": ""
 }