diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index aabaf06f..9a89a250 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -37,12 +37,22 @@
 	--color-black: #1f1f1f;
 	--color-black-800: #4c4c4c;
 	--color-black-600: #797979;
-	--color-black-400: #a9a9a9;
+	--color-black-400: #a5a5a5;
 	--color-black-200: #d2d2d2;
 
 	--color-grey: #f5f5f5;
 
 	--color-brand-burnt-orange: #da4a11;
+	--color-brand-burnt-orange-100: #f8dbcf;
+	--color-brand-burnt-orange-200: #f3c3b0;
+	--color-brand-burnt-orange-300: #eca488;
+	--color-brand-burnt-orange-400: #e68660;
+	--color-brand-burnt-orange-500: #e06839;
+	--color-brand-burnt-orange-600: #91310b;
+	--color-brand-burnt-orange-700: #6d2509;
+	--color-brand-burnt-orange-800: #491906;
+	--color-brand-burnt-orange-900: #2c0f03;
+
 	--color-brand-gradient: linear-gradient(
 		91.82deg,
 		#4d44ef -36.17%,
diff --git a/platforms/metagram/src/lib/ui/Button/Button.stories.ts b/platforms/metagram/src/lib/ui/Button/Button.stories.ts
index 7f711f04..c55b3cdb 100644
--- a/platforms/metagram/src/lib/ui/Button/Button.stories.ts
+++ b/platforms/metagram/src/lib/ui/Button/Button.stories.ts
@@ -16,8 +16,15 @@ export const Primary = {
 	args: { variant: 'primary', children: ButtonText }
 };
 
-export const Danger = {
-	args: { variant: 'danger', children: ButtonText }
+export const Secondary = {
+	args: {
+		variant: 'secondary',
+		blockingClick: true,
+		children: ButtonText,
+		callback: async () => {
+			await new Promise((resolve) => setTimeout(resolve, 2000));
+		}
+	}
 };
 
 export const Loading = {
diff --git a/platforms/metagram/src/lib/ui/Button/Button.svelte b/platforms/metagram/src/lib/ui/Button/Button.svelte
index 9493bfb1..16af6025 100644
--- a/platforms/metagram/src/lib/ui/Button/Button.svelte
+++ b/platforms/metagram/src/lib/ui/Button/Button.svelte
@@ -3,7 +3,7 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface IButtonProps extends HTMLButtonAttributes {
-		variant?: 'primary' | 'danger';
+		variant?: 'primary' | 'secondary';
 		isLoading?: boolean;
 		callback?: () => Promise<void> | void;
 		blockingClick?: boolean;
@@ -39,13 +39,29 @@
 	};
 
 	const variantClasses = {
-		primary: { background: 'bg-grey', text: 'text-black-800' },
-		danger: { background: 'bg-red-500', text: 'text-white' }
+		primary: {
+			background: 'bg-grey',
+			text: 'text-black-800',
+			border: 'border border-black-400'
+		},
+		secondary: {
+			background: 'bg-brand-burnt-orange',
+			text: 'text-white',
+			border: 'border border-brand-burnt-orange-600'
+		}
 	};
 
 	const disabledVariantClasses = {
-		primary: { background: 'bg-grey/50', text: 'text-black-800/50' },
-		danger: { background: 'bg-red-500/50', text: 'text-white/50' }
+		primary: {
+			background: 'bg-grey/50',
+			text: 'text-black-800/50',
+			border: 'border border-black-400/50'
+		},
+		secondary: {
+			background: 'bg-brand-burnt-orange/50',
+			text: 'text-white/50',
+			border: 'border border-brand-burnt-orange-600/50'
+		}
 	};
 
 	const sizeVariant = {
@@ -64,6 +80,9 @@
 		text: disabled
 			? disabledVariantClasses[variant].text || variantClasses[variant].text
 			: variantClasses[variant].text,
+		border: disabled
+			? disabledVariantClasses[variant].border || variantClasses[variant].border
+			: variantClasses[variant].border,
 		disabled: 'cursor-not-allowed'
 	});
 </script>
@@ -75,6 +94,7 @@
 			classes.common,
 			classes.background,
 			classes.text,
+			classes.border,
 			disabled && classes.disabled,
 			restProps.class
 		].join(' ')