diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json
index 25d27cef8..9bca4ab16 100644
--- a/web/ui/react-app/package.json
+++ b/web/ui/react-app/package.json
@@ -19,13 +19,13 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@nexucis/fuzzy": "^0.2.2",
     "@reach/router": "^1.2.1",
     "bootstrap": "^4.6.0",
     "codemirror-promql": "^0.16.0",
     "css.escape": "^1.5.1",
     "downshift": "^3.4.8",
     "enzyme-to-json": "^3.4.3",
-    "fuzzy": "^0.1.3",
     "i": "^0.3.6",
     "jquery": "^3.5.1",
     "jquery.flot.tooltip": "^0.9.0",
diff --git a/web/ui/react-app/src/pages/flags/Flags.test.tsx b/web/ui/react-app/src/pages/flags/Flags.test.tsx
index 6c8c254c7..4fdc8519f 100644
--- a/web/ui/react-app/src/pages/flags/Flags.test.tsx
+++ b/web/ui/react-app/src/pages/flags/Flags.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { FlagsContent } from './Flags';
-import { Table } from 'reactstrap';
+import { Input, Table } from 'reactstrap';
 import toJson from 'enzyme-to-json';
 
 const sampleFlagsResponse = {
@@ -55,11 +55,60 @@ describe('Flags', () => {
       striped: true,
     });
   });
+
   it('should not fail if data is missing', () => {
     expect(shallow(<FlagsContent />)).toHaveLength(1);
   });
+
   it('should match snapshot', () => {
     const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
     expect(toJson(w)).toMatchSnapshot();
   });
+
+  it('is sorted by flag by default', (): void => {
+    const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
+    const td = w
+      .find('tbody')
+      .find('td')
+      .find('span')
+      .first();
+    expect(td.html()).toBe('<span>--alertmanager.notification-queue-capacity</span>');
+  });
+
+  it('sorts', (): void => {
+    const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
+    const th = w
+      .find('thead')
+      .find('td')
+      .filterWhere((td): boolean => td.hasClass('Flag'));
+    th.simulate('click');
+    const td = w
+      .find('tbody')
+      .find('td')
+      .find('span')
+      .first();
+    expect(td.html()).toBe('<span>--web.user-assets</span>');
+  });
+
+  it('filters by flag name', (): void => {
+    const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
+    const input = w.find(Input);
+    input.simulate('change', { target: { value: 'timeout' } });
+    const tds = w
+      .find('tbody')
+      .find('td')
+      .filterWhere(code => code.hasClass('flag-item'));
+    expect(tds.length).toEqual(3);
+  });
+
+  it('filters by flag value', (): void => {
+    const w = shallow(<FlagsContent data={sampleFlagsResponse} />);
+    const input = w.find(Input);
+    input.simulate('change', { target: { value: '10s' } });
+    const tds = w
+      .find('tbody')
+      .find('td')
+      .filterWhere(code => code.hasClass('flag-value'));
+    expect(tds.length).toEqual(1);
+  });
 });
diff --git a/web/ui/react-app/src/pages/flags/Flags.tsx b/web/ui/react-app/src/pages/flags/Flags.tsx
index 60b67ae77..06e2434b8 100644
--- a/web/ui/react-app/src/pages/flags/Flags.tsx
+++ b/web/ui/react-app/src/pages/flags/Flags.tsx
@@ -1,10 +1,18 @@
-import React, { FC } from 'react';
+import React, { ChangeEvent, FC, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
-import { Table } from 'reactstrap';
+import { Input, InputGroup, Table } from 'reactstrap';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { useFetch } from '../../hooks/useFetch';
 import { usePathPrefix } from '../../contexts/PathPrefixContext';
 import { API_PATH } from '../../constants/constants';
+import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import sanitizeHTML from 'sanitize-html';
+import { Fuzzy, FuzzyResult } from '@nexucis/fuzzy';
+
+const fuz = new Fuzzy({ pre: '<strong>', post: '</strong>', shouldSort: true });
+const flagSeparator = '||';
 
 interface FlagMap {
   [key: string]: string;
@@ -14,18 +22,99 @@ interface FlagsProps {
   data?: FlagMap;
 }
 
+const compareAlphaFn = (keys: boolean, reverse: boolean) => (
+  [k1, v1]: [string, string],
+  [k2, v2]: [string, string]
+): number => {
+  const a = keys ? k1 : v1;
+  const b = keys ? k2 : v2;
+  const reverser = reverse ? -1 : 1;
+  return reverser * a.localeCompare(b);
+};
+
+const getSortIcon = (b: boolean | undefined): IconDefinition => {
+  if (b === undefined) {
+    return faSort;
+  }
+  if (b) {
+    return faSortDown;
+  }
+  return faSortUp;
+};
+
+interface SortState {
+  name: string;
+  alpha: boolean;
+  focused: boolean;
+}
+
 export const FlagsContent: FC<FlagsProps> = ({ data = {} }) => {
+  const initialSearch = '';
+  const [searchState, setSearchState] = useState(initialSearch);
+  const initialSort: SortState = {
+    name: 'Flag',
+    alpha: true,
+    focused: true,
+  };
+  const [sortState, setSortState] = useState(initialSort);
+  const searchable = Object.entries(data)
+    .sort(compareAlphaFn(sortState.name === 'Flag', !sortState.alpha))
+    .map(([flag, value]) => `--${flag}${flagSeparator}${value}`);
+  let filtered = searchable;
+  if (searchState.length > 0) {
+    filtered = fuz.filter(searchState, searchable).map((value: FuzzyResult) => value.rendered);
+  }
   return (
     <>
       <h2>Command-Line Flags</h2>
-      <Table bordered size="sm" striped>
+      <InputGroup>
+        <Input
+          autoFocus
+          placeholder="Filter by flag name or value..."
+          className="my-3"
+          value={searchState}
+          onChange={({ target }: ChangeEvent<HTMLInputElement>): void => {
+            setSearchState(target.value);
+          }}
+        />
+      </InputGroup>
+      <Table bordered size="sm" striped hover>
+        <thead>
+          <tr>
+            {['Flag', 'Value'].map((col: string) => (
+              <td
+                key={col}
+                className={`px-4 ${col}`}
+                style={{ width: '50%' }}
+                onClick={(): void =>
+                  setSortState({
+                    name: col,
+                    focused: true,
+                    alpha: sortState.name === col ? !sortState.alpha : true,
+                  })
+                }
+              >
+                <span className="mr-2">{col}</span>
+                <FontAwesomeIcon icon={getSortIcon(sortState.name !== col ? undefined : sortState.alpha)} />
+              </td>
+            ))}
+          </tr>
+        </thead>
         <tbody>
-          {Object.keys(data).map(key => (
-            <tr key={key}>
-              <th>{key}</th>
-              <td>{data[key]}</td>
-            </tr>
-          ))}
+          {filtered.map((result: string) => {
+            const [flagMatchStr, valueMatchStr] = result.split(flagSeparator);
+            const sanitizeOpts = { allowedTags: ['strong'] };
+            return (
+              <tr key={flagMatchStr}>
+                <td className="flag-item">
+                  <span dangerouslySetInnerHTML={{ __html: sanitizeHTML(flagMatchStr, sanitizeOpts) }} />
+                </td>
+                <td className="flag-value">
+                  <span dangerouslySetInnerHTML={{ __html: sanitizeHTML(valueMatchStr, sanitizeOpts) }} />
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </Table>
     </>
diff --git a/web/ui/react-app/src/pages/flags/__snapshots__/Flags.test.tsx.snap b/web/ui/react-app/src/pages/flags/__snapshots__/Flags.test.tsx.snap
index ae3825986..487205ea2 100644
--- a/web/ui/react-app/src/pages/flags/__snapshots__/Flags.test.tsx.snap
+++ b/web/ui/react-app/src/pages/flags/__snapshots__/Flags.test.tsx.snap
@@ -5,389 +5,1112 @@ exports[`Flags should match snapshot 1`] = `
   <h2>
     Command-Line Flags
   </h2>
+  <InputGroup
+    tag="div"
+  >
+    <Input
+      autoFocus={true}
+      className="my-3"
+      onChange={[Function]}
+      placeholder="Filter by flag name or value..."
+      type="text"
+      value=""
+    />
+  </InputGroup>
   <Table
     bordered={true}
+    hover={true}
     responsiveTag="div"
     size="sm"
     striped={true}
     tag="table"
   >
+    <thead>
+      <tr>
+        <td
+          className="px-4 Flag"
+          key="Flag"
+          onClick={[Function]}
+          style={
+            Object {
+              "width": "50%",
+            }
+          }
+        >
+          <span
+            className="mr-2"
+          >
+            Flag
+          </span>
+          <FontAwesomeIcon
+            border={false}
+            className=""
+            fixedWidth={false}
+            flip={null}
+            icon={
+              Object {
+                "icon": Array [
+                  320,
+                  512,
+                  Array [],
+                  "f0dd",
+                  "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z",
+                ],
+                "iconName": "sort-down",
+                "prefix": "fas",
+              }
+            }
+            inverse={false}
+            listItem={false}
+            mask={null}
+            pull={null}
+            pulse={false}
+            rotation={null}
+            size={null}
+            spin={false}
+            swapOpacity={false}
+            symbol={false}
+            title=""
+            transform={null}
+          />
+        </td>
+        <td
+          className="px-4 Value"
+          key="Value"
+          onClick={[Function]}
+          style={
+            Object {
+              "width": "50%",
+            }
+          }
+        >
+          <span
+            className="mr-2"
+          >
+            Value
+          </span>
+          <FontAwesomeIcon
+            border={false}
+            className=""
+            fixedWidth={false}
+            flip={null}
+            icon={
+              Object {
+                "icon": Array [
+                  320,
+                  512,
+                  Array [],
+                  "f0dc",
+                  "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z",
+                ],
+                "iconName": "sort",
+                "prefix": "fas",
+              }
+            }
+            inverse={false}
+            listItem={false}
+            mask={null}
+            pull={null}
+            pulse={false}
+            rotation={null}
+            size={null}
+            spin={false}
+            swapOpacity={false}
+            symbol={false}
+            title=""
+            transform={null}
+          />
+        </td>
+      </tr>
+    </thead>
     <tbody>
       <tr
-        key="alertmanager.notification-queue-capacity"
+        key="--alertmanager.notification-queue-capacity"
       >
-        <th>
-          alertmanager.notification-queue-capacity
-        </th>
-        <td>
-          10000
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--alertmanager.notification-queue-capacity",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "10000",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="alertmanager.timeout"
+        key="--alertmanager.timeout"
       >
-        <th>
-          alertmanager.timeout
-        </th>
-        <td>
-          10s
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--alertmanager.timeout",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "10s",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="config.file"
+        key="--config.file"
       >
-        <th>
-          config.file
-        </th>
-        <td>
-          ./documentation/examples/prometheus.yml
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--config.file",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "./documentation/examples/prometheus.yml",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="log.format"
+        key="--log.format"
       >
-        <th>
-          log.format
-        </th>
-        <td>
-          logfmt
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--log.format",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "logfmt",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="log.level"
+        key="--log.level"
       >
-        <th>
-          log.level
-        </th>
-        <td>
-          info
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--log.level",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "info",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="query.lookback-delta"
+        key="--query.lookback-delta"
       >
-        <th>
-          query.lookback-delta
-        </th>
-        <td>
-          5m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--query.lookback-delta",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "5m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="query.max-concurrency"
+        key="--query.max-concurrency"
       >
-        <th>
-          query.max-concurrency
-        </th>
-        <td>
-          20
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--query.max-concurrency",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "20",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="query.max-samples"
+        key="--query.max-samples"
       >
-        <th>
-          query.max-samples
-        </th>
-        <td>
-          50000000
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--query.max-samples",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "50000000",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="query.timeout"
+        key="--query.timeout"
       >
-        <th>
-          query.timeout
-        </th>
-        <td>
-          2m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--query.timeout",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "2m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="rules.alert.for-grace-period"
+        key="--rules.alert.for-grace-period"
       >
-        <th>
-          rules.alert.for-grace-period
-        </th>
-        <td>
-          10m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--rules.alert.for-grace-period",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "10m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="rules.alert.for-outage-tolerance"
+        key="--rules.alert.for-outage-tolerance"
       >
-        <th>
-          rules.alert.for-outage-tolerance
-        </th>
-        <td>
-          1h
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--rules.alert.for-outage-tolerance",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "1h",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="rules.alert.resend-delay"
+        key="--rules.alert.resend-delay"
       >
-        <th>
-          rules.alert.resend-delay
-        </th>
-        <td>
-          1m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--rules.alert.resend-delay",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "1m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.remote.flush-deadline"
+        key="--storage.remote.flush-deadline"
       >
-        <th>
-          storage.remote.flush-deadline
-        </th>
-        <td>
-          1m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.remote.flush-deadline",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "1m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.remote.read-concurrent-limit"
+        key="--storage.remote.read-concurrent-limit"
       >
-        <th>
-          storage.remote.read-concurrent-limit
-        </th>
-        <td>
-          10
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.remote.read-concurrent-limit",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "10",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.remote.read-max-bytes-in-frame"
+        key="--storage.remote.read-max-bytes-in-frame"
       >
-        <th>
-          storage.remote.read-max-bytes-in-frame
-        </th>
-        <td>
-          1048576
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.remote.read-max-bytes-in-frame",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "1048576",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.remote.read-sample-limit"
+        key="--storage.remote.read-sample-limit"
       >
-        <th>
-          storage.remote.read-sample-limit
-        </th>
-        <td>
-          50000000
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.remote.read-sample-limit",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "50000000",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.allow-overlapping-blocks"
+        key="--storage.tsdb.allow-overlapping-blocks"
       >
-        <th>
-          storage.tsdb.allow-overlapping-blocks
-        </th>
-        <td>
-          false
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.allow-overlapping-blocks",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "false",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.max-block-duration"
+        key="--storage.tsdb.max-block-duration"
       >
-        <th>
-          storage.tsdb.max-block-duration
-        </th>
-        <td>
-          36h
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.max-block-duration",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "36h",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.min-block-duration"
+        key="--storage.tsdb.min-block-duration"
       >
-        <th>
-          storage.tsdb.min-block-duration
-        </th>
-        <td>
-          2h
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.min-block-duration",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "2h",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.no-lockfile"
+        key="--storage.tsdb.no-lockfile"
       >
-        <th>
-          storage.tsdb.no-lockfile
-        </th>
-        <td>
-          false
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.no-lockfile",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "false",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.path"
+        key="--storage.tsdb.path"
       >
-        <th>
-          storage.tsdb.path
-        </th>
-        <td>
-          data/
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.path",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "data/",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.retention"
+        key="--storage.tsdb.retention"
       >
-        <th>
-          storage.tsdb.retention
-        </th>
-        <td>
-          0s
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.retention",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "0s",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.retention.size"
+        key="--storage.tsdb.retention.size"
       >
-        <th>
-          storage.tsdb.retention.size
-        </th>
-        <td>
-          0B
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.retention.size",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "0B",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.retention.time"
+        key="--storage.tsdb.retention.time"
       >
-        <th>
-          storage.tsdb.retention.time
-        </th>
-        <td>
-          0s
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.retention.time",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "0s",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.wal-compression"
+        key="--storage.tsdb.wal-compression"
       >
-        <th>
-          storage.tsdb.wal-compression
-        </th>
-        <td>
-          false
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.wal-compression",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "false",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="storage.tsdb.wal-segment-size"
+        key="--storage.tsdb.wal-segment-size"
       >
-        <th>
-          storage.tsdb.wal-segment-size
-        </th>
-        <td>
-          0B
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--storage.tsdb.wal-segment-size",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "0B",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.console.libraries"
+        key="--web.console.libraries"
       >
-        <th>
-          web.console.libraries
-        </th>
-        <td>
-          console_libraries
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.console.libraries",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "console_libraries",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.console.templates"
+        key="--web.console.templates"
       >
-        <th>
-          web.console.templates
-        </th>
-        <td>
-          consoles
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.console.templates",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "consoles",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.cors.origin"
+        key="--web.cors.origin"
       >
-        <th>
-          web.cors.origin
-        </th>
-        <td>
-          .*
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.cors.origin",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": ".*",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.enable-admin-api"
+        key="--web.enable-admin-api"
       >
-        <th>
-          web.enable-admin-api
-        </th>
-        <td>
-          false
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.enable-admin-api",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "false",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.enable-lifecycle"
+        key="--web.enable-lifecycle"
       >
-        <th>
-          web.enable-lifecycle
-        </th>
-        <td>
-          false
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.enable-lifecycle",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "false",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.external-url"
+        key="--web.external-url"
       >
-        <th>
-          web.external-url
-        </th>
-        <td />
-      </tr>
-      <tr
-        key="web.listen-address"
-      >
-        <th>
-          web.listen-address
-        </th>
-        <td>
-          0.0.0.0:9090
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.external-url",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.max-connections"
+        key="--web.listen-address"
       >
-        <th>
-          web.max-connections
-        </th>
-        <td>
-          512
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.listen-address",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "0.0.0.0:9090",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.page-title"
+        key="--web.max-connections"
       >
-        <th>
-          web.page-title
-        </th>
-        <td>
-          Prometheus Time Series Collection and Processing Server
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.max-connections",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "512",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.read-timeout"
+        key="--web.page-title"
       >
-        <th>
-          web.read-timeout
-        </th>
-        <td>
-          5m
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.page-title",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Prometheus Time Series Collection and Processing Server",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.route-prefix"
+        key="--web.read-timeout"
       >
-        <th>
-          web.route-prefix
-        </th>
-        <td>
-          /
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.read-timeout",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "5m",
+              }
+            }
+          />
         </td>
       </tr>
       <tr
-        key="web.user-assets"
+        key="--web.route-prefix"
       >
-        <th>
-          web.user-assets
-        </th>
-        <td />
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.route-prefix",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "/",
+              }
+            }
+          />
+        </td>
+      </tr>
+      <tr
+        key="--web.user-assets"
+      >
+        <td
+          className="flag-item"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "--web.user-assets",
+              }
+            }
+          />
+        </td>
+        <td
+          className="flag-value"
+        >
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "",
+              }
+            }
+          />
+        </td>
       </tr>
     </tbody>
   </Table>
diff --git a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
index 38200b650..bc6f52293 100644
--- a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
+++ b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
@@ -2,12 +2,12 @@ import React, { Component } from 'react';
 import { Button, InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';
 
 import Downshift, { ControllerStateAndHelpers } from 'downshift';
-import fuzzy from 'fuzzy';
 import sanitizeHTML from 'sanitize-html';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faSpinner, faGlobeEurope } from '@fortawesome/free-solid-svg-icons';
 import MetricsExplorer from './MetricsExplorer';
+import { Fuzzy, FuzzyResult } from '@nexucis/fuzzy';
 
 interface ExpressionInputProps {
   value: string;
@@ -24,6 +24,8 @@ interface ExpressionInputState {
   showMetricsExplorer: boolean;
 }
 
+const fuz = new Fuzzy({ pre: '<strong>', post: '</strong>', shouldSort: true });
+
 class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputState> {
   private exprInputRef = React.createRef<HTMLInputElement>();
 
@@ -71,10 +73,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
   };
 
   getSearchMatches = (input: string, expressions: string[]) => {
-    return fuzzy.filter(input.replace(/ /g, ''), expressions, {
-      pre: '<strong>',
-      post: '</strong>',
-    });
+    return fuz.filter(input.replace(/ /g, ''), expressions);
   };
 
   createAutocompleteSection = (downshift: ControllerStateAndHelpers<any>) => {
@@ -96,11 +95,11 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                     <li className="autosuggest-dropdown-header">{title}</li>
                     {matches
                       .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
-                      .map(({ original, string: text }) => {
+                      .map((result: FuzzyResult) => {
                         const itemProps = downshift.getItemProps({
-                          key: original,
+                          key: result.original,
                           index,
-                          item: original,
+                          item: result.original,
                           style: {
                             backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
                           },
@@ -109,7 +108,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                           <li
                             key={title}
                             {...itemProps}
-                            dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHTML(result.rendered, { allowedTags: ['strong'] }) }}
                           />
                         );
                       })}
diff --git a/web/ui/react-app/yarn.lock b/web/ui/react-app/yarn.lock
index 2f5254662..27cd9da38 100644
--- a/web/ui/react-app/yarn.lock
+++ b/web/ui/react-app/yarn.lock
@@ -1581,6 +1581,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@nexucis/fuzzy@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@nexucis/fuzzy/-/fuzzy-0.2.2.tgz#60b2bd611e50a82170634027bd52751042622bea"
+  integrity sha512-XcBAj4bePw7rvQB86AOCnDCKAkm5JkVZh4JyVFlo4XXC/yuI4u2oTr4IQZLBsqrhI4ekZwVy3kwmO5kQ02NZzA==
+
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
@@ -5631,11 +5636,6 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz#98d93991c39da9361f8e50b337c4f6e41f120e21"
   integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
 
-fuzzy@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/fuzzy/-/fuzzy-0.1.3.tgz#4c76ec2ff0ac1a36a9dccf9a00df8623078d4ed8"
-  integrity sha1-THbsL/CsGjap3M+aAN+GIweNTtg=
-
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"