diff --git a/src/components/LoanInfoLine/index.tsx b/src/components/LoanInfoLine/index.tsx
new file mode 100644
index 0000000..f896743
--- /dev/null
+++ b/src/components/LoanInfoLine/index.tsx
@@ -0,0 +1,102 @@
+import { Card, Col, Row, Statistic } from "antd";
+import {
+ formatNumber,
+ formatPct,
+ fromLamports,
+ wadToLamports,
+} from "../../utils/utils";
+import React, { useMemo } from "react";
+import {
+ EnrichedLendingObligation,
+ useLendingReserve,
+ useTokenName,
+} from "../../hooks";
+import { useMint } from "../../contexts/accounts";
+import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
+import { GUTTER } from "../../constants";
+
+export const LoanInfoLine = (props: {
+ className?: string;
+ obligation: EnrichedLendingObligation;
+}) => {
+ const obligation = props.obligation;
+
+ const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
+ const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
+
+ const liquidityMint = useMint(repayReserve?.info.liquidityMint);
+ const collateralMint = useMint(withdrawReserve?.info.liquidityMint);
+ const repayName = useTokenName(repayReserve?.info.liquidityMint);
+ const withdrawName = useTokenName(withdrawReserve?.info.liquidityMint);
+
+ const borrowAPY = useMemo(
+ () => (repayReserve ? calculateBorrowAPY(repayReserve?.info) : 0),
+ [repayReserve]
+ );
+ if (!obligation || !repayReserve) {
+ return null;
+ }
+ const borrowAmount = fromLamports(
+ wadToLamports(obligation?.info.borrowAmountWad),
+ liquidityMint
+ );
+ const collateralLamports = collateralToLiquidity(
+ obligation?.info.depositedCollateral,
+ repayReserve.info
+ );
+ const collateral = fromLamports(collateralLamports, collateralMint);
+
+ return (
+