diff --git a/views/index.tpl b/views/index.tpl
index e657e59..ad6177c 100644
--- a/views/index.tpl
+++ b/views/index.tpl
@@ -1,28 +1,38 @@
 <html>
-<head>
-	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/datatables.css"/>
+  <head>
 
-	<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/datatables.js"></script>
-	<script>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/jq-3.2.1/dt-1.10.16/r-2.2.0/datatables.min.css"/>
+ 
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.2.1/jq-3.2.1/dt-1.10.16/r-2.2.0/datatables.min.js"></script>
+        <script>
+  
 	$(document).ready(function()
 	{
 		$('#table').DataTable({
-			"order": [[{{sortby}}, 'desc']],
-			"paging": false
+			order: [[{{sortby}}, 'desc']],
+			paging: false,
+			responsive: true,
+
 		});
 	});
 	</script>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <div class="container">
 <nav class="navbar navbar-default">
-     <div class="container-fluid">
+     <div class="container">
           <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collbar" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
 	       <a class="navbar-brand" href="#">HNLearn</a>
 	  </div>
 
-	  <div class="collapse navbar-collapse">
+	  <div class="collapse navbar-collapse" id="collbar">
 	       <ul class="nav navbar-nav">
 	       	   <li><a href="/">Latest > 0</a></li>
 		   <li><a href="/?all=true">Latest with < 0</a></li>
@@ -32,21 +42,21 @@
 	  </div>
      </div>
 </nav>
-<table id="table" class="table">
+<table id="table" class="table dt-responsive">
         <thead>
 	        <tr>
-		  <th>Title</th>
-		  <th>Date</th>
-		  <th>Score</th>
-		  <th>Up/Down</th>
-		  <th>Comments</th>
+		  <th class="all">Title</th>
+		  <th class="desktop">Date</th>
+		  <th class="desktop">Score</th>
+		  <th class="desktop">Up/Down</th>
+		  <th class="desktop">Comments</th>
 	        </tr>
 	</thead>
 	<tbody>
 %for x in items:
 	<tr>
 	  <td>
-	    <a href="{{x.url}}">{{x.name}}</a>
+	        <a href="{{x.url}}">{{x.name}}</a>
 	  </td>
 	  <td>{{x.date.strftime("%Y-%m-%d %H:%M")}}</td>
 	  <td>{{"{0:.4g}".format(x.rating)}}</td>
