diff --git a/packages/nextjs/components/projects/Card.tsx b/packages/nextjs/components/projects/Card.tsx
index 86a727e..0befb3d 100644
--- a/packages/nextjs/components/projects/Card.tsx
+++ b/packages/nextjs/components/projects/Card.tsx
@@ -34,8 +34,8 @@ const Card = ({ project, display }: any) => {
 
           <div className="flex items-center">
             <div className="flex-1">
-              <Link href={`/projects/${project._id}`}>
-                <p className="text-[18px] font-bold leading-[28px] mb-0 mt-2">{name}</p>
+              <Link href={`/projects/${project._id}`} className="truncate">
+                <p className="truncate text-[18px] font-bold leading-[28px] mb-0 mt-2">{name}</p>
               </Link>
 
               <div className="flex items-center">
diff --git a/packages/nextjs/components/shared/SuggestProjects.tsx b/packages/nextjs/components/shared/SuggestProjects.tsx
index dfece75..b39ea03 100644
--- a/packages/nextjs/components/shared/SuggestProjects.tsx
+++ b/packages/nextjs/components/shared/SuggestProjects.tsx
@@ -1,36 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Card from "../projects/Card";
 
-const data = [
-  {
-    id: 1,
-    banner: "/assets/projects/Img.png",
-    logo: "/assets/Logo.png",
-    name: "WalletConnect",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "Collective Governance",
-  },
-  {
-    id: 2,
-    banner: "/assets/projects/Img (1).png",
-    logo: "/assets/projects/Logo_2.png",
-    name: "DefiLlama",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "Developer Ecosystem",
-  },
-  {
-    id: 3,
-    banner: "/assets/projects/Img (2).png",
-    logo: "/assets/projects/Logo34.png",
-    name: "Cryptotesters",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "End User Experience and Adoption",
-  },
-];
-
 interface Project {
   id: number;
   banner: string;
@@ -40,30 +10,19 @@ interface Project {
   category: string;
 }
 
-function SuggestProjects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-
-  useEffect(() => {
-    const getSuggestProjects = async () => {
-      try {
-        // Fetch SuggestProjects from data source
-        // const data: Project[] = await fetchProjectData();
-        setProjects(data);
-      } catch (error) {
-        console.error("Error fetching suggest projects:", error);
-      }
-    };
-    getSuggestProjects();
-  }, []);
-
+function SuggestProjects({ suggestedProjects }: any) {
   return (
     <div className="pt-16 pb-24">
       <h3 className="font-bold text-2xl leading-8 ">You may be also interested</h3>
       <p className="text-lightGray text-[17px] leading-5">Discover more popular projects</p>
       <div className="grid pt-4 gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
-        {projects.map(project => (
-          <Card key={project.id} project={project} display="grids" />
-        ))}
+        {suggestedProjects.length > 0 ? (
+          suggestedProjects.map((project: Project) => <Card key={project.id} project={project} display="grids" />)
+        ) : (
+          <div className="text-xl">
+            <h1>No suggested projects available...</h1>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/nextjs/hooks/scaffold-eth/useSuggestedProjects.ts b/packages/nextjs/hooks/scaffold-eth/useSuggestedProjects.ts
new file mode 100644
index 0000000..ffbc21a
--- /dev/null
+++ b/packages/nextjs/hooks/scaffold-eth/useSuggestedProjects.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export function useSuggestedProjects(category: any, currentProjectId: string) {
+  const [suggestedProjects, setSuggestedProjects] = useState([]);
+
+  useEffect(() => {
+    const getSuggestedProjectsByCategory = async () => {
+      try {
+        const response = await fetch(
+          `/api/suggestedProjects?category=${category}&currentProjectId=${currentProjectId}`,
+        );
+        const data = await response.json();
+        setSuggestedProjects(data);
+      } catch (error) {
+        console.error("Error fetching /api/suggested-projects/category", error);
+        throw error;
+      }
+    };
+    if (category && currentProjectId) {
+      getSuggestedProjectsByCategory();
+    }
+  }, [category, currentProjectId]);
+
+  return {
+    suggestedProjects,
+  };
+}
diff --git a/packages/nextjs/models/Project.ts b/packages/nextjs/models/Project.ts
index 7fa533f..f3a6883 100644
--- a/packages/nextjs/models/Project.ts
+++ b/packages/nextjs/models/Project.ts
@@ -68,4 +68,4 @@ const projectSchema = new Schema<ProjectDocument>({
 
 const Project = mongoose.models.Projects || mongoose.model("Projects", projectSchema);
 
-export default Project;
\ No newline at end of file
+export default Project;
diff --git a/packages/nextjs/pages/api/suggestedProjects.ts b/packages/nextjs/pages/api/suggestedProjects.ts
new file mode 100644
index 0000000..40df7fd
--- /dev/null
+++ b/packages/nextjs/pages/api/suggestedProjects.ts
@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import dbConnect from "~~/lib/dbConnect";
+import Project, { ProjectDocument } from "~~/models/Project";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ message: "Method not allowed." });
+  }
+  await dbConnect();
+  const { category, currentProjectId } = req.query;
+  const suggestedProjects: ProjectDocument[] = await Project.find({ category, _id: { $ne: currentProjectId } }).limit(
+    3,
+  );
+
+  return res.status(200).json(suggestedProjects);
+}
diff --git a/packages/nextjs/pages/lists/[listId].tsx b/packages/nextjs/pages/lists/[listId].tsx
index 8623122..c94525f 100644
--- a/packages/nextjs/pages/lists/[listId].tsx
+++ b/packages/nextjs/pages/lists/[listId].tsx
@@ -6,6 +6,7 @@ import SharedProjects from "~~/components/lists/SharedProjects";
 import YourBallot from "~~/components/op/projects/YourBallot";
 import { Address } from "~~/components/scaffold-eth";
 import SuggestProjects from "~~/components/shared/SuggestProjects";
+import { useSuggestedProjects } from "~~/hooks/scaffold-eth/useSuggestedProjects";
 import dbConnect from "~~/lib/dbConnect";
 import List from "~~/models/List";
 import { IList } from "~~/types/list";
@@ -18,6 +19,10 @@ interface Props {
 const ListDetail: NextPage<Props> = ({ list }) => {
   const [openLikedModal, setopenLikedModal] = React.useState(false);
   const [isLiked, setIsLiked] = React.useState(false);
+  const tempCategory = list.tags ? list?.tags[0] : undefined;
+  const category = tempCategory && tempCategory[0]?.toUpperCase() + tempCategory?.slice(1);
+  const currentProjectId = list._id;
+  const { suggestedProjects } = useSuggestedProjects(category, currentProjectId);
   return (
     <div className=" mx-auto px-12 mt-12 grid lg:grid-cols-[350px,1fr] gap-12">
       <YourBallot />
@@ -87,7 +92,7 @@ const ListDetail: NextPage<Props> = ({ list }) => {
 
         <div className="mt-16">
           <SharedProjects list={list} />
-          <SuggestProjects />
+          <SuggestProjects suggestedProjects={suggestedProjects} />
         </div>
       </div>
     </div>
diff --git a/packages/nextjs/pages/projects/[projectId].tsx b/packages/nextjs/pages/projects/[projectId].tsx
index b2bb328..10d6f08 100644
--- a/packages/nextjs/pages/projects/[projectId].tsx
+++ b/packages/nextjs/pages/projects/[projectId].tsx
@@ -6,6 +6,7 @@ import { HeartIcon } from "@heroicons/react/24/outline";
 import { Address } from "~~/components/scaffold-eth";
 import SuggestProjects from "~~/components/shared/SuggestProjects";
 import { useBallot } from "~~/context/BallotContext";
+import { useSuggestedProjects } from "~~/hooks/scaffold-eth/useSuggestedProjects";
 import dbConnect from "~~/lib/dbConnect";
 import Project, { ProjectDocument } from "~~/models/Project";
 import { notification } from "~~/utils/scaffold-eth";
@@ -18,6 +19,9 @@ const ProjectDetail: NextPage<Props> = ({ projects }) => {
   const [isLiked, setIsLiked] = React.useState(false);
   const [isAdded, setIsAdded] = useState(false);
   const { state, dispatch } = useBallot();
+  const category = projects.length > 0 ? projects[0].category : undefined;
+  const currentProjectId = projects[0]._id;
+  const { suggestedProjects } = useSuggestedProjects(category, currentProjectId);
 
   useEffect(() => {
     if (!state) return;
@@ -81,7 +85,7 @@ const ProjectDetail: NextPage<Props> = ({ projects }) => {
           </button>
         </div>
         <div className="mt-16">
-          <SuggestProjects />
+          <SuggestProjects suggestedProjects={suggestedProjects} />
         </div>
       </div>
     </div>