diff --git a/package-lock.json b/package-lock.json
index a87d0a0..f23eadb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",
         "globals": "^15.9.0",
-        "vite": "^5.4.1"
+        "vite": "^5.4.8"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -3284,9 +3284,9 @@
       "dev": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "dev": true
     },
     "node_modules/possible-typed-array-names": {
@@ -3299,9 +3299,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "dev": true,
       "funding": [
         {
@@ -3319,8 +3319,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -3670,9 +3670,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -3966,13 +3966,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
-      "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.43",
         "rollup": "^4.20.0"
       },
       "bin": {
diff --git a/package.json b/package.json
index d58987a..c55a5f9 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,6 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
-    "vite": "^5.4.1"
+    "vite": "^5.4.8"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index bcffb8e..8260463 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,11 @@
+import React from 'react';
+import MainPage from './pages/Main/Main_Page';
 import "./App.css";
 
 function App() {
-  return <></>;
+  return (
+    <MainPage />
+  );
 }
 
 export default App;
diff --git a/src/assets/Banner.png b/src/assets/Banner.png
new file mode 100644
index 0000000..1bd6da8
Binary files /dev/null and b/src/assets/Banner.png differ
diff --git a/src/pages/Main/Main_Page.css b/src/pages/Main/Main_Page.css
new file mode 100644
index 0000000..bb4cc5e
--- /dev/null
+++ b/src/pages/Main/Main_Page.css
@@ -0,0 +1,115 @@
+.main-page {
+    font-family: Arial, sans-serif;
+  }
+  
+  .header {
+    position: relative;
+    width: 100%;
+    height: 800px; 
+    overflow: hidden;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .logo {
+    font-size: 40px;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .highlight {
+    color: #0084ff;
+  }
+  
+  .login-link {
+    font-size: 14px;
+    color: #1F98FF;
+    text-decoration: none;
+    margin-right: 20px;
+  }
+  
+  .section-title {
+    font-size: 24px;
+    margin: 20px 0;
+    text-align: center;
+  }
+  
+  .notice-section, .free-board-section {
+    margin: 20px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .notice-list ul, .free-board-list ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .notice-list li, .free-board-list li {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+    cursor: pointer;
+  }
+  
+  .date {
+    color: #888;
+  }
+  
+  .activities-section, .resources-section {
+    margin: 20px;
+    padding: 10px;
+  }
+  
+  .activities, .resources {
+    display: flex;
+    justify-content: space-around;
+  }
+  
+  .activity-box, .resource-box {
+    width: 200px;
+    height: 200px;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .header-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 10px;
+    padding: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    width: 100%;
+  }
+  
+  .menu-icon {
+    font-size: 24px;
+    color: #1F98FF;
+    cursor: pointer;
+  }
+
+  .footer {
+    position: relative;
+    width: 100%;
+    height: 300px; 
+    overflow: hidden;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
+
diff --git a/src/pages/Main/Main_Page.jsx b/src/pages/Main/Main_Page.jsx
index e69de29..629fb0c 100644
--- a/src/pages/Main/Main_Page.jsx
+++ b/src/pages/Main/Main_Page.jsx
@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import './Main_Page.css';
+import Banner from '../../assets/Banner.png';
+
+const mockNotices = [
+  { id: 1, content: "첫 번째 공지사항 내용", date: "2024-07-31" },
+  { id: 2, content: "두 번째 공지사항 내용", date: "2024-08-01" },
+  { id: 3, content: "세 번째 공지사항 내용", date: "2024-08-02" },
+  { id: 4, content: "네 번째 공지사항 내용", date: "2024-08-03" },
+  { id: 5, content: "다섯 번째 공지사항 내용", date: "2024-08-04" },
+];
+
+const mockActivities = [
+  { id: 1, title: "활동 1" },
+  { id: 2, title: "활동 2" },
+  { id: 3, title: "활동 3" },
+  { id: 4, title: "활동 4" },
+];
+
+const mockResources = [
+  { id: 1, title: "자료 1" },
+  { id: 2, title: "자료 2" },
+  { id: 3, title: "자료 3" },
+  { id: 4, title: "자료 4" },
+];
+
+const mockFreeBoard = [
+  { id: 1, content: "첫 번째 자유 게시판 내용", date: "2024-07-31" },
+  { id: 2, content: "두 번째 자유 게시판 내용", date: "2024-08-01" },
+  { id: 3, content: "세 번째 자유 게시판 내용", date: "2024-08-02" },
+  { id: 4, content: "네 번째 자유 게시판 내용", date: "2024-08-03" },
+  { id: 5, content: "다섯 번째 자유 게시판 내용", date: "2024-08-04" },
+];
+
+const api = axios.create({
+  baseURL: 'http://localhost:3000', 
+});
+
+const fetchData = (endpoint, mockData) => {
+  return api.get(endpoint)
+    .then(response => response.data)
+    .catch(error => {
+      console.error('API 요청 실패:', error);
+      return mockData; 
+    });
+};
+
+const MainPage = () => {
+  const [notices, setNotices] = useState([]);
+  const [activities, setActivities] = useState([]);
+  const [resources, setResources] = useState([]);
+  const [freeBoard, setFreeBoard] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      fetchData('/notices', mockNotices),
+      fetchData('/activities', mockActivities),
+      fetchData('/resources', mockResources),
+      fetchData('/free-board', mockFreeBoard)
+    ]).then(([noticesData, activitiesData, resourcesData, freeBoardData]) => {
+      setNotices(noticesData);
+      setActivities(activitiesData);
+      setResources(resourcesData);
+      setFreeBoard(freeBoardData);
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) {
+    return <div>로딩 중...</div>;
+  }
+
+  return (
+    <div className="main-page">
+      <header className="header">
+        <img src={Banner} alt="CHIP_SAT" className="banner" />
+        <div className="header-overlay">
+          <div className="menu-icon">&#9776;</div>
+          <a href="#" className="login-link">login</a>
+        </div>
+      </header>
+
+      <h2 className="section-title">공지사항</h2>
+      <section className="notice-section">
+        <div className="notice-list">
+          <ul>
+            {notices.map((notice) => (
+              <li key={notice.id}>
+                <span>{notice.content}</span>
+                <span className="date">{notice.date}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="activities-section">
+        <h2 className="section-title">활동</h2>
+        <div className="activities">
+          {activities.map((activity) => (
+            <div key={activity.id} className="activity-box">{activity.title}</div>
+          ))}
+        </div>
+      </section>
+
+      <section className="resources-section">
+        <h2 className="section-title">자료 공유</h2>
+        <div className="resources">
+          {resources.map((resource) => (
+            <div key={resource.id} className="resource-box">{resource.title}</div>
+          ))}
+        </div>
+      </section>
+
+      <h2 className="section-title">자유 게시판</h2>
+      <section className="free-board-section">
+        <div className="free-board-list">
+          <ul>
+            {freeBoard.map((post) => (
+              <li key={post.id}>
+                <span>{post.content}</span>
+                <span className="date">{post.date}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default MainPage;
\ No newline at end of file