diff --git a/app.js b/app.js
index 77d2966..9c0d31e 100644
--- a/app.js
+++ b/app.js
@@ -6,7 +6,8 @@ require('dotenv').config();
 
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
-var employeesRouter = require('./routes/employees'); // Renamed
+var employeesRouter = require('./routes/employees'); 
+var loginRouter = require('./routes/login');
 
 var app = express();
 
@@ -23,6 +24,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', indexRouter);
 app.use('/users', usersRouter); // Users route
 app.use('/employees', employeesRouter); // Employees route
+app.use('/login', loginRouter); // Login route
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
diff --git a/login.json b/login.json
new file mode 100644
index 0000000..c6f3f48
--- /dev/null
+++ b/login.json
@@ -0,0 +1,12 @@
+[
+    {
+      "email": "shaun@test.com",
+      "password": "12345678",
+      "access": "Admin"
+    },
+    {
+      "email": "joemfossey@gmail.com",
+      "password": "12345678",
+      "access": "User"
+    }
+  ]
\ No newline at end of file
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index b79728f..3da3a83 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -55,3 +55,34 @@ img {
 }
 
 
+h2 {
+  font: 24px, "Galano Grotessque";
+  color: #252d4F;
+}
+
+
+.logIn {
+  color: #252d4f;
+  font: 16px "Galano Grotessque"; 
+}
+
+.logIn label, .password label{
+  display: block;
+  margin-bottom: 8px;
+}
+
+.password {
+  color: #252d4f;
+  font: 16px "Galano Grotessque"; 
+}
+
+button[type="submit"] {
+  background-color: #1b2db5; 
+  color: white;      
+  margin-top: 8px;    
+  padding: 10px 20px;   
+  border: none; 
+  font: 16px "Galano Grotessque";        
+  cursor: pointer;        
+}
+
diff --git a/routes/login.js b/routes/login.js
new file mode 100644
index 0000000..f0bfaeb
--- /dev/null
+++ b/routes/login.js
@@ -0,0 +1,26 @@
+const express = require('express');
+const router = express.Router();
+const LoginService = require('../services/loginService');
+const loginService = new LoginService();
+
+// Route to read all logins
+router.get('/', (req, res) => {
+    const logins = loginService.getAllLogins();
+    res.render('login', { logins: logins });
+});
+
+// Route to handle login form submission
+router.post('/', (req, res) => {
+    const { email, password } = req.body;
+    const user = loginService.validateLogin(email, password);
+
+    if (user) {
+        res.redirect('./employees');
+    } else {
+        res.redirect('./login');
+    }
+});
+
+module.exports = router;
+
+
diff --git a/services/loginService.js b/services/loginService.js
new file mode 100644
index 0000000..9582c77
--- /dev/null
+++ b/services/loginService.js
@@ -0,0 +1,32 @@
+const fs = require('fs');
+
+class LoginService {
+    constructor() {
+        this.filePath = "login.json";
+    }
+
+    // Helper function to read logins from JSON file
+    readLogins() {
+        try {
+            const data = fs.readFileSync(this.filePath, 'utf8');
+            return JSON.parse(data);
+        } catch (err) {
+            console.error('Error reading logins:', err);
+            return [];
+        }
+    }
+
+    // Get all Logins
+    getAllLogins() {
+        return this.readLogins();
+    }
+
+    validateLogin(email, password) {
+        const logins = this.getAllLogins();
+        return logins.find(login => login.email === email && login.password === password);
+    }
+
+    
+}
+
+module.exports = LoginService;
diff --git a/views/employees.ejs b/views/employees.ejs
index 786b444..664d6f7 100644
--- a/views/employees.ejs
+++ b/views/employees.ejs
@@ -12,7 +12,7 @@
 
 
     <% if (employees && employees.length > 0) { %>
-        <table>
+        <table border="1" cellpadding="10">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -20,7 +20,6 @@
                     <th>Salary</th>
                     <th>Role</th>
                     <th>Employee Number</th>
-                    <th></th>
                 </tr>
             </thead>
             <tbody>
diff --git a/views/index.ejs b/views/index.ejs
index 4d2f850..a892999 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -9,13 +9,14 @@
 
   </head>
   <body>
+    <!-- header -->
     <%- include('./header.ejs') %>
 
     <h1>Kainos Employee App</h1>
     <p>Welcome to The Kainos Employee App</p>
-    <!-- link for the view employees page -->
-    <a href="/employees">
-      View Employees
+    <!-- link for the log in page -->
+    <a href="/login">
+      Log in
     </a>
     </div>
 
diff --git a/views/login.ejs b/views/login.ejs
new file mode 100644
index 0000000..997ea0c
--- /dev/null
+++ b/views/login.ejs
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Login</title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+
+    <!-- link to favicon -->
+    <link rel="icon" href="/stylesheets/images/favicon.webp" type="image/x-icon">
+</head>
+<body>
+    <%- include('./header.ejs') %>
+    <h2>Login Page</h2>
+
+    <form method="POST">
+        <div class="logIn">
+            <label for="email">Email Address</label>
+            <input type="email" id="email" name= "email" placeholder="Enter your email" required>
+        </div>
+
+        <div class="password">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" placeholder="Enter your password" required>
+        </div>
+
+        <button type="submit">Log In</button>
+    </form>
+
+    <%- include('./footer.ejs') %>
+</body>
+</html>
\ No newline at end of file