diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index dd6d299d..aadeb5e8 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -5,8 +5,8 @@
   export let color = 'blue';
   export let rounded = true;
 
-  let px = 4;
-  let py = 2;
+  let px = 'px-4';
+  let py = 'py-2';
   let textColor = 'white';
   let borderColor = 'white';
 
@@ -27,18 +27,18 @@
 
   $: switch (size) {
     case 'md':
-      px = 4;
-      py = 2;
+      px = 'px-4';
+      py = 'py-2';
       break;
     case 'sm':
-      px = 1;
-      py = 1;
+      px = 'px-1';
+      py = 'py-1';
       break;
   }
 </script>
 
 <button
   {disabled}
-  class={`text-${textColor} border-2 border-white border-opacity-25 ${rounded ? 'rounded-xl' : 'rounded-none'} px-${px} py-${py} transition duration-100
+  class={`text-${textColor} border-2 border-white border-opacity-25 ${rounded ? 'rounded-xl' : 'rounded-none'} ${px} ${py} transition duration-100
      hover:border-${borderColor} focus:outline-none focus:border-${borderColor} disabled:opacity-50 disabled:border-gray-600 ${className}`}
   on:click><slot /></button>