diff --git a/src/api/postObservation.ts b/src/api/postObservation.ts
index 0765d18..da4fd26 100644
--- a/src/api/postObservation.ts
+++ b/src/api/postObservation.ts
@@ -33,10 +33,7 @@ async function postObservation(
     const json = await res.json();
 
     if (res.status < 200 || res.status > 299) {
-      const errors = Object.values(json)
-        .map(err => (Array.isArray(err) ? err[0] : err))
-        .join('. ');
-      return { error: true, message: errors };
+      return { error: true, message: json };
     }
     return { error: false, message: json };
   } catch (error) {
diff --git a/src/components/custom-observation-form.tsx b/src/components/custom-observation-form.tsx
index 1608465..3b601a7 100644
--- a/src/components/custom-observation-form.tsx
+++ b/src/components/custom-observation-form.tsx
@@ -39,6 +39,7 @@ const CustomObservationForm = ({
   const { observationCoordinates } = useMapContext();
 
   const [isLoading, setLoading] = useState(false);
+  const [serverErrors, setServerErrors] = useState(false);
   const [stationsDetails, setStationsDetails] = useState<Station[]>([]);
 
   const [editorState, setEditorState] = useState(() =>
@@ -93,7 +94,8 @@ const CustomObservationForm = ({
         if (!result.error) {
           router.push(`/map?${params.toString()}`);
         } else {
-          console.error(result.message);
+          console.error(result);
+          setServerErrors(result.message);
         }
       } else {
         const errorMap = validation.errorMap;
@@ -190,6 +192,14 @@ const CustomObservationForm = ({
       </div>
       <p className="my-8 text-sm">{t('gdpr')}</p>
 
+      {Object.entries(serverErrors).map(([type, message]) => (
+        <div className="rjf-input-group">
+          <span className="rjf-error-text">
+            {type}: {message}
+          </span>
+        </div>
+      ))}
+
       <Button className="my-3 flex gap-2" type="submit">
         {isLoading && (
           <>