diff --git a/css/style.css b/css/style.css
index abfdabe..c5b0cb7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -49,6 +49,7 @@ nav     {
 nav ul   {
   list-style: none;
   margin: 0;
+  padding: 0;
 }
 nav ul li {
   display: inline-block;
@@ -89,6 +90,8 @@ footer img   {
 .hero-content   {
   color: #FFF;
   padding-top: 130px;
+  padding-left: 10%;
+  padding-right: 10%;
 }
 .hero-content h1   {
   font-size: 100px;
@@ -136,7 +139,7 @@ footer img   {
 /* feature boxes */
 .feature-box   {
   display: inline-block;
-  width: 33%;
+  width: 32%;
   padding: 20px 30px;
 }
 .feature-box img  {
@@ -155,7 +158,7 @@ footer img   {
 /* testimonial boxes */
 .testimonial-box   {
   display: inline-block;
-  width: 33%;
+  width: 32%;
   padding: 20px 30px;
 }
 .testimonial-content   {
@@ -182,3 +185,69 @@ footer img   {
 .testimonial-author span {
   font-size: 14px;
 }
+
+/* responsive */
+/* mobile devices */
+@media screen and (max-width:768px) {
+  body   {
+    font-size: 14px;
+  }
+
+  /* header responsive */
+  #logo   {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  nav     {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+  nav a   {
+    font-size: 12px;
+  }
+
+  /* hero responsive */
+  .hero       {
+    min-height: 300px;
+  }
+  .hero-content   {
+    padding-top: 80px;
+  }
+  .hero-content h1     {
+    font-size: 30px;
+  }
+  .hero-content p      {
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+  .hero-content a      {
+    font-size: 14px;
+    padding: 5px 12px;
+    border-width: 1px;
+    background: #FFF;
+    color: #333;
+  }
+
+  /* site section responsive */
+  .site-section-inside {
+    width: 95%;
+  }
+  .section-header h2   {
+    font-size: 22px;
+  }
+
+  /* feature box responsive */
+  .feature-box   {
+    display: block;
+    width: 100%;
+  }
+
+  /* testimonial box responsive */
+  .testimonial-box   {
+    display: block;
+    width: 100%;
+  }
+}
diff --git a/img/ryan.jpeg b/img/ryan.jpeg
new file mode 100644
index 0000000..2ea70a1
Binary files /dev/null and b/img/ryan.jpeg differ
diff --git a/index.html b/index.html
index 59f12fd..69b0930 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
 <head>
     <title>My Awesome Website</title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <!-- attach our stylesheet -->
     <link rel="stylesheet" href="css/style.css">
 </head>
@@ -36,7 +38,7 @@
         <div class="hero">
             <!-- content for the hero -->
             <div class="hero-content">
-                <h1 class="hero-title">Here is Title</h1>
+                <h1>Making Sites Look Easy</h1>
                 <p>The best and most comprehensive website ever.</p>
 
                 <a href="#">Learn More</a>
@@ -108,9 +110,9 @@ <h5>Holly Lloyd</h5>
                     Their service is by far the most influential I've ever seen.
                 </div>
                 <div class="testimonial-author">
-                    <img src="img/brad.jpg" alt="Brad Green">
-                    <h5>Brad Green</h5>
-                    <span>King of Angular</span>
+                    <img src="img/ryan.jpeg" alt="Ryan Chenkie">
+                    <h5>Ryan Chenkie</h5>
+                    <span>King of Auth0</span>
                 </div>
             </div>
 
