diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 129a985..5f84bbe 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,168 +1,153 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layouts/defaultLayout}">
 <head>
-    <meta charset="UTF-8">
-    <title>PETTY - 로그인</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #fdf7e4;
-            color: #333;
-            padding: 20px;
-        }
-        h1 {
-            color: #f1c40f;
-            text-align: center;
-        }
-        .login-container {
-            max-width: 400px;
-            margin: 0 auto;
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        div {
-            margin-bottom: 15px;
-        }
-        label {
-            font-weight: bold;
-            color: #f39c12;
-            display: block;
-            margin-bottom: 5px;
-        }
-        input[type="email"], input[type="password"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #f39c12;
-            border-radius: 4px;
-            box-sizing: border-box;
-        }
-        button {
-            width: 100%;
-            padding: 10px;
-            background-color: #f39c12;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            font-size: 16px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #f1c40f;
-        }
-        .social-login {
-            margin-top: 20px;
-            text-align: center;
-        }
-        .social-login hr {
-            margin: 20px 0;
-            border: 0;
-            border-top: 1px solid #ddd;
-        }
-        /* Common social button styles */
-        .social-button {
-            width: 100%;
-            padding: 10px;
-            border: none;
-            border-radius: 4px;
-            font-size: 16px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 10px; /* Add some space between social buttons */
-        }
-        .social-icon {
-            margin-right: 10px;
-            width: 20px;
-            height: 20px;
-        }
+    <title>로그인</title>
+    <th:block layout:fragment="css">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
+        <link rel="stylesheet" th:href="@{/css/bootstrap-overrides.css}"/>
+        <style>
+            .login-form-container {
+                max-width: 450px;
+                margin: 0 auto;
+            }
 
-        /* GitHub button specific styles */
-        .github-button {
-            background-color: #333;
-            color: white;
-        }
-        .github-button:hover {
-            background-color: #555;
-        }
+            .social-login-divider {
+                display: flex;
+                align-items: center;
+                text-align: center;
+                color: var(--secondary-text-color);
+                margin: 1.5rem 0;
+            }
 
-        /* Kakao button specific styles */
-        .kakao-button {
-            background-color: #FEE500; /* Kakao yellow */
-            color: #3C1E1E; /* Dark brown for text */
-        }
-        .kakao-button:hover {
-            background-color: #FFDE00; /* Lighter yellow on hover */
-        }
-        .kakao-button .social-icon {
-            fill: #3C1E1E; /* Fill color for Kakao icon */
-        }
-    </style>
+            .social-login-divider::before,
+            .social-login-divider::after {
+                content: '';
+                flex: 1;
+                border-bottom: 1px solid var(--input-border-color);
+            }
+
+            .social-login-divider:not(:empty)::before {
+                margin-right: .5em;
+            }
+
+            .social-login-divider:not(:empty)::after {
+                margin-left: .5em;
+            }
+
+            .social-login-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+                width: 100%;
+                margin-bottom: 10px;
+                padding: 10px;
+                border-radius: var(--border-radius-sm);
+                font-weight: bold;
+                border: 1px solid var(--input-border-color);
+            }
+
+            .social-login-btn img {
+                width: 20px;
+                height: 20px;
+            }
+
+            .social-login-btn.kakao {
+                background-color: #FEE500;
+                color: #191919;
+                border-color: #FEE500;
+            }
+
+            .social-login-btn.github {
+                background-color: #333;
+                color: white;
+                border-color: #333;
+            }
+        </style>
+    </th:block>
 </head>
 <body>
-<h1>로그인</h1>
-<div class="login-container">
-    <div>
-        <label for="username">아이디(email):</label>
-        <input type="email" id="username" required>
-    </div>
-    <div>
-        <label for="password">비밀번호:</label>
-        <input type="password" id="password" required>
-    </div>
-    <div>
-        <button onclick="login()">로그인</button>
-    </div>
+<th:block layout:fragment="content">
+    <div class="container mt-4">
+        <div class="p-md-4 p-3 bg-white rounded shadow-sm">
+            <div class="login-form-container">
+                <h1 class="text-center mb-4">로그인</h1>
+
+                <form id="loginForm">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">아이디 (이메일)</label>
+                        <input type="email" class="form-control" id="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">비밀번호</label>
+                        <input type="password" class="form-control" id="password" required>
+                    </div>
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-primary">로그인</button>
+                    </div>
+                </form>
+
 
-    <div class="social-login">
-        <hr>
-        <p>소셜 계정으로 로그인</p>
-
-        <button class="social-button kakao-button" onclick="location.href='/oauth2/authorization/kakao'">
-            <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <!-- 카카오톡 말풍선 아이콘 스타일 -->
-                <path fill="black" d="M12 2C6.48 2 2 5.94 2 10.5c0 2.67 1.64 5.03 4.18 6.5-.2.75-.7 2.05-.8 2.3 0 0-.01.1.05.14.06.04.14 0 .14 0 .18-.03 2.1-1.4 2.96-2.03.77.16 1.57.26 2.47.26 5.52 0 10-3.94 10-8.5S17.52 2 12 2z"/>
-            </svg>
-            카카오로 로그인
-        </button>
-
-        <button class="social-button github-button" onclick="location.href='/oauth2/authorization/github'">
-            <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-            </svg>
-            GitHub로 로그인
-        </button>
+                <div class="social-login-buttons">
+                    <a href="/oauth2/authorization/kakao" class="btn social-login-btn kakao text-decoration-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                             style="width:20px; height:20px; margin-right: 10px;">
+                            <path fill="#191919"
+                                  d="M12 2C6.48 2 2 5.94 2 10.5c0 2.67 1.64 5.03 4.18 6.5-.2.75-.7 2.05-.8 2.3 0 0-.01.1.05.14.06.04.14 0 .14 0 .18-.03 2.1-1.4 2.96-2.03.77.16 1.57.26 2.47.26 5.52 0 10-3.94 10-8.5S17.52 2 12 2z"/>
+                        </svg>
+                        카카오로 로그인
+                    </a>
+
+                    <a href="/oauth2/authorization/github" class="btn social-login-btn github text-decoration-none">
+                        <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"
+                             style="width:20px; height:20px; margin-right: 10px;">
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                        </svg>
+                        GitHub으로 로그인
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
-</div>
-
-<script>
-    // 로그인 함수
-    async function login() {
-        const username = document.getElementById('username').value;
-        const password = document.getElementById('password').value;
-
-        try {
-            const response = await fetch('/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ username, password })
-            });
-
-            if (response.ok) {
-                window.location.href = '/';
-                // }
-            } else {
-                alert('로그인 실패');
+</th:block>
+
+<th:block layout:fragment="script">
+    <script>
+        // form의 submit 이벤트를 가로채서 처리
+        document.getElementById('loginForm').addEventListener('submit', function (event) {
+            event.preventDefault(); // 폼의 기본 제출 동작을 막음
+            login(); // 기존 login 함수 호출
+        });
+
+        // 로그인 함수
+        async function login() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            try {
+                const response = await fetch('/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({username, password})
+                });
+
+                if (response.ok) {
+                    window.location.href = '/'; // 로그인 성공 시 메인 페이지로 이동
+                } else {
+                    const errorText = await response.text();
+                    // 서버에서 커스텀 에러 메시지를 보냈다면 표시, 아니면 일반 메시지
+                    alert(errorText || '아이디 또는 비밀번호가 일치하지 않습니다.');
+                }
+            } catch (error) {
+                console.error('로그인 에러:', error);
+                alert('로그인 중 오류가 발생했습니다.');
             }
-        } catch (error) {
-            console.error('로그인 에러:', error);
-            alert('로그인 중 오류가 발생했습니다.');
         }
-    }
-</script>
+    </script>
+</th:block>
 </body>
 </html>
\ No newline at end of file
