diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
index e194c249..f0f856f2 100644
--- a/src/App/routes/index.tsx
+++ b/src/App/routes/index.tsx
@@ -54,8 +54,20 @@ const mySubscription = customWrapRoute({
     wrapperComponent: Auth,
     context: {
         title: 'My Subscriptions',
-        // TODO: Change visibility after login feature
-        visibility: 'anything',
+        visibility: 'is-authenticated',
+    },
+});
+
+const subscriptionDetail = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscriptions/:subscriptionId',
+    component: {
+        render: () => import('#views/MySubscription/SubscriptionDetail'),
+        props: {},
+    },
+    context: {
+        title: 'Subscription Detail',
+        visibility: 'is-authenticated',
     },
 });
 
@@ -277,6 +289,7 @@ const wrappedRoutes = {
     mySubscription,
     cookiePolicy,
     historicalAlerts,
+    subscriptionDetail,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
new file mode 100644
index 00000000..52ec6a8b
--- /dev/null
+++ b/src/components/Badge/index.tsx
@@ -0,0 +1,21 @@
+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
new file mode 100644
index 00000000..43bfb743
--- /dev/null
+++ b/src/components/Badge/styles.module.css
@@ -0,0 +1,6 @@
+.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/MySubscription/ActiveTableActions/index.tsx b/src/views/MySubscription/ActiveTableActions/index.tsx
index 8073ab6a..48feb20a 100644
--- a/src/views/MySubscription/ActiveTableActions/index.tsx
+++ b/src/views/MySubscription/ActiveTableActions/index.tsx
@@ -1,4 +1,9 @@
-import { MoreOptionsIcon } from '@ifrc-go/icons';
+import {
+    DeleteBinSixLineIcon,
+    EditTwoLineIcon,
+    LayoutBottomLineIcon,
+    MoreOptionsIcon,
+} from '@ifrc-go/icons';
 import { DropdownMenu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -19,12 +24,14 @@ function ActiveTableActions() {
                 type="button"
                 name="archive"
                 onClick={undefined}
+                icons={<LayoutBottomLineIcon />}
             >
                 {strings.archiveSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
                 type="button"
                 name="edit"
+                icons={<EditTwoLineIcon />}
             >
                 {strings.editSubscriptionActions}
             </DropdownMenuItem>
@@ -32,6 +39,7 @@ function ActiveTableActions() {
                 type="button"
                 name="delete"
                 onClick={undefined}
+                icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>
diff --git a/src/views/MySubscription/ArchiveTableActions/index.tsx b/src/views/MySubscription/ArchiveTableActions/index.tsx
index aec03ac0..667f7dd2 100644
--- a/src/views/MySubscription/ArchiveTableActions/index.tsx
+++ b/src/views/MySubscription/ArchiveTableActions/index.tsx
@@ -1,4 +1,8 @@
-import { MoreOptionsIcon } from '@ifrc-go/icons';
+import {
+    DeleteBinSixLineIcon,
+    LayoutBottomLineIcon,
+    MoreOptionsIcon,
+} from '@ifrc-go/icons';
 import { DropdownMenu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -18,6 +22,7 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="unArchive"
+                icons={<LayoutBottomLineIcon />}
             >
                 {strings.unarchiveSubscriptionActions}
             </DropdownMenuItem>
@@ -25,6 +30,7 @@ function ArchiveTableActions() {
                 type="button"
                 name="delete"
                 onClick={undefined}
+                icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>
diff --git a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/i18n.json b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/i18n.json
new file mode 100644
index 00000000..cb92f611
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "alertInfo",
+    "strings": {
+        "alertInfoView": "View"
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
new file mode 100644
index 00000000..495a396a
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
@@ -0,0 +1,43 @@
+import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props {
+    alertId: string;
+    alertTitle: string;
+    alertDescription?: string;
+}
+
+function AlertInfoItem(props: Props) {
+    const strings = useTranslation(i18n);
+
+    const {
+        alertId,
+        alertTitle,
+        alertDescription,
+    } = props;
+
+    return (
+        <Container
+            className={styles.alertDetail}
+            heading={alertTitle}
+            headingLevel={4}
+            actions={(
+                <Link
+                    to="alertDetails"
+                    urlParams={{ alertId }}
+                    variant="secondary"
+                >
+                    {strings.alertInfoView}
+                </Link>
+            )}
+            footerContent={alertDescription}
+        />
+    );
+}
+
+export default AlertInfoItem;
diff --git a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/styles.module.css b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/styles.module.css
new file mode 100644
index 00000000..d335e76b
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/styles.module.css
@@ -0,0 +1,4 @@
+.alert-detail {
+    background-color: var(--go-ui-color-gray-20);
+    padding: var(--go-ui-spacing-md);
+}
diff --git a/src/views/MySubscription/SubscriptionDetail/i18n.json b/src/views/MySubscription/SubscriptionDetail/i18n.json
new file mode 100644
index 00000000..6d6bc4e4
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/i18n.json
@@ -0,0 +1,9 @@
+{
+    "namespace": "subscriptionDetail",
+    "strings": {
+        "subscriptionDetailTitle": "Subscription Detail",
+        "subscriptionHeading": "Subscription",
+        "filterStartDateFrom": "Start date from",
+        "filterStartDateTo": "Start date To"
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionDetail/index.tsx b/src/views/MySubscription/SubscriptionDetail/index.tsx
new file mode 100644
index 00000000..ec7feeaf
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/index.tsx
@@ -0,0 +1,140 @@
+import { useCallback } from 'react';
+import {
+    Container,
+    DateInput,
+    List,
+    Pager,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Badge from '#components/Badge';
+import Page from '#components/Page';
+import { AlertFilter } 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';
+import styles from './styles.module.css';
+
+const PAGE_SIZE = 20;
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    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 {
+        // limit,
+        page,
+        setPage,
+        // filter,
+        // setFilter,
+        // offset,
+    } = useFilterState<AlertFilter>({
+        pageSize: PAGE_SIZE,
+        filter: {},
+    });
+
+    const subscriptionKeySelector = (filter: string) => filter;
+
+    const subscriptionRendererParams = useCallback((_: string, value: string) => ({
+        title: value,
+    }), []);
+
+    const rendererParams = useCallback((_: string, value: AlertInfo) => ({
+        alertId: value.alertId,
+        alertTitle: value.alertTitle,
+        alertDescription: value?.alertDescription,
+    }), []);
+
+    return (
+        <Page
+            className={styles.subscriptionDetail}
+            title={strings.subscriptionDetailTitle}
+            // TODO: Add subscription heading and description
+            heading={strings.subscriptionHeading}
+        >
+            <Container
+                childrenContainerClassName={styles.alertFilters}
+                withGridViewInFilter
+                filters={(
+                    <>
+                        <DateInput
+                            name="startDateFrom"
+                            label={strings.filterStartDateFrom}
+                            value={undefined}
+                            onChange={() => { }}
+                        />
+                        <DateInput
+                            name="startDateTo"
+                            label={strings.filterStartDateTo}
+                            value={undefined}
+                            onChange={() => { }}
+                        />
+                    </>
+                )}
+                footerActions={(
+                    <Pager
+                        activePage={page}
+                        itemsCount={50}
+                        maxItemsPerPage={PAGE_SIZE}
+                        onActivePageChange={setPage}
+                    />
+                )}
+            >
+                <List
+                    className={styles.badgeContainer}
+                    data={subscriptionAndAlertsDetail.alertFilters}
+                    keySelector={subscriptionKeySelector}
+                    renderer={Badge}
+                    rendererParams={subscriptionRendererParams}
+                    pending={false}
+                    errored={false}
+                    filtered={false}
+                />
+                <List
+                    className={styles.alertItem}
+                    data={subscriptionAndAlertsDetail.alertInfo}
+                    renderer={AlertInfoItem}
+                    rendererParams={rendererParams}
+                    keySelector={stringIdSelector}
+                    pending={false}
+                    errored={false}
+                    filtered={false}
+                />
+            </Container>
+        </Page>
+    );
+}
+
+Component.displayName = 'SubscriptionDetail';
diff --git a/src/views/MySubscription/SubscriptionDetail/styles.module.css b/src/views/MySubscription/SubscriptionDetail/styles.module.css
new file mode 100644
index 00000000..0e8a8115
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionDetail/styles.module.css
@@ -0,0 +1,19 @@
+.subscription-detail {
+    .alert-filters {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-md);
+
+        .badge-container {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            min-height: 0%;
+        }
+
+        .alert-item {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionTableItem/i18n.json b/src/views/MySubscription/SubscriptionTableItem/i18n.json
new file mode 100644
index 00000000..1b8a7d4b
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionTableItem/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "subscriptionItem",
+    "strings": {
+        "subscriptionItemView": "View"
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx
index ee7bf395..f6dd7565 100644
--- a/src/views/MySubscription/SubscriptionTableItem/index.tsx
+++ b/src/views/MySubscription/SubscriptionTableItem/index.tsx
@@ -1,14 +1,18 @@
 import { Container } 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;
@@ -21,6 +25,7 @@ interface Props {
 
 function SubscriptionTableItem(props: Props) {
     const {
+        id,
         country,
         admin1,
         urgency,
@@ -31,8 +36,11 @@ function SubscriptionTableItem(props: Props) {
         actions,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     return (
         <Container
+            key={id}
             className={styles.subscriptionDetail}
             heading={title}
             headingLevel={4}
@@ -44,15 +52,27 @@ function SubscriptionTableItem(props: Props) {
                     {actions}
                 </>
             )}
+            footerContentClassName={styles.alertDetail}
             footerContent={(
                 <>
-                    {country}
-                    {admin1}
-                    {urgency}
-                    {certainty}
-                    {severity}
+                    <div>{country}</div>
+                    <div>{admin1}</div>
+                    <div>{urgency}</div>
+                    <div>{certainty}</div>
+                    <div>{severity}</div>
                 </>
             )}
+            footerActions={(
+                <Link
+                    to="subscriptionDetail"
+                    urlParams={{
+                        subscriptionId: id,
+                    }}
+                    variant="secondary"
+                >
+                    {strings.subscriptionItemView}
+                </Link>
+            )}
         />
     );
 }
diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
index a50abf27..69194df0 100644
--- a/src/views/MySubscription/SubscriptionTableItem/styles.module.css
+++ b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
@@ -1,4 +1,10 @@
 .subscription-detail {
     background-color: var(--go-ui-color-gray-20);
     padding: var(--go-ui-spacing-md);
+
+    .alertDetail {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--go-ui-spacing-sm);
+    }
 }
diff --git a/src/views/MySubscription/common.tsx b/src/views/MySubscription/common.tsx
index 41a6cd25..72e1e6fd 100644
--- a/src/views/MySubscription/common.tsx
+++ b/src/views/MySubscription/common.tsx
@@ -9,6 +9,24 @@ export interface FrequencyOption {
     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;
diff --git a/src/views/MySubscription/i18n.json b/src/views/MySubscription/i18n.json
index dd163098..ea33e4a0 100644
--- a/src/views/MySubscription/i18n.json
+++ b/src/views/MySubscription/i18n.json
@@ -6,6 +6,7 @@
         "createNewSubscription": "Create",
         "sendViaEmailLabel": "Send via email",
         "activeSubscriptionsTab": "Active Subscriptions",
-        "archivedSubscriptionTab": "Archive 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."
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx
index 1bab16b3..07c0376f 100644
--- a/src/views/MySubscription/index.tsx
+++ b/src/views/MySubscription/index.tsx
@@ -66,6 +66,7 @@ export function Component() {
     }] = useBooleanState(false);
 
     const activeRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+        id: value.id,
         title: value.title,
         totalCount: value.totalCount ?? 0,
         country: value?.country,
@@ -77,6 +78,7 @@ export function Component() {
     }), []);
 
     const archiveRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+        id: value.id,
         title: value.title,
         totalCount: value.totalCount ?? 0,
         country: value?.country,
@@ -92,7 +94,7 @@ export function Component() {
             title={strings.mySubscription}
             className={styles.mySubscription}
             heading={strings.mySubscription}
-            // TODO: Add subscription description
+            description={strings.subscriptionDescription}
             mainSectionClassName={styles.content}
         >
             <Container
diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
index 756be534..1c361c91 100644
--- a/src/views/NewSubscriptionModal/index.tsx
+++ b/src/views/NewSubscriptionModal/index.tsx
@@ -169,6 +169,8 @@ function NewSubscriptionModal(props: Props) {
         onCloseModal,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const defaultFormValue = useMemo(() => ({
         title: subscription?.title,
         urgency: subscription?.urgency,
@@ -192,7 +194,6 @@ function NewSubscriptionModal(props: Props) {
 
     const fieldError = getErrorObject(formError);
 
-    const strings = useTranslation(i18n);
     const {
         data: alertEnumsResponse,
     } = useQuery<AlertEnumsAndAllCountryListQuery, AlertEnumsAndAllCountryListQueryVariables>(
diff --git a/src/views/Resources/i18n.json b/src/views/Resources/i18n.json
index ca581735..0046c119 100644
--- a/src/views/Resources/i18n.json
+++ b/src/views/Resources/i18n.json
@@ -23,6 +23,7 @@
         "ifrcRelatedExternalLinksGo": "WMO register of alerting authorities",
         "ifrcRelatedExternalLinksCapImplementation": "CAP implementation workshop",
         "ifrcRelatedExternalLinksGooglePublicAlerts": "Google Public Alerts",
-        "ifrcRelatedExternalLinksEarlyWarningAllInitiative":"Early Warning For All Initiative"
+        "ifrcRelatedExternalLinksEarlyWarningAllInitiative":"Early Warning For All Initiative",
+        "ifrcSubscriptionDescription": "To subscribe to alerts on the IFRC AlertHub platform, log in to your account and navigate to the My Subscriptions section located in the top-left corner of the site. Choose the topics or categories that interest you, such as specific countries, hazards, or urgency levels. Click the Subscribe button, set your preferred alert frequency (e.g., daily or weekly), and save your preferences. Once subscribed, you’ll receive updates tailored to your selections. You can create multiple subscriptions to cover different interests. To modify or cancel your subscriptions, simply return to the My Subscriptions section."
     }
 }
\ No newline at end of file
diff --git a/src/views/Resources/index.tsx b/src/views/Resources/index.tsx
index 84c44b84..b5966e05 100644
--- a/src/views/Resources/index.tsx
+++ b/src/views/Resources/index.tsx
@@ -136,6 +136,7 @@ export function Component() {
             </Container>
             <Container
                 heading={strings.howToSubscribeTitle}
+                headerDescription={strings.ifrcSubscriptionDescription}
             />
             <Container
                 heading={strings.ifrcRelatedLinksTitle}