diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index c749e61..7f51991 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -341,9 +341,9 @@ export function ImageConverter() {
   const hasImages = images.length > 0;
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full">
-      <div className="lg:col-span-1 flex flex-col gap-8 lg:sticky lg:top-8 self-start">
-        <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full">
+      <div className="lg:col-span-1 flex flex-col gap-4 lg:sticky lg:top-8 self-start">
+        <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
           <AccordionItem value="image-settings" className="border rounded-lg bg-card">
             <AccordionTrigger className="p-6 hover:no-underline">
               <div className="text-left">
@@ -509,7 +509,7 @@ export function ImageConverter() {
         </Button>
       </div>
 
-      <div className="lg:col-span-2 flex flex-col gap-8">
+      <div className="lg:col-span-2 flex flex-col gap-4">
         <Card>
           <CardContent className="pt-6">
             <div className="space-y-4">