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 4120e9754..f2ae4d978 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -197,8 +197,8 @@ export const actionsTray = {
   actionsTray: {
     display: "flex" as const,
     justifyContent: "space-between" as const,
-    marginBottom: "1rem",
     alignItems: "center",
+    marginBottom: "1rem",
     "& button": {
       flexGrow: 0,
       marginLeft: 8,
diff --git a/portal-ui/src/screens/Console/Common/SearchBox.tsx b/portal-ui/src/screens/Console/Common/SearchBox.tsx
index 3df18867c..c13d17dea 100644
--- a/portal-ui/src/screens/Console/Common/SearchBox.tsx
+++ b/portal-ui/src/screens/Console/Common/SearchBox.tsx
@@ -23,6 +23,7 @@ type SearchBoxProps = {
   value: string;
   onChange: (value: string) => void;
   overrideClass?: any;
+  id?: string;
   sx?: CSSObject;
 };
 
@@ -31,23 +32,20 @@ const SearchBox = ({
   onChange,
   overrideClass,
   value,
+  id = "search-resource",
   sx,
 }: SearchBoxProps) => {
   return (
     <InputBox
       placeholder={placeholder}
       className={overrideClass ? overrideClass : ""}
-      id="search-resource"
+      id={id}
       label=""
       onChange={(e) => {
         onChange(e.target.value);
       }}
       value={value}
-      overlayObject={
-        <SearchIcon
-          style={{ width: 16, height: 16, marginTop: 5, marginRight: 5 }}
-        />
-      }
+      startIcon={<SearchIcon />}
       sx={sx}
     />
   );
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
index 51ccc5790..6ba0576b8 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
@@ -15,27 +15,27 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
-import { Box } from "@mui/material";
 import {
   AddAccessRuleIcon,
   BackLink,
   Button,
   FormLayout,
   PageLayout,
+  Box,
+  Grid,
+  InputBox,
 } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddPolicyHelpBox from "./AddPolicyHelpBox";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
 import { emptyPolicy } from "./utils";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { api } from "../../../api";
 import { Error, HttpResponse, Policy } from "../../../api/consoleApi";
-import HelpMenu from "../HelpMenu";
 
 const AddPolicyScreen = () => {
   const dispatch = useAppDispatch();
@@ -119,9 +119,9 @@ const AddPolicyScreen = () => {
                 addRecord(e);
               }}
             >
-              <Grid container item spacing={1}>
+              <Grid container>
                 <Grid item xs={12}>
-                  <InputBoxWrapper
+                  <InputBox
                     id="policy-name"
                     name="policy-name"
                     label="Policy Name"
@@ -143,7 +143,7 @@ const AddPolicyScreen = () => {
                     editorHeight={"350px"}
                   />
                 </Grid>
-                <Grid item xs={12} textAlign={"right"}>
+                <Grid item xs={12} sx={{ textAlign: "right" }}>
                   <Box
                     sx={{
                       display: "flex",
diff --git a/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx b/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
index 0afee52aa..1938efbc1 100644
--- a/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
@@ -14,9 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
-
-import { DialogContentText } from "@mui/material";
+import React, { Fragment } from "react";
 import { ErrorResponseHandler } from "../../../common/types";
 import useApi from "../Common/Hooks/useApi";
 import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
@@ -65,10 +63,10 @@ const DeletePolicy = ({
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete policy <br />
           <b>{selectedPolicy}</b>?
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 049ac3d2f..df6bfda34 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -15,21 +15,18 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { AddIcon, Button, HelpBox, IAMPoliciesIcon, PageLayout } from "mds";
-import { useNavigate } from "react-router-dom";
-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 {
-  actionsTray,
-  containerForHeader,
-  searchField,
-} from "../Common/FormComponents/common/styleLibrary";
+  AddIcon,
+  Button,
+  DataTable,
+  Grid,
+  HelpBox,
+  IAMPoliciesIcon,
+  PageLayout,
+} from "mds";
+import { useNavigate } from "react-router-dom";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
-
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import {
   CONSOLE_UI_RESOURCE,
   createPolicyPermissions,
@@ -44,42 +41,25 @@ import {
   hasPermission,
   SecureComponent,
 } from "../../../common/SecureComponent";
-import SearchBox from "../Common/SearchBox";
-
-import withSuspense from "../Common/Components/withSuspense";
-
-import { encodeURLString } from "../../../common/utils";
-import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
-import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import { api } from "../../../api";
 import {
   Error,
   HttpResponse,
   ListPoliciesResponse,
   Policy,
 } from "../../../api/consoleApi";
+import { encodeURLString } from "../../../common/utils";
+import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
+import { useAppDispatch } from "../../../store";
+import { api } from "../../../api";
+import SearchBox from "../Common/SearchBox";
+import withSuspense from "../Common/Components/withSuspense";
+import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...actionsTray,
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      maxWidth: 380,
-    },
-    ...containerForHeader,
-  });
-
-interface IPoliciesProps {
-  classes: any;
-}
-
-const ListPolicies = ({ classes }: IPoliciesProps) => {
+const ListPolicies = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -194,7 +174,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
   }, []);
 
   return (
-    <React.Fragment>
+    <Fragment>
       {deleteOpen && (
         <DeletePolicy
           deleteOpen={deleteOpen}
@@ -204,14 +184,14 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
       )}
       <PageHeaderWrapper label="IAM Policies" actions={<HelpMenu />} />
 
-      <PageLayout className={classes.pageContainer}>
-        <Grid container spacing={1}>
-          <Grid item xs={12} className={classes.actionsTray}>
+      <PageLayout>
+        <Grid container sx={{ gap: 15 }}>
+          <Grid item xs={12} sx={actionsTray.actionsTray}>
             <SearchBox
               onChange={setFilterPolicies}
               placeholder="Search Policies"
-              overrideClass={classes.searchField}
               value={filterPolicies}
+              sx={{ maxWidth: 380 }}
             />
 
             <SecureComponent
@@ -242,19 +222,13 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
               </TooltipWrapper>
             </SecureComponent>
           </Grid>
-          <Grid item xs={12} className={classes.tableBlock}>
+          <Grid item xs={12}>
             <SecureComponent
               scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <TableWrapper
-                itemActions={tableActions}
-                columns={[{ label: "Name", elementKey: "name" }]}
-                isLoading={loading}
-                records={filteredRecords}
-                entityName="Policies"
-                idField="name"
+              <TooltipWrapper
                 tooltip={
                   canViewPolicy
                     ? ""
@@ -263,10 +237,19 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
                         "view Policy details"
                       )
                 }
-              />
+              >
+                <DataTable
+                  itemActions={tableActions}
+                  columns={[{ label: "Name", elementKey: "name" }]}
+                  isLoading={loading}
+                  records={filteredRecords}
+                  entityName="Policies"
+                  idField="name"
+                />
+              </TooltipWrapper>
             </SecureComponent>
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} sx={{ marginTop: 15 }}>
             <HelpBox
               title={"Learn more about IAM POLICIES"}
               iconComponent={<IAMPoliciesIcon />}
@@ -301,8 +284,8 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
           </Grid>
         </Grid>
       </PageLayout>
-    </React.Fragment>
+    </Fragment>
   );
 };
 
-export default withStyles(styles)(ListPolicies);
+export default ListPolicies;
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index ba963a8a2..87610f639 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -19,34 +19,23 @@ import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   BackLink,
+  Box,
   Button,
-  IAMPoliciesIcon,
-  RefreshIcon,
-  SearchIcon,
-  SectionTitle,
-  TrashIcon,
-  PageLayout,
+  DataTable,
   Grid,
+  IAMPoliciesIcon,
+  PageLayout,
+  RefreshIcon,
+  ScreenTitle,
+  SectionTitle,
+  Tabs,
+  TrashIcon,
 } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  actionsTray,
-  containerForHeader,
-  modalBasic,
-  searchField,
-} from "../Common/FormComponents/common/styleLibrary";
-import Paper from "@mui/material/Paper";
-import { Grid as MUIGrid, LinearProgress } from "@mui/material";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
+import { LinearProgress } from "@mui/material";
 
 import { ErrorResponseHandler } from "../../../common/types";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
-import InputAdornment from "@mui/material/InputAdornment";
-import TextField from "@mui/material/TextField";
-import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 
 import {
   CONSOLE_UI_RESOURCE,
@@ -87,38 +76,11 @@ import {
 } from "../../../api/consoleApi";
 import { api } from "../../../api";
 import HelpMenu from "../HelpMenu";
+import SearchBox from "../Common/SearchBox";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      paddingTop: 16,
-      "& button": {
-        marginLeft: 8,
-      },
-    },
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      height: "100%",
-    },
-    paperContainer: {
-      padding: "15px 15px 15px 50px",
-      minHeight: "450px",
-    },
-    ...actionsTray,
-    ...searchField,
-    ...modalBasic,
-    ...containerForHeader,
-  });
-
-interface IPolicyDetailsProps {
-  classes: any;
-}
-
-const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
+const PolicyDetails = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const params = useParams();
@@ -140,6 +102,7 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
   const [filterGroups, setFilterGroups] = useState<string>("");
   const [loadingGroups, setLoadingGroups] = useState<boolean>(true);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
+  const [selectedTab, setSelectedTab] = useState<string>("summary");
 
   const ldapIsEnabled = (features && features.includes("ldap-idp")) || false;
 
@@ -386,271 +349,284 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
         }
         actions={<HelpMenu />}
       />
-      <PageLayout className={classes.pageContainer}>
-        <MUIGrid container spacing={1}>
-          <Grid item xs={12}>
-            <ScreenTitle
-              icon={
-                <Fragment>
-                  <IAMPoliciesIcon width={40} />
-                </Fragment>
-              }
-              title={policyName}
-              subTitle={<Fragment>IAM Policy</Fragment>}
-              actions={
-                <Fragment>
-                  <SecureComponent
-                    scopes={[IAM_SCOPES.ADMIN_DELETE_POLICY]}
-                    resource={CONSOLE_UI_RESOURCE}
-                    errorProps={{ disabled: true }}
-                  >
-                    <TooltipWrapper
-                      tooltip={
-                        canDeletePolicy
-                          ? ""
-                          : permissionTooltipHelper(
-                              deletePolicyPermissions,
-                              "delete Policies"
-                            )
+      <PageLayout>
+        <ScreenTitle
+          icon={<IAMPoliciesIcon width={40} />}
+          title={policyName}
+          subTitle={<Fragment>IAM Policy</Fragment>}
+          actions={
+            <Fragment>
+              <SecureComponent
+                scopes={[IAM_SCOPES.ADMIN_DELETE_POLICY]}
+                resource={CONSOLE_UI_RESOURCE}
+                errorProps={{ disabled: true }}
+              >
+                <TooltipWrapper
+                  tooltip={
+                    canDeletePolicy
+                      ? ""
+                      : permissionTooltipHelper(
+                          deletePolicyPermissions,
+                          "delete Policies"
+                        )
+                  }
+                >
+                  <Button
+                    id={"delete-policy"}
+                    label={"Delete Policy"}
+                    variant="secondary"
+                    icon={<TrashIcon />}
+                    onClick={deletePolicy}
+                    disabled={!canDeletePolicy}
+                  />
+                </TooltipWrapper>
+              </SecureComponent>
+
+              <TooltipWrapper tooltip={"Refresh"}>
+                <Button
+                  id={"refresh-policy"}
+                  label={"Refresh"}
+                  variant="regular"
+                  icon={<RefreshIcon />}
+                  onClick={() => {
+                    refreshPolicyDetails();
+                  }}
+                />
+              </TooltipWrapper>
+            </Fragment>
+          }
+          sx={{ marginBottom: 15 }}
+        />
+        <Box>
+          <Tabs
+            options={[
+              {
+                tabConfig: {
+                  label: "Summary",
+                  disabled: !displayPolicy,
+                  id: "summary",
+                },
+                content: (
+                  <Fragment>
+                    <Grid
+                      onMouseMove={() =>
+                        dispatch(setHelpName("policy_details_summary"))
                       }
                     >
-                      <Button
-                        id={"delete-policy"}
-                        label={"Delete Policy"}
-                        variant="secondary"
-                        icon={<TrashIcon />}
-                        onClick={deletePolicy}
-                        disabled={!canDeletePolicy}
-                      />
-                    </TooltipWrapper>
-                  </SecureComponent>
-
-                  <TooltipWrapper tooltip={"Refresh"}>
-                    <Button
-                      id={"refresh-policy"}
-                      label={"Refresh"}
-                      variant="regular"
-                      icon={<RefreshIcon />}
-                      onClick={() => {
-                        refreshPolicyDetails();
-                      }}
-                    />
-                  </TooltipWrapper>
-                </Fragment>
-              }
-            />
-          </Grid>
-
-          <VerticalTabs>
-            {{
-              tabConfig: { label: "Summary", disabled: !displayPolicy },
-              content: (
-                <Fragment>
-                  <Grid
-                    onMouseMove={() =>
-                      dispatch(setHelpName("policy_details_summary"))
-                    }
-                  >
-                    <SectionTitle separator sx={{ marginBottom: 15 }}>
-                      Policy Summary
-                    </SectionTitle>
-                    <Paper className={classes.paperContainer}>
-                      <PolicyView policyStatements={policyStatements} />
-                    </Paper>
-                  </Grid>
-                </Fragment>
-              ),
-            }}
-            {{
-              tabConfig: {
-                label: "Users",
-                disabled: !displayUsers || ldapIsEnabled,
-              },
-              content: (
-                <Fragment>
-                  <Grid
-                    onMouseMove={() =>
-                      dispatch(setHelpName("policy_details_users"))
-                    }
-                  >
-                    <SectionTitle separator sx={{ marginBottom: 15 }}>
-                      Users
-                    </SectionTitle>
-                    <Grid container>
-                      {userList.length > 0 && (
-                        <Grid item xs={12} className={classes.actionsTray}>
-                          <TextField
-                            placeholder="Search Users"
-                            className={classes.searchField}
-                            id="search-resource"
-                            label=""
-                            onChange={(val) => {
-                              setFilterUsers(val.target.value);
-                            }}
-                            InputProps={{
-                              disableUnderline: true,
-                              startAdornment: (
-                                <InputAdornment position="start">
-                                  <SearchIcon />
-                                </InputAdornment>
-                              ),
-                            }}
-                            variant="standard"
-                          />
-                        </Grid>
-                      )}
-                      <TableWrapper
-                        itemActions={userTableActions}
-                        columns={[{ label: "Name", elementKey: "name" }]}
-                        isLoading={loadingUsers}
-                        records={filteredUsers}
-                        entityName="Users with this Policy associated"
-                        idField="name"
-                      />
+                      <SectionTitle separator sx={{ marginBottom: 15 }}>
+                        Policy Summary
+                      </SectionTitle>
+                      <Box withBorders>
+                        <PolicyView policyStatements={policyStatements} />
+                      </Box>
                     </Grid>
-                  </Grid>
-                </Fragment>
-              ),
-            }}
-            {{
-              tabConfig: {
-                label: "Groups",
-                disabled: !displayGroups || ldapIsEnabled,
+                  </Fragment>
+                ),
               },
-              content: (
-                <Fragment>
-                  <Grid
-                    onMouseMove={() =>
-                      dispatch(setHelpName("policy_details_groups"))
-                    }
-                  >
-                    <SectionTitle separator sx={{ marginBottom: 15 }}>
-                      Groups
-                    </SectionTitle>
-                    <Grid container>
-                      {groupList.length > 0 && (
-                        <Grid item xs={12} className={classes.actionsTray}>
-                          <TextField
-                            placeholder="Search Groups"
-                            className={classes.searchField}
-                            id="search-resource"
-                            label=""
-                            onChange={(val) => {
-                              setFilterGroups(val.target.value);
-                            }}
-                            InputProps={{
-                              disableUnderline: true,
-                              startAdornment: (
-                                <InputAdornment position="start">
-                                  <SearchIcon />
-                                </InputAdornment>
-                              ),
-                            }}
-                            variant="standard"
-                          />
-                        </Grid>
-                      )}
-                      <TableWrapper
-                        itemActions={groupTableActions}
-                        columns={[{ label: "Name", elementKey: "name" }]}
-                        isLoading={loadingGroups}
-                        records={filteredGroups}
-                        entityName="Groups with this Policy associated"
-                        idField="name"
-                      />
-                    </Grid>
-                  </Grid>
-                </Fragment>
-              ),
-            }}
-            {{
-              tabConfig: { label: "Raw Policy", disabled: !displayPolicy },
-              content: (
-                <Fragment>
-                  <Grid
-                    onMouseMove={() =>
-                      dispatch(setHelpName("policy_details_policy"))
-                    }
-                  >
-                    <SectionTitle separator sx={{ marginBottom: 15 }}>
-                      Raw Policy
-                    </SectionTitle>
-                    <form
-                      noValidate
-                      autoComplete="off"
-                      onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                        saveRecord(e);
-                      }}
+              {
+                tabConfig: {
+                  label: "Users",
+                  disabled: !displayUsers || ldapIsEnabled,
+                  id: "users",
+                },
+                content: (
+                  <Fragment>
+                    <Grid
+                      onMouseMove={() =>
+                        dispatch(setHelpName("policy_details_users"))
+                      }
                     >
+                      <SectionTitle separator sx={{ marginBottom: 15 }}>
+                        Users
+                      </SectionTitle>
                       <Grid container>
-                        <Grid item xs={12}>
-                          <CodeMirrorWrapper
-                            value={policyDefinition}
-                            onChange={(value) => {
-                              if (canEditPolicy) {
-                                setPolicyDefinition(value);
-                              }
+                        {userList.length > 0 && (
+                          <Grid
+                            item
+                            xs={12}
+                            sx={{
+                              ...actionsTray.actionsTray,
+                              marginBottom: 15,
                             }}
-                            editorHeight={"350px"}
-                          />
-                        </Grid>
-                        <Grid item xs={12} className={classes.buttonContainer}>
-                          {!policy && (
-                            <button
-                              type="button"
-                              color="primary"
-                              className={classes.clearButton}
-                              onClick={() => {
-                                resetForm();
-                              }}
-                            >
-                              Clear
-                            </button>
-                          )}
-                          <SecureComponent
-                            scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
-                            resource={CONSOLE_UI_RESOURCE}
-                            errorProps={{ disabled: true }}
                           >
-                            <TooltipWrapper
-                              tooltip={
-                                canEditPolicy
-                                  ? ""
-                                  : permissionTooltipHelper(
-                                      createPolicyPermissions,
-                                      "edit a Policy"
-                                    )
-                              }
-                            >
-                              <Button
-                                id={"save"}
-                                type="submit"
-                                variant="callAction"
-                                color="primary"
-                                disabled={
-                                  addLoading || !validSave || !canEditPolicy
-                                }
-                                label={"Save"}
-                              />
-                            </TooltipWrapper>
-                          </SecureComponent>
-                        </Grid>
-                        {addLoading && (
-                          <Grid item xs={12}>
-                            <LinearProgress />
+                            <SearchBox
+                              value={filterUsers}
+                              placeholder={"Search Users"}
+                              id="search-resource"
+                              onChange={(val) => {
+                                setFilterUsers(val);
+                              }}
+                            />
                           </Grid>
                         )}
+                        <DataTable
+                          itemActions={userTableActions}
+                          columns={[{ label: "Name", elementKey: "name" }]}
+                          isLoading={loadingUsers}
+                          records={filteredUsers}
+                          entityName="Users with this Policy associated"
+                          idField="name"
+                          customPaperHeight={"500px"}
+                        />
                       </Grid>
-                    </form>
-                  </Grid>
-                </Fragment>
-              ),
-            }}
-          </VerticalTabs>
-        </MUIGrid>
+                    </Grid>
+                  </Fragment>
+                ),
+              },
+              {
+                tabConfig: {
+                  label: "Groups",
+                  disabled: !displayGroups || ldapIsEnabled,
+                  id: "groups",
+                },
+                content: (
+                  <Fragment>
+                    <Grid
+                      onMouseMove={() =>
+                        dispatch(setHelpName("policy_details_groups"))
+                      }
+                    >
+                      <SectionTitle separator sx={{ marginBottom: 15 }}>
+                        Groups
+                      </SectionTitle>
+                      <Grid container>
+                        {groupList.length > 0 && (
+                          <Grid
+                            item
+                            xs={12}
+                            sx={{
+                              ...actionsTray.actionsTray,
+                              marginBottom: 15,
+                            }}
+                          >
+                            <SearchBox
+                              value={filterUsers}
+                              placeholder={"Search Groups"}
+                              id="search-resource"
+                              onChange={(val) => {
+                                setFilterGroups(val);
+                              }}
+                            />
+                          </Grid>
+                        )}
+                        <DataTable
+                          itemActions={groupTableActions}
+                          columns={[{ label: "Name", elementKey: "name" }]}
+                          isLoading={loadingGroups}
+                          records={filteredGroups}
+                          entityName="Groups with this Policy associated"
+                          idField="name"
+                          customPaperHeight={"500px"}
+                        />
+                      </Grid>
+                    </Grid>
+                  </Fragment>
+                ),
+              },
+              {
+                tabConfig: {
+                  label: "Raw Policy",
+                  disabled: !displayPolicy,
+                  id: "raw-policy",
+                },
+                content: (
+                  <Fragment>
+                    <Grid
+                      onMouseMove={() =>
+                        dispatch(setHelpName("policy_details_policy"))
+                      }
+                    >
+                      <SectionTitle separator sx={{ marginBottom: 15 }}>
+                        Raw Policy
+                      </SectionTitle>
+                      <form
+                        noValidate
+                        autoComplete="off"
+                        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                          saveRecord(e);
+                        }}
+                      >
+                        <Grid container>
+                          <Grid item xs={12}>
+                            <CodeMirrorWrapper
+                              value={policyDefinition}
+                              onChange={(value) => {
+                                if (canEditPolicy) {
+                                  setPolicyDefinition(value);
+                                }
+                              }}
+                              editorHeight={"350px"}
+                            />
+                          </Grid>
+                          <Grid
+                            item
+                            xs={12}
+                            sx={{
+                              display: "flex",
+                              justifyContent: "flex-end",
+                              paddingTop: 16,
+                              gap: 8,
+                            }}
+                          >
+                            {!policy && (
+                              <Button
+                                type="button"
+                                variant={"regular"}
+                                id={"clear-policy"}
+                                onClick={() => {
+                                  resetForm();
+                                }}
+                              >
+                                Clear
+                              </Button>
+                            )}
+                            <SecureComponent
+                              scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
+                              resource={CONSOLE_UI_RESOURCE}
+                              errorProps={{ disabled: true }}
+                            >
+                              <TooltipWrapper
+                                tooltip={
+                                  canEditPolicy
+                                    ? ""
+                                    : permissionTooltipHelper(
+                                        createPolicyPermissions,
+                                        "edit a Policy"
+                                      )
+                                }
+                              >
+                                <Button
+                                  id={"save"}
+                                  type="submit"
+                                  variant="callAction"
+                                  color="primary"
+                                  disabled={
+                                    addLoading || !validSave || !canEditPolicy
+                                  }
+                                  label={"Save"}
+                                />
+                              </TooltipWrapper>
+                            </SecureComponent>
+                          </Grid>
+                          {addLoading && (
+                            <Grid item xs={12}>
+                              <LinearProgress />
+                            </Grid>
+                          )}
+                        </Grid>
+                      </form>
+                    </Grid>
+                  </Fragment>
+                ),
+              },
+            ]}
+            currentTabOrPath={selectedTab}
+            onTabClick={(tab) => setSelectedTab(tab)}
+          />
+        </Box>
       </PageLayout>
     </Fragment>
   );
 };
 
-export default withStyles(styles)(PolicyDetails);
+export default PolicyDetails;
diff --git a/portal-ui/src/screens/Console/Policies/PolicyView.tsx b/portal-ui/src/screens/Console/Policies/PolicyView.tsx
index 9ea1fcfed..3f0d2ca4d 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyView.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyView.tsx
@@ -1,3 +1,4 @@
+// This file is part of MinIO Console Server
 // Copyright (c) 2022 MinIO, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
@@ -14,12 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Grid";
 import SearchBox from "../Common/SearchBox";
 import { Theme } from "@mui/material/styles";
 import { searchField } from "../Common/FormComponents/common/styleLibrary";
-import { DisabledIcon, EnabledIcon } from "mds";
+import { DisabledIcon, EnabledIcon, Box, Grid } from "mds";
 import { STATUS_COLORS } from "../Dashboard/BasicDashboard/Utils";
 import makeStyles from "@mui/styles/makeStyles";
 import { IAMStatement } from "./types";
@@ -33,8 +32,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const rowGridStyle = {
   display: "grid",
-  gridTemplateColumns: "60px 1fr",
-  gap: "15px",
+  gridTemplateColumns: "70px 1fr",
+  gap: 15,
 };
 
 const escapeRegExp = (str = "") =>
@@ -65,26 +64,24 @@ const PolicyView = ({
   return (
     <Grid container>
       <Grid item xs={12}>
-        <Box
-          sx={{
-            display: "grid",
-            gridTemplateColumns: {
-              sm: "1fr 1fr",
-              xs: "1fr",
-            },
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: "15px",
-          }}
-        >
-          <Box>Statements</Box>
-          <SearchBox
-            placeholder={"Search"}
-            onChange={setFilter}
-            overrideClass={classes.searchField}
-            value={filter}
-          />
-        </Box>
+        <Grid container sx={{ display: "flex", alignItems: "center" }}>
+          <Grid item xs={12} sm={6} sx={{ fontWeight: "bold" }}>
+            Statements
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            sx={{ display: "flex", justifyContent: "flex-end" }}
+          >
+            <SearchBox
+              placeholder={"Search"}
+              onChange={setFilter}
+              overrideClass={classes.searchField}
+              value={filter}
+            />
+          </Grid>
+        </Grid>
       </Grid>
       {!policyStatements && <Fragment>Policy has no statements</Fragment>}
       {policyStatements && (
@@ -145,18 +142,8 @@ const PolicyView = ({
                     {effect}
                   </Box>
                 </Box>
-
-                <Box
-                  sx={{
-                    display: "grid",
-                    gridTemplateColumns: {
-                      sm: "1fr 1fr",
-                      xs: "1fr",
-                    },
-                    gap: "15px",
-                  }}
-                >
-                  <Box sx={rowGridStyle}>
+                <Grid container sx={{ gap: 15 }}>
+                  <Grid item xs={12} sm={6} sx={rowGridStyle}>
                     <Box className="label">Actions:</Box>
                     <Box>
                       {stmt.Action &&
@@ -166,8 +153,8 @@ const PolicyView = ({
                           </div>
                         ))}
                     </Box>
-                  </Box>
-                  <Box sx={rowGridStyle}>
+                  </Grid>
+                  <Grid item xs={12} sm={6} sx={rowGridStyle}>
                     <Box className="label">Resources:</Box>
                     <Box>
                       {stmt.Resource &&
@@ -178,8 +165,8 @@ const PolicyView = ({
                           </div>
                         ))}
                     </Box>
-                  </Box>
-                </Box>
+                  </Grid>
+                </Grid>
               </Box>
             );
           })}