diff --git a/src/app/(pages)/(auth)/login/form.tsx b/src/app/(pages)/(auth)/login/form.tsx
index d374f08..90c8d0f 100644
--- a/src/app/(pages)/(auth)/login/form.tsx
+++ b/src/app/(pages)/(auth)/login/form.tsx
@@ -42,7 +42,7 @@ export function ClientLoginForm({ redirectPath }: { redirectPath: string }) {
     <FormProvider
       schema={LoginSchema}
       action={loginAction}
-      className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-lg rounded-lg"
+      className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-lg rounded-2xl"
     >
       <SectionHeader title="Login" description="Welcome back" />
       <div className="flex flex-col gap-5">
@@ -82,7 +82,7 @@ export function ClientLoginForm({ redirectPath }: { redirectPath: string }) {
 
 function FormSkeleton() {
   return (
-    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-lg space-y-4"></div>
+    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-2xl space-y-4"></div>
   );
 }
 
diff --git a/src/app/(pages)/(auth)/signup/form.tsx b/src/app/(pages)/(auth)/signup/form.tsx
index c84f43c..ec65d51 100644
--- a/src/app/(pages)/(auth)/signup/form.tsx
+++ b/src/app/(pages)/(auth)/signup/form.tsx
@@ -43,7 +43,7 @@ export function ClientSignupForm({ redirectPath }: { redirectPath: string }) {
     <FormProvider
       schema={SignupSchema}
       action={signupAction}
-      className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-lg rounded-lg"
+      className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-lg rounded-2xl"
     >
       <SectionHeader title="Signup" description="Create an account" />
       <div className="flex flex-col gap-5">
@@ -90,7 +90,7 @@ export function ClientSignupForm({ redirectPath }: { redirectPath: string }) {
 
 function FormSkeleton() {
   return (
-    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-lg space-y-4"></div>
+    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-2xl space-y-4"></div>
   );
 }
 
diff --git a/src/app/(pages)/(auth)/signup/page.tsx b/src/app/(pages)/(auth)/signup/page.tsx
index 2dea305..17e27da 100644
--- a/src/app/(pages)/(auth)/signup/page.tsx
+++ b/src/app/(pages)/(auth)/signup/page.tsx
@@ -4,7 +4,7 @@ import { ClientSignupWrapper } from "./form";
 
 function FormSkeleton() {
   return (
-    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-lg space-y-4">
+    <div className="w-max min-w-[50%] flex flex-col gap-5 p-5 bg-white shadow-md rounded-2xl space-y-4">
       <div className="h-8 bg-gray-200 rounded animate-pulse w-1/2" />
 
       <div className="space-y-2">
diff --git a/src/app/(pages)/(protected)/(user)/drafts/_components/hero.tsx b/src/app/(pages)/(protected)/(user)/drafts/_components/hero.tsx
index cc60191..bdf8318 100644
--- a/src/app/(pages)/(protected)/(user)/drafts/_components/hero.tsx
+++ b/src/app/(pages)/(protected)/(user)/drafts/_components/hero.tsx
@@ -1,5 +1,5 @@
 export const Hero = () => (
-  <section className="aspect-section-sm mt-20 flex w-full rounded-lg px-20 items-center justify-end-safe">
+  <section className="aspect-section-sm mt-20 flex w-full rounded-2xl px-20 items-center justify-end-safe">
     <h1 className="text-9xl bg-black p-2.5 h-max pl-10 leading-none">Drafts</h1>
   </section>
 );
diff --git a/src/app/(pages)/(protected)/(user)/favorites/_components/hero.tsx b/src/app/(pages)/(protected)/(user)/favorites/_components/hero.tsx
index ba68586..b6a76d6 100644
--- a/src/app/(pages)/(protected)/(user)/favorites/_components/hero.tsx
+++ b/src/app/(pages)/(protected)/(user)/favorites/_components/hero.tsx
@@ -1,5 +1,5 @@
 export const Hero = () => (
-  <section className="aspect-section-sm mt-20 flex w-full rounded-lg px-20 items-center justify-end-safe">
+  <section className="aspect-section-sm mt-20 flex w-full rounded-2xl px-20 items-center justify-end-safe">
     <h1 className="text-9xl bg-black p-2.5 h-max pl-10 leading-none">
       Favorites
     </h1>
diff --git a/src/app/(pages)/(protected)/(user)/profile/_components/navigation.tsx b/src/app/(pages)/(protected)/(user)/profile/_components/navigation.tsx
index 22a0037..35f0329 100644
--- a/src/app/(pages)/(protected)/(user)/profile/_components/navigation.tsx
+++ b/src/app/(pages)/(protected)/(user)/profile/_components/navigation.tsx
@@ -21,7 +21,7 @@ export default function ProfileNavigation({
   const { logout } = useAuth();
   return (
     <aside className="w-max min-w-[15%] h-full">
-      <nav className="rounded-lg bg-black h-max p-5 w-full">
+      <nav className="rounded-2xl bg-black h-max p-5 w-full">
         <ul className="flex flex-col gap-2.5 w-full">
           <li className="flex justify-between items-baseline gap-2.5 w-full">
             <Link
diff --git a/src/app/(pages)/(protected)/(user)/profile/_components/quick-link.tsx b/src/app/(pages)/(protected)/(user)/profile/_components/quick-link.tsx
index 3a4e6ea..c85217f 100644
--- a/src/app/(pages)/(protected)/(user)/profile/_components/quick-link.tsx
+++ b/src/app/(pages)/(protected)/(user)/profile/_components/quick-link.tsx
@@ -7,7 +7,7 @@ export const QuickLink: React.FC<{
   endpoint: string;
   details: { count: number; quantifier: string };
 }> = ({ name, details, endpoint }) => (
-  <div className="bg-black h-full w-full flex flex-col justify-between rounded-lg p-10">
+  <div className="bg-black h-full w-full flex flex-col justify-between rounded-2xl p-10">
     <SectionHeader title={name} />
     <div className="flex justify-between items-center">
       <span className="font-thin italic text-lg">
diff --git a/src/app/(pages)/(protected)/(user)/profile/page.tsx b/src/app/(pages)/(protected)/(user)/profile/page.tsx
index de14fb3..138445c 100644
--- a/src/app/(pages)/(protected)/(user)/profile/page.tsx
+++ b/src/app/(pages)/(protected)/(user)/profile/page.tsx
@@ -16,8 +16,8 @@ export default async function ProfilePage() {
   return (
     <>
       <section className="aspect-section-md gap-10 flex">
-        <div className="relative group aspect-square rounded-lg ">
-          <div className="w-full aspect-square relative bg-black overflow-clip rounded-lg">
+        <div className="relative group aspect-square rounded-2xl ">
+          <div className="w-full aspect-square relative bg-black overflow-clip rounded-2xl">
             <Image
               src={src ? src : fallback} // Fallback image || "/default-avatar.png"
               alt={`${user.firstName} ${user.lastName || ""}`.trim()}
@@ -33,7 +33,7 @@ export default async function ProfilePage() {
               priority
             />
           </div>
-          <div className="absolute top-0 opacity-0 transition-all duration-300 group-hover:opacity-100 gap-10 group-hover:bg-black/25 w-full h-full rounded-lg flex justify-center items-center">
+          <div className="absolute top-0 opacity-0 transition-all duration-300 group-hover:opacity-100 gap-10 group-hover:bg-black/25 w-full h-full rounded-2xl flex justify-center items-center">
             {[
               {
                 icon: <Eye />,
@@ -58,8 +58,8 @@ export default async function ProfilePage() {
             ))}
           </div>
         </div>
-        <div className="w-full rounded-lg max-w-full flex flex-col justify-between gap-10">
-          <div className="bg-black p-10 h-full rounded-lg">
+        <div className="w-full rounded-2xl max-w-full flex flex-col justify-between gap-10">
+          <div className="bg-black p-10 h-full rounded-2xl">
             <SectionHeader
               title={
                 user.firstName && user.lastName
@@ -97,7 +97,7 @@ export default async function ProfilePage() {
         <Button>Edit Profile</Button>
         <LogoutButton />
       </section>
-      <section className="bg-black flex justify-center items-center aspect-section-xs rounded-lg w-full">
+      <section className="bg-black flex justify-center items-center aspect-section-xs rounded-2xl w-full">
         <h3>More features coming soon</h3>
       </section>
     </>
diff --git a/src/app/(pages)/(protected)/create/form.tsx b/src/app/(pages)/(protected)/create/form.tsx
index 4ffd217..3620343 100644
--- a/src/app/(pages)/(protected)/create/form.tsx
+++ b/src/app/(pages)/(protected)/create/form.tsx
@@ -26,7 +26,7 @@ const ingredientSchema = z.object({
     .positive(err("Quantity must be positive (e.g., 2, not 0 or -1)"))
     .refine(
       (val) => val < 1000,
-      err("Whoa! That's too much. Use a smaller quantity"),
+      err("Whoa! That's too much. Use a smaller quantity")
     ),
   unitsOfMeasurement: z
     .string()
@@ -39,11 +39,11 @@ export const recipeSchema = z.object({
     .refine((file) => file.size > 0, err("Please select an image to upload"))
     .refine(
       (file) => file.size <= 5 * 1024 * 1024, // 5MB limit
-      err("Image must be smaller than 5MB"),
+      err("Image must be smaller than 5MB")
     )
     .refine(
       (file) => /^image\/(jpe?g|png|webp)$/i.test(file.type),
-      err("Only JPG, PNG, or WebP images are allowed"),
+      err("Only JPG, PNG, or WebP images are allowed")
     ),
   title: z.coerce
     .string()
@@ -63,7 +63,7 @@ export const recipeSchema = z.object({
     .nonnegative(err("Cooking time cannot be negative"))
     .refine(
       (val) => val < 24 * 60,
-      err("Duration exceeds 24 hours—double-check this!"),
+      err("Duration exceeds 24 hours—double-check this!")
     )
     .default(0),
   cookingMethod: z.coerce
@@ -80,7 +80,7 @@ export const recipeSchema = z.object({
     .array(
       z
         .string()
-        .min(1, err("Don't leave steps blank (e.g., 'Preheat oven to 350°F')")),
+        .min(1, err("Don't leave steps blank (e.g., 'Preheat oven to 350°F')"))
     )
     .min(1, err("Add at least one step to your instructions")),
   tags: z
@@ -196,7 +196,7 @@ export const CreateRecipeForm = ({
     <FormProvider
       schema={recipeSchema}
       action={createRecipeAction}
-      className="w-full bg-background min-h-screen grid grid-cols-7 gap-5 shadow-lg rounded-lg p-10"
+      className="w-full bg-background min-h-screen grid grid-cols-7 gap-5 shadow-lg rounded-2xl p-10"
     >
       <div className="col-span-2 col-start-1 flex flex-col gap-5">
         <FileUpload
diff --git a/src/app/(pages)/(public)/(home)/components/faq.tsx b/src/app/(pages)/(public)/(home)/components/faq.tsx
index d371e3b..0feed1f 100644
--- a/src/app/(pages)/(public)/(home)/components/faq.tsx
+++ b/src/app/(pages)/(public)/(home)/components/faq.tsx
@@ -13,7 +13,7 @@ export const Collapse = ({ title, content, className = "" }: CollapseProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className={`border rounded-lg overflow-hidden ${className}`}>
+    <div className={`border rounded-2xl overflow-hidden ${className}`}>
       <Button
         onClick={() => setIsOpen(!isOpen)}
         className="w-full p-5 text-left flex justify-between items-center bg-gray hover:bg-gray-light transition-colors"
diff --git a/src/app/(pages)/(public)/(home)/components/ourFeatures.tsx b/src/app/(pages)/(public)/(home)/components/ourFeatures.tsx
index 4fd6b51..ea25e13 100644
--- a/src/app/(pages)/(public)/(home)/components/ourFeatures.tsx
+++ b/src/app/(pages)/(public)/(home)/components/ourFeatures.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export const OurFeatures = () => {
   return (
-    <section className="flex items-center justify-center gap-20 rounded-lg bg-gray-light aspect-section-xs">
+    <section className="flex items-center justify-center gap-20 rounded-2xl bg-gray-light aspect-section-xs">
       {Object.entries({
         "Make do with ingredients at home": "/images/icons/mortar.png",
         "SAVE TIME BY USING WHAT YOU HAVE": "/images/icons/stopwatch.png",
diff --git a/src/app/(pages)/(public)/recipes/[_id]/_components/client.tsx b/src/app/(pages)/(public)/recipes/[_id]/_components/client.tsx
index 92be34a..8758791 100644
--- a/src/app/(pages)/(public)/recipes/[_id]/_components/client.tsx
+++ b/src/app/(pages)/(public)/recipes/[_id]/_components/client.tsx
@@ -13,7 +13,7 @@ function ErrorFallback({
   resetErrorBoundary: () => void;
 }) {
   return (
-    <div role="alert" className="p-4 bg-error-light text-error rounded-lg">
+    <div role="alert" className="p-4 bg-error-light text-error rounded-2xl">
       <h2 className="text-lg font-bold">Something went wrong:</h2>
       <p className="mb-4">{error.message}</p>
       <Button
diff --git a/src/app/(pages)/(public)/recipes/[_id]/_components/creator.tsx b/src/app/(pages)/(public)/recipes/[_id]/_components/creator.tsx
index f09361d..dbc5617 100644
--- a/src/app/(pages)/(public)/recipes/[_id]/_components/creator.tsx
+++ b/src/app/(pages)/(public)/recipes/[_id]/_components/creator.tsx
@@ -10,7 +10,7 @@ export const Creator: React.FC<Partial<User>> = ({
   _id,
 }) => {
   return (
-    <section className="flex w-full bg-black outline-yellow outline-1 aspect-section-md rounded-lg gap-15 p-20">
+    <section className="flex w-full bg-black outline-yellow outline-1 aspect-section-md rounded-2xl gap-15 p-20">
       <Image
         src={typeof src === "object" ? src.url : src}
         fallbackSrc="/images/user-fallback.png"
diff --git a/src/app/(pages)/(public)/recipes/[_id]/page.tsx b/src/app/(pages)/(public)/recipes/[_id]/page.tsx
index ee1ad7d..52d4c78 100644
--- a/src/app/(pages)/(public)/recipes/[_id]/page.tsx
+++ b/src/app/(pages)/(public)/recipes/[_id]/page.tsx
@@ -78,18 +78,18 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
   return (
     <>
       <section className="flex gap-10 w-full aspect-section-lg p-20 -mt-10 recipe-details-man-decal-bg">
-        <div className="flex-1 bg-gray/10 relative rounded-lg hover:bg-gray-dark/10 delay-750 ease-in duration-500 transition-all">
+        <div className="flex-1 bg-gray/10 relative rounded-2xl hover:bg-gray-dark/10 delay-750 ease-in duration-500 transition-all">
           <Image
             src={typeof recipe.src === "object" ? recipe.src.url : recipe.src}
             alt={recipe.alt || recipe.title}
             fill
-            className="w-full h-full flex justify-center items-center image-flex rounded-lg"
+            className="w-full h-full flex justify-center items-center image-flex rounded-2xl"
             priority
             quality={100}
           />
         </div>
 
-        <article className="flex-1 flex flex-col gap-5 rounded-lg bg-secondary">
+        <article className="flex-1 flex flex-col gap-5 rounded-2xl bg-secondary">
           <div className="flex flex-col gap-5">
             <h2>{recipe.title}</h2>
             <div className="flex flex-col w-full gap-5">
@@ -106,7 +106,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
               </div>
               <Link
                 href={`/users/${recipe.user._id}`}
-                className={clsx("py-5 rounded-lg flex w-full h-25 gap-5")}
+                className={clsx("py-5 rounded-2xl flex w-full h-25 gap-5")}
               >
                 <div className="w-15 aspect-square">
                   <Image
@@ -187,7 +187,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
         </article>
       </section>
       <section className="flex gap-10 px-20">
-        <div className="flex flex-col bg-gray-light gap-5 w-[70%] rounded-lg backdrop-blur-xs h-max p-10 min-h-80">
+        <div className="flex flex-col bg-gray-light gap-5 w-[70%] rounded-2xl backdrop-blur-xs h-max p-10 min-h-80">
           <h3 className="text-3xl font-semibold uppercase">Ingredients</h3>
           <ul className="list-none gap-1 flex flex-col">
             {recipe.ingredients.map(
@@ -200,7 +200,7 @@ const RecipeContent = async ({ _id }: { _id: string }) => {
           </ul>
         </div>
 
-        <div className="w-full rounded-lg shadow-lg p-10 min-h-96 h-max flex flex-col gap-5">
+        <div className="w-full rounded-2xl shadow-lg p-10 min-h-96 h-max flex flex-col gap-5">
           <h3 className="text-3xl font-semibold uppercase">
             Instructions ({recipe.instructions.length})
           </h3>
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 0ed78ad..546f953 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -35,7 +35,7 @@ export const Shape = {
   soft: "rounded-md",
   sharp: "rounded-sm",
   square: "rounded-none",
-  default: "rounded-lg",
+  default: "rounded-2xl",
 } as const;
 
 type BaseButtonProps = {
@@ -110,7 +110,7 @@ export const Button = (props: ButtonProps) => {
       "px-2.5 py-2.5": isIconOnly,
       "pointer-events-none": isDisabled,
     },
-    className,
+    className
   );
 
   const content = (
diff --git a/src/components/customer-review.tsx b/src/components/customer-review.tsx
index cc3352a..519603f 100644
--- a/src/components/customer-review.tsx
+++ b/src/components/customer-review.tsx
@@ -11,7 +11,7 @@ export const CustomerReviewCard: React.FC<CustomerReviewCardProps> = ({
   src,
   content,
 }) => (
-  <div className="w-full rounded-lg shadow bg-white flex flex-col p-5 gap-5">
+  <div className="w-full rounded-2xl shadow bg-white flex flex-col p-5 gap-5">
     <Image
       alt={name || "user"}
       fallbackSrc="/images/user-fallback.png"
diff --git a/src/components/recipe/card/skeleton.tsx b/src/components/recipe/card/skeleton.tsx
index dde8b46..9b1a12b 100644
--- a/src/components/recipe/card/skeleton.tsx
+++ b/src/components/recipe/card/skeleton.tsx
@@ -1,7 +1,7 @@
 export const RecipeCardSkeleton = () => (
   <div className="relative w-full overflow-hidden transition-all rounded-md shadow-md cursor-pointer min-w-72 max-w-80 bg-background group hover:shadow-lg flex flex-col gap-2.5">
-    <div className="w-full aspect-section-lg rounded-lg bg-gray" />
-    <div className="w-full h-5 rounded-lg bg-gray" />
-    <div className="w-full h-1 rounded-lg bg-gray" />
+    <div className="w-full aspect-section-lg rounded-2xl bg-gray" />
+    <div className="w-full h-5 rounded-2xl bg-gray" />
+    <div className="w-full h-1 rounded-2xl bg-gray" />
   </div>
 );
diff --git a/src/components/recipe/tags.tsx b/src/components/recipe/tags.tsx
index c959aa4..1eebbb1 100644
--- a/src/components/recipe/tags.tsx
+++ b/src/components/recipe/tags.tsx
@@ -19,7 +19,7 @@ export const Tag: FC<TagProps> = ({
   const icons = (() => {
     if (Array.isArray(icon)) {
       return icon.filter(
-        (node) => node !== null && node !== undefined && node !== false,
+        (node) => node !== null && node !== undefined && node !== false
       );
     }
     return icon ? [icon] : [];
@@ -31,13 +31,13 @@ export const Tag: FC<TagProps> = ({
     <span
       title={title}
       className={clsx(
-        "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg",
+        "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl",
         "bg-black text-background whitespace-nowrap transition-colors",
         {
           "hover:text-gray-light": animate,
           "cursor-default": !animate,
         },
-        className,
+        className
       )}
     >
       {hasIcons &&
diff --git a/src/components/review-list.tsx b/src/components/review-list.tsx
index d1bb79e..2b06b11 100644
--- a/src/components/review-list.tsx
+++ b/src/components/review-list.tsx
@@ -28,7 +28,7 @@ export const ReviewsList = ({ userid, reviews }: ReviewsListProps) => {
         {reviews.map((review, index) => (
           <li
             key={`review-${index}-${userid}`}
-            className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
+            className="p-4 bg-white dark:bg-gray-800 rounded-2xl shadow-sm"
           >
             <p className="text-gray-800 dark:text-gray-200">{review}</p>
           </li>
diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx
index 92be377..e129b56 100644
--- a/src/components/search/index.tsx
+++ b/src/components/search/index.tsx
@@ -37,7 +37,7 @@ export const SearchForm = () => {
       />
 
       <div className="grid gap-4 md:grid-cols-2">
-        <fieldset className="p-4 border rounded-lg">
+        <fieldset className="p-4 border rounded-2xl">
           <legend className="flex items-center gap-2 mb-4 font-medium">
             <Filter size={18} /> Filters
           </legend>
diff --git a/src/context/form/components/file-upload.tsx b/src/context/form/components/file-upload.tsx
index 3a8d913..a5c96b1 100644
--- a/src/context/form/components/file-upload.tsx
+++ b/src/context/form/components/file-upload.tsx
@@ -27,7 +27,7 @@ function FileUploadContent<T extends FieldValues>({
         if (trimmed) acc[trimmed] = [];
         return acc;
       },
-      {} as Record<string, []>,
+      {} as Record<string, []>
     ),
     maxSize,
     multiple: false,
@@ -54,7 +54,7 @@ function FileUploadContent<T extends FieldValues>({
   return (
     <div
       {...getRootProps()}
-      className={`border-2 border-dashed rounded-lg p-5 text-center cursor-pointer transition-colors ${
+      className={`border-2 border-dashed rounded-2xl p-5 text-center cursor-pointer transition-colors ${
         errors[name]
           ? "border-error bg-error-light"
           : isDragActive
diff --git a/src/context/form/components/styles.tsx b/src/context/form/components/styles.tsx
index 72a10ba..a40e5c8 100644
--- a/src/context/form/components/styles.tsx
+++ b/src/context/form/components/styles.tsx
@@ -1,5 +1,5 @@
 const baseStyles =
-  "w-full px-5 py-2.5 border rounded-lg transition-all duration-200 focus:outline-none";
+  "w-full px-5 py-2.5 border rounded-2xl transition-all duration-200 focus:outline-none";
 export const normalStyles =
   "border-gray-light focus:border-gray focus:ring-2 focus:ring-gray-light";
 export const inputStyles = `${baseStyles} ${normalStyles}`;
diff --git a/src/context/form/components/tag-input/index.tsx b/src/context/form/components/tag-input/index.tsx
index ae4942a..3304b6f 100644
--- a/src/context/form/components/tag-input/index.tsx
+++ b/src/context/form/components/tag-input/index.tsx
@@ -155,7 +155,7 @@ export function TagInput<T extends FieldValues>({
       <div className="relative">
         <div
           className={clsx(
-            "flex flex-wrap gap-2 items-center p-2.5 rounded-lg border",
+            "flex flex-wrap gap-2 items-center p-2.5 rounded-2xl border",
             error ? errorStyles : normalStyles,
             className
           )}
@@ -211,7 +211,7 @@ export function TagInput<T extends FieldValues>({
             role="listbox"
             aria-label="Suggestions"
             className={clsx(
-              "absolute z-10 mt-1 w-full max-h-60 overflow-auto bg-white border border-gray-light rounded-lg shadow-lg",
+              "absolute z-10 mt-1 w-full max-h-60 overflow-auto bg-white border border-gray-light rounded-2xl shadow-lg",
               suggestionClassName
             )}
           >