diff --git a/src/lib/components/File.svelte b/src/lib/components/File.svelte
index a028641..9535237 100644
--- a/src/lib/components/File.svelte
+++ b/src/lib/components/File.svelte
@@ -8,25 +8,35 @@
 
 	/** @type {Number} */
 	export let i;
+
+	let percent = 0;
 </script>
 
-<div
-	in:fade|global={{ delay: 100 * i }}
-	class="flex px-1.5 w-full h-14 rounded-md transition-all bg-mantle"
->
-	<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
-		<p class="">
-			{file.name}
-		</p>
-		<div class="flex gap-0.5">
-			{#if file.size > 104857600}
-				<p class="font-bold text-red">
-					<CircleAlert class="w-4 h-4"></CircleAlert>
-				</p>
+<div class="rounded-md bg-mantle">
+	<div
+		in:fade|global={{ delay: 100 * i }}
+		class="flex px-1.5 w-full h-14 rounded-md transition-all"
+		style="
+        background: linear-gradient(90deg, rgb(var(--ctp-surface0)) {percent}%, transparent 
+        {percent}%);"
+	>
+		<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
+			{#if percent === 100}
+				<a href="?" class="text-blue">{file.name}</a>
+			{:else}
+				<p>{file.name}</p>
 			{/if}
-			<p class="text-xs my-auto {file.size > 104857600 ? 'text-red font-bold' : 'text-overlay1'}">
-				{bytesToHumanReadable(file.size)}
-			</p>
+
+			<div class="flex gap-0.5">
+				{#if file.size > 104857600}
+					<p class="font-bold text-red">
+						<CircleAlert class="w-4 h-4"></CircleAlert>
+					</p>
+				{/if}
+				<p class="text-xs my-auto {file.size > 104857600 ? 'text-red font-bold' : 'text-overlay1'}">
+					{bytesToHumanReadable(file.size)}
+				</p>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index a6623bc..41a357e 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -1,9 +1,8 @@
 <script>
-	import { Upload } from 'lucide-svelte';
+	import { Check, Upload } from 'lucide-svelte';
 	import { page } from '$app/stores';
 	import { user } from '$lib/stores';
-	import { fade } from 'svelte/transition';
-	import { bytesToHumanReadable } from '$lib';
+	import { fade, slide } from 'svelte/transition';
 	import File from '$lib/components/File.svelte';
 
 	export let data;
@@ -14,6 +13,8 @@
 
 	/** @type {FileList} */
 	let files;
+
+	let running = false;
 </script>
 
 <form class="hidden" action="">
@@ -32,18 +33,38 @@
 					<File {file} {i}></File>
 				{/each}
 			{/if}
-			<button
-				class="flex w-full {!files?.length
-					? 'h-36'
-					: 'h-14'} transition-all rounded-md outline-2 outline-dotted outline-surface2 bg-mantle"
-				on:click={() => {
-					input.click();
-				}}
-			>
-				<div class="flex m-auto text-lg text-surface2">
-					<Upload></Upload>
+			{#if !running}
+				<div out:slide class="flex gap-2">
+					<button
+						class="flex w-full {!files?.length
+							? 'h-36'
+							: 'h-14'} rounded-md outline-2 outline-dotted outline-surface2 bg-mantle group"
+						on:click={() => {
+							input.click();
+						}}
+					>
+						<div
+							class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-overlay1"
+						>
+							<Upload></Upload>
+						</div>
+					</button>
+					{#if files?.length}
+						<button
+							class="flex w-[25%] h-14 rounded-md transition-all outline-2 outline-dotted outline-surface2 bg-mantle group"
+							on:click={() => {
+								running = true;
+							}}
+						>
+							<div
+								class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-green"
+							>
+								<Check class=""></Check>
+							</div>
+						</button>
+					{/if}
 				</div>
-			</button>
+			{/if}
 		</div>
 		<div class="p-2 mx-auto mb-auto w-full rounded-lg shadow-lg bg-crust">
 			<table class="mx-auto w-full text-sm table-auto">