diff --git a/src/components/__snapshots__/Parallax.test.tsx.snap b/src/components/Parallax/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/__snapshots__/Parallax.test.tsx.snap
rename to src/components/Parallax/__snapshots__/index.test.tsx.snap
diff --git a/src/components/Parallax/hooks.ts b/src/components/Parallax/hooks.ts
new file mode 100644
index 000000000..7b1e4ee75
--- /dev/null
+++ b/src/components/Parallax/hooks.ts
@@ -0,0 +1,15 @@
+import { ParallaxController } from 'parallax-controller';
+import { useEffect } from 'react';
+
+export function useVerifyController(controller: ParallaxController) {
+  useEffect(() => {
+    // Make sure the provided controller is an instance of the Parallax Controller
+    const isInstance = controller instanceof ParallaxController;
+    // Throw if neither context or global is available
+    if (!controller && !isInstance) {
+      throw new Error(
+        "Must wrap your application's <Parallax /> components in a <ParallaxProvider />."
+      );
+    }
+  }, [controller]);
+}
diff --git a/src/components/Parallax.test.tsx b/src/components/Parallax/index.test.tsx
similarity index 96%
rename from src/components/Parallax.test.tsx
rename to src/components/Parallax/index.test.tsx
index 619b28342..8ffbb2821 100644
--- a/src/components/Parallax.test.tsx
+++ b/src/components/Parallax/index.test.tsx
@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import { ParallaxController, ScrollAxis } from 'parallax-controller';
 import { render } from '@testing-library/react';
-import { Parallax } from './Parallax';
-import { ParallaxProvider } from './ParallaxProvider';
+import { Parallax } from '.';
+import { ParallaxProvider } from '../ParallaxProvider';
 
-import { MockProvider } from '../testUtils/MockProvider';
-import expectRenderError from '../testUtils/expectRenderError';
+import { MockProvider } from '../../testUtils/MockProvider';
+import expectRenderError from '../../testUtils/expectRenderError';
 
 const consoleLog = global.console.log;
 
diff --git a/src/components/Parallax/index.tsx b/src/components/Parallax/index.tsx
new file mode 100644
index 000000000..b8b3ef218
--- /dev/null
+++ b/src/components/Parallax/index.tsx
@@ -0,0 +1,112 @@
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { CreateElementOptions, Element } from 'parallax-controller';
+import { useController } from '../../hooks/useController';
+import { removeUndefinedObjectKeys } from '../../utils/removeUndefinedObjectKeys';
+import { ParallaxProps } from './types';
+import { useVerifyController } from './hooks';
+
+export function Parallax(props: PropsWithChildren<ParallaxProps>) {
+  const controller = useController();
+  const refInner = useRef<HTMLElement>();
+  const refOuter = useRef<HTMLElement>();
+
+  useVerifyController(controller);
+
+  function _getElementOptions(): CreateElementOptions {
+    const useSpeedProp = typeof props.speed !== 'undefined';
+    const isHorizontal = controller.scrollAxis == 'horizontal';
+    const isVertical = controller.scrollAxis == 'vertical';
+
+    let translateX = props.translateX;
+    let translateY = props.translateY;
+
+    if (useSpeedProp && isHorizontal) {
+      translateX = [
+        `${(props.speed || 0) * 10}px`,
+        `${(props.speed || 0) * -10}px`,
+      ];
+    }
+
+    if (useSpeedProp && isVertical) {
+      translateY = [
+        `${(props.speed || 0) * 10}px`,
+        `${(props.speed || 0) * -10}px`,
+      ];
+    }
+
+    return {
+      elInner: refInner.current,
+      elOuter: refOuter.current,
+      props: removeUndefinedObjectKeys({
+        disabled: props.disabled,
+        translateX,
+        translateY,
+        rotate: props.rotate,
+        rotateX: props.rotateX,
+        rotateY: props.rotateY,
+        rotateZ: props.rotateZ,
+        scale: props.scale,
+        scaleX: props.scaleX,
+        scaleY: props.scaleY,
+        scaleZ: props.scaleZ,
+      }),
+    };
+  }
+
+  const [element, setElement] = useState<Element>();
+
+  // create element
+  useEffect(() => {
+    const newElement = controller.createElement(_getElementOptions());
+    setElement(newElement);
+
+    return () => controller.removeElementById(newElement.id);
+  }, []);
+
+  // update element
+  useEffect(() => {
+    if (element) {
+      if (props.disabled) {
+        controller.resetElementStyles(element);
+      } else {
+        controller.updateElementPropsById(
+          element.id,
+          _getElementOptions().props
+        );
+      }
+    }
+  }, [
+    props.disabled,
+    props.translateX,
+    props.translateY,
+    props.rotate,
+    props.rotateX,
+    props.rotateY,
+    props.rotateZ,
+    props.scale,
+    props.scaleX,
+    props.scaleY,
+    props.scaleZ,
+    props.speed,
+  ]);
+
+  const Outer = props.tagOuter;
+  const Inner = props.tagInner;
+
+  const rootClass =
+    'parallax-outer' + (props.className ? ` ${props.className}` : '');
+
+  return (
+    <Outer className={rootClass} ref={refOuter} style={props.styleOuter}>
+      <Inner className="parallax-inner" ref={refInner} style={props.styleInner}>
+        {props.children}
+      </Inner>
+    </Outer>
+  );
+}
+
+Parallax.defaultProps = {
+  disabled: false,
+  tagInner: 'div',
+  tagOuter: 'div',
+};
diff --git a/src/components/Parallax.tsx b/src/components/Parallax/types.ts
similarity index 51%
rename from src/components/Parallax.tsx
rename to src/components/Parallax/types.ts
index a16e18ad2..d47901cbe 100644
--- a/src/components/Parallax.tsx
+++ b/src/components/Parallax/types.ts
@@ -1,12 +1,3 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-import {
-  CreateElementOptions,
-  ParallaxController,
-  Element,
-} from 'parallax-controller';
-import { useController } from '../hooks/useController';
-import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';
-
 export interface ParallaxProps {
   /**
    * A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
@@ -154,122 +145,3 @@ export interface ParallaxProps {
    */
   tagOuter?: any;
 }
-
-function useVerifyController(controller: ParallaxController) {
-  useEffect(() => {
-    // Make sure the provided controller is an instance of the Parallax Controller
-    const isInstance = controller instanceof ParallaxController;
-    // Throw if neither context or global is available
-    if (!controller && !isInstance) {
-      throw new Error(
-        "Must wrap your application's <Parallax /> components in a <ParallaxProvider />."
-      );
-    }
-  }, [controller]);
-}
-
-export function Parallax(props: PropsWithChildren<ParallaxProps>) {
-  const controller = useController();
-  const refInner = useRef<HTMLElement>();
-  const refOuter = useRef<HTMLElement>();
-
-  useVerifyController(controller);
-
-  function _getElementOptions(): CreateElementOptions {
-    const useSpeedProp = typeof props.speed !== 'undefined';
-    const isHorizontal = controller.scrollAxis == 'horizontal';
-    const isVertical = controller.scrollAxis == 'vertical';
-
-    let translateX = props.translateX;
-    let translateY = props.translateY;
-
-    if (useSpeedProp && isHorizontal) {
-      translateX = [
-        `${(props.speed || 0) * 10}px`,
-        `${(props.speed || 0) * -10}px`,
-      ];
-    }
-
-    if (useSpeedProp && isVertical) {
-      translateY = [
-        `${(props.speed || 0) * 10}px`,
-        `${(props.speed || 0) * -10}px`,
-      ];
-    }
-
-    return {
-      elInner: refInner.current,
-      elOuter: refOuter.current,
-      props: removeUndefinedObjectKeys({
-        disabled: props.disabled,
-        translateX,
-        translateY,
-        rotate: props.rotate,
-        rotateX: props.rotateX,
-        rotateY: props.rotateY,
-        rotateZ: props.rotateZ,
-        scale: props.scale,
-        scaleX: props.scaleX,
-        scaleY: props.scaleY,
-        scaleZ: props.scaleZ,
-      }),
-    };
-  }
-
-  const [element, setElement] = useState<Element>();
-
-  // create element
-  useEffect(() => {
-    const newElement = controller.createElement(_getElementOptions());
-    setElement(newElement);
-
-    return () => controller.removeElementById(newElement.id);
-  }, []);
-
-  // update element
-  useEffect(() => {
-    if (element) {
-      if (props.disabled) {
-        controller.resetElementStyles(element);
-      } else {
-        controller.updateElementPropsById(
-          element.id,
-          _getElementOptions().props
-        );
-      }
-    }
-  }, [
-    props.disabled,
-    props.translateX,
-    props.translateY,
-    props.rotate,
-    props.rotateX,
-    props.rotateY,
-    props.rotateZ,
-    props.scale,
-    props.scaleX,
-    props.scaleY,
-    props.scaleZ,
-    props.speed,
-  ]);
-
-  const Outer = props.tagOuter;
-  const Inner = props.tagInner;
-
-  const rootClass =
-    'parallax-outer' + (props.className ? ` ${props.className}` : '');
-
-  return (
-    <Outer className={rootClass} ref={refOuter} style={props.styleOuter}>
-      <Inner className="parallax-inner" ref={refInner} style={props.styleInner}>
-        {props.children}
-      </Inner>
-    </Outer>
-  );
-}
-
-Parallax.defaultProps = {
-  disabled: false,
-  tagInner: 'div',
-  tagOuter: 'div',
-};
diff --git a/src/components/__snapshots__/ParallaxBanner.test.tsx.snap b/src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from src/components/__snapshots__/ParallaxBanner.test.tsx.snap
rename to src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap
diff --git a/src/components/ParallaxBanner.test.tsx b/src/components/ParallaxBanner/index.test.tsx
similarity index 95%
rename from src/components/ParallaxBanner.test.tsx
rename to src/components/ParallaxBanner/index.test.tsx
index 7d31b8d5c..761bb6e57 100644
--- a/src/components/ParallaxBanner.test.tsx
+++ b/src/components/ParallaxBanner/index.test.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // @ts-ignore
 import renderer from 'react-test-renderer';
-import createNodeMock from '../testUtils/createNodeMock';
-import { ParallaxBanner } from './ParallaxBanner';
-import { ParallaxProvider } from './ParallaxProvider';
+import createNodeMock from '../../testUtils/createNodeMock';
+import { ParallaxBanner } from '.';
+import { ParallaxProvider } from '../ParallaxProvider';
 
 describe('Expect the <ParallaxBanner> component', () => {
   afterEach(() => {});
diff --git a/src/components/ParallaxBanner.tsx b/src/components/ParallaxBanner/index.tsx
similarity index 66%
rename from src/components/ParallaxBanner.tsx
rename to src/components/ParallaxBanner/index.tsx
index 7e9670e8a..c280dcf85 100644
--- a/src/components/ParallaxBanner.tsx
+++ b/src/components/ParallaxBanner/index.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { Parallax } from './Parallax';
+import { Parallax } from '../Parallax';
+import { ParallaxBannerProps } from './types';
 
 const containerStyle = {
   position: 'relative',
@@ -16,50 +17,6 @@ const absoluteStyle = {
   left: 0,
 };
 
-export interface BannerLayer {
-  /**
-   * A value from `-1` to `1` that represents the vertical offset to be applied to the current
-   * layer, `0.1` would equal a `10%` offset on the top and bottom.
-   */
-  amount: number;
-  /**
-   * Custom layer children provided as a React element, for example `<Video />`
-   */
-  children?: any;
-  /**
-   * Indicate if the layer should be expanded with negative top/bottom margins so the edges will
-   * never be visible.
-   */
-  expanded?: boolean;
-  /**
-   * Image source that will be applied as a CSS background image on the layer.
-   */
-  image?: string;
-  /*
-   * Props to apply to the layer element.
-   */
-  props?: any;
-}
-
-export interface ParallaxBannerProps {
-  /**
-   * Optionally pass additional class names to be added to the outermost parallax banner element.
-   */
-  className?: string;
-  /**
-   * Determines if the internal parallax layers will have offsets applied.
-   */
-  disabled?: boolean;
-  /**
-   * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`.
-   */
-  layers: BannerLayer[];
-  /**
-   * Optionally pass a style object to be added to the outermost parallax banner element.
-   */
-  style?: any;
-}
-
 export const ParallaxBanner = ({
   children,
   className,
diff --git a/src/components/ParallaxBanner/types.ts b/src/components/ParallaxBanner/types.ts
new file mode 100644
index 000000000..f8d0ffd12
--- /dev/null
+++ b/src/components/ParallaxBanner/types.ts
@@ -0,0 +1,43 @@
+export interface BannerLayer {
+  /**
+   * A value from `-1` to `1` that represents the vertical offset to be applied to the current
+   * layer, `0.1` would equal a `10%` offset on the top and bottom.
+   */
+  amount: number;
+  /**
+   * Custom layer children provided as a React element, for example `<Video />`
+   */
+  children?: any;
+  /**
+   * Indicate if the layer should be expanded with negative top/bottom margins so the edges will
+   * never be visible.
+   */
+  expanded?: boolean;
+  /**
+   * Image source that will be applied as a CSS background image on the layer.
+   */
+  image?: string;
+  /*
+   * Props to apply to the layer element.
+   */
+  props?: any;
+}
+
+export interface ParallaxBannerProps {
+  /**
+   * Optionally pass additional class names to be added to the outermost parallax banner element.
+   */
+  className?: string;
+  /**
+   * Determines if the internal parallax layers will have offsets applied.
+   */
+  disabled?: boolean;
+  /**
+   * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`.
+   */
+  layers: BannerLayer[];
+  /**
+   * Optionally pass a style object to be added to the outermost parallax banner element.
+   */
+  style?: any;
+}
diff --git a/src/components/ParallaxProvider/helpers.ts b/src/components/ParallaxProvider/helpers.ts
new file mode 100644
index 000000000..43a65747e
--- /dev/null
+++ b/src/components/ParallaxProvider/helpers.ts
@@ -0,0 +1,15 @@
+import {
+  ParallaxController,
+  ParallaxControllerOptions,
+} from 'parallax-controller';
+
+export const createController = (options: ParallaxControllerOptions) => {
+  // Don't initialize on the server
+  const isServer = typeof window === 'undefined';
+
+  if (!isServer) {
+    // Must not be the server so kick it off...
+    return ParallaxController.init(options);
+  }
+  return null;
+};
diff --git a/src/components/ParallaxProvider.test.tsx b/src/components/ParallaxProvider/index.test.tsx
similarity index 97%
rename from src/components/ParallaxProvider.test.tsx
rename to src/components/ParallaxProvider/index.test.tsx
index 4658cd469..dcc413e17 100644
--- a/src/components/ParallaxProvider.test.tsx
+++ b/src/components/ParallaxProvider/index.test.tsx
@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 import { ParallaxController } from 'parallax-controller';
 
 import { render } from '@testing-library/react';
-import { ParallaxProvider } from './ParallaxProvider';
-import { useController } from '../hooks/useController';
+import { ParallaxProvider } from '.';
+import { useController } from '../../hooks/useController';
 
 describe('A <ParallaxProvider>', () => {
   it('to render children', () => {
diff --git a/src/components/ParallaxProvider.tsx b/src/components/ParallaxProvider/index.tsx
similarity index 53%
rename from src/components/ParallaxProvider.tsx
rename to src/components/ParallaxProvider/index.tsx
index da11913b8..9604eb475 100644
--- a/src/components/ParallaxProvider.tsx
+++ b/src/components/ParallaxProvider/index.tsx
@@ -1,36 +1,9 @@
 import React, { Component } from 'react';
 
-import { ParallaxContext } from '../context/ParallaxContext';
-import {
-  ParallaxController,
-  ParallaxControllerOptions,
-  ValidScrollAxis,
-  ScrollAxis,
-} from 'parallax-controller';
-
-const createController = (options: ParallaxControllerOptions) => {
-  // Don't initialize on the server
-  const isServer = typeof window === 'undefined';
-
-  if (!isServer) {
-    // Must not be the server so kick it off...
-    return ParallaxController.init(options);
-  }
-  return null;
-};
-
-export interface ParallaxProviderProps {
-  /**
-   * Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of vertical or
-   * horizontal
-   */
-  scrollAxis?: ValidScrollAxis;
-  /**
-   * Optionally set the container that has overflow and will contain parallax elements. Defaults
-   * to the HTML body
-   */
-  scrollContainer?: HTMLElement;
-}
+import { ParallaxContext } from '../../context/ParallaxContext';
+import { ParallaxController, ScrollAxis } from 'parallax-controller';
+import { ParallaxProviderProps } from './types';
+import { createController } from './helpers';
 
 export class ParallaxProvider extends Component<ParallaxProviderProps, {}> {
   static defaultProps = {
diff --git a/src/components/ParallaxProvider/types.ts b/src/components/ParallaxProvider/types.ts
new file mode 100644
index 000000000..6bf947e34
--- /dev/null
+++ b/src/components/ParallaxProvider/types.ts
@@ -0,0 +1,14 @@
+import { ValidScrollAxis } from 'parallax-controller';
+
+export interface ParallaxProviderProps {
+  /**
+   * Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of vertical or
+   * horizontal
+   */
+  scrollAxis?: ValidScrollAxis;
+  /**
+   * Optionally set the container that has overflow and will contain parallax elements. Defaults
+   * to the HTML body
+   */
+  scrollContainer?: HTMLElement;
+}