diff --git a/managed/ui/src/app/stylesheets/tabs.scss b/managed/ui/src/app/stylesheets/tabs.scss
index a97b32283c36..991ab1ab7dc2 100644
--- a/managed/ui/src/app/stylesheets/tabs.scss
+++ b/managed/ui/src/app/stylesheets/tabs.scss
@@ -8,8 +8,7 @@
   > li {
     > a {
       border: 1px solid #e2e2e1;
-      border: none;
-      border-bottom: none;
+      border: 1px solid transparent;
       min-width: 80px;
       text-align: center;
       color: #555;
@@ -19,7 +18,7 @@
       @include transition(0.35s);
 
       &:first-child {
-        margin-left: -1px;
+        margin-left: -1px;        
       }
 
       @media (min-width: 768px) {
diff --git a/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.js b/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.js
index 08e55b66c1f1..874e2f3c5f1a 100644
--- a/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.js
+++ b/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.js
@@ -12,15 +12,72 @@ import {
 import { Tab, Row, Col } from 'react-bootstrap';
 import { YBTabsPanel, YBTabsWithLinksPanel } from '../../panels';
 import awsLogo from './images/aws.svg';
-import azureLogo from './images/azure.png';
+import azureLogo from './images/azure.svg';
 import k8sLogo from './images/k8s.png';
 import openshiftLogo from './images/redhat.png';
 import tanzuLogo from './images/tanzu.png';
-import gcpLogo from './images/gcp.png';
+import gcpLogo from './images/gcp.svg';
 import { isAvailable, showOrRedirect } from '../../../utils/LayoutUtils';
 import './DataCenterConfiguration.scss';
 
 class DataCenterConfiguration extends Component {
+
+  getTabTitle = (type) => {
+    switch(type) {
+      case 'AWS':
+        return (
+          <div className="title">
+            <img src={awsLogo} alt="AWS" className="aws-logo" />
+            <span>Amazon Web Services</span>
+          </div>
+        );
+      case 'GCP':
+        return (
+          <div className="title">
+            <img src={gcpLogo} alt="GCP" className="gcp-logo" />
+            <span>Google Cloud Platform</span>
+          </div>
+        );
+      case 'Azure':
+        return (
+          <div className="title">
+            <img src={azureLogo} alt="Azure" className="azure-logo" />
+            <span>Microsoft Azure</span>
+          </div>
+        );
+      case 'Tanzu':
+        return (
+          <div className="title">
+            <img src={tanzuLogo} alt="VMware Tanzu" />
+            <span>VMware Tanzu</span>
+          </div>
+        );
+      case 'Openshift':
+        return (
+          <div className="title">
+            <img src={openshiftLogo} alt="Red Hat OpenShift" />
+            <span>Red Hat OpenShift</span>
+          </div>
+        );
+      case 'K8s':
+        return (
+          <div className="title">
+            <img src={k8sLogo} alt="Managed Kubernetes" />
+            <span>Managed Kubernetes Service</span>
+          </div>
+        );
+      case 'Onprem':
+        return (
+          <div className="title">
+            <i className="fa fa-server tab-logo" />
+            <span>On-Premises Datacenters</span>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
   render() {
     const {
       customer: { currentCustomer },
@@ -28,47 +85,11 @@ class DataCenterConfiguration extends Component {
       params
     } = this.props;
     showOrRedirect(currentCustomer.data.features, 'menu.config');
-
-    const onPremiseTabContent = (
-      <div className="on-premise">
-        <i className="fa fa-server" />
-        On-Premises
-        <br />
-        Datacenters
-      </div>
-    );
-
-    const openshiftTabContent = (
-      <Row className="custom-tab">
-        <Col md={4}>
-          <img src={openshiftLogo} alt="Red Hat OpenShift" />
-        </Col>
-        <Col md={8}>Red Hat OpenShift</Col>
-      </Row>
-    );
-
-    const k8sTabContent = (
-      <Row className="custom-tab">
-        <Col md={4}>
-          <img src={k8sLogo} alt="Managed Kubernetes" />
-        </Col>
-        <Col md={8}>Managed Kubernetes Service</Col>
-      </Row>
-    );
-
-    const tanzuTabContent = (
-      <Row className="custom-tab">
-        <Col md={4}>
-          <img src={tanzuLogo} alt="VMware Tanzu" />
-        </Col>
-        <Col md={8}>VMware Tanzu</Col>
-      </Row>
-    );
-
     const defaultTab = isAvailable(currentCustomer.data.features, 'config.infra')
       ? 'cloud'
       : 'backup';
     const activeTab = tab || defaultTab;
+
     return (
       <div>
         <h2 className="content-title">Cloud Provider Configuration</h2>
@@ -90,7 +111,7 @@ class DataCenterConfiguration extends Component {
               >
                 <Tab
                   eventKey="aws"
-                  title={<img src={awsLogo} alt="AWS" className="aws-logo" />}
+                  title={this.getTabTitle('AWS')}
                   key="aws-tab"
                   unmountOnExit={true}
                 >
@@ -98,7 +119,7 @@ class DataCenterConfiguration extends Component {
                 </Tab>
                 <Tab
                   eventKey="gcp"
-                  title={<img src={gcpLogo} alt="GCP" className="gcp-logo" />}
+                  title={this.getTabTitle('GCP')}
                   key="gcp-tab"
                   unmountOnExit={true}
                 >
@@ -106,29 +127,39 @@ class DataCenterConfiguration extends Component {
                 </Tab>
                 <Tab
                   eventKey="azure"
-                  title={<img src={azureLogo} alt="Azure" className="azure-logo" />}
+                  title={this.getTabTitle('Azure')}
                   key="azure-tab"
                   unmountOnExit={true}
                 >
                   <ProviderConfigurationContainer providerType="azu" />
                 </Tab>
-                <Tab eventKey="tanzu" title={tanzuTabContent} key="tanzu-tab" unmountOnExit={true}>
+                <Tab
+                  eventKey="tanzu"
+                  title={this.getTabTitle('Tanzu')}
+                  key="tanzu-tab"
+                  unmountOnExit={true}
+                >
                   <KubernetesProviderConfigurationContainer type="tanzu" params={params} />
                 </Tab>
                 <Tab
                   eventKey="openshift"
-                  title={openshiftTabContent}
+                  title={this.getTabTitle('Openshift')}
                   key="openshift-tab"
                   unmountOnExit={true}
                 >
                   <KubernetesProviderConfigurationContainer type="openshift" params={params} />
                 </Tab>
-                <Tab eventKey="k8s" title={k8sTabContent} key="k8s-tab" unmountOnExit={true}>
+                <Tab
+                  eventKey="k8s"
+                  title={this.getTabTitle('K8s')}
+                  key="k8s-tab"
+                  unmountOnExit={true}
+                >
                   <KubernetesProviderConfigurationContainer type="k8s" params={params} />
                 </Tab>
                 <Tab
                   eventKey="onprem"
-                  title={onPremiseTabContent}
+                  title={this.getTabTitle('Onprem')}
                   key="onprem-tab"
                   unmountOnExit={true}
                 >
diff --git a/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.scss b/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.scss
index 56b013f669f1..985f1d569480 100644
--- a/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.scss
+++ b/managed/ui/src/components/config/ConfigProvider/DataCenterConfiguration.scss
@@ -2,7 +2,7 @@
 
 @import '../../../_style/colors.scss';
 
-#config-tab-panel .tab-content {
+#config-tab-panel .config-tabs .tab-content {
   min-height: 400px;
   padding-top: 20px;
 
@@ -326,22 +326,82 @@
 }
 
 .config-tabs .nav-tabs {
+  @media screen and (max-width: 1620px) {
+    > li {
+      width: calc(100%/7);
+
+      > a  {
+        margin-right: 0px;
+      }
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    > li > a  {
+      min-width: unset;
+    }
+  }
+  
+  li:not(.active) {
+    img, svg {
+      filter: grayscale(1) brightness(1.2);        
+    }
+    :before {
+      filter: sepia(.6);
+    }
+  }
+
   > li > a {
-    min-width: 180px;
-    min-height: 72px;
-    padding-bottom: 0;
+    height: 52px;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .title {
+      justify-content: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      @media screen and (max-width: 980px) {
+        > span {
+          display: none;
+        }
+      }
+    }
+    
 
     img {
-      height: 50px;
+      height: 28px;
+      margin-right: 5px;
 
       &.aws-logo {
-        height: 42px;
-        margin-top: 5px;
+        width: 32px;
+      }
+      &.gcp-logo {
+        width: 30px;
       }
       &.azure-logo {
-        height: 30px;
-        margin-top: 8px;
+        height: 24px;
+        object-fit: cover;
+        width: 33px;
+        object-position: left;
+      }
+      &.s3-logo {
+        width: 28px;
+        object-fit: cover;
+        object-position: left;
       }
+      &.encryption-transit-icon {
+        height: 24px;
+      }
+    }
+
+    .tab-logo {
+      font-size: x-large;
+      vertical-align: middle;
+      margin-right: 5px;
     }
 
     h3 {
@@ -355,22 +415,6 @@
       }
     }
 
-    .on-premise {
-      display: inline-block;
-      padding-top: 10px;
-      font-size: 16px;
-      font-weight: 500;
-      text-align: left;
-      line-height: 1;
-
-      i {
-        float: left;
-        font-size: 36px;
-        padding-right: 8px;
-        color: #679;
-      }
-    }
-
     .custom-tab {
       display: flex;
       align-items: center;
@@ -382,10 +426,6 @@
     }
   }
 
-  > li.active > a {
-    min-height: 72px;
-  }
-
   .kubernetes-logo {
     width: 140px;
     height: auto;
diff --git a/managed/ui/src/components/config/ConfigProvider/images/azure.png b/managed/ui/src/components/config/ConfigProvider/images/azure.png
deleted file mode 100644
index 8519ad3d47c0..000000000000
Binary files a/managed/ui/src/components/config/ConfigProvider/images/azure.png and /dev/null differ
diff --git a/managed/ui/src/components/config/ConfigProvider/images/azure.svg b/managed/ui/src/components/config/ConfigProvider/images/azure.svg
new file mode 100644
index 000000000000..cd96a7d3724a
--- /dev/null
+++ b/managed/ui/src/components/config/ConfigProvider/images/azure.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="52.91666mm"
+   height="15.244921mm"
+   viewBox="0 0 52.91666 15.244921"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="Azurey.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="6.5246067"
+     inkscape:cx="67.4659"
+     inkscape:cy="38.024323"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="930"
+     inkscape:window-height="781"
+     inkscape:window-x="667"
+     inkscape:window-y="117"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(677.9313,-313.85407)">
+    <g
+       transform="matrix(0.03978217,0,0,0.03978217,-658.51488,317.36166)"
+       id="layer1-1"
+       inkscape:label="Layer 1">
+      <path
+         inkscape:connector-curvature="0"
+         id="path21"
+         d="m -259.18627,274.57516 c 63.5635,-11.22863 116.06332,-20.52032 116.66629,-20.64819 l 1.09632,-0.2325 -60.01021,-71.38026 c -33.00559,-39.25915 -60.01018,-71.53249 -60.01018,-71.71853 0,-0.35223 61.96561,-170.992127 62.31396,-171.599207 0.11647,-0.20297 42.28595,72.60148 102.221586,176.482797 56.11284,97.25555 102.3751556,177.4431 102.8051496,178.19452 l 0.78184,1.36624 -190.7173956,-0.0246 -190.71736,-0.0245 115.57,-20.4157 z m 731.37889,-17.26291 c -29.03093,-1.86128 -45.91544,-18.39214 -50.38974,-49.33422 -1.19021,-8.2311 -1.19476,-8.44466 -1.31656,-61.88078 l -0.11789,-51.717227 h 12.84834 12.8483 l 0.10118,50.023887 c 0.0912,45.08514 0.14842,50.37131 0.57946,53.54292 1.74935,12.87168 5.23201,21.5276 11.16124,27.74067 4.74528,4.97242 10.30038,7.8839 17.99011,9.42882 3.62783,0.72884 13.94813,0.7303 17.25569,0.003 7.79588,-1.7156 14.0442,-5.10811 19.55617,-10.61799 6.28249,-6.28012 10.93015,-15.1903 13.17899,-25.26595 l 0.75793,-3.39586 0.0844,-50.44723 0.0844,-50.447217 h 13.11732 13.11735 v 79.304447 79.30444 h -12.98222 -12.98222 v -12.5824 c 0,-8.54933 -0.0937,-12.55118 -0.29222,-12.485 -0.16069,0.0536 -0.82744,1.07357 -1.48166,2.26667 -4.47373,8.15896 -11.92745,15.62029 -20.09501,20.1155 -9.79024,5.38827 -19.60858,7.30422 -33.02333,6.44412 z m 294.66636,-0.12816 c -10.24795,-0.7703 -21.03846,-4.29359 -29.85796,-9.74908 -18.58873,-11.49853 -29.58761,-30.45184 -32.80805,-56.53499 -1.11441,-9.02575 -1.24835,-21.14964 -0.3184,-28.81907 2.07786,-17.13682 8.81185,-33.95976 18.40106,-45.96982 2.45824,-3.07883 8.03495,-8.65553 11.11365,-11.11361 8.31379,-6.637877 18.03843,-11.279617 28.36334,-13.538327 6.01579,-1.31603 16.60968,-1.93394 23.00111,-1.34159 16.05576,1.48805 30.77105,9.04765 40.77267,20.945887 10.1615,12.08847 15.74681,28.98006 16.46007,49.77987 0.11179,3.25966 0.13889,8.97466 0.0603,12.7 l -0.143,6.77333 -56.23278,0.0712 -56.23278,0.0712 v 2.5094 c 0,7.63915 1.85722,16.33991 5.06795,23.74265 2.76877,6.38373 7.53485,13.35462 11.43714,16.72802 8.00131,6.91687 17.79386,11.05701 28.50936,12.05334 3.97318,0.3694 14.09889,-0.0195 18.62666,-0.7152 12.91802,-1.98524 25.19946,-7.052 35.11745,-14.48783 1.16688,-0.87486 2.28357,-1.69223 2.48152,-1.81635 0.28968,-0.18164 0.35814,2.10408 0.35081,11.71222 l -0.009,11.93792 -2.65743,1.64355 c -11.21971,6.93911 -24.07305,11.39481 -37.68211,13.06277 -4.06135,0.49775 -18.96443,0.71949 -23.82142,0.35441 z m 48.93919,-100.68528 c 0,-12.79609 -5.39245,-27.01096 -13.02337,-34.3305 -5.44587,-5.22367 -12.02921,-8.41603 -19.85552,-9.62822 -3.70264,-0.5735 -11.50631,-0.35262 -15.41004,0.43617 -8.25234,1.66748 -15.07811,5.29536 -21.03154,11.17821 -6.26561,6.19133 -10.96323,13.71122 -13.91756,22.27909 -1.06234,3.08091 -2.30488,8.13901 -2.69056,10.95257 l -0.18376,1.34056 h 43.05616 43.05619 z M 53.010852,253.20058 c 0.06587,-0.19403 19.161194,-50.3586 42.434086,-111.47682 l 42.314342,-111.124037 13.59583,-8.5e-4 13.5958,-8.4e-4 1.12805,2.89278 c 3.4472,8.84008 84.71032,219.821587 84.71032,219.931197 0,0.0722 -6.50875,0.13039 -14.46389,0.12923 l -14.46389,-0.003 -11.71222,-31.18282 -11.71222,-31.18281 -47.15885,-5.7e-4 -47.15886,-5.6e-4 -0.40982,1.05833 c -0.22538,0.58208 -5.229376,14.61335 -11.120031,31.18062 l -10.710221,30.12225 -14.494087,0.005 c -11.4727,0.004 -14.469109,-0.0686 -14.374339,-0.34784 z M 189.82928,167.38571 c 0,-0.0494 -7.88187,-21.41719 -17.51527,-47.48389 -18.02243,-48.766297 -19.03061,-51.700447 -20.45454,-59.529577 -0.66771,-3.67122 -1.00556,-3.77324 -1.40188,-0.42333 -0.2833,2.39448 -1.51167,7.75245 -2.45866,10.72445 -0.46988,1.47461 -8.58577,23.74972 -18.03533,49.500237 -9.44954,25.75052 -17.18099,46.92777 -17.18099,47.06055 0,0.13279 17.33551,0.24143 38.52334,0.24143 21.18783,0 38.52333,-0.0404 38.52333,-0.0899 z m 69.70889,82.10639 v -4.06127 l 46.98461,-64.58929 46.98461,-64.5893 -42.53961,-0.14111 -42.53961,-0.14111 -0.0739,-10.795 -0.0739,-10.794997 h 61.52781 61.5278 v 3.64606 3.646057 l -46.99,64.94153 c -25.8445,35.71785 -46.99,65.00162 -46.99,65.07506 0,0.0734 20.8915,0.13352 46.42555,0.13352 h 46.42556 v 10.86555 10.86556 h -65.33447 -65.33445 z m 344.78149,3.8731 c -0.10349,-0.10346 -0.18816,-35.91746 -0.18816,-79.58666 V 94.380023 h 12.84112 12.84111 v 16.368887 c 0,9.00289 0.10947,16.36889 0.2433,16.36889 0.13383,0 0.75881,-1.47368 1.38884,-3.27484 2.88711,-8.2536 7.89393,-15.96572 14.34443,-22.09509 5.81095,-5.521657 12.45235,-8.823637 20.28898,-10.087287 2.20134,-0.35497 4.064,-0.42274 8.46667,-0.30806 5.52924,0.14402 8.42001,0.54819 11.78278,1.64738 l 1.05833,0.34594 v 13.328937 13.32893 l -3.03389,-1.51868 c -5.3592,-2.68267 -10.64714,-3.74429 -17.00389,-3.41375 -4.13707,0.21513 -6.85252,0.74636 -10.16,1.98766 -6.80519,2.55399 -12.32518,7.06198 -16.18228,13.2155 -5.58374,8.90817 -9.56612,20.35873 -10.7407,30.88287 -0.21079,1.88864 -0.33508,17.27019 -0.38459,47.59327 l -0.0731,44.80278 H 617.1582 c -6.95771,0 -12.73506,-0.0847 -12.83852,-0.18816 z M -488.0685,252.80762 c 0,-0.1005 28.27652,-49.18632 62.83671,-109.07964 l 62.8367,-108.896937 73.22891,-61.45385 c 40.2759,-33.79961 73.33737,-61.49516 73.46992,-61.54567 0.13255,-0.0505 -0.39727,1.28299 -1.17738,2.96333 -0.78011,1.68034 -36.56244,78.4296699 -79.51629,170.55406 l -78.09789,167.498887 -56.79034,0.0712 c -31.23468,0.0392 -56.79034,-0.011 -56.79034,-0.11142 z"
+         style="fill:#0089d6;fill-opacity:1;stroke-width:0.28222221" />
+    </g>
+  </g>
+</svg>
diff --git a/managed/ui/src/components/config/ConfigProvider/images/gcp.png b/managed/ui/src/components/config/ConfigProvider/images/gcp.png
deleted file mode 100644
index 436f2afa6be9..000000000000
Binary files a/managed/ui/src/components/config/ConfigProvider/images/gcp.png and /dev/null differ
diff --git a/managed/ui/src/components/config/ConfigProvider/images/gcp.svg b/managed/ui/src/components/config/ConfigProvider/images/gcp.svg
new file mode 100644
index 000000000000..66734be8b8ae
--- /dev/null
+++ b/managed/ui/src/components/config/ConfigProvider/images/gcp.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="27" viewBox="0 0 33 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.85 7.41H21.85L24.7 4.56L24.84 3.35C23.2073 1.90896 21.2343 0.907912 19.1072 0.441432C16.98 -0.0250477 14.7691 0.0584363 12.6833 0.683998C10.5974 1.30956 8.70542 2.45655 7.18608 4.01661C5.66674 5.57668 4.57018 7.49831 4 9.6C4.3175 9.46986 4.66921 9.44876 5 9.54L10.7 8.6C10.7 8.6 10.99 8.12 11.14 8.15C12.3613 6.80867 14.0492 5.9849 15.858 5.84733C17.6669 5.70976 19.4599 6.2688 20.87 7.41H20.85Z" fill="#EA4335"/>
+<path d="M28.76 9.6C28.1049 7.18763 26.7599 5.01894 24.89 3.36L20.89 7.36C21.7236 8.04116 22.3917 8.90274 22.8438 9.87974C23.296 10.8567 23.5203 11.9237 23.5 13V13.71C23.9675 13.71 24.4304 13.8021 24.8624 13.981C25.2943 14.1599 25.6867 14.4221 26.0173 14.7527C26.3479 15.0833 26.6101 15.4757 26.789 15.9076C26.9679 16.3396 27.06 16.8025 27.06 17.27C27.06 17.7375 26.9679 18.2004 26.789 18.6324C26.6101 19.0643 26.3479 19.4567 26.0173 19.7873C25.6867 20.1179 25.2943 20.3801 24.8624 20.559C24.4304 20.7379 23.9675 20.83 23.5 20.83H16.38L15.67 21.55V25.82L16.38 26.53H23.5C25.4882 26.5455 27.4287 25.9206 29.0342 24.7478C30.6398 23.575 31.8252 21.9165 32.4151 20.0177C33.005 18.119 32.9681 16.0807 32.3099 14.2046C31.6516 12.3284 30.407 10.7139 28.76 9.6V9.6Z" fill="#4285F4"/>
+<path d="M9.25 26.49H16.37V20.79H9.25C8.74273 20.7899 8.24141 20.6808 7.78 20.47L6.78 20.78L3.91 23.63L3.66 24.63C5.26943 25.8453 7.23328 26.4988 9.25 26.49V26.49Z" fill="#34A853"/>
+<path d="M9.25 8C7.32082 8.01152 5.44341 8.6253 3.87999 9.7556C2.31658 10.8859 1.14522 12.4763 0.529536 14.3046C-0.0861487 16.1329 -0.115418 18.1079 0.445817 19.9537C1.00705 21.7995 2.13076 23.4239 3.66 24.6L7.79 20.47C7.26516 20.2329 6.80569 19.872 6.451 19.4182C6.09631 18.9645 5.857 18.4315 5.7536 17.8649C5.65019 17.2984 5.68579 16.7152 5.85732 16.1654C6.02886 15.6156 6.33121 15.1157 6.73844 14.7084C7.14568 14.3012 7.64563 13.9989 8.19541 13.8273C8.74519 13.6558 9.32837 13.6202 9.89493 13.7236C10.4615 13.827 10.9945 14.0663 11.4482 14.421C11.902 14.7757 12.2629 15.2352 12.5 15.76L16.63 11.63C15.7632 10.4968 14.6459 9.5794 13.3656 8.94967C12.0854 8.31994 10.6768 7.99491 9.25 8V8Z" fill="#FBBC05"/>
+</svg>
diff --git a/managed/ui/src/components/config/ConfigProvider/images/gke.png b/managed/ui/src/components/config/ConfigProvider/images/gke.png
deleted file mode 100644
index 0e434e31a09f..000000000000
Binary files a/managed/ui/src/components/config/ConfigProvider/images/gke.png and /dev/null differ
diff --git a/managed/ui/src/components/config/Security/SecurityConfiguration.js b/managed/ui/src/components/config/Security/SecurityConfiguration.js
index 9128b3260e1c..5ef0a766ccc7 100644
--- a/managed/ui/src/components/config/Security/SecurityConfiguration.js
+++ b/managed/ui/src/components/config/Security/SecurityConfiguration.js
@@ -5,17 +5,19 @@ import { Tab } from 'react-bootstrap';
 import { YBTabsPanel } from '../../panels';
 import KeyManagementConfigurationContainer from './KeyManagementConfigurationContainer';
 import { CertificatesContainer } from './certificates';
+import encryptionTransitIcon from './images/encryption-transit-icon.png';
+import encryptionRestIcon from './images/encryption-rest-icon.png';
 
 const EncryptionAtRestTabHeader = (
-  <div className="on-premise">
-    <i className="fa fa-lock" />Encryption <br /> At Rest
-  </div>
+  <span>
+    <img src={encryptionRestIcon} alt="Encryption at Rest" className="encryption-rest-icon"/> Encryption At Rest
+  </span>
 );
 
 const CertificatesTabHeader = (
-  <div className="on-premise">
-    <i className="fa fa-chain"/>Encryption <br /> In Transit
-  </div>
+  <span>
+    <img src={encryptionTransitIcon} alt="Encryption in Transit"  className="encryption-transit-icon"/> Encryption In Transit
+  </span>
 );
 
 const TAB_AT_REST = 'encryption-at-rest';
diff --git a/managed/ui/src/components/config/Security/images/encryption-rest-icon.png b/managed/ui/src/components/config/Security/images/encryption-rest-icon.png
new file mode 100644
index 000000000000..3e36d3391950
Binary files /dev/null and b/managed/ui/src/components/config/Security/images/encryption-rest-icon.png differ
diff --git a/managed/ui/src/components/config/Security/images/encryption-transit-icon.png b/managed/ui/src/components/config/Security/images/encryption-transit-icon.png
new file mode 100644
index 000000000000..6aa86f57b339
Binary files /dev/null and b/managed/ui/src/components/config/Security/images/encryption-transit-icon.png differ
diff --git a/managed/ui/src/components/config/Storage/StorageConfiguration.js b/managed/ui/src/components/config/Storage/StorageConfiguration.js
index d679969de32d..b89a3d92010d 100644
--- a/managed/ui/src/components/config/Storage/StorageConfiguration.js
+++ b/managed/ui/src/components/config/Storage/StorageConfiguration.js
@@ -15,6 +15,8 @@ import YBInfoTip from '../../common/descriptors/YBInfoTip';
 
 import awss3Logo from './images/aws-s3.png';
 import azureLogo from './images/azure_logo.svg';
+import gcsLogo from './images/gcs-logo.png';
+import nfsIcon from './images/nfs.svg';
 import {
   isNonEmptyObject,
   isEmptyObject,
@@ -69,20 +71,20 @@ const storageConfigTypes = {
 const getTabTitle = (configName) => {
   switch (configName) {
     case 'S3':
-      return <img src={awss3Logo} alt="AWS S3" className="aws-logo" />;
+      return <span><img src={awss3Logo} alt="AWS S3" className="s3-logo" /> Amazon S3</span>;
     case 'GCS':
       return (
-        <h3>
-          <i className="fa fa-database"></i>GCS
-        </h3>
+        <span>
+          <img src={gcsLogo} alt="Google Cloud Storage" className="gcs-logo"/> Google Cloud Storage
+        </span>
       );
     case 'AZ':
-      return <img src={azureLogo} alt="Azure" className="azure-logo" />;
+      return <span><img src={azureLogo} alt="Azure" className="azure-logo" /> Azure Storage</span>;
     default:
       return (
-        <h3>
-          <i className="fa fa-database"></i>NFS
-        </h3>
+        <span>
+          <img src={nfsIcon} alt="NFS" className="nfs-icon" /> Network File System
+        </span>
       );
   }
 };
diff --git a/managed/ui/src/components/config/Storage/images/gcs-logo.png b/managed/ui/src/components/config/Storage/images/gcs-logo.png
new file mode 100644
index 000000000000..b3957dfd55ce
Binary files /dev/null and b/managed/ui/src/components/config/Storage/images/gcs-logo.png differ
diff --git a/managed/ui/src/components/config/Storage/images/nfs.svg b/managed/ui/src/components/config/Storage/images/nfs.svg
new file mode 100644
index 000000000000..cb3d76f8a9ab
--- /dev/null
+++ b/managed/ui/src/components/config/Storage/images/nfs.svg
@@ -0,0 +1,13 @@
+<svg width="89" height="86" viewBox="0 0 89 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M50.8821 25.0095C48.6895 11.9285 43.5181 2.7439 37.5 2.7439C31.4819 2.7439 26.3105 11.9285 24.1179 25.0095H50.8821ZM22.9839 39.072C22.9839 42.324 23.1653 45.4441 23.4829 48.447H51.502C51.8196 45.4441 52.001 42.324 52.001 39.072C52.001 35.8201 51.8196 32.7 51.502 29.697H23.4829C23.1653 32.7 22.9839 35.8201 22.9839 39.072ZM72.0816 25.0095C67.757 15.0632 59.002 7.37281 48.1905 4.26734C51.88 9.21851 54.4204 16.6746 55.751 25.0095H72.0816ZM26.7944 4.26734C15.998 7.37281 7.22782 15.0632 2.91835 25.0095H19.249C20.5645 16.6746 23.1048 9.21851 26.7944 4.26734ZM73.6996 29.697H56.3558C56.6734 32.7732 56.8548 35.9226 56.8548 39.072C56.8548 42.2214 56.6734 45.3709 56.3558 48.447H73.6845C74.5161 45.4441 74.9849 42.324 74.9849 39.072C74.9849 35.8201 74.5161 32.7 73.6996 29.697ZM18.1452 39.072C18.1452 35.9226 18.3266 32.7732 18.6442 29.697H1.3004C0.483871 32.7 0 35.8201 0 39.072C0 42.324 0.483871 45.4441 1.3004 48.447H18.629C18.3266 45.3709 18.1452 42.2214 18.1452 39.072ZM24.1179 53.1345C26.3105 66.2156 31.4819 75.4001 37.5 75.4001C43.5181 75.4001 48.6895 66.2156 50.8821 53.1345H24.1179ZM48.2056 73.8767C59.002 70.7712 67.7722 63.0808 72.0968 53.1345H55.7661C54.4355 61.4695 51.8952 68.9255 48.2056 73.8767ZM2.91835 53.1345C7.24294 63.0808 15.998 70.7712 26.8095 73.8767C23.12 68.9255 20.5796 61.4695 19.249 53.1345H2.91835Z" fill="#004B8D" fill-opacity="0.6"/>
+</g>
+<path d="M83 46H59L51 38H31C27.6862 38 25 40.6862 25 44V80C25 83.3138 27.6862 86 31 86H83C86.3138 86 89 83.3138 89 80V52C89 48.6862 86.3138 46 83 46Z" fill="#FFB032"/>
+<rect x="31" y="49" width="52" height="7" rx="3" fill="white"/>
+<rect x="25" y="52" width="64" height="34" rx="6" fill="#F8CF2E"/>
+<defs>
+<clipPath id="clip0">
+<rect width="75" height="75" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/managed/ui/src/components/panels/YBTabsPanel/YBTabsWithLinksPanel.js b/managed/ui/src/components/panels/YBTabsPanel/YBTabsWithLinksPanel.js
index 113519cfc379..4398e3059f36 100644
--- a/managed/ui/src/components/panels/YBTabsPanel/YBTabsWithLinksPanel.js
+++ b/managed/ui/src/components/panels/YBTabsPanel/YBTabsWithLinksPanel.js
@@ -41,9 +41,10 @@ class YBTabsWithLinksPanel extends Component {
   };
 
   render() {
-    const { activeTab, defaultTab } = this.props;
+    const { activeTab, defaultTab, children } = this.props;
     const activeTabKey = activeTab || this.queryTabHandler() || defaultTab;
-    const links = this.props.children.map((item) => (
+    const childTabs = Array.isArray(children) ? children : [children];
+    const links = childTabs.map((item) => (
       <NavItem
         key={item.props.eventKey}
         eventKey={item.props.eventKey}
@@ -69,7 +70,7 @@ class YBTabsWithLinksPanel extends Component {
           <Nav bsStyle="tabs" className="nav nav-tabs" role="tablist">
             {links}
           </Nav>
-          <Tab.Content animation>{this.props.children}</Tab.Content>
+          <Tab.Content animation>{children}</Tab.Content>
         </div>
       </Tab.Container>
     );
diff --git a/managed/ui/src/components/universes/UniverseConnectModal/UniverseConnectModal.scss b/managed/ui/src/components/universes/UniverseConnectModal/UniverseConnectModal.scss
index 920a5975a29b..f4022fbe6739 100644
--- a/managed/ui/src/components/universes/UniverseConnectModal/UniverseConnectModal.scss
+++ b/managed/ui/src/components/universes/UniverseConnectModal/UniverseConnectModal.scss
@@ -50,7 +50,6 @@
       font-size: 14px;
       border-radius: 0;
       padding: 16px 12px 20px !important;
-      color: $YB_ORANGE;
       background-color: transparent;
       &.active {
         border: none;
diff --git a/managed/ui/src/pages/Administration.scss b/managed/ui/src/pages/Administration.scss
index 4ad3397da2a1..520b637104f5 100644
--- a/managed/ui/src/pages/Administration.scss
+++ b/managed/ui/src/pages/Administration.scss
@@ -1,10 +1,7 @@
 @import '../components/universes/UniverseDetail/UniverseDetail';
 
-#administration-main-tabs > .tab-content {
-  padding: 0;
-}
-
-// re-use tabs style from universe details
-#administration-ha-subtab {
-  @extend .universe-detail;
+#administration-ha-subtab {  
+  .tab-content {
+    padding-top: 20px;
+  }
 }
diff --git a/managed/ui/src/pages/Administration.tsx b/managed/ui/src/pages/Administration.tsx
index e8771ea291d0..42ca08e1cb3c 100644
--- a/managed/ui/src/pages/Administration.tsx
+++ b/managed/ui/src/pages/Administration.tsx
@@ -3,7 +3,7 @@ import { Tab } from 'react-bootstrap';
 import { browserHistory } from 'react-router';
 import { Selector, useSelector } from 'react-redux';
 import { RouteComponentProps } from 'react-router-dom';
-import { YBTabsPanel } from '../components/panels';
+import { YBTabsPanel, YBTabsWithLinksPanel } from '../components/panels';
 import { showOrRedirect } from '../utils/LayoutUtils';
 import { HAInstances, HAReplication } from '../components/ha';
 import './Administration.scss';
@@ -49,13 +49,14 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
   }, [currentCustomer, params.tab, params.section]);
 
   return (
-    <div className="dashboard-container">
+    <div>
       <h2 className="content-title">Platform Configuration</h2>
-      <YBTabsPanel
+      <YBTabsWithLinksPanel
         defaultTab={AdministrationTabs.HA}
         activeTab={params.tab}
         routePrefix="/admin/"
         id="administration-main-tabs"
+        className="universe-detail data-center-config-tab"
       >
         <Tab eventKey={AdministrationTabs.HA} title="High Availability">
           <YBTabsPanel
@@ -63,24 +64,25 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
             activeTab={params.section}
             routePrefix={`/admin/${AdministrationTabs.HA}/`}
             id="administration-ha-subtab"
+            className="config-tabs"
           >
             <Tab
               eventKey={HighAvailabilityTabs.Replication}
-              title="Replication Configuration"
+              title={<span><i className="fa fa-clone tab-logo" aria-hidden="true"></i> Replication Configuration</span>}
               unmountOnExit
             >
               <HAReplication />
             </Tab>
             <Tab
               eventKey={HighAvailabilityTabs.Instances}
-              title="Instance Configuration"
+              title={<span><i className="fa fa-codepen tab-logo" aria-hidden="true"></i> Instance Configuration</span>}
               unmountOnExit
             >
               <HAInstances />
             </Tab>
           </YBTabsPanel>
         </Tab>
-      </YBTabsPanel>
+      </YBTabsWithLinksPanel>
     </div>
   );
 };