diff --git a/var/www/static/js/indexjavascript.js b/var/www/static/js/indexjavascript.js
index 3a8a12fb..1622f978 100644
--- a/var/www/static/js/indexjavascript.js
+++ b/var/www/static/js/indexjavascript.js
@@ -179,7 +179,7 @@ $(document).ready(function () {
     labels: curves_labels,
     drawPoints: false,
     showRoller: true,
-    rollPeriod: 10,
+    rollPeriod: 30,
     labelsKMB: true,
     logscale: true,
     //drawGapEdgePoints: true,
@@ -195,7 +195,7 @@ $(document).ready(function () {
     labels: curves_labels2,
     drawPoints: false,
     showRoller: true,
-    rollPeriod: 10,
+    rollPeriod: 30,
     labelsKMB: true,
     logscale: true,
     //drawGapEdgePoints: true,
@@ -244,6 +244,9 @@ $(document).ready(function () {
                     }
                     g.updateOptions( { 'file': data } );
                     g2.updateOptions( { 'file': data2 } );
+                    
+                    
+                   // TagCanvas.Reload('myCanvas');
 
                 }, interval);
             }
@@ -251,4 +254,30 @@ $(document).ready(function () {
     };
 
     refresh();
+
+     var ultag = document.getElementById("ultag");
+     for (i=0;i<curves_labels.length;i++){
+         var li = document.createElement('li');
+         var a = document.createElement('a');
+         a.innerHTML = curves_labels[i];
+         a.style.fontSize = glob_tabvar.row1[i][1];
+         li.appendChild(a);
+         ultag.appendChild(li);
+    }
+
+
+    try {
+      var options = {
+      weight:true,
+      weightMode:"both",
+      noMouse:true,
+      textColour: '#2E9AFE'
+      }
+      TagCanvas.Start('myCanvas','',options);
+      TagCanvas.SetSpeed('myCanvas', [0.05, -0.15]);
+    } catch(e) {
+      // something went wrong, hide the canvas container
+      document.getElementById('myCanvasContainer').style.display = 'none';
+    }
+
 });
diff --git a/var/www/templates/index.html b/var/www/templates/index.html
index 7b05e1af..f24662b4 100644
--- a/var/www/templates/index.html
+++ b/var/www/templates/index.html
@@ -16,6 +16,7 @@
   <!-- JS -->
   <script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
   <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/jquery.tagcanvas.js') }}"></script>
   <script src="{{ url_for('static', filename='js/jquery-1.4.2.js') }}"></script>
   <script>
       function update_values() {
@@ -62,6 +63,14 @@
               </div>
               <!-- /.sidebar-collapse -->
               <div class="table-responsive", id="queueing" style="margin-top:40px;"></div>
+     
+	      <div class="table-responsive" id="myCanvasContainer" style="margin-top:40px;">
+	         <canvas id="myCanvas">
+		      <p>Anything in here will be replaced on browsers that support the canvas element</p>
+		 <ul id="ultag">
+		 </ul>
+		 </canvas>
+	      </div>
           </div>
           <!-- /.navbar-static-side -->
       </nav>
@@ -110,29 +119,26 @@
             </div>
         </div>
         <div class="panel-body">
-                <div class="table-responsive", id="logger">
                     <div class="row">
-                    <div class="col-lg-6">
-                    <table class="table table-bordered table-hover table-striped" id="table_log">
-                        <thead>
-                        <tr>
-                        <th>Time</th>
-                        <th>Channel</th>
-                        <th>Level</th>
-                        <th>Script Name</th>
-                        <th>Source</th>
-                        <th>Date</th>
-                        <th>Paste name</th>
-                        <th>Message</th>
-                        </tr>
-                        </thead>
-                        <tbody id="tab_body">
-                        </tbody>
-                    <table>
-                </div>
-                </div>
-        </div>
-        </div>
+			    <div class="col-lg-12">
+				    <table class="table table-bordered table-hover table-striped" id="table_log">
+					<thead>
+						<tr>
+						<th>Time</th>
+						<th>Channel</th>
+						<th>Level</th>
+						<th>Script Name</th>
+						<th>Source</th>
+						<th>Date</th>
+						<th>Paste name</th>
+						<th>Message</th>
+						</tr>
+					</thead>
+					<tbody id="tab_body">
+					</tbody>
+			            </table>
+			    </div>
+                   </div>
         </div>
             <!-- /.row -->
         </div>