diff --git a/src/components/contact.tsx b/src/components/contact.tsx
index 9b2287d..6607a80 100644
--- a/src/components/contact.tsx
+++ b/src/components/contact.tsx
@@ -54,7 +54,23 @@ export const Contact = () => {
     >
       <SectionHeading
         heading="Get In Touch"
-        content="Please contact me directly at skolakmichal1@gmail.com or through this form."
+        content={
+          <>
+            Please contact me directly at{' '}
+            <Button
+              variant="link"
+              className="text-muted-foreground p-0 font-medium"
+            >
+              <a
+                className="underline-offset-4 hover:underline"
+                href="mailto:skolakmichal1@gmail.com"
+              >
+                skolakmichal1@gmail.com
+              </a>
+            </Button>{' '}
+            or through this form.
+          </>
+        }
       />
       <form
         onSubmit={handleSubmit(onSubmit)}
diff --git a/src/components/section-heading.tsx b/src/components/section-heading.tsx
index 665d06a..b425c69 100644
--- a/src/components/section-heading.tsx
+++ b/src/components/section-heading.tsx
@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
+
 type TProps = {
   heading: string;
-  content?: string | undefined;
+  content?: string | ReactNode | undefined;
 };
 
 export const SectionHeading = ({ heading, content }: TProps) => {