diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index 1eafde6d1e..c3819dfe09 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/src/renderer/components/+entity-settings/entity-settings.tsx
@@ -20,6 +20,7 @@
  */
 
 import styles from "./entity-settings.module.css";
+import tabStyles from "../layout/settings-layout.module.css";
 
 import React from "react";
 import { observable, makeObservable } from "mobx";
@@ -35,6 +36,7 @@ import { groupBy } from "lodash";
 import { SettingLayout } from "../layout/setting-layout";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import logger from "../../../common/logger";
+import { cssNames } from "../../utils";
 
 interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 }
@@ -106,11 +108,11 @@ export class EntitySettings extends React.Component<Props> {
             {this.entity.metadata.name}
           </div>
         </div>
-        <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+        <Tabs className={cssNames(tabStyles.Tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
           { groups.map((group, groupIndex) => (
             <React.Fragment key={`group-${groupIndex}`}>
               <hr/>
-              <div className="header">{group[0]}</div>
+              <div className={tabStyles.header}>{group[0]}</div>
               { group[1].map((setting, index) => (
                 <Tab
                   key={index}
@@ -137,9 +139,7 @@ export class EntitySettings extends React.Component<Props> {
 
 
     return (
-      <SettingLayout
-        navigation={this.renderNavigation()}
-      >
+      <SettingLayout navigation={this.renderNavigation()}>
         {
           activeSetting && (
             <section>
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 472a0055ff..38545b0c5c 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -88,10 +88,7 @@ export class Preferences extends React.Component {
 
   render() {
     return (
-      <SettingLayout
-        navigation={this.renderNavigation()}
-        className="Preferences"
-      >
+      <SettingLayout navigation={this.renderNavigation()}>
         <Switch>
           <Route path={appURL()} component={Application}/>
           <Route path={proxyURL()} component={LensProxy}/>
diff --git a/src/renderer/components/layout/settings-layout.module.css b/src/renderer/components/layout/settings-layout.module.css
index 7f4aa964c3..43c0fb3226 100644
--- a/src/renderer/components/layout/settings-layout.module.css
+++ b/src/renderer/components/layout/settings-layout.module.css
@@ -38,6 +38,14 @@
   }
 
   section {
+    &:not(:first-of-type) {
+      margin-top: 40px;
+
+      &:global(.small) {
+        margin-top: 20px;
+      }
+    }
+
     h2 {
       font-size: 20px;
       line-height: 20px;
@@ -51,10 +59,22 @@
     }
 
     hr {
+      margin-top: 40px;
       height: 1px;
       border-top: thin solid var(--hrColor);
+
+      &:global(.small) {
+        margin-top: 20px;
+      }
     }
   }
+
+  :global(.hint) {
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    display: block;
+  }
 }
 
 .sidebarRegion {
@@ -173,8 +193,8 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
-    &::after {
-      content: none;
+    &:global::after {
+      content: none!important;
     }
 
     &:hover {