diff --git a/apps/portal/auto-imports.d.ts b/apps/portal/auto-imports.d.ts
index 72bfd79a..cf763eef 100644
--- a/apps/portal/auto-imports.d.ts
+++ b/apps/portal/auto-imports.d.ts
@@ -375,7 +375,6 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
-    readonly COOKIE_MAX_AGE_1_YEAR: UnwrapRef<typeof import('./src/utils/constants')['COOKIE_MAX_AGE_1_YEAR']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly alphaDashValidator: UnwrapRef<typeof import('./src/@core/utils/validators')['alphaDashValidator']>
diff --git a/apps/portal/env.d.ts b/apps/portal/env.d.ts
index 5bf2874e..4bd4b4cf 100644
--- a/apps/portal/env.d.ts
+++ b/apps/portal/env.d.ts
@@ -1,12 +1,11 @@
 import 'vue-router'
 declare module 'vue-router' {
   interface RouteMeta {
-    action?: string
-    subject?: string
     layoutWrapperClasses?: string
     navActiveLink?: RouteLocationRaw
-    layout?: 'blank' | 'default'
-    unauthenticatedOnly?: boolean
+    layout?: 'blank' | 'default' | 'portal'
+    requiresAuth?: boolean
+    requiresToken?: boolean
     public?: boolean
   }
 }
diff --git a/apps/portal/src/App.vue b/apps/portal/src/App.vue
index e6d6d1f3..a944605d 100644
--- a/apps/portal/src/App.vue
+++ b/apps/portal/src/App.vue
@@ -2,25 +2,18 @@
 import { useTheme } from 'vuetify'
 import ScrollToTop from '@core/components/ScrollToTop.vue'
 import initCore from '@core/initCore'
-import { initConfigStore, useConfigStore } from '@core/stores/config'
+import { initConfigStore } from '@core/stores/config'
 import { hexToRgb } from '@core/utils/colorConverter'
 
 const { global } = useTheme()
 
-// ℹ️ Sync current theme with initial loader theme
 initCore()
 initConfigStore()
-
-const configStore = useConfigStore()
 </script>
 
 <template>
-  <VLocaleProvider :rtl="configStore.isAppRTL">
-    <!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
-    <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
-      <RouterView />
-
-      <ScrollToTop />
-    </VApp>
-  </VLocaleProvider>
+  <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
+    <RouterView />
+    <ScrollToTop />
+  </VApp>
 </template>
diff --git a/apps/portal/src/components/AppPricing.vue b/apps/portal/src/components/AppPricing.vue
deleted file mode 100644
index f8b51ae5..00000000
--- a/apps/portal/src/components/AppPricing.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<script setup lang="ts">
-import safeBoxWithGoldenCoin from '@images/misc/3d-safe-box-with-golden-dollar-coins.png'
-import spaceRocket from '@images/misc/3d-space-rocket-with-smoke.png'
-import dollarCoinPiggyBank from '@images/misc/dollar-coins-flying-pink-piggy-bank.png'
-
-interface Pricing {
-  title?: string
-  xs?: number | string
-  sm?: number | string
-  md?: string | number
-  lg?: string | number
-  xl?: string | number
-}
-
-const props = defineProps<Pricing>()
-
-const annualMonthlyPlanPriceToggler = ref(true)
-
-const pricingPlans = [
-  {
-    name: 'Basic',
-    tagLine: 'A simple start for everyone',
-    logo: dollarCoinPiggyBank,
-    monthlyPrice: 0,
-    yearlyPrice: 0,
-    isPopular: false,
-    current: true,
-    features: [
-      '100 responses a month',
-      'Unlimited forms and surveys',
-      'Unlimited fields',
-      'Basic form creation tools',
-      'Up to 2 subdomains',
-    ],
-  },
-  {
-    name: 'Standard',
-    tagLine: 'For small to medium businesses',
-    logo: safeBoxWithGoldenCoin,
-    monthlyPrice: 49,
-    yearlyPrice: 499,
-    isPopular: true,
-    current: false,
-    features: [
-      'Unlimited responses',
-      'Unlimited forms and surveys',
-      'Instagram profile page',
-      'Google Docs integration',
-      'Custom “Thank you” page',
-    ],
-  },
-  {
-    name: 'Enterprise',
-    tagLine: 'Solution for big organizations',
-    logo: spaceRocket,
-    monthlyPrice: 99,
-    yearlyPrice: 999,
-    isPopular: false,
-    current: false,
-    features: [
-      'PayPal payments',
-      'Logic Jumps',
-      'File upload with 5GB storage',
-      'Custom domain support',
-      'Stripe integration',
-    ],
-  },
-]
-</script>
-
-<template>
-  <!-- 👉 Title and subtitle -->
-  <div class="text-center">
-    <h3 class="text-h3 pricing-title mb-2">
-      {{ props.title ? props.title : 'Pricing Plans' }}
-    </h3>
-    <p class="mb-0">
-      All plans include 40+ advanced tools and features to boost your product.
-    </p>
-    <p class="mb-2">
-      Choose the best plan to fit your needs.
-    </p>
-  </div>
-
-  <!-- 👉 Annual and monthly price toggler -->
-
-  <div class="d-flex font-weight-medium text-body-1 align-center justify-center mx-auto mt-12 mb-6">
-    <VLabel
-      for="pricing-plan-toggle"
-      class="me-3"
-    >
-      Monthly
-    </VLabel>
-
-    <div class="position-relative">
-      <VSwitch
-        id="pricing-plan-toggle"
-        v-model="annualMonthlyPlanPriceToggler"
-      >
-        <template #label>
-          <div class="text-body-1 font-weight-medium">
-            Annually
-          </div>
-        </template>
-      </VSwitch>
-
-      <div class="save-upto-chip position-absolute align-center d-none d-md-flex gap-1">
-        <VIcon
-          icon="tabler-corner-left-down"
-          size="24"
-          class="flip-in-rtl mt-2 text-disabled"
-        />
-        <VChip
-          label
-          color="primary"
-          size="small"
-        >
-          Save up to 10%
-        </VChip>
-      </div>
-    </div>
-  </div>
-
-  <!-- SECTION pricing plans -->
-  <VRow>
-    <VCol
-      v-for="plan in pricingPlans"
-      :key="plan.logo"
-      v-bind="props"
-      cols="12"
-    >
-      <!-- 👉  Card -->
-      <VCard
-        flat
-        border
-        :class="plan.isPopular ? 'border-primary border-opacity-100' : ''"
-      >
-        <VCardText
-          style="block-size: 3.75rem;"
-          class="text-end"
-        >
-          <!-- 👉 Popular -->
-          <VChip
-            v-show="plan.isPopular"
-            label
-            color="primary"
-            size="small"
-          >
-            Popular
-          </VChip>
-        </VCardText>
-
-        <!-- 👉 Plan logo -->
-        <VCardText>
-          <VImg
-            :height="120"
-            :width="120"
-            :src="plan.logo"
-            class="mx-auto mb-5"
-          />
-
-          <!-- 👉 Plan name -->
-          <h4 class="text-h4 mb-1 text-center">
-            {{ plan.name }}
-          </h4>
-          <p class="mb-0 text-body-1 text-center">
-            {{ plan.tagLine }}
-          </p>
-
-          <!-- 👉 Plan price  -->
-
-          <div class="position-relative">
-            <div class="d-flex justify-center pt-5 pb-10">
-              <div class="text-body-1 align-self-start font-weight-medium">
-                $
-              </div>
-              <h1 class="text-h1 font-weight-medium text-primary">
-                {{ annualMonthlyPlanPriceToggler ? Math.floor(Number(plan.yearlyPrice) / 12) : plan.monthlyPrice }}
-              </h1>
-              <div class="text-body-1 font-weight-medium align-self-end">
-                /month
-              </div>
-            </div>
-
-            <!-- 👉 Annual Price -->
-            <span
-              v-show="annualMonthlyPlanPriceToggler"
-              class="annual-price-text position-absolute text-caption text-disabled pb-4"
-            >
-              {{ plan.yearlyPrice === 0 ? 'free' : `USD ${plan.yearlyPrice}/Year` }}
-            </span>
-          </div>
-
-          <!-- 👉 Plan features -->
-
-          <VList class="card-list mb-4">
-            <VListItem
-              v-for="feature in plan.features"
-              :key="feature"
-            >
-              <template #prepend>
-                <VIcon
-                  size="8"
-                  icon="tabler-circle-filled"
-                  color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))"
-                />
-              </template>
-
-              <VListItemTitle class="text-body-1">
-                {{ feature }}
-              </VListItemTitle>
-            </VListItem>
-          </VList>
-
-          <!-- 👉 Plan actions -->
-          <VBtn
-            block
-            :color="plan.current ? 'success' : 'primary'"
-            :variant="plan.isPopular ? 'elevated' : 'tonal'"
-            :to="{ name: 'front-pages-payment' }"
-            :active="false"
-          >
-            {{ plan.yearlyPrice === 0 ? 'Your Current Plan' : 'Upgrade' }}
-          </VBtn>
-        </VCardText>
-      </VCard>
-    </VCol>
-  </VRow>
-  <!-- !SECTION  -->
-</template>
-
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 1rem;
-}
-
-.save-upto-chip {
-  inset-block-start: -2.4rem;
-  inset-inline-end: -6rem;
-}
-
-.annual-price-text {
-  inset-block-end: 3%;
-  inset-inline-start: 50%;
-  transform: translateX(-50%);
-}
-</style>
diff --git a/apps/portal/src/components/AppSearchHeader.vue b/apps/portal/src/components/AppSearchHeader.vue
deleted file mode 100644
index 9c8a5bd2..00000000
--- a/apps/portal/src/components/AppSearchHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import AppSearchHeaderBg from '@images/pages/app-search-header-bg.png'
-
-interface Props {
-  title?: string
-  subtitle?: string
-  customClass?: string
-  placeholder?: string
-  density?: 'comfortable' | 'compact' | 'default'
-  isReverse?: boolean
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<Props>(), {
-  density: 'comfortable',
-  isReverse: false,
-})
-</script>
-
-<template>
-  <!-- 👉 Search Banner  -->
-  <VCard
-    flat
-    class="text-center search-header"
-    :class="props.customClass"
-    :style="`background: url(${AppSearchHeaderBg});`"
-  >
-    <VCardText>
-      <slot name="title">
-        <h4 class="text-h4 mb-2 font-weight-medium">
-          {{ props.title }}
-        </h4>
-      </slot>
-      <div
-        class="d-flex"
-        :class="isReverse ? 'flex-column' : 'flex-column-reverse' "
-      >
-        <p class="mb-0">
-          {{ props.subtitle }}
-        </p>
-        <!-- 👉 Search Input -->
-        <div>
-          <AppTextField
-            v-bind="$attrs"
-            class="search-header-input mx-auto my-4"
-            :placeholder="props.placeholder"
-            :density="props.density"
-            prepend-inner-icon="tabler-search"
-          />
-        </div>
-      </div>
-    </VCardText>
-  </VCard>
-</template>
-
-<style lang="scss">
-.search-header {
-  padding: 4rem !important;
-  background-size: cover !important;
-}
-
-// search input
-.search-header-input {
-  border-radius: 0.375rem !important;
-  background-color: rgb(var(--v-theme-surface));
-  max-inline-size: 28.125rem !important;
-}
-
-@media (max-width: 37.5rem) {
-  .search-header {
-    padding: 1.5rem !important;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/ErrorHeader.vue b/apps/portal/src/components/ErrorHeader.vue
deleted file mode 100644
index e4d99ed6..00000000
--- a/apps/portal/src/components/ErrorHeader.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  statusCode?: string | number
-  title?: string
-  description?: string
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div class="text-center">
-    <!-- 👉 Title and subtitle -->
-    <h1
-      v-if="props.statusCode"
-      class="header-title font-weight-medium mb-2"
-    >
-      {{ props.statusCode }}
-    </h1>
-    <h4
-      v-if="props.title"
-      class="text-h4 font-weight-medium mb-2"
-    >
-      {{ props.title }}
-    </h4>
-    <p
-      v-if="props.description"
-      class="text-body-1 mb-6"
-    >
-      {{ props.description }}
-    </p>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header-title {
-  font-size: clamp(3rem, 5vw, 6rem);
-  line-height: clamp(3rem, 5vw, 6rem);
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/AddAuthenticatorAppDialog.vue b/apps/portal/src/components/dialogs/AddAuthenticatorAppDialog.vue
deleted file mode 100644
index 92dcf603..00000000
--- a/apps/portal/src/components/dialogs/AddAuthenticatorAppDialog.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import themeselectionQr from '@images/pages/themeselection-qr.png'
-
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'submit', value: string): void
-}
-interface Props {
-  authCode?: string
-  isDialogVisible: boolean
-}
-const props = defineProps<Props>()
-const emit = defineEmits<Emit>()
-
-const authCode = ref(structuredClone(toRaw(props.authCode)))
-
-const formSubmit = () => {
-  if (authCode.value) {
-    emit('submit', authCode.value)
-    emit('update:isDialogVisible', false)
-  }
-}
-
-const resetAuthCode = () => {
-  authCode.value = structuredClone(toRaw(props.authCode))
-  emit('update:isDialogVisible', false)
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    :model-value="props.isDialogVisible"
-    @update:model-value="(val) => $emit('update:isDialogVisible', val)"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-6">
-          Add Authenticator App
-        </h4>
-        <h5 class="text-h5 mb-2">
-          Authenticator Apps
-        </h5>
-
-        <p class="text-body-1 mb-6">
-          Using an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password, scan the QR code. It will generate a 6 digit code for you to enter below.
-        </p>
-
-        <div class="mb-6">
-          <VImg
-            width="150"
-            :src="themeselectionQr"
-            class="mx-auto"
-          />
-        </div>
-
-        <VAlert
-          title="ASDLKNASDA9AHS678dGhASD78AB"
-          text="If you are unable to scan the QR code, you can manually enter the secret key below."
-          variant="tonal"
-          color="warning"
-        />
-        <VForm @submit.prevent="() => {}">
-          <AppTextField
-            v-model="authCode"
-            name="auth-code"
-            label="Enter Authentication Code"
-            placeholder="123 456"
-            class="mt-4 mb-6"
-          />
-
-          <div class="d-flex justify-end flex-wrap gap-4">
-            <VBtn
-              color="secondary"
-              variant="tonal"
-              @click="resetAuthCode"
-            >
-              Cancel
-            </VBtn>
-
-            <VBtn
-              type="submit"
-              @click="formSubmit"
-            >
-              Continue
-              <VIcon
-                end
-                icon="tabler-arrow-right"
-                class="flip-in-rtl"
-              />
-            </VBtn>
-          </div>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/AddEditAddressDialog.vue b/apps/portal/src/components/dialogs/AddEditAddressDialog.vue
deleted file mode 100644
index 03b075bb..00000000
--- a/apps/portal/src/components/dialogs/AddEditAddressDialog.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import home from '@images/svg/home.svg'
-import office from '@images/svg/office.svg'
-
-interface BillingAddress {
-  firstName: string | undefined
-  lastName: string | undefined
-  selectedCountry: string | null
-  addressLine1: string
-  addressLine2: string
-  landmark: string
-  contact: string
-  country: string | null
-  city: string
-  state: string
-  zipCode: number | null
-}
-interface Props {
-  billingAddress?: BillingAddress
-  isDialogVisible: boolean
-}
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'submit', value: BillingAddress): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  billingAddress: () => ({
-    firstName: '',
-    lastName: '',
-    selectedCountry: null,
-    addressLine1: '',
-    addressLine2: '',
-    landmark: '',
-    contact: '',
-    country: null,
-    city: '',
-    state: '',
-    zipCode: null,
-  }),
-})
-
-const emit = defineEmits<Emit>()
-
-const billingAddress = ref<BillingAddress>(structuredClone(toRaw(props.billingAddress)))
-
-const resetForm = () => {
-  emit('update:isDialogVisible', false)
-  billingAddress.value = structuredClone(toRaw(props.billingAddress))
-}
-
-const onFormSubmit = () => {
-  emit('update:isDialogVisible', false)
-  emit('submit', billingAddress.value)
-}
-
-const selectedAddress = ref('Home')
-
-const addressTypes = [
-  {
-    icon: { icon: home, size: '28' },
-    title: 'Home',
-    desc: 'Delivery Time (9am - 9pm)',
-    value: 'Home',
-  },
-  {
-    icon: { icon: office, size: '28' },
-    title: 'Office',
-    desc: 'Delivery Time (9am - 5pm)',
-    value: 'Office',
-  },
-]
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 900 "
-    :model-value="props.isDialogVisible"
-    @update:model-value="val => $emit('update:isDialogVisible', val)"
-  >
-    <!-- 👉 Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard
-      v-if="props.billingAddress"
-      class="pa-sm-10 pa-2"
-    >
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          {{ (props.billingAddress.addressLine1 || props.billingAddress.addressLine2) ? 'Edit' : 'Add New' }} Address
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Add new address for express delivery
-        </p>
-
-        <div class="d-flex mb-6">
-          <CustomRadiosWithIcon
-            v-model:selected-radio="selectedAddress"
-            :radio-content="addressTypes"
-            :grid-column="{ sm: '6', cols: '12' }"
-          />
-        </div>
-
-        <!-- 👉 Form -->
-        <VForm @submit.prevent="onFormSubmit">
-          <VRow>
-            <!-- 👉 First Name -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.firstName"
-                label="First Name"
-                placeholder="John"
-              />
-            </VCol>
-
-            <!-- 👉 Last Name -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.lastName"
-                label="Last Name"
-                placeholder="Doe"
-              />
-            </VCol>
-
-            <!-- 👉 Select Country -->
-            <VCol cols="12">
-              <AppSelect
-                v-model="billingAddress.selectedCountry"
-                label="Select Country"
-                placeholder="Select Country"
-                :items="['USA', 'Aus', 'Canada', 'NZ']"
-              />
-            </VCol>
-
-            <!-- 👉 Address Line 1 -->
-            <VCol cols="12">
-              <AppTextField
-                v-model="billingAddress.addressLine1"
-                label="Address Line 1"
-                placeholder="12, Business Park"
-              />
-            </VCol>
-
-            <!-- 👉 Address Line 2 -->
-            <VCol cols="12">
-              <AppTextField
-                v-model="billingAddress.addressLine2"
-                label="Address Line 2"
-                placeholder="Mall Road"
-              />
-            </VCol>
-
-            <!-- 👉 Landmark -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.landmark"
-                label="Landmark"
-                placeholder="Nr. Hard Rock Cafe"
-              />
-            </VCol>
-
-            <!-- 👉 City -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.city"
-                label="City"
-                placeholder="Los Angeles"
-              />
-            </VCol>
-
-            <!-- 👉 State -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.state"
-                label="State"
-                placeholder="California"
-              />
-            </VCol>
-
-            <!-- 👉 Zip Code -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="billingAddress.zipCode"
-                label="Zip Code"
-                placeholder="99950"
-                type="number"
-              />
-            </VCol>
-
-            <VCol cols="12">
-              <VSwitch label="Use as a billing address?" />
-            </VCol>
-
-            <!-- 👉 Submit and Cancel button -->
-            <VCol
-              cols="12"
-              class="text-center"
-            >
-              <VBtn
-                type="submit"
-                class="me-3"
-              >
-                submit
-              </VBtn>
-
-              <VBtn
-                variant="tonal"
-                color="secondary"
-                @click="resetForm"
-              >
-                Cancel
-              </VBtn>
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/AddEditPermissionDialog.vue b/apps/portal/src/components/dialogs/AddEditPermissionDialog.vue
deleted file mode 100644
index 4f888b12..00000000
--- a/apps/portal/src/components/dialogs/AddEditPermissionDialog.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  isDialogVisible: boolean
-  permissionName?: string
-}
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'update:permissionName', value: string): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  permissionName: '',
-})
-
-const emit = defineEmits<Emit>()
-
-const currentPermissionName = ref('')
-
-const onReset = () => {
-  emit('update:isDialogVisible', false)
-  currentPermissionName.value = ''
-}
-
-const onSubmit = () => {
-  emit('update:isDialogVisible', false)
-  emit('update:permissionName', currentPermissionName.value)
-}
-
-watch(() => props, () => {
-  currentPermissionName.value = props.permissionName
-})
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 600"
-    :model-value="props.isDialogVisible"
-    @update:model-value="onReset"
-  >
-    <!-- 👉 dialog close btn -->
-    <DialogCloseBtn @click="onReset" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          {{ props.permissionName ? 'Edit' : 'Add' }} Permission
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          {{ props.permissionName ? 'Edit' : 'Add' }}  permission as per your requirements.
-        </p>
-
-        <!-- 👉 Form -->
-        <VForm>
-          <VAlert
-            type="warning"
-            title="Warning!"
-            variant="tonal"
-            class="mb-6"
-          >
-            <template #text>
-              By {{ props.permissionName ? 'editing' : 'adding' }} the permission name, you might break the system permissions functionality.
-            </template>
-          </VAlert>
-
-          <!-- 👉 Role name -->
-          <div class="d-flex gap-4 mb-6 flex-wrap flex-column flex-sm-row">
-            <AppTextField
-              v-model="currentPermissionName"
-              placeholder="Enter Permission Name"
-            />
-
-            <VBtn @click="onSubmit">
-              {{ props.permissionName ? 'Update' : 'Add' }}
-            </VBtn>
-          </div>
-
-          <VCheckbox label="Set as core permission" />
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.permission-table {
-  td {
-    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    padding-block: 0.5rem;
-    padding-inline: 0;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/AddEditRoleDialog.vue b/apps/portal/src/components/dialogs/AddEditRoleDialog.vue
deleted file mode 100644
index a9a2baa0..00000000
--- a/apps/portal/src/components/dialogs/AddEditRoleDialog.vue
+++ /dev/null
@@ -1,302 +0,0 @@
-<script setup lang="ts">
-import { VForm } from 'vuetify/components/VForm'
-
-interface Permission {
-  name: string
-  read: boolean
-  write: boolean
-  create: boolean
-}
-
-interface Roles {
-  name: string
-  permissions: Permission[]
-}
-
-interface Props {
-  rolePermissions?: Roles
-  isDialogVisible: boolean
-}
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'update:rolePermissions', value: Roles): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  rolePermissions: () => ({
-    name: '',
-    permissions: [],
-  }),
-})
-
-const emit = defineEmits<Emit>()
-
-// 👉 Permission List
-const permissions = ref<Permission[]>([
-  {
-    name: 'User Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Content Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Disputes Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Database Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Financial Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Reporting',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'API Control',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Repository Management',
-    read: false,
-    write: false,
-    create: false,
-  },
-  {
-    name: 'Payroll',
-    read: false,
-    write: false,
-    create: false,
-  },
-])
-
-const isSelectAll = ref(false)
-const role = ref('')
-const refPermissionForm = ref<VForm>()
-
-const checkedCount = computed(() => {
-  let counter = 0
-
-  permissions.value.forEach(permission => {
-    Object.entries(permission).forEach(([key, value]) => {
-      if (key !== 'name' && value)
-        counter++
-    })
-  })
-
-  return counter
-})
-
-const isIndeterminate = computed(() => checkedCount.value > 0 && checkedCount.value < (permissions.value.length * 3))
-
-// select all
-watch(isSelectAll, val => {
-  permissions.value = permissions.value.map(permission => ({
-    ...permission,
-    read: val,
-    write: val,
-    create: val,
-  }))
-})
-
-// if Indeterminate is false, then set isSelectAll to false
-watch(isIndeterminate, () => {
-  if (!isIndeterminate.value)
-    isSelectAll.value = false
-})
-
-// if all permissions are checked, then set isSelectAll to true
-watch(permissions, () => {
-  if (checkedCount.value === (permissions.value.length * 3))
-    isSelectAll.value = true
-}, { deep: true })
-
-// if rolePermissions is not empty, then set permissions
-watch(() => props, () => {
-  if (props.rolePermissions && props.rolePermissions.permissions.length) {
-    role.value = props.rolePermissions.name
-    permissions.value = permissions.value.map(permission => {
-      const rolePermission = props.rolePermissions?.permissions.find(item => item.name === permission.name)
-
-      if (rolePermission) {
-        return {
-          ...permission,
-          ...rolePermission,
-        }
-      }
-
-      return permission
-    })
-  }
-})
-
-const onSubmit = () => {
-  const rolePermissions = {
-    name: role.value,
-    permissions: permissions.value,
-  }
-
-  emit('update:rolePermissions', rolePermissions)
-  emit('update:isDialogVisible', false)
-  isSelectAll.value = false
-  refPermissionForm.value?.reset()
-}
-
-const onReset = () => {
-  emit('update:isDialogVisible', false)
-  isSelectAll.value = false
-  refPermissionForm.value?.reset()
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    :model-value="props.isDialogVisible"
-    @update:model-value="onReset"
-  >
-    <!-- 👉 Dialog close btn -->
-    <DialogCloseBtn @click="onReset" />
-
-    <VCard class="pa-sm-10 pa-2">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          {{ props.rolePermissions.name ? 'Edit' : 'Add New' }} Role
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Set Role Permissions
-        </p>
-
-        <!-- 👉 Form -->
-        <VForm ref="refPermissionForm">
-          <!-- 👉 Role name -->
-          <AppTextField
-            v-model="role"
-            label="Role Name"
-            placeholder="Enter Role Name"
-          />
-
-          <h5 class="text-h5 my-6">
-            Role Permissions
-          </h5>
-
-          <!-- 👉 Role Permissions -->
-
-          <VTable class="permission-table text-no-wrap mb-6">
-            <!-- 👉 Admin  -->
-            <tr>
-              <td>
-                <h6 class="text-h6">
-                  Administrator Access
-                </h6>
-              </td>
-              <td colspan="3">
-                <div class="d-flex justify-end">
-                  <VCheckbox
-                    v-model="isSelectAll"
-                    v-model:indeterminate="isIndeterminate"
-                    label="Select All"
-                  />
-                </div>
-              </td>
-            </tr>
-
-            <!-- 👉 Other permission loop -->
-            <template
-              v-for="permission in permissions"
-              :key="permission.name"
-            >
-              <tr>
-                <td>
-                  <h6 class="text-h6">
-                    {{ permission.name }}
-                  </h6>
-                </td>
-                <td>
-                  <div class="d-flex justify-end">
-                    <VCheckbox
-                      v-model="permission.read"
-                      label="Read"
-                    />
-                  </div>
-                </td>
-                <td>
-                  <div class="d-flex justify-end">
-                    <VCheckbox
-                      v-model="permission.write"
-                      label="Write"
-                    />
-                  </div>
-                </td>
-                <td>
-                  <div class="d-flex justify-end">
-                    <VCheckbox
-                      v-model="permission.create"
-                      label="Create"
-                    />
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </VTable>
-
-          <!-- 👉 Actions button -->
-          <div class="d-flex align-center justify-center gap-4">
-            <VBtn @click="onSubmit">
-              Submit
-            </VBtn>
-
-            <VBtn
-              color="secondary"
-              variant="tonal"
-              @click="onReset"
-            >
-              Cancel
-            </VBtn>
-          </div>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.permission-table {
-  td {
-    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    padding-block: 0.5rem;
-
-    .v-checkbox {
-      min-inline-size: 4.75rem;
-    }
-
-    &:not(:first-child) {
-      padding-inline: 0.5rem;
-    }
-
-    .v-label {
-      white-space: nowrap;
-    }
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/AddPaymentMethodDialog.vue b/apps/portal/src/components/dialogs/AddPaymentMethodDialog.vue
deleted file mode 100644
index 4814d155..00000000
--- a/apps/portal/src/components/dialogs/AddPaymentMethodDialog.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import americanExDark from '@images/icons/payments/img/ae-dark.png'
-import americanExLight from '@images/icons/payments/img/american-express.png'
-import dcDark from '@images/icons/payments/img/dc-dark.png'
-import dcLight from '@images/icons/payments/img/dc-light.png'
-import jcbDark from '@images/icons/payments/img/jcb-dark.png'
-import jcbLight from '@images/icons/payments/img/jcb-light.png'
-import masterCardDark from '@images/icons/payments/img/master-dark.png'
-import masterCardLight from '@images/icons/payments/img/mastercard.png'
-import visaDark from '@images/icons/payments/img/visa-dark.png'
-import visaLight from '@images/icons/payments/img/visa-light.png'
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emit>()
-
-const visa = useGenerateImageVariant(visaLight, visaDark)
-const masterCard = useGenerateImageVariant(masterCardLight, masterCardDark)
-const americanEx = useGenerateImageVariant(americanExLight, americanExDark)
-const jcb = useGenerateImageVariant(jcbLight, jcbDark)
-const dc = useGenerateImageVariant(dcLight, dcDark)
-
-interface Props {
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-
-const paymentMethodsData = [
-  {
-    title: 'Visa',
-    type: 'Credit Card',
-    img: visa,
-  },
-  {
-    title: 'American Express',
-    type: 'Credit Card',
-    img: americanEx,
-  },
-  {
-    title: 'Mastercard',
-    type: 'Credit Card',
-    img: masterCard,
-  },
-  {
-    title: 'JCB',
-    type: 'Credit Card',
-    img: jcb,
-  },
-  {
-    title: 'Diners Club',
-    type: 'Credit Card',
-    img: dc,
-  },
-
-]
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    :width="$vuetify.display.smAndDown ? 'auto' : 750"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <!-- 👉 dialog close btn -->
-    <DialogCloseBtn @click="emit('update:isDialogVisible', false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          Add payment methods
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Supported payment methods
-        </p>
-
-        <div
-          v-for="(item, index) in paymentMethodsData"
-          :key="index"
-        >
-          <div class="d-flex justify-space-between align-center py-4 gap-x-4">
-            <div class="d-flex align-center">
-              <VImg
-                :src="item.img.value"
-                height="30"
-                width="50"
-                class="me-4"
-              />
-              <h6 class="text-h6">
-                {{ item.title }}
-              </h6>
-            </div>
-            <div class="d-none d-sm-block text-body-1">
-              {{ item.type }}
-            </div>
-          </div>
-          <VDivider v-if="index !== paymentMethodsData.length - 1" />
-        </div>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.refer-link-input {
-  .v-field--appended {
-    padding-inline-end: 0;
-  }
-
-  .v-field__append-inner {
-    padding-block-start: 0.125rem;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/CardAddEditDialog.vue b/apps/portal/src/components/dialogs/CardAddEditDialog.vue
deleted file mode 100644
index b31f38e7..00000000
--- a/apps/portal/src/components/dialogs/CardAddEditDialog.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script setup lang="ts">
-interface Details {
-  number: string | number
-  name: string
-  expiry: string
-  cvv: string
-  isPrimary: boolean
-  type: string
-}
-interface Emit {
-  (e: 'submit', value: Details): void
-  (e: 'update:isDialogVisible', value: boolean): void
-}
-
-interface Props {
-  cardDetails?: Details
-  isDialogVisible: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  cardDetails: () => ({
-    number: '',
-    name: '',
-    expiry: '',
-    cvv: '',
-    isPrimary: false,
-    type: '',
-  }),
-})
-
-const emit = defineEmits<Emit>()
-
-const cardDetails = ref<Details>(structuredClone(toRaw(props.cardDetails)))
-
-watch(() => props, () => {
-  cardDetails.value = structuredClone(toRaw(props.cardDetails))
-})
-
-const formSubmit = () => {
-  emit('submit', cardDetails.value)
-}
-
-const dialogModelValueUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 600"
-    :model-value="props.isDialogVisible"
-    @update:model-value="dialogModelValueUpdate"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <!-- 👉 Title -->
-      <VCardItem class="text-center">
-        <VCardTitle>
-          <h4 class="text-h4 mb-2">
-            {{ props.cardDetails.name ? 'Edit Card' : 'Add New Card' }}
-          </h4>
-        </VCardTitle>
-        <p class="text-body-1 mb-0">
-          {{ props.cardDetails.name ? 'Edit your saved card details' : 'Add card for future billing' }}
-        </p>
-      </VCardItem>
-
-      <VCardText class="pt-6">
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <!-- 👉 Card Number -->
-            <VCol cols="12">
-              <AppTextField
-                v-model="cardDetails.number"
-                label="Card Number"
-                placeholder="1356 3215 6548 7898"
-                type="number"
-              />
-            </VCol>
-
-            <!-- 👉 Card Name -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="cardDetails.name"
-                label="Name"
-                placeholder="John Doe"
-              />
-            </VCol>
-
-            <!-- 👉 Card Expiry -->
-            <VCol
-              cols="12"
-              md="3"
-            >
-              <AppTextField
-                v-model="cardDetails.expiry"
-                label="Expiry Date"
-                placeholder="MM/YY"
-              />
-            </VCol>
-
-            <!-- 👉 Card CVV -->
-            <VCol
-              cols="12"
-              md="3"
-            >
-              <AppTextField
-                v-model="cardDetails.cvv"
-                type="number"
-                label="CVV Code"
-                placeholder="654"
-              />
-            </VCol>
-
-            <!-- 👉 Card Primary Set -->
-            <VCol cols="12">
-              <VSwitch
-                v-model="cardDetails.isPrimary"
-                label="Save Card for future billing?"
-              />
-            </VCol>
-
-            <!-- 👉 Card actions -->
-            <VCol
-              cols="12"
-              class="text-center"
-            >
-              <VBtn
-                class="me-4"
-                type="submit"
-                @click="formSubmit"
-              >
-                Submit
-              </VBtn>
-              <VBtn
-                color="secondary"
-                variant="tonal"
-                @click="$emit('update:isDialogVisible', false)"
-              >
-                Cancel
-              </VBtn>
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/ConfirmDialog.vue b/apps/portal/src/components/dialogs/ConfirmDialog.vue
deleted file mode 100644
index c3dd2b0a..00000000
--- a/apps/portal/src/components/dialogs/ConfirmDialog.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  confirmationQuestion: string
-  isDialogVisible: boolean
-  confirmTitle: string
-  confirmMsg: string
-  cancelTitle: string
-  cancelMsg: string
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'confirm', value: boolean): void
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-const unsubscribed = ref(false)
-const cancelled = ref(false)
-
-const updateModelValue = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-
-const onConfirmation = () => {
-  emit('confirm', true)
-  updateModelValue(false)
-  unsubscribed.value = true
-}
-
-const onCancel = () => {
-  emit('confirm', false)
-  emit('update:isDialogVisible', false)
-  cancelled.value = true
-}
-</script>
-
-<template>
-  <!-- 👉 Confirm Dialog -->
-  <VDialog
-    max-width="500"
-    :model-value="props.isDialogVisible"
-    @update:model-value="updateModelValue"
-  >
-    <VCard class="text-center px-10 py-6">
-      <VCardText>
-        <VBtn
-          icon
-          variant="outlined"
-          color="warning"
-          class="my-4"
-          style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
-        >
-          <span class="text-5xl">!</span>
-        </VBtn>
-
-        <h6 class="text-lg font-weight-medium">
-          {{ props.confirmationQuestion }}
-        </h6>
-      </VCardText>
-
-      <VCardText class="d-flex align-center justify-center gap-2">
-        <VBtn
-          variant="elevated"
-          @click="onConfirmation"
-        >
-          Confirm
-        </VBtn>
-
-        <VBtn
-          color="secondary"
-          variant="tonal"
-          @click="onCancel"
-        >
-          Cancel
-        </VBtn>
-      </VCardText>
-    </VCard>
-  </VDialog>
-
-  <!-- Unsubscribed -->
-  <VDialog
-    v-model="unsubscribed"
-    max-width="500"
-  >
-    <VCard>
-      <VCardText class="text-center px-10 py-6">
-        <VBtn
-          icon
-          variant="outlined"
-          color="success"
-          class="my-4"
-          style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
-        >
-          <VIcon
-            icon="tabler-check"
-            size="38"
-          />
-        </VBtn>
-
-        <h1 class="text-h4 mb-4">
-          {{ props.confirmTitle }}
-        </h1>
-
-        <p>{{ props.confirmMsg }}</p>
-
-        <VBtn
-          color="success"
-          @click="unsubscribed = false"
-        >
-          Ok
-        </VBtn>
-      </VCardText>
-    </VCard>
-  </VDialog>
-
-  <!-- Cancelled -->
-  <VDialog
-    v-model="cancelled"
-    max-width="500"
-  >
-    <VCard>
-      <VCardText class="text-center px-10 py-6">
-        <VBtn
-          icon
-          variant="outlined"
-          color="error"
-          class="my-4"
-          style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
-        >
-          <span class="text-5xl font-weight-light">X</span>
-        </VBtn>
-
-        <h1 class="text-h4 mb-4">
-          {{ props.cancelTitle }}
-        </h1>
-
-        <p>{{ props.cancelMsg }}</p>
-
-        <VBtn
-          color="success"
-          @click="cancelled = false"
-        >
-          Ok
-        </VBtn>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/CreateAppDialog.vue b/apps/portal/src/components/dialogs/CreateAppDialog.vue
deleted file mode 100644
index c627b4e8..00000000
--- a/apps/portal/src/components/dialogs/CreateAppDialog.vue
+++ /dev/null
@@ -1,459 +0,0 @@
-<script setup lang="ts">
-import laptopGirl from '@images/illustrations/laptop-girl.png'
-
-const props = defineProps<{
-  isDialogVisible: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:isDialogVisible', val: boolean): void
-  (e: 'updatedData', val: unknown): void
-}>()
-
-const currentStep = ref(0)
-
-const createApp = [
-  {
-    icon: 'tabler-file-text',
-    title: 'DETAILS',
-    subtitle: 'Enter Details',
-  },
-  {
-    icon: 'tabler-id',
-    title: 'FRAMEWORKS',
-    subtitle: 'Select Framework',
-  },
-  {
-    icon: 'tabler-database',
-    title: 'DATABASE',
-    subtitle: 'Select Database',
-  },
-  {
-    icon: 'tabler-credit-card',
-    title: 'BILLING',
-    subtitle: 'Payment Details',
-  },
-  {
-    icon: 'tabler-check',
-    title: 'SUBMIT',
-    subtitle: 'Submit',
-  },
-]
-
-const categories = [
-  {
-    icon: 'tabler-file-text',
-    color: 'info',
-    title: 'CRM Application',
-    subtitle: 'Scales with any business',
-    slug: 'crm-application',
-  },
-  {
-    icon: 'tabler-shopping-cart',
-    color: 'success',
-    title: 'Ecommerce Platforms',
-    subtitle: 'Grow Your Business With App',
-    slug: 'ecommerce-application',
-  },
-  {
-    icon: 'tabler-device-laptop',
-    color: 'error',
-    title: 'Online Learning platform',
-    subtitle: 'Start learning today',
-    slug: 'online-learning-application',
-  },
-]
-
-const frameworks = [
-  {
-    icon: 'tabler-brand-react-native',
-    color: 'info',
-    title: 'React Native',
-    subtitle: 'Create truly native apps',
-    slug: 'react-framework',
-  },
-  {
-    icon: 'tabler-brand-angular',
-    color: 'error',
-    title: 'Angular',
-    subtitle: 'Most suited for your application',
-    slug: 'angular-framework',
-  },
-  {
-    icon: 'tabler-brand-vue',
-    color: 'success',
-    title: 'Vue',
-    subtitle: 'JS web frameworks',
-    slug: 'js-framework',
-  },
-  {
-    icon: 'tabler-brand-html5',
-    color: 'warning',
-    title: 'HTML',
-    subtitle: 'Progressive Framework',
-    slug: 'html-framework',
-  },
-]
-
-const databases = [
-  {
-    icon: 'tabler-brand-firebase',
-    color: 'error',
-    title: 'Firebase',
-    subtitle: 'Cloud Firestore',
-    slug: 'firebase-database',
-  },
-  {
-    icon: 'tabler-brand-amazon',
-    color: 'warning',
-    title: 'AWS',
-    subtitle: 'Amazon Fast NoSQL Database',
-    slug: 'aws-database',
-  },
-  {
-    icon: 'tabler-database',
-    color: 'info',
-    title: 'MySQL',
-    subtitle: 'Basic MySQL database',
-    slug: 'mysql-database',
-  },
-]
-
-const createAppData = ref({
-  category: 'crm-application',
-  framework: 'js-framework',
-  database: 'firebase-database',
-  cardNumber: null,
-  cardName: '',
-  cardExpiry: '',
-  cardCvv: '',
-  isSave: true,
-})
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-  currentStep.value = 0
-}
-
-watch(() => props, () => {
-  if (!props.isDialogVisible)
-    currentStep.value = 0
-})
-
-const onSubmit = () => {
-  // eslint-disable-next-line no-alert
-  alert('submitted...!!')
-  emit('updatedData', createAppData.value)
-}
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    max-width="900"
-    min-height="590"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <!-- 👉 dialog close btn -->
-    <DialogCloseBtn
-      size="small"
-      @click="emit('update:isDialogVisible', false)"
-    />
-    <VCard
-      class="create-app-dialog"
-      min-height="590"
-    >
-      <VCardText class="pa-5 pa-sm-16">
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          Create App
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Provide data with this form to create your app.
-        </p>
-
-        <VRow>
-          <VCol
-            cols="12"
-            sm="5"
-            md="4"
-            lg="3"
-          >
-            <AppStepper
-              v-model:current-step="currentStep"
-              direction="vertical"
-              :items="createApp"
-              icon-size="22"
-              class="stepper-icon-step-bg"
-            />
-          </VCol>
-
-          <VCol
-            cols="12"
-            sm="7"
-            md="8"
-            lg="9"
-          >
-            <VWindow
-              v-model="currentStep"
-              class="disable-tab-transition stepper-content"
-            >
-              <!-- 👉 category -->
-              <VWindowItem>
-                <AppTextField
-                  label="Application Name"
-                  placeholder="Application Name"
-                />
-
-                <h5 class="text-h5 mt-6 mb-4">
-                  Category
-                </h5>
-                <VRadioGroup v-model="createAppData.category">
-                  <VList class="card-list">
-                    <VListItem
-                      v-for="category in categories"
-                      :key="category.title"
-                      @click="createAppData.category = category.slug"
-                    >
-                      <template #prepend>
-                        <VAvatar
-                          size="46"
-                          rounded
-                          variant="tonal"
-                          :color="category.color"
-                        >
-                          <VIcon
-                            :icon="category.icon"
-                            size="30"
-                          />
-                        </VAvatar>
-                      </template>
-
-                      <VListItemTitle>
-                        <h6 class="text-h6 mb-1">
-                          {{ category.title }}
-                        </h6>
-                      </VListItemTitle>
-                      <VListItemSubtitle>
-                        {{ category.subtitle }}
-                      </VListItemSubtitle>
-
-                      <template #append>
-                        <VRadio :value="category.slug" />
-                      </template>
-                    </VListItem>
-                  </VList>
-                </VRadioGroup>
-              </VWindowItem>
-
-              <!-- 👉 Frameworks -->
-              <VWindowItem>
-                <h5 class="text-h5 mb-4">
-                  Select Framework
-                </h5>
-                <VRadioGroup v-model="createAppData.framework">
-                  <VList class="card-list">
-                    <VListItem
-                      v-for="framework in frameworks"
-                      :key="framework.title"
-                      @click="createAppData.framework = framework.slug"
-                    >
-                      <template #prepend>
-                        <VAvatar
-                          size="46"
-                          rounded
-                          variant="tonal"
-                          :color="framework.color"
-                        >
-                          <VIcon
-                            :icon="framework.icon"
-                            size="30"
-                          />
-                        </VAvatar>
-                      </template>
-                      <VListItemTitle>
-                        <h6 class="text-h6 mb-1">
-                          {{ framework.title }}
-                        </h6>
-                      </VListItemTitle>
-                      <VListItemSubtitle>
-                        {{ framework.subtitle }}
-                      </VListItemSubtitle>
-                      <template #append>
-                        <VRadio :value="framework.slug" />
-                      </template>
-                    </VListItem>
-                  </VList>
-                </VRadioGroup>
-              </VWindowItem>
-
-              <!-- 👉 Database Engine -->
-              <VWindowItem>
-                <AppTextField
-                  label="Database Name"
-                  placeholder="UserDB"
-                />
-
-                <h5 class="text-h5 mt-6 mb-4">
-                  Select Database Engine
-                </h5>
-                <VRadioGroup v-model="createAppData.database">
-                  <VList class="card-list">
-                    <VListItem
-                      v-for="database in databases"
-                      :key="database.title"
-                      @click="createAppData.database = database.slug"
-                    >
-                      <template #prepend>
-                        <VAvatar
-                          size="46"
-                          rounded
-                          variant="tonal"
-                          :color="database.color"
-                        >
-                          <VIcon
-                            :icon="database.icon"
-                            size="30"
-                          />
-                        </VAvatar>
-                      </template>
-                      <VListItemTitle>
-                        <h6 class="text-h6 mb-1">
-                          {{ database.title }}
-                        </h6>
-                      </VListItemTitle>
-                      <VListItemSubtitle>
-                        {{ database.subtitle }}
-                      </VListItemSubtitle>
-                      <template #append>
-                        <VRadio :value="database.slug" />
-                      </template>
-                    </VListItem>
-                  </VList>
-                </VRadioGroup>
-              </VWindowItem>
-
-              <!-- 👉 Billing form -->
-              <VWindowItem>
-                <h6 class="text-h6 mb-6">
-                  Payment Details
-                </h6>
-
-                <VForm>
-                  <VRow>
-                    <VCol cols="12">
-                      <AppTextField
-                        v-model="createAppData.cardNumber"
-                        label="Card Number"
-                        placeholder="1234 1234 1234 1234"
-                        type="number"
-                      />
-                    </VCol>
-
-                    <VCol
-                      cols="12"
-                      md="6"
-                    >
-                      <AppTextField
-                        v-model="createAppData.cardName"
-                        label="Name on Card"
-                        placeholder="John Doe"
-                      />
-                    </VCol>
-
-                    <VCol
-                      cols="6"
-                      md="3"
-                    >
-                      <AppTextField
-                        v-model="createAppData.cardExpiry"
-                        label="Expiry"
-                        placeholder="MM/YY"
-                      />
-                    </VCol>
-
-                    <VCol
-                      cols="6"
-                      md="3"
-                    >
-                      <AppTextField
-                        v-model="createAppData.cardCvv"
-                        label="CVV"
-                        placeholder="123"
-                      />
-                    </VCol>
-
-                    <VCol cols="12">
-                      <VSwitch
-                        v-model="createAppData.isSave"
-                        label="Save Card for future billing?"
-                      />
-                    </VCol>
-                  </VRow>
-                </VForm>
-              </VWindowItem>
-
-              <VWindowItem class="text-center">
-                <h5 class="text-h5 mb-1">
-                  Submit
-                </h5>
-                <p class="text-sm mb-4">
-                  Submit to kickstart your project.
-                </p>
-
-                <VImg
-                  :src="laptopGirl"
-                  width="176"
-                  class="mx-auto"
-                />
-              </VWindowItem>
-            </VWindow>
-
-            <div class="d-flex justify-space-between mt-6">
-              <VBtn
-                variant="tonal"
-                color="secondary"
-                :disabled="currentStep === 0"
-                @click="currentStep--"
-              >
-                <VIcon
-                  icon="tabler-arrow-left"
-                  start
-                  class="flip-in-rtl"
-                />
-                Previous
-              </VBtn>
-
-              <VBtn
-                v-if="createApp.length - 1 === currentStep"
-                color="success"
-                @click="onSubmit"
-              >
-                submit
-              </VBtn>
-
-              <VBtn
-                v-else
-                @click="currentStep++"
-              >
-                Next
-
-                <VIcon
-                  icon="tabler-arrow-right"
-                  end
-                  class="flip-in-rtl"
-                />
-              </VBtn>
-            </div>
-          </VCol>
-        </VRow>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.stepper-content .card-list {
-  --v-card-list-gap: 16px;
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/EnableOneTimePasswordDialog.vue b/apps/portal/src/components/dialogs/EnableOneTimePasswordDialog.vue
deleted file mode 100644
index 3521ee2e..00000000
--- a/apps/portal/src/components/dialogs/EnableOneTimePasswordDialog.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'submit', value: string): void
-}
-interface Props {
-  mobileNumber?: string
-  isDialogVisible: boolean
-}
-const props = defineProps<Props>()
-const emit = defineEmits<Emit>()
-
-const phoneNumber = ref(structuredClone(toRaw(props.mobileNumber)))
-
-const formSubmit = () => {
-  if (phoneNumber.value) {
-    emit('submit', phoneNumber.value)
-    emit('update:isDialogVisible', false)
-  }
-}
-
-const resetPhoneNumber = () => {
-  phoneNumber.value = structuredClone(toRaw(props.mobileNumber))
-  emit('update:isDialogVisible', false)
-}
-
-const dialogModelValueUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    :model-value="props.isDialogVisible"
-    @update:model-value="dialogModelValueUpdate"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h5 class="text-h5 mb-2">
-          Verify Your Mobile Number for SMS
-        </h5>
-        <p class="text-body-1 mb-6">
-          Enter your mobile phone number with country code and  we will send you a verification code.
-        </p>
-
-        <VForm @submit.prevent="() => {}">
-          <AppTextField
-            v-model="phoneNumber"
-            name="mobile"
-            label="Phone Number"
-            placeholder="+1 123 456 7890"
-            type="number"
-            class="mb-6"
-          />
-
-          <div class="d-flex flex-wrap justify-end gap-4">
-            <VBtn
-              color="secondary"
-              variant="tonal"
-              @click="resetPhoneNumber"
-            >
-              Cancel
-            </VBtn>
-            <VBtn
-              type="submit"
-              @click="formSubmit"
-            >
-              continue
-              <VIcon
-                end
-                icon="tabler-arrow-right"
-                class="flip-in-rtl"
-              />
-            </VBtn>
-          </div>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/PaymentProvidersDialog.vue b/apps/portal/src/components/dialogs/PaymentProvidersDialog.vue
deleted file mode 100644
index 9f73a3bc..00000000
--- a/apps/portal/src/components/dialogs/PaymentProvidersDialog.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import americanExDark from '@images/icons/payments/img/ae-dark.png'
-import americanExLight from '@images/icons/payments/img/american-express.png'
-import dcDark from '@images/icons/payments/img/dc-dark.png'
-import dcLight from '@images/icons/payments/img/dc-light.png'
-import jcbDark from '@images/icons/payments/img/jcb-dark.png'
-import jcbLight from '@images/icons/payments/img/jcb-light.png'
-import masterCardDark from '@images/icons/payments/img/master-dark.png'
-import masterCardLight from '@images/icons/payments/img/mastercard.png'
-import visaDark from '@images/icons/payments/img/visa-dark.png'
-import visaLight from '@images/icons/payments/img/visa-light.png'
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emit>()
-const visa = useGenerateImageVariant(visaLight, visaDark)
-const masterCard = useGenerateImageVariant(masterCardLight, masterCardDark)
-const americanEx = useGenerateImageVariant(americanExLight, americanExDark)
-const jcb = useGenerateImageVariant(jcbLight, jcbDark)
-const dc = useGenerateImageVariant(dcLight, dcDark)
-
-interface Props {
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-
-const paymentProvidersData = [
-  {
-    title: 'Adyen',
-    providers: [visa, masterCard, americanEx, jcb, dc],
-  },
-  {
-    title: '2Checkout',
-    providers: [visa, americanEx, jcb, dc],
-  },
-  {
-    title: 'Airpay',
-    providers: [visa, americanEx, masterCard, jcb],
-  },
-  {
-    title: 'Authorize.net',
-    providers: [americanEx, jcb, dc],
-  },
-  {
-    title: 'Bambora',
-    providers: [masterCard, americanEx, jcb],
-  },
-  {
-    title: 'Bambora',
-    providers: [visa, masterCard, americanEx, jcb, dc],
-  },
-  {
-    title: 'Chase Paymentech (Orbital)',
-    providers: [visa, americanEx, jcb, dc],
-  },
-  {
-    title: 'Checkout.com',
-    providers: [visa, masterCard],
-  },
-]
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <DialogCloseBtn @click="emit('update:isDialogVisible', false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          Select Payment Providers
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Third-party payment providers
-        </p>
-
-        <div
-          v-for="(item, index) in paymentProvidersData"
-          :key="index"
-        >
-          <div class="d-flex flex-column flex-sm-row justify-space-between gap-4 flex-wrap py-4">
-            <h6 class="text-h6">
-              {{ item.title }}
-            </h6>
-            <div class="d-flex gap-4 flex-wrap">
-              <img
-                v-for="(img, iterator) in item.providers"
-                :key="iterator"
-                :src="img.value"
-                height="30"
-                width="50"
-              >
-            </div>
-          </div>
-          <VDivider v-if="index !== paymentProvidersData.length - 1" />
-        </div>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.refer-link-input {
-  .v-field--appended {
-    padding-inline-end: 0;
-  }
-
-  .v-field__append-inner {
-    padding-block-start: 0.125rem;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/PricingPlanDialog.vue b/apps/portal/src/components/dialogs/PricingPlanDialog.vue
deleted file mode 100644
index 0ce068a1..00000000
--- a/apps/portal/src/components/dialogs/PricingPlanDialog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    :width="$vuetify.display.smAndDown ? 'auto' : 1200"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <!-- 👉 Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard class="pricing-dialog pa-2 pa-sm-10">
-      <VCardText>
-        <AppPricing md="4" />
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/ReferAndEarnDialog.vue b/apps/portal/src/components/dialogs/ReferAndEarnDialog.vue
deleted file mode 100644
index 58cb10dc..00000000
--- a/apps/portal/src/components/dialogs/ReferAndEarnDialog.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import keyboard from '@images/svg/keyboard.svg'
-import paper from '@images/svg/paper-send.svg'
-import rocket from '@images/svg/rocket.svg'
-import { themeConfig } from '@themeConfig'
-
-interface Props {
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-
-const referAndEarnSteps = [
-  {
-    icon: paper,
-    title: 'Send Invitation 👍🏻',
-    subtitle: 'Send your referral link to your friend',
-  },
-  {
-    icon: keyboard,
-    title: 'Registration 😎',
-    subtitle: 'Let them register to our services',
-  },
-  {
-    icon: rocket,
-    title: 'Free Trial  🎉',
-    subtitle: 'Your friend will get 30 days free trial',
-  },
-]
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    :width="$vuetify.display.smAndDown ? 'auto' : 800"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <!-- 👉 Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <h4 class="text-h4 text-center mb-2">
-          Refer & Earn
-        </h4>
-        <p class="text-body-1 mb-6 text-center">
-          Invite your friend to <span class="text-capitalize">{{ themeConfig.app.title }}</span>, if they sign up, you and your friend will get 30 days free trial
-        </p>
-
-        <VRow class="text-center mt-8">
-          <VCol
-            v-for="step in referAndEarnSteps"
-            :key="step.title"
-            cols="12"
-            sm="4"
-          >
-            <VAvatar
-              variant="tonal"
-              size="88"
-              color="primary"
-              rounded
-            >
-              <VIcon
-                size="40"
-                :icon="step.icon"
-              />
-            </VAvatar>
-
-            <h5 class="text-h5 mt-4 mb-2">
-              {{ step.title }}
-            </h5>
-            <div>{{ step.subtitle }}</div>
-          </VCol>
-        </VRow>
-
-        <VDivider class="mt-12 mb-6" />
-
-        <h5 class="text-h5 mb-6">
-          Invite your friends
-        </h5>
-
-        <VForm
-          class="d-flex align-center flex-wrap gap-4"
-          @submit.prevent="() => {}"
-        >
-          <AppTextField
-            placeholder="johnDoe@gmail.com"
-            label="Enter your friend's email address and invite them to join Vuexy 😍"
-          />
-
-          <VBtn
-            class="align-self-end"
-            type="submit"
-          >
-            Send
-          </VBtn>
-        </VForm>
-
-        <h5 class="text-h5 my-6">
-          Share the referral link
-        </h5>
-
-        <VForm
-          class="d-flex align-center flex-wrap gap-4"
-          @submit.prevent="() => {}"
-        >
-          <AppTextField
-            placeholder="http://pixinvent.link"
-            label="You can also copy and send it or share it on your social media. 🚀"
-            class="refer-link-input"
-          >
-            <template #append-inner>
-              <VBtn variant="text">
-                Copy link
-              </VBtn>
-            </template>
-          </AppTextField>
-
-          <div class="d-flex align-self-end gap-1">
-            <VBtn
-              icon
-              class="rounded"
-              color="#3B5998"
-              size="38"
-            >
-              <VIcon
-                color="white"
-                icon="tabler-brand-facebook"
-                size="22"
-              />
-            </VBtn>
-
-            <VBtn
-              icon
-              class="rounded"
-              color="#55ACEE"
-              size="38"
-            >
-              <VIcon
-                color="white"
-                icon="tabler-brand-twitter"
-                size="22"
-              />
-            </VBtn>
-
-            <VBtn
-              icon
-              class="rounded"
-              color="#007BB6"
-              size="38"
-            >
-              <VIcon
-                color="white"
-                icon="tabler-brand-linkedin"
-                size="22"
-              />
-            </VBtn>
-          </div>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.refer-link-input {
-  .v-field--appended {
-    padding-inline-end: 0;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/ShareProjectDialog.vue b/apps/portal/src/components/dialogs/ShareProjectDialog.vue
deleted file mode 100644
index 8e50119b..00000000
--- a/apps/portal/src/components/dialogs/ShareProjectDialog.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<script setup lang="ts">
-import avatar1 from '@images/avatars/avatar-1.png'
-import avatar2 from '@images/avatars/avatar-2.png'
-import avatar3 from '@images/avatars/avatar-3.png'
-import avatar4 from '@images/avatars/avatar-4.png'
-import avatar5 from '@images/avatars/avatar-5.png'
-import avatar6 from '@images/avatars/avatar-6.png'
-import avatar7 from '@images/avatars/avatar-7.png'
-import avatar8 from '@images/avatars/avatar-8.png'
-
-interface Props {
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-const dialogVisibleUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-
-type Permission = 'Owner' | 'Can Edit' | 'Can Comment' | 'Can View'
-
-interface Member {
-  avatar: string
-  name: string
-  email: string
-  permission: Permission
-}
-
-const membersList: Member[] = [
-  {
-    avatar: avatar1,
-    name: 'Lester Palmer',
-    email: 'jerrod98@gmail.com',
-    permission: 'Can Edit',
-  },
-  {
-    avatar: avatar2,
-    name: 'Mattie Blair',
-    email: 'prudence.boehm@yahoo.com',
-    permission: 'Owner',
-  },
-  {
-    avatar: avatar3,
-    name: 'Marvin Wheeler',
-    email: 'rumet@jujpejah.net',
-    permission: 'Can Comment',
-  },
-  {
-    avatar: avatar4,
-    name: 'Nannie Ford',
-    email: 'negza@nuv.io',
-    permission: 'Can View',
-  },
-  {
-    avatar: avatar5,
-    name: 'Julian Murphy',
-    email: 'lunebame@umdomgu.net',
-    permission: 'Can Edit',
-  },
-  {
-    avatar: avatar6,
-    name: 'Sophie Gilbert',
-    email: 'ha@sugit.gov',
-    permission: 'Can View',
-  },
-  {
-    avatar: avatar7,
-    name: 'Chris Watkins',
-    email: 'zokap@mak.org',
-    permission: 'Can Comment',
-  },
-  {
-    avatar: avatar8,
-    name: 'Adelaide Nichols',
-    email: 'ujinomu@jigo.com',
-    permission: 'Can Edit',
-  },
-]
-</script>
-
-<template>
-  <VDialog
-    :model-value="props.isDialogVisible"
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    @update:model-value="dialogVisibleUpdate"
-  >
-    <!-- 👉 Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard class="share-project-dialog pa-2 pa-sm-10">
-      <VCardText>
-        <h4 class="text-h4 text-center mb-2">
-          Share Project
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Share project with a team members
-        </p>
-
-        <AppAutocomplete
-          label="Add Members"
-          :items="membersList"
-          item-title="name"
-          item-value="name"
-          placeholder="Add project members..."
-        >
-          <template #item="{ props: listItemProp, item }">
-            <VListItem v-bind="listItemProp">
-              <template #prepend>
-                <VAvatar
-                  :image="item.raw.avatar"
-                  size="30"
-                />
-              </template>
-            </VListItem>
-          </template>
-        </AppAutocomplete>
-
-        <h5 class="text-h5 mb-4 mt-6">
-          8 Members
-        </h5>
-
-        <VList class="card-list">
-          <VListItem
-            v-for="member in membersList"
-            :key="member.name"
-          >
-            <template #prepend>
-              <VAvatar :image="member.avatar" />
-            </template>
-
-            <VListItemTitle>
-              {{ member.name }}
-            </VListItemTitle>
-            <VListItemSubtitle>
-              {{ member.email }}
-            </VListItemSubtitle>
-
-            <template #append>
-              <VBtn
-                variant="text"
-                color="secondary"
-                :icon="$vuetify.display.xs"
-              >
-                <span class="d-none d-sm-block me-1">{{ member.permission }}</span>
-                <VIcon icon="tabler-chevron-down" />
-
-                <VMenu activator="parent">
-                  <VList :selected="[member.permission]">
-                    <VListItem
-                      v-for="(item, index) in ['Owner', 'Can Edit', 'Can Comment', 'Can View']"
-                      :key="index"
-                      :value="item"
-                    >
-                      <VListItemTitle>{{ item }}</VListItemTitle>
-                    </VListItem>
-                  </VList>
-                </VMenu>
-              </VBtn>
-            </template>
-          </VListItem>
-        </VList>
-
-        <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-3 mt-6">
-          <h6 class="text-h6 font-weight-medium d-flex align-start">
-            <VIcon
-              icon="tabler-users"
-              class="me-2"
-              size="20"
-            />
-            <div>Public to Vuexy - Pixinvent</div>
-          </h6>
-
-          <VBtn
-            class="text-capitalize"
-            prepend-icon="tabler-link"
-          >
-            Copy Project Link
-          </VBtn>
-        </div>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
-
-<style lang="scss">
-.share-project-dialog {
-  .card-list {
-    --v-card-list-gap: 1rem;
-  }
-}
-</style>
diff --git a/apps/portal/src/components/dialogs/TwoFactorAuthDialog.vue b/apps/portal/src/components/dialogs/TwoFactorAuthDialog.vue
deleted file mode 100644
index caa55090..00000000
--- a/apps/portal/src/components/dialogs/TwoFactorAuthDialog.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script setup lang="ts">
-interface Emit {
-  (e: 'update:isDialogVisible', value: boolean): void
-}
-interface Props {
-  isDialogVisible: boolean
-  smsCode?: string
-  authAppCode?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isDialogVisible: false,
-  smsCode: '',
-  authAppCode: '',
-})
-
-const emit = defineEmits<Emit>()
-
-const authMethods = [
-  {
-    icon: 'tabler-settings',
-    title: 'Authenticator Apps',
-    desc: 'Get code from an app like Google Authenticator or Microsoft Authenticator.',
-    value: 'authApp',
-  },
-  {
-    icon: 'tabler-message',
-    title: 'SMS',
-    desc: 'We will send a code via SMS if you need to use your backup login method.',
-    value: 'sms',
-  },
-]
-
-const selectedMethod = ref('authApp')
-const isAuthAppDialogVisible = ref(false)
-const isSmsDialogVisible = ref(false)
-
-const openSelectedMethodDialog = () => {
-  if (selectedMethod.value === 'authApp') {
-    isAuthAppDialogVisible.value = true
-    isSmsDialogVisible.value = false
-    emit('update:isDialogVisible', false)
-  }
-  if (selectedMethod.value === 'sms') {
-    isAuthAppDialogVisible.value = false
-    isSmsDialogVisible.value = true
-    emit('update:isDialogVisible', false)
-  }
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 800"
-    :model-value="props.isDialogVisible"
-    @update:model-value="(val) => $emit('update:isDialogVisible', val)"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <div class="mb-6">
-          <h4 class="text-h4 text-center mb-2">
-            Select Authentication Method
-          </h4>
-          <p class="text-body-1 text-center mb-6">
-            You also need to select a method by which the proxy authenticates to the directory serve.
-          </p>
-          <CustomRadios
-            v-model:selected-radio="selectedMethod"
-            :radio-content="authMethods"
-            :grid-column="{ cols: '12' }"
-          >
-            <template #default="items">
-              <div class="d-flex flex-column">
-                <div class="d-flex gap-1 mb-2">
-                  <VIcon
-                    :icon="items.item.icon"
-                    size="20"
-                    class="text-high-emphasis"
-                  />
-                  <h6 class="text-h6">
-                    {{ items.item.title }}
-                  </h6>
-                </div>
-                <p class="text-body-2 mb-0">
-                  {{ items.item.desc }}
-                </p>
-              </div>
-            </template>
-          </CustomRadios>
-        </div>
-
-        <div class="d-flex gap-4 justify-center">
-          <VBtn @click="openSelectedMethodDialog">
-            submit
-          </VBtn>
-          <VBtn
-            color="secondary"
-            variant="tonal"
-            @click="$emit('update:isDialogVisible', false)"
-          >
-            Cancel
-          </VBtn>
-        </div>
-      </VCardText>
-    </VCard>
-  </VDialog>
-
-  <AddAuthenticatorAppDialog
-    v-model:is-dialog-visible="isAuthAppDialogVisible"
-    :auth-code="props.authAppCode"
-  />
-  <EnableOneTimePasswordDialog
-    v-model:is-dialog-visible="isSmsDialogVisible"
-    :mobile-number="props.smsCode"
-  />
-</template>
diff --git a/apps/portal/src/components/dialogs/UserInfoEditDialog.vue b/apps/portal/src/components/dialogs/UserInfoEditDialog.vue
deleted file mode 100644
index 27afdda9..00000000
--- a/apps/portal/src/components/dialogs/UserInfoEditDialog.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<script setup lang="ts">
-interface UserData {
-  id: number | null
-  fullName: string
-  company: string
-  username: string
-  role: string
-  country: string
-  contact: string | undefined
-  email: string | undefined
-  currentPlan: string
-  status: string | undefined
-  avatar: string
-  taskDone: number | null
-  projectDone: number | null
-  taxId: string
-  language: string
-}
-
-interface Props {
-  userData?: UserData
-  isDialogVisible: boolean
-}
-
-interface Emit {
-  (e: 'submit', value: UserData): void
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  userData: () => ({
-    id: 0,
-    fullName: '',
-    company: '',
-    role: '',
-    username: '',
-    country: '',
-    contact: '',
-    email: '',
-    currentPlan: '',
-    status: '',
-    avatar: '',
-    taskDone: null,
-    projectDone: null,
-    taxId: '',
-    language: '',
-  }),
-})
-
-const emit = defineEmits<Emit>()
-
-const userData = ref<UserData>(structuredClone(toRaw(props.userData)))
-const isUseAsBillingAddress = ref(false)
-
-watch(() => props, () => {
-  userData.value = structuredClone(toRaw(props.userData))
-})
-
-const onFormSubmit = () => {
-  emit('update:isDialogVisible', false)
-  emit('submit', userData.value)
-}
-
-const onFormReset = () => {
-  userData.value = structuredClone(toRaw(props.userData))
-
-  emit('update:isDialogVisible', false)
-}
-
-const dialogModelValueUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-</script>
-
-<template>
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 900"
-    :model-value="props.isDialogVisible"
-    @update:model-value="dialogModelValueUpdate"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
-
-    <VCard class="pa-sm-10 pa-2">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          Edit User Information
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Updating user details will receive a privacy audit.
-        </p>
-
-        <!-- 👉 Form -->
-        <VForm
-          class="mt-6"
-          @submit.prevent="onFormSubmit"
-        >
-          <VRow>
-            <!-- 👉 First Name -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="userData.fullName.split(' ')[0]"
-                label="First Name"
-                placeholder="John"
-              />
-            </VCol>
-
-            <!-- 👉 Last Name -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="userData.fullName.split(' ')[1]"
-                label="Last Name"
-                placeholder="Doe"
-              />
-            </VCol>
-
-            <!-- 👉 Username -->
-            <VCol cols="12">
-              <AppTextField
-                v-model="userData.username"
-                label="Username"
-                placeholder="john.doe.007"
-              />
-            </VCol>
-
-            <!-- 👉 Billing Email -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="userData.email"
-                label="Email"
-                placeholder="johndoe@email.com"
-              />
-            </VCol>
-
-            <!-- 👉 Status -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppSelect
-                v-model="userData.status"
-                label="Status"
-                placeholder="Active"
-                :items="['Active', 'Inactive', 'Pending']"
-              />
-            </VCol>
-
-            <!-- 👉 Tax Id -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="userData.taxId"
-                label="Tax ID"
-                placeholder="123456789"
-              />
-            </VCol>
-
-            <!-- 👉 Contact -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppTextField
-                v-model="userData.contact"
-                label="Phone Number"
-                placeholder="+1 9876543210"
-              />
-            </VCol>
-
-            <!-- 👉 Language -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppSelect
-                v-model="userData.language"
-                closable-chips
-                chips
-                multiple
-                label="Language"
-                placeholder="English"
-                :items="['English', 'Spanish', 'French']"
-              />
-            </VCol>
-
-            <!-- 👉 Country -->
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <AppSelect
-                v-model="userData.country"
-                label="Country"
-                placeholder="United States"
-                :items="['United States', 'United Kingdom', 'France']"
-              />
-            </VCol>
-
-            <!-- 👉 Switch -->
-            <VCol cols="12">
-              <VSwitch
-                v-model="isUseAsBillingAddress"
-                density="compact"
-                label="Use as a billing address?"
-              />
-            </VCol>
-
-            <!-- 👉 Submit and Cancel -->
-            <VCol
-              cols="12"
-              class="d-flex flex-wrap justify-center gap-4"
-            >
-              <VBtn type="submit">
-                Submit
-              </VBtn>
-
-              <VBtn
-                color="secondary"
-                variant="tonal"
-                @click="onFormReset"
-              >
-                Cancel
-              </VBtn>
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/components/dialogs/UserUpgradePlanDialog.vue b/apps/portal/src/components/dialogs/UserUpgradePlanDialog.vue
deleted file mode 100644
index 0bbcb64c..00000000
--- a/apps/portal/src/components/dialogs/UserUpgradePlanDialog.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-interface Emit {
-  (e: 'update:isDialogVisible', val: boolean): void
-}
-
-interface Prop {
-  isDialogVisible: boolean
-}
-
-const props = defineProps<Prop>()
-
-const emit = defineEmits<Emit>()
-
-const selectedPlan = ref('standard')
-
-const plansList = [
-  { desc: 'Standard - $99/month', title: 'Standard', value: 'standard' },
-  { desc: 'Basic - $0/month', title: 'Basic', value: 'basic' },
-  { desc: 'Enterprise - $499/month', title: 'Enterprise', value: 'enterprice' },
-  { desc: 'Company - $999/month', title: 'Company', value: 'company' },
-]
-
-const isConfirmDialogVisible = ref(false)
-
-const dialogModelValueUpdate = (val: boolean) => {
-  emit('update:isDialogVisible', val)
-}
-</script>
-
-<template>
-  <!-- 👉 upgrade plan -->
-  <VDialog
-    :width="$vuetify.display.smAndDown ? 'auto' : 650"
-    :model-value="props.isDialogVisible"
-    @update:model-value="dialogModelValueUpdate"
-  >
-    <!-- Dialog close btn -->
-    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
-
-    <VCard class="pa-2 pa-sm-10">
-      <VCardText>
-        <!-- 👉 Title -->
-        <h4 class="text-h4 text-center mb-2">
-          Upgrade Plan
-        </h4>
-        <p class="text-body-1 text-center mb-6">
-          Choose the best plan for user.
-        </p>
-
-        <div class="d-flex justify-space-between flex-column flex-sm-row gap-4">
-          <AppSelect
-            v-model="selectedPlan"
-            :items="plansList"
-            label="Choose a plan"
-            placeholder="Basic"
-          />
-          <VBtn
-            class="align-self-end"
-            :block="$vuetify.display.xs"
-          >
-            Upgrade
-          </VBtn>
-        </div>
-
-        <VDivider class="my-6" />
-
-        <p class="text-body-1 mb-1">
-          User current plan is standard plan
-        </p>
-        <div class="d-flex justify-space-between align-center flex-wrap">
-          <div class="d-flex align-center gap-1 me-3">
-            <sup class="text-body-1 text-primary">$</sup>
-            <h1 class="text-h1 text-primary">
-              99
-            </h1>
-            <sub class="text-body-2 mt-5">
-              / month
-            </sub>
-          </div>
-          <VBtn
-            color="error"
-            variant="tonal"
-            @click="isConfirmDialogVisible = true"
-          >
-            Cancel Subscription
-          </VBtn>
-        </div>
-      </VCardText>
-
-      <!-- 👉 Confirm Dialog -->
-      <ConfirmDialog
-        v-model:is-dialog-visible="isConfirmDialogVisible"
-        cancel-title="Cancelled"
-        confirm-title="Unsubscribed!"
-        confirm-msg="Your subscription cancelled successfully."
-        confirmation-question="Are you sure to cancel your subscription?"
-        cancel-msg="Unsubscription Cancelled!!"
-      />
-    </VCard>
-  </VDialog>
-</template>
diff --git a/apps/portal/src/layouts/components/DefaultLayoutWithHorizontalNav.vue b/apps/portal/src/layouts/components/DefaultLayoutWithHorizontalNav.vue
deleted file mode 100644
index 61141e8b..00000000
--- a/apps/portal/src/layouts/components/DefaultLayoutWithHorizontalNav.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import navItems from '@/navigation/horizontal'
-
-import { themeConfig } from '@themeConfig'
-
-// Components
-import Footer from '@/layouts/components/Footer.vue'
-import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
-import UserProfile from '@/layouts/components/UserProfile.vue'
-import NavBarI18n from '@core/components/I18n.vue'
-import { HorizontalNavLayout } from '@layouts'
-import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
-</script>
-
-<template>
-  <HorizontalNavLayout :nav-items="navItems">
-    <!-- 👉 navbar -->
-    <template #navbar>
-      <RouterLink
-        to="/"
-        class="app-logo d-flex align-center gap-x-3"
-      >
-        <VNodeRenderer :nodes="themeConfig.app.logo" />
-
-        <h1 class="app-title font-weight-bold leading-normal text-xl text-capitalize">
-          {{ themeConfig.app.title }}
-        </h1>
-      </RouterLink>
-      <VSpacer />
-
-      <NavBarI18n
-        v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
-        :languages="themeConfig.app.i18n.langConfig"
-      />
-
-      <NavbarThemeSwitcher class="me-2" />
-      <UserProfile />
-    </template>
-
-    <!-- 👉 Pages -->
-    <slot />
-
-    <!-- 👉 Footer -->
-    <template #footer>
-      <Footer />
-    </template>
-
-    <!-- 👉 Customizer -->
-    <!-- <TheCustomizer /> -->
-  </HorizontalNavLayout>
-</template>
diff --git a/apps/portal/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/apps/portal/src/layouts/components/DefaultLayoutWithVerticalNav.vue
deleted file mode 100644
index e4b8d808..00000000
--- a/apps/portal/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import navItems from '@/navigation/vertical'
-import { themeConfig } from '@themeConfig'
-
-// Components
-import Footer from '@/layouts/components/Footer.vue'
-import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
-import UserProfile from '@/layouts/components/UserProfile.vue'
-import NavBarI18n from '@core/components/I18n.vue'
-
-// @layouts plugin
-import { VerticalNavLayout } from '@layouts'
-</script>
-
-<template>
-  <VerticalNavLayout :nav-items="navItems">
-    <!-- 👉 navbar -->
-    <template #navbar="{ toggleVerticalOverlayNavActive }">
-      <div class="d-flex h-100 align-center">
-        <IconBtn
-          id="vertical-nav-toggle-btn"
-          class="ms-n3 d-lg-none"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
-          <VIcon
-            size="26"
-            icon="tabler-menu-2"
-          />
-        </IconBtn>
-
-        <NavbarThemeSwitcher />
-
-        <VSpacer />
-
-        <NavBarI18n
-          v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
-          :languages="themeConfig.app.i18n.langConfig"
-        />
-        <UserProfile />
-      </div>
-    </template>
-
-    <!-- 👉 Pages -->
-    <slot />
-
-    <!-- 👉 Footer -->
-    <template #footer>
-      <Footer />
-    </template>
-
-    <!-- 👉 Customizer -->
-    <!-- <TheCustomizer /> -->
-  </VerticalNavLayout>
-</template>
diff --git a/apps/portal/src/layouts/components/Footer.vue b/apps/portal/src/layouts/components/Footer.vue
deleted file mode 100644
index 3b8f6dbe..00000000
--- a/apps/portal/src/layouts/components/Footer.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="h-100 d-flex align-center justify-md-space-between justify-center">
-    <!-- 👉 Footer: left content -->
-    <span class="d-flex align-center text-medium-emphasis">
-      &copy;
-      {{ new Date().getFullYear() }}
-      Made With
-      <VIcon
-        icon="tabler-heart-filled"
-        color="error"
-        size="1.25rem"
-        class="mx-1"
-      />
-      By <a
-        href="https://pixinvent.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-primary ms-1"
-      >Pixinvent</a>
-    </span>
-    <!-- 👉 Footer: right content -->
-    <span class="d-md-flex gap-x-4 text-primary d-none">
-      <a
-        href="https://themeforest.net/licenses/standard"
-        target="noopener noreferrer"
-      >License</a>
-      <a
-        href="https://1.envato.market/pixinvent_portfolio"
-        target="noopener noreferrer"
-      >More Themes</a>
-      <a
-        href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
-        target="noopener noreferrer"
-      >Documentation</a>
-      <a
-        href="https://pixinvent.ticksy.com/"
-        target="noopener noreferrer"
-      >Support</a>
-    </span>
-  </div>
-</template>
diff --git a/apps/portal/src/layouts/components/NavBarNotifications.vue b/apps/portal/src/layouts/components/NavBarNotifications.vue
deleted file mode 100644
index 0c2faabd..00000000
--- a/apps/portal/src/layouts/components/NavBarNotifications.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-import type { Notification } from '@layouts/types'
-
-import avatar3 from '@images/avatars/avatar-3.png'
-import avatar4 from '@images/avatars/avatar-4.png'
-import avatar5 from '@images/avatars/avatar-5.png'
-import paypal from '@images/cards/paypal-rounded.png'
-
-const notifications = ref<Notification[]>([
-  {
-    id: 1,
-    img: avatar4,
-    title: 'Congratulation Flora! 🎉',
-    subtitle: 'Won the monthly best seller badge',
-    time: 'Today',
-    isSeen: true,
-  },
-  {
-    id: 2,
-    text: 'Tom Holland',
-    title: 'New user registered.',
-    subtitle: '5 hours ago',
-    time: 'Yesterday',
-    isSeen: false,
-  },
-  {
-    id: 3,
-    img: avatar5,
-    title: 'New message received 👋🏻',
-    subtitle: 'You have 10 unread messages',
-    time: '11 Aug',
-    isSeen: true,
-  },
-  {
-    id: 4,
-    img: paypal,
-    title: 'PayPal',
-    subtitle: 'Received Payment',
-    time: '25 May',
-    isSeen: false,
-    color: 'error',
-  },
-  {
-    id: 5,
-    img: avatar3,
-    title: 'Received Order 📦',
-    subtitle: 'New order received from john',
-    time: '19 Mar',
-    isSeen: true,
-  },
-])
-
-const removeNotification = (notificationId: number) => {
-  notifications.value.forEach((item, index) => {
-    if (notificationId === item.id)
-      notifications.value.splice(index, 1)
-  })
-}
-
-const markRead = (notificationId: number[]) => {
-  notifications.value.forEach(item => {
-    notificationId.forEach(id => {
-      if (id === item.id)
-        item.isSeen = true
-    })
-  })
-}
-
-const markUnRead = (notificationId: number[]) => {
-  notifications.value.forEach(item => {
-    notificationId.forEach(id => {
-      if (id === item.id)
-        item.isSeen = false
-    })
-  })
-}
-
-const handleNotificationClick = (notification: Notification) => {
-  if (!notification.isSeen)
-    markRead([notification.id])
-}
-</script>
-
-<template>
-  <Notifications
-    :notifications="notifications"
-    @remove="removeNotification"
-    @read="markRead"
-    @unread="markUnRead"
-    @click:notification="handleNotificationClick"
-  />
-</template>
diff --git a/apps/portal/src/layouts/components/NavSearchBar.vue b/apps/portal/src/layouts/components/NavSearchBar.vue
deleted file mode 100644
index c8a864e3..00000000
--- a/apps/portal/src/layouts/components/NavSearchBar.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup lang="ts">
-import Shepherd from 'shepherd.js'
-import { withQuery } from 'ufo'
-import type { RouteLocationRaw } from 'vue-router'
-import type { SearchResults } from '@db/app-bar-search/types'
-import { useConfigStore } from '@core/stores/config'
-
-interface Suggestion {
-  icon: string
-  title: string
-  url: RouteLocationRaw
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const configStore = useConfigStore()
-
-interface SuggestionGroup {
-  title: string
-  content: Suggestion[]
-}
-
-// 👉 Is App Search Bar Visible
-const isAppSearchBarVisible = ref(false)
-const isLoading = ref(false)
-
-// 👉 Default suggestions
-
-const suggestionGroups: SuggestionGroup[] = [
-  {
-    title: 'Popular Searches',
-    content: [
-      { icon: 'tabler-chart-bar', title: 'Analytics', url: { name: 'dashboards-analytics' } },
-      { icon: 'tabler-chart-donut-3', title: 'CRM', url: { name: 'dashboards-crm' } },
-      { icon: 'tabler-shopping-cart', title: 'eCommerce', url: { name: 'dashboards-ecommerce' } },
-      { icon: 'tabler-truck', title: 'Logistics', url: { name: 'dashboards-logistics' } },
-    ],
-  },
-  {
-    title: 'Apps & Pages',
-    content: [
-      { icon: 'tabler-calendar', title: 'Calendar', url: { name: 'apps-calendar' } },
-      { icon: 'tabler-lock', title: 'Roles & Permissions', url: { name: 'apps-roles' } },
-      { icon: 'tabler-settings', title: 'Account Settings', url: { name: 'pages-account-settings-tab', params: { tab: 'account' } } },
-      { icon: 'tabler-copy', title: 'Dialog Examples', url: { name: 'pages-dialog-examples' } },
-    ],
-  },
-  {
-    title: 'User Interface',
-    content: [
-      { icon: 'tabler-typography', title: 'Typography', url: { name: 'pages-typography' } },
-      { icon: 'tabler-menu-2', title: 'Accordion', url: { name: 'components-expansion-panel' } },
-      { icon: 'tabler-info-triangle', title: 'Alert', url: { name: 'components-alert' } },
-      { icon: 'tabler-checkbox', title: 'Cards', url: { name: 'pages-cards-card-basic' } },
-    ],
-  },
-  {
-    title: 'Forms & Tables',
-    content: [
-      { icon: 'tabler-circle-dot', title: 'Radio', url: { name: 'forms-radio' } },
-      { icon: 'tabler-file-invoice', title: 'Form Layouts', url: { name: 'forms-form-layouts' } },
-      { icon: 'tabler-table', title: 'Table', url: { name: 'tables-data-table' } },
-      { icon: 'tabler-edit', title: 'Editor', url: { name: 'forms-editors' } },
-    ],
-  },
-]
-
-// 👉 No Data suggestion
-const noDataSuggestions: Suggestion[] = [
-  {
-    title: 'Analytics',
-    icon: 'tabler-chart-bar',
-    url: { name: 'dashboards-analytics' },
-  },
-  {
-    title: 'CRM',
-    icon: 'tabler-chart-donut-3',
-    url: { name: 'dashboards-crm' },
-  },
-  {
-    title: 'eCommerce',
-    icon: 'tabler-shopping-cart',
-    url: { name: 'dashboards-ecommerce' },
-  },
-]
-
-const searchQuery = ref('')
-
-const router = useRouter()
-const searchResult = ref<SearchResults[]>([])
-
-const fetchResults = async () => {
-  isLoading.value = true
-
-  const { data } = await useApi<any>(withQuery('/app-bar/search', { q: searchQuery.value }))
-
-  searchResult.value = data.value
-
-  // ℹ️ simulate loading: we have used setTimeout for better user experience your can remove it
-  setTimeout(() => {
-    isLoading.value = false
-  }, 500)
-}
-
-watch(searchQuery, fetchResults)
-
-const closeSearchBar = () => {
-  isAppSearchBarVisible.value = false
-  searchQuery.value = ''
-}
-
-// 👉 redirect the selected page
-const redirectToSuggestedPage = (selected: Suggestion) => {
-  router.push(selected.url as string)
-  closeSearchBar()
-}
-
-const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
-</script>
-
-<template>
-  <div
-    class="d-flex align-center cursor-pointer"
-    v-bind="$attrs"
-    style="user-select: none;"
-    @click="isAppSearchBarVisible = !isAppSearchBarVisible"
-  >
-    <!-- 👉 Search Trigger button -->
-    <!-- close active tour while opening search bar using icon -->
-    <IconBtn @click="Shepherd.activeTour?.cancel()">
-      <VIcon icon="tabler-search" />
-    </IconBtn>
-
-    <span
-      v-if="configStore.appContentLayoutNav === 'vertical'"
-      class="d-none d-md-flex align-center text-disabled ms-2"
-      @click="Shepherd.activeTour?.cancel()"
-    >
-      <span class="me-2">Search</span>
-      <span class="meta-key">&#8984;K</span>
-    </span>
-  </div>
-
-  <!-- 👉 App Bar Search -->
-  <LazyAppBarSearch
-    v-model:is-dialog-visible="isAppSearchBarVisible"
-    :search-results="searchResult"
-    :is-loading="isLoading"
-    @search="searchQuery = $event"
-  >
-    <!-- suggestion -->
-    <template #suggestions>
-      <VCardText class="app-bar-search-suggestions pa-12">
-        <VRow v-if="suggestionGroups">
-          <VCol
-            v-for="suggestion in suggestionGroups"
-            :key="suggestion.title"
-            cols="12"
-            sm="6"
-          >
-            <p
-              class="custom-letter-spacing text-disabled text-uppercase py-2 px-4 mb-0"
-              style="font-size: 0.75rem; line-height: 0.875rem;"
-            >
-              {{ suggestion.title }}
-            </p>
-            <VList class="card-list">
-              <VListItem
-                v-for="item in suggestion.content"
-                :key="item.title"
-                class="app-bar-search-suggestion mx-4 mt-2"
-                @click="redirectToSuggestedPage(item)"
-              >
-                <VListItemTitle>{{ item.title }}</VListItemTitle>
-                <template #prepend>
-                  <VIcon
-                    :icon="item.icon"
-                    size="20"
-                    class="me-n1"
-                  />
-                </template>
-              </VListItem>
-            </VList>
-          </VCol>
-        </VRow>
-      </VCardText>
-    </template>
-
-    <!-- no data suggestion -->
-    <template #noDataSuggestion>
-      <div class="mt-9">
-        <span class="d-flex justify-center text-disabled mb-2">Try searching for</span>
-        <h6
-          v-for="suggestion in noDataSuggestions"
-          :key="suggestion.title"
-          class="app-bar-search-suggestion text-h6 font-weight-regular cursor-pointer py-2 px-4"
-          @click="redirectToSuggestedPage(suggestion)"
-        >
-          <VIcon
-            size="20"
-            :icon="suggestion.icon"
-            class="me-2"
-          />
-          <span>{{ suggestion.title }}</span>
-        </h6>
-      </div>
-    </template>
-
-    <!-- search result -->
-    <template #searchResult="{ item }">
-      <VListSubheader class="text-disabled custom-letter-spacing font-weight-regular ps-4">
-        {{ item.title }}
-      </VListSubheader>
-      <VListItem
-        v-for="list in item.children"
-        :key="list.title"
-        :to="list.url"
-        @click="closeSearchBar"
-      >
-        <template #prepend>
-          <VIcon
-            size="20"
-            :icon="list.icon"
-            class="me-n1"
-          />
-        </template>
-        <template #append>
-          <VIcon
-            size="20"
-            icon="tabler-corner-down-left"
-            class="enter-icon flip-in-rtl"
-          />
-        </template>
-        <VListItemTitle>
-          {{ list.title }}
-        </VListItemTitle>
-      </VListItem>
-    </template>
-  </LazyAppBarSearch>
-</template>
-
-<style lang="scss">
-@use "@styles/variables/vuetify.scss";
-
-.meta-key {
-  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 6px;
-  block-size: 1.5625rem;
-  font-size: 0.8125rem;
-  line-height: 1.3125rem;
-  padding-block: 0.125rem;
-  padding-inline: 0.25rem;
-}
-
-.app-bar-search-dialog {
-  .custom-letter-spacing {
-    letter-spacing: 0.8px;
-  }
-
-  .card-list {
-    --v-card-list-gap: 8px;
-  }
-}
-</style>
diff --git a/apps/portal/src/layouts/components/NavbarShortcuts.vue b/apps/portal/src/layouts/components/NavbarShortcuts.vue
deleted file mode 100644
index 14907319..00000000
--- a/apps/portal/src/layouts/components/NavbarShortcuts.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-const shortcuts = [
-  {
-    icon: 'tabler-calendar',
-    title: 'Calendar',
-    subtitle: 'Appointments',
-    to: { name: 'apps-calendar' },
-  },
-  {
-    icon: 'tabler-file-dollar',
-    title: 'Invoice App',
-    subtitle: 'Manage Accounts',
-    to: { name: 'apps-invoice-list' },
-  },
-  {
-    icon: 'tabler-user',
-    title: 'Users',
-    subtitle: 'Manage Users',
-    to: { name: 'apps-user-list' },
-  },
-  {
-    icon: 'tabler-users',
-    title: 'Role Management',
-    subtitle: 'Permission',
-    to: { name: 'apps-roles' },
-  },
-  {
-    icon: 'tabler-device-desktop-analytics',
-    title: 'Dashboard',
-    subtitle: 'Dashboard Analytics',
-    to: { name: 'dashboards-analytics' },
-  },
-  {
-    icon: 'tabler-settings',
-    title: 'Settings',
-    subtitle: 'Account Settings',
-    to: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
-  },
-
-]
-</script>
-
-<template>
-  <Shortcuts :shortcuts="shortcuts" />
-</template>
diff --git a/apps/portal/src/layouts/components/NavbarThemeSwitcher.vue b/apps/portal/src/layouts/components/NavbarThemeSwitcher.vue
deleted file mode 100644
index bb8519a7..00000000
--- a/apps/portal/src/layouts/components/NavbarThemeSwitcher.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { ThemeSwitcherTheme } from '@layouts/types'
-
-const themes: ThemeSwitcherTheme[] = [
-  {
-    name: 'light',
-    icon: 'tabler-sun-high',
-  },
-  {
-    name: 'dark',
-    icon: 'tabler-moon-stars',
-  },
-  {
-    name: 'system',
-    icon: 'tabler-device-desktop-analytics',
-  },
-]
-</script>
-
-<template>
-  <ThemeSwitcher :themes="themes" />
-</template>
diff --git a/apps/portal/src/layouts/components/UserProfile.vue b/apps/portal/src/layouts/components/UserProfile.vue
deleted file mode 100644
index 6f58f09b..00000000
--- a/apps/portal/src/layouts/components/UserProfile.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import avatar1 from '@images/avatars/avatar-1.png'
-</script>
-
-<template>
-  <VBadge
-    dot
-    location="bottom right"
-    offset-x="3"
-    offset-y="3"
-    bordered
-    color="success"
-  >
-    <VAvatar
-      class="cursor-pointer"
-      color="primary"
-      variant="tonal"
-    >
-      <VImg :src="avatar1" />
-
-      <!-- SECTION Menu -->
-      <VMenu
-        activator="parent"
-        width="230"
-        location="bottom end"
-        offset="14px"
-      >
-        <VList>
-          <!-- 👉 User Avatar & Name -->
-          <VListItem>
-            <template #prepend>
-              <VListItemAction start>
-                <VBadge
-                  dot
-                  location="bottom right"
-                  offset-x="3"
-                  offset-y="3"
-                  color="success"
-                >
-                  <VAvatar
-                    color="primary"
-                    variant="tonal"
-                  >
-                    <VImg :src="avatar1" />
-                  </VAvatar>
-                </VBadge>
-              </VListItemAction>
-            </template>
-
-            <VListItemTitle class="font-weight-semibold">
-              John Doe
-            </VListItemTitle>
-            <VListItemSubtitle>Admin</VListItemSubtitle>
-          </VListItem>
-
-          <VDivider class="my-2" />
-
-          <!-- 👉 Profile -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-user"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Profile</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 Settings -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-settings"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Settings</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 Pricing -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-currency-dollar"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Pricing</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 FAQ -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-help"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>FAQ</VListItemTitle>
-          </VListItem>
-
-          <!-- Divider -->
-          <VDivider class="my-2" />
-
-          <!-- 👉 Logout -->
-          <VListItem to="/login">
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-logout"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Logout</VListItemTitle>
-          </VListItem>
-        </VList>
-      </VMenu>
-      <!-- !SECTION -->
-    </VAvatar>
-  </VBadge>
-</template>
diff --git a/apps/portal/src/layouts/default.vue b/apps/portal/src/layouts/default.vue
index 7873cd87..d594cc42 100644
--- a/apps/portal/src/layouts/default.vue
+++ b/apps/portal/src/layouts/default.vue
@@ -1,56 +1,7 @@
 <script lang="ts" setup>
-import { useConfigStore } from '@core/stores/config'
-import { AppContentLayoutNav } from '@layouts/enums'
-import { switchToVerticalNavOnLtOverlayNavBreakpoint } from '@layouts/utils'
-
-const DefaultLayoutWithHorizontalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithHorizontalNav.vue'))
-const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./components/DefaultLayoutWithVerticalNav.vue'))
-
-const configStore = useConfigStore()
-
-// ℹ️ This will switch to vertical nav when define breakpoint is reached when in horizontal nav layout
-// Remove below composable usage if you are not using horizontal nav layout in your app
-switchToVerticalNavOnLtOverlayNavBreakpoint()
-
-const { layoutAttrs, injectSkinClasses } = useSkins()
-
-injectSkinClasses()
-
-// SECTION: Loading Indicator
-const isFallbackStateActive = ref(false)
-const refLoadingIndicator = ref<any>(null)
-
-// watching if the fallback state is active and the refLoadingIndicator component is available
-watch([isFallbackStateActive, refLoadingIndicator], () => {
-  if (isFallbackStateActive.value && refLoadingIndicator.value)
-    refLoadingIndicator.value.fallbackHandle()
-
-  if (!isFallbackStateActive.value && refLoadingIndicator.value)
-    refLoadingIndicator.value.resolveHandle()
-}, { immediate: true })
-// !SECTION
+import PortalLayout from './portal.vue'
 </script>
 
 <template>
-  <Component
-    v-bind="layoutAttrs"
-    :is="configStore.appContentLayoutNav === AppContentLayoutNav.Vertical ? DefaultLayoutWithVerticalNav : DefaultLayoutWithHorizontalNav"
-  >
-    <AppLoadingIndicator ref="refLoadingIndicator" />
-
-    <RouterView v-slot="{ Component }">
-      <Suspense
-        :timeout="0"
-        @fallback="isFallbackStateActive = true"
-        @resolve="isFallbackStateActive = false"
-      >
-        <Component :is="Component" />
-      </Suspense>
-    </RouterView>
-  </Component>
+  <PortalLayout />
 </template>
-
-<style lang="scss">
-// As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
-</style>
diff --git a/apps/portal/src/layouts/portal.vue b/apps/portal/src/layouts/portal.vue
new file mode 100644
index 00000000..c47f1f83
--- /dev/null
+++ b/apps/portal/src/layouts/portal.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { useAuthStore } from '@/stores/useAuthStore'
+
+const { injectSkinClasses } = useSkins()
+
+injectSkinClasses()
+
+const authStore = useAuthStore()
+
+const isMobileMenuOpen = ref(false)
+
+const navItems = computed(() => {
+  if (!authStore.isAuthenticated) return []
+
+  return [
+    { title: 'Dashboard', to: '/dashboard', icon: 'tabler-dashboard' },
+    { title: 'Mijn Shifts', to: '/shifts', icon: 'tabler-calendar-event' },
+    { title: 'Mijn Profiel', to: '/profile', icon: 'tabler-user' },
+  ]
+})
+
+const isFallbackStateActive = ref(false)
+const refLoadingIndicator = ref<any>(null)
+
+watch([isFallbackStateActive, refLoadingIndicator], () => {
+  if (isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.fallbackHandle()
+
+  if (!isFallbackStateActive.value && refLoadingIndicator.value)
+    refLoadingIndicator.value.resolveHandle()
+}, { immediate: true })
+</script>
+
+<template>
+  <VApp>
+    <AppLoadingIndicator ref="refLoadingIndicator" />
+
+    <VAppBar
+      color="primary"
+      density="comfortable"
+    >
+      <VAppBarNavIcon
+        class="d-sm-none"
+        @click="isMobileMenuOpen = !isMobileMenuOpen"
+      />
+
+      <VAppBarTitle class="text-h6">
+        Crewli Portal
+      </VAppBarTitle>
+
+      <template #append>
+        <div class="d-none d-sm-flex align-center gap-2">
+          <VBtn
+            v-for="item in navItems"
+            :key="item.to"
+            :to="item.to"
+            variant="text"
+            color="white"
+          >
+            <VIcon
+              start
+              :icon="item.icon"
+            />
+            {{ item.title }}
+          </VBtn>
+        </div>
+
+        <VBtn
+          v-if="authStore.isAuthenticated"
+          variant="outlined"
+          color="white"
+          class="ms-2"
+          @click="authStore.logout(); $router.push('/login')"
+        >
+          Uitloggen
+        </VBtn>
+
+        <VBtn
+          v-else
+          variant="outlined"
+          color="white"
+          class="ms-2"
+          to="/login"
+        >
+          Inloggen
+        </VBtn>
+      </template>
+    </VAppBar>
+
+    <!-- Mobile navigation drawer -->
+    <VNavigationDrawer
+      v-model="isMobileMenuOpen"
+      temporary
+      class="d-sm-none"
+    >
+      <VList nav>
+        <VListItem
+          v-for="item in navItems"
+          :key="item.to"
+          :to="item.to"
+          :prepend-icon="item.icon"
+          :title="item.title"
+          @click="isMobileMenuOpen = false"
+        />
+
+        <VDivider class="my-2" />
+
+        <VListItem
+          v-if="authStore.isAuthenticated"
+          prepend-icon="tabler-logout"
+          title="Uitloggen"
+          @click="authStore.logout(); $router.push('/login'); isMobileMenuOpen = false"
+        />
+
+        <VListItem
+          v-else
+          to="/login"
+          prepend-icon="tabler-login"
+          title="Inloggen"
+          @click="isMobileMenuOpen = false"
+        />
+      </VList>
+    </VNavigationDrawer>
+
+    <VMain>
+      <VContainer
+        fluid
+        class="pa-4 pa-sm-6"
+      >
+        <RouterView v-slot="{ Component }">
+          <Suspense
+            :timeout="0"
+            @fallback="isFallbackStateActive = true"
+            @resolve="isFallbackStateActive = false"
+          >
+            <Component :is="Component" />
+          </Suspense>
+        </RouterView>
+      </VContainer>
+    </VMain>
+  </VApp>
+</template>
diff --git a/apps/portal/src/lib/axios.ts b/apps/portal/src/lib/axios.ts
index 6b4397c9..21724c31 100644
--- a/apps/portal/src/lib/axios.ts
+++ b/apps/portal/src/lib/axios.ts
@@ -1,29 +1,23 @@
 import axios from 'axios'
-import { parse } from 'cookie-es'
 import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios'
+import { useAuthStore } from '@/stores/useAuthStore'
 
 const apiClient: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
   headers: {
-    'Content-Type': 'application/json',
     Accept: 'application/json',
+    'Content-Type': 'application/json',
   },
   timeout: 30000,
 })
 
-function getAccessToken(): string | null {
-  if (typeof document === 'undefined') return null
-  const cookies = parse(document.cookie)
-  const token = cookies.accessToken
-
-  return token ?? null
-}
-
 apiClient.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    const token = getAccessToken()
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
+    const authStore = useAuthStore()
+
+    if (authStore.token) {
+      config.headers.Authorization = `Bearer ${authStore.token}`
     }
 
     if (import.meta.env.DEV) {
@@ -52,11 +46,14 @@ apiClient.interceptors.response.use(
     }
 
     if (error.response?.status === 401) {
-      document.cookie = 'accessToken=; path=/; max-age=0'
-      document.cookie = 'userData=; path=/; max-age=0'
-      document.cookie = 'userAbilityRules=; path=/; max-age=0'
-      if (window.location.pathname !== '/login') {
-        window.location.href = '/login'
+      const authStore = useAuthStore()
+
+      if (authStore.isInitialized) {
+        authStore.logout()
+
+        if (typeof window !== 'undefined' && window.location.pathname !== '/login') {
+          window.location.href = '/login'
+        }
       }
     }
 
diff --git a/apps/portal/src/navigation/horizontal/index.ts b/apps/portal/src/navigation/horizontal/index.ts
deleted file mode 100644
index f9dbf433..00000000
--- a/apps/portal/src/navigation/horizontal/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default [
-  {
-    title: 'Home',
-    to: { name: 'root' },
-    icon: { icon: 'tabler-smart-home' },
-  },
-  {
-    title: 'Second page',
-    to: { name: 'second-page' },
-    icon: { icon: 'tabler-file' },
-  },
-]
diff --git a/apps/portal/src/navigation/vertical/index.ts b/apps/portal/src/navigation/vertical/index.ts
deleted file mode 100644
index f9dbf433..00000000
--- a/apps/portal/src/navigation/vertical/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default [
-  {
-    title: 'Home',
-    to: { name: 'root' },
-    icon: { icon: 'tabler-smart-home' },
-  },
-  {
-    title: 'Second page',
-    to: { name: 'second-page' },
-    icon: { icon: 'tabler-file' },
-  },
-]
diff --git a/apps/portal/src/pages/[...error].vue b/apps/portal/src/pages/[...error].vue
deleted file mode 100644
index e5974455..00000000
--- a/apps/portal/src/pages/[...error].vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
-import misc404 from '@images/pages/404.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
-
-const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
-
-definePage({
-  alias: '/pages/misc/not-found/:error(.*)',
-  meta: {
-    layout: 'blank',
-    public: true,
-  },
-})
-</script>
-
-<template>
-  <div class="misc-wrapper">
-    <ErrorHeader
-      status-code="404"
-      title="Page Not Found ⚠️"
-      description="We couldn't find the page you are looking for."
-    />
-
-    <VBtn
-      to="/"
-      class="mb-11"
-    >
-      Back to Home
-    </VBtn>
-
-    <!-- 👉 Image -->
-    <div class="misc-avatar w-100 text-center">
-      <VImg
-        :src="misc404"
-        alt="error 404"
-        :max-height="$vuetify.display.smAndDown ? 350 : 500"
-        class="mx-auto"
-      />
-    </div>
-
-    <img
-      class="misc-footer-img d-none d-md-block"
-      :src="authThemeMask"
-      alt="misc-footer-img"
-      height="320"
-    >
-  </div>
-</template>
-
-<style lang="scss">
-@use "@core/scss/template/pages/misc.scss";
-</style>
diff --git a/apps/portal/src/pages/[...path].vue b/apps/portal/src/pages/[...path].vue
new file mode 100644
index 00000000..6406635b
--- /dev/null
+++ b/apps/portal/src/pages/[...path].vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+definePage({
+  name: 'not-found',
+  meta: {
+    layout: 'blank',
+    requiresAuth: false,
+  },
+})
+</script>
+
+<template>
+  <VApp>
+    <VMain class="d-flex align-center justify-center" style="min-height: 100vh;">
+      <VCard
+        max-width="450"
+        width="100%"
+        class="text-center pa-6 ma-4"
+      >
+        <VCardTitle class="text-h4 mb-2">
+          404
+        </VCardTitle>
+        <VCardSubtitle class="text-h6 mb-4">
+          Pagina niet gevonden
+        </VCardSubtitle>
+        <VCardText>
+          <VBtn
+            color="primary"
+            to="/"
+          >
+            Terug naar home
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VMain>
+  </VApp>
+</template>
diff --git a/apps/portal/src/pages/advance/[token].vue b/apps/portal/src/pages/advance/[token].vue
new file mode 100644
index 00000000..32c7ccef
--- /dev/null
+++ b/apps/portal/src/pages/advance/[token].vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+definePage({
+  name: 'artist-advance',
+  meta: {
+    layout: 'portal',
+    requiresAuth: false,
+    requiresToken: true,
+  },
+})
+
+const route = useRoute('artist-advance')
+const token = computed(() => route.params.token)
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Artist Advance Portal
+        </VCardTitle>
+        <VCardSubtitle>
+          Vul je technische en hospitality riders in
+        </VCardSubtitle>
+        <VCardText class="text-body-1 mt-4">
+          Token: <code>{{ token }}</code>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/pages/dashboard/index.vue b/apps/portal/src/pages/dashboard/index.vue
new file mode 100644
index 00000000..4b7c2d84
--- /dev/null
+++ b/apps/portal/src/pages/dashboard/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePage({
+  name: 'portal-dashboard',
+  meta: {
+    layout: 'portal',
+    requiresAuth: true,
+  },
+})
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Mijn Dashboard
+        </VCardTitle>
+        <VCardSubtitle>
+          Welkom terug! Hier zie je je shifts en informatie.
+        </VCardSubtitle>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/pages/index.vue b/apps/portal/src/pages/index.vue
index b2731858..891817a5 100644
--- a/apps/portal/src/pages/index.vue
+++ b/apps/portal/src/pages/index.vue
@@ -1,25 +1,51 @@
-<template>
-  <div>
-    <VCard
-      class="mb-6"
-      title="Kick start your project 🚀"
-    >
-      <VCardText>All the best for your new project.</VCardText>
-      <VCardText>
-        Please make sure to read our <a
-          href="https://demos.pixinvent.com/vuexy-vuejs-admin-template/documentation/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-decoration-none"
-        >
-          Template Documentation
-        </a> to understand where to go from here and how to use our template.
-      </VCardText>
-    </VCard>
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/useAuthStore'
 
-    <VCard title="Want to integrate JWT? 🔒">
-      <VCardText>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</VCardText>
-      <VCardText>Please read our  JWT Documentation to get more out of JWT authentication.</VCardText>
-    </VCard>
-  </div>
+definePage({
+  name: 'root',
+  meta: {
+    layout: 'portal',
+    requiresAuth: false,
+  },
+})
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+onMounted(async () => {
+  if (!authStore.isInitialized) {
+    await authStore.initialize()
+  }
+
+  if (authStore.isAuthenticated) {
+    router.replace('/dashboard')
+  }
+})
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Crewli Portal
+        </VCardTitle>
+        <VCardSubtitle>
+          Welkom bij het Crewli Portal
+        </VCardSubtitle>
+        <VCardText class="mt-4">
+          <VBtn
+            color="primary"
+            to="/login"
+          >
+            Inloggen
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
 </template>
diff --git a/apps/portal/src/pages/login.vue b/apps/portal/src/pages/login.vue
index b6172ecb..e181af0c 100644
--- a/apps/portal/src/pages/login.vue
+++ b/apps/portal/src/pages/login.vue
@@ -1,185 +1,65 @@
 <script setup lang="ts">
-import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
-import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
-import authV2LoginIllustrationBorderedDark from '@images/pages/auth-v2-login-illustration-bordered-dark.png'
-import authV2LoginIllustrationBorderedLight from '@images/pages/auth-v2-login-illustration-bordered-light.png'
-import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustration-dark.png'
-import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
-import authV2MaskDark from '@images/pages/misc-mask-dark.png'
-import authV2MaskLight from '@images/pages/misc-mask-light.png'
-import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
-import { themeConfig } from '@themeConfig'
-
 definePage({
+  name: 'login',
   meta: {
     layout: 'blank',
-    public: true,
+    requiresAuth: false,
   },
 })
 
 const form = ref({
   email: '',
   password: '',
-  remember: false,
 })
 
 const isPasswordVisible = ref(false)
-
-const authThemeImg = useGenerateImageVariant(
-  authV2LoginIllustrationLight,
-  authV2LoginIllustrationDark,
-  authV2LoginIllustrationBorderedLight,
-  authV2LoginIllustrationBorderedDark,
-  true)
-
-const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
 </script>
 
 <template>
-  <a href="javascript:void(0)">
-    <div class="auth-logo d-flex align-center gap-x-3">
-      <VNodeRenderer :nodes="themeConfig.app.logo" />
-      <h1 class="auth-title">
-        {{ themeConfig.app.title }}
-      </h1>
-    </div>
-  </a>
-
-  <VRow
-    no-gutters
-    class="auth-wrapper bg-surface"
-  >
-    <VCol
-      md="8"
-      class="d-none d-md-flex"
-    >
-      <div class="position-relative bg-background w-100 me-0">
-        <div
-          class="d-flex align-center justify-center w-100 h-100"
-          style="padding-inline: 6.25rem;"
-        >
-          <VImg
-            max-width="613"
-            :src="authThemeImg"
-            class="auth-illustration mt-16 mb-2"
-          />
-        </div>
-
-        <img
-          class="auth-footer-mask flip-in-rtl"
-          :src="authThemeMask"
-          alt="auth-footer-mask"
-          height="280"
-          width="100"
-        >
-      </div>
-    </VCol>
-
-    <VCol
-      cols="12"
-      md="4"
-      class="auth-card-v2 d-flex align-center justify-center"
-    >
+  <VApp>
+    <VMain class="d-flex align-center justify-center" style="min-height: 100vh;">
       <VCard
-        flat
-        :max-width="500"
-        class="mt-12 mt-sm-0 pa-6"
+        max-width="450"
+        width="100%"
+        class="pa-6 ma-4"
       >
+        <VCardTitle class="text-h5 text-center mb-2">
+          Inloggen
+        </VCardTitle>
+        <VCardSubtitle class="text-center mb-6">
+          Log in om je rooster en shifts te bekijken
+        </VCardSubtitle>
+
         <VCardText>
-          <h4 class="text-h4 mb-1">
-            Welcome to <span class="text-capitalize">{{ themeConfig.app.title }}</span>! 👋🏻
-          </h4>
-          <p class="mb-0">
-            Please sign-in to your account and start the adventure
-          </p>
-        </VCardText>
-        <VCardText>
-          <VForm @submit.prevent="() => {}">
-            <VRow>
-              <!-- email -->
-              <VCol cols="12">
-                <AppTextField
-                  v-model="form.email"
-                  autofocus
-                  label="Email or Username"
-                  type="email"
-                  placeholder="johndoe@email.com"
-                />
-              </VCol>
+          <VForm @submit.prevent>
+            <VTextField
+              v-model="form.email"
+              label="E-mailadres"
+              type="email"
+              placeholder="je@email.nl"
+              class="mb-4"
+            />
 
-              <!-- password -->
-              <VCol cols="12">
-                <AppTextField
-                  v-model="form.password"
-                  label="Password"
-                  placeholder="············"
-                  :type="isPasswordVisible ? 'text' : 'password'"
-                  autocomplete="password"
-                  :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
-                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                />
+            <VTextField
+              v-model="form.password"
+              label="Wachtwoord"
+              placeholder="Je wachtwoord"
+              :type="isPasswordVisible ? 'text' : 'password'"
+              :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+              class="mb-6"
+              @click:append-inner="isPasswordVisible = !isPasswordVisible"
+            />
 
-                <div class="d-flex align-center flex-wrap justify-space-between my-6">
-                  <VCheckbox
-                    v-model="form.remember"
-                    label="Remember me"
-                  />
-                  <a
-                    class="text-primary"
-                    href="javascript:void(0)"
-                  >
-                    Forgot Password?
-                  </a>
-                </div>
-
-                <VBtn
-                  block
-                  type="submit"
-                >
-                  Login
-                </VBtn>
-              </VCol>
-
-              <!-- create account -->
-              <VCol
-                cols="12"
-                class="text-body-1 text-center"
-              >
-                <span class="d-inline-block">
-                  New on our platform?
-                </span>
-                <a
-                  class="text-primary ms-1 d-inline-block text-body-1"
-                  href="javascript:void(0)"
-                >
-                  Create an account
-                </a>
-              </VCol>
-
-              <VCol
-                cols="12"
-                class="d-flex align-center"
-              >
-                <VDivider />
-                <span class="mx-4">or</span>
-                <VDivider />
-              </VCol>
-
-              <!-- auth providers -->
-              <VCol
-                cols="12"
-                class="text-center"
-              >
-                <AuthProvider />
-              </VCol>
-            </VRow>
+            <VBtn
+              block
+              type="submit"
+              color="primary"
+            >
+              Inloggen
+            </VBtn>
           </VForm>
         </VCardText>
       </VCard>
-    </VCol>
-  </VRow>
+    </VMain>
+  </VApp>
 </template>
-
-<style lang="scss">
-@use "@core/scss/template/pages/page-auth";
-</style>
diff --git a/apps/portal/src/pages/profile/index.vue b/apps/portal/src/pages/profile/index.vue
new file mode 100644
index 00000000..eb6e7309
--- /dev/null
+++ b/apps/portal/src/pages/profile/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePage({
+  name: 'portal-profile',
+  meta: {
+    layout: 'portal',
+    requiresAuth: true,
+  },
+})
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Mijn Profiel
+        </VCardTitle>
+        <VCardSubtitle>
+          Beheer je persoonlijke gegevens
+        </VCardSubtitle>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
new file mode 100644
index 00000000..2c4d1c64
--- /dev/null
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+definePage({
+  name: 'volunteer-register',
+  meta: {
+    layout: 'portal',
+    requiresAuth: false,
+  },
+})
+
+const route = useRoute('volunteer-register')
+const eventSlug = computed(() => route.params.eventSlug)
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Aanmelden als vrijwilliger
+        </VCardTitle>
+        <VCardSubtitle>
+          Vul het formulier in om je aan te melden
+        </VCardSubtitle>
+        <VCardText class="text-body-1 mt-4">
+          Evenement: <strong>{{ eventSlug }}</strong>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/pages/second-page.vue b/apps/portal/src/pages/second-page.vue
deleted file mode 100644
index 630d8ab7..00000000
--- a/apps/portal/src/pages/second-page.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <VCard title="Create Awesome 🙌">
-      <VCardText>This is your second page.</VCardText>
-      <VCardText>
-        Chocolate sesame snaps pie carrot cake pastry pie lollipop muffin.
-        Carrot cake dragée chupa chups jujubes. Macaroon liquorice cookie
-        wafer tart marzipan bonbon. Gingerbread jelly-o dragée
-        chocolate.
-      </VCardText>
-    </VCard>
-  </div>
-</template>
diff --git a/apps/portal/src/pages/shifts/index.vue b/apps/portal/src/pages/shifts/index.vue
new file mode 100644
index 00000000..f0d03537
--- /dev/null
+++ b/apps/portal/src/pages/shifts/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePage({
+  name: 'portal-shifts',
+  meta: {
+    layout: 'portal',
+    requiresAuth: true,
+  },
+})
+</script>
+
+<template>
+  <VRow justify="center">
+    <VCol
+      cols="12"
+      md="8"
+      lg="6"
+    >
+      <VCard class="text-center pa-6">
+        <VCardTitle class="text-h5">
+          Mijn Shifts
+        </VCardTitle>
+        <VCardSubtitle>
+          Overzicht van je ingeplande shifts
+        </VCardSubtitle>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
diff --git a/apps/portal/src/plugins/1.router/guards.ts b/apps/portal/src/plugins/1.router/guards.ts
new file mode 100644
index 00000000..508232db
--- /dev/null
+++ b/apps/portal/src/plugins/1.router/guards.ts
@@ -0,0 +1,28 @@
+import type { Router } from 'vue-router'
+import { useAuthStore } from '@/stores/useAuthStore'
+
+export function setupGuards(router: Router) {
+  router.beforeEach(async (to) => {
+    const authStore = useAuthStore()
+
+    if (!authStore.isInitialized) {
+      await authStore.initialize()
+    }
+
+    const requiresAuth = to.meta.requiresAuth === true
+
+    // Public routes — no auth check needed
+    if (!requiresAuth) {
+      // Redirect authenticated users away from login
+      if (authStore.isAuthenticated && to.path === '/login') {
+        return { path: '/dashboard' }
+      }
+      return
+    }
+
+    // Auth required — redirect to login if not authenticated
+    if (!authStore.isAuthenticated) {
+      return { path: '/login', query: { to: to.fullPath } }
+    }
+  })
+}
diff --git a/apps/portal/src/plugins/1.router/index.ts b/apps/portal/src/plugins/1.router/index.ts
index 1ec9b89a..0bbceb7a 100644
--- a/apps/portal/src/plugins/1.router/index.ts
+++ b/apps/portal/src/plugins/1.router/index.ts
@@ -4,6 +4,7 @@ import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router/auto'
 
 import { createRouter, createWebHistory } from 'vue-router/auto'
+import { setupGuards } from './guards'
 
 function recursiveLayouts(route: RouteRecordRaw): RouteRecordRaw {
   if (route.children) {
@@ -29,6 +30,8 @@ const router = createRouter({
   ],
 })
 
+setupGuards(router)
+
 export { router }
 
 export default function (app: App) {
diff --git a/apps/portal/src/stores/useAuthStore.ts b/apps/portal/src/stores/useAuthStore.ts
new file mode 100644
index 00000000..ca2aa8f4
--- /dev/null
+++ b/apps/portal/src/stores/useAuthStore.ts
@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+
+interface PortalUser {
+  id: string
+  name: string
+  email: string
+}
+
+const TOKEN_KEY = 'crewli_portal_token'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(localStorage.getItem(TOKEN_KEY))
+  const user = ref<PortalUser | null>(null)
+  const isInitialized = ref(false)
+
+  const isAuthenticated = computed(() => !!token.value && !!user.value)
+
+  function setToken(newToken: string) {
+    token.value = newToken
+    localStorage.setItem(TOKEN_KEY, newToken)
+  }
+
+  function setUser(data: PortalUser) {
+    user.value = data
+  }
+
+  function logout() {
+    token.value = null
+    user.value = null
+    localStorage.removeItem(TOKEN_KEY)
+  }
+
+  let initializePromise: Promise<void> | null = null
+
+  function initialize(): Promise<void> {
+    if (isInitialized.value) return Promise.resolve()
+    if (!initializePromise) {
+      initializePromise = doInitialize()
+    }
+    return initializePromise
+  }
+
+  async function doInitialize(): Promise<void> {
+    if (!token.value) {
+      isInitialized.value = true
+      return
+    }
+
+    try {
+      const { data } = await apiClient.get<{ success: boolean; data: PortalUser }>('/auth/me')
+      setUser(data.data)
+    }
+    catch {
+      logout()
+    }
+    finally {
+      isInitialized.value = true
+    }
+  }
+
+  return {
+    token,
+    user,
+    isAuthenticated,
+    isInitialized,
+    setToken,
+    setUser,
+    logout,
+    initialize,
+  }
+})
diff --git a/apps/portal/src/utils/constants.ts b/apps/portal/src/utils/constants.ts
deleted file mode 100644
index 3bb8adf5..00000000
--- a/apps/portal/src/utils/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const COOKIE_MAX_AGE_1_YEAR = 365 * 24 * 60 * 60
diff --git a/apps/portal/src/views/pages/authentication/AuthProvider.vue b/apps/portal/src/views/pages/authentication/AuthProvider.vue
deleted file mode 100644
index fa8e2ffb..00000000
--- a/apps/portal/src/views/pages/authentication/AuthProvider.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { useTheme } from 'vuetify'
-
-const { global } = useTheme()
-
-const authProviders = [
-  {
-    icon: 'tabler-brand-facebook-filled',
-    color: '#4267b2',
-    colorInDark: '#497CE2',
-  },
-  {
-    icon: 'tabler-brand-twitter-filled',
-    color: '#1da1f2',
-    colorInDark: '#1da1f2',
-  },
-  {
-    icon: 'tabler-brand-github-filled',
-    color: '#272727',
-    colorInDark: '#fff',
-  },
-  {
-    icon: 'tabler-brand-google-filled',
-    color: '#dd4b39',
-    colorInDark: '#db4437',
-  },
-]
-</script>
-
-<template>
-  <div class="d-flex justify-center flex-wrap gap-1">
-    <VBtn
-      v-for="link in authProviders"
-      :key="link.icon"
-      icon
-      variant="text"
-      size="small"
-      :color="global.name.value === 'dark' ? link.colorInDark : link.color"
-    >
-      <VIcon
-        size="20"
-        :icon="link.icon"
-      />
-    </VBtn>
-  </div>
-</template>
diff --git a/apps/portal/themeConfig.ts b/apps/portal/themeConfig.ts
index eadaf1bb..5aa17473 100644
--- a/apps/portal/themeConfig.ts
+++ b/apps/portal/themeConfig.ts
@@ -10,7 +10,7 @@ import { AppContentLayoutNav, ContentWidth, FooterType, NavbarType } from '@layo
 
 export const { themeConfig, layoutConfig } = defineThemeConfig({
   app: {
-    title: 'Portal',
+    title: 'Crewli Portal',
     logo: h('div', { innerHTML: logo, style: 'line-height:0; color: rgb(var(--v-global-theme-primary))' }),
     contentWidth: ContentWidth.Boxed,
     contentLayoutNav: AppContentLayoutNav.Vertical,
@@ -36,7 +36,7 @@ export const { themeConfig, layoutConfig } = defineThemeConfig({
         },
       ],
     },
-    theme: 'system',
+    theme: 'light',
     skin: Skins.Default,
     iconRenderer: VIcon,
   },
diff --git a/apps/portal/tsconfig.json b/apps/portal/tsconfig.json
index ad23e11d..bbb26f24 100644
--- a/apps/portal/tsconfig.json
+++ b/apps/portal/tsconfig.json
@@ -40,12 +40,6 @@
       "@validators": [
         "./src/@core/utils/validators"
       ],
-      "@db/*": [
-        "./src/plugins/fake-api/handlers/*"
-      ],
-      "@api-utils/*": [
-        "./src/plugins/fake-api/utils/*"
-      ]
     },
     "lib": [
       "esnext",
diff --git a/apps/portal/typed-router.d.ts b/apps/portal/typed-router.d.ts
index 651e1eea..a927476f 100644
--- a/apps/portal/typed-router.d.ts
+++ b/apps/portal/typed-router.d.ts
@@ -19,8 +19,12 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
-    '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
+    'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    'artist-advance': RouteRecordInfo<'artist-advance', '/advance/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
+    'portal-dashboard': RouteRecordInfo<'portal-dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
-    'second-page': RouteRecordInfo<'second-page', '/second-page', Record<never, never>, Record<never, never>>,
+    'portal-profile': RouteRecordInfo<'portal-profile', '/profile', Record<never, never>, Record<never, never>>,
+    'volunteer-register': RouteRecordInfo<'volunteer-register', '/register/:eventSlug', { eventSlug: ParamValue<true> }, { eventSlug: ParamValue<false> }>,
+    'portal-shifts': RouteRecordInfo<'portal-shifts', '/shifts', Record<never, never>, Record<never, never>>,
   }
 }
diff --git a/apps/portal/vite.config.ts b/apps/portal/vite.config.ts
index df39a555..6eae2fab 100644
--- a/apps/portal/vite.config.ts
+++ b/apps/portal/vite.config.ts
@@ -50,7 +50,7 @@ export default defineConfig({
 
     // Docs: https://github.com/antfu/unplugin-vue-components#unplugin-vue-components
     Components({
-      dirs: ['src/@core/components', 'src/views/demos', 'src/components'],
+      dirs: ['src/@core/components', 'src/components'],
       dts: true,
       resolvers: [
         componentName => {
@@ -90,8 +90,6 @@ export default defineConfig({
       '@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
       '@styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
       '@configured-variables': fileURLToPath(new URL('./src/assets/styles/variables/_template.scss', import.meta.url)),
-      '@db': fileURLToPath(new URL('./src/plugins/fake-api/handlers/', import.meta.url)),
-      '@api-utils': fileURLToPath(new URL('./src/plugins/fake-api/utils/', import.meta.url)),
     },
   },
   server: {