diff --git a/public/email.svg b/public/email.svg
new file mode 100644
index 0000000..231bee5
--- /dev/null
+++ b/public/email.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#9dac93"><path d="M7 9L12 12.5L17 9" stroke="#9dac93" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z" stroke="#9dac93" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/public/signal.svg b/public/signal.svg
new file mode 100644
index 0000000..b59c068
--- /dev/null
+++ b/public/signal.svg
@@ -0,0 +1 @@
+<svg role="img" fill="#9dac93" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Signal</title><path d="m9.12.35.27 1.09a10.845 10.845 0 0 0-3.015 1.248l-.578-.964A11.955 11.955 0 0 1 9.12.35zm5.76 0-.27 1.09a10.845 10.845 0 0 1 3.015 1.248l.581-.964A11.955 11.955 0 0 0 14.88.35zM1.725 5.797A11.955 11.955 0 0 0 .351 9.119l1.09.27A10.845 10.845 0 0 1 2.69 6.374zm-.6 6.202a10.856 10.856 0 0 1 .122-1.63l-1.112-.168a12.043 12.043 0 0 0 0 3.596l1.112-.169A10.856 10.856 0 0 1 1.125 12zm17.078 10.275-.578-.964a10.845 10.845 0 0 1-3.011 1.247l.27 1.091a11.955 11.955 0 0 0 3.319-1.374zM22.875 12a10.856 10.856 0 0 1-.122 1.63l1.112.168a12.043 12.043 0 0 0 0-3.596l-1.112.169a10.856 10.856 0 0 1 .122 1.63zm.774 2.88-1.09-.27a10.845 10.845 0 0 1-1.248 3.015l.964.581a11.955 11.955 0 0 0 1.374-3.326zm-10.02 7.875a10.952 10.952 0 0 1-3.258 0l-.17 1.112a12.043 12.043 0 0 0 3.597 0zm7.125-4.303a10.914 10.914 0 0 1-2.304 2.302l.668.906a12.019 12.019 0 0 0 2.542-2.535zM18.45 3.245a10.914 10.914 0 0 1 2.304 2.304l.906-.675a12.019 12.019 0 0 0-2.535-2.535zM3.246 5.549A10.914 10.914 0 0 1 5.55 3.245l-.675-.906A12.019 12.019 0 0 0 2.34 4.874zm19.029.248-.964.577a10.845 10.845 0 0 1 1.247 3.011l1.091-.27a11.955 11.955 0 0 0-1.374-3.318zM10.371 1.246a10.952 10.952 0 0 1 3.258 0L13.8.134a12.043 12.043 0 0 0-3.597 0zM3.823 21.957 1.5 22.5l.542-2.323-1.095-.257-.542 2.323a1.125 1.125 0 0 0 1.352 1.352l2.321-.532zm-2.642-3.041 1.095.255.375-1.61a10.828 10.828 0 0 1-1.21-2.952l-1.09.27a11.91 11.91 0 0 0 1.106 2.852zm5.25 2.437-1.61.375.255 1.095 1.185-.275a11.91 11.91 0 0 0 2.851 1.106l.27-1.091a10.828 10.828 0 0 1-2.943-1.217zM12 2.25a9.75 9.75 0 0 0-8.25 14.938l-.938 4 4-.938A9.75 9.75 0 1 0 12 2.25z"/></svg>
\ No newline at end of file
diff --git a/src/components/ContactCard.astro b/src/components/ContactCard.astro
new file mode 100644
index 0000000..68695e6
--- /dev/null
+++ b/src/components/ContactCard.astro
@@ -0,0 +1,54 @@
+---
+interface Props {
+    medium: string;
+    id: string;
+    link: string;
+    pgp: string;
+}
+
+const { medium, id, link } = Astro.props;
+
+import Icon from "../components/Icon.astro";
+---
+
+<div id="main">
+    <div style="display:flex">
+        <div style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 0.7rem;">
+            <Icon icon={medium.toLowerCase()} size="50" />
+        </div>
+        <div style="margin-left:1rem; margin-bottom: 1rem;" class="cardText">
+            <h2>{medium}</h2>
+            <p style="word-break: break-all;">{id}</p>
+            <a href={link}>Open -></a>
+        </div>
+    </div>
+</div>
+
+<style>
+    #main {
+        background-color: #292e28;
+        border-radius: 8px;
+        width: fit-content;
+        min-width: 25vw;
+        padding: 0.5rem;
+        line-height: 1;
+        max-width: 35%;
+        margin: 1rem;
+    }
+    .cardText {
+        h2 {
+            font-weight: 500;
+            font-size: 1.5rem;
+            color: #e6fbd4;
+        }
+        p {
+            font-weight: 400;
+            color: #9dac93;
+        }
+    }
+    a {
+        color: #e6fbd4;
+        font-size: 1.3rem;
+        text-decoration: none;
+    }
+</style>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 0000000..20bef2f
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,51 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ContactCard from "../components/ContactCard.astro";
+import Icon from "../components/Icon.astro";
+---
+
+<Layout title="Samvid Konchada">
+    <main>
+        <h1 class="header">Contact</h1>
+        <p class="subtitle">I would love to talk to you!</p>
+        <p class="subtitle">
+            The following methods support <strong>privacy-friendly</strong> and <strong>secure</strong> communication:
+        </p>
+        <div class="card-container">
+            <ContactCard medium="Email" id="samvidk@proton.me" link="mailto:samvidk@proton.me" pgp="false" />
+            <ContactCard medium="Signal" id="samvidk.85" link="mailto:samvidk@proton.me" pgp="false" />
+            <ContactCard medium="Matrix" id="@theamazing0@tchncs.de" link="mailto:samvidk@proton.me" pgp="false" />
+        </div>
+
+        <style>
+            main {
+                color: white;
+
+                font-size: 20px;
+                /* line-height: 1.6; */
+            }
+            html {
+                background-image: url("bg.svg");
+                background-attachment: fixed;
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+            .header {
+                font-size: 2.5rem;
+                font-weight: 700;
+                margin-top: 3rem;
+                margin-bottom: 1.5rem;
+            }
+            .subtitle {
+                color: #c3d6b2;
+                max-width: 55%;
+                font-size: 1.6rem;
+                /* margin: 0px; */
+            }
+            .card-container {
+                display: flex;
+                flex-wrap: wrap;
+            }
+        </style>
+    </main></Layout
+>