diff --git a/web/src/app/shared/store/index.ts b/web/src/app/shared/store/index.ts
index 25449596b..d6cd4a497 100644
--- a/web/src/app/shared/store/index.ts
+++ b/web/src/app/shared/store/index.ts
@@ -3,11 +3,13 @@ import { ClassificationState } from './classification-store/classification.state
 import { WorkbasketState } from './workbasket-store/workbasket.state';
 import { AccessItemsManagementState } from './access-items-management-store/access-items-management.state';
 import { FilterState } from './filter-store/filter.state';
+import { WorkplaceState } from './workplace-store/workplace.state';
 
 export const STATES = [
   EngineConfigurationState,
   ClassificationState,
   WorkbasketState,
   AccessItemsManagementState,
-  FilterState
+  FilterState,
+  WorkplaceState
 ];
diff --git a/web/src/app/shared/store/workplace-store/workplace.actions.ts b/web/src/app/shared/store/workplace-store/workplace.actions.ts
new file mode 100644
index 000000000..5bf565758
--- /dev/null
+++ b/web/src/app/shared/store/workplace-store/workplace.actions.ts
@@ -0,0 +1,8 @@
+export class SetFilterExpansion {
+  static readonly type = '[Task list toolbar] Expand or collapse the Task filter';
+  constructor(public isExpanded?: boolean) {}
+}
+
+export class CalculateNumberOfCards {
+  static readonly type = '[Task master] Calculate number of cards for task list';
+}
diff --git a/web/src/app/shared/store/workplace-store/workplace.selectors.ts b/web/src/app/shared/store/workplace-store/workplace.selectors.ts
new file mode 100644
index 000000000..d1604c8ff
--- /dev/null
+++ b/web/src/app/shared/store/workplace-store/workplace.selectors.ts
@@ -0,0 +1,14 @@
+import { Selector } from '@ngxs/store';
+import { WorkplaceState, WorkplaceStateModel } from './workplace.state';
+
+export class WorkplaceSelectors {
+  @Selector([WorkplaceState])
+  static getFilterExpansion(state: WorkplaceStateModel): boolean {
+    return state.isFilterExpanded;
+  }
+
+  @Selector([WorkplaceState])
+  static getNumberOfCards(state: WorkplaceStateModel): number {
+    return state.cards;
+  }
+}
diff --git a/web/src/app/shared/store/workplace-store/workplace.state.ts b/web/src/app/shared/store/workplace-store/workplace.state.ts
new file mode 100644
index 000000000..3989c004f
--- /dev/null
+++ b/web/src/app/shared/store/workplace-store/workplace.state.ts
@@ -0,0 +1,52 @@
+import { Action, NgxsOnInit, State, StateContext } from '@ngxs/store';
+import { Observable, of } from 'rxjs';
+import { CalculateNumberOfCards, SetFilterExpansion } from './workplace.actions';
+
+@State<WorkplaceStateModel>({ name: 'WorkplaceState' })
+export class WorkplaceState implements NgxsOnInit {
+  @Action(SetFilterExpansion)
+  setFilterExpansion(ctx: StateContext<WorkplaceStateModel>, action: SetFilterExpansion): Observable<null> {
+    const param = action.isExpanded;
+    const isExpanded = typeof param !== 'undefined' ? param : !ctx.getState().isFilterExpanded;
+
+    ctx.setState({
+      ...ctx.getState(),
+      isFilterExpanded: isExpanded
+    });
+
+    ctx.dispatch(new CalculateNumberOfCards());
+
+    return of(null);
+  }
+
+  @Action(CalculateNumberOfCards)
+  calculateNumberOfCards(ctx: StateContext<WorkplaceStateModel>): Observable<null> {
+    const cardHeight = 90;
+    const totalHeight = window.innerHeight;
+    const toolbarHeight = ctx.getState().isFilterExpanded ? 308 : 192;
+    const occupiedHeight = 56 + 90 + toolbarHeight;
+
+    const cards = Math.max(1, Math.round((totalHeight - occupiedHeight) / cardHeight));
+
+    ctx.setState({
+      ...ctx.getState(),
+      cards: cards
+    });
+
+    return of(null);
+  }
+
+  ngxsOnInit(ctx: StateContext<WorkplaceStateModel>): void {
+    this.calculateNumberOfCards(ctx);
+
+    ctx.setState({
+      ...ctx.getState(),
+      isFilterExpanded: false
+    });
+  }
+}
+
+export interface WorkplaceStateModel {
+  isFilterExpanded: boolean;
+  cards: number;
+}