diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 1ace19b..d5ad972 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -24,6 +24,12 @@ import { Upload, Download, X, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Switch } from "@/components/ui/switch";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 
 export function ImageConverter() {
   const [images, setImages] = useState<File[]>([]);
@@ -35,7 +41,7 @@ export function ImageConverter() {
   
   const [prefix, setPrefix] = useState<string>("");
   const [suffix, setSuffix] = useState<string>("");
-  const [useCounter, setUseCounter] = useState<boolean>(true);
+  const [useCounter, setUseCounter] = useState<boolean>(false);
   const [counterDigits, setCounterDigits] = useState<number>(3);
 
   const [isConverting, setIsConverting] = useState(false);
@@ -189,80 +195,94 @@ export function ImageConverter() {
 
   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">
-        <Card>
-          <CardHeader>
-            <CardTitle>Image Settings</CardTitle>
-            <CardDescription>
-              Adjust resolution and format for all uploaded images.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="width">Width (px)</Label>
-                <Input id="width" type="number" placeholder="e.g., 1920" value={width} onChange={(e) => setWidth(e.target.value)} disabled={!hasImages} />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="height">Height (px)</Label>
-                <Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} disabled={!hasImages} />
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="format">Format</Label>
-              <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)} disabled={!hasImages}>
-                <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="png">PNG</SelectItem>
-                  <SelectItem value="jpeg">JPEG</SelectItem>
-                  <SelectItem value="webp">WEBP</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-          <CardFooter className="flex justify-between">
-            <Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
-            <Button onClick={handleConvertAndDownload} disabled={!hasImages || !width || !height || isConverting}>
-              <Download className="mr-2 h-4 w-4" />
-              {isConverting ? "Converting..." : `Download All (${images.length})`}
-            </Button>
-          </CardFooter>
-        </Card>
+      <div className="lg:col-span-1 flex flex-col">
+        <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
+          <Card>
+            <AccordionItem value="image-settings" className="border-none">
+              <AccordionTrigger className="p-6 hover:no-underline">
+                <div className="text-left">
+                  <CardTitle>Image Settings</CardTitle>
+                  <CardDescription className="mt-1">
+                    Adjust resolution and format for all uploaded images.
+                  </CardDescription>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-6 pb-6">
+                <div className="space-y-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="width">Width (px)</Label>
+                      <Input id="width" type="number" placeholder="e.g., 1920" value={width} onChange={(e) => setWidth(e.target.value)} disabled={!hasImages} />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="height">Height (px)</Label>
+                      <Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} disabled={!hasImages} />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="format">Format</Label>
+                    <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)} disabled={!hasImages}>
+                      <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="png">PNG</SelectItem>
+                        <SelectItem value="jpeg">JPEG</SelectItem>
+                        <SelectItem value="webp">WEBP</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <CardFooter className="px-0 pt-6 pb-0 flex justify-between">
+                  <Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
+                  <Button onClick={handleConvertAndDownload} disabled={!hasImages || !width || !height || isConverting}>
+                    <Download className="mr-2 h-4 w-4" />
+                    {isConverting ? "Converting..." : `Download All (${images.length})`}
+                  </Button>
+                </CardFooter>
+              </AccordionContent>
+            </AccordionItem>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Filename Settings</CardTitle>
-            <CardDescription>Customize the output filenames.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="space-y-2">
-              <Label htmlFor="prefix">Prefix</Label>
-              <Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="suffix">Suffix</Label>
-              <Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} />
-            </div>
-            <div className="flex items-center space-x-2 pt-2">
-              <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} />
-              <Label htmlFor="use-counter">Add sequential number</Label>
-            </div>
-            {useCounter && (
-              <div className="space-y-2 pl-8">
-                <Label htmlFor="counter-digits">Number of digits</Label>
-                <Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}>
-                  <SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="1">1 (e.g., 1)</SelectItem>
-                    <SelectItem value="2">2 (e.g., 01)</SelectItem>
-                    <SelectItem value="3">3 (e.g., 001)</SelectItem>
-                    <SelectItem value="4">4 (e.g., 0001)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+          <Card>
+            <AccordionItem value="filename-settings" className="border-none">
+              <AccordionTrigger className="p-6 hover:no-underline">
+                <div className="text-left">
+                  <CardTitle>Filename Settings</CardTitle>
+                  <CardDescription className="mt-1">Customize the output filenames.</CardDescription>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-6 pb-6">
+                <div className="space-y-6">
+                  <div className="space-y-2">
+                    <Label htmlFor="prefix">Prefix</Label>
+                    <Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="suffix">Suffix</Label>
+                    <Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} />
+                  </div>
+                  <div className="flex items-center space-x-2 pt-2">
+                    <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} />
+                    <Label htmlFor="use-counter">Add sequential number</Label>
+                  </div>
+                  {useCounter && (
+                    <div className="space-y-2 pl-8">
+                      <Label htmlFor="counter-digits">Number of digits</Label>
+                      <Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}>
+                        <SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="1">1 (e.g., 1)</SelectItem>
+                          <SelectItem value="2">2 (e.g., 01)</SelectItem>
+                          <SelectItem value="3">3 (e.g., 001)</SelectItem>
+                          <SelectItem value="4">4 (e.g., 0001)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Card>
+        </Accordion>
       </div>
 
       <div className="lg:col-span-2 flex flex-col gap-8">