diff --git a/demo/css/demo.css b/demo/css/demo.css
new file mode 100644
index 0000000..fffdae5
--- /dev/null
+++ b/demo/css/demo.css
@@ -0,0 +1,236 @@
+body {
+	/* appearance */
+	background-image: url(../images/bg.png);
+	background-repeat: repeat;
+	
+	/* text */
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	}
+	
+.styles {
+	display: none;
+	}
+	
+input::-webkit-input-placeholder {
+    color: #585858;
+	}
+input:-moz-placeholder {
+    color: #585858;
+	}
+	
+.button {
+	/* appearance */
+	background-color: #3f3f3f;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.0) 0%,
+		rgba(255,255,255,0.1) 50%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(100%,rgba(255,255,255,0.0)),
+		color-stop(50%,rgba(255,255,255,0.1)));
+	border: 1px solid #000000;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	-webkit-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	-moz-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	
+	/* position */
+	display: inline-block;
+	margin: 10px 0;
+	
+	/* size */
+	padding: 0 10px;
+	
+	/* text */
+	color: #eaeaea;
+	font-size: 12px;
+	line-height: 30px;
+	text-decoration: none;
+	white-space: nowrap;
+	}
+.button:hover {
+	/* appearance */
+	background-color: #6495ed;
+	-webkit-box-shadow: 0 0 3px #6495ed;
+	-moz-box-shadow: 0 0 3px #6495ed;
+	box-shadow: 0 0 3px #6495ed;
+	}
+	
+#buildTable {
+	margin-top: 20px;
+	}
+	
+#tablePlaceholder {
+	margin-top: 40px;
+	}
+
+.table_options {
+	/* appearance */
+	background-color: #252525;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.05) 20%,
+		rgba(255,255,255,0.0) 80%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(20%,rgba(255,255,255,0.05)),
+		color-stop(80%,rgba(255,255,255,0.0)));
+	border: 1px solid #000000;
+	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.75);
+	box-shadow: 0 5px 10px rgba(0,0,0,0.75);
+	overflow: hidden;
+	
+	/* size */
+	padding: 10px 0;
+	
+	}
+	h2 {
+		/* text */
+		color: #dadada;
+		font-size: 14px;
+		font-weight: bold;
+		text-align: center;
+		text-shadow: 0 -1px 1px #000000;
+		}
+	.table_options fieldset {
+		/* appearance */
+		border: none;
+		
+		/* size */
+		padding: 5px 0;
+		
+		/* text */
+		text-align: right;
+		}
+		.table_options label {
+			/* size */
+			padding: 0 10px 0 0;
+			
+			/* text */
+			color: #b2b2b2;
+			font-size: 12px;
+			text-shadow: 0 -1px 1px #000000;
+			
+			}
+		.table_options input,
+		.table_options input:focus {
+			/* appearance */
+			background-color: #1f1f1f;
+			border: 1px solid #000000;
+			-webkit-border-radius: 5px;
+			-moz-border-radius: 5px;
+			border-radius: 5px;
+			-webkit-box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset;
+			-moz-box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset;
+			box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset;
+			
+			/* size */
+			padding: 8px 5px;
+			width: 50px;
+			
+			/* text */
+			color: #fff;
+			}
+		.table_options input:focus {
+			outline: 1px solid #fff;
+			}
+			
+			
+			
+			
+/* Fancy Dark Table */	
+.fancyDarkTable .numeric {
+	/* text */
+	text-align: right;
+	}
+
+.fancyDarkTable td, .fancyDarkTable th {
+	border: 1px solid #000000;
+	padding: 5px;
+}
+
+.fancyDarkTable thead tr th {
+	padding: 10px 5px 10px 5px;
+	}
+
+.fancyDarkTable {
+	/*border-collapse: separate;*/
+	
+	/* text */
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	}
+
+.fancyDarkTable tbody tr td {
+	/* appearance */
+	background-color: #3f3f3f;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.0) 0%,
+		rgba(255,255,255,0.02) 100%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(0%,rgba(255,255,255,0.0)),
+		color-stop(100%,rgba(255,255,255,0.02)));
+	border-bottom-color: #2f2f2f;
+	border-right-color: #2f2f2f;
+
+	/* size */
+	padding: 10px 5px 30px 5px;
+
+	/* text */
+	color: #FFFFFF;
+	font-size: 11px;
+	font-weight: bold;
+	text-shadow: 0 -1px 1px #000000;
+	}
+
+.fancyDarkTable tbody tr.odd td {
+	/* appearance */
+	background-color: #464646;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.0) 0%,
+		rgba(255,255,255,0.02) 100%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(0%,rgba(255,255,255,0.0)),
+		color-stop(100%,rgba(255,255,255,0.02)));
+	border-right-color: #2f2f2f;
+	}
+
+.fancyDarkTable thead tr th,
+.fancyDarkTable tfoot tr td {
+	/* appearance */
+	background-color: #151515;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.05) 0%,
+		rgba(255,255,255,0.0) 100%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(0%,rgba(255,255,255,0.05)),
+		color-stop(100%,rgba(255,255,255,0.0)));
+		
+	/* text */
+	color: #ffffff;
+	font-size: 12px;
+	font-weight: bold;
+	text-shadow: 0 -1px 1px #000;
+	}
+	
+.fancyDarkTable .fht-head {
+	-webkit-box-shadow: 0 -1px 0 #3f3f3f;
+	-moz-box-shadow: 0 -1px 0 #3f3f3f;
+	box-shadow: 0 -1px 0 #3f3f3f;
+	z-index: 1;
+	position: relative;
+	}
\ No newline at end of file
diff --git a/demo/css/myTheme.css b/demo/css/myTheme.css
index 70abc6e..c46e839 100644
--- a/demo/css/myTheme.css
+++ b/demo/css/myTheme.css
@@ -1,6 +1,49 @@
 .divider {
 	margin: 20px 0;
 	}
+	
+.button {
+	/* appearance */
+	background-color: #3f3f3f;
+	background-image: -moz-linear-gradient(
+		top,
+		rgba(255,255,255,0.0) 0%,
+		rgba(255,255,255,0.1) 50%);
+	
+	background-image: -webkit-gradient(
+		linear, left top, left bottom,
+		color-stop(100%,rgba(255,255,255,0.0)),
+		color-stop(50%,rgba(255,255,255,0.1)));
+	border: 1px solid #000000;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	-webkit-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	-moz-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
+	cursor: pointer;
+	
+	/* position */
+	display: inline-block;
+	margin: 10px;
+	
+	/* size */
+	padding: 0 10px;
+	
+	/* text */
+	color: #eaeaea;
+	font-size: 12px;
+	line-height: 30px;
+	text-decoration: none;
+	white-space: nowrap;
+	}
+.button:hover {
+	/* appearance */
+	background-color: #6495ed;
+	-webkit-box-shadow: 0 0 3px #6495ed;
+	-moz-box-shadow: 0 0 3px #6495ed;
+	box-shadow: 0 0 3px #6495ed;
+	}
 
 .myTableWrapper {
 	width: 800px;
diff --git a/demo/demo.html b/demo/demo.html
new file mode 100644
index 0000000..0e7f0bc
--- /dev/null
+++ b/demo/demo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>FixedHeaderTable Demo</title>
+        <link href="../css/defaultTheme.css" rel="stylesheet" media="screen" />
+        <link href="css/960.css" rel="stylesheet" media="screen" />
+        <link href="css/demo.css" rel="stylesheet" media="screen" />
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+        <script src="../jquery.fixedheadertable.js"></script>
+        <script src="js/demo.js"></script>
+    </head>
+    <body>
+    	<div class="styles">
+    	
+    	</div>
+    	<div class="container_16 table_options">
+    		<div class="grid_3 prefix_1 alpha">
+    			<h2>Table Properties</h2>
+    			<fieldset>
+    				<label for="rows">rows</label>
+    				<input id="rows" type="text" value="" />
+    			</fieldset>
+    			<fieldset>
+    				<label for="columns">columns</label>
+    				<input id="columns" type="text" value="" />
+    			</fieldset>
+    		</div>
+    		
+    		<div class="grid_4">
+    			<h2>Table Appearance</h2>
+    			<fieldset>
+    				<label for="borderWidth">border-width</label>
+    				<input id="borderWidth" type="text" value="" placeholder="ex. 1px" />
+    			</fieldset>
+    			<fieldset>
+    				<label for="borderColor">border-color</label>
+    				<input id="borderColor" type="text" value="" placeholder="ex. #353535" />
+    			</fieldset>
+    		</div>
+    		
+    		<div class="grid_3">
+    			<h2>&nbsp;</h2>
+    			<fieldset>
+    				<label for="padding">padding</label>
+    				<input id="padding" type="text" value="" placeholder="ex. 5" />
+    			</fieldset>
+    		</div>
+    		
+    		<div class="grid_2 prefix_2 omega">
+    			<a id="buildTable" class="button" href="#">Build Table</a>
+    			<a id="runPlugin" class="button" href="#">Run Plugin</a>
+    		</div>
+    	</div>
+    
+    	<div class="container_12">
+    		<div id="tablePlaceholder" class="grid_12 alpha omega"></div>
+    	</div>
+    
+    </body>
+</html>
\ No newline at end of file
diff --git a/demo/demo.js b/demo/demo.js
index 44d37cb..6cc135a 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,9 +1,11 @@
 $(document).ready(function() {
-    $('.myTable01').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
+    $('.myTable01').fixedHeaderTable({ width: '600', height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false });
+    
+    $('.myTable01').fixedHeaderTable('show', 1000);
     
     $('.myTable02').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyDarkTable' });
     
-    $('.myTable03').fixedHeaderTable({ altClass: 'odd', themeClass: 'fancyDarkTable' });
+    $('.myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, themeClass: 'fancyDarkTable' });
     
 	$('a.makeTable').bind('click', function() {
 		
diff --git a/demo/images/bg.png b/demo/images/bg.png
new file mode 100644
index 0000000..2cf8af0
Binary files /dev/null and b/demo/images/bg.png differ
diff --git a/demo/js/demo.js b/demo/js/demo.js
new file mode 100644
index 0000000..0fff089
--- /dev/null
+++ b/demo/js/demo.js
@@ -0,0 +1,73 @@
+$(document).ready(function() {
+	$('#buildTable').bind('click', function(e) {
+		e.preventDefault();
+		
+		$('#tablePlaceholder').empty()
+			.buildTable();
+	});
+	
+	$('#runPlugin').bind('click', function(e) {
+		e.preventDefault();
+		
+		$('#tablePlaceholder table').fixedHeaderTable({ height: '400', altClass: 'odd', themeClass: 'fancyDarkTable' });
+	});
+});
+
+$.fn.extend({
+	buildTable: function() {
+		var defaults = {
+			width: '100%',
+			height: 400,
+			rows: 100,
+			columns: 5,
+			borderWidth: 1,
+			borderColor: '#000000',
+			padding: 5
+		};
+		
+		var $self 		= $(this),
+			self  		= this,
+			rows  		= $('#rows').val(),
+			columns 	= $('#columns').val(),
+			borderWidth = $('#borderWidth').val(),
+			borderColor = $('#borderColor').val(),
+			padding 	= $('#padding').val(),
+			$thead,
+			$tbody,
+			$currentRow,
+			$styles,
+			options		= {};
+		
+		if ( padding != '' ) {
+			options.padding = padding;
+		}
+		
+		options = $.extend({}, defaults, options);
+			
+		$self.append('<table><thead></thead><tbody></tbody></table>');
+		
+		$thead = $self.find('thead');
+		$thead.append('<tr></tr>');
+		for ( var column = 1; column <= columns; column++ ) {
+			$thead.find('tr')
+				.append('<th>Column '+column+'</th>');
+		}
+		
+		$tbody = $self.find('tbody');
+		for ( var row = 1; row <= rows; row++ ) {
+			$currentRow = $('<tr></tr>').appendTo($tbody);
+			
+			for ( var column = 1; column <= columns; column++ ) {
+				$currentRow.append('<td>Column '+column+'</td>');
+			}
+		}
+		
+/*
+		var paddingStyle = "padding: " + options.padding + "px !important;";
+		
+		$styles = $('<style></style>').appendTo('.styles');
+		
+		$styles.html('th, td { '+paddingStyle+' }');
+*/
+	}
+});
\ No newline at end of file
diff --git a/demo/test.html b/demo/test.html
index 6cc90e3..d3a203f 100644
--- a/demo/test.html
+++ b/demo/test.html
@@ -6,19 +6,11 @@
         <link href="../css/defaultTheme.css" rel="stylesheet" media="screen" />
         <link href="css/myTheme.css" rel="stylesheet" media="screen" />
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+
         <script src="../jquery.fixedheadertable.js"></script>
         <script src="demo.js"></script>
     </head>
     <body>
-        <div>
-        	<ul>
-        	<li><input type="text" id="width" value="" placeholder="width in px" /></li>
-        	<li><input type="text" id="height" value="" placeholder="height in px" /></li>
-        	<li><input type="text" id="border" value="" placeholder="border in px" /></li>
-        	<li><input type="text" id="color" value="" placeholder="color (#FFFFFF)" /></li>
-        	<li><a href="#" class="makeTable">Resize Table</a></li>
-        	</ul>
-        </div>
         <table class="myTable01" cellpadding="0" cellspacing="0">
             <thead>
                 <tr>
@@ -30,16 +22,6 @@
                     <th>Bounce Rate</th>
                 </tr>
             </thead>
-            <tfoot>
-                <tr>
-                    <td>Browser</td>
-                    <td>Visits</td>
-                    <td>Pages/Visit</td>
-                    <td>Avg. Time on Site</td>
-                    <td>% New Visits</td>
-                    <td>Bounce Rate</td>
-                </tr>
-            </tfoot>
             <tbody>
                 <tr>
                     <td>Firefox</td>
@@ -187,12 +169,12 @@
             </thead>
             <tfoot>
                 <tr>
-                    <td>Browser</td>
-                    <td>Visits</td>
-                    <td>Pages/Visit</td>
-                    <td>Avg. Time on Site</td>
-                    <td>% New Visits</td>
-                    <td>Bounce Rate</td>
+                    <td>This is a unique footer</td>
+                    <td>1</td>
+                    <td>2</td>
+                    <td>3</td>
+                    <td>4</td>
+                    <td>5</td>
                 </tr>
             </tfoot>
             <tbody>
@@ -375,7 +357,7 @@
 	            </thead>
 	            <tfoot>
 	                <tr>
-	                    <td colspan="6"></td>
+	                    <td colspan="6"><a class="button pagination" href="#">Prev</a><a class="button pagination" href="#">Next</a></td>
 	                </tr>
 	            </tfoot>
 	            <tbody>