diff --git a/bower.json b/bower.json
index 6ece352..cf4eb86 100644
--- a/bower.json
+++ b/bower.json
@@ -23,7 +23,8 @@
     "angular-moment": "~0.10.3",
     "lodash": "3.10.1",
     "angular-filter": "~0.5.8",
-    "angular-deckgrid": "~0.5.0"
+    "angular-deckgrid": "~0.5.0",
+    "angular-timeline": "~1.6.2"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.2"
diff --git a/src/app/components/noosfero-activities/activities.html b/src/app/components/noosfero-activities/activities.html
index 1e80cf6..ce9e385 100644
--- a/src/app/components/noosfero-activities/activities.html
+++ b/src/app/components/noosfero-activities/activities.html
@@ -1,5 +1,6 @@
-<ul class="timeline">
-  <li ng-class-even="'timeline-inverted'" ng-repeat="activity in activities | orderBy: 'created_at':true">
+<timeline>
+  <timeline-event ng-repeat="activity in activities | orderBy: 'created_at':true" 
+      when-visible="animateElementIn" when-not-visible="animateElementOut">
     <noosfero-activity activity="activity"></noosfero-activity>
-  </li>
-</ul>
+  </timeline-event>
+</timeline>
diff --git a/src/app/components/noosfero-activities/activities.scss b/src/app/components/noosfero-activities/activities.scss
index f0348a6..88982c9 100644
--- a/src/app/components/noosfero-activities/activities.scss
+++ b/src/app/components/noosfero-activities/activities.scss
@@ -1,190 +1,3 @@
-//http://bootsnipp.com/snippets/featured/timeline-responsive
-.timeline {
-  list-style: none;
-  padding: 20px 0 20px;
-  position: relative;
-
-  &:before {
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    content: " ";
-    width: 3px;
-    background-color: #eeeeee;
-    left: 50%;
-    margin-left: -1.5px;
-  }
-
-  > li {
-    margin-bottom: 20px;
-    position: relative;
-
-    &:before,
-    &:after {
-      content: " ";
-      display: table;
-    }
-
-    &:after {
-      clear: both;
-    }
-
-    &:before, &:after {
-      content: " ";
-      display: table;
-    }
-
-    &:after {
-      clear: both;
-    }
-
-    .timeline-panel {
-      width: 46%;
-      float: left;
-      border: 1px solid #d4d4d4;
-      border-radius: 2px;
-      padding: 20px;
-      position: relative;
-      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-    }
-
-    .timeline-panel:before {
-      position: absolute;
-      top: 26px;
-      right: -15px;
-      display: inline-block;
-      border-top: 15px solid transparent;
-      border-left: 15px solid #ccc;
-      border-right: 0 solid #ccc;
-      border-bottom: 15px solid transparent;
-      content: " ";
-    }
-
-    .timeline-panel:after {
-      position: absolute;
-      top: 27px;
-      right: -14px;
-      display: inline-block;
-      border-top: 14px solid transparent;
-      border-left: 14px solid #fff;
-      border-right: 0 solid #fff;
-      border-bottom: 14px solid transparent;
-      content: " ";
-    }
-
-    .timeline-badge {
-      color: #fff;
-      width: 50px;
-      height: 50px;
-      line-height: 50px;
-      font-size: 1.4em;
-      text-align: center;
-      position: absolute;
-      top: 16px;
-      left: 50%;
-      margin-left: -25px;
-      background-color: #999999;
-      z-index: 100;
-      border-top-right-radius: 50%;
-      border-top-left-radius: 50%;
-      border-bottom-right-radius: 50%;
-      border-bottom-left-radius: 50%;
-    }
-
-    &.timeline-inverted .timeline-panel {
-      float: right;
-    }
-
-    &.timeline-inverted .timeline-panel:before {
-      border-left-width: 0;
-      border-right-width: 15px;
-      left: -15px;
-      right: auto;
-    }
-
-    &.timeline-inverted .timeline-panel:after {
-      border-left-width: 0;
-      border-right-width: 14px;
-      left: -14px;
-      right: auto;
-    }
-  }
-
-  .timeline-badge.primary {
-    background-color: #2e6da4;
-  }
-
-  .timeline-badge.success {
-    background-color: #3f903f;
-  }
-
-  .timeline-badge.warning {
-    background-color: #f0ad4e;
-  }
-
-  .timeline-badge.danger {
-    background-color: #d9534f;
-  }
-
-  .timeline-badge.info {
-    background-color: #5bc0de;
-  }
-
-  .timeline-title {
-    margin-top: 0;
-    color: inherit;
-  }
-
-  .timeline-body > p,
-  .timeline-body > ul {
-    margin-bottom: 0;
-  }
-
-  .timeline-body > p + p {
-    margin-top: 5px;
-  }
-  
-  @media (max-width: 767px) {
-
-    &:before {
-        left: 40px;
-    }
-
-    > li {
-      .timeline-panel {
-          width: calc(100% - 90px);
-          width: -moz-calc(100% - 90px);
-          width: -webkit-calc(100% - 90px);
-      }
-
-      .timeline-badge {
-          left: 15px;
-          margin-left: 0;
-          top: 16px;
-      }
-
-      .timeline-panel {
-          float: right;
-      }
-
-      .timeline-panel:before {
-              border-left-width: 0;
-              border-right-width: 15px;
-              left: -15px;
-              right: auto;
-      }
-
-      .timeline-panel:after {
-              border-left-width: 0;
-              border-right-width: 14px;
-              left: -14px;
-              right: auto;
-      }
-    }
-  }
-}
-
 .comma-separated {
   .separated-item {
     &:after {
diff --git a/src/app/components/noosfero-activities/activity/add_member_in_community.html b/src/app/components/noosfero-activities/activity/add_member_in_community.html
index 2993f5f..5cff42b 100644
--- a/src/app/components/noosfero-activities/activity/add_member_in_community.html
+++ b/src/app/components/noosfero-activities/activity/add_member_in_community.html
@@ -1,11 +1,13 @@
-<div class="timeline-badge info"><i class="fa fa-user-plus"></i></div>
-<div class="timeline-panel">
-  <div class="timeline-heading">
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
     <h4 class="timeline-title">
       <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
       <span> has joined the community</span>
     </h4>
     <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
-  </div>
+  </timeline-heading>
   <div class="timeline-body"></div>
-</div>
+</timeline-panel>
diff --git a/src/app/components/noosfero-activities/activity/create_article.html b/src/app/components/noosfero-activities/activity/create_article.html
index 26ec954..48abed6 100644
--- a/src/app/components/noosfero-activities/activity/create_article.html
+++ b/src/app/components/noosfero-activities/activity/create_article.html
@@ -1,15 +1,17 @@
-<div class="timeline-badge success"><i class="fa fa-file-text"></i></div>
-<div class="timeline-panel">
-  <div class="timeline-heading">
+<timeline-badge class="success">
+  <i class="fa fa-file-text"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
+      <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
       <span> has published on </span>
-      <a ui-sref="main.profile({profile: vm.activity.target.article.profile.identifier})">
+      <a ui-sref="main.profile.info({profile: vm.activity.target.article.profile.identifier})">
         <strong ng-bind="vm.activity.target.article.profile.name"></strong></span>
       </a>
     </h4>
     <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
-  </div>
+  </timeline-heading>
   <div class="timeline-body">
     <div class="article">
       <div class="title">
@@ -21,4 +23,4 @@
       </div>
     </div>
   </div>
-</div>
+</timeline-panel>
diff --git a/src/app/components/noosfero-activities/activity/new_friendship.html b/src/app/components/noosfero-activities/activity/new_friendship.html
index 74b949e..b8730d1 100644
--- a/src/app/components/noosfero-activities/activity/new_friendship.html
+++ b/src/app/components/noosfero-activities/activity/new_friendship.html
@@ -1,6 +1,8 @@
-<div class="timeline-badge info"><i class="fa fa-user-plus"></i></div>
-<div class="timeline-panel">
-  <div class="timeline-heading">
+<timeline-badge class="info">
+  <i class="fa fa-user-plus"></i>
+</timeline-badge>
+<timeline-panel>
+  <timeline-heading>
     <h4 class="timeline-title">
       <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
       <span> has made <span ng-bind="vm.activity.params.friend_name.length"></span> new friend(s): </span>
@@ -11,6 +13,6 @@
       </span>
     </h4>
     <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
-  </div>
+  </timeline-heading>
   <div class="timeline-body"></div>
-</div>
+</timeline-panel>
diff --git a/src/app/index.module.js b/src/app/index.module.js
index 269c924..df7eb57 100644
--- a/src/app/index.module.js
+++ b/src/app/index.module.js
@@ -5,6 +5,7 @@
     .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch',
                         'ngSanitize', 'ngMessages', 'ngAria', 'restangular',
                         'ui.router', 'ui.bootstrap', 'toastr',
-                        'angularMoment', 'angular.filter', 'akoenig.deckgrid']);
+                        'angularMoment', 'angular.filter', 'akoenig.deckgrid',
+                        'angular-timeline']);
 
 })();
--
libgit2 0.21.2