diff --git a/src/app/report/[id]/page.tsx b/src/app/report/[id]/page.tsx
index 35d72da..80cedd6 100644
--- a/src/app/report/[id]/page.tsx
+++ b/src/app/report/[id]/page.tsx
@@ -19,11 +19,12 @@ const ReportDetails = async ({
   params: { id: string };
 }) => {
   const getReportDetails = async () => {
-    const res = await apiInstance.get<IReport>(
-      `/report/${params.id}/`
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
+      { cache: "no-store" }
     );
 
-    return res.data;
+    return res.json();
   };
   const report: IReport = await getReportDetails();
 
@@ -75,6 +76,7 @@ const ReportDetails = async ({
 
     return images;
   };
+
   return (
     <div className="report-details page-padding">
       <div className="report-details__container">
@@ -94,7 +96,10 @@ const ReportDetails = async ({
                 , {report.created_at.slice(0, 4)}
               </p>
             </div>
-            <ReportLike count={report.total_likes} />
+            <ReportLike
+              count={report.total_likes}
+              report_id={report.id}
+            />
           </div>
 
           <p className="report-information__description">
diff --git a/src/features/ReportLike/ReportLike.tsx b/src/features/ReportLike/ReportLike.tsx
index 3b6b076..7ba1e42 100644
--- a/src/features/ReportLike/ReportLike.tsx
+++ b/src/features/ReportLike/ReportLike.tsx
@@ -1,20 +1,53 @@
+"use client";
+
 import "./ReportLike.scss";
 import Image from "next/image";
 import like from "./icons/like.svg";
 import { apiInstance } from "@/shared/config/apiConfig";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 
 interface IReportLikeProps {
   count: number;
+  report_id: number;
 }
 
 const ReportLike: React.FC<IReportLikeProps> = ({
   count,
+  report_id,
 }: IReportLikeProps) => {
-  const likeReport = async () => {
-    const res = await apiInstance.post("");
+  const session = useSession();
+  const router = useRouter();
+
+  const getFans = async () => {
+    const res = await apiInstance.get(
+      `/report/${report_id}/get_fans`
+    );
+
+    return res.data;
   };
+
+  const likeReport = async () => {
+    const Authorization = `Bearer ${session?.data?.access_token}`;
+    const config = {
+      headers: {
+        Authorization,
+      },
+    };
+
+    // console.log(getFans());
+
+    const res = await apiInstance.post(
+      `/report/${report_id}/like/`,
+      {},
+      config
+    );
+
+    router.refresh();
+  };
+
   return (
-    <button className="report-like">
+    <button onClick={likeReport} className="report-like">
       <Image src={like} alt="Like Icon" />
       <span>{count}</span>
     </button>