diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
new file mode 100644
index 0000000..921f180
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+
+    return (
+        <>
+            <br />
+            footer
+        </>
+    );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js
new file mode 100644
index 0000000..f0fa4ad
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { BrowserRouter, Route, Link } from "react-router-dom";
+
+const Navbar = () => {
+    return (
+        <nav>
+            <ul>
+                <li>
+                    <Link to="/">Maison</Link>
+                </li>
+                <li>
+                    <Link to="/aboutUs">À propos de nous</Link>
+                </li>
+                <li>
+                    <Link to="/contactUs">Contactez-nous</Link>
+                </li>
+                <li>
+                    <Link to="/privacy">Vie privée</Link>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
new file mode 100644
index 0000000..36ecc04
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { useEffect } from "react";
+
+const AbtouUs = () => {
+
+    useEffect(() => {
+        document.title = 'À propos de nous';
+    });
+
+    return (
+        <>
+            À propos de nous
+        </>
+
+    );
+}
+
+export default AbtouUs;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
new file mode 100644
index 0000000..272816c
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { useEffect } from "react";
+
+const ContactUs = () => {
+
+    useEffect(() => {
+        document.title = 'Nous contacter';
+    });
+
+    return (
+        <>
+          Nous contacter
+        </>
+    );
+}
+
+export default ContactUs;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js
new file mode 100644
index 0000000..a57bde0
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { useEffect } from "react";
+
+const Home = () => {
+
+    useEffect(() => {
+        document.title = 'Maison';
+    });
+
+    return (
+        <>
+            Maison
+        </>
+    );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js
new file mode 100644
index 0000000..71738a4
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js
@@ -0,0 +1,16 @@
+import React from "react";
+import {Outlet} from "react-router-dom";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+
+const Layout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+      <Footer/>
+    </>
+  );
+};
+
+export default Layout;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
new file mode 100644
index 0000000..e0e2deb
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { useEffect } from "react";
+
+const Privacy = () => {
+
+    useEffect(() => {
+        document.title = 'Police de vie privée';
+    });
+
+    return (
+        <>
+            Police de vie privée
+        </>
+    );
+}
+
+export default Privacy;
\ No newline at end of file