diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index c35f60d02..8e7093c8f 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -26,6 +26,7 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import api from "../../../../common/api";
 import AddAccessRuleModal from "./AddAccessRule";
 import DeleteAccessRuleModal from "./DeleteAccessRule";
+import EditAccessRuleModal from "./EditAccessRule";
 import { CreateIcon } from "../../../../icons";
 import Grid from "@material-ui/core/Grid";
 import {
@@ -130,6 +131,9 @@ const AccessRule = ({
   const [deleteAccessRuleOpen, setDeleteAccessRuleOpen] =
     useState<boolean>(false);
   const [accessRuleToDelete, setAccessRuleToDelete] = useState<string>("");
+  const [editAccessRuleOpen, setEditAccessRuleOpen] = useState<boolean>(false);
+  const [accessRuleToEdit, setAccessRuleToEdit] = useState<string>("");
+  const [initialAccess, setInitialAccess] = useState<string>("");
 
   const bucketName = match.params["bucketName"];
 
@@ -147,6 +151,14 @@ const AccessRule = ({
         setAccessRuleToDelete(accessRule.prefix);
       },
     },
+    {
+      type: "view",
+      onClick: (accessRule: any) => {
+        setAccessRuleToEdit(accessRule.prefix);
+        setInitialAccess(accessRule.access)
+        setEditAccessRuleOpen(true);
+      },
+    },
   ];
 
   useEffect(() => {
@@ -174,6 +186,11 @@ const AccessRule = ({
     setLoadingAccessRules(true);
   };
 
+  const closeEditAccessRuleModal = () => {
+    setEditAccessRuleOpen(false);
+    setLoadingAccessRules(true);
+  };
+
   return (
     <Fragment>
       {addAccessRuleOpen && (
@@ -191,6 +208,15 @@ const AccessRule = ({
           toDelete={accessRuleToDelete}
         />
       )}
+      {editAccessRuleOpen && (
+        <EditAccessRuleModal
+          modalOpen={editAccessRuleOpen}
+          onClose={closeEditAccessRuleModal}
+          bucket={bucketName}
+          toEdit={accessRuleToEdit}
+          initial={initialAccess}
+        />
+      )}
       <Grid item xs={12} className={classes.actionsTray}>
         <h1 className={classes.sectionTitle}>Access Rules</h1>
         <Button
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
index b4846f4b2..f3eef1fc8 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -69,7 +69,7 @@ const AddAccessRule = ({
 
   const resetForm = () => {
     setPrefix("");
-    setSelectedAccess("none");
+    setSelectedAccess("readonly");
   };
 
   const createProcess = () => {
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
index c81052a0e..a7d471d22 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import {
   Button,
   Dialog,
@@ -23,8 +22,6 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Grid,
-  LinearProgress,
 } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
new file mode 100644
index 000000000..25cb72747
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
@@ -0,0 +1,136 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, {useState} from "react";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import { Button, Grid } from "@material-ui/core";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import { connect } from "react-redux";
+import api from "../../../../common/api";
+import { ErrorResponseHandler } from "../../../../common/types";
+import { setErrorSnackMessage } from "../../../../actions";
+import { AppState } from "../../../../store";
+import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+
+const mapState = (state: AppState) => ({
+  session: state.console.session,
+});
+
+const connector = connect(mapState, { setErrorSnackMessage });
+
+interface IEditAccessRule {
+  classes: any;
+  modalOpen: boolean;
+  onClose: () => any;
+  bucket: string;
+  toEdit: string;
+  initial: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    buttonContainer: {
+      textAlign: "right",
+    },
+    pathLabel: {
+      marginTop: 0,
+      marginBottom: 32,
+    },
+    ...modalBasic,
+  });
+
+const EditAccessRule = ({
+  modalOpen,
+  onClose,
+  classes,
+  bucket,
+  toEdit,
+  initial
+}: IEditAccessRule) => {
+  const [selectedAccess, setSelectedAccess] = useState<any>(initial);
+
+  const accessOptions = [
+    { label: "readonly", value: "readonly" },
+    { label: "writeonly", value: "writeonly" },
+    { label: "readwrite", value: "readwrite" },
+  ];
+
+  const resetForm = () => {
+    setSelectedAccess(initial);
+  };
+
+  const createProcess = () => {
+    api
+      .invoke("PUT", `/api/v1/bucket/${bucket}/access-rules`, {
+        prefix: toEdit,
+        access: selectedAccess,
+      })
+      .then((res: any) => {
+        onClose();
+      })
+      .catch((err: ErrorResponseHandler) => {
+        setErrorSnackMessage(err);
+        onClose();
+      });
+  };
+
+  return (
+    <React.Fragment>
+      <ModalWrapper
+        modalOpen={modalOpen}
+        title={`Edit Access Rule for ${toEdit}`}
+        onClose={onClose}
+      >
+        <Grid container>
+          <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.buttonContainer}>
+            <button
+              type="button"
+              color="primary"
+              className={classes.clearButton}
+              onClick={resetForm}
+            >
+              Clear
+            </button>
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              onClick={createProcess}
+            >
+              Save
+            </Button>
+          </Grid>
+        </Grid>
+      </ModalWrapper>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(connector(EditAccessRule));