diff --git a/imports/ui/components/AppLayout.jsx b/imports/ui/components/AppLayout.jsx
index 319a3b4..d86893e 100755
--- a/imports/ui/components/AppLayout.jsx
+++ b/imports/ui/components/AppLayout.jsx
@@ -11,15 +11,14 @@ import { Meteor } from 'meteor/meteor'
 import theme from './theme';
 
 // App component - represents the whole app
-export default class AppLayout extends Component {
+class AppLayout extends Component {
 
     constructor(props) {
         super(props);
 
         this.state = {
             sidebarPinned: false,
-            drawerActive: false,
-            avatar: Meteor.user().profile.avatar
+            drawerActive: false
         };
 
     }
@@ -33,11 +32,6 @@ export default class AppLayout extends Component {
             sidebarPinned: stopToggle
         });
     }
-    handler(imgUrl){
-        this.setState({
-            avatar: imgUrl
-        });
-    }
 
     name(){
         let user = Meteor.user();
@@ -64,6 +58,7 @@ export default class AppLayout extends Component {
                 rating: 'pg'
             });
         }
+        let profileImage = this.props.user.profile.avatar || gravatar || "/assets/images/HQ3YU7n.gif";
         return (
             <Layout>
                 <LeftMenu {...props}/>
@@ -71,11 +66,11 @@ export default class AppLayout extends Component {
                     <AppBarExtended>
                         <IconButton icon='menu' accent inverse={ true } onClick={ this.toggleDrawerActive.bind(this) }/>
                         <div className={theme.headerGreeting}>
-                            <span>Welcome <b>{this.name()}</b> <img src = {this.state.avatar || gravatar || "/assets/images/HQ3YU7n.gif" } width="45" height="45" /><i className="material-icons" onClick={this.logout.bind(this)}>&#xE8AC;</i></span>
+                            <span>Welcome <b>{this.name()}</b> <img src = { profileImage } width="45" height="45" /><i className="material-icons" onClick={this.logout.bind(this)}>&#xE8AC;</i></span>
                         </div>
                     </AppBarExtended>
                     <div className="page-content-wrapper" style={{ flex: 1, display: 'flex' }}>
-                        {React.cloneElement(this.props.content, {toggleSidebar: this.toggleSidebar.bind(this), handler: this.handler.bind(this)})}
+                        {React.cloneElement(this.props.content, {toggleSidebar: this.toggleSidebar.bind(this)})}
                     </div>
                 </Panel>
                 <Sidebar pinned={this.state.sidebarPinned} width={ 6 }>
@@ -89,4 +84,10 @@ export default class AppLayout extends Component {
             </Layout>
         );
     }
-}
\ No newline at end of file
+}
+
+export default createContainer(() => {
+    return {
+        user: Meteor.user()
+    };
+}, AppLayout);
\ No newline at end of file
diff --git a/imports/ui/components/settings/Settings.jsx b/imports/ui/components/settings/Settings.jsx
index bb2c9db..342f91f 100755
--- a/imports/ui/components/settings/Settings.jsx
+++ b/imports/ui/components/settings/Settings.jsx
@@ -218,7 +218,6 @@ class SettingsPage extends Component {
                 alert (error); // you may want to fancy this up when you're ready instead of a popup.
             }
             else {
-                this.props.handler(downloadUrl);
                 // we use $set because the user can change their avatar so it overwrites the url :)
                 Meteor.users.update(Meteor.userId(), {$set: {"profile.avatar": downloadUrl}});
                 console.log(downloadUrl);