diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
index f0f856f2..2ba87eb8 100644
--- a/src/App/routes/index.tsx
+++ b/src/App/routes/index.tsx
@@ -214,6 +214,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,
@@ -288,6 +300,7 @@ const wrappedRoutes = {
     resendValidationEmail,
     mySubscription,
     cookiePolicy,
+    register,
     historicalAlerts,
     subscriptionDetail,
 };
diff --git a/src/components/Navbar/i18n.json b/src/components/Navbar/i18n.json
index 117178a3..97ad5041 100644
--- a/src/components/Navbar/i18n.json
+++ b/src/components/Navbar/i18n.json
@@ -3,6 +3,7 @@
     "strings": {
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
+        "appRegister":"Register",
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 06221e83..ca9ac0e5 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -75,7 +75,6 @@ function Navbar(props: Props) {
             },
         },
     );
-
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -115,12 +114,20 @@ function Navbar(props: Props) {
                         {strings.appResources}
                     </NavigationTab>
                     {!isAuthenticated && (
-                        <Link
-                            variant="primary"
-                            to="login"
-                        >
-                            {strings.appLogin}
-                        </Link>
+                        <>
+                            <Link
+                                variant="primary"
+                                to="login"
+                            >
+                                {strings.appLogin}
+                            </Link>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
                     )}
                     {isAuthenticated && (
                         <Button
diff --git a/src/components/NonFiledError/i18n.json b/src/components/NonFiledError/i18n.json
new file mode 100644
index 00000000..557f515b
--- /dev/null
+++ b/src/components/NonFiledError/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "fallbackMessage":"Please correct all the errors before submission!"
+    }
+}
diff --git a/src/components/NonFiledError/index.tsx b/src/components/NonFiledError/index.tsx
new file mode 100644
index 00000000..8602c693
--- /dev/null
+++ b/src/components/NonFiledError/index.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { AlertLineIcon } from '@ifrc-go/icons';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    _cs,
+    isFalsyString,
+    isNotDefined,
+} from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    Error,
+    getErrorObject,
+    nonFieldError,
+} from '@togglecorp/toggle-form';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export interface Props<T> {
+    className?: string;
+    error?: Error<T>;
+    withFallbackError?: boolean;
+}
+
+function NonFieldError<T>(props: Props<T>) {
+    const {
+        className,
+        error,
+        withFallbackError,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const errorObject = useMemo(() => getErrorObject(error), [error]);
+
+    if (isNotDefined(errorObject)) {
+        return null;
+    }
+
+    const hasError = analyzeErrors(errorObject);
+    if (!hasError) {
+        return null;
+    }
+
+    const stringError = errorObject?.[nonFieldError] || (
+        withFallbackError ? strings.fallbackMessage : undefined);
+
+    if (isFalsyString(stringError)) {
+        return null;
+    }
+
+    return (
+        <div className={_cs(
+            styles.nonFieldError,
+            className,
+        )}
+        >
+            <AlertLineIcon className={styles.icon} />
+            <div>
+                {stringError}
+            </div>
+        </div>
+    );
+}
+
+export default NonFieldError;
diff --git a/src/components/NonFiledError/styles.module.css b/src/components/NonFiledError/styles.module.css
new file mode 100644
index 00000000..b3e469f0
--- /dev/null
+++ b/src/components/NonFiledError/styles.module.css
@@ -0,0 +1,21 @@
+.non-field-error {
+    display: inline-flex;
+    gap: var(--go-ui-spacing-sm);
+    align-items: baseline;
+    animation: flash var(--go-ui-duration-animation-fast) ease-in-out;
+    animation-delay: var(--go-ui-duration-animation-slow);
+    color: var(--go-ui-color-red);
+    font-size: var(--go-ui-font-size-lg);
+    font-weight: var(--go-ui-font-weight-medium);
+
+    .icon {
+        flex-shrink: 0;
+        /* font-size: var(--go-ui-height-icon-multiplier); */
+    }
+}
+
+@keyframes flash {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
diff --git a/src/utils/errorTransform.ts b/src/utils/errorTransform.ts
new file mode 100644
index 00000000..a8a15385
--- /dev/null
+++ b/src/utils/errorTransform.ts
@@ -0,0 +1,86 @@
+import {
+    isDefined,
+    isNotDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+import { nonFieldError } from '@togglecorp/toggle-form';
+
+export interface Error {
+    [ nonFieldError]?: string | undefined;
+    [key: string]: string | Error | undefined;
+}
+
+export interface ObjectError {
+    // clientId is sent by the server for bulk updates
+    clientId: string | undefined;
+
+    field: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+    arrayErrors?: (ArrayError | null)[];
+}
+
+interface ArrayError {
+    clientId: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+}
+
+function transformObject(errors: ObjectError[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+
+    const topLevelError = errors.find((error) => error.field === 'nonFieldErrors');
+    const finalNonFieldErrors = topLevelError?.messages;
+
+    const fieldErrors = errors.filter((error) => error.field !== 'nonFieldErrors');
+    const finalFieldErrors: Error = listToMap(
+        fieldErrors,
+        (error) => error.field,
+        (error) => {
+            if (isDefined(error.messages)) {
+                return error.messages;
+            }
+            const objectErrors = isDefined(error.objectErrors)
+                ? transformObject(error.objectErrors)
+                : undefined;
+
+            const arrayErrors = isDefined(isDefined(error.arrayErrors))
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                ? transformArray(error.arrayErrors)
+                : undefined;
+
+            if (!objectErrors && !arrayErrors) {
+                return undefined;
+            }
+            return { ...objectErrors, ...arrayErrors };
+        },
+    );
+
+    return {
+        [nonFieldError]: finalNonFieldErrors,
+        ...finalFieldErrors,
+    };
+}
+
+function transformArray(errors: (ArrayError | null)[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+    const filteredErrors = errors.filter(isDefined);
+
+    const topLevelError = filteredErrors.find((error) => error.clientId === 'nonMemberErrors');
+    const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
+
+    return {
+        [nonFieldError]: topLevelError?.messages,
+        ...listToMap(
+            memberErrors,
+            (error) => error.clientId,
+            (error) => transformObject(error.objectErrors),
+        ),
+    };
+}
+
+export const transformToFormError = transformObject;
diff --git a/src/utils/user.ts b/src/utils/user.ts
deleted file mode 100644
index 59f9315a..00000000
--- a/src/utils/user.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-    isNotDefined,
-    isTruthyString,
-} from '@togglecorp/fujs';
-
-interface User {
-    firstName: string | undefined | null;
-    lastName: string | undefined | null;
-    displayName: string;
-}
-
-// eslint-disable-next-line import/prefer-default-export
-export function getUserName(user: User | undefined) {
-    if (isNotDefined(user)) {
-        return 'Unknown user';
-    }
-
-    const name = [user.firstName, user.lastName].filter(isTruthyString).join(' ');
-    if (isTruthyString(name)) {
-        return name;
-    }
-
-    // NOTE: Username can also be email
-    // so stripping out the domain part
-    const index = user.displayName.indexOf('@');
-    if (index === -1) {
-        return user.displayName;
-    }
-
-    return user.displayName.substring(0, index);
-}
diff --git a/src/views/Login/i18n.json b/src/views/Login/i18n.json
index 56c5a2f3..98a1f050 100644
--- a/src/views/Login/i18n.json
+++ b/src/views/Login/i18n.json
@@ -3,7 +3,7 @@
     "strings": {
         "loginTitle":"IFRC Alert-Hub - Login",
         "loginHeader":"Login",
-        "loginSubHeader":"If you are staff, member or volunteer of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) login with you email and password.",
+        "loginSubHeader":"If you are staff, member or volunteer of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) login with your IFRC AlertHub account email and password.",
         "loginEmailUsername":"Email",
         "loginPassword":"Password",
         "loginRecoverTitle":"Recover password",
diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json
new file mode 100644
index 00000000..5d3b31b5
--- /dev/null
+++ b/src/views/Register/i18n.json
@@ -0,0 +1,22 @@
+{
+    "namespace": "register",
+    "strings": {
+        "registerTitle": "IFRC Alert-Hub - Register",
+        "registerHeader": "Register",
+        "registerSubHeader": "The IFRC Alert Hub platform is designed for staff, members, and volunteers of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC). Please register for a user account to access information for logged in users. 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",
+        "registrationSuccess": "Successfully created a user!",
+        "registrationFailure": "Sorry could not register new user right now!"
+    }
+}
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
new file mode 100644
index 00000000..d196a229
--- /dev/null
+++ b/src/views/Register/index.tsx
@@ -0,0 +1,272 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    gql,
+    useMutation,
+} from '@apollo/client';
+import {
+    Button,
+    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,
+    getErrorObject,
+    nonFieldError,
+    type ObjectSchema,
+    removeNull,
+    requiredStringCondition,
+    undefinedValue,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import HCaptcha from '#components/Captcha';
+import Link from '#components/Link';
+import NonFieldError from '#components/NonFiledError';
+import Page from '#components/Page';
+import {
+    RegisterMutation,
+    RegisterMutationVariables,
+    UserRegisterInput,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import { transformToFormError } from '#utils/errorTransform';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const REGISTER_MUTATION = gql`
+    mutation Register($data: UserRegisterInput!) {
+        public {
+            register(data: $data){
+                errors
+                ok
+            }
+        }
+    }
+`;
+
+function getPasswordMatchCondition(referenceVal: string | undefined) {
+    function passwordMatchCondition(val: string | undefined) {
+        if (isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal) {
+            return 'Passwords do not match';
+        }
+        return undefined;
+    }
+
+    return passwordMatchCondition;
+}
+
+type PartialFormFields = Partial<UserRegisterInput & { confirmPassword: string }>;
+type FormSchema = ObjectSchema<PartialFormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const formSchema: FormSchema = {
+    fields: (value): FormSchemaFields => {
+        let fields: FormSchemaFields = {
+            firstName: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            lastName: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            email: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [emailCondition],
+            },
+            password: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            captcha: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+        };
+        fields = addCondition(
+            fields,
+            value,
+            ['password'],
+            ['confirmPassword'],
+            (val) => ({
+                confirmPassword: {
+                    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 alert = useAlert();
+    const navigate = useNavigate();
+    const [formValue] = useState<PartialFormFields>({});
+    const {
+        value,
+        setFieldValue,
+        setError,
+        validate,
+        error: fieldError,
+    } = useForm(formSchema, {
+        value: formValue,
+    });
+
+    const error = getErrorObject(fieldError);
+    const [
+        triggerRegister,
+        {
+            loading: registerPending,
+        },
+    ] = useMutation<RegisterMutation, RegisterMutationVariables>(REGISTER_MUTATION, {
+        onCompleted: (response) => {
+            const { public: publicRes } = response;
+            if (!publicRes) {
+                return;
+            }
+            const { register: registerRes } = publicRes;
+            if (!registerRes) {
+                return;
+            }
+            const { errors, ok } = registerRes;
+
+            if (errors) {
+                const formError = transformToFormError(removeNull(
+                    errors,
+                ));
+                setError(formError);
+            } else if (ok) {
+                navigate('/login');
+                alert.show(
+                    strings.registrationSuccess,
+                    { variant: 'success' },
+                );
+            }
+        },
+        onError: (errors) => {
+            setError({
+                [nonFieldError]: errors.message,
+            });
+            alert.show(
+                strings.registrationFailure,
+                { variant: 'danger' },
+            );
+        },
+    });
+
+    const handleFormSubmit = createSubmitHandler(
+        validate,
+        setError,
+        (finalValue) => {
+            const val = finalValue as UserRegisterInput;
+            triggerRegister({
+                variables: {
+                    data: {
+                        captcha: val.captcha,
+                        email: val.email,
+                        firstName: val.firstName,
+                        lastName: val.lastName,
+                        password: val.password,
+                    },
+                },
+            });
+        },
+    );
+    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}>
+                <NonFieldError error={error} />
+                <TextInput
+                    name="firstName"
+                    label={strings.registerFirstName}
+                    value={value.firstName}
+                    onChange={setFieldValue}
+                    error={error?.firstName}
+                    withAsterisk
+                />
+                <TextInput
+                    name="lastName"
+                    label={strings.registerLastName}
+                    value={value.lastName}
+                    onChange={setFieldValue}
+                    error={error?.lastName}
+                    withAsterisk
+                />
+                <TextInput
+                    name="email"
+                    label={strings.registerEmail}
+                    value={value.email}
+                    onChange={setFieldValue}
+                    error={error?.email}
+                    withAsterisk
+                />
+                <TextInput
+                    name="password"
+                    type="password"
+                    label={strings.registerPassword}
+                    value={value.password}
+                    onChange={setFieldValue}
+                    error={error?.password}
+                    withAsterisk
+                />
+                <TextInput
+                    name="confirmPassword"
+                    type="password"
+                    label={strings.registerConfirmPassword}
+                    value={value.confirmPassword}
+                    onChange={setFieldValue}
+                    error={error?.confirmPassword}
+                    withAsterisk
+                />
+            </div>
+            <div className={styles.actions}>
+                <HCaptcha
+                    name="captcha"
+                    onChange={setFieldValue}
+                />
+                <Button
+                    name={undefined}
+                    onClick={handleFormSubmit}
+                    disabled={registerPending}
+                >
+                    {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..a4a53686
--- /dev/null
+++ b/src/views/Register/styles.module.css
@@ -0,0 +1,30 @@
+.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);
+        }
+
+        .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;
+            }
+        }
+    }
+}