diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json
index 2fb6aa4..e269fd3 100644
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
@@ -119,9 +119,9 @@
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/react": {
-      "version": "16.9.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.3.tgz",
-      "integrity": "sha512-Ogb2nSn+2qQv5opoCv7Ls5yFxtyrdUYxp5G+SWTrlGk7dmFKw331GiezCgEZj9U7QeXJi1CDtws9pdXU1zUL4g==",
+      "version": "16.9.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.4.tgz",
+      "integrity": "sha512-ItGNmJvQ0IvWt8rbk5PLdpdQhvBVxAaXI9hDlx7UMd8Ie1iMIuwMNiKeTfmVN517CdplpyXvA22X4zm4jGGZnw==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index bc4672f..77b7ff7 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -36,5 +36,5 @@
       "last 1 safari version"
     ]
   },
-   "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
+  "proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
 }
diff --git a/twistter-frontend/src/App.css b/twistter-frontend/src/App.css
index ea9e7c5..00e7b76 100644
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -50,4 +50,9 @@
   margin: 80px auto 0 auto;
   max-width: 1200px;
   color: #1da1f2;
+}
+
+.post-container {
+  max-width: 345px;
+  max-height: 125px;
 }
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 142f9b7..b5ede74 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,40 +1,47 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import StaticProfile from '../components/profile/StaticProfile';
-import Grid from '@material-ui/core/Grid';
+import '../App.css';
 
+//import PropTypes from 'prop-types';
+import StaticProfile from '../components/profile/StaticProfile';
+//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 PostSkeleton from '../util/PostSkeleton';
 
-import { connect } from 'react-redux';
+//import { connect } from 'react-redux';
+
+
 
 
 class user extends Component {
   render() {
-    const postMarkup = PostSkeleton;
 
     return (
-      <b>User page</b>
-      // <Grid container spacing={16}>
-      //   <Grid item sm={8} xs={12}>
-      //     <b>postMarkup</b>
-      //     {postMarkup}
-      //   </Grid>
-      //   {/* <Grid item sm={4} xs={12}>
-      //       <StaticProfile profile={this.state.profile} />
-      //   </Grid> */}
-      // </Grid>
+      <div>
+        <h1>User Profile</h1>
+        <br/><br/>
+        
+          <Card>
+          <CardMedia
+          component="img"
+          height="140"
+          width="345"
+          image="twistter-frontend/src/images/twistter-logo.png"
+          title="Post"
+           />
+          <CardContent>
+            <b>This is the content of some post</b>
+          </CardContent>
+
+        </Card>
+        <br/><br/>
+      </div>
     )
   }
 }
 
-user.propTypes = {
-  // getUserData: PropTypes.func.isRequired,
-  //data: PropTypes.object.isRequired
-};
 
-const mapStateToProps = (state) => ({
-  data: state.data
-});
 
-export default connect(user);
+export default user;
diff --git a/twistter-frontend/src/util/theme.js b/twistter-frontend/src/util/theme.js
new file mode 100644
index 0000000..135bffc
--- /dev/null
+++ b/twistter-frontend/src/util/theme.js
@@ -0,0 +1,97 @@
+export default {
+    palette: {
+      primary: {
+        light: '#1da1f2',
+        main: '#1da1f2',
+        dark: '#008394',
+        contrastText: '#fff'
+      },
+      secondary: {
+        light: '#ff6333',
+        main: '#ff3d00',
+        dark: '#b22a00',
+        contrastText: '#fff'
+      }
+    },
+    typography: {
+      useNextVariants: true
+    },
+    form: {
+      textAlign: 'center'
+    },
+    image: {
+      margin: '20px auto 20px auto'
+    },
+    pageTitle: {
+      margin: '10px auto 10px auto'
+    },
+    textField: {
+      margin: '10px auto 10px auto'
+    },
+    button: {
+      marginTop: 20,
+      position: 'relative'
+    },
+    customError: {
+      color: 'red',
+      fontSize: '0.8rem',
+      marginTop: 10
+    },
+    progress: {
+      position: 'absolute'
+    },
+    invisibleSeparator: {
+      border: 'none',
+      margin: 4
+    },
+    visibleSeparator: {
+      width: '100%',
+      borderBottom: '1px solid rgba(0,0,0,0.1)',
+      marginBottom: 20
+    },
+    paper: {
+      padding: 20
+    },
+    profile: {
+      '& .image-wrapper': {
+        textAlign: 'center',
+        position: 'relative',
+        '& button': {
+          position: 'absolute',
+          top: '80%',
+          left: '70%'
+        }
+      },
+      '& .profile-image': {
+        width: 200,
+        height: 200,
+        objectFit: 'cover',
+        maxWidth: '100%',
+        borderRadius: '50%'
+      },
+      '& .profile-details': {
+        textAlign: 'center',
+        '& span, svg': {
+          verticalAlign: 'middle'
+        },
+        '& a': {
+          color: '#00bcd4'
+        }
+      },
+      '& hr': {
+        border: 'none',
+        margin: '0 0 10px 0'
+      },
+      '& svg.button': {
+        '&:hover': {
+          cursor: 'pointer'
+        }
+      }
+    },
+    buttons: {
+      textAlign: 'center',
+      '& a': {
+        margin: '20px 10px'
+      }
+    }
+  };
\ No newline at end of file