diff --git a/client/components/global/transitions/SlidingTransition.vue b/client/components/global/transitions/SlidingTransition.vue
new file mode 100644
index 00000000..57f8bb21
--- /dev/null
+++ b/client/components/global/transitions/SlidingTransition.vue
@@ -0,0 +1,95 @@
+<template>
+  <transition
+    :name="transitionName"
+    @enter="enter"
+    @leave="leave"
+    @after-enter="resetStyles"
+    @after-leave="resetStyles"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['vertical', 'horizontal'].includes(value)
+  },
+  step: {
+    type: Number,
+    default: 1
+  }
+})
+
+const previousStep = ref(props.step)
+const transitionName = computed(() => {
+  const baseTransition = props.direction === 'vertical' ? 'slide-vertical' : 'slide-horizontal'
+  return `${baseTransition}-${props.step > previousStep.value ? 'forward' : 'backward'}`
+})
+
+watch(() => props.step, (newStep, oldStep) => {
+  previousStep.value = oldStep
+})
+
+const enter = (el, done) => {
+  const { height } = el.getBoundingClientRect()
+  el.style.height = '0'
+  el.offsetHeight // force reflow
+  el.style.height = `${height}px`
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+const leave = (el, done) => {
+  const { height } = el.getBoundingClientRect()
+  el.style.height = `${height}px`
+  el.offsetHeight // force reflow
+  el.style.height = '0'
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+const resetStyles = (el) => {
+  el.style.height = ''
+}
+</script>
+
+<style scoped>
+.slide-horizontal-forward-enter-active,
+.slide-horizontal-forward-leave-active,
+.slide-horizontal-backward-enter-active,
+.slide-horizontal-backward-leave-active,
+.slide-vertical-forward-enter-active,
+.slide-vertical-forward-leave-active,
+.slide-vertical-backward-enter-active,
+.slide-vertical-backward-leave-active {
+  transition: all 0.3s ease-out;
+  overflow: hidden;
+}
+
+.slide-horizontal-forward-enter-from,
+.slide-horizontal-backward-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-horizontal-forward-leave-to,
+.slide-horizontal-backward-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-vertical-forward-enter-from,
+.slide-vertical-backward-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-vertical-forward-leave-to,
+.slide-vertical-backward-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>
\ No newline at end of file
diff --git a/client/components/pages/pricing/SubscriptionModal.vue b/client/components/pages/pricing/SubscriptionModal.vue
index 443f11c6..ce9dda91 100644
--- a/client/components/pages/pricing/SubscriptionModal.vue
+++ b/client/components/pages/pricing/SubscriptionModal.vue
@@ -6,616 +6,327 @@
     backdrop-blur
     @close="subscriptionModalStore.closeModal()"
   >
-    <div
-      v-if="currentStep === 1"
-      class="flex flex-col items-center pr-4 pb-20 pl-6 rounded-2xl max-md:pl-5 relative"
-    >
-      <main class="flex flex-col mt-4 max-w-full text-center w-[591px] max-md:mt-10">
-        <svg
-          class="self-center max-w-full aspect-[0.98] w-[107px]"
-          viewBox="0 0 108 109"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g opacity="0.5">
-            <path
-              d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
-              fill="url(#paint0_linear_6894_874)"
-            />
-            <path
-              d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
-              stroke="url(#paint1_linear_6894_874)"
-              stroke-width="2"
-            />
-            <rect
-              x="39.5371"
-              y="24"
-              width="47"
-              height="4"
-              rx="2"
-              fill="url(#paint2_linear_6894_874)"
-            />
-            <rect
-              x="39.5371"
-              y="34"
-              width="47"
-              height="4"
-              rx="2"
-              fill="url(#paint3_linear_6894_874)"
-            />
-            <rect
-              x="39.5371"
-              y="44"
-              width="24"
-              height="4"
-              rx="2"
-              fill="url(#paint4_linear_6894_874)"
-            />
-          </g>
-          <path
-            d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
-            fill="url(#paint5_linear_6894_874)"
-          />
-          <path
-            d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
-            stroke="url(#paint6_linear_6894_874)"
-            stroke-width="2"
-          />
-          <rect
-            x="23.5371"
-            y="30"
-            width="47"
-            height="4"
-            rx="2"
-            fill="url(#paint7_linear_6894_874)"
-          />
-          <rect
-            x="23.5371"
-            y="40"
-            width="47"
-            height="4"
-            rx="2"
-            fill="url(#paint8_linear_6894_874)"
-          />
-          <rect
-            x="23.5371"
-            y="50"
-            width="24"
-            height="4"
-            rx="2"
-            fill="url(#paint9_linear_6894_874)"
-          />
-          <rect
-            width="100"
-            height="100"
-            transform="translate(0.5 9)"
-            fill="url(#paint10_linear_6894_874)"
-          />
-          <path
-            d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
-            stroke="url(#paint11_linear_6894_874)"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
-            stroke="url(#paint12_linear_6894_874)"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
-            stroke="url(#paint13_linear_6894_874)"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_6894_874"
-              x1="31.6431"
-              y1="17.1538"
-              x2="97.3504"
-              y2="81.7277"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F5F8FB" />
-              <stop
-                offset="1"
-                stop-color="white"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint1_linear_6894_874"
-              x1="31.2928"
-              y1="93.4417"
-              x2="93.1583"
-              y2="93.3534"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint2_linear_6894_874"
-              x1="39.3548"
-              y1="28.2434"
-              x2="85.4911"
-              y2="27.347"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint3_linear_6894_874"
-              x1="39.3548"
-              y1="38.2434"
-              x2="85.4911"
-              y2="37.347"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint4_linear_6894_874"
-              x1="39.444"
-              y1="48.2434"
-              x2="63.0096"
-              y2="48.0096"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint5_linear_6894_874"
-              x1="15.6431"
-              y1="23.1538"
-              x2="81.3504"
-              y2="87.7277"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F5F8FB" />
-              <stop
-                offset="1"
-                stop-color="white"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint6_linear_6894_874"
-              x1="15.2928"
-              y1="99.4417"
-              x2="77.1583"
-              y2="99.3534"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint7_linear_6894_874"
-              x1="23.3548"
-              y1="34.2434"
-              x2="69.4911"
-              y2="33.347"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint8_linear_6894_874"
-              x1="23.3548"
-              y1="44.2434"
-              x2="69.4911"
-              y2="43.347"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint9_linear_6894_874"
-              x1="23.444"
-              y1="54.2434"
-              x2="47.0096"
-              y2="54.0096"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#CBD5E1" />
-              <stop
-                offset="1"
-                stop-color="#EAEEF2"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint10_linear_6894_874"
-              x1="50"
-              y1="0"
-              x2="50"
-              y2="100"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop
-                offset="0.53"
-                stop-color="white"
-                stop-opacity="0"
-              />
-              <stop
-                offset="0.84"
-                stop-color="white"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint11_linear_6894_874"
-              x1="92.5"
-              y1="2.82422"
-              x2="92.5"
-              y2="25.7654"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#B4D5FF" />
-              <stop
-                offset="1"
-                stop-color="#2B88FD"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint12_linear_6894_874"
-              x1="92.5"
-              y1="2.82422"
-              x2="92.5"
-              y2="25.7654"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#B4D5FF" />
-              <stop
-                offset="1"
-                stop-color="#2B88FD"
-              />
-            </linearGradient>
-            <linearGradient
-              id="paint13_linear_6894_874"
-              x1="92.5"
-              y1="2.82422"
-              x2="92.5"
-              y2="25.7654"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#B4D5FF" />
-              <stop
-                offset="1"
-                stop-color="#2B88FD"
-              />
-            </linearGradient>
-          </defs>
-        </svg>
-        <section class="flex flex-col mt-2 max-md:max-w-full">
-          <h1
-            class="justify-center self-center text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full"
-          >
-            {{ subscriptionModalStore.modal_title }}
-          </h1>
-          <p class="mt-4 text-base leading-6 text-slate-500 max-md:max-w-full">
-            {{ subscriptionModalStore.modal_description }}
-          </p>
-        </section>
-      </main>
-      <div class="mt-8 mb-4 flex items-center justify-center">
-        <MonthlyYearlySelector
-          v-model="isYearly"
-        />
-      </div>
-      <section class="flex flex-col w-full max-w-[800px] max-md:max-w-full">
-        <div class="bg-white max-md:max-w-full">
-          <div class="flex gap-2 max-md:flex-col max-md:gap-0">
-            <article
-              v-if="!isSubscribed"
-              class="flex flex-col w-6/12 max-md:ml-0 max-md:w-full m-auto"
-            >
-              <div class="flex flex-col grow justify-between p-6 w-full bg-blue-50 rounded-2xl max-md:px-5 max-md:mt-2">
-                <div class="flex flex-col">
-                  <div class="flex gap-2 py-px">
-                    <h2 class="my-auto text-lg font-medium tracking-tighter leading-5 text-slate-900">
-                      Pro
-                    </h2>
-                    <span
-                      v-if="isYearly"
-                      class="justify-center px-2 py-1 text-xs font-semibold tracking-wide text-center text-emerald-600 uppercase bg-emerald-50 rounded-md"
-                    >
-                      Save 20%
-                    </span>
-                  </div>
-                  <div class="flex flex-col justify-end mt-4 leading-[100%]">
-                    <p class="text-2xl font-semibold tracking-tight text-slate-900">
-                      <template v-if="isYearly">
-                        $16
-                      </template>
-                      <template v-else>
-                        $19
-                      </template>
-                    </p>
-                    <p class="text-xs text-slate-500">
-                      per month, billed
-                      <template v-if="isYearly">
-                        yearly
-                      </template>
-                      <template v-else>
-                        monthly
-                      </template>
-                    </p>
-                  </div>
-                  <p class="mt-4 text-sm leading-5 text-slate-500">
-                    For companies and more customization on their forms.
-                  </p>
-                </div>
-                <v-button
-                  v-if="!user?.is_subscribed"
-                  v-track.upgrade_modal_start_trial="{plan: 'default', period: isYearly?'yearly':'monthly'}"
-                  class="relative border border-white border-opacity-20 h-10 inline-flex px-4 items-center rounded-lg text-sm font-semibold w-full justify-center mt-4"
-                  @click.prevent="onSelectPlan('default')"
-                >
-                  Start 3-day trial
-                </v-button>
-                <v-button
-                  v-else
-                  :loading="billingLoading"
-                  class="relative border border-white border-opacity-20 h-10 inline-flex px-4 items-center rounded-lg text-sm font-semibold w-full justify-center mt-4"
-                  target="_blank"
-                  @click="openBillingDashboard"
-                >
-                  Manage Plan
-                </v-button>
-              </div>
-            </article>
-          </div>
-        </div>
-      </section>
-      <section class="flex flex-col self-stretch mt-12 max-md:mt-10 max-md:max-w-full">
-        <div class="justify-center max-md:pr-5 max-md:max-w-full">
-          <div class="flex gap-5 max-md:flex-col max-md:gap-0">
-            <article class="flex flex-col w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="mdi:star-outline"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">Remove OpnForm branding.</strong>
-                  <span class="text-slate-500"> Remove our watermark, create forms that match your brand.</span>
-                </p>
-              </div>
-            </article>
-            <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="ion:brush-outline"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">Full form customization.</strong>
-                  <span class="text-slate-500"> Customize the colors, themes, images etc of your forms. Inject custom CSS and JS code.</span>
-                </p>
-              </div>
-            </article>
-            <article class="flex flex-col  w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="icons8:upload-2"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">Larger File uploads.</strong>
-                  <span class="text-slate-500"> Larger files upload in your forms (up to 50 mb). This allows you to collect bigger attachments.</span>
-                </p>
-              </div>
-            </article>
-          </div>
-        </div>
-        <div class="justify-center mt-12 max-md:pr-5 max-md:mt-10 max-md:max-w-full">
-          <div class="flex gap-5 max-md:flex-col max-md:gap-0">
-            <article class="flex flex-col w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="heroicons:bell"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">Access to all integrations.</strong>
-                  <span class="text-slate-500"> Setup email, Slack, Discord notifications or GSheet, Zapier or webhooks integrations.</span>
-                </p>
-              </div>
-            </article>
-            <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="heroicons:globe-alt"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">1 custom domain.</strong>
-                  <span class="text-slate-500"> Host your form on your own domain for a professional look and improved branding.</span>
-                </p>
-              </div>
-            </article>
-            <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
-              <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
-                <Icon
-                  name="mdi:pencil-outline"
-                  class="w-5 h-5 text-nt-blue"
-                />
-                <p class="mt-2">
-                  <strong class="font-semibold text-slate-800">Editable submissions.</strong>
-                  <span class="text-slate-500"> Form respondents can go back and edit their form submissions, allowing for updates and corrections.</span>
-                </p>
-              </div>
-            </article>
-          </div>
-        </div>
-      </section>
-      <footer
-        class="justify-center py-1.5 mt-12 text-base font-medium leading-6 text-center text-blue-500 max-md:mt-10"
+    <div class="overflow-hidden">
+      <SlidingTransition
+        direction="horizontal"
+        :step="currentStep"
       >
-        <NuxtLink
-          :to="{ name: 'pricing' }"
-          target="_blank"
-          class="focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          And much more. See full plans comparison
-          <Icon
-            class="h-6 w-5"
-            name="heroicons:arrow-small-right"
-          />
-        </NuxtLink>
-      </footer>
-    </div>
-    <section
-      v-else-if="currentStep === 2"
-      class="flex flex-col items-center px-6 pb-4 bg-white rounded-2xl w-full"
-    >
-      <div class="flex gap-2 max-md:flex-wrap">
-        <div class="flex justify-center items-center p-2 rounded-[1000px]">
-          <Icon
-            name="heroicons:chevron-left-16-solid"
-            class="h-6 w-6 cursor-pointer"
-            @click.prevent="currentStep=1"
-          />
-        </div>
-        <h1 class="flex-1 my-auto text-xl font-bold leading-8 text-center text-slate-800 max-md:max-w-full">
-          Confirm
-          <template v-if="isSubscribed">
-            Upgrade
-          </template>
-          <template v-else>
-            Subscription
-          </template>
-        </h1>
-      </div>
-      <div class="flex-grow w-full max-w-sm">
         <div
-          v-if="!isSubscribed"
-          class="bg-blue-50 rounded-md p-4 border border-blue-200 flex flex-col my-4 gap-1"
+          :key="currentStep"
+          class="w-full"
         >
-          <div class="flex w-full">
-            <p class="text-blue-500 capitalize font-medium flex-grow">
-              OpnForm - {{ currentPlan == 'default' ? 'Pro' : 'Team' }} plan
-            </p>
-            <UBadge
-              :color="isYearly?'green':'amber'"
-              variant="subtle"
-            >
-              {{ !isYearly ? 'No Discount' : 'Discount Applied' }}
-            </UBadge>
-          </div>
-
-          <p class="text-sm leading-5 text-slate-500">
-            <span
-              v-if="isYearly"
-              class="font-medium line-through mr-2"
-              v-text="'$19'"
-            />
-            <span
-              class="font-medium"
-              :class="{'text-green-700':isYearly}"
-              v-text="isYearly ? '$16' : '$19'"
-            />
-            <span
-              class="text-xs"
-              :class="{'text-green-700':isYearly}"
-            >
-              per month, billed
-              <template v-if="isYearly">
-                yearly
-              </template>
-              <template v-else>
-                monthly
-              </template>
-            </span>
-          </p>
-          <div v-if="shouldShowUpsell">
-            <v-form size="sm">
-              <toggle-switch-input
+          <div
+            v-if="currentStep === 1"
+            key="step1"
+            class="flex flex-col items-center px-4 pb-20 rounded-2xl relative"
+          >
+            <main class="flex flex-col mt-4 max-w-full text-center w-[591px] max-md:mt-10">
+              <img
+                src="/img/subscription-modal-icon.svg"
+                alt="Subscription Icon"
+                class="self-center max-w-full aspect-[0.98] w-[107px]"
+              >
+              <section class="flex flex-col mt-2 max-md:max-w-full">
+                <h1 class="text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full">
+                  {{ subscriptionModalStore.modal_title }}
+                </h1>
+                <p class="mt-4 text-base leading-6 text-slate-500 max-md:max-w-full">
+                  {{ subscriptionModalStore.modal_description }}
+                </p>
+              </section>
+            </main>
+            <div class="mt-8 mb-4 flex items-center justify-center">
+              <MonthlyYearlySelector
                 v-model="isYearly"
-                label="20% off with the yearly plan"
-                size="sm"
-                wrapper-class="mb-0"
               />
-            </v-form>
+            </div>
+            <section class="flex flex-col w-full max-w-[800px] max-md:max-w-full">
+              <div class="bg-white max-md:max-w-full">
+                <div class="flex gap-2 max-md:flex-col max-md:gap-0">
+                  <article
+                    v-if="!isSubscribed"
+                    class="flex flex-col w-6/12 max-md:ml-0 max-md:w-full m-auto"
+                  >
+                    <div class="flex flex-col grow justify-between p-6 w-full bg-blue-50 rounded-2xl max-md:px-5 max-md:mt-2">
+                      <div class="flex flex-col items-center">
+                        <div class="flex gap-2 py-px">
+                          <h2 class="my-auto text-xl font-semibold tracking-tighter leading-5 text-slate-900">
+                            Pro
+                          </h2>
+                          <span
+                            v-if="isYearly"
+                            class="justify-center px-2 py-1 text-xs font-semibold tracking-wide text-center text-emerald-600 uppercase bg-emerald-50 rounded-md"
+                          >
+                            Save 20%
+                          </span>
+                        </div>
+                        <div class="flex flex-col justify-end mt-4 leading-[100%]">
+                          <p class="text-2xl font-semibold tracking-tight text-slate-900 text-center">
+                            <template v-if="isYearly">
+                              $16
+                            </template>
+                            <template v-else>
+                              $19
+                            </template>
+                          </p>
+                          <p class="text-xs text-slate-500">
+                            per month, billed
+                            <template v-if="isYearly">
+                              yearly
+                            </template>
+                            <template v-else>
+                              monthly
+                            </template>
+                          </p>
+                        </div>
+                      </div>
+                      <v-button
+                        v-if="!user?.is_subscribed"
+                        v-track.upgrade_modal_start_trial="{plan: 'default', period: isYearly?'yearly':'monthly'}"
+                        class="relative border border-white border-opacity-20 h-10 inline-flex px-4 items-center rounded-lg text-sm font-semibold w-full justify-center mt-4"
+                        @click.prevent="onSelectPlan('default')"
+                      >
+                        Start 3-day trial
+                      </v-button>
+                      <v-button
+                        v-else
+                        :loading="billingLoading"
+                        class="relative border border-white border-opacity-20 h-10 inline-flex px-4 items-center rounded-lg text-sm font-semibold w-full justify-center mt-4"
+                        target="_blank"
+                        @click="openBillingDashboard"
+                      >
+                        Manage Plan
+                      </v-button>
+                    </div>
+                  </article>
+                </div>
+              </div>
+            </section>
+            <section class="flex flex-col self-stretch mt-12 max-md:mt-10 max-md:max-w-full">
+              <div class="justify-center max-md:pr-5 max-md:max-w-full">
+                <div class="flex gap-5 max-md:flex-col max-md:gap-0">
+                  <article class="flex flex-col w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="mdi:star-outline"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">Remove OpnForm branding.</strong>
+                        <span class="text-slate-500"> Remove our watermark, create forms that match your brand.</span>
+                      </p>
+                    </div>
+                  </article>
+                  <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="ion:brush-outline"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">Full form customization.</strong>
+                        <span class="text-slate-500"> Customize the colors, themes, images etc of your forms. Inject custom CSS and JS code.</span>
+                      </p>
+                    </div>
+                  </article>
+                  <article class="flex flex-col  w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="icons8:upload-2"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">Larger File uploads.</strong>
+                        <span class="text-slate-500"> Larger files upload in your forms (up to 50 mb). This allows you to collect bigger attachments.</span>
+                      </p>
+                    </div>
+                  </article>
+                </div>
+              </div>
+              <div class="justify-center mt-12 max-md:pr-5 max-md:mt-10 max-md:max-w-full">
+                <div class="flex gap-5 max-md:flex-col max-md:gap-0">
+                  <article class="flex flex-col w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="heroicons:bell"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">Access to all integrations.</strong>
+                        <span class="text-slate-500"> Setup email, Slack, Discord notifications or GSheet, Zapier or webhooks integrations.</span>
+                      </p>
+                    </div>
+                  </article>
+                  <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="heroicons:globe-alt"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">1 custom domain.</strong>
+                        <span class="text-slate-500"> Host your form on your own domain for a professional look and improved branding.</span>
+                      </p>
+                    </div>
+                  </article>
+                  <article class="flex flex-col ml-5 w-[33%] max-md:ml-0 max-md:w-full">
+                    <div class="flex flex-col grow text-base leading-6 text-slate-500 max-md:mt-10">
+                      <Icon
+                        name="mdi:pencil-outline"
+                        class="w-5 h-5 text-nt-blue"
+                      />
+                      <p class="mt-2">
+                        <strong class="font-semibold text-slate-800">Editable submissions.</strong>
+                        <span class="text-slate-500"> Form respondents can go back and edit their form submissions, allowing for updates and corrections.</span>
+                      </p>
+                    </div>
+                  </article>
+                </div>
+              </div>
+            </section>
+            <footer
+              class="justify-center py-1.5 mt-12 text-base font-medium leading-6 text-center text-blue-500 max-md:mt-10"
+            >
+              <NuxtLink
+                :to="{ name: 'pricing' }"
+                target="_blank"
+                class="focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                And much more. See full plans comparison
+                <Icon
+                  class="h-6 w-5"
+                  name="heroicons:arrow-small-right"
+                />
+              </NuxtLink>
+            </footer>
           </div>
-        </div>
-        <text-input
-          ref="companyName"
-          label="Company Name"
-          name="name"
-          :required="true"
-          :form="form"
-          help="Name that will appear on invoices"
-        />
-        <text-input
-          label="Invoicing Email"
-          name="email"
-          native-type="email"
-          :required="true"
-          :form="form"
-          help="Where invoices will be sent"
-        />
-        <div
-          class="flex gap-2 mt-6 w-full"
-        >
-          <UButton
-            v-track.upgrade_modal_confirm_submit="{plan: currentPlan.value, period: isYearly?'yearly':'monthly'}"
-            block
-            size="md"
-            class="w-auto flex-grow"
-            :loading="form.busy || loading"
-            @click="saveDetails"
+          <section
+            v-else-if="currentStep === 2"
+            key="step2"
+            class="flex flex-col items-center px-6 pb-4 bg-white rounded-2xl w-full"
           >
-            <template v-if="isSubscribed">
-              Upgrade
-            </template>
-            <template v-else>
-              Subscribe
-            </template>
-          </UButton>
-          <UButton
-            size="md"
-            color="white"
-            @click="currentStep=1"
-          >
-            Back
-          </UButton>
+            <div class="flex gap-2 max-md:flex-wrap">
+              <div class="flex justify-center items-center p-2 rounded-[1000px]">
+                <Icon
+                  name="heroicons:chevron-left-16-solid"
+                  class="h-6 w-6 cursor-pointer"
+                  @click.prevent="goBackToStep1"
+                />
+              </div>
+              <h1 class="flex-1 my-auto text-xl font-bold leading-8 text-center text-slate-800 max-md:max-w-full">
+                Confirm
+                <template v-if="isSubscribed">
+                  Upgrade
+                </template>
+                <template v-else>
+                  Subscription
+                </template>
+              </h1>
+            </div>
+            <div class="flex-grow w-full max-w-sm">
+              <div
+                v-if="!isSubscribed"
+                class="bg-blue-50 rounded-md p-4 border border-blue-200 flex flex-col my-4 gap-1"
+              >
+                <div class="flex w-full">
+                  <p class="text-blue-500 capitalize font-medium flex-grow">
+                    OpnForm - {{ currentPlan == 'default' ? 'Pro' : 'Team' }} plan
+                  </p>
+                  <UBadge
+                    :color="isYearly?'green':'amber'"
+                    variant="subtle"
+                  >
+                    {{ !isYearly ? 'No Discount' : 'Discount Applied' }}
+                  </UBadge>
+                </div>
+
+                <p class="text-sm leading-5 text-slate-500">
+                  <span
+                    v-if="isYearly"
+                    class="font-medium line-through mr-2"
+                    v-text="'$19'"
+                  />
+                  <span
+                    class="font-medium"
+                    :class="{'text-green-700':isYearly}"
+                    v-text="isYearly ? '$16' : '$19'"
+                  />
+                  <span
+                    class="text-xs"
+                    :class="{'text-green-700':isYearly}"
+                  >
+                    per month, billed
+                    <template v-if="isYearly">
+                      yearly
+                    </template>
+                    <template v-else>
+                      monthly
+                    </template>
+                  </span>
+                </p>
+                <div v-if="shouldShowUpsell">
+                  <v-form size="sm">
+                    <toggle-switch-input
+                      v-model="isYearly"
+                      label="20% off with the yearly plan"
+                      size="sm"
+                      wrapper-class="mb-0"
+                    />
+                  </v-form>
+                </div>
+              </div>
+              <text-input
+                ref="companyName"
+                label="Company Name"
+                name="name"
+                :required="true"
+                :form="form"
+                help="Name that will appear on invoices"
+              />
+              <text-input
+                label="Invoicing Email"
+                name="email"
+                native-type="email"
+                :required="true"
+                :form="form"
+                help="Where invoices will be sent"
+              />
+              <div
+                class="flex gap-2 mt-6 w-full"
+              >
+                <UButton
+                  v-track.upgrade_modal_confirm_submit="{plan: currentPlan.value, period: isYearly?'yearly':'monthly'}"
+                  block
+                  size="md"
+                  class="w-auto flex-grow"
+                  :loading="form.busy || loading"
+                  @click="saveDetails"
+                >
+                  <template v-if="isSubscribed">
+                    Upgrade
+                  </template>
+                  <template v-else>
+                    Subscribe
+                  </template>
+                </UButton>
+                <UButton
+                  size="md"
+                  color="white"
+                  @click="goBackToStep1"
+                >
+                  Back
+                </UButton>
+              </div>
+            </div>
+          </section>
         </div>
-      </div>
-    </section>
+      </SlidingTransition>
+    </div>
   </modal>
 </template>
 
 <script setup>
+import SlidingTransition from '~/components/global/transitions/SlidingTransition.vue'
 import { fetchAllWorkspaces } from '~/stores/workspaces.js'
 
 const router = useRouter()
@@ -715,7 +426,6 @@ onMounted(() => {
   }
 })
 
-
 const onSelectPlan = (planName) => {
   if (!authenticated.value) {
     subscriptionModalStore.closeModal()
@@ -729,6 +439,10 @@ const onSelectPlan = (planName) => {
   currentStep.value = 2
 }
 
+const goBackToStep1 = () => {
+  currentStep.value = 1
+}
+
 const saveDetails = () => {
   if (form.busy)
     return
diff --git a/client/public/img/subscription-modal-icon.svg b/client/public/img/subscription-modal-icon.svg
new file mode 100644
index 00000000..a7240337
--- /dev/null
+++ b/client/public/img/subscription-modal-icon.svg
@@ -0,0 +1,304 @@
+<svg
+          class="self-center max-w-full aspect-[0.98] w-[107px]"
+          viewBox="0 0 108 109"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g opacity="0.5">
+            <path
+              d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
+              fill="url(#paint0_linear_6894_874)"
+            />
+            <path
+              d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
+              stroke="url(#paint1_linear_6894_874)"
+              stroke-width="2"
+            />
+            <rect
+              x="39.5371"
+              y="24"
+              width="47"
+              height="4"
+              rx="2"
+              fill="url(#paint2_linear_6894_874)"
+            />
+            <rect
+              x="39.5371"
+              y="34"
+              width="47"
+              height="4"
+              rx="2"
+              fill="url(#paint3_linear_6894_874)"
+            />
+            <rect
+              x="39.5371"
+              y="44"
+              width="24"
+              height="4"
+              rx="2"
+              fill="url(#paint4_linear_6894_874)"
+            />
+          </g>
+          <path
+            d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
+            fill="url(#paint5_linear_6894_874)"
+          />
+          <path
+            d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
+            stroke="url(#paint6_linear_6894_874)"
+            stroke-width="2"
+          />
+          <rect
+            x="23.5371"
+            y="30"
+            width="47"
+            height="4"
+            rx="2"
+            fill="url(#paint7_linear_6894_874)"
+          />
+          <rect
+            x="23.5371"
+            y="40"
+            width="47"
+            height="4"
+            rx="2"
+            fill="url(#paint8_linear_6894_874)"
+          />
+          <rect
+            x="23.5371"
+            y="50"
+            width="24"
+            height="4"
+            rx="2"
+            fill="url(#paint9_linear_6894_874)"
+          />
+          <rect
+            width="100"
+            height="100"
+            transform="translate(0.5 9)"
+            fill="url(#paint10_linear_6894_874)"
+          />
+          <path
+            d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
+            stroke="url(#paint11_linear_6894_874)"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
+            stroke="url(#paint12_linear_6894_874)"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
+            stroke="url(#paint13_linear_6894_874)"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_6894_874"
+              x1="31.6431"
+              y1="17.1538"
+              x2="97.3504"
+              y2="81.7277"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#F5F8FB" />
+              <stop
+                offset="1"
+                stop-color="white"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_6894_874"
+              x1="31.2928"
+              y1="93.4417"
+              x2="93.1583"
+              y2="93.3534"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint2_linear_6894_874"
+              x1="39.3548"
+              y1="28.2434"
+              x2="85.4911"
+              y2="27.347"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint3_linear_6894_874"
+              x1="39.3548"
+              y1="38.2434"
+              x2="85.4911"
+              y2="37.347"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint4_linear_6894_874"
+              x1="39.444"
+              y1="48.2434"
+              x2="63.0096"
+              y2="48.0096"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint5_linear_6894_874"
+              x1="15.6431"
+              y1="23.1538"
+              x2="81.3504"
+              y2="87.7277"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#F5F8FB" />
+              <stop
+                offset="1"
+                stop-color="white"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint6_linear_6894_874"
+              x1="15.2928"
+              y1="99.4417"
+              x2="77.1583"
+              y2="99.3534"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint7_linear_6894_874"
+              x1="23.3548"
+              y1="34.2434"
+              x2="69.4911"
+              y2="33.347"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint8_linear_6894_874"
+              x1="23.3548"
+              y1="44.2434"
+              x2="69.4911"
+              y2="43.347"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint9_linear_6894_874"
+              x1="23.444"
+              y1="54.2434"
+              x2="47.0096"
+              y2="54.0096"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#CBD5E1" />
+              <stop
+                offset="1"
+                stop-color="#EAEEF2"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint10_linear_6894_874"
+              x1="50"
+              y1="0"
+              x2="50"
+              y2="100"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop
+                offset="0.53"
+                stop-color="white"
+                stop-opacity="0"
+              />
+              <stop
+                offset="0.84"
+                stop-color="white"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint11_linear_6894_874"
+              x1="92.5"
+              y1="2.82422"
+              x2="92.5"
+              y2="25.7654"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#B4D5FF" />
+              <stop
+                offset="1"
+                stop-color="#2B88FD"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint12_linear_6894_874"
+              x1="92.5"
+              y1="2.82422"
+              x2="92.5"
+              y2="25.7654"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#B4D5FF" />
+              <stop
+                offset="1"
+                stop-color="#2B88FD"
+              />
+            </linearGradient>
+            <linearGradient
+              id="paint13_linear_6894_874"
+              x1="92.5"
+              y1="2.82422"
+              x2="92.5"
+              y2="25.7654"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#B4D5FF" />
+              <stop
+                offset="1"
+                stop-color="#2B88FD"
+              />
+            </linearGradient>
+          </defs>
+        </svg>
\ No newline at end of file