diff --git a/packages/ui/lib/document-dropzone-constants.ts b/packages/ui/lib/document-dropzone-constants.ts
index 2f76b8ceb..6117f0c7a 100644
--- a/packages/ui/lib/document-dropzone-constants.ts
+++ b/packages/ui/lib/document-dropzone-constants.ts
@@ -68,7 +68,7 @@ export const DocumentDropzoneCardCenterVariants: Variants = {
 export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
   initial: {
     x: 40,
-    y: 30,
+    y: 0,
     rotate: -14,
   },
   animate: {
@@ -85,8 +85,8 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
 
 export const DocumentDropzoneDisabledCardRightVariants: Variants = {
   initial: {
-    x: -40,
-    y: 30,
+    x: -50,
+    y: 5,
     rotate: 14,
   },
   animate: {
@@ -103,7 +103,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = {
 
 export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
   initial: {
-    x: 20,
+    x: -10,
     y: 0,
   },
   animate: {
diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx
index 916798b20..e4ca84892 100644
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -69,26 +69,25 @@ export const DocumentDropzone = ({
   });
 
   return (
-    <motion.div
-      className={cn('flex', className)}
-      variants={DocumentDropzoneContainerVariants}
-      initial="initial"
-      animate="animate"
-      whileHover="hover"
+    <Card
+      role="button"
+      className={cn(
+        'focus-visible:ring-ring ring-offset-background flex flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        className,
+      )}
+      gradient={!disabled}
+      degrees={120}
+      aria-disabled={disabled}
+      {...getRootProps()}
+      {...props}
     >
-      <Card
-        role="button"
-        className={cn(
-          'focus-visible:ring-ring ring-offset-background flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-          className,
-        )}
-        gradient={!disabled}
-        degrees={120}
-        aria-disabled={disabled}
-        {...getRootProps()}
-        {...props}
-      >
-        <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
+      <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
+        <motion.div
+          variants={DocumentDropzoneContainerVariants}
+          initial="initial"
+          animate="animate"
+          whileHover="hover"
+        >
           {disabled ? (
             // Disabled State
             <div className="flex">
@@ -152,21 +151,21 @@ export const DocumentDropzone = ({
               </motion.div>
             </div>
           )}
+        </motion.div>
 
-          <input {...getInputProps()} />
+        <input {...getInputProps()} />
 
-          <p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p>
+        <p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p>
 
-          <p className="text-muted-foreground/80 mt-1 text-sm">
-            {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
-          </p>
-          {disabled && (
-            <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
-              <Link href="/settings/billing">Upgrade</Link>
-            </Button>
-          )}
-        </CardContent>
-      </Card>
-    </motion.div>
+        <p className="text-muted-foreground/80 mt-1 text-center text-sm">
+          {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
+        </p>
+        {disabled && (
+          <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
+            <Link href="/settings/billing">Upgrade</Link>
+          </Button>
+        )}
+      </CardContent>
+    </Card>
   );
 };