diff --git a/package.json b/package.json
index adeca9b..986026c 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
+		"filesize": "^10.1.2",
 		"globals": "^15.0.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2805316..8f2b179 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       eslint-plugin-svelte:
         specifier: ^2.36.0
         version: 2.39.4(eslint@9.5.0)(svelte@4.2.18)
+      filesize:
+        specifier: ^10.1.2
+        version: 10.1.2
       globals:
         specifier: ^15.0.0
         version: 15.5.0
@@ -770,6 +773,10 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
+  filesize@10.1.2:
+    resolution: {integrity: sha512-Dx770ai81ohflojxhU+oG+Z2QGvKdYxgEr9OSA8UVrqhwNHjfH9A8f5NKfg83fEH8ZFA5N5llJo5T3PIoZ4CRA==}
+    engines: {node: '>= 10.4.0'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -2182,6 +2189,8 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  filesize@10.1.2: {}
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
diff --git a/src/app.css b/src/app.css
index bd6213e..2f0bb1b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/app.d.ts b/src/app.d.ts
index 743f07b..c20b4e5 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,13 +1,44 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+  declare type FileDropEvent = import('filedrop-svelte/event').FileDropEvent;
+  declare type FileDropSelectEvent = import('filedrop-svelte/event').FileDropSelectEvent;
+  declare type FileDropDragEvent = import('filedrop-svelte/event').FileDropDragEvent;
+  declare namespace svelte.JSX {
+    interface HTMLAttributes<T> {
+      onfiledrop?: (event: CustomEvent<FileDropSelectEvent> & { target: EventTarget & T }) => void;
+      onfiledragenter?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+      onfiledragleave?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+      onfiledragover?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+      onfiledialogcancel?: (
+        event: CustomEvent<FileDropEvent> & { target: EventTarget & T }
+      ) => void;
+      onfiledialogclose?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
+      onfiledialogopen?: (event: CustomEvent<FileDropEvent> & { target: EventTarget & T }) => void;
+      onwindowfiledragenter?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+      onwindowfiledragleave?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+      onwindowfiledragover?: (
+        event: CustomEvent<FileDropDragEvent> & { target: EventTarget & T }
+      ) => void;
+    }
+  }
 }
 
 export {};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a8baa8..57af114 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,61 +1,120 @@
 <script lang="ts">
-    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
-    
-  let file;
-  let form;
+  import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
+  import { filesize } from 'filesize';
+
+  let file: File | undefined = undefined;
   let percent = 0;
+  let isDragging = false;
 
-  let completeMessage: string | undefined
-  
-  const handleFileChange = (event: Event & { currentTarget: HTMLInputElement }) => {
-    const target = event.target as unknown as { files: File[] }
-    const file = target.files[0]
+  let completeURL: string | undefined;
 
-    const formData = new FormData();
-    formData.append('file', file)
-
-    let xhr = new XMLHttpRequest()
-    xhr.upload.onprogress = function(event) {
-        percent = Math.round(100 * event.loaded / event.total);
-        // do something with the percentage
+  const handleFormClick = () => {
+    if (percent > 0) {
+      return;
     }
 
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '*';
+    input.onchange = (e) => {
+      if (input.files) {
+        file = input.files[0];
+        handleFileChange(file);
+      }
+    };
+    input.click();
+  };
+
+  const handleFileChange = (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    let xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = function (event) {
+      percent = Math.round((100 * event.loaded) / event.total);
+      // do something with the percentage
+    };
+
     xhr.onreadystatechange = (event) => {
-        if (xhr.readyState === 4 && xhr.status < 400) {
-            const response = JSON.parse(xhr.responseText)
-            completeMessage = `Upload complete! Access your file at http://localhost:5173/${response.id}`
-        }
-    }
+      if (xhr.readyState === 4 && xhr.status < 400) {
+        const response = JSON.parse(xhr.responseText);
+        completeURL = `${window.location.origin}/files/${response.id}`;
+      }
+    };
 
-    xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`)
-    xhr.send(formData)
-  }
+    xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`);
+    xhr.send(formData);
+  };
+
+  const handleDrop = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    e.preventDefault();
+    if (e.dataTransfer?.files) {
+      file = e.dataTransfer.files[0];
+      handleFileChange(file);
+    }
+  };
+
+  const handleDragEnter = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    isDragging = true;
+  };
+
+  const handleDragLeave = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    isDragging = false;
+  };
+
+  const handleDragOver = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    e.preventDefault();
+  };
 </script>
 
-<main class="flex flex-col items-center">
+<main class="flex flex-col items-center h-full w-full">
   <h1 class="text-4xl font-bold mt-4">KatStash</h1>
 
   <h2 class="text-2xl font-semibold mt-2">
     Uploads up to 200 MB are allowed. Contact SphericalKat for more details
   </h2>
 
-  {#if completeMessage}
-    <h2 class="text-2xl font-semibold mt-2">Upload complete1</h2>
-  {/if}
-
-  <form bind:this={form} method="POST">
-    <label class="block">
-      <span class="sr-only"></span>
-      <input
-        bind:this={file}
-        on:change={handleFileChange}
-        type="file"
-        id="file"
-        class="file:hidden file:px-4 block w-full h-full text-sm text-slate-500"
-      />
-      {#if percent > 0}
-        <div>{percent}%</div>
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    on:dragenter={handleDragEnter}
+    on:dragleave={handleDragLeave}
+    on:drop={handleDrop}
+    on:dragover={handleDragOver}
+    on:click={handleFormClick}
+    class:border-dashed={percent === 0}
+    class:cursor-pointer={percent === 0 && !completeURL}
+    class="h-48 w-[650px] mt-40 border-2 border-slate-500 rounded-lg flex items-center justify-center cursor-pointer"
+  >
+    <div class="block">
+      {#if percent > 0 && !completeURL}
+        <span class="text-slate-500 px-16">Uploading {percent}%</span>
+      {:else if percent < 100 && !completeURL}
+        <span class="text-slate-500 px-16">Select or drop a file</span>
+      {:else}
+        <div class="text-slate-500 px-16">
+          Upload complete! Access your file at <a class="underline text-blue-500" href={completeURL}
+            >{completeURL}</a
+          >
+        </div>
       {/if}
-    </label>
-  </form>
+    </div>
+  </div>
 </main>
diff --git a/src/routes/files/[slug]/+server.ts b/src/routes/files/[slug]/+server.ts
index 093d75a..3f74b75 100644
--- a/src/routes/files/[slug]/+server.ts
+++ b/src/routes/files/[slug]/+server.ts
@@ -1,4 +1,4 @@
-import { json, redirect } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
 import Pocketbase from 'pocketbase';
 import { PUBLIC_POCKETBASE_URL } from '$env/static/public';