diff --git a/src/components/Checkbox/Checkbox.css b/src/components/Checkbox/Checkbox.css
new file mode 100644
index 0000000..a6f00f4
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.css
@@ -0,0 +1,62 @@
+.canopy__checkbox-container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  padding-top: 2.5px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-family: "Geomanist";
+  font-weight: 400;
+}
+
+.canopy__checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.canopy__checkbox-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 25px;
+  width: 25px;
+  background-color: #EAEAEA;
+  border-radius: 4px;
+}
+
+/* .canopy__checkbox-container:hover input ~ .canopy__checkbox-mark {
+}
+
+.canopy__checkbox-container input:checked ~ .canopy__checkbox-mark {
+} */
+
+.canopy__checkbox-mark:after {
+  content: "";
+  position: absolute;
+  display: none;
+  border: solid white;
+}
+
+.canopy__checkbox-container input:checked ~ .canopy__checkbox-mark:after {
+  display: block;
+}
+
+.canopy__checkbox-container .canopy__checkbox-mark:after {
+  left: 9px;
+  top: 5px;
+  width: 5px;
+  height: 10px;
+  border: solid #3EACA8;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
new file mode 100644
index 0000000..fa6ccc7
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from './constants';
+import '../../fonts.css';
+import './Checkbox.css';
+
+function Checkbox(props) {
+  const { onChange, checked, value } = props;
+
+  return(
+    <label className="canopy__checkbox-container">
+      <input
+        type="checkbox"
+        onChange={onChange}
+      />
+      <span className="canopy__checkbox-mark"></span>
+      {value}
+    </label>
+  )
+}
+
+Checkbox.propTypes = {
+  onChange: PropTypes.func,
+  text: PropTypes.string
+}
+
+export { Checkbox };
diff --git a/src/components/Checkbox/constants.js b/src/components/Checkbox/constants.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/stories/3-Checkbox.stories.js b/src/stories/3-Checkbox.stories.js
new file mode 100644
index 0000000..0776a4a
--- /dev/null
+++ b/src/stories/3-Checkbox.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Checkbox } from '../components/Checkbox/Checkbox';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox
+};
+
+export const Text = () => {
+  return (
+    <Checkbox
+      value="Computer Science"
+      onChange={action("Checked!")}
+    />
+  )
+}