diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
index 2ee5d6a58d8..b9ab05a3814 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
@@ -1191,6 +1191,6 @@ tbody {
   color: #C5C5C5 !important;
 }
 
-.back-button-xlsxpreview{
+.back-button-xlsxpreview {
   width: 170px;
 }
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js
index 7c04a1b4084..088efd48620 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js
@@ -358,7 +358,7 @@ const FormulaConfigWrapper = ({ onSelect, props: customProps }) => {
       <FormulaContext.Provider
         value={{ formulaConfigValues, handleFormulaChange, setFormulaConfigValues, deletedFormulas, setDeletedFormulas, assumptionsInPlan }}
       >
-        <div style={{ display: "flex", gap: "1.5rem" }}>
+        <div className="container-full">
           <div className="card-container">
             <Card className="card-header-timeline">
               <TextBlock subHeader={t("FORMULA_CONFIGURATION")} subHeaderClasName={"stepper-subheader"} wrapperClassName={"stepper-wrapper"} />
@@ -373,7 +373,7 @@ const FormulaConfigWrapper = ({ onSelect, props: customProps }) => {
             </Card>
           </div>
 
-          <div style={{ width: "100%" }}>
+          <div className="card-container" style={{ width: "80%" }}>
             <FormulaConfiguration
               category={ruleConfigurationCategories[formulaInternalKey - 1]?.category}
               formulas={filteredFormulas?.filter((item) => !deletedFormulas?.includes(item.output))}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js
index 794a6a369fd..b3fb823d8d0 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment, useContext, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Card, Header, DeleteIconv2, LabelFieldPair, AddIcon, Button, CardText } from "@egovernments/digit-ui-react-components";
-import { Dropdown, CheckBox, PopUp } from "@egovernments/digit-ui-components";
+import { Header, DeleteIconv2, LabelFieldPair, AddIcon, CardText } from "@egovernments/digit-ui-react-components";
+import { Dropdown, CheckBox, PopUp, Card, Button, Divider } from "@egovernments/digit-ui-components";
 import { PRIMARY_COLOR } from "../utils/utilities";
 import { useFormulaContext } from "./FormulaConfigWrapper";
 import _ from "lodash";
@@ -28,7 +28,7 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
     setFormulas(initialFormulas);
   }, [initialFormulas]);
 
-  const handleDeleteClick = (index,formula) => {
+  const handleDeleteClick = (index, formula) => {
     setFormulaToDelete(formula);
     setShowPopUp(true);
   };
@@ -43,7 +43,7 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
 
       //matching output for deleting a formula
       const updatedFormulas = formulas.filter(operation => {
-        if(operation.output === formulaToDelete.output){
+        if (operation.output === formulaToDelete.output) {
           return false
         }
         return true
@@ -70,27 +70,27 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
         //now basically check whether this is getting used in any of the input or assumptionValue
         //if yes clear that
         const updatedFormulaValues = prevValues?.map(formula => {
-          if(formula.input === deletedFormulaOutput && formula.assumptionValue === deletedFormulaOutput){
+          if (formula.input === deletedFormulaOutput && formula.assumptionValue === deletedFormulaOutput) {
             const updatedFormulaObj = {
               ...formula,
-              input:"",
-              assumptionValue:""
+              input: "",
+              assumptionValue: ""
             }
             return updatedFormulaObj
           }
-          else if(formula.input === deletedFormulaOutput  ){
+          else if (formula.input === deletedFormulaOutput) {
             const updatedFormulaObj = {
               ...formula,
-              input:""
+              input: ""
             }
             return updatedFormulaObj
-          }else if(formula.assumptionValue === deletedFormulaOutput){
+          } else if (formula.assumptionValue === deletedFormulaOutput) {
             const updatedFormulaObj = {
               ...formula,
-              assumptionValue:""
+              assumptionValue: ""
             }
             return updatedFormulaObj
-          } else{
+          } else {
             return formula
           }
         })
@@ -135,8 +135,8 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
 
   return (
     <>
-      <Card>
-        <Header>{t(category)}</Header>
+      <Card className="middle-child">
+        <Header className="uploader-sub-heading">{t(category)}</Header>
         <p className="mp-description">{t(`Please configure the formula with respect to the assumptions considered for resource estimation`)}</p>
       </Card>
       <Card>
@@ -161,89 +161,84 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
           ]
           return (
             <>
-              <Card style={{ margin: "0", padding: "0 1rem", background: "#eee", border: "0.1rem solid #ddd" }}>
-                <LabelFieldPair className="formula-label-field">
-                  <span>{`${t(formula.output)}`}</span>
-                  <div className="equals-icon">=</div>
-                  <Dropdown
-                    variant="select-dropdown"
-                    t={t}
-                    isMandatory={true}
-                    option={inputOptions}
-                    select={(value) => {
-                      handleFormulaChange(formula.output, "input", value, category);
-                    }}
-                    selected={() => ({ code: formula.input })}
-                    optionKey="code"
-                    showToolTip={true}
-                    style={{ width: "20rem" }}
-                  />
+              <div>
+                <Card type="secondary">
+                  <LabelFieldPair className="formula-label-field">
+                    <span>{`${t(formula.output)}`}</span>
+                    <div className="equals-icon">=</div>
+                    <Dropdown
+                      variant="select-dropdown"
+                      t={t}
+                      isMandatory={true}
+                      option={inputOptions}
+                      select={(value) => {
+                        handleFormulaChange(formula.output, "input", value, category);
+                      }}
+                      selected={() => ({ code: formula.input })}
+                      optionKey="code"
+                      showToolTip={true}
+                      style={{ width: "20rem" }}
+                    />
+
+                    <Dropdown
+                      variant="select-dropdown"
+                      t={t}
+                      isMandatory={false}
+                      option={operators.map((operator) => ({
+                        code: operator.operatorCode,
+                        label: operator.operatorName,
+                      }))}
+                      select={(value) => {
+                        handleFormulaChange(formula.output, "operatorName", { code: value.label }, category);
+                      }}
+                      selected={() => ({ label: formula.operatorName })}
+                      optionKey="label"
+                      showToolTip={true}
+                      style={{ width: "10rem" }}
+                    />
+                    <Dropdown
+                      variant="select-dropdown"
+                      t={t}
+                      isMandatory={false}
+                      option={assumptionOptions}
+                      select={(value) => {
+                        handleFormulaChange(formula.output, "assumptionValue", value, category);
+                      }}
+                      selected={() => ({ code: formula.assumptionValue })}
+                      optionKey="code"
+                      showToolTip={true}
+                      style={{ width: "15rem" }}
+                    />
+                    <Button
+                      icon="Delete"
+                      iconFill=""
+                      label="Delete"
+                      size=""
+                      title=""
+                      variation="secondary"
+                      onClick={() => handleDeleteClick(index, formula)}
+                    />
+                  </LabelFieldPair>
+                </Card>
+                <CheckBox
+                  className="custom-assumption-checkbox"
+                  //key={field.key}
+                  mainClassName={"checkboxOptionVariant"}
+                  label={t("Show on Estimation Dashboard")}
+                  checked={formula.showOnEstimationDashboard ? true : false}
+                  onChange={(event) => handleFormulaChange(formula.output, "showOnEstimationDashboard", !formula.showOnEstimationDashboard, category)}
+                  isLabelFirst={false}
+                />
+                <Divider className="" variant="small" />
+              </div>
 
-                  <Dropdown
-                    variant="select-dropdown"
-                    t={t}
-                    isMandatory={false}
-                    option={operators.map((operator) => ({
-                      code: operator.operatorCode,
-                      label: operator.operatorName,
-                    }))}
-                    select={(value) => {
-                      handleFormulaChange(formula.output, "operatorName", {code:value.label}, category);
-                    }}
-                    selected={() => ({ label: formula.operatorName })}
-                    optionKey="label"
-                    showToolTip={true}
-                    style={{ width: "10rem" }}
-                  />
-                  <Dropdown
-                    variant="select-dropdown"
-                    t={t}
-                    isMandatory={false}
-                    option={assumptionOptions}
-                    select={(value) => {
-                      handleFormulaChange(formula.output, "assumptionValue", value, category);
-                    }}
-                    selected={() => ({ code: formula.assumptionValue })}
-                    optionKey="code"
-                    showToolTip={true}
-                    style={{ width: "15rem" }}
-                  />
-                  <Button
-                    className="custom-class"
-                    icon={<DeleteIconv2 styles={{ height: "1.5rem", width: "2.5rem", margin: "0rem" }} />}
-                    iconFill=""
-                    label="Delete"
-                    size=""
-                    style={{ height: "50px", fontSize: "20px" }}
-                    title=""
-                    variation="secondary"
-                    onButtonClick={() => handleDeleteClick(index,formula)}
-                  />
-                </LabelFieldPair>
-              </Card>
-              <CheckBox
-                //key={field.key}
-                mainClassName={"checkboxOptionVariant"}
-                label={t("Show on Estimation Dashboard")}
-                checked={formula.showOnEstimationDashboard ? true : false}
-                onChange={(event) => handleFormulaChange(formula.output, "showOnEstimationDashboard", !formula.showOnEstimationDashboard, category)}
-                isLabelFirst={false}
-              />
-              <div style={{ background: "#eee", height: "0.2rem", marginBottom: "1rem" }}></div>
             </>
           );
         })}
         <Button
-          className="custom-class"
-          icon={<AddIcon styles={{ height: "1.5rem", width: "1.5rem" }} fill={PRIMARY_COLOR} />}
-          iconFill=""
+          icon="Add"
           label={t("ADD_NEW_FORMULA")}
-          onButtonClick={() => setFormulasPopUp(true)}
-          options={[]}
-          optionsKey=""
-          size=""
-          style={{ height: "50px", fontSize: "20px" }}
-          title=""
+          onClick={() => setFormulasPopUp(true)}
           variation="secondary"
           isDisabled={isAddNewDisabled}
         />
@@ -267,11 +262,11 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
                 size={"large"}
                 variation={"secondary"}
                 label={t("YES")}
-                onButtonClick={() => {
+                onClick={() => {
                   handleConfirmDelete();
                 }}
               />,
-              <Button type={"button"} size={"large"} variation={"primary"} label={t("NO")} onButtonClick={handleCancelDelete} />,
+              <Button type={"button"} size={"large"} variation={"primary"} label={t("NO")} onClick={handleCancelDelete} />,
             ]}
             sortFooterChildren={true}
             onClose={() => {
@@ -312,7 +307,7 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
                 size={"large"}
                 variation={"secondary"}
                 label={t("YES")}
-                onButtonClick={() => {
+                onClick={() => {
                   addNewFormula();
                 }}
               />,
@@ -321,7 +316,7 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
                 size={"large"}
                 variation={"primary"}
                 label={t("NO")}
-                onButtonClick={() => {
+                onClick={() => {
                   setFormulasPopUp(false);
                 }}
               />,
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js
index 2aa0ac0d45c..80f3b819a64 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js
@@ -86,8 +86,8 @@ function RoleTableComposer({ nationalRoles }) {
             selectedHierarchy: nationalRoles?.includes(category)
               ? topBoundary
               : state?.boundaryHierarchy?.find(
-                  (j) => j.boundaryType === data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.hierarchyLevel
-                ),
+                (j) => j.boundaryType === data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.hierarchyLevel
+              ),
             selectedBoundaries: nationalRoles?.includes(category)
               ? topBoundaryValue
               : data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.jurisdiction,
@@ -162,11 +162,11 @@ function RoleTableComposer({ nationalRoles }) {
         return prev.map((i) =>
           i.rowIndex === row.rowIndex
             ? {
-                ...i,
-                selectedHierarchy: value,
-                boundaryOptions,
-                selectedBoundaries: [], // Keep existing selected boundaries
-              }
+              ...i,
+              selectedHierarchy: value,
+              boundaryOptions,
+              selectedBoundaries: [], // Keep existing selected boundaries
+            }
             : i
         );
       } else {
@@ -220,9 +220,9 @@ function RoleTableComposer({ nationalRoles }) {
           return prev.map((i) =>
             i.rowIndex === row.rowIndex
               ? {
-                  ...i,
-                  selectedBoundaries: [], // Clear selected boundaries
-                }
+                ...i,
+                selectedBoundaries: [], // Clear selected boundaries
+              }
               : i
           );
         } else {
@@ -251,9 +251,9 @@ function RoleTableComposer({ nationalRoles }) {
         return prev.map((i) =>
           i.rowIndex === row.rowIndex
             ? {
-                ...i,
-                selectedBoundaries: boundariesInEvent, // Update boundaries
-              }
+              ...i,
+              selectedBoundaries: boundariesInEvent, // Update boundaries
+            }
             : i
         );
       } else {
@@ -343,7 +343,7 @@ function RoleTableComposer({ nationalRoles }) {
       cell: (row) => {
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
         return (
@@ -369,15 +369,15 @@ function RoleTableComposer({ nationalRoles }) {
       cell: (row) => {
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
         return (
           <MultiSelectDropdown
             disabled={
               isUserAlreadyAssignedActive ||
-              nationalRoles?.includes(category) ||
-              !rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedHierarchy
+                nationalRoles?.includes(category) ||
+                !rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedHierarchy
                 ? true
                 : false
             }
@@ -400,7 +400,7 @@ function RoleTableComposer({ nationalRoles }) {
         const isUserAlreadyAssigned = HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 ? true : false;
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
 
@@ -513,11 +513,19 @@ function RoleTableComposer({ nationalRoles }) {
                   minlength={10}
                 />
               </LabelFieldPair>
-              <div className={`search-button-wrapper roleComposer`}>
-                <LinkLabel style={{ marginBottom: 0, whiteSpace: "nowrap" }} onClick={handleClearSearch}>
-                  {t("Clear Search")}
-                </LinkLabel>
-                <SubmitBar onSubmit={handleSearchSubmit} label={t("Search")} disabled={false} />
+              <div className={`search-field-wrapper roleComposer`} style={{ display: "flex", justifyContent: "flex-end" }}>
+
+                <Button
+                  variation="teritiary"
+                  label={t("Clear")}
+                  onClick={handleClearSearch}
+                />
+
+                <Button
+                  variation="primary"
+                  label={t("Search")}
+                  onClick={handleSearchSubmit}
+                />
               </div>
             </div>
           </div>
@@ -530,7 +538,7 @@ function RoleTableComposer({ nationalRoles }) {
           data={HrmsData?.data}
           pagination
           progressPending={isLoading || isHrmsLoading}
-          progressComponent={<CustomLoader />}
+          progressComponent={<Loader />}
           paginationServer
           paginationTotalRows={totalRows}
           customStyles={tableCustomStyle}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/TableSearchBar.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/TableSearchBar.js
index 51681512e96..c71f5d022a9 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/TableSearchBar.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/TableSearchBar.js
@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 import { useTranslation } from "react-i18next";
 import PropTypes from 'prop-types';
 
-const TableSearchField = ({ onSearch}) => {
+const TableSearchField = ({ onSearch }) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState('');
 
   const handleInputChange = (e) => {
     const newQuery = e.target.value;
     setQuery(newQuery);
-    onSearch(newQuery); 
+    onSearch(newQuery);
   };
 
   return (
@@ -51,7 +51,7 @@ const styles = {
     width: '100%',
     padding: '8px 40px 8px 12px', // Adds space on the right for the icon
     border: '1px solid #ccc',
-    borderRadius: '4px',
+    borderRadius: '0px',
     outline: 'none',
     fontSize: '16px',
     boxSizing: 'border-box',
@@ -66,7 +66,7 @@ const styles = {
 };
 
 TableSearchField.propTypes = {
-    onSearch: PropTypes.func.isRequired,
- };
+  onSearch: PropTypes.func.isRequired,
+};
 
 export default TableSearchField;
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
index 3170bab30a7..42145854632 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
@@ -230,8 +230,8 @@ function UserAccess({ category, setData, nationalRoles }) {
 
   return (
     <>
-      <Card style={{ marginBottom: "1rem" }}>
-        <Header>{t(category)}</Header>
+      <Card className="middle-child">
+        <Header className="uploader-sub-heading">{t(category)}</Header>
         <p className="mp-description">{t(`${category}_DESCRIPTION`)}</p>
       </Card>
 
@@ -283,8 +283,8 @@ function UserAccess({ category, setData, nationalRoles }) {
           type={"default"}
           heading={t(`${category}_POPUP_HEADING`)}
           children={[<RoleTableComposer category={category} nationalRoles={nationalRoles} />]}
-          onOverlayClick={() => {}}
-          footerChildren={[<Button type={"button"} size={"large"} variation={"secondary"} label={t("CLOSE")} onClick={() => setShowPopUp(false)} />]}
+          onOverlayClick={() => { }}
+          footerChildren={[<Button type={"button"} size={"large"} variation={"secondary"} label={t("CLOSE")} onClick={() => setShowPopUp(false)} style={{ minWidth: "200px" }} />]}
           sortFooterChildren={true}
           onClose={() => setShowPopUp(false)}
         />
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessWrapper.js
index 969f9946262..6d3f0e9b3a5 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessWrapper.js
@@ -14,12 +14,12 @@ export const useUserAccessContext = () => {
 const UserAccessWrapper = ({ onSelect, props: customProps }) => {
   const { t } = useTranslation();
   const { state } = useMyContext();
-  const [data,setData]=useState(null);
+  const [data, setData] = useState(null);
   // vertical stepper array role code fetch and sorted based on orderNumber
   const rolesArray = state?.rolesForMicroplan?.sort((a, b) => a.orderNumber - b.orderNumber).map((item) => item.roleCode);
-  let mpRolesArray=rolesArray.map((item)=>t(`MP_ROLE_${item}`));
+  let mpRolesArray = rolesArray.map((item) => t(`MP_ROLE_${item}`));
 
-  const nationalRoles=["ROOT_PLAN_ESTIMATION_APPROVER","ROOT_POPULATION_DATA_APPROVER","ROOT_FACILITY_CATCHMENT_MAPPER"]
+  const nationalRoles = ["ROOT_PLAN_ESTIMATION_APPROVER", "ROOT_POPULATION_DATA_APPROVER", "ROOT_FACILITY_CATCHMENT_MAPPER"]
   const hierarchyData = customProps?.hierarchyData;
   const campaignType = customProps?.sessionData?.CAMPAIGN_DETAILS?.campaignDetails?.campaignType?.code;
 
@@ -51,7 +51,7 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
     Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: null });
     Digit.Utils.microplanv1.updateUrlParams({ internalKey: null });
   };
-  
+
   const updateUrlParams = (params) => {
     const url = new URL(window.location.href);
     Object.entries(params).forEach(([key, value]) => {
@@ -71,7 +71,7 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
       }
     });
   };
-  
+
 
   const handleBack = () => {
     if (internalKey > 1) {
@@ -125,21 +125,21 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
   return (
     <Fragment>
       <UserAccessContext.Provider value={{ hierarchyData, category: rolesArray?.[internalKey - 1] }}>
-        <div style={{ display: "flex", gap: "2rem" }}>
+        <div style={{ display: "flex", gap: "1.5rem" }}>
           <div className="card-container">
             <Card className="card-header-timeline">
               <TextBlock subHeader={t("USER_ACCESS_MANAGEMENT")} subHeaderClasName={"stepper-subheader"} wrapperClassName={"stepper-wrapper"} />
             </Card>
-            <Card className="stepper-card">
+            <Card className="vertical-stepper-card">
               <Stepper customSteps={[...mpRolesArray]} currentStep={internalKey} onStepClick={() => null} direction={"vertical"} />
             </Card>
           </div>
 
           <div style={{ width: "100%" }}>
-            <UserAccess 
-            category={rolesArray?.[internalKey - 1] }
-            setData={setData}
-            nationalRoles={nationalRoles}
+            <UserAccess
+              category={rolesArray?.[internalKey - 1]}
+              setData={setData}
+              nationalRoles={nationalRoles}
             />
           </div>
         </div>