diff --git a/api/app/Http/Requests/UserFormRequest.php b/api/app/Http/Requests/UserFormRequest.php
index f8b8da29..cfe4e106 100644
--- a/api/app/Http/Requests/UserFormRequest.php
+++ b/api/app/Http/Requests/UserFormRequest.php
@@ -29,6 +29,7 @@ public function rules()
             'visibility' => ['required', Rule::in(Form::VISIBILITY)],
 
             // Customization
+            'format' => ['required', Rule::in(Form::FORMATS)],
             'language' => ['required', Rule::in(Form::LANGUAGES)],
             'font_family' => 'string|nullable',
             'theme' => ['required', Rule::in(Form::THEMES)],
diff --git a/api/app/Models/Forms/Form.php b/api/app/Models/Forms/Form.php
index 54172371..333e6c74 100644
--- a/api/app/Models/Forms/Form.php
+++ b/api/app/Models/Forms/Form.php
@@ -41,6 +41,8 @@ class Form extends Model implements CachableAttributes
 
     public const VISIBILITY = ['public', 'draft', 'closed'];
 
+    public const FORMATS = ['regular', 'focused'];
+
     public const LANGUAGES = ['en', 'fr', 'hi', 'es', 'ar', 'zh', 'ja', 'bn', 'pt', 'ru', 'ur', 'pa', 'de', 'jv', 'ko', 'vi', 'te', 'mr', 'ta', 'tr'];
 
     protected $fillable = [
@@ -54,6 +56,7 @@ class Form extends Model implements CachableAttributes
         'visibility',
 
         // Customization
+        'format',
         'language',
         'font_family',
         'custom_domain',
diff --git a/api/database/factories/FormFactory.php b/api/database/factories/FormFactory.php
index 91d505e0..8226a3d6 100644
--- a/api/database/factories/FormFactory.php
+++ b/api/database/factories/FormFactory.php
@@ -50,6 +50,7 @@ public function definition()
             'title' => $this->faker->text(30),
             'description' => $this->faker->randomHtml(1),
             'visibility' => 'public',
+            'format' => 'regular',
             'language' => 'en',
             'theme' => $this->faker->randomElement(Form::THEMES),
             'size' => $this->faker->randomElement(Form::SIZES),
diff --git a/api/database/migrations/2024_12_04_163142_add_format_to_forms_table.php b/api/database/migrations/2024_12_04_163142_add_format_to_forms_table.php
new file mode 100644
index 00000000..48191ce2
--- /dev/null
+++ b/api/database/migrations/2024_12_04_163142_add_format_to_forms_table.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('format')->default('regular');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('format');
+        });
+    }
+};
diff --git a/client/components/global/EditableTag.vue b/client/components/global/EditableTag.vue
index 505fa24b..64bcd33c 100644
--- a/client/components/global/EditableTag.vue
+++ b/client/components/global/EditableTag.vue
@@ -4,7 +4,7 @@
     ref="parentRef"
     tabindex="0"
     :class="{
-      'hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-2 cursor-pointer':
+      'hover:bg-gray-200/50 dark:hover:bg-gray-800 rounded px-2 cursor-pointer':
         !editing,
     }"
     class="relative"
diff --git a/client/components/open/editors/FormatChangeModal.vue b/client/components/open/editors/FormatChangeModal.vue
new file mode 100644
index 00000000..d4cf748a
--- /dev/null
+++ b/client/components/open/editors/FormatChangeModal.vue
@@ -0,0 +1,75 @@
+<template>
+  <modal
+    :show="show && form.format === 'focused' && removeBlocks.length > 0"
+    :compact-header="true"
+    :closeable="false"
+    @close="onCancel"
+  >
+    <template #icon>
+      <Icon
+        name="heroicons:document-text"
+        class="w-10 h-10 text-blue"
+      />
+    </template>
+    <template #title>
+      Format Change
+    </template>
+    
+    <div class="p-4">
+      If you change the format, below block(s) will be removed from the form:
+      <ul
+        v-if="removeBlocks.length > 0"
+        class="list-disc ml-4 mt-2"
+      >
+        <li
+          v-for="block in removeBlocks"
+          :key="block.id"
+        >
+          {{ block.name }}
+        </li>
+      </ul>
+
+      <div class="flex justify-end mt-4 px-6">
+        <v-button
+          class="mr-2"
+          @click.prevent="changeFormat"
+        >
+          It's ok
+        </v-button>
+        <v-button
+          color="white"
+          @click.prevent="onCancel"
+        >
+          Cancel
+        </v-button>
+      </div>
+    </div>    
+  </modal>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const emit = defineEmits(['close'])
+const removeTypes = ['nf-page-break','nf-divider','nf-image','nf-code']
+const formStore = useWorkingFormStore()
+const form = computed(() => formStore.content)
+
+const removeBlocks = computed(() => form.value.properties.filter(field => removeTypes.includes(field.type)))
+
+const changeFormat = () => {
+  form.value.properties = form.value.properties.filter(property => !removeTypes.includes(property.type))
+  form.value.format = 'focused'
+  emit('close')
+}
+
+const onCancel = () => {
+  form.value.format = 'regular'
+  emit('close')
+}
+</script>
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index d80f8354..a6569e55 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -12,12 +12,28 @@
     >
     
     <template v-if="!isHideTitle">
-      <EditableTag
+      <div
         v-if="adminPreview"
-        v-model="form.title"
-        element="h1"
-        class="mb-2"
-      />
+        class="relative group"
+      >
+        <EditableTag
+          v-model="form.title"
+          element="h1"
+          class="mb-2"
+          content-class="pr-8"
+        />
+        <UTooltip
+          class="absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100"
+          text="Hide title"
+        >
+          <UButton
+            icon="i-heroicons-eye-slash"
+            size="xs"
+            color="gray"
+            @click="hideTitle"
+          />
+        </UTooltip>
+      </div>
       <h1
         v-else
         class="mb-2 px-2"
@@ -108,13 +124,14 @@
         key="form"
       >
         <open-form
-          v-if="form && !form.is_closed"
+          v-if="form && !form.is_closed && form.format === 'regular'"
           :form="form"
           :loading="loading"
           :fields="form.properties"
           :theme="theme"
           :dark-mode="darkMode"
           :admin-preview="adminPreview"
+          :creating="creating"
           @submit="submitForm"
         >
           <template #submit-btn="{submitForm}">
@@ -130,6 +147,30 @@
             </open-form-button>
           </template>
         </open-form>
+        <open-form-focused
+          v-else-if="form && !form.is_closed && form.format === 'focused'"
+          :form="form"
+          :loading="loading"
+          :fields="form.properties"
+          :theme="theme"
+          :dark-mode="darkMode"
+          :admin-preview="adminPreview"
+          :creating="creating"
+          @submit="submitForm"
+        >
+          <template #submit-btn="{submitForm}">
+            <open-form-button
+              :loading="loading"
+              :theme="theme"
+              :color="form.color"
+              class="mt-2 px-8 mx-1"
+              :class="submitButtonClass"
+              @click.prevent="submitForm"
+            >
+              {{ form.submit_button_text }}
+            </open-form-button>
+          </template>
+        </open-form-focused>  
         <p
           v-if="!form.no_branding"
           class="text-center w-full mt-2"
@@ -202,6 +243,8 @@
 <script>
 import OpenForm from './OpenForm.vue'
 import OpenFormButton from './OpenFormButton.vue'
+import OpenFormFocused from './OpenFormFocused.vue'
+import FormTimer from './FormTimer.vue'
 import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
@@ -210,7 +253,7 @@ import ThemeBuilder from "~/lib/forms/themes/ThemeBuilder.js"
 import FirstSubmissionModal from '~/components/open/forms/components/FirstSubmissionModal.vue'
 
 export default {
-  components: { VTransition, OpenFormButton, OpenForm, FormCleanings, FirstSubmissionModal },
+  components: { VTransition, OpenFormButton, OpenForm, OpenFormFocused, FormCleanings, FormTimer, FirstSubmissionModal },
 
   props: {
     form: { type: Object, required: true },
@@ -364,6 +407,11 @@ export default {
     },
     addPasswordError (msg) {
       this.passwordForm.errors.set('password', msg)
+    },
+    hideTitle() {
+      if (!this.adminPreview) return
+      this.form.hide_title = true
+      this.$emit('update:form', this.form)
     }
   }
 }
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index 30caa001..4f56a1b0 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -166,6 +166,7 @@ export default {
       required: true
     },
     defaultDataForm: { type: [Object, null] },
+    creating: {type: Boolean, default: false},
     adminPreview: {type: Boolean, default: false}, // If used in FormEditorPreview
     urlPrefillPreview: {type: Boolean, default: false}, // If used in UrlFormPrefill
     darkMode: {
@@ -266,6 +267,7 @@ export default {
     previousFieldsPageBreak() {
       if (this.formPageIndex === 0) return null
       const previousFields = this.fieldGroups[this.formPageIndex - 1]
+      if (!previousFields?.length) return null
       const block = previousFields[previousFields.length - 1]
       if (block && block.type === 'nf-page-break') return block
       return null
@@ -516,7 +518,7 @@ export default {
       this.scrollToTop()
     },
     nextPage() {
-      if (this.adminPreview || this.urlPrefillPreview) {
+      if (this.adminPreview || this.urlPrefillPreview || this.creating) {
         this.formPageIndex++
         this.scrollToTop()
         return false
diff --git a/client/components/open/forms/OpenFormFocused.vue b/client/components/open/forms/OpenFormFocused.vue
new file mode 100644
index 00000000..1dcf2688
--- /dev/null
+++ b/client/components/open/forms/OpenFormFocused.vue
@@ -0,0 +1,538 @@
+<template>
+  <div v-if="isAutoSubmit">
+    <p class="text-center p-4">
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
+    </p>
+  </div>
+  <form
+    v-else-if="dataForm"
+    :style="computedStyle"
+    @submit.prevent=""
+  >
+    <FormTimer
+      ref="form-timer"
+      :form="form"
+    />
+    <template v-if="form.show_progress_bar">
+      <div
+        v-if="isIframe"
+        class="mb-4 p-2"
+      >
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden">
+          <div
+            class="h-full transition-all duration-300 rounded-r-full"
+            :class="{ 'w-0': formProgress === 0 }"
+            :style="{ width: formProgress + '%', background: form.color }"
+          />
+        </div>
+      </div>
+      <div
+        v-else
+        class="fixed top-0 left-0 right-0 z-50"
+      >
+        <div class="w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden">
+          <div
+            class="h-full transition-all duration-300"
+            :class="{ 'w-0': formProgress === 0 }"
+            :style="{ width: formProgress + '%', background: form.color }"
+          />
+        </div>
+      </div>
+    </template>
+    <transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        :key="formPageIndex"
+        class="w-full shadow-lg rounded-lg bg-white dark:bg-gray-800 p-6"
+      >
+        <div v-if="currentField">
+          <div>
+            <open-form-field
+              :field="currentField"
+              :show-hidden="showHidden"
+              :form="form"
+              :data-form="dataForm"
+              :data-form-value="dataFormValue"
+              :theme="theme"
+              :dark-mode="darkMode"
+              :admin-preview="adminPreview"
+            />
+          </div>
+          <div class="flex justify-between">
+            <open-form-button
+              v-if="formPageIndex > 0 && !loading"
+              native-type="button"
+              :color="form.color"
+              :theme="theme"
+              class="mt-2 px-8 mx-1"
+              @click="previousPage"
+            >
+              {{ currentField.focused_previous_button_text || $t('forms.back') }}
+            </open-form-button>
+            <open-form-button
+              v-if="formPageIndex >= 0 && !isLastPage && !loading"
+              native-type="button"
+              :color="form.color"
+              :theme="theme"
+              class="mt-2 px-8 mx-1"
+              @click="nextPage"
+            >
+              {{ currentField.focused_next_button_text || $t('forms.next') }}
+            </open-form-button>
+            <slot
+              v-if="isLastPage"
+              name="submit-btn"
+              :submit-form="submitForm"
+            />
+          </div>
+        </div>
+        <div v-else>
+          No fields found
+        </div>
+      </div>
+    </transition>
+
+    <!-- Captcha -->
+    <template v-if="form.use_captcha && isLastPage">
+      <div class="mb-3 px-2 mt-2 mx-auto w-max">
+        <vue-hcaptcha
+          ref="hcaptcha"
+          :sitekey="hCaptchaSiteKey"
+          :theme="darkMode?'dark':'light'"
+          @opened="setMinHeight(500)"
+          @closed="setMinHeight(0)"
+        />
+        <has-error
+          :form="dataForm"
+          field-id="h-captcha-response"
+        />
+      </div>
+    </template>
+  </form>
+</template>
+
+<script>
+import clonedeep from 'clone-deep'
+import OpenFormButton from './OpenFormButton.vue'
+import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
+import OpenFormField from './OpenFormField.vue'
+import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
+import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import {computed} from "vue"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+import FormTimer from './FormTimer.vue'
+import { storeToRefs } from 'pinia'
+
+export default {
+  name: 'OpenForm',
+  components: { OpenFormField, OpenFormButton, VueHcaptcha, FormTimer},
+  props: {
+    form: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    showHidden: {
+      type: Boolean,
+      default: false
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    defaultDataForm: { type: [Object, null] },
+    creating: {type: Boolean, default: false},
+    adminPreview: {type: Boolean, default: false}, // If used in FormEditorPreview
+    urlPrefillPreview: {type: Boolean, default: false}, // If used in UrlFormPrefill
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['submit'],
+  setup(props) {
+    const recordsStore = useRecordsStore()
+    const workingFormStore = useWorkingFormStore()
+    const dataForm = ref(useForm())
+
+    return {
+      dataForm,
+      recordsStore,
+      workingFormStore,
+      isIframe: useIsIframe(),
+      draggingNewBlock: computed(() => workingFormStore.draggingNewBlock),
+      pendingSubmission: pendingSubmission(props.form),
+      formPageIndex: storeToRefs(workingFormStore).formPageIndex,
+
+      // Used for admin previews
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
+      showEditFieldSidebar: computed(() => workingFormStore.showEditFieldSidebar),
+    }
+  },
+
+  data() {
+    return {
+      // Page index
+      /**
+       * Used to force refresh components by changing their keys
+       */
+      isAutoSubmit: false,
+      minHeight: 0
+    }
+  },
+
+  computed: {
+    hCaptchaSiteKey() {
+      return useRuntimeConfig().public.hCaptchaSiteKey
+    },
+    fieldGroups() {
+      if (!this.fields) return []
+      return this.fields.filter(field => !this.isFieldHidden(field))
+    },
+    formProgress() {
+      const requiredFields = this.fields.filter(field => field.required)
+      if (requiredFields.length === 0) {
+        return 100
+      }
+      const completedFields = requiredFields.filter(field => ![null, undefined, ''].includes(this.dataFormValue[field.id]))
+      const progress = (completedFields.length / requiredFields.length) * 100
+      return Math.round(progress)
+    },
+    currentField() {
+      return this.fieldGroups[this.formPageIndex]
+    },
+    previousFieldsPageBreak() {
+      if (this.formPageIndex === 0) return null
+      const previousFields = this.fieldGroups[this.formPageIndex - 1]
+      const block = previousFields[previousFields.length - 1]
+      if (block && block.type === 'nf-page-break') return block
+      return null
+    },
+    /**
+     * Returns true if we're on the last page
+     * @returns {boolean}xs
+     */
+    isLastPage() {
+      return this.formPageIndex === (this.fieldGroups.length - 1)
+    },
+    isPublicFormPage() {
+      return this.$route.name === 'forms-slug'
+    },
+    dataFormValue() {
+      // For get values instead of Id for select/multi select options
+      const data = this.dataForm.data()
+      const selectionFields = this.fields.filter((field) => {
+        return ['select', 'multi_select'].includes(field.type)
+      })
+      selectionFields.forEach((field) => {
+        if (data[field.id] !== undefined && data[field.id] !== null && Array.isArray(data[field.id])) {
+          data[field.id] = data[field.id].map(option_nfid => {
+            const tmpop = field[field.type].options.find((op) => {
+              return (op.id === option_nfid)
+            })
+            return (tmpop) ? tmpop.name : option_nfid
+          })
+        }
+      })
+      return data
+    },
+    computedStyle() {
+      return {
+        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {},
+        '--form-color': this.form.color
+      }
+    }
+  },
+
+  watch: {
+    form: {
+      deep: true,
+      handler() {
+        this.initForm()
+      }
+    },
+    fields: {
+      deep: true,
+      handler() {
+        this.initForm()
+      }
+    },
+    dataFormValue: {
+      deep: true,
+      handler() {
+        if (this.isPublicFormPage && this.form && this.form.auto_save) {
+          this.pendingSubmission.set(this.dataFormValue)
+        }
+      }
+    },
+
+    // These watchers ensure the form shows the correct page for the field being edited in admin preview
+    selectedFieldIndex: {
+      handler(newIndex) {
+        if (this.adminPreview && this.showEditFieldSidebar) {
+          this.setPageForField(newIndex)
+        }
+      }
+    },
+    showEditFieldSidebar: {
+      handler(newValue) {
+        if (this.adminPreview && newValue) {
+          this.setPageForField(this.selectedFieldIndex)
+        }
+      }
+    }
+  },
+  beforeMount() {
+    this.initForm()
+  },
+  mounted() {
+    this.$refs['form-timer'].startTimer()
+    if (import.meta.client && window.location.href.includes('auto_submit=true')) {
+      this.isAutoSubmit = true
+      this.submitForm()
+    }
+  },
+
+  methods: {
+    submitForm() {
+      if (!this.isAutoSubmit && this.formPageIndex !== this.fieldGroups.length - 1) return
+
+      if (this.form.use_captcha && import.meta.client) {
+        this.dataForm['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
+        this.$refs.hcaptcha.reset()
+      }
+
+      if (this.form.editable_submissions && this.form.submission_id) {
+        this.dataForm.submission_id = this.form.submission_id
+      }
+
+      this.$refs['form-timer'].stopTimer()
+      this.dataForm.completion_time = this.$refs['form-timer'].completionTime
+
+      this.$emit('submit', this.dataForm, this.onSubmissionFailure)
+    },
+    /**
+     *   Handle form submission failure
+     */
+    onSubmissionFailure() {
+      this.$refs['form-timer'].startTimer()
+      this.isAutoSubmit = false
+      if (this.fieldGroups.length > 1) {
+        this.showFirstPageWithError()
+      }
+      this.scrollToFirstError()
+    },
+    showFirstPageWithError() {
+      for (let i = 0; i < this.fieldGroups.length; i++) {
+        if (this.fieldGroups[i].some(field => this.dataForm.errors.has(field.id))) {
+          this.formPageIndex = i
+          break
+        }
+      }
+    },
+    scrollToFirstError() {
+      if (import.meta.server) return
+      const firstErrorElement = document.querySelector('.has-error')
+      if (firstErrorElement) {
+        window.scroll({
+          top: window.scrollY + firstErrorElement.getBoundingClientRect().top - 60,
+          behavior: 'smooth'
+        })
+      }
+    },
+    async getSubmissionData() {
+      if (!this.form || !this.form.editable_submissions || !this.form.submission_id) {
+        return null
+      }
+      await this.recordsStore.loadRecord(
+        opnFetch('/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((data) => {
+          return {submission_id: this.form.submission_id, id: this.form.submission_id, ...data.data}
+        }).catch((error) => {
+          useAlert().error(error?.data?.message || 'Something went wrong')
+          return null
+        })
+      )
+      return this.recordsStore.getByKey(this.form.submission_id)
+    },
+
+     /**
+     * Form initialization
+     */
+    async initForm() {
+      if (this.defaultDataForm) {
+        this.dataForm = useForm(this.defaultDataForm)
+        return
+      }
+
+      if (await this.tryInitFormFromEditableSubmission()) return
+      if (this.tryInitFormFromPendingSubmission()) return
+
+      this.initFormWithDefaultValues()
+    },
+    async tryInitFormFromEditableSubmission() {
+      if (this.isPublicFormPage && this.form.editable_submissions) {
+        const submissionId = useRoute().query?.submission_id
+        if (submissionId) {
+          this.form.submission_id = submissionId
+          const data = await this.getSubmissionData()
+          if (data) {
+            this.dataForm = useForm(data)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    tryInitFormFromPendingSubmission() {
+      if (this.isPublicFormPage && this.form.auto_save) {
+        const pendingData = this.pendingSubmission.get()
+        if (pendingData && Object.keys(pendingData).length !== 0) {
+          this.updatePendingDataFields(pendingData)
+          this.dataForm = useForm(pendingData)
+          return true
+        }
+      }
+      return false
+    },
+    updatePendingDataFields(pendingData) {
+      this.fields.forEach(field => {
+        if (field.type === 'date' && field.prefill_today) {
+          pendingData[field.id] = new Date().toISOString()
+        }
+      })
+    },
+    initFormWithDefaultValues() {
+      const formData = clonedeep(this.dataForm?.data() || {})
+      const urlPrefill = this.isPublicFormPage ? new URLSearchParams(window.location.search) : null
+
+      this.fields.forEach(field => {
+        if (field.type.startsWith('nf-')) return
+
+        this.handleUrlPrefill(field, formData, urlPrefill)
+        this.handleDefaultPrefill(field, formData)
+      })
+
+      this.dataForm = useForm(formData)
+    },
+    handleUrlPrefill(field, formData, urlPrefill) {
+      if (!urlPrefill) return
+
+      const prefillValue = (() => {
+        const val = urlPrefill.get(field.id)
+        try {
+          return typeof val === 'string' && val.startsWith('{') ? JSON.parse(val) : val
+        } catch (e) {
+          return val
+        }
+      })()
+      const arrayPrefillValue = urlPrefill.getAll(field.id + '[]')
+
+      if (typeof prefillValue === 'object' && prefillValue !== null) {
+        formData[field.id] = { ...prefillValue }
+      } else if (prefillValue !== null) {
+        formData[field.id] = field.type === 'checkbox' ? this.parseBooleanValue(prefillValue) : prefillValue
+      } else if (arrayPrefillValue.length > 0) {
+        formData[field.id] = arrayPrefillValue
+      }
+    },
+    parseBooleanValue(value) {
+      return value === 'true' || value === '1'
+    },
+    handleDefaultPrefill(field, formData) {
+      if (field.type === 'date' && field.prefill_today) {
+        formData[field.id] = new Date().toISOString()
+      } else if (field.type === 'matrix' && !formData[field.id]) {
+        formData[field.id] = {...field.prefill}
+      } else if (!(field.id in formData)) {
+        formData[field.id] = field.prefill
+      }
+    },
+    
+    /**
+     * Page Navigation
+     */
+    previousPage() {
+      this.formPageIndex--
+      this.scrollToTop()
+    },
+    nextPage() {
+      if (this.adminPreview || this.urlPrefillPreview || this.creating) {
+        this.formPageIndex++
+        this.scrollToTop()
+        return false
+      }
+      this.dataForm.busy = true
+      this.dataForm.validate('POST', '/forms/' + this.form.slug + '/answer', {}, this.currentField)
+        .then(() => {
+          this.formPageIndex++
+          this.dataForm.busy = false
+          this.scrollToTop()
+        }).catch(this.handleValidationError)
+      return false
+    },
+    scrollToTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    },
+    handleValidationError(error) {
+      console.error(error)
+      if (error?.data?.message) {
+        useAlert().error(error.data.message)
+      }
+      this.dataForm.busy = false
+    },
+    isFieldHidden(field) {
+      return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
+    },
+    getTargetFieldIndex(currentFieldPageIndex) {
+      return this.formPageIndex > 0
+        ? this.fieldGroups.slice(0, this.formPageIndex).reduce((sum, group) => sum + group.length, 0) + currentFieldPageIndex
+        : currentFieldPageIndex
+    },
+    handleDragDropped(data) {
+      if (data.added) {
+        const targetIndex = this.getTargetFieldIndex(data.added.newIndex)
+        this.workingFormStore.addBlock(data.added.element, targetIndex, false)
+      }
+      if (data.moved) {
+        const oldTargetIndex = this.getTargetFieldIndex(data.moved.oldIndex)
+        const newTargetIndex = this.getTargetFieldIndex(data.moved.newIndex)
+        this.workingFormStore.moveField(oldTargetIndex, newTargetIndex)
+      }
+    },
+    setPageForField(fieldIndex) {
+      if (fieldIndex === -1) return
+      this.formPageIndex = fieldIndex
+    },
+    setMinHeight(minHeight) {
+      if (!this.isIframe) return
+
+      this.minHeight = minHeight
+      try {
+        window.parentIFrame.size()
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.ghost-item {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-md;
+}
+</style>
diff --git a/client/components/open/forms/components/form-components/AddFormBlock.vue b/client/components/open/forms/components/form-components/AddFormBlock.vue
index f76f436a..bf341009 100644
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -87,8 +87,11 @@ import BlockTypeIcon from '../BlockTypeIcon.vue'
 
 const workingFormStore = useWorkingFormStore()
 
+const form = computed(() => workingFormStore.content)
+const isFocused = computed(() => form.value?.format === 'focused')
+
 const inputBlocks = computed(() => Object.values(blocksTypes).filter(block => !block.name.startsWith('nf-')))
-const layoutBlocks = computed(() => Object.values(blocksTypes).filter(block => block.name.startsWith('nf-')))
+const layoutBlocks = computed(() => Object.values(blocksTypes).filter(block => block.name.startsWith('nf-') && (isFocused.value ? !['nf-page-break','nf-divider','nf-image','nf-code'].includes(block.name) : true)))
 
 const closeSidebar = () => {
   workingFormStore.closeAddFieldSidebar()
diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index 2c141d4e..7ffcf07c 100644
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -18,6 +18,7 @@
       label="Form Theme"
     />
     <color-input
+      class="mt-4"
       name="color"
       :form="form"
     >
@@ -44,6 +45,20 @@
       label="Color Mode"
       help="Use Auto to use device system preferences"
     />
+    <FlatSelectInput
+      :form="form"
+      name="format"
+      :options="[
+        { name: 'Regular format', value: 'regular' },
+        { name: 'Focused format (1 question per page)', value: 'focused' },
+      ]"
+      label="Form format"
+      @update:model-value="onChangeFormat"
+    />
+    <FormatChangeModal
+      :show="showFormatChangeModal"
+      @close="showFormatChangeModal = false"
+    />
 
     <EditorSectionHeader
       icon="octicon:typography-16"
@@ -145,7 +160,7 @@
     <image-input
       name="cover_picture"
       :form="form"
-      label="Color image"
+      :label="form.format === 'focused' ? 'Background image' : 'Cover image'"
       help="Not visible when form is embedded"
     />
     <toggle-switch-input
@@ -212,6 +227,7 @@
 import EditorSectionHeader from "./EditorSectionHeader.vue"
 import { useWorkingFormStore } from "../../../../../stores/working_form"
 import GoogleFontPicker from "../../../editors/GoogleFontPicker.vue"
+import FormatChangeModal from "../../../editors/FormatChangeModal.vue"
 import ProTag from "~/components/global/ProTag.vue"
 import { DEFAULT_COLOR } from "@/composables/forms/initForm"
 
@@ -224,6 +240,7 @@ const form = storeToRefs(workingFormStore).content
 const isMounted = ref(false)
 const confetti = useConfetti()
 const showGoogleFontPicker = ref(false)
+const showFormatChangeModal = ref(false)
 const { $i18n } = useNuxtApp()
 
 const user = computed(() => authStore.user)
@@ -263,4 +280,10 @@ const onApplyFont = (val) => {
   form.value.font_family = val
   showGoogleFontPicker.value = false
 }
-</script>
+
+const onChangeFormat = (val) => {
+  if (val === 'focused') {
+    showFormatChangeModal.value = true
+  }
+}
+</script>
\ No newline at end of file
diff --git a/client/components/open/forms/components/form-components/FormEditorPreview.vue b/client/components/open/forms/components/form-components/FormEditorPreview.vue
index abd9b0b3..bdf5bedc 100644
--- a/client/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/client/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -15,7 +15,7 @@
     }"
   >
     <div 
-      class="border rounded-lg bg-white dark:bg-notion-dark w-full block shadow-sm transition-all flex flex-col"
+      class="border rounded-lg bg-white dark:bg-notion-dark w-full block shadow-sm transition-all flex flex-col flex-grow"
       :class="{ 'max-w-5xl': !isExpanded, 'h-full': isExpanded }"
     >
       <div class="w-full bg-white dark:bg-gray-950 border-b border-gray-300 dark:border-blue-900 dark:border-gray-700 rounded-t-lg p-1.5 px-4 flex items-center gap-x-1.5">
@@ -45,7 +45,7 @@
           />
         </UTooltip>
       </div>
-      <div class="flex-grow overflow-y-auto">
+      <div class="flex-grow overflow-y-auto relative">
         <transition
           enter-active-class="linear duration-100 overflow-hidden"
           enter-from-class="max-h-0"
@@ -54,30 +54,35 @@
           leave-from-class="max-h-56"
           leave-to-class="max-h-0"
         >
-          <div v-if="(form.logo_picture || form.cover_picture)">
+          <div
+            v-if="(form.logo_picture || form.cover_picture || isFocused)"
+            class="relative z-0"
+          >
             <div v-if="form.cover_picture">
               <div
                 id="cover-picture"
-                class="h-[30vh] w-full overflow-hidden flex items-center justify-center"
+                class="w-full overflow-hidden flex items-center justify-center"
+                :class="{'h-[30vh]': !isFocused}"
               >
                 <img
                   alt="Form Cover Picture"
                   :src="coverPictureSrc(form.cover_picture)"
-                  class="object-cover w-full h-[30vh] object-center"
+                  class="object-cover w-full object-center"
+                  :class="{'h-[100vh]': isFocused, 'h-[30vh]': !isFocused}"
                 >
               </div>
             </div>
             <div
               v-if="form.logo_picture"
-              class="w-full mx-auto py-5 relative"
-              :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded}"
+              class="w-full mx-auto"
+              :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded, 'relative py-5': !isFocused}"
               :style="{ 'direction': form?.layout_rtl ? 'rtl' : 'ltr' }"
             >
               <img
                 alt="Logo Picture"
                 :src="coverPictureSrc(form.logo_picture)"
-                :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-                class="max-w-60 h-20 object-contain absolute transition-all"
+                :class="{ 'top-5':!form.cover_picture && !isFocused, '-top-10':form.cover_picture && !isFocused, 'top-10':isFocused}"
+                class="max-w-60 h-20 object-contain transition-all absolute"
               >
             </div>
           </div>
@@ -87,19 +92,21 @@
             <loader class="h-6 w-6 text-nt-blue mx-auto" />
           </p>
         </div>
-        <open-complete-form
-          v-show="!recordLoading"
-          ref="formPreview"
-          class="w-full mx-auto py-5"
-          :class="{'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded}"
-          :creating="creating"
-          :form="form"
-          :dark-mode="darkMode"
-          :admin-preview="!isExpanded"
-          :show-cleanings="false"
-          @restarted="previewFormSubmitted=false"
-          @submitted="previewFormSubmitted=true"
-        />
+        <div :class="{'absolute inset-0 flex items-center justify-center': isFocused}">
+          <open-complete-form
+            v-show="!recordLoading"
+            ref="formPreview"
+            class="w-full mx-auto py-5"
+            :class="{'max-w-lg': form && (form.width === 'centered'),'px-7': !isExpanded, 'px-3': isExpanded}"
+            :creating="creating"
+            :form="form"
+            :dark-mode="darkMode"
+            :admin-preview="!isExpanded"
+            :show-cleanings="false"
+            @restarted="previewFormSubmitted=false"
+            @submitted="previewFormSubmitted=true"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -128,6 +135,8 @@ const darkMode = useDarkMode(parent)
 
 const creating = computed(() => !_has(form.value, 'id'))
 
+const isFocused = computed(() => form.value.format === 'focused')
+
 defineShortcuts({
   escape: {
     usingInput: true,
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 9d411c73..97e01562 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -597,6 +597,28 @@
         @update:model-value="onFieldGenAutoIdChange"
       />
     </div>
+
+    <!--  Focused Format Options   -->
+    <div
+      v-if="form.format === 'focused'"
+      class="px-4"
+    >
+      <EditorSectionHeader
+        icon="i-heroicons-bars-3-bottom-left"
+        title="Focused Format Options"
+      />
+      
+      <text-input
+        name="focused_previous_button_text"
+        :form="field"
+        label="Previous Button Text"
+      />
+      <text-input
+        name="focused_next_button_text"
+        :form="field"
+        label="Next Button Text"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/client/components/pages/forms/create/CreateFormBaseModal.vue b/client/components/pages/forms/create/CreateFormBaseModal.vue
index 9f2fba8c..bcc88115 100644
--- a/client/components/pages/forms/create/CreateFormBaseModal.vue
+++ b/client/components/pages/forms/create/CreateFormBaseModal.vue
@@ -1,84 +1,31 @@
 <template>
-  <Modal
-    :show="show"
-    :closeable="!aiForm.busy"
-    @close="$emit('close')"
-  >
-    <template #icon>
-      <template v-if="state == 'default'">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-10 h-10 text-blue"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </template>
-      <template v-else-if="state == 'ai'">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-8 h-8 text-blue-500"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </template>
-    </template>
-    <template #title>
-      <template v-if="state == 'default'">
-        Choose a base for your form
-      </template>
-      <template v-else-if="state == 'ai'">
-        AI-powered form generator
-      </template>
-    </template>
-    <div
-      v-if="state == 'default'"
-      class="grid grid-cols-1 sm:grid-cols-2 gap-4"
+  <div>
+    <form-format-modal
+      :show="showFormatModal"
+      :form="form"
+      @close="showFormatModal = false"
+    />
+    <Modal
+      :show="!showFormatModal && show"
+      :closeable="!aiForm.busy"
+      @close="$emit('close')"
     >
-      <div
-        v-track.select_form_base="{ base: 'contact-form' }"
-        role="button"
-        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
-        @click="$emit('close')"
-      >
-        <div class="p-4">
+      <template #icon>
+        <template v-if="state == 'default'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="currentColor"
-            class="w-8 h-8 text-blue-500"
+            class="w-10 h-10 text-blue"
           >
             <path
-              d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
-            />
-            <path
-              d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+              fill-rule="evenodd"
+              d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+              clip-rule="evenodd"
             />
           </svg>
-        </div>
-        <p class="font-medium">
-          Start from a simple contact form
-        </p>
-      </div>
-      <div
-        v-if="useFeatureFlag('ai_features')"
-        v-track.select_form_base="{ base: 'ai' }"
-        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
-        role="button"
-        @click="state = 'ai'"
-      >
-        <div class="p-4 relative">
+        </template>
+        <template v-else-if="state == 'ai'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -91,84 +38,145 @@
               clip-rule="evenodd"
             />
           </svg>
-        </div>
-        <p class="font-medium text-blue-700">
-          Use our AI to create the form
-        </p>
-        <span class="text-xs text-gray-500">(1 min)</span>
-      </div>
+        </template>
+      </template>
+      <template #title>
+        <template v-if="state == 'default'">
+          Choose a base for your form
+        </template>
+        <template v-else-if="state == 'ai'">
+          AI-powered form generator
+        </template>
+      </template>
       <div
-        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50 relative"
+        v-if="state == 'default'"
+        class="grid grid-cols-1 sm:grid-cols-2 gap-4"
       >
-        <div class="p-4 relative">
+        <div
+          v-track.select_form_base="{ base: 'contact-form' }"
+          role="button"
+          class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
+          @click="$emit('close')"
+        >
+          <div class="p-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-8 h-8 text-blue-500"
+            >
+              <path
+                d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
+              />
+              <path
+                d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+              />
+            </svg>
+          </div>
+          <p class="font-medium">
+            Start from a simple contact form
+          </p>
+        </div>
+        <div
+          v-if="useFeatureFlag('ai_features')"
+          v-track.select_form_base="{ base: 'ai' }"
+          class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
+          role="button"
+          @click="state = 'ai'"
+        >
+          <div class="p-4 relative">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-8 h-8 text-blue-500"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <p class="font-medium text-blue-700">
+            Use our AI to create the form
+          </p>
+          <span class="text-xs text-gray-500">(1 min)</span>
+        </div>
+        <div
+          class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50 relative"
+        >
+          <div class="p-4 relative">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-8 h-8 text-blue-500"
+            >
+              <path
+                d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 01.878.645 49.17 49.17 0 01.376 5.452.657.657 0 01-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 00-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 01-.595 4.845.75.75 0 01-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 01-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 01-.658.643 49.118 49.118 0 01-4.708-.36.75.75 0 01-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 005.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 00.659-.663 47.703 47.703 0 00-.31-4.82.75.75 0 01.83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 00.657-.642z"
+              />
+            </svg>
+          </div>
+          <p class="font-medium">
+            Start from a template
+          </p>
+          <NuxtLink
+            v-track.select_form_base="{ base: 'template' }"
+            :to="{ name: 'templates' }"
+            class="absolute inset-0"
+          />
+        </div>
+      </div>
+      <div v-else-if="state == 'ai'">
+        <a
+          class="absolute top-4 left-4"
+          href="#"
+          role="button"
+          @click.prevent="state = 'default'"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="currentColor"
-            class="w-8 h-8 text-blue-500"
+            class="w-4 h-4 inline -mt-1"
           >
             <path
-              d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 01.878.645 49.17 49.17 0 01.376 5.452.657.657 0 01-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 00-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 01-.595 4.845.75.75 0 01-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 01-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 01-.658.643 49.118 49.118 0 01-4.708-.36.75.75 0 01-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 005.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 00.659-.663 47.703 47.703 0 00-.31-4.82.75.75 0 01.83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 00.657-.642z"
+              fill-rule="evenodd"
+              d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z"
+              clip-rule="evenodd"
             />
           </svg>
-        </div>
-        <p class="font-medium">
-          Start from a template
-        </p>
-        <NuxtLink
-          v-track.select_form_base="{ base: 'template' }"
-          :to="{ name: 'templates' }"
-          class="absolute inset-0"
+          Back
+        </a>
+        <text-area-input
+          label="Form Description"
+          :disabled="loading ? true : null"
+          :form="aiForm"
+          name="form_prompt"
+          help="Give us a description of the form you want to build (the more details the better)"
+          placeholder="A simple contact form, with a name, email and message field"
         />
-      </div>
-    </div>
-    <div v-else-if="state == 'ai'">
-      <a
-        class="absolute top-4 left-4"
-        href="#"
-        role="button"
-        @click.prevent="state = 'default'"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-4 h-4 inline -mt-1"
+        <v-button
+          class="w-full"
+          :loading="loading"
+          @click.prevent="generateForm"
         >
-          <path
-            fill-rule="evenodd"
-            d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        Back
-      </a>
-      <text-area-input
-        label="Form Description"
-        :disabled="loading ? true : null"
-        :form="aiForm"
-        name="form_prompt"
-        help="Give us a description of the form you want to build (the more details the better)"
-        placeholder="A simple contact form, with a name, email and message field"
-      />
-      <v-button
-        class="w-full"
-        :loading="loading"
-        @click.prevent="generateForm"
-      >
-        Generate a form
-      </v-button>
-      <p class="text-gray-500 text-xs text-center mt-1">
-        ~60 sec
-      </p>
-    </div>
-  </Modal>
+          Generate a form
+        </v-button>
+        <p class="text-gray-500 text-xs text-center mt-1">
+          ~60 sec
+        </p>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
     show: { type: Boolean, required: true },
+    form: { type: Object, required: true },
   },
   emits: ["close", "form-generated"],
   setup() {
@@ -183,6 +191,7 @@ export default {
       form_prompt: "",
     }),
     loading: false,
+    showFormatModal: true,
   }),
 
   methods: {
diff --git a/client/components/pages/forms/create/FormFormatModal.vue b/client/components/pages/forms/create/FormFormatModal.vue
new file mode 100644
index 00000000..de1c7106
--- /dev/null
+++ b/client/components/pages/forms/create/FormFormatModal.vue
@@ -0,0 +1,34 @@
+<template>
+  <Modal
+    :show="show"
+    max-width="lg"
+    @close="$emit('close')"
+  >
+    <FlatSelectInput
+      :form="form"
+      name="format"
+      :options="[
+        { name: 'Regular format', value: 'regular' },
+        { name: 'Focused format (1 question per page)', value: 'focused' },
+      ]"
+      label="Select form format"
+    />
+    <div class="flex">
+      <UButton
+        size="md"
+        block
+        @click="$emit('close')"
+      >
+        Ok
+      </UButton>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { defineProps } from "vue"
+ 
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
+})
+</script>
\ No newline at end of file
diff --git a/client/composables/forms/initForm.js b/client/composables/forms/initForm.js
index 869c3a21..95683b3d 100644
--- a/client/composables/forms/initForm.js
+++ b/client/composables/forms/initForm.js
@@ -10,6 +10,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     properties: withDefaultProperties ? getDefaultProperties() : [],
 
     // Customization
+    format: "regular",
     language: 'en',
     font_family: null,
     theme: "default",
diff --git a/client/i18n/lang/ar.json b/client/i18n/lang/ar.json
index 7d38d3d7..c3ffede4 100644
--- a/client/i18n/lang/ar.json
+++ b/client/i18n/lang/ar.json
@@ -3,6 +3,8 @@
         "name": "نوت فورمز"
     },
     "forms": {
+        "back": "رجوع",
+        "next": "التالي",
         "powered_by": "مشغل بواسطة",
         "password_protected": "هذا النموذج محمي بكلمة مرور.",
         "invalid_password": "كلمة مرور غير صالحة.",
diff --git a/client/i18n/lang/bn.json b/client/i18n/lang/bn.json
index 8f2d0a84..e9f1e75f 100644
--- a/client/i18n/lang/bn.json
+++ b/client/i18n/lang/bn.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "পেছনে",
+        "next": "পরবর্তী",
         "powered_by": "দ্বারা চালিত",
         "password_protected": "এই ফর্মটি পাসওয়ার্ড দ্বারা সুরক্ষিত।",
         "invalid_password": "অবৈধ পাসওয়ার্ড।",
diff --git a/client/i18n/lang/de.json b/client/i18n/lang/de.json
index f940688e..6a8d21f2 100644
--- a/client/i18n/lang/de.json
+++ b/client/i18n/lang/de.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Zurück",
+        "next": "Nächste",
         "powered_by": "Bereitgestellt von",
         "password_protected": "Dieses Formular ist passwortgeschützt.",
         "invalid_password": "Ungültiges Passwort.",
diff --git a/client/i18n/lang/en.json b/client/i18n/lang/en.json
index f3ccf3ab..6812500b 100644
--- a/client/i18n/lang/en.json
+++ b/client/i18n/lang/en.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Back",
+        "next": "Next",
         "powered_by": "Powered by",
         "password_protected": "This form is protected by a password.",
         "invalid_password": "Invalid password.",
diff --git a/client/i18n/lang/es.json b/client/i18n/lang/es.json
index d6c2a3d7..27ae2340 100644
--- a/client/i18n/lang/es.json
+++ b/client/i18n/lang/es.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Atrás",
+        "next": "Siguiente",
         "powered_by": "Desarrollado por",
         "password_protected": "Este formulario está protegido por contraseña.",
         "invalid_password": "Contraseña inválida.",
diff --git a/client/i18n/lang/fr.json b/client/i18n/lang/fr.json
index 2978cd3a..bc539dae 100644
--- a/client/i18n/lang/fr.json
+++ b/client/i18n/lang/fr.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Retour",
+        "next": "Suivant",
         "powered_by": "Développé par",
         "password_protected": "Ce formulaire est protégé par un mot de passe.",
         "invalid_password": "Mot de passe invalide.",
diff --git a/client/i18n/lang/hi.json b/client/i18n/lang/hi.json
index 5d36238e..aad61cbc 100644
--- a/client/i18n/lang/hi.json
+++ b/client/i18n/lang/hi.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "पिछला",
+        "next": "अगला",
         "powered_by": "विकसित करने वाला",
         "password_protected": "यह फॉर्म एक पासवर्ड से सुरक्षित है।",
         "invalid_password": "अमान्य पासवर्ड।",
diff --git a/client/i18n/lang/ja.json b/client/i18n/lang/ja.json
index 7a91fe95..62848431 100644
--- a/client/i18n/lang/ja.json
+++ b/client/i18n/lang/ja.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "戻る",
+        "next": "次へ",
         "powered_by": "開発者",
         "password_protected": "このフォームはパスワードで保護されています。",
         "invalid_password": "無効なパスワード。",
diff --git a/client/i18n/lang/jv.json b/client/i18n/lang/jv.json
index 296be258..80029e87 100644
--- a/client/i18n/lang/jv.json
+++ b/client/i18n/lang/jv.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Kembali",
+        "next": "Lanjut",
         "powered_by": "Dipungkasi dening",
         "password_protected": "Formulir iki dilindhungi tembung sandi.",
         "invalid_password": "Tembung sandi ora bener.",
diff --git a/client/i18n/lang/ko.json b/client/i18n/lang/ko.json
index 06e68022..e0167a6c 100644
--- a/client/i18n/lang/ko.json
+++ b/client/i18n/lang/ko.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "뒤로",
+        "next": "다음",
         "powered_by": "제공",
         "password_protected": "이 양식은 비밀번호로 보호되어 있습니다.",
         "invalid_password": "잘못된 비밀번호입니다.",
diff --git a/client/i18n/lang/mr.json b/client/i18n/lang/mr.json
index 33d0f62b..91f4c4cb 100644
--- a/client/i18n/lang/mr.json
+++ b/client/i18n/lang/mr.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "पुढे",
+        "next": "पुढे",
         "powered_by": "द्वारे संचालित",
         "password_protected": "हा फॉर्म पासवर्डने संरक्षित आहे.",
         "invalid_password": "अवैध पासवर्ड.",
diff --git a/client/i18n/lang/pa.json b/client/i18n/lang/pa.json
index e1eb7824..6d157c72 100644
--- a/client/i18n/lang/pa.json
+++ b/client/i18n/lang/pa.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "ਪੁਛਣਾ",
+        "next": "ਪੁਛਣਾ",
         "powered_by": "ਦੁਆਰਾ ਸੰਚਾਲਿਤ",
         "password_protected": "ਇਹ ਫਾਰਮ ਪਾਸਵਰਡ ਦੁਆਰਾ ਸੁਰੱਖਿਅਤ ਹੈ।",
         "invalid_password": "ਗਲਤ ਪਾਸਵਰਡ।",
diff --git a/client/i18n/lang/pt.json b/client/i18n/lang/pt.json
index 6fb60086..d3e42972 100644
--- a/client/i18n/lang/pt.json
+++ b/client/i18n/lang/pt.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Voltar",
+        "next": "Próximo",
         "powered_by": "Desenvolvido por",
         "password_protected": "Este formulário está protegido por senha.",
         "invalid_password": "Senha inválida.",
diff --git a/client/i18n/lang/ru.json b/client/i18n/lang/ru.json
index b4cd0c19..41f982ba 100644
--- a/client/i18n/lang/ru.json
+++ b/client/i18n/lang/ru.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Назад",
+        "next": "Вперед",
         "powered_by": "Работает на",
         "password_protected": "Эта форма защищена паролем.",
         "invalid_password": "Неверный пароль.",
diff --git a/client/i18n/lang/ta.json b/client/i18n/lang/ta.json
index 470b0652..f5856ef0 100644
--- a/client/i18n/lang/ta.json
+++ b/client/i18n/lang/ta.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "பின்னுக்கு",
+        "next": "பின்னுக்கு",
         "powered_by": "மூலம் இயக்கப்படுகிறது",
         "password_protected": "இந்தப் படிவம் கடவுச்சொல்லால் பாதுகாக்கப்பட்டுள்ளது.",
         "invalid_password": "தவறான கடவுச்சொல்.",
diff --git a/client/i18n/lang/te.json b/client/i18n/lang/te.json
index 9a59d262..1c6f5da1 100644
--- a/client/i18n/lang/te.json
+++ b/client/i18n/lang/te.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "పిలుస్తా",
+        "next": "పిలుస్తా",
         "powered_by": "ద్వారా ఆధారితం",
         "password_protected": "ఈ ఫారమ్ పాస్‌వర్డ్‌తో రక్షించబడింది.",
         "invalid_password": "చెల్లని పాస్‌వర్డ్.",
diff --git a/client/i18n/lang/tr.json b/client/i18n/lang/tr.json
index bc426457..bc45d03c 100644
--- a/client/i18n/lang/tr.json
+++ b/client/i18n/lang/tr.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Geri",
+        "next": "İleri",
         "powered_by": "Tarafından desteklenmektedir",
         "password_protected": "Bu form şifre korumalıdır.",
         "invalid_password": "Geçersiz şifre.",
diff --git a/client/i18n/lang/ur.json b/client/i18n/lang/ur.json
index 5447c063..fb348026 100644
--- a/client/i18n/lang/ur.json
+++ b/client/i18n/lang/ur.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "پیچھے",
+        "next": "پیچھے",
         "powered_by": "پاور بائی",
         "password_protected": "یہ فارم پاس ورڈ سے محفوظ ہے۔",
         "invalid_password": "غلط پاس ورڈ۔",
diff --git a/client/i18n/lang/vi.json b/client/i18n/lang/vi.json
index 77ff9b64..6be91380 100644
--- a/client/i18n/lang/vi.json
+++ b/client/i18n/lang/vi.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "Trở lại",
+        "next": "Tiếp tục",
         "powered_by": "Được cung cấp bởi",
         "password_protected": "Biểu mẫu này được bảo vệ bằng mật khẩu.",
         "invalid_password": "Mật khẩu không hợp lệ.",
diff --git a/client/i18n/lang/zh.json b/client/i18n/lang/zh.json
index f1fa025f..e4b9e43a 100644
--- a/client/i18n/lang/zh.json
+++ b/client/i18n/lang/zh.json
@@ -3,6 +3,8 @@
         "name": "OpnForm"
     },
     "forms": {
+        "back": "返回",
+        "next": "下一步",
         "powered_by": "开发者",
         "password_protected": "此表单受密码保护。",
         "invalid_password": "无效密码。",
diff --git a/client/package-lock.json b/client/package-lock.json
index d1d57717..063776c1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -54,6 +54,7 @@
       "devDependencies": {
         "@iconify-json/clarity": "^1.2.1",
         "@iconify-json/ic": "^1.2.1",
+        "@iconify-json/mdi": "^1.2.1",
         "@iconify-json/octicon": "^1.2.1",
         "@nuxt/devtools": "^1.6.1",
         "@nuxt/eslint-config": "^0.2.0",
@@ -1477,6 +1478,16 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/mdi": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.1.tgz",
+      "integrity": "sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/octicon": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@iconify-json/octicon/-/octicon-1.2.1.tgz",
diff --git a/client/package.json b/client/package.json
index a172b888..531806a6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@iconify-json/clarity": "^1.2.1",
     "@iconify-json/ic": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.1",
     "@iconify-json/octicon": "^1.2.1",
     "@nuxt/devtools": "^1.6.1",
     "@nuxt/eslint-config": "^0.2.0",
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 4fd72227..87b1e00e 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -7,12 +7,14 @@
       <div v-if="form.cover_picture">
         <div
           id="cover-picture"
-          class="max-h-56 w-full overflow-hidden flex items-center justify-center"
+          class="w-full overflow-hidden flex items-center justify-center"
+          :class="{'h-screen': isFocused, 'max-h-56': !isFocused}"
         >
           <img
             alt="Form Cover Picture"
             :src="form.cover_picture"
             class="w-full"
+            :class="{'h-screen object-cover': isFocused}"
           >
         </div>
       </div>
@@ -59,14 +61,16 @@
             <loader class="h-6 w-6 text-nt-blue mx-auto" />
           </p>
         </div>
-        <OpenCompleteForm
-          v-show="!recordLoading"
-          ref="openCompleteForm"
-          :form="form"
-          class="mb-10"
-          :dark-mode="darkMode"
-          @password-entered="passwordEntered"
-        />
+        <div :class="{'absolute inset-0 flex items-center justify-center': isFocused}">
+          <OpenCompleteForm
+            v-show="!recordLoading"
+            ref="openCompleteForm"
+            :form="form"
+            class="mb-10"
+            :dark-mode="darkMode"
+            @password-entered="passwordEntered"
+          />
+        </div>
       </template>
     </div>
   </div>
@@ -95,6 +99,8 @@ const slug = useRoute().params.slug
 const form = computed(() => formsStore.getByKey(slug))
 const $t = useI18n()
 
+const isFocused = computed(() => form.value.format === 'focused')
+
 const openCompleteForm = ref(null)
 
 const passwordEntered = function (password) {
diff --git a/client/pages/forms/create/index.vue b/client/pages/forms/create/index.vue
index 80331f6f..39f2f116 100644
--- a/client/pages/forms/create/index.vue
+++ b/client/pages/forms/create/index.vue
@@ -5,6 +5,7 @@
       class="w-full flex flex-grow flex-col"
     >
       <create-form-base-modal
+        :form="form"
         :show="showInitialFormModal"
         @form-generated="formGenerated"
         @close="showInitialFormModal = false"