diff --git a/src/components/RecommendTask.jsx b/src/components/RecommendTask.jsx
new file mode 100644
index 0000000..b04bb38
--- /dev/null
+++ b/src/components/RecommendTask.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+class RecommendTask extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      email: props.email
+    };
+  }
+  getRecommendedTasks = () => {
+    var RecommendTaskUrl =
+      "http://localhost:8080/api/users/records/" +
+      this.state.email +
+      "/recommendations";
+    window.location.replace(RecommendTaskUrl);
+  };
+  render() {
+    return (
+      <div>
+        <button
+          type="button"
+          className="btn btn-success"
+          onClick={this.getRecommendedTasks.bind(this)}
+        >
+          Recomend Task!
+        </button>
+      </div>
+    );
+  }
+}
+
+export default RecommendTask;
diff --git a/src/components/email.jsx b/src/components/email.jsx
index 1005a61..0210e00 100644
--- a/src/components/email.jsx
+++ b/src/components/email.jsx
@@ -1,10 +1,18 @@
 import React, { Component } from "react";
 class Email extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      email: props.email
+    };
+  }
+
   render() {
+    const { email } = this.state;
     return (
       <div>
         <span className="Email text-muted font-weight-bold font-italic">
-          Email:
+          Email:{email}
         </span>
       </div>
     );
diff --git a/src/components/masterclassess.jsx b/src/components/masterclassess.jsx
index 3d0a4c1..ed846a1 100644
--- a/src/components/masterclassess.jsx
+++ b/src/components/masterclassess.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-class MasterClassess extends Component {
+class MasterClassessLink extends Component {
   render() {
     return (
       <div>
@@ -11,4 +11,4 @@ class MasterClassess extends Component {
   }
 }
 
-export default MasterClassess;
+export default MasterClassessLink;
diff --git a/src/components/profilePage.jsx b/src/components/profilePage.jsx
index bceed90..d136544 100644
--- a/src/components/profilePage.jsx
+++ b/src/components/profilePage.jsx
@@ -1,23 +1,59 @@
 import React, { Component } from "react";
 import "bootstrap/dist/css/bootstrap.css";
 import Edit from "./edit";
-import MasterClassess from "./masterclassess";
-import Tasks from "./tasks";
 import Email from "./email";
+import Tasks from "./tasks";
 import ProfilePic from "./uploadProfilePic";
 import Fullname from "./fullName";
 import Skills from "./skills";
+import MasterClassessLink from "./masterclassess";
+import RecommendTask from "./recommendTaskbutton";
+import Axios from "axios";
 class ProfilePage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      FullName: "Ahmed",
+      email: props.email, // it should be passed from the login component,
+      tasks: [],
+      user: null,
+      masterclassess: []
+    };
+  }
+  getTasksfromDb() {
+    Axios.get("http://localhost:8080/api/tasks/")
+      .then(res => res)
+      .then(data => this.setState({ tasks: data }));
+  }
+  getUserfromDb() {
+    Axios.get("http://localhost:8080/api/users/records/" + this.state.email)
+      .then(res => res)
+      .then(data => this.setState({ user: data.user }));
+  }
+  getMasterClassesFromDb() {
+    Axios.get("http://localhost:8080/api/masterclasses")
+      .then(res => res)
+      .then(data => this.setState({ masterclassess: data.masterclassess }));
+  }
+  componentDidMount() {
+    this.getUserfromDb();
+    this.getMasterClassesFromDb();
+    this.getTasksfromDb();
+    this.setState({FullName})
+  }
   render() {
+    const { FullName, email, MasterClassess, tasks, user } = this.state;
     return (
       <div>
         <ProfilePic />
-        <Fullname />
-        <Email />
+        <Fullname name={FullName} />
+        <Email email={email} />
         <Skills />
         <Tasks />
-        <MasterClassess />
+        <MasterClassessLink masterclassess={MasterClassess} />
         <Edit />
+        <p />
+        <RecommendTask email={email} />
       </div>
     );
   }