diff --git a/src/app/(main)/chat/page.tsx b/src/app/(main)/chat/page.tsx
index 0e12e71..27a72ab 100644
--- a/src/app/(main)/chat/page.tsx
+++ b/src/app/(main)/chat/page.tsx
@@ -18,7 +18,7 @@ export const useChatParams = () => {
   return { id, characterId };
 };
 
-export default function ChatPage() {
+function CharacterChatPage() {
   const { id, characterId } = useChatParams();
   const [settingOpen, setSettingOpen] = useState(false);
   const switchToChannel = useStreamChatStore((s) => s.switchToChannel);
@@ -52,3 +52,4 @@ export default function ChatPage() {
     </div>
   );
 }
+export default CharacterChatPage;
diff --git a/src/app/(main)/chat/stream-chat.ts b/src/app/(main)/chat/stream-chat.ts
index 454ad26..b215682 100644
--- a/src/app/(main)/chat/stream-chat.ts
+++ b/src/app/(main)/chat/stream-chat.ts
@@ -166,6 +166,7 @@ export const useStreamChatStore = create<StreamChatStore>((set, get) => ({
   async switchToChannel(id: string) {
     const { client, user } = get();
     const channel = client!.channel('messaging', id);
+    set({ currentChannel: channel, messages: [] });
     const result = await protect(() =>
       channel.query({
         messages: { limit: 100 },
diff --git a/src/layout/BasicLayout/Topbar.tsx b/src/layout/BasicLayout/Topbar.tsx
index 70d1cfc..0919c7b 100644
--- a/src/layout/BasicLayout/Topbar.tsx
+++ b/src/layout/BasicLayout/Topbar.tsx
@@ -80,7 +80,7 @@ function Topbar() {
     if (!response || isLoading) return null;
 
     return (
-      <div className="flex items-center">
+      <div className="flex items-center gap-3">
         <LocaleSwitch key="locale-switch" />
         {user && <Notice key="notice" />}
         {user && (
diff --git a/src/layout/BasicLayout/components/Notice.tsx b/src/layout/BasicLayout/components/Notice.tsx
index a9ed8f9..b2e21f0 100644
--- a/src/layout/BasicLayout/components/Notice.tsx
+++ b/src/layout/BasicLayout/components/Notice.tsx
@@ -38,19 +38,17 @@ const Notice = () => {
   return (
     <>
       {user && (
-        <div className="px-4">
-          <div
-            className="hover:bg-surface-element-hover flex cursor-pointer items-center gap-3 rounded-full p-2 transition-colors"
-            onClick={() => setIsDrawerOpen(true)}
-          >
-            <div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center">
-              <Image src="/icons/notice.svg" alt="Notice" width={32} height={32} />
-              <Badge count={data?.unRead} className="absolute -top-2 -right-2" />
-            </div>
-            {/* {actualIsExpanded && (
+        <div
+          className="hover:bg-surface-element-hover flex cursor-pointer items-center gap-3 rounded-full p-2 transition-colors"
+          onClick={() => setIsDrawerOpen(true)}
+        >
+          <div className="relative flex h-8 w-8 flex-shrink-0 items-center justify-center">
+            <Image src="/icons/notice.svg" alt="Notice" width={32} height={32} />
+            <Badge count={data?.unRead} className="absolute -top-2 -right-2" />
+          </div>
+          {/* {actualIsExpanded && (
               <span className="txt-label-m text-txt-primary-normal flex-1">Notice</span>
             )} */}
-          </div>
         </div>
       )}
       <NoticeDrawer isOpen={isDrawerOpen} onOpenChange={setIsDrawerOpen} />