From 9b39566f7cd9609d3107ee9db8714bdc1639b53d Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Wed, 8 Dec 2021 15:34:22 -0800
Subject: [PATCH] Remove Unused CSS Classes (#1308)

* Remove Unused CSS Classes

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Remove Warnings

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 portal-ui/src/common/HelpBox.tsx              |   3 -
 .../src/screens/Console/Account/Account.tsx   |  36 -------
 .../Buckets/BucketDetails/AccessRulePanel.tsx |  48 ---------
 .../Buckets/BucketDetails/AddAccessRule.tsx   |  11 +-
 .../BucketDetails/AddLifecycleModal.tsx       |  12 +--
 .../BucketDetails/AddReplicationModal.tsx     |   8 --
 .../Buckets/BucketDetails/BucketDetails.tsx   | 101 -----------------
 .../BucketDetails/BucketSummaryPanel.tsx      |   7 +-
 .../BucketDetails/DeleteAccessRule.tsx        |   7 --
 .../BucketDetails/DeleteBucketTagModal.tsx    |   7 --
 .../Buckets/BucketDetails/EditAccessRule.tsx  |   4 -
 .../EditLifecycleConfiguration.tsx            |   6 --
 .../BucketDetails/EnableBucketEncryption.tsx  |   8 --
 .../Buckets/BucketDetails/EnableQuota.tsx     |  13 ---
 .../Console/Buckets/ListBuckets/AddBucket.tsx |  14 ---
 .../Buckets/ListBuckets/BucketListItem.tsx    |   8 --
 .../ListBuckets/BulkReplicationModal.tsx      |  11 --
 .../Buckets/ListBuckets/ListBuckets.tsx       |  78 +-------------
 .../Objects/ListObjects/IconWithLabel.tsx     |  39 +++++++
 .../Objects/ListObjects/ListObjects.tsx       |  77 +------------
 .../ListBuckets/Objects/ListObjects/utils.tsx |  12 +--
 .../Objects/ObjectDetails/DeleteTagModal.tsx  |  11 +-
 .../Objects/ObjectDetails/ObjectDetails.tsx   |  72 -------------
 .../ObjectDetails/RestoreFileVersion.tsx      |   7 --
 .../Objects/Preview/PreviewFileContent.tsx    |   8 +-
 .../Console/Common/BoxButton/BoxButton.tsx    |  45 +-------
 .../CSVMultiSelector/CSVMultiSelector.tsx     |  11 +-
 .../CommentBoxWrapper/CommentBoxWrapper.tsx   |   7 --
 .../DateTimePickerWrapper.tsx                 |   4 -
 .../DaysSelector/DaysSelector.tsx             |  11 +-
 .../FileSelector/FileSelector.tsx             |  17 ---
 .../FilterInputWrapper/FilterInputWrapper.tsx |   3 -
 .../FormSwitchWrapper/FormSwitchWrapper.tsx   |  60 -----------
 .../InputBoxWrapper/InputBoxWrapper.tsx       |  11 --
 .../FormComponents/ModalError/ModalError.tsx  |  14 +--
 .../QueryMultiSelector/QueryMultiSelector.tsx |  11 +-
 .../RadioGroupSelector/RadioGroupSelector.tsx |   1 -
 .../Common/GenericWizard/GenericWizard.tsx    |   8 +-
 .../Console/Common/Layout/PageLayout.tsx      |   3 -
 .../Common/ModalWrapper/ModalWrapper.tsx      |   8 --
 .../Common/TabSelector/TabSelector.tsx        |  33 +-----
 .../Common/TableWrapper/TableWrapper.tsx      |  69 ------------
 .../UsageBarWrapper/UsageBarWrapper.tsx       |   3 -
 .../ConfigurationPanels/ConfigurationForm.tsx |  44 +-------
 .../ConfigurationOptions.tsx                  |  25 +----
 .../AddTierConfiguration.tsx                  |  27 +----
 .../TiersConfiguration/TierTypeSelector.tsx   |  37 -------
 .../UpdateTierCredentialsModal.tsx            |  10 +-
 portal-ui/src/screens/Console/Console.tsx     |  82 --------------
 .../BasicDashboard/BasicDashboard.tsx         |  10 --
 .../screens/Console/Dashboard/CommonCard.tsx  |   5 -
 .../Dashboard/Prometheus/PrDashboard.tsx      |  17 ---
 .../Prometheus/Widgets/SingleRepWidget.tsx    |   4 +-
 .../Prometheus/Widgets/SingleValueWidget.tsx  |   7 --
 .../Console/DirectCSI/DirectCSIDrives.tsx     |  25 -----
 .../Console/DirectCSI/DirectCSIMain.tsx       |   6 --
 .../Console/DirectCSI/DirectCSIVolumes.tsx    |  12 +--
 .../Console/DirectCSI/FormatErrorsResult.tsx  |   3 -
 .../src/screens/Console/Groups/AddGroup.tsx   |   6 --
 .../screens/Console/Groups/AddGroupMember.tsx |   4 -
 .../src/screens/Console/Groups/Groups.tsx     |   5 +-
 .../screens/Console/Groups/UsersSelectors.tsx |   3 -
 portal-ui/src/screens/Console/Heal/Heal.tsx   |  18 ----
 .../screens/Console/HealthInfo/HealthInfo.tsx |  10 --
 .../Console/License/ActivationModal.tsx       |   3 -
 .../src/screens/Console/License/License.tsx   |  49 ---------
 .../screens/Console/License/LicenseModal.tsx  |   3 -
 .../Logs/LogSearch/LogSearchFullModal.tsx     |   4 -
 .../Console/Logs/LogSearch/LogsSearchMain.tsx |  21 ----
 portal-ui/src/screens/Console/Menu/Menu.tsx   |  59 ----------
 .../ConfTargetGeneric.tsx                     |  40 -------
 .../CustomForms/EditConfiguration.tsx         |  17 ---
 .../ListNotificationEndpoints.tsx             |  16 ---
 .../NotificationEndpoints.tsx                 |  41 +------
 .../NotificationTypeSelector.tsx              |   3 -
 .../screens/Console/Policies/AddPolicy.tsx    |   4 -
 .../screens/Console/Policies/ListPolicies.tsx |  28 +----
 .../Console/Policies/PolicyDetails.tsx        | 102 +-----------------
 .../screens/Console/Policies/SetPolicy.tsx    |   3 -
 .../screens/Console/Speedtest/STResults.tsx   |  48 ---------
 .../src/screens/Console/Storage/Storage.tsx   |   6 --
 .../screens/Console/Storage/StoragePVCs.tsx   |  10 --
 .../Console/Tenants/AddTenant/AddTenant.tsx   |   3 -
 .../Tenants/AddTenant/Steps/Affinity.tsx      |  10 --
 .../Tenants/AddTenant/Steps/Configure.tsx     |  12 ---
 .../Tenants/AddTenant/Steps/Encryption.tsx    |  24 ++---
 .../AddTenant/Steps/IdentityProvider.tsx      |   8 --
 .../Tenants/AddTenant/Steps/Images.tsx        |   8 --
 .../Tenants/AddTenant/Steps/NameTenant.tsx    |  12 ---
 .../Tenants/AddTenant/Steps/Security.tsx      |   6 --
 .../Tenants/AddTenant/Steps/SizePreview.tsx   |   3 -
 .../Tenants/AddTenant/Steps/TenantSize.tsx    |   6 --
 .../Tenants/ListTenants/ListTenants.tsx       |  19 +---
 .../Tenants/TenantDetails/AddPoolModal.tsx    |  10 +-
 .../Tenants/TenantDetails/PoolsSummary.tsx    |  12 ---
 .../Tenants/TenantDetails/TenantMetrics.tsx   |   4 -
 .../Tenants/TenantDetails/TenantSecurity.tsx  |  13 ---
 .../Tenants/TenantDetails/TenantYAML.tsx      |   4 -
 .../Tenants/TenantDetails/VolumesSummary.tsx  |  10 --
 .../Tenants/TenantDetails/pods/PodLogs.tsx    |   3 -
 .../Console/Tools/ToolsPanel/ToolsList.tsx    |  24 -----
 portal-ui/src/screens/Console/Trace/Trace.tsx |  23 ----
 .../src/screens/Console/Users/AddUser.tsx     |   6 --
 .../screens/Console/Users/BulkAddToGroup.tsx  |   6 --
 .../Console/Users/ChangeUserGroups.tsx        |   6 --
 .../src/screens/Console/Users/ListUsers.tsx   |  30 ------
 .../src/screens/Console/Users/UserDetails.tsx |  61 -----------
 .../src/screens/LoginPage/LoginCallback.tsx   |  64 -----------
 portal-ui/src/screens/LoginPage/LoginPage.tsx |  31 +-----
 portal-ui/src/screens/NotFoundPage.tsx        |  17 +--
 110 files changed, 100 insertions(+), 2079 deletions(-)
 create mode 100644 portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx

diff --git a/portal-ui/src/common/HelpBox.tsx b/portal-ui/src/common/HelpBox.tsx
index bffd8af1a..9ac063f2b 100644
--- a/portal-ui/src/common/HelpBox.tsx
+++ b/portal-ui/src/common/HelpBox.tsx
@@ -44,9 +44,6 @@ const styles = (theme: Theme) =>
         marginRight: ".8rem",
       },
     },
-    iconSize: {
-      fontSize: 64,
-    },
     helpText: {
       fontSize: 16,
     },
diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
index 872836bf6..1fbc6277f 100644
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -54,42 +54,6 @@ const CredentialsPrompt = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: "480px",
-      minWidth: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    imageIcon: {
-      height: "100%",
-    },
-    iconRoot: {
-      textAlign: "center",
-    },
     ...actionsTray,
     ...searchField,
     searchField: {
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index fa6edb2f4..169156e69 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -56,48 +56,6 @@ const EditAccessRuleModal = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    fileName: {
-      display: "flex",
-      alignItems: "center",
-    },
-    fileNameText: {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    buttonsContainer: {
-      "& .MuiButtonBase-root": {
-        marginLeft: 10,
-      },
-    },
-    browsePaper: {
-      height: "calc(100vh - 280px)",
-    },
     "@global": {
       ".rowLine:hover  .iconFileElm": {
         backgroundImage: "url(/images/ob_file_filled.svg)",
@@ -110,12 +68,6 @@ const styles = (theme: Theme) =>
       marginLeft: "10px",
       align: "right",
     },
-    badgeOverlap: {
-      "& .MuiBadge-badge": {
-        top: 35,
-        right: 10,
-      },
-    },
     ...actionsTray,
     ...searchField,
     ...objectBrowserCommon,
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
index d7db54c72..4e856383e 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -47,10 +47,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
@@ -121,12 +117,7 @@ const AddAccessRule = ({
             />
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
-            <button
-              type="button"
-              color="primary"
-              className={classes.clearButton}
-              onClick={resetForm}
-            >
+            <button type="button" color="primary" onClick={resetForm}>
               Clear
             </button>
             <Button
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
index dbb5a1718..d3019dece 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -25,8 +25,8 @@ import Grid from "@mui/material/Grid";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import {
-  ITierResponse,
   ITierElement,
+  ITierResponse,
 } from "../../Configurations/TiersConfiguration/types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -53,14 +53,6 @@ interface ITiersDropDown {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
index 07eff116e..009e4fbed 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -44,14 +44,6 @@ interface IReplicationModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index f0a7d3a45..ef3063f93 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -24,7 +24,6 @@ import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import { BucketInfo } from "../types";
 import {
-  actionsTray,
   buttonsStyles,
   containerForHeader,
   hrClass,
@@ -84,116 +83,16 @@ const BucketLifecyclePanel = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
     pageContainer: {
       border: "1px solid #EAEAEA",
       height: "100%",
     },
     ...pageContentStyles,
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    noRecords: {
-      lineHeight: "24px",
-      textAlign: "center",
-      padding: "20px",
-    },
-    gridWrapper: {
-      width: 320,
-    },
-    gridContainer: {
-      display: "grid",
-      gridTemplateColumns: "auto auto",
-      gridGap: 8,
-      justifyContent: "flex-start",
-      alignItems: "center",
-      "& div:not(.MuiCircularProgress-root)": {
-        display: "flex",
-        alignItems: "center",
-      },
-      "& div:nth-child(odd)": {
-        justifyContent: "flex-end",
-        fontWeight: 700,
-      },
-      "& div:nth-child(2n)": {
-        minWidth: 150,
-      },
-    },
-    masterActions: {
-      width: "25%",
-      minWidth: "120px",
-      "& div": {
-        margin: "5px 0px",
-      },
-    },
-
-    headerContainer: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
-    capitalizeFirst: {
-      textTransform: "capitalize",
-      "& .min-icon": {
-        width: 16,
-        height: 16,
-      },
-    },
-    doubleElement: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
-    encCheckbox: {
-      margin: 0,
-      padding: 0,
-    },
-    tabPan: {
-      marginTop: "5px",
-    },
-    fixedHeight: {
-      height: 165,
-      minWidth: 247,
-      padding: "25px 28px",
-      "& svg": {
-        maxHeight: 18,
-      },
-    },
-    routerContainer: {
-      marginTop: 5,
-    },
-    titleCol: {
-      fontWeight: "bold",
-    },
-
     breadcrumLink: {
       textDecoration: "none",
       color: "black",
     },
     ...searchField,
-    ...actionsTray,
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "15px 0 0",
-    },
     capitalize: {
       textTransform: "capitalize",
     },
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
index f3d35c042..17692384d 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
@@ -59,6 +59,7 @@ import SecureComponent, {
 } from "../../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
+
 const AddBucketTagModal = withSuspense(
   React.lazy(() => import("./AddBucketTagModal"))
 );
@@ -110,12 +111,6 @@ const styles = (theme: Theme) =>
     reportedUsage: {
       padding: "15px",
     },
-    dualCardLeft: {
-      paddingRight: "5px",
-    },
-    dualCardRight: {
-      paddingLeft: "5px",
-    },
     capitalizeFirst: {
       textTransform: "capitalize",
       "& .min-icon": {
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
index eeaf8b739..354b756f1 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
@@ -42,13 +42,6 @@ interface IDeleteAccessRule {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
index abde79f58..9dfaefed2 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
@@ -40,13 +40,6 @@ interface IDeleteBucketTagModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
index afe3e4702..26d883ddc 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
@@ -48,10 +48,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
index 650953d22..ded7f340f 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
@@ -33,12 +33,6 @@ import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/Q
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
index 5f2277eae..f102239d6 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
@@ -32,14 +32,6 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
index 7203ac2ab..4394fba41 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -35,22 +35,9 @@ import api from "../../../../common/api";
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 3001c7c87..4e4e34cd9 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -61,20 +61,6 @@ const styles = (theme: Theme) =>
         marginLeft: 8,
       },
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    quotaSizeContainer: {
-      flexGrow: 1,
-    },
-    sizeFactorContainer: {
-      flexGrow: 0,
-      maxWidth: 80,
-      marginLeft: 8,
-      alignSelf: "flex-start" as const,
-    },
     error: {
       color: "#b53b4b",
       border: "1px solid #b53b4b",
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
index 4dee39d0b..f8e532d33 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
@@ -84,9 +84,6 @@ const styles = (theme: Theme) =>
         position: "absolute",
       },
     },
-    buttonTray: {
-      textAlign: "right",
-    },
     viewButton: {
       width: 111,
       color: "white",
@@ -109,11 +106,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    divider: {
-      backgroundColor: theme.palette.grey["200"],
-      marginTop: 10,
-      marginBottom: 4,
-    },
     metric: {
       "& .min-icon": {
         color: "#000000",
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
index 7bef13dcd..cdbdc0261 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
@@ -51,17 +51,6 @@ interface IBulkReplicationModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
     remoteBucketList: {
       display: "grid",
       gridTemplateColumns: "auto auto 45px",
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index b49a2deaf..179f755b9 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -25,10 +25,7 @@ import { Bucket, BucketList } from "../types";
 import { AddIcon, BucketsIcon } from "../../../../icons";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
-import {
-  containerForHeader,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import DeleteBucket from "./DeleteBucket";
@@ -52,44 +49,6 @@ import SearchBox from "../../Common/SearchBox";
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    buttonTray: {
-      textAlign: "right",
-      "& .MuiButton-root": {
-        fontSize: 12,
-        borderColor: theme.palette.grey["300"],
-        color: theme.palette.grey["300"],
-        textTransform: "capitalize",
-        marginLeft: 8,
-      },
-      "& .MuiButton-contained": {
-        color: "white",
-      },
-    },
     bulkSelect: {
       marginLeft: 8,
       "&:hover": {
@@ -99,49 +58,14 @@ const styles = (theme: Theme) =>
         backgroundColor: theme.palette.primary.main,
       },
     },
-    theaderSearchLabel: {
-      color: theme.palette.grey["400"],
-      fontSize: 14,
-      fontWeight: "bold",
-    },
     addBucket: {
       marginLeft: 8,
     },
-    theaderSearch: {
-      borderColor: theme.palette.grey["200"],
-      "& .MuiInputBase-input": {
-        paddingTop: 10,
-        paddingBottom: 10,
-      },
-      "& .MuiInputBase-root": {
-        "& .MuiInputAdornment-root": {
-          "& .min-icon": {
-            color: theme.palette.grey["400"],
-            height: 14,
-          },
-        },
-      },
-      actionHeaderItems: {
-        "@media (min-width: 320px)": {
-          marginTop: 8,
-        },
-      },
-      marginRight: 10,
-      marginLeft: 10,
-    },
     bucketList: {
       marginTop: 25,
     },
 
     ...containerForHeader(theme.spacing(4)),
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      minWidth: 380,
-      "@media (max-width: 900px)": {
-        minWidth: 220,
-      },
-    },
   });
 
 interface IListBucketsProps {
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx
new file mode 100644
index 000000000..1c1cb1c85
--- /dev/null
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { Theme } from "@mui/material/styles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    fileName: {
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 16,
+        height: 16,
+        marginRight: 4,
+      },
+    },
+    fileNameText: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+  });
+
+const IconWithLabel = (props: {
+  classes: any;
+  icon: JSX.Element;
+  strings: string[];
+}) => {
+  return (
+    <div className={props.classes.fileName}>
+      {props.icon}
+      <span className={props.classes.fileNameText}>
+        {props.strings[props.strings.length - 1]}
+      </span>
+    </div>
+  );
+};
+
+export default withStyles(styles)(IconWithLabel);
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index 3fd824adf..f004093a6 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -79,7 +79,7 @@ import SearchBox from "../../../../Common/SearchBox";
 
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
-import { UploadFolderIcon, DownloadIcon } from "../../../../../../icons";
+import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
 
 const AddFolderIcon = React.lazy(
   () => import("../../../../../../icons/AddFolderIcon")
@@ -115,71 +115,8 @@ const PreviewFileModal = withSuspense(
   React.lazy(() => import("../Preview/PreviewFileModal"))
 );
 
-const commonIcon = {
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "center center",
-  width: 16,
-  minWidth: 16,
-  height: 40,
-  marginRight: 10,
-};
-
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    fileName: {
-      display: "flex",
-      alignItems: "center",
-      "& .min-icon": {
-        width: 16,
-        height: 16,
-        marginRight: 4,
-      },
-    },
-    fileNameText: {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    iconFolder: {
-      backgroundImage: "url(/images/object-browser-folder-icn.svg)",
-      backgroundSize: "auto",
-      ...commonIcon,
-    },
-    iconFile: {
-      backgroundImage: "url(/images/object-browser-icn.svg)",
-      backgroundSize: "auto",
-      ...commonIcon,
-    },
-    buttonsContainer: {
-      "& .MuiButtonBase-root": {
-        marginLeft: 10,
-      },
-    },
     browsePaper: {
       height: "calc(100vh - 280px)",
     },
@@ -191,19 +128,14 @@ const styles = (theme: Theme) =>
         backgroundImage: "url(/images/ob_folder_filled.svg)",
       },
     },
-    listButton: {
-      marginLeft: "10px",
-    },
+
     badgeOverlap: {
       "& .MuiBadge-badge": {
         top: 35,
         right: 10,
       },
     },
-    screenTitle: {
-      borderBottom: 0,
-      paddingTop: 0,
-    },
+
     ...tableStyles,
     ...actionsTray,
     ...searchField,
@@ -917,7 +849,7 @@ const ListObjects = ({
   };
 
   const renderName = (element: string) => {
-    return displayName(element, classes);
+    return displayName(element);
   };
 
   const listModeColumns = [
@@ -1079,7 +1011,6 @@ const ListObjects = ({
       <PageLayout>
         <Grid item xs={12}>
           <ScreenTitle
-            classes={classes}
             icon={
               <Fragment>
                 <FolderIcon width={40} />
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx
index 95838c2b1..399c3e732 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx
@@ -18,6 +18,7 @@ import React from "react";
 
 import ObjectBrowserIcon from "../../../../../../icons/ObjectBrowserIcon";
 import ObjectBrowserFolderIcon from "../../../../../../icons/ObjectBrowserFolderIcon";
+import IconWithLabel from "./IconWithLabel";
 
 const FileBookIcon = React.lazy(
   () => import("../../../../../../icons/FileBookIcon")
@@ -65,7 +66,7 @@ const FileZipIcon = React.lazy(
   () => import("../../../../../../icons/FileZipIcon")
 );
 
-export const displayName = (element: string, classes: any) => {
+export const displayName = (element: string) => {
   let elementString = element;
   let icon = <ObjectBrowserIcon />;
   // Element is a folder
@@ -152,12 +153,5 @@ export const displayName = (element: string, classes: any) => {
 
   const splitItem = elementString.split("/");
 
-  return (
-    <div className={classes.fileName}>
-      {icon}
-      <span className={classes.fileNameText}>
-        {splitItem[splitItem.length - 1]}
-      </span>
-    </div>
-  );
+  return <IconWithLabel icon={icon} strings={splitItem} />;
 };
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx
index 975b8ddf5..12b2ee31d 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx
@@ -41,16 +41,7 @@ interface IDeleteTagModal {
   classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
-  });
+const styles = (theme: Theme) => createStyles({});
 
 const DeleteTagModal = ({
   deleteOpen,
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
index 2c8fdaa2e..fd2206089 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -102,67 +102,12 @@ const ObjectBrowserIcon = React.lazy(
 
 const styles = (theme: Theme) =>
   createStyles({
-    currentItemContainer: {
-      marginBottom: 8,
-    },
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      height: "100%",
-    },
-    objectPathContainer: {
-      marginBottom: 26,
-      fontSize: 10,
-    },
-    objectPathLink: {
-      "&:visited": {
-        color: "#000",
-      },
-    },
-    currentItem: {
-      fontSize: 24,
-    },
-    propertiesContainer: {
-      display: "flex",
-      flexDirection: "row",
-      marginBottom: 15,
-    },
-    propertiesItem: {
-      display: "flex",
-      flexDirection: "row",
-      marginRight: 21,
-    },
-    propertiesItemBold: {
-      fontWeight: 700,
-    },
-    propertiesValue: {
-      marginLeft: 8,
-      textTransform: "capitalize",
-    },
     propertiesIcon: {
       marginLeft: 5,
       "& .min-icon": {
         height: 12,
       },
     },
-    actionsIconContainer: {
-      marginLeft: 12,
-    },
-    actionsIcon: {
-      height: 16,
-      width: 16,
-      "& .min-icon": {
-        height: 16,
-      },
-    },
-    tagsContainer: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      marginBottom: 15,
-    },
-    tagText: {
-      marginRight: 13,
-    },
     tag: {
       marginRight: 6,
       fontSize: 10,
@@ -181,23 +126,6 @@ const styles = (theme: Theme) =>
         marginRight: 0,
       },
     },
-    paperContainer: {
-      padding: 15,
-      paddingLeft: 50,
-      display: "flex",
-    },
-    elementTitle: {
-      fontWeight: 500,
-      color: "#777777",
-      fontSize: 14,
-      marginTop: -9,
-    },
-    dualCardLeft: {
-      paddingRight: "5px",
-    },
-    dualCardRight: {
-      paddingLeft: "5px",
-    },
     capitalizeFirst: {
       textTransform: "capitalize",
       "& .min-icon": {
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx
index 95cf77c84..1e76a9395 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx
@@ -45,13 +45,6 @@ interface IRestoreFileVersion {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
index b07e9a6c6..14f9d16fb 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
@@ -21,6 +21,7 @@ import { Grid, LinearProgress } from "@mui/material";
 import { BucketObject } from "../ListObjects/types";
 import { extensionPreview } from "../utils";
 import { encodeFileName } from "../../../../../../common/utils";
+import clsx from "clsx";
 
 const styles = () =>
   createStyles({
@@ -129,7 +130,11 @@ const PreviewFile = ({
       {objectType !== "video" &&
         objectType !== "audio" &&
         objectType !== "image" && (
-          <div className={`${loading ? classes.iframeHidden : ""} iframeBase`}>
+          <div
+            className={clsx(classes.iframeBase, {
+              [classes.iframeHidden]: loading,
+            })}
+          >
             <iframe
               src={path}
               title="File Preview"
@@ -146,5 +151,4 @@ const PreviewFile = ({
     </Fragment>
   );
 };
-
 export default withStyles(styles)(PreviewFile);
diff --git a/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx b/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx
index afeb5794c..8b86457dc 100644
--- a/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx
+++ b/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx
@@ -15,53 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
 import BoxIconButton from "../BoxIconButton/BoxIconButton";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      padding: 8,
-      marginLeft: 8,
-      borderWidth: 1,
-      borderColor: "#696969",
-      color: "#696969",
-      borderStyle: "solid",
-      borderRadius: 3,
-      "& .min-icon": {
-        width: 20,
-      },
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.main,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:disabled": {
-        color: "#EBEBEB",
-        borderColor: "#EBEBEB",
-      },
-    },
-    contained: {
-      borderColor: theme.palette.primary.main,
-      background: theme.palette.primary.main,
-      color: "white",
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.dark,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:hover": {
-        backgroundColor: theme.palette.primary.light,
-        color: "#FFF",
-      },
-    },
-  });
-
 interface IBoxButton extends ButtonProps {
-  classes: any;
   label?: string;
 }
 
@@ -83,4 +40,4 @@ const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
   );
 };
 
-export default withStyles(styles)(BoxButton);
+export default BoxButton;
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
index af726f70c..a144ea304 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
@@ -14,12 +14,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, {
-  useState,
-  useEffect,
-  createRef,
-  useLayoutEffect,
   ChangeEvent,
+  createRef,
+  useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
 } from "react";
 import get from "lodash/get";
 import debounce from "lodash/debounce";
@@ -56,9 +56,6 @@ const styles = (theme: Theme) =>
       position: "relative",
       marginTop: 15,
     },
-    labelContainer: {
-      display: "flex",
-    },
   });
 
 const CSVMultiSelector = ({
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
index 5b9c4c7fe..5b25d7251 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
@@ -49,13 +49,6 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
       position: "relative",
     },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
     cssOutlinedInput: {
       borderColor: "#EAEAEA",
       padding: 16,
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
index 447366484..162f9d09d 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
@@ -109,10 +109,6 @@ const styles = (theme: Theme) =>
     textBoxContainer: {
       flexGrow: 1,
     },
-    textBoxWithIcon: {
-      position: "relative",
-      paddingRight: 25,
-    },
     openListIcon: {
       color: "#9D9E9D",
       width: 8,
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
index 803f14725..c69996112 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import InputLabel from "@mui/material/InputLabel";
 import moment from "moment/moment";
@@ -36,11 +36,6 @@ interface IDaysSelector {
 
 const styles = (theme: Theme) =>
   createStyles({
-    dateInput: {
-      "&:not(:last-child)": {
-        marginRight: 22,
-      },
-    },
     ...fieldBasic,
     ...tooltipHelper,
     labelContainer: {
@@ -56,10 +51,6 @@ const styles = (theme: Theme) =>
       marginTop: 11,
       marginBottom: 6,
     },
-    fieldContainerBorder: {
-      borderBottom: "#9c9c9c 1px solid",
-      marginBottom: 20,
-    },
     dateContainer: {
       height: 20,
       textAlign: "right",
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
index b2b215b0f..53aef9982 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -55,23 +55,6 @@ const styles = (theme: Theme) =>
       flexWrap: "nowrap",
       height: componentHeight,
     },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
-    errorText: {
-      margin: "0",
-      fontSize: "0.75rem",
-      marginTop: 3,
-      textAlign: "left",
-      fontFamily: "Lato,sans-serif",
-      fontWeight: 400,
-      lineHeight: "1.66",
-      color: "#dc1f2e",
-    },
     valueString: {
       maxWidth: 350,
       whiteSpace: "nowrap",
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx
index d31f8d5e0..8daee48f5 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx
@@ -62,9 +62,6 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
     },
-    toggleButton: {
-      marginRight: 10,
-    },
     fieldContainer: {
       flexGrow: 1,
       margin: "0 15px",
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
index 8210ddf4b..13820786b 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -42,66 +42,6 @@ interface IFormSwitch {
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-      paddingTop: 15,
-      boxShadow: "none",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    noFound: {
-      textAlign: "center",
-      padding: "10px 0",
-    },
-    tableContainer: {
-      maxHeight: 200,
-    },
-    stickyHeader: {
-      backgroundColor: "#fff",
-    },
-    actionsTitle: {
-      fontWeight: 600,
-      color: "#081C42",
-      fontSize: 16,
-      alignSelf: "center",
-    },
-    tableBlock: {
-      marginTop: 15,
-    },
-    filterField: {
-      width: 375,
-      fontWeight: 600,
-      "& .input": {
-        "&::placeholder": {
-          fontWeight: 600,
-          color: "#081C42",
-        },
-      },
-    },
     divContainer: {
       marginBottom: 20,
     },
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
index 5c0067177..8088d1be8 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
@@ -68,17 +68,6 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
       position: "relative",
     },
-    textBoxWithIcon: {
-      position: "relative",
-      paddingRight: 25,
-    },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
     overlayAction: {
       position: "absolute",
       right: 5,
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx b/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx
index b2c6374a6..62a443ba3 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx
@@ -30,7 +30,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useState, useEffect, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import get from "lodash/get";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
@@ -40,9 +40,11 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { AppState } from "../../../../../store";
-import { setErrorSnackMessage } from "../../../../../actions";
+import {
+  setErrorSnackMessage,
+  setModalErrorSnackMessage,
+} from "../../../../../actions";
 import { snackBarMessage } from "../../../../../types";
-import { setModalErrorSnackMessage } from "../../../../../actions";
 
 interface ImodalErrorProps {
   customStyle?: any;
@@ -98,12 +100,6 @@ const styles = (theme: Theme) =>
         height: 32,
       },
     },
-    simpleError: {
-      marginTop: 5,
-      padding: "2px 5px",
-      fontSize: 16,
-      color: "#000",
-    },
     detailsButton: {
       color: "#9C9C9C",
       display: "flex",
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
index 9c86f2dec..6849c917a 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
@@ -14,12 +14,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, {
-  useState,
-  useEffect,
-  createRef,
-  useLayoutEffect,
   ChangeEvent,
+  createRef,
+  useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
 } from "react";
 import get from "lodash/get";
 import debounce from "lodash/debounce";
@@ -57,9 +57,6 @@ const styles = (theme: Theme) =>
       position: "relative",
       marginTop: 15,
     },
-    labelContainer: {
-      display: "flex",
-    },
     lineInputBoxes: {
       display: "flex",
     },
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
index ef60b3eac..8e9e53835 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
@@ -49,7 +49,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
-    radioBoxContainer: {},
     optionLabel: {
       "&.Mui-disabled": {
         "& .MuiFormControlLabel-label": {
diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
index c8e6268f9..eb22ffefe 100644
--- a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
+++ b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -26,12 +26,6 @@ import ListItemText from "@mui/material/ListItemText";
 
 const styles = (theme: Theme) =>
   createStyles({
-    wizardMain: {
-      display: "flex",
-      width: "100%",
-      height: "100%",
-      flexGrow: 1,
-    },
     wizFromContainer: {},
     wizFromModal: {
       position: "relative",
diff --git a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx b/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
index 11946fed8..8d8d9f7bb 100644
--- a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
+++ b/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
@@ -7,9 +7,6 @@ import { pageContentStyles } from "../FormComponents/common/styleLibrary";
 
 const styles = (theme: Theme) =>
   createStyles({
-    pageContainer: {
-      width: "100%",
-    },
     ...pageContentStyles,
   });
 
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
index ad5c7d78e..17c456d14 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
@@ -67,14 +67,6 @@ const styles = (theme: Theme) =>
         backgroundColor: "initial",
       },
     },
-    modalCloseIcon: {
-      fontSize: 35,
-      color: "#9C9C9C",
-      fontWeight: 300,
-      "&:hover": {
-        color: "#9C9C9C",
-      },
-    },
     closeIcon: {
       "&::before": {
         ...baseCloseLine,
diff --git a/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx b/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx
index 7b9d73c78..7549e6381 100644
--- a/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx
@@ -15,9 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import makeStyles from "@mui/styles/makeStyles";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -27,29 +24,8 @@ interface ITabSelector {
   selectedTab: number;
   onChange: (newValue: number) => void;
   tabOptions: ITabOption[];
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
-    generalStatusCards: {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
-    generalStatusTitle: {
-      color: "#767676",
-      fontSize: 16,
-      fontWeight: "bold",
-      margin: "15px 10px 0 10px",
-    },
-  });
-
 const tabSubStyles = makeStyles({
   root: {
     backgroundColor: "transparent",
@@ -78,12 +54,7 @@ const tabSubStyles = makeStyles({
   },
 });
 
-const TabSelector = ({
-  selectedTab,
-  onChange,
-  tabOptions,
-  classes,
-}: ITabSelector) => {
+const TabSelector = ({ selectedTab, onChange, tabOptions }: ITabSelector) => {
   const subStyles = tabSubStyles();
 
   return (
@@ -134,4 +105,4 @@ const TabSelector = ({
   );
 };
 
-export default withStyles(styles)(TabSelector);
+export default TabSelector;
diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
index b5d67ef4e..b2456ba75 100644
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
@@ -108,23 +108,8 @@ interface TableWrapperProps {
 
 const borderColor = "#9c9c9c80";
 
-const rowText = {
-  fontWeight: 400,
-  fontSize: 14,
-  borderColor: borderColor,
-  borderWidth: "0.5px",
-  height: 40,
-  transitionDuration: "0.3s",
-  padding: "initial",
-  paddingRight: 6,
-  paddingLeft: 6,
-};
-
 const styles = () =>
   createStyles({
-    dialogContainer: {
-      padding: "12px 26px 22px",
-    },
     paper: {
       display: "flex",
       overflow: "auto",
@@ -152,60 +137,6 @@ const styles = () =>
     defaultPaperHeight: {
       height: "calc(100vh - 205px)",
     },
-    allTableSettings: {
-      "& .MuiTableCell-sizeSmall:last-child": {
-        paddingRight: "initial",
-      },
-      "& .MuiTableCell-body.MuiTableCell-sizeSmall:last-child": {
-        paddingRight: 6,
-      },
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: 700,
-          fontSize: 14,
-          borderColor: "#39393980",
-          borderWidth: "0.5px",
-          padding: "6px 0 10px",
-        },
-      },
-    },
-    rowUnselected: {
-      ...rowText,
-      color: "#393939",
-    },
-    rowSelected: {
-      ...rowText,
-      color: "#081C42",
-      fontWeight: 600,
-    },
-    paginatorContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      padding: "5px 38px",
-    },
-    checkBoxHeader: {
-      width: 50,
-      textAlign: "left",
-      paddingRight: 10,
-      "&.MuiTableCell-paddingCheckbox": {
-        paddingBottom: 4,
-        paddingLeft: 0,
-      },
-    },
-    actionsContainer: {
-      width: 150,
-      borderColor: borderColor,
-    },
-    paginatorComponent: {
-      borderBottom: 0,
-    },
-    checkBoxRow: {
-      borderColor: borderColor,
-      padding: "0 10px 0 0",
-    },
     loadingBox: {
       paddingTop: "100px",
       paddingBottom: "100px",
diff --git a/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx b/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
index 1d33b6eb2..3d7f5727a 100644
--- a/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
@@ -20,9 +20,6 @@ interface IProgressBar {
 
 const styles = (theme: Theme) =>
   createStyles({
-    paperContainer: {
-      padding: 15,
-    },
     allValue: {
       fontSize: 16,
       fontWeight: 700,
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx
index f9efeda28..c73110549 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx
@@ -16,54 +16,16 @@
 
 import React from "react";
 import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { configurationElements } from "../utils";
 import EditConfiguration from "../../NotificationEndpoints/CustomForms/EditConfiguration";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  settingsCommon,
-} from "../../Common/FormComponents/common/styleLibrary";
 
-interface IListConfiguration {
-  classes: any;
+interface IConfigurationForm {
   match: any;
   history: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...searchField,
-    ...actionsTray,
-    ...settingsCommon,
-    ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 324px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
-    mainCont: {
-      ...settingsCommon.mainCont,
-      maxWidth: 1180,
-    },
-  });
-
-const ConfigurationsList = ({ match, history }: IListConfiguration) => {
+const ConfigurationsList = ({ match, history }: IConfigurationForm) => {
   const activeConfRoute = get(match, "url", "");
 
   const configName = activeConfRoute.substring(
@@ -87,4 +49,4 @@ const ConfigurationsList = ({ match, history }: IListConfiguration) => {
   );
 };
 
-export default withStyles(styles)(ConfigurationsList);
+export default ConfigurationsList;
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
index fb7464e82..d31263508 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
@@ -37,6 +37,7 @@ import get from "lodash/get";
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 
 import withSuspense from "../../Common/Components/withSuspense";
+
 const ConfigurationForm = withSuspense(
   React.lazy(() => import("./ConfigurationForm"))
 );
@@ -48,22 +49,6 @@ interface IConfigurationOptions {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 324px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
     settingsOptionsContainer: {
       display: "flex" as const,
       flexDirection: "row" as const,
@@ -73,14 +58,6 @@ const styles = (theme: Theme) =>
       borderRadius: 2,
       backgroundColor: "#fff",
     },
-    configurationLink: {
-      border: "#E5E5E5 1px solid",
-      borderRadius: 2,
-      padding: 20,
-      width: 190,
-      height: 80,
-      margin: 15,
-    },
     ...searchField,
     ...actionsTray,
     ...containerForHeader(theme.spacing(4)),
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
index 81759c7b8..e33155f1d 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useEffect, useState, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
@@ -49,23 +49,6 @@ const styles = (theme: Theme) =>
     ...modalBasic,
     ...settingsCommon,
     ...formFieldStyles,
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
-    settingsFormContainer: {
-      ...settingsCommon.settingsFormContainer,
-      height: "calc(100vh - 422px)",
-    },
     lambdaNotif: {
       background:
         "linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
@@ -99,14 +82,6 @@ const styles = (theme: Theme) =>
       fontFamily: "Lato,sans-serif",
       paddingLeft: 18,
     },
-    mainCont: {
-      maxWidth: 1180,
-      paddingLeft: 38,
-      paddingRight: 38,
-    },
-    backTo: {
-      margin: "20px 0px 0",
-    },
     formBox: {
       border: "1px solid #EAEAEA",
       padding: 15,
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
index cb21e79d7..e223ad07a 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -20,7 +20,6 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import {
-  actionsTray,
   containerForHeader,
   searchField,
   settingsCommon,
@@ -38,46 +37,10 @@ interface ITypeTiersConfig {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...actionsTray,
     ...searchField,
     ...settingsCommon,
     ...typesSelection,
     ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 410px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
-    lambdaContainer: {
-      padding: "15px 0",
-    },
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "0 38px",
-    },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
-    mainCont: {
-      ...settingsCommon.mainCont,
-      maxWidth: 1180,
-    },
-    link: {
-      textDecoration: "none",
-      color: theme.palette.primary.main,
-    },
   });
 
 const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
index e08205c7a..494ce14ab 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -44,14 +44,6 @@ interface ITierCredentialsModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx
index bc005078d..c749d5bec 100644
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -90,8 +90,6 @@ const ObjectManager = React.lazy(
   () => import("./Common/ObjectManager/ObjectManager")
 );
 
-const drawerWidth = 245;
-
 const Buckets = React.lazy(() => import("./Buckets/Buckets"));
 const Policies = React.lazy(() => import("./Policies/Policies"));
 const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
@@ -110,11 +108,6 @@ const ConfigurationOptions = React.lazy(
 
 const styles = (theme: Theme) =>
   createStyles({
-    "@global": {
-      body: {
-        backgroundColor: "#FFFFFF",
-      },
-    },
     root: {
       display: "flex",
       "& .MuiPaper-root.MuiSnackbarContent-root": {
@@ -122,87 +115,12 @@ const styles = (theme: Theme) =>
         boxShadow: "none",
       },
     },
-    toolbar: {
-      background: theme.palette.background.default,
-      color: "black",
-      paddingRight: 24, // keep right padding when drawer closed
-    },
-    toolbarIcon: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: "0 8px",
-      ...theme.mixins.toolbar,
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    menuButtonHidden: {
-      display: "none",
-    },
-    title: {
-      flexGrow: 1,
-    },
-    drawerPaper: {
-      position: "relative",
-      whiteSpace: "nowrap",
-      width: drawerWidth,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      overflowX: "hidden",
-      background:
-        "transparent linear-gradient(90deg, #073052 0%, #081C42 100%) 0% 0% no-repeat padding-box",
-      boxShadow: "0px 3px 7px #00000014",
-    },
-    drawerPaperClose: {
-      overflowX: "hidden",
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      width: theme.spacing(7),
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(9),
-      },
-    },
     content: {
       flexGrow: 1,
       height: "100vh",
       overflow: "auto",
       position: "relative",
     },
-    container: {
-      paddingBottom: theme.spacing(4),
-      margin: 0,
-      width: "100%",
-      maxWidth: "initial",
-    },
-    paper: {
-      padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    fixedHeight: {
-      minHeight: 240,
-    },
     warningBar: {
       background: theme.palette.primary.main,
       color: "white",
diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
index 7e4761f24..b501b54a9 100644
--- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
@@ -33,16 +33,6 @@ import HelpBox from "../../../../common/HelpBox";
 
 const styles = (theme: Theme) =>
   createStyles({
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
-    generalStatusCards: {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
     generalStatusTitle: {
       color: "#767676",
       fontSize: 16,
diff --git a/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx b/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx
index 646197579..f9b587562 100644
--- a/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx
@@ -48,11 +48,6 @@ const styles = (theme: Theme) =>
         borderRadius: 10,
       },
     },
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
     metricText: {
       fontSize: 70,
       lineHeight: 1.1,
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
index 45f6e3d4b..ce6fd79e4 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -53,15 +53,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...widgetContainerCommon,
-    syncButton: {
-      "&.MuiButton-root .MuiButton-iconSizeMedium > *:first-of-type": {
-        fontSize: 18,
-      },
-    },
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "0 10px",
-    },
     dashboardRow: {
       display: "flex",
       flexDirection: "row",
@@ -69,14 +60,6 @@ const styles = (theme: Theme) =>
       flexWrap: "wrap",
       maxWidth: 1180,
     },
-    schedulerIcon: {
-      opacity: 0.4,
-      fontSize: 10,
-      "& svg": {
-        width: 18,
-        height: 18,
-      },
-    },
   });
 
 const PrDashboard = ({
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
index 81e970f9f..cfa032443 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
@@ -161,9 +161,7 @@ const SingleRepWidget = ({
                 fontSize={65}
                 fill={"#07193E"}
               >
-                {result
-                  ? repNumber
-                  : ""}
+                {result ? repNumber : ""}
               </text>
             </AreaChart>
           </ResponsiveContainer>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx
index 4c2772c99..fbfc665f4 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx
@@ -41,13 +41,6 @@ interface ISingleValueWidget {
 const styles = (theme: Theme) =>
   createStyles({
     ...widgetCommon,
-    contentContainer: {
-      ...widgetCommon.contentContainer,
-      fontWeight: 700,
-      color: "#072045",
-      fontSize: 18,
-      textAlign: "center" as const,
-    },
     loadingAlign: {
       width: "100%",
       textAlign: "center",
diff --git a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
index 5ba5fed8b..aa3eea195 100644
--- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
@@ -60,34 +60,9 @@ interface IDirectCSIMain {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     tableWrapper: {
       height: "calc(100vh - 275px)",
     },
-    notAvailableNotice: {
-      border: "#EAEDEE 1px solid",
-      backgroundColor: "#FFF",
-      display: "flex",
-      padding: "19px 38px",
-      overflow: "auto",
-      position: "relative",
-      boxShadow: "none",
-      minHeight: 200,
-      overflowY: "scroll",
-      borderRadius: 3,
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "calc(100vh - 275px)",
-      fontSize: 18,
-      fontWeight: 600,
-      textAlign: "center",
-    },
     linkItem: {
       display: "default",
       color: theme.palette.info.main,
diff --git a/portal-ui/src/screens/Console/DirectCSI/DirectCSIMain.tsx b/portal-ui/src/screens/Console/DirectCSI/DirectCSIMain.tsx
index b7afadb4f..999d916b8 100644
--- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIMain.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIMain.tsx
@@ -45,12 +45,6 @@ interface IDirectCSIMain {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     tabsContainer: {
       marginBottom: 15,
     },
diff --git a/portal-ui/src/screens/Console/DirectCSI/DirectCSIVolumes.tsx b/portal-ui/src/screens/Console/DirectCSI/DirectCSIVolumes.tsx
index 4bc52bf2c..1d5432604 100644
--- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIVolumes.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIVolumes.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useState, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -43,16 +43,6 @@ interface IDirectCSIVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "calc(100vh - 267px)",
     },
diff --git a/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx b/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
index 3266e2b11..a3422e47a 100644
--- a/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx
@@ -31,9 +31,6 @@ interface IFormatErrorsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    warningBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index d31c71665..adec78a0c 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -51,12 +51,6 @@ interface MainGroupProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
index f94edd467..00549d0ac 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -33,10 +33,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginTop: "1rem",
     },
-    predefinedTitle: {
-      color: "rgba(0,0,0,.87)",
-      fontWeight: "normal",
-    },
     ...formFieldStyles,
     ...modalBasic,
   });
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index a877b03a9..2de9b0685 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -49,6 +49,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const AddGroup = withSuspense(React.lazy(() => import("../Groups/AddGroup")));
 const SetPolicy = withSuspense(
@@ -63,10 +64,6 @@ interface IGroupsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      width: "100%",
-    },
     tableBlock: {
       ...tableStyles.tableBlock,
       marginTop: 15,
diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
index b14cd8771..b799df4bd 100644
--- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
+++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
@@ -46,9 +46,6 @@ interface IGroupsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
     paper: {
       display: "flex",
       overflow: "auto",
diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx
index 84043772c..912f6cff3 100644
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -56,21 +56,6 @@ import SecureComponent from "../../../common/SecureComponent/SecureComponent";
 
 const styles = (theme: Theme) =>
   createStyles({
-    watchList: {
-      background: "white",
-      maxHeight: "400",
-      overflow: "auto",
-      "& ul": {
-        margin: "4",
-        padding: "0",
-      },
-      "& ul li": {
-        listStyle: "none",
-        margin: "0",
-        padding: "0",
-        borderBottom: "1px solid #dedede",
-      },
-    },
     graphContainer: {
       backgroundColor: "#fff",
       border: "#EAEDEE 1px solid",
@@ -87,9 +72,6 @@ const styles = (theme: Theme) =>
     scanData: {
       fontSize: 13,
     },
-    noMinWidthLabel: {
-      fontWeight: 400,
-    },
     formBox: {
       padding: 15,
       border: "1px solid #EAEAEA",
diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index 1a31b6423..cdc88b819 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -51,16 +51,6 @@ import PageLayout from "../Common/Layout/PageLayout";
 
 const styles = (theme: Theme) =>
   createStyles({
-    logList: {
-      background: "#fff",
-      minHeight: 400,
-      height: "calc(100vh - 270px)",
-      overflow: "auto",
-      fontSize: 13,
-      padding: "25px 45px",
-      border: "1px solid #EAEDEE",
-      borderRadius: 4,
-    },
     loading: {
       paddingTop: 8,
       paddingLeft: 40,
diff --git a/portal-ui/src/screens/Console/License/ActivationModal.tsx b/portal-ui/src/screens/Console/License/ActivationModal.tsx
index 8e8c0eb16..2888226c9 100644
--- a/portal-ui/src/screens/Console/License/ActivationModal.tsx
+++ b/portal-ui/src/screens/Console/License/ActivationModal.tsx
@@ -35,9 +35,6 @@ import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     subnetLicenseKey: {
       padding: "10px 10px 10px 0px",
       borderRight: "1px solid rgba(0, 0, 0, 0.12)",
diff --git a/portal-ui/src/screens/Console/License/License.tsx b/portal-ui/src/screens/Console/License/License.tsx
index f3e309d07..a95f884c7 100644
--- a/portal-ui/src/screens/Console/License/License.tsx
+++ b/portal-ui/src/screens/Console/License/License.tsx
@@ -79,10 +79,6 @@ const styles = (theme: Theme) =>
       color: "#000000",
       fontSize: 14,
     },
-    paper: {
-      padding: "20px 52px 20px 28px",
-      backgroundColor: "#FFFFFF",
-    },
     licenseContainer: {
       display: "flex",
       flexWrap: "wrap",
@@ -131,10 +127,6 @@ const styles = (theme: Theme) =>
     detailsContainerBorder: {
       borderLeft: "1px solid #e2e2e2",
     },
-    detailsContainerBorderHighlighted: {
-      border: "1px solid #B5B5B5",
-      borderBottom: 0,
-    },
     detailsTitle: {
       fontSize: 19,
       fontWeight: 700,
@@ -146,15 +138,6 @@ const styles = (theme: Theme) =>
       backgroundColor: "#4CCB92",
       padding: 4,
     },
-    activePlanHeader: {
-      fontWeight: 700,
-      background: "#D5DDE5",
-      borderRadius: "3px 3px 0px 0px",
-      color: "#121212",
-      padding: 8,
-      borderTop: "1px solid #D5DDE5",
-      marginTop: -2,
-    },
     planHeader: {
       background: "#FFFFFF",
       borderRadius: "3px 3px 0px 0px",
@@ -173,10 +156,6 @@ const styles = (theme: Theme) =>
       marginBottom: 12,
       padding: "0% 15%",
     },
-    detailsCapacityMin: {
-      fontSize: 10,
-    },
-
     itemContainer: {
       height: 36,
       "& .item:last-child": {
@@ -235,11 +214,6 @@ const styles = (theme: Theme) =>
       fontSize: 15,
       fontWeight: 700,
     },
-    licenseButton: {
-      float: "right",
-      marginTop: 25,
-      marginRight: 25,
-    },
     openSourcePolicy: {
       color: "#1C5A8D",
       fontWeight: "bold",
@@ -263,10 +237,6 @@ const styles = (theme: Theme) =>
       cursor: "pointer",
       fontSize: 13,
     },
-    fullWidth: {
-      width: "100%",
-      height: "100%",
-    },
     licenseInfo: {
       position: "relative",
     },
@@ -280,26 +250,11 @@ const styles = (theme: Theme) =>
       fontSize: 14,
       fontWeight: "bold",
     },
-    licenseDescription: {
-      background: "#032F51",
-      padding: "30px 30px",
-      borderTop: "1px solid #e2e5e4",
-      borderLeft: "1px solid #e2e5e4",
-      borderRight: "1px solid #e2e5e4",
-      alignSelf: "flex-end",
-    },
     currentPlanBG: {
       background: "#022A4A 0% 0% no-repeat padding-box",
       color: "#FFFFFF",
       borderTop: "1px solid #52687d",
     },
-    currentPlanButton: {
-      background: "#FFFFFF",
-      color: "#022A4A",
-      "&:hover": {
-        background: "#FFFFFF",
-      },
-    },
     planItemsPadding: {
       border: "1px solid #EAEDEE",
       borderTop: 0,
@@ -321,10 +276,6 @@ const styles = (theme: Theme) =>
     loadingLoginStrategy: {
       textAlign: "center",
     },
-    clickableBlock: {
-      cursor: "pointer",
-    },
-
     ...containerForHeader(theme.spacing(4)),
     mainContainer: {
       border: "1px solid #EAEDEE",
diff --git a/portal-ui/src/screens/Console/License/LicenseModal.tsx b/portal-ui/src/screens/Console/License/LicenseModal.tsx
index 129859cef..93d15bd29 100644
--- a/portal-ui/src/screens/Console/License/LicenseModal.tsx
+++ b/portal-ui/src/screens/Console/License/LicenseModal.tsx
@@ -33,9 +33,6 @@ const styles = (theme: Theme) =>
     pageSubTitle: {
       textAlign: "center",
     },
-    paper: {
-      padding: "20px 52px 20px 28px",
-    },
     ...containerForHeader(theme.spacing(4)),
   });
 
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx
index 7ae207b28..05a88c58e 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx
@@ -37,10 +37,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     objectKeyCol: {
       fontWeight: 700,
       paddingRight: "10px",
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index ed29cb113..21d26b7a8 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -90,16 +90,6 @@ const styles = (theme: Theme) =>
     ...tableStyles,
     ...advancedFilterToggleStyles,
 
-    buttonKit: {
-      "& div": {
-        height: 35,
-      },
-      "& .MuiOutlinedInput-notchedOutline": {
-        border: 0,
-        height: 28,
-        color: "#000000",
-      },
-    },
     searchOptions: {
       display: "flex",
       padding: 15,
@@ -107,16 +97,6 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    selectorLabel: {
-      "& + div": {
-        "@media (max-width: 900px)": {
-          width: 110,
-        },
-      },
-      "@media (max-width: 900px)": {
-        marginLeft: 5,
-      },
-    },
     formBox: {
       border: "1px solid #EAEAEA",
       marginBottom: 15,
@@ -131,7 +111,6 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-start",
     },
-    advancedFilterOptions: {},
     ...logsCommon,
     ...containerForHeader(theme.spacing(4)),
   });
diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
index e74032acd..793f15125 100644
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -101,16 +101,6 @@ const styles = (theme: Theme) =>
         color: "#ffffff",
       },
     },
-    logoSvg: {
-      width: 40,
-    },
-    logoSvgClosed: {
-      width: 0,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
     menuList: {
       "& .active": {
         color: "#fff",
@@ -160,17 +150,6 @@ const styles = (theme: Theme) =>
         marginLeft: 5,
       },
     },
-    groupTitle: {
-      color: "#fff",
-      fontSize: 10,
-      textTransform: "uppercase",
-      fontWeight: 700,
-      marginBottom: 3,
-      cursor: "pointer",
-      userSelect: "none",
-      display: "flex",
-      justifyContent: "space-between",
-    },
     subTitleMenu: {
       fontWeight: 700,
       marginLeft: 10,
@@ -179,44 +158,6 @@ const styles = (theme: Theme) =>
         color: "#fff",
       },
     },
-    selectorArrow: {
-      marginRight: 20,
-      marginTop: 1,
-      display: "inline-block",
-      width: 0,
-      height: 0,
-      borderStyle: "solid",
-      borderWidth: "4px 4px 0 4px",
-      borderColor:
-        "rgba(255, 255, 255, .29) transparent transparent transparent",
-      transform: "rotateZ(0deg)",
-      transitionDuration: "0.2s",
-    },
-    selectorArrowOpen: {
-      transform: "rotateZ(180deg)",
-    },
-    //new
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    hide: {
-      display: "none",
-    },
     drawer: {
       width: drawerWidth,
       flexShrink: 0,
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
index 49b6630d5..4c529829a 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
@@ -21,7 +21,6 @@ import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { IElementValue, KVField } from "../Configurations/types";
 import {
-  fieldBasic,
   formFieldStyles,
   modalBasic,
 } from "../Common/FormComponents/common/styleLibrary";
@@ -43,45 +42,6 @@ const styles = (theme: Theme) =>
     formFieldRow: {
       ...formFieldStyles.formFieldRow,
     },
-    inputBoxContainer: {
-      marginBottom: 7,
-      "& .MuiInputLabel-root": {
-        minWidth: 200,
-        "& svg": {
-          width: 16,
-          height: 16,
-        },
-      },
-    },
-    textBoxContainer: {
-      flexGrow: 1,
-      position: "relative",
-      display: "flex",
-    },
-    overlayAction: {
-      top: 0,
-      right: 0,
-      position: "relative",
-      marginLeft: 10,
-      display: "flex",
-      alignItems: "center",
-      "& button": {
-        background: "#EAEAEA",
-      },
-    },
-    fieldContainer: {
-      "& .MuiInputLabel-root": {
-        minWidth: 200,
-      },
-    },
-    tooltipContainer: {
-      ...fieldBasic.tooltipContainer,
-      "& svg": {
-        width: 16,
-        height: 16,
-      },
-    },
-
     ...modalBasic,
   });
 
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
index 1fa11d413..7cc381e2b 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
@@ -44,23 +44,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...settingsCommon,
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    logoButton: {
-      height: "80px",
-    },
-
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
   });
 
 interface IAddNotificationEndpointProps {
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index 5349e374e..1472fad26 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -61,25 +61,9 @@ const styles = (theme: Theme) =>
     ...searchField,
     ...settingsCommon,
     ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
     twHeight: {
       minHeight: 400,
     },
-    lambdaContainer: {
-      padding: "15px 0",
-    },
-    searchField: {
-      ...searchField.searchField,
-      maxWidth: 380,
-    },
     tableBlock: {
       ...tableStyles.tableBlock,
     },
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationEndpoints.tsx
index 5af10cf81..68874247f 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationEndpoints.tsx
@@ -16,42 +16,14 @@
 
 import React, { Fragment } from "react";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
-
-import { AppState } from "../../../store";
-import { connect } from "react-redux";
-import { ISessionResponse } from "../types";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const ListNotificationEndpoints = withSuspense(
   React.lazy(() => import("./ListNotificationEndpoints"))
 );
 
-interface INotificationEndpoints {
-  classes: any;
-  session: ISessionResponse;
-  distributedSetup: boolean;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    ...containerForHeader(theme.spacing(4)),
-  });
-
-const NotificationEndpoints = ({
-  classes,
-  session,
-  distributedSetup,
-}: INotificationEndpoints) => {
+const NotificationEndpoints = () => {
   return (
     <Fragment>
       <PageHeader label="Notification Endpoints" />
@@ -60,11 +32,4 @@ const NotificationEndpoints = ({
   );
 };
 
-const mapState = (state: AppState) => ({
-  session: state.console.session,
-  distributedSetup: state.system.distributedSetup,
-});
-
-const connector = connect(mapState, {});
-
-export default withStyles(styles)(connector(NotificationEndpoints));
+export default NotificationEndpoints;
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
index 7c5fc7111..7dfabd734 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -38,9 +38,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...settingsCommon,
     ...typesSelection,
-    link: {
-      maxWidth: 300,
-    },
   });
 
 const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
index 22783be54..445b7cdf1 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
@@ -36,10 +36,6 @@ import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMi
 
 const styles = (theme: Theme) =>
   createStyles({
-    jsonPolicyEditor: {
-      minHeight: 400,
-      width: "100%",
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 90af50f9d..817a95549 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -49,38 +49,12 @@ import SecureComponent, {
 import SearchBox from "../Common/SearchBox";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const AddPolicy = withSuspense(React.lazy(() => import("./AddPolicy")));
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: 320,
-      padding: 20,
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    twHeight: {
-      minHeight: 600,
-    },
     ...actionsTray,
     ...searchField,
     searchField: {
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 7fa1d3e42..8859bae58 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -56,6 +56,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
 interface IPolicyDetailsProps {
@@ -74,101 +75,10 @@ const styles = (theme: Theme) =>
       border: "1px solid #EAEAEA",
       height: "100%",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    sizeFactorContainer: {
-      marginLeft: 8,
-    },
-    containerHeader: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
     paperContainer: {
       padding: "15px 15px 15px 50px",
       minHeight: "450px",
     },
-    infoGrid: {
-      display: "grid",
-      gridTemplateColumns: "auto auto auto auto",
-      gridGap: 8,
-      "& div": {
-        display: "flex",
-        alignItems: "center",
-      },
-      "& div:nth-child(odd)": {
-        justifyContent: "flex-end",
-        fontWeight: 700,
-      },
-      "& div:nth-child(2n)": {
-        paddingRight: 35,
-      },
-    },
-    masterActions: {
-      width: "25%",
-      minWidth: "120px",
-      "& div": {
-        margin: "5px 0px",
-      },
-    },
-    updateButton: {
-      backgroundColor: "transparent",
-      border: 0,
-      padding: "0 6px",
-      cursor: "pointer",
-      "&:focus, &:active": {
-        outline: "none",
-      },
-      "& svg": {
-        height: 12,
-      },
-    },
-    noUnderLine: {
-      textDecoration: "none",
-    },
-    poolLabel: {
-      color: "#666666",
-    },
-    licenseContainer: {
-      position: "relative",
-      padding: "20px 52px 0px 28px",
-      background: "#032F51",
-      boxShadow: "0px 3px 7px #00000014",
-      "& h2": {
-        color: "#FFF",
-        marginBottom: 67,
-      },
-      "& a": {
-        textDecoration: "none",
-      },
-      "& h3": {
-        color: "#FFFFFF",
-        marginBottom: "30px",
-        fontWeight: "bold",
-      },
-      "& h6": {
-        color: "#FFFFFF !important",
-      },
-    },
-    licenseInfo: { color: "#FFFFFF", position: "relative" },
-    licenseInfoTitle: {
-      textTransform: "none",
-      color: "#BFBFBF",
-      fontSize: 11,
-    },
-    licenseInfoValue: {
-      textTransform: "none",
-      fontSize: 14,
-      fontWeight: "bold",
-    },
-    verifiedIcon: {
-      width: 96,
-      position: "absolute",
-      right: 0,
-      bottom: 29,
-    },
     breadcrumLink: {
       textDecoration: "none",
       color: "black",
@@ -182,16 +92,6 @@ const styles = (theme: Theme) =>
     labelCol: {
       fontWeight: "bold",
     },
-    statementActions: {
-      textAlign: "right",
-    },
-    addStmt: {
-      color: theme.palette.primary.main,
-    },
-    listBox: {
-      border: "1px solid #DADADA",
-      height: 100,
-    },
     ...actionsTray,
     ...searchField,
     ...modalBasic,
diff --git a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
index cbcb7eab6..335302f1e 100644
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -56,9 +56,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginTop: ".9rem",
     },
-    predefinedTitle: {
-      fontWeight: "normal",
-    },
   });
 
 const SetPolicy = ({
diff --git a/portal-ui/src/screens/Console/Speedtest/STResults.tsx b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
index 557765ff6..216db519a 100644
--- a/portal-ui/src/screens/Console/Speedtest/STResults.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
@@ -45,46 +45,6 @@ interface ISTResults {
 
 const styles = (theme: Theme) =>
   createStyles({
-    statContainer: {
-      padding: "18px 0 18px 25px",
-    },
-    statBlock: {
-      border: "#EEF1F4 1px solid",
-      borderRadius: 4,
-    },
-    testedAmount: {
-      display: "flex",
-      justifyContent: "space-between",
-      color: "#07193E",
-      padding: "12px 18px",
-      border: "#EEF1F4 1px solid",
-      borderLeft: 0,
-      borderRight: 0,
-    },
-    serverLength: {
-      color: "#696969",
-    },
-    serverDescrContainer: {
-      display: "flex",
-      margin: "15px 5px 0",
-      position: "relative",
-    },
-    serverDescrIcon: {
-      marginRight: 10,
-      "& svg": {
-        width: 16,
-      },
-    },
-    serverDescriptor: {
-      color: "#696969",
-      whiteSpace: "nowrap",
-      maxWidth: "100%",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    serversResume: {
-      marginBottom: 15,
-    },
     objectGeneralTitle: {
       fontWeight: "bold",
       color: "#000",
@@ -94,9 +54,6 @@ const styles = (theme: Theme) =>
         width: 14,
       },
     },
-    generalContainer: {
-      padding: 20,
-    },
     generalUnit: {
       color: "#000",
       marginTop: 6,
@@ -108,11 +65,6 @@ const styles = (theme: Theme) =>
       color: "#081C42",
       fontWeight: "bold",
     },
-    shareResults: {
-      padding: "18px 25px",
-      color: "#07193E",
-      fontSize: 14,
-    },
     metricValContainer: {
       lineHeight: 1,
     },
diff --git a/portal-ui/src/screens/Console/Storage/Storage.tsx b/portal-ui/src/screens/Console/Storage/Storage.tsx
index 4b126031f..64434055d 100644
--- a/portal-ui/src/screens/Console/Storage/Storage.tsx
+++ b/portal-ui/src/screens/Console/Storage/Storage.tsx
@@ -45,12 +45,6 @@ interface IStorageProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     pageContainer: {
       border: "1px solid #EAEAEA",
       height: "100%",
diff --git a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
index 5f73a2629..60a938502 100644
--- a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
+++ b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
@@ -41,16 +41,6 @@ interface IStorageVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "calc(100vh - 267px)",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
index 8ddbcaa40..63ad09d6e 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -68,9 +68,6 @@ interface IAddTenantProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     pageBox: {
       border: "1px solid #EAEAEA",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
index e175c4aea..700907156 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -52,9 +52,6 @@ interface IAffinityProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     overlayAction: {
       marginLeft: 10,
       "& svg": {
@@ -65,16 +62,9 @@ const styles = (theme: Theme) =>
         background: "#EAEAEA",
       },
     },
-    radioOptionsLayout: {
-      "& div": {
-        display: "flex",
-        flexFlow: "column",
-      },
-    },
     affinityConfigField: {
       display: "flex",
     },
-
     affinityFieldLabel: {
       display: "flex",
       flexFlow: "column",
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
index 7e25c8b47..f2abe188b 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -75,9 +75,6 @@ interface IConfigureProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     configSectionItem: {
       marginRight: 15,
 
@@ -85,15 +82,6 @@ const styles = (theme: Theme) =>
         border: "1px solid red",
       },
     },
-    inputLabel: {
-      fontWeight: 300,
-      fontSize: 14,
-    },
-    textBoxContainer: {
-      "& input": {
-        fontWeight: 400,
-      },
-    },
     tenantCustomizationFields: {
       marginLeft: 30, // 2nd Level(15+15)
       width: "88%",
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
index fff5f0d19..33c1935ea 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, useState, useEffect, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -22,13 +22,13 @@ import withStyles from "@mui/styles/withStyles";
 import { Paper } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import {
-  updateAddField,
-  isPageValid,
-  addFileServerCert,
   addFileClientCert,
-  addFileVaultCert,
-  addFileVaultCa,
   addFileGemaltoCa,
+  addFileServerCert,
+  addFileVaultCa,
+  addFileVaultCert,
+  isPageValid,
+  updateAddField,
 } from "../../actions";
 import {
   createTenantCommon,
@@ -105,9 +105,6 @@ interface IEncryptionProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     encryptionTypeOptions: {
       marginBottom: 15,
     },
@@ -117,15 +114,6 @@ const styles = (theme: Theme) =>
         flex: 1,
       },
     },
-    fileInputField: {
-      borderBottom: "1px solid #EAEAEA",
-      "&:last-child": {
-        borderBottom: 0,
-      },
-      "& input": {
-        borderBottom: 0,
-      },
-    },
     rightSpacer: {
       marginRight: 15,
     },
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
index 37ad8ea77..114ed6be2 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
@@ -72,9 +72,6 @@ interface IIdentityProviderProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     shortened: {
       gridTemplateColumns: "auto auto 50px 50px",
       display: "grid",
@@ -84,7 +81,6 @@ const styles = (theme: Theme) =>
         fontWeight: 400,
       },
     },
-
     buttonTray: {
       marginLeft: 10,
       display: "flex",
@@ -120,10 +116,6 @@ const styles = (theme: Theme) =>
     adUserDnRows: {
       display: "flex",
     },
-
-    inputLabel: {
-      minWidth: 260,
-    },
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
index ccfcb9c54..bb21e5ee5 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
@@ -69,14 +69,6 @@ interface IImagesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    inputLabel: {
-      fontWeight: 300,
-      fontSize: 14,
-      minWidth: 200,
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
index c9461643b..f08739d63 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
@@ -61,9 +61,6 @@ import { Paper, SelectChangeEvent } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     sizePreview: {
       position: "fixed",
       marginLeft: 10,
@@ -71,15 +68,6 @@ const styles = (theme: Theme) =>
       border: "1px solid #EAEAEA",
       padding: 2,
     },
-    inputLabel: {
-      minWidth: 200,
-    },
-    errorInField: {
-      "& .MuiFormControl-root & .MuiOutlinedInput-root & .MuiFormHelperText-root":
-        {
-          color: "blue",
-        },
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
index cb1d4ac26..9a525f974 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
@@ -61,9 +61,6 @@ interface ISecurityProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     minioCertificateRows: {
       display: "flex",
       alignItems: "center",
@@ -87,9 +84,6 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    fileInputField: {
-      borderBottom: 0,
-    },
     minioCertsContainer: {
       marginBottom: 15,
     },
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx
index f6031c5dc..d98b6f037 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx
@@ -70,9 +70,6 @@ interface ISizePreviewProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     root: {
       margin: 4,
     },
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
index 82398167b..d6e6c8ddb 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
@@ -72,9 +72,6 @@ interface ITenantSizeProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     compositeFieldContainer: {
       display: "flex",
       alignItems: "center",
@@ -90,9 +87,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    inputLabel: {
-      minWidth: 200,
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index 910d23105..e86c50e59 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -49,6 +49,7 @@ import withSuspense from "../../Common/Components/withSuspense";
 const CredentialsPrompt = withSuspense(
   React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
 );
+
 interface ITenantsList {
   classes: any;
   setErrorSnackMessage: typeof setErrorSnackMessage;
@@ -67,9 +68,6 @@ const styles = (theme: Theme) =>
       fontSize: 14,
       fontWeight: "bold",
     },
-    addBucket: {
-      marginRight: 8,
-    },
     theaderSearch: {
       borderColor: theme.palette.grey["200"],
       "& .MuiInputBase-input": {
@@ -96,21 +94,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginBottom: 8,
     },
-    healthStatusIcon: {
-      position: "relative",
-      fontSize: 10,
-      right: -30,
-      height: 10,
-      top: -50,
-    },
-    tenantItem: {
-      border: "1px solid #dedede",
-      marginBottom: 20,
-      paddingLeft: 40,
-      paddingRight: 40,
-      paddingTop: 30,
-      paddingBottom: 30,
-    },
   });
 
 const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
index 2bace3d32..32b63639a 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { Theme } from "@mui/material/styles";
@@ -29,14 +29,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    sizeFactorContainer: {
-      marginLeft: 8,
-    },
     bottomContainer: {
       display: "flex",
       flexGrow: 1,
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
index 17947b6e0..d9be853b6 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -47,18 +47,6 @@ interface IPoolsSummary {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
-    redState: {
-      color: theme.palette.error.main,
-    },
-    yellowState: {
-      color: theme.palette.warning.main,
-    },
-    greenState: {
-      color: theme.palette.success.main,
-    },
-    greyState: {
-      color: "grey",
-    },
     ...actionsTray,
     ...containerForHeader(theme.spacing(4)),
   });
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
index 99b8bc9ea..2bf2114c8 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
@@ -40,10 +40,6 @@ interface ITenantMetrics {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
-    flexBox: {
-      display: "flex",
-      flexFlow: "column",
-    },
     iframeStyle: {
       border: "0px",
       flex: "1 1 auto",
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
index f05cff77f..db13f8e87 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
@@ -64,26 +64,13 @@ const styles = (theme: Theme) =>
     },
     bold: { fontWeight: "bold" },
     italic: { fontStyle: "italic" },
-    underline: { textDecorationLine: "underline" },
     paperContainer: {
       padding: "15px 15px 15px 50px",
     },
-    verifiedIcon: {
-      width: 96,
-      position: "absolute",
-      right: 0,
-      bottom: 29,
-    },
-    noUnderLine: {
-      textDecoration: "none",
-    },
     certificateInfo: {
       height: "auto",
       margin: 5,
     },
-    certificateInfoName: {
-      fontWeight: "bold",
-    },
     ...containerForHeader(theme.spacing(4)),
   });
 
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
index 07eeee73f..19de5f94d 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
@@ -33,10 +33,6 @@ import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/Cod
 
 const styles = (theme: Theme) =>
   createStyles({
-    jsonPolicyEditor: {
-      minHeight: 400,
-      width: "100%",
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
index 36a7414f5..ab1ce846b 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
@@ -41,16 +41,6 @@ interface ITenantVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "450px",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
index d73517d13..320da6ab0 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
@@ -63,9 +63,6 @@ const styles = (theme: Theme) =>
       ...actionsTray.actionsTray,
       padding: "15px 0 0",
     },
-    logerror: {
-      color: "#A52A2A",
-    },
     logerror_tab: {
       color: "#A52A2A",
       paddingLeft: 25,
diff --git a/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx b/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
index f00efd0e1..6b5e42ae0 100644
--- a/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
+++ b/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
@@ -50,22 +50,6 @@ interface IConfigurationOptions {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 324px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
     settingsOptionsContainer: {
       display: "flex" as const,
       flexDirection: "row" as const,
@@ -76,14 +60,6 @@ const styles = (theme: Theme) =>
       padding: 5,
       backgroundColor: "#fff",
     },
-    configurationLink: {
-      border: "#E5E5E5 1px solid",
-      borderRadius: 2,
-      padding: 20,
-      width: 190,
-      height: 80,
-      margin: 15,
-    },
     ...searchField,
     ...actionsTray,
     ...containerForHeader(theme.spacing(4)),
diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx
index a52059712..ad4ea8f75 100644
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -47,26 +47,6 @@ import PageLayout from "../Common/Layout/PageLayout";
 
 const styles = (theme: Theme) =>
   createStyles({
-    paperContainer: {
-      padding: 15,
-      paddingLeft: 50,
-      display: "flex",
-    },
-    logList: {
-      background: "white",
-      height: "400px",
-      overflow: "auto",
-      "& ul": {
-        margin: "4px",
-        padding: "0px",
-      },
-      "& ul li": {
-        listStyle: "none",
-        margin: "0px",
-        padding: "0px",
-        borderBottom: "1px solid #dedede",
-      },
-    },
     sizeItem: {
       width: 150,
     },
@@ -124,9 +104,6 @@ const styles = (theme: Theme) =>
         display: "none",
       },
     },
-    noMinWidthLabel: {
-      fontWeight: 400,
-    },
     ...containerForHeader(theme.spacing(4)),
   });
 
diff --git a/portal-ui/src/screens/Console/Users/AddUser.tsx b/portal-ui/src/screens/Console/Users/AddUser.tsx
index 3f85c7427..4c263d124 100644
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -40,12 +40,6 @@ import { TabPanel } from "../../shared/tabs";
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
       marginTop: ".9rem",
diff --git a/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx b/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
index 0bdcf7483..a8b81ac28 100644
--- a/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
+++ b/portal-ui/src/screens/Console/Users/BulkAddToGroup.tsx
@@ -39,12 +39,6 @@ interface IAddToGroup {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx b/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
index c437bf41d..d412414ba 100644
--- a/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
+++ b/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
@@ -33,12 +33,6 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index eed2e1b5f..4e2bc424b 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -52,36 +52,6 @@ const AddToGroup = withSuspense(React.lazy(() => import("./BulkAddToGroup")));
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      // padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     ...actionsTray,
     ...searchField,
     searchField: {
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 778f9776c..41f7d8dc7 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -72,67 +72,6 @@ const styles = (theme: Theme) =>
       fontSize: ".9rem",
       marginRight: ".5rem",
     },
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      // padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    fixedHeight: {
-      height: 165,
-      minWidth: 247,
-      padding: "25px 28px",
-      "& svg": {
-        maxHeight: 18,
-      },
-    },
-    paperContainer: {
-      padding: 15,
-      paddingLeft: 50,
-      display: "flex",
-    },
-    gridContainer: {
-      display: "grid",
-      gridTemplateColumns: "auto auto",
-      gridGap: 8,
-      justifyContent: "flex-start",
-      alignItems: "center",
-      "& div:not(.MuiCircularProgress-root)": {
-        display: "flex",
-        alignItems: "center",
-      },
-      "& div:nth-child(odd)": {
-        justifyContent: "flex-end",
-        fontWeight: 700,
-      },
-      "& div:nth-child(2n)": {
-        minWidth: 150,
-      },
-    },
     breadcrumLink: {
       textDecoration: "none",
       color: "black",
diff --git a/portal-ui/src/screens/LoginPage/LoginCallback.tsx b/portal-ui/src/screens/LoginPage/LoginCallback.tsx
index 9be1b044d..bb265b204 100644
--- a/portal-ui/src/screens/LoginPage/LoginCallback.tsx
+++ b/portal-ui/src/screens/LoginPage/LoginCallback.tsx
@@ -28,11 +28,6 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 
 const styles = (theme: Theme) =>
   createStyles({
-    "@global": {
-      body: {
-        backgroundColor: "#FAFAFA",
-      },
-    },
     paper: {
       borderRadius: 8,
       display: "flex",
@@ -50,38 +45,12 @@ const styles = (theme: Theme) =>
         borderRadius: 8,
       },
     },
-    avatar: {
-      margin: theme.spacing(1),
-      backgroundColor: theme.palette.secondary.main,
-    },
-    form: {
-      width: "100%", // Fix IE 11 issue.
-    },
     submit: {
       margin: "30px 0px 16px",
       height: 40,
       boxShadow: "none",
       padding: "16px 30px",
     },
-    errorBlock: {
-      backgroundColor: "#C72C48",
-      width: 800,
-      height: 64,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      left: "50%",
-      top: "50%",
-      marginLeft: -400,
-      marginTop: -290,
-      color: "#fff",
-      fontWeight: 700,
-      fontSize: 14,
-      borderRadius: 8,
-      padding: 10,
-      boxSizing: "border-box",
-    },
     mainContainer: {
       position: "relative",
       height: 424,
@@ -102,39 +71,6 @@ const styles = (theme: Theme) =>
     theLogin: {
       padding: "40px 45px 20px 45px",
     },
-    loadingLoginStrategy: {
-      textAlign: "center",
-    },
-    headerTitle: {
-      marginBottom: 10,
-    },
-    submitContainer: {
-      textAlign: "right",
-    },
-    disclaimer: {
-      fontSize: 12,
-      marginTop: 30,
-    },
-    jwtInput: {
-      marginTop: 45,
-    },
-    linearPredef: {
-      height: 10,
-    },
-    errorIconStyle: {
-      marginRight: 3,
-    },
-    loaderAlignment: {
-      display: "flex",
-      width: "100%",
-      height: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-      flexDirection: "column",
-    },
-    retryButton: {
-      alignSelf: "flex-end",
-    },
     extraDetailsContainer: {
       fontStyle: "italic",
       color: "#9C9C9C",
diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx
index d532555e7..1d79b684a 100644
--- a/portal-ui/src/screens/LoginPage/LoginPage.tsx
+++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx
@@ -45,10 +45,6 @@ import { LockIcon, UsersIcon, VersionIcon } from "../../icons";
 
 const styles = (theme: Theme) =>
   createStyles({
-    avatar: {
-      margin: theme.spacing(1),
-      backgroundColor: theme.palette.secondary.main,
-    },
     form: {
       width: "100%", // Fix IE 11 issue.
     },
@@ -58,25 +54,6 @@ const styles = (theme: Theme) =>
       boxShadow: "none",
       padding: "16px 30px",
     },
-    errorBlock: {
-      backgroundColor: "#C72C48",
-      width: 800,
-      height: 64,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      zIndex: 9,
-      left: "50%",
-      top: "50%",
-
-      color: "#fff",
-      fontWeight: 700,
-      fontSize: 14,
-      borderRadius: 8,
-      padding: 10,
-      boxSizing: "border-box",
-    },
     loginPage: {
       height: "100%",
       display: "flex",
@@ -181,19 +158,13 @@ const styles = (theme: Theme) =>
     submitContainer: {
       textAlign: "right",
     },
-    disclaimer: {
-      fontSize: 12,
-      marginTop: 30,
-    },
     jwtInput: {
       marginTop: 45,
     },
     linearPredef: {
       height: 10,
     },
-    errorIconStyle: {
-      marginRight: 3,
-    },
+
     loaderAlignment: {
       display: "flex",
       width: "100%",
diff --git a/portal-ui/src/screens/NotFoundPage.tsx b/portal-ui/src/screens/NotFoundPage.tsx
index 23ea0455f..1774b09bf 100644
--- a/portal-ui/src/screens/NotFoundPage.tsx
+++ b/portal-ui/src/screens/NotFoundPage.tsx
@@ -18,29 +18,14 @@ import React from "react";
 import CssBaseline from "@mui/material/CssBaseline";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import makeStyles from "@mui/styles/makeStyles";
 import Container from "@mui/material/Container";
 import Copyright from "../common/Copyright";
 
-const useStyles = makeStyles((theme) => ({
-  "@global": {
-    body: {
-      backgroundColor: theme.palette.common.white,
-    },
-  },
-  paper: {
-    marginTop: theme.spacing(8),
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-}));
 const NotFound: React.FC = () => {
-  const classes = useStyles();
   return (
     <Container component="main">
       <CssBaseline />
-      <div className={classes.paper}>
+      <div>
         <Typography variant="h1" component="h1">
           404 Not Found
         </Typography>