diff --git a/src/main/java/com/example/ticketing/art/application/ArtController.java b/src/main/java/com/example/ticketing/art/application/ArtController.java
index 647753c..9921031 100644
--- a/src/main/java/com/example/ticketing/art/application/ArtController.java
+++ b/src/main/java/com/example/ticketing/art/application/ArtController.java
@@ -20,8 +20,6 @@ public class ArtController {
 
     private final ArtService artService;
 
-//    마스터 브랜치 다이렉트 푸시 가능 여부 확인
-
     @GetMapping
     public ResponseEntity<Page<ArtResponse>> searchArts(
             @Auth ClientInfo clientInfo,
diff --git a/src/main/resources/static/css/reservation.css b/src/main/resources/static/css/reservation.css
index fcbbbfa..0877f29 100644
--- a/src/main/resources/static/css/reservation.css
+++ b/src/main/resources/static/css/reservation.css
@@ -162,6 +162,7 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        gap:10px
     }
 
     #modal-title {
@@ -169,45 +170,74 @@
     }
 
     #security-info-section {
-        width: 70%;
+        max-width: 400px;
+        width: 75%;
         height: 20%;
         border-radius: 10px;
         background-color: darkslateblue;
-        display: flex;
-        justify-content: center;
+        display: grid;
+        grid-template-columns: 8fr 2fr;
         align-items: center;
-        margin-bottom: 20px;
-        padding: 10px;
+        align-content: center;
+        justify-items: center;
+        justify-content: center;
+        padding: 10px 15px;
         box-sizing: border-box;
+        gap: 1vw;
     }
 
     #security-text {
         color: white;
-        font-size: 20px;
+        font-size: clamp(16px, 2vw, 24px);
         text-align: center;
-        letter-spacing: 20px;
-        width: 80%;
+        letter-spacing: 1.5vw;
+        white-space: nowrap;
+        margin: 0;
     }
 
     #security-reset-button {
-        background-color: white;
-        border-radius: 15px;
-        width: 15%;
-        aspect-ratio: 1/1;
+        background: linear-gradient(135deg, #8b95eb 0%, #9d7bc4 100%);
+        border-radius: 10px;
+        width: 48px;
+        height: 48px;
+        min-width: 48px;
         font-family: my-font, sans-serif;
-        color: darkslateblue;
+        color: white;
         border: none;
-        padding: 10px;
+        padding: 8px;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        box-shadow: 0 2px 8px rgba(139, 149, 235, 0.3);
+    }
+
+    #security-reset-button svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    #security-reset-button:hover {
+        background: linear-gradient(135deg, #7a85e0 0%, #8c6ab3 100%);
+        box-shadow: 0 4px 12px rgba(139, 149, 235, 0.4);
+    }
+
+    #security-reset-button:active {
+        transform: scale(0.95);
     }
 
     #security-input-section {
-        width: 70%;
+        max-width: 400px;
+        width: 75%;
         height: 10%;
+        border-radius: 10px;
         border: 2px solid darkslateblue;
         display: flex;
         justify-content: center;
         align-items: center;
+        box-sizing: border-box;
     }
 
     #security-input {
@@ -412,51 +442,79 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        gap: 10px
     }
 
     #modal-title {
         color: #514897;
+        font-size: 5vw;
     }
 
     #security-info-section {
-        width: 70%;
+        width: 80%;
         height: 20%;
         border-radius: 10px;
         background-color: darkslateblue;
-        display: flex;
-        justify-content: center;
+        display: grid;
+        grid-template-columns: 8fr 2fr;
         align-items: center;
-        margin-bottom: 20px;
-        padding: 10px;
+        align-content: center;
+        justify-items: center;
+        justify-content: center;
+        padding: 8px 12px;
+        box-sizing: border-box;
+        gap: 1vw;
     }
 
     #security-text {
         color: white;
-        font-size: 20px;
+        font-size: clamp(10px, 4vw, 24px);
         text-align: center;
-        letter-spacing: 20px;
-        width: 80%;
+        letter-spacing: 3vw;
+        white-space: nowrap;
     }
 
     #security-reset-button {
-        background-color: white;
-        border-radius: 15px;
-        width: 20%;
-        height: 60px;
+        background: linear-gradient(135deg, #8b95eb 0%, #9d7bc4 100%);
+        border-radius: 8px;
+        width: 90%;
+        height: 90%;
         font-family: my-font, sans-serif;
-        color: darkslateblue;
+        color: white;
         border: none;
-        padding: 10px;
+        padding: 6px;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        box-shadow: 0 2px 8px rgba(139, 149, 235, 0.3);
+    }
+
+    #security-reset-button svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    #security-reset-button:hover {
+        background: linear-gradient(135deg, #7a85e0 0%, #8c6ab3 100%);
+        box-shadow: 0 4px 12px rgba(139, 149, 235, 0.4);
+    }
+
+    #security-reset-button:active {
+        transform: scale(0.95);
     }
 
     #security-input-section {
-        width: 70%;
-        height: 10%;
+        width: 80%;
+        height: 15%;
         border: 2px solid darkslateblue;
         display: flex;
         justify-content: center;
         align-items: center;
+        box-sizing: border-box;
+        border-radius: 10px;
     }
 
     #security-input {
@@ -465,7 +523,8 @@
         border: none;
         margin-left: 10px;
         font-family: my-font, sans-serif;
-        letter-spacing: 10px;
+        font-size: 3vw;
+        letter-spacing: 3vw;
         text-transform: uppercase;
     }
 
@@ -485,6 +544,7 @@
         color: white;
         font-family: my-font, sans-serif;
         cursor: pointer;
+        font-size: 3vw;
     }
 }
 
diff --git a/src/main/resources/templates/reservation.html b/src/main/resources/templates/reservation.html
index 5fb9d4c..d9a85d3 100644
--- a/src/main/resources/templates/reservation.html
+++ b/src/main/resources/templates/reservation.html
@@ -19,7 +19,9 @@ <h2 id="modal-title">문자를 입력해주세요.</h2>
             <div id="security-info-section">
                 <p id="security-text">AFJDSD</p>
                 <button id="security-reset-button">
-                    <img width="100%" height="100%" src="/image/reset-button.png" alt="새로고침 버튼">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
+                    </svg>
                 </button>
             </div>
             <div id="security-input-section">