diff --git a/frontend/src/views/Conversations-create.vue b/frontend/src/views/Conversations-create.vue
index 9b615a3..6862711 100644
--- a/frontend/src/views/Conversations-create.vue
+++ b/frontend/src/views/Conversations-create.vue
@@ -30,7 +30,7 @@ const submit = async () => {
       });
     });
   } catch (error) {
-    errors.value = error.response.data;
+    errors.value = error.response.data.error;
   }
 };
 
@@ -50,6 +50,12 @@ onMounted(() => {
 </script>
 
 <template>
+  <div class="q-mx-lg">
+    <q-banner v-if="errors" dense inline-actions class="text-white bg-red">
+      {{ errors }}
+    </q-banner>
+  </div>
+
   <main>
     <div class="q-mx-auto" style="max-width: 50%">
       <h3>New Conversation</h3>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 2d109ae..57032c0 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -38,14 +38,18 @@ const submit = async () => {
       );
     },
     (error) => {
-      errors.value = error.response.data;
+      errors.value = error.response.data.error;
     }
   );
 };
 </script>
 
 <template>
-  {{ errors }}
+  <div class="q-mx-lg">
+    <q-banner v-if="errors" dense inline-actions class="text-white bg-red">
+      {{ errors }}
+    </q-banner>
+  </div>
 
   <main>
     <div class="q-mx-auto q-mt-xl" style="max-width: 50%">