diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index e1cebf3..7fc52e8 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -267,130 +267,120 @@ 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">
-        <Accordion type="single" collapsible defaultValue="image-settings" className="w-full">
-          <div className="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 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)} />
-                      </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)} />
-                      </div>
-                    </div>
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Card>
+        <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
+          <AccordionItem value="image-settings" className="border rounded-lg bg-card">
+            <AccordionTrigger className="p-6 hover:no-underline">
+              <div className="text-left">
+                <h3 className="text-lg font-medium leading-none">Image Settings</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Adjust resolution for all uploaded images.
+                </p>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-6 pb-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)} />
+                </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)} />
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
 
-            <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">
+          <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
+            <AccordionTrigger className="p-6 hover:no-underline">
+              <div className="text-left">
+                <h3 className="text-lg font-medium leading-none">Filename Settings</h3>
+                <p className="text-sm text-muted-foreground mt-1">Customize the output filenames.</p>
+              </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)} />
+                </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)} />
+                </div>
+                <div className="flex items-center space-x-2 pt-2">
+                  <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} />
+                  <Label htmlFor="use-counter">Add sequential number</Label>
+                </div>
+                {useCounter && (
+                  <div className="grid grid-cols-2 gap-4 pt-2">
                     <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)} />
-                    </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)} />
-                    </div>
-                    <div className="flex items-center space-x-2 pt-2">
-                      <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} />
-                      <Label htmlFor="use-counter">Add sequential number</Label>
-                    </div>
-                    {useCounter && (
-                      <div className="grid grid-cols-2 gap-4 pt-2">
-                        <div className="space-y-2">
-                          <Label htmlFor="counter-start">Start number</Label>
-                          <Input
-                            id="counter-start"
-                            type="number"
-                            value={counterStart}
-                            onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
-                            min="0"
-                          />
-                        </div>
-                        <div className="space-y-2">
-                          <Label htmlFor="counter-digits">Padding digits</Label>
-                          <Input
-                            id="counter-digits"
-                            type="number"
-                            value={counterDigits}
-                            onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
-                            min="1"
-                          />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Card>
-
-            <Card>
-              <AccordionItem value="quality-settings" className="border-none">
-                <AccordionTrigger className="p-6 hover:no-underline">
-                  <div className="text-left">
-                    <CardTitle>Quality Settings</CardTitle>
-                    <CardDescription className="mt-1">Choose format and compression level.</CardDescription>
-                  </div>
-                </AccordionTrigger>
-                <AccordionContent className="px-6 pb-6">
-                  <div className="space-y-6">
-                    <div className="space-y-2">
-                      <Label htmlFor="format">Format</Label>
-                      <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
-                        <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 className="space-y-2">
-                      <div className="flex justify-between items-center">
-                        <Label htmlFor="quality">Quality</Label>
-                        <span className="text-sm text-muted-foreground">{quality}%</span>
-                      </div>
-                      <Slider
-                        id="quality"
-                        min={0}
-                        max={100}
-                        step={1}
-                        value={[quality]}
-                        onValueChange={(value) => setQuality(value[0])}
-                        disabled={format === 'png'}
+                      <Label htmlFor="counter-start">Start number</Label>
+                      <Input
+                        id="counter-start"
+                        type="number"
+                        value={counterStart}
+                        onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
+                        min="0"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="counter-digits">Padding digits</Label>
+                      <Input
+                        id="counter-digits"
+                        type="number"
+                        value={counterDigits}
+                        onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
+                        min="1"
                       />
-                      {format === 'png' && (
-                        <p className="text-xs text-muted-foreground pt-1">Quality slider is disabled for PNG (lossless format).</p>
-                      )}
                     </div>
                   </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Card>
-          </div>
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
+            <AccordionTrigger className="p-6 hover:no-underline">
+              <div className="text-left">
+                <h3 className="text-lg font-medium leading-none">Quality Settings</h3>
+                <p className="text-sm text-muted-foreground mt-1">Choose format and compression level.</p>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-6 pb-6">
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="format">Format</Label>
+                  <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
+                    <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 className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <Label htmlFor="quality">Quality</Label>
+                    <span className="text-sm text-muted-foreground">{quality}%</span>
+                  </div>
+                  <Slider
+                    id="quality"
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={[quality]}
+                    onValueChange={(value) => setQuality(value[0])}
+                    disabled={format === 'png'}
+                  />
+                  {format === 'png' && (
+                    <p className="text-xs text-muted-foreground pt-1">Quality slider is disabled for PNG (lossless format).</p>
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
         </Accordion>
         <Button
           onClick={handleConvertAndDownload}