diff --git a/src/components/ContactPerson2/ContactPerson2.stories.tsx b/src/components/ContactPerson2/ContactPerson2.stories.tsx
new file mode 100644
index 0000000..bbf6acb
--- /dev/null
+++ b/src/components/ContactPerson2/ContactPerson2.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ContactPerson2 } from './ContactPerson2'
+
+const meta: Meta<typeof ContactPerson2> = {
+  component: ContactPerson2,
+}
+
+type Story = StoryObj<typeof ContactPerson2>;
+export default meta
+
+export const Default: Story = {
+  args: {
+    contact: {
+      id: "some_id",
+      name: "Pfr. M. Mustermann",
+      email: "m.mustermann@gmail.com",
+      telephone: "+491234567890",
+      createdAt: "2021-03-01T00:00:00.000Z",
+      updatedAt: ""
+    }
+  },
+}
+
+export const NotFound: Story = {
+  args: {
+    contact: "Some weird id"
+  },
+}
\ No newline at end of file
diff --git a/src/components/ContactPerson2/ContactPerson2.tsx b/src/components/ContactPerson2/ContactPerson2.tsx
new file mode 100644
index 0000000..bf4c2bf
--- /dev/null
+++ b/src/components/ContactPerson2/ContactPerson2.tsx
@@ -0,0 +1,29 @@
+import styles from "./styles.module.scss"
+import { ContactPerson } from '@/payload-types'
+
+type ContactPerson2Props = {
+  contact: null | string | undefined | ContactPerson
+}
+
+export const ContactPerson2 = ({contact}: ContactPerson2Props) => {
+  if (contact === null || contact === undefined || typeof contact === 'string') {
+    return "Unbekannt"
+  }
+
+  return (
+    <div className={styles.contact}>
+      {contact.name}
+      {contact.email &&
+        <>
+          <br/> <a href={`mailto:${contact.email}`} className={styles.hover}>{contact.email}</a>
+        </>
+      }
+      {
+        contact.telephone &&
+        <>
+          <br/> <a href={`tel:${contact.telephone}`}>{contact.telephone}</a>
+        </>
+      }
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ContactPerson2/styles.module.scss b/src/components/ContactPerson2/styles.module.scss
new file mode 100644
index 0000000..6461596
--- /dev/null
+++ b/src/components/ContactPerson2/styles.module.scss
@@ -0,0 +1,8 @@
+.contact a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.hover:hover {
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/components/EventExcerpt/EventExcerpt.stories.tsx b/src/components/EventExcerpt/EventExcerpt.stories.tsx
index 27d8f0b..2d44cc8 100644
--- a/src/components/EventExcerpt/EventExcerpt.stories.tsx
+++ b/src/components/EventExcerpt/EventExcerpt.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { EventExcerpt } from './EventExcerpt'
+import { EventExcerpt, EventExcerptRow } from './EventExcerpt'
+import { TextDiv } from '@/components/Text/TextDiv'
 
 const meta: Meta<typeof EventExcerpt> = {
   component: EventExcerpt,
@@ -10,21 +11,17 @@ export default meta
 
 export const Default: Story = {
   args: {
-    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
-    where: 'St. Richard\n' +
-      'Braunschweiger Str. 18, 12055 Berlin \n' +
-      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
-    who: 'Pfarrei Ulrich Kotzur\n' +
-      'pfarrer@sankt-clara.de\n' +
-      '+4930 6851042'
-  },
-}
-
-export const OnlyWhatAndWhere: Story = {
-  args: {
-    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
-    where: 'St. Richard\n' +
-      'Braunschweiger Str. 18, 12055 Berlin \n' +
-      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
+    children: <>
+      <EventExcerptRow label={"What: "}>
+        <TextDiv text={"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}/>
+      </EventExcerptRow>
+      <EventExcerptRow label={"Where:"}>
+        <p>
+          St. Richard<br/>
+          Braunschweiger Str. 18, 12055 Berlin<br/>
+          Anfahrt über S-Sonnenallee oder Mareschtraße
+        </p>
+      </EventExcerptRow>
+    </>
   },
 }
\ No newline at end of file
diff --git a/src/components/EventExcerpt/EventExcerpt.tsx b/src/components/EventExcerpt/EventExcerpt.tsx
index 3831b4f..46046ff 100644
--- a/src/components/EventExcerpt/EventExcerpt.tsx
+++ b/src/components/EventExcerpt/EventExcerpt.tsx
@@ -1,44 +1,31 @@
 import styles from "./styles.module.scss"
-import { TextDiv } from '@/components/Text/TextDiv'
 
 type EventExcerptProps = {
-  what?: string | null,
-  where?: string | null,
-  who?: string | null
+  children?: React.ReactNode
 }
 
 type RowProps = {
   label: string,
-  text: string
+  children: React.ReactNode
 }
 
-const Row = ({label, text}: RowProps) => {
+export const EventExcerptRow = ({label, children}: RowProps) => {
   return (
     <div className={styles.row}>
       <div className={styles.col1}>
         {label}
       </div>
       <div>
-        <TextDiv text={text} />
+        {children}
       </div>
     </div>
   )
 }
 
-export const EventExcerpt = ({ what, where, who }: EventExcerptProps) => {
+export const EventExcerpt = ({ children }: EventExcerptProps) => {
   return (
     <div className={styles.container}>
-      { what &&
-        <Row label={"Was:"} text={what} />
-      }
-
-      { where &&
-        <Row label={"Wo:"} text={where} />
-      }
-
-      { who &&
-        <Row label={"Ansprechperson:"} text={who} />
-      }
+      {children}
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/pageComponents/Event/Event.tsx b/src/pageComponents/Event/Event.tsx
index d9e33bf..9bed032 100644
--- a/src/pageComponents/Event/Event.tsx
+++ b/src/pageComponents/Event/Event.tsx
@@ -3,18 +3,17 @@ import { ContactPerson, Document, Location } from '@/payload-types'
 import { Section } from '@/components/Section/Section'
 import { Title } from '@/components/Title/Title'
 import { Container } from '@/components/Container/Container'
-import { Row } from '@/components/Flex/Row'
 import { Col } from '@/components/Flex/Col'
 import { Pill } from '@/components/Pill/Pill'
 import { HR } from '@/components/HorizontalRule/HorizontalRule'
 import { useDate } from '@/hooks/useCompactDate'
 import { readableDateTime } from '@/utils/readableDate'
 import { TextDiv } from '@/components/Text/TextDiv'
-import { EventExcerpt } from '@/components/EventExcerpt/EventExcerpt'
+import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
 import { Button } from '@/components/Button/Button'
 import { StaticImageData } from 'next/image'
 import { locationString } from '@/utils/dto/location'
-import { contactPersonString } from '@/utils/dto/contact'
+import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2'
 
 type EventProps = {
   title: string,
@@ -50,7 +49,6 @@ export function EventPage(
   const published = useDate(createdAt)
   const readableDate = readableDateTime(date)
   const where = locationString(location);
-  const who = contactPersonString(contact)
 
   return (
     <>
@@ -140,11 +138,17 @@ export function EventPage(
           </Section>
         </Container>
 
-        <EventExcerpt
-          what={shortDescription}
-          where={where}
-          who={who}
-        />
+        <EventExcerpt>
+          <EventExcerptRow label={"Was:"}>
+            <TextDiv text={shortDescription} />
+          </EventExcerptRow>
+          <EventExcerptRow label={"Wo:"}>
+            <TextDiv text={where} />
+          </EventExcerptRow>
+          <EventExcerptRow label={"Ansprechperson:"}>
+            <ContactPerson2 contact={contact} />
+          </EventExcerptRow>
+        </EventExcerpt>
 
       </Section>
       <Section/>
diff --git a/src/utils/dto/contact.ts b/src/utils/dto/contact.ts
deleted file mode 100644
index 73b3462..0000000
--- a/src/utils/dto/contact.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ContactPerson } from '@/payload-types'
-
-
-/**
- * Return contact person as a readable string
- *
- * e.G
- *
- * Hans Mustermann
- * hans@mustermann.com
- * 030-65625885
- */
-export const contactPersonString = (c: string | ContactPerson | undefined) => {
-  if(typeof c === "string" || !c) {
-    return "Unbekannt"
-  }
-
-  let s = c.name
-
-  if (c.email) {
-    s += '\n' + c.email;
-  }
-
-  if (c.telephone) {
-    s += '\n' + c.telephone;
-  }
-
-  return s
-}
\ No newline at end of file