diff --git a/extension.json b/extension.json
index 2497bc2..d45c5fa 100644
--- a/extension.json
+++ b/extension.json
@@ -32,7 +32,21 @@
 	"AutoloadNamespaces": {
 		"MediaWiki\\Extension\\AnatImageViewer\\": "includes/"
     },
+    "Hooks": {
+        "AlternateEditPreview": "MediaWiki\\Extension\\AnatImageViewer\\AnnotationHooks::onAlternateEditPreview"
+    },
     "ContentHandlers": {
         "annotation": "MediaWiki\\Extension\\AnatImageViewer\\AnnotationHandler"
-    }
+    },
+    "ResourceFileModulePaths": {
+        "localBasePath": "modules",
+        "remoteExtPath": "GlModelViewer/modules"
+    },
+    "ResourceModules": {
+        "ext.annot.prev": {
+            "packageFiles": [
+                "annot-prev.js"
+            ]
+        }
+    }    
 }
\ No newline at end of file
diff --git a/includes/AnnotationHandler.php b/includes/AnnotationHandler.php
index 7a595c7..51c7736 100644
--- a/includes/AnnotationHandler.php
+++ b/includes/AnnotationHandler.php
@@ -73,7 +73,7 @@ class AnnotationHandler extends CodeContentHandler {
             return;
         }
 
-        $output->setText( self::buildSvg($metadata) );
+        $output->setText( '<div id="svg-wrapper" style="position: relative;">' . self::buildSvg($metadata) . '</div>' );
     }
 
     /**
@@ -124,8 +124,8 @@ class AnnotationHandler extends CodeContentHandler {
             'xmlns' => 'http://www.w3.org/2000/svg',
             'width' => $baseWidth,
             'height' => $baseHeight,
-            'style' => 'width: 100%; height: auto;'
-
+            'style' => 'width: 100%; height: auto;',
+            'mwScale' => $fixScale
         );
         $elCompass = '';
         $useCompass = '';
diff --git a/includes/AnnotationHooks.php b/includes/AnnotationHooks.php
index 22d081d..d59e191 100644
--- a/includes/AnnotationHooks.php
+++ b/includes/AnnotationHooks.php
@@ -2,23 +2,26 @@
 namespace MediaWiki\Extension\AnatImageViewer;
 
 class AnnotationHooks {
-    public static function registrationCallback() {
-        define( 'CONTENT_MODEL_ANNOTATION', 'annotation' );
-    }
 
     /**
-	 * Set the content handler for annotations
-	 *
-	 * @param Title $title
-	 * @param string &$model
-	 * @return void
-	 */
-	public static function onContentHandlerDefaultModelFor( $title, &$model ) {
+     * MWHook: Display model when model file page edits are previewed
+     * 
+     * @see https://www.mediawiki.org/wiki/Manual:Hooks/AlternateEditPreview
+     * 
+     * @param EditPage $editor access to information about the edit page itself
+     * @param Content $content access to the current content of the editor
+     * @param string &$previewHTML by reference access to the resultant compiled preview html
+     * @param ?ParserOutput &$parserOutput
+     * @return bool|void True to continue default processing or false to abort for custom processing
+     */
+    public static function onAlternateEditPreview( $editor, $content, string &$previewHTML, ?ParserOutput &$parserOutput ) {
+        $title = $editor->getTitle();
 		if ( $title->getNamespace() === NS_AV_ANNOT ) {
-            self::console_log('Found fucking thing!',true);
-            $model = CONTENT_MODEL_ANNOTATION;
-		}
-	}
+            $out = $editor->getContext()->getOutput();
+            $out->addModules('ext.annot.prev');
+        }
+        return true;
+    }
 
     /**
      * Small helper function to display information on the browser console
diff --git a/modules/annot-prev.js b/modules/annot-prev.js
new file mode 100644
index 0000000..2036e16
--- /dev/null
+++ b/modules/annot-prev.js
@@ -0,0 +1,21 @@
+console.log('Previewing Annotation page...')
+elSvgCont = document.querySelector('div#svg-wrapper')
+elSvg = elSvgCont.childNodes[0]
+elCoordBox = document.createElement('div')
+elCoordBox.style.display='none'
+elCoordBox.style.position='absolute'
+elCoordBox.style.padding='3px'
+elCoordBox.style.background='#ffffff99'
+elCoordBox.style.border='1px solid black'
+elSvgCont.appendChild(elCoordBox)
+elScale = elSvg.getAttribute('mwscale')
+elSvgCont.addEventListener('click', () => {navigator.clipboard.writeText(`[${elCoordBox.textContent}]`)})
+elSvgCont.addEventListener('mouseenter', () => {elCoordBox.style.display='block'})
+elSvgCont.addEventListener('mouseleave', () => {elCoordBox.style.display='none'})
+elSvgCont.addEventListener('mousemove',(e) => {
+    xPoint = ((e.offsetX / elSvgCont.clientWidth) * elSvg.width.baseVal.value / elScale).toFixed(1)
+    yPoint = ((e.offsetY / elSvgCont.clientHeight) * elSvg.height.baseVal.value / elScale).toFixed(1)
+    elCoordBox.textContent = `${xPoint}, ${yPoint}`
+    elCoordBox.style.left = e.offsetX + 6
+    elCoordBox.style.top = e.offsetY + 12
+})