diff --git a/css/screen.css b/css/screen.css
index 10bdd04..bd438d5 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -219,10 +219,15 @@ canvas {
 	height: 2.5em;
 }
 
-#full .star, #full .unread {
+.button.icon {
 	line-height: 0.52;
 	font-size: 2em;
 	vertical-align: bottom;
+	padding-top: 0.35em;
+}
+
+.button.icon2 {
+	line-height: 1.05;
 }
 
 #full h1 {
diff --git a/index.html b/index.html
index 59047f4..800a565 100644
--- a/index.html
+++ b/index.html
@@ -21,15 +21,16 @@
     <ul></ul>
   </article>
   <footer class="bar">
-    <a class="button" href="#reload">Reload</a>
-    <a class="button" href="#settings">Settings</a>
+    <a class="button icon" href="#reload">↻</a>
+    <a class="button icon" href="#all-read" id="all-read">●</a>
+    <a class="button icon" href="#settings">⚙</a>
     <canvas width="40" height="40"></canvas>
   </footer>
 </section>
 
 <section id="settings">
   <header class="bar">
-    <a class="button" href="#list">List</a>
+    <a class="button icon2" href="#list">☰</a>
   </header>
   <article>
     <ul>
@@ -79,9 +80,9 @@
 
 <section id="full">
   <header class="bar">
-    <a class="button" href="#list">List</a>
-    <a id="setunread" class="button unread" href="#unread">○</a>
-    <a id="setstarred" class="button star" href="#starred">☆</a>
+    <a class="button icon2" href="#list">☰</a>
+    <a id="setunread" class="button icon" href="#unread">○</a>
+    <a id="setstarred" class="button icon" href="#starred">☆</a>
     <canvas width="40" height="40"></canvas>
   </header>
   <article>
diff --git a/js/App.js b/js/App.js
index 8120ce8..cf7b444 100644
--- a/js/App.js
+++ b/js/App.js
@@ -62,6 +62,8 @@ App.prototype.after_login = function() {
 			_this.fontChange("smaller");
 		} else if(url == "#font-bigger") {
 			_this.fontChange("bigger");
+		} else if(url == "#all-read") {
+			_this.toggleAllRead();
 		}
 
 		// this is here so you can tap on a button more then once
@@ -128,6 +130,7 @@ App.prototype.setColor = function(color) {
 
 App.prototype.reload = function() {
 	this.unread_articles = [];
+	$("#all-read").innerHTML = "●";
 	this.ttrss.getUnreadFeeds(this.gotUnreadFeeds.bind(this));
 };
 
@@ -187,9 +190,11 @@ App.prototype.populateList = function() {
 
 App.prototype.updateList = function() {
 	var unread = 0;
-	var _this = this;
 	$$("#list ul li").forEach(function(o, i) {
-		if(!this.unread_articles[i].unread) o.removeClass("unread");
+
+		if(!this.unread_articles[i].unread) {
+			o.removeClass("unread");
+		}
 		else {
 			unread++;
 			o.addClass("unread");
@@ -314,12 +319,45 @@ App.prototype.setCurrentUnread = function() {
 	article.unread = true;
 	article.set_unread = true;
 	this.updateList();
-	var _this = this;
 	this.ttrss.setArticleUnread(article.id);
 
 	$("#setunread").innerHTML = "●";
 };
 
+App.prototype.toggleAllRead = function() {
+
+	if($("#all-read").innerHTML == "●") { // set all read
+
+		var ids = [];
+		for (var i = 0; i < this.unread_articles.length; i++) {
+			var article = this.unread_articles[i];
+			article.unread = false;
+			article.set_unread = false;
+			ids.push(article.id);
+		}
+		$("#all-read").innerHTML = "○";
+
+		this.updateList();
+
+		this.ttrss.setArticleRead(ids.join(","));
+
+	} else {
+
+		var ids = [];
+		for (var i = 0; i < this.unread_articles.length; i++) {
+			var article = this.unread_articles[i];
+			article.unread = true;
+			article.set_unread = false;
+			ids.push(article.id);
+		}
+		$("#all-read").innerHTML = "●";
+		this.updateList();
+
+		this.ttrss.setArticleUnread(ids.join(","));
+
+	}
+};
+
 App.prototype.toggleStarred = function() {
 	var article = this.unread_articles[this.currentIndex];
 	if(!article) return; // happens if we're not on a full article site