diff --git a/src/api/artist.js b/src/api/artist.js
index 0d0fedc..c7fcad5 100644
--- a/src/api/artist.js
+++ b/src/api/artist.js
@@ -1,12 +1,16 @@
 import request from "@/utils/request";
+import { mapTrackPlayableStatus } from "@/utils/common";
 
 export function getArtist(id) {
   return request({
     url: "/artists",
     method: "get",
     params: {
-      id,
-    },
+      id
+    }
+  }).then(data => {
+    data.hotSongs = mapTrackPlayableStatus(data.hotSongs);
+    return data;
   });
 }
 
@@ -17,7 +21,7 @@ export function getArtistAlbum(params) {
   return request({
     url: "/artist/album",
     method: "get",
-    params,
+    params
   });
 }
 
@@ -31,8 +35,8 @@ export function toplistOfArtists(type = null) {
     url: "/toplist/artist",
     method: "get",
     params: {
-      type,
-    },
+      type
+    }
   });
 }
 
@@ -41,7 +45,7 @@ export function artistMv(id) {
     url: "/artist/mv",
     method: "get",
     params: {
-      id,
-    },
+      id
+    }
   });
 }
diff --git a/src/api/playlist.js b/src/api/playlist.js
index 49c5450..b33cfce 100644
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
@@ -1,11 +1,12 @@
 import request from "@/utils/request";
+import { mapTrackPlayableStatus } from "@/utils/common";
 
 export function recommendPlaylist(params) {
   // limit: 取出数量 , 默认为 30
   return request({
     url: "/personalized",
     method: "get",
-    params,
+    params
   });
 }
 export function dailyRecommendPlaylist(params) {
@@ -13,7 +14,7 @@ export function dailyRecommendPlaylist(params) {
   return request({
     url: "/recommend/resource",
     method: "get",
-    params,
+    params
   });
 }
 
@@ -23,7 +24,10 @@ export function getPlaylistDetail(id, noCache = false) {
   return request({
     url: "/playlist/detail",
     method: "get",
-    params,
+    params
+  }).then(data => {
+    data.playlist.tracks = mapTrackPlayableStatus(data.playlist.tracks);
+    return data;
   });
 }
 
@@ -34,7 +38,7 @@ export function highQualityPlaylist(params) {
   return request({
     url: "/top/playlist/highquality",
     method: "get",
-    params,
+    params
   });
 }
 
@@ -46,21 +50,21 @@ export function topPlaylist(params) {
   return request({
     url: "/top/playlist",
     method: "get",
-    params,
+    params
   });
 }
 
 export function playlistCatlist() {
   return request({
     url: "/playlist/catlist",
-    method: "get",
+    method: "get"
   });
 }
 
 export function toplists() {
   return request({
     url: "/toplist",
-    method: "get",
+    method: "get"
   });
 }
 
@@ -70,6 +74,6 @@ export function subscribePlaylist(params) {
   return request({
     url: "/playlist/subscribe",
     method: "get",
-    params,
+    params
   });
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 4c176b5..9127d6b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -70,6 +70,7 @@ export default {
       else this.$router.go(1);
     },
     goToSearchPage() {
+      if(!this.keywords) return;
       this.$router.push({
         name: "search",
         query: { keywords: this.keywords },
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index 5ee0077..22b4658 100644
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@@ -3,6 +3,12 @@
     <ContextMenu ref="menu">
       <div class="item" @click="play">Play</div>
       <div class="item" @click="playNext">Play Next</div>
+      <div class="item" @click="like" v-show="!isRightClickedTrackLiked">
+        Save to my Liked Songs
+      </div>
+      <div class="item" @click="like" v-show="isRightClickedTrackLiked">
+        Remove from my Liked Songs
+      </div>
     </ContextMenu>
     <TrackListItem
       v-for="track in tracks"
@@ -15,12 +21,13 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapMutations, mapState } from "vuex";
+import { likeATrack } from "@/api/track";
 import {
   playPlaylistByID,
   playAlbumByID,
   playAList,
-  appendTrackToPlayerList,
+  appendTrackToPlayerList
 } from "@/utils/play";
 
 import TrackListItem from "@/components/TrackListItem.vue";
@@ -30,7 +37,7 @@ export default {
   name: "TrackList",
   components: {
     TrackListItem,
-    ContextMenu,
+    ContextMenu
   },
   props: {
     tracks: Array,
@@ -38,17 +45,17 @@ export default {
     id: Number,
     itemWidth: {
       type: Number,
-      default: -1,
+      default: -1
     },
     dbclickTrackFunc: {
       type: String,
-      default: "default",
-    },
+      default: "default"
+    }
   },
   data() {
     return {
-      clickTrack: null,
-      listStyles: {},
+      rightClickedTrack: null,
+      listStyles: {}
     };
   },
   created() {
@@ -57,14 +64,18 @@ export default {
   },
   computed: {
     ...mapState(["liked"]),
+    isRightClickedTrackLiked() {
+      return this.liked.songs.includes(this.rightClickedTrack?.id);
+    }
   },
   methods: {
+    ...mapMutations(["updateLikedSongs"]),
     ...mapActions(["nextTrack", "playTrackOnListByID"]),
     openMenu(e, track) {
       if (!track.playable) {
         return;
       }
-      this.clickTrack = track;
+      this.rightClickedTrack = track;
       this.$refs.menu.openMenu(e);
     },
     playThisList(trackID) {
@@ -84,7 +95,7 @@ export default {
       } else if (this.type === "album") {
         playAlbumByID(this.id, trackID);
       } else if (this.type === "tracklist") {
-        let trackIDs = this.tracks.map((t) => t.id);
+        let trackIDs = this.tracks.map(t => t.id);
         playAList(trackIDs, this.tracks[0].ar[0].id, "artist", trackID);
       }
     },
@@ -94,7 +105,24 @@ export default {
     playNext() {
       appendTrackToPlayerList(this.clickTrack.id);
     },
-  },
+    like() {
+      this.likeASong(this.rightClickedTrack.id);
+    },
+    likeASong(id) {
+      let like = true;
+      let likedSongs = this.liked.songs;
+      if (likedSongs.includes(id)) like = false;
+      likeATrack({ id, like }).then(data => {
+        if (data.code !== 200) return;
+        if (like === false) {
+          this.updateLikedSongs(likedSongs.filter(d => d !== id));
+        } else {
+          likedSongs.push(id);
+          this.updateLikedSongs(likedSongs);
+        }
+      });
+    }
+  }
 };
 </script>
 
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 043bc37..62ce2c8 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -3,6 +3,7 @@
     class="track"
     :class="trackClass"
     :style="trackStyle"
+    :title="track.reason"
     @mouseover="focus = true"
     @mouseleave="focus = false"
   >
@@ -15,7 +16,7 @@
       >
         <svg-icon icon-class="play"></svg-icon>
       </button>
-      <span v-show="!focus">{{ track.no }}</span>
+      <span v-show="!focus || !track.playable">{{ track.no }}</span>
     </div>
     <div class="title-and-artist">
       <div class="container">
@@ -66,7 +67,6 @@
 
 <script>
 import { isLoggedIn } from "@/utils/auth";
-import { likeATrack } from "@/api/track";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -127,21 +127,7 @@ export default {
       this.$parent.playThisList(this.track.id);
     },
     likeThisSong() {
-      let id = this.track.id;
-      let like = true;
-      let likedSongs = this.$parent.liked.songs;
-      if (likedSongs.includes(id)) like = false;
-      likeATrack({ id, like }).then(() => {
-        if (like === false) {
-          this.$store.commit(
-            "updateLikedSongs",
-            likedSongs.filter(d => d !== id)
-          );
-        } else {
-          likedSongs.push(id);
-          this.$store.commit("updateLikedSongs", likedSongs);
-        }
-      });
+      this.$parent.likeASong(this.track.id);
     }
   },
   created() {
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 1b2ea63..3af4d89 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -78,5 +78,16 @@ export default {
     pause: "Pause",
     mute: "Mute",
     nextUp: "Next Up"
+  },
+  modal: {
+    close: "Close"
+  },
+  search: {
+    artist: "Artists",
+    album: "Albums",
+    song: "Songs",
+    mv: "MVs",
+    playlist: "Playlists",
+    noResult: "No Results"
   }
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 5f8c163..9684433 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -83,5 +83,16 @@ export default {
     pause: "暂停",
     mute: "静音",
     nextUp: "播放列表"
+  },
+  modal: {
+    close: "关闭"
+  },
+  search: {
+    artist: "歌手",
+    album: "专辑",
+    song: "歌曲",
+    mv: "视频",
+    playlist: "歌单",
+    noResult: "暂无结果"
   }
 };
diff --git a/src/store/actions.js b/src/store/actions.js
index 047886f..a109d32 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -33,7 +33,7 @@ export default {
 
       if (isLoggedIn) {
         getMP3(track.id).then(data => {
-          commitMP3(data.data[0].url);
+          commitMP3(data.data[0].url.replace(/^http:/, "https:"));
         });
       } else {
         commitMP3(`https://music.163.com/song/media/outer/url?id=${track.id}`);
diff --git a/src/views/album.vue b/src/views/album.vue
index 21a1d06..c9002a7 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -62,7 +62,9 @@
       >
         <div class="description-full" @click.stop>
           <span>{{ album.description }}</span>
-          <span class="close" @click="showFullDescription = false">Close</span>
+          <span class="close" @click="showFullDescription = false">
+            {{ $t('modal.close') }}
+          </span>
         </div>
       </div>
     </transition>
diff --git a/src/views/artist.vue b/src/views/artist.vue
index c731a4a..44320cf 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -94,7 +94,6 @@
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
 import { getArtist, getArtistAlbum, artistMv } from "@/api/artist";
-import { mapTrackPlayableStatus } from "@/utils/common";
 import { playAList } from "@/utils/play";
 import NProgress from "nprogress";
 
@@ -146,7 +145,6 @@ export default {
       getArtist(id).then(data => {
         this.artist = data.artist;
         this.popularTracks = data.hotSongs;
-        this.popularTracks = mapTrackPlayableStatus(this.popularTracks);
         if (next !== undefined) next();
         NProgress.done();
         this.show = true;
diff --git a/src/views/library.vue b/src/views/library.vue
index 7e52b74..bb9821c 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -58,7 +58,7 @@
 import { mapState } from "vuex";
 import { getTrackDetail, getLyric } from "@/api/track";
 import { userDetail, userPlaylist } from "@/api/user";
-import { mapTrackPlayableStatus, randomNum } from "@/utils/common";
+import { randomNum } from "@/utils/common";
 import { getPlaylistDetail } from "@/api/playlist";
 import { playPlaylistByID } from "@/utils/play";
 import NProgress from "nprogress";
@@ -149,17 +149,16 @@ export default {
           this.playlists.push(...data.playlist);
         }
         this.hasMorePlaylists = data.more;
-        this.likedSongsPlaylist = this.playlists[0];
       });
     },
     getLikedSongs(getLyric = true) {
       getPlaylistDetail(this.settings.user.likedSongPlaylistID, true).then(
         data => {
+          this.likedSongsPlaylist = data.playlist;
           let TrackIDs = data.playlist.trackIds.slice(0, 20).map(t => t.id);
           this.likedSongIDs = TrackIDs;
           getTrackDetail(this.likedSongIDs.join(",")).then(data => {
             this.likedSongs = data.songs;
-            this.likedSongs = mapTrackPlayableStatus(this.likedSongs);
             NProgress.done();
             this.show = true;
           });
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index ff9c149..76473c1 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -79,7 +79,9 @@
       >
         <div class="description-full" @click.stop>
           <span>{{ playlist.description }}</span>
-          <span class="close" @click="showFullDescription = false">Close</span>
+          <span class="close" @click="showFullDescription = false">
+            {{ $t('modal.close') }}
+          </span>
         </div>
       </div>
     </transition>
@@ -92,7 +94,6 @@ import NProgress from "nprogress";
 import { getPlaylistDetail, subscribePlaylist } from "@/api/playlist";
 import { playAList } from "@/utils/play";
 import { getTrackDetail } from "@/api/track";
-import { mapTrackPlayableStatus } from "@/utils/common";
 import { isLoggedIn } from "@/utils/auth";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
@@ -166,7 +167,6 @@ export default {
         .then(data => {
           this.playlist = data.playlist;
           this.tracks = data.playlist.tracks;
-          this.tracks = mapTrackPlayableStatus(this.tracks);
           NProgress.done();
           if (next !== undefined) next();
           this.show = true;
@@ -194,7 +194,6 @@ export default {
       trackIDs = trackIDs.map(t => t.id);
       getTrackDetail(trackIDs.join(",")).then(data => {
         this.tracks.push(...data.songs);
-        this.tracks = mapTrackPlayableStatus(this.tracks);
         this.lastLoadedTrackIndex += trackIDs.length;
         this.loadingMore = false;
       });
diff --git a/src/views/search.vue b/src/views/search.vue
index 9065179..9ff1e83 100644
--- a/src/views/search.vue
+++ b/src/views/search.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="search" v-show="show">
     <h1><span>Search for</span> "{{ keywords }}"</h1>
-    <div class="result" v-if="result !== undefined">
+    <div class="result" v-if="isExistResult">
       <div class="row">
         <div class="artists" v-if="result.hasOwnProperty('artist')">
-          <div class="section-title">Artists</div>
+          <div class="section-title">{{ $t("search.artist") }}</div>
           <div class="artists-list">
             <div
               class="artist"
@@ -32,7 +32,7 @@
           </div>
         </div>
         <div class="albums" v-if="result.hasOwnProperty('album')">
-          <div class="section-title">Albums</div>
+          <div class="section-title">{{ $t("search.album") }}</div>
           <div class="albums-list">
             <div
               class="album"
@@ -69,17 +69,17 @@
       </div>
 
       <div class="tracks" v-if="result.hasOwnProperty('song')">
-        <div class="section-title">Songs</div>
+        <div class="section-title">{{ $t("search.song") }}</div>
         <TrackList :tracks="tracks" :type="'tracklist'" />
       </div>
 
       <div class="mvs" v-if="mvs !== null && mvs.length > 0">
-        <div class="section-title">MVs</div>
+        <div class="section-title">{{ $t("search.mv") }}</div>
         <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
-        <div class="section-title">{{ $t("playlist.playlist") }}</div>
+        <div class="section-title">{{ $t("search.playlist") }}</div>
         <div class="albums-list">
           <div
             class="album"
@@ -110,7 +110,7 @@
       </div>
     </div>
     <div class="no-results" v-else>
-      No Results
+      {{ $t("search.noResult") }}
     </div>
   </div>
 </template>
@@ -150,7 +150,10 @@ export default {
     tracks() {
       let tracks = this.result.song.songs.slice(0, 12);
       return tracks;
-    }
+    },
+    isExistResult() {
+      return Object.keys(this.result).length;
+    } 
   },
   methods: {
     goToAlbum(id) {