diff --git a/src/app/features/auth/components/register/register.html b/src/app/features/auth/components/register/register.html
index 60c0aee..83a02af 100644
--- a/src/app/features/auth/components/register/register.html
+++ b/src/app/features/auth/components/register/register.html
@@ -1,45 +1,51 @@
-<section class="my-10 sm:my-30 flex flex-col sm:flex-row space-x-20 justify-center items-center">
+<section class="my-10 md:my-30 flex flex-col md:flex-row space-x-20 space-y-10 justify-center items-center">
   <article class="space-y-6">
     <h1 class="text-3xl text-gray-800 font-space font-bold">Register</h1>
-    <h2 class="text-xl text-gray-600">Sign up with your<br />email address to get started</h2>
+    <h2 class="text-xl text-gray-600">Sign up with your<br/>email address to get started</h2>
+    <div class="text-xs text-red-600 space-y-2">
+      @for (error of errors(); track error) {
+        <p>{{ error }}</p>
+      }
+    </div>
   </article>
 
-  <form [formGroup]="registerForm" (ngSubmit)="registerUser()" class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
+  <form [formGroup]="registerForm" (ngSubmit)="registerUser()"
+        class="card max-w-11/12 sm:max-w-8/12 grid md:grid-cols-2 gap-4">
     <article class="space-y-4">
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Name</legend>
-        <input type="text" class="input" formControlName="name"  placeholder="Jhon Doe" />
+        <input type="text" class="input" formControlName="name" placeholder="Jhon Doe"/>
       </fieldset>
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Mobile Number</legend>
-        <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX" />
+        <input type="text" class="input" formControlName="mobile_number" placeholder="+X1 XXXXXXXXXX"/>
       </fieldset>
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Email</legend>
-        <input type="text" class="input" formControlName="email" placeholder="Enter email here" />
+        <input type="text" class="input" formControlName="email" placeholder="Enter email here"/>
         <p class="label">your-email-address@email.com</p>
       </fieldset>
     </article>
     <article class="space-y-4">
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Password</legend>
-        <input type="password" class="input" formControlName="password" placeholder="Type here" />
+        <input type="password" class="input" formControlName="password" placeholder="Type here"/>
       </fieldset>
 
       <fieldset class="fieldset">
         <legend class="fieldset-legend">Confirm Password</legend>
-        <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here" />
+        <input type="text" class="input" formControlName="password_confirmation" placeholder="Type here"/>
       </fieldset>
 
       <fieldset class="fieldset">
         <legend class="fieldset-legend">City</legend>
-        <input type="text" class="input" formControlName="city" placeholder="Your city name" />
+        <input type="text" class="input" formControlName="city" placeholder="Your city name"/>
       </fieldset>
     </article>
     <div class="flex flex-col col-span-2 gap-y-2">
       <button type="submit" class="btn btn-black py-2 w-full">Register</button>
       <a href="" class="text-xs text-gray-800 text-center w-full block hover:text-teal-600"
-        >Already have an account ? Login</a
+      >Already have an account ? Login</a
       >
     </div>
   </form>
diff --git a/src/app/features/auth/components/register/register.ts b/src/app/features/auth/components/register/register.ts
index d6e4f60..4b14aa6 100644
--- a/src/app/features/auth/components/register/register.ts
+++ b/src/app/features/auth/components/register/register.ts
@@ -1,7 +1,7 @@
-import { Component, inject } from "@angular/core";
-import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { AuthService } from "../../services/auth-service";
-import { RegisterUserRequest } from "../../../../core/models/user.model";
+import {Component, inject, signal} from "@angular/core";
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {AuthService} from "../../services/auth-service";
+import {RegisterUserRequest} from "../../../../core/models/user.model";
 
 @Component({
   selector: "app-register",
@@ -12,19 +12,28 @@ import { RegisterUserRequest } from "../../../../core/models/user.model";
 export class Register {
 
   authService = inject(AuthService);
+  errors = signal<string[]>([]);
 
   registerForm = new FormGroup({
-    name :new FormControl(''),
-    email :new FormControl(''),
-    mobile_number : new FormControl(''),
-    password : new FormControl(''),
-    password_confirmation : new FormControl(''),
-    city : new FormControl(''),
+    name: new FormControl(''),
+    email: new FormControl(''),
+    mobile_number: new FormControl(''),
+    password: new FormControl(''),
+    password_confirmation: new FormControl(''),
+    city: new FormControl(''),
   });
 
   registerUser() {
     this.authService.register(this.registerForm.value as RegisterUserRequest)
-      .subscribe();
+      .subscribe({
+        next: () => console.log('success'),
+        error: (error) => {
+          const errors: Record<number, string[]> = error?.error?.errors || {};
+          const errorMessages :string[] = Object.values(errors).flat();
+          this.errors.set(errorMessages) ;
+        }
+      });
   }
 
+
 }