diff --git a/src/App.css b/src/App.css
index 74b5e05..bdd7d29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,34 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+button,
+body {
+  color: #fff;
+  background-color: #202020;
+}
+
 .App {
-  text-align: center;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: stretch;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.article {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-content: stretch;
+  align-items: stretch;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+button {
+  cursor: pointer;
 }
diff --git a/src/App.js b/src/App.js
index 5d4a2f6..be8520d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import palette from 'nice-color-palettes';
+import niceColorPalette from 'nice-color-palettes';
 import chroma from 'chroma-js';
 import React from 'react';
 import styled from 'styled-components';
@@ -7,48 +7,172 @@ import './App.css';
 // an object to hold our styled components
 const S = {};
 
-class Shade extends React.Component {
-	render() {
-		return (
-			<div className={this.props.className}>
-				<span>{this.props.color}</span>
-			</div>
-		);
-	}
-}
-
-S.Shade = styled(Shade)`
-background-color: ${props => props.color};
-
-span {
+S.Button = styled.button`
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: none;
+	border: 0;
 	font-weight: bold;
-	color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'};
-	opacity: 0;
-}
+	opacity: 0.6;
+	min-height: 3em;
 
-	&:hover span {
-		opacity: 0.9;
+	&:hover {
+		opacity: 1;
 	}
 `;
 
-S.ShadeBase = styled(S.Shade)`
-border-top: 3px solid rgba(0, 0, 0, 0.5);
-border-bottom: 3px solid rgba(0, 0, 0, 0.5);
+S.ShadeBG = styled.span.attrs(
+	({ color }) => ({
+		style: {
+			backgroundColor: color,
+		}
+	})
+)`
+width: 100%;
+height: 100%;
+`;
+
+S.ShadeText = styled.span.attrs(
+	({ color }) => ({
+		style: {
+			color: chroma.contrast(color, '#000') < 4.5 ? '#fff' : '#000'
+		}
+	})
+)`
+width: 100%;
+height: 100%;
+`;
+
+function ShadeBox(props) {
+	return (
+		<div className={props.className}>
+			<S.ShadeBG color={props.color} />
+			<S.ShadeText className="text" color={props.color}>{props.color}</S.ShadeText>
+		</div>
+	);
+}
+
+S.ShadeBox = styled(ShadeBox)`
+position: relative;
+width: 100%;
+height: 100%;
+font-weight: bold;
+
+span {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+}
+
+	.text {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		opacity: 0;
+
+		&:hover {
+			opacity: 0.7;
+		}
+	}
+`;
+
+S.ShadeBoxBase = styled(S.ShadeBox)`
+.text {
+	opacity: 0.7;
+}
 `;
 
 function IncDecButton(props) {
 	return (
 		<div className={props.className}>
-			<div>{props.children}</div>
-			<button type="button" onClick={props.onDecrement}>-</button>
+			<span>{props.children}</span>
+			<button className="btn-l" type="button" onClick={props.onDecrement}>-</button>
 			{props.value !== undefined &&
 				<span>{props.value}</span>
 			}
-			<button type="button" onClick={props.onIncrement}>+</button>
+			<button className="btn-r" type="button" onClick={props.onIncrement}>+</button>
 		</div>
 	);
 }
 
+S.IncDecButton = styled(IncDecButton)`
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	min-height: 3em;
+
+	span {
+		opacity: 0.6;
+		font-weight: bold;
+		padding: 0.25em 25%;
+
+		&:first-child {
+			padding: 0.25em 1em;
+		}
+	}
+
+	button {
+		position: absolute;
+		width: 50%;
+		height: 100%;
+		top: 0;
+		background: transparent;
+		border: none;
+		font-size: 2em;
+		font-weight: bold;
+		opacity: 0.5;
+		padding: 0.25em 0.5em;
+
+		&.btn-l {
+			left: 0;
+			border-right-width: 0;
+			padding-right: 25%;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+
+		&.btn-r {
+			right: 0;
+			border-left-width: 0;
+			padding-left: 25%;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+`;
+
+S.GradientBG = styled.span`
+	opacity: 0.3;
+	background:
+		linear-gradient(to bottom,
+			rgba(0, 0, 0, 1),
+			rgba(0, 0, 0, 0) 12rem
+		),
+		linear-gradient(to top,
+			rgba(0, 0, 0, 1),
+			rgba(0, 0, 0, 0) 10rem
+		),
+		linear-gradient(
+			to right,
+			${props => props.colorList.map((color, index) => {
+				const lineEnd = props.colorList.length - 1 === index ? "" : ",";
+				return color + lineEnd;
+			})}
+		);
+`;
+
 class Color extends React.Component {
 	constructor(props) {
 		super(props);
@@ -125,44 +249,44 @@ class Color extends React.Component {
 		return (
 			<div className={this.props.className}>
 				<header>
-					<button type="button" onClick={this.handleClick}>Random</button>
-					<IncDecButton
+					<S.Button type="button" onClick={this.handleClick}>Random</S.Button>
+					<S.IncDecButton
 						onIncrement={() => { this.incState("brightenAmount", 0.25); }}
 						onDecrement={() => { this.incState("brightenAmount", -0.25); }}
 						value={this.state.brightenAmount}
 					>
 						<span>Brightness</span>
-					</IncDecButton>
-					<IncDecButton
+					</S.IncDecButton>
+					<S.IncDecButton
 						onIncrement={() => { this.incState("scaleTintStepCount", 1); }}
 						onDecrement={() => { this.incState("scaleTintStepCount", -1); }}
 					>
 						<span>Count</span>
-					</IncDecButton>
+					</S.IncDecButton>
 				</header>
 				<ul>
 					{this.state.tints.map((shade, index) => 
-					<li key={index}><S.Shade color={shade} /></li>
+					<li key={"shade" + index}><S.ShadeBox color={shade}>{shade}</S.ShadeBox></li>
 					)}
-					<li><S.ShadeBase color={this.state.baseColor} isBase /></li>
+					<li><S.ShadeBoxBase color={this.state.baseColor} isBase>{this.state.baseColor}</S.ShadeBoxBase></li>
 					{this.state.shades.map((tint, index) => 
-					<li key={index}><S.Shade color={tint} /></li>
+					<li key={"tint" + index}><S.ShadeBox color={tint}>{tint}</S.ShadeBox></li>
 					)}
 				</ul>
 				<footer>
-					<IncDecButton
+					<S.IncDecButton
 						onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
 						onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
 					>
 						<span>Count</span>
-					</IncDecButton>
-					<IncDecButton
+					</S.IncDecButton>
+					<S.IncDecButton
 						onIncrement={() => { this.incState("darkenAmount", 0.25); }}
 						onDecrement={() => { this.incState("darkenAmount", -0.25); }}
 						value={this.state.darkenAmount}
 					>
 						<span>Darkness</span>
-					</IncDecButton>
+					</S.IncDecButton>
 				</footer>
 			</div>
 		);
@@ -175,7 +299,7 @@ Color.defaultProps = {
 	scaleShadeStart: 0.2,
 	scaleShadeEnd: 0.8,
 	scaleShadeStepCount: 4,
-	scaleTintStart: 0.2,
+	scaleTintStart: 0.1,
 	scaleTintEnd: 0.8,
 	scaleTintStepCount: 4,
 }
@@ -186,6 +310,23 @@ S.Color = styled(Color)`
 	justify-content: stretch;
 	align-items: stretch;
 
+	header,
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		align-items: center;
+	}
+
+	header {
+		padding-bottom: 1em;
+	}
+
+	footer {
+		padding-top: 1em;
+		padding-bottom: 1em;
+	}
+
 	ul {
 		display: flex;
 		flex-direction: column;
@@ -217,7 +358,7 @@ class Palette extends React.Component {
 	}
 
 	randomFivePalette() {
-		const newPalette = palette[Math.floor(Math.random() * palette.length)];
+		const newPalette = niceColorPalette[Math.floor(Math.random() * niceColorPalette.length)];
 		this.setState({palette: newPalette});
 	}
 
@@ -235,9 +376,14 @@ class Palette extends React.Component {
 			</li>
 		);
 		return (
-			<article>
-				<button onClick={this.randomFivePalette}>Random Five Colour Palette</button>
-				<ul className={this.props.className}>
+			<article className={this.props.className}>
+				<S.GradientBG className="gradient-bg" colorList={this.state.palette.map(color => {
+					return chroma(color).darken(3);
+				})}/>
+				<ul className="button-list">
+				  <li><button onClick={this.randomFivePalette}>Random Five Colour Palette</button></li>
+				</ul>
+				<ul className="palette-item">
 					{colors}
 				</ul>
 			</article>
@@ -246,7 +392,52 @@ class Palette extends React.Component {
 }
 
 S.Palette = styled(Palette)`
-display: flex;
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: stretch;
+	flex: 1 1 100%;
+	font-size: 0.8rem;
+
+	.gradient-bg {
+		z-index: -1;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+	}
+
+	.palette-item {
+		flex: 1 1 100%;
+
+		> li {
+			flex: 1 1 100%;
+		}
+	}
+
+	li,
+	ul {
+		list-style: none;
+	}
+
+	> ul {
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+		align-items: stretch;
+	}
+
+	.color-list {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		align-items: stretch;
+		height: 100%;
+
+		> ul {
+			flex: 1 1 100%;
+		}
+	}
 `;
 
 function App() {
@@ -260,4 +451,4 @@ function App() {
 export default App;
 
 
-// vim: set ft=javascriptreact:
+// vim: set ft=javascriptreact:auto