diff --git a/src/components/ui-showcase/sections/ButtonsSection.tsx b/src/components/ui-showcase/sections/ButtonsSection.tsx
index 5f9d9da..efa681b 100644
--- a/src/components/ui-showcase/sections/ButtonsSection.tsx
+++ b/src/components/ui-showcase/sections/ButtonsSection.tsx
@@ -12,7 +12,7 @@ export function ButtonsSection() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button variant="primary">Primary Button</Button>
             <Button variant="secondary">Secondary Button</Button>
             <Button variant="ghost">Ghost Button</Button>
@@ -24,7 +24,7 @@ export function ButtonsSection() {
 
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">Sizes</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button size="sm">Small Button</Button>
             <Button size="md">Medium Button</Button>
             <Button size="lg">Large Button</Button>
@@ -33,7 +33,7 @@ export function ButtonsSection() {
 
         <div className="space-y-6">
           <h3 className="text-lg font-medium text-[var(--foreground)]">States</h3>
-          <div className="space-y-4">
+          <div className="space-y-4 space-x-4">
             <Button>Normal State</Button>
             <Button disabled>Disabled State</Button>
             <Button className="opacity-50">Loading State</Button>