diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7c1c539
--- /dev/null
+++ b/README.md
@@ -0,0 +1,18 @@
+NGINX FancyIndex Theme
+===
+
+A prettier theme for nginx' fancyindex module. Further details about this excellent
+module can be found at the dev's [github page](https://github.com/aperezdc/ngx-fancyindex).
+
+#####Usage:
+ - Compile nginx with the fancyindex module.
+ - Include the contents of 'fancyindex.conf' in your location directive of your nginx conf.
+ - copy the remaining items in your web root under 'fancyindex'.
+  - header.html
+  - footer.html
+  - css\fancyindex.css
+  - fonts\\*
+  - images\breadcrumb.png
+ - Restart your nginx server.
+
+![Image1](https://raw.githubusercontent.com/TheInsomniac/Nginx-Fancyindex-Theme/master/images/fancyindex.png)
\ No newline at end of file
diff --git a/css/fancyindex.css b/css/fancyindex.css
new file mode 100644
index 0000000..0893d17
--- /dev/null
+++ b/css/fancyindex.css
@@ -0,0 +1,180 @@
+@font-face {
+  font-family: 'ProximaNova';
+  src: url('../fonts/298CCB_2_0.eot');
+  src: url('../fonts/298CCB_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/298CCB_2_0.woff') format('woff'),url('../fonts/298CCB_2_0.ttf') format('truetype')
+}
+
+@font-face {
+  font-family: 'ProximaNova';
+  src: url('../fonts/298CCB_0_0.eot');
+  src: url('../fonts/298CCB_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/298CCB_0_0.woff') format('woff'),url('../fonts/298CCB_0_0.ttf') format('truetype');
+  font-weight: 300
+}
+
+@font-face {
+  font-family: 'ProximaNova';
+  src: url('../fonts/298CCB_1_0.eot');
+  src: url('../fonts/298CCB_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/298CCB_1_0.woff') format('woff'),url('../fonts/298CCB_1_0.ttf') format('truetype');
+  font-weight: 500
+}
+
+@font-face {
+  font-family: 'ProximaNova';
+  src: url('../fonts/298CCB_3_0.eot');
+  src: url('../fonts/298CCB_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/298CCB_3_0.woff') format('woff'),url('../fonts/298CCB_3_0.ttf') format('truetype');
+  font-weight: bold
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+html, body {
+  height: 100%;
+  font-size: 100%;
+  background-color: #f7f7f7;
+  font-family: "ProximaNova";
+}
+
+.box {
+  border: 1px solid #d9d6d6;
+  width: 100%;
+}
+
+.box .box-header {
+  font-weight: 500;
+  font-style: normal;
+  background: #f7f7f7;
+  background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f7f7f7));
+  background: -webkit-linear-gradient(top,#fff,#f7f7f7);
+  background: linear-gradient(top,#fff,#f7f7f7);
+  text-transform: uppercase;
+  height: 45px;
+  font-size: 16px;
+  border-bottom: 1px solid #d9d6d6;
+}
+
+.box .box-header .box-header-content {
+  padding: 12px 20px;
+  font-weight: 700;
+  position: relative;
+}
+
+.box .box-content {
+  padding: 20px;
+  background: #fff;
+  width: 100%;
+}
+
+.box.box-breadcrumbs .box-header {
+  height: auto;
+}
+
+.box.box-breadcrumbs .box-header-content {
+  padding: 0;
+}
+
+.breadcrumbs a {
+  position: relative;
+  display: inline-block;
+  padding: 8px 18px 8px 10px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #a3a9ab;
+  text-shadow: 0 1px 0 #FFF;
+  -webkit-transition: 300ms color;
+  transition: 300ms color;
+}
+
+.breadcrumbs a:after {
+  display: block;
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  background: url(../images/breadcrumb.png) no-repeat center right;
+}
+
+.breadcrumbs a:hover {
+  color: #50b1ff;
+  text-decoration: none;
+  background: none;
+}
+
+tbody tr:first-child {
+  display: none;
+}
+
+tr.e {
+  background:#f7f7f7;
+}
+
+th,td {
+  padding:0.1em 0.5em;
+}
+
+th {
+  text-align:left;
+  font-weight:500;
+  background:#eee;
+  border-bottom: 1px solid #d9d6d6;
+}
+
+th > a {
+  color: #333;
+}
+
+h1 {
+  font-size: 1.5rem;
+  color: #333;
+  display: none;
+}
+
+#list {
+  border:1px solid #d9d6d6;
+  width:100%;
+}
+
+a {
+  color:#777;
+  text-decoration: none;
+}
+
+a:hover {
+  color:#333;
+  background: #d7d7d7;
+}
+
+@media screen and (max-width: 1024px) {
+  tr > td:nth-child(3) {
+    display: none;
+  }
+  thead > tr > th:nth-child(3) {
+    display: none;
+  }
+  .box .box-content {
+    padding-top: 20px;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/fancyindex.conf b/fancyindex.conf
new file mode 100644
index 0000000..9f9225c
--- /dev/null
+++ b/fancyindex.conf
@@ -0,0 +1,8 @@
+# Include in location directive
+  fancyindex on;
+  fancyindex_localtime on; #on for local time zone. off for GMT
+  fancyindex_exact_size off; #off for human-readable. on for exact size in bytes
+  fancyindex_header "/fancyindex/header.html";
+  fancyindex_footer "/fancyindex/footer.html";
+  fancyindex_ignore "fancyindex"; #ignore this directory when showing list
+# end include
diff --git a/fonts/298CCB_0_0.eot b/fonts/298CCB_0_0.eot
new file mode 100644
index 0000000..3fdc479
Binary files /dev/null and b/fonts/298CCB_0_0.eot differ
diff --git a/fonts/298CCB_0_0.ttf b/fonts/298CCB_0_0.ttf
new file mode 100644
index 0000000..a68a70e
Binary files /dev/null and b/fonts/298CCB_0_0.ttf differ
diff --git a/fonts/298CCB_0_0.woff b/fonts/298CCB_0_0.woff
new file mode 100644
index 0000000..36de6b2
Binary files /dev/null and b/fonts/298CCB_0_0.woff differ
diff --git a/fonts/298CCB_1_0.eot b/fonts/298CCB_1_0.eot
new file mode 100644
index 0000000..9060d6f
Binary files /dev/null and b/fonts/298CCB_1_0.eot differ
diff --git a/fonts/298CCB_1_0.ttf b/fonts/298CCB_1_0.ttf
new file mode 100644
index 0000000..e945bf9
Binary files /dev/null and b/fonts/298CCB_1_0.ttf differ
diff --git a/fonts/298CCB_1_0.woff b/fonts/298CCB_1_0.woff
new file mode 100644
index 0000000..46b74b6
Binary files /dev/null and b/fonts/298CCB_1_0.woff differ
diff --git a/fonts/298CCB_2_0.eot b/fonts/298CCB_2_0.eot
new file mode 100644
index 0000000..c4ee769
Binary files /dev/null and b/fonts/298CCB_2_0.eot differ
diff --git a/fonts/298CCB_2_0.ttf b/fonts/298CCB_2_0.ttf
new file mode 100644
index 0000000..5741a34
Binary files /dev/null and b/fonts/298CCB_2_0.ttf differ
diff --git a/fonts/298CCB_2_0.woff b/fonts/298CCB_2_0.woff
new file mode 100644
index 0000000..6c0b852
Binary files /dev/null and b/fonts/298CCB_2_0.woff differ
diff --git a/fonts/298CCB_3_0.eot b/fonts/298CCB_3_0.eot
new file mode 100644
index 0000000..4204823
Binary files /dev/null and b/fonts/298CCB_3_0.eot differ
diff --git a/fonts/298CCB_3_0.ttf b/fonts/298CCB_3_0.ttf
new file mode 100644
index 0000000..17cb8b4
Binary files /dev/null and b/fonts/298CCB_3_0.ttf differ
diff --git a/fonts/298CCB_3_0.woff b/fonts/298CCB_3_0.woff
new file mode 100644
index 0000000..7c41154
Binary files /dev/null and b/fonts/298CCB_3_0.woff differ
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..62b764f
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,19 @@
+
+</div>
+</div>
+<script>
+  var loc = document.location.pathname;
+  var segments = loc.split('/');
+  var breadcrumbs = '';
+  var currentPath = '/';
+  var domain = document.domain;
+  for (var i=0; i<segments.length; i++) {
+          if (segments[i] != '') {
+                  currentPath += segments[i] + '/';
+                  breadcrumbs += '<a href="' +  currentPath + '">' + unescape(segments[i]) + '<\/a>';
+          }
+  }
+  document.getElementById('breadcrumbs').innerHTML = breadcrumbs;
+</script>
+</body>
+</html>
diff --git a/header.html b/header.html
new file mode 100644
index 0000000..765da23
--- /dev/null
+++ b/header.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+  <meta name="viewport" content="width=device-width"/>
+  <title>Files...</title>
+  <link rel="stylesheet" href="/fancyindex/css/fancyindex.css">
+  <script>
+    var path = location.pathname;
+    document.title = path;
+  </script>
+</head>
+<body>
+<div class="box box-breadcrumbs">
+    <div class="box-header">
+      <div class="box-header-content">
+        <div id="breadcrumbs" class="breadcrumbs">
+          <a href="#"></a>
+        </div>
+      </div>
+    </div>
+    <div class="box-content clearfix">
+      <h1>Index of: 
diff --git a/images/breadcrumb.png b/images/breadcrumb.png
new file mode 100644
index 0000000..710a1b8
Binary files /dev/null and b/images/breadcrumb.png differ
diff --git a/images/fancyindex.png b/images/fancyindex.png
new file mode 100644
index 0000000..56e308c
Binary files /dev/null and b/images/fancyindex.png differ