diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx
index 870af6f..931409d 100644
--- a/frontend/src/components/QuizForm/QuizDetailCard.jsx
+++ b/frontend/src/components/QuizForm/QuizDetailCard.jsx
@@ -3,7 +3,7 @@ import { STATIC_URL } from '../../constants';
 
 export default function QuizDetailCard({ index, question, answer, image, choices, userAnswer = null, correct = true }) {
   return (
-    <div className={`${styles.card} ${!correct && styles.incorrect}`}>
+    <div className={`${styles.card} ${correct ? styles.correct : styles.incorrect}`}>
       <div className={styles.header}>
         <span className={styles.heading}>{index}번 퀴즈</span>
       </div>
diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css
index a0e1e1d..5f3c404 100644
--- a/frontend/src/components/QuizForm/QuizDetailCard.module.css
+++ b/frontend/src/components/QuizForm/QuizDetailCard.module.css
@@ -10,8 +10,13 @@
 }
 
 .incorrect {
-  background-color: #db3232;
-  border: 1px solid var(--red300);
+  /* background-color: var(--red200); */
+  border: 2px solid var(--red300);
+}
+
+.correct {
+  /* background-color: var(--green200); */
+  border: 2px solid var(--green300);
 }
 
 .header {
@@ -68,7 +73,7 @@
 
 .numLabel {
   width: 40px;
-  text-align: right;
+  text-align: center;
   display: block;
 }