diff --git a/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss b/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss
index 3852147eb7..3c2c5a5ab6 100644
--- a/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss
+++ b/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label01 {
   @include type.type-style("label-01");
@@ -30,7 +30,7 @@
   :global(.cds--cc--layout-row) {
     height: 0;
   }
-  
+
   :global(.layout-child) {
     margin-top: spacing.$spacing-03;
   }
@@ -45,15 +45,15 @@
 .verticalTabs {
   margin: 1rem 0;
   scroll-behavior: smooth;
-  
+
   > ul {
     flex-direction: column !important;
   }
-  
+
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
     margin-left: 0rem;
   }
-  
+
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
     border-bottom: 0 !important;
     border-left: 2px solid $color-gray-30;
@@ -88,7 +88,7 @@
     max-height: fit-content;
     overflow-x: visible;
   }
-  
+
   > button :global(.cds--tabs .cds--tabs__nav-link) {
     border-bottom: none;
   }
diff --git a/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss b/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss
index 9049764e00..9d867d8d08 100644
--- a/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss
+++ b/packages/esm-generic-patient-widgets-app/src/obs-switchable/obs-switchable.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetContainer {
   background-color: $ui-background;
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss
index a66466d72e..9940ff0fd7 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
@@ -8,7 +8,7 @@
 
 .allergyCriticality {
   display: flex;
-  align-items: center; 
+  align-items: center;
   text-transform: uppercase;
 }
 
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
index cb0d0b24ab..15f4898072 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -10,7 +10,6 @@ import {
   FormGroup,
   InlineLoading,
   InlineNotification,
-  Layer,
   RadioButton,
   RadioButtonGroup,
   Row,
@@ -28,6 +27,7 @@ import {
   showToast,
   useConfig,
   useLayoutType,
+  ResponsiveWrapper,
 } from '@openmrs/esm-framework';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
@@ -211,7 +211,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
               )}
             />
           )}
-          <ResponsiveWrapper isTablet={isTablet}>
+          <ResponsiveWrapper>
             <FormGroup legendText={t('allergen', 'Allergen')} data-testid="allergens-container">
               <Controller
                 name="allergen"
@@ -233,7 +233,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </FormGroup>
           </ResponsiveWrapper>
           {selectedAllergen?.uuid === otherConceptUuid && (
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="nonCodedAllergen"
                 control={control}
@@ -265,7 +265,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </div>
             {selectedAllergicReactions?.includes(otherConceptUuid) ? (
               <div className={styles.input}>
-                <ResponsiveWrapper isTablet={isTablet}>
+                <ResponsiveWrapper>
                   <Controller
                     name="nonCodedAllergicReaction"
                     control={control}
@@ -322,7 +322,7 @@ function AllergyForm(props: DefaultWorkspaceProps) {
             </FormGroup>
           </div>
           <div>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="comment"
                 control={control}
@@ -366,10 +366,6 @@ function AllergyForm(props: DefaultWorkspaceProps) {
   );
 }
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 function AllergicReactionsField({
   allergicReactions,
   methods: { control, setValue },
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
index c58a72bcb2..2ede8ba412 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../../root.scss';
 
 .header {
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 01af04be3b..c5512bad7a 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss
index 2008afd39d..43e4c23617 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-tile.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label {
   @include type.type-style('label-01');
@@ -14,4 +14,4 @@
 
 .value {
   @include type.type-style('body-compact-01');
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-allergies-app/src/root.scss b/packages/esm-patient-allergies-app/src/root.scss
index 8683a97bca..56e17a9b8d 100644
--- a/packages/esm-patient-allergies-app/src/root.scss
+++ b/packages/esm-patient-allergies-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars'; 
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
index cfdc72476a..307c3a490c 100644
--- a/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
+++ b/packages/esm-patient-appointments-app/src/appointments/appointments-base.scss
@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 // TO DO Move this styles to style - guide
 // https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
diff --git a/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss b/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss
index 0ebd9bb122..b9b3c7bcb8 100644
--- a/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss
+++ b/packages/esm-patient-appointments-app/src/appointments/upcoming-appointments-card.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin: spacing.$spacing-05;
@@ -20,16 +20,16 @@
       margin: 0rem 0rem;
     }
   }
-  
+
   .input {
     margin: 0rem 1rem 1rem;
   }
- 
+
   .headerLabel {
     @include type.type-style('label-01');
     color: $text-02;
   }
-  
+
   .checkboxContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -44,4 +44,4 @@
     width: 100%;
     max-width: unset;
     padding: '0rem';
-  }
\ No newline at end of file
+  }
diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss b/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss
index 63afb41586..7222b7b28c 100644
--- a/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss
+++ b/packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
 .cameraSection {
diff --git a/packages/esm-patient-attachments-app/src/root.scss b/packages/esm-patient-attachments-app/src/root.scss
index 7d7fdf6a29..939d76b96f 100644
--- a/packages/esm-patient-attachments-app/src/root.scss
+++ b/packages/esm-patient-attachments-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading02 {
   @include type.type-style("heading-compact-02");
diff --git a/packages/esm-patient-banner-app/src/banner/patient-banner.scss b/packages/esm-patient-banner-app/src/banner/patient-banner.scss
index 19fd134eb6..ca04c7e0b2 100644
--- a/packages/esm-patient-banner-app/src/banner/patient-banner.scss
+++ b/packages/esm-patient-banner-app/src/banner/patient-banner.scss
@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   border-top: 0.063rem solid $ui-03;
@@ -18,11 +18,11 @@
   .patientName {
     color: $ui-01;
   }
-  
+
   .demographics, .row, .identifierTag, .identifier, .contactDetails .heading {
     color: $ui-02;
   }
-  
+
   .toggleContactDetailsButton, .toggleContactDetailsButton > svg, .actionsButtonText {
     color: colors.$blue-40;
   }
diff --git a/packages/esm-patient-banner-app/src/contact-details/contact-details.scss b/packages/esm-patient-banner-app/src/contact-details/contact-details.scss
index 8c68eb5b18..7a32b369e8 100644
--- a/packages/esm-patient-banner-app/src/contact-details/contact-details.scss
+++ b/packages/esm-patient-banner-app/src/contact-details/contact-details.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 @mixin container{
   color: $text-02;
diff --git a/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss b/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss
index 7a415dd5db..5201793d3b 100644
--- a/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss
+++ b/packages/esm-patient-banner-app/src/ui-components/overflow-menu.scss
@@ -1,5 +1,5 @@
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin-top: -1.25rem;
@@ -36,4 +36,4 @@
 
 .deceased {
   color: colors.$blue-40;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx b/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx
index 41d2a16660..712ad26139 100644
--- a/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx
+++ b/packages/esm-patient-chart-app/src/deceased/base-concept-answer.component.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
-import { Layer, RadioButton, RadioButtonGroup, Search } from '@carbon/react';
+import { RadioButton, RadioButtonGroup, Search } from '@carbon/react';
 import { EmptyState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
-import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination, ResponsiveWrapper } from '@openmrs/esm-framework';
 import type { ConceptAnswer } from './deceased.resource';
 import styles from './deceased-form.scss';
 
@@ -41,7 +41,7 @@ const BaseConceptAnswer: React.FC<BaseConceptAnswerProps> = ({ onChange, isPatie
         isTablet ? styles.conceptAnswerOverviewWrapperTablet : styles.conceptAnswerOverviewWrapperDesktop,
       )}
     >
-      <ResponsiveWrapper isTablet={isTablet}>
+      <ResponsiveWrapper>
         <Search
           onChange={(event) => handleSearch(event.target.value)}
           placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
@@ -83,8 +83,4 @@ const BaseConceptAnswer: React.FC<BaseConceptAnswerProps> = ({ onChange, isPatie
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default BaseConceptAnswer;
diff --git a/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx b/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx
index b6c355deb0..ae1b77d246 100644
--- a/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx
+++ b/packages/esm-patient-chart-app/src/deceased/deceased-form.component.tsx
@@ -7,14 +7,13 @@ import {
   DatePicker,
   DatePickerInput,
   Form,
-  Layer,
   Row,
   DatePickerSkeleton,
   DataTableSkeleton,
 } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
-import { ExtensionSlot, useLayoutType, showSnackbar, showModal } from '@openmrs/esm-framework';
+import { ExtensionSlot, useLayoutType, showSnackbar, showModal, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { markPatientDeceased, usePatientDeathConcepts, usePatientDeceased } from './deceased.resource';
 import BaseConceptAnswer from './base-concept-answer.component';
 
@@ -85,7 +84,7 @@ const MarkPatientDeceasedForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
             {!conceptAnswers ? (
               <DatePickerSkeleton />
             ) : (
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <DatePicker
                   dateFormat="d/m/Y"
                   datePickerType="single"
@@ -141,8 +140,4 @@ const MarkPatientDeceasedForm: React.FC<DefaultWorkspaceProps> = ({ patientUuid,
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default MarkPatientDeceasedForm;
diff --git a/packages/esm-patient-chart-app/src/loader/loader.scss b/packages/esm-patient-chart-app/src/loader/loader.scss
index 88d267d878..e88cda2a1e 100644
--- a/packages/esm-patient-chart-app/src/loader/loader.scss
+++ b/packages/esm-patient-chart-app/src/loader/loader.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .loading {
   display: flex;
diff --git a/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss b/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss
index b32f2f4b22..da23a73a5a 100644
--- a/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss
+++ b/packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 $icon-button-size: 2.5rem;
 $actionPanelOffset: 3rem;
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
index 85eaced17c..a05fec2d8f 100644
--- a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
+++ b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root.scss";
 
 .dashboardTitle {
diff --git a/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss b/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
index b7b6aaa4ff..f72bc09a8b 100644
--- a/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
+++ b/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 $actionNavOffset: 45px;
 $actionPanelOffset: 256px;
diff --git a/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss b/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss
index 87c9d0bc01..a09d843082 100644
--- a/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss
+++ b/packages/esm-patient-chart-app/src/patient-details-tile/patient-details-tile.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container:after {
 	content: '';
@@ -20,5 +20,5 @@
 
 .name {
 	@include type.type-style('body-compact-02');
-	
+
 }
diff --git a/packages/esm-patient-chart-app/src/root.scss b/packages/esm-patient-chart-app/src/root.scss
index b994f53eba..8c1565b087 100644
--- a/packages/esm-patient-chart-app/src/root.scss
+++ b/packages/esm-patient-chart-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 :root {
   --bottom-nav-height: 4rem;
diff --git a/packages/esm-patient-chart-app/src/visit-header/close-button.scss b/packages/esm-patient-chart-app/src/visit-header/close-button.scss
index c283e3ad11..cfb0554010 100644
--- a/packages/esm-patient-chart-app/src/visit-header/close-button.scss
+++ b/packages/esm-patient-chart-app/src/visit-header/close-button.scss
@@ -1,5 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .headerGlobalBarCloseButton {
   @include brand-02(background-color);
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-chart-app/src/visit-header/visit-header.scss b/packages/esm-patient-chart-app/src/visit-header/visit-header.scss
index ef20957847..d6c015ca1d 100644
--- a/packages/esm-patient-chart-app/src/visit-header/visit-header.scss
+++ b/packages/esm-patient-chart-app/src/visit-header/visit-header.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .topNavHeader {
   top: var(--omrs-offline-banner-height);
diff --git a/packages/esm-patient-chart-app/src/visit/past-visit-overview.scss b/packages/esm-patient-chart-app/src/visit/past-visit-overview.scss
index bfe03e6f10..4e2de795fd 100644
--- a/packages/esm-patient-chart-app/src/visit/past-visit-overview.scss
+++ b/packages/esm-patient-chart-app/src/visit/past-visit-overview.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .button {
   height: 4rem;
diff --git a/packages/esm-patient-chart-app/src/visit/queue-entry/edit-queue-entry.scss b/packages/esm-patient-chart-app/src/visit/queue-entry/edit-queue-entry.scss
index 21d735f68d..0a6f8feb38 100644
--- a/packages/esm-patient-chart-app/src/visit/queue-entry/edit-queue-entry.scss
+++ b/packages/esm-patient-chart-app/src/visit/queue-entry/edit-queue-entry.scss
@@ -1,13 +1,13 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.editStatusBtn {
-    margin-left: spacing.$spacing-04;
-    border: none;
-}
-
-.editStatusIcon {
-    fill: white;
-    color: white;
-}
\ No newline at end of file
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.editStatusBtn {
+  margin-left: spacing.$spacing-04;
+  border: none;
+}
+
+.editStatusIcon {
+  fill: white;
+  color: white;
+}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
index a9fd9d359a..c48eb4a710 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import styles from './visit-form.scss';
 import { Controller, useFormContext } from 'react-hook-form';
 import { type VisitFormData } from './visit-form.resource';
-import { DatePicker, DatePickerInput, Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import classNames from 'classnames';
-import { useLayoutType } from '@openmrs/esm-framework';
+import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type amPm } from '@openmrs/esm-patient-common-lib';
 
@@ -46,7 +46,7 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
           name={dateFieldName}
           control={control}
           render={({ field: { onBlur, onChange, value } }) => (
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <DatePicker
                 dateFormat="d/m/Y"
                 datePickerType="single"
@@ -69,7 +69,7 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
             </ResponsiveWrapper>
           )}
         />
-        <ResponsiveWrapper isTablet={isTablet}>
+        <ResponsiveWrapper>
           <Controller
             name={timeFieldName}
             control={control}
@@ -112,7 +112,3 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
 };
 
 export default VisitDateTimeField;
-
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
index 3f1991cb8c..e719b9452f 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../../root.scss';
 
 .container {
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-type-overview.scss b/packages/esm-patient-chart-app/src/visit/visit-form/visit-type-overview.scss
index c036999959..80486b430d 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-type-overview.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-type-overview.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .visitTypeOverviewWrapper {
 	margin: spacing.$spacing-05 0rem;
@@ -35,10 +35,10 @@
 	min-height: spacing.$spacing-10;
 	width: 100%;
 	@include type.type-style('body-compact-01');
-	
+
 }
 
 .radioButton {
 	padding: spacing.$spacing-02 spacing.$spacing-05;
 	margin: spacing.$spacing-03 0;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss
index ac15a4eaf2..cb81ab1989 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/cancel-visit-dialog.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .bodyShort02 {
   @include type.type-style("body-compact-02");
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss
index ac15a4eaf2..cb81ab1989 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/end-visit-dialog.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .bodyShort02 {
   @include type.type-style("body-compact-02");
diff --git a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss
index 6b4fb57969..518c28b2f5 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss
+++ b/packages/esm-patient-chart-app/src/visit/visit-prompt/start-visit-dialog.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 
 .header {
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.scss
index 8558ebff64..3fff70a8f5 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.scss
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .tableContainer {
   padding: 0;
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.scss
index b4ecaad066..427a73af1b 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.scss
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visit-summary.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../../root.scss";
 
 .diagnosisLabel {
@@ -74,9 +74,9 @@
     max-height: fit-content;
     overflow-x: visible;
   }
-  
+
   > button :global(.cds--tabs .cds--tabs__nav-link) {
     border-bottom: none;
   }
 }
-  
+
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss
index d5d554e98d..ed68d54cb0 100644
--- a/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss
+++ b/packages/esm-patient-chart-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../../../root.scss";
 
 .tableContainer {
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 b33c6b21bf..8c446adb83 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
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root.scss";
 
 .visitType {
diff --git a/packages/esm-patient-chart-app/src/workspace/workspace-window.scss b/packages/esm-patient-chart-app/src/workspace/workspace-window.scss
index 2babc8da3f..d3747b43f1 100644
--- a/packages/esm-patient-chart-app/src/workspace/workspace-window.scss
+++ b/packages/esm-patient-chart-app/src/workspace/workspace-window.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root.scss";
 
 $container-width: calc(100% - 3rem);
diff --git a/packages/esm-patient-common-lib/src/cards/card-header.scss b/packages/esm-patient-common-lib/src/cards/card-header.scss
index 19403826e6..debadba9a8 100644
--- a/packages/esm-patient-common-lib/src/cards/card-header.scss
+++ b/packages/esm-patient-common-lib/src/cards/card-header.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .desktopHeader, .tabletHeader {
   display: flex;
@@ -18,7 +18,7 @@
   }
 }
 
-.desktopHeader {  
+.desktopHeader {
   height: 3rem;
   h4 {
     @include type.type-style('heading-compact-02');
@@ -26,7 +26,7 @@
   }
 }
 
-.tabletHeader {  
+.tabletHeader {
   height: 4.5rem;
   h4 {
     @include type.type-style('heading-03');
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 cb0a37e531..4ea1d68ef0 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
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .action {
   margin-bottom: spacing.$spacing-03;
@@ -31,7 +31,7 @@
   text-align: left;
   text-transform: capitalize;
   margin-bottom: spacing.$spacing-05;
-  
+
   h4:after {
     content: "";
     display: block;
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 5b4900bb57..8b09c54640 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
@@ -1,10 +1,10 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .errorMessage {
   @include type.type-style("heading-compact-02");
-  
+
   margin-top: 2.25rem;
   margin-bottom: spacing.$spacing-03;
 }
diff --git a/packages/esm-patient-common-lib/src/pagination/pagination.scss b/packages/esm-patient-common-lib/src/pagination/pagination.scss
index 86bc7b607b..63aac73fd0 100644
--- a/packages/esm-patient-common-lib/src/pagination/pagination.scss
+++ b/packages/esm-patient-common-lib/src/pagination/pagination.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .bodyShort01 {
   @include type.type-style("body-compact-01");
@@ -30,8 +30,8 @@
 
 .tablet :global(.cds--pagination) {
   min-height: 0rem;
-  height: 3rem; 
-  width: auto;   
+  height: 3rem;
+  width: auto;
   border: none;
 
   & :global(.cds--select-input), :global(.cds--btn), :global(.cds--pagination__right) {
diff --git a/packages/esm-patient-common-lib/src/root.scss b/packages/esm-patient-common-lib/src/root.scss
index 9b97a08a32..56a90ea355 100644
--- a/packages/esm-patient-common-lib/src/root.scss
+++ b/packages/esm-patient-common-lib/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars'; 
+@import '@openmrs/esm-styleguide/src/vars';
 
 // Why do we have this copied everywhere? Can't we just import it from the styleguide?
 
@@ -64,6 +64,6 @@
   white-space: nowrap;
 }
 
-.text02 { 
+.text02 {
   color: $text-02;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.scss b/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.scss
index 1bfc44bc4e..07eadfaaf1 100644
--- a/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.scss
+++ b/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin-top: spacing.$spacing-02;
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-form.scss b/packages/esm-patient-conditions-app/src/conditions/conditions-form.scss
index c5fdf82840..a3006cdc42 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-form.scss
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-form.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .condition {
   padding: 1rem 0.75rem;
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
index 59c677cb1a..e1d0704bfa 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
@@ -17,7 +17,7 @@ import {
 } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { useFormContext, Controller } from 'react-hook-form';
-import { showSnackbar, useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { showSnackbar, useDebounce, useLayoutType, useSession, ResponsiveWrapper } from '@openmrs/esm-framework';
 import {
   type CodedCondition,
   type ConditionDataTableRow,
@@ -211,7 +211,7 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
                 name="search"
                 control={control}
                 render={({ field: { onChange, value, onBlur } }) => (
-                  <ResponsiveWrapper isTablet={isTablet}>
+                  <ResponsiveWrapper>
                     <Search
                       autoFocus
                       ref={searchInputRef}
@@ -283,7 +283,7 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
             name="onsetDateTime"
             control={control}
             render={({ field: { onChange, onBlur, value } }) => (
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <DatePicker
                   id="onsetDate"
                   datePickerType="single"
@@ -324,7 +324,7 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
             name="endDate"
             control={control}
             render={({ field: { onBlur, onChange, value } }) => (
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <DatePicker
                   id="endDate"
                   datePickerType="single"
@@ -347,8 +347,4 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default ConditionsWidget;
diff --git a/packages/esm-patient-flags-app/src/flags/flags-list.component.tsx b/packages/esm-patient-flags-app/src/flags/flags-list.component.tsx
index eff174ee71..95b4ecf42b 100644
--- a/packages/esm-patient-flags-app/src/flags/flags-list.component.tsx
+++ b/packages/esm-patient-flags-app/src/flags/flags-list.component.tsx
@@ -3,9 +3,9 @@ import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
 import orderBy from 'lodash-es/orderBy';
 import { useTranslation } from 'react-i18next';
-import { Button, ButtonSet, Dropdown, Form, InlineLoading, Layer, Search, Tile, Toggle, Stack } from '@carbon/react';
+import { Button, ButtonSet, Dropdown, Form, InlineLoading, Search, Tile, Toggle, Stack } from '@carbon/react';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
-import { useLayoutType, showSnackbar, parseDate, formatDate } from '@openmrs/esm-framework';
+import { useLayoutType, showSnackbar, parseDate, formatDate, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { usePatientFlags, enablePatientFlag, disablePatientFlag } from './hooks/usePatientFlags';
 import { getFlagType } from './utils';
 import styles from './flags-list.scss';
@@ -110,7 +110,7 @@ const FlagsList: React.FC<DefaultWorkspaceProps> = ({
     <Form className={styles.formWrapper}>
       {/* The <div> below is required to maintain the page layout styling */}
       <div>
-        <ResponsiveWrapper isTablet={isTablet}>
+        <ResponsiveWrapper>
           <Search
             labelText={t('searchForAFlag', 'Search for a flag')}
             placeholder={t('searchForAFlag', 'Search for a flag')}
@@ -223,8 +223,4 @@ const FlagsList: React.FC<DefaultWorkspaceProps> = ({
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default FlagsList;
diff --git a/packages/esm-patient-forms-app/src/forms/empty-form.scss b/packages/esm-patient-forms-app/src/forms/empty-form.scss
index 251e129ad7..c8ed58f620 100644
--- a/packages/esm-patient-forms-app/src/forms/empty-form.scss
+++ b/packages/esm-patient-forms-app/src/forms/empty-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root.scss";
 
 .tile {
@@ -39,7 +39,7 @@
   text-align: left;
   text-transform: capitalize;
   margin-bottom: spacing.$spacing-05;
-  
+
   h4:after {
     content: "";
     display: block;
diff --git a/packages/esm-patient-forms-app/src/forms/form-view.scss b/packages/esm-patient-forms-app/src/forms/form-view.scss
index c91044c6a0..69cb49868a 100644
--- a/packages/esm-patient-forms-app/src/forms/form-view.scss
+++ b/packages/esm-patient-forms-app/src/forms/form-view.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
 .heading {
diff --git a/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx b/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx
index 464a2fd291..36389b8810 100644
--- a/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx
+++ b/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import { Layer, Tile } from '@carbon/react';
-import { useConfig, useConnectivity, usePatient } from '@openmrs/esm-framework';
+import { Tile } from '@carbon/react';
+import { useConfig, useConnectivity, usePatient, ResponsiveWrapper } from '@openmrs/esm-framework';
 import {
   type DefaultWorkspaceProps,
   EmptyDataIllustration,
@@ -22,10 +22,6 @@ const FormsDashboard: React.FC<DefaultWorkspaceProps> = () => {
   const { data: forms, error, mutateForms } = useForms(patientUuid, undefined, undefined, !isOnline, config.orderBy);
   const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
 
-  function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-    return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-  }
-
   const handleFormOpen = useCallback(
     (formUuid: string, encounterUuid: string, formName: string) => {
       launchFormEntryOrHtmlForms(
@@ -55,7 +51,7 @@ const FormsDashboard: React.FC<DefaultWorkspaceProps> = () => {
 
   if (forms?.length === 0) {
     return (
-      <ResponsiveWrapper isTablet>
+      <ResponsiveWrapper>
         <Tile className={styles.emptyState}>
           <EmptyDataIllustration />
           <p className={styles.emptyStateContent}>{t('noFormsToDisplay', 'There are no forms to display.')}</p>
diff --git a/packages/esm-patient-forms-app/src/forms/forms-dashboard.scss b/packages/esm-patient-forms-app/src/forms/forms-dashboard.scss
index c3dd9aa42a..2a38458ac5 100644
--- a/packages/esm-patient-forms-app/src/forms/forms-dashboard.scss
+++ b/packages/esm-patient-forms-app/src/forms/forms-dashboard.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .emptyState {
   text-align: center;
diff --git a/packages/esm-patient-forms-app/src/forms/forms-list.component.tsx b/packages/esm-patient-forms-app/src/forms/forms-list.component.tsx
index a27befc7cc..2188463e90 100644
--- a/packages/esm-patient-forms-app/src/forms/forms-list.component.tsx
+++ b/packages/esm-patient-forms-app/src/forms/forms-list.component.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import debounce from 'lodash-es/debounce';
 import fuzzy from 'fuzzy';
-import { DataTableSkeleton, Layer, Tile } from '@carbon/react';
-import { formatDatetime, useLayoutType } from '@openmrs/esm-framework';
+import { DataTableSkeleton, Tile } from '@carbon/react';
+import { formatDatetime, useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
 import FormsTable from './forms-table.component';
 import styles from './forms-list.scss';
 import type { CompletedFormInfo } from '../types';
@@ -15,10 +15,6 @@ export type FormsListProps = {
   handleFormOpen: (formUuid: string, encounterUuid: string, formName: string) => void;
 };
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 /*
  * For the benefit of our automated translations:
  * t('forms', 'Forms')
@@ -88,7 +84,7 @@ const FormsList: React.FC<FormsListProps> = ({ completedForms, error, sectionNam
 
   if (sectionName === 'forms') {
     return (
-      <ResponsiveWrapper isTablet>
+      <ResponsiveWrapper>
         <FormsTable
           tableHeaders={tableHeaders}
           tableRows={tableRows}
@@ -100,7 +96,7 @@ const FormsList: React.FC<FormsListProps> = ({ completedForms, error, sectionNam
     );
   } else {
     return (
-      <ResponsiveWrapper isTablet>
+      <ResponsiveWrapper>
         <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
           <h4>{t(sectionName)}</h4>
         </div>
diff --git a/packages/esm-patient-forms-app/src/forms/forms-list.scss b/packages/esm-patient-forms-app/src/forms/forms-list.scss
index 45be2af708..2ee438bf9c 100644
--- a/packages/esm-patient-forms-app/src/forms/forms-list.scss
+++ b/packages/esm-patient-forms-app/src/forms/forms-list.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .emptyState {
   text-align: center;
@@ -34,7 +34,7 @@
   margin-top: spacing.$spacing-05;
   margin-left: spacing.$spacing-03;
   margin-bottom: spacing.$spacing-05;
-  
+
   h4:after {
     content: "";
     display: block;
diff --git a/packages/esm-patient-forms-app/src/forms/forms-table.scss b/packages/esm-patient-forms-app/src/forms/forms-table.scss
index 82f24c67f9..4a78ea6baf 100644
--- a/packages/esm-patient-forms-app/src/forms/forms-table.scss
+++ b/packages/esm-patient-forms-app/src/forms/forms-table.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   padding: 2rem;
diff --git a/packages/esm-patient-forms-app/src/forms/forms.scss b/packages/esm-patient-forms-app/src/forms/forms.scss
index 0d96250300..d4ef2418f3 100644
--- a/packages/esm-patient-forms-app/src/forms/forms.scss
+++ b/packages/esm-patient-forms-app/src/forms/forms.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .bodyShort01 {
   @include type.type-style("body-compact-01");
diff --git a/packages/esm-patient-forms-app/src/offline-forms/offline-forms-overview-card.scss b/packages/esm-patient-forms-app/src/offline-forms/offline-forms-overview-card.scss
index bb2cbb2718..9a0b61f30d 100644
--- a/packages/esm-patient-forms-app/src/offline-forms/offline-forms-overview-card.scss
+++ b/packages/esm-patient-forms-app/src/offline-forms/offline-forms-overview-card.scss
@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root.scss";
 
 .overviewCard {
@@ -10,7 +10,7 @@
     @extend .productiveHeading01;
     color: $text-02;
   }
-  
+
   .headerContainer {
     display: flex;
     justify-content: space-between;
diff --git a/packages/esm-patient-forms-app/src/offline-forms/offline-forms.styles.scss b/packages/esm-patient-forms-app/src/offline-forms/offline-forms.styles.scss
index b079286cc6..ee7fa4e35f 100644
--- a/packages/esm-patient-forms-app/src/offline-forms/offline-forms.styles.scss
+++ b/packages/esm-patient-forms-app/src/offline-forms/offline-forms.styles.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root.scss";
 
 .pageHeaderContainer {
diff --git a/packages/esm-patient-forms-app/src/root.scss b/packages/esm-patient-forms-app/src/root.scss
index 3bd6f8071d..a164b9176c 100644
--- a/packages/esm-patient-forms-app/src/root.scss
+++ b/packages/esm-patient-forms-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-detailed-summary.scss b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-detailed-summary.scss
index 5734cd2e3e..d2a9413e4f 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-detailed-summary.scss
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-detailed-summary.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.component.tsx b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.component.tsx
index 069b24b964..e42226967e 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.component.tsx
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.component.tsx
@@ -8,7 +8,6 @@ import {
   Dropdown,
   Form,
   InlineNotification,
-  Layer,
   SelectItem,
   Stack,
   TextInput,
@@ -23,6 +22,7 @@ import {
   toOmrsIsoString,
   toDateObjectStrict,
   showSnackbar,
+  ResponsiveWrapper,
 } from '@openmrs/esm-framework';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -227,7 +227,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
         <Stack gap={1} className={styles.container}>
           <section className={` ${styles.row}`}>
             <div className={styles.dateTimeSection}>
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <Controller
                   name="vaccinationDate"
                   control={control}
@@ -254,7 +254,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
                   )}
                 />
               </ResponsiveWrapper>
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <Controller
                   name="vaccinationTime"
                   control={control}
@@ -290,7 +290,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
             </div>
           </section>
           <section>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="vaccineUuid"
                 control={control}
@@ -329,7 +329,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
           )}
           {vaccineUuid && (
             <section>
-              <ResponsiveWrapper isTablet={isTablet}>
+              <ResponsiveWrapper>
                 <DoseInput
                   vaccine={vaccineUuid}
                   sequences={immunizationsConfig.sequenceDefinitions}
@@ -339,7 +339,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
             </section>
           )}
           <section>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="manufacturer"
                 control={control}
@@ -358,7 +358,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
             </ResponsiveWrapper>
           </section>
           <section>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="lotNumber"
                 control={control}
@@ -377,7 +377,7 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
             </ResponsiveWrapper>
           </section>
           <section>
-            <ResponsiveWrapper isTablet={isTablet}>
+            <ResponsiveWrapper>
               <Controller
                 name="expirationDate"
                 control={control}
@@ -418,8 +418,4 @@ const ImmunizationsForm: React.FC<DefaultWorkspaceProps> = ({
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: ResponsiveWrapperProps) {
-  return isTablet ? <Layer className={styles.layer}>{children} </Layer> : <Fragment>{children}</Fragment>;
-}
-
 export default ImmunizationsForm;
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.scss b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.scss
index 73b8b93ef7..81ad72c340 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.scss
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   margin: spacing.$spacing-05;
@@ -42,4 +42,4 @@
   .dateTimeSection {
     flex-direction: column;
   }
-}
\ No newline at end of file
+}
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 7b8b87dfe2..9927c7dfe8 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-overview.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss
index a73579d6c5..12b65f2cf6 100644
--- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss
+++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root";
 
 .container {
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss
index 4d8adade1e..5e06472ae3 100644
--- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss
+++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root";
 
 
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.tsx
index ee14f1ec82..94814240af 100644
--- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.tsx
+++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button, ButtonSkeleton, Layer, Search, SkeletonText, Tile } from '@carbon/react';
+import { Button, ButtonSkeleton, Search, SkeletonText, Tile } from '@carbon/react';
 import { ArrowRight, ShoppingCartArrowDown, ShoppingCartArrowUp } from '@carbon/react/icons';
-import { useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { useDebounce, useLayoutType, useSession, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { closeWorkspace, launchPatientWorkspace, useOrderBasket } from '@openmrs/esm-patient-common-lib';
 import { type LabOrderBasketItem, prepLabOrderPostData } from '../api';
 import { type TestType, useTestTypes } from './useTestTypes';
@@ -32,7 +32,7 @@ export function TestTypeSearch({ openLabForm }: TestTypeSearchProps) {
 
   return (
     <>
-      <ResponsiveWrapper isTablet={isTablet}>
+      <ResponsiveWrapper>
         <Search
           autoFocus
           size="lg"
@@ -52,10 +52,6 @@ export function TestTypeSearch({ openLabForm }: TestTypeSearchProps) {
   );
 }
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 interface TestTypeSearchResultsProps {
   searchTerm: string;
   openOrderForm: (searchResult: LabOrderBasketItem) => void;
diff --git a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-item-tile.scss b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-item-tile.scss
index fa85a719d0..3029133fb6 100644
--- a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-item-tile.scss
+++ b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-item-tile.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root";
 
 .clickableTileDesktop {
diff --git a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss
index 36c9d10a54..880701e254 100644
--- a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss
+++ b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../../root";
 
 .desktopTile {
diff --git a/packages/esm-patient-labs-app/src/root.scss b/packages/esm-patient-labs-app/src/root.scss
index 60f4487ed7..18362ef2d2 100644
--- a/packages/esm-patient-labs-app/src/root.scss
+++ b/packages/esm-patient-labs-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
diff --git a/packages/esm-patient-labs-app/src/test-results/filter/filter-set.styles.scss b/packages/esm-patient-labs-app/src/test-results/filter/filter-set.styles.scss
index 08ef02205e..0ac249b8b1 100644
--- a/packages/esm-patient-labs-app/src/test-results/filter/filter-set.styles.scss
+++ b/packages/esm-patient-labs-app/src/test-results/filter/filter-set.styles.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .stickyFilterSet {
   position: sticky;
diff --git a/packages/esm-patient-labs-app/src/test-results/grouped-timeline/grouped-timeline.styles.scss b/packages/esm-patient-labs-app/src/test-results/grouped-timeline/grouped-timeline.styles.scss
index b17d6180f1..e5e9a37884 100644
--- a/packages/esm-patient-labs-app/src/test-results/grouped-timeline/grouped-timeline.styles.scss
+++ b/packages/esm-patient-labs-app/src/test-results/grouped-timeline/grouped-timeline.styles.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .timelineHeader {
   position: sticky;
@@ -147,7 +147,7 @@
 
   div {
     @include type.type-style('heading-compact-01');
-    
+
     left: 0;
     width: 100%;
     word-wrap: normal;
@@ -178,7 +178,7 @@
 .low {
   p {
     @include type.type-style('heading-compact-01');
-    
+
   }
 }
 
diff --git a/packages/esm-patient-labs-app/src/test-results/overview/common-datatable.scss b/packages/esm-patient-labs-app/src/test-results/overview/common-datatable.scss
index f873d1afd0..9ceaca65d8 100644
--- a/packages/esm-patient-labs-app/src/test-results/overview/common-datatable.scss
+++ b/packages/esm-patient-labs-app/src/test-results/overview/common-datatable.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .tableContainer :global(.cds--data-table-header) {
   padding: 0.75rem 1rem 0.25rem 1rem;
@@ -46,7 +46,7 @@ tr {
       content: " ↓↓";
     }
   }
-  
+
   &.critically-high {
     td:nth-child(2)::after {
       content: " ↑↑";
@@ -119,4 +119,4 @@ tr {
 
 .high::after {
   content: " ↑";
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-labs-app/src/test-results/overview/common-overview.scss b/packages/esm-patient-labs-app/src/test-results/overview/common-overview.scss
index 1237dff37a..bb70c5267e 100644
--- a/packages/esm-patient-labs-app/src/test-results/overview/common-overview.scss
+++ b/packages/esm-patient-labs-app/src/test-results/overview/common-overview.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .card {
   border: 1px solid $ui-03;
@@ -58,4 +58,4 @@
   @include type.type-style('label-01');
   color: $labeldropdown;
   margin-right: 0.25rem;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-labs-app/src/test-results/overview/recent-overview.scss b/packages/esm-patient-labs-app/src/test-results/overview/recent-overview.scss
index c3638b2eea..c9f993c64e 100644
--- a/packages/esm-patient-labs-app/src/test-results/overview/recent-overview.scss
+++ b/packages/esm-patient-labs-app/src/test-results/overview/recent-overview.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
@@ -22,7 +22,7 @@
   }
 }
 
-.desktopHeader {  
+.desktopHeader {
   height: 3rem;
   h4 {
     @include type.type-style('heading-compact-02');
@@ -30,7 +30,7 @@
   }
 }
 
-.tabletHeader {  
+.tabletHeader {
   height: 4.5rem;
   h4 {
     @include type.type-style('heading-03');
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
index 89088ee645..3ef5212f1c 100644
--- a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
+++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .grid {
   width: fit-content;
@@ -133,7 +133,7 @@
 .low {
   p {
     @include type.type-style('heading-compact-01');
-    
+
   }
 }
 
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-view/panel-view.scss b/packages/esm-patient-labs-app/src/test-results/panel-view/panel-view.scss
index c99f8399b6..079726be1c 100644
--- a/packages/esm-patient-labs-app/src/test-results/panel-view/panel-view.scss
+++ b/packages/esm-patient-labs-app/src/test-results/panel-view/panel-view.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/grid/_flexbox';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import '../results-viewer/results-viewer.styles.scss';
 
 .panelViewHeader {
@@ -40,4 +40,4 @@
 
 .tabletSearch {
   margin: - spacing.$spacing-05
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-view/result-panel.scss b/packages/esm-patient-labs-app/src/test-results/panel-view/result-panel.scss
index 049dfd7f0d..30e9a5213b 100644
--- a/packages/esm-patient-labs-app/src/test-results/panel-view/result-panel.scss
+++ b/packages/esm-patient-labs-app/src/test-results/panel-view/result-panel.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/grid/_flexbox';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .labSetPanel {
   width: 100%;
diff --git a/packages/esm-patient-labs-app/src/test-results/print-modal/print-modal.extension.tsx b/packages/esm-patient-labs-app/src/test-results/print-modal/print-modal.extension.tsx
index d2c2f1a22d..ae44c89180 100644
--- a/packages/esm-patient-labs-app/src/test-results/print-modal/print-modal.extension.tsx
+++ b/packages/esm-patient-labs-app/src/test-results/print-modal/print-modal.extension.tsx
@@ -6,7 +6,6 @@ import {
   DataTable,
   DatePicker,
   DatePickerInput,
-  Layer,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -19,7 +18,15 @@ import {
   TableRow,
 } from '@carbon/react';
 import { useReactToPrint } from 'react-to-print';
-import { age, formatDate, useConfig, useLayoutType, usePatient, useSession } from '@openmrs/esm-framework';
+import {
+  age,
+  formatDate,
+  useConfig,
+  useLayoutType,
+  usePatient,
+  useSession,
+  ResponsiveWrapper,
+} from '@openmrs/esm-framework';
 import usePanelData from '../panel-view/usePanelData';
 import styles from './print-modal.scss';
 
@@ -94,7 +101,7 @@ function PrintModal({ patientUuid, closeDialog }) {
     <div>
       <ModalHeader closeModal={closeDialog} title={t('printTestResults', 'Print test results')} />
       <ModalBody className={styles.modalBody}>
-        <ResponsiveWrapper isTablet={isTablet}>
+        <ResponsiveWrapper>
           <DatePicker
             className={styles.datePickers}
             datePickerType="range"
@@ -202,10 +209,6 @@ function PrintModal({ patientUuid, closeDialog }) {
   );
 }
 
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
-
 export default PrintModal;
 
 const formatPanelForDisplay = (panel) => {
diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.styles.scss b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.styles.scss
index 6f959855ec..022026fa64 100644
--- a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.styles.scss
+++ b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.styles.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/grid/_flexbox';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .resultsContainer {
   padding: 0;
@@ -66,7 +66,7 @@
   min-width: 2.5rem;
 }
 
-.leftHeaderActions > :global(.cds--content-switcher), 
+.leftHeaderActions > :global(.cds--content-switcher),
 .viewOptsContentSwitcherContainer :global(.cds--content-switcher) {
   display: grid;
   grid-template-columns: 1fr 1fr;
diff --git a/packages/esm-patient-labs-app/src/test-results/tablet-overlay/tablet-overlay.scss b/packages/esm-patient-labs-app/src/test-results/tablet-overlay/tablet-overlay.scss
index 588f485e46..8117b067f3 100644
--- a/packages/esm-patient-labs-app/src/test-results/tablet-overlay/tablet-overlay.scss
+++ b/packages/esm-patient-labs-app/src/test-results/tablet-overlay/tablet-overlay.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .tabletOverlay {
   position: fixed;
diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
index f819a238ee..80c74fb7fa 100644
--- a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
+++ b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
@@ -1,13 +1,13 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @import "~@carbon/charts/styles.css";
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   :global(.cds--cc--area path.area) {
     stroke: none;
     fill: #a7f0ba;
-  }  
+  }
 }
 
 .ui-shell-header-modal-bar-default {
@@ -62,7 +62,7 @@
     svg {
       order: 1;
       margin-right: 0.5rem;
-    }  
+    }
 
     span {
       order: 2;
diff --git a/packages/esm-patient-labs-app/src/test-results/ui-elements/resetFiltersEmptyState/index.scss b/packages/esm-patient-labs-app/src/test-results/ui-elements/resetFiltersEmptyState/index.scss
index 8fcb64b5ca..8ee6b001fb 100644
--- a/packages/esm-patient-labs-app/src/test-results/ui-elements/resetFiltersEmptyState/index.scss
+++ b/packages/esm-patient-labs-app/src/test-results/ui-elements/resetFiltersEmptyState/index.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .action {
   @include type.type-style("body-long-01");
@@ -25,4 +25,4 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx
index a9041d419d..74c488e01d 100644
--- a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx
+++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Layer, Search } from '@carbon/react';
-import { useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { Search } from '@carbon/react';
+import { useConfig, useDebounce, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
 import { type DrugOrderBasketItem } from '../../types';
 import OrderBasketSearchResults from './order-basket-search-results.component';
 import styles from './order-basket-search.scss';
-import { type ConfigObject } from '../../config-schema';
 
 export interface DrugSearchProps {
   openOrderForm: (searchResult: DrugOrderBasketItem) => void;
@@ -13,7 +13,6 @@ export interface DrugSearchProps {
 
 export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
   const [searchTerm, setSearchTerm] = useState('');
   const { debounceDelayInMs } = useConfig<ConfigObject>();
   const debouncedSearchTerm = useDebounce(searchTerm, debounceDelayInMs ?? 300);
@@ -24,13 +23,12 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
     searchInputRef.current?.focus();
   };
 
-  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) =>
     setSearchTerm(event.target.value ?? '');
-  };
 
   return (
     <div className={styles.searchPopupContainer}>
-      <ResponsiveWrapper isTablet={isTablet}>
+      <ResponsiveWrapper>
         <Search
           autoFocus
           size="lg"
@@ -49,7 +47,3 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
     </div>
   );
 }
-
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
diff --git a/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.scss b/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.scss
index 15f9aac0d5..61065b1e74 100644
--- a/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.scss
+++ b/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root";
 
 .desktopTile {
diff --git a/packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.scss b/packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.scss
index 74d787be5b..1f0dfc6bc9 100644
--- a/packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.scss
+++ b/packages/esm-patient-medications-app/src/drug-order-basket-panel/order-basket-item-tile.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 @import "../root";
 
 .clickableTileDesktop {
diff --git a/packages/esm-patient-medications-app/src/root.scss b/packages/esm-patient-medications-app/src/root.scss
index 60f4487ed7..18362ef2d2 100644
--- a/packages/esm-patient-medications-app/src/root.scss
+++ b/packages/esm-patient-medications-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
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 34b317af5f..7a31ef5ef9 100644
--- a/packages/esm-patient-notes-app/src/notes/notes-overview.scss
+++ b/packages/esm-patient-notes-app/src/notes/notes-overview.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
@@ -20,7 +20,7 @@
 
 .copy {
   @include type.type-style('body-01');
-  
+
   display: flex;
   flex-direction: column;
 }
diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx b/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx
index ffa1041ac1..daba55c57f 100644
--- a/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx
+++ b/packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx
@@ -13,7 +13,6 @@ import {
   DatePickerInput,
   Form,
   FormGroup,
-  Layer,
   Row,
   Search,
   SkeletonText,
@@ -21,6 +20,7 @@ import {
   Tag,
   TextArea,
   Tile,
+  Layer,
 } from '@carbon/react';
 import { Add, Edit, WarningFilled } from '@carbon/react/icons';
 import {
@@ -33,6 +33,7 @@ import {
   useLayoutType,
   useSession,
   createAttachment,
+  ResponsiveWrapper,
 } from '@openmrs/esm-framework';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../config-schema';
@@ -338,7 +339,7 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({
               name="noteDate"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <ResponsiveWrapper isTablet={isTablet}>
+                <ResponsiveWrapper>
                   <DatePicker
                     dateFormat="d/m/Y"
                     datePickerType="single"
@@ -518,7 +519,7 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({
                       </ul>
                     );
                   return (
-                    <ResponsiveWrapper isTablet={isTablet}>
+                    <ResponsiveWrapper>
                       <Tile className={styles.emptyResults}>
                         <span>
                           {t('noMatchingDiagnoses', 'No diagnoses found matching')}{' '}
@@ -541,7 +542,7 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({
               name="clinicalNote"
               control={control}
               render={({ field: { onChange, onBlur, value } }) => (
-                <ResponsiveWrapper isTablet={isTablet}>
+                <ResponsiveWrapper>
                   <TextArea
                     id="additionalNote"
                     rows={rows}
@@ -638,7 +639,7 @@ function DiagnosisSearch({ name, control, labelText, placeholder, handleSearch,
       control={control}
       render={({ field: { value, onChange, onBlur }, fieldState }) => (
         <>
-          <ResponsiveWrapper isTablet={isTablet}>
+          <ResponsiveWrapper>
             <Search
               ref={inputRef}
               size={isTablet ? 'lg' : 'md'}
@@ -661,7 +662,3 @@ function DiagnosisSearch({ name, control, labelText, placeholder, handleSearch,
     />
   );
 }
-
-function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
-  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
-}
diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss b/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss
index 4a0466fe57..ededd9074c 100644
--- a/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss
+++ b/packages/esm-patient-notes-app/src/notes/visit-notes-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .heading {
   @include type.type-style("heading-03");
@@ -136,7 +136,7 @@
   .form {
     height: var(--tablet-workspace-window-height);
   }
-  
+
   .row {
     display: flex;
     gap: 4rem;
diff --git a/packages/esm-patient-orders-app/src/root.scss b/packages/esm-patient-orders-app/src/root.scss
index 3233ce149c..c5f60f3d09 100644
--- a/packages/esm-patient-orders-app/src/root.scss
+++ b/packages/esm-patient-orders-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars'; 
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
@@ -62,6 +62,6 @@
   white-space: nowrap;
 }
 
-.text02 { 
+.text02 {
   color: $text-02;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.scss b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.scss
index 01af04be3b..c5512bad7a 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.scss
+++ b/packages/esm-patient-programs-app/src/programs/programs-detailed-summary.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.scss b/packages/esm-patient-programs-app/src/programs/programs-form.scss
index ece22f8008..741a2d0f27 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.scss
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .loading {
   margin-left: 1rem;
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 01af04be3b..c5512bad7a 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-overview.scss
+++ b/packages/esm-patient-programs-app/src/programs/programs-overview.scss
@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-vitals-app/src/biometrics/biometrics-base.scss b/packages/esm-patient-vitals-app/src/biometrics/biometrics-base.scss
index 6121e9354e..d35bd3205f 100644
--- a/packages/esm-patient-vitals-app/src/biometrics/biometrics-base.scss
+++ b/packages/esm-patient-vitals-app/src/biometrics/biometrics-base.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .widgetCard {
   border: 1px solid $ui-03;
diff --git a/packages/esm-patient-vitals-app/src/biometrics/biometrics-chart.scss b/packages/esm-patient-vitals-app/src/biometrics/biometrics-chart.scss
index f49c578664..0c1f84b98c 100644
--- a/packages/esm-patient-vitals-app/src/biometrics/biometrics-chart.scss
+++ b/packages/esm-patient-vitals-app/src/biometrics/biometrics-chart.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label01 {
   @include type.type-style("label-01");
diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss
index 4f88f1ba99..d3788ad54b 100644
--- a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss
+++ b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header-item.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .container {
   display: flex;
diff --git a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss
index 7ab79f851b..b8e1034aee 100644
--- a/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss
+++ b/packages/esm-patient-vitals-app/src/vitals-and-biometrics-header/vitals-header.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .vitals-header {
   display: flex;
diff --git a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss
index a5a35f8c64..426e3dcb65 100644
--- a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss
+++ b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss
@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading03 {
   @include type.type-style("heading-03");
diff --git a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx
index 55a35eeb77..c98df16649 100644
--- a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment, useId, useState } from 'react';
 import classNames from 'classnames';
 import { type Control, Controller } from 'react-hook-form';
-import { FormLabel, Layer, NumberInput, TextArea } from '@carbon/react';
+import { FormLabel, NumberInput, TextArea } from '@carbon/react';
 import { Warning } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { useLayoutType } from '@openmrs/esm-framework';
+import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { generatePlaceholder } from '../common';
 import { type VitalsBiometricsFormData } from './vitals-biometrics-form.component';
 import styles from './vitals-biometrics-input.scss';
@@ -133,7 +133,7 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
 
                 return (
                   <Fragment key={fieldProperty.id}>
-                    <ResponsiveWrapper isTablet={isTablet}>
+                    <ResponsiveWrapper>
                       <Controller
                         name={fieldProperty.id}
                         control={control}
@@ -173,7 +173,7 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
 
               if (fieldProperty.type === 'textarea') {
                 return (
-                  <ResponsiveWrapper key={fieldProperty.id} isTablet={isTablet}>
+                  <ResponsiveWrapper key={fieldProperty.id}>
                     <Controller
                       name={fieldProperty.id}
                       control={control}
@@ -217,8 +217,4 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
   );
 };
 
-function ResponsiveWrapper({ children, isTablet }: ResponsiveWrapperProps) {
-  return isTablet ? <Layer className={styles.layer}>{children} </Layer> : <Fragment>{children}</Fragment>;
-}
-
 export default VitalsAndBiometricsInput;
diff --git a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.scss b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.scss
index dd0c4ec903..7fca085bd7 100644
--- a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.scss
+++ b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label01 {
   @include type.type-style("label-01");
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.scss
index d6c2ad969a..1063c5617c 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label01 {
   @include type.type-style("label-01");
diff --git a/packages/esm-patient-vitals-app/src/weight-tile/weight-tile.scss b/packages/esm-patient-vitals-app/src/weight-tile/weight-tile.scss
index 43cb083645..43e4c23617 100644
--- a/packages/esm-patient-vitals-app/src/weight-tile/weight-tile.scss
+++ b/packages/esm-patient-vitals-app/src/weight-tile/weight-tile.scss
@@ -1,18 +1,17 @@
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@import '@openmrs/esm-styleguide/src/vars';
 
 .label {
-	@include type.type-style('label-01');
-	color: $text-02;
+  @include type.type-style('label-01');
+  color: $text-02;
 }
 
 .content {
-	@include type.type-style('body-compact-01');
-	color: $text-02;
-	margin-top: 5px;
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  margin-top: 5px;
 }
 
 .value {
-	@include type.type-style('body-compact-01');
-	
-}
\ No newline at end of file
+  @include type.type-style('body-compact-01');
+}