diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5386dcb55..e93c83905 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,6 +11,7 @@
     "digma",
     "digmathon",
     "digmo",
+    "Hotspot",
     "leaderboard",
     "undismiss",
     "zustand"
diff --git a/package.json b/package.json
index e27587cf8..4f42e97c6 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "build:prod": "webpack --config webpack.prod.ts",
     "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
     "precommit": "lint-staged",
-    "prepare": "husky"
+    "prepare": "husky",
+    "start": "npm run storybook"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx
index 07fb9c1f4..5f4f658a8 100644
--- a/src/components/Assets/AssetsFilter/index.tsx
+++ b/src/components/Assets/AssetsFilter/index.tsx
@@ -8,11 +8,9 @@ import { isNull } from "../../../typeGuards/isNull";
 import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
 import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
-import { FilterButton } from "../../common/FilterButton";
-import { NewButton } from "../../common/NewButton";
-import { NewPopover } from "../../common/NewPopover";
-import { Select } from "../../common/Select";
+import { FilterPopup } from "../../common/FilterPopup";
 import { WrenchIcon } from "../../common/icons/12px/WrenchIcon";
 import { EndpointIcon } from "../../common/icons/EndpointIcon";
 import { SparkleIcon } from "../../common/icons/SparkleIcon";
@@ -20,7 +18,6 @@ import { IconProps } from "../../common/icons/types";
 import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
 import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
-import * as s from "./styles";
 import {
   AssetFilterCategory,
   AssetFilterQuery,
@@ -29,6 +26,8 @@ import {
   GetAssetFiltersDataPayload
 } from "./types";
 
+import * as s from "./styles";
+
 const PERSISTENCE_KEY = "assetsFilters";
 
 const getData = ({
@@ -53,7 +52,7 @@ const getData = ({
         insights,
         directOnly: Boolean(assetScopeOption?.isDirect),
         scopedSpanCodeObjectId: assetScopeOption?.scopedSpanCodeObjectId,
-        ...(searchQuery.length > 0 ? { displayName: searchQuery } : {})
+        ...(searchQuery?.length > 0 ? { displayName: searchQuery } : {})
       }
     }
   });
@@ -76,7 +75,7 @@ const renderFilterCategory = (
     })) ?? [];
 
   return (
-    <Select
+    <s.StyledSelect
       searchable={true}
       key={category.categoryName}
       items={items}
@@ -462,25 +461,20 @@ export const AssetsFilter = ({
     ...selectedInsights
   ];
 
-  return (
-    <NewPopover
-      width={"calc(100% - 16px)"}
-      content={
-        <s.Container>
-          <s.Header>Filters</s.Header>
-          {isServicesFilterEnabled && (
-            <>
-              <s.FilterCategoryName>Services</s.FilterCategoryName>
-              {renderFilterCategory(
-                servicesCategory,
-                WrenchIcon,
-                selectedServices.length > 0 ? "Services" : "All",
-                selectedServices,
-                handleSelectedItemsChange
-              )}
-            </>
-          )}
-          <s.FilterCategoryName>Operations</s.FilterCategoryName>
+  const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.FILTERS_POPUP_CLOSE_BUTTON_CLICKED
+    );
+  };
+  const handleOnStateChange = (state: boolean) => {
+    setIsOpen(state);
+  };
+
+  const filterComponents = [
+    {
+      title: "Operations",
+      component: (
+        <>
           {renderFilterCategory(
             endpointsCategory,
             EndpointIcon,
@@ -502,38 +496,46 @@ export const AssetsFilter = ({
             selectedInternals,
             handleSelectedItemsChange
           )}
-          <s.FilterCategoryName>Insights</s.FilterCategoryName>
-          {insightsCategory &&
-            renderFilterCategory(
-              insightsCategory,
-              SparkleIcon,
-              "Insights",
-              selectedInsights,
-              handleSelectedItemsChange,
-              (value) => getInsightTypeInfo(value)?.label ?? value
-            )}
-          <s.Footer>
-            <NewButton
-              buttonType={"tertiary"}
-              label={"Clear filters"}
-              disabled={selectedFilters.length === 0}
-              onClick={handleClearFiltersButtonClick}
-            />
-          </s.Footer>
-        </s.Container>
-      }
-      onOpenChange={setIsOpen}
-      isOpen={isOpen}
-      placement={"bottom-end"}
-    >
-      <div>
-        <FilterButton
-          title={"Filters"}
-          showCount={true}
-          selectedCount={selectedFilters.length}
-          isActive={isOpen}
-        />
-      </div>
-    </NewPopover>
+        </>
+      )
+    }
+  ];
+
+  if (insightsCategory) {
+    filterComponents.push({
+      title: "Insights",
+      component: renderFilterCategory(
+        insightsCategory,
+        SparkleIcon,
+        "Insights",
+        selectedInsights,
+        handleSelectedItemsChange,
+        (value) => getInsightTypeInfo(value)?.label ?? value
+      )
+    });
+  }
+
+  if (isServicesFilterEnabled) {
+    filterComponents.unshift({
+      title: "Services",
+      component: renderFilterCategory(
+        servicesCategory,
+        WrenchIcon,
+        selectedServices.length > 0 ? "Services" : "All",
+        selectedServices,
+        handleSelectedItemsChange
+      )
+    });
+  }
+
+  return (
+    <FilterPopup
+      onClose={handleCloseButtonClick}
+      onClearAll={handleClearFiltersButtonClick}
+      title="Filters"
+      filters={filterComponents}
+      selectedFiltersCount={selectedFilters.length}
+      onStateChange={handleOnStateChange}
+    />
   );
 };
diff --git a/src/components/Assets/AssetsFilter/styles.ts b/src/components/Assets/AssetsFilter/styles.ts
index 8ff5457d0..b8836cb88 100644
--- a/src/components/Assets/AssetsFilter/styles.ts
+++ b/src/components/Assets/AssetsFilter/styles.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { grayScale } from "../../common/App/v2colors";
+import { Select } from "../../common/v3/Select";
 
 export const Container = styled.div`
   display: flex;
@@ -47,3 +48,7 @@ export const Footer = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
+export const StyledSelect = styled(Select)`
+  background: ${({ theme }) => theme.colors.surface.brandDark};
+`;
diff --git a/src/components/Assets/tracking.ts b/src/components/Assets/tracking.ts
index 35b00b901..8892903e6 100644
--- a/src/components/Assets/tracking.ts
+++ b/src/components/Assets/tracking.ts
@@ -6,7 +6,8 @@ export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
     FILTER_APPLIED: "filter applied",
-    REFRESH_BUTTON_CLICKED: "refresh button clicked"
+    REFRESH_BUTTON_CLICKED: "refresh button clicked",
+    FILTERS_POPUP_CLOSE_BUTTON_CLICKED: "filter popup close button clicked"
   },
   " "
 );
diff --git a/src/components/Dashboard/Report/ReportHeader/styles.ts b/src/components/Dashboard/Report/ReportHeader/styles.ts
index e241a9832..680442928 100644
--- a/src/components/Dashboard/Report/ReportHeader/styles.ts
+++ b/src/components/Dashboard/Report/ReportHeader/styles.ts
@@ -46,5 +46,4 @@ export const Background = styled.div`
 export const FilterSelector = styled(Select)`
   width: 180px;
   height: 28px;
-  color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;
diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx
index a94992659..026efa0c8 100644
--- a/src/components/Insights/Issues/IssuesFilter/index.tsx
+++ b/src/components/Insights/Issues/IssuesFilter/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore";
 import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore";
 import { getFeatureFlagValue } from "../../../../featureFlags";
@@ -6,15 +6,12 @@ import { usePrevious } from "../../../../hooks/usePrevious";
 import { FeatureFlag } from "../../../../types";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo";
-import { FilterButton } from "../../../common/FilterButton";
-import { NewPopover } from "../../../common/NewPopover";
+import { FilterPopup } from "../../../common/FilterPopup";
 import { EyeIcon } from "../../../common/icons/12px/EyeIcon";
 import { FourPointedStarIcon } from "../../../common/icons/12px/FourPointedStarIcon";
 import { WrenchIcon } from "../../../common/icons/12px/WrenchIcon";
-import { CrossIcon } from "../../../common/icons/16px/CrossIcon";
 import { WarningTriangleIcon } from "../../../common/icons/WarningTriangleIcon";
 import { IconProps } from "../../../common/icons/types";
-import { Select } from "../../../common/v3/Select";
 import { SelectItem } from "../../../common/v3/Select/types";
 import { InsightFilterType } from "../../InsightsCatalog/types";
 import { useIssuesFilters } from "../useIssuesFilters";
@@ -22,7 +19,6 @@ import * as s from "./styles";
 import { trackingEvents } from "./tracking";
 
 export const IssuesFilter = () => {
-  const [isOpen, setIsOpen] = useState(false);
   const filteredInsightTypes = useInsightsStore.use.filteredInsightTypes();
   const selectedServices = useGlobalStore.use.selectedServices();
   const setFilteredInsightTypes =
@@ -112,7 +108,6 @@ export const IssuesFilter = () => {
 
   const handleCloseButtonClick = () => {
     sendUserActionTrackingEvent(trackingEvents.CLOSE_FILTER_DIALOG_CLICKED);
-    setIsOpen(false);
   };
 
   const handleToggleFilterChange = (
@@ -183,102 +178,94 @@ export const IssuesFilter = () => {
   const readStatusFilterPlaceholder =
     readStatusFilterOptions.find((x) => x.selected)?.label ?? "All";
   const selectedFiltersCount =
-    (filteredInsightTypes.length > 0 ? 1 : 0) +
-    (isServicesFilterEnabled && filteredServices.length > 0 ? 1 : 0) +
+    filteredInsightTypes.length +
+    (isServicesFilterEnabled ? filteredServices.length : 0) +
     (isCriticalOnly ? 1 : 0) +
     (isUnreadOnly ? 1 : 0);
 
-  return (
-    <NewPopover
-      width={"100%"}
-      content={
-        <s.Container>
-          <s.Header>
-            Filters
-            <s.CloseButton onClick={handleCloseButtonClick}>
-              <CrossIcon color={"currentColor"} size={16} />
-            </s.CloseButton>
-          </s.Header>
-          {isServicesFilterEnabled && (
-            <>
-              <s.FilterCategoryName>Services</s.FilterCategoryName>
-              <Select
-                key={"services"}
-                items={servicesFilterOptions}
-                onChange={handleServiceChange}
-                placeholder={filteredServices.length > 0 ? "Services" : "All"}
-                multiselect={true}
-                icon={(props: IconProps) => (
-                  <s.InsightIconContainer>
-                    <WrenchIcon {...props} />
-                  </s.InsightIconContainer>
-                )}
-                disabled={issueTypesFilterOptions?.length === 0}
-              />
-            </>
+  const filterComponents = [
+    {
+      title: "Issues",
+      component: (
+        <s.StyledSelect
+          key={"issues"}
+          items={issueTypesFilterOptions}
+          onChange={handleIssueTypesChange}
+          placeholder={filteredInsightTypes.length > 0 ? "Issues" : "All"}
+          multiselect={true}
+          icon={(props: IconProps) => (
+            <s.InsightIconContainer>
+              <FourPointedStarIcon {...props} />
+            </s.InsightIconContainer>
           )}
-          <s.FilterCategoryName>Issues</s.FilterCategoryName>
-          <Select
-            key={"issues"}
-            items={issueTypesFilterOptions}
-            onChange={handleIssueTypesChange}
-            placeholder={filteredInsightTypes.length > 0 ? "Issues" : "All"}
-            multiselect={true}
-            icon={(props: IconProps) => (
-              <s.InsightIconContainer>
-                <FourPointedStarIcon {...props} />
-              </s.InsightIconContainer>
-            )}
-            disabled={issueTypesFilterOptions?.length === 0}
-          />
-          <s.FilterCategoryName>Criticality</s.FilterCategoryName>
-          <Select
-            key={"criticality"}
-            items={criticalityFilterOptions}
-            onChange={(value) => handleToggleFilterChange(value, "criticality")}
-            placeholder={criticalityFilterPlaceholder}
-            icon={(props: IconProps) => (
-              <s.InsightIconContainer>
-                <WarningTriangleIcon {...props} />
-              </s.InsightIconContainer>
-            )}
-            showSelectedState={isCriticalOnly}
-          />
-          <s.FilterCategoryName>Read/Unread</s.FilterCategoryName>
-          <Select
-            key={"readStatus"}
-            items={readStatusFilterOptions}
-            onChange={(value) => handleToggleFilterChange(value, "unread")}
-            placeholder={readStatusFilterPlaceholder}
-            icon={(props: IconProps) => (
-              <s.InsightIconContainer>
-                <EyeIcon {...props} />
-              </s.InsightIconContainer>
-            )}
-            showSelectedState={isUnreadOnly}
-          />
-          <s.Footer>
-            <s.ClearAllButton
-              buttonType={"primaryBorderless"}
-              label={"Clear filters"}
-              isDisabled={selectedFiltersCount === 0}
-              onClick={handleClearFiltersButtonClick}
-            />
-          </s.Footer>
-        </s.Container>
-      }
-      onOpenChange={setIsOpen}
-      isOpen={isOpen}
-      placement={"bottom-end"}
-    >
-      <div>
-        <FilterButton
-          title={"Filters"}
-          showCount={true}
-          selectedCount={selectedFiltersCount}
-          isActive={isOpen}
+          disabled={issueTypesFilterOptions?.length === 0}
+        />
+      )
+    },
+    {
+      title: "Criticality",
+      component: (
+        <s.StyledSelect
+          key={"criticality"}
+          items={criticalityFilterOptions}
+          onChange={(value) => handleToggleFilterChange(value, "criticality")}
+          placeholder={criticalityFilterPlaceholder}
+          icon={(props: IconProps) => (
+            <s.InsightIconContainer>
+              <WarningTriangleIcon {...props} />
+            </s.InsightIconContainer>
+          )}
+          showSelectedState={isCriticalOnly}
         />
-      </div>
-    </NewPopover>
+      )
+    },
+    {
+      title: "Read/Unread",
+      component: (
+        <s.StyledSelect
+          key={"readStatus"}
+          items={readStatusFilterOptions}
+          onChange={(value) => handleToggleFilterChange(value, "unread")}
+          placeholder={readStatusFilterPlaceholder}
+          icon={(props: IconProps) => (
+            <s.InsightIconContainer>
+              <EyeIcon {...props} />
+            </s.InsightIconContainer>
+          )}
+          showSelectedState={isUnreadOnly}
+        />
+      )
+    }
+  ];
+
+  if (isServicesFilterEnabled) {
+    filterComponents.unshift({
+      title: "Services",
+      component: (
+        <s.StyledSelect
+          key={"services"}
+          items={servicesFilterOptions}
+          onChange={handleServiceChange}
+          placeholder={filteredServices.length > 0 ? "Services" : "All"}
+          multiselect={true}
+          icon={(props: IconProps) => (
+            <s.InsightIconContainer>
+              <WrenchIcon {...props} />
+            </s.InsightIconContainer>
+          )}
+          disabled={issueTypesFilterOptions?.length === 0}
+        />
+      )
+    });
+  }
+
+  return (
+    <FilterPopup
+      onClearAll={handleClearFiltersButtonClick}
+      onClose={handleCloseButtonClick}
+      title="Filters"
+      selectedFiltersCount={selectedFiltersCount}
+      filters={filterComponents}
+    />
   );
 };
diff --git a/src/components/Insights/Issues/IssuesFilter/styles.ts b/src/components/Insights/Issues/IssuesFilter/styles.ts
index ef86706eb..f1646ff6c 100644
--- a/src/components/Insights/Issues/IssuesFilter/styles.ts
+++ b/src/components/Insights/Issues/IssuesFilter/styles.ts
@@ -1,38 +1,5 @@
 import styled from "styled-components";
-import {
-  bodyBoldTypography,
-  subscriptRegularTypography
-} from "../../../common/App/typographies";
-import { grayScale } from "../../../common/App/v2colors";
-import { NewButton } from "../../../common/v3/NewButton";
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background: ${({ theme }) => theme.colors.surface.primary};
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 29%);
-  font-size: 14px;
-  color: ${grayScale[400]};
-`;
-
-export const Header = styled.div`
-  color: ${({ theme }) => theme.colors.v3.text.primary};
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  ${bodyBoldTypography}
-`;
-
-export const FilterCategoryName = styled.div`
-  display: flex;
-  padding: 4px;
-  color: ${({ theme }) => theme.colors.v3.text.tertiary};
-  ${subscriptRegularTypography}
-`;
+import { Select } from "../../../common/v3/Select";
 
 export const MenuButton = styled.button`
   border: 1px solid ${({ theme }) => theme.colors.stroke.primary};
@@ -49,39 +16,11 @@ export const MenuButtonChevronIconContainer = styled.span`
   color: ${({ theme }) => theme.colors.icon.primary};
 `;
 
-export const Footer = styled.div`
-  padding: 8px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const ClearAllButton = styled(NewButton)`
-  padding: 0;
-
-  span {
-    color: ${({ theme }) => theme.colors.v3.status.high};
-  }
-
-  &:hover:enabled {
-    color: ${({ theme }) => theme.colors.v3.status.high};
-
-    span {
-      color: ${({ theme }) => theme.colors.v3.status.high};
-    }
-  }
-`;
-
 export const InsightIconContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.icon.tertiary};
 `;
 
-export const CloseButton = styled.button`
-  padding: 0;
-  cursor: pointer;
-  background: none;
-  border: none;
-  height: 14px;
-  color: inherit;
+export const StyledSelect = styled(Select)`
+  background: ${({ theme }) => theme.colors.surface.brandDark};
 `;
diff --git a/src/components/common/FilterPopup/FilterPopup.stories.tsx b/src/components/common/FilterPopup/FilterPopup.stories.tsx
new file mode 100644
index 000000000..39a6f7e4d
--- /dev/null
+++ b/src/components/common/FilterPopup/FilterPopup.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { FilterPopup } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof FilterPopup> = {
+  title: "common/FilterPopup",
+  component: FilterPopup,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {};
diff --git a/src/components/common/FilterPopup/index.tsx b/src/components/common/FilterPopup/index.tsx
new file mode 100644
index 000000000..5c182063b
--- /dev/null
+++ b/src/components/common/FilterPopup/index.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { usePrevious } from "../../../hooks/usePrevious";
+import { FilterButton } from "../FilterButton";
+import { CrossIcon } from "../icons/16px/CrossIcon";
+import { NewPopover } from "../NewPopover";
+import * as s from "./styles";
+import { FilterPopupProps } from "./types";
+
+export const FilterPopup = ({
+  onClearAll,
+  onClose,
+  title,
+  selectedFiltersCount,
+  filters,
+  onStateChange
+}: FilterPopupProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const previousIsOpen = usePrevious(isOpen);
+
+  useEffect(() => {
+    if (isOpen !== previousIsOpen && onStateChange) {
+      onStateChange(isOpen);
+    }
+  }, [isOpen, previousIsOpen, onStateChange]);
+
+  const handleCloseButtonClick = () => {
+    setIsOpen(false);
+    onClose();
+  };
+  return (
+    <NewPopover
+      width={"100%"}
+      content={
+        <s.Container>
+          <s.Header>
+            {title}
+            <s.CloseButton onClick={handleCloseButtonClick}>
+              <CrossIcon color={"currentColor"} size={16} />
+            </s.CloseButton>
+          </s.Header>
+
+          {filters.map((x) => (
+            <s.Filter key={x.title}>
+              <s.FilterCategoryName>{x.title}</s.FilterCategoryName>
+              {x.component}
+            </s.Filter>
+          ))}
+          <s.Footer>
+            <s.ClearAllButton
+              buttonType={"primaryBorderless"}
+              label={"Clear filters"}
+              isDisabled={selectedFiltersCount === 0}
+              onClick={onClearAll}
+            />
+          </s.Footer>
+        </s.Container>
+      }
+      onOpenChange={setIsOpen}
+      isOpen={isOpen}
+      placement={"bottom-end"}
+    >
+      <div>
+        <FilterButton
+          title={"Filters"}
+          showCount={true}
+          selectedCount={selectedFiltersCount}
+          isActive={isOpen}
+        />
+      </div>
+    </NewPopover>
+  );
+};
diff --git a/src/components/common/FilterPopup/styles.ts b/src/components/common/FilterPopup/styles.ts
new file mode 100644
index 000000000..fc068f71c
--- /dev/null
+++ b/src/components/common/FilterPopup/styles.ts
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import {
+  bodyBoldTypography,
+  subscriptRegularTypography
+} from "../App/typographies";
+import { NewButton } from "../v3/NewButton";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.colors.v3.surface.brandDarkest};
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 29%);
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const Header = styled.div`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${bodyBoldTypography}
+`;
+
+export const Footer = styled.div`
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const ClearAllButton = styled(NewButton)`
+  padding: 0;
+
+  span {
+    color: ${({ theme }) => theme.colors.v3.status.high};
+  }
+
+  &:hover:enabled {
+    color: ${({ theme }) => theme.colors.v3.status.high};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.status.high};
+    }
+  }
+`;
+
+export const CloseButton = styled.button`
+  padding: 0;
+  cursor: pointer;
+  background: none;
+  border: none;
+  height: 14px;
+  color: inherit;
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+`;
+
+export const Filter = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const FilterCategoryName = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+  ${subscriptRegularTypography}
+`;
diff --git a/src/components/common/FilterPopup/types.ts b/src/components/common/FilterPopup/types.ts
new file mode 100644
index 000000000..259210b2a
--- /dev/null
+++ b/src/components/common/FilterPopup/types.ts
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface FilterPopupProps {
+  onClose: () => void;
+  title: string;
+  onClearAll: () => void;
+  selectedFiltersCount: number;
+  filters: {
+    title: string;
+    component: ReactNode;
+  }[];
+  onStateChange?: (state: boolean) => void;
+}
diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
index a1c5dbfba..d72b7e1f0 100644
--- a/src/components/common/Select/index.tsx
+++ b/src/components/common/Select/index.tsx
@@ -22,6 +22,7 @@ const sortItemsBySelectedState = (a: SelectItem, b: SelectItem) => {
   return 0;
 };
 
+/** @deprecated */
 export const Select = ({
   multiselect,
   items,
diff --git a/src/components/common/v3/Select/Select.stories.tsx b/src/components/common/v3/Select/Select.stories.tsx
index d4bcf4650..09e0e9b9e 100644
--- a/src/components/common/v3/Select/Select.stories.tsx
+++ b/src/components/common/v3/Select/Select.stories.tsx
@@ -56,6 +56,13 @@ export const Default: Story = {
   }
 };
 
+export const Searchable: Story = {
+  args: {
+    searchable: true,
+    items: mockedData.items.map((x, i) => ({ ...x, enabled: i !== 0 }))
+  }
+};
+
 export const Empty: Story = {
   args: {
     items: []
diff --git a/src/components/common/v3/Select/index.tsx b/src/components/common/v3/Select/index.tsx
index b71a432c8..98aa55725 100644
--- a/src/components/common/v3/Select/index.tsx
+++ b/src/components/common/v3/Select/index.tsx
@@ -1,8 +1,10 @@
-import { useState } from "react";
+import { ChangeEvent, useCallback, useRef, useState } from "react";
+import useDimensions from "react-cool-dimensions";
 import { isString } from "../../../../typeGuards/isString";
 import { isUndefined } from "../../../../typeGuards/isUndefined";
 import { NewPopover } from "../../NewPopover";
 import { ChevronIcon } from "../../icons/ChevronIcon";
+import { MagnifierIcon } from "../../icons/MagnifierIcon";
 import { Direction } from "../../icons/types";
 import { Checkmark } from "../Checkmark";
 import { Tooltip } from "../Tooltip";
@@ -29,9 +31,21 @@ export const Select = ({
   icon: Icon,
   placeholder,
   className,
+  searchable,
   showSelectedState
 }: SelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const optionListRef = useRef<HTMLUListElement | null>(null);
+  const { observe } = useDimensions();
+
+  const getOptionListRef = useCallback(
+    (el: HTMLUListElement | null) => {
+      observe(el);
+      optionListRef.current = el;
+    },
+    [observe]
+  );
 
   const handleButtonClick = () => {
     setIsOpen(!isOpen);
@@ -59,19 +73,48 @@ export const Select = ({
     onChange(newValue);
   };
 
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
   const selectedValues = items.filter((x) => x.selected).map((x) => x.value);
+
+  const filteredItems = items.filter((x) =>
+    x.label.toLocaleLowerCase().includes(searchValue)
+  );
+
   const sortedItems = multiselect
-    ? items.sort(sortItemsBySelectedState)
-    : items;
+    ? filteredItems.sort(sortItemsBySelectedState)
+    : filteredItems;
+
   const isSelectedStateEnabled =
     isUndefined(showSelectedState) || showSelectedState;
 
+  const optionListHasVerticalScrollbar = Boolean(
+    optionListRef?.current &&
+      optionListRef.current.scrollHeight > optionListRef.current.clientHeight
+  );
+  const isSearchBarVisible =
+    searchable && (optionListHasVerticalScrollbar || searchValue.length > 0);
+
   return (
     <NewPopover
       sameWidth={true}
       content={
         <s.MenuContainer>
-          <s.OptionList>
+          {isSearchBarVisible && (
+            <s.SearchInputContainer>
+              <s.SearchInputIconContainer>
+                <MagnifierIcon />
+              </s.SearchInputIconContainer>
+              <s.SearchInput
+                type={"text"}
+                placeholder={"Search"}
+                onChange={handleSearchChange}
+              />
+            </s.SearchInputContainer>
+          )}
+          <s.OptionList ref={getOptionListRef}>
             {sortedItems.length > 0 ? (
               sortedItems.map((x) => (
                 <s.OptionListItem
@@ -93,7 +136,15 @@ export const Select = ({
                 </s.OptionListItem>
               ))
             ) : (
-              <s.NoResultsContainer>No results</s.NoResultsContainer>
+              <s.NoResultsContainer>
+                <span>No results</span>
+                {searchValue?.length > 0 && (
+                  <s.NoSearchResults>
+                    <span>Check spelling or try to search</span>
+                    <span>something else.</span>
+                  </s.NoSearchResults>
+                )}
+              </s.NoResultsContainer>
             )}
           </s.OptionList>
         </s.MenuContainer>
diff --git a/src/components/common/v3/Select/styles.ts b/src/components/common/v3/Select/styles.ts
index b203da115..1a7c0c609 100644
--- a/src/components/common/v3/Select/styles.ts
+++ b/src/components/common/v3/Select/styles.ts
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import {
   bodyRegularTypography,
+  bodySemiboldTypography,
   footnoteRegularTypography,
   subscriptRegularTypography
 } from "../../App/typographies";
@@ -28,7 +29,8 @@ export const Button = styled.button<ButtonProps>`
   align-items: center;
   width: 100%;
   justify-content: flex-end;
-  color: ${({ theme }) => theme.colors.v3.text.primary};
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+  outline: none;
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primaryLight};
@@ -89,6 +91,8 @@ export const MenuContainer = styled.div`
   max-height: 162px;
   box-sizing: border-box;
   background: ${({ theme }) => theme.colors.v3.surface.primaryLight};
+  gap: 8px;
+  outline: none;
 `;
 
 export const OptionList = styled.ul`
@@ -99,6 +103,7 @@ export const OptionList = styled.ul`
   margin: 0;
   overflow: hidden;
   overflow-y: auto;
+  outline: none;
 `;
 
 export const OptionListItem = styled.li<OptionListItemProps>`
@@ -120,6 +125,12 @@ export const OptionListItem = styled.li<OptionListItemProps>`
     background: ${({ theme, $enabled }) =>
       $enabled ? theme.colors.v3.surface.highlight : ""};
   }
+
+  button {
+    :focus-visible {
+      outline: none;
+    }
+  }
 `;
 
 export const OptionListItemLabel = styled.span`
@@ -134,6 +145,50 @@ export const NoResultsContainer = styled.div`
   align-items: center;
   justify-content: center;
   padding: 8px 0;
-  font-size: 14px;
-  color: ${({ theme }) => theme.colors.text.subtext};
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  gap: 8px;
+  flex-direction: column;
+
+  ${bodySemiboldTypography}
+`;
+
+export const NoSearchResults = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+
+  ${footnoteRegularTypography}
+`;
+
+export const SearchInputContainer = styled.div`
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  padding: 5px 8px;
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 4px 0 rgba(0 0 0 / 13%);
+`;
+
+export const SearchInput = styled.input`
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+
+  ${subscriptRegularTypography}
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.v3.text.primary};
+  }
+`;
+
+export const SearchInputIconContainer = styled.div`
+  pointer-events: none;
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
 `;
diff --git a/src/components/common/v3/Select/types.ts b/src/components/common/v3/Select/types.ts
index 2daf2ffaa..ba2546c5b 100644
--- a/src/components/common/v3/Select/types.ts
+++ b/src/components/common/v3/Select/types.ts
@@ -23,6 +23,7 @@ export interface SelectProps {
   onChange: (value: string | string[]) => void;
   placeholder?: string;
   disabled?: boolean;
+  searchable?: boolean;
   icon?: ComponentType<IconProps>;
   className?: string;
   showSelectedState?: boolean;