diff --git a/mirador b/mirador
index 2a11c195b2274ae892e01df86c60e1903fd266a1..1a9ef869f8868c6983ba5e465da63598b14d2d8e 160000
--- a/mirador
+++ b/mirador
@@ -1 +1 @@
-Subproject commit 2a11c195b2274ae892e01df86c60e1903fd266a1
+Subproject commit 1a9ef869f8868c6983ba5e465da63598b14d2d8e
diff --git a/package.json b/package.json
index f5f114d1181b4bf7ff310417c05f142bf77a2c85..48377677944657ca8140382500237c99389b315d 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "draft-js-import-html": "^1.4.1",
     "paper": "^0.12.11",
     "react-color": "^2.18.1",
+    "react-konva": ">=17.0.1-3 <18.0.0",
     "react-resize-observer": "^1.1.1"
   },
   "peerDependencies": {
diff --git a/src/AnnotationDrawing.js b/src/AnnotationDrawing.js
index 5512fb4493e8558e4750374a55fdd1955851de7a..b2b305e685e298e3352e378d41a52002c398c8cc 100644
--- a/src/AnnotationDrawing.js
+++ b/src/AnnotationDrawing.js
@@ -13,6 +13,10 @@ import
   FreeformPathTool,
 }
   from '@psychobolt/react-paperjs-editor';
+
+  import { Stage, Layer, Star, Text } from 'react-konva';
+
+
 import { Point } from 'paper';
 import flatten from 'lodash/flatten';
 import EditTool from './EditTool';
@@ -25,6 +29,7 @@ class AnnotationDrawing extends Component {
     super(props);
 
     this.paper = null;
+    this.konvas = null;
     this.getDisplayProps = this.getDisplayProps.bind(this);
     this.onPaperResize = this.onPaperResize.bind(this);
     this.paperDidMount = this.paperDidMount.bind(this);
@@ -159,42 +164,65 @@ class AnnotationDrawing extends Component {
         break;
     }
 
+
+    console.log('rendering konva');
+    // replace with konva
+
     return (
-      <div
-        style={{
-          height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
-        }}
+      <Stage width={1920} height={1080}
+      
+      style={{
+        height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
+       
+      }}
+
       >
-        <PaperContainer
-          canvasProps={canvasProps}
-          viewProps={viewProps}
-          onMount={this.paperDidMount}
-        >
-          {renderWithPaperScope((paper) => {
-            const paths = flatten(paper.project.layers.map((layer) => (
-              flatten(mapChildren(layer)).map((aPath) => aPath)
-            )));
-            if (svg && paths.length === 0) {
-              paper.project.importSVG(svg);
-            }
-            paper.settings.handleSize = 10; // eslint-disable-line no-param-reassign
-            paper.settings.hitTolerance = 10; // eslint-disable-line no-param-reassign
-            return (
-              <ActiveTool
-                onPathAdd={this.addPath}
-                pathProps={{
-                  fillColor,
-                  strokeColor,
-                  strokeWidth: strokeWidth / paper.view.zoom,
-                }}
-                paper={paper}
-              />
-            );
-          })}
-        </PaperContainer>
-        <ResizeObserver onResize={this.onPaperResize} />
-      </div>
+        <Layer>
+     
+        
+        </Layer>
+      </Stage>
     );
+
+  //  return (
+
+
+
+      // <div
+      //   style={{
+      //     height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
+      //   }}
+      // >
+      //   <PaperContainer
+      //     canvasProps={canvasProps}
+      //     viewProps={viewProps}
+      //     onMount={this.paperDidMount}
+      //   >
+      //     {renderWithPaperScope((paper) => {
+      //       const paths = flatten(paper.project.layers.map((layer) => (
+      //         flatten(mapChildren(layer)).map((aPath) => aPath)
+      //       )));
+      //       if (svg && paths.length === 0) {
+      //         paper.project.importSVG(svg);
+      //       }
+      //       paper.settings.handleSize = 10; // eslint-disable-line no-param-reassign
+      //       paper.settings.hitTolerance = 10; // eslint-disable-line no-param-reassign
+      //       return (
+      //         <ActiveTool
+      //           onPathAdd={this.addPath}
+      //           pathProps={{
+      //             fillColor,
+      //             strokeColor,
+      //             strokeWidth: strokeWidth / paper.view.zoom,
+      //           }}
+      //           paper={paper}
+      //         />
+      //       );
+      //     })}
+      //   </PaperContainer>
+      //   <ResizeObserver onResize={this.onPaperResize} />
+      //</div>
+    //);
   }
 
   /** */
diff --git a/src/EditTool.js b/src/EditTool.js
index 58f6987788ad6a9832487fb1ee83fe99eaf37d74..9e076f78ba2484af5a149ae3cdd82432bc1396ab 100644
--- a/src/EditTool.js
+++ b/src/EditTool.js
@@ -132,6 +132,9 @@ class EditTool extends Component {
 
   /** */
   render() {
+
+    console.log('rendering edit tool');
+
     return (
       <Tool
         onMouseDown={this.onMouseDown}