diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json
index 1e60fab..5b4b20d 100644
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
@@ -454,9 +454,9 @@
           }
         },
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         }
       }
     },
diff --git a/twistter-frontend/src/App.css b/twistter-frontend/src/App.css
index 0bfca90..940f1fc 100644
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -1,3 +1,7 @@
+html,
+body {
+  background-color: rgb(245, 245, 245);
+}
 .app {
   font-family: "Segoe UI";
   font-size: large;
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index a9faf1b..f1113a0 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,32 +1,46 @@
 /* eslint-disable */
 import React, { Component } from 'react';
+import axios from 'axios';
 //import '../App.css';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+
 
 const PostCard = styled(Card)({
   background: 'linear-gradient(45deg, #1da1f2 90%)',
   border: 3,
   borderRadius: 3,
-  height:225,
-  width: 645,
+  height:325,
+  width: 345,
   padding: '0 30px',
 });
 
+
 class user extends Component {
+  componentDidMount(){
+    //TODO: get user details
+    //TODO: get posts
+  }
+
   render() {
-    
     return (
-      <div>
-        <h1>User Profile</h1>
-        <br/><br/>
-        <PostCard>Some card and content</PostCard>
-        <br/><br/>
-      </div>
-    )
+      <Grid container spacing={16}>
+        <Grid item sm={8} xs={12}>
+          <p>Post</p>
+        </Grid>
+        <Grid item sm={4} xs={12}>
+          <PostCard>
+            <CardMedia image="./no-img-png" />
+            <CardContent>Username</CardContent>
+          </PostCard>
+        </Grid>
+      </Grid>
+    );
   }
 }