diff --git a/src/template/src/dtos/user.hbs b/src/template/src/dtos/user.hbs
index c45fea8..ddbcfd2 100644
--- a/src/template/src/dtos/user.hbs
+++ b/src/template/src/dtos/user.hbs
@@ -1,4 +1,4 @@
-use salvo::prelude::ToSchema;
+use salvo::prelude::{ToSchema, Extractible};
 use serde::{Deserialize, Serialize};
 
 #[derive(Deserialize, Debug, ToSchema, Default)]
@@ -13,17 +13,15 @@ pub struct UserLoginRequest {
     pub password: String,
 }
 
-#[derive(Debug, Deserialize, ToSchema, Default)]
+#[derive(Debug, Deserialize,Extractible,ToSchema, Default)]
+#[salvo(extract(default_source(from = "body", format = "json")))]
 pub struct UserUpdateRequest {
+    #[salvo(extract(source(from = "param")))]
     pub id: String,
     pub username: String,
     pub password: String,
 }
 
-#[derive(Debug, Deserialize, ToSchema, Default)]
-pub struct UserDeleteRequest {
-    pub id: String,
-}
 
 #[derive(Debug, Serialize, ToSchema, Default)]
 pub struct UserResponse {
diff --git a/src/template/src/main_template.hbs b/src/template/src/main_template.hbs
index a262acf..fa997b0 100644
--- a/src/template/src/main_template.hbs
+++ b/src/template/src/main_template.hbs
@@ -45,6 +45,11 @@ async fn main() {
                 "swagger-ui: https://{}/swagger-ui",
                 &CFG.server.address.replace("0.0.0.0", "127.0.0.1")
             );
+            {{#if is_web_site}}
+            {{#if need_db_conn}}
+            println!("login page: https://{}/login", &CFG.server.address.replace("0.0.0.0", "127.0.0.1"));
+            {{/if}}
+            {{/if}}
             let config = RustlsConfig::new(
                 Keycert::new()
                     .cert(CERT_KEY.cert.clone())
@@ -68,6 +73,11 @@ async fn main() {
                 "swagger-ui: http://{}/swagger-ui",
                 &CFG.server.address.replace("0.0.0.0", "127.0.0.1")
             );
+            {{#if is_web_site}}
+            {{#if need_db_conn}}
+            println!("login page: http://{}/login", &CFG.server.address.replace("0.0.0.0", "127.0.0.1"));
+            {{/if}}
+            {{/if}}
             let acceptor = TcpListener::new(&CFG.server.address).bind().await;
             let server = Server::new(acceptor).serve_with_graceful_shutdown(
                 service,
diff --git a/src/template/src/middleware/jwt.rs b/src/template/src/middleware/jwt.rs
index 164e650..cac61b0 100644
--- a/src/template/src/middleware/jwt.rs
+++ b/src/template/src/middleware/jwt.rs
@@ -1,5 +1,5 @@
 use anyhow::Result;
-use jsonwebtoken::EncodingKey;
+use jsonwebtoken::{decode, Algorithm, DecodingKey, EncodingKey, Validation};
 use salvo::jwt_auth::{ConstDecoder, CookieFinder, HeaderFinder, QueryFinder};
 use salvo::prelude::*;
 use serde::{Deserialize, Serialize};
@@ -35,10 +35,21 @@ pub fn get_token(username: String, user_id: String) -> Result<(String, i64)> {
         user_id,
         exp: exp.unix_timestamp(),
     };
-    let token = jsonwebtoken::encode(
+    let token: String = jsonwebtoken::encode(
         &jsonwebtoken::Header::default(),
         &claim,
         &EncodingKey::from_secret(CFG.jwt.jwt_secret.as_bytes()),
     )?;
     Ok((token, exp.unix_timestamp()))
 }
+
+#[allow(dead_code)]
+pub fn decode_token(token: &str) -> bool {
+    let validation = Validation::new(Algorithm::HS256);
+    decode::<JwtClaims>(
+        token,
+        &DecodingKey::from_secret(CFG.jwt.jwt_secret.as_bytes()),
+        &validation,
+    )
+    .is_ok()
+}
diff --git a/src/template/src/routers/mod.hbs b/src/template/src/routers/mod.hbs
index 04ae14c..39b1a1c 100644
--- a/src/template/src/routers/mod.hbs
+++ b/src/template/src/routers/mod.hbs
@@ -1,6 +1,6 @@
 {{#if need_db_conn}}
+    {{#if is_web_site}}
 use crate::middleware::jwt::jwt_hoop;
-{{/if}}
 use salvo::{
     prelude::{CatchPanic, Logger, OpenApi, SwaggerUi},
     Router,
@@ -8,54 +8,126 @@ use salvo::{
 
 use self::{
     demo::hello,
-{{#if need_db_conn}}
-{{#if is_web_site}}
     user::{
-        delete_user,login_page, post_add_user, post_login, post_update_user,
+        delete_user, get_users, login_page, post_add_user, post_login, put_update_user,
         user_list_page,
     },
-{{else}}
+};
+pub mod demo;
+pub mod user;
+
+pub fn router() -> Router {
+    let mut no_auth_routers = vec![
+        Router::with_path("login").get(login_page),
+        Router::with_path("/api/login").post(post_login),
+    ];
+
+    let mut need_auth_routers = vec![
+        Router::with_path("users")
+            .get(user_list_page),
+        Router::with_path("/api/users").get(get_users)
+        .post(post_add_user)
+        .push(
+            Router::with_path("<id>")
+                .put(put_update_user)
+                .delete(delete_user),
+        ),
+    ];
+    let router = Router::new()
+        .hoop(Logger::new())
+        .hoop(CatchPanic::new())
+        .get(hello)
+        .append(&mut no_auth_routers)
+        .push(
+            Router::new()
+                .append(&mut need_auth_routers)
+                .hoop(jwt_hoop()),
+        );
+    let doc = OpenApi::new("salvo web api", "0.0.1").merge_router(&router);
+    router
+        .push(doc.into_router("/api-doc/openapi.json"))
+        .push(SwaggerUi::new("/api-doc/openapi.json").into_router("swagger-ui"))
+}
+    {{else}}
+use crate::middleware::jwt::jwt_hoop;
+use salvo::{
+    prelude::{CatchPanic, Logger, OpenApi, SwaggerUi},
+    Router,
+};
+
+use self::{
+    demo::hello,
     user::{
-        delete_user, get_users, post_add_user, post_login, post_update_user,
+        delete_user, get_users, post_add_user, post_login, put_update_user,
     },
-{{/if}}
-{{/if}}
 };
 pub mod demo;
-{{#if need_db_conn}}
 pub mod user;
-{{/if}}
 
 pub fn router() -> Router {
+    let mut no_auth_routers = vec![
+        Router::with_path("/api/login").post(post_login),
+    ];
+
+    let mut need_auth_routers = vec![
+        Router::with_path("/api/users").get(get_users)
+        .post(post_add_user)
+        .push(
+            Router::with_path("<id>")
+                .put(put_update_user)
+                .delete(delete_user),
+        ),
+    ];
     let router = Router::new()
         .hoop(Logger::new())
         .hoop(CatchPanic::new())
-        {{#if need_db_conn}}
         .get(hello)
-        {{#if is_web_site}}
-        .push(Router::with_path("login").get(login_page).post(post_login))
-        {{else}}
-        .push(Router::with_path("login").post(post_login))
-        {{/if}}
-        .push(user_router().hoop(jwt_hoop()));
-        {{else}}
+        .append(&mut no_auth_routers)
+        .push(
+            Router::new()
+                .append(&mut need_auth_routers)
+                .hoop(jwt_hoop()),
+        );
+    let doc = OpenApi::new("salvo web api", "0.0.1").merge_router(&router);
+    router
+        .push(doc.into_router("/api-doc/openapi.json"))
+        .push(SwaggerUi::new("/api-doc/openapi.json").into_router("swagger-ui"))
+}
+    {{/if}}
+{{else}}
+    {{#if is_web_site}}
+use salvo::{
+    prelude::{CatchPanic, Logger, OpenApi, SwaggerUi},
+    Router,
+};
+use self::demo::hello;
+pub mod demo;
+pub fn router() -> Router {
+    let router = Router::new()
+        .hoop(Logger::new())
+        .hoop(CatchPanic::new())
         .get(hello);
-        {{/if}}
     let doc = OpenApi::new("salvo web api", "0.0.1").merge_router(&router);
     router
         .push(doc.into_router("/api-doc/openapi.json"))
         .push(SwaggerUi::new("/api-doc/openapi.json").into_router("swagger-ui"))
 }
-{{#if need_db_conn}}
-pub fn user_router() -> Router {
-    Router::with_path("user")
-        .post(post_add_user)
-        .put(post_update_user)
-        .delete(delete_user)
-        {{#if is_web_site}}
-        .get(user_list_page)
-        {{else}}
-        .get(get_users)
-        {{/if}}
+    {{else}}
+use salvo::{
+    prelude::{CatchPanic, Logger, OpenApi, SwaggerUi},
+    Router,
+};
+use self::demo::hello;
+pub mod demo;
+pub fn router() -> Router {
+    let router = Router::new()
+        .hoop(Logger::new())
+        .hoop(CatchPanic::new())
+        .get(hello);
+    let doc = OpenApi::new("salvo web api", "0.0.1").merge_router(&router);
+    router
+        .push(doc.into_router("/api-doc/openapi.json"))
+        .push(SwaggerUi::new("/api-doc/openapi.json").into_router("swagger-ui"))
 }
+    {{/if}}
 {{/if}}
\ No newline at end of file
diff --git a/src/template/src/routers/user.hbs b/src/template/src/routers/user.hbs
index 8ad1089..4144290 100644
--- a/src/template/src/routers/user.hbs
+++ b/src/template/src/routers/user.hbs
@@ -1,50 +1,57 @@
 {{#if is_web_site}}
-use askama::Template;
-{{/if}}
-{{#if is_web_site}}
-use salvo::{
-    endpoint,
-    http::cookie::Cookie,
-    oapi::extract::{FormBody, JsonBody},
-    writing::{Redirect, Text},
-    Response,
-};
 use crate::{
     app_error::AppResult,
     app_response::{ErrRes, Res},
-    dtos::user::{
-        UserAddRequest, UserDeleteRequest, UserLoginRequest, UserResponse, UserUpdateRequest,
-    },
+    dtos::user::{UserAddRequest, UserLoginRequest, UserLoginResponse, UserUpdateRequest},
+    middleware::jwt::decode_token,
     services::user,
 };
-{{else}}
+use askama::Template;
 use salvo::{
     endpoint,
-    oapi::extract::{FormBody, JsonBody},
-    Response,
-};
-use crate::{
-    app_response::{ErrRes, Res},
-    dtos::user::{
-        UserAddRequest, UserDeleteRequest, UserLoginRequest, UserUpdateRequest,
-    },
-    services::user,
+    http::cookie::Cookie,
+    oapi::extract::{JsonBody, PathParam},
+    writing::{Redirect, Text},
+    Request, Response,
 };
-{{/if}}
-{{#if is_web_site}}
+
 #[derive(Template)]
 #[template(path = "login.html")]
 struct LoginTemplate {}
 
-#[endpoint]
+#[endpoint( tags("comm"),)]
 pub async fn login_page(res: &mut Response) -> AppResult<()> {
+    let cookies = res.cookies();
+    let cookie = cookies.get("jwt_token");
+    if let Some(cookie) = cookie {
+        let token = cookie.value().to_string();
+        if decode_token(&token) {
+            res.render(Redirect::other("/users"));
+            return Ok(());
+        } else {
+        }
+    }
     let hello_tmpl = LoginTemplate {};
     res.render(Text::Html(hello_tmpl.render().unwrap()));
     Ok(())
 }
-{{/if}}
+#[endpoint( tags("comm"),)]
+pub async fn post_login(req: JsonBody<UserLoginRequest>, res: &mut Response) {
+    let result: AppResult<UserLoginResponse> = user::login(req.0).await;
+    match result {
+        Ok(data) => {
+            let jwt_token = data.token.clone();
+            let cookie = Cookie::build("jwt_token", jwt_token)
+                .path("/")
+                .http_only(true)
+                .finish();
+            res.add_cookie(cookie);
+        }
+        Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
+    }
+}
 
-#[endpoint]
+#[endpoint( tags("users"))]
 pub async fn post_add_user(req: JsonBody<UserAddRequest>, res: &mut Response) {
     let result = user::add_user(req.0).await;
     match result {
@@ -53,25 +60,29 @@ pub async fn post_add_user(req: JsonBody<UserAddRequest>, res: &mut Response) {
     }
 }
 
-#[endpoint]
-pub async fn post_update_user(req: JsonBody<UserUpdateRequest>, res: &mut Response) {
-    let result = user::update_user(req.0).await;
+#[endpoint(  tags("users"),
+parameters(
+    ("id", description = "user id"),
+))]
+pub async fn put_update_user(req: &mut Request, res: &mut Response) {
+    let req: UserUpdateRequest = req.extract().await.unwrap();
+    let result = user::update_user(req).await;
     match result {
         Ok(data) => Res::with_data(data).into_response(res),
         Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
     }
 }
 
-#[endpoint]
-pub async fn delete_user(req: JsonBody<UserDeleteRequest>, res: &mut Response) {
-    let result = user::delete_user(req.0).await;
+#[endpoint( tags("users"),)]
+pub async fn delete_user(id: PathParam<String>, res: &mut Response) {
+    let result = user::delete_user(id.0).await;
     match result {
         Ok(_) => Res::with_data(()).into_response(res),
         Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
     }
 }
 
-#[endpoint]
+#[endpoint( tags("users"),)]
 pub async fn get_users(res: &mut Response) {
     let result = user::users().await;
     match result {
@@ -79,26 +90,47 @@ pub async fn get_users(res: &mut Response) {
         Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
     }
 }
-{{#if is_web_site}}
 
 #[derive(Template)]
 #[template(path = "user_list_page.html")]
-pub struct UserListPageTemplate {
-    users: Vec<UserResponse>,
-}
+pub struct UserListPageTemplate {}
 
-#[endpoint]
-pub async fn user_list_page(res: &mut Response) -> AppResult<()> {
-    let users = user::users().await?;
-    let hello_tmpl = UserListPageTemplate { users };
+#[derive(Template)]
+#[template(path = "user_list.html")]
+pub struct UserListTemplate {}
 
-    res.render(Text::Html(hello_tmpl.render().unwrap()));
+#[endpoint]
+pub async fn user_list_page(req: &mut Request, res: &mut Response) -> AppResult<()> {
+    let is_fragment = req.headers().get("X-Fragment-Header");
+    match is_fragment {
+        Some(_) => {
+            let hello_tmpl = UserListTemplate {};
+            res.render(Text::Html(hello_tmpl.render().unwrap()));
+        }
+        None => {
+            let hello_tmpl = UserListPageTemplate {};
+            res.render(Text::Html(hello_tmpl.render().unwrap()));
+        }
+    }
     Ok(())
 }
+{{else}}
+use crate::{
+    app_error::AppResult,
+    app_response::{ErrRes, Res},
+    dtos::user::{UserAddRequest, UserLoginRequest, UserLoginResponse, UserUpdateRequest},
+    services::user,
+};
+use salvo::{
+    endpoint,
+    http::cookie::Cookie,
+    oapi::extract::{JsonBody, PathParam},
+    Request, Response,
+};
 
-#[endpoint]
-pub async fn post_login(req: FormBody<UserLoginRequest>, res: &mut Response) {
-    let result = user::login(req.0).await;
+#[endpoint( tags("comm"),)]
+pub async fn post_login(req: JsonBody<UserLoginRequest>, res: &mut Response) {
+    let result: AppResult<UserLoginResponse> = user::login(req.0).await;
     match result {
         Ok(data) => {
             let jwt_token = data.token.clone();
@@ -107,15 +139,45 @@ pub async fn post_login(req: FormBody<UserLoginRequest>, res: &mut Response) {
                 .http_only(true)
                 .finish();
             res.add_cookie(cookie);
-            res.render(Redirect::other("/user"));
         }
         Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
     }
 }
-{{else}}
-#[endpoint]
-pub async fn post_login(req: FormBody<UserLoginRequest>, res: &mut Response) {
-    let result = user::login(req.0).await;
+
+#[endpoint( tags("users"))]
+pub async fn post_add_user(req: JsonBody<UserAddRequest>, res: &mut Response) {
+    let result = user::add_user(req.0).await;
+    match result {
+        Ok(data) => Res::with_data(data).into_response(res),
+        Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
+    }
+}
+
+#[endpoint(  tags("users"),
+parameters(
+    ("id", description = "user id"),
+))]
+pub async fn put_update_user(req: &mut Request, res: &mut Response) {
+    let req: UserUpdateRequest = req.extract().await.unwrap();
+    let result = user::update_user(req).await;
+    match result {
+        Ok(data) => Res::with_data(data).into_response(res),
+        Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
+    }
+}
+
+#[endpoint( tags("users"),)]
+pub async fn delete_user(id: PathParam<String>, res: &mut Response) {
+    let result = user::delete_user(id.0).await;
+    match result {
+        Ok(_) => Res::with_data(()).into_response(res),
+        Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
+    }
+}
+
+#[endpoint( tags("users"),)]
+pub async fn get_users(res: &mut Response) {
+    let result = user::users().await;
     match result {
         Ok(data) => Res::with_data(data).into_response(res),
         Err(e) => ErrRes::with_err(&e.to_string()).into_response(res),
diff --git a/src/template/src/services/user.hbs b/src/template/src/services/user.hbs
index 9ef7eff..c8f9e22 100644
--- a/src/template/src/services/user.hbs
+++ b/src/template/src/services/user.hbs
@@ -3,7 +3,7 @@ use crate::{
     app_error::AppResult,
     db::DB,
     dtos::user::{
-        UserAddRequest, UserDeleteRequest, UserLoginRequest, UserLoginResponse, UserResponse,
+        UserAddRequest, UserLoginRequest, UserLoginResponse, UserResponse,
         UserUpdateRequest,
     },
     middleware::jwt::get_token,
@@ -16,7 +16,7 @@ use crate::{
     app_error::AppResult,
     db::DB,
     dtos::user::{
-        UserAddRequest, UserDeleteRequest, UserLoginRequest, UserLoginResponse, UserResponse,
+        UserAddRequest, UserLoginRequest, UserLoginResponse, UserResponse,
         UserUpdateRequest,
     },
     middleware::jwt::get_token,
@@ -103,14 +103,14 @@ pub async fn update_user(req: UserUpdateRequest) -> AppResult<UserResponse> {
     })
 }
 
-pub async fn delete_user(req: UserDeleteRequest) -> AppResult<()> {
+pub async fn delete_user(id: String) -> AppResult<()> {
     let db = DB.get().ok_or(anyhow::anyhow!("{{database_connection_failed}}"))?;
     sqlx::query!(
         r#"
             DELETE FROM users
             WHERE id = $1
             "#,
-        req.id,
+        id,
     )
     .execute(db)
     .await?;
@@ -196,9 +196,9 @@ pub async fn update_user(req: UserUpdateRequest) -> AppResult<UserResponse> {
     })
 }
 
-pub async fn delete_user(req: UserDeleteRequest) -> AppResult<()> {
-    let db = DB.get().ok_or(anyhow::anyhow!("{{database_connection_failed}}"))?;
-    User::delete_by_id(req.id, ).exec(db).await?;
+pub async fn delete_user(id: String) -> AppResult<()> {
+    let db = DB.get().ok_or(anyhow::anyhow!("数据库连接失败"))?;
+    User::delete_by_id(id).exec(db).await?;
     Ok(())
 }
 
diff --git a/src/template/templates/login.hbs b/src/template/templates/login.hbs
index 53133a3..cfe249d 100644
--- a/src/template/templates/login.hbs
+++ b/src/template/templates/login.hbs
@@ -7,105 +7,204 @@
     <title>salvo</title>
   </head>
   <body id="body">
-    <div
-      class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
-    >
-      <div class="w-full max-w-md space-y-8">
-        <div>
-          <h2
-            class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"
-          >
-            {{login}}
-          </h2>
-        </div>
-        <form class="mt-8 space-y-6" action="#" method="POST">
-          <input type="hidden" name="remember" value="true" />
-          <div class="-space-y-px rounded-md shadow-sm">
-            <div>
-              <label for="username" class="sr-only">{{username}}</label>
-              <input
-                id="username"
-                name="username"
-                type="text"
-                autocomplete="username"
-                required
-                class="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
-                placeholder="username"
-              />
-            </div>
+    <div x-data="loginForm()">
+      <template x-if="!isLoggedIn">
+        <div
+          class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+        >
+          <div class="w-full max-w-md space-y-8">
             <div>
-              <label for="password" class="sr-only">{{password}}</label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autocomplete="current-password"
-                required
-                class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
-                placeholder="Password"
-              />
+              <h2
+                class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"
+              >
+                login
+              </h2>
             </div>
-          </div>
-          <div>
-            <button
-              hx-post="/login"
-              hx-target-error="error"
-              hx-target="#body"
-              hx-swap="outerHTML"
-              type="submit"
-              class="group relative flex w-full justify-center rounded-md border border-transparent bg-sky-600 py-2 px-4 text-sm font-medium text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
-            >
-              <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                <svg
-                  class="h-5 w-5 text-sky-500 group-hover:text-sky-400"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
-                    clip-rule="evenodd"
+            <form class="mt-8 space-y-6" @submit.prevent="submit">
+              <input type="hidden" name="remember" value="true" />
+              <div class="-space-y-px rounded-md shadow-sm">
+                <div>
+                  <label for="username" class="sr-only">账号</label>
+                  <input
+                    x-model="username"
+                    type="text"
+                    autocomplete="username"
+                    required
+                    class="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    placeholder="username"
+                  />
+                </div>
+                <div>
+                  <label for="password" class="sr-only">密码</label>
+                  <input
+                    x-model="password"
+                    type="password"
+                    autocomplete="current-password"
+                    required
+                    class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                    placeholder="Password"
                   />
-                </svg>
-              </span>
-              Sign in
-            </button>
+                </div>
+              </div>
+              <div>
+                <button
+                  type="submit"
+                  class="group relative flex w-full justify-center rounded-md border border-transparent bg-sky-600 py-2 px-4 text-sm font-medium text-white hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                >
+                  <span
+                    class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  >
+                    <svg
+                      class="h-5 w-5 text-sky-500 group-hover:text-sky-400"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  Sign in
+                </button>
+              </div>
+            </form>
           </div>
-        </form>
-      </div>
+        </div>
+      </template>
+      <template x-if="isLoggedIn">
+        <div x-html="userList"></div>
+      </template>
     </div>
   </body>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/htmx.org@1.8.4"></script>
-  <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-  <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="//unpkg.com/alpinejs" defer></script>
   <script>
-    htmx.onLoad(function (target) {
-      document.body.addEventListener("htmx:afterRequest", function (evt) {
-        const targetError =
-          evt.target.attributes.getNamedItem("hx-target-error");
-        if (evt.detail.failed && targetError) {
-          let data = JSON.parse(evt.detail.xhr.response);
-          console.log(data);
-          Swal.fire({
-            title: "Error!",
-            text: data.msg,
-            icon: "error",
-            confirmButtonText: "close",
+    function loginForm() {
+      return {
+        username: "",
+        password: "",
+        isLoggedIn: false,
+        userList: "",
+        async submit() {
+          try {
+            const response = await fetch("/api/login", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                username: this.username,
+                password: this.password,
+              }),
+            });
+            if (!response.ok) {
+              const data = await response.json();
+              throw new Error(`${data.msg}`);
+            }
+            this.isLoggedIn = true;
+            const userListResponse = await fetch("/users", {
+              headers: {
+                "X-Fragment-Header": "true",
+              },
+            });
+            this.userList = await userListResponse.text();
+            history.pushState(null, '', '/users');
+          } catch (error) {
+            Swal.fire({
+              title: "Error!",
+              text: error.message,
+              icon: "error",
+              confirmButtonText: "OK",
+            });
+          }
+        },
+      };
+    }
+    function userForm() {
+    return {
+      users: [],
+      fetchData() {
+        fetch("/api/users")
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error("Network response was not ok");
+            }
+            return response.json();
+          })
+          .then((data) => {
+            this.users = data.data;
+          })
+          .catch((error) => {
+            console.error(
+              "There has been a problem with your fetch operation:",
+              error
+            );
           });
-        }
-      });
-      document.body.addEventListener("htmx:beforeRequest", function (evt) {
-        const targetError =
-          evt.target.attributes.getNamedItem("hx-target-error");
-        if (targetError) {
-          //document.getElementById(targetError.value).style.display = "none";
-        }
-      });
-    });
+      },
+      addUser() {
+        Swal.fire({
+          title: "Add User",
+          showCancelButton: true,
+          html: `
+    <input id="swal-input1" class="swal2-input" placeholder="username">
+    <input id="swal-input2" class="swal2-input" placeholder="password">
+    `,
+          preConfirm: () => {
+            return fetch("/api/users", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                username: document.getElementById("swal-input1").value,
+                password: document.getElementById("swal-input2").value,
+              }),
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error(response.statusText);
+                }
+                this.fetchData();
+                return;
+              })
+              .catch((error) => {
+                Swal.showValidationMessage(`Request failed: ${error}`);
+              });
+          },
+          allowOutsideClick: () => !Swal.isLoading(),
+        });
+      },
+      deleteUser(id) {
+        Swal.fire({
+          title: "Are you sure?",
+          text: "You won't be able to revert this!",
+          icon: "warning",
+          showCancelButton: true,
+          confirmButtonText: "Yes, delete it!",
+          preConfirm: () => {
+            return fetch(`/api/users/${id}`, {
+              method: "DELETE",
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error(response.statusText);
+                }
+                this.fetchData();
+                return;
+              })
+              .catch((error) => {
+                Swal.showValidationMessage(`Request failed: ${error}`);
+              });
+          },
+          allowOutsideClick: () => !Swal.isLoading(),
+        }).then((result) => {});
+      },
+    };
+  }
   </script>
 </html>
diff --git a/src/template/templates/user_list.hbs b/src/template/templates/user_list.hbs
index f17a058..55ce689 100644
--- a/src/template/templates/user_list.hbs
+++ b/src/template/templates/user_list.hbs
@@ -1,96 +1,62 @@
-<div id="body">
-    <div class="px-4 sm:px-6 lg:px-8" >
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-gray-900">
-            {{user_list}}
-          </h1>
-        </div>
+<div id="app" x-data="userForm" x-init="fetchData()">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold leading-6 text-gray-900">Users</h1>
+        <p class="mt-2 text-sm text-gray-700">A list of all the users</p>
       </div>
-      <div class="mt-8 flow-root">
-        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div
-            class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
-          >
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    class="hidden py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
-                  >
-                    user_id
-                  </th>
-                  <th
-                    scope="col"
-                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
-                  >
-                    {{username}}
-                  </th>
-                  <th scope="col" class="relative py-3.5 pl-3 pr-4 text-right sm:pr-0">
-                    <span class="sr-only">{{delete}}</span>
-                    {{operation}}
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-200">
-                {% for user in users %}
+      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+        <button
+          @click="addUser()"
+          class="block rounded-md bg-sky-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
+        >
+          Add user
+        </button>
+      </div>
+    </div>
+    <div class="mt-8 flow-root">
+      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead>
+              <tr>
+                <th
+                  scope="col"
+                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+                >
+                  Name
+                </th>
+                <th
+                  scope="col"
+                  class="relative py-3.5 pl-3 pr-4 text-right sm:pr-0"
+                >
+                  Delete
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200">
+              <template x-for="user in users" :key="user.id">
                 <tr>
-                  <td
-                    class="hidden whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
-                  >
-                    [[user.id]]
-                  </td>
                   <td
                     class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
-                  >
-                    [[user.username]]
-                  </td>
+                    x-text="user.username"
+                  ></td>
                   <td
                     class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0"
-                    onclick="
-    Swal.fire({
-      title: '{{are_you_sure_you_want_to_delete}}',
-      showCancelButton: true,
-      confirmButtonText: '{{yes}}',
-      cancelButtonText:'{{cancel}}'
-      preConfirm: () => {
-        return fetch('/user', {
-          method: 'DELETE',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            id: '[[user.id]]',
-          })
-        })
-        .then(response => {
-          if (!response.ok) {
-            throw new Error(response.statusText)
-          }
-          location.reload();
-          return
-        })
-        .catch(error => {
-          Swal.showValidationMessage(
-            `Request failed: ${error}`
-          )
-        })
-      },
-      allowOutsideClick: () => !Swal.isLoading()
-    })
-  "
-                    ><a href="#" class="text-indigo-600 hover:text-indigo-900"
-                      >{{delete}}<span class="sr-only">{{delete}}</span></a
+                  >
+                    <a
+                      href="#"
+                      class="text-sky-600 hover:text-sky-900"
+                      @click.prevent="deleteUser(user.id)"
+                      >delete<span class="sr-only">delete</span></a
                     >
                   </td>
                 </tr>
-                {% endfor %}
-                <!-- More people... -->
-              </tbody>
-            </table>
-          </div>
+              </template>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
   </div>
+</div>
diff --git a/src/template/templates/user_list_page.hbs b/src/template/templates/user_list_page.hbs
index d7f65dc..df98780 100644
--- a/src/template/templates/user_list_page.hbs
+++ b/src/template/templates/user_list_page.hbs
@@ -6,35 +6,91 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>salvo</title>
   </head>
-    {% include "user_list.html" %}
+  {% include "user_list.html" %}
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/htmx.org@1.8.4"></script>
-  <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-  <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="//unpkg.com/alpinejs" defer></script>
   <script>
-    htmx.onLoad(function (target) {
-      document.body.addEventListener("htmx:afterRequest", function (evt) {
-        const targetError =
-          evt.target.attributes.getNamedItem("hx-target-error");
-        if (evt.detail.failed && targetError) {
-          let data = JSON.parse(evt.detail.xhr.response);
+    function userForm() {
+      return {
+        users: [],
+        fetchData() {
+          fetch("/api/users")
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error("Network response was not ok");
+              }
+              return response.json();
+            })
+            .then((data) => {
+              this.users = data.data;
+            })
+            .catch((error) => {
+              console.error(
+                "There has been a problem with your fetch operation:",
+                error
+              );
+            });
+        },
+        addUser() {
           Swal.fire({
-            title: "Error!",
-            text: data.msg,
-            icon: "error",
-            confirmButtonText: "close",
+            title: "Add User",
+            showCancelButton: true,
+            html: `
+    <input id="swal-input1" class="swal2-input" placeholder="username">
+    <input id="swal-input2" class="swal2-input" placeholder="password">
+    `,
+            preConfirm: () => {
+              return fetch("/api/users", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  username: document.getElementById("swal-input1").value,
+                  password: document.getElementById("swal-input2").value,
+                }),
+              })
+                .then((response) => {
+                  if (!response.ok) {
+                    throw new Error(response.statusText);
+                  }
+                  this.fetchData();
+                  return;
+                })
+                .catch((error) => {
+                  Swal.showValidationMessage(`Request failed: ${error}`);
+                });
+            },
+            allowOutsideClick: () => !Swal.isLoading(),
           });
-        }
-      });
-      document.body.addEventListener("htmx:beforeRequest", function (evt) {
-        const targetError =
-          evt.target.attributes.getNamedItem("hx-target-error");
-        if (targetError) {
-          //document.getElementById(targetError.value).style.display = "none";
-        }
-      });
-    });
+        },
+        deleteUser(id) {
+          Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonText: "Yes, delete it!",
+            preConfirm: () => {
+              return fetch(`/api/users/${id}`, {
+                method: "DELETE",
+              })
+                .then((response) => {
+                  if (!response.ok) {
+                    throw new Error(response.statusText);
+                  }
+                  this.fetchData();
+                  return;
+                })
+                .catch((error) => {
+                  Swal.showValidationMessage(`Request failed: ${error}`);
+                });
+            },
+            allowOutsideClick: () => !Swal.isLoading(),
+          }).then((result) => {});
+        },
+      };
+    }
   </script>
 </html>
diff --git a/src/utils/create_project.rs b/src/utils/create_project.rs
index 6695414..ef2ee71 100644
--- a/src/utils/create_project.rs
+++ b/src/utils/create_project.rs
@@ -83,7 +83,7 @@ fn write_project_file(
             "jsonwebtoken": "8.3.0",
             "once_cell": "1.18.0",
             "salvo": {
-                "version": "*",
+                "version": "0.57",
                 "features": ["anyhow", "logging", "cors", "oapi", "jwt-auth", "rustls", "catch-panic","cookie"]
             },
             "serde": "1.0.188",
diff --git a/src/utils/get_selection.rs b/src/utils/get_selection.rs
index 49796d5..1a305a6 100644
--- a/src/utils/get_selection.rs
+++ b/src/utils/get_selection.rs
@@ -18,8 +18,8 @@ pub fn get_user_selected() -> Result<Option<UserSelected>> {
         ..ColorfulTheme::default()
     };
     let selections = &[
-        t!("salvo_web_api"),
         t!("salvo_web_site"),
+        t!("salvo_web_api"),
         // "custom",
     ];
     let selection = Select::with_theme(&theme)
@@ -28,8 +28,8 @@ pub fn get_user_selected() -> Result<Option<UserSelected>> {
         .items(&selections[..])
         .interact()?;
     let template_type = match selection {
-        0 => TemplateType::SalvoWebApi,
-        1 => TemplateType::SalvoWebSite,
+        0 => TemplateType::SalvoWebSite,
+        1 => TemplateType::SalvoWebApi,
         _ => anyhow::bail!("Invalid selection"),
     };
     let db_conn_types = &[