diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx
index 7e9d43a..ebd8aa2 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx
@@ -6,8 +6,8 @@ import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { kvListURL, kvViewURL } from "../../pageLinks";
 import { route } from "preact-router";
-import i18next from "i18next";
 import { splitKVPath } from "./kvPathUtils";
+import i18next from "i18next";
 
 export class KeyValueDelete extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
index 7e1810c..487a02b 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
@@ -13,9 +13,9 @@ import {
   parseData,
   toPrismCode,
 } from "../../../../utils/dataInterchange";
+import { combineKVPath, splitKVPath } from "./kvPathUtils";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
-import { combineKVPath, splitKVPath } from "./kvPathUtils";
 
 export type KVEditProps = DefaultPageProps & {
   baseMount: string;
@@ -83,7 +83,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
     }
 
     try {
-      const combined = combineKVPath(this.props.secretPath, this.props.secretItem)
+      const combined = combineKVPath(this.props.secretPath, this.props.secretItem);
       await this.props.api.createOrUpdateSecret(
         this.props.baseMount,
         combined.secretPath,
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
index 266f81b..787a1c0 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
@@ -153,7 +153,7 @@ export class KeyValueList extends Component<DefaultPageProps, KeyValueListState>
     const secretPath = splitKVPath(this.props.matches["secretPath"]);
 
     const mountsPath = "/sys/mounts/" + baseMount;
-  
+
     const currentPath = baseMount + secretPath.join();
 
     try {
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
index 5ba9802..18dbf2d 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
@@ -12,8 +12,8 @@ import { SupportedLanguages, dumpData, toPrismCode } from "../../../../utils/dat
 import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import { sortedObjectMap } from "../../../../utils";
-import i18next from "i18next";
 import { splitKVPath } from "./kvPathUtils";
+import i18next from "i18next";
 
 type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };
 
diff --git a/src/ui/pages/Secrets/KeyValue/kvPathUtils.ts b/src/ui/pages/Secrets/KeyValue/kvPathUtils.ts
index 58bd2e0..3630022 100644
--- a/src/ui/pages/Secrets/KeyValue/kvPathUtils.ts
+++ b/src/ui/pages/Secrets/KeyValue/kvPathUtils.ts
@@ -3,7 +3,6 @@ type CombinedPaths = {
   secretItem: string;
 };
 
-
 export function combineKVPath(secretPath: string[], path: string): CombinedPaths {
   if (path.includes("/")) {
     const split = path.split("/");
@@ -22,4 +21,4 @@ export function combineKVPath(secretPath: string[], path: string): CombinedPaths
 
 export function splitKVPath(path: string): string[] {
   return path.split("/").filter((e) => e !== "");
-} 
+}
diff --git a/src/ui/pages/Settings/General/GeneralSettings.tsx b/src/ui/pages/Settings/General/GeneralSettings.tsx
new file mode 100644
index 0000000..fb69c39
--- /dev/null
+++ b/src/ui/pages/Settings/General/GeneralSettings.tsx
@@ -0,0 +1,21 @@
+import { Component } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { LanguageSetting } from "./LanguageSetting";
+import { PageDirectionSetting } from "./PageDirectionSetting";
+import { ThemeSetting } from "./ThemeSetting";
+import { VaultURLSetting } from "./VaultURLSetting";
+import i18next from "i18next";
+
+export class GeneralSettings extends Component<DefaultPageProps> {
+  render() {
+    return (
+      <div>
+        <h4>{i18next.t("settings_general_title")}</h4>
+        <ThemeSetting {...this.props} />
+        <VaultURLSetting {...this.props} />
+        <LanguageSetting {...this.props} />
+        <PageDirectionSetting {...this.props} />
+      </div>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/General/LanguageSetting.tsx b/src/ui/pages/Settings/General/LanguageSetting.tsx
new file mode 100644
index 0000000..4b4549a
--- /dev/null
+++ b/src/ui/pages/Settings/General/LanguageSetting.tsx
@@ -0,0 +1,44 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { getTranslationCompletePercentage } from "../../../../utils/translationUtils";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+import translations from "../../../../translations/index.mjs";
+
+export class LanguageSetting extends Component<DefaultPageProps> {
+  languageSelectRef = createRef<HTMLSelectElement>();
+
+  render() {
+    return (
+      <InputWithTitle title={i18next.t("settings_general_language")}>
+        <Select
+          selectRef={this.languageSelectRef}
+          onChange={async () => {
+            const language = this.languageSelectRef.current.value;
+            this.props.settings.language = language;
+
+            const t = await i18next.changeLanguage(language);
+            this.props.settings.pageDirection = t("language_direction");
+            window.location.reload();
+            settingsSavedNotification();
+          }}
+        >
+          {Object.getOwnPropertyNames(translations).map((languageID) => {
+            const languageName = i18next.getFixedT(languageID, null)("language_name");
+            const languageCompletionPercent = getTranslationCompletePercentage(languageID);
+            const name = `${languageName} (${languageCompletionPercent})`;
+            return (
+              <SelectOption
+                name={name}
+                value={languageID}
+                selected={this.props.settings.language == languageID}
+              />
+            );
+          })}
+        </Select>
+      </InputWithTitle>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/General/PageDirectionSetting.tsx b/src/ui/pages/Settings/General/PageDirectionSetting.tsx
new file mode 100644
index 0000000..55f9436
--- /dev/null
+++ b/src/ui/pages/Settings/General/PageDirectionSetting.tsx
@@ -0,0 +1,38 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+export class PageDirectionSetting extends Component<DefaultPageProps> {
+  pageDirectionRef = createRef<HTMLSelectElement>();
+
+  render() {
+    return (
+      <InputWithTitle title={i18next.t("settings_general_page_direction")}>
+        <Select
+          selectRef={this.pageDirectionRef}
+          onChange={() => {
+            this.props.settings.pageDirection = this.pageDirectionRef.current.value;
+            document.documentElement.dir = this.props.settings.pageDirection;
+            settingsSavedNotification();
+          }}
+        >
+          {[
+            { name: "ltr", readable: i18next.t("settings_general_page_direction_ltr") },
+            { name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
+          ].map((direction) => {
+            return (
+              <SelectOption
+                name={direction.readable}
+                value={direction.name}
+                selected={this.props.settings.pageDirection == direction.name}
+              />
+            );
+          })}
+        </Select>
+      </InputWithTitle>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/General/ThemeSetting.tsx b/src/ui/pages/Settings/General/ThemeSetting.tsx
new file mode 100644
index 0000000..42b9850
--- /dev/null
+++ b/src/ui/pages/Settings/General/ThemeSetting.tsx
@@ -0,0 +1,40 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+const Themes = [
+  { name: "dark", readable: "Dark" },
+  { name: "light", readable: "Light" },
+];
+
+export class ThemeSetting extends Component<DefaultPageProps> {
+  themeSelectRef = createRef<HTMLSelectElement>();
+
+  render() {
+    return (
+      <InputWithTitle title={i18next.t("settings_general_theme")}>
+        <Select
+          selectRef={this.themeSelectRef}
+          onChange={() => {
+            const newTheme = this.themeSelectRef.current.value;
+            this.props.settings.theme = newTheme;
+            settingsSavedNotification();
+          }}
+        >
+          {Themes.map((theme) => {
+            return (
+              <SelectOption
+                name={theme.readable}
+                value={theme.name}
+                selected={this.props.settings.theme == theme.name}
+              />
+            );
+          })}
+        </Select>
+      </InputWithTitle>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/General/VaultURLSetting.tsx b/src/ui/pages/Settings/General/VaultURLSetting.tsx
new file mode 100644
index 0000000..dcf3077
--- /dev/null
+++ b/src/ui/pages/Settings/General/VaultURLSetting.tsx
@@ -0,0 +1,25 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+export class VaultURLSetting extends Component<DefaultPageProps> {
+  vaultURLInputRef = createRef<HTMLInputElement>();
+
+  render() {
+    return (
+      <InputWithTitle title={i18next.t("settings_general_vault_url")}>
+        <TextInput
+          value={this.props.settings.apiURL}
+          onChange={() => {
+            // TODO: check for api health to see if is valid api url.
+            this.props.settings.apiURL = this.vaultURLInputRef.current.value;
+            settingsSavedNotification();
+          }}
+        />
+      </InputWithTitle>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/GeneralSettings.tsx b/src/ui/pages/Settings/GeneralSettings.tsx
deleted file mode 100644
index ad79255..0000000
--- a/src/ui/pages/Settings/GeneralSettings.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Component, createRef } from "preact";
-import { DefaultPageProps } from "../../../types/DefaultPageProps";
-import { InputWithTitle } from "../../elements/InputWithTitle";
-import i18next from "i18next";
-
-// @ts-ignore
-import { Select, SelectOption } from "../../elements/forms/Select";
-import { TextInput } from "../../elements/forms/TextInput";
-import { getTranslationCompletePercentage } from "../../../utils/translationUtils";
-import { settingsSavedNotification } from "./Settings";
-import translations from "../../../translations/index.mjs";
-
-const Themes = [
-  { name: "dark", readable: "Dark" },
-  { name: "light", readable: "Light" },
-];
-
-export class GeneralSettings extends Component<DefaultPageProps> {
-  themeSelectRef = createRef<HTMLSelectElement>();
-  vaultURLInputRef = createRef<HTMLInputElement>();
-  pageDirectionRef = createRef<HTMLSelectElement>();
-  languageSelectRef = createRef<HTMLSelectElement>();
-
-  render() {
-    return (
-      <div>
-        <h4>{i18next.t("settings_general_title")}</h4>
-
-        <InputWithTitle title={i18next.t("settings_general_theme")}>
-          <Select
-            selectRef={this.themeSelectRef}
-            onChange={() => {
-              const newTheme = this.themeSelectRef.current.value;
-              this.props.settings.theme = newTheme;
-              settingsSavedNotification();
-            }}
-          >
-            {Themes.map((theme) => {
-              return (
-                <SelectOption
-                  name={theme.readable}
-                  value={theme.name}
-                  selected={this.props.settings.theme == theme.name}
-                />
-              );
-            })}
-          </Select>
-        </InputWithTitle>
-
-        <InputWithTitle title={i18next.t("settings_general_vault_url")}>
-          <TextInput
-            value={this.props.settings.apiURL}
-            onChange={() => {
-              // TODO: check for api health to see if is valid api url.
-              this.props.settings.apiURL = this.vaultURLInputRef.current.value;
-              settingsSavedNotification();
-            }}
-          />
-        </InputWithTitle>
-
-        <InputWithTitle title={i18next.t("settings_general_language")}>
-          <Select
-            selectRef={this.languageSelectRef}
-            onChange={async () => {
-              const language = this.languageSelectRef.current.value;
-              this.props.settings.language = language;
-
-              const t = await i18next.changeLanguage(language);
-              this.props.settings.pageDirection = t("language_direction");
-              window.location.reload();
-              settingsSavedNotification();
-            }}
-          >
-            {Object.getOwnPropertyNames(translations).map((languageID) => {
-              const languageName = i18next.getFixedT(languageID, null)("language_name");
-              const languageCompletionPercent = getTranslationCompletePercentage(languageID);
-              const name = `${languageName} (${languageCompletionPercent})`;
-              return (
-                <SelectOption
-                  name={name}
-                  value={languageID}
-                  selected={this.props.settings.language == languageID}
-                />
-              );
-            })}
-          </Select>
-        </InputWithTitle>
-
-        <InputWithTitle title={i18next.t("settings_general_page_direction")}>
-          <Select
-            selectRef={this.pageDirectionRef}
-            onChange={() => {
-              this.props.settings.pageDirection = this.pageDirectionRef.current.value;
-              document.documentElement.dir = this.props.settings.pageDirection;
-              settingsSavedNotification();
-            }}
-          >
-            {[
-              { name: "ltr", readable: i18next.t("settings_general_page_direction_ltr") },
-              { name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
-            ].map((direction) => {
-              return (
-                <SelectOption
-                  name={direction.readable}
-                  value={direction.name}
-                  selected={this.props.settings.pageDirection == direction.name}
-                />
-              );
-            })}
-          </Select>
-        </InputWithTitle>
-      </div>
-    );
-  }
-}
diff --git a/src/ui/pages/Settings/KeyValue/KeyValueEditorSettings.tsx b/src/ui/pages/Settings/KeyValue/KeyValueEditorSettings.tsx
new file mode 100644
index 0000000..e8068a9
--- /dev/null
+++ b/src/ui/pages/Settings/KeyValue/KeyValueEditorSettings.tsx
@@ -0,0 +1,54 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { NumberInput } from "../../../elements/forms/NumberInput";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { SupportedLanguages } from "../../../../utils/dataInterchange";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+export class KeyValueEditorSettings extends Component<DefaultPageProps> {
+  editorSyntaxSelectRef = createRef<HTMLSelectElement>();
+  editorIndentInputRef = createRef<HTMLInputElement>();
+  render() {
+    return (
+      <div>
+        {/* KV Editor Language */}
+        <InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
+          <Select
+            selectRef={this.editorSyntaxSelectRef}
+            onChange={() => {
+              this.props.settings.kvEditorDefaultLanguage =
+                this.editorSyntaxSelectRef.current.value;
+              settingsSavedNotification();
+            }}
+          >
+            {SupportedLanguages.map((lang) => {
+              return (
+                <SelectOption
+                  name={lang.readable}
+                  value={lang.name}
+                  selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
+                />
+              );
+            })}
+          </Select>
+        </InputWithTitle>
+
+        {/* KV Editor Indent */}
+        <InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
+          <NumberInput
+            inputRef={this.editorIndentInputRef}
+            value={String(this.props.settings.kvEditorIndent).toString()}
+            onChange={() => {
+              const value = this.editorIndentInputRef.current.value;
+              const indent = parseInt(value);
+              this.props.settings.kvEditorIndent = indent;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
+      </div>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/KeyValue/KeyValueSettings.tsx b/src/ui/pages/Settings/KeyValue/KeyValueSettings.tsx
new file mode 100644
index 0000000..00fcb5a
--- /dev/null
+++ b/src/ui/pages/Settings/KeyValue/KeyValueSettings.tsx
@@ -0,0 +1,51 @@
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { KeyValueEditorSettings } from "./KeyValueEditorSettings";
+import { KeyValueViewSettings } from "./KeyValueViewSettings";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+export class KeyValueSettings extends Component<DefaultPageProps> {
+  codeModeToggleRef = createRef<HTMLInputElement>();
+  hideKeysRef = createRef<HTMLInputElement>();
+
+  render() {
+    return (
+      <div>
+        <h4>{i18next.t("settings_kv_title")}</h4>
+
+        <KeyValueViewSettings {...this.props} />
+        <KeyValueEditorSettings {...this.props} />
+
+        {/* Always view in code mode */}
+        <InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
+          <Checkbox
+            checkboxRef={this.codeModeToggleRef}
+            checked={this.props.settings.kvAlwaysCodeView}
+            onChange={() => {
+              const value = this.codeModeToggleRef.current.checked;
+              this.props.settings.kvAlwaysCodeView = value;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
+
+        {/* hide values on keys */}
+        <InputWithTitle title={i18next.t("settings_kv_hide_values")}>
+          <TextInput
+            inputRef={this.hideKeysRef}
+            value={this.props.settings.kvHideKeyValues.join(",")}
+            onChange={() => {
+              const value = this.hideKeysRef.current.value;
+              this.props.settings.kvHideKeyValues = value;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
+      </div>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx b/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx
new file mode 100644
index 0000000..4fd3d1c
--- /dev/null
+++ b/src/ui/pages/Settings/KeyValue/KeyValueViewSettings.tsx
@@ -0,0 +1,53 @@
+import { Component, createRef } from "preact";
+import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { NumberInput } from "../../../elements/forms/NumberInput";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { SupportedLanguages } from "../../../../utils/dataInterchange";
+import { settingsSavedNotification } from "../Settings";
+import i18next from "i18next";
+
+export class KeyValueViewSettings extends Component<DefaultPageProps> {
+  viewSyntaxSelectRef = createRef<HTMLSelectElement>();
+  viewIndentInputRef = createRef<HTMLInputElement>();
+  render() {
+    return (
+      <div>
+        {/* KV View Language */}
+        <InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
+          <Select
+            selectRef={this.viewSyntaxSelectRef}
+            onChange={() => {
+              this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
+              settingsSavedNotification();
+            }}
+          >
+            {SupportedLanguages.map((lang) => {
+              return (
+                <SelectOption
+                  name={lang.readable}
+                  value={lang.name}
+                  selected={this.props.settings.kvViewDefaultLanguage == lang.name}
+                />
+              );
+            })}
+          </Select>
+        </InputWithTitle>
+
+        {/* KV View Indent */}
+        <InputWithTitle title={i18next.t("settings_kv_view_indent")}>
+          <NumberInput
+            inputRef={this.viewIndentInputRef}
+            value={String(this.props.settings.kvViewIndent).toString()}
+            onChange={() => {
+              const value = this.viewIndentInputRef.current.value;
+              const indent = parseInt(value);
+              this.props.settings.kvViewIndent = indent;
+              settingsSavedNotification();
+            }}
+          />
+        </InputWithTitle>
+      </div>
+    );
+  }
+}
diff --git a/src/ui/pages/Settings/KeyValueSettings.tsx b/src/ui/pages/Settings/KeyValueSettings.tsx
deleted file mode 100644
index db3323d..0000000
--- a/src/ui/pages/Settings/KeyValueSettings.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Checkbox } from "../../elements/forms/Checkbox";
-import { Component, createRef } from "preact";
-import { DefaultPageProps } from "../../../types/DefaultPageProps";
-import { InputWithTitle } from "../../elements/InputWithTitle";
-import { NumberInput } from "../../elements/forms/NumberInput";
-import { Select, SelectOption } from "../../elements/forms/Select";
-import { SupportedLanguages } from "../../../utils/dataInterchange";
-import { TextInput } from "../../elements/forms/TextInput";
-import { settingsSavedNotification } from "./Settings";
-import i18next from "i18next";
-
-export class KeyValueViewSettings extends Component<DefaultPageProps> {
-  viewSyntaxSelectRef = createRef<HTMLSelectElement>();
-  viewIndentInputRef = createRef<HTMLInputElement>();
-  render() {
-    return (
-      <div>
-        {/* KV View Language */}
-        <InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
-          <Select
-            selectRef={this.viewSyntaxSelectRef}
-            onChange={() => {
-              this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
-              settingsSavedNotification();
-            }}
-          >
-            {SupportedLanguages.map((lang) => {
-              return (
-                <SelectOption
-                  name={lang.readable}
-                  value={lang.name}
-                  selected={this.props.settings.kvViewDefaultLanguage == lang.name}
-                />
-              );
-            })}
-          </Select>
-        </InputWithTitle>
-
-        {/* KV View Indent */}
-        <InputWithTitle title={i18next.t("settings_kv_view_indent")}>
-          <NumberInput
-            inputRef={this.viewIndentInputRef}
-            value={String(this.props.settings.kvViewIndent).toString()}
-            onChange={() => {
-              const value = this.viewIndentInputRef.current.value;
-              const indent = parseInt(value);
-              this.props.settings.kvViewIndent = indent;
-              settingsSavedNotification();
-            }}
-          />
-        </InputWithTitle>
-      </div>
-    );
-  }
-}
-
-export class KeyValueEditorSettings extends Component<DefaultPageProps> {
-  editorSyntaxSelectRef = createRef<HTMLSelectElement>();
-  editorIndentInputRef = createRef<HTMLInputElement>();
-  render() {
-    return (
-      <div>
-        {/* KV Editor Language */}
-        <InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
-          <Select
-            selectRef={this.editorSyntaxSelectRef}
-            onChange={() => {
-              this.props.settings.kvEditorDefaultLanguage =
-                this.editorSyntaxSelectRef.current.value;
-              settingsSavedNotification();
-            }}
-          >
-            {SupportedLanguages.map((lang) => {
-              return (
-                <SelectOption
-                  name={lang.readable}
-                  value={lang.name}
-                  selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
-                />
-              );
-            })}
-          </Select>
-        </InputWithTitle>
-
-        {/* KV Editor Indent */}
-        <InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
-          <NumberInput
-            inputRef={this.editorIndentInputRef}
-            value={String(this.props.settings.kvEditorIndent).toString()}
-            onChange={() => {
-              const value = this.editorIndentInputRef.current.value;
-              const indent = parseInt(value);
-              this.props.settings.kvEditorIndent = indent;
-              settingsSavedNotification();
-            }}
-          />
-        </InputWithTitle>
-      </div>
-    );
-  }
-}
-
-export class KeyValueSettings extends Component<DefaultPageProps> {
-  codeModeToggleRef = createRef<HTMLInputElement>();
-  hideKeysRef = createRef<HTMLInputElement>();
-
-  render() {
-    return (
-      <div>
-        <h4>{i18next.t("settings_kv_title")}</h4>
-
-        <KeyValueViewSettings {...this.props} />
-        <KeyValueEditorSettings {...this.props} />
-
-        {/* Always view in code mode */}
-        <InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
-          <Checkbox
-            checkboxRef={this.codeModeToggleRef}
-            checked={this.props.settings.kvAlwaysCodeView}
-            onChange={() => {
-              const value = this.codeModeToggleRef.current.checked;
-              this.props.settings.kvAlwaysCodeView = value;
-              settingsSavedNotification();
-            }}
-          />
-        </InputWithTitle>
-
-        {/* hide values on keys */}
-        <InputWithTitle title={i18next.t("settings_kv_hide_values")}>
-          <TextInput
-            inputRef={this.hideKeysRef}
-            value={this.props.settings.kvHideKeyValues.join(",")}
-            onChange={() => {
-              const value = this.hideKeysRef.current.value;
-              this.props.settings.kvHideKeyValues = value;
-              settingsSavedNotification();
-            }}
-          />
-        </InputWithTitle>
-      </div>
-    );
-  }
-}
diff --git a/src/ui/pages/Settings/Settings.tsx b/src/ui/pages/Settings/Settings.tsx
index 4bae108..6c09cc8 100644
--- a/src/ui/pages/Settings/Settings.tsx
+++ b/src/ui/pages/Settings/Settings.tsx
@@ -1,8 +1,8 @@
 import { Component } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
-import { GeneralSettings } from "./GeneralSettings";
+import { GeneralSettings } from "./General/GeneralSettings";
 import { Grid, GridSizes } from "../../elements/Grid";
-import { KeyValueSettings } from "./KeyValueSettings";
+import { KeyValueSettings } from "./KeyValue/KeyValueSettings";
 import { PageTitle } from "../../elements/PageTitle";
 import UIkit from "uikit";
 import i18next from "i18next";
@@ -23,6 +23,7 @@ export class Settings extends Component<DefaultPageProps> {
           <GeneralSettings {...this.props} />
           <KeyValueSettings {...this.props} />
         </Grid>
+        <div></div>
       </>
     );
   }
diff --git a/src/ui/pages/pageLinks.tsx b/src/ui/pages/pageLinks.tsx
index 9e5200c..3989238 100644
--- a/src/ui/pages/pageLinks.tsx
+++ b/src/ui/pages/pageLinks.tsx
@@ -25,15 +25,21 @@ export function kvDeleteURL(
   secret: string,
   version = "null",
 ): string {
-  return kvRemoveEndSlash(`/secrets/kv/delete/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
+  return kvRemoveEndSlash(
+    `/secrets/kv/delete/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
+  );
 }
 
 export function kvEditURL(baseMount: string, secretPath: string[], secret: string): string {
-  return kvRemoveEndSlash(`/secrets/kv/edit/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
+  return kvRemoveEndSlash(
+    `/secrets/kv/edit/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
+  );
 }
 
 export function kvVersionsURL(baseMount: string, secretPath: string[], secret: string): string {
-  return kvRemoveEndSlash(`/secrets/kv/versions/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
+  return kvRemoveEndSlash(
+    `/secrets/kv/versions/${secret}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
+  );
 }
 
 export function kvViewURL(
@@ -42,7 +48,9 @@ export function kvViewURL(
   secret: string,
   version = "null",
 ): string {
-  return kvRemoveEndSlash(`/secrets/kv/view/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`);
+  return kvRemoveEndSlash(
+    `/secrets/kv/view/${secret}/${version}/${baseMount}/${kvJoinSecretPath(secretPath)}`,
+  );
 }
 
 export function kvListURL(baseMount: string, secretPath: string[]): string {