diff --git a/source-code/front-end/package.json b/source-code/front-end/package.json
index 85de666..0607ed4 100644
--- a/source-code/front-end/package.json
+++ b/source-code/front-end/package.json
@@ -9,14 +9,17 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.2.0",
     "@mui/material": "^5.2.2",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
+    "nodemon": "^2.0.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-progressbar-fancy": "^1.1.4",
     "react-router-dom": "^5.2.0",
     "react-s3": "^1.3.1",
     "react-scripts": "4.0.3",
diff --git a/source-code/front-end/src/components/bg_img.jpg b/source-code/front-end/src/components/bg_img.jpg
new file mode 100644
index 0000000..2bab473
Binary files /dev/null and b/source-code/front-end/src/components/bg_img.jpg differ
diff --git a/source-code/front-end/src/components/bgimg.jpg b/source-code/front-end/src/components/bgimg.jpg
new file mode 100644
index 0000000..255518f
Binary files /dev/null and b/source-code/front-end/src/components/bgimg.jpg differ
diff --git a/source-code/front-end/src/components/landing.js b/source-code/front-end/src/components/landing.js
index 1986cef..bcc057d 100644
--- a/source-code/front-end/src/components/landing.js
+++ b/source-code/front-end/src/components/landing.js
@@ -2,6 +2,32 @@ import axios from 'axios';
 import { uploadFile } from 'react-s3';
 import config from '../util';
 import  {useState} from "react";
+
+import {ProgressBar} from "react-progressbar-fancy";
+import { AppBar, Button, Card, Container, TextField, Typography } from '@material-ui/core';
+import  {makeStyles}  from '@material-ui/core/';
+import bg_img from './bgimg.jpg'
+import LogoutIcon from '@mui/icons-material/Logout';
+import { width } from '@mui/system';
+// import { useNavigate } from "react-router-dom";
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  
+};
+
+const useStyles= makeStyles({
+    button1: {
+        width:200,
+        height:50,
+        fontSize: 20
+      }
+})
 import Cards from './cards';
 import '../App.css';
 const answer=
@@ -22,13 +48,17 @@ const answer=
             }
         ]
     };
+
 export default function Landing() {
     const [name, setName] = useState('');
     const [location, setLocation] = useState('');
     const [resumeUrl, setResumeURL] = useState('');
     const [items, setItems] = useState([]);
     const [job, setJob] = useState('');
+    const [score, setScore] = useState(25);
+    // const navigate = useNavigate();
 
+const Classes = useStyles()
 const handleChange = event => {
     this.setState({ name: event.target.value });
   }
@@ -50,11 +80,17 @@ const  onFromSubmit = event => {
     axios.get(`https://jsonplaceholder.typicode.com/users`, { user })
       .then(res => {
         console.log(res);
-        console.log(res.data);
-        // this.setState({ items: res.data });
+        console.log(res.data.length);
           setItems(res.data)
-        // console.log('-->',this.state.items);
+          let sum = 0;
+          for (let i = 0; i < res.data.length; i++){
+              sum = sum + res.data.simscore
+              console.log(res.data[i])
+          }
+          let avg = sum / res.data.length
+          setScore(avg)
       })
+    // navigate('/results')
   }
     
     const uplaod = e =>{
@@ -64,6 +100,7 @@ const  onFromSubmit = event => {
   .then((data)=>{
       console.log(data.location);
     //   this.setState({ resumeUrl: data.location });
+
       setResumeURL(data.location);
       console.log('-->', setResumeURL);
       const setA = answer.jobPostingsList.keywords.split(" ");
@@ -78,10 +115,11 @@ const  onFromSubmit = event => {
     }
     
     console.log("&&**&&**&&**&&",diff);
+
       
   })
   .catch((err)=>{
-    alert('Inside this');
+    // alert('Inside this');
       alert(err);
 
 
@@ -110,41 +148,107 @@ const  onFromSubmit = event => {
 }
     
     return (
-        <div>
-            <div className="myDiv" >
-                <form onSubmit={onFromSubmit}>
-                    <label className="label_class">
-                        Enter your current job:
-                    </label>
-                    <br />
-                    <input className="input_class" type="text" name="name"
+        // <div style={{ backgroundColor: "black" }}>
+           <div style={{ backgroundImage: `url(${bg_img})` }}>
+        {/* <div style={{ backgroundImage: bg_img}> */}
+        
+        <Container style={{
+            display: "flex",
+            flexDirection: "column",
+                alignItems: "center",
+                height:"100%",
+            backgroundImage:bg_img
+            }}>
+                {/* <AppBar style={{ backgroundColor:"black" , alignItems:"flex-end", marginRight:"20px", marginTop:"10px"}}>
+                <LogoutIcon fontSize="large"/>
+            </AppBar> */}
+            <br />
+                <br />
+                
+            <Card style={{
+                width: 500,
+                alignItems: "center",
+                
+            }}
+            >
+                <Container>
+                {/* <form onSubmit={onFromSubmit}> */}
+                <br/>
+                    <Typography variant="h6">Enter your current job:</Typography>
+                        
+                    <TextField fullWidth variant="outlined" type="text" name="name"
                         onChange={e=>setJob(e.target.value)} />
-
-                    <label className="label_class">
+<br/><br/>
+                    <Typography variant="h6" >
                         Enter your current Location:
-                    </label>
-                    <br />
-                    <input className="input_class" type="text" name="location" onChange={e=>setLocation(e.target.value)} />
-
-                    <label className="label_class">
+                    </Typography>
+                    
+                    <TextField fullWidth variant="outlined"  type="text" name="location" onChange={e=>setLocation(e.target.value)} />
+<br/><br/>
+                    <Typography variant="h6">
                         Upload your resume:
-                    </label>
+                    </Typography><br/>
                     <input type="file" onChange={uplaod}></input>
-               
-                    <button className="button_class" type="submit">Search</button>
-                </form>
-            </div>
+               <br/><br/>
+                        <Button variant="contained"
+                            onClick={onFromSubmit}
+                            className={Classes.button1} type="submit">Search</Button>
+                    {/* </form> */}<br/><br/>
+                    <br/>
+                </Container>
+            </Card>
 
+                        
+                <br />
+                <Container>
             <div className="result_class">
                 {items.length > 0 &&
                     <div className="container">
+
+                        <div className="card__container">
+                            <div className="card">
+                                <div className="card__content">
+                                    <h3 className="card__header">Amazon</h3>
+                                    <h4 className="card__header2">Front End Developer</h4>
+                                    <p className="card__info">HTML, CSS JavaScript, react, Node</p>
+                                    <button className="card__button">Apply Now</button>
+                                </div>
+                            </div>
+                            <div className="card">
+                                <div className="card__content">
+                                    <h3 className="card__header">Microsoft</h3>
+                                    <h4 className="card__header2">Azure Developer</h4>
+                                    <p className="card__info">Java, Azure, Cloud, Python scripting</p>
+                                    <button className="card__button">Apply Now</button>
+                                </div>
+                            </div>
+                            <div className="card">
+                                <div className="card__content">
+                                    <h3 className="card__header">IBM</h3>
+                                    <h4 className="card__header2">data Scientist</h4>
+                                    <p className="card__info">Pyhton, R, Machine Learning, Ai</p>
+                                    <button className="card__button">Apply Now</button>
+                                </div>
+                            </div>
+                            </div>
+                            <br/>
+                            <Container style={{ width:"75%" }}>
+            <ProgressBar
+                progressColor={"purple"}
+                darkTheme
+                score={score} />
+                </Container >
+
                         
                            <Cards/>
                         
+
                     </div>
                 }
             </div>
+            </Container>
        
-        </div>
+            </Container>
+            </div>
     )
 }
\ No newline at end of file
diff --git a/source-code/front-end/src/components/preview.png b/source-code/front-end/src/components/preview.png
new file mode 100644
index 0000000..3e8ef9c
Binary files /dev/null and b/source-code/front-end/src/components/preview.png differ
diff --git a/source-code/front-end/src/components/results.js b/source-code/front-end/src/components/results.js
new file mode 100644
index 0000000..e69de29
diff --git a/source-code/front-end/src/components/user/login.js b/source-code/front-end/src/components/user/login.js
index 174cc33..d5216de 100644
--- a/source-code/front-end/src/components/user/login.js
+++ b/source-code/front-end/src/components/user/login.js
@@ -99,7 +99,7 @@ export default function Login() {
             </Grid>
             </Box>
             <Grid item>
-            <Button onClick={loginUser} className={Classes.button1} variant="contained" color="success">
+            <Button onClick={loginUser} className={Classes.button1} variant="contained" style={{backgroundColor:"black"}}>
                 Login
             </Button>
             </Grid>
diff --git a/source-code/front-end/src/components/waiting.js b/source-code/front-end/src/components/waiting.js
new file mode 100644
index 0000000..e69de29
diff --git a/source-code/front-end/src/components/waiting.png b/source-code/front-end/src/components/waiting.png
new file mode 100644
index 0000000..7b0ca6e
Binary files /dev/null and b/source-code/front-end/src/components/waiting.png differ