diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
deleted file mode 100644
index 893c6a8..0000000
--- a/.github/workflows/performance.yml
+++ /dev/null
@@ -1,92 +0,0 @@
-name: Run lighthouse CI When Push
-on: [pull_request]
-
-jobs:
-  lhci:
-    name: Lighthouse CI
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '18'
-
-      - name: Install packages
-        run: |
-          yarn install
-
-      - name: Build
-        run: CI=false yarn build
-
-      - name: Run Lighthouse CI
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-        run: |
-          npm install -g @lhci/cli
-          lhci autorun || true
-
-      - name: Format lighthouse score
-        id: format_lighthouse_score
-        uses: actions/github-script@v3
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const results = JSON.parse(fs.readFileSync('./lhci_reports/manifest.json'));
-            let comments = "";
-            
-            results.forEach((result) => {
-                const {
-                    summary,
-                    jsonPath
-                } = result;
-                const details = JSON.parse(fs.readFileSync(jsonPath));
-                const {
-                    audits
-                } = details;
-                const formatResult = (res) => Math.round(res * 100);
-            
-                Object.keys(summary).forEach(
-                    (key) => (summary[key] = formatResult(summary[key]))
-                );
-            
-                const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴");
-            
-                const comment = [
-                    `⚡️ Lighthouse report!`,
-                    `| Category | Score |`,
-                    `| --- | --- |`,
-                    `| ${score(summary.performance)} Performance | ${summary.performance} |`,
-                    `| ${score(summary.accessibility)} Accessibility | ${summary.accessibility} |`,
-                    `| ${score(summary["best-practices"])} Best Practices | ${summary["best-practices"]} |`,
-                    `| ${score(summary.seo)} SEO | ${summary.seo} |`,
-                    `| ${score(summary.pwa)} PWA | ${summary.pwa} |`,
-                ].join("\n");
-            
-                const detail = [
-                    `| Category | Score |`,
-                    `| --- | --- |`,
-                    `| ${score(
-                                audits["first-contentful-paint"].score * 100
-                              )} First Contentful Paint | ${
-                                audits["first-contentful-paint"].displayValue
-                              } |`,
-                    `| ${score(
-                                audits["largest-contentful-paint"].score * 100
-                              )} Largest Contentful Paint | ${
-                                audits["largest-contentful-paint"].displayValue
-                              } |`,
-                ].join("\n");
-                comments += comment + "\n" + detail + "\n";
-            });
-            core.setOutput('comments', comments)
-  
-      - name: comment PR
-        uses: unsplash/comment-on-pr@v1.3.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          msg: ${{ steps.format_lighthouse_score.outputs.comments}}
\ No newline at end of file
diff --git a/.lighthouserc.json b/.lighthouserc.json
index f2e5b5d..58ea837 100644
--- a/.lighthouserc.json
+++ b/.lighthouserc.json
@@ -1,35 +1,35 @@
 {
-    "ci": {
-        "collect": {
-            "startServerCommand": "yarn start",
-            "startServerReadyPattern": "ready on",
-            "url": [
-                "http://localhost:3000",
-                "http://localhost:3000/profile",
-                "http://localhost:3000/detail"
-            ],
-            "numberOfRuns": 1,
-            "settings": {
-                "preset": "desktop",
-                "chromeFlags": "--no-sandbox"
-            }
-        },
-        "assert": {
-            "preset": "lighthouse:recommended",
-            "assert": {
-                "assertions": {
-                    "categories:performance": ["warn", { "minScore": 0.8 }],
-                    "categories:accessibility": ["warn", { "minScore": 0.8 }],
-                    "categories:best-practices": ["warn", { "minScore": 0.8 }],
-                    "categories:seo": ["warn", { "minScore": 0.8 }]
-                }
-            }
-        },
-        "server": {},
-        "upload": {
-            "target": "filesystem",
-            "outputDir": "./lhci_reports",
-            "reportFilenamePattern": "%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%"
+  "ci": {
+    "collect": {
+      "staticDistDir": "./build",
+      "startServerReadyPattern": "ready on",
+      "url": [
+        "http://localhost:3000",
+        "http://localhost:3000/profile",
+        "http://localhost:3000/detail"
+      ],
+      "numberOfRuns": 1,
+      "settings": {
+        "preset": "desktop",
+        "chromeFlags": "--no-sandbox"
+      }
+    },
+    "assert": {
+      "preset": "lighthouse:recommended",
+      "assert": {
+        "assertions": {
+          "categories:performance": ["warn", { "minScore": 0.8 }],
+          "categories:accessibility": ["warn", { "minScore": 0.8 }],
+          "categories:best-practices": ["warn", { "minScore": 0.8 }],
+          "categories:seo": ["warn", { "minScore": 0.8 }]
         }
+      }
+    },
+    "server": {},
+    "upload": {
+      "target": "filesystem",
+      "outputDir": "./lhci_reports",
+      "reportFilenamePattern": "%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%"
     }
+  }
 }
diff --git a/package.json b/package.json
index 2bb3a90..9feca3d 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@babel/preset-react": "^7.23.3",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.33"
   }
 }
diff --git a/public/index.html b/public/index.html
index d30f405..a1b1e67 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,9 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.jsx b/src/App.jsx
index bb3c6dc..be0d71b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,7 @@ import Qdetail from "src/Qdetail";
 function App() {
   return (
     <div>
-      <BrowserRouter>
+      <BrowserRouter basename={process.env.PUBLIC_URL}>
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/profile" element={<Myprofile />} />
diff --git a/src/Header.jsx b/src/Header.jsx
new file mode 100644
index 0000000..adae5f5
--- /dev/null
+++ b/src/Header.jsx
@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from "react";
+import { styles } from "./components/qdetail/style";
+import { useState } from "react";
+
+function Header() {
+    const [searchClick, setSearchClick] = useState(false);
+    const [searchContent, setSearchContent] = useState('')
+    const [isSearchClicked, setIsSearchClicked] = useState(false)
+    const [isLogined, setIsLogined] = useState(false)
+    const handleLogin = () => {
+        setIsLogined(true)
+    }
+    const handleSearchBlock = () => {
+        setIsSearchClicked(!isSearchClicked)
+        console.log(isSearchClicked)
+    }
+    const handleSearchClick = (event) => {
+        setSearchContent(event.target.value)
+    }//서버로 보낼 검색한 내용이 담긴 값
+    const handleSearchBlockBack = () => {
+        setIsSearchClicked(!isSearchClicked)
+        console.log(isSearchClicked)
+    }
+    const handleLogout = () => {
+        setIsLogined(false)
+    }
+    return (
+        <div style={styles.header_block}>
+            <div style={{ color: "#EB7125", fontWeight: 'bold', width: '6vw' }}>큐피로고</div>{/*로고 이미지로 대체*/}
+            <div style={isSearchClicked ? styles.search_btn_after : styles.search_btn_before}>
+                {isSearchClicked ?
+                    <div style={{ display: 'flex', transition: 'all 0.5s ease' }}>
+                        <div onClick={handleSearchBlockBack} style={styles.header_back_search}>←</div>
+                        <input placeholder="단어 형태로 검색어를 입력하세요" style={styles.header_input}></input>
+                        <div style={styles.header_search_after}></div>
+                    </div>
+                    :
+                    <div onClick={handleSearchBlock} style={styles.header_center_before}>
+                        <div style={styles.header_search_before}></div>
+                        <div style={styles.header_input_before}>질문하기 전 검색하기</div>
+                    </div>}
+
+            </div>{/* timing-function로 돋보기모양 div 이동, 
+            좌우로 늘리기, 
+            input태그 event/value 내용 props로 전달 */}
+            <div style={{ width: '6vw' }}></div>
+            {isLogined ? <div style={styles.header_profile}>
+                <div onClick={handleLogout} style={styles.header_logout}>로그아웃</div>
+                <div style={styles.header_profile_box}>
+                    <div style={styles.header_profile_img}></div>
+                    <div style={styles.header_profile_nickname}>닉네임</div>
+                    <div style={styles.header_profile_point}>100P</div>
+                    <div style={styles.header_profile_charge_btn}>충전하러 가기</div>
+                </div>
+            </div>
+                :
+                <div onClick={handleLogin} style={styles.header_not_login}>
+                    <div style={styles.header_login_btn}>로그인하기</div>
+                </div>}
+
+        </div >
+    )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/Qdetail.jsx b/src/Qdetail.jsx
index 039a0d9..b238df8 100644
--- a/src/Qdetail.jsx
+++ b/src/Qdetail.jsx
@@ -2,7 +2,10 @@
 import React from "react";
 import { useState } from "react";
 import { styles } from "src/components/qdetail/style";
-//import { Link } from "react-router-dom";
+import Answer from "./components/qdetail/Answer";
+import Newanswer from "./components/qdetail/Newanswer";
+import Question from "./components/Question";
+import Header from "./Header";
 //import { Link } from "react-router-dom";
 
 function Qdetail() {
@@ -11,6 +14,40 @@ function Qdetail() {
     const [view, setView] = useState(false);
     const [alarm, setAlarm] = useState(false);
     const [isAnswer, setIsAnswer] = useState(false);
+    const [isChild, setIsChiled] = useState(true);
+    const [answerOfAnswer, setAnswerOfAnswer] = useState(false);
+    const [answerList, setAnswerList] = useState([
+        {
+            content: "이것은 첫 번째 답변입니다.",
+            author: "User1",
+            reply: [{
+                content: '이것은 첫 번째 답변의 리플1입니다.',
+                author: "User4"
+            },
+            {
+                content: '이것은 첫 번째 답변의 리플2입니다.',
+                author: 'User7'
+            }],
+        },
+        {
+            content: "두 번째 답변입니다.",
+            author: "User2",
+            reply: [{
+            }]
+        },
+        {
+            content: "세 번째 답변입니다.",
+            author: "User3",
+            reply: [{
+                content: '이것은 세 번째 답변의 리플1입니다.',
+                author: "User6",
+            }]
+        },
+    ]);/*서버에서 받는 답변 리스트
+    Answer안에 있는 Reanswer에 대한 내용도 Qdetail에서 받아야할지,
+    Answer컴포넌트에서 불러와야할지...*/
+
+    //등록하기 누름 => textarea에 있는 내용이 컴포넌트를 불러오는 컴포넌트로 전달 => map으로 돌려서 생성
     const ddClick = () => {
         setView(!view)
     };
@@ -18,49 +55,43 @@ function Qdetail() {
         console.log("clicked")
         setBtnClicked(true)
     };
+
     return (
-        <div style={styles.container}>
-            <div style={styles.q_a_sub}>
-                <button style={styles.q_container}>
-                    <div>돋보기 사진이 들어갈 자리</div>
-                    <div>궁금한 것을 질문해보세요</div>
-                </button>
-                <button style={styles.ad}>광고/배너</button>
-            </div>
-            <div style={styles.ad_q}>
-                <div style={styles.a_b_q_container}>
-                    <div style={styles.b_q_container}>이전 질문으로 이동 칸</div>
-                    {/*Link 컴포넌트로 바꿀 태그*/}
-                    <div style={styles.a_q_container}>다음 질문으로 이동 칸</div>
-                    {/*Link 컴포넌트로 바꿀 태그*/}
+        <div>
+            <Header />
+            <div style={styles.full_container}>
+                <div style={styles.search_ad_container}>
                 </div>
-                <div style={styles.q_a_main}>
-                    <div style={{ display: 'flex', flex: '1' }}>
-                        <div style={styles.q_content}>
-                            <div style={{ background: 'blue', flex: '1', display: 'flex' }}>
-                                <div style={{ flex: "1", background: 'red', borderRadius: "50%", width: "7vh", height: "7vh" }}>질문자 프로필</div>
-                                <div style={{ flex: '10' }}>제목/해시태그/시간/어린이/더보기</div>
-                            </div>
-                            <div style={{ background: 'skyblue', flex: '1' }}>질문내용</div>
-                        </div>
+                <div style={styles.question_detail_main_container}>
+                    <div style={styles.after_before_question_container}>
+                        <div style={styles.before_question_container}>◀ 이전 질문으로 이동 칸</div>
+                        {/*Link 컴포넌트로 바꿀 태그*/}
+                        <div style={styles.after_question_container}>다음 질문으로 이동 칸 ▶</div>
+                        {/*Link 컴포넌트로 바꿀 태그*/}
                     </div>
-                    <hr style={{ width: '90%', height: '2px', background: 'white' }} />
-                    <div style={{ display: 'flex', justifyContent: 'center' }}>
-                        {btnClicked ? null/*답변 입력할 수 있는 컴포넌트*/ : <button onClick={answerClick} style={styles.a_button}>
-                            답변하기
-                        </button>}
+                    <div style={styles.main_orange_container}>
+                        <div style={{ flex: '1' }}>
+                            <Question />
+                        </div>
+                        <div style={{ textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '16px' }}>{answerList.length}명의 전문가가 답변했어요</div>
+                        <hr style={styles.hrline} />
+                        <div style={btnClicked ? { flex: '1', display: 'flex', justifyContent: 'center', alignItems: 'center' } : { display: 'flex', height: '100%' }}>
+                            {btnClicked ? <Newanswer /> :
+                                <button onClick={answerClick} style={styles.answer_button}>답변하기</button>}
+                        </div>
+                        {answerList.map((answer, index) => (
+                            <div style={styles.answer}>
+                                <Answer key={index} reply={answer.reply} content={answer.content} author={answer.author} />
+                            </div>
+                        ))}
                     </div>
-                    {/* map함수로 답변 컴포넌트 호출 */}
+                </div>
+                <div style={styles.profilecontainer}>
+                    { }
 
-                    <div style={styles.answer}>답변1</div>
-                    <div style={styles.answer}>답변2</div>
-                    <div style={styles.answer}>답변3</div>
                 </div>
-            </div>
-            <div style={styles.profilecontainer}>
-                <div style={styles.profilecontainer2}>로그인</div>
-            </div>
-        </div >
+            </div >
+        </div>
     );
 }
-export default Qdetail;
+export default Qdetail;
\ No newline at end of file
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
new file mode 100644
index 0000000..22ec9d2
--- /dev/null
+++ b/src/components/Dropdown.jsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from "react";
+import { styles } from "./qdetail/style";
+import { useState } from "react";
+
+function Dropdown() {
+    const [view, setView] = useState(false);
+
+    return (
+        <div>
+            <ul onClick={() => { setView(!view) }} style={styles.dropdownbtn}>⋮
+                {view && (
+                    <div style={{ background: 'white', border: '1px solid #000' }}>
+                        <li style={{ order: '-1', height: '25px', width: "100px" }}>수정하기</li>
+                        <li style={{ order: '-1', height: '25px', width: "100px" }}>신고하기</li>
+                    </div>
+                )}
+            </ul>
+        </div>
+    )
+};
+export default Dropdown;
\ No newline at end of file
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
new file mode 100644
index 0000000..c847d70
--- /dev/null
+++ b/src/components/Question.jsx
@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from "react";
+import { useState } from "react";
+import { styles } from "./qdetail/style";
+import Dropdown from "./Dropdown";
+
+function Question() {
+    const [isChild, setIsChiled] = useState(true);
+
+    return (
+        <div style={styles.question_container}>
+            <div style={styles.q_box}>
+                <div style={styles.question_main}>
+                    <div style={styles.profile_box}><div style={styles.profile_img}></div></div>
+                    <div style={styles.question_main2}>
+                        <div style={styles.question_main3}>
+                            <div style={styles.question_hashtag}>#해시태그</div>
+                            <div style={{ flex: '1' }}>{isChild ? "어린이" : null}</div>
+                            <Dropdown />
+                        </div>
+                        <h3 style={styles.question_title}>질문 제목</h3>
+                        <div style={{ flex: '1' }}>🕓1시간 전</div>
+                    </div>
+                </div>
+                <div style={{ flex: '3', margin: '15px' }}>질문내용</div>
+            </div>
+        </div>
+    )
+}
+
+export default Question;
\ No newline at end of file
diff --git a/src/components/Reanswer.jsx b/src/components/Reanswer.jsx
new file mode 100644
index 0000000..8eed062
--- /dev/null
+++ b/src/components/Reanswer.jsx
@@ -0,0 +1,31 @@
+// @ts-nocheck
+
+import React from "react";
+import { useState } from "react";
+import Newanswer from "./qdetail/Newanswer";
+import { styles } from "./qdetail/style";
+import Dropdown from "./Dropdown";
+
+function Reanswer({ content, author, reply }) {
+    const [isBlurred, setIsBlurred] = useState(false);
+
+
+    return (
+        <div style={styles.newanswer_box}>
+            <div style={styles.question_main}>
+                <div style={styles.profile_box}><div style={styles.profile_img}></div></div>
+                <div style={styles.question_main2}>
+                    <div style={styles.question_main3}>
+                        <Dropdown />
+                    </div>
+                    <h3 style={styles.question_title}>{author}</h3>
+                </div>
+            </div>
+            <div style={{ margin: '15px', minHeight: '10vh', filter: isBlurred ? 'blur(5px)' : 'none' }}>
+                {content}
+            </div>
+        </div>
+    )
+}
+
+export default Reanswer;
\ No newline at end of file
diff --git a/src/components/qdetail/Answer.jsx b/src/components/qdetail/Answer.jsx
new file mode 100644
index 0000000..5c52ab3
--- /dev/null
+++ b/src/components/qdetail/Answer.jsx
@@ -0,0 +1,58 @@
+// @ts-nocheck
+import React from "react";
+import { styles } from "./style";
+import { useState } from "react";
+import Newanswer from "./Newanswer";
+import Dropdown from "../Dropdown";
+import Reanswer from "../Reanswer";
+
+function Answer({ content, author, reply }) {//props로 답변 내용을 전달받음
+    const [view, setView] = useState(false);
+    const [answerOfAnswer, setAnswerOfAnswer] = useState(false);
+    const [isBtnClicked, setIsBtnClicked] = useState(false);
+    const [isBlurred, setIsBlurred] = useState(true);
+    const [reanswerList, setReanswerList] = useState(reply);
+
+    const handleCheckBtn = () => {
+        setIsBtnClicked(true);
+        setAnswerOfAnswer(true);
+        setIsBlurred(false);
+    };
+
+    return (
+        <div style={{ position: 'relative' }}>
+            {isBtnClicked ? null : (
+                <button onClick={handleCheckBtn} style={{ order: '-1', position: 'absolute', top: '50%', left: '42%', ...styles.answer_button, zIndex: '1000' }}>
+                    눌러서 답변 확인
+                </button>
+            )}
+            <div style={styles.question_main}>
+                <div style={styles.profile_box}><div style={styles.profile_img}></div></div>
+                <div style={styles.question_main2}>
+                    <div style={styles.question_main3}>
+                        <Dropdown />
+                    </div>
+                    <h3 style={styles.question_title}>{author}</h3>
+                </div>
+            </div>
+            <div style={{ margin: '15px', minHeight: '10vh', filter: isBlurred ? 'blur(5px)' : 'none' }}>
+                {content}
+            </div>
+
+            {answerOfAnswer && (
+                <div>
+                    {answerOfAnswer && (
+                        <div>
+                            {reanswerList.map((reanswer, index) => reanswer.content && reanswer.content.length > 0 ? (
+                                <Reanswer key={index} reply={reanswerList} content={reanswer.content} author={reanswer.author} />
+                            ) : null)}
+                            <Newanswer />
+                        </div>
+                    )}
+                </div>
+            )}
+        </div >
+    );
+}
+
+export default Answer;
diff --git a/src/components/qdetail/Newanswer.jsx b/src/components/qdetail/Newanswer.jsx
new file mode 100644
index 0000000..3344e5f
--- /dev/null
+++ b/src/components/qdetail/Newanswer.jsx
@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from "react";
+import { styles } from "./style";
+import { useState } from "react";
+import Dropdown from "../Dropdown";
+
+function Newanswer() {
+    const [answerText, setAnswerText] = useState("");
+    const [submitBtnClicked, setSubmitBtnClicked] = useState(false);
+
+    const onChangeText = (event) => {
+        setAnswerText(event.target.value);
+    }//서버에 추가할 답변 내용
+    const handleSubmit = () => {
+        setSubmitBtnClicked(true)
+    }
+
+    // 나중에 서버에 올릴 값(변수 answerText)
+
+    return (
+        <div style={styles.newanswer_box}>
+            <div style={styles.question_main}>
+                <div style={styles.profile_box}><div style={styles.profile_img}></div></div>
+                <div style={styles.question_main2}>
+                    <div style={styles.question_main3}>
+                        <Dropdown />
+                    </div>
+                    <h3 style={styles.question_title}>답변자 정보</h3>
+                </div>
+            </div>
+            <div style={{ justifyContent: 'center' }}>
+                <div style={{ ...styles.inputBox, background: "#D9D9D9" }}>
+                    <textarea
+                        placeholder="답변을 입력해주세요."
+                        style={styles.inputBox2}
+                        onChange={onChangeText}
+                    />
+                </div>
+                <div><button onClick={handleSubmit} style={styles.answer_button}>등록하기</button></div>
+
+            </div>
+        </div>
+    )
+}
+
+export default Newanswer;
diff --git a/src/components/qdetail/style.js b/src/components/qdetail/style.js
index 3b601e9..1b369c4 100644
--- a/src/components/qdetail/style.js
+++ b/src/components/qdetail/style.js
@@ -1,59 +1,53 @@
 export const styles = {
-    container: {
-        display: 'flex'
+    full_container: {
+        display: 'flex',
     },
-    q_a_sub: {
-        flex: '1',
+    search_ad_container: {
+        flex: '0.6',
         display: 'inline',
     },
-    ad_q: {
-        flex: '3',
+    question_detail_main_container: {
+        width: '60vw',
         display: 'inline',
-        margin: '2%'
+        marginTop: '3%'
     },
-    a_b_q_container: {
+    after_before_question_container: {
         display: "flex",
         justifyContent: "space-between",
     },
-    b_q_container: {
-        marginTop: '5px',
-        marginBottom: '10px',
-        marginLeft: '5px'
+    before_question_container: {
+        margin: '1.5%'
     },
-    a_q_container: {
-        marginTop: '5px',
-        marginBottom: '10px',
-        marginLeft: '5px'
+    after_question_container: {
+        margin: '1.5%'
     },
-    q_container: {
+    search_container: {
         borderRadius: '15px',
         width: '20.4vw',
         height: '42.7vh',
-        margin: '7.5%',
         boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         color: '#EB7125',
         border: 'none'
     },
-    ad: {
+    ad_container: {
         borderRadius: '15px',
         width: '20.4vw',
         height: '42.7vh',
-        margin: '7.5%',
+        marginTop: '7%',
         boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         color: '#EB7125',
         border: 'none',
         fontWeight: 'bold'
     },
-    q_a_main: {
+    main_orange_container: {
         background: '#EB7125',
-        width: '59.7vw',
-        height: '90.2vh',
+        width: '100%',
+        minHeight: '100%',
         boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         borderRadius: '20px',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: "center"
-
+        justifyContent: "center",
     },
     profilecontainer: {
         flex: "0.6",
@@ -65,30 +59,251 @@ export const styles = {
     answer: {
         flex: "1",
         background: '#FFFFFF',
-        margin: '25px',
+        margin: '3%',
         borderRadius: "15px",
         boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
-        color: '#EB7125',
     },
-    q_content: {
+    q_box: {
         background: "#FFFFFF",
-        margin: '25px',
+        margin: '3%',
         borderRadius: "15px",
         boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
         flex: "1",
-        color: '#EB7125',
+        color: '',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        height: '30vh'
     },
-    a_button: {
-        width: "15.8%",
-        height: "150%",
+    answer_button: {
+        width: "9.44vw",
+        height: "3.613vh",
+        display: 'flex',
         alignItems: 'center',
-        borderRadius: "15px",
+        justifyContent: 'center',
+        borderRadius: "20px",
         border: 'none',
         color: '#EB7125',
         fontWeight: 'bold',
         boxShadow: 'inset 0 2px 6px 0 #00000040, 0 2px 6px 0 black',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    },
 
+    question_container: {
+        display: 'flex',
+        minHeight: '100%'
+    },
+    question_main: {
+        flex: '1',
+        display: 'flex',
+    },
+    profile_box: {
+        flex: '1',
+        margin: '10px'
+    },
+    profile_img: {
+        background: '#D9D9D9',
+        borderRadius: "50%",
+        width: "8vh",
+        height: "8vh",
+        margin: '2px'
+    },
+    question_main2: {
+        flexDirection: 'column',
+        display: 'flex',
+        flex: '10',
+    },
+    question_main3: {
+        display: 'flex',
+        flex: '2',
+        position: 'relative',
+    },
+    question_hashtag: {
+        flex: '5'
+    },
+    dropdownbtn: {
+        listStyle: 'none',
+        marginTop: '0px',
+        marginLeft: '-5%',
+        position: 'absolute',
+        left: '92%',
+    },
+    question_title: {
+        flex: '2',
+        marginTop: '0px',
+    },
+    hrline: {
+        width: '90%',
+        height: '2px',
+        background: 'white'
+    },
+    inputBox: {
+        background: '#D9D9D9',
+        borderRadius: '20px',
+        width: '95%',
+        height: '10vh',
+        margin: '2%',
+        border: 'none',
+        overflowY: 'auto',
+        overflowWrap: 'break-word',
+        whiteSpace: 'pre-wrap'
+    },
+    inputBox2: {
+        background: '#D9D9D9',
+        width: '95%',
+        height: '70%',
+        margin: '1%',
+        border: 'none',
+        overflowY: 'auto',
+        overflowWrap: 'break-word',
+        whiteSpace: 'pre-wrap'
+    },
+    newanswer_box: {
+        background: "#FFFFFF",
+        margin: '25px',
+        borderRadius: "15px",
+        boxShadow: 'inset 0 4px 4px 0 #00000040, 0 4px 4px 0 black',
+        flex: "1",
+        flexDirection: 'column',
+        minHeight: '100%',
+    },
+    header_block: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '2%',
+        marginBottom: '0px'
+    },
+    search_btn_before: {
+        width: '29.2vw',
+        height: '6.8vh',
+        borderRadius: '40px',
+        background: 'linear-gradient(to right, #EB7125,#CB4E00)',
+        display: 'flex',
+    },
+    header_input_before: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: 'white',
+        width: '100%',
+        right: '0',
+        marginLeft: '9.5vw',
+        textAlign: 'center',
+        marginTop: '2vh'
+    },
+    header_search_before: {
+        marginLeft: '-0.5%',
+        marginTop: '-0.5%',
+        width: '9vh',
+        height: '9vh',
+        borderRadius: '50%',
+        position: 'absolute',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        boxShadow: '0px 4px 4px 2px rgba(0, 0, 0, 0.25), 0px 2px 8px 0px rgba(0, 0, 0, 0.25) inset',
+        transition: 'all 0.5s ease'
+    },
+    search_btn_after: {
+        width: '48.3vw',
+        height: '6.8vh',
+        borderRadius: '40px',
+        background: 'linear-gradient(to right, #EB7125,#CB4E00)',
+        display: 'flex',
+    },
+    header_search_after: {
+        left: '71%',
+        marginTop: '-0.5%',
+        width: '9vh',
+        height: '9vh',
+        borderRadius: '50%',
+        position: 'absolute',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        boxShadow: '0px 4px 4px 2px rgba(0, 0, 0, 0.25), 0px 2px 8px 0px rgba(0, 0, 0, 0.25) inset',
+        transition: 'all 0.5s ease'
+    },
+    header_center_before: {
+        display: 'flex',
+        height: '6.8vh',
+        textAlign: 'center'
+    },
+    header_back_search: {
+        marginLeft: '3%',
+        color: 'white',
+        fontSize: '43px',
+        fontWeight: 'bold',
+        transition: 'all 0.5s ease'
+    },
+    header_input: {
+        border: 'none',
+        background: 'none',
+        color: 'white',
+        marginLeft: '2%',
+        width: '40vw'
+    },
+    header_not_login: {
+        justifyContent: 'center',
+        textAlign: 'center',
+        borderRadius: '40px',
+        background: 'linear-gradient(to top, rgba(235, 113, 37, 1),rgba(203, 78, 0, 1))',
+        width: '10.76vw',
+        height: '6.83vh',
+        position: 'absolute',
+        left: '88%'
+    },
+    header_profile: {
+        width: '8.948vw',
+        height: '24.9vh',
+        background: 'linear-gradient(to bottom, rgba(235, 113, 37, 1),rgba(203, 78, 0, 1))',
+        borderRadius: '40px',
+        justifyContent: 'center',
+        position: 'absolute',
+        left: '88%'
+    },
+    header_logout: {
+        marginTop: '5%',
+        marginRight: '10%',
+        textAlign: 'right',
+        fontWeight: '600',
+        fontSize: '10px',
+        color: 'white',
+        textDecoration: 'underline'
+    },
+    header_profile_box: {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'center',
+        justifyCoSntent: 'center',
+        alignItems: 'center'
+    },
+    header_profile_img: {
+        width: '9vh',
+        height: '9vh',
+        borderRadius: '50%',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        border: '1px solid white'
+    },
+    header_profile_nickname: {
+        fontWeight: '900',
+        fontSize: '21px',
+        color: 'white',
+        margin: '4.5%'
+    },
+    header_profile_point: {
+        fontWeight: '900',
+        fontSize: '21px',
+        color: 'white',
+        margin: '4.5%'
+    },
+    header_profile_charge_btn: {
+        background: 'white',
+        width: '7.617vw',
+        height: "1.597vh",
+        borderRadius: '20px',
+        fontWeight: '700',
+        fontSize: '10px',
+        margin: '4.5%'
+    },
+    header_login_btn: {
+        color: 'white',
+        marginTop: '11%'
     }
+
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 31f8739..33632bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8335,6 +8335,15 @@ postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.33:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"