diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx
index e9aee759..2fea22d8 100644
--- a/app/src/components/Upload/Body.tsx
+++ b/app/src/components/Upload/Body.tsx
@@ -7,16 +7,18 @@ import { useUploadContext } from './UploadContext'
 const UploadBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ children, className, ...props }, ref: Ref<HTMLDivElement>) => {
     const { options, horizontal } = useUploadContext()
-    const { getRootProps, getInputProps } = useDropzone(options)
+    const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(options)
     return (
       <div
         {...props}
         ref={ref}
         {...getRootProps()}
         className={cn(
-          horizontal
-            ? 'flex cursor-pointer items-center gap-4 rounded-xl border border-dashed bg-white px-3 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900'
-            : 'flex cursor-pointer flex-col items-center rounded-xl border border-dashed border-metal-50 bg-white p-3 text-center transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900',
+          'flex cursor-pointer items-center rounded-xl border border-dashed bg-white transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900',
+          horizontal ? 'gap-4 px-3' : 'flex-col border-metal-50 p-3 text-center',
+          isDragActive && 'border-blue-500 bg-sky-100 dark:bg-blue-900',
+          isDragReject && 'border-red-500 bg-red-100 dark:bg-red-900',
+          options?.disabled && 'cursor-not-allowed hover:bg-transparent',
           className,
         )}>
         <input {...getInputProps()} />
diff --git a/app/src/components/Upload/Icon.tsx b/app/src/components/Upload/Icon.tsx
index 22ba2581..fef2145b 100644
--- a/app/src/components/Upload/Icon.tsx
+++ b/app/src/components/Upload/Icon.tsx
@@ -7,10 +7,7 @@ const UploadIcon = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     return (
       <div
         {...props}
-        className={cn(
-          'flex h-16 w-16 items-center justify-center rounded-full bg-metal-50 dark:bg-metal-800',
-          className,
-        )}
+        className={cn('flex size-16 items-center justify-center rounded-full bg-metal-50 dark:bg-metal-800', className)}
         ref={ref}>
         {children}
       </div>