diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx
index 7ace3eca..db195152 100644
--- a/src/app/channel/components/item.tsx
+++ b/src/app/channel/components/item.tsx
@@ -19,7 +19,12 @@ export default function ChannelsListItem({ data }: { data: any }) {
         pageID === data.event_id ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
       )}
     >
-      <div className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
+      <div
+        className={twMerge(
+          'inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800',
+          pageID === data.event_id ? 'dark:bg-zinc-800 group-hover:dark:bg-zinc-700' : ''
+        )}
+      >
         <span className="text-xs text-zinc-200">#</span>
       </div>
       <div>
diff --git a/src/app/channel/components/list.tsx b/src/app/channel/components/list.tsx
index 555e96f2..a8b9b59e 100644
--- a/src/app/channel/components/list.tsx
+++ b/src/app/channel/components/list.tsx
@@ -11,16 +11,16 @@ export default function ChannelsList() {
   const { data, error }: any = useSWR('channels', fetcher);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-px">
       {!data || error ? (
         <>
           <div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
             <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
-            <div className="h-3 w-full animate-pulse bg-zinc-800"></div>
+            <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800"></div>
           </div>
           <div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
             <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
-            <div className="h-3 w-full animate-pulse bg-zinc-800"></div>
+            <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800"></div>
           </div>
         </>
       ) : (
diff --git a/src/app/channel/components/updateModal.tsx b/src/app/channel/components/updateModal.tsx
index 7811190f..cf5e6385 100644
--- a/src/app/channel/components/updateModal.tsx
+++ b/src/app/channel/components/updateModal.tsx
@@ -9,7 +9,7 @@ import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/date';
 import { useActiveAccount } from '@utils/hooks/useActiveAccount';
-import { getChannel, updateChannelMetadata } from '@utils/storage';
+import { getChannel } from '@utils/storage';
 
 import { Dialog, Transition } from '@headlessui/react';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -58,15 +58,13 @@ export default function ChannelUpdateModal({ id }: { id: string }) {
         created_at: dateToUnix(),
         kind: 41,
         pubkey: account.pubkey,
-        tags: [],
+        tags: [['e', id]],
       };
       event.id = getEventHash(event);
       event.sig = signEvent(event, account.privkey);
 
       // publish channel
       pool.publish(event, WRITEONLY_RELAYS);
-      // update channel metadata in database
-      updateChannelMetadata(event.id, event.content);
       // reset form
       reset();
       // close modal
diff --git a/src/app/channel/hooks/useChannelProfile.tsx b/src/app/channel/hooks/useChannelProfile.tsx
index 2f7bc9ee..82c29596 100644
--- a/src/app/channel/hooks/useChannelProfile.tsx
+++ b/src/app/channel/hooks/useChannelProfile.tsx
@@ -2,10 +2,10 @@ import { RelayContext } from '@shared/relayProvider';
 
 import { READONLY_RELAYS } from '@stores/constants';
 
-import { getChannel } from '@utils/storage';
+import { getChannel, updateChannelMetadata } from '@utils/storage';
 
 import { useContext } from 'react';
-import useSWR from 'swr';
+import useSWR, { useSWRConfig } from 'swr';
 import useSWRSubscription from 'swr/subscription';
 
 const fetcher = async ([, id]) => {
@@ -20,39 +20,37 @@ const fetcher = async ([, id]) => {
 export function useChannelProfile(id: string, channelPubkey: string) {
   const pool: any = useContext(RelayContext);
 
-  const { data: cache, isLoading } = useSWR(['channel-cache-profile', id], fetcher);
-  const { data, error } = useSWRSubscription(
-    !isLoading && cache ? ['channel-profile', id] : null,
-    ([, key], { next }) => {
-      // subscribe to channel
-      const unsubscribe = pool.subscribe(
-        [
-          {
-            '#e': [key],
-            authors: [channelPubkey],
-            kinds: [41],
-          },
-        ],
-        READONLY_RELAYS,
-        (event: { content: string }) => {
-          next(null, JSON.parse(event.content));
-        },
-        undefined,
-        undefined,
+  const { mutate } = useSWRConfig();
+  const { data, isLoading } = useSWR(['channel-metadata', id], fetcher);
+
+  useSWRSubscription(!isLoading && data ? ['channel-metadata', id] : null, ([, key], {}) => {
+    // subscribe to channel
+    const unsubscribe = pool.subscribe(
+      [
         {
-          unsubscribeOnEose: true,
-        }
-      );
+          '#e': [key],
+          authors: [channelPubkey],
+          kinds: [41],
+        },
+      ],
+      READONLY_RELAYS,
+      (event: { content: string }) => {
+        // update in local database
+        updateChannelMetadata(key, event.content);
+        // revaildate
+        mutate(['channel-metadata', key]);
+      },
+      undefined,
+      undefined,
+      {
+        unsubscribeOnEose: true,
+      }
+    );
 
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
+    return () => {
+      unsubscribe();
+    };
+  });
 
-  if (!data || error) {
-    return cache;
-  } else {
-    return data;
-  }
+  return data;
 }