diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index facffed..1fa4360 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -22,6 +22,7 @@
 				"ghost-destructive":
 					"hover:bg-destructive hover:text-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
+				folder:""
 			},
 			size: {
 				default: "h-10 px-4 py-2",
diff --git a/src/routes/(app)/app/+page.svelte b/src/routes/(app)/app/+page.svelte
index cd0ddfe..ffc580e 100644
--- a/src/routes/(app)/app/+page.svelte
+++ b/src/routes/(app)/app/+page.svelte
@@ -21,13 +21,19 @@
 	};
 </script>
 
-<Main class="min-h-app-main max-w-screen-lg">
-	<h1 class="text-3xl font-bold">Welcome to SvelteKit</h1>
+<!--Home Page Test-->
 
-	<p>
-		Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a>
-		to read the documentation
-	</p>
+<Main class="min-h-app-main max-w-screen-lg">
+	<div>
+		<h1 class="text-3xl font-bold">Folders</h1>
+		<div>
+			<!-- Div to store each folder / folder button in-->
+			<Button variant="folder">Work</Button>
+			<Button variant="destructive">Personal</Button>
+			<Button variant="destructive">Photos</Button>
+			<Button variant="destructive">Bills</Button>
+		</div>
+	</div>
 
 	<Button onclick={aaaa} variant="default">Button</Button>
 	<Button variant="destructive">AAAAAAAA</Button>