diff --git a/src/App.jsx b/src/App.jsx
index 336a2be..2866cbe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import './App.css'
 import Canvas from './components/Canvas'
 import WebFont from 'webfontloader';
diff --git a/src/components/EachComponent/UploadImage.jsx b/src/components/EachComponent/UploadImage.jsx
index 34b4380..a4c84c3 100644
--- a/src/components/EachComponent/UploadImage.jsx
+++ b/src/components/EachComponent/UploadImage.jsx
@@ -203,69 +203,74 @@ const UploadImage = () => {
                             </div>
 
                             {/* upload image */}
-                            <div className="max-w-md mx-auto p-4">
-                                <Card>
-                                    <CardContent className="p-6 space-y-4">
-                                        <div
-                                            {...getRootProps()}
-                                            className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
-                                            ref={fileInputRef}
-                                        >
-                                            <input {...getInputProps()} />
-                                            <div className="flex flex-col items-center justify-center space-y-4">
-                                                <ImageIcon
-                                                    className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
-                                                />
-                                                <p className="text-sm text-gray-600">
-                                                    {isDragActive
-                                                        ? 'Drop file here'
-                                                        : 'Drag \'n\' drop an image, or click to select a file'
-                                                    }
-                                                </p>
-                                                <p className="text-xs text-gray-500">
-                                                    (Max 5MB, image files only)
-                                                </p>
-                                            </div>
-                                        </div>
-
-                                        {preview && (
-                                            <div className="relative">
-                                                <div className="w-fit aspect-square relative">
-                                                    {
-                                                        file?.type === "image/svg+xml" ? <object
-                                                            data={preview}
-                                                            type="image/svg+xml"
-                                                            className="object-cover rounded-lg"
-                                                            style={{ width: '100%', height: '100%' }}
-                                                        >
-                                                            Your browser does not support SVG, no preview available for SVG.
-                                                        </object> :
-                                                            <img
-                                                                src={preview}
-                                                                alt="Uploaded image"
-                                                                className="object-cover rounded-lg"
-                                                            />
-                                                    }
-
-                                                    <Separator className="my-4" />
-                                                    <div className="flex flex-col items-center gap-2">
-                                                        <span className="text-sm text-gray-600">{file?.name}</span>
-                                                        <Button
-                                                            variant="destructive"
-                                                            size="sm"
-                                                            onClick={removeFile}
-                                                        >
-                                                            <Trash2 className="mr-2 h-4 w-4" />
-                                                            Remove
-                                                        </Button>
-                                                    </div>
+                            {
+                                !preview &&
+                                <div className="max-w-md mx-auto p-4">
+                                    <Card>
+                                        <CardContent className="p-6 space-y-4">
+                                            <div
+                                                {...getRootProps()}
+                                                className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
+                                                ref={fileInputRef}
+                                            >
+                                                <input {...getInputProps()} />
+                                                <div className="flex flex-col items-center justify-center space-y-4">
+                                                    <ImageIcon
+                                                        className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
+                                                    />
+                                                    <p className="text-sm text-gray-600">
+                                                        {isDragActive
+                                                            ? 'Drop file here'
+                                                            : 'Drag \'n\' drop an image, or click to select a file'
+                                                        }
+                                                    </p>
+                                                    <p className="text-xs text-gray-500">
+                                                        (Max 5MB, image files only)
+                                                    </p>
                                                 </div>
                                             </div>
-                                        )}
+                                        </CardContent>
+                                    </Card>
+                                </div>
+                            }
+
+                            {/* preview image  */}
+                            {preview && (
+                                <Card className="overflow-y-scroll rounded-none">
+                                    <CardContent className="mt-2 mb-2">
+                                        <div className="w-fit aspect-square relative h-[100%]">
+                                            {
+                                                file?.type === "image/svg+xml" ? <object
+                                                    data={preview}
+                                                    type="image/svg+xml"
+                                                    className="object-cover rounded-lg"
+                                                    style={{ width: '100%', height: '100%' }}
+                                                >
+                                                    Your browser does not support SVG, no preview available for SVG.
+                                                </object> :
+                                                    <img
+                                                        src={preview}
+                                                        alt="Uploaded image"
+                                                        className="object-cover rounded-lg overflow-hidden"
+                                                    />
+                                            }
+
+                                            <Separator className="my-4" />
+                                            <div className="grid grid-cols-1 gap-2 items-center pb-4">
+                                                <p className="text-sm text-gray-600 truncate">{file?.name}</p>
+                                                <Button
+                                                    variant="destructive"
+                                                    size="sm"
+                                                    onClick={removeFile}
+                                                >
+                                                    <Trash2 className="mr-2 h-4 w-4" />
+                                                    Remove
+                                                </Button>
+                                            </div>
+                                        </div>
                                     </CardContent>
                                 </Card>
-                            </div>
-
+                            )}
                         </div>
                     </TabsContent>