diff --git a/package-lock.json b/package-lock.json
index 324af0ec8..736f37b54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -153,6 +153,12 @@
       "integrity": "sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==",
       "dev": true
     },
+    "@types/streamsaver": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/streamsaver/-/streamsaver-2.0.1.tgz",
+      "integrity": "sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==",
+      "dev": true
+    },
     "@types/video.js": {
       "version": "7.3.27",
       "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.27.tgz",
@@ -1484,6 +1490,11 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "streamsaver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/streamsaver/-/streamsaver-2.0.5.tgz",
+      "integrity": "sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index c9f59e76a..2d4730ed4 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
     "clipboard": "^2.0.8",
     "dplayer": "^1.26.0",
     "plyr": "^3.6.9",
+    "streamsaver": "^2.0.5",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@types/dplayer": "^1.25.2",
+    "@types/streamsaver": "^2.0.1",
     "@types/video.js": "^7.3.27",
     "@vicons/tabler": "^0.11.0",
     "@vitejs/plugin-vue": "^1.9.3",
diff --git a/public/mitm.html b/public/mitm.html
new file mode 100644
index 000000000..04450a929
--- /dev/null
+++ b/public/mitm.html
@@ -0,0 +1,166 @@
+<!--
+	mitm.html is the lite "man in the middle"
+
+	This is only meant to signal the opener's messageChannel to
+	the service worker - when that is done this mitm can be closed
+    but it's better to keep it alive since this also stops the sw
+    from restarting
+
+	The service worker is capable of intercepting all request and fork their
+	own "fake" response - wish we are going to craft
+	when the worker then receives a stream then the worker will tell the opener
+	to open up a link that will start the download
+-->
+<script>
+// This will prevent the sw from restarting
+let keepAlive = () => {
+  keepAlive = () => {}
+  var ping = location.href.substr(0, location.href.lastIndexOf('/')) + '/ping'
+  var interval = setInterval(() => {
+    if (sw) {
+      sw.postMessage('ping')
+    } else {
+      fetch(ping).then(res => res.text(!res.ok && clearInterval(interval)))
+    }
+  }, 10000)
+}
+
+// message event is the first thing we need to setup a listner for
+// don't want the opener to do a random timeout - instead they can listen for
+// the ready event
+// but since we need to wait for the Service Worker registration, we store the
+// message for later
+let messages = []
+window.onmessage = evt => messages.push(evt)
+
+let sw = null
+let scope = ''
+
+function registerWorker() {
+  return navigator.serviceWorker.getRegistration('./').then(swReg => {
+    return swReg || navigator.serviceWorker.register('sw.js', { scope: './' })
+  }).then(swReg => {
+    const swRegTmp = swReg.installing || swReg.waiting
+
+    scope = swReg.scope
+
+    return (sw = swReg.active) || new Promise(resolve => {
+      swRegTmp.addEventListener('statechange', fn = () => {
+        if (swRegTmp.state === 'activated') {
+          swRegTmp.removeEventListener('statechange', fn)
+          sw = swReg.active
+          resolve()
+        }
+      })
+    })
+  })
+}
+
+// Now that we have the Service Worker registered we can process messages
+function onMessage (event) {
+  let { data, ports, origin } = event
+
+  // It's important to have a messageChannel, don't want to interfere
+  // with other simultaneous downloads
+  if (!ports || !ports.length) {
+    throw new TypeError("[StreamSaver] You didn't send a messageChannel")
+  }
+
+  if (typeof data !== 'object') {
+    throw new TypeError("[StreamSaver] You didn't send a object")
+  }
+
+  // the default public service worker for StreamSaver is shared among others.
+  // so all download links needs to be prefixed to avoid any other conflict
+  data.origin = origin
+
+  // if we ever (in some feature versoin of streamsaver) would like to
+  // redirect back to the page of who initiated a http request
+  data.referrer = data.referrer || document.referrer || origin
+
+  // pass along version for possible backwards compatibility in sw.js
+  data.streamSaverVersion = new URLSearchParams(location.search).get('version')
+
+  if (data.streamSaverVersion === '1.2.0') {
+    console.warn('[StreamSaver] please update streamsaver')
+  }
+
+  /** @since v2.0.0 */
+  if (!data.headers) {
+    console.warn("[StreamSaver] pass `data.headers` that you would like to pass along to the service worker\nit should be a 2D array or a key/val object that fetch's Headers api accepts")
+  } else {
+    // test if it's correct
+    // should thorw a typeError if not
+    new Headers(data.headers)
+  }
+
+  /** @since v2.0.0 */
+  if (typeof data.filename === 'string') {
+    console.warn("[StreamSaver] You shouldn't send `data.filename` anymore. It should be included in the Content-Disposition header option")
+    // Do what File constructor do with fileNames
+    data.filename = data.filename.replace(/\//g, ':')
+  }
+
+  /** @since v2.0.0 */
+  if (data.size) {
+    console.warn("[StreamSaver] You shouldn't send `data.size` anymore. It should be included in the content-length header option")
+  }
+
+  /** @since v2.0.0 */
+  if (data.readableStream) {
+    console.warn("[StreamSaver] You should send the readableStream in the messageChannel, not throught mitm")
+  }
+
+  /** @since v2.0.0 */
+  if (!data.pathname) {
+    console.warn("[StreamSaver] Please send `data.pathname` (eg: /pictures/summer.jpg)")
+    data.pathname = Math.random().toString().slice(-6) + '/' + data.filename
+  }
+
+  // remove all leading slashes
+  data.pathname = data.pathname.replace(/^\/+/g, '')
+
+  // remove protocol
+  let org = origin.replace(/(^\w+:|^)\/\//, '')
+
+  // set the absolute pathname to the download url.
+  data.url = new URL(`${scope + org}/${data.pathname}`).toString()
+
+  if (!data.url.startsWith(`${scope + org}/`)) {
+    throw new TypeError('[StreamSaver] bad `data.pathname`')
+  }
+
+  // This sends the message data as well as transferring
+  // messageChannel.port2 to the service worker. The service worker can
+  // then use the transferred port to reply via postMessage(), which
+  // will in turn trigger the onmessage handler on messageChannel.port1.
+
+  const transferable = data.readableStream
+    ? [ ports[0], data.readableStream ]
+    : [ ports[0] ]
+
+  if (!(data.readableStream || data.transferringReadable)) {
+    keepAlive()
+  }
+
+  return sw.postMessage(data, transferable)
+}
+
+if (window.opener) {
+  // The opener can't listen to onload event, so we need to help em out!
+  // (telling them that we are ready to accept postMessage's)
+  window.opener.postMessage('StreamSaver::loadedPopup', '*')
+}
+
+if (navigator.serviceWorker) {
+  registerWorker().then(() => {
+    window.onmessage = onMessage
+    messages.forEach(window.onmessage)
+  })
+} else {
+  // FF can ping sw with fetch from a secure hidden iframe
+  // shouldn't really be possible?
+  keepAlive()
+}
+
+</script>
diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 000000000..605af6308
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,128 @@
+/* global self ReadableStream Response */
+
+self.addEventListener('install', () => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim())
+})
+
+const map = new Map()
+
+// This should be called once per download
+// Each event has a dataChannel that the data will be piped through
+self.onmessage = event => {
+  // We send a heartbeat every x second to keep the
+  // service worker alive if a transferable stream is not sent
+  if (event.data === 'ping') {
+    return
+  }
+
+  const data = event.data
+  const downloadUrl = data.url || self.registration.scope + Math.random() + '/' + (typeof data === 'string' ? data : data.filename)
+  const port = event.ports[0]
+  const metadata = new Array(3) // [stream, data, port]
+
+  metadata[1] = data
+  metadata[2] = port
+
+  // Note to self:
+  // old streamsaver v1.2.0 might still use `readableStream`...
+  // but v2.0.0 will always transfer the stream through MessageChannel #94
+  if (event.data.readableStream) {
+    metadata[0] = event.data.readableStream
+  } else if (event.data.transferringReadable) {
+    port.onmessage = evt => {
+      port.onmessage = null
+      metadata[0] = evt.data.readableStream
+    }
+  } else {
+    metadata[0] = createStream(port)
+  }
+
+  map.set(downloadUrl, metadata)
+  port.postMessage({ download: downloadUrl })
+}
+
+function createStream (port) {
+  // ReadableStream is only supported by chrome 52
+  return new ReadableStream({
+    start (controller) {
+      // When we receive data on the messageChannel, we write
+      port.onmessage = ({ data }) => {
+        if (data === 'end') {
+          return controller.close()
+        }
+
+        if (data === 'abort') {
+          controller.error('Aborted the download')
+          return
+        }
+
+        controller.enqueue(data)
+      }
+    },
+    cancel () {
+      console.log('user aborted')
+    }
+  })
+}
+
+self.onfetch = event => {
+  const url = event.request.url
+
+  // this only works for Firefox
+  if (url.endsWith('/ping')) {
+    return event.respondWith(new Response('pong'))
+  }
+
+  const hijacke = map.get(url)
+
+  if (!hijacke) return null
+
+  const [ stream, data, port ] = hijacke
+
+  map.delete(url)
+
+  // Not comfortable letting any user control all headers
+  // so we only copy over the length & disposition
+  const responseHeaders = new Headers({
+    'Content-Type': 'application/octet-stream; charset=utf-8',
+
+    // To be on the safe side, The link can be opened in a iframe.
+    // but octet-stream should stop it.
+    'Content-Security-Policy': "default-src 'none'",
+    'X-Content-Security-Policy': "default-src 'none'",
+    'X-WebKit-CSP': "default-src 'none'",
+    'X-XSS-Protection': '1; mode=block'
+  })
+
+  let headers = new Headers(data.headers || {})
+
+  if (headers.has('Content-Length')) {
+    responseHeaders.set('Content-Length', headers.get('Content-Length'))
+  }
+
+  if (headers.has('Content-Disposition')) {
+    responseHeaders.set('Content-Disposition', headers.get('Content-Disposition'))
+  }
+
+  // data, data.filename and size should not be used anymore
+  if (data.size) {
+    console.warn('Depricated')
+    responseHeaders.set('Content-Length', data.size)
+  }
+
+  let fileName = typeof data === 'string' ? data : data.filename
+  if (fileName) {
+    console.warn('Depricated')
+    // Make filename RFC5987 compatible
+    fileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A')
+    responseHeaders.set('Content-Disposition', "attachment; filename*=UTF-8''" + fileName)
+  }
+
+  event.respondWith(new Response(stream, { headers: responseHeaders }))
+
+  port.postMessage({ debug: 'Download started' })
+}
diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 000000000..5a4835391
Binary files /dev/null and b/src/assets/logo1.png differ
diff --git a/src/components/Task.vue b/src/components/Task.vue
index e8edb0b5f..8342d0637 100644
--- a/src/components/Task.vue
+++ b/src/components/Task.vue
@@ -139,7 +139,6 @@ import { CircleX } from '@vicons/tabler'
   vertical-align: baseline;
 }
 .content {
-  margin-top: 20px;
   width: 375px;
   max-height: 530px;
   min-height: 54px;
diff --git a/src/index.d.ts b/src/index.d.ts
index b12b82a72..d5c14db13 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,3 +1,4 @@
 interface Window {
-  $message: any
+  $message: any,
+  $downId: string[]
 }
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 0cebf7012..58214f4a2 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -25,19 +25,28 @@
           :percentage="Number((aboutInfo?.quota.usage / aboutInfo?.quota.limit * 100).toFixed(2))"
           :indicator-placement="'inside'"
           :height="14"
+          :color="vipInfo?.status === 'ok' ? '#d1ae6a' : undefined"
           processing>
         </n-progress>
       </div>
-      <div class="sider-bottom" v-if="!collapsed">
+      <div class="sider-bottom" v-if="!collapsed" :class="{vip: vipInfo?.status === 'ok'}">
         <div class="bottom-user-info">
-          <img src="https://www.mypikpak.com/logo.png" class="user-info-avatar">
-          <span class="user-info-name">{{userInfo?.name}}</span>
+          <img src="../../assets/logo1.png" class="user-info-avatar" v-if="vipInfo?.status === 'ok'">
+          <img src="https://www.mypikpak.com/logo.png" v-else class="user-info-avatar">
+          <div class="user-info-name">
+            {{userInfo?.name}}
+            <div v-if="vipInfo?.status === 'ok' && vipInfo?.expire">
+              会员时间 <n-time :to="new Date().getTime()" :time="new Date(vipInfo.expire).getTime()" type="relative"></n-time>
+            </div>
+          </div>
         </div>
       </div>
     </n-layout-sider>
     <n-layout>
       <n-layout-content style="height: 100vh;">
-        <router-view></router-view>
+        <n-scrollbar style="max-height: 100vh;">
+          <router-view></router-view>
+        </n-scrollbar>
       </n-layout-content>
     </n-layout>
   </n-layout>
@@ -59,7 +68,7 @@
 <script setup lang="ts">
 import { ref } from '@vue/reactivity';
 import { h, onMounted } from '@vue/runtime-core';
-import { NLayout, NLayoutSider, NLayoutContent, NMenu, MenuOption, NIcon, NProgress, NText, NModal, NCard, NInput, NButton} from 'naive-ui'
+import { NLayout, NLayoutSider, NLayoutContent, NMenu, MenuOption, NIcon, NProgress, NText, NModal, NCard, NInput, NButton, NScrollbar, NTime } from 'naive-ui'
 import { File, Trash, CircleX } from '@vicons/tabler'
 import http from '../../utils/axios'
 import { byteConvert } from '../../utils'
@@ -96,6 +105,13 @@ import { useRoute, useRouter } from 'vue-router';
         aboutInfo.value = res.data
       })
   }
+  const vipInfo = ref()
+  const getVip = () => {
+    http.get('https://api-drive.mypikpak.com/drive/v1/privilege/vip')
+      .then((res:any) => {
+        vipInfo.value = res.data?.data
+      })
+  }
   const goRoute = (key:string, item:MenuOption) => {
     console.log(item)
     router.push('/' + item.key)
@@ -103,6 +119,7 @@ import { useRoute, useRouter } from 'vue-router';
   onMounted(() => {
     getUserInfo()
     getAbout()
+    getVip()
   })
   const code = ref()
   const showCode = ref(false)
@@ -168,6 +185,9 @@ import { useRoute, useRouter } from 'vue-router';
     padding: 0 20px 0 24px;
     box-sizing: border-box;
   }
+  .sider-bottom.vip {
+    background-color: #f4eddb;
+  }
   .sider-bottom::before {
     display: block;
     content: '';
diff --git a/src/views/list.vue b/src/views/list.vue
index e7b536675..74ec20a55 100644
--- a/src/views/list.vue
+++ b/src/views/list.vue
@@ -17,8 +17,12 @@
         </n-icon>
       </div>
     </div>
-    <n-data-table v-model:checked-row-keys="checkedRowKeys"  :row-key="row => row.id" :data="filesList" size="small" :columns="columns" :loading="loading" :bordered="false"></n-data-table>
-    <n-button block type="primary" style="margin-top: 10px" @click="getFileList" v-if="pageToken">加载更多</n-button>
+    <n-scrollbar style="max-height: calc(100vh - 190px);" @scroll="scrollHandle">
+      <n-data-table v-model:checked-row-keys="checkedRowKeys"  :row-key="row => row.id" :data="filesList" size="small" :columns="columns" :bordered="false"></n-data-table>
+      <div class="loading" v-if="loading">
+        <n-spin size="small" />加载中
+      </div>
+    </n-scrollbar>
     <task-vue ref="taskRef"></task-vue>
     <div class="outer-wrapper static show" v-if="checkedRowKeys.length">
       <div class="toolbar-wrapper">
@@ -88,17 +92,16 @@
 
 <script setup lang="ts">
 import { ref } from '@vue/reactivity';
-import { h, nextTick, onMounted, watch } from '@vue/runtime-core'
+import { h, computed, onMounted, watch } from '@vue/runtime-core'
 import http from '../utils/axios'
 import { useRoute, useRouter } from 'vue-router'
-import { DataTableColumns, NDataTable, NTime, NEllipsis, NModal, NCard, NInput, NBreadcrumb, NBreadcrumbItem, NIcon, useThemeVars, NButton, NText, NPopconfirm, NTooltip, NSpace } from 'naive-ui'
+import { DataTableColumns, NDataTable, NTime, NEllipsis, NModal, NCard, NInput, NBreadcrumb, NBreadcrumbItem, NIcon, useThemeVars, NButton, NText, NPopconfirm, NTooltip, NSpace, NScrollbar, NSpin } from 'naive-ui'
 import { CirclePlus, CircleX, Share } from '@vicons/tabler'
 import { byteConvert } from '../utils'
 import PlyrVue from '../components/Plyr.vue'
 import TaskVue from '../components/Task.vue'
 import ClipboardJS from 'clipboard'
-import { computed } from 'vue';
-
+import streamSaver from 'streamsaver'
   const filesList = ref()
   const route = useRoute()
   const router = useRouter()
@@ -185,10 +188,20 @@ import { computed } from 'vue';
     {
       title: '',
       key: 'action',
-      width: 120,
+      width: 170,
       align: 'right',
-      render: (row:any) => h(NSpace, {}, {
+      render: (row:any) => h(NSpace, {
+        justify: 'end'
+      }, {
         default: () => [
+          row.size > 0 ? h(NText,{
+            type: 'primary',
+            onClick: () => {
+              downFile(row.id)
+            }
+          }, {
+            default: () => "下载"
+          }) : '',
           row.size > 0 ? h(NText,{
             type: 'primary',
             onClick: () => {
@@ -258,7 +271,23 @@ import { computed } from 'vue';
     initPage()
   })
   const parentInfo = ref()
-  onMounted(initPage)
+  onMounted(() => {
+    initPage()
+    window.onbeforeunload = function (e) {
+      if(!window.$downId || window.$downId.length === 0) {
+        return '还有待下载文件?';
+      }
+      e = e || window.event;
+
+      // 兼容IE8和Firefox 4之前的版本
+      if (e) {
+        e.returnValue = '还有待下载文件';
+      }
+
+      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
+      return '还有待下载文件?';
+    }
+  })
   const fileInfo = ref()
   const getFile = (id:string) => {
     return http.get('https://api-drive.mypikpak.com/drive/v1/files/' + id, {
@@ -380,6 +409,48 @@ import { computed } from 'vue';
     copy(text)
     checkedRowKeys.value = []
   }
+  const downFile = (id:string) => {
+    getFile(id)
+      .then((info:any) => {
+        streamSaver.mitm = 'mitm.html'
+        const fileStream = streamSaver.createWriteStream(info.data.name)
+        fetch(info.data.web_content_link).then((res:any) => {
+          if(!window.$downId) {
+            window.$downId = []
+          }
+          window.$downId.push(id)
+          const readableStream = res.body
+          // more optimized
+          if (window.WritableStream && readableStream?.pipeTo) {
+            return readableStream.pipeTo(fileStream)
+              .then(() => {
+                window.$downId.splice(window.$downId.indexOf(id), 1)
+              })
+          }
+
+          const writer = fileStream.getWriter()
+
+          const reader = res.body.getReader()
+          const pump = () => reader.read()
+            .then((res:any) => {
+              if(res.done) {
+                writer.close()
+              } else {
+                writer.write(res.value).then(pump)
+              }
+            })
+
+          pump()
+        })
+      })
+  }
+  const scrollHandle = (e:any) =>  {
+    if(e.target.offsetHeight - e.target.scrollTop < 30) {
+      if(pageToken.value && !loading.value) {
+        getFileList()
+      }
+    }
+  }
 
 </script>
 
@@ -431,6 +502,15 @@ import { computed } from 'vue';
 .list-page {
   padding: 40px;
 }
+.list-page .loading {
+  margin-top: 20px;
+  text-align: center;
+  color: rgba(37, 38, 43, 0.36);
+}
+.list-page .loading .n-spin-body {
+  vertical-align: middle;
+  margin-right: 10px;
+}
 .list-page-files {
   padding-bottom: 80px;
 }