diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json
index e269fd3..f7ffc91 100644
--- a/twistter-frontend/package-lock.json
+++ b/twistter-frontend/package-lock.json
@@ -62,9 +62,9 @@
       }
     },
     "@material-ui/styles": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.4.3.tgz",
-      "integrity": "sha512-kNUdHFWsrvWKIEPx8Xy2/qayqsGMrYmCMq+FIiJiYczVZl5hiS8j5+KayonnpVta/O+Dktk+cxWkVcgwtxMrHg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.0.tgz",
+      "integrity": "sha512-O0NSAECHK9f3DZK6wy56PZzp8b/7KSdfpJs8DSC7vnXUAoMPCTtchBKLzMtUsNlijiJFeJjSxNdQfjWXgyur5A==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.7.1",
@@ -74,21 +74,21 @@
         "csstype": "^2.5.2",
         "deepmerge": "^4.0.0",
         "hoist-non-react-statics": "^3.2.1",
-        "jss": "10.0.0-alpha.25",
-        "jss-plugin-camel-case": "10.0.0-alpha.25",
-        "jss-plugin-default-unit": "10.0.0-alpha.25",
-        "jss-plugin-global": "10.0.0-alpha.25",
-        "jss-plugin-nested": "10.0.0-alpha.25",
-        "jss-plugin-props-sort": "10.0.0-alpha.25",
-        "jss-plugin-rule-value-function": "10.0.0-alpha.25",
-        "jss-plugin-vendor-prefixer": "10.0.0-alpha.25",
+        "jss": "^10.0.0",
+        "jss-plugin-camel-case": "^10.0.0",
+        "jss-plugin-default-unit": "^10.0.0",
+        "jss-plugin-global": "^10.0.0",
+        "jss-plugin-nested": "^10.0.0",
+        "jss-plugin-props-sort": "^10.0.0",
+        "jss-plugin-rule-value-function": "^10.0.0",
+        "jss-plugin-vendor-prefixer": "^10.0.0",
         "prop-types": "^15.7.2"
       }
     },
     "@material-ui/system": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.4.3.tgz",
-      "integrity": "sha512-Cb05vLXsaCzssXD/iZKa0/qC6YOwbFWnYdnOEdkXZ3Fn2Ytz7rsnMgFejUSQV1luVhUBlEIm8DVz40N25WwW7w==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.0.tgz",
+      "integrity": "sha512-vR0PbMTzLnuuVCoYNQ13zyhLa/4s/UA9P9JbNuHBOOkfrHn53ShINiG0v05EgfwizfULLtc7mNvsGAgIyyp/hQ==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "deepmerge": "^4.0.0",
@@ -5196,9 +5196,9 @@
       }
     },
     "jss": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-zqKnXv181B9vue2yYhmVhc+6ggbbxHF/33rjXfXEjaa22nOvknTI21QDfq3oZ8uCC50kcFp3Z8KU1ghUXdFvIA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz",
+      "integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^2.6.5",
@@ -5207,69 +5207,69 @@
       }
     },
     "jss-plugin-camel-case": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-J5ZEGDTy9ddqdTUPAF4SJQ25u5kiG1ORP8F+ZPEZAkkiMQJp+/Aol4I7xhTS2aW1Lhg8xNxdhdRfBi5yU7wOvg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz",
+      "integrity": "sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jss-plugin-default-unit": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-auOG459B+yEqkojgaXH02SYO9+xjmAxlmP+WbzhVpXqOFJ2CN/kaxd8P4NJZLdj3BQxHiM7WIyMVh786StE+EA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz",
+      "integrity": "sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jss-plugin-global": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-cS98Q8X8jwltuaBZd9eYuxMXxkUL+mJGl2Ok3/nmJzH9nLzj6i7kLxSoDtuJNqsRmbP7ogIXVozJUq9lUu2hlQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz",
+      "integrity": "sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jss-plugin-nested": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-7sk7/6mX1YTgXe+AyeD1zEyKTgIGbbhYtg+wWQcHJlE1flW2JHfcQ5mw84FgHcHQRQ8Dq3l9I3aEY51ev0J1Wg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz",
+      "integrity": "sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.0.0-alpha.25",
+        "jss": "10.0.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-props-sort": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-8B/6QLQuUX8cIlZbXdjEm5l0jCX4EgacYMcFJhdKwDKEZYeAghpgQQrCKl0/CYHW7iFge5wim67P+uL6QxMzyw==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz",
+      "integrity": "sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jss-plugin-rule-value-function": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-CQQtWO+/OZRGaFRBSGQUgAci9YlVtdoXcWQKBNo70tmpp+kaXKlFNCYaL3jmHbJHMiwKQYG2RYFQNIrwJ9SGmA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz",
+      "integrity": "sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jss-plugin-vendor-prefixer": {
-      "version": "10.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.25.tgz",
-      "integrity": "sha512-5FXpB/TiwckbrkoDCmd27YsWCESl1K4hAX/oro2/geEXgnVQvDgQOf2eWCsjYO2K1lYPPXtskMfws/Q3eKmbYg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz",
+      "integrity": "sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "css-vendor": "^2.0.6",
-        "jss": "10.0.0-alpha.25"
+        "jss": "10.0.0"
       }
     },
     "jsx-ast-utils": {
diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json
index 77b7ff7..003bf65 100644
--- a/twistter-frontend/package.json
+++ b/twistter-frontend/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.4.3",
+    "@material-ui/styles": "^4.5.0",
+    "@material-ui/system": "^4.5.0",
     "axios": "^0.19.0",
     "clsx": "^1.0.4",
     "create-react-app": "^3.1.2",
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index b5ede74..a9faf1b 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -1,41 +1,29 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import '../App.css';
-
-//import PropTypes from 'prop-types';
-import StaticProfile from '../components/profile/StaticProfile';
-//import Grid from '@material-ui/core/Grid';
+//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 PostSkeleton from '../util/PostSkeleton';
-
-//import { connect } from 'react-redux';
-
-
 
+const PostCard = styled(Card)({
+  background: 'linear-gradient(45deg, #1da1f2 90%)',
+  border: 3,
+  borderRadius: 3,
+  height:225,
+  width: 645,
+  padding: '0 30px',
+});
 
 class user extends Component {
   render() {
-
+    
     return (
       <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>
+        <PostCard>Some card and content</PostCard>
         <br/><br/>
       </div>
     )