diff --git a/src/views/index.ejs b/src/views/index.ejs
index 3655c20..04287c1 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -3,51 +3,12 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Page</title>
-    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
-    <link rel="stylesheet" href="../public/css/style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
+    <title>Document</title>
 </head>
 
 <body>
-    <div class="flex justify-center items-center h-screen bg-gray-700">
-        <form action="/login" method="POST">
-            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
-                <h1 class="text-3xl block text-center font-semibold"> Login </h1>
-                <hr class="mt-3">
-                <div class="mt-3">
-                    <label for="email" class="block text-base mb-2">Email</label>
-                    <input type="text" id="email" name="email"
-                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
-                        placeholder="Enter Email" />
-                </div>
-                <div class="mt-3">
-                    <label for="password" class="block text-base mb-2">Password</label>
-                    <input type="password" id="password" name="password"
-                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
-                        placeholder="Enter Password" />
-                </div>
-                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
-                <div class="mt-3 flex justify-between items-center">
-                    <div>
-                        <input type="checkbox">
-                        <label>Remember me</label>
-                    </div>
-                    <div>
-                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
-                    </div>
-                </div>
-                <div class="mt-5">
-                    <button type="submit"
-                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
-                </div>
-            </div>
-        </form>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    The Index page
 </body>
 
 </html>
diff --git a/src/views/login.ejs b/src/views/login.ejs
new file mode 100644
index 0000000..3655c20
--- /dev/null
+++ b/src/views/login.ejs
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="../public/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="flex justify-center items-center h-screen bg-gray-700">
+        <form action="/login" method="POST">
+            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
+                <h1 class="text-3xl block text-center font-semibold"> Login </h1>
+                <hr class="mt-3">
+                <div class="mt-3">
+                    <label for="email" class="block text-base mb-2">Email</label>
+                    <input type="text" id="email" name="email"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Email" />
+                </div>
+                <div class="mt-3">
+                    <label for="password" class="block text-base mb-2">Password</label>
+                    <input type="password" id="password" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                </div>
+                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
+                <div class="mt-3 flex justify-between items-center">
+                    <div>
+                        <input type="checkbox">
+                        <label>Remember me</label>
+                    </div>
+                    <div>
+                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <button type="submit"
+                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</body>
+
+</html>
