diff --git a/dot.htaccess b/dot.htaccess
index bd503152..f86ee241 100644
--- a/dot.htaccess
+++ b/dot.htaccess
@@ -24,7 +24,7 @@
 	# hide h5ai folder and config files from index
 	################################
 
-	IndexIgnore          h5ai  h5ai.*
+	IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
 
 
 	################################
diff --git a/h5ai/footer.html b/h5ai/footer.html
index 38cef0ac..c8dbdf06 100644
--- a/h5ai/footer.html
+++ b/h5ai/footer.html
@@ -1,7 +1,7 @@
 			<!-- generated code ends here -->
 		</section>
 		<section id="icons"></section>
-		<section id="bottom"></section>
+		<footer></footer>
 	</section>
 	<footer>
 		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
diff --git a/h5ai/header.html b/h5ai/header.html
index 2a8725f7..2f4a5057 100644
--- a/h5ai/header.html
+++ b/h5ai/header.html
@@ -18,7 +18,7 @@
 		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
-		<section id="top"></section>
+		<header></header>
 		<section id="details">
 			<!--
 				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
diff --git a/h5ai/main.css b/h5ai/main.css
index e67f20ce..f5cf0c92 100644
--- a/h5ai/main.css
+++ b/h5ai/main.css
@@ -19,7 +19,7 @@ a:hover {
 }
 
 
-nav {
+body > nav {
 	position: fixed;
 	z-index: 1;
 	width: 100%;
@@ -32,7 +32,7 @@ nav {
 	-moz-box-shadow: 0 0 30px #555;
 	box-shadow: 0 0 30px #555;
 }
-nav li {
+body > nav li {
 	cursor: pointer;
 	opacity: 0.7;
 	-webkit-transition: all 0.2s ease-in-out;
@@ -40,49 +40,47 @@ nav li {
 	-o-transition: all 0.2s ease-in-out;
 	transition: all 0.2s ease-in-out;
 }
-nav li:hover, nav li:hover a {
+body > nav li:hover, body > nav li:hover a {
 	color: #e80;
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
-nav a {
+body > nav a {
 	display: block;
 	height: 30px;
 	line-height: 30px;
 	padding: 0 10px;
 }
-nav img {
+body > nav img {
 	vertical-align: bottom;
 	padding: 0 6px 6px 0;
 }
-nav li.crumb {
+body > nav li.crumb {
 	float: left;
 	border-right: 1px dotted rgb(225,225,225);
 }
-nav li.view {
+body > nav li.view {
 	float: right;
 	border-left: 1px dotted rgb(225,225,225);
 }
 
 
-#top {
-	display: none;
-	padding-bottom: 10px;
-	margin-bottom: 80px;
-	border-bottom: 2px dashed #ddd;
-}
-#bottom {
-	display: none;
-	padding-top: 10px;
-	margin-top: 80px;
-	border-top: 2px dashed #ddd;
-}
-
-
 #content {
 	max-width: 980px;
 	margin: 0 auto;
 }
+#content > header {
+	display: none;
+	padding-bottom: 10px;
+	margin-bottom: 80px;
+	border-bottom: 2px dashed #ddd;
+}
+#content > footer {
+	display: none;
+	padding-top: 10px;
+	margin-top: 80px;
+	border-top: 2px dashed #ddd;
+}
 
 
 #details {
@@ -199,7 +197,7 @@ nav li.view {
 }
 
 
-footer {
+body > footer {
 	position: fixed;
 	z-index: 1;
 	width: 100%;
@@ -215,14 +213,14 @@ footer {
 	-moz-box-shadow: 0 0 30px #555;
 	box-shadow: 0 0 30px #555;
 }
-footer a, footer a:visited {
+body > footer a, body > footer a:visited {
 	color: #555;
 	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;
 	-o-transition: all 0.2s ease-in-out;
 	transition: all 0.2s ease-in-out;
 }
-footer a:hover {
+body > footer a:hover {
 	color: #e80;
 }
 
diff --git a/h5ai/main.js b/h5ai/main.js
index 9d6dfc4f..60b058f8 100644
--- a/h5ai/main.js
+++ b/h5ai/main.js
@@ -10,7 +10,7 @@
 		applyViewmode();
 		initBreadcrumb();
 		initViews();
-		loadIncludes();
+		customize();
 	} );
 
 
@@ -32,13 +32,8 @@
 			ascending: "/h5ai/icons/ascending.png",
 			descending: "/h5ai/icons/descending.png"
 		},
-		globalPath: "/h5ai/global/",
-		localPrefix: "h5ai.",
-		includes: {
-			top: "top.html",
-			bottom: "bottom.html",
-			include: "include.js"
-		}
+		customHeader: "h5ai.header.html",
+		customFooter: "h5ai.footer.html",
 	};
 
 
@@ -235,35 +230,26 @@
 
 
 	/*******************************
-	 * includes
+	 * customize
 	 *******************************/
 
-	function loadIncludes() {
 
-		$( "#top" ).load( config.localPrefix + config.includes.top, function( response, status ) {
-			if (status !== "error") {
-				$( "#top" ).show();
-			} else {
-				$( "#top" ).load( config.globalPath + config.includes.top, function( response, status ) {
-					if (status !== "error") {
-						$( "#top" ).show();
-					}
-				} );
+	function customize() {
+		$.ajax( {
+			url: config.customHeader,
+			dataType: "html",
+			success: function ( data ) {
+				$( "#content > header" ).append( $( data ) ).show();
 			}
 		} );
-		$( "#bottom" ).load( config.localPrefix + config.includes.bottom, function( response, status ) {
-			if (status !== "error") {
-				$( "#bottom" ).show();
-			} else {
-				$( "#bottom" ).load( config.globalPath + config.includes.bottom, function( response, status ) {
-					if (status !== "error") {
-						$( "#bottom" ).show();
-					}
-				} );
+		$.ajax( {
+			url: config.customFooter,
+			dataType: "html",
+			success: function ( data ) {
+				$( "#content > footer" ).prepend( $( data ) ).show();
 			}
 		} );
-		$.getScript( config.globalPath + config.includes.include );
-		$.getScript( config.localPrefix + config.includes.include );
 	};
 
+
 } )( jQuery );