diff --git a/webapp/package.json b/webapp/package.json
index f5f7a11..43ddbd9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,7 +17,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:8080",
+  "proxy": "http://localhost:8081",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 7982f09..71598e2 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -3,24 +3,25 @@ import React, { useState, useEffect } from 'react';
 
 function App() {
 
-  const [joke, setJoke] = useState([]);
+  const [joke, setJoke] = useState(null);
+
   useEffect(() => {
-     fetch('/api/badjokes')
-        .then((response) => response.json())
-        .then((data) => {
-           console.log(data.joke);
-           setJoke(data.joke);
-        })
-        .catch((err) => {
-           console.log(err.message);
-        });
+    fetch('/api/badjokes')
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data.joke);
+        setJoke(data.joke);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   }, []);
 
   return (
     <div className="App">
       <header className="App-header">
-        <p>         
-          Here is your joke: {joke}
+        <p>
+          Here is your joke: {joke ? <span>{joke}</span> : <span>Loading...</span>}
         </p>
       </header>
     </div>