diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 312299173..954a6e20a 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -20,9 +20,10 @@ import { copyTextToClipboard } from "helpers/string.helper";
 
 type Props = {
   module: IModule;
+  handleEditModule: () => void;
 };
 
-export const SingleModuleCard: React.FC<Props> = ({ module }) => {
+export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
 
   const router = useRouter();
@@ -64,6 +65,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
         <div className="absolute top-4 right-4 ">
           <CustomMenu width="auto" ellipsis>
             <CustomMenu.MenuItem onClick={handleCopyText}>Copy module link</CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={handleEditModule}>Edit module</CustomMenu.MenuItem>
             <CustomMenu.MenuItem onClick={handleDeleteModule}>
               Delete module permanently
             </CustomMenu.MenuItem>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index fb67af9e1..266d79318 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 import useSWR from "swr";
@@ -12,13 +12,13 @@ import { requiredAuth } from "lib/auth";
 import projectService from "services/project.service";
 import modulesService from "services/modules.service";
 // components
-import { SingleModuleCard } from "components/modules";
+import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
 // ui
 import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
-import { IModule } from "types/modules";
+import { IModule, SelectModuleType } from "types/modules";
 // fetch-keys
 import type { NextPage, NextPageContext } from "next";
 import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
@@ -26,6 +26,8 @@ import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 const ProjectModules: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
+  const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
+  const [createUpdateModule, setCreateUpdateModule] = useState(false);
 
   const { data: activeProject } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@@ -41,6 +43,19 @@ const ProjectModules: NextPage = () => {
       : null
   );
 
+  const handleEditModule = (module: IModule) => {
+    setSelectedModule({ ...module, actionType: "edit" });
+    setCreateUpdateModule(true);
+  };
+
+  useEffect(() => {
+    if (createUpdateModule) return;
+    const timer = setTimeout(() => {
+      setSelectedModule(undefined);
+      clearTimeout(timer);
+    }, 500);
+  }, [createUpdateModule]);
+
   return (
     <AppLayout
       meta={{
@@ -65,12 +80,22 @@ const ProjectModules: NextPage = () => {
         />
       }
     >
+      <CreateUpdateModuleModal
+        isOpen={createUpdateModule}
+        // handleClose={() => setCreateUpdateModule(false)}
+        setIsOpen={setCreateUpdateModule}
+        data={selectedModule}
+      />
       {modules ? (
         modules.length > 0 ? (
           <div className="space-y-5">
             <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
               {modules.map((module) => (
-                <SingleModuleCard key={module.id} module={module} />
+                <SingleModuleCard
+                  key={module.id}
+                  module={module}
+                  handleEditModule={() => handleEditModule(module)}
+                />
               ))}
             </div>
           </div>