diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 6b1da52d..dadd63e7 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -38,7 +38,6 @@ export default class UserGenPage extends Component {
       });
   }
 
-
   // Fix next two handler functions so they work sequentially
   // at the moment they make the request generate a new user in parallel
   // to updating the token in the state. So the it works a bit weird.
@@ -74,12 +73,13 @@ export default class UserGenPage extends Component {
             />
           </Grid>
           <Grid item xs={12} align="center">
-            <div style={{ width: 200, height: 200 }}>
-            <Image
-              imageStyle={{ width: 200, height: 200}}
-              disableError='true'
-              src={this.state.avatar_url}
-            />
+            <div style={{ maxWidth: 200, maxHeight: 200 }}>
+              <Image className='newAvatar'
+                disableError='true'
+                animationDuration='1500'
+                cover='true'
+                src={this.state.avatar_url}
+              />
             </div>
           </Grid>
           <Grid item xs={12} align="center">
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 24267672..def12e47 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -23,4 +23,13 @@ body {
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
+}
+
+.newAvatar {
+  background-color:white; 
+  border-radius: 50%; 
+  border: 2px solid #555; 
+  filter: drop-shadow(1px 1px 1px #000000);
+  height: 200px;
+  width: 200px;
 }
\ No newline at end of file