diff --git a/public/images/near_icon.svg b/public/images/near_icon.svg
index e96f09f..4cf2e15 100644
--- a/public/images/near_icon.svg
+++ b/public/images/near_icon.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
-    <g id="Layer_1" data-name="Layer 1">
+    <g id="Layer_1">
         <path fill="#fff" d="M187.58,79.81l-30.1,44.69a3.2,3.2,0,0,0,4.75,4.2L191.86,103a1.2,1.2,0,0,1,2,.91v80.46a1.2,1.2,0,0,1-2.12.77L102.18,77.93A15.35,15.35,0,0,0,90.47,72.5H87.34A15.34,15.34,0,0,0,72,87.84V201.16A15.34,15.34,0,0,0,87.34,216.5h0a15.35,15.35,0,0,0,13.08-7.31l30.1-44.69a3.2,3.2,0,0,0-4.75-4.2L96.14,186a1.2,1.2,0,0,1-2-.91V104.61a1.2,1.2,0,0,1,2.12-.77l89.55,107.23a15.35,15.35,0,0,0,11.71,5.43h3.13A15.34,15.34,0,0,0,216,201.16V87.84A15.34,15.34,0,0,0,200.66,72.5h0A15.35,15.35,0,0,0,187.58,79.81Z"/>
     </g>
 </svg>
diff --git a/src/components/SwapInput/index.tsx b/src/components/SwapInput/index.tsx
index e57154a..3439434 100644
--- a/src/components/SwapInput/index.tsx
+++ b/src/components/SwapInput/index.tsx
@@ -30,7 +30,7 @@ export const SwapInput: React.FC<t.SwapInputPropsType> = ({
   }
 
   const getOutputValue = () => {
-    if (isOutputUnlocked) return outputValue ? outputValue : undefined
+    if (isOutputUnlocked) return outputValue ? outputValue : ''
     return swapQuote && value ? String(Number(value) * swapQuote) : ''
   }
 
diff --git a/src/pages/borrow.tsx b/src/pages/borrow.tsx
index 0929a9c..4e7eb60 100644
--- a/src/pages/borrow.tsx
+++ b/src/pages/borrow.tsx
@@ -9,6 +9,7 @@ import { NearContext } from 'src/near/nearContext'
 import { useGetNearQuoteQuery } from 'src/redux/api/nearQuote'
 import { useGetBalance } from 'src/hooks/useGetBalance'
 import { useGetStats } from 'src/hooks/useGetStats'
+import { toNumber } from 'src/utils/numbers'
 
 import { SwapInput } from 'src/components/SwapInput'
 
@@ -16,14 +17,12 @@ const EXCHANGE_RATE = 0.99090909091
 
 const Borrow: React.FC = () => {
   const { contract } = React.useContext(NearContext)
-  const [inputAmount, setInputAmount] = React.useState<string | undefined>()
-  const [outputAmount, setOutputAmount] = React.useState<string | undefined>()
-  const [inputWithdrawAmount, setInputWithdrawAmount] = React.useState<
-    string | undefined
-  >()
-  const [outputWithdrawAmount, setOutputWithdrawAmount] = React.useState<
-    string | undefined
-  >()
+  const [inputAmount, setInputAmount] = React.useState<string>('')
+  const [outputAmount, setOutputAmount] = React.useState<string>('')
+  const [inputWithdrawAmount, setInputWithdrawAmount] =
+    React.useState<string>('')
+  const [outputWithdrawAmount, setOutputWithdrawAmount] =
+    React.useState<string>('')
   const [isWithdraw, setIsWithdraw] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(false)
   const { quidBalance, nearBalance } = useGetBalance()
@@ -38,34 +37,37 @@ const Borrow: React.FC = () => {
 
   const swapQuote = isQuid
     ? // Todo: investigate if exchange rate applies to Quid
-      (1 / Number(nearQuote)) * EXCHANGE_RATE
-    : Number(nearQuote) * EXCHANGE_RATE
+      (1 / toNumber(nearQuote)) * EXCHANGE_RATE
+    : toNumber(nearQuote) * EXCHANGE_RATE
 
   const currentBalance = isQuid ? quidBalance : nearBalance
   const getCollateralRatio = (): number => {
     if (nearQuote && inputAmount && outputAmount) {
-      return isQuid
-        ? Number(Number(inputAmount) / (Number(outputAmount) * nearQuote))
-        : Number(outputAmount) / (Number(inputAmount) * nearQuote)
+      const newRatio = isQuid
+        ? toNumber(toNumber(inputAmount) / (toNumber(outputAmount) * nearQuote))
+        : toNumber(outputAmount) / (toNumber(inputAmount) * nearQuote)
+      return toNumber(newRatio)
     }
     return 0
   }
 
   const getLiquidationPrice = (): number => {
     if (nearQuote && inputAmount && outputAmount) {
-      return nearQuote * getCollateralRatio()
+      const newLiquidation = nearQuote * getCollateralRatio()
+      return toNumber(newLiquidation)
     }
     return 0
   }
 
   const getGaugeNumber = () => {
-    return isWithdraw
-      ? (Number(stats?.debit || 0) - Number(outputWithdrawAmount || 0)) /
-          ((Number(stats?.credit || 0) - Number(inputWithdrawAmount || 0)) *
-            Number(nearQuote))
-      : (Number(stats?.debit || 0) + Number(outputAmount || 0)) /
-          ((Number(stats?.credit || 0) + Number(inputAmount || 0)) *
-            Number(nearQuote))
+    const newValue = isWithdraw
+      ? (toNumber(stats?.debit) - toNumber(outputWithdrawAmount)) /
+        ((toNumber(stats?.credit) - toNumber(inputWithdrawAmount)) *
+          toNumber(nearQuote))
+      : (toNumber(stats?.debit) + toNumber(outputAmount)) /
+        ((toNumber(stats?.credit) + toNumber(inputAmount)) *
+          toNumber(nearQuote))
+    return toNumber(newValue)
   }
 
   const handleBorrow = async () => {
@@ -176,22 +178,24 @@ const Borrow: React.FC = () => {
               <Text size="small" textAlign="center">
                 Deposit <br />
                 (Near) <br />
-                {stats?.credit ? Number(stats?.credit).toFixed(3) : 0}
+                {stats?.credit ? toNumber(stats?.credit).toFixed(3) : 0}
               </Text>
             </Box>
             <Box width="40%">
               <GaugeChart
-                id="gauge-chart2"
+                id="borrow-gauge-chart"
                 nrOfLevels={22}
                 percent={getGaugeNumber()}
-                colors={['yellow', '#FFC371', 'red']}
+                colors={['#ffff00', '#FFC371', '#ff0000']}
                 arcWidth={0.22}
+                // Todo: find a fix for the SVG bug while animating
+                // animate={false}
               />
             </Box>
             <Box width="30%" alignContent="center">
               <Text size="small" textAlign="center">
                 Debt <br />
-                {stats?.debit ? Number(stats?.debit).toFixed(3) : 0}
+                {stats?.debit ? toNumber(stats?.debit).toFixed(3) : 0}
               </Text>
             </Box>
           </Box>
@@ -212,12 +216,8 @@ const Borrow: React.FC = () => {
             <SwapInput
               inputLabel={isWithdraw ? 'Withdraw' : 'Deposit'}
               outputLabel={isWithdraw ? 'Repay' : 'Borrow'}
-              value={
-                isWithdraw ? String(inputWithdrawAmount) : String(inputAmount)
-              }
-              outputValue={
-                isWithdraw ? String(outputWithdrawAmount) : String(outputAmount)
-              }
+              value={isWithdraw ? inputWithdrawAmount : inputAmount}
+              outputValue={isWithdraw ? outputWithdrawAmount : outputAmount}
               maxValue={currentBalance}
               onChange={isWithdraw ? setInputWithdrawAmount : setInputAmount}
               onChangeOutput={
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
new file mode 100644
index 0000000..f8b4507
--- /dev/null
+++ b/src/utils/numbers.ts
@@ -0,0 +1,10 @@
+// Always return a number (avoid NaN)
+export const toNumber = (value: unknown): number => {
+  if (value && typeof value === 'number') {
+    return value
+  }
+  if (value && typeof value === 'string') {
+    return Number(value) || 0
+  }
+  return 0
+}