diff --git a/.eslintrc.js b/.eslintrc.js
index bf19e29..a236a54 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,6 +43,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'import/prefer-default-export': 'off',
     'prefer-promise-reject-errors': 'off',
+    'max-len': 'off',
 
     // allow console.log during development only
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
diff --git a/quasar.conf.js b/quasar.conf.js
index 54005e9..ac954c4 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -64,6 +64,14 @@ module.exports = function (ctx) {
         'QSeparator',
         'QChip',
         'QTooltip',
+        'QBar',
+        'QSpace',
+        // table
+        'QTable',
+        'QTh',
+        'QTr',
+        'QTd',
+        'QExpansionItem',
       ],
 
       directives: ['Ripple'],
@@ -73,8 +81,8 @@ module.exports = function (ctx) {
       config: {
         loadingBar: {
           color: 'purple',
-          size: '10px',
-          position: 'top',
+          size: '5px',
+          position: 'bottom',
           skipHijack: true,
         },
       },
diff --git a/src-electron/main-process/electron-main.js b/src-electron/main-process/electron-main.js
index 6717238..a1112a1 100644
--- a/src-electron/main-process/electron-main.js
+++ b/src-electron/main-process/electron-main.js
@@ -22,6 +22,7 @@ function createWindow() {
     width: 1000,
     height: 600,
     useContentSize: true,
+    frame: false,
     webPreferences: {
       nodeIntegration: true,
       webSecurity: false,
diff --git a/src/components/scrollWarp.vue b/src/components/scrollWarp.vue
new file mode 100644
index 0000000..a5eb622
--- /dev/null
+++ b/src/components/scrollWarp.vue
@@ -0,0 +1,14 @@
+<template>
+  <div style="flex: auto" class="scroll-warp">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollWarp',
+};
+</script>
+
+<style>
+</style>
diff --git a/src/components/viewArea.vue b/src/components/viewArea.vue
new file mode 100644
index 0000000..952c763
--- /dev/null
+++ b/src/components/viewArea.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { dom, throttle } from 'quasar';
+
+const { height } = dom;
+export default {
+  name: 'viewArea',
+  data() {
+    return {
+      style: {
+        height: '0',
+      },
+    };
+  },
+  mounted() {
+    this.setViewAreaHeight();
+    this.$nextTick(() => {
+      const config = {
+        attributes: true,
+      };
+      this.observer = new MutationObserver(throttle(this.setViewAreaHeight, 500));
+      this.observer.observe(document.querySelector('.q-page'), config);
+    });
+  },
+  methods: {
+    setViewAreaHeight() {
+      const scrollWarpElement = document.querySelector('.scroll-warp');
+      const viewAreaHeight = height(scrollWarpElement);
+      this.style.height = `${viewAreaHeight}px`;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
diff --git a/src/layouts/Home.vue b/src/layouts/Home.vue
index 8b268ac..ebd87c0 100644
--- a/src/layouts/Home.vue
+++ b/src/layouts/Home.vue
@@ -7,6 +7,43 @@
       elevated
       class="bg-primary text-white"
     >
+      <q-bar class="q-electron-drag">
+        <q-avatar
+          square
+          color="orange"
+        >H</q-avatar>
+        <div>H-PLAYER</div>
+
+        <q-space />
+
+        <q-btn
+          dense
+          flat
+          round
+          icon="settings"
+          @click="right = !right"
+        />
+
+        <q-btn
+          dense
+          flat
+          icon="minimize"
+          @click="minimize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="crop_square"
+          @click="maximize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="close"
+          @click="closeApp"
+        />
+      </q-bar>
+
       <q-toolbar>
         <q-btn
           dense
@@ -16,20 +53,14 @@
           @click="left = !left"
         />
 
-        <q-toolbar-title>
-          <q-avatar
-            square
-            size="24px"
-            color="orange"
-          >H</q-avatar>
-        </q-toolbar-title>
+        <q-space></q-space>
 
         <q-btn
           dense
           flat
           round
-          icon="settings"
-          @click="right = !right"
+          icon="search"
+          @click="left = !left"
         />
       </q-toolbar>
 
@@ -288,6 +319,29 @@ export default {
       this.$electronStore.clear();
       this.$router.replace('/import');
     },
+    minimize() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize();
+      }
+    },
+
+    maximize() {
+      if (process.env.MODE === 'electron') {
+        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
+
+        if (win.isMaximized()) {
+          win.unmaximize();
+        } else {
+          win.maximize();
+        }
+      }
+    },
+
+    closeApp() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close();
+      }
+    },
   },
   computed: {
     ...mapGetters(['currentSite']),
@@ -317,15 +371,14 @@ export default {
 </script>
 
 <style lang="stylus">
-.q-layout, .q-page {
-  min-height: inherit !important;
-}
-
+// .q-layout, .q-page {
+// min-height: inherit !important;
+// }
 .serch {
   margin-top: 24px;
 }
 
 .class-list {
-  height: calc(100% - 100px)
+  height: calc(100% - 100px);
 }
 </style>
diff --git a/src/layouts/Import.vue b/src/layouts/Import.vue
index eaefe62..85d2aaf 100644
--- a/src/layouts/Import.vue
+++ b/src/layouts/Import.vue
@@ -2,15 +2,42 @@
   <q-layout view="hHh Lpr fFf">
     <!-- (Optional) The Header -->
     <q-header elevated>
-      <q-toolbar>
-        <q-toolbar-title>
-          <q-avatar
-            square
-            size="24px"
-            color="orange"
-          >H</q-avatar>
-        </q-toolbar-title>
-      </q-toolbar>
+      <q-bar class="q-electron-drag">
+        <q-avatar
+          square
+          color="orange"
+        >H</q-avatar>
+        <div>H-PLAYER</div>
+
+        <q-space />
+
+        <q-btn
+          dense
+          flat
+          round
+          icon="settings"
+          @click="right = !right"
+        />
+
+        <q-btn
+          dense
+          flat
+          icon="minimize"
+          @click="minimize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="crop_square"
+          @click="maximize"
+        />
+        <q-btn
+          dense
+          flat
+          icon="close"
+          @click="closeApp"
+        />
+      </q-bar>
     </q-header>
     <!-- (Optional) The Footer -->
     <q-footer>
@@ -80,6 +107,29 @@ export default {
         this.$router.push('/');
       }
     },
+    minimize() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize();
+      }
+    },
+
+    maximize() {
+      if (process.env.MODE === 'electron') {
+        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
+
+        if (win.isMaximized()) {
+          win.unmaximize();
+        } else {
+          win.maximize();
+        }
+      }
+    },
+
+    closeApp() {
+      if (process.env.MODE === 'electron') {
+        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close();
+      }
+    },
   },
 };
 </script>
diff --git a/src/pages/Video.vue b/src/pages/Video.vue
index 394ac87..acfa1ea 100644
--- a/src/pages/Video.vue
+++ b/src/pages/Video.vue
@@ -1,41 +1,107 @@
 <template>
   <q-page
-    class="video-warp"
     padding
+    class="flex"
   >
-    <hls-player
-      :source="normalizeUrl(currentVideo.dl.dd._)"
-      :options="options"
-      ref="player"
-    ></hls-player>
-    <q-page-sticky
-      position="top-left"
-      :offset="[5, 5]"
-    >
-      <q-btn
-        round
-        color="accent"
-        icon="arrow_back"
-        @click="goback"
-      />
-    </q-page-sticky>
-    <q-page-sticky
-      position="top-right"
-      :offset="[5, 5]"
-    >
-      <q-btn
-        round
-        color="accent"
-        icon="layers"
-        @click="minimize"
-      />
-    </q-page-sticky>
+    <scrollWarp>
+      <q-scroll-area
+        :thumb-style="thumbStyle"
+        class="fit"
+      >
+        <viewArea>
+          <hls-player
+            :source="normalizeUrl(currentEpisode.url)"
+            :options="options"
+            ref="player"
+          ></hls-player>
+        </viewArea>
+        <q-expansion-item
+          icon="info"
+          :label="`${currentVideo.name}-${currentEpisode.episode}`"
+          header-class="bg-primary text-white"
+          expand-icon-class="text-white"
+        >
+          <q-card>
+            <q-card-section>
+              <div class="text-h6">演员: {{currentVideo.actor}}</div>
+              <div class="text-h6">地区: {{currentVideo.area}}</div>
+              <div class="text-h6">简介: {{currentVideo.des}}</div>
+              <div class="text-h6">导演: {{currentVideo.director}}</div>
+              <div class="text-h6">语言: {{currentVideo.lang}}</div>
+              <div class="text-h6">时间: {{currentVideo.last}}</div>
+              <div class="text-h6">备注: {{currentVideo.note}}</div>
+              <div class="text-h6">
+                图片:
+                <q-img
+                  :src="currentVideo.pic"
+                  spinner-color="white"
+                  style="height: 140px; max-width: 150px"
+                />
+              </div>
+              <div class="text-h6">评分: {{currentVideo.state}}</div>
+              <div class="text-h6">类型: {{currentVideo.type}}</div>
+              <div class="text-h6">年份: {{currentVideo.year}}</div>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-table
+          title="分集信息"
+          :data="episodeInfo"
+          :columns="columns"
+          row-key="name"
+        >
+          <q-td
+            slot="body-cell-actions"
+            slot-scope="props"
+            :props="props"
+          >
+            <q-chip
+              v-if="currentEpisode.url === props.row.url"
+              icon="play_arrow"
+              size="10px"
+            >正在播放</q-chip>
+            <q-btn
+              v-else
+              round
+              color="primary"
+              icon="play_arrow"
+              @click="setCurrentEpisode(props)"
+            />
+          </q-td>
+        </q-table>
+        <q-page-sticky
+          position="top-left"
+          :offset="[5, 5]"
+        >
+          <q-btn
+            round
+            color="accent"
+            icon="arrow_back"
+            @click="goback"
+          />
+        </q-page-sticky>
+        <q-page-sticky
+          position="top-right"
+          :offset="[5, 5]"
+        >
+          <q-btn
+            round
+            color="accent"
+            icon="layers"
+            @click="minimize"
+          />
+        </q-page-sticky>
+      </q-scroll-area>
+    </scrollWarp>
   </q-page>
 </template>
 
 <script>
+import scrollWarp from 'components/scrollWarp';
+import viewArea from 'components/viewArea';
 import HlsPlayer from 'components/HlsPlayer';
 import normalizeUrl from 'normalize-url';
+import isAbsoluteUrl from 'is-absolute-url';
 import { mapState } from 'vuex';
 import { stringify } from 'query-string';
 import Positioner from 'electron-positioner';
@@ -60,22 +126,92 @@ export default {
           'fullscreen',
         ],
       },
+      columns: [
+        {
+          name: 'episode',
+          label: '分集',
+          field: 'episode',
+          sortable: true,
+        },
+        {
+          name: 'url',
+          label: '链接',
+          field: 'url',
+          sortable: true,
+        },
+        {
+          name: 'player',
+          label: '播放器类型',
+          field: 'player',
+          sortable: true,
+        },
+        {
+          name: 'actions',
+          label: '操作',
+        },
+      ],
+      episodeInfo: [],
+      currentEpisode: {
+        episode: '无',
+        url: '',
+        player: '无',
+      },
     };
   },
   components: {
     HlsPlayer,
+    scrollWarp,
+    viewArea,
+  },
+  mounted() {
+    this.initUrl(this.currentVideo.dl.dd._);
+    [this.currentEpisode] = this.episodeInfo;
   },
   methods: {
+    sliceUrl(str) {
+      return str.split('#');
+    },
+    getUrlInfo(str) {
+      const splitStr = str.split('$');
+      if (splitStr.length === 3) {
+        return {
+          episode: splitStr[0],
+          url: splitStr[1],
+          player: splitStr[2],
+        };
+      }
+      return {
+        episode: '无',
+        url: splitStr[0],
+        player: '无',
+      };
+    },
+
+    initUrl(str) {
+      const slicedUrl = this.sliceUrl(str);
+      const episodeInfo = slicedUrl.map(element => this.getUrlInfo(element));
+      this.episodeInfo = episodeInfo;
+      console.log(episodeInfo);
+    },
     normalizeUrl(url) {
-      const pureUrl = url.replace(/(.*?)\$/, '').replace(/\$(.*)/, '');
-      return normalizeUrl(pureUrl);
+      console.log(url);
+      if (isAbsoluteUrl(url)) {
+        return normalizeUrl(url);
+      }
+      return '';
+    },
+    setCurrentEpisode(props) {
+      this.currentEpisode = props.row;
+    },
+    pause() {
+      const { player } = this.$refs.player;
+      player.pause();
     },
     goback() {
       this.$router.go(-1);
     },
     minimize() {
-      const { player } = this.$refs.player;
-      player.pause();
+      this.pause();
       const videoInfo = JSON.stringify(this.currentVideo);
       const encodeUrl = stringify({ video: videoInfo });
       const parentWindow = getCurrentWindow();
@@ -99,12 +235,18 @@ export default {
     ...mapState({
       currentVideo: state => state.video.currentVideo,
     }),
+    thumbStyle() {
+      return {
+        right: '2px',
+        borderRadius: '5px',
+        backgroundColor: '#027be3',
+        width: '5px',
+        opacity: 0.75,
+      };
+    },
   },
 };
 </script>
 
 <style>
-.video-warp {
-  height: calc(100vh - 148px);
-}
 </style>
diff --git a/src/pages/VideoList.vue b/src/pages/VideoList.vue
index b485cca..ec3c4d7 100644
--- a/src/pages/VideoList.vue
+++ b/src/pages/VideoList.vue
@@ -1,71 +1,77 @@
 <template>
-  <q-page padding>
-    <q-scroll-area
-      style="height: calc(100vh - 198px);"
-      :thumb-style="thumbStyle"
-    >
-      <div class="q-pa-md row items-start justify-center q-gutter-md">
-        <q-card
-          class="my-card cursor-pointer"
-          v-for="video in videoList"
-          :key="video.id"
-          @click="gotoPlayer(video)"
-        >
-          <q-img
-            :src="video.pic"
-            spinner-color="red"
-            style="height: 200px;width: 290px"
+  <q-page
+    padding
+    class="flex"
+  >
+    <scroll-warp>
+      <q-scroll-area
+        :thumb-style="thumbStyle"
+        class="fit"
+      >
+        <div class="q-pa-md row items-start justify-center q-gutter-md">
+          <q-card
+            class="my-card cursor-pointer"
+            v-for="video in videoList"
+            :key="video.id"
+            @click="gotoPlayer(video)"
           >
-            <div
-              class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
-            >{{video.name}}</div>
-            <template v-slot:error>
-              <div class="absolute-full flex flex-center bg-negative text-white">
-                <span>Cannot load image</span>
-                <div
-                  class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
-                >{{video.name}}</div>
+            <q-img
+              :src="video.pic"
+              spinner-color="red"
+              style="height: 200px;width: 290px"
+            >
+              <div
+                class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
+              >{{video.name}}</div>
+              <template v-slot:error>
+                <div class="absolute-full flex flex-center bg-negative text-white">
+                  <span>Cannot load image</span>
+                  <div
+                    class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
+                  >{{video.name}}</div>
+                </div>
+              </template>
+            </q-img>
+            <q-card-section>
+              <div class="text-h6 ellipsis title">
+                {{video.name}}
+                <q-tooltip>{{video.name}}</q-tooltip>
               </div>
-            </template>
-          </q-img>
-          <q-card-section>
-            <div class="text-h6 ellipsis title">
-              {{video.name}}
-              <q-tooltip>{{video.name}}</q-tooltip>
-            </div>
-            <q-chip
-              square
-              color="teal"
-              text-color="white"
-              icon="bookmark"
-            >{{video.type}}</q-chip>
-            <q-chip
-              square
-              color="teal"
-              text-color="white"
-              icon="event"
-            >{{video.last}}</q-chip>
-          </q-card-section>
-        </q-card>
-      </div>
-      <div class="q-pa-lg flex flex-center">
-        <q-pagination
-          v-model="pagination.page"
-          :max="pagination.total"
-          :input="true"
-        ></q-pagination>
-      </div>
-      <q-inner-loading :showing="loading">
-        <q-spinner-gears
-          size="50px"
-          color="primary"
-        />
-      </q-inner-loading>
-    </q-scroll-area>
+              <q-chip
+                square
+                color="teal"
+                text-color="white"
+                icon="bookmark"
+              >{{video.type}}</q-chip>
+              <q-chip
+                square
+                color="teal"
+                text-color="white"
+                icon="event"
+              >{{video.last}}</q-chip>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="q-pa-lg flex flex-center">
+          <q-pagination
+            v-model="pagination.page"
+            :max="pagination.total"
+            :input="true"
+          ></q-pagination>
+        </div>
+        <q-inner-loading :showing="loading">
+          <q-spinner-gears
+            size="50px"
+            color="primary"
+          />
+        </q-inner-loading>
+      </q-scroll-area>
+    </scroll-warp>
   </q-page>
 </template>
 
 <script>
+import scrollWarp from 'components/scrollWarp';
 import util from 'util';
 import { parseString } from 'xml2js';
 import _toInteger from 'lodash/toInteger';
@@ -82,10 +88,17 @@ export default {
         page: 1,
         total: 0,
       },
+      scrollStyle: {
+        height: 0,
+      },
     };
   },
+  components: {
+    scrollWarp,
+  },
   mounted() {
     this.getVideoList(1);
+    console.log(this.layout);
   },
   watch: {
     // eslint-disable-next-line func-names