diff --git a/frontend/public/images/integrations/onboard/onboard-github-preview.png b/frontend/public/images/integrations/onboard/onboard-github-preview.png
index 209a8e740d..011aaf7793 100644
Binary files a/frontend/public/images/integrations/onboard/onboard-github-preview.png and b/frontend/public/images/integrations/onboard/onboard-github-preview.png differ
diff --git a/frontend/src/modules/integration/components/integration-list-item.vue b/frontend/src/modules/integration/components/integration-list-item.vue
index 04da18d082..4806bf81da 100644
--- a/frontend/src/modules/integration/components/integration-list-item.vue
+++ b/frontend/src/modules/integration/components/integration-list-item.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="s panel" :class="computedClass">
     <div class="flex items-center justify-between">
-      <img :alt="integration.name" :src="integration.image" class="h-6 mb-4" />
+      <img :alt="integration.name" :src="integration.image" class="h-6 w-6 mb-4" />
       <div>
         <div class="mb-1 flex justify-end">
           <span v-if="isDone" class="badge badge--green">Connected</span>
diff --git a/frontend/src/modules/onboard/components/onboard-integration-item.vue b/frontend/src/modules/onboard/components/onboard-integration-item.vue
index b9bd36c818..5c0a0d78fe 100644
--- a/frontend/src/modules/onboard/components/onboard-integration-item.vue
+++ b/frontend/src/modules/onboard/components/onboard-integration-item.vue
@@ -6,7 +6,7 @@
   >
     <div class="flex gap-16">
       <div class="flex gap-3 items-start flex-grow">
-        <img :alt="integration.name" :src="integration.image" class="h-5" />
+        <img :alt="integration.name" :src="integration.image" class="h-5 w-5" />
         <div class="flex flex-col gap-1">
           <span class="text-black text-sm font-semibold">{{ integration.name }}</span>
           <span class="text-gray-500 text-xs">{{ integration.onboard?.description }}</span>
diff --git a/frontend/src/modules/onboard/components/onboard-sync-data-step.vue b/frontend/src/modules/onboard/components/onboard-sync-data-step.vue
index 4ffb58c075..5e6db2518a 100644
--- a/frontend/src/modules/onboard/components/onboard-sync-data-step.vue
+++ b/frontend/src/modules/onboard/components/onboard-sync-data-step.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="relative">
+    <div class="flex gap-3 mb-6 justify-start bg-gray-100 border border-gray-200 rounded-lg py-2.5 px-3 -mt-4">
+      <div class="flex items-center justify-center h-5">
+        <i class="ri-information-line text-gray-600 text-base" />
+      </div>
+      <div class="text-gray-600 text-xs">
+        Sync your community data to get the most out of crowd.dev. Connect at least 1 integration in order to create your workspace.
+      </div>
+    </div>
     <div
       v-if="loading"
       class="flex items-center justify-center"
@@ -55,8 +63,16 @@ import {
 
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import AppOnboardIntegrationItem from '@/modules/onboard/components/onboard-integration-item.vue';
+import { minValue } from '@vuelidate/validators';
+import useVuelidate from '@vuelidate/core';
 
 const emit = defineEmits(['allowRedirect', 'inviteColleagues']);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+});
 
 const store = useStore();
 
@@ -69,6 +85,12 @@ const highlightedIntegrationsArray = computed(() => CrowdIntegrations.mappedConf
   .filter((i) => i.onboard?.highlight && !!i.onboard));
 const showGithubDialog = ref(false);
 
+useVuelidate({
+  activeIntegrations: {
+    minValue: minValue(1),
+  },
+}, props.modelValue);
+
 onMounted(async () => {
   const params = new URLSearchParams(window.location.search);
   // GitHub redirects back here. This might have to be changed.
diff --git a/frontend/src/modules/onboard/config/steps/invite-colleagues.ts b/frontend/src/modules/onboard/config/steps/invite-colleagues.ts
index ed6def5159..9b69e6760b 100644
--- a/frontend/src/modules/onboard/config/steps/invite-colleagues.ts
+++ b/frontend/src/modules/onboard/config/steps/invite-colleagues.ts
@@ -9,8 +9,7 @@ import { RoleEnum } from '@/modules/user/types/Roles';
 const inviteColleagues: OnboardStepConfig = {
   name: 'Invite colleagues',
   component: AppOnboardInviteColleaguesStep,
-  hasValidation: true,
-  cta: () => 'Finish setup',
+  cta: 'Finish setup',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 3,
     'text-brand-400': currentStep > 3,
@@ -71,14 +70,6 @@ const inviteColleagues: OnboardStepConfig = {
 
         return store.dispatch('auth/doRefreshCurrentUser');
       })
-      // Populate tenant with sample data if user hasn't connected any integrations
-      .then(() => {
-        if (activeIntegrations.length) {
-          return Promise.resolve();
-        }
-
-        return TenantService.populateSampleData(currentTenant.id);
-      })
       // Redirect to Book a demo page
       .then(() => {
         router.push('/onboard/demo');
diff --git a/frontend/src/modules/onboard/config/steps/sync-data.ts b/frontend/src/modules/onboard/config/steps/sync-data.ts
index c78ad439be..d06f34e280 100644
--- a/frontend/src/modules/onboard/config/steps/sync-data.ts
+++ b/frontend/src/modules/onboard/config/steps/sync-data.ts
@@ -4,8 +4,8 @@ import { OnboardStepConfig } from '@/modules/onboard/types/OnboardStepsConfig';
 const syncData: OnboardStepConfig = {
   name: 'Sync data',
   component: AppOnboardSyncDataStep,
-  hasValidation: false,
-  cta: (touched: boolean) => (touched ? 'Continue' : 'I will set this up later'),
+  cta: 'Continue',
+  ctaTooltip: 'Connect at least 1 integration to proceed',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 2,
     'text-brand-400': currentStep > 2,
diff --git a/frontend/src/modules/onboard/config/steps/workspace-details.ts b/frontend/src/modules/onboard/config/steps/workspace-details.ts
index 45c1600ce7..b02796655a 100644
--- a/frontend/src/modules/onboard/config/steps/workspace-details.ts
+++ b/frontend/src/modules/onboard/config/steps/workspace-details.ts
@@ -7,8 +7,7 @@ import Errors from '@/shared/error/errors';
 const workspaceDetails: OnboardStepConfig = {
   name: 'Workspace details',
   component: AppOnboardWorkspaceDetailsStep,
-  hasValidation: true,
-  cta: () => 'Continue',
+  cta: 'Continue',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 1,
     'text-brand-400': currentStep > 1,
diff --git a/frontend/src/modules/onboard/pages/onboard-book-a-demo-page.vue b/frontend/src/modules/onboard/pages/onboard-book-a-demo-page.vue
index f153281fd0..41d595ca4f 100644
--- a/frontend/src/modules/onboard/pages/onboard-book-a-demo-page.vue
+++ b/frontend/src/modules/onboard/pages/onboard-book-a-demo-page.vue
@@ -30,54 +30,15 @@
 </template>
 
 <script setup lang="ts">
-/* eslint-disable */ 
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { renderCal } from '@/utils/cals';
 
 const router = useRouter();
 
 onMounted(() => {
-  (function (C, A, L) {
-    const p = function (a, ar) {
-      a.q.push(ar);
-    };
-    const d = C.document;
-    C.Cal = C.Cal
-      || function () {
-        const cal = C.Cal;
-        const ar = arguments;
-        if (!cal.loaded) {
-          cal.ns = {};
-          cal.q = cal.q || [];
-          d.head.appendChild(d.createElement('script')).src = A;
-          cal.loaded = true;
-        }
-        if (ar[0] === L) {
-          const api = function () {
-            p(api, arguments);
-          };
-          const namespace = ar[1];
-          api.q = api.q || [];
-          typeof namespace === 'string'
-            ? (cal.ns[namespace] = api) && p(api, ar)
-            : p(cal, ar);
-          return;
-        }
-        p(cal, ar);
-      };
-  }(window, 'https://app.cal.com/embed/embed.js', 'init'));
-  Cal('init', { origin: 'https://cal.com' });
-
-  Cal('inline', {
-    elementOrSelector: '#embbeded-script',
+  renderCal({
     calLink: 'team/crowddotdev/get-personalised-onboarding',
-    layout: 'month_view',
-  });
-
-  Cal('ui', {
-    styles: { branding: { brandColor: '#E94F2E' } },
-    hideEventTypeDetails: false,
-    layout: 'month_view',
   });
 });
 
diff --git a/frontend/src/modules/onboard/pages/onboard-page.vue b/frontend/src/modules/onboard/pages/onboard-page.vue
index bdba449657..a82babb9ea 100644
--- a/frontend/src/modules/onboard/pages/onboard-page.vue
+++ b/frontend/src/modules/onboard/pages/onboard-page.vue
@@ -10,7 +10,7 @@
         <h3
           class="text-lg font-semibold leading-8"
         >
-          Howdie<span v-if="currentUser">, {{ currentUser.fullName }}</span>
+          Howdie<span v-if="currentUser?.fullName">, {{ currentUser.fullName }}</span>
         </h3>
         <p class="text-sm text-gray-600 leading-5">
           Let's setup your workspace.
@@ -20,7 +20,7 @@
   </div>
 
   <div class="flex justify-center py-8 border-b border-gray-200 sticky top-0 bg-gray-50 z-10">
-    <div class="flex justify-between items-center limit-width">
+    <div class="flex gap-10 items-center limit-width">
       <div
         v-for="(step, index) in Object.values(onboardingSteps)"
         :key="step.name"
@@ -46,12 +46,7 @@
     <main class="limit-width">
       <component
         :is="stepConfig.component"
-        v-if="stepConfig.hasValidation"
         v-model="form"
-      />
-      <component
-        :is="stepConfig.component"
-        v-else
         @allow-redirect="onConnect"
         @invite-colleagues="onInviteColleagues"
       />
@@ -60,14 +55,22 @@
 
   <div class="fixed bottom-0 w-full bg-white flex justify-center py-4 px-8 border-t border-gray-200">
     <div class="limit-width">
-      <el-button
-        class="btn btn--primary btn--md btn--full"
-        :disabled="$v.$invalid || loadingSubmitAction"
-        @click="onBtnClick"
+      <el-tooltip
+        placement="top"
+        :disabled="!stepConfig.ctaTooltip || !$v.$invalid"
+        :content="stepConfig.ctaTooltip"
       >
-        <span class="text-base">{{ stepConfig.cta(!!activeIntegrations?.length) }}</span>
-        <i class="ri-arrow-right-line text-white text-lg ml-3" />
-      </el-button>
+        <div>
+          <el-button
+            class="btn btn--primary btn--lg btn--full"
+            :disabled="$v.$invalid || loadingSubmitAction"
+            @click="onBtnClick"
+          >
+            <span class="text-base">{{ stepConfig.cta }}</span>
+            <i class="ri-arrow-right-line text-white text-lg ml-3" />
+          </el-button>
+        </div>
+      </el-tooltip>
     </div>
   </div>
 </template>
@@ -95,6 +98,7 @@ const allowRedirect = ref(false);
 const currentStep = ref(1);
 const form = reactive({
   tenantName: currentTenant.value?.name,
+  activeIntegrations: 0,
   invitedUsers: [{
     emails: [],
     roles: ['admin'],
@@ -149,6 +153,8 @@ watch(currentTenant, (tenant, oldTenant) => {
 
 // If currentTenant and activeIntegrations, set second step as the active one
 watch(activeIntegrations, (integrations) => {
+  form.activeIntegrations = integrations.length;
+
   if (integrations.length && currentStep.value < 2) {
     currentStep.value = 2;
   }
diff --git a/frontend/src/modules/onboard/types/OnboardStepsConfig.ts b/frontend/src/modules/onboard/types/OnboardStepsConfig.ts
index 313795f27a..82beb4ca61 100644
--- a/frontend/src/modules/onboard/types/OnboardStepsConfig.ts
+++ b/frontend/src/modules/onboard/types/OnboardStepsConfig.ts
@@ -1,14 +1,14 @@
 export interface OnboardStepConfig {
   name: string;
   component: any;
-  hasValidation: boolean;
   textColor: (currentStep: number) => {
     [key: string]: boolean
   }
   bgColor: (currentStep: number) => {
     [key: string]: boolean
   }
-  cta: (touch?: boolean) => string;
+  cta: string;
+  ctaTooltip?: string;
   submitAction: (payload: any, activeIntegrations?: any[]) => Promise
   alert: () => string;
 }
diff --git a/frontend/src/modules/settings/pages/plans-page.vue b/frontend/src/modules/settings/pages/plans-page.vue
index f25c637e2c..023d763462 100644
--- a/frontend/src/modules/settings/pages/plans-page.vue
+++ b/frontend/src/modules/settings/pages/plans-page.vue
@@ -140,10 +140,18 @@
       </div>
     </div>
   </div>
+  <app-dialog
+    v-model="isCalDialogOpen"
+    size="2extra-large"
+  >
+    <template #content>
+      <div id="embbeded-script" class="w-full px-3 pb-3 min-h-20" />
+    </template>
+  </app-dialog>
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import config from '@/config';
 import Plans from '@/security/plans';
@@ -162,6 +170,8 @@ const { doRefreshCurrentUser } = mapActions('auth');
 
 const store = useStore();
 
+const isCalDialogOpen = ref(false);
+
 const currentTenant = computed(
   () => store.getters['auth/currentTenant'],
 );
@@ -211,6 +221,10 @@ const onManageBillingClick = () => {
   window.open(config.stripe.customerPortalLink, '_blank');
 };
 
+const displayCalDialog = () => {
+  isCalDialogOpen.value = true;
+};
+
 const handleOnCtaClick = ({ key, ctaAction }) => {
   // Send an event with plan request
   window.analytics.track('Change Plan Request', {
@@ -219,7 +233,9 @@ const handleOnCtaClick = ({ key, ctaAction }) => {
     requestedPlan: key,
   });
 
-  ctaAction[activePlan.value]();
+  ctaAction[activePlan.value]({
+    displayCalDialog,
+  });
 };
 </script>
 
diff --git a/frontend/src/modules/settings/settings-pricing-plans.js b/frontend/src/modules/settings/settings-pricing-plans.js
index 5c8f1a7ec8..9e81783985 100644
--- a/frontend/src/modules/settings/settings-pricing-plans.js
+++ b/frontend/src/modules/settings/settings-pricing-plans.js
@@ -1,9 +1,36 @@
 import Plans from '@/security/plans';
 import config from '@/config';
+import { renderCal } from '@/utils/cals';
 
 const crowdHostedPlans = Plans.values;
 const communityPlans = Plans.communityValues;
 
+const intoToCrowdDevCal = ({
+  displayCalDialog,
+}) => {
+  displayCalDialog();
+  setTimeout(() => {
+    renderCal({
+      calLink: 'team/CrowdDotDev/sales',
+    });
+  }, 0);
+};
+
+const customPlanCal = ({
+  displayCalDialog,
+}) => {
+  displayCalDialog();
+  setTimeout(() => {
+    renderCal({
+      calLink: 'team/CrowdDotDev/sales',
+    });
+  }, 0);
+};
+
+const openCustomerPortalLink = () => {
+  window.open(config.stripe.customerPortalLink, '_blank');
+};
+
 /**
  * ctaLabel: Copy shown in the CTA dependent on the active plan.
  * Key of ctaLabel represents the active plan, value represents the copy that should appear on the corresponding column plan
@@ -34,18 +61,10 @@ export const plans = {
         [Plans.values.enterprise]: 'Downgrade to Essential',
       },
       ctaAction: {
-        [Plans.values.eagleEye]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
-        [Plans.values.growth]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
-        [Plans.values.scale]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
-        [Plans.values.enterprise]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
+        [Plans.values.eagleEye]: openCustomerPortalLink,
+        [Plans.values.growth]: openCustomerPortalLink,
+        [Plans.values.scale]: openCustomerPortalLink,
+        [Plans.values.enterprise]: openCustomerPortalLink,
       },
     },
     {
@@ -73,27 +92,10 @@ export const plans = {
         [Plans.values.enterprise]: 'Downgrade to Scale',
       },
       ctaAction: {
-        [Plans.values.eagleEye]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/intro-to-crowd-dev',
-            '_blank',
-          );
-        },
-        [Plans.values.essential]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/intro-to-crowd-dev',
-            '_blank',
-          );
-        },
-        [Plans.values.growth]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/intro-to-crowd-dev',
-            '_blank',
-          );
-        },
-        [Plans.values.enterprise]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
+        [Plans.values.eagleEye]: intoToCrowdDevCal,
+        [Plans.values.essential]: intoToCrowdDevCal,
+        [Plans.values.growth]: intoToCrowdDevCal,
+        [Plans.values.enterprise]: openCustomerPortalLink,
       },
     },
     {
@@ -118,30 +120,10 @@ export const plans = {
         [Plans.values.scale]: 'Get a quote',
       },
       ctaAction: {
-        [Plans.values.eagleEye]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/custom-plan',
-            '_blank',
-          );
-        },
-        [Plans.values.essential]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/custom-plan',
-            '_blank',
-          );
-        },
-        [Plans.values.growth]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/custom-plan',
-            '_blank',
-          );
-        },
-        [Plans.values.scale]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/custom-plan',
-            '_blank',
-          );
-        },
+        [Plans.values.eagleEye]: customPlanCal,
+        [Plans.values.essential]: customPlanCal,
+        [Plans.values.growth]: customPlanCal,
+        [Plans.values.scale]: customPlanCal,
       },
     },
   ],
@@ -164,9 +146,7 @@ export const plans = {
         [Plans.communityValues.custom]: 'Downgrage to Community',
       },
       ctaAction: {
-        [Plans.communityValues.custom]: () => {
-          window.open(config.stripe.customerPortalLink, '_blank');
-        },
+        [Plans.communityValues.custom]: openCustomerPortalLink,
       },
     },
     {
@@ -188,12 +168,7 @@ export const plans = {
         [Plans.communityValues.community]: 'Book a call',
       },
       ctaAction: {
-        [Plans.communityValues.community]: () => {
-          window.open(
-            'https://cal.com/team/CrowdDotDev/custom-plan',
-            '_blank',
-          );
-        },
+        [Plans.communityValues.community]: customPlanCal,
       },
     },
   ],
diff --git a/frontend/src/modules/tenant/components/tenant-new-form.vue b/frontend/src/modules/tenant/components/tenant-new-form.vue
index 2da0a1aa8e..b224bef346 100644
--- a/frontend/src/modules/tenant/components/tenant-new-form.vue
+++ b/frontend/src/modules/tenant/components/tenant-new-form.vue
@@ -80,7 +80,6 @@ const onBtnClick = () => {
     .then((tenant) => TenantService.update(tenant.id, {
       onboardedAt: new Date(),
     })
-      .then(() => TenantService.populateSampleData(tenant.id))
       .then(() => {
         // Close add workspace modal
         emit('update:modelValue', false);
diff --git a/frontend/src/shared/avatar-image/avatar-image.vue b/frontend/src/shared/avatar-image/avatar-image.vue
index 1bb891f716..b0b588f825 100644
--- a/frontend/src/shared/avatar-image/avatar-image.vue
+++ b/frontend/src/shared/avatar-image/avatar-image.vue
@@ -2,6 +2,8 @@
   <img
     v-if="showImage"
     v-lazy="src"
+    lazy="loading"
+    class="object-cover object-center"
     alt="Avatar Logo"
     @error="handleImageError"
   >
@@ -23,3 +25,9 @@ const handleImageError = () => {
   imageError.value = true;
 };
 </script>
+
+<style lang="scss" scoped>
+img[lazy='loading'] {
+  @apply w-full bg-brand-50 animate-pulse;
+}
+</style>
diff --git a/frontend/src/utils/cals.js b/frontend/src/utils/cals.js
new file mode 100644
index 0000000000..046efdb1a9
--- /dev/null
+++ b/frontend/src/utils/cals.js
@@ -0,0 +1,50 @@
+/* eslint-disable */ 
+
+export const renderCal = ({
+  calLink,
+  elementOrSelector = '#embbeded-script',
+  layout = 'month_view',
+}) => {
+  (function (C, A, L) {
+    const p = function (a, ar) {
+      a.q.push(ar);
+    };
+    const d = C.document;
+    C.Cal = C.Cal
+          || function () {
+            const cal = C.Cal;
+            const ar = arguments;
+            if (!cal.loaded) {
+              cal.ns = {};
+              cal.q = cal.q || [];
+              d.head.appendChild(d.createElement('script')).src = A;
+              cal.loaded = true;
+            }
+            if (ar[0] === L) {
+              const api = function () {
+                p(api, arguments);
+              };
+              const namespace = ar[1];
+              api.q = api.q || [];
+              typeof namespace === 'string'
+                ? (cal.ns[namespace] = api) && p(api, ar)
+                : p(cal, ar);
+              return;
+            }
+            p(cal, ar);
+          };
+  }(window, 'https://app.cal.com/embed/embed.js', 'init'));
+  Cal('init', { origin: 'https://cal.com' });
+
+  Cal('inline', {
+    elementOrSelector,
+    calLink,
+    layout,
+  });
+
+  Cal('ui', {
+    styles: { branding: { brandColor: '#E94F2E' } },
+    hideEventTypeDetails: false,
+    layout: 'month_view',
+  });
+};