diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 8df7833..b639e81 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <footer>
     <ButtonTwoTone :iconClass="'settings'" :color="'grey'">
-      Settings
+      {{ $t("footer.settings") }}
     </ButtonTwoTone>
   </footer>
 </template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c14eb35..4c176b5 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -10,17 +10,17 @@
     </div>
     <div class="navigation-links">
       <router-link to="/" :class="{ active: this.$route.name === 'home' }"
-        >{{ $t('message.home') }}</router-link
+        >{{ $t('nav.home') }}</router-link
       >
       <router-link
         to="/explore"
         :class="{ active: this.$route.name === 'explore' }"
-        >{{ $t('message.explore') }}</router-link
+        >{{ $t('nav.explore') }}</router-link
       >
       <router-link
         to="/library"
         :class="{ active: this.$route.name === 'library' }"
-        >{{ $t('message.library') }}</router-link
+        >{{ $t('nav.library') }}</router-link
       >
     </div>
     <div class="right-part">
@@ -32,7 +32,7 @@
           <svg-icon icon-class="search" />
           <div class="input">
             <input
-              :placeholder="inputFocus ? '' : $t('message.search')"
+              :placeholder="inputFocus ? '' : $t('nav.search')"
               v-model="keywords"
               @keydown.enter="goToSearchPage"
               @focus="inputFocus = true"
@@ -102,7 +102,6 @@ nav {
   backdrop-filter: saturate(180%) blur(30px);
   background-color: rgba(255, 255, 255, 0.86);
   z-index: 100;
-  // border-bottom: 1px solid rgba(0, 0, 0, 0.02);
 }
 
 .navigation-buttons {
diff --git a/src/locale/messages.js b/src/locale/messages.js
index 43fb8cb..aec835c 100644
--- a/src/locale/messages.js
+++ b/src/locale/messages.js
@@ -1,18 +1,144 @@
 export default {
   en: {
-    message: {
-      home: 'Home',
-      explore: 'Explore',
-      library: 'Library',
-      search: 'Search'
-    }
+    nav: {
+      home: "Home",
+      explore: "Explore",
+      library: "Library",
+      search: "Search"
+    },
+    footer: {
+      settings: 'Settings',
+    },
+    home: {
+      recommendPlaylist: "Recommended Playlist",
+      recommendArtist: "Recommended Artist",
+      newAlbum: "Lastest Album",
+      leaderboard: "Leaderboard",
+      seeMore: "SEE MORE",
+    },
+    library: "Library",
+    explore: {
+      explore: "Explore",
+      loadMore: "Load More",
+    },
+    artist: {
+      latestRelease: "Latest Release",
+      popularSongs: "Popular Songs",
+      showMore: "SHOW MORE",
+      showLess: "SHOW LESS",
+      EPSingle: "EPs & Singles",
+      albums: "Albums"
+    },
+    album: {
+      released: "Released",
+    },
+    login: {
+      accessToAll: "Access to all data",
+      loginText: "Login in Netease",
+      search: "Search account",
+      readonly: "Only access to public data",
+      usernameLogin: "Username Login",
+      searchHolder: "Your account username",
+      enterTip: "Press 'enter' to search",
+      choose: "Choose your account",
+      confirm: "confirm",
+      countrycode: 'countrycode',
+      phone: 'phone',
+      email: 'email',
+      password: 'password',
+      login: 'Login',
+      usingEmail: 'Using email',
+      usingPhone: 'Using phone',
+      // TODO
+      agreement: `YesPlayMusic promises not to save any of your account information to the cloud.
+      Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.
+      YesPlayMusic is not the official website of NetEase Cloud, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud API.`
+    },
+    mv: {
+      moreVideo: 'More Videos'
+    },
+    next: {
+      nowPlaying: 'Now Playing',
+      nextUp: 'Next Up'
+    },
+    playlist: "Playlists",
+    play: "PLAY",
+    likedSong: "Liked Songs",
+    shortIs: "'s",
+    is: "'s",
+    updatedAt: "Updated at",
   },
-  'zh-CN': {
-    message: {
-      home: '首页',
-      explore: '发现',
-      library: '歌单',
-      search: '搜索'
-    }
+  "zh-CN": {
+    nav: {
+      home: "首页",
+      explore: "发现",
+      library: "歌单",
+      search: "搜索"
+    },
+    footer: {
+      settings: '设置',
+    },
+    home: {
+      recommendPlaylist: "推荐歌单",
+      recommendArtist: "推荐歌手",
+      newAlbum: "新专速递",
+      leaderboard: "排行榜",
+      seeMore: "更多",
+    },
+    library: "歌单",
+    explore: {
+      explore: "发现",
+      loadMore: "加载更多",
+    },
+    artist: {
+      latestRelease: "最新发布",
+      popularSongs: "热门歌曲",
+      showMore: "显示更多",
+      showLess: "收起",
+      EPSingle: "专辑及单曲",
+      albums: "专辑"
+    },
+    album: {
+      released: "发布于",
+    },
+    login: {
+      accessToAll: "可访问全部数据",
+      loginText: "登录网易云账号",
+      search: "搜索网易云账号",
+      readonly: "只能读取账号公开数据",
+      usernameLogin: '用户名登录',
+      searchHolder: "请输入你的网易云用户名",
+      enterTip: "按 Enter 搜索",
+      choose: "在列表中选中你的账号",
+      confirm: "确认",
+      countrycode: '国际区号',
+      phone: '手机号',
+      email: '邮箱',
+      password: '密码',
+      login: '登录',
+      usingEmail: '使用邮箱登录',
+      usingPhone: '使用手机号登录',
+      // TODO
+      agreement: `YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
+      你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
+      YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往
+      <a href="https://github.com/qier222/YesPlayMusic"
+        >YesPlayMusic 的 GitHub 源代码仓库</a
+      >
+      自行构建并使用自托管的网易云 API。`
+    },
+    mv: {
+      moreVideo: '更多视频'
+    },
+    next: {
+      nowPlaying: '正在播放',
+      nextUp: '即将播放'
+    },
+    playlist: "播放列表",
+    play: "播放",
+    likedSong: "我喜欢的音乐",
+    shortIs: "",
+    is: "的",
+    updatedAt: "更新于"
   }
-};
+};
\ No newline at end of file
diff --git a/src/views/album.vue b/src/views/album.vue
index d24563b..a0d21dd 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -38,24 +38,21 @@
             @click.native="playAlbumByID(album.id)"
             :iconClass="`play`"
           >
-            PLAY
+            {{ $t('play') }}
           </ButtonTwoTone>
         </div>
       </div>
     </div>
-
     <TrackList :tracks="tracks" :type="'album'" :id="album.id" />
-
     <div class="extra-info">
       <div class="album-time"></div>
       <div class="release-date">
-        Released {{ album.publishTime | formatDate("MMMM D, YYYY") }}
+        {{ $t("album.released") }} {{ album.publishTime | formatDate("MMMM D, YYYY") }}
       </div>
       <div class="copyright" v-if="album.company !== null">
         © {{ album.company }}
       </div>
     </div>
-
     <transition name="fade">
       <div
         class="shade"
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 4e9ced4..a2d6def 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -13,13 +13,13 @@
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
-            PLAY
+            {{ $t('play') }}
           </ButtonTwoTone>
         </div>
       </div>
     </div>
     <div class="latest-release">
-      <div class="section-title">Latest Release</div>
+      <div class="section-title">{{ $t('artist.latestRelease') }}</div>
       <div class="release">
         <div class="container">
           <Cover
@@ -53,7 +53,7 @@
       </div>
     </div>
     <div class="popular-tracks">
-      <div class="section-title">Popular Songs</div>
+      <div class="section-title">{{ $t('artist.popularSongs') }}</div>
       <TrackList
         :tracks="popularTracks.slice(0, showMorePopTracks ? 24 : 12)"
         :type="'tracklist'"
@@ -61,13 +61,13 @@
 
       <div class="show-more">
         <button @click="showMorePopTracks = !showMorePopTracks">
-          <span v-show="!showMorePopTracks">SHOW MORE</span>
-          <span v-show="showMorePopTracks">SHOW LESS</span>
+          <span v-show="!showMorePopTracks">{{ $t('artist.showMore') }}</span>
+          <span v-show="showMorePopTracks">{{ $t('artist.showLess') }}</span>
         </button>
       </div>
     </div>
     <div class="albums" v-if="albums.length !== 0">
-      <div class="section-title">Albums</div>
+      <div class="section-title">{{ $t('artist.album') }}</div>
       <CoverRow
         :type="'album'"
         :items="albums"
@@ -80,7 +80,7 @@
       <MvRow :mvs="mvs" subtitle="publishTime" />
     </div>
     <div class="eps">
-      <div class="section-title">EPs & Singles</div>
+      <div class="section-title">{{ $t('artist.EPSingle') }}</div>
       <CoverRow
         :type="'album'"
         :items="eps"
diff --git a/src/views/explore.vue b/src/views/explore.vue
index d2a6bf3..a331607 100644
--- a/src/views/explore.vue
+++ b/src/views/explore.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="explore">
-    <h1>Explore</h1>
+    <h1>{{ $t('explore.explore') }}</h1>
     <div class="buttons">
       <div
         class="button"
@@ -35,7 +35,7 @@
         @click.native="getPlaylist"
         color="grey"
         :loading="loadingMore"
-        >Load More</ButtonTwoTone
+        >{{ $t('explore.loadMore') }}</ButtonTwoTone
       >
     </div>
   </div>
diff --git a/src/views/home.vue b/src/views/home.vue
index 78fe867..71d3695 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -11,11 +11,10 @@
         :imageSize="1024"
       />
     </div>
-
     <div class="index-row">
       <div class="title">
-        {{ recommendPlaylist.name }}
-        <router-link to="/explore?category=推荐歌单">SEE MORE</router-link>
+        {{ $t("home.recommendPlaylist") }}
+        <router-link to="/explore?category=推荐歌单">{{ $t("home.seeMore") }}</router-link>
       </div>
       <CoverRow
         :type="'playlist'"
@@ -23,24 +22,21 @@
         :subText="'copywriter'"
       />
     </div>
-
     <div class="index-row">
-      <div class="title">{{ recommendArtists.name }}</div>
+      <div class="title">{{ $t("home.recommendArtist") }}</div>
       <CoverRow type="artist" :items="recommendArtists.items" />
     </div>
-
     <div class="index-row">
       <div class="title">
-        {{ newReleasesAlbum.name }}
-        <router-link to="/new-album">SEE MORE</router-link>
+        {{ $t("home.newAlbum") }}
+        <router-link to="/new-album">{{ $t("home.seeMore") }}</router-link>
       </div>
       <CoverRow type="album" :items="newReleasesAlbum.items" subText="artist" />
     </div>
-
     <div class="index-row">
       <div class="title">
-        {{ topList.name }}
-        <router-link to="/explore?category=排行榜">SEE MORE</router-link>
+        {{ $t("home.leaderboard") }}
+        <router-link to="/explore?category=排行榜">{{ $t("home.seeMore") }}</router-link>
       </div>
       <CoverRow
         :type="'chart'"
@@ -58,7 +54,6 @@ import { toplistOfArtists } from "@/api/artist";
 import { byAppleMusic } from "@/utils/staticPlaylist";
 import { newAlbums } from "@/api/album";
 import NProgress from "nprogress";
-
 import CoverRow from "@/components/CoverRow.vue";
 
 export default {
@@ -67,15 +62,13 @@ export default {
   data() {
     return {
       show: false,
-      recommendPlaylist: { name: "推荐歌单", items: [] },
-      newReleasesAlbum: { name: "新专速递", items: [] },
+      recommendPlaylist: { items: [] },
+      newReleasesAlbum: { items: [] },
       topList: {
-        name: "排行榜",
         items: [],
         ids: [19723756, 180106, 60198, 3812895, 60131],
       },
       recommendArtists: {
-        name: "推荐歌手",
         items: [],
         indexs: [],
       },
diff --git a/src/views/library.vue b/src/views/library.vue
index 88fdb4f..4359062 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -3,7 +3,7 @@
     <h1>
       <img class="head" :src="user.profile.avatarUrl | resizeImage" />{{
         user.profile.nickname
-      }}'s Library
+      }}{{ $t("is") }} {{ $t("library") }}
     </h1>
     <div class="section-one">
       <div class="liked-songs" @click="goToLikedSongsList">
@@ -19,7 +19,7 @@
         </div>
         <div class="bottom">
           <div class="titles">
-            <div class="title">Liked Songs</div>
+            <div class="title">{{ $t("likedSong") }}</div>
             <div class="sub-title">
               {{ likedSongsPlaylist.trackCount }} songs
             </div>
@@ -41,7 +41,7 @@
     </div>
 
     <div class="playlists" v-if="playlists.length > 1">
-      <div class="title">Playlists</div>
+      <div class="title">{{ $t("playlist") }}</div>
       <div>
         <CoverRow
           :items="playlists.slice(1)"
diff --git a/src/views/login.vue b/src/views/login.vue
index 129c2f9..f7d8acb 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -14,8 +14,8 @@
       >
         <div class="container" :class="{ active: activeCard === 1 }">
           <div class="title-info">
-            <div class="title">登录网易云账号</div>
-            <div class="info">可访问全部数据</div>
+            <div class="title">{{ $t('login.loginText') }}</div>
+            <div class="info">{{ $t('login.accessToAll') }}</div>
           </div>
           <svg-icon icon-class="arrow-right"></svg-icon>
         </div>
@@ -28,8 +28,8 @@
       >
         <div class="container" :class="{ active: activeCard === 2 }">
           <div class="title-info">
-            <div class="title">搜索网易云账号</div>
-            <div class="info">只能读取账号公开数据</div>
+            <div class="title">{{ $t('login.search') }}</div>
+            <div class="info">{{ $t('login.readonly') }}</div>
           </div>
           <svg-icon icon-class="arrow-right"></svg-icon>
         </div>
@@ -105,6 +105,8 @@ export default {
   height: 128px;
   width: 300px;
   transition: all 0.3s;
+  padding-left: 22px;
+  box-sizing: border-box;
 
   .active {
     .title-info {
diff --git a/src/views/loginAccount.vue b/src/views/loginAccount.vue
index 8edfd64..b6cc11a 100644
--- a/src/views/loginAccount.vue
+++ b/src/views/loginAccount.vue
@@ -3,7 +3,7 @@
     <div class="section-1">
       <img src="/img/logos/netease-music.png" />
     </div>
-    <div class="title">登录网易云账号</div>
+    <div class="title">{{ $t("login.loginText") }}</div>
     <div class="section-2">
       <div class="input-box" v-show="mode === 'phone'">
         <div class="container" :class="{ active: inputFocus === 'phone' }">
@@ -11,14 +11,14 @@
           <div class="inputs">
             <input
               id="countryCode"
-              :placeholder="inputFocus === 'phone' ? '' : '国际区号'"
+              :placeholder="inputFocus === 'phone' ? '' : $t('login.countrycode')"
               v-model="countryCode"
               @focus="inputFocus = 'phone'"
               @blur="inputFocus = ''"
             />
             <input
               id="phoneNumber"
-              :placeholder="inputFocus === 'phone' ? '' : '手机号'"
+              :placeholder="inputFocus === 'phone' ? '' : $t('login.phone')"
               v-model="phoneNumber"
               @focus="inputFocus = 'phone'"
               @blur="inputFocus = ''"
@@ -33,7 +33,7 @@
             <input
               type="email"
               id="email"
-              :placeholder="inputFocus === 'email' ? '' : '邮箱'"
+              :placeholder="inputFocus === 'email' ? '' : $t('login.email')"
               v-model="email"
               @focus="inputFocus = 'email'"
               @blur="inputFocus = ''"
@@ -48,7 +48,7 @@
             <input
               type="password"
               id="password"
-              :placeholder="inputFocus === 'password' ? '' : '密码'"
+              :placeholder="inputFocus === 'password' ? '' : $t('login.password')"
               v-model="password"
               @focus="inputFocus = 'password'"
               @blur="inputFocus = ''"
@@ -58,7 +58,7 @@
       </div>
     </div>
     <div class="confirm">
-      <button @click="login" v-show="!processing">登录</button>
+      <button @click="login" v-show="!processing">{{ $t('login.login') }}</button>
       <button v-show="processing" class="loading" disabled>
         <span></span>
         <span></span>
@@ -66,8 +66,8 @@
       </button>
     </div>
     <div class="other-login">
-      <a v-show="mode === 'phone'" @click="mode = 'email'">使用邮箱登录</a>
-      <a v-show="mode === 'email'" @click="mode = 'phone'">使用手机号登录</a>
+      <a v-show="mode === 'phone'" @click="mode = 'email'">{{ $t('login.usingEmail') }}</a>
+      <a v-show="mode === 'email'" @click="mode = 'phone'">{{ $t('login.usingPhone') }}</a>
     </div>
     <div class="notice">
       YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
@@ -112,7 +112,7 @@ export default {
   methods: {
     ...mapMutations(["updateUser", "updateUserInfo"]),
     afterLogin() {
-      Cookies.set("MUSIC_U", true, { expires: 3650 });
+      // Cookies.set("MUSIC_U", true, { expires: 3650 });
       Cookies.set("loginMode", "account", { expires: 3650 });
       userPlaylist({
         uid: this.$store.state.settings.user.userId,
diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue
index 4683b77..3b4f809 100644
--- a/src/views/loginUsername.vue
+++ b/src/views/loginUsername.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="login">
     <div>
-      <div class="title">用户名登录</div>
+      <div class="title">{{ $t('login.usernameLogin') }}</div>
       <div class="sestion">
         <div class="search-box">
           <div class="container">
             <svg-icon icon-class="search" />
             <div class="input">
               <input
-                placeholder="请输入你的网易云用户名"
+                :placeholder="$t('login.searchHolder')"
                 v-model="keyword"
                 @keydown.enter="search"
               />
@@ -18,10 +18,10 @@
       </div>
       <div class="sestion">
         <div class="name" v-show="activeUser.nickname === undefined">
-          按Enter搜索
+          {{ $t("login.enterTip") }}
         </div>
         <div class="name" v-show="activeUser.nickname !== undefined">
-          在列表中选中你的账号
+          {{ $t("login.choose") }}
         </div>
         <div class="user-list">
           <div
@@ -41,7 +41,7 @@
       <ButtonTwoTone
         @click.native="confirm"
         v-show="activeUser.nickname !== undefined"
-        >确定</ButtonTwoTone
+        >{{ $t("login.confirm") }}</ButtonTwoTone
       >
     </div>
   </div>
diff --git a/src/views/mv.vue b/src/views/mv.vue
index 7631865..48bdd16 100644
--- a/src/views/mv.vue
+++ b/src/views/mv.vue
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="more-video">
-      <div class="section-title">More Videos</div>
+      <div class="section-title">{{ $t("mv.moreVideo") }}</div>
       <MvRow :mvs="simiMvs" />
     </div>
   </div>
diff --git a/src/views/newAlbum.vue b/src/views/newAlbum.vue
index f75e5b1..1a862e7 100644
--- a/src/views/newAlbum.vue
+++ b/src/views/newAlbum.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="newAlbum">
-    <h1>新专速递</h1>
+    <h1>{{ $t("home.newAlbum")}}</h1>
 
     <div class="playlist-row">
       <div class="playlists">
diff --git a/src/views/next.vue b/src/views/next.vue
index 3b52aa4..ce8620b 100644
--- a/src/views/next.vue
+++ b/src/views/next.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="next-tracks">
-    <h1>Now Playing</h1>
+    <h1>{{ $t("next.nowPlaying") }}</h1>
     <TrackList
       :tracks="[currentTrack]"
       :type="'playlist'"
       dbclickTrackFunc="none"
     />
-    <h1>Next Up</h1>
+    <h1>{{ $t("next.nextUp") }}</h1>
 
     <TrackList
       :tracks="sortedTracks"
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index 1c72214..3d69a2d 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -35,7 +35,7 @@
           >
         </div>
         <div class="date-and-count">
-          Updated at {{ playlist.updateTime | formatDate }} ·
+          {{ $t("updatedAt") }} {{ playlist.updateTime | formatDate }} ·
           {{ playlist.trackCount }} Songs
         </div>
         <div class="description" @click="showFullDescription = true">
@@ -43,7 +43,7 @@
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPlaylistByID()" :iconClass="`play`">
-            PLAY
+            {{ $t("play") }}
           </ButtonTwoTone>
           <ButtonTwoTone
             v-if="
@@ -64,7 +64,7 @@
       <h1>
         <img class="avatar" :src="settings.user.avatarUrl | resizeImage" />{{
           settings.user.nickname
-        }}'s Liked Songs
+        }}{{ $t("is") }} {{ $t("likedSong") }}
       </h1>
     </div>
 
diff --git a/src/views/search.vue b/src/views/search.vue
index 3be0fd4..da49f69 100644
--- a/src/views/search.vue
+++ b/src/views/search.vue
@@ -79,7 +79,7 @@
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
-        <div class="section-title">Playlists</div>
+        <div class="section-title">{{ $t("playlist") }}</div>
         <div class="albums-list">
           <div
             class="album"