diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f9cd5b3..6861b54 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -13,3 +13,9 @@
  *= require_tree .
  *= require_self
  */
+a .filterToggle:before {
+	content: "\e113";
+}
+a.collapsed .filterToggle:before {
+	content: "\e114";
+}
diff --git a/app/views/books/_index.html.erb b/app/views/books/_index.html.erb
index 89ffd06..2737350 100644
--- a/app/views/books/_index.html.erb
+++ b/app/views/books/_index.html.erb
@@ -1,6 +1,16 @@
-<% content_for :latest_filter do 
-	isLatest = session[:sort] == "latest" %>
-		<%= link_to "Latest", url_for(sort: (isLatest ? "alpha" : "latest")), class: "btn btn-default btn-sm " + (isLatest ? " active" : ""), remote: true %>
+<% opts = { data: { url: url_for, remote: true, method: :get } }
+content_for :latest_filter do %>
+	<div class="form-group">
+		<%= label_tag "sort", "Sort by" %>
+		<label class="radio-inline">
+			<%= radio_button_tag "sort", "latest", @preference.sort == "latest",opts %>
+			Date
+		</label>
+		<label class="radio-inline">
+			<%= radio_button_tag "sort", "alpha", @preference.sort == "alpha", opts %>
+			Name
+		</label>
+	</div>
 <% end %>
 <%= render'layouts/filter' %>
 
diff --git a/app/views/layouts/_filter.html.erb b/app/views/layouts/_filter.html.erb
index 4cd18d8..bdc5076 100644
--- a/app/views/layouts/_filter.html.erb
+++ b/app/views/layouts/_filter.html.erb
@@ -1,20 +1,23 @@
 <div class="panel panel-default">
 	<div class="panel-heading">
-		<%= link_to "#filterContent", data: { toggle: "collapse" } do %>
-		<h3 class="panel-title"> Filter </h3>
+		<%= link_to "#filterContent", { class: "collapsed", data: { toggle: "collapse" } } do %>
+			<h3 class="panel-title"> 
+				<span class="glyphicon filterToggle" aria-hidden="true"/>
+				Filter
+			</h3>
 		<% end %>
 	</div>
 	<div class="panel-body collapse" id="filterContent">
 		<%= render'layouts/initials' %>
-		<%= render'layouts/perpage' %>
 		<%= yield(:latest_filter) %>
 		<%= form_tag({}, {method: :get, remote: true}) do %>
 			<div class="input-group">
 				<span class="input-group-btn">
-					<%= button_tag "Seach", class: "btn btn-default" %>
+					<%= button_tag "Search", class: "btn btn-default" %>
 				</span>
 				<%= search_field_tag(:term, @preference.term, placeholder: "Search for...", class: "form-control") %>
 			</div>
 		<% end %>
+		<%= render'layouts/perpage' %>
 	</div>
 </div>
diff --git a/app/views/layouts/_initials.html.erb b/app/views/layouts/_initials.html.erb
index f5810d6..2772661 100644
--- a/app/views/layouts/_initials.html.erb
+++ b/app/views/layouts/_initials.html.erb
@@ -1,6 +1,6 @@
 <% initials = ['0'] + ('A'..'Z').to_a %>
 <div class="center">
-	<ul class="pagination btn-sm">
+	<ul class="pagination pagination-sm" title="Initial letter">
 <% initials.each do |i|
 	is_cur = (i == @preference.initial)
 	%>
diff --git a/app/views/layouts/_perpage.html.erb b/app/views/layouts/_perpage.html.erb
index f206af7..3b1338e 100644
--- a/app/views/layouts/_perpage.html.erb
+++ b/app/views/layouts/_perpage.html.erb
@@ -1,5 +1,5 @@
 <div class="center">
-	<ul class="pagination">
+	<ul class="pagination pagination-sm" title="Items per page">
 <% [10,20,50,100].each do |p| %>
 	<%= content_tag :li, class: (p == @preference.per_page ? "active": nil) do %>
 		<%= link_to p, url_for(per_page: p), remote: true %>