diff --git a/docs/images/3dparts-b.jpg b/docs/images/3dparts-b.jpg
new file mode 100644
index 0000000..1192d68
Binary files /dev/null and b/docs/images/3dparts-b.jpg differ
diff --git a/docs/images/3dparts-s.jpg b/docs/images/3dparts-s.jpg
new file mode 100644
index 0000000..21213d0
Binary files /dev/null and b/docs/images/3dparts-s.jpg differ
diff --git a/docs/index.html b/docs/index.html
index 55885b0..7f0e462 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,8 +4,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <title>Hexapod</title>
+    <meta name="description" content="Hexapod is an Robotic project for Personal/Hobby Maker, using Raspberry Pi (RPi) or Linkit 7697 as its controller, also iOS/Android remote controllable">
+    <title>Hexapod: Main page</title>
 
     <link rel="shortcut icon" type="image/png" href="images/icon-b.png" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@@ -18,12 +18,26 @@
         user-select: none;
       }
 
+      .bd-placeholder-img img {
+        display: block;
+        margin-left:auto;
+        margin-right:auto;
+      }
+
       .jumbotron {
         padding-top: 3rem;
         padding-bottom: 3rem;
         margin-bottom: 0;
         min-height: 300px;
       }
+      @media (orientation: portrait) {
+        .jumbotron {
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          margin-bottom: 0;
+          min-height: 200px;
+        }
+      }
 
       .text-outlined {
         color: black;
@@ -46,6 +60,16 @@
         font-size: 1.2rem;
         max-width: 30rem;
       }
+      @media (orientation: portrait) {
+        .jumbotron-heading {
+          font-size: 2rem;
+          font-weight: 700;
+        }
+        .jumbotron-text {
+          font-size: 1rem;
+          max-width: 30rem;
+        }
+      }
 
       footer {
         padding-top: 3rem;
@@ -142,6 +166,21 @@
               </div>
             </div>
 
+            <div class="col-md-6">
+              <div class="card mb-4 shadow-sm">
+                <div class="bd-placeholder-img card-img-top bg-dark" width="100%" height="300">
+                  <img src="images/3dparts-s.jpg"/>
+                </div>
+                <div class="card-body">
+                  <p class="card-text">3D parts<br>Parts in <font color=blue>Blue</font> rectangle are for "Body"<br/>Parts in <font color=red>Red</font> rectangle are for "one Leg"</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                      <a href="images/3dparts-b.jpg" class="btn btn-sm btn-outline-secondary">Detail Image</a>
+                      <small class="text-muted">2019/3/23</small>
+                    </div>
+                  </div>
+              </div>
+            </div>
+
             <div class="col-md-6">
               <div class="card mb-4 shadow-sm">
                 <iframe class="bd-placeholder-img card-img-top" width="100%" height="300" src="https://www.youtube.com/embed/EhIvYd5yoXo" frameborder="0" allow="autoplay; encrypted-media"></iframe>        
