diff --git a/src/app.css b/src/app.css
index 6751996..41c355f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,7 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-html,
-body {
-	height: 100%;
+:root {
+	--bg: hsl(0, 0%, 100%);
+	--fg: hsl(0, 0%, 10%);
+	--fg-muted: hsl(0, 0%, 40%);
+}
+
+body {
+	@apply text-foreground bg-background;
 }
diff --git a/src/lib/components/visual/Uploader.svelte b/src/lib/components/visual/Uploader.svelte
index 559322d..e69d855 100644
--- a/src/lib/components/visual/Uploader.svelte
+++ b/src/lib/components/visual/Uploader.svelte
@@ -8,12 +8,12 @@
 	let { files = $bindable() }: Props = $props();
 </script>
 
-<div class="flex items-center justify-center h-full">
-	<div
-		class="flex items-center justify-center border-2 border-solid border-black w-full max-w-screen-lg h-80"
-	>
-		<Upload />
-	</div>
+<div
+	class="flex items-center justify-center flex-col border-2 border-solid border-foreground rounded-xl w-full max-w-screen-lg h-80"
+>
+	<Upload />
+	<h2>Drop or click to upload files</h2>
+	<p class="text-foregroundMuted">the</p>
 </div>
 
 <input type="file" class="hidden" bind:files />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e73584f..cc34a91 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,4 +4,13 @@
 	let files = $state<FileList>();
 </script>
 
-<Uploader bind:files />
+<div class="flex items-center justify-center h-full">
+	<Uploader bind:files />
+</div>
+
+<style>
+	/* for this page specifically */
+	:global(html, body) {
+		height: 100%;
+	}
+</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2ba1795..5df2604 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,6 +5,11 @@ export default {
 
 	theme: {
 		extend: {},
+		colors: {
+			background: "var(--bg)",
+			foreground: "var(--fg)",
+			foregroundMuted: "var(--fg-muted)",
+		},
 	},
 
 	plugins: [],