diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx
index 09f6a75..94613fa 100644
--- a/my-app/src/App.tsx
+++ b/my-app/src/App.tsx
@@ -4,6 +4,10 @@ import './css/mine.css';
 import './css/mine_phone.css';
 
 import Home from './pages/home'
+import Contact from './pages/contact'
+import Projects from './pages/projects'
+import Resume from './pages/resume'
+import Skills from './pages/skills'
 
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { BrowserRouter, Route, Router, Routes, useLocation } from 'react-router-dom';
@@ -14,6 +18,7 @@ import { ColorModeContext } from './utils/color-toggle';
 import { useTranslation } from 'react-i18next';
 
 import "./utils/i18n";
+import Project from './pages/projects';
 
 function App()
 {
@@ -49,7 +54,10 @@ function App()
     <Header/>
     <Routes>
         <Route path="/" element={<Home/>}/>
-        <Route path="/test" element={<></>}/>
+        <Route path="/contact" element={<Contact/>}/>
+        <Route path="/projects" element={<Project/>}/>
+        <Route path="/resume" element={<Resume/>}/>
+        <Route path="/skills" element={<Skills/>}/>
     </Routes>
     {/* </Router> */}
     </BrowserRouter>
diff --git a/my-app/src/components/header.tsx b/my-app/src/components/header.tsx
index 33fe059..f9343e0 100644
--- a/my-app/src/components/header.tsx
+++ b/my-app/src/components/header.tsx
@@ -32,16 +32,16 @@ function Header()
                 <img src={logo} alt="Logo" />
               </a>
               <div className="pages">
-                {t("page1")}
+                <a href="/contact">{t("page1")}</a>
               </div>
               <div className="pages">
-                {t("page2")}
+                <a href="/projects">{t("page2")}</a>
               </div>
               <div className="pages">
-                {t("page3")}
+                <a href="/resume">{t("page3")}</a>
               </div>
               <div className="pages">
-                {t("page4")}
+                <a href="/skills">{t("page4")}</a>
               </div>
               <div className="language">
                 {/* <MenuSimple/> */}
diff --git a/my-app/src/css/mine.css b/my-app/src/css/mine.css
index a35dd5c..45d9993 100644
--- a/my-app/src/css/mine.css
+++ b/my-app/src/css/mine.css
@@ -7,6 +7,11 @@
   color: white;
 }
 
+a, a:visited, a:hover, a:active {
+  text-decoration: none;
+  color: inherit;
+}
+
 body {
     overflow: hidden;
     max-width: 100vw;
@@ -146,6 +151,7 @@ body {
   }
 
   .project_group {
+    margin-top: 2vh;
     font-size: 1vw;
     display: flex;
     flex-direction: row;
diff --git a/my-app/src/pages/contact.tsx b/my-app/src/pages/contact.tsx
new file mode 100644
index 0000000..f00f37b
--- /dev/null
+++ b/my-app/src/pages/contact.tsx
@@ -0,0 +1,18 @@
+function Contact()
+{
+	return (
+		<div className="contact">
+			<div>
+				Github
+			</div>
+			<div>
+				Telephone
+			</div>
+			<div>
+				Email
+			</div>
+		</div>
+	)
+};
+
+export default Contact;
\ No newline at end of file
diff --git a/my-app/src/pages/home.tsx b/my-app/src/pages/home.tsx
index 744e6af..cb13803 100644
--- a/my-app/src/pages/home.tsx
+++ b/my-app/src/pages/home.tsx
@@ -28,23 +28,23 @@ function Home()
             <div className="project">
                 <div className='project_txt'>{t("project")}</div>
                 <div className = "project_group">
-                  <p className="project_list">- Ft_Transcendence</p>
+                  <a href="/projects" className="project_list">- Ft_Transcendence</a>
                   <FaArrowRightLong className="arrow"/>
                 </div>
                 <div className = "project_group">
-                  <p className="project_list">- Cloud-1</p>
+                  <a href="/projects" className="project_list">- Cloud-1</a>
                   <FaArrowRightLong className="arrow"/>
                 </div>
                 <div className = "project_group">
-                  <p className="project_list">- Minishell</p>
+                  <a href="/projects" className="project_list">- Minishell</a>
                   <FaArrowRightLong className="arrow"/>
                 </div>
                 <div className = "project_group">
-                  <p className="project_list">- Cube3d</p>
+                  <a href="/projects" className="project_list">- Cube3d</a>
                   <FaArrowRightLong className="arrow"/>
                 </div>
                 <div className = "project_group">
-                  <p className="project_list">- Homemade NAS</p>
+                  <a href="/projects" className="project_list">- Homemade NAS</a>
                   <FaArrowRightLong className="arrow"/>
                 </div>
             </div>
diff --git a/my-app/src/pages/projects.tsx b/my-app/src/pages/projects.tsx
new file mode 100644
index 0000000..3d90322
--- /dev/null
+++ b/my-app/src/pages/projects.tsx
@@ -0,0 +1,10 @@
+function Project()
+{
+    return (	
+        <div className="projects">
+            project list ? first one ?
+	    </div>
+    )
+};
+
+export default Project;
\ No newline at end of file
diff --git a/my-app/src/pages/resume.tsx b/my-app/src/pages/resume.tsx
new file mode 100644
index 0000000..a0320fe
--- /dev/null
+++ b/my-app/src/pages/resume.tsx
@@ -0,0 +1,10 @@
+function Resume()
+{
+    return (	
+        <div className="resume">
+            resume here , pdf ?
+	    </div>
+    )
+};
+
+export default Resume;
\ No newline at end of file
diff --git a/my-app/src/pages/skills.tsx b/my-app/src/pages/skills.tsx
new file mode 100644
index 0000000..542e1f5
--- /dev/null
+++ b/my-app/src/pages/skills.tsx
@@ -0,0 +1,10 @@
+function Skills()
+{
+    return (	
+        <div className="skills">
+            skills here
+	    </div>
+    )
+};
+
+export default Skills;
\ No newline at end of file