diff --git a/assets/front-end-onboarding/css/front-end-onboarding.css b/assets/front-end-onboarding/css/front-end-onboarding.css
new file mode 100644
index 0000000000..ea924029d7
--- /dev/null
+++ b/assets/front-end-onboarding/css/front-end-onboarding.css
@@ -0,0 +1,327 @@
+@font-face {
+	font-family: Gilroy;
+	src: url( '../fonts/Gilroy-Regular.woff2' ) format('woff2');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: Gilroy-Bold;
+	src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+}
+
+.prpl-popover-onboarding {
+
+	& * {
+		box-sizing: border-box;
+	}
+
+	font-family: Gilroy, sans-serif;
+
+	padding: 24px 24px 14px 24px;
+	box-sizing: border-box;
+
+	background: #fff;
+	border: 1px solid #9ca3af;
+	border-radius: 8px;
+	font-weight: 400;
+	max-height: 82vh;
+	width: 1200px;
+	max-width: 80vw;
+
+	position: relative;
+
+	&::backdrop {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-family: Gilroy-Bold, sans-serif;
+	}
+
+	.prpl-popover-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 0.5em;
+		cursor: pointer;
+		background: none;
+		border: none;
+		color: #4b5563;
+	}
+
+	.tour-header {
+
+		.tour-title {
+			margin-top: 0;
+			font-size: 20px;
+			color: #38296d;
+			font-weight: 600;
+		}
+	}
+
+	.tour-footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 10px;
+	}
+
+	.tour-content {
+		font-size: 16px;
+		line-height: 1.5;
+
+		p {
+			margin-bottom: 10px;
+		}
+
+		img {
+			max-width: 100%;
+			height: auto;
+		}
+
+	}
+
+	.prpl-columns-wrapper-flex {
+		display: flex;
+		gap: 40px;
+		overflow: hidden;
+		padding-bottom: 10px;
+
+		.prpl-column {
+			flex-grow: 1;
+			flex-basis: 50%;
+
+			&.prpl-column-content {
+				padding: 20px;
+				border-radius: 6px;
+				background-color: #f6f5fb;
+			}
+		}
+	}
+
+	.prpl-btn {
+		display: inline-block;
+		margin: 1rem 0;
+		padding: 0.75rem 1.25rem;
+		color: var(--prpl-color-button-primary-text);
+		text-decoration: none;
+		cursor: pointer;
+		font-size: 16px;
+		background: var(--prpl-color-button-primary);
+		line-height: 1.25;
+		box-shadow: none;
+		border: none;
+		border-radius: 6px;
+		transition: all 0.25s  ease-in-out;
+		font-weight: 600;
+		text-align: center;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 1;
+
+		&:disabled {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+
+		&:not([disabled]):hover,
+		&:not([disabled]):focus {
+			background: var(--prpl-color-button-primary-hover);
+		}
+
+		&.prpl-btn-secondary {
+			background: var(--prpl-background-banner);
+			color: var(--prpl-color-text);;
+
+			&:not([disabled]):hover,
+			&:not([disabled]):focus {
+				background: var(--prpl-background-banner);
+				color: var(--prpl-color-text);;
+			}
+		}
+	}
+
+	.prpl-complete-task-btn:not(.prpl-btn) {
+		border: none;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+		margin: 0;
+		font-size: 16px;
+		color: #1e40af;
+	}
+
+	.prpl-complete-task-btn-completed:not(.prpl-btn) {
+		color: #059669;
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
+	.prpl-complete-task-btn-error {
+		color: #9f0712;
+	}
+
+	/* WIP for tasks which need user input. */
+	.prpl-onboarding-task-form {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		border: none;
+		padding: 0;
+		margin: 0;
+		background: none;
+
+		input[type="text"] {
+			width: 100%;
+			padding: 0.5rem;
+			border: 1px solid #ccc;
+			border-radius: 0.25rem;
+		}
+
+		/* WIP */
+		select {
+			font-size: 14px;
+			line-height: 2;
+			color: #2c3338;
+			border-color: #8c8f94;
+			box-shadow: none;
+			border-radius: 3px;
+			padding: 0 24px 0 8px;
+			min-height: 30px;
+
+			/* max-width: 25rem; */
+			width: 100%;
+			-webkit-appearance: none;
+			background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
+			background-size: 16px 16px;
+			cursor: pointer;
+			vertical-align: middle;
+		}
+
+		.prpl-complete-task-btn {
+			flex-shrink: 0;
+		}
+	}
+
+	.prpl-complete-task-item {
+		display: flex;
+		gap: 30px;
+		justify-content: space-between;
+	}
+
+	/* Welcome */
+	&[data-prpl-step="0"] {
+
+		.prpl-column:not(.prpl-column-content) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		#prpl-welcome-logo {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			img, svg {
+				height: 150px; /* Set height since it is what we do in the PP dashboard. */
+			}
+		}
+	}
+
+	/* First task */
+	.prpl-onboarding-task {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+
+		.prpl-onboarding-task-title {
+			margin: 0;
+			font-size: 18px;
+			font-weight: 600;
+			color: #4b5563;
+		}
+
+		.prpl-onboarding-task-form {
+			width: 100%;
+			flex-direction: column;
+
+			.prpl-complete-task-btn {
+				align-self: flex-end;
+
+				&.prpl-complete-task-btn-completed {
+					opacity: 0.5;
+					pointer-events: none;
+				}
+			}
+		}
+	}
+
+	/* More tasks */
+	.prpl-column:has(.prpl-task-list) {
+		display: flex;
+		align-items: center;
+	}
+
+	.prpl-task-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+
+		li {
+			padding: 7px 5px;
+			margin: 0;
+
+			&:nth-child(odd) {
+				background-color: #f6f7f9;
+			}
+
+			.task-title {
+				color: #4b5563;
+				font-weight: 500;
+			}
+		}
+	}
+
+	/* File drop zone. */
+	.prpl-file-drop-zone {
+		border: 2px dashed #aaa;
+		border-radius: 10px;
+		padding: 40px;
+		text-align: center;
+		color: #555;
+		transition: background 0.2s, border-color 0.2s;
+		cursor: pointer;
+	}
+
+	.prpl-file-drop-zone.dragover {
+		background: #f0f8ff;
+		border-color: #007bff;
+	}
+
+	.prpl-file-browse-link {
+		color: #007bff;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+	/* WIP */
+	#prpl-upload-status {
+		margin-top: 10px;
+		font-family: monospace;
+	}
+}
+
+/* Task popover is opened. */
+body:has(.prpl-task-popover) {
+
+	/* Hide Tour (parent) popover, this will hide it's backdrop as well. */
+	#prpl-popover-front-end-onboarding {
+		display: none;
+	}
+}
diff --git a/assets/front-end-onboarding/fonts/Gilroy-Bold.woff2 b/assets/front-end-onboarding/fonts/Gilroy-Bold.woff2
new file mode 100644
index 0000000000..e0ccbc4779
Binary files /dev/null and b/assets/front-end-onboarding/fonts/Gilroy-Bold.woff2 differ
diff --git a/assets/front-end-onboarding/fonts/Gilroy-Regular.woff2 b/assets/front-end-onboarding/fonts/Gilroy-Regular.woff2
new file mode 100644
index 0000000000..78e41dce63
Binary files /dev/null and b/assets/front-end-onboarding/fonts/Gilroy-Regular.woff2 differ
diff --git a/assets/front-end-onboarding/images/badge-gauge.png b/assets/front-end-onboarding/images/badge-gauge.png
new file mode 100644
index 0000000000..9cd819bccd
Binary files /dev/null and b/assets/front-end-onboarding/images/badge-gauge.png differ
diff --git a/assets/front-end-onboarding/js/front-end-onboarding.js b/assets/front-end-onboarding/js/front-end-onboarding.js
new file mode 100644
index 0000000000..d59b257330
--- /dev/null
+++ b/assets/front-end-onboarding/js/front-end-onboarding.js
@@ -0,0 +1,714 @@
+/**
+ * Progress Planner Tour
+ * Handles the front-end onboarding tour functionality
+ */
+/* global ProgressPlannerData */
+
+// eslint-disable-next-line no-unused-vars
+class ProgressPlannerTour {
+	constructor( config ) {
+		this.popoverId = 'prpl-popover-front-end-onboarding';
+		this.config = config;
+		this.state = {
+			currentStep: 0,
+			data: {
+				moreTasksCompleted: {},
+				firstTaskCompleted: false,
+				finished: false,
+			},
+			cleanup: null,
+		};
+
+		this.tourSteps = this.initializeTourSteps();
+		this.setupStateProxy();
+
+		// Set DOM related properties.
+		this.popover = document.getElementById( this.popoverId );
+		this.contentWrapper = this.popover.querySelector(
+			'.tour-content-wrapper'
+		);
+		this.nextBtn = this.popover.querySelector( '.prpl-tour-next' );
+		this.dashboardBtn = this.popover.querySelector( '#prpl-dashboard-btn' );
+		this.closeBtn = this.popover.querySelector( '#prpl-tour-close-btn' );
+
+		// Setup event listeners after DOM is ready
+		this.setupEventListeners();
+	}
+
+	/**
+	 * Initialize tour steps configuration
+	 */
+	initializeTourSteps() {
+		return [
+			{
+				id: 'welcome',
+				render: () =>
+					document.getElementById( 'tour-step-welcome' ).innerHTML,
+			},
+			{
+				id: 'first-task',
+				render: () =>
+					document.getElementById( 'tour-step-first-task' ).innerHTML,
+				onMount: ( state ) => this.mountFirstTaskStep( state ),
+				canProceed: ( state ) => !! state.data.firstTaskCompleted,
+			},
+			{
+				id: 'badges',
+				render: () =>
+					document.getElementById( 'tour-step-badges' ).innerHTML,
+			},
+			{
+				id: 'more-tasks',
+				render: () =>
+					document.getElementById( 'tour-step-more-tasks' ).innerHTML,
+				onMount: ( state ) => this.mountMoreTasksStep( state ),
+				canProceed: ( state ) => {
+					return (
+						Object.keys( state.data.moreTasksCompleted ).length >
+							0 &&
+						Object.values( state.data.moreTasksCompleted ).every(
+							Boolean
+						)
+					);
+				},
+			},
+		];
+	}
+
+	/**
+	 * Mount first task step
+	 * @param {Object} state
+	 */
+	mountFirstTaskStep( state ) {
+		const btn = this.popover.querySelector( '#first-task-btn' );
+		if ( ! btn ) return () => {};
+
+		const handler = ( e ) => {
+			const thisBtn = e.target.closest( 'button' );
+
+			const form = thisBtn.closest( 'form' ); // find parent form
+			let formValues = {};
+
+			if ( form ) {
+				const formData = new FormData( form );
+
+				// Convert to plain object
+				formValues = Object.fromEntries( formData.entries() );
+			}
+
+			ProgressPlannerTourUtils.completeTask(
+				thisBtn.dataset.taskId,
+				formValues
+			)
+				.then( () => {
+					thisBtn.classList.add( 'prpl-complete-task-btn-completed' );
+					state.data.firstTaskCompleted = {
+						[ thisBtn.dataset.taskId ]: true,
+					};
+
+					// If everything is completed advance to the next step.
+					this.nextStep();
+				} )
+				.catch( ( error ) => {
+					console.error( error );
+					thisBtn.classList.add( 'prpl-complete-task-btn-error' );
+				} );
+		};
+
+		btn.addEventListener( 'click', handler );
+		return () => btn.removeEventListener( 'click', handler );
+	}
+
+	/**
+	 * Mount more tasks step
+	 * @param {Object} state
+	 */
+	mountMoreTasksStep( state ) {
+		const moreTasks = this.popover.querySelectorAll(
+			'.prpl-task-item[data-task-id]'
+		);
+		moreTasks.forEach( ( btn ) => {
+			state.data.moreTasksCompleted[ btn.dataset.taskId ] = false;
+		} );
+
+		this.tasks = Array.from(
+			this.popover.querySelectorAll( '[data-popover="task"]' )
+		).map( ( t ) => new PopoverTask( t ) );
+
+		const handler = ( e ) => {
+			// Update state.
+			state.data.moreTasksCompleted[ e.target.dataset.taskId ] = true;
+		};
+
+		this.popover.addEventListener( 'taskCompleted', ( e ) => handler( e ) );
+
+		return () => {
+			this.popover.removeEventListener( 'taskCompleted', handler );
+		};
+	}
+
+	/**
+	 * Render current step
+	 */
+	renderStep() {
+		const step = this.tourSteps[ this.state.currentStep ];
+
+		this.popover.querySelector( '.tour-content-wrapper' ).innerHTML =
+			step.render();
+
+		// Cleanup previous step
+		if ( this.state.cleanup ) {
+			this.state.cleanup();
+		}
+
+		// Mount current step
+		if ( typeof step.onMount === 'function' ) {
+			this.state.cleanup = step.onMount( this.state );
+		} else {
+			this.state.cleanup = () => {};
+		}
+
+		// Update step indicator
+		this.popover.dataset.prplStep = this.state.currentStep;
+		this.updateButtonStates();
+		this.updateNextButton();
+	}
+
+	/**
+	 * Update button visibility states
+	 */
+	updateButtonStates() {
+		const isLastStep = this.state.currentStep === this.tourSteps.length - 1;
+
+		// Toggle button visibility
+		this.nextBtn.style.display =
+			isLastStep || this.state.currentStep === 1 // We hide the "First task" step.
+				? 'none'
+				: 'inline-block';
+		this.dashboardBtn.style.display = isLastStep ? 'inline-block' : 'none';
+	}
+
+	/**
+	 * Move to next step
+	 */
+	nextStep() {
+		console.log(
+			'nextStep() called, current step:',
+			this.state.currentStep
+		);
+		const step = this.tourSteps[ this.state.currentStep ];
+
+		if ( step.canProceed && ! step.canProceed( this.state ) ) {
+			console.log( 'Cannot proceed - step requirements not met' );
+			return;
+		}
+
+		if ( this.state.currentStep < this.tourSteps.length - 1 ) {
+			this.state.currentStep++;
+			console.log( 'Moving to step:', this.state.currentStep );
+			this.saveProgressToServer();
+			this.renderStep();
+		} else {
+			console.log( 'Closing tour - reached last step' );
+			this.closeTour();
+		}
+	}
+
+	/**
+	 * Move to previous step
+	 */
+	prevStep() {
+		if ( this.state.currentStep > 0 ) {
+			this.state.currentStep--;
+			this.renderStep();
+		}
+	}
+
+	/**
+	 * Close the tour
+	 */
+	closeTour() {
+		if ( this.popover ) {
+			this.popover.hidePopover();
+		}
+		this.saveProgressToServer();
+
+		// Cleanup active step
+		if ( this.state.cleanup ) {
+			this.state.cleanup();
+		}
+
+		// Reset cleanup
+		this.state.cleanup = null;
+	}
+
+	/**
+	 * Start the tour
+	 */
+	startTour() {
+		if ( this.popover ) {
+			this.popover.showPopover();
+			this.renderStep();
+		}
+	}
+
+	/**
+	 * Save progress to server
+	 */
+	async saveProgressToServer() {
+		try {
+			const response = await fetch( this.config.adminAjaxUrl, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams( {
+					state: JSON.stringify( this.state ),
+					nonce: this.config.nonceProgressPlanner,
+					action: 'progress_planner_tour_save_progress',
+				} ),
+				credentials: 'same-origin',
+			} );
+
+			if ( ! response.ok ) {
+				throw new Error( 'Request failed: ' + response.status );
+			}
+
+			return response.json();
+		} catch ( error ) {
+			console.error( 'Failed to save tour progress:', error );
+		}
+	}
+
+	/**
+	 * Update next button state
+	 */
+	updateNextButton() {
+		const step = this.tourSteps[ this.state.currentStep ];
+
+		if ( step.canProceed ) {
+			this.nextBtn.disabled = ! step.canProceed( this.state );
+		} else {
+			this.nextBtn.disabled = false;
+		}
+	}
+
+	/**
+	 * Update DOM, used for reactive updates.
+	 * All changes which should happen when the state changes should be done here.
+	 */
+	updateDOM() {
+		this.updateNextButton();
+	}
+
+	/**
+	 * Get popover element
+	 */
+	getPopover() {
+		return document.getElementById( this.popoverId );
+	}
+
+	/**
+	 * Setup event listeners
+	 */
+	setupEventListeners() {
+		console.log( 'Setting up event listeners...' );
+		if ( this.popover ) {
+			console.log( 'Popover found:', this.popover );
+
+			this.popover.addEventListener( 'beforetoggle', ( event ) => {
+				if ( event.newState === 'open' ) {
+					console.log( 'Tour opened' );
+				}
+				if ( event.newState === 'closed' ) {
+					console.log( 'Tour closed' );
+				}
+			} );
+
+			if ( this.nextBtn ) {
+				this.nextBtn.addEventListener( 'click', () => {
+					console.log( 'Next button clicked!' );
+					this.nextStep();
+				} );
+			}
+
+			if ( this.dashboardBtn ) {
+				this.dashboardBtn.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					console.log( 'Dashboard button clicked!' );
+					this.state.data.finished = true;
+					this.closeTour();
+
+					// Redirect to the dashboard.
+					window.location.href =
+						this.dashboardBtn.getAttribute( 'data-redirect-to' );
+				} );
+			}
+
+			if ( this.closeBtn ) {
+				this.closeBtn.addEventListener( 'click', () => {
+					console.log( 'Close button clicked!' );
+					this.state.data.finished =
+						this.state.currentStep === this.tourSteps.length - 1;
+					this.closeTour();
+				} );
+			}
+		} else {
+			console.error( 'Popover not found!' );
+		}
+	}
+
+	/**
+	 * Setup state proxy for reactive updates
+	 */
+	setupStateProxy() {
+		this.state.data = this.createDeepProxy( this.state.data, () =>
+			this.updateDOM()
+		);
+	}
+
+	/**
+	 * Create deep proxy for nested object changes
+	 * @param {Object}   target
+	 * @param {Function} callback
+	 */
+	createDeepProxy( target, callback ) {
+		// Recursively wrap existing nested objects first
+		for ( const key of Object.keys( target ) ) {
+			if (
+				target[ key ] &&
+				typeof target[ key ] === 'object' &&
+				! Array.isArray( target[ key ] )
+			) {
+				target[ key ] = this.createDeepProxy( target[ key ], callback );
+			}
+		}
+
+		return new Proxy( target, {
+			set: ( obj, prop, value ) => {
+				if (
+					value &&
+					typeof value === 'object' &&
+					! Array.isArray( value )
+				) {
+					value = this.createDeepProxy( value, callback );
+				}
+				obj[ prop ] = value;
+				callback();
+				return true;
+			},
+		} );
+	}
+}
+
+// eslint-disable-next-line no-unused-vars
+class PopoverTask {
+	constructor( el ) {
+		this.el = el;
+		this.id = el.dataset.taskId;
+		this.popover = null;
+		this.formValues = {};
+		this.openPopoverBtn = el.querySelector( '[prpl-open-task-popover]' );
+
+		// Register popover open event, this is needed to be able to open the popover from the button.
+		this.openPopoverBtn?.addEventListener( 'click', () => this.open() );
+	}
+
+	registerEvents() {
+		this.popover.addEventListener( 'click', ( e ) => {
+			if ( e.target.classList.contains( 'prpl-complete-task-btn' ) ) {
+				const formData = new FormData(
+					this.popover.querySelector( 'form' )
+				);
+				this.formValues = Object.fromEntries( formData.entries() );
+				this.complete();
+			}
+		} );
+
+		this.popover
+			.querySelector( '.prpl-popover-close' )
+			?.addEventListener( 'click', () => this.close() );
+
+		this.setupFormValidation();
+
+		// Initialize upload handling (only if upload field exists)
+		this.setupFileUpload();
+
+		this.el.addEventListener( 'prplFileUploaded', ( e ) => {
+			// Handle file upload for the 'set site icon' task.
+			if ( 'core-siteicon' === e.detail.fileInput.dataset.taskId ) {
+				// Element which will be used to store the file post ID.
+				const nextElementSibling =
+					e.detail.fileInput.nextElementSibling;
+
+				nextElementSibling.value = e.detail.filePost.id;
+
+				// Trigger change so validation is triggered and "Complete" button is enabled.
+				nextElementSibling.dispatchEvent(
+					new CustomEvent( 'change', {
+						bubbles: true,
+					} )
+				);
+			}
+		} );
+	}
+
+	open() {
+		if ( this.popover ) return;
+
+		const content = this.el
+			.querySelector( 'template' )
+			.content.cloneNode( true );
+		this.popover = document.createElement( 'div' );
+		this.popover.className =
+			'prpl-popover prpl-popover-onboarding prpl-task-popover';
+		this.popover.setAttribute( 'popover', 'manual' );
+		this.popover.appendChild( content );
+
+		// Add close button.
+		const closeBtn = document.createElement( 'button' );
+		closeBtn.className = 'prpl-popover-close';
+		closeBtn.setAttribute( 'popovertarget', this.popover.id );
+		closeBtn.setAttribute( 'popovertargetaction', 'hide' );
+		closeBtn.innerHTML = '<span class="dashicons dashicons-no-alt"></span>';
+		this.popover.appendChild( closeBtn );
+
+		document.body.appendChild( this.popover );
+
+		// Register events
+		this.registerEvents();
+
+		this.popover.showPopover();
+	}
+
+	close() {
+		this.popover?.remove();
+		this.popover = null;
+	}
+
+	complete() {
+		ProgressPlannerTourUtils.completeTask( this.id, this.formValues )
+			.then( () => {
+				this.el.classList.add( 'completed' );
+				this.el
+					.querySelector( '.prpl-complete-task-btn' )
+					.classList.add( 'prpl-complete-task-btn-completed' );
+
+				this.close();
+				this.notifyParent();
+			} )
+			.catch( ( error ) => {
+				console.error( error );
+				// TODO: Handle error.
+			} );
+	}
+
+	notifyParent() {
+		const event = new CustomEvent( 'taskCompleted', {
+			bubbles: true,
+			detail: { id: this.id, formValues: this.formValues },
+		} );
+		this.el.dispatchEvent( event );
+	}
+
+	setupFormValidation() {
+		const form = this.popover.querySelector( 'form' );
+		const submitButton = this.popover.querySelector(
+			'.prpl-complete-task-btn'
+		);
+
+		if ( ! form || ! submitButton ) return;
+
+		const validateElements = form.querySelectorAll( '[data-validate]' );
+		if ( validateElements.length === 0 ) return;
+
+		const checkValidation = () => {
+			let isValid = true;
+
+			validateElements.forEach( ( element ) => {
+				const validationType = element.getAttribute( 'data-validate' );
+				let elementValid = false;
+
+				switch ( validationType ) {
+					case 'required':
+						elementValid =
+							element.value !== null &&
+							element.value !== undefined &&
+							element.value !== '';
+						break;
+					case 'not-empty':
+						elementValid = element.value.trim() !== '';
+						break;
+					default:
+						elementValid = true;
+				}
+
+				if ( ! elementValid ) {
+					isValid = false;
+				}
+			} );
+
+			submitButton.disabled = ! isValid;
+		};
+
+		checkValidation();
+		validateElements.forEach( ( element ) => {
+			element.addEventListener( 'change', checkValidation );
+			element.addEventListener( 'input', checkValidation );
+		} );
+	}
+
+	/**
+	 * Handles drag-and-drop or manual file upload for specific tasks.
+	 * Only runs if the form contains an upload field.
+	 */
+	setupFileUpload() {
+		const uploadContainer = this.popover.querySelector(
+			'[data-upload-field]'
+		);
+		if ( ! uploadContainer ) return; // no upload for this task
+
+		const fileInput = uploadContainer.querySelector( 'input[type="file"]' );
+		const statusDiv = uploadContainer.querySelector(
+			'.prpl-upload-status'
+		);
+
+		// Visual drag behavior
+		[ 'dragenter', 'dragover' ].forEach( ( event ) => {
+			uploadContainer.addEventListener( event, ( e ) => {
+				e.preventDefault();
+				uploadContainer.classList.add( 'dragover' );
+			} );
+		} );
+
+		[ 'dragleave', 'drop' ].forEach( ( event ) => {
+			uploadContainer.addEventListener( event, ( e ) => {
+				e.preventDefault();
+				uploadContainer.classList.remove( 'dragover' );
+			} );
+		} );
+
+		uploadContainer.addEventListener( 'drop', ( e ) => {
+			const file = e.dataTransfer.files[ 0 ];
+			if ( file ) {
+				this.uploadFile( file, statusDiv ).then( ( response ) => {
+					this.el.dispatchEvent(
+						new CustomEvent( 'prplFileUploaded', {
+							detail: { file, filePost: response, fileInput },
+							bubbles: true,
+						} )
+					);
+				} );
+			}
+		} );
+
+		fileInput?.addEventListener( 'change', ( e ) => {
+			const file = e.target.files[ 0 ];
+			if ( file ) {
+				this.uploadFile( file, statusDiv, fileInput ).then(
+					( response ) => {
+						this.el.dispatchEvent(
+							new CustomEvent( 'prplFileUploaded', {
+								detail: { file, filePost: response, fileInput },
+								bubbles: true,
+							} )
+						);
+					}
+				);
+			}
+		} );
+	}
+
+	async uploadFile( file, statusDiv ) {
+		// Validate file extension
+		if ( ! this.isValidFaviconFile( file ) ) {
+			const fileInput =
+				this.popover.querySelector( 'input[type="file"]' );
+			const acceptedTypes = fileInput?.accept || 'supported file types';
+			statusDiv.textContent = `Invalid file type. Please upload a file with one of these formats: ${ acceptedTypes }`;
+			return;
+		}
+
+		statusDiv.textContent = `Uploading ${ file.name }...`;
+
+		const formData = new FormData();
+		formData.append( 'file', file );
+		formData.append( 'prplFileUpload', '1' );
+
+		return fetch( '/wp-json/wp/v2/media', {
+			method: 'POST',
+			headers: {
+				'X-WP-Nonce': ProgressPlannerData.nonceWPAPI, // usually wp_localize_script adds this
+			},
+			body: formData,
+			credentials: 'same-origin',
+		} )
+			.then( ( res ) => {
+				if ( 201 !== res.status ) {
+					throw new Error( 'Failed to upload file' );
+				}
+				return res.json();
+			} )
+			.then( ( response ) => {
+				statusDiv.textContent = `${ file.name } uploaded.`;
+				return response;
+			} )
+			.catch( ( error ) => {
+				console.error( error );
+				statusDiv.textContent = `Error: ${ error.message }`;
+			} );
+	}
+
+	/**
+	 * Validate if file matches the accepted file types from the input
+	 * @param {File} file The file to validate
+	 * @return {boolean} True if file extension is supported
+	 */
+	isValidFaviconFile( file ) {
+		const fileInput = this.popover.querySelector( 'input[type="file"]' );
+		if ( ! fileInput || ! fileInput.accept ) {
+			return true; // No restrictions if no accept attribute
+		}
+
+		const acceptedTypes = fileInput.accept
+			.split( ',' )
+			.map( ( type ) => type.trim() );
+		const fileName = file.name.toLowerCase();
+
+		return acceptedTypes.some( ( type ) => {
+			if ( type.startsWith( '.' ) ) {
+				// Extension-based validation
+				return fileName.endsWith( type );
+			} else if ( type.includes( '/' ) ) {
+				// MIME type-based validation
+				return file.type === type;
+			}
+			return false;
+		} );
+	}
+}
+
+class ProgressPlannerTourUtils {
+	/**
+	 * Complete a task via AJAX
+	 * @param {string} taskId
+	 * @param {Object} formValues
+	 */
+	static async completeTask( taskId, formValues = {} ) {
+		const response = await fetch( ProgressPlannerData.adminAjaxUrl, {
+			method: 'POST',
+			body: new URLSearchParams( {
+				form_values: JSON.stringify( formValues ),
+				task_id: taskId,
+				nonce: ProgressPlannerData.nonceProgressPlanner,
+				action: 'progress_planner_tour_complete_task',
+			} ),
+		} );
+
+		if ( ! response.ok ) {
+			throw new Error( 'Request failed: ' + response.status );
+		}
+
+		return response.json();
+	}
+}
diff --git a/classes/class-base.php b/classes/class-base.php
index e31bd8e6bf..c94e3f1abb 100644
--- a/classes/class-base.php
+++ b/classes/class-base.php
@@ -55,6 +55,7 @@
  * @method \Progress_Planner\Admin\Widgets\Challenge get_admin__widgets__challenge()
  * @method \Progress_Planner\Admin\Widgets\Activity_Scores get_admin__widgets__activity_scores()
  * @method \Progress_Planner\Utils\Date get_utils__date()
+ * @method \Progress_Planner\Front_End\Front_End_Onboarding get_front_end_onboarding()
  */
 class Base {
 
@@ -86,11 +87,9 @@ class Base {
 	 */
 	public function init() {
 		if ( ! \function_exists( 'current_user_can' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-includes/capabilities.php';
 		}
 		if ( ! \function_exists( 'wp_get_current_user' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-includes/pluggable.php';
 		}
 
@@ -172,6 +171,9 @@ public function init() {
 
 		// Init the enqueue class.
 		$this->get_admin__enqueue()->init();
+
+		// TODO: Decide when this needs to be initialized.
+		$this->get_front_end__front_end_onboarding();
 	}
 
 	/**
@@ -423,7 +425,6 @@ public function get_file_version( $file ) {
 
 		// Otherwise, use the plugin header.
 		if ( ! \function_exists( 'get_file_data' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-includes/functions.php';
 		}
 
diff --git a/classes/class-suggested-tasks-db.php b/classes/class-suggested-tasks-db.php
index e1444bf08e..40508b24ce 100644
--- a/classes/class-suggested-tasks-db.php
+++ b/classes/class-suggested-tasks-db.php
@@ -312,6 +312,9 @@ public function format_recommendation( $post ) {
 		$terms                 = \wp_get_post_terms( $post_data['ID'], 'prpl_recommendations_provider' );
 		$post_data['provider'] = \is_array( $terms ) && isset( $terms[0] ) ? $terms[0] : null;
 
+		// Set task_id from post_name.
+		$post_data['task_id'] = \progress_planner()->get_suggested_tasks()->get_task_id_from_slug( $post_data['post_name'] );
+
 		$cached[ $post_data['ID'] ] = new Task( $post_data );
 		return $cached[ $post_data['ID'] ];
 	}
diff --git a/classes/class-suggested-tasks.php b/classes/class-suggested-tasks.php
index e25fc60367..db43ac6817 100644
--- a/classes/class-suggested-tasks.php
+++ b/classes/class-suggested-tasks.php
@@ -213,6 +213,19 @@ public function maybe_complete_task() {
 			return;
 		}
 
+		// Mark task as completed and delete the token.
+		$this->mark_task_as_completed( $task_id, $user_id );
+	}
+
+	/**
+	 * Complete a task.
+	 *
+	 * @param string   $task_id The task ID.
+	 * @param int|null $user_id Optional. The user ID for token deletion. If provided, the token will be deleted.
+	 *
+	 * @return bool
+	 */
+	public function mark_task_as_completed( $task_id, $user_id = null ) {
 		if ( ! $this->was_task_completed( $task_id ) ) {
 			$task = \progress_planner()->get_suggested_tasks_db()->get_post( $task_id );
 
@@ -222,10 +235,16 @@ public function maybe_complete_task() {
 				// Insert an activity.
 				$this->insert_activity( $task_id );
 
-				// Delete the token after successful use (one-time use).
-				$this->delete_task_completion_token( $task_id, $user_id );
+				// Delete the token after successful use (one-time use) if user_id is provided.
+				if ( $user_id ) {
+					$this->delete_task_completion_token( $task_id, $user_id );
+				}
+
+				return true;
 			}
 		}
+
+		return false;
 	}
 
 	/**
diff --git a/classes/front-end/class-front-end-onboarding.php b/classes/front-end/class-front-end-onboarding.php
new file mode 100644
index 0000000000..a7e009c6b1
--- /dev/null
+++ b/classes/front-end/class-front-end-onboarding.php
@@ -0,0 +1,386 @@
+<?php
+/**
+ * Front end onboarding.
+ *
+ * @package Progress_Planner
+ */
+
+namespace Progress_Planner\Front_End;
+
+/**
+ * Front end onboarding.
+ */
+class Front_End_Onboarding {
+
+	/**
+	 * Constructor.
+	 *
+	 * @return void
+	 */
+	public function __construct() {
+		// Add popover markup.
+		\add_action( 'wp_footer', [ $this, 'add_popover' ] );
+
+		\add_action( 'wp_footer', [ $this, 'add_popover_step_templates' ] );
+
+		// Add popover scripts.
+		\add_action( 'wp_enqueue_scripts', [ $this, 'add_popover_scripts' ] );
+
+		// Add admin toolbar item.
+		\add_action( 'admin_bar_menu', [ $this, 'add_admin_toolbar_item' ] );
+
+		// Note: AJAX action needs to be registered early (ie wrapping init in is_admin() check will be to late).
+		\add_action( 'wp_ajax_progress_planner_tour_complete_task', [ $this, 'ajax_complete_task' ] );
+		\add_action( 'wp_ajax_progress_planner_tour_save_progress', [ $this, 'ajax_save_tour_progress' ] );
+
+		// Allow only images for the front-end upload.
+		\add_filter( 'rest_pre_insert_attachment', [ $this, 'rest_pre_insert_attachment' ], 10, 2 );
+
+		// Maybe show user notification that tour is not finished.
+		\add_action( 'admin_notices', [ $this, 'maybe_show_user_notification' ] );
+
+		// Maybe clean up the user meta.
+		\add_action( 'current_screen', [ $this, 'maybe_clean_up_user_meta' ] );
+	}
+
+	/**
+	 * Allow only images for the front-end upload.
+	 *
+	 * @param array            $attachment The attachment.
+	 * @param \WP_REST_Request $request The request.
+	 * @return array|\WP_Error The attachment or WP_Error.
+	 */
+	public function rest_pre_insert_attachment( $attachment, $request ) {
+
+		// Only run for our file upload.
+		if ( isset( $request['prplFileUpload'] ) && $request['prplFileUpload'] ) {
+
+			$files = $request->get_file_params();
+
+			if ( empty( $files['file'] ) ) {
+				return new \WP_Error(
+					'rest_no_file',
+					__( 'No file uploaded.', 'progress-planner' ),
+					[ 'status' => 400 ]
+				);
+			}
+
+			$file = $files['file'];
+
+			// Check MIME type.
+			if ( strpos( $file['type'], 'image/' ) !== 0 ) {
+				return new \WP_Error(
+					'rest_invalid_file_type',
+					__( 'Only images are allowed for this upload.', 'progress-planner' ),
+					[ 'status' => 400 ]
+				);
+			}
+		}
+
+		return $attachment;
+	}
+
+	/**
+	 * Maybe clean up the user meta.
+	 *
+	 * @return void
+	 */
+	public function maybe_clean_up_user_meta() {
+		if ( ! \get_current_user_id() ) {
+			return;
+		}
+
+		$screen = \get_current_screen();
+
+		// If the user is on the Progress Planner dashboard delete the user meta.
+		if ( ! $screen || 'toplevel_page_progress-planner' !== $screen->id ) {
+			return;
+		}
+
+		$tour_data = \get_user_meta( \get_current_user_id(), '_prpl_tour_progress', true );
+		if ( ! $tour_data ) {
+			return;
+		}
+
+		\delete_user_meta( \get_current_user_id(), '_prpl_tour_progress' );
+	}
+
+
+	/**
+	 * Maybe show user notification that tour is not finished.
+	 *
+	 * @return void
+	 */
+	public function maybe_show_user_notification() {
+		if ( ! \get_current_user_id() ) {
+			return;
+		}
+
+		$tour_data = \get_user_meta( \get_current_user_id(), '_prpl_tour_progress', true );
+		if ( ! $tour_data ) {
+			return;
+		}
+
+		$screen = \get_current_screen();
+
+		if ( ! $screen ) {
+			return;
+		}
+
+		// If the user is on the Progress Planner dashboard do not display the notification and delete the user meta.
+		// This is a 'safety net' since we currently prevent all admin notices on the Progress Planner dashboard screen.
+		if ( 'toplevel_page_progress-planner' === $screen->id ) {
+			\delete_user_meta( \get_current_user_id(), '_prpl_tour_progress' );
+
+			// Do not show the notification.
+			return;
+		}
+
+		$tour_data = \json_decode( $tour_data, true );
+
+		if ( $tour_data && isset( $tour_data['data'] ) && ! $tour_data['data']['finished'] ) {
+			?>
+			<div class="notice notice-success is-dismissible">
+				<p>
+				<?php
+					printf(
+						/* Translators: %1$s: Opening the anchor tag. %2$s: Closing the anchor tag. */
+						\esc_html__( 'You haven\'t completed the onboarding yet. Go the %1$s Recommendations dashboard %2$s to complete it.', 'progress-planner' ),
+						'<a href="' . \esc_url( admin_url( 'admin.php?page=progress-planner' ) ) . '">',
+						'</a>'
+					);
+				?>
+				</p>
+			</div>
+			<?php
+		}
+
+		// Clean up the user meta.
+		\delete_user_meta( \get_current_user_id(), '_prpl_tour_progress' );
+	}
+
+	/**
+	 * Add popover scripts.
+	 *
+	 * @return void
+	 */
+	public function add_popover_scripts() {
+		// Enqueue variables-color.css.
+		\wp_enqueue_style( 'prpl-variables-color', \constant( 'PROGRESS_PLANNER_URL' ) . '/assets/css/variables-color.css', [], \progress_planner()->get_plugin_version() );
+
+		\wp_add_inline_style( 'prpl-variables-color', \progress_planner()->get_ui__branding()->get_custom_css() );
+
+		// Enqueue front-end-onboarding.css.
+		\wp_enqueue_style( 'prpl-popover-front-end-onboarding', \constant( 'PROGRESS_PLANNER_URL' ) . '/assets/front-end-onboarding/css/front-end-onboarding.css', [], \progress_planner()->get_plugin_version() );
+
+		// Enqueue front-end-onboarding.js.
+		\wp_enqueue_script( 'prpl-popover-front-end-onboarding', \constant( 'PROGRESS_PLANNER_URL' ) . '/assets/front-end-onboarding/js/front-end-onboarding.js', [], \progress_planner()->get_plugin_version(), true );
+
+		\wp_localize_script(
+			'prpl-popover-front-end-onboarding',
+			'ProgressPlannerData',
+			[
+				'adminAjaxUrl'         => \esc_url_raw( admin_url( 'admin-ajax.php' ) ),
+				'nonceProgressPlanner' => \esc_js( \wp_create_nonce( 'progress_planner' ) ),
+				'nonceWPAPI'           => \esc_js( \wp_create_nonce( 'wp_rest' ) ),
+			]
+		);
+	}
+
+	/**
+	 * Add admin toolbar item.
+	 *
+	 * @return void
+	 */
+	public function add_admin_toolbar_item() {
+		if ( is_admin() ) {
+			return;
+		}
+
+		\add_action( 'admin_bar_menu', [ $this, 'add_admin_toolbar_item_callback' ], 100 );
+	}
+
+	/**
+	 * Add admin toolbar item callback.
+	 *
+	 * @param \WP_Admin_Bar $admin_bar The admin bar.
+	 * @return void
+	 */
+	public function add_admin_toolbar_item_callback( $admin_bar ) {
+		$admin_bar->add_node(
+			[
+				'id'    => 'progress-planner-tour',
+				'title' => 'Progress Planner Tour',
+				'href'  => '#',
+				'meta'  => [
+					'onclick' => 'window.prplTour.startTour(); return false;',
+				],
+			]
+		);
+	}
+
+	/**
+	 * Save the tour progress.
+	 *
+	 * @return void
+	 */
+	public function ajax_save_tour_progress() {
+		if ( ! \check_ajax_referer( 'progress_planner', 'nonce', false ) ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Invalid nonce.', 'progress-planner' ) ] );
+		}
+
+		if ( ! isset( $_POST['state'] ) ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'State is required.', 'progress-planner' ) ] );
+		}
+		$progress = \sanitize_text_field( \wp_unslash( $_POST['state'] ) );
+
+		\error_log( print_r( $progress, true ) ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_print_r, WordPress.PHP.DevelopmentFunctions.error_log_error_log
+
+		// Save as user meta?
+		\update_user_meta( \get_current_user_id(), '_prpl_tour_progress', $progress );
+
+		\wp_send_json_success( [ 'message' => \esc_html__( 'Tour progress saved.', 'progress-planner' ) ] );
+	}
+
+	/**
+	 * Complete a task.
+	 *
+	 * @return void
+	 */
+	public function ajax_complete_task() {
+
+		if ( ! \current_user_can( 'manage_options' ) ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'You do not have permission to complete this task.', 'progress-planner' ) ] );
+		}
+
+		if ( ! \check_ajax_referer( 'progress_planner', 'nonce', false ) ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Invalid nonce.', 'progress-planner' ) ] );
+		}
+
+		if ( ! isset( $_POST['task_id'] ) ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Task ID is required.', 'progress-planner' ) ] );
+		}
+
+		$task_id = \sanitize_text_field( \wp_unslash( $_POST['task_id'] ) );
+
+		// Aditional data for the task, besides the task ID.
+		$form_values = [];
+		if ( isset( $_POST['form_values'] ) ) {
+			$form_values = \sanitize_text_field( \wp_unslash( $_POST['form_values'] ) );
+			$form_values = \json_decode( $form_values, true );
+		}
+
+		// Get the task.
+		$task = \progress_planner()->get_suggested_tasks_db()->get_post( $task_id );
+		if ( ! $task ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Task not found.', 'progress-planner' ) ] );
+		}
+
+		// To get the provider and complete the task, we need to use the provider.
+		$provider = \progress_planner()->get_suggested_tasks()->get_tasks_manager()->get_task_provider( $task->get_provider_id() );
+		if ( ! $provider ) {
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Provider not found.', 'progress-planner' ) ] );
+		}
+
+		// WIP: Complete the task.
+		$task_completed = $provider->complete_task( $form_values, $task_id );
+
+		// Note: Marking task as completed will set it it to pending, so user will get celebration. Do we want that?
+		$task_post_marked_as_completed = \progress_planner()->get_suggested_tasks()->mark_task_as_completed( $task_id );
+
+		if ( ! $task_completed || ! $task_post_marked_as_completed ) {
+			\error_log( 'Task not completed: ' . $task_id ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log
+			\wp_send_json_error( [ 'message' => \esc_html__( 'Task not completed.', 'progress-planner' ) ] );
+		}
+
+		\error_log( 'Task completed: ' . $task_id ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log
+		\wp_send_json_success( [ 'message' => \esc_html__( 'Task completed.', 'progress-planner' ) ] );
+	}
+
+	/**
+	 * Add the popover.
+	 *
+	 * @return void
+	 */
+	public function add_popover() {
+		?>
+		<div id="prpl-popover-front-end-onboarding" class="prpl-popover prpl-popover-onboarding" data-prpl-step="0" popover="manual">
+
+			<div class="tour-content-wrapper">
+				<!-- Tour content will be rendered here -->
+			</div>
+
+			<div class="tour-footer">
+				<button class="prpl-tour-next prpl-btn prpl-btn-primary"><?php esc_html_e( 'Next', 'progress-planner' ); ?></button>
+				<button id="prpl-dashboard-btn" class="prpl-btn prpl-btn-primary" data-redirect-to="<?php echo \esc_url( admin_url( 'admin.php?page=progress-planner' ) ); ?>"><?php esc_html_e( 'Take me to the Recommendations dashboard', 'progress-planner' ); ?></button>
+			</div>
+
+			<button id="prpl-tour-close-btn" class="prpl-popover-close" popovertarget="prpl-popover-front-end-onboarding" popovertargetaction="hide">
+				<span class="dashicons dashicons-no-alt"></span>
+			</button>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Add the popover inline script.
+	 *
+	 * @return void
+	 */
+	public function add_popover_step_templates() {
+		$onboarding_tasks = [
+			'core-blogdescription',
+			'select-timezone',
+			'select-locale',
+			'core-siteicon',
+		];
+
+		foreach ( $onboarding_tasks as $task_id ) {
+			$task = \progress_planner()->get_suggested_tasks_db()->get_tasks_by( [ 'task_id' => $task_id ] );
+
+			// If there is no 'blog description' task, create it.
+			if ( ! $task ) {
+				$task_provider = \progress_planner()->get_suggested_tasks()->get_tasks_manager()->get_task_provider( $task_id );
+
+				if ( $task_provider ) {
+					$task_data = $task_provider->get_task_details();
+
+					\progress_planner()->get_suggested_tasks_db()->add( $task_data );
+
+					// Now get the task.
+					$task = \progress_planner()->get_suggested_tasks_db()->get_tasks_by( [ 'task_id' => $task_id ] );
+				}
+			}
+
+			$task_formatted = [
+				'task_id'     => $task[0]->get_task_id(),
+				'title'       => $task[0]->post_title,
+				'url'         => $task[0]->url,
+				'provider_id' => $task[0]->get_provider_id(),
+				'points'      => $task[0]->points,
+			];
+
+			// WIP, add task specific data.
+			if ( 'core-blogdescription' === $task_id ) {
+				$task_formatted['site_description'] = \get_bloginfo( 'description' );
+			}
+
+			$tasks[ $task_id ] = $task_formatted;
+		}
+
+		\progress_planner()->the_view( 'front-end-onboarding/welcome.php' );
+		\progress_planner()->the_view( 'front-end-onboarding/first-task.php', [ 'task' => array_shift( $tasks ) ] ); // WIP: We need only 1 task for this step.
+		\progress_planner()->the_view( 'front-end-onboarding/badges.php' );
+		\progress_planner()->the_view( 'front-end-onboarding/more-tasks.php', [ 'tasks' => $tasks ] ); // WIP: We need up to 5 tasks for this step.
+		?>
+		<script>
+			// Initialize tour when DOM is ready
+			document.addEventListener('DOMContentLoaded', () => {
+
+				// Initialize tour instance
+				window.prplTour = new ProgressPlannerTour( window.ProgressPlannerData );
+			});
+		</script>
+		<?php
+	}
+}
diff --git a/classes/suggested-tasks/class-task.php b/classes/suggested-tasks/class-task.php
index c85db2fa62..6fc0c245f3 100644
--- a/classes/suggested-tasks/class-task.php
+++ b/classes/suggested-tasks/class-task.php
@@ -200,13 +200,11 @@ public function get_rest_formatted_data( $post_id = null ): array {
 
 		// Make sure WP_REST_Posts_Controller is loaded.
 		if ( ! \class_exists( 'WP_REST_Posts_Controller' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php';
 		}
 
 		// Make sure WP_REST_Request is loaded.
 		if ( ! \class_exists( 'WP_REST_Request' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-includes/rest-api/class-wp-rest-request.php';
 		}
 
diff --git a/classes/suggested-tasks/class-tasks-interface.php b/classes/suggested-tasks/class-tasks-interface.php
index 18b3f8f3aa..d94d49ea58 100644
--- a/classes/suggested-tasks/class-tasks-interface.php
+++ b/classes/suggested-tasks/class-tasks-interface.php
@@ -122,4 +122,14 @@ public function add_task_actions( $data = [], $actions = [] );
 	 * @return bool
 	 */
 	public function task_has_activity( $task_id = '' );
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' );
 }
diff --git a/classes/suggested-tasks/data-collector/class-inactive-plugins.php b/classes/suggested-tasks/data-collector/class-inactive-plugins.php
index abcb264766..4fed4dcc6d 100644
--- a/classes/suggested-tasks/data-collector/class-inactive-plugins.php
+++ b/classes/suggested-tasks/data-collector/class-inactive-plugins.php
@@ -47,7 +47,6 @@ public function update_inactive_plugins_cache() {
 	 */
 	protected function calculate_data() {
 		if ( ! \function_exists( 'get_plugins' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-admin/includes/plugin.php';
 		}
 
diff --git a/classes/suggested-tasks/providers/class-blog-description.php b/classes/suggested-tasks/providers/class-blog-description.php
index 61ec8bb519..2b6775ccb0 100644
--- a/classes/suggested-tasks/providers/class-blog-description.php
+++ b/classes/suggested-tasks/providers/class-blog-description.php
@@ -147,4 +147,28 @@ public function add_task_actions( $data = [], $actions = [] ) {
 
 		return $actions;
 	}
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' ) {
+
+		if ( ! $this->capability_required() ) {
+			return false;
+		}
+
+		if ( ! isset( $args['blogdescription'] ) ) {
+			return false;
+		}
+
+		// update_option will return false if the option value is the same as the one being set.
+		\update_option( 'blogdescription', \sanitize_text_field( $args['blogdescription'] ) );
+
+		return true;
+	}
 }
diff --git a/classes/suggested-tasks/providers/class-core-update.php b/classes/suggested-tasks/providers/class-core-update.php
index 0a681b4373..96c2f8ddc6 100644
--- a/classes/suggested-tasks/providers/class-core-update.php
+++ b/classes/suggested-tasks/providers/class-core-update.php
@@ -107,7 +107,6 @@ public function add_core_update_link( $update_actions ) {
 	public function should_add_task() {
 		// Without this \wp_get_update_data() might not return correct data for the core updates (depending on the timing).
 		if ( ! \function_exists( 'get_core_updates' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-admin/includes/update.php';
 		}
 
diff --git a/classes/suggested-tasks/providers/class-fewer-tags.php b/classes/suggested-tasks/providers/class-fewer-tags.php
index 21a929474c..408a97c37a 100644
--- a/classes/suggested-tasks/providers/class-fewer-tags.php
+++ b/classes/suggested-tasks/providers/class-fewer-tags.php
@@ -154,7 +154,6 @@ public function is_task_completed( $task_id = '' ) {
 	protected function is_plugin_active() {
 		if ( null === $this->is_plugin_active ) {
 			if ( ! \function_exists( 'get_plugins' ) ) {
-				// @phpstan-ignore-next-line requireOnce.fileNotFound
 				require_once ABSPATH . 'wp-admin/includes/plugin.php';
 			}
 
diff --git a/classes/suggested-tasks/providers/class-select-locale.php b/classes/suggested-tasks/providers/class-select-locale.php
index 313d4aa5cf..b978dc6777 100644
--- a/classes/suggested-tasks/providers/class-select-locale.php
+++ b/classes/suggested-tasks/providers/class-select-locale.php
@@ -205,7 +205,6 @@ public function print_popover_instructions() {
 	public function print_popover_form_contents() {
 
 		if ( ! \function_exists( 'wp_get_available_translations' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
 			require_once ABSPATH . 'wp-admin/includes/translation-install.php';
 		}
 
@@ -269,27 +268,13 @@ public function handle_interactive_task_specific_submit() {
 			\wp_send_json_error( [ 'message' => \esc_html__( 'Missing setting path.', 'progress-planner' ) ] );
 		}
 
-		$option_updated      = false;
 		$language_for_update = \sanitize_text_field( \wp_unslash( $_POST['value'] ) );
 
 		if ( empty( $language_for_update ) ) {
 			\wp_send_json_error( [ 'message' => \esc_html__( 'Invalid language.', 'progress-planner' ) ] );
 		}
 
-		// Handle translation installation.
-		if ( \current_user_can( 'install_languages' ) ) {
-			// @phpstan-ignore-next-line requireOnce.fileNotFound
-			require_once ABSPATH . 'wp-admin/includes/translation-install.php';
-
-			if ( \wp_can_install_language_pack() ) {
-				$language = \wp_download_language_pack( $language_for_update );
-				if ( $language ) {
-					$language_for_update = $language;
-
-					$option_updated = \update_option( 'WPLANG', $language_for_update );
-				}
-			}
-		}
+		$option_updated = $this->update_language( $language_for_update );
 
 		if ( $option_updated ) {
 			\wp_send_json_success( [ 'message' => \esc_html__( 'Setting updated.', 'progress-planner' ) ] );
@@ -314,4 +299,53 @@ public function add_task_actions( $data = [], $actions = [] ) {
 
 		return $actions;
 	}
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' ) {
+
+		if ( ! $this->capability_required() ) {
+			return false;
+		}
+
+		if ( ! isset( $args['language'] ) ) {
+			return false;
+		}
+
+		return $this->update_language( \sanitize_text_field( \wp_unslash( $args['language'] ) ) );
+	}
+
+	/**
+	 * Update the language.
+	 *
+	 * @param string $language_for_update The language to update.
+	 *
+	 * @return bool
+	 */
+	protected function update_language( $language_for_update ) {
+		// Handle translation installation.
+		if ( \current_user_can( 'install_languages' ) ) {
+			require_once ABSPATH . 'wp-admin/includes/translation-install.php';
+
+			if ( \wp_can_install_language_pack() ) {
+				$language = \wp_download_language_pack( $language_for_update );
+				if ( $language ) {
+					$language_for_update = $language;
+
+					// update_option will return false if the option value is the same as the one being set.
+					\update_option( 'WPLANG', $language_for_update );
+
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
 }
diff --git a/classes/suggested-tasks/providers/class-select-timezone.php b/classes/suggested-tasks/providers/class-select-timezone.php
index 3eb54c8bf1..28f91e4a80 100644
--- a/classes/suggested-tasks/providers/class-select-timezone.php
+++ b/classes/suggested-tasks/providers/class-select-timezone.php
@@ -192,27 +192,9 @@ public function handle_interactive_task_specific_submit() {
 			\wp_send_json_error( [ 'message' => \esc_html__( 'Invalid timezone.', 'progress-planner' ) ] );
 		}
 
-		$update_options = false;
+		$option_updated = $this->update_timezone( $timezone_string );
 
-		// Map UTC+- timezones to gmt_offsets and set timezone_string to empty.
-		if ( \preg_match( '/^UTC[+-]/', $timezone_string ) ) {
-			// Set the gmt_offset to the value of the timezone_string, strip the UTC prefix.
-			$gmt_offset = \preg_replace( '/UTC\+?/', '', $timezone_string );
-
-			// Reset the timezone_string to empty.
-			$timezone_string = '';
-
-			$update_options = true;
-		} elseif ( \in_array( $timezone_string, \timezone_identifiers_list( \DateTimeZone::ALL_WITH_BC ), true ) ) {
-			// $timezone_string is already set, reset the value for $gmt_offset.
-			$gmt_offset = '';
-
-			$update_options = true;
-		}
-
-		if ( $update_options ) {
-			\update_option( 'timezone_string', $timezone_string );
-			\update_option( 'gmt_offset', $gmt_offset );
+		if ( $option_updated ) {
 
 			// We're not checking for the return value of the update_option calls, because it will return false if the value is the same (for example if gmt_offset is already set to '').
 			\wp_send_json_success( [ 'message' => \esc_html__( 'Setting updated.', 'progress-planner' ) ] );
@@ -237,4 +219,64 @@ public function add_task_actions( $data = [], $actions = [] ) {
 
 		return $actions;
 	}
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' ) {
+
+		if ( ! $this->capability_required() ) {
+			return false;
+		}
+
+		if ( ! isset( $args['timezone'] ) ) {
+			return false;
+		}
+
+		$timezone_string = \sanitize_text_field( \wp_unslash( $args['timezone'] ) );
+
+		return $this->update_timezone( $timezone_string );
+	}
+
+	/**
+	 * Update the timezone.
+	 *
+	 * @param string $timezone_string The timezone string to update.
+	 *
+	 * @return bool
+	 */
+	protected function update_timezone( $timezone_string ) {
+
+		$update_options = false;
+
+		// Map UTC+- timezones to gmt_offsets and set timezone_string to empty.
+		if ( \preg_match( '/^UTC[+-]/', $timezone_string ) ) {
+			// Set the gmt_offset to the value of the timezone_string, strip the UTC prefix.
+			$gmt_offset = \preg_replace( '/UTC\+?/', '', $timezone_string );
+
+			// Reset the timezone_string to empty.
+			$timezone_string = '';
+
+			$update_options = true;
+		} elseif ( \in_array( $timezone_string, \timezone_identifiers_list( \DateTimeZone::ALL_WITH_BC ), true ) ) {
+			// $timezone_string is already set, reset the value for $gmt_offset.
+			$gmt_offset = '';
+
+			$update_options = true;
+		}
+
+		if ( $update_options ) {
+			\update_option( 'timezone_string', $timezone_string );
+			\update_option( 'gmt_offset', $gmt_offset );
+
+			return true;
+		}
+
+		return false;
+	}
 }
diff --git a/classes/suggested-tasks/providers/class-site-icon.php b/classes/suggested-tasks/providers/class-site-icon.php
index 7bf34c85f4..68d8eb253d 100644
--- a/classes/suggested-tasks/providers/class-site-icon.php
+++ b/classes/suggested-tasks/providers/class-site-icon.php
@@ -159,4 +159,28 @@ public function add_task_actions( $data = [], $actions = [] ) {
 
 		return $actions;
 	}
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' ) {
+
+		if ( ! $this->capability_required() ) {
+			return false;
+		}
+
+		if ( ! isset( $args['post_id'] ) ) {
+			return false;
+		}
+
+		// update_option will return false if the option value is the same as the one being set.
+		\update_option( 'site_icon', \sanitize_text_field( $args['post_id'] ) );
+
+		return true;
+	}
 }
diff --git a/classes/suggested-tasks/providers/class-tasks.php b/classes/suggested-tasks/providers/class-tasks.php
index b3cac345b0..88cd55e135 100644
--- a/classes/suggested-tasks/providers/class-tasks.php
+++ b/classes/suggested-tasks/providers/class-tasks.php
@@ -801,4 +801,16 @@ public function task_has_activity( $task_id = '' ) {
 
 		return ! empty( $activity );
 	}
+
+	/**
+	 * Complete the task.
+	 *
+	 * @param array  $args The task data.
+	 * @param string $task_id The task ID.
+	 *
+	 * @return bool
+	 */
+	public function complete_task( $args = [], $task_id = '' ) {
+		return false;
+	}
 }
diff --git a/classes/ui/class-branding.php b/classes/ui/class-branding.php
index a7fdc6e9df..7ce3bd6188 100644
--- a/classes/ui/class-branding.php
+++ b/classes/ui/class-branding.php
@@ -187,6 +187,17 @@ public function get_ravi_name(): string {
 			: $this->get_api_data()['ravis_name'];
 	}
 
+	/**
+	 * Get the Ravi name.
+	 *
+	 * @return string
+	 */
+	public function get_progress_planner_name(): string {
+		return empty( $this->get_api_data() ) || empty( $this->get_api_data()['progress_planner_name'] )
+			? 'Progress Planner'
+			: $this->get_api_data()['progress_planner_name'];
+	}
+
 	/**
 	 * Get data from a remote URL, cached.
 	 *
diff --git a/phpstan.neon.dist b/phpstan.neon.dist
index ca24110c34..6a298236e8 100644
--- a/phpstan.neon.dist
+++ b/phpstan.neon.dist
@@ -31,6 +31,10 @@ parameters:
     - '#Call to an undefined method Progress_Planner\\Base\:\:get_[a-zA-Z0-9\\_]+\(\).#'
     - '#Cannot call method modify\(\) on DateTime\|false.#'
     - '#Cannot call method format\(\) on DateTime\|false.#'
+    - '#Path in require_once\(\) "wp-admin/includes/[a-zA-Z0-9\/_-]+\.php" is not a file or it does not exist.#'
+    - '#Path in require_once\(\) "1wp-admin/includes/[a-zA-Z0-9\/_-]+\.php" is not a file or it does not exist.#'
+    - '#Path in require_once\(\) "wp-includes/[a-zA-Z0-9\/_-]+\.php" is not a file or it does not exist.#'
+    - '#Path in require_once\(\) "1wp-includes/[a-zA-Z0-9\/_-]+\.php" is not a file or it does not exist.#'
     -
       identifier: variable.undefined
       path: views/popovers/email-sending.php
diff --git a/views/front-end-onboarding/badges.php b/views/front-end-onboarding/badges.php
new file mode 100644
index 0000000000..1e496f4486
--- /dev/null
+++ b/views/front-end-onboarding/badges.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Tour step view.
+ *
+ * @package Progress_Planner
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<!-- Tour step badges -->
+<script type="text/template" id="tour-step-badges">
+	<div class="tour-header">
+		<h2 class="tour-title">
+			<?php \esc_html_e( 'Our badges are waiting for you', 'progress-planner' ); ?>
+		</h2>
+	</div>
+	<div class="tour-content">
+		<div class="prpl-columns-wrapper-flex">
+			<div class="prpl-column prpl-column-content">
+				<p>
+					<?php \esc_html_e( 'For every recommendation you complete, you earn points. When you earn at least 10 points each month, you\'ll unlock the special badge for that month. Can you collect them all?', 'progress-planner' ); ?>
+				</p>
+			</div>
+			<div class="prpl-column">
+				<img src="<?php echo esc_url( \constant( 'PROGRESS_PLANNER_URL' ) ); ?>/assets/front-end-onboarding/images/badge-gauge.png" alt="Badges">
+			</div>
+		</div>
+	</div>
+</script>
diff --git a/views/front-end-onboarding/first-task.php b/views/front-end-onboarding/first-task.php
new file mode 100644
index 0000000000..4dbb3c0b8e
--- /dev/null
+++ b/views/front-end-onboarding/first-task.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Tour step view.
+ *
+ * @package Progress_Planner
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<!-- Tour step connect -->
+<script type="text/template" id="tour-step-first-task">
+	<div class="tour-header">
+		<h2 class="tour-title">
+			<?php \esc_html_e( 'Complete your first task', 'progress-planner' ); ?>
+		</h2>
+	</div>
+	<div class="tour-content">
+		<div class="prpl-columns-wrapper-flex">
+			<div class="prpl-column prpl-column-content">
+				<p>
+					<?php
+					/* translators: %s: Progress Planner name. */
+					\printf( \esc_html__( 'This is an example of a recommendation in %s. It\'s a task that helps improve your website. Most recommendations can be completed in under five minutes. Once you\'ve completed a recommendation, we\'ll celebrate your success together and provide you with a new recommendation.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_progress_planner_name() ) );
+					?>
+				</p>
+				<p><?php \esc_html_e( 'Let\'s give it a try!', 'progress-planner' ); ?></p>
+			</div>
+			<div class="prpl-column">
+				<?php if ( isset( $task ) ) : ?>
+					<?php \progress_planner()->the_view( 'front-end-onboarding/tasks/blog-description.php', [ 'task' => $task ] ); ?>
+				<?php endif; ?>
+			</div>
+		</div>
+	</div>
+</script>
diff --git a/views/front-end-onboarding/more-tasks.php b/views/front-end-onboarding/more-tasks.php
new file mode 100644
index 0000000000..11213cdc12
--- /dev/null
+++ b/views/front-end-onboarding/more-tasks.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Tour step view.
+ *
+ * @package Progress_Planner
+ *
+ * @var array $tasks
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<!-- Tour step more tasks -->
+<script type="text/template" id="tour-step-more-tasks">
+	<div class="tour-header">
+		<h2 class="tour-title">
+			<?php \esc_html_e( 'Complete more tasks', 'progress-planner' ); ?>
+		</h2>
+	</div>
+	<div class="tour-content">
+		<div class="prpl-columns-wrapper-flex">
+			<div class="prpl-column prpl-column-content">
+				<p>
+					<?php
+					/* translators: %1$s: Progress Planner name. %2$s: Ravi name. */
+					\printf( \esc_html__( 'You now master the basics of %1$s! We\'ve got a few more recommendations lined up for you. Are you ready to take them on now, or should we show you where you can find %2$s\'s Recommendations from now on?', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_progress_planner_name() ), \esc_html( \progress_planner()->get_ui__branding()->get_ravi_name() ) );
+					?>
+					</p>
+			</div>
+			<div class="prpl-column">
+				<ul class="prpl-task-list">
+					<?php foreach ( $tasks as $prpl_task ) : ?>
+					<li class="prpl-complete-task-item">
+						<span class="task-title" style="flex-shrink: 0;">
+							<?php echo esc_html( $prpl_task['title'] ); ?>
+						</span>
+
+						<div class="prpl-task-item" data-popover="task" data-task-id="<?php echo esc_attr( $prpl_task['task_id'] ); ?>">
+							<button class="prpl-complete-task-btn" prpl-open-task-popover><?php \esc_html_e( 'Start this recommendation', 'progress-planner' ); ?></button>
+
+							<template style="display: none;">
+								<?php \progress_planner()->the_view( 'front-end-onboarding/tasks/' . $prpl_task['task_id'] . '.php', [ 'task' => $prpl_task ] ); ?>
+							</template>
+						</div>
+					</li>
+					<?php endforeach; ?>
+			</ul>
+			</div>
+		</div>
+	</div>
+</script>
diff --git a/views/front-end-onboarding/tasks/blog-description.php b/views/front-end-onboarding/tasks/blog-description.php
new file mode 100644
index 0000000000..8b40cd8fbe
--- /dev/null
+++ b/views/front-end-onboarding/tasks/blog-description.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Onboarding task, blog description.
+ *
+ * @package Progress_Planner
+ *
+ * @var array $task
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<div class="prpl-onboarding-task">
+	<div>
+		<h3 class="prpl-onboarding-task-title">
+			<?php echo esc_html( $task['title'] ); ?>
+		</h3>
+		<p>
+			<?php \esc_html_e( 'In a few words, explain what this site is about. This information is used in your website\'s schema and RSS feeds, and can be displayed on your site. The tagline typically is your site\'s mission statement.', 'progress-planner' ); ?>
+		</p>
+	</div>
+	<form class="prpl-onboarding-task-form" onsubmit="return false;">
+		<input type="text" name="blogdescription" value="<?php echo esc_attr( $task['site_description'] ); ?>" />
+		<button type="button" id="first-task-btn" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-primary">
+			<?php if ( isset( $task['site_description'] ) && '' !== $task['site_description'] ) : ?>
+				<?php \esc_html_e( 'Verify tagline', 'progress-planner' ); ?>
+			<?php else : ?>
+				<?php \esc_html_e( 'Set tagline', 'progress-planner' ); ?>
+			<?php endif; ?>
+		</button>
+	</form>
+</div>
diff --git a/views/front-end-onboarding/tasks/core-siteicon.php b/views/front-end-onboarding/tasks/core-siteicon.php
new file mode 100644
index 0000000000..96f025102e
--- /dev/null
+++ b/views/front-end-onboarding/tasks/core-siteicon.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Onboarding task, site icon.
+ *
+ * @package Progress_Planner
+ *
+ * @var array $task
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+<div class="prpl-onboarding-task">
+	<div class="tour-content">
+		<div>
+			<h3 class="prpl-onboarding-task-title">
+				<?php echo esc_html( $task['title'] ); ?>
+			</h3>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipiscing elit, eget interdum nostra tortor vestibulum ultrices, quisque congue nibh ullamcorper sapien natoque.
+			</p>
+
+			<p>
+				Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
+			</p>
+		</div>
+		<form class="prpl-onboarding-task-form" onsubmit="return false;">
+
+			<div class="prpl-file-drop-zone" data-upload-field>
+				<p>
+				<?php
+					printf(
+						// translators: %1$s is opening label tag, %2$s is the closing label tag.
+						\esc_html__( 'Drag & drop a file here, or %1$s browse %2$s', 'progress-planner' ),
+						'<label for="prpl-file-input-core-siteicon" class="prpl-file-browse-link">',
+						'</label>'
+					);
+					?>
+				</p>
+				<input type="file" id="prpl-file-input-core-siteicon" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" accept=".ico,.png,.jpg,.jpeg,.gif,.svg,.webp" hidden>
+				<input type="hidden" name="post_id" value="" data-validate="required">
+				<div class="prpl-upload-status"></div> <!-- WIP -->
+			</div>
+			<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-primary">
+				<?php \esc_html_e( 'Set site icon', 'progress-planner' ); ?>
+			</button>
+		</form>
+	</div>
+</div>
diff --git a/views/front-end-onboarding/tasks/select-locale.php b/views/front-end-onboarding/tasks/select-locale.php
new file mode 100644
index 0000000000..0fc43f35e5
--- /dev/null
+++ b/views/front-end-onboarding/tasks/select-locale.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * Onboarding task, set site locale.
+ *
+ * @package Progress_Planner
+ *
+ * @var array $task
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! \function_exists( 'request_filesystem_credentials' ) ) {
+	require_once ABSPATH . 'wp-admin/includes/file.php';
+}
+
+if ( ! \function_exists( 'wp_get_available_translations' ) ) {
+	require_once ABSPATH . 'wp-admin/includes/translation-install.php';
+}
+
+$prpl_languages    = \get_available_languages();
+$prpl_translations = \wp_get_available_translations();
+$prpl_locale       = \get_locale();
+if ( ! \in_array( $prpl_locale, $prpl_languages, true ) ) {
+	$prpl_locale = '';
+}
+?>
+
+<div class="prpl-onboarding-task">
+	<div class="tour-content">
+		<div>
+			<h3 class="prpl-onboarding-task-title">
+				<?php echo esc_html( $task['title'] ); ?>
+			</h3>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipiscing elit, eget interdum nostra tortor vestibulum ultrices, quisque congue nibh ullamcorper sapien natoque.
+			</p>
+
+			<p>
+				Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
+			</p>
+		</div>
+		<form class="prpl-onboarding-task-form" onsubmit="return false;">
+			<?php
+
+				/* This is not required field because default locale (selection with empty value) is English US */
+				\wp_dropdown_languages(
+					[
+						'name'                        => 'language',
+						'id'                          => 'language',
+						'selected'                    => $prpl_locale,
+						'languages'                   => $prpl_languages,
+						'translations'                => $prpl_translations,
+						'show_available_translations' => \current_user_can( 'install_languages' ) && \wp_can_install_language_pack(),
+						'echo'                        => true,
+					]
+				);
+				?>
+			<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-primary">
+				<?php \esc_html_e( 'Set the locale', 'progress-planner' ); ?>
+			</button>
+		</form>
+	</div>
+</div>
diff --git a/views/front-end-onboarding/tasks/select-timezone.php b/views/front-end-onboarding/tasks/select-timezone.php
new file mode 100644
index 0000000000..c4da3dc4ff
--- /dev/null
+++ b/views/front-end-onboarding/tasks/select-timezone.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Onboarding task, set site timezone.
+ *
+ * @package Progress_Planner
+ *
+ * @var array $task
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$prpl_current_offset = \get_option( 'gmt_offset' );
+$prpl_tzstring       = \get_option( 'timezone_string' );
+?>
+
+<div class="prpl-onboarding-task">
+	<div class="tour-content">
+		<div>
+			<h3 class="prpl-onboarding-task-title">
+				<?php echo esc_html( $task['title'] ); ?>
+			</h3>
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipiscing elit, eget interdum nostra tortor vestibulum ultrices, quisque congue nibh ullamcorper sapien natoque.
+			</p>
+
+			<p>
+				Venenatis parturient suspendisse massa cursus litora dapibus auctor, et vestibulum blandit condimentum quis ultrices sagittis aliquam.
+			</p>
+		</div>
+		<form class="prpl-onboarding-task-form" onsubmit="return false;">
+			<select id="timezone" name="timezone" data-validate="required">
+				<?php echo \wp_timezone_choice( $prpl_tzstring, \get_user_locale() ); ?>
+			</select>
+			<button type="button" data-task-id="<?php echo esc_attr( $task['task_id'] ); ?>" class="prpl-complete-task-btn prpl-btn prpl-btn-primary">
+				<?php \esc_html_e( 'Set the timezone', 'progress-planner' ); ?>
+			</button>
+		</form>
+	</div>
+</div>
diff --git a/views/front-end-onboarding/welcome.php b/views/front-end-onboarding/welcome.php
new file mode 100644
index 0000000000..3671504559
--- /dev/null
+++ b/views/front-end-onboarding/welcome.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Tour step view.
+ *
+ * @package Progress_Planner
+ */
+
+// Exit if accessed directly.
+if ( ! \defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<!-- Tour step welcome -->
+<script type="text/template" id="tour-step-welcome">
+	<div class="tour-header">
+		<h2 class="tour-title">
+			<?php
+			/* translators: %s: Progress Planner name. */
+			\printf( \esc_html__( 'Welcome to %s!', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_progress_planner_name() ) );
+			?>
+		</h2>
+	</div>
+	<div class="tour-content">
+		<div class="prpl-columns-wrapper-flex">
+			<div class="prpl-column prpl-column-content">
+				<p>
+					<?php
+					/* translators: %s: Progress Planner name. */
+					\printf( \esc_html__( '%s helps you set clear, focused goals for your website, and actually reach them.', 'progress-planner' ), \esc_html( \progress_planner()->get_ui__branding()->get_progress_planner_name() ) );
+					?>
+				</p>
+				<p>
+					<?php \esc_html_e( 'Instead of getting stuck in to-do lists or unfinished ideas, you’ll turn your goals into small, achievable steps. Everything happens inside your WordPress dashboard, with no need for extra tools or complicated setups.', 'progress-planner' ); ?>
+				</p>
+				<p>
+					<?php \esc_html_e( 'The onboarding takes just 3 to 5 minutes. You’ll go through a few simple steps and complete your first recommendation. After that, you’ll be ready to start making real progress.', 'progress-planner' ); ?>
+				</p>
+			</div>
+			<div class="prpl-column">
+				<div id="prpl-welcome-logo">
+					<?php \progress_planner()->get_ui__branding()->the_logo(); ?>
+				</div>
+			</div>
+		</div>
+	</div>
+</script>