diff --git a/src/App.js b/src/App.js
index bc4d145..e80aafa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
+import styled from "styled-components";
+
 import Contents from "./Components/Contents";
 
 export default function App() {
   return (
     <>
-      <h1>🤖 프로그래머스 JS 정답 통과기</h1>
+      <title>Codestin Search App</title>
       <Contents />
     </>
   );
 }
+
+const Title = styled.h1``;
diff --git a/src/Components/Contents.js b/src/Components/Contents.js
index 4fe1bb1..ef40d11 100644
--- a/src/Components/Contents.js
+++ b/src/Components/Contents.js
@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import styled from "styled-components";
 
 import Introduction from "./Tabs/Introduction";
 import ErrorReport from "./Tabs/ErrorReport";
@@ -7,17 +8,17 @@ import SolutionReport from "./Tabs/SolutionReport";
 export default function TabNavigation() {
   return (
     <BrowserRouter>
-      <ul>
-        <li>
+      <TabList>
+        <TabItem>
           <Link to="/">소개</Link>
-        </li>
-        <li>
+        </TabItem>
+        <TabItem>
           <Link to="/error-report">오류 제보</Link>
-        </li>
-        <li>
+        </TabItem>
+        <TabItem>
           <Link to="/solution-report">정답 제보</Link>
-        </li>
-      </ul>
+        </TabItem>
+      </TabList>
       <Routes>
         <Route path="/" element={<Introduction />}></Route>
         <Route path="/error-report" element={<ErrorReport />}></Route>
@@ -26,3 +27,7 @@ export default function TabNavigation() {
     </BrowserRouter>
   );
 }
+
+const TabList = styled.ul``;
+
+const TabItem = styled.li``;
diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js
index 10d9d9a..a9ebb43 100644
--- a/src/Components/Tabs/ErrorReport.js
+++ b/src/Components/Tabs/ErrorReport.js
@@ -1,91 +1,120 @@
 import { useState } from "react";
+import {
+  TabWrapper,
+  BlockText,
+  Button,
+  StepByStepInputItem,
+  InlineText,
+  RadioInput,
+  Label,
+  TextInput,
+  DataList,
+  Option,
+  TextArea,
+} from "./Style/StyledComponent";
 
 export default function ErrorReport() {
   const [submitted, setSubmitted] = useState(false);
-  const [errorCategory, setErrorCategory] = useState(-1);
+  const [errorCategory, setErrorCategory] = useState("");
   const [questionName, setQuestionName] = useState("");
-  const [detailInput, setDetailInput] = useState("");
+  const [detailContent, setDetailContent] = useState("");
+
+  const isQuestionNameUnvisible = errorCategory === "" || errorCategory === "error-notCopied";
+  const isDetailContentUnvisible =
+    errorCategory === "" || (errorCategory === "error-wrongAnswer" && questionName === "");
+  const isSubmitBtnDisabled = errorCategory === "error-other" && detailContent === "";
+
+  function handleOtherErrorBtnClick() {
+    setSubmitted(false);
+    setErrorCategory("");
+    setQuestionName("");
+    setDetailContent("");
+  }
+
+  function handleErrorCategoryClick(e) {
+    setErrorCategory(e.target.id);
+  }
+
+  function handleQuestionNameInput(e) {
+    setQuestionName(e.target.value);
+  }
+
+  function handleDetailContentInput(e) {
+    setDetailContent(e.target.value);
+  }
+
+  function handleSubmitBtnClick() {
+    setSubmitted(true);
+  }
 
   return submitted ? (
-    <div>
-      <p>제보해주셔서 감사합니다.</p>
-      <button
-        onClick={() => {
-          setSubmitted(false);
-          setErrorCategory(-1);
-          setQuestionName("");
-          setDetailInput("");
-        }}
-      >
-        다른 오류 제보
-      </button>
-    </div>
+    <TabWrapper>
+      <BlockText>제보해주셔서 감사합니다.</BlockText>
+      <Button onClick={handleOtherErrorBtnClick}>다른 오류 제보</Button>
+    </TabWrapper>
   ) : (
-    <div>
-      <div>
-        <span>오류 유형: </span>
-        <input
+    <TabWrapper>
+      <StepByStepInputItem>
+        <InlineText>오류 유형: </InlineText>
+        <RadioInput
           type="radio"
-          id="errorCategory0"
+          id="error-wrongAnswer"
           name="errorCategory"
-          onClick={() => setErrorCategory(0)}
+          onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="errorCategory0">정답 통과가 안돼요</label>
-        <input
+        <Label htmlFor="error-wrongAnswer">정답 통과가 안돼요</Label>
+        <RadioInput
           type="radio"
-          id="errorCategory1"
+          id="error-notCopied"
           name="errorCategory"
-          onClick={() => setErrorCategory(1)}
+          onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="errorCategory1">코드 복사가 안돼요</label>
-        <input
+        <Label htmlFor="error-notCopied">코드 복사가 안돼요</Label>
+        <RadioInput
           type="radio"
-          id="errorCategory2"
+          id="error-other"
           name="errorCategory"
-          onClick={() => setErrorCategory(2)}
+          onClick={handleErrorCategoryClick}
         />
-        <label htmlFor="errorCategory2">기타</label>
-      </div>
+        <Label htmlFor="error-other">기타</Label>
+      </StepByStepInputItem>
 
-      {errorCategory === -1 || errorCategory === 1 ? null : (
-        <div>
-          <span>문제 이름:</span>
-          <input
+      {isQuestionNameUnvisible ? null : (
+        <StepByStepInputItem>
+          <InlineText>문제 이름: </InlineText>
+          <TextInput
             list="questionName"
             name="question"
-            onInput={(e) => setQuestionName(e.target.value)}
+            onInput={handleQuestionNameInput}
             defaultValue={questionName}
           />
-          <datalist id="questionName">
-            <option value="1번문제" />
-            <option value="2번문제" />
-            <option value="3번문제" />
-          </datalist>
-        </div>
+          <DataList id="questionName">
+            <Option value="1번문제" />
+            <Option value="2번문제" />
+            <Option value="3번문제" />
+          </DataList>
+        </StepByStepInputItem>
       )}
 
-      {errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : (
+      {isDetailContentUnvisible ? null : (
         <>
-          <div>
-            <span>내용: </span>
-            <textarea
+          <StepByStepInputItem>
+            <InlineText>내용: </InlineText>
+            <TextArea
               rows="20"
               cols="100"
-              onInput={(e) => setDetailInput(e.target.value)}
-              defaultValue={detailInput}
-            ></textarea>
-          </div>
-          <div>
-            <button
-              id="submitBtn"
-              disabled={errorCategory === 2 && detailInput === ""}
-              onClick={() => setSubmitted(true)}
-            >
+              onInput={handleDetailContentInput}
+              defaultValue={detailContent}
+            ></TextArea>
+          </StepByStepInputItem>
+
+          <StepByStepInputItem>
+            <Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
-            </button>
-          </div>
+            </Button>
+          </StepByStepInputItem>
         </>
       )}
-    </div>
+    </TabWrapper>
   );
 }
diff --git a/src/Components/Tabs/Introduction.js b/src/Components/Tabs/Introduction.js
index 9246900..17d1b77 100644
--- a/src/Components/Tabs/Introduction.js
+++ b/src/Components/Tabs/Introduction.js
@@ -1,8 +1,5 @@
+import { TabWrapper } from "./Style/StyledComponent";
+
 export default function Introduction() {
-  return (
-    <div>
-      <p>IntroductionTab</p>
-      {/* IntroductionTab content will go here */}
-    </div>
-  );
+  return <TabWrapper>{/* IntroductionTab content will go here */}</TabWrapper>;
 }
diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js
index a26cdca..5281a5a 100644
--- a/src/Components/Tabs/SolutionReport.js
+++ b/src/Components/Tabs/SolutionReport.js
@@ -1,62 +1,91 @@
 import { useState } from "react";
+import styled from "styled-components";
+
+import {
+  TabWrapper,
+  BlockText,
+  Button,
+  StepByStepInputItem,
+  InlineText,
+  TextInput,
+  DataList,
+  Option,
+  TextArea,
+} from "./Style/StyledComponent";
 
 export default function SolutionReport() {
   const [submitted, setSubmitted] = useState(false);
   const [questionName, setQuestionName] = useState("");
-  const [detailInput, setDetailInput] = useState("");
+  const [detailContent, setDetailContent] = useState("");
+
+  const isDetailContentUnvisible = questionName === "";
+  const isSubmitBtnDisabled = detailContent === "";
+
+  function handleOtherSolutionBtnClick() {
+    setSubmitted(false);
+    setQuestionName("");
+    setDetailContent("");
+  }
+
+  function handleQuestionNameInput(e) {
+    setQuestionName(e.target.value);
+  }
+
+  function handleDetailContentInput(e) {
+    setDetailContent(e.target.value);
+  }
+
+  function handleSubmitBtnClick() {
+    setSubmitted(true);
+  }
 
   return submitted ? (
-    <div>
-      <p>제보해주셔서 감사합니다.</p>
-      <button
-        onClick={() => {
-          setSubmitted(false);
-          setQuestionName("");
-          setDetailInput("");
-        }}
-      >
-        다른 정답 제보
-      </button>
-    </div>
+    <TabWrapper>
+      <BlockText>제보해주셔서 감사합니다.</BlockText>
+      <Button onClick={handleOtherSolutionBtnClick}>다른 정답 제보</Button>
+    </TabWrapper>
   ) : (
-    <div>
-      <div>
-        <span>문제 이름:</span>
-        <input
+    <TabWrapper>
+      <StepByStepInputItem>
+        <InlineText>문제 이름: </InlineText>
+        <TextInput
           list="questionName"
           name="question"
-          onInput={(e) => setQuestionName(e.target.value)}
+          onInput={handleQuestionNameInput}
           defaultValue={questionName}
         />
-        <datalist id="questionName">
-          <option value="1번문제" />
-          <option value="2번문제" />
-          <option value="3번문제" />
-        </datalist>
-      </div>
-
-      {questionName === "" ? null : (
+        <DataList id="questionName">
+          <Option value="1번문제" />
+          <Option value="2번문제" />
+          <Option value="3번문제" />
+        </DataList>
+      </StepByStepInputItem>
+
+      {isDetailContentUnvisible ? null : (
         <>
-          <div className="gitHubLogin">
-            <span>기여자 등록: </span>
-            <button id="gitHubLoginBtn">GitHub 로그인</button>
-          </div>
-          <div>
-            <span>내용: </span>
-            <textarea
+          <StepByStepInputItem>
+            <InlineText>기여자 등록: </InlineText>
+            <GitHubLoginBtn id="gitHubLoginBtn">GitHub 로그인</GitHubLoginBtn>
+          </StepByStepInputItem>
+          <StepByStepInputItem>
+            <InlineText>내용: </InlineText>
+            <TextArea
               rows="20"
               cols="100"
-              onInput={(e) => setDetailInput(e.target.value)}
-              defaultValue={detailInput}
-            ></textarea>
-          </div>
-          <div>
-            <button id="submitBtn" disabled={detailInput === ""} onClick={() => setSubmitted(true)}>
+              onInput={handleDetailContentInput}
+              defaultValue={detailContent}
+            ></TextArea>
+          </StepByStepInputItem>
+
+          <StepByStepInputItem>
+            <Button id="submitBtn" disabled={isSubmitBtnDisabled} onClick={handleSubmitBtnClick}>
               제출
-            </button>
-          </div>
+            </Button>
+          </StepByStepInputItem>
         </>
       )}
-    </div>
+    </TabWrapper>
   );
 }
+
+const GitHubLoginBtn = styled.button``;
diff --git a/src/Components/Tabs/Style/StyledComponent.js b/src/Components/Tabs/Style/StyledComponent.js
new file mode 100644
index 0000000..c2da699
--- /dev/null
+++ b/src/Components/Tabs/Style/StyledComponent.js
@@ -0,0 +1,27 @@
+// Tabs에서 공통적으로 사용되는 부분을 위해 폴더구조를 이렇게 만들었는데, 뭔가 어색하네요..
+
+import styled from "styled-components";
+
+export const TabWrapper = styled.div``;
+
+export const BlockText = styled.p``;
+
+export const Button = styled.button``;
+
+export const StepByStepInputItem = styled.div``;
+
+export const InlineText = styled.span``;
+
+export const RadioInput = styled.input``;
+
+export const Label = styled.label``;
+
+export const TextInput = styled.input``;
+
+export const DataList = styled.datalist``;
+
+export const Option = styled.option``;
+
+export const DetailContentWrapper = styled.div``;
+
+export const TextArea = styled.textarea``;
diff --git a/src/recoil/atom 2.js b/src/recoil/atom 2.js
deleted file mode 100644
index 9e958b5..0000000
--- a/src/recoil/atom 2.js	
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil";
-
-export const tabNoState = atom({
-  key: "tabNoState",
-  default: 0,
-});
diff --git a/src/recoil/atom.js b/src/recoil/atom.js
deleted file mode 100644
index 9e958b5..0000000
--- a/src/recoil/atom.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil";
-
-export const tabNoState = atom({
-  key: "tabNoState",
-  default: 0,
-});