diff --git a/src/app/features/canvas/canvas.component.html b/src/app/features/canvas/canvas.component.html
index d35198eda3af622af7739629b0967c20556b020a..bda2cca48c8f4d8e74865006d595eeeccbb0a002 100644
--- a/src/app/features/canvas/canvas.component.html
+++ b/src/app/features/canvas/canvas.component.html
@@ -1,4 +1,8 @@
 <p>canvas works!</p>
 
 <!-- Add shape button -->
-<button (click)="addShape()">Add a shape</button>
\ No newline at end of file
+<button (click)="addShape()">Add a shape</button>
+
+<div *ngFor="let shape of shapes$|async">
+    {{ shape.name }}
+</div>
\ No newline at end of file
diff --git a/src/app/features/canvas/canvas.component.ts b/src/app/features/canvas/canvas.component.ts
index e354ad868d5a9a974cfb8d159a75d6c9355836cf..156cbac814c2126b724e3ef65ddff7a3a430b4e9 100644
--- a/src/app/features/canvas/canvas.component.ts
+++ b/src/app/features/canvas/canvas.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
-import { Store } from '@ngxs/store';
+import { Store, Select } from '@ngxs/store';
 import { AddShape } from 'src/app/stores/canvas/canvas.actions';
+import { Observable } from 'rxjs';
+import { Shape, CanvasState } from 'src/app/stores/canvas/canvas.state';
 
 @Component({
   selector: 'app-canvas',
@@ -8,13 +10,14 @@ import { AddShape } from 'src/app/stores/canvas/canvas.actions';
   styleUrls: ['./canvas.component.scss']
 })
 export class CanvasComponent {
+  @Select(CanvasState.shapes) shapes$: Observable<Shape[]>;
 
   constructor(private store: Store) { }
 
   public addShape() {
     this.store.dispatch(new AddShape({
-      id: `shape`,
-      name: `Shape number`
+      id: `new-shape`,
+      name: `New shape`
     }));
   }
 }
diff --git a/src/app/stores/canvas/canvas.state.ts b/src/app/stores/canvas/canvas.state.ts
index fac3e45559560055b0a05c9bdf9fa2ca6946ba44..c56cf628579e2d55d44f031395a1927c34a2e769 100644
--- a/src/app/stores/canvas/canvas.state.ts
+++ b/src/app/stores/canvas/canvas.state.ts
@@ -34,7 +34,7 @@ export class CanvasState {
     constructor() { }
 
     @Action(AddShape)
-    AddShape(ctx: StateContext<CanvasStateModel>, { shape }: AddShape) {
+    addShape(ctx: StateContext<CanvasStateModel>, { shape }: AddShape) {
         const state = ctx.getState();
         ctx.setState({
             shapes: [...state.shapes, shape]