diff --git a/app/Http/Controllers/QrCodeController.php b/app/Http/Controllers/QrCodeController.php
index fd95a081..09585af6 100644
--- a/app/Http/Controllers/QrCodeController.php
+++ b/app/Http/Controllers/QrCodeController.php
@@ -56,6 +56,7 @@ public function decode(Request $request)
                 'name' => $service,
                 'email' => $email,
                 'uri' => $uri,
+                'icon' => '',
                 'options' => $options
             );
 
diff --git a/resources/js/app.js b/resources/js/app.js
index 65e4847a..751a189a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -11,12 +11,10 @@ import Create       from './views/Create'
 import Edit         from './views/Edit'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
-import { faQrcode } from '@fortawesome/free-solid-svg-icons'
+import { faPlusCircle, faQrcode, faImage } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faPlusCircle);
-library.add(faQrcode);
+library.add(faPlusCircle, faQrcode, faImage);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index a78b5a03..df34fed0 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -4,7 +4,7 @@
             <div class="buttons are-large is-centered">
                 <span v-for="account in accounts" class="button is-black twofaccount" >
                     <span @click.stop="getAccount(account.id)">
-                        <img src="https://fakeimg.pl/64x64/">
+                        <img :src="account.icon">
                         {{ account.name }}
                         <span class="is-family-primary is-size-7 has-text-grey">{{ account.email }}</span>
                     </span>
diff --git a/resources/js/views/Create.vue b/resources/js/views/Create.vue
index 9c761fbc..d3245633 100644
--- a/resources/js/views/Create.vue
+++ b/resources/js/views/Create.vue
@@ -11,10 +11,10 @@
                                 <div class="field">
                                     <div class="file is-dark is-boxed">
                                         <label class="file-label">
-                                            <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="fileInput">
+                                            <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
                                             <span class="file-cta">
                                                 <span class="file-icon">
-                                                    <font-awesome-icon :icon="['fas', 'qrcode']" />
+                                                    <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
                                                 </span>
                                                 <span class="file-label">Upload a qrcode</span>
                                             </span>
@@ -41,6 +41,19 @@
                                 </div>
                                 <div class="field">
                                     <label class="label">Icon</label>
+                                    <div class="file is-dark">
+                                        <label class="file-label">
+                                            <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                                            <span class="file-cta">
+                                                <span class="file-icon">
+                                                    <font-awesome-icon :icon="['fas', 'image']" />
+                                                </span>
+                                                <span class="file-label">Choose an image…</span>
+                                            </span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="field">
                                     <div class="control">
                                         <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
                                     </div>
@@ -66,7 +79,12 @@
     export default {
         data() {
             return {
-                twofaccount: {}
+                twofaccount: {
+                    'name' : '',
+                    'email' : '',
+                    'uri' : '',
+                    'icon' : ''
+                }
             }
         },
 
@@ -90,7 +108,7 @@
                 axios.defaults.headers.common['Content-Type'] = 'application/json'
                 axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
 
-                 let files = this.$refs.fileInput.files
+                 let files = this.$refs.qrcodeInput.files
 
                  if (!files.length) {
                      console.log('no files');
@@ -115,6 +133,40 @@
                         this.twofaccount = response.data;
                     }
                 )
+            },
+
+            uploadIcon(event) {
+
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                 let files = this.$refs.iconInput.files
+
+                 if (!files.length) {
+                     console.log('no files');
+                     return false;
+                 }
+                 else {
+                    console.log(files.length + ' file(s) found');
+                 }
+
+                let imgdata = new FormData();
+
+                imgdata.append('icon', files[0]); 
+
+                let config = {
+                    header : {
+                        'Content-Type' : 'multipart/form-data',
+                    }
+                }
+
+                axios.post('/api/icon/upload', imgdata, config).then(response => {
+                        console.log('icon path > ', response);
+                        this.twofaccount.icon = response.data;
+                    }
+                )
             }
         },
 
diff --git a/resources/js/views/Edit.vue b/resources/js/views/Edit.vue
index 16f1a9d2..0a534ce5 100644
--- a/resources/js/views/Edit.vue
+++ b/resources/js/views/Edit.vue
@@ -17,13 +17,26 @@
                                 <div class="field">
                                     <label class="label">Email</label>
                                     <div class="control">
-                                        <input class="input" type="email" placeholder="account email" v-model="twofaccount.email" required />
+                                        <input class="input" type="text" placeholder="account email" v-model="twofaccount.email" />
                                     </div>
                                 </div>
                                 <div class="field">
                                     <label class="label">Icon</label>
+                                    <div class="file is-dark">
+                                        <label class="file-label">
+                                            <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                                            <span class="file-cta">
+                                                <span class="file-icon">
+                                                    <font-awesome-icon :icon="['fas', 'image']" />
+                                                </span>
+                                                <span class="file-label">Choose an image…</span>
+                                            </span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="field">
                                     <div class="control">
-                                        <input class="input" type="text" placeholder="account icon" v-model="twofaccount.icon" required />
+                                        <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
                                     </div>
                                 </div>
                                 <div class="field is-grouped">
@@ -77,6 +90,40 @@
                     this.$router.push({name: 'accounts'});
                 })
             },
+
+            uploadIcon(event) {
+
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                 let files = this.$refs.iconInput.files
+
+                 if (!files.length) {
+                     console.log('no files');
+                     return false;
+                 }
+                 else {
+                    console.log(files.length + ' file(s) found');
+                 }
+
+                let imgdata = new FormData();
+
+                imgdata.append('icon', files[0]); 
+
+                let config = {
+                    header : {
+                        'Content-Type' : 'multipart/form-data',
+                    }
+                }
+
+                axios.post('/api/icon/upload', imgdata, config).then(response => {
+                        console.log('icon path > ', response);
+                        this.twofaccount.icon = response.data;
+                    }
+                )
+            }
         },
 
     }
diff --git a/routes/api.php b/routes/api.php
index 1760d1d2..aae49da0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -22,5 +22,6 @@
     Route::apiResource('twofaccounts', 'TwoFAccountController');
     Route::get('twofaccounts/{twofaccount}/totp', 'TwoFAccountController@generateTOTP')->name('twofaccounts.generateTOTP');
     Route::post('qrcode/decode', 'QrCodeController@decode');
+    Route::post('icon/upload', 'IconController@upload');
     Route::delete('twofaccounts/force/{id}', 'TwoFAccountController@forceDestroy')->name('twofaccounts.forceDestroy');
 });
\ No newline at end of file