diff --git a/css/main.css b/css/main.css
index b25e769..02442a9 100755
--- a/css/main.css
+++ b/css/main.css
@@ -3,13 +3,14 @@
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
-
-
-
-
-
-
-
+.friends img {
+    width: 66px;
+    height: 105px;
+}
+
+.each-friend {
+    margin-top: 8px;
+}
 
 
 
diff --git a/images/blondelady.jpeg b/images/blondelady.jpeg
new file mode 100644
index 0000000..c200401
Binary files /dev/null and b/images/blondelady.jpeg differ
diff --git a/images/brunettelady.jpg b/images/brunettelady.jpg
new file mode 100644
index 0000000..85a9ac2
Binary files /dev/null and b/images/brunettelady.jpg differ
diff --git a/images/brunetteman.jpeg b/images/brunetteman.jpeg
new file mode 100644
index 0000000..9fdf280
Binary files /dev/null and b/images/brunetteman.jpeg differ
diff --git a/index.html b/index.html
index 8adde02..328cf57 100755
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@
     <!-- Main jumbotron for a primary marketing message or call to action -->
     <div class="jumbotron">
       <div class="container">
-        <h1>Hello, world!</h1>
+          <h1>Hello, world!</h1>
         <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
         <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
       </div>
@@ -65,10 +65,20 @@ <h1>Hello, world!</h1>
       <!-- Example row of columns -->
       <div class="row">
         <div class="col-md-4">
-          <h2>Heading</h2>
-          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+          <h2>Friends</h2>
+            <p>(35)</p>
+        <div class="friends">
+            <div class="each-friend friend-1"> Jane Doe</div>
+                <img src="images/blondelady.jpeg">
+            <div class="each-friend friend-2"> Josi Doe</div>
+                <img src="images/brunettelady.jpg">
+            <div class="each-friend friend-3"> Jim Doe</div>
+                <img src="images/brunetteman.jpeg">
+        </div>
         </div>
+
+
+
         <div class="col-md-4">
           <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>