diff --git a/ui/src/components/AppBar/DevicesDropdown.vue b/ui/src/components/AppBar/DevicesDropdown.vue
index a7a36fa14f8..c69ccfce1df 100644
--- a/ui/src/components/AppBar/DevicesDropdown.vue
+++ b/ui/src/components/AppBar/DevicesDropdown.vue
@@ -1,5 +1,6 @@
 <template>
   <v-badge
+    v-if="hasNamespaces"
     :model-value="pendingDevicesCount > 0"
     :content="pendingDevicesCount"
     offset-y="-5"
@@ -346,6 +347,7 @@ const stats = computed(() => statsStore.stats);
 const offlineDevices = computed(
   () => stats.value.registered_devices - stats.value.online_devices,
 );
+const hasNamespaces = computed(() => namespacesStore.namespaceList.length > 0);
 const toggleDrawer = () => {
   isDrawerOpen.value = !isDrawerOpen.value;
 };
@@ -392,7 +394,7 @@ const fetchRecentDevices = async () => {
 };
 
 onBeforeMount(async () => {
-  if (namespacesStore.namespaceList.length === 0) return;
+  if (!hasNamespaces.value) return;
   await fetchStats();
   await fetchPendingDevices();
   await fetchRecentDevices();
diff --git a/ui/src/components/Namespace/Namespace.vue b/ui/src/components/Namespace/Namespace.vue
index 60a08cc5b2d..4f07f97f9ec 100644
--- a/ui/src/components/Namespace/Namespace.vue
+++ b/ui/src/components/Namespace/Namespace.vue
@@ -1,6 +1,6 @@
 <template>
   <NamespaceAdd v-model="showAddDialog" />
-  <NamespaceInstructions v-model="showAddNamespaceInstructions" />
+  <NamespaceInstructions v-model="showInstructionsDialog" />
 
   <v-menu
     :close-on-content-click="false"
@@ -108,6 +108,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
+import { useDisplay } from "vuetify";
+import { until } from "@vueuse/core";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import NamespaceInstructions from "./NamespaceInstructions.vue";
 import NamespaceChip from "./NamespaceChip.vue";
@@ -117,7 +119,6 @@ import useNamespaceManager from "./composables/useNamespaceManager";
 import useAuthStore from "@/store/modules/auth";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import { envVariables } from "@/envVariables";
-import { useDisplay } from "vuetify";
 
 defineOptions({
   inheritAttrs: false,
@@ -139,7 +140,7 @@ const {
 const { mdAndDown, thresholds } = useDisplay();
 
 const showAddDialog = ref(false);
-const showAddNamespaceInstructions = computed(() => namespacesLoaded.value && !hasNamespaces.value && !props.isAdminContext);
+const showInstructionsDialog = ref(false);
 const userId = computed(() => authStore.id || localStorage.getItem("id") || "");
 
 const showAdminButton = computed(() => {
@@ -168,5 +169,7 @@ const navigateToAdminPanel = () => {
 
 onMounted(async () => {
   await loadCurrentNamespace();
+  await until(namespacesLoaded).toBe(true);
+  showInstructionsDialog.value = !hasNamespaces.value && !props.isAdminContext;
 });
 </script>
diff --git a/ui/src/components/Namespace/NamespaceInstructions.vue b/ui/src/components/Namespace/NamespaceInstructions.vue
index 6ae669fea01..b49505211d5 100644
--- a/ui/src/components/Namespace/NamespaceInstructions.vue
+++ b/ui/src/components/Namespace/NamespaceInstructions.vue
@@ -1,11 +1,10 @@
 <template>
   <WindowDialog
-    v-model="showNoNamespaceDialog"
+    v-model="showNamespaceInstructions"
     title="You have no namespaces associated"
     icon="mdi-folder-alert"
     icon-color="warning"
-    persistent
-    :show-close-button="false"
+    @close="showNamespaceInstructions = false"
   >
     <div class="pa-6">
       <p>
@@ -70,15 +69,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { ref } from "vue";
 import { envVariables } from "@/envVariables";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
-const route = useRoute();
-const showDialog = defineModel<boolean>({ required: true });
+const showNamespaceInstructions = defineModel<boolean>({ required: true });
 const showNamespaceAdd = ref(false);
-const showNoNamespaceDialog = computed(() => route.name === "AcceptInvite" ? false : showDialog.value);
 const { isCommunity } = envVariables;
 </script>
diff --git a/ui/src/components/QuickConnection/QuickConnection.vue b/ui/src/components/QuickConnection/QuickConnection.vue
index 9b2f7a9789d..8ef5dd666d6 100644
--- a/ui/src/components/QuickConnection/QuickConnection.vue
+++ b/ui/src/components/QuickConnection/QuickConnection.vue
@@ -4,29 +4,27 @@
       color="primary"
       variant="flat"
       tabindex="0"
-      aria-label="Dialog Quick Connection"
       data-test="quick-connection-open-btn"
       prepend-icon="mdi-console"
       block
+      text="Quick Connect"
+      :disabled
       @click="showDialog = true"
-    >
-      Quick Connect
-    </v-btn>
+    />
 
-    <div>
-      <p
-        class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
-        data-test="quick-connect-instructions"
+    <p
+      v-if="!disabled"
+      class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
+      data-test="quick-connect-instructions"
+    >
+      Press <v-chip
+        density="compact"
+        size="small"
+        label
       >
-        Press <v-chip
-          density="compact"
-          size="small"
-          label
-        >
-          Ctrl+K
-        </v-chip> to Quick Connect!
-      </p>
-    </div>
+        Ctrl+K
+      </v-chip> to Quick Connect!
+    </p>
 
     <WindowDialog
       v-model="showDialog"
@@ -130,6 +128,8 @@ import { useMagicKeys } from "@vueuse/core";
 import QuickConnectionList from "./QuickConnectionList.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
+const props = defineProps<{ disabled: boolean }>();
+
 const showDialog = ref(false);
 const filter = ref("");
 const listRef = ref<InstanceType<typeof QuickConnectionList> & { rootEl?: HTMLElement }>();
@@ -146,6 +146,7 @@ const normalizeLabel = (label: string) => label.toLowerCase().replace(/\s+/g, "-
 useMagicKeys({
   passive: false,
   onEventFired(event) {
+    if (props.disabled) return;
     if (event.ctrlKey && event.key.toLowerCase() === "k" && event.type === "keydown") {
       event.preventDefault();
       showDialog.value = !showDialog.value;
@@ -155,6 +156,8 @@ useMagicKeys({
     }
   },
 });
+
+defineExpose({ showDialog });
 </script>
 
 <style scoped lang="scss">
diff --git a/ui/src/layouts/AppLayout.vue b/ui/src/layouts/AppLayout.vue
index 67dbaedb802..9a3d85d6800 100644
--- a/ui/src/layouts/AppLayout.vue
+++ b/ui/src/layouts/AppLayout.vue
@@ -26,24 +26,6 @@
       </div>
     </v-toolbar>
 
-    <div
-      v-if="!hasNamespaces"
-      class="d-flex justify-center"
-    >
-      <v-btn
-        color="primary"
-        data-test="save-btn"
-        @click="showNamespaceAdd = true"
-      >
-        Add Namespace
-      </v-btn>
-      <NamespaceAdd
-        v-model="showNamespaceAdd"
-        enable-switch-in
-        data-test="namespace-add-component"
-      />
-    </div>
-
     <v-list
       density="compact"
       class="bg-v-theme-surface"
@@ -127,7 +109,7 @@
       </template>
 
       <v-col class="d-flex align-end justify-center">
-        <QuickConnection />
+        <QuickConnection :disabled="!hasNamespaces" />
       </v-col>
     </v-list>
   </v-navigation-drawer>
@@ -179,7 +161,6 @@ import { envVariables } from "../envVariables";
 import UserWarning from "../components/User/UserWarning.vue";
 import AppBar from "../components/AppBar/AppBar.vue";
 import QuickConnection from "../components/QuickConnection/QuickConnection.vue";
-import NamespaceAdd from "@/components/Namespace/NamespaceAdd.vue";
 import Snackbar from "@/components/Snackbar/Snackbar.vue";
 import useLayoutStore from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
@@ -206,7 +187,6 @@ const namespacesStore = useNamespacesStore();
 const spinnerStore = useSpinnerStore();
 const { getPrivateKeyList } = usePrivateKeysStore();
 const currentRoute = computed(() => router.currentRoute);
-const showNamespaceAdd = ref(false);
 const hasNamespaces = computed(() => namespacesStore.namespaceList.length !== 0);
 const theme = computed(() => layoutStore.theme);
 
@@ -220,8 +200,7 @@ const hasSpinner = computed({
   set(newStatus) { spinnerStore.status = newStatus; },
 });
 
-const disableItem = (item: string) => !hasNamespaces.value && item !== "Settings";
-
+const disableItem = (item: string) => !hasNamespaces.value && item !== "Settings" && item !== "Home";
 const isItemHidden = (meta?: RouteMeta) => {
   if (!meta?.isHidden) return false;
   return meta.isHidden();
diff --git a/ui/src/views/Home.vue b/ui/src/views/Home.vue
index 567901e8e6f..312775ab20f 100644
--- a/ui/src/views/Home.vue
+++ b/ui/src/views/Home.vue
@@ -1,164 +1,165 @@
 <template>
-  <div v-if="!hasStatus">
-    <!-- Namespace Info Card -->
-    <v-row>
-      <v-col cols="12">
-        <v-card
-          class="bg-transparent mb-6"
-          elevation="0"
-          rounded="0"
+  <div v-if="!hasError">
+    <v-card
+      class="bg-transparent mb-6"
+      elevation="0"
+      rounded="0"
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          md="6"
         >
-          <v-row>
-            <v-col
-              cols="12"
-              md="6"
+          <div class="d-flex align-start">
+            <v-avatar
+              color="primary"
+              size="48"
+              class="mr-4"
             >
-              <div class="d-flex align-start">
-                <v-avatar
+              <v-icon
+                size="32"
+                icon="mdi-home"
+              />
+            </v-avatar>
+            <div>
+              <div class="text-overline text-medium-emphasis mb-1">Home</div>
+              <div class="text-h5 font-weight-bold mb-2">
+                {{ hasNamespace ? namespace.name : "No Active Namespace" }}
+              </div>
+              <div class="text-body-2 text-medium-emphasis">{{ activeNamespaceDescription }}</div>
+            </div>
+          </div>
+        </v-col>
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <v-card
+            class="pa-4"
+            variant="tonal"
+          >
+            <div v-if="hasNamespace">
+              <div class="text-overline text-medium-emphasis mb-2">TENANT ID</div>
+              <div class="d-flex align-center justify-space-between">
+                <code
+                  class="text-primary"
+                  data-test="tenant-info-text"
+                >{{ namespace.tenant_id }}</code>
+                <CopyWarning copied-item="Tenant ID">
+                  <template #default="{ copyText }">
+                    <v-btn
+                      data-test="copy-tenant-btn"
+                      color="primary"
+                      variant="elevated"
+                      size="small"
+                      prepend-icon="mdi-content-copy"
+                      @click="copyText(namespace.tenant_id)"
+                    >
+                      Copy
+                    </v-btn>
+                  </template>
+                </CopyWarning>
+              </div>
+              <div class="text-caption text-medium-emphasis mt-2">Use this ID to register new devices to this namespace</div>
+            </div>
+            <div v-else>
+              <div class="text-overline text-medium-emphasis">Create your first namespace</div>
+              <div class="my-2">
+                <v-btn
                   color="primary"
-                  size="48"
-                  class="mr-4"
-                >
-                  <v-icon size="32">
-                    mdi-home
-                  </v-icon>
-                </v-avatar>
-                <div>
-                  <div class="text-overline text-medium-emphasis mb-1">
-                    Home
-                  </div>
-                  <div class="text-h5 font-weight-bold mb-2">
-                    {{ namespace.name }}
-                  </div>
-                  <div class="text-body-2 text-medium-emphasis">
-                    This is your active namespace. All devices, sessions and configurations are isolated within this namespace.
-                  </div>
-                </div>
+                  variant="elevated"
+                  size="small"
+                  prepend-icon="mdi-plus"
+                  data-test="create-namespace-home-btn"
+                  text="Create Namespace"
+                  @click="showNamespaceAdd = true"
+                />
               </div>
-            </v-col>
-            <v-col
-              cols="12"
-              md="6"
-            >
-              <v-card
-                class="pa-4"
-                variant="tonal"
-              >
-                <div class="text-overline text-medium-emphasis mb-2">
-                  TENANT ID
-                </div>
-                <div class="d-flex align-center justify-space-between">
-                  <code
-                    class="text-primary"
-                    data-test="tenant-info-text"
-                  >{{ namespace.tenant_id }}</code>
-                  <CopyWarning :copied-item="'Tenant ID'">
-                    <template #default="{ copyText }">
-                      <v-btn
-                        data-test="copy-tenant-btn"
-                        color="primary"
-                        variant="elevated"
-                        size="small"
-                        prepend-icon="mdi-content-copy"
-                        @click="copyText(namespace.tenant_id)"
-                      >
-                        Copy
-                      </v-btn>
-                    </template>
-                  </CopyWarning>
-                </div>
-                <div class="text-caption text-medium-emphasis mt-2">
-                  Use this ID to register new devices to this namespace
-                </div>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- Devices Section -->
-    <v-row>
-      <v-col
-        cols="12"
-        class="d-flex align-center mb-2"
-      >
-        <v-icon class="mr-2">
-          mdi-devices
-        </v-icon>
-        <h2 class="text-h6">
-          Devices
-        </h2>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col
-        cols="12"
-        md="3"
-      >
-        <StatCard
-          title="Accepted Devices"
-          :stat="stats.registered_devices || 0"
-          icon="mdi-check"
-          button-label="View all devices"
-          path="/devices"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="3"
-      >
-        <StatCard
-          title="Online Devices"
-          :stat="stats.online_devices || 0"
-          icon="mdi-lan-connect"
-          button-label="View Online Devices"
-          path="/devices"
-        />
-      </v-col>
-
-      <v-col
-        cols="12"
-        md="3"
-      >
-        <StatCard
-          title="Pending Devices"
-          :stat="stats.pending_devices || 0"
-          icon="mdi-clock-outline"
-          button-label="Approve Devices"
-          path="/devices/pending"
-        />
-      </v-col>
+              <div class="text-caption text-medium-emphasis">
+                You need to create or join a namespace to start managing your devices and remote connections.
+              </div>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card>
 
-      <v-col
-        cols="12"
-        md="3"
-      >
-        <v-card class="pa-6 bg-transparent text-center h-100 border border-dashed">
-          <v-avatar
-            color="surface-variant"
-            size="64"
-            class="mb-4"
-            theme="dark"
-          >
-            <v-icon
-              size="40"
-              color="primary"
-              icon="mdi-developer-board"
-            />
-          </v-avatar>
-          <v-card-title class="text-h6 font-weight-bold mb-2">
-            Add a new device
-          </v-card-title>
-          <v-card-subtitle class="text-body-2 text-medium-emphasis mb-4 text-wrap">
-            Register new devices to this namespace and start managing remote connections
-          </v-card-subtitle>
-          <DeviceAdd />
-        </v-card>
-      </v-col>
-    </v-row>
+    <div v-if="hasNamespace">
+      <v-row>
+        <v-col
+          cols="12"
+          class="d-flex align-center mb-2"
+        >
+          <v-icon
+            class="mr-2"
+            icon="mdi-devices"
+          />
+          <h2 class="text-h6">Devices</h2>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <StatCard
+            title="Accepted Devices"
+            :stat="stats.registered_devices || 0"
+            icon="mdi-check"
+            button-label="View all devices"
+            path="/devices"
+          />
+        </v-col>
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <StatCard
+            title="Online Devices"
+            :stat="stats.online_devices || 0"
+            icon="mdi-lan-connect"
+            button-label="View Online Devices"
+            path="/devices"
+          />
+        </v-col>
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <StatCard
+            title="Pending Devices"
+            :stat="stats.pending_devices || 0"
+            icon="mdi-clock-outline"
+            button-label="Approve Devices"
+            path="/devices/pending"
+          />
+        </v-col>
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-card class="pa-6 bg-transparent text-center h-100 border border-dashed">
+            <v-avatar
+              color="surface-variant"
+              size="64"
+              class="mb-4"
+              theme="dark"
+            >
+              <v-icon
+                size="40"
+                color="primary"
+                icon="mdi-developer-board"
+              />
+            </v-avatar>
+            <v-card-title class="text-h6 font-weight-bold mb-2">Add a new device</v-card-title>
+            <v-card-subtitle class="text-body-2 text-medium-emphasis mb-4 text-wrap">
+              Register new devices to this namespace and start managing remote connections
+            </v-card-subtitle>
+            <DeviceAdd />
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
   </div>
   <v-card
     v-else
@@ -169,11 +170,12 @@
       Something is wrong, try again!
     </p>
   </v-card>
+
+  <NamespaceAdd v-model="showNamespaceAdd" />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import axios, { AxiosError } from "axios";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useNamespacesStore from "@/store/modules/namespaces";
@@ -181,14 +183,24 @@ import useStatsStore from "@/store/modules/stats";
 import DeviceAdd from "@/components/Devices/DeviceAdd.vue";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import StatCard from "@/components/StatCard.vue";
+import NamespaceAdd from "@/components/Namespace/NamespaceAdd.vue";
 
 const namespacesStore = useNamespacesStore();
 const statsStore = useStatsStore();
 const snackbar = useSnackbar();
-const hasStatus = ref(false);
+const hasError = ref(false);
 const stats = computed(() => statsStore.stats);
 const namespace = computed(() => namespacesStore.currentNamespace);
 const hasNamespace = computed(() => namespacesStore.namespaceList.length !== 0);
+const showNamespaceAdd = ref(false);
+
+const activeNamespaceDescription = computed(() => (
+  hasNamespace.value
+    ? "This is your active namespace. All devices, sessions and configurations are isolated within this namespace."
+    : `A namespace is a logical grouping that isolates your devices, sessions, and configurations from others.
+          Each namespace has its own unique Tenant ID used to register devices. 
+          You can create multiple namespaces to organize different projects, teams, or environments.`
+));
 
 const fetchStats = async () => {
   if (!hasNamespace.value) return;
@@ -196,29 +208,15 @@ const fetchStats = async () => {
   try {
     await statsStore.fetchStats();
   } catch (error: unknown) {
-    if (axios.isAxiosError(error)) {
-      const axiosError = error as AxiosError;
-      switch (true) {
-        case axiosError.response && axiosError.response?.status === 403: {
-          hasStatus.value = true;
-          break;
-        }
-        default: {
-          hasStatus.value = true;
-          snackbar.showError("Failed to load the home page.");
-          break;
-        }
-      }
-    }
+    hasError.value = true;
+    snackbar.showError("Failed to load the home page.");
     handleError(error);
   }
 };
 
-onMounted(async () => {
-  await fetchStats();
-});
+onMounted(async () => { await fetchStats(); });
 
 watch(hasNamespace, async (newValue) => { if (newValue) await fetchStats(); });
 
-defineExpose({ hasStatus });
+defineExpose({ hasError });
 </script>
diff --git a/ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 90209e1ccad..21830b1f288 100644
--- a/ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -43,11 +43,7 @@ exports[`AppBar Component > Renders the component 1`] = `
       </button>
       <!--teleport start-->
       <!--teleport end-->
-      <div class="v-badge" size="x-small" data-test="device-dropdown-badge">
-        <div class="v-badge__wrapper"><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
-          <transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light bg-success" style="bottom: calc(100% - 7px); left: calc(100% - 12px); display: none;" aria-atomic="true" aria-label="Badge" aria-live="polite" role="status">0</span></transition-stub>
-        </div>
-      </div>
+      <!--v-if-->
       <!--teleport start-->
       <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-14" aria-owns="v-menu-v-14" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
         <!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="test@example.com" data-test="user-icon"><div data-v-09753bb1="" class="v-responsive v-img v-img--booting" data-test="gravatar-image"><div class="v-responsive__sizer"></div><!----><transition-stub name="fade-transition" appear="false" persisted="false" css="true"><!----></transition-stub><!----><!----><!----><!----></div><!----><span class="v-avatar__underlay"></span>
diff --git a/ui/tests/components/QuickConnection/QuickConnection.spec.ts b/ui/tests/components/QuickConnection/QuickConnection.spec.ts
index 7eedb7bddf6..23e4060e1c2 100644
--- a/ui/tests/components/QuickConnection/QuickConnection.spec.ts
+++ b/ui/tests/components/QuickConnection/QuickConnection.spec.ts
@@ -69,9 +69,8 @@ describe("Quick Connection", () => {
       .reply(200, devices);
 
     wrapper = mount(QuickConnection, {
-      global: {
-        plugins: [vuetify, router, SnackbarPlugin],
-      },
+      global: { plugins: [vuetify, router, SnackbarPlugin] },
+      props: { disabled: false },
     });
   });
 
@@ -108,6 +107,20 @@ describe("Quick Connection", () => {
 
     dispatchEvent(event);
 
-    expect(wrapper.find('[data-test="quick-connection-open-btn"]').exists()).toBe(true);
+    expect(wrapper.vm.showDialog).toBe(true);
+  });
+
+  it("Disables the button when disabled prop is true", async () => {
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('[data-test="quick-connection-open-btn"]').attributes("disabled")).toBeDefined();
+  });
+
+  it("Ignores Ctrl + K keydown when disabled prop is true", async () => {
+    await wrapper.setProps({ disabled: true });
+    const event = new KeyboardEvent("keydown", { ctrlKey: true, key: "k" });
+
+    dispatchEvent(event);
+
+    expect(wrapper.vm.showDialog).toBe(false);
   });
 });
diff --git a/ui/tests/components/QuickConnection/__snapshots__/QuickConnection.spec.ts.snap b/ui/tests/components/QuickConnection/__snapshots__/QuickConnection.spec.ts.snap
index 8014273d78a..9e39953c858 100644
--- a/ui/tests/components/QuickConnection/__snapshots__/QuickConnection.spec.ts.snap
+++ b/ui/tests/components/QuickConnection/__snapshots__/QuickConnection.spec.ts.snap
@@ -1,18 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Quick Connection > Renders the component 1`] = `
-"<div data-v-136d2a2f=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" aria-label="Dialog Quick Connection" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Quick Connect </span>
+"<div data-v-136d2a2f=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Quick Connect</span>
     <!---->
     <!---->
   </button>
-  <div data-v-136d2a2f="">
-    <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--light v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
-      <!---->
-      <!---->
-    <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
+  <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--light v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
     <!---->
-    <!----></span> to Quick Connect! </p>
-  </div>
+    <!---->
+  <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
+  <!---->
+  <!----></span> to Quick Connect! </p>
   <!---->
   <!---->
 </div>"
diff --git a/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap b/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
index 38419792c38..320b59cd2d6 100644
--- a/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
+++ b/ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
@@ -31,16 +31,7 @@ exports[`App Layout Component > Renders the component 1`] = `
             <!---->
           </transition-stub>
         </header>
-        <div data-v-e7291ef4="" class="d-flex justify-center"><button data-v-e7291ef4="" type="button" class="v-btn v-btn--elevated v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test="save-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-            <!----><span class="v-btn__content" data-no-activator=""> Add Namespace </span>
-            <!---->
-            <!---->
-          </button>
-          <!---->
-          <!---->
-        </div>
-        <div data-v-e7291ef4="" class="v-list v-theme--dark bg-transparent v-list--density-compact v-list--one-line bg-v-theme-surface" tabindex="0" role="list" data-test="list"><a data-v-e7291ef4="" href="/" aria-disabled="true" class="v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2" role="link" data-test="list-item">
-            <!----><span class="v-list-item__underlay"></span>
+        <div data-v-e7291ef4="" class="v-list v-theme--dark bg-transparent v-list--density-compact v-list--one-line bg-v-theme-surface" tabindex="0" role="list" data-test="list"><a data-v-e7291ef4="" href="/" tabindex="-2" class="v-list-item v-list-item--link v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2" role="link" data-test="list-item"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
             <div class="v-list-item__prepend"><i data-v-e7291ef4="" class="mdi-home mdi v-icon notranslate v-theme--dark v-icon--size-default" aria-hidden="true" data-test="icon"></i>
               <div class="v-list-item__spacer"></div>
             </div>
@@ -247,18 +238,11 @@ exports[`App Layout Component > Renders the component 1`] = `
             </transition-stub>
           </div>
           <div data-v-e7291ef4="" class="v-col d-flex align-end justify-center">
-            <div data-v-136d2a2f="" data-v-e7291ef4=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" aria-label="Dialog Quick Connection" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Quick Connect </span>
+            <div data-v-136d2a2f="" data-v-e7291ef4=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-btn--disabled v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" disabled="" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Quick Connect</span>
                 <!---->
                 <!---->
               </button>
-              <div data-v-136d2a2f="">
-                <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--dark v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
-                  <!---->
-                  <!---->
-                <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
-                <!---->
-                <!----></span> to Quick Connect! </p>
-              </div>
+              <!--v-if-->
               <!---->
               <!---->
             </div>
@@ -288,7 +272,7 @@ exports[`App Layout Component > Renders the component 1`] = `
           <!---->
           <!---->
           <!--teleport start-->
-          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-9" aria-owns="v-menu-v-9"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-6" aria-owns="v-menu-v-6"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
             <!----><span class="v-btn__content" data-no-activator=""><div class="d-flex align-center ga-2"><span class="v-chip v-chip--label v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal text-uppercase" draggable="false"><!----><span class="v-chip__underlay"></span>
             <!---->
             <!---->
@@ -309,20 +293,16 @@ exports[`App Layout Component > Renders the component 1`] = `
         </ul>
       </div>
       <div class="v-spacer"></div>
-      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-13" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-10" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
           <!---->
           <!---->
         </button>
         <!--teleport start-->
         <!--teleport end-->
-        <div class="v-badge" size="x-small" data-test="device-dropdown-badge">
-          <div class="v-badge__wrapper"><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
-            <transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light bg-success" style="bottom: calc(100% - 7px); left: calc(100% - 12px); display: none;" aria-atomic="true" aria-label="Badge" aria-live="polite" role="status">0</span></transition-stub>
-          </div>
-        </div>
+        <!--v-if-->
         <!--teleport start-->
-        <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-21" aria-owns="v-menu-v-21" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-18" aria-owns="v-menu-v-18" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="" data-test="user-icon"><i data-v-09753bb1="" class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default text-surface" aria-hidden="true" data-test="gravatar-placeholder"></i><!----><span class="v-avatar__underlay"></span>
       </div></span>
       <!---->
@@ -342,7 +322,7 @@ exports[`App Layout Component > Renders the component 1`] = `
 </main>
 <!---->
 <!--teleport start-->
-<div class="v-overlay v-overlay--absolute v-overlay--contained v-theme--light v-locale--is-ltr align-center justify-center w-100 h-100" style="z-index: 2410;" data-v-e7291ef4="" data-test="overlay">
+<div class="v-overlay v-overlay--absolute v-overlay--contained v-theme--light v-locale--is-ltr align-center justify-center w-100 h-100" style="z-index: 2000;" data-v-e7291ef4="" data-test="overlay">
   <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
     <!---->
   </transition-stub>
diff --git a/ui/tests/views/Home.spec.ts b/ui/tests/views/Home.spec.ts
index d4569d974aa..28551bd3191 100644
--- a/ui/tests/views/Home.spec.ts
+++ b/ui/tests/views/Home.spec.ts
@@ -92,6 +92,25 @@ describe("Home", () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
 
+    it("renders the no namespace state correctly", async () => {
+      wrapper.unmount();
+      namespacesStore.$patch({
+        namespaceList: [],
+        currentNamespace: {},
+      });
+
+      wrapper = mount(Home, { global: { plugins: [vuetify, router, SnackbarPlugin] } });
+
+      await flushPromises();
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.text()).toContain("No Active Namespace");
+      expect(wrapper.text()).toContain(
+        "A namespace is a logical grouping that isolates your devices, sessions, and configurations from others.",
+      );
+      expect(wrapper.text()).toContain("You need to create or join a namespace");
+    });
+
     it("displays namespace information", async () => {
       await flushPromises();
 
@@ -179,7 +198,7 @@ describe("Home", () => {
 
       await flushPromises();
 
-      expect(wrapper.vm.hasStatus).toBe(true);
+      expect(wrapper.vm.hasError).toBe(true);
       expect(wrapper.find('[data-test="home-failed"]').exists()).toBe(true);
       expect(wrapper.find('[data-test="home-failed"]').text()).toContain(
         "Something is wrong, try again!",
@@ -199,7 +218,7 @@ describe("Home", () => {
 
       await flushPromises();
 
-      expect(wrapper.vm.hasStatus).toBe(true);
+      expect(wrapper.vm.hasError).toBe(true);
       expect(wrapper.find('[data-test="home-failed"]').exists()).toBe(true);
     });
 
@@ -216,14 +235,14 @@ describe("Home", () => {
 
       await flushPromises();
 
-      expect(wrapper.vm.hasStatus).toBe(true);
+      expect(wrapper.vm.hasError).toBe(true);
       expect(wrapper.find('[data-test="home-failed"]').exists()).toBe(true);
     });
 
     it("can manually toggle error state", async () => {
       expect(wrapper.find('[data-test="home-failed"]').exists()).toBe(false);
 
-      wrapper.vm.hasStatus = true;
+      wrapper.vm.hasError = true;
       await nextTick();
 
       expect(wrapper.find('[data-test="home-failed"]').exists()).toBe(true);
diff --git a/ui/tests/views/__snapshots__/Home.spec.ts.snap b/ui/tests/views/__snapshots__/Home.spec.ts.snap
index 11112be6f26..929210ba5d0 100644
--- a/ui/tests/views/__snapshots__/Home.spec.ts.snap
+++ b/ui/tests/views/__snapshots__/Home.spec.ts.snap
@@ -2,214 +2,213 @@
 
 exports[`Home > Component Rendering > renders the component successfully 1`] = `
 "<div>
-  <!-- Namespace Info Card -->
-  <div class="v-row">
-    <div class="v-col v-col-12">
-      <div class="v-card v-theme--light v-card--density-default elevation-0 rounded-0 v-card--variant-elevated bg-transparent mb-6">
-        <!---->
-        <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 class="v-card v-theme--light v-card--density-default elevation-0 rounded-0 v-card--variant-elevated bg-transparent mb-6">
+    <!---->
+    <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>
-        </div>
-        <!---->
+        </transition-stub>
         <!---->
-        <div class="v-row">
-          <div class="v-col-md-6 v-col-12">
-            <div class="d-flex align-start">
-              <div class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mr-4" style="width: 48px; height: 48px;"><i class="mdi-home mdi v-icon notranslate v-theme--light" style="font-size: 32px; height: 32px; width: 32px;" aria-hidden="true"></i>
-                <!----><span class="v-avatar__underlay"></span>
-              </div>
-              <div>
-                <div class="text-overline text-medium-emphasis mb-1"> Home </div>
-                <div class="text-h5 font-weight-bold mb-2">test</div>
-                <div class="text-body-2 text-medium-emphasis"> This is your active namespace. All devices, sessions and configurations are isolated within this namespace. </div>
-              </div>
-            </div>
+      </div>
+    </div>
+    <!---->
+    <!---->
+    <div class="v-row">
+      <div class="v-col-md-6 v-col-12">
+        <div class="d-flex align-start">
+          <div class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mr-4" style="width: 48px; height: 48px;"><i class="mdi-home mdi v-icon notranslate v-theme--light" style="font-size: 32px; height: 32px; width: 32px;" aria-hidden="true"></i>
+            <!----><span class="v-avatar__underlay"></span>
           </div>
-          <div class="v-col-md-6 v-col-12">
-            <div class="v-card v-theme--light v-card--density-default v-card--variant-tonal pa-4">
+          <div>
+            <div class="text-overline text-medium-emphasis mb-1">Home</div>
+            <div class="text-h5 font-weight-bold mb-2">test</div>
+            <div class="text-body-2 text-medium-emphasis">This is your active namespace. All devices, sessions and configurations are isolated within this namespace.</div>
+          </div>
+        </div>
+      </div>
+      <div class="v-col-md-6 v-col-12">
+        <div class="v-card v-theme--light v-card--density-default v-card--variant-tonal pa-4">
+          <!---->
+          <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-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 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>
-              </div>
+              </transition-stub>
               <!---->
-              <!---->
-              <div class="text-overline text-medium-emphasis mb-2"> TENANT ID </div>
-              <div class="d-flex align-center justify-space-between"><code class="text-primary" data-test="tenant-info-text">fake-tenant-data</code>
-                <div><button type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-small v-btn--variant-elevated" data-test="copy-tenant-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-content-copy mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Copy </span>
-                    <!---->
-                    <!---->
-                  </button>
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div>
+            <div class="text-overline text-medium-emphasis mb-2">TENANT ID</div>
+            <div class="d-flex align-center justify-space-between"><code class="text-primary" data-test="tenant-info-text">fake-tenant-data</code>
+              <div><button type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-small v-btn--variant-elevated" data-test="copy-tenant-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-content-copy mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Copy </span>
                   <!---->
                   <!---->
-                </div>
+                </button>
+                <!---->
+                <!---->
               </div>
-              <div class="text-caption text-medium-emphasis mt-2"> Use this ID to register new devices to this namespace </div>
-              <!---->
-              <!----><span class="v-card__underlay"></span>
             </div>
+            <div class="text-caption text-medium-emphasis mt-2">Use this ID to register new devices to this namespace</div>
           </div>
+          <!---->
+          <!----><span class="v-card__underlay"></span>
         </div>
-        <!---->
-        <!----><span class="v-card__underlay"></span>
       </div>
     </div>
-  </div><!-- Devices Section -->
-  <div class="v-row">
-    <div class="v-col v-col-12 d-flex align-center mb-2"><i class="mdi-devices mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true"></i>
-      <h2 class="text-h6"> Devices </h2>
-    </div>
+    <!---->
+    <!----><span class="v-card__underlay"></span>
   </div>
-  <div class="v-row">
-    <div class="v-col-md-3 v-col-12">
-      <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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>
+    <div class="v-row">
+      <div class="v-col v-col-12 d-flex align-center mb-2"><i class="mdi-devices mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true"></i>
+        <h2 class="text-h6">Devices</h2>
+      </div>
+    </div>
+    <div class="v-row">
+      <div class="v-col-md-3 v-col-12">
+        <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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>
+          <!---->
+          <!---->
+          <div class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-check mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
+            <!----><span class="v-avatar__underlay"></span>
+          </div>
+          <div class="v-card-title text-overline text-medium-emphasis mb-2">Accepted Devices</div>
+          <div class="v-card-subtitle text-h2 font-weight-bold mb-4">5</div><a href="/devices" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator="">View all devices</span>
             <!---->
-            <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-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-check mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
-          <!----><span class="v-avatar__underlay"></span>
+          </a>
+          <!---->
+          <!----><span class="v-card__underlay"></span>
         </div>
-        <div class="v-card-title text-overline text-medium-emphasis mb-2">Accepted Devices</div>
-        <div class="v-card-subtitle text-h2 font-weight-bold mb-4">5</div><a href="/devices" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!----><span class="v-btn__content" data-no-activator="">View all devices</span>
+      </div>
+      <div class="v-col-md-3 v-col-12">
+        <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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>
           <!---->
-        </a>
-        <!---->
-        <!----><span class="v-card__underlay"></span>
-      </div>
-    </div>
-    <div class="v-col-md-3 v-col-12">
-      <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-lan-connect mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
+            <!----><span class="v-avatar__underlay"></span>
+          </div>
+          <div class="v-card-title text-overline text-medium-emphasis mb-2">Online Devices</div>
+          <div class="v-card-subtitle text-h2 font-weight-bold mb-4">3</div><a href="/devices" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator="">View Online Devices</span>
             <!---->
-            <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-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-lan-connect mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
-          <!----><span class="v-avatar__underlay"></span>
+          </a>
+          <!---->
+          <!----><span class="v-card__underlay"></span>
         </div>
-        <div class="v-card-title text-overline text-medium-emphasis mb-2">Online Devices</div>
-        <div class="v-card-subtitle text-h2 font-weight-bold mb-4">3</div><a href="/devices" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!----><span class="v-btn__content" data-no-activator="">View Online Devices</span>
+      </div>
+      <div class="v-col-md-3 v-col-12">
+        <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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>
           <!---->
           <!---->
-        </a>
-        <!---->
-        <!----><span class="v-card__underlay"></span>
-      </div>
-    </div>
-    <div class="v-col-md-3 v-col-12">
-      <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-v-theme-surface text-center h-100 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-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-clock-outline mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
+            <!----><span class="v-avatar__underlay"></span>
+          </div>
+          <div class="v-card-title text-overline text-medium-emphasis mb-2">Pending Devices</div>
+          <div class="v-card-subtitle text-h2 font-weight-bold mb-4">1</div><a href="/devices/pending" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator="">Approve Devices</span>
             <!---->
-            <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-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-clock-outline mdi v-icon notranslate v-theme--light" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
-          <!----><span class="v-avatar__underlay"></span>
+          </a>
+          <!---->
+          <!----><span class="v-card__underlay"></span>
         </div>
-        <div class="v-card-title text-overline text-medium-emphasis mb-2">Pending Devices</div>
-        <div class="v-card-subtitle text-h2 font-weight-bold mb-4">1</div><a href="/devices/pending" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-small v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!----><span class="v-btn__content" data-no-activator="">Approve Devices</span>
+      </div>
+      <div class="v-col-md-3 v-col-12">
+        <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-transparent text-center h-100 border border-dashed">
           <!---->
+          <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>
           <!---->
-        </a>
-        <!---->
-        <!----><span class="v-card__underlay"></span>
-      </div>
-    </div>
-    <div class="v-col-md-3 v-col-12">
-      <div class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6 bg-transparent text-center h-100 border border-dashed">
-        <!---->
-        <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-avatar v-theme--dark bg-surface-variant v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-developer-board mdi v-icon notranslate v-theme--dark text-primary" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
+            <!----><span class="v-avatar__underlay"></span>
+          </div>
+          <div class="v-card-title text-h6 font-weight-bold mb-2">Add a new device</div>
+          <div class="v-card-subtitle text-body-2 text-medium-emphasis mb-4 text-wrap"> Register new devices to this namespace and start managing remote connections </div><button tabindex="0" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test="device-add-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span class="v-btn__content" data-no-activator="">Add Device</span>
             <!---->
-            <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-avatar v-theme--dark bg-surface-variant v-avatar--density-default v-avatar--variant-flat mb-4" style="width: 64px; height: 64px;"><i class="mdi-developer-board mdi v-icon notranslate v-theme--dark text-primary" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i>
-          <!----><span class="v-avatar__underlay"></span>
-        </div>
-        <div class="v-card-title text-h6 font-weight-bold mb-2"> Add a new device </div>
-        <div class="v-card-subtitle text-body-2 text-medium-emphasis mb-4 text-wrap"> Register new devices to this namespace and start managing remote connections </div><button tabindex="0" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test="device-add-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!----><span class="v-btn__content" data-no-activator="">Add Device</span>
+          </button>
           <!---->
           <!---->
-        </button>
-        <!---->
-        <!---->
-        <!---->
-        <!----><span class="v-card__underlay"></span>
+          <!---->
+          <!----><span class="v-card__underlay"></span>
+        </div>
       </div>
     </div>
   </div>