diff --git a/portal-ui/src/common/types.ts b/portal-ui/src/common/types.ts
new file mode 100644
index 000000000..a2907e8a3
--- /dev/null
+++ b/portal-ui/src/common/types.ts
@@ -0,0 +1,333 @@
+// This file is part of MinIO Console Server
+// 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 <http://www.gnu.org/licenses/>.
+
+/* Copyright (c) 2020 MinIO, Inc. All rights reserved. */
+
+export interface ITenantsObject {
+  tenants: ITenant[];
+}
+
+export interface ITenant {
+  creation_date: string;
+  deletion_date: string;
+  currentState: string;
+  image: string;
+  console_image: string;
+  instance_count: string;
+  name: string;
+  namespace?: string;
+  total_size: string;
+  used_size: string;
+  volume_count: string;
+  volume_size: string;
+  volumes_per_server?: string;
+  zone_count: string;
+  zones?: IZoneModel[];
+  used_capacity?: string;
+  endpoint?: string;
+  storage_class?: string;
+  enable_prometheus: boolean;
+}
+
+export interface IVolumeConfiguration {
+  size: string;
+  storage_class_name: string;
+  labels?: any;
+}
+
+export interface ITenantCreator {
+  name: string;
+  service_name: string;
+  enable_console: boolean;
+  enable_prometheus: boolean;
+  enable_tls: boolean;
+  access_key: string;
+  secret_key: string;
+  image: string;
+  console_image: string;
+  zones: IZoneModel[];
+  namespace: string;
+  erasureCodingParity: number;
+  tls?: ITLSTenantConfiguration;
+  encryption?: IEncryptionConfiguration;
+  idp?: IIDPConfiguration;
+  annotations?: Object;
+}
+
+export interface ITenantUpdateObject {
+  image: string;
+  image_registry?: IRegistryObject;
+}
+
+export interface IRegistryObject {
+  registry: string;
+  username: string;
+  password: string;
+}
+
+export interface ITenantUsage {
+  used: string;
+  disk_used: string;
+}
+
+export interface IAffinityModel {
+  podAntiAffinity: IPodAntiAffinityModel;
+}
+
+export interface IPodAntiAffinityModel {
+  requiredDuringSchedulingIgnoredDuringExecution: IPodAffinityTerm[];
+}
+
+export interface IPodAffinityTerm {
+  labelSelector: IPodAffinityTermLabelSelector;
+  topologyKey: string;
+}
+
+export interface IPodAffinityTermLabelSelector {
+  matchExpressions: IMatchExpressionItem[];
+}
+
+export interface IMatchExpressionItem {
+  key: string;
+  operator: string;
+  values: string[];
+}
+
+export interface ITolerationModel {
+  effect: string;
+  key: string;
+  operator: string;
+  value?: string;
+  tolerationSeconds?: ITolerationSeconds;
+}
+
+export interface ITolerationSeconds {
+  seconds: number;
+}
+
+export interface IResourceModel {
+  requests: IResourceRequests;
+  limits?: IResourceLimits;
+}
+
+export interface IResourceRequests {
+  memory: number;
+}
+
+export interface IResourceLimits {
+  memory: number;
+}
+
+export interface ITLSTenantConfiguration {
+  minio: ITLSConfiguration;
+  console: ITLSConfiguration;
+}
+
+export interface ITLSConfiguration {
+  crt: string;
+  key: string;
+}
+
+export interface IEncryptionConfiguration {
+  server: ITLSConfiguration;
+  client: ITLSConfiguration;
+  master_key?: string;
+  gemalto?: IGemaltoConfig;
+  aws?: IAWSConfig;
+  vault?: IVaultConfig;
+}
+
+export interface IVaultConfig {
+  endpoint: string;
+  engine?: string;
+  namespace?: string;
+  prefix?: string;
+  approle: IApproleConfig;
+  tls: IVaultTLSConfig;
+  status: IVaultStatusConfig;
+}
+
+export interface IGemaltoConfig {
+  keysecure: IKeysecureConfig;
+}
+
+export interface IAWSConfig {
+  secretsmanager: ISecretsManagerConfig;
+}
+
+export interface IApproleConfig {
+  engine: string;
+  id: string;
+  secret: string;
+  retry: number;
+}
+
+export interface IVaultTLSConfig {
+  key: string;
+  crt: string;
+  ca: string;
+}
+
+export interface IVaultStatusConfig {
+  ping: number;
+}
+
+export interface IKeysecureConfig {
+  endpoint: string;
+  credentials: IGemaltoCredentials;
+  tls: IGemaltoTLS;
+}
+
+export interface IGemaltoCredentials {
+  token: string;
+  domain: string;
+  retry?: number;
+}
+
+export interface IGemaltoTLS {
+  ca: string;
+}
+
+export interface ISecretsManagerConfig {
+  endpoint: string;
+  region: string;
+  kmskey?: string;
+  credentials: IAWSCredentials;
+}
+
+export interface IAWSCredentials {
+  accesskey: string;
+  secretkey: string;
+  token?: string;
+}
+
+export interface IIDPConfiguration {
+  oidc?: IOpenIDConfiguration;
+  active_directory: IActiveDirectoryConfiguration;
+}
+
+export interface IOpenIDConfiguration {
+  url: string;
+  client_id: string;
+  secret_id: string;
+}
+
+export interface IActiveDirectoryConfiguration {
+  url: string;
+  skip_tls_verification: boolean;
+  server_insecure: boolean;
+  user_search_filter: string;
+  group_Search_base_dn: string;
+  group_search_filter: string;
+  group_name_attribute: string;
+}
+
+export interface IStorageDistribution {
+  error: number;
+  nodes: number;
+  persistentVolumes: number;
+  disks: number;
+  pvSize: number;
+}
+
+export interface IErasureCodeCalc {
+  error: number;
+  maxEC: string;
+  erasureCodeSet: number;
+  rawCapacity: string;
+  storageFactors: IStorageFactors[];
+  defaultEC: string;
+}
+
+export interface IStorageFactors {
+  erasureCode: string;
+  storageFactor: number;
+  maxCapacity: string;
+}
+
+export interface ITenantHealthInList {
+  name: string;
+  namespace: string;
+  status?: string;
+  message?: string;
+}
+
+export interface ITenantsListHealthRequest {
+  tenants: ITenantHealthInList[];
+}
+
+export interface IMaxAllocatableMemoryRequest {
+  num_nodes: number;
+}
+
+export interface IMaxAllocatableMemoryResponse {
+  max_memory: number;
+}
+
+export interface IEncryptionUpdateRequest {
+  encryption: IEncryptionConfiguration;
+}
+
+export interface IArchivedTenantsList {
+  tenants: IArchivedTenant[];
+}
+
+export interface IArchivedTenant {
+  namespace: string;
+  tenant: string;
+  number_volumes: number;
+  capacity: number;
+}
+
+export interface IZoneModel {
+  name?: string;
+  servers: number;
+  volumes_per_server: number;
+  volume_configuration: IVolumeConfiguration;
+  affinity?: IAffinityModel;
+  tolerations?: ITolerationModel[];
+  resources?: IResourceModel;
+}
+
+export interface IUpdateZone {
+  zones: IZoneModel[];
+}
+
+export interface INode {
+  name: string;
+  freeSpace: string;
+  totalSpace: string;
+  disks: IDisk[];
+}
+
+export interface IStorageType {
+  freeSpace: string;
+  totalSpace: string;
+  storageClasses: string[];
+  nodes: INode[];
+  schedulableNodes: INode[];
+}
+
+export interface IDisk {
+  name: string;
+  freeSpace: string;
+  totalSpace: string;
+}
+
+export interface ICapacity {
+  value: string;
+  unit: string;
+}
diff --git a/portal-ui/src/common/utils.ts b/portal-ui/src/common/utils.ts
index 3b3e1626d..2b0ac970d 100644
--- a/portal-ui/src/common/utils.ts
+++ b/portal-ui/src/common/utils.ts
@@ -15,6 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import storage from "local-storage-fallback";
+import { ICapacity, IStorageType, IZoneModel } from "./types";
+
+const minStReq = 1073741824; // Minimal Space required for MinIO
+const minMemReq = 2147483648; // Minimal Memory required for MinIO in bytes
 
 export const units = [
   "B",
@@ -28,6 +32,8 @@ export const units = [
   "YiB",
 ];
 export const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
+export const k8sCalcUnits = ["B", ...k8sUnits];
+
 export const niceBytes = (x: string) => {
   let l = 0,
     n = parseInt(x, 10) || 0;
@@ -90,12 +96,19 @@ export const k8sfactorForDropdown = () => {
 };
 
 //getBytes, converts from a value and a unit from units array to bytes
-export const getBytes = (value: string, unit: string) => {
+export const getBytes = (
+  value: string,
+  unit: string,
+  fork8s: boolean = false
+) => {
   const vl: number = parseFloat(value);
-  const powFactor = units.findIndex((element) => element === unit);
+
+  const unitsTake = fork8s ? k8sCalcUnits : units;
+
+  const powFactor = unitsTake.findIndex((element) => element === unit);
 
   if (powFactor == -1) {
-    return 0;
+    return "0";
   }
   const factor = Math.pow(1024, powFactor);
   const total = vl * factor;
@@ -105,6 +118,220 @@ export const getBytes = (value: string, unit: string) => {
 
 //getTotalSize gets the total size of a value & unit
 export const getTotalSize = (value: string, unit: string) => {
-  const bytes = getBytes(value, unit).toString(10);
+  const bytes = getBytes(value, unit, true).toString();
   return niceBytes(bytes);
 };
+
+export const setMemoryResource = (
+  memorySize: number,
+  capacitySize: string,
+  maxMemorySize: number
+) => {
+  // value always comes as Gi
+  const requestedSizeBytes = getBytes(memorySize.toString(10), "Gi", true);
+  const memReqSize = parseInt(requestedSizeBytes, 10);
+  if (maxMemorySize === 0) {
+    return {
+      error: "There is no memory available for the selected number of nodes",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  if (maxMemorySize < minMemReq) {
+    return {
+      error: "There are not enough memory resources available",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  if (memReqSize < minMemReq) {
+    return {
+      error: "The requested memory size must be greater than 2Gi",
+      request: 0,
+      limit: 0,
+    };
+  }
+  if (memReqSize > maxMemorySize) {
+    return {
+      error:
+        "The requested memory is greater than the max available memory for the selected number of nodes",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  const capSize = parseInt(capacitySize, 10);
+  let memLimitSize = memReqSize;
+  // set memory limit based on the capacitySize
+  // if capacity size is lower than 1TiB we use the limit equal to request
+  if (capSize >= parseInt(getBytes("1", "Pi", true), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("64", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("100", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("32", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("10", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("16", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("1", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("8", "Gi", true), 10)
+    );
+  }
+
+  return {
+    error: "",
+    request: memReqSize,
+    limit: memLimitSize,
+  };
+};
+
+export const calculateDistribution = (
+  capacityToUse: ICapacity,
+  forcedNodes: number = 0,
+  limitSize: number = 0
+) => {
+  let numberOfNodes = {};
+  const requestedSizeBytes = getBytes(
+    capacityToUse.value,
+    capacityToUse.unit,
+    true
+  );
+
+  if (parseInt(requestedSizeBytes, 10) < minStReq) {
+    return {
+      error: "The zone size must be greater than 1Gi",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      pvSize: 0,
+    };
+  }
+
+  if (forcedNodes < 4) {
+    return {
+      error: "Number of nodes cannot be less than 4",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      pvSize: 0,
+    };
+  }
+
+  numberOfNodes = calculateStorage(requestedSizeBytes, forcedNodes, limitSize);
+
+  return numberOfNodes;
+};
+
+const calculateStorage = (
+  requestedBytes: string,
+  forcedNodes: number,
+  limitSize: number
+) => {
+  // Size validation
+  const intReqBytes = parseInt(requestedBytes, 10);
+  const maxDiskSize = minStReq * 256; // 256 GiB
+
+  // We get the distribution
+  return structureCalc(forcedNodes, intReqBytes, maxDiskSize, limitSize);
+};
+
+const structureCalc = (
+  nodes: number,
+  desiredCapacity: number,
+  maxDiskSize: number,
+  maxClusterSize: number,
+  disksPerNode: number = 0
+) => {
+  if (
+    isNaN(nodes) ||
+    isNaN(desiredCapacity) ||
+    isNaN(maxDiskSize) ||
+    isNaN(maxClusterSize)
+  ) {
+    return {
+      error: "Some provided data is invalid, please try again.",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      volumePerDisk: 0,
+    }; // Invalid Data
+  }
+
+  let persistentVolumeSize = 0;
+  let numberPersistentVolumes = 0;
+  let volumesPerServer = 0;
+
+  if (disksPerNode === 0) {
+    persistentVolumeSize = Math.floor(
+      Math.min(desiredCapacity / Math.max(4, nodes), maxDiskSize)
+    ); // pVS = min((desiredCapacity / max(4 | nodes)) | maxDiskSize)
+
+    numberPersistentVolumes = desiredCapacity / persistentVolumeSize; // nPV = dC / pVS
+    volumesPerServer = numberPersistentVolumes / nodes; // vPS = nPV / n
+  }
+
+  if (disksPerNode) {
+    volumesPerServer = disksPerNode;
+    numberPersistentVolumes = volumesPerServer * nodes;
+    persistentVolumeSize = Math.floor(
+      desiredCapacity / numberPersistentVolumes
+    );
+  }
+
+  // Volumes are not exact, we force the volumes number & minimize the volume size
+  if (volumesPerServer % 1 > 0) {
+    volumesPerServer = Math.ceil(volumesPerServer); // Increment of volumes per server
+    numberPersistentVolumes = volumesPerServer * nodes; // nPV = vPS * n
+    persistentVolumeSize = Math.floor(
+      desiredCapacity / numberPersistentVolumes
+    ); // pVS = dC / nPV
+
+    const limitSize = persistentVolumeSize * volumesPerServer * nodes; // lS = pVS * vPS * n
+
+    if (limitSize > maxClusterSize) {
+      return {
+        error: "We were not able to allocate this server.",
+        nodes: 0,
+        persistentVolumes: 0,
+        disks: 0,
+        volumePerDisk: 0,
+      }; // Cannot allocate this server
+    }
+  }
+
+  if (persistentVolumeSize < minStReq) {
+    return {
+      error:
+        "Disk Size with this combination would be less than 1Gi, please try another combination",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      volumePerDisk: 0,
+    }; // Cannot allocate this volume size
+  }
+
+  return {
+    error: "",
+    nodes,
+    persistentVolumes: numberPersistentVolumes,
+    disks: volumesPerServer,
+    pvSize: persistentVolumeSize,
+  };
+};
+
+// Zone Name Generator
+export const generateZoneName = (zones: IZoneModel[]) => {
+  const zoneCounter = zones.length;
+
+  return `zone-${zoneCounter}`;
+};
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
index b4689e84d..6761a2dcf 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
@@ -23,7 +23,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  LinearProgress
+  LinearProgress,
 } from "@material-ui/core";
 import api from "../../../../common/api";
 import { BucketList } from "../types";
@@ -32,8 +32,8 @@ import Typography from "@material-ui/core/Typography";
 const styles = (theme: Theme) =>
   createStyles({
     errorBlock: {
-      color: "red"
-    }
+      color: "red",
+    },
   });
 
 interface IDeleteBucketProps {
@@ -54,7 +54,7 @@ class DeleteBucket extends React.Component<
 > {
   state: IDeleteBucketState = {
     deleteLoading: false,
-    deleteError: ""
+    deleteError: "",
   };
 
   removeRecord() {
@@ -66,23 +66,23 @@ class DeleteBucket extends React.Component<
     this.setState({ deleteLoading: true }, () => {
       api
         .invoke("DELETE", `/api/v1/buckets/${selectedBucket}`, {
-          name: selectedBucket
+          name: selectedBucket,
         })
         .then((res: BucketList) => {
           this.setState(
             {
               deleteLoading: false,
-              deleteError: ""
+              deleteError: "",
             },
             () => {
               this.props.closeDeleteModalAndRefresh(true);
             }
           );
         })
-        .catch(err => {
+        .catch((err) => {
           this.setState({
             deleteLoading: false,
-            deleteError: err
+            deleteError: err,
           });
         });
     });
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
new file mode 100644
index 000000000..87ae53e56
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -0,0 +1,113 @@
+// This file is part of MinIO Console Server
+// 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 <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Grid, InputLabel, Tooltip } from "@material-ui/core";
+import HelpIcon from "@material-ui/icons/Help";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import { fileProcess } from "./utils";
+
+interface InputBoxProps {
+  label: string;
+  classes: any;
+  onChange: (e: string) => void;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  tooltip?: string;
+  required?: boolean;
+  error?: string;
+  accept?: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+    ...tooltipHelper,
+    textBoxContainer: {
+      flexGrow: 1,
+      position: "relative",
+    },
+    errorState: {
+      color: "#b53b4b",
+      fontSize: 14,
+      position: "absolute",
+      top: 7,
+      right: 7,
+    },
+  });
+
+const FileSelector = ({
+  label,
+  classes,
+  onChange,
+  id,
+  name,
+  disabled = false,
+  tooltip = "",
+  required,
+  error = "",
+  accept = "",
+}: InputBoxProps) => {
+  return (
+    <React.Fragment>
+      <Grid
+        item
+        xs={12}
+        className={`${classes.fieldContainer} ${
+          error !== "" ? classes.errorInField : ""
+        }`}
+      >
+        {label !== "" && (
+          <InputLabel
+            htmlFor={id}
+            className={`${error !== "" ? classes.fieldLabelError : ""} ${
+              classes.inputLabel
+            }`}
+          >
+            <span>
+              {label}
+              {required ? "*" : ""}
+            </span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <HelpIcon className={classes.tooltip} />
+                </Tooltip>
+              </div>
+            )}
+          </InputLabel>
+        )}
+        <div className={classes.textBoxContainer}>
+          <input
+            type="file"
+            name={name}
+            onChange={(e) => {
+              fileProcess(e, (data: any) => {
+                onChange(data);
+              });
+            }}
+            accept={accept}
+            required
+          />
+        </div>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(FileSelector);
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/utils.ts b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/utils.ts
new file mode 100644
index 000000000..cb137871e
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/utils.ts
@@ -0,0 +1,34 @@
+// This file is part of MinIO Console Server
+// 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 <http://www.gnu.org/licenses/>.
+
+export const fileProcess = (evt: any, callback: any) => {
+  const file = evt.target.files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+
+  reader.onload = () => {
+    // reader.readAsDataURL(file) output will be something like: data:application/x-x509-ca-cert;base64,LS0tLS1CRUdJTiBDRVJUSU
+    // we care only about the actual base64 part (everything after "data:application/x-x509-ca-cert;base64,")
+    const fileBase64 = reader.result;
+    if (fileBase64) {
+      const fileArray = fileBase64.toString().split("base64,");
+
+      if (fileArray.length === 2) {
+        callback(fileArray[1]);
+      }
+    }
+  };
+};
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx
index 35865412d..38846cc36 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx
@@ -42,6 +42,7 @@ interface SelectProps {
   onChange: (
     e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
   ) => void;
+  disabled?: boolean;
   classes: any;
 }
 
@@ -51,7 +52,7 @@ const styles = (theme: Theme) =>
     ...tooltipHelper,
     inputLabel: {
       ...fieldBasic.inputLabel,
-      width: 116,
+      width: 215,
     },
   });
 
@@ -88,6 +89,7 @@ const SelectWrapper = ({
   label,
   tooltip = "",
   value,
+  disabled = false,
 }: SelectProps) => {
   return (
     <React.Fragment>
@@ -111,6 +113,7 @@ const SelectWrapper = ({
             value={value}
             onChange={onChange}
             input={<SelectStyled />}
+            disabled={disabled}
           >
             {options.map((option) => (
               <MenuItem
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
index 2f4df5a5c..023526aef 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
@@ -14,7 +14,9 @@
 // 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, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import debounce from "lodash/debounce";
+import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
@@ -27,11 +29,15 @@ import TableRow from "@material-ui/core/TableRow";
 import api from "../../../../common/api";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
-import { IVolumeConfiguration, IZone } from "./types";
 import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import { k8sfactorForDropdown } from "../../../../common/utils";
-import ZonesMultiSelector from "./ZonesMultiSelector";
+import {
+  calculateDistribution,
+  generateZoneName,
+  getBytes,
+  k8sfactorForDropdown,
+  niceBytes,
+} from "../../../../common/utils";
 import {
   commonFormValidation,
   IValidation,
@@ -39,6 +45,13 @@ import {
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import { IWizardElement } from "../../Common/GenericWizard/types";
 import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
+import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
+import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
+import {
+  IAffinityModel,
+  ICapacity,
+  ITenantCreator,
+} from "../../../../common/types";
 
 interface IAddTenantProps {
   open: boolean;
@@ -83,6 +96,10 @@ const styles = (theme: Theme) =>
       fontSize: "0.75rem",
       paddingLeft: 120,
     },
+    error: {
+      color: "#dc1f2e",
+      fontSize: "0.75rem",
+    },
     ...modalBasic,
   });
 
@@ -101,87 +118,235 @@ const AddTenant = ({
   const [addError, setAddError] = useState<string>("");
   const [tenantName, setTenantName] = useState<string>("");
   const [imageName, setImageName] = useState<string>("");
-  const [serviceName, setServiceName] = useState<string>("");
-  const [zones, setZones] = useState<IZone[]>([]);
-  const [volumesPerServer, setVolumesPerServer] = useState<number>(0);
-  const [volumeConfiguration, setVolumeConfiguration] = useState<
-    IVolumeConfiguration
-  >({ size: 0, storage_class: "" });
-  const [mountPath, setMountPath] = useState<string>("");
-  const [accessKey, setAccessKey] = useState<string>("");
-  const [secretKey, setSecretKey] = useState<string>("");
-  const [enableConsole, setEnableConsole] = useState<boolean>(true);
-  const [enableTLS, setEnableTLS] = useState<boolean>(false);
+  const [volumeSize, setVolumeSize] = useState<string>("100");
+  const [enableTLS, setEnableTLS] = useState<boolean>(true);
   const [sizeFactor, setSizeFactor] = useState<string>("Gi");
   const [storageClasses, setStorageClassesList] = useState<Opts[]>([]);
+  const [selectedStorageClass, setSelectedStorageClass] = useState<string>("");
   const [validationErrors, setValidationErrors] = useState<any>({});
   const [namespace, setNamespace] = useState<string>("");
   const [advancedMode, setAdvancedMode] = useState<boolean>(false);
+  const [enablePrometheus, setEnablePrometheus] = useState<boolean>(false);
+  const [consoleImage, setConsoleImage] = useState<string>("");
+  const [idpSelection, setIdpSelection] = useState<string>("none");
+  const [openIDURL, setOpenIDURL] = useState<string>("");
+  const [openIDClientID, setOpenIDClientID] = useState<string>("");
+  const [openIDSecretID, setOpenIDSecretID] = useState<string>("");
+  const [ADURL, setADURL] = useState<string>("");
+  const [ADSkipTLS, setADSkipTLS] = useState<boolean>(false);
+  const [ADServerInsecure, setADServerInsecure] = useState<boolean>(false);
+  const [ADUserNameFilter, setADUserNameFilter] = useState<string>("");
+  const [ADGroupBaseDN, setADGroupBaseDN] = useState<string>("");
+  const [ADGroupSearchFilter, setADGroupSearchFilter] = useState<string>("");
+  const [ADNameAttribute, setADNameAttribute] = useState<string>("");
+  const [tlsType, setTLSType] = useState<string>("autocert");
+  const [enableEncryption, setEnableEncryption] = useState<boolean>(false);
+  const [encryptionType, setEncryptionType] = useState<string>("vault");
+  const [gemaltoEndpoint, setGemaltoEndpoint] = useState<string>("");
+  const [gemaltoToken, setGemaltoToken] = useState<string>("");
+  const [gemaltoDomain, setGemaltoDomain] = useState<string>("");
+  const [gemaltoRetry, setGemaltoRetry] = useState<string>("0");
+  const [awsEndpoint, setAWSEndpoint] = useState<string>("");
+  const [awsRegion, setAWSRegion] = useState<string>("");
+  const [awsKMSKey, setAWSKMSKey] = useState<string>("");
+  const [awsAccessKey, setAWSAccessKey] = useState<string>("");
+  const [awsSecretKey, setAWSSecretKey] = useState<string>("");
+  const [awsToken, setAWSToken] = useState<string>("");
+  const [vaultEndpoint, setVaultEndpoint] = useState<string>("");
+  const [vaultEngine, setVaultEngine] = useState<string>("");
+  const [vaultNamespace, setVaultNamespace] = useState<string>("");
+  const [vaultPrefix, setVaultPrefix] = useState<string>("");
+  const [vaultAppRoleEngine, setVaultAppRoleEngine] = useState<string>("");
+  const [vaultId, setVaultId] = useState<string>("");
+  const [vaultSecret, setVaultSecret] = useState<string>("");
+  const [vaultRetry, setVaultRetry] = useState<string>("0");
+  const [vaultPing, setVaultPing] = useState<string>("0");
+  const [ecParityChoices, setECParityChoices] = useState<Opts[]>([]);
+  const [nodes, setNodes] = useState<string>("4");
+  const [memoryNode, setMemoryNode] = useState<string>("2");
+  const [ecParity, setECParity] = useState<string>("");
+  const [distribution, setDistribution] = useState<any>({
+    error: "",
+    nodes: 0,
+    persistentVolumes: 0,
+    disks: 0,
+    volumePerDisk: 0,
+  });
 
   // Forms Validation
   const [nameTenantValid, setNameTenantValid] = useState<boolean>(false);
   const [configValid, setConfigValid] = useState<boolean>(false);
   const [configureValid, setConfigureValid] = useState<boolean>(false);
-  const [zonesValid, setZonesValid] = useState<boolean>(false);
 
   // Custom Elements
-  const [customACCK, setCustomACCK] = useState<boolean>(false);
   const [customDockerhub, setCustomDockerhub] = useState<boolean>(false);
 
+  // FilesBase64
+  const [filesBase64, setFilesBase64] = useState<any>({
+    tlsKey: "",
+    tlsCert: "",
+    consoleKey: "",
+    consoleCert: "",
+    serverKey: "",
+    serverCert: "",
+    clientKey: "",
+    clientCert: "",
+    vaultKey: "",
+    vaultCert: "",
+    vaultCA: "",
+    gemaltoCA: "",
+  });
+
+  /*Debounce functions*/
+
+  // Storage Quotas
+  const getNamespaceInformation = () => {
+    setSelectedStorageClass("");
+    setStorageClassesList([]);
+    api
+      .invoke(
+        "GET",
+        `/api/v1/namespaces/${namespace}/resourcequotas/${namespace}-storagequota`
+      )
+      .then((res: string[]) => {
+        const elements = get(res, "elements", []);
+
+        const newStorage = elements.map((storageClass: any) => {
+          const name = get(storageClass, "name", "").split(".")[0];
+
+          return { label: name, value: name };
+        });
+
+        setStorageClassesList(newStorage);
+
+        if (newStorage.length > 0) {
+          setSelectedStorageClass(newStorage[0].value);
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+      });
+  };
+
+  const debounceNamespace = useCallback(
+    debounce(getNamespaceInformation, 500),
+    [namespace]
+  );
+
   useEffect(() => {
-    fetchStorageClassList();
-  }, []);
+    if (namespace !== "") {
+      debounceNamespace();
+
+      // Cancel previous debounce calls during useEffect cleanup.
+      return debounceNamespace.cancel;
+    }
+  }, [namespace, debounceNamespace]);
+  /*End debounce functions*/
+
+  /*Calculate Allocation*/
+  useEffect(() => {
+    validateClusterSize();
+  }, [nodes, volumeSize, sizeFactor]);
+
+  const validateClusterSize = () => {
+    const size = volumeSize;
+    const factor = sizeFactor;
+    const limitSize = getBytes("12", "Ti", true);
+
+    const capacityElement: ICapacity = {
+      unit: factor,
+      value: size.toString(),
+    };
+
+    const distrCalculate = calculateDistribution(
+      capacityElement,
+      parseInt(nodes),
+      parseInt(limitSize)
+    );
+
+    setDistribution(distrCalculate);
+
+    /*const errorDistribution = get(distrCalculate, "error", "");
+
+    if (errorDistribution === "") {
+      const disksPerServer = get(distrCalculate, "disks", 0);
+      const totalNodes = get(distrCalculate, "nodes", 0);
+      const sizePerVolume = get(distrCalculate, "pvSize", 0);
+
+      getParity(totalNodes, disksPerServer, sizePerVolume);
+    }*/
+  };
+
+  /*Calculate Allocation End*/
 
   /* Validations of pages */
   useEffect(() => {
-    const commonValidation = commonFormValidation([validationElements[0]]);
-
-    setNameTenantValid(!("tenant-name" in commonValidation));
-
-    setValidationErrors(commonValidation);
-  }, [tenantName]);
-
-  useEffect(() => {
-    let subValidation = validationElements.slice(1, 3);
-
-    if (!advancedMode) {
-      subValidation.push({
-        fieldKey: "servers",
+    const commonValidation = commonFormValidation([
+      {
+        fieldKey: "tenant-name",
         required: true,
-        pattern: /\d+/,
-        customPatternMessage: "Field must be numeric",
-        value: zones.length > 0 ? zones[0].servers.toString(10) : "0",
-      });
-    }
+        pattern: /^[a-z0-9-]{3,63}$/,
+        customPatternMessage:
+          "Name only can contain lowercase letters, numbers and '-'. Min. Length: 3",
+        value: tenantName,
+      },
+      {
+        fieldKey: "namespace",
+        required: true,
+        value: tenantName,
+        customValidation: storageClasses.length < 1,
+        customValidationMessage: "Please enter a valid namespace",
+      },
+    ]);
 
-    const commonValidation = commonFormValidation(subValidation);
-
-    setConfigValid(
-      !("volumes_per_server" in commonValidation) &&
-        !("volume_size" in commonValidation) &&
-        !("servers" in commonValidation)
+    setNameTenantValid(
+      !("tenant-name" in commonValidation) &&
+        !("namespace" in commonValidation) &&
+        storageClasses.length > 0
     );
 
     setValidationErrors(commonValidation);
-  }, [volumesPerServer, volumeConfiguration, zones]);
+  }, [tenantName, namespace, selectedStorageClass, storageClasses]);
+
+  useEffect(() => {
+    const parsedSize = getBytes(volumeSize, sizeFactor, true);
+
+    const commonValidation = commonFormValidation([
+      {
+        fieldKey: "nodes",
+        required: true,
+        value: nodes,
+        customValidation: parseInt(nodes) < 4,
+        customValidationMessage: "Number of nodes cannot be less than 4",
+      },
+      {
+        fieldKey: "volume_size",
+        required: true,
+        value: volumeSize,
+        customValidation: parseInt(parsedSize) < 1073741824,
+        customValidationMessage: "Volume size must be greater than 1Gi",
+      },
+      {
+        fieldKey: "memory_per_node",
+        required: true,
+        value: memoryNode,
+        customValidation: parseInt(memoryNode) < 2,
+        customValidationMessage: "Memory size must be greater than 2Gi",
+      },
+    ]);
+
+    setConfigValid(
+      !("nodes" in commonValidation) &&
+        !("volume_size" in commonValidation) &&
+        !("memory_per_node" in commonValidation) &&
+        distribution.error === ""
+    );
+
+    setValidationErrors(commonValidation);
+  }, [nodes, volumeSize, sizeFactor, memoryNode, distribution]);
 
   useEffect(() => {
     let customAccountValidation: IValidation[] = [];
-    if (customACCK) {
-      customAccountValidation = [
-        ...customAccountValidation,
-        {
-          fieldKey: "access_key",
-          required: true,
-          value: accessKey,
-        },
-        {
-          fieldKey: "secret_key",
-          required: true,
-          value: secretKey,
-        },
-      ];
-    }
 
     if (customDockerhub) {
       customAccountValidation = [
@@ -201,56 +366,7 @@ const AddTenant = ({
     setConfigureValid(Object.keys(commonVal).length === 0);
 
     setValidationErrors(commonVal);
-  }, [customACCK, customDockerhub, accessKey, secretKey, imageName]);
-
-  useEffect(() => {
-    const filteredZones = zones.filter(
-      (zone) => zone.name !== "" && zone.servers !== 0 && !isNaN(zone.servers)
-    );
-
-    if (filteredZones.length > 0) {
-      setZonesValid(true);
-      setValidationErrors({});
-
-      return;
-    }
-
-    setZonesValid(false);
-    setValidationErrors({ zones_selector: "Please add a valid zone" });
-  }, [zones]);
-
-  /* End Validation of pages */
-
-  const validationElements: IValidation[] = [
-    {
-      fieldKey: "tenant-name",
-      required: true,
-      pattern: /^[a-z0-9-]{3,63}$/,
-      customPatternMessage:
-        "Name only can contain lowercase letters, numbers and '-'. Min. Length: 3",
-      value: tenantName,
-    },
-    {
-      fieldKey: "volumes_per_server",
-      required: true,
-      pattern: /\d+/,
-      customPatternMessage: "Field must be numeric",
-      value: volumesPerServer.toString(10),
-    },
-    {
-      fieldKey: "volume_size",
-      required: true,
-      pattern: /\d+/,
-      customPatternMessage: "Field must be numeric",
-      value: volumeConfiguration.size.toString(10),
-    },
-
-    {
-      fieldKey: "service_name",
-      required: false,
-      value: serviceName,
-    },
-  ];
+  }, [customDockerhub, imageName]);
 
   const clearValidationError = (fieldKey: string) => {
     const newValidationElement = { ...validationErrors };
@@ -259,105 +375,243 @@ const AddTenant = ({
     setValidationErrors(newValidationElement);
   };
 
+  /* End Validation of pages */
+
+  /* Send Information to backend */
   useEffect(() => {
     if (addSending) {
-      let cleanZones = zones.filter(
-        (zone) => zone.name !== "" && zone.servers > 0 && !isNaN(zone.servers)
-      );
+      const zoneName = generateZoneName([]);
 
-      const commonValidation = commonFormValidation(validationElements);
+      const hardCodedAffinity: IAffinityModel = {
+        podAntiAffinity: {
+          requiredDuringSchedulingIgnoredDuringExecution: [
+            {
+              labelSelector: {
+                matchExpressions: [
+                  {
+                    key: "v1.min.io/tenant",
+                    operator: "In",
+                    values: [tenantName],
+                  },
+                  {
+                    key: "v1.min.io/zone",
+                    operator: "In",
+                    values: [zoneName],
+                  },
+                ],
+              },
+              topologyKey: "kubernetes.io/hostname",
+            },
+          ],
+        },
+      };
 
-      setValidationErrors(commonValidation);
+      const ecLimit = "EC:0";
 
-      if (Object.keys(commonValidation).length === 0) {
-        const data: { [key: string]: any } = {
-          name: tenantName,
-          service_name: tenantName,
-          image: imageName,
-          enable_tls: enableTLS,
-          enable_console: enableConsole,
-          access_key: accessKey,
-          secret_key: secretKey,
-          volumes_per_server: volumesPerServer,
-          volume_configuration: {
-            size: `${volumeConfiguration.size}${sizeFactor}`,
-            storage_class: volumeConfiguration.storage_class,
+      const erasureCode = ecLimit.split(":")[1];
+
+      let dataSend: ITenantCreator = {
+        name: tenantName,
+        namespace: namespace,
+        access_key: "",
+        secret_key: "",
+        enable_tls: enableTLS && tlsType === "autocert",
+        enable_console: true,
+        enable_prometheus: enablePrometheus,
+        service_name: "",
+        image: imageName,
+        console_image: consoleImage,
+        zones: [
+          {
+            name: zoneName,
+            servers: distribution.nodes,
+            volumes_per_server: distribution.disks,
+            volume_configuration: {
+              size: distribution.pvSize,
+              storage_class_name: selectedStorageClass,
+            },
+            resources: {
+              requests: {
+                memory: parseInt(getBytes(memoryNode, "Gi")),
+              },
+            },
+            affinity: hardCodedAffinity,
           },
-          zones: cleanZones,
-        };
+        ],
+        erasureCodingParity: parseInt(erasureCode, 10),
+      };
 
-        api
-          .invoke("POST", `/api/v1/tenants`, data)
-          .then((res) => {
-            const newSrvAcc: NewServiceAccount = {
-              accessKey: res.access_key,
-              secretKey: res.secret_key,
-            };
+      if (tlsType === "customcert") {
+        let tenantCerts: any = null;
+        let consoleCerts: any = null;
+        if (filesBase64.tlsCert !== "" && filesBase64.tlsKey !== "") {
+          tenantCerts = {
+            minio: {
+              crt: filesBase64.tlsCert,
+              key: filesBase64.tlsKey,
+            },
+          };
+        }
 
-            setAddSending(false);
-            setAddError("");
-            closeModalAndRefresh(true, newSrvAcc);
-          })
-          .catch((err) => {
-            setAddSending(false);
-            setAddError(err);
-          });
-      } else {
-        setAddSending(false);
-        setAddError("Please fix the errors in the form and try again");
+        if (filesBase64.consoleCert !== "" && filesBase64.consoleKey !== "") {
+          consoleCerts = {
+            console: {
+              crt: filesBase64.consoleCert,
+              key: filesBase64.consoleKey,
+            },
+          };
+        }
+
+        if (tenantCerts || consoleCerts) {
+          dataSend = {
+            ...dataSend,
+            tls: {
+              ...tenantCerts,
+              ...consoleCerts,
+            },
+          };
+        }
       }
+
+      if (enableEncryption) {
+        let insertEncrypt = {};
+
+        switch (encryptionType) {
+          case "gemalto":
+            insertEncrypt = {
+              gemalto: {
+                keysecure: {
+                  endpoint: gemaltoEndpoint,
+                  credentials: {
+                    token: gemaltoToken,
+                    domain: gemaltoDomain,
+                    retry: gemaltoRetry,
+                  },
+                  tls: {
+                    ca: filesBase64.gemaltoCA,
+                  },
+                },
+              },
+            };
+            break;
+          case "AWS":
+            insertEncrypt = {
+              aws: {
+                secretsmanager: {
+                  endpoint: awsEndpoint,
+                  region: awsRegion,
+                  kmskey: awsKMSKey,
+                  credentials: {
+                    accesskey: awsAccessKey,
+                    secretkey: awsSecretKey,
+                    token: awsToken,
+                  },
+                },
+              },
+            };
+            break;
+          case "vault":
+            insertEncrypt = {
+              vault: {
+                endpoint: vaultEndpoint,
+                engine: vaultEngine,
+                namespace: vaultNamespace,
+                prefix: vaultPrefix,
+                approle: {
+                  engine: vaultAppRoleEngine,
+                  id: vaultId,
+                  secret: vaultSecret,
+                  retry: vaultRetry,
+                },
+                tls: {
+                  key: filesBase64.vaultKey,
+                  crt: filesBase64.vaultCert,
+                  ca: filesBase64.vaultCA,
+                },
+                status: {
+                  ping: vaultPing,
+                },
+              },
+            };
+            break;
+        }
+
+        dataSend = {
+          ...dataSend,
+          encryption: {
+            client: {
+              key: filesBase64.clientKey,
+              crt: filesBase64.clientCert,
+            },
+            server: {
+              key: filesBase64.serverKey,
+              crt: filesBase64.serverCert,
+            },
+            ...insertEncrypt,
+          },
+        };
+      }
+
+      if (idpSelection !== "none") {
+        let dataIDP: any = {};
+
+        switch (idpSelection) {
+          case "OpenID":
+            dataIDP = {
+              oidc: {
+                url: openIDURL,
+                client_id: openIDClientID,
+                secret_id: openIDSecretID,
+              },
+            };
+            break;
+          case "AD":
+            dataIDP = {
+              active_directory: {
+                url: ADURL,
+                skip_tls_verification: ADSkipTLS,
+                server_insecure: ADServerInsecure,
+                username_format: "",
+                user_search_filter: ADUserNameFilter,
+                group_search_base_dn: ADGroupBaseDN,
+                group_search_filter: ADGroupSearchFilter,
+                group_name_attribute: ADNameAttribute,
+              },
+            };
+            break;
+        }
+
+        dataSend = {
+          ...dataSend,
+          idp: { ...dataIDP },
+        };
+      }
+
+      api
+        .invoke("POST", `/api/v1/tenants`, dataSend)
+        .then((res) => {
+          const newSrvAcc: NewServiceAccount = {
+            accessKey: res.access_key,
+            secretKey: res.secret_key,
+          };
+
+          setAddSending(false);
+          setAddError("");
+          closeModalAndRefresh(true, newSrvAcc);
+        })
+        .catch((err) => {
+          setAddSending(false);
+          setAddError(err);
+        });
     }
   }, [addSending]);
 
-  useEffect(() => {
-    if (advancedMode) {
-      setZones([{ name: "zone-1", servers: 0, capacity: "0", volumes: 0 }]);
-    } else {
-      setZones([{ name: "zone-1", servers: 1, capacity: "0", volumes: 0 }]);
-    }
-  }, [advancedMode]);
+  const storeCertInObject = (certName: string, certValue: string) => {
+    const copyCurrentList = { ...filesBase64 };
 
-  const setVolumeConfig = (item: string, value: string) => {
-    const volumeCopy: IVolumeConfiguration = {
-      size: item !== "size" ? volumeConfiguration.size : parseInt(value),
-      storage_class:
-        item !== "storage_class" ? volumeConfiguration.storage_class : value,
-    };
+    copyCurrentList[certName] = certValue;
 
-    setVolumeConfiguration(volumeCopy);
-  };
-
-  const setServersSimple = (value: string) => {
-    const copyZone = [...zones];
-
-    copyZone[0].servers = parseInt(value, 10);
-
-    setZones(copyZone);
-  };
-
-  const fetchStorageClassList = () => {
-    api
-      .invoke("GET", `/api/v1/storage-classes`)
-      .then((res: string[]) => {
-        let classes: string[] = [];
-        if (res !== null) {
-          classes = res;
-        }
-        setStorageClassesList(
-          classes.map((s: string) => ({
-            label: s,
-            value: s,
-          }))
-        );
-
-        const newStorage = { ...volumeConfiguration };
-        newStorage.storage_class = res[0];
-
-        setVolumeConfiguration(newStorage);
-      })
-      .catch((err: any) => {
-        console.log(err);
-      });
+    setFilesBase64(copyCurrentList);
   };
 
   const cancelButton = {
@@ -386,16 +640,48 @@ const AddTenant = ({
                 setTenantName(e.target.value);
                 clearValidationError("tenant-name");
               }}
-              label="Tenant Name"
+              label="Name"
               value={tenantName}
               required
               error={validationErrors["tenant-name"] || ""}
             />
           </Grid>
+          <Grid item xs={12}>
+            <InputBoxWrapper
+              id="namespace"
+              name="namespace"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setNamespace(e.target.value);
+                clearValidationError("namespace");
+              }}
+              label="Namespace"
+              value={namespace}
+              error={validationErrors["namespace"] || ""}
+              required
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <SelectWrapper
+              id="storage_class"
+              name="storage_class"
+              onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                console.log(e.target.value as string);
+                setSelectedStorageClass(e.target.value as string);
+              }}
+              label="Storage Class"
+              value={selectedStorageClass || ""}
+              options={storageClasses}
+              disabled={storageClasses.length < 1}
+            />
+          </Grid>
           <Grid item xs={12}>
             <br />
             <span>
-              Use Advanced mode to configure additional options in the tenant
+              Check 'Advanced Mode' for additional configuration options, such
+              as IDP, Disk Encryption, and customized TLS/SSL Certificates.
+              <br />
+              Leave 'Advanced Mode' unchecked to use the secure default settings
+              for the tenant.
             </span>
             <br />
             <br />
@@ -422,82 +708,32 @@ const AddTenant = ({
     },
     {
       label: "Configure",
+      advancedOnly: true,
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
             <h3>Configure</h3>
             <span>Basic configurations for tenant management</span>
           </div>
+
           <Grid item xs={12}>
             <CheckboxWrapper
-              value="custom_acck"
-              id="custom_acck"
-              name="custom_acck"
-              checked={customACCK}
+              value="custom_dockerhub"
+              id="custom_dockerhub"
+              name="custom_dockerhub"
+              checked={customDockerhub}
               onChange={(e) => {
                 const targetD = e.target;
                 const checked = targetD.checked;
 
-                setCustomACCK(checked);
+                setCustomDockerhub(checked);
               }}
-              label={"Use Custom Access Keys"}
+              label={"Use custom image"}
             />
           </Grid>
-          {customACCK && (
-            <React.Fragment>
-              Please enter your access & secret keys
-              <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="access_key"
-                  name="access_key"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setAccessKey(e.target.value);
-                    clearValidationError("access_key");
-                  }}
-                  label="Access Key"
-                  value={accessKey}
-                  error={validationErrors["access_key"] || ""}
-                  required
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="secret_key"
-                  name="secret_key"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setSecretKey(e.target.value);
-                    clearValidationError("secret_key");
-                  }}
-                  label="Secret Key"
-                  value={secretKey}
-                  error={validationErrors["secret_key"] || ""}
-                  required
-                />
-              </Grid>
-            </React.Fragment>
-          )}
-
-          {advancedMode && (
-            <Grid item xs={12}>
-              <CheckboxWrapper
-                value="custom_dockerhub"
-                id="custom_dockerhub"
-                name="custom_dockerhub"
-                checked={customDockerhub}
-                onChange={(e) => {
-                  const targetD = e.target;
-                  const checked = targetD.checked;
-
-                  setCustomDockerhub(checked);
-                }}
-                label={"Use custom image"}
-              />
-            </Grid>
-          )}
-
           {customDockerhub && (
             <React.Fragment>
-              Please enter the MinIO image from dockerhub
+              Please enter the MinIO image from dockerhub to use
               <Grid item xs={12}>
                 <InputBoxWrapper
                   id="image"
@@ -506,15 +742,45 @@ const AddTenant = ({
                     setImageName(e.target.value);
                     clearValidationError("image");
                   }}
-                  label="MinIO Image"
+                  label="MinIO's Image"
                   value={imageName}
                   error={validationErrors["image"] || ""}
                   placeholder="Eg. minio/minio:RELEASE.2020-05-08T02-40-49Z"
                   required
                 />
               </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="consoleImage"
+                  name="consoleImage"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setConsoleImage(e.target.value);
+                    clearValidationError("consoleImage");
+                  }}
+                  label="Console's Image"
+                  value={consoleImage}
+                  error={validationErrors["consoleImage"] || ""}
+                  placeholder="Eg. minio/console:v0.3.13"
+                  required
+                />
+              </Grid>
             </React.Fragment>
           )}
+          <Grid item xs={12}>
+            <CheckboxWrapper
+              value="enable_prometheus"
+              id="enable_prometheus"
+              name="enable_prometheus"
+              checked={enablePrometheus}
+              onChange={(e) => {
+                const targetD = e.target;
+                const checked = targetD.checked;
+
+                setEnablePrometheus(checked);
+              }}
+              label={"Enable prometheus integration"}
+            />
+          </Grid>
         </React.Fragment>
       ),
       buttons: [
@@ -524,71 +790,185 @@ const AddTenant = ({
       ],
     },
     {
-      label: "Service Configuration",
+      label: "IDP",
       advancedOnly: true,
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Service Configuration</h3>
-          </div>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              id="service_name"
-              name="service_name"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setServiceName(e.target.value);
-                clearValidationError("service_name");
-              }}
-              label="Service Name"
-              value={serviceName}
-              error={validationErrors["service_name"] || ""}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              id="namespace"
-              name="namespace"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setNamespace(e.target.value);
-                clearValidationError("namespace");
-              }}
-              label="Namespace"
-              value={namespace}
-              error={validationErrors["namespace"] || ""}
-            />
-          </Grid>
-        </React.Fragment>
-      ),
-      buttons: [
-        cancelButton,
-        { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: true },
-      ],
-    },
-    {
-      label: "Storage Class",
-      advancedOnly: true,
-      componentRender: (
-        <React.Fragment>
-          <div className={classes.headerElement}>
-            <h3>Choose your prefered Storage Class</h3>
+            <h3>IDP</h3>
             <span>
-              Review the storage classes available in the tenant and decide
-              which one to allocate the tenant to
+              Access to the tenant can be controlled via an external Identity
+              Manager.
             </span>
           </div>
           <Grid item xs={12}>
-            <SelectWrapper
-              id="storage_class"
-              name="storage_class"
-              onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                setVolumeConfig("storage_class", e.target.value as string);
+            <RadioGroupSelector
+              currentSelection={idpSelection}
+              id="idp-options"
+              name="idp-options"
+              label="IDP Selection"
+              onChange={(e) => {
+                setIdpSelection(e.target.value);
               }}
-              label="Storage Class"
-              value={volumeConfiguration.storage_class}
-              options={storageClasses}
+              selectorOptions={[
+                { label: "None", value: "none" },
+                { label: "OpenID", value: "OpenID" },
+                { label: "Active Directory", value: "AD" },
+              ]}
             />
+            MinIO supports both OpenID and Active Directory
           </Grid>
+
+          {idpSelection === "OpenID" && (
+            <React.Fragment>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="openID_URL"
+                  name="openID_URl"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setOpenIDURL(e.target.value);
+                    clearValidationError("openID_URL");
+                  }}
+                  label="URL"
+                  value={openIDURL}
+                  error={validationErrors["openID_URL"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="openID_clientID"
+                  name="openID_clientID"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setOpenIDClientID(e.target.value);
+                    clearValidationError("openID_clientID");
+                  }}
+                  label="Client ID"
+                  value={openIDClientID}
+                  error={validationErrors["openID_clientID"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="openID_secretID"
+                  name="openID_secretID"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setOpenIDSecretID(e.target.value);
+                    clearValidationError("openID_secretID");
+                  }}
+                  label="Secret ID"
+                  value={openIDSecretID}
+                  error={validationErrors["openID_secretID"] || ""}
+                  required
+                />
+              </Grid>
+            </React.Fragment>
+          )}
+          {idpSelection === "AD" && (
+            <React.Fragment>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="AD_URL"
+                  name="AD_URL"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setADURL(e.target.value);
+                    clearValidationError("AD_URL");
+                  }}
+                  label="URL"
+                  value={ADURL}
+                  error={validationErrors["AD_URL"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <CheckboxWrapper
+                  value="ad_skipTLS"
+                  id="ad_skipTLS"
+                  name="ad_skipTLS"
+                  checked={ADSkipTLS}
+                  onChange={(e) => {
+                    const targetD = e.target;
+                    const checked = targetD.checked;
+
+                    setADSkipTLS(checked);
+                  }}
+                  label={"Skip TLS Verification"}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <CheckboxWrapper
+                  value="ad_serverInsecure"
+                  id="ad_serverInsecure"
+                  name="ad_serverInsecure"
+                  checked={ADServerInsecure}
+                  onChange={(e) => {
+                    const targetD = e.target;
+                    const checked = targetD.checked;
+
+                    setADServerInsecure(checked);
+                  }}
+                  label={"Server Insecure"}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="ad_userNameFilter"
+                  name="ad_userNameFilter"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setADUserNameFilter(e.target.value);
+                    clearValidationError("ad_userNameFilter");
+                  }}
+                  label="User Search Filter"
+                  value={ADUserNameFilter}
+                  error={validationErrors["ad_userNameFilter"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="ad_groupBaseDN"
+                  name="ad_groupBaseDN"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setADGroupBaseDN(e.target.value);
+                    clearValidationError("ad_groupBaseDN");
+                  }}
+                  label="Group Search Base DN"
+                  value={ADGroupBaseDN}
+                  error={validationErrors["ad_groupBaseDN"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="ad_groupSearchFilter"
+                  name="ad_groupSearchFilter"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setADGroupSearchFilter(e.target.value);
+                    clearValidationError("ad_groupSearchFilter");
+                  }}
+                  label="Group Search Filter"
+                  value={ADGroupSearchFilter}
+                  error={validationErrors["ad_groupSearchFilter"] || ""}
+                  required
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <InputBoxWrapper
+                  id="ad_nameAttribute"
+                  name="ad_nameAttribute"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setADNameAttribute(e.target.value);
+                    clearValidationError("ad_nameAttribute");
+                  }}
+                  label="Group Name Attribute"
+                  value={ADNameAttribute}
+                  error={validationErrors["ad_nameAttribute"] || ""}
+                  required
+                />
+              </Grid>
+            </React.Fragment>
+          )}
         </React.Fragment>
       ),
       buttons: [
@@ -598,59 +978,558 @@ const AddTenant = ({
       ],
     },
     {
-      label: "Server Configuration",
+      label: "Security",
+      advancedOnly: true,
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Server Configuration</h3>
-            <span>Define the server configuration</span>
+            <h3>Security</h3>
           </div>
-          {advancedMode && (
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="mount_path"
-                name="mount_path"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setMountPath(e.target.value);
-                }}
-                label="Mount Path"
-                value={mountPath}
-              />
-            </Grid>
-          )}
+          <Grid item xs={12}>
+            <CheckboxWrapper
+              value="enableTLS"
+              id="enableTLS"
+              name="enableTLS"
+              checked={enableTLS}
+              onChange={(e) => {
+                const targetD = e.target;
+                const checked = targetD.checked;
 
-          {!advancedMode && (
-            <Grid item xs={12}>
-              <InputBoxWrapper
-                id="servers"
-                name="servers"
-                type="number"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setServersSimple(e.target.value);
-                  clearValidationError("servers");
-                }}
-                label="Number of Servers"
-                value={zones.length > 0 ? zones[0].servers.toString(10) : "0"}
-                min="0"
-                required
-                error={validationErrors["servers"] || ""}
-              />
-            </Grid>
+                setEnableTLS(checked);
+              }}
+              label={"Enable TLS"}
+            />
+            Enable TLS for the tenant, this is required for Encryption
+            Configuration
+          </Grid>
+          {enableTLS && (
+            <React.Fragment>
+              <Grid item xs={12}>
+                <RadioGroupSelector
+                  currentSelection={tlsType}
+                  id="tls-options"
+                  name="tls-options"
+                  label="TLS Options"
+                  onChange={(e) => {
+                    setTLSType(e.target.value);
+                  }}
+                  selectorOptions={[
+                    { label: "Autocert", value: "autocert" },
+                    { label: "Custom Certificate", value: "customcert" },
+                  ]}
+                />
+              </Grid>
+              {tlsType !== "autocert" && (
+                <React.Fragment>
+                  <h5>MinIO TLS Certs</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("tlsKey", encodedValue);
+                      }}
+                      accept=".key,.pem"
+                      id="tlsKey"
+                      name="tlsKey"
+                      label="Key"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("tlsCert", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="tlsCert"
+                      name="tlsCert"
+                      label="Cert"
+                      required
+                    />
+                  </Grid>
+                  <h5>Console TLS Certs</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("consoleKey", encodedValue);
+                      }}
+                      accept=".key,.pem"
+                      id="consoleKey"
+                      name="consoleKey"
+                      label="Key"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("consoleCert", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="consoleCert"
+                      name="consoleCert"
+                      label="Cert"
+                      required
+                    />
+                  </Grid>
+                </React.Fragment>
+              )}
+            </React.Fragment>
           )}
+        </React.Fragment>
+      ),
+      buttons: [
+        cancelButton,
+        { label: "Back", type: "back", enabled: true },
+        { label: "Next", type: "next", enabled: true },
+      ],
+    },
+    {
+      label: "Encryption",
+      advancedOnly: true,
+      componentRender: (
+        <React.Fragment>
+          <div className={classes.headerElement}>
+            <h3>Encryption</h3>
+            <span>How would you like to encrypt the information at rest.</span>
+          </div>
+          <Grid item xs={12}>
+            <CheckboxWrapper
+              value="enableEncryption"
+              id="enableEncryption"
+              name="enableEncryption"
+              checked={enableEncryption}
+              onChange={(e) => {
+                const targetD = e.target;
+                const checked = targetD.checked;
+
+                setEnableEncryption(checked);
+              }}
+              label={"Enable Server Side Encryption"}
+              disabled={!enableTLS}
+            />
+          </Grid>
+          {enableEncryption && (
+            <React.Fragment>
+              <Grid item xs={12}>
+                <RadioGroupSelector
+                  currentSelection={encryptionType}
+                  id="encryptionType"
+                  name="encryptionType"
+                  label="Encryption Options"
+                  onChange={(e) => {
+                    setEncryptionType(e.target.value);
+                  }}
+                  selectorOptions={[
+                    { label: "Vault", value: "vault" },
+                    { label: "AWS", value: "aws" },
+                    { label: "Gemalto", value: "gemalto" },
+                  ]}
+                />
+              </Grid>
+
+              {enableTLS && tlsType !== "autocert" && (
+                <React.Fragment>
+                  <h5>Server</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("serverKey", encodedValue);
+                      }}
+                      accept=".key,.pem"
+                      id="serverKey"
+                      name="serverKey"
+                      label="Key"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("serverCert", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="serverCert"
+                      name="serverCert"
+                      label="Cert"
+                      required
+                    />
+                  </Grid>
+                  <h5>Client</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("clientKey", encodedValue);
+                      }}
+                      accept=".key,.pem"
+                      id="clientKey"
+                      name="clientKey"
+                      label="Key"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("clientCert", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="clientCert"
+                      name="clientCert"
+                      label="Cert"
+                      required
+                    />
+                  </Grid>
+                </React.Fragment>
+              )}
+
+              {encryptionType === "vault" && (
+                <React.Fragment>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_endpoint"
+                      name="vault_endpoint"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultEndpoint(e.target.value);
+                        clearValidationError("vault_endpoint");
+                      }}
+                      label="Endpoint"
+                      value={vaultEndpoint}
+                      error={validationErrors["vault_endpoint"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_engine"
+                      name="vault_engine"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultEngine(e.target.value);
+                      }}
+                      label="Engine"
+                      value={vaultEngine}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_namespace"
+                      name="vault_namespace"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultNamespace(e.target.value);
+                      }}
+                      label="Namespace"
+                      value={vaultNamespace}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_prefix"
+                      name="vault_prefix"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultPrefix(e.target.value);
+                      }}
+                      label="Prefix"
+                      value={vaultPrefix}
+                    />
+                  </Grid>
+                  <h5>App Role</h5>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_approle_engine"
+                      name="vault_approle_engine"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultAppRoleEngine(e.target.value);
+                      }}
+                      label="Engine"
+                      value={vaultAppRoleEngine}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_id"
+                      name="vault_id"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultId(e.target.value);
+                        clearValidationError("vault_id");
+                      }}
+                      label="Id"
+                      value={vaultId}
+                      error={validationErrors["vault_id"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="vault_secret"
+                      name="vault_secret"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultSecret(e.target.value);
+                        clearValidationError("vault_secret");
+                      }}
+                      label="Id"
+                      value={vaultSecret}
+                      error={validationErrors["vault_secret"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      type="number"
+                      min="0"
+                      id="vault_retry"
+                      name="vault_retry"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultRetry(e.target.value);
+                      }}
+                      label="Retry"
+                      value={vaultRetry}
+                      required
+                    />
+                  </Grid>
+                  <h5>TLS</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("vaultKey", encodedValue);
+                      }}
+                      accept=".key,.pem"
+                      id="vault_key"
+                      name="vault_key"
+                      label="Key"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("vaultCert", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="vault_cert"
+                      name="vault_cert"
+                      label="Cert"
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("vaultCA", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="vault_ca"
+                      name="vault_ca"
+                      label="CA"
+                      required
+                    />
+                  </Grid>
+                  <h5>Status</h5>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      type="number"
+                      min="0"
+                      id="vault_ping"
+                      name="vault_ping"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setVaultPing(e.target.value);
+                      }}
+                      label="Ping"
+                      value={vaultPing}
+                      required
+                    />
+                  </Grid>
+                </React.Fragment>
+              )}
+              {encryptionType === "aws" && (
+                <React.Fragment>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_endpoint"
+                      name="aws_endpoint"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSEndpoint(e.target.value);
+                        clearValidationError("aws_endpoint");
+                      }}
+                      label="Endpoint"
+                      value={awsEndpoint}
+                      error={validationErrors["aws_endpoint"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_region"
+                      name="aws_region"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSRegion(e.target.value);
+                        clearValidationError("aws_region");
+                      }}
+                      label="Region"
+                      value={awsRegion}
+                      error={validationErrors["aws_region"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_kmsKey"
+                      name="aws_kmsKey"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSKMSKey(e.target.value);
+                      }}
+                      label="KMS Key"
+                      value={awsKMSKey}
+                    />
+                  </Grid>
+                  <h5>Credentials</h5>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_accessKey"
+                      name="aws_accessKey"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSAccessKey(e.target.value);
+                        clearValidationError("aws_accessKey");
+                      }}
+                      label="Access Key"
+                      value={awsAccessKey}
+                      error={validationErrors["aws_accessKey"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_secretKey"
+                      name="aws_secretKey"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSSecretKey(e.target.value);
+                        clearValidationError("aws_secretKey");
+                      }}
+                      label="Secret Key"
+                      value={awsSecretKey}
+                      error={validationErrors["aws_secretKey"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="aws_token"
+                      name="aws_token"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setAWSToken(e.target.value);
+                      }}
+                      label="Secret Key"
+                      value={awsToken}
+                    />
+                  </Grid>
+                </React.Fragment>
+              )}
+              {encryptionType === "gemalto" && (
+                <React.Fragment>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="gemalto_endpoint"
+                      name="gemalto_endpoint"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setGemaltoEndpoint(e.target.value);
+                        clearValidationError("gemalto_endpoint");
+                      }}
+                      label="Endpoint"
+                      value={gemaltoEndpoint}
+                      error={validationErrors["gemalto_endpoint"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <h5>Credentials</h5>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="gemalto_token"
+                      name="gemalto_token"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setGemaltoToken(e.target.value);
+                        clearValidationError("gemalto_endpoint");
+                      }}
+                      label="Token"
+                      value={gemaltoToken}
+                      error={validationErrors["gemalto_endpoint"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      id="gemalto_domain"
+                      name="gemalto_domain"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setGemaltoDomain(e.target.value);
+                        clearValidationError("gemalto_domain");
+                      }}
+                      label="Domain"
+                      value={gemaltoDomain}
+                      error={validationErrors["gemalto_domain"] || ""}
+                      required
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <InputBoxWrapper
+                      type="number"
+                      min="0"
+                      id="gemalto_retry"
+                      name="gemalto_retry"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setGemaltoRetry(e.target.value);
+                      }}
+                      label="Domain"
+                      value={gemaltoRetry}
+                      error={validationErrors["gemalto_retry"] || ""}
+                    />
+                  </Grid>
+                  <h5>TLS</h5>
+                  <Grid item xs={12}>
+                    <FileSelector
+                      onChange={(encodedValue) => {
+                        storeCertInObject("gemaltoCA", encodedValue);
+                      }}
+                      accept=".cer,.crt,.cert,.pem"
+                      id="gemalto_ca"
+                      name="gemalto_ca"
+                      label="CA"
+                      required
+                    />
+                  </Grid>
+                </React.Fragment>
+              )}
+            </React.Fragment>
+          )}
+        </React.Fragment>
+      ),
+      buttons: [
+        cancelButton,
+        { label: "Back", type: "back", enabled: true },
+        { label: "Next", type: "next", enabled: true },
+      ],
+    },
+    {
+      label: "Tenant Size",
+      componentRender: (
+        <React.Fragment>
+          <div className={classes.headerElement}>
+            <h3>Tenant Size</h3>
+            <span>Please select the desired capacity</span>
+          </div>
+          <span className={classes.error}>{distribution.error}</span>
           <Grid item xs={12}>
             <InputBoxWrapper
-              id="volumes_per_server"
-              name="volumes_per_server"
+              id="nodes"
+              name="nodes"
               type="number"
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setVolumesPerServer(parseInt(e.target.value));
-                clearValidationError("volumes_per_server");
+                setNodes(e.target.value);
+                clearValidationError("nodes");
               }}
-              label="Volumes per Server"
-              value={volumesPerServer.toString(10)}
-              min="0"
+              label="Number of Nodes"
+              value={nodes}
+              min="4"
               required
-              error={validationErrors["volumes_per_server"] || ""}
+              error={validationErrors["nodes"] || ""}
             />
           </Grid>
           <Grid item xs={12}>
@@ -661,11 +1540,11 @@ const AddTenant = ({
                   id="volume_size"
                   name="volume_size"
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setVolumeConfig("size", e.target.value);
+                    setVolumeSize(e.target.value);
                     clearValidationError("volume_size");
                   }}
                   label="Size"
-                  value={volumeConfiguration.size.toString(10)}
+                  value={volumeSize}
                   required
                   error={validationErrors["volume_size"] || ""}
                   min="0"
@@ -685,6 +1564,69 @@ const AddTenant = ({
               </div>
             </div>
           </Grid>
+          <Grid item xs={12}>
+            <InputBoxWrapper
+              type="number"
+              id="memory_per_node"
+              name="memory_per_node"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setMemoryNode(e.target.value);
+                clearValidationError("memory_per_node");
+              }}
+              label="Memory per Node [Gi]"
+              value={memoryNode}
+              required
+              error={validationErrors["memory_per_node"] || ""}
+              min="2"
+            />
+          </Grid>
+          {advancedMode && (
+            <Grid item xs={12}>
+              <SelectWrapper
+                id="ec_parity"
+                name="ec_parity"
+                onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                  setECParity(e.target.value as string);
+                }}
+                label="Erasure Code Parity"
+                value={ecParity}
+                options={ecParityChoices}
+              />
+              <span>
+                Please select the desired parity. This setting will change the
+                max usable capacity in the cluster
+              </span>
+            </Grid>
+          )}
+          <h5>Resource Allocation</h5>
+          <Table className={classes.table} aria-label="simple table">
+            <TableBody>
+              <TableRow>
+                <TableCell component="th" scope="row">
+                  Volumes per Node
+                </TableCell>
+                <TableCell align="right">
+                  {distribution ? distribution.disks : "-"}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell component="th" scope="row">
+                  Disk Size
+                </TableCell>
+                <TableCell align="right">
+                  {distribution ? niceBytes(distribution.pvSize) : "-"}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell component="th" scope="row">
+                  Total Number of Volumes
+                </TableCell>
+                <TableCell align="right">
+                  {distribution ? distribution.persistentVolumes : "-"}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </React.Fragment>
       ),
       buttons: [
@@ -694,85 +1636,7 @@ const AddTenant = ({
       ],
     },
     {
-      label: "Zones Definition",
-      advancedOnly: true,
-      componentRender: (
-        <React.Fragment>
-          <div className={classes.headerElement}>
-            <h3>Zones Definition</h3>
-            <span>Define the size of the tenant by defining the zone size</span>
-          </div>
-          <Grid item xs={12}>
-            <div>
-              <ZonesMultiSelector
-                label="Zones"
-                name="zones_selector"
-                onChange={(elements: IZone[]) => {
-                  setZones(elements);
-                }}
-                elements={zones}
-              />
-            </div>
-            <div className={classes.zoneError}>
-              {validationErrors["zones_selector"] || ""}
-            </div>
-          </Grid>
-        </React.Fragment>
-      ),
-      buttons: [
-        cancelButton,
-        { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: zonesValid },
-      ],
-    },
-    {
-      label: "Extra Configurations",
-      advancedOnly: true,
-      componentRender: (
-        <React.Fragment>
-          <div className={classes.headerElement}>
-            <h3>Extra Configurations</h3>
-          </div>
-          <Grid item xs={12}>
-            <CheckboxWrapper
-              value="enabled_console"
-              id="enabled_console"
-              name="enabled_console"
-              checked={enableConsole}
-              onChange={(e) => {
-                const targetD = e.target;
-                const checked = targetD.checked;
-
-                setEnableConsole(checked);
-              }}
-              label={"Enable Console"}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <CheckboxWrapper
-              value="enable_tls"
-              id="enable_tls"
-              name="enable_tls"
-              checked={enableTLS}
-              onChange={(e) => {
-                const targetD = e.target;
-                const checked = targetD.checked;
-
-                setEnableTLS(checked);
-              }}
-              label={"Enable TLS"}
-            />
-          </Grid>
-        </React.Fragment>
-      ),
-      buttons: [
-        cancelButton,
-        { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: true },
-      ],
-    },
-    {
-      label: "Review",
+      label: "Preview Configuration",
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
@@ -799,22 +1663,6 @@ const AddTenant = ({
                 </TableCell>
                 <TableCell>{tenantName}</TableCell>
               </TableRow>
-              {customACCK && (
-                <React.Fragment>
-                  <TableRow>
-                    <TableCell align="right" className={classes.tableTitle}>
-                      Access Key
-                    </TableCell>
-                    <TableCell>{accessKey}</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell align="right" className={classes.tableTitle}>
-                      Secret Key
-                    </TableCell>
-                    <TableCell>{secretKey}</TableCell>
-                  </TableRow>
-                </React.Fragment>
-              )}
 
               {customDockerhub && (
                 <TableRow>
@@ -825,15 +1673,6 @@ const AddTenant = ({
                 </TableRow>
               )}
 
-              {serviceName !== "" && (
-                <TableRow>
-                  <TableCell align="right" className={classes.tableTitle}>
-                    Service Name
-                  </TableCell>
-                  <TableCell>{serviceName}</TableCell>
-                </TableRow>
-              )}
-
               {namespace !== "" && (
                 <TableRow>
                   <TableCell align="right" className={classes.tableTitle}>
@@ -847,37 +1686,17 @@ const AddTenant = ({
                 <TableCell align="right" className={classes.tableTitle}>
                   Storage Class
                 </TableCell>
-                <TableCell>{volumeConfiguration.storage_class}</TableCell>
+                <TableCell>{selectedStorageClass}</TableCell>
               </TableRow>
-              {mountPath !== "" && (
-                <TableRow>
-                  <TableCell align="right" className={classes.tableTitle}>
-                    Mount Path
-                  </TableCell>
-                  <TableCell>{mountPath}</TableCell>
-                </TableRow>
-              )}
 
-              <TableRow>
-                <TableCell align="right" className={classes.tableTitle}>
-                  Volumes per Server
-                </TableCell>
-                <TableCell>{volumesPerServer}</TableCell>
-              </TableRow>
               <TableRow>
                 <TableCell align="right" className={classes.tableTitle}>
                   Volume Size
                 </TableCell>
                 <TableCell>
-                  {volumeConfiguration.size} {sizeFactor}
+                  {volumeSize} {sizeFactor}
                 </TableCell>
               </TableRow>
-              <TableRow>
-                <TableCell align="right" className={classes.tableTitle}>
-                  Total Zones
-                </TableCell>
-                <TableCell>{zones.length}</TableCell>
-              </TableRow>
               {advancedMode && (
                 <React.Fragment>
                   <TableRow>
@@ -886,14 +1705,6 @@ const AddTenant = ({
                     </TableCell>
                     <TableCell>{enableTLS ? "Enabled" : "Disabled"}</TableCell>
                   </TableRow>
-                  <TableRow>
-                    <TableCell align="right" className={classes.tableTitle}>
-                      Enable Console
-                    </TableCell>
-                    <TableCell>
-                      {enableConsole ? "Enabled" : "Disabled"}
-                    </TableCell>
-                  </TableRow>
                 </React.Fragment>
               )}
             </TableBody>
diff --git a/portal-ui/src/utils/validationFunctions.ts b/portal-ui/src/utils/validationFunctions.ts
index d8f140114..0d1ddcaf2 100644
--- a/portal-ui/src/utils/validationFunctions.ts
+++ b/portal-ui/src/utils/validationFunctions.ts
@@ -19,6 +19,8 @@ export interface IValidation {
   required: boolean;
   pattern?: RegExp;
   customPatternMessage?: string;
+  customValidation?: boolean;
+  customValidationMessage?: string;
   value: string;
 }
 
@@ -31,12 +33,18 @@ export const commonFormValidation = (fieldsValidate: IValidation[]) => {
       return;
     }
 
+    if (field.customValidation && field.customValidationMessage) {
+      returnErrors[field.fieldKey] = field.customValidationMessage;
+      return;
+    }
+
     if (field.pattern && field.customPatternMessage) {
       const rgx = new RegExp(field.pattern, "g");
 
       if (!field.value.match(rgx)) {
         returnErrors[field.fieldKey] = field.customPatternMessage;
       }
+      return;
     }
   });