diff --git a/src/assets/icons/alerthub_Logo.png b/src/assets/icons/alerthub_Logo.png
new file mode 100644
index 00000000..117d5628
Binary files /dev/null and b/src/assets/icons/alerthub_Logo.png differ
diff --git a/src/assets/icons/alerthub_api.svg b/src/assets/icons/alerthub_api.svg
new file mode 100644
index 00000000..1002f39b
--- /dev/null
+++ b/src/assets/icons/alerthub_api.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="44" viewBox="0 0 48 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_828_646)">
+<path d="M17.5 19H40.5C44.0898 19 47 16.0898 47 12.5C47 8.91016 44.0898 6 40.5 6C39.9099 6 39.3411 6.08569 38.7976 6.23291C37.9924 2.66602 34.8103 0 31 0C26.8225 0 23.3975 3.20325 23.0361 7.28674C22.5547 7.11108 22.042 7 21.5 7C19.0146 7 17 9.01465 17 11.5C17 11.6866 17.0327 11.8643 17.0549 12.0449C15.3345 12.2656 14 13.7195 14 15.5C14 17.433 15.5669 19 17.5 19Z" fill="#F5333F"/>
+<path d="M47 38H31C31 38.5498 30.78 39.0498 30.4099 39.4102C30.05 39.7798 29.55 40 29 40H19C17.9 40 17 39.1001 17 38H1C0.449951 38 0 38.4502 0 39V43C0 43.5498 0.449951 44 1 44H47C47.55 44 48 43.5498 48 43V39C48 38.4502 47.55 38 47 38Z" fill="#F5333F"/>
+<path d="M8 16H11V11H5C3.90002 11 3 11.8999 3 13V35H8V16Z" fill="#F5333F"/>
+<path d="M45 22H40V35H45V22Z" fill="#F5333F"/>
+</g>
+<defs>
+<clipPath id="clip0_828_646">
+<rect width="48" height="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
index 3a8817fb..cf88bdce 100644
--- a/src/views/Home/AlertsMap/index.tsx
+++ b/src/views/Home/AlertsMap/index.tsx
@@ -7,19 +7,12 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
-    AddLineIcon,
-    ChevronRightLineIcon,
-} from '@ifrc-go/icons';
-import {
-    Button,
     Container,
     InfoPopup,
 } from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 import {
     isDefined,
@@ -35,7 +28,6 @@ import {
     FilteredCountryListQueryVariables,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
-import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -86,20 +78,12 @@ export function Component() {
     const strings = useTranslation(i18n);
     const alertFilters = useAlertFilters();
 
-    const [showSubscriptionModal, {
-        setTrue: setShowSubscriptionModalTrue,
-        setFalse: setShowSubscriptionModalFalse,
-    }] = useBooleanState(false);
-
     const {
         activeAdmin1Id,
         activeCountryId,
         activeAlertId,
         activeCountryDetails,
         activeAdmin1Details,
-        selectedUrgencyTypes,
-        selectedCertaintyTypes,
-        selectedSeverityTypes,
     } = useContext(AlertDataContext);
 
     // FIXME: We should remove useFilterState as we are not using any feature
@@ -187,20 +171,6 @@ export function Component() {
         [totalAlertCount, activeCountryDetails, activeAdmin1Details, strings],
     );
 
-    const defaultSubscription = useMemo(() => ({
-        filterAlertUrgencies: selectedUrgencyTypes,
-        filterAlertCertainties: selectedCertaintyTypes,
-        filterAlertSeverities: selectedSeverityTypes,
-        filterAlertCountry: activeCountryId || '',
-        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-    }), [
-        selectedUrgencyTypes,
-        selectedSeverityTypes,
-        selectedCertaintyTypes,
-        activeCountryId,
-        activeAdmin1Id,
-    ]);
-
     return (
         <Container
             className={styles.alertsMap}
@@ -217,19 +187,6 @@ export function Component() {
             childrenContainerClassName={styles.mainContent}
             actions={(
                 <div className={styles.links}>
-                    <Button
-                        className={styles.sources}
-                        onClick={setShowSubscriptionModalTrue}
-                        name={undefined}
-                        variant="tertiary"
-                        actions={(
-                            <AddLineIcon
-                                className={styles.icon}
-                            />
-                        )}
-                    >
-                        {strings.alertNewSubscription}
-                    </Button>
                     <Link
                         className={styles.sources}
                         to="allSourcesFeeds"
@@ -249,13 +206,6 @@ export function Component() {
             numPreferredGridContentColumns={3}
             filters={<AlertFilters variant="map" />}
         >
-            {showSubscriptionModal && (
-                <NewSubscriptionModal
-                    subscription={defaultSubscription}
-                    onCloseModal={setShowSubscriptionModalFalse}
-                    onSuccess={undefined}
-                />
-            )}
             <Map
                 className={styles.alertsMap}
                 countriesWithAlert={countriesWithAlert}
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
index 314bcb7b..55638136 100644
--- a/src/views/Home/AlertsTable/index.tsx
+++ b/src/views/Home/AlertsTable/index.tsx
@@ -9,12 +9,8 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
-    AddLineIcon,
-    ChevronRightLineIcon,
-} from '@ifrc-go/icons';
-import {
-    Button,
     Container,
     DateOutput,
     DateOutputProps,
@@ -23,10 +19,7 @@ import {
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     createElementColumn,
     createListDisplayColumn,
@@ -47,7 +40,6 @@ import {
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
 import { DATE_FORMAT } from '#utils/constants';
-import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -112,11 +104,6 @@ const DESC = 'DESC';
 export function Component() {
     const strings = useTranslation(i18n);
 
-    const [showSubscriptionModal, {
-        setTrue: setShowSubscriptionModalTrue,
-        setFalse: setShowSubscriptionModalFalse,
-    }] = useBooleanState(false);
-
     const alertFilters = useAlertFilters();
     const {
         activeCountryId,
@@ -125,9 +112,6 @@ export function Component() {
         selectedCategoryTypes,
         startDateFrom,
         startDateTo,
-        selectedUrgencyTypes,
-        selectedCertaintyTypes,
-        selectedSeverityTypes,
     } = useContext(AlertDataContext);
 
     const {
@@ -290,22 +274,6 @@ export function Component() {
         { numAppeals: data?.count ?? '--' },
     );
 
-    const defaultSubscription = useMemo(() => ({
-        filterAlertUrgencies: selectedUrgencyTypes,
-        filterAlertCertainties: selectedCertaintyTypes,
-        filterAlertSeverities: selectedSeverityTypes,
-        filterAlertCategories: selectedCategoryTypes,
-        filterAlertCountry: activeCountryId || '',
-        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-    }), [
-        selectedUrgencyTypes,
-        selectedSeverityTypes,
-        selectedCertaintyTypes,
-        activeCountryId,
-        activeAdmin1Id,
-        selectedCategoryTypes,
-    ]);
-
     return (
         <Container
             className={styles.alertsTable}
@@ -321,19 +289,6 @@ export function Component() {
             withHeaderBorder
             actions={(
                 <div className={styles.links}>
-                    <Button
-                        className={styles.sources}
-                        onClick={setShowSubscriptionModalTrue}
-                        name={undefined}
-                        variant="tertiary"
-                        actions={(
-                            <AddLineIcon
-                                className={styles.icon}
-                            />
-                        )}
-                    >
-                        {strings.alertNewSubscription}
-                    </Button>
                     <Link
                         className={styles.sources}
                         to="allSourcesFeeds"
@@ -359,13 +314,6 @@ export function Component() {
             )}
             filters={<AlertFilters variant="table" />}
         >
-            {showSubscriptionModal && (
-                <NewSubscriptionModal
-                    onCloseModal={setShowSubscriptionModalFalse}
-                    subscription={defaultSubscription}
-                    onSuccess={undefined}
-                />
-            )}
             <SortContext.Provider value={sortState}>
                 <Table
                     pending={alertInfoLoading}
diff --git a/src/views/Home/i18n.json b/src/views/Home/i18n.json
index c791da0c..8eea42b3 100644
--- a/src/views/Home/i18n.json
+++ b/src/views/Home/i18n.json
@@ -5,6 +5,12 @@
         "homeHeading": "IFRC Alert Hub",
         "homeDescription": "IFRC Alert Hub provides global emergency alerts, empowering communities to protect lives and livelihoods.",
         "mapTabTitle": "Map",
-        "tableTabTitle": "Table"
+        "tableTabTitle": "Table",
+        "addSubscription": "Add Subscription to receive real-time alerts ",
+        "addSubscriptionDescription": "With real-time monitoring of potential risks and emergency events, receive timely and accurate alerts.",
+        "useApi": "Use API to rebroadcast CAP alerts",
+        "useApiDescription": "With simple yet powerful API endpoints, you can tailor the alerts to suit your users' needs.",
+        "alertNewSubscription": "Subscribe Alerts ",
+        "alertApiReference": "API Reference"
     }
 }
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index ff455979..9ae2e002 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -4,13 +4,23 @@ import {
     useState,
 } from 'react';
 import { Outlet } from 'react-router-dom';
-import { NavigationTabList } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    Button,
+    Container,
+    NavigationTabList,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import {
     isDefined,
     isNotDefined,
 } from '@togglecorp/fujs';
 
+import alerthubApi from '#assets/icons/alerthub_api.svg';
+import alerthubLogo from '#assets/icons/alerthub_Logo.png';
+import Link from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
 import {
@@ -18,6 +28,7 @@ import {
     CountryDetailQuery,
 } from '#generated/types/graphql';
 import useUrlSearchState from '#hooks/useUrlSearchState';
+import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext, { AlertDataContextProps } from './AlertDataContext';
 
@@ -62,12 +73,12 @@ type InfosAlertFilterKeys = SafeExtract<InfosAlertFilters, 'category' | 'urgency
 type ApplicableAlertFilterKey = DirectAlertFilterKeys | InfosAlertFilterKeys;
 
 type ApplicableAlertFilter = Pick<InfosAlertFilters, InfosAlertFilterKeys>
-& Pick<AlertFilter, DirectAlertFilterKeys | 'infos'>
-& {
-    alert: string | undefined;
-    startDateFrom: string | undefined;
-    startDateTo: string | undefined;
-};
+    & Pick<AlertFilter, DirectAlertFilterKeys | 'infos'>
+    & {
+        alert: string | undefined;
+        startDateFrom: string | undefined;
+        startDateTo: string | undefined;
+    };
 
 type CombinedAlertFilterKey = ApplicableAlertFilterKey | 'alert' | 'startDateFrom' | 'startDateTo';
 const filterKeys: CombinedAlertFilterKey[] = ['country', 'admin1', 'region', 'urgency', 'severity', 'category', 'certainty', 'alert', 'startDateTo', 'startDateFrom'];
@@ -92,8 +103,8 @@ export function Component() {
                 admin1: convertUrlQueryToId(urlValues.admin1),
                 region: convertUrlQueryToId(urlValues.region),
                 infos: (isDefined(category)
-                        || isDefined(urgency)
-                        || isDefined(severity) || isDefined(certainty))
+                    || isDefined(urgency)
+                    || isDefined(severity) || isDefined(certainty))
                     ? ({
                         category,
                         urgency,
@@ -214,6 +225,20 @@ export function Component() {
             getFilterFieldSetterFn,
         ],
     );
+    const defaultSubscription = useMemo(() => ({
+        filterAlertUrgencies: alertContextValue.selectedUrgencyTypes,
+        filterAlertCertainties: alertContextValue.selectedCertaintyTypes,
+        filterAlertSeverities: alertContextValue.selectedSeverityTypes,
+        filterAlertCategories: alertContextValue.selectedCategoryTypes,
+        filterAlertCountry: alertContextValue.activeCountryId,
+        filterAlertAdmin1s: alertContextValue.activeAdmin1Id
+            ? [alertContextValue.activeAdmin1Id] : [],
+    }), [alertContextValue]);
+
+    const [showSubscriptionModal, {
+        setTrue: setShowSubscriptionModalTrue,
+        setFalse: setShowSubscriptionModalFalse,
+    }] = useBooleanState(false);
 
     return (
         <AlertDataContext.Provider value={alertContextValue}>
@@ -225,15 +250,93 @@ export function Component() {
                 infoContainerClassName={styles.tabSection}
                 mainSectionClassName={styles.content}
                 info={(
-                    <NavigationTabList variant="secondary">
-                        <NavigationTab to="homeMap">
-                            {strings.mapTabTitle}
-                        </NavigationTab>
-                        <NavigationTab to="homeTable">
-                            {strings.tableTabTitle}
-                        </NavigationTab>
-                    </NavigationTabList>
+                    <>
+                        <Container
+                            className={styles.cards}
+                            contentViewType="grid"
+                            numPreferredGridContentColumns={2}
+                        >
+                            <Container
+                                className={styles.card}
+                                contentViewType="grid"
+                                numPreferredGridContentColumns={2}
+                                childrenContainerClassName={styles.cardsContent}
+                            >
+                                <Container
+                                    heading={strings.addSubscription}
+                                    headerDescription={strings.addSubscriptionDescription}
+                                    withInternalPadding
+                                    footerContent={(
+                                        <Button
+                                            onClick={setShowSubscriptionModalTrue}
+                                            name={undefined}
+                                            variant="primary"
+                                        >
+                                            {strings.alertNewSubscription}
+                                        </Button>
+                                    )}
+                                />
+                                <Container
+                                    withInternalPadding
+                                >
+                                    <img
+                                        className={styles.alertImage}
+                                        src={alerthubLogo}
+                                        alt=""
+                                    />
+                                </Container>
+                            </Container>
+                            {showSubscriptionModal && (
+                                <NewSubscriptionModal
+                                    onCloseModal={setShowSubscriptionModalFalse}
+                                    subscription={defaultSubscription}
+                                    onSuccess={undefined}
+                                />
+                            )}
+                            <Container
+                                className={styles.card}
+                                contentViewType="grid"
+                                numPreferredGridContentColumns={2}
+                                childrenContainerClassName={styles.cardsContent}
+                            >
+                                <Container
+                                    heading={strings.useApi}
+                                    headerDescription={strings.useApiDescription}
+                                    withInternalPadding
+                                    footerContent={(
+                                        <Link
+                                            href="https://github.com/IFRCGo/alert-hub-web-app/blob/develop/APIDOCS.md"
+                                            external
+                                            variant="primary"
+                                        >
+                                            {strings.alertApiReference}
+                                        </Link>
+                                    )}
+                                />
+                                <Container
+                                    withInternalPadding
+                                >
+                                    <img
+                                        className={styles.alertImage}
+                                        src={alerthubApi}
+                                        alt=""
+                                    />
+                                </Container>
+                            </Container>
+                        </Container>
+                        <div>
+                            <NavigationTabList variant="secondary">
+                                <NavigationTab to="homeMap">
+                                    {strings.mapTabTitle}
+                                </NavigationTab>
+                                <NavigationTab to="homeTable">
+                                    {strings.tableTabTitle}
+                                </NavigationTab>
+                            </NavigationTabList>
+                        </div>
+                    </>
                 )}
+
             >
                 <Outlet />
             </Page>
diff --git a/src/views/Home/styles.module.css b/src/views/Home/styles.module.css
index f21f003f..13e65d9f 100644
--- a/src/views/Home/styles.module.css
+++ b/src/views/Home/styles.module.css
@@ -7,7 +7,32 @@
 
     .tab-section {
         display: flex;
+        flex-direction: column;
+        gap:var(--go-ui-spacing-xl);
         justify-content: center;
+
+        .cards {
+            gap: var(--go-ui-spacing-xl);
+
+            .card {
+                gap: var(--go-ui-spacing-lg);
+                border-radius: var(--go-ui-border-radius-lg);
+                box-shadow: var(--go-ui-box-shadow-md);
+                background-color: var(--go-ui-color-foreground);
+                overflow: auto;
+
+                .cards-content {
+                    display:flex;
+                    align-items: center;
+
+                    .alert-image {
+                        margin: 0 auto;
+                        object-fit: contain;
+                        height: 5rem;
+                    }
+                }
+            }
+        }
     }
 
     .map-filter,
@@ -16,4 +41,4 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-lg);
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/Login/i18n.json b/src/views/Login/i18n.json
index 98a1f050..f06d9a11 100644
--- a/src/views/Login/i18n.json
+++ b/src/views/Login/i18n.json
@@ -16,7 +16,7 @@
         "loginButton":"Login",
         "loginDontHaveAccount":"Don’t have an account? {signUpLink}",
         "loginCreateAccountTitle":"Create new account",
-        "loginSignUp":"Sign up",
+        "loginRegister":"Register",
         "loginFailureMessage": "Failed to login!",
         "loginSuccessfully": "Logged in successfully!"
     }
diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
index 4d296cd7..88845e11 100644
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@@ -161,15 +161,15 @@ export function Component() {
         validate,
     ]);
 
-    const signupInfo = resolveToComponent(
+    const registerInfo = resolveToComponent(
         strings.loginDontHaveAccount,
         {
-            signUpLink: (
+            registerLink: (
                 <Link
                     to="register"
                     withUnderline
                 >
-                    {strings.loginSignUp}
+                    {strings.loginRegister}
                 </Link>
             ),
         },
@@ -232,7 +232,7 @@ export function Component() {
                         {strings.loginButton}
                     </Button>
                     <div className={styles.signUp}>
-                        {signupInfo}
+                        {registerInfo}
                     </div>
                 </div>
             </form>