diff --git a/frontend/src/common/utils/i18n/resources/en/auth.json b/frontend/src/common/utils/i18n/resources/en/auth.json
index 2caf65e8..27fcb35e 100644
--- a/frontend/src/common/utils/i18n/resources/en/auth.json
+++ b/frontend/src/common/utils/i18n/resources/en/auth.json
@@ -20,7 +20,7 @@
     "password": "Password",
     "remember-me": "Remember me",
     "username": "Username",
-    "email": "Email Address",
+    "email": "Email",
     "first-name": "First Name",
     "last-name": "Last Name",
     "confirm-password": "Confirm Password",
@@ -30,6 +30,7 @@
   "signin.title": "Log in",
   "signin.subtitle": "Login to access MedReport AI",
   "signup": "Sign Up",
+  "signup.button": "Create Account",
   "signout": "Sign Out",
   "loading": "Loading...",
   "signin.loading": "Signing in...",
diff --git a/frontend/src/pages/Auth/SignUp/SignUpPage.scss b/frontend/src/pages/Auth/SignUp/SignUpPage.scss
index efe419ee..7a04799b 100644
--- a/frontend/src/pages/Auth/SignUp/SignUpPage.scss
+++ b/frontend/src/pages/Auth/SignUp/SignUpPage.scss
@@ -1,13 +1,38 @@
 .ls-signup-page {
-  .ls-signup-page__container {
-    max-width: 32rem;
+  &__content {
+    --padding-start: 0;
+    --padding-end: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &__container {
     display: flex;
     flex-direction: column;
-    padding-top: 1rem;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+    padding: 1rem;
   }
 
-  .ls-signup-page__form {
+  &__form {
     width: 100%;
+    max-width: 400px;
+    border-radius: 16px;
+    background-color: white;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+    overflow: hidden;
   }
 }
diff --git a/frontend/src/pages/Auth/SignUp/SignUpPage.tsx b/frontend/src/pages/Auth/SignUp/SignUpPage.tsx
index fc12cf7e..4377e850 100644
--- a/frontend/src/pages/Auth/SignUp/SignUpPage.tsx
+++ b/frontend/src/pages/Auth/SignUp/SignUpPage.tsx
@@ -1,12 +1,11 @@
 import { IonContent, IonPage } from '@ionic/react';
-import { useTranslation } from 'react-i18next';
 
 import './SignUpPage.scss';
 import { PropsWithTestId } from 'common/components/types';
 import ProgressProvider from 'common/providers/ProgressProvider';
-import Header from 'common/components/Header/Header';
 import SignUpForm from './components/SignUpForm';
 import Container from 'common/components/Content/Container';
+import splashBg from 'assets/Splash.png';
 
 /**
  * Properties for the `SignUpPage` component.
@@ -19,15 +18,15 @@ interface SignUpPageProps extends PropsWithTestId {}
  * @returns {JSX.Element} JSX
  */
 const SignUpPage = ({ testid = 'page-signup' }: SignUpPageProps): JSX.Element => {
-  const { t } = useTranslation();
-
   return (
     <IonPage className="ls-signup-page" data-testid={testid}>
       <ProgressProvider>
-        <Header title={t('signup', { ns: 'auth' })} />
-
-        <IonContent fullscreen className="ion-padding" scrollY={true}>
-          <Container className="ls-signup-page__container" fixed>
+        <IonContent fullscreen scrollY={true} className="ls-signup-page__content">
+          <div
+            className="ls-signup-page__background"
+            style={{ backgroundImage: `url(${splashBg})` }}
+          />
+          <Container className="ls-signup-page__container">
             <SignUpForm className="ls-signup-page__form" />
           </Container>
         </IonContent>
diff --git a/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss b/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss
index 6178c767..c6d0ffdc 100644
--- a/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss
+++ b/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss
@@ -1,31 +1,87 @@
 .ls-signup-form {
-  padding: 1rem;
+  width: 100%;
 
-  .ls-signup-form__input {
-    margin-bottom: 1rem;
+  &__content {
+    padding: 1.5rem;
   }
 
-  .ls-signup-form__button {
-    margin-top: 1rem;
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+    color: #333;
   }
 
-  &__password-guidelines {
-    margin-top: -0.5rem;
+  &__subtitle {
+    font-size: 0.9rem;
+    margin: 0 0 1.5rem;
+    color: #666;
+  }
+
+  &__input {
     margin-bottom: 1rem;
-    font-size: 0.85rem;
 
-    &-header {
-      margin-bottom: 0.25rem;
+    ion-input {
+      --border-radius: 8px;
+      --border-width: 1px;
+      --border-color: #d1d1d1;
+      --padding-start: 12px;
+      --padding-end: 12px;
+      --padding-top: 12px;
+      --padding-bottom: 12px;
+      --background: #fff;
+    }
+  }
+
+  &__button {
+    margin-top: 1.5rem;
+
+    --border-radius: 8px;
+    --background: #734bff;
+    --background-activated: #5a3acc;
+    --background-focused: #5a3acc;
+    --background-hover: #5a3acc;
+    --color: white;
+
+    font-weight: 500;
+    height: 48px;
+    text-transform: none;
+
+    &[disabled] {
+      --background: #e6e6e6;
+      --color: #a0a0a0;
+
+      opacity: 1;
+    }
+  }
+
+  &__login-link {
+    text-align: center;
+    margin-top: 1.25rem;
+    font-size: 0.9rem;
+
+    a {
+      color: #734bff;
       font-weight: 500;
+      text-decoration: none;
     }
+  }
+
+  &__password-guidelines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: -0.25rem;
+    margin-bottom: 1rem;
+    font-size: 0.85rem;
 
     &-item {
       display: flex;
       align-items: center;
-      margin-bottom: 0.125rem;
 
       &-icon {
         margin-right: 0.375rem;
+        font-size: 1.1rem;
       }
 
       &-valid {
@@ -33,7 +89,7 @@
       }
 
       &-invalid {
-        color: var(--ion-color-medium);
+        color: #c5c5c5;
       }
     }
   }
diff --git a/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx b/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx
index 0f63f936..50291afa 100644
--- a/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx
+++ b/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx
@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { Form, Formik, useFormikContext } from 'formik';
 import { object, string, ref } from 'yup';
 import { useTranslation } from 'react-i18next';
-import { checkmarkCircle, closeCircle } from 'ionicons/icons';
+import { checkmarkCircle, ellipseOutline } from 'ionicons/icons';
 
 import './SignUpForm.scss';
 import { BaseComponentProps } from 'common/components/types';
@@ -21,7 +21,6 @@ import { AuthError } from 'common/models/auth';
 import { useSignUp } from 'common/hooks/useAuth';
 import { useProgress } from 'common/hooks/useProgress';
 import Input from 'common/components/Input/Input';
-import HeaderRow from 'common/components/Text/HeaderRow';
 import { formatAuthError } from 'common/utils/auth-errors';
 import AuthErrorDisplay from 'common/components/Auth/AuthErrorDisplay';
 import AuthLoadingIndicator from 'common/components/Auth/AuthLoadingIndicator';
@@ -63,7 +62,7 @@ const PasswordGuidelines = () => {
         }`}
       >
         <IonIcon
-          icon={isValid ? checkmarkCircle : closeCircle}
+          icon={isValid ? checkmarkCircle : ellipseOutline}
           className="ls-signup-form__password-guidelines-item-icon"
         />
         <span>{text}</span>
@@ -73,13 +72,10 @@ const PasswordGuidelines = () => {
 
   return (
     <div className="ls-signup-form__password-guidelines">
-      <div className="ls-signup-form__password-guidelines-header">
-        {t('password-requirements', { ns: 'auth' })}
-      </div>
       {renderGuideline(hasMinLength, t('validation.min-length', { length: 8, ns: 'auth' }))}
+      {renderGuideline(hasSpecialChar, t('validation.special-char', { ns: 'auth' }))}
       {renderGuideline(hasUppercase, t('validation.uppercase', { ns: 'auth' }))}
       {renderGuideline(hasNumber, t('validation.number', { ns: 'auth' }))}
-      {renderGuideline(hasSpecialChar, t('validation.special-char', { ns: 'auth' }))}
     </div>
   );
 };
@@ -176,91 +172,97 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
         }}
         validationSchema={validationSchema}
       >
-        {({ dirty, isSubmitting }) => (
+        {({ dirty, isSubmitting, isValid }) => (
           <Form data-testid={`${testid}-form`}>
-            <HeaderRow border>
-              <div>{t('signup', { ns: 'auth' })}</div>
-            </HeaderRow>
+            <div className="ls-signup-form__content">
+              <h2 className="ls-signup-form__title">{t('signup', { ns: 'auth' })}</h2>
+              <p className="ls-signup-form__subtitle">
+                {t('please-fill-details', {
+                  ns: 'auth',
+                  defaultValue: 'Please fill in your personal details',
+                })}
+              </p>
 
-            <Input
-              name="email"
-              label={t('label.email', { ns: 'auth' })}
-              labelPlacement="stacked"
-              maxlength={50}
-              autocomplete="email"
-              className="ls-signup-form__input"
-              ref={focusInput}
-              data-testid={`${testid}-field-email`}
-              type="email"
-            />
+              <Input
+                name="firstName"
+                label={t('label.first-name', { ns: 'auth' })}
+                labelPlacement="stacked"
+                maxlength={50}
+                autocomplete="given-name"
+                className="ls-signup-form__input"
+                data-testid={`${testid}-field-first-name`}
+              />
 
-            <Input
-              name="firstName"
-              label={t('label.first-name', { ns: 'auth' })}
-              labelPlacement="stacked"
-              maxlength={50}
-              autocomplete="given-name"
-              className="ls-signup-form__input"
-              data-testid={`${testid}-field-first-name`}
-            />
+              <Input
+                name="lastName"
+                label={t('label.last-name', { ns: 'auth' })}
+                labelPlacement="stacked"
+                maxlength={50}
+                autocomplete="family-name"
+                className="ls-signup-form__input"
+                data-testid={`${testid}-field-last-name`}
+              />
 
-            <Input
-              name="lastName"
-              label={t('label.last-name', { ns: 'auth' })}
-              labelPlacement="stacked"
-              maxlength={50}
-              autocomplete="family-name"
-              className="ls-signup-form__input"
-              data-testid={`${testid}-field-last-name`}
-            />
+              <Input
+                name="email"
+                label={t('label.email', { ns: 'auth' })}
+                labelPlacement="stacked"
+                maxlength={50}
+                autocomplete="email"
+                className="ls-signup-form__input"
+                ref={focusInput}
+                data-testid={`${testid}-field-email`}
+                type="email"
+              />
 
-            <Input
-              type="password"
-              name="password"
-              label={t('label.password', { ns: 'auth' })}
-              labelPlacement="stacked"
-              maxlength={30}
-              autocomplete="new-password"
-              className="ls-signup-form__input"
-              data-testid={`${testid}-field-password`}
-            >
-              <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
-            </Input>
+              <Input
+                type="password"
+                name="password"
+                label={t('label.password', { ns: 'auth' })}
+                labelPlacement="stacked"
+                maxlength={30}
+                autocomplete="new-password"
+                className="ls-signup-form__input"
+                data-testid={`${testid}-field-password`}
+              >
+                <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
+              </Input>
 
-            <PasswordGuidelines />
+              <Input
+                type="password"
+                name="confirmPassword"
+                label={t('label.confirm-password', { ns: 'auth' })}
+                labelPlacement="stacked"
+                maxlength={30}
+                autocomplete="new-password"
+                className="ls-signup-form__input"
+                data-testid={`${testid}-field-confirm-password`}
+              >
+                <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
+              </Input>
 
-            <Input
-              type="password"
-              name="confirmPassword"
-              label={t('label.confirm-password', { ns: 'auth' })}
-              labelPlacement="stacked"
-              maxlength={30}
-              autocomplete="new-password"
-              className="ls-signup-form__input"
-              data-testid={`${testid}-field-confirm-password`}
-            >
-              <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
-            </Input>
+              <PasswordGuidelines />
 
-            <IonButton
-              type="submit"
-              color="primary"
-              className="ls-signup-form__button"
-              expand="block"
-              disabled={isSubmitting || !dirty || isSignUpLoading || isLoading}
-              data-testid={`${testid}-button-submit`}
-            >
-              {t('signup', { ns: 'auth' })}
-            </IonButton>
+              <IonButton
+                type="submit"
+                color="primary"
+                className="ls-signup-form__button"
+                expand="block"
+                disabled={isSubmitting || !isValid || !dirty || isSignUpLoading || isLoading}
+                data-testid={`${testid}-button-submit`}
+              >
+                {t('signup.button', { ns: 'auth' })}
+              </IonButton>
 
-            <IonRow className="ion-text-center ion-padding-top">
-              <IonCol>
-                <IonText color="medium">
-                  {t('already-have-account', { ns: 'auth' })}{' '}
-                  <a href="/auth/signin">{t('signin', { ns: 'auth' })}</a>
-                </IonText>
-              </IonCol>
-            </IonRow>
+              <IonRow className="ion-text-center ion-padding-top">
+                <IonCol>
+                  <IonText color="medium">
+                    {t('already-have-account', { ns: 'auth' })}{' '}
+                    <a href="/auth/signin">{t('signin', { ns: 'auth' })}</a>
+                  </IonText>
+                </IonCol>
+              </IonRow>
+            </div>
           </Form>
         )}
       </Formik>