diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb7cecc17c..87caaeb17a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Upgraded versions of `follow-redirects` and `es5-ext` [#6626](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6626)
 - Changed agent log collector socket API response controller component [#6660](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6660)
 - Improve margins and paddins in the Events, Inventory and Control tabs [#6708](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6708)
+- Refactored the search bar to correctly handle fixed and user-added filters [#6716](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6716)
 
 ### Fixed
 
diff --git a/plugins/main/public/components/common/custom-search-bar/custom-search-bar.tsx b/plugins/main/public/components/common/custom-search-bar/custom-search-bar.tsx
index c7215bd4ba..dfb1cf6d96 100644
--- a/plugins/main/public/components/common/custom-search-bar/custom-search-bar.tsx
+++ b/plugins/main/public/components/common/custom-search-bar/custom-search-bar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Filter,
   IndexPattern,
@@ -14,8 +14,8 @@ import { tFilter } from '../data-source';
 import { MultiSelect } from './components';
 import { getCustomValueSuggestion } from '../../../components/overview/office/panel/config/helpers/helper-value-suggestion';
 import { I18nProvider } from '@osd/i18n/react';
-import { getPlugins } from '../../../kibana-services';
 import { tUseSearchBarProps } from '../search-bar/use-search-bar';
+import { WzSearchBar } from '../search-bar/search-bar';
 
 type CustomSearchBarProps = {
   filterInputs: {
@@ -29,16 +29,15 @@ type CustomSearchBarProps = {
   setFilters: (filters: tFilter[]) => void;
 };
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 export const CustomSearchBar = ({
   filterInputs,
   filterDrillDownValue = { field: '', value: '' },
   searchBarProps,
   indexPattern,
-  setFilters
+  setFilters,
 }: CustomSearchBarProps) => {
-  const { filters } = searchBarProps;
+  const { filters, fixedFilters } = searchBarProps;
+
   const defaultSelectedOptions = () => {
     const array = [];
     filterInputs.forEach(item => {
@@ -60,7 +59,7 @@ export const CustomSearchBar = ({
   }, [values]);
 
   useEffect(() => {
-    onFiltersUpdated();
+    refreshCustomSelectedFilter();
   }, [filters]);
 
   const checkSelectDrillDownValue = key => {
@@ -69,8 +68,9 @@ export const CustomSearchBar = ({
       ? true
       : false;
   };
-  const onFiltersUpdated = () => {
-    refreshCustomSelectedFilter();
+
+  const onFiltersUpdated = (filters?: Filter[]) => {
+    setFilters([...fixedFilters, filters]);
   };
 
   const changeSwitch = () => {
@@ -138,7 +138,16 @@ export const CustomSearchBar = ({
 
     const getFilterCustom = item => {
       // ToDo: Make this generic, without office 365 hardcode
-      return item.params.map((element) => ({ checked: 'on', label: item.key === 'data.office365.UserType' ? getLabelUserType(element) : element, value: item.key, key: element, filterByKey: item.key === 'data.office365.UserType' ? true : false }));
+      return item.params.map(element => ({
+        checked: 'on',
+        label:
+          item.key === 'data.office365.UserType'
+            ? getLabelUserType(element)
+            : element,
+        value: item.key,
+        key: element,
+        filterByKey: item.key === 'data.office365.UserType' ? true : false,
+      }));
     };
     const getLabelUserType = element => {
       const userTypeOptions = getCustomValueSuggestion(
@@ -148,7 +157,8 @@ export const CustomSearchBar = ({
         (item, index) => index.toString() === element,
       );
     };
-    const filterCustom = currentFilters.map(item => getFilterCustom(item)) || [];
+    const filterCustom =
+      currentFilters.map(item => getFilterCustom(item)) || [];
     if (filterCustom.length != 0) {
       filterCustom.forEach(item => {
         item.forEach(element => {
@@ -191,46 +201,33 @@ export const CustomSearchBar = ({
 
   return (
     <I18nProvider>
-      <EuiFlexGroup
-        className='custom-kbn-search-bar'
-        alignItems='center'
-        style={{ margin: '0 8px' }}
-      >
-        {!avancedFiltersState
-          ? filterInputs.map((item, key) => (
-            <EuiFlexItem key={key}>{getComponent(item)}</EuiFlexItem>
-          ))
-          : ''}
-        <EuiFlexItem>
-          <div className='wz-search-bar hide-filter-control'>
-            <SearchBar
-              {...searchBarProps}
-              showFilterBar={false}
-              showQueryInput={avancedFiltersState}
-              onFiltersUpdated={onFiltersUpdated}
-            />
-          </div>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiFlexGroup justifyContent='flexEnd' style={{ margin: '0 20px' }}>
-        <EuiFlexItem className={'filters-search-bar'} style={{ margin: '0px' }}>
-          <div className='wz-search-bar hide-filter-control'>
-            <SearchBar
-              {...searchBarProps}
-              showDatePicker={false}
-              showQueryInput={false}
-              onFiltersUpdated={onFiltersUpdated}
+      <div style={{ margin: '20px 20px 0px 20px' }}>
+        <WzSearchBar
+          {...searchBarProps}
+          showQueryInput={avancedFiltersState}
+          onFiltersUpdated={onFiltersUpdated}
+          preQueryBar={
+            !avancedFiltersState ? (
+              <EuiFlexGroup
+                className='custom-kbn-search-bar'
+                alignItems='center'
+                gutterSize='s'
+              >
+                {filterInputs.map((item, key) => (
+                  <EuiFlexItem key={key}>{getComponent(item)}</EuiFlexItem>
+                ))}
+              </EuiFlexGroup>
+            ) : null
+          }
+          postFilters={
+            <EuiSwitch
+              label='Advanced filters'
+              checked={avancedFiltersState}
+              onChange={() => changeSwitch()}
             />
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiSwitch
-            label='Advanced filters'
-            checked={avancedFiltersState}
-            onChange={() => changeSwitch()}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+          }
+        />
+      </div>
     </I18nProvider>
   );
 };
diff --git a/plugins/main/public/components/common/data-source/hooks/use-data-source.test.ts b/plugins/main/public/components/common/data-source/hooks/use-data-source.test.ts
index bc483f2850..ed02e32119 100644
--- a/plugins/main/public/components/common/data-source/hooks/use-data-source.test.ts
+++ b/plugins/main/public/components/common/data-source/hooks/use-data-source.test.ts
@@ -126,4 +126,3 @@ describe('useDataSource hook', () => {
 
 
 })
-
diff --git a/plugins/main/public/components/common/data-source/hooks/use-data-source.ts b/plugins/main/public/components/common/data-source/hooks/use-data-source.ts
index 8f74cd6df3..22be9e6980 100644
--- a/plugins/main/public/components/common/data-source/hooks/use-data-source.ts
+++ b/plugins/main/public/components/common/data-source/hooks/use-data-source.ts
@@ -27,7 +27,6 @@ type tUseDataSourceLoadedReturns<K> = {
   dataSource: K;
   filters: tFilter[];
   fetchFilters: tFilter[];
-  fixedFilters: tFilter[];
   fetchData: (params: Omit<tSearchParams, 'filters'>) => Promise<any>;
   setFilters: (filters: tFilter[]) => void;
   filterManager: PatternDataSourceFilterManager;
@@ -38,7 +37,6 @@ type tUseDataSourceNotLoadedReturns = {
   dataSource: undefined;
   filters: [];
   fetchFilters: [];
-  fixedFilters: [];
   fetchData: (params: Omit<tSearchParams, 'filters'>) => Promise<any>;
   setFilters: (filters: tFilter[]) => void;
   filterManager: null;
@@ -126,20 +124,13 @@ export function useDataSource<
       setDataSourceFilterManager(dataSourceFilterManager);
       setIsLoading(false);
     })();
-  
+
     return () => subscription && subscription.unsubscribe();
   }, []);
 
   useEffect(() => {
     if (dataSourceFilterManager && dataSource) {
-      if (pinnedAgentManager.isPinnedAgent()) {
-        const pinnedAgent = PatternDataSourceFilterManager.getPinnedAgentFilter(
-          dataSource.id,
-        );
-
-        dataSourceFilterManager.addFilters([...pinnedAgent]);
-      } else {
-        const pinnedAgentFilter = dataSourceFilterManager
+      const pinnedAgentFilter = dataSourceFilterManager
         .getFilters()
         .filter(
           (filter: tFilter) =>
@@ -147,10 +138,15 @@ export function useDataSource<
             PinnedAgentManager.FILTER_CONTROLLED_PINNED_AGENT_KEY,
         );
 
-        if(pinnedAgentFilter.length){
-          dataSourceFilterManager.removeFilter(pinnedAgentFilter[0])
-        }
+      if (pinnedAgentFilter.length) {
+        dataSourceFilterManager.removeFilter(pinnedAgentFilter[0]);
+      }
+      if (pinnedAgentManager.isPinnedAgent()) {
+        const pinnedAgent = PatternDataSourceFilterManager.getPinnedAgentFilter(
+          dataSource.id,
+        );
 
+        dataSourceFilterManager.addFilters([...pinnedAgent]);
       }
     }
   }, [JSON.stringify(pinnedAgent)]);
@@ -161,7 +157,6 @@ export function useDataSource<
       dataSource: undefined,
       filters: [],
       fetchFilters: [],
-      fixedFilters: [],
       fetchData,
       setFilters,
       filterManager: null,
@@ -172,7 +167,6 @@ export function useDataSource<
       dataSource: dataSource as K,
       filters: allFilters,
       fetchFilters,
-      fixedFilters: dataSourceFilterManager?.getFixedFilters() || [],
       fetchData,
       setFilters,
       filterManager: dataSourceFilterManager as PatternDataSourceFilterManager,
diff --git a/plugins/main/public/components/common/search-bar/index.ts b/plugins/main/public/components/common/search-bar/index.ts
index 9ed04b634b..3d6ee87f22 100644
--- a/plugins/main/public/components/common/search-bar/index.ts
+++ b/plugins/main/public/components/common/search-bar/index.ts
@@ -1,2 +1,3 @@
 export * from './search-bar-service';
 export * from './use-search-bar';
+export * from './search-bar';
diff --git a/plugins/main/public/components/common/search-bar/search-bar.scss b/plugins/main/public/components/common/search-bar/search-bar.scss
new file mode 100644
index 0000000000..a952bea825
--- /dev/null
+++ b/plugins/main/public/components/common/search-bar/search-bar.scss
@@ -0,0 +1,3 @@
+.wz-search-bar-no-padding .globalQueryBar:not(:empty) {
+  padding: 0px !important;
+}
diff --git a/plugins/main/public/components/common/search-bar/search-bar.tsx b/plugins/main/public/components/common/search-bar/search-bar.tsx
new file mode 100644
index 0000000000..ff67a0c964
--- /dev/null
+++ b/plugins/main/public/components/common/search-bar/search-bar.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { getPlugins } from '../../../kibana-services';
+import './search-bar.scss';
+import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
+import {
+  SearchBarProps,
+  Filter,
+} from '../../../../../../src/plugins/data/public';
+
+export interface WzSearchBarProps extends SearchBarProps {
+  fixedFilters?: Filter[];
+  userFilters?: Filter[];
+  preQueryBar?: React.ReactElement;
+  postFilters?: React.ReactElement;
+}
+
+export const WzSearchBar = ({
+  fixedFilters = [],
+  userFilters = [],
+  preQueryBar,
+  postFilters,
+  ...restProps
+}: WzSearchBarProps) => {
+  const SearchBar = getPlugins().data.ui.SearchBar;
+
+  const showQuery =
+    restProps.showQueryBar ||
+    restProps.showQueryInput ||
+    restProps.showDatePicker !== false;
+  const showFilters = restProps.showFilterBar !== false;
+
+  return (
+    <EuiPanel
+      className='wz-search-bar wz-search-bar-no-padding'
+      paddingSize='s'
+      hasShadow={false}
+      hasBorder={false}
+      color='transparent'
+      grow={false}
+    >
+      {showQuery ? (
+        <EuiFlexGroup
+          gutterSize='s'
+          alignItems='center'
+          responsive={false}
+          wrap={true}
+        >
+          {preQueryBar ? <EuiFlexItem>{preQueryBar}</EuiFlexItem> : null}
+          <EuiFlexItem grow={!preQueryBar}>
+            <SearchBar {...restProps} showFilterBar={false} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : null}
+      {showFilters ? (
+        <EuiFlexGroup gutterSize='s'>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup
+              gutterSize='xs'
+              className='globalFilterBar globalFilterGroup__filterBar'
+              responsive={false}
+              wrap={true}
+            >
+              {fixedFilters?.map((filter, idx) => (
+                <EuiFlexItem grow={false} key={idx}>
+                  <EuiBadge className='globalFilterItem' color='hollow'>
+                    {`${filter.meta.key}: ${typeof filter.meta.value === 'function'
+                      ? filter.meta.value()
+                      : filter.meta.value
+                      }`}
+                  </EuiBadge>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              gutterSize='s'
+              alignItems='center'
+              responsive={false}
+              wrap={true}
+            >
+              <EuiFlexItem>
+                <SearchBar
+                  {...restProps}
+                  filters={userFilters}
+                  showQueryBar={false}
+                  useDefaultBehaviors={false}
+                />
+              </EuiFlexItem>
+              {postFilters ? (
+                <EuiFlexItem grow={false}>{postFilters}</EuiFlexItem>
+              ) : null}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : null}
+    </EuiPanel>
+  );
+};
diff --git a/plugins/main/public/components/common/search-bar/use-search-bar.ts b/plugins/main/public/components/common/search-bar/use-search-bar.ts
index 050d788a00..6dbe68cfb5 100644
--- a/plugins/main/public/components/common/search-bar/use-search-bar.ts
+++ b/plugins/main/public/components/common/search-bar/use-search-bar.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState, useLayoutEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
   SearchBarProps,
   TimeRange,
@@ -9,7 +9,7 @@ import {
 } from '../../../../../../src/plugins/data/public';
 import { getDataPlugin } from '../../../kibana-services';
 import { useQueryManager, useTimeFilter } from '../hooks';
-import { hideCloseButtonOnFixedFilters } from './search-bar-service';
+
 // Input - types
 type tUseSearchBarCustomInputs = {
   indexPattern: IndexPattern;
@@ -46,7 +46,9 @@ const useSearchBarConfiguration = (
     timeHistory,
     setTimeFilter: setGlobalTimeFilter,
   } = useTimeFilter();
-  const filters = defaultFilters ? defaultFilters : [];
+  const filters = defaultFilters ?? [];
+  const fixedFilters = filters.filter(filter => filter.meta.controlledBy);
+  const userFilters = filters.filter(filter => !filter.meta.controlledBy);
   const [timeFilter, setTimeFilter] = useState(globalTimeFilter);
   const [query, setQuery] = props?.setQuery
     ? useState(props?.query || { query: '', language: 'kuery' })
@@ -56,31 +58,6 @@ const useSearchBarConfiguration = (
   const [isLoading, setIsLoading] = useState(true);
   const [indexPatternSelected, setIndexPatternSelected] =
     useState<IndexPattern>(indexPattern);
-  const TIMEOUT_MILISECONDS = 100;
-
-  const hideRemoveFilter = (filters, retry: number = 0) => {
-    const allFilters = filters;
-    let elements = document.querySelectorAll(
-      '.wz-search-bar .globalFilterItem',
-    );
-    // when the filters are not empty in DOM and the length is equal to the filters length
-    if (elements.length > 0 && elements.length === allFilters.length) {
-      hideCloseButtonOnFixedFilters(allFilters, elements);
-    } else if (retry < 10) {
-      // the setTimeout is used to wait for the DOM elements to be rendered
-      setTimeout(() => {
-        // this is a workaround to hide the close button on fixed filters via vanilla js
-        hideRemoveFilter(allFilters, ++retry);
-      }, TIMEOUT_MILISECONDS);
-    }
-  };
-
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      // this is a workaround to hide the close button on fixed filters via vanilla js
-      hideRemoveFilter(filters);
-    }, TIMEOUT_MILISECONDS);
-  }, [filters]);
 
   useEffect(() => {
     if (indexPattern) {
@@ -125,16 +102,19 @@ const useSearchBarConfiguration = (
   > = {
     isLoading,
     ...(indexPatternSelected && { indexPatterns: [indexPatternSelected] }), // indexPattern cannot be empty or empty []
-    filters: filters,
+    filters,
+    fixedFilters,
+    userFilters,
     query,
     timeHistory,
     dateRangeFrom: timeFilter.from,
     dateRangeTo: timeFilter.to,
-    onFiltersUpdated: (filters: Filter[]) => {
+    onFiltersUpdated: (userFilters: Filter[]) => {
+      const allFilters = [...fixedFilters, ...userFilters];
       setFilters
-        ? setFilters(filters)
+        ? setFilters(allFilters)
         : console.warn('setFilters function is not defined');
-      props?.onFiltersUpdated && props?.onFiltersUpdated(filters);
+      props?.onFiltersUpdated && props?.onFiltersUpdated(allFilters);
     },
     onQuerySubmit: (
       payload: { dateRange: TimeRange; query?: Query },
diff --git a/plugins/main/public/components/common/wazuh-discover/discover.scss b/plugins/main/public/components/common/wazuh-discover/discover.scss
index 46de648c6c..75347f3b07 100644
--- a/plugins/main/public/components/common/wazuh-discover/discover.scss
+++ b/plugins/main/public/components/common/wazuh-discover/discover.scss
@@ -8,7 +8,7 @@
   }
 
   .discoverDataGrid {
-    height: calc(100vh - 464px);
+    height: calc(100vh - 458px);
   }
 
   .discoverChartContainer {
diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
index 7693bf2e6a..9fc73e4748 100644
--- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
+++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx
@@ -42,6 +42,7 @@ import {
 } from '../data-source';
 import DiscoverDataGridAdditionalControls from './components/data-grid-additional-controls';
 import { wzDiscoverRenderColumns } from './render-columns';
+import { WzSearchBar } from '../search-bar';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
 
@@ -57,7 +58,6 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
     throw new Error('DataSource is required');
   }
 
-  const SearchBar = getPlugins().data.ui.SearchBar;
   const [results, setResults] = useState<SearchResponse>({} as SearchResponse);
   const [inspectedHit, setInspectedHit] = useState<any>(undefined);
   const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(
@@ -86,7 +86,6 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
     [results],
   );
 
-
   const DocViewInspectButton = ({
     rowIndex,
   }: EuiDataGridCellValueElementProps) => {
@@ -193,87 +192,88 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
         paddingSize='none'
         pageContentProps={{ color: 'transparent' }}
       >
-        <>
-          {isDataSourceLoading ? (
-            <LoadingSpinner />
-          ) : (
-            <div className='wz-discover hide-filter-control wz-search-bar'>
-              <SearchBar
-                appName='wazuh-discover-search-bar'
-                {...searchBarProps}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
-          )}
-          {!isDataSourceLoading && results?.hits?.total === 0 ? (
-            <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-          ) : null}
-          {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
-            <EuiPanel paddingSize='s' hasShadow={false} hasBorder={false} color="transparent">
-              <EuiFlexGroup gutterSize='s' direction='column'>
-                <EuiFlexItem grow={false} className='discoverChartContainer'>
-                  <EuiPanel
-                    hasBorder={false}
-                    hasShadow={false}
-                    color='transparent'
-                    paddingSize='none'
-                  >
-                    <EuiPanel>
-                      <DashboardByRenderer
-                        input={histogramChartInput(
-                          dataSource?.title,
-                          fetchFilters,
-                          query,
-                          dateRangeFrom,
-                          dateRangeTo,
-                        )}
-                      />
-                    </EuiPanel>
+        {isDataSourceLoading ? (
+          <LoadingSpinner />
+        ) : (
+          <WzSearchBar
+            appName='wazuh-discover-search-bar'
+            {...searchBarProps}
+            showQueryInput={true}
+            showQueryBar={true}
+            showSaveQuery={true}
+          />
+        )}
+        {!isDataSourceLoading && results?.hits?.total === 0 ? (
+          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+        ) : null}
+        {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
+          <EuiPanel
+            paddingSize='s'
+            hasShadow={false}
+            hasBorder={false}
+            color='transparent'
+          >
+            <EuiFlexGroup gutterSize='s' direction='column'>
+              <EuiFlexItem grow={false} className='discoverChartContainer'>
+                <EuiPanel
+                  hasBorder={false}
+                  hasShadow={false}
+                  color='transparent'
+                  paddingSize='none'
+                >
+                  <EuiPanel>
+                    <DashboardByRenderer
+                      input={histogramChartInput(
+                        dataSource?.title,
+                        fetchFilters,
+                        query,
+                        dateRangeFrom,
+                        dateRangeTo,
+                      )}
+                    />
                   </EuiPanel>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false} className='discoverDataGrid'>
-                  <EuiDataGrid
-                    {...dataGridProps}
-                    className={sideNavDocked ? 'dataGridDockedNav' : ''}
-                    toolbarVisibility={{
-                      additionalControls: (
-                        <>
-                          <DiscoverDataGridAdditionalControls
-                            totalHits={results.hits.total}
-                            isExporting={isExporting}
-                            onClickExportResults={onClickExportResults}
-                            maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
-                          />
-                        </>
-                      ),
-                    }}
+                </EuiPanel>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} className='discoverDataGrid'>
+                <EuiDataGrid
+                  {...dataGridProps}
+                  className={sideNavDocked ? 'dataGridDockedNav' : ''}
+                  toolbarVisibility={{
+                    additionalControls: (
+                      <>
+                        <DiscoverDataGridAdditionalControls
+                          totalHits={results.hits.total}
+                          isExporting={isExporting}
+                          onClickExportResults={onClickExportResults}
+                          maxEntriesPerQuery={MAX_ENTRIES_PER_QUERY}
+                        />
+                      </>
+                    ),
+                  }}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        ) : null}
+        {inspectedHit && (
+          <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
+            <EuiFlyoutHeader>
+              <EuiTitle>
+                <h2>Document Details</h2>
+              </EuiTitle>
+            </EuiFlyoutHeader>
+            <EuiFlyoutBody>
+              <EuiFlexGroup direction='column'>
+                <EuiFlexItem>
+                  <DocumentViewTableAndJson
+                    document={inspectedHit}
+                    indexPattern={indexPattern}
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </EuiPanel>
-          ) : null}
-          {inspectedHit && (
-            <EuiFlyout onClose={() => setInspectedHit(undefined)} size='m'>
-              <EuiFlyoutHeader>
-                <EuiTitle>
-                  <h2>Document Details</h2>
-                </EuiTitle>
-              </EuiFlyoutHeader>
-              <EuiFlyoutBody>
-                <EuiFlexGroup direction='column'>
-                  <EuiFlexItem>
-                    <DocumentViewTableAndJson
-                      document={inspectedHit}
-                      indexPattern={indexPattern}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlyoutBody>
-            </EuiFlyout>
-          )}
-        </>
+            </EuiFlyoutBody>
+          </EuiFlyout>
+        )}
       </EuiPageTemplate>
     </IntlProvider>
   );
diff --git a/plugins/main/public/components/endpoints-summary/table/agents-table.test.tsx b/plugins/main/public/components/endpoints-summary/table/agents-table.test.tsx
index 82ec294d7f..f42a7938fb 100644
--- a/plugins/main/public/components/endpoints-summary/table/agents-table.test.tsx
+++ b/plugins/main/public/components/endpoints-summary/table/agents-table.test.tsx
@@ -282,11 +282,12 @@ jest.mock('../../../kibana-services', () => ({
       getUrlForApp: () => 'http://url',
     },
   }),
+  getAngularModule: () => { }
 }));
 
 jest.mock('../../../react-services/common-services', () => ({
   getErrorOrchestrator: () => ({
-    handleError: options => {},
+    handleError: options => { },
   }),
 }));
 
diff --git a/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx b/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
index 74048e8166..47a2afde62 100644
--- a/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/management/cluster/dashboard/dashboard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { getCore, getPlugins } from '../../../../kibana-services';
+import { getCore } from '../../../../kibana-services';
 import { SearchResponse } from '../../../../../../../src/core/server';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common';
 import { I18nProvider } from '@osd/i18n/react';
@@ -25,8 +25,7 @@ import {
   tParsedIndexPattern,
   useDataSource,
 } from '../../../common/data-source';
-
-const SearchBar = getPlugins().data.ui.SearchBar;
+import { WzSearchBar } from '../../../common/search-bar'
 
 interface DashboardCTProps {
   statusRunning: string;
@@ -160,21 +159,19 @@ const DashboardCT: React.FC<DashboardCTProps> = ({ statusRunning }) => {
         {isDataSourceLoading && !dataSource ? (
           <LoadingSpinner />
         ) : !state.showNodes ? (
-          <div className='wz-search-bar hide-filter-control'>
-            <SearchBar
-              appName='ct-searchbar'
-              {...searchBarProps}
-              showDatePicker={true}
-              showQueryInput={true}
-              showQueryBar={true}
-            />
-          </div>
+          <WzSearchBar
+            appName='ct-searchbar'
+            {...searchBarProps}
+            showDatePicker={true}
+            showQueryInput={true}
+            showQueryBar={true}
+          />
         ) : null}
         <EuiSpacer size='m' />
         {!isDataSourceLoading &&
-        dataSource &&
-        !state.showConfig &&
-        !state.showNodes ? (
+          dataSource &&
+          !state.showConfig &&
+          !state.showNodes ? (
           <OverviewCards
             goNodes={goNodes}
             goAgents={goAgents}
diff --git a/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx b/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
index 835dba480d..e5317210c2 100644
--- a/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/amazon-web-services/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardAWSComponents: React.FC = ({}) => {
@@ -99,15 +98,13 @@ const DashboardAWSComponents: React.FC = ({}) => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='aws-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='aws-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/compliance-table/compliance-table.tsx b/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
index 0401330b53..9a1fed9ebf 100644
--- a/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
+++ b/plugins/main/public/components/overview/compliance-table/compliance-table.tsx
@@ -19,7 +19,6 @@ import { gdprRequirementsFile } from '../../../../common/compliance-requirements
 import { hipaaRequirementsFile } from '../../../../common/compliance-requirements/hipaa-requirements';
 import { nistRequirementsFile } from '../../../../common/compliance-requirements/nist-requirements';
 import { tscRequirementsFile } from '../../../../common/compliance-requirements/tsc-requirements';
-import { getPlugins } from '../../../kibana-services';
 import {
   DATA_SOURCE_FILTER_CONTROLLED_REGULATORY_COMPLIANCE_REQUIREMENT,
   UI_LOGGER_LEVELS,
@@ -39,8 +38,7 @@ import useSearchBar from '../../common/search-bar/use-search-bar';
 import { LoadingSpinner } from '../../common/loading-spinner/loading-spinner';
 import { I18nProvider } from '@osd/i18n/react';
 import { useAsyncAction } from '../../common/hooks';
-
-const SearchBar = getPlugins().data.ui.SearchBar;
+import { WzSearchBar } from '../../common/search-bar';
 
 function buildComplianceObject({ section }) {
   try {
@@ -277,16 +275,14 @@ export const ComplianceTable = withAgentSupportModule(props => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='compliance-controls'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='compliance-controls'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
           )}
         </EuiPanel>
         <EuiPanel paddingSize='s' hasShadow={false} hasBorder={false} color="transparent">
@@ -341,4 +337,4 @@ export const ComplianceTable = withAgentSupportModule(props => {
       </>
     </I18nProvider>
   );
-});
+});
\ No newline at end of file
diff --git a/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx b/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
index d923a6bf9e..0ce2503d34 100644
--- a/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/docker/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardDockerComponent: React.FC = ({ }) => {
@@ -100,16 +99,14 @@ const DashboardDockerComponent: React.FC = ({ }) => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-              <div className='wz-search-bar hide-filter-control'>
-                <SearchBar
-                  appName='docker-searchbar'
-                  {...searchBarProps}
-                  showDatePicker={true}
-                  showQueryInput={true}
-                  showQueryBar={true}
-                />
-              </div>
-            )}
+            <WzSearchBar
+              appName='docker-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
+          )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
           ) : null}
diff --git a/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx b/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
index 6a8b4a760d..e40b02345c 100644
--- a/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/fim/dashboard/dashboard.tsx
@@ -25,14 +25,13 @@ import {
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
-const DashboardFIMComponent: React.FC = ({}) => {
+const DashboardFIMComponent: React.FC = ({ }) => {
   const {
     filters,
     dataSource,
@@ -100,15 +99,13 @@ const DashboardFIMComponent: React.FC = ({}) => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='fim-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='fim-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx b/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
index 7e14a64a63..d97b3d399d 100644
--- a/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/gdpr/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
   useDataSource,
 } from '../../../common/data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardGDPRComponent: React.FC = () => {
@@ -101,15 +100,13 @@ const DashboardGDPRComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='gdpr-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='gdpr-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/github/dashboards/dashboard.tsx b/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
index 84408484ae..a95594c9f8 100644
--- a/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/github/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
 } from '../../../common/data-source';
 import { GitHubDataSource } from '../../../common/data-source/pattern/alerts/github/github-data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 /* The vulnerabilities dashboard is made up of 3 dashboards because the filters need
@@ -105,15 +104,13 @@ const DashboardGitHubComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='github-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='github-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx b/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
index e8945b9250..545881e32e 100644
--- a/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/google-cloud/dashboards/dashboard.tsx
@@ -24,11 +24,10 @@ import { GoogleCloudDataSource } from '../../../common/data-source/pattern/alert
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardGoogleCloudComponent: React.FC = () => {
@@ -99,17 +98,15 @@ const DashboardGoogleCloudComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-              <div className='wz-search-bar hide-filter-control'>
-                <SearchBar
-                  appName='google-cloud-searchbar'
-                  {...searchBarProps}
-                  showDatePicker={true}
-                  showQueryInput={true}
-                  showQueryBar={true}
-                  showSaveQuery={true}
-                />
-              </div>
-            )}
+            <WzSearchBar
+              appName='google-cloud-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
+          )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
           ) : null}
diff --git a/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx b/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
index 6e773cb83f..a328007ec1 100644
--- a/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/hipaa/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
 } from '../../../common/data-source';
 import { HIPAADataSource } from '../../../common/data-source/pattern/alerts/hipaa/hipaa-data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardHIPAAComponent: React.FC = () => {
@@ -102,15 +101,13 @@ const DashboardHIPAAComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='hipaa-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='hipaa-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx b/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
index edf921e7a9..bf706bc496 100644
--- a/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/malware-detection/dashboard/dashboard.tsx
@@ -25,11 +25,10 @@ import {
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardMalwareDetectionComponent: React.FC = ({ }) => {
@@ -100,16 +99,14 @@ const DashboardMalwareDetectionComponent: React.FC = ({ }) => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-              <div className='wz-search-bar hide-filter-control'>
-                <SearchBar
-                  appName='malware-detection-searchbar'
-                  {...searchBarProps}
-                  showDatePicker={true}
-                  showQueryInput={true}
-                  showQueryBar={true}
-                />
-              </div>
-            )}
+            <WzSearchBar
+              appName='malware-detection-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
+          )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
           ) : null}
diff --git a/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx b/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
index 56de38ff3a..fdef29a13a 100644
--- a/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/mitre/dashboard/dashboard.tsx
@@ -23,9 +23,9 @@ import {
   useDataSource,
 } from '../../../common/data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
-const SearchBar = getPlugins().data.ui.SearchBar;
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 export const DashboardMITRE: React.FC = () => {
@@ -94,15 +94,13 @@ export const DashboardMITRE: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='mitre-detector-searchbar'
-                {...searchBarProps}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='mitre-detector-searchbar'
+              {...searchBarProps}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/mitre/framework/mitre.tsx b/plugins/main/public/components/overview/mitre/framework/mitre.tsx
index f0262b7989..3707e78eb1 100644
--- a/plugins/main/public/components/overview/mitre/framework/mitre.tsx
+++ b/plugins/main/public/components/overview/mitre/framework/mitre.tsx
@@ -18,7 +18,6 @@ import {
   Query,
   IndexPattern,
 } from '../../../../../../../src/plugins/data/common';
-import { getPlugins } from '../../../../kibana-services';
 import { withErrorBoundary } from '../../../common/hocs';
 import { UI_LOGGER_LEVELS } from '../../../../../common/constants';
 import { UI_ERROR_SEVERITIES } from '../../../../react-services/error-orchestrator/types';
@@ -34,13 +33,12 @@ import {
   PatternDataSource,
   tFilter,
 } from '../../../common/data-source';
+import { WzSearchBar } from '../../../common/search-bar';
 
 export interface ITactic {
   [key: string]: string[];
 }
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 export type tFilterParams = {
   filters: tFilter[];
   query: Query | undefined;
@@ -158,15 +156,13 @@ const MitreComponent = props => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-mitre-framework wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='mitre-attack-searchbar'
-                {...searchBarProps}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='mitre-attack-searchbar'
+              {...searchBarProps}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
           )}
         </EuiPanel>
         <EuiPanel paddingSize='s' hasShadow={false} hasBorder={false} color="transparent">
diff --git a/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx b/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
index 301b3d1c85..cb6915d67d 100644
--- a/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/nist/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
   useDataSource,
 } from '../../../common/data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardNIST80053Component: React.FC = () => {
@@ -101,15 +100,13 @@ const DashboardNIST80053Component: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='nist-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='nist-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/office/dashboard/dashboard.tsx b/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
index 010586fa4c..de011395ed 100644
--- a/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/office/dashboard/dashboard.tsx
@@ -25,11 +25,10 @@ import { Office365DataSource } from '../../../common/data-source/pattern/alerts/
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardOffice365Component: React.FC = () => {
@@ -100,16 +99,14 @@ const DashboardOffice365Component: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='google-cloud-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='google-cloud-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx b/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
index 3e878a6e2c..04fff25cf0 100644
--- a/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/pci/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import { PCIDSSDataSource } from '../../../common/data-source/pattern/alerts/pci
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardPCIDSSComponent: React.FC = () => {
@@ -102,15 +101,13 @@ const DashboardPCIDSSComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='pci-dss-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='pci-dss-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx b/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
index 7deee3b54f..1a890f4b6f 100644
--- a/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/threat-hunting/dashboard/dashboard.tsx
@@ -53,11 +53,10 @@ import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { LoadingSpinner } from '../../../common/loading-spinner/loading-spinner';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
 import { wzDiscoverRenderColumns } from '../../../common/wazuh-discover/render-columns';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardTH: React.FC = () => {
@@ -213,16 +212,14 @@ const DashboardTH: React.FC = () => {
         {isDataSourceLoading && !dataSource ? (
           <LoadingSpinner />
         ) : (
-          <div className='wz-search-bar hide-filter-control'>
-            <SearchBar
-              appName='th-searchbar'
-              {...searchBarProps}
-              showDatePicker={true}
-              showQueryInput={true}
-              showQueryBar={true}
-              showSaveQuery={true}
-            />
-          </div>
+          <WzSearchBar
+            appName='th-searchbar'
+            {...searchBarProps}
+            showDatePicker={true}
+            showQueryInput={true}
+            showQueryBar={true}
+            showSaveQuery={true}
+          />
         )}
         {!isDataSourceLoading && dataSource && results?.hits?.total === 0 ? (
           <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx b/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
index 071d08256d..a207191e6c 100644
--- a/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
+++ b/plugins/main/public/components/overview/tsc/dashboards/dashboard.tsx
@@ -25,11 +25,10 @@ import {
   useDataSource,
 } from '../../../common/data-source';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 const DashboardTSCComponent: React.FC = () => {
@@ -101,15 +100,13 @@ const DashboardTSCComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='tsc-searchbar'
-                {...searchBarProps}
-                showDatePicker={true}
-                showQueryInput={true}
-                showQueryBar={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='tsc-searchbar'
+              {...searchBarProps}
+              showDatePicker={true}
+              showQueryInput={true}
+              showQueryBar={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx b/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
index 512b9cb8d6..50dc0e9935 100644
--- a/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
+++ b/plugins/main/public/components/overview/virustotal/dashboard/dashboard.tsx
@@ -25,11 +25,10 @@ import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { VirusTotalDataSource } from '../../../common/data-source/pattern/alerts/virustotal/virustotal-data-source';
 import './virustotal_dashboard.scss';
 import { useReportingCommunicateSearchContext } from '../../../common/hooks/use-reporting-communicate-search-context';
+import { WzSearchBar } from '../../../common/search-bar';
 
 const plugins = getPlugins();
 
-const SearchBar = getPlugins().data.ui.SearchBar;
-
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 const DashboardVT: React.FC = () => {
   const {
@@ -100,16 +99,14 @@ const DashboardVT: React.FC = () => {
         {isDataSourceLoading && !dataSource ? (
           <LoadingSpinner />
         ) : (
-          <div className='wz-search-bar hide-filter-control'>
-            <SearchBar
-              appName='virustotal-searchbar'
-              {...searchBarProps}
-              showDatePicker={true}
-              showQueryInput={true}
-              showQueryBar={true}
-              showSaveQuery={true}
-            />
-          </div>
+          <WzSearchBar
+            appName='virustotal-searchbar'
+            {...searchBarProps}
+            showDatePicker={true}
+            showQueryInput={true}
+            showQueryBar={true}
+            showSaveQuery={true}
+          />
         )}
         {!isDataSourceLoading && dataSource && results?.hits?.total > 0 ? (
           <SampleDataWarning />
diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.scss b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.scss
index c33a2e54cc..83593269db 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.scss
+++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.scss
@@ -3,7 +3,7 @@
 
   // This makes the table not generate an unnecessary scroll when filtering data from 1 page and then do another search for more pages.
   .vulsInventoryDataGrid {
-    height: calc(100vh - 214px) !important;
+    height: calc(100vh - 216px) !important;
   }
 
   .euiDataGrid--fullScreen {
diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
index 8f79e6b13c..41706ae08b 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
+++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx
@@ -17,7 +17,7 @@ import {
 import { SearchResponse } from '../../../../../../../../src/core/server';
 import { HitsCounter } from '../../../../../kibana-integrations/discover/application/components/hits_counter/hits_counter';
 import { formatNumWithCommas } from '../../../../../kibana-integrations/discover/application/helpers';
-import { getPlugins, getWazuhCorePlugin } from '../../../../../kibana-services';
+import { getWazuhCorePlugin } from '../../../../../kibana-services';
 import {
   ErrorHandler,
   ErrorFactory,
@@ -47,6 +47,7 @@ import { useDataSource } from '../../../../common/data-source/hooks';
 import { IndexPattern } from '../../../../../../../../src/plugins/data/public';
 import { DocumentViewTableAndJson } from '../../common/components/document-view-table-and-json';
 import { wzDiscoverRenderColumns } from '../../../../common/wazuh-discover/render-columns';
+import { WzSearchBar } from '../../../../common/search-bar';
 
 const InventoryVulsComponent = () => {
   const {
@@ -67,13 +68,11 @@ const InventoryVulsComponent = () => {
   });
   const { query } = searchBarProps;
 
-  const SearchBar = getPlugins().data.ui.SearchBar;
   const [results, setResults] = useState<SearchResponse>({} as SearchResponse);
   const [inspectedHit, setInspectedHit] = useState<any>(undefined);
   const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(
     undefined,
   );
-  const [isSearching, setIsSearching] = useState<boolean>(false);
   const [isExporting, setIsExporting] = useState<boolean>(false);
 
   const sideNavDocked = getWazuhCorePlugin().hooks.useDockedSideNav();
@@ -182,16 +181,14 @@ const InventoryVulsComponent = () => {
             {isDataSourceLoading ? (
               <LoadingSpinner />
             ) : (
-              <div className='wz-search-bar hide-filter-control'>
-                <SearchBar
-                  appName='inventory-vuls'
-                  {...searchBarProps}
-                  showDatePicker={false}
-                  showQueryInput={true}
-                  showQueryBar={true}
-                  showSaveQuery={true}
-                />
-              </div>
+              <WzSearchBar
+                appName='inventory-vuls'
+                {...searchBarProps}
+                showDatePicker={false}
+                showQueryInput={true}
+                showQueryBar={true}
+                showSaveQuery={true}
+              />
             )}
             {!isDataSourceLoading && results?.hits?.total === 0 ? (
               <DiscoverNoResults />
@@ -270,4 +267,4 @@ const InventoryVulsComponent = () => {
 export const InventoryVuls = compose(
   withErrorBoundary,
   withVulnerabilitiesStateDataSource,
-)(InventoryVulsComponent);
+)(InventoryVulsComponent);
\ No newline at end of file
diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
index e2b0d01d42..1dafd6ee5d 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
+++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
@@ -28,9 +28,9 @@ import {
 } from '../../../../common/data-source';
 import { useDataSource } from '../../../../common/data-source/hooks';
 import { IndexPattern } from '../../../../../../../../src/plugins/data/public';
+import { WzSearchBar } from '../../../../common/search-bar';
 
 const plugins = getPlugins();
-const SearchBar = getPlugins().data.ui.SearchBar;
 const DashboardByRenderer = plugins.dashboard.DashboardContainerByValueRenderer;
 
 /* The vulnerabilities dashboard is made up of 3 dashboards because the filters need
@@ -84,16 +84,14 @@ const DashboardVulsComponent: React.FC = () => {
           {isDataSourceLoading && !dataSource ? (
             <LoadingSpinner />
           ) : (
-            <div className='wz-search-bar hide-filter-control'>
-              <SearchBar
-                appName='vulnerability-detector-searchbar'
-                {...searchBarProps}
-                showDatePicker={false}
-                showQueryInput={true}
-                showQueryBar={true}
-                showSaveQuery={true}
-              />
-            </div>
+            <WzSearchBar
+              appName='vulnerability-detector-searchbar'
+              {...searchBarProps}
+              showDatePicker={false}
+              showQueryInput={true}
+              showQueryBar={true}
+              showSaveQuery={true}
+            />
           )}
           {dataSource && results?.hits?.total === 0 ? (
             <DiscoverNoResults />
diff --git a/plugins/main/public/components/wz-updates-notification/index.test.tsx b/plugins/main/public/components/wz-updates-notification/index.test.tsx
index c60c0ff85d..c5014001b1 100644
--- a/plugins/main/public/components/wz-updates-notification/index.test.tsx
+++ b/plugins/main/public/components/wz-updates-notification/index.test.tsx
@@ -7,6 +7,7 @@ jest.mock('../../kibana-services', () => ({
   getWazuhCheckUpdatesPlugin: jest.fn().mockReturnValue({
     UpdatesNotification: () => <div>Updates notification</div>,
   }),
+  getAngularModule: () => { }
 }));
 
 describe('WzUpdatesNotification tests', () => {
diff --git a/plugins/main/public/controllers/overview/components/stats.test.tsx b/plugins/main/public/controllers/overview/components/stats.test.tsx
index 1b794f8842..e0fab2c816 100644
--- a/plugins/main/public/controllers/overview/components/stats.test.tsx
+++ b/plugins/main/public/controllers/overview/components/stats.test.tsx
@@ -46,6 +46,7 @@ jest.mock('../../../kibana-services', () => ({
       get: () => true
     }
   }),
+  getAngularModule: () => { }
 }));
 
 jest.mock('../../../react-services/common-services', () => ({