diff --git a/pinry-spa/src/App.vue b/pinry-spa/src/App.vue
index 92bce38..77e135f 100644
--- a/pinry-spa/src/App.vue
+++ b/pinry-spa/src/App.vue
@@ -24,4 +24,7 @@ export default {
   #app {
     background-color: #F5F5EB;
   }
+  .body {
+    font-family: 'Open Sans', sans-serif;
+  }
 </style>
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index 4a1f24b..457c07f 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -13,8 +13,27 @@
             <div v-bind:key="item.id" v-masonry-tile class="grid">
               <div class="grid-sizer"></div>
               <div class="gutter-sizer"></div>
-              <div class="grid-item">
+              <div class="pin-card grid-item">
                 <img :src="item.url" alt="item.description">
+                <div class="pin-footer">
+                  <div class="description" v-show="item.description"><p>{{ item.description }}</p></div>
+                  <div class="details">
+                    <div class="is-pulled-left">
+                      <img class="avatar" :src="item.avatar" alt="">
+                    </div>
+                    <div class="pin-info">
+                      <span class="dim">pined by&nbsp;<span>{{ item.author }}</span>&nbsp;in&nbsp;
+                      <template v-for="tag in item.tags">
+                        <span v-bind:key="tag" class="pin-tag">
+                          &nbsp;
+                          <router-link to="/tags/">{{ tag }}</router-link>
+                        </span>
+                      </template>
+                      </span>
+                    </div>
+                    <div class="is-clearfix"></div>
+                  </div>
+                </div>
               </div>
             </div>
           </template>
@@ -33,6 +52,9 @@ function createImageItem(pin) {
   image.url = pinHandler.escapeUrl(pin.image.thumbnail.image);
   image.id = pin.id;
   image.description = pin.description;
+  image.tags = pin.tags;
+  image.author = pin.submitter.username;
+  image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
   return image;
 }
 
@@ -67,7 +89,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+/* grid */
 .grid-sizer,
 .grid-item { width: 240px; }
 .grid-item {
@@ -76,6 +99,59 @@ export default {
 .gutter-sizer {
   width: 15px;
 }
+/* card */
+$pin-footer-position-fix: -6px;
+@mixin pin-detail-font-size{
+  font-size: 12px;
+}
+
+@mixin description-font {
+  @include pin-detail-font-size;
+  font-family: 'Georgia', 'Times', 'Times New Roman', serif;
+}
+
+@mixin secondary-font {
+  @include pin-detail-font-size;
+  color: #999;
+  font-weight: normal;
+}
+
+.pin-card{
+  > img {
+    border-radius: 3px 3px 0 0;
+  }
+  .avatar {
+    height: 30px;
+    width: 30px;
+    border-radius: 3px;
+  }
+}
+.pin-footer {
+  position: relative;
+  top: $pin-footer-position-fix;
+  background-color: white;
+  border-radius: 0 0 3px 3px ;
+  box-shadow: 0 1px 0 #bbb;
+  .description {
+    @include description-font;
+    padding: 8px;
+    border-bottom: 1px solid #DDDDDD;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .details {
+    @include secondary-font;
+    padding: 10px;
+    > .pin-info {
+      line-height: 16px;
+      width: 220px;
+    }
+    .pin-tag > a {
+      font-weight: bold;
+    }
+  }
+}
+
 /*pin container size fit*/
 /* Generated by python code:
 /* def fn(x):