diff --git a/src/components/ColorPage.jsx b/src/components/ColorPage.jsx
index bcabeb9..823bade 100644
--- a/src/components/ColorPage.jsx
+++ b/src/components/ColorPage.jsx
@@ -1,11 +1,23 @@
 import { useParams } from 'react-router-dom';
 import '../styles/ColorPage.css';
 
+<Route path="/mainpage/:id" element={<mainpage />} />
 function ColorPage() {
 
   return (
-    <div className="color-page">
-    배경 페이지입니다 
+    <div
+     className="color-page"
+     style={{
+        backgroundColor: id,
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'white',
+        fontSize: '2rem',
+     }}
+     >
+    배경 페이지입니다 : {id}
     </div>
   );
 }
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 540d1b2..9630397 100644
--- a/src/components/MainPage.jsx
+++ b/src/components/MainPage.jsx
@@ -1,14 +1,35 @@
 import { useNavigate } from 'react-router-dom';
 import '../styles/MainPage.css';
 
-const Mainpage = () => {
- 
+const colors = ["red", "blue", "pink", "orange", "yellow"];
+
+const MainPage = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="container">
       <h2>React 색상 선택</h2>
       <hr />
+      {colors.map((color) => (
+        <button>
+           key={color}
+           onClick={() => navigate(`/color/${color}`)}
+           styled={{
+            backgroundColor: color,
+            color: color === "yellow" ? "black" : "white",
+            margin: "5px",
+            padding: "10px",
+            border: "none",
+            borderRadius: "5px",
+            cursor: "pointer"
+           }}
+           
+          {color}
+        </button>
+      ))}
+      
     </div>
   );
 };
 
-export default Mainpage;
+export default MainPage;