diff --git a/src/App.js b/src/App.js
index ce9cbd2..9b70163 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,59 @@
 import React from 'react';
-import logo from './logo.svg';
+import styled from 'styled-components';
 import './App.css';
 
+const DEFAULT_SHADE_COUNT = 9;
+
+// an object to hold our styled components
+const S = {};
+
+class Shade extends React.Component {
+	render() {
+		return (
+			<div className={this.props.className}>{this.props.color}</div>
+		);
+	}
+}
+
+S.Shade = styled(Shade)`
+	padding: 1rem 2rem;
+	background-color: ${props => props.color};
+`;
+
+class Color extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			baseColor: this.props.baseColor,
+			shades: [],
+			shadeCount: this.props.shadeCount ? this.props.shadeCount : DEFAULT_SHADE_COUNT,
+		}
+		for (let index = 0; index < this.state.shadeCount; index++) {
+			this.state.shades.push(this.props.baseColor);
+		}
+	}
+
+	render() {
+		return (
+			<ul className={this.props.className}>
+				{this.state.shades.map((shade, index) => 
+					<li key={index}><S.Shade color={shade} /></li>
+				)}
+			</ul>
+		);
+	}
+}
+
+S.Color = styled(Color)`
+list-style: none;
+padding: 0;
+margin: 0;
+`;
+
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+			<S.Color className="color-list" baseColor="#ff0000"/>
     </div>
   );
 }