diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fefb43c..a838e6c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,10 +15,13 @@
 >
     <div class="flex flex-row items-center">
         <a href="/" class="font-bold text-2xl">{data.blog.site.name}</a>
-        <div class="flex flex-row ml-8 font-bold">
+        <div class="flex flex-row ml-8 font-bold gap-4">
             {#if data.blog.site.use_about_page}
                 <a href="/about">About</a>
             {/if}
+            {#if data.blog.site.use_contact_page}
+                <a href="/contact">Contact</a>
+            {/if}
         </div>
     </div>
     <div>
diff --git a/src/routes/contact/+page.server.js b/src/routes/contact/+page.server.js
new file mode 100644
index 0000000..b0b34ad
--- /dev/null
+++ b/src/routes/contact/+page.server.js
@@ -0,0 +1,47 @@
+import { redirect } from "@sveltejs/kit";
+import { get } from 'svelte/store';
+import { site_id } from '../store';
+import { env } from '$lib';
+
+/** @type {import("@sveltejs/kit").Actions} */
+export const actions = {
+    contact: async (event) => {
+        const data = await event.request.formData();
+
+        const subject = data.get("subject");
+        const email = data.get("email");
+        const message = data.get("message");
+
+        if (!subject || !email || !message) {
+            return {
+                success: false,
+                message: "missing data"
+            }
+        }
+        
+        if (!email.toString().includes("@")) {
+            return {
+                success: false,
+                message: "invalid email"
+            }
+        }
+
+        let res = await fetch(env.api_url + "/blog/contact", {
+            method: "POST",
+            headers: {
+                "content-type": "application/json"
+            },
+            body: JSON.stringify({
+                subject,
+                email,
+                content: message,
+                blog_id: get(site_id)
+            })
+        });
+        console.log(await res.text());
+
+        return {
+            success: true
+        }
+    },
+}
\ No newline at end of file
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
new file mode 100644
index 0000000..22684ac
--- /dev/null
+++ b/src/routes/contact/+page.svelte
@@ -0,0 +1,28 @@
+<div class="mt-44 mb-6 text-center w-full flex justify-center">
+    <form action="?/contact" method="post" class="flex flex-col gap-4 max-w-[400px] w-full">
+        <input
+            name="email"
+            id="email"
+            type="text"
+            placeholder="Email address"
+            class="py-3 px-5 flex-grow border border-solid border-gray-300 h-[50px] rounded-lg"
+        />
+        <input
+            name="subject"
+            id="subject"
+            type="text"
+            placeholder="Subject"
+            class="py-3 px-5 flex-grow border border-solid border-gray-300 h-[50px] rounded-lg"
+        />
+        <textarea
+            name="message"
+            id="message"
+            placeholder="Message"
+            class="py-3 px-5 flex-grow border border-solid border-gray-300 h-[200px] rounded-lg"
+        />
+        <button
+            class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-lg h-[50px]"
+            >Submit</button
+        >
+    </form>
+</div>
diff --git a/static/SeorGrBp5preyO7sH0fCsTyaJLM.webp b/static/SeorGrBp5preyO7sH0fCsTyaJLM.webp
new file mode 100644
index 0000000..6e30076
Binary files /dev/null and b/static/SeorGrBp5preyO7sH0fCsTyaJLM.webp differ
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..c06e009
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e6..0000000
Binary files a/static/favicon.png and /dev/null differ