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 efb8515fbd..45aa77a7b1 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
@@ -112,7 +112,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true}>
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
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 10638382cc..963deaf6b4 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
@@ -90,7 +90,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
diff --git a/packages/esm-patient-allergies-app/translations/en.json b/packages/esm-patient-allergies-app/translations/en.json
index f3a29ecebb..b775bcfc75 100644
--- a/packages/esm-patient-allergies-app/translations/en.json
+++ b/packages/esm-patient-allergies-app/translations/en.json
@@ -3,7 +3,6 @@
   "allergen": "Allergen",
   "allergenAndReaction": "Allergen and Reactions",
   "allergies": "Allergies",
-  "allergy": "Allergy",
   "allergyIntolerances": "allergy intolerances",
   "allergySaved": "Allergy saved successfully",
   "allergySaveError": "Error saving allergy",
@@ -18,23 +17,18 @@
   "invalidComment": "Invalid comment, try again",
   "items": "items",
   "lastUpdated": "Last updated",
-  "lastUpdatedBy": "Last updated by",
-  "lastUpdatedLocation": "Last updated location",
   "mild": "Mild",
   "moderate": "Moderate",
   "name": "Name",
-  "onsetDate": "Onset Date",
   "otherAllergenInvalidText": "Other allergen is required",
   "otherReactionInvalidText": "Other reaction is required",
   "pleaseSpecifyOtherReaction": "Please specify other reaction",
-  "reaction": "Reaction",
   "reactions": "Reactions",
   "saveAndClose": "Save and Close",
   "seeAll": "See all",
   "selectTheAllergens": "Select the allergens",
   "selectTheReactions": "Select the reactions",
   "severe": "Severe",
-  "severity": "Severity",
   "severityAndDateOfOnset": "Severity and date of onset",
   "severityandReaction": "Severity & Reaction",
   "severityOfWorstReaction": "Severity of worst reaction",
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-overview.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-overview.component.tsx
index f1dcc893bb..ca1d73ba99 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-overview.component.tsx
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-overview.component.tsx
@@ -80,7 +80,7 @@ const AppointmentsOverview: React.FC<AppointmentOverviewProps> = ({ patientUuid
       const rows = getRowItems(appointments);
       return (
         <div>
-          <div className={styles.allergiesHeader}>
+          <div className={styles.appointmentsHeader}>
             <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add appointments" onClick={launchAppointmentsForm}>
               {t('add', 'Add')}
@@ -89,7 +89,7 @@ const AppointmentsOverview: React.FC<AppointmentOverviewProps> = ({ patientUuid
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-overview.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-overview.scss
index 22cadcb609..1af07886b8 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-overview.scss
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-overview.scss
@@ -9,3 +9,12 @@
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
 }
+
+.appointmentsHeader > h4:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid $brand-teal-01;
+}
+
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 57ca241538..202616cdee 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
@@ -35,11 +35,3 @@
 .toggle:last-of-type {
   border-radius: 0 $spacing-02 $spacing-02 0;
 }
-
-.customTable tr:nth-child(odd) td {
-  background-color: #fff;
-}
-
-.customTable  tbody  tr:nth-child(even)  td {
-  background-color: #f4f4f4;
-}
\ No newline at end of file
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometricsPagination.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometricsPagination.component.tsx
index 58113a2c25..de8157f67c 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometricsPagination.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometricsPagination.component.tsx
@@ -28,7 +28,7 @@ const BiometricsPagination: React.FC<FormsProps> = ({ tableRows, pageSize, pageU
       <TableContainer>
         <DataTable rows={results} headers={tableHeaders} isSortable={true} size="short">
           {({ rows, headers, getHeaderProps, getTableProps }) => (
-            <Table {...getTableProps()} className={styles.customTable}>
+            <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (
diff --git a/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx b/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx
index c5c04f96f8..43f9c0f7de 100644
--- a/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx
@@ -146,7 +146,7 @@ const PastVisitOverview: React.FC<PastVisitOverviewProps> = ({ patientUuid }) =>
           <DataTable headers={headerData} rows={rowData}>
             {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
               <TableContainer title={t('pastVisit', 'Past Visit')}>
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
index 5cb294090e..39dcb639ad 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/encounter-list.component.tsx
@@ -64,7 +64,7 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
       {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => {
         return (
           <TableContainer>
-            <Table className={styles.customTable} {...getTableProps()} size={!isDesktop ? 'normal' : 'short'}>
+            <Table {...getTableProps()} size={!isDesktop ? 'normal' : 'short'} useZebraStyles>
               <TableHead>
                 <TableRow>
                   <TableExpandHeader />
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss
index d7ceb00e11..4aa8aa7787 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss
@@ -109,14 +109,6 @@
   border-radius: 0 $spacing-02 $spacing-02 0;
 }
 
-.customTable tr[data-parent-row]:nth-child(odd) td {
-  background-color: #fff;
-}
-
-.customTable  tbody  tr[data-parent-row]:nth-child(even)  td {
-  background-color: #f4f4f4;
-}
-
 .encounterEmptyState {
   text-align: center;
   margin: 0 1rem 1rem 1rem; 
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 f42a638e74..47c1d6b323 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
@@ -84,7 +84,7 @@ const ConditionsDetailedSummary: React.FC = () => {
           <TableContainer>
             <DataTable rows={tableRows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
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 a2afc43fc2..7407a6914a 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
@@ -84,7 +84,7 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patient }) => {
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
diff --git a/packages/esm-patient-forms-app/src/forms/form-view.component.tsx b/packages/esm-patient-forms-app/src/forms/form-view.component.tsx
index 5c5b71dfd5..020b6f9d6b 100644
--- a/packages/esm-patient-forms-app/src/forms/form-view.component.tsx
+++ b/packages/esm-patient-forms-app/src/forms/form-view.component.tsx
@@ -140,7 +140,7 @@ const FormView: React.FC<FormViewProps> = ({ forms, patientUuid, patient, pageSi
             <TableContainer className={styles.tableContainer}>
               <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
                 {({ rows, headers, getHeaderProps, getTableProps }) => (
-                  <Table {...getTableProps()}>
+                  <Table {...getTableProps()} useZebraStyles>
                     <TableHead>
                       <TableRow>
                         {headers.map((header) => (
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 326636dad4..48f7f2e55e 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
@@ -80,7 +80,7 @@ const ImmunizationsOverview: React.FC<ImmunizationsOverviewProps> = ({ patient,
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
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 57c1fb437b..7647d35f61 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
@@ -161,7 +161,7 @@ const MedicationsDetailsTable = connect<
         <DataTable headers={tableHeaders} rows={tableRows} isSortable={true} sortRow={sortRow}>
           {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
             <TableContainer className={styles.tableHeader} zebra>
-              <Table {...getTableProps()}>
+              <Table {...getTableProps()} useZebraStyles>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
diff --git a/packages/esm-patient-notes-app/src/notes/notesPagination.component.tsx b/packages/esm-patient-notes-app/src/notes/notesPagination.component.tsx
index c7a9e06768..38bec89d79 100644
--- a/packages/esm-patient-notes-app/src/notes/notesPagination.component.tsx
+++ b/packages/esm-patient-notes-app/src/notes/notesPagination.component.tsx
@@ -56,7 +56,7 @@ const NotesPagination: React.FC<FormsProps> = ({ notes, pageSize, pageUrl, urlLa
       <TableContainer>
         <DataTable rows={getRowItems(results)} headers={headers} isSortable={true} size="short" useZebraStyles>
           {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-            <Table {...getTableProps()}>
+            <Table {...getTableProps()} useZebraStyles>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (
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 7a59da52c8..5bc6356c74 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
@@ -93,7 +93,7 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
             <TableContainer>
               <DataTable rows={tableRows} headers={tableHeader} isSortable={true} size="short">
                 {({ rows, headers, getHeaderProps, getTableProps }) => (
-                  <Table {...getTableProps()}>
+                  <Table {...getTableProps()} useZebraStyles>
                     <TableHead>
                       <TableRow>
                         {headers.map((header) => (
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 ee41ee5075..b0a274ca11 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
@@ -85,7 +85,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
           <TableContainer>
             <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
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 8a6462302d..550e1e4a05 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
@@ -104,7 +104,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, showAddVit
           return (
             <div className={styles.vitalsWidgetContainer}>
               <div className={styles.vitalsHeaderContainer}>
-                <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+                <h4>{headerTitle}</h4>
                 <div className={styles.toggleButtons}>
                   <Button
                     className={styles.toggle}
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 a5ee3380b6..e9df5aa2db 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.scss
@@ -13,6 +13,11 @@
   padding: $spacing-04 0 $spacing-04 $spacing-05;
 }
 
+.vitalsHeaderContainer h4 {
+  @include carbon--type-style('productive-heading-03');
+  color: $text-02;
+}
+
 .vitalsHeaderContainer > h4:after {
   content: "";
   display: block;
@@ -38,11 +43,3 @@
   background-color: $ui-background;
   position: relative;
 }
-
-.customTable tr:nth-child(odd) td {
-  background-color: #fff;
-}
-
-.customTable  tbody  tr:nth-child(even)  td {
-  background-color: #f4f4f4;
-}
\ No newline at end of file
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitalsPagination.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitalsPagination.component.tsx
index 74092f19ab..b28f6c12ec 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitalsPagination.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/vitalsPagination.component.tsx
@@ -34,7 +34,7 @@ const VitalsPagination: React.FC<VitalsPaginationProps> = ({
       <TableContainer>
         <DataTable rows={results} headers={tableHeaders} isSortable={true} size="short">
           {({ rows, headers, getHeaderProps, getTableProps }) => (
-            <Table {...getTableProps()} className={styles.customTable}>
+            <Table {...getTableProps()} useZebraStyles>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (