diff --git a/frontend/src/components/DownloadButton.vue b/frontend/src/components/DownloadButton.vue
new file mode 100644
index 0000000..5c2109c
--- /dev/null
+++ b/frontend/src/components/DownloadButton.vue
@@ -0,0 +1,13 @@
+<script setup></script>
+
+<template>
+  <button class="btn btn-lg btn-primary z-3 m-2 p-3 shadow">
+    <span class="button-text"><i class="bi-download"></i><span class="mx-1"></span>Download All</span>
+  </button>
+</template>
+
+<style scoped>
+/* .button-text {
+  font-size: 18px;
+} */
+</style>
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index 773d438..c3357b0 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -1,6 +1,7 @@
 <script setup>
 import AudioCard from "../components/AudioCard.vue";
-import TotalProgress from "../components/TotalProgress.vue";
+// import TotalProgress from "../components/TotalProgress.vue";
+import DownloadButton from "../components/DownloadButton.vue";
 
 const p1 = {
   number: "BV1es41127Fd",
@@ -47,7 +48,8 @@ const p4 = {
         </div>
       </div>
     </div>
-    <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
+    <!-- <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress> -->
+    <DownloadButton></DownloadButton>
   </div>
 </template>