diff --git a/components/contributors/index.js b/components/contributors/index.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/contributors/styled/index.js b/components/contributors/styled/index.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/cutoff-image/index.js b/components/cutoff-image/index.js
index 4f008813..f227f88e 100644
--- a/components/cutoff-image/index.js
+++ b/components/cutoff-image/index.js
@@ -1,6 +1,4 @@
 // @flow
-import * as React from "react";
-
 import { StyledCutoffImage } from "@components/cutoff-image/styled";
 
 const CutoffImage = StyledCutoffImage;
diff --git a/components/footer/index.js b/components/footer/index.js
index 7dbd5f5a..fd3f7665 100644
--- a/components/footer/index.js
+++ b/components/footer/index.js
@@ -1,18 +1,16 @@
-import React from "react";
+// @flow
+import * as React from "react";
 import Link from "next/link";
 import { navigation, NavItems } from "@components/header";
 import { StyledFooter } from "@components/footer/styled";
 
-const Footer = props => (
+const Footer = () => (
   <StyledFooter>
     <StyledFooter.Wrapper>
       <StyledFooter.Section>
         <Link href="https://numfocus.org/">
           <a target="_blank">
-            <img
-              src="/static/sponsor-numfocus.png"
-              alt="NumFocus"
-            />
+            <img src="/static/sponsor-numfocus.png" alt="NumFocus" />
           </a>
         </Link>
       </StyledFooter.Section>
diff --git a/components/footer/styled/index.js b/components/footer/styled/index.js
index b4381a9c..7ea89dc0 100644
--- a/components/footer/styled/index.js
+++ b/components/footer/styled/index.js
@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { sif, defaultWrapper } from "@common/styled";
 
diff --git a/components/hero/pattern.js b/components/hero/pattern.js
index 07b27195..d1b342cb 100644
--- a/components/hero/pattern.js
+++ b/components/hero/pattern.js
@@ -1,10 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+// @flow
+import * as React from "react";
+import styled from "styled-components";
 
 const StyledSVG = styled.svg`
   display: block;
 `;
-export default ({ width, ...rest }) => (
+export default () => (
   <StyledSVG width="1422px" height="542px" viewBox="0 0 1422 542">
     <defs>
       <linearGradient
diff --git a/components/hero/styled/index.js b/components/hero/styled/index.js
index 9a6ab996..386a7539 100644
--- a/components/hero/styled/index.js
+++ b/components/hero/styled/index.js
@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { spacing } from "@common/constants";
 import { colors } from "@common/colors";
@@ -67,7 +68,7 @@ const StyledHero = styled.div`
   position: relative;
   a{
     &:link,
-    &:visited, 
+    &:visited,
     &:active,
     &:hover{
       color: white;
diff --git a/components/navigation/navigation-left.js b/components/navigation/navigation-left.js
index a81810e8..ac9d5a56 100644
--- a/components/navigation/navigation-left.js
+++ b/components/navigation/navigation-left.js
@@ -1,5 +1,7 @@
-import React from "react";
+// @flow
+import * as React from "react";
 import Link from "next/link";
+// $FlowFixMe
 import styles from "./navigation.scss";
 
 export default () => (
diff --git a/components/navigation/navigation-right.js b/components/navigation/navigation-right.js
index 32a2450b..89878b16 100644
--- a/components/navigation/navigation-right.js
+++ b/components/navigation/navigation-right.js
@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 import Link from "next/link";
 
 export default () => (
diff --git a/components/navigation/social-buttons.js b/components/navigation/social-buttons.js
index e2771bcb..33063c8d 100644
--- a/components/navigation/social-buttons.js
+++ b/components/navigation/social-buttons.js
@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 
 export const SlackButton = () => (
   <a
diff --git a/components/page/index.js b/components/page/index.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/page/styled/index.js b/components/page/styled/index.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/typography/index.js b/components/typography/index.js
index a2668726..b4b437b7 100644
--- a/components/typography/index.js
+++ b/components/typography/index.js
@@ -1,3 +1,4 @@
+// @flow
 import { StyledType as Type, BashPre } from "@components/typography/styled";
 
 export { Type, BashPre };
diff --git a/components/typography/styled/index.js b/components/typography/styled/index.js
index fa74d853..bf8feeeb 100644
--- a/components/typography/styled/index.js
+++ b/components/typography/styled/index.js
@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { fonts } from "@common/constants";
 import { colors } from "@common/colors";
diff --git a/components/video/index.js b/components/video/index.js
index dd88aeb4..fe06f361 100644
--- a/components/video/index.js
+++ b/components/video/index.js
@@ -1,9 +1,15 @@
+// @flow
+import * as React from "react";
 import styled, { css } from "styled-components";
 import { handheld, desktop } from "@common/mixins";
-const Video = ({ mp4, webm, poster }) => (
-  <video poster={poster} preload="auto" autoPlay muted loop="loop">
-    {mp4 ? <source src={mp4} type="video/mp4" /> : null}
-    {webm ? <source src={webm} type="video/webm" /> : null}
+
+type VideoProps = { mp4?: string, webm?: string, poster?: string };
+
+const Video = (props: VideoProps) => (
+  <video poster={props.poster} preload="auto" autoPlay muted loop="loop">
+    {props.mp4 ? <source src={props.mp4} type="video/mp4" /> : null}
+    {props.webm ? <source src={props.webm} type="video/webm" /> : null}
   </video>
 );
-export { Video, StyledVideoPlaceholder };
+
+export { Video };
diff --git a/pages/about.js b/pages/about.js
index 7709b981..b8359734 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -12,8 +12,7 @@ import {
   StyledPersonTitle,
   StyledPersonSocial,
   StyledPersonSocialItem,
-  StyledGridWrapper,
-  StyledGrid
+  StyledGridWrapper
 } from "@components/layout/styled";
 import { ContentSection } from "@components/content-section";
 import { PageHeader } from "@components/page-header";
diff --git a/pages/atom.js b/pages/atom.js
index 857d44ed..681540df 100644
--- a/pages/atom.js
+++ b/pages/atom.js
@@ -2,24 +2,13 @@
 import * as React from "react";
 import { colors } from "@common/colors";
 import Layout from "@components/layout";
+import { Video } from "@components/video";
 import { Hero } from "@components/hero";
 import { Type, BashPre } from "@components/typography";
 import { ContentSection, ContentSections } from "@components/content-section";
 import { Button, Buttons } from "@components/button";
 import { CutoffImage } from "@components/cutoff-image";
 
-type VideoProps =
-  | { mp4: string, webm: string, poster: string }
-  | { mp4: string, poster: string }
-  | { webm: string, poster: string };
-
-const Video = (props: VideoProps) => (
-  <video poster={props.poster} preload="auto" autoPlay muted loop="loop">
-    {props.mp4 ? <source src={props.mp4} type="video/mp4" /> : null}
-    {props.webm ? <source src={props.webm} type="video/webm" /> : null}
-  </video>
-);
-
 const InspectCode = () => (
   <ContentSection center>
     <ContentSection.Pane visual>