diff --git a/src/components/CommentForm.astro b/src/components/CommentForm.astro
index 3ddc01a..e80cd78 100644
--- a/src/components/CommentForm.astro
+++ b/src/components/CommentForm.astro
@@ -1,5 +1,6 @@
 ---
-
+const { entryId } = Astro.props;
+const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 ---
 
 <style>
@@ -20,18 +21,33 @@
   }
 </style>
 
-<form>
+<form
+  id="comment-form"
+  hx-post=`${backendHost}/api/blog/comments`
+  hx-target="#comments-container"
+  hx-swap="afterbegin"
+  hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()"
+>
   <div class="p-1 flex flex-col flex-end items-end gap-3">
     <textarea
       class="textarea py-2 px-3 w-full box-border"
       rows="5"
-      placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"></textarea>
+      placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"
+      name="commentBody"></textarea>
     <input
       type="text"
       class="w-full py-2 px-3 box-border"
-      placeholder="İsminiz (Yazmak zorunda değilsiniz)"
+      placeholder="İsminiz (Yazmazsanız yorumunuz anonim kalacaktır)"
+      name="username"
     />
 
-    <button type="submit" class="px-3 py-1 w-fit">Yorum Yap</button>
+    <input type="hidden" name="postId" value=`${entryId}` />
+    <button type="submit" class="px-3 py-1 w-fit" id="comment-form-button"
+      >Yorum Yap</button
+    >
   </div>
 </form>
+
+<script>
+  function clearNoCommentText() {}
+</script>
diff --git a/src/components/EmojiReactionForm.astro b/src/components/EmojiReactionForm.astro
index 1eb6f63..e770128 100644
--- a/src/components/EmojiReactionForm.astro
+++ b/src/components/EmojiReactionForm.astro
@@ -15,7 +15,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 </style>
 
 <form
-  hx-post=`${backendHost}/blog/api/forms/emoji/post`
+  hx-post=`${backendHost}/api/blog/forms/emoji`
   hx-target="#reaction-buttons"
 >
   <input type="hidden" name="postId" value=`${entryId}` />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 774f975..874345a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,6 +16,7 @@ import "../styles/main.css";
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <script src="../scripts/htmx.min.js"></script>
+    <meta name="htmx-config" content='{code:"204", swap: false}' />
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">
diff --git a/src/pages/category/[category]/[slug]/index.astro b/src/pages/category/[category]/[slug]/index.astro
index 9c5a79d..ae346d8 100644
--- a/src/pages/category/[category]/[slug]/index.astro
+++ b/src/pages/category/[category]/[slug]/index.astro
@@ -12,6 +12,8 @@ import Comment from "@/components/Comment.astro";
 
 const { entry } = Astro.props;
 
+const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
+
 export async function getStaticPaths() {
   const blogEntries = await getCollection("blog");
   return blogEntries.map((entry) => ({
@@ -29,10 +31,16 @@ export async function getStaticPaths() {
   <section class="comments">
     <h6 class="text-xl mb-3">Yorumlar</h6>
     <div class="flex flex-col gap-6">
-      <Comment />
-      <Comment />
+      <div
+        hx-get=`${backendHost}/api/blog/comments?postId=${entry.id}`
+        hx-trigger="load"
+        hx-swap="innerHTML"
+        id="comments-container"
+      >
+        <p id="no-comments-text">Henüz yorum yok!</p>
+      </div>
       <HorizontalLine />
-      <CommentForm />
+      <CommentForm entryId={entry.id} />
     </div>
   </section>
   <Footer />
