diff --git a/client/dist/styles/main.css b/client/dist/styles/main.css
index 6225ae4..1937a86 100644
--- a/client/dist/styles/main.css
+++ b/client/dist/styles/main.css
@@ -1 +1 @@
-.focuspoint-field div.field{display:none}.focuspoint-field--debug{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.focuspoint-field--debug .focuspoint-field__image-wrapper{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;width:100%}.focuspoint-field--debug div.field.text{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;display:block}.focuspoint-picker{position:relative;margin:0;overflow:hidden;border-radius:3px;display:inline-block}.focuspoint-picker__gradient{position:absolute;display:block;left:0;top:0;width:200%;height:200%;-webkit-transition-property:top,left;-o-transition-property:top,left;transition-property:top,left;-webkit-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;background:-webkit-radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));background:-o-radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));background:radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none}.focuspoint-picker__gradient:after{content:"";position:absolute;width:11px;height:11px;top:50%;left:50%;-webkit-transform:translate(-5px,-5px);-o-transform:translate(-5px,-5px);transform:translate(-5px,-5px);background:transparent url("data:image/svg+xml,%3Csvg width='11px' height='11px' viewBox='0 0 11 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Ecrosshair%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='crosshair'%3E %3Crect id='Rectangle' fill-opacity='0.75' fill='%23FFFFFF' x='4' y='0' width='3' height='11'%3E%3C/rect%3E %3Crect id='Rectangle-Copy' fill-opacity='0.75' fill='%23FFFFFF' x='0' y='4' width='11' height='3'%3E%3C/rect%3E %3Crect id='Rectangle-Copy-3' fill='%23000000' x='5' y='1' width='1' height='9'%3E%3C/rect%3E %3Crect id='Rectangle-Copy-2' fill='%23000000' x='1' y='5' width='9' height='1'%3E%3C/rect%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat 50%;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none}.focuspoint-picker__image{display:block}.focuspoint-picker__overlay{position:absolute;display:block;top:0;left:0;width:100%;height:100%;border-radius:3px;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.3);box-shadow:inset 0 1px 5px rgba(0,0,0,.3)}
\ No newline at end of file
+.focuspoint-field div.field{display:none}.focuspoint-field--debug{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.focuspoint-field--debug .focuspoint-field__image-wrapper{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;width:100%}.focuspoint-field--debug div.field.text{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;display:block}.focuspoint-picker{position:relative;margin:0;overflow:hidden;border-radius:3px;display:inline-block}.focuspoint-picker__gradient{position:absolute;display:block;left:0;top:0;width:200%;height:200%;-webkit-transition-property:top,left;-o-transition-property:top,left;transition-property:top,left;-webkit-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;background:-webkit-radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));background:-o-radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));background:radial-gradient(circle 80px at center center,rgba(191,201,209,0) 33%,rgba(191,201,209,.8));-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none}.focuspoint-picker__gradient:after{content:"";position:absolute;width:11px;height:11px;top:50%;left:50%;-webkit-transform:translate(-5px,-5px);-o-transform:translate(-5px,-5px);transform:translate(-5px,-5px);background:transparent url("data:image/svg+xml,%3Csvg width='11px' height='11px' viewBox='0 0 11 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Ecrosshair%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='crosshair'%3E %3Crect id='Rectangle' fill-opacity='0.75' fill='%23FFFFFF' x='4' y='0' width='3' height='11'%3E%3C/rect%3E %3Crect id='Rectangle-Copy' fill-opacity='0.75' fill='%23FFFFFF' x='0' y='4' width='11' height='3'%3E%3C/rect%3E %3Crect id='Rectangle-Copy-3' fill='%23000000' x='5' y='1' width='1' height='9'%3E%3C/rect%3E %3Crect id='Rectangle-Copy-2' fill='%23000000' x='1' y='5' width='9' height='1'%3E%3C/rect%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat 50%;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none}.focuspoint-picker__image{display:block}.focuspoint-picker__overlay{position:absolute;display:block;top:0;left:0;width:100%;height:100%;border-radius:3px;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.3);box-shadow:inset 0 1px 5px rgba(0,0,0,.3)}.focuspoint.readonly .focuspoint-picker__image{-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:.7}
\ No newline at end of file
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index b3ea59b..32bd4ab 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -1,8 +1,10 @@
 .focuspoint-field {
   $base: &;
+
   div.field {
     display: none;
   }
+
   &--debug {
     display: flex;
     flex-flow: row wrap;
@@ -68,6 +70,13 @@
     width: 100%;
     height: 100%;
     border-radius: 3px;
-    box-shadow: inset 0 1px 5px rgba(0,0,0,0.3);
+    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.focuspoint.readonly {
+  .focuspoint-picker__image {
+    filter: grayscale(100%);
+    opacity: 0.7;
   }
 }