diff --git a/browser/package.json b/browser/package.json
index 77803e4e3..6fa0a5d3b 100644
--- a/browser/package.json
+++ b/browser/package.json
@@ -23,6 +23,7 @@
     "@gnomad/ui": "2.0.0",
     "@hot-loader/react-dom": "^17.0.0",
     "@visx/axis": "^3.0.0",
+    "@visx/group": "^3.0.0",
     "core-js": "3.5.0",
     "css-loader": "^6.7.3",
     "d3-array": "^1.2.4",
diff --git a/browser/src/ConstraintTrack.tsx b/browser/src/ConstraintTrack.tsx
index 5002b270c..463f51cc9 100644
--- a/browser/src/ConstraintTrack.tsx
+++ b/browser/src/ConstraintTrack.tsx
@@ -37,6 +37,33 @@ const TopPanel = styled.div`
   margin-bottom: 5px;
 `
 
+const LegendWrapper = styled.div`
+  display: flex;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`
+
+export const RegionAttributeList = styled.dl`
+  margin: 0;
+
+  div {
+    margin-bottom: 0.25em;
+  }
+
+  dt {
+    display: inline;
+    font-weight: bold;
+  }
+
+  dd {
+    display: inline;
+    margin-left: 0.5em;
+  }
+`
+
 export interface GenericRegion {
   start: number
   stop: number
@@ -55,7 +82,7 @@ type Props<R extends GenericRegion> = {
   constrainedRegions: RegionWithUnclamped<R>[]
   infobuttonTopic: string
   legend: ReactNode
-  tooltipComponent: any // TK any
+  tooltipComponent: React.ElementType
   colorFn: (region: R) => string
   valueFn: (region: R) => string
 }
@@ -120,9 +147,12 @@ const ConstraintTrack = <R extends GenericRegion>({
     >
       {({ scalePosition, width }: TrackProps) => (
         <>
-          <TopPanel>{legend}</TopPanel>
+          <TopPanel>
+            <LegendWrapper>{legend}</LegendWrapper>
+          </TopPanel>
           <PlotWrapper>
             <svg height={55} width={width}>
+              {!allRegions && <rect x={0} y={7.5} width={width} height={1} />}
               {constrainedRegions.map((region: RegionWithUnclamped<R>) => {
                 const startX = scalePosition(region.start)
                 const stopX = scalePosition(region.stop)
@@ -139,7 +169,7 @@ const ConstraintTrack = <R extends GenericRegion>({
                     <g>
                       <rect
                         x={startX}
-                        y={0}
+                        y={1}
                         width={regionWidth}
                         height={15}
                         fill={colorFn(region)}
@@ -149,9 +179,9 @@ const ConstraintTrack = <R extends GenericRegion>({
                   </TooltipAnchor>
                 )
               })}
-              <g transform="translate(0,20)">
-                {allRegions &&
-                  allRegions.map((region: R, index: number) => {
+              {allRegions && (
+                <g transform="translate(0,20)">
+                  {allRegions.map((region: R, index: number) => {
                     const startX = scalePosition(region.start)
                     const stopX = scalePosition(region.stop)
                     const regionWidth = stopX - startX
@@ -198,7 +228,8 @@ const ConstraintTrack = <R extends GenericRegion>({
                       </g>
                     )
                   })}
-              </g>
+                </g>
+              )}
             </svg>
           </PlotWrapper>
         </>
diff --git a/browser/src/GenePage/GenePage.tsx b/browser/src/GenePage/GenePage.tsx
index a75190b10..c1c1c976c 100644
--- a/browser/src/GenePage/GenePage.tsx
+++ b/browser/src/GenePage/GenePage.tsx
@@ -10,6 +10,9 @@ import { Track } from '@gnomad/region-viewer'
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module '@gno... Remove this comment to see the full error message
 import { TranscriptPlot } from '@gnomad/track-transcripts'
 import { Badge, Button } from '@gnomad/ui'
+import MitochondrialRegionConstraintTrack, {
+  MitochondrialConstraintRegion,
+} from './MitochondrialRegionConstraintTrack'
 
 import {
   DatasetId,
@@ -72,6 +75,40 @@ import {
 } from '../ChartStyles'
 import { logButtonClick } from '../analytics'
 
+type ProteinMitochondrialGeneConstraint = {
+  exp_lof: number
+  exp_mis: number
+  exp_syn: number
+
+  obs_lof: number
+  obs_mis: number
+  obs_syn: number
+
+  oe_lof: number
+  oe_lof_lower: number
+  oe_lof_upper: number
+
+  oe_mis: number
+  oe_mis_lower: number
+  oe_mis_upper: number
+
+  oe_syn: number
+  oe_syn_lower: number
+  oe_syn_upper: number
+}
+
+type RNAMitochondrialGeneConstraint = {
+  observed: number
+  expected: number
+  oe: number
+  oe_upper: number
+  oe_lower: number
+}
+
+type MitochondrialGeneConstraint =
+  | ProteinMitochondrialGeneConstraint
+  | RNAMitochondrialGeneConstraint
+
 export type Strand = '+' | '-'
 
 export type GeneMetadata = {
@@ -136,6 +173,8 @@ export type Gene = GeneMetadata & {
   clinvar_variants: ClinvarVariant[]
   homozygous_variant_cooccurrence_counts: HomozygousVariantCooccurrenceCountsPerSeverityAndAf
   heterozygous_variant_cooccurrence_counts: HeterozygousVariantCooccurrenceCountsPerSeverityAndAf
+  mitochondrial_constraint: MitochondrialGeneConstraint | null
+  mitochondrial_missense_constraint_regions: MitochondrialConstraintRegion[] | null
 }
 
 const GeneName = styled.span`
@@ -528,6 +567,13 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
           </TrackWrapper>
         )}
 
+        {gene.chrom.startsWith('M') && (
+          <MitochondrialRegionConstraintTrack
+            constraintRegions={gene.mitochondrial_missense_constraint_regions}
+            exons={gene.exons}
+          />
+        )}
+
         {hasCodingExons && gene.chrom !== 'M' && gene.pext && (
           <TissueExpressionTrack
             exons={cdsCompositeExons}
diff --git a/browser/src/GenePage/GenePageContainer.tsx b/browser/src/GenePage/GenePageContainer.tsx
index e78711c20..cdf9c0465 100644
--- a/browser/src/GenePage/GenePageContainer.tsx
+++ b/browser/src/GenePage/GenePageContainer.tsx
@@ -260,6 +260,41 @@ query ${operationName}($geneId: String, $geneSymbol: String, $referenceGenome: R
 	hom_total
       }
     }
+    mitochondrial_constraint {
+      ...on ProteinMitochondrialGeneConstraint {
+        exp_lof
+        exp_mis
+        exp_syn
+        obs_lof
+        obs_mis
+        obs_syn
+        oe_lof
+        oe_lof_lower
+        oe_lof_upper
+        oe_mis
+        oe_mis_lower
+        oe_mis_upper
+        oe_syn
+        oe_syn_lower
+        oe_syn_upper
+      }
+
+      ...on RNAMitochondrialGeneConstraint {
+        observed
+        expected
+        oe
+        oe_upper
+        oe_lower
+      }
+    }
+
+    mitochondrial_missense_constraint_regions{
+      start
+      stop
+      oe
+      oe_upper
+      oe_lower
+    }
   }
 }
 `
diff --git a/browser/src/GenePage/MitochondrialRegionConstraintTrack.spec.tsx b/browser/src/GenePage/MitochondrialRegionConstraintTrack.spec.tsx
new file mode 100644
index 000000000..d3f728326
--- /dev/null
+++ b/browser/src/GenePage/MitochondrialRegionConstraintTrack.spec.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { expect, test } from '@jest/globals'
+import MitochondrialRegionConstraintTrack, {
+  MitochondrialConstraintRegion,
+} from './MitochondrialRegionConstraintTrack'
+import { Exon } from '../TranscriptPage/TranscriptPage'
+// @ts-expect-error
+import { RegionViewerContext } from '@gnomad/region-viewer'
+
+const childProps = {
+  centerPanelWidth: 3,
+  isPositionDefined: true,
+  leftPanelWidth: 4,
+  regions: [],
+  rightPanelWidth: 5,
+  scalePosition: (i: number) => i,
+}
+
+const exons: Exon[] = [
+  { feature_type: 'CDS', start: 123, stop: 234 },
+  { feature_type: 'UTR', start: 235, stop: 999 },
+  { feature_type: 'CDS', start: 1000, stop: 1999 },
+]
+
+test('track has no unexpected changes when gene has constraint', () => {
+  const constraintRegions: MitochondrialConstraintRegion[] = [
+    { start: 555, stop: 666, oe: 0.45, oe_lower: 0.37, oe_upper: 0.47 },
+    { start: 777, stop: 888, oe: 0.56, oe_lower: 0.52, oe_upper: 0.59 },
+  ]
+  const tree = renderer.create(
+    <RegionViewerContext.Provider value={childProps}>
+      <MitochondrialRegionConstraintTrack constraintRegions={constraintRegions} exons={exons} />
+    </RegionViewerContext.Provider>
+  )
+  expect(tree).toMatchSnapshot()
+})
+
+test('track has no unexpected changes when no constraint for gene', () => {
+  const tree = renderer.create(
+    <RegionViewerContext.Provider value={childProps}>
+      <MitochondrialRegionConstraintTrack constraintRegions={null} exons={exons} />
+    </RegionViewerContext.Provider>
+  )
+  expect(tree).toMatchSnapshot()
+})
diff --git a/browser/src/GenePage/MitochondrialRegionConstraintTrack.tsx b/browser/src/GenePage/MitochondrialRegionConstraintTrack.tsx
new file mode 100644
index 000000000..98d89c4a8
--- /dev/null
+++ b/browser/src/GenePage/MitochondrialRegionConstraintTrack.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { Exon } from '../TranscriptPage/TranscriptPage'
+import ConstraintTrack, { regionsInExons, RegionAttributeList } from '../ConstraintTrack'
+
+export type MitochondrialConstraintRegion = {
+  start: number
+  stop: number
+  oe: number
+  oe_upper: number
+  oe_lower: number
+}
+
+type Props = {
+  constraintRegions: MitochondrialConstraintRegion[] | null
+  exons: Exon[]
+}
+
+const constraintColor = '#fd8d3c'
+
+const Legend = () => (
+  <>
+    <span>Constrained region</span>
+    <svg width={50} height={25}>
+      <rect x={10} y={3} width={30} height={10} stroke="#000" fill={constraintColor} />
+    </svg>
+  </>
+)
+
+type TooltipProps = {
+  region: MitochondrialConstraintRegion
+}
+
+const Tooltip = ({ region }: TooltipProps) => {
+  return (
+    <RegionAttributeList>
+      <div>
+        <dt>Coordinates:</dt>
+        <dd>{`M:${region.start}-${region.stop}`}</dd>
+      </div>
+      <div>
+        <dt>Missense observed/expected:</dt>
+        <dd>
+          {region.oe.toFixed(3)} ({region.oe_lower.toFixed(3)}-{region.oe_upper.toFixed(3)})
+        </dd>
+      </div>
+    </RegionAttributeList>
+  )
+}
+
+const formattedOE = (region: MitochondrialConstraintRegion) => region.oe.toFixed(3)
+
+const MitochondrialConstraintRegionTrack = ({ constraintRegions, exons }: Props) => {
+  if (constraintRegions === null) {
+    return null
+  }
+
+  return (
+    <ConstraintTrack
+      trackTitle="Regional constraint"
+      infobuttonTopic="TK-mitochondrial-gene-constraint"
+      legend={<Legend />}
+      valueFn={formattedOE}
+      colorFn={() => constraintColor}
+      tooltipComponent={Tooltip}
+      allRegions={null}
+      constrainedRegions={regionsInExons(
+        constraintRegions,
+        exons.filter((exon) => exon.feature_type === 'CDS')
+      )}
+    />
+  )
+}
+
+export default MitochondrialConstraintRegionTrack
diff --git a/browser/src/GenePage/__snapshots__/MitochondrialRegionConstraintTrack.spec.tsx.snap b/browser/src/GenePage/__snapshots__/MitochondrialRegionConstraintTrack.spec.tsx.snap
new file mode 100644
index 000000000..0bc77cc47
--- /dev/null
+++ b/browser/src/GenePage/__snapshots__/MitochondrialRegionConstraintTrack.spec.tsx.snap
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`track has no unexpected changes when gene has constraint 1`] = `
+<div
+  className="ConstraintTrack__Wrapper-sc-113yvfg-1 iBhwwK"
+>
+  <div
+    className="Track__OuterWrapper-sc-1sdyh2h-0 bBMGlf"
+  >
+    <div
+      className="Track__InnerWrapper-sc-1sdyh2h-1 cEOGGC"
+    >
+      <div
+        className="Track__SidePanel-sc-1sdyh2h-3 iSYzDq"
+        style={
+          {
+            "width": 4,
+          }
+        }
+      >
+        <div
+          className="ConstraintTrack__SidePanel-sc-113yvfg-2 dJMFds"
+        >
+          <span>
+            Regional constraint
+          </span>
+          <button
+            className="InfoButton__Button-sc-13t5e82-0 gxsoyZ"
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              aria-hidden="true"
+              src="test-file-stub"
+            />
+            <span
+              style={
+                {
+                  "border": "0",
+                  "clip": "rect(0 0 0 0)",
+                  "height": "1px",
+                  "margin": "-1px",
+                  "overflow": "hidden",
+                  "padding": "0",
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": "1px",
+                }
+              }
+            >
+              More information
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        className="Track__CenterPanel-sc-1sdyh2h-4 iAyrrk"
+        style={
+          {
+            "width": 3,
+          }
+        }
+      >
+        <div
+          className="ConstraintTrack__TopPanel-sc-113yvfg-3 imJcbb"
+        >
+          <div
+            className="ConstraintTrack__LegendWrapper-sc-113yvfg-4 kkHtue"
+          >
+            <span>
+              Constrained region
+            </span>
+            <svg
+              height={25}
+              width={50}
+            >
+              <rect
+                fill="#fd8d3c"
+                height={10}
+                stroke="#000"
+                width={30}
+                x={10}
+                y={3}
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          className="ConstraintTrack__PlotWrapper-sc-113yvfg-0 fHKmMU"
+        >
+          <svg
+            height={55}
+            width={3}
+          >
+            <rect
+              height={1}
+              width={3}
+              x={0}
+              y={7.5}
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`track has no unexpected changes when no constraint for gene 1`] = `null`;
diff --git a/browser/src/RegionalMissenseConstraintTrack.tsx b/browser/src/RegionalMissenseConstraintTrack.tsx
index a0c064a3c..6a74e9b53 100644
--- a/browser/src/RegionalMissenseConstraintTrack.tsx
+++ b/browser/src/RegionalMissenseConstraintTrack.tsx
@@ -11,6 +11,7 @@ import ConstraintTrack, {
   SidePanel,
   PlotWrapper,
   regionsInExons,
+  RegionAttributeList,
   RegionWithUnclamped,
 } from './ConstraintTrack'
 
@@ -28,24 +29,6 @@ export type RegionalMissenseConstraintRegion = {
   z_score: number | undefined
 }
 
-const RegionAttributeList = styled.dl`
-  margin: 0;
-
-  div {
-    margin-bottom: 0.25em;
-  }
-
-  dt {
-    display: inline;
-    font-weight: bold;
-  }
-
-  dd {
-    display: inline;
-    margin-left: 0.5em;
-  }
-`
-
 // https://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=5
 const colorScale = {
   not_significant: '#e2e2e2',
@@ -77,25 +60,16 @@ function regionColor(region: RegionalMissenseConstraintRegion) {
   return region.p_value > 0.001 ? colorScale.not_significant : color
 }
 
-const LegendWrapper = styled.div`
-  display: flex;
-
-  @media (max-width: 600px) {
-    flex-direction: column;
-    align-items: center;
-  }
-`
-
 const Legend = () => {
   return (
-    <LegendWrapper>
+    <>
       <span>Missense observed/expected</span>
       <svg width={170} height={25}>
-        <rect x={10} y={0} width={30} height={10} stroke="#000" fill={colorScale.least} />
-        <rect x={40} y={0} width={30} height={10} stroke="#000" fill={colorScale.less} />
-        <rect x={70} y={0} width={30} height={10} stroke="#000" fill={colorScale.middle} />
-        <rect x={100} y={0} width={30} height={10} stroke="#000" fill={colorScale.greater} />
-        <rect x={130} y={0} width={30} height={10} stroke="#000" fill={colorScale.greatest} />
+        <rect x={10} y={1} width={30} height={10} stroke="#000" fill={colorScale.least} />
+        <rect x={40} y={1} width={30} height={10} stroke="#000" fill={colorScale.less} />
+        <rect x={70} y={1} width={30} height={10} stroke="#000" fill={colorScale.middle} />
+        <rect x={100} y={1} width={30} height={10} stroke="#000" fill={colorScale.greater} />
+        <rect x={130} y={1} width={30} height={10} stroke="#000" fill={colorScale.greatest} />
         <text x={10} y={10} fontSize="10" dy="1.2em" textAnchor="middle">
           0.0
         </text>
@@ -116,12 +90,12 @@ const Legend = () => {
         </text>
       </svg>
       <svg width={170} height={25}>
-        <rect x={10} y={0} width={20} height={10} stroke="#000" fill={colorScale.not_significant} />
-        <text x={35} y={0} fontSize="10" dy="1em" textAnchor="start">
+        <rect x={10} y={1} width={20} height={10} stroke="#000" fill={colorScale.not_significant} />
+        <text x={35} y={1} fontSize="10" dy="1em" textAnchor="start">
           Not significant (p &gt; 1e-3)
         </text>
       </svg>
-    </LegendWrapper>
+    </>
   )
 }
 
@@ -279,7 +253,7 @@ const RegionalMissenseConstraintTrack = ({ regionalMissenseConstraint, gene }: P
       legend={<Legend />}
       tooltipComponent={RegionTooltip}
       valueFn={formattedOE}
-    ></ConstraintTrack>
+    />
   )
 }
 
diff --git a/browser/src/__factories__/Gene.ts b/browser/src/__factories__/Gene.ts
index ea16913e2..ac3439647 100644
--- a/browser/src/__factories__/Gene.ts
+++ b/browser/src/__factories__/Gene.ts
@@ -39,6 +39,8 @@ const geneFactory = Factory.define<Gene>(({ params, associations }) => {
     short_tandem_repeats = null,
     exac_regional_missense_constraint_regions = null,
     gnomad_v2_regional_missense_constraint = null,
+    mitochondrial_constraint = null,
+    mitochondrial_missense_constraint_regions = null,
   } = associations
 
   const heterozygous_variant_cooccurrence_counts =
@@ -101,6 +103,8 @@ const geneFactory = Factory.define<Gene>(({ params, associations }) => {
     short_tandem_repeats,
     exac_regional_missense_constraint_regions,
     gnomad_v2_regional_missense_constraint,
+    mitochondrial_constraint,
+    mitochondrial_missense_constraint_regions,
   }
 })
 
diff --git a/browser/src/__snapshots__/RegionalMissenseConstraintTrack.spec.tsx.snap b/browser/src/__snapshots__/RegionalMissenseConstraintTrack.spec.tsx.snap
index 0403bfac4..321aabf30 100644
--- a/browser/src/__snapshots__/RegionalMissenseConstraintTrack.spec.tsx.snap
+++ b/browser/src/__snapshots__/RegionalMissenseConstraintTrack.spec.tsx.snap
@@ -66,7 +66,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
           className="ConstraintTrack__TopPanel-sc-113yvfg-3 imJcbb"
         >
           <div
-            className="RegionalMissenseConstraintTrack__LegendWrapper-sc-1lzrnv-1 glMGEq"
+            className="ConstraintTrack__LegendWrapper-sc-113yvfg-4 kkHtue"
           >
             <span>
               Missense observed/expected
@@ -81,7 +81,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={30}
                 x={10}
-                y={0}
+                y={1}
               />
               <rect
                 fill="#de351b"
@@ -89,7 +89,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={30}
                 x={40}
-                y={0}
+                y={1}
               />
               <rect
                 fill="#fd8d3c"
@@ -97,7 +97,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={30}
                 x={70}
-                y={0}
+                y={1}
               />
               <rect
                 fill="#fecc5c"
@@ -105,7 +105,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={30}
                 x={100}
-                y={0}
+                y={1}
               />
               <rect
                 fill="#ffffb2"
@@ -113,7 +113,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={30}
                 x={130}
-                y={0}
+                y={1}
               />
               <text
                 dy="1.2em"
@@ -180,14 +180,14 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="#000"
                 width={20}
                 x={10}
-                y={0}
+                y={1}
               />
               <text
                 dy="1em"
                 fontSize="10"
                 textAnchor="start"
                 x={35}
-                y={0}
+                y={1}
               >
                 Not significant (p &gt; 1e-3)
               </text>
@@ -211,7 +211,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="black"
                 width={56}
                 x={124}
-                y={0}
+                y={1}
               />
             </g>
             <g
@@ -224,7 +224,7 @@ exports[`RegionalMissenseConstraint has no unexpected changes when the RMC has e
                 stroke="black"
                 width={54}
                 x={346}
-                y={0}
+                y={1}
               />
             </g>
             <g
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a44903aa7..180a3cfff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -183,6 +183,9 @@ importers:
       '@visx/axis':
         specifier: ^3.0.0
         version: 3.5.0(react@17.0.2)
+      '@visx/group':
+        specifier: ^3.0.0
+        version: 3.3.0(react@17.0.2)
       core-js:
         specifier: 3.5.0
         version: 3.5.0