diff --git a/app/api/contributions/route.ts b/app/api/contributions/route.ts
index 6a8ef183..f650c69b 100644
--- a/app/api/contributions/route.ts
+++ b/app/api/contributions/route.ts
@@ -1,4 +1,5 @@
 import { processNewContribution } from "@/lib/directus";
+import { revalidatePath } from "next/cache";
 import { type NextRequest, NextResponse } from "next/server";
 
 export async function POST(req: NextRequest) {
@@ -17,6 +18,7 @@ export async function POST(req: NextRequest) {
 			amount,
 			comment,
 		);
+		revalidatePath("/reports/[slug]");
 		return NextResponse.json(result);
 	} catch (error) {
 		let errorMessage = "An unknown error occurred";
diff --git a/app/globals.css b/app/globals.css
index fd7d044d..be4a10f0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,105 +3,185 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 20 48% 94%;
-    --foreground: 228 40% 24%;
-
-    --card: 20 48% 94%;
-    --card-foreground: 228 40% 24%;
-
-    --popover: 20 48% 94%;
-    --popover-foreground: 228 40% 24%;
-
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
-
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 228 40% 24%;
-
-    --radius: 0.5rem;
-
-    --vd-beige-600: 198 139 109;
-    --vd-beige-400: 231 201 186;
-    --vd-beige-300: 241 224 215;
-    --vd-beige-200: 247 237 232;
-    --vd-beige-100: 251 247 245;
-
-    --vd-blue-900: 37 47 86;
-    --vd-blue-700: 58 82 100;
-    --vd-blue-600: 65 98 121;
-    --vd-blue-500: 75 119 143;
-    --vd-blue-400: 102 146 169;
-    --vd-blue-300: 152 184 200;
-    --vd-blue-200: 194 214 223;
-    --vd-blue-100: 223 234 238;
-    --vd-blue-50: 242 247 249;
-
-    --vd-orange-900: 60 23 19;
-    --vd-orange-800: 135 54 45;
-    --vd-orange-700: 159 61 50;
-    --vd-orange-600: 193 78 65;
-    --vd-orange-500: 214 105 93;
-    --vd-orange-400: 228 143 133;
-    --vd-orange-300: 239 184 178;
-    --vd-orange-200: 246 214 210;
-
-    --vd-gray-600: 66 66 74;
-    --vd-gray-500: 95 95 106;
-    --vd-gray-400: 146 147 158;
-    --vd-gray-300: 185 186 192;
-    --vd-gray-200: 218 218 221;
-  }
-
-  .dark {
-    --background: 228 40% 24%;
-    --foreground: 60 9.1% 97.8%;
-
-    --card: 228 40% 24%;
-    --card-foreground: 60 9.1% 97.8%;
-
-    --popover: 228 40% 24%;
-    --popover-foreground: 60 9.1% 97.8%;
-
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
+    :root {
+        --background: 20 48% 94%;
+        --foreground: 228 40% 24%;
+
+        --card: 20 48% 94%;
+        --card-foreground: 228 40% 24%;
+
+        --popover: 20 48% 94%;
+        --popover-foreground: 228 40% 24%;
+
+        --primary: 24 9.8% 10%;
+        --primary-foreground: 60 9.1% 97.8%;
+
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 228 40% 24%;
+
+        --radius: 0.5rem;
+
+        --vd-beige-600: 198 139 109;
+        --vd-beige-400: 231 201 186;
+        --vd-beige-300: 241 224 215;
+        --vd-beige-200: 247 237 232;
+        --vd-beige-100: 251 247 245;
+
+        --vd-blue-900: 37 47 86;
+        --vd-blue-700: 58 82 100;
+        --vd-blue-600: 65 98 121;
+        --vd-blue-500: 75 119 143;
+        --vd-blue-400: 102 146 169;
+        --vd-blue-300: 152 184 200;
+        --vd-blue-200: 194 214 223;
+        --vd-blue-100: 223 234 238;
+        --vd-blue-50: 242 247 249;
+
+        --vd-orange-900: 60 23 19;
+        --vd-orange-800: 135 54 45;
+        --vd-orange-700: 159 61 50;
+        --vd-orange-600: 193 78 65;
+        --vd-orange-500: 214 105 93;
+        --vd-orange-400: 228 143 133;
+        --vd-orange-300: 239 184 178;
+        --vd-orange-200: 246 214 210;
+
+        --vd-gray-600: 66 66 74;
+        --vd-gray-500: 95 95 106;
+        --vd-gray-400: 146 147 158;
+        --vd-gray-300: 185 186 192;
+        --vd-gray-200: 218 218 221;
+    }
+
+    .dark {
+        --background: 228 40% 24%;
+        --foreground: 60 9.1% 97.8%;
+
+        --card: 228 40% 24%;
+        --card-foreground: 60 9.1% 97.8%;
+
+        --popover: 228 40% 24%;
+        --popover-foreground: 60 9.1% 97.8%;
+
+        --primary: 60 9.1% 97.8%;
+        --primary-foreground: 24 9.8% 10%;
+
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 24 5.7% 82.9%;
+    }
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+
+    /* Mobile-specific scrolling improvements */
+    .scrollbar-hide {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Touch-friendly interactions */
+    .touch-manipulation {
+        touch-action: manipulation;
+    }
+
+    /* Smooth scrolling behavior for mobile */
+    .touch-auto {
+        touch-action: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Prevent zoom on input focus on mobile */
+    @media screen and (max-width: 768px) {
+
+        input[type="email"],
+        input[type="number"],
+        input[type="text"],
+        textarea {
+            font-size: 16px !important;
+        }
+
+        /* Prevent horizontal overflow on mobile */
+        * {
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            hyphens: auto;
+        }
+
+        /* Force long text and URLs to wrap */
+        a,
+        p,
+        div,
+        span,
+        li {
+            word-break: break-word;
+            overflow-wrap: break-word;
+        }
+
+        /* Ensure containers don't overflow */
+        .drawer-content,
+        .dialog-content {
+            overflow-x: hidden;
+        }
+
+        /* Specifically handle long URLs and text */
+        a[href] {
+            word-break: break-all;
+            display: inline-block;
+            max-width: 100%;
+        }
+    }
+
+    /* Improve mobile drawer content scrolling */
+    .mobile-drawer-content {
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+    }
+
+    /* Prevent body scroll when drawer is open on mobile */
+    .drawer-open {
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+    }
 }
diff --git a/components/profile/sidebar.tsx b/components/profile/sidebar.tsx
index b29932c6..76246268 100644
--- a/components/profile/sidebar.tsx
+++ b/components/profile/sidebar.tsx
@@ -68,6 +68,7 @@ const AnonAadhaarCard = () => {
 const SideBar = () => {
 	return (
 		<section className="flex flex-col gap-4 md:col-span-1 md:row-span-2">
+			{/* Commented out existing UI
 			<AnonAadhaarProvider _useTestAadhaar={true}>
 				<AnonAadhaarCard />
 			</AnonAadhaarProvider>
@@ -95,6 +96,22 @@ const SideBar = () => {
 					</Link>
 				</CardContent>
 			</Card>
+			*/}
+
+			{/* Local Advocate Program Coming Soon */}
+			<Card className="bg-vd-beige-100 rounded-3xl shadow-none border-none">
+				<CardHeader>
+					<CardTitle className="text-center text-lg md:text-xl text-vd-blue-900">
+						Local Advocate Program
+					</CardTitle>
+					<CardDescription className="text-center text-base text-vd-blue-700">
+						Coming Soon
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex justify-center">
+					<div className="w-12 h-1 bg-vd-orange-500 rounded-full" />
+				</CardContent>
+			</Card>
 		</section>
 	);
 };
diff --git a/components/report-details/support/dialog.tsx b/components/report-details/support/dialog.tsx
index 68588d9e..e384dddf 100644
--- a/components/report-details/support/dialog.tsx
+++ b/components/report-details/support/dialog.tsx
@@ -105,7 +105,7 @@ const ReportSupportUI = ({
 		),
 		header: "Support this report",
 		content: (
-			<div className="flex flex-col gap-4">
+			<div className="flex flex-col gap-4 w-full overflow-hidden">
 				{reportImage && reportTitle && (
 					<Card className="bg-gradient-to-r from-gray-50 to-vd-beige-100 border-vd-beige-300">
 						<div className="flex items-center gap-4 p-4">
@@ -187,8 +187,20 @@ const SupportReport = ({
 			ContentComponent={(props) => (
 				<DrawerContent
 					{...props}
-					className="bg-white p-4 max-h-[90vh] overflow-y-auto"
-				/>
+					className="bg-white max-h-[85vh] overflow-hidden"
+				>
+					<div
+						className="overflow-y-auto overflow-x-hidden px-4 pb-4 w-full"
+						style={{
+							WebkitOverflowScrolling: "touch",
+							maxHeight: "calc(85vh - 60px)",
+							wordWrap: "break-word",
+							overflowWrap: "break-word",
+						}}
+					>
+						{props.children}
+					</div>
+				</DrawerContent>
 			)}
 			HeaderComponent={DrawerHeader}
 		/>
diff --git a/components/report-details/support/form.tsx b/components/report-details/support/form.tsx
index c30cb0b8..f480d037 100644
--- a/components/report-details/support/form.tsx
+++ b/components/report-details/support/form.tsx
@@ -221,14 +221,78 @@ const SupportReportForm = ({
 
 	if (!isConnected && !address) {
 		return (
-			<div className="flex flex-col gap-6 p-4">
+			<div className="flex flex-col gap-6 p-4 w-full overflow-hidden">
 				{/* Primary Option: Direct Donation */}
 				<div className="space-y-4">
 					<h4 className="font-bold text-lg text-center text-vd-blue-900">
 						Support with Email & Card
 					</h4>
 					<Form {...form}>
-						<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+						<form
+							className="flex flex-col gap-4 w-full"
+							onSubmit={handleSubmit}
+						>
+							<FormField
+								control={form.control}
+								name="fractionPayment"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Support amount</FormLabel>
+										<div className="grid grid-cols-5 gap-2 sm:gap-4">
+											{[5, 10, 20, 50, 100].map((amount) => (
+												<Button
+													key={amount}
+													disabled={amount > Number(dollarAmountNeeded)}
+													type="button"
+													variant={
+														form.watch("fractionPayment") === amount
+															? "default"
+															: "outline"
+													}
+													className={cn(
+														"flex justify-center items-center h-10 sm:h-12 rounded-lg font-bold transition-colors duration-200 touch-manipulation",
+														form.watch("fractionPayment") === amount
+															? "bg-vd-beige-600 text-white hover:bg-vd-beige-700"
+															: "text-primary hover:bg-vd-beige-200 hover:text-primary",
+														amount > Number(dollarAmountNeeded)
+															? "cursor-not-allowed disabled:opacity-15"
+															: "",
+													)}
+													onClick={() => {
+														form.setValue("fractionPayment", amount);
+														// Slight delay to ensure the value is set before potential scroll
+														setTimeout(() => {
+															const emailField = document.querySelector(
+																'input[type="email"]',
+															);
+															if (emailField && window.innerWidth < 768) {
+																emailField.scrollIntoView({
+																	behavior: "smooth",
+																	block: "center",
+																});
+															}
+														}, 100);
+													}}
+												>
+													${amount}
+												</Button>
+											))}
+										</div>
+										<FormControl>
+											<Input
+												type="number"
+												placeholder="Enter amount"
+												{...field}
+												className="w-full px-4 py-3 text-base border border-vd-blue-400 rounded-lg touch-manipulation overflow-hidden"
+											/>
+										</FormControl>
+										<FormDescription className="text-center">
+											Choose your donation amount • Max ${dollarAmountNeeded}
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<FormField
 								control={form.control}
 								name="email"
@@ -273,15 +337,74 @@ const SupportReportForm = ({
 												type="email"
 												placeholder="your.email@example.com"
 												{...field}
-												className="w-full h-12 px-4 py-2 text-lg border-2 border-vd-blue-400 rounded-lg focus:border-vd-blue-600"
+												className="w-full h-12 px-4 py-2 text-base sm:text-lg border-2 border-vd-blue-400 rounded-lg focus:border-vd-blue-600 touch-manipulation overflow-hidden"
+												onFocus={(e) => {
+													// Ensure the input is visible on mobile
+													if (window.innerWidth < 768) {
+														setTimeout(() => {
+															e.target.scrollIntoView({
+																behavior: "smooth",
+																block: "center",
+															});
+														}, 300);
+													}
+												}}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="comment"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="flex items-center gap-2">
+											<svg
+												width="16"
+												height="16"
+												viewBox="0 0 24 24"
+												fill="none"
+												xmlns="http://www.w3.org/2000/svg"
+												role="img"
+												aria-label="Message icon"
+											>
+												<path
+													d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+													stroke="currentColor"
+													strokeWidth="2"
+													fill="none"
+												/>
+											</svg>
+											Message (optional)
+										</FormLabel>
+										<FormControl>
+											<Textarea
+												rows={3}
+												placeholder="Leave a message with your donation..."
+												{...field}
+												className="w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg resize-none bg-gray-50 focus:border-vd-blue-600 focus:bg-white touch-manipulation overflow-hidden"
+												onFocus={(e) => {
+													// Ensure the textarea is visible on mobile
+													if (window.innerWidth < 768) {
+														setTimeout(() => {
+															e.target.scrollIntoView({
+																behavior: "smooth",
+																block: "center",
+															});
+														}, 300);
+													}
+												}}
 											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
+
 							<Button
-								className="w-full h-14 flex gap-3 rounded-lg text-lg font-bold bg-gradient-to-r from-vd-blue-900 to-vd-blue-700 hover:from-vd-blue-700 hover:to-vd-blue-600"
+								className="w-full h-14 flex gap-3 rounded-lg text-base sm:text-lg font-bold bg-gradient-to-r from-vd-blue-900 to-vd-blue-700 hover:from-vd-blue-700 hover:to-vd-blue-600 touch-manipulation"
 								type="submit"
 								onClick={() => setPaymentMethod("fiat-without-login")}
 								disabled={isProcessingFiat}
@@ -386,17 +509,17 @@ const SupportReportForm = ({
 	}
 
 	return (
-		<section>
+		<section className="w-full overflow-hidden">
 			{!isProcessing && (
 				<Form {...form}>
-					<form onSubmit={handleSubmit} className="flex flex-col gap-4">
+					<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
 						<FormField
 							control={form.control}
 							name="fractionPayment"
 							render={({ field }) => (
 								<FormItem>
 									<FormLabel>Support amount</FormLabel>
-									<div className="grid grid-cols-5 gap-4">
+									<div className="grid grid-cols-5 gap-2 sm:gap-4">
 										{[5, 10, 20, 50, 100].map((amount) => (
 											<Button
 												key={amount}
@@ -408,7 +531,7 @@ const SupportReportForm = ({
 														: "outline"
 												}
 												className={cn(
-													"flex justify-center items-center h-10 rounded-lg font-bold transition-colors duration-200",
+													"flex justify-center items-center h-10 sm:h-12 rounded-lg font-bold transition-colors duration-200 touch-manipulation",
 													form.watch("fractionPayment") === amount
 														? "bg-vd-beige-600 text-white hover:bg-vd-beige-700"
 														: "text-primary hover:bg-vd-beige-200 hover:text-primary",
@@ -416,7 +539,20 @@ const SupportReportForm = ({
 														? "cursor-not-allowed disabled:opacity-15"
 														: "",
 												)}
-												onClick={() => form.setValue("fractionPayment", amount)}
+												onClick={() => {
+													form.setValue("fractionPayment", amount);
+													// Smooth scroll to message field on mobile after selection
+													setTimeout(() => {
+														const messageField =
+															document.querySelector("textarea");
+														if (messageField && window.innerWidth < 768) {
+															messageField.scrollIntoView({
+																behavior: "smooth",
+																block: "center",
+															});
+														}
+													}, 100);
+												}}
 											>
 												${amount}
 											</Button>
@@ -427,7 +563,7 @@ const SupportReportForm = ({
 											type="number"
 											placeholder="Enter amount"
 											{...field}
-											className="w-full px-4 py-2 border border-vd-blue-400 rounded-lg"
+											className="w-full px-4 py-3 text-base border border-vd-blue-400 rounded-lg touch-manipulation overflow-hidden"
 										/>
 									</FormControl>
 									<FormDescription className="text-center">
@@ -466,7 +602,18 @@ const SupportReportForm = ({
 											rows={3}
 											placeholder="Leave a message with your donation..."
 											{...field}
-											className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg resize-none bg-gray-50 focus:border-vd-blue-600 focus:bg-white"
+											className="w-full px-4 py-3 text-base border-2 border-gray-300 rounded-lg resize-none bg-gray-50 focus:border-vd-blue-600 focus:bg-white touch-manipulation overflow-hidden"
+											onFocus={(e) => {
+												// Ensure the textarea is visible on mobile
+												if (window.innerWidth < 768) {
+													setTimeout(() => {
+														e.target.scrollIntoView({
+															behavior: "smooth",
+															block: "center",
+														});
+													}, 300);
+												}
+											}}
 										/>
 									</FormControl>
 									<FormMessage />
@@ -475,7 +622,7 @@ const SupportReportForm = ({
 						/>
 
 						<Button
-							className="w-full py-6 flex gap-3 rounded-lg text-lg font-bold bg-gradient-to-r from-vd-blue-900 to-vd-blue-700 hover:from-vd-blue-700 hover:to-vd-blue-600"
+							className="w-full py-6 flex gap-3 rounded-lg text-base sm:text-lg font-bold bg-gradient-to-r from-vd-blue-900 to-vd-blue-700 hover:from-vd-blue-700 hover:to-vd-blue-600 touch-manipulation"
 							type="submit"
 							onClick={() => setPaymentMethod("fiat-with-login")}
 						>
@@ -513,7 +660,7 @@ const SupportReportForm = ({
 
 						<Button
 							variant="outline"
-							className="w-full py-6 flex gap-2 rounded-lg border-2 border-vd-blue-400 hover:bg-vd-blue-50"
+							className="w-full py-6 flex gap-2 rounded-lg border-2 border-vd-blue-400 hover:bg-vd-blue-50 touch-manipulation"
 							type="submit"
 							onClick={() => setPaymentMethod("crypto")}
 						>
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index f4eb5f75..65636ebf 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			"fixed inset-0 z-20 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			"fixed inset-0 z-40 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 			className,
 		)}
 		{...props}
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-20 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-stone-800 dark:bg-stone-950",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-stone-800 dark:bg-stone-950 max-h-[90vh] overflow-y-auto",
 				className,
 			)}
 			{...props}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index ca111602..ec646a77 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
@@ -42,13 +42,13 @@ const DrawerContent = React.forwardRef<
 		<DrawerPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-vd-beige-300 bg-vd-beige-200 dark:border-red-300 dark:bg-vd-beige-400",
+				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-vd-beige-300 bg-vd-beige-200 dark:border-red-300 dark:bg-vd-beige-400 overflow-hidden",
 				className,
 			)}
 			{...props}
 		>
 			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-stone-500 dark:bg-stone-100" />
-			{children}
+			<div className="overflow-x-hidden w-full">{children}</div>
 		</DrawerPrimitive.Content>
 	</DrawerPortal>
 ));