diff --git a/local_modules/styles/mixins.less b/local_modules/styles/mixins.less
index c669a9572..b46bbea09 100644
--- a/local_modules/styles/mixins.less
+++ b/local_modules/styles/mixins.less
@@ -8,3 +8,23 @@
     max-width: @containerMaxWidth;
     box-sizing: border-box;
 }
+
+.base-reset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.italic-font {
+    color: @colorGrey;
+    font-style: italic;
+}
+
+.sorting-button {
+    &:extend(.italic-font, .base-reset);
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/local_modules/styles/variables.less b/local_modules/styles/variables.less
index 3863f2b4c..a43acb7cb 100644
--- a/local_modules/styles/variables.less
+++ b/local_modules/styles/variables.less
@@ -5,3 +5,4 @@
 @containerMaxWidth: 1200px;
 @containerGap: 15px;
 @breakpoint: 600px;
+@colorGrey: #666;
diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png b/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png
index dbf37bacd..c60e328d3 100644
Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png differ
diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png b/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png
index 7dad513a7..cda50cdc9 100644
Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png differ
diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png b/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png
index a3e3dde1d..dfcface81 100644
Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png differ
diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png b/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png
index 48884aa67..fc46acd71 100644
Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png differ
diff --git a/src/Components/EventList/EventList.less b/src/Components/EventList/EventList.less
index b09ad8a0e..1a3b7845b 100644
--- a/src/Components/EventList/EventList.less
+++ b/src/Components/EventList/EventList.less
@@ -15,7 +15,7 @@
 }
 
 .header {
-    color: #666;
+    color: @colorGrey;
     font-style: italic;
 }
 
@@ -44,7 +44,7 @@
 .curr-value {
     width: 70px;
     font-size: 12px;
-    color: #666;
+    color: @colorGrey;
 }
 
 .prev-value {
diff --git a/src/Components/Footer/Footer.less b/src/Components/Footer/Footer.less
index 710504a56..bd45901c4 100644
--- a/src/Components/Footer/Footer.less
+++ b/src/Components/Footer/Footer.less
@@ -5,7 +5,7 @@
     padding-top: 40px;
     padding-bottom: 40px;
     background-color: #efefef;
-    color: #666;
+    color: @colorGrey;
 }
 
 .container {
diff --git a/src/Components/MetricList/MetricList.less b/src/Components/MetricList/MetricList.less
index 010600be3..eda5ff38d 100644
--- a/src/Components/MetricList/MetricList.less
+++ b/src/Components/MetricList/MetricList.less
@@ -81,7 +81,7 @@
     padding: 0;
     border: none;
     background: none;
-    color: #666;
+    color: @colorGrey;
     font: inherit;
     font-style: italic;
     -webkit-appearance: none;
diff --git a/src/Components/Mobile/MobileTagSelectorPage/MobileTagSelectorPage.less b/src/Components/Mobile/MobileTagSelectorPage/MobileTagSelectorPage.less
index d9e487e17..1673704d6 100644
--- a/src/Components/Mobile/MobileTagSelectorPage/MobileTagSelectorPage.less
+++ b/src/Components/Mobile/MobileTagSelectorPage/MobileTagSelectorPage.less
@@ -2,7 +2,7 @@
 
 .no-result {
     padding: 30px;
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }
 
diff --git a/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.less b/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.less
index 768e10c99..52a393a6c 100644
--- a/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.less
+++ b/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.less
@@ -37,3 +37,9 @@
     }
 
 }
+
+.empty-triggers {
+    padding: 30;
+    color: @colorGrey; 
+    text-align: center; 
+}
diff --git a/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.tsx b/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.tsx
index 7795468cb..0b7840204 100644
--- a/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.tsx
+++ b/src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.tsx
@@ -54,9 +54,7 @@ export default class MobileTriggerListPage extends React.Component<MobileTrigger
                 </MobileHeader>
                 <div className={cn("content")}>
                     {triggers != null && triggers.length === 0 && (
-                        <div style={{ padding: 30, color: "#666", textAlign: "center" }}>
-                            No results :-(
-                        </div>
+                        <div className={cn("empty-triggers")}>No results :-(</div>
                     )}
                     {triggers != null &&
                         triggers.map((trigger) => (
diff --git a/src/Components/Mobile/Styles/variables.less b/src/Components/Mobile/Styles/variables.less
index 93699e1cf..5d2d82bc0 100644
--- a/src/Components/Mobile/Styles/variables.less
+++ b/src/Components/Mobile/Styles/variables.less
@@ -12,3 +12,5 @@
 @no-data-color: noDataColor;
 
 @primary-divider-color: #ddd;
+
+@colorGrey: #666;
diff --git a/src/Components/NotificationList/NotificationList.less b/src/Components/NotificationList/NotificationList.less
index 15bf4c47b..c90220c31 100644
--- a/src/Components/NotificationList/NotificationList.less
+++ b/src/Components/NotificationList/NotificationList.less
@@ -8,11 +8,6 @@
     margin-top: 5px;
 }
 
-.header {
-    color: #666;
-    font-style: italic;
-}
-
 .timestamp {
     width: 15%;
 }
@@ -61,6 +56,6 @@
 }
 
 .no-result {
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }
diff --git a/src/Components/NotificationList/NotificationList.tsx b/src/Components/NotificationList/NotificationList.tsx
index 39fba24ae..cf6db915c 100644
--- a/src/Components/NotificationList/NotificationList.tsx
+++ b/src/Components/NotificationList/NotificationList.tsx
@@ -54,7 +54,7 @@ export default function NotificationList(props: Props): React.ReactElement {
         <>
             {ConfirmModal}
             <Gapped gap={30} vertical>
-                <div className={cn("row", "header")}>
+                <div className={cn("row", "italic-font")}>
                     <div className={cn("timestamp")}>Timestamp</div>
                     <div className={cn("state")}>State</div>
                     <div className={cn("trigger")}>Trigger</div>
diff --git a/src/Components/PatternList/PatternList.less b/src/Components/PatternList/PatternList.less
index c2283a990..09f231ec7 100644
--- a/src/Components/PatternList/PatternList.less
+++ b/src/Components/PatternList/PatternList.less
@@ -23,24 +23,12 @@
     }
 }
 
-.header {
-    color: #666;
-    font-style: italic;
-}
-
 .name {
     width: calc(~'100% - 240px');
 
     &.clicked {
-        margin: 0;
-        padding: 0;
-        border: none;
-        background: none;
-        color: inherit;
-        font: inherit;
+        &:extend(.base-reset);
         text-align: left;
-        -webkit-appearance: none;
-        appearance: none;
         cursor: pointer;
     }
 }
@@ -49,15 +37,7 @@
 .metric-counter,
 .control {
     width: 80px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: #666;
-    font: inherit;
-    font-style: italic;
-    -webkit-appearance: none;
-    appearance: none;
+    &:extend(.sorting-button);
 }
 
 .info {
diff --git a/src/Components/PatternList/PatternList.tsx b/src/Components/PatternList/PatternList.tsx
index 74243e6be..a2cc598ba 100644
--- a/src/Components/PatternList/PatternList.tsx
+++ b/src/Components/PatternList/PatternList.tsx
@@ -27,7 +27,7 @@ export default function PatternList(props: Props): React.ReactElement {
     const sortingIcon = sortingDown ? <ArrowBoldDownIcon /> : <ArrowBoldUpIcon />;
     return (
         <div>
-            <div className={cn("row", "header")}>
+            <div className={cn("row", "header", "italic-font")}>
                 <div className={cn("name")}>Pattern</div>
                 <button
                     type="button"
diff --git a/src/Components/ResourceIDBadge/ResourceIDBadge.less b/src/Components/ResourceIDBadge/ResourceIDBadge.less
index 8453fd3f0..e9ff5754b 100644
--- a/src/Components/ResourceIDBadge/ResourceIDBadge.less
+++ b/src/Components/ResourceIDBadge/ResourceIDBadge.less
@@ -1,9 +1,11 @@
+@import '~styles/variables.less';
+
 .wrapper {
     margin: 0 0 16px;
 }
 
 .title {
-    color: #666;
+    color: @colorGrey;
     margin-bottom: 4px
 }
 
diff --git a/src/Components/SubscriptionEditor/SubscriptionEditor.less b/src/Components/SubscriptionEditor/SubscriptionEditor.less
index 93ed98f03..8f1f78619 100644
--- a/src/Components/SubscriptionEditor/SubscriptionEditor.less
+++ b/src/Components/SubscriptionEditor/SubscriptionEditor.less
@@ -1,3 +1,5 @@
+@import '~styles/variables.less';
+
 .form {
     .row {
         margin-bottom: 15px;
@@ -7,7 +9,7 @@
         }
 
         .caption {
-            color: #666;
+            color: @colorGrey;
             margin-bottom: 5px;
         }
 
diff --git a/src/Components/SubscriptionList/SubscriptionList.less b/src/Components/SubscriptionList/SubscriptionList.less
index d4d7d319c..6862130a2 100644
--- a/src/Components/SubscriptionList/SubscriptionList.less
+++ b/src/Components/SubscriptionList/SubscriptionList.less
@@ -1,3 +1,6 @@
+@import '~styles/variables.less';
+@import '~styles/mixins.less';
+
 .items-container {
     margin: 0 -10px;
 }
@@ -5,4 +8,24 @@
 .items {
     border-collapse: collapse;
     width: 100%;
+}
+
+.header {
+    &:extend(.italic-font);
+    margin-bottom: 5px;
+    border-bottom: 1px solid #eee;
+
+    td {
+        padding: 5px;
+    }
+}
+
+.fold-button-gap {
+    display: none;
+}
+
+@media screen and (max-width: @breakpoint) {
+    .fold-button-gap {
+        display: table-cell;
+    }
 }
\ No newline at end of file
diff --git a/src/Components/SubscriptionList/SubscriptionList.tsx b/src/Components/SubscriptionList/SubscriptionList.tsx
index ce5967dea..c19324c3c 100644
--- a/src/Components/SubscriptionList/SubscriptionList.tsx
+++ b/src/Components/SubscriptionList/SubscriptionList.tsx
@@ -2,7 +2,9 @@ import React from "react";
 import { Contact } from "../../Domain/Contact";
 import { Subscription } from "../../Domain/Subscription";
 import { SubscriptionRow } from "./SubscriptionRow/SubscriptionRow";
-
+import ArrowBoldDownIcon from "@skbkontur/react-icons/ArrowBoldDown";
+import ArrowBoldUpIcon from "@skbkontur/react-icons/ArrowBoldUp";
+import { useSortData } from "../../hooks/useSortData";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionList.less";
@@ -22,11 +24,38 @@ export const SubscriptionList: React.FC<Props> = ({
     contacts,
     handleEditSubscription,
 }) => {
+    const { sortedData, sortConfig, handleSort } = useSortData(subscriptions, "contacts");
+
+    const SortingIcon =
+        sortConfig.direction === "descending" ? <ArrowBoldDownIcon /> : <ArrowBoldUpIcon />;
     return (
         <div className={cn("items-container")}>
             <table ref={tableRef} className={cn("items")}>
+                <thead>
+                    <tr className={cn("header")}>
+                        <td className={cn("fold-button-gap")} />
+                        <td colSpan={2}>
+                            <button
+                                onClick={() => handleSort("tags")}
+                                type="button"
+                                className={cn("sorting-button")}
+                            >
+                                Tags {sortConfig.sortingColumn === "tags" && SortingIcon}
+                            </button>
+                        </td>
+                        <td>
+                            <button
+                                onClick={() => handleSort("contacts")}
+                                type="button"
+                                className={cn("sorting-button")}
+                            >
+                                Contacts {sortConfig.sortingColumn === "contacts" && SortingIcon}
+                            </button>
+                        </td>
+                    </tr>
+                </thead>
                 <tbody>
-                    {subscriptions.map((subscription) => (
+                    {sortedData.map((subscription) => (
                         <SubscriptionRow
                             key={subscription.id}
                             subscription={subscription}
diff --git a/src/Components/Tag/Tag.less b/src/Components/Tag/Tag.less
index b059ffc93..e4de7514f 100644
--- a/src/Components/Tag/Tag.less
+++ b/src/Components/Tag/Tag.less
@@ -8,7 +8,7 @@
     height: 20px;
     border-radius: 2px;
     background-color: #eee;
-    color: #666;
+    color: @colorGrey;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: top;
diff --git a/src/Components/TagList/TagList.less b/src/Components/TagList/TagList.less
index cad59fe21..bc2025919 100644
--- a/src/Components/TagList/TagList.less
+++ b/src/Components/TagList/TagList.less
@@ -22,7 +22,7 @@
 }
 
 .header {
-    color: #666;
+    color: @colorGrey;
     font-style: italic;
     margin-bottom: 5px;
 }
@@ -75,13 +75,3 @@
 .sub-control {
     width: 100px;
 }
-
-.sorting-button {
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: #666;
-    font: inherit;
-    cursor: pointer;
-}
diff --git a/src/Components/TriggerInfo/TriggerInfo.less b/src/Components/TriggerInfo/TriggerInfo.less
index 5ac266354..5c0a16fcb 100644
--- a/src/Components/TriggerInfo/TriggerInfo.less
+++ b/src/Components/TriggerInfo/TriggerInfo.less
@@ -37,7 +37,7 @@
         font-style: italic;
         margin-top: 10px;
         width: 150px;
-        color: #666;
+        color: @colorGrey;
     }
 
     dd {
diff --git a/src/Components/TriggerList/TriggerList.less b/src/Components/TriggerList/TriggerList.less
index a29e26d83..eac61e771 100644
--- a/src/Components/TriggerList/TriggerList.less
+++ b/src/Components/TriggerList/TriggerList.less
@@ -2,7 +2,7 @@
 @import '~styles/mixins.less';
 
 .no-result {
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }
 
diff --git a/src/Components/TriggerListItem/TriggerListItem.less b/src/Components/TriggerListItem/TriggerListItem.less
index 5c86fc8fe..f153c1cb0 100644
--- a/src/Components/TriggerListItem/TriggerListItem.less
+++ b/src/Components/TriggerListItem/TriggerListItem.less
@@ -40,7 +40,7 @@
 }
 
 .NA {
-    color: #666666;
+    color: @colorGrey;
 }
 
 .data {
diff --git a/src/Containers/SubscriptionListContainer/Components/FilterSubscriptionButtons.tsx b/src/Containers/SubscriptionListContainer/Components/FilterSubscriptionButtons.tsx
new file mode 100644
index 000000000..be7219d4d
--- /dev/null
+++ b/src/Containers/SubscriptionListContainer/Components/FilterSubscriptionButtons.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { Button } from "@skbkontur/react-ui/components/Button";
+import { Filter } from "@skbkontur/react-icons";
+import { Contact } from "../../../Domain/Contact";
+import { Checkbox, DropdownMenu, MenuItem, ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
+import ContactTypeIcon from "../../../Components/ContactTypeIcon/ContactTypeIcon";
+import { ArrowChevronDown } from "@skbkontur/react-icons";
+import TagDropdownSelect from "../../../Components/TagDropdownSelect/TagDropdownSelect";
+
+interface IFilterSubscriptionButtons {
+    contacts: Contact[];
+    filterContactIDs: string[];
+    availableContactIDs: string[];
+    filterTags: string[];
+    availableTags: string[];
+    handleFilterContactsChange: (contactID: string) => void;
+    handleFilterTagsChange: (tags: string[]) => void;
+}
+
+export const FilterSubscriptionButtons = ({
+    contacts,
+    filterContactIDs,
+    availableContactIDs,
+    filterTags,
+    availableTags,
+    handleFilterContactsChange,
+    handleFilterTagsChange,
+}: IFilterSubscriptionButtons) => {
+    const renderFilterByContactCaption = ({ openMenu }: { openMenu: () => void }) => {
+        return (
+            <Button
+                width={180}
+                icon={filterContactIDs.length ? <Filter /> : <ArrowChevronDown />}
+                use="default"
+                onClick={openMenu}
+            >
+                Filter by contact
+            </Button>
+        );
+    };
+
+    const availableContacts = contacts.filter((contact) =>
+        availableContactIDs?.includes(contact.id)
+    );
+
+    return (
+        <>
+            <DropdownMenu menuMaxHeight={300} caption={renderFilterByContactCaption}>
+                {availableContacts.map((contact) => (
+                    <ThemeContext.Provider
+                        key={contact.id}
+                        value={ThemeFactory.create({
+                            menuItemHoverBg: "initial",
+                        })}
+                    >
+                        <MenuItem>
+                            <Checkbox
+                                checked={filterContactIDs.includes(contact.id)}
+                                style={{
+                                    alignItems: "center",
+                                    padding: "0",
+                                }}
+                                onValueChange={() => handleFilterContactsChange(contact.id)}
+                            >
+                                <ContactTypeIcon type={contact.type} />
+                                &nbsp;
+                                {contact.value}
+                            </Checkbox>
+                        </MenuItem>
+                    </ThemeContext.Provider>
+                ))}
+            </DropdownMenu>
+            <TagDropdownSelect
+                width={180}
+                value={filterTags}
+                availableTags={availableTags}
+                onChange={handleFilterTagsChange}
+                placeholder="Filter by tag"
+            />
+        </>
+    );
+};
diff --git a/src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx b/src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx
index 673cbd51f..d3d9f5723 100644
--- a/src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx
+++ b/src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx
@@ -7,13 +7,13 @@ import { Contact } from "../../Domain/Contact";
 import SubscriptionEditModal from "../../Components/SubscriptionEditModal/SubscriptionEditModal";
 import CreateSubscriptionModal from "../../Components/CreateSubscriptionModal/CreateSubscriptionModal";
 import type { SubscriptionInfo } from "../../Components/SubscriptionEditor/SubscriptionEditor";
-import TagDropdownSelect from "../../Components/TagDropdownSelect/TagDropdownSelect";
 import { SubscriptionList } from "../../Components/SubscriptionList/SubscriptionList";
-import { filterSubscriptions } from "../../Domain/FilterSubscriptions";
 import { AddSubscriptionMessage } from "../../Components/AddSubscribtionMessage/AddSubscribtionMessage";
 import { ModalType } from "../../Domain/Global";
 import { ConfigState } from "../../store/selectors";
 import { useAppSelector } from "../../store/hooks";
+import { FilterSubscriptionButtons } from "./Components/FilterSubscriptionButtons";
+import { useFilterSubscriptions } from "../../hooks/useFilterSubscriptions";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionListContainer.less";
@@ -66,9 +66,19 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
 
     const [newSubscription, setNewSubscription] = useState<SubscriptionInfo | null>(null);
     const [subscriptionToEdit, setSubscriptionToEdit] = useState<Subscription | null>(null);
-    const [filterTags, setFilterTags] = useState<string[]>([]);
-    const { filteredSubscriptions, availableTags } = filterSubscriptions(subscriptions, filterTags);
+
+    const {
+        filteredSubscriptions,
+        availableTags,
+        availableContactIDs,
+        filterContactIDs,
+        filterTags,
+        handleSetFilterTags,
+        handleSetFilterContactIDs,
+    } = useFilterSubscriptions(subscriptions);
+
     const { config } = useAppSelector(ConfigState);
+
     const isPlottingDefaultOn = !!config?.featureFlags.isPlottingDefaultOn;
 
     const handleCloseModal = (modal: ModalType) => {
@@ -83,10 +93,6 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
         }
     };
 
-    const handleFilterTagsChange = (tags: string[]): void => {
-        setFilterTags(tags);
-    };
-
     const handleEditSubscription = (subscription: Subscription): void => {
         openModal(ModalType.subscriptionEditModal);
         setSubscriptionToEdit(subscription);
@@ -181,12 +187,14 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
                             >
                                 Add subscription
                             </Button>
-                            <TagDropdownSelect
-                                width={180}
-                                value={filterTags}
+                            <FilterSubscriptionButtons
+                                contacts={contacts}
+                                filterContactIDs={filterContactIDs}
+                                availableContactIDs={availableContactIDs}
+                                filterTags={filterTags}
                                 availableTags={availableTags}
-                                onChange={handleFilterTagsChange}
-                                placeholder="Filter subscriptions by Tag"
+                                handleFilterContactsChange={handleSetFilterContactIDs}
+                                handleFilterTagsChange={handleSetFilterTags}
                             />
                         </div>
                     </div>
diff --git a/src/Domain/FilterSubscriptions.ts b/src/Domain/FilterSubscriptions.ts
index 6a2b7a578..9918d3aa4 100644
--- a/src/Domain/FilterSubscriptions.ts
+++ b/src/Domain/FilterSubscriptions.ts
@@ -2,19 +2,30 @@ import { Subscription } from "./Subscription";
 
 export const filterSubscriptions = (
     subscriptions: Subscription[],
-    filterTags: string[]
+    filterTags: string[],
+    contactIDs: string[]
 ): {
     filteredSubscriptions: Subscription[];
     availableTags: string[];
+    availableContactIDs: string[];
 } => {
-    const filteredSubscriptions = subscriptions.filter((subscription) =>
-        filterTags.every((x) => subscription.tags.includes(x))
-    );
+    const filteredSubscriptions = subscriptions.filter((subscription) => {
+        return (
+            filterTags.every((tag) => subscription.tags.includes(tag)) &&
+            contactIDs.every((id) => subscription.contacts.includes(id))
+        );
+    });
 
-    const availableTags = [...new Set(filteredSubscriptions.flatMap((i) => i.tags))];
+    const availableTags = [
+        ...new Set(filteredSubscriptions.flatMap((subscription) => subscription.tags)),
+    ];
+    const availableContactIDs = [
+        ...new Set(filteredSubscriptions.flatMap((subscription) => subscription.contacts)),
+    ];
 
     return {
         filteredSubscriptions,
         availableTags,
+        availableContactIDs,
     };
 };
diff --git a/src/hooks/useFilterSubscriptions.tsx b/src/hooks/useFilterSubscriptions.tsx
new file mode 100644
index 000000000..830319178
--- /dev/null
+++ b/src/hooks/useFilterSubscriptions.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { filterSubscriptions } from "../Domain/FilterSubscriptions";
+import { Subscription } from "../Domain/Subscription";
+
+export function useFilterSubscriptions(subscriptions: Subscription[]) {
+    const [filterContactIDs, setFilterContactIDs] = useState<string[]>([]);
+    const [filterTags, setFilterTags] = useState<string[]>([]);
+
+    const { filteredSubscriptions, availableTags, availableContactIDs } = filterSubscriptions(
+        subscriptions,
+        filterTags,
+        filterContactIDs
+    );
+
+    const handleSetFilterTags = (tags: string[]) => {
+        setFilterTags(tags);
+    };
+
+    const handleSetFilterContactIDs = (contactID: string) => {
+        const contactIndex = filterContactIDs.indexOf(contactID);
+        if (contactIndex === -1) {
+            setFilterContactIDs((prev) => [...prev, contactID]);
+        } else {
+            setFilterContactIDs((prev) =>
+                prev.filter((id) => {
+                    return id !== contactID;
+                })
+            );
+        }
+    };
+
+    return {
+        filteredSubscriptions,
+        availableTags,
+        availableContactIDs,
+        filterContactIDs,
+        filterTags,
+        handleSetFilterTags,
+        handleSetFilterContactIDs,
+    };
+}
diff --git a/src/style.less b/src/style.less
index c3a1731f3..ab1e8339e 100644
--- a/src/style.less
+++ b/src/style.less
@@ -79,7 +79,7 @@
             margin-left: 0;
             padding-left: 10px;
             border-left: 3px solid #ccc;
-            color: #666;
+            color: @colorGrey;
         }
     }
 }