diff --git a/client/src/components/forms/UserForm/index.tsx b/client/src/components/forms/UserForm/index.tsx
index 20e8db18c2b08adc305d3f936b85778aa38dd337..dac9e6005a176839f0b1b34e073e633b7b03ad15 100644
--- a/client/src/components/forms/UserForm/index.tsx
+++ b/client/src/components/forms/UserForm/index.tsx
@@ -19,7 +19,7 @@ interface Props {
     user: User
 }
 
-const validTypes = ['image/jpg', 'image/png', 'image/gif', 'image/svg']
+const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg']
 
 function validateEmail(email?: string): string | null {
     if (email && email.length > 0) {
diff --git a/client/src/components/ui/Avatar/avatar.scss b/client/src/components/ui/Avatar/avatar.scss
index 424b21e7567fb1a312abc4951ef2fd59fb1bfc00..d487a3aa8dc7206e6d34db8d6669ede6254a8727 100644
--- a/client/src/components/ui/Avatar/avatar.scss
+++ b/client/src/components/ui/Avatar/avatar.scss
@@ -6,11 +6,6 @@
     overflow: hidden;
 
     img {
-        width: 100%;
-        height: auto;
-    }
-
-    .standard-image {
         width: 100%;
         height: 100%;
         background: s.$secondary;
diff --git a/client/src/components/ui/Avatar/index.tsx b/client/src/components/ui/Avatar/index.tsx
index 58e96bcd215a80591539db07c8b8e13cc6d00346..6096333514ded1f92c0722f3212746769d383fd6 100644
--- a/client/src/components/ui/Avatar/index.tsx
+++ b/client/src/components/ui/Avatar/index.tsx
@@ -1,6 +1,4 @@
 
-import { useCallback, useState } from 'react';
-
 import { getUserImageUri, User } from 'adapters/user';
 
 import './avatar.scss';
@@ -10,27 +8,11 @@ interface Props {
 }
 
 export default function Avatar({ user }: Props) {
-    const [error, setError] = useState(false);
     const avatarSrc = user && getUserImageUri(user.id);
 
-    const onError = useCallback(() => {
-        setError(true);
-    }, [setError]);
-
     return (
         <div className="avatar">
-            {
-                !error && (
-                    <img src={avatarSrc} alt={user?.username} onError={onError} />
-                )
-            }
-            {
-                error && (
-                    <div className="standard-image">
-                        {user?.username && user.username.charAt(0)}
-                    </div>
-                )
-            }
+            <img src={avatarSrc} alt={user?.username.charAt(0) ?? "?"} />
         </div>
     )
 }
diff --git a/client/src/pages/Settings/index.tsx b/client/src/pages/Settings/index.tsx
index 543d876d27dd6bb598ba6e25630f9f7e98b9eeea..daad87b7f6185b527bc5354dfb101bf6b60d361d 100644
--- a/client/src/pages/Settings/index.tsx
+++ b/client/src/pages/Settings/index.tsx
@@ -2,6 +2,7 @@
 import { useHistory } from 'react-router';
 import { useCallback, useEffect, useState } from 'react';
 
+import { reload } from 'index';
 import { getCurrentUser, updateUser, updateUserImage, User } from 'adapters/user';
 
 import Callout from 'components/ui/Callout';
@@ -16,21 +17,21 @@ export default function Settings() {
     const history = useHistory();
 
     useEffect(() => {
-        getCurrentUser().then((user) => setUser(user))
+        getCurrentUser().then(setUser)
     }, []);
 
     const handleSubmit = useCallback(async (name?: string, email?: string, avatar?: File) => {
         try {
-            if (user && updateUser({ realname: name, email })) {
-                if (avatar) {
-                    updateUserImage(avatar);
-                }
-                history.push('/tasks');
-            }
+            await Promise.all([
+                updateUser({ realname: name, email: email }),
+                avatar && updateUserImage(avatar)
+            ])
+            history.push('/tasks');
+            reload();
         } catch (e) {
             setError('There was an issue with saving your settings. Please try again!')
         }
-    }, [history, user]);
+    }, [history]);
 
     return (
         user