diff --git a/components/MintSwapPanel.tsx b/components/MintSwapPanel.tsx
index e53151d..3c2d61e 100644
--- a/components/MintSwapPanel.tsx
+++ b/components/MintSwapPanel.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import Image from "next/image";
 import { useApp } from "@/contexts/AppContext";
-import { Tabs, Tab, Button, Input } from "@heroui/react";
+import { Tabs, Tab, Button } from "@heroui/react";
 
 export default function MintSwapPanel() {
   const { t } = useApp();
@@ -84,17 +84,12 @@ export default function MintSwapPanel() {
                 <span className="text-body-default font-bold text-text-primary dark:text-white">USDC</span>
               </button>
               <div className="flex flex-col items-end flex-1">
-                <Input
+                <input
                   type="number"
                   placeholder="0.00"
                   value={amount}
-                  onValueChange={setAmount}
-                  classNames={{
-                    base: "max-w-full",
-                    mainWrapper: "h-auto",
-                    input: "text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500",
-                    inputWrapper: "h-auto shadow-none bg-transparent p-0 border-none",
-                  }}
+                  onChange={(e) => setAmount(e.target.value)}
+                  className="w-full text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                 />
                 <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                   {amount ? `≈ $${amount}` : "--"}