diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
index e96b3dcc5..9f04d039e 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
@@ -22,7 +22,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
-  modalBasic,
+  modalStyleUtils,
   serviceAccountStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -37,7 +37,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
 const styles = (theme: Theme) =>
   createStyles({
     ...serviceAccountStyles,
-    ...modalBasic,
+    ...modalStyleUtils,
   });
 
 interface IAddServiceAccountProps {
@@ -128,7 +128,7 @@ const AddServiceAccount = ({
           addServiceAccount(e);
         }}
       >
-        <Grid container className={classes.containerScrollable}>
+        <Grid container className={classes.modalFormScrollable}>
           <Grid item xs={12}>
             <div className={classes.infoDetails}>
               Service Accounts inherit the policy explicitly attached to the
@@ -205,12 +205,11 @@ const AddServiceAccount = ({
           </Grid>
         </Grid>
         <Grid container>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
               type="button"
               color="primary"
               variant="outlined"
-              className={classes.buttonSpacer}
               onClick={resetForm}
             >
               Clear
diff --git a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
index 5be9c82cc..b46ebb56a 100644
--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Button, LinearProgress } from "@mui/material";
 import {
-  actionsTray,
   containerForHeader,
-  modalBasic,
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ChangePasswordRequest } from "../Buckets/types";
 import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    ...actionsTray,
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...formFieldStyles,
+    ...spacingUtils,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -118,8 +120,6 @@ const ChangePassword = ({
         setCurrentPassword("");
         closeModal();
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
     >
       <form
         noValidate
@@ -129,8 +129,8 @@ const ChangePassword = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="current-password"
                 name="current-password"
@@ -142,7 +142,7 @@ const ChangePassword = ({
                 value={currentPassword}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="new-password"
                 name="new-password"
@@ -154,7 +154,7 @@ const ChangePassword = ({
                 value={newPassword}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="re-new-password"
                 name="re-new-password"
@@ -167,7 +167,7 @@ const ChangePassword = ({
               />
             </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
               type="submit"
               variant="contained"
diff --git a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
index 94d41e8d1..f308e995f 100644
--- a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
@@ -24,9 +24,10 @@ import Grid from "@mui/material/Grid";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Button, LinearProgress } from "@mui/material";
 import {
-  actionsTray,
   containerForHeader,
-  modalBasic,
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ChangeUserPasswordRequest } from "../Buckets/types";
 import { setModalErrorSnackMessage } from "../../../actions";
@@ -38,8 +39,9 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    ...actionsTray,
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...formFieldStyles,
+    ...spacingUtils,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -109,8 +111,6 @@ const ChangeUserPassword = ({
         setReNewPassword("");
         closeModal();
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
     >
       <form
         noValidate
@@ -120,9 +120,11 @@ const ChangeUserPassword = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <h3>Change password for {userName}</h3>
-            <Grid item xs={12}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
+            <div className={classes.spacerBottom}>
+              Change password for: {userName}
+            </div>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="new-password"
                 name="new-password"
@@ -134,7 +136,7 @@ const ChangeUserPassword = ({
                 value={newPassword}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="re-new-password"
                 name="re-new-password"
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
index 4e856383e..164ec3b96 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -21,7 +21,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { connect } from "react-redux";
 import api from "../../../../common/api";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -44,10 +47,8 @@ interface IAddAccessRule {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 const AddAccessRule = ({
@@ -86,53 +87,58 @@ const AddAccessRule = ({
   };
 
   return (
-    <React.Fragment>
-      <ModalWrapper
-        modalOpen={modalOpen}
-        title="Add Access Rule"
-        onClose={onClose}
-      >
-        <Grid container>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              value={prefix}
-              label={"Prefix"}
-              id={"prefix"}
-              name={"prefix"}
-              placeholder={"Enter Prefix"}
-              onChange={(e) => {
-                setPrefix(e.target.value);
-              }}
-            />
-            <SelectWrapper
-              id="access"
-              name="Access"
-              onChange={(e) => {
-                setSelectedAccess(e.target.value);
-              }}
-              label="Access"
-              value={selectedAccess}
-              options={accessOptions}
-              disabled={false}
-            />
-          </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
-            <button type="button" color="primary" onClick={resetForm}>
-              Clear
-            </button>
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              disabled={prefix.trim() === ""}
-              onClick={createProcess}
-            >
-              Save
-            </Button>
-          </Grid>
+    <ModalWrapper
+      modalOpen={modalOpen}
+      title="Add Access Rule"
+      onClose={onClose}
+    >
+      <Grid container>
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <InputBoxWrapper
+            value={prefix}
+            label={"Prefix"}
+            id={"prefix"}
+            name={"prefix"}
+            placeholder={"Enter Prefix"}
+            onChange={(e) => {
+              setPrefix(e.target.value);
+            }}
+          />
         </Grid>
-      </ModalWrapper>
-    </React.Fragment>
+        <Grid item xs={12}>
+          <SelectWrapper
+            id="access"
+            name="Access"
+            onChange={(e) => {
+              setSelectedAccess(e.target.value);
+            }}
+            label="Access"
+            value={selectedAccess}
+            options={accessOptions}
+            disabled={false}
+          />
+        </Grid>
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
+            type="button"
+            color="primary"
+            variant="outlined"
+            onClick={resetForm}
+          >
+            Clear
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={prefix.trim() === ""}
+            onClick={createProcess}
+          >
+            Save
+          </Button>
+        </Grid>
+      </Grid>
+    </ModalWrapper>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
index f6de56276..e86d5f5cc 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
@@ -21,7 +21,11 @@ import { Button, Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { AppState } from "../../../../store";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -40,14 +44,9 @@ interface IBucketTagModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
+    ...spacingUtils,
   });
 
 const AddBucketTagModal = ({
@@ -89,64 +88,64 @@ const AddBucketTagModal = ({
   };
 
   return (
-    <React.Fragment>
-      <ModalWrapper
-        modalOpen={modalOpen}
-        title="Add New Tag"
-        onClose={() => {
-          onCloseAndUpdate(false);
-        }}
-      >
-        <Grid container>
-          <h3 className={classes.pathLabel}>Bucket: {bucketName}</h3>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              value={newKey}
-              label={"New Tag Key"}
-              id={"newTagKey"}
-              name={"newTagKey"}
-              placeholder={"Enter New Tag Key"}
-              onChange={(e: any) => {
-                setNewKey(e.target.value);
-              }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              value={newLabel}
-              label={"New Tag Label"}
-              id={"newTagLabel"}
-              name={"newTagLabel"}
-              placeholder={"Enter New Tag Label"}
-              onChange={(e: any) => {
-                setNewLabel(e.target.value);
-              }}
-            />
-          </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
-            <button
-              type="button"
-              color="primary"
-              className={classes.clearButton}
-              onClick={resetForm}
-            >
-              Clear
-            </button>
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              disabled={
-                newLabel.trim() === "" || newKey.trim() === "" || isSending
-              }
-              onClick={addTagProcess}
-            >
-              Save
-            </Button>
-          </Grid>
+    <ModalWrapper
+      modalOpen={modalOpen}
+      title={`Add New Tag `}
+      onClose={() => {
+        onCloseAndUpdate(false);
+      }}
+    >
+      <Grid container>
+        <div className={classes.spacerBottom}>
+          <strong>Bucket</strong>: {bucketName}
+        </div>
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <InputBoxWrapper
+            value={newKey}
+            label={"New Tag Key"}
+            id={"newTagKey"}
+            name={"newTagKey"}
+            placeholder={"Enter New Tag Key"}
+            onChange={(e: any) => {
+              setNewKey(e.target.value);
+            }}
+          />
         </Grid>
-      </ModalWrapper>
-    </React.Fragment>
+        <Grid item xs={12} className={classes.formFieldRow}>
+          <InputBoxWrapper
+            value={newLabel}
+            label={"New Tag Label"}
+            id={"newTagLabel"}
+            name={"newTagLabel"}
+            placeholder={"Enter New Tag Label"}
+            onChange={(e: any) => {
+              setNewLabel(e.target.value);
+            }}
+          />
+        </Grid>
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
+            type="button"
+            variant="outlined"
+            color="primary"
+            onClick={resetForm}
+          >
+            Clear
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={
+              newLabel.trim() === "" || newKey.trim() === "" || isSending
+            }
+            onClick={addTagProcess}
+          >
+            Save
+          </Button>
+        </Grid>
+      </Grid>
+    </ModalWrapper>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
index a87cfc322..e09455193 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx
@@ -17,7 +17,7 @@
 import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { Button } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -29,7 +29,10 @@ import TableBody from "@mui/material/TableBody";
 import Checkbox from "@mui/material/Checkbox";
 import Table from "@mui/material/Table";
 import { ArnList } from "../types";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -38,18 +41,13 @@ import AutocompleteWrapper from "../../Common/FormComponents/AutocompleteWrapper
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
+    arnField: {
+      "& div div .MuiOutlinedInput-root": {
+        padding: 0,
       },
     },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 interface IAddEventProps {
@@ -161,7 +159,7 @@ const AddEvent = ({
       onClose={() => {
         closeModalAndRefresh();
       }}
-      title="Subscribe To Event"
+      title="Subscribe To Bucket Events"
     >
       <form
         noValidate
@@ -172,7 +170,11 @@ const AddEvent = ({
       >
         <Grid container>
           <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
+            <Grid
+              item
+              xs={12}
+              className={`${classes.arnField} ${classes.formFieldRow}`}
+            >
               <AutocompleteWrapper
                 onChange={(value: string) => {
                   setArn(value);
@@ -184,7 +186,29 @@ const AddEvent = ({
                 options={arnValues}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
+              <InputBoxWrapper
+                id="prefix-input"
+                name="prefix-input"
+                label="Prefix"
+                value={prefix}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setPrefix(e.target.value);
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} className={classes.formFieldRow}>
+              <InputBoxWrapper
+                id="suffix-input"
+                name="suffix-input"
+                label="Suffix"
+                value={suffix}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setSuffix(e.target.value);
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <Table size="medium">
                 <TableHead className={classes.minTableHeader}>
                   <TableRow>
@@ -217,36 +241,19 @@ const AddEvent = ({
                 </TableBody>
               </Table>
             </Grid>
-            <Grid item xs={12}>
-              <br />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="prefix-input"
-                name="prefix-input"
-                label="Prefix"
-                value={prefix}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPrefix(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="suffix-input"
-                name="suffix-input"
-                label="Suffix"
-                value={suffix}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setSuffix(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <br />
-            </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
+              type="button"
+              variant="outlined"
+              color="primary"
+              disabled={addLoading}
+              onClick={() => {
+                closeModalAndRefresh();
+              }}
+            >
+              Cancel
+            </Button>
             <Button
               type="submit"
               variant="contained"
@@ -256,11 +263,6 @@ const AddEvent = ({
               Save
             </Button>
           </Grid>
-          {addLoading && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
         </Grid>
       </form>
     </ModalWrapper>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
index d3019dece..7de8bb007 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -22,7 +22,6 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import {
   ITierElement,
@@ -37,6 +36,12 @@ import DateSelector from "../../Common/FormComponents/DateSelector/DateSelector"
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
+import {
+  createTenantCommon,
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 
 interface IReplicationModal {
   open: boolean;
@@ -53,10 +58,25 @@ interface ITiersDropDown {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
+    dateSelector: {
+      "& div": {
+        borderBottom: 0,
+        marginBottom: 0,
+
+        "& div:nth-child(2)": {
+          border: "1px solid #EAEAEA",
+          paddingLeft: 5,
+
+          "& div": {
+            border: 0,
+          },
+        },
+      },
     },
-    ...modalBasic,
+    ...spacingUtils,
+    ...modalStyleUtils,
+    ...formFieldStyles,
+    ...createTenantCommon,
   });
 
 const AddLifecycleModal = ({
@@ -239,202 +259,265 @@ const AddLifecycleModal = ({
         >
           <Grid container>
             <Grid item xs={12} className={classes.formScrollable}>
-              <h3>Lifecycle Configuration</h3>
-              <Grid item xs={12}>
-                <RadioGroupSelector
-                  currentSelection={ilmType}
-                  id="quota_type"
-                  name="quota_type"
-                  label="ILM Rule"
-                  onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                    setIlmType(e.target.value as string);
-                  }}
-                  selectorOptions={[
-                    { value: "expiry", label: "Expiry" },
-                    { value: "transition", label: "Transition" },
-                  ]}
-                />
-              </Grid>
-              {ilmType === "expiry" ? (
-                <Fragment>
+              <Grid item xs={12} className={classes.formFieldRow}>
+                <fieldset className={classes.fieldGroup}>
+                  <legend className={classes.descriptionText}>
+                    Lifecycle Configuration
+                  </legend>
+
                   <Grid item xs={12}>
                     <RadioGroupSelector
-                      currentSelection={expiryType}
-                      id="expiryType"
-                      name="expiryType"
-                      label="Expiry Type"
+                      currentSelection={ilmType}
+                      id="quota_type"
+                      name="quota_type"
+                      label="ILM Rule"
                       onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                        setExpiryType(e.target.value as string);
+                        setIlmType(e.target.value as string);
                       }}
                       selectorOptions={[
-                        { value: "date", label: "Date" },
-                        { value: "days", label: "Days" },
+                        { value: "expiry", label: "Expiry" },
+                        { value: "transition", label: "Transition" },
                       ]}
                     />
                   </Grid>
-                  <Grid item xs={12}>
-                    {expiryType === "date" ? (
-                      <DateSelector
-                        id="expiry_date"
-                        label="Expiry Date"
-                        value={expiryDate}
-                        borderBottom={true}
-                        onDateChange={(date: string, isValid: boolean) => {
-                          if (isValid) {
-                            setExpiryDate(date);
-                          }
-                        }}
-                      />
-                    ) : (
-                      <InputBoxWrapper
-                        type="number"
-                        id="expiry_days"
-                        name="expiry_days"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setExpiryDays(e.target.value);
-                        }}
-                        label="Expiry Days"
-                        value={expiryDays}
-                        min="0"
-                      />
-                    )}
-                  </Grid>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="noncurrentversion_expiration_days"
-                      name="noncurrentversion_expiration_days"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setNCExpirationDays(e.target.value);
-                      }}
-                      label="Non-current Expiration Days"
-                      value={NCExpirationDays}
-                      min="0"
-                    />
-                  </Grid>
-                </Fragment>
-              ) : (
-                <Fragment>
-                  <Grid item xs={12}>
-                    <RadioGroupSelector
-                      currentSelection={transitionType}
-                      id="transitionType"
-                      name="transitionType"
-                      label="Transition Type"
-                      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                        setTransitionType(e.target.value as string);
-                      }}
-                      selectorOptions={[
-                        { value: "date", label: "Date" },
-                        { value: "days", label: "Days" },
-                      ]}
-                    />
-                  </Grid>
-                  <Grid item xs={12}>
-                    {transitionType === "date" ? (
-                      <DateSelector
-                        id="transition_date"
-                        label="Transition Date"
-                        value={transitionDate}
-                        borderBottom={true}
-                        onDateChange={(date: string, isValid: boolean) => {
-                          if (isValid) {
-                            setTransitionDate(date);
-                          }
-                        }}
-                      />
-                    ) : (
-                      <InputBoxWrapper
-                        type="number"
-                        id="transition_days"
-                        name="transition_days"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setTransitionDays(e.target.value);
-                        }}
-                        label="Transition Days"
-                        value={transitionDays}
-                        min="0"
-                      />
-                    )}
-                  </Grid>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="noncurrentversion_transition_days"
-                      name="noncurrentversion_transition_days"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setNCTransitionDays(e.target.value);
-                      }}
-                      label="Non-current Transition Days"
-                      value={NCTransitionDays}
-                      min="0"
-                    />
-                  </Grid>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
-                      id="noncurrentversion_t_SC"
-                      name="noncurrentversion_t_SC"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setNCTransitionSC(e.target.value);
-                      }}
-                      placeholder="Set Non-current Version Transition Storage Class"
-                      label="Non-current Version Transition Storage Class"
-                      value={NCTransitionSC}
-                    />
-                  </Grid>
-                  <Grid item xs={12}>
-                    <SelectWrapper
-                      label="Storage Class"
-                      id="storage_class"
-                      name="storage_class"
-                      value={storageClass}
-                      onChange={(e: SelectChangeEvent<string>) => {
-                        setStorageClass(e.target.value as string);
-                      }}
-                      options={tiersList}
-                    />
-                  </Grid>
-                </Fragment>
-              )}
-              <h3>File Configuration</h3>
-              <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="prefix"
-                  name="prefix"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setPrefix(e.target.value);
-                  }}
-                  label="Prefix"
-                  value={prefix}
-                />
+                  {ilmType === "expiry" ? (
+                    <Fragment>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <RadioGroupSelector
+                          currentSelection={expiryType}
+                          id="expiryType"
+                          name="expiryType"
+                          label="Expiry Type"
+                          onChange={(
+                            e: React.ChangeEvent<{ value: unknown }>
+                          ) => {
+                            setExpiryType(e.target.value as string);
+                          }}
+                          selectorOptions={[
+                            { value: "date", label: "Date" },
+                            { value: "days", label: "Days" },
+                          ]}
+                        />
+                      </Grid>
+                      <React.Fragment>
+                        {expiryType === "date" ? (
+                          <Grid
+                            item
+                            xs={12}
+                            className={`${classes.dateSelector} `}
+                          >
+                            <DateSelector
+                              id="expiry_date"
+                              label="Expiry Date"
+                              value={expiryDate}
+                              borderBottom={true}
+                              onDateChange={(
+                                date: string,
+                                isValid: boolean
+                              ) => {
+                                if (isValid) {
+                                  setExpiryDate(date);
+                                }
+                              }}
+                            />
+                          </Grid>
+                        ) : (
+                          <Grid item xs={12} className={classes.formFieldRow}>
+                            <InputBoxWrapper
+                              type="number"
+                              id="expiry_days"
+                              name="expiry_days"
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
+                                setExpiryDays(e.target.value);
+                              }}
+                              label="Expiry Days"
+                              value={expiryDays}
+                              min="0"
+                            />
+                          </Grid>
+                        )}
+                      </React.Fragment>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <InputBoxWrapper
+                          type="number"
+                          id="noncurrentversion_expiration_days"
+                          name="noncurrentversion_expiration_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            setNCExpirationDays(e.target.value);
+                          }}
+                          label="Non-current Expiration Days"
+                          value={NCExpirationDays}
+                          min="0"
+                        />
+                      </Grid>
+                    </Fragment>
+                  ) : (
+                    <Fragment>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <RadioGroupSelector
+                          currentSelection={transitionType}
+                          id="transitionType"
+                          name="transitionType"
+                          label="Transition Type"
+                          onChange={(
+                            e: React.ChangeEvent<{ value: unknown }>
+                          ) => {
+                            setTransitionType(e.target.value as string);
+                          }}
+                          selectorOptions={[
+                            { value: "date", label: "Date" },
+                            { value: "days", label: "Days" },
+                          ]}
+                        />
+                      </Grid>
+                      <React.Fragment>
+                        {transitionType === "date" ? (
+                          <Grid
+                            item
+                            xs={12}
+                            className={`${classes.dateSelector} `}
+                          >
+                            <DateSelector
+                              id="transition_date"
+                              label="Transition Date"
+                              value={transitionDate}
+                              borderBottom={true}
+                              onDateChange={(
+                                date: string,
+                                isValid: boolean
+                              ) => {
+                                if (isValid) {
+                                  setTransitionDate(date);
+                                }
+                              }}
+                            />
+                          </Grid>
+                        ) : (
+                          <Grid item xs={12} className={classes.formFieldRow}>
+                            <InputBoxWrapper
+                              type="number"
+                              id="transition_days"
+                              name="transition_days"
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
+                                setTransitionDays(e.target.value);
+                              }}
+                              label="Transition Days"
+                              value={transitionDays}
+                              min="0"
+                            />
+                          </Grid>
+                        )}
+                      </React.Fragment>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <InputBoxWrapper
+                          type="number"
+                          id="noncurrentversion_transition_days"
+                          name="noncurrentversion_transition_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            setNCTransitionDays(e.target.value);
+                          }}
+                          label="Non-current Transition Days"
+                          value={NCTransitionDays}
+                          min="0"
+                        />
+                      </Grid>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <InputBoxWrapper
+                          id="noncurrentversion_t_SC"
+                          name="noncurrentversion_t_SC"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            setNCTransitionSC(e.target.value);
+                          }}
+                          placeholder="Set Non-current Version Transition Storage Class"
+                          label="Non-current Version Transition Storage Class"
+                          value={NCTransitionSC}
+                        />
+                      </Grid>
+                      <Grid item xs={12} className={classes.formFieldRow}>
+                        <SelectWrapper
+                          label="Storage Class"
+                          id="storage_class"
+                          name="storage_class"
+                          value={storageClass}
+                          onChange={(e: SelectChangeEvent<string>) => {
+                            setStorageClass(e.target.value as string);
+                          }}
+                          options={tiersList}
+                        />
+                      </Grid>
+                    </Fragment>
+                  )}
+                </fieldset>
               </Grid>
-              <Grid item xs={12}>
-                <QueryMultiSelector
-                  name="tags"
-                  label="Tags"
-                  elements={""}
-                  onChange={(vl: string) => {
-                    setTags(vl);
-                  }}
-                  keyPlaceholder="Tag Key"
-                  valuePlaceholder="Tag Value"
-                  withBorder
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <FormSwitchWrapper
-                  value="expired_delete_marker"
-                  id="expired_delete_marker"
-                  name="expired_delete_marker"
-                  checked={expiredObjectDM}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    setExpiredObjectDM(event.target.checked);
-                  }}
-                  label={"Expired Object Delete Marker"}
-                />
+              <Grid item xs={12} className={classes.formFieldRow}>
+                <fieldset className={classes.fieldGroup}>
+                  <legend className={classes.descriptionText}>
+                    File Configuration
+                  </legend>
+
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="prefix"
+                      name="prefix"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setPrefix(e.target.value);
+                      }}
+                      label="Prefix"
+                      value={prefix}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <QueryMultiSelector
+                      name="tags"
+                      label="Tags"
+                      elements={""}
+                      onChange={(vl: string) => {
+                        setTags(vl);
+                      }}
+                      keyPlaceholder="Tag Key"
+                      valuePlaceholder="Tag Value"
+                      withBorder
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FormSwitchWrapper
+                      value="expired_delete_marker"
+                      id="expired_delete_marker"
+                      name="expired_delete_marker"
+                      checked={expiredObjectDM}
+                      onChange={(
+                        event: React.ChangeEvent<HTMLInputElement>
+                      ) => {
+                        setExpiredObjectDM(event.target.checked);
+                      }}
+                      label={"Expired Object Delete Marker"}
+                    />
+                  </Grid>
+                </fieldset>
               </Grid>
             </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
+            <Grid item xs={12} className={classes.modalButtonBar}>
+              <Button
+                type="button"
+                variant="outlined"
+                color="primary"
+                disabled={addLoading}
+                onClick={() => {
+                  closeModalAndRefresh(false);
+                }}
+              >
+                Cancel
+              </Button>
               <Button
                 type="submit"
                 variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
index 009e4fbed..13f0160d9 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -19,10 +19,15 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
+import { Button, SelectChangeEvent } from "@mui/material";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  createTenantCommon,
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { BulkReplicationResponse } from "../types";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -49,10 +54,24 @@ const styles = (theme: Theme) =>
     },
     multiContainer: {
       display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
+      alignItems: "center",
+    },
+    sizeFactorContainer: {
+      "& label": {
+        display: "none",
+      },
+      "& div:first-child": {
+        marginBottom: 0,
+      },
+    },
+    ...spacingUtils,
+    ...createTenantCommon,
+    ...formFieldStyles,
+    ...modalStyleUtils,
+    modalFormScrollable: {
+      ...modalStyleUtils.modalFormScrollable,
+      paddingRight: 10,
     },
-    ...modalBasic,
   });
 
 const AddReplicationModal = ({
@@ -162,8 +181,8 @@ const AddReplicationModal = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="targetURL"
                 name="targetURL"
@@ -175,7 +194,7 @@ const AddReplicationModal = ({
                 value={targetURL}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <FormSwitchWrapper
                 checked={useTLS}
                 id="useTLS"
@@ -187,7 +206,7 @@ const AddReplicationModal = ({
                 value="yes"
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="accessKey"
                 name="accessKey"
@@ -198,7 +217,7 @@ const AddReplicationModal = ({
                 value={accessKey}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="secretKey"
                 name="secretKey"
@@ -209,7 +228,7 @@ const AddReplicationModal = ({
                 value={secretKey}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="targetBucket"
                 name="targetBucket"
@@ -220,7 +239,7 @@ const AddReplicationModal = ({
                 value={targetBucket}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="region"
                 name="region"
@@ -231,7 +250,7 @@ const AddReplicationModal = ({
                 value={region}
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <SelectWrapper
                 id="replication_mode"
                 name="replication_mode"
@@ -248,24 +267,22 @@ const AddReplicationModal = ({
             </Grid>
 
             {replicationMode === "async" && (
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <div className={classes.multiContainer}>
-                  <div>
-                    <InputBoxWrapper
-                      type="number"
-                      id="bandwidth_scalar"
-                      name="bandwidth_scalar"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setBandwidthScalar(e.target.value as string);
-                      }}
-                      label="Bandwidth"
-                      value={bandwidthScalar}
-                      min="0"
-                    />
-                  </div>
+                  <InputBoxWrapper
+                    type="number"
+                    id="bandwidth_scalar"
+                    name="bandwidth_scalar"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setBandwidthScalar(e.target.value as string);
+                    }}
+                    label="Bandwidth"
+                    value={bandwidthScalar}
+                    min="0"
+                  />
                   <div className={classes.sizeFactorContainer}>
                     <SelectWrapper
-                      label={"Unit"}
+                      label={" "}
                       id="bandwidth_unit"
                       name="bandwidth_unit"
                       value={bandwidthUnit}
@@ -278,7 +295,7 @@ const AddReplicationModal = ({
                 </div>
               </Grid>
             )}
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="healthCheck"
                 name="healthCheck"
@@ -289,34 +306,44 @@ const AddReplicationModal = ({
                 value={healthCheck}
               />
             </Grid>
-            <h3>Object Filters</h3>
             <Grid item xs={12}>
-              <InputBoxWrapper
-                id="prefix"
-                name="prefix"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setPrefix(e.target.value);
-                }}
-                placeholder="prefix"
-                label="Prefix"
-                value={prefix}
-              />
+              <fieldset className={classes.fieldGroup}>
+                <legend className={classes.descriptionText}>
+                  Object Filters
+                </legend>
+                <Grid item xs={12} className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="prefix"
+                    name="prefix"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setPrefix(e.target.value);
+                    }}
+                    placeholder="prefix"
+                    label="Prefix"
+                    value={prefix}
+                  />
+                </Grid>
+                <Grid item xs={12} className={classes.formFieldRow}>
+                  <QueryMultiSelector
+                    name="tags"
+                    label="Tags"
+                    elements={""}
+                    onChange={(vl: string) => {
+                      setTags(vl);
+                    }}
+                    keyPlaceholder="Tag Key"
+                    valuePlaceholder="Tag Value"
+                    withBorder
+                  />
+                </Grid>
+              </fieldset>
             </Grid>
-            <Grid item xs={12}>
-              <QueryMultiSelector
-                name="tags"
-                label="Tags"
-                elements={""}
-                onChange={(vl: string) => {
-                  setTags(vl);
-                }}
-                keyPlaceholder="Tag Key"
-                valuePlaceholder="Tag Value"
-                withBorder
-              />
-            </Grid>
-            <h3>Storage Configuration</h3>
-            <Grid item xs={12}>
+
+            <Grid
+              item
+              xs={12}
+              className={`${classes.spacerTop} ${classes.formFieldRow}`}
+            >
               <InputBoxWrapper
                 id="storageClass"
                 name="storageClass"
@@ -328,35 +355,52 @@ const AddReplicationModal = ({
                 value={targetStorageClass}
               />
             </Grid>
-            <h3>Replication Options</h3>
             <Grid item xs={12}>
-              <FormSwitchWrapper
-                checked={repDeleteMarker}
-                id="deleteMarker"
-                name="deleteMarker"
-                label="Delete Marker"
-                onChange={(e) => {
-                  setRepDeleteMarker(e.target.checked);
-                }}
-                value={repDeleteMarker}
-                description={"Replicate soft deletes"}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <FormSwitchWrapper
-                checked={repDelete}
-                id="repDelete"
-                name="repDelete"
-                label="Deletes"
-                onChange={(e) => {
-                  setRepDelete(e.target.checked);
-                }}
-                value={repDelete}
-                description={"Replicate versioned deletes"}
-              />
+              <fieldset className={classes.fieldGroup}>
+                <legend className={classes.descriptionText}>
+                  Replication Options
+                </legend>
+                <Grid item xs={12} className={classes.formFieldRow}>
+                  <FormSwitchWrapper
+                    checked={repDeleteMarker}
+                    id="deleteMarker"
+                    name="deleteMarker"
+                    label="Delete Marker"
+                    onChange={(e) => {
+                      setRepDeleteMarker(e.target.checked);
+                    }}
+                    value={repDeleteMarker}
+                    description={"Replicate soft deletes"}
+                  />
+                </Grid>
+                <Grid item xs={12} className={classes.formFieldRow}>
+                  <FormSwitchWrapper
+                    checked={repDelete}
+                    id="repDelete"
+                    name="repDelete"
+                    label="Deletes"
+                    onChange={(e) => {
+                      setRepDelete(e.target.checked);
+                    }}
+                    value={repDelete}
+                    description={"Replicate versioned deletes"}
+                  />
+                </Grid>
+              </fieldset>
             </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
+              type="button"
+              variant="outlined"
+              color="primary"
+              disabled={addLoading}
+              onClick={() => {
+                closeModalAndRefresh();
+              }}
+            >
+              Cancel
+            </Button>
             <Button
               type="submit"
               variant="contained"
@@ -366,11 +410,6 @@ const AddReplicationModal = ({
               Save
             </Button>
           </Grid>
-          {addLoading && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
         </Grid>
       </form>
     </ModalWrapper>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
index f102239d6..ce269e132 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
@@ -22,7 +22,10 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { setModalErrorSnackMessage } from "../../../../actions";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { BucketEncryptionInfo } from "../types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
@@ -32,10 +35,8 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...formFieldStyles,
   });
 
 interface IEnableBucketEncryptionProps {
@@ -51,7 +52,6 @@ interface IEnableBucketEncryptionProps {
 const EnableBucketEncryption = ({
   classes,
   open,
-  encryptionEnabled,
   encryptionCfg,
   selectedBucket,
   closeModalAndRefresh,
@@ -121,8 +121,8 @@ const EnableBucketEncryption = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <SelectWrapper
                 onChange={(e: SelectChangeEvent<string>) => {
                   setEncryptionType(e.target.value as string);
@@ -147,11 +147,9 @@ const EnableBucketEncryption = ({
                 ]}
               />
             </Grid>
-            <Grid item xs={12}>
-              <br />
-            </Grid>
+
             {encryptionType === "sse-kms" && (
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
                   id="kms-key-id"
                   name="kms-key-id"
@@ -163,11 +161,19 @@ const EnableBucketEncryption = ({
                 />
               </Grid>
             )}
-            <Grid item xs={12}>
-              <br />
-            </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
+              type="submit"
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                closeModalAndRefresh();
+              }}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
             <Button
               type="submit"
               variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
index 4394fba41..c3a921dd9 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -25,7 +25,10 @@ import { factorForDropdown, getBytes, units } from "../../../../common/utils";
 import { BucketQuota } from "../types";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -35,10 +38,8 @@ import api from "../../../../common/api";
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 interface IEnableQuotaProps {
@@ -131,7 +132,7 @@ const EnableQuota = ({
       >
         <Grid container>
           <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.formFieldRow}>
               <FormSwitchWrapper
                 value="bucket_quota"
                 id="bucket_quota"
@@ -145,7 +146,7 @@ const EnableQuota = ({
             </Grid>
             {quotaEnabled && (
               <React.Fragment>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.formFieldRow}>
                   <RadioGroupSelector
                     currentSelection={quotaType}
                     id="quota_type"
@@ -160,7 +161,7 @@ const EnableQuota = ({
                     ]}
                   />
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.formFieldRow}>
                   <Grid container>
                     <Grid item xs={10}>
                       <InputBoxWrapper
@@ -194,11 +195,20 @@ const EnableQuota = ({
                 </Grid>
               </React.Fragment>
             )}
-            <Grid item xs={12}>
-              <br />
-            </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
+              type="button"
+              variant="outlined"
+              color="primary"
+              disabled={loading}
+              onClick={() => {
+                closeModalAndRefresh();
+              }}
+            >
+              Cancel
+            </Button>
+
             <Button
               type="submit"
               variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
index d8f751609..694c098ea 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
@@ -16,18 +16,11 @@
 
 import React, { useState, Fragment } from "react";
 import { connect } from "react-redux";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  LinearProgress,
-} from "@mui/material";
+import { DialogContentText } from "@mui/material";
 import api from "../../../../common/api";
 import { setErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IVersioningEventProps {
   closeVersioningModalAndRefresh: (refresh: boolean) => void;
@@ -67,17 +60,20 @@ const EnableVersioningModal = ({
   };
 
   return (
-    <Dialog
-      open={modalOpen}
+    <ConfirmDialog
+      title={`Versioning on Bucket`}
+      confirmText={versioningCurrentState ? "Disable" : "Enable"}
+      isOpen={modalOpen}
+      isLoading={versioningLoading}
+      onConfirm={enableVersioning}
+      confirmButtonProps={{
+        color: "primary",
+        variant: "contained",
+      }}
       onClose={() => {
         closeVersioningModalAndRefresh(false);
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title">Edit Versioning</DialogTitle>
-      <DialogContent>
-        {versioningLoading && <LinearProgress />}
+      confirmationContent={
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to{" "}
           <strong>{versioningCurrentState ? "disable" : "enable"}</strong>{" "}
@@ -86,32 +82,12 @@ const EnableVersioningModal = ({
             <Fragment>
               <br />
               <br />
-              <strong>File versions won't be automatically deleted</strong>
+              <strong>File versions won't be automatically deleted.</strong>
             </Fragment>
           )}
         </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => {
-            closeVersioningModalAndRefresh(false);
-          }}
-          color="primary"
-          disabled={versioningLoading}
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={() => {
-            enableVersioning();
-          }}
-          color="secondary"
-          autoFocus
-        >
-          {versioningCurrentState ? "Disable" : "Enable"}
-        </Button>
-      </DialogActions>
-    </Dialog>
+      }
+    />
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
index c05fa829c..eb9eee20c 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
@@ -16,12 +16,15 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
+import { Button, SelectChangeEvent } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  modalStyleUtils,
+  spacingUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
@@ -30,7 +33,8 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...spacingUtils,
   });
 
 interface ISetAccessPolicyProps {
@@ -92,39 +96,46 @@ const SetAccessPolicy = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12}>
-              <SelectWrapper
-                value={accessPolicy}
-                label="Access Policy"
-                id="select-access-policy"
-                name="select-access-policy"
-                onChange={(e: SelectChangeEvent<string>) => {
-                  setAccessPolicy(e.target.value as string);
-                }}
-                options={[
-                  { value: "PRIVATE", label: "Private" },
-                  { value: "PUBLIC", label: "Public" },
-                ]}
-              />
-            </Grid>
+          <Grid
+            item
+            xs={12}
+            className={`${classes.spacerTop} ${classes.formFieldRow}`}
+          >
+            <SelectWrapper
+              value={accessPolicy}
+              label="Access Policy"
+              id="select-access-policy"
+              name="select-access-policy"
+              onChange={(e: SelectChangeEvent<string>) => {
+                setAccessPolicy(e.target.value as string);
+              }}
+              options={[
+                { value: "PRIVATE", label: "Private" },
+                { value: "PUBLIC", label: "Public" },
+              ]}
+            />
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
+              type="button"
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                closeModalAndRefresh();
+              }}
+              disabled={addLoading}
+            >
+              Cancel
+            </Button>
             <Button
               type="submit"
               variant="contained"
               color="primary"
-              fullWidth
               disabled={addLoading}
             >
               Set
             </Button>
           </Grid>
-          {addLoading && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
         </Grid>
       </form>
     </ModalWrapper>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
index e7f021317..42485ed6a 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
@@ -21,7 +21,12 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  createTenantCommon,
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import {
   ErrorResponseHandler,
@@ -34,7 +39,10 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...modalBasic,
+    ...spacingUtils,
+    ...createTenantCommon,
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 interface ISetRetentionConfigProps {
@@ -126,8 +134,8 @@ const SetRetentionConfig = ({
           }}
         >
           <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              <Grid item xs={12}>
+            <Grid item xs={12} className={classes.modalFormScrollable}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <RadioGroupSelector
                   currentSelection={retentionMode}
                   id="retention_mode"
@@ -142,7 +150,7 @@ const SetRetentionConfig = ({
                   ]}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <RadioGroupSelector
                   currentSelection={retentionUnit}
                   id="retention_unit"
@@ -157,7 +165,7 @@ const SetRetentionConfig = ({
                   ]}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
                   type="number"
                   id="retention_validity"
@@ -172,12 +180,22 @@ const SetRetentionConfig = ({
                 />
               </Grid>
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.modalButtonBar}>
+              <Button
+                type="button"
+                variant="outlined"
+                color="primary"
+                disabled={addLoading}
+                onClick={() => {
+                  closeModalAndRefresh();
+                }}
+              >
+                Cancel
+              </Button>
               <Button
                 type="submit"
                 variant="contained"
                 color="primary"
-                fullWidth
                 disabled={addLoading || !valid}
               >
                 Set
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
index d5cd72971..feb3a0b00 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
@@ -21,7 +21,10 @@ import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/I
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 import { connect } from "react-redux";
 import { setFileModeEnabled } from "../../../../ObjectBrowser/actions";
 import history from "../../../../../../history";
@@ -42,14 +45,8 @@ interface ICreateFolder {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...formFieldStyles,
   });
 
 const CreateFolderModal = ({
@@ -112,8 +109,10 @@ const CreateFolderModal = ({
         onClose={onClose}
       >
         <Grid container>
-          <h3 className={classes.pathLabel}>Current Path: {currentPath}</h3>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
+            Current Path: {currentPath}
+          </Grid>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <InputBoxWrapper
               value={pathUrl}
               label={"New Folder Path"}
@@ -126,15 +125,15 @@ const CreateFolderModal = ({
               required
             />
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
-            <button
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
               type="button"
               color="primary"
-              className={classes.clearButton}
+              variant="outlined"
               onClick={resetForm}
             >
               Clear
-            </button>
+            </Button>
             <Button
               type="submit"
               variant="contained"
@@ -142,7 +141,7 @@ const CreateFolderModal = ({
               disabled={!isFormValid}
               onClick={createProcess}
             >
-              Go
+              Create
             </Button>
           </Grid>
         </Grid>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
index f7791a07a..969f8510c 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
@@ -21,7 +21,6 @@ import { Button, Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../../../actions";
 import { AppState } from "../../../../../../store";
 import { ErrorResponseHandler } from "../../../../../../common/types";
@@ -29,6 +28,11 @@ import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/I
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import api from "../../../../../../common/api";
 import { decodeFileName } from "../../../../../../common/utils";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 
 interface ITagModal {
   modalOpen: boolean;
@@ -44,14 +48,13 @@ interface ITagModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     pathLabel: {
       marginTop: 0,
       marginBottom: 32,
     },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
+    ...spacingUtils,
   });
 
 const AddTagModal = ({
@@ -103,48 +106,48 @@ const AddTagModal = ({
     <React.Fragment>
       <ModalWrapper
         modalOpen={modalOpen}
-        title="Add New Tag"
+        title="Add New Tag to the Object"
         onClose={() => {
           onCloseAndUpdate(false);
         }}
       >
         <Grid container>
-          <h3 className={classes.pathLabel}>
-            Selected Object: {decodeFileName(selectedObject)}
-          </h3>
-          <Grid item xs={12}>
+          <div className={classes.spacerBottom}>
+            <strong>Selected Object</strong>: {decodeFileName(selectedObject)}
+          </div>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <InputBoxWrapper
               value={newKey}
-              label={"New Tag Key"}
+              label={"Tag Key"}
               id={"newTagKey"}
               name={"newTagKey"}
-              placeholder={"Enter New Tag Key"}
+              placeholder={"Enter Tag Key"}
               onChange={(e) => {
                 setNewKey(e.target.value);
               }}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <InputBoxWrapper
               value={newLabel}
-              label={"New Tag Label"}
+              label={"Tag Label"}
               id={"newTagLabel"}
               name={"newTagLabel"}
-              placeholder={"Enter New Tag Label"}
+              placeholder={"Enter Tag Label"}
               onChange={(e) => {
                 setNewLabel(e.target.value);
               }}
             />
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
-            <button
+          <Grid item xs={12} className={classes.modalButtonBar}>
+            <Button
               type="button"
+              variant="outlined"
               color="primary"
-              className={classes.clearButton}
               onClick={resetForm}
             >
               Clear
-            </button>
+            </Button>
             <Button
               type="submit"
               variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
index 275e546a1..85f19b2db 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
@@ -22,7 +22,11 @@ import withStyles from "@mui/styles/withStyles";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
-import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../../../actions";
 import { IFileInfo } from "./types";
 import { ErrorResponseHandler } from "../../../../../../common/types";
@@ -33,15 +37,9 @@ import { encodeFileName } from "../../../../../../common/utils";
 
 const styles = (theme: Theme) =>
   createStyles({
-    objectName: {
-      fontSize: 18,
-      fontWeight: 700,
-      marginBottom: 40,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
+    ...spacingUtils,
   });
 
 interface ISetRetentionProps {
@@ -107,9 +105,10 @@ const SetLegalHoldModal = ({
         closeModalAndRefresh(false);
       }}
     >
-      <Grid item xs={12} className={classes.objectName}>
-        {objectName}
+      <Grid item xs={12} className={classes.spacerBottom}>
+        Object: {bucketName}
       </Grid>
+
       <form
         noValidate
         autoComplete="off"
@@ -117,7 +116,7 @@ const SetLegalHoldModal = ({
           onSubmit(e);
         }}
       >
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <FormSwitchWrapper
             value="legalhold"
             id="legalhold"
@@ -133,15 +132,15 @@ const SetLegalHoldModal = ({
             }
           />
         </Grid>
-        <Grid item xs={12} className={classes.buttonContainer}>
-          <button
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
             type="button"
             color="primary"
-            className={classes.clearButton}
+            variant="outlined"
             onClick={resetForm}
           >
-            Reset
-          </button>
+            Clear
+          </Button>
           <Button
             type="submit"
             variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
index 3a7a5fbe8..37f2a6d0f 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
@@ -21,7 +21,11 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
-import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+  spacingUtils,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 import { IFileInfo } from "./types";
 import { setModalErrorSnackMessage } from "../../../../../../actions";
 import { twoDigitDate } from "../../../../Common/FormComponents/DateSelector/utils";
@@ -35,15 +39,24 @@ import { encodeFileName } from "../../../../../../common/utils";
 
 const styles = (theme: Theme) =>
   createStyles({
-    objectName: {
-      fontSize: 18,
-      fontWeight: 700,
-      marginBottom: 40,
+    ...formFieldStyles,
+    ...modalStyleUtils,
+    ...spacingUtils,
+    dateSelector: {
+      "& div": {
+        borderBottom: 0,
+        marginBottom: 0,
+
+        "& div:nth-child(2)": {
+          border: "1px solid #EAEAEA",
+          paddingLeft: 5,
+
+          "& div": {
+            border: 0,
+          },
+        },
+      },
     },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    ...modalBasic,
   });
 
 interface ISetRetentionProps {
@@ -190,9 +203,9 @@ const SetRetention = ({
         closeModalAndRefresh(false);
       }}
     >
-      <Grid item xs={12} className={classes.objectName}>
-        {objectName}
-      </Grid>
+      <div className={classes.spacerBottom}>
+        <strong>Selected Object</strong>: {objectName}
+      </div>
       <form
         noValidate
         autoComplete="off"
@@ -201,7 +214,7 @@ const SetRetention = ({
         }}
       >
         {showSwitcher && (
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <FormSwitchWrapper
               value="status"
               id="status"
@@ -215,7 +228,7 @@ const SetRetention = ({
             />
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <RadioGroupSelector
             currentSelection={type}
             id="type"
@@ -233,7 +246,7 @@ const SetRetention = ({
             ]}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={`${classes.dateSelector} `}>
           <DateSelector
             id="date"
             label="Date"
@@ -249,15 +262,15 @@ const SetRetention = ({
             }}
           />
         </Grid>
-        <Grid item xs={12} className={classes.buttonContainer}>
-          <button
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
             type="button"
+            variant="outlined"
             color="primary"
-            className={classes.clearButton}
             onClick={resetForm}
           >
             Reset
-          </button>
+          </Button>
           <Button
             type="submit"
             variant="contained"
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
index beb717133..fd9d661a2 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
@@ -24,7 +24,10 @@ import CopyToClipboard from "react-copy-to-clipboard";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
 import LinearProgress from "@mui/material/LinearProgress";
-import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 
 import { IFileInfo } from "./types";
 import {
@@ -43,14 +46,36 @@ const CopyIcon = React.lazy(() => import("../../../../../../icons/CopyIcon"));
 
 const styles = (theme: Theme) =>
   createStyles({
-    copyButtonContainer: {
-      paddingLeft: 16,
-      paddingTop: 18,
+    shareLinkInfo: {
+      fontSize: 13,
+      fontWeight: 400,
     },
-    modalContent: {
-      paddingBottom: 53,
+    copyShareLink: {
+      display: "flex",
+      "@media (max-width: 900px)": {
+        flexFlow: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      },
     },
-    ...modalBasic,
+    copyShareLinkInput: {
+      "& div:first-child": {
+        marginTop: 0,
+      },
+      "@media (max-width: 900px)": {
+        minWidth: 250,
+      },
+    },
+    copyShareLinkBtn: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "@media (max-width: 900px)": {
+        marginTop: 10,
+      },
+    },
+    ...modalStyleUtils,
+    ...formFieldStyles,
   });
 
 interface IShareFileProps {
@@ -189,53 +214,56 @@ const ShareFile = ({
           closeModalAndRefresh();
         }}
       >
-        <Grid container className={classes.modalContent}>
-          {isLoadingVersion && (
-            <Grid item xs={12}>
-              <LinearProgress />
+        {isLoadingVersion && (
+          <Grid item xs={12}>
+            <LinearProgress />
+          </Grid>
+        )}
+        {!isLoadingVersion && (
+          <Fragment>
+            <Grid item xs={12} className={classes.shareLinkInfo}>
+              This is a temporary URL with integrated access credentials for
+              sharing objects valid for up to 7 days.
+              <br />
+              The temporary URL expires after the configured time limit.
             </Grid>
-          )}
-          {!isLoadingVersion && (
-            <Fragment>
-              <Grid item xs={12} className={classes.moduleDescription}>
-                This module generates a temporary URL with integrated access
-                credentials for sharing objects for up to 7 days.
-                <br />
-                The temporary URL expires after the configured time limit.
+            <Grid item xs={12} className={classes.dateContainer}>
+              <DaysSelector
+                initialDate={initialDate}
+                id="date"
+                label="Active for"
+                maxDays={7}
+                onChange={dateChanged}
+                entity="Link"
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              className={`${classes.copyShareLink} ${classes.formFieldRow} `}
+            >
+              <Grid item xs={10} className={classes.copyShareLinkInput}>
+                <PredefinedList content={shareURL} />
               </Grid>
-              <Grid item xs={12} className={classes.dateContainer}>
-                <DaysSelector
-                  initialDate={initialDate}
-                  id="date"
-                  label="Active for"
-                  maxDays={7}
-                  onChange={dateChanged}
-                  entity="Link"
-                />
+
+              <Grid item xs={2} className={classes.copyShareLinkBtn}>
+                <CopyToClipboard text={shareURL}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    endIcon={<CopyIcon />}
+                    onClick={() => {
+                      setModalSnackMessage("Share URL Copied to clipboard");
+                    }}
+                    disabled={shareURL === "" || isLoadingFile}
+                  >
+                    Copy
+                  </Button>
+                </CopyToClipboard>
               </Grid>
-              <Grid container item xs={12}>
-                <Grid item xs={10}>
-                  <PredefinedList content={shareURL} />
-                </Grid>
-                <Grid item xs={2} className={classes.copyButtonContainer}>
-                  <CopyToClipboard text={shareURL}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      endIcon={<CopyIcon />}
-                      onClick={() => {
-                        setModalSnackMessage("Share URL Copied to clipboard");
-                      }}
-                      disabled={shareURL === "" || isLoadingFile}
-                    >
-                      Copy
-                    </Button>
-                  </CopyToClipboard>
-                </Grid>
-              </Grid>
-            </Fragment>
-          )}
-        </Grid>
+            </Grid>
+          </Fragment>
+        )}
       </ModalWrapper>
     </React.Fragment>
   );
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
index c69996112..2af274656 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
@@ -41,6 +41,7 @@ const styles = (theme: Theme) =>
     labelContainer: {
       display: "flex",
       alignItems: "center",
+      marginBottom: 15,
     },
     fieldContainer: {
       ...fieldBasic.fieldContainer,
@@ -59,6 +60,34 @@ const styles = (theme: Theme) =>
     dateInputContainer: {
       margin: "0 10px",
     },
+    durationInputs: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+
+    validityIndicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    invalidDurationText: {
+      marginTop: 15,
+      display: "flex",
+      color: "red",
+      fontSize: 11,
+    },
+    validityText: {
+      fontSize: 14,
+      fontWeight: 600,
+      marginTop: 15,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "@media (max-width: 900px)": {
+        flexFlow: "column",
+      },
+    },
   });
 
 const calculateNewTime = (
@@ -156,74 +185,85 @@ const DaysSelector = ({
 
   return (
     <Fragment>
-      <Grid item xs={12} className={classes.fieldContainer}>
-        <Grid container alignItems={"center"} justifyContent={"center"}>
+      <Grid container className={classes.fieldContainer}>
+        <Grid item xs={12} alignItems={"center"} justifyContent={"center"}>
           <Grid item xs={12} className={classes.labelContainer}>
             <InputLabel htmlFor={id} className={classes.inputLabel}>
               <span>{label}</span>
             </InputLabel>
           </Grid>
-          <Grid item className={classes.dateInputContainer}>
-            <InputBoxWrapper
-              id={id}
-              type="number"
-              min="0"
-              max={maxDays ? maxDays.toString() : "999"}
-              label="Days"
-              name={id}
-              onChange={(e) => {
-                setSelectedDays(parseInt(e.target.value));
-              }}
-              value={selectedDays.toString()}
-              extraInputProps={extraInputProps}
-              noLabelMinWidth
-            />
-          </Grid>
-          <Grid item className={classes.dateInputContainer}>
-            <InputBoxWrapper
-              id={id}
-              type="number"
-              min="0"
-              max="23"
-              label="Hours"
-              name={id}
-              onChange={(e) => {
-                setSelectedHours(parseInt(e.target.value));
-              }}
-              value={selectedHours.toString()}
-              extraInputProps={extraInputProps}
-              noLabelMinWidth
-            />
-          </Grid>
-          <Grid item className={classes.dateInputContainer}>
-            <InputBoxWrapper
-              id={id}
-              type="number"
-              min="0"
-              max="59"
-              label="Minutes"
-              name={id}
-              onChange={(e) => {
-                setSelectedMinutes(parseInt(e.target.value));
-              }}
-              value={selectedMinutes.toString()}
-              extraInputProps={extraInputProps}
-              noLabelMinWidth
-            />
+          <Grid item xs={12} className={classes.durationInputs}>
+            <Grid item className={classes.dateInputContainer}>
+              <InputBoxWrapper
+                id={id}
+                type="number"
+                min="0"
+                max={maxDays ? maxDays.toString() : "999"}
+                label="Days"
+                name={id}
+                onChange={(e) => {
+                  setSelectedDays(parseInt(e.target.value));
+                }}
+                value={selectedDays.toString()}
+                extraInputProps={extraInputProps}
+                noLabelMinWidth
+              />
+            </Grid>
+            <Grid item className={classes.dateInputContainer}>
+              <InputBoxWrapper
+                id={id}
+                type="number"
+                min="0"
+                max="23"
+                label="Hours"
+                name={id}
+                onChange={(e) => {
+                  setSelectedHours(parseInt(e.target.value));
+                }}
+                value={selectedHours.toString()}
+                extraInputProps={extraInputProps}
+                noLabelMinWidth
+              />
+            </Grid>
+            <Grid item className={classes.dateInputContainer}>
+              <InputBoxWrapper
+                id={id}
+                type="number"
+                min="0"
+                max="59"
+                label="Minutes"
+                name={id}
+                onChange={(e) => {
+                  setSelectedMinutes(parseInt(e.target.value));
+                }}
+                value={selectedMinutes.toString()}
+                extraInputProps={extraInputProps}
+                noLabelMinWidth
+              />
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
-      <Grid container>
-        <Grid item xs={12} className={classes.dateContainer}>
-          {validDate && (
-            <Fragment>
-              <strong>{entity} will be available until:</strong>{" "}
-              {dateSelected.format("MM/DD/YYYY HH:mm:ss")}
-            </Fragment>
+        <Grid
+          item
+          xs={12}
+          className={`${classes.validityIndicator} ${classes.formFieldRow}`}
+        >
+          {validDate ? (
+            <div className={classes.validityText}>
+              <div className={classes.validityLabel}>
+                {entity} will be available until:
+              </div>{" "}
+              <div className={classes.validTill}>
+                {dateSelected.format("MM/DD/YYYY HH:mm:ss")}
+              </div>
+            </div>
+          ) : (
+            <div className={classes.invalidDurationText}>
+              Please select a valid duration.
+            </div>
           )}
         </Grid>
       </Grid>
-      <br />
     </Fragment>
   );
 };
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
index 6849c917a..2a44c1472 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
@@ -59,6 +59,7 @@ const styles = (theme: Theme) =>
     },
     lineInputBoxes: {
       display: "flex",
+      marginBottom: 10,
     },
     queryDiv: {
       alignSelf: "center",
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 53981dbb8..8256f08a4 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -736,8 +736,7 @@ export const wizardCommon = {
     margin: 0,
   },
   descriptionText: {
-    fontSize: 13,
-    color: "#777777",
+    fontSize: 14,
   },
   container: {
     padding: "77px 0 0 0",
@@ -1110,6 +1109,12 @@ export const spacingUtils: any = {
   spacerLeft: {
     marginLeft: ".9rem",
   },
+  spacerBottom: {
+    marginBottom: ".9rem",
+  },
+  spacerTop: {
+    marginTop: ".9rem",
+  },
 };
 
 export const formFieldStyles = {
@@ -1161,6 +1166,10 @@ export const deleteDialogStyles = {
       top: -20,
       left: 30,
       position: "relative",
+      padding: 1,
+      "&:focus, &:hover": {
+        background: "#EAEAEA",
+      },
     },
     "& .min-icon": {
       height: 16,
@@ -1208,6 +1217,30 @@ export const advancedFilterToggleStyles: any = {
 export const createTenantCommon: any = {
   fieldGroup: {
     border: "1px solid #EAEAEA",
-    paddingTop: 5,
+    paddingTop: 15,
+  },
+  descriptionText: {
+    fontSize: 16,
+  },
+};
+
+export const modalStyleUtils: any = {
+  modalButtonBar: {
+    marginTop: 15,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+
+    "& button": {
+      marginRight: 10,
+    },
+    "& button:last-child": {
+      marginRight: 0,
+    },
+  },
+  modalFormScrollable: {
+    maxHeight: "calc(100vh - 300px)",
+    overflowY: "auto",
+    paddingTop: 10,
   },
 };
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
index 15a71a896..c4de9fecc 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
@@ -58,9 +58,6 @@ const ConfirmDialog = ({
         }
       }}
       className={classes.root}
-      onBackdropClick={() => {
-        return false;
-      }}
       sx={{
         "& .MuiPaper-root": {
           padding: "1rem 2rem 2rem 1rem",
@@ -104,12 +101,12 @@ const ConfirmDialog = ({
           onClick={onConfirm}
           loading={isLoading}
           disabled={isLoading}
-          {...confirmButtonProps}
           variant="outlined"
           color="secondary"
           loadingPosition="start"
-          startIcon={null}
+          startIcon={<React.Fragment />}
           autoFocus
+          {...confirmButtonProps}
         >
           {confirmText}
         </LoadingButton>
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
index 17c456d14..1565c12c2 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
@@ -21,11 +21,15 @@ import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { snackBarCommon } from "../FormComponents/common/styleLibrary";
+import {
+  deleteDialogStyles,
+  snackBarCommon,
+} from "../FormComponents/common/styleLibrary";
 import { AppState } from "../../../../store";
 import { snackBarMessage } from "../../../../types";
 import { setModalSnackMessage } from "../../../../actions";
 import ModalError from "../FormComponents/ModalError/ModalError";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface IModalProps {
   classes: any;
@@ -39,63 +43,17 @@ interface IModalProps {
   setModalSnackMessage: typeof setModalSnackMessage;
 }
 
-const baseCloseLine = {
-  content: '" "',
-  borderLeft: "2px solid #9C9C9C",
-  height: 33,
-  width: 1,
-  position: "absolute",
-};
-
 const styles = (theme: Theme) =>
   createStyles({
-    dialogContainer: {
-      padding: "8px 15px 22px",
-    },
-    closeContainer: {
-      textAlign: "right",
-    },
-    closeButton: {
-      height: 16,
-      width: 16,
-      padding: 0,
-      backgroundColor: "initial",
-      "&:hover": {
-        backgroundColor: "initial",
-      },
-      "&:active": {
-        backgroundColor: "initial",
+    ...deleteDialogStyles,
+    root: {
+      "& .MuiPaper-root": {
+        padding: "1rem 2rem 2rem 1rem",
       },
     },
-    closeIcon: {
-      "&::before": {
-        ...baseCloseLine,
-        transform: "rotate(45deg)",
-        height: 12,
-      },
-      "&::after": {
-        ...baseCloseLine,
-        transform: "rotate(-45deg)",
-        height: 12,
-      },
-      "&:hover::before, &:hover::after": {
-        borderColor: "#9C9C9C",
-      },
-      display: "block",
-      position: "relative",
-      height: 12,
-      width: 12,
-    },
-    titleClass: {
-      padding: "0px 50px 12px",
-      fontSize: "1.2rem",
-      fontWeight: 600,
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-    },
-    modalContent: {
-      padding: "0 50px",
+    content: {
+      padding: 25,
+      paddingBottom: 0,
     },
     customDialogSize: {
       width: "100%",
@@ -162,51 +120,53 @@ const ModalWrapper = ({
   return (
     <Dialog
       open={modalOpen}
-      onClose={onClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
+      classes={classes}
       {...customSize}
+      scroll={"paper"}
+      onClose={(event, reason) => {
+        if (reason !== "backdropClick") {
+          onClose(); // close on Esc but not on click outside
+        }
+      }}
+      className={classes.root}
     >
-      <div className={classes.dialogContainer}>
-        <ModalError />
-        <Snackbar
-          open={openSnackbar}
-          className={classes.snackBarModal}
-          onClose={() => {
-            closeSnackBar();
-          }}
-          message={message}
-          ContentProps={{
-            className: `${classes.snackBar} ${
-              modalSnackMessage && modalSnackMessage.type === "error"
-                ? classes.errorSnackBar
-                : ""
-            }`,
-          }}
-          autoHideDuration={
-            modalSnackMessage && modalSnackMessage.type === "error"
-              ? 10000
-              : 5000
-          }
-        />
+      <DialogTitle className={classes.title}>
+        <div className={classes.titleText}>{title}</div>
         <div className={classes.closeContainer}>
           <IconButton
             aria-label="close"
             className={classes.closeButton}
             onClick={onClose}
             disableRipple
-            size="large"
+            size="small"
           >
-            <span className={classes.closeIcon} />
+            <CloseIcon />
           </IconButton>
         </div>
-        <DialogTitle id="alert-dialog-title" className={classes.titleClass}>
-          {title}
-        </DialogTitle>
-        <DialogContent className={noContentPadding ? "" : classes.modalContent}>
-          {children}
-        </DialogContent>
-      </div>
+      </DialogTitle>
+
+      <ModalError />
+      <Snackbar
+        open={openSnackbar}
+        className={classes.snackBarModal}
+        onClose={() => {
+          closeSnackBar();
+        }}
+        message={message}
+        ContentProps={{
+          className: `${classes.snackBar} ${
+            modalSnackMessage && modalSnackMessage.type === "error"
+              ? classes.errorSnackBar
+              : ""
+          }`,
+        }}
+        autoHideDuration={
+          modalSnackMessage && modalSnackMessage.type === "error" ? 10000 : 5000
+        }
+      />
+      <DialogContent className={noContentPadding ? "" : classes.content}>
+        {children}
+      </DialogContent>
     </Dialog>
   );
 };
diff --git a/portal-ui/src/screens/Console/DirectCSI/FormatDrives.tsx b/portal-ui/src/screens/Console/DirectCSI/FormatDrives.tsx
index e205a6935..54d22d57f 100644
--- a/portal-ui/src/screens/Console/DirectCSI/FormatDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/FormatDrives.tsx
@@ -16,16 +16,7 @@
 
 import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Grid,
-  LinearProgress,
-} from "@mui/material";
+import { DialogContentText, Grid, LinearProgress } from "@mui/material";
 import { setErrorSnackMessage } from "../../../actions";
 import { IDirectCSIFormatResItem, IDirectCSIFormatResult } from "./types";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -33,6 +24,7 @@ import api from "../../../common/api";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 
 interface IFormatAllDrivesProps {
   closeFormatModalAndRefresh: (
@@ -76,86 +68,74 @@ const FormatDrives = ({
       });
   };
   return (
-    <Dialog
-      open={deleteOpen}
+    <ConfirmDialog
+      title={`Format ${allDrives ? "All " : ""} Drives`}
+      confirmText={`Format Drive${
+        drivesToFormat.length > 1 || allDrives ? "s" : ""
+      }`}
+      confirmButtonProps={{
+        disabled: formatAll !== "YES, PROCEED",
+      }}
+      isOpen={deleteOpen}
+      isLoading={deleteLoading}
+      onConfirm={removeRecord}
       onClose={() => {
         closeFormatModalAndRefresh(false, []);
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title">
-        Format {allDrives ? "All " : ""}Drives
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          {!allDrives && (
-            <Fragment>
-              <PredefinedList
-                label={`Selected Drive${drivesToFormat.length > 1 ? "s" : ""}`}
-                content={drivesToFormat.join(", ")}
+      confirmationContent={
+        <React.Fragment>
+          <DialogContentText>
+            {!allDrives && (
+              <Fragment>
+                <PredefinedList
+                  label={`Selected Drive${
+                    drivesToFormat.length > 1 ? "s" : ""
+                  }`}
+                  content={drivesToFormat.join(", ")}
+                />
+                <br />
+              </Fragment>
+            )}
+            <Grid item xs={12}>
+              <FormSwitchWrapper
+                value="force"
+                id="force"
+                name="force"
+                checked={force}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setForce(event.target.checked);
+                }}
+                label={"Force Format"}
+                indicatorLabels={["Yes", "No"]}
               />
-              <br />
-            </Fragment>
-          )}
-          <Grid item xs={12}>
-            <FormSwitchWrapper
-              value="force"
-              id="force"
-              name="force"
-              checked={force}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                setForce(event.target.checked);
-              }}
-              label={"Force Format"}
-              indicatorLabels={["Yes", "No"]}
-            />
-          </Grid>
-          Are you sure you want to format{" "}
-          {allDrives ? <strong>All</strong> : "the selected"} drive
-          {drivesToFormat.length > 1 || allDrives ? "s" : ""}?.
-          <br />
-          <br />
-          <strong>
-            All information contained will be erased and cannot be recovered
-          </strong>
-          <br />
-          <br />
-          To continue please type <b>YES, PROCEED</b> in the box.
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              id="format-confirm"
-              name="format-confirm"
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                setFormatAll(event.target.value);
-              }}
-              label=""
-              value={formatAll}
-            />
-          </Grid>
-        </DialogContentText>
-      </DialogContent>
-      {deleteLoading && <LinearProgress />}
-      <DialogActions>
-        <Button
-          onClick={() => {
-            closeFormatModalAndRefresh(false, []);
-          }}
-          color="primary"
-          disabled={deleteLoading}
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={removeRecord}
-          color="secondary"
-          autoFocus
-          disabled={formatAll !== "YES, PROCEED"}
-        >
-          Format Drive{drivesToFormat.length > 1 || allDrives ? "s" : ""}
-        </Button>
-      </DialogActions>
-    </Dialog>
+            </Grid>
+            Are you sure you want to format{" "}
+            {allDrives ? <strong>All</strong> : "the selected"} drive
+            {drivesToFormat.length > 1 || allDrives ? "s" : ""}?.
+            <br />
+            <br />
+            <strong>
+              All information contained will be erased and cannot be recovered
+            </strong>
+            <br />
+            <br />
+            To continue please type <b>YES, PROCEED</b> in the box.
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="format-confirm"
+                name="format-confirm"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setFormatAll(event.target.value);
+                }}
+                label=""
+                value={formatAll}
+              />
+            </Grid>
+          </DialogContentText>
+          {deleteLoading && <LinearProgress />}
+        </React.Fragment>
+      }
+    />
   );
 };
 
diff --git a/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx b/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
index a3422e47a..9d1edc635 100644
--- a/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
@@ -21,6 +21,7 @@ import React from "react";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { IDirectCSIFormatResItem } from "./types";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 
 interface IFormatErrorsProps {
   open: boolean;
@@ -37,6 +38,7 @@ const styles = (theme: Theme) =>
     errorsList: {
       height: "calc(100vh - 280px)",
     },
+    ...modalStyleUtils,
   });
 
 const download = (filename: string, text: string) => {
@@ -68,7 +70,7 @@ const FormatErrorsResult = ({
       onClose={onCloseFormatErrorsList}
     >
       <Grid container>
-        <Grid item xs={12} className={classes.formScrollable}>
+        <Grid item xs={12} className={classes.modalFormScrollable}>
           There were some issues trying to format the selected CSI Drives,
           please fix the issues and try again.
           <br />
@@ -90,16 +92,22 @@ const FormatErrorsResult = ({
             noBackground
           />
         </Grid>
-        <Grid item xs={12} className={classes.buttonContainer}>
+        <Grid item xs={12} className={classes.modalButtonBar}>
           <Button
+            color="primary"
+            variant="outlined"
             onClick={() => {
               download("csiFormatErrors.json", JSON.stringify([...errorsList]));
             }}
-            color="primary"
           >
             Download
           </Button>
-          <Button onClick={onCloseFormatErrorsList} color="secondary" autoFocus>
+          <Button
+            onClick={onCloseFormatErrorsList}
+            color="primary"
+            variant="contained"
+            autoFocus
+          >
             Done
           </Button>
         </Grid>
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index ac250088a..804eee09e 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -23,7 +23,7 @@ import { Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import {
   formFieldStyles,
-  modalBasic,
+  modalStyleUtils,
   spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
@@ -54,9 +54,15 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
+    userSelector: {
+      "& .MuiPaper-root": {
+        padding: 0,
+        marginBottom: 15,
+      },
+    },
     ...formFieldStyles,
     ...spacingUtils,
-    ...modalBasic,
+    ...modalStyleUtils,
   });
 
 const AddGroup = ({
@@ -191,7 +197,7 @@ const AddGroup = ({
       )}
       <form noValidate autoComplete="off" onSubmit={setSaving}>
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
             {selectedGroup === null ? (
               <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
@@ -205,11 +211,11 @@ const AddGroup = ({
                 />
               </Grid>
             ) : (
-              <React.Fragment>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <PredefinedList label={"Group Name"} content={selectedGroup} />
-              </React.Fragment>
+              </Grid>
             )}
-            <Grid item xs={12}>
+            <Grid item xs={12} className={classes.userSelector}>
               <UsersSelectors
                 selectedUsers={selectedUsers}
                 setSelectedUsers={setSelectedUsers}
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
index 58c63e4ce..d4493d97e 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -13,6 +13,7 @@ import createStyles from "@mui/styles/createStyles";
 import {
   formFieldStyles,
   modalBasic,
+  modalStyleUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import withStyles from "@mui/styles/withStyles";
 
@@ -33,6 +34,13 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginTop: "1rem",
     },
+    userSelector: {
+      "& .MuiPaper-root": {
+        padding: 0,
+        marginBottom: 15,
+      },
+    },
+    ...modalStyleUtils,
     ...formFieldStyles,
     ...modalBasic,
   });
@@ -69,18 +77,19 @@ const AddGroupMember = ({
       <div className={classes.formFieldRow}>
         <PredefinedList label={`Selected Group`} content={selectedGroup} />
       </div>
-      <UsersSelectors
-        selectedUsers={selectedUsers}
-        setSelectedUsers={setSelectedUsers}
-        editMode={!selectedGroup}
-      />
+      <div className={classes.userSelector}>
+        <UsersSelectors
+          selectedUsers={selectedUsers}
+          setSelectedUsers={setSelectedUsers}
+          editMode={!selectedGroup}
+        />
+      </div>
 
-      <Grid item xs={12} className={classes.buttonContainer}>
+      <Grid item xs={12} className={classes.modalButtonBar}>
         <Button
           type="button"
           variant="outlined"
           color="primary"
-          className={classes.spacerRight}
           onClick={() => {
             setSelectedUsers(preSelectedUsers);
           }}
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
index d118d17b4..09e68153e 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
@@ -16,27 +16,15 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  LinearProgress,
-} from "@mui/material";
+import { DialogContentText, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import {
-  deleteDialogStyles,
-  modalBasic,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { deleteDialogStyles } from "../../Common/FormComponents/common/styleLibrary";
 import { setErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -45,7 +33,6 @@ const styles = (theme: Theme) =>
       whiteSpace: "normal",
       wordWrap: "break-word",
     },
-    ...modalBasic,
     ...deleteDialogStyles,
   });
 
@@ -91,70 +78,29 @@ const ResetConfigurationModal = ({
   };
 
   return (
-    <Dialog
-      open={resetOpen}
+    <ConfirmDialog
+      title={`Restore Defaults`}
+      confirmText={"Yes, Reset Configuration"}
+      isOpen={resetOpen}
+      isLoading={resetLoading}
+      onConfirm={resetConfiguration}
       onClose={() => {
         closeResetModalAndRefresh(false);
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-      sx={{
-        "& .MuiPaper-root": {
-          padding: "1rem 2rem 2rem 1rem",
-        },
-      }}
-    >
-      <DialogTitle id="alert-dialog-title" className={classes.title}>
-        <div className={classes.titleText}>Restore Defaults</div>
-        <div className={classes.closeContainer}>
-          <IconButton
-            aria-label="close"
-            className={classes.closeButton}
-            onClick={() => {
-              closeResetModalAndRefresh(false);
-            }}
-            disableRipple
-            size="small"
-          >
-            <CloseIcon />
-          </IconButton>
-        </div>
-      </DialogTitle>
-
-      <DialogContent>
-        {resetLoading && <LinearProgress />}
-        <DialogContentText id="alert-dialog-description">
-          Are you sure you want to restore these configurations to default
-          values?
-          <br />
-          <b className={classes.wrapText}>
-            Please note that this may cause your system to not be accessible
-          </b>
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          type="button"
-          variant="outlined"
-          onClick={() => {
-            closeResetModalAndRefresh(false);
-          }}
-          color="primary"
-          disabled={resetLoading}
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={resetConfiguration}
-          variant="contained"
-          color="primary"
-          autoFocus
-          disabled={resetLoading}
-        >
-          Yes, Reset Configuration
-        </Button>
-      </DialogActions>
-    </Dialog>
+      confirmationContent={
+        <React.Fragment>
+          {resetLoading && <LinearProgress />}
+          <DialogContentText>
+            Are you sure you want to restore these configurations to default
+            values?
+            <br />
+            <b className={classes.wrapText}>
+              Please note that this may cause your system to not be accessible
+            </b>
+          </DialogContentText>
+        </React.Fragment>
+      }
+    />
   );
 };
 
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index 0c6d04b91..a532e0cbc 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -74,10 +74,7 @@ const styles = (theme: Theme) =>
     },
     searchField: {
       ...searchField.searchField,
-      minWidth: 380,
-      "@media (max-width: 900px)": {
-        minWidth: 220,
-      },
+      maxWidth: 380,
     },
   });
 
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
index 445b7cdf1..b1658f4c1 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
@@ -26,7 +26,7 @@ import { Policy } from "./types";
 import { setModalErrorSnackMessage } from "../../../actions";
 import {
   fieldBasic,
-  modalBasic,
+  modalStyleUtils,
   spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -53,7 +53,7 @@ const styles = (theme: Theme) =>
       },
     },
     ...spacingUtils,
-    ...modalBasic,
+    ...modalStyleUtils,
     ...fieldBasic,
   });
 
@@ -130,7 +130,7 @@ const AddPolicy = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
+          <Grid item xs={12} className={classes.modalFormScrollable}>
             <Grid item xs={12} className={classes.formFieldRow}>
               <InputBoxWrapper
                 id="policy-name"
@@ -155,13 +155,12 @@ const AddPolicy = ({
               />
             </Grid>
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
             {!policyEdit && (
               <Button
                 type="button"
                 variant="outlined"
                 color="primary"
-                className={classes.spacerRight}
                 onClick={resetForm}
               >
                 Clear
diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
index f53d3db16..9a9c79bd7 100644
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -24,6 +24,7 @@ import Grid from "@mui/material/Grid";
 import { policySort } from "../../../utils/sortFunctions";
 import {
   actionsTray,
+  searchField,
   selectorsCommon,
   tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
@@ -47,23 +48,27 @@ const styles = (theme: Theme) =>
       textAlign: "center",
       padding: "10px 0",
     },
-    filterBox: {
+    searchBox: {
       flex: 1,
     },
-    searchField: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: ".9rem",
-    },
     fieldLabel: {
-      fontWeight: 600,
+      fontWeight: 400,
       width: 160,
       marginRight: 10,
     },
     tableBlock: {
       ...tableStyles.tableBlock,
     },
+    filterBox: {
+      display: "flex",
+      marginBottom: 15,
+      alignItems: "center",
+      "& span": {
+        fontSize: 14,
+      },
+    },
+    ...searchField,
+    ...tableStyles,
     ...actionsTray,
     ...selectorsCommon,
   });
@@ -136,16 +141,14 @@ const PolicySelectors = ({
         {loading && <LinearProgress />}
         {records.length > 0 ? (
           <React.Fragment>
-            <Grid item xs={12} className={classes.searchField}>
+            <Grid item xs={12} className={classes.filterBox}>
               <span className={classes.fieldLabel}>Assign Policies</span>
-
-              <div className={classes.filterBox}>
+              <div className={classes.searchBox}>
                 <SearchBox
-                  placeholder="Filter by Policy"
+                  placeholder="Filter Policy"
                   onChange={(value) => {
                     setFilter(value);
                   }}
-                  overrideClass={classes.searchField}
                 />
               </div>
             </Grid>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
index 258cce3a9..bb0f2c423 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
@@ -503,7 +503,9 @@ const Encryption = ({
                   <Grid container>
                     <Grid item xs={12} style={{ marginBottom: 15 }}>
                       <fieldset className={classes.fieldGroup}>
-                        <legend>Encryption Service Certificates</legend>
+                        <legend className={classes.descriptionText}>
+                          Encryption Service Certificates
+                        </legend>
                         <FileSelector
                           onChange={(encodedValue, fileName) => {
                             addFileServerCert("key", fileName, encodedValue);
@@ -537,7 +539,9 @@ const Encryption = ({
                   <Grid container style={{ marginBottom: 15 }}>
                     <Grid item xs={12}>
                       <fieldset className={classes.fieldGroup}>
-                        <legend>Mutual TLS authentication</legend>
+                        <legend className={classes.descriptionText}>
+                          Mutual TLS authentication
+                        </legend>
                         <FileSelector
                           onChange={(encodedValue, fileName) => {
                             addFileClientCert("key", fileName, encodedValue);
@@ -620,7 +624,7 @@ const Encryption = ({
 
               <Grid item xs={12}>
                 <fieldset className={classes.fieldGroup}>
-                  <legend>App Role</legend>
+                  <legend className={classes.descriptionText}>App Role</legend>
                   <Grid item xs={12} className={classes.formFieldRow}>
                     <InputBoxWrapper
                       id="vault_approle_engine"
@@ -680,7 +684,9 @@ const Encryption = ({
 
               <Grid container className={classes.mutualTlsConfig}>
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Mutual TLS authentication (optional)</legend>
+                  <legend className={classes.descriptionText}>
+                    Mutual TLS authentication (optional)
+                  </legend>
                   <FileSelector
                     onChange={(encodedValue, fileName) => {
                       addFileVaultCert("key", fileName, encodedValue);
@@ -723,7 +729,7 @@ const Encryption = ({
                 style={{ marginTop: 15 }}
               >
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Status</legend>
+                  <legend className={classes.descriptionText}>Status</legend>
                   <InputBoxWrapper
                     type="number"
                     min="0"
@@ -758,7 +764,9 @@ const Encryption = ({
               </Grid>
               <Grid item xs={12}>
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Credentials</legend>
+                  <legend className={classes.descriptionText}>
+                    Credentials
+                  </legend>
                   <Grid item xs={12} className={classes.formFieldRow}>
                     <InputBoxWrapper
                       id="azure_tenant_id"
@@ -828,7 +836,9 @@ const Encryption = ({
               </Grid>
               <Grid item xs={12}>
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Credentials</legend>
+                  <legend className={classes.descriptionText}>
+                    Credentials
+                  </legend>
                   <Grid item xs={12} className={classes.formFieldRow}>
                     <InputBoxWrapper
                       id="gcp_client_email"
@@ -920,7 +930,9 @@ const Encryption = ({
               </Grid>
               <Grid item xs={12}>
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Credentials</legend>
+                  <legend className={classes.descriptionText}>
+                    Credentials
+                  </legend>
                   <Grid item xs={12} className={classes.formFieldRow}>
                     <InputBoxWrapper
                       id="aws_accessKey"
@@ -988,7 +1000,9 @@ const Encryption = ({
                 }}
               >
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Credentials</legend>
+                  <legend className={classes.descriptionText}>
+                    Credentials
+                  </legend>
                   <Grid item xs={12} className={classes.formFieldRow}>
                     <InputBoxWrapper
                       id="gemalto_token"
@@ -1042,7 +1056,9 @@ const Encryption = ({
                 }}
               >
                 <fieldset className={classes.fieldGroup}>
-                  <legend>Custom CA Root certificate verification</legend>
+                  <legend className={classes.descriptionText}>
+                    Custom CA Root certificate verification
+                  </legend>
 
                   <FileSelector
                     onChange={(encodedValue, fileName) => {
@@ -1081,7 +1097,9 @@ const Encryption = ({
             </Grid>
 
             <fieldset className={classes.fieldGroup} style={{ marginTop: 15 }}>
-              <legend>SecurityContext for KES pods</legend>
+              <legend className={classes.descriptionText}>
+                SecurityContext for KES pods
+              </legend>
               <Grid item xs={12} className={classes.kesSecurityContext}>
                 <div
                   className={`${classes.multiContainer} ${classes.responsiveContainer}`}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
index f778cfe44..08c89e144 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
@@ -16,15 +16,7 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  LinearProgress,
-} from "@mui/material";
+import { DialogContentText, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -35,8 +27,7 @@ import {
 import { setErrorSnackMessage } from "../../../../../../actions";
 import { ErrorResponseHandler } from "../../../../../../common/types";
 import api from "../../../../../../common/api";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
+import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -94,67 +85,30 @@ const AddNamespaceModal = ({
   };
 
   return (
-    <Dialog
-      open={addNamespaceOpen}
+    <ConfirmDialog
+      title={`New namespace`}
+      confirmText={"Create"}
+      confirmButtonProps={{
+        color: "primary",
+        variant: "contained",
+      }}
+      isOpen={addNamespaceOpen}
+      isLoading={addNamespaceLoading}
+      onConfirm={addNamespace}
       onClose={() => {
         closeAddNamespaceModalAndRefresh(false);
       }}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-      sx={{
-        "& .MuiPaper-root": {
-          padding: "1rem 2rem 2rem 1rem",
-        },
-      }}
-    >
-      <DialogTitle id="alert-dialog-title" className={classes.title}>
-        <div className={classes.titleText}>Create new namespace</div>
-        <div className={classes.closeContainer}>
-          <IconButton
-            aria-label="close"
-            className={classes.closeButton}
-            onClick={() => {
-              closeAddNamespaceModalAndRefresh(false);
-            }}
-            disableRipple
-            size="small"
-          >
-            <CloseIcon />
-          </IconButton>
-        </div>
-      </DialogTitle>
-
-      <DialogContent>
-        {addNamespaceLoading && <LinearProgress />}
-        <DialogContentText id="alert-dialog-description">
-          Are you sure you want to add a namespace called
-          <br />
-          <b className={classes.wrapText}>{namespace}</b>?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          type="button"
-          variant="outlined"
-          onClick={() => {
-            closeAddNamespaceModalAndRefresh(false);
-          }}
-          color="primary"
-          disabled={addNamespaceLoading}
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={addNamespace}
-          variant="contained"
-          color="primary"
-          autoFocus
-          disabled={addNamespaceLoading}
-        >
-          Create
-        </Button>
-      </DialogActions>
-    </Dialog>
+      confirmationContent={
+        <React.Fragment>
+          {addNamespaceLoading && <LinearProgress />}
+          <DialogContentText>
+            Are you sure you want to add a namespace called
+            <br />
+            <b className={classes.wrapText}>{namespace}</b>?
+          </DialogContentText>
+        </React.Fragment>
+      }
+    />
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
index 32b63639a..3067185b7 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
@@ -4,7 +4,10 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import Grid from "@mui/material/Grid";
 import { generatePoolName, niceBytes } from "../../../../common/utils";
@@ -33,14 +36,19 @@ const styles = (theme: Theme) =>
       display: "flex",
       flexGrow: 1,
       alignItems: "center",
+      margin: "auto",
+      justifyContent: "center",
       "& div": {
-        flexGrow: 1,
-        width: "100%",
+        width: 150,
+        "@media (max-width: 900px)": {
+          flexFlow: "column",
+        },
       },
     },
     factorElements: {
       display: "flex",
       justifyContent: "flex-start",
+      marginLeft: 30,
     },
     sizeNumber: {
       fontSize: 35,
@@ -52,7 +60,8 @@ const styles = (theme: Theme) =>
       color: "#777",
       textAlign: "center",
     },
-    ...modalBasic,
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 const AddPoolModal = ({
@@ -149,7 +158,7 @@ const AddPoolModal = ({
             });
         }}
       >
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <InputBoxWrapper
             id="number_of_nodes"
             name="number_of_nodes"
@@ -161,7 +170,7 @@ const AddPoolModal = ({
             value={numberOfNodes.toString(10)}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <InputBoxWrapper
             id="pool_size"
             name="pool_size"
@@ -173,7 +182,7 @@ const AddPoolModal = ({
             value={volumeSize.toString(10)}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <InputBoxWrapper
             id="volumes_per_sever"
             name="volumes_per_sever"
@@ -185,7 +194,7 @@ const AddPoolModal = ({
             value={volumesPerServer.toString(10)}
           />
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.formFieldRow}>
           <SelectWrapper
             id="storage_class"
             name="storage_class"
@@ -198,39 +207,47 @@ const AddPoolModal = ({
             disabled={storageClasses.length < 1}
           />
         </Grid>
-        <Grid item xs={12}>
-          <Grid item xs={12} className={classes.bottomContainer}>
-            <div className={classes.factorElements}>
-              <div>
-                <div className={classes.sizeNumber}>
-                  {niceBytes(instanceCapacity.toString(10))}
-                </div>
-                <div className={classes.sizeDescription}>Instance Capacity</div>
+
+        <Grid item xs={12} className={classes.bottomContainer}>
+          <div className={classes.factorElements}>
+            <div>
+              <div className={classes.sizeNumber}>
+                {niceBytes(instanceCapacity.toString(10))}
               </div>
-              <div>
-                <div className={classes.sizeNumber}>
-                  {niceBytes(totalCapacity.toString(10))}
-                </div>
-                <div className={classes.sizeDescription}>Total Capacity</div>
+              <div className={classes.sizeDescription}>Instance Capacity</div>
+            </div>
+            <div>
+              <div className={classes.sizeNumber}>
+                {niceBytes(totalCapacity.toString(10))}
               </div>
+              <div className={classes.sizeDescription}>Total Capacity</div>
             </div>
-            <div className={classes.buttonContainer}>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                disabled={addSending}
-              >
-                Save
-              </Button>
-            </div>
-          </Grid>
-          {addSending && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
+          </div>
         </Grid>
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
+            type="button"
+            variant="outlined"
+            color="primary"
+            disabled={addSending}
+            onClick={() => onClosePoolAndReload(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={addSending}
+          >
+            Save
+          </Button>
+        </Grid>
+        {addSending && (
+          <Grid item xs={12}>
+            <LinearProgress />
+          </Grid>
+        )}
       </form>
     </ModalWrapper>
   );
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
index 19de5f94d..32389b4a6 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
@@ -25,7 +25,7 @@ import api from "../../../../common/api";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import {
   fieldBasic,
-  modalBasic,
+  modalStyleUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -41,7 +41,20 @@ const styles = (theme: Theme) =>
       fontSize: 14,
       fontWeight: "bold",
     },
-    ...modalBasic,
+    codeMirrorContainer: {
+      marginBottom: 20,
+      paddingLeft: 15,
+      "&:nth-child(2) .MuiGrid-root:nth-child(3)": {
+        border: "1px solid #EAEAEA",
+      },
+      "& label": {
+        marginBottom: ".5rem",
+      },
+      "& label + div": {
+        display: "none",
+      },
+    },
+    ...modalStyleUtils,
     ...fieldBasic,
   });
 
@@ -119,10 +132,16 @@ const TenantYAML = ({
       }}
       title={`YAML`}
     >
-      {loading && <LinearProgress />}
+      {addLoading ||
+        (loading && (
+          <Grid item xs={12}>
+            <LinearProgress />
+          </Grid>
+        ))}
       {errorMessage !== "" && (
         <div className={classes.errorState}>{errorMessage}</div>
       )}
+
       {!loading && (
         <form
           noValidate
@@ -132,10 +151,7 @@ const TenantYAML = ({
           }}
         >
           <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              <Grid item xs={12}>
-                <br />
-              </Grid>
+            <Grid item xs={12} className={classes.codeMirrorContainer}>
               <CodeMirrorWrapper
                 label={`Tenant Specification`}
                 value={tenantYaml}
@@ -145,7 +161,18 @@ const TenantYAML = ({
                 }}
               />
             </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
+            <Grid item xs={12} className={classes.modalButtonBar}>
+              <Button
+                type="button"
+                variant="outlined"
+                color="primary"
+                disabled={addLoading}
+                onClick={() => {
+                  closeModalAndRefresh(false);
+                }}
+              >
+                Cancel
+              </Button>
               <Button
                 type="submit"
                 variant="contained"
@@ -155,11 +182,6 @@ const TenantYAML = ({
                 Save
               </Button>
             </Grid>
-            {addLoading && (
-              <Grid item xs={12}>
-                <LinearProgress />
-              </Grid>
-            )}
           </Grid>
         </form>
       )}
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
index a59ecaa20..f6f6085dd 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
@@ -20,7 +20,10 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, Grid } from "@mui/material";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -42,7 +45,11 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    ...modalBasic,
+    infoText: {
+      fontSize: 14,
+    },
+    ...formFieldStyles,
+    ...modalStyleUtils,
   });
 
 const UpdateTenantModal = ({
@@ -138,14 +145,14 @@ const UpdateTenantModal = ({
       onClose={closeAction}
     >
       <Grid container>
-        <Grid item xs={12} className={classes.formScrollable}>
-          <span>
+        <Grid item xs={12} className={classes.modalFormScrollable}>
+          <div className={classes.infoText}>
             Please enter the MinIO image from dockerhub to use. If blank, then
             latest build will be used.
-          </span>
+          </div>
           <br />
           <br />
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <InputBoxWrapper
               value={minioImage}
               label={"MinIO's Image"}
@@ -157,7 +164,7 @@ const UpdateTenantModal = ({
               }}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.formFieldRow}>
             <FormSwitchWrapper
               value="imageRegistry"
               id="setImageRegistry"
@@ -172,7 +179,7 @@ const UpdateTenantModal = ({
           </Grid>
           {imageRegistry && (
             <Fragment>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
                   value={imageRegistryEndpoint}
                   label={"Endpoint"}
@@ -184,7 +191,7 @@ const UpdateTenantModal = ({
                   }}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
                   value={imageRegistryUsername}
                   label={"Username"}
@@ -196,7 +203,7 @@ const UpdateTenantModal = ({
                   }}
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
                   value={imageRegistryPassword}
                   label={"Password"}
@@ -211,15 +218,15 @@ const UpdateTenantModal = ({
             </Fragment>
           )}
         </Grid>
-        <Grid item xs={12} className={classes.buttonContainer}>
-          <button
+        <Grid item xs={12} className={classes.modalButtonBar}>
+          <Button
             type="button"
             color="primary"
-            className={classes.clearButton}
+            variant="outlined"
             onClick={resetForm}
           >
             Clear
-          </button>
+          </Button>
           <Button
             type="submit"
             variant="contained"
diff --git a/portal-ui/src/screens/Console/Users/AddUser.tsx b/portal-ui/src/screens/Console/Users/AddUser.tsx
index 4c263d124..20dc74325 100644
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -23,7 +23,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
   formFieldStyles,
-  modalBasic,
+  modalStyleUtils,
   spacingUtils,
 } from "../Common/FormComponents/common/styleLibrary";
 import { User } from "./types";
@@ -40,16 +40,12 @@ import { TabPanel } from "../../shared/tabs";
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-      marginTop: ".9rem",
-    },
     tabsHeader: {
       marginBottom: "1rem",
     },
+    ...modalStyleUtils,
     ...formFieldStyles,
     ...spacingUtils,
-    ...modalBasic,
   });
 
 interface IAddUserContentProps {
@@ -277,12 +273,11 @@ const AddUser = ({
                 </Grid>
               )}
             </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
+            <Grid item xs={12} className={classes.modalButtonBar}>
               <Button
                 type="button"
                 variant="outlined"
                 color="primary"
-                className={classes.spacerRight}
                 onClick={resetForm}
               >
                 Clear
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
index 1099e91dc..48a1d1fd3 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
@@ -22,7 +22,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
-  modalBasic,
+  modalStyleUtils,
   serviceAccountStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
@@ -37,7 +37,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
 const styles = (theme: Theme) =>
   createStyles({
     ...serviceAccountStyles,
-    ...modalBasic,
+    ...modalStyleUtils,
   });
 
 interface IAddUserServiceAccountProps {
@@ -131,7 +131,7 @@ const AddUserServiceAccount = ({
           addUserServiceAccount(e);
         }}
       >
-        <Grid container className={classes.containerScrollable}>
+        <Grid container className={classes.modalFormScrollable}>
           <Grid item xs={12}>
             <div className={classes.infoDetails}>
               Service Accounts inherit the policy explicitly attached to the
@@ -210,12 +210,11 @@ const AddUserServiceAccount = ({
           </Grid>
         </Grid>
         <Grid container>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.modalButtonBar}>
             <Button
               type="button"
               color="primary"
               variant="outlined"
-              className={classes.buttonSpacer}
               onClick={resetForm}
             >
               Clear
diff --git a/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx b/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
index a8b81ac28..6db7c5f9b 100644
--- a/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
+++ b/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
@@ -21,7 +21,10 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalStyleUtils,
+} from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
@@ -42,7 +45,8 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    ...modalBasic,
+    ...modalStyleUtils,
+    ...formFieldStyles,
   });
 
 const BulkAddToGroup = ({
@@ -130,30 +134,29 @@ const BulkAddToGroup = ({
       ) : (
         <form noValidate autoComplete="off" onSubmit={setSaving}>
           <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              <PredefinedList
-                label={"Selected Users"}
-                content={checkedUsers.join(", ")}
-              />
-              <Grid item xs={12}>
-                <br />
+            <Grid item xs={12} className={classes.modalFormScrollable}>
+              <Grid item xs={12} className={classes.formFieldRow}>
+                <PredefinedList
+                  label={"Selected Users"}
+                  content={checkedUsers.join(", ")}
+                />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.formFieldRow}>
                 <GroupsSelectors
                   selectedGroups={selectedGroups}
                   setSelectedGroups={setSelectedGroups}
                 />
               </Grid>
             </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
-              <button
+            <Grid item xs={12} className={classes.modalButtonBar}>
+              <Button
                 type="button"
+                variant="outlined"
                 color="primary"
-                className={classes.clearButton}
                 onClick={resetForm}
               >
                 Clear
-              </button>
+              </Button>
               <Button
                 type="submit"
                 variant="contained"
diff --git a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
index 65c76f137..22df8d801 100644
--- a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
+++ b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
@@ -50,10 +50,15 @@ const styles = (theme: Theme) =>
       padding: "10px 0",
     },
     actionsTitle: {
-      fontWeight: 600,
+      fontWeight: 400,
       color: "#000",
-      fontSize: 16,
+      fontSize: 14,
       alignSelf: "center",
+
+      marginRight: 48,
+      "@media (max-width: 900px)": {
+        marginRight: 0,
+      },
     },
     searchBox: {
       flex: 1,