diff --git a/front/src/components/FstSection.tsx b/front/src/components/FstSection.tsx
index 7cf827b..40afbcc 100644
--- a/front/src/components/FstSection.tsx
+++ b/front/src/components/FstSection.tsx
@@ -1,6 +1,5 @@
-
+import Button from "./Button";
 import NavBar from "./NavBar";
-import { Link } from "react-router";
 
 export default function FstSection () {
     return (
@@ -32,55 +31,8 @@ export default function FstSection () {
 
             >Help us to save our oceans</h1><br />
             <div style={{display:"flex", justifyContent: "center", gap: "20px"}}>
-                {/* <Button color="primary" children={"Aller au jeu"} url="/game" />
-                <Button color="secondary" children={"Lire les articles"} url="/" />  */}
-                <Link to="/game" style={{
-                    backgroundColor: 'var(--color-yellow)',
-                    borderRadius: '8px',
-                    borderWidth: '0',
-                    color: 'var(--color-black)',
-                    cursor: 'pointer',
-                    display: 'inline-block',
-                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
-                    fontSize: '20px',
-                    fontWeight: '500',
-                    lineHeight: '20px',
-                    listStyle: 'none',
-                    margin: '0',
-                    padding: '10px 12px',
-                    textAlign: 'center',
-                    transition: 'all 200ms',
-                    verticalAlign: 'baseline',
-                    whiteSpace: 'nowrap',
-                    userSelect: 'none',
-                    WebkitUserSelect: 'none',
-                    touchAction: 'manipulation',
-                    textDecoration: 'none',
-                }}>Aller au jeu</Link>
-                <Link to="/articles" style={{
-                    backgroundColor: 'var(--color-darkblue)',
-                    borderRadius: '8px',
-                    borderWidth: '0',
-                    color: 'var(--color-white)',
-                    cursor: 'pointer',
-                    display: 'inline-block',
-                    fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
-                    fontSize: '20px',
-                    fontWeight: '500',
-                    lineHeight: '20px',
-                    listStyle: 'none',
-                    margin: '0',
-                    padding: '10px 12px',
-                    textAlign: 'center',
-                    transition: 'all 200ms',
-                    verticalAlign: 'baseline',
-                    whiteSpace: 'nowrap',
-                    userSelect: 'none',
-                    WebkitUserSelect: 'none',
-                    touchAction: 'manipulation',
-                    textDecoration: 'none',
-                }}>Lire les articles</Link>
-
+                <Button color="primary" children={"Aller au jeu"} url="/game" />
+                <Button color="secondary" children={"Lire les articles"} url="/" /> 
             </div>
         </div></div>
     )
diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx
index d868b75..a2a3fab 100644
--- a/front/src/components/NavBar.tsx
+++ b/front/src/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import ClickableLink from './ClickableLink.tsx';
 import RoundButton from './RoundButton.tsx';
 
 export default function NavBar(){
@@ -8,9 +8,8 @@ export default function NavBar(){
             {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
             <span className="material-symbols-outlined"
             style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
-            <Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
-            <Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
-            <Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
+            <ClickableLink url="/" text = "Accueil" />
+            <ClickableLink url="/game" text = "Jeu" />
         </div>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
             <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>