diff --git a/src/ui/components/ErrorBoundary.js b/src/ui/components/ErrorBoundary.js
index d895558da..51aaebec7 100644
--- a/src/ui/components/ErrorBoundary.js
+++ b/src/ui/components/ErrorBoundary.js
@@ -7,7 +7,7 @@
 
 import ErrorBlock from './ErrorBlock.js';
 import {Component} from 'react';
-import Heading from './Heading.js';
+import Heading from './Heading.tsx';
 import Button from './Button.js';
 import View from './View.tsx';
 import styled from '../styled/index.js';
diff --git a/src/ui/components/Heading.js b/src/ui/components/Heading.tsx
similarity index 88%
rename from src/ui/components/Heading.js
rename to src/ui/components/Heading.tsx
index d7ea685cb..1c9b09773 100644
--- a/src/ui/components/Heading.js
+++ b/src/ui/components/Heading.tsx
@@ -5,7 +5,8 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
+import React from 'react';
 
 const LargeHeading = styled('div')({
   fontSize: 18,
@@ -30,11 +31,11 @@ export default function Heading(props: {
   /**
    * Level of the heading. A number from 1-6. Where 1 is the largest heading.
    */
-  level?: number,
+  level?: number;
   /**
    * Children.
    */
-  children?: React$Node,
+  children?: React.ReactNode;
 }) {
   if (props.level === 1) {
     return <LargeHeading>{props.children}</LargeHeading>;
diff --git a/src/ui/index.js b/src/ui/index.js
index 00a50a29a..5e13465f1 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -139,7 +139,7 @@ export {default as StatusIndicator} from './components/StatusIndicator.tsx';
 export {default as HorizontalRule} from './components/HorizontalRule.tsx';
 export {default as VerticalRule} from './components/VerticalRule.tsx';
 export {default as Label} from './components/Label.tsx';
-export {default as Heading} from './components/Heading.js';
+export {default as Heading} from './components/Heading.tsx';
 
 // filters
 export type {Filter} from './components/filter/types.js';