diff --git a/src/middlewares/validation.middleware.ts b/src/middlewares/validation.middleware.ts
index be592d4c9b39e912d92e2d4010bf652b8b44d7f3..726f9201f1e0e4bd14155c554e7a3c68ca57a611 100644
--- a/src/middlewares/validation.middleware.ts
+++ b/src/middlewares/validation.middleware.ts
@@ -2,6 +2,8 @@ import { NextFunction, Request, Response } from 'express';
 import { AnyZodObject } from 'zod';
 import { IRequestResponseHandler } from '@interfaces/http.interface';
 import { ErrorMiddleware } from '.';
+import { HttpException } from '@exceptions/http.exception';
+import { HttpStatusCode } from '@constants/http.enum';
 
 class ValidationMiddleware {
   public static validate(schema: AnyZodObject) {
@@ -21,10 +23,19 @@ class ValidationMiddleware {
 
   public static exceptionGuard(handler: IRequestResponseHandler) {
     return async (req: Request, res: Response) => {
+      const { email } = req.body;
       try {
         await handler(req, res);
       } catch (error) {
-        ErrorMiddleware.handle(res, error);
+        if (error instanceof HttpException && error.statusCode === HttpStatusCode.Unauthorized) {
+          res.render('login', { 
+            title: "SSO Salman ITB | Login",
+            error: error.message,
+            email: email
+          });
+        } else {
+          ErrorMiddleware.handle(res, error);
+        }
       }
     };
   }
diff --git a/src/services/auth.service.ts b/src/services/auth.service.ts
index 9999e4aa28c5644402c2161398d3f7136a6a9b4b..3543625806a0e7b050eb0d43d2cbd75b851f9af5 100644
--- a/src/services/auth.service.ts
+++ b/src/services/auth.service.ts
@@ -29,7 +29,9 @@ export class AuthService {
     }
 
     return res.render("login", {
-      title: "SSO Server | Login"
+      title: "SSO Salman ITB | Login",
+      error: null,
+      email: null
     });
   }
 
diff --git a/src/views/login.ejs b/src/views/login.ejs
index 7632682dc6d6fbc62ae5653ba311d975c0dd59e5..f94879d7fd765707f45ed34891b18ad270fc3c90 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -52,10 +52,22 @@ input{
   <script src="https://cdn.tailwindcss.com"></script>
   
 </head>
- <body class="text-center w-screen flex items-center justify-center fixed">
-  <div class="bg-white flex flex-col w-fit h-fit min-w-4/6 min-h-4/6 rounded-lg border-2 shadow-lg">
-    <form class="flex flex-col items-center px-20 py-10" method="post">
-      <div class="flex flex-row justify-center item-center pr-2 pt-">
+ <body class="text-center w-screen flex flex-col items-center justify-center fixed">
+  <% if (error) { %>
+    <div class="flex items-center w-[27.5%] p-4 mb-4 text-sm text-red-700 border border-red-300 rounded-lg bg-red-50" role="alert">
+      <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+      </svg>
+      <span class="sr-only">Info</span>
+      <div>
+        <span class="font-medium"><%= error %></span>
+      </div>
+    </div>
+  <% } %>
+
+  <div class="bg-white flex flex-col w-[27.5%] rounded-lg border shadow-lg">
+    <form class="flex flex-col items-center py-10" method="post">
+      <div class="flex flex-row justify-center item-center pr-1 mb-2">
         <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
         width="54.000000pt" height="54pt" viewBox="0 0 154.000000 152.000000"
         preserveAspectRatio="xMidYMid meet">
@@ -74,13 +86,15 @@ input{
           </g>
         </svg>
       </div>
-    <label for="inputEmail" class="sr-only">Email address</label>
-    <input type="email" name="email" id="inputEmail" class="border-2 border my-2 p-2 rounded-lg" placeholder="Email address" required autofocus>
-    <label for="inputPassword" class="sr-only">Password</label>
-    <input type="password" name="password" id="inputPassword" class="border-2 border p-2 my-2 rounded-lg" placeholder="Password" required>
-    <div class="checkbox mb-3">
-    </div>
-    <button class="btn btn-lg btn-primary btn-block border-2 w-fit px-4 py-2 font-mono rounded-lg bg-[#957c54] text-white hover:bg[#000000]" type="submit">Sign in</button>
+      <div class="w-3/5 flex flex-col items-start mb-2">
+        <label for="inputEmail" class="block text-sm font-medium text-gray-700">Email</label>
+        <input type="email" name="email" id="inputEmail" class="w-full border my-2 p-3 rounded-lg text-sm" placeholder="Email Address" value="<%= email %>" required autofocus>
+      </div>
+      <div class="w-3/5 flex flex-col items-start mb-6">
+        <label for="inputPassword" class="block text-sm font-medium text-gray-700">Password</label>
+        <input type="password" name="password" id="inputPassword" class="w-full border my-2 p-3 rounded-lg text-sm" placeholder="••••••••" required>
+      </div>
+      <button class="btn btn-lg btn-primary btn-block border w-fit px-4 py-2 rounded-lg bg-[#957c54] text-white text-sm" type="submit">Sign in</button>
   </form>
 </div>
   </body>