diff --git a/packages/frontend-2/components/onboarding/checklist/v1.vue b/packages/frontend-2/components/onboarding/checklist/v1.vue
index 5f5871a53..5df406ee5 100644
--- a/packages/frontend-2/components/onboarding/checklist/v1.vue
+++ b/packages/frontend-2/components/onboarding/checklist/v1.vue
@@ -143,40 +143,23 @@
       </div>
       <div
         v-else
-        class="flex flex-col items-center justify-center flex-1 space-y-2 py-4"
+        class="flex flex-col sm:flex-row items-center justify-center flex-1 space-x-2 py-4"
       >
         <div class="w-6 h-6">
           <!-- <CheckCircleIcon class="absolute w-6 h-6 text-primary" /> -->
-          <CheckCircleIcon
-            class="absolute w-6 h-6 text-primary animate-ping animate-pulse"
-          />
+          <CheckCircleIcon class="w-6 h-6 text-primary animate-ping animate-pulse" />
         </div>
-        <div class="text-sm max-w-lg">
+        <div class="text-sm max-w-lg grow">
           <b>All done!</b>
-          <br />
-          Don't forget to join us in the
-          <FormButton
-            to="https://speckle.community"
-            target="_blank"
-            size="sm"
-            :icon-right="ArrowTopRightOnSquareIcon"
-            link
-          >
+          PS: the
+          <FormButton to="https://speckle.community" target="_blank" size="sm" link>
             Community Forum
           </FormButton>
-          , or check out the
-          <FormButton
-            to="https://speckle.systems/tutorials"
-            target="_blank"
-            size="sm"
-            :icon-right="ArrowTopRightOnSquareIcon"
-            link
-          >
-            Tutorials
-          </FormButton>
-          page for more inisghts.
+          is there to help!
+        </div>
+        <div>
+          <FormButton text size="sm" @click="closeChecklist()">Close</FormButton>
         </div>
-        <FormButton text size="sm" @click="closeChecklist()">Close</FormButton>
       </div>
     </div>
 
@@ -192,19 +175,19 @@
     </div>
 
     <OnboardingDialogManager
-      v-show="showManagerDownloadDialog"
+      v-model:open="showManagerDownloadDialog"
       @done="markComplete(0)"
       @cancel="showManagerDownloadDialog = false"
     ></OnboardingDialogManager>
     <OnboardingDialogAccountLink
-      v-show="showAccountLinkDialog"
+      v-model:open="showAccountLinkDialog"
       @done="markComplete(1)"
       @cancel="showAccountLinkDialog = false"
     >
       <template #header>Desktop Login</template>
     </OnboardingDialogAccountLink>
     <OnboardingDialogFirstSend
-      v-show="showFirstSendDialog"
+      v-model:open="showFirstSendDialog"
       @done="markComplete(2)"
       @cancel="showFirstSendDialog = false"
     >
@@ -222,8 +205,7 @@ import {
   ShareIcon,
   ComputerDesktopIcon,
   UserPlusIcon,
-  CloudArrowUpIcon,
-  ArrowTopRightOnSquareIcon
+  CloudArrowUpIcon
 } from '@heroicons/vue/24/solid'
 import { CheckCircleIcon as OutlineCheckCircleIcon } from '@heroicons/vue/24/outline'
 import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
@@ -284,7 +266,7 @@ const getStatus = () => {
 
 const steps = ref([
   {
-    title: 'Get Connectors',
+    title: 'Install Manager ⚙️',
     blurb: 'Use Manager to install the Speckle Connectors for your apps!',
     active: false,
     cta: "Let's go!",
@@ -306,7 +288,7 @@ const steps = ref([
     icon: ComputerDesktopIcon
   },
   {
-    title: 'Desktop Login',
+    title: 'Log In 🔑',
     blurb: 'Authorise our application connectors to send data to Speckle.',
     active: false,
     cta: "Let's go!",
@@ -328,7 +310,7 @@ const steps = ref([
     icon: UserPlusIcon
   },
   {
-    title: 'Send your first model',
+    title: 'Your First Model Upload ⬆️',
     blurb: 'Use your favourite design app to send your first model to Speckle.',
     active: false,
     cta: "Let's go!",
@@ -350,7 +332,7 @@ const steps = ref([
     icon: CloudArrowUpIcon
   },
   {
-    title: 'Enable Multiplayer',
+    title: 'Enable Multiplayer 📢',
     blurb: 'Share your project with your colleagues!',
     active: false,
     cta: "Let's go!",
diff --git a/packages/frontend-2/components/onboarding/dialog/AccountLink.vue b/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
index 5e1d298fb..3188f5c6d 100644
--- a/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
+++ b/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
@@ -1,9 +1,18 @@
 <template>
   <OnboardingDialogBase>
-    <template #header>One step away from sending a model to Speckle!</template>
-    <div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
-      <PlayIcon class="w-10 h-10 text-white" />
-      <span class="text-xs">Install manager + How and why to login into manager</span>
+    <template #header>Log In 🔑</template>
+    <div
+      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
+    >
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube-nocookie.com/embed/enJk9lslnvs?rel=0&autoplay=1"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        class="w-full h-full"
+      ></iframe>
     </div>
 
     <div class="flex justify-center">
@@ -14,7 +23,6 @@
   </OnboardingDialogBase>
 </template>
 <script setup lang="ts">
-import { PlayIcon } from '@heroicons/vue/24/solid'
 import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
 
 const emit = defineEmits(['done'])
diff --git a/packages/frontend-2/components/onboarding/dialog/Base.vue b/packages/frontend-2/components/onboarding/dialog/Base.vue
index df84b6113..80e76fe4b 100644
--- a/packages/frontend-2/components/onboarding/dialog/Base.vue
+++ b/packages/frontend-2/components/onboarding/dialog/Base.vue
@@ -1,35 +1,15 @@
 <template>
-  <div class="w-screen h-screen z-50 fixed inset-0">
-    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
-    <div
-      class="w-screen h-screen fixed inset-0 bg-neutral-100/70 dark:bg-neutral-900/70"
-      @click="allowCancel ? emit('cancel') : ''"
-    ></div>
-    <div
-      class="relative w-screen h-screen flex items-center justify-center pointer-events-none"
-    >
+  <LayoutDialog max-width="md">
+    <div>
       <div class="max-w-2xl w-full flex flex-col justify-center pointer-events-auto">
-        <div
-          class="bg-blue-500/50 border-4 border-primary-muted text-foreground-on-primary backdrop-blur shadow-lg rounded-xl p-4 space-y-4 w-full"
-        >
-          <h2 class="text-center text-2xl font-bold">
+        <div class="space-y-4 w-full">
+          <h2 class="text-center text-3xl font-bold">
             <slot name="header">Dialog Header</slot>
           </h2>
           <slot></slot>
         </div>
-        <div v-if="allowCancel" class="pt-2 flex justify-center">
-          <FormButton size="sm" @click.stop="emit('cancel')">
-            {{ cancelPrompt }}
-          </FormButton>
-        </div>
       </div>
     </div>
-  </div>
+  </LayoutDialog>
 </template>
-<script setup lang="ts">
-const emit = defineEmits(['cancel'])
-withDefaults(defineProps<{ allowCancel?: boolean; cancelPrompt?: string }>(), {
-  allowCancel: true,
-  cancelPrompt: 'Cancel'
-})
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/frontend-2/components/onboarding/dialog/FirstSend.vue b/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
index 71e4e2a21..e8ce4d124 100644
--- a/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
+++ b/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
@@ -1,9 +1,18 @@
 <template>
-  <OnboardingDialogBase @close="emit('close')" @cancel="emit('cancel')">
-    <template #header>How to do a first model upload</template>
-    <div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
-      <PlayIcon class="w-10 h-10 text-white" />
-      <span class="text-xs">How to do a first model upload</span>
+  <OnboardingDialogBase>
+    <template #header>Your First Model Upload ⬆️</template>
+    <div
+      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
+    >
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube-nocookie.com/embed/SGnwuzieufw?rel=0&autoplay=1"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        class="w-full h-full"
+      ></iframe>
     </div>
     <div class="flex justify-center">
       <FormButton size="xl" class="shadow-md" @click="emit('done')">Got it!</FormButton>
@@ -11,7 +20,5 @@
   </OnboardingDialogBase>
 </template>
 <script setup lang="ts">
-import { PlayIcon } from '@heroicons/vue/24/solid'
-
 const emit = defineEmits(['done', 'close', 'cancel'])
 </script>
diff --git a/packages/frontend-2/components/onboarding/dialog/Manager.vue b/packages/frontend-2/components/onboarding/dialog/Manager.vue
index 8cc2edf1f..5d61b0675 100644
--- a/packages/frontend-2/components/onboarding/dialog/Manager.vue
+++ b/packages/frontend-2/components/onboarding/dialog/Manager.vue
@@ -1,45 +1,54 @@
 <template>
   <OnboardingDialogBase>
-    <template #header>Ready to send your first model?</template>
-    <div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
-      <PlayIcon class="w-10 h-10 text-white" />
-      <span class="text-xs">How and why to download manager</span>
+    <template #header>Install Manager ⚙️</template>
+    <div
+      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
+    >
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube-nocookie.com/embed/ckP97qTGXDQ?rel=0&autoplay=1&"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        class="w-full h-full"
+      ></iframe>
     </div>
-    <div v-if="hasSupportedOs" class="flex justify-center flex-col space-y-2">
-      <FormButton
-        size="xl"
-        class="shadow-md"
-        @click.stop="downloadManager(os === 'Windows' ? 'exe' : 'dmg')"
-      >
-        Download For {{ os }}
-      </FormButton>
-      <FormButton
-        size="xs"
-        text
-        @click.stop="downloadManager(os === 'Windows' ? 'dmg' : 'exe')"
-      >
-        Download for {{ os === 'Windows' ? 'Mac OS' : 'Windows' }}
-      </FormButton>
-    </div>
-    <div v-else class="flex justify-center flex-col space-y-2">
-      <p>
-        Speckle Connectors exist only for applications running on Windows or Mac OS. If
-        you want, you can still go ahead and download Speckle Manager for
-        <FormButton link color="invert" @click="downloadManager('exe')">
-          Windows
+    <div>
+      <div v-if="hasSupportedOs" class="flex justify-center flex-col space-y-2">
+        <FormButton
+          size="xl"
+          class="shadow-md"
+          @click.stop="downloadManager(os === 'Windows' ? 'exe' : 'dmg')"
+        >
+          Download For {{ os }}
         </FormButton>
-        or
-        <FormButton link color="invert" @click="downloadManager('dmg')">
-          Mac OS
+        <FormButton
+          size="xs"
+          text
+          @click.stop="downloadManager(os === 'Windows' ? 'dmg' : 'exe')"
+        >
+          Download for {{ os === 'Windows' ? 'Mac OS' : 'Windows' }}
         </FormButton>
-        .
-      </p>
+      </div>
+      <div v-else class="flex justify-center flex-col space-y-2">
+        <p>
+          Speckle Connectors exist only for applications running on Windows or Mac OS.
+          If you want, you can still go ahead and download Speckle Manager for
+          <FormButton link @click="downloadManager('exe')">Windows</FormButton>
+          or
+          <FormButton link @click="downloadManager('dmg')">Mac OS</FormButton>
+          .
+        </p>
+      </div>
     </div>
+    <!-- <div v-if="hasDownloadedManager" class="flex justify-center flex-col space-y-2">
+      <FormButton size="xl" class="shadow-md" @click.stop="close">Close</FormButton>
+    </div> -->
   </OnboardingDialogBase>
 </template>
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { PlayIcon } from '@heroicons/vue/24/solid'
 import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 
@@ -55,7 +64,7 @@ const getOs = () => {
     // @ts-ignore
     (window.navigator?.userAgentData?.platform as string) ||
     (window.navigator.platform as string)
-  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'MacOS']
+  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'MacOS', 'macOS']
   const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
   const iosPlatforms = ['iPhone', 'iPad', 'iPod']
   let os = 'unknown'
@@ -110,4 +119,8 @@ const downloadManager = (ext: string | null = null) => {
   hasDownloadedManager.value = true
   emit('done')
 }
+
+// const close = () => {
+//   emit('done')
+// }
 </script>