diff --git a/src/App.vue b/src/App.vue
index 9fee86d..32fda99 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,12 @@ function startTable(tableId: number) {
   activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
 }
 
+function stopTable(tableId: number) {
+  const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`);
+  activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
+  activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
+}
+
 </script>
 
 <style>
@@ -58,7 +64,7 @@ function startTable(tableId: number) {
         <Column field="table_link" header="Table Link" />
         <Column header="Close">
           <template #body="slotProps">
-            <Button label="Close" />
+            <Button label="Close" @click="stopTable(slotProps.data.id)"/>
           </template>
         </Column>
       </DataTable>