diff --git a/src/components/DepositInput/index.tsx b/src/components/DepositInput/index.tsx
index 4f5d6b2..a3dc057 100644
--- a/src/components/DepositInput/index.tsx
+++ b/src/components/DepositInput/index.tsx
@@ -17,6 +17,7 @@ import "./style.less";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { LABELS, marks } from "../../constants";
 import { ConnectButton } from "../ConnectButton";
+import CollateralInput from "../CollateralInput";
 
 export const DepositInput = (props: {
   className?: string;
@@ -31,17 +32,16 @@ export const DepositInput = (props: {
   const reserve = props.reserve;
   const address = props.address;
 
-  const name = useTokenName(reserve?.liquidityMint);
   const { accounts: fromAccounts, balance, balanceLamports } = useUserBalance(
     reserve?.liquidityMint
   );
-
+  console.log(balance)
   const convert = useCallback(
     (val: string | number) => {
       if (typeof val === "string") {
         return (parseFloat(val) / balance) * 100;
       } else {
-        return ((val * balance) / 100).toFixed(2);
+        return (val * balance) / 100;
       }
     },
     [balance]
@@ -108,26 +108,30 @@ export const DepositInput = (props: {
           }}
         >
           <div className="deposit-input-title">{LABELS.DEPOSIT_QUESTION}</div>
-          <div className="token-input">
-            <TokenIcon mintAddress={reserve?.liquidityMint} />
-            <NumericInput
-              value={value}
-              onChange={setValue}
-              autoFocus={true}
-              style={{
-                fontSize: 20,
-                boxShadow: "none",
-                borderColor: "transparent",
-                outline: "transparent",
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-evenly",
+              alignItems: "center",
+            }}
+          >
+            <CollateralInput
+              title="Amount"
+              reserve={reserve}
+              amount={parseFloat(value) || 0}
+              onInputChange={(val: number | null) => {
+                setValue(val?.toString() || "");
               }}
-              placeholder="0.00"
+              disabled={true}
+              hideBalance={true}
             />
-            <div>{name}</div>
           </div>
 
           <Slider marks={marks} value={pct} onChange={setPct} />
 
           <ConnectButton
+            size="large"
             type="primary"
             onClick={onDeposit}
             loading={pendingTx}