diff --git a/src/components/Board/BoardButtonDetails/BoardButtonDetails.css b/src/components/Board/BoardButtonDetails/BoardButtonDetails.css
index 64e31cc9d..e1e502140 100644
--- a/src/components/Board/BoardButtonDetails/BoardButtonDetails.css
+++ b/src/components/Board/BoardButtonDetails/BoardButtonDetails.css
@@ -2,14 +2,38 @@
   display: flex;
 }
 
-.BoardButtonDetails__image {
+.BoardButtonDetails__preview {
   margin-right: 16px;
+  width: 150px;
+  position: relative;
 }
 
-[dir='rtl'] .BoardButtonDetails__image {
+[dir='rtl'] .BoardButtonDetails__preview {
   margin-left: 16px;
 }
 
+.BoardButtonDetails__fields .InputImage {
+  width: 150px;
+  height: 50px;
+}
+.BoardButtonDetails__fields .InputImage__label {
+  padding: 16px 30px 0 0;
+}
+.BoardButtonDetails__fields .InputImage svg {
+  margin: 8px 4px;
+}
 .BoardButtonDetails__radiogroup {
   margin-top: 15px;
 }
+
+.BoardButtonDetails__preview .BoardButton {
+  height: 150px;
+  width: 150px;
+  margin-top: 5px;
+}
+.BoardButtonDetails__preview-title {
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-top: 24px;
+}
diff --git a/src/components/Board/BoardButtonDetails/BoardButtonDetails.js b/src/components/Board/BoardButtonDetails/BoardButtonDetails.js
index 9233d6965..a8609edc5 100644
--- a/src/components/Board/BoardButtonDetails/BoardButtonDetails.js
+++ b/src/components/Board/BoardButtonDetails/BoardButtonDetails.js
@@ -21,6 +21,7 @@ import FullScreenDialog, {
 } from '../../FullScreenDialog';
 import InputImage from '../../InputImage';
 import ColorSelection from '../../ColorSelection';
+import BoardButton from '../BoardButton';
 import './BoardButtonDetails.css';
 
 export class BoardButtonDetails extends Component {
@@ -57,7 +58,6 @@ export class BoardButtonDetails extends Component {
 
   constructor(props) {
     super(props);
-
     this.defaultBoardButton = {
       label: '',
       labelKey: '',
@@ -244,10 +244,18 @@ export class BoardButtonDetails extends Component {
         >
           <Paper>
             <FullScreenDialogContent className="BoardButtonDetails__container">
-              <div className="BoardButtonDetails__image">
-                <InputImage
-                  image={this.currentBoardButtonProp('img') || ''}
-                  onChange={this.handleInputImageChange}
+              <div className="BoardButtonDetails__preview">
+                <label className="BoardButtonDetails__preview-title">
+                  Button Preview
+                </label>
+                <BoardButton
+                  img={this.currentBoardButtonProp('img') || ''}
+                  label={currentLabel}
+                  vocalization={
+                    this.currentBoardButtonProp('vocalization') || ''
+                  }
+                  color={this.state.boardButton.color}
+                  loadBoard={this.state.loadBoard}
                 />
               </div>
               <div className="BoardButtonDetails__fields">
@@ -299,6 +307,10 @@ export class BoardButtonDetails extends Component {
                     />
                   </div>
                 )}
+                <InputImage
+                  image={this.currentBoardButtonProp('img') || ''}
+                  onChange={this.handleInputImageChange}
+                />
               </div>
             </FullScreenDialogContent>
 
diff --git a/src/components/InputImage/InputImage.js b/src/components/InputImage/InputImage.js
index 527df4769..b62015d47 100644
--- a/src/components/InputImage/InputImage.js
+++ b/src/components/InputImage/InputImage.js
@@ -58,6 +58,7 @@ class InputImage extends PureComponent {
 
   handleChange = async event => {
     const file = event.target.files[0];
+    if (!file) return;
     const resizedImage = await this.resizeImage(file);
     const imageBase64 = this.blobToBase64(resizedImage);
     this.props.onChange(imageBase64);
diff --git a/yarn.lock b/yarn.lock
index 785fd928f..a739fb0dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -117,7 +117,7 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
-ansi-escapes@^1.0.0, ansi-escapes@^1.4.0:
+ansi-escapes@^1.0.0, ansi-escapes@^1.1.0, ansi-escapes@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
@@ -860,6 +860,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-polyfill@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
+  dependencies:
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-preset-env@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
@@ -1407,6 +1415,10 @@ change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
 
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
 cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
@@ -2725,6 +2737,14 @@ extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
+external-editor@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
 external-editor@^2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.5.tgz#52c249a3981b9ba187c7cacf5beb50bf1d91a6bc"
@@ -3550,6 +3570,24 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
+inquirer@3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    chalk "^1.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.1"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx "^4.1.0"
+    string-width "^2.0.0"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
 inquirer@3.3.0, inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -4892,7 +4930,7 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -4975,6 +5013,13 @@ nock@^9.1.6:
     qs "^6.5.1"
     semver "^5.3.0"
 
+node-fetch@1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -5255,6 +5300,24 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opencollective@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
+  dependencies:
+    babel-polyfill "6.23.0"
+    chalk "1.1.3"
+    inquirer "3.0.6"
+    minimist "1.2.0"
+    node-fetch "1.6.3"
+    opn "4.0.2"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
 opn@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
@@ -5851,7 +5914,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.10.2:
+prettier@1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"
 
@@ -6449,6 +6512,10 @@ regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
 
+regenerator-runtime@^0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+
 regenerator-runtime@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
@@ -6710,6 +6777,10 @@ rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
 
+rx@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+
 rxjs@^5.4.2:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"