diff --git a/src/main/resources/templates/views/common/error/error.html b/src/main/resources/templates/views/common/error/error.html
deleted file mode 100644
index e5239b2..0000000
--- a/src/main/resources/templates/views/common/error/error.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <meta charset="utf-8">
-
-    <meta charset="UTF-8"/>
-    <title th:text="#{title.html}">개발자 포털</title>
-    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
-    <meta content="index, follow" name="robots"/>
-    <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
-</head>
-<body>
-<div id="wrap" class="wrap_top">
-    <section class="content pop">
-        <div class="sub_title2">
-            <p class="title2 add" style="display: none;">에러페이지</p>
-        </div>
-
-        <div class="content_wrap cp_box">
-            <div class="inner i_cs9">
-                <div class="tit_logo2 m-only">
-                    <img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
-                </div>
-                <div class="tit_logo2 pc-only">
-                    <img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
-                </div>
-                <div class="email_tit m-only">
-                    <p>일시적인 장애로<br> 서비스가 중단되었습니다.</p>
-                </div>
-                <div class="email_tit pc-only">
-                    <p>일시적인 장애로 서비스가 중단되었습니다.</p>
-                </div>
-                <div class="form_type top_m">
-                    <div class="i_complete m-only">
-                        <img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="i_complete pc-only">
-                        <img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="complete_txt" th:if="${errorMessage}">
-                        <p th:text="${errorMessage}"></p>
-                    </div>
-                    <div class="cs_info">
-                        <p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-
-
-    </section>
-</div>
-</body>
-</html>
diff --git a/src/main/resources/templates/views/common/error/notFoundError.html b/src/main/resources/templates/views/common/error/notFoundError.html
deleted file mode 100644
index 9edd1a1..0000000
--- a/src/main/resources/templates/views/common/error/notFoundError.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <meta charset="utf-8">
-
-    <meta charset="UTF-8"/>
-    <title th:text="#{title.html}">개발자 포털</title>
-    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
-    <meta content="index, follow" name="robots"/>
-    <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
-</head>
-<body>
-<div id="wrap" class="wrap_top">
-    <section class="content pop">
-        <div class="sub_title2">
-            <p class="title2 add" style="display: none;">에러페이지</p>
-        </div>
-
-        <div class="content_wrap cp_box">
-            <div class="inner i_cs9">
-                <div class="tit_logo2 m-only">
-                    <img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
-                </div>
-                <div class="tit_logo2 pc-only">
-                    <img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
-                </div>
-                <div class="email_tit m-only">
-                    <p>찾을 수 없습니다.</p>
-                </div>
-                <div class="email_tit pc-only">
-                    <p>찾을 수 없습니다.</p>
-                </div>
-                <div class="form_type top_m">
-                    <div class="i_complete m-only">
-                        <img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="i_complete pc-only">
-                        <img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="complete_txt">
-                        <p>서비스 이용에 불편을 드려 죄송합니다.<br>
-                            빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
-                    </div>
-                    <div class="cs_info">
-                        <p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-
-
-    </section>
-</div>
-</body>
-</html>
diff --git a/src/main/resources/templates/views/common/error/validationError.html b/src/main/resources/templates/views/common/error/validationError.html
deleted file mode 100644
index db22e55..0000000
--- a/src/main/resources/templates/views/common/error/validationError.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <meta charset="utf-8">
-
-    <meta charset="UTF-8"/>
-    <title th:text="#{title.html}">개발자 포털</title>
-    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
-    <meta content="index, follow" name="robots"/>
-    <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
-</head>
-<body>
-<div id="wrap" class="wrap_top">
-    <section class="content pop">
-        <div class="sub_title2">
-            <p class="title2 add" style="display: none;">에러페이지</p>
-        </div>
-
-        <div class="content_wrap cp_box">
-            <div class="inner i_cs9">
-                <div class="tit_logo2 m-only">
-                    <img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
-                </div>
-                <div class="tit_logo2 pc-only">
-                    <img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
-                </div>
-                <div class="email_tit m-only">
-                    <p>알수 없는 오류가 발생했습니다.</p>
-                </div>
-                <div class="email_tit pc-only">
-                    <p>알수 없는 오류가 발생했습니다.</p>
-                </div>
-                <div class="form_type top_m">
-                    <div class="i_complete m-only">
-                        <img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="i_complete pc-only">
-                        <img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
-                    </div>
-                    <div class="complete_txt">
-                        <p>서비스 이용에 불편을 드려 죄송합니다.<br>
-                            빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
-                    </div>
-                    <div class="cs_info">
-                        <p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-
-
-    </section>
-</div>
-</body>
-</html>
diff --git a/src/main/resources/templates/views/error.html b/src/main/resources/templates/views/error.html
index 3615dac..c1d8f53 100644
--- a/src/main/resources/templates/views/error.html
+++ b/src/main/resources/templates/views/error.html
@@ -1,67 +1,240 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<html xmlns:th="http://www.thymeleaf.org" lang="ko">
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta http-equiv="Cache-Control" content="no-cache">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
-    <meta charset="utf-8">
+    <title>서비스 오류 - API Portal</title>
+    <style>
+        /* Reset */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
-    <meta charset="UTF-8"/>
-    <title th:text="#{title.html}">개발자 포털</title>
-    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
-    <meta content="index, follow" name="robots"/>
-    <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
-<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/common2.css}">-->
+        /* Font */
+        @font-face {
+            font-family: 'Noto Sans KR';
+            font-weight: 400;
+            src: local('Noto Sans KR Regular');
+        }
+        @font-face {
+            font-family: 'Noto Sans KR';
+            font-weight: 700;
+            src: local('Noto Sans KR Bold');
+        }
+
+        body {
+            font-family: 'Noto Sans KR', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .error-container {
+            background-color: #ebfbff;
+            border-radius: 12px;
+            padding: 70px 53px 60px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 50px;
+            max-width: 700px;
+            width: 100%;
+        }
+
+        .error-icon {
+            width: 220px;
+            height: 220px;
+        }
+
+        .error-icon img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .error-title {
+            font-size: 26px;
+            font-weight: 700;
+            color: #212529;
+            text-align: center;
+            line-height: 1.4;
+        }
+
+        .error-description {
+            font-size: 20px;
+            font-weight: 400;
+            color: #212529;
+            text-align: center;
+            line-height: 1.6;
+        }
+
+        .error-buttons {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            height: 50px;
+            padding: 10px 24px;
+            border-radius: 12px;
+            border: none;
+            cursor: pointer;
+            text-decoration: none;
+            font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+            font-size: 22px;
+            font-weight: 700;
+            color: #ffffff;
+            transition: opacity 0.2s ease, transform 0.2s ease;
+        }
+
+        .btn:hover {
+            opacity: 0.9;
+            transform: translateY(-2px);
+        }
+
+        .btn:active {
+            transform: translateY(0);
+        }
+
+        .btn-retry {
+            background-color: #d4a553;
+        }
+
+        .btn-home {
+            background-color: #00a1d7;
+        }
+
+        .btn-icon {
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+        }
+
+        /* Error Message Box */
+        .error-message-box {
+            background-color: #fff5f5;
+            border: 1px solid #feb2b2;
+            border-radius: 8px;
+            padding: 16px 24px;
+            max-width: 100%;
+            width: 100%;
+        }
+
+        .error-message-label {
+            font-size: 14px;
+            font-weight: 700;
+            color: #c53030;
+            margin-bottom: 8px;
+        }
+
+        .error-message-text {
+            font-size: 14px;
+            color: #742a2a;
+            line-height: 1.5;
+            word-break: break-word;
+            white-space: pre-wrap;
+        }
+
+        /* Responsive */
+        @media screen and (max-width: 600px) {
+            .error-container {
+                padding: 50px 30px 40px;
+                gap: 35px;
+            }
+
+            .error-icon {
+                width: 160px;
+                height: 160px;
+            }
+
+            .error-title {
+                font-size: 20px;
+            }
+
+            .error-description {
+                font-size: 16px;
+            }
+
+            .error-buttons {
+                flex-direction: column;
+                gap: 16px;
+                width: 100%;
+            }
+
+            .btn {
+                font-size: 18px;
+                height: 46px;
+                width: 100%;
+            }
+
+            .btn-icon {
+                width: 20px;
+                height: 20px;
+            }
+
+            .error-message-box {
+                padding: 12px 16px;
+            }
+
+            .error-message-label {
+                font-size: 13px;
+            }
+
+            .error-message-text {
+                font-size: 13px;
+            }
+        }
+    </style>
 </head>
 <body>
-<div id="wrap" class="wrap_top">
-<section class="content pop">
-    <div class="sub_title2">
-        <p class="title2 add" style="display: none;">에러페이지</p>
-    </div>
+    <div class="error-container">
+        <!-- Error Icon -->
+        <div class="error-icon">
+            <!-- 3D Speech Bubble Error Icon - Base64 encoded or use th:src for server image -->
+          <img th:src="@{/img/error_3d.png}" alt="에러">
+        </div>
 
-    <div class="content_wrap cp_box">
-        <div class="inner i_cs9">
-            <div class="tit_logo2 m-only">
-                <img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
-            </div>
-            <div class="tit_logo2 pc-only">
-                <img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
-            </div>
-            <div class="email_tit m-only">
-                <p>일시적인 장애로<br> 서비스가 중단되었습니다.</p>
-            </div>
-            <div class="email_tit pc-only">
-                <p>일시적인 장애로 서비스가 중단되었습니다.</p>
-            </div>
-            <div class="form_type top_m">
-                <div class="i_complete m-only">
-                    <img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
-                </div>
-                <div class="i_complete pc-only">
-                    <img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
-                </div>
-                <div class="complete_txt">
-                    <p>서비스 이용에 불편을 드려 죄송합니다.<br>
-                        빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
-                </div>
-                <div class="cs_info">
-                    <p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
-                </div>
-            </div>
+        <!-- Error Title -->
+        <h1 class="error-title">일시적인 장애로 서비스가 중단되었습니다.</h1>
 
+        <!-- Error Description -->
+        <p class="error-description">
+            서비스 이용에 불편을 드려 죄송합니다.<br>
+            빠른 서비스를 제공할 수 있게 준비하겠습니다.
+        </p>
 
+        <!-- Error Message (서버에서 전달된 에러 메시지가 있을 경우 표시) -->
+        <div th:if="${errorMessage}" class="error-message-box">
+            <p class="error-message-label">오류 상세</p>
+            <p class="error-message-text" th:text="${errorMessage}"></p>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="error-buttons">
+            <!-- Home Button -->
+            <a th:href="@{/}" href="/" class="btn btn-home">
+                <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                    <polyline points="9 22 9 12 15 12 15 22"/>
+                </svg>
+                <span>홈으로 돌아가기</span>
+            </a>
         </div>
     </div>
-
-
-</section>
-</div>
 </body>
 </html>
