diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 19f12e9d4..b2052ab84 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -43,9 +43,7 @@ export default function InputGlobalComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      deleteGlobalVariable(id)
-        .then((_) => {
-          removeGlobalVariable(key);
+      removeGlobalVariable(key).then((_) => {
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index ff0514042..5a2a67fa4 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
+import { deleteGlobalVariable } from "../controllers/API";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
@@ -29,7 +30,10 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    removeGlobalVariable: (name) => {
+    removeGlobalVariable:async (name) => {
+      const id = get().globalVariables[name]?.id;
+      if (id === undefined) return;
+      await deleteGlobalVariable(id)
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index d34973a17..0fc9bb473 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -5,7 +5,7 @@ export type GlobalVariablesStore = {
     [name: string]: { id: string; type?: string, default_fields?: string[]};
   }) => void;
   addGlobalVariable: (name: string, id: string, type?: string, default_fields?: string[]) => void;
-  removeGlobalVariable: (name: string) => void;
+  removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
   unavaliableFields: Set<string>;
   setUnavaliableFields: (fields: Set<string>) => void;