diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index b2a1f889..c68af5d3 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -60,7 +60,7 @@ export default class App extends Component {
             {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
           </IconButton>
           <UnsafeAlert className="unsafeAlert"/>
-          <HomePage/>
+          <HomePage {...this.state}/>
         </ThemeProvider>
       </I18nextProvider>
       </Suspense>
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index e3fae635..184e6d3d 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -44,11 +44,11 @@ export default class HomePage extends Component {
               <Router >
                   <div className='appCenter'>
                     <Switch>
-                        <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/make' render={(props) => <MakerPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/book' render={(props) => <BookPage {...props} {...this.state} setAppState={this.setAppState} />}/>
-                        <Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
+                        <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/make' render={(props) => <MakerPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/book' render={(props) => <BookPage {...props} {...this.state} {...this.props} setAppState={this.setAppState} />}/>
+                        <Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
                     </Switch>
                   </div>
                   <div className='bottomBar'>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index c1eef8f2..fcdbd99d 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -181,6 +181,7 @@ class UserGenPage extends Component {
 
   render() {
     const { t, i18n} = this.props;
+    const fontSize = this.props.theme.typography.fontSize;
     return (
       <Grid container spacing={1}>
         <Grid item>
@@ -200,6 +201,7 @@ class UserGenPage extends Component {
               </Grid>
               <Grid item xs={12} align="center">
               <Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
+<<<<<<< HEAD
                 <div style={{ maxWidth: 200, maxHeight: 200 }}>
                   <SmoothImage
                     src={this.state.avatarUrl}
@@ -208,6 +210,16 @@ class UserGenPage extends Component {
                       filter: "drop-shadow(1px 1px 1px #000000)",
                       height: "195px",
                       width: "200px"}}
+=======
+                <div style={{ maxWidth: fontSize * 14.28, maxHeight: fontSize * 14.28, alignText: "center"}}>
+                  <Image 
+                    className='newAvatar'
+                    imageStyle={{height: fontSize * 14.28, width: fontSize * 14.28}} // factor = originalSize/default_fontSize = 200/14 = 14.28
+                    disableError={true}
+                    cover={true}
+                    color='null'
+                    src={getCookie("sessionid") ? this.state.avatarUrl || "" : ""}
+>>>>>>> Scale avatar width and R. Pass theme as prop to class components.
                   />
                 </div>
                 </Tooltip>
@@ -319,7 +331,9 @@ class UserGenPage extends Component {
                   </Typography>
                 </Grid>
                 <Grid item xs={2.5} align="left">
-                    <RoboSatsNoTextIcon color="primary" sx={{height:72, width:72}}/>
+                    <RoboSatsNoTextIcon color="primary" 
+                      sx={{height: fontSize * 5.14, width: fontSize * 5.14}} // factor = originalSize/default_fontSize = 272/14 = 5.14
+                      />
                 </Grid>
               </Grid>
             </div>
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 44dde160..c9395a30 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -87,6 +87,12 @@ input[type=number] {
   left: -16px;
 }
 
+.newAvatar {
+  border-radius: 50%; 
+  border: 2px solid #555; 
+  filter: drop-shadow(1px 1px 1px #000000);
+}
+
 .profileAvatar {
   border: 0.5px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);