[Docs Revamp Feedback] Fix content rendering bugs (admonitions, broken images, table wrapping, oversized icons) (#37669)

* Fix leftover RST/malformed MDX admonition syntax Docusaurus/MDX admonitions use `:::type[Title]` for a custom title, not the old Sphinx `.. type::` RST directive or a bare `:::type Title` (which Docusaurus renders as a type with the literal text "Title" appended, not a real title). Fixed 12 files using the malformed `:::type Title` form, plus two leftover `.. image::` RST directives (converted to `<img>` tags, covered in the images commit's file but noted here since it's the same admonition-adjacent cleanup pass) in manage-your-security-preferences.mdx. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix broken images: port missing screenshots from legacy docs repo 26 files referenced screenshots/diagrams via relative paths (`../images/x`, `../../images/x`) that don't resolve anywhere in this repo — the assets were never migrated during the Sphinx-to-Docusaurus conversion, and in one file (ad-ldap-groups-synchronization.mdx) the filenames were also corrupted with a leftover `%0A` (encoded newline) prefix from the conversion. Ported the 46 missing image files from mattermost/docs (source/images/) into docs/site/static/images/ — the location every other working image reference in this repo already resolves against — and rewrote every relative reference to the root-absolute `/images/<file>` form used elsewhere in these same files (e.g. server-logout-indicator.png). Verified via a full scan: all 680 `/images/...` references across docs/main now resolve to a real file on disk. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix oversized/broken checkmark icons in EMM config table The EMM configuration reference table used bare <img src="../../_static/images/check-circle-green.svg" /> for ~24 "supported" checkmarks — a legacy Sphinx path that doesn't exist in this repo (broken image) and, with no explicit size, would render at native SVG size rather than as a small inline checkmark (oversized icon). Replaced with the actual migrated asset (/img/ui/checkmark.svg) plus explicit width/height and alt text. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix wide comparison table wrapping on the plans page The plans/pricing table (7 columns: Feature Category + 5 editions + Available From) had no table-layout or column-width rules, so the first ("Feature Category") column — which holds long, wrapping prose — ended up roughly the same rendered width as the edition columns, which only ever hold a short checkmark or version string. That forced every row onto several wrapped lines. Added `table-layout: fixed` with explicit per-column widths (28% category / 10% per edition / 22% for "Available From") so the category column gets the space it needs. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix images broken on non-root baseUrl deployments (PR previews) Docusaurus only rewrites image URLs for the site's baseUrl when using markdown image syntax (`![alt](/images/x.png)`) — that gets compiled to a webpack require() call. A raw HTML `<img src="/images/x.png" />` tag is left as a literal string, which the browser resolves from the domain root, ignoring baseUrl entirely. On production baseUrl is "/", so this silently worked by coincidence. But PR preview builds set BASE_URL to "/mattermost/pr-<N>/" (.github/workflows/docs-preview-template.yml), so every raw <img src="/images/..."> or src="/img/..."> 404s specifically on preview deployments — which is why images added/fixed earlier in this branch still showed as broken in the PR's docs preview. This is a pre-existing, repo-wide pattern (503 raw <img> tags across 103 files, most untouched by this PR otherwise) rather than something introduced by earlier commits here — those commits just added a few more instances of an existing broken pattern. Fixed all of them by importing @docusaurus/useBaseUrl and wrapping src={useBaseUrl('/images/...')} so the URL is correctly rewritten for whatever baseUrl the site is built with. Verified: all 503 useBaseUrl(...) calls resolve to a real file under docs/site/static, and every modified file was checked with @mdx-js/mdx compile() to confirm no syntax breakage from the added import statements. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix leftover RST list/table markup in notifications docs - mobile-troubleshooting.mdx: replace leading blockquote markers (>) under step 3 with list-content indentation so the nested numbered substeps and screenshots render as part of the ordered list instead of a blockquote. - manage-your-notifications.mdx: replace the mangled blockquote/dl header row (with literal RST separator runs and stray | and + characters) with a proper <thead><th scope="col"> row, and restore the "Icon badge (dot)" row as a normal <tbody> row. Co-authored-by: Cursor <cursoragent@cursor.com> * Rebuild mangled security preferences table from RST source Cross-checked against the legacy RST source to reconstruct the table correctly: proper <thead>/<th scope="col"> header, real ordered/ unordered lists instead of pipe-joined literal text, working internal links in place of unresolved mm-ref: URIs, and a <Note> block for the sign-in method callout (previously rendered as literal ".. note::" text). Also dropped a stray phantom third table column left over from conversion. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix typos and remaining markup issues in collaborate/notifications docs - message-priority.mdx: fix "acknowlegement" typo, add missing "the" before "message" in the acknowledgement description. - organize-conversations.mdx: split the Tip's two bullets onto separate lines and drop the escaped leading hyphen that was preventing the first item from rendering as a list. - organize-using-custom-user-groups.mdx: fix "preferreed" typo and add missing "to" in the archived-group restoration instructions. - schedule-messages.mdx: fix "dislays" typo. - manage-your-notifications.mdx: replace the leftover dl/dt/dd/ line-block markup in the Push notifications row with a plain anchor link, matching the Web/Desktop cells elsewhere in the table. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 17:06:34 +08:00 · 2026-07-27 12:40:43 +03:00
parent 8828e5a258
commit 7a1c7e4b6b
162 changed files with 587 additions and 400 deletions
@@ -1,6 +1,8 @@
 ---
 title: "Export channel data"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="ent-plus" />

 Ensure important data isn't trapped in silos by migrating data between systems or backing data up for operational continuity. Once exported, channel data can be analyzed using various tools for insights into team dynamics, productivity, and communication patterns, and to fulfill reporting and auditability requirements.
@@ -15,7 +17,7 @@ For Mattermost Cloud deployments, no setup is required. See the [usage](#usage)

 For self-hosted deployments, a Mattermost system admin must install the Channel Export integration from the in-product App Marketplace:

-1.  In Mattermost, from the Product menu <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
+1.  In Mattermost, from the Product menu <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
 2.  Search for or scroll to **Channel Export**, and select **Install**.
 3.  Once installed, select **Configure**. You're taken to the System Console.
 4.  On the **Channel Export** configuration page, enable and configure the plugin, and then select **Save**. You can restrict the ability to export channels to system, team, and channel admins only, and you can configure a maximum file size for channel export files.
@@ -1,6 +1,8 @@
 ---
 title: "Legal Hold"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="ent-plus" />

 A Legal Hold, also known as a litigation hold, is a process that an organization uses to preserve all forms of relevant information when litigation is reasonably anticipated. It's a requirement established by the Federal Rules of Civil Procedure (FRCP) in the United States and similar laws in other jurisdictions.
@@ -74,13 +76,13 @@ While a Legal Hold is in place, you can edit details of the Legal Hold, access t

 ##### Edit a Legal Hold

-Select the **Edit** <img src="/img/ui/edit-on-github.png" alt="Contribute to Mattermost documentation by selecting the Edit option located in the top right corner of any documentation page." className="theme-icon" /> icon to change the name of the Legal Hold, add or remove users, change the end date, as well as include or exclude public channels.
+Select the **Edit** <img src={useBaseUrl('/img/ui/edit-on-github.png')} alt="Contribute to Mattermost documentation by selecting the Edit option located in the top right corner of any documentation page." className="theme-icon" /> icon to change the name of the Legal Hold, add or remove users, change the end date, as well as include or exclude public channels.

 ##### Access a Legal Hold secret

 A Legal Hold secret enables you to verify the authenticity of the data for a Legal Hold in Mattermost.

-Select the **Show** <img src="/img/ui/eye-outline_F06D0.svg" alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon to display the Legal Hold secret key. Keep a copy of this key in a secure location.
+Select the **Show** <img src={useBaseUrl('/img/ui/eye-outline_F06D0.svg')} alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon to display the Legal Hold secret key. Keep a copy of this key in a secure location.

 ![An example of a Legal Hold Secret Key available to Mattermost system admins.](/images/legal-hold-secret.png)

@@ -104,7 +106,7 @@ Secret key was provided, verifying legal holds...

 ##### Download Legal Hold data

-Select the **Download** <img src="/img/ui/download-outline_F0B8F.svg" alt="Use the Download icon to download an attached file to your local system." className="theme-icon" /> icon to download a copy of the preserved data to a location on your local machine. Note, no data will be available to download until at least one scheduled job is completed. This may take up to 24 hours.
+Select the **Download** <img src={useBaseUrl('/img/ui/download-outline_F0B8F.svg')} alt="Use the Download icon to download an attached file to your local system." className="theme-icon" /> icon to download a copy of the preserved data to a location on your local machine. Note, no data will be available to download until at least one scheduled job is completed. This may take up to 24 hours.

 ### Step 5: Release a Legal Hold

@@ -179,7 +181,7 @@ $ ./processor --legal-hold-data ./legalholddata.zip --output-path ./path/to/wher

 - `--legal-hold-data`: Path to the Legal Hold zip file downloaded from Mattermost
 - `--output-path`: Directory where the HTML output will be generated
- `--legal-hold-secret`: (Optional) Used as a security measure for an operator to ensure the authenticity of a downloaded zip file. The operator can copy the key corresponding to a particular "hold" from the Legal Hold Plugin settings page in the System Console by selecting the **Show** <img src="/img/ui/eye-outline_F06D0.svg" alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon next to the Legal Hold entry.
+- `--legal-hold-secret`: (Optional) Used as a security measure for an operator to ensure the authenticity of a downloaded zip file. The operator can copy the key corresponding to a particular "hold" from the Legal Hold Plugin settings page in the System Console by selecting the **Show** <img src={useBaseUrl('/img/ui/eye-outline_F06D0.svg')} alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon next to the Legal Hold entry.

 ### Is data gathered when a channel has been archived?

@@ -1,6 +1,8 @@
 ---
 title: "Authentication configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Mattermost supports up to 4 distinct, concurrent methods of user authentication:
@@ -10,7 +12,7 @@ Mattermost supports up to 4 distinct, concurrent methods of user authentication:
 - An LDAP instance (e.g., Active Directory, OpenLDAP)
 - Email and Password

-Review and manage the following authentication configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Authentication**:
+Review and manage the following authentication configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Authentication**:

 - [Signup](#signup)
 - [Email](#email)
@@ -952,7 +954,7 @@ If a sync is `Pending` and does not complete, check that **Enable Synchronizatio
 </Note>

 <figure>
-<img src="../../images/ldap-sync-table.png" alt="../../images/ldap-sync-table.png" />
+<img src={useBaseUrl('/images/ldap-sync-table.png')} alt="/images/ldap-sync-table.png" />
 </figure>

 ### Config settings not available in the AD/LDAP Wizard
@@ -1,6 +1,7 @@
 ---
 title: "Mattermost Calls Deployment Guide"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -167,7 +168,7 @@ Use the tabs below to view the reference architecture for each deployment model:

 An **Integrated** deployment does not require any additional infrastructure:

-<img src="../../images/calls-deployment-integrated.png" alt="Integrated Calls deployment" />
+<img src={useBaseUrl('/images/calls-deployment-integrated.png')} alt="Integrated Calls deployment" />
 **When to use it**

 - You are evaluating Calls for the first time.
@@ -189,7 +190,7 @@ The **Recording** service (`calls-offloader`) can optionally be added to an **In

 Reference architecture when using the Recording service with Integrated Calls:

-<img src="../../images/calls-deployment-integrated-recording-v2.png" alt="Calls deployment with Integrated Calls and recording" />
+<img src={useBaseUrl('/images/calls-deployment-integrated-recording-v2.png')} alt="Calls deployment with Integrated Calls and recording" />
 **Components**

 - **Mattermost server**: Calls plugin is pre-installed.
@@ -204,7 +205,7 @@ Reference architecture when using the Recording service with Integrated Calls:

 An **RTCD Server** is added as a dedicated media service that processes all call audio and screen sharing media.

-<img src="../../images/calls-deployment-rtcd.png" alt="Calls deployment with RTCD" />
+<img src={useBaseUrl('/images/calls-deployment-rtcd.png')} alt="Calls deployment with RTCD" />
 The Mattermost server is still responsible for signaling (setting up, managing, and ending calls) and channel state (who is joining or leaving, who has muted, and overall call status), but the call media itself flows directly between clients and the RTCD server, completely bypassing the Mattermost server.

 **When to use it**
@@ -231,7 +232,7 @@ The **Recording** service (`calls-offloader`) can optionally be added to an **RT

 Reference architecture when using the Recording service with RTCD:

-<img src="../../images/calls-deployment-rtcd-recording.png" alt="Calls deployment with RTCD and recording" />
+<img src={useBaseUrl('/images/calls-deployment-rtcd-recording.png')} alt="Calls deployment with RTCD and recording" />
 **Components**

 - **Mattermost server**: Calls plugin is pre-installed.
@@ -1,7 +1,9 @@
 ---
 title: "Cloud workspace subscription, billing, and account settings"
 ---
-Review and manage the following aspects of your Mattermost cloud-based deployment by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Billing and Account**:
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Review and manage the following aspects of your Mattermost cloud-based deployment by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Billing and Account**:

 - Access billing history
 - Manage the [product subscription](/product-overview/cloud-subscriptions) and account details for your Mattermost Cloud deployment.
@@ -1,9 +1,11 @@
 ---
 title: "Compliance configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="ent-plus" />

-Review and manage the following compliance configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Compliance**:
+Review and manage the following compliance configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Compliance**:

 - [Data Retention Policies](#data-retention-policies)
 - [Compliance Export](/administration-guide/comply/compliance-export)
@@ -1,9 +1,11 @@
 ---
 title: "Configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-System admins for both self-hosted and Cloud Mattermost deployments can manage Mattermost configuration using the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu and selecting **System Console**.
+System admins for both self-hosted and Cloud Mattermost deployments can manage Mattermost configuration using the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu and selecting **System Console**.

 <Note>

@@ -1,12 +1,14 @@
 ---
 title: "Custom branding tools"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Use custom branding tools to present a Mattermost experience that's tailored to the branding of your organization.

 <figure>
-<img src="../../images/custom-branding-tools.png" alt="../../images/custom-branding-tools.png" />
+<img src={useBaseUrl('/images/custom-branding-tools.png')} alt="/images/custom-branding-tools.png" />
 </figure>

 ## Enable custom branding
@@ -1,6 +1,7 @@
 ---
 title: "Environment configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -9,7 +10,7 @@ import Inc1_rate_limiting_configuration_settings from './rate-limiting-configura

 <PlanAvailability slug="all-commercial" />

-Review and manage the following environmental configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Environment**:
+Review and manage the following environmental configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Environment**:

 - [Web server](#web-server)
 - [Database](#database)
@@ -862,7 +863,7 @@ However, the ability to perform database searches in Mattermost is a critical fe

 ### Applied schema migrations

-A list of all migrations that have been applied to the data store based on the version information available in the `db_migrations` table. Select **About Mattermost** from the Product <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu to review the current database schema version applied to your deployment.
+A list of all migrations that have been applied to the data store based on the version information available in the `db_migrations` table. Select **About Mattermost** from the Product <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu to review the current database schema version applied to your deployment.

 ### Active search backend

@@ -1,9 +1,11 @@
 ---
 title: "Experimental configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Review and manage the following [experimental](/administration-guide/manage/feature-labels#experimental) configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Experimental \> Features**:
+Review and manage the following [experimental](/administration-guide/manage/feature-labels#experimental) configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Experimental \> Features**:

 - [Experimental System Console configuration settings](#experimental-system-console-configuration-settings)
 - [Experimental job configuration settings](#experimental-job-configuration-settings)
@@ -1,9 +1,11 @@
 ---
 title: "Integrations configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Review and manage the following integration configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Integrations**:
+Review and manage the following integration configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Integrations**:

 - [Integrations management](#integrations-management)
 - [Bot Accounts](#bot-accounts)
@@ -1,6 +1,8 @@
 ---
 title: "Install and manage plugins"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 Plugins extend Mattermost with new features and integrations, from pre-built integrations such as GitHub, Jira, and Zoom to custom plugins your team builds in-house. As a system admin, you can install, enable, configure, update, and remove plugins using either the System Console or the [mmctl command line tool](/administration-guide/manage/mmctl-command-line-tool).

 This page describes how to manage the plugin lifecycle. For a conceptual overview of pre-built and custom plugins, see the [plugins](/integrations-guide/plugins) documentation. For the complete list of plugin configuration options, see the [plugins configuration settings](/administration-guide/configure/plugins-configuration-settings) documentation. To build your own plugin, see the [Mattermost plugin developer](https://developers.mattermost.com/integrate/plugins/) documentation.
@@ -36,7 +38,7 @@ You can install a plugin from the in-product Marketplace, by uploading a plugin

 Installing from the Marketplace is the recommended method for pre-built plugins. The Marketplace always installs the latest compatible version, and plugins downloaded from the Marketplace are signature-validated.

-1.  In Mattermost, from the Product menu <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
+1.  In Mattermost, from the Product menu <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
 2.  Search for or scroll to the plugin you want, and then select **Install**.
 3.  Once the plugin is installed, select **Configure** to open its settings in the System Console, or **Enable** to turn it on with the default configuration.
 4.  Confirm the installation succeeded: the plugin appears in the **Installed Plugins** list under **Plugins > Plugin Management**, and its features are available in Mattermost.
@@ -1,11 +1,13 @@
 ---
 title: "Optimize your Mattermost workspace"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 With workspace optimizations, system admins can review their workspace health and growth scores, then take advantage of recommended actions for ensuring their workspace is running smoothly and teams are maximizing productivity.

-System admins can access their workspace optimization page in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and going to **Reporting \> Workspace Optimization**.
+System admins can access their workspace optimization page in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and going to **Reporting \> Workspace Optimization**.

 ![Review your workspace health and growth scores, then take advantage of recommended optimizations.](/images/workspace-optimization.png)

@@ -1,9 +1,11 @@
 ---
 title: "Plugins configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Review and manage the following plugin configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Plugins**:
+Review and manage the following plugin configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Plugins**:

 - [Plugin management](#plugin-management)
 - [Calls](#calls)
@@ -1,9 +1,11 @@
 ---
 title: "Reporting configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-View the following statistics for your overall deployment and specific teams, as well as access server logs, in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Reporting**:
+View the following statistics for your overall deployment and specific teams, as well as access server logs, in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Reporting**:

 - [System statistics](#system-statistics)
 - [Team statistics](#team-statistics)
@@ -1,9 +1,11 @@
 ---
 title: "Self-hosted workspace edition and license settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Start a trial or manage your self-hosted deployment by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **About \> Edition and License**.
+Start a trial or manage your self-hosted deployment by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **About \> Edition and License**.

 ## Start a trial

@@ -1,9 +1,11 @@
 ---
 title: "Site configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Review and manage the following site configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Site Configuration**:
+Review and manage the following site configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **Site Configuration**:

 - [Customization](#customization)
 - [Localization](#localization)
@@ -1,11 +1,13 @@
 ---
 title: "System Attributes"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="ent-plus" />

 System attributes configuration settings provide system admins with centralized control over key user account properties.

-Review and manage the following system attributes configuration options in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **System Attributes**.
+Review and manage the following system attributes configuration options in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **System Attributes**.

 You can define, manage, and enforce specific attributes, including:

@@ -1,9 +1,11 @@
 ---
 title: "User management configuration settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Review and manage the following in the System Console by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **User Management**:
+Review and manage the following in the System Console by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu, selecting **System Console**, and then selecting **User Management**:

 - [Users](#users)
 - [Groups](#groups)
@@ -198,7 +200,7 @@ Add or remove users from teams using the System Console.

 ![Add a user to a Mattermost team using the System Console.](/images/add-user-to-team.png)

-4.  To remove the user from a specific team, select **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> next to the team name, and select **Remove from team**.
+4.  To remove the user from a specific team, select **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> next to the team name, and select **Remove from team**.

 ![Remove a user from a Mattermost team using the System Console.](/images/remove-user-from-team.png)

@@ -1,6 +1,7 @@
 ---
 title: "User attributes"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -131,13 +132,13 @@ If an attribute is created or updated without explicit visibility or sort order

 <Tip>

-Duplicate existing attributes by selecting **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Duplicate attribute**. This creates a new attribute with the same name and type as the original attribute. You can then edit the new attribute to change its name, type, and visibility as needed.
+Duplicate existing attributes by selecting **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Duplicate attribute**. This creates a new attribute with the same name and type as the original attribute. You can then edit the new attribute to change its name, type, and visibility as needed.

 </Tip>

 ## Manage attributes

- **Modify**: Select the attribute fields to make inline changes to the attribute's name, type, or values. Select **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to change a attribute's visibility.
+- **Modify**: Select the attribute fields to make inline changes to the attribute's name, type, or values. Select **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to change a attribute's visibility.

 <Note>

@@ -146,7 +147,7 @@ From Mattermost v11.8, existing user attributes are backfilled so the Display Na
 </Note>

 - **Order**: Control the order you want attributes to appear in user profiles by dragging and dropping them in the list.
- **Delete**: Delete attributes you no longer need or want by selecting **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Delete property**.
+- **Delete**: Delete attributes you no longer need or want by selecting **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Delete property**.

 <Note>

@@ -154,7 +155,7 @@ When updating user attributes via API or automation, the `attrs` object replaces

 </Note>

- **User Edit Permissions**: From Mattermost v11, all user attributes are admin-managed by default for enhanced security. To allow user editing for specific attributes, administrators can enable this through the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> menu and selecting **Allow user editing**. This should only be enabled for attributes that do not impact security access controls or organizational policies. Attributes used in ABAC policies should remain admin-managed unless there's a specific business need and the security implications are fully understood.
+- **User Edit Permissions**: From Mattermost v11, all user attributes are admin-managed by default for enhanced security. To allow user editing for specific attributes, administrators can enable this through the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> menu and selecting **Allow user editing**. This should only be enabled for attributes that do not impact security access controls or organizational policies. Attributes used in ABAC policies should remain admin-managed unless there's a specific business need and the security implications are fully understood.
 - **Edit User Attribute Values**: From Mattermost v11.1, you can view and update user attribute values for individual users through the System Console. See the [Manage user attributes](/administration-guide/configure/user-management-configuration-settings#manage-user-attributes) documentation for details.

 In cases where multiple system admins manage system attributes, refresh your web browser instance to see real-time updates to system attributes made by other admins.
@@ -173,7 +174,7 @@ Masking in the policy editor only applies to attributes with `shared_only` or `s

 ## Sync attributes with your identity provider

-1.  Synchronize a attribute with AD/LDAP or SAML by selecting **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Link attribute to AD/LDAP** or **Link attribute to SAML**. Mattermost takes you directly to the **AD/LDAP** or **SAML 2.0** configuration settings page in the System Console where you can map the attributes you want to synchronize.
+1.  Synchronize a attribute with AD/LDAP or SAML by selecting **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> and selecting **Link attribute to AD/LDAP** or **Link attribute to SAML**. Mattermost takes you directly to the **AD/LDAP** or **SAML 2.0** configuration settings page in the System Console where you can map the attributes you want to synchronize.
 2.  Scroll to the **User attributes sync** section to specify the attribute used to populate the attribute in user profiles.
 3.  Specify the attribute mapping for the attribute by entering the attribute name in the system attribute's **Attribute** field. The attribute name must match the attribute name in your identity provider.
 4.  Save your changes.
@@ -1,13 +1,15 @@
 ---
 title: "Cloud IP Filtering"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 IP filtering is a powerful security feature that allows system admins to control access to their workspace by defining approved IP ranges. Only users within these specified IP ranges can access the workspace, ensuring enhanced security for your workspace.

 **IP filtering requires a subscription to Mattermost Cloud Enterprise.**

 ## Configure IP filtering

-1.  **Log in as system admin**: As a system admin, access the System Console of your workspace by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu and selecting **System Console**.
+1.  **Log in as system admin**: As a system admin, access the System Console of your workspace by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu and selecting **System Console**.

 2.  **Go to Site Configuration**: Go to the **Site Configuration** section.

@@ -1,6 +1,8 @@
 ---
 title: "AD/LDAP groups"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 ## Overview
@@ -93,19 +95,19 @@ Channels are nested below the team they belong to in the team and channel list.
 </thead>
 <tbody>
 <tr>
-<td><img src="../../images/%0Aopen_team.png" alt="image" /></td>
+<td><img src={useBaseUrl('/images/open_team.png')} alt="image" /></td>
 <td>Team is open for anyone to join.</td>
 </tr>
 <tr>
-<td><img src="../../images/%0Aprivate_team.png" alt="image" /></td>
+<td><img src={useBaseUrl('/images/private_team.png')} alt="image" /></td>
 <td>Team isn't open for anyone to join.</td>
 </tr>
 <tr>
-<td><img src="../../images/%0Apublic_channel.png" alt="image" /></td>
+<td><img src={useBaseUrl('/images/public_channel.png')} alt="image" /></td>
 <td>Public channel.</td>
 </tr>
 <tr>
-<td><img src="../../images/%0Aprivate_channel.png" alt="image" /></td>
+<td><img src={useBaseUrl('/images/private_channel.png')} alt="image" /></td>
 <td>Private channel.</td>
 </tr>
 </tbody>
@@ -1,6 +1,7 @@
 ---
 title: "Connected workspaces"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -138,7 +139,7 @@ Once a connection is established between two Mattermost servers, system admins o
 1.  Under **Shared Channels**, select **Add channels**.
 2.  Specify the channels you want to share between Mattermost servers.

-Shared channels and members of those shared channels display a shared <img src="/img/ui/circle-multiple-outline_F0695.svg" alt="Shared icon indicates channels and their members that are shared across connected Mattermost servers." /> icon to distinguish them from channels and channel members of the local server.
+Shared channels and members of those shared channels display a shared <img src={useBaseUrl('/img/ui/circle-multiple-outline_F0695.svg')} alt="Shared icon indicates channels and their members that are shared across connected Mattermost servers." /> icon to distinguish them from channels and channel members of the local server.

 </TabItem>
 <TabItem value="slash-commands" label="Slash Commands">
@@ -228,7 +229,7 @@ System admins can [edit](#edit-a-connected-workspace) or [delete](#delete-a-conn
 In the System Console, system admins can change the **Organization Name**, the **Destination Team** (which serves as the default location for organizing shared channels from this connected workspace), or channels shared with a remote Mattermost instance as well as channels shared with your local Mattermost instance.

 1.  Under **Connected Workspaces**, identify the connected workspace you want to change.
-2.  Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Edit**.
+2.  Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Edit**.

 ### Remove all connections from the current channel

@@ -248,7 +249,7 @@ From Mattermost v10.10, removing a shared channel from a connected workspace rem
 <TabItem value="system-console" label="System Console">

 1.  Under **Connected Workspaces**, identify the connected workspace you want to remove.
-2.  Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Delete**.
+2.  Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Delete**.

 </TabItem>
 <TabItem value="slash-commands" label="Slash Commands">
@@ -308,7 +309,7 @@ Status details include:
 When using the System Console to manage connected workspaces, system admins can re-generate invitation codes and passwords for pending connections.

 1.  Under **Connected Workspaces**, identify the pending connection whose invitation and password you want to regenerate.
-2.  Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Regenerate invitation code**.
+2.  Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon to the right of the connected workspace, and then select **Regenerate invitation code**.

 <Note>

@@ -1,6 +1,8 @@
 ---
 title: "Collect performance metrics"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 System admins can collect and store the [same performance monitoring metrics](/administration-guide/scale/performance-monitoring-metrics) as Prometheus, without having to deploy these third-party tools. Data is collected every minute and is stored in a path you configure. The data is synchronized to either a cloud-based or local file store every hour, and retained for 15 days.
@@ -24,7 +26,7 @@ For Mattermost Cloud deployments, no setup is required. See the [usage](#usage)
 For a self-hosted Mattermost deployment, a Mattermost system admin must perform the following steps in Mattermost.

 1.  Log in to your Mattermost [workspace](/end-user-guide/end-user-guide-index) as a system admin.
-2.  From Mattermost v10.1, you can install the Metrics plugin from the in-product Mattermost Marketplace by selecting the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and selecting **App Marketplace**. Search for **Metrics** and select **Install**.
+2.  From Mattermost v10.1, you can install the Metrics plugin from the in-product Mattermost Marketplace by selecting the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and selecting **App Marketplace**. Search for **Metrics** and select **Install**.
 3.  Go to **System Console \> Plugins \> Plugin Management**. In the **Installed Plugins** section, scroll to **Mattermost Metrics Plugin**, and select **Enable Plugin**.
 4.  Specify the path of the time-series database, and select **Save**.
 5.  Go to **System Console \> Environment \> Performance Monitoring**, and set **Enable Performance Monitoring** to **true**. Select **Save**.
@@ -59,7 +61,7 @@ Once you set this up, run `docker-compose` as described in [Dockprom Repository]
 You can also use our [Mattermost Performance Monitoring v2](https://grafana.com/grafana/dashboards/15582-mattermost-performance-monitoring-v2/) dashboard by simply importing it into Grafana.

 1.  Open Grafana (`&lt;localhost&gt;:3000` by default) and then log into it.
-2.  Once you log in, go to the **Plus** <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon on the left sidebar, and then select **Import**.
+2.  Once you log in, go to the **Plus** <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon on the left sidebar, and then select **Import**.
 3.  Enter the dashboard ID (`15582`) in the **Grafana.com Dashboard** field, and then select **Load** to fetch the dashboard.

 ## What's collected?
@@ -1,6 +1,8 @@
 ---
 title: "High availability cluster-based deployment"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="ent-plus" />

 A high availability cluster-based deployment enables a Mattermost system to maintain service during outages and hardware failures through the use of redundant infrastructure.
@@ -1267,7 +1269,7 @@ For example, if you're deploying Mattermost on AWS with Amazon Aurora we recomme

 ### How to find the hostname of the connected websocket?

-From Mattermost v10.4, Enterprise customers running self-hosted deployments can go to the **Product** menu <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> and select **About Mattermost** to see the hostname of the node in the cluster running Mattermost.
+From Mattermost v10.4, Enterprise customers running self-hosted deployments can go to the **Product** menu <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> and select **About Mattermost** to see the hostname of the node in the cluster running Mattermost.

 ## Troubleshooting

@@ -1,6 +1,7 @@
 ---
 title: "Deployment Architecture at Scale"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -32,22 +33,22 @@ Mattermost is designed to be able to handle a large number of concurrent users,
 <Tabs>
 <TabItem value="5-000-users" label="5,000 users">

-<img src="/images/MattermostDeployment5kaws.png" class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 5,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment5kaws.png')} class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 5,000 users" />

 </TabItem>
 <TabItem value="10-000-users" label="10,000 users">

-<img src="/images/MattermostDeployment10kaws.png" class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 10,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment10kaws.png')} class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 10,000 users" />

 </TabItem>
 <TabItem value="25-000-users" label="25,000 users">

-<img src="/images/MattermostDeployment25kaws.png" class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 25,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment25kaws.png')} class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 25,000 users" />

 </TabItem>
 <TabItem value="50-000-users" label="50,000 users">

-<img src="/images/MattermostDeployment50kaws.png" class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 50,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment50kaws.png')} class="bg-white" alt="Mattermost high availability deployment architecture on AWS for 50,000 users" />

 </TabItem>
 </Tabs>
@@ -58,22 +59,22 @@ Mattermost is designed to be able to handle a large number of concurrent users,
 <Tabs>
 <TabItem value="5-000-users" label="5,000 users">

-<img src="/images/MattermostDeployment5kAzure.png" class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 5,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment5kAzure.png')} class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 5,000 users" />

 </TabItem>
 <TabItem value="10-000-users" label="10,000 users">

-<img src="/images/MattermostDeployment10kAzure.png" class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 10,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment10kAzure.png')} class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 10,000 users" />

 </TabItem>
 <TabItem value="25-000-users" label="25,000 users">

-<img src="/images/MattermostDeployment25kAzure.png" class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 25,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment25kAzure.png')} class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 25,000 users" />

 </TabItem>
 <TabItem value="50-000-users" label="50,000 users">

-<img src="/images/MattermostDeployment50kAzure.png" class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 50,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment50kAzure.png')} class="bg-white" alt="Mattermost high availability deployment architecture on Azure for 50,000 users" />

 </TabItem>
 </Tabs>
@@ -84,7 +85,7 @@ Mattermost is designed to be able to handle a large number of concurrent users,
 <Tabs>
 <TabItem value="5-000-users" label="5,000 users">

-<img src="/images/MattermostDeployment5kOracle.png" class="bg-white" alt="Mattermost high availability deployment architecture on Oracle Cloud Infrastructure for 5,000 users" />
+<img src={useBaseUrl('/images/MattermostDeployment5kOracle.png')} class="bg-white" alt="Mattermost high availability deployment architecture on Oracle Cloud Infrastructure for 5,000 users" />

 </TabItem>
 </Tabs>
@@ -14,7 +14,7 @@ Per-major-version upgrade guides give operators a single canonical procedure for

 URL convention: `/upgrade-guide/upgrade-v{X.Y}/` (Grafana pattern). Predictable, deep-linkable, per-version.

-:::note Status
+:::note[Status]
 This page is a stub seeded by the IA redesign Phase 1 (see `docs/_redesign/proposed-ia.md` §6 in the repo). Content authored by the release-management + technical-writing team.
 :::

@@ -13,7 +13,7 @@ Mattermost makes a small set of outbound network calls during normal operation.

 This page is the **single canonical inventory** of phone-home behavior. Every outbound call Mattermost initiates from the server process is listed below with its purpose, target, and the setting that disables it.

-:::important Use this list as a checklist
+:::important[Use this list as a checklist]
 Run through every row of the table below as a Day-1 task. After the cluster is up, packet-capture at the enclave boundary should show no outbound connections to any of the targets listed.
 :::

@@ -13,7 +13,7 @@ This section is for operators deploying Mattermost in **network-isolated enclave

 Mattermost runs fully in air-gapped mode. The procedure differs from a connected install in five ways: package mirroring, offline license activation, disabling phone-home features, push-notification mediation, and audit-log export topology. Each is documented below.

-:::note Persona scope
+:::note[Persona scope]
 This sub-tree is the canonical home for the **Air-Gapped Operator** persona (see `docs/_redesign/personas.md` §4 in the repo). Companion pages for **Security Architects** live under Security & Compliance; compliance machinery for **Compliance Officers** lives under Administration Guide → Comply.
 :::

@@ -41,7 +41,7 @@ Offline activation produces a **license file** that is signed by Mattermost's cu
 | Renewal | Automatic prompt 60 days before expiry | Manual: customer-success issues new file; operator re-uploads |
 | Automated utilization reporting | Daily POST to `customers.mattermost.com` | **Disabled** — Mattermost does not contact `customers.mattermost.com` from inside the enclave. Reporting is done manually at renewal. |

-:::important Automated license utilization reporting must be disabled
+:::important[Automated license utilization reporting must be disabled]
 The `EnableLicenseReporting` server setting must be set to `false` in `config.json`. Otherwise, Mattermost attempts (and silently fails) a daily POST to `customers.mattermost.com`. The failure does not affect functionality, but it pollutes egress logs and triggers boundary alerts. See [Disable Phone-Home Features](./disable-phone-home-features).
 :::

@@ -11,7 +11,7 @@ description: 12-step procedure to stand up a working Mattermost cluster in an ai

 This runbook brings a Mattermost cluster online inside a network-isolated enclave. It assumes you are the **deploying operator** with administrative access to the enclave's package mirror, container registry, certificate authority, and DNS.

-:::important Prerequisites
+:::important[Prerequisites]
 - An enclave with internal-only DNS, an internal package mirror (Linux distro repos), and an internal container registry (Harbor / Artifactory / equivalent).
 - An offline-activatable Enterprise or Enterprise Advanced license — see [Offline License Activation](./offline-license-activation).
 - A staged Mattermost Server release tarball + checksums verified out-of-band, and a Mattermost Operator Helm chart (Kubernetes) or Linux package (`.deb` / `.rpm`).
@@ -1,6 +1,8 @@
 ---
 title: "Desktop App custom dictionaries"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 From Mattermost desktop app v4.7.1, custom dictionary definitions can be served through a URL on Windows and Linux. If custom dictionaries aren't specified, default dictionary definitions are obtained automatically from Chromium's CDNs (content delivery networks). On macOS, the Mattermost desktop app uses dictionary definitions provided by Apple that can't be customized.
@@ -18,7 +20,7 @@ To access a copy of these dictionary definitions:

 ## Configure the Desktop App

-1.  In the Mattermost Desktop App, go to Settings by selecting <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> **\> File \> Settings**.
+1.  In the Mattermost Desktop App, go to Settings by selecting <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> **\> File \> Settings**.
 2.  Under **App Options**, ensure that the **Check spelling** option is enabled.
 3.  Select **Use an alternative dictionary URL** to specify the URL to the root folder of your custom dictionaries, then select **Save**.

@@ -1,6 +1,7 @@
 ---
 title: "Install desktop app on Linux"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -51,7 +52,7 @@ A snap is available for systems that have Snapcraft installed. Snapcraft is inst

 <Tip>

-You can review the current version of your desktop app by selecting the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.
+You can review the current version of your desktop app by selecting the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.

 </Tip>

@@ -79,7 +80,7 @@ To manually update the desktop app, run the following command:

 <Tip>

-You can review the current version of your desktop app by selecting the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.
+You can review the current version of your desktop app by selecting the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.

 </Tip>

@@ -129,7 +130,7 @@ Flatpak packages are available for:

 <Tip>

-You can review the current version of your desktop app by selecting the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.
+You can review the current version of your desktop app by selecting the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top left corner of the desktop app, then selecting **Help \> Version...**.

 </Tip>

@@ -1,6 +1,8 @@
 ---
 title: "Deploy using an EMM provider"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 You can enhance mobile security by deploying the Mattermost mobile app with [Enterprise Mobility Management (EMM)](https://en.wikipedia.org/wiki/Enterprise_mobility_management) and Mattermost AppConfig compatibility to secure mobile endpoints with management application configuration.
@@ -67,85 +69,85 @@ The following table shows all the configuration options that can be sent from th
      <td><strong><code>inAppPinCode</code></strong><br /><em>String</em></td>
      <td>Require users to authenticate as the device owner before using the app. Prompts for fingerprint or passcode when the app first opens and when the app has been in the background for more than five minutes.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>blurApplicationScreen</code></strong><br /><em>String</em></td>
      <td>Blur the app when it's set to background to protect any confidential on-screen information. On Android, it also prevents taking screenshots of the app.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>jailbreakDetection</code></strong><br /><em>String</em></td>
      <td>Disable app launch on jailbroken or rooted devices.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>copyAndPasteProtection</code></strong><br /><em>String</em></td>
      <td>Disable the ability to copy from or paste into any text inputs in the app.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /> (since v1.24.0)</td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /> (since v1.24.0)</td>
    </tr>
    <tr>
      <td><strong><code>serverUrl</code></strong><br /><em>String</em></td>
      <td>Set a default Mattermost server URL. Supports a single server only while v2.0 of the mobile app supports multiple server connections.</td>
      <td>Valid: URL</td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>serverName</code></strong><br /><em>String</em></td>
      <td>Automatically populates the server display name for the URL specified in serverURL.</td>
      <td>Valid: alphanumeric or empty</td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>allowOtherServers</code></strong><br /><em>String</em></td>
      <td>Allow the user to change the above server URL. If set to <code>true</code>, users can connect to multiple servers that aren't specified in the server URL setting. If set to <code>false</code>, users can only connect to a single defined server.</td>
      <td>Default: <code>true</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>username</code></strong><br /><em>String</em></td>
      <td>Set the username or email address to use to authenticate against the Mattermost Server.</td>
      <td></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>useVPN</code></strong><br /><em>String</em></td>
      <td>Enable connection to the Mattermost Server to use a per-app VPN or VPN on-demand.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
      <td></td>
    </tr>
    <tr>
      <td><strong><code>timeoutVPN</code></strong><br /><em>String</em></td>
      <td>Set how long the request waits (in milliseconds) for an initial VPN connection to establish before timeout.</td>
      <td>Default: 30000</td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
      <td></td>
    </tr>
    <tr>
      <td><strong><code>vendor</code></strong><br /><em>String</em></td>
      <td>Name of the EMM vendor or company deploying the app. Used in help text when prompting for passcodes so users are aware why the app is being protected.</td>
      <td>Default: Mattermost</td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
    <tr>
      <td><strong><code>inAppSessionAuth</code></strong><br /><em>String</em></td>
      <td>Use the app's internal browser for SSO instead of an external browser. From Mattermost v10.2 and mobile v2.2.1, deprecated in favor of the <a href="../../administration-guide/configure/site-configuration-settings.html#mobile-external-browser">mobile external browser</a> server configuration setting.</td>
      <td>Default: <code>false</code><br />Valid: <code>true | false</code></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
-      <td><img src="../../_static/images/check-circle-green.svg" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
+      <td><img src={useBaseUrl('/img/ui/checkmark.svg')} alt="Supported" width="16" height="16" /></td>
    </tr>
  </tbody>
 </table>
@@ -1,6 +1,8 @@
 ---
 title: "Mobile deployment troubleshooting"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 ## I keep getting a message "Cannot connect to the server. Please check your server URL and internet connection."
@@ -103,19 +105,19 @@ Then use the following instructions to confirm push notifications are working pr
 1.  Log in to your mobile app with an account on your Mattermost Server, which we’ll refer to as “Account A”.
 2.  (iOS) When the app asks whether you wish to receive notifications, **confirm you want to receive notifications**.

-> <img src="../../images/mobile_push_prompt.png" width="300" alt="Mattermost prompts you to confirm whether you want to allow mobile push notifications. To test mobile push notifications, you must select Allow." />
+    <img src={useBaseUrl('/images/mobile_push_prompt.png')} width="300" alt="Mattermost prompts you to confirm whether you want to allow mobile push notifications. To test mobile push notifications, you must select Allow." />

 3.  Confirm push notifications are enabled for “Account A”.

-> 1.  Go to the notification settings menu in the mobile app.
->
-> <img src="../../images/mobile_notification_settings.gif" width="300" alt="Access notification settings by selecting your profile picture to access Settings &gt; Notifications." />
->
-> 2.  Check that the mobile push notifications are set to send.
->
-> <img src="../../images/mobile_push_send_for.png" width="300" alt="Select Push Notifications to confirm when mobile push notifications will be sent." />
->
-> <img src="../../images/mobile_push_send_when.png" width="300" alt="Specify whether all new messages or only mentions and direct messages send push notifications." />
+    1.  Go to the notification settings menu in the mobile app.
+
+        <img src={useBaseUrl('/images/mobile_notification_settings.gif')} width="300" alt="Access notification settings by selecting your profile picture to access Settings &gt; Notifications." />
+
+    2.  Check that the mobile push notifications are set to send.
+
+        <img src={useBaseUrl('/images/mobile_push_send_for.png')} width="300" alt="Select Push Notifications to confirm when mobile push notifications will be sent." />
+
+        <img src={useBaseUrl('/images/mobile_push_send_when.png')} width="300" alt="Specify whether all new messages or only mentions and direct messages send push notifications." />

 4.  Have “Account A” put the app to background or close the app.
 5.  Using a browser, log in to “Account B” on the same Mattermost Server.
@@ -1,9 +1,11 @@
 ---
 title: "Application architecture"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 Mattermost is an open-source collaboration platform that offers secure messaging, file sharing, and integrations for team communication. It's self-hosted, providing IT admins full control over data, security, integrations, and customization. The platform is built with modular components to ensure scalability, flexibility, and extensibility.

-<img src="/images/network-diagram.svg" class="bg-white" alt="Mattermost network diagram shows how the components can be deployed. Includes optional configurations for scaling for larger enterprise organizations." />
+<img src={useBaseUrl('/images/network-diagram.svg')} class="bg-white" alt="Mattermost network diagram shows how the components can be deployed. Includes optional configurations for scaling for larger enterprise organizations." />

 ## Workflow overview

@@ -31,7 +33,7 @@ The Access Layer plays a critical role in ensuring that users are always connect

 The Mattermost Server is the heart of the platform and responsible for processing all user and system operations. It's composed of multiple modular elements as follows:

-<img src="/images/architecture_basics.png" class="bg-white" alt="Mattermost architecture basics" />
+<img src={useBaseUrl('/images/architecture_basics.png')} class="bg-white" alt="Mattermost architecture basics" />

 **RESTful JSON Web Service**: Handles all incoming API requests (from web clients, apps, and integrations) and ensures that responses are formatted in JSON. Acts as the communication bridge between the clients (Access Layer) and backend systems. To ensure high availability, this layer can be distributed across multiple servers and load-balanced, preventing service disruptions due to high traffic or server failure.

@@ -109,7 +111,7 @@ If a WSS connection is not available and HTTPS is substituted, the system will a

 High availability for WSS connections can be achieved through clustering Mattermost servers and load balancing WebSocket connections across those cluster nodes. Proxy servers and WebSocket-specific configurations (such as sticky sessions or connection persistence) are essential to maintain real-time interactivity during server or network failures.

-<img src="/images/architecture_with_protocol.png" class="bg-white" alt="Mattermost architecture with protocol connections" />
+<img src={useBaseUrl('/images/architecture_with_protocol.png')} class="bg-white" alt="Mattermost architecture with protocol connections" />

 By incorporating high availability strategies into communication protocols, the platform ensures secure, scalable, and reliable connections for both regular user interactions (via HTTPS) and real-time updates (via WSS). These measures are critical for mission-critical environments and distributed deployments where continuous communication is necessary.

@@ -1,6 +1,8 @@
 ---
 title: "Deploy for Out-of-Band (OOB) Communications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 When a critical incident disrupts an organization’s primary infrastructure—due to a cyberattack, cloud outage, or internal failure—a secure, independent communication channel becomes essential. Mattermost can serve as that channel by operating in an Out-of-Band (OOB) environment: isolated, pre-provisioned, and ready to support incident response and business continuity teams.

 This document outlines architectural guidance for deploying Mattermost in an OOB scenario across [generic](#generic-oob-architecture), [AWS](#aws-based-oob-deployment), and [Azure](#azure-based-oob-deployment) environments.
@@ -9,7 +11,7 @@ This document outlines architectural guidance for deploying Mattermost in an OOB

 This platform-agnostic design establishes a fallback communication system, decoupled from primary networks and identity providers.

-<img src="/images/oob-generic-architecture.png" class="align-center" alt="Generic OOB Architecture" />
+<img src={useBaseUrl('/images/oob-generic-architecture.png')} class="align-center" alt="Generic OOB Architecture" />

 ### Architecture components

@@ -30,7 +32,7 @@ This platform-agnostic design establishes a fallback communication system, decou

 Deploying Mattermost in AWS leverages managed services and strong isolation capabilities.

-<img src="/images/oob-aws-architecture.png" class="align-center" alt="AWS OOB Deployment diagram" />
+<img src={useBaseUrl('/images/oob-aws-architecture.png')} class="align-center" alt="AWS OOB Deployment diagram" />

 ### AWS components

@@ -52,7 +54,7 @@ Deploying Mattermost in AWS leverages managed services and strong isolation capa

 For Azure customers, AKS and related services provide a robust OOB platform for Mattermost.

-<img src="/images/oob-azure-architecture.png" class="align-center" alt="Azure OOB Deployment diagram" />
+<img src={useBaseUrl('/images/oob-azure-architecture.png')} class="align-center" alt="Azure OOB Deployment diagram" />

 ### Azure components

@@ -48,10 +48,10 @@ Once Mattermost is running, complete these steps before exposing it to users:
 - Configure [pre-authentication secrets](/deployment-guide/server/pre-authentication-secrets) if your environment requires them.
 - Review the [post-install configuration checklist](/deployment-guide/server/server-deployment-planning) under Server deployment planning.

-:::tip Air-gapped environments
+:::tip[Air-gapped environments]
 If you're deploying into a network-isolated enclave, use the [Air-Gapped Quick-Start Runbook](/deployment-guide/air-gapped-operations/quick-start-runbook) instead of the connected install paths above. The runbook adds package mirroring, offline license activation, and the phone-home-disable inventory on top of the standard install.
 :::

-:::note Troubleshooting
+:::note[Troubleshooting]
 See [Deployment Troubleshooting](/deployment-guide/deployment-troubleshooting) for common install failures.
 :::
@@ -8,7 +8,7 @@ sidebar_label: "Ubuntu / Debian"

 Install Mattermost Server on Ubuntu or Debian from the signed Mattermost APT repository. The same `.deb` packages cover single-host installs and clustered deployments via tools like Packer.

-:::info Minimum requirements
+:::info[Minimum requirements]
 - **Operating system**: Ubuntu 20.04 / 22.04 / 24.04 LTS, or Debian (current stable). Other Debian-family distributions usually work but aren't tested by Mattermost.
 - **Hardware**: 1 vCPU and 2 GB RAM (supports up to ~1,000 users).
 - **Database**: [PostgreSQL 14+](/deployment-guide/postgres-migration).
@@ -29,7 +29,7 @@ Follow the [database preparation](/deployment-guide/server/preparations#database

 ## Step 3: Add the Mattermost APT repository

-:::important GPG key change
+:::important[GPG key change]
 The GPG public key has changed. Either [import the new public key](https://deb.packages.mattermost.com/pubkey.gpg) or run the repository setup script in the next step (recommended). Existing installations should remove the old key before adding the new one:

 For Ubuntu 22.04 LTS and 24.04 LTS:
@@ -66,7 +66,7 @@ sudo apt install mattermost -y

 Mattermost installs to `/opt/mattermost`. The package creates a `mattermost` user and group and a systemd unit file. The service is **not** enabled or started at this point.

-:::note systemd dependencies
+:::note[systemd dependencies]
 The Mattermost package doesn't declare a database dependency in its systemd unit (the package is used for both single-host and external-database installs). If you installed PostgreSQL on the same host, add the following to the `[Unit]` section of `/lib/systemd/system/mattermost.service`:

 ```ini
@@ -92,7 +92,7 @@ Edit `/opt/mattermost/config/config.json` and set:
 - `ServiceSettings.SiteURL`: the public URL of your deployment (e.g., `https://mattermost.example.com`).
 - (Recommended) [`SupportSettings.SupportEmail`](/administration-guide/configure/site-configuration-settings#support-email-address): the email address users contact for help.

-:::note TLS mode for `DataSource`
+:::note[TLS mode for `DataSource`]
 The `sslmode` value depends on your database environment. The two relevant options are `disable` and `require`. Managed services such as AWS Lightsail require `sslmode=require`. Check your provider's documentation.
 :::

@@ -124,7 +124,7 @@ sudo apt update && sudo apt upgrade
 sudo systemctl start mattermost
 ```

-:::important Stop the server before upgrading
+:::important[Stop the server before upgrading]
 `apt upgrade` will replace the Mattermost binary while it's running. Stop the systemd service first to avoid corrupt state.
 :::

@@ -1,6 +1,7 @@
 ---
 title: "Set up the Mattermost MySQL database"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -244,7 +245,7 @@ WantedBy=mysql.service

 # Technical notes about searching

-By default, Mattermost uses full text search support included in MySQL. Select the **product menu** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> then select **About Mattermost** to see which database you’re using.
+By default, Mattermost uses full text search support included in MySQL. Select the **product menu** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> then select **About Mattermost** to see which database you’re using.

 - Stop words are filtered out of search results. See [MySQL](https://dev.mysql.com/doc/refman/5.7/en/fulltext-stopwords.html) database documentation for a full list of applicable stop words.
 - Hashtags or recent mentions of usernames containing a dot don't return results.
@@ -1,6 +1,7 @@
 ---
 title: "Log out of Mattermost"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -16,7 +17,7 @@ You can log out of Mattermost from your profile picture. Select **Log Out** to l
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-<img src="../../images/profile-log-out-mobile.png" width="300" alt="Log out of Mattermost from your profile picture." />
+<img src={useBaseUrl('/images/profile-log-out-mobile.png')} width="300" alt="Log out of Mattermost from your profile picture." />

 </TabItem>
 </Tabs>
@@ -1,6 +1,7 @@
 ---
 title: "Archive and unarchive channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -30,7 +31,7 @@ To archive a channel:

 ![Select a channel that you want to edit.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -52,7 +53,7 @@ To archive a channel:

 <Note>

- When a Mattermost user is deactivated in the system, your [direct message channel](/end-user-guide/collaborate/channel-types#direct-message-channels) with that user are archived and marked as read-only. An **Archived** icon <img src="/img/ui/archive-outline_F120E.svg" alt="Archived channels are identified with a File Box icon." className="theme-icon" /> displays next to archived channels. From Mattermost v11.5, archived private channels display a distinct **Archive Lock** icon to differentiate them from other archived channels.
+- When a Mattermost user is deactivated in the system, your [direct message channel](/end-user-guide/collaborate/channel-types#direct-message-channels) with that user are archived and marked as read-only. An **Archived** icon <img src={useBaseUrl('/img/ui/archive-outline_F120E.svg')} alt="Archived channels are identified with a File Box icon." className="theme-icon" /> displays next to archived channels. From Mattermost v11.5, archived private channels display a distinct **Archive Lock** icon to differentiate them from other archived channels.
 - [Group message channels](/end-user-guide/collaborate/channel-types#group-message-channels) can't be archived, but they can be closed to hide them from the channel sidebar.
 - The default **Town Square** channel can't be archived.
 - System admins can archive channels without needing to be a channel member by using the System Console.
@@ -80,7 +81,7 @@ To unarchive a channel:

 ![Select a channel that you want to edit.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Browse channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -9,7 +10,7 @@ import TabItem from '@theme/TabItem';
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-1.  Select the **Plus** <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon at the top of the channel sidebar to see all available public channels you can join that you're not already a member of.
+1.  Select the **Plus** <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon at the top of the channel sidebar to see all available public channels you can join that you're not already a member of.
 2.  Select **Browse Channels**.
 3.  Search for channels by name or scroll through the list.
 4.  Select **Join** next to any channel to become a member of that channel.
@@ -29,7 +30,7 @@ From Mattermost v11.8.0, if your organization uses membership policies, **Browse
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  Tap the **Plus** <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon located in the top right corner of the app.
+1.  Tap the **Plus** <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap the plus icon to view additional options.](/images/mobile-select-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Communicate a channel's focus and scope"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -28,7 +29,7 @@ Looking to rename an existing channel? See the [rename channels](/end-user-guide

 You're prompted to provide an optional channel purpose description when [creating a channel](/end-user-guide/collaborate/create-channels) or [renaming a channel](/end-user-guide/collaborate/rename-channels). A channel purpose can be up to 250 characters in length, and is often used to help users decide whether to join that channel.

-A channel's purpose is visible in the right pane when you select the **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon for the channel. Any member of a channel can change a channel's purpose description, unless the system admin has [disabled the ability to do so](/administration-guide/onboard/advanced-permissions).
+A channel's purpose is visible in the right pane when you select the **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon for the channel. Any member of a channel can change a channel's purpose description, unless the system admin has [disabled the ability to do so](/administration-guide/onboard/advanced-permissions).

 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">
@@ -46,7 +47,7 @@ A channel's purpose is visible in the right pane when you select the **View Info

 ![Select a channel that you want to edit.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -87,7 +88,7 @@ A channel header can be up to 1024 characters in length, include Markdown format

 ![Select a channel that you want to edit.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,8 @@
 ---
 title: "Channel types"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Channels are used to organize conversations across different topics. The channels you're a member of display in the left pane. Learn how to create channels by visiting the [create channels](/end-user-guide/collaborate/create-channels) documentation.
@@ -21,13 +23,13 @@ Enterprise customers can additionally configure [read-only](/administration-guid

 ## Public channels

-Public channels are open to everyone on a team and are identified with a **Globe** <img src="/img/ui/globe_E805.svg" alt="Public channels are identified with a Globe icon." className="theme-icon" /> icon. New team members are automatically added to the **Town Square** channel.
+Public channels are open to everyone on a team and are identified with a **Globe** <img src={useBaseUrl('/img/ui/globe_E805.svg')} alt="Public channels are identified with a Globe icon." className="theme-icon" /> icon. New team members are automatically added to the **Town Square** channel.

 See the [Join and leave channels](/end-user-guide/collaborate/join-leave-channels) documentation for details on discovering, joining, and leaving other channels.

 ## Private channels

-Private channels are channels for sensitive topics and are only visible to selected team members. Private channels are identified with a **Lock** <img src="/img/ui/lock-outline_F0341.svg" alt="Private channels are identified with a Lock icon." className="theme-icon" /> icon. Channel members can choose to leave private channels at any time.
+Private channels are channels for sensitive topics and are only visible to selected team members. Private channels are identified with a **Lock** <img src={useBaseUrl('/img/ui/lock-outline_F0341.svg')} alt="Private channels are identified with a Lock icon." className="theme-icon" /> icon. Channel members can choose to leave private channels at any time.

 <Note>

@@ -47,7 +49,7 @@ Direct messages update the numbered badge count and trigger a notification unles
 <Note>

 - From Mattermost v10, when sending a direct message, Mattermost warns you that the recipient's availability is set to [Do Not Disturb](/end-user-guide/preferences/set-your-status-availability#set-your-availability), and when the recipient's local time is outside of regular business hours (between 10PM and 6AM). This warning displays directly above the message text field.
- When a Mattermost user is deactivated in the system, your [direct message channel](/end-user-guide/collaborate/channel-types#direct-message-channels) with that user are [archived](#archived-channels) and marked as read-only. An **Archived** icon <img src="/img/ui/archive-outline_F120E.svg" alt="Archived channels are identified with a File Box icon." className="theme-icon" /> displays next to archived channels.
+- When a Mattermost user is deactivated in the system, your [direct message channel](/end-user-guide/collaborate/channel-types#direct-message-channels) with that user are [archived](#archived-channels) and marked as read-only. An **Archived** icon <img src={useBaseUrl('/img/ui/archive-outline_F120E.svg')} alt="Archived channels are identified with a File Box icon." className="theme-icon" /> displays next to archived channels.

 </Note>

@@ -67,6 +69,6 @@ Want to have a group conversation with more than 7 people? [Create a private cha

 ## Archived channels

-Archived channels are deactivated public, private, direct message, or group message channels that are no longer used. Archived channels are identified with a **File Box** <img src="/img/ui/archive-outline_F120E.svg" alt="Archived channels are identified with a File Box icon." className="theme-icon" /> icon. From Mattermost v11.5, archived private channels are identified with a distinct **Archive Lock** icon to visually differentiate them from archived public channels.
+Archived channels are deactivated public, private, direct message, or group message channels that are no longer used. Archived channels are identified with a **File Box** <img src={useBaseUrl('/img/ui/archive-outline_F120E.svg')} alt="Archived channels are identified with a File Box icon." className="theme-icon" /> icon. From Mattermost v11.5, archived private channels are identified with a distinct **Archive Lock** icon to visually differentiate them from archived public channels.

 [Archiving a channel](/end-user-guide/collaborate/archive-unarchive-channels#archive-a-channel) marks it read-only to prevent new messages from being sent and preserve channel history. You can continue to access archived channels, unless your system admin has [disabled](/administration-guide/configure/site-configuration-settings#allow-users-to-view-archived-channels) your ability to do so.
@@ -1,6 +1,7 @@
 ---
 title: "Convert group messages to private channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -31,7 +32,7 @@ From Mattermost v9.1, you can change the members of your group conversation by c

 ![Select a group that you want to convert.](/images/mobile-select-a-group-message.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the group.](/images/mobile-select-more-options-for-a-group.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Convert public channels to private channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -30,7 +31,7 @@ To convert a public channel to a private channel:

 ![Select a channel that you want to rename.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Create channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -13,9 +14,9 @@ Anyone can create public channels, private channels, direct messages, and group

 ## Create a public or private channel

-1.  Select the **Add channels** button in the channel sidebar, then select **Create New Channel**. Alternatively, you can select <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Create New Channel**.
+1.  Select the **Add channels** button in the channel sidebar, then select **Create New Channel**. Alternatively, you can select <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Create New Channel**.

-> <img src="../../images/add-channels-button.png" width="400" alt="You can create a channel using the Add channels button" />
+> <img src={useBaseUrl('/images/add-channels-button.png')} width="400" alt="You can create a channel using the Add channels button" />

 2.  Enter a channel name.
 3.  Choose whether this is a public or private channel. See the [channel types](/end-user-guide/collaborate/channel-types) documentation to learn more about public and private channels.
@@ -24,7 +25,7 @@ Anyone can create public channels, private channels, direct messages, and group

 ## Start a direct or group message

-1.  Select the <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> next to the **Direct Messages** category in the channel sidebar.
+1.  Select the <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> next to the **Direct Messages** category in the channel sidebar.

 > ![Access recent direct messages and group messages.](/images/write-dm.png)

@@ -32,7 +33,7 @@ Anyone can create public channels, private channels, direct messages, and group

 <Tip>

- Alternatively, select <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Open a Direct Message**. In the **Direct Messages** list, you'll see your most recent conversations.
+- Alternatively, select <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Open a Direct Message**. In the **Direct Messages** list, you'll see your most recent conversations.
 - To add more people to the conversation select the channel name, then select **Add Members**. Adding members to a group message creates a new channel and starts a new conversation.
 - You can't remove members of a group message; however, you can start a new group channel and conversation with different members.
 - If you want to add more than 7 users to a group message, create a private channel instead.
@@ -44,7 +45,7 @@ Anyone can create public channels, private channels, direct messages, and group

 ## Create a public or private channel

-Tap <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> in the top right corner of the app, then select **Create New Channel**. Channels are created as public by default. If you want to create a private channel, tap the **Make Private** option.
+Tap <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> in the top right corner of the app, then select **Create New Channel**. Channels are created as public by default. If you want to create a private channel, tap the **Make Private** option.

 > ![You can create a new channel by tapping the plus in the top right corner.](/images/create-channel-or-open-direct-message-on-mobile.jpg)
 >
@@ -52,7 +53,7 @@ Tap <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to chan

 ## Start a direct or group message

-Tap <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> in the top right corner of the app, then select **Open a Direct Message**. You can select one person for a direct message or up to seven people for a group message. If your organization uses [connected workspaces](/administration-guide/onboard/connected-workspaces), remote users from shared channels are also available to select. Tap **Start** to start the conversation.
+Tap <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> in the top right corner of the app, then select **Open a Direct Message**. You can select one person for a direct message or up to seven people for a group message. If your organization uses [connected workspaces](/administration-guide/onboard/connected-workspaces), remote users from shared channels are also available to select. Tap **Start** to start the conversation.

 > ![You can start a direct or group message by tapping the plus in the top right corner.](/images/create-channel-or-open-direct-message-on-mobile.jpg)
 >
@@ -1,6 +1,7 @@
 ---
 title: "Mark channels as favorites"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -18,13 +19,13 @@ To mark a channel as a **Favorite**:
 1.  Open a channel.
 2.  Select on the star icon next to the channel name.

-At the top of the page, select the <img src="/img/ui/star-outline_F04D2.svg" alt="Use the Star icon to mark a channel as a favorite." className="theme-icon" /> icon next to the channel name.
+At the top of the page, select the <img src={useBaseUrl('/img/ui/star-outline_F04D2.svg')} alt="Use the Star icon to mark a channel as a favorite." className="theme-icon" /> icon next to the channel name.

 ![Mark a channel as a favorite.](/images/favorite-channel-desktop.png)

-To remove a channel from your **Favorites** list, select the <img src="/img/ui/star-outline_F04D2.svg" alt="Use the Star icon to mark a channel as a favorite." className="theme-icon" /> icon again.
+To remove a channel from your **Favorites** list, select the <img src={useBaseUrl('/img/ui/star-outline_F04D2.svg')} alt="Use the Star icon to mark a channel as a favorite." className="theme-icon" /> icon again.

-Alternatively to mark channels as favorites, select the channel name, select the **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, then select **Favorite** in the right pane. Select **Favorited** to remove the channel from your list of favorites.
+Alternatively to mark channels as favorites, select the channel name, select the **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, then select **Favorite** in the right pane. Select **Favorited** to remove the channel from your list of favorites.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -33,7 +34,7 @@ Alternatively to mark channels as favorites, select the channel name, select the

 ![Select a channel that you want to mark as favorite.](/images/mobile-select-a-channel.jpg)

-2.  Tap the <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,8 @@
 ---
 title: "Quarantine for Review"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-adv" />

 Every Mattermost user contributes to data security. From Mattermost v11.1, you can help keep your workspace secure and prevent data spillage by quarantining messages that may contain sensitive or restricted information for review by authorized moderators. Your quick actions can prevent accidental leaks before they spread, and build a culture of shared responsibility for secure communication.
@@ -9,7 +11,7 @@ Every Mattermost user contributes to data security. From Mattermost v11.1, you c

 For example, you notice a public post in a channel that contains internal project details that not all users should have access to. You can quarantine that message as **Sensitive data** to alert designated content reviewers right away.

-1.  Hover over the message, select the **More actions** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon, and then select **Quarantine for Review**.
+1.  Hover over the message, select the **More actions** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon, and then select **Quarantine for Review**.
 2.  Select a **reason** for quarantining the message, and add a comment explaining why you're quarantining it, when required.
 3.  Select **Submit**.

@@ -1,6 +1,7 @@
 ---
 title: "Format messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -59,11 +60,11 @@ The message formatting toolbar offers the following formatting options:
 </tbody>
 </table>

-Review how your message formatting will look when the message is sent by selecting the **Show/Hide Preview** <img src="/img/ui/eye-outline_F06D0.svg" alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon. Return to your draft message by selecting the icon again.
+Review how your message formatting will look when the message is sent by selecting the **Show/Hide Preview** <img src={useBaseUrl('/img/ui/eye-outline_F06D0.svg')} alt="Review your message text formatting using the Show/Hide preview icon in the message formatting toolbar." className="theme-icon" /> icon. Return to your draft message by selecting the icon again.

 <Tip>

- Hide the formatting options by selecting the **Show/Hide Formatting** <img src="/img/ui/format-letter-case_F0B34.svg" alt="Hide formatting options in the message formatting toolbar using the Show/Hide Formatting icon." className="theme-icon" /> icon. Select the icon again to show the formatting options.
+- Hide the formatting options by selecting the **Show/Hide Formatting** <img src={useBaseUrl('/img/ui/format-letter-case_F0B34.svg')} alt="Hide formatting options in the message formatting toolbar using the Show/Hide Formatting icon." className="theme-icon" /> icon. Select the icon again to show the formatting options.
 - You can control whether post formatting is rendered within the message formatting editor. When disabled, raw text is shown. See the [Channels customization](/end-user-guide/preferences/manage-advanced-options) documentation for details.

 </Tip>
@@ -86,8 +87,8 @@ Common formatting keyboard shortcuts are supported. Bold text by pressing <kbd>C

 - `*italics*` (or `_italics_`) renders as *italics*
 - `**bold**` renders as **bold**
- `***bold-italic***` renders as <img src="../../images/bold_italics.png" width="100" alt="Bold Italics" />
- `~~strikethrough~~` renders as <img src="../../images/strikethrough.png" width="100" alt="Strike Through" />
+- `***bold-italic***` renders as <img src={useBaseUrl('/images/bold_italics.png')} width="100" alt="Bold Italics" />
+- `~~strikethrough~~` renders as <img src={useBaseUrl('/images/strikethrough.png')} width="100" alt="Strike Through" />

 ### Links

@@ -562,7 +563,7 @@ Example: An in-line image that's 50 pixels wide and 76 pixels high.

 Renders as:

-> <img src="../../images/icon-50x76.png" id="Mattermost Icon" alt="Mattermost" />
+> <img src={useBaseUrl('/images/icon-50x76.png')} id="Mattermost Icon" alt="Mattermost" />

 #### In-line image displayed with fixed width

@@ -574,7 +575,7 @@ Example: An in-line image that's 50 pixels wide where the system adjusts the hei

 Renders as:

-> <img src="../../images/icon-76x76.png" width="50" alt="Mattermost" />
+> <img src={useBaseUrl('/images/icon-76x76.png')} width="50" alt="Mattermost" />

 ### Horizontal lines

@@ -1,6 +1,8 @@
 ---
 title: "Forward messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 From Mattermost v7.2, using a web browser or the desktop app, you can forward messages in public channels to other public channels. From Mattermost v7.5, you can also forward messages from bots and webhooks.
@@ -13,7 +15,7 @@ Private channels, direct messages, and group messages intended for specific peop

 To forward a message:

-1.  Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message, then select **Forward**.
+1.  Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message, then select **Forward**.

 > ![You can forward messages to others using the More option.](/images/forward-message.png)

@@ -1,6 +1,7 @@
 ---
 title: "Invite people to your workspace"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -28,7 +29,7 @@ Anyone can invite people to Mattermost teams and channels, unless your system ad
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  Tap the <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the top right corner of the screen and tap **Invite people to the team**.
+1.  Tap the <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the top right corner of the screen and tap **Invite people to the team**.

 > ![When you select +, you can access more options from the popup window.](/images/mobile-invite-people-to-the-team.png)

@@ -1,6 +1,7 @@
 ---
 title: "Join and leave channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -10,8 +11,8 @@ import TabItem from '@theme/TabItem';

 Channels are either **public** or **private**.

- **Public** channels are identified with a **Globe** <img src="/img/ui/globe_E805.svg" alt="Public channels are identified with a Globe icon." className="theme-icon" /> icon. Anyone on the team can join a public channel.
- **Private** channels are typically used for sensitive topics, and are identified with a **Lock** <img src="/img/ui/lock-outline_F0341.svg" alt="Private channels are identified with a Lock icon." className="theme-icon" /> icon. You must be invited to private channels by another channel member.
+- **Public** channels are identified with a **Globe** <img src={useBaseUrl('/img/ui/globe_E805.svg')} alt="Public channels are identified with a Globe icon." className="theme-icon" /> icon. Anyone on the team can join a public channel.
+- **Private** channels are typically used for sensitive topics, and are identified with a **Lock** <img src={useBaseUrl('/img/ui/lock-outline_F0341.svg')} alt="Private channels are identified with a Lock icon." className="theme-icon" /> icon. You must be invited to private channels by another channel member.

 <Note>

@@ -26,9 +27,9 @@ To join a public channel:

 1.  Select the **Add channels** button in the channel sidebar, then select **Browse Channels**.

-> <img src="../../images/add-channels-button.png" width="400" alt="You can browse channels using the Add channels button" />
+> <img src={useBaseUrl('/images/add-channels-button.png')} width="400" alt="You can browse channels using the Add channels button" />
 >
-> Alternatively, you can select <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Browse Channels**.
+> Alternatively, you can select <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Browse Channels**.
 >
 > ![You can browse available channels to join using the + option at the top of the channel sidebar.](/images/browse-channels.png)

@@ -39,7 +40,7 @@ To join a public channel:
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  Tap <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> located in the top right corner the app.
+1.  Tap <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> located in the top right corner the app.

 ![Tap the plus icon to view additional options.](/images/mobile-select-a-channel.jpg)

@@ -91,7 +92,7 @@ Select the channel name at the top of the center pane to access the drop-down me

 ![Select the channel that you want to leave.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel you want to leave.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Make calls"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -69,7 +70,7 @@ On iOS, audio will automatically come through a connected device. You can overri

 From Mattermost v9.9, and Mattermost mobile v2.17, call host controls are available and include the ability to [transfer host duties](#transfer-host-duties), [remove call participants](#remove-call-participants), [stop a screen share](#stop-a-screen-share), [mute or unmute participants](#mute-participants), [lower raised hands](#lower-raised-hands), and [end the call for everyone](#end-the-call-for-everyone).

-Host controls are available to call hosts and admins in both the call widget by selecting the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a participant's name, and in the expanded the call window as hosts hover over a call participant in the list.
+Host controls are available to call hosts and admins in both the call widget by selecting the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a participant's name, and in the expanded the call window as hosts hover over a call participant in the list.

 ### Transfer host duties

@@ -160,7 +161,7 @@ A chat thread is created automatically for every new call.
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Open the chat thread in the widget by selecting the **Gear** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon, then select **Show chat thread**. Alternatively, expand the call window using the arrows in the top-right of the call widget. From there, select the chat icon to access the chat thread.
+Open the chat thread in the widget by selecting the **Gear** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon, then select **Show chat thread**. Alternatively, expand the call window using the arrows in the top-right of the call widget. From there, select the chat icon to access the chat thread.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -218,7 +219,7 @@ Alternatively, expand the call window using the arrows in the top-right of the a

 <PlanAvailability slug="ent-plus" />

-From Mattermost v9.7, and Mattermost mobile app v.2.16, all call participants can display real-time text captions by selecting the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon and **Show live captions** when the call is being recorded, and when [live captions are enabled](/administration-guide/configure/plugins-configuration-settings#enable-live-captions). Live captions can be helpful in cases where noise is preventing you from hearing the audio of participants clearly.
+From Mattermost v9.7, and Mattermost mobile app v.2.16, all call participants can display real-time text captions by selecting the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon and **Show live captions** when the call is being recorded, and when [live captions are enabled](/administration-guide/configure/plugins-configuration-settings#enable-live-captions). Live captions can be helpful in cases where noise is preventing you from hearing the audio of participants clearly.

 By default, live captions display in English. Your Mattermost system admin can [specify a different language for live captions](/administration-guide/configure/plugins-configuration-settings#live-captions-language) in the System Console.

@@ -274,7 +275,7 @@ The only external service used is Mattermost official STUN server (`stun.global.

 ### My audio doesn't work when I join a call

-If you can hear the other participants in the call but they can't hear you, select the Gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to the call end button in the widget. From there, you can check and change your audio output and microphone settings. Select <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> again to close the menu. Alternatively, you can [manage your audio and microphone preferences](/end-user-guide/preferences/manage-your-plugin-preferences) in **Settings**.
+If you can hear the other participants in the call but they can't hear you, select the Gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to the call end button in the widget. From there, you can check and change your audio output and microphone settings. Select <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> again to close the menu. Alternatively, you can [manage your audio and microphone preferences](/end-user-guide/preferences/manage-your-plugin-preferences) in **Settings**.

 ### My call is disconnected after a few seconds

@@ -1,6 +1,7 @@
 ---
 title: "Manage channel bookmarks"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -29,7 +30,7 @@ From Mattermost v10.11, bookmarks containing `mattermost://` links open directly

 The bookmarks bar is hidden when a channel has no bookmarks.

-1.  In a channel, select the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon.
+1.  In a channel, select the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -41,7 +42,7 @@ The bookmarks bar is hidden when a channel has no bookmarks.

 ![Tap on Add a bookmark to add the first bookmark.](/images/mobile-add-first-channel-bookmark.jpg)

-For subsequent bookmarks, select the **Plus** <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the bookmarks bar.
+For subsequent bookmarks, select the **Plus** <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the bookmarks bar.

 ![Tap on the Plus icon to add more bookmarks to the channel.](/images/mobile-add-subsequent-channel-bookmarks.jpg)

@@ -80,7 +81,7 @@ You can make changes to the bookmark link or file, the bookmark title, or the op
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Edit**.
+Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Edit**.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -104,7 +105,7 @@ You can copy bookmark links when your system admin has [enabled your ability to
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Copy link**.
+Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Copy link**.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -124,7 +125,7 @@ Deleting a channel bookmark deletes it for all channel members.
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Delete**.
+Select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a bookmark and select **Delete**.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -1,6 +1,7 @@
 ---
 title: "Manage channel members"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -35,7 +36,7 @@ To add members to a channel:
    </div>

    - From Mattermost v7.8, people you've messaged directly are listed first, followed by all users in alphabetical order.
-    - Alternatively, to add members to a channel, select the channel name, select the **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, select **Members** in the right pane, and then select **Add**. If the channel has access control restrictions, you'll see details about required attributes at the top of the right pane.
+    - Alternatively, to add members to a channel, select the channel name, select the **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, select **Members** in the right pane, and then select **Add**. If the channel has access control restrictions, you'll see details about required attributes at the top of the right pane.

    </div>

@@ -76,7 +77,7 @@ Using a web browser or the desktop app, you can also add users to channels withi

 1.  Select a user's profile image.

-2.  Tap on <img src="/img/ui/account-plus-outline_F0801.svg" alt="Account plus outline icon used to add user to a channel." className="theme-icon" /> icon.
+2.  Tap on <img src={useBaseUrl('/img/ui/account-plus-outline_F0801.svg')} alt="Account plus outline icon used to add user to a channel." className="theme-icon" /> icon.

    ![Use options on a user's profile pop-over to add a member to a channel.](/images/add-member-pop.jpg)

@@ -96,7 +97,7 @@ Select the channel name at the top of the center pane to access the drop-down me
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  In a channel, tap <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> in the top right corner.
+1.  In a channel, tap <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> in the top right corner.

    ![Tap on More options to access available options for the channel you want to leave.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -122,14 +123,14 @@ Any member of a channel can remove other members from a channel.
 You have two ways to remove members from a channel:

 - Select the channel name at the top of the center pane to access the drop-down menu, then select **Manage Members**. Select the member's [user role](/end-user-guide/collaborate/learn-about-roles), then select **Remove from Channel**.
- Select the channel's **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, and select **Members** in the right pane. From there, select **Manage**, select a user's role, then select **Remove from Channel**.
+- Select the channel's **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, and select **Members** in the right pane. From there, select **Manage**, select a user's role, then select **Remove from Channel**.

 ![Use options available through the channel name to remove a member from a channel.](/images/remove-member-from-channel.png)

 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  In a channel, tap <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> in the top right corner.
+1.  In a channel, tap <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> in the top right corner.

    ![Tap on More options to access available options for the channel you want to leave.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,9 +1,11 @@
 ---
 title: "Mark messages as unread"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-If you read messages in a channel, but don't have time to address them right away, you can mark that channel as unread. Hover over the channel name in the channel sidebar, select the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> option, then select **Mark as Unread**.
+If you read messages in a channel, but don't have time to address them right away, you can mark that channel as unread. Hover over the channel name in the channel sidebar, select the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> option, then select **Mark as Unread**.

 ![When you hover over channels in the channel sidebar, you can access more message options from the More icon.](/images/channel-more.png)

@@ -1,6 +1,7 @@
 ---
 title: "Mark messages as unread"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -11,7 +12,7 @@ If you read a message, but don't have time to address it right away, you can mar
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Hover over the message, select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> option, then select **Mark as Unread**.
+Hover over the message, select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> option, then select **Mark as Unread**.

 ![When you hover over messages, you can access more message options from the More icon.](/images/message-more.png)

@@ -1,15 +1,17 @@
 ---
 title: "Set message priority"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 From Mattermost v7.7 and mobile v2.4, you can add a message priority label to root messages to make important messages requiring timely action or response more visible and less likely to be overlooked.

-<img src="../../images/MPA-Animated-GIF-Update-2023-08-15.gif" width="700" alt="Ensure important and urgent messages stand out clearly by adding priority labels to root messages." />
+<img src={useBaseUrl('/images/MPA-Animated-GIF-Update-2023-08-15.gif')} width="700" alt="Ensure important and urgent messages stand out clearly by adding priority labels to root messages." />

 To set the priority of a new root message:

-1.  Select the **Message Priority** <img src="/img/ui/alert-circle-outline_F05D6.svg" alt="Mark a message as important or urgent using the Priority Message icon." className="theme-icon" /> icon in the message formatting toolbar. Select from Standard, Important, or Urgent.
+1.  Select the **Message Priority** <img src={useBaseUrl('/img/ui/alert-circle-outline_F05D6.svg')} alt="Mark a message as important or urgent using the Priority Message icon." className="theme-icon" /> icon in the message formatting toolbar. Select from Standard, Important, or Urgent.
 2.  Select the priority for the message. Messages have a standard priority by default.
 3.  Select **Apply**

@@ -22,7 +24,7 @@ From Mattermost v8.0, messages marked as urgent with a priority label and contai
 To enable persistent notifications for a message:

 1.  Compose a root message with at least one @mention.
-2.  Select the **Message Priority** <img src="/img/ui/alert-circle-outline_F05D6.svg" alt="Mark a message as important or urgent using the Priority Message icon." className="theme-icon" /> icon in the message formatting toolbar.
+2.  Select the **Message Priority** <img src={useBaseUrl('/img/ui/alert-circle-outline_F05D6.svg')} alt="Mark a message as important or urgent using the Priority Message icon." className="theme-icon" /> icon in the message formatting toolbar.
 3.  Select **Urgent**.
 4.  Select **Send persistent notifications**.
 5.  Select **Apply**.
@@ -48,11 +50,11 @@ To stop receiving persistent notifications, you can reply to the thread, select

 You can additionally request that recipients actively acknowledge the message to track that messages have been seen and actioned. By default, marking a message as Urgent priority automatically requests an acknowledgement.

-When you request acknowlegement of a message, an **Acknowledge** <img src="/img/ui/Ack-Button-Default.svg" alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> button is added below the sent message. You can mark message as acknowledged by selecting the button, and you can hover over the **Acknowledged** <img src="/img/ui/Ack-Button-Default.svg" alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> icon to review who has acknowledged the message.
+When you request acknowledgement of a message, an **Acknowledge** <img src={useBaseUrl('/img/ui/Ack-Button-Default.svg')} alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> button is added below the sent message. You can mark the message as acknowledged by selecting the button, and you can hover over the **Acknowledged** <img src={useBaseUrl('/img/ui/Ack-Button-Default.svg')} alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> icon to review who has acknowledged the message.

 <Tip>

 - When you have push notifications enabled on mobile, you'll be notified every five minutes until you acknowledge or reply to the message.
- After acknowledging a message, you have up to five minutes to change your mind. Select the **Acknowledged** <img src="/img/ui/Ack-Button-Default.svg" alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> button again to remove your name from the list of acknowledged users.
+- After acknowledging a message, you have up to five minutes to change your mind. Select the **Acknowledged** <img src={useBaseUrl('/img/ui/Ack-Button-Default.svg')} alt="Select the Acknowledge button to indicate that you've read it and taken necessary action." /> button again to remove your name from the list of acknowledged users.

 </Tip>
@@ -1,11 +1,13 @@
 ---
 title: "Set a reminder"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 From Mattermost v7.10, using Mattermost in a web browser or the desktop app, you can set 1 timed reminder on a post made in a channel, direct message, and group message. The ability to set up recurring reminders isn't supported.

-Hover over the message you want to remember, select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> option, then select **Remind**. Select a time period or enter a custom date and time. You'll receive a direct message at the time you've chosen, with the body of the message you wanted to be reminded about.
+Hover over the message you want to remember, select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> option, then select **Remind**. Select a time period or enter a custom date and time. You'll receive a direct message at the time you've chosen, with the body of the message you wanted to be reminded about.

 Once you've been reminded about a message, you won't receive another reminder unless you set one.

@@ -1,6 +1,7 @@
 ---
 title: "Organize conversations using threaded discussions"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -23,7 +24,7 @@ Threaded discussions offers an enhanced experience for users communicating in th

 [Replies to messages](/end-user-guide/collaborate/reply-to-messages) are collapsed under the first message of a thread. Open a thread by selecting the message or reply count.

-From Mattermost v11.2, when using Mattermost in a web browser, you can open threads in separate browser windows by selecting the **New Window** <img src="/img/ui/dock-window_F10AC.svg" alt="Open thread in a new browser window icon." /> icon in the thread header. This allows you to view and participate in multiple threads simultaneously without losing context.
+From Mattermost v11.2, when using Mattermost in a web browser, you can open threads in separate browser windows by selecting the **New Window** <img src={useBaseUrl('/img/ui/dock-window_F10AC.svg')} alt="Open thread in a new browser window icon." /> icon in the thread header. This allows you to view and participate in multiple threads simultaneously without losing context.

 ## Follow threads and messages

@@ -34,13 +35,14 @@ You'll automatically follow every thread you participate or are mentioned in. Yo
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Toggle the thread’s **Follow** option, or select **Follow thread** from the **More Actions** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon.
+Toggle the thread’s **Follow** option, or select **Follow thread** from the **More Actions** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon.

 ![Unfollow threads from the More Actions icon.](/images/crt-following-thread.jpg)

 <Tip>

-\- Follow messages with no replies from the **More Actions** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon to be notified if someone replies to the message later based on your notification preferences. - You can also use keyboard arrow keys to navigate threads in the **Threads** view.
+- Follow messages with no replies from the **More Actions** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon to be notified if someone replies to the message later based on your notification preferences.
+- You can also use keyboard arrow keys to navigate threads in the **Threads** view.

 </Tip>

@@ -57,7 +59,7 @@ Alternatively, you can also tap on the **Follow** indicator below a message thre

 <Tip>

-Follow messages with no replies from the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon to be notified if someone replies to the message later based on your notification preferences.
+Follow messages with no replies from the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon to be notified if someone replies to the message later based on your notification preferences.

 ![Tap and hold on a message with no replies to select Follow Message.](/images/mobile-follow-a-message-with-no-replies.gif)

@@ -74,7 +76,7 @@ If you’re no longer interested in a or message thread, unfollow it to stop rec
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Toggle the thread’s **Following** indicator, or select **Unfollow thread** from the **More Actions** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon to unfollow it.
+Toggle the thread’s **Following** indicator, or select **Unfollow thread** from the **More Actions** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon to unfollow it.

 ![Unfollow threads from the More Actions icon.](/images/desktop-unfollow-message-thread.jpg)

@@ -1,6 +1,8 @@
 ---
 title: "Manage custom groups"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Custom groups reduce noise and improve focus by notifying the right people in a channel at the right time, while maintaining transparency for all members in that channel. Custom user groups let you notify up to 256 users at a time rather than notifying users individually.
@@ -21,7 +23,7 @@ Once a custom user group has been created, you can mention that group the same w

 ## Create a custom group

-1.  Using Mattermost in a web browser or the desktop app, select <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Create New User Group**.
+1.  Using Mattermost in a web browser or the desktop app, select <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the channel sidebar, then select **Create New User Group**.
 2.  Specify a name and mention. The mention is the handle you use to @mention a notification to the group. Group names must be unique across the Mattermost [workspace](/end-user-guide/end-user-guide-index). If a name is in use as a channel name, display name, or another custom group's name, it won't be available.
 3.  Search for and select members to add to the custom user group, then select **Create Group**.

@@ -49,11 +51,11 @@ You can filter the list of groups to display only groups you're a member of, or

 ### Change name or mention

-1.  From the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon to the right of any custom group, select **View Group**.
+1.  From the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon to the right of any custom group, select **View Group**.

 > ![Access tools to manage your custom user groups.](/images/manage-user-groups.png)

-2.  From the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Edit Details**.
+2.  From the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Edit Details**.

 > ![Edit details of a custom user group.](/images/edit-custom-group.png)

@@ -70,16 +72,16 @@ Hover over a member, then select the **Trash** icon to remove them from the grou

 ### Join a group

-While viewing the members of a group, from the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Join Group**.
+While viewing the members of a group, from the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Join Group**.

 ### Leave a group

-From the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Leave Group**.
+From the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Leave Group**.

 ### Archive group

-From the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Archive Group**. When you archive a custom user group, you won’t be able to mention the group’s handle or view its members. However, the group isn't deleted from the list, and all members remain in the group unless they're manually removed.
+From the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, select **Archive Group**. When you archive a custom user group, you won’t be able to mention the group’s handle or view its members. However, the group isn't deleted from the list, and all members remain in the group unless they're manually removed.

 ### Unarchive group

-From Mattermost v9.1, you can restore an archived group. From the **More Actions** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, filter the list of groups to show only archived groups. Select an archived group view details about the group, if preferreed, and then select **Restore Group**.
+From Mattermost v9.1, you can restore an archived group. From the **More Actions** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon, filter the list of groups to show only archived groups. Select an archived group to view details about the group, if preferred, and then select **Restore Group**.
@@ -1,6 +1,7 @@
 ---
 title: "React with emojis and GIFs"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -41,7 +42,7 @@ Can't find the perfect emoji? [Upload your own custom emoji](#upload-custom-emoj
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Select the **Smile** icon <img src="/img/ui/emoticon-plus-outline_E80F.svg" alt="Use the Smile icon to add emojis to your message." className="theme-icon" /> inside the Mattermost message input box to open the emoji and GIF picker.
+Select the **Smile** icon <img src={useBaseUrl('/img/ui/emoticon-plus-outline_E80F.svg')} alt="Use the Smile icon to add emojis to your message." className="theme-icon" /> inside the Mattermost message input box to open the emoji and GIF picker.

 Select an emoji from the **Emojis** tab, or switch to the **GIFs** tab to search for a GIF.

@@ -52,7 +53,7 @@ You can also specify emojis based on their name. Type `:` followed by at least t
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-Select the <img src="/img/ui/emoticon-plus-outline_E80F.svg" alt="Use the Smile icon to add emojis to your message." className="theme-icon" /> to add an emoji. Mattermost accesses the emojis and GIFs available on your mobile device. You can also specify emojis based on their name. Type at least two characters of the word describing the emoji. This opens an emoji autocomplete.
+Select the <img src={useBaseUrl('/img/ui/emoticon-plus-outline_E80F.svg')} alt="Use the Smile icon to add emojis to your message." className="theme-icon" /> to add an emoji. Mattermost accesses the emojis and GIFs available on your mobile device. You can also specify emojis based on their name. Type at least two characters of the word describing the emoji. This opens an emoji autocomplete.

 ![Tap and hold on a message to access the recent emojis or even choose other ones.](/images/mobile-include-emojis-for-a-message-reaction.gif)

@@ -1,6 +1,7 @@
 ---
 title: "Rename channels"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -27,7 +28,7 @@ For example, a channel could be named `UX Design` and have a URL of `https://com

 > ![Select a channel that you want to rename.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 > ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Reply to messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -9,7 +10,7 @@ import TabItem from '@theme/TabItem';
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Reply to messages by selecting the **Reply** <img src="/img/ui/reply-outline_F0F20.svg" alt="Reply icon." className="theme-icon" /> icon next to the message text.
+Reply to messages by selecting the **Reply** <img src={useBaseUrl('/img/ui/reply-outline_F0F20.svg')} alt="Reply icon." className="theme-icon" /> icon next to the message text.

 ![Reply to Mattermost messages](/images/reply-to-message.png)

@@ -1,6 +1,7 @@
 ---
 title: "Save and pin messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -16,7 +17,7 @@ You have two ways to mark a post to make it easy to find later:
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Save messages for later follow up by selecting the **Save** <img src="/img/ui/bookmark-outline_F00C3.svg" alt="Save icon." className="theme-icon" /> icon next to a message.
+Save messages for later follow up by selecting the **Save** <img src={useBaseUrl('/img/ui/bookmark-outline_F00C3.svg')} alt="Save icon." className="theme-icon" /> icon next to a message.

 ![Save messages for later follow up using the Save option.](/images/save-message.png)

@@ -33,7 +34,7 @@ Long press a message, and then select **Save**.

 ![Tap and hold on a message in the channel to explore available options to save it.](/images/mobile-save-a-message.gif)

-To see all of your saved messages, tap the **Save** <img src="/img/ui/bookmark-outline_F00C3.svg" alt="Save icon." className="theme-icon" /> icon at the bottom of the app.
+To see all of your saved messages, tap the **Save** <img src={useBaseUrl('/img/ui/bookmark-outline_F00C3.svg')} alt="Save icon." className="theme-icon" /> icon at the bottom of the app.

 ![Tap on Save icon at the bottom of the app to access the Saved Messages list.](/images/mobile-view-saved-messages.gif)

@@ -41,7 +42,7 @@ Remove an item from your **Saved Messages** list by long pressing a message and

 ![Tap and hold on a message in the saved messages list to explore available options to unsave it.](/images/mobile-unsave-a-message-from-saved-messages.gif)

-Alternatively, you can also tap on the saved message in a channel and then tap the <img src="/img/ui/bookmark_F00C0.svg" alt="Saved icon." className="theme-icon" /> icon below it to unsave.
+Alternatively, you can also tap on the saved message in a channel and then tap the <img src={useBaseUrl('/img/ui/bookmark_F00C0.svg')} alt="Saved icon." className="theme-icon" /> icon below it to unsave.

 ![Tap and hold on a saved message in the channel to explore available options to unsave it.](/images/mobile-unsave-a-message-from-the-channel.gif)

@@ -51,12 +52,12 @@ Alternatively, you can also tap on the saved message in a channel and then tap t

 ## Pin messages

-All members of a channel can pin important or useful messages to that channel. The list of pinned messages is visible to all channel members. There is no limit to the number of pinned posts in a channel. From Mattermost v10.2, the **Pinned** <img src="/img/ui/pin-outline_F0931.svg" alt="Pin icon used to indicate when there are pinned messages in a given channel." /> icon is hidden when no messages are pinned.
+All members of a channel can pin important or useful messages to that channel. The list of pinned messages is visible to all channel members. There is no limit to the number of pinned posts in a channel. From Mattermost v10.2, the **Pinned** <img src={useBaseUrl('/img/ui/pin-outline_F0931.svg')} alt="Pin icon used to indicate when there are pinned messages in a given channel." /> icon is hidden when no messages are pinned.

 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-1.  Hover over the message that you want to pin. The **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon link appears.
+1.  Hover over the message that you want to pin. The **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon link appears.
 2.  Select the **More** option, then select **Pin to channel**.

 ![You can pin messages to make them easy to return to later.](/images/pin-message-to-channel.png)
@@ -75,7 +76,7 @@ The right-hand sidebar opens to show the list of pinned messages. For example:

 To unpin a message:

-1.  Mouse over the message that you want to unpin. The **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon link appears.
+1.  Mouse over the message that you want to unpin. The **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon link appears.
 2.  Select the **More** icon, then select **Unpin from channel**

 ![You can unpin messages from a channel when they're no longer needed or become outdated.](/images/unpin-message-from-channel.png)
@@ -93,7 +94,7 @@ To see all of your pinned messages in a channel:

 ![Select a channel whose pinned messages you want to view.](/images/mobile-select-a-channel.jpg)

-2.  Tap the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.
+2.  Tap the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon located in the top right corner of the app.

 ![Tap on More options to access available options for the channel.](/images/mobile-select-more-options-for-a-channel.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Schedule messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -36,7 +37,7 @@ You can manage scheduled messages with the following actions:
 - **Reschedule message**: Change when the message should be sent.
 - **Send now**: Confirm that you want to send the message immediately.

-<img src="../../images/manage-scheduled-message.png" width="600" alt="Once a message is scheduled, you can delete, edit, and reschedule it, copy the message text, or send it immediately." />
+<img src={useBaseUrl('/images/manage-scheduled-message.png')} width="600" alt="Once a message is scheduled, you can delete, edit, and reschedule it, copy the message text, or send it immediately." />

 <Note>

@@ -55,10 +56,10 @@ Scheduled messages may fail for the following reasons:

 If a scheduled message fails to send, you'll be alerted 2 ways:

- A red badge displays a total scheduled post count in the left pane next to **Drafts**. <img src="/img/ui/schedule-count-red-badge.png" alt="Total count of scheduled messages." />
- An alert banner dislays on the **Scheduled** tab
+- A red badge displays a total scheduled post count in the left pane next to **Drafts**. <img src={useBaseUrl('/img/ui/schedule-count-red-badge.png')} alt="Total count of scheduled messages." />
+- An alert banner displays on the **Scheduled** tab

-<img src="../../images/troubleshoot-scheduled-message.png" width="600" alt="If a scheduled draft message can&#39;t be sent, Mattermost provides context about why it can&#39;t be sent on the Scheduled tab under Drafts." />
+<img src={useBaseUrl('/images/troubleshoot-scheduled-message.png')} width="600" alt="If a scheduled draft message can&#39;t be sent, Mattermost provides context about why it can&#39;t be sent on the Scheduled tab under Drafts." />

 <Note>

@@ -1,6 +1,7 @@
 ---
 title: "Search for messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -47,14 +48,14 @@ From Mattermost v10.8, you can also adjust your search results to show messages

 <Tip>

-When using Mattermost in a web browser or the desktop app, you can open your current search results in a separate popout window by selecting the **Open in new window** <img src="/img/ui/dock-window_F10AC.svg" alt="Open thread in a new browser window icon." /> icon in the search results header.
+When using Mattermost in a web browser or the desktop app, you can open your current search results in a separate popout window by selecting the **Open in new window** <img src={useBaseUrl('/img/ui/dock-window_F10AC.svg')} alt="Open thread in a new browser window icon." /> icon in the search results header.

 </Tip>

 </TabItem>
 <TabItem value="mobile" label="Mobile">

-1.  Tap the **Search** <img src="/img/ui/magnify_F0349.svg" alt="Search for messages and files in Mattermost." className="theme-icon" /> icon at the bottom of the app to search for messages or files attached to messages.
+1.  Tap the **Search** <img src={useBaseUrl('/img/ui/magnify_F0349.svg')} alt="Search for messages and files in Mattermost." className="theme-icon" /> icon at the bottom of the app to search for messages or files attached to messages.

 > ![Tap on the Search icon to search for messages.](/images/mobile-search-for-messages.jpg)

@@ -116,11 +117,11 @@ You can access files recently shared in a channel:
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Select the <img src="/img/ui/file-text-outline_F09EE.svg" alt="Use the Channel Files icon to search for files attached to messages in a given channel." className="theme-icon" /> icon to the right of the channel name to access files recently shared in that channel.
+Select the <img src={useBaseUrl('/img/ui/file-text-outline_F09EE.svg')} alt="Use the Channel Files icon to search for files attached to messages in a given channel." className="theme-icon" /> icon to the right of the channel name to access files recently shared in that channel.

 ![Use the Channel Files option to access recently shared files in the current channel.](/images/channel-files-icon.png)

-Alternatively, you can select the channel name, select the **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, then select **Files** in the right pane.
+Alternatively, you can select the channel name, select the **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, then select **Files** in the right pane.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -214,7 +215,7 @@ From Mattermost v11.6, when your system admin [enables searching public channels

 ## Technical notes about searching

-By default, Mattermost uses full text search support included in PostgreSQL. Select the **product menu** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> then select **About Mattermost** to see which database you’re using.
+By default, Mattermost uses full text search support included in PostgreSQL. Select the **product menu** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> then select **About Mattermost** to see which database you’re using.

 - Stop words are filtered out of search results. See [PostgreSQL](https://www.postgresql.org/docs/10/textsearch-dictionaries.html#TEXTSEARCH-STOPWORDS) database documentation for a full list of applicable stop words.
 - URLs don’t return results.
@@ -1,6 +1,7 @@
 ---
 title: "Send messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -19,14 +20,14 @@ From Mattermost v11.5, you can access help resources for message formatting by s
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Enter a message in the text field, then select **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" /> to send the message.
+Enter a message in the text field, then select **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" /> to send the message.

 <Tip>

 You can also use a keyboard to send messages:

 - Press <kbd>Enter</kbd> on Windows or Linux, or <kbd>↵</kbd> on Mac.
- You can configure Mattermost to require <kbd>Shift</kbd> <kbd>Enter</kbd> on Windows or Linux, or <kbd>⇧</kbd> <kbd>↵</kbd> on Mac to send multi-line messages. Select the **gear** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon to go to **Settings**, then select **Advanced \> Send messages on CTRL+ENTER**.
+- You can configure Mattermost to require <kbd>Shift</kbd> <kbd>Enter</kbd> on Windows or Linux, or <kbd>⇧</kbd> <kbd>↵</kbd> on Mac to send multi-line messages. Select the **gear** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon to go to **Settings**, then select **Advanced \> Send messages on CTRL+ENTER**.

 </Tip>

@@ -37,7 +38,7 @@ You can also use a keyboard to send messages:

 ![Type a message in the text box at the bottom of the mobile app.](/images/mobile-type-a-message-in-a-channel.jpg)

-2.  Tap **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" /> icon to send it in the channel.
+2.  Tap **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" /> icon to send it in the channel.

 ![Tap on the send icon to send the message in the channel.](/images/mobile-sending-a-message.gif)

@@ -51,12 +52,12 @@ You can use AI to enhance your messages before sending them. This feature helps

 From Mattermost v11.5, when you use AI Rewrite while composing a reply in a thread, the AI incorporates context from the thread to generate suggestions that better fit the ongoing conversation.

-From Mattermost v11.7, Rewrite is accessed through the **AI Actions** <img src="/img/ui/creation-outline_F1C2B.svg" alt="AI Actions icon." className="theme-icon" /> menu, alongside any custom prompts your system admin has made available.
+From Mattermost v11.7, Rewrite is accessed through the **AI Actions** <img src={useBaseUrl('/img/ui/creation-outline_F1C2B.svg')} alt="AI Actions icon." className="theme-icon" /> menu, alongside any custom prompts your system admin has made available.

 On Web/Desktop or Mobile:

 > 1.  Type your message in the message compose field.
-> 2.  Open the **AI Actions** <img src="/img/ui/creation-outline_F1C2B.svg" alt="AI Actions icon." className="theme-icon" /> menu from the message actions, then select **Rewrite**.
+> 2.  Open the **AI Actions** <img src={useBaseUrl('/img/ui/creation-outline_F1C2B.svg')} alt="AI Actions icon." className="theme-icon" /> menu from the message actions, then select **Rewrite**.
 > 3.  Select a bot from the list of available AI agents.
 > 4.  Choose from available rewrite options:
 >     - **Improve writing**: Enhance clarity and professionalism
@@ -67,11 +68,11 @@ On Web/Desktop or Mobile:
 >     - **Summarize**: Condense your message to key points
 >     - **Custom prompt**: Specify your own transformation instructions
 > 5.  Review the AI-generated suggestion. Select **Regenerate** to try again or **Discard** to return to your original message.
-> 6.  Select **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" />
+> 6.  Select **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" />

 <Tip>

-From Mattermost v11.7, system admins can publish custom prompts that appear alongside Rewrite in the **AI Actions** <img src="/img/ui/creation-outline_F1C2B.svg" alt="AI Actions icon." className="theme-icon" /> menu. If you don't see a custom prompt you expect, check with your system admin.
+From Mattermost v11.7, system admins can publish custom prompts that appear alongside Rewrite in the **AI Actions** <img src={useBaseUrl('/img/ui/creation-outline_F1C2B.svg')} alt="AI Actions icon." className="theme-icon" /> menu. If you don't see a custom prompt you expect, check with your system admin.

 </Tip>

@@ -91,8 +92,8 @@ From Mattermost v11.3, burn-on-read messages stay concealed until recipients rev
 <TabItem value="web-desktop" label="Web/Desktop">

 1.  Compose your message.
-2.  Select the **Burn-on-read** <img src="/img/ui/fire_F0238.svg" alt="Burn on Read icon." className="theme-icon" /> icon in the message toolbar.
-3.  Select **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" />
+2.  Select the **Burn-on-read** <img src={useBaseUrl('/img/ui/fire_F0238.svg')} alt="Burn on Read icon." className="theme-icon" /> icon in the message toolbar.
+3.  Select **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" />

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -100,8 +101,8 @@ From Mattermost v11.3, burn-on-read messages stay concealed until recipients rev
 From Mattermost mobile v2.38.0, you can send burn-on-read messages from the mobile app.

 1.  Compose your message.
-2.  Tap the **Burn-on-read** <img src="/img/ui/fire_F0238.svg" alt="Burn on Read icon." className="theme-icon" /> icon in the message toolbar.
-3.  Tap **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" />
+2.  Tap the **Burn-on-read** <img src={useBaseUrl('/img/ui/fire_F0238.svg')} alt="Burn on Read icon." className="theme-icon" /> icon in the message toolbar.
+3.  Tap **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" />

 </TabItem>
 </Tabs>
@@ -109,7 +110,7 @@ From Mattermost mobile v2.38.0, you can send burn-on-read messages from the mobi

 Recipients see a concealed placeholder with **Reveal**. After revealing, a timer shows when the message will be deleted.

-As the message sender, hover over the **Burn-on-read** <img src="/img/ui/fire_F0238.svg" alt="Burn on Read icon." className="theme-icon" /> icon above the sent message to see how many recipients have read the message. You can also delete the burn-on-read message for all recipients before the timer expires by selecting the **Burn-on-read** <img src="/img/ui/fire_F0238.svg" alt="Burn on Read icon." className="theme-icon" /> icon above the sent message.
+As the message sender, hover over the **Burn-on-read** <img src={useBaseUrl('/img/ui/fire_F0238.svg')} alt="Burn on Read icon." className="theme-icon" /> icon above the sent message to see how many recipients have read the message. You can also delete the burn-on-read message for all recipients before the timer expires by selecting the **Burn-on-read** <img src={useBaseUrl('/img/ui/fire_F0238.svg')} alt="Burn on Read icon." className="theme-icon" /> icon above the sent message.

 ## Draft messages

@@ -122,12 +123,12 @@ By default, message drafts are synchronized on the Mattermost server and are acc

 Draft messages are added to a **Drafts** view available at the top of the channel sidebar.

-<img src="../../images/Global-Drafts-Animated-GIF.gif" width="700" alt="Global drafts makes it easy for you to find all messages in progress." />
+<img src={useBaseUrl('/images/Global-Drafts-Animated-GIF.gif')} width="700" alt="Global drafts makes it easy for you to find all messages in progress." />

 </TabItem>
 <TabItem value="mobile" label="Mobile">

-When composing a message, you can simply choose to complete it later. The partially composed message is kept in the text field and an **Edit** option <img src="/img/ui/pencil-outline_F0CB6.svg" alt="Edit icon." className="theme-icon" /> displays next to the channel name.
+When composing a message, you can simply choose to complete it later. The partially composed message is kept in the text field and an **Edit** option <img src={useBaseUrl('/img/ui/pencil-outline_F0CB6.svg')} alt="Edit icon." className="theme-icon" /> displays next to the channel name.

 From Mattermost v10.5, you'll find local draft messages under **Drafts**. Drafts synchronized to the Mattermost server will be listed under **Drafts** in a future mobile app release.

@@ -144,7 +145,7 @@ All users can edit their own sent messages, unless the system admin has [restric
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-1.  Using Mattermost in a web browser or the desktop app, select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message that you've sent.
+1.  Using Mattermost in a web browser or the desktop app, select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message that you've sent.

 > ![Select the More option to edit or delete a sent message.](/images/more-actions.png)

@@ -191,7 +192,7 @@ Restoring a previous version of the message is available in the Mattermost deskt

 1.  Select the word **Edited** next to your message.
 2.  In the right pane, review all previous versions of the message.
-3.  Select the **Restore** <img src="/img/ui/restore_F099B.svg" alt="Use the Restore icon to restore a previous version of an edited message." className="theme-icon" /> icon next to the version you want to restore.
+3.  Select the **Restore** <img src={useBaseUrl('/img/ui/restore_F099B.svg')} alt="Use the Restore icon to restore a previous version of an edited message." className="theme-icon" /> icon next to the version you want to restore.
 4.  Select **Confirm**.

 ![Select Edited next to an edited message, and then select the version you want to restore.](/images/restore-previous-edited-message.gif)
@@ -203,7 +204,7 @@ Restoring a previous version of the message is available in the Mattermost deskt

 All users can delete their own sent messages, unless the system admin has [restricted the ability to do so](/administration-guide/onboard/advanced-permissions).

-1.  Using Mattermost in a web browser or the desktop app, select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message that you want to delete.
+1.  Using Mattermost in a web browser or the desktop app, select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message that you want to delete.
 2.  Select **Delete** to delete your own messages. Select **Delete** again to confirm.

 </TabItem>
@@ -1,6 +1,7 @@
 ---
 title: "Share files in messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -14,7 +15,7 @@ With file attachments, you can share additional information that helps your team
 You can share files with other Mattermost users or entire channels by:

 - Dragging and dropping files into channels.
- Selecting the **Attachment** <img src="/img/ui/paperclip_F03E2.svg" alt="Add a message attachment using the Upload files icon in the message formatting toolbar." className="theme-icon" /> icon in the message input box.
+- Selecting the **Attachment** <img src={useBaseUrl('/img/ui/paperclip_F03E2.svg')} alt="Add a message attachment using the Upload files icon in the message formatting toolbar." className="theme-icon" /> icon in the message input box.
 - Pasting from the clipboard.

 ## Share public links
@@ -29,22 +30,22 @@ If **Get Public Link** is not visible in the file previewer, ask your system adm

 ## Download files

-You can download an attached file by selecting the **Download** <img src="/img/ui/download-outline_F0B8F.svg" alt="Use the Download icon to download an attached file to your local system." className="theme-icon" /> icon next to the file thumbnail.
+You can download an attached file by selecting the **Download** <img src={useBaseUrl('/img/ui/download-outline_F0B8F.svg')} alt="Use the Download icon to download an attached file to your local system." className="theme-icon" /> icon next to the file thumbnail.

 <Tip>

-From Mattermost desktop app v5.2, you can review download status, access downloads, and clear the list of downloads from a new **Downloads** <img src="/img/ui/arrow-down-bold-circle-outline_F0048.svg" alt="Use the desktop app download icon to review download status, as well as access and clear the list of downloaded files." className="theme-icon" /> option located in the top-right corner of the desktop app window.
+From Mattermost desktop app v5.2, you can review download status, access downloads, and clear the list of downloads from a new **Downloads** <img src={useBaseUrl('/img/ui/arrow-down-bold-circle-outline_F0048.svg')} alt="Use the desktop app download icon to review download status, as well as access and clear the list of downloaded files." className="theme-icon" /> option located in the top-right corner of the desktop app window.

 </Tip>

 ## Access files

-Access all files shared in a channel by selecting the **Channel files** <img src="/img/ui/file-text-outline_F09EE.svg" alt="Use the Channel Files icon to search for files attached to messages in a given channel." className="theme-icon" /> icon in the channel header.
+Access all files shared in a channel by selecting the **Channel files** <img src={useBaseUrl('/img/ui/file-text-outline_F09EE.svg')} alt="Use the Channel Files icon to search for files attached to messages in a given channel." className="theme-icon" /> icon in the channel header.

 </TabItem>
 <TabItem value="mobile" label="Mobile">

-You can share files with other Mattermost users or entire channels by tapping the **Attachment** <img src="/img/ui/paperclip_F03E2.svg" alt="Add a message attachment using the Upload files icon in the message formatting toolbar." className="theme-icon" /> icon under the message input box when composing a message.
+You can share files with other Mattermost users or entire channels by tapping the **Attachment** <img src={useBaseUrl('/img/ui/paperclip_F03E2.svg')} alt="Add a message attachment using the Upload files icon in the message formatting toolbar." className="theme-icon" /> icon under the message input box when composing a message.

 From Mattermost v10.7 and mobile v2.27, you can play and download audio files directly from the message thread.

@@ -64,7 +65,7 @@ From Mattermost v10.7 and mobile v2.27, you can play and download audio files di

 ![Tap on a file to download and open it.](/images/mobile-tap-a-file-name-to-download.jpg)

-Or you can also click on <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to download the file or open it in the channel.
+Or you can also click on <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to download the file or open it in the channel.

 ![You can also use more options to download ot view the file in the channel.](/images/mobile-more-options-to-download-or-view-a-file.jpg)

@@ -1,6 +1,7 @@
 ---
 title: "Share links to channels and messages"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -14,7 +15,7 @@ Sharing channel links makes it easy for others to find and join channels. To sha

 <Tip>

-Alternatively, you can select the **View info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon in the top right corner of the screen to access additional channel management options, including a **Copy Link** option you can share with others.
+Alternatively, you can select the **View info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon in the top right corner of the screen to access additional channel management options, including a **Copy Link** option you can share with others.

 </Tip>

@@ -23,7 +24,7 @@ Alternatively, you can select the **View info** <img src="/img/ui/information-ou
 <Tabs>
 <TabItem value="web-desktop" label="Web/Desktop">

-Sharing message links displays a preview of the message in the post. To share links to messages in Mattermost, select the **More** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message, then select **Copy Link**.
+Sharing message links displays a preview of the message in the post. To share links to messages in Mattermost, select the **More** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon next to a message, then select **Copy Link**.

 ![When you hover over messages, you can access more message options from the More icon.](/images/message-more.png)

@@ -35,7 +36,7 @@ Paste the link into a message to share the image link with others. Sharing links

 <Tip>

- You can also hover over an image and select the <img src="/img/ui/link-variant_F0339.svg" alt="Use the Copy Link icon to copy the public URL link for an image in a message." className="theme-icon" /> icon in the top right corner.
+- You can also hover over an image and select the <img src={useBaseUrl('/img/ui/link-variant_F0339.svg')} alt="Use the Copy Link icon to copy the public URL link for an image in a message." className="theme-icon" /> icon in the top right corner.
 - The timestamp next to the username of any message is also a permanent link to that conversation.

 </Tip>
@@ -1,6 +1,8 @@
 ---
 title: "Team settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Team settings enable system and team administrators to adjust settings applied to a specific team. Using Mattermost in a web browser or the desktop app, select the team name to access **Team Settings**.
@@ -77,7 +79,7 @@ System and team administrators can include the team in a list of teams to join f

 <Tip>

-When you enable this option, users looking for more teams to join will also see this team in the list when they select the <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the team sidebar.
+When you enable this option, users looking for more teams to join will also see this team in the list when they select the <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon in the team sidebar.

 </Tip>

@@ -1,6 +1,7 @@
 ---
 title: "Connect to multiple Mattermost workspaces"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -46,7 +47,7 @@ If you're using the desktop app prior to release v5.0, individual servers displa
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-Tap the **Servers** <img src="/img/ui/server-variant_E81F.svg" alt="Access server connection options using the Servers icon." className="theme-icon" /> icon located in the top left corner of the window to access all available servers and to add new servers.
+Tap the **Servers** <img src={useBaseUrl('/img/ui/server-variant_E81F.svg')} alt="Access server connection options using the Servers icon." className="theme-icon" /> icon located in the top left corner of the window to access all available servers and to add new servers.

 1.  Tap **Add a server**.
 2.  Enter the server URL. Server URLs must begin with either `http://` or `https://`.
@@ -60,7 +61,7 @@ Can't find your Mattermost server URL? Ask your company’s IT department or you
 3.  Enter the server's Display Name.
 4.  Optionally toggle the **Advanced Options** section to enter an **Authentication secret**. This is an additional security measure that some organizations use. Your system admin can provide you with the secret if required.

-> <img src="../../images/mobile-server-add-psk.jpg" width="300" alt="Mobile app server setup screen showing the optional authentication secret field." />
+> <img src={useBaseUrl('/images/mobile-server-add-psk.jpg')} width="300" alt="Mobile app server setup screen showing the optional authentication secret field." />

 5.  Tap **Done**.

@@ -86,11 +87,11 @@ Can't find your Mattermost server URL? Ask your company’s IT department or you

 1.  Swipe left on an existing server entry to reveal additional options. Tap **Edit**.

-> <img src="../../images/swipe-left-to-remove.gif" width="300" alt="In the Mattermost mobile app, swipe left on an existing server connection entry to edit the connection." />
+> <img src={useBaseUrl('/images/swipe-left-to-remove.gif')} width="300" alt="In the Mattermost mobile app, swipe left on an existing server connection entry to edit the connection." />

 2.  Modify the server's display name or authentication secret, and then tap **Save**.

-> <img src="../../images/mobile-edit-server.jpg" width="300" alt="Mobile app edit server screen showing display name fields." />
+> <img src={useBaseUrl('/images/mobile-edit-server.jpg')} width="300" alt="Mobile app edit server screen showing display name fields." />
 >
 > To view or update the authentication secret, expand the **Advanced Options** section. If a secret is currently configured, it will be pre-filled in the field.

@@ -114,11 +115,11 @@ Removing a server from your desktop app doesn't delete its data. You can add the
 </TabItem>
 <TabItem value="mobile" label="Mobile">

-Tap the **Servers** <img src="/img/ui/server-variant_E81F.svg" alt="Access server connection options using the Servers icon." className="theme-icon" /> icon located in the top left corner of the window to access all available servers and to add new servers.
+Tap the **Servers** <img src={useBaseUrl('/img/ui/server-variant_E81F.svg')} alt="Access server connection options using the Servers icon." className="theme-icon" /> icon located in the top left corner of the window to access all available servers and to add new servers.

 Swipe left on an existing server entry to reveal additional options. Tap **Remove**.

-<img src="../../images/swipe-left-to-remove.gif" width="400" alt="In the Mattermost mobile app, swipe left on an existing server connection entry to delete the connection." />
+<img src={useBaseUrl('/images/swipe-left-to-remove.gif')} width="400" alt="In the Mattermost mobile app, swipe left on an existing server connection entry to delete the connection." />

 </TabItem>
 </Tabs>
@@ -148,7 +149,7 @@ Granting a system permission sets it to **Accept**, and revoking it sets it to *

 From desktop v6.0, you can keep multiple workspaces open at the same time and work across them without constant switching to improve situational awareness and operational efficiency. This capability is especially useful for organizations that operate in distributed or multi-domain environments, as it enhances cross-system interoperability and command-level situational awareness.

-Select the **New tab** <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon at the top of the desktop app to open a new tab for the current workspace. You can drag and drop to reorder the tabs in the main desktop window.
+Select the **New tab** <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> icon at the top of the desktop app to open a new tab for the current workspace. You can drag and drop to reorder the tabs in the main desktop window.

 Open internal Mattermost links in a new tab or window by right-clicking on the link and selecting **Open in new tab** or **Open in new window**.

@@ -1,6 +1,7 @@
 ---
 title: "Customize your Desktop App experience"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -51,7 +52,7 @@ With the Mattermost desktop app in focus, select **Mattermost \> Settings...**
 </TabItem>
 <TabItem value="windows-linux" label="Windows/Linux">

-With the Mattermost desktop app in focus, select the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon in the top left of the menu bar and select **File \> Settings...**
+With the Mattermost desktop app in focus, select the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon in the top left of the menu bar and select **File \> Settings...**

 ![Access Desktop App customization settings by selecting More in the top left corner, then selecting File \> Settings.](/images/desktop-app-settings.jpg)

@@ -1,6 +1,8 @@
 ---
 title: "Customize your channel sidebar"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Conversations in Mattermost are crucial to company productivity and success. Keeping conversations organized in the sidebar creates an efficient workplace. Using a web browser or the desktop app, you can customize your own channel sidebar based on how you prefer to use Mattermost. Customizations you make are only visible to you, are visible when using the mobile app, and won't affect what your teammates see in their sidebars.
@@ -29,7 +31,7 @@ Using Mattermost in a web browser or the desktop app, you can customize your sid

 Create custom categories to group channels together for quicker and easier navigation. For example, you can create a category called "Design" or "Marketing".

-To create categories, select the **+** symbol at the top of the sidebar. Or, select the **More options** <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> icon in the sidebar on any category header, then select **Create New Category**.
+To create categories, select the **+** symbol at the top of the sidebar. Or, select the **More options** <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> icon in the sidebar on any category header, then select **Create New Category**.

 <Note>

@@ -1,6 +1,7 @@
 ---
 title: "Customize your Mattermost theme"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -11,7 +12,7 @@ The colors of the Mattermost user interface are customizable. You can choose fro
 <Tabs>
 <TabItem value="web-desktop" label="Web/desktop">

-Select the **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon, then go to **Display \> Theme**. Select **Theme Colors** to choose from five standard themes designed by the Mattermost team.
+Select the **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon, then go to **Display \> Theme**. Select **Theme Colors** to choose from five standard themes designed by the Mattermost team.

 You can customize a standard theme further to truly make it your own. After selecting a standard theme, select **Custom Theme** and modify your color choices based on your preferences. See the [custom themes](#custom-themes) documentation to learn what's configurable, and see the [custom theme examples](#custom-theme-examples) documentation for inspiration.

@@ -1,16 +1,17 @@
 ---
 title: "Manage advanced options"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

 <PlanAvailability slug="all-commercial" />

-Using Mattermost in a web browser or the desktop app, you can customize advanced Mattermost options based on your preferences. Select the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then select **Advanced**.
+Using Mattermost in a web browser or the desktop app, you can customize advanced Mattermost options based on your preferences. Select the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then select **Advanced**.

 ## Send messages on CTRL/⌘+ENTER

-By default, you send messages in Mattermost by composing a message in the message text box at the bottom of the Mattermost screen and selecting the **Send** <img src="/img/ui/send_F048A.svg" alt="Select the Send icon to post your message." className="theme-icon" /> icon or by pressing <kbd>Enter</kbd> on Windows or Linux, or <kbd>↵</kbd> on Mac.
+By default, you send messages in Mattermost by composing a message in the message text box at the bottom of the Mattermost screen and selecting the **Send** <img src={useBaseUrl('/img/ui/send_F048A.svg')} alt="Select the Send icon to post your message." className="theme-icon" /> icon or by pressing <kbd>Enter</kbd> on Windows or Linux, or <kbd>↵</kbd> on Mac.

 And you enter new text lines by pressing <kbd>Shift</kbd> <kbd>Enter</kbd> on Windows or Linux, or <kbd>⇧</kbd> <kbd>↵</kbd> on Mac before sending the message.

@@ -1,6 +1,7 @@
 ---
 title: "Manage your channel-specific notifications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -22,7 +23,7 @@ You have 2 ways to manage notification preferences per channel:

 ![Select the channel name dropdown to access channel-specific notification preferences.](/images/channel-notification-settings.gif)

-2.  Alternatively, select the channel's **View Info** <img src="/img/ui/information-outline_F02FD.svg" alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, and then select **Notification Preferences** in the right pane.
+2.  Alternatively, select the channel's **View Info** <img src={useBaseUrl('/img/ui/information-outline_F02FD.svg')} alt="Use the Channel Info icon to access additional channel management options." className="theme-icon" /> icon, and then select **Notification Preferences** in the right pane.

 </TabItem>
 <TabItem value="mobile" label="Mobile">
@@ -64,7 +65,7 @@ By default, you don’t automatically follow new conversation threads in any cha

 When using Mattermost on your mobile device, you can configure Mattermost to automatically follow every thread in a channel.

-1.  In a channel, tap the **More** icon <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to the right of the channel name.
+1.  In a channel, tap the **More** icon <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to the right of the channel name.
 2.  Tap **View info**.
 3.  Tap **Follow all threads**.

@@ -1,6 +1,8 @@
 ---
 title: "Manage your desktop notifications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 ## Enable notifications
@@ -23,8 +25,8 @@ You may also need to enable notifications in Windows, macOS, or Linux for Matter

 Mattermost desktop app icons display the following types of badges:

- A numbered badge for unread [direct](/end-user-guide/collaborate/channel-types#direct-message-channels) [group](/end-user-guide/collaborate/channel-types#group-message-channels) messages, [@mentions](/end-user-guide/preferences/manage-your-mentions-keywords-notifications), and [keywords](/end-user-guide/preferences/manage-your-mentions-keywords-notifications) you're actively watching. <img src="../../images/numbered-badge.png" width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." />
- A dot badge for unread activity. <img src="../../images/dot-badge.png" width="50" alt="A dot on the badge means you have unread activity in at least one channel you&#39;re a member of." />
+- A numbered badge for unread [direct](/end-user-guide/collaborate/channel-types#direct-message-channels) [group](/end-user-guide/collaborate/channel-types#group-message-channels) messages, [@mentions](/end-user-guide/preferences/manage-your-mentions-keywords-notifications), and [keywords](/end-user-guide/preferences/manage-your-mentions-keywords-notifications) you're actively watching. <img src={useBaseUrl('/images/numbered-badge.png')} width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." />
+- A dot badge for unread activity. <img src={useBaseUrl('/images/dot-badge.png')} width="50" alt="A dot on the badge means you have unread activity in at least one channel you&#39;re a member of." />

 ## Banner alerts

@@ -1,6 +1,7 @@
 ---
 title: "Manage your display options"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -8,7 +9,7 @@ import TabItem from '@theme/TabItem';

 You can customize Mattermost display options based on your preferences.

- Using Mattermost in a web browser or the desktop app, select the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then go to **Display**.
+- Using Mattermost in a web browser or the desktop app, select the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then go to **Display**.
 - On the Mattermost mobile app, tap your profile picture, and then tap **Settings \> Display**.

 ## Theme
@@ -1,6 +1,7 @@
 ---
 title: "Manage your mobile notifications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -24,7 +25,7 @@ You may also need to enable notifications in iOS or Android for Mattermost by ch

 Mattermost mobile app icons display numbered badges for unread [direct](/end-user-guide/collaborate/channel-types#direct-message-channels) and [group](/end-user-guide/collaborate/channel-types#group-message-channels) messages, and [@mentions](/end-user-guide/preferences/manage-your-mentions-keywords-notifications), [keywords](/end-user-guide/preferences/manage-your-mentions-keywords-notifications) you're actively watching.

-<img src="../../images/numbered-badge.png" width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." />
+<img src={useBaseUrl('/images/numbered-badge.png')} width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." />

 <Note>

@@ -47,7 +48,7 @@ You can manage your mobile notifications in both the desktop app and the mobile
 <Tabs>
 <TabItem value="desktop-app" label="Desktop app">

-In the desktop app, manage your mobile notification preferences by selecting the **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon located in the top right corner of the screen, and select **Notifications \> Desktop and mobile notifications**.
+In the desktop app, manage your mobile notification preferences by selecting the **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon located in the top right corner of the screen, and select **Notifications \> Desktop and mobile notifications**.

 By default, you receive mobile notifications for @mentions, direct messages, and group messages when your Mattermost availability is [Online, Away, or Offline](/end-user-guide/preferences/set-your-status-availability#set-your-availability). You won't receive Mattermost notifications on your device if you're actively using Mattermost in a web browser.

@@ -1,6 +1,8 @@
 ---
 title: "Manage your notifications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Mattermost notifies you of new activity you're directly involved in. How you're notified depends on what Mattermost client you're using, the type of Mattermost activity you're being notified about, and how you prefer to be notified.
@@ -19,7 +21,7 @@ Mattermost notifies you of new activity you're directly involved in. How you're

 You are in control of how, when, and where you're notified of activity that matters to you based on how you prefer to work and collaborate. To access notification preferences:

- In a web browser or the desktop app, select the **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon located in the top right corner of the screen to manage your notification preferences.
+- In a web browser or the desktop app, select the **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon located in the top right corner of the screen to manage your notification preferences.
 - On mobile, tap your profile picture, then tap **Settings \> Notifications**.

 See the [Default notifications](#default-notifications) table below for details on customizing your notification experience based on your preferred Mattermost client.
@@ -42,16 +44,21 @@ The table below lists the types of notifications you can expect to see and hear
 <col style={{width: '30%'}} />
 <col style={{width: '54%'}} />
 </colgroup>
+<thead>
+<tr>
+<th scope="col">Notification Type</th>
+<th scope="col">What it Means</th>
+<th scope="col">Which Mattermost Clients?</th>
+</tr>
+</thead>
 <tbody>
 <tr>
-<td rowspan="2"><blockquote><p><strong>Notification Type</strong></p></blockquote><dl><dt>=======================</dt><dd><p>Icon badge (dot)</p><p><img src="../../images/dot-badge.png" width="50" alt="A dot on the badge means you have unread activity in at least one channel you&#39;re a member of." /></p></dd></dl></td>
-<td rowspan="2"><blockquote><p><strong>What it Means</strong></p></blockquote><dl><dt>===================================================</dt><dd><p>You have unread activity in at least 1 channel you're a member of</p></dd></dl></td>
-<td rowspan="2"><blockquote><p><strong>Which Mattermost Clients?</strong> |</p></blockquote><dl><dt>==================================================================================+</dt><dd><p><a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-web-notifications">Web</a>, <a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-desktop-notifications">Desktop</a> |</p></dd></dl></td>
+<td><p>Icon badge (dot)</p><p><img src={useBaseUrl('/images/dot-badge.png')} width="50" alt="A dot on the badge means you have unread activity in at least one channel you&#39;re a member of." /></p></td>
+<td>You have unread activity in at least 1 channel you're a member of</td>
+<td><a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-web-notifications">Web</a>, <a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-desktop-notifications">Desktop</a></td>
 </tr>
 <tr>
-</tr>
-<tr>
-<td><p>Icon badge (number)</p><p><img src="../../images/numbered-badge.png" width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." /></p></td>
+<td><p>Icon badge (number)</p><p><img src={useBaseUrl('/images/numbered-badge.png')} width="50" alt="A numbered badge means you have at least 1 unread message, @mention, or one of your keywords has triggered a notification." /></p></td>
 <td rowspan="3">You have at least 1 unread message with an @mention, or a match to a keyword you're watching</td>
 <td><a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-web-notifications">Web</a> &amp; <a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-desktop-notifications">Desktop</a> &amp; <a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-mobile-notifications">Mobile</a></td>
 </tr>
@@ -61,7 +68,7 @@ The table below lists the types of notifications you can expect to see and hear
 </tr>
 <tr>
 <td>Push notifications</td>
-<td><dl><dt><a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-mobile-notifications">Mobile</a></dt><dd><div class="line-block"></div></dd></dl></td>
+<td><a href="mm-doc:%2Fend-user-guide%2Fpreferences%2Fmanage-your-mobile-notifications">Mobile</a></td>
 </tr>
 <tr>
 <td>Alert sounds</td>
@@ -1,7 +1,9 @@
 ---
 title: "Manage your plugin preferences"
 ---
-Using Mattermost in a web browser or the desktop app, you can customize Mattermost plugin preferences for Microsoft Teams and Calls by selecting **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture.
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Using Mattermost in a web browser or the desktop app, you can customize Mattermost plugin preferences for Microsoft Teams and Calls by selecting **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture.

 ## Microsoft Teams plugin preferences

@@ -1,42 +1,43 @@
 ---
 title: "Manage your security preferences"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 Select your profile picture, select **Profile**, and then select **Security** to configure your password, view access history, and to view or logout of active sessions.

 <table style={{width: '99%'}}>
 <colgroup>
-<col style={{width: '15%'}} />
-<col style={{width: '71%'}} />
-<col style={{width: '12%'}} />
+<col style={{width: '20%'}} />
+<col style={{width: '80%'}} />
 </colgroup>
+<thead>
+<tr>
+<th scope="col">Security setting</th>
+<th scope="col">Description</th>
+</tr>
+</thead>
 <tbody>
 <tr>
-<td rowspan="2"><blockquote><p><strong>Security setting</strong></p></blockquote><dl><dt>======================</dt><dd><p>Password</p></dd></dl></td>
-<td rowspan="2"><blockquote><p><strong>Description</strong></p></blockquote><dl><dt>============================================================================================================</dt><dd><p>You may change your password if you've logged in by email using Mattermost in a web browser or using the desktop app.</p><Important><ul><li>If you sign in to Mattermost using a single sign-on service, you must update your password through your SSO service account.</li><li><strong>Password Security Enhancement</strong>: From v11.0, Mattermost uses PBKDF2 password hashing for improved security. When you log in after your server upgrades to v11.0+, your password will be automatically migrated to the more secure format. If your server is later downgraded to a version prior to v11.0, you may be unable to log in and will need to contact your system administrator for a password reset.</li></ul></Important></dd></dl></td>
-<td></td>
-</tr>
-<tr>
-<td></td>
+<td>Password</td>
+<td><p>You may change your password if you've logged in by email using Mattermost in a web browser or using the desktop app.</p><Important><ul><li>If you sign in to Mattermost using a single sign-on service, you must update your password through your SSO service account.</li><li><strong>Password Security Enhancement</strong>: From v11.0, Mattermost uses PBKDF2 password hashing for improved security. When you log in after your server upgrades to v11.0+, your password will be automatically migrated to the more secure format. If your server is later downgraded to a version prior to v11.0, you may be unable to log in and will need to contact your system administrator for a password reset.</li></ul></Important></td>
 </tr>
 <tr>
 <td>Multi-factor authentication (MFA)</td>
-<td colspan="2">If your system admin has enabled <a href="mm-ref:administration-guide%2Fconfigure%2Fauthentication-configuration-settings%3Aenable%20multi-factor%20authentication">multi-factor authentication |</a> (MFA), you can require a passcode in addition to your password to log-in to your Mattermost account. | | You'll need to download a MFA passcode generation app, such as Google Authenticator or a similar app, | and then set-up MFA in your Mattermost account. | | <strong>Download a passcode generation app</strong> | | - Download Google Authenticator for an Apple device from | <a href="https://apps.apple.com/us/app/google-authenticator/id388497605">iTunes</a> | - Download Google Authenticator for an Android device from | <a href="https://play.google.com/store/apps/details?id=com.google.                                  |  android.apps.authenticator2&amp;hl=en">Google Play</a> | | <strong>Enable MFA in Mattermost</strong> | | 1. Open Mattermost in a web browser or the desktop app. | 2. In Mattermost, from your profile picture, select <strong>Profile &gt; Security</strong>. | 3. Under <strong>Multi-factor Authentication</strong>, select <strong>Edit</strong>. | | .. image:: ../../images/multi-factor-authentication.png | :alt: Enable multi-factor authentication through your Mattermost user profile. | | 4. Select <strong>Add MFA to Account</strong>. | | .. image:: ../../images/add-mfa-to-account.png | :alt: Add multi-factor authentication to your Mattermost user profile. | | 5. Scan the QR code or enter the <strong>Secret</strong> provided by Mattermost into the authenticator app. | 6. In Mattermost, enter the <strong>MFA Code</strong> generated by the authenticator app. | 7. Select <strong>Save</strong>. |</td>
+<td><p>If your system admin has enabled <a href="/administration-guide/configure/authentication-configuration-settings#enable-multi-factor-authentication">multi-factor authentication</a> (MFA), you can require a passcode in addition to your password to log-in to your Mattermost account.</p><p>You'll need to download a MFA passcode generation app, such as Google Authenticator or a similar app, and then set-up MFA in your Mattermost account.</p><p><strong>Download a passcode generation app</strong></p><ul><li>Download Google Authenticator for an Apple device from <a href="https://apps.apple.com/us/app/google-authenticator/id388497605">iTunes</a></li><li>Download Google Authenticator for an Android device from <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Google Play</a></li></ul><p><strong>Enable MFA in Mattermost</strong></p><ol><li>Open Mattermost in a web browser or the desktop app.</li><li>In Mattermost, from your profile picture, select <strong>Profile &gt; Security</strong>.</li><li>Under <strong>Multi-factor Authentication</strong>, select <strong>Edit</strong>.<p><img src={useBaseUrl('/images/multi-factor-authentication.png')} alt="Enable multi-factor authentication through your Mattermost user profile." /></p></li><li>Select <strong>Add MFA to Account</strong>.<p><img src={useBaseUrl('/images/add-mfa-to-account.png')} alt="Add multi-factor authentication to your Mattermost user profile." /></p></li><li>Scan the QR code or enter the <strong>Secret</strong> provided by Mattermost into the authenticator app.</li><li>In Mattermost, enter the <strong>MFA Code</strong> generated by the authenticator app.</li><li>Select <strong>Save</strong>.</li></ol></td>
 </tr>
 <tr>
 <td>Sign-in method</td>
-<td colspan="2">This option allows you to switch your login method between using email/username and password and | <a href="mm-ref:end-user-guide%2Faccess%2Faccess-your-workspace%3Asingle%20sign-on%20(sso)">single sign-on credentials</a>. | | You can configure this setting using Mattermost in a web browser or using the desktop app. | | .. note:: | | While you can choose to log in with either set of credentials, you can only enable one login method | at a time. For example, if AD/LDAP single sign-on is enabled, you can select | <strong>Switch to using AD/LDAP</strong>, and enter your AD/LDAP credentials to switch login over to AD/LDAP. | You'll need to enter the password for your email account to verify your existing credentials. | Following the change, you'll receive an email to confirm the action. |</td>
+<td><p>This option allows you to switch your login method between using email/username and password and <a href="/end-user-guide/access/access-your-workspace#single-sign-on-sso">single sign-on credentials</a>.</p><p>You can configure this setting using Mattermost in a web browser or using the desktop app.</p><Note><p>While you can choose to log in with either set of credentials, you can only enable one login method at a time. For example, if AD/LDAP single sign-on is enabled, you can select <strong>Switch to using AD/LDAP</strong>, and enter your AD/LDAP credentials to switch login over to AD/LDAP. You'll need to enter the password for your email account to verify your existing credentials. Following the change, you'll receive an email to confirm the action.</p></Note></td>
 </tr>
 <tr>
 <td>View access history</td>
 <td><p>Using Mattermost in a browser or using the desktop app, you can access a chronological list of the last 20 login and logout attempts, channel creations and deletions, account settings changes, or channel setting modifications made with your account.</p><p>The details of the Session ID, which is a unique identifier for each Mattermost browser session, and IP Address of the action is recorded for audit log purposes.</p></td>
-<td></td>
 </tr>
 <tr>
 <td>View and log out of active sessions</td>
 <td><p>Sessions are created when you log in with your credentials a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again.</p><p>Using Mattermost in a browser or using the desktop app:</p><ul><li>Select <strong>Logout</strong> during an active session if you want to revoke automatic login privileges for a specific browser or device.</li><li>Select <strong>More Info</strong> to view browser and system details.</li></ul></td>
-<td></td>
 </tr>
 </tbody>
 </table>
@@ -1,9 +1,11 @@
 ---
 title: "Manage your sidebar options"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

-Using Mattermost in a web browser or the desktop app, you can customize your Mattermost sidebar based on your preferences. Select the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then select **Sidebar**.
+Using Mattermost in a web browser or the desktop app, you can customize your Mattermost sidebar based on your preferences. Select the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then select **Sidebar**.

 Your channel sidebar includes [enhanced sidebar features](/end-user-guide/preferences/customize-your-channel-sidebar), including custom, collapsible channel categories, drag and drop, unread filtering, channel sorting options, and more.

@@ -1,6 +1,7 @@
 ---
 title: "Troubleshoot notifications"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -10,7 +11,7 @@ The Mattermost notifications you receive depend on your [Mattermost preferences]

 ## Send yourself a test notification

-From Mattermost v10.3, you can send yourself a test notification by selecting **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" />, and going to the **Notifications** options.
+From Mattermost v10.3, you can send yourself a test notification by selecting **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" />, and going to the **Notifications** options.

 Under **Troubleshooting notifications** select the **Send a test notification** option. If notifications are working, you'll receive a system-bot direct message in Mattermost confirming that notifications are working.

@@ -23,7 +24,7 @@ Start by ensuring that your Mattermost preferences have notifications enabled.
 <Tabs>
 <TabItem value="desktop" label="Desktop">

-1.  Select **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> in the top right corner of Mattermost.
+1.  Select **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> in the top right corner of Mattermost.
 2.  Select **Desktop and mobile notifications**.

 If **Send notifications for** is set to **Nothing**, then Mattermost notifications are currently disabled. Select either the **All new messages** or **Mentions, direct messages, and group messages** option instead, and save your changes.
@@ -33,7 +34,7 @@ If **Send notifications for** is set to **Nothing**, then Mattermost notificatio
 </TabItem>
 <TabItem value="web" label="Web">

-1.  Select **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> in the top right corner of Mattermost.
+1.  Select **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> in the top right corner of Mattermost.
 2.  Select **Desktop and mobile notifications**.

 If **Send notifications for** is set to **Nothing**, then Mattermost notifications are currently disabled. Select either the **All new messages** or **Mentions, direct messages, and group messages** option instead.
@@ -42,7 +43,7 @@ If **Send notifications for** is set to **Nothing**, then Mattermost notificatio
 <TabItem value="mobile" label="Mobile">

 1.  Tap on your profile picture in the bottom right corner of Mattermost.
-2.  Tap **Settings** <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" />.
+2.  Tap **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" />.
 3.  Tap **Notifications**.
 4.  Tap **Push Notifications**.
 5.  Ensure that **All new messages** or **Mentions, direct messages, and group messages** option is selected.
@@ -204,19 +205,19 @@ Also ensure that macOS’ **Focus mode** is turned off. See the Apple Support [F

 Desktop notifications are triggered under to following conditions. Click to expand the flow chart.

-<img src="../../images/desktop_notification_chart.png" width="239" height="232" alt="A flow diagram shows how Mattermost Desktop App notifications are triggered when a message is posted." />
+<img src={useBaseUrl('/images/desktop_notification_chart.png')} width="239" height="232" alt="A flow diagram shows how Mattermost Desktop App notifications are triggered when a message is posted." />

 ### What determines if an email notification should be triggered?

 Email notifications are triggered under to following conditions. Click to expand the flow chart.

-<img src="../../images/email_notification_chart.png" width="239" height="232" alt="A flow diagram shows how Mattermost email notifications are triggered when a message is posted." />
+<img src={useBaseUrl('/images/email_notification_chart.png')} width="239" height="232" alt="A flow diagram shows how Mattermost email notifications are triggered when a message is posted." />

 ### What determines if a mobile push notification should be triggered?

 Mobile push notifications are triggered under to following conditions. Click to expand the flow chart.

-<img src="../../images/push_notification_chart.png" width="239" height="232" alt="A flow diagram shows how Mattermost mobile push notifications are triggered when a message is posted." />
+<img src={useBaseUrl('/images/push_notification_chart.png')} width="239" height="232" alt="A flow diagram shows how Mattermost mobile push notifications are triggered when a message is posted." />

 ### Are mobile push notifications free?

@@ -1,16 +1,18 @@
 ---
 title: "Settings"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 ## Set language

-In a board, set your preferred language by selecting the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then go to **Set language** to apply your language settings. Language settings in Boards are independent from language settings in Channels.
+In a board, set your preferred language by selecting the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then go to **Set language** to apply your language settings. Language settings in Boards are independent from language settings in Channels.

 ## Random emoji icons

-To enable or disable random emoji icons for your board and cards, select the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then toggle **Random icons on or off**.
+To enable or disable random emoji icons for your board and cards, select the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then toggle **Random icons on or off**.

 ## Product tour

-If you skipped the product tour or want a refresher on Boards, you can restart the product tour by going to the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture and selecting **Product tour**. This will add a new **Welcome to Boards** template to your sidebar and kick-off the guided onboarding tour.
+If you skipped the product tour or want a refresher on Boards, you can restart the product tour by going to the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture and selecting **Product tour**. This will add a new **Welcome to Boards** template to your sidebar and kick-off the guided onboarding tour.
@@ -1,19 +1,21 @@
 ---
 title: "Import, export, and migrate"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 ## Import and export a board archive

 If you’d like to back up your board or re-use it on another team or channel workspace, you can export it as an archive file, and then import the archive file in the team or channel workspace of your choosing. Exported and imported board archives include all card content such as properties, comments, descriptions, and image attachments.

-To do this, select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to the left of the **New** button at the top of the board. Then select **Export board archive**. Download the archive file. Navigate to the team or channel workspace where you’d like to add the exported board. Select the Gear icon next to your profile picture, then choose **Import archive**. The board you exported will be added to this team or channel workspace.
+To do this, select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to the left of the **New** button at the top of the board. Then select **Export board archive**. Download the archive file. Navigate to the team or channel workspace where you’d like to add the exported board. Select the Gear icon next to your profile picture, then choose **Import archive**. The board you exported will be added to this team or channel workspace.

 The **Import archive** option will import the board to your current team. Use [board permissions](/end-user-guide/project-management/share-and-collaborate#board-permissions) to control access to your imported board. The previous `.focalboard` format will be deprecated in a future release, but will support importing until then. Currently, the import dialog looks for `.boardarchive`. Use **Select all files** to select `.focalboard` files to import.

 ## Export to CSV

-To export a board into a CSV file, select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to the left of the **New** button at the top of the board. Then select **Export to CSV**.
+To export a board into a CSV file, select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to the left of the **New** button at the top of the board. Then select **Export to CSV**.

 ## Import and export from other applications

@@ -1,11 +1,13 @@
 ---
 title: "Navigate boards"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 ## Access boards

-To access Mattermost Boards, select the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu in the top left corner of Mattermost, and then select **Boards** to view all the boards for your team.
+To access Mattermost Boards, select the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> menu in the top left corner of Mattermost, and then select **Boards** to view all the boards for your team.

 To access boards linked to a channel, select the **Toggle Linked Boards** icon to the far right.

@@ -29,13 +31,13 @@ All the boards previously associated with the workspace will automatically appea

 ## Unlink a board from a channel

-If you're a board admin and want to unlink a board from a channel you're in, open the Boards Apps Bar, select the options <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> menu and select **Unlink**. Alternatively, you can open the **Share** dialog on the board, open the **Role** drop-down menu next to the channel's name and select **Unlink**.
+If you're a board admin and want to unlink a board from a channel you're in, open the Boards Apps Bar, select the options <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> menu and select **Unlink**. Alternatively, you can open the **Share** dialog on the board, open the **Role** drop-down menu next to the channel's name and select **Unlink**.

 ## Sidebar categories

-You can organize your boards in the left-hand sidebar using custom categories. By default, all boards will appear under the **Boards** category. To manage your categories, open the <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to the category to create, delete, or rename a category. With the exception to the default **Boards** category, all other categories can be renamed or deleted.
+You can organize your boards in the left-hand sidebar using custom categories. By default, all boards will appear under the **Boards** category. To manage your categories, open the <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to the category to create, delete, or rename a category. With the exception to the default **Boards** category, all other categories can be renamed or deleted.

-After creating categories, you can move your boards to those categories by opening the more <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to the board and selecting **Move To…** to select the category where you want the board to be moved.
+After creating categories, you can move your boards to those categories by opening the more <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to the board and selecting **Move To…** to select the category where you want the board to be moved.

 If you delete a category with boards in it, then those boards will return to the default **Boards** category.

@@ -62,7 +64,7 @@ To do this, select and hold the cursor over the category or board name. Then mov

 ## Manage boards on the sidebar

-In addition to moving boards to other categories, from the <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to each board name you can perform the following actions:
+In addition to moving boards to other categories, from the <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> menu next to each board name you can perform the following actions:

 - **Delete board**: If you're an admin of the board, you will see an option to delete the board. Deleting the board permanently removes the board from the sidebar of all board members.
 - **Duplicate board**: Creates a copy of the board and all the cards on the board. The duplicated board will appear under the same category as the original board. Board members and comments from the original board aren't migrated to the new board.
@@ -1,6 +1,7 @@
 ---
 title: "Work with boards"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -10,7 +11,7 @@ Start by selecting the type of board you want to use. A board contains cards, wh

 ## Add new boards

-To add a new board, select the plus icon <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the sidebar, then select **Create New Board** to open the template picker and select a template or blank board.
+To add a new board, select the plus icon <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the sidebar, then select **Create New Board** to open the template picker and select a template or blank board.

 ### Board details

@@ -49,9 +50,9 @@ If none of the available templates suit your requirements, you can create a blan

 ### Create a new template

-To create a new board template select the plus icon <img src="/img/ui/plus_F0415.svg" alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the sidebar to open the template picker, select **Create New Board** and then select **+ New template**.
+To create a new board template select the plus icon <img src={useBaseUrl('/img/ui/plus_F0415.svg')} alt="The Plus icon provides access to channel and direct message functionality." className="theme-icon" /> at the top of the sidebar to open the template picker, select **Create New Board** and then select **+ New template**.

-To turn an existing board into a template, hover over the board title in the sidebar. Select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" />, then select **New template from board**.
+To turn an existing board into a template, hover over the board title in the sidebar. Select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" />, then select **New template from board**.

 ### Share a custom board template

@@ -71,7 +72,7 @@ The admin of the template can also grant specific team members elevated permissi

 Boards and templates are channel-specific so whichever channel you create your board or template in, is where you’ll find it. If you’d like to re-use a board as a template on another channel workspace, you can export it and then import the archive file in the channel of your choosing.

-To do this, select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> in the toolbar at the top of the board. Then select **Export** board archive. Download the archive file. Navigate to the channel where you’d like to add the exported board. Select the gear icon <img src="/img/ui/settings-outline_F08BB.svg" alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then choose **Import archive**. The board you created will be added to this channel.
+To do this, select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> in the toolbar at the top of the board. Then select **Export** board archive. Download the archive file. Navigate to the channel where you’d like to add the exported board. Select the gear icon <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> next to your profile picture, then choose **Import archive**. The board you created will be added to this channel.

 </TabItem>
 </Tabs>
@@ -1,6 +1,8 @@
 ---
 title: "Work with cards"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="entry-ent" />

 A card consists of:
@@ -26,7 +28,7 @@ To add a new content block in the description section, hover over the section an
 - **Divider**: Adds a divider content block below the previous block.
 - **Checkbox**: Adds a checkbox content block. Press Enter/Return after typing in content for your checkbox to add another checkbox within the same block. Please note, Markdown formatting isn't supported within the **Checkbox** content block.

-To manage the description content blocks on a card, hover over any existing block and select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> to move the block up or down, insert a new block above, or delete the current block. Alternatively, you can hover over any existing block, then select and hold the grid button to drag and drop it to a new position within the description section.
+To manage the description content blocks on a card, hover over any existing block and select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> to move the block up or down, insert a new block above, or delete the current block. Alternatively, you can hover over any existing block, then select and hold the grid button to drag and drop it to a new position within the description section.

 ## Card properties

@@ -94,7 +96,7 @@ You can attach files to your cards that other board members can download. There

 To upload a file to a card, select **Attach** in the top-right corner of the card. Then select the file you'd like to upload. When your file has been uploaded, you can find it in the **Attachments** section of the card. Select the **+** sign to add additional files to your card.

-To delete a file, hover over it and select the <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> menu. Then select **Delete**. To download the file, select the download icon.
+To delete a file, hover over it and select the <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> menu. Then select **Delete**. To download the file, select the download icon.

 ## Card badges

@@ -140,7 +142,7 @@ Card templates can help reduce repetitive manual input for similar types of work
 Alternatively, you can turn any existing card into a template:

 1.  Open the card you want to use as a template.
-2.  Select the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> in the top-right corner of the card.
+2.  Select the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> in the top-right corner of the card.
 3.  Select **New template from card**.
 4.  Edit the card as needed, including a helpful name.
 5.  Close the card using the **X** in the top left corner.
@@ -149,7 +151,7 @@ Alternatively, you can turn any existing card into a template:
 To set a default card template for all new cards created on the board:

 1.  Select the drop-down arrow next to **New**.
-2.  Open the options menu <img src="/img/ui/dots-horizontal_F01D8.svg" alt="Use the More icon to access additional message options." className="theme-icon" /> next to the card template of your choosing.
+2.  Open the options menu <img src={useBaseUrl('/img/ui/dots-horizontal_F01D8.svg')} alt="Use the More icon to access additional message options." className="theme-icon" /> next to the card template of your choosing.
 3.  Select **Set as default**.

 <Note>
@@ -1,6 +1,7 @@
 ---
 title: "Notifications and updates"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -56,7 +57,7 @@ The most recent status post alsos displays in the right-hand sidebar of the run

 ## Request an update

-To request a status update, access the **Playbooks** tab in Mattermost. Select the run you want an update for. In the run details page, select the <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> menu next to **Post update** and select **Request update**.
+To request a status update, access the **Playbooks** tab in Mattermost. Select the run you want an update for. In the run details page, select the <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> menu next to **Post update** and select **Request update**.

 <Note>

@@ -1,6 +1,8 @@
 ---
 title: "Share and collaborate"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 There are different ways for teams to access and interact with collaborative playbooks. This is managed in the System Console using permissions. Permissions can be granted in a variety of ways, to allow for different combinations of access and visibility.
@@ -105,7 +107,7 @@ To archive a playbook, you must be a member of the playbook or playbook admin an

 To archive a playbook:

-1.  Go to the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
+1.  Go to the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
 2.  Select **View all...** under the **Playbooks** section in the left menu.
 3.  Select the **...** in the **Actions** column for the playbook you would like to archive.
 4.  Select the **Archive** menu option then the **Archive** button to confirm you would like to archive the playbook.
@@ -122,7 +124,7 @@ To restore an archived playbook, you must have applicable **Manage Playbook Conf

 To restore an archived playbook:

-1.  Go to the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
+1.  Go to the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
 2.  Select **View all...** under the **Playbooks** section in the left menu.
 3.  Verify the **With archived** checkbox next to the playbook search bar is selected.
 4.  Select the **...** in the **Actions** column for the playbook you would like to restore.
@@ -1,6 +1,8 @@
 ---
 title: "Work with collaborative playbooks"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 A collaborative playbook is a checklist of the tasks that make up your processes. Collaborative playbooks allow you to take codified knowledge and processes and make them accessible and editable by your organization and team. When you're setting up your playbook, you'll be able to break tasks down, and assign actions to them - such as using a slash command to start a Zoom call. You can also decide whether to use the same channel every time your playbook is run, or a new one.
@@ -148,7 +150,7 @@ When viewing and editing playbook run attributes on mobile devices, color format

 To configure attributes:

-1.  Go to the **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
+1.  Go to the **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.

 2.  Select the playbook you want to define attributes for.

@@ -1,6 +1,8 @@
 ---
 title: "Work with tasks"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <PlanAvailability slug="all-commercial" />

 ## Tasks and due dates
@@ -42,7 +44,7 @@ From Mattermost v11.1, using Mattermost in a web browser or the desktop app, tas

 To set up conditional behavior in a playbook:

-1.  Go to **Product** <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.
+1.  Go to **Product** <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" /> icon and select **Playbooks**.

 2.  Select the playbook or run you want to add conditions to.

@@ -50,7 +52,7 @@ To set up conditional behavior in a playbook:

 4.  Under **Tasks**, identify a task you want to make conditional.

-5.  From the **More** <img src="/img/ui/dots-vertical_F01D9.svg" alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon next to the task, select **Add condition**.
+5.  From the **More** <img src={useBaseUrl('/img/ui/dots-vertical_F01D9.svg')} alt="Use the More icon in the top left corner to access Mattermost desktop apps customization settings." className="theme-icon" /> icon next to the task, select **Add condition**.

    ![An example of a playbook condition being added.](/images/playbook-conditions-add.png)

@@ -11,7 +11,7 @@ hide_table_of_contents: true

 You deploy and operate Mattermost in network-isolated enclaves — air-gapped classified networks, sovereign-cloud enclaves, DoD IL4/IL5 environments, or tactical edges with DDIL connectivity. This page is a curated entry point — every link goes to the canonical guide.

-:::important No internet egress
+:::important[No internet egress]
 Every page linked from here works without internet access. Stage artifacts on an operator workstation, transfer across your approved boundary, and operate offline.
 :::

@@ -1,11 +1,13 @@
 ---
 title: "Contribute to this documentation"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 Mattermost has a diverse community that extends well beyond code contributions. If you're interested in contributing to Mattermost, why not help improve the documentation? Be sure to join the documentation community in [DWG: Documentation Working Group](https://community.mattermost.com/core/channels/dwg-documentation-working-group) so we can support and celebrate you!

 ## How to get started

-The fastest way to get started with a documentation contribution is to find something you want to change in the documentation. This might be a typo or broken link, or something more extensive like revising or expanding content. Once you've found a page you want to update, select the edit option <img src="/img/ui/edit-on-github.png" alt="Contribute to Mattermost documentation by selecting the Edit option located in the top right corner of any documentation page." className="theme-icon" /> located in the top right corner of that page.
+The fastest way to get started with a documentation contribution is to find something you want to change in the documentation. This might be a typo or broken link, or something more extensive like revising or expanding content. Once you've found a page you want to update, select the edit option <img src={useBaseUrl('/img/ui/edit-on-github.png')} alt="Contribute to Mattermost documentation by selecting the Edit option located in the top right corner of any documentation page." className="theme-icon" /> located in the top right corner of that page.

 ## First-time contributor?

@@ -1,6 +1,7 @@
 ---
 title: "Connect GitHub to Mattermost"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -16,7 +17,7 @@ A Mattermost system admin must perform the following steps to deploy the GitHub

 ### Install the integration

-1.  In Mattermost, from the Product menu <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
+1.  In Mattermost, from the Product menu <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
 2.  Search for or scroll to GitHub, and select **Install**.

 ### Set up the integration
@@ -1,6 +1,7 @@
 ---
 title: "Connect GitLab to Mattermost"
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

@@ -18,7 +19,7 @@ A Mattermost system admin must perform the following steps to deploy the GitLab

 ### Install the integration

-1.  In Mattermost, from the Product menu <img src="/img/ui/products_E82F.svg" alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
+1.  In Mattermost, from the Product menu <img src={useBaseUrl('/img/ui/products_E82F.svg')} alt="Navigate between Channels, collaborative playbooks, and boards using the product menu icon." className="theme-icon" />, select **App Marketplace**.
 2.  Search for or scroll to GitLab, and select **Install**.

 ### Set up the integration
--- a/Show More
+++ b/Show More