diff --git a/app/common/package.json b/app/common/package.json
index a3bda304841a..b193595dc5b9 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -15,6 +15,7 @@
     "./src/backendQuery": "./src/backendQuery.ts",
     "./src/queryClient": "./src/queryClient.ts",
     "./src/utilities/data/array": "./src/utilities/data/array.ts",
+    "./src/utilities/errors": "./src/utilities/errors.ts",
     "./src/utilities/data/dateTime": "./src/utilities/data/dateTime.ts",
     "./src/utilities/data/newtype": "./src/utilities/data/newtype.ts",
     "./src/utilities/data/object": "./src/utilities/data/object.ts",
diff --git a/app/common/src/queryClient.ts b/app/common/src/queryClient.ts
index ab69795436d0..9c8829c8f736 100644
--- a/app/common/src/queryClient.ts
+++ b/app/common/src/queryClient.ts
@@ -83,7 +83,7 @@ export function createQueryClient<TStorageValue = string>(
       storage: persisterStorage,
       // Prefer online first and don't rely on the local cache if user is online
       // fallback to the local cache only if the user is offline
-      maxAge: queryCore.onlineManager.isOnline() ? -1 : DEFAULT_QUERY_PERSIST_TIME_MS,
+      maxAge: DEFAULT_QUERY_PERSIST_TIME_MS,
       buster: DEFAULT_BUSTER,
       filters: { predicate: query => query.meta?.persist !== false },
       prefix: 'enso:query-persist:',
@@ -130,6 +130,9 @@ export function createQueryClient<TStorageValue = string>(
     defaultOptions: {
       queries: {
         ...(persister != null ? { persister } : {}),
+        // Default set to 'always' to don't pause ongoing queries
+        // and make them fail.
+        networkMode: 'always',
         refetchOnReconnect: 'always',
         staleTime: DEFAULT_QUERY_STALE_TIME_MS,
         retry: (failureCount, error: unknown) => {
diff --git a/app/common/src/text/english.json b/app/common/src/text/english.json
index cd6307e5271f..ee0cb1004315 100644
--- a/app/common/src/text/english.json
+++ b/app/common/src/text/english.json
@@ -1,6 +1,10 @@
 {
   "submit": "Submit",
   "retry": "Retry",
+
+  "arbitraryFetchError": "An error occurred while fetching data",
+  "arbitraryFetchImageError": "An error occurred while fetching an image",
+
   "createFolderError": "Could not create new folder",
   "createProjectError": "Could not create new project",
   "createDatalinkError": "Could not create new Datalink",
@@ -17,6 +21,9 @@
   "deleteAssetError": "Could not delete '$0'",
   "restoreAssetError": "Could not restore '$0'",
 
+  "refetchQueriesPending": "Getting latest updates...",
+  "refetchQueriesError": "Could not get latest updates. Some information may be outdated",
+
   "localBackendDatalinkError": "Cannot create Datalinks on the local drive",
   "localBackendSecretError": "Cannot create secrets on the local drive",
   "offlineUploadFilesError": "Cannot upload files when offline",
@@ -177,6 +184,7 @@
   "getCustomerPortalUrlBackendError": "Could not get customer portal URL",
   "duplicateLabelError": "This label already exists.",
   "emptyStringError": "This value must not be empty.",
+  "resolveProjectAssetPathBackendError": "Could not get asset",
 
   "directoryAssetType": "folder",
   "directoryDoesNotExistError": "Unable to find directory. Does it exist?",
@@ -480,9 +488,9 @@
   "hidePassword": "Hide password",
   "showPassword": "Show password",
   "copiedToClipboard": "Copied to clipboard",
-  "noResultsFound": "No results found.",
-  "youAreOffline": "You are offline.",
-  "cannotCreateAssetsHere": "You do not have the permissions to create assets here.",
+  "noResultsFound": "No results found",
+  "youAreOffline": "You are offline",
+  "cannotCreateAssetsHere": "You do not have the permissions to create assets here",
   "enableVersionChecker": "Enable Version Checker",
   "enableVersionCheckerDescription": "Show a dialog if the current version of the desktop app does not match the latest version.",
   "disableAnimations": "Disable animations",
diff --git a/app/common/src/utilities/errors.ts b/app/common/src/utilities/errors.ts
new file mode 100644
index 000000000000..a359fd3e1a7a
--- /dev/null
+++ b/app/common/src/utilities/errors.ts
@@ -0,0 +1,52 @@
+/**
+ * An error that occurs when a network request fails.
+ *
+ * This error is used to indicate that a network request failed due to a network error,
+ * such as a timeout or a connection error.
+ */
+export class NetworkError extends Error {
+  /**
+   * Create a new {@link NetworkError} with the specified message.
+   * @param message - The message to display when the error is thrown.
+   */
+  constructor(message: string, options?: ErrorOptions) {
+    super(message, options)
+    this.name = 'NetworkError'
+  }
+}
+
+/**
+ * An error that occurs when the user is offline.
+ *
+ * This error is used to indicate that the user is offline, such as when they are
+ * not connected to the internet or when they are on an airplane.
+ */
+export class OfflineError extends Error {
+  /**
+   * Create a new {@link OfflineError} with the specified message.
+   * @param message - The message to display when the error is thrown.
+   */
+  constructor(message: string = 'User is offline', options?: ErrorOptions) {
+    super(message, options)
+    this.name = 'OfflineError'
+  }
+}
+
+/**
+ * An error with a display message.
+ *
+ * This message can be shown to a user.
+ */
+export class ErrorWithDisplayMessage extends Error {
+  readonly displayMessage: string
+  /**
+   * Create a new {@link ErrorWithDisplayMessage} with the specified message and display message.
+   * @param message - The message to display when the error is thrown.
+   * @param options - The options to pass to the error.
+   */
+  constructor(message: string, options: ErrorOptions & { displayMessage: string }) {
+    super(message, options)
+    this.name = 'ErrorWithDisplayMessage'
+    this.displayMessage = options.displayMessage
+  }
+}
diff --git a/app/gui/integration-test/dashboard/actions/api.ts b/app/gui/integration-test/dashboard/actions/api.ts
index 458b13141770..975fac1e9b39 100644
--- a/app/gui/integration-test/dashboard/actions/api.ts
+++ b/app/gui/integration-test/dashboard/actions/api.ts
@@ -16,6 +16,7 @@ import type { FeatureFlags } from '#/providers/FeatureFlagsProvider'
 import { readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import invariant from 'tiny-invariant'
 
 // =================
 // === Constants ===
@@ -1190,17 +1191,23 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
       })
     })
 
-    await get(remoteBackendPaths.getProjectAssetPath(GLOB_PROJECT_ID, '*'), (route, request) => {
-      const maybeId = request.url().match(/[/]projects[/]([^?/]+)/)?.[1]
-      if (!maybeId) return
-      const projectId = backend.ProjectId(maybeId)
-      called('getProjectAsset', { projectId })
-      return route.fulfill({
-        // This is a mock SVG image. Just a square with a black background.
-        body: '/mock/svg.svg',
-        contentType: 'text/plain',
-      })
-    })
+    await get(
+      remoteBackendPaths.getProjectAssetPath(GLOB_PROJECT_ID, '*'),
+      async (route, request) => {
+        const maybeId = request.url().match(/[/]projects[/]([^?/]+)/)?.[1]
+
+        invariant(maybeId, 'Unable to parse the ID provided')
+
+        const projectId = backend.ProjectId(maybeId)
+
+        called('getProjectAsset', { projectId })
+
+        return route.fulfill({
+          // This is a mock SVG image. Just a square with a black background.
+          path: join(__dirname, '../mock/example.png'),
+        })
+      },
+    )
 
     await page.route('mock/svg.svg', (route) => {
       return route.fulfill({ body: MOCK_SVG, contentType: 'image/svg+xml' })
diff --git a/app/gui/integration-test/dashboard/assetPanel.spec.ts b/app/gui/integration-test/dashboard/assetPanel.spec.ts
index 9282cf573724..37e8ffd05102 100644
--- a/app/gui/integration-test/dashboard/assetPanel.spec.ts
+++ b/app/gui/integration-test/dashboard/assetPanel.spec.ts
@@ -5,7 +5,7 @@ import { EmailAddress, UserId } from '#/services/Backend'
 
 import { PermissionAction } from '#/utilities/permissions'
 
-import { mockAllAndLogin } from './actions'
+import { mockAllAndLogin, TEXT } from './actions'
 
 /** Find an asset panel. */
 function locateAssetPanel(page: Page) {
@@ -87,4 +87,25 @@ test('Asset Panel documentation view', ({ page }) =>
       await expect(assetPanel.getByTestId('asset-panel-tab-panel-docs')).toBeVisible()
       await expect(assetPanel.getByTestId('asset-docs-content')).toBeVisible()
       await expect(assetPanel.getByTestId('asset-docs-content')).toHaveText(/Project Goal/)
+      await expect(assetPanel.getByText(TEXT.arbitraryFetchImageError)).not.toBeVisible()
     }))
+
+test('Assets Panel docs images', ({ page }) => {
+  return mockAllAndLogin({
+    page,
+    setupAPI: (api) => {
+      api.addProject({})
+    },
+  })
+    .do(() => {})
+    .driveTable.clickRow(0)
+    .toggleDocsAssetPanel()
+    .withAssetPanel(async (assetPanel) => {
+      await expect(assetPanel.getByTestId('asset-docs-content')).toBeVisible()
+
+      for (const image of await assetPanel.getByRole('img').all()) {
+        await expect(image).toBeVisible()
+        await expect(image).toHaveJSProperty('complete', true)
+      }
+    })
+})
diff --git a/app/gui/integration-test/dashboard/mock/example.png b/app/gui/integration-test/dashboard/mock/example.png
new file mode 100644
index 000000000000..b4d6d8b3cb9c
Binary files /dev/null and b/app/gui/integration-test/dashboard/mock/example.png differ
diff --git a/app/gui/src/dashboard/App.tsx b/app/gui/src/dashboard/App.tsx
index 5f208d1e93b3..46293fc1f2b4 100644
--- a/app/gui/src/dashboard/App.tsx
+++ b/app/gui/src/dashboard/App.tsx
@@ -97,6 +97,8 @@ import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
 
 import { useInitAuthService } from '#/authentication/service'
 import { InvitedToOrganizationModal } from '#/modals/InvitedToOrganizationModal'
+import { useMutation } from '@tanstack/react-query'
+import { useOffline } from './hooks/offlineHooks'
 
 // ============================
 // === Global configuration ===
@@ -214,6 +216,9 @@ export default function App(props: AppProps) {
     },
   })
 
+  const { isOffline } = useOffline()
+  const { getText } = textProvider.useText()
+
   const queryClient = props.queryClient
 
   // Force all queries to be stale
@@ -235,6 +240,24 @@ export default function App(props: AppProps) {
     refetchInterval: 2 * 60 * 1000,
   })
 
+  const { mutate: executeBackgroundUpdate } = useMutation({
+    mutationKey: ['refetch-queries', { isOffline }],
+    scope: { id: 'refetch-queries' },
+    mutationFn: () => queryClient.refetchQueries({ type: 'all' }),
+    networkMode: 'online',
+    onError: () => {
+      toastify.toast.error(getText('refetchQueriesError'), {
+        position: 'bottom-right',
+      })
+    },
+  })
+
+  React.useEffect(() => {
+    if (!isOffline) {
+      executeBackgroundUpdate()
+    }
+  }, [executeBackgroundUpdate, isOffline])
+
   // Both `BackendProvider` and `InputBindingsProvider` depend on `LocalStorageProvider`.
   // Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
   // will redirect the user between the login/register pages and the dashboard.
diff --git a/app/gui/src/dashboard/assets/offline_filled.svg b/app/gui/src/dashboard/assets/offline_filled.svg
new file mode 100644
index 000000000000..a85d8b336489
--- /dev/null
+++ b/app/gui/src/dashboard/assets/offline_filled.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.1022 17.8595C22.6681 17.0492 23 16.0634 23 15C23 12.5603 21.2527 10.5287 18.9412 10.0884C18.4945 6.65314 15.5571 4 12 4C10.9039 4 9.86684 4.25189 8.94348 4.70081L22.1022 17.8595Z" fill="black"/>
+<path d="M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L5.99188 7.40609C5.84592 7.64966 5.71429 7.90293 5.5982 8.16473C2.96039 8.79641 1 11.1685 1 13.9999C1 17.3136 3.68629 19.9999 7 19.9999H18C18.1874 19.9999 18.3726 19.9895 18.5551 19.9693L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L19.6152 18.2009L19.6058 18.1914L7.99385 6.57951L7.98433 6.57012L3.70711 2.29289Z" fill="black"/>
+</svg>
+ 
\ No newline at end of file
diff --git a/app/gui/src/dashboard/assets/offline_outline.svg b/app/gui/src/dashboard/assets/offline_outline.svg
new file mode 100644
index 000000000000..da5fe69221db
--- /dev/null
+++ b/app/gui/src/dashboard/assets/offline_outline.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7807 5.12397C11.1744 5.0427 11.5822 5 12 5C15.3137 5 18 7.68629 18 11C20.2091 11 22 12.7909 22 15C22 15.4069 21.9392 15.7996 21.8263 16.1696M18.8987 18.8987L7.28675 7.28675C6.8743 7.80955 6.54697 8.40264 6.32568 9.04508C3.88316 9.37436 2 11.4673 2 14C2 16.7614 4.23858 19 7 19H18C18.309 19 18.6098 18.965 18.8987 18.8987ZM18.8987 18.8987L21 21L3 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/FormError.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/components/FormError.tsx
index 17e4e259f76b..9d3bbd006c26 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/FormError.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/FormError.tsx
@@ -3,6 +3,7 @@
  *
  * Form error component.
  */
+import Offline from '#/assets/offline_filled.svg'
 import { Alert, Text, type AlertProps } from '#/components/AriaComponents'
 import { useFormError, type UseFormErrorProps } from './useFormError'
 
@@ -11,7 +12,7 @@ export interface FormErrorProps extends Omit<AlertProps, 'children'>, UseFormErr
 
 /** Form error component. */
 export function FormError(props: FormErrorProps) {
-  const { size = 'large', variant = 'error', rounded = 'large', ...alertProps } = props
+  const { size = 'large', variant = 'error', rounded = 'xxlarge', ...alertProps } = props
 
   const errors = useFormError(props)
 
@@ -24,9 +25,10 @@ export function FormError(props: FormErrorProps) {
       {errors.map((error) => {
         const testId = `form-submit-${error.type}`
         const finalVariant = error.type === 'offline' ? 'outline' : variant
+        const icon = error.type === 'offline' ? Offline : null
 
         return (
-          <Alert size={size} variant={finalVariant} rounded={rounded} {...alertProps}>
+          <Alert size={size} variant={finalVariant} rounded={rounded} icon={icon} {...alertProps}>
             <Text variant="body" truncate="3" color="primary" testId={testId}>
               {error.message}
             </Text>
diff --git a/app/gui/src/dashboard/components/ErrorBoundary.tsx b/app/gui/src/dashboard/components/ErrorBoundary.tsx
index ee5dc324d4dc..71b71194f997 100644
--- a/app/gui/src/dashboard/components/ErrorBoundary.tsx
+++ b/app/gui/src/dashboard/components/ErrorBoundary.tsx
@@ -1,4 +1,5 @@
 /** @file Catches errors in child components. */
+import Offline from '#/assets/offline_filled.svg'
 import * as React from 'react'
 
 import * as sentry from '@sentry/react'
@@ -7,8 +8,6 @@ import * as errorBoundary from 'react-error-boundary'
 
 import * as detect from 'enso-common/src/detect'
 
-import * as offlineHooks from '#/hooks/offlineHooks'
-
 import * as textProvider from '#/providers/TextProvider'
 
 import * as ariaComponents from '#/components/AriaComponents'
@@ -16,6 +15,8 @@ import * as result from '#/components/Result'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import * as errorUtils from '#/utilities/error'
+import { OfflineError } from '#/utilities/HttpClient'
+import SvgMask from './SvgMask'
 
 // =====================
 // === ErrorBoundary ===
@@ -38,7 +39,9 @@ export interface ErrorBoundaryProps
       >
     > {
   /** Called before the fallback is shown. */
-  readonly onBeforeFallbackShown?: (args: OnBeforeFallbackShownArgs) => void
+  readonly onBeforeFallbackShown?: (
+    args: OnBeforeFallbackShownArgs,
+  ) => React.ReactNode | null | undefined
   readonly title?: string
   readonly subtitle?: string
 }
@@ -53,7 +56,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
     FallbackComponent = ErrorDisplay,
     onError = () => {},
     onReset = () => {},
-    onBeforeFallbackShown = () => {},
+    onBeforeFallbackShown = () => null,
     title,
     subtitle,
     ...rest
@@ -63,15 +66,19 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
     <reactQuery.QueryErrorResetBoundary>
       {({ reset }) => (
         <errorBoundary.ErrorBoundary
-          FallbackComponent={(fallbackProps) => (
-            <FallbackComponent
-              {...fallbackProps}
-              onBeforeFallbackShown={onBeforeFallbackShown}
-              resetQueries={reset}
-              title={title}
-              subtitle={subtitle}
-            />
-          )}
+          FallbackComponent={(fallbackProps) => {
+            const displayMessage = errorUtils.extractDisplayMessage(fallbackProps.error)
+
+            return (
+              <FallbackComponent
+                {...fallbackProps}
+                onBeforeFallbackShown={onBeforeFallbackShown}
+                resetQueries={reset}
+                title={title}
+                subtitle={subtitle ?? displayMessage ?? null}
+              />
+            )
+          }}
           onError={(error, info) => {
             sentry.captureException(error, { extra: { info } })
             onError(error, info)
@@ -90,39 +97,52 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
 /** Props for a {@link ErrorDisplay}. */
 export interface ErrorDisplayProps extends errorBoundary.FallbackProps {
   readonly status?: result.ResultProps['status']
-  readonly onBeforeFallbackShown?: (args: OnBeforeFallbackShownArgs) => void
+  readonly onBeforeFallbackShown?: (args: OnBeforeFallbackShownArgs) => React.ReactNode | undefined
   readonly resetQueries?: () => void
-  readonly title?: string | undefined
-  readonly subtitle?: string | undefined
+  readonly title?: string | null | undefined
+  readonly subtitle?: string | null | undefined
   readonly error: unknown
 }
 
 /** Default fallback component to show when there is an error. */
 export function ErrorDisplay(props: ErrorDisplayProps): React.JSX.Element {
   const { getText } = textProvider.useText()
-  const { isOffline } = offlineHooks.useOffline()
 
   const {
     error,
     resetErrorBoundary,
-    title = getText('somethingWentWrong'),
-    subtitle = isOffline ? getText('offlineErrorMessage') : getText('arbitraryErrorSubtitle'),
-    status = isOffline ? 'info' : 'error',
+    title,
+    subtitle,
+    status,
     onBeforeFallbackShown,
     resetQueries = () => {},
   } = props
 
+  const isOfflineError = error instanceof OfflineError
+
   const message = errorUtils.getMessageOrToString(error)
   const stack = errorUtils.tryGetStack(error)
 
-  onBeforeFallbackShown?.({ error, resetErrorBoundary, resetQueries })
+  const render = onBeforeFallbackShown?.({ error, resetErrorBoundary, resetQueries })
 
   const onReset = useEventCallback(() => {
     resetErrorBoundary()
   })
 
-  return (
-    <result.Result className="h-full" status={status} title={title} subtitle={subtitle}>
+  const finalTitle = title ?? getText('somethingWentWrong')
+  const finalSubtitle =
+    subtitle ??
+    (isOfflineError ? getText('offlineErrorMessage') : getText('arbitraryErrorSubtitle'))
+  const finalStatus =
+    status ?? (isOfflineError ? <SvgMask src={Offline} className="aspect-square w-6" /> : 'error')
+
+  const defaultRender = (
+    <result.Result
+      className="h-full"
+      status={finalStatus}
+      title={finalTitle}
+      subtitle={finalSubtitle}
+    >
       <ariaComponents.ButtonGroup align="center">
         <ariaComponents.Button
           variant="submit"
@@ -165,6 +185,8 @@ export function ErrorDisplay(props: ErrorDisplayProps): React.JSX.Element {
       )}
     </result.Result>
   )
+
+  return <>{render ?? defaultRender}</>
 }
 
 export { useErrorBoundary, withErrorBoundary } from 'react-error-boundary'
diff --git a/app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx b/app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx
index 96970d66f50e..1531ff5e6974 100644
--- a/app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx
+++ b/app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx
@@ -1,10 +1,12 @@
-/** @file A WYSIWYG editor using Lexical.js. */
+/** @file A Markdown viewer component. */
 
+import { useLogger } from '#/providers/LoggerProvider'
+import { useText } from '#/providers/TextProvider'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import type { RendererObject } from 'marked'
 import { marked } from 'marked'
-import { useMemo } from 'react'
-import { BUTTON_STYLES, TEXT_STYLE, type TestIdProps } from '../AriaComponents'
+import { type TestIdProps } from '../AriaComponents'
+import { DEFAULT_RENDERER } from './defaultRenderer'
 
 /** Props for a {@link MarkdownViewer}. */
 export interface MarkdownViewerProps extends TestIdProps {
@@ -14,67 +16,43 @@ export interface MarkdownViewerProps extends TestIdProps {
   readonly renderer?: RendererObject
 }
 
-const defaultRenderer: RendererObject = {
-  /** The renderer for headings. */
-  heading({ depth, tokens }) {
-    return `<h${depth} class="${TEXT_STYLE({ variant: 'h1', className: 'my-2' })}">${this.parser.parseInline(tokens)}</h${depth}>`
-  },
-  /** The renderer for paragraphs. */
-  paragraph({ tokens }) {
-    return `<p class="${TEXT_STYLE({ variant: 'body', className: 'my-1' })}">${this.parser.parseInline(tokens)}</p>`
-  },
-  /** The renderer for list items. */
-  listitem({ tokens }) {
-    return `<li class="${TEXT_STYLE({ variant: 'body' })}">${this.parser.parseInline(tokens)}</li>`
-  },
-  /** The renderer for lists. */
-  list({ items }) {
-    return `<ul class="my-1 list-disc pl-3">${items.map((item) => this.listitem(item)).join('\n')}</ul>`
-  },
-  /** The renderer for links. */
-  link({ href, tokens }) {
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="${BUTTON_STYLES({ variant: 'link' }).base()}">${this.parser.parseInline(tokens)}</a>`
-  },
-  /** The renderer for images. */
-  image({ href, title }) {
-    return `<img src="${href}" alt="${title}" class="my-1 h-auto max-w-full" />`
-  },
-  /** The renderer for code. */
-  code({ text }) {
-    return `<code class="block my-1 p-2 bg-primary/5 rounded-lg max-w-full overflow-auto max-h-48" >
-      <pre class="${TEXT_STYLE({ variant: 'body-sm' })}">${text}</pre>
-    </code>`
-  },
-  /** The renderer for blockquotes. */
-  blockquote({ tokens }) {
-    return `<blockquote class="${'relative my-1 pl-2 before:bg-primary/20 before:absolute before:left-0 before:top-0 before:h-full before:w-[1.5px] before:rounded-full'}">${this.parser.parse(tokens)}</blockquote>`
-  },
-}
-
 /**
  * Markdown viewer component.
  * Parses markdown passed in as a `text` prop into HTML and displays it.
  */
 export function MarkdownViewer(props: MarkdownViewerProps) {
-  const { text, imgUrlResolver, renderer = defaultRenderer, testId } = props
+  const { text, imgUrlResolver, renderer = {}, testId } = props
 
-  const markedInstance = useMemo(
-    () => marked.use({ renderer: Object.assign({}, defaultRenderer, renderer), async: true }),
-    [renderer],
-  )
+  const { getText } = useText()
+  const logger = useLogger()
+
+  const markedInstance = marked.use({ renderer: Object.assign({}, DEFAULT_RENDERER, renderer) })
 
   const { data: markdownToHtml } = useSuspenseQuery({
-    queryKey: ['markdownToHtml', { text }],
-    queryFn: () =>
-      markedInstance.parse(text, {
+    queryKey: ['markdownToHtml', { text, imgUrlResolver, markedInstance }] as const,
+    queryFn: ({ queryKey: [, args] }) =>
+      args.markedInstance.parse(args.text, {
         async: true,
         walkTokens: async (token) => {
           if (token.type === 'image' && 'href' in token && typeof token.href === 'string') {
-            token.href = await imgUrlResolver(token.href)
+            const href = token.href
+
+            token.raw = href
+            token.href = await args
+              .imgUrlResolver(href)
+              .then((url) => {
+                return url
+              })
+              .catch((error) => {
+                logger.error(error)
+                return null
+              })
+            token.text = getText('arbitraryFetchImageError')
           }
         },
       }),
   })
+
   return (
     <div
       className="select-text"
diff --git a/app/gui/src/dashboard/components/MarkdownViewer/defaultRenderer.ts b/app/gui/src/dashboard/components/MarkdownViewer/defaultRenderer.ts
new file mode 100644
index 000000000000..e9b609d45c7d
--- /dev/null
+++ b/app/gui/src/dashboard/components/MarkdownViewer/defaultRenderer.ts
@@ -0,0 +1,46 @@
+/** @file The default renderer for Markdown. */
+import type { RendererObject } from 'marked'
+import { BUTTON_STYLES, TEXT_STYLE } from '../AriaComponents'
+
+/** The default renderer for Markdown. */
+export const DEFAULT_RENDERER: Readonly<RendererObject> = {
+  /** The renderer for headings. */
+  heading({ depth, tokens }) {
+    const variant = depth === 1 ? 'h1' : 'subtitle'
+    return `<h${depth} class="${TEXT_STYLE({ variant: variant, className: 'my-2' })}">${this.parser.parseInline(tokens)}</h${depth}>`
+  },
+  /** The renderer for paragraphs. */
+  paragraph({ tokens }) {
+    return `<p class="${TEXT_STYLE({ variant: 'body', className: 'my-1' })}">${this.parser.parseInline(tokens)}</p>`
+  },
+  /** The renderer for list items. */
+  listitem({ tokens }) {
+    return `<li class="${TEXT_STYLE({ variant: 'body' })}">${this.parser.parseInline(tokens)}</li>`
+  },
+  /** The renderer for lists. */
+  list({ items }) {
+    return `<ul class="my-1 list-disc pl-3">${items.map((item) => this.listitem(item)).join('\n')}</ul>`
+  },
+  /** The renderer for links. */
+  link({ href, tokens }) {
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="${BUTTON_STYLES({ variant: 'link' }).base()}">${this.parser.parseInline(tokens)}</a>`
+  },
+  /** The renderer for images. */
+  image({ href, title, raw }) {
+    const alt = title ?? ''
+
+    return `
+      <img src="${href}" alt="${alt}" class="my-1 h-auto max-w-full" data-raw=${raw}>
+    `
+  },
+  /** The renderer for code. */
+  code({ text }) {
+    return `<code class="block my-1 p-2 bg-primary/5 rounded-lg max-w-full overflow-auto max-h-48" >
+      <pre class="${TEXT_STYLE({ variant: 'body-sm' })}">${text}</pre>
+    </code>`
+  },
+  /** The renderer for blockquotes. */
+  blockquote({ tokens }) {
+    return `<blockquote class="${'relative my-1 pl-2 before:bg-primary/20 before:absolute before:left-0 before:top-0 before:h-full before:w-[1.5px] before:rounded-full'}">${this.parser.parse(tokens)}</blockquote>`
+  },
+}
diff --git a/app/gui/src/dashboard/components/OfflineNotificationManager.tsx b/app/gui/src/dashboard/components/OfflineNotificationManager.tsx
index 5776459e34cc..3f2b4377aca6 100644
--- a/app/gui/src/dashboard/components/OfflineNotificationManager.tsx
+++ b/app/gui/src/dashboard/components/OfflineNotificationManager.tsx
@@ -32,21 +32,24 @@ export function OfflineNotificationManager(props: OfflineNotificationManagerProp
   const toastId = 'offline'
   const { getText } = textProvider.useText()
 
-  offlineHooks.useOfflineChange((isOffline) => {
-    toast.toast.dismiss(toastId)
-
-    if (isOffline) {
-      toast.toast.info(getText('offlineToastMessage'), {
-        toastId,
-        hideProgressBar: true,
-      })
-    } else {
-      toast.toast.info(getText('onlineToastMessage'), {
-        toastId,
-        hideProgressBar: true,
-      })
-    }
-  })
+  offlineHooks.useOfflineChange(
+    (isOffline) => {
+      toast.toast.dismiss(toastId)
+
+      if (isOffline) {
+        toast.toast.info(getText('offlineToastMessage'), {
+          toastId,
+          hideProgressBar: true,
+        })
+      } else {
+        toast.toast.info(getText('onlineToastMessage'), {
+          toastId,
+          hideProgressBar: true,
+        })
+      }
+    },
+    { triggerImmediate: false },
+  )
 
   return (
     <OfflineNotificationManagerContext.Provider value={{ isNested: true, toastId }}>
diff --git a/app/gui/src/dashboard/components/Suspense.tsx b/app/gui/src/dashboard/components/Suspense.tsx
index bf4342246a34..fd833df7fdce 100644
--- a/app/gui/src/dashboard/components/Suspense.tsx
+++ b/app/gui/src/dashboard/components/Suspense.tsx
@@ -7,26 +7,13 @@
 
 import * as React from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
-
-import * as debounceValue from '#/hooks/debounceValueHooks'
-import * as offlineHooks from '#/hooks/offlineHooks'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as result from '#/components/Result'
-
 import * as loader from './Loader'
 
 /** Props for {@link Suspense} component. */
 export interface SuspenseProps extends React.SuspenseProps {
   readonly loaderProps?: loader.LoaderProps
-  readonly offlineFallback?: React.ReactNode
-  readonly offlineFallbackProps?: result.ResultProps
 }
 
-const OFFLINE_FETCHING_TOGGLE_DELAY_MS = 250
-
 /**
  * Suspense is a component that allows you to wrap a part of your application that might suspend,
  * showing a fallback to the user while waiting for the data to load.
@@ -35,19 +22,10 @@ const OFFLINE_FETCHING_TOGGLE_DELAY_MS = 250
  * And handles offline scenarios.
  */
 export function Suspense(props: SuspenseProps) {
-  const { children, loaderProps, fallback, offlineFallback, offlineFallbackProps } = props
+  const { children, loaderProps, fallback } = props
 
   return (
-    <React.Suspense
-      fallback={
-        <Loader
-          {...loaderProps}
-          fallback={fallback}
-          offlineFallback={offlineFallback}
-          offlineFallbackProps={offlineFallbackProps}
-        />
-      }
-    >
+    <React.Suspense fallback={<Loader {...loaderProps} fallback={fallback} />}>
       {children}
     </React.Suspense>
   )
@@ -58,8 +36,6 @@ export function Suspense(props: SuspenseProps) {
  */
 interface LoaderProps extends loader.LoaderProps {
   readonly fallback?: SuspenseProps['fallback']
-  readonly offlineFallback?: SuspenseProps['offlineFallback']
-  readonly offlineFallbackProps?: SuspenseProps['offlineFallbackProps']
 }
 
 /**
@@ -74,35 +50,7 @@ interface LoaderProps extends loader.LoaderProps {
  * we want to know if there are ongoing requests once React renders the fallback in suspense
  */
 export function Loader(props: LoaderProps) {
-  const { fallback, offlineFallbackProps, offlineFallback, ...loaderProps } = props
-
-  const { getText } = textProvider.useText()
-
-  const { isOffline } = offlineHooks.useOffline()
-
-  const paused = reactQuery.useIsFetching({ fetchStatus: 'paused' })
-
-  const fetching = reactQuery.useIsFetching({
-    predicate: (query) =>
-      query.state.fetchStatus === 'fetching' ||
-      query.state.status === 'pending' ||
-      query.state.status === 'success',
-  })
-
-  // we use small debounce to avoid flickering when query is resolved,
-  // but fallback is still showing
-  const shouldDisplayOfflineMessage = debounceValue.useDebounceValue(
-    isOffline && paused >= 0 && fetching === 0,
-    OFFLINE_FETCHING_TOGGLE_DELAY_MS,
-  )
+  const { fallback, ...loaderProps } = props
 
-  if (shouldDisplayOfflineMessage) {
-    return (
-      offlineFallback ?? (
-        <result.Result status="info" title={getText('offlineTitle')} {...offlineFallbackProps} />
-      )
-    )
-  } else {
-    return fallback ?? <loader.Loader minHeight="h24" size="medium" {...loaderProps} />
-  }
+  return fallback ?? <loader.Loader minHeight="h24" size="medium" {...loaderProps} />
 }
diff --git a/app/gui/src/dashboard/hooks/backendHooks.tsx b/app/gui/src/dashboard/hooks/backendHooks.tsx
index 3b2cd55f775a..bdc7b72c8831 100644
--- a/app/gui/src/dashboard/hooks/backendHooks.tsx
+++ b/app/gui/src/dashboard/hooks/backendHooks.tsx
@@ -344,8 +344,6 @@ export function listDirectoryQueryOptions(options: ListDirectoryQueryOptions) {
         }
       }
     },
-
-    meta: { persist: false },
   })
 }
 
diff --git a/app/gui/src/dashboard/hooks/offlineHooks.ts b/app/gui/src/dashboard/hooks/offlineHooks.ts
index 0c2d509f57cd..c20f0c075891 100644
--- a/app/gui/src/dashboard/hooks/offlineHooks.ts
+++ b/app/gui/src/dashboard/hooks/offlineHooks.ts
@@ -10,7 +10,7 @@ export function useOffline() {
   const isOnline = React.useSyncExternalStore(
     reactQuery.onlineManager.subscribe.bind(reactQuery.onlineManager),
     () => reactQuery.onlineManager.isOnline(),
-    () => navigator.onLine,
+    () => false,
   )
 
   return { isOffline: !isOnline }
diff --git a/app/gui/src/dashboard/layouts/Drive.tsx b/app/gui/src/dashboard/layouts/Drive.tsx
index 87a10d4bb2ec..e8310d846cf7 100644
--- a/app/gui/src/dashboard/layouts/Drive.tsx
+++ b/app/gui/src/dashboard/layouts/Drive.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react'
 
 import * as appUtils from '#/appUtils'
+import Offline from '#/assets/offline_filled.svg'
 
 import * as offlineHooks from '#/hooks/offlineHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
@@ -25,6 +26,7 @@ import * as ariaComponents from '#/components/AriaComponents'
 import * as result from '#/components/Result'
 
 import { ErrorBoundary, useErrorBoundary } from '#/components/ErrorBoundary'
+import SvgMask from '#/components/SvgMask'
 import { listDirectoryQueryOptions } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useTargetDirectory } from '#/providers/DriveProvider'
@@ -32,6 +34,7 @@ import { DirectoryDoesNotExistError, Plan } from '#/services/Backend'
 import AssetQuery from '#/utilities/AssetQuery'
 import * as download from '#/utilities/download'
 import * as github from '#/utilities/github'
+import { OfflineError } from '#/utilities/HttpClient'
 import { tryFindSelfPermission } from '#/utilities/permissions'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
@@ -58,7 +61,7 @@ const CATEGORIES_TO_DISPLAY_START_MODAL = ['cloud', 'local', 'local-directory']
 
 /** Contains directory path and directory contents (projects, folders, secrets and files). */
 function Drive(props: DriveProps) {
-  const { category, resetCategory } = props
+  const { category, resetCategory, setCategory } = props
 
   const { isOffline } = offlineHooks.useOffline()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
@@ -122,6 +125,18 @@ function Drive(props: DriveProps) {
               resetQueries()
               resetErrorBoundary()
             }
+
+            if (error instanceof OfflineError) {
+              return (
+                <OfflineMessage
+                  supportLocalBackend={supportLocalBackend}
+                  setCategory={(nextCategory) => {
+                    setCategory(nextCategory)
+                    resetErrorBoundary()
+                  }}
+                />
+              )
+            }
           }}
         >
           <Suspense>
@@ -152,7 +167,6 @@ function DriveAssetsView(props: DriveProps) {
   const { user } = authProvider.useFullUserSession()
   const localBackend = backendProvider.useLocalBackend()
   const backend = backendProvider.useBackend(category)
-  const { getText } = textProvider.useText()
   const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
 
   const [query, setQuery] = React.useState(() => AssetQuery.fromString(''))
@@ -263,26 +277,7 @@ function DriveAssetsView(props: DriveProps) {
           </div>
 
           {status === 'offline' ?
-            <result.Result
-              status="info"
-              className="my-12"
-              centered="horizontal"
-              title={getText('cloudUnavailableOffline')}
-              subtitle={`${getText('cloudUnavailableOfflineDescription')} ${supportLocalBackend ? getText('cloudUnavailableOfflineDescriptionOfferLocal') : ''}`}
-            >
-              {supportLocalBackend && (
-                <ariaComponents.Button
-                  variant="primary"
-                  size="small"
-                  className="mx-auto"
-                  onPress={() => {
-                    setCategory({ type: 'local' })
-                  }}
-                >
-                  {getText('switchToLocal')}
-                </ariaComponents.Button>
-              )}
-            </result.Result>
+            <OfflineMessage supportLocalBackend={supportLocalBackend} setCategory={setCategory} />
           : <AssetsTable
               assetManagementApiRef={assetsManagementApiRef}
               hidden={hidden}
@@ -300,4 +295,44 @@ function DriveAssetsView(props: DriveProps) {
   )
 }
 
+/**
+ * Props for {@link OfflineMessage}
+ */
+interface OfflineMessageProps {
+  readonly supportLocalBackend: boolean
+  readonly setCategory: (category: categoryModule.Category) => void
+}
+
+/**
+ * Offline message component.
+ * Displays info that the ctegory selected in unavailable
+ * in offline mode
+ */
+function OfflineMessage(props: OfflineMessageProps) {
+  const { supportLocalBackend, setCategory } = props
+  const { getText } = textProvider.useText()
+
+  return (
+    <result.Result
+      status={<SvgMask src={Offline} className="aspect-square h-6" />}
+      className="my-12"
+      centered="horizontal"
+      title={getText('cloudUnavailableOffline')}
+      subtitle={`${getText('cloudUnavailableOfflineDescription')} ${supportLocalBackend ? getText('cloudUnavailableOfflineDescriptionOfferLocal') : ''}`}
+    >
+      {supportLocalBackend && (
+        <ariaComponents.Button
+          variant="primary"
+          className="mx-auto"
+          onPress={() => {
+            setCategory({ type: 'local' })
+          }}
+        >
+          {getText('switchToLocal')}
+        </ariaComponents.Button>
+      )}
+    </result.Result>
+  )
+}
+
 export default React.memo(Drive)
diff --git a/app/gui/src/dashboard/layouts/Settings/SetupTwoFaForm.tsx b/app/gui/src/dashboard/layouts/Settings/SetupTwoFaForm.tsx
index 231afd5471ec..acea41d0e431 100644
--- a/app/gui/src/dashboard/layouts/Settings/SetupTwoFaForm.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/SetupTwoFaForm.tsx
@@ -125,48 +125,47 @@ export function SetupTwoFaForm() {
         </div>
       </div>
     )
-  } else {
-    return (
-      <Form
-        schema={(z) =>
-          z.object({
-            enabled: z.boolean(),
-            display: z.string(),
-            /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
-            otp: z.string().min(6).max(6),
+  }
+  return (
+    <Form
+      schema={(z) =>
+        z.object({
+          enabled: z.boolean(),
+          display: z.string(),
+          /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+          otp: z.string().min(6).max(6),
+        })
+      }
+      defaultValues={{ enabled: false, display: 'QR' }}
+      onSubmit={async ({ enabled, otp }) => {
+        if (enabled) {
+          return cognito.verifyTotpToken(otp).then((res) => {
+            if (res.ok) {
+              return updateMFAPreferenceMutation.mutateAsync('TOTP')
+            } else {
+              throw res.val
+            }
           })
         }
-        defaultValues={{ enabled: false, display: 'QR' }}
-        onSubmit={async ({ enabled, otp }) => {
-          if (enabled) {
-            return cognito.verifyTotpToken(otp).then((res) => {
-              if (res.ok) {
-                return updateMFAPreferenceMutation.mutateAsync('TOTP')
-              } else {
-                throw res.val
-              }
-            })
-          }
-        }}
-      >
-        <>
-          <Switch
-            name="enabled"
-            description={getText('enable2FADescription')}
-            label={getText('enable2FA')}
-          />
+      }}
+    >
+      <>
+        <Switch
+          name="enabled"
+          description={getText('enable2FADescription')}
+          label={getText('enable2FA')}
+        />
 
-          <ErrorBoundary>
-            <Suspense>
-              <Form.FieldValue name="enabled">
-                {(enabled) => enabled === true && <TwoFa />}
-              </Form.FieldValue>
-            </Suspense>
-          </ErrorBoundary>
-        </>
-      </Form>
-    )
-  }
+        <ErrorBoundary>
+          <Suspense>
+            <Form.FieldValue name="enabled">
+              {(enabled) => enabled === true && <TwoFa />}
+            </Form.FieldValue>
+          </Suspense>
+        </ErrorBoundary>
+      </>
+    </Form>
+  )
 }
 
 /** Two Factor Authentication Setup Form. */
diff --git a/app/gui/src/dashboard/layouts/UserBar.tsx b/app/gui/src/dashboard/layouts/UserBar.tsx
index 1fc32609c4ae..a41424396597 100644
--- a/app/gui/src/dashboard/layouts/UserBar.tsx
+++ b/app/gui/src/dashboard/layouts/UserBar.tsx
@@ -2,7 +2,8 @@
 import { SUBSCRIBE_PATH } from '#/appUtils'
 import ChatIcon from '#/assets/chat.svg'
 import DefaultUserIcon from '#/assets/default_user.svg'
-import { Button, DialogTrigger } from '#/components/AriaComponents'
+import Offline from '#/assets/offline_filled.svg'
+import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import { PaywallDialogButton } from '#/components/Paywall'
 import FocusArea from '#/components/styled/FocusArea'
 import { usePaywall } from '#/hooks/billing'
@@ -11,6 +12,9 @@ import InviteUsersModal from '#/modals/InviteUsersModal'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useText } from '#/providers/TextProvider'
 import { Plan } from '#/services/Backend'
+import { AnimatePresence, motion } from 'framer-motion'
+import SvgMask from '../components/SvgMask'
+import { useOffline } from '../hooks/offlineHooks'
 
 /** Whether the chat button should be visible. Temporarily disabled. */
 const SHOULD_SHOW_CHAT_BUTTON: boolean = false
@@ -35,6 +39,7 @@ export default function UserBar(props: UserBarProps) {
   const { user } = useFullUserSession()
   const { getText } = useText()
   const { isFeatureUnderPaywall } = usePaywall({ plan: user.plan })
+  const { isOffline } = useOffline()
 
   const shouldShowUpgradeButton =
     user.isOrganizationAdmin && user.plan !== Plan.enterprise && user.plan !== Plan.team
@@ -55,6 +60,24 @@ export default function UserBar(props: UserBarProps) {
             className="flex h-[46px] shrink-0 cursor-default items-center gap-user-bar pl-icons-x pr-3"
             {...innerProps}
           >
+            <AnimatePresence initial={false}>
+              {isOffline && (
+                <motion.div
+                  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                  initial={{ opacity: 0, x: 12 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                  exit={{ opacity: 0, x: 12 }}
+                  className="mr-2 flex items-center gap-2"
+                >
+                  <SvgMask src={Offline} className="aspect-square w-4 flex-none" />
+                  <Text tooltip={getText('offlineToastMessage')} tooltipDisplay="always">
+                    {getText('youAreOffline')}
+                  </Text>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
             {SHOULD_SHOW_CHAT_BUTTON && (
               <Button
                 variant="icon"
@@ -114,6 +137,7 @@ export default function UserBar(props: UserBarProps) {
               />
               <UserMenu goToSettingsPage={goToSettingsPage} onSignOut={onSignOut} />
             </DialogTrigger>
+
             {/* Required for shortcuts to work. */}
             <div className="hidden">
               <UserMenu hidden goToSettingsPage={goToSettingsPage} onSignOut={onSignOut} />
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
index 7bc3af09d08c..1bc3d64b4525 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
@@ -20,7 +20,7 @@ import {
   Separator,
   Text,
 } from '#/components/AriaComponents'
-import { ErrorDisplay } from '#/components/ErrorBoundary'
+import { ErrorBoundary, ErrorDisplay } from '#/components/ErrorBoundary'
 import { Suspense } from '#/components/Suspense'
 
 import type { Plan } from '#/services/Backend'
@@ -139,84 +139,86 @@ export function PlanSelectorDialog(props: PlanSelectorDialogProps) {
 
         <Separator orientation="horizontal" className="my-4" />
 
-        <div className="grid grid-cols-[1fr]">
-          <div className="flex flex-col gap-4">
-            <div>
-              <Text variant="subtitle">{getText('adjustYourPlan')}</Text>
-
-              <Form form={form} className="mt-1">
-                <Selector
-                  form={form}
-                  name="period"
-                  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-                  items={[12, 36]}
-                  label={getText('billingPeriod')}
-                >
-                  {(item) => billingPeriodToString(getText, item)}
-                </Selector>
-
-                <Input
-                  isRequired
-                  readOnly={maxSeats === 1}
-                  form={form}
-                  name="seats"
-                  type="number"
-                  inputMode="decimal"
-                  size="small"
-                  min="1"
-                  label={getText('seats')}
-                  description={getText(`${plan}PlanSeatsDescription`, maxSeats)}
-                />
-
-                <Checkbox.Group
-                  form={form}
-                  name="agree"
-                  description={
-                    <>
-                      {getText('slsaLicenseAgreementDescription1')}{' '}
-                      <Button
-                        variant="link"
-                        href="https://www.ensoanalytics.com/SLSA"
-                        target="_blank"
-                      >
-                        {getText('SLSA')}
-                      </Button>
-                      {getText('slsaLicenseAgreementDescription2')}
-                    </>
-                  }
-                >
-                  <Checkbox value="agree">{getText('licenseAgreementCheckbox')}</Checkbox>
-                </Checkbox.Group>
-              </Form>
-            </div>
-          </div>
-
-          <div>
-            <div className="my-4">
-              <Summary
-                plan={plan}
-                seats={seats}
-                period={period}
-                formatter={formatter}
-                isInvalid={form.formState.errors.seats != null}
-              />
-            </div>
-
-            <Suspense>
-              <StripeProvider>
-                {({ stripe, elements }) => (
-                  <AddPaymentMethodForm
-                    form={form}
-                    elements={elements}
-                    stripeInstance={stripe}
-                    submitText={isTrialing ? getText('startTrial') : getText('subscribeSubmit')}
-                    onSubmit={(paymentMethodId) => onSubmit?.(paymentMethodId, seats, period)}
+        <ErrorBoundary>
+          <Suspense>
+            <div className="grid grid-cols-[1fr]">
+              <div className="flex flex-col gap-4">
+                <div>
+                  <Text variant="subtitle">{getText('adjustYourPlan')}</Text>
+
+                  <Form form={form} className="mt-1">
+                    <Selector
+                      form={form}
+                      name="period"
+                      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                      items={[12, 36]}
+                      label={getText('billingPeriod')}
+                    >
+                      {(item) => billingPeriodToString(getText, item)}
+                    </Selector>
+
+                    <Input
+                      isRequired
+                      readOnly={maxSeats === 1}
+                      form={form}
+                      name="seats"
+                      type="number"
+                      inputMode="decimal"
+                      size="small"
+                      min="1"
+                      label={getText('seats')}
+                      description={getText(`${plan}PlanSeatsDescription`, maxSeats)}
+                    />
+
+                    <Checkbox.Group
+                      form={form}
+                      name="agree"
+                      description={
+                        <>
+                          {getText('slsaLicenseAgreementDescription1')}{' '}
+                          <Button
+                            variant="link"
+                            href="https://www.ensoanalytics.com/SLSA"
+                            target="_blank"
+                          >
+                            {getText('SLSA')}
+                          </Button>
+                          {getText('slsaLicenseAgreementDescription2')}
+                        </>
+                      }
+                    >
+                      <Checkbox value="agree">{getText('licenseAgreementCheckbox')}</Checkbox>
+                    </Checkbox.Group>
+                  </Form>
+                </div>
+              </div>
+
+              <div>
+                <div className="my-4">
+                  <Summary
+                    plan={plan}
+                    seats={seats}
+                    period={period}
+                    formatter={formatter}
+                    isInvalid={form.formState.errors.seats != null}
                   />
-                )}
-              </StripeProvider>
-            </Suspense>
-          </div>
-        </div>
+                </div>
+
+                <StripeProvider>
+                  {({ stripe, elements }) => (
+                    <AddPaymentMethodForm
+                      form={form}
+                      elements={elements}
+                      stripeInstance={stripe}
+                      submitText={isTrialing ? getText('startTrial') : getText('subscribeSubmit')}
+                      onSubmit={(paymentMethodId) => onSubmit?.(paymentMethodId, seats, period)}
+                    />
+                  )}
+                </StripeProvider>
+              </div>
+            </div>
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </Dialog>
   )
diff --git a/app/gui/src/dashboard/modules/payments/components/StripeProvider.tsx b/app/gui/src/dashboard/modules/payments/components/StripeProvider.tsx
index b13dceac4314..e0abfddefacc 100644
--- a/app/gui/src/dashboard/modules/payments/components/StripeProvider.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/StripeProvider.tsx
@@ -6,6 +6,7 @@
 
 import * as React from 'react'
 
+import { OfflineError } from '#/utilities/error'
 import * as stripeReact from '@stripe/react-stripe-js'
 import type * as stripeTypes from '@stripe/stripe-js'
 import * as stripe from '@stripe/stripe-js/pure'
@@ -23,27 +24,37 @@ export interface StripeProviderRenderProps {
   readonly elements: stripeTypes.StripeElements
 }
 
-export const stripeQuery = reactQuery.queryOptions({
-  queryKey: ['stripe', process.env.ENSO_CLOUD_STRIPE_KEY] as const,
-  staleTime: Infinity,
-  gcTime: Infinity,
-  meta: { persist: false },
-  queryFn: async ({ queryKey }) => {
-    const stripeKey = queryKey[1]
-
-    if (stripeKey == null) {
-      throw new Error('Stripe key not found')
-    } else {
+/**
+ * Creates options for quering stripe instance
+ */
+export function stripeQueryOptions() {
+  return reactQuery.queryOptions({
+    queryKey: ['stripe', process.env.ENSO_CLOUD_STRIPE_KEY] as const,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    meta: { persist: false },
+    queryFn: async ({ queryKey }) => {
+      const isOnline = reactQuery.onlineManager.isOnline()
+      const stripeKey = queryKey[1]
+
+      if (stripeKey == null) {
+        throw new Error('Stripe key not found')
+      }
+
+      if (!isOnline) {
+        throw new OfflineError()
+      }
+
       return stripe.loadStripe(stripeKey).then((maybeStripeInstance) => {
         if (maybeStripeInstance == null) {
           throw new Error('Stripe instance not found')
-        } else {
-          return maybeStripeInstance
         }
+
+        return maybeStripeInstance
       })
-    }
-  },
-})
+    },
+  })
+}
 
 /** A component that provides a Stripe context. */
 export function StripeProvider(props: StripeProviderProps) {
@@ -90,5 +101,5 @@ export function useStripe() {
  * @returns The Stripe instance.
  */
 export function useStripeLoader() {
-  return reactQuery.useSuspenseQuery(stripeQuery)
+  return reactQuery.useSuspenseQuery(stripeQueryOptions())
 }
diff --git a/app/gui/src/dashboard/providers/SessionProvider.tsx b/app/gui/src/dashboard/providers/SessionProvider.tsx
index edb984da3d92..a3931a1c33e7 100644
--- a/app/gui/src/dashboard/providers/SessionProvider.tsx
+++ b/app/gui/src/dashboard/providers/SessionProvider.tsx
@@ -15,6 +15,7 @@ import * as errorModule from '#/utilities/error'
 
 import type * as cognito from '#/authentication/cognito'
 import * as listen from '#/authentication/listen'
+import { useOffline } from '#/hooks/offlineHooks'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 
 // ======================
@@ -60,13 +61,7 @@ export interface SessionProviderProps {
 function createSessionQuery(userSession: (() => Promise<cognito.UserSession | null>) | null) {
   return reactQuery.queryOptions({
     queryKey: ['userSession'],
-    queryFn: async () => {
-      const session = (await userSession?.().catch(() => null)) ?? null
-      return session
-    },
-    refetchOnWindowFocus: 'always',
-    refetchOnMount: 'always',
-    refetchOnReconnect: 'always',
+    queryFn: () => userSession?.().catch(() => null) ?? null,
   })
 }
 
@@ -188,6 +183,8 @@ const SIX_HOURS_MS = 21_600_000
 function SessionRefresher(props: SessionRefresherProps) {
   const { refreshUserSession, session } = props
 
+  const { isOffline } = useOffline()
+
   reactQuery.useQuery({
     queryKey: ['refreshUserSession', { refreshToken: session.refreshToken }] as const,
     queryFn: () => refreshUserSession(),
@@ -199,6 +196,7 @@ function SessionRefresher(props: SessionRefresherProps) {
     refetchOnWindowFocus: 'always',
     refetchOnReconnect: 'always',
     refetchOnMount: 'always',
+    enabled: !isOffline,
     refetchInterval: () => {
       const expireAt = session.expireAt
 
diff --git a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
index 7869349cf630..6e4157c57da6 100644
--- a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
+++ b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
@@ -99,12 +99,14 @@ describe('SessionProvider', () => {
       </Suspense>,
     )
 
+    expect(refreshUserSession).not.toBeCalled()
+    expect(userSession).toBeCalledTimes(2)
+
     await waitFor(() => {
       expect(refreshUserSession).toBeCalledTimes(1)
       expect(screen.getByText(/Hello/)).toBeInTheDocument()
 
-      // 2 initial calls(fetching session and refreshing session), 1 mutation call, 1 re-fetch call
-      expect(userSession).toBeCalledTimes(4)
+      expect(userSession).toBeCalledTimes(3)
     })
   })
 
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index 0d4a634e92cd..464530dc5a77 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -1269,14 +1269,15 @@ export default class RemoteBackend extends Backend {
     projectId: backend.ProjectId,
     relativePath: string,
   ): Promise<string> {
-    const response = await this.get<string>(
+    const response = await this.get<Blob>(
       remoteBackendPaths.getProjectAssetPath(projectId, relativePath),
     )
 
     if (!responseIsSuccessful(response)) {
-      return Promise.reject(new Error('Not implemented.'))
+      return await this.throw(response, 'resolveProjectAssetPathBackendError')
     } else {
-      return await response.text()
+      const blob = await response.blob()
+      return URL.createObjectURL(blob)
     }
   }
 
diff --git a/app/gui/src/dashboard/utilities/HttpClient.ts b/app/gui/src/dashboard/utilities/HttpClient.ts
index cf6eb2b23140..12978a037a95 100644
--- a/app/gui/src/dashboard/utilities/HttpClient.ts
+++ b/app/gui/src/dashboard/utilities/HttpClient.ts
@@ -1,5 +1,5 @@
 /** @file HTTP client definition that includes default HTTP headers for all sent requests. */
-import isNetworkError from 'is-network-error'
+import { NetworkError, OfflineError, isNetworkError } from './error'
 
 // =================
 // === Constants ===
@@ -7,6 +7,7 @@ import isNetworkError from 'is-network-error'
 
 export const FETCH_SUCCESS_EVENT_NAME = 'fetch-success'
 export const FETCH_ERROR_EVENT_NAME = 'fetch-error'
+export const OFFLINE_EVENT_NAME = 'offline'
 
 // =============
 // === Types ===
@@ -138,6 +139,7 @@ export default class HttpClient {
   private async request<T = void>(options: HttpClientRequestOptions) {
     const headers = new Headers(this.defaultHeaders)
     let payload = options.payload
+
     if (payload != null) {
       const contentType = options.mimetype ?? 'application/json'
       headers.set('Content-Type', contentType)
@@ -149,6 +151,10 @@ export default class HttpClient {
       payload = await payload.arrayBuffer()
     }
 
+    if (!navigator.onLine) {
+      return Promise.reject(new OfflineError('User is offline'))
+    }
+
     try {
       // This is an UNSAFE type assertion, however this is a HTTP client
       // and should only be used to query APIs with known response types.
@@ -162,10 +168,22 @@ export default class HttpClient {
       document.dispatchEvent(new Event(FETCH_SUCCESS_EVENT_NAME))
       return response
     } catch (error) {
+      // Even though the condition might seem always falsy,
+      // offline mode might happen during the request
+      // and this case need to be handled
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!navigator.onLine) {
+        document.dispatchEvent(new Event(OFFLINE_EVENT_NAME))
+        throw new OfflineError('User is offline', { cause: error })
+      }
+
       if (isNetworkError(error)) {
         document.dispatchEvent(new Event(FETCH_ERROR_EVENT_NAME))
+        throw new NetworkError(error.message, { cause: error })
       }
       throw error
     }
   }
 }
+
+export { NetworkError, OfflineError }
diff --git a/app/gui/src/dashboard/utilities/error.ts b/app/gui/src/dashboard/utilities/error.ts
index 1f9ee12384b2..758be2a8567a 100644
--- a/app/gui/src/dashboard/utilities/error.ts
+++ b/app/gui/src/dashboard/utilities/error.ts
@@ -1,7 +1,10 @@
 /** @file Contains useful error types common across the module. */
+import { ErrorWithDisplayMessage } from 'enso-common/src/utilities/errors'
 import isNetworkErrorLib from 'is-network-error'
 import type * as toastify from 'react-toastify'
 
+export * from 'enso-common/src/utilities/errors'
+
 // =====================
 // === tryGetMessage ===
 // =====================
@@ -89,6 +92,18 @@ export function getMessageOrToString<T>(error: MustNotBeKnown<T>) {
   return tryGetMessage(error) ?? String(error)
 }
 
+/**
+ * Extracts the display message from an error.
+ * This is the message that should be displayed to the user.
+ */
+export function extractDisplayMessage(error: MustNotBeKnown<unknown>) {
+  if (error instanceof ErrorWithDisplayMessage) {
+    return error.displayMessage
+  } else {
+    return null
+  }
+}
+
 /** Return a toastify option object that renders an error message. */
 export function render(f: (message: string) => string): toastify.UpdateOptions {
   return { render: ({ data }) => f(getMessageOrToString(data)) }
@@ -173,7 +188,7 @@ export function isJSError(error: unknown): boolean {
  * Checks if the given error is a network error.
  * Wraps the `is-network-error` library to add additional network errors to the check.
  */
-export function isNetworkError(error: unknown): boolean {
+export function isNetworkError(error: unknown): error is TypeError {
   const customNetworkErrors = new Set([
     // aws amplify network error
     'Network error',
diff --git a/app/ide-desktop/client/src/projectManager.ts b/app/ide-desktop/client/src/projectManager.ts
index 6b83e09e8b8b..00801d1cdb02 100644
--- a/app/ide-desktop/client/src/projectManager.ts
+++ b/app/ide-desktop/client/src/projectManager.ts
@@ -103,7 +103,7 @@ export async function version(args: config.Args) {
 }
 
 /**
- * Handle requests to the `enso-project` protocol.
+ * Handle requests to the `enso://` protocol.
  *
  * The protocol is used to fetch project assets from the backend.
  * If a given path is not inside a project, the request is rejected with a 403 error.