diff --git a/apps/web/src/components/SuppliedAssets.tsx b/apps/web/src/components/SuppliedAssets.tsx
index fbfdc84..0441acc 100644
--- a/apps/web/src/components/SuppliedAssets.tsx
+++ b/apps/web/src/components/SuppliedAssets.tsx
@@ -132,7 +132,7 @@ export const SuppliedAssets = ({ address }: Props) => {
                                         </Td>
                                         <Td>
                                             <WithdrawAssetButton
-                                                amount={
+                                                maxAmount={
                                                     userReserve.underlyingBalance
                                                 }
                                                 reserveAddress={
diff --git a/apps/web/src/components/WithdrawAssetButton.tsx b/apps/web/src/components/WithdrawAssetButton.tsx
index 5534c20..b98049a 100644
--- a/apps/web/src/components/WithdrawAssetButton.tsx
+++ b/apps/web/src/components/WithdrawAssetButton.tsx
@@ -1,28 +1,87 @@
 import { useWithdrawAsset } from '@/hooks/useWithdrawAsset';
-import { Button } from '@chakra-ui/react';
+import {
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Popover,
+    PopoverArrow,
+    PopoverBody,
+    PopoverCloseButton,
+    PopoverContent,
+    PopoverFooter,
+    PopoverHeader,
+    PopoverTrigger,
+    Portal
+} from '@chakra-ui/react';
+import { useState } from 'react';
 type Props = {
-    amount: string;
+    maxAmount: string;
     reserveAddress: string;
 };
 export const WithdrawAssetButton: React.FC<Props> = ({
     reserveAddress,
-    amount
+    maxAmount
 }) => {
+    const [amount, setAmount] = useState('0');
     const { mutate, isLoading } = useWithdrawAsset({
         reserve: reserveAddress,
         amount
     });
 
+    const isDisabled =
+        !Number(amount) ||
+        isLoading ||
+        Number(amount) > Number(maxAmount) ||
+        Number(amount) <= 0;
+
     return (
-        <Button
-            size={'sm'}
-            colorScheme="green"
-            variant={'outline'}
-            isDisabled={!Number(amount)}
-            onClick={() => mutate()}
-            isLoading={isLoading}
-        >
-            Withdraw
-        </Button>
+        <Popover>
+            <PopoverTrigger>
+                <Button
+                    colorScheme="green"
+                    variant="outline"
+                    size="sm"
+                    isDisabled={!maxAmount || maxAmount === '0'}
+                >
+                    Withdraw
+                </Button>
+            </PopoverTrigger>
+            <Portal>
+                <PopoverContent>
+                    <PopoverArrow />
+                    <PopoverHeader>Amount</PopoverHeader>
+                    <PopoverCloseButton />
+                    <PopoverBody>
+                        <FormControl id="amount">
+                            <Input
+                                value={amount}
+                                onChange={(e) => setAmount(e.target.value)}
+                            />
+                            <FormHelperText>
+                                <Button
+                                    variant="link"
+                                    onClick={() => setAmount(maxAmount)}
+                                >
+                                    Use Max: {maxAmount}
+                                </Button>
+                            </FormHelperText>
+                        </FormControl>
+                    </PopoverBody>
+                    <PopoverFooter>
+                        <Button
+                            isDisabled={isDisabled}
+                            size="sm"
+                            alignSelf={'flex-end'}
+                            colorScheme="purple"
+                            isLoading={isLoading}
+                            onClick={() => mutate()}
+                        >
+                            Confirm
+                        </Button>
+                    </PopoverFooter>
+                </PopoverContent>
+            </Portal>
+        </Popover>
     );
 };