diff --git a/public/css/app.css b/public/css/app.css
index e64aa0112..18fd4b138 100644
Binary files a/public/css/app.css and b/public/css/app.css differ
diff --git a/public/js/activity.js b/public/js/activity.js
index c20d88965..b5d04b178 100644
Binary files a/public/js/activity.js and b/public/js/activity.js differ
diff --git a/public/js/app.js b/public/js/app.js
index f26e2403b..aa9882951 100644
Binary files a/public/js/app.js and b/public/js/app.js differ
diff --git a/public/js/components.js b/public/js/components.js
index 68c03e87b..7590d1230 100644
Binary files a/public/js/components.js and b/public/js/components.js differ
diff --git a/public/js/timeline.js b/public/js/timeline.js
index 6ad6caaaf..63c09b20c 100644
Binary files a/public/js/timeline.js and b/public/js/timeline.js differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 0fb998f8a..a4f1aca3b 100644
Binary files a/public/mix-manifest.json and b/public/mix-manifest.json differ
diff --git a/resources/assets/js/components.js b/resources/assets/js/components.js
index 084325fcf..c821c06ed 100644
--- a/resources/assets/js/components.js
+++ b/resources/assets/js/components.js
@@ -43,6 +43,7 @@ require('./components/commentform');
 require('./components/searchform');
 require('./components/bookmarkform');
 require('./components/statusform');
+require('./components/settingspage');
 //require('./components/embed');
 //require('./components/notifications');
 
diff --git a/resources/assets/js/components/settingspage.js b/resources/assets/js/components/settingspage.js
new file mode 100644
index 000000000..190e22a7b
--- /dev/null
+++ b/resources/assets/js/components/settingspage.js
@@ -0,0 +1,14 @@
+$(document).ready(function () {
+    $('#avatarInput').on('change', function(e) {
+        var file = document.getElementById('avatarInput').files[0];
+        var reader = new FileReader();
+
+        reader.addEventListener("load", function() {
+            $('#previewAvatar').html('<img src="' + reader.result + '" class="rounded-circle box-shadow" />');
+        }, false);
+
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+    });
+});
diff --git a/resources/assets/sass/custom.scss b/resources/assets/sass/custom.scss
index 45068728b..f3e7ac95e 100644
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@@ -455,3 +455,10 @@ details summary::-webkit-details-marker {
 .notification-tooltip .arrow::before {
   border-bottom-color:#dc3545 !important;
 }
+
+#previewAvatar {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
diff --git a/resources/views/settings/home.blade.php b/resources/views/settings/home.blade.php
index adae0ae9d..d12fc182b 100644
--- a/resources/views/settings/home.blade.php
+++ b/resources/views/settings/home.blade.php
@@ -22,6 +22,7 @@
             <label class="custom-file-label" for="avatarInput">Select a profile photo</label>
           </div>
           <p><span class="small font-weight-bold">Must be a jpeg or png. Max avatar size: <span id="maxAvatarSize"></span></span></p>
+          <div id="previewAvatar"></div>
           <p class="mb-0"><button type="submit" class="btn btn-primary px-4 py-0 font-weight-bold">Upload</button></p>
         </div>
         </form>