diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index c578d27..7eddee8 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -3,11 +3,19 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { getArticleById, getListArticle } from "@/service/article";
-import { close, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
+import { close, error, loading } from "@/config/swal";
+import { useParams, usePathname } from "next/navigation";
 import Author from "../landing-page/author";
 import { Link2, MailIcon } from "lucide-react";
 import { getAdvertise } from "@/service/advertisement";
+import {
+  getArticleComment,
+  otpRequest,
+  otpValidation,
+  postArticleComment,
+} from "@/service/master-user";
+import { saveActivity } from "@/service/activity-log";
+import { useForm } from "react-hook-form";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -46,6 +54,7 @@ type Advertise = {
 export default function DetailContent() {
   const params = useParams();
   const id = params?.id;
+  const pathname = usePathname();
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const [articles, setArticles] = useState<Article[]>([]);
@@ -72,7 +81,67 @@ export default function DetailContent() {
   const [tabArticles, setTabArticles] = useState<Article[]>([]);
 
   const [activeTab, setActiveTab] = useState<TabKey>("trending");
+  const [needOtp, setNeedOtp] = useState(false);
+  const [otpValue, setOtpValue] = useState("");
+  const { register, handleSubmit, reset, watch } = useForm();
+  const [commentList, setCommentList] = useState<any>([]);
 
+  useEffect(() => {
+    fetchData();
+  }, [id]);
+
+  const fetchData = async () => {
+    try {
+      const res = await getArticleComment(String(id));
+      const data = res?.data?.data;
+      setCommentList(data);
+      console.log("komen", data);
+    } catch (err) {
+      console.error("❌ Gagal memuat komentar:", err);
+      setCommentList([]);
+    }
+  };
+
+  const onSubmit = async (values: any) => {
+    if (!needOtp) {
+      const res = await otpRequest(values.email, values?.name);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      setNeedOtp(true);
+    } else {
+      const validation = await otpValidation(values.email, otpValue);
+      if (validation?.error) {
+        error("OTP Tidak Sesuai");
+        return false;
+      }
+
+      const data = {
+        commentFromName: values.name,
+        commentFromEmail: values.email,
+        articleId: Number(id),
+        isPublic: false,
+        message: values.comment,
+        parentId: 0,
+      };
+      const res = await postArticleComment(data);
+      if (res?.error) {
+        error(res?.message);
+        return false;
+      }
+      const req: any = {
+        activityTypeId: 5,
+        url: "https://dev.mikulnews/" + pathname,
+        articleId: Number(id),
+      };
+
+      const resActivity = await saveActivity(req);
+      reset();
+      fetchData();
+      setNeedOtp(false);
+    }
+  };
   const tabs: { id: TabKey; label: string }[] = [
     { id: "trending", label: "Trending" },
     { id: "comments", label: "Comments" },
@@ -473,85 +542,121 @@ export default function DetailContent() {
               ditandai <span className="text-orange-600">*</span>
             </p>
 
-            <form className="space-y-6 mt-6">
-              <div>
-                <label
-                  htmlFor="komentar"
-                  className="block text-sm font-medium mb-1"
-                >
-                  Komentar <span className="text-orange-600">*</span>
-                </label>
-                <textarea
-                  id="komentar"
-                  className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
-                  required
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="nama"
-                  className="block text-sm font-medium mb-1"
-                >
-                  Nama <span className="text-orange-600">*</span>
-                </label>
-                <input
-                  type="text"
-                  id="nama"
-                  className="w-full border border-gray-300 rounded-md p-2"
-                  required
-                />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block text-sm font-medium mb-1"
+            <div>
+              <h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
+              {commentList?.length === 0 ? (
+                <p className="text-sm text-gray-500">Belum ada komentar.</p>
+              ) : (
+                commentList?.map((comment: any) => (
+                  <div
+                    key={comment.id}
+                    className="border rounded-lg p-3 bg-gray-50 shadow-sm"
                   >
-                    Email <span className="text-orange-600">*</span>
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    className="w-full border border-gray-300 rounded-md p-2"
-                    required
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="website"
-                    className="block text-sm font-medium mb-1"
+                    <p className="text-sm text-gray-800 whitespace-pre-line">
+                      {comment.message}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {comment.commentFromName || "Anonim"} •{" "}
+                      {new Date(comment.createdAt).toLocaleString("id-ID", {
+                        dateStyle: "short",
+                        timeStyle: "short",
+                      })}
+                    </p>
+                  </div>
+                ))
+              )}
+            </div>
+            <form className="space-y-6 mt-6" onSubmit={handleSubmit(onSubmit)}>
+              {!needOtp ? (
+                <>
+                  {/* Komentar */}
+                  <div>
+                    <label
+                      htmlFor="komentar"
+                      className="block text-sm font-medium mb-1"
+                    >
+                      Komentar <span className="text-green-600">*</span>
+                    </label>
+                    <textarea
+                      id="komentar"
+                      className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
+                      {...register("comment", { required: true })}
+                    />
+                  </div>
+
+                  {/* Nama */}
+                  <div>
+                    <label
+                      htmlFor="nama"
+                      className="block text-sm font-medium mb-1"
+                    >
+                      Nama <span className="text-green-600">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      id="nama"
+                      className="w-full border border-gray-300 rounded-md p-2"
+                      {...register("name", { required: true })}
+                    />
+                  </div>
+
+                  {/* Email */}
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium mb-1"
+                    >
+                      Email <span className="text-green-600">*</span>
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      className="w-full border border-gray-300 rounded-md p-2"
+                      {...register("email", { required: true })}
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
                   >
-                    Situs Web
-                  </label>
-                  <input
-                    type="url"
-                    id="website"
-                    className="w-full border border-gray-300 rounded-md p-2"
-                  />
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-2 mt-2">
-                <input type="checkbox" id="saveInfo" className="mt-1" />
-                <label htmlFor="saveInfo" className="text-sm text-gray-700">
-                  Simpan nama, email, dan situs web saya pada peramban ini untuk
-                  komentar saya berikutnya.
-                </label>
-              </div>
-
-              <p className="text-red-600 text-sm">
-                The reCAPTCHA verification period has expired. Please reload the
-                page.
-              </p>
-
-              <button
-                type="submit"
-                className="bg-orange-600 hover:bg-orange-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
-              >
-                KIRIM KOMENTAR
-              </button>
+                    KIRIM KOMENTAR
+                  </button>
+                </>
+              ) : (
+                <>
+                  <p className="text-sm text-gray-600">
+                    Kode verifikasi sudah dikirimkan. Silakan cek Email Anda!
+                  </p>
+                  <div>
+                    <label className="block text-sm font-medium mb-1 mt-4">
+                      OTP
+                    </label>
+                    <div className="flex gap-2 justify-center">
+                      {[...Array(6)].map((_, i) => (
+                        <input
+                          key={i}
+                          type="text"
+                          maxLength={1}
+                          className="w-10 h-10 text-center border border-gray-300 rounded-md text-lg"
+                          value={otpValue[i] || ""}
+                          onChange={(e) => {
+                            const newValue = otpValue.split("");
+                            newValue[i] = e.target.value.replace(/[^0-9]/g, "");
+                            setOtpValue(newValue.join(""));
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                  <button
+                    type="submit"
+                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
+                  >
+                    Kirim
+                  </button>
+                </>
+              )}
             </form>
           </div>
         </div>
diff --git a/service/master-user.ts b/service/master-user.ts
index 41bcf3d..af0f6ca 100644
--- a/service/master-user.ts
+++ b/service/master-user.ts
@@ -94,16 +94,21 @@ export async function otpValidation(email: string, otpCode: string) {
   return await httpPost(pathUrl, { email, otpCode });
 }
 
+// export async function postArticleComment(data: any) {
+//   const headers = token
+//     ? {
+//         "content-type": "application/json",
+//         Authorization: `Bearer ${token}`,
+//       }
+//     : {
+//         "content-type": "application/json",
+//       };
+//   return await httpPost(`/article-comments`, headers, data);
+// }
+
 export async function postArticleComment(data: any) {
-  const headers = token
-    ? {
-        "content-type": "application/json",
-        Authorization: `Bearer ${token}`,
-      }
-    : {
-        "content-type": "application/json",
-      };
-  return await httpPost(`/article-comments`, headers, data);
+  const pathUrl = `/article-comments`;
+  return await httpPostInterceptor(pathUrl, data);
 }
 
 export async function editArticleComment(data: any, id: number) {
@@ -112,7 +117,7 @@ export async function editArticleComment(data: any, id: number) {
 }
 
 export async function getArticleComment(id: string) {
-  const pathUrl = `/article-comments?isPublic=true&articleId=${id}`;
+  const pathUrl = `/article-comments?isPublic=false&articleId=${id}`;
   return await httpGet(pathUrl);
 }