diff --git a/src/components/navigator/views/search/NavigatorFilterChipsView.tsx b/src/components/navigator/views/search/NavigatorFilterChipsView.tsx
new file mode 100644
index 0000000..a78543f
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorFilterChipsView.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { LocalizeText, SearchFilterOptions } from '../../../../api';
+
+interface NavigatorFilterChipsViewProps
+{
+    value: number;
+    onChange: (index: number) => void;
+}
+
+export const NavigatorFilterChipsView: FC<NavigatorFilterChipsViewProps> = props =>
+{
+    const { value, onChange } = props;
+
+    return (
+        <div className="flex flex-wrap gap-1">
+            { SearchFilterOptions.map((filter, index) =>
+            {
+                const isActive = (value === index);
+
+                return (
+                    <button
+                        key={ index }
+                        type="button"
+                        onClick={ () => onChange(index) }
+                        className={ `px-2 py-0.5 rounded-full text-[11px] border cursor-pointer transition-colors ${ isActive ? 'bg-primary text-white border-primary' : 'bg-card-grid-item text-gray-600 border-card-grid-item-border hover:bg-primary hover:text-white hover:border-primary' }` }>
+                        { LocalizeText('navigator.filter.' + filter.name) }
+                    </button>
+                );
+            }) }
+        </div>
+    );
+};
diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx
index ae595fa..e1daa11 100644
--- a/src/components/navigator/views/search/NavigatorSearchView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchView.tsx
@@ -4,6 +4,7 @@ import { FaSearch } from 'react-icons/fa';
 import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
 import { Button } from '../../../../common';
 import { useNavigatorData, useNavigatorUiStore } from '../../../../hooks';
+import { NavigatorFilterChipsView } from './NavigatorFilterChipsView';
 
 interface NavigatorSearchViewProps
 {
@@ -77,15 +78,8 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
     };
 
     return (
-        <div className="flex w-full gap-1">
-            <div className="flex shrink-0">
-                <select className="form-select" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
-                    { SearchFilterOptions.map((filter, index) =>
-                    {
-                        return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>;
-                    }) }
-                </select>
-            </div>
+        <div className="flex w-full flex-col gap-1">
+            <NavigatorFilterChipsView value={ searchFilterIndex } onChange={ setSearchFilterIndex } />
             <div className="flex w-full gap-1">
                 <input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ inputText } onChange={ event => setInputText(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
                 <Button variant="primary" onClick={ processSearch }>