diff --git a/web/app/src/routes/Login.svelte b/web/app/src/routes/Login.svelte
index 7bfb934..2f53463 100644
--- a/web/app/src/routes/Login.svelte
+++ b/web/app/src/routes/Login.svelte
@@ -4,10 +4,17 @@
 
     let username = "";
     let password = "";
-
+    let error = "";
+    
     const doLogin = async () => {
-        const tokenData = await login({ username, password });
-        navigate("/");
+        error = "";
+        try {
+            const tokenData = await login({ username, password });
+            navigate("/");
+        } catch (e) {
+            error = "We had trouble logging you in";
+            return;
+        }
     };
 </script>
 
@@ -45,6 +52,11 @@
                 />
             </div>
         </div>
+        {#if error}
+            <div class="field">
+                <p class="has-text-danger">{error}</p>
+            </div>
+        {/if}
         <div class="field">
             <div class="control">
                 <button class="button is-link">Login</button>
diff --git a/web/app/src/routes/Register.svelte b/web/app/src/routes/Register.svelte
index 83703f2..2651b26 100644
--- a/web/app/src/routes/Register.svelte
+++ b/web/app/src/routes/Register.svelte
@@ -5,10 +5,15 @@
     let username = "";
     let password = "";
     let email = "";
+    let error = "";
 
     const doRegister = async () => {
-        const tokenData = await register({ email, username, password });
-        navigate("/");
+        try {
+            const tokenData = await register({ email, username, password });
+            navigate("/");
+        } catch (error) {
+            error = "We had trouble registering you";
+        }
     };
 </script>