diff --git a/src/main/resources/static/css/bootstrap-overrides.css b/src/main/resources/static/css/bootstrap-overrides.css
index 11d0773..39091e2 100644
--- a/src/main/resources/static/css/bootstrap-overrides.css
+++ b/src/main/resources/static/css/bootstrap-overrides.css
@@ -160,29 +160,6 @@
     box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-rgb), .25);
 }
 
-/* 네비게이션 탭 (Nav Tabs) */
-.nav-tabs {
-    --bs-nav-tabs-border-color: var(--input-border-color);
-    --bs-nav-tabs-link-hover-border-color: var(--input-border-color) var(--input-border-color) var(--point-color);
-    --bs-nav-tabs-link-active-color: var(--accent-color);
-    --bs-nav-tabs-link-active-bg: var(--card-bg-color);
-    --bs-nav-tabs-link-active-border-color: var(--input-border-color) var(--input-border-color) var(--card-bg-color);
-}
-
-.nav-link {
-    color: var(--secondary-text-color);
-    font-family: 'HakgyoansimDunggeunmisoTTF-B', sans-serif; /* 탭 링크에도 폰트 적용 */
-}
-
-.nav-link:hover, .nav-link:focus {
-    color: var(--point-color);
-}
-
-.nav-tabs .nav-link.active {
-    color: var(--accent-color); /* 활성 탭 텍스트 색상 명확히 */
-    font-weight: bold;
-}
-
 
 /* 카드 (Cards) */
 .card {
diff --git a/src/main/resources/static/css/header.css b/src/main/resources/static/css/header.css
index 25614bd..e2a8790 100644
--- a/src/main/resources/static/css/header.css
+++ b/src/main/resources/static/css/header.css
@@ -31,25 +31,50 @@ header {
 }
 
 header h1 {
-    color: var(--accent-color);
     font-size: 1.8em;
     margin: 0;
 }
 
-header a {
+/* 1. 로고(PETTY) 링크 스타일 */
+.logo-container h1 a {
+    color: var(--accent-color); /* common.css에 정의된 분홍색 변수 */
+    text-decoration: none;
+    /* 로고는 호버 효과가 없어야 하므로 padding, background 등을 초기화합니다. */
+    padding: 0;
+    border-radius: 0;
+}
+.logo-container h1 a:hover {
+    background-color: transparent; /* 호버 시 배경색 변경 없음 */
+    color: var(--accent-color); /* 호버 시 색상 변경 없음 */
+}
+
+
+/* 2. 우측 계정 메뉴(프로필, 로그아웃) 스타일 */
+.account-btn-div a {
+    color: var(--text-color); /* common.css에 정의된 기본 텍스트 색상(갈색 계열) */
     text-decoration: none;
-    color: var(--secondary-text-color);
     font-weight: bold;
+    font-size: 1em; /* 폰트 크기 통일 */
     padding: 8px 12px;
     border-radius: var(--border-radius-md);
-    transition: background-color 0.3s ease, color 0.3s ease;
+    transition: color 0.3s ease;
 }
+.account-btn-div a:hover {
+    color: var(--accent-color); /* 호버 시 분홍색으로 변경 */
+    background-color: transparent; /* 호버 시 배경색은 없도록 처리 */
+}
+
 
-header a:hover {
-    background-color: var(--point-color);
-    color: white;
+/* 3. 사용자 이름 텍스트 스타일 */
+#userInfo {
+    color: var(--text-color);
+    font-weight: bold;
+    font-size: 1em;
+    padding: 8px 12px; /* 링크와 여백을 맞추기 위해 추가 */
 }
 
+
+
 /* Menu Icon (Hamburger) Styles */
 .menu-icon {
     width: 30px;
@@ -90,7 +115,7 @@ header a:hover {
         font-size: 1.5em;
     }
 
-    header div[style] { /* 로그인/회원가입 메뉴 숨김 */
+    header .account-btn-div { /* 로그인/회원가입 메뉴를 감싸는 div를 숨김 */
         display: none !important;
     }
 }
diff --git a/src/main/resources/static/css/search.css b/src/main/resources/static/css/search.css
index fe1ba3b..4a0fd92 100644
--- a/src/main/resources/static/css/search.css
+++ b/src/main/resources/static/css/search.css
@@ -19,31 +19,6 @@
   color: var(--secondary-text-color); /* common.css 변수 사용 */
 }
 
-/* ==========================================================================
-   탭 UI (직접 검색)
-   ========================================================================== */
-.nav-tabs {
-  border-bottom-color: var(--input-border-color); /* common.css 변수 */
-}
-.nav-tabs .nav-link {
-  font-weight: bold;
-  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; /* common.css 변수 */
-  padding: 0.75rem 1.25rem;
-  background-color: transparent;
-  /* bootstrap-overrides.css 에서 :root 및 .nav-link 로 색상 관리 */
-  /* border-color 는 bootstrap-overrides.css 의 --bs-nav-tabs-link-active-border-color 등 변수 설정 따름 */
-}
-/* .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus handled by bootstrap-overrides.css */
-/* .nav-tabs .nav-link.active handled by bootstrap-overrides.css */
-
-.tab-content > .tab-pane {
-  background-color: var(--card-bg-color); /* common.css 변수 */
-  border: 1px solid var(--input-border-color); /* common.css 변수 */
-  border-top: none;
-  padding: 1.5rem;
-  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); /* common.css 변수 */
-  box-shadow: var(--box-shadow-light); /* common.css 변수 */
-}
 
 /* ==========================================================================
    직접 검색 필터 (폼 요소 공통 스타일)
@@ -140,7 +115,6 @@
 
 /* --- 직접 검색 결과 리스트 컨트롤 --- */
 #resultControlsDirectSearch {
-  background-color: var(--bs-light-bg-subtle, var(--background-color)); /* common.css 변수 fallback */
   padding: 1rem 1.5rem;
   border-radius: var(--border-radius-md); /* common.css 변수 */
   margin-bottom: 1.5rem;
@@ -158,7 +132,6 @@
   font-size: 0.95em;
   padding: 0.5em 0.75em;
   color: var(--text-color); /* primary 버튼 텍스트 색상 */
-  background-color: var(--accent-color); /* common.css 변수, Bootstrap primary 대신 테마색 사용 */
   /* bootstrap-overrides.css의 --bs-primary 가 이미 --accent-color로 설정되어 있다면, badge bg-primary로도 충분 */
 }
 
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
index 33f8002..525cbd8 100644
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@@ -19,148 +19,135 @@
 <div layout:fragment="content">
 
     <div class="container mt-4">
-        <ul class="nav nav-tabs nav-fill" id="mainTab" role="tablist">
-            <li class="nav-item" role="presentation">
-                <button class="nav-link active" id="search-tab" data-bs-toggle="tab"
-                        data-bs-target="#manual-search-pane" type="button" role="tab" aria-controls="manual-search-pane"
-                        aria-selected="true">
-                    <i class="bi bi-search me-2"></i>직접 검색
-                </button>
-            </li>
-        </ul>
 
-        <div class="tab-content mt-3" id="mainTabContent">
-            <div class="tab-pane fade show active p-md-3 p-2 bg-white rounded shadow-sm" id="manual-search-pane"
-                 role="tabpanel" aria-labelledby="search-tab">
-                <div class="row">
-                    <div class="col-md-4 col-lg-3 order-md-first mb-3 mb-md-0" id="manualSearchFiltersSidebar">
-                        <div class="sticky-top p-3 bg-light rounded shadow-sm custom-sticky-sidebar">
-                            <h2 class="mb-3 h5">조건 검색</h2>
-                            <form id="directSearchForm">
-                                <hr class="my-2"/>
-                                <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox"
-                                                                                id="useCurrentLocationSwitch"
-                                                                                role="switch"/>
-                                    <label class="form-check-label small" for="useCurrentLocationSwitch">현재 위치 기반
-                                        검색</label>
-                                </div>
-                                <div id="locationFilterContainer">
-                                    <div id="areaSigunguFilters">
-                                        <div class="mb-2">
-                                            <label for="directSearchAreaCode" class="form-label">시/도</label>
-                                            <select class="form-select form-select-sm" id="directSearchAreaCode">
-                                                <option value="" selected>전체</option>
-                                            </select>
-                                        </div>
-                                        <div class="mb-2">
-                                            <label for="directSearchSigunguCode" class="form-label">시/군/구</label>
-                                            <select class="form-select form-select-sm" id="directSearchSigunguCode"
-                                                    disabled>
-                                                <option value="" selected>전체</option>
-                                            </select>
-                                        </div>
+        <div class="p-md-3 p-2 bg-white rounded shadow-sm">
+            <div class="row">
+                <div class="col-md-4 col-lg-3 order-md-first mb-3 mb-md-0" id="manualSearchFiltersSidebar">
+                    <div class="sticky-top p-3 bg-light rounded shadow-sm custom-sticky-sidebar">
+                        <h2 class="mb-3 h5">조건 검색</h2>
+                        <form id="directSearchForm">
+                            <hr class="my-2"/>
+                            <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox"
+                                                                            id="useCurrentLocationSwitch"
+                                                                            role="switch"/>
+                                <label class="form-check-label small" for="useCurrentLocationSwitch">현재 위치 기반
+                                    검색</label>
+                            </div>
+                            <div id="locationFilterContainer">
+                                <div id="areaSigunguFilters">
+                                    <div class="mb-2">
+                                        <label for="directSearchAreaCode" class="form-label">시/도</label>
+                                        <select class="form-select form-select-sm" id="directSearchAreaCode">
+                                            <option value="" selected>전체</option>
+                                        </select>
                                     </div>
-
-                                    <div id="currentLocationFilters" class="d-none">
-                                        <div class="mb-2">
-                                            <label for="manualLocationInput" class="form-label visually-hidden">선택된
-                                                위치</label>
-                                            <input type="text" class="form-control form-control-sm"
-                                                   id="manualLocationInput" placeholder="지도에서 위치 선택" readonly/>
-                                        </div>
-                                        <div class="mb-2">
-                                            <label for="directSearchRadius" class="form-label">검색 반경</label> <select
-                                                class="form-select form-select-sm" id="directSearchRadius">
-                                            <option value="1000">1km 이내</option>
-                                            <option value="3000">3km 이내</option>
-                                            <option value="5000" selected>5km 이내</option>
-                                            <option value="10000">10km 이내</option>
-                                            <option value="20000">20km 이내</option>
+                                    <div class="mb-2">
+                                        <label for="directSearchSigunguCode" class="form-label">시/군/구</label>
+                                        <select class="form-select form-select-sm" id="directSearchSigunguCode"
+                                                disabled>
+                                            <option value="" selected>전체</option>
                                         </select>
-                                        </div>
                                     </div>
                                 </div>
-                                <hr class="my-2"/>
-                                <div class="mb-2">
-                                    <label class="form-label">카테고리</label>
-                                    <div class="selectable-tag-group">
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId" value=""
-                                               id="catAll" autocomplete="off" checked/><label
-                                            class="btn btn-sm btn-outline-secondary" for="catAll">전체</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="12" id="cat12" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat12">관광지</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="14" id="cat14" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat14">문화시설</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="15" id="cat15" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat15">축제</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="28" id="cat28" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat28">레포츠</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="32" id="cat32" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat32">숙박</label>
-                                        <input class="btn-check" type="radio" name="directSearchContentTypeId"
-                                               value="39" id="cat39" autocomplete="off"/><label
-                                            class="btn btn-sm btn-outline-secondary" for="cat39">음식점</label>
+
+                                <div id="currentLocationFilters" class="d-none">
+                                    <div class="mb-2">
+                                        <label for="manualLocationInput" class="form-label visually-hidden">선택된
+                                            위치</label>
+                                        <input type="text" class="form-control form-control-sm"
+                                               id="manualLocationInput" placeholder="지도에서 위치 선택" readonly/>
                                     </div>
-                                </div>
-                                <div class="mb-2" style="display:none;"><label for="directSearchPetSize"
-                                                                               class="form-label">펫 크기 (참고용)</label>
-                                    <select class="form-select form-select-sm" id="directSearchPetSize">
-                                        <option value="" selected>모든 크기</option>
-                                        <option value="small">소형</option>
-                                        <option value="medium">중형</option>
-                                        <option value="large">대형</option>
+                                    <div class="mb-2">
+                                        <label for="directSearchRadius" class="form-label">검색 반경</label> <select
+                                            class="form-select form-select-sm" id="directSearchRadius">
+                                        <option value="1000">1km 이내</option>
+                                        <option value="3000">3km 이내</option>
+                                        <option value="5000" selected>5km 이내</option>
+                                        <option value="10000">10km 이내</option>
+                                        <option value="20000">20km 이내</option>
                                     </select>
+                                    </div>
                                 </div>
-                                <hr class="my-3"/>
-                                <button type="submit" class="btn btn-primary btn-sm w-100" id="directSearchButton">
-                                    <i class="bi bi-search me-1"></i>검색하기
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                    <div class="col-md-8 col-lg-9 order-md-last" id="manualSearchResultsArea">
-                        <div id="spinnerDirectSearch" class="text-center" style="display: none;">
-                            <div class="loading-spinner">
-                                <div class="spinner-border text-info" role="status"><span class="visually-hidden">Loading...</span>
-                                </div>
-                                <p class="loading-text">검색 조건으로 장소를 찾는 중...</p>
                             </div>
-                        </div>
-                        <div id="resultControlsDirectSearch" class="mb-3 bg-light p-3 rounded shadow-sm"
-                             style="display: none;">
-                            <div class="mb-2 mb-md-0"><span class="fw-bold me-2">검색 결과:</span>
-                                <span id="resultCountDirectSearch" class="badge bg-primary">0</span> 건
+                            <hr class="my-2"/>
+                            <div class="mb-2">
+                                <label class="form-label">카테고리</label>
+                                <div class="selectable-tag-group">
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId" value=""
+                                           id="catAll" autocomplete="off" checked/><label
+                                        class="btn btn-sm btn-outline-secondary" for="catAll">전체</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="12" id="cat12" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat12">관광지</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="14" id="cat14" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat14">문화시설</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="15" id="cat15" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat15">축제</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="28" id="cat28" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat28">레포츠</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="32" id="cat32" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat32">숙박</label>
+                                    <input class="btn-check" type="radio" name="directSearchContentTypeId"
+                                           value="39" id="cat39" autocomplete="off"/><label
+                                        class="btn btn-sm btn-outline-secondary" for="cat39">음식점</label>
+                                </div>
                             </div>
-                            <div class="d-flex gap-2 flex-wrap">
-                                <select class="form-select form-select-sm" id="sortOrderDirectSearch"
-                                        style="max-width: 150px; display:none;">
-
+                            <div class="mb-2" style="display:none;"><label for="directSearchPetSize"
+                                                                           class="form-label">펫 크기 (참고용)</label>
+                                <select class="form-select form-select-sm" id="directSearchPetSize">
+                                    <option value="" selected>모든 크기</option>
+                                    <option value="small">소형</option>
+                                    <option value="medium">중형</option>
+                                    <option value="large">대형</option>
                                 </select>
-                                <button class="btn btn-sm btn-outline-secondary" id="viewMapModeDirectSearch"
-                                        style="display:none;">
-                                </button>
                             </div>
+                            <hr class="my-3"/>
+                            <button type="submit" class="btn btn-primary btn-sm w-100" id="directSearchButton">
+                                <i class="bi bi-search me-1"></i>검색하기
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                <div class="col-md-8 col-lg-9 order-md-last" id="manualSearchResultsArea">
+                    <div id="spinnerDirectSearch" class="text-center" style="display: none;">
+                        <div class="loading-spinner">
+                            <div class="spinner-border text-info" role="status"><span class="visually-hidden">Loading...</span>
+                            </div>
+                            <p class="loading-text">검색 조건으로 장소를 찾는 중...</p>
                         </div>
-                        <div id="directSearchResultList" class="row g-3">
-                        </div>
-                        <div id="directSearchMapResultsView" class="col-12 d-none">
-                            <div id="resultsMapDirectSearch"
-                                 style="width: 100%; height: 600px; border-radius: 0.375rem"></div>
+                    </div>
+                    <div id="resultControlsDirectSearch" class="mb-3 bg-light p-3 rounded shadow-sm"
+                         style="display: none;">
+                        <div class="mb-2 mb-md-0"><span class="fw-bold me-2">검색 결과:</span>
+                            <span id="resultCountDirectSearch" class="badge bg-primary">0</span> 건
                         </div>
-                        <div class="text-center mt-4" id="loadMoreContainerDirectSearch" style="display: none;">
-                            <button class="btn btn-outline-primary" id="loadMoreButtonDirectSearch">
-                                <i class="bi bi-plus-circle me-2"></i>더 불러오기
+                        <div class="d-flex gap-2 flex-wrap">
+                            <select class="form-select form-select-sm" id="sortOrderDirectSearch"
+                                    style="max-width: 150px; display:none;">
+
+                            </select>
+                            <button class="btn btn-sm btn-outline-secondary" id="viewMapModeDirectSearch"
+                                    style="display:none;">
                             </button>
                         </div>
                     </div>
+                    <div id="directSearchResultList" class="row g-3">
+                    </div>
+                    <div id="directSearchMapResultsView" class="col-12 d-none">
+                        <div id="resultsMapDirectSearch"
+                             style="width: 100%; height: 600px; border-radius: 0.375rem"></div>
+                    </div>
+                    <div class="text-center mt-4" id="loadMoreContainerDirectSearch" style="display: none;">
+                        <button class="btn btn-outline-primary" id="loadMoreButtonDirectSearch">
+                            <i class="bi bi-plus-circle me-2"></i>더 불러오기
+                        </button>
+                    </div>
                 </div>
             </div>
-
         </div>
     </div>
 
diff --git a/src/main/resources/templates/visionUpload.html b/src/main/resources/templates/visionUpload.html
index b88d3fe..85787c9 100644
--- a/src/main/resources/templates/visionUpload.html
+++ b/src/main/resources/templates/visionUpload.html
@@ -5,209 +5,68 @@
 <head>
     <title>동물 이미지 분석</title>
     <th:block layout:fragment="css">
-        <!-- Bootstrap CSS (필요시) -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"/>
+        <link rel="stylesheet" th:href="@{/css/bootstrap-overrides.css}"/>
         <style>
-            /* 전체 폰트 설정 */
-            * {
-                font-family: 'HakgyoansimDunggeunmisoTTF-B', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            }
-
-            /* body 배경색을 두 번째 이미지와 동일하게 설정 */
-            body {
-                background-color: var(--background-color, #f8f9fa);
-            }
-
-            /* 페이지 전용 스타일 */
-            .vision-container {
-                max-width: 600px;
-                margin: 0 auto;
+            /* xxl 화면(1400px) 이상에서만 최대 너비를 1296px로 설정하여 search 페이지와 동일하게 만듭니다. */
+            @media (min-width: 1400px) {
+                .vision-container-custom {
+                    max-width: 1296px;
+                }
             }
 
-            .card {
-                margin-top: 2rem;
-                border-radius: var(--border-radius-lg, 12px);
-                box-shadow: var(--box-shadow-light, 0 4px 6px rgba(0, 0, 0, 0.1));
+            /* 사용량 정보 박스의 고유한 그라데이션 디자인은 유지합니다. */
+            .alert-info {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
                 border: none;
+                border-radius: var(--border-radius-lg);
             }
-
-            .card-body {
-                padding: 2rem;
+            .alert-warning {
+                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+                color: white;
+                border: none;
+                border-radius: var(--border-radius-lg);
             }
 
+            /* 기타 이 페이지에서만 필요한 스타일 */
             #imagePreview img {
                 max-height: 200px;
                 object-fit: contain;
             }
-
-            .spinner-border {
-                width: 3rem;
-                height: 3rem;
-                color: var(--accent-color, #ff6b6b) !important;
-            }
-
-            #spinnerContainer {
-                background-color: var(--card-bg-color, #ffffff);
-                padding: 2rem;
-                border-radius: var(--border-radius-lg, 12px);
-                box-shadow: var(--box-shadow-light, 0 4px 6px rgba(0, 0, 0, 0.1));
-            }
-
-            #result {
-                background-color: var(--card-bg-color, #ffffff);
-                padding: 2rem;
-                border-radius: var(--border-radius-lg, 12px);
-                box-shadow: var(--box-shadow-light, 0 4px 6px rgba(0, 0, 0, 0.1));
-                margin-top: 2rem;
-            }
-
-            pre#finalReport {
-                background: var(--background-color, #f8f9fa);
-                padding: 1.5rem;
-                border-radius: var(--border-radius-sm, 8px);
-                white-space: pre-wrap;
-                word-wrap: break-word;
-                max-height: 500px;
-                overflow-y: auto;
-                border: 1px solid #e9ecef;
-                font-family: 'Noto Sans KR', monospace;
-            }
-
-            .alert {
-                border-radius: var(--border-radius-sm, 8px);
-            }
-
-            .btn-primary {
-                background-color: var(--accent-color, #ff6b6b);
-                border-color: var(--accent-color, #ff6b6b);
-                border-radius: 30px;
-                padding: 0.75rem 2rem;
-                font-weight: 500;
-                transition: all 0.3s ease;
-            }
-
-            .btn-primary:hover {
-                background-color: var(--button-hover-color, #ff5252);
-                border-color: var(--button-hover-color, #ff5252);
-                transform: translateY(-2px);
-            }
-
-            .form-label {
-                color: var(--secondary-text-color, #6c757d);
-                font-weight: 500;
-                margin-bottom: 0.5rem;
-            }
-
-            .form-control {
-                border-radius: var(--border-radius-sm, 8px);
-                border: 2px solid #e9ecef;
-                transition: border-color 0.3s ease;
-            }
-
-            .form-control:focus {
-                border-color: var(--accent-color, #ff6b6b);
-                box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
-            }
-
-            /* 중간 보고서 스타일 개선 */
-            #interim {
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                color: white;
-                padding: 1.5rem;
-                border-radius: var(--border-radius-lg, 12px);
-                margin-bottom: 1rem;
-                text-align: center;
-                font-weight: 500;
-                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-                transition: all 0.3s ease;
-            }
-
-            #interim.hidden {
-                opacity: 0;
-                transform: translateY(-20px);
-                pointer-events: none;
-            }
-
-            #analyzingMessage {
-                font-style: italic;
-                color: var(--secondary-text-color, #6c757d);
-                text-align: center;
-                margin: 1rem 0;
-                font-size: 0.9rem;
-            }
-
-            /* 로딩 애니메이션 개선 */
             .loading-pulse {
                 animation: pulse 2s infinite;
             }
-
             @keyframes pulse {
                 0% { opacity: 1; }
                 50% { opacity: 0.5; }
                 100% { opacity: 1; }
             }
-
-            /* 성공 메시지 스타일 */
-            .success-message {
-                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-                color: white;
-                padding: 1rem;
-                border-radius: var(--border-radius-lg, 12px);
-                text-align: center;
-                margin: 1rem 0;
-                font-weight: 500;
-            }
-            /* 비활성화된 폼 스타일 */
-            .disabled {
-                opacity: 0.6;
-                pointer-events: none;
-            }
-
-            /* 사용량 정보 박스 스타일 개선 */
-            .alert-info {
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                color: white;
-                border: none;
-                border-radius: var(--border-radius-lg);
-            }
-
-            .alert-warning {
-                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-                color: white;
-                border: none;
-                border-radius: var(--border-radius-lg);
-            }
         </style>
     </th:block>
 </head>
 <body>
 <th:block layout:fragment="content">
-    <main>
-        <div class="vision-container">
-            <!-- 오프라인 알림 -->
-            <div id="offlineAlert" class="alert alert-warning" style="display: none;">
-                <i class="bi bi-wifi-off"></i> 오프라인 상태입니다. 인터넷 연결을 확인해주세요.
-            </div>
 
-            <!-- 메인 폼 카드 -->
-            <div class="card">
-                <div class="card-body" id="formContainer">
-                    <!-- ✅ 사용량 정보 표시 추가 -->
+    <div class="container vision-container-custom mt-4">
+        <div class="p-md-3 p-2 bg-white rounded shadow-sm">
+            <div class="row justify-content-center">
+                <div class="col-lg-8">
+
                     <div th:if="${username}" class="alert alert-info text-center mb-4">
                         <strong>🎉 안녕하세요, <span th:text="${username}"></span>님!</strong><br>
                         <span th:if="${canUse}">
-                오늘 <strong th:text="${remainingUsage}"></strong>회 더 분석하실 수 있습니다.
-                (총 <span th:text="${dailyLimit}"></span>회 중 <span th:text="${dailyLimit - remainingUsage}"></span>회 사용됨)
-            </span>
+                            오늘 <strong th:text="${remainingUsage}"></strong>회 더 분석하실 수 있습니다.
+                            (총 <span th:text="${dailyLimit}"></span>회 중 <span th:text="${dailyLimit - remainingUsage}"></span>회 사용됨)
+                        </span>
                         <span th:unless="${canUse}" class="text-warning">
-                <i class="bi bi-exclamation-triangle"></i>
-                오늘의 분석 한도(<span th:text="${dailyLimit}"></span>회)를 모두 사용하셨습니다.<br>
-                내일 다시 이용해주세요! 🐾
-            </span>
+                            <i class="bi bi-exclamation-triangle"></i>
+                            오늘의 분석 한도(<span th:text="${dailyLimit}"></span>회)를 모두 사용하셨습니다.<br>
+                            내일 다시 이용해주세요! 🐾
+                        </span>
                     </div>
 
-                    <!-- ✅ 로그인하지 않은 경우 안내 -->
                     <div th:unless="${username}" class="alert alert-warning text-center mb-4">
                         <i class="bi bi-lock"></i>
                         <strong>Vision 분석 기능을 이용하려면 로그인이 필요합니다.</strong><br>
@@ -216,24 +75,22 @@
 
                     <h3 class="text-center mb-4">🐾 반려동물 정보를 입력하세요</h3>
 
-                    <!-- ✅ 사용량 초과 시 폼 비활성화 -->
                     <form id="visionForm" th:classappend="${!canUse} ? 'disabled' : ''">
                         <div class="mb-3">
                             <label for="petName" class="form-label">반려동물 이름</label>
                             <input type="text" class="form-control" name="petName" id="petName"
                                    placeholder="반려동물의 이름을 입력하세요"
-                                   th:disabled="${!canUse}" required />
+                                   th:disabled="${!canUse}" required/>
                         </div>
                         <div class="mb-3">
                             <label for="file" class="form-label">이미지 선택</label>
                             <input type="file" class="form-control" name="file" id="file"
                                    accept="image/jpeg,image/jpg,image/png"
-                                   th:disabled="${!canUse}" required />
+                                   th:disabled="${!canUse}" required/>
                             <small class="text-muted">⚠️ JPEG, PNG 형식만 지원합니다 (최대 5MB)</small>
                         </div>
-                        <!-- 이미지 미리보기 -->
                         <div id="imagePreview" class="mb-3 text-center" style="display: none;">
-                            <img id="previewImg" src="" alt="미리보기" class="img-fluid rounded" />
+                            <img id="previewImg" src="" alt="미리보기" class="img-fluid rounded"/>
                         </div>
                         <div class="d-grid">
                             <button type="submit" class="btn btn-primary" id="submitBtn"
@@ -245,50 +102,34 @@ <h3 class="text-center mb-4">🐾 반려동물 정보를 입력하세요</h3>
                     </form>
                 </div>
             </div>
-            <!-- 로딩 스피너 -->
-            <div id="spinnerContainer" class="text-center mt-3" style="display: none">
-                <div class="spinner-border" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <p class="mt-3 loading-pulse">🔄 이미지 분석 중...</p>
-            </div>
+        </div>
 
-            <!-- 결과 표시 -->
-            <div id="result" style="display: none">
+        <div id="result" class="mt-4" style="display: none">
+            <div class="p-md-3 p-2 bg-white rounded shadow-sm">
                 <div class="mb-3 text-center">
-                    <img id="showImg" src="" alt="분석된 이미지" class="img-fluid rounded shadow"
-                         style="max-width: 100%" />
+                    <img id="showImg" src="" alt="분석된 이미지" class="img-fluid rounded shadow" style="max-width: 100%"/>
                 </div>
-
-                <!-- 중간 보고서 -->
-                <div id="interim" class="fw-bold" style="display: none;"></div>
-
-                <!-- 분석 중 메시지 -->
+                <div id="interim" class="fw-bold alert alert-secondary" style="display: none;"></div>
                 <div id="analyzingMessage" style="display: none;">
                     <small>📝 상세한 보고서를 작성 중입니다...</small>
                 </div>
-
-                <!-- 최종 보고서 -->
                 <pre id="finalReport" style="display: none;"></pre>
-
-                <!-- 성공 메시지 -->
-                <div id="successMessage" class="success-message" style="display: none;">
+                <div id="successMessage" class="alert alert-success" style="display: none;">
                     ✨ 분석이 완료되었습니다! 보고서 페이지로 이동합니다...
                 </div>
-
-                <!-- 에러 메시지 -->
                 <div id="errorMessage" class="alert alert-danger" style="display: none;"></div>
-
-                <!-- 돌아가기 버튼 -->
                 <div class="text-center mt-4">
                     <a href="/" class="btn btn-outline-secondary">⬅ 돌아가기</a>
                 </div>
             </div>
         </div>
-    </main>
+    </div>
 </th:block>
 
 <th:block layout:fragment="script">
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
     <script th:inline="javascript">
         const form = document.getElementById('visionForm');
         const spinner = document.getElementById('spinnerContainer');
@@ -300,12 +141,9 @@ <h3 class="text-center mb-4">🐾 반려동물 정보를 입력하세요</h3>
         const showImg = document.getElementById('showImg');
         const fileInput = document.getElementById('file');
         const imagePreview = document.getElementById('imagePreview');
-        const previewImg = document.getElementById('previewImg');
         const errorMessage = document.getElementById('errorMessage');
-        const offlineAlert = document.getElementById('offlineAlert');
         const isLoggedIn = /*[[${username != null} ? 'true' : 'false']]*/ 'false';
         const canUse = /*[[${canUse} ? 'true' : 'false']]*/ 'false';
-        const remainingUsage = /*[[${remainingUsage}]]*/ 0;
 
         form.addEventListener('submit', async e => {
             e.preventDefault();