diff --git a/package.json b/package.json
index 6b0f0406..7419e504 100644
--- a/package.json
+++ b/package.json
@@ -94,4 +94,4 @@
     "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^1.1.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
index 61d690ba..ec193783 100644
--- a/src/App/routes/index.tsx
+++ b/src/App/routes/index.tsx
@@ -177,6 +177,18 @@ const pageNotFound = customWrapRoute({
         visibility: 'anything',
     },
 });
+const register = customWrapRoute({
+    parent: rootLayout,
+    path: 'register',
+    component: {
+        render: () => import('#views/Register'),
+        props: {},
+    },
+    context: {
+        title: 'Register',
+        visibility: 'is-not-authenticated',
+    },
+});
 
 const login = customWrapRoute({
     parent: rootLayout,
@@ -218,6 +230,7 @@ const wrappedRoutes = {
     pageNotFound,
     login,
     recoverAccount,
+    register,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/src/components/Navbar/i18n.json b/src/components/Navbar/i18n.json
index 78595b24..53916ec5 100644
--- a/src/components/Navbar/i18n.json
+++ b/src/components/Navbar/i18n.json
@@ -3,9 +3,10 @@
     "strings": {
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
+        "appRegister":"Register",
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
-        "headerMenuMySubscription": "My Subscription"
+        "headerMenuMySubscription": "My Subscriptions"
     }
 }
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index f84881db..f8f5d86a 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,4 +1,5 @@
 import {
+    Button,
     Heading,
     NavigationTabList,
     PageContainer,
@@ -9,6 +10,7 @@ import { _cs } from '@togglecorp/fujs';
 import goLogo from '#assets/icons/go-logo-2020.svg';
 import Link from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
+import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -21,6 +23,7 @@ interface Props {
 function Navbar(props: Props) {
     const { className } = props;
     const strings = useTranslation(i18n);
+    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -59,12 +62,23 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    <Link
-                        variant="primary"
-                        to="login"
-                    >
-                        {strings.appLogin}
-                    </Link>
+                    {!isAuthenticated && (
+                        <>
+                            <Button
+                                name={undefined}
+                                variant="primary"
+                                onClick={undefined}
+                            >
+                                {strings.appLogin}
+                            </Button>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
@@ -84,4 +98,5 @@ function Navbar(props: Props) {
         </nav>
     );
 }
+
 export default Navbar;
diff --git a/src/components/Navbar/styles.module.css b/src/components/Navbar/styles.module.css
index 7785e42f..f976e946 100644
--- a/src/components/Navbar/styles.module.css
+++ b/src/components/Navbar/styles.module.css
@@ -50,7 +50,6 @@
         }
 
         .menu-item:hover {
-            text-decoration: underline;
             color: var(--go-ui-color-primary-red);
         }
 
diff --git a/src/views/Home/AlertFilters/index.tsx b/src/views/Home/AlertFilters/index.tsx
index c4dc0b02..ac32b497 100644
--- a/src/views/Home/AlertFilters/index.tsx
+++ b/src/views/Home/AlertFilters/index.tsx
@@ -55,65 +55,65 @@ const categoryLabelSelector = (category: Category) => category.label;
 const ALERT_ENUMS = gql`
 query AlertEnums {
     enums {
-      AlertInfoCertainty {
-        key
-        label
-      }
-      AlertInfoUrgency {
-        label
-        key
-      }
-      AlertInfoSeverity {
-        key
-        label
-      }
-      AlertInfoCategory {
-        key
-        label
-      }
+        AlertInfoCertainty {
+            key
+            label
+        }
+        AlertInfoUrgency {
+            label
+            key
+        }
+        AlertInfoSeverity {
+            key
+            label
+        }
+        AlertInfoCategory {
+            key
+            label
+        }
     }
 }`;
 
 const ADMIN_LIST = gql`
 query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
     public {
-      id
-      admin1s(filters: $filters, pagination: $pagination) {
-        items {
-          id
-          name
-          countryId
-          alertCount
+        id
+        admin1s(filters: $filters, pagination: $pagination) {
+            items {
+                id
+                name
+                countryId
+                alertCount
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const REGION_LIST = gql`
 query RegionList {
     public {
         id
-      regions {
-        items {
-          id
-          name
-          ifrcGoId
+        regions {
+            items {
+                id
+                name
+                ifrcGoId
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const ALL_COUNTRY_LIST = gql`
 query AllCountryList {
-  public {
-    id
-    allCountries {
-      name
-      id
+    public {
+        id
+        allCountries {
+            name
+            id
+        }
     }
-  }
 }
 `;
 
diff --git a/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx b/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx
index aac0fd6f..11b6e1f4 100644
--- a/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx
+++ b/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx
@@ -36,23 +36,23 @@ import styles from './styles.module.css';
 
 const COUNTRY_DETAIL = gql`
 query CountryDetail($countryId: ID!) {
-  public {
-    id
-    country(pk: $countryId) {
-      id
-      bbox
-      name
-      iso3
-      ifrcGoId
-      alertCount
-      admin1s {
+    public {
         id
-        countryId
-        filteredAlertCount
-        name
-      }
+        country(pk: $countryId) {
+            id
+            bbox
+            name
+            iso3
+            ifrcGoId
+            alertCount
+            admin1s {
+                id
+                countryId
+                filteredAlertCount
+                name
+            }
+        }
     }
-  }
 }
 `;
 
diff --git a/src/views/Home/AlertsMap/i18n.json b/src/views/Home/AlertsMap/i18n.json
index 64c9deea..dcca6882 100644
--- a/src/views/Home/AlertsMap/i18n.json
+++ b/src/views/Home/AlertsMap/i18n.json
@@ -6,6 +6,7 @@
         "ongoingAlertCountries": "Ongoing Alert Countries",
         "backToAlertsLabel": "Back to Alerts",
         "alertViewDetails": "View Details",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
index 0154322c..bab79f74 100644
--- a/src/views/Home/AlertsMap/index.tsx
+++ b/src/views/Home/AlertsMap/index.tsx
@@ -7,12 +7,19 @@ 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 { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 import {
     isDefined,
@@ -28,6 +35,7 @@ import {
     FilteredCountryListQueryVariables,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
+import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
@@ -77,12 +85,21 @@ type AlertPointProperties = {
 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
@@ -170,6 +187,22 @@ export function Component() {
         [totalAlertCount, activeCountryDetails, activeAdmin1Details, strings],
     );
 
+    const defaultSubscription = useMemo(() => ({
+        id: '',
+        title: '',
+        urgency: selectedUrgencyTypes,
+        severity: selectedSeverityTypes,
+        certainty: selectedCertaintyTypes,
+        country: activeCountryId,
+        admin1: activeAdmin1Id,
+    }), [
+        selectedUrgencyTypes,
+        selectedSeverityTypes,
+        selectedCertaintyTypes,
+        activeCountryId,
+        activeAdmin1Id,
+    ]);
+
     return (
         <Container
             className={styles.alertsMap}
@@ -185,15 +218,30 @@ export function Component() {
             withHeaderBorder
             childrenContainerClassName={styles.mainContent}
             actions={(
-                <Link
-                    className={styles.sources}
-                    to="allSourcesFeeds"
-                    actions={(
-                        <ChevronRightLineIcon className={styles.icon} />
-                    )}
-                >
-                    {strings.mapViewAllSources}
-                </Link>
+                <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"
+                        actions={(
+                            <ChevronRightLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.mapViewAllSources}
+                    </Link>
+                </div>
             )}
             overlayPending
             pending={countryListLoading}
@@ -204,6 +252,12 @@ export function Component() {
             filters={<AlertFilters variant="map" />}
             withGridViewInFilter
         >
+            {showSubscriptionModal && (
+                <NewSubscriptionModal
+                    subscription={defaultSubscription}
+                    onCloseModal={setShowSubscriptionModalFalse}
+                />
+            )}
             <Map
                 className={styles.alertsMap}
                 countriesWithAlert={countriesWithAlert}
diff --git a/src/views/Home/AlertsMap/styles.module.css b/src/views/Home/AlertsMap/styles.module.css
index d3a908c3..2676274d 100644
--- a/src/views/Home/AlertsMap/styles.module.css
+++ b/src/views/Home/AlertsMap/styles.module.css
@@ -36,16 +36,21 @@
         }
     }
 
-    .sources {
+    .links {
         display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: var(--go-ui-color-text);
-        font-weight: var(--go-ui-font-weight-medium);
-    }
-
-    .sources:hover {
-        text-decoration: underline;
-        color: var(--go-ui-color-primary-red);
+        gap: var(--go-ui-spacing-lg);
+
+        .sources {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: var(--go-ui-color-text);
+            font-weight: var(--go-ui-font-weight-medium);
+        }
+    
+        .sources:hover {
+            text-decoration: underline;
+            color: var(--go-ui-color-primary-red);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/Home/AlertsTable/i18n.json b/src/views/Home/AlertsTable/i18n.json
index c578ebe0..67cf3300 100644
--- a/src/views/Home/AlertsTable/i18n.json
+++ b/src/views/Home/AlertsTable/i18n.json
@@ -10,6 +10,7 @@
         "alertTableAdminsTitle":"Admin1s",
         "alertTableSentLabel":"Sent",
         "tableViewAllSources": "View All Sources",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
index e9b12766..db1311c9 100644
--- a/src/views/Home/AlertsTable/index.tsx
+++ b/src/views/Home/AlertsTable/index.tsx
@@ -9,8 +9,12 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import {
+    AddLineIcon,
+    ChevronRightLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
     Container,
     DateOutput,
     DateOutputProps,
@@ -19,7 +23,10 @@ import {
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
-import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import {
     createElementColumn,
     createListDisplayColumn,
@@ -40,6 +47,7 @@ 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';
@@ -104,6 +112,11 @@ const DESC = 'DESC';
 export function Component() {
     const strings = useTranslation(i18n);
 
+    const [showSubscriptionModal, {
+        setTrue: setShowSubscriptionModalTrue,
+        setFalse: setShowSubscriptionModalFalse,
+    }] = useBooleanState(false);
+
     const alertFilters = useAlertFilters();
     const {
         activeCountryId,
@@ -112,6 +125,9 @@ export function Component() {
         selectedCategoryTypes,
         startDateFrom,
         startDateTo,
+        selectedUrgencyTypes,
+        selectedCertaintyTypes,
+        selectedSeverityTypes,
     } = useContext(AlertDataContext);
 
     const {
@@ -271,6 +287,22 @@ export function Component() {
         { numAppeals: data?.count ?? '--' },
     );
 
+    const defaultSubscription = useMemo(() => ({
+        id: '',
+        title: '',
+        urgency: selectedUrgencyTypes,
+        severity: selectedSeverityTypes,
+        certainty: selectedCertaintyTypes,
+        country: activeCountryId,
+        admin1: activeAdmin1Id,
+    }), [
+        selectedUrgencyTypes,
+        selectedSeverityTypes,
+        selectedCertaintyTypes,
+        activeCountryId,
+        activeAdmin1Id,
+    ]);
+
     return (
         <Container
             className={styles.alertsTable}
@@ -286,15 +318,30 @@ export function Component() {
             withHeaderBorder
             withGridViewInFilter
             actions={(
-                <Link
-                    className={styles.sources}
-                    to="allSourcesFeeds"
-                    actions={(
-                        <ChevronRightLineIcon className={styles.icon} />
-                    )}
-                >
-                    {strings.tableViewAllSources}
-                </Link>
+                <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"
+                        actions={(
+                            <ChevronRightLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.tableViewAllSources}
+                    </Link>
+                </div>
             )}
             overlayPending
             pending={alertInfoLoading}
@@ -310,6 +357,12 @@ export function Component() {
             )}
             filters={<AlertFilters variant="table" />}
         >
+            {showSubscriptionModal && (
+                <NewSubscriptionModal
+                    onCloseModal={setShowSubscriptionModalFalse}
+                    subscription={defaultSubscription}
+                />
+            )}
             <SortContext.Provider value={sortState}>
                 <Table
                     pending={alertInfoLoading}
diff --git a/src/views/Home/AlertsTable/styles.module.css b/src/views/Home/AlertsTable/styles.module.css
index 823d1d34..7662920f 100644
--- a/src/views/Home/AlertsTable/styles.module.css
+++ b/src/views/Home/AlertsTable/styles.module.css
@@ -51,16 +51,21 @@
         font-weight: var(--go-ui-font-weight-medium);
     }
 
-    .sources {
+    .links {
         display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: var(--go-ui-color-text);
-        font-weight: var(--go-ui-font-weight-medium);
-    }
+        gap: var(--go-ui-spacing-lg);
 
-    .sources:hover {
-        text-decoration: underline;
-        color: var(--go-ui-color-primary-red);
+        .sources {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: var(--go-ui-color-text);
+            font-weight: var(--go-ui-font-weight-medium);
+        }
+    
+        .sources:hover {
+            text-decoration: underline;
+            color: var(--go-ui-color-primary-red);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/MySubscription/ActiveTableActions/i18n.json b/src/views/MySubscription/ActiveTableActions/i18n.json
new file mode 100644
index 00000000..57399421
--- /dev/null
+++ b/src/views/MySubscription/ActiveTableActions/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "SubscriptionActions",
+    "strings": {
+        "deleteSubscriptionActions": "Delete",
+        "archiveSubscriptionActions": "Archive",
+        "editSubscriptionActions": "Edit"
+    }
+}
diff --git a/src/views/MySubscription/ActiveTableActions/index.tsx b/src/views/MySubscription/ActiveTableActions/index.tsx
new file mode 100644
index 00000000..8073ab6a
--- /dev/null
+++ b/src/views/MySubscription/ActiveTableActions/index.tsx
@@ -0,0 +1,42 @@
+import { MoreOptionsIcon } from '@ifrc-go/icons';
+import { DropdownMenu } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+
+import i18n from './i18n.json';
+
+function ActiveTableActions() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <DropdownMenu
+            icons={<MoreOptionsIcon />}
+            variant="tertiary"
+            withoutDropdownIcon
+        >
+            <DropdownMenuItem
+                type="button"
+                name="archive"
+                onClick={undefined}
+            >
+                {strings.archiveSubscriptionActions}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+                type="button"
+                name="edit"
+            >
+                {strings.editSubscriptionActions}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+                type="button"
+                name="delete"
+                onClick={undefined}
+            >
+                {strings.deleteSubscriptionActions}
+            </DropdownMenuItem>
+        </DropdownMenu>
+    );
+}
+
+export default ActiveTableActions;
diff --git a/src/views/MySubscription/ArchiveTableActions/i18n.json b/src/views/MySubscription/ArchiveTableActions/i18n.json
new file mode 100644
index 00000000..cd2fa016
--- /dev/null
+++ b/src/views/MySubscription/ArchiveTableActions/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "SubscriptionActions",
+    "strings": {
+        "unarchiveSubscriptionActions": "Unarchive",
+        "deleteSubscriptionActions": "Delete"
+    }
+}
diff --git a/src/views/MySubscription/ArchiveTableActions/index.tsx b/src/views/MySubscription/ArchiveTableActions/index.tsx
new file mode 100644
index 00000000..aec03ac0
--- /dev/null
+++ b/src/views/MySubscription/ArchiveTableActions/index.tsx
@@ -0,0 +1,35 @@
+import { MoreOptionsIcon } from '@ifrc-go/icons';
+import { DropdownMenu } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+
+import i18n from './i18n.json';
+
+function ArchiveTableActions() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <DropdownMenu
+            icons={<MoreOptionsIcon />}
+            variant="tertiary"
+            withoutDropdownIcon
+        >
+            <DropdownMenuItem
+                type="button"
+                name="unArchive"
+            >
+                {strings.unarchiveSubscriptionActions}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+                type="button"
+                name="delete"
+                onClick={undefined}
+            >
+                {strings.deleteSubscriptionActions}
+            </DropdownMenuItem>
+        </DropdownMenu>
+    );
+}
+
+export default ArchiveTableActions;
diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx
new file mode 100644
index 00000000..ee7bf395
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionTableItem/index.tsx
@@ -0,0 +1,60 @@
+import { Container } from '@ifrc-go/ui';
+
+import {
+    AlertInfoCertaintyEnum,
+    AlertInfoSeverityEnum,
+    AlertInfoUrgencyEnum,
+} from '#generated/types/graphql';
+
+import styles from './styles.module.css';
+
+interface Props {
+    country: string | undefined;
+    admin1: string | undefined;
+    urgency?: AlertInfoUrgencyEnum[] | undefined;
+    certainty?: AlertInfoCertaintyEnum[] | undefined;
+    severity?: AlertInfoSeverityEnum[] | undefined;
+    title: string;
+    totalCount: number;
+    actions: React.ReactNode;
+}
+
+function SubscriptionTableItem(props: Props) {
+    const {
+        country,
+        admin1,
+        urgency,
+        certainty,
+        severity,
+        title,
+        totalCount,
+        actions,
+    } = props;
+
+    return (
+        <Container
+            className={styles.subscriptionDetail}
+            heading={title}
+            headingLevel={4}
+            actions={(
+                <>
+                    (
+                    {totalCount}
+                    )
+                    {actions}
+                </>
+            )}
+            footerContent={(
+                <>
+                    {country}
+                    {admin1}
+                    {urgency}
+                    {certainty}
+                    {severity}
+                </>
+            )}
+        />
+    );
+}
+
+export default SubscriptionTableItem;
diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
new file mode 100644
index 00000000..a50abf27
--- /dev/null
+++ b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
@@ -0,0 +1,4 @@
+.subscription-detail {
+    background-color: var(--go-ui-color-gray-20);
+    padding: var(--go-ui-spacing-md);
+}
diff --git a/src/views/MySubscription/common.tsx b/src/views/MySubscription/common.tsx
new file mode 100644
index 00000000..41a6cd25
--- /dev/null
+++ b/src/views/MySubscription/common.tsx
@@ -0,0 +1,24 @@
+import {
+    AlertInfoCertaintyEnum,
+    AlertInfoSeverityEnum,
+    AlertInfoUrgencyEnum,
+} from '#generated/types/graphql';
+
+export interface FrequencyOption {
+    label: string;
+    key: 'daily' | 'weekly';
+}
+
+// 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
new file mode 100644
index 00000000..dd163098
--- /dev/null
+++ b/src/views/MySubscription/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "mySubscription",
+    "strings": {
+        "mySubscription": "My Subscription",
+        "myNewSubscription": "New Subscription",
+        "createNewSubscription": "Create",
+        "sendViaEmailLabel": "Send via email",
+        "activeSubscriptionsTab": "Active Subscriptions",
+        "archivedSubscriptionTab": "Archive Subscriptions"
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx
new file mode 100644
index 00000000..96131d9a
--- /dev/null
+++ b/src/views/MySubscription/index.tsx
@@ -0,0 +1,170 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import { AddLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    List,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+
+import Page from '#components/Page';
+
+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;
+
+// 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: [],
+        },
+    ];
+
+    type TabKey = 'active' | 'archive';
+    const [activeTab, setActiveTab] = useState<TabKey>('active');
+
+    const [showSubscriptionModal, {
+        setTrue: setShowSubscriptionModalTrue,
+        setFalse: setShowSubscriptionModalFalse,
+    }] = useBooleanState(false);
+
+    const activeRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+        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) => ({
+        title: value.title,
+        totalCount: value.totalCount ?? 0,
+        country: value?.country,
+        admin1: value?.admin1,
+        urgency: value?.urgency,
+        certainty: value?.certainty,
+        severity: value?.severity,
+        actions: <ArchiveTableActions />,
+    }), []);
+
+    return (
+        <Page
+            title={strings.mySubscription}
+            className={styles.mySubscription}
+            heading={strings.mySubscription}
+            // TODO: Add subscription description
+            mainSectionClassName={styles.content}
+        >
+            <Container
+                contentViewType="vertical"
+                actions={(
+                    <Button
+                        className={styles.sources}
+                        onClick={setShowSubscriptionModalTrue}
+                        name={undefined}
+                        variant="tertiary"
+                        actions={(
+                            <AddLineIcon
+                                className={styles.icon}
+                            />
+                        )}
+                    >
+                        {strings.myNewSubscription}
+                    </Button>
+                )}
+            >
+                {showSubscriptionModal && data?.map((subscription) => (
+                    <NewSubscriptionModal
+                        subscription={subscription}
+                        onCloseModal={setShowSubscriptionModalFalse}
+                    />
+                ))}
+                <Tabs
+                    value={activeTab}
+                    onChange={setActiveTab}
+                    variant="primary"
+                >
+                    <TabList>
+                        <Tab name="active">
+                            {strings.activeSubscriptionsTab}
+                        </Tab>
+                        <Tab name="archive">
+                            {strings.archivedSubscriptionTab}
+                        </Tab>
+                    </TabList>
+                    <TabPanel
+                        name="active"
+                        className={styles.subscriptions}
+                    >
+                        <List
+                            className={styles.subscription}
+                            data={data}
+                            renderer={SubscriptionTableItem}
+                            rendererParams={activeRendererParams}
+                            keySelector={subscriptionKeySelector}
+                            filtered={false}
+                            pending={false}
+                            errored={false}
+                        />
+                    </TabPanel>
+                    <TabPanel
+                        name="archive"
+                        className={styles.subscriptions}
+                    >
+                        <List
+                            className={styles.subscription}
+                            data={data}
+                            renderer={SubscriptionTableItem}
+                            rendererParams={archiveRendererParams}
+                            keySelector={subscriptionKeySelector}
+                            filtered={false}
+                            pending={false}
+                            errored={false}
+                        />
+                    </TabPanel>
+                </Tabs>
+            </Container>
+        </Page>
+    );
+}
+Component.displayName = 'MySubscription';
diff --git a/src/views/MySubscription/styles.module.css b/src/views/MySubscription/styles.module.css
new file mode 100644
index 00000000..663c717b
--- /dev/null
+++ b/src/views/MySubscription/styles.module.css
@@ -0,0 +1,15 @@
+.mySubscription {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-2xl);
+
+        .subscriptions {
+            .subscription {
+                display: flex;
+                flex-direction: column;
+                gap: var(--go-ui-spacing-lg);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json
new file mode 100644
index 00000000..b687099f
--- /dev/null
+++ b/src/views/NewSubscriptionModal/i18n.json
@@ -0,0 +1,21 @@
+{
+    "namespace": "mySubscriptionModal",
+    "strings": {
+        "createNewSubscription": "Create",
+        "sendViaEmailLabel": "Send via email",
+        "filterCountriesPlaceholder": "All Countries",
+        "filterAdmin1Placeholder": "All Admin1",
+        "filterUrgencyPlaceholder": "All Urgency Types",
+        "filterSeverityPlaceholder": "All Severity Types",
+        "filterCertaintyPlaceholder": "All Certainty Types",
+        "filterCountriesLabel": "Country",
+        "filterAdmin1Label": "Admin1",
+        "filterUrgencyLabel": "Urgency Level",
+        "filterSeverityLabel": "Severity Level",
+        "filterCertaintyLabel": "Certainty Level",
+        "filterRegionsLabel": "Regions",
+        "filterRegionsPlaceholder": "All Regions",
+        "newSubscriptionHeading": "New Subscription",
+        "newSubscriptionTitle": "Title"
+    }
+}
\ No newline at end of file
diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
new file mode 100644
index 00000000..706dcd7a
--- /dev/null
+++ b/src/views/NewSubscriptionModal/index.tsx
@@ -0,0 +1,340 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import {
+    Button,
+    Checkbox,
+    Modal,
+    MultiSelectInput,
+    RadioInput,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isNotDefined } from '@togglecorp/fujs';
+import {
+    getErrorObject,
+    type ObjectSchema,
+    type PartialForm,
+    requiredCondition,
+    requiredStringCondition,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import {
+    AlertEnumsAndAllCountryListQuery,
+    AlertEnumsAndAllCountryListQueryVariables,
+    AlertEnumsQuery,
+    FilteredAdminListQuery,
+    FilteredAdminListQueryVariables,
+} from '#generated/types/graphql';
+import {
+    stringIdSelector,
+    stringNameSelector,
+} from '#utils/selectors';
+import {
+    FrequencyOption,
+    SubscriptionDetail,
+} from '#views/MySubscription/common';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const ALERT_ENUMS_AND_ALL_COUNTRY = gql`
+query AlertEnumsAndAllCountryList {
+    enums {
+        AlertInfoCertainty {
+            key
+            label
+        }
+        AlertInfoUrgency {
+            key
+            label
+        }
+        AlertInfoSeverity {
+            key
+            label
+        }
+        AlertInfoCategory {
+            key
+            label
+        }
+    }
+    public {
+        id
+        allCountries {
+            name
+            id
+        }
+    }
+}
+`;
+
+const ADMIN_LIST = gql`
+query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
+    public {
+        id
+        admin1s(filters: $filters, pagination: $pagination) {
+            items {
+                id
+                name
+                countryId
+                alertCount
+            }
+        }
+    }
+}
+`;
+
+type AdminOption = NonNullable<NonNullable<NonNullable<FilteredAdminListQuery['public']>['admin1s']>['items']>[number];
+
+type Urgency = NonNullable<AlertEnumsQuery['enums']['AlertInfoUrgency']>[number];
+type Severity = NonNullable<AlertEnumsQuery['enums']['AlertInfoSeverity']>[number];
+type Certainty = NonNullable<AlertEnumsQuery['enums']['AlertInfoCertainty']>[number];
+
+interface AlertFilters {
+    key: string;
+    label: string;
+}
+
+const adminKeySelector = (admin1: AdminOption) => admin1.id;
+const urgencyKeySelector = (urgency: Urgency) => urgency.key;
+const severityKeySelector = (severity: Severity) => severity.key;
+const certaintyKeySelector = (certainty: Certainty) => certainty.key;
+const labelSelector = (alert: AlertFilters) => alert.label;
+
+const frequencyKeySelector = (frequency: FrequencyOption) => frequency.key;
+const frequencyLabelSelector = (frequency: FrequencyOption) => frequency.label;
+
+const frequencyOption: FrequencyOption[] = [
+    { label: 'Daily', key: 'daily' },
+    { label: 'Weekly', key: 'weekly' },
+];
+
+type PartialFormFields = PartialForm<SubscriptionDetail>;
+
+type FormSchema = ObjectSchema<PartialFormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>
+
+const formSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        title: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        urgency: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        severity: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        certainty: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        country: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        admin1: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        sendEmail: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+        frequency: {
+            required: true,
+            requiredValidation: requiredCondition,
+        },
+    }),
+};
+
+interface Props {
+    subscription: SubscriptionDetail;
+    onCloseModal?: () => void;
+}
+
+function NewSubscriptionModal(props: Props) {
+    const {
+        subscription,
+        onCloseModal,
+    } = props;
+
+    const defaultFormValue = useMemo(() => ({
+        title: subscription?.title,
+        urgency: subscription?.urgency,
+        severity: subscription?.severity,
+        certainty: subscription?.certainty,
+        sendEmail: subscription?.sendEmail,
+        frequency: subscription?.frequency,
+        country: subscription?.country,
+        admin1: subscription?.admin1,
+    }), [
+        subscription,
+    ]);
+
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        // setError,
+        // validate,
+    } = useForm(formSchema, { value: defaultFormValue });
+
+    const fieldError = getErrorObject(formError);
+
+    const strings = useTranslation(i18n);
+    const {
+        data: alertEnumsResponse,
+    } = useQuery<AlertEnumsAndAllCountryListQuery, AlertEnumsAndAllCountryListQueryVariables>(
+        ALERT_ENUMS_AND_ALL_COUNTRY,
+    );
+
+    const adminQueryVariables = useMemo<FilteredAdminListQueryVariables>(
+        () => {
+            if (isNotDefined(value.country)) {
+                return {
+                    filters: undefined,
+                    // FIXME: Implement search select input
+                    pagination: {
+                        offset: 0,
+                        limit: 500,
+                    },
+                };
+            }
+
+            return {
+                filters: {
+                    country: { pk: value.country },
+                },
+                // FIXME: Implement search select input
+                pagination: {
+                    offset: 0,
+                    limit: 500,
+                },
+            };
+        },
+        [value.country],
+    );
+
+    const {
+        data: adminResponse,
+    } = useQuery<FilteredAdminListQuery, FilteredAdminListQueryVariables>(
+        ADMIN_LIST,
+        { variables: adminQueryVariables, skip: isNotDefined(value.country) },
+    );
+
+    const subscriptionCreate = useCallback(() => {
+        // eslint-disable-next-line no-console
+        console.info('create');
+    }, []);
+
+    return (
+        <Modal
+            className={styles.subscriptionModal}
+            heading={strings.newSubscriptionHeading}
+            footerContent={(
+                <Button
+                    name={undefined}
+                    onClick={subscriptionCreate}
+                    disabled={isNotDefined(value.title)}
+                >
+                    {strings.createNewSubscription}
+                </Button>
+            )}
+            footerContentClassName={styles.createButton}
+            contentViewType="vertical"
+            spacing="comfortable"
+            onClose={onCloseModal}
+        >
+            <TextInput
+                name="title"
+                label={strings.newSubscriptionTitle}
+                value={value.title}
+                error={fieldError?.title}
+                onChange={setFieldValue}
+                withAsterisk
+            />
+            <div className={styles.filters}>
+                <MultiSelectInput
+                    label={strings.filterUrgencyLabel}
+                    placeholder={strings.filterUrgencyPlaceholder}
+                    name="urgency"
+                    options={alertEnumsResponse?.enums.AlertInfoUrgency}
+                    keySelector={urgencyKeySelector}
+                    labelSelector={labelSelector}
+                    value={value.urgency}
+                    onChange={setFieldValue}
+                />
+                <MultiSelectInput
+                    label={strings.filterSeverityLabel}
+                    placeholder={strings.filterSeverityPlaceholder}
+                    name="severity"
+                    options={alertEnumsResponse?.enums.AlertInfoSeverity}
+                    keySelector={severityKeySelector}
+                    labelSelector={labelSelector}
+                    value={value.severity}
+                    onChange={setFieldValue}
+                />
+                <MultiSelectInput
+                    label={strings.filterCertaintyLabel}
+                    placeholder={strings.filterCertaintyPlaceholder}
+                    name="certainty"
+                    options={alertEnumsResponse?.enums.AlertInfoCertainty}
+                    keySelector={certaintyKeySelector}
+                    labelSelector={labelSelector}
+                    value={value.certainty}
+                    onChange={setFieldValue}
+                />
+                <SelectInput
+                    label={strings.filterCountriesLabel}
+                    placeholder={strings.filterCountriesPlaceholder}
+                    name="country"
+                    options={alertEnumsResponse?.public.allCountries}
+                    keySelector={stringIdSelector}
+                    labelSelector={stringNameSelector}
+                    value={value.country}
+                    onChange={setFieldValue}
+                />
+                <SelectInput
+                    label={strings.filterAdmin1Label}
+                    placeholder={strings.filterAdmin1Placeholder}
+                    name="admin1"
+                    disabled={isNotDefined(value.country)}
+                    options={adminResponse?.public.admin1s.items}
+                    keySelector={adminKeySelector}
+                    labelSelector={stringNameSelector}
+                    value={value.admin1}
+                    onChange={setFieldValue}
+                />
+            </div>
+            <Checkbox
+                label={strings.sendViaEmailLabel}
+                name="sendEmail"
+                value={value.sendEmail}
+                error={fieldError?.sendEmail}
+                onChange={setFieldValue}
+            />
+            <RadioInput
+                name="frequency"
+                options={frequencyOption}
+                keySelector={frequencyKeySelector}
+                labelSelector={frequencyLabelSelector}
+                value={value?.frequency}
+                onChange={setFieldValue}
+                disabled={isNotDefined(value.sendEmail)}
+            />
+        </Modal>
+    );
+}
+
+export default NewSubscriptionModal;
diff --git a/src/views/NewSubscriptionModal/styles.module.css b/src/views/NewSubscriptionModal/styles.module.css
new file mode 100644
index 00000000..7c566bd5
--- /dev/null
+++ b/src/views/NewSubscriptionModal/styles.module.css
@@ -0,0 +1,13 @@
+.subscription-modal {
+    .create-button {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .filters {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+        gap: var(--go-ui-spacing-md);
+    }
+}
\ No newline at end of file
diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json
new file mode 100644
index 00000000..0fe2941f
--- /dev/null
+++ b/src/views/Register/i18n.json
@@ -0,0 +1,20 @@
+{
+    "namespace": "register",
+    "strings": {
+        "registerTitle": "IFRC GO - Register",
+        "registerHeader": "Register",
+        "registerSubHeader": "Staff, members and volunteers of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) are welcome to register for a user account on GO, to access information for the Membership. Other responders and members of the public may browse the public areas of the site without registering for an account.",
+        "registerFirstName": "First Name",
+        "registerLastName": "Last Name",
+        "registerEmail": "Email",
+        "registerCountry": "Country",
+        "registerCity": "City",
+        "registerOrganizationType": "Organization Type",
+        "registerOrganizationName": "Organization Name",
+        "registerPassword": "Password",
+        "registerConfirmPassword": "Confirm Password",
+        "registerSubmit": "Register",
+        "registerAccountPresent": "Already have an account? {loginLink}",
+        "registerLogin": "Login"
+    }
+}
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
new file mode 100644
index 00000000..21c454b4
--- /dev/null
+++ b/src/views/Register/index.tsx
@@ -0,0 +1,306 @@
+import { useState } from 'react';
+import {
+    Button,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { resolveToComponent } from '@ifrc-go/ui/utils';
+import { isTruthyString } from '@togglecorp/fujs';
+import {
+    addCondition,
+    createSubmitHandler,
+    emailCondition,
+    type ObjectSchema,
+    requiredStringCondition,
+    undefinedValue,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import HCaptcha from '#components/Captcha';
+import Link from '#components/Link';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface DefaultFormValue {
+    first_name: string;
+    last_name: string;
+    email: string;
+    password: string;
+    confirm_password: string;
+    country: string;
+    city: string;
+    organization: string;
+    organization_type: string;
+    captcha?:string;
+}
+
+function getPasswordMatchCondition(referenceVal: string | undefined) {
+    return (val: string | undefined) => (
+        isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal
+            ? 'Passwords do not match'
+            : undefined
+    );
+}
+
+const organizationTypes = [
+    { id: '101', key: 'NTLS', value: 'National Society' },
+    { id: '102', key: 'NGO', value: 'Non-Governmental Organization' },
+    { id: '103', key: 'UN', value: 'United Nations Agency' },
+];
+const nationalSocietyOptions = [
+    { id: '201', society_name: 'Red Cross Society' },
+    { id: '202', society_name: 'Red Crescent Society' },
+];
+const countryOptions = [
+    { id: '301', value: 'United States' },
+    { id: '302', value: 'Canada' },
+    { id: '303', value: 'United Kingdom' },
+];
+const whitelistedDomains = [
+    'example.com',
+    'anotherdomain.org',
+    'somedomain.net',
+];
+
+type FormFields = DefaultFormValue;
+
+const keySelector = (option: { id?: string }): string => option.id || '';
+const labelSelector = (option: { value?: string }): string => option.value || '';
+
+type PartialFormFields = Partial<FormFields>;
+type FormSchema = ObjectSchema<PartialFormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const isWhitelistedEmail = (email: string): boolean => {
+    const domain = email.split('@')[1];
+    return whitelistedDomains.includes(domain);
+};
+
+const emailWhitelistValidation = (value: string | undefined) => {
+    if (!isWhitelistedEmail(value || '')) {
+        return 'Email not allowed';
+    }
+    return undefined;
+};
+
+const formSchema: FormSchema = {
+    fields: (value): FormSchemaFields => {
+        let fields: FormSchemaFields = {
+            first_name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            last_name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            email: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [emailCondition, emailWhitelistValidation],
+            },
+            password: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            confirm_password: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                forceValue: undefinedValue,
+                validations: [getPasswordMatchCondition(value?.password)],
+            },
+            organization: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            organization_type: {
+                required: true,
+            },
+            country: {
+                required: true,
+            },
+            city: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            captcha: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+        };
+        fields = addCondition(
+            fields,
+            value,
+            ['password'],
+            ['confirm_password'],
+            (val) => ({
+                confirm_password: {
+                    required: true,
+                    requiredValidation: requiredStringCondition,
+                    forceValue: undefinedValue,
+                    validations: [getPasswordMatchCondition(val?.password)],
+                },
+            }),
+        );
+
+        return fields;
+    },
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    const [formValue] = useState<PartialFormFields>({});
+
+    const {
+        value,
+        setFieldValue,
+        setError,
+        validate,
+    } = useForm(formSchema, {
+        value: formValue,
+    });
+    const fieldError: PartialFormFields = {};
+    const handleFormSubmit = createSubmitHandler(
+        validate,
+        setError,
+        // FIXME: Add Submit logic here
+        () => {},
+    );
+    const isNationalSociety = formValue?.organization_type === 'NTLS';
+
+    const loginInfo = resolveToComponent(strings.registerAccountPresent, {
+        loginLink: (
+            <Link
+                to="login"
+                withUnderline
+            >
+                {strings.registerLogin}
+            </Link>
+        ),
+    });
+
+    return (
+        <Page
+            className={styles.register}
+            title={strings.registerTitle}
+            heading={strings.registerHeader}
+            description={strings.registerSubHeader}
+            mainSectionClassName={styles.mainSection}
+        >
+            <div className={styles.form}>
+                <TextInput
+                    name="first_name"
+                    label={strings.registerFirstName}
+                    value={value.first_name}
+                    onChange={setFieldValue}
+                    error={fieldError?.first_name}
+                    withAsterisk
+                />
+                <TextInput
+                    name="last_name"
+                    label={strings.registerLastName}
+                    value={value.last_name}
+                    onChange={setFieldValue}
+                    error={fieldError?.last_name}
+                    withAsterisk
+                />
+                <TextInput
+                    className={styles.fullSizeInput}
+                    name="email"
+                    label={strings.registerEmail}
+                    value={value.email}
+                    onChange={setFieldValue}
+                    error={fieldError?.email}
+                    withAsterisk
+                />
+                <TextInput
+                    name="password"
+                    type="password"
+                    label={strings.registerPassword}
+                    value={value.password}
+                    onChange={setFieldValue}
+                    error={fieldError?.password}
+                    withAsterisk
+                />
+                <TextInput
+                    name="confirm_password"
+                    type="password"
+                    label={strings.registerConfirmPassword}
+                    value={value.confirm_password}
+                    onChange={setFieldValue}
+                    error={fieldError?.confirm_password}
+                    withAsterisk
+                />
+                <div className={styles.formBorder} />
+                <SelectInput
+                    label={strings.registerOrganizationType}
+                    name="organization_type"
+                    options={organizationTypes}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    value={value.organization_type}
+                    onChange={setFieldValue}
+                    error={fieldError?.organization_type}
+                />
+                <SelectInput
+                    label={strings.registerCountry}
+                    name="country"
+                    options={countryOptions}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    value={value.country}
+                    onChange={setFieldValue}
+                    error={fieldError?.country}
+                />
+                <TextInput
+                    name="city"
+                    label={strings.registerCity}
+                    value={value.city}
+                    onChange={setFieldValue}
+                    error={fieldError?.city}
+                />
+                {isNationalSociety ? (
+                    <SelectInput
+                        label={strings.registerOrganizationName}
+                        name="organization"
+                        options={nationalSocietyOptions}
+                        keySelector={keySelector}
+                        labelSelector={(option: { society_name: string }) => option.society_name}
+                        value={value.organization}
+                        onChange={setFieldValue}
+                        error={fieldError?.organization}
+                    />
+                ) : (
+                    <TextInput
+                        name="organization"
+                        label={strings.registerOrganizationName}
+                        value={value.organization}
+                        onChange={setFieldValue}
+                        error={fieldError?.organization}
+                    />
+                )}
+            </div>
+            <div className={styles.actions}>
+                <HCaptcha
+                    name="captcha"
+                    onChange={setFieldValue}
+                />
+                <Button
+                    name={undefined}
+                    onClick={handleFormSubmit}
+                >
+                    {strings.registerSubmit}
+                </Button>
+                <div className={styles.login}>
+                    {loginInfo}
+                </div>
+            </div>
+        </Page>
+    );
+}
+
+Component.displayName = 'Register';
diff --git a/src/views/Register/styles.module.css b/src/views/Register/styles.module.css
new file mode 100644
index 00000000..5c4e38fe
--- /dev/null
+++ b/src/views/Register/styles.module.css
@@ -0,0 +1,40 @@
+.register {
+    .main-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-2xl);
+        align-items: center;
+
+        .form {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+            grid-gap: var(--go-ui-spacing-lg);
+            background-color: var(--go-ui-color-white);
+            width: 100%;
+            max-width: var(--go-ui-width-content-max);
+
+            .full-size-input {
+                grid-column: 1 / -1;
+            }
+
+            .form-border {
+                grid-column: 1 / -1;
+                background-color: var(--go-ui-color-separator);
+                height: var(--go-ui-width-separator-sm);
+            }
+        }
+
+        .actions {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+            align-items: center;
+
+            .login {
+                display: flex;
+                gap: var(--go-ui-spacing-xs);
+                align-items: center;
+            }
+        }
+    }
+}