diff --git a/agrilink_vocpro/src/app/app.routes.ts b/agrilink_vocpro/src/app/app.routes.ts
index cce54bf..0899796 100644
--- a/agrilink_vocpro/src/app/app.routes.ts
+++ b/agrilink_vocpro/src/app/app.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { LayoutsComponent } from './pages/dashboard/layouts/layouts.component';
 import { GraphComponent } from './pages/dashboard/page/graph/graph.component';
+import { AuthComponent } from './pages/auth/auth.component';
 
 export const routes: Routes = [
     {
@@ -9,6 +10,10 @@ export const routes: Routes = [
         redirectTo:'dashboard',
         pathMatch:'full'
     },
+    {
+        path: 'auth', 
+        component: AuthComponent
+    },
     {
         path: '', 
         component: LayoutsComponent,
diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.html b/agrilink_vocpro/src/app/pages/auth/auth.component.html
new file mode 100644
index 0000000..91ad5d2
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/auth/auth.component.html
@@ -0,0 +1,43 @@
+<div class="container-fluid ps-md-0">
+    <div class="row g-0">
+      <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
+      <div class="col-md-8 col-lg-6">
+        <div class="login d-flex align-items-center py-5">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-9 col-lg-8 mx-auto">
+                <h3 class="login-heading mb-4">Welcome back!</h3>
+  
+                <!-- Sign In Form -->
+                <form>
+                  <div class="form-floating mb-3">
+                    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+                    <label for="floatingInput">Email address</label>
+                  </div>
+                  <div class="form-floating mb-3">
+                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+                    <label for="floatingPassword">Password</label>
+                  </div>
+  
+                  <div class="form-check mb-3">
+                    <input class="form-check-input chechkbox" type="checkbox" value="" id="rememberPasswordCheck">
+                    <label class="form-check-label" for="rememberPasswordCheck">
+                      Remember password
+                    </label>
+                  </div>
+  
+                  <div class="d-grid">
+                    <a class="btn btn-lg color-btn btn-login text-uppercase fw-bold mb-2" routerLink=''>Sign in</a>
+                    <div class="text-center">
+                      <a class="small forgot" href="#">Forgot password?</a>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.scss b/agrilink_vocpro/src/app/pages/auth/auth.component.scss
new file mode 100644
index 0000000..702fd45
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/auth/auth.component.scss
@@ -0,0 +1,29 @@
+.login {
+    min-height: 100vh;
+    font-family: "Poppins", sans-serif;
+}
+
+.bg-image {
+    background-image: url('https://www.verifiedmarketreports.com/images/blogs/05-24/top-7-trends-in-smart-farming.webp');
+    background-size: cover;
+    background-position: left;
+}
+
+.login-heading {
+    font-weight: 300;
+}
+
+.btn-login {
+    font-size: 0.9rem;
+    letter-spacing: 0.05rem;
+    padding: 0.75rem 1rem;
+}
+
+.color-btn{
+    background-color: #16423C;
+    color: white;
+}
+
+.forgot{
+    color: #16423C;
+}
diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.spec.ts b/agrilink_vocpro/src/app/pages/auth/auth.component.spec.ts
new file mode 100644
index 0000000..365dab2
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/auth/auth.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AuthComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.ts b/agrilink_vocpro/src/app/pages/auth/auth.component.ts
new file mode 100644
index 0000000..470ce78
--- /dev/null
+++ b/agrilink_vocpro/src/app/pages/auth/auth.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-auth',
+  standalone: true,
+  imports: [],
+  templateUrl: './auth.component.html',
+  styleUrl: './auth.component.scss'
+})
+export class AuthComponent {
+
+}