diff --git a/src/components/Box.vue b/src/components/Box.vue
index dff617a..2ba2d5b 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -6,7 +6,7 @@
             v-text="step"
             v-if="step"
         ></div>
-        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
+        <div class="flex flex-row items-center border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type, sizes[size].container]">
             <div class="flex-grow text-sm" :class="colors[type].text">
                 <slot />
             </div>
@@ -35,11 +35,25 @@ const colors = ref({
     },
 });
 
+const sizes = ref({
+    default: {
+        container: 'p-4',
+    },
+    sm: {
+        container: 'p-2',
+    },
+});
+
 const props = defineProps({
     type: {
         required: true,
         type: String,
     },
+    size: {
+        required: false,
+        type: String,
+        default: () => 'default',
+    },
     step: {
         required: false,
         type: Number,