diff --git a/templates/dsgvDisclaimer.hamlet b/templates/dsgvDisclaimer.hamlet
index 21817fcee..798221e4d 100644
--- a/templates/dsgvDisclaimer.hamlet
+++ b/templates/dsgvDisclaimer.hamlet
@@ -1,5 +1,5 @@
-<div .alert .alert-danger>
-  <div .alert__content>
+<div .notification .notification-danger>
+  <div .notification__content>
     <h1>
       Hinweis zum Datenschutz
     <p>
diff --git a/templates/dsgvDisclaimer.lucius b/templates/dsgvDisclaimer.lucius
new file mode 100644
index 000000000..96cf818dc
--- /dev/null
+++ b/templates/dsgvDisclaimer.lucius
@@ -0,0 +1,50 @@
+.notification {
+  position: relative;
+  border-radius: 3px;
+  padding: 10px 20px 20px;
+  margin: 40px 0;
+  color: var(--color-lighter);
+  box-shadow: 0 0 4px 2px inset currentColor;
+  padding-left: 20%;
+  color: #318dc5 ;
+
+  &::before {
+    content: 'i';
+    position: absolute;
+    display: flex;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 20%;
+    font-size: 100px;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .notification {
+
+    padding-left: 40px;
+
+    &::before {
+      height: auto;
+      width: 45px;
+      font-size: 40px;
+      top: 15px;
+    }
+  }
+}
+
+.notification-danger {
+  color: #c51919 ;
+
+  &::before {
+    content: '!';
+  }
+}
+
+.notification__content {
+  color: var(--color-font);
+}