diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js
index 3296e9c64949..bb1b07453527 100644
--- a/app/ide-desktop/eslint.config.js
+++ b/app/ide-desktop/eslint.config.js
@@ -240,8 +240,8 @@ const RESTRICTED_SYNTAXES = [
 export default [
     eslintJs.configs.recommended,
     {
-        // Playwright build cache.
-        ignores: ['**/.cache/**', '**/playwright-report', 'dist'],
+        // Playwright build cache and Vite build directory.
+        ignores: ['**/.cache/**', '**/playwright-report', '**/dist'],
     },
     {
         settings: {
@@ -334,7 +334,7 @@ export default [
                     format: ['camelCase', 'PascalCase'],
                 },
                 {
-                    selector: ['parameter', 'property', 'method'],
+                    selector: ['parameter', 'method'],
                     format: ['camelCase'],
                 },
                 {
@@ -343,6 +343,14 @@ export default [
                     format: ['camelCase'],
                     leadingUnderscore: 'require',
                 },
+                {
+                    selector: ['property'],
+                    format: ['camelCase'],
+                    filter: {
+                        regex: '^(?:data-testid)$',
+                        match: false,
+                    },
+                },
             ],
             '@typescript-eslint/no-confusing-void-expression': 'error',
             '@typescript-eslint/no-empty-interface': 'off',
diff --git a/app/ide-desktop/lib/client/src/index.ts b/app/ide-desktop/lib/client/src/index.ts
index d5a0e68499a4..14c02dd19791 100644
--- a/app/ide-desktop/lib/client/src/index.ts
+++ b/app/ide-desktop/lib/client/src/index.ts
@@ -332,6 +332,32 @@ class App {
                 }
                 const window = new electron.BrowserWindow(windowPreferences)
                 window.setMenuBarVisibility(false)
+                const oldMenu = electron.Menu.getApplicationMenu()
+                if (oldMenu != null) {
+                    const items = oldMenu.items.map(item => {
+                        if (item.role !== 'help') {
+                            return item
+                        } else {
+                            // `click` is a property that is intentionally removed from this
+                            // destructured object, in order to satisfy TypeScript.
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { click, ...passthrough } = item
+                            return new electron.MenuItem({
+                                ...passthrough,
+                                submenu: electron.Menu.buildFromTemplate([
+                                    new electron.MenuItem({
+                                        label: `About ${common.PRODUCT_NAME}`,
+                                        click: () => {
+                                            window.webContents.send(ipc.Channel.showAboutModal)
+                                        },
+                                    }),
+                                ]),
+                            })
+                        }
+                    })
+                    const newMenu = electron.Menu.buildFromTemplate(items)
+                    electron.Menu.setApplicationMenu(newMenu)
+                }
 
                 if (this.args.groups.debug.options.devTools.value) {
                     window.webContents.openDevTools()
diff --git a/app/ide-desktop/lib/client/src/ipc.ts b/app/ide-desktop/lib/client/src/ipc.ts
index 1fcd1584434a..d799783a9b69 100644
--- a/app/ide-desktop/lib/client/src/ipc.ts
+++ b/app/ide-desktop/lib/client/src/ipc.ts
@@ -27,4 +27,5 @@ export enum Channel {
     goForward = 'go-forward',
     /** Channel for selecting files and directories using the system file browser. */
     openFileBrowser = 'open-file-browser',
+    showAboutModal = 'show-about-modal',
 }
diff --git a/app/ide-desktop/lib/client/src/preload.ts b/app/ide-desktop/lib/client/src/preload.ts
index 7b4f01b2fe51..675a4af965fa 100644
--- a/app/ide-desktop/lib/client/src/preload.ts
+++ b/app/ide-desktop/lib/client/src/preload.ts
@@ -5,6 +5,7 @@
 
 import * as electron from 'electron'
 
+import * as debug from 'debug'
 import * as ipc from 'ipc'
 
 // =================
@@ -23,6 +24,10 @@ const FILE_BROWSER_API_KEY = 'fileBrowserApi'
 
 const NAVIGATION_API_KEY = 'navigationApi'
 
+const MENU_API_KEY = 'menuApi'
+
+const VERSION_INFO_KEY = 'versionInfo'
+
 // =============================
 // === importProjectFromPath ===
 // =============================
@@ -172,3 +177,27 @@ const FILE_BROWSER_API = {
         electron.ipcRenderer.invoke(ipc.Channel.openFileBrowser, kind),
 }
 electron.contextBridge.exposeInMainWorld(FILE_BROWSER_API_KEY, FILE_BROWSER_API)
+
+// ====================
+// === Version info ===
+// ====================
+
+electron.contextBridge.exposeInMainWorld(VERSION_INFO_KEY, debug.VERSION_INFO)
+
+// ================
+// === Menu API ===
+// ================
+
+let showAboutModalHandler: (() => void) | null = null
+
+electron.ipcRenderer.on(ipc.Channel.showAboutModal, () => {
+    showAboutModalHandler?.()
+})
+
+const MENU_API = {
+    setShowAboutModalHandler: (callback: () => void) => {
+        showAboutModalHandler = callback
+    },
+}
+
+electron.contextBridge.exposeInMainWorld(MENU_API_KEY, MENU_API)
diff --git a/app/ide-desktop/lib/common/src/appConfig.js b/app/ide-desktop/lib/common/src/appConfig.js
index 679c936ca6b1..0b194464470e 100644
--- a/app/ide-desktop/lib/common/src/appConfig.js
+++ b/app/ide-desktop/lib/common/src/appConfig.js
@@ -3,6 +3,8 @@ import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import * as url from 'node:url'
 
+import BUILD_INFO from '../../../../../build.json' assert { type: 'json' }
+
 // ===============================
 // === readEnvironmentFromFile ===
 // ===============================
@@ -11,7 +13,9 @@ import * as url from 'node:url'
  * environment variable. Reads from `.env` if the variable is `production`, blank or absent.
  * DOES NOT override existing environment variables if the variable is absent. */
 export async function readEnvironmentFromFile() {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const environment = process.env.ENSO_CLOUD_ENVIRONMENT ?? null
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const isProduction = environment == null || environment === '' || environment === 'production'
     const fileName = isProduction ? '.env' : `.${environment}.env`
     const filePath = path.join(url.fileURLToPath(new URL('../../..', import.meta.url)), fileName)
@@ -38,6 +42,7 @@ export async function readEnvironmentFromFile() {
         if (isProduction) {
             entries = entries.filter(kv => {
                 const [k] = kv
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 return process.env[k] == null
             })
         }
@@ -45,6 +50,10 @@ export async function readEnvironmentFromFile() {
         if (!isProduction || entries.length > 0) {
             Object.assign(process.env, variables)
         }
+        // @ts-expect-error This is the only file where `process.env` should be written to.
+        process.env.ENSO_CLOUD_DASHBOARD_VERSION ??= BUILD_INFO.version
+        // @ts-expect-error This is the only file where `process.env` should be written to.
+        process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH ??= BUILD_INFO.commit
     } catch (error) {
         if (missingKeys.length !== 0) {
             console.warn('Could not load `.env` file; disabling cloud backend.')
@@ -100,6 +109,12 @@ export function getDefines(serverPort = 8080) {
         'process.env.ENSO_CLOUD_GOOGLE_ANALYTICS_TAG': stringify(
             process.env.ENSO_CLOUD_GOOGLE_ANALYTICS_TAG
         ),
+        'process.env.ENSO_CLOUD_DASHBOARD_VERSION': stringify(
+            process.env.ENSO_CLOUD_DASHBOARD_VERSION
+        ),
+        'process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH': stringify(
+            process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH
+        ),
         /* eslint-enable @typescript-eslint/naming-convention */
     }
 }
@@ -119,12 +134,15 @@ const DUMMY_DEFINES = {
     'process.env.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID': '',
     'process.env.ENSO_CLOUD_COGNITO_DOMAIN': '',
     'process.env.ENSO_CLOUD_COGNITO_REGION': '',
+    'process.env.ENSO_CLOUD_DASHBOARD_VERSION': '0.0.1-testing',
+    'process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH': 'abcdef0',
     /* eslint-enable @typescript-eslint/naming-convention */
 }
 
 /** Load test environment variables, useful for when the Cloud backend is mocked or unnecessary. */
 export function loadTestEnvironmentVariables() {
     for (const [k, v] of Object.entries(DUMMY_DEFINES)) {
+        // @ts-expect-error This is the only file where `process.env` should be written to.
         process.env[k.replace(/^process[.]env[.]/, '')] = v
     }
 }
diff --git a/app/ide-desktop/lib/common/src/buildUtils.js b/app/ide-desktop/lib/common/src/buildUtils.js
index 8f11a12e7e31..7657aabb1798 100644
--- a/app/ide-desktop/lib/common/src/buildUtils.js
+++ b/app/ide-desktop/lib/common/src/buildUtils.js
@@ -20,6 +20,7 @@ export const INDENT_SIZE = 4
  * @throws {Error} If the environment variable is not set. */
 export function requireEnv(name) {
     const value = process.env[name]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (value == null) {
         throw new Error(`Could not find the environment variable '${name}'.`)
     } else {
diff --git a/app/ide-desktop/lib/common/src/detect.ts b/app/ide-desktop/lib/common/src/detect.ts
index a2f97df1459e..f626f0684ca7 100644
--- a/app/ide-desktop/lib/common/src/detect.ts
+++ b/app/ide-desktop/lib/common/src/detect.ts
@@ -5,6 +5,7 @@
 // ===================
 
 /** Return whether the current build is in development mode */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 export const IS_DEV_MODE = process.env.NODE_ENV === 'development'
 
 // ================
diff --git a/app/ide-desktop/lib/common/tsconfig.json b/app/ide-desktop/lib/common/tsconfig.json
index 0a921bf939ad..3a319d3b29f6 100644
--- a/app/ide-desktop/lib/common/tsconfig.json
+++ b/app/ide-desktop/lib/common/tsconfig.json
@@ -5,5 +5,5 @@
     "checkJs": false,
     "skipLibCheck": false
   },
-  "include": ["./src/"]
+  "include": ["./src/", "../types/"]
 }
diff --git a/app/ide-desktop/lib/dashboard/src/App.tsx b/app/ide-desktop/lib/dashboard/src/App.tsx
index 5b0c5d93325e..03cbe4b32b79 100644
--- a/app/ide-desktop/lib/dashboard/src/App.tsx
+++ b/app/ide-desktop/lib/dashboard/src/App.tsx
@@ -52,9 +52,10 @@ import InputBindingsProvider from '#/providers/InputBindingsProvider'
 import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
 import LoggerProvider from '#/providers/LoggerProvider'
 import type * as loggerProvider from '#/providers/LoggerProvider'
-import ModalProvider from '#/providers/ModalProvider'
+import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
 import SessionProvider from '#/providers/SessionProvider'
+import SupportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
 import EnterOfflineMode from '#/pages/authentication/EnterOfflineMode'
@@ -74,6 +75,7 @@ import * as errorBoundary from '#/components/ErrorBoundary'
 import * as loader from '#/components/Loader'
 import * as rootComponent from '#/components/Root'
 
+import AboutModal from '#/modals/AboutModal'
 import * as setOrganizationNameModal from '#/modals/SetOrganizationNameModal'
 
 import type Backend from '#/services/Backend'
@@ -197,7 +199,9 @@ export default function App(props: AppProps) {
       />
       <Router basename={getMainPageUrl().pathname}>
         <LocalStorageProvider>
-          <AppRouter {...props} projectManagerRootDirectory={rootDirectoryPath} />
+          <ModalProvider>
+            <AppRouter {...props} projectManagerRootDirectory={rootDirectoryPath} />
+          </ModalProvider>
         </LocalStorageProvider>
       </Router>
     </reactQuery.QueryClientProvider>
@@ -226,6 +230,7 @@ function AppRouter(props: AppRouterProps) {
   // eslint-disable-next-line no-restricted-properties
   const navigate = router.useNavigate()
   const { localStorage } = localStorageProvider.useLocalStorage()
+  const { setModal } = modalProvider.useSetModal()
   const navigator2D = navigator2DProvider.useNavigator2D()
   if (detect.IS_DEV_MODE) {
     // @ts-expect-error This is used exclusively for debugging.
@@ -320,6 +325,14 @@ function AppRouter(props: AppRouterProps) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         null!
 
+  React.useEffect(() => {
+    if ('menuApi' in window) {
+      window.menuApi.setShowAboutModalHandler(() => {
+        setModal(<AboutModal />)
+      })
+    }
+  }, [/* should never change */ setModal])
+
   React.useEffect(() => {
     const onKeyDown = navigator2D.onKeyDown.bind(navigator2D)
     document.addEventListener('keydown', onKeyDown)
@@ -438,8 +451,12 @@ function AppRouter(props: AppRouterProps) {
     </router.Routes>
   )
   let result = routes
+  result = (
+    <SupportsLocalBackendProvider supportsLocalBackend={supportsLocalBackend}>
+      {result}
+    </SupportsLocalBackendProvider>
+  )
   result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
-  result = <ModalProvider>{result}</ModalProvider>
   result = (
     <AuthProvider
       shouldStartInOfflineMode={isAuthenticationDisabled}
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
index 4fcd53a80fd0..af1532d6e209 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -1,8 +1,5 @@
-/**
- * @file
- * A dialog is an overlay shown above other content in an application.
- * Can be used to display alerts, confirmations, or other content.
- */
+/** @file A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content. */
 import * as React from 'react'
 
 import clsx from 'clsx'
@@ -16,33 +13,38 @@ import * as portal from '#/components/Portal'
 
 import type * as types from './types'
 
-const MODAL_CLASSES =
-  'fixed top-0 left-0 right-0 bottom-0 bg-black/[15%] flex items-center justify-center text-center'
+// =================
+// === Constants ===
+// =================
+
+const MODAL_CLASSES = 'fixed z-1 inset bg-dim flex items-center justify-center text-center'
 const DIALOG_CLASSES =
-  'relative flex flex-col overflow-hidden rounded-xl text-left align-middle shadow-2xl bg-clip-padding border border-black/10 before:absolute before:inset before:h-full before:w-full before:rounded-xl before:bg-selected-frame before:backdrop-blur-default'
+  'relative flex flex-col overflow-hidden text-xs rounded-default text-left align-middle text-primary before:absolute before:inset before:rounded-default before:bg-selected-frame before:backdrop-blur-default'
 
-const MODAL_CLASSES_BY_TYPE = {
-  modal: 'p-4',
+const MODAL_CLASSES_BY_TYPE: Readonly<Record<types.DialogType, string>> = {
+  modal: '',
   popover: '',
   fullscreen: 'p-4',
-} satisfies Record<types.DialogType, string>
+}
 
-const DIALOG_CLASSES_BY_TYPE = {
+const DIALOG_CLASSES_BY_TYPE: Readonly<Record<types.DialogType, string>> = {
   modal: 'w-full max-w-md min-h-[100px] max-h-[90vh]',
   popover: 'rounded-lg',
   fullscreen: 'w-full h-full max-w-full max-h-full bg-clip-border',
-} satisfies Record<types.DialogType, string>
+}
+
+// ==============
+// === Dialog ===
+// ==============
 
-/**
- * A dialog is an overlay shown above other content in an application.
- * Can be used to display alerts, confirmations, or other content.
- */
+/** A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content. */
 export function Dialog(props: types.DialogProps) {
   const {
     children,
     title,
     type = 'modal',
-    isDismissible = true,
+    isDismissable = true,
     isKeyboardDismissDisabled = false,
     hideCloseButton = false,
     className,
@@ -50,21 +52,36 @@ export function Dialog(props: types.DialogProps) {
     modalProps,
     ...ariaDialogProps
   } = props
+  const cleanupRef = React.useRef(() => {})
 
   const root = portal.useStrictPortalContext()
 
   return (
     <aria.Modal
-      className={tailwindMerge.twMerge(MODAL_CLASSES, [MODAL_CLASSES_BY_TYPE[type]])}
-      isDismissable={isDismissible}
+      className={tailwindMerge.twMerge(MODAL_CLASSES, MODAL_CLASSES_BY_TYPE[type])}
+      isDismissable={isDismissable}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
       UNSTABLE_portalContainer={root.current}
       onOpenChange={onOpenChange}
       {...modalProps}
     >
       <aria.Dialog
-        className={tailwindMerge.twMerge(DIALOG_CLASSES, [DIALOG_CLASSES_BY_TYPE[type]], className)}
+        className={tailwindMerge.twMerge(DIALOG_CLASSES, DIALOG_CLASSES_BY_TYPE[type], className)}
         {...ariaDialogProps}
+        ref={element => {
+          cleanupRef.current()
+          if (element == null) {
+            cleanupRef.current = () => {}
+          } else {
+            const onClick = (event: Event) => {
+              event.stopPropagation()
+            }
+            element.addEventListener('click', onClick)
+            cleanupRef.current = () => {
+              element.removeEventListener('click', onClick)
+            }
+          }
+        }}
       >
         {opts => (
           <>
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
index 9bd9cb9c542d..7b6f2693832e 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
@@ -10,7 +10,7 @@ export interface DialogProps extends aria.DialogProps {
    * @default 'modal' */
   readonly type?: DialogType
   readonly title?: string
-  readonly isDismissible?: boolean
+  readonly isDismissable?: boolean
   readonly hideCloseButton?: boolean
   readonly onOpenChange?: (isOpen: boolean) => void
   readonly isKeyboardDismissDisabled?: boolean
diff --git a/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx b/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
index 54dfd321dd14..c6a5019aaeb4 100644
--- a/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
@@ -23,8 +23,6 @@ import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 
 /** Props for an {@link EditableSpan}. */
 export interface EditableSpanProps {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   readonly className?: string
   readonly editable?: boolean
diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index 5755a1e7a811..112848c724f5 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -58,6 +58,7 @@ const ACTION_TO_TEXT_ID: Readonly<Record<inputBindings.DashboardBindingKey, text
   selectAdditionalRange: 'selectAdditionalRangeShortcut',
   goBack: 'goBackShortcut',
   goForward: 'goForwardShortcut',
+  aboutThisApp: 'aboutThisAppShortcut',
 } satisfies { [Key in inputBindings.DashboardBindingKey]: `${Key}Shortcut` }
 
 // =================
diff --git a/app/ide-desktop/lib/dashboard/src/components/Modal.tsx b/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
index 5306c9438ec8..f40dc02b183a 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
@@ -34,8 +34,6 @@ export default function Modal(props: ModalProps) {
     <FocusRoot active={!hidden}>
       {innerProps => (
         <div
-          // The name comes from a third-party API and cannot be changed.
-          // eslint-disable-next-line @typescript-eslint/naming-convention
           {...(!hidden ? { 'data-testid': 'modal-background' } : {})}
           style={style}
           className={`inset z-1 ${centered ? 'size-screen fixed grid place-items-center' : ''} ${
diff --git a/app/ide-desktop/lib/dashboard/src/components/Page.tsx b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
new file mode 100644
index 000000000000..e393475720a0
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
@@ -0,0 +1,71 @@
+/** @file A page. */
+import * as React from 'react'
+
+import * as authProvider from '#/providers/AuthProvider'
+import * as modalProvider from '#/providers/ModalProvider'
+
+import Chat from '#/layouts/Chat'
+import ChatPlaceholder from '#/layouts/ChatPlaceholder'
+import InfoBar from '#/layouts/InfoBar'
+
+import TheModal from '#/components/dashboard/TheModal'
+import Portal from '#/components/Portal'
+
+// ============
+// === Page ===
+// ============
+
+/** Props for a {@link Page}. */
+export interface PageProps extends Readonly<React.PropsWithChildren> {
+  readonly hideInfoBar?: true
+}
+
+/** A page. */
+export default function Page(props: PageProps) {
+  const { hideInfoBar = false, children } = props
+  const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
+  const { unsetModal } = modalProvider.useSetModal()
+  const session = authProvider.useUserSession()
+
+  const doCloseChat = () => {
+    setIsHelpChatOpen(false)
+  }
+
+  React.useEffect(() => {
+    const onClick = () => {
+      if (getSelection()?.type !== 'Range') {
+        unsetModal()
+      }
+    }
+    document.addEventListener('click', onClick)
+    return () => {
+      document.removeEventListener('click', onClick)
+    }
+  }, [/* should never change */ unsetModal])
+
+  return (
+    <>
+      {children}
+      {!hideInfoBar && (
+        <div className="fixed right top z-1 m-top-bar text-xs text-primary transition-all duration-side-panel">
+          <InfoBar isHelpChatOpen={isHelpChatOpen} setIsHelpChatOpen={setIsHelpChatOpen} />
+        </div>
+      )}
+      {/* `session.accessToken` MUST be present in order for the `Chat` component to work. */}
+      {!hideInfoBar && session?.accessToken != null && process.env.ENSO_CLOUD_CHAT_URL != null ? (
+        <Chat
+          isOpen={isHelpChatOpen}
+          doClose={doCloseChat}
+          endpoint={process.env.ENSO_CLOUD_CHAT_URL}
+        />
+      ) : (
+        <ChatPlaceholder hideLoginButtons isOpen={isHelpChatOpen} doClose={doCloseChat} />
+      )}
+      <Portal>
+        <div className="select-none text-xs text-primary">
+          <TheModal />
+        </div>
+      </Portal>
+    </>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/components/Root.tsx b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
index 528eb0ad2627..c1991921fc37 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Root.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
@@ -4,6 +4,10 @@ import * as React from 'react'
 import * as aria from '#/components/aria'
 import * as portal from '#/components/Portal'
 
+// ============
+// === Root ===
+// ============
+
 /** Props for {@link Root}. */
 export interface RootProps extends React.PropsWithChildren {
   readonly rootRef: React.RefObject<HTMLElement>
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
index 9ec6bdf53b57..bf4264e4f18f 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
@@ -16,8 +16,6 @@ import * as backend from '#/services/Backend'
 
 /** Props for a {@link Label}. */
 interface InternalLabelProps extends Readonly<React.PropsWithChildren> {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   /** When true, the button is not faded out even when not hovered. */
   readonly active?: boolean
diff --git a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
index 3ed743a344fe..b2e0e8fa977d 100644
--- a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
+++ b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
@@ -14,6 +14,7 @@ import CopyIcon from 'enso-assets/copy.svg'
 import DataDownloadIcon from 'enso-assets/data_download.svg'
 import DataUploadIcon from 'enso-assets/data_upload.svg'
 import DuplicateIcon from 'enso-assets/duplicate.svg'
+import LogoIcon from 'enso-assets/enso_logo.svg'
 import OpenIcon from 'enso-assets/open.svg'
 import PasteIcon from 'enso-assets/paste.svg'
 import PenIcon from 'enso-assets/pen.svg'
@@ -120,4 +121,10 @@ export const BINDINGS = inputBindings.defineBindings({
     rebindable: true,
     icon: ArrowRightIcon,
   },
+  aboutThisApp: {
+    name: 'About Enso',
+    bindings: ['Mod+/'],
+    rebindable: true,
+    icon: LogoIcon,
+  },
 })
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx b/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
index b9ef552ea7cf..d4598e192f97 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
@@ -18,14 +18,16 @@ import UnstyledButton from '#/components/UnstyledButton'
 
 /** Props for a {@link ChatPlaceholder}. */
 export interface ChatPlaceholderProps {
-  /** This should only be false when the panel is closing. */
+  /** This should only be `true` when in the auth flow. */
+  readonly hideLoginButtons?: true
+  /** This should only be `false` when the panel is closing. */
   readonly isOpen: boolean
   readonly doClose: () => void
 }
 
 /** A placeholder component replacing `Chat` when a user is not logged in. */
 export default function ChatPlaceholder(props: ChatPlaceholderProps) {
-  const { isOpen, doClose } = props
+  const { hideLoginButtons = false, isOpen, doClose } = props
   const { getText } = textProvider.useText()
   const logger = loggerProvider.useLogger()
   const navigate = navigateHooks.useNavigate()
@@ -51,22 +53,26 @@ export default function ChatPlaceholder(props: ChatPlaceholderProps) {
             <div className="px-missing-functionality-text-x">
               {getText('placeholderChatPrompt')}
             </div>
-            <UnstyledButton
-              className="button self-center bg-help text-white"
-              onPress={() => {
-                navigate(appUtils.LOGIN_PATH)
-              }}
-            >
-              {getText('login')}
-            </UnstyledButton>
-            <UnstyledButton
-              className="button self-center bg-help text-white"
-              onPress={() => {
-                navigate(appUtils.REGISTRATION_PATH)
-              }}
-            >
-              {getText('register')}
-            </UnstyledButton>
+            {!hideLoginButtons && (
+              <UnstyledButton
+                className="button self-center bg-help text-white"
+                onPress={() => {
+                  navigate(appUtils.LOGIN_PATH)
+                }}
+              >
+                {getText('login')}
+              </UnstyledButton>
+            )}
+            {!hideLoginButtons && (
+              <UnstyledButton
+                className="button self-center bg-help text-white"
+                onPress={() => {
+                  navigate(appUtils.REGISTRATION_PATH)
+                }}
+              >
+                {getText('register')}
+              </UnstyledButton>
+            )}
           </div>
         </div>
       </div>,
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
new file mode 100644
index 000000000000..d56175b81314
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
@@ -0,0 +1,73 @@
+/** @file A toolbar containing chat and the user menu. */
+import * as React from 'react'
+
+import ChatIcon from 'enso-assets/chat.svg'
+import LogoIcon from 'enso-assets/enso_logo.svg'
+
+import * as modalProvider from '#/providers/ModalProvider'
+import * as textProvider from '#/providers/TextProvider'
+
+import InfoMenu from '#/layouts/InfoMenu'
+
+import Button from '#/components/styled/Button'
+import FocusArea from '#/components/styled/FocusArea'
+import SvgMask from '#/components/SvgMask'
+import UnstyledButton from '#/components/UnstyledButton'
+
+// ===============
+// === InfoBar ===
+// ===============
+
+/** Props for a {@link InfoBar}. */
+export interface InfoBarProps {
+  readonly isHelpChatOpen: boolean
+  readonly setIsHelpChatOpen: (isHelpChatOpen: boolean) => void
+}
+
+/** A toolbar containing chat and the user menu. */
+export default function InfoBar(props: InfoBarProps) {
+  const { isHelpChatOpen, setIsHelpChatOpen } = props
+  const { updateModal } = modalProvider.useSetModal()
+  const { getText } = textProvider.useText()
+
+  return (
+    <FocusArea direction="horizontal">
+      {innerProps => (
+        <div
+          className="pointer-events-auto flex h-row shrink-0 cursor-default items-center gap-user-bar rounded-full bg-frame px-profile-picture backdrop-blur-default"
+          {...innerProps}
+        >
+          {/* FIXME [sb]: https://github.com/enso-org/cloud-v2/issues/1227
+           * Make help chat work even when signed out.
+           * Note that the original class for the `div` above is `pr-profile-picture px-icons-x`. */}
+          {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+          {false && (
+            <Button
+              active={isHelpChatOpen}
+              image={ChatIcon}
+              onPress={() => {
+                setIsHelpChatOpen(!isHelpChatOpen)
+              }}
+            />
+          )}
+          <UnstyledButton
+            className="flex size-profile-picture select-none items-center overflow-clip rounded-full"
+            onPress={() => {
+              updateModal(oldModal => (oldModal?.type === InfoMenu ? null : <InfoMenu />))
+            }}
+          >
+            <SvgMask
+              src={LogoIcon}
+              alt={getText('openInfoMenu')}
+              className="pointer-events-none size-7"
+            />
+          </UnstyledButton>
+          {/* Required for shortcuts to work. */}
+          <div className="hidden">
+            <InfoMenu hidden />
+          </div>
+        </div>
+      )}
+    </FocusArea>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
new file mode 100644
index 000000000000..d1d81e96fd4e
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
@@ -0,0 +1,79 @@
+/** @file A menu containing info about the app. */
+import * as React from 'react'
+
+import LogoIcon from 'enso-assets/enso_logo.svg'
+import * as common from 'enso-common'
+
+import * as modalProvider from '#/providers/ModalProvider'
+import * as textProvider from '#/providers/TextProvider'
+
+import * as aria from '#/components/aria'
+import MenuEntry from '#/components/MenuEntry'
+import Modal from '#/components/Modal'
+import FocusArea from '#/components/styled/FocusArea'
+
+import AboutModal from '#/modals/AboutModal'
+
+// ================
+// === InfoMenu ===
+// ================
+
+/** Props for an {@link InfoMenu}. */
+export interface InfoMenuProps {
+  readonly hidden?: boolean
+}
+
+/** A menu containing info about the app. */
+export default function InfoMenu(props: InfoMenuProps) {
+  const { hidden = false } = props
+  const { setModal } = modalProvider.useSetModal()
+  const { getText } = textProvider.useText()
+  const [initialized, setInitialized] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    // Change the CSS from the initial state to the final state after the first render.
+    // This ensures that the CSS transition triggers.
+    setInitialized(true)
+  }, [])
+
+  return (
+    <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
+      <div
+        {...(!hidden ? { 'data-testid': 'info-menu' } : {})}
+        className={`absolute right-top-bar-margin top-top-bar-margin flex flex-col gap-user-menu rounded-default bg-selected-frame backdrop-blur-default transition-all duration-user-menu ${initialized ? 'w-user-menu p-user-menu' : 'size-row-h p-profile-picture'}`}
+        onClick={event => {
+          event.stopPropagation()
+        }}
+      >
+        <div
+          className={`flex items-center gap-icons overflow-hidden transition-all duration-user-menu ${initialized ? 'px-menu-entry' : ''}`}
+        >
+          <div className="flex size-profile-picture shrink-0 items-center overflow-clip rounded-full">
+            <img src={LogoIcon} className="pointer-events-none size-profile-picture" />
+          </div>
+          <aria.Text className="text">{common.PRODUCT_NAME}</aria.Text>
+        </div>
+        <div
+          className={`grid transition-all duration-user-menu ${initialized ? 'grid-rows-1fr' : 'grid-rows-0fr'}`}
+        >
+          <FocusArea direction="vertical">
+            {innerProps => (
+              <div
+                aria-label={getText('infoMenuLabel')}
+                className="flex flex-col overflow-hidden"
+                {...innerProps}
+              >
+                <MenuEntry
+                  action="aboutThisApp"
+                  doAction={() => {
+                    setModal(<AboutModal />)
+                  }}
+                />
+              </div>
+            )}
+          </FocusArea>
+        </div>
+      </div>
+    </Modal>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
index 98045077eb06..7d6857767519 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
@@ -63,7 +63,7 @@ export default function UserGroupRow(props: UserGroupRowProps) {
       ref={contextMenuRef}
     >
       <aria.Cell className="text rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0">
-        <aria.TooltipTrigger>
+        <ariaComponents.TooltipTrigger>
           <FocusableText
             ref={tooltipTargetRef}
             className="block cursor-unset overflow-hidden text-ellipsis whitespace-nowrap"
@@ -71,7 +71,7 @@ export default function UserGroupRow(props: UserGroupRowProps) {
             {userGroup.groupName}
           </FocusableText>
           {needsTooltip && <ariaComponents.Tooltip>{userGroup.groupName}</ariaComponents.Tooltip>}
-        </aria.TooltipTrigger>
+        </ariaComponents.TooltipTrigger>
       </aria.Cell>
       <aria.Cell className="relative bg-transparent p transparent group-hover-2:opacity-100">
         <UnstyledButton
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupUserRow.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupUserRow.tsx
index 1e833ed3a0fa..3f9ce58f343a 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupUserRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupUserRow.tsx
@@ -68,7 +68,7 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
       ref={contextMenuRef}
     >
       <aria.Cell className="text border-x-2 border-transparent bg-clip-padding rounded-rows-skip-level last:border-r-0">
-        <aria.TooltipTrigger>
+        <ariaComponents.TooltipTrigger>
           <div className="ml-indent-1 flex h-row w-[calc(100%_-_var(--indent-1-size))] cursor-default items-center whitespace-nowrap rounded-full px-cell-x">
             <FocusableText
               ref={tooltipTargetRef}
@@ -78,7 +78,7 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
             </FocusableText>
           </div>
           {needsTooltip && <ariaComponents.Tooltip>{user.name}</ariaComponents.Tooltip>}
-        </aria.TooltipTrigger>
+        </ariaComponents.TooltipTrigger>
       </aria.Cell>
       <aria.Cell className="relative bg-transparent p transparent group-hover-2:opacity-100">
         <UnstyledButton
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
index 5e513a0d3487..d43b648ffb45 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
@@ -79,7 +79,7 @@ export default function UserRow(props: UserRowProps) {
             />
           </aria.FocusRing>
         )}
-        <aria.TooltipTrigger>
+        <ariaComponents.TooltipTrigger>
           <FocusableText
             ref={tooltipTargetRef}
             className="block cursor-unset overflow-hidden text-ellipsis whitespace-nowrap"
@@ -87,7 +87,7 @@ export default function UserRow(props: UserRowProps) {
             {user.name}
           </FocusableText>
           {needsTooltip && <ariaComponents.Tooltip>{user.name}</ariaComponents.Tooltip>}
-        </aria.TooltipTrigger>
+        </ariaComponents.TooltipTrigger>
       </aria.Cell>
       <aria.Cell className="text whitespace-nowrap rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0 group-selected:bg-selected-frame">
         {user.email}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
index 06d1285a3385..470ce35b2f20 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
@@ -85,7 +85,6 @@ export default function TopBar(props: TopBarProps) {
           {supportsCloudBackend && (
             <UserBar
               invisible
-              supportsLocalBackend={supportsLocalBackend}
               page={page}
               setPage={setPage}
               setIsHelpChatOpen={setIsHelpChatOpen}
@@ -108,7 +107,6 @@ export default function TopBar(props: TopBarProps) {
             />
           )}
           <UserBar
-            supportsLocalBackend={supportsLocalBackend}
             page={page}
             setPage={setPage}
             setIsHelpChatOpen={setIsHelpChatOpen}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
index 36eb04801505..2149343dba0a 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
@@ -33,7 +33,6 @@ export interface UserBarProps {
   /** When `true`, the element occupies space in the layout but is not visible.
    * Defaults to `false`. */
   readonly invisible?: boolean
-  readonly supportsLocalBackend: boolean
   readonly page: pageSwitcher.Page
   readonly setPage: (page: pageSwitcher.Page) => void
   readonly setIsHelpChatOpen: (isHelpChatOpen: boolean) => void
@@ -46,7 +45,7 @@ export interface UserBarProps {
 /** A toolbar containing chat and the user menu. */
 export default function UserBar(props: UserBarProps) {
   const { invisible = false, page, setPage, setIsHelpChatOpen } = props
-  const { supportsLocalBackend, projectAsset, setProjectAsset, doRemoveSelf, onSignOut } = props
+  const { projectAsset, setProjectAsset, doRemoveSelf, onSignOut } = props
   const { type: sessionType, user } = authProvider.useNonPartialUserSession()
   const { setModal, updateModal } = modalProvider.useSetModal()
   const { backend } = backendProvider.useBackend()
@@ -130,11 +129,7 @@ export default function UserBar(props: UserBarProps) {
             onPress={() => {
               updateModal(oldModal =>
                 oldModal?.type === UserMenu ? null : (
-                  <UserMenu
-                    setPage={setPage}
-                    supportsLocalBackend={supportsLocalBackend}
-                    onSignOut={onSignOut}
-                  />
+                  <UserMenu setPage={setPage} onSignOut={onSignOut} />
                 )
               )
             }}
@@ -149,12 +144,7 @@ export default function UserBar(props: UserBarProps) {
           </UnstyledButton>
           {/* Required for shortcuts to work. */}
           <div className="hidden">
-            <UserMenu
-              hidden
-              setPage={setPage}
-              supportsLocalBackend={supportsLocalBackend}
-              onSignOut={onSignOut}
-            />
+            <UserMenu hidden setPage={setPage} onSignOut={onSignOut} />
           </div>
         </div>
       )}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index bc3434aa75a5..c3d13ad13220 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -10,6 +10,7 @@ import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
 import * as authProvider from '#/providers/AuthProvider'
 import * as modalProvider from '#/providers/ModalProvider'
+import * as supportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as pageSwitcher from '#/layouts/PageSwitcher'
@@ -19,6 +20,8 @@ import MenuEntry from '#/components/MenuEntry'
 import Modal from '#/components/Modal'
 import FocusArea from '#/components/styled/FocusArea'
 
+import AboutModal from '#/modals/AboutModal'
+
 import * as download from '#/utilities/download'
 import * as github from '#/utilities/github'
 
@@ -31,30 +34,37 @@ export interface UserMenuProps {
   /** If `true`, disables `data-testid` because it will not be visible. */
   readonly hidden?: boolean
   readonly setPage: (page: pageSwitcher.Page) => void
-  readonly supportsLocalBackend: boolean
   readonly onSignOut: () => void
 }
 
 /** Handling the UserMenuItem click event logic and displaying its content. */
 export default function UserMenu(props: UserMenuProps) {
-  const { hidden = false, setPage, supportsLocalBackend, onSignOut } = props
+  const { hidden = false, setPage, onSignOut } = props
   const [initialized, setInitialized] = React.useState(false)
+  const supportsLocalBackend = supportsLocalBackendProvider.useSupportsLocalBackend()
   const navigate = navigateHooks.useNavigate()
   const { signOut } = authProvider.useAuth()
   const { user } = authProvider.useNonPartialUserSession()
-  const { unsetModal } = modalProvider.useSetModal()
+  const { setModal, unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
-  React.useEffect(() => {
-    requestAnimationFrame(setInitialized.bind(null, true))
+  React.useLayoutEffect(() => {
+    setInitialized(true)
   }, [])
 
+  const aboutThisAppMenuEntry = (
+    <MenuEntry
+      action="aboutThisApp"
+      doAction={() => {
+        setModal(<AboutModal />)
+      }}
+    />
+  )
+
   return (
     <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
       <div
-        // The name comes from a third-party API and cannot be changed.
-        // eslint-disable-next-line @typescript-eslint/naming-convention
         {...(!hidden ? { 'data-testid': 'user-menu' } : {})}
         className={`absolute right-top-bar-margin top-top-bar-margin flex flex-col gap-user-menu rounded-default bg-selected-frame backdrop-blur-default transition-all duration-user-menu ${initialized ? 'w-user-menu p-user-menu' : 'size-row-h p-profile-picture'}`}
         onClick={event => {
@@ -105,6 +115,7 @@ export default function UserMenu(props: UserMenuProps) {
                         setPage(pageSwitcher.Page.settings)
                       }}
                     />
+                    {aboutThisAppMenuEntry}
                     <MenuEntry
                       action="signOut"
                       doAction={() => {
@@ -126,6 +137,7 @@ export default function UserMenu(props: UserMenuProps) {
               <aria.Text className="text">{getText('youAreNotLoggedIn')}</aria.Text>
             </div>
             <div className="flex flex-col">
+              {aboutThisAppMenuEntry}
               <MenuEntry
                 action="signIn"
                 doAction={() => {
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
new file mode 100644
index 000000000000..ca463d2f30ca
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -0,0 +1,112 @@
+/** @file Modal for confirming delete of any type of asset. */
+import * as React from 'react'
+
+import LogoIcon from 'enso-assets/enso_logo.svg'
+
+import type * as text from '#/text'
+
+import * as supportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
+import * as textProvider from '#/providers/TextProvider'
+
+import * as aria from '#/components/aria'
+import * as ariaComponents from '#/components/AriaComponents'
+import ButtonRow from '#/components/styled/ButtonRow'
+import SvgMask from '#/components/SvgMask'
+import UnstyledButton from '#/components/UnstyledButton'
+
+// =================
+// === Constants ===
+// =================
+
+/** The duration of time for which the "copy" button indicates that the text has
+ * successfully been copied. */
+const CLEAR_COPIED_STATE_TIMEOUT_MS = 2_500
+
+// ==================
+// === AboutModal ===
+// ==================
+
+/** A modal for confirming the deletion of an asset. */
+export default function AboutModal() {
+  const supportsLocalBackend = supportsLocalBackendProvider.useSupportsLocalBackend()
+  const { getText } = textProvider.useText()
+  const [isCopied, setIsCopied] = React.useState(false)
+  const textContainerRef = React.useRef<HTMLTableSectionElement | null>(null)
+
+  const versionsEntries = [
+    ...(window.versionInfo != null
+      ? ([
+          ['version', window.versionInfo.version],
+          ['build', window.versionInfo.build],
+          ['electronVersion', window.versionInfo.electron],
+          ['chromeVersion', window.versionInfo.chrome],
+        ] as const)
+      : [
+          ...(process.env.ENSO_CLOUD_DASHBOARD_VERSION == null
+            ? []
+            : ([['version', process.env.ENSO_CLOUD_DASHBOARD_VERSION]] as const)),
+          ...(process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH == null
+            ? []
+            : ([['build', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH]] as const)),
+        ]),
+    ['userAgent', navigator.userAgent],
+  ] satisfies readonly (readonly [text.TextId, string])[]
+
+  const doCopy = () => {
+    const lines = versionsEntries.map(entry => {
+      const [textId, version] = entry
+      return `${getText(textId)} ${version}`
+    })
+    void navigator.clipboard.writeText(lines.join('\n'))
+    if (!isCopied) {
+      setIsCopied(true)
+      setTimeout(() => {
+        setIsCopied(false)
+      }, CLEAR_COPIED_STATE_TIMEOUT_MS)
+    }
+  }
+
+  return (
+    <ariaComponents.DialogTrigger defaultOpen>
+      {/* This button is not visible - it is only to provide the button for this `DialogTrigger`. */}
+      <aria.Button className="h-0 w-0" />
+      <ariaComponents.Dialog className="w-[30rem]">
+        <div className="relative flex items-center gap-4">
+          <SvgMask src={LogoIcon} className="size-16 shrink-0" />
+          <div className="flex flex-col gap-3">
+            <div className="text-base font-semibold">
+              {supportsLocalBackend
+                ? getText('appNameDesktopEdition')
+                : getText('appNameCloudEdition')}
+            </div>
+            <table>
+              <tbody ref={textContainerRef}>
+                {versionsEntries.map(entry => {
+                  const [textId, version] = entry
+                  return (
+                    <tr key={textId}>
+                      <td className="whitespace-nowrap pr-cell-x align-text-top">
+                        {getText(textId)}
+                      </td>
+                      <td>{version}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+            <ButtonRow>
+              <UnstyledButton
+                className="button relative bg-invite text-inversed active"
+                onPress={doCopy}
+              >
+                <aria.Text className="text">
+                  {isCopied ? getText('copied') : getText('copy')}
+                </aria.Text>
+              </UnstyledButton>
+            </ButtonRow>
+          </div>
+        </div>
+      </ariaComponents.Dialog>
+    </ariaComponents.DialogTrigger>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/modals/SetOrganizationNameModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/SetOrganizationNameModal.tsx
index a62d8f35b064..648676bc6633 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/SetOrganizationNameModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/SetOrganizationNameModal.tsx
@@ -61,7 +61,7 @@ export function SetOrganizationNameModal() {
     <>
       <ariaComponents.Dialog
         title={getText('setOrgNameTitle')}
-        isDismissible={false}
+        isDismissable={false}
         isKeyboardDismissDisabled
         hideCloseButton
         modalProps={{ isOpen: shouldShowModal }}
diff --git a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
index d345cee6d6cf..d334074e5764 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react'
 
 import * as aria from '#/components/aria'
+import Page from '#/components/Page'
 import FocusArea from '#/components/styled/FocusArea'
 
 // ==========================
@@ -12,8 +13,6 @@ import FocusArea from '#/components/styled/FocusArea'
 
 /** Props for an {@link AuthenticationPage}. */
 export interface AuthenticationPageProps extends Readonly<React.PropsWithChildren> {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   readonly isNotForm?: boolean
   readonly title: string
@@ -33,27 +32,29 @@ export default function AuthenticationPage(props: AuthenticationPageProps) {
     'flex w-full max-w-md flex-col gap-auth rounded-auth bg-selected-frame p-auth shadow-md'
 
   return (
-    <FocusArea direction="vertical">
-      {innerProps => (
-        <div
-          data-testid={props['data-testid']}
-          className="flex min-h-screen flex-col items-center justify-center gap-auth text-sm text-primary"
-          {...innerProps}
-        >
-          {isNotForm ? (
-            <div className={containerClasses}>
-              {heading}
-              {children}
-            </div>
-          ) : (
-            <form className={containerClasses} onSubmit={onSubmit}>
-              {heading}
-              {children}
-            </form>
-          )}
-          {footer}
-        </div>
-      )}
-    </FocusArea>
+    <Page>
+      <FocusArea direction="vertical">
+        {innerProps => (
+          <div
+            data-testid={props['data-testid']}
+            className="flex min-h-screen flex-col items-center justify-center gap-auth text-sm text-primary"
+            {...innerProps}
+          >
+            {isNotForm ? (
+              <div className={containerClasses}>
+                {heading}
+                {children}
+              </div>
+            ) : (
+              <form className={containerClasses} onSubmit={onSubmit}>
+                {heading}
+                {children}
+              </form>
+            )}
+            {footer}
+          </div>
+        )}
+      </FocusArea>
+    </Page>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index 7e2eac44114d..29d9a1e9166a 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -33,8 +33,7 @@ import * as pageSwitcher from '#/layouts/PageSwitcher'
 import Settings from '#/layouts/Settings'
 import TopBar from '#/layouts/TopBar'
 
-import TheModal from '#/components/dashboard/TheModal'
-import Portal from '#/components/Portal'
+import Page from '#/components/Page'
 import type * as spinner from '#/components/Spinner'
 
 import * as backendModule from '#/services/Backend'
@@ -320,18 +319,6 @@ export default function Dashboard(props: DashboardProps) {
     }
   }, [page, /* should never change */ localStorage])
 
-  React.useEffect(() => {
-    const onClick = () => {
-      if (getSelection()?.type !== 'Range') {
-        unsetModal()
-      }
-    }
-    document.addEventListener('click', onClick)
-    return () => {
-      document.removeEventListener('click', onClick)
-    }
-  }, [/* should never change */ unsetModal])
-
   React.useEffect(
     () =>
       inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
@@ -483,7 +470,7 @@ export default function Dashboard(props: DashboardProps) {
   }, [page, setPage])
 
   return (
-    <>
+    <Page hideInfoBar>
       <div
         className={`flex text-xs text-primary ${
           page === pageSwitcher.Page.editor ? 'pointer-events-none cursor-none' : ''
@@ -588,11 +575,6 @@ export default function Dashboard(props: DashboardProps) {
           )}
         </div>
       </div>
-      <Portal>
-        <div className="select-none text-xs text-primary">
-          <TheModal />
-        </div>
-      </Portal>
-    </>
+    </Page>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
index 52da3a129d4b..5c4a9cc0e50c 100644
--- a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
+++ b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
@@ -20,6 +20,7 @@ import * as gtagHooks from '#/hooks/gtagHooks'
 import * as backendProvider from '#/providers/BackendProvider'
 import * as localStorageProvider from '#/providers/LocalStorageProvider'
 import * as loggerProvider from '#/providers/LoggerProvider'
+import * as modalProvider from '#/providers/ModalProvider'
 import * as sessionProvider from '#/providers/SessionProvider'
 import * as textProvider from '#/providers/TextProvider'
 
@@ -174,6 +175,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   const { setBackendWithoutSavingType } = backendProvider.useSetBackend()
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { getText } = textProvider.useText()
+  const { unsetModal } = modalProvider.useSetModal()
   // This must not be `hooks.useNavigate` as `goOffline` would be inaccessible,
   // and the function call would error.
   // eslint-disable-next-line no-restricted-properties
@@ -615,6 +617,8 @@ export default function AuthProvider(props: AuthProviderProps) {
       setInitialized(false)
       sentry.setUser(null)
       setUserSession(null)
+      // If the User Menu is still visible, it breaks when `userSession` is set to `null`.
+      unsetModal()
       // This should not omit success and error toasts as it is not possible
       // to render this optimistically.
       await toast.toast.promise(cognito.signOut(), {
@@ -869,3 +873,13 @@ export function usePartialUserSession() {
 export function useNonPartialUserSession() {
   return router.useOutletContext<Exclude<UserSession, PartialUserSession>>()
 }
+
+// ======================
+// === useUserSession ===
+// ======================
+
+/** A React context hook returning the user session for a user that may or may not be logged in. */
+export function useUserSession() {
+  // eslint-disable-next-line no-restricted-syntax
+  return router.useOutletContext<UserSession | undefined>()
+}
diff --git a/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx b/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx
new file mode 100644
index 000000000000..4e31e90d23cf
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx
@@ -0,0 +1,33 @@
+/** @file The React provider (and associated hooks) storing whether the local backend is supported. */
+import * as React from 'react'
+
+// ===================================
+// === SupportsLocalBackendContext ===
+// ===================================
+
+const SupportsLocalBackendContext = React.createContext(false)
+
+/** Props for a {@link SupportsLocalBackendProvider}. */
+export interface SupportsLocalBackendProviderProps extends Readonly<React.PropsWithChildren> {
+  readonly supportsLocalBackend: boolean
+}
+
+// ====================================
+// === SupportsLocalBackendProvider ===
+// ====================================
+
+/** A React provider (and associated hooks) for determining whether the current focus contex
+ * is vertical or horizontal. */
+export default function SupportsLocalBackendProvider(props: SupportsLocalBackendProviderProps) {
+  const { supportsLocalBackend, children } = props
+  return (
+    <SupportsLocalBackendContext.Provider value={supportsLocalBackend}>
+      {children}
+    </SupportsLocalBackendContext.Provider>
+  )
+}
+
+/** Whether the Local Backend is supported. */
+export function useSupportsLocalBackend() {
+  return React.useContext(SupportsLocalBackendContext)
+}
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index f449d084f94e..890adda55e4c 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -163,6 +163,8 @@
   "delete": "Delete",
   "remove": "Remove",
   "invite": "Invite",
+  "copy": "Copy",
+  "copied": "Copied",
   "color": "Color",
   "labels": "Labels",
   "views": "Views",
@@ -273,6 +275,7 @@
   "discoverWhatsNew": "Discover what’s new",
   "sampleAndCommunityProjects": "Sample and community projects",
   "openUserMenu": "Open user menu",
+  "openInfoMenu": "Open info menu",
   "newEmptyProject": "New empty project",
   "noProjectIsCurrentlyOpen": "No project is currently open.",
   "youAreNotLoggedIn": "You are not logged in.",
@@ -293,6 +296,11 @@
   "replyExclamation": "Reply!",
   "lastModifiedOn": "last modified on $0",
   "versionX": "Version $0",
+  "version": "Version",
+  "build": "Build",
+  "electronVersion": "Electron",
+  "chromeVersion": "Chrome",
+  "userAgent": "User Agent",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
@@ -489,6 +497,7 @@
   "selectAdditionalRangeShortcut": "Select Additional Range",
   "goBackShortcut": "Go Back",
   "goForwardShortcut": "Go Forward",
+  "aboutThisAppShortcut": "About Enso",
 
   "moveToTrashShortcut": "Move To Trash",
   "moveAllToTrashShortcut": "Move All To Trash",
@@ -551,6 +560,7 @@
 
   "assetSearchFieldLabel": "Search through items",
   "userMenuLabel": "User menu",
+  "infoMenuLabel": "Info menu",
   "categorySwitcherMenuLabel": "Category switcher",
   "labelsListLabel": "Labels",
   "globalContextMenuLabel": "Global context menu",
@@ -558,12 +568,15 @@
   "assetContextMenuLabel": "Asset context menu",
   "labelContextMenuLabel": "Label context menu",
   "settingsSidebarLabel": "Settings sidebar",
-
-  "tryAgain": "Try again",
-  "arbitraryErrorTitle": "An error occurred",
   "userContextMenuLabel": "User context menu",
   "userGroupContextMenuLabel": "User Group context menu",
   "userGroupUserContextMenuLabel": "User Group User context menu",
+
+  "appNameDesktopEdition": "Enso Desktop Edition",
+  "appNameCloudEdition": "Enso Cloud Edition",
+
+  "tryAgain": "Try again",
+  "arbitraryErrorTitle": "An error occurred",
   "arbitraryErrorSubtitle": "Please try again or contact the administrators.",
 
   "subscribeSubmit": "Subscribe",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index f36e409ab3c2..d35f4a5809ee 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -47,7 +47,11 @@ interface PlaceholderOverrides {
   readonly userIsAlreadyInTheOrganization: [userEmail: string]
   readonly youAreAlreadyAddingUser: [userEmail: string]
   readonly lastModifiedOn: [dateString: string]
-  readonly versionX: [versionNumber: number]
+  readonly versionX: [version: number | string]
+  readonly buildX: [build: string]
+  readonly electronVersionX: [electronVersion: string]
+  readonly chromeVersionX: [chromeVersion: string]
+  readonly userAgentX: [userAgent: string]
   readonly compareVersionXWithLatest: [versionNumber: number]
   readonly onDateX: [dateString: string]
   readonly xUsersSelected: [usersCount: number]
diff --git a/app/ide-desktop/lib/types/globals.d.ts b/app/ide-desktop/lib/types/globals.d.ts
index 03ec1ac81af5..3d269db6e362 100644
--- a/app/ide-desktop/lib/types/globals.d.ts
+++ b/app/ide-desktop/lib/types/globals.d.ts
@@ -73,6 +73,28 @@ interface NavigationApi {
     readonly goForward: () => void
 }
 
+// ================
+// === Menu API ===
+// ================
+
+/** `window.menuApi` exposes functionality related to the system menu. */
+interface MenuApi {
+    /** Set the callback to be called when the "about" entry is clicked in the "help" menu. */
+    readonly setShowAboutModalHandler: (callback: () => void) => void
+}
+
+// ====================
+// === Version Info ===
+// ====================
+
+/** Versions of the app, and selected software bundled with Electron. */
+interface VersionInfo {
+    readonly version: string
+    readonly build: string
+    readonly electron: string
+    readonly chrome: string
+}
+
 // =====================================
 // === Global namespace augmentation ===
 // =====================================
@@ -86,6 +108,8 @@ declare global {
         readonly backendApi?: BackendApi
         readonly authenticationApi: AuthenticationApi
         readonly navigationApi: NavigationApi
+        readonly menuApi: MenuApi
+        readonly versionInfo?: VersionInfo
     }
 
     namespace NodeJS {
@@ -145,6 +169,10 @@ declare global {
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_CLOUD_GOOGLE_ANALYTICS_TAG?: string
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
+            readonly ENSO_CLOUD_DASHBOARD_VERSION?: string
+            // @ts-expect-error The index signature is intentional to disallow unknown env vars.
+            readonly ENSO_CLOUD_DASHBOARD_COMMIT_HASH?: string
+            // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_SUPPORTS_VIBRANCY?: string
 
             // === Electron watch script variables ===