diff --git a/client/src/pages/object/Addresses.vue b/client/src/pages/object/Addresses.vue
index a63e732..6e4ef44 100644
--- a/client/src/pages/object/Addresses.vue
+++ b/client/src/pages/object/Addresses.vue
@@ -2,6 +2,9 @@
 import { apiCall } from "../../api";
 
 let addresses = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Type', path: 'type'},
@@ -10,6 +13,7 @@ const columns = [
 ];
 
 async function load(){
+  loading = true
   let res = await apiCall("Object.GetAddresses", {});
   if (res.Error === null) {
     addresses = res.Data.Addresses;
@@ -17,6 +21,7 @@ async function load(){
   } else {
     console.debug("error", res);
   }
+  loading = false
 }
 
 const displayData = $computed(() => {
@@ -54,6 +59,16 @@ function getAddressValue(s: any): string {
   return value;
 }
 
+async function deleteAddress(){
+  let res = await apiCall("Object.DeleteAddress", {name: displayData[selection[0]].name});
+  if (res.Error === null) {
+    console.debug("deleted address");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
 onMounted(async() => {
   load();
 });
@@ -61,10 +76,10 @@ onMounted(async() => {
 </script>
 
 <template>
-  <div>
-    <PageHeader title="Addresses">
-      <button @click="load">Load Addresses</button>
-    </PageHeader>
-    <NiceTable :columns="columns" v-model:data="displayData"/>
-  </div>
+    <TableView title="Addresses" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
+    <button @click="load">Refresh</button>
+    <button @click="load">Create</button>
+    <button @click="load" :disabled="selection.length != 1">Edit</button>
+    <button @click="deleteAddress" :disabled="selection.length != 1">Delete</button>
+  </TableView>
 </template>
\ No newline at end of file
diff --git a/client/src/pages/object/Services.vue b/client/src/pages/object/Services.vue
index 327d697..1304673 100644
--- a/client/src/pages/object/Services.vue
+++ b/client/src/pages/object/Services.vue
@@ -2,6 +2,9 @@
 import { apiCall } from "../../api";
 
 let services = $ref({});
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
 const columns = [
   {heading: 'Name', path: 'name'},
   {heading: 'Type', path: 'type'},
@@ -50,6 +53,7 @@ function getServicePortRange(s:any): string {
 }
 
 async function load(){
+  loading = true
   let res = await apiCall("Object.GetServices", {});
   if (res.Error === null) {
     console.debug("services", res.Data.Services);
@@ -57,6 +61,17 @@ async function load(){
   } else {
     console.debug("error", res);
   }
+  loading = false
+}
+
+async function deleteService(){
+  let res = await apiCall("Object.DeleteService", {name: displayData[selection[0]].name});
+  if (res.Error === null) {
+    console.debug("deleted service");
+  } else {
+    console.debug("error", res);
+  }
+  load();
 }
 
 onMounted(async() => {
@@ -66,5 +81,10 @@ onMounted(async() => {
 </script>
 
 <template>
-  <TableView title="Services" :columns="columns" :load-data="load" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}"/>
+  <TableView title="Services" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
+    <button @click="load">Refresh</button>
+    <button @click="load">Create</button>
+    <button @click="load" :disabled="selection.length != 1">Edit</button>
+    <button @click="deleteService" :disabled="selection.length != 1">Delete</button>
+  </TableView>
 </template>
\ No newline at end of file