diff --git a/package-lock.json b/package-lock.json
index 380114f..aa62c27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2284,6 +2284,11 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "bulma": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.2.tgz",
+      "integrity": "sha512-6JHEu8U/1xsyOst/El5ImLcZIiE2JFXgvrz8GGWbnDLwTNRPJzdAM0aoUM1Ns0avALcVb6KZz9NhzmU53dGDcQ=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -4151,6 +4156,11 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
+    },
     "event-pubsub": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
@@ -5863,6 +5873,14 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "imagesloaded": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
+      "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
+      "requires": {
+        "ev-emitter": "^1.0.0"
+      }
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -10567,6 +10585,15 @@
       "integrity": "sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ==",
       "dev": true
     },
+    "vue-images-loaded": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.1.2.tgz",
+      "integrity": "sha1-/E3bf+cIJRvN9hmYeVcUkb9YP8g=",
+      "requires": {
+        "imagesloaded": "^4.1.1",
+        "vue": "^2.1.0"
+      }
+    },
     "vue-loader": {
       "version": "15.6.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.6.0.tgz",
diff --git a/package.json b/package.json
index 31b09c5..1ad9bab 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,10 @@
     "deploy-dev": "npm run build-dev && .\\deploy.bat"
   },
   "dependencies": {
+    "bulma": "^0.7.2",
     "unsplash-js": "^4.8.0",
-    "vue": "^2.5.21"
+    "vue": "^2.5.21",
+    "vue-images-loaded": "^1.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",
diff --git a/public/index.html b/public/index.html
index a041f54..6d9e66c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <title>unsplash-element</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 7d2a7f8..4bb0a51 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,54 @@
 /* global CustomElement */
 <template>
-  <div id="app" v-if="loaded">
-    <h1>Unsplash</h1>
-    <input :disabled="element.disabled" v-model="searchTerm" placeholder="edit me">
-    <button @click="searchPhotos">Search</button>
-    <button @click="updateSize">Height?</button>
+  <section class="section" id="app" v-if="loaded">
+    <div class="container">
+      <h1 class="title">Unsplash</h1>
+    <div>
+      <div class="field has-addons">
+        <div class="control">
+          <input
+            class="input is-rounded"
+            :disabled="element.disabled"
+            v-model="searchTerm"
+            placeholder="edit me"
+            @keyup.enter="searchPhotos"
+            @keyup.esc="searchTerm = ''"
+          >
+        </div>
+        <div class="control">
+          <button @click="searchPhotos" class="button is-rounded is-info">
+            <span class="icon">
+              <i class="fas fa-search"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="control">
+        <button class="button" @click="updateSize">Height?</button>
+      </div>
+    </div>
+
     <p>Saved: {{ value }} {{ height }}</p>
-    <div class="masonry">
+    <div class="masonry" v-imageload="updateSize">
       <div class="item" v-for="result in searchResults.results" :key="result.id">
-        <img :src="result.urls.thumb" />
+        <img :src="result.urls.small" />
+        <div>
+          <img :src="result.user.profile_image.small" />
+          {{ result.user.name }}
+          <button>Select</button>
+        </div>
         {{ result.description}}
       </div>
     </div>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script>
-import Unsplash, { toJson } from 'unsplash-js'
+//import Unsplash, { toJson } from 'unsplash-js'
 import SampleData from './sample.json'
+import BeachSampleData from './sample-beach.json'
+import imageload from 'vue-images-loaded'
 
 export default {
   name: 'app',
@@ -36,14 +67,18 @@ export default {
       return this.element.value
     },
     unsplashInstance() {
-      return this.loaded
-        ? new Unsplash({
-            applicationId: this.element.config.accessKey,
-            secret: this.element.config.secretKey
-          })
-        : null
+      // return this.loaded
+      //   ? new Unsplash({
+      //       applicationId: this.element.config.accessKey,
+      //       secret: this.element.config.secretKey
+      //     })
+      //   : null
+      return {}
     }
   },
+  directives: {
+    imageload
+  },
   methods: {
     searchPhotos() {
       if(this.unsplashInstance && this.searchTerm) {
@@ -52,13 +87,14 @@ export default {
         // .then(json => {
         //   this.searchResults = json
         // })
-        this.searchResults = SampleData
+
+        this.searchResults = this.searchTerm === 'beach' ? BeachSampleData : SampleData
       }
     },
     updateSize() {
       // Update the custom element height in the Kentico UI.
       const height = document.documentElement.offsetHeight
-
+      //const diff = height - this.height
       this.height = height
       CustomElement.setHeight(height);
     }
@@ -76,12 +112,16 @@ export default {
       this.element = element
       this.context = context
       this.loaded = true
+
+      this.$nextTick(function() {
+        this.updateSize()
+      })
     })
   },
   updated: function() {
-    this.$nextTick(function() {
-      this.updateSize()
-    })
+    // this.$nextTick(function() {
+    //   this.updateSize()
+    // })
   }
 }
 
@@ -97,7 +137,7 @@ body {
   background-color: orangered;
 }
 .masonry { /* Masonry container */
-    column-count: 4;
+    column-count: 3;
     column-gap: 1em;
 }
 
diff --git a/src/main.js b/src/main.js
index 63eb05f..e3df5b9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import 'bulma/css/bulma.css'
 
 Vue.config.productionTip = false
 
