diff --git a/package-lock.json b/package-lock.json
index 8f100a3a8..bedcab935 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,10 @@
       "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
+        "@types/react-router-dom": "^5.3.3",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.24.1"
       },
       "devDependencies": {
         "@craco/craco": "^7.1.0",
@@ -6135,6 +6137,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz",
+      "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -10366,6 +10376,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -10514,8 +10529,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/q": {
       "version": "1.5.8",
@@ -10539,7 +10553,6 @@
       "version": "18.2.58",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.58.tgz",
       "integrity": "sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -10555,6 +10568,25 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
@@ -10570,8 +10602,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.7",
@@ -28318,6 +28349,36 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
+      "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz",
+      "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1",
+        "react-router": "6.24.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index aca6cc846..c3f5187f3 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
diff --git a/src/App.tsx b/src/App.tsx
index e3b5c5dde..bb35c9eeb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,62 @@
-import { css } from '@emotion/react';
-import React from 'react';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
 
 import Footer from './components/common/Footer/Footer';
 import Header from './components/common/Header/Header';
+import LoginPage from './pages/LoginPage';
+import MainPage from './pages/MainPage';
+import MyAccountPage from './pages/MyAccountPage';
+import ThemePage from './pages/ThemePage';
 
-const appStyle = css`
+const AppWrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 `;
 
-const mainContentStyle = css`
+const ContentWrapper = styled.div`
   flex: 1;
 `;
 
 const App: React.FC = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [loginId, setLoginId] = useState('');
+
+  const handleLogin = (id: string) => {
+    setIsLoggedIn(true);
+    setLoginId(id);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setLoginId('');
+  };
+
   return (
-    <div css={appStyle}>
-      <Header />
-      <main css={mainContentStyle} />
-      <Footer />
-    </div>
+    <Router>
+      <AppWrapper>
+        <Header isLoggedIn={isLoggedIn} />
+        <ContentWrapper>
+          <Routes>
+            <Route path="/" element={<MainPage />} />
+            <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />
+            <Route
+              path="/my-account"
+              element={
+                isLoggedIn ? (
+                  <MyAccountPage onLogout={handleLogout} loginId={loginId} />
+                ) : (
+                  <Navigate to="/login" />
+                )
+              }
+            />
+            <Route path="/theme/:themeKey" element={<ThemePage />} />
+          </Routes>
+        </ContentWrapper>
+        <Footer />
+      </AppWrapper>
+    </Router>
   );
 };
 
diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
index 8b8eb3515..183c64791 100644
--- a/src/components/common/Footer/Footer.tsx
+++ b/src/components/common/Footer/Footer.tsx
@@ -2,26 +2,17 @@ import styled from '@emotion/styled';
 import React from 'react';
 
 const FooterWrapper = styled.footer`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 18px;
-  background-color: #e0e0e0;
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-`;
-
-const FooterInner = styled.div`
+  padding: 20px;
+  background-color: #f8f9fa;
   text-align: center;
-  font-size: 18px;
-  font-family: 'Arial, sans-serif';
+  width: 100%;
+  margin-top: auto;
 `;
 
 const Footer: React.FC = () => {
   return (
     <FooterWrapper>
-      <FooterInner>카카오톡 선물하기</FooterInner>
+      <p>카카오톡 선물하기</p>
     </FooterWrapper>
   );
 };
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 316dd5c58..d94299bbd 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,12 +1,18 @@
 import styled from '@emotion/styled';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-const HeaderWrapper = styled.header`
+interface HeaderProps {
+  bgColor?: string;
+  isLoggedIn: boolean;
+}
+
+const HeaderWrapper = styled.header<{ bgColor?: string }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
-  background-color: #ffffff;
+  background-color: ${({ bgColor }) => bgColor || '#ffffff'};
 `;
 
 const HeaderInner = styled.div`
@@ -22,7 +28,7 @@ const LogoText = styled.div`
   font-family: 'Arial, sans-serif';
 `;
 
-const LoginButton = styled.button`
+const NavButton = styled(Link)`
   padding: 8px 16px;
   background-color: transparent;
   color: black;
@@ -31,14 +37,23 @@ const LoginButton = styled.button`
   cursor: pointer;
   font-size: 14px;
   font-family: 'Arial, sans-serif';
+  text-decoration: none;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
 `;
 
-const Header: React.FC = () => {
+const Header: React.FC<HeaderProps> = ({ bgColor, isLoggedIn }) => {
   return (
-    <HeaderWrapper>
+    <HeaderWrapper bgColor={bgColor}>
       <HeaderInner>
         <LogoText>선물하기</LogoText>
-        <LoginButton>로그인</LoginButton>
+        {isLoggedIn ? (
+          <NavButton to="/my-account">내 계정</NavButton>
+        ) : (
+          <NavButton to="/login">로그인</NavButton>
+        )}
       </HeaderInner>
     </HeaderWrapper>
   );