diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index ae3e452b..e03fc7ac 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@@ -87,6 +87,14 @@ const DeploymentDetailsCard = ({
     }
   };
 
+  const fetchDeploymentLogs = useCallback(async () => {
+    let url = `${deployment.deployer.deployerApiUrl}/log/${deployment.applicationDeploymentRequestId}`;
+    const res = await fetch(url);
+    const logs = await res.text();
+    setDeploymentLogs(logs);
+    handleOpenDialog();
+  }, [deployment.deployer.deployerApiUrl, deployment.applicationDeploymentRequestId, handleOpenDialog]);
+
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
       return (
@@ -95,14 +103,7 @@ const DeploymentDetailsCard = ({
             leftIcon={getIconByDeploymentStatus(deployment.status)}
             size="xs"
             type={STATUS_COLORS[deployment.status] ?? 'neutral'}
-            onClick={async()=> {
-              let url = `${deployment.deployer.deployerApiUrl}/log/${deployment.applicationDeploymentRequestId}`
-              const res = await fetch(url);
-              const logs = await res.text()
-              // console.log(">>>>RESPONSE",await res.text())
-              setDeploymentLogs(logs)
-              handleOpenDialog()
-            }}
+            onClick={fetchDeploymentLogs}
           >
             {deployment.status}
           </Tag>
diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx
index 1eece68c..f1830c02 100644
--- a/packages/frontend/src/pages/components/modals.tsx
+++ b/packages/frontend/src/pages/components/modals.tsx
@@ -36,7 +36,11 @@ const deployment: Deployment = {
   url: 'https://deploy1.example.com',
   environment: Environment.Production,
   isCurrent: true,
-  deployerLrn: 'lrn://example/deployers/webapp-deployer-api.test.com',
+  deployer: {
+    deployerApiUrl: 'https://webapp-deployer-api.example.com',
+    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
+    deployerLrn:'lrn://example/deployers/webapp-deployer-api.example.com'
+  },
   status: DeploymentStatus.Ready,
   createdBy: {
     id: 'user1',
@@ -49,6 +53,7 @@ const deployment: Deployment = {
   },
   createdAt: '1677676800', // 2023-03-01T12:00:00Z
   updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };
 
 const domains: Domain[] = [
@@ -270,4 +275,4 @@ const ModalsPage: React.FC = () => {
   );
 };
 
-export default ModalsPage;
+export default ModalsPage;
\ No newline at end of file
diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts
index 5559cbed..fc5e186d 100644
--- a/packages/frontend/src/stories/MockStoriesData.ts
+++ b/packages/frontend/src/stories/MockStoriesData.ts
@@ -102,7 +102,12 @@ export const deployment0: Deployment = {
   domain: domain0,
   commitMessage: 'Commit Message',
   createdBy: user,
-  deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
+  deployer:  {
+    deployerApiUrl: 'https://webapp-deployer-api.example.com',
+    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
+    deployerLrn:'lrn://deployer.apps.snowballtools.com '
+  },
+  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };
 
 export const project: Project = {
@@ -126,4 +131,4 @@ export const project: Project = {
   icon: 'Icon',
   fundsReleased: true,
   baseDomains: ['baseDomain'],
-};
+};
\ No newline at end of file