diff --git a/app/src/lib/components/token.svelte b/app/src/lib/components/token.svelte
index cdf353819a..f59b336969 100644
--- a/app/src/lib/components/token.svelte
+++ b/app/src/lib/components/token.svelte
@@ -1,54 +1,50 @@
 <script lang="ts">
-  import type { Chain, TokenInfo } from "$lib/types";
-  import TokenQualityLevel from "$lib/components/token-quality-level.svelte";
-  import Truncate from "./truncate.svelte";
-  import ArrowLeftIcon from "virtual:icons/lucide/arrow-left";
-  import { toDisplayName } from "$lib/utilities/chains.ts";
-  import { formatUnits } from "viem";
+import type { Chain, TokenInfo } from "$lib/types"
+import TokenQualityLevel from "$lib/components/token-quality-level.svelte"
+import Truncate from "./truncate.svelte"
+import ArrowLeftIcon from "virtual:icons/lucide/arrow-left"
+import { toDisplayName } from "$lib/utilities/chains.ts"
+import { formatUnits } from "viem"
 
-  export let chains: Array<Chain>;
-  export let chainId: string;
-  export let denom: string;
-  export let amount: string | number | bigint | null = null;
-  export let expanded: bool = false;
+export let chains: Array<Chain>
+export let chainId: string
+export let denom: string
+export let amount: string | number | bigint | null = null
+export let expanded: bool = false
 
-  let chain = chains.find((c) => c.chain_id === chainId) ?? null;
-  let graphqlToken = chain?.tokens.find((t) => t.denom === denom) ?? null;
+let chain = chains.find(c => c.chain_id === chainId) ?? null
+let graphqlToken = chain?.tokens.find(t => t.denom === denom) ?? null
 
-  let token: TokenInfo = (() => {
-    let graphqlToken = chain?.tokens.find((t) => t.denom === denom) ?? null;
+let token: TokenInfo = (() => {
+  let graphqlToken = chain?.tokens.find(t => t.denom === denom) ?? null
 
-    if (
-      graphqlToken?.representations &&
-      graphqlToken.representations.length > 0
-    ) {
-      let fullRepresentations = graphqlToken.representations.filter(
-        (repr) =>
-          repr.decimals != null && repr.name != null && repr.symbol != null,
-      ) as Array<
-        {
-          decimals: number;
-          name: string;
-          symbol: string;
-        } & (typeof graphqlToken.representations)[number]
-      >;
+  if (graphqlToken?.representations && graphqlToken.representations.length > 0) {
+    let fullRepresentations = graphqlToken.representations.filter(
+      repr => repr.decimals != null && repr.name != null && repr.symbol != null
+    ) as Array<
+      {
+        decimals: number
+        name: string
+        symbol: string
+      } & (typeof graphqlToken.representations)[number]
+    >
 
-      if (fullRepresentations.length > 0) {
-        return {
-          quality_level: "GRAPHQL",
-          denom,
-          primaryRepresentation: fullRepresentations[0],
-          representations: fullRepresentations,
-          wrapping: graphqlToken.wrapping,
-        };
+    if (fullRepresentations.length > 0) {
+      return {
+        quality_level: "GRAPHQL",
+        denom,
+        primaryRepresentation: fullRepresentations[0],
+        representations: fullRepresentations,
+        wrapping: graphqlToken.wrapping
       }
     }
+  }
 
-    return {
-      quality_level: "NONE",
-      denom,
-    };
-  })();
+  return {
+    quality_level: "NONE",
+    denom
+  }
+})()
 </script>
 
 <div>
@@ -71,11 +67,14 @@
     {:else}
       {amount}
       <b><Truncate value={token.denom} type="address" /></b>
+      <div class="text-muted-foreground text-xs flex gap-1 items-center">
+        {toDisplayName(chainId, chains)}
+      </div>
     {/if}
   </div>
   {#if expanded}
-    {#if token.quality_level === "GRAPHQL"}
-      <div class="text-xs">
+    <div class="text-xs">
+      {#if token.quality_level === "GRAPHQL"}
         <div>Name: {token.primaryRepresentation.name}</div>
         <div>Symbol: {token.primaryRepresentation.symbol}</div>
         <div>Denom: <Truncate value={token.denom} type="address" /></div>
@@ -87,7 +86,10 @@
               href={source.source.source_uri}>{source.source.name}</a
             >{/each}
         </div>
-      </div>
-    {/if}
+      {:else}
+        <div>Denom: <Truncate value={token.denom} type="address" /></div>
+        <div>Amount: {amount}</div>
+      {/if}
+    </div>
   {/if}
 </div>
diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
index 5157501187..058cb146d1 100644
--- a/app/src/lib/components/transfer-details.svelte
+++ b/app/src/lib/components/transfer-details.svelte
@@ -1,72 +1,67 @@
 <script lang="ts">
-  import { page } from "$app/stores";
-  import request from "graphql-request";
-  import { transfersBySourceHashBaseQueryDocument } from "$lib/graphql/queries/transfer-details.ts";
-  import DetailsHeading from "$lib/components/details-heading.svelte";
-  import { createQuery } from "@tanstack/svelte-query";
-  import { URLS } from "$lib/constants";
-  import * as Card from "$lib/components/ui/card/index.ts";
-  import { toIsoString } from "$lib/utilities/date";
-  import LoadingLogo from "$lib/components/loading-logo.svelte";
-  import { derived } from "svelte/store";
-  import { raise } from "$lib/utilities";
-  import Trace from "$lib/components/trace.svelte";
-  import type { Chain } from "$lib/types";
-  import { submittedTransfers } from "$lib/stores/submitted-transfers";
-  import { cn } from "$lib/utilities/shadcn";
-  import Truncate from "$lib/components/truncate.svelte";
-  import { formatUnits } from "viem";
-  import PacketPath from "./packet-path.svelte";
-  import Token from "./token.svelte";
+import { page } from "$app/stores"
+import request from "graphql-request"
+import { transfersBySourceHashBaseQueryDocument } from "$lib/graphql/queries/transfer-details.ts"
+import DetailsHeading from "$lib/components/details-heading.svelte"
+import { createQuery } from "@tanstack/svelte-query"
+import { URLS } from "$lib/constants"
+import * as Card from "$lib/components/ui/card/index.ts"
+import { toIsoString } from "$lib/utilities/date"
+import LoadingLogo from "$lib/components/loading-logo.svelte"
+import { derived } from "svelte/store"
+import { raise } from "$lib/utilities"
+import Trace from "$lib/components/trace.svelte"
+import type { Chain } from "$lib/types"
+import { submittedTransfers } from "$lib/stores/submitted-transfers"
+import { cn } from "$lib/utilities/shadcn"
+import Truncate from "$lib/components/truncate.svelte"
+import { formatUnits } from "viem"
+import PacketPath from "./packet-path.svelte"
+import Token from "./token.svelte"
 
-  const source = $page.params.source;
-  export let chains: Array<Chain>;
+const source = $page.params.source
+export let chains: Array<Chain>
 
-  let transfers = createQuery({
-    queryKey: ["transfers-by-source-base", source],
-    refetchInterval: (query) =>
-      query.state.data?.length === 0 ? 1_000 : false, // fetch every second until we have the transaction
-    placeholderData: (previousData, _) => previousData,
-    queryFn: async () => {
-      console.log("querying");
-      const response = await request(
-        URLS().GRAPHQL,
-        transfersBySourceHashBaseQueryDocument,
-        {
-          source_transaction_hash: source,
-        },
-      );
+let transfers = createQuery({
+  queryKey: ["transfers-by-source-base", source],
+  refetchInterval: query => (query.state.data?.length === 0 ? 1_000 : false), // fetch every second until we have the transaction
+  placeholderData: (previousData, _) => previousData,
+  queryFn: async () => {
+    console.log("querying")
+    const response = await request(URLS().GRAPHQL, transfersBySourceHashBaseQueryDocument, {
+      source_transaction_hash: source
+    })
 
-      if (
-        response.v1_ibc_union_fungible_asset_orders === undefined ||
-        response.v1_ibc_union_fungible_asset_orders === null
-      )
-        raise("error fetching transfers");
+    if (
+      response.v1_ibc_union_fungible_asset_orders === undefined ||
+      response.v1_ibc_union_fungible_asset_orders === null
+    )
+      raise("error fetching transfers")
 
-      return response.v1_ibc_union_fungible_asset_orders;
-    },
-  });
+    return response.v1_ibc_union_fungible_asset_orders
+  }
+})
 
-  let processedTransfers = derived(
-    [transfers, submittedTransfers],
-    ([$transfers, $submittedTransfers]) => {
-      if ($transfers.data === undefined || $transfers.data.length === 0) {
-        if ($submittedTransfers[source] === undefined) {
-          return null;
-        }
-        return [$submittedTransfers[source]];
+let processedTransfers = derived(
+  [transfers, submittedTransfers],
+  ([$transfers, $submittedTransfers]) => {
+    if ($transfers.data === undefined || $transfers.data.length === 0) {
+      if ($submittedTransfers[source] === undefined) {
+        return null
       }
-      return $transfers.data.map((transfer) => {
-        let tx = structuredClone(transfer);
-        return {
-          transfer_day: tx.packet_send_timestamp
-            ? toIsoString(new Date(tx.packet_send_timestamp)).split("T")[0]
-            : null,
-          ...tx,
-        };
-      });
-    },
-  );
+      return [$submittedTransfers[source]]
+    }
+    return $transfers.data.map(transfer => {
+      let tx = structuredClone(transfer)
+      return {
+        transfer_day: tx.packet_send_timestamp
+          ? toIsoString(new Date(tx.packet_send_timestamp)).split("T")[0]
+          : null,
+        ...tx
+      }
+    })
+  }
+)
 </script>
 
 {#if $processedTransfers !== null && $processedTransfers.length > 0}