diff --git a/README.md b/README.md
index 4eddb21..f36cebd 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 Listen 1 (Chrome Extension) V1.4.0 
 ==========
-（最后更新于2018年02月14日）
+（最后更新于2018年02月18日）
 
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
 
@@ -45,6 +45,10 @@ Firefox打包安装
 更新日志
 -------
 
+`2018-02-18`
+
+* 增加歌曲主页，点击封面可进入（特别感谢@iparanoid提供歌曲页面UI设计）
+
 `2018-02-15`
 
 * 修复随机播放在播放列表播放结束后自动停止的问题，开启无限洗脑循环（感谢@sunjie21的提交）
diff --git a/css/player.css b/css/player.css
index 18ec4fe..10d3cb0 100644
--- a/css/player.css
+++ b/css/player.css
@@ -535,7 +535,7 @@ em, i {
     right: 0px;
     _right: 0px;
     height: 349px;
-    width: 100%;
+    width: 60%;
     background-color: #121212;
 }
 
@@ -544,7 +544,6 @@ em, i {
     padding-left: 0px;
     height: 308px;
     overflow-y: scroll;
-    width: 60%;
     margin-bottom: 0px;
 }
 
@@ -638,7 +637,7 @@ li {
 .menu .add-all {
     display: inline-block;
     position: absolute;
-    left: 377px;
+    left: 335px;
     top: 9px;
 }
 
@@ -646,7 +645,7 @@ li {
 .menu .remove-all {
     display: inline-block;
     position: absolute;
-    left: 454px;
+    left: 410px;
     top: 9px;
 }
 
@@ -738,13 +737,13 @@ li {
     max-height:100%;
 }
 
-.playlist-detail .detail-head-title {
+.detail-head-title {
     float: left;
     width: 100%;
     text-align: center;
 }
 
-.playlist-detail .detail-head-title a {
+.detail-head-title a {
     display: inline-block;
     text-indent: -9999px;
     width: 36px;
@@ -753,55 +752,55 @@ li {
     background: url(../images/player_large.png) no-repeat 0 9999px;
 }
 
-.playlist-detail .detail-head-title .play {
+.detail-head-title .play {
     background-position: 0px 0px;
 }
 
-.playlist-detail .detail-head-title .play:hover {
+.detail-head-title .play:hover {
     background-position: 0px -36px;
 }
 
-.playlist-detail .detail-head-title .add {
+.detail-head-title .add {
     background-position: -216px 0px;
 }
 
-.playlist-detail .detail-head-title .add:hover {
+.detail-head-title .add:hover {
     background-position: -216px -36px;
 }
 
-.playlist-detail .detail-head-title .link {
+.detail-head-title .link {
     background-position: -250px 0px;
 }
 
-.playlist-detail .detail-head-title .link:hover {
+.detail-head-title .link:hover {
     background-position: -250px -36px;
 }
 
-.playlist-detail .detail-head-title .edit {
+.detail-head-title .edit {
     background-position: -288px 0px;
 }
 
-.playlist-detail .detail-head-title .edit:hover {
+.detail-head-title .edit:hover {
     background-position: -288px -36px;
 }
 
-.playlist-detail .detail-head-title .clone {
+.detail-head-title .clone {
     background-position: -144px 0px;
 }
 
-.playlist-detail .detail-head-title .clone:hover {
+.detail-head-title .clone:hover {
     background-position: -144px -36px;
 }
 
-.playlist-detail .detail-head-title .merge {
+.detail-head-title .merge {
     background-position: -324px 0px;
 }
 
-.playlist-detail .detail-head-title .merge:hover {
+.detail-head-title .merge:hover {
     background-position: -324px -36px;
 }
 
-.playlist-detail .detail-head-title .ply:hover {
+.detail-head-title .ply:hover {
     background-position: -40px -204px;
 }
 
@@ -816,6 +815,67 @@ li {
     margin-right: 14px;
 }
 
+.playsong-detail .detail-head {
+    width: 390px;
+    position: fixed;
+    margin-bottom: 20px;
+}
+
+.playsong-detail .detail-songinfo {
+    padding-left: 440px;
+    padding-right: 55px;
+} 
+
+.playsong-detail .detail-head .detail-head-cover {
+    margin: 0 auto;
+    width: 200px;
+}
+
+.playsong-detail .detail-head .detail-head-cover img {
+    width: 240px;
+    height: 240px;
+}
+
+.playsong-detail .detail-songinfo h2 {
+    font-size: 22px;
+}
+
+.playsong-detail .detail-songinfo .info {
+    border-bottom: solid #444 1px;
+    margin-bottom: 5px;
+    padding-bottom: 10px;
+}
+.playsong-detail .detail-songinfo .info span{
+    color: #9b9b9b;
+    margin-right: 10px;
+}
+.playsong-detail .detail-songinfo .info span.album {
+    margin-left: 30px;
+}
+.playsong-detail .lyric {
+    color: #999; /* IE8 proofing */
+    color: rgba(255,255,255,.5);
+    text-align: left;
+    width: 100%;
+    display: inline-block;
+    height: 410px;
+    overflow-y: scroll;
+    position: relative;
+    font-size: 15px;
+}
+
+.playsong-detail .lyric p{
+    min-height: 20px;
+}
+
+.playsong-detail .lyric .placeholder{
+    height: 50px;
+}
+
+.playsong-detail .lyric .highlight{
+    color: #ffffff;
+}
+
 .detail-songlist {
     padding-left: 0px;
     text-align: left;
diff --git a/js/app.js b/js/app.js
index 86dcf62..4a460bd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -128,13 +128,28 @@
       $scope.playlist_title = '';
       $scope.playlist_source_url = '';
       $scope.songs = [];
+      $scope.window_type = 'list';
     };
 
     $scope.showWindow = function(url){
+      if ($scope.window_url_stack.length > 0 &&  $scope.window_url_stack[$scope.window_url_stack.length-1] == url) {
+        return;
+      }
       $scope.is_window_hidden = 0;
       $scope.resetWindow();
+      
+      if ($scope.window_url_stack.length > 0 && $scope.window_url_stack[$scope.window_url_stack.length-1] == '/now_playing') {
+        // if now playing is top, pop it
+        $scope.window_url_stack.splice(-1,1);
+      }
 
+      if (url == '/now_playing') {
+        $scope.window_type = 'track';
+        $scope.window_url_stack.push(url);
+        return;
+      }
       $scope.window_url_stack.push(url);
+
       loWeb.get(url).success(function(data) {
           if (data.status == '0') {
             Notification.info(data.reason);  
@@ -147,6 +162,7 @@
           $scope.playlist_source_url = data.info.source_url;
           $scope.list_id = data.info.id;
           $scope.is_mine = (data.info.id.slice(0,2) == 'my');
+          $scope.window_type = 'list';
       });
     };
 
@@ -164,6 +180,11 @@
       else {
         $scope.resetWindow();
         var url = $scope.window_url_stack[$scope.window_url_stack.length-1];
+
+        if (url == '/now_playing') {
+          $scope.window_type = 'track';
+          return;
+        }
         loWeb.get(url).success(function(data) {
             $scope.songs = data.tracks;
             $scope.list_id = data.info.id;
@@ -959,7 +980,8 @@
           var lineHeight = 20;
           var lineElement = $(".lyric p")[lastObject.lineNumber];
           var windowHeight = 270;
-          var offset = lineElement.offsetTop - windowHeight/2;
+          var AdditionOffset = 4;
+          var offset = lineElement.offsetTop - windowHeight/2 + AdditionOffset;
           $(".lyric").animate({ scrollTop: offset+"px" }, 500);
           $scope.lyricLineNumber = lastObject.lineNumber;
         }
diff --git a/js/provider/xiami.js b/js/provider/xiami.js
index c9b29b9..c3389d7 100644
--- a/js/provider/xiami.js
+++ b/js/provider/xiami.js
@@ -113,7 +113,7 @@ var xiami = (function() {
             }
             var location = data.data.trackList[0].location;
             sound.url = caesar(location);
-            track.img_url = data.data.trackList[0].pic;
+            track.img_url = xm_retina_url(data.data.trackList[0].pic);
             track.album = data.data.trackList[0].album_name;
             track.album_id = 'xmalbum_' + data.data.trackList[0].album_id;
             track.lyric_url = data.data.trackList[0].lyric_url;
diff --git a/listen1.html b/listen1.html
index 700979e..0fae8f6 100644
--- a/listen1.html
+++ b/listen1.html
@@ -43,7 +43,7 @@
   </head>
 
   <body ng-controller="NavigationController">
-
+    <div ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
     <!-- dialog -->
     <div class="shadow" ng-hide="is_dialog_hidden==1"></div>
     <div class="dialog" ng-hide="is_dialog_hidden==1" ng-style="myStyle">
@@ -357,7 +357,6 @@
       </div>
     </div>
 
-
     <!-- track list window -->
     <div class="site-wrapper" ng-hide="is_window_hidden==1">
       <div class="cover-container container-placeholder">
@@ -367,7 +366,7 @@
       </div>
       <div class="site-wrapper-innerd" resize>
         <div class="cover-container" >
-          <div class="playlist-detail">
+          <div class="playlist-detail" ng-show="window_type=='list'">
             <div class="detail-head">
               <div class="detail-head-cover">
                 <img ng-src="{{ cover_img_url }}">
@@ -400,13 +399,36 @@
               </li>
             </ul>
           </div>
+          <div class="playsong-detail" ng-show="window_type=='track'">
+            <div class="detail-head">
+              <div class="detail-head-cover">
+                <img ng-src="{{ currentPlaying.img_url  }}">
+              </div>
+              <div class="detail-head-title">
+                
+<!--                 <a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
+                <a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a> -->
+              </div>
+            </div>
+            <ul class="detail-songinfo">
+              <h2>{{ currentPlaying.title }}</h2>
+              <div class="info">
+                <span>歌手: </span><a class="" ng-click="showPlaylist(currentPlaying.artist_id)">{{ currentPlaying.artist }}</a><span class="album">专辑: </span><a ng-click="showPlaylist(currentPlaying.album_id)">{{ currentPlaying.album }}</a>
+              </div>
+              <div class="lyric">
+                 <div class="placeholder"></div>
+                 <p ng-repeat="line in lyricArray track by $index" ng-class="{ 'highlight': line.lineNumber == lyricLineNumber }" >{{ line.content }} </p>
+                 <div style="placeholder"></div>
+              </div>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
 
 
     <!-- page footer -->
-    <div class="mastfoot" ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
+    <div class="mastfoot">
       <div class="m-playbar" >
         <div class="btns">
           <a class="previous" title="上一首([)" prev-track >上一首([)</a>
@@ -417,12 +439,13 @@
         <div class="head">
           <!-- <img ng-src="{{ currentPlaying.img_url }}" err-src="images/placeholder.png"> -->
            <img ng-src="{{ currentPlaying.img_url }}">
-          <a ng-click="showPlaylist(currentPlaying.album_id)" class="mask"></a>
+          <!-- <a ng-click="showPlaylist(currentPlaying.album_id)" class="mask"></a> -->
+          <a ng-click="showWindow('/now_playing')" class="mask"></a> 
         </div>
 
         <div class="maininfo">
           <div class="words">
-            <a class="overflowhide name notextdeco floatleft" title="{{currentPlaying.title}}">{{currentPlaying.title}}</a>
+            <a ng-click="showWindow('/now_playing')" class="overflowhide name notextdeco floatleft" title="{{currentPlaying.title}}">{{currentPlaying.title}}</a>
             <span class="by overflowhide floatleft">
               <span title="{{ currentPlaying.artist }}">
                 <a class="" ng-click="showPlaylist(currentPlaying.artist_id)">{{ currentPlaying.artist }}</a>
@@ -477,14 +500,9 @@
               <div class="singer" ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</div>
             </li>
           </ul>
-          <div class="lyric">
-             <div class="placeholder"></div>
-             <p ng-repeat="line in lyricArray track by $index" ng-class="{ 'highlight': line.lineNumber == lyricLineNumber }" >{{ line.content }} </p>
-             <div style="placeholder"></div>
-          </div>
         </div>
       </div>
     </div>
-
+  </div>
   </body>
 </html>