diff --git a/.github/.keep b/.github/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/ex1-login-page/index.html b/ex1-login-page/index.html
index edcd492..b8b8dc3 100644
--- a/ex1-login-page/index.html
+++ b/ex1-login-page/index.html
@@ -1,16 +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>CSS Framework (Tailwind) Exercise 1</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
 
-<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>CSS Framework (Tailwind) Exercise 1</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-</head>
-
-<body>
-  <!-- Start coding here -->
-</body>
-
-</html>
\ No newline at end of file
+  <body class="bg-slate-200 h-screen flex justify-center items-center">
+    <!-- Start coding here -->
+    <div
+      class="box px-[30px] mx-auto flex justify-start items-center flex-col bg-white w-80 rounded-lg p-[30px] border border-gray-300 border-xl"
+    >
+      <div class="head mb-4 self-start">
+        <p class="text-zinc-600 text-xl">Login to Website</p>
+      </div>
+      <div class="email mb-4 flex items-start w-full">
+        <label for="email" class="mr-2">Email:</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          class="w-full h-10 border border-gray-300 rounded px-2 hover:border-violet-300 focus:border-violet-500 focus:outline-none"
+        />
+      </div>
+      <div class="password mb-4 flex items-start w-full">
+        <label for="password" class="mr-2">Password:</label>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          required
+          class="w-full h-10 border border-gray-300 rounded px-2 hover:border-violet-500 focus:border-violet-300 focus:outline-none"
+        />
+      </div>
+      <div class="button flex justify-between">
+        <button
+          class="w-36 px-2 py-2 rounded-full bg-violet-500 text-white focus:outline-none focus:ring-2 focus:ring-violet-300 focus:ring-offset-2 focus:ring-offset-slate-400 active:bg-violet-600 hover:bg-violet-400"
+        >
+          Sign in
+        </button>
+        <button
+          class="w-36 px-2 py-2 rounded-full bg-white text-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-300 focus:ring-offset-2 focus:ring-offset-slate-400 hover:bg-violet-100"
+        >
+          Sign up
+        </button>
+      </div>
+    </div>
+  </body>
+</html>
