diff --git a/components/rooms/RoomButtonGroup.tsx b/components/rooms/RoomButtonGroup.tsx
index bfd07215..de81896e 100644
--- a/components/rooms/RoomButtonGroup.tsx
+++ b/components/rooms/RoomButtonGroup.tsx
@@ -18,6 +18,7 @@ function RoomButtonGroup(props: RoomButtonGroupProps) {
     isHost,
     isReady,
   } = props;
+
   return (
     <div className="flex items-center gap-4 m-4">
       <Button
diff --git a/components/rooms/RoomChatroom/ChatMessage.test.tsx b/components/rooms/RoomChatroom/ChatMessage.test.tsx
deleted file mode 100644
index 61d96a16..00000000
--- a/components/rooms/RoomChatroom/ChatMessage.test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import ChatMessage, { ChatMessageProps } from "./ChatMessage";
-import { TEXT_COLORS_CLASS } from "./ChatMessage";
-
-const TEST_USER_MESSAGE_PROPS = {
-  from: { id: "test_user", nickname: "test_nickname" },
-  content: "test textContent",
-  timestamp: new Date().toISOString(),
-  target: "LOBBY",
-};
-
-const TEST_SYSTEM_MESSAGE_PROPS: ChatMessageProps = {
-  from: "SYSTEM",
-  content: "test textContent",
-  timestamp: new Date().toISOString(),
-  target: "LOBBY",
-};
-
-describe("ChatMessage", () => {
-  it('should render correct text with the given "content" prop', () => {
-    render(<ChatMessage {...TEST_USER_MESSAGE_PROPS} />);
-    const messageElement = screen.getByText(TEST_USER_MESSAGE_PROPS.content);
-
-    expect(messageElement).toBeInTheDocument();
-  });
-
-  it('should render correct text color when prop "from" is "SYSTEM"', () => {
-    const { container } = render(
-      <ChatMessage {...TEST_SYSTEM_MESSAGE_PROPS} />
-    );
-    const rootElement = container.querySelector("div");
-
-    expect(rootElement).toHaveClass(TEXT_COLORS_CLASS.SYSTEM);
-  });
-
-  it('should render correct text color when prop "from" is "USER"', () => {
-    const { container } = render(<ChatMessage {...TEST_USER_MESSAGE_PROPS} />);
-    const rootElement = container.querySelector("div");
-
-    expect(rootElement).toHaveClass(TEXT_COLORS_CLASS.USER);
-  });
-
-  it('should render correct nickname when prop "from" is "USER"', () => {
-    const { baseElement } = render(
-      <ChatMessage {...TEST_USER_MESSAGE_PROPS} />
-    );
-
-    expect(baseElement.textContent).toMatch(
-      TEST_USER_MESSAGE_PROPS.from.nickname
-    );
-  });
-});
diff --git a/components/rooms/RoomChatroom/ChatMessage.tsx b/components/rooms/RoomChatroom/ChatMessage.tsx
deleted file mode 100644
index 63a8a601..00000000
--- a/components/rooms/RoomChatroom/ChatMessage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { MessageType } from ".";
-import { cn } from "@/lib/utils";
-import React, { JSX, ComponentProps } from "react";
-
-export const TEXT_COLORS_CLASS = {
-  SYSTEM: "text-[#2F88FF]",
-  USER: "text-[#A8A8A8]",
-};
-
-function ChatMessage(props: MessageType): JSX.Element {
-  const textColorClass =
-    props.from === "SYSTEM" ? TEXT_COLORS_CLASS.SYSTEM : TEXT_COLORS_CLASS.USER;
-
-  const senderText = props.from === "SYSTEM" ? "" : props.from.nickname + ": ";
-
-  return (
-    <div className={cn("text-sm text-left", textColorClass)}>
-      <span>{senderText}</span>
-      <span>{props.content}</span>
-    </div>
-  );
-}
-export type ChatMessageProps = ComponentProps<typeof ChatMessage>;
-
-export default ChatMessage;
diff --git a/components/rooms/RoomChatroom/RoomChatroom.test.tsx b/components/rooms/RoomChatroom/RoomChatroom.test.tsx
deleted file mode 100644
index 97840848..00000000
--- a/components/rooms/RoomChatroom/RoomChatroom.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import RoomChatroom from "./RoomChatroom";
-
-describe("RoomChatroom", () => {
-  // mock scrollTo fn
-  const scrollToMock = jest.fn();
-  const originalScrollTo = window.HTMLElement.prototype.scrollTo;
-  window.HTMLElement.prototype.scrollTo = scrollToMock;
-
-  it("should clean the input value when click submit button", () => {
-    const { getByRole, getByText } = render(<RoomChatroom roomId="test" />);
-
-    const textarea = getByRole("textarea") as HTMLTextAreaElement;
-    const submitButton = getByText("發送");
-
-    fireEvent.change(textarea, { target: { value: "測試輸入" } });
-    fireEvent.click(submitButton);
-
-    expect(textarea.value).toBe("");
-  });
-
-  it("should clean the input value when keydown Enter", () => {
-    const { getByRole } = render(<RoomChatroom roomId="test" />);
-    const textarea = getByRole("textarea") as HTMLTextAreaElement;
-
-    fireEvent.change(textarea, { target: { value: "ABC" } });
-    fireEvent.keyDown(textarea, { code: "Enter" });
-
-    expect(textarea.value).toBe("");
-  });
-
-  it("shouldn't clean the input value when keydown shift + Enter", () => {
-    const { getByRole } = render(<RoomChatroom roomId="test" />);
-    const textarea = getByRole("textarea") as HTMLTextAreaElement;
-
-    fireEvent.change(textarea, { target: { value: "ABC" } });
-    fireEvent.keyDown(textarea, { code: "Enter", shiftKey: true });
-
-    expect(textarea.value).toBe("ABC");
-  });
-
-  it("shouldn't clean the input value when keydown Enter, but key is 'Process' ", () => {
-    const { getByRole } = render(<RoomChatroom roomId="test" />);
-    const textarea = getByRole("textarea") as HTMLTextAreaElement;
-
-    fireEvent.change(textarea, { target: { value: "ABC" } });
-    fireEvent.keyDown(textarea, { code: "Enter", key: "Process" });
-
-    expect(textarea.value).toBe("ABC");
-
-    // reset to origin scrollTo fn
-    window.HTMLElement.prototype.scrollTo = originalScrollTo;
-  });
-});
diff --git a/components/rooms/RoomChatroom/RoomChatroom.tsx b/components/rooms/RoomChatroom/RoomChatroom.tsx
deleted file mode 100644
index a0698a90..00000000
--- a/components/rooms/RoomChatroom/RoomChatroom.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useState, ChangeEvent, KeyboardEvent, useRef, useEffect } from "react";
-import Button from "@/components/shared/Button";
-import ChatMessage from "./ChatMessage";
-import { MessageType } from ".";
-import useChatroom from "@/hooks/context/useChatroom";
-import useSocketCore from "@/hooks/context/useSocketCore";
-
-type RoomChatroom = {
-  roomId: string;
-};
-
-export default function RoomChatroom({ roomId }: RoomChatroom) {
-  const { lastMessage, sendChatMessage, joinChatroom, leaveChatroom } =
-    useChatroom();
-  const { socket } = useSocketCore();
-  const scrollbarRef = useRef<HTMLDivElement | null>(null);
-  const [inputValue, setInputValue] = useState<string>("");
-  const [messageList, setMessageList] = useState<MessageType[]>([]);
-
-  // join chatroom by roomId
-  useEffect(() => {
-    if (!roomId) return;
-    if (!socket || !socket.connected) return;
-    joinChatroom(roomId);
-    return () => leaveChatroom(roomId);
-  }, [joinChatroom, leaveChatroom, roomId, socket, socket?.connected]);
-
-  // update message list while received new message from websocket
-  useEffect(() => {
-    if (!lastMessage || !roomId) return;
-    if (lastMessage.target === `ROOM_${roomId}`) {
-      setMessageList((prev) => [...prev, lastMessage]);
-    }
-  }, [lastMessage, roomId]);
-
-  // scroll to bottom when messageList updated
-  useEffect(() => {
-    scrollbarRef.current?.scrollTo({
-      top: scrollbarRef.current.scrollHeight,
-    });
-  }, [messageList]);
-
-  function handleTextChange(event: ChangeEvent<HTMLTextAreaElement>) {
-    setInputValue(event.target.value);
-  }
-
-  function handleInputKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
-    if (!event.shiftKey && event.code === "Enter" && event.key !== "Process") {
-      event.preventDefault();
-      handleSubmitText();
-    }
-  }
-
-  function handleSubmitText() {
-    if (!inputValue) return;
-    const data: Pick<MessageType, "content" | "target"> = {
-      content: inputValue,
-      target: `ROOM_${roomId}`,
-    };
-    sendChatMessage(data);
-    setInputValue("");
-  }
-  return (
-    <div className="h-full flex flex-col grow">
-      <div
-        className="scrollbar border border-gray2d rounded-t-[10px] py-[9px] px-3 overflow-y-auto h-[137px] snap-end"
-        ref={scrollbarRef}
-      >
-        {messageList.map((msg, index) => (
-          <ChatMessage {...msg} key={msg.timestamp + index} />
-        ))}
-      </div>
-      <div className="py-[5px] px-[7px] flex bg-transparent border border-t-0 rounded-b-lg">
-        <textarea
-          role="textarea"
-          className="w-full bg-transparent resize-none focus:outline-none text-sm px-[13px] py-[9px] h-[38px] scrollbar text-white"
-          value={inputValue}
-          onChange={handleTextChange}
-          onKeyDown={handleInputKeyDown}
-        />
-        <Button
-          type="button"
-          variant="primary"
-          className=" w-32 flex justify-center rounded-l-none"
-          onClick={handleSubmitText}
-        >
-          發送
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/components/rooms/RoomChatroom/index.ts b/components/rooms/RoomChatroom/index.ts
deleted file mode 100644
index 56ee5472..00000000
--- a/components/rooms/RoomChatroom/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { UserInfo } from "@/requests/users";
-import RoomChatroom from "./RoomChatroom";
-
-type User = Pick<UserInfo, "id" | "nickname">;
-
-export type MessageType = {
-  /** The source of the message. */
-  from: "SYSTEM" | User;
-  /** The content of the user message. */
-  content: string;
-  /** The recipient of the message.
-   * @ "LOBBY" | "ROOM_[:roomId]"  -
-   */
-  target: string;
-  /** The timestamp of the message. */
-  timestamp: string;
-};
-
-export default RoomChatroom;
diff --git a/components/shared/Chat/v2/Chat.tsx b/components/shared/Chat/v2/Chat.tsx
index 43f1b329..50edd911 100644
--- a/components/shared/Chat/v2/Chat.tsx
+++ b/components/shared/Chat/v2/Chat.tsx
@@ -9,18 +9,22 @@ import Icon from "../../Icon";
 
 export type ChatProps = {
   userId: string;
+  roomId?: string;
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
   maxHeight?: string;
+  onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
 export default function Chat({
   userId,
+  roomId,
   lobbyMessages,
   friendList,
   roomMessages,
   maxHeight = "calc(100vh - 168px)",
+  onSubmit,
 }: Readonly<ChatProps>) {
   const [messages, setMessages] = useState(lobbyMessages);
   const [target, setTarget] = useState<[ChatTab["id"], string | null]>([
@@ -64,9 +68,9 @@ export default function Chat({
   const handleToggleTarget = (id: FriendType["target"]) =>
     setTarget(["friend", id]);
 
-  const handleSubmit = (message: MessageType) => {
+  const handleSubmit = (message: Pick<MessageType, "content" | "target">) => {
     if (activeTab === "friend" && !friendRoom) return;
-    setMessages((pre) => [...pre, message]);
+    onSubmit(message);
   };
 
   return (
@@ -108,7 +112,7 @@ export default function Chat({
           )}
         </div>
         <ChatInput
-          userId={userId}
+          roomId={roomId}
           onSubmit={handleSubmit}
           disabled={isFriendList}
         />
diff --git a/components/shared/Chat/v2/ChatInput.tsx b/components/shared/Chat/v2/ChatInput.tsx
index 868dafb3..f49bfb44 100644
--- a/components/shared/Chat/v2/ChatInput.tsx
+++ b/components/shared/Chat/v2/ChatInput.tsx
@@ -4,13 +4,13 @@ import Icon from "../../Icon";
 import type { MessageType } from "./ChatMessages";
 
 type ChatInputProps = {
-  userId: string;
+  roomId?: string;
   disabled: boolean;
-  onSubmit: (message: MessageType) => void;
+  onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
 export default function ChatInput({
-  userId,
+  roomId,
   disabled,
   onSubmit,
 }: Readonly<ChatInputProps>) {
@@ -24,8 +24,7 @@ export default function ChatInput({
     if (!content) return;
     setValue("");
     onSubmit({
-      from: userId,
-      target: "",
+      target: roomId ? `ROOM_${roomId}` : "TODO:OTHER",
       content,
     });
   };
diff --git a/components/shared/Chat/v2/ChatMessages.tsx b/components/shared/Chat/v2/ChatMessages.tsx
index e90cf623..bf87f9c2 100644
--- a/components/shared/Chat/v2/ChatMessages.tsx
+++ b/components/shared/Chat/v2/ChatMessages.tsx
@@ -1,11 +1,21 @@
 import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
-import Avatar from "../../Avatar";
+import Avatar from "@/components/shared/Avatar";
+import type { UserInfo } from "@/requests/users";
+
+type User = Pick<UserInfo, "id" | "nickname">;
 
 export type MessageType = {
-  from: string;
-  target: string;
+  /** The source of the message. */
+  from: "SYSTEM" | User;
+  /** The content of the user message. */
   content: string;
+  /** The recipient of the message.
+   * @ "LOBBY" | "ROOM_[:roomId]"  -
+   */
+  target: string;
+  /** The timestamp of the message. */
+  timestamp: string;
 };
 
 type ChatMessageProps = {
@@ -31,7 +41,7 @@ export default function ChatMessages({
       <div ref={messagesRef} className="overflow-y-scroll scrollbar">
         <div className="p-4 pr-0">
           {messages.map(({ from, content }, index) => {
-            const isSystem = from === "System";
+            const isSystem = from === "SYSTEM";
             const isMe = from === userId;
             const isSameUser = from === messages[index + 1]?.from;
 
@@ -71,7 +81,7 @@ export default function ChatMessages({
                           isMe && "text-right mt-1"
                         )}
                       >
-                        {isMe ? "我" : from}
+                        {isMe ? "我" : from.nickname}
                       </div>
                     </div>
                   </>
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
index 2a54d719..cfdaad59 100644
--- a/components/shared/Sidebar.tsx
+++ b/components/shared/Sidebar.tsx
@@ -13,44 +13,72 @@ enum SidebarRoutes {
   ROOMS = "/rooms",
 }
 
-interface ButtonProps {
+interface RouteProps {
   text: string;
   iconName: IconNameV2;
-  route: SidebarRoutes;
+  route: `${SidebarRoutes}${string}`;
+  isShow: boolean;
 }
 
 export default function Sidebar() {
   const { pathname } = useRouter();
   const { currentUser } = useAuth();
-  const { logout } = useUser();
+  const { logout, getRoomId } = useUser();
+  const roomId = getRoomId();
 
-  const buttons: ButtonProps[] = [
-    { text: "遊戲大廳", iconName: "home", route: SidebarRoutes.HOME },
-    { text: "遊戲房間", iconName: "arcade", route: SidebarRoutes.ROOMS },
+  const routes: RouteProps[] = [
+    {
+      text: "遊戲大廳",
+      iconName: "home",
+      route: SidebarRoutes.HOME,
+      isShow: true,
+    },
+    {
+      text: "遊戲房間",
+      iconName: "arcade",
+      route: SidebarRoutes.ROOMS,
+      isShow: !roomId,
+    },
+    {
+      text: "遊戲房間",
+      iconName: "arcade",
+      route: `${SidebarRoutes.ROOMS}/${roomId}`,
+      isShow: !!roomId,
+    },
   ];
 
+  const isActive = (route: string) => {
+    return pathname === route;
+  };
+
   return (
     <nav className="flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 h-full gap-5">
-      {buttons.map((ButtonProps) => (
-        <Link
-          href={ButtonProps.route}
-          key={ButtonProps.text}
-          className="flex justify-center items-center"
-        >
-          <Button
-            className={cn("bg-transparent p-3 rounded-full hover:shadow-none", {
-              "bg-primary-200/20": pathname === ButtonProps.route,
-            })}
+      {routes
+        .filter((route) => route.isShow)
+        .map((routeProps) => (
+          <Link
+            href={routeProps.route}
+            key={routeProps.text}
+            title={routeProps.text}
+            className="flex justify-center items-center"
           >
-            <Icon
-              name={ButtonProps.iconName}
-              className={cn("w-6 h-6 stroke-primary-400", {
-                "stroke-primary-200": pathname === ButtonProps.route,
-              })}
-            />
-          </Button>
-        </Link>
-      ))}
+            <Button
+              className={cn(
+                "bg-transparent p-3 rounded-full hover:shadow-none",
+                {
+                  "bg-primary-200/20": isActive(routeProps.route),
+                }
+              )}
+            >
+              <Icon
+                name={routeProps.iconName}
+                className={cn("w-6 h-6 stroke-primary-400", {
+                  "stroke-primary-200": isActive(routeProps.route),
+                })}
+              />
+            </Button>
+          </Link>
+        ))}
       {currentUser && (
         <Button
           className="mt-auto bg-transparent px-0 justify-center opacity-[0.3] hover:shadow-none hover:opacity-100"
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index 4204dfdf..8a54d738 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -1,13 +1,17 @@
-import { PropsWithChildren, useReducer } from "react";
+import { PropsWithChildren } from "react";
 import Header from "@/components/shared/Header";
 import Sidebar from "@/components/shared/Sidebar";
 import Chat from "@/components/shared/Chat/v2/Chat";
+import useChat from "@/hooks/useChat";
 
 export default function Layout({ children }: PropsWithChildren) {
-  const [isChatVisible, toggleChatVisibility] = useReducer(
-    (preState) => !preState,
-    false
-  );
+  const {
+    roomId,
+    messageList,
+    isChatVisible,
+    toggleChatVisibility,
+    handleSubmitText,
+  } = useChat();
 
   return (
     <div className="inset-0 flex flex-col w-full h-full">
@@ -21,9 +25,11 @@ export default function Layout({ children }: PropsWithChildren) {
           <div className="shrink-0">
             <Chat
               userId=""
+              roomId={roomId}
               friendList={[]}
               lobbyMessages={[]}
-              roomMessages={[]}
+              roomMessages={messageList}
+              onSubmit={handleSubmitText}
             />
           </div>
         )}
diff --git a/containers/provider/ChatroomProvider.tsx b/containers/provider/ChatroomProvider.tsx
index 8f678204..446146bf 100644
--- a/containers/provider/ChatroomProvider.tsx
+++ b/containers/provider/ChatroomProvider.tsx
@@ -1,9 +1,9 @@
 import ChatroomContext from "@/contexts/ChatroomContext";
 import { PropsWithChildren, useCallback, useEffect, useState } from "react";
-import { MessageType } from "@/components/rooms/RoomChatroom";
 import useAuth from "@/hooks/context/useAuth";
 import useSocketCore from "@/hooks/context/useSocketCore";
 import { SOCKET_EVENT } from "@/contexts/SocketContext";
+import type { MessageType } from "@/components/shared/Chat/v2/ChatMessages";
 
 export type ChatroomContextType = ReturnType<typeof useChatroomCore>;
 
diff --git a/containers/room/RoomListView.tsx b/containers/room/RoomListView.tsx
index 8549430f..1c86c376 100644
--- a/containers/room/RoomListView.tsx
+++ b/containers/room/RoomListView.tsx
@@ -16,6 +16,7 @@ import { RoomsList, RoomsListWrapper } from "@/components/rooms/RoomsList";
 import useRequest from "@/hooks/useRequest";
 import usePagination from "@/hooks/usePagination";
 import usePopup from "@/hooks/usePopup";
+import useUser from "@/hooks/useUser";
 
 type Props = {
   status: RoomType;
@@ -36,6 +37,7 @@ const RoomsListView: FC<Props> = ({ status }) => {
   const [passwordValues, setPasswordValues] = useState(INIT_PASSWORD);
   const [isLoading, setIsLoading] = useState(false);
   const { Popup, firePopup } = usePopup();
+  const { updateRoomId } = useUser();
   const router = useRouter();
   const isLocked = data.find((room) => room.id === roomId)?.isLocked;
 
@@ -61,12 +63,14 @@ const RoomsListView: FC<Props> = ({ status }) => {
 
       if (await fetch(getRoomInfoEndpoint(_roomId)).catch(() => {})) {
         router.push(`/rooms/${_roomId}`);
+        updateRoomId(_roomId);
         return;
       }
 
       try {
         await fetch(postRoomEntry(_roomId, passwordValues.join("")));
         router.push(`/rooms/${_roomId}`);
+        updateRoomId(_roomId);
       } catch (err) {
         if (err instanceof AxiosError) {
           const msg = err.response?.data.message.replaceAll(" ", "_");
diff --git a/hooks/useChat.ts b/hooks/useChat.ts
new file mode 100644
index 00000000..7770dc1f
--- /dev/null
+++ b/hooks/useChat.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import type { MessageType } from "@/components/shared/Chat/v2/ChatMessages";
+import useChatroom from "./context/useChatroom";
+import useSocketCore from "./context/useSocketCore";
+import useUser from "./useUser";
+
+export default function useChat() {
+  const { lastMessage, sendChatMessage, joinChatroom, leaveChatroom } =
+    useChatroom();
+  const [isChatVisible, setIsChatVisible] = useState(false);
+  const { socket } = useSocketCore();
+  const [messageList, setMessageList] = useState<MessageType[]>([]);
+  const { getRoomId } = useUser();
+  const roomId = getRoomId();
+
+  const toggleChatVisibility = () => {
+    setIsChatVisible((prev) => !prev);
+  };
+
+  // join chatroom by roomId
+  useEffect(() => {
+    if (!roomId) return;
+    if (!socket?.connected) return;
+    joinChatroom(roomId);
+    return () => leaveChatroom(roomId);
+  }, [joinChatroom, leaveChatroom, roomId, socket, socket?.connected]);
+
+  // update message list while received new message from websocket
+  useEffect(() => {
+    if (!lastMessage || !roomId) return;
+    if (lastMessage.target === `ROOM_${roomId}`) {
+      setMessageList((prev) => [...prev, lastMessage]);
+    }
+  }, [lastMessage, roomId]);
+
+  const handleSubmitText = (
+    message: Pick<MessageType, "content" | "target">
+  ) => {
+    if (!message.content) return;
+    const data: Pick<MessageType, "content" | "target"> = {
+      content: message.content,
+      target: message.target,
+    };
+    sendChatMessage(data);
+  };
+
+  return {
+    roomId,
+    messageList,
+    isChatVisible,
+    sendChatMessage,
+    toggleChatVisibility,
+    handleSubmitText,
+  };
+}
diff --git a/hooks/useCookie.ts b/hooks/useCookie.ts
index 52dd9f24..b6bc529b 100644
--- a/hooks/useCookie.ts
+++ b/hooks/useCookie.ts
@@ -3,6 +3,7 @@ import cookie from "js-cookie";
 
 enum CookieKey {
   TOKEN = "_token",
+  ROOM_ID = "_room_id",
 }
 
 interface CookieOperator<T> {
@@ -37,8 +38,13 @@ const useCookie = () => {
     return generator<string>(CookieKey.TOKEN);
   }, []);
 
+  const roomIdOperator = useMemo(() => {
+    return generator<string>(CookieKey.ROOM_ID);
+  }, []);
+
   return {
     token: tokenOperator,
+    roomId: roomIdOperator,
   };
 };
 
diff --git a/hooks/useUser.ts b/hooks/useUser.ts
index 55f13dfa..6fca55d4 100644
--- a/hooks/useUser.ts
+++ b/hooks/useUser.ts
@@ -13,7 +13,7 @@ import { useCallback } from "react";
 const useUser = () => {
   const { fetch } = useRequest();
   const { setToken: setTokenCtx } = useAuth();
-  const { token: tokenOperator } = useCookie();
+  const { token: tokenOperator, roomId: roomIdOperator } = useCookie();
 
   const getLoginEndpoint = async (type: LoginType) => {
     return await fetch(getLoginEndpointReq(type));
@@ -54,6 +54,18 @@ const useUser = () => {
     return await fetch(getCurrentUserReq());
   };
 
+  const getRoomId = () => {
+    return roomIdOperator.get();
+  };
+
+  const updateRoomId = (roomId?: string) => {
+    if (roomId) {
+      roomIdOperator.set(roomId);
+    } else {
+      roomIdOperator.remove();
+    }
+  };
+
   return {
     getLoginEndpoint,
     getMockToken,
@@ -63,6 +75,8 @@ const useUser = () => {
     getTokenInCookie,
     updateTokenInCookie,
     getCurrentUser,
+    getRoomId,
+    updateRoomId,
   };
 };
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 2ed59834..d7f902d7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import { GetStaticProps } from "next";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -11,6 +12,8 @@ import CarouselV2 from "@/components/shared/Carousel/v2";
 import FastJoinButton from "@/components/lobby/FastJoinButton";
 import SearchBar from "@/components/shared/SearchBar";
 import Tabs, { TabItemType } from "@/components/shared/Tabs";
+import { getAllGamesEndpoint } from "@/requests/games";
+import useRequest from "@/hooks/useRequest";
 
 function CarouselCard({
   imgUrl,
@@ -23,7 +26,7 @@ function CarouselCard({
       </div>
       <div className="flex-[40%] p-4 rounded-lg bg-primary-50/8">
         <div className="text-xs text-primary-300">Massive Monster</div>
-        <div className="text-xl text-primary-100">AZUL ({imgAlt})</div>
+        <div className="text-xl text-primary-100">{imgAlt}</div>
         <div className="flex mb-2 text-xs text-primary-300">
           <div className="flex-1">4.6 ＊ ＊ ＊ ＊ ＊ (14)</div>
           <time className="flex-1">2023.08.25</time>
@@ -128,6 +131,23 @@ const TabPaneContent = (tabItem: TabItemType<TabKey>) => {
 };
 
 export default function Home() {
+  const { fetch } = useRequest();
+  const [gameList, setGameList] = useState<typeof mockCarouselItems>([]);
+
+  useEffect(() => {
+    async function handleGetAllGame() {
+      const result = await fetch(getAllGamesEndpoint());
+      setGameList(
+        result.map((gameItem) => ({
+          link: `/rooms/${gameItem.id}`,
+          imgUrl: gameItem.img,
+          imgAlt: gameItem.name,
+        }))
+      );
+    }
+    handleGetAllGame();
+  }, [fetch]);
+
   return (
     <div className="max-w-[1036px] mx-auto px-6">
       <div className="flex justify-center mb-6">
@@ -141,7 +161,7 @@ export default function Home() {
       </div>
       <div>
         <CarouselV2
-          items={mockCarouselItems}
+          items={gameList}
           uniqueKey="imgAlt"
           Component={CarouselCard}
         />
diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
index ba8dfbbf..b0ae9c3f 100644
--- a/pages/rooms/[roomId]/index.tsx
+++ b/pages/rooms/[roomId]/index.tsx
@@ -22,6 +22,7 @@ import {
   playerCancelReady,
   startGame,
 } from "@/requests/rooms";
+import useUser from "@/hooks/useUser";
 
 type User = Omit<RoomInfo.User, "isReady">;
 
@@ -38,6 +39,7 @@ export default function Room() {
   } = useRoom();
   const { socket } = useSocketCore();
   const { currentUser, token } = useAuth();
+  const { updateRoomId } = useUser();
   const { Popup, firePopup } = usePopup();
   const { fetch } = useRequest();
   const { query, replace } = useRouter();
@@ -70,6 +72,7 @@ export default function Room() {
 
     socket.on(SOCKET_EVENT.USER_LEFT, ({ user }: { user: User }) => {
       if (user.id === currentUser.id) {
+        updateRoomId();
         firePopup({
           title: `你已被踢出房間`,
           onConfirm: () => replace("/"),
@@ -105,6 +108,7 @@ export default function Room() {
     });
 
     socket.on(SOCKET_EVENT.ROOM_CLOSED, () => {
+      updateRoomId();
       firePopup({
         title: `房間已關閉!`,
         onConfirm: () => replace("/"),
@@ -149,6 +153,7 @@ export default function Room() {
       try {
         await fetch(closeRoom(roomId));
         replace("/rooms");
+        updateRoomId();
       } catch (err) {
         firePopup({ title: "error!" });
       }
@@ -167,6 +172,7 @@ export default function Room() {
       try {
         await fetch(leaveRoom(roomId));
         replace("/rooms");
+        updateRoomId();
       } catch (err) {
         firePopup({ title: "error!" });
       }