diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee
index 38f632c8..dbedcdad 100644
--- a/app/coffee/modules/nav.coffee
+++ b/app/coffee/modules/nav.coffee
@@ -176,87 +176,13 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
             target = angular.element(event.currentTarget)
             $ctrl.filterProjects(target.val())
 
+        $scope.$on "projects:filtered", ->
+            renderProjects($el, $scope.filteredProjects)
+            $el.trigger("regenerate:pagination")
+
         $scope.$watch "projects", (projects) ->
             render($el, $scope.projects) if projects?
 
-        bindOnce $scope, "projects", (projects) ->
-            prevBtn = $el.find(".v-pagination-previous")
-            nextBtn = $el.find(".v-pagination-next")
-            container = $el.find("ul")
-            pageSize = 0
-            containerSize = 0
-
-            renderNextAndPrev  = ->
-                #wait digest end
-                $timeout () ->
-                if $scope.filteredProjects
-                    pageSize = $el.find(".v-pagination-list").height()
-                    containerSize = container.height()
-                    if containerSize > pageSize
-                        visible(nextBtn)
-                    else
-                        remove()
-                else
-                    remove()
-
-            nextPage = (element, pageSize, callback) ->
-                top = parseInt(element.css('top'), 10)
-                newTop = top - pageSize
-
-                element.animate({"top": newTop}, callback);
-
-                return newTop
-
-            prevPage = (element, pageSize, callback) ->
-                top = parseInt(element.css('top'), 10)
-                newTop = top + pageSize
-
-                element.animate({"top": newTop}, callback);
-
-                return newTop
-
-            visible = (element) ->
-                element.css('visibility', 'visible')
-
-            hide = (element) ->
-                element.css('visibility', 'hidden')
-
-            remove = () ->
-                container.css('top', 0)
-                hide(prevBtn)
-                hide(nextBtn)
-
-            $el.on "click", ".v-pagination-previous", (event) ->
-                event.preventDefault()
-
-                if container.is(':animated')
-                    return
-
-                visible(nextBtn)
-
-                newTop = prevPage(container, pageSize)
-
-                if newTop == 0
-                    hide(prevBtn)
-
-            $el.on "click", ".v-pagination-next", (event) ->
-                event.preventDefault()
-
-                if container.is(':animated')
-                    return
-
-                visible(prevBtn)
-
-                newTop = nextPage(container, pageSize)
-
-                if -newTop + pageSize > containerSize
-                    hide(nextBtn)
-
-            renderNextAndPrev()
-            $scope.$on "projects:filtered", ->
-                renderProjects($el, $scope.filteredProjects)
-                renderNextAndPrev()
-
     return {link: link}
 
 module.directive("tgProjectsNav", ["$rootScope", "animationFrame", "$timeout", "tgLoader", "$location",
diff --git a/app/coffee/modules/projects/main.coffee b/app/coffee/modules/projects/main.coffee
index b269040c..7bb9a7f2 100644
--- a/app/coffee/modules/projects/main.coffee
+++ b/app/coffee/modules/projects/main.coffee
@@ -1,6 +1,6 @@
 taiga = @.taiga
 module = angular.module("taigaProject")
-
+bindOnce = @.taiga.bindOnce
 
 class ProjectsController extends taiga.Controller
     @.$inject = ["$scope", "$tgResources", "$rootScope", "$tgNavUrls", "$tgAuth", "$location", "$appTitle", "$projectUrl"]
@@ -19,6 +19,7 @@ class ProjectsController extends taiga.Controller
     loadInitialData: ->
         return @rs.projects.list().then (projects) =>
             @.projects = {'recents': projects.slice(0, 8), 'all': projects.slice(8)}
+
             for project in projects
                 project.url = @projectUrl.get(project)
 
@@ -62,3 +63,96 @@ class ProjectController extends taiga.Controller
 
 
 module.controller("ProjectController", ProjectController)
+
+ProjectsPaginationDirective = ($timeout) ->
+    link = ($scope, $el, $attrs) ->
+        bindOnce $scope, "projects", (projects) ->
+            container = nextBtn = prevBtn = null
+            pageSize = 0
+            containerSize = 0
+
+            renderNextAndPrev  = ->
+                if projects.length
+                    pageSize = $el.find(".v-pagination-list").height()
+                    containerSize = container.height()
+                    if containerSize > pageSize
+                        visible(nextBtn)
+                    else
+                        remove()
+                else
+                    remove()
+
+            nextPage = (element, pageSize, callback) ->
+                top = parseInt(element.css('top'), 10)
+                newTop = top - pageSize
+
+                element.animate({"top": newTop}, callback);
+
+                return newTop
+
+            prevPage = (element, pageSize, callback) ->
+                top = parseInt(element.css('top'), 10)
+                newTop = top + pageSize
+
+                element.animate({"top": newTop}, callback);
+
+                return newTop
+
+            visible = (element) ->
+                element.css('visibility', 'visible')
+
+            hide = (element) ->
+                element.css('visibility', 'hidden')
+
+            remove = () ->
+                container.css('top', 0)
+                hide(prevBtn)
+                hide(nextBtn)
+
+            $el.on "click", ".v-pagination-previous", (event) ->
+                event.preventDefault()
+
+                if container.is(':animated')
+                    return
+
+                visible(nextBtn)
+
+                newTop = prevPage(container, pageSize)
+
+                if newTop == 0
+                    hide(prevBtn)
+
+            $el.on "click", ".v-pagination-next", (event) ->
+                event.preventDefault()
+
+                if container.is(':animated')
+                    return
+
+                visible(prevBtn)
+
+                newTop = nextPage(container, pageSize)
+
+                if -newTop + pageSize > containerSize
+                    hide(nextBtn)
+
+            $el.on "regenerate:pagination", () =>
+                renderNextAndPrev()
+
+            #wait digest end
+            $timeout () =>
+                prevBtn = $el.find(".v-pagination-previous")
+                nextBtn = $el.find(".v-pagination-next")
+                container = $el.find("ul")
+
+                renderNextAndPrev()
+
+
+
+    return {
+        link: link,
+        scope: {
+            projects: "="
+        }
+    }
+
+module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective])
diff --git a/app/partials/projects.jade b/app/partials/projects.jade
index a0c26514..6b5ad2b3 100644
--- a/app/partials/projects.jade
+++ b/app/partials/projects.jade
@@ -17,10 +17,14 @@ block content
 
                 div.all-projects
                     h1 Projects
-                    div(tg-projects-pagination, active="ctrl.projects.all.length")
-                        ul
-                            li(ng-repeat="project in ctrl.projects.all")
-                                a.button(tg-bo-bind="project.name", href="{{ project.url }}")
+                    div(tg-projects-pagination, projects="ctrl.projects.all", active="ctrl.projects.all.length")
+                        .projects-pagination
+                            a.v-pagination-previous.icon.icon-arrow-up(href="")
+                            .v-pagination-list
+                                ul.projects-list
+                                    li(ng-repeat="project in ctrl.projects.all")
+                                        a.button(tg-bo-bind="project.name", href="{{ project.url }}")
+                            a.v-pagination-next.icon.icon-arrow-bottom(href="")
 
                     .create-project-button-wrapper
                         a.button.button-green(href="", ng-click="ctrl.newProject()") Create project
diff --git a/app/partials/views/modules/projects-nav.jade b/app/partials/views/modules/projects-nav.jade
index d0c39cec..586e48cb 100644
--- a/app/partials/views/modules/projects-nav.jade
+++ b/app/partials/views/modules/projects-nav.jade
@@ -6,4 +6,4 @@
 div.lightbox.lightbox_create-project.hidden(tg-lb-create-project)
     include lightbox_create-project
 
-nav.projects-nav(ng-controller="ProjectsNavigationController", tg-projects-nav)
+nav.projects-nav(ng-controller="ProjectsNavigationController", tg-projects-nav, tg-projects-pagination, projects="projects")
diff --git a/app/styles/modules/common/projects-nav.scss b/app/styles/modules/common/projects-nav.scss
index 42d09e93..9b5f53db 100644
--- a/app/styles/modules/common/projects-nav.scss
+++ b/app/styles/modules/common/projects-nav.scss
@@ -43,6 +43,7 @@
         margin-top: 1rem;
     }
     .create-project-button {
+        flex-shrink: 0;
         margin-top: 1rem;
         a {
             text-align: center;