diff --git a/apps/web/src/api/endpoint.ts b/apps/web/src/api/endpoint.ts
index 20c5f1b8fa..765d04d834 100644
--- a/apps/web/src/api/endpoint.ts
+++ b/apps/web/src/api/endpoint.ts
@@ -6,3 +6,4 @@ export const endpointBaseUrl =
     : `https://api.${serloDomain}`
 
 export const endpoint = `${endpointBaseUrl}/graphql`
+export const endpointEnmeshed = `${endpointBaseUrl}/enmeshed`
diff --git a/apps/web/src/components/auth/flow.tsx b/apps/web/src/components/auth/flow.tsx
index 86afbf82d8..d9acc2a8af 100644
--- a/apps/web/src/components/auth/flow.tsx
+++ b/apps/web/src/components/auth/flow.tsx
@@ -28,13 +28,7 @@ import {
   changeButtonTypeOfSSOProvider,
   sortKratosUiNodes,
 } from '../pages/auth/ory-helper'
-import {
-  filterUnwantedRedirection,
-  loginUrl,
-  registrationUrl,
-  VALIDATION_ERROR_TYPE,
-  verificationUrl,
-} from '../pages/auth/utils'
+import { VALIDATION_ERROR_TYPE } from '../pages/auth/utils'
 import { checkLoggedIn } from '@/auth/cookie/check-logged-in'
 import { fetchAndPersistAuthSession } from '@/auth/cookie/fetch-and-persist-auth-session'
 import type { AxiosError } from '@/auth/types'
@@ -79,15 +73,13 @@ export function Flow<T extends SubmitPayload>({
   const [values, setValues] = useState<Record<string, unknown>>(() => {
     const values: Record<string, unknown> = {}
     filteredNodes.forEach((node) => {
-      if (isUiNodeInputAttributes(node.attributes)) {
-        if (
-          node.attributes.type === 'hidden' ||
-          node.attributes.type === 'submit' ||
-          node.attributes.type === 'button' ||
-          node.attributes.type === 'checkbox'
-        ) {
-          values[getNodeId(node)] = node.attributes.value
-        }
+      if (
+        isUiNodeInputAttributes(node.attributes) &&
+        ['hidden', 'submit', 'button', 'checkbox'].includes(
+          node.attributes.type
+        )
+      ) {
+        values[getNodeId(node)] = node.attributes.value
       }
     })
     return values
@@ -198,13 +190,8 @@ export function handleFlowError<S>(
       case 'session_already_available': {
         if (!checkLoggedIn()) void fetchAndPersistAuthSession()
         showToastNotice(strings.notices.alreadyLoggedIn, 'default', 3000)
-
-        const redirection = filterUnwantedRedirection({
-          desiredPath: sessionStorage.getItem('previousPathname'),
-          unwantedPaths: [verificationUrl, loginUrl, registrationUrl],
-        })
         setTimeout(() => {
-          window.location.href = redirection
+          window.location.href = 'https://journey.serlo-staging.dev/willkommen'
         }, 3000)
 
         return
diff --git a/apps/web/src/components/content/entity.tsx b/apps/web/src/components/content/entity.tsx
index 92a6f55092..e0c3584cbd 100644
--- a/apps/web/src/components/content/entity.tsx
+++ b/apps/web/src/components/content/entity.tsx
@@ -12,6 +12,7 @@ import {
 import { Router } from 'next/router'
 import { useState, MouseEvent } from 'react'
 
+import { MockupGaps } from './exercises/mockup-gaps'
 import { HSpace } from './h-space'
 import { Link } from './link'
 import { FaIcon } from '../fa-icon'
@@ -51,6 +52,9 @@ export function Entity({ data }: EntityProps) {
   })
 
   const { strings } = useInstanceData()
+
+  const isMockupCoursePage = data.id === 244386
+
   return wrapWithSchema(
     <>
       {renderCourseNavigation()}
@@ -59,7 +63,11 @@ export function Entity({ data }: EntityProps) {
       {renderStyledH1()}
       {renderUserTools({ aboveContent: true })}
       <div className="min-h-1/4" key={data.id}>
-        {data.content && renderContent(data.content)}
+        {isMockupCoursePage ? (
+          <MockupGaps />
+        ) : (
+          data.content && renderContent(data.content)
+        )}
       </div>
       {renderCourseFooter()}
       <HSpace amount={20} />
diff --git a/apps/web/src/components/content/exercises/mockup-gaps.tsx b/apps/web/src/components/content/exercises/mockup-gaps.tsx
new file mode 100644
index 0000000000..fe943a6bb4
--- /dev/null
+++ b/apps/web/src/components/content/exercises/mockup-gaps.tsx
@@ -0,0 +1,129 @@
+import { faSave } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import nProgress from 'nprogress'
+import { useState } from 'react'
+
+import { endpointEnmeshed } from '@/api/endpoint'
+import { showToastNotice } from '@/helper/show-toast-notice'
+import { triggerSentry } from '@/helper/trigger-sentry'
+import { GapEx, Gappy } from '@/pages/___gaps'
+
+export function MockupGaps() {
+  const [showWalletNotice, setShowWalletNotice] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  function onFeedbackHandler(success: boolean) {
+    setShowWalletNotice(true)
+    setSuccess(success)
+  }
+
+  /*
+  Wähle die richtigen Begriffe für die Lücken.
+  Das [logistische] Wachstum verläuft in drei Phasen:
+  Zunächst wächst die Größe [exponentiell] und der Graph steigt [stark].
+  In der zweiten Phase ist das Wachstum [annähernd linear]. In diesem Bereich liegt auch [der Wendepunkt].
+  Der Graph [steigt] in der dritten Phase [schwach]. Das Wachstum ist [beschränkt].
+  [die Asymptote] [kubisch] [fällt] [logarithmische]
+  */
+
+  return (
+    <>
+      <GapEx
+        choices={[
+          'logistische',
+          'exponentiell',
+          'stark',
+          'annähernd linear',
+          'der Wendepunkt',
+          'steigt',
+          'schwach',
+          'beschränkt',
+          'die Asymptote',
+          'kubisch',
+          'fällt',
+          'logarithmische',
+        ]}
+        count={8}
+        onFeedback={onFeedbackHandler}
+      >
+        <div className="serlo-p mb-block leading-relaxed">
+          <p className="mb-4">
+            <b>Wähle die richtigen Begriffe für die Lücken.</b>
+          </p>
+          <p className="mb-4">
+            Das <Gappy index={0} /> Wachstum verläuft in drei Phasen:
+          </p>
+          <p className="mb-4">
+            Zunächst wächst die Größe <Gappy index={1} /> und der Graph steigt{' '}
+            <Gappy index={2} />.
+          </p>
+          <p className="mb-4">
+            In der zweiten Phase ist das Wachstum <Gappy index={3} />.<br /> In
+            diesem Bereich liegt auch <Gappy index={4} />.
+          </p>
+          <p className="mb-4">
+            Der Graph <Gappy index={5} /> in der dritten Phase{' '}
+            <Gappy index={6} />
+            . Das Wachstum ist <Gappy index={7} />.
+          </p>
+        </div>
+      </GapEx>
+      {showWalletNotice ? (
+        <div className="mx-side my-20 rounded-xl bg-brand-100 p-side text-center">
+          {success
+            ? 'Super, du hast den Kurs erfolgreich durchgearbeitet! '
+            : 'Yeah, du hast den Kurs durchgearbeitet. '}
+          <>
+            Du kannst deinen Lernfortschritt jetzt speichern.
+            <br />
+            {!success && 'Oder du probierst dich noch mal an der Übung'}
+            <br />
+            <button
+              className="serlo-make-interactive-green serlo-button m-auto mt-2 text-center"
+              onClick={saveLearningProgress}
+            >
+              <FontAwesomeIcon icon={faSave} /> In deiner Wallet speichern
+            </button>
+          </>
+        </div>
+      ) : null}
+    </>
+  )
+
+  function saveLearningProgress() {
+    const sessionId = sessionStorage.getItem('sessionId')
+    const name = 'LernstandMathe'
+    const value = encodeURIComponent('✓ Logistisches Wachstum')
+
+    if (!sessionId) return
+
+    nProgress.start()
+
+    fetch(
+      `${endpointEnmeshed}/attributes?name=${name}&value=${value}&sessionId=${sessionId}`,
+      { method: 'POST' }
+    )
+      .then((res) => res.json())
+      .then(() => {
+        setTimeout(() => {
+          nProgress.done()
+          showToastNotice(
+            '👌 Lernstand wurde erfolgreich an deine Wallet gesendet',
+            'success',
+            6000
+          )
+          setShowWalletNotice(false)
+        }, 540)
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.log(JSON.stringify(e))
+        triggerSentry({
+          message: `Error in User-Journey: Saving Attribute: ${JSON.stringify(
+            e
+          )}`,
+        })
+        setShowWalletNotice(false)
+      })
+  }
+}
diff --git a/apps/web/src/components/pages/auth/login.tsx b/apps/web/src/components/pages/auth/login.tsx
index fc318d59f9..fea708b124 100644
--- a/apps/web/src/components/pages/auth/login.tsx
+++ b/apps/web/src/components/pages/auth/login.tsx
@@ -3,14 +3,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 
 import { changeButtonTypeOfSSOProvider, sortKratosUiNodes } from './ory-helper'
-import {
-  filterUnwantedRedirection,
-  loginUrl,
-  logoutUrl,
-  registrationUrl,
-  verificationUrl,
-  recoveryUrl,
-} from './utils'
+import { registrationUrl, recoveryUrl } from './utils'
 import { getAuthPayloadFromSession } from '@/auth/auth-provider'
 import { fetchAndPersistAuthSession } from '@/auth/cookie/fetch-and-persist-auth-session'
 import { kratos } from '@/auth/kratos'
@@ -152,11 +145,6 @@ export function Login({ oauth }: { oauth?: boolean }) {
   async function onLogin(values: UpdateLoginFlowBody) {
     if (!flow?.id) return
 
-    const redirection = filterUnwantedRedirection({
-      desiredPath: sessionStorage.getItem('previousPathname'),
-      unwantedPaths: [verificationUrl, logoutUrl, loginUrl, recoveryUrl],
-    })
-
     try {
       await kratos
         .updateLoginFlow({ flow: flow.id, updateLoginFlowBody: values })
@@ -168,7 +156,7 @@ export function Login({ oauth }: { oauth?: boolean }) {
           showToastNotice(
             strings.notices.welcome.replace('%username%', username)
           )
-          void router.push(flow.return_to ?? redirection)
+          window.location.href = 'https://journey.serlo-staging.dev/willkommen'
           return
         })
     } catch (e: unknown) {
diff --git a/apps/web/src/components/pages/data-wallet-journey.tsx b/apps/web/src/components/pages/data-wallet-journey.tsx
new file mode 100644
index 0000000000..28b082068e
--- /dev/null
+++ b/apps/web/src/components/pages/data-wallet-journey.tsx
@@ -0,0 +1,166 @@
+import clsx from 'clsx'
+import { SetStateAction, useState } from 'react'
+
+import { HeadTags } from '../head-tags'
+import { PartnerList } from '../landing/rework/partner-list'
+import { Logo } from '../navigation/header/logo'
+import { endpointEnmeshed } from '@/api/endpoint'
+import { LoadingSpinner } from '@/components/loading/loading-spinner'
+import { triggerSentry } from '@/helper/trigger-sentry'
+
+export function createQRCode(
+  stateSetter: (value: SetStateAction<string>) => void
+) {
+  stateSetter('loading')
+  fetch(`${endpointEnmeshed}/init`, {
+    method: 'POST',
+    headers: {
+      Accept: 'image/png',
+    },
+  })
+    .then((res) => res.blob())
+    .then((res) => {
+      const urlCreator = window.URL || window.webkitURL
+      stateSetter(urlCreator.createObjectURL(res))
+      // TODO: When the workflow has been defined in the future we should revoke the object URL when done with:
+      // urlCreator.revokeObjectUrl(qrCode)
+    })
+    .catch((e) => {
+      // eslint-disable-next-line no-console
+      console.log(JSON.stringify(e))
+
+      triggerSentry({
+        message: `error while creating qr code: ${JSON.stringify(e)}`,
+      })
+    })
+}
+
+export function DataWallet() {
+  const [qrCode, setQrCode] = useState('')
+
+  return (
+    <>
+      <HeadTags data={{ title: 'Data Wallet – Serlo.org' }} />
+      <header className="bg-brand-100 px-side pt-12 sm:text-center">
+        <div className="pb-6">
+          <Logo />
+        </div>
+      </header>
+
+      <section
+        className={clsx(
+          'serlo-responsive-margin mb-20 mt-5',
+          'md:mt-12 md:px-8 lg:block'
+        )}
+      >
+        <div className="max-w-xl text-lg sm:mx-auto">
+          <h1 className="serlo-h1 mb-5 mt-16 text-brand">
+            Deine Daten. Deine Rechte.
+          </h1>
+          <p className="serlo-p">
+            Wir gehen verantwortungsvoll mit deinen Daten um. Serlo ist dafür
+            Projektpartner vom Mein Bildungsraum. Mein Bildungsraum setzt eine
+            sogenannte „Data Wallet“ ein, die es dir ermöglicht, deine Daten
+            sicher und direkt mit uns zu teilen.
+          </p>
+          <p className="serlo-p">
+            Die Data Wallet ist auf deinem Smartphone, dort sind deine Daten
+            sicher aufgehoben. Um Serlo dein Vertrauen zu schenken, ist eine
+            einmalige Einrichtung erforderlich:
+          </p>
+          <ol className="serlo-ol mb-4 text-lg">
+            <li>
+              Lade dir die App{' '}
+              <a
+                className="serlo-link font-bold"
+                href="https://play.google.com/store/apps/details?id=de.bildungsraum.wallet.beta"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Mein Bildungsraum: Wallet
+              </a>{' '}
+              auf dein Smartphone.
+            </li>
+            <li>
+              Erstelle einen{' '}
+              <a
+                className="serlo-link cursor-pointer font-bold"
+                onClick={() => createQRCode(setQrCode)}
+              >
+                QR-Code
+              </a>
+              .
+              {qrCode &&
+                ((qrCode === 'loading' && <LoadingSpinner noText />) || (
+                  <img src={qrCode} />
+                ))}
+            </li>
+            <li>
+              Lege in deiner Wallet-App ein neues Profil an und füge Serlo als
+              Kontakt hinzu, indem du den QR-Code scannst.
+            </li>
+            <li>
+              Sobald der Kontakt verifiziert wurde, erhältst du innerhalb
+              weniger Minuten eine Benachrichtigung in deiner Wallet-App.
+            </li>
+          </ol>
+          <p className="serlo-p mt-16">
+            Sollten dabei Probleme auftauchen,{' '}
+            <a
+              className="serlo-link font-bold"
+              href="/kontakt#technischersupport"
+            >
+              kontaktiere
+            </a>{' '}
+            uns gern.
+          </p>
+          <noscript>Bitte Javascript aktivieren</noscript>
+        </div>
+      </section>
+
+      <footer className="partner serlo-responsive-padding pb-1 text-center font-bold">
+        <h2 className="pb-12 pt-16 text-center font-bold">
+          Partner und Unterstützer
+        </h2>
+        <PartnerList />
+        <nav>
+          <a
+            href="https://de.serlo.org/serlo"
+            target="_blank"
+            rel="noreferrer"
+            className="serlo-link"
+          >
+            Über Serlo
+          </a>
+          {' • '}
+          <a
+            href="https://de.serlo.org/privacy"
+            target="_blank"
+            rel="noreferrer"
+            className="serlo-link"
+          >
+            Datenschutz
+          </a>
+          {' • '}
+          <a
+            href="https://de.serlo.org/imprint"
+            target="_blank"
+            rel="noreferrer"
+            className="serlo-link"
+          >
+            Impressum
+          </a>
+        </nav>
+        <style jsx>
+          {`
+            .partner {
+              background: url('/_assets/img/landing/about-container.svg');
+              border-bottom: 2rem solid #ffefda;
+              background-size: cover;
+            }
+          `}
+        </style>
+      </footer>
+    </>
+  )
+}
diff --git a/apps/web/src/components/pages/lenabi-welcome.tsx b/apps/web/src/components/pages/lenabi-welcome.tsx
new file mode 100644
index 0000000000..210b7eb3f3
--- /dev/null
+++ b/apps/web/src/components/pages/lenabi-welcome.tsx
@@ -0,0 +1,195 @@
+import clsx from 'clsx'
+import React, { ReactElement, useState, useEffect } from 'react'
+
+import { WelcomeModal } from './user/welcome-modal'
+import { Link } from '../content/link'
+import { HeadTags } from '../head-tags'
+import { LandingSubjectsNew } from '../landing/rework/landing-subjects-new'
+import { useAuthentication } from '@/auth/use-authentication'
+import { LandingSubjectsData } from '@/data-types'
+
+const landingSubjectsData: LandingSubjectsData = {
+  subjects: [
+    { url: '/mathe', title: 'Mathematik', icon: 'math' },
+    {
+      url: '/nachhaltigkeit',
+      title: 'Nachhaltigkeit',
+      icon: 'sustainability',
+    },
+    { url: '/biologie', title: 'Biologie', icon: 'biology' },
+    { url: '/chemie', title: 'Chemie', icon: 'chemistry' },
+    { url: '/informatik', title: 'Informatik', icon: 'informatics' },
+    {
+      url: '/community/neue-fächer-themen',
+      title: 'Fächer im Aufbau',
+      icon: 'new',
+    },
+  ],
+  additionalLinks: [],
+}
+
+export function LenabiWelcome() {
+  const [learnDataLoaded, setLearnDataLoaded] = useState(false)
+  const auth = useAuthentication()
+  const [sessionId, setSessionId] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    const sessionId = createRandomSessionId()
+    setSessionId(sessionId)
+    sessionStorage.setItem('sessionId', sessionId)
+  }, [])
+
+  if (!auth) return <>bitte einloggen</>
+
+  return (
+    <>
+      <HeadTags data={{ title: 'Serlo – Die freie Lernplattform' }} />
+      <main className="text-truegray-700">
+        <section className="mx-auto mt-20 max-w-3xl px-2 text-center font-bold md:mt-15vh">
+          <p className="landing-button-with-wings landing-button-with-wink p-with-wink font-handwritten text-3xl text-brand">
+            <span className="mr-2 italic">Willkommen {auth.username}!</span> 👋
+          </p>
+          <h1
+            className={clsx(
+              'text-center text-5xl font-extrabold',
+              'tracking-tight',
+              'mx-auto mb-6 mt-3 max-w-2xl'
+            )}
+          >
+            Was möchtest du <span className="underlined pb-2">lernen ?</span>
+          </h1>
+          <p className="text-lg font-normal leading-cozy">
+            Mit dir lernen gerade <b className="tracking-tight">1621</b> andere
+            Menschen auf Serlo.
+          </p>
+        </section>
+
+        <section className={clsx('mb-20 mt-40 font-bold tracking-tight')}>
+          <h2 className="mx-side-lg mb-8 border-b-2 pb-3 text-center font-handwritten text-3xl text-brand">
+            Lernempfehlungen
+          </h2>
+
+          <div className="flex justify-around">
+            {learnDataLoaded ? (
+              renderLearnData()
+            ) : (
+              <div className="max-w-3xl text-center font-normal">
+                <p className="serlo-p">
+                  Wenn du die Lerndaten aus deiner Data-Wallet für Serlo
+                  freigibts,
+                  <br />
+                  kannst du hier deine aktuelle Lernempfehlungen und Aufgaben
+                  sehen.
+                </p>
+                {sessionId && (
+                  <WelcomeModal
+                    callback={() => setLearnDataLoaded(true)}
+                    username={auth.username}
+                    sessionId={sessionId}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </section>
+
+        <section className="mb-40 mt-40">
+          <h2 className="mx-side-lg border-b-2 pb-3 text-center font-handwritten text-3xl text-brand">
+            Nach Fächern
+          </h2>
+          <LandingSubjectsNew data={landingSubjectsData} />
+        </section>
+
+        <section className="mb-40 mt-10">
+          <h2 className="mx-side-lg mb-8 border-b-2 pb-3 text-center font-handwritten text-3xl text-brand">
+            Nach Lehrplan
+          </h2>
+          <div className="text-center">
+            <Link
+              href="/mathe"
+              className="serlo-make-interactive-light serlo-button"
+            >
+              Realschule
+            </Link>{' '}
+            <Link
+              href="/mathe"
+              className="serlo-make-interactive-light serlo-button"
+            >
+              Mittelschule (Hauptschule)
+            </Link>{' '}
+            <Link
+              href="/mathe"
+              className="serlo-make-interactive-light serlo-button"
+            >
+              FOS &amp; BOS
+            </Link>{' '}
+            <Link
+              href="/mathe"
+              className="serlo-make-interactive-light serlo-button"
+            >
+              Hochschule
+            </Link>{' '}
+            <Link
+              href="/mathe"
+              className="serlo-make-interactive-light serlo-button"
+            >
+              Prüfungen
+            </Link>
+          </div>
+        </section>
+      </main>
+      <style jsx>{`
+        .underlined {
+          padding-right: 1rem;
+          white-space: nowrap;
+          background: url('/_assets/img/landing/simple-underline.svg') no-repeat
+            bottom;
+        }
+      `}</style>
+    </>
+  )
+
+  function renderLearnData() {
+    if (!learnDataLoaded) return null
+
+    return (
+      <>
+        {renderBox({
+          title: 'Logistisches Wachstum',
+          content: (
+            <p className="serlo-p font-normal">
+              <span className="font-bold hover:underline">Jetzt zum Kurs</span>
+              <br />
+              (erstellt von Lehrkraft)
+            </p>
+          ),
+          link: '/244309',
+        })}
+      </>
+    )
+  }
+
+  function renderBox({
+    title,
+    content,
+    link,
+  }: {
+    title: string
+    content: ReactElement
+    link?: string
+  }) {
+    return (
+      <Link
+        className="mx-2 block rounded-xl bg-brand-100 !no-underline"
+        href={link}
+      >
+        <h3 className="serlo-h3">{title}</h3>
+        {content}
+      </Link>
+    )
+  }
+}
+
+function createRandomSessionId() {
+  return (Math.random() + 1).toString(36).substring(2, 13)
+}
diff --git a/apps/web/src/components/pages/user/welcome-modal.tsx b/apps/web/src/components/pages/user/welcome-modal.tsx
new file mode 100644
index 0000000000..527f02d73e
--- /dev/null
+++ b/apps/web/src/components/pages/user/welcome-modal.tsx
@@ -0,0 +1,194 @@
+import Head from 'next/head'
+import { MouseEvent, useState } from 'react'
+
+import { endpointEnmeshed } from '@/api/endpoint'
+import { LoadingSpinner } from '@/components/loading/loading-spinner'
+import { ModalWithCloseButton } from '@/components/modal-with-close-button'
+import { triggerSentry } from '@/helper/trigger-sentry'
+
+export function WelcomeModal({
+  callback,
+  username,
+  sessionId,
+}: {
+  callback: () => void
+  username: string
+  sessionId: string
+}) {
+  const [showModal, setShowModal] = useState(false)
+
+  const [qrCodeSrc, setQrCodeSrc] = useState('')
+
+  const handleOnClick = (event: MouseEvent) => {
+    event.preventDefault()
+    setShowModal(true)
+    fetchQRCode()
+  }
+
+  const handleMockLoad = () => {
+    setTimeout(() => {
+      setShowModal(false)
+      callback()
+    }, 500)
+  }
+
+  return (
+    <>
+      <Head>
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bc977dedb38_daea31b3bd979c6587f874499713275b330db404.svg"
+          as="image"
+        />
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bcbbb4e9f58_99732b5cb071e233e2fabf9f37cd4a245936ad86.png"
+          as="image"
+        />
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bcbc3eef914_e5d5f432bbaeb48d2ed2075de1b7014444a798a9.png"
+          as="image"
+        />
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bcbcf057f40_9ee0d8d1f69f3ab74aaa825f622eb48ace01f623.png"
+          as="image"
+        />
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bcbdcc2ffaf_dc6a0dde8568432b86e76f1d52929402fad4451f.png"
+          as="image"
+        />
+        <link
+          rel="preload"
+          href="https://assets.serlo.org/61bcb7b06f4a3_d36861e75a5d4c4695b21725fe9917e616771a11.svg"
+          as="image"
+        />
+      </Head>
+      <button
+        className="serlo-make-interactive-green serlo-button"
+        onClick={handleOnClick}
+      >
+        Zugriff auf Data-Wallet einrichten
+      </button>
+      <ModalWithCloseButton
+        isOpen={showModal}
+        onCloseClick={() => setShowModal(false)}
+        title="Eigenen Lernstand laden"
+      >
+        <p className="serlo-p">
+          Hier kannst du deinen Lernstand aus deiner Data-Wallet laden. Wenn du
+          das noch nie gemacht hast, wir eine{' '}
+          <a className="serlo-link" target="_blank" href="/wallet">
+            ausführlichere Anleitung
+          </a>{' '}
+          für dich.
+        </p>
+
+        <b className="mx-side mt-4">QR-Code zum freischalten</b>
+        {qrCodeSrc === '' ? (
+          <div className="ml-1 pt-4">
+            <LoadingSpinner noText />
+          </div>
+        ) : (
+          <p className="img-wrapper mx-side mb-4 mt-4 h-48 w-48 rounded-xl bg-brand-100">
+            <img src={qrCodeSrc} />
+          </p>
+        )}
+        <p className="serlo-p">
+          Nachdem du den Code mit der Wallet-App gescannt hast erscheint hier
+          gleich dein Lernstand
+          <button className="serlo-link" onClick={handleMockLoad}>
+            .
+          </button>
+        </p>
+        <style jsx>{`
+          img {
+            mix-blend-mode: multiply;
+          }
+        `}</style>
+      </ModalWithCloseButton>
+    </>
+  )
+
+  function fetchQRCode() {
+    const name = encodeURIComponent(username)
+
+    fetch(`${endpointEnmeshed}/init?sessionId=${sessionId}&name=${name}`, {
+      method: 'POST',
+      headers: {
+        Accept: 'image/png',
+      },
+    })
+      .then((res) => res.blob())
+      .then((res) => {
+        const urlCreator = window.URL || window.webkitURL
+        setQrCodeSrc(urlCreator.createObjectURL(res))
+        // TODO: When the workflow has been defined in the future we should revoke the object URL when done with:
+        // urlCreator.revokeObjectUrl(qrCode)
+      })
+      .then(fetchAttributes)
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.log(JSON.stringify(e))
+
+        triggerSentry({
+          message: `Error in User-Journey: Reading QR-Code: ${JSON.stringify(
+            e
+          )}`,
+        })
+
+        setShowModal(false)
+        callback()
+      })
+  }
+
+  function fetchAttributes() {
+    fetch(`${endpointEnmeshed}/attributes?sessionId=${sessionId}`, {})
+      .then((res) => res.json())
+      .then((body: EnmeshedResponse) => {
+        if (body.status === 'pending') {
+          // eslint-disable-next-line no-console
+          console.log('INFO: RelationshipRequest is pending...')
+          setTimeout(fetchAttributes, 1000)
+        }
+        if (body.status === 'success') {
+          // eslint-disable-next-line no-console
+          console.log('INFO: RelationshipRequest was accepted.')
+          setShowModal(false)
+          callback()
+        }
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.log(`ERROR: ${JSON.stringify(e)}`)
+        setShowModal(false)
+        callback()
+        triggerSentry({
+          message: `Error in User-Journey: Reading Attributes: ${JSON.stringify(
+            e
+          )}`,
+        })
+      })
+  }
+}
+
+export type EnmeshedResponse =
+  | EnmeshedErrorResponse
+  | EnmeshedPendingResponse
+  | EnmeshedSuccessResponse
+
+export interface EnmeshedErrorResponse {
+  status: 'error'
+  message: string
+}
+
+export interface EnmeshedPendingResponse {
+  status: 'pending'
+}
+
+export interface EnmeshedSuccessResponse {
+  status: 'success'
+  attributes: Record<string, string>
+}
diff --git a/apps/web/src/pages/___gaps.tsx b/apps/web/src/pages/___gaps.tsx
new file mode 100644
index 0000000000..832c273d2e
--- /dev/null
+++ b/apps/web/src/pages/___gaps.tsx
@@ -0,0 +1,333 @@
+import { Feedback } from '@editor/plugins/sc-mc-exercise/renderer/feedback'
+import clsx from 'clsx'
+import React, {
+  createContext,
+  useState,
+  useContext,
+  ReactNode,
+  Fragment,
+  useEffect,
+} from 'react'
+
+import { FrontendClientBase } from '@/components/frontend-client-base'
+import { renderedPageNoHooks } from '@/helper/rendered-page'
+import { shuffleArray } from '@/helper/shuffle-array'
+
+export default renderedPageNoHooks(() => (
+  <FrontendClientBase>
+    <Content />
+  </FrontendClientBase>
+))
+
+function Content() {
+  return <>nope</>
+}
+
+interface GapProps {
+  mode:
+    | 'inactive'
+    | 'selected'
+    | 'filled'
+    | 'filled-selected'
+    | 'right'
+    | 'wrong'
+    | 'choice'
+    | 'choice-inactive'
+  text?: string
+  onClick?: () => void
+}
+
+function Gap({ mode, text, onClick }: GapProps) {
+  if (mode === 'inactive') {
+    return (
+      <span
+        className={clsx(
+          'w-20 rounded border border-black bg-gray-50',
+          'mx-1 -mb-1.5 inline-block h-7 cursor-pointer '
+        )}
+        onClick={onClick}
+      ></span>
+    )
+  }
+  if (mode === 'selected') {
+    return (
+      <span
+        className={clsx(
+          'w-20 rounded border-2 border-brand bg-brand-100',
+          'mx-1 -mb-1.5 inline-block h-7 animate-pulse'
+        )}
+      ></span>
+    )
+  }
+  if (mode === 'choice') {
+    return (
+      <span
+        className={clsx(
+          'inline-block rounded border border-black bg-brand-100',
+          'mx-1 mb-2 h-7 cursor-pointer select-none px-2'
+        )}
+        onClick={onClick}
+      >
+        {text}
+      </span>
+    )
+  }
+  if (mode === 'choice-inactive') {
+    return (
+      <span
+        className={clsx(
+          'inline-block rounded border border-gray-200 bg-gray-100',
+          'mx-1 h-7 cursor-pointer select-none px-2 text-gray-400'
+        )}
+        onClick={onClick}
+      >
+        {text}
+      </span>
+    )
+  }
+  if (mode === 'filled') {
+    return (
+      <span
+        className={clsx(
+          'inline-block rounded border border-black bg-brand-100',
+          'mx-1 h-7 cursor-pointer select-none px-2'
+        )}
+        onClick={onClick}
+      >
+        {text}
+      </span>
+    )
+  }
+  if (mode === 'filled-selected') {
+    return (
+      <span
+        className={clsx(
+          'inline-block rounded border-2 border-brand bg-brand-100',
+          'mx-1 h-7 animate-pulse cursor-pointer select-none px-2'
+        )}
+        onClick={onClick}
+      >
+        {text}
+      </span>
+    )
+  }
+  if (mode === 'right') {
+    return (
+      <span
+        className={clsx(
+          'bg-brandgreen-lighter inline-block rounded border border-black',
+          'mx-1 h-7 select-none px-2'
+        )}
+      >
+        {text}
+      </span>
+    )
+  }
+  if (mode === 'wrong') {
+    return (
+      <span
+        className={clsx(
+          'inline-block rounded border border-black bg-red-100',
+          'mx-1 h-7 select-none px-2'
+        )}
+      >
+        {text}
+      </span>
+    )
+  }
+  return null
+}
+
+interface GapContext {
+  selected: number
+  choices: string[]
+  filled: number[]
+  checked: boolean
+  select: (i: number) => void
+  deselect: (i: number) => void
+}
+
+const GapContext = createContext<GapContext | null>(null)
+
+interface GapExProps {
+  choices: string[]
+  children: ReactNode
+  count?: number
+  onFeedback?: (success: boolean) => void
+}
+
+export function GapEx({ choices, children, count, onFeedback }: GapExProps) {
+  const gapCount = count ?? choices.length
+
+  const [selected, setSelected] = useState(-1)
+  const [filled, setFilled] = useState<number[]>(Array(gapCount).fill(-1))
+  const [checked, setChecked] = useState(false)
+
+  const [sortedChoices, setSortedChoices] = useState(() => {
+    const copy = choices.slice(0)
+    copy.sort()
+    return copy
+  })
+
+  useEffect(() => {
+    setSortedChoices(shuffleArray(sortedChoices))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function select(i: number) {
+    setSelected(i)
+  }
+
+  function deselect(i: number) {
+    setSelected(i)
+    const filledCopy = filled.slice(0)
+    filledCopy[i] = -1
+    setFilled(filledCopy)
+  }
+
+  const alright = checked && filled.every((v, i) => v === i)
+
+  const allfilled = filled.every((i) => i >= 0)
+
+  return (
+    <GapContext.Provider
+      value={{ selected, choices, filled, checked, select, deselect }}
+    >
+      {children}
+      <p className="serlo-p mb-block">
+        {sortedChoices.map((c) => {
+          return (
+            <Fragment key={c}>
+              <Gap
+                text={c}
+                mode={
+                  filled.some((i) => choices[i] === c) || allfilled
+                    ? 'choice-inactive'
+                    : 'choice'
+                }
+                onClick={() => {
+                  if (selected === -1 && allfilled) return
+
+                  let toFill = selected
+                  if (toFill < 0) {
+                    toFill = 0
+                    while (filled[toFill] >= 0) toFill++
+                  }
+
+                  const filledCopy = filled.slice(0)
+                  const choiceIndex = choices.indexOf(c)
+                  if (filledCopy.indexOf(choiceIndex) >= 0) {
+                    filledCopy[filledCopy.indexOf(choiceIndex)] = -1
+                  }
+                  filledCopy[toFill] = choiceIndex
+
+                  setFilled(filledCopy)
+
+                  if (allfilled) {
+                    if (filledCopy.every((x) => x >= 0)) {
+                      setSelected(-1)
+                      return
+                    }
+                  }
+
+                  let next = toFill
+                  do {
+                    next++
+                    if (next >= gapCount) {
+                      next = 0
+                    }
+                    if (next === toFill) {
+                      setSelected(-1)
+                      return
+                    }
+                  } while (filledCopy[next] >= 0)
+                  setSelected(next)
+                }}
+              />
+            </Fragment>
+          )
+        })}
+      </p>
+      {checked && (
+        <div>
+          {' '}
+          <Feedback correct={alright}>
+            {alright ? (
+              <>&nbsp;Super! Du hast die Aufgabe richtig gelöst!&nbsp;</>
+            ) : (
+              <>&nbsp;Leider noch nicht richtig. Versuch es nochmal!&nbsp;</>
+            )}
+          </Feedback>
+        </div>
+      )}
+      <button
+        className={clsx(
+          'serlo-button',
+          'mx-side mt-4',
+          !allfilled &&
+            'pointer-events-none bg-transparent text-gray-400 opacity-100',
+          alright
+            ? 'serlo-make-interactive-light'
+            : 'serlo-make-interactive-primary'
+        )}
+        onPointerUp={(e) => e.currentTarget.blur()}
+        onClick={() => {
+          if (checked) {
+            setChecked(false)
+            setFilled(filled.map(() => -1))
+            setSelected(0)
+          } else {
+            setChecked(true)
+            if (onFeedback) onFeedback(filled.every((v, i) => v === i))
+          }
+        }}
+      >
+        {checked ? 'Nochmal versuchen' : "Stimmt's?"}
+      </button>
+    </GapContext.Provider>
+  )
+}
+
+interface GappyProps {
+  index: number
+}
+
+export function Gappy({ index }: GappyProps) {
+  const context = useContext(GapContext)
+
+  if (context) {
+    if (context.checked) {
+      return (
+        <Gap
+          mode={context.filled[index] === index ? 'right' : 'wrong'}
+          text={context.choices[context.filled[index]]}
+        />
+      )
+    } else {
+      if (context.selected === index && context.filled[index] < 0) {
+        return <Gap mode="selected" />
+      } else if (context.filled[index] >= 0) {
+        return (
+          <Gap
+            mode={context.selected === index ? 'filled-selected' : 'filled'}
+            text={context.choices[context.filled[index]]}
+            onClick={() => {
+              context.select(index)
+            }}
+          />
+        )
+      } else {
+        return (
+          <Gap
+            mode="inactive"
+            onClick={() => {
+              context.select(index)
+            }}
+          />
+        )
+      }
+    }
+  }
+
+  return <>Fehler</>
+}
diff --git a/apps/web/src/pages/willkommen.tsx b/apps/web/src/pages/willkommen.tsx
new file mode 100644
index 0000000000..ea26d0836c
--- /dev/null
+++ b/apps/web/src/pages/willkommen.tsx
@@ -0,0 +1,9 @@
+import { FrontendClientBase } from '@/components/frontend-client-base'
+import { LenabiWelcome } from '@/components/pages/lenabi-welcome'
+import { renderedPageNoHooks } from '@/helper/rendered-page'
+
+export default renderedPageNoHooks(() => (
+  <FrontendClientBase>
+    <LenabiWelcome />
+  </FrontendClientBase>
+))