diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index b9392e2b95..de2f71b681 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -343,7 +343,7 @@ export class AddCluster extends React.Component {
 
     return (
       <DropFileInput onDropFiles={this.onDropKubeConfig}>
-        <PageLayout className="AddClusters" header={<><Icon svg="logo-lens" big /> <h2>Add Clusters</h2></>} showOnTop={true}>
+        <PageLayout className="AddClusters" showOnTop={true}>
           <h2>Add Clusters from Kubeconfig</h2>
           {this.renderInfo()}
           {this.renderKubeConfigSource()}
diff --git a/src/renderer/components/+cluster-settings/cluster-settings.scss b/src/renderer/components/+cluster-settings/cluster-settings.scss
index dd1cd37f60..8856581b03 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.scss
+++ b/src/renderer/components/+cluster-settings/cluster-settings.scss
@@ -1,9 +1,6 @@
 .ClusterSettings {
   $spacing: $padding * 3;
 
-  > .content-wrapper {
-    --flex-gap: #{$spacing};
-  }
 
   // TODO: move sub-component styles to separate files
   .admin-note {
@@ -20,32 +17,7 @@
     margin-top: $margin * 2;
   }
 
-  .status-table {
-    margin: $spacing 0;
-
-    .Table {
-      border: 1px solid var(--drawerSubtitleBackground);
-      border-radius: $radius;
-
-      .TableRow {
-        &:not(:last-of-type) {
-          border-bottom: 1px solid var(--drawerSubtitleBackground);
-        }
-
-        .value {
-          flex-grow: 2;
-          word-break: break-word;
-          color: var(--textColorSecondary);
-        }
-
-        .link {
-          @include pseudo-link;
-        }
-      }
-    }
-  }
-
   .Input, .Select {
     margin-top: $padding;
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/+cluster-settings/cluster-settings.tsx b/src/renderer/components/+cluster-settings/cluster-settings.tsx
index 0334f997f7..5a055b56b1 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.tsx
+++ b/src/renderer/components/+cluster-settings/cluster-settings.tsx
@@ -1,11 +1,9 @@
 import "./cluster-settings.scss";
 
 import React from "react";
-import { reaction } from "mobx";
+import { observable, reaction } from "mobx";
 import { RouteComponentProps } from "react-router";
 import { observer, disposeOnUnmount } from "mobx-react";
-import { Status } from "./status";
-import { General } from "./general";
 import { Cluster } from "../../../main/cluster";
 import { IClusterSettingsRouteParams } from "./cluster-settings.route";
 import { clusterStore } from "../../../common/cluster-store";
@@ -13,12 +11,26 @@ import { PageLayout } from "../layout/page-layout";
 import { requestMain } from "../../../common/ipc";
 import { clusterActivateHandler, clusterRefreshHandler } from "../../../common/cluster-ipc";
 import { navigation } from "../../navigation";
+import { Tabs, Tab } from "../tabs";
+import { ClusterProxySetting } from "./components/cluster-proxy-setting";
+import { ClusterNameSetting } from "./components/cluster-name-setting";
+import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
+import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces";
+import { ClusterMetricsSetting } from "./components/cluster-metrics-setting";
+import { ShowMetricsSetting } from "./components/show-metrics";
+import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
+import { ClusterKubeconfig } from "./components/cluster-kubeconfig";
 
 interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
 }
 
+
+const clusterPages = ["General", "Proxy", "Terminal", "Namespaces", "Metrics"];
+
 @observer
 export class ClusterSettings extends React.Component<Props> {
+  @observable activeTab = "General";
+
   get clusterId() {
     return this.props.match.params.clusterId;
   }
@@ -49,6 +61,24 @@ export class ClusterSettings extends React.Component<Props> {
     }
   };
 
+  onTabChange = (tabId: string) => {
+    this.activeTab = tabId;
+  };
+
+  renderNavigation() {
+    return (
+      <>
+        <h2>{this.cluster.name}</h2>
+        <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+          <div className="header">Cluster Settings</div>
+          { clusterPages.map((page) => {
+            return <Tab key={page} value={page} label={page} data-testid={`${page}-tab`} />;
+          })}
+        </Tabs>
+      </>
+    );
+  }
+
   render() {
     const cluster = this.cluster;
 
@@ -60,9 +90,70 @@ export class ClusterSettings extends React.Component<Props> {
     );
 
     return (
-      <PageLayout className="ClusterSettings" header={header} showOnTop={true}>
-        <Status cluster={cluster}></Status>
-        <General cluster={cluster}></General>
+      <PageLayout
+        className="ClusterSettings"
+        navigation={this.renderNavigation()}
+        showOnTop={true}
+        contentGaps={false}
+      >
+        {this.activeTab == "General" && (
+          <section>
+            <h2 data-testid="general-header">General</h2>
+            <section>
+              <section>
+                <ClusterNameSetting cluster={cluster} />
+              </section>
+              <section>
+                <ClusterKubeconfig cluster={cluster} />
+              </section>
+            </section>
+          </section>
+        )}
+
+        {this.activeTab == "Proxy" && (
+          <section>
+            <h2 data-testid="proxy-header">Proxy</h2>
+            <section>
+              <ClusterProxySetting cluster={cluster} />
+            </section>
+          </section>
+        )}
+
+        {this.activeTab == "Terminal" && (
+          <section>
+            <h2 data-testid="terminal-header">Terminal</h2>
+            <section>
+              <ClusterHomeDirSetting cluster={cluster} />
+            </section>
+          </section>
+        )}
+
+        {this.activeTab == "Namespaces" && (
+          <section>
+            <h2 data-testid="namespaces-header">Namespaces</h2>
+            <section>
+              <ClusterAccessibleNamespaces cluster={cluster} />
+            </section>
+          </section>
+        )}
+
+        {this.activeTab == "Metrics" && (
+          <section>
+            <h2 data-testid="metrics-header">Metrics</h2>
+            <section>
+              <section>
+                <ClusterPrometheusSetting cluster={cluster} />
+              </section>
+              <section>
+                <ClusterMetricsSetting cluster={cluster}/>
+              </section>
+              <section>
+                <ShowMetricsSetting cluster={cluster}/>
+              </section>
+            </section>
+          </section>
+        )}
+
       </PageLayout>
     );
   }
diff --git a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
index d1ad7dbeef..0fb3e7e08f 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
@@ -17,7 +17,6 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Accessible Namespaces" id="accessible-namespaces" />
-        <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.</p>
         <EditableList
           placeholder="Add new namespace..."
           add={(newNamespace) => {
@@ -30,6 +29,9 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
           }}
         />
+        <small className="hint">
+        This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.
+        </small>
       </>
     );
   }
diff --git a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
index 10aabf3ff7..e5dfdad130 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx
@@ -33,7 +33,6 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Working Directory"/>
-        <p>Terminal working directory.</p>
         <Input
           theme="round-black"
           value={this.directory}
diff --git a/src/renderer/components/+cluster-settings/components/cluster-kubeconfig.tsx b/src/renderer/components/+cluster-settings/components/cluster-kubeconfig.tsx
new file mode 100644
index 0000000000..f1a475c325
--- /dev/null
+++ b/src/renderer/components/+cluster-settings/components/cluster-kubeconfig.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { observer } from "mobx-react";
+import { SubTitle } from "../../layout/sub-title";
+import { autobind } from "../../../../common/utils";
+import { shell } from "electron";
+
+interface Props {
+  cluster: Cluster;
+}
+
+@observer
+export class ClusterKubeconfig extends React.Component<Props> {
+
+  @autobind()
+  openKubeconfig() {
+    const { cluster } = this.props;
+
+    shell.showItemInFolder(cluster.kubeConfigPath);
+  }
+
+  render() {
+    return (
+      <>
+        <SubTitle title="Kubeconfig" />
+
+        <span>
+          <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>
+        </span>
+
+      </>
+    );
+  }
+}
diff --git a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
index 9d953ef9ca..46f80597df 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx
@@ -34,7 +34,6 @@ export class ClusterNameSetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Cluster Name" />
-        <p>Define cluster name.</p>
         <Input
           theme="round-black"
           validators={isRequired}
diff --git a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
index 937f2feed4..f42ecbd321 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
@@ -81,13 +81,12 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="Prometheus"/>
+        <SubTitle title="Prometheus installation method"/>
         <p>
           Use pre-installed Prometheus service for metrics. Please refer to the{" "}
           <a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md" target="_blank" rel="noreferrer">guide</a>{" "}
           for possible configuration changes.
         </p>
-        <p>Prometheus installation method.</p>
         <Select
           value={this.provider}
           onChange={({value}) => {
diff --git a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
index eb122ac444..1fe5c2d6af 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx
@@ -33,7 +33,6 @@ export class ClusterProxySetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="HTTP Proxy" />
-        <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
         <Input
           theme="round-black"
           value={this.proxy}
@@ -42,6 +41,9 @@ export class ClusterProxySetting extends React.Component<Props> {
           placeholder="http://<address>:<port>"
           validators={this.proxy ? InputValidators.isUrl : undefined}
         />
+        <small className="hint">
+          HTTP Proxy server. Used for communicating with Kubernetes API.
+        </small>
       </>
     );
   }
diff --git a/src/renderer/components/+cluster-settings/status.tsx b/src/renderer/components/+cluster-settings/status.tsx
deleted file mode 100644
index d43cfe5c35..0000000000
--- a/src/renderer/components/+cluster-settings/status.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { Cluster } from "../../../main/cluster";
-import { SubTitle } from "../layout/sub-title";
-import { Table, TableCell, TableRow } from "../table";
-import { autobind } from "../../utils";
-import { shell } from "electron";
-
-interface Props {
-  cluster: Cluster;
-}
-
-export class Status extends React.Component<Props> {
-
-  @autobind()
-  openKubeconfig() {
-    const { cluster } = this.props;
-
-    shell.showItemInFolder(cluster.kubeConfigPath);
-  }
-
-  renderStatusRows() {
-    const { cluster } = this.props;
-    const rows = [
-      ["Online Status", cluster.online ? "online" : `offline (${cluster.failureReason || "unknown reason"})`],
-      ["Distribution", cluster.metadata.distribution ? String(cluster.metadata.distribution) : "N/A"],
-      ["Kernel Version", cluster.metadata.version ? String(cluster.metadata.version) : "N/A"],
-      ["API Address", cluster.apiUrl || "N/A"],
-      ["Nodes Count", cluster.metadata.nodes ? String(cluster.metadata.nodes) : "N/A"]
-    ];
-
-    return (
-      <Table scrollable={false}>
-        {rows.map(([name, value]) => {
-          return (
-            <TableRow key={name}>
-              <TableCell>{name}</TableCell>
-              <TableCell className="value">{value}</TableCell>
-            </TableRow>
-          );
-        })}
-        <TableRow>
-          <TableCell>Kubeconfig</TableCell>
-          <TableCell className="link value" onClick={this.openKubeconfig}>{cluster.kubeConfigPath}</TableCell>
-        </TableRow>
-      </Table>
-    );
-  }
-
-  render() {
-    return <div>
-      <h2>Status</h2>
-      <SubTitle title="Cluster Status"/>
-      <p>
-        Cluster status information including: detected distribution, kernel version, and online status.
-      </p>
-      <div className="status-table">
-        {this.renderStatusRows()}
-      </div>
-    </div>;
-  }
-}
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index c14a6988b6..9b69689f76 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -482,12 +482,11 @@ export class Extensions extends React.Component {
   }
 
   render() {
-    const topHeader = <h2>Manage Lens Extensions</h2>;
     const { installPath } = this;
 
     return (
       <DropFileInput onDropFiles={this.installOnDrop}>
-        <PageLayout showOnTop className="Extensions" header={topHeader} contentGaps={false}>
+        <PageLayout showOnTop className="Extensions" contentGaps={false}>
           <h2>Lens Extensions</h2>
           <div>
             Add new features and functionality via Lens Extensions.
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index a2a2ea1080..d598197871 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -42,6 +42,16 @@
       width: 218px;
       padding: 60px 10px 60px 20px;
 
+      h2 {
+        margin-bottom: 10px;
+        font-size: 18px;
+        padding: 6px 10px;
+        overflow-wrap: anywhere;
+        color: var(--textColorAccent);
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+
       .Tabs {
         .header {
           padding: 6px 10px;
diff --git a/src/renderer/components/layout/page-layout.tsx b/src/renderer/components/layout/page-layout.tsx
index bbec97acdd..8a9a9e6537 100644
--- a/src/renderer/components/layout/page-layout.tsx
+++ b/src/renderer/components/layout/page-layout.tsx
@@ -8,8 +8,6 @@ import { Icon } from "../icon";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
-  header?: React.ReactNode;
-  headerClass?: IClassName;
   contentClass?: IClassName;
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
@@ -57,7 +55,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
 
   render() {
     const {
-      contentClass, headerClass, provideBackButtonNavigation,
+      contentClass, provideBackButtonNavigation,
       contentGaps, showOnTop, navigation, children, ...elemProps
     } = this.props;
     const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);