diff --git a/package.json b/package.json
index 48499d356f98120a949220c44e76f062d6b9af75..877cfb8b56cfd8b191e5b5cee2efcee11496f813 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
+    "@ngxs/store": "^3.6.0-dev.master-5b82c93",
     "rxjs": "~6.4.0",
     "snapsvg": "^0.5.1",
     "tslib": "^1.10.0",
@@ -29,6 +30,7 @@
     "@angular/cli": "~8.3.22",
     "@angular/compiler-cli": "~8.2.14",
     "@angular/language-service": "~8.2.14",
+    "@ngxs/devtools-plugin": "^3.6.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2c3ba2995c8510c02ca812f90280146738f162cf..9a9f19760132f8f2077290eb76824934b8fd01b4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 
 @NgModule({
   declarations: [
@@ -10,7 +12,9 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    NgxsModule.forRoot([]),
+    NgxsReduxDevtoolsPluginModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/stores/canvas/canvas.actions.ts b/src/app/stores/canvas/canvas.actions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2457dbce5b307abf0e8529b9a6110e5de7481aa
--- /dev/null
+++ b/src/app/stores/canvas/canvas.actions.ts
@@ -0,0 +1,6 @@
+import { Shape } from './canvas.state';
+
+export class AddShape {
+    static readonly type = '[Canvas] add shape';
+    constructor(public shape: Shape) { }
+}
diff --git a/src/app/stores/canvas/canvas.state.ts b/src/app/stores/canvas/canvas.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fac3e45559560055b0a05c9bdf9fa2ca6946ba44
--- /dev/null
+++ b/src/app/stores/canvas/canvas.state.ts
@@ -0,0 +1,43 @@
+import { State, createSelector, Action, StateContext, Select, Selector } from '@ngxs/store';
+import { AddShape } from './canvas.actions';
+
+export interface CanvasStateModel {
+    shapes: Shape[];
+}
+
+export interface Shape {
+    id: string;
+    name: string;
+}
+
+@State<CanvasStateModel>({
+    name: 'canvas',
+    defaults: {
+        shapes: [],
+    },
+})
+export class CanvasState {
+    @Selector()
+    static shapes(state: CanvasStateModel) {
+        return state.shapes;
+    }
+
+    static shapeById(shapeId: string) {
+        return createSelector(
+            [CanvasState],
+            (state: CanvasStateModel) => {
+                return state.shapes.find(shape => shape.id === shapeId);
+            }
+        );
+    }
+
+    constructor() { }
+
+    @Action(AddShape)
+    AddShape(ctx: StateContext<CanvasStateModel>, { shape }: AddShape) {
+        const state = ctx.getState();
+        ctx.setState({
+            shapes: [...state.shapes, shape]
+        });
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 46c6a0d6a19bb2e2ae63d37132838b2902a94656..e4ef8012d424616492b04aa88aeab664b1723b53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -873,6 +873,20 @@
     tree-kill "1.2.1"
     webpack-sources "1.4.3"
 
+"@ngxs/devtools-plugin@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@ngxs/devtools-plugin/-/devtools-plugin-3.6.0.tgz#12ca4a3589dcb219f77c1f1e495436d7ddcad688"
+  integrity sha512-HzQfTLkBoFu2BTKhNgsPm6fZJXlUEv+Vafwdvqr+/pqle4Lm37XaPx1tVswGV0ldMh/SdC+XdRMXMN3lkMIGAg==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngxs/store@^3.6.0-dev.master-5b82c93":
+  version "3.6.0-dev.master-5b82c93"
+  resolved "https://registry.yarnpkg.com/@ngxs/store/-/store-3.6.0-dev.master-5b82c93.tgz#7bd8469fea0b4af8643857d84d04c6c4467c657e"
+  integrity sha512-HoWF+PL1v4nNIS8ub9ryocB0rgo3v+zSC168Zv8hB1KMYghVHI4onDd318CchDPldbLHcEdSo2O5H3VhFKtZsg==
+  dependencies:
+    tslib "^1.9.0"
+
 "@schematics/angular@8.3.22":
   version "8.3.22"
   resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-8.3.22.tgz#fab009312bd3d50115332f2c41a92e15744ac09f"