diff --git a/portal-ui/src/screens/Console/Policies/PolicyBuilder.tsx b/portal-ui/src/screens/Console/Policies/PolicyBuilder.tsx
new file mode 100644
index 000000000..a9b30af09
--- /dev/null
+++ b/portal-ui/src/screens/Console/Policies/PolicyBuilder.tsx
@@ -0,0 +1,157 @@
+// This file is part of MinIO Kubernetes Cloud
+// Copyright (c) 2020 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 .
+
+import React from "react";
+import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import remove from "lodash/remove";
+import {Checkbox, FormControlLabel, FormGroup, FormLabel, Paper, Radio, RadioGroup} from "@material-ui/core";
+import {Statement} from "./types";
+
+const styles = (theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ errorBlock: {
+ color: "red"
+ },
+ jsonPolicyEditor: {
+ minHeight: 400,
+ width: "100%"
+ },
+ codeMirror: {
+ fontSize: 14
+ },
+ paper: {
+ padding: theme.spacing(1),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ });
+
+interface IPolicyBuilderProps {
+ classes: any;
+ policyDefinition: string;
+}
+
+interface IPolicyBuilderState {
+ policyString: string;
+ currentStatement: Statement;
+ statements: Statement[];
+ currentStatementWrite: boolean;
+ currentStatementRead: boolean;
+}
+
+class PolicyBuilder extends React.Component {
+ state: IPolicyBuilderState = {
+ policyString: "",
+ statements: [],
+ currentStatement: {
+ effect: "",
+ actions: [],
+ resources: [],
+ },
+ currentStatementWrite: false,
+ currentStatementRead: false,
+ };
+
+ render() {
+ const { classes, policyDefinition } = this.props;
+ const { currentStatement,currentStatementWrite, currentStatementRead } = this.state;
+ console.log(currentStatement);
+ return (
+
+
+
+
+
+
+ Effect
+ , value: string) => {
+ this.setState( { currentStatement: { ...currentStatement, effect: value }});
+ }}
+ >
+ } label="Deny" />
+ } label="Allow" />
+
+
+
+
+
+ Actions
+
+ , checked: boolean) => {
+ const readActions = ["s3:ListBucket", "s3:GetObject", "s3:GetBucketLocation"];
+ let actions = currentStatement.actions;
+ if (checked) {
+ actions.push(...readActions)
+ } else {
+ actions = remove(actions, (action) => readActions.includes(action))
+ }
+ this.setState( { currentStatement: { ...currentStatement, actions: actions }});
+ this.setState( { currentStatementRead: checked });
+ }}
+ name="read"
+ />
+ }
+ label="Read Only"
+ />
+ , checked: boolean) => {
+ const writeActions = ["s3:PutObject"];
+ let actions = currentStatement.actions;
+ if (checked) {
+ actions.push(...writeActions)
+ } else {
+ actions = remove(actions, (action) => writeActions.includes(action))
+ }
+ this.setState( { currentStatement: { ...currentStatement, actions: actions }});
+ this.setState( { currentStatementWrite: checked });
+ }}
+ name="write"
+ />
+ }
+ label="Write Only"
+ />
+
+
+
+
+
+ Resources
+
+
+
+
+
+
+ )
+ }
+}
+
+export default withStyles(styles)(PolicyBuilder);