diff --git a/src-tauri/src/downloader.rs b/src-tauri/src/downloader.rs
index 5bb1005..de0b187 100644
--- a/src-tauri/src/downloader.rs
+++ b/src-tauri/src/downloader.rs
@@ -20,7 +20,7 @@ pub async fn download_file(window: tauri::Window, url: &str, path: &str) -> Resu
         .or(Err(format!("Failed to get {}", url)))?;
     let total_size = res
         .content_length()
-        .ok_or(format!("Failed to get content length from '{}'", &url))?;
+        .unwrap_or(0);
 
     // Create file path
     let mut file = File::create(path).or(Err(format!("Failed to create file '{}'", path)))?;
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index ba1ef67..82f985a 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -3,6 +3,9 @@ import { invoke } from '@tauri-apps/api/tauri'
 import './App.css'
 import './custom.css'
 
+/* FOR TESTING */
+import DownloadHandler from '../utils/download'
+
 // Config
 import { getConfig, saveConfig } from '../utils/configuration'
 
@@ -11,6 +14,8 @@ import Topbar from './components/TopBar'
 import BigButton from './components/common/BigButton'
 import Checkbox from './components/common/Checkbox'
 
+const downloadHandler = new DownloadHandler()
+
 async function playGame() {
   const config = await getConfig()
 
@@ -20,6 +25,21 @@ async function playGame() {
   await invoke('run_program', { path: config.game_path })
 }
 
+async function download() {
+  const path = 'S:/Cultivation/grassclipper.zip'
+  const url = 'https://github.com/Grasscutters/GrassClipper/releases/download/v0.9.7/GrassClipper.zip'
+  downloadHandler.addDownload(url, path)
+
+  const intv = setInterval(() => {
+    const prog = downloadHandler.getDownloadProgress(path)
+    console.log(prog)
+
+    if (prog.status === 'finished') {
+      clearInterval(intv)
+    }
+  }, 500)
+}
+
 async function toggleGrasscutter() {
   const config = await getConfig()
 
@@ -32,6 +52,9 @@ function App() {
   return (
     <div className="App">
       <Topbar />
+
+      <button onClick={download}>download file test</button>
+
       <div id="playButton">
         <div id="serverControls">
           <Checkbox label="Connect via Grasscutter" onChange={toggleGrasscutter} />
diff --git a/src/utils/download.ts b/src/utils/download.ts
index 861570c..f9e64e2 100644
--- a/src/utils/download.ts
+++ b/src/utils/download.ts
@@ -3,18 +3,36 @@ import { invoke } from '@tauri-apps/api/tauri'
 import { listen } from '@tauri-apps/api/event'
 
 export default class DownloadHandler {
-  downloads: Array<string>
+  downloads: {
+    path: string,
+    progress: number,
+    total: number,
+    status: string,
+  }[]
 
   // Pass tauri invoke function
   constructor() {
     this.downloads = []
 
     listen('download_progress', (...payload) => {
-      console.log(payload)
+      // @ts-expect-error Payload may be unknown but backend always returns this object
+      const obj: {
+        downloaded: number,
+        total: number,
+        path: string,
+      } = payload[0].payload
+
+      const index = this.downloads.findIndex(download => download.path === obj.path)
+      this.downloads[index].progress = obj.downloaded
     })
 
     listen('download_finished', (...payload) => {
-      console.log(payload)
+      // Remove from array
+      const filename = payload[0]?.payload
+
+      // set status to finished
+      const index = this.downloads.findIndex(download => download.path === filename)
+      this.downloads[index].status = 'finished'
     })
   }
   
@@ -22,7 +40,18 @@ export default class DownloadHandler {
     // Begin download from rust backend
     invoke('download_file', { url, path })
 
-    // Register event handler
-    this.downloads.push(path)
+    const obj = {
+      path,
+      progress: 0,
+      total: 0,
+      status: 'downloading'
+    }
+
+    this.downloads.push(obj)
+  }
+
+  getDownloadProgress(path: string) {
+    const index = this.downloads.findIndex(download => download.path === path)
+    return this.downloads[index] || null
   }
 }
\ No newline at end of file