diff --git a/Re-Frontend/src/components/Feedback.js b/Re-Frontend/src/components/Feedback.js
index 4f3029a3..9a933ae3 100644
--- a/Re-Frontend/src/components/Feedback.js
+++ b/Re-Frontend/src/components/Feedback.js
@@ -1,175 +1,185 @@
-import React,{useEffect, useRef, useState} from 'react';
-import '../css/FeedbackPage.css'
+import React, { useState } from 'react';
+import '../css/FeedbackPage.css';
 import logo from '../logo/white_logo.png'
 
+function App() {
+  const [activeQuestion, setActiveQuestion] = useState('Q1');
+  const [activeSubTab, setActiveSubTab] = useState('textFeedback');
 
-function FeedbackPage() {
-    const [activeQuestion, setActiveQuestion] = useState(null);
-    const [activeTab, setActiveTab] = useState('Text');
-    const tabButtonsRef = useRef([]);
+  const questions = {
+    Q1: {
+      question: "What do you like to do in your free time?",
+      textFeedback: { /*사용자 개인화*/
+        complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",
+        grammarScore: "87.27 %",
+        grammarExample: "I like to watch a movie once a week sometimes.",
+        coherenceScore: "낮음"
+      },
+      audioFeedback: { /*사용자 개인화*/
+        pronunciation: "66.83 %",
+        mlr: "4 개",
+        pr: "39.0 %"
+      }
+    },
+    Q2: {
+      question: "Second question goes here",
+      textFeedback: { /*사용자 개인화*/
+        complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",
+        grammarScore: "80.27 %",
+        grammarExample: "I like to watch a movie once a week sometimes.",
+        coherenceScore: "낮음"
+      },
+      audioFeedback: { /*사용자 개인화*/
+        pronunciation: "66.83 %",
+        mlr: "3.33 개",
+        pr: "39.0 %"
+      }
+    },
+    Q3: {
+      question: "Third question goes here",
+      textFeedback: { /*사용자 개인화*/
+        complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",
+        grammarScore: "90.27 %",
+        grammarExample: "I like to watch a movie once a week sometimes.",
+        coherenceScore: "낮음"
+      },
+      audioFeedback: { /*사용자 개인화*/
+        pronunciation: "66.83 %",
+        mlr: "3.33 개",
+        pr: "39.0 %"
+      }
+    }
+  };
 
-    const handleButtonClick = (question) => {
-        setActiveQuestion(question);
-    };
+  const handleTabClick = (tab) => {
+    setActiveQuestion(tab);
+    setActiveSubTab('textFeedback'); // Reset sub-tab to textFeedback when switching main tabs
+  };
 
-    const handleTabClick = (tab) => {
-        setActiveTab(tab);
-    };
+  const handleSubTabClick = (subTab) => {
+    setActiveSubTab(subTab);
+  };
 
-    const questions = {
-        Q1: {
-            question: "What do you like to do in your free time?",
-            textFeedback: {
-                complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",/*사용자 개인화*/
-                grammarScore: "87.27 %", /*사용자 개인화*/
-                grammarExample: "I like to watch a movie once a week sometimes.", /*사용자 개인화*/
-                coherenceScore: "낮음"/*사용자 개인화*/
-            },
-            audioFeedback: {
-                pronunciation: "발음이 명확하고 이해하기 쉬웠습니다.", /*사용자 개인화*/
-                mlr: "10.0",/*사용자 개인화*/
-                pr: "0.8"/*사용자 개인화*/
-            }
-        },
-        Q2: {
-            question: "Second question goes here",
-            textFeedback: {
-                complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",/*사용자 개인화*/
-                grammarScore: "80.27 %", /*사용자 개인화*/
-                grammarExample: "I like to watch a movie once a week sometimes.", /*사용자 개인화*/
-                coherenceScore: "낮음"/*사용자 개인화*/
-            },
-            audioFeedback: {
-                pronunciation: "발음이 명확하고 이해하기 쉬웠습니다.", /*사용자 개인화*/
-                mlr: "11.0",/*사용자 개인화*/
-                pr: "0.6"/*사용자 개인화*/
-            }
-        },
-        Q3: {
-            question: "Third question goes here",
-            textFeedback: {
-                complexity: "문장이 모두 간단하게 구성되어 있어 내용 전달이 명확했으나, 복문이나 긴 문장을 사용하면 한층 풍부한 문장의 다양성을 더할 수 있어요.",/*사용자 개인화*/
-                grammarScore: "90.27 %",/*사용자 개인화*/
-                grammarExample: "I like to watch a movie once a week sometimes.", /*사용자 개인화*/
-                coherenceScore: "낮음"/*사용자 개인화*/
-            },
-            audioFeedback: {
-                pronunciation: "발음이 명확하고 이해하기 쉬웠습니다.",/*사용자 개인화*/
-                mlr: "12.0",/*사용자 개인화*/
-                pr: "0.5"/*사용자 개인화*/
-            }
-        }
-    };
+  const currentQuestion = questions[activeQuestion];
 
-    useEffect(() => {
-        tabButtonsRef.current.forEach((button, index) => {
-            if (button) {
-                button.addEventListener('click', () => handleButtonClick(`Q${index + 1}`));
-            }
-        });
+  return (
+    <div>
+      <header>
+        <img src={logo} alt="MOPIc 로고" style={{ height: '40px' }} />
+        <nav>
+          <a href="#">About</a>
+          <a href="#">History</a>
+          <a href="#">Login</a>
+        </nav>
+      </header>
 
-        return () => {
-            tabButtonsRef.current.forEach((button, index) => { // index 추가
-                if (button) {
-                    button.removeEventListener('click', () => handleButtonClick(`Q${index + 1}`));
-                }
-            });
-        };
-    }, []);
+      <main>
+        <div className="feedback-container">
+          <h1>You are likely to get</h1>
+          <h2>IH</h2> {/* 사용자 개인화 */}
+          
+          <div className="tabs">
+            {Object.keys(questions).map((tab) => (
+              <button
+                key={tab}
+                className={`tab-button ${activeQuestion === tab ? 'active' : ''}`}
+                onClick={() => handleTabClick(tab)}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
 
-    return (
-        <div>
-            <header>
-                <h1>
-                    <img src={logo} alt="MOPIc 로고" style={{ height: '40px' }} />
-                </h1>
-                <nav>
-                    <a href="#">Home</a>
-                    <a href="#">About</a>
-                    <a href="#">History</a>
-                </nav>
-            </header>
+          <div className="tab-content active">
+            <div className="question-sentence">
+              <h3>{currentQuestion.question}</h3>
+            </div>
 
-            <main>
-                <div class="feedback-container">
-                    <h4>You are likely to get</h4> 
-                    <h1>IH</h1> 
-                    <div className="tabs">
-                        <button ref={el => tabButtonsRef.current[0] = el}>Q1</button>
-                        <button ref={el => tabButtonsRef.current[1] = el}>Q2</button>
-                        <button ref={el => tabButtonsRef.current[2] = el}>Q3</button>
-                    </div>
-
-                    <div className='feedback-box'>
-                        <div className="tab-toggle">
-                            <button 
-                                className={activeTab === 'Text' ? 'active' : ''} 
-                                onClick={() => handleTabClick('Text')}
-                            >
-                                Text
-                            </button>
-                            <button 
-                                className={activeTab === 'Audio' ? 'active' : ''} 
-                                onClick={() => handleTabClick('Audio')}
-                            >
-                                Audio
-                            </button>
-                        </div>
+            <div className="feedback-box">
+              <div className="sub-tabs">
+                <button
+                  className={`sub-tab-button ${activeSubTab === 'textFeedback' ? 'active' : ''}`}
+                  onClick={() => handleSubTabClick('textFeedback')}
+                >
+                  Text
+                </button>
+                <button
+                  className={`sub-tab-button ${activeSubTab === 'audioFeedback' ? 'active' : ''}`}
+                  onClick={() => handleSubTabClick('audioFeedback')}
+                >
+                  Audio
+                </button>
+              </div>
 
-                        {activeQuestion && (
-                            <h3>{questions[activeQuestion].question}</h3>
-                        )}
-                        {activeQuestion && activeTab === 'Text' && (
-                            <div className="feedback-content">
-                                <div className="feedback-row">
-                                    <div className="feedback-category coherence">
-                                        <h4>Coherence</h4>
-                                        <p>coherence는 주제에 맞는 흐름을 유지하며 명확하게 전달되는지 확인하는 요소입니다.</p>
-                                        <p className="coherence score">{questions[activeQuestion].textFeedback.coherenceScore}</p>
-                                    </div>
-                                    <div className="feedback-category complexity">
-                                        <h4>Complexity</h4>
-                                        <p>{questions[activeQuestion].textFeedback.complexity}</p>
-                                    </div>
-                                </div>
-                                <div className="feedback-row">
-                                    <div className="feedback-category grammar">
-                                        <h4>Grammar</h4>
-                                        <p>전체 발화 중 올바른 문법 사용 비율은</p>
-                                        <p className="output score">{questions[activeQuestion].textFeedback.grammarScore}</p>
-                                        <p>{questions[activeQuestion].textFeedback.grammarExample}</p>
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                            
-                        {activeQuestion && activeTab === 'Audio' && (
-                            <div className="feedback-content">
-                                <div className="feedback-row">
-                                    <div className="feedback-category pronunciation">
-                                        <h4>Pronunciation</h4>
-                                        <p className='pronunciation score'>{questions[activeQuestion].audioFeedback.pronunciation}</p>
-                                    </div>
-                                    <div className="feedback-category mlr">
-                                        <h4>MLR</h4>
-                                        <p>사용자가 연속적으로 발음한 평균 단어 수입니다. MLR이 높을수록 보다 유창함을 보여주는 지표입니다.</p>
-                                        <p className="mlr score">{questions[activeQuestion].audioFeedback.mlr}</p>
-                                    </div>
-                                    <div className="feedback-category pr">
-                                        <h4>PR</h4>
-                                        <p>사용자의 발음이 원어민과 얼마나 유사한 지 보여주는 지표입니다.</p>
-                                        <p className='pr score'>{questions[activeQuestion].audioFeedback.pr}</p>
-                                    </div>
-                                </div>
-                            </div>
-                    )}
+              {activeSubTab === 'textFeedback' && (
+                <div className="sub-tab-content active">
+                  <div className="feedback-row">
+                    <div className="feedback-category">
+                      <div className="feedback-section">
+                        <h3>Coherence</h3>
+                        <p className="desc">coherence 설명 주제 적합도 어쩌구</p>
+                        <p className="output score">{currentQuestion.textFeedback.coherenceScore}</p>
+                      </div>
+                    </div>
+                    <div className="feedback-category">
+                      <div className="feedback-section">
+                        <h3>Complexity</h3>
+                        <p className="desc">complexity 설명</p>
+                        <p className="output sentence">{currentQuestion.textFeedback.complexity}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="feedback-row">
+                    <div className="feedback-category grammar">
+                      <div className="feedback-section">
+                        <h3>Grammar</h3>
+                        <p className="desc">전체 발화 중 올바른 문법 사용 비율은</p>
+                        <p className="output score">{currentQuestion.textFeedback.grammarScore}</p>
+                        <p>{currentQuestion.textFeedback.grammarExample}</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
+              )}
+
+              {activeSubTab === 'audioFeedback' && (
+                <div className="sub-tab-content active">
+                  <div className="feedback-row">
+                    <div className="feedback-category">
+                      <div className="feedback-section">
+                        <h3>Pronunciation</h3>
+                        <p className="desc">발음 설명</p>
+                        <p class="desc">전체 발화 중 잘못된 발음 없이 명확하게 발음한 비율은</p>
+                        <p className="output score">{currentQuestion.audioFeedback.pronunciation}</p>
+                      </div>
+                    </div>
+                    <div className="feedback-category">
+                      <div className="feedback-section">
+                        <h3>Mean Length of Run (MLR)</h3>
+                        <p className="desc">MLR 설명 어쩌구</p>
+                        <p class="desc">연속으로 발화한 평균 단어 수는</p>
+                        <p className="output score">{currentQuestion.audioFeedback.mlr}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="feedback-row">
+                    <div className="feedback-category pr">
+                      <div className="feedback-section">
+                        <h3>Pause Rate (PR)</h3>
+                        <p className="desc">PR 설명 어쩌구</p>
+                        <p class="desc">전체 발화 중 pause 비율은</p>
+                        <p className="output score">{currentQuestion.audioFeedback.pr}</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-            </main>
+              )}
+            </div>
+          </div>
         </div>
-               
-
-    );
+      </main>
+    </div>
+  );
 }
 
-export default FeedbackPage;
+export default App;
diff --git a/Re-Frontend/src/css/FeedbackPage.css b/Re-Frontend/src/css/FeedbackPage.css
index 954699f7..86345585 100644
--- a/Re-Frontend/src/css/FeedbackPage.css
+++ b/Re-Frontend/src/css/FeedbackPage.css
@@ -1,244 +1,231 @@
-/* test/src/css/FeedbackPage.css */
 body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #FFFFFF !important;
-  }
-  
-  /* 탑바 */
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: #6d8d8d;
-  }
-  header h1 {
-    margin: 0; 
-  }
-  header img {
-    width: 100px;
-    height: auto; 
-    margin-top: 10px;
-  }
-  header nav {
-    display: flex;
-  }
-  header nav a {
-    margin: 0 15px;
-    text-decoration: none;
-    color: #ffffff; 
-    font-size: 16px;
-  }
-  header nav a:hover {
-    color: #ccc; 
-  }
-  
-  
-  main {
-    margin: 20px auto;
-    max-width: 800px;
-  }
-  
-  
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: white;
+}
+
+header {
+  background-color: #2F4858;
+  padding: 10px 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  position: sticky;
+  top: 0px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: white;
+}
+
+nav a {
+  margin-left: 20px;
+  text-decoration: none;
+  color: white;
+}
+
+.feedback-container {
+  max-width: 1200px;
+  margin: 50px auto;
+  background-color: white;
+  padding: 20px;
+}
+
+h1 {
+  font-weight: lighter;
+  font-size: 1.2em;
+  margin-top: 150px;
+  margin-bottom: 10px;
+  color: grey;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+h2 {
+  font-weight: bold;
+  font-size: 2.5em;
+  margin-bottom: 100px;
+  color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tabs, .sub-tabs {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+
+.tabs {
+  padding-left: 80px;
+}
+
+.sub-tabs {
+  padding-left: 0;
+}
+
+.tab-button, .sub-tab-button {
+  background-color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: normal;
+  transition: font-weight 0.3s;
+}
+
+.tab-button {
+  padding: 0 20px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.sub-tab-button {
+  width: 70px;
+  height: 35px;
+  border-radius: 10%;
+  margin: 0 5px;
+  padding: 10px 20px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+}
+
+.tab-button.active {
+  color: black;
+  font-weight: 900;
+  text-decoration-line: underline;
+  text-underline-position: under;
+  text-decoration-thickness: 3px;
+}
+
+.sub-tab-button.active {
+  background-color: #C2D4C6;
+  color: black;
+  font-weight: bold;
+}
+
+.tab-content, .sub-tab-content {
+  display: none;
+}
+
+.tab-content.active, .sub-tab-content.active {
+  display: block;
+}
+
+.question-sentence {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  position: relative;
+  left: 100px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.question-sentence h3 {
+  font-size: 1.2em;
+  font-weight: 200;
+  color: black;
+}
+
+.feedback-box {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(100px, auto);
+  grid-gap: 10px;
+  margin: auto;
+  width: 80%;
+  background-color: #F1F8E8;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.feedback-row {
+  display: flex;
+  justify-content: space-between; 
+  margin-bottom: 15px;
+}
+
+.feedback-category {
+  flex: 1 1 calc(50% - 10px);
+  background-color: white;
+  padding: 0 0 0 5px;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 0 5px;
+}
+
+.feedback-category.grammar {
+  flex: 1 1 100%;
+}
+
+.feedback-category.pr {
+  flex: 1 1 auto;
+  max-width: 49%;
+}
+
+.feedback-category p.desc {
+  font-size: 0.8em;
+  font-weight: lighter;
+  color: grey;
+  text-align: left;
+}
+
+.feedback-category.grammar p.desc {
+  text-align: center;
+}
+
+.feedback-category p.output {
+  color: black;
+  font-size: 2em;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+}
+
+.feedback-category p.output.sentence {
+  font-size: 1em;
+  font-weight: lighter;
+  padding: 5% 3% 3% 3%;
+}
+
+.feedback-section {
+  margin: 0 0 0 10px;
+}
+
+.feedback-section h3 {
+  font-size: 1.3em;
+  text-align: left;
+  margin-bottom: 10px;
+  color: black;
+}
+
+.wrong {
+  color: red;
+}
+
+@media (max-width: 600px) {
   .feedback-container {
-    max-width: 1200px;
-    margin: 50px auto;
-    background-color: white;
-    padding: 20px;
-  }
-  .feedback-container h4 {
-    text-align: center;
-    color: grey;
-  }
-  .feedback-container h1 {
-    text-align: center;
-  }
-  
-  
-  .tabs {
-    display: flex;
-    justify-content: left;
-    margin-bottom: 20px;
-    font-weight: bold;
-    font-size: 18px;
-  }
-  .tabs button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 10px 10px;
-    font-size: 18px;
-    color: #000000;
-    margin: 0 10px;
-  }
-  .tabs button:hover {
-    text-decoration: underline;
-  }
-  
-  .feedback-box {
-    background-color: #edf7ed;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  .feedback-box h3 {
-    font-size: 20px;
-    font-weight: normal;
-  }
-  
-  .tab-toggle {
-    display: flex;
-    justify-content: flex-start;
-    margin-bottom: 20px;
-    color: #C2D4C6;
-  }
-  .tab-toggle button {
-    padding: 10px 20px;
-    margin-right: 5px;
-    background-color: #FFFFFF;
-    border: 1px solid #f9f9f9;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    color: #000000;
-    margin: 0 10px;
+    padding: 10px;
   }
-  .tab-toggle button:hover {
-    background-color: #f9f9f9;
-  }
-  .tab-toggle button.active {
-    background-color: #C2D4C6;
-    border-color: #C2D4C6;
-    color: #000000;
-  }
-  
-  
-  .question h3 {
-    color: #000000;
-    font-size: 20px;
-  }
-  
-  
-  .feedback-content {
-  
-  }
-  
-  .feedback-row {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;
-    text-align: left;
-  }
-  
+
   .feedback-category {
-    flex: 1;
-    margin-right: 20px;
-    background-color: #ffffff;
-    padding: 15px;
-    border-radius: 10px;
-    border: 1px solid #e3e3e3;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-    font-size: 14px;
-    display: flex; 
-    flex-direction: column; 
-    justify-content: space-between; 
-  }
-  .feedback-category:last-child {
-    margin-right: 0;
-  }
-  .feedback-category h4 {
-    font-size: 18px;
-    margin-bottom: 10px;
-    color: #333;
-    font-weight: bold;
-  }
-  .feedback-category p {
-    font-size: 14px;
-    margin: 0;
-    color: #666;
-  }
-  
-  .feedback-category.coherence .coherence.score {
-    font-size: 36px;
-    margin-top: 10px;
-    font-weight: bold;
-    text-align: center;
-    padding: 15px;
-    color: #000000;
-  }
-  
-  .feedback-category.complexity p {
-    font-size: 16px;
-    padding: 50px 15px;
-    margin-top: 10px;
-    color: #000000;
-    text-align: center;
-  }
-  
-  .feedback-category.grammar p {
-    font-size: 16px;
-    margin-top: 10px;
-    color: #000000;
-  }
-  .feedback-category.grammar .output.score {
-    font-size: 36px;
-    color: #d9534f;
-    text-align: center;
-    font-weight: bold;
-  }
-  
-  .feedback-category.pronunciation .pronunciation.score {
-    font-size: 16px;
-    padding: 50px 15px;
-    color: #000000;
-    text-align: center;
-  }
-  
-  .feedback-category.mlr .mlr.score {
-    font-size: 32px;
-    margin-top: 10px;
-    font-weight: bold;
-    text-align: center;
-    color: #000000;
-    padding: 15px;
-  }
-  
-  .feedback-category.pr .pr.score {
-    font-size: 32px;
-    margin-top: 40px;
-    font-weight: bold;
-    text-align: center;
-    color: #000000;
-    padding: 15px;
-  }
-  
-  #final-prediction {
-    font-size: 48px;
-    font-weight: bold;
-    margin: 20px 0;
+    flex: 1 1 100%;
   }
-  
-  .question {
-    margin-top: 10px;
-    font-size: 18px;
-    font-weight: normal;
-    color: #333;
+
+  .tab-button, .sub-tab-button {
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-size: 0.9em;
   }
-  
-  /* Responsive design adjustments */
-  @media (max-width: 768px) {
-    .feedback-row {
-        flex-direction: column;
-    }
-  
-    .feedback-category {
-        margin-right: 0;
-        margin-bottom: 20px;
-    }
-  
-    .feedback-category:last-child {
-        margin-bottom: 0;
-    }
-  }
\ No newline at end of file
+}