diff --git a/nusmoney_client/package.json b/nusmoney_client/package.json
index efd6156..d6d6e0c 100644
--- a/nusmoney_client/package.json
+++ b/nusmoney_client/package.json
@@ -16,6 +16,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://localhost:7000",
   "eslintConfig": {
     "extends": "react-app"
   },
diff --git a/nusmoney_client/src/App.css b/nusmoney_client/src/App.css
index cf14be1..4f74e80 100644
--- a/nusmoney_client/src/App.css
+++ b/nusmoney_client/src/App.css
@@ -28,6 +28,10 @@
   text-align: left;
 }
 
+.App-list {
+  text-align: left;
+}
+
 .App-link {
   color: #61dafb;
 }
diff --git a/nusmoney_client/src/App.js b/nusmoney_client/src/App.js
index 8c2c4ce..886d0f3 100644
--- a/nusmoney_client/src/App.js
+++ b/nusmoney_client/src/App.js
@@ -9,20 +9,21 @@ class App extends React.Component {
     }
 
     callAPIServer() {
-        let bodyData = {
+/*         let bodyData = {
             limit: 12,
-        };
+        }; */
 
-        console.log(JSON.stringify(bodyData));
-        fetch("http://localhost:7000/users?limit=8", {
+        // setup automatic proxy in package.json.
+        // thus eliminating the need to type "http://localhost:7000"
+        // "proxy" : "http://localhost:7000"
+        fetch("/users?limit=18", {
             method: "GET",
             /* body: JSON.stringify(bodyData), */
             headers: { "Content-type": "application/json; charset=UTF-8" },
-        }).then((res) => res.text())
-            .then((res) => {
-                console.log(res);
-                console.log(JSON.parse(res));
-                this.setState({ serverResponse: res, user: JSON.parse(res) });
+        }).then((res) => res.json())
+            .then((data) => {
+                console.log(data);
+                this.setState({ serverResponse: JSON.stringify(data), user: data });
                 console.log(this.state.user);
             })
             .catch((err) => {
@@ -30,7 +31,7 @@ class App extends React.Component {
               return err;
             });
     }
-    //return <ul>{this.state.tags.map(tag => <li key={tag}>{tag}</li>)}</ul>;
+
     componentDidMount() {
         // react lifecycle method componentDidMount()
         // will execute the callAPIServer() methods afteer the component mounts
@@ -47,15 +48,15 @@ class App extends React.Component {
                     </h1>
                     {/* <h2 className="App-intro">{this.state.serverResponse}</h2> */}
                 </header>
-                <body className="App-body">
+                <div className="App-list">
                     <ul>
                         {this.state.user.map((item) => (
-                            <li>
+                            <li key={item.user_id}>
                                 {item.user_id} {item.name} {item.mail}
                             </li>
                         ))}
                     </ul>
-                </body>
+                </div>
             </div>
         );
     }
