diff --git a/.env.local.example b/.env.local.example
index dcc96d3b..ab220a33 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -4,6 +4,7 @@ NEXT_PUBLIC_SAVING_CIRCLES_VIEWER_CONTRACT_ADDRESS=
 NEXT_PUBLIC_AUTOMATIC_SAVING_CIRCLES_CONTRACT_ADDRESS=
 # Optional; defaults to the zero address when unset (Goal savings stays hidden)
 NEXT_PUBLIC_GOAL_SAVINGS_CONTRACT_ADDRESS=
+NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS=
 NEXT_PUBLIC_DEPOSIT_TOKEN_ADDRESS=
 NEXT_PUBLIC_CHAIN_ID=
 NEXT_PUBLIC_SAVING_CIRCLES_CONTRACT_CREATION_BLOCK=
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 257a52b7..abb8a94b 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -58,6 +58,9 @@ The frontend is a Next.js App Router application that orchestrates both.
   Rotating savings (`/new/rosca`) or a Shared goal (`/new/goal`). Both flows link back
   to the picker. With the feature off, `/new` keeps the original rotating savings flow.
 - `/goals/[id]` — a Shared goal's detail and actions (feature-gated: `goalSavings`).
+- `/new/microloan`, `/microloans/[id]` — offer a Microloan, and its lender/borrower
+  actions (feature-gated: `microloans`, contract `NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS`).
+  Chain state only: no Supabase metadata or invite links yet.
 - `/stacks/[id]` — a single circle's detail and actions.
 - `/stacks/join` — accept an invite link.
 - `api/onboard` — create the Supabase user record after Privy login.
diff --git a/src/app/account/_components/account-microloans.tsx b/src/app/account/_components/account-microloans.tsx
new file mode 100644
index 00000000..04bf3e2a
--- /dev/null
+++ b/src/app/account/_components/account-microloans.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { FeatureGate } from "@/components/feature-gate";
+import MicroloanList from "@/components/stack-lists/microloan-list";
+import { Address } from "viem";
+
+/** The feature-gated list of loans the profile owner lent or borrows. */
+const AccountMicroloans = ({ address }: { address: Address }) => (
+  <FeatureGate feature="microloans">
+    <MicroloanList address={address} />
+  </FeatureGate>
+);
+
+export default AccountMicroloans;
diff --git a/src/app/account/_components/your-stacks.tsx b/src/app/account/_components/your-stacks.tsx
index bd15a607..a1c97236 100644
--- a/src/app/account/_components/your-stacks.tsx
+++ b/src/app/account/_components/your-stacks.tsx
@@ -3,6 +3,7 @@ import { Address } from "viem";
 import AccountTab from "./account-tab";
 import AccountUserStacks from "./account-user-stacks";
 import AccountGoals from "./account-goals";
+import AccountMicroloans from "./account-microloans";
 
 const YourStacks = ({
   address,
@@ -16,6 +17,7 @@ const YourStacks = ({
     <AccountTab basePath={basePath} address={address} />
     <AccountUserStacks address={address} />
     <AccountGoals address={address} />
+    <AccountMicroloans address={address} />
   </div>
 );
 
diff --git a/src/app/microloans/[id]/_components/borrower-actions.tsx b/src/app/microloans/[id]/_components/borrower-actions.tsx
new file mode 100644
index 00000000..c050f65c
--- /dev/null
+++ b/src/app/microloans/[id]/_components/borrower-actions.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import BalanceHint from "@/app/microloans/_components/balance-hint";
+import LocalButton from "@/components/button";
+import NumericInput from "@/components/numeric-input";
+import { useModal } from "@/components/modal/context";
+import { LoanTerms } from "@/hooks/use-microloan";
+import { useMicroloanAction } from "@/hooks/use-microloan-action";
+import {
+  MICROLOAN_ACCEPT_ERRORS,
+  MICROLOAN_REPAY_ERRORS,
+} from "@/lib/contract-errors";
+import {
+  DEPOSIT_TOKEN,
+  formatDepositAmount,
+  parseDepositAmount,
+} from "@/lib/deposit-token";
+import { agreementHash } from "@/lib/microloan-terms";
+import { isLoanRepayable, LoanState } from "@/lib/microloan-state";
+import { Body, formatBalance, Heading3, Logo } from "@breadcoop/ui";
+import { useState } from "react";
+import { zeroHash } from "viem";
+
+const BorrowerActions = ({
+  loanId,
+  terms,
+  state,
+  outstanding,
+}: {
+  loanId: bigint;
+  terms: LoanTerms;
+  state: LoanState;
+  outstanding: bigint;
+}) => {
+  if (state === LoanState.Offered) {
+    return <AcceptLoan loanId={loanId} terms={terms} />;
+  }
+
+  if (isLoanRepayable(state, outstanding)) {
+    return (
+      <RepayLoan loanId={loanId} terms={terms} outstanding={outstanding} />
+    );
+  }
+
+  return null;
+};
+
+function AcceptLoan({ loanId, terms }: { loanId: bigint; terms: LoanTerms }) {
+  const { setModal } = useModal();
+  const { runMicroloanAction } = useMicroloanAction();
+  const [agreement, setAgreement] = useState("");
+
+  const needsAgreement = terms.termsHash !== zeroHash;
+  const matches =
+    !needsAgreement || agreementHash(agreement) === terms.termsHash;
+
+  const accept = () =>
+    setModal({
+      type: "STACK_TX_INIT",
+      stackType: "microloan",
+      action: "acceptLoan",
+      id: loanId,
+      amount: terms.principal,
+      onConfirm: () =>
+        runMicroloanAction({
+          action: "acceptLoan",
+          functionName: "accept",
+          args: [loanId, terms.termsHash],
+          errors: MICROLOAN_ACCEPT_ERRORS,
+          amount: terms.principal,
+        }),
+    });
+
+  return (
+    <section className="bg-paper-0 p-5 *:mb-4 last:mb-0">
+      <header className="border-b border-paper-2 pb-4">
+        <Heading3 className="text-2xl">Accept the loan</Heading3>
+      </header>
+      <Body className="text-surface-grey">
+        You receive {formatToken(terms.principal)} now with no interest. Repay
+        it in full within {Number(terms.repaymentPeriod / BigInt(86400))} days
+        to also receive the {formatToken(terms.grant)} grant.
+      </Body>
+      {needsAgreement && (
+        <div className="flex flex-col gap-2">
+          <Body bold>Loan agreement</Body>
+          <Body className="text-xs text-surface-grey">
+            Paste the agreement the lender shared with you. Accepting records
+            on-chain that you agreed to exactly this text.
+          </Body>
+          <textarea
+            value={agreement}
+            onChange={(e) => setAgreement(e.target.value)}
+            rows={4}
+            className="w-full border border-paper-2 bg-paper-1 py-3 px-4 placeholder:text-surface-grey text-surface-grey-2 placeholder:font-light"
+            placeholder="Paste the agreement here"
+          />
+          {agreement.trim() && (
+            <Body
+              className={`text-xs ${matches ? "text-system-green" : "text-system-red"}`}
+            >
+              {matches
+                ? "This matches the lender's agreement."
+                : "This doesn't match the lender's agreement. Check you copied all of it."}
+            </Body>
+          )}
+        </div>
+      )}
+      <LocalButton
+        className="w-full font-bold"
+        onClick={accept}
+        disabled={!matches}
+      >
+        Accept loan
+      </LocalButton>
+    </section>
+  );
+}
+
+function RepayLoan({
+  loanId,
+  terms,
+  outstanding,
+}: {
+  loanId: bigint;
+  terms: LoanTerms;
+  outstanding: bigint;
+}) {
+  const { setModal } = useModal();
+  const { runMicroloanAction, balance } = useMicroloanAction(terms.token);
+  const [amountInput, setAmountInput] = useState("");
+
+  let amount = BigInt(0);
+  try {
+    amount = amountInput ? parseDepositAmount(amountInput) : BigInt(0);
+  } catch {
+    // Unparseable input stays at zero and keeps the button disabled
+  }
+  // The contract only pulls what is owed, so never ask for more
+  const payAmount = amount > outstanding ? outstanding : amount;
+
+  const repay = () =>
+    setModal({
+      type: "STACK_TX_INIT",
+      stackType: "microloan",
+      action: "repay",
+      id: loanId,
+      amount: payAmount,
+      onConfirm: () =>
+        runMicroloanAction({
+          action: "repay",
+          functionName: "repay",
+          args: [loanId, payAmount],
+          errors: MICROLOAN_REPAY_ERRORS,
+          approveAmount: payAmount,
+          amount: payAmount,
+        }),
+    });
+
+  return (
+    <section className="bg-paper-0 p-5 *:mb-4 last:mb-0">
+      <header className="border-b border-paper-2 pb-4">
+        <Heading3 className="text-2xl">Repay</Heading3>
+      </header>
+      <Body className="text-surface-grey">
+        You still owe {formatToken(outstanding)}. Pay any amount, any time.
+      </Body>
+      <div className="flex flex-col gap-2">
+        <div className="relative">
+          <NumericInput
+            value={amountInput}
+            onChange={(e) => setAmountInput(e.target.value)}
+            className="w-full pr-24"
+            placeholder="Amount"
+            allowDecimal
+          />
+          <div className="absolute top-1/2 -translate-y-1/2 right-3 flex items-center gap-2">
+            <button
+              type="button"
+              className="text-primary-blue text-sm font-bold"
+              onClick={() => setAmountInput(formatDepositAmount(outstanding))}
+            >
+              All
+            </button>
+            <div className="p-1 bg-paper-main">
+              <Logo
+                text={DEPOSIT_TOKEN.symbol}
+                className="size-6"
+                variant="square"
+              />
+            </div>
+          </div>
+        </div>
+        <LocalButton
+          className="w-full font-bold"
+          onClick={repay}
+          disabled={
+            payAmount === BigInt(0) ||
+            (balance !== undefined && balance < payAmount)
+          }
+        >
+          Repay
+        </LocalButton>
+        <BalanceHint balance={balance} amount={payAmount} />
+      </div>
+    </section>
+  );
+}
+
+const formatToken = (amount: bigint) =>
+  `${formatBalance(+formatDepositAmount(amount), 2)} ${DEPOSIT_TOKEN.symbol}`;
+
+export default BorrowerActions;
diff --git a/src/app/microloans/[id]/_components/grant-panel.tsx b/src/app/microloans/[id]/_components/grant-panel.tsx
new file mode 100644
index 00000000..6b468d76
--- /dev/null
+++ b/src/app/microloans/[id]/_components/grant-panel.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import LocalButton from "@/components/button";
+import { useModal } from "@/components/modal/context";
+import { LoanTerms } from "@/hooks/use-microloan";
+import { useMicroloanAction } from "@/hooks/use-microloan-action";
+import { MICROLOAN_PAYOUT_ERRORS } from "@/lib/contract-errors";
+import { LoanState } from "@/lib/microloan-state";
+import { Body, Heading3 } from "@breadcoop/ui";
+
+/**
+ * Once the loan is repaid, anyone can release the grant; it can only ever go
+ * to the borrower.
+ */
+const GrantPanel = ({
+  loanId,
+  terms,
+  state,
+}: {
+  loanId: bigint;
+  terms: LoanTerms;
+  state: LoanState;
+}) => {
+  const { setModal } = useModal();
+  const { runMicroloanAction } = useMicroloanAction();
+
+  if (state !== LoanState.Repaid) return null;
+
+  const release = () =>
+    setModal({
+      type: "STACK_TX_INIT",
+      stackType: "microloan",
+      action: "releaseGrant",
+      id: loanId,
+      amount: terms.grant,
+      onConfirm: () =>
+        runMicroloanAction({
+          action: "releaseGrant",
+          functionName: "releaseGrant",
+          args: [loanId],
+          errors: MICROLOAN_PAYOUT_ERRORS,
+          amount: terms.grant,
+        }),
+    });
+
+  return (
+    <section className="bg-paper-0 p-5 *:mb-4 last:mb-0">
+      <header className="border-b border-paper-2 pb-4">
+        <Heading3 className="text-2xl">Release the grant</Heading3>
+      </header>
+      <Body className="text-surface-grey">
+        The loan is fully repaid. Anyone can release the grant, and it always
+        goes to the borrower.
+      </Body>
+      <LocalButton
+        variant="positive"
+        className="w-full font-bold"
+        onClick={release}
+      >
+        Release grant
+      </LocalButton>
+    </section>
+  );
+};
+
+export default GrantPanel;
diff --git a/src/app/microloans/[id]/_components/header.tsx b/src/app/microloans/[id]/_components/header.tsx
new file mode 100644
index 00000000..51225f58
--- /dev/null
+++ b/src/app/microloans/[id]/_components/header.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import Alert from "@/components/alert";
+import BackPage from "@/components/back-page";
+import LocalButton from "@/components/button";
+import {
+  LOAN_STATE_CHIP_CLASSES,
+  LOAN_STATE_LABELS,
+  LoanState,
+} from "@/lib/microloan-state";
+import { Chip, cn, Heading2, useCopyToClipboard } from "@breadcoop/ui";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import type { LoanRole } from "./page-content";
+
+function CopyLoanLink({ id }: { id: string }) {
+  const [origin, setOrigin] = useState("");
+  const { copy, copied } = useCopyToClipboard({
+    textToCopy: `${origin}/microloans/${id}`,
+  });
+
+  useEffect(() => {
+    setOrigin(window.location.origin);
+  }, []);
+
+  return (
+    <LocalButton
+      variant="light"
+      className={cn("h-8 border px-4", copied && "text-system-green")}
+      leftIcon={
+        copied ? (
+          <CheckIcon className="fill-system-green" />
+        ) : (
+          <CopyIcon className="fill-primary-blue" />
+        )
+      }
+      onClick={() => copy()}
+      disabled={!origin}
+    >
+      {copied ? "Copied!" : "Copy loan link"}
+    </LocalButton>
+  );
+}
+
+function stateAlert(state: LoanState, role: LoanRole) {
+  switch (state) {
+    case LoanState.Offered:
+      return {
+        title: "Waiting for the borrower",
+        description:
+          role === "borrower"
+            ? "This loan is offered to you. The loan amount and the grant are already in escrow. Accept below to receive the loan."
+            : "The loan amount and the grant are in escrow. The borrower can accept until the offer closes.",
+      };
+    case LoanState.Expired:
+      return {
+        title: "The offer expired",
+        description:
+          "The borrower didn't accept in time. The lender can cancel to get the escrow back.",
+      };
+    case LoanState.Cancelled:
+      return {
+        title: "This loan was cancelled",
+        description: "The lender cancelled the offer and got the escrow back.",
+      };
+    case LoanState.Active:
+      return {
+        title: "Loan in progress",
+        description:
+          "Repay the full loan before the deadline to unlock the grant. Any amount can be repaid at any time.",
+      };
+    case LoanState.Overdue:
+      return {
+        title: "Repayment is late",
+        description:
+          "The deadline has passed. The borrower can still repay and receive the grant until the lender takes it back or gives more time.",
+      };
+    case LoanState.Repaid:
+      return {
+        title: "Loan repaid!",
+        description:
+          "The loan is fully repaid. The grant can now be released to the borrower.",
+      };
+    case LoanState.Completed:
+      return {
+        title: "Loan completed",
+        description: "The loan was repaid and the grant (if any) was paid out.",
+      };
+    case LoanState.Defaulted:
+      return {
+        title: "The grant was taken back",
+        description:
+          "The loan was late and the lender reclaimed the grant. Any remaining loan amount can still be repaid.",
+      };
+  }
+}
+
+const SUCCESS_STATES = [LoanState.Repaid, LoanState.Completed];
+
+const LoanHeader = ({
+  id,
+  role,
+  state,
+}: {
+  id: string;
+  role: LoanRole;
+  state: LoanState | undefined;
+}) => {
+  const alert = state !== undefined ? stateAlert(state, role) : null;
+
+  return (
+    <header className="flex flex-col mb-3.5 md:mb-6">
+      <div className="flex flex-col items-start gap-2.5 mb-4 md:flex-row md:items-center md:justify-between md:flex-wrap">
+        <BackPage label="Return to Dashboard" href="/" className="m-0!" />
+        <CopyLoanLink id={id} />
+      </div>
+      <div className="flex flex-col flex-wrap gap-4 mb-5.25 sm:flex-row sm:items-center sm:justify-between md:order-first md:mb-7.25">
+        <Heading2 className="text-primary-blue text-2xl md:text-5xl">
+          Microloan {id}
+        </Heading2>
+        <div className="flex items-center gap-2">
+          {role && (
+            <Chip className="border-system-green text-system-green bg-paper-main max-w-max hover:border-current capitalize">
+              {role}
+            </Chip>
+          )}
+          {state !== undefined && (
+            <Chip
+              className={cn(
+                "bg-paper-main max-w-max hover:border-current",
+                LOAN_STATE_CHIP_CLASSES[state]
+              )}
+            >
+              {LOAN_STATE_LABELS[state]}
+            </Chip>
+          )}
+        </div>
+      </div>
+      {alert && state !== undefined && (
+        <Alert
+          closeAble={false}
+          variant={SUCCESS_STATES.includes(state) ? "success" : "warning"}
+          title={alert.title}
+          description={alert.description}
+        />
+      )}
+    </header>
+  );
+};
+
+export default LoanHeader;
diff --git a/src/app/microloans/[id]/_components/lender-actions.tsx b/src/app/microloans/[id]/_components/lender-actions.tsx
new file mode 100644
index 00000000..d5da2de9
--- /dev/null
+++ b/src/app/microloans/[id]/_components/lender-actions.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import Input from "@/components/input";
+import LocalButton from "@/components/button";
+import { useModal } from "@/components/modal/context";
+import { useBlockTimestamp } from "@/hooks/use-block-timestamp";
+import { LoanStatus, LoanTerms } from "@/hooks/use-microloan";
+import { useMicroloanAction } from "@/hooks/use-microloan-action";
+import {
+  MICROLOAN_LENDER_ERRORS,
+  MICROLOAN_PAYOUT_ERRORS,
+} from "@/lib/contract-errors";
+import { DEPOSIT_TOKEN, formatDepositAmount } from "@/lib/deposit-token";
+import { LoanState } from "@/lib/microloan-state";
+import { dateInputToMs, earliestDeadlineDate } from "@/utils/time";
+import { Body, formatBalance, Heading3 } from "@breadcoop/ui";
+import { ReactNode, useState } from "react";
+import { Address, isAddress, zeroAddress } from "viem";
+
+const LenderActions = ({
+  loanId,
+  terms,
+  status,
+  state,
+}: {
+  loanId: bigint;
+  terms: LoanTerms;
+  status: LoanStatus;
+  state: LoanState;
+}) => {
+  const now = useBlockTimestamp();
+  const { setModal } = useModal();
+  const { runMicroloanAction } = useMicroloanAction();
+  const [borrowerInput, setBorrowerInput] = useState("");
+  const [extendInput, setExtendInput] = useState("");
+
+  const canSetBorrower =
+    state === LoanState.Offered && status.borrower === zeroAddress;
+  const canCancel = state === LoanState.Offered || state === LoanState.Expired;
+  const canExtend = state === LoanState.Active || state === LoanState.Overdue;
+  const canReclaim = state === LoanState.Overdue && terms.grant > BigInt(0);
+  const canCollect = status.lenderOwed > BigInt(0);
+
+  if (!canSetBorrower && !canCancel && !canExtend && !canReclaim && !canCollect)
+    return null;
+
+  const borrowerValid =
+    isAddress(borrowerInput) &&
+    borrowerInput.toLowerCase() !== status.lender.toLowerCase();
+
+  // A date input yields YYYY-MM-DD; the new deadline is midnight at its start
+  const extendMs = extendInput ? dateInputToMs(extendInput) : NaN;
+  const newRepayBy = Number.isNaN(extendMs)
+    ? undefined
+    : BigInt(Math.floor(extendMs / 1000));
+  const extendValid =
+    newRepayBy !== undefined &&
+    newRepayBy > status.repayBy &&
+    newRepayBy > BigInt(Math.floor(now / 1000));
+
+  const confirm = (
+    action: "setBorrower" | "cancelLoan" | "extendLoan" | "reclaimGrant",
+    run: () => Promise<void>,
+    amount?: bigint
+  ) =>
+    setModal({
+      type: "STACK_TX_INIT",
+      stackType: "microloan",
+      action,
+      id: loanId,
+      amount,
+      onConfirm: run,
+    });
+
+  return (
+    <section className="bg-paper-0 p-5 *:mb-4 last:mb-0">
+      <header className="border-b border-paper-2 pb-4">
+        <Heading3 className="text-2xl">Lender actions</Heading3>
+      </header>
+
+      {canCollect && (
+        <Action
+          note={`${formatToken(status.lenderOwed)} in repayments and yield is ready for you.`}
+        >
+          <LocalButton
+            variant="positive"
+            className="w-full font-bold"
+            onClick={() =>
+              setModal({
+                type: "STACK_TX_INIT",
+                stackType: "microloan",
+                action: "collect",
+                id: loanId,
+                amount: status.lenderOwed,
+                onConfirm: () =>
+                  runMicroloanAction({
+                    action: "collect",
+                    functionName: "collect",
+                    args: [loanId],
+                    errors: MICROLOAN_PAYOUT_ERRORS,
+                    amount: status.lenderOwed,
+                  }),
+              })
+            }
+          >
+            Collect {formatToken(status.lenderOwed)}
+          </LocalButton>
+        </Action>
+      )}
+
+      {canSetBorrower && (
+        <Action note="Only this wallet will be able to accept the loan.">
+          <Input
+            value={borrowerInput}
+            onChange={(e) => setBorrowerInput(e.target.value)}
+            className="w-full"
+            placeholder="0x… borrower address"
+          />
+          <LocalButton
+            className="w-full font-bold"
+            disabled={!borrowerValid}
+            onClick={() =>
+              confirm("setBorrower", () =>
+                runMicroloanAction({
+                  action: "setBorrower",
+                  functionName: "setBorrower",
+                  args: [loanId, borrowerInput as Address],
+                  errors: MICROLOAN_LENDER_ERRORS,
+                })
+              )
+            }
+          >
+            Set borrower
+          </LocalButton>
+        </Action>
+      )}
+
+      {canExtend && (
+        <Action note="Give the borrower until a later date to repay and still receive the grant.">
+          <Input
+            value={extendInput}
+            onChange={(e) => setExtendInput(e.target.value)}
+            type="date"
+            min={earliestDeadlineDate()}
+            className="w-full"
+          />
+          <LocalButton
+            variant="secondary"
+            className="w-full font-bold"
+            disabled={!extendValid}
+            onClick={() =>
+              confirm("extendLoan", () =>
+                runMicroloanAction({
+                  action: "extendLoan",
+                  functionName: "extendRepayBy",
+                  args: [loanId, newRepayBy!],
+                  errors: MICROLOAN_LENDER_ERRORS,
+                })
+              )
+            }
+          >
+            Extend deadline
+          </LocalButton>
+        </Action>
+      )}
+
+      {canReclaim && (
+        <Action note="The loan is late. Taking the grant back is permanent; the borrower still owes the rest of the loan.">
+          <LocalButton
+            variant="destructive"
+            className="w-full font-bold"
+            onClick={() =>
+              confirm(
+                "reclaimGrant",
+                () =>
+                  runMicroloanAction({
+                    action: "reclaimGrant",
+                    functionName: "reclaimGrant",
+                    args: [loanId],
+                    errors: MICROLOAN_LENDER_ERRORS,
+                  }),
+                terms.grant
+              )
+            }
+          >
+            Reclaim grant
+          </LocalButton>
+        </Action>
+      )}
+
+      {canCancel && (
+        <Action note="Cancelling returns the loan amount, the grant and any yield to you. It can't be undone.">
+          <LocalButton
+            variant="destructive"
+            className="w-full font-bold"
+            onClick={() =>
+              confirm(
+                "cancelLoan",
+                () =>
+                  runMicroloanAction({
+                    action: "cancelLoan",
+                    functionName: "cancel",
+                    args: [loanId],
+                    errors: MICROLOAN_LENDER_ERRORS,
+                  }),
+                terms.principal + terms.grant
+              )
+            }
+          >
+            Cancel offer
+          </LocalButton>
+        </Action>
+      )}
+    </section>
+  );
+};
+
+function Action({ note, children }: { note: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2 border-b border-paper-2 pb-4 last:border-b-0 last:pb-0">
+      <Body className="text-surface-grey">{note}</Body>
+      {children}
+    </div>
+  );
+}
+
+const formatToken = (amount: bigint) =>
+  `${formatBalance(+formatDepositAmount(amount), 2)} ${DEPOSIT_TOKEN.symbol}`;
+
+export default LenderActions;
diff --git a/src/app/microloans/[id]/_components/loan-overview.tsx b/src/app/microloans/[id]/_components/loan-overview.tsx
new file mode 100644
index 00000000..ebbe2ff4
--- /dev/null
+++ b/src/app/microloans/[id]/_components/loan-overview.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import Countdown from "@/components/countdown";
+import { LoanStatus, LoanTerms } from "@/hooks/use-microloan";
+import { DEPOSIT_TOKEN, formatDepositAmount } from "@/lib/deposit-token";
+import { LoanState, loanRepaidPercent } from "@/lib/microloan-state";
+import { formatAddress } from "@/utils/address";
+import { formatShortDate } from "@/utils/time";
+import { Body, formatBalance, Heading3, Logo } from "@breadcoop/ui";
+import Link from "next/link";
+import { ReactNode } from "react";
+import { zeroAddress, zeroHash } from "viem";
+
+const LoanOverview = ({
+  loanId,
+  terms,
+  status,
+  state,
+  outstanding,
+}: {
+  loanId: bigint;
+  terms: LoanTerms;
+  status: LoanStatus;
+  state: LoanState;
+  outstanding: bigint;
+}) => {
+  const accepted = status.acceptedAt > BigInt(0);
+  const percentage = loanRepaidPercent(status.repaid, status.disbursed);
+  const repaying = state === LoanState.Active || state === LoanState.Overdue;
+
+  return (
+    <section className="bg-paper-0 p-5 *:mb-4 last:mb-0">
+      <header className="flex items-center justify-between flex-wrap gap-2">
+        <Heading3 className="text-2xl shrink-0">Loan overview</Heading3>
+        <Body bold className="text-xs shrink-0">
+          <span className="font-normal">ID: </span>
+          <span>{loanId.toString()}</span>
+        </Body>
+      </header>
+      {accepted && (
+        <div className="border-b border-paper-2 pb-4">
+          <div className="flex items-center justify-between mb-2">
+            <Body bold>Repaid</Body>
+            <Body bold>{percentage}%</Body>
+          </div>
+          <div className="w-full h-3.5 p-0.75 bg-paper-main">
+            <div
+              className="h-full bg-primary-blue"
+              style={{ width: `${percentage}%` }}
+            />
+          </div>
+        </div>
+      )}
+      <div className="grid grid-cols-2 gap-4 border-b border-paper-2 pb-4">
+        <Amount label="Loan amount" amount={terms.principal} />
+        <Amount label="Grant on repayment" amount={terms.grant} />
+        {accepted && <Amount label="Repaid" amount={status.repaid} />}
+        {accepted && <Amount label="Still owed" amount={outstanding} />}
+      </div>
+      <div>
+        {accepted ? (
+          <>
+            <BreakdownRow label="Repay by">
+              <p className="text-h2 text-2xl leading-6 tracking-[-2%]">
+                {formatShortDate(Number(status.repayBy) * 1000)}
+              </p>
+            </BreakdownRow>
+            {repaying && (
+              <BreakdownRow label="Time left">
+                <Countdown targetSeconds={Number(status.repayBy)} />
+              </BreakdownRow>
+            )}
+          </>
+        ) : (
+          <>
+            <BreakdownRow label="Offer open until">
+              <p className="text-h2 text-2xl leading-6 tracking-[-2%]">
+                {formatShortDate(Number(terms.acceptBy) * 1000)}
+              </p>
+            </BreakdownRow>
+            <BreakdownRow label="Time to repay">
+              <p>
+                {Number(terms.repaymentPeriod / BigInt(86400))} days after
+                accepting
+              </p>
+            </BreakdownRow>
+          </>
+        )}
+        <BreakdownRow label="Lender">
+          <AddressLink address={status.lender} />
+        </BreakdownRow>
+        <BreakdownRow label="Borrower">
+          {status.borrower === zeroAddress ? (
+            <p>Not set yet</p>
+          ) : (
+            <AddressLink address={status.borrower} />
+          )}
+        </BreakdownRow>
+        <BreakdownRow label="Agreement">
+          <p>
+            {terms.termsHash === zeroHash
+              ? "None"
+              : "Attached (shared with the borrower)"}
+          </p>
+        </BreakdownRow>
+      </div>
+    </section>
+  );
+};
+
+function Amount({ label, amount }: { label: string; amount: bigint }) {
+  return (
+    <Body className="flex flex-col justify-start">
+      <span className="text-surface-grey">{label}</span>
+      <span className="inline-flex items-center justify-start">
+        <Logo size={24} variant="square" className="mr-1" />
+        <span className="font-bold mt-[0.2rem]">
+          {formatBalance(+formatDepositAmount(amount), 2)}{" "}
+          {DEPOSIT_TOKEN.symbol}
+        </span>
+      </span>
+    </Body>
+  );
+}
+
+function AddressLink({ address }: { address: `0x${string}` }) {
+  return (
+    <Link href={`/account/${address}`} className="hover:text-primary-blue">
+      {formatAddress(address)}
+    </Link>
+  );
+}
+
+function BreakdownRow({
+  label,
+  children,
+}: {
+  children: ReactNode;
+  label: string;
+}) {
+  return (
+    <div className="bg-paper-1 py-2 px-4 flex flex-col gap-2.5 mb-2 last:mb-0 md:flex-row md:justify-between">
+      <Body className="text-surface-grey-2 capitalize">{label}</Body>
+      <div className="flex items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export default LoanOverview;
diff --git a/src/app/microloans/[id]/_components/page-content.tsx b/src/app/microloans/[id]/_components/page-content.tsx
new file mode 100644
index 00000000..a907664f
--- /dev/null
+++ b/src/app/microloans/[id]/_components/page-content.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { FeatureGate } from "@/components/feature-gate";
+import { CircularProgressIcon } from "@/components/icons/circular-progress";
+import { useMicroloan } from "@/hooks/use-microloan";
+import { Body, useConnectedUser } from "@breadcoop/ui";
+import BorrowerActions from "./borrower-actions";
+import GrantPanel from "./grant-panel";
+import LoanHeader from "./header";
+import LenderActions from "./lender-actions";
+import LoanOverview from "./loan-overview";
+
+const PageContent = ({ id }: { id: string }) => {
+  return (
+    <FeatureGate feature="microloans">
+      {/^\d+$/.test(id) ? (
+        <LoanPageContent id={id} />
+      ) : (
+        <Body className="text-system-red">This loan does not exist.</Body>
+      )}
+    </FeatureGate>
+  );
+};
+
+export type LoanRole = "lender" | "borrower" | undefined;
+
+const LoanPageContent = ({ id }: { id: string }) => {
+  const loanId = BigInt(id);
+  const { user } = useConnectedUser();
+  const address = user.status === "CONNECTED" ? user.address : undefined;
+  const loan = useMicroloan(loanId);
+  const { terms, status, state, outstanding } = loan;
+
+  const role: LoanRole =
+    address && status
+      ? status.lender.toLowerCase() === address.toLowerCase()
+        ? "lender"
+        : status.borrower.toLowerCase() === address.toLowerCase()
+          ? "borrower"
+          : undefined
+      : undefined;
+
+  return (
+    <>
+      <LoanHeader id={id} role={role} state={state} />
+      {terms && status && state !== undefined && outstanding !== undefined ? (
+        <div className="*:mb-4 last:mb-0 md:mb-6 md:last:mb-0">
+          <LoanOverview
+            loanId={loanId}
+            terms={terms}
+            status={status}
+            state={state}
+            outstanding={outstanding}
+          />
+          <GrantPanel loanId={loanId} terms={terms} state={state} />
+          {role === "borrower" && (
+            <BorrowerActions
+              loanId={loanId}
+              terms={terms}
+              state={state}
+              outstanding={outstanding}
+            />
+          )}
+          {role === "lender" && (
+            <LenderActions
+              loanId={loanId}
+              terms={terms}
+              status={status}
+              state={state}
+            />
+          )}
+        </div>
+      ) : loan.error ? (
+        <Body className="text-system-red">Unable to get loan data!</Body>
+      ) : (
+        <div className="flex items-center justify-center">
+          <CircularProgressIcon />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PageContent;
diff --git a/src/app/microloans/[id]/page.tsx b/src/app/microloans/[id]/page.tsx
new file mode 100644
index 00000000..158d3834
--- /dev/null
+++ b/src/app/microloans/[id]/page.tsx
@@ -0,0 +1,26 @@
+import { generateMetadata as _generateMetadata } from "@/utils/metadata";
+import { Metadata } from "next";
+import PageContent from "./_components/page-content";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+
+  return _generateMetadata({
+    title: "View Microloan - Bread Cooperative",
+    description:
+      "A zero-interest loan with a grant that unlocks once it is repaid.",
+    url: `/microloans/${id}`,
+  });
+}
+
+const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params;
+
+  return <PageContent id={id} />;
+};
+
+export default Page;
diff --git a/src/app/microloans/_components/balance-hint.tsx b/src/app/microloans/_components/balance-hint.tsx
new file mode 100644
index 00000000..66e22e3e
--- /dev/null
+++ b/src/app/microloans/_components/balance-hint.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import LocalButton from "@/components/button";
+import { useIsMiniPay } from "@/components/providers/is-minipay";
+import { DEPOSIT_TOKEN, formatDepositAmount } from "@/lib/deposit-token";
+import { MINIPAY_ADD_CASH_URL } from "@/utils/minipay";
+import { Body, formatBalance } from "@breadcoop/ui";
+
+/**
+ * Shown under a token-pulling action when the wallet can't cover `amount`.
+ * In MiniPay it links to Add Cash, matching the deposit flow.
+ */
+const BalanceHint = ({
+  balance,
+  amount,
+}: {
+  balance: bigint | undefined;
+  amount: bigint;
+}) => {
+  const isMiniPay = useIsMiniPay();
+
+  if (balance === undefined || balance >= amount) return null;
+
+  const missing = formatBalance(+formatDepositAmount(amount - balance), 2);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Body className="text-xs text-system-red">
+        You need {missing} more {DEPOSIT_TOKEN.symbol} for this.
+      </Body>
+      {isMiniPay && (
+        <LocalButton
+          as="a"
+          href={MINIPAY_ADD_CASH_URL}
+          variant="secondary"
+          className="w-full font-bold"
+        >
+          Deposit {DEPOSIT_TOKEN.symbol}
+        </LocalButton>
+      )}
+    </div>
+  );
+};
+
+export default BalanceHint;
diff --git a/src/app/new/_components/onboarding/type-picker.tsx b/src/app/new/_components/onboarding/type-picker.tsx
index 1efc7aa3..d31c5fbe 100644
--- a/src/app/new/_components/onboarding/type-picker.tsx
+++ b/src/app/new/_components/onboarding/type-picker.tsx
@@ -6,9 +6,11 @@ import {
   ArrowClockwiseIcon,
   ArrowRightIcon,
   FlagBannerFoldIcon,
+  HandCoinsIcon,
 } from "@phosphor-icons/react/ssr";
 import type { Icon } from "@phosphor-icons/react";
 import { Body, cn, Heading2, Heading3 } from "@breadcoop/ui";
+import { FeatureGate } from "@/components/feature-gate";
 import { STACK_TYPE_DESCRIPTIONS, STACK_TYPE_LABELS } from "@/lib/stack-types";
 
 /** A stack type the picker can start creating. */
@@ -73,6 +75,14 @@ const TypePicker = () => {
           description={STACK_TYPE_DESCRIPTIONS.goal}
           href="/new/goal"
         />
+        <FeatureGate feature="microloans">
+          <Card
+            StackIcon={HandCoinsIcon}
+            label={STACK_TYPE_LABELS.microloan}
+            description={STACK_TYPE_DESCRIPTIONS.microloan}
+            href="/new/microloan"
+          />
+        </FeatureGate>
       </div>
     </section>
   );
diff --git a/src/app/new/microloan/_components/form-container.tsx b/src/app/new/microloan/_components/form-container.tsx
new file mode 100644
index 00000000..13a4432c
--- /dev/null
+++ b/src/app/new/microloan/_components/form-container.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import MicroloanForm from "./form";
+import MicroloanOverviewForm from "./overview";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import microloanSchema, { MicroloanFormSchemaData } from "./schema";
+import { Heading2 } from "@breadcoop/ui";
+
+const MicroloanFormContainer = () => {
+  const form = useForm<MicroloanFormSchemaData>({
+    resolver: zodResolver(microloanSchema),
+    defaultValues: {
+      borrower: "",
+      grant: 0,
+      acceptBy: "",
+      agreement: "",
+    },
+  });
+  const [showOverview, setShowOverview] = useState(false);
+
+  return (
+    <FormProvider {...form}>
+      <form>
+        <header className="mb-6.25 md:mb-6">
+          <Heading2 className="text-primary-blue text-[2.5rem] leading-9 md:text-5xl">
+            New Microloan
+          </Heading2>
+        </header>
+        <div className="lg:flex lg:gap-6">
+          {/* Form: Hidden on mobile when overview is shown */}
+          <div className={`flex-1 ${showOverview ? "hidden lg:block" : ""}`}>
+            <MicroloanForm onContinue={() => setShowOverview(true)} />
+          </div>
+
+          {/* Overview: Hidden on mobile until Continue is clicked */}
+          <div className={`flex-1 ${showOverview ? "" : "hidden lg:block"}`}>
+            <MicroloanOverviewForm onBack={() => setShowOverview(false)} />
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default MicroloanFormContainer;
diff --git a/src/app/new/microloan/_components/form.tsx b/src/app/new/microloan/_components/form.tsx
new file mode 100644
index 00000000..abe78c35
--- /dev/null
+++ b/src/app/new/microloan/_components/form.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import Input, { InputDescription } from "@/components/input";
+import { Label } from "@/components/label";
+import LocalButton from "@/components/button";
+import NumericInput from "@/components/numeric-input";
+import { DEPOSIT_TOKEN } from "@/lib/deposit-token";
+import { earliestDeadlineDate } from "@/utils/time";
+import { Body, Heading3, Logo } from "@breadcoop/ui";
+import { MouseEventHandler, ReactNode } from "react";
+import { useFormContext } from "react-hook-form";
+import { MicroloanFormSchemaData } from "./schema";
+
+const MicroloanForm = ({ onContinue }: { onContinue: () => void }) => {
+  const form = useFormContext<MicroloanFormSchemaData>();
+  const { errors } = form.formState;
+
+  const validate: MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.preventDefault();
+
+    if (await form.trigger()) onContinue();
+  };
+
+  return (
+    <div>
+      <section className="bg-paper-0 p-6 flex flex-col gap-4 shadow-[0px_4px_12px_0px_#1B201A26]">
+        <header>
+          <Heading3 className="mb-4 pb-4 border-b border-blue-0 text-2xl">
+            Offer a microloan
+          </Heading3>
+          <Body className="text-surface-grey">
+            Lend to one borrower with no interest. The grant is held in escrow
+            and sent to the borrower once they repay the loan in full.
+          </Body>
+        </header>
+        <div className="flex flex-col gap-4 mb-4">
+          <Field>
+            <Label htmlFor="principal">Loan amount</Label>
+            <InputDescription desc="Sent to the borrower when they accept" />
+            <TokenInput>
+              <NumericInput
+                {...form.register("principal", { valueAsNumber: true })}
+                id="principal"
+                className="w-full pr-12"
+                allowDecimal
+              />
+            </TokenInput>
+            <ErrorMessage msg={errors.principal?.message} />
+          </Field>
+          <Field>
+            <Label htmlFor="grant">Grant on repayment</Label>
+            <InputDescription desc="Released to the borrower once the loan is fully repaid. Use 0 for a plain loan." />
+            <TokenInput>
+              <NumericInput
+                {...form.register("grant", { valueAsNumber: true })}
+                id="grant"
+                className="w-full pr-12"
+                allowDecimal
+              />
+            </TokenInput>
+            <ErrorMessage msg={errors.grant?.message} />
+          </Field>
+          <Field>
+            <Label htmlFor="borrower">Borrower address</Label>
+            <InputDescription desc="Only this wallet can accept. You can leave it empty and add it later." />
+            <Input
+              {...form.register("borrower")}
+              id="borrower"
+              className="w-full"
+              placeholder="0x… (optional)"
+            />
+            <ErrorMessage msg={errors.borrower?.message} />
+          </Field>
+          <Field>
+            <Label htmlFor="acceptBy">Offer open until</Label>
+            <InputDescription desc="The borrower must accept before 12am (midnight) on this date. After that you can cancel for a full refund." />
+            <Input
+              {...form.register("acceptBy")}
+              id="acceptBy"
+              type="date"
+              min={earliestDeadlineDate()}
+              className="w-full"
+            />
+            <ErrorMessage msg={errors.acceptBy?.message} />
+          </Field>
+          <Field>
+            <Label htmlFor="repaymentDays">Time to repay</Label>
+            <InputDescription desc="Days the borrower has after accepting to repay and earn the grant" />
+            <div className="relative">
+              <NumericInput
+                {...form.register("repaymentDays", { valueAsNumber: true })}
+                id="repaymentDays"
+                className="w-full pr-16"
+              />
+              <Body
+                bold
+                className="absolute top-1/2 -translate-y-1/2 right-3 text-surface-grey"
+              >
+                Days
+              </Body>
+            </div>
+            <ErrorMessage msg={errors.repaymentDays?.message} />
+          </Field>
+          <Field>
+            <Label htmlFor="agreement">Agreement (optional)</Label>
+            <InputDescription desc="The conditions in plain language. Share this exact text with the borrower: they paste it to accept, which records on-chain that they agreed to it." />
+            <textarea
+              {...form.register("agreement")}
+              id="agreement"
+              rows={4}
+              className="w-full border border-paper-2 bg-paper-1 py-3 px-4 placeholder:text-surface-grey text-surface-grey-2 placeholder:font-light"
+              placeholder="e.g. 1,000 USDT for computers, repaid in monthly installments"
+            />
+          </Field>
+        </div>
+        <LocalButton
+          variant="secondary"
+          className="font-bold lg:hidden"
+          type="button"
+          onClick={validate}
+        >
+          Continue
+        </LocalButton>
+      </section>
+    </div>
+  );
+};
+
+function TokenInput({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative">
+      {children}
+      <div className="absolute top-1/2 -translate-y-1/2 right-3 p-1 bg-paper-main">
+        <Logo text={DEPOSIT_TOKEN.symbol} className="size-6" variant="square" />
+      </div>
+    </div>
+  );
+}
+
+function Field({ children }: { children: ReactNode }) {
+  return <div className="flex flex-col gap-2">{children}</div>;
+}
+
+function ErrorMessage({ msg }: { msg?: string }) {
+  if (!msg) return null;
+
+  return <p className="text-red-500 text-sm">{msg}</p>;
+}
+
+export default MicroloanForm;
diff --git a/src/app/new/microloan/_components/overview.tsx b/src/app/new/microloan/_components/overview.tsx
new file mode 100644
index 00000000..0e6b7545
--- /dev/null
+++ b/src/app/new/microloan/_components/overview.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import BalanceHint from "@/app/microloans/_components/balance-hint";
+import LocalButton from "@/components/button";
+import { useBlockTimestamp } from "@/hooks/use-block-timestamp";
+import { useMicroloanAction } from "@/hooks/use-microloan-action";
+import { microloansAbi } from "@/lib/abis/microloans";
+import { MICROLOAN_CREATE_ERRORS } from "@/lib/contract-errors";
+import { DEPOSIT_TOKEN, parseDepositAmount } from "@/lib/deposit-token";
+import { agreementHash } from "@/lib/microloan-terms";
+import { stackTypeDetailPath } from "@/lib/stack-types";
+import { formatAddress } from "@/utils/address";
+import { dateInputToMs, formatShortDate } from "@/utils/time";
+import {
+  Body,
+  formatBalance,
+  Heading3,
+  LoginButton,
+  useConnectedUser,
+} from "@breadcoop/ui";
+import {
+  ArrowLeftIcon,
+  CalendarIcon,
+  FileTextIcon,
+  GiftIcon,
+  HourglassIcon,
+  Icon,
+  SparkleIcon,
+  UserIcon,
+} from "@phosphor-icons/react";
+import { useModal } from "@/components/modal/context";
+import { useRouter } from "next/navigation";
+import { useFormContext } from "react-hook-form";
+import { Address, parseEventLogs, zeroAddress } from "viem";
+import { MicroloanFormSchemaData } from "./schema";
+
+const SECONDS_PER_DAY = BigInt(24 * 60 * 60);
+
+/** A form number as token base units; invalid or empty input is zero. */
+const toAmount = (value: number) =>
+  Number.isFinite(value) && value > 0
+    ? parseDepositAmount(String(value))
+    : BigInt(0);
+
+const MicroloanOverviewForm = ({ onBack }: { onBack: () => void }) => {
+  const router = useRouter();
+  const modal = useModal();
+  const blockTimestamp = useBlockTimestamp();
+  const form = useFormContext<MicroloanFormSchemaData>();
+  const { user } = useConnectedUser();
+  const { runMicroloanAction, balance } = useMicroloanAction(
+    DEPOSIT_TOKEN.address
+  );
+
+  const principal = form.watch("principal");
+  const grant = form.watch("grant");
+  const borrower = form.watch("borrower");
+  const acceptBy = form.watch("acceptBy");
+  const repaymentDays = form.watch("repaymentDays");
+  const agreement = form.watch("agreement");
+
+  const total = toAmount(principal) + toAmount(grant);
+  const acceptByMs = acceptBy ? dateInputToMs(acceptBy) : NaN;
+
+  const createLoan = (data: MicroloanFormSchemaData) => {
+    // A date input yields YYYY-MM-DD; the offer closes at midnight at the
+    // start of that date, in the user's own timezone.
+    const acceptBySeconds = BigInt(
+      Math.floor(dateInputToMs(data.acceptBy) / 1000)
+    );
+
+    // Pre-check against block time (never Date.now — local Anvil warps time)
+    if (acceptBySeconds <= BigInt(Math.floor(blockTimestamp / 1000))) {
+      form.setError("acceptBy", { message: "The date must be in the future" });
+      return;
+    }
+
+    const loanPrincipal = toAmount(data.principal);
+    const loanGrant = toAmount(data.grant);
+    const terms = {
+      token: DEPOSIT_TOKEN.address,
+      vault: zeroAddress,
+      principal: loanPrincipal,
+      grant: loanGrant,
+      acceptBy: acceptBySeconds,
+      repaymentPeriod: BigInt(data.repaymentDays) * SECONDS_PER_DAY,
+      termsHash: agreementHash(data.agreement),
+    };
+    const borrowerAddress = data.borrower
+      ? (data.borrower as Address)
+      : zeroAddress;
+
+    modal.setModal({
+      type: "STACK_TX_INIT",
+      stackType: "microloan",
+      action: "createLoan",
+      id: BigInt(0),
+      amount: loanPrincipal + loanGrant,
+      onConfirm: () =>
+        runMicroloanAction({
+          action: "createLoan",
+          functionName: "create",
+          args: [terms, borrowerAddress],
+          errors: MICROLOAN_CREATE_ERRORS,
+          approveAmount: loanPrincipal + loanGrant,
+          amount: loanPrincipal + loanGrant,
+          onSuccess: (receipt) => {
+            const [log] = parseEventLogs({
+              abi: microloansAbi,
+              logs: receipt.logs,
+              eventName: "LoanCreated",
+            });
+            if (log) {
+              form.reset();
+              router.push(stackTypeDetailPath("microloan", log.args.id));
+            }
+          },
+        }),
+    });
+  };
+
+  return (
+    <section className="bg-paper-0 p-6 flex flex-col gap-4 shadow-[0px_4px_12px_0px_#1B201A26] lg:bg-paper-main lg:border lg:border-blue-0">
+      <header>
+        <Heading3 className="mb-4 pb-4 border-b border-blue-0 text-2xl">
+          Overview
+        </Heading3>
+        <Body className="text-surface-grey">Please review your loan.</Body>
+      </header>
+      <div className="flex flex-col gap-4 pb-4 border-b border-blue-0">
+        <ReviewedRow
+          RIcon={UserIcon}
+          title="Borrower"
+          body={borrower ? formatAddress(borrower as Address) : "Add it later"}
+        />
+        <ReviewedRow
+          RIcon={GiftIcon}
+          title="Grant"
+          body={
+            Number.isFinite(grant)
+              ? `${formatBalance(grant, 2)} ${DEPOSIT_TOKEN.symbol}`
+              : "-"
+          }
+        />
+        <ReviewedRow
+          RIcon={CalendarIcon}
+          title="Offer open until"
+          body={Number.isNaN(acceptByMs) ? "-" : formatShortDate(acceptByMs)}
+        />
+        <ReviewedRow
+          RIcon={HourglassIcon}
+          title="Time to repay"
+          body={
+            Number.isFinite(repaymentDays) && repaymentDays > 0
+              ? `${repaymentDays} days`
+              : "-"
+          }
+        />
+        <ReviewedRow
+          RIcon={FileTextIcon}
+          title="Agreement"
+          body={agreement?.trim() ? "Attached" : "None"}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <Body>Loan amount</Body>
+        <div className="p-1 shrink-0 border border-system-green">
+          <Body bold>
+            {Number.isFinite(principal)
+              ? `${formatBalance(principal, 2)} ${DEPOSIT_TOKEN.symbol}`
+              : "-"}
+          </Body>
+        </div>
+      </div>
+      <div className="px-6 py-3 bg-paper-1">
+        <Body className="text-xs text-surface-grey-2">
+          The loan amount and the grant move into escrow now. You can cancel for
+          a full refund until the borrower accepts.
+        </Body>
+        <Body className="text-xs text-surface-grey-2">
+          The loan has no interest. If the borrower is late, you can give more
+          time or take the grant back.
+        </Body>
+      </div>
+      <div className="flex flex-col gap-4">
+        {user.status === "CONNECTED" ? (
+          <>
+            <LocalButton
+              leftIcon={<SparkleIcon size={24} />}
+              onClick={form.handleSubmit(createLoan)}
+              type="submit"
+              disabled={balance !== undefined && balance < total}
+            >
+              Offer Loan
+            </LocalButton>
+            <BalanceHint balance={balance} amount={total} />
+          </>
+        ) : (
+          <LoginButton app="stacks" status={user.status} />
+        )}
+        <LocalButton
+          className="lg:hidden"
+          variant="secondary"
+          leftIcon={<ArrowLeftIcon size={24} />}
+          onClick={onBack}
+          type="button"
+        >
+          Back
+        </LocalButton>
+      </div>
+    </section>
+  );
+};
+
+function ReviewedRow({
+  RIcon,
+  title,
+  body,
+}: {
+  RIcon: Icon;
+  title: string;
+  body: string;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center justify-start gap-2">
+        <RIcon size={24} className="fill-primary-blue" />
+        <Body className="text-surface-grey-2">{title}</Body>
+      </div>
+      <Body bold className="text-surface-ink">
+        {body}
+      </Body>
+    </div>
+  );
+}
+
+export default MicroloanOverviewForm;
diff --git a/src/app/new/microloan/_components/schema.ts b/src/app/new/microloan/_components/schema.ts
new file mode 100644
index 00000000..600f10dc
--- /dev/null
+++ b/src/app/new/microloan/_components/schema.ts
@@ -0,0 +1,41 @@
+import { isAddress } from "viem";
+import * as z from "zod";
+import { dateInputToMs } from "@/utils/time";
+
+const microloanSchema = z
+  .object({
+    borrower: z.string().optional(),
+    principal: z
+      .number({ error: "Enter the loan amount" })
+      .positive("The loan amount must be greater than 0"),
+    grant: z
+      .number({ error: "Enter a grant amount, or 0" })
+      .min(0, "The grant can't be negative"),
+    acceptBy: z.string().min(1, "Please select a date"),
+    repaymentDays: z
+      .number({ error: "Enter the number of days to repay" })
+      .int("Use a whole number of days")
+      .positive("Allow at least 1 day to repay"),
+    agreement: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (Number.isNaN(dateInputToMs(data.acceptBy))) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["acceptBy"],
+        message: "Please select a valid date",
+      });
+    }
+
+    if (data.borrower && !isAddress(data.borrower)) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["borrower"],
+        message: "Provide a valid borrower address, or leave it empty",
+      });
+    }
+  });
+
+export type MicroloanFormSchemaData = z.infer<typeof microloanSchema>;
+
+export default microloanSchema;
diff --git a/src/app/new/microloan/page.tsx b/src/app/new/microloan/page.tsx
new file mode 100644
index 00000000..9d27508a
--- /dev/null
+++ b/src/app/new/microloan/page.tsx
@@ -0,0 +1,20 @@
+import { generateMetadata } from "@/utils/metadata";
+import { FeatureGate } from "@/components/feature-gate";
+import BackPage from "@/components/back-page";
+import MicroloanFormContainer from "./_components/form-container";
+
+export const metadata = generateMetadata({
+  title: "New Microloan - Bread Cooperative",
+  description:
+    "Lend with no interest and reward repayment with an escrowed grant.",
+  url: "/new/microloan",
+});
+
+export default function Page() {
+  return (
+    <FeatureGate feature="microloans">
+      <BackPage href="/new" label="Back to stack types" />
+      <MicroloanFormContainer />
+    </FeatureGate>
+  );
+}
diff --git a/src/components/modal/context.tsx b/src/components/modal/context.tsx
index da1926b4..183cd8e4 100644
--- a/src/components/modal/context.tsx
+++ b/src/components/modal/context.tsx
@@ -180,7 +180,20 @@ export type GoalCreationFailedModalState = {
 // One confirm/loading/result trio parameterized by stack type + action,
 // mirroring the DEPOSIT_INIT / DEPOSIT_LOADING / DEPOSIT_RESULT pattern.
 
-export type StackTxAction = "deposit" | "withdraw" | "release" | "cancel";
+export type StackTxAction =
+  | "deposit"
+  | "withdraw"
+  | "release"
+  | "cancel"
+  | "createLoan"
+  | "setBorrower"
+  | "cancelLoan"
+  | "acceptLoan"
+  | "repay"
+  | "releaseGrant"
+  | "extendLoan"
+  | "reclaimGrant"
+  | "collect";
 
 export type StackTxInitModalState = {
   type: "STACK_TX_INIT";
diff --git a/src/components/modal/modals/stack-tx.tsx b/src/components/modal/modals/stack-tx.tsx
index aa843bbd..efd9bf62 100644
--- a/src/components/modal/modals/stack-tx.tsx
+++ b/src/components/modal/modals/stack-tx.tsx
@@ -63,8 +63,90 @@ const ACTION_COPY: Record<
     successTitle: "Goal cancelled",
     successMsg: "The goal was cancelled",
   },
+  createLoan: {
+    title: "Offer this loan",
+    description:
+      "You are about to move the loan amount and the grant into escrow. You can cancel for a full refund until the borrower accepts.",
+    confirmLabel: "Offer loan",
+    loadingTitle: "Offering loan",
+    successTitle: "Loan offered",
+    successMsg: "Moved into escrow",
+  },
+  setBorrower: {
+    title: "Set the borrower",
+    description:
+      "Only this address will be able to accept the loan. This can't be changed later.",
+    confirmLabel: "Set borrower",
+    loadingTitle: "Setting borrower",
+    successTitle: "Borrower set",
+    successMsg: "The borrower can now accept the loan",
+  },
+  cancelLoan: {
+    title: "Cancel loan offer?",
+    description:
+      "Cancelling is permanent. The loan amount, the grant and any yield come back to you.",
+    confirmLabel: "Cancel offer",
+    loadingTitle: "Cancelling",
+    successTitle: "Offer cancelled",
+    successMsg: "Escrow returned to you",
+  },
+  acceptLoan: {
+    title: "Accept this loan",
+    description:
+      "You are about to receive this loan. The repayment deadline starts now.",
+    confirmLabel: "Accept loan",
+    loadingTitle: "Accepting",
+    successTitle: "Loan accepted",
+    successMsg: "Received",
+  },
+  repay: {
+    title: "Repay loan",
+    description: "You are about to pay back part of this loan.",
+    confirmLabel: "Repay",
+    loadingTitle: "Repaying",
+    successTitle: "Repayment sent",
+    successMsg: "Successfully repaid",
+  },
+  releaseGrant: {
+    title: "Release the grant",
+    description:
+      "The loan is fully repaid. The grant will be sent to the borrower.",
+    confirmLabel: "Release grant",
+    loadingTitle: "Releasing grant",
+    successTitle: "Grant released",
+    successMsg: "Sent to the borrower",
+  },
+  extendLoan: {
+    title: "Give more time",
+    description:
+      "The borrower will have until the new deadline to repay and still receive the grant.",
+    confirmLabel: "Extend deadline",
+    loadingTitle: "Extending",
+    successTitle: "Deadline extended",
+    successMsg: "The new deadline is set",
+  },
+  reclaimGrant: {
+    title: "Reclaim the grant?",
+    description:
+      "Reclaiming is permanent. The borrower will no longer receive the grant, but still owes the rest of the loan.",
+    confirmLabel: "Reclaim grant",
+    loadingTitle: "Reclaiming",
+    successTitle: "Grant reclaimed",
+    successMsg: "Returned to you",
+  },
+  collect: {
+    title: "Collect repayments",
+    description: "You are about to collect the repayments made so far.",
+    confirmLabel: "Collect",
+    loadingTitle: "Collecting",
+    successTitle: "Repayments collected",
+    successMsg: "Successfully collected",
+  },
 };
 
+/** Actions that permanently give something up, styled like goal cancel. */
+const DESTRUCTIVE_ACTIONS: StackTxAction[] = ["cancelLoan", "reclaimGrant"];
+
 export const StackTxInitModal = ({
   modalState,
 }: {
@@ -73,7 +155,8 @@ export const StackTxInitModal = ({
   const modal = useModal();
   const copy = ACTION_COPY[modalState.action];
   const isCancellingGoal =
-    modalState.stackType === "goal" && modalState.action === "cancel";
+    (modalState.stackType === "goal" && modalState.action === "cancel") ||
+    DESTRUCTIVE_ACTIONS.includes(modalState.action);
 
   return (
     <ModalContainer>
diff --git a/src/components/stack-lists/microloan-list.tsx b/src/components/stack-lists/microloan-list.tsx
new file mode 100644
index 00000000..92be6a6f
--- /dev/null
+++ b/src/components/stack-lists/microloan-list.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { CalendarIcon } from "@/components/icons/calendar";
+import { CoinsIcon } from "@/components/icons/coin";
+import { useAddressMicroloans } from "@/hooks/use-microloan";
+import { DEPOSIT_TOKEN, formatDepositAmount } from "@/lib/deposit-token";
+import {
+  LOAN_STATE_CHIP_CLASSES,
+  LOAN_STATE_LABELS,
+  loanRepaidPercent,
+} from "@/lib/microloan-state";
+import { stackTypeDetailPath } from "@/lib/stack-types";
+import { formatShortDate } from "@/utils/time";
+import { formatBalance } from "@breadcoop/ui";
+import { Address } from "viem";
+import StackCard from "./stack-card";
+import StackListSection from "./stack-list-section";
+
+const formatToken = (amount: bigint) =>
+  `${formatBalance(+formatDepositAmount(amount), 2)} ${DEPOSIT_TOKEN.symbol}`;
+
+/** The loans an address lent or borrows, linking to each loan's page. */
+const MicroloanList = ({ address }: { address: Address | undefined }) => {
+  const { loans, isLoading } = useAddressMicroloans(address);
+
+  return (
+    <StackListSection
+      title="Microloans"
+      isLoading={isLoading}
+      isEmpty={loans.length === 0}
+      emptyMessage="No microloans yet."
+    >
+      {loans.map(({ id, terms, status, state }) => {
+        const isLender =
+          !!address && status.lender.toLowerCase() === address.toLowerCase();
+        const accepted = status.acceptedAt > BigInt(0);
+
+        return (
+          <StackCard
+            key={id.toString()}
+            href={stackTypeDetailPath("microloan", id)}
+            name={isLender ? `Loan ${id} (lent)` : `Loan ${id} (borrowed)`}
+            id={id.toString()}
+            progress={loanRepaidPercent(status.repaid, status.disbursed)}
+            progressLabel="Repaid"
+            chip={{
+              label: LOAN_STATE_LABELS[state],
+              className: LOAN_STATE_CHIP_CLASSES[state],
+            }}
+            stats={[
+              {
+                label: "Loan / grant",
+                icon: <CoinsIcon />,
+                value: `${formatToken(terms.principal)} / ${formatToken(terms.grant)}`,
+              },
+              {
+                label: accepted ? "Repay by" : "Offer open until",
+                icon: <CalendarIcon />,
+                value: formatShortDate(
+                  Number(accepted ? status.repayBy : terms.acceptBy) * 1000
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </StackListSection>
+  );
+};
+
+export default MicroloanList;
diff --git a/src/components/stack-lists/stack-card.tsx b/src/components/stack-lists/stack-card.tsx
index a34f4979..89159dd7 100644
--- a/src/components/stack-lists/stack-card.tsx
+++ b/src/components/stack-lists/stack-card.tsx
@@ -21,6 +21,7 @@ const StackCard = ({
   name,
   id,
   progress,
+  progressLabel = "Goal progress",
   chip,
   stats,
 }: {
@@ -28,6 +29,7 @@ const StackCard = ({
   name: string;
   id: string;
   progress: number;
+  progressLabel?: string;
   chip?: { label: string; className?: string };
   stats: StackCardStat[];
 }) => {
@@ -56,7 +58,7 @@ const StackCard = ({
       <div>
         <div className="flex items-center justify-between mb-2">
           <Body bold className="text-xs sm:text-base">
-            Goal progress
+            {progressLabel}
           </Body>
           <Body bold className="text-xs sm:text-base">
             {progress}%
@@ -64,7 +66,7 @@ const StackCard = ({
         </div>
         <div
           role="progressbar"
-          aria-label="Goal progress"
+          aria-label={progressLabel}
           aria-valuemin={0}
           aria-valuemax={100}
           aria-valuenow={progress}
diff --git a/src/hooks/use-microloan-action.ts b/src/hooks/use-microloan-action.ts
new file mode 100644
index 00000000..467caa55
--- /dev/null
+++ b/src/hooks/use-microloan-action.ts
@@ -0,0 +1,138 @@
+import { StackTxAction, useModal } from "@/components/modal/context";
+import { useMicroloansTx } from "@/hooks/use-microloans-tx";
+import { useSponsoredTx } from "@/hooks/use-sponsored-tx";
+import { useWaitForTxReceipt } from "@/hooks/use-wait-for-tx-receipt";
+import { microloansAbi } from "@/lib/abis/microloans";
+import { MICROLOANS_CONTRACT_ADDRESS } from "@/lib/constants";
+import { MICROLOANS_ERRORS } from "@/lib/contract-errors";
+import { getDefaultChainId } from "@/utils/chain";
+import { parseContractError } from "@/utils/parse-contract-error";
+import { MAX_UINT256 } from "@/utils/solidity";
+import { useConnectedUser } from "@breadcoop/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Address,
+  ContractFunctionArgs,
+  ContractFunctionName,
+  encodeFunctionData,
+  erc20Abi,
+  TransactionReceipt,
+} from "viem";
+import { useReadContract } from "wagmi";
+
+type MicroloansAbi = typeof microloansAbi;
+
+/**
+ * Runs a microloans write behind the generic STACK_TX_LOADING /
+ * STACK_TX_RESULT modals: optionally ensures the ERC-20 allowance first
+ * (for token-pulling actions like create and repay), sends the tx through
+ * the microloans tx hook, then refreshes contract reads and reports the
+ * outcome. Mirrors useGoalAction.
+ *
+ * Also exposes the connected wallet's token balance so callers can route a
+ * low balance in MiniPay to Add Cash before sending anything.
+ *
+ * @param tokenAddress The loan token — required only by actions that pass
+ *   `approveAmount`, and for `balance`.
+ */
+export function useMicroloanAction(tokenAddress?: Address) {
+  const modal = useModal();
+  const queryClient = useQueryClient();
+  const { sendMicroloansTx } = useMicroloansTx();
+  const { sendSponsoredTransaction } = useSponsoredTx();
+  const { waitForTxReceipt } = useWaitForTxReceipt();
+  const { user } = useConnectedUser();
+  const userAddress = user.status === "CONNECTED" ? user.address : undefined;
+
+  const { data: allowance = BigInt(0) } = useReadContract({
+    address: tokenAddress,
+    abi: erc20Abi,
+    functionName: "allowance",
+    args: [userAddress!, MICROLOANS_CONTRACT_ADDRESS],
+    query: { enabled: !!userAddress && !!tokenAddress },
+    chainId: getDefaultChainId(),
+  });
+
+  const { data: balance } = useReadContract({
+    address: tokenAddress,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: [userAddress!],
+    query: { enabled: !!userAddress && !!tokenAddress },
+    chainId: getDefaultChainId(),
+  });
+
+  const runMicroloanAction = async <
+    TFunctionName extends ContractFunctionName<MicroloansAbi, "nonpayable">,
+  >({
+    action,
+    functionName,
+    args,
+    errors,
+    approveAmount,
+    amount,
+    onSuccess,
+  }: {
+    action: StackTxAction;
+    functionName: TFunctionName;
+    args: ContractFunctionArgs<MicroloansAbi, "nonpayable", TFunctionName>;
+    /** Operation-specific error map (merged over the full microloans map). */
+    errors: Record<string, string>;
+    /** For token-pulling actions: ensure at least this allowance first. */
+    approveAmount?: bigint;
+    /** Shown in the success modal when set. */
+    amount?: bigint;
+    /** Runs after the tx is mined, before the success modal (e.g. redirect). */
+    onSuccess?: (receipt: TransactionReceipt) => void;
+  }) => {
+    modal.setModal({
+      type: "STACK_TX_LOADING",
+      stackType: "microloan",
+      action,
+    });
+
+    try {
+      if (
+        approveAmount !== undefined &&
+        tokenAddress &&
+        allowance < approveAmount
+      ) {
+        const approveData = encodeFunctionData({
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [MICROLOANS_CONTRACT_ADDRESS, MAX_UINT256],
+        });
+
+        const { hash } = await sendSponsoredTransaction({
+          to: tokenAddress,
+          data: approveData,
+        });
+
+        await waitForTxReceipt(hash);
+      }
+
+      const receipt = await sendMicroloansTx({ functionName, args });
+
+      queryClient.invalidateQueries({ queryKey: ["readContract"] });
+      queryClient.invalidateQueries({ queryKey: ["readContracts"] });
+      onSuccess?.(receipt);
+      modal.setModal({
+        type: "STACK_TX_RESULT",
+        stackType: "microloan",
+        action,
+        result: "success",
+        amount,
+      });
+    } catch (error) {
+      modal.setModal({
+        type: "STACK_TX_RESULT",
+        stackType: "microloan",
+        action,
+        result: "error",
+        msg: parseContractError(error, { ...MICROLOANS_ERRORS, ...errors }),
+      });
+    }
+  };
+
+  return { runMicroloanAction, balance };
+}
diff --git a/src/hooks/use-microloan.ts b/src/hooks/use-microloan.ts
new file mode 100644
index 00000000..0b6892c9
--- /dev/null
+++ b/src/hooks/use-microloan.ts
@@ -0,0 +1,111 @@
+import { microloansAbi } from "@/lib/abis/microloans";
+import { MICROLOANS_CONTRACT_ADDRESS } from "@/lib/constants";
+import { LoanState } from "@/lib/microloan-state";
+import { getDefaultChainId } from "@/utils/chain";
+import { Address } from "viem";
+import { useReadContract, useReadContracts } from "wagmi";
+
+const microloansContract = {
+  address: MICROLOANS_CONTRACT_ADDRESS,
+  abi: microloansAbi,
+  chainId: getDefaultChainId(),
+} as const;
+
+/**
+ * One loan's terms, status, derived state and outstanding principal, read in
+ * a single multicall.
+ */
+export function useMicroloan(loanId: bigint | undefined) {
+  const id = loanId ?? BigInt(0);
+  const result = useReadContracts({
+    contracts: [
+      { ...microloansContract, functionName: "getLoan", args: [id] },
+      { ...microloansContract, functionName: "loanState", args: [id] },
+      { ...microloansContract, functionName: "outstanding", args: [id] },
+    ],
+    allowFailure: false,
+    query: { enabled: loanId !== undefined },
+  });
+
+  const [loan, state, outstanding] = result.data ?? [];
+
+  return {
+    ...result,
+    terms: loan?.[0],
+    status: loan?.[1],
+    state: state !== undefined ? (state as LoanState) : undefined,
+    outstanding,
+  };
+}
+
+export type LoanTerms = NonNullable<ReturnType<typeof useMicroloan>["terms"]>;
+export type LoanStatus = NonNullable<ReturnType<typeof useMicroloan>["status"]>;
+
+export type MicroloanSummary = {
+  id: bigint;
+  terms: LoanTerms;
+  status: LoanStatus;
+  state: LoanState;
+};
+
+/**
+ * Every loan an address lent or borrows (getLenderLoans / getBorrowerLoans
+ * reverse indexes), each zipped with getLoan and loanState via one batched
+ * multicall (2 reads per loan).
+ */
+export function useAddressMicroloans(address: Address | undefined) {
+  const lenderIds = useReadContract({
+    ...microloansContract,
+    functionName: "getLenderLoans",
+    args: address ? [address] : undefined,
+    query: { enabled: !!address },
+  });
+  const borrowerIds = useReadContract({
+    ...microloansContract,
+    functionName: "getBorrowerLoans",
+    args: address ? [address] : undefined,
+    query: { enabled: !!address },
+  });
+
+  // A loan id appears in only one index per address (lender can't borrow)
+  const ids = [...(lenderIds.data ?? []), ...(borrowerIds.data ?? [])];
+
+  const { data: loanResults, isLoading: loansLoading } = useReadContracts({
+    contracts: ids.flatMap((id) => [
+      {
+        ...microloansContract,
+        functionName: "getLoan" as const,
+        args: [id] as const,
+      },
+      {
+        ...microloansContract,
+        functionName: "loanState" as const,
+        args: [id] as const,
+      },
+    ]),
+    query: { enabled: ids.length > 0 },
+  });
+
+  const loans: MicroloanSummary[] = ids.flatMap((id, index) => {
+    const loanResult = loanResults?.[index * 2];
+    const stateResult = loanResults?.[index * 2 + 1];
+    if (loanResult?.status !== "success" || stateResult?.status !== "success") {
+      return [];
+    }
+
+    const [terms, status] = loanResult.result as readonly [
+      LoanTerms,
+      LoanStatus,
+    ];
+
+    return [
+      { id, terms, status, state: Number(stateResult.result) as LoanState },
+    ];
+  });
+
+  return {
+    loans,
+    isLoading: lenderIds.isLoading || borrowerIds.isLoading || loansLoading,
+    error: lenderIds.error ?? borrowerIds.error,
+  };
+}
diff --git a/src/hooks/use-microloans-tx.ts b/src/hooks/use-microloans-tx.ts
new file mode 100644
index 00000000..ec2f878a
--- /dev/null
+++ b/src/hooks/use-microloans-tx.ts
@@ -0,0 +1,29 @@
+import { ContractFunctionName, ContractFunctionArgs } from "viem";
+import { microloansAbi } from "@/lib/abis/microloans";
+import { MICROLOANS_CONTRACT_ADDRESS } from "@/lib/constants";
+import { useSimulateAndSponsorTx } from "./use-simulate-and-sponsor-tx";
+import { useSponsoredTx } from "./use-sponsored-tx";
+
+type MicroloansAbi = typeof microloansAbi;
+
+export const useMicroloansTx = () => {
+  const { simulateAndSponsorTx } = useSimulateAndSponsorTx();
+
+  const sendMicroloansTx = async <
+    TFunctionName extends ContractFunctionName<MicroloansAbi, "nonpayable">,
+  >(params: {
+    functionName: TFunctionName;
+    args: ContractFunctionArgs<MicroloansAbi, "nonpayable", TFunctionName>;
+    options?: Parameters<
+      ReturnType<typeof useSponsoredTx>["sendSponsoredTransaction"]
+    >[1];
+  }) => {
+    return simulateAndSponsorTx({
+      address: MICROLOANS_CONTRACT_ADDRESS,
+      abi: microloansAbi,
+      ...params,
+    });
+  };
+
+  return { sendMicroloansTx };
+};
diff --git a/src/hooks/use-wait-for-tx-receipt.ts b/src/hooks/use-wait-for-tx-receipt.ts
index 5b60e463..72ae6a04 100644
--- a/src/hooks/use-wait-for-tx-receipt.ts
+++ b/src/hooks/use-wait-for-tx-receipt.ts
@@ -9,7 +9,7 @@ export const useWaitForTxReceipt = () => {
   const config = useConfig();
 
   const waitForTxReceipt = async (hash: Address) => {
-    await waitForTransactionReceipt(config, {
+    return await waitForTransactionReceipt(config, {
       hash,
       chainId: getDefaultChainId(),
     });
diff --git a/src/lib/abis/microloans.ts b/src/lib/abis/microloans.ts
new file mode 100644
index 00000000..47a27b94
--- /dev/null
+++ b/src/lib/abis/microloans.ts
@@ -0,0 +1,1001 @@
+export const microloansAbi = [
+  {
+    type: "constructor",
+    inputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "accept",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+      {
+        name: "_termsHash",
+        type: "bytes32",
+        internalType: "bytes32",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "cancel",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "collect",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "create",
+    inputs: [
+      {
+        name: "_loanTerms",
+        type: "tuple",
+        internalType: "struct IMicroloans.LoanTerms",
+        components: [
+          {
+            name: "token",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "vault",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "principal",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "grant",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "acceptBy",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "repaymentPeriod",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "termsHash",
+            type: "bytes32",
+            internalType: "bytes32",
+          },
+        ],
+      },
+      {
+        name: "_borrower",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "escrowValue",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [
+      {
+        name: "_amount",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "extendRepayBy",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+      {
+        name: "_newRepayBy",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "getBorrowerLoans",
+    inputs: [
+      {
+        name: "_borrower",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [
+      {
+        name: "_ids",
+        type: "uint256[]",
+        internalType: "uint256[]",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "getLenderLoans",
+    inputs: [
+      {
+        name: "_lender",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [
+      {
+        name: "_ids",
+        type: "uint256[]",
+        internalType: "uint256[]",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "getLoan",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [
+      {
+        name: "_loanTerms",
+        type: "tuple",
+        internalType: "struct IMicroloans.LoanTerms",
+        components: [
+          {
+            name: "token",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "vault",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "principal",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "grant",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "acceptBy",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "repaymentPeriod",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "termsHash",
+            type: "bytes32",
+            internalType: "bytes32",
+          },
+        ],
+      },
+      {
+        name: "_loanStatus",
+        type: "tuple",
+        internalType: "struct IMicroloans.LoanStatus",
+        components: [
+          {
+            name: "lender",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "borrower",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "acceptedAt",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "repayBy",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "disbursed",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "repaid",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "held",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "lenderOwed",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "cancelled",
+            type: "bool",
+            internalType: "bool",
+          },
+          {
+            name: "grantPaid",
+            type: "bool",
+            internalType: "bool",
+          },
+          {
+            name: "grantReclaimed",
+            type: "bool",
+            internalType: "bool",
+          },
+        ],
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "initialize",
+    inputs: [
+      {
+        name: "_owner",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "isTokenAllowed",
+    inputs: [
+      {
+        name: "_token",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [
+      {
+        name: "_allowed",
+        type: "bool",
+        internalType: "bool",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "isVaultAllowed",
+    inputs: [
+      {
+        name: "_vault",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [
+      {
+        name: "_allowed",
+        type: "bool",
+        internalType: "bool",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "loanState",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [
+      {
+        name: "_s",
+        type: "uint8",
+        internalType: "enum IMicroloans.LoanState",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "nextId",
+    inputs: [],
+    outputs: [
+      {
+        name: "",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "outstanding",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [
+      {
+        name: "_amount",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "owner",
+    inputs: [],
+    outputs: [
+      {
+        name: "",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    stateMutability: "view",
+  },
+  {
+    type: "function",
+    name: "reclaimGrant",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "releaseGrant",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "renounceOwnership",
+    inputs: [],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "repay",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+      {
+        name: "_amount",
+        type: "uint256",
+        internalType: "uint256",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "setBorrower",
+    inputs: [
+      {
+        name: "_id",
+        type: "uint256",
+        internalType: "uint256",
+      },
+      {
+        name: "_borrower",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "setTokenAllowed",
+    inputs: [
+      {
+        name: "_token",
+        type: "address",
+        internalType: "address",
+      },
+      {
+        name: "_allowed",
+        type: "bool",
+        internalType: "bool",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "setVaultAllowed",
+    inputs: [
+      {
+        name: "_vault",
+        type: "address",
+        internalType: "address",
+      },
+      {
+        name: "_allowed",
+        type: "bool",
+        internalType: "bool",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "function",
+    name: "transferOwnership",
+    inputs: [
+      {
+        name: "newOwner",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+    outputs: [],
+    stateMutability: "nonpayable",
+  },
+  {
+    type: "event",
+    name: "BorrowerSet",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "borrower",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "GrantReclaimed",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "amount",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "GrantReleased",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "borrower",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "amount",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "Initialized",
+    inputs: [
+      {
+        name: "version",
+        type: "uint64",
+        indexed: false,
+        internalType: "uint64",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "LenderCollected",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "lender",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "amount",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "LoanAccepted",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "borrower",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "disbursed",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+      {
+        name: "repayBy",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "LoanCancelled",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "refunded",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "LoanCreated",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "lender",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "borrower",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "terms",
+        type: "tuple",
+        indexed: false,
+        internalType: "struct IMicroloans.LoanTerms",
+        components: [
+          {
+            name: "token",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "vault",
+            type: "address",
+            internalType: "address",
+          },
+          {
+            name: "principal",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "grant",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "acceptBy",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "repaymentPeriod",
+            type: "uint256",
+            internalType: "uint256",
+          },
+          {
+            name: "termsHash",
+            type: "bytes32",
+            internalType: "bytes32",
+          },
+        ],
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "OwnershipTransferred",
+    inputs: [
+      {
+        name: "previousOwner",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "newOwner",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "Repaid",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "payer",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "amount",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+      {
+        name: "totalRepaid",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "RepayByExtended",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "repayBy",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "TokenAllowed",
+    inputs: [
+      {
+        name: "token",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "allowed",
+        type: "bool",
+        indexed: true,
+        internalType: "bool",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "VaultAllowed",
+    inputs: [
+      {
+        name: "vault",
+        type: "address",
+        indexed: true,
+        internalType: "address",
+      },
+      {
+        name: "allowed",
+        type: "bool",
+        indexed: true,
+        internalType: "bool",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "event",
+    name: "YieldCredited",
+    inputs: [
+      {
+        name: "id",
+        type: "uint256",
+        indexed: true,
+        internalType: "uint256",
+      },
+      {
+        name: "amount",
+        type: "uint256",
+        indexed: false,
+        internalType: "uint256",
+      },
+    ],
+    anonymous: false,
+  },
+  {
+    type: "error",
+    name: "BorrowerAlreadySet",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidAcceptBy",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidAmount",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidBorrower",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidInitialization",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidPrincipal",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidRepaymentPeriod",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidState",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "InvalidVault",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "LoanNotFound",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "NotBorrower",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "NotInitializing",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "NotLender",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "NothingToCollect",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "OwnableInvalidOwner",
+    inputs: [
+      {
+        name: "owner",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+  },
+  {
+    type: "error",
+    name: "OwnableUnauthorizedAccount",
+    inputs: [
+      {
+        name: "account",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+  },
+  {
+    type: "error",
+    name: "ReentrancyGuardReentrantCall",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "SafeERC20FailedOperation",
+    inputs: [
+      {
+        name: "token",
+        type: "address",
+        internalType: "address",
+      },
+    ],
+  },
+  {
+    type: "error",
+    name: "TermsMismatch",
+    inputs: [],
+  },
+  {
+    type: "error",
+    name: "TokenNotAllowed",
+    inputs: [],
+  },
+] as const;
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 1f3dcc25..6c45ccc3 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -12,3 +12,6 @@ export const AUTOMATIC_SAVING_CIRCLES_CONTRACT_ADDRESS =
 
 export const GOAL_SAVINGS_CONTRACT_ADDRESS =
   clientEnv.NEXT_PUBLIC_GOAL_SAVINGS_CONTRACT_ADDRESS as Address;
+
+export const MICROLOANS_CONTRACT_ADDRESS =
+  clientEnv.NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS as Address;
diff --git a/src/lib/contract-errors.ts b/src/lib/contract-errors.ts
index 2bfbe662..57dc5044 100644
--- a/src/lib/contract-errors.ts
+++ b/src/lib/contract-errors.ts
@@ -100,6 +100,42 @@ export const GOAL_SAVINGS_ERRORS: Record<string, string> = {
   SafeERC20FailedOperation: "Token transfer failed — check your balance.",
 };
 
+/**
+ * Human-readable messages for every custom error in the
+ * Microloans contract ABI.
+ */
+export const MICROLOANS_ERRORS: Record<string, string> = {
+  // ── Configuration ─────────────────────────────────────────────────
+  TokenNotAllowed: "This token is not allowed for microloans.",
+  InvalidVault: "This yield vault is not allowed for microloans.",
+  InvalidPrincipal: "The loan amount must be greater than zero.",
+  InvalidAcceptBy: "The offer deadline must be in the future.",
+  InvalidRepaymentPeriod:
+    "The repayment deadline must be later than the current one.",
+  InvalidBorrower:
+    "The borrower must be a valid address other than the lender.",
+  BorrowerAlreadySet: "This loan already has a borrower.",
+
+  // ── Roles / lifecycle ─────────────────────────────────────────────
+  LoanNotFound: "This loan does not exist.",
+  NotLender: "Only the lender can perform this action.",
+  NotBorrower: "Only the borrower can accept this loan.",
+  TermsMismatch:
+    "This agreement doesn't match the one the lender attached to the loan.",
+  InvalidState: "This loan can't do that in its current state.",
+  InvalidAmount: "The amount must be greater than zero.",
+  NothingToCollect: "There is nothing to collect yet.",
+
+  // ── OpenZeppelin / low-level ──────────────────────────────────────
+  InvalidInitialization: "Contract initialisation error.",
+  NotInitializing: "Contract is not in an initialisation state.",
+  ReentrancyGuardReentrantCall: "Reentrant call detected — please try again.",
+  OwnableInvalidOwner: "Invalid owner address.",
+  OwnableUnauthorizedAccount:
+    "Your account is not authorised to perform this action.",
+  SafeERC20FailedOperation: "Token transfer failed — check your balance.",
+};
+
 /**
  * Human-readable messages for every custom error in the
  * CollectiveFundCircles contract ABI.
@@ -207,6 +243,53 @@ export const GOAL_CANCEL_ERRORS: Record<string, string> = pick(
   GOAL_SAVINGS_ERRORS
 );
 
+// ── Microloan operation subsets ─────────────────────────────────────────────
+
+/** Errors that can surface when the lender creates a loan offer. */
+export const MICROLOAN_CREATE_ERRORS: Record<string, string> = pick(
+  [
+    "TokenNotAllowed",
+    "InvalidVault",
+    "InvalidPrincipal",
+    "InvalidAcceptBy",
+    "InvalidRepaymentPeriod",
+    "InvalidBorrower",
+    "SafeERC20FailedOperation",
+  ],
+  MICROLOANS_ERRORS
+);
+
+/** Errors that can surface on lender actions (borrower, cancel, extend, reclaim). */
+export const MICROLOAN_LENDER_ERRORS: Record<string, string> = pick(
+  [
+    "LoanNotFound",
+    "NotLender",
+    "InvalidState",
+    "InvalidBorrower",
+    "BorrowerAlreadySet",
+    "InvalidRepaymentPeriod",
+  ],
+  MICROLOANS_ERRORS
+);
+
+/** Errors that can surface when the borrower accepts a loan. */
+export const MICROLOAN_ACCEPT_ERRORS: Record<string, string> = pick(
+  ["LoanNotFound", "NotBorrower", "InvalidState", "TermsMismatch"],
+  MICROLOANS_ERRORS
+);
+
+/** Errors that can surface when repaying a loan. */
+export const MICROLOAN_REPAY_ERRORS: Record<string, string> = pick(
+  ["LoanNotFound", "InvalidState", "InvalidAmount", "SafeERC20FailedOperation"],
+  MICROLOANS_ERRORS
+);
+
+/** Errors that can surface when releasing the grant or collecting repayments. */
+export const MICROLOAN_PAYOUT_ERRORS: Record<string, string> = pick(
+  ["LoanNotFound", "InvalidState", "NothingToCollect"],
+  MICROLOANS_ERRORS
+);
+
 // ── Internal helper ─────────────────────────────────────────────────────────
 
 function pick(
diff --git a/src/lib/env.ts b/src/lib/env.ts
index b5681d59..bf7aca78 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -36,6 +36,10 @@ const envSchema = z.object({
     .string()
     .optional()
     .default(zeroAddress),
+  NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS: z
+    .string()
+    .optional()
+    .default(zeroAddress),
   NEXT_PUBLIC_DEPOSIT_TOKEN_ADDRESS: z.string(),
   // Empty string (e.g. a blank line copied from .env.local.example) must
   // fall back to the default, not coerce to ""/0
@@ -108,6 +112,8 @@ const parsedSchema = envSchema.safeParse({
     process.env.NEXT_PUBLIC_AUTOMATIC_SAVING_CIRCLES_CONTRACT_ADDRESS,
   NEXT_PUBLIC_GOAL_SAVINGS_CONTRACT_ADDRESS:
     process.env.NEXT_PUBLIC_GOAL_SAVINGS_CONTRACT_ADDRESS,
+  NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS:
+    process.env.NEXT_PUBLIC_MICROLOANS_CONTRACT_ADDRESS,
   NEXT_PUBLIC_DEPOSIT_TOKEN_ADDRESS:
     process.env.NEXT_PUBLIC_DEPOSIT_TOKEN_ADDRESS,
   NEXT_PUBLIC_DEPOSIT_TOKEN_SYMBOL:
diff --git a/src/lib/features.ts b/src/lib/features.ts
index 0878fa50..979941da 100644
--- a/src/lib/features.ts
+++ b/src/lib/features.ts
@@ -15,7 +15,7 @@ import { clientEnv, isLocalEnv } from "./env";
  * - local always renders every feature regardless of config
  * - goalSavings is temporarily always visible for this branch's rollout
  */
-export const FEATURES = ["goalSavings"] as const;
+export const FEATURES = ["goalSavings", "microloans"] as const;
 
 export type Feature = (typeof FEATURES)[number];
 
diff --git a/src/lib/microloan-state.ts b/src/lib/microloan-state.ts
new file mode 100644
index 00000000..bd1c48e8
--- /dev/null
+++ b/src/lib/microloan-state.ts
@@ -0,0 +1,62 @@
+/**
+ * Status helpers for Microloans, mirroring the lifecycle rules in
+ * IMicroloans.sol. The contract derives state on every read (loanState), so
+ * the UI never recomputes it from timestamps.
+ */
+
+/**
+ * Mirrors IMicroloans.LoanState — the on-chain `uint8` ordinals returned by
+ * loanState(). Keep this in sync with that source.
+ */
+export enum LoanState {
+  Offered = 0,
+  Expired = 1,
+  Cancelled = 2,
+  Active = 3,
+  Overdue = 4,
+  Repaid = 5,
+  Completed = 6,
+  Defaulted = 7,
+}
+
+export const LOAN_STATE_LABELS: Record<LoanState, string> = {
+  [LoanState.Offered]: "Offered",
+  [LoanState.Expired]: "Expired",
+  [LoanState.Cancelled]: "Cancelled",
+  [LoanState.Active]: "Active",
+  [LoanState.Overdue]: "Overdue",
+  [LoanState.Repaid]: "Repaid",
+  [LoanState.Completed]: "Completed",
+  [LoanState.Defaulted]: "Defaulted",
+};
+
+export const LOAN_STATE_CHIP_CLASSES: Record<LoanState, string> = {
+  [LoanState.Offered]: "border-primary-blue text-primary-blue",
+  [LoanState.Expired]: "border-surface-grey text-surface-grey",
+  [LoanState.Cancelled]: "border-surface-grey text-surface-grey",
+  [LoanState.Active]: "border-primary-blue text-primary-blue",
+  [LoanState.Overdue]: "border-system-red text-system-red",
+  [LoanState.Repaid]: "border-system-green text-system-green",
+  [LoanState.Completed]: "border-system-green text-system-green",
+  [LoanState.Defaulted]: "border-system-red text-system-red",
+};
+
+/**
+ * Whether the borrower can still repay: accepted and not fully repaid. A
+ * Defaulted loan can still be repaid (only the grant is gone).
+ */
+export function isLoanRepayable(state: LoanState, outstanding: bigint) {
+  return (
+    (state === LoanState.Active ||
+      state === LoanState.Overdue ||
+      state === LoanState.Defaulted) &&
+    outstanding > BigInt(0)
+  );
+}
+
+/** Repayment progress in percent (0-100, two decimals) for a loan. */
+export function loanRepaidPercent(repaid: bigint, disbursed: bigint): number {
+  if (disbursed === BigInt(0)) return 0;
+  if (repaid >= disbursed) return 100;
+  return Number((repaid * BigInt(10000)) / disbursed) / 100;
+}
diff --git a/src/lib/microloan-terms.ts b/src/lib/microloan-terms.ts
new file mode 100644
index 00000000..f82b1eb2
--- /dev/null
+++ b/src/lib/microloan-terms.ts
@@ -0,0 +1,13 @@
+import { Hex, keccak256, stringToBytes, zeroHash } from "viem";
+
+/**
+ * The on-chain termsHash for a plain-language loan agreement. The lender
+ * hashes the text at create; the borrower pastes the same text to accept, so
+ * the chain records exactly which terms they agreed to. Surrounding
+ * whitespace is ignored so a copy-paste round trip still matches. No text
+ * means no agreement (the zero hash).
+ */
+export function agreementHash(text: string | undefined): Hex {
+  const trimmed = text?.trim() ?? "";
+  return trimmed ? keccak256(stringToBytes(trimmed)) : zeroHash;
+}
diff --git a/src/lib/stack-types.ts b/src/lib/stack-types.ts
index fc1d18d9..95522d85 100644
--- a/src/lib/stack-types.ts
+++ b/src/lib/stack-types.ts
@@ -3,7 +3,7 @@
  * its own id-space, creation flow, detail route and Supabase metadata id
  * shape (see stackMetadataId below).
  */
-export const STACK_TYPES = ["rosca", "goal"] as const;
+export const STACK_TYPES = ["rosca", "goal", "microloan"] as const;
 
 export type StackType = (typeof STACK_TYPES)[number];
 
@@ -13,17 +13,21 @@ export type NewStackType = Exclude<StackType, "rosca">;
 export const STACK_TYPE_LABELS: Record<StackType, string> = {
   rosca: "Rotating savings",
   goal: "Shared goal",
+  microloan: "Microloan",
 };
 
 export const STACK_TYPE_DESCRIPTIONS: Record<StackType, string> = {
   rosca:
     "Deposit a fixed amount each round and take turns claiming the whole pot.",
   goal: "Pool contributions toward a shared target. If the group hits the goal, funds release. If not, everyone gets their money back.",
+  microloan:
+    "Lend to one borrower with no interest. Escrow a grant that unlocks once the loan is repaid.",
 };
 
 const STACK_TYPE_DETAIL_BASE_PATHS: Record<StackType, string> = {
   rosca: "/stacks",
   goal: "/goals",
+  microloan: "/microloans",
 };
 
 /** Detail-page path for a stack of the given type, e.g. `/goals/3`. */