diff --git a/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts b/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
index 0d10496970..d079139446 100644
--- a/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
+++ b/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
@@ -26,10 +26,13 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
+import {States} from "../../states.service";
+import {WorkPackageTimelineService, TimelineViewParameters} from "./wp-timeline.service";
 import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
 import {State} from "../../../helpers/reactive-fassade";
 import IScope = angular.IScope;
-import {States} from "../../states.service";
+import WorkPackage = op.WorkPackage;
+import Observable = Rx.Observable;
 
 export class WorkPackageTimelineCell {
 
@@ -37,21 +40,44 @@ export class WorkPackageTimelineCell {
 
   private bar: HTMLDivElement;
 
-  constructor(private scope: IScope, states: States, private workPackageId: string, private timelineCell: HTMLTableElement) {
-    this.state = states.workPackages.get(workPackageId);
+  constructor(private workPackageTimelineService: WorkPackageTimelineService,
+              private scope: IScope,
+              private states: States,
+              private workPackageId: string,
+              private timelineCell: HTMLTableElement) {
+
+    this.state = this.states.workPackages.get(this.workPackageId);
   }
 
-  init() {
+  render() {
     this.bar = document.createElement("div");
-    this.bar.style.width = "1000px";
-    this.bar.style.height = "1em";
-    this.bar.style.backgroundColor = "#FF0000";
     this.timelineCell.appendChild(this.bar);
 
-    this.state.observe(this.scope).subscribe(wp => {
-      console.log("new wp for cell:" + wp);
+    Observable.combineLatest(
+      this.workPackageTimelineService.viewParameters$,
+      this.state.observe(this.scope),
+      (viewParams, workPackage) => {
+        return {vp: viewParams, wp: workPackage};
+      })
+      .subscribe(result => {
+        this.update(result.vp, <any> result.wp);
+      });
+
+    this.state.get().then((wp: any) => {
+      this.workPackageTimelineService.addWorkPackageToView(wp);
     });
 
+
+  }
+
+  update(viewParams: TimelineViewParameters, workPackage: WorkPackage) {
+    console.log("update");
+    // console.log(wp.startDate);
+
+    this.bar.style.width = "1000px";
+    this.bar.style.height = "1em";
+    this.bar.style.backgroundColor = "#FF0000";
+
   }
 
 }
diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.service.ts b/frontend/app/components/wp-table/timeline/wp-timeline.service.ts
new file mode 100644
index 0000000000..f2956f3461
--- /dev/null
+++ b/frontend/app/components/wp-table/timeline/wp-timeline.service.ts
@@ -0,0 +1,62 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+import {openprojectModule} from "../../../angular-modules";
+import WorkPackage = op.WorkPackage;
+import Observable = Rx.Observable;
+
+export class TimelineViewParameters {
+
+}
+
+export class WorkPackageTimelineService {
+
+  private timelineViewParameters: TimelineViewParameters = new TimelineViewParameters();
+
+  private workPackagesInView: {[id: number]: WorkPackage} = {};
+
+  private viewParamsSubject = new Rx.Subject<TimelineViewParameters>();
+
+  public viewParameters$: Observable<TimelineViewParameters>;
+
+  constructor() {
+    this.viewParameters$ = this.viewParamsSubject.asObservable();
+  }
+
+  addWorkPackageToView(wp: WorkPackage) {
+    this.workPackagesInView[wp.id] = wp;
+    this.calculateAndPublishViewParams();
+  }
+
+  private calculateAndPublishViewParams() {
+    this.viewParamsSubject.onNext(new TimelineViewParameters());
+  }
+}
+
+
+openprojectModule.service("workPackageTimelineService", WorkPackageTimelineService);
diff --git a/frontend/app/components/wp-table/wp-row/wp-row.directive.js b/frontend/app/components/wp-table/wp-row/wp-row.directive.js
index 6c823b3994..f166b3dfa4 100644
--- a/frontend/app/components/wp-table/wp-row/wp-row.directive.js
+++ b/frontend/app/components/wp-table/wp-row/wp-row.directive.js
@@ -29,35 +29,41 @@
 
 var WorkPackagesTimelineCell = require("../timeline/wp-timeline-cell").WorkPackageTimelineCell;
 
-function wpRow(WorkPackagesTableService){
+function wpRow(WorkPackagesTableService) {
   function setCheckboxTitle(scope) {
     scope.checkboxTitle = I18n.t('js.description_select_work_package',
-                                 { id: scope.workPackage.id });
+      {id: scope.workPackage.id});
   }
 
   function setHiddenWorkPackageLabel(scope) {
     scope.parentWorkPackageHiddenText = I18n.t('js.description_subwork_package',
-                                               { id: scope.row.parent.object.id }) ;
+      {id: scope.row.parent.object.id});
   }
 
   return {
     restrict: 'A',
 
-    controller: function (states, $scope, $element) {
+    controller: function (states, $scope, $element, workPackageTimelineService) {
       "ngInject";
 
       var workPackageId = $scope.row.object.id;
       var timelineTd = $element.find("td.wp-timeline-cell")[0];
-      new WorkPackagesTimelineCell($scope, states, workPackageId, timelineTd).init();
+      new WorkPackagesTimelineCell(
+        workPackageTimelineService,
+        $scope,
+        states,
+        workPackageId,
+        timelineTd
+      ).render();
     },
 
-    link: function(scope) {
+    link: function (scope) {
       scope.workPackage = scope.row.object;
       setCheckboxTitle(scope);
 
       if (scope.row.parent) setHiddenWorkPackageLabel(scope);
 
-      scope.$watch('row.checked', function(checked, formerState) {
+      scope.$watch('row.checked', function (checked, formerState) {
         if (checked !== formerState) {
           WorkPackagesTableService.setAllRowsChecked(scope.rows, scope.row, checked);
         }