diff --git a/public/css/style.css b/public/css/style.css
index bb603de..658edf4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -6,6 +6,7 @@ body {
     padding: 50px;
     font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
+
 code {
     background-color: rgba(0, 0, 0, 0.08);
     border-radius: 3px;
@@ -16,6 +17,7 @@ code {
     padding: 1px 6px;
     vertical-align: baseline;
 }
+
 .bookmark {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -24,14 +26,20 @@ code {
     color: #212121;
     border: 1px solid transparent;
 }
+
 .bookmarkTitle {
+    color: #333;
+    font-size: 16px;
+    line-height: 24px;
+    display: -webkit-box;
     text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
     display: -webkit-box;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    height: 40px;
-    line-height: 20px;
 }
+
 .bookmarkNormalHover {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -42,12 +50,15 @@ code {
     cursor: pointer;
     border: 1px solid transparent;
 }
+
 .bookmarkOperaterHover {
     cursor: pointer;
 }
+
 .tags {
     cursor: default;
 }
+
 .bookmarkEditHover {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -57,39 +68,81 @@ code {
     cursor: default;
     border: 1px dashed #3388FF;
 }
+
 .bookmarkInfo {
-    cursor: url('../images/detail.ico'),auto;
+    cursor: url('../images/detail.ico'), auto;
 }
+
 .img-fixed-size {
     width: 16px;
     height: 16px;
 }
+
 td {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }
+
 table {
     table-layout: fixed;
 }
+
 .wrap {
     white-space: nowrap;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     overflow: hidden;
 }
+
 .js-navigate-bookmark a {
     color: #212121;
 }
+
 .ui.menu .selected.item {
     background: rgba(1, 1, 1, 0.05);
 }
+
 img.operator {
     width: 16px;
     height: 16px
 }
+
 .js-bookmark-info .content img {
-    max-width:100%;
-    max-height:100%;
+    max-width: 100%;
+    max-height: 100%;
     padding-right: 20px;
 }
+
+.hot-image {
+    max-width: 100%;
+    max-height: 160px;
+    min-height: 160px;
+    background-color: yellow;
+    overflow: hidden;
+}
+
+.sourceName {
+    display: inline-block;
+    position: relative;
+    top: 4px;
+    max-width: 55px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: #333;
+}
+
+.favCount {
+    position: relative;
+    top: 1px;
+    font-size: 12px;
+    color: #BFC0C6;
+}
+
+.urlSpan {
+    word-wrap: break-word;
+    word-break: break-all;
+    cursor:default;
+}
diff --git a/public/index.html b/public/index.html
index 35cad58..eb7cf75 100644
--- a/public/index.html
+++ b/public/index.html
@@ -57,6 +57,7 @@
         <script src="/scripts/controllers/edit-controller.js"></script>
         <script src="/scripts/controllers/bookmark-info-controller.js"></script>
         <script src="/scripts/controllers/search-controller.js"></script>
+        <script src="/scripts/controllers/hot-controller.js"></script>
         <script src="/scripts/externe/semantic.min.js"></script>
         <script src="/scripts/externe/calendar.min.js"></script>
         <script src="/scripts/externe/jquery.uploadfile.min.js"></script>
diff --git a/public/scripts/app-angular.js b/public/scripts/app-angular.js
index 6b0ff01..f8ee529 100644
--- a/public/scripts/app-angular.js
+++ b/public/scripts/app-angular.js
@@ -14,6 +14,11 @@ app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
             },
             controller: 'bookmarksCtr'
         })
+        .state('hot', {
+            url: '/hot',
+            templateUrl: '/views/hot.html',
+            controller: 'hotCtr'
+        })
         .state('search', {
             url: '/search',
             templateUrl: '/views/search.html',
diff --git a/public/scripts/controllers/bookmark-info-controller.js b/public/scripts/controllers/bookmark-info-controller.js
index 0af33b3..7014f98 100644
--- a/public/scripts/controllers/bookmark-info-controller.js
+++ b/public/scripts/controllers/bookmark-info-controller.js
@@ -9,6 +9,8 @@ app.controller('bookmarkInfoCtr', ['$scope', '$state', '$timeout', '$sce', '$win
         $('.ui.modal.js-bookmark-info').modal({
             closable: false,
         }).modal('setting', 'transition', transition()).modal('show');
+        bookmark.favicon = bookmark.favicon || ('http://g.soz.im/'+bookmark.url +'/cdn.ico');
+        bookmark.image = bookmark.image || ('./images/snap/'+bookmark.id+'.png');
         $scope.bookmark = bookmark;
         $scope.bookmark.description = $sce.trustAsHtml(bookmark.description);
         $scope.content = '';
diff --git a/public/scripts/controllers/bookmarks-controller.js b/public/scripts/controllers/bookmarks-controller.js
index de43b6c..4bf0b23 100644
--- a/public/scripts/controllers/bookmarks-controller.js
+++ b/public/scripts/controllers/bookmarks-controller.js
@@ -219,6 +219,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
                     }
                     if (params.showStyle == 'card') {
                         data.bookmarksCreatedAt.forEach(bookmark => {
+                            bookmark.edit = false;
                             $scope.bookmarks.push(bookmark);
                         })
                         $scope.loadBusy = false;
diff --git a/public/scripts/controllers/hot-controller.js b/public/scripts/controllers/hot-controller.js
new file mode 100644
index 0000000..a001404
--- /dev/null
+++ b/public/scripts/controllers/hot-controller.js
@@ -0,0 +1,193 @@
+app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'ngDialog', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, ngDialog, bookmarkService, pubSubService) {
+    console.log("Hello hotCtr...");
+    $scope.bookmarks = []; // 书签数据
+    $scope.bookmarkNormalHover = false;
+    $scope.bookmarkEditHover = false;
+    const perPageItems = 20;
+    $scope.totalPages = 0;
+    $scope.currentPage = 1;
+    $scope.inputPage = '';
+    $scope.loadBusy = false;
+    $scope.curDay = 0;
+    $scope.toastrId = 0;
+
+    bookmarkService.autoLogin()
+        .then((data) => {
+            var login = data.logined;
+            var index = login ? 4 : 2;
+            pubSubService.publish('Common.menuActive', {
+                login: login,
+                index: index
+            });
+        })
+        .catch((err) => {
+            console.log('autoLogin err', err)
+        });
+
+    getBookmarks();
+
+    $scope.jumpToUrl = function(url) {
+        $window.open(url, '_blank');
+    }
+
+    $scope.favoriteBookmark = function(b) {
+        var bookmark = {}
+        bookmark.description = '';
+        bookmark.title = b.title;
+        bookmark.url = b.url;
+        bookmark.public = 1;
+        bookmark.click_count = 1;
+
+        bookmarkService.favoriteBookmark(bookmark)
+            .then((data) => {
+                pubSubService.publish('EditCtr.inserBookmarsSuccess', data);
+                if (data.title) {
+                    toastr.success('[ ' + data.title + ' ] 收藏成功！', "提示");
+                } else {
+                    toastr.error('[ ' + bookmark.title + ' ] 收藏失败！', "提示");
+                }
+            })
+            .catch((err) => {
+                toastr.error('[ ' + bookmark.title + ' ] 收藏失败，' + JSON.stringify(err), "提示");
+            });
+    }
+
+    $scope.storeBookmark = function(bookmark) {
+        var b = $.extend(true, {}, bookmark); // 利用jQuery执行深度拷贝
+        pubSubService.publish('TagCtr.storeBookmark', b);
+    }
+
+    $scope.copy = function(id, url) {
+        var clipboard = new Clipboard('#hoturl' + id, {
+            text: function() {
+                return url;
+            }
+        });
+
+        clipboard.on('success', function(e) {
+            toastr.success(url + '<br/>已复制到您的剪切板', "提示");
+            clipboard.destroy();
+        });
+
+        clipboard.on('error', function(e) {
+            toastr.error(url + '<br/>复制失败', "提示");
+            clipboard.destroy();
+        });
+    }
+
+    $scope.detailBookmark = function(b) {
+        var bookmark = $.extend(true, {}, b); // 利用jQuery执行深度拷贝
+        bookmark.own = false;
+        bookmark.tags = [{
+            id: -1,
+            name: '热门收藏'
+        }];
+        console.log(JSON.stringify(bookmark));
+        pubSubService.publish('TagCtr.showBookmarkInfo', bookmark);
+    }
+
+    $scope.loadCardData = function() {
+        console.log('loadCardData.........')
+        if (!$scope.loadBusy) {
+            var menusScope = $('div[ng-controller="menuCtr"]').scope();
+            var login = (menusScope && menusScope.login) || false;
+            if (login) {
+                getBookmarks();
+            } else {
+                toastr.remove();
+                $scope.toastrId = toastr.info('想要查看更多热门标签，请先登录！', "提示");
+            }
+        }
+    }
+
+    function getBookmarks() {
+        $scope.loadBusy = true;
+        var requireData = {
+            userId: null,
+            lastupdataTime: new Date().getTime(),
+            pageNo: 1,
+            pageSize: 1000,
+            sort: 'desc',
+            renderType: 0,
+            date: CurentDate($scope.curDay),
+            idfa: "d4995f8a0c9b2ad9182369016e376278",
+            os: "ios",
+            osv: "9.3.5"
+        }
+        var api = "https://api.shouqu.me/api_service/api/v1/daily/dailyMark";
+        $.ajax({
+            url: api,
+            type: 'post',
+            data: requireData,
+            success: function(json) {
+                // console.log('success............', json, JSON.stringify(json.data.list[0]) );
+                var alterRex = "/mmbiz.qpic.cn|images.jianshu.io|zhimg.com/g";
+                var alterImg = "./images/snap/default.png"
+                $timeout(function() {
+                    $scope.loadBusy = false;
+                    if (json.code == 200) {
+                        var bookmarkList = json.data.list;
+                        bookmarkList.forEach((bookmark) => {
+                            var b = {};
+                            b.title = bookmark.title;
+                            b.url = bookmark.url;
+                            b.favicon = bookmark.sourceLogo;
+                            b.from = bookmark.sourceName;
+                            b.image = alterImg;
+                            if (bookmark.imageList.length >= 1) {
+                                b.image = (json.data.pageNo == 1 ? (bookmark.imageList[0].url.match(alterRex) != null ? alterImg : bookmark.imageList[0].url) : alterImg);
+                            }
+                            b.click_count = bookmark.favCount;
+                            b.created_at = $filter('date')(new Date(bookmark.updatetime), "yyyy-MM-dd HH:mm:ss");
+                            b.last_click = $filter('date')(new Date(bookmark.createtime), "yyyy-MM-dd HH:mm:ss");
+                            b.id = bookmark.id;
+
+                            b.edit = false;
+                            $scope.bookmarks.push(b);
+                        })
+                        $scope.curDay--;
+                    } else {
+                        toastr.error('获取热门书签失败！失败原因：' + json.message, "提示");
+                    }
+                }, 100);
+            },
+            error: function(json) {
+                toastr.error('获取热门书签失败！失败原因：' + json.message, "提示");
+                $scope.loadBusy = false;
+            }
+        });
+
+        var menusScope = $('div[ng-controller="menuCtr"]').scope();
+        var login = (menusScope && menusScope.login) || false;
+        var index = login ? 4 : 2;
+        pubSubService.publish('Common.menuActive', {
+            login: login,
+            index: index
+        });
+    }
+
+    function CurentDate(i) {
+        if (i == undefined) {
+            i = 0;
+        }
+        var now = new Date();
+        now.setTime(now.getTime() + i * 24 * 60 * 60 * 1000);
+        var year = now.getFullYear(); //年
+        var month = now.getMonth() + 1; //月
+        var day = now.getDate(); //日
+        var clock = year + "年" + month + "月" + day + "日";
+        return (clock);
+    }
+
+    function transition() {}
+
+    function animation() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        return t;
+    }
+}]);
diff --git a/public/scripts/controllers/menus-controller.js b/public/scripts/controllers/menus-controller.js
index 5401fbd..59ddfa2 100644
--- a/public/scripts/controllers/menus-controller.js
+++ b/public/scripts/controllers/menus-controller.js
@@ -25,6 +25,9 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
     }, {
         uiSref: 'settings',
         title: '设置'
+    }, {
+        uiSref: 'hot',
+        title: '热门收藏'
     }];
 
     // 未登陆显示的菜单数据
@@ -34,6 +37,9 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
     }, {
         uiSref: 'login',
         title: '登录|注册'
+    }, {
+        uiSref: 'hot',
+        title: '热门收藏'
     }];
 
     /**
diff --git a/public/views/bookmark-info.html b/public/views/bookmark-info.html
index 625a873..4ebd6e3 100644
--- a/public/views/bookmark-info.html
+++ b/public/views/bookmark-info.html
@@ -6,7 +6,7 @@
     <div class="content">
         <div class="ui grid">
             <div class="six wide column">
-                <img class="bordered" ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
+                <img class="bordered" ng-src="{{bookmark.image}}" err-src="./images/snap/default.png"/>
             </div>
             <div class="one wide column"></div>
             <div class="nine wide column">
@@ -14,13 +14,13 @@
                     <div class="one column row">
                         <div class="column">
                             <img
-                                class="ui ui middle aligned tiny image"
-                                ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico"
-                                style="width:16px;height:16px;cursor:pointer;"
+                                class="ui middle aligned mini image"
+                                ng-src="{{bookmark.favicon}}"
+                                style="width:16px;height:16px;padding:0;cursor:pointer;"
                                 ng-click="jumpToUrl(bookmark.url, bookmark.id)"
                                 favicon-err="./images/favicon/{{bookmark.id}}.ico"
                                 title="点击跳转到原页面">
-                            <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer;" title="点击跳转到原页面">网页地址</span>：<span  title="点击复制链接" ng-click="copy(bookmark.id, bookmark.url)" id="detailurl{{bookmark.id}}" style="cursor:default;">{{bookmark.url}}<span>
+                            <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer;" title="点击跳转到原页面">网页地址</span>：<span title="点击复制链接" ng-click="copy(bookmark.id, bookmark.url)" id="detailurl{{bookmark.id}}" class="urlSpan">{{bookmark.url}}<span>
                         </div>
                     </div>
                     <div class="two column row">
diff --git a/public/views/bookmarks.html b/public/views/bookmarks.html
index d0db863..04385d0 100644
--- a/public/views/bookmarks.html
+++ b/public/views/bookmarks.html
@@ -100,33 +100,27 @@
     </tfoot>
 </table>
 <div class="ui segment js-segment-card" ng-if="showStyle === 'card'">
-    <div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
-        <div class="card" ng-repeat="bookmark in bookmarks">
-            <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
-                <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
-            </div>
-            <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
+    <div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
+        <div class="card" ng-repeat="bookmark in bookmarks" id="{{bookmark.id}}">
+            <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="max-height:70px;cursor:pointer">
                 <div class="description bookmarkTitle">
                     {{bookmark.title}}
                 </div>
             </div>
-            <div class="extra content tags">
+            <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer">
+                <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
+            </div>
+            <div class="extra content tags" ng-show="!bookmark.edit" style="height:50px;">
                 <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="jumpToTags(tag.id)">
                     {{ tag.name }}
                 </div>
+                <i class="ellipsis horizontal icon right floated" style="margin-top:6px;" ng-mouseover="bookmark.edit=true;"></i>
             </div>
-            <div class="extra content bookmarkInfo" ng-click="detailBookmark(bookmark);$event.stopPropagation()" title="点击进入书签详情页面">
-                <span class="left floated like">
-                    <i class="add to calendar icon"></i>
-                    {{ bookmark.created_at }}
-                </span>
-                <!-- <span class="left floated like">
-                    <i class="pointing up icon"></i>
-                    {{ bookmark.click_count }}
-                </span> -->
-                <!-- <span class="right floated">
-                    <img class="ui mini spaced image" style="cursor:default;width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark);$event.stopPropagation()" title="详情">
-                </span> -->
+            <div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;" style="height:50px;">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(bookmark.id, bookmark.url)" title="复制链接">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
             </div>
         </div>
     </div>
diff --git a/public/views/hot.html b/public/views/hot.html
new file mode 100644
index 0000000..23a8f4b
--- /dev/null
+++ b/public/views/hot.html
@@ -0,0 +1,28 @@
+<div class="ui segment js-hot-card" style="min-height:300px;">
+    <div class="ui five  stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
+        <div class="card" ng-repeat="bookmark in bookmarks">
+            <div class="content" style="max-height:70px;cursor:pointer" ng-click="jumpToUrl(bookmark.url)">
+                <div class="description bookmarkTitle">
+                    {{bookmark.title}}
+                </div>
+            </div>
+            <div class="image hot-image" href="{{ bookmark.url }}" style="cursor:pointer" ng-click="jumpToUrl(bookmark.url)">
+                <img ng-src="{{bookmark.image}}" err-src="./images/snap/default.png" />
+            </div>
+            <div class="extra content" ng-show="!bookmark.edit">
+                <img class="ui avatar image" style="width:16px;height:16px;" ng-src="{{bookmark.favicon}}">
+                <span class="sourceName">{{ bookmark.from }}</span>
+                <span class="favCount">·{{ bookmark.click_count }}人收藏</span>
+                <i class="ellipsis horizontal icon right floated" style="margin-top:6px;"ng-mouseover="bookmark.edit=true;"></i>
+            </div>
+            <div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/copy.png" id="hoturl{{$index}}" ng-click="copy($index, bookmark.url)" title="复制链接">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
+            </div>
+        </div>
+    </div>
+    <div class="ui massive text centered inline loader" ng-class="{active:loadBusy, disabled:!loadBusy}" style="top:10px;">
+        正在加载中...</div>
+</div>