From 147a47bfcb2eaa918d1c48135fd0186988de7b9d Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Fri, 22 Nov 2024 14:32:17 +0545
Subject: [PATCH] Subscription page integration

---
 backend                                       |   2 +-
 package.json                                  |   2 +-
 src/components/Badge/index.tsx                |  21 -
 src/components/Badge/styles.module.css        |   6 -
 .../AlertInfo/AreaInfoDetail/index.tsx        |   1 -
 src/views/AllSourcesFeeds/index.tsx           |   1 -
 src/views/HistoricalAlerts/i18n.json          |   2 +
 src/views/HistoricalAlerts/index.tsx          | 124 +++---
 src/views/HistoricalAlerts/styles.module.css  |   6 +
 src/views/Home/AlertFilters/index.tsx         |  19 -
 .../Sidebar/CountryAdmin1List/index.tsx       |   9 +-
 src/views/Home/AlertsMap/index.tsx            |  14 +-
 src/views/Home/AlertsTable/index.tsx          |  21 +-
 src/views/Home/index.tsx                      |  93 ++--
 src/views/Home/useAlertFilters.ts             |  34 +-
 .../ActiveTableActions/index.tsx              |  19 +-
 .../ArchiveTableActions/index.tsx             |  15 +-
 .../AlertInfoItem/index.tsx                   |   2 +-
 .../SubscriptionDetail/i18n.json              |   3 +-
 .../SubscriptionDetail/index.tsx              | 256 ++++++++---
 .../SubscriptionDetail/styles.module.css      |   9 +-
 .../SubscriptionTableItem/i18n.json           |   8 +-
 .../SubscriptionTableItem/index.tsx           |  93 ++--
 .../SubscriptionTableItem/styles.module.css   |   9 +-
 src/views/MySubscription/common.tsx           |  42 --
 src/views/MySubscription/i18n.json            |   8 +-
 src/views/MySubscription/index.tsx            | 421 +++++++++++++++---
 src/views/NewSubscriptionModal/i18n.json      |   4 +-
 src/views/NewSubscriptionModal/index.tsx      | 275 ++++++++----
 yarn.lock                                     |  14 +-
 30 files changed, 1074 insertions(+), 459 deletions(-)
 delete mode 100644 src/components/Badge/index.tsx
 delete mode 100644 src/components/Badge/styles.module.css
 delete mode 100644 src/views/MySubscription/common.tsx

diff --git a/backend b/backend
index b83328d0..c02b63c4 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit b83328d0dcb3c1d037b92af0e45b1c98e3d76248
+Subproject commit c02b63c4c220bae7de86b88a1627ecca7d00d8bd
diff --git a/package.json b/package.json
index 6b0f0406..ac4f2472 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@hcaptcha/react-hcaptcha": "^1.11.0",
     "@ifrc-go/icons": "^1.3.3",
-    "@ifrc-go/ui": "^1.1.2",
+    "@ifrc-go/ui": "^1.2.1",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@sentry/react": "^7.81.1",
diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
deleted file mode 100644
index 52ec6a8b..00000000
--- a/src/components/Badge/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from '@ifrc-go/ui';
-
-import styles from './styles.module.css';
-
-interface Props {
-    title: string;
-}
-
-function Badge(props: Props) {
-    const {
-        title,
-    } = props;
-
-    return (
-        <Container className={styles.badge}>
-            {title}
-        </Container>
-    );
-}
-
-export default Badge;
diff --git a/src/components/Badge/styles.module.css b/src/components/Badge/styles.module.css
deleted file mode 100644
index 43bfb743..00000000
--- a/src/components/Badge/styles.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.badge {
-    display: flex;
-    border-radius: 1em;
-    background-color: var(--go-ui-color-gray-20);
-    padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-sm);
-}
diff --git a/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx b/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
index 18e5e7be..b958d8f0 100644
--- a/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
+++ b/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
@@ -236,7 +236,6 @@ function AreaInfoDetail(props: Props) {
                         onChange={setSelectedFeature}
                     />
                 )}
-                withGridViewInFilter
                 headingLevel={4}
             >
                 <div className={styles.map}>
diff --git a/src/views/AllSourcesFeeds/index.tsx b/src/views/AllSourcesFeeds/index.tsx
index f80cb43b..b10ca554 100644
--- a/src/views/AllSourcesFeeds/index.tsx
+++ b/src/views/AllSourcesFeeds/index.tsx
@@ -117,7 +117,6 @@ export function Component() {
             heading={strings.sourceFeedsTitle}
         >
             <Container
-                withGridViewInFilter
                 filters={(
                     <TextInput
                         placeholder={strings.searchSourcesPlaceholder}
diff --git a/src/views/HistoricalAlerts/i18n.json b/src/views/HistoricalAlerts/i18n.json
index a1027bf4..03739d60 100644
--- a/src/views/HistoricalAlerts/i18n.json
+++ b/src/views/HistoricalAlerts/i18n.json
@@ -28,6 +28,8 @@
         "filterCategoriesPlaceholder": "All Event Categories",
         "filterStartDateFrom":"Start date from",
         "filterStartDateTo":"Start date To",
+        "filterApply": "Apply",
+        "filterClear": "Clear",
         "historicalAlertDescription": "IFRC Alert Hub provides global emergency alerts, empowering communities to protect lives and livelihoods. Easily access and filter past alerts from the latest months to stay informed."
     }
 }
diff --git a/src/views/HistoricalAlerts/index.tsx b/src/views/HistoricalAlerts/index.tsx
index 32dad1f6..b0d798fd 100644
--- a/src/views/HistoricalAlerts/index.tsx
+++ b/src/views/HistoricalAlerts/index.tsx
@@ -3,6 +3,7 @@ import {
     HTMLProps,
     useCallback,
     useMemo,
+    useState,
 } from 'react';
 import {
     gql,
@@ -10,6 +11,7 @@ import {
 } from '@apollo/client';
 import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
+    Button,
     Container,
     DateInput,
     DateOutput,
@@ -39,10 +41,10 @@ import {
     AlertEnumsAndAllCountryListQueryVariables,
     AlertEnumsQuery,
     AlertFilter,
-    AlertInformationsQuery,
-    AlertInformationsQueryVariables,
     FilteredAdminListQuery,
     FilteredAdminListQueryVariables,
+    HistoricalAlertInformationsQuery,
+    HistoricalAlertInformationsQueryVariables,
     OffsetPaginationInput,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
@@ -58,20 +60,16 @@ import AlertActions, { type Props as AlertActionsProps } from './AlertActions';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-// TODO: Add Historical alert query here
-
-const ALERT_INFORMATIONS = gql`
-    query AlertInformations(
-        $order:AlertOrder,
+const HISTORICAL_ALERT_INFORMATIONS = gql`
+    query HistoricalAlertInformations(
         $pagination: OffsetPaginationInput,
         $filters: AlertFilter,
     ) {
         public {
             id
-            alerts(
+            historicalAlerts(
                 pagination: $pagination,
                 filters: $filters,
-                order:$order,
             ) {
                 limit
                 offset
@@ -156,7 +154,7 @@ type Severity = NonNullable<AlertEnumsQuery['enums']['AlertInfoSeverity']>[numbe
 type Certainty = NonNullable<AlertEnumsQuery['enums']['AlertInfoCertainty']>[number];
 type Category = NonNullable<AlertEnumsQuery['enums']['AlertInfoCategory']>[number];
 
-type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
+type AlertType = NonNullable<NonNullable<NonNullable<HistoricalAlertInformationsQuery['public']>['historicalAlerts']>['items']>[number];
 type Admin1 = AlertType['admin1s'][number];
 
 const adminKeySelector = (admin1: AdminOption) => admin1.id;
@@ -168,13 +166,18 @@ const categoryKeySelector = (category: Category) => category.key;
 
 const alertKeySelector = (item: AlertType) => item.id;
 const PAGE_SIZE = 20;
-const ASC = 'ASC';
-const DESC = 'DESC';
+
+type NewFilter = Omit<AlertFilter, 'infos'> & AlertFilter['infos'] & {
+    startDateAfter?: string;
+    startDateBefore?: string;
+};
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
 
+    const [finalFilter, setFinalFilter] = useState<NewFilter | undefined>();
+
     const {
         sortState,
         limit,
@@ -185,55 +188,62 @@ export function Component() {
         setFilterField,
         filtered,
         offset,
-    } = useFilterState<AlertFilter>({
+        setFilter,
+    } = useFilterState<NewFilter>({
         pageSize: PAGE_SIZE,
         filter: {},
     });
 
-    const order = useMemo(() => {
-        if (isNotDefined(sortState.sorting)) {
-            return undefined;
-        }
-        return {
-            [sortState.sorting.name]: sortState.sorting.direction === 'asc' ? ASC : DESC,
-        };
-    }, [sortState.sorting]);
-
-    const variables = useMemo<{ filters: AlertFilter, pagination: OffsetPaginationInput }>(() => ({
+    const variables = useMemo<{
+        filters: AlertFilter | undefined,
+        pagination: OffsetPaginationInput,
+    }>(() => ({
         pagination: {
             offset,
             limit,
         },
-        order,
-        filters: {
-            urgency: filter.urgency,
-            severity: filter.severity,
-            certainty: filter.certainty,
-            category: filter.category,
-            country: isDefined(filter.country?.pk) ? { pk: filter.country.pk } : undefined,
-            admin1: filter.admin1,
-            sent: isDefined(filter.sent) ? {
-                // TODO: Add start date & end date
+        filters: finalFilter ? {
+            DISTINCT: true,
+            infos: {
+                urgency: finalFilter?.urgency,
+                severity: finalFilter?.severity,
+                certainty: finalFilter?.certainty,
+                category: finalFilter?.category,
+            },
+            country: isDefined(finalFilter?.country?.pk)
+                ? { pk: finalFilter.country.pk } : undefined,
+            admin1: finalFilter?.admin1,
+            sent: {
                 range: {
-                    end: filter.sent,
-                    start: filter.sent,
+                    end: finalFilter?.startDateBefore,
+                    start: finalFilter?.startDateAfter,
                 },
-            } : undefined,
-        },
+            },
+        } : undefined,
     }), [
-        order,
         limit,
         offset,
-        filter,
+        finalFilter,
     ]);
 
+    const handleApplyFilters = useCallback(() => {
+        setFinalFilter(rawFilter);
+    }, [
+        rawFilter,
+    ]);
+
+    const handleResetFilters = useCallback(() => {
+        setFinalFilter(undefined);
+        setFilter({});
+    }, [setFilter]);
+
     const {
         loading: alertInfoLoading,
         previousData,
         data: alertInfosResponse = previousData,
         error: alertInfoError,
-    } = useQuery<AlertInformationsQuery, AlertInformationsQueryVariables>(
-        ALERT_INFORMATIONS,
+    } = useQuery<HistoricalAlertInformationsQuery, HistoricalAlertInformationsQueryVariables>(
+        HISTORICAL_ALERT_INFORMATIONS,
         {
             skip: isNotDefined(variables),
             variables,
@@ -280,7 +290,7 @@ export function Component() {
         { variables: adminQueryVariables, skip: isNotDefined(filter.country) },
     );
 
-    const data = alertInfosResponse?.public.alerts;
+    const data = alertInfosResponse?.public.historicalAlerts;
 
     const columns = useMemo(
         () => ([
@@ -374,7 +384,6 @@ export function Component() {
                 className={styles.alertsTable}
                 heading={heading}
                 withHeaderBorder
-                withGridViewInFilter
                 actions={(
                     <Link
                         className={styles.sources}
@@ -440,18 +449,17 @@ export function Component() {
                             value={rawFilter.category}
                             onChange={setFilterField}
                         />
-                        {/* // TODO Add start date and end date filter */}
                         <DateInput
-                            name="sent"
+                            name="startDateAfter"
                             label={strings.filterStartDateFrom}
-                            value={undefined}
-                            onChange={() => { }}
+                            value={rawFilter.startDateAfter}
+                            onChange={setFilterField}
                         />
                         <DateInput
-                            name="sent"
+                            name="startDateBefore"
                             label={strings.filterStartDateTo}
-                            value={undefined}
-                            onChange={() => { }}
+                            value={rawFilter.startDateBefore}
+                            onChange={setFilterField}
                         />
                         <SelectInput
                             label={strings.filterCountriesLabel}
@@ -474,6 +482,22 @@ export function Component() {
                             value={rawFilter.admin1}
                             onChange={setFilterField}
                         />
+                        <div className={styles.filterButton}>
+                            <Button
+                                name={undefined}
+                                onClick={handleApplyFilters}
+                                variant="secondary"
+                            >
+                                {strings.filterApply}
+                            </Button>
+                            <Button
+                                name={undefined}
+                                onClick={handleResetFilters}
+                                variant="secondary"
+                            >
+                                {strings.filterClear}
+                            </Button>
+                        </div>
                     </>
                 )}
             >
diff --git a/src/views/HistoricalAlerts/styles.module.css b/src/views/HistoricalAlerts/styles.module.css
index 2b1da9d6..15dc359b 100644
--- a/src/views/HistoricalAlerts/styles.module.css
+++ b/src/views/HistoricalAlerts/styles.module.css
@@ -64,5 +64,11 @@
             text-decoration: underline;
             color: var(--go-ui-color-primary-red);
         }
+
+        .filter-button {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            align-items: flex-end;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/Home/AlertFilters/index.tsx b/src/views/Home/AlertFilters/index.tsx
index ac32b497..b8c270ee 100644
--- a/src/views/Home/AlertFilters/index.tsx
+++ b/src/views/Home/AlertFilters/index.tsx
@@ -131,16 +131,12 @@ function AlertFilters(props: Props) {
         selectedUrgencyTypes,
         selectedCertaintyTypes,
         activeRegionId,
-        // startDateFrom,
-        // startDateTo,
         setActiveCountryId,
         setActiveAdmin1Id,
         setSelectedSeverityTypes,
         setSelectedUrgencyTypes,
         setSelectedCertaintyTypes,
         setActiveRegionId,
-        // setStartDateFrom,
-        // setStartDateTo,
         selectedCategoryTypes,
         setSelectedCategoryTypes,
     } = useContext(AlertDataContext);
@@ -231,21 +227,6 @@ function AlertFilters(props: Props) {
                 value={selectedCertaintyTypes}
                 onChange={setSelectedCertaintyTypes}
             />
-            {/*
-            Add these filter after adding Historical alerts
-            <DateInput
-                name="startDateFrom"
-                label={strings.filterStartDateFrom}
-                value={startDateFrom}
-                onChange={setStartDateFrom}
-            />
-            <DateInput
-                name="startDateTo"
-                label={strings.filterStartDateTo}
-                value={startDateTo}
-                onChange={setStartDateTo}
-            />
-            */}
             {variant === 'table' && (
                 <MultiSelectInput
                     label={strings.filterCategoriesLabel}
diff --git a/src/views/Home/AlertsMap/Sidebar/CountryAdmin1List/index.tsx b/src/views/Home/AlertsMap/Sidebar/CountryAdmin1List/index.tsx
index dca2d138..04b7659a 100644
--- a/src/views/Home/AlertsMap/Sidebar/CountryAdmin1List/index.tsx
+++ b/src/views/Home/AlertsMap/Sidebar/CountryAdmin1List/index.tsx
@@ -64,9 +64,12 @@ function CountryAdmin1List(props: Props) {
         () => ({
             countryId,
             alertFilters: {
-                severity: alertFilters.severity,
-                certainty: alertFilters.certainty,
-                urgency: alertFilters.urgency,
+                DISTINCT: true,
+                infos: {
+                    severity: alertFilters.infos?.severity,
+                    certainty: alertFilters.infos?.certainty,
+                    urgency: alertFilters.infos?.urgency,
+                },
                 sent: alertFilters.sent,
             },
         }),
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
index 24bdabbe..e3a74d13 100644
--- a/src/views/Home/AlertsMap/index.tsx
+++ b/src/views/Home/AlertsMap/index.tsx
@@ -188,14 +188,11 @@ export function Component() {
     );
 
     const defaultSubscription = useMemo(() => ({
-        name: '',
-        alertFilters: {
-            urgency: selectedUrgencyTypes,
-            severity: selectedSeverityTypes,
-            certainty: selectedCertaintyTypes,
-            country: activeCountryId ?? '',
-            admin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-        },
+        filterAlertUrgencies: selectedUrgencyTypes,
+        filterAlertCertainties: selectedCertaintyTypes,
+        filterAlertSeverities: selectedSeverityTypes,
+        filterAlertCountry: activeCountryId || '',
+        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
     }), [
         selectedUrgencyTypes,
         selectedSeverityTypes,
@@ -251,7 +248,6 @@ export function Component() {
             contentViewType="grid"
             numPreferredGridContentColumns={3}
             filters={<AlertFilters variant="map" />}
-            withGridViewInFilter
         >
             {showSubscriptionModal && (
                 <NewSubscriptionModal
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
index 6b0ae9f2..2ac66f94 100644
--- a/src/views/Home/AlertsTable/index.tsx
+++ b/src/views/Home/AlertsTable/index.tsx
@@ -148,10 +148,13 @@ export function Component() {
         () => {
             setFilter({
                 ...alertFilters,
+                DISTINCT: true,
                 country: isDefined(activeCountryId) ? { pk: activeCountryId } : undefined,
                 admin1: activeAdmin1Id,
                 region: activeRegionId,
-                category: selectedCategoryTypes,
+                infos: {
+                    category: selectedCategoryTypes,
+                },
                 sent: isDefined(startDateFrom) && isDefined(startDateTo) ? {
                     range: {
                         end: startDateTo,
@@ -288,20 +291,21 @@ export function Component() {
     );
 
     const defaultSubscription = useMemo(() => ({
+        id: '',
         name: '',
-        alertFilters: {
-            urgency: selectedUrgencyTypes,
-            severity: selectedSeverityTypes,
-            certainty: selectedCertaintyTypes,
-            country: activeCountryId ?? '',
-            admin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-        },
+        filterAlertUrgencies: selectedUrgencyTypes,
+        filterAlertCertainties: selectedCertaintyTypes,
+        filterAlertSeverities: selectedSeverityTypes,
+        filterAlertCategories: selectedCategoryTypes,
+        filterAlertCountry: activeCountryId || '',
+        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
     }), [
         selectedUrgencyTypes,
         selectedSeverityTypes,
         selectedCertaintyTypes,
         activeCountryId,
         activeAdmin1Id,
+        selectedCategoryTypes,
     ]);
 
     return (
@@ -317,7 +321,6 @@ export function Component() {
                 </div>
             )}
             withHeaderBorder
-            withGridViewInFilter
             actions={(
                 <div className={styles.links}>
                     <Button
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index b47ce863..ff455979 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -55,16 +55,22 @@ function convertIdToUrlQuery(urlQuery: string | undefined | null) {
 }
 
 type SafeExtract<T, X extends keyof T> = Extract<keyof T, X>;
-type ApplicableAlertFilterKey = SafeExtract<AlertFilter, 'country' | 'admin1' | 'urgency' | 'region' | 'severity' | 'category' | 'certainty'>;
 
-type ApplicableAlertFilter = Pick<AlertFilter, ApplicableAlertFilterKey> & {
+type DirectAlertFilterKeys = SafeExtract<AlertFilter, 'country' | 'admin1' | 'region'>;
+type InfosAlertFilters = NonNullable<AlertFilter['infos']>;
+type InfosAlertFilterKeys = SafeExtract<InfosAlertFilters, 'category' | 'urgency' | 'severity' | 'certainty'>;
+type ApplicableAlertFilterKey = DirectAlertFilterKeys | InfosAlertFilterKeys;
+
+type ApplicableAlertFilter = Pick<InfosAlertFilters, InfosAlertFilterKeys>
+& Pick<AlertFilter, DirectAlertFilterKeys | 'infos'>
+& {
     alert: string | undefined;
     startDateFrom: string | undefined;
     startDateTo: string | undefined;
 };
 
-type CompbinedAlertFilterKey = ApplicableAlertFilterKey | 'alert' | 'startDateFrom' | 'startDateTo';
-const filterKeys: CompbinedAlertFilterKey[] = ['country', 'admin1', 'urgency', 'region', 'severity', 'category', 'certainty', 'alert', 'startDateTo', 'startDateFrom'];
+type CombinedAlertFilterKey = ApplicableAlertFilterKey | 'alert' | 'startDateFrom' | 'startDateTo';
+const filterKeys: CombinedAlertFilterKey[] = ['country', 'admin1', 'region', 'urgency', 'severity', 'category', 'certainty', 'alert', 'startDateTo', 'startDateFrom'];
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
@@ -73,28 +79,40 @@ export function Component() {
     const [
         filters,
         setFilters,
-    ] = useUrlSearchState<ApplicableAlertFilter, CompbinedAlertFilterKey>(
+    ] = useUrlSearchState<ApplicableAlertFilter, CombinedAlertFilterKey>(
         filterKeys,
-        (urlValues) => ({
-            country: isDefined(urlValues.country) ? { pk: urlValues.country } : undefined,
-            admin1: convertUrlQueryToId(urlValues.admin1),
-            region: convertUrlQueryToId(urlValues.region),
-            category: convertUrlQueryToEnumList(urlValues.category),
-            urgency: convertUrlQueryToEnumList(urlValues.urgency),
-            severity: convertUrlQueryToEnumList(urlValues.severity),
-            certainty: convertUrlQueryToEnumList(urlValues.certainty),
-            alert: convertUrlQueryToId(urlValues.alert),
-            startDateTo: convertUrlQueryToId(urlValues.startDateTo),
-            startDateFrom: convertUrlQueryToId(urlValues.startDateFrom),
-        }),
+        (urlValues) => {
+            const category: NonNullable<ApplicableAlertFilter['infos']>['category'] = convertUrlQueryToEnumList(urlValues.category);
+            const urgency: NonNullable<ApplicableAlertFilter['infos']>['urgency'] = convertUrlQueryToEnumList(urlValues.urgency);
+            const severity: NonNullable<ApplicableAlertFilter['infos']>['severity'] = convertUrlQueryToEnumList(urlValues.severity);
+            const certainty: NonNullable<ApplicableAlertFilter['infos']>['certainty'] = convertUrlQueryToEnumList(urlValues.certainty);
+
+            return {
+                country: isDefined(urlValues.country) ? { pk: urlValues.country } : undefined,
+                admin1: convertUrlQueryToId(urlValues.admin1),
+                region: convertUrlQueryToId(urlValues.region),
+                infos: (isDefined(category)
+                        || isDefined(urgency)
+                        || isDefined(severity) || isDefined(certainty))
+                    ? ({
+                        category,
+                        urgency,
+                        severity,
+                        certainty,
+                    }) : undefined,
+                alert: convertUrlQueryToId(urlValues.alert),
+                startDateTo: convertUrlQueryToId(urlValues.startDateTo),
+                startDateFrom: convertUrlQueryToId(urlValues.startDateFrom),
+            };
+        },
         (filterValues) => ({
             country: convertIdToUrlQuery(filterValues.country?.pk),
             admin1: convertIdToUrlQuery(filterValues.admin1),
             region: convertIdToUrlQuery(filterValues.region),
-            category: convertEnumListToUrlQuery(filterValues.category),
-            urgency: convertEnumListToUrlQuery(filterValues.urgency),
-            severity: convertEnumListToUrlQuery(filterValues.severity),
-            certainty: convertEnumListToUrlQuery(filterValues.certainty),
+            category: convertEnumListToUrlQuery(filterValues.infos?.category),
+            urgency: convertEnumListToUrlQuery(filterValues.infos?.urgency),
+            severity: convertEnumListToUrlQuery(filterValues.infos?.severity),
+            certainty: convertEnumListToUrlQuery(filterValues.infos?.certainty),
             alert: convertUrlQueryToId(filterValues.alert),
             startDateTo: convertUrlQueryToId(filterValues.startDateTo),
             startDateFrom: convertUrlQueryToId(filterValues.startDateFrom),
@@ -122,13 +140,28 @@ export function Component() {
     );
 
     const getFilterFieldSetterFn = useCallback(
-        (fieldKey: CompbinedAlertFilterKey) => (
+        (fieldKey: CombinedAlertFilterKey) => (
             (newValue: ApplicableAlertFilter[ApplicableAlertFilterKey]) => {
                 setFilters(
-                    (prevFilter) => ({
-                        ...prevFilter,
-                        [fieldKey]: newValue,
-                    }),
+                    (prevFilter) => {
+                        if (fieldKey === 'category'
+                            || fieldKey === 'urgency'
+                            || fieldKey === 'severity'
+                            || fieldKey === 'certainty'
+                        ) {
+                            return ({
+                                ...prevFilter,
+                                infos: {
+                                    ...prevFilter.infos,
+                                    [fieldKey]: newValue,
+                                },
+                            });
+                        }
+                        return ({
+                            ...prevFilter,
+                            [fieldKey]: newValue,
+                        });
+                    },
                 );
             }
         ),
@@ -155,16 +188,16 @@ export function Component() {
             activeAdmin1Details: isDefined(filters.admin1) ? activeAdmin1Details : undefined,
             setActiveAdmin1Details,
 
-            selectedUrgencyTypes: filters.urgency ?? undefined,
+            selectedUrgencyTypes: filters.infos?.urgency ?? undefined,
             setSelectedUrgencyTypes: getFilterFieldSetterFn('urgency'),
 
-            selectedSeverityTypes: filters.severity ?? undefined,
+            selectedSeverityTypes: filters.infos?.severity ?? undefined,
             setSelectedSeverityTypes: getFilterFieldSetterFn('severity'),
 
-            selectedCertaintyTypes: filters.certainty ?? undefined,
+            selectedCertaintyTypes: filters.infos?.certainty ?? undefined,
             setSelectedCertaintyTypes: getFilterFieldSetterFn('certainty'),
 
-            selectedCategoryTypes: filters.category ?? undefined,
+            selectedCategoryTypes: filters.infos?.category ?? undefined,
             setSelectedCategoryTypes: getFilterFieldSetterFn('category'),
 
             startDateFrom: filters.startDateFrom,
diff --git a/src/views/Home/useAlertFilters.ts b/src/views/Home/useAlertFilters.ts
index 73aabb2d..f46ea4cb 100644
--- a/src/views/Home/useAlertFilters.ts
+++ b/src/views/Home/useAlertFilters.ts
@@ -15,23 +15,39 @@ function useAlertFilters() {
         selectedUrgencyTypes,
         activeCountryId,
         activeAdmin1Id,
+        selectedCategoryTypes,
     } = useContext(AlertDataContext);
 
+    const certaintyDefined = isDefined(selectedCertaintyTypes) && selectedCertaintyTypes.length > 0;
+    const severityDefined = isDefined(selectedSeverityTypes) && selectedSeverityTypes.length > 0;
+    const urgencyDefined = isDefined(selectedUrgencyTypes) && selectedUrgencyTypes.length > 0;
+    const categoryDefined = isDefined(selectedCategoryTypes) && selectedCategoryTypes.length > 0;
+
     const alertFilters = useMemo<AlertFilter>(
         () => ({
-            certainty: isDefined(selectedCertaintyTypes) && selectedCertaintyTypes.length > 0
-                ? selectedCertaintyTypes
-                : undefined,
-            severity: isDefined(selectedSeverityTypes) && selectedSeverityTypes.length > 0
-                ? selectedSeverityTypes
-                : undefined,
-            urgency: isDefined(selectedUrgencyTypes) && selectedUrgencyTypes.length > 0
-                ? selectedUrgencyTypes
-                : undefined,
+            infos: (certaintyDefined || severityDefined || urgencyDefined || categoryDefined) ? ({
+                certainty: certaintyDefined
+                    ? selectedCertaintyTypes
+                    : undefined,
+                severity: severityDefined
+                    ? selectedSeverityTypes
+                    : undefined,
+                urgency: urgencyDefined
+                    ? selectedUrgencyTypes
+                    : undefined,
+                category: categoryDefined
+                    ? selectedCategoryTypes
+                    : undefined,
+            }) : undefined,
             country: isDefined(activeCountryId) ? { pk: activeCountryId } : undefined,
             admin1: isDefined(activeAdmin1Id) ? activeAdmin1Id : undefined,
         }),
         [
+            certaintyDefined,
+            severityDefined,
+            urgencyDefined,
+            categoryDefined,
+            selectedCategoryTypes,
             activeAdmin1Id,
             activeCountryId,
             selectedUrgencyTypes,
diff --git a/src/views/MySubscription/ActiveTableActions/index.tsx b/src/views/MySubscription/ActiveTableActions/index.tsx
index 48feb20a..015c37a6 100644
--- a/src/views/MySubscription/ActiveTableActions/index.tsx
+++ b/src/views/MySubscription/ActiveTableActions/index.tsx
@@ -11,7 +11,19 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 
 import i18n from './i18n.json';
 
-function ActiveTableActions() {
+interface Props {
+    onSubscriptionRemove?: () => void;
+    onArchiveClick?: () => void;
+    onEditClick: () => void;
+}
+
+function ActiveTableActions(props: Props) {
+    const {
+        onSubscriptionRemove,
+        onArchiveClick,
+        onEditClick,
+    } = props;
+
     const strings = useTranslation(i18n);
 
     return (
@@ -23,7 +35,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="archive"
-                onClick={undefined}
+                onClick={onArchiveClick}
                 icons={<LayoutBottomLineIcon />}
             >
                 {strings.archiveSubscriptionActions}
@@ -31,6 +43,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="edit"
+                onClick={onEditClick}
                 icons={<EditTwoLineIcon />}
             >
                 {strings.editSubscriptionActions}
@@ -38,7 +51,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="delete"
-                onClick={undefined}
+                onClick={onSubscriptionRemove}
                 icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
diff --git a/src/views/MySubscription/ArchiveTableActions/index.tsx b/src/views/MySubscription/ArchiveTableActions/index.tsx
index 667f7dd2..88e4ff6a 100644
--- a/src/views/MySubscription/ArchiveTableActions/index.tsx
+++ b/src/views/MySubscription/ArchiveTableActions/index.tsx
@@ -10,7 +10,17 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 
 import i18n from './i18n.json';
 
-function ArchiveTableActions() {
+interface Props {
+    onSubscriptionRemove?: () => void;
+    onUnArchive?: () => void;
+}
+
+function ArchiveTableActions(props: Props) {
+    const {
+        onSubscriptionRemove,
+        onUnArchive,
+    } = props;
+
     const strings = useTranslation(i18n);
 
     return (
@@ -22,6 +32,7 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="unArchive"
+                onClick={onUnArchive}
                 icons={<LayoutBottomLineIcon />}
             >
                 {strings.unarchiveSubscriptionActions}
@@ -29,7 +40,7 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="delete"
-                onClick={undefined}
+                onClick={onSubscriptionRemove}
                 icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
diff --git a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
index 495a396a..ec546bdd 100644
--- a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
+++ b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
@@ -8,7 +8,7 @@ import styles from './styles.module.css';
 
 interface Props {
     alertId: string;
-    alertTitle: string;
+    alertTitle: string | undefined;
     alertDescription?: string;
 }
 
diff --git a/src/views/MySubscription/SubscriptionDetail/i18n.json b/src/views/MySubscription/SubscriptionDetail/i18n.json
index 6d6bc4e4..c8c62571 100644
--- a/src/views/MySubscription/SubscriptionDetail/i18n.json
+++ b/src/views/MySubscription/SubscriptionDetail/i18n.json
@@ -4,6 +4,7 @@
         "subscriptionDetailTitle": "Subscription Detail",
         "subscriptionHeading": "Subscription",
         "filterStartDateFrom": "Start date from",
-        "filterStartDateTo": "Start date To"
+        "filterStartDateTo": "Start date To",
+        "filterEmptyMessage": "Alerts not available!"
     }
 }
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionDetail/index.tsx b/src/views/MySubscription/SubscriptionDetail/index.tsx
index ec7feeaf..8e80b580 100644
--- a/src/views/MySubscription/SubscriptionDetail/index.tsx
+++ b/src/views/MySubscription/SubscriptionDetail/index.tsx
@@ -1,22 +1,35 @@
-import { useCallback } from 'react';
 import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import {
+    Chip,
     Container,
     DateInput,
     List,
     Pager,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
-import Badge from '#components/Badge';
 import Page from '#components/Page';
-import { AlertFilter } from '#generated/types/graphql';
+import {
+    AlertFilter,
+    DetailsOfSubsQuery,
+    DetailsOfSubsQueryVariables,
+    UserAlertSubscriptionType,
+} from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
 import { stringIdSelector } from '#utils/selectors';
 
-import {
-    AlertInfo,
-    SubscriptionAndAlertDetail,
-} from '../common';
 import AlertInfoItem from './AlertInfoItem';
 
 import i18n from './i18n.json';
@@ -24,113 +37,222 @@ import styles from './styles.module.css';
 
 const PAGE_SIZE = 20;
 
+const SUBSCRIPTION_ALERT_LIST = gql`
+    query DetailsOfSubs(
+        $pk: ID!,
+        $pagination: OffsetPaginationInput,
+        $filters: AlertFilter,
+    ) {
+        private {
+            userAlertSubscription(pk: $pk) {
+                alerts (
+                    pagination: $pagination,
+                    filters: $filters,
+                ){
+                    items {
+                        id
+                        info {
+                            event
+                            id
+                            description
+                        }
+                    }
+                    count
+                }
+                filterAlertUrgenciesDisplay
+                id
+                name
+                filterAlertUrgencies
+                filterAlertSeveritiesDisplay
+                filterAlertSeverities
+                filterAlertCountry {
+                    id
+                    name
+                }
+                filterAlertCountryId
+                filterAlertCertaintiesDisplay
+                filterAlertCertainties
+                filterAlertCategoriesDisplay
+                filterAlertCategories
+                filterAlertAdmin1sDisplay {
+                    id
+                    name
+                }
+                filterAlertAdmin1s
+            }
+        }
+    }
+`;
+
+type AlertInfo = NonNullable<NonNullable<UserAlertSubscriptionType>['alerts']>['items'][number];
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const strings = useTranslation(i18n);
+    const { subscriptionId } = useParams();
 
-    const subscriptionAndAlertsDetail: SubscriptionAndAlertDetail = {
-        id: '1',
-        alertFilters: ['Future', 'Severe', 'Nepal', 'Bagmati'],
-        alertInfo: [
-            {
-                id: '1',
-                alertId: '101',
-                alertTitle: 'Flood Alert',
-                alertDescription: 'Severe flooding expected in the coastal region.',
-            },
-            {
-                id: '2',
-                alertId: '102',
-                alertTitle: 'Heatwave Warning',
-                alertDescription: 'Extreme heatwave affecting northern regions.',
-            },
-            {
-                id: '3',
-                alertId: '103',
-                alertTitle: 'Earthquake Advisory',
-                alertDescription: 'Possible aftershocks in the affected areas.',
-            },
-        ],
-    };
+    const strings = useTranslation(i18n);
 
     const {
-        // limit,
+        limit,
         page,
         setPage,
-        // filter,
-        // setFilter,
-        // offset,
-    } = useFilterState<AlertFilter>({
+        setFilterField,
+        offset,
+        filter,
+    } = useFilterState<{
+        startDateAfter?: string,
+        startDateBefore?: string,
+    }>({
         pageSize: PAGE_SIZE,
         filter: {},
     });
 
-    const subscriptionKeySelector = (filter: string) => filter;
+    const variables = useMemo<DetailsOfSubsQueryVariables>(() => {
+        if (!subscriptionId) {
+            return {} as DetailsOfSubsQueryVariables;
+        }
 
-    const subscriptionRendererParams = useCallback((_: string, value: string) => ({
-        title: value,
-    }), []);
+        const filters: AlertFilter = {
+            sent: {
+                range: {
+                    start: filter.startDateAfter,
+                    end: filter.startDateBefore,
+                },
+            },
+        };
+
+        const finalFilters = (isDefined(filter.startDateAfter)
+            || isDefined(filter.startDateBefore)
+        ) ? filters : {};
+
+        return {
+            pk: subscriptionId,
+            pagination: {
+                offset,
+                limit,
+            },
+            filters: finalFilters,
+        };
+    }, [
+        subscriptionId,
+        limit,
+        offset,
+        filter,
+    ]);
+
+    const {
+        previousData,
+        loading: alertLoading,
+        error: alertError,
+        data: alertSubscription = previousData,
+    } = useQuery<DetailsOfSubsQuery, DetailsOfSubsQueryVariables>(
+        SUBSCRIPTION_ALERT_LIST,
+        {
+            skip: isNotDefined(variables),
+            variables,
+        },
+    );
+
+    const alertsData = alertSubscription?.private?.userAlertSubscription;
 
     const rendererParams = useCallback((_: string, value: AlertInfo) => ({
-        alertId: value.alertId,
-        alertTitle: value.alertTitle,
-        alertDescription: value?.alertDescription,
+        alertId: value.id,
+        alertTitle: value.info?.event,
+        alertDescription: value.info?.description ?? undefined,
     }), []);
 
     return (
         <Page
             className={styles.subscriptionDetail}
             title={strings.subscriptionDetailTitle}
-            // TODO: Add subscription heading and description
-            heading={strings.subscriptionHeading}
+            heading={alertSubscription?.private?.userAlertSubscription?.name}
         >
             <Container
                 childrenContainerClassName={styles.alertFilters}
-                withGridViewInFilter
                 filters={(
                     <>
                         <DateInput
-                            name="startDateFrom"
+                            name="startDateAfter"
                             label={strings.filterStartDateFrom}
-                            value={undefined}
-                            onChange={() => { }}
+                            onChange={setFilterField}
+                            value={filter.startDateAfter}
                         />
                         <DateInput
-                            name="startDateTo"
+                            name="startDateBefore"
                             label={strings.filterStartDateTo}
-                            value={undefined}
-                            onChange={() => { }}
+                            onChange={setFilterField}
+                            value={filter.startDateBefore}
                         />
                     </>
                 )}
                 footerActions={(
                     <Pager
                         activePage={page}
-                        itemsCount={50}
+                        itemsCount={alertsData?.alerts.count ?? 0}
                         maxItemsPerPage={PAGE_SIZE}
                         onActivePageChange={setPage}
                     />
                 )}
             >
-                <List
-                    className={styles.badgeContainer}
-                    data={subscriptionAndAlertsDetail.alertFilters}
-                    keySelector={subscriptionKeySelector}
-                    renderer={Badge}
-                    rendererParams={subscriptionRendererParams}
-                    pending={false}
-                    errored={false}
-                    filtered={false}
-                />
+                <div className={styles.filters}>
+                    {isDefined(alertsData?.filterAlertCountry) && (
+                        <Chip
+                            name="country"
+                            label={alertsData.filterAlertCountry.name}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertAdmin1sDisplay)
+                        && alertsData.filterAlertAdmin1sDisplay?.map((admin) => (
+                            <Chip
+                                name="admin1"
+                                label={admin.name}
+                                variant="tertiary"
+                            />
+                        ))}
+                    {isDefined(alertsData?.filterAlertUrgenciesDisplay)
+                        && alertsData.filterAlertUrgenciesDisplay?.map((urgency) => (
+                            <Chip
+                                name="urgencies"
+                                label={urgency}
+                                variant="tertiary"
+                            />
+                        ))}
+                    {isDefined(alertsData?.filterAlertCertaintiesDisplay)
+                        && alertsData.filterAlertCertaintiesDisplay?.map((certainty) => (
+                            <Chip
+                                name="certainties"
+                                label={certainty}
+                                variant="tertiary"
+                            />
+                        ))}
+                    {isDefined(alertsData?.filterAlertCategoriesDisplay)
+                        && alertsData.filterAlertCategoriesDisplay?.map((category) => (
+                            <Chip
+                                name="categories"
+                                label={category}
+                                variant="tertiary"
+                            />
+                        ))}
+                    {isDefined(alertsData?.filterAlertSeveritiesDisplay)
+                        && alertsData.filterAlertSeveritiesDisplay?.map((severity) => (
+                            <Chip
+                                name="severity"
+                                label={severity}
+                                variant="tertiary"
+                            />
+                        ))}
+                </div>
                 <List
                     className={styles.alertItem}
-                    data={subscriptionAndAlertsDetail.alertInfo}
+                    data={alertsData?.alerts.items}
                     renderer={AlertInfoItem}
                     rendererParams={rendererParams}
                     keySelector={stringIdSelector}
-                    pending={false}
-                    errored={false}
+                    pending={alertLoading}
+                    errored={isDefined(alertError)}
                     filtered={false}
+                    emptyMessage={strings.filterEmptyMessage}
                 />
             </Container>
         </Page>
diff --git a/src/views/MySubscription/SubscriptionDetail/styles.module.css b/src/views/MySubscription/SubscriptionDetail/styles.module.css
index 0e8a8115..b24803bf 100644
--- a/src/views/MySubscription/SubscriptionDetail/styles.module.css
+++ b/src/views/MySubscription/SubscriptionDetail/styles.module.css
@@ -4,10 +4,15 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-md);
 
-        .badge-container {
+        .filters {
             display: flex;
             gap: var(--go-ui-spacing-md);
-            min-height: 0%;
+
+            .badge-container {
+                display: flex;
+                gap: var(--go-ui-spacing-md);
+                min-height: 0%;
+            }
         }
 
         .alert-item {
diff --git a/src/views/MySubscription/SubscriptionTableItem/i18n.json b/src/views/MySubscription/SubscriptionTableItem/i18n.json
index 1b8a7d4b..bd8f896c 100644
--- a/src/views/MySubscription/SubscriptionTableItem/i18n.json
+++ b/src/views/MySubscription/SubscriptionTableItem/i18n.json
@@ -1,6 +1,12 @@
 {
     "namespace": "subscriptionItem",
     "strings": {
-        "subscriptionItemView": "View"
+        "subscriptionItemView": "View",
+        "subscriptionCountry": "Country",
+        "subscriptionAdmin1": "Admin1",
+        "subscriptionUrgency": "Urgency",
+        "subscriptionCertainty": "Certainty",
+        "subscriptionSeverity": "Severity",
+        "subscriptionCategory": "Category"
     }
 }
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx
index f6dd7565..e08b2aa3 100644
--- a/src/views/MySubscription/SubscriptionTableItem/index.tsx
+++ b/src/views/MySubscription/SubscriptionTableItem/index.tsx
@@ -1,38 +1,38 @@
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    TextOutput,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import Link from '#components/Link';
-import {
-    AlertInfoCertaintyEnum,
-    AlertInfoSeverityEnum,
-    AlertInfoUrgencyEnum,
-} from '#generated/types/graphql';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 interface Props {
     id: string;
-    country: string | undefined;
-    admin1: string | undefined;
-    urgency?: AlertInfoUrgencyEnum[] | undefined;
-    certainty?: AlertInfoCertaintyEnum[] | undefined;
-    severity?: AlertInfoSeverityEnum[] | undefined;
-    title: string;
-    totalCount: number;
+    name: string;
+    alertCount: number;
+    filterAlertUrgencies: string[];
+    filterAlertCertainties: string[];
+    filterAlertSeverities: string[];
+    filterAlertCategories: string[];
+    filterAlertCountry: string;
+    filterAlertAdmin1s: string[];
     actions: React.ReactNode;
 }
 
 function SubscriptionTableItem(props: Props) {
     const {
         id,
-        country,
-        admin1,
-        urgency,
-        certainty,
-        severity,
-        title,
-        totalCount,
+        name,
+        alertCount,
+        filterAlertUrgencies,
+        filterAlertCategories,
+        filterAlertCertainties,
+        filterAlertSeverities,
+        filterAlertAdmin1s,
+        filterAlertCountry,
         actions,
     } = props;
 
@@ -42,12 +42,12 @@ function SubscriptionTableItem(props: Props) {
         <Container
             key={id}
             className={styles.subscriptionDetail}
-            heading={title}
-            headingLevel={4}
+            heading={name}
+            headingLevel={3}
             actions={(
                 <>
                     (
-                    {totalCount}
+                    {alertCount}
                     )
                     {actions}
                 </>
@@ -55,11 +55,48 @@ function SubscriptionTableItem(props: Props) {
             footerContentClassName={styles.alertDetail}
             footerContent={(
                 <>
-                    <div>{country}</div>
-                    <div>{admin1}</div>
-                    <div>{urgency}</div>
-                    <div>{certainty}</div>
-                    <div>{severity}</div>
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionCountry}
+                        value={filterAlertCountry}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionAdmin1}
+                        value={filterAlertAdmin1s.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionUrgency}
+                        value={filterAlertUrgencies.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionCertainty}
+                        value={filterAlertCertainties.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionSeverity}
+                        value={filterAlertSeverities.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label={strings.subscriptionCategory}
+                        value={filterAlertCategories.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
                 </>
             )}
             footerActions={(
diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
index 69194df0..696bca66 100644
--- a/src/views/MySubscription/SubscriptionTableItem/styles.module.css
+++ b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
@@ -5,6 +5,11 @@
     .alertDetail {
         display: flex;
         flex-wrap: wrap;
-        gap: var(--go-ui-spacing-sm);
+        gap: var(--go-ui-spacing-xl);
     }
-}
+
+    .label {
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/common.tsx b/src/views/MySubscription/common.tsx
deleted file mode 100644
index 72e1e6fd..00000000
--- a/src/views/MySubscription/common.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-    AlertInfoCertaintyEnum,
-    AlertInfoSeverityEnum,
-    AlertInfoUrgencyEnum,
-} from '#generated/types/graphql';
-
-export interface FrequencyOption {
-    label: string;
-    key: 'daily' | 'weekly';
-}
-
-export interface AlertFilters {
-    id: string;
-    filters: string[];
-}
-
-export interface AlertInfo {
-    id: string;
-    alertId: string;
-    alertTitle: string;
-    alertDescription?: string;
-}
-
-export interface SubscriptionAndAlertDetail {
-    id: string;
-    alertFilters: string[];
-    alertInfo?: AlertInfo[] | undefined;
-}
-
-// TODO: Add subscription interface from  generated
-export interface SubscriptionDetail {
-    id: string;
-    title: string;
-    country: string | undefined;
-    admin1: string | undefined;
-    urgency?: AlertInfoUrgencyEnum[] | undefined;
-    certainty?: AlertInfoCertaintyEnum[] | undefined;
-    severity?: AlertInfoSeverityEnum[] | undefined;
-    totalCount?: number;
-    sendEmail?: boolean;
-    frequency?: 'daily' | 'weekly' | undefined;
-}
diff --git a/src/views/MySubscription/i18n.json b/src/views/MySubscription/i18n.json
index ea33e4a0..52fb5282 100644
--- a/src/views/MySubscription/i18n.json
+++ b/src/views/MySubscription/i18n.json
@@ -7,6 +7,12 @@
         "sendViaEmailLabel": "Send via email",
         "activeSubscriptionsTab": "Active Subscriptions",
         "archivedSubscriptionTab": "Archive Subscriptions",
-        "subscriptionDescription": "Customize your alerts with tailored filters, manage your subscriptions, and stay informed with relevant alerts delivered directly to your inbox."
+        "subscriptionUnarchived": "Subscription unarchived.",
+        "subscriptionArchived": "Subscription archived.",
+        "subscriptionFailedToUpdate": "Failed to update subscription.",
+        "subscriptionDescription": "Customize your alerts with tailored filters, manage your subscriptions, and stay informed with relevant alerts delivered directly to your inbox.",
+        "subscriptionDeleted": "Subscription deleted.",
+        "subscriptionFailedToDelete": "Failed to delete subscription"
+        
     }
 }
diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx
index 07c0376f..8a0979fd 100644
--- a/src/views/MySubscription/index.tsx
+++ b/src/views/MySubscription/index.tsx
@@ -1,12 +1,19 @@
 import {
     useCallback,
+    useMemo,
     useState,
 } from 'react';
+import {
+    gql,
+    useMutation,
+    useQuery,
+} from '@apollo/client';
 import { AddLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
     List,
+    Pager,
     Tab,
     TabList,
     TabPanel,
@@ -16,78 +23,379 @@ import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import Page from '#components/Page';
+import {
+    AlertFilter,
+    AlertSubscriptionsQuery,
+    AlertSubscriptionsQueryVariables,
+    ArchiveUnArchiveSubscriptionMutation,
+    ArchiveUnArchiveSubscriptionMutationVariables,
+    DeleteSubscriptionMutation,
+    DeleteSubscriptionMutationVariables,
+    OffsetPaginationInput,
+    UserAlertSubscriptionFilter,
+    UserAlertSubscriptionType,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import useFilterState from '#hooks/useFilterState';
 
 import NewSubscriptionModal from '../NewSubscriptionModal';
 import ActiveTableActions from './ActiveTableActions';
 import ArchiveTableActions from './ArchiveTableActions';
-import { SubscriptionDetail } from './common';
 import SubscriptionTableItem from './SubscriptionTableItem';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-const subscriptionKeySelector = (subscription: SubscriptionDetail) => subscription.id;
+const ALERT_SUBSCRIPTIONS = gql`
+    query AlertSubscriptions(
+        $pagination: OffsetPaginationInput,
+        $filters: UserAlertSubscriptionFilter,
+    ) {
+        private {
+            id
+            userAlertSubscriptions(pagination: $pagination, filters: $filters) {
+                count
+                limit
+                offset
+                items {
+                    id
+                    name
+                    isActive
+                    notifyByEmail
+                    alerts {
+                        count
+                    }
+                    emailFrequency
+                    emailFrequencyDisplay
+                    filterAlertAdmin1s
+                    filterAlertAdmin1sDisplay {
+                        id
+                        name
+                    }
+                    filterAlertCategoriesDisplay
+                    filterAlertCategories
+                    filterAlertCertaintiesDisplay
+                    filterAlertCertainties
+                    filterAlertCountryId
+                    filterAlertCountry {
+                        id
+                        name
+                    }
+                    filterAlertSeveritiesDisplay
+                    filterAlertUrgenciesDisplay
+                    filterAlertUrgencies
+                    filterAlertSeverities
+                }
+            }
+        }
+    }
+`;
+
+const DELETE_SUBSCRIPTION = gql`
+    mutation DeleteSubscription(
+        $subscriptionId: ID!,
+    ) {
+        private {
+            deleteUserAlertSubscription(id: $subscriptionId) {
+                ok
+                errors
+            }
+            id
+        }
+    }
+`;
+
+const UPDATE_SUBSCRIPTION = gql`
+    mutation ArchiveUnArchiveSubscription(
+        $subscriptionId: ID!,
+        $data: UserAlertSubscriptionInput!,
+    ) {
+        private {
+            updateUserAlertSubscription(
+                id: $subscriptionId,
+                data: $data,
+            ) {
+                errors
+                ok
+                result {
+                    id
+                    name
+                    isActive
+                }
+            }
+        }
+    }
+`;
+
+const PAGE_SIZE = 10;
+
+const subscriptionKeySelector = (subscription: UserAlertSubscriptionType) => subscription.id;
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
 
-    const data: SubscriptionDetail[] = [
-        {
-            id: '1',
-            country: 'USA',
-            admin1: 'LA',
-            title: 'Earthquake Alert',
-            totalCount: 20,
-            urgency: [],
-            certainty: [],
-            severity: [],
-        },
-        {
-            id: '2',
-            country: 'Canada',
-            admin1: 'Toronto',
-            title: 'Flood Alert',
-            totalCount: 30,
-            urgency: [],
-            certainty: [],
-            severity: [],
-        },
-    ];
+    const alert = useAlert();
 
     type TabKey = 'active' | 'archive';
     const [activeTab, setActiveTab] = useState<TabKey>('active');
 
+    const [
+        selectedSubscription,
+        setSelectedSubscription,
+    ] = useState<string | undefined>();
+
     const [showSubscriptionModal, {
         setTrue: setShowSubscriptionModalTrue,
         setFalse: setShowSubscriptionModalFalse,
     }] = useBooleanState(false);
 
-    const activeRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+    const {
+        page,
+        setPage,
+        limit,
+        offset,
+    } = useFilterState<AlertFilter>({
+        pageSize: PAGE_SIZE,
+        filter: {},
+    });
+
+    const variables = useMemo<{
+        pagination: OffsetPaginationInput,
+        filters: UserAlertSubscriptionFilter,
+    }>(() => ({
+        pagination: {
+            offset,
+            limit,
+        },
+        filters: {
+            isActive: {
+                exact: activeTab === 'active',
+            },
+        },
+    }), [
+        activeTab,
+        limit,
+        offset,
+    ]);
+
+    const {
+        previousData,
+        data: alertSubscriptions = previousData,
+        loading: alertSubscriptionLoading,
+        error: alertSubscriptionError,
+        refetch,
+    } = useQuery<AlertSubscriptionsQuery, AlertSubscriptionsQueryVariables>(
+        ALERT_SUBSCRIPTIONS,
+        {
+            variables,
+        },
+    );
+
+    const data = alertSubscriptions?.private.userAlertSubscriptions;
+
+    const [
+        triggerSubscriptionUpdate,
+    ] = useMutation<
+        ArchiveUnArchiveSubscriptionMutation,
+        ArchiveUnArchiveSubscriptionMutationVariables
+    >(
+        UPDATE_SUBSCRIPTION,
+        {
+            onCompleted: (projectResponse) => {
+                const response = projectResponse?.private?.updateUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    if (response.result?.isActive) {
+                        alert.show(
+                            strings.subscriptionUnarchived,
+                            { variant: 'success' },
+                        );
+                    } else {
+                        alert.show(
+                            strings.subscriptionArchived,
+                            { variant: 'success' },
+                        );
+                        refetch();
+                    }
+                } else {
+                    alert.show(
+                        strings.subscriptionFailedToUpdate,
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    strings.subscriptionFailedToUpdate,
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
+    const handleEditSubscription = useCallback((key: string) => {
+        setSelectedSubscription(key);
+        setShowSubscriptionModalTrue();
+    }, [
+        setShowSubscriptionModalTrue,
+    ]);
+
+    const [subscriptions, setSubscriptions] = useState(data?.items || []);
+
+    const [
+        triggerSubscriptionDelete,
+    ] = useMutation<DeleteSubscriptionMutation, DeleteSubscriptionMutationVariables>(
+        DELETE_SUBSCRIPTION,
+        {
+            onCompleted: (deleteResponse) => {
+                const response = deleteResponse?.private?.deleteUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    alert.show(
+                        strings.subscriptionDeleted,
+                        { variant: 'success' },
+                    );
+                } else {
+                    alert.show(
+                        strings.subscriptionFailedToDelete,
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    strings.subscriptionFailedToDelete,
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
+    const handleDeleteSubscription = useCallback((id: string) => {
+        if (isNotDefined(id)) {
+            return;
+        }
+        triggerSubscriptionDelete({
+            variables: {
+                subscriptionId: id,
+            },
+        });
+        refetch();
+    }, [
+        triggerSubscriptionDelete,
+        refetch,
+    ]);
+
+    const handleTab = useCallback((newTab: TabKey) => {
+        setActiveTab(newTab);
+        setPage(1);
+    }, [
+        setPage,
+    ]);
+
+    const handleArchiveUnarchive = useCallback((id: string, archive: boolean) => {
+        if (isNotDefined(id)) {
+            return;
+        }
+        const selectedSubscriptionDetails = data?.items.find(
+            (sub) => sub.id === id,
+        );
+
+        triggerSubscriptionUpdate({
+            variables: {
+                subscriptionId: id,
+                data: {
+                    isActive: archive,
+                    filterAlertAdmin1s: selectedSubscriptionDetails?.filterAlertAdmin1s ?? [],
+                    filterAlertCountry: selectedSubscriptionDetails?.filterAlertCountryId ?? '',
+                    name: selectedSubscriptionDetails?.name ?? '',
+                },
+            },
+        });
+
+        const updatedSubscriptions = subscriptions.filter((sub) => sub.id !== id);
+        setSubscriptions(updatedSubscriptions);
+        refetch();
+    }, [
+        data?.items,
+        subscriptions,
+        triggerSubscriptionUpdate,
+        refetch,
+    ]);
+
+    const activeRendererParams = useCallback((
+        key: string,
+        value: UserAlertSubscriptionType,
+    ) => ({
         id: value.id,
-        title: value.title,
-        totalCount: value.totalCount ?? 0,
-        country: value?.country,
-        admin1: value?.admin1,
-        urgency: value?.urgency,
-        certainty: value?.certainty,
-        severity: value?.severity,
-        actions: <ActiveTableActions />,
-    }), []);
-
-    const archiveRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+        name: value.name,
+        alertCount: value.alerts.count ?? 0,
+        filterAlertUrgencies: value?.filterAlertUrgenciesDisplay,
+        filterAlertCertainties: value?.filterAlertCertaintiesDisplay,
+        filterAlertSeverities: value?.filterAlertSeveritiesDisplay,
+        filterAlertCategories: value?.filterAlertCategoriesDisplay,
+        filterAlertCountry: value?.filterAlertCountry.name,
+        filterAlertAdmin1s: value?.filterAlertAdmin1sDisplay?.map(
+            (admin) => admin.name,
+        ),
+        isActive: value?.isActive,
+        actions: <ActiveTableActions
+            onArchiveClick={() => handleArchiveUnarchive(value.id, false)}
+            onEditClick={() => handleEditSubscription(key)}
+            onSubscriptionRemove={() => handleDeleteSubscription(value.id)}
+        />,
+    }), [
+        handleDeleteSubscription,
+        handleEditSubscription,
+        handleArchiveUnarchive,
+    ]);
+
+    const archiveRendererParams = useCallback((_: string, value: UserAlertSubscriptionType) => ({
         id: value.id,
-        title: value.title,
-        totalCount: value.totalCount ?? 0,
-        country: value?.country,
-        admin1: value?.admin1,
-        urgency: value?.urgency,
-        certainty: value?.certainty,
-        severity: value?.severity,
-        actions: <ArchiveTableActions />,
-    }), []);
+        name: value.name,
+        alertCount: value.alerts.count ?? 0,
+        filterAlertUrgencies: value?.filterAlertUrgenciesDisplay,
+        filterAlertCertainties: value?.filterAlertCertaintiesDisplay,
+        filterAlertSeverities: value?.filterAlertSeveritiesDisplay,
+        filterAlertCategories: value?.filterAlertCategoriesDisplay,
+        filterAlertCountry: value?.filterAlertCountry.name,
+        filterAlertAdmin1s: value?.filterAlertAdmin1sDisplay?.map(
+            (admin) => admin.name,
+        ),
+        isActive: value?.isActive,
+        actions: <ArchiveTableActions
+            onUnArchive={() => handleArchiveUnarchive(value.id, true)}
+            onSubscriptionRemove={() => handleDeleteSubscription(value.id)}
+        />,
+    }), [
+        handleDeleteSubscription,
+        handleArchiveUnarchive,
+    ]);
+
+    const selectedSubscriptionDetails = useMemo(() => {
+        const item = data?.items.find((sub) => sub.id === selectedSubscription);
+        if (!item) {
+            return undefined;
+        }
+        return ({
+            ...item,
+            filterAlertCountry: item.filterAlertCountryId,
+        });
+    }, [
+        data,
+        selectedSubscription,
+    ]);
 
     return (
         <Page
@@ -114,15 +422,24 @@ export function Component() {
                         {strings.myNewSubscription}
                     </Button>
                 )}
+                footerActions={isDefined(data) && (
+                    <Pager
+                        activePage={page}
+                        itemsCount={data?.count ?? 0}
+                        maxItemsPerPage={limit}
+                        onActivePageChange={setPage}
+                    />
+                )}
             >
                 {showSubscriptionModal && (
                     <NewSubscriptionModal
+                        subscription={selectedSubscriptionDetails}
                         onCloseModal={setShowSubscriptionModalFalse}
                     />
                 )}
                 <Tabs
                     value={activeTab}
-                    onChange={setActiveTab}
+                    onChange={handleTab}
                     variant="primary"
                 >
                     <TabList>
@@ -139,13 +456,13 @@ export function Component() {
                     >
                         <List
                             className={styles.subscription}
-                            data={data}
+                            data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={activeRendererParams}
                             keySelector={subscriptionKeySelector}
                             filtered={false}
-                            pending={false}
-                            errored={false}
+                            pending={alertSubscriptionLoading}
+                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                     <TabPanel
@@ -154,13 +471,13 @@ export function Component() {
                     >
                         <List
                             className={styles.subscription}
-                            data={data}
+                            data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={archiveRendererParams}
                             keySelector={subscriptionKeySelector}
                             filtered={false}
-                            pending={false}
-                            errored={false}
+                            pending={alertSubscriptionLoading}
+                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                 </Tabs>
diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json
index baf9706a..69bbd6e9 100644
--- a/src/views/NewSubscriptionModal/i18n.json
+++ b/src/views/NewSubscriptionModal/i18n.json
@@ -20,6 +20,8 @@
         "newSubscriptionHeading": "New Subscription",
         "newSubscriptionTitle": "Title",
         "newSubscriptionCreatedSucessfully": "Subscription created successfully.",
-        "newSubscriptionFailed": "Failed to create subscription"
+        "newSubscriptionFailed": "Failed to create subscription",
+        "subscriptionUpdatedSuccessfully": "Subscription updated successfully.",
+        "failedToUpdateSubscription": "Failed to update subscription."
     }
 }
\ No newline at end of file
diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
index 1e538b4e..0aeed712 100644
--- a/src/views/NewSubscriptionModal/index.tsx
+++ b/src/views/NewSubscriptionModal/index.tsx
@@ -27,7 +27,6 @@ import {
     requiredCondition,
     requiredStringCondition,
     useForm,
-    useFormObject,
 } from '@togglecorp/toggle-form';
 
 import {
@@ -39,6 +38,8 @@ import {
     CreateUserAlertSubscriptionMutationVariables,
     FilteredAdminListQuery,
     FilteredAdminListQueryVariables,
+    UpdateSubscriptionMutation,
+    UpdateSubscriptionMutationVariables,
     UserAlertSubscriptionInput,
 } from '#generated/types/graphql';
 import useAlert from '#hooks/useAlert';
@@ -85,7 +86,7 @@ query AlertEnumsAndAllCountries {
 `;
 
 const ADMIN_LIST = gql`
-query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
+query FilteredAdminList($filters: Admin1Filter, $pagination: OffsetPaginationInput) {
     public {
         id
         admin1s(filters: $filters, pagination: $pagination) {
@@ -103,25 +104,88 @@ query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInpu
 const CREATE_USER_ALERT_SUBSCRIPTION = gql`
 mutation CreateUserAlertSubscription(
     $data: UserAlertSubscriptionInput!,
+    $filter: AlertFilter,
 ) {
     private {
-        id
-        createUserAlertSubcription(data: $data){
-            errors
+        createUserAlertSubscription(
+            data: $data,
+        ) {
             ok
             result {
                 id
                 name
-                alertFilters
-                emailFrequency
                 notifyByEmail
-                emailFrequencyDisplay
+                isActive
+                filterAlertUrgencies
+                filterAlertSeverities
+                filterAlertCountryId
+                filterAlertCountry {
+                    id
+                    name
+                }
+                filterAlertCertainties
+                filterAlertCategories
+                filterAlertAdmin1sDisplay {
+                    id
+                    name
+                    countryId
+                }
+                filterAlertAdmin1s
+                emailLastSentAt
+                emailFrequency
+                alerts (filters: $filter) {
+                    count
+                }
             }
         }
+        id
     }
 }
 `;
 
+const UPDATE_SUBSCRIPTION = gql`
+    mutation UpdateSubscription (
+        $subscriptionId: ID!,
+        $data: UserAlertSubscriptionInput!,
+    ) {
+        private {
+            updateUserAlertSubscription(
+                id: $subscriptionId,
+                data: $data,
+            ) {
+                errors
+                ok
+                result {
+                    id
+                    name
+                    notifyByEmail
+                    isActive
+                    filterAlertUrgencies
+                    filterAlertSeverities
+                    filterAlertCountryId
+                    filterAlertCountry {
+                        id
+                        name
+                    }
+                    filterAlertCertainties
+                    filterAlertCategories
+                    filterAlertAdmin1sDisplay {
+                        id
+                        name
+                        countryId
+                    }
+                    filterAlertAdmin1s
+                    emailLastSentAt
+                    emailFrequency
+                    alerts {
+                        count
+                    }
+                }
+            }
+        }
+    }
+`;
+
 type AdminOption = NonNullable<NonNullable<NonNullable<FilteredAdminListQuery['public']>['admin1s']>['items']>[number];
 
 type Urgency = NonNullable<AlertEnumsQuery['enums']['AlertInfoUrgency']>[number];
@@ -149,9 +213,6 @@ const categoryLabelSelector = (category: Category) => category.label;
 
 type PartialFormFields = PartialForm<UserAlertSubscriptionInput>;
 
-type AlertFilterType = ObjectSchema<PartialFormFields['alertFilters']>;
-type AlertFilterTypeFields = ReturnType<AlertFilterType['fields']>
-
 type FormSchema = ObjectSchema<PartialFormFields>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>
 
@@ -161,27 +222,23 @@ const formSchema: FormSchema = {
             required: true,
             requiredValidation: requiredStringCondition,
         },
-        alertFilters: {
-            fields: (): AlertFilterTypeFields => ({
-                admin1s: {
-                    required: true,
-                },
-                urgency: {
-                    required: true,
-                },
-                certainty: {
-                    required: true,
-                },
-                category: {
-                    required: true,
-                },
-                severity: {
-                    required: true,
-                },
-                country: {
-                    required: true,
-                },
-            }),
+        filterAlertUrgencies: {
+            defaultValue: [],
+        },
+        filterAlertCertainties: {
+            defaultValue: [],
+        },
+        filterAlertSeverities: {
+            defaultValue: [],
+        },
+        filterAlertCategories: {
+            defaultValue: [],
+        },
+        filterAlertCountry: {
+            required: true,
+        },
+        filterAlertAdmin1s: {
+            required: true,
         },
         notifyByEmail: {
             required: true,
@@ -191,11 +248,12 @@ const formSchema: FormSchema = {
             required: true,
             requiredValidation: requiredCondition,
         },
+        isActive: {},
     }),
 };
 
 interface Props {
-    subscription?: UserAlertSubscriptionInput;
+    subscription?: { id?: string } & Partial<UserAlertSubscriptionInput>;
     onCloseModal: () => void;
 }
 
@@ -208,20 +266,22 @@ function NewSubscriptionModal(props: Props) {
     const strings = useTranslation(i18n);
 
     const defaultFormValue = useMemo(() => ({
+        id: subscription?.id,
         name: subscription?.name,
+        filterAlertUrgencies: subscription?.filterAlertUrgencies
+            ?? [],
+        filterAlertCertainties: subscription?.filterAlertCertainties
+            ?? [],
+        filterAlertSeverities: subscription?.filterAlertSeverities
+            ?? [],
+        filterAlertCategories: subscription?.filterAlertCategories
+            ?? [],
+        filterAlertCountry: subscription?.filterAlertCountry,
+        filterAlertAdmin1s: subscription?.filterAlertAdmin1s
+            ?? [],
         notifyByEmail: subscription?.notifyByEmail,
-        emailFrequency: subscription?.emailFrequency,
-        alertFilters: {
-            urgency: subscription?.alertFilters?.urgency,
-            severity: subscription?.alertFilters?.severity,
-            certainty: subscription?.alertFilters?.certainty,
-            category: subscription?.alertFilters?.category,
-            country: subscription?.alertFilters?.country,
-            admin1s: subscription?.alertFilters?.admin1s,
-        },
-    }), [
-        subscription,
-    ]);
+        emailFrequency: subscription?.emailFrequency ?? undefined,
+    }), [subscription]);
 
     const {
         value,
@@ -233,16 +293,8 @@ function NewSubscriptionModal(props: Props) {
 
     const fieldError = getErrorObject(formError);
 
-    const filterError = getErrorObject(fieldError?.alertFilters);
-
     const alert = useAlert();
 
-    const setAlertFilterValue = useFormObject<'alertFilters', NonNullable<PartialFormFields['alertFilters']>>(
-        'alertFilters' as const,
-        setFieldValue,
-        {},
-    );
-
     const [
         createAlertSubscription,
         { loading: loadingSubscription },
@@ -253,7 +305,7 @@ function NewSubscriptionModal(props: Props) {
         CREATE_USER_ALERT_SUBSCRIPTION,
         {
             onCompleted: (res) => {
-                const response = res.private.createUserAlertSubcription;
+                const response = res.private.createUserAlertSubscription;
                 if (!response) {
                     return;
                 }
@@ -279,6 +331,38 @@ function NewSubscriptionModal(props: Props) {
         },
     );
 
+    const [
+        triggerSubscriptionUpdate,
+    ] = useMutation<UpdateSubscriptionMutation, UpdateSubscriptionMutationVariables>(
+        UPDATE_SUBSCRIPTION,
+        {
+            onCompleted: (projectResponse) => {
+                const response = projectResponse?.private?.updateUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    alert.show(
+                        strings.subscriptionUpdatedSuccessfully,
+                        { variant: 'success' },
+                    );
+                    onCloseModal();
+                } else {
+                    alert.show(
+                        strings.failedToUpdateSubscription,
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    strings.failedToUpdateSubscription,
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
     const {
         data: alertEnumsResponse,
     } = useQuery<AlertEnumsAndAllCountriesQuery, AlertEnumsAndAllCountriesQueryVariables>(
@@ -287,7 +371,7 @@ function NewSubscriptionModal(props: Props) {
 
     const adminQueryVariables = useMemo<FilteredAdminListQueryVariables>(
         () => {
-            if (isNotDefined(value.alertFilters?.country)) {
+            if (isNotDefined(value.filterAlertCountry)) {
                 return {
                     filters: undefined,
                     // FIXME: Implement search select input
@@ -300,7 +384,7 @@ function NewSubscriptionModal(props: Props) {
 
             return {
                 filters: {
-                    country: { pk: value.alertFilters.country },
+                    country: { pk: value.filterAlertCountry },
                 },
                 // FIXME: Implement search select input
                 pagination: {
@@ -309,14 +393,14 @@ function NewSubscriptionModal(props: Props) {
                 },
             };
         },
-        [value.alertFilters?.country],
+        [value.filterAlertCountry],
     );
 
     const {
         data: adminResponse,
     } = useQuery<FilteredAdminListQuery, FilteredAdminListQueryVariables>(
         ADMIN_LIST,
-        { variables: adminQueryVariables, skip: isNotDefined(value.alertFilters?.country) },
+        { variables: adminQueryVariables, skip: isNotDefined(value.filterAlertCountry) },
     );
 
     const subscriptionCreate = useCallback(() => {
@@ -324,16 +408,27 @@ function NewSubscriptionModal(props: Props) {
             validate,
             setError,
             (val) => {
-                createAlertSubscription({
-                    variables: {
-                        data: val as UserAlertSubscriptionInput,
-                    },
-                });
+                if (subscription?.id) {
+                    triggerSubscriptionUpdate({
+                        variables: {
+                            subscriptionId: subscription.id,
+                            data: val as UserAlertSubscriptionInput,
+                        },
+                    });
+                } else {
+                    createAlertSubscription({
+                        variables: {
+                            data: val as UserAlertSubscriptionInput,
+                        },
+                    });
+                }
             },
         );
         handler();
     }, [
         setError,
+        subscription?.id,
+        triggerSubscriptionUpdate,
         createAlertSubscription,
         validate,
     ]);
@@ -370,74 +465,70 @@ function NewSubscriptionModal(props: Props) {
                 <MultiSelectInput
                     label={strings.filterUrgencyLabel}
                     placeholder={strings.filterUrgencyPlaceholder}
-                    name="urgency"
+                    name="filterAlertUrgencies"
                     options={alertEnumsResponse?.enums.AlertInfoUrgency}
                     keySelector={urgencyKeySelector}
                     labelSelector={urgencyLabelSelector}
-                    value={value.alertFilters?.urgency}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.urgency}
-                    withAsterisk
+                    value={value.filterAlertUrgencies}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertUrgencies}
                 />
                 <MultiSelectInput
                     label={strings.filterSeverityLabel}
                     placeholder={strings.filterSeverityPlaceholder}
-                    name="severity"
+                    name="filterAlertSeverities"
                     options={alertEnumsResponse?.enums.AlertInfoSeverity}
                     keySelector={severityKeySelector}
                     labelSelector={severityLabelSelector}
-                    value={value.alertFilters?.severity}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.severity}
-                    withAsterisk
+                    value={value.filterAlertSeverities}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertSeverities}
                 />
                 <MultiSelectInput
                     label={strings.filterCertaintyLabel}
                     placeholder={strings.filterCertaintyPlaceholder}
-                    name="certainty"
+                    name="filterAlertCertainties"
                     options={alertEnumsResponse?.enums.AlertInfoCertainty}
                     keySelector={certaintyKeySelector}
                     labelSelector={certaintyLabelSelector}
-                    value={value.alertFilters?.certainty}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.certainty}
-                    withAsterisk
+                    value={value.filterAlertCertainties}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCertainties}
                 />
                 <MultiSelectInput
                     label={strings.filterCategoryLabel}
                     placeholder={strings.filterCategoryPlaceholder}
-                    name="category"
+                    name="filterAlertCategories"
                     options={alertEnumsResponse?.enums.AlertInfoCategory}
                     keySelector={categoryKeySelector}
                     labelSelector={categoryLabelSelector}
-                    value={value.alertFilters?.category}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.category}
-                    withAsterisk
+                    value={value.filterAlertCategories}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCategories}
                 />
                 <SelectInput
                     label={strings.filterCountriesLabel}
                     placeholder={strings.filterCountriesPlaceholder}
-                    name="country"
+                    name="filterAlertCountry"
                     options={alertEnumsResponse?.public.allCountries}
                     keySelector={stringIdSelector}
                     labelSelector={stringNameSelector}
-                    value={value.alertFilters?.country}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.country}
+                    value={value.filterAlertCountry}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCountry}
                     withAsterisk
                 />
                 <MultiSelectInput
                     label={strings.filterAdmin1Label}
                     placeholder={strings.filterAdmin1Placeholder}
-                    name="admin1s"
-                    disabled={isNotDefined(value.alertFilters?.country)}
+                    name="filterAlertAdmin1s"
+                    disabled={isNotDefined(value.filterAlertCountry)}
                     options={adminResponse?.public.admin1s.items}
                     keySelector={adminKeySelector}
                     labelSelector={stringNameSelector}
-                    value={value.alertFilters?.admin1s}
-                    onChange={setAlertFilterValue}
-                    error={getErrorString(filterError?.admin1s)}
+                    value={value.filterAlertAdmin1s}
+                    onChange={setFieldValue}
+                    error={getErrorString(fieldError?.filterAlertAdmin1s)}
                     withAsterisk
                 />
             </div>
diff --git a/yarn.lock b/yarn.lock
index 44d5ccf0..943b34a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1699,12 +1699,18 @@
   resolved "https://registry.yarnpkg.com/@ifrc-go/icons/-/icons-1.3.3.tgz#6a4aaf8a06ba237d2de269e84a1561f0a395deb1"
   integrity sha512-43sLUn0jH3v+gkJC0bT6oYWlsPg9isAT/x/qYhmZHb53iQOlWjUC9fNNSQq3nzklH7+mvHhXFXBbotSeFEtLhw==
 
-"@ifrc-go/ui@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@ifrc-go/ui/-/ui-1.1.2.tgz#ece85236abb661ad5cb4cd5e99ec63525feda9c8"
-  integrity sha512-BiKNoe72xrNkDSqf14dsu3w8f4h20Q2C91VWAX1ZWV64pGf6exZwxMGPQm6RPL299R6m47eTwHQndyQZJCjXoQ==
+"@ifrc-go/icons@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@ifrc-go/icons/-/icons-2.0.1.tgz#7b8fe49ceed3e51de182bd97bcdbc6c9e9914351"
+  integrity sha512-j0KXz5UgUgVBfSljx6XATBWchj1tDckaGX+uI86QTO63teP5zCd6osR9q/e6H3jv8bzil1sdUmVt4VOwSX6xhw==
+
+"@ifrc-go/ui@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@ifrc-go/ui/-/ui-1.2.1.tgz#12f611a2200cbf00f3e82c0a10cf5aa79d75dd28"
+  integrity sha512-ZdWffxnowjtY8wgIuheS4mf3P1JnoKKaEC8yrf0JHceb3fCenMXJqMBQEdRMaJNBtd4MhQhuls53uErzX/l2gA==
   dependencies:
     "@changesets/cli" "^2.27.1"
+    "@ifrc-go/icons" "^2.0.1"
     "@togglecorp/fujs" "^2.1.1"
     react-focus-on "^3.9.1"
     sanitize-html "^2.11.0"