diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 482ba0f..0c7b100 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1292,6 +1292,18 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.51",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.51.tgz",
+      "integrity": "sha512-X/qv/sZQGhXhKDn83L94gNahGDQj2Rd6r7/9tPpQbSn2A1LAt1+jlTiWD1HUgDXZEPqTsJMajOjWSEmTL7/q7w==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.9.10",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e197578..870a97b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,41 +1,42 @@
 {
-  "name": "simcompanies-dashboard",
-  "version": "0.1.0",
-  "homepage": "https://projects.oliver.boehlk.io/simcompanies/",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.9.8",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "^7.2.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "typeface-roboto": "0.0.75",
-    "recharts": "^1.8.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "proxy": "http://127.0.0.1:3001"
-}
\ No newline at end of file
+    "name": "simcompanies-dashboard",
+    "version": "0.1.0",
+    "homepage": "https://projects.oliver.boehlk.io/simcompanies/",
+    "private": true,
+    "dependencies": {
+        "@material-ui/core": "^4.9.8",
+        "@material-ui/icons": "^4.9.1",
+        "@material-ui/lab": "^4.0.0-alpha.51",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.4.0",
+        "@testing-library/user-event": "^7.2.1",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0",
+        "react-router-dom": "^5.1.2",
+        "react-scripts": "3.4.0",
+        "recharts": "^1.8.5",
+        "typeface-roboto": "0.0.75"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "proxy": "http://127.0.0.1:3001"
+}
diff --git a/frontend/src/components/login/createAccount.js b/frontend/src/components/login/createAccount.js
index 541ea5c..f1d4c5d 100644
--- a/frontend/src/components/login/createAccount.js
+++ b/frontend/src/components/login/createAccount.js
@@ -10,6 +10,7 @@ import Logo from "../../img/logo.png";
 import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import { Redirect } from "react-router-dom";
+import LoginFeedback from './loginfeedback';
 
 const url = "/simcompanies/API/user/create"
 
@@ -59,14 +60,12 @@ const CssTextField = withStyles({
     },
 })(TextField);
 
-
-
 export default function CreateAccount() {
     const classes = useStyles();
     const [username, setUsername] = React.useState("");
     const [password, setPassword] = React.useState("");
     const [login, setLogin] = React.useState(true);
-
+    const [status, setStatus] = React.useState(null);
 
     const putCreateAccount = async (url, data) => {
         const response = await fetch(url, {
@@ -80,7 +79,7 @@ export default function CreateAccount() {
             referrerPolicy: 'no-referrer',
             body: JSON.stringify(data)
         });
-
+        setStatus(response.status)
         if (response.status == "200") {
             setLogin(false)
         }
@@ -157,6 +156,7 @@ export default function CreateAccount() {
                         </form>
                     </CardContent>
                 </Card>
+                <LoginFeedback login={status} successText="Account created successfully" errorText="Oops something went wrong"></LoginFeedback>
             </Box > : <Redirect to={"/login"} />
     )
 
diff --git a/frontend/src/components/login/login.js b/frontend/src/components/login/login.js
index 3dc4036..10ba5ca 100644
--- a/frontend/src/components/login/login.js
+++ b/frontend/src/components/login/login.js
@@ -11,6 +11,7 @@ import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import Link1 from '@material-ui/core/Link';
 import { Redirect } from "react-router-dom";
+import LoginFeedback from './loginfeedback';
 
 
 const useStyles = makeStyles(theme => ({
@@ -33,7 +34,7 @@ const useStyles = makeStyles(theme => ({
 const CssTextField = withStyles({
     root: {
         '& label.Mui-focused': {
-            color: 'white',
+            color: "#FFC800",
         },
         '&:hover label': {
             color: '#FFC800',
@@ -53,7 +54,7 @@ const CssTextField = withStyles({
                 borderColor: "#FFC800",
             },
             '&.Mui-focused fieldset': {
-                borderColor: 'white',
+                borderColor: "#FFC800",
             },
         },
     },
@@ -66,7 +67,7 @@ export default function Login() {
     const [username, setUsername] = React.useState("");
     const [password, setPassword] = React.useState("");
     const [login, setLogin] = React.useState(true);
-
+    const [status, setStatus] = React.useState(null);
 
     const postLogin = async (url, data) => {
         const response = await fetch(url, {
@@ -80,7 +81,7 @@ export default function Login() {
             referrerPolicy: 'no-referrer',
             body: JSON.stringify(data)
         });
-
+        setStatus(response.status)
         if (response.status == "200") {
             setLogin(false)
         }
@@ -161,7 +162,7 @@ export default function Login() {
                                         <Box display="flex" justifyContent="center"  >
                                             <Button variant="contained" color="secondary" onClick={handleClick}>
                                                 Login
-                                    </Button>
+                                            </Button>
                                         </Box >
                                     </Grid>
                                 </Grid>
@@ -169,6 +170,7 @@ export default function Login() {
                         </form>
                     </CardContent>
                 </Card>
+                <LoginFeedback login={status} successText="Login Successful" errorText="Wrong Username or Password"></LoginFeedback>
             </Box > : <Redirect to='/' />
     )
 
diff --git a/frontend/src/components/login/loginfeedback.js b/frontend/src/components/login/loginfeedback.js
new file mode 100644
index 0000000..3ac61d4
--- /dev/null
+++ b/frontend/src/components/login/loginfeedback.js
@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export default function LoginFeedback(props) {
+    const [login, setLogin] = React.useState(null);
+    const [open, setOpen] = React.useState(true);
+    const [open1, setOpen1] = React.useState(true);
+    useEffect(() => {
+        if (login != props.login) {
+            setLogin(props.login)
+        }
+    }, [login, setLogin, props.login]);
+    const handleClose = (event, reason) => {
+        setOpen(false);
+    };
+    const handleClose1 = (event, reason) => {
+        setOpen1(false);
+    };
+
+    const snack = (login) => {
+        if (login == "200") {
+            return (
+                <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
+                    <Alert onClose={handleClose} severity="success">
+                        {props.successText}
+                    </Alert>
+                </Snackbar>)
+        } else if (login != null) {
+            return (
+                <Snackbar open={open1} autoHideDuration={3000} onClose={handleClose1}>
+                    <Alert onClose={handleClose1} severity="error">
+                        {props.errorText}
+                    </Alert>
+                </Snackbar>
+            )
+        }
+    }
+
+    return (
+        <React.Fragment>
+            {snack(login)}
+        </React.Fragment>
+
+    )
+
+}