diff --git a/app.js b/app.js
index c496138..17d6896 100755
--- a/app.js
+++ b/app.js
@@ -2,6 +2,7 @@ var express = require('express');
 var app = express();
 var crontab = require("./crontab");
 var restore = require("./restore");
+var moment = require('moment');
 
 var path = require('path');
 var mime = require('mime');
@@ -38,7 +39,8 @@ app.get(routes.root, function(req, res) {
 			routes : JSON.stringify(routes),
 			crontabs : JSON.stringify(docs),
 			backups : crontab.get_backup_names(),
-			env : crontab.get_env()
+			env : crontab.get_env(),
+      moment: moment
 		});
 	});
 })
diff --git a/package.json b/package.json
index 58136b7..bcc8b7b 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crontab-ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Easy and safe way to manage your crontab file",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,8 @@
     "body-parser": "latest",
     "mime": "latest",
     "cron-parser": "latest",
-    "connect-busboy": "latest"
+    "connect-busboy": "latest",
+    "moment": "latest"
   },
   "engines": {
     "node": "latest"
diff --git a/views/index.ejs b/views/index.ejs
index 6073ac7..902306c 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -4,7 +4,9 @@
 <script src="jquery.js"></script>
 <script src="script.js"></script>
 <script src="bootstrap.min.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/datatables.min.js"></script>
 <link rel="stylesheet" href="bootstrap.min.css" />
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>
 <script type="text/javascript">
 	var crontabs = [];
 	var routes = [];
@@ -37,15 +39,18 @@
 	<br/>
 	<br/>
 
-	<table class="table">
+	<table class="table table-striped" id="main_table">
+		<thead>
 	<tr>
-		<th>Id</th>
-		<th></th>
+		<th>#</th>
+		<th>Name</th>
 		<th>Job</th>
 		<th>Time</th>
 		<th>Last Modified</th>
 		<th></th>
 	</tr>
+</thead>
+<tbody>
 	<% var index = 1 %>
 	<% JSON.parse(crontabs).forEach(function(crontab){ %>
 		<!-- color based on crontab state -->
@@ -57,17 +62,19 @@
 				<td>
 					<%= index %>.
 					<% index += 1 %>
-					<%= crontab._id %>
 				</td>
 
 				<td>
 					<% if (crontab.name) { %>
-					<a class="btn" data-toggle="tooltip" data-placement="right" title="<%= crontab.name %>"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> </a>
+						<%= crontab.name %>
+						<a class="btn" data-toggle="tooltip" data-placement="right" title="<%= crontab._id %>"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> </a>
+						<% } else { %>
+							<%= crontab._id %>
 					<% } %>
 				</td>
 				<td><%= crontab.command %></td>
 				<td><span style="cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="<%= crontab.next %>"><%= crontab.schedule %></span></td>
-				<td style="width:20%"><%= crontab.timestamp %></td>
+				<td style="width:20%" title="<%= crontab.timestamp %>"><%= moment(new Date(crontab.timestamp)).fromNow() %></td>
 				<td>
 
 		<!-- controls based on crontab state -->
@@ -87,9 +94,24 @@
 	<% }); %>
 
 
-
+</tbody>
 	</table>
 </div>
 <% include popup.ejs %>
+<script>
+   jQuery(function($) {
+   	$('#main_table').DataTable({
+   		order: [1, 'asc'],
+   		columns: [
+   			{orderable: false},
+   			null,
+   			null,
+   			null,
+   			{orderable: false},
+   			{orderable: false}
+   		]
+  	});
+   });
+ </script>
 </body>
 </html>