diff --git a/README.md b/README.md
index 82fdffcf..49d11fd2 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ Install
 
 * Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
   this folder.
-* Add the content of file `dot-htaccess` to the `.htaccess` file in the directory
+* Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
   you want to be indexed (you might have to create this file). This directory and any subdirectories will be
   styled.
 
diff --git a/dot.htaccess b/dot.htaccess
new file mode 100644
index 00000000..023e19f3
--- /dev/null
+++ b/dot.htaccess
@@ -0,0 +1,115 @@
+
+<IfModule mod_autoindex.c>
+
+	# Options              +Indexes
+
+
+	################################
+	# uncomment the following line to force directory listing
+	# even for directories with valid index files
+	################################
+
+	# DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
+
+
+	################################
+	# h5ai header and footer
+	################################
+
+	HeaderName           /h5ai/header.html
+	ReadmeName           /h5ai/footer.html
+
+
+	################################
+	# hide h5ai folder and config files from index
+	################################
+
+	IndexIgnore          h5ai  h5ai.*
+
+
+	################################
+	# table options
+	################################
+
+	IndexOrderDefault    Ascending Name
+
+	# IndexOptions         Charset=UTF-8
+	IndexOptions         FancyIndexing
+	IndexOptions         HTMLTable
+	IndexOptions         XHTML
+	IndexOptions         SuppressHTMLPreamble
+	IndexOptions         SuppressRules
+	IndexOptions         SuppressDescription
+	IndexOptions         FoldersFirst
+	IndexOptions         IgnoreCase
+	IndexOptions         IconsAreLinks
+	IndexOptions         VersionSort
+
+
+	################################
+	# icon mapping
+	################################
+
+	AddIcon              /h5ai/icons/log.png         log  Log  LOG
+	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/readme.png      README
+
+	AddIcon              /h5ai/icons/css.png         .less
+	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
+	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+	AddIcon              /h5ai/icons/bin.png         .so  .o
+
+	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
+	AddIcon              /h5ai/icons/tar.png         .tar
+	AddIcon              /h5ai/icons/archive.png     .tar.gz  .tgz  .tar.bz2
+	AddIcon              /h5ai/icons/pdf.png         .pdf
+	AddIcon              /h5ai/icons/deb.png         .deb
+	AddIcon              /h5ai/icons/rpm.png         .rpm
+	AddIcon              /h5ai/icons/cd.png          .iso  .cue
+
+	AddIconByType        /h5ai/icons/png.png         image/png
+	AddIconByType        /h5ai/icons/jpg.png         image/jpeg
+	AddIconByType        /h5ai/icons/gif.png         image/gif
+	AddIconByType        /h5ai/icons/ico.png         image/x-icon
+	AddIconByType        /h5ai/icons/bmp.png         image/x-ms-bmp
+
+	AddIconByType        /h5ai/icons/html.png        text/html
+	AddIconByType        /h5ai/icons/css.png         text/css
+	AddIconByType        /h5ai/icons/xml.png         application/xml
+	AddIconByType        /h5ai/icons/js.png          application/javascript  application/json
+	AddIconByType        /h5ai/icons/php.png         application/x-httpd-php
+
+	AddIconByType        /h5ai/icons/py.png          text/x-python
+	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
+	AddIconByType        /h5ai/icons/java.png        text/x-java
+	AddIconByType        /h5ai/icons/cpp.png         text/x-c++src
+	AddIconByType        /h5ai/icons/hpp.png         text/x-c++hdr
+	AddIconByType        /h5ai/icons/c.png           text/x-csrc
+	AddIconByType        /h5ai/icons/h.png           text/x-chdr
+
+	AddIconByType        /h5ai/icons/pdf.png         application/pdf
+
+	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
+	AddIconByType        /h5ai/icons/tex.png         text/x-tex
+	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
+
+	AddIconByType        /h5ai/icons/bin.png         application/java-vm
+	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
+
+	AddIconByType        /h5ai/icons/text.png        text/*
+	AddIconByType        /h5ai/icons/image.png       image/*
+	AddIconByType        /h5ai/icons/audio.png       audio/*
+	AddIconByType        /h5ai/icons/video.png       video/*
+
+	AddIconByEncoding    /h5ai/icons/zip.png         x-compress  x-gzip  x-bzip2
+
+	AddIcon              /h5ai/icons/parent.png      ..
+	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
+	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
+
+	DefaultIcon          /h5ai/icons/unknown.png
+
+</IfModule>
+
diff --git a/h5ai/footer.html b/h5ai/footer.html
index 0b2252f5..029ba478 100644
--- a/h5ai/footer.html
+++ b/h5ai/footer.html
@@ -1,6 +1,6 @@
 		<!-- generated code ends here -->
 		<div id="empty">empty</div>
-		<div id="special"></div>
+		<section id="h5ai-bottom"></section>
 	</section>
 	<footer>
 		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics & CSS3">
@@ -8,7 +8,7 @@
 			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
 			<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">h5ai</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="html5autoindex v0.1.1">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 dd111285..20486948 100644
--- a/h5ai/header.html
+++ b/h5ai/header.html
@@ -16,6 +16,7 @@
 		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
+		<section id="h5ai-top"></section>
 		<!--
 			The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
 			reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
diff --git a/h5ai/main.css b/h5ai/main.css
index 06296448..44a3f21f 100644
--- a/h5ai/main.css
+++ b/h5ai/main.css
@@ -31,13 +31,13 @@ nav {
 	-moz-box-shadow: 0px 0px 30px #555;
 	box-shadow: 0px 0px 30px #555;
 }
-nav li {
+nav li.crumb {
 	float: left;
 	border-right: 1px dotted rgb(225,225,225);
 	cursor: pointer;
 	opacity: 0.7;
 }
-nav li.hover, nav li.hover a {
+nav li.crumb:hover, nav li.crumb:hover a {
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
@@ -54,6 +54,22 @@ nav img {
 }
 
 
+section#h5ai-top {
+	display: none;
+	padding: 0px 0px 10px 0px;
+	margin: 0px 0px 80px 0px;
+	border-bottom: 1px solid #999;
+}
+
+
+section#h5ai-bottom {
+	display: none;
+	padding: 10px 0px 0px 0px;
+	margin: 80px 0px 0px 0px;
+	border-top: 1px solid #999;
+}
+
+
 section#content {
 	max-width: 980px;
 	margin: 0px auto;
@@ -67,22 +83,22 @@ table {
 table {
 	display: block;
 }
-table tr.hover, table tr.hover a {
+table tr.entry:hover, table tr.entry:hover a {
 	background-color: rgb(235,245,250);
 	background-color: #eeeeee;
 	color: #333;
 	cursor: pointer;
 }
 table th, table td {
-    padding: 3px 6px;
-    text-align: left;
+	padding: 3px 6px;
+	text-align: left;
 	border: none;
 }
 table th {
 	padding-bottom: 18px;
 	opacity: 0.4;
 }
-table th.hover {
+table th.header:hover {
 	cursor: pointer;
 	opacity: 0.9;
 }
@@ -93,12 +109,12 @@ table th a, table th a:visited {
 table th a img {
 	width: 12px;
 	height: 12px;
-    padding: 0px 8px;
+	padding: 0px 8px;
 }
 table td {
-    border: 1px solid #ddd;
-    border-left: 0px;
-    border-right: 0px;
+	border: 1px solid #ddd;
+	border-left: 0px;
+	border-right: 0px;
 }
 table .icon {
 	text-align: center;
@@ -139,7 +155,7 @@ div#empty {
 }
 
 
-div#special {
+section#special {
 	display: none;
 	text-align: center;
 	margin: 50px 0px;
diff --git a/h5ai/main.js b/h5ai/main.js
index 77608491..77b1ad9c 100644
--- a/h5ai/main.js
+++ b/h5ai/main.js
@@ -18,7 +18,7 @@
 		addColumnClasses();
 		initTableRows();
 		addSortOrderIcons();
-		//specialFiles();
+		addTopAndBottom();
 	};
 
 	
@@ -39,19 +39,12 @@
 			var part = parts[idx];
 			if ( part !== "" ) {
 				path += part + "/";
-				$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
+				$ul.append( $( "<li><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
 			}
 		}
 
 		$( "nav li a" ).closest( "li" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
+			.addClass( "crumb" )
 			.click( function () {
 				document.location.href = $( this ).find( "a" ).attr( "href" );
 			} );
@@ -84,26 +77,12 @@
 	function initTableRows() {
 
 		$( "th a" ).closest( "th" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
+			.addClass( "header" )
 			.click( function () {
 				document.location.href = $( this ).find( "a" ).attr( "href" );
 			} );
 		$( "td.name a" ).closest( "tr" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
+			.addClass( "entry" )
 			.click( function () {
 				document.location.href = $( this ).find( "td.name a" ).attr( "href" );
 			} );
@@ -136,24 +115,18 @@
 	};
 
 
-	function specialFiles() {
+	function addTopAndBottom() {
 
-		specialFile( "README", "readme.png" );
-		specialFile( "ChangeLog", "changelog.png" );
-		specialFile( "INSTALL", "install.png" );
-		specialFile( "COPYING", "copying.png" );
-		specialFile( "LICENSE", "copying.png" );
-		specialFile( "AUTHORS", "authors.png" );
-	};
-
-
-	function specialFile( name, img ) {
-
-		if ( $( "td.name a:contains(" + name + ")" ).size() > 0 ) {
-			$( "#special" )
-				.append( $( "<img src='" + h5aiPath + "/images/" + img + "' alt='readme' />" ) )
-				.show();
-		}
+		$( "#h5ai-top" ).load( "h5ai.top.html", function( response, status, xhr ) {
+			if (status != "error") {
+				$( "#h5ai-top" ).show();
+			}
+		} );
+		$( "#h5ai-bottom" ).load( "h5ai.bottom.html", function( response, status, xhr ) {
+			if (status != "error") {
+				$( "#h5ai-bottom" ).show();
+			}
+		} );
 	};
 
 } )( jQuery );