diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index f76d6fb..5aa9119 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -12,3 +12,206 @@
     fill: none;
   }
 }
+
+// select
+.zy-select{
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  height: 30px;
+  cursor: pointer;
+  border-radius: 3px;
+  user-select: none;
+  vertical-align: middle;
+  .vs-placeholder{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 25px;
+    padding-right: 25px;
+    &::after{
+      display: inline-block;
+      margin-left: .255em;
+      vertical-align: .255em;
+      content: "";
+      border-top: .3em solid;
+      border-right: .3em solid transparent;
+      border-bottom: 0;
+      border-left: .3em solid transparent;
+    }
+  }
+  .vs-options{
+    z-index: 2;
+    width: 100%;
+    overflow-y: auto;
+    min-height: 0;
+    ul{
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      li{
+        width: 100%;
+        height: 30px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding-left: 25px;
+      }
+    }
+  }
+}
+
+// table
+.zy-table{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 15px;
+  .tHead{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid;
+    padding: 0 5px 0 0;
+    font-weight: 600;
+    span{
+      display: flex;
+      width: 180px;
+      font-size: 16px;
+      &.name{
+        flex: 1;
+        padding-left: 15px;
+      }
+      &.type{
+        width: 120px;
+      }
+      &.from{
+        width: 120px;
+      }
+      &.operate{
+        width: 120px;
+      }
+    }
+  }
+  .tBody{
+    flex: 1;
+    overflow-y: scroll;
+    border-bottom: 1px solid;
+    ul{
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      li{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+        height: 50px;
+        border-bottom: 1px solid;
+        cursor: pointer;
+        span{
+          display: flex;
+          width: 180px;
+          font-size: 13px;
+          height: 50px;
+          line-height: 50px;
+          &.name{
+            flex: 1;
+            padding-left: 15px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &.type{
+            width: 120px;
+          }
+          &.from{
+            width: 120px;
+          }
+          &.operate{
+            width: 120px;
+          }
+        }
+      }
+    }
+  }
+  .tFooter{
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding-right: 10px;
+    .tFooter-span{
+      padding-left: 10px;
+      font-size: 12px;
+    }
+  }
+}
+
+// scroll
+.zy-scroll{
+  &::-webkit-scrollbar{
+    width: 5px;
+    height: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    position: absolute;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    position: absolute;
+  }
+}
+
+// loading
+.zy-loading{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .loader {
+    font-size: 8px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: load4 1.3s infinite linear;
+    transform: translateZ(0);
+  }
+  @keyframes load4 {
+    0%,
+    100% {
+      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    }
+    12.5% {
+      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    25% {
+      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    37.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    50% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    62.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    }
+    75% {
+      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    }
+    87.5% {
+      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index 63c1ab5..b2d97b6 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -1,13 +1,19 @@
 :root{
   // light
-  --l-c: #823aa0;
-  --l-fontc: #808695;
-  --l-bgc: #ffffff;
-  --l-bgc-two: #f2f6f9;
-  --l-c-hover: #823aa022;
-  --l-c-active: #823aa099;
-  --l-bdc: #823aa033;
-  --l-bsc: #8e8da2;
+  --l-c-0: #823aa0;
+  --l-c-1: #823aa011;
+  --l-c-2: #823aa022;
+  --l-c-3: #823aa033;
+  --l-c-8: #823aa088;
+  --l-c-9: #823aa099;
+  --l-fc-1: #808695;
+  --l-fc-2: #332f5c;
+  --l-fc-3: #332f5c88;
+  --l-bgc-1: #ffffff;
+  --l-bgc-2: #f2f6f9;
+  --l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
+  --l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
+  --l-bsc-scroll: inset 0 0 5px #823aa005;
 }
 
 @import './theme/light.scss';
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 3ebe7db..886294f 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -1,23 +1,114 @@
 .theme-light{
-  background-color: var(--l-bgc);
+  background-color: var(--l-bgc-1);
+  .el-pagination{
+    color: var(--l-fc-1);
+    .el-pagination__total, .el-pagination__jump, .el-input__inner{
+      color: var(--l-fc-1);
+    }
+    .el-pager{
+      .number:hover{
+        color: var(--l-c-8);
+      }
+      .active{
+        color: var(--l-c-9);
+      }
+    }
+    .more, .btn-next, .btn-prev{
+      &:hover{
+        color: var(--l-c-8);
+      }
+    }
+  }
+  .zy-select{
+    color: var(--l-fc-1);
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    &:hover{
+      box-shadow: var(--l-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc);
+      ul{
+        li{
+          &:hover{
+            background-color: var(--l-c-1);
+          }
+          &.active{
+            background-color: var(--l-c-3);
+          }
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--l-fc-2);
+    .tHead{
+      background-color: var(--l-bgc-1);
+      border-bottom-color: var(--l-c-3);
+    }
+    .tBody{
+      border-bottom-color: var(--l-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--l-c-2);
+          &:hover{
+            animation: tableHoverAni 0.2s ease both;
+            @keyframes tableHoverAni {
+              to{
+                box-shadow: var(--l-bsc-hover);
+              }
+            }
+          }
+          span{
+            &.btn:hover{
+              color: var(--l-fc-3)
+            }
+          }
+        }
+      }
+    }
+    .tFooter{
+      .tFooter-span{
+        color: var(--l-fc-1);
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--l-bsc-scroll);
+        background: var(--l-c-3);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--l-bsc-scroll);
+        background: var(--bgc);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--l-c-3);
+    }
+  }
   .home{
     .body{
-      background-color: var(--l-bgc-two);
+      background-color: var(--l-bgc-2);
     }
   }
   .aside{
     .zy-svg{
       svg{
-        stroke: var(--l-c);
+        stroke: var(--l-c-0);
       }
       &:hover{
-        background-color: var(--l-c-hover);
+        background-color: var(--l-c-2);
       }
       &.active{
         svg{
-          stroke: var(--l-c);
+          stroke: var(--l-c-0);
           stroke-width: 2;
-          fill: var(--l-c-hover);
+          fill: var(--l-c-2);
         }
       }
     }
@@ -32,4 +123,33 @@
       }
     }
   }
+  .film{
+    .top{
+      .search{
+        background-color: var(--l-bgc-1);
+        box-shadow: var(--l-bsc);
+        &:hover{
+          box-shadow: var(--l-bsc-hover);
+        }
+        svg{
+          stroke: #823aa099;
+          stroke-width: 1;
+          fill: none;
+        }
+        .search-box{
+          background-color: none;
+        }
+        &.active{
+          box-shadow: var(--l-bsc-hover);
+          svg{
+            stroke-width: 1.5;
+            fill: var(--l-c-2);
+          }
+        }
+        input{
+          color: var(--l-fc-1);
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index fa789f7..f342ae0 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -16,19 +16,19 @@
     </span>
     <span :class="[view === 'Play' ? 'active ': ''] + 'play zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
-        <title id="playIconTitle">播放</title>
+        <title id="playIconTitle">{{$t('play')}}</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
     <span :class="[view === 'Star' ? 'active ': ''] + 'star zy-svg'" @click="changeView('Star')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
-        <title id="favouriteIconTitle">收藏</title>
+        <title id="favouriteIconTitle">{{$t('star')}}</title>
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
     <span :class="[view === 'Setting' ? 'active ': ''] + 'setting zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
-        <title id="settingsIconTitle">设置</title>
+        <title id="settingsIconTitle">{{$t('setting')}}</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
         <circle cx="12" cy="12" r="1"></circle>
       </svg>
diff --git a/src/components/Film.vue b/src/components/Film.vue
index 75cbbb0..da62117 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -2,7 +2,7 @@
   <div class="film">
     <div class="top" v-if="top">
       <!-- site -->
-      <div class="vue-select" @mouseleave="show.site = false">
+      <div class="zy-select" @mouseleave="show.site = false">
         <div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
         <div class="vs-options" v-show="show.site">
           <ul>
@@ -11,7 +11,7 @@
         </div>
       </div>
       <!-- tags -->
-      <div class="vue-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0">
+      <div class="zy-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0">
         <div class="vs-placeholder" @click="show.tags = true">{{site.tags[tag].title}}</div>
         <div class="vs-options" v-show="show.tags">
           <ul>
@@ -20,7 +20,7 @@
         </div>
       </div>
       <!-- type -->
-      <div class="vue-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0">
+      <div class="zy-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0">
         <div class="vs-placeholder" @click="show.type = true">{{site.tags[tag].children[type].title}}</div>
         <div class="vs-options" v-show="show.type">
           <ul>
@@ -30,37 +30,39 @@
       </div>
       <div :class="[inputFocus ? 'active ': ''] + 'search'" @mouseover="inputFocus = true" @mouseleave="inputFocus = false">
         <div class="search-icon">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
-            <title id="searchIconTitle">Search</title>
-            <path d="M14.4121122,14.4121122 L20,20"></path>
-            <circle cx="10" cy="10" r="6"></circle>
-          </svg>
+          <span class="zy-svg">
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
+              <title id="searchIconTitle">Search</title>
+              <path d="M14.4121122,14.4121122 L20,20"></path>
+              <circle cx="10" cy="10" r="6"></circle>
+            </svg>
+          </span>
         </div>
         <input type="text" class="search-box" v-model="keywords" @keypress.enter="searchEvent">
       </div>
     </div>
     <div class="middle">
-      <div class="vue-table">
+      <div class="zy-table">
         <div class="tHead">
-          <span class="name">影片名称</span>
-          <span class="type">类型</span>
-          <span class="time">时间</span>
-          <span class="operate">操作</span>
+          <span class="name">{{$t('videoName')}}</span>
+          <span class="type">{{$t('type')}}</span>
+          <span class="time">{{$t('time')}}</span>
+          <span class="operate">{{$t('operate')}}</span>
         </div>
-        <div class="tBody">
+        <div class="tBody zy-scroll">
           <ul v-show="!tb.loading">
             <li v-for="(i, j) in tb.list" :key="j" @click="detailEvent(i)">
               <span class="name">{{i.name}}</span>
               <span class="type">{{i.type}}</span>
               <span class="time">{{i.time}}</span>
               <span class="operate">
-                <span class="btn" @click.stop="playEvent(i)">播放</span>
-                <span class="btn" @click.stop="starEvent(i)">收藏</span>
-                <span class="btn" @click.stop="shareEvent(i)">分享</span>
+                <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
+                <span class="btn" @click.stop="starEvent(i)">{{$t('star')}}</span>
+                <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
               </span>
             </li>
           </ul>
-          <div class="tBody-mask" v-show="tb.loading">
+          <div class="tBody-mask zy-loading" v-show="tb.loading">
             <div class="loader"></div>
           </div>
         </div>
@@ -288,19 +290,14 @@ export default {
       width: 200px;
       height: 30px;
       display: flex;
-      background-color: #fff;
       justify-content: center;
       align-items: center;
       border-radius: 15px;
-      box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
       svg{
         width: 20px;
         height: 20px;
-        stroke: #823aa099;
-        stroke-width: 1;
         stroke-linecap: round;
         stroke-linejoin: round;
-        fill: none;
       }
       .search-icon{
         width: 40px;
@@ -314,7 +311,6 @@ export default {
         height: 30px;
         border-radius: 20px;
         border: none;
-        background-color: #00000000;
         text-indent: 2px;
         font-size: 14px;
         &:focus{
@@ -322,13 +318,6 @@ export default {
           border: none;
         }
       }
-      &.active{
-        box-shadow: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
-        svg{
-          stroke-width: 1.5;
-          fill: #823aa022;
-        }
-      }
     }
   }
   .middle{
diff --git a/src/locales/en.json b/src/locales/en.json
index 50b9cc4..63059e5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,5 +3,13 @@
     "en": "English",
     "language": "Language",
     "default_site": "Default Site",
-    "view": "View"
+    "view": "View",
+    "play": "Play",
+    "star": "Star",
+    "setting": "Setting",
+    "videoName": "Video Name",
+    "type": "Type",
+    "time": "Time",
+    "operate": "Operate",
+    "share": "Share"
 }
diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json
index f20d65b..1b8a326 100644
--- a/src/locales/zh-cn.json
+++ b/src/locales/zh-cn.json
@@ -3,5 +3,13 @@
     "en": "English",
     "language": "语言",
     "default_site": "默认源",
-    "view": "浏览"
+    "view": "浏览",
+    "play": "播放",
+    "star": "收藏",
+    "setting": "设置",
+    "videoName": "视频名称",
+    "type": "类型",
+    "time": "时间",
+    "operate": "操作",
+    "share": "分享"
 }
diff --git a/src/store/index.js b/src/store/index.js
index 93fb670..b0298d3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    view: 'Setting',
+    view: 'Film',
     theme: 'light',
     site: 'zuidazy',
     language: 'zhCn',