diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
index 6178e74..758cada 100644
--- a/src/main/Homepage/feedback/FeedBackDB.js
+++ b/src/main/Homepage/feedback/FeedBackDB.js
@@ -6,12 +6,29 @@ const API_URL = "http://localhost:8000";
 export default class FeedBackService {
     constructor() {}
 
-    getEmeddingList() {
+    getEmeddingList() { // Get the list of faceid
         const url = `${API_URL}/api/faceid/`;
         return axios.get(url).then(response => response.data);
     }
-    getFeedbackList() {
+    getFeedbackList() { //get the info saved in feedback table
         const url = `${API_URL}/api/feedback/`;
         return axios.get(url).then(response => response);
     }
+    postFeedbackList(postedValue) { //post to update or add suggested name in feedback feature
+        const url = `${API_URL}/api/feedback/`;
+
+        let form_data = new FormData();
+        form_data.set('id',postedValue.id);
+        form_data.set('suggestedName',postedValue.suggestedName);
+        form_data.set('upvote',postedValue.upvote);
+        form_data.set('downvote',postedValue.downvote);
+        form_data.set('feedback_id',postedValue.feedback_id);
+
+        return axios.post(url, form_data, {
+             headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+          },
+
+        })
+    }
 }
diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
index 251aa53..3be9928 100644
--- a/src/main/Homepage/feedback/cardview.js
+++ b/src/main/Homepage/feedback/cardview.js
@@ -19,13 +19,11 @@ const useStyles = makeStyles({
 export default function Maincard(props) {
     const classes = useStyles();
     var pingDividerMain;
-    if(typeof props.data !=='undefined')
-    {
-      pingDividerMain = <DividerMain  data={props.data}/>;
-    }
-    else
-    {
-      pingDividerMain =  "";
+    if (typeof props.data !== "undefined") {
+        // It checks wether the argument passed contains any array data or not
+        pingDividerMain = <DividerMain data={props.data} />;
+    } else {
+        pingDividerMain = "";
     }
 
     return (
@@ -40,19 +38,14 @@ export default function Maincard(props) {
                         />
                     </CardActionArea>
                     <CardActions>
-                        <Button size="small" color="primary">
-                            Share
-                        </Button>
-                        <Button size="small" color="primary">
-                            Learn More
-                        </Button>
+                        <Button size="small" color="primary" />{" "}
+                        <Button size="small" color="primary" />
+                        <Button size="small" color="primary" />{" "}
+                        <Button size="small" color="primary" />
                     </CardActions>
                 </Card>
             </div>
-            <div>
-
-          {pingDividerMain}
-            </div>
+            <div>{pingDividerMain}</div>
         </div>
     );
 }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 197cf15..3b1948b 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -3,9 +3,13 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemAvatar from "@material-ui/core/ListItemAvatar";
-import Avatar from "@material-ui/core/Avatar";
 import Icon from "@material-ui/core/Icon";
 import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import FeedBackService from "./FeedBackDB";
+import NameInput from "./nameInput";
+
+const postFBservice = new FeedBackService();
 
 export class DividerMain extends Component {
     constructor(props) {
@@ -13,56 +17,85 @@ export class DividerMain extends Component {
 
         this.state = {
             contents: null,
+            input_feedback_id: null,
+            isValueSet: false
         };
+        this.handleUpvoteClick = this.handleUpvoteClick.bind(this);
+        this.handleDownvoteClick = this.handleDownvoteClick.bind(this);
     }
 
-	componentWillMount() {
-        this.setState({ contents: this.props.data });
-	}
+    handleUpvoteClick(valueSent) {
+        const dataToBeSent = {
+            id: valueSent.id,
+            suggestedName: valueSent.suggestedName,
+            upvote: valueSent.upvote + 1,
+            downvote: valueSent.downvote,
+            feedback_id: valueSent.feedback
+        };
+        // console.log(dataToBeSent);
+        postFBservice.postFeedbackList(dataToBeSent);
+    }
+    handleDownvoteClick(valueSent) {
+        const dataToBeSent = {
+            id: valueSent.id,
+            suggestedName: valueSent.suggestedName,
+            upvote: valueSent.upvote - 1,
+            downvote: valueSent.downvote,
+            feedback_id: valueSent.feedback
+        };
+        postFBservice.postFeedbackList(dataToBeSent);
+    }
 
+    componentWillMount() {
+        this.setState({ contents: this.props.data });
+    }
 
     render() {
-		const someData = [{"id":18,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"},{"id":19,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"}];
-		// const testdata = JSON.parse(JSON.stringify( this.state.contents))
-		// console.log(this.state.contents.length)
-		console.log(typeof(this.state.contents))
-
-		if(typeof this.props.data !=='undefined')
-		{
-			console.log("oh no")
-			console.log( this.props.data.length)
+        // const someData = [{"id":18,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"},{"id":19,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"}];
+        // const testdata = JSON.parse(JSON.stringify( this.state.contents))
+        // console.log(this.state.contents.length)
+        const receivedData = this.state.contents;
 
-			this.props.data.map(o => (
-				  console.log(o)
-				))
-		}
         return (
             <div>
-
-
-				{ someData.map(o => (
-					<h4>
-					  {o.upvote} {o.suggestedName} {o.downvote}
-					</h4>
-					))
-				}
-
-
                 <List>
-                    <ListItem>
-                        <Divider variant="inset" />
-                        <ListItemAvatar>
-                            <Avatar>
-                                <Icon>thumb_up</Icon>
-                            </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText primary="testing" secondary="" />
-                        <ListItemAvatar>
-                            <Avatar>
-                                <Icon>thumb_down</Icon>
-                            </Avatar>
-                        </ListItemAvatar>
-                    </ListItem>
+                    {receivedData.map(out => {
+                        !this.isValueSet
+                            ? (this.state.input_feedback_id = out.feedback)
+                            : (this.isValueSet = true);
+                        return (
+                            <ListItem key={out.id}>
+                                <ListItemAvatar>
+                                    <IconButton
+                                        onClick={() =>
+                                            this.handleUpvoteClick(out)
+                                        }
+                                    >
+                                        <Icon>thumb_up</Icon>
+                                    </IconButton>
+                                </ListItemAvatar>
+                                <ListItemText
+                                    primary={out.suggestedName}
+                                    secondary=" "
+                                />
+                                <ListItemAvatar>
+                                    <IconButton
+                                        onClick={() =>
+                                            this.handleDownvoteClick(out)
+                                        }
+                                    >
+                                        {" "}
+                                        <Icon>thumb_down</Icon>
+                                    </IconButton>
+                                </ListItemAvatar>
+                                <Divider variant="inset" />
+
+                                {/* {!this.isValueSet?this.setState({input_feedback_id :out.feedback}):this.isValueSet=true} */}
+                            </ListItem>
+                        );
+                    })}
+                    {/*console.log(this.state.input_feedback_id) */}
+                    <NameInput feedback_id_value = {this.state.input_feedback_id}/>
                 </List>
             </div>
         );
diff --git a/src/main/Homepage/feedback/index.css b/src/main/Homepage/feedback/index.css
index 162332a..6ceb5ac 100644
--- a/src/main/Homepage/feedback/index.css
+++ b/src/main/Homepage/feedback/index.css
@@ -1,11 +1,19 @@
 .maincardview {
-    /* position: absolute; */
-    /* margin: auto;
+    position: absolute;
+     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0; */
-    /* width: 600px;
-	height: 600px; */
+    left: 0;
+    width: 800px;
+	height: 350px;
 	display: flex;
 }
+
+.MuiCardActions-root
+{
+    /* background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); */
+    /* background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% ); */
+    /* background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%); */
+    /* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% ); */
+}
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
index 8bc5aa1..1550749 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -41,7 +41,6 @@ class FeedBack extends Component {
                         data={this.state.test.data}
                     />
                 </div>
-                <div>feedback {indexId}</div>
 
             </div>
         );
diff --git a/src/main/Homepage/feedback/nameInput.js b/src/main/Homepage/feedback/nameInput.js
new file mode 100644
index 0000000..fba23f9
--- /dev/null
+++ b/src/main/Homepage/feedback/nameInput.js
@@ -0,0 +1,63 @@
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import FeedBackService from "./FeedBackDB";
+
+const postFBservice = new FeedBackService();
+
+export default class NameInput extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: null,
+            isSent: false,
+            id: -1,
+            suggestedName: null,
+            upvote: 0,
+            downvote: 0,
+            feedback_id: this.props.feedback_id_value
+        };
+    }
+    handleChange = event => {
+        this.setState({
+            suggestedName: event.target.value
+        });
+    };
+
+    handleClick = event => {
+        if (this.state.isSent === false && this.state.suggestedName!==null) {
+            const dataToBeSent = {
+                id: this.state.id,
+                suggestedName: this.state.suggestedName,
+                upvote: this.state.upvote,
+                downvote: this.state.downvote,
+                feedback_id: this.state.feedback_id
+            };
+            postFBservice.postFeedbackList(dataToBeSent);
+
+            // console.log(dataToBeSent);
+
+            this.setState({
+                isSent: true
+            });
+        } else {
+            alert("You can't suggest blank or more than 1 name");
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <TextField
+                    id="outlined-dense"
+                    label="Suggest Name"
+                    margin="Suggest Name"
+                    variant="outlined"
+                    value={this.state.value}
+                    onChange={this.handleChange}
+                />
+                <button onClick={this.handleClick}>Send</button>
+            </div>
+        );
+    }
+}