diff --git a/src/ui/components/HorizontalRule.js b/src/ui/components/HorizontalRule.tsx
similarity index 87%
rename from src/ui/components/HorizontalRule.js
rename to src/ui/components/HorizontalRule.tsx
index 2b20f970a..2d429e623 100644
--- a/src/ui/components/HorizontalRule.js
+++ b/src/ui/components/HorizontalRule.tsx
@@ -5,7 +5,7 @@
  * @format
  */
 
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 
 export default styled('div')({
   backgroundColor: '#c9ced4',
diff --git a/src/ui/index.js b/src/ui/index.js
index 575516f21..00a50a29a 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -136,7 +136,7 @@ export {default as ResizeSensor} from './components/ResizeSensor.tsx';
 export {default as StatusIndicator} from './components/StatusIndicator.tsx';
 
 // typography
-export {default as HorizontalRule} from './components/HorizontalRule.js';
+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';