diff --git a/public/css/cover.css b/public/css/cover.css
index 0a731cd2..351babd0 100644
--- a/public/css/cover.css
+++ b/public/css/cover.css
@@ -247,6 +247,11 @@ input {
 .sort.desc {
     text-decoration: underline;
 }
+.ui-avatar {
+    border-radius: 15em;
+    height: auto;
+    width: 200px;
+}
 .ui-history-close {
     position: absolute;
     right: 14px;
diff --git a/public/js/cover.js b/public/js/cover.js
index dde0c679..a7ee855f 100644
--- a/public/js/cover.js
+++ b/public/js/cover.js
@@ -32,6 +32,7 @@ function pageInit() {
             $('.ui-signin').hide();
             $('.ui-or').hide();
             $('.ui-welcome').show();
+            $('.ui-avatar').prop('src',data.photo);
             $('.ui-name').html(data.name);
             $('.ui-signout').show();
             $(".ui-history").click();
@@ -41,6 +42,7 @@ function pageInit() {
             $('.ui-signin').slideDown();
             $('.ui-or').slideDown();
             $('.ui-welcome').hide();
+            $('.ui-avatar').prop('src','');
             $('.ui-name').html('');
             $('.ui-signout').hide();
             parseStorageToHistory(historyList, parseHistoryCallback);
diff --git a/public/views/index.ejs b/public/views/index.ejs
index 69b525e9..c8468848 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -77,6 +77,7 @@
                         <p>Below are history from browser</p>
                     </div>
                     <div class="ui-signout" style="display:none;">
+                        <img class="ui-avatar" />
                         <h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4>
                         <a href="<%- url %>/new" class="btn btn-default">New note</a> Or
                         <a href="#" class="btn btn-danger ui-logout">Sign Out</a>