diff --git a/templates/API_Doc/api_doc_index.html b/templates/API_Doc/api_doc_index.html
new file mode 100644
index 0000000..6e88ea7
--- /dev/null
+++ b/templates/API_Doc/api_doc_index.html
@@ -0,0 +1,93 @@
+<html>
+    <head>
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
+        <!--Import jQuery before materialize.js-->
+      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
+
+        <!--Let browser know website is optimized for mobile-->
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        <title>
+            SE-Hub API Docs
+        </title>
+        <style>
+
+
+            div.mapping {
+                margin: 20px 20px;
+            }
+
+            ul.methods:before { content: "Methods: "; }
+            ul.methods li {
+                display: inline;
+                list-style: none;
+            }
+            ul.methods li:after { content: ","; }
+            ul.methods li:last-child:after { content: ""; }
+
+            ul.arguments:before { content: "Arguments: "; }
+            ul.arguments li {
+                display: inline;
+                list-style: none;
+            }
+            ul.arguments .argument { font-style:italic }
+            ul.arguments .default:not(:empty):before { content: "("; }
+            ul.arguments .default:not(:empty):after { content: ")"; }
+            ul.arguments li:after { content: ","; }
+            ul.arguments li:last-child:after { content: ""; }
+
+            .docstring:before { content: "Description: "; }
+        </style>
+    </head>
+    <body>
+    <div class="navbar-fixed">
+    <nav>
+      <div class="nav-wrapper">
+        <a href="#!" class="brand-logo center">SE-Hub API</a>
+      </div>
+    </nav>
+  </div>
+
+        <h1>
+            SE-Hub Docs Index
+        </h1>
+
+
+    <div>
+      <ul class="collection">
+        <li class="collection-item dismissable"><div>Users Related API<a href="/api/users/help" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
+        <li class="collection-item dismissable"><div>Campuses Related API<a href="/api/campuses/help" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
+        <li class="collection-item dismissable"><div>Courses Related API<a href="/api/courses/help" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
+        <li class="collection-item dismissable"><div>Validation Related API<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
+      </ul>
+    </div>
+
+     <footer class="page-footer">
+          <div class="container">
+            <div class="row">
+              <div class="col l6 s12">
+                <h5 class="white-text">Footer Content</h5>
+                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
+              </div>
+              <div class="col l4 offset-l2 s12">
+                <h5 class="white-text">Links</h5>
+                <ul>
+                  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
+                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
+                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
+                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="footer-copyright">
+            <div class="container">
+            SE-Hub (c) 2015 Niptop Team
+            <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
+            </div>
+          </div>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
