diff --git a/package-lock.json b/package-lock.json
index 8af3152..6996288 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "vue": "^3.4.21",
         "vue-axios": "^3.5.2",
         "vue-chartjs": "^5.3.2",
+        "vue-input-otp": "^0.3.2",
         "vue-markdown": "^2.1.3",
         "vue-router": "^4.3.0",
         "vue-tel-input": "^8.3.1",
@@ -7832,6 +7833,61 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-input-otp": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vue-input-otp/-/vue-input-otp-0.3.2.tgz",
+      "integrity": "sha512-QMl1842WB6uNAsK4+mZXIskb00TOfahH3AQt8rpRecbtQnOp+oHSUbL/Z3wekfy6pAl+hyN3e1rCUSkCMzbDLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^12.8.2",
+        "reka-ui": "^2.6.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-input-otp/node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
+    "node_modules/vue-input-otp/node_modules/@vueuse/core": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
+      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vue-input-otp/node_modules/@vueuse/metadata": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
+      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vue-input-otp/node_modules/@vueuse/shared": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
+      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/vue-markdown": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.1.3.tgz",
diff --git a/package.json b/package.json
index 156e010..8025c54 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "vue": "^3.4.21",
     "vue-axios": "^3.5.2",
     "vue-chartjs": "^5.3.2",
+    "vue-input-otp": "^0.3.2",
     "vue-markdown": "^2.1.3",
     "vue-router": "^4.3.0",
     "vue-tel-input": "^8.3.1",
diff --git a/src/components/VendorNav.vue b/src/components/VendorNav.vue
index ed52b25..1f7bb55 100644
--- a/src/components/VendorNav.vue
+++ b/src/components/VendorNav.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, computed } from 'vue'
 import VendorsIcon from './VendorsIcon.vue'
 // Function to format the date in the desired format (e.g., "Tue, 5 Feb 2023")
 import { useDateFormat, useNow } from '@vueuse/core'
diff --git a/src/components/ui/input-otp/InputOTP.vue b/src/components/ui/input-otp/InputOTP.vue
new file mode 100644
index 0000000..f85e046
--- /dev/null
+++ b/src/components/ui/input-otp/InputOTP.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardPropsEmits } from 'radix-vue'
+import { OTPInput } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>
\ No newline at end of file
diff --git a/src/components/ui/input-otp/InputOTPGroup.vue b/src/components/ui/input-otp/InputOTPGroup.vue
new file mode 100644
index 0000000..569a092
--- /dev/null
+++ b/src/components/ui/input-otp/InputOTPGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from 'radix-vue'
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/ui/input-otp/InputOTPSeparator.vue b/src/components/ui/input-otp/InputOTPSeparator.vue
new file mode 100644
index 0000000..9fb642c
--- /dev/null
+++ b/src/components/ui/input-otp/InputOTPSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { MinusIcon } from "lucide-vue-next"
+import { useForwardProps } from 'radix-vue'
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/ui/input-otp/InputOTPSlot.vue b/src/components/ui/input-otp/InputOTPSlot.vue
new file mode 100644
index 0000000..4118f36
--- /dev/null
+++ b/src/components/ui/input-otp/InputOTPSlot.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from 'radix-vue'
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3', props.class)"
+  >
+    {{ slot?.char }}
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/ui/input-otp/index.ts b/src/components/ui/input-otp/index.ts
new file mode 100644
index 0000000..431134d
--- /dev/null
+++ b/src/components/ui/input-otp/index.ts
@@ -0,0 +1,4 @@
+export { default as InputOTP } from "./InputOTP.vue"
+export { default as InputOTPGroup } from "./InputOTPGroup.vue"
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
+export { default as InputOTPSlot } from "./InputOTPSlot.vue"
\ No newline at end of file
diff --git a/src/components/vendors/VendorShare.vue b/src/components/vendors/VendorShare.vue
index e84afde..02ccef4 100644
--- a/src/components/vendors/VendorShare.vue
+++ b/src/components/vendors/VendorShare.vue
@@ -47,8 +47,7 @@ const props = defineProps<{
 const copied = ref(false);
 const baseLink = 'https://weeshr.com/v';
 const vendorSlug = computed(() => {
-  // return props.vendorName?.toLowerCase().replace(/\s+/g, '-');
-  return JSON.parse(localStorage.getItem('vendor') || 'null').toLowerCase().replace(/\s+/g, '-');
+  return props.vendorName?.toLowerCase().replace(/\s+/g, '-');
 });
 const storeLink = computed(() => {
   return `${baseLink}/${vendorSlug.value}`;
@@ -97,7 +96,7 @@ const handleShare = (option: any) => {
   if (option.action === 'copy') {
     navigator.clipboard.writeText(storeLink.value);
     copied.value = true;
-    console.log(storeLink.value)
+    // console.log(storeLink.value)
     setTimeout(() => {
       copied.value = false;
     }, 2000);
diff --git a/src/components/vendors/vendorDetailCom.vue b/src/components/vendors/vendorDetailCom.vue
index f29d5f2..3f3af05 100644
--- a/src/components/vendors/vendorDetailCom.vue
+++ b/src/components/vendors/vendorDetailCom.vue
@@ -747,6 +747,7 @@ const saveUserData = async () => {
 
       // Check if response status is 200 or 201
       if (response.status === 200 || response.status === 201) {
+        await useSuperAdminStore().fetchUsersData('Success', id)
         // Show success toast
         toast({
           title: 'Success',
diff --git a/src/router/index.ts b/src/router/index.ts
index 6ea6223..225cd3f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -42,6 +42,7 @@ import GlobalGeeftr from '@/views/protected/VendorModule/GlobalGeeftr.vue'
 import VendorRegistration from '@/views/unprotected/VendorModule/VendorRegistration.vue'
 import VendorsDetailsPage from '@/components/vendors/vendorsDetailsPage.vue'
 import VendorPayout from '@/views/protected/AdminModule/VendorPayout.vue'
+import ResetPassword from '@/views/unprotected/SuperAdminModule/ResetPassword.vue'
 
 const routes = [
   // dashboard,
@@ -49,7 +50,7 @@ const routes = [
     path: '/',
     name: 'home',
     component: DashboardWrapper,
-    meta: { requiresAuth: true, dynamic: true  }
+    meta: { requiresAuth: true, dynamic: true }
   },
   {
     path: '/registration',
@@ -63,6 +64,12 @@ const routes = [
     component: SuperAdminLogin,
     meta: { hideSidebar: true }
   },
+  {
+    path: '/reset-password',
+    name: 'reset-password',
+    component: ResetPassword,
+    meta: { hideSidebar: true }
+  },
 
   {
     path: '/error',
@@ -295,16 +302,16 @@ router.beforeEach((to, from, next) => {
   const isAuthenticated = useSuperAdminStore().token !== ''
   // const isVendor = useSuperAdminStore().isVendor
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
- // 🧠 Dynamic dashboard: if user is vendor, switch home component
-//  if (to.name === 'home') {
-//   const record = to.matched[0]
+  // 🧠 Dynamic dashboard: if user is vendor, switch home component
+  //  if (to.name === 'home') {
+  //   const record = to.matched[0]
 
-//   if (record?.components) {
-//     record.components.default = isVendor
-//       ? Vendors
-//       : AdminDashboard
-//   }
-// }
+  //   if (record?.components) {
+  //     record.components.default = isVendor
+  //       ? Vendors
+  //       : AdminDashboard
+  //   }
+  // }
 
 
 
diff --git a/src/stores/super-admin/super-admin.ts b/src/stores/super-admin/super-admin.ts
index 4dbff36..572c098 100644
--- a/src/stores/super-admin/super-admin.ts
+++ b/src/stores/super-admin/super-admin.ts
@@ -118,6 +118,8 @@ export const useSuperAdminStore = defineStore({
         if (response.status === 200 || response.status === 201) {
           // Update the users data with the response
           this.vendor = response.data.data;
+          localStorage.setItem('vendor', JSON.stringify(response.data.data.companyName))
+          this.companyName = response.data.data.companyName;
           // console.log(response.data.data)
           // const responseData = response.data.data[0]
           // const phoneData = response.data.data[0].phoneNumber.normalizedNumber
diff --git a/src/stores/vendor/vendor-list.ts b/src/stores/vendor/vendor-list.ts
index 36d70bb..214734e 100644
--- a/src/stores/vendor/vendor-list.ts
+++ b/src/stores/vendor/vendor-list.ts
@@ -77,8 +77,8 @@ export const useVendorListStore = defineStore({
             page: params?.page || 1,
             limit: params?.limit || 10,
             search: params?.search || '',
+            // status: params?.status || 'all',
             // sortBy: params?.sortBy || 'name',
-            // status: params?.status || 'all'
           }
         })
 
diff --git a/src/views/unprotected/SuperAdminModule/ResetPassword.vue b/src/views/unprotected/SuperAdminModule/ResetPassword.vue
new file mode 100644
index 0000000..70f3b7a
--- /dev/null
+++ b/src/views/unprotected/SuperAdminModule/ResetPassword.vue
@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeMount } from 'vue'
+
+import { Button } from '@/components/ui/button'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Loader2, Ticket, Eye, EyeOff, Mail } from 'lucide-vue-next'
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
+import { toast } from '@/components/ui/toast'
+import axios from '@/services/ApiService'
+import { catchErr } from '@/composables/catchError'
+import { useRouter } from 'vue-router'
+
+// Step constants
+const STEP = {
+  EMAIL: 1,
+  VERIFY_AND_RESET: 2
+}
+
+const showPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+const currentYear = ref(new Date().getFullYear())
+const router = useRouter()
+
+// Step management with sessionStorage
+const currentStep = ref(STEP.EMAIL)
+const userEmail = ref('')
+const otpCode = ref('')
+
+// Create refs to track input values
+const passwordValue = ref('')
+const confirmPasswordValue = ref('')
+
+const loading = ref(false)
+
+// Watch sessionStorage for step changes
+const initializeStep = () => {
+  const savedStep = sessionStorage.getItem('resetPasswordStep')
+  const savedEmail = sessionStorage.getItem('resetPasswordEmail')
+  
+  if (savedStep) {
+    currentStep.value = parseInt(savedStep)
+  }
+  if (savedEmail) {
+    userEmail.value = savedEmail
+  }
+}
+
+const updateSessionStorage = () => {
+  sessionStorage.setItem('resetPasswordStep', currentStep.value.toString())
+  if (userEmail.value) {
+    sessionStorage.setItem('resetPasswordEmail', userEmail.value)
+  }
+}
+
+const updateYear = () => {
+  currentYear.value = new Date().getFullYear()
+}
+
+onMounted(() => {
+  updateYear()
+  setInterval(updateYear, 1000 * 60 * 60 * 24 * 30)
+})
+
+// Email form schema
+const emailFormSchema = toTypedSchema(
+  z.object({
+    email: z
+      .string({
+        required_error: 'Please enter your email'
+      })
+      .email('Invalid email address')
+  })
+)
+
+// Password form schema
+const passwordFormSchema = toTypedSchema(
+  z
+    .object({
+      password: z
+        .string({
+          required_error: 'Please enter your password',
+        })
+        .min(9, 'Password must be at least 9 characters long')
+        .regex(/\d/, 'Password must contain at least one number')
+        .regex(
+          /[!@#$%^&*(),.?":{}|<>]/,
+          'Password must contain at least one symbol'
+        )
+        .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+        .regex(/[a-z]/, 'Password must contain at least one lowercase letter'),
+      confirmPassword: z
+        .string({
+          required_error: 'Please confirm your password'
+        })
+        .min(9)
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+      message: "Passwords don't match",
+      path: ['confirmPassword']
+    })
+)
+
+// Create separate forms for each step
+const emailForm = useForm({
+  validationSchema: emailFormSchema
+})
+
+const passwordForm = useForm({
+  validationSchema: passwordFormSchema
+})
+
+const onPasswordInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  passwordValue.value = target.value
+}
+
+const onConfirmPasswordInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  confirmPasswordValue.value = target.value
+}
+
+// Step 1: Send email with reset link/OTP
+const sendResetEmail = async () => {
+  loading.value = true
+
+  if(!/\S+@\S+\.\S+/.test(userEmail.value)){
+    toast({
+      description: 'Please enter a valid email address',
+      variant: 'destructive'
+    })
+    loading.value = false
+    return
+  }
+
+  try {
+    toast({
+      title: 'Sending Email',
+      description: 'Please wait...',
+      variant: 'loading',
+      duration: 0
+    })
+
+    const response = await axios.post(
+      '/api/v1/market/vendor/user/forgot-password/send-email',
+      {
+        email: userEmail.value
+      }
+    )
+
+    if (response.status === 200 || response.status === 201) {
+      userEmail.value = userEmail.value.trim()
+      currentStep.value = STEP.VERIFY_AND_RESET
+      updateSessionStorage()
+
+      toast({
+        title: 'Success',
+        description: 'OTP sent to your email address',
+        variant: 'success'
+      })
+    }
+  } catch (err: any) {
+    catchErr(err)
+    toast({
+      description: err?.response?.data?.message || err?.message || 'Failed to send email',
+      variant: 'destructive'
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+// Step 2: Verify OTP and Reset Password in one request
+const verifyAndResetPassword = passwordForm.handleSubmit(async (values) => {
+  if (!otpCode.value || otpCode.value.length < 5) {
+    toast({
+      description: 'Please enter a valid OTP (5 characters)',
+      variant: 'destructive'
+    })
+    return
+  }
+
+  loading.value = true
+
+  try {
+    toast({
+      title: 'Resetting Password',
+      description: 'Please wait...',
+      variant: 'loading',
+      duration: 0
+    })
+
+    const response = await axios.post(
+      '/api/v1/market/vendor/user/reset-password',
+      {
+        email: userEmail.value,
+        token: otpCode.value.toString(),
+        newPassword: values.password
+      }
+    )
+
+    if (response.status === 200 || response.status === 201) {
+      toast({
+        title: 'Success',
+        description: 'Password reset successfully!',
+        variant: 'success'
+      })
+
+      // Clear sessionStorage
+      sessionStorage.removeItem('resetPasswordStep')
+      sessionStorage.removeItem('resetPasswordEmail')
+
+      // Reset forms
+      emailForm.resetForm()
+      passwordForm.resetForm()
+      passwordValue.value = ''
+      confirmPasswordValue.value = ''
+      userEmail.value = ''
+      otpCode.value = ''
+
+      // Redirect to login
+      setTimeout(() => {
+        router.push('/login')
+      }, 2000)
+    }
+  } catch (err: any) {
+    catchErr(err)
+    toast({
+      description: err?.response?.data?.message || err?.message || 'Failed to reset password',
+      variant: 'destructive'
+    })
+  } finally {
+    loading.value = false
+  }
+})
+
+// Go back to previous step
+const goBack = () => {
+  if (currentStep.value === STEP.VERIFY_AND_RESET) {
+    currentStep.value = STEP.EMAIL
+    otpCode.value = ''
+    passwordForm.resetForm()
+  }
+  updateSessionStorage()
+}
+
+const fetchVendorsData = async () => {
+  try {
+    // Initialize step from sessionStorage
+    initializeStep()
+  } catch (error: any) {
+    catchErr(error)
+  }
+}
+
+onBeforeMount(() => {
+  fetchVendorsData()
+})
+</script>
+
+<template>
+  <div
+    class="bg-[url('https://res.cloudinary.com/drykej1am/image/upload/v1710591674/kimcfu0uld547xavvpkn.png')] bg-cover relative"
+  >
+    <div
+      class="container flex flex-col items-center justify-center w-full h-screen md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+    >
+      <img
+        class="absolute bottom-0 h-[640px] w-fit absoluteImg"
+        src="https://res.cloudinary.com/drykej1am/image/upload/v1710588213/gljbojydunbpercw3cqx.png"
+        alt="gradient"
+      />
+
+      <div
+        class="relative flex-col hidden h-full p-10 pb-0 text-white bg-center bg-no-repeat bg-cover lg:flex"
+      >
+        <img
+          class="hidden lg:block absolute bottom-0 h-[280px] w-auto transform left-1/2 -translate-x-[50%]"
+          src="https://res.cloudinary.com/drykej1am/image/upload/v1710592164/weeshr_admin/loginPage/cpv0br6dhygp8nyqzyeh.svg"
+          alt="gradient"
+        />
+
+        <div class="inset-0 flex items-center justify-center w-full h-full text-center -left-[20%]">
+          <div
+            aria-current="page"
+            class="flex items-center -translate-y-[145px] flex-col justify-center space-y-2"
+          >
+            <h4 class="text-[#F8F9FFB2] tracking-widest">THE</h4>
+            <img
+              class="w-auto h-24"
+              src="https://res.cloudinary.com/drykej1am/image/upload/v1697377875/weehser%20pay/Weeshr_Light_lrreyo.svg"
+              alt=""
+            />
+            <h4 class="text-[#F8F9FFB2] tracking-widest font-outfit">SUPER ADMIN FACTORY</h4>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-center w-full lg:p-8">
+        <div class="w-full max-w-sm lg:p-8">
+          <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div class="flex flex-col space-y-2 text-center">
+              <div
+                aria-current="page"
+                class="flex lg:hidden justify-center -translate-y-[60px] flex-col space-y-2"
+              >
+                <h4 class="text-[#F8F9FFB2] tracking-widest">THE</h4>
+
+                <img
+                  class="w-auto h-20"
+                  src="https://res.cloudinary.com/drykej1am/image/upload/v1697377875/weehser%20pay/Weeshr_Light_lrreyo.svg"
+                  alt=""
+                />
+                <h4 class="text-[#F8F9FFB2] tracking-widest">SUPER ADMIN FACTORY</h4>
+              </div>
+            </div>
+
+            <Card class="relative py-3 border-0 rounded-2xl bg-[#D9D9D91A]">
+              <img
+                class="absolute w-auto h-20 -top-[40px]"
+                src="https://res.cloudinary.com/drykej1am/image/upload/v1710587777/mksb1isi3h5kihgepmuv.svg"
+                alt=""
+              />
+
+              <img
+                class="absolute w-auto h-16 -bottom-[35px] right-[60px]"
+                src="https://res.cloudinary.com/drykej1am/image/upload/v1710587780/ed8ljwdauwhuge9mjgzr.svg"
+                alt=""
+              />
+
+              <CardHeader class="space-y-1 pt-9">
+                <CardTitle class="text-2xl text-white font-outfit">
+                  {{ currentStep === STEP.EMAIL ? 'Reset Password' : 'Verify OTP & Create Password' }}
+                </CardTitle>
+                <p class="text-xs text-gray-400">
+                  Step {{ currentStep }} of 2
+                </p>
+              </CardHeader>
+              <CardContent class="grid gap-4">
+                <!-- Step 1: Email Input -->
+                <form v-if="currentStep === STEP.EMAIL" class="space-y-4" @submit.prevent="sendResetEmail">
+                  <FormField name="email">
+                    <FormItem>
+                      <FormControl>
+                        <div class="relative">
+                          <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
+                            <Mail class="w-4 h-6 text-[#4145A7]" />
+                          </div>
+                          <Input
+                            id="email"
+                            type="email"
+                            placeholder="Enter your email address"
+                            class="focus-visible:ring-[#BAEF23] pl-10"
+                            v-model="userEmail"
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                </form>
+
+                <!-- Step 2: OTP and Password Input -->
+                <form v-if="currentStep === STEP.VERIFY_AND_RESET" class="space-y-4" @submit.prevent="verifyAndResetPassword">
+                  <div class="space-y-4">
+                    <div>
+                      <p class="text-sm text-gray-300 mb-4">
+                        Enter the OTP sent to <span class="text-[#BAEF23]">{{ userEmail }}</span>
+                      </p>
+                      <div class="flex justify-center mb-6">
+                        <InputOTP
+                          v-model="otpCode"
+                          :maxlength="5"
+                          inputtype="text"
+                          inputmode="text"
+                        >
+                          <InputOTPGroup>
+                            <InputOTPSlot class="text-white" v-for="(_, index) in 5" :key="index" :index="index" />
+                          </InputOTPGroup>
+                        </InputOTP>
+                      </div>
+                    </div>
+
+                    <FormField v-slot="{ componentField }" name="password">
+                      <FormItem>
+                        <FormControl>
+                          <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
+                              <Ticket class="w-4 h-6 text-[#4145A7]" />
+                            </div>
+                            <Input
+                              id="password"
+                              :type="showPassword ? 'text' : 'password'"
+                              placeholder="Your new password"
+                              class="focus-visible:ring-[#BAEF23] pl-10 pr-10"
+                              v-bind="componentField"
+                              @input="onPasswordInput"
+                            />
+                            <button
+                              type="button"
+                              @click="showPassword = !showPassword"
+                              class="absolute inset-y-0 right-2 flex items-center text-gray-400 hover:text-white"
+                            >
+                              <Eye v-if="!showPassword" class="w-5 h-5 text-[#4145A7]" />
+                              <EyeOff v-else class="w-5 h-5 text-[#4145A7]" />
+                            </button>
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </FormField>
+
+                    <FormField v-slot="{ componentField }" name="confirmPassword">
+                      <FormItem>
+                        <FormControl>
+                          <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
+                              <Ticket class="w-4 h-6 text-[#4145A7]" />
+                            </div>
+                            <Input
+                              id="confirmPassword"
+                              :type="showConfirmPassword ? 'text' : 'password'"
+                              placeholder="Confirm password"
+                              class="focus-visible:ring-[#BAEF23] pl-10 pr-10"
+                              v-bind="componentField"
+                              @input="onConfirmPasswordInput"
+                            />
+                            <button
+                              type="button"
+                              @click="showConfirmPassword = !showConfirmPassword"
+                              class="absolute inset-y-0 right-2 flex items-center text-gray-400 hover:text-white"
+                            >
+                              <Eye v-if="!showConfirmPassword" class="w-5 h-5 text-[#4145A7]" />
+                              <EyeOff v-else class="w-5 h-5 text-[#4145A7]" />
+                            </button>
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </FormField>
+                  </div>
+                </form>
+              </CardContent>
+              <CardFooter>
+                <div class="flex flex-col w-full gap-3">
+                  <div class="flex items-center justify-end w-full gap-2">
+                    <!-- Back Button -->
+                    <Button
+                      v-if="currentStep > STEP.EMAIL"
+                      @click="goBack"
+                      type="button"
+                      :disabled="loading"
+                      variant="outline"
+                      class="text-gray-300 hover:text-white border-gray-600 hover:bg-gray-900"
+                    >
+                      Back
+                    </Button>
+
+                    <!-- Submit Button for Step 1 -->
+                    <Button
+                      v-if="currentStep === STEP.EMAIL"
+                      @click="sendResetEmail"
+                      type="submit"
+                      :disabled="loading || !userEmail || !/\S+@\S+\.\S+/.test(userEmail)"
+                      class="w-full bg-[#BAEF23] hover:bg-[#BAEF23] hover:scale-105 text-black font-normal px-8 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                    >
+                      <Loader2 v-if="loading" class="w-4 h-4 mr-2 text-black animate-spin" />
+                      Send OTP
+                    </Button>
+
+                    <!-- Submit Button for Step 2 -->
+                    <Button
+                      v-if="currentStep === STEP.VERIFY_AND_RESET"
+                      @click="verifyAndResetPassword"
+                      type="submit"
+                      :disabled="loading || !otpCode || otpCode.length < 5 || !passwordValue || !confirmPasswordValue || passwordValue !== confirmPasswordValue"
+                      class="w-full bg-[#BAEF23] hover:bg-[#BAEF23] hover:scale-105 text-black font-normal px-8 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                    >
+                      <Loader2 v-if="loading" class="w-4 h-4 mr-2 text-black animate-spin" />
+                      Reset Password
+                    </Button>
+                  </div>
+                  <div class="w-full flex items-center justify-end pt-2">
+                    <router-link :to="`/login`" class="text-right text-sm text-white hover:underline">
+                      Login instead?
+                    </router-link>
+                  </div>
+                  <div class="pt-5 text-xs text-center text-gray-400">
+                    <span> Copyright © {{ currentYear }} </span>
+                  </div>
+                </div>
+              </CardFooter>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.absoluteImg {
+  width: -webkit-fill-available;
+  width: -moz-available;
+}
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/unprotected/SuperAdminModule/SuperAdminLogin.vue b/src/views/unprotected/SuperAdminModule/SuperAdminLogin.vue
index 05eb5e6..7f2d08d 100644
--- a/src/views/unprotected/SuperAdminModule/SuperAdminLogin.vue
+++ b/src/views/unprotected/SuperAdminModule/SuperAdminLogin.vue
@@ -333,6 +333,11 @@ const onSubmit = form.handleSubmit(async () => {
 
                     Sign In
                   </Button>
+                  <div class="w-full flex items-center justify-end pt-2">
+                    <router-link :to="`/reset-password`" class="text-right text-sm text-white hover:underline">
+                      Forgot Password?
+                    </router-link>
+                  </div>
                   <div class="pt-5 text-xs text-center text-gray-400">
                     <span> Copyright © {{ currentYear }} </span>
                   </div>