4 files changed, 16 insertions, 11 deletions
diff --git a/frontend/src/components/ErrorBanner.tsx b/frontend/src/components/ErrorBanner.tsx
new file mode 100644
index 0000000..fdb3bf1
--- /dev/null
+++ b/frontend/src/components/ErrorBanner.tsx
@@ -0,0 +1,5 @@
+function ErrorBanner({ message }: { message: string }) {
+    return <div className="error-message">{message}</div>;
+}
+
+export default ErrorBanner;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 3760d4e..bdfadad 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -4,6 +4,7 @@ import "../styles/button.css";
 import "../styles/sidebar.css";
 import type { Robot } from "../types/robot";
 import AddRobotForm from "./AddRobotForm";
+import ErrorBanner from "./ErrorBanner";
 import RobotList from "./RobotList";
 import SimulationActions from "./SimulationActions";
 
@@ -58,10 +59,8 @@ function Sidebar({
                 />
             )}
 
-            {errorMessage && (
-                <div className="error-message">{errorMessage}</div>
-            )}
-
+            {errorMessage && <ErrorBanner message={errorMessage} />}
+            
             <SimulationActions
                 activeSimulation={activeSimulation}
                 apiUrl={API_URL}
@@ -81,4 +80,3 @@ function Sidebar({
 }
 
 export default Sidebar;
-
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 11b7c11..463af8e 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { FadeLoader } from "react-spinners";
+import mapBackground from "../assets/map-blurred.png";
+import ErrorBanner from "../components/ErrorBanner";
 import Logo from "../components/Logo";
 import API_URL from "../config";
 import "../styles/button.css";
@@ -84,7 +86,10 @@ function Login() {
     }, []);
 
     return (
-        <div className="login-page">
+        <div
+	    className="login-page"
+	    style={{ backgroundImage: `url(${mapBackground})` }}
+	>
             <div className="login-card">
                 <Logo />
                 <p className="subtitle">🤖 Please log in to use the app 🤖</p>
@@ -119,10 +124,8 @@ function Login() {
                         />
                     </div>
 
-                    {errorMessage && (
-                        <div className="error-message">{errorMessage}</div>
-                    )}
-
+                    {errorMessage && <ErrorBanner message={errorMessage} />}
+                    
                     <button
                         className="btn btn-start"
                         disabled={isLoading}
diff --git a/frontend/src/styles/login.css b/frontend/src/styles/login.css
index 4592016..1da01ea 100644
--- a/frontend/src/styles/login.css
+++ b/frontend/src/styles/login.css
@@ -1,5 +1,4 @@
 .login-page {
-    background-image: url("../src/assets/map-blurred.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;