diff --git a/ui/admin/src/components/Namespace/NamespaceDelete.vue b/ui/admin/src/components/Namespace/NamespaceDelete.vue
new file mode 100644
index 00000000000..54c706ad480
--- /dev/null
+++ b/ui/admin/src/components/Namespace/NamespaceDelete.vue
@@ -0,0 +1,69 @@
+<template>
+  <MessageDialog
+    v-model="showDialog"
+    title="Namespace Deletion"
+    icon="mdi-delete-alert"
+    icon-color="error"
+    confirm-color="error"
+    confirm-text="Remove"
+    :confirm-loading="isLoading"
+    cancel-text="Close"
+    confirm-data-test="remove-btn"
+    cancel-data-test="close-btn"
+    @close="showDialog = false"
+    @confirm="remove"
+    @cancel="showDialog = false"
+  >
+    <p data-test="content-text">
+      This action cannot be undone. This will permanently delete
+      <strong>{{ displayOnlyTenCharacters(name) }}</strong> and its related
+      data.
+    </p>
+  </MessageDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { displayOnlyTenCharacters } from "@/utils/string";
+import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
+import MessageDialog from "@/components/Dialogs/MessageDialog.vue";
+import useNamespacesStore from "@admin/store/modules/namespaces";
+
+const props = defineProps<{ tenant: string; name: string }>();
+const emit = defineEmits(["update"]);
+
+const namespacesStore = useNamespacesStore();
+const snackbar = useSnackbar();
+const router = useRouter();
+const route = useRoute();
+
+const showDialog = defineModel<boolean>({ required: true });
+const isLoading = ref(false);
+
+const name = computed(() => props.name);
+const tenant = computed(() => props.tenant);
+
+const remove = async () => {
+  isLoading.value = true;
+  try {
+    await namespacesStore.deleteNamespace(tenant.value);
+    snackbar.showSuccess("Namespace deleted successfully.");
+
+    if (route.name === "namespaceDetails") {
+      await router.push({ name: "namespaces" });
+    } else {
+      emit("update");
+    }
+    showDialog.value = false;
+  } catch (error: unknown) {
+    snackbar.showError("An error occurred while deleting the namespace.");
+    handleError(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+defineExpose({ isLoading });
+</script>
diff --git a/ui/admin/src/components/Namespace/NamespaceEdit.vue b/ui/admin/src/components/Namespace/NamespaceEdit.vue
index 06b4bf39947..279408b2bd6 100644
--- a/ui/admin/src/components/Namespace/NamespaceEdit.vue
+++ b/ui/admin/src/components/Namespace/NamespaceEdit.vue
@@ -1,23 +1,4 @@
 <template>
-  <v-tooltip
-    bottom
-    anchor="bottom"
-  >
-    <template #activator="{ props }">
-      <v-icon
-        tag="button"
-        dark
-        v-bind="props"
-        tabindex="0"
-        aria-label="Edit Namespace"
-        data-test="dialog-btn"
-        icon="mdi-pencil"
-        @click="showDialog = true"
-      />
-    </template>
-    <span>Edit</span>
-  </v-tooltip>
-
   <FormDialog
     v-model="showDialog"
     title="Edit Namespace"
@@ -62,39 +43,42 @@
 
 <script setup lang="ts">
 import { useField } from "vee-validate";
-import { computed, ref } from "vue";
+import { computed, defineModel } from "vue";
 import * as yup from "yup";
 import useNamespacesStore from "@admin/store/modules/namespaces";
 import useSnackbar from "@/helpers/snackbar";
-import { IAdminNamespace } from "../../interfaces/INamespace";
+import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import FormDialog from "@/components/Dialogs/FormDialog.vue";
 
 const props = defineProps<{ namespace: IAdminNamespace }>();
+const emit = defineEmits(["update"]);
 
 const snackbar = useSnackbar();
 const namespacesStore = useNamespacesStore();
-const showDialog = ref(false);
+const showDialog = defineModel<boolean>({ default: false });
 
 const {
   value: name,
   errorMessage: nameError,
   resetField: resetName,
-} = useField<string | undefined>("name", yup.string().required(), {
-  initialValue: props.namespace.name,
+} = useField<string>("name", yup.string().required(), {
+  initialValue: props.namespace.name || "",
 });
 
 const {
   value: maxDevices,
   errorMessage: maxDevicesError,
   resetField: resetMaxDevices,
-} = useField<number | undefined>(
+} = useField<number>(
   "maxDevices",
   yup
     .number()
     .integer()
     .required()
     .min(-1, "Maximum devices must be -1 (unlimited) or greater"),
-  { initialValue: props.namespace.max_devices },
+  {
+    initialValue: props.namespace.max_devices ?? -1,
+  },
 );
 
 const {
@@ -102,7 +86,7 @@ const {
   errorMessage: sessionRecordError,
   resetField: resetSessionRecord,
 } = useField<boolean>("sessionRecord", yup.boolean(), {
-  initialValue: props.namespace.settings.session_record || false,
+  initialValue: props.namespace.settings?.session_record ?? true,
 });
 
 const hasErrors = computed(
@@ -118,16 +102,21 @@ const closeDialog = () => {
 
 const submitForm = async () => {
   if (hasErrors.value) return;
+
   try {
     await namespacesStore.updateNamespace({
       ...props.namespace,
-      name: name.value as string,
+      name: name.value,
       max_devices: Number(maxDevices.value),
-      settings: { session_record: sessionRecord.value },
+      settings: {
+        ...props.namespace.settings,
+        session_record: sessionRecord.value,
+      },
     });
     await namespacesStore.fetchNamespaceList();
     snackbar.showSuccess("Namespace updated successfully.");
     showDialog.value = false;
+    emit("update");
   } catch {
     snackbar.showError("Failed to update namespace.");
   }
diff --git a/ui/admin/src/components/Namespace/NamespaceList.vue b/ui/admin/src/components/Namespace/NamespaceList.vue
index e133d1b96ad..c2189467fcb 100644
--- a/ui/admin/src/components/Namespace/NamespaceList.vue
+++ b/ui/admin/src/components/Namespace/NamespaceList.vue
@@ -3,9 +3,9 @@
     <DataTable
       v-model:items-per-page="itemsPerPage"
       v-model:page="page"
-      :headers
+      :headers="headers"
       :items="namespaces"
-      :loading
+      :loading="loading"
       :total-count="namespaceCount"
       :items-per-page-options="[10, 20, 50, 100]"
       data-test="namespaces-list"
@@ -13,7 +13,7 @@
       <template #rows>
         <tr
           v-for="(namespace, i) in namespaces"
-          :key="i"
+          :key="namespace.tenant_id || i"
         >
           <td>
             {{ namespace.name }}
@@ -25,12 +25,18 @@
             {{ namespace.tenant_id }}
           </td>
           <td>
-            {{ namespace.owner }}
-          </td>
-          <td>
-            <div v-if="namespace.settings">
-              {{ namespace.settings.session_record }}
-            </div>
+            <span
+              v-if="getOwnerEmail(namespace)"
+              tabindex="0"
+              class="text-decoration-underline cursor-pointer"
+              @click="goToUser(namespace.owner)"
+              @keyup.enter="goToUser(namespace.owner)"
+            >
+              {{ getOwnerEmail(namespace) }}
+            </span>
+            <span v-else>
+              {{ namespace.owner }}
+            </span>
           </td>
           <td>
             <v-tooltip
@@ -51,11 +57,63 @@
               <span>Details</span>
             </v-tooltip>
 
-            <NamespaceEdit :namespace="namespace" />
+            <v-tooltip
+              bottom
+              anchor="bottom"
+            >
+              <template #activator="{ props }">
+                <v-icon
+                  tag="button"
+                  dark
+                  v-bind="props"
+                  tabindex="0"
+                  aria-label="Edit Namespace"
+                  data-test="namespace-edit-dialog-btn"
+                  icon="mdi-pencil"
+                  @click="openEditNamespace(namespace)"
+                />
+              </template>
+              <span>Edit</span>
+            </v-tooltip>
+
+            <v-tooltip
+              bottom
+              anchor="bottom"
+            >
+              <template #activator="{ props }">
+                <v-icon
+                  tag="button"
+                  dark
+                  v-bind="props"
+                  tabindex="0"
+                  aria-label="Delete Namespace"
+                  data-test="namespace-delete-dialog-btn"
+                  icon="mdi-delete"
+                  @click="openDeleteNamespace(namespace)"
+                />
+              </template>
+              <span>Delete</span>
+            </v-tooltip>
           </td>
         </tr>
       </template>
     </DataTable>
+
+    <NamespaceEdit
+      v-if="selectedNamespace"
+      :key="selectedNamespace.tenant_id"
+      v-model="namespaceEdit"
+      :namespace="selectedNamespace"
+      @update="fetchNamespaces"
+    />
+
+    <NamespaceDelete
+      v-if="selectedNamespace"
+      v-model="namespaceDelete"
+      :tenant="selectedNamespace.tenant_id"
+      :name="selectedNamespace.name"
+      @update="fetchNamespaces"
+    />
   </div>
 </template>
 
@@ -66,7 +124,8 @@ import useNamespacesStore from "@admin/store/modules/namespaces";
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import useSnackbar from "@/helpers/snackbar";
 import DataTable from "@/components/Tables/DataTable.vue";
-import NamespaceEdit from "./NamespaceEdit.vue";
+import NamespaceEdit from "@admin/components/Namespace/NamespaceEdit.vue";
+import NamespaceDelete from "@admin/components/Namespace/NamespaceDelete.vue";
 import handleError from "@/utils/handleError";
 
 const snackbar = useSnackbar();
@@ -74,9 +133,15 @@ const namespacesStore = useNamespacesStore();
 const namespaces = computed(() => namespacesStore.namespaces);
 const namespaceCount = computed(() => namespacesStore.namespaceCount);
 const router = useRouter();
+
+const namespaceEdit = ref(false);
+const namespaceDelete = ref(false);
+const selectedNamespace = ref<IAdminNamespace | null>(null);
+
 const loading = ref(false);
 const page = ref(1);
 const itemsPerPage = ref(10);
+
 const headers = ref([
   {
     text: "Name",
@@ -94,10 +159,6 @@ const headers = ref([
     text: "Owner",
     value: "owner",
   },
-  {
-    text: "Session Record",
-    value: "settings",
-  },
   {
     text: "Actions",
     value: "actions",
@@ -120,12 +181,37 @@ const fetchNamespaces = async () => {
 };
 
 const sumDevicesCount = (namespace: IAdminNamespace) => {
-  const { devices_accepted_count: acceptedCount, devices_pending_count: pendingCount, devices_rejected_count: rejectedCount } = namespace;
+  const {
+    devices_accepted_count: acceptedCount,
+    devices_pending_count: pendingCount,
+    devices_rejected_count: rejectedCount,
+  } = namespace;
   return (acceptedCount + pendingCount + rejectedCount) || 0;
 };
 
-const goToNamespace = async (namespace: string) => {
-  await router.push({ name: "namespaceDetails", params: { id: namespace } });
+const getOwnerEmail = (namespace: IAdminNamespace) => {
+  const owner = namespace.members?.find(
+    (member) => member.id === namespace.owner,
+  );
+  return owner?.email || null;
+};
+
+const goToNamespace = async (tenantId: string) => {
+  await router.push({ name: "namespaceDetails", params: { id: tenantId } });
+};
+
+const goToUser = async (userId: string) => {
+  await router.push({ name: "userDetails", params: { id: userId } });
+};
+
+const openEditNamespace = (ns: IAdminNamespace) => {
+  selectedNamespace.value = ns;
+  namespaceEdit.value = true;
+};
+
+const openDeleteNamespace = (ns: IAdminNamespace) => {
+  selectedNamespace.value = ns;
+  namespaceDelete.value = true;
 };
 
 watch([itemsPerPage, page], async () => {
@@ -136,3 +222,9 @@ onMounted(async () => {
   await fetchNamespaces();
 });
 </script>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/ui/admin/src/store/api/namespaces.ts b/ui/admin/src/store/api/namespaces.ts
index 6a9960f1aa3..5b0e5ede76a 100644
--- a/ui/admin/src/store/api/namespaces.ts
+++ b/ui/admin/src/store/api/namespaces.ts
@@ -11,6 +11,8 @@ export const exportNamespaces = async (filter: string) => adminApi.exportNamespa
 
 export const getNamespace = async (id: string) => adminApi.getNamespaceAdmin(id);
 
+export const deleteNamespace = async (tenant: string) => adminApi.deleteNamespaceAdmin(tenant);
+
 export const updateNamespace = async (
   data: IAdminNamespace,
 ) => adminApi.editNamespaceAdmin(data.tenant_id, {
diff --git a/ui/admin/src/store/modules/namespaces.ts b/ui/admin/src/store/modules/namespaces.ts
index 9d456cbbf13..a4a04848e39 100644
--- a/ui/admin/src/store/modules/namespaces.ts
+++ b/ui/admin/src/store/modules/namespaces.ts
@@ -32,6 +32,10 @@ const useNamespacesStore = defineStore("adminNamespaces", () => {
     return data;
   };
 
+  const deleteNamespace = async (tenant: string) => {
+    await namespacesApi.deleteNamespace(tenant);
+  };
+
   const updateNamespace = async (data: IAdminNamespace) => {
     await namespacesApi.updateNamespace(data);
   };
@@ -44,6 +48,7 @@ const useNamespacesStore = defineStore("adminNamespaces", () => {
     fetchNamespaceList,
     fetchNamespaceById,
     exportNamespacesToCsv,
+    deleteNamespace,
     updateNamespace,
   };
 });
diff --git a/ui/admin/src/views/NamespaceDetails.vue b/ui/admin/src/views/NamespaceDetails.vue
index e3b495989cc..1bc0d2e713e 100644
--- a/ui/admin/src/views/NamespaceDetails.vue
+++ b/ui/admin/src/views/NamespaceDetails.vue
@@ -2,125 +2,320 @@
   <div class="d-flex pa-0 align-center">
     <h1>Namespace Details</h1>
   </div>
-  <v-card class="mt-2 pa-4">
-    <v-card-text>
-      <div>
-        <h3 class="text-overline">
-          Name:
-        </h3>
-        <p :data-test="namespace.name">
-          {{ namespace.name }}
-        </p>
-      </div>
+  <v-card
+    v-if="namespace.tenant_id"
+    class="mt-2 border rounded bg-background"
+    elevation="0"
+  >
+    <v-card-title
+      class="pa-4 d-flex align-center justify-space-between bg-v-theme-surface"
+    >
+      <span class="text-h6 ml-2 d-flex align-center ga-2">
+        {{ namespace.name || 'Namespace' }}
+        <v-chip
+          v-if="namespace.type"
+          :color="namespace.type === 'team' ? 'primary' : 'default'"
+          data-test="namespace-type-chip"
+          class="text-capitalize"
+        >
+          {{ namespace.type }}
+        </v-chip>
+      </span>
 
-      <div>
-        <h3 class="text-overline mt-3">
-          Devices:
-        </h3>
-        <p data-test="namespace-devices-count">
-          {{ sumDevicesCount(namespace) }}
-        </p>
-      </div>
+      <v-menu
+        location="bottom"
+        scrim
+        eager
+      >
+        <template #activator="{ props }">
+          <v-btn
+            v-bind="props"
+            variant="plain"
+            class="border rounded bg-v-theme-background"
+            density="comfortable"
+            size="default"
+            icon="mdi-format-list-bulleted"
+            data-test="namespace-actions-menu-btn"
+          />
+        </template>
 
-      <div>
-        <h3 class="text-overline mt-3">
-          Owner:
-        </h3>
-        <p
-          :data-test="namespace.owner"
-          tabindex="0"
-          class="text-decoration-underline cursor-pointer"
-          @click="goToUser(namespace.owner)"
-          @keyup="goToUser(namespace.owner)"
+        <v-list
+          class="bg-v-theme-surface"
+          lines="two"
+          density="compact"
         >
-          {{ namespace.owner }}
-        </p>
-      </div>
+          <v-list-item
+            data-test="namespace-edit-btn"
+            @click="namespaceEdit = true"
+          >
+            <div class="d-flex align-center">
+              <v-icon class="mr-2">mdi-pencil</v-icon>
+              <v-list-item-title>Edit namespace</v-list-item-title>
+            </div>
+          </v-list-item>
 
-      <div>
-        <h3 class="text-overline mt-3">
-          Tenant Id:
-        </h3>
-        <p :data-test="namespace.tenant_id">
-          {{ namespace.tenant_id }}
-        </p>
-      </div>
+          <v-list-item
+            data-test="namespace-delete-btn"
+            @click="namespaceDelete = true"
+          >
+            <div class="d-flex align-center">
+              <v-icon class="mr-2">mdi-delete</v-icon>
+              <v-list-item-title>Delete namespace</v-list-item-title>
+            </div>
+          </v-list-item>
+
+          <div class="px-2 py-1" />
+        </v-list>
+      </v-menu>
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text class="pa-4 pt-0">
+      <v-row class="py-3">
+        <v-col
+          cols="12"
+          md="6"
+          class="my-0 py-0"
+        >
+          <div data-test="namespace-name-field">
+            <div class="item-title">Name:</div>
+            <p class="text-truncate">{{ namespace.name }}</p>
+          </div>
+
+          <div data-test="namespace-tenant-id-field">
+            <div class="item-title">Tenant ID:</div>
+            <p class="text-truncate">
+              <code>{{ namespace.tenant_id }}</code>
+            </p>
+          </div>
+
+          <div data-test="namespace-owner-field">
+            <div class="item-title">Owner:</div>
+            <p
+              tabindex="0"
+              class="text-decoration-underline cursor-pointer text-truncate"
+              @click="goToUser(namespace.owner)"
+              @keyup.enter="goToUser(namespace.owner)"
+            >
+              {{ getOwnerEmail(namespace) || namespace.owner }}
+            </p>
+          </div>
+
+          <div data-test="namespace-devices-field">
+            <div class="item-title">Total Devices:</div>
+            <p>{{ sumDevicesCount(namespace) }}</p>
+          </div>
+
+          <div
+            class="d-flex align-center flex-wrap mt-2"
+            data-test="namespace-devices-breakdown"
+          >
+            <div
+              class="mr-6"
+              data-test="namespace-devices-accepted"
+            >
+              <div class="item-title">Accepted:</div>
+              <p>{{ namespace.devices_accepted_count || 0 }}</p>
+            </div>
+            <div
+              class="mr-6"
+              data-test="namespace-devices-pending"
+            >
+              <div class="item-title">Pending:</div>
+              <p>{{ namespace.devices_pending_count || 0 }}</p>
+            </div>
+            <div data-test="namespace-devices-rejected">
+              <div class="item-title">Rejected:</div>
+              <p>{{ namespace.devices_rejected_count || 0 }}</p>
+            </div>
+          </div>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="6"
+          class="my-0 py-0"
+        >
+          <div
+            v-if="namespace.created_at"
+            data-test="namespace-created-field"
+          >
+            <div class="item-title">Created:</div>
+            <p>{{ formatFullDateTime(namespace.created_at) }}</p>
+          </div>
+
+          <div data-test="namespace-max-devices-field">
+            <div class="item-title">Max Devices:</div>
+            <p>{{ namespace.max_devices === -1 ? 'Unlimited' : namespace.max_devices }}</p>
+          </div>
+
+          <div
+            v-if="namespace.settings"
+            data-test="namespace-session-record-field"
+          >
+            <div class="item-title">Session Record:</div>
+            <v-chip
+              size="small"
+              :color="namespace.settings.session_record ? 'success' : 'default'"
+            >
+              {{ namespace.settings.session_record ? 'Enabled' : 'Disabled' }}
+            </v-chip>
+          </div>
+
+          <div
+            v-if="namespace.settings?.connection_announcement"
+            data-test="namespace-connection-announcement-field"
+          >
+            <div class="item-title">Connection Announcement:</div>
+            <p>{{ namespace.settings.connection_announcement }}</p>
+          </div>
+        </v-col>
+      </v-row>
 
-      <div>
-        <h3 class="text-overline mt-3">
-          Members:
+      <v-divider class="my-4" />
+
+      <div data-test="namespace-members-section">
+        <h3 class="text-h6 mb-3">
+          Members ({{ namespace.members?.length || 0 }})
         </h3>
-        <ul
-          v-for="(member, index) in namespace.members"
-          :key="index"
+
+        <v-list
+          v-if="namespace.members?.length"
+          class="bg-transparent"
+          data-test="namespace-members-list"
         >
-          <li
-            v-for="(value, name) in member"
-            :key="name"
-            class="ml-8"
+          <v-list-item
+            v-for="(member, index) in namespace.members"
+            :key="index"
+            class="border rounded mb-2 bg-v-theme-surface"
+            data-test="namespace-member-item"
           >
-            <div v-if="name === 'id'">
-              <span
-                class="font-weight-bold mr-1"
-                :data-test="`${name}-item`"
-              >{{ name }}:</span>
+            <v-list-item-title class="d-flex align-center mb-2">
               <span
                 tabindex="0"
                 class="text-decoration-underline cursor-pointer"
-                :data-test="`${name}-value`"
-                @click="goToUser(namespace.owner)"
-                @keyup="goToUser(namespace.owner)"
-              >{{ value }}</span>
-            </div>
-            <div v-else>
+                data-test="namespace-member-email"
+                @click="goToUser(member.id)"
+                @keyup.enter="goToUser(member.id)"
+              >
+                {{ member.email }}
+              </span>
+              <v-chip
+                size="small"
+                class="ml-2 text-capitalize"
+                data-test="namespace-member-role"
+              >
+                <v-icon
+                  :icon="getRoleIcon(member.role)"
+                  class="mr-1"
+                  size="small"
+                />
+                {{ getRoleLabel(member.role) }}
+              </v-chip>
+              <v-chip
+                size="small"
+                class="ml-2 text-capitalize"
+                data-test="namespace-member-status"
+              >
+                {{ member.status }}
+              </v-chip>
+            </v-list-item-title>
+
+            <v-list-item-subtitle class="d-flex flex-column">
               <span
-                class="font-weight-bold mr-1"
-                :data-test="`${name}-item`"
-              >{{ name }}:</span>
-              <span :data-test="`${name}-value`">{{ value }}</span>
-            </div>
-          </li>
-        </ul>
-      </div>
+                class="text-caption"
+                data-test="namespace-member-id"
+              >
+                <strong>ID:</strong> <code>{{ member.id }}</code>
+              </span>
+              <span
+                v-if="member.added_at && member.added_at !== '0001-01-01T00:00:00Z'"
+                class="text-caption"
+                data-test="namespace-member-added"
+              >
+                <strong>Added:</strong> {{ formatFullDateTime(member.added_at) }}
+              </span>
+              <span
+                v-if="member.expires_at && member.expires_at !== '0001-01-01T00:00:00Z'"
+                class="text-caption"
+                data-test="namespace-member-expires"
+              >
+                <strong>Expires:</strong> {{ formatFullDateTime(member.expires_at) }}
+              </span>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
 
-      <div v-if="namespace.settings">
-        <h3 class="text-overline mt-3">
-          Session Record:
-        </h3>
-        <p :data-test="namespace.settings.session_record">
-          {{ namespace.settings.session_record }}
+        <p
+          v-else
+          class="text-disabled text-center py-4"
+        >
+          No members found
         </p>
       </div>
     </v-card-text>
   </v-card>
+
+  <v-card
+    v-else
+    class="mt-2 pa-4 bg-v-theme-surface"
+  >
+    <p class="text-center">Something is wrong, try again!</p>
+  </v-card>
+
+  <NamespaceEdit
+    v-if="hasNamespace"
+    v-model="namespaceEdit"
+    :namespace="namespace"
+    @update="fetchNamespaceDetails"
+  />
+
+  <NamespaceDelete
+    v-if="hasNamespace"
+    v-model="namespaceDelete"
+    :tenant="namespace.tenant_id"
+    :name="namespace.name || 'Namespace'"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import useNamespacesStore from "@admin/store/modules/namespaces";
+import NamespaceEdit from "@admin/components/Namespace/NamespaceEdit.vue";
+import NamespaceDelete from "@admin/components/Namespace/NamespaceDelete.vue";
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import useSnackbar from "@/helpers/snackbar";
 import handleError from "@/utils/handleError";
+import { formatFullDateTime } from "@/utils/date";
 
 const namespacesStore = useNamespacesStore();
 const snackbar = useSnackbar();
 const route = useRoute();
 const router = useRouter();
+
 const loading = ref(false);
+const namespaceEdit = ref(false);
+const namespaceDelete = ref(false);
 const namespace = ref({} as IAdminNamespace);
-
+const hasNamespace = computed(() => !!namespace.value.tenant_id);
 const namespaceId = computed(() => route.params.id);
 
-onMounted(async () => {
+const fetchNamespaceDetails = async () => {
   try {
     loading.value = true;
     namespace.value = await namespacesStore.fetchNamespaceById(namespaceId.value as string);
   } catch (error) {
     snackbar.showError("Failed to fetch namespace details.");
     handleError(error);
+  } finally {
+    loading.value = false;
   }
-  loading.value = false;
+};
+
+onMounted(async () => {
+  await fetchNamespaceDetails();
 });
 
 const goToUser = async (userId: string) => {
@@ -132,5 +327,42 @@ const sumDevicesCount = (namespace: IAdminNamespace) => {
   return (acceptedCount + pendingCount + rejectedCount) || 0;
 };
 
+const roleConfig: Record<string, { label: string; icon: string; color: string }> = {
+  owner: { label: "owner", icon: "mdi-crown", color: "warning" },
+  administrator: { label: "admin", icon: "mdi-shield-account", color: "error" },
+  operator: { label: "operator", icon: "mdi-account-cog", color: "primary" },
+  observer: { label: "observer", icon: "mdi-eye", color: "info" },
+};
+
+const getRoleLabel = (role: string) => {
+  if (!role) return "member";
+  return roleConfig[role]?.label || role;
+};
+
+const getRoleIcon = (role: string) => {
+  if (!role) return "mdi-account";
+  return roleConfig[role]?.icon || "mdi-account";
+};
+
+const getOwnerEmail = (namespace: IAdminNamespace) => {
+  const owner = namespace.members?.find((member) => member.id === namespace.owner);
+  return owner?.email || null;
+};
+
 defineExpose({ namespace });
 </script>
+
+<style lang="scss" scoped>
+.item-title {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1666666667em;
+  line-height: 2.667;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/ui/admin/tests/unit/components/Namespaces/NamespaceDelete/index.spec.ts b/ui/admin/tests/unit/components/Namespaces/NamespaceDelete/index.spec.ts
new file mode 100644
index 00000000000..086351c53a2
--- /dev/null
+++ b/ui/admin/tests/unit/components/Namespaces/NamespaceDelete/index.spec.ts
@@ -0,0 +1,193 @@
+// admin/tests/unit/components/Namespaces/NamespaceDelete/index.spec.ts
+import { createVuetify } from "vuetify";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Mock } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import useNamespacesStore from "@admin/store/modules/namespaces";
+import NamespaceDelete from "@admin/components/Namespace/NamespaceDelete.vue";
+import { SnackbarInjectionKey } from "@/plugins/snackbar";
+import handleError from "@/utils/handleError";
+
+// --- Mocks ---
+
+const mockRouter = {
+  push: vi.fn(),
+};
+
+const mockRoute = {
+  name: "namespaceDetails" as string,
+};
+
+vi.mock("vue-router", async () => {
+  const actual = await vi.importActual<typeof import("vue-router")>("vue-router");
+  return {
+    ...actual,
+    useRouter: () => mockRouter,
+    useRoute: () => mockRoute,
+  };
+});
+
+vi.mock("@/utils/handleError", () => ({
+  __esModule: true,
+  default: vi.fn(),
+}));
+
+const mockSnackbar = {
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+};
+
+// --- Test setup ---
+
+describe("Namespace Delete", () => {
+  let wrapper: VueWrapper<InstanceType<typeof NamespaceDelete>>;
+  let namespacesStore: ReturnType<typeof useNamespacesStore>;
+  let updateModelValue: ReturnType<typeof vi.fn>;
+  let pinia: ReturnType<typeof createPinia>;
+
+  const tenantId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
+  const namespaceName = "namespace"; // < 10 chars → no truncation
+
+  const mountComponent = () => {
+    updateModelValue = vi.fn();
+
+    wrapper = mount(NamespaceDelete, {
+      global: {
+        plugins: [createVuetify(), pinia],
+        provide: {
+          [SnackbarInjectionKey]: mockSnackbar,
+        },
+        stubs: {
+          // Stub MessageDialog to avoid dealing with v-dialog + teleport
+          MessageDialog: {
+            template: `
+              <div data-test="message-dialog">
+                <slot />
+                <button data-test="remove-btn" @click="$emit('confirm')" />
+                <button data-test="close-btn" @click="$emit('cancel')" />
+              </div>
+            `,
+            props: [
+              "modelValue",
+              "title",
+              "icon",
+              "iconColor",
+              "confirmColor",
+              "confirmText",
+              "confirmLoading",
+              "cancelText",
+              "confirmDataTest",
+              "cancelDataTest",
+            ],
+          },
+        },
+      },
+      props: {
+        tenant: tenantId,
+        name: namespaceName,
+        modelValue: true,
+        "onUpdate:modelValue": updateModelValue,
+        onUpdate: vi.fn(),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    // Single shared Pinia instance
+    pinia = createPinia();
+    setActivePinia(pinia);
+
+    namespacesStore = useNamespacesStore();
+    namespacesStore.deleteNamespace = vi.fn().mockResolvedValue(undefined);
+
+    mockRouter.push.mockReset();
+    mockRoute.name = "namespaceDetails";
+
+    mockSnackbar.showSuccess.mockReset();
+    mockSnackbar.showError.mockReset();
+    (handleError as Mock).mockReset();
+
+    mountComponent();
+  });
+
+  it("Renders the dialog content with the namespace name", () => {
+    const content = wrapper.get('[data-test="content-text"]');
+
+    expect(content.text()).toContain("This action cannot be undone.");
+    expect(content.text()).toContain(namespaceName);
+  });
+
+  it("Deletes namespace, shows success, redirects and closes when on namespaceDetails route", async () => {
+    const removeButton = wrapper.get('[data-test="remove-btn"]');
+    await removeButton.trigger("click");
+    await flushPromises();
+
+    expect(namespacesStore.deleteNamespace).toHaveBeenCalledTimes(1);
+    expect(namespacesStore.deleteNamespace).toHaveBeenCalledWith(tenantId);
+
+    expect(mockSnackbar.showSuccess).toHaveBeenCalledWith("Namespace deleted successfully.");
+    expect(mockSnackbar.showError).not.toHaveBeenCalled();
+
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: "namespaces" });
+
+    expect(updateModelValue).toHaveBeenCalledWith(false);
+
+    expect(wrapper.vm.isLoading).toBe(false);
+
+    expect(wrapper.emitted("update")).toBeUndefined();
+  });
+
+  it("Deletes namespace, shows success and emits update when not on namespaceDetails route", async () => {
+    mockRoute.name = "namespaces";
+
+    mountComponent();
+
+    const removeButton = wrapper.get('[data-test="remove-btn"]');
+    await removeButton.trigger("click");
+    await flushPromises();
+
+    expect(namespacesStore.deleteNamespace).toHaveBeenCalledTimes(1);
+    expect(namespacesStore.deleteNamespace).toHaveBeenCalledWith(tenantId);
+
+    expect(mockSnackbar.showSuccess).toHaveBeenCalledWith("Namespace deleted successfully.");
+    expect(mockSnackbar.showError).not.toHaveBeenCalled();
+
+    expect(mockRouter.push).not.toHaveBeenCalled();
+
+    const updateEvents = wrapper.emitted("update");
+    expect(updateEvents).toBeTruthy();
+    expect(updateEvents?.length).toBe(1);
+
+    expect(updateModelValue).toHaveBeenCalledWith(false);
+
+    expect(wrapper.vm.isLoading).toBe(false);
+  });
+
+  it("Shows error snackbar, calls handleError and keeps dialog open when deletion fails", async () => {
+    (namespacesStore.deleteNamespace as Mock).mockRejectedValueOnce(
+      new Error("delete failed"),
+    );
+
+    const removeButton = wrapper.get('[data-test="remove-btn"]');
+    await removeButton.trigger("click");
+    await flushPromises();
+
+    expect(namespacesStore.deleteNamespace).toHaveBeenCalledTimes(1);
+
+    expect(mockSnackbar.showError).toHaveBeenCalledWith(
+      "An error occurred while deleting the namespace.",
+    );
+    expect(mockSnackbar.showSuccess).not.toHaveBeenCalled();
+
+    expect(handleError).toHaveBeenCalledTimes(1);
+
+    expect(mockRouter.push).not.toHaveBeenCalled();
+
+    expect(wrapper.emitted("update")).toBeUndefined();
+
+    expect(updateModelValue).not.toHaveBeenCalledWith(false);
+
+    expect(wrapper.vm.isLoading).toBe(false);
+  });
+});
diff --git a/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/__snapshots__/index.spec.ts.snap
index 24471c94d1e..9419e4f5f27 100644
--- a/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/__snapshots__/index.spec.ts.snap
@@ -1,20 +1,231 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Namespace Edit > Renders the component 1`] = `
-"<button class="mdi-pencil mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-0" aria-label="Edit Namespace" data-test="dialog-btn"></button>
-<!--teleport start-->
+exports[`Namespace Edit > Renders the component and dialog 1`] = `
+"<!--teleport start-->
 <!--teleport end-->"
 `;
 
-exports[`Namespace Edit > Renders the component 2`] = `
+exports[`Namespace Edit > Renders the component and dialog 2`] = `
 "<body>
   <div class="v-overlay-container">
-    <div class="v-overlay v-overlay--absolute v-theme--light v-locale--is-ltr v-tooltip" style="z-index: 2000;" id="v-tooltip-v-0" role="tooltip" bottom="" anchor="bottom">
+    <div class="v-overlay v-overlay--active v-theme--light v-locale--is-ltr v-dialog v-dialog--scrollable" style="z-index: 2400;" aria-modal="true" role="dialog" data-v-0e9a08b3="">
       <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
-        <!---->
+        <div class="v-overlay__scrim"></div>
       </transition-stub>
-      <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="[object HTMLButtonElement]">
-        <div class="v-overlay__content" style="min-width: 0px; display: none;"><span>Edit</span></div>
+      <transition-stub name="dialog-transition" appear="true" persisted="true" css="true">
+        <div class="v-overlay__content" style="max-width: 600px;" tabindex="-1">
+          <div data-v-0e9a08b3="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated bg-v-theme-surface border">
+            <!---->
+            <div class="v-card__loader">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                <!---->
+                <div class="v-progress-linear__background"></div>
+                <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                  <div class="v-progress-linear__indeterminate">
+                    <div class="v-progress-linear__indeterminate long"></div>
+                    <div class="v-progress-linear__indeterminate short"></div>
+                  </div>
+                </transition-stub>
+                <!---->
+              </div>
+            </div>
+            <!---->
+            <!---->
+            <!-- Content -->
+            <!-- Titlebar -->
+            <header class="v-toolbar v-toolbar--density-default bg-primary v-theme--light v-locale--is-ltr bg-v-theme-surface border-b px-4 py-2">
+              <!---->
+              <div class="v-toolbar__content" style="height: 64px;">
+                <!---->
+                <!---->
+                <div class="v-avatar v-theme--light text-primary v-avatar--density-default v-avatar--rounded v-avatar--variant-tonal border border-primary border-opacity-100 mr-3" style="width: 48px; height: 48px;"><i class="mdi-folder-edit mdi v-icon notranslate v-theme--light" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i>
+                  <!----><span class="v-avatar__underlay"></span>
+                </div>
+                <div>
+                  <div class="v-toolbar-title text-h6">
+                    <div class="v-toolbar-title__placeholder">
+                      <!---->Edit Namespace
+                    </div>
+                  </div>
+                  <!--v-if-->
+                </div>
+                <div class="v-spacer"></div><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" data-test="close-btn-toolbar"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                  <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-close mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                  <!---->
+                  <!---->
+                </button>
+                <!---->
+              </div>
+              <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+            </header><!-- Content -->
+            <form class="v-form" novalidate="">
+              <div class="v-card-text pa-6">
+                <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field" data-test="name-text">
+                  <!---->
+                  <div class="v-input__control">
+                    <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
+                      <div class="v-field__overlay"></div>
+                      <div class="v-field__loader">
+                        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                          <!---->
+                          <div class="v-progress-linear__background"></div>
+                          <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                            <div class="v-progress-linear__indeterminate">
+                              <div class="v-progress-linear__indeterminate long"></div>
+                              <div class="v-progress-linear__indeterminate short"></div>
+                            </div>
+                          </transition-stub>
+                          <!---->
+                        </div>
+                      </div>
+                      <!---->
+                      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" for="input-v-2" aria-hidden="false">
+                          <!---->Name
+                        </label><label class="v-label v-field-label" for="input-v-2">
+                          <!---->Name
+                        </label>
+                        <!----><input size="1" type="text" id="input-v-2" aria-describedby="input-v-2-messages" required="" class="v-field__input" value="ossystems">
+                        <!---->
+                      </div>
+                      <!---->
+                      <!---->
+                      <div class="v-field__outline">
+                        <!---->
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <!---->
+                  <div id="input-v-2-messages" class="v-input__details" role="alert" aria-live="polite">
+                    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+                      <!---->
+                    </transition-group-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div class="v-input v-input--horizontal v-input--center-affix v-input--density-comfortable v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--inset" data-test="maxDevices-text">
+                  <!---->
+                  <div class="v-input__control">
+                    <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+                      <div class="v-field__overlay"></div>
+                      <div class="v-field__loader">
+                        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                          <!---->
+                          <div class="v-progress-linear__background"></div>
+                          <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                            <div class="v-progress-linear__indeterminate">
+                              <div class="v-progress-linear__indeterminate long"></div>
+                              <div class="v-progress-linear__indeterminate short"></div>
+                            </div>
+                          </transition-stub>
+                          <!---->
+                        </div>
+                      </div>
+                      <!---->
+                      <div class="v-field__field" data-no-activator="">
+                        <!----><label class="v-label v-field-label" for="input-v-5">
+                          <!---->Maximum Devices
+                        </label>
+                        <!----><input size="1" type="text" id="input-v-5" aria-describedby="input-v-5-messages" inputmode="decimal" required="" class="v-field__input" value="10">
+                        <!---->
+                      </div>
+                      <!---->
+                      <!---->
+                      <div class="v-field__outline">
+                        <div class="v-field__outline__start"></div>
+                        <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" for="input-v-5" aria-hidden="false">
+                            <!---->Maximum Devices
+                          </label></div>
+                        <div class="v-field__outline__end"></div>
+                        <!---->
+                      </div>
+                    </div>
+                  </div>
+                  <!---->
+                  <div id="input-v-5-messages" class="v-input__details" role="alert" aria-live="polite">
+                    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+                      <!---->
+                    </transition-group-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-switch">
+                  <!---->
+                  <div class="v-input__control">
+                    <div class="v-selection-control v-selection-control--dirty v-selection-control--density-default">
+                      <div class="v-selection-control__wrapper text-primary">
+                        <div class="v-switch__track bg-primary">
+                          <!---->
+                          <!---->
+                        </div>
+                        <div class="v-selection-control__input"><input checked="" id="switch-v-7" aria-disabled="false" aria-label="Session Record" type="checkbox" value="true">
+                          <div class="v-switch__thumb bg-primary">
+                            <transition-stub name="scale-transition" appear="false" persisted="false" css="true">
+                              <!---->
+                            </transition-stub>
+                          </div>
+                        </div>
+                      </div><label class="v-label v-label--clickable" for="switch-v-7">
+                        <!---->Session Record
+                      </label>
+                    </div>
+                  </div>
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+            </form><!-- Footer -->
+            <header class="v-toolbar v-toolbar--density-default bg-primary v-theme--light v-locale--is-ltr bg-v-theme-surface border-t px-6 py-2">
+              <!---->
+              <div class="v-toolbar__content" style="height: 64px;">
+                <!---->
+                <!---->
+                <!-- Buttons with alert system -->
+                <div class="v-window v-theme--light w-100">
+                  <div class="v-window__container">
+                    <!-- Default buttons window -->
+                    <transition-stub name="" appear="false" persisted="false" css="true">
+                      <div class="v-window-item v-window-item--active w-100">
+                        <div class="d-flex align-center w-100">
+                          <!-- Helper text on the left -->
+                          <!--v-if-->
+                          <div class="v-spacer"></div><!-- Buttons on the right -->
+                          <div class="d-flex"><button type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-tonal mr-2" data-test="cancel-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                              <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
+                              <!---->
+                              <!---->
+                            </button><button type="button" class="v-btn v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" data-test="confirm-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                              <!----><span class="v-btn__content" data-no-activator="">Save</span>
+                              <!---->
+                              <!---->
+                            </button></div>
+                        </div>
+                      </div>
+                    </transition-stub><!-- Alert window -->
+                    <transition-stub name="" appear="false" persisted="false" css="true">
+                      <div class="v-window-item w-100" style="display: none;">
+                        <!---->
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                  <!---->
+                </div>
+                <!---->
+              </div>
+              <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+            </header>
+            <!---->
+            <!----><span class="v-card__underlay"></span>
+          </div>
+        </div>
       </transition-stub>
     </div>
   </div>
diff --git a/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/index.spec.ts b/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/index.spec.ts
index f96efbcea2e..a8886a6a51e 100644
--- a/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/index.spec.ts
+++ b/ui/admin/tests/unit/components/Namespaces/NamespaceEdit/index.spec.ts
@@ -1,13 +1,14 @@
 import { createVuetify } from "vuetify";
-import { DOMWrapper, flushPromises, mount } from "@vue/test-utils";
-import { describe, expect, it, vi } from "vitest";
+import { DOMWrapper, flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import type { Mock } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 import useNamespacesStore from "@admin/store/modules/namespaces";
 import NamespaceEdit from "@admin/components/Namespace/NamespaceEdit.vue";
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import { SnackbarInjectionKey } from "@/plugins/snackbar";
 
-const namespace = {
+const namespace: IAdminNamespace = {
   billing: {
     active: true,
     current_period_end: "",
@@ -27,7 +28,7 @@ const namespace = {
   members: [
     {
       id: "",
-      role: "owner" as const,
+      role: "owner",
     },
   ],
   name: "ossystems",
@@ -36,7 +37,7 @@ const namespace = {
     session_record: true,
   },
   tenant_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
-};
+} as IAdminNamespace;
 
 const mockSnackbar = {
   showSuccess: vi.fn(),
@@ -44,21 +45,34 @@ const mockSnackbar = {
 };
 
 describe("Namespace Edit", () => {
-  setActivePinia(createPinia());
-  const namespacesStore = useNamespacesStore();
-  namespacesStore.updateNamespace = vi.fn();
-  namespacesStore.fetchNamespaceList = vi.fn();
-
-  const wrapper = mount(NamespaceEdit, {
-    global: {
-      plugins: [createVuetify()],
-      provide: { [SnackbarInjectionKey]: mockSnackbar },
-    },
-    props: { namespace: namespace as IAdminNamespace },
+  let wrapper: VueWrapper<InstanceType<typeof NamespaceEdit>>;
+  let namespacesStore: ReturnType<typeof useNamespacesStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    namespacesStore = useNamespacesStore();
+
+    namespacesStore.updateNamespace = vi.fn().mockResolvedValue(undefined);
+    namespacesStore.fetchNamespaceList = vi.fn().mockResolvedValue(undefined);
+
+    mockSnackbar.showSuccess.mockReset();
+    mockSnackbar.showError.mockReset();
+
+    wrapper = mount(NamespaceEdit, {
+      global: {
+        plugins: [createVuetify()],
+        provide: { [SnackbarInjectionKey]: mockSnackbar },
+      },
+      props: {
+        namespace,
+        modelValue: true,
+      },
+    });
   });
 
-  it("Renders the component", () => {
+  it("Renders the component and dialog", () => {
     expect(wrapper.html()).toMatchSnapshot();
+
     const dialog = new DOMWrapper(document.body);
     expect(dialog.html()).toMatchSnapshot();
   });
@@ -67,13 +81,53 @@ describe("Namespace Edit", () => {
     expect(wrapper.vm.name).toBe(namespace.name);
     expect(wrapper.vm.maxDevices).toBe(namespace.max_devices);
     expect(wrapper.vm.sessionRecord).toBe(namespace.settings.session_record);
+
+    const dialog = new DOMWrapper(document.body);
+
+    const nameInput = dialog.get<HTMLInputElement>('[data-test="name-text"] input');
+    expect(nameInput.element.value).toBe(namespace.name);
+
+    const maxDevicesInput = dialog.get<HTMLInputElement>('[data-test="maxDevices-text"] input');
+    expect(maxDevicesInput.element.value).toBe(String(namespace.max_devices));
   });
 
-  it("Calls namespace store and snackbar on form submission", async () => {
-    wrapper.vm.submitForm();
+  it("Calls namespace store and snackbar on form submission with updated values", async () => {
+    wrapper.vm.name = "updated-namespace";
+    wrapper.vm.maxDevices = 42;
+    wrapper.vm.sessionRecord = false;
+
+    await wrapper.vm.submitForm();
     await flushPromises();
-    expect(namespacesStore.updateNamespace).toHaveBeenCalled();
-    expect(namespacesStore.fetchNamespaceList).toHaveBeenCalled();
+
+    expect(namespacesStore.updateNamespace).toHaveBeenCalledTimes(1);
+
+    const updateNamespaceMock = namespacesStore.updateNamespace as Mock;
+    const payload = updateNamespaceMock.mock.calls[0][0];
+
+    expect(payload).toMatchObject({
+      name: "updated-namespace",
+      max_devices: 42,
+      settings: {
+        ...namespace.settings,
+        session_record: false,
+      },
+    });
+
+    expect(namespacesStore.fetchNamespaceList).toHaveBeenCalledTimes(1);
     expect(mockSnackbar.showSuccess).toHaveBeenCalledWith("Namespace updated successfully.");
+    expect(mockSnackbar.showError).not.toHaveBeenCalled();
+  });
+
+  it("Shows error snackbar when updateNamespace fails", async () => {
+    const updateNamespaceMock = namespacesStore.updateNamespace as Mock;
+    updateNamespaceMock.mockRejectedValueOnce(new Error("update failed"));
+
+    await wrapper.vm.submitForm();
+    await flushPromises();
+
+    expect(namespacesStore.updateNamespace).toHaveBeenCalledTimes(1);
+    expect(namespacesStore.fetchNamespaceList).not.toHaveBeenCalled();
+    expect(mockSnackbar.showError).toHaveBeenCalledWith("Failed to update namespace.");
+    expect(mockSnackbar.showSuccess).not.toHaveBeenCalled();
   });
 });
diff --git a/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
index 8f3670f07e4..8e113a31bce 100644
--- a/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Namespace List > Renders the component 1`] = `
-"<div>
-  <div data-test="namespaces-list">
+"<div data-v-ec7d46d0="">
+  <div data-v-ec7d46d0="" data-test="namespaces-list">
     <div class="v-table v-theme--light v-table--density-default bg-background border rounded text-center" data-test="datatable">
       <!---->
       <div class="v-table__wrapper">
@@ -13,43 +13,36 @@ exports[`Namespace List > Renders the component 1`] = `
               <th class="text-center" data-test="th-devices"><span data-test="th-label">Devices</span></th>
               <th class="text-center" data-test="th-tenant_id"><span data-test="th-label">Tenant ID</span></th>
               <th class="text-center" data-test="th-owner"><span data-test="th-label">Owner</span></th>
-              <th class="text-center" data-test="th-settings"><span data-test="th-label">Session Record</span></th>
               <th class="text-center" data-test="th-actions"><span data-test="th-label">Actions</span></th>
             </tr>
           </thead>
           <tbody data-test="tbody-has-items">
-            <tr>
-              <td>ossystems</td>
-              <td>2</td>
-              <td>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</td>
-              <td>ossystems</td>
-              <td>
-                <div>true</div>
-              </td>
-              <td><a class="mdi-information mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-0"></a>
+            <tr data-v-ec7d46d0="">
+              <td data-v-ec7d46d0="">ossystems</td>
+              <td data-v-ec7d46d0="">2</td>
+              <td data-v-ec7d46d0="">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</td>
+              <td data-v-ec7d46d0=""><span data-v-ec7d46d0="">ossystems</span></td>
+              <td data-v-ec7d46d0=""><a data-v-ec7d46d0="" class="mdi-information mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-0"></a>
+                <!--teleport start-->
+                <!--teleport end--><button data-v-ec7d46d0="" class="mdi-pencil mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-1" aria-label="Edit Namespace" data-test="namespace-edit-dialog-btn"></button>
                 <!--teleport start-->
-                <!--teleport end--><button class="mdi-pencil mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-1" aria-label="Edit Namespace" data-test="dialog-btn"></button>
+                <!--teleport end--><button data-v-ec7d46d0="" class="mdi-delete mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-2" aria-label="Delete Namespace" data-test="namespace-delete-dialog-btn"></button>
                 <!--teleport start-->
                 <!--teleport end-->
-                <!---->
-                <!---->
               </td>
             </tr>
-            <tr>
-              <td>dev</td>
-              <td>12</td>
-              <td>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</td>
-              <td>dev</td>
-              <td>
-                <div>true</div>
-              </td>
-              <td><a class="mdi-information mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-2"></a>
+            <tr data-v-ec7d46d0="">
+              <td data-v-ec7d46d0="">dev</td>
+              <td data-v-ec7d46d0="">12</td>
+              <td data-v-ec7d46d0="">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</td>
+              <td data-v-ec7d46d0=""><span data-v-ec7d46d0="">dev</span></td>
+              <td data-v-ec7d46d0=""><a data-v-ec7d46d0="" class="mdi-information mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-3"></a>
+                <!--teleport start-->
+                <!--teleport end--><button data-v-ec7d46d0="" class="mdi-pencil mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-4" aria-label="Edit Namespace" data-test="namespace-edit-dialog-btn"></button>
                 <!--teleport start-->
-                <!--teleport end--><button class="mdi-pencil mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-3" aria-label="Edit Namespace" data-test="dialog-btn"></button>
+                <!--teleport end--><button data-v-ec7d46d0="" class="mdi-delete mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" dark="" aria-describedby="v-tooltip-v-5" aria-label="Delete Namespace" data-test="namespace-delete-dialog-btn"></button>
                 <!--teleport start-->
                 <!--teleport end-->
-                <!---->
-                <!---->
               </td>
             </tr>
           </tbody>
@@ -63,7 +56,7 @@ exports[`Namespace List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -87,7 +80,7 @@ exports[`Namespace List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="text" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="text" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
                 </div>
                 <!---->
               </div>
@@ -117,5 +110,7 @@ exports[`Namespace List > Renders the component 1`] = `
         </button></div>
     </div>
   </div>
+  <!--v-if-->
+  <!--v-if-->
 </div>"
 `;
diff --git a/ui/admin/tests/unit/views/NamespaceDetails/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/NamespaceDetails/__snapshots__/index.spec.ts.snap
index f4e38cc377b..72ff4c49199 100644
--- a/ui/admin/tests/unit/views/NamespaceDetails/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/NamespaceDetails/__snapshots__/index.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Namespace Details > Renders the component 1`] = `
-"<div class="d-flex pa-0 align-center">
-  <h1>Namespace Details</h1>
+"<div data-v-1bdec118="" class="d-flex pa-0 align-center">
+  <h1 data-v-1bdec118="">Namespace Details</h1>
 </div>
-<div class="v-card v-theme--light v-card--density-default v-card--variant-elevated mt-2 pa-4">
+<div data-v-1bdec118="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated mt-2 border rounded bg-background">
   <!---->
   <div class="v-card__loader">
     <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -22,45 +22,130 @@ exports[`Namespace Details > Renders the component 1`] = `
   </div>
   <!---->
   <!---->
-  <div class="v-card-text">
-    <div>
-      <h3 class="text-overline"> Name: </h3>
-      <p data-test="dev">dev</p>
-    </div>
-    <div>
-      <h3 class="text-overline mt-3"> Devices: </h3>
-      <p data-test="namespace-devices-count">1</p>
-    </div>
-    <div>
-      <h3 class="text-overline mt-3"> Owner: </h3>
-      <p tabindex="0" class="text-decoration-underline cursor-pointer" data-test="6256b739302b50b6cc5eafcc">6256b739302b50b6cc5eafcc</p>
-    </div>
-    <div>
-      <h3 class="text-overline mt-3"> Tenant Id: </h3>
-      <p data-test="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
-    </div>
-    <div>
-      <h3 class="text-overline mt-3"> Members: </h3>
-      <ul>
-        <li class="ml-8">
-          <div><span class="font-weight-bold mr-1" data-test="id-item">id:</span><span tabindex="0" class="text-decoration-underline cursor-pointer" data-test="id-value">6256b739302b50b6cc5eafcc</span></div>
-        </li>
-        <li class="ml-8">
-          <div><span class="font-weight-bold mr-1" data-test="role-item">role:</span><span data-test="role-value">owner</span></div>
-        </li>
-      </ul>
-      <ul>
-        <li class="ml-8">
-          <div><span class="font-weight-bold mr-1" data-test="id-item">id:</span><span tabindex="0" class="text-decoration-underline cursor-pointer" data-test="id-value">7326b239302b50b6cc5eafdd</span></div>
-        </li>
-        <li class="ml-8">
-          <div><span class="font-weight-bold mr-1" data-test="role-item">role:</span><span data-test="role-value">administrator</span></div>
-        </li>
-      </ul>
+  <div data-v-1bdec118="" class="v-card-title pa-4 d-flex align-center justify-space-between bg-v-theme-surface"><span data-v-1bdec118="" class="text-h6 ml-2 d-flex align-center ga-2">dev <span data-v-1bdec118="" class="v-chip v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal text-capitalize" draggable="false" data-test="namespace-type-chip"><!----><span class="v-chip__underlay"></span>
+    <!---->
+    <!---->
+    <div class="v-chip__content" data-no-activator="">team</div>
+    <!---->
+    <!----></span></span><button data-v-1bdec118="" type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-default v-btn--variant-plain border rounded bg-v-theme-background" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-2" aria-owns="v-menu-v-2" data-test="namespace-actions-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-format-list-bulleted mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+      <!---->
+      <!---->
+    </button>
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <hr data-v-1bdec118="" class="v-divider v-theme--light" aria-orientation="horizontal" role="separator">
+  <div data-v-1bdec118="" class="v-card-text pa-4 pt-0">
+    <div data-v-1bdec118="" class="v-row py-3">
+      <div data-v-1bdec118="" class="v-col-md-6 v-col-12 my-0 py-0">
+        <div data-v-1bdec118="" data-test="namespace-name-field">
+          <div data-v-1bdec118="" class="item-title">Name:</div>
+          <p data-v-1bdec118="" class="text-truncate">dev</p>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-tenant-id-field">
+          <div data-v-1bdec118="" class="item-title">Tenant ID:</div>
+          <p data-v-1bdec118="" class="text-truncate"><code data-v-1bdec118="">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</code></p>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-owner-field">
+          <div data-v-1bdec118="" class="item-title">Owner:</div>
+          <p data-v-1bdec118="" tabindex="0" class="text-decoration-underline cursor-pointer text-truncate">owner@example.com</p>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-devices-field">
+          <div data-v-1bdec118="" class="item-title">Total Devices:</div>
+          <p data-v-1bdec118="">1</p>
+        </div>
+        <div data-v-1bdec118="" class="d-flex align-center flex-wrap mt-2" data-test="namespace-devices-breakdown">
+          <div data-v-1bdec118="" class="mr-6" data-test="namespace-devices-accepted">
+            <div data-v-1bdec118="" class="item-title">Accepted:</div>
+            <p data-v-1bdec118="">1</p>
+          </div>
+          <div data-v-1bdec118="" class="mr-6" data-test="namespace-devices-pending">
+            <div data-v-1bdec118="" class="item-title">Pending:</div>
+            <p data-v-1bdec118="">0</p>
+          </div>
+          <div data-v-1bdec118="" data-test="namespace-devices-rejected">
+            <div data-v-1bdec118="" class="item-title">Rejected:</div>
+            <p data-v-1bdec118="">0</p>
+          </div>
+        </div>
+      </div>
+      <div data-v-1bdec118="" class="v-col-md-6 v-col-12 my-0 py-0">
+        <div data-v-1bdec118="" data-test="namespace-created-field">
+          <div data-v-1bdec118="" class="item-title">Created:</div>
+          <p data-v-1bdec118="">Wednesday, April 13th 2022, 11:43:24 am</p>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-max-devices-field">
+          <div data-v-1bdec118="" class="item-title">Max Devices:</div>
+          <p data-v-1bdec118="">10</p>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-session-record-field">
+          <div data-v-1bdec118="" class="item-title">Session Record:</div><span data-v-1bdec118="" class="v-chip v-theme--light text-success v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
+          <!---->
+          <!---->
+          <div class="v-chip__content" data-no-activator="">Enabled</div>
+          <!---->
+          <!----></span>
+        </div>
+        <div data-v-1bdec118="" data-test="namespace-connection-announcement-field">
+          <div data-v-1bdec118="" class="item-title">Connection Announcement:</div>
+          <p data-v-1bdec118="">New connection</p>
+        </div>
+      </div>
     </div>
-    <div>
-      <h3 class="text-overline mt-3"> Session Record: </h3>
-      <p data-test="true">true</p>
+    <hr data-v-1bdec118="" class="v-divider v-theme--light my-4" aria-orientation="horizontal" role="separator">
+    <div data-v-1bdec118="" data-test="namespace-members-section">
+      <h3 data-v-1bdec118="" class="text-h6 mb-3"> Members (2) </h3>
+      <div data-v-1bdec118="" class="v-list v-theme--light v-list--density-default v-list--one-line bg-transparent" tabindex="0" role="list" data-test="namespace-members-list">
+        <div data-v-1bdec118="" class="v-list-item v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text border rounded mb-2 bg-v-theme-surface" role="listitem" data-test="namespace-member-item">
+          <!----><span class="v-list-item__underlay"></span>
+          <!---->
+          <div class="v-list-item__content" data-no-activator="">
+            <!---->
+            <!---->
+            <div data-v-1bdec118="" class="v-list-item-title d-flex align-center mb-2"><span data-v-1bdec118="" tabindex="0" class="text-decoration-underline cursor-pointer" data-test="namespace-member-email">owner@example.com</span><span data-v-1bdec118="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal ml-2 text-capitalize" draggable="false" data-test="namespace-member-role"><!----><span class="v-chip__underlay"></span>
+              <!---->
+              <!---->
+              <div class="v-chip__content" data-no-activator=""><i data-v-1bdec118="" class="mdi-crown mdi v-icon notranslate v-theme--light v-icon--size-small mr-1" aria-hidden="true"></i> owner</div>
+              <!---->
+              <!----></span><span data-v-1bdec118="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal ml-2 text-capitalize" draggable="false" data-test="namespace-member-status"><!----><span class="v-chip__underlay"></span>
+              <!---->
+              <!---->
+              <div class="v-chip__content" data-no-activator="">active</div>
+              <!---->
+              <!----></span>
+            </div>
+            <div data-v-1bdec118="" class="v-list-item-subtitle d-flex flex-column"><span data-v-1bdec118="" class="text-caption" data-test="namespace-member-id"><strong data-v-1bdec118="">ID:</strong> <code data-v-1bdec118="">6256b739302b50b6cc5eafcc</code></span><span data-v-1bdec118="" class="text-caption" data-test="namespace-member-added"><strong data-v-1bdec118="">Added:</strong> Wednesday, April 13th 2022, 11:43:24 am</span>
+              <!--v-if-->
+            </div>
+          </div>
+          <!---->
+        </div>
+        <div data-v-1bdec118="" class="v-list-item v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text border rounded mb-2 bg-v-theme-surface" role="listitem" data-test="namespace-member-item">
+          <!----><span class="v-list-item__underlay"></span>
+          <!---->
+          <div class="v-list-item__content" data-no-activator="">
+            <!---->
+            <!---->
+            <div data-v-1bdec118="" class="v-list-item-title d-flex align-center mb-2"><span data-v-1bdec118="" tabindex="0" class="text-decoration-underline cursor-pointer" data-test="namespace-member-email">admin@example.com</span><span data-v-1bdec118="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal ml-2 text-capitalize" draggable="false" data-test="namespace-member-role"><!----><span class="v-chip__underlay"></span>
+              <!---->
+              <!---->
+              <div class="v-chip__content" data-no-activator=""><i data-v-1bdec118="" class="mdi-shield-account mdi v-icon notranslate v-theme--light v-icon--size-small mr-1" aria-hidden="true"></i> admin</div>
+              <!---->
+              <!----></span><span data-v-1bdec118="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal ml-2 text-capitalize" draggable="false" data-test="namespace-member-status"><!----><span class="v-chip__underlay"></span>
+              <!---->
+              <!---->
+              <div class="v-chip__content" data-no-activator="">pending</div>
+              <!---->
+              <!----></span>
+            </div>
+            <div data-v-1bdec118="" class="v-list-item-subtitle d-flex flex-column"><span data-v-1bdec118="" class="text-caption" data-test="namespace-member-id"><strong data-v-1bdec118="">ID:</strong> <code data-v-1bdec118="">7326b239302b50b6cc5eafdd</code></span><span data-v-1bdec118="" class="text-caption" data-test="namespace-member-added"><strong data-v-1bdec118="">Added:</strong> Thursday, April 14th 2022, 11:43:24 am</span>
+              <!--v-if-->
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
     </div>
   </div>
   <!---->
diff --git a/ui/admin/tests/unit/views/NamespaceDetails/index.spec.ts b/ui/admin/tests/unit/views/NamespaceDetails/index.spec.ts
index 4c52373caee..214e42a12c8 100644
--- a/ui/admin/tests/unit/views/NamespaceDetails/index.spec.ts
+++ b/ui/admin/tests/unit/views/NamespaceDetails/index.spec.ts
@@ -14,20 +14,30 @@ const namespaceDetail: IAdminNamespace = {
   name: "dev",
   owner: "6256b739302b50b6cc5eafcc",
   tenant_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+  type: "team",
   members: [
     {
       id: "6256b739302b50b6cc5eafcc",
       role: "owner",
+      email: "owner@example.com",
+      status: "active",
+      added_at: "2022-04-13T11:43:24.668Z",
+      expires_at: "0001-01-01T00:00:00Z",
     },
     {
       id: "7326b239302b50b6cc5eafdd",
       role: "administrator",
+      email: "admin@example.com",
+      status: "pending",
+      added_at: "2022-04-14T11:43:24.668Z",
+      expires_at: "0001-01-01T00:00:00Z",
     },
   ],
   settings: {
     session_record: true,
+    connection_announcement: "New connection",
   },
-  max_devices: 0,
+  max_devices: 10,
   devices_accepted_count: 1,
   devices_pending_count: 0,
   devices_rejected_count: 0,
@@ -81,23 +91,64 @@ describe("Namespace Details", () => {
   });
 
   it("Should render the props of the Namespace on screen", () => {
-    expect(wrapper.find(`[data-test='${namespaceDetail.name}']`).text()).toContain(namespaceDetail.name);
-    expect(wrapper.find('[data-test="namespace-devices-count"').text()).toContain(devicesCount);
-    expect(wrapper.find(`[data-test='${namespaceDetail.owner}']`).text()).toContain(namespaceDetail.owner);
-    expect(wrapper.find(`[data-test='${namespaceDetail.tenant_id}']`).text()).toContain(namespaceDetail.tenant_id);
-    expect(wrapper.find(`[data-test='${namespaceDetail.settings.session_record}']`).text())
-      .toContain(String(namespaceDetail.settings.session_record));
+    const nameField = wrapper.get('[data-test="namespace-name-field"]');
+    expect(nameField.text()).toContain(namespaceDetail.name);
+
+    const tenantField = wrapper.get('[data-test="namespace-tenant-id-field"]');
+    expect(tenantField.text()).toContain(namespaceDetail.tenant_id);
+
+    const ownerField = wrapper.get('[data-test="namespace-owner-field"]');
+    expect(ownerField.text()).toContain(namespaceDetail.members[0].email);
+
+    const devicesField = wrapper.get('[data-test="namespace-devices-field"]');
+    expect(devicesField.text()).toContain(String(devicesCount));
+
+    const breakdown = wrapper.get('[data-test="namespace-devices-breakdown"]');
+    expect(
+      breakdown.get('[data-test="namespace-devices-accepted"]').text(),
+    ).toContain(String(namespaceDetail.devices_accepted_count));
+    expect(
+      breakdown.get('[data-test="namespace-devices-pending"]').text(),
+    ).toContain(String(namespaceDetail.devices_pending_count));
+    expect(
+      breakdown.get('[data-test="namespace-devices-rejected"]').text(),
+    ).toContain(String(namespaceDetail.devices_rejected_count));
+
+    const maxDevicesField = wrapper.get('[data-test="namespace-max-devices-field"]');
+    expect(maxDevicesField.text()).toContain(String(namespaceDetail.max_devices));
+
+    const sessionRecordField = wrapper.get('[data-test="namespace-session-record-field"]');
+    expect(sessionRecordField.text()).toContain("Enabled");
   });
 
-  it("Should render the correct members list", () => {
-    wrapper.findAll("ul").forEach((ul) => {
-      ul.findAll("li").forEach((li) => {
-        const fieldName = li.find("[data-test$='-item']");
-        const fieldValue = li.find("[data-test$='-value']");
-        expect(fieldName.exists()).toBeTruthy();
-        expect(fieldValue.exists()).toBeTruthy();
-      });
-    });
-    expect(wrapper.findAll("ul").length).toEqual(namespaceDetail.members.length);
+  it("Should render the props of the Namespace on screen", () => {
+    const nameField = wrapper.get('[data-test="namespace-name-field"]');
+    expect(nameField.text()).toContain(namespaceDetail.name);
+
+    const tenantField = wrapper.get('[data-test="namespace-tenant-id-field"]');
+    expect(tenantField.text()).toContain(namespaceDetail.tenant_id);
+
+    const ownerField = wrapper.get('[data-test="namespace-owner-field"]');
+    expect(ownerField.text()).toContain(namespaceDetail.members[0].email);
+
+    const devicesField = wrapper.get('[data-test="namespace-devices-field"]');
+    expect(devicesField.text()).toContain(String(devicesCount));
+
+    const breakdown = wrapper.get('[data-test="namespace-devices-breakdown"]');
+    expect(
+      breakdown.get('[data-test="namespace-devices-accepted"]').text(),
+    ).toContain(String(namespaceDetail.devices_accepted_count));
+    expect(
+      breakdown.get('[data-test="namespace-devices-pending"]').text(),
+    ).toContain(String(namespaceDetail.devices_pending_count));
+    expect(
+      breakdown.get('[data-test="namespace-devices-rejected"]').text(),
+    ).toContain(String(namespaceDetail.devices_rejected_count));
+
+    const maxDevicesField = wrapper.get('[data-test="namespace-max-devices-field"]');
+    expect(maxDevicesField.text()).toContain(String(namespaceDetail.max_devices));
+
+    const sessionRecordField = wrapper.get('[data-test="namespace-session-record-field"]');
+    expect(sessionRecordField.text()).toContain("Enabled");
   });
 });
diff --git a/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
index b22e70b9bc8..ddab321a3ff 100644
--- a/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
@@ -52,8 +52,8 @@ exports[`Namespaces > Renders the component 1`] = `
   <!---->
   <!---->
 </div>
-<div>
-  <div data-test="namespaces-list">
+<div data-v-ec7d46d0="">
+  <div data-v-ec7d46d0="" data-test="namespaces-list">
     <div class="v-table v-theme--light v-table--density-default bg-background border rounded text-center" data-test="datatable">
       <!---->
       <div class="v-table__wrapper">
@@ -64,13 +64,12 @@ exports[`Namespaces > Renders the component 1`] = `
               <th class="text-center" data-test="th-devices"><span data-test="th-label">Devices</span></th>
               <th class="text-center" data-test="th-tenant_id"><span data-test="th-label">Tenant ID</span></th>
               <th class="text-center" data-test="th-owner"><span data-test="th-label">Owner</span></th>
-              <th class="text-center" data-test="th-settings"><span data-test="th-label">Session Record</span></th>
               <th class="text-center" data-test="th-actions"><span data-test="th-label">Actions</span></th>
             </tr>
           </thead>
           <tbody class="pa-4 text-subtitle-2" data-test="tbody-empty">
             <tr>
-              <td colspan="6" class="pa-4 text-subtitle-2 text-center" data-test="empty-state"> No data available </td>
+              <td colspan="5" class="pa-4 text-subtitle-2 text-center" data-test="empty-state"> No data available </td>
             </tr>
           </tbody>
         </table>
@@ -137,5 +136,7 @@ exports[`Namespaces > Renders the component 1`] = `
         </button></div>
     </div>
   </div>
+  <!--v-if-->
+  <!--v-if-->
 </div>"
 `;