diff --git a/docs/pages/webitel-ui/components/wt-search-bar/Readme.md b/docs/pages/webitel-ui/components/wt-search-bar/Readme.md
index 1833cc98..990dda6f 100644
--- a/docs/pages/webitel-ui/components/wt-search-bar/Readme.md
+++ b/docs/pages/webitel-ui/components/wt-search-bar/Readme.md
@@ -1,18 +1,40 @@
 <script setup>
-import Docs from './wt-search-bar-docs.vue';
 import ExampleSearchBar from './examples/example-search-bar.vue';
 import ExampleHintedSearchBar from './examples/example-hinted-search-bar.vue';
 import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
+import ExampleSearchBarWithSearchModes from './examples/example-search-bar-with-search-modes.vue';
 </script>
 
 # WtSearchBar
 
 ## Props
-::: raw
-<Docs/>
-:::
+
+| Name                | Type     | Default  | Description                               |
+|---------------------|----------|----------|-------------------------------------------|
+| `value`             | `String` | `''`     | The value of the search bar               |
+| `placeholder`       | `String` | 'Search' | The placeholder of the search bar         |
+| `hint`              | `String` | `''`     | The hint of the search bar                |
+| `v`                 | `Object` | `''`     | Validation object                         |
+| `customValidators`  | `Array`  | `[]`     | Custom validators for validation object   |
+| `searchMode`        | `String` | `''`     | The search mode of the search bar         |
+| `searchModeOptions` | `Array`  | `[]`     | The search mode options of the search bar |
+
+## Events
+
+| Name     | Params            | Description                                                                                                |
+|----------|-------------------|------------------------------------------------------------------------------------------------------------|
+| `input`  | `value`: `String` | Emitted when the value of the search bar changes (not debounced!)                                          |
+| `search` | `value`: `String` | Sends changed value, immediately, or, if "debounced" is on, debounced. Recommended for api search requests |
+
+## Slots
+
+| Name                 | Scope                  | Description                                                                |
+|----------------------|------------------------|----------------------------------------------------------------------------|
+| `search-icon`        | `{ invalid: Boolean }` | Change default search icon                                                 |
+| `additional-actions` | `{ invalid: Boolean }` | Adding additional functionality to search bar. For example wt-context-menu |
 
 ## Example SearchBar
+
 ::: raw
 <ExampleSearchBar/>
 :::
@@ -22,6 +44,7 @@ import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
 :::
 
 ## Example HintedSearchBar
+
 ::: raw
 <ExampleHintedSearchBar/>
 :::
@@ -31,6 +54,7 @@ import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
 :::
 
 ## Example InvalidSearchBar
+
 ::: raw
 <ExampleInvalidSearchBar/>
 :::
@@ -38,3 +62,13 @@ import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
 ::: details Code
 <<< ./examples/example-invalid-search-bar.vue
 :::
+
+## Example SearchBarWithSearchModes
+
+::: raw
+<ExampleSearchBarWithSearchModes />
+:::
+
+::: details Code
+<<< ./examples/example-search-bar-with-search-modes.vue
+:::
diff --git a/docs/pages/webitel-ui/components/wt-search-bar/examples/example-search-bar-with-search-modes.vue b/docs/pages/webitel-ui/components/wt-search-bar/examples/example-search-bar-with-search-modes.vue
new file mode 100644
index 00000000..73a0998e
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-search-bar/examples/example-search-bar-with-search-modes.vue
@@ -0,0 +1,37 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const value = ref('');
+
+const searchModeOptions = [
+  {
+    value: 'mode 1',
+    text: 'Mode 1',
+  },
+  {
+    value: 'mode 2',
+    text: 'Mode 2',
+  },
+];
+
+const searchMode = ref(searchModeOptions[0]);
+</script>
+
+<template>
+  <wt-search-bar
+    :value="value"
+    placeholder="Search"
+    hint="I have search modes!"
+    :searchMode="searchMode"
+    :searchModeOptions="searchModeOptions"
+    @input="value = $event"
+    @change:search-mode="searchMode = $event"
+  />
+  <p>Value: {{ value }}</p>
+  <p>Search mode: {{ searchMode }}</p>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-search-bar/wt-search-bar-docs.vue b/docs/pages/webitel-ui/components/wt-search-bar/wt-search-bar-docs.vue
deleted file mode 100644
index dbb3ba25..00000000
--- a/docs/pages/webitel-ui/components/wt-search-bar/wt-search-bar-docs.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <component-model />
-  <component-props
-    :properties="properties"
-  />
-  <component-events
-    :events="events"
-  />
-  <component-slots
-    :slots="slots"
-  />
-</template>
-
-<script>
-import Prism from 'prismjs';
-
-export default {
-  name: 'WtSearchBarDocs',
-  data: () => ({
-    properties: [
-      {
-        value: 'value',
-        code: '<wt-search-bar :value="value"></wt-search-bar>',
-        type: 'String',
-        default: '',
-      },
-      {
-        value: 'placeholder',
-        code: '<wt-search-bar placeholder="placeholder"></wt-search-bar>',
-        type: 'String',
-        default: 'Search',
-      },
-      {
-        value: 'debounce',
-        code: '<wt-search-bar debounce></wt-search-bar>',
-        type: 'Boolean',
-        default: 'false',
-        description: 'If true, @search event is delayed for debounceDelay from last change',
-      },
-      {
-        value: 'debounceDelay',
-        code: '<wt-search-bar debounce-delay="2000" debounce></wt-search-bar>',
-        type: 'Number',
-        default: '1000',
-      },
-      {
-        value: 'outline',
-        code: '<wt-search-bar outline></wt-search-bar>',
-        type: 'Boolean',
-        default: 'false',
-      },
-      {
-        value: 'hint',
-        code: '<wt-search-bar :hint="\'Hint\'"></wt-search-bar>',
-        type: 'String',
-      },
-      {
-        value: 'v',
-        code: '<wt-search-bar :v="vInvalid"></wt-search-bar>',
-        type: 'Object',
-        default: '',
-      },
-      {
-        value: 'customValidators',
-        code: '<wt-search-bar :custom-validators="[customV]"></wt-search-bar>',
-        type: 'Array',
-        default: '() => []',
-      },
-    ],
-    events: [
-      {
-        value: 'input',
-        params: [
-          { name: 'value', type: 'String', description: 'immediately sends changed value' },
-        ],
-      },
-      {
-        value: 'enter',
-        params: [
-          {
-            name: 'value',
-            type: 'String',
-            description: 'immediately sends immediate changed value on Enter key press',
-          },
-        ],
-      },
-      {
-        value: 'search',
-        params: [
-          {
-            name: 'value',
-            type: 'String',
-            description: 'Sends changed value, immediately, or, if "debounced" is on, debounced. Recommended for api search requests',
-          },
-        ],
-      },
-      {
-        value: 'PLUS ALL NATIVE INPUT EVENTS',
-      },
-    ],
-    slots: [
-      {
-        name: 'search-icon',
-        scope: [{ name: 'invalid', description: 'needed to change icons color in additional-actions slot' }],
-        description: 'Change default search icon',
-      },
-      {
-        name: 'additional-actions',
-        scope: [{ name: 'invalid', description: 'needed to change icons color in additional-actions slot' }],
-        description: 'Adding additional functionality to search bar. For example wt-context-menu',
-      },
-    ],
-    vInvalid: {
-      $error: true,
-      $dirty: true,
-      required: false,
-    },
-  }),
-  mounted() {
-    Prism.highlightAll();
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/package.json b/package.json
index 72364359..07d69c02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.54",
+  "version": "24.2.55",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/wt-search-bar/wt-search-bar.vue b/src/components/wt-search-bar/wt-search-bar.vue
index 19250321..1571cf52 100644
--- a/src/components/wt-search-bar/wt-search-bar.vue
+++ b/src/components/wt-search-bar/wt-search-bar.vue
@@ -39,6 +39,32 @@
         >
           {{ hint }}
         </wt-hint>
+
+        <wt-context-menu
+          v-if="searchMode"
+          :options="searchModeOptions"
+          @click="emit('change:search-mode', $event.option)"
+        >
+          <template #activator>
+            <wt-tooltip>
+              <template #activator>
+                <wt-icon-btn
+                  :color="invalid ? 'error' : 'default'"
+                  icon="filter"
+                />
+              </template>
+              {{ $t('webitelUI.searchBar.settingsHint') }}
+            </wt-tooltip>
+          </template>
+          <template #option="{ value, text }">
+            <wt-radio
+              :label="text"
+              :selected="searchMode.value === value"
+              :value="true"
+            />
+          </template>
+        </wt-context-menu>
+
         <slot
           :invalid="invalid"
           name="additional-actions"
@@ -78,12 +104,20 @@ const props = defineProps({
     type: String,
     description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
   },
+  searchMode: {
+    type: String,
+  },
+  searchModeOptions: {
+    type: Array,
+    default: () => ([]),
+  },
 });
 
 const emit = defineEmits([
   'input',
   'search',
   'enter',
+  'change:search-mode',
 ]);
 
 const { v, customValidators } = toRefs(props);