diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index 1462e407d6..aa0c3c17b2 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -25,7 +25,7 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { deploymentList, execute, func, proxyRuleList } from './store';
+    import { deploymentList, execute, func, proxyRuleList, showFunctionExecute } from './store';
     import { Container, ContainerHeader } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { calculateSize, humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -151,7 +151,10 @@
 
                         <Button
                             secondary
-                            on:click={() => ($execute = $func)}
+                            on:click={() => {
+                                $execute = $func;
+                                $showFunctionExecute = true;
+                            }}
                             disabled={isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE}>
                             Execute now
                         </Button>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index 278a3ceabd..4c10082c4b 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -16,6 +16,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
+    import { showFunctionExecute } from './store';
 
     export let selectedFunction: Models.Function = null;
 
@@ -34,13 +35,8 @@
         { label: 'OPTIONS', value: 'OPTIONS' }
     ];
 
-    let show = false;
     let submitting = false;
 
-    $: if (selectedFunction && !show) {
-        show = true;
-    }
-
     const handleSubmit = async () => {
         submitting = true;
         try {
@@ -80,7 +76,7 @@
 
     function close() {
         selectedFunction = null;
-        show = false;
+        $showFunctionExecute = false;
     }
 
     afterNavigate(close);
@@ -89,10 +85,9 @@
 <Modal
     title="Execute function"
     headerDivider={false}
-    bind:show
+    bind:show={$showFunctionExecute}
     size="big"
     onSubmit={handleSubmit}
-    on:close={close}
     bind:error>
     <p class="text">
         Manually execute your function. <a
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
index 6db3add0df..57ee9f4f3b 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -19,7 +19,7 @@
     import { log } from '$lib/stores/logs';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { func } from '../store';
+    import { func, showFunctionExecute } from '../store';
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing';
@@ -54,7 +54,10 @@
         title="Executions"
         buttonText="Execute now"
         buttonEvent="execute_function"
-        buttonMethod={() => (selectedFunction = $func)}>
+        buttonMethod={() => {
+            selectedFunction = $func;
+            $showFunctionExecute = true;
+        }}>
         <svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
             <p class="u-bold">The {tier} plan has limits</p>
             <ul>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
index 112bc2758f..ba4d81ea3f 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -2,7 +2,7 @@
     import { CardGrid, Heading, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { execute, func } from '../store';
+    import { execute, func, showFunctionExecute } from '../store';
 </script>
 
 <CardGrid>
@@ -26,6 +26,11 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+        <Button
+            secondary
+            on:click={() => {
+                $execute = $func;
+                $showFunctionExecute = true;
+            }}>Execute now</Button>
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/store.ts b/src/routes/console/project-[project]/functions/function-[function]/store.ts
index c08ec380a8..0bc01a1d46 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/store.ts
@@ -12,6 +12,8 @@ export const proxyRuleList = derived(
     ($page) => $page.data.proxyRuleList as Models.ProxyRuleList
 );
 export const execute: Writable<Models.Function> = writable();
+export const showFunctionExecute: Writable<boolean> = writable(false);
+
 export const repositories: Writable<{
     search: string;
     installationId: string;