diff --git a/components/auth/reset-pass-steps/index.ts b/components/auth/reset-pass-steps/index.ts
new file mode 100644
index 0000000..96cd42a
--- /dev/null
+++ b/components/auth/reset-pass-steps/index.ts
@@ -0,0 +1,3 @@
+export * from './user-email';
+export * from './verify-otp';
+export * from './register-user';
diff --git a/components/auth/reset-pass-steps/register-user.tsx b/components/auth/reset-pass-steps/register-user.tsx
new file mode 100644
index 0000000..d4b0336
--- /dev/null
+++ b/components/auth/reset-pass-steps/register-user.tsx
@@ -0,0 +1,60 @@
+import { AuthInput } from '@/components/ui/auth-input';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { useStepper } from '@/components/ui/stepper';
+import { handlePasswordConfirmation } from '@/lib/api/auth/reset-password';
+import { useEmailStore } from '@/lib/stores/email-store';
+import { useActionState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const RegisterUser = () => {
+  const [state, formAction, isPending] = useActionState(
+    handlePasswordConfirmation,
+    null
+  );
+  const stepper = useStepper();
+  const { email } = useEmailStore();
+
+  useEffect(() => {
+    if (state?.success) {
+      toast.success(state.message);
+      stepper.nextStep();
+    }
+  }, [state, stepper]);
+
+  return stepper.hasCompletedAllSteps ? (
+    <div className="flex flex-col items-center w-full">
+      <h2 className="text-2xl font-bold">Registration Complete</h2>
+      <p className="text-sm text-muted-foreground">
+        You can now log in with your credentials :)
+      </p>
+    </div>
+  ) : (
+    <form action={formAction} className="space-y-4 mx-auto">
+      <AuthInput
+        name="newPassword"
+        label="New Password"
+        type="password"
+        error={state?.errors?.password}
+        defaultValue={state?.inputs?.password}
+        required
+      />
+      <AuthInput
+        name="confirmPassword"
+        label="Confirm Password"
+        type="password"
+        error={state?.errors?.confirmPassword}
+        defaultValue={state?.inputs?.confirmPassword}
+        required
+      />
+      {state?.errors?.general && (
+        <p className="text-sm text-destructive">{state.errors.general}</p>
+      )}
+      <Button type="submit" disabled={isPending} className="w-full">
+        {isPending ? <Spinner className="size-4" /> : 'Finish Signup'}
+      </Button>
+    </form>
+  );
+};
+
+export { RegisterUser };
diff --git a/components/auth/reset-pass-steps/user-email.tsx b/components/auth/reset-pass-steps/user-email.tsx
new file mode 100644
index 0000000..b13e02a
--- /dev/null
+++ b/components/auth/reset-pass-steps/user-email.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { AuthInput } from '@/components/ui/auth-input';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { useStepper } from '@/components/ui/stepper';
+import { handleEmailStep } from '@/lib/api/auth/reset-password';
+import { useEmailStore } from '@/lib/stores/email-store';
+import { useActionState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const UserEmail = () => {
+  const stepper = useStepper();
+  const [state, formAction, isPending] = useActionState(handleEmailStep, null);
+  const { setEmail } = useEmailStore();
+
+  useEffect(() => {
+    if (state?.success) {
+      toast.success(state.message);
+      stepper.nextStep();
+    }
+  }, [state, stepper]);
+
+  return (
+    <form action={formAction} className="space-y-4 mx-auto">
+      <AuthInput
+        name="email"
+        label="Email"
+        type="text"
+        placeholder="Enter your email"
+        error={state?.errors?.email}
+        defaultValue={state?.inputs?.email}
+        required
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      {state?.errors?.general && (
+        <p className="text-sm text-destructive">{state.errors.general}</p>
+      )}
+      <Button type="submit" disabled={isPending} className="w-full">
+        {isPending ? <Spinner className="size-4" /> : 'Send OTP'}
+      </Button>
+    </form>
+  );
+};
+
+export { UserEmail };
diff --git a/components/auth/reset-pass-steps/verify-otp.tsx b/components/auth/reset-pass-steps/verify-otp.tsx
new file mode 100644
index 0000000..42864b9
--- /dev/null
+++ b/components/auth/reset-pass-steps/verify-otp.tsx
@@ -0,0 +1,49 @@
+import React, { useActionState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { handleOtpVerification } from '@/lib/api/auth/reset-password';
+import { useStepper } from '@/components/ui/stepper';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+
+const VerifyOtp = () => {
+  const [state, formAction, isPending] = useActionState(
+    handleOtpVerification,
+    null
+  );
+  const stepper = useStepper();
+
+  useEffect(() => {
+    if (state?.success) {
+      toast.success(state.message);
+      stepper.nextStep();
+    }
+  }, [state, stepper]);
+
+  return (
+    <form action={formAction} className="space-y-4 flex flex-col items-center">
+      <InputOTP defaultValue={state?.inputs?.otp} maxLength={6} name="otp">
+        <InputOTPGroup>
+          {[...Array(6)].map((_, i) => (
+            <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {state?.errors?.otp && (
+        <p className="text-sm text-destructive mt-2">{state.errors.otp}</p>
+      )}
+      {state?.errors?.general && (
+        <p className="text-sm text-destructive">{state.errors.general}</p>
+      )}
+      <Button type="submit" disabled={isPending} className="w-full">
+        {isPending ? <Spinner className="size-4" /> : 'Verify OTP'}
+      </Button>
+    </form>
+  );
+};
+
+export { VerifyOtp };
diff --git a/components/auth/reset-tab.tsx b/components/auth/reset-tab.tsx
index 551c320..e0f3cd2 100644
--- a/components/auth/reset-tab.tsx
+++ b/components/auth/reset-tab.tsx
@@ -1,147 +1,24 @@
 'use client';
 
-import { useActionState } from 'react';
-import { Button } from '@/components/ui/button';
-import { AuthInput } from '@/components/ui/auth-input';
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from '@/components/ui/input-otp';
-import {
-  handleResetPasswordStep,
-  steps,
-  initialState,
-} from '@/lib/api/auth/reset-password';
+import React from 'react';
+import { Stepper, StepperProgress, Step } from '@/components/ui/stepper';
+import { UserEmail, VerifyOtp, RegisterUser } from './reset-pass-steps';
 
-export default function ResetTab() {
-  const [state, formAction] = useActionState(
-    handleResetPasswordStep,
-    initialState
-  );
-  const activeStep = state.errors
-    ? state.step
-    : Math.min(state.step, steps.length);
-
-  const resetSteps = () => window.location.reload();
+const RESET_PASS_STEPS = [
+  { step: 0, Component: UserEmail },
+  { step: 1, Component: VerifyOtp },
+  { step: 2, Component: RegisterUser },
+];
 
+export default function ResetTab() {
   return (
-    <div className="flex flex-col items-center w-full">
-      <div className="h-16 mb-6">
-        <div className="flex justify-between items-center gap-12 relative">
-          {steps.map((step, index) => (
-            <div
-              key={step}
-              className="relative flex items-center justify-center"
-            >
-              <div
-                className={`w-10 h-10 rounded-full flex items-center justify-center border-2 font-semibold transition-all duration-300 ease-in-out transform ${
-                  index === activeStep
-                    ? 'border-primary bg-primary text-white shadow-lg scale-110'
-                    : index < activeStep
-                      ? 'border-primary bg-primary text-white'
-                      : 'border-muted-foreground bg-transparent text-muted-foreground'
-                }`}
-              >
-                {index + 1}
-              </div>
-
-              {index < steps.length - 1 && (
-                <div
-                  className={`absolute left-full top-1/2 w-12 h-1 transform -translate-y-1/2 transition-all duration-300 rounded-md ${
-                    index < activeStep ? 'bg-primary' : 'bg-muted-foreground'
-                  }`}
-                />
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Fixed height container for the form content */}
-      <div className="min-h-[280px] max-w-xs w-full">
-        {activeStep === 0 && (
-          <form action={formAction} className="space-y-4">
-            <AuthInput
-              name="email"
-              label="Email"
-              type="text"
-              error={state.errors?.email?.[0]}
-              required
-            />
-            {state.errors?.general && (
-              <p className="text-sm text-destructive">
-                {state.errors.general[0]}
-              </p>
-            )}
-            <Button type="submit" className="w-full">
-              Send OTP
-            </Button>
-          </form>
-        )}
-
-        {activeStep === 1 && (
-          <form
-            action={formAction}
-            className="space-y-4 flex flex-col items-center"
-          >
-            <InputOTP maxLength={6} name="otp">
-              <InputOTPGroup>
-                {[...Array(6)].map((_, i) => (
-                  <InputOTPSlot key={i} index={i} />
-                ))}
-              </InputOTPGroup>
-            </InputOTP>
-            {state.errors?.otp && (
-              <p className="text-sm text-destructive mt-2">
-                {state.errors.otp[0]}
-              </p>
-            )}
-            {state.errors?.general && (
-              <p className="text-sm text-destructive">
-                {state.errors.general[0]}
-              </p>
-            )}
-            <Button type="submit" className="w-full">
-              Verify OTP
-            </Button>
-          </form>
-        )}
-
-        {activeStep === 2 && (
-          <form action={formAction} className="space-y-4">
-            <AuthInput
-              name="newPassword"
-              label="New Password"
-              type="password"
-              error={state.errors?.newPassword?.[0]}
-              required
-            />
-            <AuthInput
-              name="confirmPassword"
-              label="Confirm Password"
-              type="password"
-              error={state.errors?.confirmPassword?.[0]}
-              required
-            />
-            {state.errors?.general && (
-              <p className="text-sm text-destructive">
-                {state.errors.general[0]}
-              </p>
-            )}
-            <Button type="submit" className="w-full">
-              Reset Password
-            </Button>
-          </form>
-        )}
-
-        {activeStep === steps.length && (
-          <div className="text-center space-y-4">
-            <h2 className="text-sm">Password reset successfully!</h2>
-            <Button onClick={resetSteps}>Reset</Button>
-          </div>
-        )}
-      </div>
-    </div>
+    <Stepper totalSteps={RESET_PASS_STEPS.length}>
+      <StepperProgress />
+      {RESET_PASS_STEPS.map(({ step, Component }) => (
+        <Step key={step} index={step}>
+          <Component />
+        </Step>
+      ))}
+    </Stepper>
   );
 }
diff --git a/lib/api/auth/reset-password/reset-password-action.ts b/lib/api/auth/reset-password/reset-password-action.ts
index e9fab07..f8eced5 100644
--- a/lib/api/auth/reset-password/reset-password-action.ts
+++ b/lib/api/auth/reset-password/reset-password-action.ts
@@ -1,61 +1,169 @@
-import { z } from 'zod';
-import { EmailSchema, OtpSchema, NewPasswordSchema } from '@/lib/schemas/auth';
-export const steps = ['email', 'otp', 'newPassword'] as const;
-export type StepKey = (typeof steps)[number];
+'use server';
 
-export type FormState = {
-  step: number;
-  errors?: Record<string, string[]>;
-};
+import {
+  EmailSchema,
+  NewPasswordSchema,
+  OtpSchema,
+  RegisterUserSchema,
+} from '@/lib/schemas/auth';
+import { z } from 'zod';
+import { createUnauthenticatedAxios } from '@/lib/api/axios';
+import { AxiosError } from 'axios';
 
-export const initialState: FormState = { step: 0 };
+interface ActionResponse {
+  success: boolean;
+  errors?: {
+    email?: string;
+    otp?: string;
+    fullName?: string;
+    username?: string;
+    password?: string;
+    confirmPassword?: string;
+    general?: string;
+  };
+  inputs?: {
+    email?: string;
+    otp?: string;
+    fullName?: string;
+    username?: string;
+    password?: string;
+    confirmPassword?: string;
+  };
+  message: string;
+}
 
-const EXPECTED_OTP = '123456';
+const axiosInstance = createUnauthenticatedAxios();
+axiosInstance.defaults.headers['Content-Type'] = 'multipart/form-data';
 
-// TODO: Implement the logic just like sign-up step
-export async function handleResetPasswordStep(
-  prevState: FormState,
+// Server Actions for each step //
+export async function handleEmailStep(
+  prevState: unknown,
   formData: FormData
-): Promise<FormState> {
-  const step = prevState.step;
-  const formObj = Object.fromEntries(formData.entries());
-
+): Promise<ActionResponse> {
   try {
-    if (step === 0) {
-      EmailSchema.parse(formObj);
-      console.log('Sending OTP to:', formObj.email);
-      return { step: step + 1 };
+    EmailSchema.parse(convertFormDataToRecord(formData));
+    console.log('Sending OTP to:', formData.get('email'));
+    // await axiosInstance.post('/auth/send-otp', {
+    //   email: formData.get('email'),
+    // });
+    return createSuccessResponse('OTP sent successfully');
+  } catch (err) {
+    if (err instanceof z.ZodError) {
+      return handleZodError(err, formData);
+    } else if (err instanceof AxiosError && err.response) {
+      const { data } = err.response;
+      console.log(data);
+      return {
+        success: false,
+        message: 'Failed to send OTP',
+        errors: {
+          general: data.message || 'An error occurred while sending OTP',
+        },
+      };
     }
+    return createErrorResponse('An unexpected error occurred');
+  }
+}
 
-    if (step === 1) {
-      OtpSchema.parse(formObj);
-      const otp = formObj.otp;
-      if (otp !== EXPECTED_OTP) {
-        return {
-          step,
-          errors: { otp: ['Incorrect OTP entered'] },
-        };
-      }
-      return { step: step + 1 };
+export async function handleOtpVerification(
+  prevState: unknown,
+  formData: FormData
+): Promise<ActionResponse> {
+  try {
+    OtpSchema.parse(convertFormDataToRecord(formData));
+    const otp = formData.get('otp');
+    // await axiosInstance.post('/auth/verify-otp', {
+    //   otp,
+    // });
+    return createSuccessResponse('OTP verified successfully');
+  } catch (err) {
+    if (err instanceof z.ZodError) {
+      return handleZodError(err, formData);
+    } else if (err instanceof AxiosError && err.response) {
+      const { data } = err.response;
+      return {
+        success: false,
+        message: 'Failed to verify OTP',
+        errors: {
+          general:
+            data.message || 'Failed to verify OTP, please try again later.',
+        },
+      };
     }
+    return createErrorResponse('An unexpected error occurred');
+  }
+}
 
-    if (step === 2) {
-      NewPasswordSchema.parse(formObj);
-      console.log('Resetting password');
-      return { step: step + 1 };
-    }
-  } catch (err: any) {
+export async function handlePasswordConfirmation(
+  prevState: unknown,
+  formData: FormData
+): Promise<ActionResponse> {
+  try {
+    NewPasswordSchema.parse(convertFormDataToRecord(formData));
+    await axiosInstance.post('/auth/register', {
+      password: formData.get('newPassword'),
+      'ssh-key': '',
+    });
+    return createSuccessResponse('User registered successfully');
+  } catch (err) {
     if (err instanceof z.ZodError) {
-      const errors: Record<string, string[]> = {};
-      for (const issue of err.errors) {
-        const key = issue.path[0] as string;
-        if (!errors[key]) errors[key] = [];
-        errors[key].push(issue.message);
-      }
-      return { step, errors };
+      return handleZodError(err, formData);
+    } else if (err instanceof AxiosError && err.response) {
+      const { data } = err.response;
+      console.log(data);
+      return {
+        success: false,
+        message: 'Failed to create user',
+        errors: {
+          general: data.message,
+        },
+      };
+    }
+    return createErrorResponse('An unexpected error occurred');
+  }
+}
+
+// Utils //
+// TODO: Make a common utils for this
+function convertFormDataToRecord(formData: FormData): Record<string, string> {
+  const record: Record<string, string> = {};
+  for (const [key, value] of formData.entries()) {
+    if (typeof value === 'string') {
+      record[key] = value;
     }
-    return { step, errors: { general: ['Unexpected error'] } };
   }
+  return record;
+}
+
+function handleZodError(err: z.ZodError, formData: FormData): ActionResponse {
+  const errors: Record<string, string> = {};
+  for (const issue of err.errors) {
+    const key = issue.path[0] as string;
+    errors[key] = issue.message;
+  }
+  console.log(errors);
+  return {
+    success: false,
+    errors,
+    inputs: convertFormDataToRecord(formData),
+    message: 'Validation failed',
+  };
+}
+
+function createErrorResponse(
+  message: string,
+  errors?: Record<string, string>
+): ActionResponse {
+  return {
+    success: false,
+    errors: errors || { general: 'Unexpected error' },
+    message,
+  };
+}
 
-  return { step };
+function createSuccessResponse(message: string): ActionResponse {
+  return {
+    success: true,
+    message,
+  };
 }
diff --git a/lib/api/auth/sign-up/sign-up-action.ts b/lib/api/auth/sign-up/sign-up-action.ts
index 5aaab86..f39db46 100644
--- a/lib/api/auth/sign-up/sign-up-action.ts
+++ b/lib/api/auth/sign-up/sign-up-action.ts
@@ -38,9 +38,9 @@ export async function handleEmailStep(
   try {
     EmailSchema.parse(convertFormDataToRecord(formData));
     console.log('Sending OTP to:', formData.get('email'));
-    await axiosInstance.post('/auth/send-otp', {
-      email: formData.get('email'),
-    });
+    // await axiosInstance.post('/auth/send-otp', {
+    //   email: formData.get('email'),
+    // });
     return createSuccessResponse('OTP sent successfully');
   } catch (err) {
     if (err instanceof z.ZodError) {
@@ -67,9 +67,9 @@ export async function handleOtpVerification(
   try {
     OtpSchema.parse(convertFormDataToRecord(formData));
     const otp = formData.get('otp');
-    await axiosInstance.post('/auth/verify-otp', {
-      otp,
-    });
+    // await axiosInstance.post('/auth/verify-otp', {
+    //   otp,
+    // });
     return createSuccessResponse('OTP verified successfully');
   } catch (err) {
     if (err instanceof z.ZodError) {