diff --git a/ngui/ui/public/background-auth.jpeg b/ngui/ui/public/background-auth.jpeg
new file mode 100644
index 000000000..5e38dfe33
Binary files /dev/null and b/ngui/ui/public/background-auth.jpeg differ
diff --git a/ngui/ui/src/components/Button/Button.tsx b/ngui/ui/src/components/Button/Button.tsx
index 5b9df74ca..9785c59ef 100644
--- a/ngui/ui/src/components/Button/Button.tsx
+++ b/ngui/ui/src/components/Button/Button.tsx
@@ -21,7 +21,7 @@ const Button = forwardRef(
       dashedBorder = false,
       size = "small",
       variant = "outlined",
-      uppercase = true,
+      uppercase = false,
       disabled = false,
       color = "info",
       type = "button",
diff --git a/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx b/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx
index 84a1d6bf1..5e67309f0 100644
--- a/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx
+++ b/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx
@@ -22,7 +22,6 @@ const ButtonLoader = ({
   href,
   isLoading = false,
   color = "info",
-  uppercase = true,
   tooltip,
   ...rest
 }) => {
@@ -49,7 +48,6 @@ const ButtonLoader = ({
       <Button
         dataTestId={dataTestId}
         dataProductTourId={dataProductTourId}
-        uppercase={uppercase}
         messageId={messageId}
         startIcon={startIcon}
         color={color}
diff --git a/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx b/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
index 922aa5936..6e8b313d9 100644
--- a/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
+++ b/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
@@ -41,12 +41,12 @@ const ClusterTypes = ({ clusterTypes, onUpdatePriority, isLoading = false }) =>
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
       <Grid direction="row" container spacing={3}>
-        <Grid item xs={12} className={"KuBoxShadowRoot"}>
+        <Grid item xs={12} className={"MTPBoxShadowRoot"}>
           <Box>
-            <Box marginBottom={MPT_SPACING_2}>
+            <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
+            <Box marginTop={MPT_SPACING_2}>
               <ExplanationMessage />
             </Box>
-            <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
           </Box>
         </Grid>
       </Grid>
diff --git a/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx b/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx
index a8a8aa258..db14b6fac 100644
--- a/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx
+++ b/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx
@@ -146,7 +146,7 @@ const ClusterTypesTable = ({ clusterTypes, onUpdatePriority, isLoading = false }
               key: "add",
               icon: <AddOutlinedIcon fontSize="small" />,
               messageId: "add",
-              color: "success",
+              color: "primary",
               variant: "contained",
               type: "button",
               link: CLUSTER_TYPE_CREATE,
diff --git a/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts b/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts
index 92f8717ce..5e092a691 100644
--- a/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts
+++ b/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles } from "tss-react/mui";
+import { MPT_BOX_SHADOW_THIN, MPT_SPACING_2 } from "../../utils/layouts";
 
 const useStyles = makeStyles()(() => ({
   dashed: {
@@ -6,6 +7,20 @@ const useStyles = makeStyles()(() => ({
     borderBottom: "1px dashed",
     width: "fit-content"
   },
+  chip: {
+    display: "inline",
+    border: `1px solid rgba(0, 0, 0, 0)`,
+    padding: `5px ${MPT_SPACING_2}`,
+    borderRadius: MPT_SPACING_2,
+    boxShadow: MPT_BOX_SHADOW_THIN,
+    background: "none",
+    width: "fit-content",
+    transition: "background, border ease-in-out 0.2s",
+    "&:hover": {
+      background: "white",
+      borderColor: "rgba(0, 0, 0, 0.2)"
+    }
+  },
   cursorPointer: {
     "&:hover": {
       cursor: "pointer"
diff --git a/ngui/ui/src/components/DashedTypography/DashedTypography.tsx b/ngui/ui/src/components/DashedTypography/DashedTypography.tsx
index a76de7d3b..dc3155074 100644
--- a/ngui/ui/src/components/DashedTypography/DashedTypography.tsx
+++ b/ngui/ui/src/components/DashedTypography/DashedTypography.tsx
@@ -7,12 +7,13 @@ const DashedTypography = ({
   disablePointerOnHover = false,
   hasRightMargin = false,
   dataTestId,
+  chipMode = false,
   ...rest
 }) => {
   const { classes, cx } = useStyles();
 
   const typographyClasses = cx(
-    classes.dashed,
+    chipMode ? classes.chip : classes.dashed,
     disablePointerOnHover ? "" : classes.cursorPointer,
     hasRightMargin ? classes.right : "",
     className
diff --git a/ngui/ui/src/components/Greeter/Greeter.styles.ts b/ngui/ui/src/components/Greeter/Greeter.styles.ts
index ce14ea6a7..c79e1d4ea 100644
--- a/ngui/ui/src/components/Greeter/Greeter.styles.ts
+++ b/ngui/ui/src/components/Greeter/Greeter.styles.ts
@@ -70,7 +70,11 @@ const useStyles = makeStyles()((theme) => ({
     backgroundColor: theme.palette.common.white
   },
   rightSideGrid: {
-    backgroundColor: "#333F53"
+    backgroundColor: theme.palette.primary.main,
+    backgroundImage: "url('/background-auth.jpeg')",
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    position: "relative"
   },
   ...getFormAndMapWrapperClasses(theme)
 }));
diff --git a/ngui/ui/src/components/Greeter/Greeter.tsx b/ngui/ui/src/components/Greeter/Greeter.tsx
index c83a48b1e..021db36ce 100644
--- a/ngui/ui/src/components/Greeter/Greeter.tsx
+++ b/ngui/ui/src/components/Greeter/Greeter.tsx
@@ -1,132 +1,136 @@
 import { ReactNode } from "react";
-import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
 import { Stack } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import Link from "@mui/material/Link";
 import { useTheme } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import anomalyDetectionToAvoidBudgetOverruns from "assets/welcome/anomaly-detection-to-avoid-budget-overruns.svg";
-import cloudResourceUsageCostTransparency from "assets/welcome/cloud-resource-usage-cost-transparency.svg";
-import finopsCloudCostOptimization from "assets/welcome/finops-cloud-cost-optimization.svg";
-import mlAiProfilingOptimization from "assets/welcome/ml-ai-profiling-optimization.svg";
-import optimalPerformanceInfrastructureCostForMlAiTasks from "assets/welcome/optimal-performance-infrastructure-cost-for-ml-ai-tasks.svg";
-import runsetsToRunExperimentsInParallel from "assets/welcome/runsets-to-run-experiments-in-parallel.svg";
-import Button from "components/Button";
-import CustomersGallery from "components/CustomersGallery";
-import IconLabel from "components/IconLabel";
-import IntegrationsGallery from "components/IntegrationsGallery";
 import Logo from "components/Logo";
-import SubTitle from "components/SubTitle";
 import TopAlertWrapper from "components/TopAlertWrapper";
 import { ALERT_TYPES } from "components/TopAlertWrapper/TopAlertWrapper";
-import { useIsDownMediaQuery, useIsUpMediaQuery } from "hooks/useMediaQueries";
-import { HYSTAX, LIVE_DEMO } from "urls";
-import { tag as tagHotjar } from "utils/hotjar";
-import { SPACING_2, SPACING_6, SPACING_1 } from "utils/layouts";
-import { isEven } from "utils/math";
+import { SPACING_2, SPACING_1 } from "utils/layouts";
 import useStyles from "./Greeter.styles";
 
-type LiveDemoButtonProps = {
-  onClick: () => void;
-};
+// MPT_TODO: disabled other authentication sources
+// import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
+// import Link from "@mui/material/Link";
+// import Typography from "@mui/material/Typography";
+// import { FormattedMessage, useIntl } from "react-intl";
+// import { useNavigate } from "react-router-dom";
+// import anomalyDetectionToAvoidBudgetOverruns from "assets/welcome/anomaly-detection-to-avoid-budget-overruns.svg";
+// import cloudResourceUsageCostTransparency from "assets/welcome/cloud-resource-usage-cost-transparency.svg";
+// import finopsCloudCostOptimization from "assets/welcome/finops-cloud-cost-optimization.svg";
+// import mlAiProfilingOptimization from "assets/welcome/ml-ai-profiling-optimization.svg";
+// import optimalPerformanceInfrastructureCostForMlAiTasks from "assets/welcome/optimal-performance-infrastructure-cost-for-ml-ai-tasks.svg";
+// import runsetsToRunExperimentsInParallel from "assets/welcome/runsets-to-run-experiments-in-parallel.svg";
+// import Button from "components/Button";
+// import CustomersGallery from "components/CustomersGallery";
+// import IconLabel from "components/IconLabel";
+// import IntegrationsGallery from "components/IntegrationsGallery";
+// import SubTitle from "components/SubTitle";
+// import { useIsUpMediaQuery } from "hooks/useMediaQueries";
+// import { HYSTAX, LIVE_DEMO } from "urls";
+// import { tag as tagxotjar } from "utils/hotjar";
+// import { isEven } from "utils/math";
 
 type GreeterProps = {
   content: ReactNode;
 };
 
-const OptScaleLink = () => {
-  const { classes, cx } = useStyles();
-  const intl = useIntl();
-
-  return (
-    <Typography component="div" variant="body2" color="white">
-      <IconLabel
-        icon={<LanguageOutlinedIcon className={cx(classes.webIconMargin)} />}
-        label={
-          <Link
-            data-test-id="link_optscale_site"
-            href={HYSTAX}
-            onClick={() => {
-              tagHotjar(["went_optscale_website"]);
-            }}
-            color="inherit"
-            target="_blank"
-            rel="noopener"
-          >
-            {intl.formatMessage({ id: "hystaxDotCom" })}
-          </Link>
-        }
-      />
-    </Typography>
-  );
-};
+// MPT_TODO: disabled other authentication sources
+// type LiveDemoButtonProps = {
+//   onClick: () => void;
+// };
 
-const ImagesWithCaptions = () => {
-  const intl = useIntl();
-  const { classes, cx } = useStyles();
+// const OptScaleLink = () => {
+//   const { classes, cx } = useStyles();
+//   const intl = useIntl();
+//
+//   return (
+//     <Typography component="div" variant="body2" color="white">
+//       <IconLabel
+//         icon={<LanguageOutlinedIcon className={cx(classes.webIconMargin)} />}
+//         label={
+//           <Link
+//             data-test-id="link_optscale_site"
+//             href={HYSTAX}
+//             onClick={() => {
+//               tagHotjar(["went_optscale_website"]);
+//             }}
+//             color="inherit"
+//             target="_blank"
+//             rel="noopener"
+//           >
+//             {intl.formatMessage({ id: "hystaxDotCom" })}
+//           </Link>
+//         }
+//       />
+//     </Typography>
+//   );
+// };
+//
+// const ImagesWithCaptions = () => {
+//   const intl = useIntl();
+//   const { classes, cx } = useStyles();
+//
+//   const isUpLg = useIsUpMediaQuery("lg");
+//
+//   return (
+//     <Grid container spacing={isUpLg ? SPACING_6 : SPACING_2} className={classes.imagesWithCaptions}>
+//       {[
+//         { caption: "optscale.welcome.caption1", src: finopsCloudCostOptimization },
+//         { caption: "optscale.welcome.caption2", src: cloudResourceUsageCostTransparency },
+//         { caption: "optscale.welcome.caption3", src: anomalyDetectionToAvoidBudgetOverruns },
+//         { caption: "optscale.welcome.caption4", src: mlAiProfilingOptimization },
+//         { caption: "optscale.welcome.caption5", src: optimalPerformanceInfrastructureCostForMlAiTasks },
+//         { caption: "optscale.welcome.caption6", src: runsetsToRunExperimentsInParallel }
+//       ].map(({ caption, src }, index) => (
+//         <Grid item lg={4} md={4} sm={6} key={caption} className={classes.imageWithCaptionWrapper}>
+//           <img
+//             src={src}
+//             alt={intl.formatMessage({ id: caption })}
+//             data-test-id={`img_banner_${index}`}
+//             className={classes.image}
+//           />
+//           <SubTitle dataTestId={`img_banner_caption_${index}`} color="white" className={cx(classes.caption)}>
+//             <FormattedMessage id={caption} />
+//           </SubTitle>
+//         </Grid>
+//       ))}
+//     </Grid>
+//   );
+// };
+//
+// const LiveDemoButton = ({ onClick }: LiveDemoButtonProps) => (
+//   <Button
+//     dataTestId="btn_live_demo"
+//     color="lightYellow"
+//     variant="contained"
+//     messageId="liveDemo"
+//     size="large"
+//     onClick={onClick}
+//   />
+// );
 
-  const isUpLg = useIsUpMediaQuery("lg");
+// const defaultOrder = [0, 1, 2, 3, 4, 5] as const;
 
-  return (
-    <Grid container spacing={isUpLg ? SPACING_6 : SPACING_2} className={classes.imagesWithCaptions}>
-      {[
-        { caption: "optscale.welcome.caption1", src: finopsCloudCostOptimization },
-        { caption: "optscale.welcome.caption2", src: cloudResourceUsageCostTransparency },
-        { caption: "optscale.welcome.caption3", src: anomalyDetectionToAvoidBudgetOverruns },
-        { caption: "optscale.welcome.caption4", src: mlAiProfilingOptimization },
-        { caption: "optscale.welcome.caption5", src: optimalPerformanceInfrastructureCostForMlAiTasks },
-        { caption: "optscale.welcome.caption6", src: runsetsToRunExperimentsInParallel }
-      ].map(({ caption, src }, index) => (
-        <Grid item lg={4} md={4} sm={6} key={caption} className={classes.imageWithCaptionWrapper}>
-          <img
-            src={src}
-            alt={intl.formatMessage({ id: caption })}
-            data-test-id={`img_banner_${index}`}
-            className={classes.image}
-          />
-          <SubTitle dataTestId={`img_banner_caption_${index}`} color="white" className={cx(classes.caption)}>
-            <FormattedMessage id={caption} />
-          </SubTitle>
-        </Grid>
-      ))}
-    </Grid>
-  );
-};
-
-const LiveDemoButton = ({ onClick }: LiveDemoButtonProps) => (
-  <Button
-    dataTestId="btn_live_demo"
-    color="lightYellow"
-    variant="contained"
-    messageId="liveDemo"
-    size="large"
-    onClick={onClick}
-  />
-);
-
-const defaultOrder = [0, 1, 2, 3, 4, 5] as const;
-
-const getVerticalOrder = () => {
-  const [evenNumbers, oddNumbers] = defaultOrder.reduce(
-    ([even, odd]: [number[], number[]], curr) => {
-      if (isEven(curr)) {
-        return [[...even, curr], [...odd]];
-      }
-      return [[...even], [...odd, curr]];
-    },
-    [[], []]
-  );
-  return [...evenNumbers, ...oddNumbers];
-};
+// const getVerticalOrder = () => {
+//   const [evenNumbers, oddNumbers] = defaultOrder.reduce(
+//     ([even, odd]: [number[], number[]], curr) => {
+//       if (isEven(curr)) {
+//         return [[...even, curr], [...odd]];
+//       }
+//       return [[...even], [...odd, curr]];
+//     },
+//     [[], []]
+//   );
+//   return [...evenNumbers, ...oddNumbers];
+// };
 
 const Greeter = ({ content }: GreeterProps) => {
   const { classes, cx } = useStyles();
   const theme = useTheme();
-  const navigate = useNavigate();
+  // MPT_TODO: Override with custom order and gridDefinition to math BDR requirements
+  // const navigate = useNavigate();
 
-  const isInVerticalOrder = useIsDownMediaQuery("md");
+  // const isInVerticalOrder = useIsDownMediaQuery("md");
 
   // default order
   //    order0 - empty
@@ -143,27 +147,61 @@ const Greeter = ({ content }: GreeterProps) => {
   //    order3 - link/button
   //    order4 - map and text
   //    order5 - empty
-  const order = isInVerticalOrder ? getVerticalOrder() : defaultOrder;
+
+  // const order = isInVerticalOrder ? getVerticalOrder() : defaultOrder;
+  //
+  // const gridDefinition = [
+  //   {
+  //     key: "empty"
+  //   },
+  //   {
+  //     key: "link",
+  //     children: (
+  //       <div className={classes.linkWrapper}>
+  //         <LiveDemoButton onClick={() => navigate(LIVE_DEMO)} />
+  //         <OptScaleLink />
+  //       </div>
+  //     )
+  //   },
+  //   {
+  //     key: "form",
+  //     children: (
+  //       <Stack className={classes.wrapper} spacing={SPACING_1}>
+  //         <div>
+  //           <Logo width={200} dataTestId="img_logo" />
+  //         </div>
+  //         <div>{content}</div>
+  //       </Stack>
+  //     ),
+  //     className: classes.centeredFlexColumnDirection
+  //   },
+  //   {
+  //     key: "bannerAndText",
+  //     className: classes.centeredFlexColumnDirection,
+  //     children: <ImagesWithCaptions />
+  //   },
+  //   {
+  //     key: "customers",
+  //     className: classes.centeredFlexColumnDirection,
+  //     children: <CustomersGallery />
+  //   },
+  //   {
+  //     key: "integrations",
+  //     className: classes.centeredFlexColumnDirection,
+  //     children: <IntegrationsGallery />
+  //   }
+  // ];
+
+  const order = [0, 1];
 
   const gridDefinition = [
-    {
-      key: "empty"
-    },
-    {
-      key: "link",
-      children: (
-        <div className={classes.linkWrapper}>
-          <LiveDemoButton onClick={() => navigate(LIVE_DEMO)} />
-          <OptScaleLink />
-        </div>
-      )
-    },
     {
       key: "form",
       children: (
         <Stack className={classes.wrapper} spacing={SPACING_1}>
           <div>
             <Logo width={200} dataTestId="img_logo" />
+            <h1>FinOps for Cloud</h1>
           </div>
           <div>{content}</div>
         </Stack>
@@ -171,19 +209,9 @@ const Greeter = ({ content }: GreeterProps) => {
       className: classes.centeredFlexColumnDirection
     },
     {
-      key: "bannerAndText",
-      className: classes.centeredFlexColumnDirection,
-      children: <ImagesWithCaptions />
-    },
-    {
-      key: "customers",
-      className: classes.centeredFlexColumnDirection,
-      children: <CustomersGallery />
-    },
-    {
-      key: "integrations",
+      key: "bannerBackground",
       className: classes.centeredFlexColumnDirection,
-      children: <IntegrationsGallery />
+      children: <div className={classes.imageWithCaptionWrapper} />
     }
   ];
 
diff --git a/ngui/ui/src/components/LinearSelector/LinearSelector.tsx b/ngui/ui/src/components/LinearSelector/LinearSelector.tsx
index 030f60614..5ed976f7d 100644
--- a/ngui/ui/src/components/LinearSelector/LinearSelector.tsx
+++ b/ngui/ui/src/components/LinearSelector/LinearSelector.tsx
@@ -21,6 +21,7 @@ import Popover from "components/Popover";
 import { isEmpty as isEmptyArray } from "utils/arrays";
 import { LINEAR_SELECTOR_ITEMS_TYPES } from "utils/constants";
 import { isEmpty as isEmptyObject } from "utils/objects";
+import { MPT_SPACING_2 } from "../../utils/layouts";
 import useStyles from "./LinearSelector.styles";
 
 const NONE = "none";
@@ -31,7 +32,7 @@ const ItemLabel = ({ name, handleChange, dataTestId, displayedName, endAdornment
   const { classes } = useStyles();
 
   return (
-    <DashedTypography onClick={handleChange} component="span" dataTestId={dataTestId} className={classes.label}>
+    <DashedTypography onClick={handleChange} component="span" dataTestId={dataTestId} className={classes.label} chipMode>
       {displayedName || <FormattedMessage id={name} />}
       {endAdornment}
     </DashedTypography>
@@ -210,7 +211,7 @@ const PickedItem = ({ name, dataTestId = name, value, type, onDelete, displayedN
   const getChipLabel = () => {
     const nameDisplayed = displayedName || <FormattedMessage id={name} />;
     const valueDisplayed = displayedValue || value;
-    const typographyVariant = "subtitle2";
+    const typographyVariant = "subtitle";
 
     return [LINEAR_SELECTOR_ITEMS_TYPES.POPOVER, LINEAR_SELECTOR_ITEMS_TYPES.MULTISELECT_POPOVER].includes(type) ? (
       <KeyValueLabel
@@ -236,8 +237,9 @@ const PickedItem = ({ name, dataTestId = name, value, type, onDelete, displayedN
         chip: `chip_${dataTestId}`,
         deleteIcon: `btn_${dataTestId}_close`
       }}
-      color="info"
+      color="primary"
       size="medium"
+      sx={{ borderRadius: MPT_SPACING_2 }}
       variant="outlined"
       onDelete={onDelete}
     />
@@ -370,7 +372,7 @@ const LinearSelector = ({ value, label, items, onClear, onClearAll, onChange, on
           {valuesArray.length > 1 && onClearAll ? (
             <Button
               dataTestId="btn_clear"
-              dashedBorder
+              style={{ fontSize: "15px", borderRadius: MPT_SPACING_2, paddingTop: "2px", paddingBottom: "2px" }}
               startIcon={<DeleteOutlinedIcon />}
               onClick={onClearAll}
               messageId="clearFilters"
diff --git a/ngui/ui/src/components/RangePicker/RangePicker.tsx b/ngui/ui/src/components/RangePicker/RangePicker.tsx
index 44543c549..e34ef27f1 100644
--- a/ngui/ui/src/components/RangePicker/RangePicker.tsx
+++ b/ngui/ui/src/components/RangePicker/RangePicker.tsx
@@ -101,7 +101,7 @@ const RangePicker = ({
           dataTestId="text_selected_dates"
           style={{ minWidth: "180px" }}
         >
-          {dateAsText}
+          <span style={{ fontSize: "15px" }}>{dateAsText}</span>
         </OutlinedDiv>
       }
       menu={popoverContent}
diff --git a/ngui/ui/src/components/Resources/Resources.tsx b/ngui/ui/src/components/Resources/Resources.tsx
index 15766fc3a..a713fd469 100644
--- a/ngui/ui/src/components/Resources/Resources.tsx
+++ b/ngui/ui/src/components/Resources/Resources.tsx
@@ -126,6 +126,7 @@ const Resources = ({
               key: "perspectives",
               icon: <AssessmentOutlinedIcon fontSize="small" />,
               messageId: "perspectivesTitle",
+              color: "primary",
               type: "button",
               action: () => {
                 openSideModal(ApplyResourcePerspectiveModal, {
@@ -170,6 +171,7 @@ const Resources = ({
           });
         },
         requiredActions: ["EDIT_PARTNER"],
+        color: "primary",
         dataTestId: "btn_create_perspective"
       },
       {
@@ -177,6 +179,7 @@ const Resources = ({
         icon: <GroupWorkOutlinedIcon fontSize="small" />,
         messageId: "configureClusterTypes",
         type: "button",
+        color: "primary",
         link: CLUSTER_TYPES,
         dataTestId: "btn_configure_cluster_types"
       }
@@ -254,7 +257,7 @@ const Resources = ({
           <Grid xs={12} item>
             <ExpensesSummaryContainer requestParams={requestParams} />
           </Grid>
-          <Grid xs={12} item className={"KuBoxShadowRoot"}>
+          <Grid xs={12} item className={"MTPBoxShadowRoot"}>
             <Box>{typeof renderContent === "function" ? renderContent() : null}</Box>
           </Grid>
         </Grid>
diff --git a/ngui/ui/src/components/Table/Table.styles.ts b/ngui/ui/src/components/Table/Table.styles.ts
index 85367cd64..e719b06d9 100644
--- a/ngui/ui/src/components/Table/Table.styles.ts
+++ b/ngui/ui/src/components/Table/Table.styles.ts
@@ -6,6 +6,15 @@ const useStyles = makeStyles()(() => ({
     display: "block",
     wordBreak: "initial" // shown inside MUI Drawer table inherits word-break: "break-word" which leads to letter-by-letter break in side modals, for example
   },
+  tableGradientOverlay: {
+    position: "absolute",
+    top: "0",
+    right: "0",
+    width: "250px",
+    height: "100%",
+    background: "linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
+    pointerEvents: "none"
+  },
   hoverableRow: {
     cursor: "pointer"
   }
diff --git a/ngui/ui/src/components/Table/Table.tsx b/ngui/ui/src/components/Table/Table.tsx
index 05881cf99..7a6016e69 100644
--- a/ngui/ui/src/components/Table/Table.tsx
+++ b/ngui/ui/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Box, TableBody, TableCell, TableFooter, TableHead, TableRow } from "@mui/material";
 import MuiTable from "@mui/material/Table";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
@@ -92,6 +92,35 @@ const Table = ({
   manualGlobalFiltering
 }) => {
   const headerRef = useRef();
+  const tableContainerRef = useRef<HTMLElement>();
+  const [isGradientVisible, setIsGradientVisible] = useState(false);
+
+  const updateGradientVisibility = () => {
+    const container = tableContainerRef.current as HTMLElement;
+    if (container) {
+      const isScrollable = container.scrollWidth > container.clientWidth;
+      const atScrollEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth;
+      setIsGradientVisible(isScrollable && !atScrollEnd);
+    }
+  };
+
+  useEffect(() => {
+    const container = tableContainerRef.current;
+
+    updateGradientVisibility();
+
+    if (container) {
+      container.addEventListener("scroll", updateGradientVisibility);
+      window.addEventListener("resize", updateGradientVisibility);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", updateGradientVisibility);
+        window.removeEventListener("resize", updateGradientVisibility);
+      }
+    };
+  }, []);
 
   const { classes } = useStyles();
 
@@ -273,141 +302,146 @@ const Table = ({
       />
       {/* Wrap with box in order to make table fit 100% width with small amount of columns */}
       {/* TODO: Consider using MUI TableContainer */}
-      <Box
-        className={classes.tableContainer}
-        sx={{
-          overflowX
-        }}
-      >
-        {isLoading ? (
-          <TableLoader columnsCounter={columns.length ?? 5} showHeader />
-        ) : (
-          <MuiTable
-            sx={{
-              tableLayout
-            }}
-            style={{
-              ...stickyTableStyles
-            }}
-          >
-            {withHeader && (
-              <TableHead ref={headerRef}>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHeaderCell
-                        key={header.id}
-                        isSelectionColumn={header.column.id === SELECTION_COLUMN_ID}
-                        headerContext={header}
-                        stickyStyles={stickyHeaderCellStyles}
-                        getHeaderCellClassName={getHeaderCellClassName}
-                      />
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHead>
-            )}
-            <TableBody>
-              {isEmptyArray(rows) ? (
-                <TableRow
-                  sx={
-                    disableBottomBorderForLastRow
-                      ? {
-                          "&:last-child > td": {
-                            borderBottom: "none"
+      <div style={{ position: "relative" }}>
+        <Box
+          ref={tableContainerRef}
+          className={classes.tableContainer}
+          sx={{
+            overflowX,
+            position: "relative"
+          }}
+        >
+          {isLoading ? (
+            <TableLoader columnsCounter={columns.length ?? 5} showHeader />
+          ) : (
+            <MuiTable
+              sx={{
+                tableLayout
+              }}
+              style={{
+                ...stickyTableStyles
+              }}
+            >
+              {withHeader && (
+                <TableHead ref={headerRef}>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHeaderCell
+                          key={header.id}
+                          isSelectionColumn={header.column.id === SELECTION_COLUMN_ID}
+                          headerContext={header}
+                          stickyStyles={stickyHeaderCellStyles}
+                          getHeaderCellClassName={getHeaderCellClassName}
+                        />
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHead>
+              )}
+              <TableBody>
+                {isEmptyArray(rows) ? (
+                  <TableRow
+                    sx={
+                      disableBottomBorderForLastRow
+                        ? {
+                            "&:last-child > td": {
+                              borderBottom: "none"
+                            }
                           }
-                        }
-                      : {}
-                  }
-                >
-                  <TableCell align="center" colSpan={columns.length}>
-                    <FormattedMessage id={localization.emptyMessageId || DEFAULT_EMPTY_MESSAGE_ID} />
-                  </TableCell>
-                </TableRow>
-              ) : (
-                rows.map((row, index) => {
-                  const rowStyle = typeof getRowStyle === "function" ? getRowStyle(row.original) : {};
-
-                  return (
-                    <TableRow
-                      {...getRowHoverProperties(row)}
-                      data-test-id={`row_${index}`}
-                      key={row.id}
-                      style={rowStyle}
-                      sx={
-                        disableBottomBorderForLastRow
-                          ? {
-                              "&:last-child > td": {
-                                borderBottom: "none"
+                        : {}
+                    }
+                  >
+                    <TableCell align="center" colSpan={columns.length}>
+                      <FormattedMessage id={localization.emptyMessageId || DEFAULT_EMPTY_MESSAGE_ID} />
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.map((row, index) => {
+                    const rowStyle = typeof getRowStyle === "function" ? getRowStyle(row.original) : {};
+
+                    return (
+                      <TableRow
+                        {...getRowHoverProperties(row)}
+                        data-test-id={`row_${index}`}
+                        key={row.id}
+                        style={rowStyle}
+                        sx={
+                          disableBottomBorderForLastRow
+                            ? {
+                                "&:last-child > td": {
+                                  borderBottom: "none"
+                                }
                               }
-                            }
-                          : {}
-                      }
-                    >
-                      {row.getVisibleCells().map((cell) => {
-                        if (cell.column.id === SELECTION_COLUMN_ID) {
-                          return <TableBodyCell className={"tableRowSelection"} key={cell.id} cell={cell} />;
+                            : {}
                         }
-                        const Cell = memoBodyCells ? MemoTableBodyCell : TableBodyCell;
-
-                        return (
-                          <Cell
-                            key={cell.id}
-                            cell={cell}
-                            className={
-                              typeof getRowCellClassName === "function" ? getRowCellClassName(cell.getContext()) : undefined
-                            }
-                          />
-                        );
-                      })}
+                      >
+                        {row.getVisibleCells().map((cell) => {
+                          if (cell.column.id === SELECTION_COLUMN_ID) {
+                            return <TableBodyCell className={"tableRowSelection"} key={cell.id} cell={cell} />;
+                          }
+                          const Cell = memoBodyCells ? MemoTableBodyCell : TableBodyCell;
+
+                          return (
+                            <Cell
+                              key={cell.id}
+                              cell={cell}
+                              className={
+                                typeof getRowCellClassName === "function" ? getRowCellClassName(cell.getContext()) : undefined
+                              }
+                            />
+                          );
+                        })}
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+              {withFooter && (
+                <TableFooter>
+                  {table.getFooterGroups().map((footerGroup) => (
+                    <TableRow key={footerGroup.id}>
+                      {footerGroup.headers.map((footerContext) => (
+                        <TableFooterCell key={footerContext.id} footerContext={footerContext} />
+                      ))}
                     </TableRow>
-                  );
-                })
+                  ))}
+                </TableFooter>
               )}
-            </TableBody>
-            {withFooter && (
-              <TableFooter>
-                {table.getFooterGroups().map((footerGroup) => (
-                  <TableRow key={footerGroup.id}>
-                    {footerGroup.headers.map((footerContext) => (
-                      <TableFooterCell key={footerContext.id} footerContext={footerContext} />
-                    ))}
-                  </TableRow>
-                ))}
-              </TableFooter>
-            )}
-          </MuiTable>
-        )}
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          paddingTop: SPACING_1,
-          flexWrap: "wrap",
-          flexDirection: { xs: "column-reverse", md: "row" },
-          ":empty": { display: "none" }
-        }}
-      >
-        <InfoArea
-          counters={counters}
-          rowsCount={rows.length}
-          selectedRowsCount={selectedRowsCount}
-          dataTestIds={dataTestIds.infoAreaTestIds}
-          showAllLink={showAllLink}
-          pagination={paginationSettings}
-          withSearch={withSearch}
-          withSelection={withSelection}
-          withPagination={withPagination}
-        />
-        {paginationSettings.pageCount > 1 && (
-          <Pagination
-            count={paginationSettings.pageCount}
-            page={paginationSettings.pageIndex + 1}
-            paginationHandler={paginationSettings.onPageIndexChange}
+            </MuiTable>
+          )}
+        </Box>
+        {isGradientVisible && <div className={classes.tableGradientOverlay} />}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            paddingTop: SPACING_1,
+            flexWrap: "wrap",
+            flexDirection: { xs: "column-reverse", md: "row" },
+            ":empty": { display: "none" }
+          }}
+        >
+          <InfoArea
+            counters={counters}
+            rowsCount={rows.length}
+            selectedRowsCount={selectedRowsCount}
+            dataTestIds={dataTestIds.infoAreaTestIds}
+            showAllLink={showAllLink}
+            pagination={paginationSettings}
+            withSearch={withSearch}
+            withSelection={withSelection}
+            withPagination={withPagination}
           />
-        )}
-      </Box>
+          {paginationSettings.pageCount > 1 && (
+            <Pagination
+              count={paginationSettings.pageCount}
+              page={paginationSettings.pageIndex + 1}
+              paginationHandler={paginationSettings.onPageIndexChange}
+            />
+          )}
+        </Box>
+      </div>
     </div>
   );
 };
diff --git a/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts b/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts
index 062b37538..b59cdd1fc 100644
--- a/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts
+++ b/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts
@@ -16,26 +16,17 @@ const useStyles = makeStyles()((theme) => ({
       }
     },
     ".MuiOutlinedInput-root": {
-      borderRadius: 0,
-      paddingRight: 0,
-      "> :first-child": {
-        marginLeft: "-10px"
-      },
-      "> :nth-last-child(2)": {
-        marginRight: "-10px"
-      }
+      boxShadow: " inset 0 0 5px rgba(0, 0, 0, 0.2)"
     },
-    ".MuiBadge-root > svg": {
+    ".MuiOutlinedInput-root svg": {
       fill: "black"
     },
-    ".MuiOutlinedInput-notchedOutline": {
-      borderTop: "none",
-      borderLeft: "none",
-      borderRight: "none"
+    ".MuiBadge-root > svg": {
+      fill: "black"
     },
+    ".MuiOutlinedInput-notchedOutline": {},
     ".MuiInputBase-input": {
-      fontSize: "14px",
-      borderTop: "none"
+      fontSize: "14px"
     },
     [theme.breakpoints.down("md")]: {
       paddingBottom: theme.spacing(1)
diff --git a/ngui/ui/src/components/ThemeProviderWrapper/ThemeProviderWrapper.tsx b/ngui/ui/src/components/ThemeProviderWrapper/ThemeProviderWrapper.tsx
index 587770f70..86cd253b9 100644
--- a/ngui/ui/src/components/ThemeProviderWrapper/ThemeProviderWrapper.tsx
+++ b/ngui/ui/src/components/ThemeProviderWrapper/ThemeProviderWrapper.tsx
@@ -6,7 +6,7 @@ import { ThemeProvider } from "@mui/material/styles";
 import { TssCacheProvider } from "tss-react";
 import { useThemeSettingsOptions } from "hooks/useThemeSettingsOptions";
 import getTheme from "theme";
-import { MPT_BRAND_GRAY_1 } from "../../utils/layouts";
+import { MPT_GRAY_2 } from "../../utils/layouts";
 
 const muiCache = createCache({
   key: "mui",
@@ -24,18 +24,18 @@ const globalScrollbarStyles = (
         width: "5px"
       },
       "::-webkit-scrollbar-track": {
-        background: MPT_BRAND_GRAY_1
+        background: MPT_GRAY_2
       },
       "::-webkit-scrollbar-thumb": {
         borderRadius: "0",
         backgroundClip: "padding-box",
-        backgroundColor: MPT_BRAND_GRAY_1
+        backgroundColor: MPT_GRAY_2
       },
       "::-webkit-scrollbar-thumb:hover": {
-        backgroundColor: MPT_BRAND_GRAY_1
+        backgroundColor: MPT_GRAY_2
       },
       "*": {
-        scrollbarColor: `${MPT_BRAND_GRAY_1} transparent`,
+        scrollbarColor: `${MPT_GRAY_2} transparent`,
         scrollbarWidth: "thin"
       }
     }}
diff --git a/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx
index e57b84ebd..fb9fa4284 100644
--- a/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx
+++ b/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx
@@ -4,7 +4,6 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
       color="lightBlue"
diff --git a/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx b/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx
index e722006ba..46100b9a2 100644
--- a/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx
+++ b/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@mui/material";
+import Grid from "@mui/material/Grid";
 import Link from "@mui/material/Link";
 import { useForm, FormProvider } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
@@ -7,7 +8,7 @@ import ActionBar from "components/ActionBar";
 import InlineSeverityAlert from "components/InlineSeverityAlert";
 import PageContentWrapper from "components/PageContentWrapper";
 import { CLUSTER_TYPES, DOCS_HYSTAX_CLUSTERS, RESOURCES } from "urls";
-import { SPACING_1 } from "utils/layouts";
+import { MPT_SPACING_3 } from "utils/layouts";
 import { FormButtons, NameField, TagKeyField } from "./FormElements";
 import { CreateClusterTypeFormProps, FormValues } from "./types";
 import { getDefaultValues } from "./utils";
@@ -36,26 +37,32 @@ const CreateClusterTypeForm = ({ onSubmit, onCancel, isSubmitLoading = false }:
     <>
       <ActionBar data={actionBarDefinition} />
       <PageContentWrapper>
-        <Box sx={{ width: { md: "50%" }, mb: SPACING_1 }}>
-          <FormProvider {...methods}>
-            <form onSubmit={handleSubmit(onSubmit)} noValidate>
-              <NameField />
-              <TagKeyField />
-              <FormButtons onCancel={onCancel} isLoading={isSubmitLoading} />
-            </form>
-          </FormProvider>
-        </Box>
-        <InlineSeverityAlert
-          messageId="createClusterTypeDescription"
-          messageValues={{
-            strong: (chunks) => <strong>{chunks}</strong>,
-            link: (chunks) => (
-              <Link data-test-id="link_read_more" href={DOCS_HYSTAX_CLUSTERS} target="_blank" rel="noopener">
-                {chunks}
-              </Link>
-            )
-          }}
-        />
+        <Grid direction="row" container spacing={3}>
+          <Grid item xs={12} className={"MTPBoxShadowRoot"}>
+            <Box>
+              <Box sx={{ width: { md: "50%" }, mb: MPT_SPACING_3 }}>
+                <FormProvider {...methods}>
+                  <form onSubmit={handleSubmit(onSubmit)} noValidate>
+                    <NameField />
+                    <TagKeyField />
+                    <FormButtons onCancel={onCancel} isLoading={isSubmitLoading} />
+                  </form>
+                </FormProvider>
+              </Box>
+              <InlineSeverityAlert
+                messageId="createClusterTypeDescription"
+                messageValues={{
+                  strong: (chunks) => <strong>{chunks}</strong>,
+                  link: (chunks) => (
+                    <Link data-test-id="link_read_more" href={DOCS_HYSTAX_CLUSTERS} target="_blank" rel="noopener">
+                      {chunks}
+                    </Link>
+                  )
+                }}
+              />
+            </Box>
+          </Grid>
+        </Grid>
       </PageContentWrapper>
     </>
   );
diff --git a/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx
index 0ecfb233e..4741c19a9 100644
--- a/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx
+++ b/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx
@@ -4,7 +4,6 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
       color="lightBlue"
diff --git a/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx
index 799896a84..169ef57bf 100644
--- a/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx
+++ b/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx
@@ -5,9 +5,8 @@ const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
       dataTestId="btn_login"
-      uppercase
       variant="contained"
-      color="lightBlue"
+      color="primary"
       isLoading={isLoading}
       messageId="login"
       type="submit"
diff --git a/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx b/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx
index 5413f88a4..d60580773 100644
--- a/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx
+++ b/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx
@@ -4,8 +4,8 @@ import Typography from "@mui/material/Typography";
 import { FormProvider, useForm } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router-dom";
-import { REGISTER, PASSWORD_RECOVERY } from "urls";
-import { getQueryParams, getSearch } from "utils/network";
+import { PASSWORD_RECOVERY } from "urls";
+import { getQueryParams } from "utils/network";
 import { EmailField, FormButtons, PasswordField } from "./FormElements";
 import { FormValues, LoginFormProps } from "./types";
 import { getDefaultValues } from "./utils";
@@ -21,7 +21,7 @@ const LoginForm = ({ onSubmit, isLoading = false, isInvited = false }: LoginForm
 
   const { handleSubmit } = methods;
 
-  const search = getSearch();
+  // const search = getSearch();
 
   return (
     <FormProvider {...methods}>
@@ -35,11 +35,11 @@ const LoginForm = ({ onSubmit, isLoading = false, isInvited = false }: LoginForm
               <FormattedMessage id="forgotPassword" />
             </Link>
           </Typography>
-          <Typography>
-            <Link data-test-id="link_sign_up" color="primary" to={`${REGISTER}${search}`} component={RouterLink}>
-              <FormattedMessage id="noAccountSignUp" />
-            </Link>
-          </Typography>
+          {/* <Typography> */}
+          {/*  <Link data-test-id="link_sign_up" color="primary" to={`${REGISTER}${search}`} component={RouterLink}> */}
+          {/*    <FormattedMessage id="noAccountSignUp" /> */}
+          {/*  </Link> */}
+          {/* </Typography> */}
         </Box>
       </form>
     </FormProvider>
diff --git a/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx b/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx
index 1af527f64..efe692e81 100644
--- a/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx
+++ b/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx
@@ -38,10 +38,9 @@ const RegistrationForm = ({ onSubmit, isLoading = false, isInvited = false }: Re
         </Typography>
         <Box className={classes.registerButtonWrapper}>
           <ButtonLoader
-            uppercase
             dataTestId="btn_register"
             variant="contained"
-            color="lightBlue"
+            color="primary"
             customWrapperClass={classes.registerButton}
             isLoading={isLoading}
             messageId="register"
diff --git a/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx
index 200021a7c..ec5b59f80 100644
--- a/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx
+++ b/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx
@@ -4,10 +4,9 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
-      color="lightBlue"
+      color="primary"
       isLoading={isLoading}
       messageId="sendVerificationCode"
       type="submit"
diff --git a/ngui/ui/src/containers/AuthorizationContainer/AuthorizationContainer.tsx b/ngui/ui/src/containers/AuthorizationContainer/AuthorizationContainer.tsx
index 004710011..d56d3c3de 100644
--- a/ngui/ui/src/containers/AuthorizationContainer/AuthorizationContainer.tsx
+++ b/ngui/ui/src/containers/AuthorizationContainer/AuthorizationContainer.tsx
@@ -3,10 +3,7 @@ import { useLocation } from "react-router-dom";
 import { GET_TOKEN } from "api/auth/actionTypes";
 import LoginForm from "components/forms/LoginForm";
 import RegistrationForm from "components/forms/RegistrationForm";
-import GoogleAuthButton from "components/GoogleAuthButton";
 import Greeter from "components/Greeter";
-import MicrosoftSignInButton from "components/MicrosoftSignInButton";
-import OAuthSignIn from "components/OAuthSignIn";
 import Redirector from "components/Redirector";
 import { useApiData } from "hooks/useApiData";
 import { useNewAuthorization } from "hooks/useNewAuthorization";
@@ -30,8 +27,7 @@ const AuthorizationContainer = () => {
 
   const { invited: queryInvited, next = HOME } = getQueryParams();
 
-  const { authorize, register, isRegistrationInProgress, isAuthInProgress, thirdPartySignIn, setIsAuthInProgress } =
-    useNewAuthorization();
+  const { authorize, register, isRegistrationInProgress, isAuthInProgress } = useNewAuthorization();
 
   const { isDemo } = useOrganizationInfo();
   const {
@@ -56,14 +52,14 @@ const AuthorizationContainer = () => {
       }
     );
   };
-
-  const onThirdPartySignIn = (provider, params) =>
-    thirdPartySignIn(
-      { provider, params },
-      {
-        getOnSuccessRedirectionPath: ({ userEmail }) => getLoginRedirectionPath(userEmail)
-      }
-    );
+  /* MPT_TODO: disabled other authentication sources */
+  // const onThirdPartySignIn = (provider, params) =>
+  //   thirdPartySignIn(
+  //     { provider, params },
+  //     {
+  //       getOnSuccessRedirectionPath: ({ userEmail }) => getLoginRedirectionPath(userEmail)
+  //     }
+  //   );
 
   // isGetTokenLoading used for LoginForm, isCreateUserLoading for RegistrationForm
   const isLoading = isRegistrationInProgress || isAuthInProgress;
@@ -85,26 +81,27 @@ const AuthorizationContainer = () => {
         content={
           <Stack spacing={SPACING_4}>
             <div>{createForm()}</div>
-            <div>
-              <OAuthSignIn
-                googleButton={
-                  <GoogleAuthButton
-                    thirdPartySignIn={onThirdPartySignIn}
-                    setIsAuthInProgress={setIsAuthInProgress}
-                    isAuthInProgress={isAuthInProgress}
-                    isRegistrationInProgress={isRegistrationInProgress}
-                  />
-                }
-                microsoftButton={
-                  <MicrosoftSignInButton
-                    thirdPartySignIn={onThirdPartySignIn}
-                    setIsAuthInProgress={setIsAuthInProgress}
-                    isAuthInProgress={isAuthInProgress}
-                    isRegistrationInProgress={isRegistrationInProgress}
-                  />
-                }
-              />
-            </div>
+            {/* MPT_TODO: disabled other authentication sources */}
+            {/* <div> */}
+            {/* <OAuthSignIn */}
+            {/*    googleButton={ */}
+            {/*      <GoogleAuthButton */}
+            {/*        thirdPartySignIn={onThirdPartySignIn} */}
+            {/*        setIsAuthInProgress={setIsAuthInProgress} */}
+            {/*        isAuthInProgress={isAuthInProgress} */}
+            {/*        isRegistrationInProgress={isRegistrationInProgress} */}
+            {/*      /> */}
+            {/*    } */}
+            {/*    microsoftButton={ */}
+            {/*      <MicrosoftSignInButton */}
+            {/*        thirdPartySignIn={onThirdPartySignIn} */}
+            {/*        setIsAuthInProgress={setIsAuthInProgress} */}
+            {/*        isAuthInProgress={isAuthInProgress} */}
+            {/*        isRegistrationInProgress={isRegistrationInProgress} */}
+            {/*      /> */}
+            {/*    } */}
+            {/*  /> */}
+            {/* </div> */}
           </Stack>
         }
       />
diff --git a/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx b/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx
index e5326d3dd..95c5f0fc6 100644
--- a/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx
+++ b/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx
@@ -16,7 +16,7 @@ const ResourcesPerspectives = () => (
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
       <Grid direction="row" container spacing={3}>
-        <Grid item xs={12} className={"KuBoxShadowRoot"}>
+        <Grid item xs={12} className={"MTPBoxShadowRoot"}>
           <Box>
             <ResourcesPerspectivesComponent />
           </Box>
diff --git a/ngui/ui/src/theme.ts b/ngui/ui/src/theme.ts
index cc304a83e..a9f76190d 100644
--- a/ngui/ui/src/theme.ts
+++ b/ngui/ui/src/theme.ts
@@ -9,7 +9,7 @@ import { isEmpty as isEmptyArray } from "utils/arrays";
 import { customResponsiveFontSizes } from "utils/fonts";
 import { isEmpty as isEmptyObject } from "utils/objects";
 import {
-  MPT_BRAND_GRAY_1,
+  MPT_GRAY_2,
   MPT_GRAY_3,
   MPT_GRAY_4,
   MPT_BRAND_WHITE,
@@ -402,6 +402,8 @@ const getThemeConfig = (settings = {}) => {
           {
             props: { variant: "contained", color: "lightYellow" },
             style: ({ theme }) => ({
+              padding: `6px ${MPT_SPACING_2}`,
+              borderRadius: MPT_SPACING_1,
               color: theme.palette.lightYellow.contrastText,
               "&:hover": {
                 backgroundColor: lighten(theme.palette.lightYellow.main, 0.08)
@@ -423,7 +425,13 @@ const getThemeConfig = (settings = {}) => {
               color: theme.palette.text.primary
             })
           }
-        ]
+        ],
+        styleOverrides: {
+          root: {
+            padding: `6px ${MPT_SPACING_2}`,
+            borderRadius: MPT_SPACING_1
+          }
+        }
       },
       MuiChip: {
         styleOverrides: {
@@ -459,6 +467,13 @@ const getThemeConfig = (settings = {}) => {
           color: "info"
         }
       },
+      MuiBreadcrumbs: {
+        styleOverrides: {
+          li: {
+            whiteSpace: "nowrap"
+          }
+        }
+      },
       MuiCardHeader: {
         styleOverrides: {
           content: {
@@ -502,7 +517,7 @@ const getThemeConfig = (settings = {}) => {
             flexDirection: "column",
             minHeight: "100vh"
           },
-          ".KuBoxShadowRoot": {
+          ".MTPBoxShadowRoot": {
             "> .MuiBox-root": {
               boxShadow: MPT_BOX_SHADOW,
               background: "#FFFFFF",
@@ -684,10 +699,10 @@ const getThemeConfig = (settings = {}) => {
               fontSize: "13px"
             },
             "&.MuiTableCell-head": {
-              borderLeft: `1px solid ${MPT_BRAND_GRAY_1}`,
+              borderLeft: `1px solid ${MPT_GRAY_2}`,
               borderBottom: "1px solid black",
               "&:last-of-type": {
-                borderRight: `1px solid ${MPT_BRAND_GRAY_1}`
+                borderRight: `1px solid ${MPT_GRAY_2}`
               }
             },
             "& .MuiIconButton-root": {
@@ -758,7 +773,10 @@ const getThemeConfig = (settings = {}) => {
         },
         styleOverrides: {
           dense: {
-            paddingRight: 0
+            paddingRight: 0,
+            ".MuiButton-root": {
+              fontSize: "14px"
+            }
           }
         }
       },
diff --git a/ngui/ui/src/utils/layouts.ts b/ngui/ui/src/utils/layouts.ts
index c6400bac7..51b8cfde5 100644
--- a/ngui/ui/src/utils/layouts.ts
+++ b/ngui/ui/src/utils/layouts.ts
@@ -10,7 +10,7 @@ export const SPACING_6 = 6;
 export const MPT_BRAND_PRIMARY = "#472AFF";
 
 export const MPT_BRAND_WHITE = "#FFFFFF";
-export const MPT_BRAND_GRAY_1 = "#E0E5E8"; // TODO: replace with MPT_GRAY_2
+export const MPT_BRAND_BLACK = "#000000";
 export const MPT_GRAY_1 = "#F4F6F8";
 export const MPT_GRAY_2 = "#E0E5E8";
 export const MPT_GRAY_3 = "#AEB1B9";
@@ -35,6 +35,7 @@ export const MPT_TERTIARY_BLUE_1 = `#CAE4FF`;
 export const MPT_TERTIARY_BLUE_2 = `#4DA6FF`;
 
 export const MPT_BOX_SHADOW = `0 1px ${MPT_SPACING_1} #6b718057`;
+export const MPT_BOX_SHADOW_THIN = `0 1px 4px ${MPT_GRAY_3}`;
 export const MPT_BOX_SHADOW_HOVER = `0 0 0 2px ${MPT_ALERTS_INFO_2} inset, 0 1px ${MPT_SPACING_1} #6b718057`;
 
 export const MPT_GRADIENT = "linear-gradient(270deg, #00c9cd, #472aff, #392d9c)";