diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js
deleted file mode 100644
index bb369ec..0000000
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { 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/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
new file mode 100644
index 0000000..41e8411
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+const Topbar = () => {
+    return (
+        <Navbar expand="sm" className="topbar-container">
+            <Container>
+                <Navbar.Brand href="/">
+                    <img src="/images/LesGrossesMitaines.png" height="60"/>
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                <Navbar.Collapse id="basic-navbar-nav">
+                    <Nav className="me-auto">
+                        <Nav.Link href="/" >
+                            Maison
+                        </Nav.Link>
+                        <Nav.Link href="/aboutUs" >
+                            À propos de nous
+                        </Nav.Link>
+                        <Nav.Link href="/contactUs" >
+                            Contactez-nous
+                        </Nav.Link>
+                        <Nav.Link href="/privacy" >
+                            Vie privée
+                        </Nav.Link>
+                    </Nav>
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+}
+
+export default Topbar;
\ 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
index 4bdd0f4..0cf96cf 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js
@@ -1,12 +1,12 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import Navbar from "../components/Navbar";
+import Topbar from "../components/Topbar";
 import Footer from "../components/Footer";
 
 const Layout = () => {
   return (
     <>
-      <Navbar />
+      <Topbar />
       <Outlet />
       <Footer />
     </>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index b4eb982..b52ae52 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -6,6 +6,13 @@ body {
     background-size: cover;
 }
 
+.topbar-container{
+    background-color: beige;
+    margin-bottom: 2%;
+    border-bottom: rgb(82, 4, 82) solid 1px;
+    box-shadow: 0px 3px rgba(82, 4, 82, .5);
+}
+
 .research-container {
     /* border: black solid 1px; */
     padding: 4px 6px 4px 6px;
@@ -14,7 +21,7 @@ body {
     border-radius: 5px;
     height: 40px;
     margin:auto;
-    margin-bottom: 5px;
+    margin-bottom: 2%;
     width: 90%;
 }