diff --git a/package-lock.json b/package-lock.json
index 28052b4..1a429ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "react": "18.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "18.2.0",
+        "react-stack-grid": "^0.7.1",
         "styled-components": "^5.3.10",
         "tailwindcss": "3.3.2",
         "ts-pattern": "^5.0.4",
@@ -40,6 +41,7 @@
         "@storybook/nextjs": "^7.1.0",
         "@storybook/react": "^7.1.0",
         "@storybook/testing-library": "^0.2.0",
+        "@types/react-stack-grid": "^0.7.3",
         "eslint-plugin-storybook": "^0.6.13",
         "storybook": "^7.1.0"
       }
@@ -5284,6 +5286,15 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/react-stack-grid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@types/react-stack-grid/-/react-stack-grid-0.7.3.tgz",
+      "integrity": "sha512-pncNHcm7G8IDtiWptwB+gfRjwE/aBGBUZodvVDmKdswyet4P+3fe0ngavi0wH56VZkQOyFjiMRpA+LrdwJoyAA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -6536,6 +6547,11 @@
         }
       ]
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/better-opn": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
@@ -6729,6 +6745,11 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -7093,6 +7114,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/chain-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -7693,6 +7719,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -8174,6 +8209,14 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8326,6 +8369,14 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/easy-css-transform-builder": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/easy-css-transform-builder/-/easy-css-transform-builder-0.0.2.tgz",
+      "integrity": "sha512-YNwjrdA2RWcF01FkpMtgHrDCicP/oVBEGcILw8dX7wx4q8+KH8A0Lth2Csc7s09DpUVuqcyKIjMXSzZBAT9P7Q==",
+      "dependencies": {
+        "invariant": "^2.2.2"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8352,6 +8403,14 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.455.tgz",
       "integrity": "sha512-8tgdX0Odl24LtmLwxotpJCVjIndN559AvaOtd67u+2mo+IDsgsTF580NB+uuDCqsHw8yFg53l5+imFV9Fw3cbA=="
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -9193,6 +9252,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
+    },
     "node_modules/event-target-shim": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@@ -9243,6 +9307,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -10486,6 +10555,11 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10553,6 +10627,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/imagesloaded": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
+      "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
+      "dependencies": {
+        "ev-emitter": "^1.0.0"
+      }
+    },
     "node_modules/immer": {
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -10608,6 +10690,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
+      "dependencies": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -10621,6 +10712,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -11119,7 +11218,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13814,6 +13912,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-stack-grid": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-stack-grid/-/react-stack-grid-0.7.1.tgz",
+      "integrity": "sha512-Fw7qMt5Rd9wQpNCnvK4Gi+ry/nL5rKfzP2hGsw5/DZxArEMk60VoDLy68Uskq09l6wk7qb2w7P2+lNzSd9mYEw==",
+      "dependencies": {
+        "easy-css-transform-builder": "^0.0.2",
+        "exenv": "^1.2.1",
+        "imagesloaded": "^4.1.1",
+        "inline-style-prefixer": "^3.0.6",
+        "invariant": "^2.2.2",
+        "prop-types": "^15.5.10",
+        "react-sizeme": "^2.2.0",
+        "react-transition-group": "^1.2.0",
+        "shallowequal": "^1.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=15.3.0",
+        "react-dom": ">=15.3.0"
+      }
+    },
+    "node_modules/react-stack-grid/node_modules/react-sizeme": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.12.tgz",
+      "integrity": "sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw==",
+      "dependencies": {
+        "element-resize-detector": "^1.2.1",
+        "invariant": "^2.2.4",
+        "shallowequal": "^1.1.0",
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
+      }
+    },
+    "node_modules/react-stack-grid/node_modules/react-transition-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "dependencies": {
+        "chain-function": "^1.0.0",
+        "dom-helpers": "^3.2.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.5.6",
+        "warning": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15674,6 +15823,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -16318,6 +16475,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index a978429..9394fb2 100644
--- a/package.json
+++ b/package.json
@@ -11,24 +11,25 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
+        "@reduxjs/toolkit": "^1.9.5",
         "@tanstack/react-query": "^4.32.1",
         "@types/node": "20.4.1",
         "@types/react": "18.2.14",
         "@types/react-dom": "18.2.6",
+        "@types/react-redux": "^7.1.25",
         "@types/styled-components": "^5.1.26",
         "autoprefixer": "10.4.14",
         "axios": "^1.4.0",
         "eslint": "8.44.0",
         "eslint-config-next": "13.4.9",
         "next": "13.4.9",
+        "next-redux-wrapper": "^8.1.0",
         "postcss": "8.4.25",
         "react": "18.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "18.2.0",
+        "react-stack-grid": "^0.7.1",
         "styled-components": "^5.3.10",
-        "@reduxjs/toolkit": "^1.9.5",
-        "@types/react-redux": "^7.1.25",
-        "next-redux-wrapper": "^8.1.0",
         "tailwindcss": "3.3.2",
         "ts-pattern": "^5.0.4",
         "typescript": "5.1.6"
@@ -48,6 +49,7 @@
         "@storybook/nextjs": "^7.1.0",
         "@storybook/react": "^7.1.0",
         "@storybook/testing-library": "^0.2.0",
+        "@types/react-stack-grid": "^0.7.3",
         "eslint-plugin-storybook": "^0.6.13",
         "storybook": "^7.1.0"
     }
diff --git a/src/app/add-question/page.tsx b/src/app/add-question/page.tsx
index d45da20..2bf7dd1 100644
--- a/src/app/add-question/page.tsx
+++ b/src/app/add-question/page.tsx
@@ -2,22 +2,23 @@
 import styled, { css } from "styled-components";
 import Spacing from "src/components/Spacing";
 import BackTitle from "src/components/Title/BackTitle";
-import { colors } from "src/constants/colors";
 import Textarea from "src/components/Textarea";
 import Input from "src/components/Input";
 import { useState } from "react";
 import Button from "src/components/Button";
 import Timer from "src/components/pages/question/Timer";
+import { colors } from "styles/theme";
+import { Text } from "src/components/common/Text";
 
-const AddQuestionDatas = [{}, {}, {}];
+const AddQuestionDatas = [{}, {}, {}, {}];
 
 export default function Page() {
-    const [timer, setTimer] = useState<boolean>(true);
+    const [timer, setTimer] = useState<boolean>(false);
 
     return timer ? (
         <>
             <AddQuestionWrapper>
-                <BackTitle />
+                <BackTitle type="default" text="생성 앙케이트 만들기" />
                 <Spacing size={64} />
                 <Timer />
                 <div>오늘 2번의 질문을 모두 올렸군요!</div>
@@ -35,18 +36,32 @@ export default function Page() {
     ) : (
         <>
             <AddQuestionWrapper>
-                <BackTitle />
+                <BackTitle type="default" text="생성 앙케이트 만들기" />
+                <UploadButton>
+                    <Text
+                        typo="Subtitle1b"
+                        color="light_qblack"
+                        style={{
+                            marginTop: 5,
+                            textAlign: "center"
+                        }}
+                    >
+                        올리기
+                    </Text>
+                </UploadButton>
 
                 <Spacing size={42} />
-                <Textarea
-                    placeholder="원하는 질문지를 작성하세요."
-                    size={140}
-                />
+                <div style={{ paddingRight: 16 }}>
+                    <Textarea
+                        placeholder="원하는 질문지를 작성하세요."
+                        size={140}
+                    />
+                </div>
                 <Spacing size={60} />
 
                 <PlusWrapper>
-                    {AddQuestionDatas.map((data: any) => {
-                        return <Input type="add-question" />;
+                    {AddQuestionDatas.map((data: any, idx: number) => {
+                        return <Input idx={idx} type="add-question" />;
                     })}
                     <PlusButton />
                 </PlusWrapper>
@@ -77,7 +92,9 @@ const PlusWrapper = styled.div`
 const PlusButton = styled.div`
     width: 100%;
     height: 50px;
-    background-color: ${colors.Qwhite};
+
+    border-radius: 10px;
+    background-color: ${colors.light_qwhite};
 `;
 
 const BottomButton = styled.div<{ timer: boolean }>`
@@ -88,7 +105,7 @@ const BottomButton = styled.div<{ timer: boolean }>`
     left: 0;
     bottom: 0;
 
-    background-color: ${colors.Qblack};
+    background-color: ${colors.light_qblack};
 `;
 
 const BottomInner = styled.div<{ timer: boolean }>`
@@ -106,5 +123,18 @@ const BottomInner = styled.div<{ timer: boolean }>`
                   justify-content: space-between;
               `}
 
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
+`;
+
+const UploadButton = styled.div`
+    width: 65px;
+    height: 31px;
+
+    position: absolute;
+    top: 8px;
+    right: 16px;
+    align-items: center;
+
+    border-radius: 10px;
+    background-color: ${colors.light_qwhite};
 `;
diff --git a/src/app/alarm/page.tsx b/src/app/alarm/page.tsx
index 46433af..62121c4 100644
--- a/src/app/alarm/page.tsx
+++ b/src/app/alarm/page.tsx
@@ -9,9 +9,9 @@ const AlarmDatas = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
 export default function Page() {
     return (
         <AlarmWrapper>
-            <BackTitle />
+            <BackTitle type="default" text="알림 페이지" />
 
-            <Spacing size={36} />
+            <Spacing size={8} />
             {AlarmDatas.map((data: any, idx: number) => {
                 return <NewAlarm key={idx} />;
             })}
@@ -21,5 +21,5 @@ export default function Page() {
 
 const AlarmWrapper = styled.div`
     height: 100%;
-    padding: 0 16px;
+    // padding: 0 16px;
 `;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fffd63a..3e1f996 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,18 +8,26 @@ import Filter from "src/components/pages/home/Filter";
 import HomeTitle from "src/components/pages/home/HomeTitle";
 import QfeedFrame from "src/components/pages/home/QfeedFrame";
 import Spacing from "src/components/Spacing";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import { globalValue } from "src/constants/globalValue";
 import { Route } from "src/constants/Route";
+import StackGrid from "react-stack-grid";
+import useDisplaySize from "src/hooks/useDisplaySize";
 
-// export const metadata: Metadata = {
-//   title: "My Page Title",
-// };
-
-const HomeDatas = [{}, {}, {}];
+const HomeDatas = [
+    { title: "기말고사에 솔직히 족보 봤다", answer: 0 },
+    { title: "기말고사에 솔직히 족보 봤다고 생각하는 사람", answer: 0 },
+    { title: "기말고사에 솔", answer: 100 },
+    { title: "기말고사에 솔직히 족보 봤다", answer: 100 },
+    { title: "기말고사에 솔", answer: 10 },
+    { title: "기말고사에 솔직히 족보 봤다고 생각하는 사람", answer: 100 },
+    { title: "기말고사에 솔", answer: 10 }
+];
 
 export default function Page() {
     const router = useRouter();
+    const { width } = useDisplaySize();
+
     const handleClickPickMe = () => {
         router.push(Route.PICK_ME());
     };
@@ -47,13 +55,22 @@ export default function Page() {
                 <Filter />
                 <Spacing size={14} />
 
-                <FrameWrapper>
+                <StackGrid
+                    columnWidth={(width - 45) / 2}
+                    gutterWidth={12}
+                    gutterHeight={14}
+                >
                     {HomeDatas.map((data: any, idx: number) => {
                         return (
-                            <QfeedFrame key={idx} onClick={handleClickFrame} />
+                            <QfeedFrame
+                                key={idx}
+                                idx={idx}
+                                data={data}
+                                onClick={handleClickFrame}
+                            />
                         );
                     })}
-                </FrameWrapper>
+                </StackGrid>
 
                 <PlusButton onClick={handleClickPlus} />
                 <Spacing size={68} />
@@ -70,9 +87,10 @@ const HomeWrapper = styled.div`
 `;
 
 const FrameWrapper = styled.div`
+    box-sizing: border-box;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 14px 12px;
+    grid-template-columns: repeat(auto-fill, 170px);
+    grid-auto-rows: 1px;
 `;
 
 const PlusButton = styled.div`
@@ -84,6 +102,6 @@ const PlusButton = styled.div`
     bottom: 64px;
 
     border-radius: 50%;
-    background-color: ${colors.Qwhite};
+    background-color: ${colors.light_qwhite};
     z-index: 999;
 `;
diff --git a/src/app/question-friend/page.tsx b/src/app/question-friend/page.tsx
index c9f9996..1c46251 100644
--- a/src/app/question-friend/page.tsx
+++ b/src/app/question-friend/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useState } from "react";
 import Button from "src/components/Button";
 import Input from "src/components/Input";
 import Friend from "src/components/pages/question/Friend";
@@ -6,8 +7,7 @@ import Question from "src/components/pages/question/Question";
 import SlideLine from "src/components/SlideLine";
 import Spacing from "src/components/Spacing";
 import BackTitle from "src/components/Title/BackTitle";
-import { colors } from "src/constants/colors";
-import { globalValue } from "src/constants/globalValue";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 
 const QuestionDatas = [
@@ -30,12 +30,34 @@ const QuestionDatas = [
 ];
 
 export default function Page() {
+    const COUNT = 10;
+    const [currentIdx, setCurrentIdx] = useState<number>(0);
+    const [percentage, setPercentage] = useState([
+        (currentIdx / COUNT) * 100,
+        ((currentIdx + 1) / COUNT) * 100
+    ]);
+
+    const clickButton = () => {
+        let newPercentage = percentage;
+        const newCurrentIdx = currentIdx + 1;
+        newPercentage[0] = (newCurrentIdx / COUNT) * 100;
+        newPercentage[1] = ((newCurrentIdx + 1) / COUNT) * 100;
+        setCurrentIdx(newCurrentIdx);
+        setPercentage(newPercentage);
+    };
+
     return (
         <>
             <QuestionWrapper>
-                <BackTitle />
+                <BackTitle
+                    type="slide"
+                    currentIdx={currentIdx}
+                    setCurrentIdx={setCurrentIdx}
+                    count={COUNT}
+                    reportType="reportFriend"
+                />
 
-                <SlideLine />
+                <SlideLine percentage={percentage} />
                 <Spacing size={50} />
                 <Question />
                 <Spacing size={38} />
@@ -45,7 +67,7 @@ export default function Page() {
 
                 <FriendWrapper>
                     {QuestionDatas.map((data: any, idx: number) => {
-                        return <Friend key={idx} />;
+                        return <Friend key={idx} idx={idx} />;
                     })}
                 </FriendWrapper>
                 <Spacing size={111 + 20} />
@@ -54,7 +76,9 @@ export default function Page() {
             <BottomButton>
                 <BottomInner>
                     <Button type="secondary">넘기기</Button>
-                    <Button type="primary">보내기</Button>
+                    <Button type="primary" onClick={clickButton}>
+                        보내기
+                    </Button>
                 </BottomInner>
             </BottomButton>
         </>
@@ -80,7 +104,7 @@ const BottomButton = styled.div`
     left: 0;
     bottom: 0;
 
-    background-color: ${colors.Qblack};
+    background-color: ${colors.light_qblack};
 `;
 
 const BottomInner = styled.div`
diff --git a/src/app/question/page.tsx b/src/app/question/page.tsx
index 97c0409..3017162 100644
--- a/src/app/question/page.tsx
+++ b/src/app/question/page.tsx
@@ -6,18 +6,31 @@ import Question from "src/components/pages/question/Question";
 import SlideLine from "src/components/SlideLine";
 import Spacing from "src/components/Spacing";
 import BackTitle from "src/components/Title/BackTitle";
-import { colors } from "src/constants/colors";
+import { useState } from "react";
+import Image from "src/components/Image";
 
 export default function Page() {
+    const [selected, setSelected] = useState<number>(-1);
+    const [type, setType] = useState<string>("default");
+    // const imageUrl = "https://i.ibb.co/0Z6FNN7/60pt.png";
+    const imageUrl = null;
+
     return (
         <>
+            {imageUrl && (
+                <ImageWrapper>
+                    <Image type="background" src={imageUrl} />
+                </ImageWrapper>
+            )}
+
             <QuestionWrapper>
-                <BackTitle />
+                <BackTitle type="profile" reportType="report">
+                    <ProfileTitle />
+                </BackTitle>
 
-                <SlideLine />
+                {/* <SlideLine /> */}
                 <Spacing size={4} />
 
-                <ProfileTitle />
                 <Spacing size={50} />
 
                 <Question />
@@ -25,11 +38,29 @@ export default function Page() {
 
             <BottomButton>
                 <BottomInner>
-                    <VoteButton type="default" action={true}>
-                        text
-                    </VoteButton>
-                    <VoteButton type="default">text</VoteButton>
-                    <VoteButton type="primary">text</VoteButton>
+                    {["", "", ""].map((data: any, idx: number) => {
+                        return (
+                            <VoteButton
+                                key={idx}
+                                idx={idx}
+                                type={type}
+                                top={idx === 0}
+                                selected={selected}
+                                action={imageUrl}
+                                onClick={() => {
+                                    if (idx === selected) {
+                                        setSelected(-1); // default
+                                    } else {
+                                        setSelected(idx);
+                                    }
+                                }}
+                            >
+                                text
+                            </VoteButton>
+                            // default
+                            // primary, top
+                        );
+                    })}
                 </BottomInner>
                 <Spacing size={52} />
             </BottomButton>
@@ -37,15 +68,16 @@ export default function Page() {
     );
 }
 
-const QuestionWrapper = styled.div`
+const ImageWrapper = styled.div`
+    width: 100%;
     height: 100%;
-    padding: 0 16px;
+    position: absolute;
+    top: 0;
 `;
 
-const QuestionInner = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 14px 12px;
+const QuestionWrapper = styled.div`
+    height: 100%;
+    padding: 0 16px;
 `;
 
 const BottomButton = styled.div`
@@ -55,7 +87,7 @@ const BottomButton = styled.div`
     left: 0;
     bottom: 0;
 
-    background-color: ${colors.Qblack};
+    background-color: transparent;
 `;
 
 const BottomInner = styled.div`
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index 7ef033d..d9c4d21 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import { Route } from "src/constants/Route";
 import styled from "styled-components";
 
@@ -51,18 +51,19 @@ const BottomNavigationWrapper = styled.div`
 
     position: fixed;
     bottom: 0;
-    background-color: ${colors.Qblack};
+    background-color: ${colors.light_qblack};
+    z-index: 900;
 `;
 
 const BottomNavigationInner = styled.div`
     height: 100%;
     padding: 0 48px;
 
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
     display: flex;
     justify-content: space-between;
 
-    border-top: 1px solid ${colors.Qwhite};
+    border-top: 1px solid ${colors.light_qwhite};
 `;
 
 export default BottomNavigation;
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
index 43d3655..618312d 100644
--- a/src/components/BottomSheet/BottomSheet.tsx
+++ b/src/components/BottomSheet/BottomSheet.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { forwardRef } from "react";
-import { colors } from "src/constants/colors";
 import useBottomSheet from "src/hooks/useBottomSheet";
 import { useAppDispatch, useAppSelector } from "src/hooks/useReduxHooks";
 import {
@@ -8,23 +7,35 @@ import {
     changeVisible
 } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled, { css, keyframes } from "styled-components";
+import { colors, repeatBackgroundColor } from "styles/theme";
 import Coin from "./children/Coin";
 import Frined from "./children/Friend";
 import Report from "./children/Report";
+import ReportFriend from "./children/ReportFriend";
 
 interface Props {
     children?: any;
 }
 
-const COMPONENT_HEIGHT = { report: 540 + 30, coin: 324 + 30, friend: 325 + 60 };
-const COMPONENT = { report: <Report />, coin: <Coin />, friend: <Frined /> };
+const COMPONENT_HEIGHT = {
+    report: 540 + 30,
+    reportFriend: 331,
+    coin: 324 + 30,
+    friend: 325 + 60
+};
+const COMPONENT = {
+    report: <Report />,
+    reportFriend: <ReportFriend />,
+    coin: <Coin />,
+    friend: <Frined />
+};
 
 const BottomSheet = forwardRef(function Div(
     { children, ...props }: Props,
     ref
 ) {
     const dispatch = useAppDispatch();
-    const { type, visible, actionDelay } = useAppSelector(
+    const { type, visible, actionDelay, selectedIdx } = useAppSelector(
         (state) => state.bottomSheet
     );
     const BOTTOMSHEET_HEIGHT = COMPONENT_HEIGHT[type];
@@ -83,9 +94,13 @@ const BottomSheet = forwardRef(function Div(
                 actionDelay={actionDelay}
                 visible={visible}
                 height={BOTTOMSHEET_HEIGHT}
+                selectedIdx={selectedIdx}
+                backgroundColor={
+                    type === "coin" ? colors.light_gray3 : colors.light_gray0
+                }
             >
                 <HandleWrapper>
-                    <Handle />
+                    <Handle selectedIdx={selectedIdx} />
                 </HandleWrapper>
                 <ContentWrapper ref={content}>{COMPONENT[type]}</ContentWrapper>
             </BottomSheetWrapper>
@@ -130,7 +145,7 @@ const Background = styled.div<{
             : css`
                   opacity: ${visible};
               `}
-    background-color: ${colors.Qwhite};
+    background-color: ${colors.line_black_50};
     z-index: 998;
 `;
 
@@ -142,19 +157,22 @@ const HandleWrapper = styled.div`
     background-color: transparent;
 `;
 
-const Handle = styled.div`
-    width: 56px;
+const Handle = styled.div<{ selectedIdx: number }>`
+    width: 73px;
     height: 4px;
     margin: auto;
     display: flex;
 
-    background-color: ${colors.Qblack};
+    background-color: ${({ selectedIdx }) =>
+        selectedIdx ? colors.line_white_50 : colors.light_gray1};
 `;
 
 const BottomSheetWrapper = styled.div<{
     height: number;
     actionDelay: number;
     visible: number;
+    selectedIdx: number;
+    backgroundColor: any;
 }>`
     width: 100%;
     height: ${({ height }) => height + "px"};
@@ -166,7 +184,9 @@ const BottomSheetWrapper = styled.div<{
     bottom: ${({ height }) => -height + "px"}; // -height
 
     color: ${({ color }) => color};
-    background-color: ${colors.Gray3};
+    border-radius: 10px 10px 0 0;
+    background-color: ${({ selectedIdx, backgroundColor }) =>
+        selectedIdx ? repeatBackgroundColor[selectedIdx] : backgroundColor};
     z-index: 999;
 
     transition: transform 300ms ease-out;
diff --git a/src/components/BottomSheet/children/Coin.tsx b/src/components/BottomSheet/children/Coin.tsx
index 47ed791..a568fe3 100644
--- a/src/components/BottomSheet/children/Coin.tsx
+++ b/src/components/BottomSheet/children/Coin.tsx
@@ -1,5 +1,7 @@
 "use client";
+import { Text } from "src/components/common/Text";
 import styled from "styled-components";
+import { repeatCoinColor } from "styles/theme";
 
 interface Props {}
 
@@ -9,11 +11,22 @@ const Coin = ({}: Props) => {
     return (
         <CoinWrapper>
             <CoinTitle>
-                <Menu>코인 충전</Menu>
+                <Text typo="Headline1b" color="light_qwhite">
+                    코인 충전
+                </Text>
             </CoinTitle>
-            {CoinDatas.map((data: string, idx: number) => {
-                return <CoinSelection key={idx}>{data}</CoinSelection>;
-            })}
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+                {CoinDatas.map((data: string, idx: number) => {
+                    return (
+                        <CoinSelection
+                            key={idx}
+                            backgroundColor={repeatCoinColor[idx % 4]}
+                        >
+                            <Text typo="Subtitle2b">{data}</Text>
+                        </CoinSelection>
+                    );
+                })}
+            </div>
         </CoinWrapper>
     );
 };
@@ -24,19 +37,23 @@ const CoinWrapper = styled.div`
 
 const CoinTitle = styled.div`
     width: 100%;
-    height: 80px;
+    margin: 8px 0 16px 0;
+
     display: flex;
+    flex-direction: column;
+    align-items: center;
 `;
 
-const CoinSelection = styled.div`
-    width: 100%;
+const CoinSelection = styled.div<{ backgroundColor: any }>`
+    width: calc(100% - 32px);
     height: 52px;
-    display: flex;
-`;
+    padding: 0 16px;
 
-const Menu = styled.div`
-    margin: auto;
     display: flex;
+    align-items: center;
+
+    border-radius: 10px;
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 export default Coin;
diff --git a/src/components/BottomSheet/children/ReportFriend.tsx b/src/components/BottomSheet/children/ReportFriend.tsx
new file mode 100644
index 0000000..13ff987
--- /dev/null
+++ b/src/components/BottomSheet/children/ReportFriend.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { Text } from "src/components/common/Text";
+import Hr from "src/components/Hr";
+import Spacing from "src/components/Spacing";
+import styled from "styled-components";
+
+interface Props {}
+
+const ReportDatas = [
+    "이 질문은 보고싶지 않아요",
+    "불쾌한 질문이에요",
+    "이미 답변한 질문이에요",
+    "그냥 싫어요"
+];
+
+const ReportFriend = ({}: Props) => {
+    return (
+        <ReportWrapper>
+            <Spacing size={32} />
+            <MenuWrapper>
+                <Text typo="Subtitle2b" color="light_qblack">
+                    신고하기
+                </Text>
+            </MenuWrapper>
+            <Spacing size={32} />
+
+            <MenuWrapper>
+                {ReportDatas.map((data: string, idx: number) => {
+                    return (
+                        <div
+                            key={idx}
+                            style={{ width: "100%", textAlign: "center" }}
+                        >
+                            <Text
+                                key={idx}
+                                typo="Subtitle1r"
+                                color="light_qblack"
+                            >
+                                {data}
+                                <Spacing size={16} />
+                            </Text>
+                            {idx !== ReportDatas.length - 1 && <Hr />}
+                        </div>
+                    );
+                })}
+            </MenuWrapper>
+        </ReportWrapper>
+    );
+};
+
+const ReportWrapper = styled.div`
+    width: 100%;
+    align-items: center;
+`;
+
+const MenuWrapper = styled.div`
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+`;
+
+export default ReportFriend;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3963a09..9ddeeb8 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,30 +1,35 @@
 "use client";
 import { forwardRef } from "react";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 import { match } from "ts-pattern";
+import { Text } from "../common/Text";
 
 interface Props {
+    onClick?: () => void;
     type: "primary" | "secondary" | "default";
     children?: any;
 }
 
 const Button = forwardRef(function Button(
-    { children, type = "primary", ...props }: Props,
+    { children, onClick, type = "primary", ...props }: Props,
     ref
 ) {
     return (
         <ButtonWrapper
+            onClick={onClick}
             color={match(type)
-                .with("primary", () => colors.Qblack)
-                .with("secondary", () => colors.Qwhite)
+                .with("primary", () => colors.light_qblack)
+                .with("secondary", () => colors.light_qwhite)
                 .exhaustive()}
             backgroundColor={match(type)
-                .with("primary", () => colors.Qwhite)
-                .with("secondary", () => colors.Qblack)
+                .with("primary", () => colors.light_qwhite)
+                .with("secondary", () => colors.light_qblack)
                 .exhaustive()}
         >
-            <Text>{children}</Text>
+            <Text typo="Subtitle1b" style={{ margin: "auto" }}>
+                {children}
+            </Text>
         </ButtonWrapper>
     );
 });
@@ -38,13 +43,9 @@ const ButtonWrapper = styled.div<{
     display: flex;
 
     color: ${({ color }) => color};
-    border: 1px solid ${colors.Qwhite};
+    border: 1px solid ${colors.light_qwhite};
+    border-radius: 10px;
     background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
-const Text = styled.div`
-    margin: auto;
-    display: flex;
-`;
-
 export default Button;
diff --git a/src/components/Button/VoteButton.tsx b/src/components/Button/VoteButton.tsx
index 2c7a7af..9c5d928 100644
--- a/src/components/Button/VoteButton.tsx
+++ b/src/components/Button/VoteButton.tsx
@@ -1,39 +1,71 @@
 "use client";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { colors } from "src/constants/colors";
-import Hr from "src/components/Hr";
+import { colors, repeatQuestionColor } from "styles/theme";
 
 interface Props {
+    idx: number;
     type: "primary" | "default";
     action?: boolean;
     children?: any;
 }
 
 const VoteButton = forwardRef(function Button(
-    { children, type = "primary", action = false, ...props }: Props,
+    { children, onClick, idx, type = "primary", action = null, ...props }: any,
     ref
 ) {
     return (
-        <VoteButtonWrapper>
+        <VoteButtonWrapper
+            onClick={onClick}
+            color={
+                props.top && !(type === "default")
+                    ? action
+                        ? colors.light_qblack
+                        : colors.light_qwhite
+                    : idx === props.selected
+                    ? colors.light_qblack
+                    : action
+                    ? colors.light_qwhite
+                    : colors.light_qwhite
+            }
+            backgroundColor={
+                props.top && !(type === "default")
+                    ? action
+                        ? repeatQuestionColor[idx % 6]
+                        : colors.line_white_70
+                    : idx === props.selected
+                    ? action
+                        ? colors.line_white_70
+                        : repeatQuestionColor[idx % 6]
+                    : action
+                    ? colors.line_black_50
+                    : colors.light_gray2
+            }
+        >
             <VoteButtonInner>
                 <TextWrapper>{children}</TextWrapper>
-                {action && <CheckWrapper>svg</CheckWrapper>}
+                {/* {type === "secondary" && idx === props.selected && (
+                    <CheckWrapper>svg</CheckWrapper>
+                )} */}
+                {type !== "primary" && idx === props.selected && (
+                    <CheckWrapper>svg</CheckWrapper>
+                )}
                 {type === "primary" && <NumberWrapper>Hi</NumberWrapper>}
             </VoteButtonInner>
         </VoteButtonWrapper>
     );
 });
 
-const VoteButtonWrapper = styled.div`
+const VoteButtonWrapper = styled.div<{ color: any; backgroundColor: any }>`
     width: 100%;
-    height: 47px;
+    height: 50px;
 
     display: flex;
 
     position: relative;
-    color: ${colors.Qwhite};
-    background-color: ${colors.Gray3};
+    color: ${({ color }) => color};
+    border-radius: 10px;
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 const VoteButtonInner = styled.div`
@@ -66,7 +98,7 @@ const NumberWrapper = styled.div`
     right: 0;
     transform: translate(0, -50%);
 
-    border-left: 1px solid ${colors.Qwhite};
+    border-left: 1px solid ${colors.light_qwhite};
 `;
 
 export default VoteButton;
diff --git a/src/components/Hr/Hr.tsx b/src/components/Hr/Hr.tsx
index ff706c6..00b1194 100644
--- a/src/components/Hr/Hr.tsx
+++ b/src/components/Hr/Hr.tsx
@@ -1,18 +1,32 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled, { css } from "styled-components";
 import { match } from "ts-pattern";
 
 interface Props {
+    type?: string;
     horizonal?: boolean;
     size?: number;
 }
 
-const Hr = ({ horizonal = false, size = 1 }: Props) => {
-    return <HrWrapper horizonal={horizonal} size={size} />;
+const Hr = ({ horizonal = false, type = "default", size = 1 }: Props) => {
+    return (
+        <HrWrapper
+            horizonal={horizonal}
+            size={size}
+            backgroundColor={match(type)
+                .with("primary", () => colors.light_qwhite)
+                .with("default", () => colors.line_black_5)
+                .exhaustive()}
+        />
+    );
 };
 
-const HrWrapper = styled.hr<{ horizonal: boolean; size: number }>`
+const HrWrapper = styled.hr<{
+    horizonal: boolean;
+    size: number;
+    backgroundColor: any;
+}>`
     ${({ horizonal, size }) =>
         horizonal
             ? css`
@@ -26,7 +40,7 @@ const HrWrapper = styled.hr<{ horizonal: boolean; size: number }>`
     margin: 0;
     padding: 0;
     border: 0;
-    background-color: ${colors.Qwhite};
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 export default Hr;
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 5410b3d..c90a69e 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -6,27 +6,46 @@ interface Props {
     src: any;
     type: string;
     size?: number;
+    height?: number;
+    grayscale?: number;
 }
 
-const Image = ({ src, type = "profile", size }: Props) => {
+const Image = ({ src, type = "default", size, height, grayscale }: Props) => {
     return (
         <ImageWrapper
             src={src}
-            size={match(type)
-                .with("profile", () => 40)
-                .with("friend", () => 35)
+            width={match(type)
+                .with("background", () => "100%")
                 .with("default", () => size)
                 .exhaustive()}
+            height={match(type)
+                .with("background", () => (height ? height : "100%"))
+                .with("default", () => size)
+                .exhaustive()}
+            ratio={match(type)
+                .with("background", () => "auto")
+                .with("default", () => 1)
+                .exhaustive()}
+            radius={match(type)
+                .with("background", () => "0")
+                .with("default", () => "999px")
+                .exhaustive()}
+            style={{ filter: `grayscale(${grayscale}%)` }}
         />
     );
 };
 
-const ImageWrapper = styled.img<{ size: number }>`
-    width: ${({ size }) => size + "px"};
-    height: ${({ size }) => size + "px"};
+const ImageWrapper = styled.img<{
+    ratio: number;
+    radius: number;
+}>`
     margin: auto;
 
     border-radius: 50%;
+
+    aspect-ratio: ${({ ratio }) => ratio};
+    border-radius: ${({ radius }) => radius};
+    object-fit: cover;
 `;
 
 export default Image;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 3df8771..685363a 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,24 +1,53 @@
 "use client";
-import { colors } from "src/constants/colors";
-import styled from "styled-components";
+import { colors, repeatQuestionColor, typo } from "styles/theme";
+import styled,{css} from "styled-components";
 import { match } from "ts-pattern";
+import { Text } from "../common/Text";
 
 interface Props {
     type: "question-friend" | "add-question";
 }
 
-const Input = ({ type = "question-friend" }: Props) => {
+const Input = ({ type = "question-friend", ...props }: any) => {
     return (
         <InputWrapper
             radius={match(type)
                 .with("question-friend", () => 48)
-                .with("add-question", () => 0)
+                .with("add-question", () => 10)
+                .exhaustive()}
+            backgroundColor={match(type)
+                .with("question-friend", () => colors.light_gray3)
+                .with(
+                    "add-question",
+                    () => repeatQuestionColor[5 - (props.idx % 6)]
+                )
                 .exhaustive()}
         >
             <InputInner>
-                <InputBox placeholder="내 친구의 이름을 검색해보세요." />
-                <div style={{ display: "flex" }}>
-                    {type === "add-question" && <div>0/20</div>}
+                <InputBox
+                    placeholder="내 친구의 이름을 검색해보세요."
+                    color={match(type)
+                        .with("question-friend", () => colors.light_qwhite)
+                        .with("add-question", () => colors.light_qblack)
+                        .exhaustive()}
+                    placeholderColor={match(type)
+                        .with("question-friend", () => colors.light_gray2)
+                        .with("add-question", () => colors.light_qblack)
+                        .exhaustive()}
+                    backgroundColor={match(type)
+                        .with("question-friend", () => colors.light_gray3)
+                        .with(
+                            "add-question",
+                            () => repeatQuestionColor[5 - (props.idx % 6)]
+                        )
+                        .exhaustive()}
+                />
+                <div style={{ display: "flex", margin: "auto" }}>
+                    {type === "add-question" && (
+                        <Text typo="Caption2r" color="light_qblack">
+                            0/20
+                        </Text>
+                    )}
                     <div>Hi</div>
                 </div>
             </InputInner>
@@ -26,13 +55,13 @@ const Input = ({ type = "question-friend" }: Props) => {
     );
 };
 
-const InputWrapper = styled.div<{ radius: number }>`
+const InputWrapper = styled.div<{ radius: number; backgroundColor: any }>`
     width: 100%;
     height: 48px;
 
     display: flex;
     border-radius: ${({ radius }) => radius}px;
-    background-color: ${colors.Gray3};
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 const InputInner = styled.div`
@@ -44,19 +73,30 @@ const InputInner = styled.div`
     gap: 8px;
 `;
 
-const InputBox = styled.input`
+const InputBox = styled.input<{
+    color: any;
+    placeholderColor: any;
+    backgroundColor: any;
+}>`
     width: 100%;
     margin: 0;
     padding: 0;
 
     outline: 0;
     border: 0;
-    color: ${colors.Qwhite};
-    background-color: ${colors.Gray3};
+    color: ${({ color }) => color};
+    background-color: ${({ backgroundColor }) => backgroundColor};
 
     &::placeholder {
-        color: ${colors.Gray2};
+        color: ${({ placeholderColor }) => placeholderColor};
+        ${css`
+            ${typo.Subtitle1r}
+        `}
     }
+
+    ${css`
+        ${typo.Subtitle1b}
+    `}
 `;
 
 export default Input;
diff --git a/src/components/Report/Report.tsx b/src/components/Report/Report.tsx
index 7464a73..b12121f 100644
--- a/src/components/Report/Report.tsx
+++ b/src/components/Report/Report.tsx
@@ -4,22 +4,29 @@ import useBottomSheet from "src/hooks/useBottomSheet";
 import { useAppDispatch, useAppSelector } from "src/hooks/useReduxHooks";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled from "styled-components";
+import { Text } from "../common/Text";
 
 interface Props {}
 
-const Report = ({}: Props) => {
+const Report = ({ type = "report" }: any) => {
     const dispatch = useAppDispatch();
 
     const handleClickReport = () => {
         dispatch(
             changeVisibleType({
                 type: "bottomSheet",
-                value: [1, "report"]
+                value: [1, type === "report" ? "report" : "reportFriend"]
             })
         );
     };
 
-    return <ReportWrapper onClick={handleClickReport}>신고</ReportWrapper>;
+    return (
+        <ReportWrapper onClick={handleClickReport}>
+            <Text typo="Caption1b" color="primary_qred">
+                신고
+            </Text>
+        </ReportWrapper>
+    );
 };
 
 const ReportWrapper = styled.div``;
diff --git a/src/components/SlideLine/SlideLine.tsx b/src/components/SlideLine/SlideLine.tsx
index c3fd5b8..e6c82e8 100644
--- a/src/components/SlideLine/SlideLine.tsx
+++ b/src/components/SlideLine/SlideLine.tsx
@@ -1,9 +1,14 @@
 "use client";
-import { colors } from "src/constants/colors";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import { colors } from "styles/theme";
 
-export default function SlideLine() {
-    return <SlideLineWrapper></SlideLineWrapper>;
+export default function SlideLine({ percentage }: any) {
+    return (
+        <SlideLineWrapper>
+            <SlideLineBack />
+            <SlideLineBar percentage={percentage} />
+        </SlideLineWrapper>
+    );
 }
 
 const SlideLineWrapper = styled.div`
@@ -13,11 +18,33 @@ const SlideLineWrapper = styled.div`
     position: absolute;
     top: 50px;
     left: 0;
-    background-color: ${colors.Qwhite};
+    // background-color: ${colors.light_qwhite};
+    z-index: 800;
 `;
 
-const Menu = styled.div`
-    //   width: 40px;
-    margin: auto 0;
-    text-align: center;
+const move = (prePercentage: any, percentage: any) => keyframes`
+  from {
+    width: ${prePercentage}%;
+  }
+  to {
+    width: ${percentage}%;
+  }
+`;
+
+const SlideLineBack = styled.div`
+    width: 100%;
+    height: 4px;
+    position: absolute;
+    bottom: 1px;
+    background: ${colors.light_gray3};
+`;
+
+const SlideLineBar = styled.div<{ percentage: any }>`
+    height: 4px;
+    position: absolute;
+    bottom: 1px;
+    background: ${colors.light_qwhite};
+    z-index: 999;
+    animation: ${(props) => move(props.percentage[0], props.percentage[1])} 0.3s
+        forwards;
 `;
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index f1361ae..f861af7 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -1,6 +1,7 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
+import { Text } from "../common/Text";
 
 interface Props {
     placeholder: string;
@@ -11,32 +12,40 @@ const Textarea = ({ placeholder, size }: Props) => {
     return (
         <TextareaWrapper>
             <TextareaBox placeholder={placeholder} size={size} />
-            <TextareaCount>0/100</TextareaCount>
+            <TextareaCount>
+                <Text typo="Caption2r" color="light_gray2">
+                    0/100
+                </Text>
+            </TextareaCount>
         </TextareaWrapper>
     );
 };
 
 const TextareaWrapper = styled.div`
     width: 100%;
-    padding: 10px;
+    // padding: 10px;
     position: relative;
-    background-color: ${colors.Qwhite};
+
+    // background-color: ${colors.line_white_30};
 `;
 
 const TextareaBox = styled.textarea<{ size: number }>`
     width: 100%;
     height: ${({ size }) => size + "px"};
     margin: 0;
-    padding: 0;
+    padding: 10px;
     border: 0;
     outline: 0;
+    resize: none;
+
+    border-radius: 10px;
+    background-color: ${colors.line_white_30};
 `;
 
 const TextareaCount = styled.div`
     position: absolute;
-    right: 10px;
+    right: -10px;
     bottom: 10px;
-    background-color: ${colors.Qwhite};
 `;
 
 export default Textarea;
diff --git a/src/components/Title/BackTitle.tsx b/src/components/Title/BackTitle.tsx
index cf9d165..24b0a7b 100644
--- a/src/components/Title/BackTitle.tsx
+++ b/src/components/Title/BackTitle.tsx
@@ -1,12 +1,16 @@
 "use client";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { colors } from "src/constants/colors";
+import { forwardRef } from "react";
+import { colors } from "styles/theme";
 import styled from "styled-components";
+import { Text } from "../common/Text";
 import Report from "../Report";
 import Spacing from "../Spacing";
 
-export default function BackTitle() {
+const BackTitle = forwardRef(function Div(
+    { children, onClick, type = "default", ...props }: any,
+    ref
+) {
     const router = useRouter();
     const handleClickBack = () => {
         router.back();
@@ -17,16 +21,42 @@ export default function BackTitle() {
             <Spacing size={50} />
             <BackTitleWrapper>
                 <BackTitleInner>
-                    <Menu onClick={handleClickBack}>&lt;--</Menu>
-                    <Menu>7/10</Menu>
-                    <Menu>
-                        <Report />
+                    <Menu onClick={handleClickBack} style={{ display: "flex" }}>
+                        <div style={{ margin: "auto", marginRight: 16 }}>
+                            &lt;--
+                        </div>
+                        <Text typo="Headline1b" color="light_qwhite">
+                            {props.text}
+                        </Text>
                     </Menu>
+                    {type !== "default" ? (
+                        <>
+                            {type === "slide" ? (
+                                <Menu>
+                                    <Text
+                                        typo="Subtitle2b"
+                                        color="light_qwhite"
+                                    >
+                                        {props.currentIdx + 1}/{props.count}
+                                    </Text>
+                                </Menu>
+                            ) : (
+                                <div
+                                    style={{ width: "100%", margin: "0 16px" }}
+                                >
+                                    {children}
+                                </div>
+                            )}
+                            <Menu>
+                                <Report type={props.reportType} />
+                            </Menu>
+                        </>
+                    ) : null}
                 </BackTitleInner>
             </BackTitleWrapper>
         </>
     );
-}
+});
 
 const BackTitleWrapper = styled.div`
     width: 100%;
@@ -36,7 +66,7 @@ const BackTitleWrapper = styled.div`
     top: 0;
     left: 0;
 
-    background-color: ${colors.Qblack};
+    background-color: transparent;
 `;
 
 const BackTitleInner = styled.div`
@@ -46,11 +76,14 @@ const BackTitleInner = styled.div`
 
     display: flex;
     justify-content: space-between;
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
 `;
 
 const Menu = styled.div`
     //   width: 40px;
+    min-width: 24px;
     margin: auto 0;
     text-align: center;
 `;
+
+export default BackTitle;
diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx
index 62e9006..ec45ffe 100644
--- a/src/components/common/Text.tsx
+++ b/src/components/common/Text.tsx
@@ -1,11 +1,11 @@
 import styled from "styled-components";
 import { KeyOfTypo, KeyOfColor, theme } from "styles/theme";
 
-const Text = styled.div<{
-    typo: KeyOfTypo;
+export const Text = styled.div<{
+    typo?: KeyOfTypo;
     color?: KeyOfColor;
 }>`
-    ${({ typo }) => theme.typo[typo]};
+    ${({ typo }) => typo && theme.typo[typo]};
     color: ${({ color }) => color && theme.colors[color]};
 `;
 
diff --git a/src/components/pages/alarm/NewAlarm.tsx b/src/components/pages/alarm/NewAlarm.tsx
index 9cc40b8..d9a2c91 100644
--- a/src/components/pages/alarm/NewAlarm.tsx
+++ b/src/components/pages/alarm/NewAlarm.tsx
@@ -1,44 +1,49 @@
+import { Text } from "src/components/common/Text";
 import Image from "src/components/Image";
 import Spacing from "src/components/Spacing";
-import { colors } from "src/constants/colors";
-import styled from "styled-components";
+import styled,{css} from "styled-components";
+import { colors } from "styles/theme";
 
 export default function NewAlarm() {
     return (
         <>
-            <NewAlarmWrapper>
-                <Menu>
+            <NewAlarmWrapper action={false}>
+                <div style={{ marginRight: 12 }}>
                     <Image
+                        type="default"
+                        size={40}
                         src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                        type="profile"
                     />
-                </Menu>
+                </div>
                 <Menu>
-                    <Title>나를 선택한 AXE</Title>
-                    <Description>
+                    <Text typo="Subtitle1b" color="light_qwhite">
+                        나를 선택한 AXE
+                    </Text>
+                    <Text typo="Subtitle1r" color="light_qwhite">
                         애인에게 가장 잘 해줄 것 같은 사람은? : AXE에 3명이 날
                         선택했어요.
-                    </Description>
-                    <Time>05/04 11:42</Time>
+                    </Text>
+                    <Text typo="Caption2r" color="light_gray2">
+                        05/04 11:42
+                    </Text>
                 </Menu>
             </NewAlarmWrapper>
-            <Spacing size={20} />
         </>
     );
 }
 
-const NewAlarmWrapper = styled.div`
+const NewAlarmWrapper = styled.div<{ action: boolean }>`
+    padding: 8px 16px;
     display: flex;
+    ${({ action }) =>
+        action &&
+        css`
+            background-color: ${colors.light_gray3};
+        `}
 `;
 
-const Menu = styled.div``;
-
-const Title = styled.div`
-    color: ${colors.Qwhite};
-`;
-const Description = styled.div`
-    color: ${colors.Qwhite};
-`;
-const Time = styled.div`
-    color: ${colors.Qwhite};
+const Menu = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 `;
diff --git a/src/components/pages/home/BasicQuestion.tsx b/src/components/pages/home/BasicQuestion.tsx
index 761995b..0f57ea1 100644
--- a/src/components/pages/home/BasicQuestion.tsx
+++ b/src/components/pages/home/BasicQuestion.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Spacing from "src/components/Spacing";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
@@ -16,8 +16,8 @@ const BasicQuestion = ({ type = "pick-me", ...props }: Props) => {
             <BasicQuestionWrapper
                 onClick={props.onClick}
                 color={match(type)
-                    .with("pick-me", () => colors.Qwhite)
-                    .with("question", () => colors.Qred)
+                    .with("pick-me", () => colors.light_qwhite)
+                    .with("question", () => colors.primary_qred)
                     .exhaustive()}
             >
                 <BasicQuestionInner>
diff --git a/src/components/pages/home/Filter.tsx b/src/components/pages/home/Filter.tsx
index a29498e..25a847d 100644
--- a/src/components/pages/home/Filter.tsx
+++ b/src/components/pages/home/Filter.tsx
@@ -1,6 +1,7 @@
 "use client";
+import { Text } from "src/components/common/Text";
 import Hr from "src/components/Hr";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
@@ -9,12 +10,17 @@ interface Props {}
 const Filter = ({}: Props) => {
     return (
         <FilterWrapper>
-            <Menu>최신순</Menu>
+            <Text typo="Subtitle2r" color="light_qwhite">
+                최신순
+            </Text>
+
             <Menu style={{ padding: "5px 0" }}>
-                <Hr horizonal={true} />
+                <Hr horizonal={true} type="primary" />
             </Menu>
 
-            <Menu>인기순</Menu>
+            <Text typo="Subtitle2r" color="light_qwhite">
+                인기순
+            </Text>
         </FilterWrapper>
     );
 };
@@ -28,7 +34,7 @@ const FilterWrapper = styled.div`
 `;
 
 const Menu = styled.div`
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
 `;
 
 export default Filter;
diff --git a/src/components/pages/home/HomeTitle.tsx b/src/components/pages/home/HomeTitle.tsx
index 4286186..2e7cb33 100644
--- a/src/components/pages/home/HomeTitle.tsx
+++ b/src/components/pages/home/HomeTitle.tsx
@@ -1,71 +1,75 @@
 "use client";
 import { useRouter } from "next/navigation";
 import Image from "src/components/Image";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import { Route } from "src/constants/Route";
 import { useAppDispatch } from "src/hooks/useReduxHooks";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled from "styled-components";
 
 const HomeTitle = ({}: {}) => {
-  const router = useRouter();
-  const dispatch = useAppDispatch();
-  const handleClickAlarm = () => {
-    router.push(Route.ALARM());
-  };
+    const router = useRouter();
+    const dispatch = useAppDispatch();
+    const handleClickAlarm = () => {
+        router.push(Route.ALARM());
+    };
 
-  const handleClickCoin = () => {
-    dispatch(
-      changeVisibleType({
-        type: "bottomSheet",
-        value: [1, "coin"],
-      })
-    );
-  };
+    const handleClickCoin = () => {
+        dispatch(
+            changeVisibleType({
+                type: "bottomSheet",
+                value: [1, "coin"]
+            })
+        );
+    };
 
-  return (
-    <HomeTitleWrapper>
-      <Menu>
-        <ImageWrapper>
-          <Image type="profile" src="https://i.ibb.co/0Z6FNN7/60pt.png" />
-        </ImageWrapper>
-      </Menu>
-      <div style={{ display: "flex", gap: "24px" }}>
-        <Menu onClick={handleClickCoin}>
-          <div>코인충전</div>
-        </Menu>
-        <Menu>
-          <div>질문추천</div>
-        </Menu>
-        <Menu onClick={handleClickAlarm}>
-          <div>svg</div>
-        </Menu>
-      </div>
-    </HomeTitleWrapper>
-  );
+    return (
+        <HomeTitleWrapper>
+            <Menu>
+                <ImageWrapper>
+                    <Image
+                        type="default"
+                        size={40}
+                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
+                    />
+                </ImageWrapper>
+            </Menu>
+            <div style={{ display: "flex", gap: "24px" }}>
+                <Menu onClick={handleClickCoin}>
+                    <div>코인충전</div>
+                </Menu>
+                <Menu>
+                    <div>질문추천</div>
+                </Menu>
+                <Menu onClick={handleClickAlarm}>
+                    <div>svg</div>
+                </Menu>
+            </div>
+        </HomeTitleWrapper>
+    );
 };
 
 const HomeTitleWrapper = styled.div`
-  width: 100%;
-  height: 50px;
+    width: 100%;
+    height: 50px;
 
-  display: flex;
-  justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 `;
 
 const Menu = styled.div`
-  margin: auto 0;
-  display: flex;
-  color: ${colors.Qwhite};
+    margin: auto 0;
+    display: flex;
+    color: ${colors.light_qwhite};
 `;
 
 const ImageWrapper = styled.div`
-  width: 46px;
-  height: 46px;
-  display: flex;
+    width: 46px;
+    height: 46px;
+    display: flex;
 
-  border-radius: 50%;
-  background-color: ${colors.Qwhite};
+    border-radius: 50%;
+    background-color: ${colors.light_qwhite};
 `;
 
 export default HomeTitle;
diff --git a/src/components/pages/home/QfeedFrame.tsx b/src/components/pages/home/QfeedFrame.tsx
index c6eefc9..2889179 100644
--- a/src/components/pages/home/QfeedFrame.tsx
+++ b/src/components/pages/home/QfeedFrame.tsx
@@ -1,34 +1,122 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { Text } from "src/components/common/Text";
+import Image from "src/components/Image";
+import Spacing from "src/components/Spacing";
 import useDisplaySize from "src/hooks/useDisplaySize";
 import styled from "styled-components";
-import { match } from "ts-pattern";
+import { colors, repeatBackgroundColor, typo } from "styles/theme";
 
 interface Props {
+    idx: number;
+    data: any;
     onClick: () => void;
 }
 
-const QfeedFrame = ({ onClick }: Props) => {
+const QfeedFrame = ({ idx, data, onClick }: Props) => {
     const { width } = useDisplaySize();
+    const imageUrl = "https://i.ibb.co/0Z6FNN7/60pt.png";
+    // const imageUrl = null;
+
     return (
-        <QfeedFrameWrapper onClick={onClick} width={(width - 16 * 2 - 12) / 2}>
-            Hi
+        <QfeedFrameWrapper
+            onClick={onClick}
+            repeatBackgroundColor={repeatBackgroundColor[idx]}
+        >
+            <div style={{ padding: 3, overflow: "hidden" }}>
+                {/* <ImageWrapper>
+                    <Image
+                        type="home"
+                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
+                        // height={"100%"}
+                    />
+                </ImageWrapper> */}
+                <QfeedFrameInner
+                    imageUrl={imageUrl}
+                    backgroundColor={repeatBackgroundColor[idx]}
+                >
+                    <Text
+                        typo="Headline2b"
+                        color={imageUrl ? "light_qwhite" : "light_qblack"}
+                    >
+                        {data.title}
+                    </Text>
+                    <Spacing size={4} />
+                    <Text
+                        typo="Caption1r"
+                        color={imageUrl ? "light_qwhite" : "light_qblack"}
+                    >
+                        {data.title}
+                    </Text>
+                    <Spacing size={27} />
+                    <CountWrapper>
+                        <div style={{ margin: "auto 0" }}>
+                            <Text
+                                typo="Subtitle1b"
+                                color={
+                                    imageUrl ? "light_qwhite" : "light_qblack"
+                                }
+                            >
+                                {data.answer}명 응답
+                            </Text>
+                        </div>
+                    </CountWrapper>
+                </QfeedFrameInner>
+            </div>
         </QfeedFrameWrapper>
     );
 };
 
-const QfeedFrameWrapper = styled.div<{ width: number }>`
-    width: ${({ width }) => width + "px"};
-    height: 20px;
+const QfeedFrameWrapper = styled.div<{ repeatBackgroundColor: any }>`
+    height: calc(100% + 20px);
+    // position: relative;
+    border-radius: 10px;
+    background-color: ${({ repeatBackgroundColor }) => repeatBackgroundColor};
+`;
+
+const QfeedFrameInner = styled.div<{ imageUrl: any; backgroundColor: any }>`
+    padding: 28px 20px;
+    overflow: hidden;
 
-    display: flex;
-    gap: 12px;
     border-radius: 10px;
-    background-color: yellowgreen;
+    color: ${({ imageUrl }) =>
+        imageUrl ? colors.light_qwhite : colors.light_qblack};
+    background-color: ${({ imageUrl }) =>
+        imageUrl ? colors.light_qblack : null};
+
+    &::before {
+        content: "";
+        border-radius: 10px;
+        background-color: ${({ imageUrl, backgroundColor }) =>
+            imageUrl ? null : backgroundColor};
+        background-image: url(${({ imageUrl }) => imageUrl});
+        background-size: cover;
+        background-position: center;
+        opacity: 0.5;
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        right: 3px;
+        bottom: 3px;
+    }
+
+    div {
+        position: relative;
+    }
 `;
 
-const Menu = styled.div`
-    color: ${colors.Qwhite};
+const CountWrapper = styled.div`
+    height: 36px;
+    display: flex;
+`;
+
+const Background = styled.div`
+    width: 100%;
+    height: 100%;
+    margin-right: 6px;
+
+    opacity: 0.5;
+    position: absolute;
+    background-color: ${colors.light_qwhite};
 `;
 
 export default QfeedFrame;
diff --git a/src/components/pages/question/Friend.tsx b/src/components/pages/question/Friend.tsx
index 13afb2e..e3ce6e2 100644
--- a/src/components/pages/question/Friend.tsx
+++ b/src/components/pages/question/Friend.tsx
@@ -1,63 +1,82 @@
 "use client";
+import { useState } from "react";
+import { Text } from "src/components/common/Text";
 import Image from "src/components/Image";
 import Spacing from "src/components/Spacing";
-import { colors } from "src/constants/colors";
 import useDisplaySize from "src/hooks/useDisplaySize";
-import { useAppDispatch } from "src/hooks/useReduxHooks";
+import { useAppDispatch, useAppSelector } from "src/hooks/useReduxHooks";
 import { changeVisibleType } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import styled from "styled-components";
+import { colors, repeatBackgroundColor } from "styles/theme";
 
-export default function Friend() {
-  const { width } = useDisplaySize();
-  const dispatch = useAppDispatch();
+export default function Friend({ idx }: any) {
+    const { width } = useDisplaySize();
+    const dispatch = useAppDispatch();
+    const { visible, selectedIdx } = useAppSelector(
+        (state) => state.bottomSheet
+    );
+
+    const handleClickFriend = () => {
+        dispatch(
+            changeVisibleType({
+                type: "bottomSheet",
+                value: [1, "friend", idx]
+            })
+        );
+    };
+
+    return (
+        <FriendWrapper
+            width={(width - 16 * 2 - 12 * 3) / 4}
+            onClick={handleClickFriend}
+            backgroundColor={
+                selectedIdx && idx !== selectedIdx && visible === 1
+                    ? colors.light_gray2
+                    : repeatBackgroundColor[idx % 12]
+            }
+        >
+            <FriendInner>
+                <Menu>
+                    <Image
+                        type="default"
+                        size={35}
+                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
+                        grayscale={
+                            selectedIdx && idx !== selectedIdx && visible === 1
+                                ? 100
+                                : 0
+                        }
+                    />
+                </Menu>
+                <Spacing size={8} />
 
-  const handleClickFriend = () => {
-    dispatch(
-      changeVisibleType({
-        type: "bottomSheet",
-        value: [1, "friend"],
-      })
+                <Menu>
+                    <Text typo="Caption1b" color="light_qblack">
+                        김은별
+                    </Text>
+                </Menu>
+                <Menu>
+                    <Text typo="Caption2r" color="light_qblack">
+                        dlraud1
+                    </Text>
+                </Menu>
+            </FriendInner>
+        </FriendWrapper>
     );
-  };
-
-  return (
-    <FriendWrapper
-      width={(width - 16 * 2 - 12 * 3) / 4}
-      onClick={handleClickFriend}
-    >
-      <FriendInner>
-        <Menu>
-          <Image src="https://i.ibb.co/0Z6FNN7/60pt.png" type="friend" />
-        </Menu>
-        <Spacing size={8} />
-
-        <Menu>
-          <Name>김은별</Name>
-        </Menu>
-        <Menu>
-          <QfeedId>dlraud1</QfeedId>
-        </Menu>
-      </FriendInner>
-    </FriendWrapper>
-  );
 }
 
-const FriendWrapper = styled.div<{ width: number }>`
-  width: ${({ width }) => width + "px"};
-  //   height: ${({ width }) => (width * 92) / 73 + "px"};
+const FriendWrapper = styled.div<{ width: number; backgroundColor: any }>`
+    width: ${({ width }) => width + "px"};
+    //   height: ${({ width }) => (width * 92) / 73 + "px"};
 
-  border-radius: 10px;
-  background-color: ${colors.Qorange};
+    border-radius: 10px;
+    background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
 const FriendInner = styled.div`
-  padding: 8px 20px;
+    padding: 8px 20px;
 `;
 
 const Menu = styled.div`
-  text-align: center;
+    text-align: center;
 `;
-
-const Name = styled.div``;
-
-const QfeedId = styled.div``;
diff --git a/src/components/pages/question/ProfileTitle.tsx b/src/components/pages/question/ProfileTitle.tsx
index 4013a85..71cc157 100644
--- a/src/components/pages/question/ProfileTitle.tsx
+++ b/src/components/pages/question/ProfileTitle.tsx
@@ -1,7 +1,8 @@
 "use client";
 import { useRouter } from "next/navigation";
+import { Text } from "src/components/common/Text";
 import Image from "src/components/Image";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 
 export default function ProfileTitle() {
@@ -10,14 +11,15 @@ export default function ProfileTitle() {
     return (
         <ProfileTitleWrapper>
             <ProfileTitleInner>
-                <div style={{ display: "flex" }}>
-                    <Menu>
-                        <Image
-                            src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                            type="friend"
-                        />
-                    </Menu>
-                    <Menu>dlraud56</Menu>
+                <div style={{ display: "flex", alignItems: "center" }}>
+                    <Image
+                        type="default"
+                        size={35}
+                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
+                    />
+                    <Text typo="Subtitle1b" style={{ marginLeft: 8 }}>
+                        dlraud56
+                    </Text>
                 </div>
                 <Menu>12명 응답</Menu>
             </ProfileTitleInner>
@@ -29,7 +31,7 @@ const ProfileTitleWrapper = styled.div`
     width: 100%;
     height: 50px;
 
-    background-color: ${colors.Qblack};
+    background-color: transparent;
 `;
 
 const ProfileTitleInner = styled.div`
@@ -38,7 +40,7 @@ const ProfileTitleInner = styled.div`
 
     display: flex;
     justify-content: space-between;
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
 `;
 
 const Menu = styled.div`
diff --git a/src/components/pages/question/Question.tsx b/src/components/pages/question/Question.tsx
index c19fc1f..b9fb948 100644
--- a/src/components/pages/question/Question.tsx
+++ b/src/components/pages/question/Question.tsx
@@ -1,17 +1,20 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { Text } from "src/components/common/Text";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 
 export default function Question() {
     return (
         <QuestionWrapper>
-            애인에게 가장
-            <br />잘 해줄 것 같은 사람은?
+            <Text typo="Headline1b" color="light_qwhite">
+                애인에게 가장
+                <br />잘 해줄 것 같은 사람은?
+            </Text>
         </QuestionWrapper>
     );
 }
 
 const QuestionWrapper = styled.div`
-    color: ${colors.Qwhite};
+    color: ${colors.light_qwhite};
     text-align: center;
 `;
diff --git a/src/components/pages/question/SlideLine.tsx b/src/components/pages/question/SlideLine.tsx
index c3fd5b8..ea6babb 100644
--- a/src/components/pages/question/SlideLine.tsx
+++ b/src/components/pages/question/SlideLine.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 
 export default function SlideLine() {
@@ -13,7 +13,7 @@ const SlideLineWrapper = styled.div`
     position: absolute;
     top: 50px;
     left: 0;
-    background-color: ${colors.Qwhite};
+    background-color: ${colors.light_qwhite};
 `;
 
 const Menu = styled.div`
diff --git a/src/components/pages/question/Timer.tsx b/src/components/pages/question/Timer.tsx
index d76ea1f..53963c9 100644
--- a/src/components/pages/question/Timer.tsx
+++ b/src/components/pages/question/Timer.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { colors } from "src/constants/colors";
+import { colors } from "styles/theme";
 import styled from "styled-components";
 
 export default function Timer() {
@@ -11,7 +11,7 @@ const TimerWrapper = styled.div`
     height: 90px;
     margin: auto;
 
-    background-color: ${colors.Qwhite};
+    background-color: ${colors.light_qwhite};
 `;
 
 const Menu = styled.div`
diff --git a/src/constants/Route.ts b/src/constants/Route.ts
index d88e7a2..66542e1 100644
--- a/src/constants/Route.ts
+++ b/src/constants/Route.ts
@@ -1,11 +1,13 @@
 export const Route = {
+    HOME: () => "/",
+    QUESTION: () => "/question",
+    QUESTION_FRIEND: () => "/question-friend",
+
     ADD_QUESTION: () => "/add-question",
     ALARM: () => "/alarm",
     CHAT: () => "/chat",
     CHECK: () => "/check",
     FRIEND: () => "/friend",
     MYPAGE: () => "/mypage",
-    PICK_ME: () => "/pick-me",
-    QUESTION: () => "/question",
-    QUESTION_FRIEND: () => "/question-friend"
+    PICK_ME: () => "/pick-me"
 };
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
deleted file mode 100644
index 8df5b31..0000000
--- a/src/constants/colors.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const colors = {
-  Qpink: "#FE98CA",
-  Qred: "#FF5B5B",
-  Qorange: "#FF812F",
-  Qyellow: "#EEF619",
-  Qgreen: "#28D3A7",
-  Qblue: "#0167F7",
-
-  Qwhite: "#FFFFFF",
-  Qblack: "#131313",
-
-  Gray2: "##757575",
-  Gray3: "#484848",
-};
diff --git a/src/reducer/slices/bottomSheet/bottomSheetSlice.ts b/src/reducer/slices/bottomSheet/bottomSheetSlice.ts
index 192094b..f4a7afe 100644
--- a/src/reducer/slices/bottomSheet/bottomSheetSlice.ts
+++ b/src/reducer/slices/bottomSheet/bottomSheetSlice.ts
@@ -1,54 +1,57 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 interface GlobalType {
-  type: string;
-  visible: number;
-  actionDelay: boolean;
-  [index: string]: string | string[] | any;
+    type: string;
+    visible: number;
+    actionDelay: boolean;
+    selectedIdx: number;
+    [index: string]: string | string[] | any;
 }
 
 const initialState: GlobalType = {
-  type: "primary",
-  visible: 0,
-  actionDelay: false,
+    type: "primary",
+    visible: 0,
+    actionDelay: false,
+    selectedIdx: 0
 };
 
 export const bottomSheetSlice = createSlice({
-  name: "bottomSheet",
-  initialState,
-  reducers: {
-    initializeDefaultInfo: () => initialState,
-    changeVisible: (
-      state,
-      { payload }: { payload: { type: string; value: number } }
-    ) => {
-      const { value } = payload;
-      state.visible = value;
-    },
-    changeAction: (
-      state,
-      { payload }: { payload: { type: string; value: boolean } }
-    ) => {
-      const { value } = payload;
-      state.actionDelay = value;
-    },
-    changeVisibleType: (
-      state,
-      { payload }: { payload: { type: string; value: any } }
-    ) => {
-      const { value } = payload;
-      if (value[0]) state.actionDelay = value[0];
-      state.visible = value[0];
-      state.type = value[1];
-    },
-  },
+    name: "bottomSheet",
+    initialState,
+    reducers: {
+        initializeDefaultInfo: () => initialState,
+        changeVisible: (
+            state,
+            { payload }: { payload: { type: string; value: number } }
+        ) => {
+            const { value } = payload;
+            state.visible = value;
+        },
+        changeAction: (
+            state,
+            { payload }: { payload: { type: string; value: boolean } }
+        ) => {
+            const { value } = payload;
+            state.actionDelay = value;
+        },
+        changeVisibleType: (
+            state,
+            { payload }: { payload: { type: string; value: any } }
+        ) => {
+            const { value } = payload;
+            if (value[0]) state.actionDelay = value[0];
+            state.visible = value[0];
+            state.type = value[1];
+            state.selectedIdx = value[2];
+        }
+    }
 });
 
 export const {
-  initializeDefaultInfo,
-  changeVisible,
-  changeAction,
-  changeVisibleType,
+    initializeDefaultInfo,
+    changeVisible,
+    changeAction,
+    changeVisibleType
 } = bottomSheetSlice.actions;
 
 export default bottomSheetSlice.reducer;
diff --git a/styles/theme/colors.tsx b/styles/theme/colors.tsx
index 6657868..d3c9aa4 100644
--- a/styles/theme/colors.tsx
+++ b/styles/theme/colors.tsx
@@ -1,32 +1,64 @@
 const hexToRGBA = (color: string, opacity: number) => {
-  const r = parseInt(color.slice(1, 3), 16);
-  const g = parseInt(color.slice(3, 5), 16);
-  const b = parseInt(color.slice(5, 7), 16);
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
 
-  return `rgba(${r}, ${g}, ${b}, ${opacity * 0.01})`;
+    return `rgba(${r}, ${g}, ${b}, ${opacity * 0.01})`;
 };
 
 export const colors = {
-  primary_qyellow: '#EEF619',
-  primary_qpink: '#FE98CA',
-  primary_qorange: '#FF812F',
-  primary_qred: '#FF5B5B',
-  primary_qblue: '#0167F7',
-  primary_qgreen: '#28D3A7',
+    primary_qyellow: "#EEF619",
+    primary_qpink: "#FE98CA",
+    primary_qorange: "#FF812F",
+    primary_qred: "#FF5B5B",
+    primary_qblue: "#0167F7",
+    primary_qgreen: "#28D3A7",
 
-  light_qblack: '#131313',
-  light_qwhite: '#FFFFFF',
-  light_gray0: '#D9D9D9',
-  light_gray1: '#BDBDBD',
-  light_gray2: '#757575',
-  light_gray3: '#484848',
+    light_qblack: "#131313",
+    light_qwhite: "#FFFFFF",
+    light_gray0: "#D9D9D9",
+    light_gray1: "#BDBDBD",
+    light_gray2: "#757575",
+    light_gray3: "#484848",
 
-  line_black_70: hexToRGBA('#131313', 70),
-  line_black_50: hexToRGBA('#131313', 50),
-  line_black_30: hexToRGBA('#131313', 30),
-  line_black_5: hexToRGBA('#131313', 5),
-  line_white_70: hexToRGBA('#FFFFFF', 70),
-  line_white_50: hexToRGBA('#FFFFFF', 50),
-  line_white_30: hexToRGBA('#FFFFFF', 30),
-  line_white_5: hexToRGBA('#FFFFFF', 5),
+    line_black_70: hexToRGBA("#131313", 70),
+    line_black_50: hexToRGBA("#131313", 50),
+    line_black_30: hexToRGBA("#131313", 30),
+    line_black_5: hexToRGBA("#131313", 5),
+    line_white_70: hexToRGBA("#FFFFFF", 70),
+    line_white_50: hexToRGBA("#FFFFFF", 50),
+    line_white_30: hexToRGBA("#FFFFFF", 30),
+    line_white_5: hexToRGBA("#FFFFFF", 5)
 };
+
+// 12 개
+export const repeatBackgroundColor = [
+    colors.primary_qpink,
+    colors.primary_qorange,
+    colors.primary_qblue,
+    colors.primary_qyellow,
+    colors.primary_qyellow,
+    colors.primary_qgreen,
+    colors.primary_qpink,
+    colors.primary_qred,
+    colors.primary_qorange,
+    colors.primary_qblue,
+    colors.primary_qred,
+    colors.primary_qgreen
+];
+
+export const repeatQuestionColor = [
+    colors.primary_qyellow,
+    colors.primary_qpink,
+    colors.primary_qblue,
+    colors.primary_qorange,
+    colors.primary_qred,
+    colors.primary_qgreen
+];
+
+export const repeatCoinColor = [
+    colors.primary_qblue,
+    colors.primary_qgreen,
+    colors.primary_qorange,
+    colors.primary_qpink
+];