diff --git a/dot.htaccess b/dot.htaccess
index 023e19f3..f5e312ab 100644
--- a/dot.htaccess
+++ b/dot.htaccess
@@ -33,7 +33,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	# IndexOptions         Charset=UTF-8
+	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
 	IndexOptions         XHTML
diff --git a/h5ai/footer.html b/h5ai/footer.html
index 029ba478..faf27983 100644
--- a/h5ai/footer.html
+++ b/h5ai/footer.html
@@ -3,12 +3,13 @@
 		<section id="h5ai-bottom"></section>
 	</section>
 	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics & CSS3">
+		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
 			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
 			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
+			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://github.com/larrrs/h5ai" target="_blank" title="html5autoindex v0.1.1">h5ai</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2">h5ai</a>
 		using
 		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
 		and
diff --git a/h5ai/header.html b/h5ai/header.html
index 20486948..e421cb6f 100644
--- a/h5ai/header.html
+++ b/h5ai/header.html
@@ -11,7 +11,9 @@
 <body>
 	<nav>
 		<ul>
-			<li id="domain"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons" alt="view-icons" />icons</a></li>
+			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>
diff --git a/h5ai/icons/extension.png b/h5ai/icons/extension.png
deleted file mode 100644
index 57028e06..00000000
Binary files a/h5ai/icons/extension.png and /dev/null differ
diff --git a/h5ai/icons/view-details.png b/h5ai/icons/view-details.png
new file mode 100644
index 00000000..d5a6cd33
Binary files /dev/null and b/h5ai/icons/view-details.png differ
diff --git a/h5ai/icons/view-icons.png b/h5ai/icons/view-icons.png
new file mode 100644
index 00000000..a9cb1fe6
Binary files /dev/null and b/h5ai/icons/view-icons.png differ
diff --git a/h5ai/images/archive.png b/h5ai/images/archive.png
new file mode 100644
index 00000000..b3c07d56
Binary files /dev/null and b/h5ai/images/archive.png differ
diff --git a/h5ai/images/audio.png b/h5ai/images/audio.png
new file mode 100644
index 00000000..20c14897
Binary files /dev/null and b/h5ai/images/audio.png differ
diff --git a/h5ai/images/authors.png b/h5ai/images/authors.png
new file mode 100644
index 00000000..90ff6b3a
Binary files /dev/null and b/h5ai/images/authors.png differ
diff --git a/h5ai/images/bin.png b/h5ai/images/bin.png
new file mode 100644
index 00000000..f623dceb
Binary files /dev/null and b/h5ai/images/bin.png differ
diff --git a/h5ai/images/blank.png b/h5ai/images/blank.png
new file mode 100644
index 00000000..bef1f600
Binary files /dev/null and b/h5ai/images/blank.png differ
diff --git a/h5ai/images/bmp.png b/h5ai/images/bmp.png
new file mode 100644
index 00000000..675cbf66
Binary files /dev/null and b/h5ai/images/bmp.png differ
diff --git a/h5ai/images/c.png b/h5ai/images/c.png
new file mode 100644
index 00000000..87ade51c
Binary files /dev/null and b/h5ai/images/c.png differ
diff --git a/h5ai/images/cd.png b/h5ai/images/cd.png
new file mode 100644
index 00000000..7c73c487
Binary files /dev/null and b/h5ai/images/cd.png differ
diff --git a/h5ai/images/copying.png b/h5ai/images/copying.png
new file mode 100644
index 00000000..199d436c
Binary files /dev/null and b/h5ai/images/copying.png differ
diff --git a/h5ai/images/cpp.png b/h5ai/images/cpp.png
new file mode 100644
index 00000000..29b43873
Binary files /dev/null and b/h5ai/images/cpp.png differ
diff --git a/h5ai/images/css.png b/h5ai/images/css.png
new file mode 100644
index 00000000..b0d09ee2
Binary files /dev/null and b/h5ai/images/css.png differ
diff --git a/h5ai/images/deb.png b/h5ai/images/deb.png
new file mode 100644
index 00000000..a2806434
Binary files /dev/null and b/h5ai/images/deb.png differ
diff --git a/h5ai/images/default.png b/h5ai/images/default.png
new file mode 100644
index 00000000..ec5c158d
Binary files /dev/null and b/h5ai/images/default.png differ
diff --git a/h5ai/images/exe.png b/h5ai/images/exe.png
new file mode 100644
index 00000000..0860f77c
Binary files /dev/null and b/h5ai/images/exe.png differ
diff --git a/h5ai/images/gif.png b/h5ai/images/gif.png
new file mode 100644
index 00000000..0c525a1d
Binary files /dev/null and b/h5ai/images/gif.png differ
diff --git a/h5ai/images/gzip.png b/h5ai/images/gzip.png
new file mode 100644
index 00000000..6048579e
Binary files /dev/null and b/h5ai/images/gzip.png differ
diff --git a/h5ai/images/h.png b/h5ai/images/h.png
new file mode 100644
index 00000000..7999fc64
Binary files /dev/null and b/h5ai/images/h.png differ
diff --git a/h5ai/images/hpp.png b/h5ai/images/hpp.png
new file mode 100644
index 00000000..a1f60756
Binary files /dev/null and b/h5ai/images/hpp.png differ
diff --git a/h5ai/images/html.png b/h5ai/images/html.png
new file mode 100644
index 00000000..36a1338c
Binary files /dev/null and b/h5ai/images/html.png differ
diff --git a/h5ai/images/html5-storage.png b/h5ai/images/html5-storage.png
new file mode 100755
index 00000000..2976c27f
Binary files /dev/null and b/h5ai/images/html5-storage.png differ
diff --git a/h5ai/images/ico.png b/h5ai/images/ico.png
new file mode 100644
index 00000000..3c32c985
Binary files /dev/null and b/h5ai/images/ico.png differ
diff --git a/h5ai/images/image.png b/h5ai/images/image.png
new file mode 100644
index 00000000..69bd44e7
Binary files /dev/null and b/h5ai/images/image.png differ
diff --git a/h5ai/images/install.png b/h5ai/images/install.png
new file mode 100644
index 00000000..0eb4fe1c
Binary files /dev/null and b/h5ai/images/install.png differ
diff --git a/h5ai/images/java.png b/h5ai/images/java.png
new file mode 100644
index 00000000..b52c20ab
Binary files /dev/null and b/h5ai/images/java.png differ
diff --git a/h5ai/images/jpg.png b/h5ai/images/jpg.png
new file mode 100644
index 00000000..f1d14cbe
Binary files /dev/null and b/h5ai/images/jpg.png differ
diff --git a/h5ai/images/js.png b/h5ai/images/js.png
new file mode 100644
index 00000000..dbe9da65
Binary files /dev/null and b/h5ai/images/js.png differ
diff --git a/h5ai/images/log.png b/h5ai/images/log.png
new file mode 100644
index 00000000..23ac5af9
Binary files /dev/null and b/h5ai/images/log.png differ
diff --git a/h5ai/images/makefile.png b/h5ai/images/makefile.png
new file mode 100644
index 00000000..93187aa4
Binary files /dev/null and b/h5ai/images/makefile.png differ
diff --git a/h5ai/images/package.png b/h5ai/images/package.png
new file mode 100644
index 00000000..f9b43e9a
Binary files /dev/null and b/h5ai/images/package.png differ
diff --git a/h5ai/images/parent.png b/h5ai/images/parent.png
new file mode 100644
index 00000000..0ae73de1
Binary files /dev/null and b/h5ai/images/parent.png differ
diff --git a/h5ai/images/pdf.png b/h5ai/images/pdf.png
new file mode 100644
index 00000000..6bb7ab28
Binary files /dev/null and b/h5ai/images/pdf.png differ
diff --git a/h5ai/images/php.png b/h5ai/images/php.png
new file mode 100644
index 00000000..1bac2ec1
Binary files /dev/null and b/h5ai/images/php.png differ
diff --git a/h5ai/images/png.png b/h5ai/images/png.png
new file mode 100644
index 00000000..90b70598
Binary files /dev/null and b/h5ai/images/png.png differ
diff --git a/h5ai/images/py.png b/h5ai/images/py.png
new file mode 100644
index 00000000..adc55705
Binary files /dev/null and b/h5ai/images/py.png differ
diff --git a/h5ai/images/rar.png b/h5ai/images/rar.png
new file mode 100644
index 00000000..a9b49d1f
Binary files /dev/null and b/h5ai/images/rar.png differ
diff --git a/h5ai/images/rb.png b/h5ai/images/rb.png
new file mode 100644
index 00000000..69e0da52
Binary files /dev/null and b/h5ai/images/rb.png differ
diff --git a/h5ai/images/readme.png b/h5ai/images/readme.png
new file mode 100644
index 00000000..84d994d8
Binary files /dev/null and b/h5ai/images/readme.png differ
diff --git a/h5ai/images/rpm.png b/h5ai/images/rpm.png
new file mode 100644
index 00000000..1264e621
Binary files /dev/null and b/h5ai/images/rpm.png differ
diff --git a/h5ai/images/rtf.png b/h5ai/images/rtf.png
new file mode 100644
index 00000000..62ed33c9
Binary files /dev/null and b/h5ai/images/rtf.png differ
diff --git a/h5ai/images/script.png b/h5ai/images/script.png
new file mode 100644
index 00000000..cbae3e1c
Binary files /dev/null and b/h5ai/images/script.png differ
diff --git a/h5ai/images/tar.png b/h5ai/images/tar.png
new file mode 100644
index 00000000..ba2a7738
Binary files /dev/null and b/h5ai/images/tar.png differ
diff --git a/h5ai/images/tex.png b/h5ai/images/tex.png
new file mode 100644
index 00000000..66e57411
Binary files /dev/null and b/h5ai/images/tex.png differ
diff --git a/h5ai/images/text.png b/h5ai/images/text.png
new file mode 100644
index 00000000..fefa360d
Binary files /dev/null and b/h5ai/images/text.png differ
diff --git a/h5ai/images/tiff.png b/h5ai/images/tiff.png
new file mode 100644
index 00000000..6bf950b7
Binary files /dev/null and b/h5ai/images/tiff.png differ
diff --git a/h5ai/images/unknown.png b/h5ai/images/unknown.png
new file mode 100644
index 00000000..41c53cdf
Binary files /dev/null and b/h5ai/images/unknown.png differ
diff --git a/h5ai/images/xml.png b/h5ai/images/xml.png
new file mode 100644
index 00000000..5cda3e62
Binary files /dev/null and b/h5ai/images/xml.png differ
diff --git a/h5ai/images/zip.png b/h5ai/images/zip.png
new file mode 100644
index 00000000..4d2c42ba
Binary files /dev/null and b/h5ai/images/zip.png differ
diff --git a/h5ai/main.css b/h5ai/main.css
index 44a3f21f..3400bed1 100644
--- a/h5ai/main.css
+++ b/h5ai/main.css
@@ -31,13 +31,11 @@ nav {
 	-moz-box-shadow: 0px 0px 30px #555;
 	box-shadow: 0px 0px 30px #555;
 }
-nav li.crumb {
-	float: left;
-	border-right: 1px dotted rgb(225,225,225);
+nav li {
 	cursor: pointer;
 	opacity: 0.7;
 }
-nav li.crumb:hover, nav li.crumb:hover a {
+nav li:hover, nav li:hover a {
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
@@ -52,6 +50,14 @@ nav img {
 	padding-right: 6px;
 	padding-bottom: 6px;
 }
+nav li.crumb {
+	float: left;
+	border-right: 1px dotted rgb(225,225,225);
+}
+nav li.view {
+	float: right;
+	border-left: 1px dotted rgb(225,225,225);
+}
 
 
 section#h5ai-top {
@@ -155,6 +161,34 @@ div#empty {
 }
 
 
+#box {
+	padding: 10px;
+	border: 1px solid #eee;
+	border-radius: 15px;
+}
+#box .entry {
+	margin: 10px;
+	padding: 8px;
+	width: 100px;
+	height: 120px;
+	float: left;
+	text-align: center;
+	overflow: hidden;
+	border-radius: 5px;
+	cursor: pointer;
+}
+#box .entry:hover {
+	-webkit-box-shadow: 0px 0px 20px #555;
+	-moz-box-shadow: 0px 0px 20px #555;
+	box-shadow: 0px 0px 20px #999;
+}
+#box .entry img {
+	width: 48px;
+	height: 48px;
+	margin: 0px 0px 8px 0px;
+}
+
+
 section#special {
 	display: none;
 	text-align: center;
diff --git a/h5ai/main.js b/h5ai/main.js
index 77b1ad9c..92cdc6d1 100644
--- a/h5ai/main.js
+++ b/h5ai/main.js
@@ -3,6 +3,7 @@
 	var columnClasses = [ "icon", "name", "date", "size" ];
 	var defaultSortOrder = "C=N;O=A"
 	var h5aiPath = "/h5ai"
+	var views = [ "details", "icons" ];
 
 
 	$( function() {
@@ -19,9 +20,11 @@
 		initTableRows();
 		addSortOrderIcons();
 		addTopAndBottom();
+		initViews();
+		checkView();
 	};
 
-	
+
 	function convertToHtml5() {
 
 		$( "td" ).removeAttr( "align" ).removeAttr( "valign" );
@@ -39,12 +42,11 @@
 			var part = parts[idx];
 			if ( part !== "" ) {
 				path += part + "/";
-				$ul.append( $( "<li><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
+				$ul.append( $( "<li class=\"crumb\"><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
 			}
 		}
 
 		$( "nav li a" ).closest( "li" )
-			.addClass( "crumb" )
 			.click( function () {
 				document.location.href = $( this ).find( "a" ).attr( "href" );
 			} );
@@ -129,4 +131,64 @@
 		} );
 	};
 
+
+	function checkView() {
+		
+		if ( getView() === "icons" ) {
+			$( "#content table" ).hide();
+			$( "#content #empty" ).hide();
+			$( "#content #box" ).show();
+		} else {
+			$( "#content table" ).show();
+			$( "#content #box" ).hide();
+		}
+	};
+
+
+	function getView() {
+	
+		var view = localStorage.getItem( "h5ai.view" );
+		if ( $.inArray( view, views ) ) {
+			return view;
+		};
+		return views[0];
+	};
+
+
+	function setView( view ) {
+	
+		localStorage.setItem( "h5ai.view", view );
+		checkView();
+	};
+
+	
+	function initViews() {
+
+		var $box = $( "<div id=\"box\"></div>" );
+		$( "td.name a" ).closest( "tr" ).each( function () {
+			var $tr = $( this );
+			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icon", "image" );
+			var name = $tr.find( "td.name a" ).text();
+			$( "<div class=\"entry\"></div>" )
+				.append( $( "<img src=\"" + icon + "\" />" ) )
+				.append( $( "<div class=\"label\">" + name + "</div>" ) )
+				.click( function () {
+					document.location.href = $tr.find( "td.name a" ).attr( "href" );
+				} ).
+				appendTo( $box );
+		} );
+		$box.append( $( "<div class=\"clearfix\"></div>" ) );
+		$( "#content table" ).after( $box );
+
+
+		$( "#details" ).closest( "li" )
+			.click( function () {
+				setView( "details" );
+			} );
+		$( "#icons" ).closest( "li" )
+			.click( function () {
+				setView( "icons" );
+			} );
+	};
+
 } )( jQuery );
