diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade
index ab3e4936..a792fd69 100755
--- a/app/views/includes/foot.jade
+++ b/app/views/includes/foot.jade
@@ -12,6 +12,7 @@ script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
 script(type='text/javascript', src='/lib/angular-route/angular-route.js')
 script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
 script(type='text/javascript', src='/lib/angular-qrcode/qrcode.js')
+script(type='text/javascript', src='/lib/angular-animate/angular-animate.js')
 
 //Angular UI
 script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.js')
diff --git a/app/views/includes/head.jade b/app/views/includes/head.jade
index cdec0aee..b33ff2be 100755
--- a/app/views/includes/head.jade
+++ b/app/views/includes/head.jade
@@ -14,5 +14,4 @@ head
   link(rel='stylesheet', href='/css/common.css')
 
   script(src='/socket.io/socket.io.js')
-  script(src='/lib/jquery/jquery.js')
 
diff --git a/app/views/sockets/main.js b/app/views/sockets/main.js
index b6d9db41..9f7ce409 100644
--- a/app/views/sockets/main.js
+++ b/app/views/sockets/main.js
@@ -2,11 +2,14 @@
 
 var Transaction = require('../../models/Transaction');
 
+// server-side socket behaviour
 module.exports = function(app, io) {
   io.set('log level', 1); // reduce logging
   io.sockets.on('connection', function(socket) {
     Transaction.findOne(function(err, tx) {
-      socket.emit('tx', tx);
+      setTimeout(function() {
+        socket.emit('tx', tx);
+      }, 5000);
     });
   });
 };
diff --git a/bower.json b/bower.json
index 60f6edbd..5b4d4998 100644
--- a/bower.json
+++ b/bower.json
@@ -10,6 +10,8 @@
       "bootstrap": "3.0.3",
       "angular-bootstrap": "0.9.0",
       "angular-ui-utils": "0.1.0",
-      "angular-qrcode": "latest"
+      "angular-qrcode": "latest",
+      "angular-animate": "latest"
+
     }
 }
diff --git a/public/css/common.css b/public/css/common.css
index 396601a7..70a607b2 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -48,3 +48,14 @@ body {
   font-size: 10px;
 }
 
+
+
+/* Animations */
+.fader.ng-enter {
+  transition: opacity 1s;
+  opacity: 0;
+}
+
+.fader.ng-enter-active {
+  opacity: 1;
+}
diff --git a/public/js/app.js b/public/js/app.js
index cfc1f8cf..3d1b47e8 100755
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,9 +1,10 @@
 'use strict';
 
-angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
+var app = angular.module('mystery', ['ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
 
 angular.module('mystery.system', []);
 angular.module('mystery.index', []);
 angular.module('mystery.blocks', []);
 angular.module('mystery.transactions', []);
 angular.module('mystery.address', []);
+
diff --git a/public/js/controllers/index.js b/public/js/controllers/index.js
index 36811010..3d30446f 100755
--- a/public/js/controllers/index.js
+++ b/public/js/controllers/index.js
@@ -1,16 +1,14 @@
 'use strict';
 
-angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'Index', function($scope, Global, Index) {
+angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'socket', function($scope, Global, socket) {
   $scope.global = Global;
-  $scope.index = Index;
-}]);
-
-$(document).ready(function() {
-  var socket = io.connect('http://localhost');
   socket.on('tx', function(data) {
     var tx = data;
-    console.log('Transaction received! '+tx.txid);
+    console.log('Transaction received! ' + tx.txid);
+    $scope.txs.push(tx.txid);
   });
 
-});
+  $scope.txs = [];
+
+}]);
 
diff --git a/public/js/services/index.js b/public/js/services/index.js
index 08cb3ffa..bcea15c4 100644
--- a/public/js/services/index.js
+++ b/public/js/services/index.js
@@ -1,5 +1,26 @@
 'use strict';
 
-angular.module('mystery.index').factory('Index', ['$resource', function($resource) {
-  return $resource;
-}]);
+app.factory('socket', function($rootScope) {
+  var socket = io.connect();
+  return {
+    on: function(eventName, callback) {
+      socket.on(eventName, function() {
+        var args = arguments;
+        $rootScope.$apply(function() {
+          callback.apply(socket, args);
+        });
+      });
+    },
+    emit: function(eventName, data, callback) {
+      socket.emit(eventName, data, function() {
+        var args = arguments;
+        $rootScope.$apply(function() {
+          if (callback) {
+            callback.apply(socket, args);
+          }
+        });
+      });
+    }
+  };
+});
+
diff --git a/public/views/index.html b/public/views/index.html
index 469172a2..09d5d072 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -1,8 +1,9 @@
-<section data-ng-controller="IndexController" data-ng-init="last_blocks()">
-  <div class="jumbotron">
-    <h1>Hello, BitPay!</h1>
-    <p>Start here for blocks information</p>
-    <p><a href="/#!/blocks" class="btn btn-primary btn-lg">List all blocks</a></p>
+<section data-ng-controller="IndexController" data-ng-init="">
+  <div class="">
+    <h3>New transactions</h3>
+    <div class="alert alert-info fader" ng-repeat='tx in txs'>
+      {{tx}}
+    </div>
   </div>
 </section>
 
diff --git a/server.js b/server.js
index ba879b4b..f1fc7183 100644
--- a/server.js
+++ b/server.js
@@ -63,8 +63,9 @@ require('./app/views/sockets/main.js')(app,io);
 
 //Start the app by listening on <port>
 var port = process.env.PORT || config.port;
-server.listen(port);
-console.log('Express app started on port ' + port);
+server.listen(port, function(){
+    console.log('Express server listening on port %d in %s mode', server.address().port, process.env.NODE_ENV);
+});
 
 //expose app
 exports = module.exports = app;