diff --git a/pom.xml b/pom.xml
index 0db6abf..1e5ce75 100644
--- a/pom.xml
+++ b/pom.xml
@@ -37,6 +37,11 @@
 		
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-thymeleaf</artifactId>
+		</dependency>
+		
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-security</artifactId>
 		</dependency>
 		
diff --git a/src/main/java/com/heaerie/server/auth201/Auth201Server/config/OAuth2SecurityConfig.java b/src/main/java/com/heaerie/server/auth201/Auth201Server/config/OAuth2SecurityConfig.java
new file mode 100644
index 0000000..b5688de
--- /dev/null
+++ b/src/main/java/com/heaerie/server/auth201/Auth201Server/config/OAuth2SecurityConfig.java
@@ -0,0 +1,254 @@
+package com.heaerie.server.auth201.Auth201Server.config;
+
+import com.nimbusds.jose.jwk.JWKSet;
+import com.nimbusds.jose.jwk.RSAKey;
+import com.nimbusds.jose.jwk.source.ImmutableJWKSet;
+import com.nimbusds.jose.jwk.source.JWKSource;
+import com.nimbusds.jose.proc.SecurityContext;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.annotation.Order;
+import org.springframework.security.config.Customizer;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.oauth2.core.AuthorizationGrantType;
+import org.springframework.security.oauth2.core.ClientAuthenticationMethod;
+import org.springframework.security.oauth2.core.oidc.OidcScopes;
+import org.springframework.security.oauth2.jwt.JwtDecoder;
+import org.springframework.security.oauth2.jwt.NimbusJwtDecoder;
+import org.springframework.security.oauth2.server.authorization.client.InMemoryRegisteredClientRepository;
+import org.springframework.security.oauth2.server.authorization.client.RegisteredClient;
+import org.springframework.security.oauth2.server.authorization.client.RegisteredClientRepository;
+import org.springframework.security.oauth2.server.authorization.settings.AuthorizationServerSettings;
+import org.springframework.security.oauth2.server.authorization.settings.ClientSettings;
+import org.springframework.security.oauth2.server.authorization.settings.TokenSettings;
+import org.springframework.security.oauth2.server.authorization.token.JwtEncodingContext;
+import org.springframework.security.oauth2.server.authorization.token.OAuth2TokenCustomizer;
+import org.springframework.security.provisioning.InMemoryUserDetailsManager;
+import org.springframework.security.web.SecurityFilterChain;
+
+import java.security.KeyPair;
+import java.security.KeyPairGenerator;
+import java.security.interfaces.RSAPrivateKey;
+import java.security.interfaces.RSAPublicKey;
+import java.time.Duration;
+import java.util.UUID;
+
+/**
+ * OAuth 2.1 Authorization Server Configuration
+ * Implements modern OAuth 2.1 security standards with PKCE, refresh token rotation, and JWT tokens
+ */
+@Configuration
+@EnableWebSecurity
+public class OAuth2SecurityConfig {
+
+    /**
+     * Authorization Server Security Filter Chain (Order 1)
+     * Handles all OAuth 2.1 protocol endpoints
+     */
+    @Bean
+    @Order(1)
+    public SecurityFilterChain authorizationServerSecurityFilterChain(HttpSecurity http) throws Exception {
+        http
+            .securityMatcher("/oauth2/**", "/.well-known/**")
+            .authorizeHttpRequests(authorize -> authorize
+                .anyRequest().authenticated()
+            )
+            .csrf(csrf -> csrf.ignoringRequestMatchers("/oauth2/**"))
+            .oauth2AuthorizationServer(Customizer.withDefaults())
+            .formLogin(Customizer.withDefaults());
+
+        return http.build();
+    }
+
+    /**
+     * Default Security Filter Chain (Order 2)
+     * Handles general authentication and resource protection
+     */
+    @Bean
+    @Order(2)
+    public SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception {
+        http
+            .authorizeHttpRequests(authorize -> authorize
+                .requestMatchers("/", "/authorized", "/logged-out", "/h2-console/**", "/error").permitAll()
+                .anyRequest().authenticated()
+            )
+            .formLogin(form -> form
+                .loginPage("/login")
+                .permitAll()
+            )
+            .oauth2ResourceServer(oauth2 -> oauth2
+                .jwt(Customizer.withDefaults())
+            );
+        
+        // H2 Console configuration (development only)
+        http.csrf(csrf -> csrf.ignoringRequestMatchers("/h2-console/**"));
+        http.headers(headers -> headers.frameOptions(frame -> frame.sameOrigin()));
+
+        return http.build();
+    }
+
+    /**
+     * Registered Client Repository - OAuth 2.1 compliant clients
+     */
+    @Bean
+    public RegisteredClientRepository registeredClientRepository(PasswordEncoder passwordEncoder) {
+        // Public Client (SPAs, Mobile Apps) - OAuth 2.1
+        RegisteredClient publicClient = RegisteredClient.withId(UUID.randomUUID().toString())
+            .clientId("public-client")
+            .clientAuthenticationMethod(ClientAuthenticationMethod.NONE) // No secret for public clients
+            .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
+            .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN)
+            .redirectUri("http://localhost:9000/authorized")
+            .redirectUri("http://127.0.0.1:8080/authorized")
+            .redirectUri("http://127.0.0.1:8080/login/oauth2/code/public-client")
+            .postLogoutRedirectUri("http://localhost:9000/logged-out")
+            .postLogoutRedirectUri("http://127.0.0.1:8080/logged-out")
+            .scope(OidcScopes.OPENID)
+            .scope(OidcScopes.PROFILE)
+            .scope(OidcScopes.EMAIL)
+            .scope("read")
+            .scope("write")
+            .clientSettings(ClientSettings.builder()
+                .requireAuthorizationConsent(true)
+                .requireProofKey(true) // PKCE required (OAuth 2.1)
+                .build())
+            .tokenSettings(TokenSettings.builder()
+                .accessTokenTimeToLive(Duration.ofMinutes(15))
+                .refreshTokenTimeToLive(Duration.ofHours(24))
+                .reuseRefreshTokens(false) // Token rotation (OAuth 2.1)
+                .build())
+            .build();
+
+        // Confidential Client (Server-to-Server) - OAuth 2.1
+        RegisteredClient confidentialClient = RegisteredClient.withId(UUID.randomUUID().toString())
+            .clientId("confidential-client")
+            .clientSecret(passwordEncoder.encode("secret"))
+            .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC)
+            .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_POST)
+            .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
+            .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN)
+            .authorizationGrantType(AuthorizationGrantType.CLIENT_CREDENTIALS)
+            .redirectUri("http://localhost:9000/authorized")
+            .redirectUri("http://127.0.0.1:8080/authorized")
+            .redirectUri("http://127.0.0.1:8080/login/oauth2/code/confidential-client")
+            .postLogoutRedirectUri("http://localhost:9000/logged-out")
+            .postLogoutRedirectUri("http://127.0.0.1:8080/logged-out")
+            .scope(OidcScopes.OPENID)
+            .scope(OidcScopes.PROFILE)
+            .scope(OidcScopes.EMAIL)
+            .scope("read")
+            .scope("write")
+            .clientSettings(ClientSettings.builder()
+                .requireAuthorizationConsent(true)
+                .requireProofKey(true) // PKCE recommended
+                .build())
+            .tokenSettings(TokenSettings.builder()
+                .accessTokenTimeToLive(Duration.ofMinutes(15))
+                .refreshTokenTimeToLive(Duration.ofHours(24))
+                .reuseRefreshTokens(false) // Token rotation (OAuth 2.1)
+                .build())
+            .build();
+
+        return new InMemoryRegisteredClientRepository(publicClient, confidentialClient);
+    }
+
+    /**
+     * User Details Service - Authentication
+     */
+    @Bean
+    public UserDetailsService userDetailsService(PasswordEncoder passwordEncoder) {
+        UserDetails user = User.builder()
+            .username("user")
+            .password(passwordEncoder.encode("password"))
+            .roles("USER")
+            .build();
+
+        UserDetails admin = User.builder()
+            .username("admin")
+            .password(passwordEncoder.encode("admin"))
+            .roles("USER", "ADMIN")
+            .build();
+
+        return new InMemoryUserDetailsManager(user, admin);
+    }
+
+    /**
+     * Password Encoder (BCrypt)
+     */
+    @Bean
+    public PasswordEncoder passwordEncoder() {
+        return new BCryptPasswordEncoder();
+    }
+
+    /**
+     * JWK Source for JWT token signing
+     */
+    @Bean
+    public JWKSource<SecurityContext> jwkSource() {
+        KeyPair keyPair = generateRsaKey();
+        RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic();
+        RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate();
+        RSAKey rsaKey = new RSAKey.Builder(publicKey)
+            .privateKey(privateKey)
+            .keyID(UUID.randomUUID().toString())
+            .build();
+        JWKSet jwkSet = new JWKSet(rsaKey);
+        return new ImmutableJWKSet<>(jwkSet);
+    }
+
+    /**
+     * Generate RSA key pair
+     */
+    private static KeyPair generateRsaKey() {
+        try {
+            KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
+            keyPairGenerator.initialize(2048);
+            return keyPairGenerator.generateKeyPair();
+        } catch (Exception ex) {
+            throw new IllegalStateException("Failed to generate RSA key pair", ex);
+        }
+    }
+
+    /**
+     * JWT Decoder for token validation
+     */
+    @Bean
+    public JwtDecoder jwtDecoder() {
+        // Generate RSA key pair for decoding
+        KeyPair keyPair = generateRsaKey();
+        RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic();
+        return NimbusJwtDecoder.withPublicKey(publicKey).build();
+    }
+
+    /**
+     * Authorization Server Settings
+     */
+    @Bean
+    public AuthorizationServerSettings authorizationServerSettings() {
+        return AuthorizationServerSettings.builder()
+            .issuer("http://localhost:9000")
+            .build();
+    }
+
+    /**
+     * JWT Token Customizer for OIDC claims
+     */
+    @Bean
+    public OAuth2TokenCustomizer<JwtEncodingContext> tokenCustomizer() {
+        return context -> {
+            if (OidcScopes.OPENID.equals(context.getAuthorizedScopes().stream()
+                    .filter(scope -> scope.equals(OidcScopes.OPENID))
+                    .findFirst()
+                    .orElse(null))) {
+                // Add OIDC standard claims
+                context.getClaims().claim("sub", context.getPrincipal().getName());
+            }
+        };
+    }
+}
diff --git a/src/main/java/com/heaerie/server/auth201/Auth201Server/config/SecurityConfig.java b/src/main/java/com/heaerie/server/auth201/Auth201Server/config/SecurityConfig.java
deleted file mode 100644
index 4fecc34..0000000
--- a/src/main/java/com/heaerie/server/auth201/Auth201Server/config/SecurityConfig.java
+++ /dev/null
@@ -1,211 +0,0 @@
-package com.heaerie.server.auth201.Auth201Server.config;
-
-import com.nimbusds.jose.jwk.JWKSet;
-import com.nimbusds.jose.jwk.RSAKey;
-import com.nimbusds.jose.jwk.source.ImmutableJWKSet;
-import com.nimbusds.jose.jwk.source.JWKSource;
-import com.nimbusds.jose.proc.SecurityContext;
-import org.springframework.context.annotation.Bean;
-import org.springframework.context.annotation.Configuration;
-import org.springframework.security.config.Customizer;
-import org.springframework.security.config.annotation.web.builders.HttpSecurity;
-import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
-import org.springframework.security.core.userdetails.User;
-import org.springframework.security.core.userdetails.UserDetails;
-import org.springframework.security.core.userdetails.UserDetailsService;
-import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
-import org.springframework.security.crypto.password.PasswordEncoder;
-import org.springframework.security.oauth2.core.AuthorizationGrantType;
-import org.springframework.security.oauth2.core.ClientAuthenticationMethod;
-import org.springframework.security.oauth2.core.oidc.OidcScopes;
-import org.springframework.security.oauth2.jwt.JwtDecoder;
-import org.springframework.security.oauth2.jwt.NimbusJwtDecoder;
-import org.springframework.security.oauth2.server.authorization.client.InMemoryRegisteredClientRepository;
-import org.springframework.security.oauth2.server.authorization.client.RegisteredClient;
-import org.springframework.security.oauth2.server.authorization.client.RegisteredClientRepository;
-import org.springframework.security.oauth2.server.authorization.settings.AuthorizationServerSettings;
-import org.springframework.security.oauth2.server.authorization.settings.ClientSettings;
-import org.springframework.security.oauth2.server.authorization.settings.TokenSettings;
-import org.springframework.security.provisioning.InMemoryUserDetailsManager;
-import org.springframework.security.web.SecurityFilterChain;
-
-import java.security.KeyPair;
-import java.security.KeyPairGenerator;
-import java.security.interfaces.RSAPrivateKey;
-import java.security.interfaces.RSAPublicKey;
-import java.time.Duration;
-import java.util.UUID;
-
-@Configuration
-@EnableWebSecurity
-public class SecurityConfig {
-
-    /**
-     * Default Security Filter Chain for authentication
-     * Handles login and OAuth 2.1 authorization
-     */
-    @Bean
-    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
-        http
-            .authorizeHttpRequests(authorize -> authorize
-                .requestMatchers("/", "/h2-console/**").permitAll()
-                .anyRequest().authenticated()
-            )
-            .formLogin(Customizer.withDefaults())
-            .oauth2ResourceServer(oauth2 -> oauth2
-                .jwt(Customizer.withDefaults())
-            );
-        
-        // Allow H2 console access (development only)
-        http.csrf(csrf -> csrf
-            .ignoringRequestMatchers("/h2-console/**")
-        );
-        http.headers(headers -> headers
-            .frameOptions(frame -> frame.sameOrigin())
-        );
-
-        return http.build();
-    }
-
-    /**
-     * Registered Client Repository with OAuth 2.1 compliant configuration
-     * This example uses in-memory storage, but you can implement database storage
-     */
-    @Bean
-    public RegisteredClientRepository registeredClientRepository() {
-        // OAuth 2.1 Public Client with PKCE (recommended for SPAs and mobile apps)
-        RegisteredClient publicClient = RegisteredClient.withId(UUID.randomUUID().toString())
-            .clientId("public-client")
-            // No client secret for public clients (OAuth 2.1 requirement)
-            .clientAuthenticationMethod(ClientAuthenticationMethod.NONE)
-            .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
-            .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN)
-            .redirectUri("http://127.0.0.1:8080/login/oauth2/code/public-client")
-            .redirectUri("http://127.0.0.1:8080/authorized")
-            .postLogoutRedirectUri("http://127.0.0.1:8080/logged-out")
-            .scope(OidcScopes.OPENID)
-            .scope(OidcScopes.PROFILE)
-            .scope(OidcScopes.EMAIL)
-            .scope("read")
-            .scope("write")
-            .clientSettings(ClientSettings.builder()
-                .requireAuthorizationConsent(true)
-                .requireProofKey(true) // PKCE is required (OAuth 2.1)
-                .build())
-            .tokenSettings(TokenSettings.builder()
-                .accessTokenTimeToLive(Duration.ofMinutes(15))
-                .refreshTokenTimeToLive(Duration.ofHours(24))
-                .reuseRefreshTokens(false) // OAuth 2.1: Refresh token rotation
-                .build())
-            .build();
-
-        // OAuth 2.1 Confidential Client (for server-to-server)
-        RegisteredClient confidentialClient = RegisteredClient.withId(UUID.randomUUID().toString())
-            .clientId("confidential-client")
-            .clientSecret("{bcrypt}$2a$10$MJJhX9K8bGqVHJwF8X8o6O5fF5F5F5F5F5F5F5F5F5F5F5F5F5F5F") // "secret"
-            .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC)
-            .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_POST)
-            .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
-            .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN)
-            .authorizationGrantType(AuthorizationGrantType.CLIENT_CREDENTIALS)
-            .redirectUri("http://127.0.0.1:8080/login/oauth2/code/confidential-client")
-            .redirectUri("http://127.0.0.1:8080/authorized")
-            .postLogoutRedirectUri("http://127.0.0.1:8080/logged-out")
-            .scope(OidcScopes.OPENID)
-            .scope(OidcScopes.PROFILE)
-            .scope(OidcScopes.EMAIL)
-            .scope("read")
-            .scope("write")
-            .clientSettings(ClientSettings.builder()
-                .requireAuthorizationConsent(true)
-                .requireProofKey(true) // PKCE recommended even for confidential clients
-                .build())
-            .tokenSettings(TokenSettings.builder()
-                .accessTokenTimeToLive(Duration.ofMinutes(15))
-                .refreshTokenTimeToLive(Duration.ofHours(24))
-                .reuseRefreshTokens(false) // OAuth 2.1: Refresh token rotation
-                .build())
-            .build();
-
-        return new InMemoryRegisteredClientRepository(publicClient, confidentialClient);
-    }
-
-    /**
-     * User Details Service for authentication
-     * In production, this should be backed by a database
-     */
-    @Bean
-    public UserDetailsService userDetailsService() {
-        UserDetails user = User.builder()
-            .username("user")
-            .password(passwordEncoder().encode("password"))
-            .roles("USER")
-            .build();
-
-        UserDetails admin = User.builder()
-            .username("admin")
-            .password(passwordEncoder().encode("admin"))
-            .roles("USER", "ADMIN")
-            .build();
-
-        return new InMemoryUserDetailsManager(user, admin);
-    }
-
-    /**
-     * Password Encoder
-     */
-    @Bean
-    public PasswordEncoder passwordEncoder() {
-        return new BCryptPasswordEncoder();
-    }
-
-    /**
-     * JWK Source for signing JWT tokens
-     */
-    @Bean
-    public JWKSource<SecurityContext> jwkSource() {
-        KeyPair keyPair = generateRsaKey();
-        RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic();
-        RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate();
-        RSAKey rsaKey = new RSAKey.Builder(publicKey)
-            .privateKey(privateKey)
-            .keyID(UUID.randomUUID().toString())
-            .build();
-        JWKSet jwkSet = new JWKSet(rsaKey);
-        return new ImmutableJWKSet<>(jwkSet);
-    }
-
-    /**
-     * Generate RSA key pair for JWT signing
-     */
-    private static KeyPair generateRsaKey() {
-        KeyPair keyPair;
-        try {
-            KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
-            keyPairGenerator.initialize(2048);
-            keyPair = keyPairGenerator.generateKeyPair();
-        } catch (Exception ex) {
-            throw new IllegalStateException(ex);
-        }
-        return keyPair;
-    }
-
-    /**
-     * JWT Decoder for validating JWT tokens
-     */
-    @Bean
-    public JwtDecoder jwtDecoder(JWKSource<SecurityContext> jwkSource) {
-        return NimbusJwtDecoder.withJwkSetUri("http://localhost:9000/oauth2/jwks").build();
-    }
-
-    /**
-     * Authorization Server Settings
-     * Configures the OAuth 2.1 endpoints
-     */
-    @Bean
-    public AuthorizationServerSettings authorizationServerSettings() {
-        return AuthorizationServerSettings.builder()
-            .issuer("http://localhost:9000")
-            .build();
-    }
-}
diff --git a/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/LoginController.java b/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/LoginController.java
new file mode 100644
index 0000000..277c5bb
--- /dev/null
+++ b/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/LoginController.java
@@ -0,0 +1,13 @@
+package com.heaerie.server.auth201.Auth201Server.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class LoginController {
+
+    @GetMapping("/login")
+    public String login() {
+        return "login";
+    }
+}
diff --git a/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/UserController.java b/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/UserController.java
index 8dd08de..a1ce582 100644
--- a/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/UserController.java
+++ b/src/main/java/com/heaerie/server/auth201/Auth201Server/controller/UserController.java
@@ -2,7 +2,10 @@
 
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
 import org.springframework.security.oauth2.jwt.Jwt;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.Map;
@@ -36,3 +39,42 @@
         );
     }
 }
+
+/**
+ * OAuth 2.1 Callback Controller
+ * Handles the authorization callback and displays the result
+ */
+@Controller
+class CallbackController {
+
+    /**
+     * OAuth 2.1 Authorization Callback Endpoint
+     * This endpoint receives the authorization code after successful authentication
+     */
+    @GetMapping("/authorized")
+    public String authorized(
+        @RequestParam(required = false) String code,
+        @RequestParam(required = false) String state,
+        @RequestParam(required = false) String error,
+        @RequestParam(required = false) String error_description,
+        Model model
+    ) {
+        model.addAttribute("code", code);
+        model.addAttribute("state", state);
+        model.addAttribute("error", error);
+        model.addAttribute("errorDescription", error_description);
+        model.addAttribute("hasError", error != null);
+        model.addAttribute("tokenEndpoint", "http://localhost:9000/oauth2/token");
+        
+        return "authorized";
+    }
+
+    /**
+     * Logged out callback endpoint
+     */
+    @GetMapping("/logged-out")
+    public String loggedOut(Model model) {
+        model.addAttribute("message", "You have been successfully logged out");
+        return "logged-out";
+    }
+}
diff --git a/src/main/resources/static/test-client.html b/src/main/resources/static/test-client.html
new file mode 100644
index 0000000..61d9a72
--- /dev/null
+++ b/src/main/resources/static/test-client.html
@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OAuth 2.1 Test Client</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            max-width: 800px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+
+        .section {
+            margin-bottom: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+        }
+
+        .section h2 {
+            color: #333;
+            font-size: 18px;
+            margin-bottom: 15px;
+        }
+
+        .info-grid {
+            display: grid;
+            grid-template-columns: 150px 1fr;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+
+        .info-label {
+            font-weight: 600;
+            color: #555;
+        }
+
+        .info-value {
+            color: #333;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            word-break: break-all;
+        }
+
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            border-radius: 6px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            width: 100%;
+            margin-top: 10px;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        .code-block {
+            background: #2d2d2d;
+            color: #f8f8f2;
+            padding: 15px;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            overflow-x: auto;
+            margin-top: 10px;
+        }
+
+        .success {
+            color: #28a745;
+            font-weight: 600;
+        }
+
+        .error {
+            color: #dc3545;
+            font-weight: 600;
+        }
+
+        #result {
+            margin-top: 20px;
+        }
+
+        .token-display {
+            background: white;
+            padding: 15px;
+            border-radius: 6px;
+            margin-top: 10px;
+            border: 1px solid #ddd;
+        }
+
+        .copy-btn {
+            background: #28a745;
+            padding: 6px 12px;
+            font-size: 12px;
+            margin-left: 10px;
+            display: inline-block;
+            width: auto;
+        }
+
+        .step {
+            margin-bottom: 20px;
+        }
+
+        .step-number {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 30px;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔐 OAuth 2.1 Test Client</h1>
+        <p class="subtitle">Interactive OAuth 2.1 Authorization Code Flow with PKCE</p>
+
+        <div class="section">
+            <h2>Configuration</h2>
+            <div class="info-grid">
+                <div class="info-label">Authorization Server:</div>
+                <div class="info-value" id="baseUrl">http://localhost:9000</div>
+                
+                <div class="info-label">Client ID:</div>
+                <div class="info-value">public-client</div>
+                
+                <div class="info-label">Redirect URI:</div>
+                <div class="info-value">http://localhost:9000/authorized</div>
+                
+                <div class="info-label">Scopes:</div>
+                <div class="info-value">profile read write</div>
+                
+                <div class="info-label">PKCE:</div>
+                <div class="info-value">✅ Required (S256)</div>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2>Step-by-Step Authorization</h2>
+            
+            <div class="step">
+                <span class="step-number">1</span>
+                <strong>Generate PKCE Challenge</strong>
+                <button onclick="generatePKCE()">Generate PKCE Parameters</button>
+                <div id="pkceResult"></div>
+            </div>
+
+            <div class="step">
+                <span class="step-number">2</span>
+                <strong>Start Authorization</strong>
+                <button onclick="startAuthorization()" id="authBtn" disabled>Start OAuth 2.1 Flow</button>
+                <p style="margin-top: 10px; font-size: 13px; color: #666;">
+                    Login credentials: <strong>user/password</strong> or <strong>admin/admin</strong>
+                </p>
+            </div>
+
+            <div class="step">
+                <span class="step-number">3</span>
+                <strong>Authorization Result</strong>
+                <div id="result"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let codeVerifier = '';
+        let codeChallenge = '';
+        let state = '';
+
+        // Generate random string
+        function generateRandomString(length) {
+            const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+            let result = '';
+            const randomValues = new Uint8Array(length);
+            crypto.getRandomValues(randomValues);
+            for (let i = 0; i < length; i++) {
+                result += charset[randomValues[i] % charset.length];
+            }
+            return result;
+        }
+
+        // Generate SHA-256 hash
+        async function sha256(plain) {
+            const encoder = new TextEncoder();
+            const data = encoder.encode(plain);
+            const hash = await crypto.subtle.digest('SHA-256', data);
+            return hash;
+        }
+
+        // Base64 URL encode
+        function base64UrlEncode(arrayBuffer) {
+            const bytes = new Uint8Array(arrayBuffer);
+            let binary = '';
+            for (let i = 0; i < bytes.byteLength; i++) {
+                binary += String.fromCharCode(bytes[i]);
+            }
+            return btoa(binary)
+                .replace(/\+/g, '-')
+                .replace(/\//g, '_')
+                .replace(/=/g, '');
+        }
+
+        // Generate PKCE parameters
+        async function generatePKCE() {
+            codeVerifier = generateRandomString(128);
+            state = generateRandomString(32);
+            
+            const hashed = await sha256(codeVerifier);
+            codeChallenge = base64UrlEncode(hashed);
+
+            document.getElementById('pkceResult').innerHTML = `
+                <div class="token-display">
+                    <div><strong>Code Verifier:</strong></div>
+                    <div class="code-block">${codeVerifier}</div>
+                    
+                    <div style="margin-top: 10px;"><strong>Code Challenge (S256):</strong></div>
+                    <div class="code-block">${codeChallenge}</div>
+                    
+                    <div style="margin-top: 10px;"><strong>State:</strong></div>
+                    <div class="code-block">${state}</div>
+                    
+                    <p class="success" style="margin-top: 15px;">✓ PKCE parameters generated successfully!</p>
+                </div>
+            `;
+
+            document.getElementById('authBtn').disabled = false;
+            
+            // Store in sessionStorage for callback
+            sessionStorage.setItem('code_verifier', codeVerifier);
+            sessionStorage.setItem('state', state);
+        }
+
+        // Start authorization flow
+        function startAuthorization() {
+            const baseUrl = document.getElementById('baseUrl').textContent;
+            const params = new URLSearchParams({
+                response_type: 'code',
+                client_id: 'public-client',
+                redirect_uri: 'http://localhost:9000/authorized',
+                scope: 'profile read write',
+                state: state,
+                code_challenge: codeChallenge,
+                code_challenge_method: 'S256'
+            });
+
+            const authUrl = `${baseUrl}/oauth2/authorize?${params.toString()}`;
+            
+            document.getElementById('result').innerHTML = `
+                <div class="token-display">
+                    <p>Redirecting to authorization server...</p>
+                    <div class="code-block">${authUrl}</div>
+                </div>
+            `;
+
+            // Redirect to authorization server
+            window.location.href = authUrl;
+        }
+
+        // Check if we're on the callback page
+        window.addEventListener('DOMContentLoaded', function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const code = urlParams.get('code');
+            const returnedState = urlParams.get('state');
+            const error = urlParams.get('error');
+            
+            if (error) {
+                document.getElementById('result').innerHTML = `
+                    <div class="token-display">
+                        <p class="error">❌ Authorization Error</p>
+                        <p><strong>Error:</strong> ${error}</p>
+                        <p><strong>Description:</strong> ${urlParams.get('error_description') || 'No description'}</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            if (code) {
+                const storedState = sessionStorage.getItem('state');
+                const storedVerifier = sessionStorage.getItem('code_verifier');
+                
+                if (returnedState !== storedState) {
+                    document.getElementById('result').innerHTML = `
+                        <div class="token-display">
+                            <p class="error">❌ State Mismatch - Possible CSRF Attack</p>
+                        </div>
+                    `;
+                    return;
+                }
+                
+                document.getElementById('result').innerHTML = `
+                    <div class="token-display">
+                        <p class="success">✓ Authorization Code Received!</p>
+                        <div style="margin-top: 10px;"><strong>Authorization Code:</strong></div>
+                        <div class="code-block">${code}</div>
+                        
+                        <button onclick="exchangeToken('${code}', '${storedVerifier}')">Exchange for Access Token</button>
+                    </div>
+                `;
+            }
+        });
+
+        // Exchange authorization code for tokens
+        async function exchangeToken(code, verifier) {
+            const baseUrl = document.getElementById('baseUrl').textContent;
+            
+            document.getElementById('result').innerHTML = `
+                <div class="token-display">
+                    <p>Exchanging authorization code for tokens...</p>
+                </div>
+            `;
+            
+            try {
+                const response = await fetch(`${baseUrl}/oauth2/token`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: new URLSearchParams({
+                        grant_type: 'authorization_code',
+                        code: code,
+                        redirect_uri: 'http://localhost:9000/authorized',
+                        client_id: 'public-client',
+                        code_verifier: verifier
+                    })
+                });
+
+                const data = await response.json();
+                
+                if (response.ok) {
+                    sessionStorage.setItem('access_token', data.access_token);
+                    
+                    document.getElementById('result').innerHTML = `
+                        <div class="token-display">
+                            <p class="success">✓ Tokens Received Successfully!</p>
+                            
+                            <div style="margin-top: 15px;"><strong>Access Token:</strong></div>
+                            <div class="code-block">${data.access_token.substring(0, 100)}...</div>
+                            
+                            <div style="margin-top: 10px;"><strong>Token Type:</strong> ${data.token_type}</div>
+                            <div style="margin-top: 5px;"><strong>Expires In:</strong> ${data.expires_in} seconds</div>
+                            <div style="margin-top: 5px;"><strong>Scope:</strong> ${data.scope}</div>
+                            
+                            ${data.refresh_token ? `
+                                <div style="margin-top: 10px;"><strong>Refresh Token:</strong></div>
+                                <div class="code-block">${data.refresh_token.substring(0, 50)}...</div>
+                            ` : ''}
+                            
+                            <button onclick="getUserInfo()">Get User Info</button>
+                        </div>
+                    `;
+                } else {
+                    document.getElementById('result').innerHTML = `
+                        <div class="token-display">
+                            <p class="error">❌ Token Exchange Failed</p>
+                            <div class="code-block">${JSON.stringify(data, null, 2)}</div>
+                        </div>
+                    `;
+                }
+            } catch (err) {
+                document.getElementById('result').innerHTML = `
+                    <div class="token-display">
+                        <p class="error">❌ Error: ${err.message}</p>
+                    </div>
+                `;
+            }
+        }
+
+        // Get user info
+        async function getUserInfo() {
+            const baseUrl = document.getElementById('baseUrl').textContent;
+            const accessToken = sessionStorage.getItem('access_token');
+            
+            try {
+                const response = await fetch(`${baseUrl}/userinfo`, {
+                    headers: {
+                        'Authorization': `Bearer ${accessToken}`
+                    }
+                });
+
+                const data = await response.json();
+                
+                if (response.ok) {
+                    document.getElementById('result').innerHTML += `
+                        <div class="token-display" style="margin-top: 15px;">
+                            <p class="success">✓ User Info Retrieved!</p>
+                            <div class="code-block">${JSON.stringify(data, null, 2)}</div>
+                        </div>
+                    `;
+                } else {
+                    document.getElementById('result').innerHTML += `
+                        <div class="token-display" style="margin-top: 15px;">
+                            <p class="error">❌ Failed to get user info</p>
+                            <div class="code-block">${JSON.stringify(data, null, 2)}</div>
+                        </div>
+                    `;
+                }
+            } catch (err) {
+                document.getElementById('result').innerHTML += `
+                    <div class="token-display" style="margin-top: 15px;">
+                        <p class="error">❌ Error: ${err.message}</p>
+                    </div>
+                `;
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/src/main/resources/templates/authorized.html b/src/main/resources/templates/authorized.html
new file mode 100644
index 0000000..9c02c61
--- /dev/null
+++ b/src/main/resources/templates/authorized.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OAuth 2.1 Authorization Complete</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 800px;
+            width: 100%;
+            padding: 40px;
+        }
+        
+        h1 {
+            color: #667eea;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+        
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+        
+        .success-icon {
+            width: 60px;
+            height: 60px;
+            background: #10b981;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            font-size: 30px;
+        }
+        
+        .error-icon {
+            width: 60px;
+            height: 60px;
+            background: #ef4444;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            font-size: 30px;
+        }
+        
+        .info-box {
+            background: #f3f4f6;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }
+        
+        .info-box.error {
+            background: #fee2e2;
+            border-left: 4px solid #ef4444;
+        }
+        
+        .info-item {
+            margin: 15px 0;
+        }
+        
+        .info-label {
+            font-weight: 600;
+            color: #374151;
+            display: block;
+            margin-bottom: 5px;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .info-value {
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            padding: 12px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            color: #1f2937;
+            word-break: break-all;
+            line-height: 1.5;
+        }
+        
+        .code-snippet {
+            background: #1f2937;
+            color: #10b981;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            overflow-x: auto;
+            line-height: 1.6;
+        }
+        
+        .code-snippet .comment {
+            color: #6b7280;
+        }
+        
+        .code-snippet .variable {
+            color: #fbbf24;
+        }
+        
+        .instructions {
+            background: #eff6ff;
+            border-left: 4px solid #3b82f6;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 4px;
+        }
+        
+        .instructions h3 {
+            color: #1e40af;
+            margin-bottom: 15px;
+            font-size: 16px;
+        }
+        
+        .instructions ol {
+            margin-left: 20px;
+            color: #1f2937;
+        }
+        
+        .instructions li {
+            margin: 10px 0;
+            line-height: 1.6;
+        }
+        
+        .button {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 500;
+            margin: 10px 5px;
+            transition: background 0.3s;
+        }
+        
+        .button:hover {
+            background: #5568d3;
+        }
+        
+        .button.secondary {
+            background: #6b7280;
+        }
+        
+        .button.secondary:hover {
+            background: #4b5563;
+        }
+        
+        .footer {
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #e5e7eb;
+            text-align: center;
+            color: #6b7280;
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div th:if="${hasError}">
+            <div class="error-icon">❌</div>
+            <h1>Authorization Failed</h1>
+            <p class="subtitle">There was an error during the authorization process</p>
+            
+            <div class="info-box error">
+                <div class="info-item">
+                    <span class="info-label">Error</span>
+                    <div class="info-value" th:text="${error}">error_code</div>
+                </div>
+                <div class="info-item" th:if="${errorDescription}">
+                    <span class="info-label">Description</span>
+                    <div class="info-value" th:text="${errorDescription}">Error description</div>
+                </div>
+            </div>
+            
+            <a href="/" class="button">Back to Home</a>
+        </div>
+        
+        <div th:unless="${hasError}">
+            <div class="success-icon">✓</div>
+            <h1>Authorization Successful!</h1>
+            <p class="subtitle">OAuth 2.1 Authorization Code Flow - Step 1 Complete</p>
+            
+            <div class="info-box">
+                <div class="info-item">
+                    <span class="info-label">Authorization Code</span>
+                    <div class="info-value" th:text="${code}">authorization_code_here</div>
+                </div>
+                <div class="info-item" th:if="${state}">
+                    <span class="info-label">State</span>
+                    <div class="info-value" th:text="${state}">state_value</div>
+                </div>
+            </div>
+            
+            <div class="instructions">
+                <h3>📝 Next Steps: Exchange Code for Tokens</h3>
+                <ol>
+                    <li><strong>Copy the authorization code</strong> from above</li>
+                    <li><strong>Use the code verifier</strong> from your original PKCE challenge</li>
+                    <li><strong>Make a POST request</strong> to the token endpoint (see example below)</li>
+                </ol>
+            </div>
+            
+            <div class="code-snippet">
+<span class="comment"># Step 2: Exchange authorization code for access token</span>
+curl -X POST <span th:text="${tokenEndpoint}">http://localhost:9000/oauth2/token</span> \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "grant_type=authorization_code" \
+  -d "code=<span class="variable" th:text="${code}">YOUR_CODE</span>" \
+  -d "redirect_uri=http://127.0.0.1:8080/authorized" \
+  -d "client_id=public-client" \
+  -d "code_verifier=<span class="variable">YOUR_CODE_VERIFIER</span>"
+
+<span class="comment"># For confidential clients, use Basic Auth:</span>
+curl -X POST <span th:text="${tokenEndpoint}">http://localhost:9000/oauth2/token</span> \
+  -u confidential-client:secret \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "grant_type=authorization_code" \
+  -d "code=<span class="variable" th:text="${code}">YOUR_CODE</span>" \
+  -d "redirect_uri=http://127.0.0.1:8080/authorized" \
+  -d "code_verifier=<span class="variable">YOUR_CODE_VERIFIER</span>"
+            </div>
+            
+            <div class="info-box">
+                <div class="info-item">
+                    <span class="info-label">⚠️ Important Notes</span>
+                    <ul style="margin-left: 20px; margin-top: 10px; color: #374151; line-height: 1.8;">
+                        <li>Authorization codes are <strong>single-use</strong> and expire quickly (typically 5-10 minutes)</li>
+                        <li>You must use the same <code>redirect_uri</code> as in the authorization request</li>
+                        <li>For public clients, the <code>code_verifier</code> parameter is required (PKCE)</li>
+                        <li>The code verifier must match the code challenge used in the authorization request</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div style="text-align: center; margin-top: 30px;">
+                <a href="/" class="button">Back to Home</a>
+                <a href="/oauth2/authorize?response_type=code&client_id=public-client&redirect_uri=http://127.0.0.1:8080/authorized&scope=openid%20profile%20read" class="button secondary">Start New Authorization</a>
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>OAuth 2.1 Authorization Server</p>
+            <p>Powered by Spring Authorization Server 7.0.0</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/src/main/resources/templates/logged-out.html b/src/main/resources/templates/logged-out.html
new file mode 100644
index 0000000..c6d9f26
--- /dev/null
+++ b/src/main/resources/templates/logged-out.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Logged Out - OAuth 2.1 Server</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 500px;
+            width: 100%;
+            padding: 40px;
+            text-align: center;
+        }
+        
+        .icon {
+            width: 80px;
+            height: 80px;
+            background: #3b82f6;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 30px;
+            font-size: 40px;
+        }
+        
+        h1 {
+            color: #1f2937;
+            margin-bottom: 15px;
+            font-size: 28px;
+        }
+        
+        p {
+            color: #6b7280;
+            margin-bottom: 30px;
+            line-height: 1.6;
+        }
+        
+        .button {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            padding: 12px 30px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: background 0.3s;
+        }
+        
+        .button:hover {
+            background: #5568d3;
+        }
+        
+        .footer {
+            margin-top: 40px;
+            padding-top: 20px;
+            border-top: 1px solid #e5e7eb;
+            color: #9ca3af;
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="icon">👋</div>
+        <h1>Logged Out Successfully</h1>
+        <p th:text="${message}">You have been successfully logged out</p>
+        <a href="/" class="button">Return to Home</a>
+        <div class="footer">
+            <p>OAuth 2.1 Authorization Server</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
new file mode 100644
index 0000000..01c8075
--- /dev/null
+++ b/src/main/resources/templates/login.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign in - Heaerie SSO</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Roboto', 'Arial', sans-serif;
+            background-color: #f5f5f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .login-container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
+            padding: 48px 40px 36px;
+            width: 100%;
+            max-width: 450px;
+        }
+
+        .logo-container {
+            text-align: center;
+            margin-bottom: 16px;
+        }
+
+        .logo {
+            font-size: 32px;
+            font-weight: 500;
+            color: #1a73e8;
+            letter-spacing: -0.5px;
+            display: inline-block;
+        }
+
+        .logo-text {
+            display: inline-block;
+        }
+
+        .logo-heaerie {
+            color: #202124;
+            font-weight: 400;
+        }
+
+        .logo-sso {
+            color: #1a73e8;
+            font-weight: 500;
+        }
+
+        .title {
+            text-align: center;
+            font-size: 24px;
+            font-weight: 400;
+            color: #202124;
+            margin-bottom: 8px;
+        }
+
+        .subtitle {
+            text-align: center;
+            font-size: 16px;
+            color: #5f6368;
+            margin-bottom: 24px;
+        }
+
+        .error-message {
+            background-color: #fce8e6;
+            border: 1px solid #f5c6cb;
+            border-radius: 4px;
+            padding: 12px 16px;
+            margin-bottom: 24px;
+            color: #d93025;
+            font-size: 14px;
+            display: none;
+        }
+
+        .error-message.show {
+            display: block;
+        }
+
+        .logout-message {
+            background-color: #e8f5e9;
+            border: 1px solid #c3e6cb;
+            border-radius: 4px;
+            padding: 12px 16px;
+            margin-bottom: 24px;
+            color: #1e8e3e;
+            font-size: 14px;
+            display: none;
+        }
+
+        .logout-message.show {
+            display: block;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .form-group label {
+            display: block;
+            font-size: 14px;
+            color: #202124;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 13px 15px;
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            font-size: 16px;
+            color: #202124;
+            transition: border-color 0.2s, box-shadow 0.2s;
+            outline: none;
+        }
+
+        .form-group input:focus {
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
+        }
+
+        .form-group input::placeholder {
+            color: #5f6368;
+        }
+
+        .form-actions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+        }
+
+        .remember-me {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #202124;
+        }
+
+        .remember-me input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            cursor: pointer;
+            accent-color: #1a73e8;
+        }
+
+        .forgot-link {
+            color: #1a73e8;
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .forgot-link:hover {
+            text-decoration: underline;
+        }
+
+        .btn-container {
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+            margin-top: 32px;
+        }
+
+        .btn {
+            padding: 10px 24px;
+            border: none;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.2s, box-shadow 0.2s;
+            outline: none;
+        }
+
+        .btn-secondary {
+            background-color: white;
+            color: #1a73e8;
+            border: 1px solid #dadce0;
+        }
+
+        .btn-secondary:hover {
+            background-color: #f8f9fa;
+            border-color: #d2e3fc;
+        }
+
+        .btn-primary {
+            background-color: #1a73e8;
+            color: white;
+            min-width: 80px;
+        }
+
+        .btn-primary:hover {
+            background-color: #1765cc;
+            box-shadow: 0 1px 2px 0 rgba(26,115,232,0.45), 0 1px 3px 1px rgba(26,115,232,0.3);
+        }
+
+        .btn-primary:active {
+            background-color: #1557b0;
+        }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            margin: 24px 0;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: "";
+            flex: 1;
+            height: 1px;
+            background-color: #dadce0;
+        }
+
+        .divider span {
+            padding: 0 16px;
+            color: #5f6368;
+            font-size: 14px;
+        }
+
+        .help-links {
+            text-align: center;
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid #dadce0;
+        }
+
+        .help-links a {
+            color: #5f6368;
+            text-decoration: none;
+            font-size: 12px;
+            margin: 0 8px;
+        }
+
+        .help-links a:hover {
+            color: #202124;
+            text-decoration: underline;
+        }
+
+        .language-selector {
+            text-align: center;
+            margin-top: 16px;
+        }
+
+        .language-selector select {
+            padding: 8px 12px;
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            font-size: 14px;
+            color: #5f6368;
+            background-color: white;
+            cursor: pointer;
+            outline: none;
+        }
+
+        .language-selector select:focus {
+            border-color: #1a73e8;
+        }
+
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 32px 24px 24px;
+            }
+
+            .btn-container {
+                flex-direction: column-reverse;
+            }
+
+            .btn {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="logo-container">
+            <div class="logo">
+                <span class="logo-text">
+                    <span class="logo-heaerie">heaerie</span>
+                    <span class="logo-sso"> sso</span>
+                </span>
+            </div>
+        </div>
+
+        <h1 class="title">Sign in</h1>
+        <p class="subtitle">to continue to OAuth 2.1</p>
+
+        <div class="error-message" id="errorMessage" th:if="${param.error}">
+            Invalid username or password
+        </div>
+
+        <div class="logout-message" id="logoutMessage" th:if="${param.logout}">
+            You have been logged out
+        </div>
+
+        <form method="post" th:action="@{/login}" id="loginForm">
+            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
+            
+            <div class="form-group">
+                <label for="username">Email or username</label>
+                <input 
+                    type="text" 
+                    id="username" 
+                    name="username" 
+                    placeholder="Enter your email or username"
+                    required 
+                    autofocus
+                    autocomplete="username"
+                />
+            </div>
+
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input 
+                    type="password" 
+                    id="password" 
+                    name="password" 
+                    placeholder="Enter your password"
+                    required
+                    autocomplete="current-password"
+                />
+            </div>
+
+            <div class="form-actions">
+                <label class="remember-me">
+                    <input type="checkbox" name="remember-me" id="remember-me"/>
+                    <span>Remember me</span>
+                </label>
+                <a href="#" class="forgot-link">Forgot password?</a>
+            </div>
+
+            <div class="btn-container">
+                <button type="button" class="btn btn-secondary" onclick="window.location.href='/'">Cancel</button>
+                <button type="submit" class="btn btn-primary">Sign in</button>
+            </div>
+        </form>
+
+        <div class="help-links">
+            <a href="#">Help</a>
+            <a href="#">Privacy</a>
+            <a href="#">Terms</a>
+        </div>
+
+        <div class="language-selector">
+            <select>
+                <option value="en">English (United States)</option>
+                <option value="es">Español</option>
+                <option value="fr">Français</option>
+                <option value="de">Deutsch</option>
+                <option value="zh">中文</option>
+            </select>
+        </div>
+    </div>
+
+    <script>
+        // Add smooth focus effect
+        const inputs = document.querySelectorAll('input[type="text"], input[type="password"]');
+        inputs.forEach(input => {
+            input.addEventListener('focus', function() {
+                this.parentElement.style.transform = 'scale(1.01)';
+            });
+            input.addEventListener('blur', function() {
+                this.parentElement.style.transform = 'scale(1)';
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/test-oauth.sh b/test-oauth.sh
index dad62aa..b788651 100755
--- a/test-oauth.sh
+++ b/test-oauth.sh
@@ -7,16 +7,23 @@
 CLIENT_ID="public-client"
 CONFIDENTIAL_CLIENT_ID="confidential-client"
 CONFIDENTIAL_CLIENT_SECRET="secret"
-REDIRECT_URI="http://127.0.0.1:8080/authorized"
+REDIRECT_URI="http://localhost:9000/authorized"
 
 echo "================================"
 echo "OAuth 2.1 Authorization Server"
 echo "================================"
 echo ""
 
-# 1. Test Well-Known Configuration
-echo "1. Fetching Well-Known Configuration..."
-curl -s "$BASE_URL/.well-known/oauth-authorization-server" | jq '.' || echo "Server not running or jq not installed"
+# 1. Test Server Status
+echo "1. Testing Server Status..."
+SERVER_STATUS=$(curl -s "$BASE_URL/")
+if [ $? -eq 0 ]; then
+    echo "   ✓ Server is running on $BASE_URL"
+    echo "   Response: $SERVER_STATUS"
+else
+    echo "   ✗ Server is not running. Please start it with: ./mvnw spring-boot:run"
+    exit 1
+fi
 echo ""
 
 # 2. Generate PKCE Challenge
@@ -37,6 +44,9 @@
 echo "   After approval, you'll be redirected to:"
 echo "   $REDIRECT_URI?code=AUTHORIZATION_CODE&state=xyz123"
 echo ""
+echo "   NOTE: The authorization code will be displayed on the callback page."
+echo "   Copy it from the 'Authorization Code' field on the page."
+echo ""
 
 # 4. Prompt for Authorization Code
 read -p "4. Enter the authorization code from redirect: " AUTH_CODE
@@ -53,16 +63,31 @@
         -d "client_id=$CLIENT_ID" \
         -d "code_verifier=$CODE_VERIFIER")
     
-    echo "$TOKEN_RESPONSE" | jq '.' || echo "$TOKEN_RESPONSE"
+    if command -v jq &> /dev/null; then
+        echo "$TOKEN_RESPONSE" | jq '.'
+    else
+        echo "$TOKEN_RESPONSE"
+    fi
     
-    ACCESS_TOKEN=$(echo "$TOKEN_RESPONSE" | jq -r '.access_token')
-    REFRESH_TOKEN=$(echo "$TOKEN_RESPONSE" | jq -r '.refresh_token')
+    if command -v jq &> /dev/null; then
+        ACCESS_TOKEN=$(echo "$TOKEN_RESPONSE" | jq -r '.access_token')
+        REFRESH_TOKEN=$(echo "$TOKEN_RESPONSE" | jq -r '.refresh_token')
+    else
+        echo "   Note: Install 'jq' for better JSON formatting"
+        ACCESS_TOKEN=$(echo "$TOKEN_RESPONSE" | grep -o '"access_token":"[^"]*"' | cut -d'"' -f4)
+        REFRESH_TOKEN=$(echo "$TOKEN_RESPONSE" | grep -o '"refresh_token":"[^"]*"' | cut -d'"' -f4)
+    fi
     echo ""
     
     # 6. Test UserInfo Endpoint
     if [ "$ACCESS_TOKEN" != "null" ] && [ -n "$ACCESS_TOKEN" ]; then
         echo "6. Fetching UserInfo..."
-        curl -s -H "Authorization: Bearer $ACCESS_TOKEN" "$BASE_URL/userinfo" | jq '.' || echo "Failed to fetch userinfo"
+        USERINFO=$(curl -s -H "Authorization: Bearer $ACCESS_TOKEN" "$BASE_URL/userinfo")
+        if command -v jq &> /dev/null; then
+            echo "$USERINFO" | jq '.'
+        else
+            echo "$USERINFO"
+        fi
         echo ""
         
         # 7. Test Refresh Token
@@ -74,10 +99,17 @@
                 -d "refresh_token=$REFRESH_TOKEN" \
                 -d "client_id=$CLIENT_ID")
             
-            echo "$REFRESH_RESPONSE" | jq '.' || echo "$REFRESH_RESPONSE"
+            if command -v jq &> /dev/null; then
+                echo "$REFRESH_RESPONSE" | jq '.'
+            else
+                echo "$REFRESH_RESPONSE"
+            fi
             echo ""
         fi
     fi
+else
+    echo "   Skipping token exchange (no authorization code provided)"
+    echo ""
 fi
 
 # 8. Test Client Credentials Flow
@@ -88,9 +120,26 @@
     -d "grant_type=client_credentials" \
     -d "scope=read write")
 
-echo "$CLIENT_CREDS_RESPONSE" | jq '.' || echo "$CLIENT_CREDS_RESPONSE"
+if command -v jq &> /dev/null; then
+    echo "$CLIENT_CREDS_RESPONSE" | jq '.'
+else
+    echo "$CLIENT_CREDS_RESPONSE"
+fi
 echo ""
 
 echo "================================"
-echo "Testing Complete!"
+echo "✓ Testing Complete!"
 echo "================================"
+echo ""
+echo "Summary:"
+echo "  - Server: Running on $BASE_URL"
+echo "  - Callback URL: $REDIRECT_URI"
+echo "  - Public Client: $CLIENT_ID"
+echo "  - Confidential Client: $CONFIDENTIAL_CLIENT_ID"
+echo ""
+echo "Next steps:"
+echo "  1. Open the authorization URL in your browser"
+echo "  2. Login with user/password or admin/admin"
+echo "  3. Copy the authorization code from the callback page"
+echo "  4. Run this script again and paste the code when prompted"
+echo ""