diff --git a/package.json b/package.json
index 13df0c1..f33025f 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "Budibase-Signature-Plugin",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A plugin that allows signatures to be created and saved in budibase",
   "license": "MIT",
   "svelte": "index.js",
   "module": "dist/plugin.min.js",
+  "author": "Lewis McRobbie",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -cw"
diff --git a/src/Canvas.svelte b/src/Canvas.svelte
index 2789b91..2164736 100644
--- a/src/Canvas.svelte
+++ b/src/Canvas.svelte
@@ -20,6 +20,7 @@
     export let borderOutline = "none"
     export let borderColor = "#000000"
     export let borderWidth = "1px"
+    export let inBuilder = false
 	
     let eraseSignatureModal
 	let canvas
@@ -30,12 +31,15 @@
 	let t, l
 	
 	onMount(() => {
-        context = canvas.getContext('2d')
-        context.lineWidth = penWidth;
-        context.lineJoin = "round";
-        context.lineCap = "round";
-		
-		handleSize()
+        if (!inBuilder){
+            context = canvas.getContext('2d')
+            context.lineWidth = penWidth;
+            context.lineJoin = "round";
+            context.lineCap = "round";
+            
+            handleSize();
+            saveSignature(true);
+        }
 	})
 	
 	$: if(context) {
@@ -43,90 +47,114 @@
 	}
 	
 	const handleStart = (({ offsetX: x, offsetY: y }) => { 
-		if(color === background) {
-			context.clearRect(0, 0, width, height)
-		} else {
-			isDrawing = true
-			start = { x, y }
-		}
+        if (!inBuilder){
+            if(color === background) {
+                context.clearRect(0, 0, width, height)
+            } else {
+                isDrawing = true
+                start = { x, y }
+            }
+        }
 	})
 	
 	const handleEnd = () => { 
-        isDrawing = false;
-        saveSignature();
+        if (!inBuilder){
+            isDrawing = false;
+            saveSignature(false);
+        }
     }
 
 	const handleMove = (({ offsetX: x1, offsetY: y1 }) => {
-		if(!isDrawing) return
-		
-		const { x, y } = start
-		context.beginPath()
-		context.moveTo(x, y)
-		context.lineTo(x1, y1)
-		context.closePath()
-		context.stroke()
-		
-		start = { x: x1, y: y1 }
+        if (!inBuilder){
+            if(!isDrawing) return
+            
+            const { x, y } = start
+            context.beginPath()
+            context.moveTo(x, y)
+            context.lineTo(x1, y1)
+            context.closePath()
+            context.stroke()
+            
+            start = { x: x1, y: y1 }
+        }
 	})
 	
 	const handleSize = () => {
-		const { top, left } = canvas.getBoundingClientRect()
-		t = top
-		l = left
+        const { top, left } = canvas.getBoundingClientRect()
+        t = top
+        l = left
 	}
 
     function clearCanvas(){
-        const context = canvas.getContext('2d');
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        saveSignature();
+        if (!inBuilder){
+            const context = canvas.getContext('2d');
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            saveSignature(false);
+        }
     }
 
     function fillCanvasBackgroundWithColor(color) {
-        if (saveBackgroundColour){
-            const context = canvas.getContext('2d');
-            context.save();
-            context.globalCompositeOperation = 'destination-over';
-            context.fillStyle = color;
-            context.fillRect(0, 0, canvas.width, canvas.height);
-            context.restore();
+        if (!inBuilder){
+            if (saveBackgroundColour){
+                const context = canvas.getContext('2d');
+                context.save();
+                context.globalCompositeOperation = 'destination-over';
+                context.fillStyle = color;
+                context.fillRect(0, 0, canvas.width, canvas.height);
+                context.restore();
+            }
         }
     }
 
-    function saveSignature(){
-        fillCanvasBackgroundWithColor(background);
-        let img = canvas.toDataURL("image/png");
-        setSignatureValue(img);
+    function saveSignature(inital){
+        if (!inBuilder){
+            fillCanvasBackgroundWithColor(background);
+            let img = canvas.toDataURL("image/png");
+            setSignatureValue(img, inital);
+        }
     }
 
 </script>
 
 <svelte:window on:resize={handleSize} />
-
 {#if showClearSignatureButton}
-<div style="padding-right:5px;padding-bottom:5px;">
-  {#if showButtonIcon}
-    <Button icon="Erase" primary on:click={eraseSignatureModal.show}>
-      {clearSignatureButtonText}
-    </Button>
-  {:else}
-    <Button primary on:click={eraseSignatureModal.show}>
-      {clearSignatureButtonText}
-    </Button>
-  {/if}
-  <Modal bind:this={eraseSignatureModal}>
-    <ModalContent
-      title={modalTitle}
-      confirmText={modalActionButtonText}
-      onConfirm={clearCanvas}
-    >
-      <span
-        >{modalBody}</span
-      >
-    </ModalContent>
-  </Modal>
+<div style="padding-right:8px;padding-bottom:8px;">
+    {#if showButtonIcon}
+        {#if !inBuilder}
+        <Button icon="Erase" primary on:click={eraseSignatureModal.show}>
+            {clearSignatureButtonText}
+        </Button>
+        {:else}
+        <Button icon="Erase" primary>
+            {clearSignatureButtonText}
+        </Button>
+        {/if}
+    {:else}
+        {#if !inBuilder}
+            <Button primary on:click={eraseSignatureModal.show}>
+                {clearSignatureButtonText}
+            </Button>
+        {:else}
+            <Button primary>
+                {clearSignatureButtonText}
+            </Button>
+        {/if}
+    {/if}
+    {#if !inBuilder}
+    <Modal bind:this={eraseSignatureModal}>
+        <ModalContent
+            title={modalTitle}
+            confirmText={modalActionButtonText}
+            onConfirm={clearCanvas}
+            >
+            <span
+                >{modalBody}</span
+            >
+        </ModalContent>
+    </Modal>
+    {/if}
 </div>
 {/if}
-
 <canvas style="outline-style: {borderOutline}; outline-color: {borderColor}; outline-width: {borderWidth}"
 				{width}
 				{height}
diff --git a/src/Component.svelte b/src/Component.svelte
index cc6b34c..2b9001b 100644
--- a/src/Component.svelte
+++ b/src/Component.svelte
@@ -21,12 +21,16 @@
   export let modalBody
   export let saveBackgroundColour
   export let signatureData
+  //export let required
+
+  let initalImage
+  let currentImage
 
   let canBeDisplayed
   let errorMessages = [];
   
   //Budibase SDK
-  const { styleable } = getContext("sdk");
+  const { styleable, builderStore, notificationStore } = getContext("sdk");
 
   //Form API
   const component = getContext("component");
@@ -36,6 +40,9 @@
 
   let fieldApi
   let fieldState
+  let inBuilder = false
+
+  console.log(fieldState);
 
   const formApi = formContext?.formApi;
   const labelPos = fieldGroupContext?.labelPosition || "above";
@@ -62,8 +69,12 @@ $: formField = formApi?.registerField(
     unsubscribe?.();
   });
 
-  function setSignatureValue(img){
+  function setSignatureValue(img, inital){
     fieldApi.setValue(img);
+    currentImage = img;
+    if (inital){
+      initalImage = img;
+    }
   }
 
   $: checkValid(field, formContext, penWidth, width, height, color, background)
@@ -105,10 +116,26 @@ $: formField = formApi?.registerField(
     }
   }
 
+  //$: compareImages(required, initalImage, currentImage);
+
+  //need to figure out how to pass validation
+  //function compareImages(required, initalImage, currentImage){
+  //  if (required){
+  //    if (initalImage === currentImage){
+  //      notificationStore.actions.warning(
+  //        `Please draw your signature`
+  //      )
+  //    }
+  //  }
+  //}
+
+  if (($builderStore.inBuilder)){
+    inBuilder = true;
+  }
 </script>
 <div class="spectrum-Form-item" use:styleable={$component.styles}>
   {#if !canBeDisplayed}
-    <!-- Display error message of bad configuration -->
+    <!-- Display error messages when requirements are not defined -->
     <div class="spectrum-InLineAlert spectrum-InLineAlert--notice">
       <div class="spectrum-InLineAlert-header">
         Signature field error
@@ -150,6 +177,7 @@ $: formField = formApi?.registerField(
         {borderOutline}
         {borderColor}
         {borderWidth}
+        {inBuilder}
       >
       </Canvas>
     </div>