diff --git a/packages/marko-web-identity-x/browser/form/consent.vue b/packages/marko-web-identity-x/browser/form/consent.vue
index 8e392dc31..5828c1b9b 100644
--- a/packages/marko-web-identity-x/browser/form/consent.vue
+++ b/packages/marko-web-identity-x/browser/form/consent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="visible">
     <div v-if="emailConsentRequest" class="row mt-3">
       <div class="col-12">
         <receive-email
@@ -66,6 +66,21 @@ export default {
       type: String,
       default: null,
     },
+    hideWhenAnswered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  /**
+   *
+   */
+  data() {
+    return {
+      currentUser: {
+        ...this.user,
+      },
+    };
   },
 
   /**
@@ -83,6 +98,20 @@ export default {
         return countryCodes.includes(countryCode);
       });
     },
+    /**
+     *
+     */
+    visible() {
+      const { hideWhenAnswered } = this;
+      if (!hideWhenAnswered) return true;
+      if (!this.currentUser.receiveEmail) return true;
+      if (this.regionalPolicyFields.length) {
+        if (this.regionalPolicyFields.reduce(
+          (policy) => this.getRegionalPolicyAnswerValue(policy.id),
+        ).length) return true;
+      }
+      return false;
+    },
   },
 
   /**
diff --git a/packages/marko-web-identity-x/browser/index.js b/packages/marko-web-identity-x/browser/index.js
index 454aadd0a..b4d07d165 100644
--- a/packages/marko-web-identity-x/browser/index.js
+++ b/packages/marko-web-identity-x/browser/index.js
@@ -9,6 +9,7 @@ const Download = () => import(/* webpackChunkName: "identity-x-download" */ './d
 const Logout = () => import(/* webpackChunkName: "identity-x-logout" */ './logout.vue');
 const Login = () => import(/* webpackChunkName: "identity-x-login" */ './login.vue');
 const Profile = () => import(/* webpackChunkName: "identity-x-profile" */ './profile.vue');
+const Progressive = () => import(/* webpackChunkName: "identity-x-progressive" */ './progressive.vue');
 const CommentStream = () => import(/* webpackChunkName: "identity-x-comment-stream" */ './comments/stream.vue');
 
 const $graphql = createGraphqlClient({ uri: '/__graphql' });
@@ -25,6 +26,7 @@ export default (Browser, {
   CustomLoginComponent,
   CustomLogoutComponent,
   CustomProfileComponent,
+  CustomProgressiveComponent,
 } = {}) => {
   const AccessComponent = CustomAccessComponent || Access;
   const AuthenticateComponent = CustomAuthenticateComponent || Authenticate;
@@ -35,6 +37,7 @@ export default (Browser, {
   const LoginComponent = CustomLoginComponent || Login;
   const LogoutComponent = CustomLogoutComponent || Logout;
   const ProfileComponent = CustomProfileComponent || Profile;
+  const ProgressiveComponent = CustomProgressiveComponent || Progressive;
 
   window.IdentityX = new IdentityX();
 
@@ -48,6 +51,7 @@ export default (Browser, {
   Browser.register('IdentityXLogin', LoginComponent, { provide: { EventBus } });
   Browser.register('IdentityXLogout', LogoutComponent, { provide: { EventBus } });
   Browser.register('IdentityXProfile', ProfileComponent, { provide: { EventBus } });
+  Browser.register('IdentityXProgressive', ProgressiveComponent, { provide: { EventBus } });
 
   // Ensure the client-side IdX context is refreshed when the authentication event occurs
   EventBus.$on('identity-x-authenticated', () => window.IdentityX.refreshContext());
@@ -66,6 +70,7 @@ export default (Browser, {
     'identity-x-login-mounted',
     'identity-x-logout-mounted',
     'identity-x-profile-mounted',
+    'identity-x-progressive-mounted',
     // Actions/submissions
     'identity-x-access-submitted',
     'identity-x-authenticated',
@@ -79,6 +84,7 @@ export default (Browser, {
     'identity-x-login-link-sent',
     'identity-x-logout',
     'identity-x-profile-updated',
+    'identity-x-progressive-updated',
     // Errors
     'identity-x-access-errored',
     'identity-x-authenticate-errored',
@@ -90,6 +96,7 @@ export default (Browser, {
     'identity-x-login-errored',
     'identity-x-logout-errored',
     'identity-x-profile-errored',
+    'identity-x-progressive-errored',
   ].forEach((event) => {
     EventBus.$on(event, (args) => {
       if (!window.IdentityX) return;
diff --git a/packages/marko-web-identity-x/browser/progressive.vue b/packages/marko-web-identity-x/browser/progressive.vue
new file mode 100644
index 000000000..6bc2d4608
--- /dev/null
+++ b/packages/marko-web-identity-x/browser/progressive.vue
@@ -0,0 +1,630 @@
+<template>
+  <div v-if="hasActiveUser" id="progressive-form-wrapper">
+    <p v-if="!didSubmit">
+      {{ callToAction }}
+    </p>
+    <form v-if="!didSubmit" @submit.prevent="handleSubmit">
+      <fieldset :disabled="isLoading">
+        <div class="row">
+          <div
+            v-if="givenNameSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': familyNameSettings.visible }"
+          >
+            <given-name
+              v-model="user.givenName"
+              required
+              :label="defaultFieldLabels.givenName"
+            />
+          </div>
+          <div
+            v-if="familyNameSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': givenNameSettings.visible }"
+          >
+            <family-name
+              v-model="user.familyName"
+              required
+              :label="defaultFieldLabels.familyName"
+            />
+          </div>
+        </div>
+
+        <div class="row">
+          <div
+            v-if="organizationSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': organizationTitleSettings.visible }"
+          >
+            <organization
+              v-model="user.organization"
+              required
+              :label="defaultFieldLabels.organization"
+            />
+          </div>
+          <div
+            v-if="organizationTitleSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': organizationSettings.visible }"
+          >
+            <organization-title
+              v-model="user.organizationTitle"
+              required
+              :label="defaultFieldLabels.organizationTitle"
+            />
+          </div>
+        </div>
+
+        <div class="row">
+          <div
+            v-if="phoneNumberSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': countryCodeSettings.visible }"
+          >
+            <phone-number
+              v-model="user.phoneNumber"
+              required
+              :label="defaultFieldLabels.phoneNumber"
+            />
+          </div>
+          <div
+            v-if="countryCodeSettings.visible"
+            class="col-12"
+            :class="{ 'col-md-6': phoneNumberSettings.visible }"
+          >
+            <country
+              v-model="user.countryCode"
+              required
+              :label="defaultFieldLabels.country"
+            />
+          </div>
+        </div>
+
+        <div v-if="streetSettings.visible" class="row">
+          <street
+            v-model="user.street"
+            required
+            class="col-md-12"
+            :class="{ 'col-md-6': addressExtraSettings.visible }"
+            :label="defaultFieldLabels.street"
+          />
+          <address-extra
+            v-if="addressExtraSettings.visible"
+            v-model="user.addressExtra"
+            required
+            :label="defaultFieldLabels.addressExtra"
+          />
+        </div>
+
+        <div
+          v-if="citySettings.visible || regionCodeSettings.visible || postalCodeSettings.visible"
+          class="row"
+        >
+          <city
+            v-if="citySettings.visible"
+            v-model="user.city"
+            required
+            class="col-12"
+            :label="defaultFieldLabels.city"
+          />
+          <region
+            v-if="regionCodeSettings.visible"
+            v-model="user.regionCode"
+            :country-code="user.countryCode"
+            required
+            class="col-12"
+            :label="defaultFieldLabels.region"
+          />
+          <postal-code
+            v-if="postalCodeSettings.visible"
+            v-model="user.postalCode"
+            required
+            class="col-12"
+            :label="defaultFieldLabels.postalCode"
+          />
+        </div>
+
+        <div v-if="customSelectFieldAnswers.length" class="row">
+          <custom-select
+            v-for="fieldAnswer in customSelectFieldAnswers"
+            :id="fieldAnswer.field.id"
+            :key="fieldAnswer.id"
+            class="col-12"
+            :class="{ 'col-md-6': (customSelectFieldAnswers.length > 1) }"
+            :label="fieldAnswer.field.label"
+            required
+            :multiple="fieldAnswer.field.multiple"
+            :selected="fieldAnswer.answers"
+            :options="fieldAnswer.field.options"
+            @change="onCustomSelectChange(fieldAnswer.answers, $event)"
+          />
+        </div>
+
+        <div v-if="customBooleanFieldAnswers.length" class="row mt-3">
+          <div
+            v-if="booleanQuestionsLabel"
+            class="col-12 boolean-questions-label"
+            v-html="booleanQuestionsLabel"
+          />
+          <div
+            v-for="fieldAnswer in customBooleanFieldAnswers"
+            :key="fieldAnswer.id"
+            class="col-12"
+          >
+            <custom-boolean
+              :id="fieldAnswer.id"
+              :message="fieldAnswer.field.label"
+              required
+              :value="fieldAnswer.answer"
+              @input="onCustomBooleanChange(fieldAnswer.id)"
+            />
+          </div>
+        </div>
+
+        <form-consent
+          hide-when-answered
+          :user="user"
+          :consent-policy="consentPolicy"
+          :consent-policy-enabled="consentPolicyEnabled"
+          :email-consent-request="emailConsentRequest"
+          :email-consent-request-enabled="emailConsentRequestEnabled"
+          :regional-consent-policies="regionalConsentPolicies"
+          :country-code="countryCode"
+        />
+
+        <div class="d-flex align-items-center">
+          <button type="submit" class="btn btn-primary">
+            {{ buttonLabel }}
+          </button>
+        </div>
+      </fieldset>
+      <p v-if="error" class="mt-3 text-danger">
+        An error occurred: {{ error }}
+      </p>
+    </form>
+    <div v-else>
+      <div class="success-message">
+        <div class="success-message__title">
+          Your profile has been update.
+        </div>
+        <div class="success-message__message">
+          <p>
+            To finsih filling out your profile,
+            <button class="" type="button" href="/user/profile">
+              click here
+            </button>.
+          </p>
+          <p>
+            To return to the home page, <a href="/">click here</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <p>You must be logged in to modify your user profile.</p>
+    <login
+      :additional-event-data="additionalEventData"
+      :source="loginSource"
+      :endpoints="endpoints"
+      :app-context-id="appContextId"
+      :consent-policy="consentPolicy"
+      :consent-policy-enabled="consentPolicyEnabled"
+      :email-consent-request="emailConsentRequest"
+      :email-consent-request-enabled="emailConsentRequestEnabled"
+      :regional-consent-policies="regionalConsentPolicies"
+      required
+      :default-field-labels="defaultFieldLabels"
+    />
+  </div>
+</template>
+
+<script>
+import post from './utils/post';
+import cookiesEnabled from './utils/cookies-enabled';
+import regionCountryCodes from './utils/region-country-codes';
+
+import City from './form/fields/city.vue';
+import Region from './form/fields/region.vue';
+import PostalCode from './form/fields/postal-code.vue';
+import Street from './form/fields/street.vue';
+import AddressExtra from './form/fields/address-extra.vue';
+import FormConsent from './form/consent.vue';
+import CustomBoolean from './form/fields/custom-boolean.vue';
+import CustomSelect from './form/fields/custom-select.vue';
+import GivenName from './form/fields/given-name.vue';
+import FamilyName from './form/fields/family-name.vue';
+import Organization from './form/fields/organization.vue';
+import OrganizationTitle from './form/fields/organization-title.vue';
+import Country from './form/fields/country.vue';
+import PhoneNumber from './form/fields/phone-number.vue';
+import Login from './login.vue';
+
+import FeatureError from './errors/feature';
+import FormError from './errors/form';
+import AutoSignupEventEmitter from './mixins/global-auto-signup-event-emitter';
+import EventEmitter from './mixins/global-event-emitter';
+
+const { isArray } = Array;
+
+export default {
+  components: {
+    City,
+    Region,
+    PostalCode,
+    Street,
+    AddressExtra,
+    CustomBoolean,
+    CustomSelect,
+    GivenName,
+    FamilyName,
+    FormConsent,
+    Organization,
+    OrganizationTitle,
+    Country,
+    PhoneNumber,
+    Login,
+  },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter, AutoSignupEventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    loginSource: {
+      type: String,
+      default: 'default',
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    activeUser: {
+      type: Object,
+      default: () => ({}),
+    },
+    callToAction: {
+      type: String,
+      default: 'Please tell us a little more about yourself',
+    },
+    requiredServerFields: {
+      type: Array,
+      default: () => [],
+    },
+    requiredClientFields: {
+      type: Array,
+      default: () => [],
+    },
+    activeCustomFieldIds: {
+      type: Array,
+      default: () => [],
+    },
+    progressiveFields: {
+      type: Array,
+      default: () => [],
+    },
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => {},
+    },
+    hiddenFields: {
+      type: Array,
+      default: () => [],
+    },
+    reloadPageOnSubmit: {
+      type: Boolean,
+      default: false,
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    consentPolicyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequestEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Submit',
+    },
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    requiredLoginFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultCountryCode: {
+      type: String,
+      default: null,
+    },
+    booleanQuestionsLabel: {
+      type: String,
+      default: null,
+    },
+  },
+
+  /**
+   *
+   */
+  data() {
+    return {
+      error: null,
+      isLoading: false,
+      isReloadingPage: false,
+      isRedirectingPage: false,
+      didSubmit: false,
+      user: {
+        ...this.activeUser,
+        ...(
+          !this.hiddenFields.includes('countryCode')
+          && this.defaultCountryCode
+          && !this.activeUser.countryCode
+          && { countryCode: this.defaultCountryCode }
+        ),
+      },
+    };
+  },
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.user && this.user.email;
+    },
+
+    /**
+     *
+     */
+    currentProgressiveQuestions() {
+      const ids = this.progressiveFields.map(({ id }) => id);
+      const addressDependent = ['regionCode', 'postalCode'];
+      const unAnsweredIds = ids.filter((id) => {
+        // filter already preansered userFields
+        if (this.activeUser[id]) return false;
+        // Region & Postal are dependent on country being United Stages, Canada or Mexico
+        if (addressDependent.includes(id)) {
+          if (!this.countryCode || !regionCountryCodes.includes(this.countryCode)) return false;
+          return true;
+        }
+        // only return non answered customBooleanFields
+        const { customBooleanFieldAnswers, customSelectFieldAnswers } = this.activeUser;
+        const filteredBoolean = customBooleanFieldAnswers && customBooleanFieldAnswers
+          .filter(({ id: answerId }) => id === answerId);
+        if (filteredBoolean.length !== 0) {
+          return filteredBoolean.some(({ hasAnswered }) => !hasAnswered);
+        }
+        const filteredSelect = customSelectFieldAnswers && customSelectFieldAnswers
+          .filter(({ id: answerId }) => id === answerId);
+        if (filteredSelect.length !== 0) {
+          return filteredSelect.some(({ hasAnswered }) => !hasAnswered);
+        }
+        // only return non answered customSelectFields
+        return true;
+      });
+      // for now ensure only one is returned.
+      return unAnsweredIds;
+    },
+
+    /**
+     *
+     */
+    requiredFields() {
+      // for now ensure only one is returned.
+      const requiredIds = [this.currentProgressiveQuestions[0]];
+      // [...this.currentProgressiveQuestions[0]];
+      return requiredIds;
+    },
+
+    /**
+     *
+     */
+    countryCode() {
+      const { activeUser } = this;
+      if (!activeUser) return null;
+      return activeUser.countryCode;
+    },
+
+    /**
+     *
+     */
+    customBooleanFieldAnswers() {
+      const { requiredFields: ids } = this;
+      const { customBooleanFieldAnswers } = this.user;
+      const answers = isArray(customBooleanFieldAnswers) ? customBooleanFieldAnswers : [];
+      return answers.filter(ids.length > 0 ? ({ field }) => ids.includes(field.id) : () => true);
+    },
+
+    /**
+     *
+     */
+    customSelectFieldAnswers() {
+      const { requiredFields: ids } = this;
+      const { customSelectFieldAnswers } = this.user;
+      const answers = isArray(customSelectFieldAnswers) ? customSelectFieldAnswers : [];
+      return answers.filter(ids.length > 0 ? ({ field }) => ids.includes(field.id) : () => true);
+    },
+
+    /**
+     * Field settings
+     */
+    givenNameSettings() {
+      return {
+        visible: this.requiredFields.includes('givenName'),
+      };
+    },
+    familyNameSettings() {
+      return {
+        visible: this.requiredFields.includes('familyName'),
+      };
+    },
+    organizationSettings() {
+      return {
+        visible: this.requiredFields.includes('organization'),
+      };
+    },
+    organizationTitleSettings() {
+      return {
+        visible: this.requiredFields.includes('organizationTitle'),
+      };
+    },
+    countryCodeSettings() {
+      return {
+        visible: this.requiredFields.includes('countryCode'),
+      };
+    },
+    streetSettings() {
+      return {
+        visible: this.requiredFields.includes('street'),
+      };
+    },
+    addressExtraSettings() {
+      return {
+        visible: this.requiredFields.includes('addressExtra'),
+      };
+    },
+    phoneNumberSettings() {
+      return {
+        visible: this.requiredFields.includes('phoneNumber'),
+      };
+    },
+    citySettings() {
+      return {
+        visible: this.requiredFields.includes('city'),
+      };
+    },
+    regionCodeSettings() {
+      const canRequire = regionCountryCodes.includes(this.countryCode);
+      return {
+        visible: canRequire && this.requiredFields.includes('regionCode'),
+      };
+    },
+    postalCodeSettings() {
+      const canRequire = regionCountryCodes.includes(this.countryCode);
+      return {
+        visible: canRequire && this.requiredFields.includes('postalCode'),
+      };
+    },
+  },
+
+  /**
+   *
+   */
+  watch: {
+    /**
+     * Clear region and postal codes on country code change.
+     */
+    countryCode() {
+      this.user.regionCode = null;
+      this.user.postalCode = null;
+    },
+  },
+
+  /**
+   *
+   */
+  mounted() {
+    if (cookiesEnabled()) {
+      this.emit('progressive-mounted');
+    } else {
+      const error = new FeatureError('Your browser does not support cookies. Please enable cookies to use this feature.');
+      this.error = error.message;
+      this.emit('progressive-errored', { message: error.message });
+    }
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    onCustomBooleanChange(id) {
+      const objIndex = this.customBooleanFieldAnswers.findIndex(((obj) => obj.id === id));
+      const answer = !this.customBooleanFieldAnswers[objIndex].answer;
+      this.customBooleanFieldAnswers[objIndex].answer = answer;
+
+      this.user.customBooleanFieldAnswers = this.customBooleanFieldAnswers;
+    },
+
+    onCustomSelectChange(answers, $event) {
+      const ids = Array.isArray($event) ? [...$event] : [...($event ? [$event] : [])];
+      answers.splice(0);
+      if (ids.length) answers.push(...ids.map((id) => ({ id })));
+    },
+
+    customSelectIsRequired(fieldAnswer) {
+      return this.requiredFields.includes(fieldAnswer.field.id) || fieldAnswer.field.required;
+    },
+
+    /**
+     *
+     */
+    async handleSubmit() {
+      this.error = null;
+      this.isLoading = true;
+      this.didSubmit = false;
+      try {
+        const res = await post('/progressive', {
+          ...this.user,
+          additionalEventData: {
+            ...this.additionalEventData,
+            actionSource: this.loginSource,
+          },
+        });
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+
+        this.user = data.user;
+        this.didSubmit = true;
+        // force scroll to top of page when form and success message toggle
+        window.scrollTo(0, 0);
+
+        this.emitAutoSignup(data);
+        this.emit('progressive-updated', {
+          additionalEventData: {
+            ...(this.additionalEventData || {}),
+            ...(data.additionalEventData || {}),
+          },
+        });
+
+        if (this.reloadPageOnSubmit) {
+          this.isReloadingPage = true;
+          window.location.reload(true);
+        }
+      } catch (e) {
+        this.error = e;
+        this.emit('progressive-errored', { message: e.message });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
diff --git a/packages/marko-web-identity-x/components/access.marko b/packages/marko-web-identity-x/components/access.marko
index 386e87688..09f342462 100644
--- a/packages/marko-web-identity-x/components/access.marko
+++ b/packages/marko-web-identity-x/components/access.marko
@@ -11,6 +11,7 @@ $ const accessObj = {
   requiresAccessLevel: false,
   requiredAccessLevels: [],
   requiresUserInput: false,
+  requiresPUI: false,
   messages: {},
 };
 
diff --git a/packages/marko-web-identity-x/components/form-progressive.marko b/packages/marko-web-identity-x/components/form-progressive.marko
new file mode 100644
index 000000000..f445568b7
--- /dev/null
+++ b/packages/marko-web-identity-x/components/form-progressive.marko
@@ -0,0 +1,41 @@
+import { get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { req } = out.global;
+$ const { identityX, query } = req;
+$ const additionalEventData = defaultValue(input.additionalEventData, {});
+
+$ console.log(identityX.config.getProgresiveQuestions())
+
+<if(Boolean(identityX))>
+  <marko-web-identity-x-context|{ user, isEnabled, application }|>
+    $ const props = {
+      additionalEventData: additionalEventData,
+      loginSource: input.loginSource,
+      activeUser: user,
+      requiredServerFields: identityX.config.getRequiredServerFields(),
+      requiredClientFields: identityX.config.getRequiredClientFields(),
+      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      activeCustomFieldIds: identityX.config.getActiveCustomFieldIds(),
+      progressiveFields: identityX.config.getProgresiveQuestions(),
+      defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
+      hiddenFields: identityX.config.getHiddenFields(),
+      defaultCountryCode: identityX.config.get('defaultCountryCode'),
+      booleanQuestionsLabel: identityX.config.get('booleanQuestionsLabel'),
+      callToAction: input.callToAction,
+      reloadPageOnSubmit: input.reloadPageOnSubmit,
+      buttonLabel: input.buttonLabel,
+      endpoints: identityX.config.getEndpoints(),
+      consentPolicy: get(application, "organization.consentPolicy"),
+      emailConsentRequest: get(application, "organization.emailConsentRequest"),
+      appContextId: identityX.config.get("appContextId"),
+      regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+      returnTo: query.returnTo,
+      returnToDelay: input.returnToDelay,
+      enableChangeEmail: identityX.config.get("enableChangeEmail"),
+    };
+    <if(isEnabled)>
+      <marko-web-browser-component name="IdentityXProgressive" props=props />
+    </if>
+  </marko-web-identity-x-context>
+</if>
diff --git a/packages/marko-web-identity-x/components/marko.json b/packages/marko-web-identity-x/components/marko.json
index c09b165e8..32c5545aa 100644
--- a/packages/marko-web-identity-x/components/marko.json
+++ b/packages/marko-web-identity-x/components/marko.json
@@ -66,6 +66,18 @@
     "@return-to-delay": "number",
     "@button-label": "string"
   },
+  "<marko-web-identity-x-form-progressive>": {
+    "template": "./form-progressive.marko",
+    "@additional-event-data": "object",
+    "@login-source": {
+      "type": "string",
+      "default-value": "default"
+    },
+    "@call-to-action": "string",
+    "@reload-page-on-submit": "boolean",
+    "@return-to-delay": "number",
+    "@button-label": "string"
+  },
   "<marko-web-identity-x-comment-stream>": {
     "template": "./comment-stream.marko",
     "@additional-event-data": "object",
diff --git a/packages/marko-web-identity-x/config.js b/packages/marko-web-identity-x/config.js
index b0544cc67..4be68be7d 100644
--- a/packages/marko-web-identity-x/config.js
+++ b/packages/marko-web-identity-x/config.js
@@ -25,6 +25,8 @@ class IdentityXConfiguration {
     requiredClientFields = [],
     requiredCreateFields = [],
     activeCustomFieldIds = [],
+    progressiveDelay = 24, // hours
+    progressiveQuestions = [],
     defaultFieldLabels = {},
     hiddenFields = ['city', 'street', 'addressExtra', 'phoneNumber', 'mobileNumber'],
     defaultCountryCode,
@@ -42,6 +44,8 @@ class IdentityXConfiguration {
       requiredClientFields,
       requiredCreateFields,
       activeCustomFieldIds,
+      progressiveDelay,
+      progressiveQuestions,
       defaultFieldLabels,
       hiddenFields,
       defaultCountryCode,
@@ -64,6 +68,7 @@ class IdentityXConfiguration {
       'logout',
       'register',
       'profile',
+      'progressive',
     ];
     this.hooks = validHooks.reduce((o, name) => ({ ...o, [name]: [] }), {});
   }
@@ -139,6 +144,14 @@ class IdentityXConfiguration {
     return this.getAsArray('activeCustomFieldIds');
   }
 
+  getProgresiveDelay() {
+    return this.get('progressiveDelay');
+  }
+
+  getProgresiveQuestions() {
+    return this.getAsArray('progressiveQuestions');
+  }
+
   get(path, def) {
     return get(this.options, path, def);
   }
diff --git a/packages/marko-web-identity-x/routes/index.js b/packages/marko-web-identity-x/routes/index.js
index 7810ac807..f0db11218 100644
--- a/packages/marko-web-identity-x/routes/index.js
+++ b/packages/marko-web-identity-x/routes/index.js
@@ -15,6 +15,7 @@ const login = require('./login');
 const loginFields = require('./login-fields');
 const logout = require('./logout');
 const profile = require('./profile');
+const progressive = require('./progressive');
 const regions = require('./regions');
 
 const router = Router();
@@ -35,6 +36,7 @@ router.post('/login-fields', loginFields);
 router.post('/login', login);
 router.post('/logout', logout);
 router.post('/profile', profile);
+router.post('/progressive', progressive);
 router.use(jsonErrorHandler());
 
 module.exports = router;
diff --git a/packages/marko-web-identity-x/routes/progressive.js b/packages/marko-web-identity-x/routes/progressive.js
new file mode 100644
index 000000000..c855303c1
--- /dev/null
+++ b/packages/marko-web-identity-x/routes/progressive.js
@@ -0,0 +1,139 @@
+const gql = require('graphql-tag');
+const { asyncRoute } = require('@parameter1/base-cms-utils');
+const { getAsArray } = require('@parameter1/base-cms-object-path');
+const userFragment = require('../api/fragments/active-user');
+const callHooksFor = require('../utils/call-hooks-for');
+
+const mutation = gql`
+  mutation UpdateUserProfile($input: UpdateOwnAppUserMutationInput!) {
+    updateOwnAppUser(input: $input) {
+      ...ActiveUserFragment
+    }
+  }
+
+  ${userFragment}
+`;
+
+const consentAnswers = gql`
+  mutation SetAppUserRegionalConsent($input: SetAppUserRegionalConsentMutationInput!) {
+    setAppUserRegionalConsent(input: $input) {
+      id
+    }
+  }
+`;
+
+const customBooleanFieldsMutation = gql`
+  mutation SetAppUserCustomBooleanFields($input: UpdateOwnAppUserCustomBooleanAnswersMutationInput!) {
+    updateOwnAppUserCustomBooleanAnswers(input: $input) {
+      id
+    }
+  }
+`;
+
+const customSelectFieldsMutation = gql`
+  mutation SetAppUserCustomSelectFields($input: UpdateOwnAppUserCustomSelectAnswersMutationInput!) {
+    updateOwnAppUserCustomSelectAnswers(input: $input) {
+      id
+    }
+  }
+`;
+
+module.exports = asyncRoute(async (req, res) => {
+  const { identityX, body } = req;
+  const {
+    givenName,
+    familyName,
+    organization,
+    organizationTitle,
+    countryCode,
+    regionCode,
+    postalCode,
+    city,
+    street,
+    addressExtra,
+    phoneNumber,
+    receiveEmail,
+    regionalConsentAnswers,
+    customBooleanFieldAnswers,
+    customSelectFieldAnswers,
+    additionalEventData = {},
+  } = body;
+  const input = {
+    givenName,
+    familyName,
+    organization,
+    organizationTitle,
+    countryCode,
+    regionCode,
+    postalCode,
+    city,
+    street,
+    addressExtra,
+    phoneNumber,
+    receiveEmail,
+  };
+
+  const activeCustomFieldIds = getAsArray(identityX, 'config.options.activeCustomFieldIds');
+
+  const answers = regionalConsentAnswers
+    .map((answer) => ({ policyId: answer.id, given: answer.given }));
+
+  if (answers.length) {
+    await identityX.client.mutate({ mutation: consentAnswers, variables: { input: { answers } } });
+  }
+
+  if (customBooleanFieldAnswers.length) {
+    // only update custom questions when there some :)
+    const customBooleanFieldsInput = customBooleanFieldAnswers.map((fieldAnswer) => ({
+      fieldId: fieldAnswer.field.id,
+      // can either be true, false or null. convert null to false.
+      // the form submit is effectively answers the question.
+      value: Boolean(fieldAnswer.answer),
+    })).filter(
+      activeCustomFieldIds.length > 0
+        ? ({ fieldId }) => activeCustomFieldIds.includes(fieldId)
+        : () => true,
+    );
+    await identityX.client.mutate({
+      mutation: customBooleanFieldsMutation,
+      variables: { input: { answers: customBooleanFieldsInput } },
+    });
+  }
+
+  if (customSelectFieldAnswers.length) {
+    // only update custom questions when there some :)
+    const customSelectFieldsInput = customSelectFieldAnswers.map((fieldAnswer) => ({
+      fieldId: fieldAnswer.field.id,
+      optionIds: fieldAnswer.answers.map(({ id }) => id),
+      writeInValues: fieldAnswer.answers.reduce((arr, { id, writeInValue }) => ([
+        ...arr,
+        ...(writeInValue ? [{ optionId: id, value: writeInValue }] : []),
+      ]), []),
+    })).filter(
+      activeCustomFieldIds.length > 0
+        ? ({ fieldId }) => activeCustomFieldIds.includes(fieldId)
+        : () => true,
+    );
+    await identityX.client.mutate({
+      mutation: customSelectFieldsMutation,
+      variables: { input: { answers: customSelectFieldsInput } },
+    });
+  }
+
+  const { data } = await identityX.client.mutate({ mutation, variables: { input } });
+  const { updateOwnAppUser: user } = data;
+
+  const now = new Date().getTime();
+  await identityX.setAppUserCustomAttributes({
+    userId: user.id,
+    attributes: { profileLastUpdated: now },
+  });
+
+  await callHooksFor(identityX, 'onUserProfileUpdate', {
+    additionalEventData,
+    ...(additionalEventData || {}),
+    req,
+    user,
+  });
+  res.json({ ok: true, user, additionalEventData });
+});
diff --git a/packages/marko-web-identity-x/service.js b/packages/marko-web-identity-x/service.js
index 0b766f9db..8037ec800 100644
--- a/packages/marko-web-identity-x/service.js
+++ b/packages/marko-web-identity-x/service.js
@@ -211,6 +211,43 @@ class IdentityX {
         access.requiresUserInput = !hasRequiredAnswers;
       }
     }
+
+    access.requiresPUI = false;
+    const progressiveQuestions = this.config.getProgresiveQuestions().map((({ id }) => id));
+    if (access.isLoggedIn && progressiveQuestions.length) {
+      // Check if the user requires additonal input.
+      const { user } = await this.loadActiveContext();
+      //  access.requiresPUI(requiresProgressiveUserInput
+      access.requiresPUI = false;
+      // if progressiveQuestions are configured apply access logic
+      const profileLastUpdated = get(user, 'customAttributes.profileLastUpdated');
+      const now = new Date().getTime();
+      const hours = this.config.getProgresiveDelay();
+      const delay = hours * 60 * 60 * 1000;
+      const canAsk = profileLastUpdated ? profileLastUpdated < (now - delay) : true;
+      access.requiresPUI = user && canAsk ? progressiveQuestions.some((key) => {
+        // check direct user fields first
+        if (user[key]) return false;
+        // only check postal and region when country code is US, CA or MX
+        if (['postalCode', 'regionCode'].includes(key)) {
+          if (!user.countryCode || !['US', 'CA', 'MX'].includes(user.countryCode)) return false;
+          return true;
+        }
+        // check user boolean answer
+        const booleanToCheck = user.customBooleanFieldAnswers
+          .filter(({ field }) => field.id === key);
+        if (booleanToCheck.length !== 0) {
+          return booleanToCheck.some(({ hasAnswered }) => !hasAnswered);
+        }
+        // check users select answers
+        const selectToCheck = user.customSelectFieldAnswers
+          .filter(({ field }) => field.id === key);
+        if (selectToCheck.length !== 0) {
+          return selectToCheck.some(({ hasAnswered }) => !hasAnswered);
+        }
+        return true;
+      }) : false;
+    }
     return access;
   }
 
diff --git a/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko b/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko
index 623423831..0e9a08699 100644
--- a/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko
+++ b/packages/marko-web-theme-monorail/components/identity-x/content-page-gate.marko
@@ -10,6 +10,7 @@ $ const {
   hasRequiredAccessLevel,
   requiresAccessLevel,
   requiresUserInput,
+  requiresPUI,
   profileCallToAction,
   profileButtonLabel,
   buttonLabels,
@@ -20,6 +21,7 @@ $ const messages = getAsObject(input, "messages");
 $ const title = defaultValue(input.title, "Log in to view the full article");
 $ const profileConfirmation = defaultValue(input.profileConfirmation, "Email Confirmed!")
 $ const userInputTitle = defaultValue(input.userInputTitle, "Complete your profile to view the full article");
+$ const puiTitle = defaultValue(input.userInputTitle, "Tell us a little more to view the full article");
 $ const contentGateType = defaultValue(input.contentGateType, "default");
 $ const additionalEventData = {
   promoCode: site.get("contentMetering.promoCode", undefined),
@@ -28,7 +30,6 @@ $ const additionalEventData = {
   ...(input.loginEventName === "content_meter_login" && { contentGateType: "metered" }),
   ...(input.profileEventName === "content_meter_profile" && { contentGateType: "metered" }),
 };
-
 <marko-web-block name=blockName>
   <if(!canAccess)>
     <marko-web-element tag="h5" name="title" block-name=blockName>
@@ -82,4 +83,22 @@ $ const additionalEventData = {
       />
     </marko-web-element>
   </else-if>
+  <else-if(isLoggedIn && requiresPUI)>
+    <if(profileConfirmation)>
+      <marko-web-element name="confirmation" block-name=blockName>
+        ${profileConfirmation}
+      </marko-web-element>
+    </if>
+    <marko-web-element tag="h5" name="title" block-name=blockName>
+      ${puiTitle}
+    </marko-web-element>
+    <marko-web-element name="form-wrapper" block-name=blockName>
+      <marko-web-identity-x-form-progressive
+        call-to-action=' '
+        reload-page-on-submit=true
+        additional-event-data=additionalEventData
+        login-source="progressive"
+      />
+    </marko-web-element>
+  </else-if>
 </marko-web-block>
diff --git a/packages/marko-web-theme-monorail/components/identity-x/marko.json b/packages/marko-web-theme-monorail/components/identity-x/marko.json
index b242f882b..34806821d 100644
--- a/packages/marko-web-theme-monorail/components/identity-x/marko.json
+++ b/packages/marko-web-theme-monorail/components/identity-x/marko.json
@@ -9,6 +9,7 @@
     "@has-required-access-level": "boolean",
     "@requires-access-level": "boolean",
     "@requires-user-input": "boolean",
+    "@requiresPUI": "boolean",
     "@messages": "object",
     "@title": "string",
     "@user-input-title": "string",
diff --git a/services/example-website/config/identity-x.js b/services/example-website/config/identity-x.js
index 883597876..dcc8e6e74 100644
--- a/services/example-website/config/identity-x.js
+++ b/services/example-website/config/identity-x.js
@@ -16,11 +16,10 @@ module.exports = new IdentityXConfiguration({
     ],
   } : {
     // Parameter1.dev
-    appContextId: '64483b96361977163db5e286',
+    appContextId: '5d1b86070ce467bff670a052',
     activeCustomFieldIds: [
-      '618ab74dcd3e2f0147386c42', // Favorite games
-      '626fe91c79d99b27544a4c9f', // Pina coladas
-      '628e98dc2da307ff2ef6a8b0', // Rain
+      '628e9333f8dbf1d5cdda43d2', //
+      '6272f0046f7301b6afa14956', //
     ],
   }),
   // custom form field definitions
@@ -38,6 +37,32 @@ module.exports = new IdentityXConfiguration({
     phoneNumber: 'Mobile Phone',
     organization: 'Company Name',
   },
+  progressiveDelay: 0.1, // hours
+  progressiveQuestions: [
+    {
+      id: 'givenName',
+    },
+    // {
+    //   id: 'familyName',
+    // },
+    // {
+    //   id: 'postalCode',
+    // },
+    // {
+    //   id: 'street',
+    // },
+    // {
+    //   id: 'countryCode',
+    // },
+
+    {
+      id: '628e9333f8dbf1d5cdda43d2',
+    },
+    {
+      id: '6272f0046f7301b6afa14956',
+    },
+
+  ],
   hiddenFields: [],
   onHookError: (e) => {
     log('IDENTITY-X HOOK ERROR!', e);
diff --git a/services/example-website/server/templates/content.marko b/services/example-website/server/templates/content.marko
index c60a55160..900dcad1b 100644
--- a/services/example-website/server/templates/content.marko
+++ b/services/example-website/server/templates/content.marko
@@ -1,5 +1,9 @@
+import { getAsArray, get } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import getContentPreview from "@parameter1/base-cms-marko-web-theme-monorail/utils/get-content-preview";
+
 $ const { id, type, pageNode } = data;
-$ const { recaptcha } = out.global;
+$ const { recaptcha, identityX } = out.global;
 
 <marko-web-content-page-layout id=id type=type>
   <@page>
@@ -22,17 +26,57 @@ $ const { recaptcha } = out.global;
       <div class="row mt-3">
         <div class="col-md-8">
           <div class="content-page-body">
-            <theme-page-contents|{ blockName }| attrs={ "data-gallery-id": id }>
             <marko-web-p1-events-track-content-scroll-depth
               content=content
               selector=".document-container .page .row .content-page-body"
             />
-              <content-body
-                content=content
-                block-name=blockName
-                display-read-next=false
-                display-comments=true
-              />
+            <theme-page-contents|{ blockName }| attrs={ "data-gallery-id": id }>
+              $ const requiresRegistration = get(content, "userRegistration.isCurrentlyRequired");
+              $ const progressiveRegEnabled = identityX ?  identityX.config.getProgresiveQuestions().length !== 0 : false;
+              $ const checkReg = requiresRegistration || progressiveRegEnabled;
+              <marko-web-identity-x-access|context| enabled=checkReg>
+                <!-- If ProgressiveReg is enabled & required: Fire it first & ignore required user fields!  -->
+                <if(progressiveRegEnabled)>
+                  $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" });
+                  <marko-web-content-body block-name=blockName obj={ body } />
+                  <div class="content-page-preview-overlay" />
+                  <theme-content-page-gate
+                    profile-confirmation=false
+                    can-access=context.canAccess
+                    is-logged-in=context.isLoggedIn
+                    has-required-access-level=context.hasRequiredAccessLevel
+                    requires-access-level=context.requiresAccessLevel
+                    requires-user-input=false
+                    requiresPUI=context.requiresPUI
+                    messages=context.messages
+                    content-gate-type="default"
+                  />
+                </if>
+                <else-if(!context.canAccess || (context.requiresUserInput && requiresRegistration))>
+                  $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" });
+                  <marko-web-content-body block-name=blockName obj={ body } />
+                  <div class="content-page-preview-overlay" />
+                  <theme-content-page-gate
+                    profile-confirmation=false
+                    can-access=context.canAccess
+                    is-logged-in=context.isLoggedIn
+                    has-required-access-level=context.hasRequiredAccessLevel
+                    requires-access-level=context.requiresAccessLevel
+                    requires-user-input=context.requiresUserInput
+                    requiresPUI=context.requiresPUI
+                    messages=context.messages
+                    content-gate-type="default"
+                  />
+                </else-if>
+                <else>
+                  <content-body
+                    content=content
+                    block-name=blockName
+                    display-read-next=false
+                    display-comments=false
+                  />
+                </else>
+              </marko-web-identity-x-access>
             </theme-page-contents>
           </div>
         </div>
diff --git a/services/example-website/server/templates/user/index.js b/services/example-website/server/templates/user/index.js
index 3503f1694..30c1fcff7 100644
--- a/services/example-website/server/templates/user/index.js
+++ b/services/example-website/server/templates/user/index.js
@@ -3,6 +3,7 @@ const changeEmail = require('./change-email');
 const login = require('./login');
 const logout = require('./logout');
 const profile = require('./profile');
+const progressive = require('./progressive');
 
 module.exports = {
   authenticate,
@@ -10,4 +11,5 @@ module.exports = {
   login,
   logout,
   profile,
+  progressive,
 };
diff --git a/services/example-website/server/templates/user/progressive.marko b/services/example-website/server/templates/user/progressive.marko
new file mode 100644
index 000000000..a30cd4b6a
--- /dev/null
+++ b/services/example-website/server/templates/user/progressive.marko
@@ -0,0 +1,50 @@
+import { getAsObject } from "@parameter1/base-cms-object-path";
+$ const { config, res } = out.global;
+$ const { identityX } = res.locals;
+
+$ const type = "profile";
+$ const title = "Progressive Profile";
+$ const description = `Tell ${config.siteName()} a little more about your self`;
+
+$ const now = new Date().getTime();
+$ const hours = identityX.config.getProgresiveDelay();
+$ const delay = hours * 60 * 60 * 1000;
+
+$ const setDisplayNext = user => identityX.setAppUserCustomAttributes({
+  userId: user.id,
+  attributes: { progressiveSeenAt:  now },
+});
+
+$ const questions = identityX.config.getProgresiveQuestions();
+$ const qIds = questions.map(({id}) => id);
+
+<marko-web-default-page-layout type=type title=title description=description>
+  <@page>
+    <marko-web-page-wrapper>
+      <@section>
+        <h1 class="page-wrapper__title">${description}</h1>
+        <marko-web-identity-x-context|{ user, hasUser }|>
+          <if(user)>
+            $ const customAttributes = getAsObject(user, 'customAttributes');
+            $ const { profileLastUpdated } = customAttributes;
+            $ const canAsk = profileLastUpdated ? profileLastUpdated < (now - delay) : true;
+            <if(canAsk)>
+              <marko-web-identity-x-form-progressive
+                additional-event-data={
+                  action: "progressiveReg",
+                }
+              />
+            </if>
+            <else>
+              $ const waitInMilliSeconds =  profileLastUpdated - (now - delay);
+              $ const date = new Date(waitInMilliSeconds);
+              $ const waitInMin = `${date.getMinutes()}:${date.getSeconds()}`;
+              $ const customAttributes = { ...user.customAttributes, waitInMilliSeconds, waitInMin };
+              <pre class="my-3 border p-3">${JSON.stringify({ id: user.id, customAttributes }, null, 2)}</pre>
+            </else>
+          </if>
+        </marko-web-identity-x-context>
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>