diff --git a/app/components/UI/BackgroundDark.js b/app/components/UI/BackgroundDark.js
new file mode 100644
index 00000000..0c36ff7f
--- /dev/null
+++ b/app/components/UI/BackgroundDark.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundDark
+ * @example
+ * <BackgroundDark />
+ */
+class BackgroundDark extends React.Component {
+  render() {
+    return <Box bg="darkestBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundDark
diff --git a/app/components/UI/BackgroundLight.js b/app/components/UI/BackgroundLight.js
new file mode 100644
index 00000000..52183212
--- /dev/null
+++ b/app/components/UI/BackgroundLight.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundLight
+ * @example
+ * <BackgroundLight />
+ */
+class BackgroundLight extends React.Component {
+  render() {
+    return <Box bg="lightBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundLight
diff --git a/app/components/UI/BackgroundLightest.js b/app/components/UI/BackgroundLightest.js
new file mode 100644
index 00000000..d3181678
--- /dev/null
+++ b/app/components/UI/BackgroundLightest.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Box } from 'rebass'
+
+/**
+ * @render react
+ * @name BackgroundLightest
+ * @example
+ * <BackgroundLightest />
+ */
+class BackgroundLightest extends React.Component {
+  render() {
+    return <Box bg="lightestBackground" color="white" {...this.props} />
+  }
+}
+
+export default BackgroundLightest
diff --git a/stories/components/background.stories.js b/stories/components/background.stories.js
new file mode 100644
index 00000000..edc940a9
--- /dev/null
+++ b/stories/components/background.stories.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import BackgroundDark from 'components/UI/BackgroundDark'
+import BackgroundLight from 'components/UI/BackgroundLight'
+import BackgroundLightest from 'components/UI/BackgroundLightest'
+
+storiesOf('Components.Background', module)
+  .add('dark', () => (
+    <BackgroundDark
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))
+  .add('light', () => (
+    <BackgroundLight
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))
+  .add('lightest', () => (
+    <BackgroundLightest
+      css={{
+        height: '50vh'
+      }}
+    />
+  ))
diff --git a/test/unit/components/UI/BackgroundDark.spec.js b/test/unit/components/UI/BackgroundDark.spec.js
new file mode 100644
index 00000000..e7e155d2
--- /dev/null
+++ b/test/unit/components/UI/BackgroundDark.spec.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import BackgroundDark from 'components/UI/BackgroundDark'
+import renderer from 'react-test-renderer'
+
+describe('component.UI.BackgroundDark', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<BackgroundDark />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/test/unit/components/UI/BackgroundLight.spec.js b/test/unit/components/UI/BackgroundLight.spec.js
new file mode 100644
index 00000000..0fa8912f
--- /dev/null
+++ b/test/unit/components/UI/BackgroundLight.spec.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import BackgroundLight from 'components/UI/BackgroundLight'
+import renderer from 'react-test-renderer'
+
+describe('component.UI.BackgroundLight', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<BackgroundLight />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/test/unit/components/UI/BackgroundLightest.spec.js b/test/unit/components/UI/BackgroundLightest.spec.js
new file mode 100644
index 00000000..8a02aa65
--- /dev/null
+++ b/test/unit/components/UI/BackgroundLightest.spec.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import BackgroundLightest from 'components/UI/BackgroundLightest'
+import renderer from 'react-test-renderer'
+
+describe('component.UI.BackgroundLightest', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<BackgroundLightest />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap
new file mode 100644
index 00000000..1c89463e
--- /dev/null
+++ b/test/unit/components/UI/__snapshots__/BackgroundDark.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundDark should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: darkestBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;
diff --git a/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap
new file mode 100644
index 00000000..f0f3a5a1
--- /dev/null
+++ b/test/unit/components/UI/__snapshots__/BackgroundLight.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundLight should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: lightBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;
diff --git a/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap b/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap
new file mode 100644
index 00000000..44bf96dc
--- /dev/null
+++ b/test/unit/components/UI/__snapshots__/BackgroundLightest.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.BackgroundLightest should render correctly 1`] = `
+.c0 {
+  color: white;
+  background-color: lightestBackground;
+}
+
+<div
+  className="c0"
+  color="white"
+/>
+`;