diff --git a/components/ActiveStatus.vue b/components/ActiveStatus.vue
new file mode 100644
index 0000000..661a080
--- /dev/null
+++ b/components/ActiveStatus.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { useActiveChannel } from "@/composables/useActiveChannel";
+const { pusherClient } = useNuxtApp();
+useActiveChannel(pusherClient);
+</script>
+<template></template>
diff --git a/components/conversations/ConversationList.vue b/components/conversations/ConversationList.vue
index 5398300..ae7fa0f 100644
--- a/components/conversations/ConversationList.vue
+++ b/components/conversations/ConversationList.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
       )
     "
   >
-    <div class="px-5">
+    <div class="px-5 space-y-1">
       <div class="flex justify-between mb-4 pt-4">
         <div class="text-2xl font-bold text-neutral-800">Messages</div>
         <slot />
diff --git a/components/users/UsersList.vue b/components/users/UsersList.vue
index 6eca03f..c89e4d5 100644
--- a/components/users/UsersList.vue
+++ b/components/users/UsersList.vue
@@ -13,7 +13,7 @@ const { items } = defineProps<UserListProps>();
   <aside
     class="fixed inset-y-0 pb-20 lg:pb-0 lg:left-20 lg:w-80 lg:block overflow-y-auto border-r border-gray-200 block w-full left-0"
   >
-    <div class="px-5">
+    <div class="px-5 space-y-1">
       <div class="flex-col">
         <div class="text-2xl font-bold text-neutral-800 py-4">People</div>
       </div>
diff --git a/composables/useActiveChannel.ts b/composables/useActiveChannel.ts
index 68b3045..f6caf35 100644
--- a/composables/useActiveChannel.ts
+++ b/composables/useActiveChannel.ts
@@ -8,25 +8,26 @@ export const useActiveChannel = (pusherClient) => {
     const activeChannel = ref<Channel | null>(null);
 
     onMounted(() => {
-        let channel = activeChannel;
 
-        if (!channel.value) {
+        let channel = activeChannel.value;
+
+        if (!channel) {
             channel = pusherClient.subscribe('presence-messenger');
             activeChannel.value = channel;
         }
 
-        channel.bind("pusher:subscription_succeeded", (members: Members) => {
+        channel?.bind("pusher:subscription_succeeded", (members: Members) => {
             const initialMembers: string[] = [];
 
             members.each((member: Record<string, any>) => initialMembers.push(member.id));
             set(initialMembers);
         });
 
-        channel.bind("pusher:member_added", (member: Record<string, any>) => {
+        channel?.bind("pusher:member_added", (member: Record<string, any>) => {
             add(member.id)
         });
 
-        channel.bind("pusher:member_removed", (member: Record<string, any>) => {
+        channel?.bind("pusher:member_removed", (member: Record<string, any>) => {
             remove(member.id);
         });
     })
diff --git a/layouts/conversations.vue b/layouts/conversations.vue
index 399fda0..ba62172 100644
--- a/layouts/conversations.vue
+++ b/layouts/conversations.vue
@@ -21,6 +21,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 </script>
 
 <template>
+  <ActiveStatus />
   <GroupChatModal
     v-if="users"
     :users="users"
@@ -44,7 +45,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 
     <div
       :class="clsx('lg:pl-80 h-full lg:block', isOpen ? 'block' : 'hidden')"
-      v-show="!pending"
+      v-if="!pending"
     >
       <slot />
     </div>
diff --git a/layouts/users.vue b/layouts/users.vue
index 98cff03..a6dd723 100644
--- a/layouts/users.vue
+++ b/layouts/users.vue
@@ -10,6 +10,7 @@ const { data: users } = useLazyAsyncData("users", () => $fetch("/api/users"), {
 </script>
 
 <template>
+  <ActiveStatus />
   <Sidebar>
     <UsersList :items="users" />
     <div :class="clsx('lg:pl-80 h-full lg:block', isOpen ? 'block' : 'hidden')">
diff --git a/pages/conversations/index.vue b/pages/conversations/index.vue
index 863505b..e48cc84 100644
--- a/pages/conversations/index.vue
+++ b/pages/conversations/index.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import EmptyState from "@/components/EmptyState.vue";
-import { useActiveChannel } from "@/composables/useActiveChannel";
 
 definePageMeta({ middleware: "auth", layout: "conversations" });
-
 useHead({
   title: "Conversations | Messenger",
 });
-
-const { pusherClient } = useNuxtApp();
-
-useActiveChannel(pusherClient);
 </script>
 
 <template>
diff --git a/pages/users/index.vue b/pages/users/index.vue
index 8de3bc7..1890800 100644
--- a/pages/users/index.vue
+++ b/pages/users/index.vue
@@ -2,12 +2,6 @@
 import EmptyState from "@/components/EmptyState.vue";
 
 definePageMeta({ middleware: "auth", layout: "users" });
-
-import { useActiveChannel } from "@/composables/useActiveChannel";
-
-const { pusherClient } = useNuxtApp();
-useActiveChannel(pusherClient);
-
 useHead({
   title: "Users | Messenger",
 });