diff --git a/packages/server/src/ui/components/markdown.jsx b/packages/server/src/ui/components/markdown.jsx
new file mode 100644
index 000000000..7f1691bd0
--- /dev/null
+++ b/packages/server/src/ui/components/markdown.jsx
@@ -0,0 +1,72 @@
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h, Fragment} from 'preact';
+
+/**
+ * Split a string on markdown links (e.g. [some link](https://...)) into
+ * segments of plain text that weren't part of a link (marked as
+ * `isLink === false`), and segments with text content and a URL that did make
+ * up a link (marked as `isLink === true`).
+ * @param {string} text
+ * @return {Array<{isLink: true, text: string, linkHref: string}|{isLink: false, text: string}>}
+ */
+function splitMarkdownLink(text) {
+  /** @type {Array<{isLink: true, text: string, linkHref: string}|{isLink: false, text: string}>} */
+  const segments = [];
+
+  const parts = text.split(/\[([^\]]+?)\]\((https?:\/\/.*?)\)/g);
+  while (parts.length) {
+    // Shift off the same number of elements as the pre-split and capture groups.
+    const [preambleText, linkText, linkHref] = parts.splice(0, 3);
+
+    if (preambleText) {
+      // Skip empty text as it's an artifact of splitting, not meaningful.
+      segments.push({
+        isLink: false,
+        text: preambleText,
+      });
+    }
+
+    // Append link if there are any.
+    if (linkText && linkHref) {
+      segments.push({
+        isLink: true,
+        text: linkText,
+        linkHref,
+      });
+    }
+  }
+
+  return segments;
+}
+
+/** @param {{text: string}} props */
+export const Markdown = props => {
+  const segments = splitMarkdownLink(props.text);
+
+  return (
+    <Fragment>
+      {segments.map((segment, i) => {
+        if (!segment.isLink) return <span key={i}>{segment.text}</span>;
+
+        const url = new URL(segment.linkHref);
+
+        const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
+        if (DOCS_ORIGINS.includes(url.origin)) {
+          url.searchParams.set('utm_source', 'lighthouse');
+          url.searchParams.set('utm_medium', 'ci');
+        }
+
+        return (
+          <a key={i} href={url.href} target="_blank" rel="noopener noreferrer">
+            {segment.text}
+          </a>
+        );
+      })}
+    </Fragment>
+  );
+};
diff --git a/packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css b/packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css
index e8cbebc5f..06acb83be 100644
--- a/packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css
+++ b/packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css
@@ -34,17 +34,26 @@
 }
 
 .audit-detail-pane__audit {
+  position: relative;
   padding: calc(2 * var(--base-spacing));
+  padding-left: calc(3 * var(--base-spacing));
 
   border-bottom: 1px solid var(--base-border-color);
 }
 
+.audit-detail-pane__score {
+  position: absolute;
+  left: var(--base-spacing);
+  top: calc(2 * var(--base-spacing) + var(--header-font-size) / 4);
+}
+
 .audit-detail-pane__audit-title {
   font-size: var(--header-font-size);
 }
 
 .audit-detail-pane__audit-description {
   color: var(--secondary-text-color);
+  margin-top: calc(var(--base-spacing) / 2);
 }
 
 .audit-detail-pane__audit-details {
diff --git a/packages/server/src/ui/routes/build-view/audit-detail/audit-detail.jsx b/packages/server/src/ui/routes/build-view/audit-detail/audit-detail.jsx
index 0a49a5ee4..7302b4027 100644
--- a/packages/server/src/ui/routes/build-view/audit-detail/audit-detail.jsx
+++ b/packages/server/src/ui/routes/build-view/audit-detail/audit-detail.jsx
@@ -6,7 +6,8 @@
 
 import {h} from 'preact';
 import clsx from 'clsx';
-import {ScoreWord} from '../../../components/score-icon';
+import {ScoreWord, ScoreIcon} from '../../../components/score-icon';
+import {Markdown} from '../../../components/markdown';
 import {TableDetails} from './table-details';
 import {NumericDiff} from '../audit-list/numeric-diff';
 import {getDiffLabel} from '@lhci/utils/src/audit-diff-finder';
@@ -54,8 +55,13 @@ export const AuditDetail = props => {
 
   return (
     <div id={`audit-detail-pane-audit--${audit.id}`} className={clsx('audit-detail-pane__audit')}>
+      <div className="audit-detail-pane__score">
+        <ScoreIcon score={audit.score || 0} />
+      </div>
       <div className="audit-detail-pane__audit-title">{audit.title}</div>
-      <div className="audit-detail-pane__audit-description">{audit.description}</div>
+      <div className="audit-detail-pane__audit-description">
+        <Markdown text={audit.description || ''} />
+      </div>
       <div className="audit-detail-pane__audit-details">
         <Details pair={props.pair} />
       </div>