diff --git a/apps/webapp/src/components/shared/input-token.tsx b/apps/webapp/src/components/shared/input-token.tsx
index d0e7004cd2..09ce3f2815 100644
--- a/apps/webapp/src/components/shared/input-token.tsx
+++ b/apps/webapp/src/components/shared/input-token.tsx
@@ -1,22 +1,18 @@
 import { Input, InputProps } from '@penumbra-zone/ui';
 import { cn } from '@penumbra-zone/ui/lib/utils';
-import { fromBaseUnitAmount } from '@penumbra-zone/types';
+import { fromBaseUnitAmount, joinLoHiAmount } from '@penumbra-zone/types';
 import SelectTokenModal from './select-token-modal';
 import { Validation, validationResult } from './validation-result';
 import { AccountBalance, AssetBalance } from '../../fetchers/balances';
 import { Selection } from '../../state/types';
+import { Fee } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1alpha1/fee_pb';
 
-/**
- * Each property of the `GasPrices` class has an implicit 1,000 denominator, per
- * its docs.
- *
- * @see `proto/penumbra/penumbra/core/component/fee/v1alpha1/fee.proto` in the
- * core repo.
- */
-const FEE_DENOMINATOR = 1000;
+const PENUMBRA_FEE_DENOMINATOR = 1000;
 
-const getFeeAsString = (fee: bigint | undefined, denomination: string | undefined) =>
-  typeof fee !== 'undefined' ? `${(Number(fee) / FEE_DENOMINATOR).toString()} ${denomination}` : '';
+const getFeeAsString = (fee: Fee | undefined) => {
+  if (!fee?.amount) return '';
+  return `${(Number(joinLoHiAmount(fee.amount)) / PENUMBRA_FEE_DENOMINATOR).toString()} penumbra`;
+};
 
 const getCurrentBalance = (assetBalance: AssetBalance | undefined) =>
   assetBalance
@@ -33,7 +29,7 @@ interface InputTokenProps extends InputProps {
   setSelection: (selection: Selection) => void;
   validations?: Validation[];
   balances: AccountBalance[];
-  fee: bigint | undefined;
+  fee: Fee | undefined;
 }
 
 export default function InputToken({
@@ -52,8 +48,7 @@ export default function InputToken({
   const vResult = validationResult(value, validations);
 
   const currentBalance = getCurrentBalance(selection?.asset);
-  const denomination = selection?.asset?.denom.display;
-  const feeAsString = getFeeAsString(fee, denomination);
+  const feeAsString = getFeeAsString(fee);
 
   return (
     <div
diff --git a/apps/webapp/src/state/send.ts b/apps/webapp/src/state/send.ts
index 08eaa4a4ab..52322d2873 100644
--- a/apps/webapp/src/state/send.ts
+++ b/apps/webapp/src/state/send.ts
@@ -2,7 +2,6 @@ import { AllSlices, SliceCreator } from './index';
 import {
   fromBaseUnitAmount,
   isPenumbraAddr,
-  joinLoHiAmount,
   toBaseUnit,
   uint8ArrayToHex,
 } from '@penumbra-zone/types';
@@ -16,6 +15,7 @@ import { Selection } from './types';
 import { MemoPlaintext } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1alpha1/transaction_pb';
 import { viewClient, custodyClient } from '../clients/grpc';
 import { getAddressByIndex } from '../fetchers/address.ts';
+import { Fee } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1alpha1/fee_pb';
 
 export interface SendSlice {
   selection: Selection | undefined;
@@ -26,7 +26,7 @@ export interface SendSlice {
   setRecipient: (addr: string) => void;
   memo: string;
   setMemo: (txt: string) => void;
-  fee: bigint | undefined;
+  fee: Fee | undefined;
   refreshFee: () => Promise<void>;
   sendTx: (toastFn: typeof toast) => Promise<void>;
   txInProgress: boolean;
@@ -72,10 +72,9 @@ export const createSendSlice = (): SliceCreator<SendSlice> => (set, get) => {
 
       const plan = await getPlan({ amount, recipient, selection, memo });
       if (!plan?.fee?.amount) return;
-      const fee = joinLoHiAmount(plan.fee.amount);
 
       set(state => {
-        state.send.fee = fee;
+        state.send.fee = plan.fee;
       });
     },
     sendTx: async toastFn => {