diff --git a/css/base/input.css b/css/base/input.css
new file mode 100644
index 0000000..b1ac9b1
--- /dev/null
+++ b/css/base/input.css
@@ -0,0 +1,9 @@
+.add-input {
+    -moz-appearance: textfield-multiline;
+    -webkit-appearance: textarea;
+	font-family: "Helvetica-Neue", serif;
+	font-size: 24pt;
+	border: 0;
+	flex: 1;
+	outline: none;
+}
\ No newline at end of file
diff --git a/css/base/remove-button.css b/css/base/remove-button.css
new file mode 100644
index 0000000..ed3df27
--- /dev/null
+++ b/css/base/remove-button.css
@@ -0,0 +1,16 @@
+.remove-button {
+	background:url(../../images/icons/close.png);
+	background-repeat: no-repeat;
+	float: right;
+	width: 18px;
+	height: 18px;
+	margin: 15px 10px; 
+	border: 0;
+	align-self: flex-end;
+	visibility: hidden;
+	outline: none;
+}
+
+.todo-item:hover > .remove-button {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644
index 0000000..8a258ac
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,110 @@
+@font-face {
+	font-family: Helvetica-Neue;
+	src: url(../fonts/HelveticaNeue.ttf);
+}
+
+@font-face {
+	font-family: Helvetica-Neue-UltraLight;
+	src: url(../fonts/HelveticaNeue-UltraLight.otf);
+}
+
+body {
+	background-color: #F5F5F5
+}
+
+.todo-header {
+	text-align: center;
+}
+
+.todo-title {
+	font-family: "Helvetica-Neue";
+	font-size: 60pt;
+	margin :0 auto;
+}
+
+.todo-main {
+	background: #FFFFFF;
+	border: 1px solid #E3E3FF;
+	width: 560px;
+	margin: 0 auto;
+}
+
+ .todo-add {
+ 	display: flex;
+ 	border-bottom: 1px solid #E3E3FF;
+ }
+
+.todo-add_select-all {
+	background:url(../images/icons/select-all.png);
+	background-repeat: no-repeat;
+	width:24px;
+	height:12px;
+	border: 0;
+	margin: 24px 18px;
+}
+
+.todo-item {
+	display: flex;
+	min-height: 60px;
+	border-bottom: 1px solid #E3E3FF;
+}
+
+.todo-item:hover {
+	background: #F5F5F5;
+}
+
+.todo-item:hover > .todo-item_remove {
+	visibility: visible;
+}
+
+.todo-item_text {
+	border: 0;
+	font-family: "Helvetica-Neue";
+	flex: 1 0;
+	font-size: 24pt;
+	resize: none;
+	padding-left: 10px;
+	padding-top: 12px;
+	outline: none;
+	word-break: break-all;
+	max-width: 600px;
+}
+
+.todo-action-bar {
+	display: flex;
+	height: 40px;
+}
+
+.todo-action-bar_counter {
+	font-family: "Helvetica-Neue", serif;
+	float: left;
+	margin: 10px 10px;
+	font-size: 14pt;
+}
+
+.todos_filters {
+	flex: 1 0;
+	overflow: hidden;
+	text-align: center;
+}
+
+.todos_filter {
+	text-align: center;
+	font-family: "Helvetica-Neue", serif;
+	font-size: 14pt;
+	border: 0;
+	background: #FFFFFF;
+	margin: 10px 6px;
+}
+
+.todos_filter.__active {
+	border: 1px solid #ebdfdf;
+	border-radius: 2px;
+}
+
+.todo-action-bar_clear-completed {
+	float: right;
+	font-family: "Helvetica-Neue", serif;
+	border: 0;
+	background: #FFFFFF;
+}
\ No newline at end of file
diff --git a/css/project/todo/todo-action-bar.css b/css/project/todo/todo-action-bar.css
new file mode 100644
index 0000000..74ff0a4
--- /dev/null
+++ b/css/project/todo/todo-action-bar.css
@@ -0,0 +1,18 @@
+.todo-action-bar {
+	display: flex;
+	height: 40px;
+}
+
+.todo-action-bar_counter {
+	font-family: "Helvetica-Neue", serif;
+	float: left;
+	margin: 10px 10px;
+	font-size: 14pt;
+}
+
+.todo-action-bar_clear-completed {
+	float: right;
+	font-family: "Helvetica-Neue", serif;
+	border: 0;
+	background: #FFFFFF;
+}
\ No newline at end of file
diff --git a/css/project/todo/todo-add.css b/css/project/todo/todo-add.css
new file mode 100644
index 0000000..8a15cdb
--- /dev/null
+++ b/css/project/todo/todo-add.css
@@ -0,0 +1,14 @@
+ .todo-add {
+ 	display: flex;
+ 	border-bottom: 1px solid #E3E3FF;
+ }
+
+.todo-add_select-all {
+	background:url(../../../images/icons/select-all.png);
+	background-repeat: no-repeat;
+	width:24px;
+	height:12px;
+	border: 0;
+	margin: 24px 18px;
+	outline: none;
+}
diff --git a/css/project/todo/todo-header.css b/css/project/todo/todo-header.css
new file mode 100644
index 0000000..6fc3125
--- /dev/null
+++ b/css/project/todo/todo-header.css
@@ -0,0 +1,4 @@
+.todo-header {
+	text-align: center;
+}
+
diff --git a/css/project/todo/todo-item.css b/css/project/todo/todo-item.css
new file mode 100644
index 0000000..5a3322e
--- /dev/null
+++ b/css/project/todo/todo-item.css
@@ -0,0 +1,22 @@
+.todo-item {
+	display: flex;
+	min-height: 60px;
+	border-bottom: 1px solid #E3E3FF;
+}
+
+.todo-item:hover {
+	background: #F5F5F5;
+}
+
+.todo-item_text {
+	border: 0;
+	font-family: "Helvetica-Neue";
+	flex: 1 0;
+	font-size: 24pt;
+	resize: none;
+	padding-left: 10px;
+	padding-top: 12px;
+	outline: none;
+	word-break: break-all;
+	max-width: 600px;
+}
\ No newline at end of file
diff --git a/css/project/todo/todo-main.css b/css/project/todo/todo-main.css
new file mode 100644
index 0000000..dfda290
--- /dev/null
+++ b/css/project/todo/todo-main.css
@@ -0,0 +1,6 @@
+.todo-main {
+	background: #FFFFFF;
+	border: 1px solid #E3E3FF;
+	width: 560px;
+	margin: 0 auto;
+}
diff --git a/css/project/todo/todo-title.css b/css/project/todo/todo-title.css
new file mode 100644
index 0000000..6895cd4
--- /dev/null
+++ b/css/project/todo/todo-title.css
@@ -0,0 +1,6 @@
+.todo-title {
+	font-family: "Helvetica-Neue";
+	font-size: 60pt;
+	margin :0 auto;
+}
+
diff --git a/css/project/todo/todos_filters.css b/css/project/todo/todos_filters.css
new file mode 100644
index 0000000..bec02de
--- /dev/null
+++ b/css/project/todo/todos_filters.css
@@ -0,0 +1,20 @@
+.todos_filters {
+	flex: 1 0;
+	overflow: hidden;
+	text-align: center;
+}
+
+.todos_filter {
+	text-align: center;
+	font-family: "Helvetica-Neue", serif;
+	font-size: 14pt;
+	border: 0;
+	background: #FFFFFF;
+	margin: 10px 6px;
+	outline: none;
+}
+
+.todos_filter.__active {
+	border: 1px solid #ebdfdf;
+	border-radius: 2px;
+}
\ No newline at end of file
diff --git a/css/todo.css b/css/todo.css
new file mode 100644
index 0000000..8f15942
--- /dev/null
+++ b/css/todo.css
@@ -0,0 +1,14 @@
+@font-face {
+	font-family: Helvetica-Neue;
+	src: url(../fonts/HelveticaNeue.ttf);
+}
+
+@font-face {
+	font-family: Helvetica-Neue-UltraLight;
+	src: url(../fonts/HelveticaNeue-UltraLight.otf);
+}
+
+body {
+	background-color: #F5F5F5
+}
+
diff --git a/fonts/HelveticaNeue-Light.otf b/fonts/HelveticaNeue-Light.otf
new file mode 100644
index 0000000..2739089
Binary files /dev/null and b/fonts/HelveticaNeue-Light.otf differ
diff --git a/fonts/HelveticaNeue-UltraLight.otf b/fonts/HelveticaNeue-UltraLight.otf
new file mode 100644
index 0000000..e0aad31
Binary files /dev/null and b/fonts/HelveticaNeue-UltraLight.otf differ
diff --git a/fonts/HelveticaNeue.ttf b/fonts/HelveticaNeue.ttf
new file mode 100755
index 0000000..db3ad30
Binary files /dev/null and b/fonts/HelveticaNeue.ttf differ
diff --git a/index.html b/index.html
index fbd2dcf..50cf66b 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,14 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Title</title>
+	<link rel="stylesheet" type="text/css" href="css/fonts.css"/>
+	<link rel="stylesheet" type="text/css" href="css/base/remove-button.css"/>
+	<link rel="stylesheet" type="text/css" href="css/base/input.css"/>
+	<link rel="stylesheet" type="text/css" href="css/project/todo/todo-action-bar.css"/>
+	<link rel="stylesheet" type="text/css" href="css/project/todo/todo-item.css"/>
+	<link rel="stylesheet" type="text/css" href="css/project/todo/todo-add.css"/>
+	<link rel="stylesheet" type="text/css" href="css/project/todo/todos_filters.css"/>
+
 </head>
 <body>
 	<div class="todo-header">
@@ -12,29 +20,29 @@ <h1 class="todo-title">todos</h1>
 	<div class="todo-main">
 		<div class="todo-add">
 			<button class="todo-add_select-all" aria-label="Mark all as completed"></button>
-			<input class="todo-add_input" placeholder="What needs to be done?" aria-label="Todo add field"/>
+			<input class="add-input" placeholder="What needs to be done?" aria-label="Todo add field"/>
 		</div>
 
 		<div class="todo-list">
 			<div class="todo-item">
 				<input type="checkbox" class="todo-item_mark" aria-label="Mark as completed"/>
-				<textarea class="todo-item_text">HTML</textarea>
-				<button class="todo-item_remove" aria-label="Remove todo"></button>
+				<div contenteditable="true" class="todo-item_text">HTML</div>
+				<button class="remove-button" aria-label="Remove todo"></button>
 			</div>
 			<div class="todo-item __ready">
 				<input type="checkbox" class="todo-item_mark" aria-label="Mark as not completed"/>
-				<textarea class="todo-item_text">CSS</textarea>
-				<button class="todo-item_remove" aria-label="Remove todo"></button>
+				<div contenteditable="true" class="todo-item_text">CSS</div>
+				<button class="remove-button" aria-label="Remove todo"></button>
 			</div>
 			<div class="todo-item">
 				<input type="checkbox" class="todo-item_mark" aria-label="Mark as completed"/>
-				<textarea class="todo-item_text">JS</textarea>
-				<button class="todo-item_remove" aria-label="Remove todo"></button>
+				<div contenteditable="true" class="todo-item_text">JS</div>
+				<button class="remove-button" aria-label="Remove todo"></button>
 			</div>
 			<div class="todo-item">
 				<input type="checkbox" class="todo-item_mark" aria-label="Mark as completed"/>
-				<textarea class="todo-item_text">JS Tools</textarea>
-				<button class="todo-item_remove" aria-label="Remove todo"></button>
+				<div contenteditable="true" class="todo-item_text">JS Tools</div>
+				<button class="remove-button" aria-label="Remove todo"></button>
 			</div>
 		</div>
 		<div class="todo-action-bar">