diff --git a/FITple-Frontend/assets/mainpage.svg b/FITple-Frontend/assets/mainpage.svg
new file mode 100644
index 0000000..32c8fc9
--- /dev/null
+++ b/FITple-Frontend/assets/mainpage.svg
@@ -0,0 +1,156 @@
+
diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx
index 5298897..cc845ff 100644
--- a/FITple-Frontend/src/App.jsx
+++ b/FITple-Frontend/src/App.jsx
@@ -27,12 +27,14 @@ import Layout from "./layout/Layout";
import LayoutNavBlue from "./layout/LayoutNavBlue";
import SearchMainPage from "./pages/SearchMainPage/SearchMainPage";
import BrandPage from "./pages/BrandPage/BrandPage";
+import MainPage from "./pages/MainPage/MainPage";
function App() {
return (
<>
{/* Navbar 없는 layout */}
}>
+ }/>
{/* 로그인페이지 */}
} />
{/* 회원가입페이지 */}
diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.jsx b/FITple-Frontend/src/pages/MainPage/MainPage.jsx
new file mode 100644
index 0000000..e830f3c
--- /dev/null
+++ b/FITple-Frontend/src/pages/MainPage/MainPage.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container, Header, LogoContainer, Logo, MainText, Button, ImageWrapper } from './MainPage.style';
+import fitpleLogo from '../../../assets/Logo.svg';
+import mainPageImage from '../../../assets/mainpage.svg';
+import { useNavigate } from "react-router-dom";
+
+function MainPage() {
+ const navigate = useNavigate();
+ const handleLoginClick = () => {
+ navigate('/login');
+ };
+
+ return (
+
+
+
+
+ FITple
+
+
+
+
+ 
+
+
+ );
+};
+
+export default MainPage;
diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.style.js b/FITple-Frontend/src/pages/MainPage/MainPage.style.js
new file mode 100644
index 0000000..28deaaf
--- /dev/null
+++ b/FITple-Frontend/src/pages/MainPage/MainPage.style.js
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100vh;
+ overflow: hidden;
+`;
+
+export const Header = styled.header`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 120px;
+ background-color: #fff;
+ border-bottom: 1px solid #e0e0e0;
+`;
+
+export const LogoContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+`;
+
+export const Logo = styled.img`
+ height: 40px;
+`;
+
+export const MainText = styled.p`
+ font-size: 20px;
+ font-weight: 600;
+ margin-left: 10px;
+`;
+
+export const Button = styled.button`
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 20px;
+ cursor: pointer;
+ font-size: 16px;
+
+ &:hover {
+ background-color: #0056b3;
+ }
+`;
+
+export const ImageWrapper = styled.div`
+ width: 100%;
+ flex: 1;
+ overflow-y: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f8f9fa;
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+`;