diff --git a/app/components/new-join-steps/base-step.js b/app/components/new-join-steps/base-step.js
new file mode 100644
index 000000000..8818a3450
--- /dev/null
+++ b/app/components/new-join-steps/base-step.js
@@ -0,0 +1,125 @@
+import { action } from '@ember/object';
+import { debounce } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { JOIN_DEBOUNCE_TIME } from '../../constants/join';
+import { validateWordCount } from '../../utils/validator';
+import { scheduleOnce } from '@ember/runloop';
+import { getLocalStorageItem, setLocalStorageItem } from '../../utils/storage';
+
+export default class BaseStepComponent extends Component {
+  stepValidation = {};
+
+  @tracked data = {};
+  @tracked errorMessage = {};
+  @tracked wordCount = {};
+
+  get storageKey() {
+    return '';
+  }
+
+  postLoadInitialize() {}
+
+  constructor(...args) {
+    super(...args);
+    scheduleOnce('afterRender', this, this.initializeFormState);
+  }
+
+  initializeFormState() {
+    let saved = {};
+    try {
+      const stored = getLocalStorageItem(this.storageKey, '{}');
+      saved = stored ? JSON.parse(stored) : {};
+    } catch (e) {
+      console.warn('Failed to parse stored form data:', e);
+      saved = {};
+    }
+    this.data = saved;
+
+    this.errorMessage = Object.fromEntries(
+      Object.keys(this.stepValidation).map((k) => [k, '']),
+    );
+
+    this.wordCount = Object.fromEntries(
+      Object.keys(this.stepValidation).map((k) => {
+        let val = String(this.data[k] || '');
+        return [k, val.trim().split(/\s+/).filter(Boolean).length || 0];
+      }),
+    );
+
+    this.postLoadInitialize();
+
+    const valid = this.isDataValid();
+    this.args.onValidityChange(valid);
+  }
+
+  @action inputHandler(e) {
+    if (!e?.target) return;
+    const field = e.target.name;
+    const value = e.target.value;
+    debounce(this, this.handleFieldUpdate, field, value, JOIN_DEBOUNCE_TIME);
+  }
+
+  validateField(field, value) {
+    const limits = this.stepValidation[field];
+    const fieldType = limits?.type || 'text';
+
+    if (fieldType === 'select' || fieldType === 'dropdown') {
+      const hasValue = value && String(value).trim().length > 0;
+      return { isValid: hasValue };
+    }
+    return validateWordCount(value, limits);
+  }
+
+  isDataValid() {
+    for (const field of Object.keys(this.stepValidation)) {
+      const result = this.validateField(field, this.data[field]);
+      if (!result.isValid) return false;
+    }
+    return true;
+  }
+
+  handleFieldUpdate(field, value) {
+    this.updateFieldValue(field, value);
+    const result = this.validateField(field, value);
+    this.updateWordCount(field, result);
+    this.updateErrorMessage(field, result);
+    this.syncFormValidity();
+  }
+
+  updateFieldValue(field, value) {
+    this.data = { ...this.data, [field]: value };
+    setLocalStorageItem(this.storageKey, JSON.stringify(this.data));
+  }
+
+  updateWordCount(field, result) {
+    const wordCount = result.wordCount ?? 0;
+    this.wordCount = { ...this.wordCount, [field]: wordCount };
+  }
+
+  updateErrorMessage(field, result) {
+    this.errorMessage = {
+      ...this.errorMessage,
+      [field]: this.formatError(field, result),
+    };
+  }
+
+  formatError(field, result) {
+    const limits = this.stepValidation[field];
+    if (result.isValid) return '';
+
+    const fieldType = limits?.type || 'text';
+    if (fieldType === 'select' || fieldType === 'dropdown') {
+      return 'Please choose an option';
+    }
+    if (result.remainingToMin) {
+      return `At least ${result.remainingToMin} more word(s) required`;
+    }
+    return `Maximum ${limits?.max ?? 'N/A'} words allowed`;
+  }
+
+  syncFormValidity() {
+    const allValid = this.isDataValid();
+    this.args.onValidityChange(allValid);
+  }
+}
diff --git a/app/components/new-join-steps/new-step-five.hbs b/app/components/new-join-steps/new-step-five.hbs
new file mode 100644
index 000000000..ded36fdc4
--- /dev/null
+++ b/app/components/new-join-steps/new-step-five.hbs
@@ -0,0 +1,33 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@heading}}</h1>
+    <p class="section-instruction">{{@subHeading}}</p>
+  </div>
+
+  <Reusables::TextAreaBox @field='Why you want to join Real Dev Squad?' @name='whyRds'
+    @placeHolder='Tell us why you want to join our community...' @required={{true}} @value={{this.data.whyRds}}
+    @onInput={{this.inputHandler}} />
+  {{#if this.errorMessage.whyRds}}
+  <div class='error__message'>{{this.errorMessage.whyRds}}</div>
+  {{/if}}
+
+  <div class="form-grid form-grid--2">
+    <div class="form-grid__item">
+      <Reusables::InputBox @field='No of hours/week you are willing to contribute?' @name='numberOfHours'
+        @placeHolder='Enter value between 1-100.' @type='number' @required={{true}} @value={{this.data.numberOfHours}}
+        @onInput={{this.inputHandler}} @options={{this.heardFrom}} />
+      {{#if this.errorMessage.numberOfHours}}
+      <div class='error__message'>{{this.errorMessage.numberOfHours}}</div>
+      {{/if}}
+    </div>
+
+    <div class="form-grid__item">
+      <Reusables::Dropdown @field='How did you hear about us?' @name='foundFrom'
+        @placeHolder='Choose from below options' @required={{true}} @value={{this.data.foundFrom}}
+        @options={{this.heardFrom}} @onChange={{this.inputHandler}} />
+      {{#if this.errorMessage.foundFrom}}
+      <div class='error__message'>{{this.errorMessage.foundFrom}}</div>
+      {{/if}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/new-step-five.js b/app/components/new-join-steps/new-step-five.js
new file mode 100644
index 000000000..71a353264
--- /dev/null
+++ b/app/components/new-join-steps/new-step-five.js
@@ -0,0 +1,16 @@
+import BaseStepComponent from './base-step';
+import {
+  NEW_STEP_LIMITS,
+  STEP_DATA_STORAGE_KEY,
+} from '../../constants/new-join-form';
+import { heardFrom } from '../../constants/social-data';
+
+export default class NewStepFiveComponent extends BaseStepComponent {
+  storageKey = STEP_DATA_STORAGE_KEY.stepFive;
+  heardFrom = heardFrom;
+
+  stepValidation = {
+    whyRds: NEW_STEP_LIMITS.stepFive.whyRds,
+    foundFrom: NEW_STEP_LIMITS.stepFive.foundFrom,
+  };
+}
diff --git a/app/components/new-join-steps/new-step-four.hbs b/app/components/new-join-steps/new-step-four.hbs
new file mode 100644
index 000000000..40106a442
--- /dev/null
+++ b/app/components/new-join-steps/new-step-four.hbs
@@ -0,0 +1,62 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@heading}}</h1>
+    <p class="section-instruction">{{@subHeading}}</p>
+  </div>
+
+  <Reusables::InputBox @field='Phone Number' @name='phoneNumber' @placeHolder='+91 80000 00000' @type='tel'
+    @required={{true}} @value={{this.data.phoneNumber}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.phoneNumber}}
+  <div class='error__message'>{{this.errorMessage.phoneNumber}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Twitter' @name='twitter' @placeHolder='https://twitter.com/gangster-rishi' @type='text'
+    @required={{true}} @value={{this.data.twitter}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.twitter}}
+  <div class='error__message'>{{this.errorMessage.twitter}}</div>
+  {{/if}}
+
+  {{#if this.showGitHub}}
+  <Reusables::InputBox @field='GitHub' @name='github' @placeHolder='https://github.com/codewithrishi' @type='text'
+    @required={{true}} @value={{this.data.github}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.github}}
+  <div class='error__message'>{{this.errorMessage.github}}</div>
+  {{/if}}
+  {{/if}}
+
+  <Reusables::InputBox @field='LinkedIn' @name='linkedin' @placeHolder='https://linkedin.com/in/professional-rishi'
+    @type='text' @required={{true}} @value={{this.data.linkedin}} @onInput={{this.inputHandler}}
+    @variant='input--full-width' />
+  {{#if this.errorMessage.linkedin}}
+  <div class='error__message'>{{this.errorMessage.linkedin}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Instagram' @name='instagram' @placeHolder='https://instagram.com/gangster-rishi'
+    @type='text' @required={{false}} @value={{this.data.instagram}} @onInput={{this.inputHandler}}
+    @variant='input--full-width' />
+  {{#if this.errorMessage.instagram}}
+  <div class='error__message'>{{this.errorMessage.instagram}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Peerlist' @name='peerlist' @placeHolder='https://peerlist.io/richy-rishi' @type='text'
+    @required={{true}} @value={{this.data.peerlist}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.peerlist}}
+  <div class='error__message'>{{this.errorMessage.peerlist}}</div>
+  {{/if}}
+
+  {{#if this.showBehance}}
+  <Reusables::InputBox @field='Behance' @name='behance' @placeHolder='https://behance.net/designer-rishi' @type='text'
+    @required={{true}} @value={{this.data.behance}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.behance}}
+  <div class='error__message'>{{this.errorMessage.behance}}</div>
+  {{/if}}
+  {{/if}}
+
+  {{#if this.showDribble}}
+  <Reusables::InputBox @field='Dribble' @name='dribble' @placeHolder='https://dribbble.com/dribwithrishi' @type='text'
+    @required={{true}} @value={{this.data.dribble}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.dribble}}
+  <div class='error__message'>{{this.errorMessage.dribble}}</div>
+  {{/if}}
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/new-step-four.js b/app/components/new-join-steps/new-step-four.js
new file mode 100644
index 000000000..bae007588
--- /dev/null
+++ b/app/components/new-join-steps/new-step-four.js
@@ -0,0 +1,80 @@
+import BaseStepComponent from './base-step';
+import {
+  NEW_STEP_LIMITS,
+  STEP_DATA_STORAGE_KEY,
+} from '../../constants/new-join-form';
+import { phoneNumberRegex } from '../../constants/regex';
+
+export default class NewStepFourComponent extends BaseStepComponent {
+  storageKey = STEP_DATA_STORAGE_KEY.stepFour;
+
+  stepValidation = {
+    phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber,
+    twitter: NEW_STEP_LIMITS.stepFour.twitter,
+    linkedin: NEW_STEP_LIMITS.stepFour.linkedin,
+    instagram: NEW_STEP_LIMITS.stepFour.instagram,
+    peerlist: NEW_STEP_LIMITS.stepFour.peerlist,
+  };
+
+  get userRole() {
+    const stepOneData = JSON.parse(
+      localStorage.getItem('newStepOneData') || '{}',
+    );
+    return stepOneData.role || '';
+  }
+
+  postLoadInitialize() {
+    if (this.userRole === 'Developer') {
+      this.stepValidation.github = NEW_STEP_LIMITS.stepFour.github;
+    }
+
+    if (this.userRole === 'Designer') {
+      this.stepValidation.behance = NEW_STEP_LIMITS.stepFour.behance;
+      this.stepValidation.dribble = NEW_STEP_LIMITS.stepFour.dribble;
+    }
+
+    // re-calculate the errorMessage and wordCount for new input fields
+    this.errorMessage = Object.fromEntries(
+      Object.keys(this.stepValidation).map((k) => [k, '']),
+    );
+
+    this.wordCount = Object.fromEntries(
+      Object.keys(this.stepValidation).map((k) => {
+        let val = this.data[k] || '';
+        return [k, val.trim().split(/\s+/).filter(Boolean).length || 0];
+      }),
+    );
+  }
+
+  get showGitHub() {
+    return this.userRole === 'Developer';
+  }
+
+  get showBehance() {
+    return this.userRole === 'Designer';
+  }
+
+  get showDribble() {
+    return this.userRole === 'Designer';
+  }
+
+  validateField(field, value) {
+    if (field === 'phoneNumber') {
+      const trimmedValue = value?.trim() || '';
+      const isValid = trimmedValue && phoneNumberRegex.test(trimmedValue);
+      return {
+        isValid,
+        wordCount: 0,
+      };
+    }
+    return super.validateField(field, value);
+  }
+
+  formatError(field, result) {
+    if (field === 'phoneNumber') {
+      if (result.isValid) return '';
+      return 'Please enter a valid phone number (e.g., +91 80000 00000)';
+    }
+    return super.formatError(field, result);
+  }
+}
diff --git a/app/components/new-join-steps/new-step-one.hbs b/app/components/new-join-steps/new-step-one.hbs
new file mode 100644
index 000000000..bbe08122d
--- /dev/null
+++ b/app/components/new-join-steps/new-step-one.hbs
@@ -0,0 +1,65 @@
+<div class="two-column-layout">
+  <div class="two-column-layout__left">
+    <h3 class="section-heading">Profile Picture</h3>
+    {{#if this.isImageUploading}}
+    <div class="image-preview-container">
+      <Spinner />
+      <p>Processing image...</p>
+    </div>
+    {{else}}
+      {{#if this.imagePreview}}
+      <div class="image-preview-container">
+        <img src={{this.imagePreview}} alt="Profile preview" class="image-preview" />
+        <Reusables::Button @type="button" @text="Change Image" @variant="light" @onClick={{this.triggerFileInput}} />
+      </div>
+      {{else}}
+      <button class="image-upload-box" type="button" {{on 'click' this.triggerFileInput}}>
+        <FaIcon @icon="upload" />
+        <p class="image-upload-box__text">Upload Image</p>
+      </button>
+      {{/if}}
+    {{/if}}
+    <input type="file" accept="image/png,image/jpeg" class="image-form__input" hidden aria-label="Upload profile image"
+    {{did-insert this.setFileInputElement}} {{will-destroy this.clearFileInputElement}} {{on 'change' this.handleImageSelect}} />
+    <div class="image-requirements">
+      <h4>Image Requirements:</h4>
+      <ul>
+        <li>Must be a real, clear photograph (no anime, filters, or drawings)</li>
+        <li>Must contain exactly one face</li>
+        <li>Face must cover at least 60% of the image</li>
+        <li>Supported formats: JPG, PNG</li>
+        <li>Image will be validated before moving to next step</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="two-column-layout__right">
+    <h3 class="section-heading">Personal Details</h3>
+    <p class="section-instruction">Please provide correct details and choose your role carefully, it won't be changed
+      later.</p>
+
+    <Reusables::InputBox @field='Your Name' @name='fullName' @placeHolder='Full Name' @type='text' @disabled={{true}}
+      @required={{true}} @value={{this.data.fullName}} @onInput={{this.inputHandler}} />
+
+    <Reusables::Dropdown @field='Your Country' @name='country' @placeHolder='Choose your country' @required={{true}}
+      @value={{this.data.country}} @options={{this.countries}} @onChange={{this.inputHandler}} />
+
+    <Reusables::InputBox @field='State' @name='state' @placeHolder='Your State e.g. Karnataka' @type='text'
+      @required={{true}} @value={{this.data.state}} @onInput={{this.inputHandler}} />
+
+    <Reusables::InputBox @field='City' @name='city' @placeHolder='Your City e.g. Bengaluru' @type='text'
+      @required={{true}} @value={{this.data.city}} @onInput={{this.inputHandler}} />
+
+    <div class="role-selection">
+      <p>Applying as</p>
+      <div class="role-buttons" role="radiogroup" aria-label="Select your role">
+        {{#each this.roleOptions as |role|}}
+        <button type="button" class="role-button {{if (eq this.data.role role) 'role-button--selected'}}" role="radio"
+          aria-checked="{{if (eq this.data.role role) 'true' 'false'}}" {{on 'click' (fn this.selectRole role)}}>
+          {{role}}
+        </button>
+        {{/each}}
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/new-step-one.js b/app/components/new-join-steps/new-step-one.js
new file mode 100644
index 000000000..86b3d7207
--- /dev/null
+++ b/app/components/new-join-steps/new-step-one.js
@@ -0,0 +1,104 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { countryList } from '../../constants/country-list';
+import {
+  NEW_STEP_LIMITS,
+  ROLE_OPTIONS,
+  STEP_DATA_STORAGE_KEY,
+} from '../../constants/new-join-form';
+import BaseStepComponent from './base-step';
+
+export default class NewStepOneComponent extends BaseStepComponent {
+  @service login;
+  @service toast;
+
+  roleOptions = ROLE_OPTIONS;
+  countries = countryList;
+
+  @tracked imagePreview = null;
+  @tracked isImageUploading = false;
+  @tracked fileInputElement = null;
+
+  get storageKey() {
+    return STEP_DATA_STORAGE_KEY.stepOne;
+  }
+
+  stepValidation = {
+    country: NEW_STEP_LIMITS.stepOne.country,
+    state: NEW_STEP_LIMITS.stepOne.state,
+    city: NEW_STEP_LIMITS.stepOne.city,
+    role: NEW_STEP_LIMITS.stepOne.role,
+  };
+
+  postLoadInitialize() {
+    if (
+      !this.data.fullName &&
+      this.login.userData?.first_name &&
+      this.login.userData?.last_name
+    ) {
+      this.updateFieldValue(
+        'fullName',
+        `${this.login.userData.first_name} ${this.login.userData.last_name}`,
+      );
+    }
+    if (this.data.profileImageBase64) {
+      this.imagePreview = this.data.profileImageBase64;
+    }
+  }
+
+  @action selectRole(role) {
+    this.inputHandler({ target: { name: 'role', value: role } });
+  }
+
+  @action
+  setFileInputElement(element) {
+    this.fileInputElement = element;
+  }
+
+  @action
+  clearFileInputElement() {
+    this.fileInputElement = null;
+  }
+
+  @action
+  triggerFileInput() {
+    this.fileInputElement?.click();
+  }
+
+  @action
+  handleImageSelect(event) {
+    const file = event.target.files?.[0];
+    if (!file || !file.type.startsWith('image/')) {
+      this.toast.error(
+        'Invalid file type. Please upload an image file.',
+        'Error!',
+      );
+      return;
+    }
+    const maxSize = 2 * 1024 * 1024;
+    if (file.size > maxSize) {
+      this.toast.error('Image size must be less than 2MB', 'Error!');
+      return;
+    }
+
+    this.isImageUploading = true;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const base64String = e.target.result;
+      this.imagePreview = base64String;
+      this.updateFieldValue?.('profileImageBase64', base64String);
+      this.isImageUploading = false;
+    };
+    reader.onerror = () => {
+      this.toast.error(
+        'Failed to read the selected file. Please try again.',
+        'Error!',
+      );
+      this.isImageUploading = false;
+    };
+
+    reader.readAsDataURL(file);
+  }
+}
diff --git a/app/components/new-join-steps/new-step-six.hbs b/app/components/new-join-steps/new-step-six.hbs
new file mode 100644
index 000000000..cb18d7d54
--- /dev/null
+++ b/app/components/new-join-steps/new-step-six.hbs
@@ -0,0 +1,207 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@heading}}</h1>
+    <p class="section-instruction">{{@subHeading}}</p>
+  </div>
+
+  <div class="review-section">
+    <div class="review-section__header">
+      <h3 class="review-section__title">Personal Information</h3>
+      <Reusables::Button
+        @text="Edit"
+        @variant="light btn--sm"
+        @test="edit-step-1"
+        @type="button"
+        @onClick={{fn @navigateToStep 1}}
+      />
+    </div>
+    <div class="review-section__content">
+      <div class="review-field">
+        <span class="review-field__label">Full Name:</span>
+        <span class="review-field__value {{unless this.stepData.one.fullName 'review-field__value--missing'}}">
+          {{if this.stepData.one.fullName this.stepData.one.fullName 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Location:</span>
+        <span class="review-field__value {{unless this.locationDisplay 'review-field__value--missing'}}">
+          {{this.locationDisplay}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Applying as:</span>
+        <span class="review-field__value {{unless this.stepData.one.role 'review-field__value--missing'}}">
+          {{if this.stepData.one.role this.stepData.one.role 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Profile Image:</span>
+        <span class="review-field__value review-field__value--empty">
+          Not uploaded
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="review-section">
+    <div class="review-section__header">
+      <h3 class="review-section__title">Professional Details</h3>
+      <Reusables::Button
+        @text="Edit"
+        @variant="light btn--sm"
+        @test="edit-step-2"
+        @type="button"
+        @onClick={{fn @navigateToStep 2}}
+      />
+    </div>
+    <div class="review-section__content">
+      <div class="review-field">
+        <span class="review-field__label">Skills:</span>
+        <span class="review-field__value {{unless this.stepData.two.skills 'review-field__value--missing'}}">
+          {{if this.stepData.two.skills this.stepData.two.skills 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Institution/Company:</span>
+        <span class="review-field__value {{unless this.stepData.two.company 'review-field__value--missing'}}">
+          {{if this.stepData.two.company this.stepData.two.company 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Introduction:</span>
+        <span class="review-field__value {{unless this.stepData.two.introduction 'review-field__value--missing'}}">
+          {{if this.stepData.two.introduction this.stepData.two.introduction 'Not provided'}}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="review-section">
+    <div class="review-section__header">
+      <h3 class="review-section__title">Hobbies & Interests</h3>
+      <Reusables::Button
+        @text="Edit"
+        @variant="light btn--sm"
+        @test="edit-step-3"
+        @type="button"
+        @onClick={{fn @navigateToStep 3}}
+      />
+    </div>
+    <div class="review-section__content">
+      <div class="review-field">
+        <span class="review-field__label">Hobbies:</span>
+        <span class="review-field__value {{unless this.stepData.three.hobbies 'review-field__value--missing'}}">
+          {{if this.stepData.three.hobbies this.stepData.three.hobbies 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Fun Fact:</span>
+        <span class="review-field__value {{unless this.stepData.three.funFact 'review-field__value--missing'}}">
+          {{if this.stepData.three.funFact this.stepData.three.funFact 'Not provided'}}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="review-section">
+    <div class="review-section__header">
+      <h3 class="review-section__title">Social Profiles</h3>
+      <Reusables::Button
+        @text="Edit"
+        @variant="light btn--sm"
+        @test="edit-step-4"
+        @type="button"
+        @onClick={{fn @navigateToStep 4}}
+      />
+    </div>
+    <div class="review-section__content">
+      <div class="review-field">
+        <span class="review-field__label">Phone Number:</span>
+        <span class="review-field__value {{unless this.stepData.four.phoneNumber 'review-field__value--missing'}}">
+          {{if this.stepData.four.phoneNumber this.stepData.four.phoneNumber 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Twitter:</span>
+        <span class="review-field__value {{unless this.stepData.four.twitter 'review-field__value--missing'}}">
+          {{if this.stepData.four.twitter this.stepData.four.twitter 'Not provided'}}
+        </span>
+      </div>
+      {{#if this.showGitHub}}
+        <div class="review-field">
+          <span class="review-field__label">GitHub:</span>
+          <span class="review-field__value {{unless this.stepData.four.github 'review-field__value--missing'}}">
+            {{if this.stepData.four.github this.stepData.four.github 'Not provided'}}
+          </span>
+        </div>
+      {{/if}}
+      <div class="review-field">
+        <span class="review-field__label">LinkedIn:</span>
+        <span class="review-field__value {{unless this.stepData.four.linkedin 'review-field__value--missing'}}">
+          {{if this.stepData.four.linkedin this.stepData.four.linkedin 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Instagram:</span>
+        <span class="review-field__value {{if this.stepData.four.instagram '' 'review-field__value--empty'}}">
+          {{if this.stepData.four.instagram this.stepData.four.instagram 'Not uploaded'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Peerlist:</span>
+        <span class="review-field__value {{unless this.stepData.four.peerlist 'review-field__value--missing'}}">
+          {{if this.stepData.four.peerlist this.stepData.four.peerlist 'Not provided'}}
+        </span>
+      </div>
+      {{#if this.showBehance}}
+        <div class="review-field">
+          <span class="review-field__label">Behance:</span>
+          <span class="review-field__value {{unless this.stepData.four.behance 'review-field__value--missing'}}">
+            {{if this.stepData.four.behance this.stepData.four.behance 'Not provided'}}
+          </span>
+        </div>
+      {{/if}}
+      {{#if this.showDribble}}
+        <div class="review-field">
+          <span class="review-field__label">Dribble:</span>
+          <span class="review-field__value {{unless this.stepData.four.dribble 'review-field__value--missing'}}">
+            {{if this.stepData.four.dribble this.stepData.four.dribble 'Not provided'}}
+          </span>
+        </div>
+      {{/if}}
+    </div>
+  </div>
+
+  <div class="review-section">
+    <div class="review-section__header">
+      <h3 class="review-section__title">Why Real Dev Squad?</h3>
+      <Reusables::Button
+        @text="Edit"
+        @variant="light btn--sm"
+        @test="edit-step-5"
+        @type="button"
+        @onClick={{fn @navigateToStep 5}}
+      />
+    </div>
+    <div class="review-section__content">
+      <div class="review-field">
+        <span class="review-field__label">Why you want to join Real Dev Squad?:</span>
+        <span class="review-field__value {{unless this.stepData.five.whyRds 'review-field__value--missing'}}">
+          {{if this.stepData.five.whyRds this.stepData.five.whyRds 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">Hours per week:</span>
+        <span class="review-field__value {{unless this.stepData.five.numberOfHours 'review-field__value--missing'}}">
+          {{if this.stepData.five.numberOfHours this.stepData.five.numberOfHours 'Not provided'}}
+        </span>
+      </div>
+      <div class="review-field">
+        <span class="review-field__label">How did you hear about us?:</span>
+        <span class="review-field__value {{unless this.stepData.five.foundFrom 'review-field__value--missing'}}">
+          {{if this.stepData.five.foundFrom this.stepData.five.foundFrom 'Not provided'}}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/components/new-join-steps/new-step-six.js b/app/components/new-join-steps/new-step-six.js
new file mode 100644
index 000000000..9928e6631
--- /dev/null
+++ b/app/components/new-join-steps/new-step-six.js
@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { getLocalStorageItem } from '../../utils/storage';
+import { STEP_DATA_STORAGE_KEY } from '../../constants/new-join-form';
+
+export default class NewStepSixComponent extends Component {
+  @tracked stepData = {
+    one: {},
+    two: {},
+    three: {},
+    four: {},
+    five: {},
+  };
+
+  constructor(...args) {
+    super(...args);
+    this.loadAllStepData();
+  }
+
+  loadAllStepData() {
+    this.stepData.one = JSON.parse(
+      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepOne),
+    );
+    this.stepData.two = JSON.parse(
+      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepTwo),
+    );
+    this.stepData.three = JSON.parse(
+      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepThree),
+    );
+    this.stepData.four = JSON.parse(
+      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFour),
+    );
+    this.stepData.five = JSON.parse(
+      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFive),
+    );
+  }
+
+  get userRole() {
+    return this.stepData.one.role || '';
+  }
+
+  get showGitHub() {
+    return this.userRole === 'Developer';
+  }
+
+  get showBehance() {
+    return this.userRole === 'Designer';
+  }
+
+  get showDribble() {
+    return this.userRole === 'Designer';
+  }
+
+  get locationDisplay() {
+    return `${this.stepData.one.city}, ${this.stepData.one.state}, ${this.stepData.one.country}`;
+  }
+}
diff --git a/app/components/new-join-steps/new-step-three.hbs b/app/components/new-join-steps/new-step-three.hbs
new file mode 100644
index 000000000..7614c45f2
--- /dev/null
+++ b/app/components/new-join-steps/new-step-three.hbs
@@ -0,0 +1,38 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading" data-test-heading>{{@heading}}</h1>
+    <p class="section-instruction" data-test-sub-heading>{{@subHeading}}</p>
+  </div>
+
+  <div class="form-grid">
+    <div class="form-grid__item">
+      <Reusables::TextAreaBox
+        @field='What do you do for fun? Your hobbies/interests?'
+        @name='hobbies'
+        @placeHolder='Tell us about your hobbies and interests...'
+        @required={{true}}
+        @value={{this.data.hobbies}}
+        @onInput={{this.inputHandler}}
+      />
+      <div class="word-count" data-test-word-count="hobbies">{{this.wordCount.hobbies}}/{{this.stepValidation.hobbies.max}} words</div>
+      {{#if this.errorMessage.hobbies}}
+        <div class='error__message' data-test-error="hobbies">{{this.errorMessage.hobbies}}</div>
+      {{/if}}
+    </div>
+
+    <div class="form-grid__item">
+      <Reusables::TextAreaBox
+        @field='Fun fact about you'
+        @name='funFact'
+        @placeHolder='Share something interesting about yourself...'
+        @required={{true}}
+        @value={{this.data.funFact}}
+        @onInput={{this.inputHandler}}
+      />
+      <div class="word-count" data-test-word-count="funFact">{{this.wordCount.funFact}}/{{this.stepValidation.funFact.max}} words</div>
+      {{#if this.errorMessage.funFact}}
+        <div class='error__message' data-test-error="funFact">{{this.errorMessage.funFact}}</div>
+      {{/if}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/new-step-three.js b/app/components/new-join-steps/new-step-three.js
new file mode 100644
index 000000000..0c3fd6b25
--- /dev/null
+++ b/app/components/new-join-steps/new-step-three.js
@@ -0,0 +1,13 @@
+import BaseStepComponent from './base-step';
+import {
+  NEW_STEP_LIMITS,
+  STEP_DATA_STORAGE_KEY,
+} from '../../constants/new-join-form';
+
+export default class NewStepThreeComponent extends BaseStepComponent {
+  storageKey = STEP_DATA_STORAGE_KEY.stepThree;
+  stepValidation = {
+    hobbies: NEW_STEP_LIMITS.stepThree.hobbies,
+    funFact: NEW_STEP_LIMITS.stepThree.funFact,
+  };
+}
diff --git a/app/components/new-join-steps/new-step-two.hbs b/app/components/new-join-steps/new-step-two.hbs
new file mode 100644
index 000000000..c96c5175e
--- /dev/null
+++ b/app/components/new-join-steps/new-step-two.hbs
@@ -0,0 +1,37 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading" data-test-heading>{{@heading}}</h1>
+    <p class="section-instruction" data-test-sub-heading>{{@subHeading}}</p>
+  </div>
+
+  <div class="form-grid">
+    <div class="form-grid form-grid--2">
+      <div class="form-grid__item">
+        <Reusables::InputBox @field='Your skills' @name='skills' @placeHolder='Enter your key skills...' @type='text'
+          @required={{true}} @value={{this.data.skills}} @onInput={{this.inputHandler}} />
+        {{#if this.errorMessage.skills}}
+        <div class='error__message' data-test-error="skills">{{this.errorMessage.skills}}</div>
+        {{/if}}
+      </div>
+
+      <div class="form-grid__item">
+        <Reusables::InputBox @field='Your institution/company' @name='company'
+          @placeHolder='Institution or company name' @type='text' @required={{true}} @value={{this.data.company}}
+          @onInput={{this.inputHandler}} />
+        {{#if this.errorMessage.company}}
+        <div class='error__message' data-test-error="company">{{this.errorMessage.company}}</div>
+        {{/if}}
+      </div>
+    </div>
+    <div class="form-grid__item">
+      <Reusables::TextAreaBox @field='Please introduce yourself' @name='introduction'
+        @placeHolder='Tell us about yourself...' @required={{true}} @value={{this.data.introduction}}
+        @onInput={{this.inputHandler}} />
+      <div class="word-count" data-test-word-count="introduction">{{this.wordCount.introduction}}/{{this.stepValidation.introduction.max}} words</div>
+
+      {{#if this.errorMessage.introduction}}
+      <div class='error__message' data-test-error="introduction">{{this.errorMessage.introduction}}</div>
+      {{/if}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/new-step-two.js b/app/components/new-join-steps/new-step-two.js
new file mode 100644
index 000000000..edb382940
--- /dev/null
+++ b/app/components/new-join-steps/new-step-two.js
@@ -0,0 +1,14 @@
+import BaseStepComponent from './base-step';
+import {
+  NEW_STEP_LIMITS,
+  STEP_DATA_STORAGE_KEY,
+} from '../../constants/new-join-form';
+
+export default class NewStepTwoComponent extends BaseStepComponent {
+  storageKey = STEP_DATA_STORAGE_KEY.stepTwo;
+  stepValidation = {
+    skills: NEW_STEP_LIMITS.stepTwo.skills,
+    company: NEW_STEP_LIMITS.stepTwo.company,
+    introduction: NEW_STEP_LIMITS.stepTwo.introduction,
+  };
+}
diff --git a/app/components/new-join-steps/stepper-header.hbs b/app/components/new-join-steps/stepper-header.hbs
new file mode 100644
index 000000000..7fcd94380
--- /dev/null
+++ b/app/components/new-join-steps/stepper-header.hbs
@@ -0,0 +1,14 @@
+<div class="form-header">
+  <div class="form-header__content">
+    <div class="form-header__text">
+      <h1 class="form-header__heading">RDS Application Form</h1>
+    </div>
+    <div class="form-header__step-count" aria-live="polite">
+      <span class="form-header__step-current">{{@currentStep}}</span>
+      <span class="form-header__step-total">of {{@totalSteps}}</span>
+    </div>
+  </div>
+  <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={{this.progressPercentage}}>
+    <div class="progress-bar__fill" style={{this.progressStyle}}></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-join-steps/stepper-header.js b/app/components/new-join-steps/stepper-header.js
new file mode 100644
index 000000000..77ce058e9
--- /dev/null
+++ b/app/components/new-join-steps/stepper-header.js
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { cached } from '@glimmer/tracking';
+
+export default class StepperHeaderComponent extends Component {
+  @cached
+  get progressPercentage() {
+    const totalSteps = Number(this.args.totalSteps) || 1;
+    const currentStep = Number(this.args.currentStep) || 0;
+    return Math.min(100, Math.round((currentStep / totalSteps) * 100));
+  }
+
+  @cached
+  get progressStyle() {
+    return htmlSafe(`width: ${this.progressPercentage}%`);
+  }
+}
diff --git a/app/components/new-join-steps/thank-you-screen.hbs b/app/components/new-join-steps/thank-you-screen.hbs
new file mode 100644
index 000000000..b014fad5c
--- /dev/null
+++ b/app/components/new-join-steps/thank-you-screen.hbs
@@ -0,0 +1,33 @@
+<div class="thank-you-screen" data-test="thank-you-screen">
+  <div class="thank-you-screen__logo" data-test="thank-you-logo">
+    <FaIcon @icon="check" @size="2x" />
+  </div>
+
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@firstName}}, thank you for applying to RDS.</h1>
+    <p class="section-instruction">Great work filling up the application. However, it takes more to join us early.</p>
+  </div>
+
+  <div class="thank-you-screen__info-container">
+    <div class="thank-you-screen__info-item--bullet">
+      Head over to Application Tracking Page.
+    </div>
+
+    <div class="thank-you-screen__info-item--bullet">
+      Checkout AI review and and edit your application to improve application rank.
+    </div>
+
+    <div class="thank-you-screen__info-item--bullet">
+      Complete quests to improve your ranking and increase your chances of early reviews.
+    </div>
+  </div>
+
+  <div class="application-id">
+    <h3>Application ID</h3>
+    <p>{{@applicationId}}</p>
+  </div>
+
+  <div class="thank-you-screen__actions">
+    <Reusables::Button @text="Track application" @variant="dark" @test="track-application" @type="button" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/new-stepper.hbs b/app/components/new-stepper.hbs
index 598cf5475..fb5f8a1eb 100644
--- a/app/components/new-stepper.hbs
+++ b/app/components/new-stepper.hbs
@@ -1,18 +1,70 @@
 <section class='stepper' data-test="stepper">
-  <form class="stepper__form" onsubmit={{this.nextStep}}>
-    {{#if (eq this.currentStep 0)}}
-      <NewJoinSteps::WelcomeScreen />
-
-      <div class="welcome-screen__actions">
-        <Reusables::Button
-          @text='Start'
-          @variant='dark'
-          @onClick={{this.startHandler}}
-          @test='start'
-          @type='button'
-          @disabled={{not this.joinApplicationTerms.hasUserAcceptedTerms}}
+  {{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}}
+  <NewJoinSteps::StepperHeader @currentStep={{this.currentStep}} @totalSteps={{this.MAX_STEP}} />
+  {{/if}}
+
+  <form class="new-stepper__form">
+    {{#if (eq this.currentStep this.MIN_STEP)}}
+    <NewJoinSteps::WelcomeScreen />
+
+    <div class="welcome-screen__actions">
+      <Reusables::Button @text='Start' @variant='dark' @onClick={{this.startHandler}} @test='start' @type='button'
+        @disabled={{not this.joinApplicationTerms.hasUserAcceptedTerms}} />
+    </div>
+
+      {{else if (eq this.currentStep 1)}}
+        <NewJoinSteps::NewStepOne
+          @onValidityChange={{this.onCurrentStepValidityChange}}
+        />
+
+      {{else if (eq this.currentStep 2)}}
+        <NewJoinSteps::NewStepTwo
+          @onValidityChange={{this.onCurrentStepValidityChange}}
+          @heading={{this.currentHeading}}
+          @subHeading={{this.currentSubheading}}
+        />
+
+      {{else if (eq this.currentStep 3)}}
+        <NewJoinSteps::NewStepThree
+          @onValidityChange={{this.onCurrentStepValidityChange}}
+          @heading={{this.currentHeading}}
+          @subHeading={{this.currentSubheading}}
+        />
+
+      {{else if (eq this.currentStep 4)}}
+        <NewJoinSteps::NewStepFour
+          @onValidityChange={{this.onCurrentStepValidityChange}}
+          @heading={{this.currentHeading}}
+          @subHeading={{this.currentSubheading}}
+        />
+
+      {{else if (eq this.currentStep 5)}}
+        <NewJoinSteps::NewStepFive
+          @onValidityChange={{this.onCurrentStepValidityChange}}
+          @heading={{this.currentHeading}}
+          @subHeading={{this.currentSubheading}}
         />
-      </div>
+
+    {{else if (eq this.currentStep 6)}}
+    <NewJoinSteps::NewStepSix @heading={{this.currentHeading}} @subHeading={{this.currentSubheading}}
+      @navigateToStep={{this.navigateToStep}} @onSubmit={{this.handleSubmit}} />
+
+    {{else if (eq this.currentStep 7)}}
+    <NewJoinSteps::ThankYouScreen @firstName={{this.firstName}} @applicationId={{this.applicationId}}
+      @onTrackApplication={{this.handleTrackApplication}} />
     {{/if}}
   </form>
+
+  {{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}}
+  <div class="new-stepper__buttons">
+    {{#if this.showPreviousButton}}
+    <Reusables::Button @text="Previous" @variant="light" @test="prev-btn" @type="button" @onClick={{this.decrementStep}}
+      @class="prev-button" />
+    {{/if}}
+
+    <Reusables::Button @text={{if this.isReviewStep "Submit" "Next" }} @variant="dark" @class="next-button" @test={{if
+      this.isReviewStep "submit-review" "next-btn" }} @type="button" @onClick={{if this.isReviewStep this.handleSubmit
+      this.incrementStep}} @disabled={{not this.canProceedFromStep}} />
+  </div>
+  {{/if}}
 </section>
\ No newline at end of file
diff --git a/app/components/new-stepper.js b/app/components/new-stepper.js
index 1cb753e2e..3f39b7abe 100644
--- a/app/components/new-stepper.js
+++ b/app/components/new-stepper.js
@@ -2,22 +2,84 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import {
+  NEW_FORM_STEPS,
+  NEW_STEP_LIMITS,
+  STEP_DATA_STORAGE_KEY,
+} from '../constants/new-join-form';
+import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';
+import { scheduleOnce } from '@ember/runloop';
+import { validateWordCount } from '../utils/validator';
+import { phoneNumberRegex } from '../constants/regex';
+
+const NEW_STEP_CONFIG = {
+  1: {
+    storageKey: STEP_DATA_STORAGE_KEY.stepOne,
+    limits: NEW_STEP_LIMITS.stepOne,
+  },
+  2: {
+    storageKey: STEP_DATA_STORAGE_KEY.stepTwo,
+    limits: NEW_STEP_LIMITS.stepTwo,
+  },
+  3: {
+    storageKey: STEP_DATA_STORAGE_KEY.stepThree,
+    limits: NEW_STEP_LIMITS.stepThree,
+  },
+  4: {
+    storageKey: STEP_DATA_STORAGE_KEY.stepFour,
+    limits: NEW_STEP_LIMITS.stepFour,
+  },
+  5: {
+    storageKey: STEP_DATA_STORAGE_KEY.stepFive,
+    limits: NEW_STEP_LIMITS.stepFive,
+  },
+};
 
 export default class NewStepperComponent extends Component {
   MIN_STEP = 0;
   MAX_STEP = 6;
+  applicationId = '4gchuf690';
 
   @service login;
   @service router;
   @service onboarding;
   @service joinApplicationTerms;
 
-  @tracked currentStep =
-    Number(localStorage.getItem('currentStep') ?? this.args.step) || 0;
+  @tracked currentStep = 0;
+  @tracked canAccessStep = false;
+  @tracked canProceedFromStep = false;
+
+  constructor(...args) {
+    super(...args);
+    scheduleOnce('afterRender', this, this.initializeFromQuery);
+  }
+
+  initializeFromQuery() {
+    const storedStep = getLocalStorageItem('currentStep');
+    const stepFromArgs = this.args.step;
+    this.currentStep = storedStep
+      ? Number(storedStep)
+      : stepFromArgs != null
+        ? Number(stepFromArgs)
+        : 0;
+    const targetStep = this.currentStep;
+    const accessibleStep = this.resolveAccessibleStep(targetStep);
+    this.currentStep = accessibleStep;
+    this.canProceedFromStep = this.isStepComplete(accessibleStep);
+    this.persistStep(accessibleStep);
+    this.updateQueryParam(accessibleStep);
+  }
+
+  clampStep(step) {
+    return Math.max(this.MIN_STEP, Math.min(this.MAX_STEP + 1, step));
+  }
+
+  persistStep(step) {
+    setLocalStorageItem('currentStep', String(step));
+  }
 
   updateQueryParam(step) {
     const existingQueryParams = this.router.currentRoute?.queryParams;
-
     this.router.transitionTo('join', {
       queryParams: {
         ...existingQueryParams,
@@ -26,18 +88,89 @@ export default class NewStepperComponent extends Component {
     });
   }
 
+  get showPreviousButton() {
+    return this.currentStep > this.MIN_STEP + 1;
+  }
+
+  get currentHeading() {
+    return NEW_FORM_STEPS.headings[this.currentStep - 1] ?? '';
+  }
+
+  get currentSubheading() {
+    return NEW_FORM_STEPS.subheadings[this.currentStep - 1] ?? '';
+  }
+
+  get firstName() {
+    return sessionStorage.getItem('first_name') ?? '';
+  }
+
+  get isReviewStep() {
+    return this.currentStep === this.MAX_STEP;
+  }
+
+  resolveAccessibleStep(stepNumber) {
+    const desiredStep = this.clampStep(stepNumber);
+    for (let step = 1; step < desiredStep; step++) {
+      if (!this.isStepComplete(step)) {
+        this.canAccessStep = false;
+        return step;
+      }
+    }
+
+    this.canAccessStep = true;
+    return desiredStep;
+  }
+
+  isStepComplete(stepNumber) {
+    const config = NEW_STEP_CONFIG[stepNumber];
+    if (!config) {
+      return true;
+    }
+
+    const stored = JSON.parse(getLocalStorageItem(config.storageKey, '{}'));
+
+    for (const [field, limits] of Object.entries(config.limits || {})) {
+      const value = stored?.[field] ?? '';
+      if (field === 'phoneNumber') {
+        return phoneNumberRegex.test(value);
+      }
+      const result = validateWordCount(value, limits);
+      if (!result.isValid) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  @action onCurrentStepValidityChange(isValid) {
+    this.canProceedFromStep = Boolean(isValid);
+    if (isValid) {
+      this.persistStep(this.currentStep);
+    }
+  }
+
   @action incrementStep() {
-    if (this.currentStep < this.MAX_STEP) {
-      const nextStep = this.currentStep + 1;
-      localStorage.setItem('currentStep', String(nextStep));
+    const current = this.currentStep;
+    if (current < this.MAX_STEP && this.isStepComplete(current)) {
+      const nextStep = current + 1;
+      this.canAccessStep = true;
+      this.canProceedFromStep = this.isStepComplete(nextStep);
+      this.currentStep = nextStep;
+      this.persistStep(nextStep);
       this.updateQueryParam(nextStep);
+    } else {
+      this.canProceedFromStep = false;
     }
   }
 
   @action decrementStep() {
-    if (this.currentStep > this.MIN_STEP) {
-      const previousStep = this.currentStep - 1;
-      localStorage.setItem('currentStep', String(previousStep));
+    const current = this.currentStep;
+    if (current > this.MIN_STEP) {
+      const previousStep = current - 1;
+      this.canAccessStep = true;
+      this.canProceedFromStep = this.isStepComplete(previousStep);
+      this.currentStep = previousStep;
+      this.persistStep(previousStep);
       this.updateQueryParam(previousStep);
     }
   }
@@ -48,4 +181,23 @@ export default class NewStepperComponent extends Component {
     sessionStorage.setItem('last_name', this.login.userData.last_name);
     this.incrementStep();
   }
+
+  @action navigateToStep(stepNumber) {
+    const desired = this.resolveAccessibleStep(stepNumber);
+    this.canProceedFromStep = this.isStepComplete(desired);
+    this.currentStep = desired;
+    this.persistStep(desired);
+    this.updateQueryParam(desired);
+  }
+
+  @action handleSubmit() {
+    // ToDo: handle create application and move thank you screen away from new stepper
+    console.log('Submit application for review');
+    const completionStep = this.MAX_STEP + 1;
+    this.currentStep = completionStep;
+    this.persistStep(completionStep);
+    this.canAccessStep = true;
+    this.canProceedFromStep = false;
+    this.updateQueryParam(completionStep);
+  }
 }
diff --git a/app/components/reusables/button.hbs b/app/components/reusables/button.hbs
index 60c9caf1b..da4b0155e 100644
--- a/app/components/reusables/button.hbs
+++ b/app/components/reusables/button.hbs
@@ -2,7 +2,8 @@
   data-test-button={{@test}}
   class="btn btn-{{@variant}}
     btn-{{@classGenerateUsername}}
-    {{if @disabled 'btn-disabled' ''}}"
+    {{if @disabled 'btn-disabled' ''}}
+    {{@class}}"
   type={{@type}}
   disabled={{@disabled}}
   title={{@title}}
diff --git a/app/components/reusables/input-box.hbs b/app/components/reusables/input-box.hbs
index 4d842bb40..30491d75d 100644
--- a/app/components/reusables/input-box.hbs
+++ b/app/components/reusables/input-box.hbs
@@ -13,6 +13,7 @@
     id={{@name}}
     placeholder={{@placeHolder}}
     required={{@required}}
+    disabled={{@disabled}}
     value={{@value}}
     {{on "input" @onInput}}
   />
diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js
new file mode 100644
index 000000000..ebd19a803
--- /dev/null
+++ b/app/constants/new-join-form.js
@@ -0,0 +1,67 @@
+export const NEW_FORM_STEPS = {
+  headings: [
+    'Upload Professional Headshot and Complete Personal Details',
+    'Additional Personal Information',
+    'Your hobbies, interests, fun fact',
+    'Connect your social profiles',
+    'Why Real Dev Squad?',
+    'Review and Submit',
+  ],
+  subheadings: [
+    'Please provide accurate information for verification purposes.',
+    'Introduce and help us get to know you better',
+    'Show us your funny and interesting side',
+    'Share your social media and professional profiles',
+    'Tell us why you want to join our community',
+    'Review your answers before submitting.',
+  ],
+};
+
+export const ROLE_OPTIONS = [
+  'Developer',
+  'Designer',
+  'Product Manager',
+  'Project Manager',
+  'QA',
+  'Social Media',
+];
+
+export const NEW_STEP_LIMITS = {
+  stepOne: {
+    country: { min: 1, type: 'dropdown' },
+    state: { min: 1 },
+    city: { min: 1 },
+    role: { min: 1, type: 'select' },
+  },
+  stepTwo: {
+    skills: { min: 5, max: 20 },
+    company: { min: 1 },
+    introduction: { min: 100, max: 500 },
+  },
+  stepThree: {
+    hobbies: { min: 100, max: 500 },
+    funFact: { min: 100, max: 500 },
+  },
+  stepFour: {
+    phoneNumber: { min: 1 },
+    twitter: { min: 1 },
+    github: { min: 1 },
+    linkedin: { min: 1 },
+    instagram: { min: 0 },
+    peerlist: { min: 1 },
+    behance: { min: 1 },
+    dribble: { min: 1 },
+  },
+  stepFive: {
+    whyRds: { min: 100 },
+    foundFrom: { min: 1, type: 'dropdown' },
+  },
+};
+
+export const STEP_DATA_STORAGE_KEY = {
+  stepOne: 'newStepOneData',
+  stepTwo: 'newStepTwoData',
+  stepThree: 'newStepThreeData',
+  stepFour: 'newStepFourData',
+  stepFive: 'newStepFiveData',
+};
diff --git a/app/styles/new-stepper.module.css b/app/styles/new-stepper.module.css
index bbef5d22e..10f1aec86 100644
--- a/app/styles/new-stepper.module.css
+++ b/app/styles/new-stepper.module.css
@@ -8,15 +8,23 @@
 }
 
 .new-stepper__buttons {
-  width: 60vw;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  gap: 1rem;
-  margin: 0;
+  width: 60vw;
+}
+
+.prev-button {
+  grid-column: 1;
 }
 
-.welcome-screen {
+.next-button {
+  grid-column: 3;
+  justify-self: end;
+}
+
+.welcome-screen,
+.thank-you-screen {
   width: 90%;
   margin: 0 auto 2rem;
   display: flex;
@@ -30,7 +38,8 @@
   justify-content: center;
 }
 
-.welcome-screen__info-item--bullet {
+.welcome-screen__info-item--bullet,
+.thank-you-screen__info-item--bullet {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
@@ -39,7 +48,8 @@
   line-height: 1.5;
 }
 
-.welcome-screen__info-item--bullet::before {
+.welcome-screen__info-item--bullet::before,
+.thank-you-screen__info-item--bullet::before {
   content: "•";
   color: var(--color-pink);
   font-size: 1.5rem;
@@ -60,7 +70,8 @@
   line-height: 1.5;
 }
 
-.welcome-screen__actions {
+.welcome-screen__actions,
+.thank-you-screen__actions {
   display: flex;
   justify-content: center;
 }
@@ -398,8 +409,39 @@
   border-top: 1px solid var(--color-lightgrey);
 }
 
-/* MEDIA QUERIES */
-@media screen and (width <= 1280px) {
+.thank-you-screen {
+  align-items: center;
+  text-align: center;
+  margin: 2rem auto 0;
+}
+
+.thank-you-screen__info-container {
+  text-align: start;
+  margin-block: 1.5rem;
+}
+
+.thank-you-screen__logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3em;
+  border-radius: 50%;
+  background-color: var(--color-navyblue);
+  color: var(--color-white);
+}
+
+.application-id h3 {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.application-id p {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+@media screen and (width <=1280px) {
   .new-stepper__form,
   .form-header,
   .new-stepper__buttons {
@@ -407,7 +449,7 @@
   }
 }
 
-@media screen and (width <= 1024px) {
+@media screen and (width <=1024px) {
   .new-stepper__form,
   .form-header,
   .new-stepper__buttons {
@@ -415,7 +457,7 @@
   }
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <=768px) {
   .two-column-layout {
     grid-template-columns: 1fr;
   }
@@ -434,7 +476,8 @@
     grid-template-columns: 1fr;
   }
 
-  .welcome-screen {
+  .welcome-screen,
+  .thank-you-screen {
     margin: 1rem auto;
     padding: 1.5rem;
   }
@@ -470,9 +513,13 @@
     text-align: left;
     max-width: 100%;
   }
+
+  .form-header__text {
+    line-height: 1.5;
+  }
 }
 
-@media screen and (width <= 480px) {
+@media screen and (width <=480px) {
   .form-header,
   .new-stepper__form,
   .new-stepper__buttons {
@@ -487,7 +534,8 @@
     padding: 1rem;
   }
 
-  .welcome-screen {
+  .welcome-screen,
+  .thank-you-screen {
     margin: 0.5rem auto 1rem;
     padding: 1rem;
   }
diff --git a/app/utils/storage.js b/app/utils/storage.js
new file mode 100644
index 000000000..31a65c78a
--- /dev/null
+++ b/app/utils/storage.js
@@ -0,0 +1,18 @@
+export function getLocalStorageItem(key, defaultValue = null) {
+  try {
+    return localStorage.getItem(key) ?? defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get localStorage item "${key}":`, error);
+    return defaultValue;
+  }
+}
+
+export function setLocalStorageItem(key, value) {
+  try {
+    localStorage.setItem(key, value);
+    return true;
+  } catch (error) {
+    console.warn(`Failed to set localStorage item "${key}":`, error);
+    return false;
+  }
+}
diff --git a/app/utils/validator.js b/app/utils/validator.js
index ec26bdea5..c9bdcd9cc 100644
--- a/app/utils/validator.js
+++ b/app/utils/validator.js
@@ -13,3 +13,24 @@ export const validator = (value, words) => {
     remainingWords: remainingWords,
   };
 };
+
+export const validateWordCount = (text, wordLimits) => {
+  const trimmedText = text?.trim();
+  const wordCount = trimmedText?.split(/\s+/).filter(Boolean).length ?? 0;
+
+  const { min, max } = wordLimits;
+  if (!trimmedText) {
+    return {
+      isValid: min === 0,
+      wordCount: 0,
+      remainingToMin: min > 0 ? min : 0,
+    };
+  }
+
+  if (wordCount < min) {
+    return { isValid: false, wordCount, remainingToMin: min - wordCount };
+  } else if (max && wordCount > max) {
+    return { isValid: false, wordCount, overByMax: wordCount - max };
+  }
+  return { isValid: true, wordCount };
+};
diff --git a/tests/integration/components/new-stepper-test.js b/tests/integration/components/new-stepper-test.js
index bce8ee5c0..dc84904d9 100644
--- a/tests/integration/components/new-stepper-test.js
+++ b/tests/integration/components/new-stepper-test.js
@@ -2,10 +2,20 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'website-www/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import Service from '@ember/service';
 
 module('Integration | Component | new-stepper', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    class RouterStub extends Service {
+      currentRoute = { queryParams: {} };
+      transitionTo() {}
+    }
+
+    this.owner.register('service:router', RouterStub);
+  });
+
   test('it renders the welcome screen at step 0', async function (assert) {
     await render(hbs`<NewStepper @step={{0}} />`);
 
diff --git a/tests/unit/components/new-join-steps/base-step-test.js b/tests/unit/components/new-join-steps/base-step-test.js
new file mode 100644
index 000000000..139efb363
--- /dev/null
+++ b/tests/unit/components/new-join-steps/base-step-test.js
@@ -0,0 +1,120 @@
+import { setOwner } from '@ember/application';
+import { module, test } from 'qunit';
+import BaseStepComponent from 'website-www/components/new-join-steps/base-step';
+import { setupTest } from 'website-www/tests/helpers';
+
+module('Unit | Component | new-join-steps/base-step', function (hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function () {
+    const TestComponent = class extends BaseStepComponent {
+      constructor(owner, args) {
+        super(owner, args);
+      }
+    };
+    this.component = Object.create(TestComponent.prototype);
+    setOwner(this.component, this.owner);
+    this.component.args = { onValidityChange: () => {} };
+    this.component.data = {};
+    this.component.errorMessage = {};
+    this.component.wordCount = {};
+    this.component.stepValidation = {};
+  });
+
+  test('validateField returns correct result for valid input', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 10 } };
+    const result = this.component.validateField('field1', 'valid input');
+
+    assert.true(result.isValid);
+    assert.strictEqual(result.wordCount, 2);
+  });
+
+  test('validateField returns invalid for empty required field', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 10 } };
+    const result = this.component.validateField('field1', '');
+
+    assert.false(result.isValid);
+    assert.strictEqual(result.remainingToMin, 1);
+  });
+
+  test('validateField returns invalid when exceeds max words', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 3 } };
+    const result = this.component.validateField('field1', 'one two three four');
+    assert.false(result.isValid);
+  });
+
+  test('isDataValid returns true when all fields valid', function (assert) {
+    this.component.stepValidation = {
+      field1: { min: 1, max: 10 },
+      field2: { min: 1, max: 5 },
+    };
+    this.component.data = { field1: 'valid text', field2: 'ok' };
+
+    const result = this.component.isDataValid();
+    assert.true(result);
+  });
+
+  test('isDataValid returns false when any field invalid', function (assert) {
+    this.component.stepValidation = {
+      field1: { min: 1, max: 10 },
+      field2: { min: 1, max: 5 },
+    };
+    this.component.data = { field1: 'valid text', field2: '' };
+
+    const result = this.component.isDataValid();
+    assert.false(result);
+  });
+
+  test('updateFieldValue updates data and syncs storage', function (assert) {
+    this.component.data = {};
+    Object.defineProperty(this.component, 'storageKey', {
+      value: 'test-key',
+      writable: true,
+      configurable: true,
+    });
+
+    this.component.updateFieldValue('field1', 'new value');
+    assert.strictEqual(this.component.data.field1, 'new value');
+  });
+
+  test('updateWordCount updates word count correctly', function (assert) {
+    this.component.wordCount = {};
+    this.component.updateWordCount('field1', { wordCount: 5 });
+    assert.strictEqual(this.component.wordCount.field1, 5);
+  });
+
+  test('formatError returns empty string when valid', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 10 } };
+    const result = this.component.formatError('field1', { isValid: true });
+    assert.strictEqual(result, '');
+  });
+
+  test('formatError returns min words message', function (assert) {
+    this.component.stepValidation = { field1: { min: 5, max: 10 } };
+    const result = this.component.formatError('field1', {
+      isValid: false,
+      remainingToMin: 3,
+    });
+    assert.strictEqual(result, 'At least 3 more word(s) required');
+  });
+
+  test('formatError returns max words message', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 5 } };
+    const result = this.component.formatError('field1', { isValid: false });
+    assert.strictEqual(result, 'Maximum 5 words allowed');
+  });
+
+  test('updateErrorMessage updates error correctly', function (assert) {
+    this.component.stepValidation = { field1: { min: 1, max: 10 } };
+    this.component.errorMessage = {};
+    this.component.updateErrorMessage('field1', {
+      isValid: false,
+      remainingToMin: 2,
+    });
+
+    assert.strictEqual(
+      this.component.errorMessage.field1,
+      'At least 2 more word(s) required',
+    );
+  });
+});