diff --git a/agile-dev/css/custom.css b/agile-dev/css/custom.css
index e69de29..82a25b8 100644
--- a/agile-dev/css/custom.css
+++ b/agile-dev/css/custom.css
@@ -0,0 +1,54 @@
+ul.navbar {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+ul.navbar li {
+    float: left;
+}
+
+ul.navbar li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+ul.navbar li a:hover {
+    background-color: #111;
+}
+
+ul.navbar li.navbar-logo {
+    margin-right: 20px;
+}
+
+ul.navbar li.navbar-logo img {
+    height: 40px;
+    vertical-align: middle;
+}
+ul.navbar li.navbar-button {
+    float: right;
+}
+
+ul.navbar li.navbar-button a {
+    background-color: #4CAF50;
+}
+
+
+
+.image {
+    width: 400px;
+    height: 400px;
+    text-align: left;
+}
+.text {
+    text-align: right;
+}
+
+.button {
+    text-align: right;
+}
\ No newline at end of file
diff --git a/agile-dev/index.html b/agile-dev/index.html
index 2fb0a11..308e4a8 100644
--- a/agile-dev/index.html
+++ b/agile-dev/index.html
@@ -4,9 +4,9 @@
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
+    <link type="text/css" rel="stylesheet" href="./css/materialize.css"/>
     <!--Import your custom.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
+    <link type="text/css" rel="stylesheet" href="./css/custom.css"/>
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>🤙 Yo! application 🤙 | Simplon</title>
@@ -18,8 +18,30 @@
     <!-- finish code here -->
 
     <!--Import materialize.js - JavaScript at end of body for optimized loading-->
-    <script type="text/javascript" src=""></script>
+    <script type="text/javascript" src="./agile-dev/js/materialize.js"></script>
     <!--Import your custom.js-->
-    <script type="text/javascript" src=""></script>
+    <script type="text/javascript" src="./agile-dev/js/custom.js"></script>
   </body>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <ul class="navbar">
+      <li class="navbar-logo"><a href="#home"><img src="./img/logo_application.png" alt="Logo"></a></li>
+        <li><a href="#home">Accueil</a></li>
+        <li><a href="#services">Services</a></li>
+        <li class="navbar-button"><a href="#login">Se connecter</a></li>
+    </ul>
+
+  <h2>Bénéfice</h2> 
+  <img src="img/iphone_features_light.png" class="image">
+  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum i <br> Lorem ipsum
+    dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum i <br> Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit. Praesent risus leo, dictum i 
+  </p>
+    <div class="button"> 
+      <button>Lorem ipsum</button> 
+    </div>
+</body>
 </html>
+    
\ No newline at end of file
