From 04550ab642ce97473856180fcf3180dfef9bab8d Mon Sep 17 00:00:00 2001
From: sl <seangeekpro@gmail.com>
Date: Sun, 17 May 2026 18:47:12 +0200
Subject: [PATCH] frontend: settings search

---
 CHANGELOG.md                                  |   1 +
 .../components/forms/search-input.module.css  |  19 ++
 .../web/src/components/forms/search-input.tsx |  60 +++-
 frontends/web/src/locales/en/app.json         |   3 +
 .../src/routes/device/no-device-connected.tsx |   8 +-
 frontends/web/src/routes/router.tsx           |  13 +-
 frontends/web/src/routes/settings/about.tsx   |  28 +-
 .../src/routes/settings/advanced-settings.tsx |  70 +++--
 .../routes/settings/bb02-settings.module.css  |  14 +-
 .../web/src/routes/settings/bb02-settings.tsx | 169 ++++++-----
 .../components/settings-content.test.tsx      |  58 ++++
 .../settings/components/settings-content.tsx  |  53 ++++
 .../settings-search-content.module.css        |  18 ++
 .../components/settings-search-content.tsx    |  88 ++++++
 .../settings/components/tabs.module.css       |   4 +
 .../src/routes/settings/components/tabs.tsx   |  39 ++-
 .../src/routes/settings/general.module.css    |   5 -
 frontends/web/src/routes/settings/general.tsx |  62 ++--
 .../src/routes/settings/manage-accounts.tsx   |   2 +-
 .../src/routes/settings/mobile-settings.tsx   |   6 +-
 .../routes/settings/settings-search.test.ts   | 142 +++++++++
 .../src/routes/settings/settings-search.ts    | 283 ++++++++++++++++++
 .../settings/use-settings-search.test.tsx     | 184 ++++++++++++
 .../routes/settings/use-settings-search.ts    |  74 +++++
 24 files changed, 1263 insertions(+), 140 deletions(-)
 create mode 100644 frontends/web/src/routes/settings/components/settings-content.test.tsx
 create mode 100644 frontends/web/src/routes/settings/components/settings-content.tsx
 create mode 100644 frontends/web/src/routes/settings/components/settings-search-content.module.css
 create mode 100644 frontends/web/src/routes/settings/components/settings-search-content.tsx
 delete mode 100644 frontends/web/src/routes/settings/general.module.css
 create mode 100644 frontends/web/src/routes/settings/settings-search.test.ts
 create mode 100644 frontends/web/src/routes/settings/settings-search.ts
 create mode 100644 frontends/web/src/routes/settings/use-settings-search.test.tsx
 create mode 100644 frontends/web/src/routes/settings/use-settings-search.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e33be32c48..07c6e6e48a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Settings search
 
 ## v4.51.1
 - iOS: fix App Store submission by packaging Inter as TTF fonts
diff --git a/frontends/web/src/components/forms/search-input.module.css b/frontends/web/src/components/forms/search-input.module.css
index 6af4680cf0..4be6da016a 100644
--- a/frontends/web/src/components/forms/search-input.module.css
+++ b/frontends/web/src/components/forms/search-input.module.css
@@ -6,3 +6,22 @@
   pointer-events: none;
   width: 20px;
 }
+
+.clearButton {
+  align-items: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  height: 24px;
+  justify-content: center;
+  margin: auto 0;
+  padding: 0;
+  width: 24px;
+}
+
+.clearButton img {
+  height: 20px;
+  width: 20px;
+}
diff --git a/frontends/web/src/components/forms/search-input.tsx b/frontends/web/src/components/forms/search-input.tsx
index 5da2609848..8f906775df 100644
--- a/frontends/web/src/components/forms/search-input.tsx
+++ b/frontends/web/src/components/forms/search-input.tsx
@@ -1,13 +1,61 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { forwardRef } from 'react';
-import { Loupe } from '@/components/icon';
+import { CloseXDark, CloseXWhite, Loupe } from '@/components/icon';
 import { Input } from './input';
 import type { TInputProps } from './input';
 import styles from './search-input.module.css';
 
-export const SearchInput = forwardRef<HTMLInputElement, TInputProps>((props, ref) => (
-  <Input ref={ref} type="text" {...props}>
-    <Loupe className={styles.searchIcon} />
-  </Input>
-));
+type TBaseProps = Omit<TInputProps, 'children' | 'type'>;
+
+type TClearProps = TBaseProps & {
+  clearButtonLabel?: string;
+  onClear: () => void;
+  variant: 'clear';
+};
+
+type TSearchProps = TBaseProps & {
+  clearButtonLabel?: never;
+  onClear?: never;
+  variant?: 'search';
+};
+
+type TProps = TClearProps | TSearchProps;
+
+export const SearchInput = forwardRef<HTMLInputElement, TProps>((props, ref) => {
+  if (props.variant === 'clear') {
+    const {
+      clearButtonLabel,
+      onClear,
+      variant: _variant,
+      ...inputProps
+    } = props;
+
+    return (
+      <Input ref={ref} type="text" {...inputProps}>
+        {String(inputProps.value ?? '').trim().length > 0 ? (
+          <button
+            aria-label={clearButtonLabel}
+            className={styles.clearButton}
+            onClick={onClear}
+            type="button"
+          >
+            <CloseXDark className="show-in-lightmode" />
+            <CloseXWhite className="show-in-darkmode" />
+          </button>
+        ) : null}
+      </Input>
+    );
+  }
+
+  const {
+    variant: _variant,
+    ...inputProps
+  } = props;
+
+  return (
+    <Input ref={ref} type="text" {...inputProps}>
+      <Loupe className={styles.searchIcon} />
+    </Input>
+  );
+});
diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
index 30b4c4e2df..1e264f53c3 100644
--- a/frontends/web/src/locales/en/app.json
+++ b/frontends/web/src/locales/en/app.json
@@ -1987,6 +1987,9 @@
       "title": "Manage notes"
     },
     "restart": "Please re-start the BitBoxApp for the changes to take effect.",
+    "search": {
+      "noResults": "No settings found"
+    },
     "services": {
       "title": "Services"
     },
diff --git a/frontends/web/src/routes/device/no-device-connected.tsx b/frontends/web/src/routes/device/no-device-connected.tsx
index 99cc5d17c4..b71f511149 100644
--- a/frontends/web/src/routes/device/no-device-connected.tsx
+++ b/frontends/web/src/routes/device/no-device-connected.tsx
@@ -12,10 +12,15 @@ import { WithSettingsTabs } from '@/routes/settings/components/tabs';
 import { ManageDeviceGuide } from './bitbox02/settings-guide';
 import styles from './no-device-connected.module.css';
 
+type TProps = TPagePropsWithSettingsTabs & {
+  hideSearch?: boolean;
+};
+
 export const NoDeviceConnected = ({
   devices,
+  hideSearch,
   hasAccounts,
-}: TPagePropsWithSettingsTabs) => {
+}: TProps) => {
   const { t } = useTranslation();
 
   return (
@@ -38,6 +43,7 @@ export const NoDeviceConnected = ({
               <WithSettingsTabs
                 devices={devices}
                 hideMobileMenu
+                hideSearch={hideSearch}
                 hasAccounts={hasAccounts}
               >
                 <div className={styles.noDevice}>
diff --git a/frontends/web/src/routes/router.tsx b/frontends/web/src/routes/router.tsx
index db58213964..b62f8de816 100644
--- a/frontends/web/src/routes/router.tsx
+++ b/frontends/web/src/routes/router.tsx
@@ -82,6 +82,17 @@ export const AppRouter = ({ devices, devicesKey, accounts, activeAccounts }: TAp
       <NoDeviceConnected
         key="no-device-connected"
         devices={devices}
+        hideSearch
+        hasAccounts={hasAccounts}
+      />
+    </InjectParams>
+  );
+
+  const NoAccounts = (
+    <InjectParams>
+      <NoDeviceConnected
+        key="no-accounts"
+        devices={devices}
         hasAccounts={hasAccounts}
       />
     </InjectParams>
@@ -324,7 +335,7 @@ export const AppRouter = ({ devices, devicesKey, accounts, activeAccounts }: TAp
           <Route path="about" element={AboutEl} />
           <Route path="device-settings/:deviceID" element={Device} />
           <Route path="no-device-connected" element={NoDevice} />
-          <Route path="no-accounts" element={NoDevice} />
+          <Route path="no-accounts" element={NoAccounts} />
           <Route path="device-settings/passphrase/:deviceID" element={PassphraseEl} />
           <Route path="device-settings/recovery-words/:deviceID" element={RecoveryWordsEl} />
           <Route path="device-settings/bip85/:deviceID" element={Bip85El} />
diff --git a/frontends/web/src/routes/settings/about.tsx b/frontends/web/src/routes/settings/about.tsx
index 68d98d4761..f6699ef505 100644
--- a/frontends/web/src/routes/settings/about.tsx
+++ b/frontends/web/src/routes/settings/about.tsx
@@ -13,6 +13,11 @@ import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
 import { FeedbackLink } from './components/about/feedback-link-setting';
 import { SupportLink } from './components/about/support-link-setting';
+import { SettingsContent, type TSettingsContentSection } from './components/settings-content';
+
+type TProps = {
+  visibleItemIDs?: string[];
+};
 
 export const About = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
   const { t } = useTranslation();
@@ -34,9 +39,7 @@ export const About = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
           <View fullscreen={false}>
             <ViewContent>
               <WithSettingsTabs devices={devices} hideMobileMenu hasAccounts={hasAccounts}>
-                <AppVersion />
-                <FeedbackLink />
-                <SupportLink />
+                <AboutSettingsContent />
               </WithSettingsTabs>
             </ViewContent>
           </View>
@@ -47,6 +50,25 @@ export const About = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
   );
 };
 
+export const AboutSettingsContent = ({ visibleItemIDs }: TProps) => {
+  const sections: TSettingsContentSection[] = [
+    {
+      id: 'about',
+      items: [
+        { id: 'app-version', content: <AppVersion /> },
+        { id: 'feedback', content: <FeedbackLink /> },
+        { id: 'support', content: <SupportLink /> },
+      ],
+    },
+  ];
+
+  return (
+    <SettingsContent
+      sections={sections}
+      visibleItemIDs={visibleItemIDs}
+    />
+  );
+};
 
 const AboutGuide = () => {
   const { t } = useTranslation();
diff --git a/frontends/web/src/routes/settings/advanced-settings.tsx b/frontends/web/src/routes/settings/advanced-settings.tsx
index 2482cf13bd..1c59a0b852 100644
--- a/frontends/web/src/routes/settings/advanced-settings.tsx
+++ b/frontends/web/src/routes/settings/advanced-settings.tsx
@@ -22,6 +22,7 @@ import { Entry } from '@/components/guide/entry';
 import { EnableAuthSetting } from './components/advanced-settings/enable-auth-setting';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
+import { SettingsContent, type TSettingsContentSection } from './components/settings-content';
 
 export type TProxyConfig = {
   proxyAddress: string;
@@ -46,21 +47,13 @@ export type TConfig = {
   frontend?: TFrontendConfig;
 };
 
+type TProps = {
+  devices: TPagePropsWithSettingsTabs['devices'];
+  visibleItemIDs?: string[];
+};
+
 export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
   const { t } = useTranslation();
-  const fetchedConfig = useLoad(getConfig) as TConfig;
-  const [config, setConfig] = useState<TConfig>();
-
-  const frontendConfig = config?.frontend;
-  const backendConfig = config?.backend;
-  const proxyConfig = config?.backend?.proxy;
-
-  useEffect(() => {
-    setConfig(fetchedConfig);
-  }, [fetchedConfig]);
-
-  const deviceIDs = Object.keys(devices);
-
   return (
     <GuideWrapper>
       <GuidedContent>
@@ -83,15 +76,7 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
                 hideMobileMenu
                 hasAccounts={hasAccounts}
               >
-                <EnableCustomFeesToggleSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} />
-                <EnableCoinControlSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} />
-                <EnableAuthSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
-                <EnableTorProxySetting proxyConfig={proxyConfig} onChangeConfig={setConfig} />
-                <RestartInTestnetSetting onChangeConfig={setConfig} />
-                <CustomGapLimitSettings backendConfig={backendConfig} onChangeConfig={setConfig} />
-                <UnlockSoftwareKeystore deviceIDs={deviceIDs}/>
-                <ConnectFullNodeSetting />
-                <ExportLogSetting />
+                <AdvancedSettingsContent devices={devices} />
               </WithSettingsTabs>
             </ViewContent>
           </View>
@@ -103,6 +88,47 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
   );
 };
 
+export const AdvancedSettingsContent = ({
+  devices,
+  visibleItemIDs,
+}: TProps) => {
+  const fetchedConfig = useLoad(getConfig) as TConfig;
+  const [config, setConfig] = useState<TConfig>();
+
+  const frontendConfig = config?.frontend;
+  const backendConfig = config?.backend;
+  const proxyConfig = config?.backend?.proxy;
+
+  useEffect(() => {
+    setConfig(fetchedConfig);
+  }, [fetchedConfig]);
+
+  const deviceIDs = Object.keys(devices);
+  const sections: TSettingsContentSection[] = [
+    {
+      id: 'advanced-settings',
+      items: [
+        { id: 'custom-fees', content: <EnableCustomFeesToggleSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} /> },
+        { id: 'coin-control', content: <EnableCoinControlSetting frontendConfig={frontendConfig} onChangeConfig={setConfig} /> },
+        { id: 'screen-lock', content: <EnableAuthSetting backendConfig={backendConfig} onChangeConfig={setConfig} /> },
+        { id: 'tor-proxy', content: <EnableTorProxySetting proxyConfig={proxyConfig} onChangeConfig={setConfig} /> },
+        { id: 'testnet-mode', content: <RestartInTestnetSetting onChangeConfig={setConfig} /> },
+        { id: 'gap-limit', content: <CustomGapLimitSettings backendConfig={backendConfig} onChangeConfig={setConfig} /> },
+        { id: 'test-wallet', content: <UnlockSoftwareKeystore deviceIDs={deviceIDs}/> },
+        { id: 'full-node', content: <ConnectFullNodeSetting /> },
+        { id: 'export-logs', content: <ExportLogSetting /> },
+      ],
+    },
+  ];
+
+  return (
+    <SettingsContent
+      sections={sections}
+      visibleItemIDs={visibleItemIDs}
+    />
+  );
+};
+
 
 const AdvancedSettingsGuide = () => {
   const { t } = useTranslation();
diff --git a/frontends/web/src/routes/settings/bb02-settings.module.css b/frontends/web/src/routes/settings/bb02-settings.module.css
index e4de1ab837..de198f7393 100644
--- a/frontends/web/src/routes/settings/bb02-settings.module.css
+++ b/frontends/web/src/routes/settings/bb02-settings.module.css
@@ -1,11 +1,3 @@
-.section {
-    margin-bottom: var(--space-default)
-}
-
-.section h3 {
-    margin-bottom: var(--space-half)
-}
-
 .skeletonWrapper {
     margin-bottom: var(--space-half);
 }
@@ -15,8 +7,4 @@
     .skeletonWrapper {
          margin-bottom: 2px;
     }
-
-    .withMobilePadding {
-        padding: 0 var(--space-half);
-    }
-}
\ No newline at end of file
+}
diff --git a/frontends/web/src/routes/settings/bb02-settings.tsx b/frontends/web/src/routes/settings/bb02-settings.tsx
index 81e1c9d0a5..fe9c1755af 100644
--- a/frontends/web/src/routes/settings/bb02-settings.tsx
+++ b/frontends/web/src/routes/settings/bb02-settings.tsx
@@ -29,14 +29,20 @@ import { ManageDeviceGuide } from '@/routes/device/bitbox02/settings-guide';
 import { MobileHeader } from './components/mobile-header';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
+import { SettingsContent, type TSettingsContentSection } from './components/settings-content';
 import { SubTitle } from '@/components/title';
 import styles from './bb02-settings.module.css';
 
-type TProps = {
+type TCommonProps = {
   deviceID: string;
 };
 
-type TWrapperProps = TProps & TPagePropsWithSettingsTabs;
+type TWrapperProps = TCommonProps & TPagePropsWithSettingsTabs;
+
+type TProps = TCommonProps & {
+  showSectionTitles?: boolean;
+  visibleItemIDs?: string[];
+};
 
 export const StyledSkeleton = () => {
   return (
@@ -70,7 +76,7 @@ const BB02Settings = ({ deviceID, devices, hasAccounts }: TWrapperProps) => {
                 hideMobileMenu
                 hasAccounts={hasAccounts}
               >
-                <Content deviceID={deviceID} />
+                <ManageDeviceSettingsContent deviceID={deviceID} />
               </WithSettingsTabs>
             </ViewContent>
           </View>
@@ -81,7 +87,11 @@ const BB02Settings = ({ deviceID, devices, hasAccounts }: TWrapperProps) => {
   );
 };
 
-const Content = ({ deviceID }: TProps) => {
+export const ManageDeviceSettingsContent = ({
+  deviceID,
+  showSectionTitles = true,
+  visibleItemIDs,
+}: TProps) => {
   const { t } = useTranslation();
 
   const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>();
@@ -100,103 +110,126 @@ const Content = ({ deviceID }: TProps) => {
       .catch(console.error);
   }, [deviceID, t]);
 
-  return (
-    <>
-      {/*"Backups" section*/}
-      <div className={styles.section}>
-        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.backups.title')}</SubTitle>
-        <ManageBackupSetting deviceID={deviceID} />
-        <ShowRecoveryWordsSetting deviceID={deviceID} />
-      </div>
+  const hasBluetooth = !!deviceInfo?.bluetooth;
+  const canToggleBluetooth = hasBluetooth && !runningInIOS();
 
-      {/*"Device settings" section*/}
-      <div className={styles.section}>
-        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.deviceSettings.title')}</SubTitle>
-        {deviceInfo ? (
-          <DeviceNameSetting
-            deviceName={deviceInfo.name}
-            deviceID={deviceID}
-          />
-        ) :
-          <StyledSkeleton />
-        }
-        { deviceInfo && deviceInfo.bluetooth && !runningInIOS()
-          ? <BluetoothToggleEnabledSetting deviceID={deviceID} />
-          : null
-        }
+  const sections: TSettingsContentSection[] = [
+    {
+      id: 'backups',
+      items: [
+        { id: 'manage-backups', content: <ManageBackupSetting deviceID={deviceID} /> },
+        { id: 'show-recovery-words', content: <ShowRecoveryWordsSetting deviceID={deviceID} /> },
+      ],
+      title: <SubTitle className="m-top-default">{t('deviceSettings.backups.title')}</SubTitle>,
+    },
+    {
+      id: 'device-settings',
+      items: [
         {
-          versionInfo ? (
+          id: 'device-name',
+          content: deviceInfo ? (
+            <DeviceNameSetting
+              deviceName={deviceInfo.name}
+              deviceID={deviceID}
+            />
+          ) : (
+            <StyledSkeleton />
+          ),
+        },
+        ...(canToggleBluetooth ? [{
+          id: 'bluetooth',
+          content: <BluetoothToggleEnabledSetting deviceID={deviceID} />,
+        }] : []),
+        {
+          id: 'device-password',
+          content: versionInfo ? (
             <ChangeDevicePasswordSetting
               deviceID={deviceID}
               canChangePassword={versionInfo.canChangePassword}
             />
           ) : (
             <StyledSkeleton />
-          )
-        }
-      </div>
-
-      {/*"Device information" section*/}
-      <div className={styles.section}>
-        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.deviceInformation.title')}</SubTitle>
+          ),
+        },
+      ],
+      title: <SubTitle className="m-top-default">{t('deviceSettings.deviceSettings.title')}</SubTitle>,
+    },
+    {
+      id: 'device-information',
+      items: [
         {
-          versionInfo ? (
+          id: 'firmware',
+          content: versionInfo ? (
             <FirmwareSetting
               deviceID={deviceID}
               versionInfo={versionInfo}
             />
-          ) :
+          ) : (
             <StyledSkeleton />
-        }
-        {
-          deviceInfo && deviceInfo.bluetooth ? (
+          ),
+        },
+        ...(hasBluetooth && deviceInfo?.bluetooth ? [{
+          id: 'bluetooth-firmware',
+          content: (
             <BluetoothFirmwareSetting
               firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
             />
-          ) : null
-        }
-        <AttestationCheckSetting deviceID={deviceID} />
+          ),
+        }] : []),
+        { id: 'authenticity-check', content: <AttestationCheckSetting deviceID={deviceID} /> },
         {
-          rootFingerprintResult && rootFingerprintResult.success ?
-            <RootFingerprintSetting rootFingerprint={rootFingerprintResult.rootFingerprint} />
-            :
-            <StyledSkeleton />
-        }
+          id: 'root-fingerprint',
+          content: rootFingerprintResult && rootFingerprintResult.success
+            ? <RootFingerprintSetting rootFingerprint={rootFingerprintResult.rootFingerprint} />
+            : <StyledSkeleton />,
+        },
         {
-          deviceInfo && deviceInfo.securechipModel !== '' ?
-            <SecureChipSetting secureChipModel={deviceInfo.securechipModel} />
-            :
-            <StyledSkeleton />
-        }
-      </div>
-
-      {/*"Expert settings" section*/}
-      <div className={styles.section}>
-        <SubTitle className={styles.withMobilePadding}>{t('settings.expert.title')}</SubTitle>
+          id: 'secure-chip',
+          content: deviceInfo && deviceInfo.securechipModel !== ''
+            ? <SecureChipSetting secureChipModel={deviceInfo.securechipModel} />
+            : <StyledSkeleton />,
+        },
+      ],
+      title: <SubTitle className="m-top-default">{t('deviceSettings.deviceInformation.title')}</SubTitle>,
+    },
+    {
+      id: 'expert-settings',
+      items: [
         {
-          deviceInfo ? (
+          id: 'passphrase',
+          content: deviceInfo ? (
             <PassphraseSetting
               passphraseEnabled={deviceInfo.mnemonicPassphraseEnabled}
               deviceID={deviceID}
             />
           ) : (
             <StyledSkeleton />
-          )
-        }
+          ),
+        },
         {
-          versionInfo ? (
+          id: 'bip85',
+          content: versionInfo ? (
             <Bip85Setting
               canBIP85={versionInfo.canBIP85}
               deviceID={deviceID}
             />
           ) : (
             <StyledSkeleton />
-          )
-        }
-        <GoToStartupSettings deviceID={deviceID} />
-        <FactoryResetSetting deviceID={deviceID} />
-      </div>
-    </>
+          ),
+        },
+        { id: 'startup-settings', content: <GoToStartupSettings deviceID={deviceID} /> },
+        { id: 'factory-reset', content: <FactoryResetSetting deviceID={deviceID} /> },
+      ],
+      title: <SubTitle className="m-top-default">{t('settings.expert.title')}</SubTitle>,
+    },
+  ];
+
+  return (
+    <SettingsContent
+      sections={sections}
+      showSectionTitles={showSectionTitles}
+      visibleItemIDs={visibleItemIDs}
+    />
   );
 };
 
diff --git a/frontends/web/src/routes/settings/components/settings-content.test.tsx b/frontends/web/src/routes/settings/components/settings-content.test.tsx
new file mode 100644
index 0000000000..eb981e961e
--- /dev/null
+++ b/frontends/web/src/routes/settings/components/settings-content.test.tsx
@@ -0,0 +1,58 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { SettingsContent, type TSettingsContentSection } from './settings-content';
+
+const sections: TSettingsContentSection[] = [
+  {
+    id: 'general',
+    items: [
+      { id: 'language', content: <div>Language setting</div> },
+      { id: 'currency', content: <div>Currency setting</div> },
+    ],
+    title: 'General',
+  },
+  {
+    id: 'device',
+    items: [
+      { id: 'firmware', content: <div>Firmware setting</div> },
+    ],
+    title: 'Device',
+  },
+];
+
+describe('SettingsContent', () => {
+  it('renders all items when visibleItemIDs is omitted', () => {
+    render(<SettingsContent sections={sections} />);
+
+    expect(screen.getByText('Language setting')).toBeInTheDocument();
+    expect(screen.getByText('Currency setting')).toBeInTheDocument();
+    expect(screen.getByText('Firmware setting')).toBeInTheDocument();
+  });
+
+  it('renders only matching items when visibleItemIDs is provided', () => {
+    render(<SettingsContent sections={sections} visibleItemIDs={['currency']} />);
+
+    expect(screen.queryByText('Language setting')).not.toBeInTheDocument();
+    expect(screen.getByText('Currency setting')).toBeInTheDocument();
+    expect(screen.queryByText('Firmware setting')).not.toBeInTheDocument();
+  });
+
+  it('hides sections without visible items', () => {
+    render(<SettingsContent sections={sections} visibleItemIDs={['firmware']} />);
+
+    expect(screen.queryByText('General')).not.toBeInTheDocument();
+    expect(screen.getByText('Device')).toBeInTheDocument();
+    expect(screen.getByText('Firmware setting')).toBeInTheDocument();
+  });
+
+  it('hides section titles when showSectionTitles is false', () => {
+    render(<SettingsContent sections={sections} showSectionTitles={false} />);
+
+    expect(screen.queryByText('General')).not.toBeInTheDocument();
+    expect(screen.queryByText('Device')).not.toBeInTheDocument();
+    expect(screen.getByText('Language setting')).toBeInTheDocument();
+    expect(screen.getByText('Firmware setting')).toBeInTheDocument();
+  });
+});
diff --git a/frontends/web/src/routes/settings/components/settings-content.tsx b/frontends/web/src/routes/settings/components/settings-content.tsx
new file mode 100644
index 0000000000..f70aee9e81
--- /dev/null
+++ b/frontends/web/src/routes/settings/components/settings-content.tsx
@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { Fragment, ReactNode } from 'react';
+
+export type TSettingsContentItem = {
+  content: ReactNode;
+  id: string;
+};
+
+export type TSettingsContentSection = {
+  id: string;
+  items: TSettingsContentItem[];
+  title?: ReactNode;
+};
+
+type TProps = {
+  sections: TSettingsContentSection[];
+  showSectionTitles?: boolean;
+  visibleItemIDs?: string[];
+};
+
+export const SettingsContent = ({
+  sections,
+  showSectionTitles = true,
+  visibleItemIDs,
+}: TProps) => {
+  const visibleItemIDsSet = visibleItemIDs ? new Set(visibleItemIDs) : undefined;
+
+  return (
+    <>
+      {sections.map(section => {
+        const visibleSettingItems = section.items.filter(settingItem => (
+          !visibleItemIDsSet || visibleItemIDsSet.has(settingItem.id)
+        ));
+
+        if (visibleSettingItems.length === 0) {
+          return null;
+        }
+
+        return (
+          <Fragment key={section.id}>
+            {showSectionTitles && section.title ? section.title : null}
+            {visibleSettingItems.map(settingItem => (
+              <Fragment key={settingItem.id}>
+                {settingItem.content}
+              </Fragment>
+            ))}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
diff --git a/frontends/web/src/routes/settings/components/settings-search-content.module.css b/frontends/web/src/routes/settings/components/settings-search-content.module.css
new file mode 100644
index 0000000000..8c30e540c2
--- /dev/null
+++ b/frontends/web/src/routes/settings/components/settings-search-content.module.css
@@ -0,0 +1,18 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+.container {
+  margin-bottom: var(--space-default);
+}
+
+.empty {
+  color: var(--color-secondary);
+  margin: 0 0 var(--space-default);
+}
+
+.pageGroup {
+  margin-bottom: var(--space-default);
+}
+
+.pageTitle {
+  margin-top: var(--space-default);
+}
diff --git a/frontends/web/src/routes/settings/components/settings-search-content.tsx b/frontends/web/src/routes/settings/components/settings-search-content.tsx
new file mode 100644
index 0000000000..f8a0709d60
--- /dev/null
+++ b/frontends/web/src/routes/settings/components/settings-search-content.tsx
@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { useTranslation } from 'react-i18next';
+import type { TDevices } from '@/api/devices';
+import { SubTitle } from '@/components/title';
+import { AboutSettingsContent } from '../about';
+import { AdvancedSettingsContent } from '../advanced-settings';
+import { ManageDeviceSettingsContent } from '../bb02-settings';
+import { GeneralSettingsContent } from '../general';
+import {
+  SETTINGS_SEARCH_PAGE_ORDER,
+  groupSearchResultsByPage,
+  type TSettingsSearchItem,
+  type TSettingsSearchPage,
+} from '../settings-search';
+import styles from './settings-search-content.module.css';
+
+type TProps = {
+  devices: TDevices;
+  hasAccounts: boolean;
+  searchResults: TSettingsSearchItem[];
+};
+
+export const SettingsSearchContent = ({
+  devices,
+  hasAccounts,
+  searchResults,
+}: TProps) => {
+  const { t } = useTranslation();
+  const firstDeviceID = Object.keys(devices)[0];
+
+  const pageTitles: Record<TSettingsSearchPage, string> = {
+    about: t('settings.about'),
+    advanced: t('settings.advancedSettings'),
+    device: t('sidebar.device'),
+    general: t('settings.general'),
+  };
+
+  const searchResultsByPage = groupSearchResultsByPage(searchResults);
+
+  return (
+    <div className={styles.container}>
+      {searchResults.length === 0 ? (
+        <p className={styles.empty}>
+          {t('settings.search.noResults')}
+        </p>
+      ) : (
+        SETTINGS_SEARCH_PAGE_ORDER.map(page => {
+          const pageSearchResults = searchResultsByPage[page];
+          if (pageSearchResults.length === 0) {
+            return null;
+          }
+
+          const visibleItemIDs = pageSearchResults.map(searchResult => searchResult.id);
+
+          return (
+            <div className={styles.pageGroup} key={page}>
+              <SubTitle className={styles.pageTitle}>{pageTitles[page]}</SubTitle>
+              {page === 'general' ? (
+                <GeneralSettingsContent
+                  hasAccounts={hasAccounts}
+                  showSectionTitles={false}
+                  visibleItemIDs={visibleItemIDs}
+                />
+              ) : null}
+              {page === 'device' && firstDeviceID ? (
+                <ManageDeviceSettingsContent
+                  deviceID={firstDeviceID}
+                  showSectionTitles={false}
+                  visibleItemIDs={visibleItemIDs}
+                />
+              ) : null}
+              {page === 'advanced' ? (
+                <AdvancedSettingsContent
+                  devices={devices}
+                  visibleItemIDs={visibleItemIDs}
+                />
+              ) : null}
+              {page === 'about' ? (
+                <AboutSettingsContent visibleItemIDs={visibleItemIDs} />
+              ) : null}
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
diff --git a/frontends/web/src/routes/settings/components/tabs.module.css b/frontends/web/src/routes/settings/components/tabs.module.css
index e927b535e8..d741325440 100644
--- a/frontends/web/src/routes/settings/components/tabs.module.css
+++ b/frontends/web/src/routes/settings/components/tabs.module.css
@@ -4,6 +4,10 @@
     word-break: keep-all;
 }
 
+.searchContainer {
+    margin-bottom: var(--space-default);
+}
+
 .container a {
     margin-right: var(--space-default);
     font-size: var(--size-subheader);
diff --git a/frontends/web/src/routes/settings/components/tabs.tsx b/frontends/web/src/routes/settings/components/tabs.tsx
index 0daad0926a..4a3d8632bc 100644
--- a/frontends/web/src/routes/settings/components/tabs.tsx
+++ b/frontends/web/src/routes/settings/components/tabs.tsx
@@ -8,6 +8,9 @@ import { useLoad } from '@/hooks/api';
 import { getVersion } from '@/api/bitbox02';
 import { useDarkmode } from '@/hooks/darkmode';
 import { SettingsItem } from './settingsItem/settingsItem';
+import { SettingsSearchContent } from './settings-search-content';
+import { SearchInput } from '@/components/forms';
+import { useSettingsSearch } from '../use-settings-search';
 import {
   AdvancedSettingsIcon,
   AdvancedSettingsIconDark,
@@ -29,6 +32,7 @@ type TWithSettingsTabsProps = {
   devices: TDevices;
   hasAccounts: boolean;
   hideMobileMenu?: boolean;
+  hideSearch?: boolean;
 };
 
 type TTab = {
@@ -49,8 +53,21 @@ export const WithSettingsTabs = ({
   children,
   devices,
   hideMobileMenu,
+  hideSearch,
   hasAccounts,
 }: TWithSettingsTabsProps) => {
+  const { t } = useTranslation();
+  const {
+    searchResults,
+    searchTerm,
+    showSearchResults,
+    updateSearchTerm,
+  } = useSettingsSearch({
+    devices,
+    hasAccounts,
+    hideSearch,
+  });
+
   return (
     <>
       <div className="hide-on-small">
@@ -60,7 +77,27 @@ export const WithSettingsTabs = ({
           hasAccounts={hasAccounts}
         />
       </div>
-      {children}
+      {!hideSearch && (
+        <>
+          <div className={styles.searchContainer}>
+            <SearchInput
+              clearButtonLabel={t('generic.close')}
+              onChange={event => updateSearchTerm(event.currentTarget.value)}
+              onClear={() => updateSearchTerm('')}
+              placeholder={t('generic.search')}
+              value={searchTerm}
+              variant="clear"
+            />
+          </div>
+        </>
+      )}
+      {showSearchResults ? (
+        <SettingsSearchContent
+          devices={devices}
+          hasAccounts={hasAccounts}
+          searchResults={searchResults}
+        />
+      ) : children}
     </>
   );
 };
diff --git a/frontends/web/src/routes/settings/general.module.css b/frontends/web/src/routes/settings/general.module.css
deleted file mode 100644
index c13dc77588..0000000000
--- a/frontends/web/src/routes/settings/general.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@media (max-width: 768px) {
-    .subtitleWithMobilePadding {
-        padding: 0 var(--space-half);
-    }
-}
\ No newline at end of file
diff --git a/frontends/web/src/routes/settings/general.tsx b/frontends/web/src/routes/settings/general.tsx
index 0d547b2952..65a3b26775 100644
--- a/frontends/web/src/routes/settings/general.tsx
+++ b/frontends/web/src/routes/settings/general.tsx
@@ -13,11 +13,17 @@ import { WithSettingsTabs } from './components/tabs';
 import { MobileHeader } from './components/mobile-header';
 import { Guide } from '@/components/guide/guide';
 import { Entry } from '@/components/guide/entry';
+import { SettingsContent, type TSettingsContentSection } from './components/settings-content';
 import { SubTitle } from '@/components/title';
 import { TPagePropsWithSettingsTabs } from './types';
 import { GlobalBanners } from '@/components/banners';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
-import style from './general.module.css';
+
+type TProps = {
+  hasAccounts: boolean;
+  showSectionTitles?: boolean;
+  visibleItemIDs?: string[];
+};
 
 export const General = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
   const { t } = useTranslation();
@@ -39,22 +45,7 @@ export const General = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) =>
           <View fullscreen={false}>
             <ViewContent>
               <WithSettingsTabs hasAccounts={hasAccounts} hideMobileMenu devices={devices}>
-                <SubTitle className={style.subtitleWithMobilePadding}>
-                  {t('settings.appearance')}
-                </SubTitle>
-                <LanguageDropdownSetting />
-                <DefaultCurrencyDropdownSetting />
-                <ActiveCurrenciesDropdownSetting />
-                <DarkmodeToggleSetting />
-                { hasAccounts ? (
-                  <>
-                    <SubTitle className={`m-top-default ${style.subtitleWithMobilePadding || ''}`}>
-                      {t('settings.notes.title')}
-                    </SubTitle>
-                    <NotesExport />
-                    <NotesImport />
-                  </>
-                ) : null }
+                <GeneralSettingsContent hasAccounts={hasAccounts} />
               </WithSettingsTabs>
             </ViewContent>
           </View>
@@ -66,6 +57,43 @@ export const General = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) =>
   );
 };
 
+export const GeneralSettingsContent = ({
+  hasAccounts,
+  showSectionTitles = true,
+  visibleItemIDs,
+}: TProps) => {
+  const { t } = useTranslation();
+
+  const sections: TSettingsContentSection[] = [
+    {
+      id: 'appearance',
+      items: [
+        { id: 'language', content: <LanguageDropdownSetting /> },
+        { id: 'default-currency', content: <DefaultCurrencyDropdownSetting /> },
+        { id: 'active-currencies', content: <ActiveCurrenciesDropdownSetting /> },
+        { id: 'dark-mode', content: <DarkmodeToggleSetting /> },
+      ],
+      title: <SubTitle>{t('settings.appearance')}</SubTitle>,
+    },
+    ...(hasAccounts ? [{
+      id: 'notes',
+      items: [
+        { id: 'export-notes', content: <NotesExport /> },
+        { id: 'import-notes', content: <NotesImport /> },
+      ],
+      title: <SubTitle className="m-top-default">{t('settings.notes.title')}</SubTitle>,
+    }] : []),
+  ];
+
+  return (
+    <SettingsContent
+      sections={sections}
+      showSectionTitles={showSectionTitles}
+      visibleItemIDs={visibleItemIDs}
+    />
+  );
+};
+
 const GeneralGuide = () => {
   const { t } = useTranslation();
 
diff --git a/frontends/web/src/routes/settings/manage-accounts.tsx b/frontends/web/src/routes/settings/manage-accounts.tsx
index 9c16f8b3ee..5aec485163 100644
--- a/frontends/web/src/routes/settings/manage-accounts.tsx
+++ b/frontends/web/src/routes/settings/manage-accounts.tsx
@@ -208,7 +208,7 @@ export const ManageAccounts = ({ accounts, devices, hasAccounts }: Props) => {
             } />
           <View fullscreen={false}>
             <ViewContent>
-              <WithSettingsTabs devices={devices} hideMobileMenu hasAccounts={hasAccounts}>
+              <WithSettingsTabs devices={devices} hideMobileMenu hideSearch hasAccounts={hasAccounts}>
                 <Button
                   className={style.addAccountBtn}
                   primary
diff --git a/frontends/web/src/routes/settings/mobile-settings.tsx b/frontends/web/src/routes/settings/mobile-settings.tsx
index f185b89a3c..ab2091cc4f 100644
--- a/frontends/web/src/routes/settings/mobile-settings.tsx
+++ b/frontends/web/src/routes/settings/mobile-settings.tsx
@@ -3,7 +3,7 @@
 import { useTranslation } from 'react-i18next';
 import { View, ViewContent } from '@/components/view/view';
 import { Header, Main } from '@/components/layout';
-import { Tabs } from './components/tabs';
+import { Tabs, WithSettingsTabs } from './components/tabs';
 import { TPagePropsWithSettingsTabs } from './types';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
@@ -41,7 +41,9 @@ export const MobileSettings = ({ devices, hasAccounts }: TPagePropsWithSettingsT
         } />
       <View fullscreen={false}>
         <ViewContent>
-          <Tabs devices={devices} hasAccounts={hasAccounts} />
+          <WithSettingsTabs devices={devices} hasAccounts={hasAccounts}>
+            <Tabs devices={devices} hasAccounts={hasAccounts} />
+          </WithSettingsTabs>
         </ViewContent>
       </View>
     </Main>
diff --git a/frontends/web/src/routes/settings/settings-search.test.ts b/frontends/web/src/routes/settings/settings-search.test.ts
new file mode 100644
index 0000000000..c46ea3eb3c
--- /dev/null
+++ b/frontends/web/src/routes/settings/settings-search.test.ts
@@ -0,0 +1,142 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TFunction } from 'i18next';
+import { describe, expect, it } from 'vitest';
+import type { DeviceInfo } from '@/api/bitbox02';
+import type { TDevices } from '@/api/devices';
+import {
+  filterSettingsSearchItems,
+  getSettingsSearchItems,
+} from './settings-search';
+
+const translations: Record<string, string> = {
+  'backup.showMnemonic.title': 'Show recovery words',
+  'backup.title': 'Manage backups',
+  'bitbox02Settings.bluetoothToggleEnabled.titleEnabled': 'Disable Bluetooth',
+  'bitbox02Settings.changePassword.title': 'Change device password',
+  'bitbox02Settings.deviceName.input': 'BitBox name',
+  'bitbox02Settings.gotoStartupSettings.title': 'Go to startup settings',
+  'darkmode.toggle': 'Dark mode',
+  'deviceSettings.bluetoothFirmware.title': 'Bluetooth firmware',
+  'deviceSettings.expert.bip85.title': 'Show BIP-85 child key',
+  'deviceSettings.expert.factoryReset.title': 'Factory reset',
+  'deviceSettings.expert.passphrase.title': 'Passphrase',
+  'deviceSettings.firmware.title': 'Firmware',
+  'deviceSettings.hardware.attestation.label': 'Authenticity check',
+  'deviceSettings.hardware.securechip': 'Secure chip',
+  'gapLimit.title': 'Custom gap limit settings',
+  'newSettings.about.appVersion.title': 'App version',
+  'newSettings.about.feedbackLink.title': 'Feedback',
+  'newSettings.about.supportLink.title': 'Support',
+  'newSettings.advancedSettings.authentication.title': 'Screen lock',
+  'newSettings.appearance.activeCurrencies.title': 'Active currencies',
+  'newSettings.appearance.defaultCurrency.title': 'Default currency',
+  'newSettings.appearance.language.title': 'Language',
+  'settings.about': 'About',
+  'settings.advancedSettings': 'Advanced settings',
+  'settings.expert.coinControl': 'Enable coin control',
+  'settings.expert.electrum.title': 'Connect your own full node',
+  'settings.expert.exportLogs.title': 'Export logs',
+  'settings.expert.fee': 'Enable custom fees',
+  'settings.expert.useProxy': 'Enable tor proxy',
+  'settings.general': 'General',
+  'settings.notes.export.title': 'Export notes',
+  'settings.notes.import.title': 'Import notes',
+  'sidebar.device': 'Manage device',
+  'testWallet.connect.title': 'Test wallet',
+  'testnet.activate.title': 'Start testnet mode',
+  'testnet.deactivate.title': 'Exit testnet mode',
+};
+
+const t = ((key: string) => translations[key] || key) as TFunction;
+
+const deviceInfoWithoutBluetooth: DeviceInfo = {
+  bluetooth: null,
+  initialized: true,
+  mnemonicPassphraseEnabled: false,
+  name: 'BitBox02',
+  securechipModel: 'ATECC608B',
+  version: '9.0.0',
+};
+
+const deviceInfoWithBluetooth: DeviceInfo = {
+  ...deviceInfoWithoutBluetooth,
+  bluetooth: {
+    enabled: true,
+    firmwareVersion: '1.0.0',
+  },
+};
+
+const getItems = (devices: TDevices = {}, deviceInfo?: DeviceInfo) => getSettingsSearchItems(
+  {
+    deviceInfo,
+    devices,
+    hasAccounts: true,
+    isTesting: false,
+    t,
+  }
+);
+
+describe('settings search', () => {
+  it('matches case-insensitively and trims search text', () => {
+    const results = filterSettingsSearchItems(getItems(), '  DEFAULT Curr  ');
+
+    expect(results.map(result => result.title)).toEqual(['Default currency']);
+  });
+
+  it('matches localized setting title substrings', () => {
+    const results = filterSettingsSearchItems(getItems(), 'currency');
+
+    expect(results.map(result => result.title)).toEqual(['Default currency']);
+  });
+
+  it('does not include manage-device items without a device', () => {
+    const results = filterSettingsSearchItems(getItems(), 'manage backups');
+
+    expect(results).toEqual([]);
+  });
+
+  it('includes manage-device items for the first device', () => {
+    const results = filterSettingsSearchItems(getItems({ firstDeviceID: 'bitbox02' }), 'manage backups');
+
+    expect(results).toEqual([{
+      id: 'manage-backups',
+      page: 'device',
+      title: 'Manage backups',
+    }]);
+  });
+
+  it('does not include bluetooth items when the device does not support bluetooth', () => {
+    const results = filterSettingsSearchItems(
+      getItems({ firstDeviceID: 'bitbox02' }, deviceInfoWithoutBluetooth),
+      'bluetooth',
+    );
+
+    expect(results).toEqual([]);
+  });
+
+  it('includes bluetooth items when the device supports bluetooth', () => {
+    const results = filterSettingsSearchItems(
+      getItems({ firstDeviceID: 'bitbox02' }, deviceInfoWithBluetooth),
+      'bluetooth',
+    );
+
+    expect(results.map(result => result.title)).toEqual([
+      'Disable Bluetooth',
+      'Bluetooth firmware',
+    ]);
+  });
+
+  it('can return items from multiple pages', () => {
+    const results = filterSettingsSearchItems(getItems({ firstDeviceID: 'bitbox02' }), 'settings');
+
+    expect(results.map(result => result.page)).toEqual([
+      'advanced',
+      'device',
+    ]);
+    expect(results.map(result => result.title)).toEqual([
+      'Custom gap limit settings',
+      'Go to startup settings',
+    ]);
+  });
+});
diff --git a/frontends/web/src/routes/settings/settings-search.ts b/frontends/web/src/routes/settings/settings-search.ts
new file mode 100644
index 0000000000..abf67b2f27
--- /dev/null
+++ b/frontends/web/src/routes/settings/settings-search.ts
@@ -0,0 +1,283 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TFunction } from 'i18next';
+import type { DeviceInfo } from '@/api/bitbox02';
+import type { TDevices } from '@/api/devices';
+import { runningInIOS } from '@/utils/env';
+
+export type TSettingsSearchItem = {
+  id: string;
+  title: string;
+  page: TSettingsSearchPage;
+};
+
+type TGetSettingsSearchItemsArgs = {
+  deviceInfo?: DeviceInfo;
+  devices: TDevices;
+  hasAccounts: boolean;
+  isTesting: boolean;
+  t: TFunction;
+};
+
+export type TSettingsSearchPage = 'general' | 'device' | 'advanced' | 'about';
+
+export const SETTINGS_SEARCH_PAGE_ORDER: TSettingsSearchPage[] = ['general', 'device', 'advanced', 'about'];
+
+type TSettingsSearchContext = TGetSettingsSearchItemsArgs & {
+  deviceInfo?: DeviceInfo;
+  deviceIDs: string[];
+};
+
+type TSettingsSearchDescriptor = {
+  id: string;
+  page: TSettingsSearchPage;
+  getTitle: (context: TSettingsSearchContext) => string;
+  isAvailable?: (context: TSettingsSearchContext) => boolean;
+};
+
+
+const whenAccountsExist = ({ hasAccounts }: TSettingsSearchContext) => hasAccounts;
+const whenDeviceExists = ({ deviceIDs }: TSettingsSearchContext) => deviceIDs.length > 0;
+const whenDeviceSupportsBluetooth = ({ deviceInfo }: TSettingsSearchContext) => !!deviceInfo?.bluetooth;
+const whenBluetoothToggleIsVisible = (context: TSettingsSearchContext) => (
+  whenDeviceSupportsBluetooth(context) && !runningInIOS()
+);
+const whenTestingWithoutDevice = ({ deviceIDs, isTesting }: TSettingsSearchContext) => (
+  isTesting && deviceIDs.length === 0
+);
+
+const SETTINGS_SEARCH_DESCRIPTORS: TSettingsSearchDescriptor[] = [
+  {
+    id: 'language',
+    getTitle: ({ t }) => t('newSettings.appearance.language.title'),
+    page: 'general',
+  },
+  {
+    id: 'default-currency',
+    getTitle: ({ t }) => t('newSettings.appearance.defaultCurrency.title'),
+    page: 'general',
+  },
+  {
+    id: 'active-currencies',
+    getTitle: ({ t }) => t('newSettings.appearance.activeCurrencies.title'),
+    page: 'general',
+  },
+  {
+    id: 'dark-mode',
+    getTitle: ({ t }) => t('darkmode.toggle'),
+    page: 'general',
+  },
+  {
+    id: 'custom-fees',
+    getTitle: ({ t }) => t('settings.expert.fee'),
+    page: 'advanced',
+  },
+  {
+    id: 'coin-control',
+    getTitle: ({ t }) => t('settings.expert.coinControl'),
+    page: 'advanced',
+  },
+  {
+    id: 'screen-lock',
+    getTitle: ({ t }) => t('newSettings.advancedSettings.authentication.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'tor-proxy',
+    getTitle: ({ t }) => t('settings.expert.useProxy'),
+    page: 'advanced',
+  },
+  {
+    id: 'testnet-mode',
+    getTitle: ({ isTesting, t }) => isTesting ? t('testnet.deactivate.title') : t('testnet.activate.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'gap-limit',
+    getTitle: ({ t }) => t('gapLimit.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'full-node',
+    getTitle: ({ t }) => t('settings.expert.electrum.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'export-logs',
+    getTitle: ({ t }) => t('settings.expert.exportLogs.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'app-version',
+    getTitle: ({ t }) => t('newSettings.about.appVersion.title'),
+    page: 'about',
+  },
+  {
+    id: 'feedback',
+    getTitle: ({ t }) => t('newSettings.about.feedbackLink.title'),
+    page: 'about',
+  },
+  {
+    id: 'support',
+    getTitle: ({ t }) => t('newSettings.about.supportLink.title'),
+    page: 'about',
+  },
+  {
+    id: 'export-notes',
+    isAvailable: whenAccountsExist,
+    getTitle: ({ t }) => t('settings.notes.export.title'),
+    page: 'general',
+  },
+  {
+    id: 'import-notes',
+    isAvailable: whenAccountsExist,
+    getTitle: ({ t }) => t('settings.notes.import.title'),
+    page: 'general',
+  },
+  {
+    id: 'test-wallet',
+    isAvailable: whenTestingWithoutDevice,
+    getTitle: ({ t }) => t('testWallet.connect.title'),
+    page: 'advanced',
+  },
+  {
+    id: 'manage-backups',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('backup.title'),
+    page: 'device',
+  },
+  {
+    id: 'show-recovery-words',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('backup.showMnemonic.title'),
+    page: 'device',
+  },
+  {
+    id: 'device-name',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('bitbox02Settings.deviceName.input'),
+    page: 'device',
+  },
+  {
+    id: 'bluetooth',
+    isAvailable: whenBluetoothToggleIsVisible,
+    getTitle: ({ t }) => t('bitbox02Settings.bluetoothToggleEnabled.titleEnabled'),
+    page: 'device',
+  },
+  {
+    id: 'device-password',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('bitbox02Settings.changePassword.title'),
+    page: 'device',
+  },
+  {
+    id: 'firmware',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.firmware.title'),
+    page: 'device',
+  },
+  {
+    id: 'bluetooth-firmware',
+    isAvailable: whenDeviceSupportsBluetooth,
+    getTitle: ({ t }) => t('deviceSettings.bluetoothFirmware.title'),
+    page: 'device',
+  },
+  {
+    id: 'authenticity-check',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.hardware.attestation.label'),
+    page: 'device',
+  },
+  {
+    id: 'root-fingerprint',
+    isAvailable: whenDeviceExists,
+    getTitle: () => 'Root fingerprint',
+    page: 'device',
+  },
+  {
+    id: 'secure-chip',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.hardware.securechip'),
+    page: 'device',
+  },
+  {
+    id: 'passphrase',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.expert.passphrase.title'),
+    page: 'device',
+  },
+  {
+    id: 'bip85',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.expert.bip85.title'),
+    page: 'device',
+  },
+  {
+    id: 'startup-settings',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('bitbox02Settings.gotoStartupSettings.title'),
+    page: 'device',
+  },
+  {
+    id: 'factory-reset',
+    isAvailable: whenDeviceExists,
+    getTitle: ({ t }) => t('deviceSettings.expert.factoryReset.title'),
+    page: 'device',
+  },
+];
+
+export const getSettingsSearchItems = ({
+  deviceInfo,
+  devices,
+  hasAccounts,
+  isTesting,
+  t,
+}: TGetSettingsSearchItemsArgs): TSettingsSearchItem[] => {
+  const context = {
+    deviceInfo,
+    devices,
+    deviceIDs: Object.keys(devices),
+    hasAccounts,
+    isTesting,
+    t,
+  };
+
+  return SETTINGS_SEARCH_DESCRIPTORS
+    .filter(descriptor => descriptor.isAvailable ? descriptor.isAvailable(context) : true)
+    .map(descriptor => ({
+      id: descriptor.id,
+      title: descriptor.getTitle(context),
+      page: descriptor.page,
+    }));
+};
+
+
+export const filterSettingsSearchItems = (
+  searchItems: TSettingsSearchItem[],
+  searchTerm: string,
+): TSettingsSearchItem[] => {
+  const normalizedSearchTerm = searchTerm.trim().toLowerCase();
+  if (!normalizedSearchTerm) {
+    return [];
+  }
+  return searchItems.filter(searchItem => (
+    searchItem.title.trim().toLowerCase().includes(normalizedSearchTerm)
+  ));
+};
+
+export const groupSearchResultsByPage = (searchResults: TSettingsSearchItem[]) => {
+  const searchResultsByPage: Record<TSettingsSearchPage, TSettingsSearchItem[]> = {
+    about: [],
+    advanced: [],
+    device: [],
+    general: [],
+  };
+
+  searchResults.forEach(searchResult => {
+    searchResultsByPage[searchResult.page].push(searchResult);
+  });
+
+  return searchResultsByPage;
+};
+
+export const SETTINGS_SEARCH_QUERY_PARAM = 'settingsSearch';
diff --git a/frontends/web/src/routes/settings/use-settings-search.test.tsx b/frontends/web/src/routes/settings/use-settings-search.test.tsx
new file mode 100644
index 0000000000..787883fca8
--- /dev/null
+++ b/frontends/web/src/routes/settings/use-settings-search.test.tsx
@@ -0,0 +1,184 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { TDevices } from '@/api/devices';
+import { AppContext } from '@/contexts/AppContext';
+import type { TSessionConfig } from '@/contexts/AppContext';
+import { SETTINGS_SEARCH_QUERY_PARAM } from './settings-search';
+import { useSettingsSearch } from './use-settings-search';
+
+const translations: Record<string, string> = {
+  'backup.title': 'Manage backups',
+  'newSettings.appearance.activeCurrencies.title': 'Active currencies',
+  'newSettings.appearance.defaultCurrency.title': 'Default currency',
+  'newSettings.appearance.language.title': 'Language',
+  'settings.expert.fee': 'Enable custom fees',
+  'testWallet.connect.title': 'Test wallet',
+};
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => translations[key] || key,
+  }),
+}));
+
+vi.mock('@/api/bitbox02', () => ({
+  getDeviceInfo: vi.fn(),
+}));
+
+const noop = () => {};
+
+const createAppContext = (isTesting = false) => ({
+  activeSidebar: false,
+  chartDisplay: 'week' as const,
+  firmwareUpdateDialogOpen: false,
+  guideExists: false,
+  guideShown: false,
+  hideAmounts: false,
+  isDevServers: false,
+  isOnline: true,
+  isTesting,
+  nativeLocale: 'en',
+  sessionConfig: {} as TSessionConfig,
+  setActiveSidebar: noop,
+  setChartDisplay: noop,
+  setFirmwareUpdateDialogOpen: noop,
+  setGuideExists: noop,
+  setHideAmounts: noop,
+  toggleGuide: noop,
+  toggleHideAmounts: noop,
+  toggleSidebar: noop,
+  updateSessionConfig: noop,
+});
+
+const createWrapper = ({
+  initialEntry = '/settings',
+  isTesting = false,
+  onLocationChange,
+}: {
+  initialEntry?: string;
+  isTesting?: boolean;
+  onLocationChange?: (search: string) => void;
+} = {}) => {
+  const LocationObserver = () => {
+    const location = useLocation();
+    onLocationChange?.(location.search);
+    return null;
+  };
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <AppContext.Provider value={createAppContext(isTesting)}>
+      <MemoryRouter initialEntries={[initialEntry]}>
+        <LocationObserver />
+        {children}
+      </MemoryRouter>
+    </AppContext.Provider>
+  );
+};
+
+const renderUseSettingsSearch = ({
+  devices = {},
+  hasAccounts = true,
+  hideSearch = false,
+  initialEntry,
+  isTesting,
+  onLocationChange,
+}: {
+  devices?: TDevices;
+  hasAccounts?: boolean;
+  hideSearch?: boolean;
+  initialEntry?: string;
+  isTesting?: boolean;
+  onLocationChange?: (search: string) => void;
+} = {}) => renderHook(
+  () => useSettingsSearch({
+    devices,
+    hasAccounts,
+    hideSearch,
+  }),
+  {
+    wrapper: createWrapper({
+      initialEntry,
+      isTesting,
+      onLocationChange,
+    }),
+  },
+);
+
+describe('useSettingsSearch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('initializes from the settings search query param', () => {
+    const { result } = renderUseSettingsSearch({
+      initialEntry: `/settings?${SETTINGS_SEARCH_QUERY_PARAM}=DEFAULT%20Curr`,
+    });
+
+    expect(result.current.searchTerm).toBe('DEFAULT Curr');
+    expect(result.current.showSearchResults).toBe(true);
+    expect(result.current.searchResults.map(item => item.title)).toEqual(['Default currency']);
+  });
+
+  it('updates search results and stores the query in the URL', async () => {
+    let currentSearch = '';
+    const { result } = renderUseSettingsSearch({
+      onLocationChange: search => {
+        currentSearch = search;
+      },
+    });
+
+    act(() => {
+      result.current.updateSearchTerm('currency');
+    });
+
+    await waitFor(() => {
+      expect(currentSearch).toBe(`?${SETTINGS_SEARCH_QUERY_PARAM}=currency`);
+    });
+    expect(result.current.showSearchResults).toBe(true);
+    expect(result.current.searchResults.map(item => item.title)).toEqual(['Default currency']);
+  });
+
+  it('removes the query param when the search term is cleared', async () => {
+    let currentSearch = '';
+    const { result } = renderUseSettingsSearch({
+      initialEntry: `/settings?${SETTINGS_SEARCH_QUERY_PARAM}=language`,
+      onLocationChange: search => {
+        currentSearch = search;
+      },
+    });
+
+    act(() => {
+      result.current.updateSearchTerm('');
+    });
+
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+    expect(result.current.searchTerm).toBe('');
+    expect(result.current.showSearchResults).toBe(false);
+  });
+
+  it('keeps search results hidden when search is disabled', () => {
+    const { result } = renderUseSettingsSearch({
+      hideSearch: true,
+      initialEntry: `/settings?${SETTINGS_SEARCH_QUERY_PARAM}=language`,
+    });
+
+    expect(result.current.searchTerm).toBe('language');
+    expect(result.current.searchResults.map(item => item.title)).toEqual(['Language']);
+    expect(result.current.showSearchResults).toBe(false);
+  });
+
+  it('uses app context when building search items', () => {
+    const { result } = renderUseSettingsSearch({
+      isTesting: true,
+      initialEntry: `/settings?${SETTINGS_SEARCH_QUERY_PARAM}=test%20wallet`,
+    });
+
+    expect(result.current.searchResults.map(item => item.title)).toEqual(['Test wallet']);
+  });
+});
diff --git a/frontends/web/src/routes/settings/use-settings-search.ts b/frontends/web/src/routes/settings/use-settings-search.ts
new file mode 100644
index 0000000000..7c3e1ae054
--- /dev/null
+++ b/frontends/web/src/routes/settings/use-settings-search.ts
@@ -0,0 +1,74 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { getDeviceInfo } from '@/api/bitbox02';
+import type { TDevices } from '@/api/devices';
+import { AppContext } from '@/contexts/AppContext';
+import { useLoad } from '@/hooks/api';
+import {
+  SETTINGS_SEARCH_QUERY_PARAM,
+  filterSettingsSearchItems,
+  getSettingsSearchItems,
+} from './settings-search';
+
+type TUseSettingsSearchArgs = {
+  devices: TDevices;
+  hasAccounts: boolean;
+  hideSearch?: boolean;
+};
+
+export const useSettingsSearch = ({
+  devices,
+  hasAccounts,
+  hideSearch,
+}: TUseSettingsSearchArgs) => {
+  const { t } = useTranslation();
+  const { isTesting } = useContext(AppContext);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchTermFromParams = searchParams.get(SETTINGS_SEARCH_QUERY_PARAM) || '';
+  const [searchTerm, setSearchTerm] = useState(searchTermFromParams);
+  const deviceId = Object.keys(devices)[0];
+  const device = deviceId ? devices[deviceId] : undefined;
+  const bb02DeviceId = device === 'bitbox02' ? deviceId : undefined;
+  const deviceInfoResult = useLoad(
+    bb02DeviceId ? () => getDeviceInfo(bb02DeviceId) : null,
+    [bb02DeviceId],
+  );
+  const deviceInfo = deviceInfoResult?.success ? deviceInfoResult.deviceInfo : undefined;
+  const searchItems = useMemo(() => getSettingsSearchItems({
+    deviceInfo,
+    devices,
+    hasAccounts,
+    isTesting,
+    t,
+  }), [deviceInfo, devices, hasAccounts, isTesting, t]);
+  const searchResults = useMemo(
+    () => filterSettingsSearchItems(searchItems, searchTerm),
+    [searchItems, searchTerm],
+  );
+  const showSearchResults = !hideSearch && !!searchTerm.trim();
+
+  useEffect(() => {
+    setSearchTerm(searchTermFromParams);
+  }, [searchTermFromParams]);
+
+  const updateSearchTerm = (value: string) => {
+    setSearchTerm(value);
+    const nextSearchParams = new URLSearchParams(searchParams);
+    if (value.toLowerCase().trim()) {
+      nextSearchParams.set(SETTINGS_SEARCH_QUERY_PARAM, value);
+    } else {
+      nextSearchParams.delete(SETTINGS_SEARCH_QUERY_PARAM);
+    }
+    setSearchParams(nextSearchParams, { replace: true });
+  };
+
+  return {
+    searchResults,
+    searchTerm,
+    showSearchResults,
+    updateSearchTerm,
+  };
+};