diff --git a/client/src/components/onboarding/WizardPage.vue b/client/src/components/onboarding/WizardPage.vue
new file mode 100644
index 00000000..02d01dbc
--- /dev/null
+++ b/client/src/components/onboarding/WizardPage.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
+
+const props = defineProps<{
+  step: number;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-1 flex-col">
+    <div class="flex-grow p-16">
+      <ItNavigationProgress :steps="3" :current-step="props.step" />
+      <slot name="content"></slot>
+    </div>
+    <div class="flex justify-end border border-t px-6 py-4">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/onboarding/WizardSidePanel.vue b/client/src/components/onboarding/WizardSidePanel.vue
new file mode 100644
index 00000000..e6a8ad49
--- /dev/null
+++ b/client/src/components/onboarding/WizardSidePanel.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { SUPPORT_LOCALES } from "@/i18nextWrapper";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import type { AvailableLanguages } from "@/stores/user";
+import { useUserStore } from "@/stores/user";
+
+const props = defineProps({
+  courseName: String,
+});
+
+const userStore = useUserStore();
+
+async function changeLocale(language: AvailableLanguages) {
+  userStore.setUserLanguages(language);
+}
+</script>
+<template>
+  <div
+    class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8 lg:w-1/3"
+  >
+    <div class="flex w-full items-center justify-between">
+      <div class="flex justify-center">
+        <div class="h-8 w-16">
+          <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
+        </div>
+        <div class="ml-1 border-l border-white pl-3 text-2xl text-white">
+          {{ $t("general.title") }}
+        </div>
+      </div>
+      <Menu as="div" class="relative block text-left">
+        <div class="text-white">
+          <MenuButton class="text-white">
+            <it-icon-globe class="relative top-[2px] h-4 w-4" />
+            <span class="ml-2 inline">
+              {{ $t(`language.${userStore.language}`) }}
+            </span>
+          </MenuButton>
+        </div>
+
+        <transition
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95"
+        >
+          <MenuItems
+            class="absolute right-0 z-10 mt-2 w-56 origin-top-right bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <MenuItem
+              v-for="locale in SUPPORT_LOCALES"
+              :key="locale"
+              v-slot="{ active }"
+            >
+              <button
+                :class="[
+                  active ? 'bg-gray-200 text-gray-900' : 'text-gray-800',
+                  'block w-full px-4 py-2 text-left',
+                ]"
+                :data-cy="`language-selector-${locale}`"
+                @click="changeLocale(locale)"
+              >
+                {{ $t(`language.${locale}`) }}
+              </button>
+            </MenuItem>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+
+    <div class="max-w-xs text-white">
+      <img
+        src="/static/images/mood_uk.jpg"
+        class="aspect-square rounded-full object-cover"
+        alt=""
+      />
+      <h3 class="mt-8 text-center">{{ props.courseName }}</h3>
+    </div>
+
+    <div class="flex items-center gap-x-2 text-sm text-white">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-10 w-10 fill-none"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+        />
+      </svg>
+      <div>
+        Hast du Fragen? Schau dir unsere
+        <a class="underline" href="#">FAQ</a>
+        an oder kontaktiere uns:
+        <a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/pages/onboarding/OnboardUk.vue b/client/src/pages/onboarding/OnboardUk.vue
deleted file mode 100644
index e1847512..00000000
--- a/client/src/pages/onboarding/OnboardUk.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
-import { SUPPORT_LOCALES } from "@/i18nextWrapper";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import type { AvailableLanguages } from "@/stores/user";
-import { useUserStore } from "@/stores/user";
-
-const userStore = useUserStore();
-
-async function changeLocale(language: AvailableLanguages) {
-  userStore.setUserLanguages(language);
-}
-</script>
-
-<template>
-  <div class="flex flex-col lg:flex-row">
-    <div
-      class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8 lg:w-1/3"
-    >
-      <div class="flex w-full items-center justify-between">
-        <div class="flex justify-center">
-          <div class="h-8 w-16">
-            <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
-          </div>
-          <div class="ml-1 border-l border-white pl-3 text-2xl text-white">
-            {{ $t("general.title") }}
-          </div>
-        </div>
-        <Menu as="div" class="relative block text-left">
-          <div class="text-white">
-            <MenuButton class="text-white">
-              <it-icon-globe class="relative top-[2px] h-4 w-4" />
-              <span class="ml-2 inline">
-                {{ $t(`language.${userStore.language}`) }}
-              </span>
-            </MenuButton>
-          </div>
-
-          <transition
-            enter-active-class="transition ease-out duration-100"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95"
-          >
-            <MenuItems
-              class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-            >
-              <div class="py-1">
-                <MenuItem
-                  v-for="locale in SUPPORT_LOCALES"
-                  :key="locale"
-                  v-slot="{ active }"
-                >
-                  <button
-                    :class="[
-                      active ? 'bg-gray-200 text-gray-900' : 'text-gray-700',
-                      'block w-full px-4 py-2 text-left',
-                    ]"
-                    :data-cy="`language-selector-${locale}`"
-                    @click="changeLocale(locale)"
-                  >
-                    {{ $t(`language.${locale}`) }}
-                  </button>
-                </MenuItem>
-              </div>
-            </MenuItems>
-          </transition>
-        </Menu>
-      </div>
-
-      <div class="max-w-xs text-white">
-        <img
-          src="/static/images/student.jpg"
-          class="aspect-square rounded-full object-cover"
-          alt=""
-        />
-        <h3 class="mt-8 text-center">Überbetriebliche Kurse</h3>
-      </div>
-
-      <div class="flex items-center gap-x-2 text-sm text-white">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="h-10 w-10 fill-none"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
-          />
-        </svg>
-        <div>
-          Hast du Fragen? Schau dir unsere
-          <a class="underline" href="#">FAQ</a>
-          an oder kontaktiere uns:
-          <a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-1 flex-col">
-      <div class="flex-grow p-16">
-        <ItNavigationProgress :steps="3" :current-step="0" />
-        <h2 class="my-10">Konto erstellen</h2>
-        <p class="mb-4">Damit du myVBV nutzen kannst, brauchst du ein Konto.</p>
-        <a href="#" class="btn-primary">Konto erstellen</a>
-
-        <p class="mb-4 mt-12">Hast du schon ein Konto?</p>
-        <a href="#" class="btn-secondary">Anmelden</a>
-      </div>
-      <div class="flex justify-end border border-t px-6 py-4">
-        <a href="#" class="btn-blue">Weiter</a>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/client/src/pages/onboarding/uk/AccountConfirm.vue b/client/src/pages/onboarding/uk/AccountConfirm.vue
new file mode 100644
index 00000000..8e30b5bd
--- /dev/null
+++ b/client/src/pages/onboarding/uk/AccountConfirm.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import WizardPage from "@/components/onboarding/WizardPage.vue";
+import { useUserStore } from "@/stores/user";
+
+const userStore = useUserStore();
+</script>
+
+<template>
+  <WizardPage :step="0.5">
+    <template #content>
+      <h2 class="my-10">Konto erstellen</h2>
+
+      <div class="mb-8 flex items-center space-x-4 border px-8 py-4">
+        <it-icon-check class="h-24 w-24 text-green-500" />
+        <p class="text-lg font-bold">
+          Du hast erfolgreich ein Konto für
+          <br />
+          {{ userStore.email }} erstellt.
+        </p>
+      </div>
+      <p class="text-lg font-bold">Mach nun weiter mit dem nächsten Schritt.</p>
+    </template>
+
+    <template #footer>
+      <router-link :to="{ name: 'accountProfile' }" class="btn-blue flex items-center">
+        Weiter
+        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      </router-link>
+    </template>
+  </WizardPage>
+</template>
diff --git a/client/src/pages/onboarding/uk/AccountProfile.vue b/client/src/pages/onboarding/uk/AccountProfile.vue
new file mode 100644
index 00000000..2131cffd
--- /dev/null
+++ b/client/src/pages/onboarding/uk/AccountProfile.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import WizardPage from "@/components/onboarding/WizardPage.vue";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import { ref } from "vue";
+
+const companies = [
+  { id: 1, name: "Firma 1" },
+  { id: 2, name: "Firma 2" },
+  { id: 3, name: "Firma 3" },
+];
+
+const selectedCompany = ref(companies[0]);
+</script>
+
+<template>
+  <WizardPage :step="1">
+    <template #content>
+      <h2 class="my-10">Profil ergänzen</h2>
+
+      <h3 class="mb-3">Gesellschaft</h3>
+
+      <p class="mb-6 max-w-md hyphens-none">
+        Wähle hier den Namen der Gesellschaft aus, in der du arbeitest. So können dich
+        andere Personen einfacher finden.
+      </p>
+
+      <ItDropdownSelect v-model="selectedCompany" :items="companies" />
+
+      <div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
+        <div>
+          <h3 class="mb-3">Profilbild</h3>
+          <p class="mb-6 max-w-md hyphens-none">
+            Lade ein Profilbild hoch, damit dich andere Personen auf den ersten Blick
+            erkennen.
+          </p>
+          <button class="btn-primary flex items-center">
+            Bild hochladen
+            <it-icon-upload class="it-icon ml-2 h-6 w-6" />
+          </button>
+        </div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="172"
+            height="172"
+            viewBox="0 0 172 172"
+            fill="none"
+          >
+            <mask
+              id="mask0"
+              style="mask-type: alpha"
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="172"
+              height="172"
+            >
+              <circle cx="86" cy="86" r="86" fill="#E0E5EC" />
+            </mask>
+            <g mask="url(#mask0)">
+              <circle cx="86" cy="86" r="86" fill="#E0E5EC" />
+              <path
+                fill="#B1C1CA"
+                d="M101.584 105.423a1.793 1.793 0 0 0-1.57.572 1.834 1.834 0 0 0-.465 1.604c1.019 5.347 4.45 12.685 14.982 17.254 1.248.539 3.176.959 5.621 1.486 9.151 1.977 24.454 5.288 28.214 19.294a1.843 1.843 0 0 0 1.545 1.351 1.84 1.84 0 0 0 1.367-.366 1.846 1.846 0 0 0 .659-1.944c-4.347-16.177-21.685-19.928-31.002-21.941-2.157-.469-4.022-.871-4.934-1.269-6.33-2.743-10.418-6.815-12.19-12.117 17.585 1.305 25.547-5.69 25.898-6.008a1.843 1.843 0 0 0-.325-2.968c-10.148-5.79-10.148-25.795-10.148-33.33 0-21.067-14.21-37.768-32.428-38.03-.173-.006-.347-.01-.52-.011-18.483.103-33.524 16.823-33.524 37.275 0 7.534 0 27.543-10.149 33.329a1.856 1.856 0 0 0-.767 2.35c.121.276.309.519.546.707.51.394 11.773 9.001 25.632 6.387-1.853 5.081-5.886 8.99-12.031 11.657-.89.387-2.663.811-4.716 1.298-9.38 2.227-26.844 6.376-31.216 22.668a1.84 1.84 0 0 0 .185 1.4 1.85 1.85 0 0 0 3.386-.445c3.8-14.176 19.266-17.845 28.502-20.043 2.315-.549 4.143-.984 5.332-1.497 10.532-4.569 13.96-11.907 14.983-17.254a1.83 1.83 0 0 0-.588-1.723 1.833 1.833 0 0 0-1.78-.383c-9.996 3.142-19.232-1.18-23.269-3.577 9.642-8.061 9.642-26.614 9.642-34.874 0-18.427 13.391-33.495 29.987-33.595l.391.022c16.367.233 28.709 14.994 28.709 34.34 0 8.264 0 26.857 9.683 34.918-3.335 1.903-10.939 4.982-23.642 3.463Z"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <button class="btn-blue flex items-center">
+        Weiter
+        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      </button>
+    </template>
+  </WizardPage>
+</template>
diff --git a/client/src/pages/onboarding/uk/AccountSetup.vue b/client/src/pages/onboarding/uk/AccountSetup.vue
new file mode 100644
index 00000000..486caccf
--- /dev/null
+++ b/client/src/pages/onboarding/uk/AccountSetup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import WizardPage from "@/components/onboarding/WizardPage.vue";
+</script>
+
+<template>
+  <WizardPage :step="0">
+    <template #content>
+      <h2 class="my-10">Konto erstellen</h2>
+      <p class="mb-4">Damit du myVBV nutzen kannst, brauchst du ein Konto.</p>
+      <a href="#" class="btn-primary">Konto erstellen</a>
+
+      <p class="mb-4 mt-12">Hast du schon ein Konto?</p>
+      <a href="/sso/login/" class="btn-secondary">Anmelden</a>
+    </template>
+
+    <template #footer>
+      <button disabled class="btn-blue flex items-center">
+        Weiter
+        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      </button>
+    </template>
+  </WizardPage>
+</template>
diff --git a/client/src/pages/onboarding/uk/WizardBase.vue b/client/src/pages/onboarding/uk/WizardBase.vue
new file mode 100644
index 00000000..dc8dd1a8
--- /dev/null
+++ b/client/src/pages/onboarding/uk/WizardBase.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import WizardSidePanel from "@/components/onboarding/WizardSidePanel.vue";
+</script>
+
+<template>
+  <div class="flex flex-col lg:flex-row">
+    <WizardSidePanel course-name="Überbetriebliche Kurse" />
+    <router-view />
+  </div>
+</template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9e5dcb1c..9744f956 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,5 +1,5 @@
-import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
 import LoginPage from "@/pages/LoginPage.vue";
+import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
 import {
   handleCourseSessionAsQueryParam,
   handleCurrentCourseSession,
@@ -7,6 +7,7 @@ import {
   updateLoggedIn,
 } from "@/router/guards";
 import { addToHistory } from "@/router/history";
+import { checkUKProcess } from "@/router/onboarding";
 import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
@@ -231,11 +232,33 @@ const router = createRouter({
     },
     {
       path: "/onboarding/uk",
-      component: () => import("@/pages/onboarding/OnboardUk.vue"),
+      props: true,
+      component: () => import("@/pages/onboarding/uk/WizardBase.vue"),
       meta: {
         public: true,
         hideChrome: true,
       },
+      beforeEnter: checkUKProcess,
+      children: [
+        {
+          path: "account/create",
+          props: true,
+          component: () => import("@/pages/onboarding/uk/AccountSetup.vue"),
+          name: "accountCreate",
+        },
+        {
+          path: "account/confirm",
+          props: true,
+          component: () => import("@/pages/onboarding/uk/AccountConfirm.vue"),
+          name: "accountConfirm",
+        },
+        {
+          path: "account/profile",
+          props: true,
+          component: () => import("@/pages/onboarding/uk/AccountProfile.vue"),
+          name: "accountProfile",
+        },
+      ],
     },
     {
       path: "/styleguide",
diff --git a/client/src/router/onboarding.ts b/client/src/router/onboarding.ts
new file mode 100644
index 00000000..06c840d8
--- /dev/null
+++ b/client/src/router/onboarding.ts
@@ -0,0 +1,25 @@
+import { useUserStore } from "@/stores/user";
+import type { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
+
+export async function checkUKProcess(
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+  next: NavigationGuardNext
+) {
+  const userStore = useUserStore();
+
+  // Guest
+  if (!userStore.loggedIn) {
+    if (to.name !== "accountCreate") {
+      return next({ name: "accountCreate" });
+    }
+    return next();
+  }
+
+  // Logged in
+  if (to.name === "accountCreate") {
+    return next({ name: "accountConfirm" });
+  }
+
+  return next();
+}
diff --git a/server/vbv_lernwelt/static/images/mood_uk.jpg b/server/vbv_lernwelt/static/images/mood_uk.jpg
new file mode 100644
index 00000000..ece7d4be
Binary files /dev/null and b/server/vbv_lernwelt/static/images/mood_uk.jpg differ
diff --git a/server/vbv_lernwelt/static/images/student.jpg b/server/vbv_lernwelt/static/images/mood_vv.jpg
similarity index 100%
rename from server/vbv_lernwelt/static/images/student.jpg
rename to server/vbv_lernwelt/static/images/mood_vv.jpg