diff --git a/site/page.html b/site/page.html
index 6473f0b..4f889b4 100644
--- a/site/page.html
+++ b/site/page.html
@@ -25,7 +25,7 @@
             <div class="section-profile-informations">
                 <img src="img/Vienna3-1600x1067.jpg">
                 <h2>John Doe</h2>
-                <span>#tropbon</span>
+                <span>#DefiJobOpp</span>
             </div>
         </section>
 
@@ -51,11 +51,40 @@
         <!-- PROFILE -->
 
         <div class="clearfix">
-            <div class="box" style="background-color:#bbb;width:40%">
-                <p>Some text inside the box.</p>
+            <!-- Premiere colonne -->
+            <div class="box" style="background-color:#F5F5F5;width:40%">
+                <p class="title">Biographie</p>
+                <p>Sed sit amet elit mi. Vivamus laoreet lorem vel justo convallis, eu malesuada dui dictum. Aenean rutrum, turpis sagittis tristique volutpat, dolor turpis laoreet mauris, sit amet porta quam nibh vitae ipsum. Vivamus hendrerit tincidunt velit in mollis. Fusce porttitor vel lectus sed porta. Nulla ac varius justo, rhoncus aliquam dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
+                <p class="title">Amis</p>
+                <p><img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80">
+                    <img src="https://images.unsplash.com/photo-1562887284-eb863165ebc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"></p>
+                <p class="voirplus"><a href="amis.html">Voir plus</a></p>
+                <p class="title">Gallery de photos</p>
+                <p><img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
+                    <img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
+                    <img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
+                    <img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
+                    <img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery">
+                    <img src="https://images.unsplash.com/photo-1572786194701-34e2371239cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="gallery"></p>
+                <p class="voirplus"><a href="gallery.html">Voir plus</a></p>
+
+                <!-- Deuxieme colonne -->
+
             </div>
             <div class="box" style="background-color:#ccc;width:60%">
-                <p>Some text inside the box.</p>
+                <div class="post">
+                    <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis dui eu lorem eleifend interdum. Suspendisse potenti. In id lectus ac lorem varius rutrum. Cras mollis sodales massa, at malesuada sapien feugiat eget.</p>
+                </div>
             </div>
         </div>
     </main>
diff --git a/site/styles/styles.css b/site/styles/styles.css
index 8c9ce33..cde7f3f 100644
--- a/site/styles/styles.css
+++ b/site/styles/styles.css
@@ -142,6 +142,10 @@ section.section-profile {
     display: table;
 }
 
+h2 {
+    padding-left: 30px;
+}
+
 
 
 /* ================================= */
@@ -154,7 +158,11 @@ section.section-profile {
     box-sizing: border-box;
     float: left;
     width: 50%;
-    padding: 50px;
+    padding: 30px;
+}
+
+.box:first-child {
+    border-right: 1px solid grey;
 }
 
 .clearfix::after {
@@ -180,3 +188,39 @@ section.section-profile {
     align-content: flex-end;
     width: 100%;
 }
+
+.title {
+    color: dimgrey;
+    text-decoration: underline;
+    font-size: 18px;
+}
+
+img {
+    width: 50px;
+    border: 1px solid grey;
+}
+
+[alt="gallery"] {
+    display: inline-block;
+    clip-path: inset(5% 12%);
+    width: 121px;
+    border: 1px solid grey;
+}
+
+[href^="amis"],
+[href^="gallery"] {
+    text-decoration: none;
+    color: grey;
+    text-decoration: underline;
+}
+
+
+/* =================== */
+
+.post {
+    border: 1px solid grey;
+    box-sizing: border-box;
+    float: left;
+    width: 100%;
+    padding: 30px;
+}