diff --git a/frontend/src/components/Bank.js b/frontend/src/components/Bank.js
index 45d5d8e..d89a66b 100644
--- a/frontend/src/components/Bank.js
+++ b/frontend/src/components/Bank.js
@@ -1,26 +1,25 @@
-import React, { Component } from "react";
-import "./assets/Bank.css";
+import React, { useState, useEffect } from "react";
+import "./assets/Portfolio.css";
 
-class Bank extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { apiResponse: "" };
-  }
-  callAPI() {
+const Portfolio = (props) => {
+  const [state, setState] = useState({});
+  useEffect(() => {
+    callAPI();
+  });
+
+  const callAPI = () => {
     fetch("http://localhost:9000/FETCHURL")
       .then((res) => res.text())
-      .then((res) => this.setState()({ apiresponse: res }))
+      .then((res) => setState(res))
       .catch((err) => err);
-  }
-  componentDidMount() {
-    this.callAPI();
-  }
-  render() {
-    return (
-      <div class="container">
-        <h1 class="d-flex justify-content-center m-2 p-4">Bank</h1>
-      </div>
-    );
-  }
-}
+  };
+
+  return (
+    <div class="container">
+      <h1 class="d-flex justify-content-center m-2 p-4">Bank</h1>
+      <h1></h1>
+    </div>
+  );
+};
+
 export default Bank;
diff --git a/frontend/src/components/Browse.js b/frontend/src/components/Browse.js
index 822f691..d5d665c 100644
--- a/frontend/src/components/Browse.js
+++ b/frontend/src/components/Browse.js
@@ -1,27 +1,25 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import "./assets/Browse.css";
 
-class Browse extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { apiResponse: "" };
-  }
-  callAPI() {
+const Portfolio = (props) => {
+  const [state, setState] = useState({});
+  useEffect(() => {
+    callAPI();
+  });
+
+  const callAPI = () => {
     fetch("http://localhost:9000/FETCHURL")
       .then((res) => res.text())
-      .then((res) => this.setState()({ apiresponse: res }))
+      .then((res) => setState(res))
       .catch((err) => err);
-  }
-  componentDidMount() {
-    this.callAPI();
-  }
-  render() {
-    return (
-      <div class="container">
-        <h1 class="d-flex justify-content-center m-2 p-4">Browse</h1>
-      </div>
-    );
-  }
-}
+  };
+
+  return (
+    <div class="container">
+      <h1 class="d-flex justify-content-center m-2 p-4">Browse</h1>
+      <h1></h1>
+    </div>
+  );
+};
 
 export default Browse;
diff --git a/frontend/src/components/Portfolio.js b/frontend/src/components/Portfolio.js
index e3b8eb4..1f48ee3 100644
--- a/frontend/src/components/Portfolio.js
+++ b/frontend/src/components/Portfolio.js
@@ -1,27 +1,25 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import "./assets/Portfolio.css";
-class Portfolio extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { apiResponse: "" };
-  }
-  callAPI() {
+
+const Portfolio = (props) => {
+  const [state, setState] = useState({});
+  useEffect(() => {
+    callAPI();
+  });
+
+  const callAPI = () => {
     fetch("http://localhost:9000/FETCHURL")
       .then((res) => res.text())
-      .then((res) => this.setState()({ apiresponse: res }))
+      .then((res) => setState(res))
       .catch((err) => err);
-  }
-  componentDidMount() {
-    this.callAPI();
-  }
-  render() {
-    return (
-      <div class="container">
-        <h1 class="d-flex justify-content-center m-2 p-4">Portfolio</h1>
-        <h1>{this.state.apiResponse}</h1>
-      </div>
-    );
-  }
-}
+  };
+
+  return (
+    <div class="container">
+      <h1 class="d-flex justify-content-center m-2 p-4">Portfolio</h1>
+      <h1></h1>
+    </div>
+  );
+};
 
 export default Portfolio;
diff --git a/frontend/src/components/Profile.js b/frontend/src/components/Profile.js
index 64fdee9..a378b62 100644
--- a/frontend/src/components/Profile.js
+++ b/frontend/src/components/Profile.js
@@ -1,26 +1,25 @@
-import React, { Component } from "react";
-import "./assets/Profile.css";
-class Profile extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { apiResponse: "" };
-  }
-  callAPI() {
+import React, { useState, useEffect } from "react";
+import "./assets/Portfolio.css";
+
+const Portfolio = (props) => {
+  const [state, setState] = useState({});
+  useEffect(() => {
+    callAPI();
+  });
+
+  const callAPI = () => {
     fetch("http://localhost:9000/FETCHURL")
       .then((res) => res.text())
-      .then((res) => this.setState()({ apiresponse: res }))
+      .then((res) => setState(res))
       .catch((err) => err);
-  }
-  componentDidMount() {
-    this.callAPI();
-  }
-  render() {
-    return (
-      <div class="container">
-        <h1 class="d-flex justify-content-center m-2 p-4">Profile</h1>
-      </div>
-    );
-  }
-}
+  };
 
-export default Profile;
+  return (
+    <div class="container">
+      <h1 class="d-flex justify-content-center m-2 p-4">Profile</h1>
+      <h1></h1>
+    </div>
+  );
+};
+
+export default Portfolio;
diff --git a/website/images/logo.png b/website/images/logo.png
new file mode 100644
index 0000000..be413fc
Binary files /dev/null and b/website/images/logo.png differ