diff --git a/public/css/gogs.css b/public/css/gogs.css
index d1b1e155a..f88b39639 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -445,7 +445,7 @@ html, body {
     padding: 0;
 }
 
-#gogs-repo-watching .dropdown-menu .dropdown-item:hover .dropdown-header {
+#gogs-repo-watching .dropdown-menu .dropdown-item:hover .dropdown-header, #gogs-repo-watching .dropdown-item .dropdown-header.text-primary {
     color: rgb(65, 131, 196);
     cursor: pointer;
 }
@@ -678,7 +678,7 @@ html, body {
 }
 
 .file-content .file-body.file-code .lines-num span {
-    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     line-height: 1.6;
     padding: 0 8px 0 10px;
     cursor: pointer;
@@ -783,6 +783,10 @@ html, body {
     width: 120px;
 }
 
+.commit-list .author {
+    min-width: 180px;
+}
+
 .guide-box pre, .guide-box .input-group {
     margin-top: 20px;
     margin-bottom: 30px;
diff --git a/public/js/app.js b/public/js/app.js
index 555410329..9a5a0d68a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -181,6 +181,7 @@ function initUserSetting() {
 }
 
 function initRepository() {
+    // guide box script
     (function () {
         var $guide = $('.guide-box');
         if ($guide.length) {
@@ -197,6 +198,40 @@ function initRepository() {
             // todo copy to clipboard
         }
     })();
+
+    // watching script
+    (function () {
+        var $watch = $('#gogs-repo-watching'),
+            watchLink = $watch.data("watch"),
+            unwatchLink = $watch.data("unwatch");
+        $watch.on('click', '.to-watch',function () {
+            if ($watch.hasClass("watching")) {
+                return false;
+            }
+            $.get(watchLink, function (json) {
+                if (json.ok) {
+                    $watch.find('.text-primary').removeClass('text-primary');
+                    $watch.find('.to-watch h4').addClass('text-primary');
+                    $watch.find('.fa-eye-slash').removeClass('fa-eye-slash').addClass('fa-eye');
+                    $watch.removeClass("no-watching").addClass("watching");
+                }
+            });
+            return false;
+        }).on('click', '.to-unwatch', function () {
+            if ($watch.hasClass("no-watching")) {
+                return false;
+            }
+            $.get(unwatchLink, function (json) {
+                if (json.ok) {
+                    $watch.find('.text-primary').removeClass('text-primary');
+                    $watch.find('.to-unwatch h4').addClass('text-primary');
+                    $watch.find('.fa-eye').removeClass('fa-eye').addClass('fa-eye-slash');
+                    $watch.removeClass("watching").addClass("no-watching");
+                }
+            });
+            return false;
+        });
+    })();
 }
 
 (function ($) {
diff --git a/templates/repo/nav.tmpl b/templates/repo/nav.tmpl
index e8685b08b..718c429a2 100644
--- a/templates/repo/nav.tmpl
+++ b/templates/repo/nav.tmpl
@@ -13,20 +13,24 @@
                         <span class="caret"></span>
                     </button>
                 </div>
-                <div class="btn-group {{if .IsRepositoryWatching}}watching{{end}}" id="gogs-repo-watching">
+                <div class="btn-group {{if .IsRepositoryWatching}}watching{{else}}no-watching{{end}}" id="gogs-repo-watching" data-watch="/{{.SignedUser.Name}}/{{.Repository.Name}}/action/watch" data-unwatch="/{{.SignedUser.Name}}/{{.Repository.Name}}/action/unwatch">
+                    {{if .IsRepositoryWatching}}
                     <button type="button" class="btn btn-default"><i class="fa fa-eye fa-lg fa-m"></i></button>
+                    {{else}}
+                    <button type="button" class="btn btn-default"><i class="fa fa-eye-slash fa-lg fa-m"></i></button>
+                    {{end}}
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                         <span class="caret"></span>
                         <span class="sr-only">Toggle Dropdown</span>
                     </button>
                     <div class="dropdown-menu" role="menu">
-                        <div class="dropdown-item text-left" data-val="not-watching">
-                            <h4 role="presentation" class="dropdown-header">Not Watching</h4>
+                        <div class="dropdown-item text-left to-unwatch">
+                            <h4 role="presentation" class="dropdown-header {{if not .IsRepositoryWatching}}text-primary{{end}}">Not Watching</h4>
                             <p class="description">You only receive notifications for conversations in which you participate or are @mentioned.</p>
                             <p class="divider"></p>
                         </div>
-                        <div class="dropdown-item text-left" data-val="watching">
-                            <h4 role="presentation" class="dropdown-header">Watching</h4>
+                        <div class="dropdown-item text-left to-watch">
+                            <h4 role="presentation" class="dropdown-header {{if .IsRepositoryWatching}}text-primary{{end}}">Watching</h4>
                             <p class="description">You receive notifications for all conversations in this repository.</p>
                         </div>
                     </div>