diff --git a/src/ui/components/VerticalRule.js b/src/ui/components/VerticalRule.tsx
similarity index 87%
rename from src/ui/components/VerticalRule.js
rename to src/ui/components/VerticalRule.tsx
index 8ae62d143..90ca8058b 100644
--- a/src/ui/components/VerticalRule.js
+++ b/src/ui/components/VerticalRule.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 06040eb70..6cdc28bd1 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -137,7 +137,7 @@ export {default as StatusIndicator} from './components/StatusIndicator.tsx';
 
 // typography
 export {default as HorizontalRule} from './components/HorizontalRule.js';
-export {default as VerticalRule} from './components/VerticalRule.js';
+export {default as VerticalRule} from './components/VerticalRule.tsx';
 export {default as Label} from './components/Label.js';
 export {default as Heading} from './components/Heading.js';