diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
index e422d18ca..c51f67809 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
@@ -52,6 +52,9 @@
   align-items: center;
 }
 
+.bookingCodeError {
+  white-space: normal;
+}
 @media screen and (max-width: 767px) {
   .hideOnMobile {
     display: none;
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
index dfdc6957d..1108b9e15 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -14,6 +14,7 @@ import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 import Switch from "@/components/TempDesignSystem/Form/Switch"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -282,7 +283,7 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
 
   return (
     <div className={styles.errorContainer}>
-      <Caption color={isInvalidErr ? "red" : "blue"} className={styles.error}>
+      <Caption className={styles.error}>
         <MaterialIcon
           icon="error"
           color={
@@ -292,17 +293,25 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
         />
         {codeError.message === bookingWidgetErrors.BOOKING_CODE_ONLY_ENGLISH ? (
           // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-          <div>
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            Dieser Code ist nur auf unserer{" "}
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            <a href="https://www.scandichotels.com" target="_blank">
-              englischen Website
+          <span className={styles.bookingCodeError}>
+            {
+              /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
+              "Dieser Code ist nur auf unserer "
+            }
+            <Link
+              color="burgundy"
+              href="https://www.scandichotels.com"
+              size="small"
+              target="_blank"
+            >
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            </a>{" "}
-            gültig
-          </div>
+              {"englischen Website"}
+            </Link>
+            {
+              /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
+              " gültig"
+            }
+          </span>
         ) : (
           getErrorMessage(intl, codeError.message)
         )}