diff --git a/sso-demo/public/css/style.css b/sso-demo/public/css/style.css
new file mode 100644
index 0000000..f671d34
--- /dev/null
+++ b/sso-demo/public/css/style.css
@@ -0,0 +1,138 @@
+/* General Body Styles */
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    margin: 0;
+    background-color: #f8f9fa;
+    color: #333;
+}
+
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+/* Notice Bar */
+.notice-bar {
+    background-color: #eef6ff;
+    border-bottom: 1px solid #d1e0f0;
+    padding: 12px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.notice-bar p {
+    margin: 0;
+}
+
+/* CTA Button Styles */
+.cta-button {
+    height: 44px;
+    padding: 0 24px;
+    border: none;
+    border-radius: 8px;
+    background-color: #A19FE7;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cta-button:hover {
+    background-color: #583ac7;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Header/Hero Section */
+.hero {
+    text-align: center;
+    padding: 120px 24px 60px; /* Add padding top to account for fixed notice bar */
+}
+
+.hero h1 {
+    font-size: 40px;
+    font-weight: 800;
+    margin-bottom: 16px;
+}
+
+.hero .status-text {
+    font-size: 18px;
+    color: #555;
+}
+
+.hero .status-text.logged-out {
+    font-size: 16px;
+    color: #777;
+}
+
+/* Content Section */
+.content-section {
+    padding: 48px 0;
+}
+
+.content-section h2 {
+    text-align: center;
+    font-size: 28px;
+    margin-bottom: 32px;
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+}
+
+.card {
+    background-color: white;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    padding: 24px;
+    text-align: left;
+}
+
+.card img {
+    width: 100%;
+    border-radius: 8px;
+    margin-bottom: 16px;
+}
+
+.card h3 {
+    margin-top: 0;
+    font-size: 20px;
+}
+
+.login-prompt {
+    text-align: center;
+    padding: 48px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .notice-bar {
+        flex-direction: column;
+        padding: 12px;
+    }
+
+    .notice-bar p {
+        margin-bottom: 8px;
+    }
+
+    .hero {
+        padding-top: 150px;
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/sso-demo/public/sso_popup.html b/sso-demo/public/sso_popup.html
index d7e61fa..dc34a72 100644
--- a/sso-demo/public/sso_popup.html
+++ b/sso-demo/public/sso_popup.html
@@ -2,46 +2,57 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>SSO Login</title>
+    <title>Baron SSO Login</title>
+    <link rel="stylesheet" href="/css/style.css">
     <style>
-        body { font-family: sans-serif; text-align: center; padding: 20px; }
-        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
+        body {
+            font-family: system-ui, sans-serif;
+            text-align: center;
+            padding: 40px 20px;
+            background-color: #f8f9fa;
+        }
+        h2 {
+            font-size: 24px;
+            margin-bottom: 12px;
+        }
     </style>
 </head>
 <body>
-    <h2>Simulated SSO Provider</h2>
-    <p>Click the button below to simulate a successful login.</p>
-    <button id="confirm-login-btn">Confirm Login</button>
+    <h2>Baron SSO Provider</h2>
+    <p>아래 버튼을 클릭하면 로그인이 완료됩니다.</p>
+    <button id="confirm-login-btn" class="cta-button">Confirm Login</button>
 
     <script>
         document.getElementById('confirm-login-btn').addEventListener('click', () => {
-            // --- Create a dummy JWT for demonstration ---
-            // Header (no changes needed)
-            const header = { alg: 'HS256', typ: 'JWT' };
+            // --- This script now creates a dummy JWT with a dynamic issuer ---
+            
+            const header = {
+                alg: "RS256", // Using RS256 as it's common for SSO
+                typ: "JWT",
+                kid: "simulated-key-id" // Key ID for JWKS lookup
+            };
             
-            // Payload with a random 'sub' to simulate different users
             const payload = {
-                sub: `sso-user-${Math.random().toString(36).substring(2, 10)}`,
-                name: 'John Doe',
-                iat: Math.floor(Date.now() / 1000)
+                iss: "https://sso.baron.com", // Simulated issuer
+                sub: `baron-user-${Math.random().toString(36).substring(2, 10)}`,
+                name: "Simulated User",
+                iat: Math.floor(Date.now() / 1000),
+                exp: Math.floor(Date.now() / 1000) + (60 * 60) // Expires in 1 hour
             };
 
-            // In a real JWT, the signature would be generated with a secret key.
-            // For the demo, we only need the header and payload.
-            const dummyToken = [
-                btoa(JSON.stringify(header)),
-                btoa(JSON.stringify(payload)),
-                'dummy-signature'
-            ].join('.');
-            // --- End of dummy JWT creation ---
-
-
-            // Send the token back to the parent window that opened the popup
-            // In a real app, the targetOrigin should be the specific URL of your application
+            // In a real scenario, this token would be signed by the SSO provider's private key.
+            // We are sending an unsigned token for structure demonstration. The verification
+            // on the server side will fail if it tries to verify the signature,
+            // but the demo setup is focused on decoding and key fetching.
+            const dummyToken = btoa(JSON.stringify(header)) + '.' + btoa(JSON.stringify(payload)) + '.dummies_signature';
+            
             window.opener.postMessage({
                 type: 'LOGIN_SUCCESS',
                 token: dummyToken
             }, '*');
+
+            // Close the popup after sending the message
+            window.close();
         });
     </script>
 </body>
diff --git a/sso-demo/views/index.ejs b/sso-demo/views/index.ejs
index 59d3a3e..03e4a49 100644
--- a/sso-demo/views/index.ejs
+++ b/sso-demo/views/index.ejs
@@ -3,31 +3,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Express SSO Demo</title>
-    <style>
-        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
-        .user-info { margin-bottom: 20px; }
-        #sso-login-btn, .logout-link {
-            padding: 10px 20px;
-            font-size: 16px;
-            cursor: pointer;
-        }
-    </style>
+    <title>Express SSO Login Demo</title>
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
 
-    <h1>Welcome to the Express SSO Demo</h1>
-
-    <div class="user-info">
+    <!-- 1. Top Notice Bar -->
+    <div class="notice-bar">
         <% if (user) { %>
-            <span>Welcome, <strong><%= user.username %></strong>!</span>
-            <p><a href="/logout" class="logout-link">Logout</a></p>
+            <p>환영합니다, <strong><%= user.username %></strong>!</p>
+            <a href="/logout" class="cta-button">Logout</a>
         <% } else { %>
-            <p>You are not logged in.</p>
-            <button id="sso-login-btn">Login with SSO</button>
+            <p>SSO로 로그인하면 회원 전용 글을 확인할 수 있습니다.</p>
+            <button id="sso-login-btn" class="cta-button">Baron SSO Login</button>
         <% } %>
     </div>
 
+    <div class="container">
+        <!-- 2. Hero/Header Area -->
+        <header class="hero">
+            <h1>SSO LOGIN DEMO</h1>
+            <% if (user) { %>
+                <p class="status-text">Welcome, user!</p>
+            <% } else { %>
+                <p class="status-text logged-out">You are not logged in.</p>
+            <% } %>
+        </header>
+
+        <!-- 3. Content Area -->
+        <main class="content-section">
+            <h2>Blog</h2>
+            <% if (user) { %>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>회원 전용 컨텐츠</h3>
+                        <p>로그인한 사용자에게만 보이는 특별한 컨텐츠입니다.</p>
+                    </div>
+                    <div class="card">
+                        <h3>로그인 버튼 디자인</h3>
+                        <p>일관성 있는 CTA 버튼 디자인 가이드입니다.</p>
+                    </div>
+                    <div class="card">
+                        <h3>SSO 핸들러 로직 분석</h3>
+                        <p>JWT 토큰을 검증하고 세션을 처리하는 과정을 살펴봅니다.</p>
+                    </div>
+                    <div class="card">
+                        <h3>보안 강화 방안</h3>
+                        <p>애플리케이션의 보안을 강화하기 위한 몇 가지 방법입니다.</p>
+                    </div>
+                    <div class="card">
+                        <h3>EJS 템플릿 엔진 활용</h3>
+                        <p>동적 웹 페이지를 만들기 위한 EJS 사용법을 알아봅니다.</p>
+                    </div>
+                    <div class="card">
+                        <h3>CSS 스타일 가이드</h3>
+                        <p>UI의 일관성을 유지하기 위한 스타일 규칙입니다.</p>
+                    </div>
+                </div>
+            <% } else { %>
+                <div class="login-prompt">
+                    <h3>회원 전용 글은 로그인 후 열람 가능합니다.</h3>
+                    <p>상단 버튼을 클릭해 Baron SSO로 로그인해주세요.</p>
+                </div>
+            <% } %>
+        </main>
+    </div>
+
     <script src="/js/sso.js"></script>
 </body>
 </html>
