diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx
index 199ad97..b0ef16e 100644
--- a/frontend/src/components/Alert.tsx
+++ b/frontend/src/components/Alert.tsx
@@ -20,7 +20,7 @@ export function showAlert(text: string, variant: string, heading?: string) {
 }
 
 export function ErrorAlert() {
-    return <Alert variant={state.value.variant} onClose={(a, b) => {
+    return <Alert className="custom-alert" variant={state.value.variant} onClose={(a, b) => {
         state.value = {
             text: "",
             show: false,
diff --git a/frontend/src/main.scss b/frontend/src/main.scss
index 8301446..54e7e22 100644
--- a/frontend/src/main.scss
+++ b/frontend/src/main.scss
@@ -47,6 +47,7 @@ $navbar-color: #555;
   background-color: $navbar-color;
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
   height: $navbar-height;
+  z-index: 1020;
 }
 
 .navbar .navbar-toggler {
@@ -83,3 +84,12 @@ th:hover:has(div) {
   border-bottom-left-radius: 0 !important;
   border-top-left-radius: 0 !important;
 }
+
+.custom-alert {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1021;
+  margin: 0;
+}