2 files changed, 8 insertions, 5 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;
-