diff --git a/apps/leaderboard/src/app/Navbar.tsx b/apps/leaderboard/src/app/Navbar.tsx
index 31ff21b241..e12b99ed02 100644
--- a/apps/leaderboard/src/app/Navbar.tsx
+++ b/apps/leaderboard/src/app/Navbar.tsx
@@ -51,7 +51,8 @@ export const Navbar = () => {
         <li className="hidden sm:block">
           <Button
             href={TANGLE_DAPP_URL}
-            target="blank"
+            target="_blank"
+            rel="noopener noreferrer"
             className="px-5 border lg:py-4"
           >
             Launch dApp
diff --git a/apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts b/apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts
index 554f4a3580..393323b9b4 100644
--- a/apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts
+++ b/apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts
@@ -2,6 +2,7 @@ import { BLOCK_TIME_MS } from '@tangle-network/dapp-config/constants/tangle';
 import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import {
   executeEnvioGraphQL,
+  isEnvioUnavailableError,
   type EnvioNetwork,
 } from '@tangle-network/tangle-shared-ui/utils/executeEnvioGraphQL';
 import { useQuery as _useQuery } from '@tanstack/react-query';
@@ -66,7 +67,16 @@ export function useIndexingProgress(network: NetworkType) {
   return _useQuery({
     queryKey: [INDEXING_PROGRESS_QUERY_KEY, network],
     queryFn: () => fetcher(network),
-    refetchInterval: BLOCK_TIME_MS,
+    // Pause polling while the indexer is unreachable; it resumes after the
+    // user-triggered retry from the leaderboard's empty state.
+    refetchInterval: (query) => (query.state.error ? false : BLOCK_TIME_MS),
     placeholderData: (prev) => prev,
+    retry: (failureCount, error) => {
+      if (isEnvioUnavailableError(error)) {
+        return false;
+      }
+
+      return failureCount < 2;
+    },
   });
 }
diff --git a/apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx b/apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx
index ffc812d83f..83634adc4a 100644
--- a/apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx
+++ b/apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx
@@ -3,6 +3,7 @@ import { Spinner } from '@tangle-network/icons';
 import { Search } from '@tangle-network/icons/Search';
 import TableStatus from '@tangle-network/tangle-shared-ui/components/tables/TableStatus';
 import type { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
+import { isEnvioUnavailableError } from '@tangle-network/tangle-shared-ui/utils/executeEnvioGraphQL';
 import {
   Input,
   KeyValueWithButton,
@@ -256,6 +257,7 @@ export const LeaderboardTable = () => {
     error,
     isPending,
     isFetching,
+    refetch,
   } = useLeaderboard(
     networkTab,
     // Load more data when doing client-side filtering to ensure we don't miss results
@@ -269,6 +271,12 @@ export const LeaderboardTable = () => {
     accountQuery,
   );
 
+  const handleRetry = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const isIndexerUnavailable = error !== null && isEnvioUnavailableError(error);
+
   const data = useMemo<Account[]>(() => {
     if (!leaderboardData?.nodes) {
       return [] as Account[];
@@ -414,19 +422,34 @@ export const LeaderboardTable = () => {
         </div>
       </div>
 
-      {isPending ? (
+      {error && data.length === 0 ? (
         <TableStatus
           className="min-h-80"
-          icon={<Spinner size="2xl" />}
-          title="Loading..."
-          description="Loading leaderboard data..."
+          icon={<CrossCircledIcon className="fill-red-500 size-8" />}
+          title={
+            isIndexerUnavailable
+              ? 'Leaderboard data is temporarily unavailable'
+              : 'Error loading leaderboard data'
+          }
+          description={
+            isIndexerUnavailable
+              ? `The Tangle indexer is not responding right now. Please retry in a moment. (${error.message})`
+              : error.message
+          }
+          buttonText="Retry"
+          buttonProps={{
+            onClick: handleRetry,
+            isLoading: isFetching,
+            isDisabled: isFetching,
+            variant: 'secondary',
+          }}
         />
-      ) : error && data.length === 0 ? (
+      ) : isPending ? (
         <TableStatus
           className="min-h-80"
-          icon={<CrossCircledIcon className="fill-red-500" />}
-          title="Error loading leaderboard data"
-          description="Please try again later."
+          icon={<Spinner size="2xl" />}
+          title="Loading leaderboard…"
+          description="Fetching points and rankings from the Tangle indexer."
         />
       ) : data.length === 0 ? (
         <TableStatus
@@ -466,20 +489,22 @@ export const LeaderboardTable = () => {
               <Spinner size="2xl" />
             </Overlay>
           ) : error ? (
-            <Overlay className="flex flex-col gap-6 justify-center">
-              <CrossCircledIcon className="stroke-red-500 size-12" />
-
-              <div className="space-y-2">
-                <Typography variant="h4" component="h3">
-                  Error while fetching leaderboard data
-                </Typography>
-
-                <Typography variant="body1" component="p">
-                  Error name: {error.name}
+            <Overlay className="flex flex-col gap-4 justify-center px-6 text-center">
+              <CrossCircledIcon className="stroke-red-500 size-10" />
+
+              <div className="space-y-1">
+                <Typography variant="h5" component="h3">
+                  {isIndexerUnavailable
+                    ? 'Indexer is temporarily unavailable'
+                    : 'Could not refresh leaderboard'}
                 </Typography>
 
-                <Typography variant="body1" component="p">
-                  Error message: {error.message}
+                <Typography
+                  variant="body1"
+                  component="p"
+                  className="!text-mono-120 dark:!text-mono-80"
+                >
+                  Showing cached rankings. {error.message}
                 </Typography>
               </div>
             </Overlay>
diff --git a/apps/leaderboard/src/features/leaderboard/queries/leaderboardQuery.ts b/apps/leaderboard/src/features/leaderboard/queries/leaderboardQuery.ts
index 3c310fa301..350cb6a970 100644
--- a/apps/leaderboard/src/features/leaderboard/queries/leaderboardQuery.ts
+++ b/apps/leaderboard/src/features/leaderboard/queries/leaderboardQuery.ts
@@ -1,12 +1,27 @@
 import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import {
   executeEnvioGraphQL,
+  isEnvioUnavailableError,
   type EnvioNetwork,
 } from '@tangle-network/tangle-shared-ui/utils/executeEnvioGraphQL';
 import { useQuery } from '@tanstack/react-query';
 import { LEADERBOARD_QUERY_KEY } from '../../../constants/query';
 import { RoleFilterEnum } from '../constants';
 
+// Auto-refresh interval in milliseconds (10 seconds).
+const LEADERBOARD_REFETCH_INTERVAL = 10_000;
+
+// When the indexer is offline (Cloudflare 5xx, DNS, CORS, etc.) further retries
+// just stack latency on top of an already broken UI — fail fast instead so the
+// table can swap the spinner for an actionable error state.
+const shouldRetryEnvioQuery = (failureCount: number, error: Error): boolean => {
+  if (isEnvioUnavailableError(error)) {
+    return false;
+  }
+
+  return failureCount < 2;
+};
+
 const DEFAULT_EXCLUDED_ACCOUNT_IDS = [
   '0x0000000000000000000000000000000000000000',
 ] as const;
@@ -468,9 +483,6 @@ const fetchAccountActivity = async (
   return result.data;
 };
 
-// Auto-refresh interval in milliseconds (10 seconds)
-const LEADERBOARD_REFETCH_INTERVAL = 10_000;
-
 export function useLeaderboard(
   network: NetworkType,
   first: number,
@@ -498,7 +510,11 @@ export function useLeaderboard(
       ),
     enabled: first > 0 && offset >= 0 && timestampSevenDaysAgo > 0,
     placeholderData: (prev) => prev,
-    refetchInterval: LEADERBOARD_REFETCH_INTERVAL,
+    // Stop the poll once we know the indexer is down. It re-arms after the
+    // next successful fetch (e.g. via the user-triggered Retry).
+    refetchInterval: (query) =>
+      query.state.error ? false : LEADERBOARD_REFETCH_INTERVAL,
+    retry: shouldRetryEnvioQuery,
   });
 }
 
@@ -648,6 +664,7 @@ export function useRoleAccounts(
     queryFn: () => fetchRoleAccounts(network, sortedRoles),
     enabled: sortedRoles.length > 0,
     staleTime: 30_000,
+    retry: shouldRetryEnvioQuery,
   });
 }
 
@@ -656,5 +673,6 @@ export function useRoleCounts(network: NetworkType) {
     queryKey: ['roleCounts', network],
     queryFn: () => fetchRoleCounts(network),
     staleTime: 60_000,
+    retry: shouldRetryEnvioQuery,
   });
 }
diff --git a/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/ProtocolStatisticCard.tsx b/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/ProtocolStatisticCard.tsx
index 982b94296f..2b0e04ecb4 100644
--- a/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/ProtocolStatisticCard.tsx
+++ b/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/ProtocolStatisticCard.tsx
@@ -1,15 +1,17 @@
-import { StatusIndicator } from '@tangle-network/icons';
+import { RefreshLineIcon, StatusIndicator } from '@tangle-network/icons';
 import { useOperators } from '@tangle-network/tangle-shared-ui/data/graphql/useOperators';
 import { useDelegatorCount } from '@tangle-network/tangle-shared-ui/data/graphql/useDelegator';
+import { useIndexerStatus } from '@tangle-network/tangle-shared-ui/context/IndexerStatusContext';
 import type { ProtocolStakingAsset } from '@tangle-network/tangle-shared-ui/data/graphql';
 import {
   Card,
   CardVariant,
   EMPTY_VALUE_PLACEHOLDER,
+  IconButton,
   SkeletonLoader,
   Typography,
 } from '@tangle-network/ui-components';
-import { FC, useMemo } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { formatUnits } from 'viem';
 import { StatsItem } from './StatsItem';
@@ -41,13 +43,39 @@ export const ProtocolStatisticCard: FC<Props> = ({
   stakingAssets,
   tvlData,
 }) => {
-  const { data: operators, isLoading: isLoadingOperators } = useOperators({
+  const {
+    data: operators,
+    isLoading: isLoadingOperators,
+    error: operatorsError,
+    refetch: refetchOperators,
+  } = useOperators({
     status: 'ACTIVE',
   });
 
   // Get unique staker (delegator) count
-  const { data: stakerCount, isLoading: isLoadingStakers } =
-    useDelegatorCount();
+  const {
+    data: stakerCount,
+    isLoading: isLoadingStakers,
+    error: stakerCountError,
+    refetch: refetchStakerCount,
+  } = useDelegatorCount();
+
+  const { isHealthy, isCheckingHealth, checkHealth } = useIndexerStatus();
+
+  // The indexer feeds Stakers and (when on-chain fallback also fails) Operators.
+  // Surface a single muted notice rather than a row of EMPTY_VALUE_PLACEHOLDERs
+  // that read as "card is broken".
+  const isIndexerUnavailable =
+    !isCheckingHealth &&
+    (isHealthy === false ||
+      stakerCountError !== null ||
+      (operatorsError !== null && (operators?.length ?? 0) === 0));
+
+  const handleRetry = useCallback(() => {
+    void checkHealth();
+    void refetchOperators();
+    void refetchStakerCount();
+  }, [checkHealth, refetchOperators, refetchStakerCount]);
 
   // Calculate TVL display value
   const tvlDisplay = useMemo(() => {
@@ -101,27 +129,55 @@ export const ProtocolStatisticCard: FC<Props> = ({
           )}
         </div>
 
-        <div className="grid grid-cols-3 gap-6 mt-auto">
-          <StatsItem
-            label="Stakers"
-            result={stakerCount ?? null}
-            isLoading={isLoadingStakers}
-            displayLabelBottom
-          />
-
-          <StatsItem
-            label="Operators"
-            result={operators?.length ?? null}
-            isLoading={isLoadingOperators}
-            displayLabelBottom
-          />
-
-          <StatsItem
-            label="Assets"
-            result={stakingAssets.length}
-            isLoading={isLoading}
-            displayLabelBottom
-          />
+        <div className="mt-auto flex flex-col gap-3">
+          {isIndexerUnavailable && (
+            <div className="flex items-center gap-2 text-mono-120 dark:text-mono-100">
+              <Typography
+                variant="body2"
+                className="text-mono-120 dark:text-mono-100"
+              >
+                Network data temporarily unavailable. Retrying automatically.
+              </Typography>
+
+              <IconButton
+                onClick={handleRetry}
+                tooltip="Retry"
+                aria-label="Retry network data"
+                className="!p-1"
+              >
+                <RefreshLineIcon size="md" />
+              </IconButton>
+            </div>
+          )}
+
+          <div className="grid grid-cols-3 gap-6">
+            <StatsItem
+              label="Stakers"
+              result={stakerCount ?? null}
+              isLoading={isLoadingStakers}
+              error={stakerCountError ?? undefined}
+              displayLabelBottom
+            />
+
+            <StatsItem
+              label="Operators"
+              result={operators?.length ?? null}
+              isLoading={isLoadingOperators}
+              error={
+                operatorsError !== null && (operators?.length ?? 0) === 0
+                  ? operatorsError
+                  : undefined
+              }
+              displayLabelBottom
+            />
+
+            <StatsItem
+              label="Assets"
+              result={stakingAssets.length}
+              isLoading={isLoading}
+              displayLabelBottom
+            />
+          </div>
         </div>
       </div>
     </Card>
diff --git a/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/StatsItem.tsx b/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/StatsItem.tsx
index d663cd3f61..d56fa4819f 100644
--- a/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/StatsItem.tsx
+++ b/apps/tangle-dapp/src/components/account/ProtocolStatisticCard/StatsItem.tsx
@@ -43,10 +43,14 @@ export const StatsItem: FC<StatsItemProps> = ({
       <Typography
         variant="h4"
         fw="bold"
-        className={twMerge('text-mono-200 dark:text-mono-0', valueClassName)}
+        className={twMerge(
+          'text-mono-200 dark:text-mono-0',
+          error && 'text-mono-120 dark:text-mono-100',
+          valueClassName,
+        )}
       >
         {error
-          ? error.name
+          ? EMPTY_VALUE_PLACEHOLDER
           : result !== null
             ? typeof result === 'number'
               ? addCommasToNumber(result)
diff --git a/apps/tangle-dapp/src/components/staking/UserStakingOverview.tsx b/apps/tangle-dapp/src/components/staking/UserStakingOverview.tsx
index 0b4e49cf81..e3f175a038 100644
--- a/apps/tangle-dapp/src/components/staking/UserStakingOverview.tsx
+++ b/apps/tangle-dapp/src/components/staking/UserStakingOverview.tsx
@@ -5,11 +5,12 @@ import {
   SkeletonLoader,
   Typography,
 } from '@tangle-network/ui-components';
-import { TokenIcon } from '@tangle-network/icons';
+import { TokenIcon, WalletLineIcon } from '@tangle-network/icons';
 import type { Delegator } from '@tangle-network/tangle-shared-ui/data/graphql/useDelegator';
 import type { StakingAssetMap } from '@tangle-network/tangle-shared-ui/data/graphql';
 import { formatUnits, Address } from 'viem';
 import { twMerge } from 'tailwind-merge';
+import { useAccount } from 'wagmi';
 
 interface Props {
   delegator: Delegator | null;
@@ -33,6 +34,8 @@ export const UserStakingOverview: FC<Props> = ({
   assets,
   isLoading,
 }) => {
+  const { isConnected } = useAccount();
+
   // Get position details for each asset
   const positions = useMemo(() => {
     if (!delegator || !assets) return [];
@@ -64,13 +67,47 @@ export const UserStakingOverview: FC<Props> = ({
     return <SkeletonLoader className="h-32" />;
   }
 
-  // No positions - show empty state
+  // No positions - show empty state. Wallet-disconnected and "connected but
+  // empty" read very differently, so split the copy.
   if (positions.length === 0) {
+    const { title, body } = isConnected
+      ? {
+          title: 'No active positions',
+          body: 'Deposit a supported asset below to start earning. Your deposited, delegated, and pending balances appear here once on-chain.',
+        }
+      : {
+          title: 'Connect a wallet to view your positions',
+          body: 'Deposited, delegated, and pending balances appear here once a wallet is connected. The asset catalog below loads without a wallet.',
+        };
+
     return (
-      <Card variant={CardVariant.GLASS} className="p-6 text-center">
-        <Typography variant="body1" className="text-mono-120 dark:text-mono-80">
-          No positions yet. Deposit assets to start staking.
-        </Typography>
+      <Card
+        variant={CardVariant.GLASS}
+        className="flex flex-col items-center gap-3 p-6 text-center sm:flex-row sm:items-center sm:gap-4 sm:text-left"
+      >
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-mono-20 dark:bg-mono-160">
+          <WalletLineIcon
+            size="lg"
+            className="!fill-mono-120 dark:!fill-mono-100"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <Typography
+            variant="body1"
+            fw="semibold"
+            className="text-mono-200 dark:text-mono-0"
+          >
+            {title}
+          </Typography>
+
+          <Typography
+            variant="body2"
+            className="max-w-2xl text-mono-120 dark:text-mono-80"
+          >
+            {body}
+          </Typography>
+        </div>
       </Card>
     );
   }
diff --git a/apps/tangle-dapp/src/components/tables/StakingAssetsTable.tsx b/apps/tangle-dapp/src/components/tables/StakingAssetsTable.tsx
index a34d9ca8a4..3e74fa882c 100644
--- a/apps/tangle-dapp/src/components/tables/StakingAssetsTable.tsx
+++ b/apps/tangle-dapp/src/components/tables/StakingAssetsTable.tsx
@@ -1,7 +1,8 @@
 import { FC, useMemo } from 'react';
 import { TokenIcon } from '@tangle-network/icons';
 import Spinner from '@tangle-network/icons/Spinner';
-import { useChainId } from 'wagmi';
+import { useAccount, useChainId } from 'wagmi';
+import { useIndexerStatus } from '@tangle-network/tangle-shared-ui/context/IndexerStatusContext';
 import HeaderCell from '@tangle-network/tangle-shared-ui/components/tables/HeaderCell';
 import TableCellWrapper from '@tangle-network/tangle-shared-ui/components/tables/TableCellWrapper';
 import TableStatus from '@tangle-network/tangle-shared-ui/components/tables/TableStatus';
@@ -210,6 +211,8 @@ export const StakingAssetsTable: FC<Props> = ({
   isLoading,
 }) => {
   const chainId = useChainId();
+  const { isConnected } = useAccount();
+  const { isHealthy, isCheckingHealth } = useIndexerStatus();
 
   const protocolAssetMap = useMemo(() => {
     const map = new Map<string, ProtocolStakingAsset>();
@@ -273,9 +276,25 @@ export const StakingAssetsTable: FC<Props> = ({
   }
 
   if (tableData.length === 0) {
+    // When the indexer is down AND the on-chain fallback returned nothing, the
+    // table renders an empty state. Distinguish "indexer unreachable" from
+    // "network has no assets configured" so the screen doesn't read as broken.
+    if (!isCheckingHealth && isHealthy === false) {
+      return (
+        <TableStatus
+          title="Network data temporarily unavailable"
+          description={
+            isConnected
+              ? 'Could not reach the Tangle indexer. Asset balances and TVL will appear here once the connection recovers.'
+              : 'Could not reach the Tangle indexer. Connect a wallet to read assets directly from chain, or wait for the indexer to recover.'
+          }
+        />
+      );
+    }
+
     return (
       <TableStatus
-        title="No Stake Assets"
+        title="No stake assets"
         description="No staking assets are configured for this network."
       />
     );
diff --git a/libs/tangle-shared-ui/src/utils/executeEnvioGraphQL.ts b/libs/tangle-shared-ui/src/utils/executeEnvioGraphQL.ts
index 4dd42ed036..b119cbfbb6 100644
--- a/libs/tangle-shared-ui/src/utils/executeEnvioGraphQL.ts
+++ b/libs/tangle-shared-ui/src/utils/executeEnvioGraphQL.ts
@@ -82,6 +82,40 @@ export interface TypedDocumentString<TResult, TVariables> {
   toString(): string;
 }
 
+/**
+ * Thrown when the Envio GraphQL endpoint is unreachable or returns a non-2xx
+ * response. `status` is `0` for network-level failures (origin unreachable,
+ * DNS, CORS, abort) and the HTTP status code otherwise. Callers can use
+ * `isEnvioUnavailableError` to decide whether to short-circuit retries.
+ */
+export class EnvioRequestError extends Error {
+  readonly status: number;
+  readonly endpoint: string;
+
+  constructor(message: string, status: number, endpoint: string) {
+    super(message);
+    this.name = 'EnvioRequestError';
+    this.status = status;
+    this.endpoint = endpoint;
+  }
+}
+
+/**
+ * True for errors where the indexer is effectively offline (network failure or
+ * 5xx). These are not worth retrying on the React Query timer — retry
+ * latency would just stack up while the spinner stays on screen.
+ */
+export const isEnvioUnavailableError = (error: unknown): boolean => {
+  if (error instanceof EnvioRequestError) {
+    return error.status === 0 || error.status >= 500;
+  }
+
+  // `fetch` network failures throw `TypeError` with messages like
+  // "Failed to fetch" (Chromium) or "NetworkError when attempting to fetch
+  // resource." (Firefox).
+  return error instanceof TypeError;
+};
+
 // Execute a GraphQL query against the Envio indexer
 export async function executeEnvioGraphQL<TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables> | string,
@@ -90,21 +124,34 @@ export async function executeEnvioGraphQL<TResult, TVariables>(
 ): Promise<{ data: TResult; errors?: Array<{ message: string }> }> {
   const endpoint = getEnvioEndpoint(network);
 
-  const response = await fetch(endpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/graphql-response+json',
-    },
-    body: JSON.stringify({
-      query: typeof query === 'string' ? query : query.toString(),
-      variables,
-    }),
-  });
+  let response: Response;
+  try {
+    response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/graphql-response+json',
+      },
+      body: JSON.stringify({
+        query: typeof query === 'string' ? query : query.toString(),
+        variables,
+      }),
+    });
+  } catch (cause) {
+    // Network-level failure (origin unreachable, DNS, CORS, abort).
+    const message = cause instanceof Error ? cause.message : String(cause);
+    throw new EnvioRequestError(
+      `GraphQL request failed: ${message}`,
+      0,
+      endpoint,
+    );
+  }
 
   if (!response.ok) {
-    throw new Error(
+    throw new EnvioRequestError(
       `GraphQL request failed: ${response.status} ${response.statusText}`,
+      response.status,
+      endpoint,
     );
   }