diff --git a/src/htmx.v b/src/htmx.v
index 92438fc..ae66a1b 100644
--- a/src/htmx.v
+++ b/src/htmx.v
@@ -19,4 +19,32 @@ fn htmx_get_username(input HTMX) string {
         value="${input.name}"
       />
     </div>'
+}
+
+fn htmx_get_email(input HTMX) string {
+  return '
+    <div class="mb-4"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="email" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Email: <span class="text-red-600 dark:text-red-500 text-sm">${input.message}</span></label>
+      <input type="email" id="email" name="email" placeholder="Enter email" ${input.mark} class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
+        hx-post="/htmx/email"
+        value="${input.name}"
+      />
+    </div>'
+}
+
+fn htmx_get_password(input HTMX) string {
+  return '
+    <div class="mb-4"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="password" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Password: <span class="text-red-600 dark:text-red-500 text-sm">${input.message}</span></label>
+      <input type="password" id="password" name="password" placeholder="Enter password" ${input.mark} class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
+        hx-post="/htmx/password"
+        value="${input.name}"
+      />
+    </div>'
 }
\ No newline at end of file
diff --git a/src/templates/login.html b/src/templates/login.html
index f067482..7bc27ae 100644
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -4,20 +4,33 @@
    <title>Log In</title>
     <!-- Add this line to include the Tailwind CSS library -->
     @css 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css'
+
+    @js 'https://unpkg.com/htmx.org@2.0.0'
  </head>
  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="w-full max-w-md">
      <h1 class="text-3xl mb-6 font-bold text-center text-blue-500">Welcome Back!</h1>
      <form action="/login" method="post">
-       <div class="mb-4">
-         <!-- <label for="email" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Email:</label>
+       <!-- <div class="mb-4">
+         <label for="email" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Email:</label>
          <input type="email" id="email" name="email" placeholder="Enter email address" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/> -->
-         <label for="text" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username:</label>
-         <input type="text" id="email" name="username" placeholder="Enter username" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/>
+       <div class="mb-4"
+        hx-target="this"
+        hx-swap="outerHTML"
+       >
+        <label for="username" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username:</label>
+         <input type="text" id="username" name="username" placeholder="Enter username" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
+          hx-post="/htmx/username"
+         />
        </div>
-       <div class="mb-4">
+       <div class="mb-4"
+        hx-target="this"
+        hx-swap="outerHTML"
+       >
          <label for="password" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Password:</label>
-         <input type="password" id="password" name="password" placeholder="Enter password" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/>
+         <input type="password" id="password" name="password" placeholder="Enter password" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
+          hx-post="/htmx/password"
+         />
        </div>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Log In</button>
      </form>
diff --git a/src/view.v b/src/view.v
index 3eac682..712b6d6 100644
--- a/src/view.v
+++ b/src/view.v
@@ -19,4 +19,34 @@ pub fn (mut app App) htmx_username(username string) vweb.Result{
 		return app.text(htmx_get_username(htmx))
 	}
 	return app.text(htmx_get_username(htmx))
+}
+
+@['/htmx/email'; post]
+pub fn (mut app App) htmx_email(email string) vweb.Result{
+	mut htmx := HTMX{
+		name: email,
+		message: "",
+		mark: ""
+	}
+	if email == '' {
+		htmx.message = "email cannot be empty"
+		htmx.mark = 'style="border: 2px solid #e74c3c;"'
+		return app.text(htmx_get_email(htmx))
+	}
+	return app.text(htmx_get_email(htmx))
+}
+
+@['/htmx/password'; post]
+pub fn (mut app App) htmx_password(password string) vweb.Result{
+	mut htmx := HTMX{
+		name: password,
+		message: "",
+		mark: ""
+	}
+	if password == '' {
+		htmx.message = "password cannot be empty"
+		htmx.mark = 'style="border: 2px solid #e74c3c;"'
+		return app.text(htmx_get_password(htmx))
+	}
+	return app.text(htmx_get_password(htmx))
 }
\ No newline at end of file
