diff --git a/packages/web/src/designer/QueryDesignToolbar.js b/packages/web/src/designer/QueryDesignToolbar.js
index 69962401e..22c2fa3c4 100644
--- a/packages/web/src/designer/QueryDesignToolbar.js
+++ b/packages/web/src/designer/QueryDesignToolbar.js
@@ -2,13 +2,25 @@ import React from 'react';
 import useHasPermission from '../utility/useHasPermission';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryDesignToolbar({ execute, isDatabaseDefined, busy, save, modelState, dispatchModel }) {
+export default function QueryDesignToolbar({
+  execute,
+  isDatabaseDefined,
+  busy,
+  save,
+  modelState,
+  dispatchModel,
+  isConnected,
+  kill,
+}) {
   const hasPermission = useHasPermission();
   return (
     <>
       <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="icon run">
         Execute
       </ToolbarButton>
+      <ToolbarButton disabled={!isConnected} onClick={kill} icon="icon close">
+        Kill
+      </ToolbarButton>
       {hasPermission('files/query/write') && (
         <ToolbarButton onClick={save} icon="icon save">
           Save
diff --git a/packages/web/src/tabs/QueryDesignTab.js b/packages/web/src/tabs/QueryDesignTab.js
index db4f2c9ee..8e87f5626 100644
--- a/packages/web/src/tabs/QueryDesignTab.js
+++ b/packages/web/src/tabs/QueryDesignTab.js
@@ -28,6 +28,7 @@ import useUndoReducer from '../utility/useUndoReducer';
 
 export default function QueryDesignTab({ tabid, conid, database, tabVisible, toolbarPortalRef, ...other }) {
   const [sessionId, setSessionId] = React.useState(null);
+  const [visibleResultTabs, setVisibleResultTabs] = React.useState(false);
   const [executeNumber, setExecuteNumber] = React.useState(0);
   const setOpenedTabs = useSetOpenedTabs();
   const socket = useSocket();
@@ -101,6 +102,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   const handleExecute = React.useCallback(async () => {
     if (busy) return;
     setExecuteNumber((num) => num + 1);
+    setVisibleResultTabs(true);
 
     let sesid = sessionId;
     if (!sesid) {
@@ -118,14 +120,8 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
     });
   }, [busy, conid, sessionId, database, sqlPreview]);
 
-  const handleCancel = () => {
-    axios.post('sessions/cancel', {
-      sesid: sessionId,
-    });
-  };
-
-  const handleKill = () => {
-    axios.post('sessions/kill', {
+  const handleKill = async () => {
+    await axios.post('sessions/kill', {
       sesid: sessionId,
     });
     setSessionId(null);
@@ -176,7 +172,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
           <TabPage label="SQL" key="sql">
             <SqlEditor value={sqlPreview} engine={engine} readOnly />
           </TabPage>
-          {sessionId && (
+          {visibleResultTabs && (
             <TabPage label="Messages" key="messages">
               <SocketMessagesView
                 eventName={sessionId ? `session-info-${sessionId}` : null}
@@ -199,8 +195,8 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
             // cancel={handleCancel}
             // format={handleFormatCode}
             save={saveFileModalState.open}
-            // isConnected={!!sessionId}
-            // kill={handleKill}
+            isConnected={!!sessionId}
+            kill={handleKill}
           />,
           toolbarPortalRef.current
         )}