diff --git a/package.json b/package.json
index 4df79a7..3d53e5a 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "css-loader": "^0.28.11",
     "director": "^1.2.8",
     "express": "^4.15.3",
     "jsesc": "^2.5.1",
@@ -59,6 +60,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
+    "style-loader": "^0.18.2",
     "todomvc-app-css": "^2.1.0",
     "todomvc-common": "^1.0.3",
     "url-loader": "^0.5.9",
diff --git a/src/base.css b/src/base.css
new file mode 100644
index 0000000..da65968
--- /dev/null
+++ b/src/base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
diff --git a/src/client.js b/src/client.js
index 5991905..a6c3110 100644
--- a/src/client.js
+++ b/src/client.js
@@ -5,6 +5,9 @@ import TodoApp from './components/todoApp.js';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import './base.css';
+import './index.css';
+
 const initialState = window.initialState && JSON.parse(window.initialState) || {};
 
 var todoStore = TodoStore.fromJS(initialState.todos || []);
diff --git a/src/components/todoApp.js b/src/components/todoApp.js
index 000ee80..a3767af 100644
--- a/src/components/todoApp.js
+++ b/src/components/todoApp.js
@@ -5,7 +5,6 @@ import {observer} from 'mobx-react';
 import TodoEntry from './todoEntry';
 import TodoOverview from './todoOverview';
 import TodoFooter from './todoFooter';
-import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
 
 import DevTool from 'mobx-react-devtools';
 
@@ -29,13 +28,8 @@ export default class TodoApp extends React.Component {
 	componentDidMount() {
 		if (__CLIENT__) {
 			var { Router } = require('director/build/director');
-			var viewStore = this.props.viewStore;
-			var router = Router({
-				'/': function() { viewStore.todoFilter = ALL_TODOS; },
-				'/active': function() { viewStore.todoFilter = ACTIVE_TODOS; },
-				'/completed': function() { viewStore.todoFilter = COMPLETED_TODOS; }
-			});
-		router.init('/');
+			var router = Router({});
+			router.init('/');
 		}
 	}
 }
diff --git a/src/components/todoFooter.js b/src/components/todoFooter.js
index 4c9c4c0..6e9e5f8 100644
--- a/src/components/todoFooter.js
+++ b/src/components/todoFooter.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
 import {action} from 'mobx';
 import {pluralize} from '../utils';
-import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
 
 @observer
 export default class TodoFooter extends React.Component {
@@ -14,15 +13,15 @@ export default class TodoFooter extends React.Component {
 
 		const activeTodoWord = pluralize(todoStore.activeTodoCount, 'item');
 
+		const filters = this.props.todoStore.rangeOfTags;
+
 		return (
 			<footer className="footer">
 				<span className="todo-count">
 					<strong>{todoStore.activeTodoCount}</strong> {activeTodoWord} left
 				</span>
 				<ul className="filters">
-					{this.renderFilterLink(ALL_TODOS, "", "All")}
-					{this.renderFilterLink(ACTIVE_TODOS, "active", "Active")}
-					{this.renderFilterLink(COMPLETED_TODOS, "completed", "Completed")}
+					{filters.map(t => this.renderFilterLink(t))}
 				</ul>
 				{ todoStore.completedCount === 0
 					? null
@@ -36,12 +35,12 @@ export default class TodoFooter extends React.Component {
 		);
 	}
 
-	renderFilterLink(filterName, url, caption) {
+	renderFilterLink(filterName) {
 		return (<li>
-			<a href={"#/" + url}
-				className={filterName ===  this.props.viewStore.todoFilter ? "selected" : ""}>
-				{caption}
-			</a>
+			<button onClick={() => this.props.viewStore.toggleView(filterName)}
+				className={this.props.viewStore.todoFilters.includes(filterName) ? "selected" : ""}>
+				{filterName}
+			</button>
 			{' '}
 		</li>)
 	}
diff --git a/src/components/todoItem.js b/src/components/todoItem.js
index 50dff42..b55ba38 100644
--- a/src/components/todoItem.js
+++ b/src/components/todoItem.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
 import {observable, action, computed} from 'mobx';
-
 const ESCAPE_KEY = 27;
 const ENTER_KEY = 13;
+import { COMPLETED_TODOS } from '../constants';
 
 @observer
 export default class TodoItem extends React.Component {
@@ -12,21 +12,27 @@ export default class TodoItem extends React.Component {
 
 	render() {
 		const {todo} = this.props;
+
+		console.log(todo.tag)
 		return (
 			<li className={[
-				todo.completed ? "completed": "",
+				todo.tags.includes(COMPLETED_TODOS) ? "completed": "",
 				this.isBeingEdited ? "editing" : ""
 			].join(" ")}>
 				<div className="view">
 					<input
 						className="toggle"
 						type="checkbox"
-						checked={todo.completed}
+						checked={todo.tags.includes(COMPLETED_TODOS)}
 						onChange={this.handleToggle}
 					/>
 					<label onDoubleClick={this.handleEdit}>
 						{todo.title}
 					</label>
+					<ul className="tags">
+						{todo.tags.filter(t => t !==  COMPLETED_TODOS).map(t => this.renderTag(t))}
+					</ul>
+					<button className="new-tag" onClick={this.handleNewTag} />
 					<button className="destroy" onClick={this.handleDestroy} />
 				</div>
 				<input
@@ -41,6 +47,15 @@ export default class TodoItem extends React.Component {
 		);
 	}
 
+	renderTag(name) {
+		return (<li key={name}>
+			<button onClick={() => this.props.todo.toggleTag(name)}>
+				{name}
+			</button>
+			{' '}
+		</li>)
+	}
+
 	@computed
 	get isBeingEdited() {
 		return this.props.viewStore.todoBeingEdited === this.props.todo
@@ -88,11 +103,20 @@ export default class TodoItem extends React.Component {
 
 	@action
 	handleToggle = () => {
-		this.props.todo.toggle();
+		this.props.todo.toggleTag(COMPLETED_TODOS);
 	};
+
+	@action
+	handleNewTag = () => {
+		const tagStr = prompt("enter new tag");
+		if(!this.props.todo.tags.includes(tagStr)) {
+			this.props.todo.toggleTag(tagStr);
+		}
+	}
 }
 
 TodoItem.propTypes = {
 	todo: PropTypes.object.isRequired,
-	viewStore: PropTypes.object.isRequired
+	viewStore: PropTypes.object.isRequired,
+	todoStore: PropTypes.object.isRequired,
 };
diff --git a/src/components/todoOverview.js b/src/components/todoOverview.js
index 6ce19f6..68e0d55 100644
--- a/src/components/todoOverview.js
+++ b/src/components/todoOverview.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
-import { ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
+import { ACTIVE_TODOS, COMPLETED_TODOS, ALL_TODOS } from '../constants';
 
 import TodoItem from './todoItem';
 
@@ -13,7 +13,7 @@ export default class TodoOverview extends React.Component {
 			return null;
 		return <section className="main">
 			<input
-				className="toggle-all"
+				className="toggle-all" // this image doen't make sense to me...
 				id="toggle-all"
 				type="checkbox"
 				onChange={this.toggleAll}
@@ -26,6 +26,7 @@ export default class TodoOverview extends React.Component {
 						key={todo.id}
 						todo={todo}
 						viewStore={viewStore}
+						todoStore={todoStore}
 					/>)
 				)}
 			</ul>
@@ -34,14 +35,27 @@ export default class TodoOverview extends React.Component {
 
 	getVisibleTodos() {
 		return this.props.todoStore.todos.filter(todo => {
-			switch (this.props.viewStore.todoFilter) {
-				case ACTIVE_TODOS:
-					return !todo.completed;
-				case COMPLETED_TODOS:
-					return todo.completed;
-				default:
+			for(let i = 0; i < this.props.viewStore.todoFilters.length; i++) {
+				const filter = this.props.viewStore.todoFilters[i];
+				let res = null;
+				switch (filter) {
+					case ALL_TODOS:
+						res = true;
+						break;
+					case ACTIVE_TODOS:
+						res = !todo.tags.includes(COMPLETED_TODOS);
+						break;
+					case COMPLETED_TODOS:
+						res = todo.tags.includes(COMPLETED_TODOS);
+						break;
+					default:
+						res = todo.tags.includes(filter);
+				}
+				if(res) {
 					return true;
+				}
 			}
+			return false;
 		});
 	}
 
diff --git a/src/constants.js b/src/constants.js
index 3295af0..f351420 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,3 +1,3 @@
-export const ALL_TODOS = 'all';
-export const ACTIVE_TODOS = 'active';
-export const COMPLETED_TODOS = 'completed';
+export const ALL_TODOS = 'All';
+export const ACTIVE_TODOS = 'Active';
+export const COMPLETED_TODOS = 'Completed';
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..bac29a7
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,431 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #111111;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+}
+
+:focus {
+	outline: 0;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -140px;
+	width: 100%;
+	font-size: 80px;
+	font-weight: 200;
+	text-align: center;
+	color: #b83f45;
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+	width: 1px;
+	height: 1px;
+	border: none; /* Mobile Safari */
+	opacity: 0;
+	position: absolute;
+	right: 100%;
+	bottom: 100%;
+}
+
+.toggle-all + label {
+	width: 60px;
+	height: 34px;
+	font-size: 0;
+	position: absolute;
+	top: -52px;
+	left: -13px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: calc(100% - 43px);
+	padding: 12px 16px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle {
+	opacity: 0;
+}
+
+.todo-list li .toggle + label {
+	/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-repeat: no-repeat;
+	background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+	word-break: break-all;
+	padding: 15px 15px 15px 60px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+	font-weight: 400;
+	color: #4d4d4d;
+}
+
+.todo-list li.completed label {
+	color: #cdcdcd;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .new-tag {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 50px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .new-tag:after {
+	content: '+';
+}
+
+.todo-list li:hover .new-tag {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	font-size: 15px;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li button {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li button:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li button.selected {
+	border: 2px solid rgba(175, 47, 47, 0.2);
+}
+
+.tags {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: relative;
+	right: 0;
+	left: 0;
+}
+
+.tags li {
+	display: inline;
+}
+
+.tags li button {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid;
+    border-radius: 3px;
+    border-color: rgba(184, 115, 115, 0.1);
+}
+
+.tags li button:hover {
+    border-color: rgba(204, 15, 15, 0.1);
+	border: 3px solid;
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #4d4d4d;
+	font-size: 11px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
diff --git a/src/models/TodoModel.js b/src/models/TodoModel.js
index 04a329b..00e16a7 100644
--- a/src/models/TodoModel.js
+++ b/src/models/TodoModel.js
@@ -1,26 +1,45 @@
-import {observable} from 'mobx';
+import {observable, action} from 'mobx';
+import { COMPLETED_TODOS } from '../constants';
 
 export default class TodoModel {
 	store;
 	id;
 	@observable title;
-	@observable completed;
+	@observable tags = [];
 
-	constructor(store, id, title, completed) {
+	constructor(store, id, title, tags) {
 		this.store = store;
 		this.id = id;
 		this.title = title;
-		this.completed = completed;
+		this.tags = tags || this.tags;
 	}
 
-	toggle() {
-		this.completed = !this.completed;
+	@action
+	toggleTag(tag) {
+		if(this.tags.includes(tag)) {
+			this.tags = this.tags.filter(t => t !== tag);
+		} else {
+			this.tags.push(tag);
+		}
+		console.log(this.tags)
+	}
+
+	@action
+	setCompleted(isCompleted) {
+		if(isCompleted) {
+			if(!this.tags.includes(COMPLETED_TODOS)) {
+				this.tags.push(COMPLETED_TODOS);
+			}
+		} else {
+			this.tags = this.tags.filter(t => t !== COMPLETED_TODOS);
+		}
 	}
 
 	destroy() {
 		this.store.todos.remove(this);
 	}
 
+	@action
 	setTitle(title) {
 		this.title = title;
 	}
@@ -29,11 +48,11 @@ export default class TodoModel {
 		return {
 			id: this.id,
 			title: this.title,
-			completed: this.completed
+			tags: this.tags,
 		};
 	}
 
 	static fromJS(store, object) {
-		return new TodoModel(store, object.id, object.title, object.completed);
+		return new TodoModel(store, object.id, object.title, object.tags);
 	}
 }
diff --git a/src/server.js b/src/server.js
index 9b846f1..3418837 100755
--- a/src/server.js
+++ b/src/server.js
@@ -32,8 +32,6 @@ const renderFullPage = html => {
 	<html lang="en">
 		<head>
 			<meta charset="UTF-8">
-			<link rel="stylesheet" href="/node_modules/todomvc-common/base.css">
-			<link rel="stylesheet" href="/node_modules/todomvc-app-css/index.css">
 			<script>
 				window.initialState = ${initialStateJSON}
 			</script>
@@ -73,6 +71,7 @@ app.post('/api/todos', function(req, res) {
 	todos = req.body.todos;
 	if (Array.isArray(todos)) {
 		console.log(`Updated todos (${todos.length})`);
+		console.log(JSON.stringify(todos));
 		res.status(201).send(JSON.stringify({ success: true }));
 	} else {
 		res.status(200).send(JSON.stringify({ success: false, error: "expected `todos` to be array" }));
diff --git a/src/stores/TodoStore.js b/src/stores/TodoStore.js
index 9be17b6..e893ebd 100644
--- a/src/stores/TodoStore.js
+++ b/src/stores/TodoStore.js
@@ -1,6 +1,7 @@
 import {observable, computed, reaction, action} from 'mobx';
 import TodoModel from '../models/TodoModel'
 import * as Utils from '../utils';
+import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
 
 
 export default class TodoStore {
@@ -8,7 +9,7 @@ export default class TodoStore {
 
 	@computed get activeTodoCount() {
 		return this.todos.reduce(
-			(sum, todo) => sum + (todo.completed ? 0 : 1),
+			(sum, todo) => sum + (todo.tags.includes(COMPLETED_TODOS) ? 0 : 1),
 			0
 		)
 	}
@@ -17,6 +18,17 @@ export default class TodoStore {
 		return this.todos.length - this.activeTodoCount;
 	}
 
+	@computed get rangeOfTags() {
+		let tags = new Set([ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS]);
+		for(let i = 0; i < this.todos.length; i++) {
+			const todo = this.todos[i];
+			for(let j = 0; j < todo.tags.length; j++) {
+				tags.add(todo.tags[j]);
+			}
+		}
+		return Array.from(tags);
+	}
+
 	subscribeServerToStore() {
 		reaction(
 			() => this.toJS(),
@@ -30,20 +42,20 @@ export default class TodoStore {
 
 	@action
 	addTodo (title) {
-		this.todos.push(new TodoModel(this, Utils.uuid(), title, false));
+		this.todos.push(new TodoModel(this, Utils.uuid(), title, []));
 	}
 
 	@action
 	toggleAll (checked) {
 		this.todos.forEach(
-			todo => todo.completed = checked
+			todo => todo.setCompleted(checked)
 		);
 	}
 
 	@action
 	clearCompleted () {
 		this.todos = this.todos.filter(
-			todo => !todo.completed
+			todo => !todo.tags.includes(COMPLETED_TODOS)
 		);
 	}
 
diff --git a/src/stores/ViewStore.js b/src/stores/ViewStore.js
index fb2c5d6..0a3cdf4 100644
--- a/src/stores/ViewStore.js
+++ b/src/stores/ViewStore.js
@@ -3,5 +3,13 @@ import { ALL_TODOS } from '../constants';
 
 export default class ViewStore {
 	@observable todoBeingEdited = null;
-	@observable todoFilter= ALL_TODOS;
+	@observable todoFilters = [ALL_TODOS];
+
+	toggleView(filter) {
+		if(this.todoFilters.includes(filter)) {
+			this.todoFilters = this.todoFilters.filter(f => f !== filter);
+		} else {
+			this.todoFilters.push(filter);
+		}
+	}
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 87c4d5b..aeea281 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,10 +26,16 @@ module.exports = {
     extensions: ['.js', '.jsx']
   },
   module: {
-    loaders: [{
-      test: /\.jsx?$/,
-      loaders: ['babel-loader'],
-      exclude: NODE_MODULES_PATH,
-    }]
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        loaders: ['babel-loader'],
+        exclude: NODE_MODULES_PATH,
+      },
+      {
+        test: /\.css$/i,
+        loaders: ['style-loader', 'css-loader'],
+      },
+    ],
   }
 };