diff --git a/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue b/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue
index 20d2189a71..3a4a3ac54f 100644
--- a/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue
+++ b/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue
@@ -239,107 +239,114 @@ function markReset(step) {
 			</div>
 		</div>
 
-		<div v-if="!collapsed" class="body">
-			<div class="onb-title">
-				<div class="onb-title-icon" v-html="headerIcon"></div>
+		<div
+			class="onb-collapsible"
+			:class="collapsed ? 'onb-collapsible--collapsed' : 'onb-collapsible--expanded'"
+		>
+			<div class="body">
+				<div class="onb-title">
+					<div class="onb-title-icon" v-html="headerIcon"></div>
 
-				<div class="text-base font-medium">{{ title }}</div>
+					<div class="text-base font-medium">{{ title }}</div>
 
-				<div class="onb-title-steps">
-					{{ completedCount }}/{{ steps.length }} {{ __("steps completed") }}
-				</div>
-			</div>
-
-			<div class="onb-progress-row">
-				<div v-if="progress !== 100">
-					<div class="onb-progress-badge">{{ progress }}% {{ __("completed") }}</div>
-				</div>
-				<div v-else>
-					<div class="onb-progress-badge-complete">
-						{{ progress }}% {{ __("completed") }}
+					<div class="onb-title-steps">
+						{{ completedCount }}/{{ steps.length }} {{ __("steps completed") }}
 					</div>
 				</div>
 
-				<div v-if="skippAll">
-					<span class="onb-skip" @click="resetAll(steps)"> {{ __("Reset All") }}</span>
-				</div>
-				<div v-else>
-					<span class="onb-skip" @click="skipAll(steps)">{{ __("Skip All") }}</span>
-				</div>
-			</div>
-
-			<!-- Steps -->
-			<div class="onb-steps flex flex-col gap-2.5 overflow-hidden">
-				<div
-					style="width: 100%"
-					v-for="(step, i) in steps"
-					:key="i"
-					:class="{ is_complete: step.is_complete }"
-				>
-					<div
-						class="onb-group w-full step-title flex items-center"
-						style="align-items: center"
-						:class="
-							step.is_complete
-								? 'text-extra-muted onb-select-cursor'
-								: 'text-ink-gray-8 onb-select-cursor'
-						"
-					>
-						<div class="onb-step-left" @click="handleAction(step)">
-							<div class="onb-step-icon" v-if="step.is_complete">
-								<div v-html="completeChecklistIcon"></div>
-							</div>
-							<div class="onb-step-icon" v-else>
-								<div v-html="checklistIcon"></div>
-							</div>
-
-							<div v-if="!step.is_skipped">
-								<span
-									class="text-base onb-step-text"
-									:class="step.is_complete ? 'text-extra-muted' : ''"
-								>
-									{{ __(step.action_label) }}
-								</span>
-							</div>
-							<div v-else>
-								<span
-									class="text-base onb-step-text text-extra-muted"
-									style="text-decoration-line: line-through"
-								>
-									{{ __(step.action_label) }}
-								</span>
-							</div>
+				<div class="onb-progress-row">
+					<div v-if="progress !== 100">
+						<div class="onb-progress-badge">{{ progress }}% {{ __("completed") }}</div>
+					</div>
+					<div v-else>
+						<div class="onb-progress-badge-complete">
+							{{ progress }}% {{ __("completed") }}
 						</div>
+					</div>
 
-						<div v-if="!step.is_complete">
-							<div v-if="!step.is_skipped">
-								<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
+					<div v-if="skippAll">
+						<span class="onb-skip" @click="resetAll(steps)">
+							{{ __("Reset All") }}</span
+						>
+					</div>
+					<div v-else>
+						<span class="onb-skip" @click="skipAll(steps)">{{ __("Skip All") }}</span>
+					</div>
+				</div>
+
+				<!-- Steps -->
+				<div class="onb-steps flex flex-col gap-2.5 overflow-hidden">
+					<div
+						style="width: 100%"
+						v-for="(step, i) in steps"
+						:key="i"
+						:class="{ is_complete: step.is_complete }"
+					>
+						<div
+							class="onb-group w-full step-title flex items-center"
+							style="align-items: center"
+							:class="
+								step.is_complete
+									? 'text-extra-muted onb-select-cursor'
+									: 'text-ink-gray-8 onb-select-cursor'
+							"
+						>
+							<div class="onb-step-left" @click="handleAction(step)">
+								<div class="onb-step-icon" v-if="step.is_complete">
+									<div v-html="completeChecklistIcon"></div>
+								</div>
+								<div class="onb-step-icon" v-else>
+									<div v-html="checklistIcon"></div>
+								</div>
+
+								<div v-if="!step.is_skipped">
 									<span
-										style="
-											font-size: 12px;
-											vertical-align: text-top;
-											margin-right: 0px;
-										"
-										class="text-ink-gray-7"
-										@click="markSkip(step)"
+										class="text-base onb-step-text"
+										:class="step.is_complete ? 'text-extra-muted' : ''"
 									>
-										{{ __("Skip") }}
+										{{ __(step.action_label) }}
+									</span>
+								</div>
+								<div v-else>
+									<span
+										class="text-base onb-step-text text-extra-muted"
+										style="text-decoration-line: line-through"
+									>
+										{{ __(step.action_label) }}
 									</span>
 								</div>
 							</div>
-							<div v-if="step.is_skipped">
-								<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
-									<span
-										style="
-											font-size: 12px;
-											vertical-align: text-top;
-											margin-right: 0px;
-										"
-										class="text-ink-gray-7"
-										@click="markReset(step)"
-									>
-										{{ __("Reset") }}
-									</span>
+
+							<div v-if="!step.is_complete">
+								<div v-if="!step.is_skipped">
+									<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
+										<span
+											style="
+												font-size: 12px;
+												vertical-align: text-top;
+												margin-right: 0px;
+											"
+											class="text-ink-gray-7"
+											@click="markSkip(step)"
+										>
+											{{ __("Skip") }}
+										</span>
+									</div>
+								</div>
+								<div v-if="step.is_skipped">
+									<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
+										<span
+											style="
+												font-size: 12px;
+												vertical-align: text-top;
+												margin-right: 0px;
+											"
+											class="text-ink-gray-7"
+											@click="markReset(step)"
+										>
+											{{ __("Reset") }}
+										</span>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js b/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js
index 5f41f7f2f3..53dbd0f19a 100644
--- a/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js
+++ b/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js
@@ -72,7 +72,7 @@ function addStyles() {
 
 	.onb-panel {
 		position: fixed;
-		left: 236px;
+		left: 66px;
 		bottom: 24px;
 		width: 310px;
 		max-height: 80vh;
@@ -83,7 +83,30 @@ function addStyles() {
 		z-index: 1000;
 		display: flex;
 		flex-direction: column;
-	  }
+		overflow-y: auto;
+		transition-property: all;
+		transition-duration: 0.3s;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.expanded .onb-panel {
+		left: 236px;
+	}
+
+	.onb-collapsible {
+		overflow: hidden;
+		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.onb-collapsible--expanded {
+		max-height: 3000px;
+		pointer-events: auto;
+	}
+
+	.onb-collapsible--collapsed {
+		max-height: 0;
+		pointer-events: none;
+	}
 
 	.onb-header-main {
 		display: flex;