diff --git a/src/ui/components/Box.js b/src/ui/components/Box.tsx
similarity index 79%
rename from src/ui/components/Box.js
rename to src/ui/components/Box.tsx
index 64b5b79e3..247dd20a1 100644
--- a/src/ui/components/Box.js
+++ b/src/ui/components/Box.tsx
@@ -5,8 +5,8 @@
  * @format
  */
 
-import FlexBox from './FlexBox.tsx';
-import styled from '../styled/index.js';
+import FlexBox from './FlexBox';
+import styled from 'react-emotion';
 
 export default styled(FlexBox)({
   height: '100%',
diff --git a/src/ui/index.js b/src/ui/index.js
index 20fb06950..bfb28e153 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -118,7 +118,7 @@ export {default as Block} from './components/Block.js';
 export {default as FocusableBox} from './components/FocusableBox.tsx';
 export {default as Sidebar} from './components/Sidebar.tsx';
 export {default as SidebarLabel} from './components/SidebarLabel.tsx';
-export {default as Box} from './components/Box.js';
+export {default as Box} from './components/Box.tsx';
 export {default as FlexBox} from './components/FlexBox.tsx';
 export {default as FlexRow} from './components/FlexRow.tsx';
 export {default as FlexColumn} from './components/FlexColumn.tsx';