diff --git a/frontend/src/components/DownloadButton.vue b/frontend/src/components/DownloadButton.vue
index 3e9795f..4fa9a1d 100644
--- a/frontend/src/components/DownloadButton.vue
+++ b/frontend/src/components/DownloadButton.vue
@@ -2,10 +2,13 @@
 const props = defineProps({
   disabled: Boolean,
 });
+
+const emit = defineEmits(["enable-download"]);
 </script>
 
 <template>
   <button
+    @click="emit('enable-download')"
     class="btn btn-lg btn-primary px-3 mb-4 z-3 shadow position-absolute bottom-0 start-50 translate-middle-x"
     :disabled="disabled"
   >
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index fd26812..30edcc4 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -1,31 +1,74 @@
 <script setup>
+import { onMounted, ref, inject, computed } from "vue";
+
 import AudioCard from "../components/AudioCard.vue";
 import TotalProgress from "../components/TotalProgress.vue";
 import DownloadButton from "../components/DownloadButton.vue";
 
-const p1 = {
-  number: "BV1es41127Fd",
-  received: 0,
-  total: 0,
-};
-const p2 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 0,
-  total: 0,
-};
-const p3 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 1314514,
-  total: 1919810,
-};
-const p4 = {
-  number: "BV1es41127Fd",
-  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
-  received: 1919810,
-  total: 1919810,
-};
+const axios = inject("axios");
+
+const state_list = ref([]);
+
+const auto_download = ref(false);
+
+onMounted(() => {
+  setInterval(() => {
+    axios.get("http://localhost:8000/progress").then((resp) => {
+      state_list.value = resp.data;
+      for (const [i, s] of state_list.value.entries()) {
+        if (
+          auto_download.value &&
+          counter.value.downloading == 0 &&
+          s.number &&
+          s.title &&
+          s.total == 0
+        ) {
+          axios.post("http://localhost:8000/download", {
+            id: i,
+            parent_dir: "/home/zhao/Desktop/tmp",
+          });
+          break;
+        }
+      }
+    });
+  }, 500);
+});
+
+const counter = computed(() => {
+  if (state_list.value.length == 0) {
+    return { fetching: true, downloading: false };
+  }
+  let ready = 0;
+  let downloading = 0;
+  let finished = 0;
+  state_list.value.forEach((s) => {
+    if (s.number && s.title && s.total == 0) {
+      ready++;
+    } else if (s.received < s.total) {
+      downloading++;
+    } else if (s.total <= s.received && s.total != 0) {
+      finished++;
+    }
+  });
+  return { ready: ready, downloading: downloading, finished: finished };
+});
+
+const progress_info = computed(() => {
+  const total = state_list.value.length;
+  const { ready, downloading, finished } = counter.value;
+  const fetch_info = "Fetching Information";
+  const download_info = "Downloading";
+  const finished_info = "Downloads Complete";
+  if (total == 0) {
+    return { display: fetch_info, finished: 0, total: 0 };
+  } else if (ready < total && downloading == 0 && finished == 0) {
+    return { display: fetch_info, finished: ready, total: total };
+  } else if (finished + downloading + ready == total && finished < total) {
+    return { display: download_info, finished: finished + downloading, total: total };
+  } else if (finished == total) {
+    return { display: finished_info, finished: finished, total: total };
+  }
+});
 </script>
 
 <template>
@@ -34,21 +77,18 @@ const p4 = {
   >
     <div class="container overflow-y-scroll flex-grow-1">
       <div class="row g-3 py-3">
-        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-          <AudioCard v-bind="p1"></AudioCard>
-        </div>
-        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-          <AudioCard v-bind="p2"></AudioCard>
-        </div>
-        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-          <AudioCard v-bind="p3"></AudioCard>
-        </div>
-        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-          <AudioCard v-bind="p4"></AudioCard>
+        <div
+          v-for="state in state_list"
+          class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0"
+        >
+          <AudioCard v-bind="state"></AudioCard>
         </div>
       </div>
     </div>
-    <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
-    <!-- <DownloadButton></DownloadButton> -->
+    <DownloadButton
+      @enable-download="auto_download = true"
+      v-if="counter.ready == state_list.length"
+    ></DownloadButton>
+    <TotalProgress v-else v-bind="progress_info"></TotalProgress>
   </div>
 </template>