diff --git a/src/stories/WithOIDCAuthContext.tsx b/src/stories/WithOIDCAuthContext.tsx
new file mode 100644
index 000000000..aadf04e49
--- /dev/null
+++ b/src/stories/WithOIDCAuthContext.tsx
@@ -0,0 +1,22 @@
+import { StoryFn } from '@storybook/react'
+import { AuthContext } from 'react-oauth2-code-pkce'
+import { AuthContextMother } from '@tests/component/auth/AuthContextMother'
+
+export const WithOIDCAuthContext = (Story: StoryFn) => {
+  return (
+    <AuthContext.Provider
+      value={{
+        token: AuthContextMother.createToken(),
+        idToken: AuthContextMother.createToken(),
+        logIn: () => {},
+        logOut: () => {},
+        loginInProgress: false,
+        tokenData: AuthContextMother.createTokenData(),
+        idTokenData: AuthContextMother.createTokenData(),
+        error: null,
+        login: () => {} // 👈 deprecated
+      }}>
+      <Story />
+    </AuthContext.Provider>
+  )
+}
diff --git a/src/stories/shared-mock-repositories/info/DataverseInfoMockLoadingkRepository.ts b/src/stories/shared-mock-repositories/info/DataverseInfoMockLoadingkRepository.ts
new file mode 100644
index 000000000..b6916f67a
--- /dev/null
+++ b/src/stories/shared-mock-repositories/info/DataverseInfoMockLoadingkRepository.ts
@@ -0,0 +1,13 @@
+import { DataverseInfoMockRepository } from './DataverseInfoMockRepository'
+import { DataverseVersion } from '@/info/domain/models/DataverseVersion'
+import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
+
+export class DataverseInfoMockLoadingRepository implements DataverseInfoMockRepository {
+  getVersion(): Promise<DataverseVersion> {
+    return new Promise(() => {})
+  }
+
+  getTermsOfUse(): Promise<TermsOfUse> {
+    return new Promise(() => {})
+  }
+}
diff --git a/src/stories/shared-mock-repositories/info/DataverseInfoMockRepository.ts b/src/stories/shared-mock-repositories/info/DataverseInfoMockRepository.ts
new file mode 100644
index 000000000..7e0671c69
--- /dev/null
+++ b/src/stories/shared-mock-repositories/info/DataverseInfoMockRepository.ts
@@ -0,0 +1,23 @@
+import { DataverseVersion } from '@/info/domain/models/DataverseVersion'
+import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
+import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
+import { DataverseVersionMother } from '@tests/component/info/models/DataverseVersionMother'
+import { TermsOfUseMother } from '@tests/component/info/models/TermsOfUseMother'
+
+export class DataverseInfoMockRepository implements DataverseInfoRepository {
+  getVersion(): Promise<DataverseVersion> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(DataverseVersionMother.create())
+      }, 1_000)
+    })
+  }
+
+  getTermsOfUse(): Promise<TermsOfUse> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(TermsOfUseMother.create())
+      }, 1_000)
+    })
+  }
+}
diff --git a/src/stories/sign-up/SignUp.stories.tsx b/src/stories/sign-up/SignUp.stories.tsx
new file mode 100644
index 000000000..6eab0658d
--- /dev/null
+++ b/src/stories/sign-up/SignUp.stories.tsx
@@ -0,0 +1,39 @@
+import type { StoryObj, Meta } from '@storybook/react'
+import { WithLayout } from '../WithLayout'
+import { WithI18next } from '../WithI18next'
+import { SignUp } from '@/sections/sign-up/SignUp'
+import { DataverseInfoMockRepository } from '../shared-mock-repositories/info/DataverseInfoMockRepository'
+import { DataverseInfoMockLoadingRepository } from '../shared-mock-repositories/info/DataverseInfoMocLoadingkRepository'
+import { WithOIDCAuthContext } from '../WithOIDCAuthContext'
+
+// TODO:ME - After implementing register use case in js-dataverse, we should mock the register function here also.
+
+const meta: Meta<typeof SignUp> = {
+  title: 'Pages/Sign Up',
+  component: SignUp,
+  decorators: [WithI18next, WithLayout, WithOIDCAuthContext],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
+}
+export default meta
+type Story = StoryObj<typeof SignUp>
+
+export const ValidTokenWithNotLinkedAccount: Story = {
+  render: () => (
+    <SignUp
+      dataverseInfoRepository={new DataverseInfoMockRepository()}
+      hasValidTokenButNotLinkedAccount
+    />
+  )
+}
+
+export const Loading: Story = {
+  render: () => (
+    <SignUp
+      dataverseInfoRepository={new DataverseInfoMockLoadingRepository()}
+      hasValidTokenButNotLinkedAccount
+    />
+  )
+}
diff --git a/tests/component/auth/AuthContextMother.ts b/tests/component/auth/AuthContextMother.ts
new file mode 100644
index 000000000..f5e231176
--- /dev/null
+++ b/tests/component/auth/AuthContextMother.ts
@@ -0,0 +1,37 @@
+export class AuthContextMother {
+  static createToken() {
+    return 'some.fake.token'
+  }
+
+  static createTokenData() {
+    return {
+      exp: 1732803352,
+      iat: 1732803052,
+      auth_time: 1732799407,
+      jti: 'some-fake-jti-number',
+      iss: 'http://localhost:8000/realms/test',
+      aud: 'account',
+      sub: 'some-fake-sub-number',
+      typ: 'Bearer',
+      azp: 'test',
+      session_state: 'some-fake-session-state-number',
+      acr: '0',
+      realm_access: {
+        roles: ['default-roles-test', 'offline_access', 'uma_authorization']
+      },
+      resource_access: {
+        account: {
+          roles: ['manage-account', 'manage-account-links', 'view-profile']
+        }
+      },
+      scope: 'openid profile email',
+      sid: 'some-fake-sid-number',
+      email_verified: true,
+      name: 'Dataverse User',
+      preferred_username: 'user',
+      given_name: 'Dataverse',
+      family_name: 'User',
+      email: 'dataverse-user@mailinator.com'
+    }
+  }
+}
diff --git a/tests/component/info/models/TermsOfUseMother.ts b/tests/component/info/models/TermsOfUseMother.ts
new file mode 100644
index 000000000..64933502d
--- /dev/null
+++ b/tests/component/info/models/TermsOfUseMother.ts
@@ -0,0 +1,13 @@
+import { faker } from '@faker-js/faker'
+import isChromatic from 'chromatic/isChromatic'
+import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
+
+export class TermsOfUseMother {
+  static create(): TermsOfUse {
+    return isChromatic() ? 'https://some-terms-of-use-url.com' : faker.lorem.paragraphs(8)
+  }
+
+  static createEmpty(): TermsOfUse {
+    return 'There are no API Terms of Use for this Dataverse installation.'
+  }
+}