diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
index ebd13a4287..9e3d68911a 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
@@ -86,7 +86,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
     return (
       <div className={styles.widgetCard}>
         <div className={styles.allergiesHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           {showAddAllergy && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
index fddb32dc0a..c150729d93 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
@@ -22,7 +22,7 @@ import {
 } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
 import { useAllergies } from './allergy-intolerance.resource';
-import { usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { allergiesToShowCount, patientAllergiesFormWorkspace } from '../constants';
 
 interface AllergiesOverviewProps {
@@ -37,6 +37,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
   const headerTitle = t('allergies', 'Allergies');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/allergies';
+  const isTablet = useLayoutType() === 'tablet';
 
   const { data: allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
   const { results: paginatedAllergies, goTo, currentPage } = usePagination(allergies ?? [], allergiesToShowCount);
@@ -68,8 +69,8 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
   if (allergies?.length) {
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.allergiesHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           {showAddAllergy && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
index 4699942ef1..0fc21cf3c7 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
@@ -6,18 +6,34 @@
   border: 1px solid $ui-03;
 }
 
-.allergiesHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.allergiesHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss
index 8db5982376..0b7a7a8a84 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss
@@ -9,7 +9,7 @@
 $color-blue-30 : #a6c8ff;
 $color-blue-10: #edf5ff;
 
-.card {
+.widgetCard {
   border: 1px solid $ui-03;
 }
 
@@ -17,20 +17,36 @@ $color-blue-10: #edf5ff;
   @include carbon--type-style("productive-heading-01");
 }
 
-.appointmentsHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.appointmentsHeader > h4:after {
-  content: "";
-  display: block;
-  width: $spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .contentSwitcherWrapper {
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
index dcccce346c..abdc7f47d5 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import Add16 from '@carbon/icons-react/es/add/16';
-import { attach } from '@openmrs/esm-framework';
+import { useLayoutType } from '@openmrs/esm-framework';
 import { EmptyDataIllustration, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { Button, DataTableSkeleton, ContentSwitcher, InlineLoading, Switch, Tile } from 'carbon-components-react';
 import { useAppointments } from './appointments.resource';
@@ -22,6 +22,7 @@ enum AppointmentTypes {
 const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const headerTitle = t('appointments', 'Appointments');
+  const isTablet = useLayoutType() === 'tablet';
 
   const [contentSwitcherValue, setContentSwitcherValue] = useState(0);
   const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
@@ -40,9 +41,9 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
   }
   if (Object.keys(appointmentsData)?.length) {
     return (
-      <div className={styles.card}>
-        <div className={styles.appointmentsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+      <div className={styles.widgetCard}>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           {isValidating ? (
             <span>
               <InlineLoading />
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
index 58a9377959..5f6e6bc37b 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
@@ -7,7 +7,7 @@ import BiometricsChart from './biometrics-chart.component';
 import BiometricsPagination from './biometrics-pagination.component';
 import { Button, DataTableSkeleton, InlineLoading } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { useBiometrics } from './biometrics.resource';
 import {
   EmptyState,
@@ -39,6 +39,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   const displayText = t('biometrics', 'biometrics');
   const headerTitle = t('biometrics', 'Biometrics');
   const [chartView, setChartView] = React.useState(false);
+  const isTablet = useLayoutType() === 'tablet';
 
   const config = useConfig() as ConfigObject;
   const { bmiUnit } = config.biometrics;
@@ -76,9 +77,9 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
   if (biometrics?.length) {
     return (
-      <div className={styles.biometricsWidgetContainer}>
-        <div className={styles.biometricsHeaderContainer}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+      <div className={styles.widgetCard}>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <div className={styles.backgroundDataFetchingIndicator}>
             <span>{isValidating ? <InlineLoading /> : null}</span>
           </div>
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
index 4539b89739..43deec24cf 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
@@ -2,18 +2,40 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-.biometricsWidgetContainer {
-  background-color: $ui-background;
+.widgetCard {
   border: 1px solid $ui-03;
-  position: relative;
 }
 
-.biometricsHeaderContainer {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .biometricsHeaderActionItems {
@@ -30,14 +52,6 @@
   margin: 0rem 0.5rem;
 }
 
-.biometricsHeaderContainer > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
-}
-
 .toggleButtons {
   width: fit-content;
   margin: 0 $spacing-03;
@@ -98,10 +112,6 @@
   }
 }
 
-.customRow tbody{
-  white-space: nowrap;
-}
-
 .backgroundDataFetchingIndicator {
   align-items: center;
   display: flex;
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx
index 200ed0649c..aa483c4d5a 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx
@@ -36,7 +36,7 @@ const BiometricsPagination: React.FC<BiometricsPaginationProps> = ({
       <TableContainer>
         <DataTable rows={paginatedBiometrics} headers={tableHeaders} isSortable size="short">
           {({ rows, headers, getHeaderProps, getTableProps }) => (
-            <Table {...getTableProps()} className={styles.customRow}>
+            <Table {...getTableProps()} useZebraStyles>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (
diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx b/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
index db42fbb666..ab566eaa2e 100644
--- a/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
+++ b/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
@@ -3,6 +3,7 @@ import styles from './empty-state.scss';
 import { Link, Tile } from 'carbon-components-react';
 import { Trans, useTranslation } from 'react-i18next';
 import { EmptyDataIllustration } from './empty-data-illustration.component';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 export interface EmptyStateProps {
   headerTitle: string;
@@ -12,10 +13,13 @@ export interface EmptyStateProps {
 
 export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Tile light className={styles.tile}>
-      <h1 className={styles.heading}>{props.headerTitle}</h1>
+      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+        <h4>{props.headerTitle}</h4>
+      </div>
       <EmptyDataIllustration />
       <p className={styles.content}>
         <Trans i18nKey="emptyStateText" values={{ displayText: props.displayText.toLowerCase() }}>
diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.scss b/packages/esm-patient-common-lib/src/empty-state/empty-state.scss
index d3d62f895a..fd89a0ed6d 100644
--- a/packages/esm-patient-common-lib/src/empty-state/empty-state.scss
+++ b/packages/esm-patient-common-lib/src/empty-state/empty-state.scss
@@ -13,12 +13,32 @@
   margin-bottom: $spacing-03;
 }
 
-.heading {
+.desktopHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: 1rem;
-  @include carbon--type-style("productive-heading-03");
-  color: $text-02;
+  margin-bottom: $spacing-05;
+  
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
 }
 
 .heading:after {
diff --git a/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx b/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx
index 2433ef0432..054a8a1cdc 100644
--- a/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx
+++ b/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from './error-state.scss';
 import { Tile } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-react-utils';
 
 export interface ErrorStateProps {
   error: any;
@@ -10,10 +11,13 @@ export interface ErrorStateProps {
 
 export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Tile light className={styles.tile}>
-      <h1 className={styles.heading}>{headerTitle}</h1>
+      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+        <h4>{headerTitle}</h4>
+      </div>
       <p className={styles.errorMessage}>
         {t('error', 'Error')} {`${error?.response?.status}: `}
         {error?.response?.statusText}
diff --git a/packages/esm-patient-common-lib/src/error-state/error-state.scss b/packages/esm-patient-common-lib/src/error-state/error-state.scss
index 7f9dba2f56..06b29c3949 100644
--- a/packages/esm-patient-common-lib/src/error-state/error-state.scss
+++ b/packages/esm-patient-common-lib/src/error-state/error-state.scss
@@ -15,20 +15,32 @@
   color: $text-02;
 }
 
-.heading {
+.desktopHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
   margin-bottom: $spacing-05;
-  @include carbon--type-style("productive-heading-03");
-  color: $text-02;
-}
 
-.heading:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
 }
 
 .tile {
diff --git a/packages/esm-patient-common-lib/src/pagination/pagination.component.scss b/packages/esm-patient-common-lib/src/pagination/pagination.component.scss
index 49df778086..7247a868d6 100644
--- a/packages/esm-patient-common-lib/src/pagination/pagination.component.scss
+++ b/packages/esm-patient-common-lib/src/pagination/pagination.component.scss
@@ -53,4 +53,4 @@
 .pagination :nth-child(2),
 .pagination :nth-child(2) > div {
   display: flex;
-}
+}
\ No newline at end of file
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx
index 4cb24e6692..8a32ca890f 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx
@@ -66,7 +66,7 @@ const ConditionsDetailedSummary: React.FC = () => {
     return (
       <div className={styles.widgetCard}>
         <div className={styles.conditionsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button kind="ghost" renderIcon={Add16} iconDescription="Add conditions" onClick={launchConditionsForm}>
             {t('add', 'Add')}
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
index b77ad3fee6..4a2ba342de 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
@@ -15,7 +15,7 @@ import {
 } from 'carbon-components-react';
 import Add16 from '@carbon/icons-react/es/add/16';
 import styles from './conditions-overview.scss';
-import { usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useConditions } from './conditions.resource';
 import {
@@ -38,6 +38,7 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patient, basePa
   const headerTitle = t('conditions', 'Conditions');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/conditions';
+  const isTablet = useLayoutType() === 'tablet';
 
   const { data: conditions, isError, isLoading, isValidating } = useConditions(patient.id);
   const { results: paginatedConditions, goTo, currentPage } = usePagination(conditions ?? [], conditionsToShowCount);
@@ -66,8 +67,8 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patient, basePa
   if (conditions?.length) {
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.conditionsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button kind="ghost" renderIcon={Add16} iconDescription="Add conditions" onClick={launchConditionsForm}>
             {t('add', 'Add')}
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss
index 2377ee0083..a461d767ce 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss
@@ -6,18 +6,39 @@
   border: 1px solid $ui-03;
 }
 
-.conditionsHeader {
+.heading h4 {
+  @include carbon--type-style('productive-heading-02');
+  color: $text-02;
+}
+
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.conditionsHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-forms-app/src/forms/forms.component.scss b/packages/esm-patient-forms-app/src/forms/forms.component.scss
index 33aa50e800..cd2a977870 100644
--- a/packages/esm-patient-forms-app/src/forms/forms.component.scss
+++ b/packages/esm-patient-forms-app/src/forms/forms.component.scss
@@ -6,26 +6,42 @@
   @include carbon--type-style("body-short-01");
 }
 
-.formsWidgetContainer {
+.widgetCard {
   background-color: $ui-background;
   border: 1px solid $ui-03;
   position: relative;
 }
 
-.formsHeaderContainer {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.formsHeaderContainer > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .contextSwitcherContainer {
@@ -33,9 +49,14 @@
   margin-right: 1rem;
 }
 
-.contextSwitcherWidth {
+.desktopContentSwitcher {
+  width: 100%;
+  height: 2rem;
+}
+
+.tabletContentSwitcher {
   width: 100%;
-  height: 48px;
+  height: 2.5rem;
 }
 
 .helperContainer {
diff --git a/packages/esm-patient-forms-app/src/forms/forms.component.tsx b/packages/esm-patient-forms-app/src/forms/forms.component.tsx
index 97d612a2b3..304b3b9f5e 100644
--- a/packages/esm-patient-forms-app/src/forms/forms.component.tsx
+++ b/packages/esm-patient-forms-app/src/forms/forms.component.tsx
@@ -6,6 +6,7 @@ import { ContentSwitcher, Switch, DataTableSkeleton, InlineLoading } from 'carbo
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
 import { useForms } from '../hooks/useForms';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 const enum FormsCategory {
   Recommended,
@@ -24,6 +25,7 @@ interface FormsProps {
 const Forms: React.FC<FormsProps> = ({ patientUuid, patient, pageSize, pageUrl, urlLabel }) => {
   const { t } = useTranslation();
   const headerTitle = t('forms', 'Forms');
+  const isTablet = useLayoutType() === 'tablet';
   const [formsCategory, setFormsCategory] = useState(FormsCategory.All);
   const { isValidating, data, error } = useForms(patientUuid);
 
@@ -40,9 +42,9 @@ const Forms: React.FC<FormsProps> = ({ patientUuid, patient, pageSize, pageUrl,
   }
 
   return (
-    <div className={styles.formsWidgetContainer}>
-      <div className={styles.formsHeaderContainer}>
-        <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+    <div className={styles.widgetCard}>
+      <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+        <h4>{headerTitle}</h4>
         {isValidating ? (
           <span>
             <InlineLoading />
@@ -50,7 +52,7 @@ const Forms: React.FC<FormsProps> = ({ patientUuid, patient, pageSize, pageUrl,
         ) : null}
         <div className={styles.contextSwitcherContainer}>
           <ContentSwitcher
-            className={styles.contextSwitcherWidth}
+            className={isTablet ? styles.tabletContentSwitcher : styles.desktopContentSwitcher}
             onChange={(event) => setFormsCategory(event.name as any)}
             selectedIndex={formsCategory}
           >
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.component.tsx b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.component.tsx
index be3aac6597..6d93dd06f2 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.component.tsx
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.component.tsx
@@ -18,6 +18,7 @@ import { EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-pat
 import { useTranslation } from 'react-i18next';
 import { mapFromFHIRImmunizationBundle } from './immunization-mapper';
 import { performPatientImmunizationsSearch } from './immunizations.resource';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 export interface ImmunizationsOverviewProps {
   basePath: string;
@@ -32,6 +33,7 @@ const ImmunizationsOverview: React.FC<ImmunizationsOverviewProps> = ({ patient,
   const [error, setError] = React.useState(null);
   const displayText = t('immunizations', 'immunizations');
   const headerTitle = t('immunizations', 'Immunizations');
+  const isTablet = useLayoutType() === 'tablet';
 
   React.useEffect(() => {
     if (patient) {
@@ -65,8 +67,8 @@ const ImmunizationsOverview: React.FC<ImmunizationsOverviewProps> = ({ patient,
       const rows = getRowItems(immunizations);
       return (
         <div className={styles.widgetCard}>
-          <div className={styles.immunizationsHeader}>
-            <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+          <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+            <h4>{headerTitle}</h4>
             <Button
               kind="ghost"
               renderIcon={Add16}
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss
index 2fbbe62292..4a645df905 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss
@@ -6,20 +6,36 @@
   border: 1px solid $ui-03;
 }
 
-.immunizationsHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.immunizationsHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .immunizationOverviewSummaryCard {
diff --git a/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx b/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
index 8b74aecf36..75768a6797 100644
--- a/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
+++ b/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
@@ -28,6 +28,7 @@ import { OrderBasketStore, OrderBasketStoreActions, orderBasketStoreActions } fr
 import { Order } from '../types/order';
 import { OrderBasketItem } from '../types/order-basket-item';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 export interface ActiveMedicationsProps {
   isValidating?: boolean;
@@ -63,6 +64,7 @@ const MedicationsDetailsTable = connect<
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [currentMedicationPage] = paginate(medications, page, pageSize);
+    const isTablet = useLayoutType() === 'tablet';
 
     const openOrderBasket = React.useCallback(() => launchPatientWorkspace('order-basket-workspace'), []);
 
@@ -150,7 +152,7 @@ const MedicationsDetailsTable = connect<
 
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.cardHeader}>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
           <h4>{title}</h4>
           {isValidating ? (
             <span>
diff --git a/packages/esm-patient-medications-app/src/components/medications-details-table.scss b/packages/esm-patient-medications-app/src/components/medications-details-table.scss
index 820021b0e8..ee22202c48 100644
--- a/packages/esm-patient-medications-app/src/components/medications-details-table.scss
+++ b/packages/esm-patient-medications-app/src/components/medications-details-table.scss
@@ -4,29 +4,45 @@
   border: 1px solid $ui-03;
 }
 
-.cardHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
-}
 
-.cardHeader span {
-  margin: auto;
+  h4 {
+    @include carbon--type-style("productive-heading-03");
+    color: $text-02;
+  }
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+
+  span {
+    margin: auto;
+  }
 }
 
-.cardHeader h4 {
-  @include carbon--type-style("productive-heading-03");
-  color: $text-02;
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.cardHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 3px;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .medicationRecord {
diff --git a/packages/esm-patient-notes-app/src/notes/notes-main.component.tsx b/packages/esm-patient-notes-app/src/notes/notes-main.component.tsx
index 8fc7e94448..f1a5fbf198 100644
--- a/packages/esm-patient-notes-app/src/notes/notes-main.component.tsx
+++ b/packages/esm-patient-notes-app/src/notes/notes-main.component.tsx
@@ -4,7 +4,7 @@ import NotesPagination from './notes-pagination.component';
 import styles from './notes-overview.scss';
 import { useTranslation } from 'react-i18next';
 import { Button, DataTableSkeleton, InlineLoading } from 'carbon-components-react';
-import { useVisit } from '@openmrs/esm-framework';
+import { useLayoutType, useVisit } from '@openmrs/esm-framework';
 import { useEncounters } from './encounter.resource';
 import {
   EmptyState,
@@ -35,6 +35,7 @@ const NotesMain: React.FC<NotesOverviewProps> = ({
   const displayText = t('notes', 'Notes');
   const headerTitle = t('notes', 'Notes');
   const { data: notes, isError, isLoading, isValidating } = useEncounters(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
 
   const launchVisitNoteForm = React.useCallback(() => {
     if (currentVisit) {
@@ -52,8 +53,8 @@ const NotesMain: React.FC<NotesOverviewProps> = ({
         if (notes?.length)
           return (
             <div className={styles.widgetCard}>
-              <div className={styles.notesHeader}>
-                <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+              <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+                <h4>{headerTitle}</h4>
                 <span>{isValidating ? <InlineLoading /> : null}</span>
                 {showAddNote && (
                   <Button
diff --git a/packages/esm-patient-notes-app/src/notes/notes-overview.scss b/packages/esm-patient-notes-app/src/notes/notes-overview.scss
index 071b8016e8..912e6d1cbe 100644
--- a/packages/esm-patient-notes-app/src/notes/notes-overview.scss
+++ b/packages/esm-patient-notes-app/src/notes/notes-overview.scss
@@ -6,18 +6,35 @@
   border: 1px solid $ui-03;
 }
 
-.notesHeader {
+
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.notesHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
index ba3256b946..e35e33e15c 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx
@@ -80,7 +80,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
     return (
       <div className={styles.widgetCard}>
         <div className={styles.programsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button
             kind="ghost"
diff --git a/packages/esm-patient-programs-app/src/programs/programs-overview.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-overview.component.tsx
index fd0160605a..7f028d9577 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-overview.component.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-overview.component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import dayjs from 'dayjs';
 import Add16 from '@carbon/icons-react/es/add/16';
 import styles from './programs-overview.scss';
-import { usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import {
   DataTable,
   DataTableSkeleton,
@@ -42,6 +42,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid, basePa
   const headerTitle = t('carePrograms', 'Care Programs');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/programs';
+  const isTablet = useLayoutType() === 'tablet';
 
   const { data: enrollments, isError, isLoading, isValidating } = useEnrollments(patientUuid);
   const activeEnrollments = enrollments?.filter((enrollment) => !enrollment.dateCompleted);
@@ -86,8 +87,8 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid, basePa
   if (activeEnrollments?.length) {
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.programsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           <Button
             kind="ghost"
diff --git a/packages/esm-patient-programs-app/src/programs/programs-overview.scss b/packages/esm-patient-programs-app/src/programs/programs-overview.scss
index c4f3c4dd01..0fc21cf3c7 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-overview.scss
+++ b/packages/esm-patient-programs-app/src/programs/programs-overview.scss
@@ -6,18 +6,34 @@
   border: 1px solid $ui-03;
 }
 
-.programsHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.programsHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-test-results-app/src/overview/external-overview.component.scss b/packages/esm-patient-test-results-app/src/overview/external-overview.component.scss
index f7f8f67d7d..0fc21cf3c7 100644
--- a/packages/esm-patient-test-results-app/src/overview/external-overview.component.scss
+++ b/packages/esm-patient-test-results-app/src/overview/external-overview.component.scss
@@ -6,18 +6,34 @@
   border: 1px solid $ui-03;
 }
 
-.externalOverviewHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.externalOverviewHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-test-results-app/src/overview/external-overview.component.tsx b/packages/esm-patient-test-results-app/src/overview/external-overview.component.tsx
index 642b58f572..34d6b7c5d7 100644
--- a/packages/esm-patient-test-results-app/src/overview/external-overview.component.tsx
+++ b/packages/esm-patient-test-results-app/src/overview/external-overview.component.tsx
@@ -7,7 +7,7 @@ import { EmptyState, ExternalOverviewProps } from '@openmrs/esm-patient-common-l
 import { RecentResultsGrid, Card } from './helpers';
 import { useTranslation } from 'react-i18next';
 import { Button, DataTableSkeleton } from 'carbon-components-react';
-import { navigate } from '@openmrs/esm-framework';
+import { navigate, useLayoutType } from '@openmrs/esm-framework';
 
 const resultsToShow = 5;
 
@@ -15,6 +15,7 @@ const RecentOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter }
   const { t } = useTranslation();
   const cardTitle = t('recentResults', 'Recent Results');
   const { overviewData, loaded, error } = useOverviewData(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
 
   const handleSeeAll = useCallback(() => {
     navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart/test-results` });
@@ -28,7 +29,7 @@ const RecentOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter }
             if (overviewData.length) {
               return (
                 <div className={styles.widgetCard}>
-                  <div className={styles.externalOverviewHeader}>
+                  <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
                     <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{cardTitle}</h4>
                     <Button
                       kind="ghost"
diff --git a/packages/esm-patient-test-results-app/src/overview/lab-results.scss b/packages/esm-patient-test-results-app/src/overview/lab-results.scss
index 9afc924dcf..b70e2dd2e9 100644
--- a/packages/esm-patient-test-results-app/src/overview/lab-results.scss
+++ b/packages/esm-patient-test-results-app/src/overview/lab-results.scss
@@ -30,20 +30,36 @@
   border: 0.125rem solid $brand-01;
 }
 
-.recent-overview-header-container {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.recent-overview-header-container > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .info-button {
diff --git a/packages/esm-patient-test-results-app/src/overview/recent-overview.component.tsx b/packages/esm-patient-test-results-app/src/overview/recent-overview.component.tsx
index 3110daf995..6c17d65b76 100644
--- a/packages/esm-patient-test-results-app/src/overview/recent-overview.component.tsx
+++ b/packages/esm-patient-test-results-app/src/overview/recent-overview.component.tsx
@@ -7,6 +7,7 @@ import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
 import { RecentResultsGrid, Card } from './helpers';
 import { navigateToResults, navigateToTimeline, navigateToTrendline } from '../helpers';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 const RECENT_COUNT = 2;
 
@@ -19,6 +20,7 @@ const RecentOverview: React.FC<RecentOverviewProps> = ({ patientUuid, basePath }
   const { t } = useTranslation();
   const cardTitle = t('recentResults', 'Recent Results');
   const { overviewData, loaded, error } = useOverviewData(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <RecentResultsGrid>
@@ -28,7 +30,7 @@ const RecentOverview: React.FC<RecentOverviewProps> = ({ patientUuid, basePath }
             if (overviewData.length) {
               return (
                 <div className={styles.widgetCard}>
-                  <div className={styles['recent-overview-header-container']}>
+                  <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
                     <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>
                       {cardTitle} ({Math.min(RECENT_COUNT, overviewData.length)})
                     </h4>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx
index 36413188fe..17e78d3f7d 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx
@@ -15,7 +15,7 @@ import {
   withUnit,
 } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { attach } from '@openmrs/esm-framework';
+import { useLayoutType } from '@openmrs/esm-framework';
 import { patientVitalsBiometricsFormWorkspace } from '../constants';
 import { useVitals } from './vitals.resource';
 
@@ -32,6 +32,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, showAddVit
   const displayText = t('vitalSigns', 'Vital signs');
   const headerTitle = t('vitals', 'Vitals');
   const [chartView, setChartView] = React.useState<boolean>();
+  const isTablet = useLayoutType() === 'tablet';
 
   const { data: vitals, isError, isLoading, isValidating } = useVitals(patientUuid);
   const { data: conceptData } = useVitalsConceptMetadata();
@@ -86,8 +87,8 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, showAddVit
         if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
         if (vitals?.length) {
           return (
-            <div className={styles.vitalsWidgetContainer}>
-              <div className={styles.vitalsHeaderContainer}>
+            <div className={styles.widgetCard}>
+              <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
                 <h4>{headerTitle}</h4>
                 <div className={styles.backgroundDataFetchingIndicator}>
                   <span>{isValidating ? <InlineLoading /> : null}</span>
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
index 77ab2eb86f..576a213445 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
@@ -2,16 +2,41 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-.vitalsWidgetContainer {
+.widgetCard {
   background-color: $ui-background;
   border: 1px solid $ui-03;
 }
 
-.vitalsHeaderContainer {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .divider {
@@ -21,19 +46,6 @@
   margin: 0rem 0.5rem;
 }
 
-.vitalsHeaderContainer h4 {
-  @include carbon--type-style('productive-heading-03');
-  color: $text-02;
-}
-
-.vitalsHeaderContainer > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
-}
-
 .toggleButtons {
   width: fit-content;
   margin: 0 $spacing-03;
@@ -94,11 +106,6 @@
   }
 }
 
-.vitalsWidgetContainer {
-  background-color: $ui-background;
-  position: relative;
-}
-
 .vitalsHeaderActionItems {
   align-items: center;
   display: flex;
@@ -116,4 +123,3 @@
   flex: 1 1 0%;
   justify-content: end;
 }
-