diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 5c7a23e..80f1b14 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -2,14 +2,14 @@
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
 	export let href = '#';
-	export let fontsize = '1.2rem';
+	export let width = 'max-content';
 	export let icon = "";
 </script>
 
 <a href={href}>
 	<div 
 		class={type} 
-		style="font-size: {fontsize};" 
+		style="width: {width};" 
 	>
 		<img src="icons/{icon}.svg" alt="{icon}"/>
 		<slot/>
@@ -22,8 +22,8 @@
 		border-radius: 16px;
 	}
 	div, .button-secondary {
+		font-size: 1.1rem;
 		height: 60px;
-		width: max-content;
 		color: var(--white);
 		font-weight: 600;
 		border: none;
diff --git a/src/lib/components/organisms/Home.svelte b/src/lib/components/organisms/Home.svelte
index 2fac224..01168df 100644
--- a/src/lib/components/organisms/Home.svelte
+++ b/src/lib/components/organisms/Home.svelte
@@ -12,8 +12,8 @@
 		</h2>
 
 		<div class="hero-buttons">
-			<Button icon="download" kind="primary" href="download" fontsize="1.2rem">Download</Button>
-			<Button icon="docs" href="docs" fontsize="1.2rem" >Read The Docs</Button>
+			<Button icon="download" kind="primary" href="download" width="100%">Download</Button>
+			<Button icon="docs" href="docs" width="100%" >Read The Docs</Button>
 		</div>
 	</div>
 </section>