diff --git a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
index 8b3670222e..dfca026c18 100644
--- a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
@@ -332,9 +332,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -369,9 +367,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -933,9 +929,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -970,9 +964,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -1545,9 +1537,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -1582,9 +1572,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -2268,9 +2256,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -2305,9 +2291,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -2888,9 +2872,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -2925,9 +2907,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -3611,9 +3591,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -3648,9 +3626,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -4516,9 +4492,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -4553,9 +4527,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -5239,9 +5211,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -5276,9 +5246,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -6144,9 +6112,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -6181,9 +6147,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -6868,9 +6832,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -6905,9 +6867,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -7488,9 +7448,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -7525,9 +7483,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
@@ -8097,9 +8053,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </section>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="kube-sync"
                 >
@@ -8134,9 +8088,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                     </div>
                   </div>
                 </section>
-                <hr
-                  class="horizontalLine"
-                />
+                <hr />
                 <section
                   id="helm"
                 >
diff --git a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
similarity index 82%
rename from src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts
rename to src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
index 23b1f53621..293f3f4a2f 100644
--- a/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/application/application-preference-page.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { ApplicationPreferencePage } from "./application-preference-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
+import React from "react";
 
 const applicationPreferencePageInjectable = getInjectable({
   id: "application-preference-page",
@@ -16,7 +16,7 @@ const applicationPreferencePageInjectable = getInjectable({
     parentId: "application-tab",
     orderNumber: 0,
     Component: ApplicationPreferencePage,
-    childrenSeparator: HorizontalLine,
+    childrenSeparator: () => <hr />,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
index a31f3bbce0..c130af6fd7 100644
--- a/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/editor/editor-preference-page.injectable.ts
@@ -5,7 +5,6 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { EditorPreferencePage } from "./editor-preference-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const editorPreferencePageInjectable = getInjectable({
   id: "editor-preference-page",
@@ -16,7 +15,6 @@ const editorPreferencePageInjectable = getInjectable({
     parentId: "editor-tab",
     orderNumber: 0,
     Component: EditorPreferencePage,
-    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
similarity index 82%
rename from src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts
rename to src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
index 04e9e1b51c..220b76e407 100644
--- a/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/kubernetes/kubernetes-preference-page.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { KubernetesPage } from "./kubernetes-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
+import React from "react";
 
 const kubernetesPreferencePageInjectable = getInjectable({
   id: "kubernetes-preference-page",
@@ -16,7 +16,7 @@ const kubernetesPreferencePageInjectable = getInjectable({
     parentId: "kubernetes-tab",
     orderNumber: 0,
     Component: KubernetesPage,
-    childrenSeparator: HorizontalLine,
+    childrenSeparator: () => <hr />,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/proxy/allow-untrusted-certificates/allow-untrusted-certificates.tsx b/src/features/preferences/renderer/preference-items/proxy/allow-untrusted-certificates/allow-untrusted-certificates.tsx
index ce5ff14bf1..bb1abd9a57 100644
--- a/src/features/preferences/renderer/preference-items/proxy/allow-untrusted-certificates/allow-untrusted-certificates.tsx
+++ b/src/features/preferences/renderer/preference-items/proxy/allow-untrusted-certificates/allow-untrusted-certificates.tsx
@@ -15,7 +15,7 @@ interface Dependencies {
 }
 
 const NonInjectedAllowUntrustedCertificates = observer(({ userStore }: Dependencies) => (
-  <div>
+  <section className="small">
     <SubTitle title="Certificate Trust" />
     <Switch
       checked={userStore.allowUntrustedCAs}
@@ -30,7 +30,7 @@ const NonInjectedAllowUntrustedCertificates = observer(({ userStore }: Dependenc
       validations. Needed with some corporate proxies that do certificate
       re-writing. Does not affect cluster communications!
     </small>
-  </div>
+  </section>
 ));
 
 export const AllowUntrustedCertificates = withInjectables<Dependencies>(
diff --git a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
similarity index 82%
rename from src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts
rename to src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
index 2bf606e19e..175aa181ac 100644
--- a/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/proxy/proxy-preference-page.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { ProxyPreferencePage } from "./proxy-preference-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
+import React from "react";
 
 const proxyPreferencePageInjectable = getInjectable({
   id: "proxy-preference-page",
@@ -16,7 +16,7 @@ const proxyPreferencePageInjectable = getInjectable({
     parentId: "proxy-tab",
     orderNumber: 0,
     Component: ProxyPreferencePage,
-    childrenSeparator: HorizontalLine,
+    childrenSeparator: () => <hr className="small" />,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts b/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
similarity index 82%
rename from src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts
rename to src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
index f164454ec4..3cb2775896 100644
--- a/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/telemetry/telemetry-preference-page.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { TelemetryPage } from "./telemetry-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
+import React from "react";
 
 const telemetryPreferencePageInjectable = getInjectable({
   id: "telemetry-preference-page",
@@ -16,7 +16,7 @@ const telemetryPreferencePageInjectable = getInjectable({
     parentId: "telemetry-tab",
     orderNumber: 0,
     Component: TelemetryPage,
-    childrenSeparator: HorizontalLine,
+    childrenSeparator: () => <hr className="small" />,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/terminal/copy-paste-from-terminal/copy-paste-from-terminal.tsx b/src/features/preferences/renderer/preference-items/terminal/copy-paste-from-terminal/copy-paste-from-terminal.tsx
index 50a63d2c66..6fd65ccbbd 100644
--- a/src/features/preferences/renderer/preference-items/terminal/copy-paste-from-terminal/copy-paste-from-terminal.tsx
+++ b/src/features/preferences/renderer/preference-items/terminal/copy-paste-from-terminal/copy-paste-from-terminal.tsx
@@ -18,7 +18,7 @@ const NonInjectedCopyPasteFromTerminal = observer(
   ({ userStore }: Dependencies) => {
 
     return (
-      <div>
+      <section id="terminalSelection">
         <SubTitle title="Terminal copy & paste" />
         <Switch
           checked={userStore.terminalCopyOnSelect}
@@ -26,7 +26,7 @@ const NonInjectedCopyPasteFromTerminal = observer(
         >
           Copy on select and paste on right-click
         </Switch>
-      </div>
+      </section>
     );
   },
 );
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family-preference-item.injectable.ts
index 7d016f8603..2bd43d2471 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family-preference-item.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-font-family/terminal-font-family-preference-item.injectable.ts
@@ -13,7 +13,7 @@ const terminalFontFamilyPreferenceItemInjectable = getInjectable({
     kind: "item" as const,
     id: "terminal-font-family-preference-item",
     parentId: "terminal-page",
-    orderNumber: 40,
+    orderNumber: 50,
     Component: TerminalFontFamily,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size-preference-item.injectable.ts
index cb72fa8b55..644151e32e 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size-preference-item.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size-preference-item.injectable.ts
@@ -13,7 +13,7 @@ const terminalFontSizePreferenceItemInjectable = getInjectable({
     kind: "item" as const,
     id: "terminal-font-size-preference-item",
     parentId: "terminal-page",
-    orderNumber: 30,
+    orderNumber: 40,
     Component: TerminalFontSize,
   }),
 
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size.tsx
index 8fb1cfa63b..bf11285509 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size.tsx
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-font-size/terminal-font-size.tsx
@@ -18,7 +18,7 @@ const NonInjectedTerminalFontSize = observer(
   ({ userStore }: Dependencies) => {
 
     return (
-      <div>
+      <section>
         <SubTitle title="Font size" />
         <Input
           theme="round-black"
@@ -28,7 +28,7 @@ const NonInjectedTerminalFontSize = observer(
           defaultValue={userStore.terminalConfig.fontSize.toString()}
           onChange={(value) => userStore.terminalConfig.fontSize = Number(value)}
         />
-      </div>
+      </section>
     );
   },
 );
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.ts b/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
similarity index 82%
rename from src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.ts
rename to src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
index 93c9b3892e..5079b313f1 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-page-preference-item.injectable.tsx
@@ -5,7 +5,6 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceItemInjectionToken } from "../preference-item-injection-token";
 import { TerminalPage } from "./terminal-page";
-import { HorizontalLine } from "../../../../../renderer/components/+preferences/horizontal-line/horizontal-line";
 
 const terminalPagePreferenceItemInjectable = getInjectable({
   id: "terminal-preference-page",
@@ -16,7 +15,6 @@ const terminalPagePreferenceItemInjectable = getInjectable({
     parentId: "terminal-tab",
     orderNumber: 0,
     Component: TerminalPage,
-    childrenSeparator: HorizontalLine,
   }),
 
   injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-shell-path/terminal-shell-path.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-shell-path/terminal-shell-path.tsx
index df8529c994..76c9ed9338 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-shell-path/terminal-shell-path.tsx
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-shell-path/terminal-shell-path.tsx
@@ -20,7 +20,7 @@ const NonInjectedTerminalShellPath = observer(
   ({ userStore, defaultShell }: Dependencies) => {
 
     return (
-      <div>
+      <section id="shell">
         <SubTitle title="Terminal Shell Path" />
         <Input
           theme="round-black"
@@ -28,7 +28,7 @@ const NonInjectedTerminalShellPath = observer(
           value={userStore.shell ?? ""}
           onChange={(value) => userStore.shell = value}
         />
-      </div>
+      </section>
 
     );
   },
diff --git a/src/features/preferences/renderer/preference-items/terminal/terminal-theme/terminal-theme.tsx b/src/features/preferences/renderer/preference-items/terminal/terminal-theme/terminal-theme.tsx
index c7819bacec..227296887c 100644
--- a/src/features/preferences/renderer/preference-items/terminal/terminal-theme/terminal-theme.tsx
+++ b/src/features/preferences/renderer/preference-items/terminal/terminal-theme/terminal-theme.tsx
@@ -32,7 +32,7 @@ const NonInjectedTerminalTheme = observer(
     ];
 
     return (
-      <div>
+      <section id="terminalTheme">
         <SubTitle title="Terminal theme" />
         <Select
           id="terminal-theme-input"
@@ -41,7 +41,7 @@ const NonInjectedTerminalTheme = observer(
           value={userStore.terminalTheme}
           onChange={option => userStore.terminalTheme = option?.value ?? ""}
         />
-      </div>
+      </section>
     );
   },
 );