diff --git a/src/App.css b/src/App.css
index 4360175..a728bbf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,49 +1,3 @@
-#root {
-    padding: 0;
-    font-family: 'Roboto', sans-serif;
-    background-color: white;
-    margin: 0;
-}
-
-.navbar {
-    font-family: 'Arial', sans-serif;
-    background-color: white;
-    width: 100%;
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    margin: 0;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1em 0;
-    width: 100%;
-}
-
-.navbar-links {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.navbar-logo-img img {
-    width: 100%;
-    height: auto;
-    max-width: 7vw;
-}
-
-.navbar-link {
-    text-decoration: none;
-    color: black;
-    font-size: 1.5em;
-    margin: 0 1em;
-}
-
 .logo-container {
     display: flex;
     justify-content: center; /* Centrer horizontalement */
@@ -318,69 +272,6 @@
     margin-left: 20em;
 }
 
-.footer-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 2em 0;
-    width: 100vw;
-}
-
-.footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-}
-
-.footer-separator {
-    width: 100vw;
-    height: 10px;
-    background-color: black;
-}
-
-.footer-content-top {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-}
-
-.footer-content-top img {
-    width: 100%;
-    height: auto;
-    max-width: 20vw;
-}
-
-.social-network-small-icon {
-    fill: black;
-    color: black;
-}
-
-.footer-nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 3em;
-    margin: 2em 0;
-}
-
-.footer-nav a {
-    text-decoration: none;
-    color: black;
-    font-size: 1.2em;
-}
-
-.footer-credits {
-    background-color: black;
-    color: white;
-    width: 100%;
-    text-align: center;
-}
-
 .partenaires-list-container {
     display: flex;
     justify-content: center;
diff --git a/src/App.tsx b/src/App.tsx
index 9ea5b96..a483808 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,31 @@
-import React from 'react';
-import './App.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import React from 'react';
+
+import './App.css';
+
+import { Navbar } from './layouts/navbar/navbar';
+import { Footer } from './layouts/footer/footer';
+
 import Home from './pages/Home';
 import NotFound from './pages/404';
 import Partenaires from './pages/Partenaires';
 import Projets from './pages/Projets';
 
 const App: React.FC = () => {
-  return (
-    <Router>
-      <div className="app">
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/partenaires" element={<Partenaires />} />
-          <Route path="/projets" element={<Projets />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </div>
-    </Router>
-  );
+  return (<>
+    <Navbar activeLink={0} />
+    <div className="page">
+      <Router>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/partenaires" element={<Partenaires />} />
+            <Route path="/projets" element={<Projets />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+      </Router>
+    </div>
+    <Footer />
+  </>);
 };
 
 export default App;
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
deleted file mode 100644
index 3864754..0000000
--- a/src/components/footer/footer.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { SocialNetworkSmall } from '../socialnetwork/socialnetwork';
-
-export const Footer: React.FC = () => {
-  return (
-    <div className={'footer-container'}>
-      <footer className={'footer'}>
-        <div className={'footer-separator'}></div>
-        <div className={'footer-content'}>
-          <div className={'footer-content-top'}>
-            <img src={'/assets/images/logo-full.png'} alt={'Modelec'} />
-          </div>
-          <div className={'footer-content-middle'}>
-            <div className={'social-networks'}>
-              <SocialNetworkSmall
-                icon={'https://r2.modelec.club/github-dark.svg'}
-                link={'https://www.github.com/modelec'}
-              />
-              <SocialNetworkSmall
-                icon={'https://r2.modelec.club/youtube-dark.svg'}
-                link={'https://youtube.com/modelec'}
-              />
-              <SocialNetworkSmall
-                icon={'https://r2.modelec.club/insta-dark.svg'}
-                link={'https://www.instagram.com/modelec_isen'}
-              />
-              <SocialNetworkSmall
-                icon={'https://r2.modelec.club/mail.svg'}
-                link={'mailto:contact@modelec.club'}
-              />
-            </div>
-          </div>
-          <div className={'footer-content-bottom'}>
-            <nav className={'footer-nav'}>
-              <a href={'/projets'}>Projets</a>
-              <a href={'/materiels'}>Matériels</a>
-              <a href={'/photos'}>Photos</a>
-              <a href={'/partenaires'}>Partenaires</a>
-              <a href={'/contact'}>Nous contacter</a>
-            </nav>
-          </div>
-        </div>
-      </footer>
-      <div className={'footer-credits'}>
-        <p>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN.</p>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
deleted file mode 100644
index 091c440..0000000
--- a/src/components/navbar/navbar.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NavbarLink } from '../navbarlink/navbarLink';
-
-export const Navbar = () => {
-  return (
-    <>
-      <nav className={'navbar'}>
-        <div className={'navbar-container'}>
-          <div className={'navbar-logo'}>
-            <a href={'/'} className={'navbar-logo-img'}>
-              <img
-                src={'https://r2.modelec.club/logo.png'}
-                alt={'Modelec Logo'}
-              />
-            </a>
-          </div>
-          <div className={'navbar-links'}>
-            <NavbarLink text={'Projets'} link={'/projets'} />
-            <NavbarLink text={'Matériels'} link={'/materiels'} />
-            <NavbarLink text={'Photos'} link={'/photos'} />
-            <NavbarLink text={'Partenaires'} link={'/partenaires'} />
-            <NavbarLink text={'Nous contacter'} link={'/contact'} />
-          </div>
-        </div>
-      </nav>
-    </>
-  );
-};
diff --git a/src/fonts.css b/src/fonts.css
new file mode 100644
index 0000000..e4f3a7a
--- /dev/null
+++ b/src/fonts.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
\ No newline at end of file
diff --git a/src/layouts/footer/footer.css b/src/layouts/footer/footer.css
new file mode 100644
index 0000000..56893f5
--- /dev/null
+++ b/src/layouts/footer/footer.css
@@ -0,0 +1,50 @@
+.footer {
+    background: var(--black);
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    gap: 2rem;
+}
+
+.footer-logo {
+    width: 64px;
+    height: 64px;
+    border-radius: 15px;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10rem;
+}
+
+.footer-part {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+.footer-title {
+    font-size: 1.5em;
+    color: var(--white);
+}
+
+.footer-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem 3rem;
+    max-height: 75px;
+    flex-wrap: wrap;
+}
+
+.footer-link {
+    color: var(--gray);
+    text-decoration: none;
+}
+
+.footer-credits {
+    color: var(--white);
+    font-size: 0.7em;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/layouts/footer/footer.tsx b/src/layouts/footer/footer.tsx
new file mode 100644
index 0000000..553b78f
--- /dev/null
+++ b/src/layouts/footer/footer.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import './footer.css';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className={'footer'}>
+      <div className={'footer-content'}>
+        <img className={'footer-logo'} src={'https://r2.modelec.club/logo.png'} alt={'Modelec'} />
+        <div className={'footer-part'}>
+          <h3 className={'footer-title'}>Plan du site</h3>
+          <div className={'footer-links'}>
+            <a className={'footer-link'} href={'/'}>Accueil</a>
+            <a className={'footer-link'} href={'/projets'}>Projets</a>
+            <a className={'footer-link'} href={'/materiels'}>Matériels</a>
+            <a className={'footer-link'} href={'/photos'}>Photos</a>
+            <a className={'footer-link'} href={'/partenaires'}>Partenaires</a>
+            <a className={'footer-link'} href={'/contact'}>Nous contacter</a>
+          </div>
+        </div>
+        <div className={'footer-part'}>
+          <h3 className={'footer-title'}>Nos réseaux</h3>
+          <div className={'footer-links'}>
+            <a className={'footer-link'} target={'_blank'} href={'https://www.instagram.com/modelec_isen'}>Instagram</a>
+            <a className={'footer-link'} target={'_blank'} href={'https://youtube.com/modelec'}>Youtube</a>
+            <a className={'footer-link'} target={'_blank'} href={'https://www.github.com/modelec'}>Github</a>
+            <a className={'footer-link'} target={'_blank'} href={'mailto:contact@modelec.club'}>Mail</a>
+          </div>
+        </div>
+      </div>
+      <span className={'footer-credits'}>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN.</span>
+    </footer>
+  );
+};
diff --git a/src/layouts/navbar/navbar.css b/src/layouts/navbar/navbar.css
new file mode 100644
index 0000000..01372ac
--- /dev/null
+++ b/src/layouts/navbar/navbar.css
@@ -0,0 +1,47 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    background-color: white;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    box-shadow: 0 10px 10px rgba(128, 128, 128, 0.1);
+    padding-inline: 100px;
+}
+
+.navbar-logo {
+    display: flex;
+    align-items: center;
+}
+.navbar-logo img {
+    height: 64px;
+}
+
+.navbar-links {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 3em;
+}
+
+.navbar-link {
+    text-decoration: none;
+    font-size: 1em;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    position: relative;
+    &.link_active::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: var(--main);
+        border-radius: 999px;
+    }
+}
\ No newline at end of file
diff --git a/src/layouts/navbar/navbar.tsx b/src/layouts/navbar/navbar.tsx
new file mode 100644
index 0000000..049ed89
--- /dev/null
+++ b/src/layouts/navbar/navbar.tsx
@@ -0,0 +1,33 @@
+import { NavbarLink } from '../../components/navbarlink/navbarLink';
+
+import './navbar.css';
+
+export const Navbar = ({ activeLink }: { activeLink: number }) => {
+  const links = [
+    { text: 'Projets', link: '/projets' },
+    { text: 'Matériels', link: '/materiels' },
+    { text: 'Photos', link: '/photos' },
+    { text: 'Partenaires', link: '/partenaires' },
+    { text: 'Nous contacter', link: '/contact' },
+  ]
+  return (
+    <>
+      <nav className={'navbar'}>
+        <a href={'/'} className={'navbar-logo'}>
+          <img
+            className='navbar-logo-img'
+            src={'https://r2.modelec.club/logo-full.png'} // TODO: Change to SVG logo / import it from assets
+            alt={'Modelec Logo'}
+          />
+        </a>
+        <div className={'navbar-links'}>
+          {
+            links.map((link, index) => (
+              <NavbarLink key={index} text={link.text} link={link.link} isActive={activeLink == index} />
+            ))
+          }
+        </div>
+      </nav>
+    </>
+  );
+};
diff --git a/src/main.tsx b/src/main.tsx
index 6f4ac9b..c9af531 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
+
+import './index.css';
+import './fonts.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index e7f20dd..3d8bb57 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
-import { Navbar } from '../components/navbar/navbar.tsx';
-import { MiddleText } from '../components/middletext/middletext.tsx';
-import { FromRightCard } from '../components/sidecard/fromrightcard.tsx';
-import { SocialNetworks } from '../components/socialnetwork/socialnetwork.tsx';
-import { FromLeftCardCarousel } from '../components/sidecard/fromleftcard.tsx';
+
+import { Github, Youtube, Instagram, BookmarkBook } from 'iconoir-react';
+
+import { Box } from '../components/box/box.tsx';
+import { SocialNetwork } from '../components/socialnetwork/socialnetwork.tsx';
 import { Carousel } from '../components/carousel/carousel.tsx';
-import { Team } from '../components/team/team.tsx';
-import { Footer } from '../components/footer/footer.tsx';
 
 const Home: React.FC = () => {
   return (
     <>
-      <Navbar />
-      <div className={'logo-container'}>
+      <div className={'page-banner'}>
         <img
           src={'https://r2.modelec.club/logo-full.png'}
           alt={'Modelec Logo'}
@@ -116,7 +113,6 @@ const Home: React.FC = () => {
           ]}
         />
       </div>
-      <Footer />
     </>
   );
 };