diff --git a/assets/cabinet-avocats-900x601.jpeg b/assets/cabinet-avocats-900x601.jpeg
new file mode 100644
index 0000000..d6d88d6
Binary files /dev/null and b/assets/cabinet-avocats-900x601.jpeg differ
diff --git a/components/navbar.html b/components/navbar.html
index 6974f1d..a3578c5 100644
--- a/components/navbar.html
+++ b/components/navbar.html
@@ -1,4 +1,4 @@
 <nav id="navbar_component">
-    <p>Saoul Bon Monsieur</p>
+    <p><bold>Saoul Bon Monsieur</bold></p>
 </nav>
 <div id="navbar_padding"></div>
\ No newline at end of file
diff --git a/css/navbar.css b/css/navbar.css
index bd2c7f0..15fccb9 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -7,7 +7,7 @@
     top: 0;
     width: 100%;
     background-color: #f5a122;
-    z-index:0;
+    z-index:2;
 }
 
 #navbar_padding{
diff --git a/css/saoulbonmonsieur.css b/css/saoulbonmonsieur.css
index 4bd27ec..eb455ab 100644
--- a/css/saoulbonmonsieur.css
+++ b/css/saoulbonmonsieur.css
@@ -5,29 +5,56 @@
   scroll-behavior: smooth;
 }
 
+h1 {
+  font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+
+p {
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+.anim-text {
+  display: none;
+  opacity: 0;
+}
+
 .presentation {
   overflow: hidden;
   width: 100%;
   height: 30rem;
   display: flex;
+  background-image: url("../assets/cabinet-avocats-900x601.jpeg");
+  background-position-y: 100%;
+  background-size: cover;
+  position: relative;
 }
 
-.presentation-text {
+.presentation-text{
+  width: 100%;
   margin: 14rem 2rem;
   padding: 0 0 0 2rem;
-  width: 100%;
+  z-index:1;
 }
 
 .presentation-img {
   width: 100%;
   height: 100%;
+  z-index:10;
 }
 
 .photosaoul {
     max-width: inherit;
     height: inherit;
     float: right;
-    z-index:10;
     display: none;
     margin-top: auto;
-  }
\ No newline at end of file
+}
+
+.whiteband {
+  background-color: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(16px);
+  height: 10rem;
+  top: 40%;
+  z-index:0;
+  position: absolute;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6224a4a..1e3562c 100644
--- a/index.html
+++ b/index.html
@@ -5,24 +5,30 @@
     <title>Saoul Bonmonsieur | Site Web Officiel</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
     <script src="lib/anime.min.js"></script>
-
     <script src="js/componentloader.js"></script>
-    <link href="css/navbar.css" rel="stylesheet">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet">
+    <link href="css/navbar.css" rel="stylesheet">
     <link href="css/saoulbonmonsieur.css" rel="stylesheet">
 </head>
 
 <body>
     <Navbar></Navbar>
     <div class="presentation">
-        <div class="presentation-text">
+        <div class="presentation-text anim-text">
             <h1>Saoul Bonmonsieur</h1>
-            <button onclick="superAnim()">Animate !</button>
+            <p>Avocat sur loi de Toulouse</p>
         </div>
         <div class="presentation-img">
             <img class="photosaoul" src="assets/saoul.png"></img>
         </div>
+        <div class="whiteband"></div>
     </div>
 </body>
 
diff --git a/js/componentloader.js b/js/componentloader.js
index ca384df..5608214 100644
--- a/js/componentloader.js
+++ b/js/componentloader.js
@@ -13,4 +13,15 @@ function load(url, element) {
 
 window.addEventListener('load', function () {
     load("../components/navbar.html", document.getElementsByTagName("Navbar")[0]);
-})
\ No newline at end of file
+})
+
+function ready(callback){
+    // in case the document is already rendered
+    if (document.readyState!='loading') callback();
+    // modern browsers
+    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
+    // IE <= 8
+    else document.attachEvent('onreadystatechange', function(){
+        if (document.readyState=='complete') callback();
+    });
+}
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index fb92672..7ce4888 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,20 +2,46 @@ var saoulAnimation = anime({
     targets: '.photosaoul',
     easing: 'easeOutQuint',
     translateX: [
-        {value: 0, duration: 100, delay: 0 },
-        {value: "100%", duration: 600, delay: 100 }
+        {value: "", duration: 100, delay: 0 },
+        {value: "130%", duration: 1000, delay: 100 }
     ],
     rotate : [
         {value: 0, duration: 100, delay: 0 },
-        {value: 30, duration: 600, delay: 100 }
+        {value: -60, duration: 1000, delay: 100 }
     ],
     begin: function () {
         document.getElementsByClassName("photosaoul")[0].style.display = "flex";
     },
 });
 
+var whiteBandAnimation = anime({
+    targets: '.whiteband',
+    easing: 'easeInExpo',
+    width: "100%",
+    duration: 2200,
+})
+
+var textAnimation = anime({
+    targets: '.anim-text',
+    easing: 'easeInOutExpo',
+    opacity : [
+        {value: 0, duration: 2000, delay: 0 },
+        {value: 100, duration: 1000, delay: 100 }
+    ],
+    begin: function () {
+        document.getElementsByClassName("anim-text")[0].style.display = "block";
+    },
+})
+
 saoulAnimation.reverse()
+ready(function(){
+    setTimeout(() => {
+        saoulAnimation.play();
+        whiteBandAnimation.play();
+        textAnimation.play();
+    }, 1000);
+});
 
 function superAnim() {
-    saoulAnimation.restart()
+    saoulAnimation.play()
 }
\ No newline at end of file
