diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 8f19dcc..0f47205 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -8,6 +8,6 @@ export const routes: Routes = [
   },
   {
     path: "",
-    loadChildren: () => import('./features/auth/auth.routes').then(routes => routes.AuthRoutes)
+    loadChildren: () => import("./features/auth/auth.routes").then((routes) => routes.AuthRoutes),
   },
 ];
diff --git a/src/app/features/auth/auth.routes.ts b/src/app/features/auth/auth.routes.ts
index 878332d..f292c1d 100644
--- a/src/app/features/auth/auth.routes.ts
+++ b/src/app/features/auth/auth.routes.ts
@@ -4,15 +4,16 @@ import { Register } from "./components/register/register";
 
 export const AuthRoutes: Routes = [
   {
-    path: '',
+    path: "",
     children: [
       {
-        path: 'login', component: Login,
-      }
-      ,
+        path: "login",
+        component: Login,
+      },
       {
-        path: "register", component: Register
-      }
-    ]
-  }
+        path: "register",
+        component: Register,
+      },
+    ],
+  },
 ];
diff --git a/src/app/features/auth/components/register/register.html b/src/app/features/auth/components/register/register.html
index 6b0ba2e..3a0e6dd 100644
--- a/src/app/features/auth/components/register/register.html
+++ b/src/app/features/auth/components/register/register.html
@@ -1 +1,46 @@
-<p>register works!</p>
+<section class="my-10 sm:my-30 flex flex-col sm:flex-row space-x-20 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>
+  </article>
+
+  <form 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" placeholder="Jhon Doe" />
+      </fieldset>
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">Mobile Number</legend>
+        <input type="text" class="input" placeholder="+X1 XXXXXXXXXX" />
+      </fieldset>
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">Email</legend>
+        <input type="text" class="input" 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" placeholder="Type here" />
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">Confirm Password</legend>
+        <input type="text" class="input" placeholder="Type here" />
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">City</legend>
+        <input type="text" class="input" 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
+      >
+    </div>
+  </form>
+</section>
diff --git a/src/app/features/auth/components/register/register.spec.ts b/src/app/features/auth/components/register/register.spec.ts
index d5c2d6e..e210d0b 100644
--- a/src/app/features/auth/components/register/register.spec.ts
+++ b/src/app/features/auth/components/register/register.spec.ts
@@ -1,23 +1,22 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { Register } from './register';
+import { Register } from "./register";
 
-describe('Register', () => {
+describe("Register", () => {
   let component: Register;
   let fixture: ComponentFixture<Register>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Register]
-    })
-    .compileComponents();
+      imports: [Register],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(Register);
     component = fixture.componentInstance;
     await fixture.whenStable();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });
diff --git a/src/app/features/auth/components/register/register.ts b/src/app/features/auth/components/register/register.ts
index af6d32b..630e501 100644
--- a/src/app/features/auth/components/register/register.ts
+++ b/src/app/features/auth/components/register/register.ts
@@ -1,11 +1,9 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 @Component({
-  selector: 'app-register',
+  selector: "app-register",
   imports: [],
-  templateUrl: './register.html',
-  styleUrl: './register.css',
+  templateUrl: "./register.html",
+  styleUrl: "./register.css",
 })
-export class Register {
-
-}
+export class Register {}
diff --git a/src/styles.css b/src/styles.css
index b41a67b..bef2447 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -21,7 +21,7 @@ body {
 }
 
 .btn {
-  @apply rounded-full transition-all duration-200 ease-out flex justify-center active:translate-y-[1px];
+  @apply rounded-full transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-[1px];
 }
 
 .btn-ghost {