diff --git a/src/js/components/Header.tsx b/src/js/components/Header.tsx
index 2e767ea8..5be6d838 100644
--- a/src/js/components/Header.tsx
+++ b/src/js/components/Header.tsx
@@ -48,6 +48,7 @@ export default class Header extends Component {
     localState.get('showParticipants').on(this.inject());
     localState.get('unseenMsgsTotal').on(this.inject());
     localState.get('unseenNotificationCount').on(this.inject());
+    localState.get('showConnectedRelays').on(this.inject());
     localState.get('activeRoute').on(
       this.sub((activeRoute) => {
         this.setState({
@@ -139,7 +140,7 @@ export default class Header extends Component {
         href="/settings/network"
         class={`connected-peers tooltip mobile-search-hidden ${
           this.state.showMobileSearch ? 'hidden-xs' : ''
-        }`}
+        } ${this.state.connectedRelays > 0 ? 'connected' : ''}`}
       >
         <span class="tooltiptext right">{t('connected_relays')}</span>
         <small>
@@ -284,7 +285,7 @@ export default class Header extends Component {
           >
             <span class="visible-xs-inline-block">{Icons.backArrow}</span>
           </a>
-          {loggedIn && this.renderConnectedRelays()}
+          {loggedIn && this.state.showConnectedRelays && this.renderConnectedRelays()}
           {this.renderHeaderText()}
           {loggedIn && this.renderNotifications()}
           {loggedIn && this.renderMyProfile()}
diff --git a/src/js/views/settings/Appearance.js b/src/js/views/settings/Appearance.js
deleted file mode 100644
index 39865f33..00000000
--- a/src/js/views/settings/Appearance.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Component from '../../BaseComponent';
-import Session from '../../nostr/Session';
-import { translate as t } from '../../translations/Translation';
-
-export default class Appearance extends Component {
-  state = {
-    colorScheme: 'dark',
-  };
-
-  render() {
-    return (
-      <>
-        <div class="centered-container">
-          <h3>{t('appearance')}</h3>
-          <p>
-            <label for="colorScheme">{t('color_scheme')}</label>
-            <select
-              id="colorScheme"
-              name="colorScheme"
-              onChange={(e) => this.onChange(e)}
-              value={this.state.colorScheme}
-            >
-              <option value="default">{t('system_default')}</option>
-              <option value="light">{t('light')}</option>
-              <option value="dark">{t('dark')}</option>
-            </select>
-          </p>
-        </div>
-      </>
-    );
-  }
-
-  componentDidMount() {
-    // TODO use Nostr.private
-    Session.public.get('settings/colorScheme', (entry) => {
-      this.setState({ colorScheme: entry.value });
-    });
-  }
-
-  onChange(e) {
-    Session.public.set('settings/colorScheme', e.target.value);
-  }
-}
diff --git a/src/js/views/settings/Appearance.tsx b/src/js/views/settings/Appearance.tsx
new file mode 100644
index 00000000..7d5caa2a
--- /dev/null
+++ b/src/js/views/settings/Appearance.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import localState from '../../LocalState';
+import Session from '../../nostr/Session';
+import { translate as t } from '../../translations/Translation';
+
+type ColorScheme = 'default' | 'light' | 'dark';
+
+const Appearance = () => {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('dark');
+  const [showConnectedRelays, setShowConnectedRelays] = useState(false);
+
+  useEffect(() => {
+    // TODO use Nostr.private
+    Session.public.get('settings/colorScheme', (entry) => {
+      setColorScheme(entry.value);
+    });
+    localState.get('showConnectedRelays').on(setShowConnectedRelays);
+  }, []);
+
+  const onChange = (e: Event) => {
+    const target = e.target as HTMLSelectElement;
+    const value = target.value as ColorScheme;
+    Session.public.set('settings/colorScheme', value);
+  };
+
+  return (
+    <>
+      <div class="centered-container">
+        <h3>{t('appearance')}</h3>
+        <p>
+          <label for="colorScheme">{t('color_scheme')}</label>
+          <select id="colorScheme" name="colorScheme" onChange={onChange} value={colorScheme}>
+            <option value="default">{t('system_default')}</option>
+            <option value="light">{t('light')}</option>
+            <option value="dark">{t('dark')}</option>
+          </select>
+        </p>
+        <p>
+          <input
+            type="checkbox"
+            id="showConnectedRelays"
+            name="showConnectedRelays"
+            checked={showConnectedRelays}
+            onChange={(e) => {
+              localState.get('showConnectedRelays').put(e.currentTarget.checked);
+            }}
+          />
+          <label htmlFor="showConnectedRelays">{t('show_connected_relays_in_header')}</label>
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default Appearance;