diff --git a/components/shared/Cover/index.tsx b/components/shared/Cover/index.tsx
deleted file mode 100644
index f53f5b1a..00000000
--- a/components/shared/Cover/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReactEventHandler } from "react";
-import Image, { ImageProps } from "next/image";
-import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
-
-function Cover({ alt, onError, ...restProps }: ImageProps) {
-  const handleError: ReactEventHandler<HTMLImageElement> = (e) => {
-    if (e.target instanceof HTMLImageElement) {
-      e.target.src = gameDefaultCoverImg.src;
-    }
-    onError?.(e);
-  };
-  return <Image alt={alt} onError={handleError} {...restProps} />;
-}
-
-export default Cover;
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index 401ec33b..c0dee8f0 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { UserInfoForm } from "@/features/user";
 import useAuth from "@/hooks/context/useAuth";
 import Modal from "./Modal";
-import Cover from "./Cover";
+import Image from "./Image";
 
 enum HeaderActions {
   CHAT = "CHAT",
@@ -65,7 +65,7 @@ export default function Header({
       )}
     >
       <div className="flex items-center gap-3">
-        <Cover src="/logo.png" alt="logo" width={40} height={40} />
+        <Image src="/logo.png" alt="logo" width={40} height={40} priority />
         <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>
       </div>
       <div className="header___actions flex gap-5">
diff --git a/components/shared/Cover/Cover.stories.tsx b/components/shared/Image/Image.stories.tsx
similarity index 59%
rename from components/shared/Cover/Cover.stories.tsx
rename to components/shared/Image/Image.stories.tsx
index 29a889e9..0ffc9d8f 100644
--- a/components/shared/Cover/Cover.stories.tsx
+++ b/components/shared/Image/Image.stories.tsx
@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import Cover from "./index";
+import Image from ".";
 
-const meta: Meta<typeof Cover> = {
-  title: "Data Display/ Cover",
-  component: Cover,
+const meta: Meta<typeof Image> = {
+  title: "Data Display/ Image",
+  component: Image,
   tags: ["autodocs"],
   args: {
     src: "https://images.unsplash.com/photo-1684006231760-3f0290bf42a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1550&q=80",
-    alt: "Cover",
+    alt: "image",
     width: 100,
     height: 130,
   },
@@ -21,17 +21,17 @@ const meta: Meta<typeof Cover> = {
   },
 };
 
-type Story = StoryObj<typeof Cover>;
+type Story = StoryObj<typeof Image>;
 
 export const Playground: Story = {
-  render: (args) => <Cover {...args} />,
+  render: (args) => <Image alt={args.alt} {...args} />,
 };
 
-export const DefaultErrorCover: Story = {
-  render: (args) => <Cover {...args} />,
+export const DefaultErrorImage: Story = {
+  render: (args) => <Image alt={args.alt} {...args} />,
 };
 
-DefaultErrorCover.args = {
+DefaultErrorImage.args = {
   src: "error src",
 };
 
diff --git a/components/shared/Image/Image.tsx b/components/shared/Image/Image.tsx
new file mode 100644
index 00000000..df75c3ea
--- /dev/null
+++ b/components/shared/Image/Image.tsx
@@ -0,0 +1,41 @@
+import { ReactEventHandler } from "react";
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+import { cn } from "@/lib/utils";
+
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  priority?: boolean;
+  fill?: boolean;
+}
+
+function Image({
+  alt,
+  onError,
+  priority,
+  fill,
+  className,
+  ...restProps
+}: ImageProps) {
+  const handleError: ReactEventHandler<HTMLImageElement> = (e) => {
+    if (e.target instanceof HTMLImageElement) {
+      e.target.src = gameDefaultCoverImg.src;
+    }
+    onError?.(e);
+  };
+  return (
+    <picture>
+      <img
+        alt={alt}
+        className={cn(className, fill && "absolute inset-0 w-full h-full")}
+        draggable={false}
+        loading={priority ? "eager" : "lazy"}
+        decoding="async"
+        onError={handleError}
+        // @ts-ignore https://github.com/vercel/next.js/issues/65161
+        fetchpriority={priority ? "high" : "auto"}
+        {...restProps}
+      />
+    </picture>
+  );
+}
+
+export default Image;
diff --git a/components/shared/Cover/cover.test.tsx b/components/shared/Image/image.test.tsx
similarity index 55%
rename from components/shared/Cover/cover.test.tsx
rename to components/shared/Image/image.test.tsx
index 9e93da95..25db1832 100644
--- a/components/shared/Cover/cover.test.tsx
+++ b/components/shared/Image/image.test.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import Cover from ".";
+import Image from ".";
 
-describe("Cover", () => {
-  test("should render Cover component", () => {
+describe("Image", () => {
+  test("should render Image component", () => {
     render(
-      <Cover
+      <Image
         src="https://images.unsplash.com/photo-1683125695370-1c7fc9ff1315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160"
-        alt="Cover"
+        alt="Image"
         width={300}
         height={300}
       />
     );
-    const cover = screen.getByRole("img");
-    expect(cover).toBeInTheDocument();
-    expect(cover).toHaveAccessibleName("Cover");
+    const image = screen.getByRole("img");
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAccessibleName("Image");
   });
 });
diff --git a/components/shared/Image/index.tsx b/components/shared/Image/index.tsx
new file mode 100644
index 00000000..c6cd0de8
--- /dev/null
+++ b/components/shared/Image/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Image";
diff --git a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
index 18e59517..0d303f74 100644
--- a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
+++ b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
@@ -61,28 +61,33 @@ function SelectBoxGroup<T = string>({
         </label>
       )}
       <ul className={cn("inline-flex gap-2.5", itemWrapperClassName)}>
-        {items.map((item) => (
-          <li key={item.key} className={itemClassName}>
-            <label
-              className={cn(
-                "block box-border leading-tight text-primary-200 bg-primary-200/20",
-                "border-2 border-transparent rounded-lg cursor-pointer",
-                value === item.value && "border-primary-200 text-primary-50"
-              )}
-              htmlFor={`${selectBoxId}_${item.key}`}
-              aria-checked={value === item.value}
-            >
-              {item.label}
-            </label>
-            <input
-              type="checkbox"
-              id={`${selectBoxId}_${item.key}`}
-              checked={value === item.value}
-              className="absolute w-0 h-0 pointer-events-none"
-              onChange={() => onChange?.(item.value)}
-            />
-          </li>
-        ))}
+        {items.map((item) => {
+          const checkboxId = `${selectBoxId}_${item.key}`;
+          const isChecked = value === item.value;
+
+          return (
+            <li key={item.key} className={itemClassName}>
+              <label
+                className={cn(
+                  "block box-border leading-tight text-primary-200 bg-primary-200/20",
+                  "border-2 border-transparent rounded-lg cursor-pointer select-none",
+                  isChecked && "border-primary-200 text-primary-50"
+                )}
+                htmlFor={checkboxId}
+                aria-checked={isChecked}
+              >
+                {item.label}
+              </label>
+              <input
+                type="checkbox"
+                id={checkboxId}
+                checked={isChecked}
+                className="[clip:rect(0,0,0,0)] absolute p-0 border-0 w-0 h-0 overflow-hidden"
+                onChange={() => onChange?.(item.value)}
+              />
+            </li>
+          );
+        })}
       </ul>
     </div>
   );
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index 5119ced4..0e3de97d 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/router";
 import Header from "@/components/shared/Header";
 import Sidebar from "@/components/shared/Sidebar";
@@ -9,7 +9,7 @@ import SearchBar from "@/components/shared/SearchBar";
 import { useToast } from "@/components/shared/Toast";
 import { GameListProvider } from "@/features/game";
 
-export default function AppLayout({ children }: PropsWithChildren) {
+function AppLayout({ children }: React.PropsWithChildren) {
   const toast = useToast();
   const router = useRouter();
   const {
@@ -85,3 +85,7 @@ export default function AppLayout({ children }: PropsWithChildren) {
     </GameListProvider>
   );
 }
+
+export default function getAppLayout(page: React.ReactElement) {
+  return <AppLayout>{page}</AppLayout>;
+}
diff --git a/features/game/components/GameCardDetailed.tsx b/features/game/components/GameCardDetailed.tsx
index 027a47c2..df90f5b5 100644
--- a/features/game/components/GameCardDetailed.tsx
+++ b/features/game/components/GameCardDetailed.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
 import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 import { GameType } from "@/requests/games";
 import Icon from "@/components/shared/Icon";
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 
 function GameCardDetailed({
   children,
@@ -16,13 +16,11 @@ function GameCardDetailed({
   return (
     <div className="flex text-white mx-10 px-11 gap-4">
       <div className="relative flex items-end justify-end flex-[60%]">
-        <Cover
+        <Image
           src={img || gameDefaultCoverImg.src}
           alt={name}
-          draggable={false}
-          priority
-          fill
           className="object-cover"
+          fill
         />
         {children}
       </div>
@@ -48,14 +46,7 @@ function GameCardDetailed({
           <ul className="flex gap-3">
             <li className="relative w-16 h-10">
               {img && (
-                <Cover
-                  src={img}
-                  alt={name}
-                  draggable={false}
-                  priority
-                  fill
-                  className="object-cover"
-                />
+                <Image src={img} alt={name} className="object-cover" fill />
               )}
             </li>
           </ul>
diff --git a/features/game/components/GameCardSimple.tsx b/features/game/components/GameCardSimple.tsx
index 3e99502b..a961b4a3 100644
--- a/features/game/components/GameCardSimple.tsx
+++ b/features/game/components/GameCardSimple.tsx
@@ -2,20 +2,18 @@ import { PropsWithChildren } from "react";
 
 import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
 import { GameType } from "@/requests/games";
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 
 function GameCardSimple({ children, img, name }: PropsWithChildren<GameType>) {
   return (
     <div className="group">
       <div className="relative aspect-game-cover flex items-end justify-end">
         <picture className="overflow-hidden">
-          <Cover
+          <Image
             src={img || gameDefaultCoverImg.src}
             alt={name}
-            draggable={false}
-            priority
-            fill
             className="object-cover"
+            fill
           />
         </picture>
         <div className="opacity-0 group-hover:opacity-100 transition-opacity">
diff --git a/features/room/components/RoomCard.tsx b/features/room/components/RoomCard.tsx
index 0557e59d..43f2c5b5 100644
--- a/features/room/components/RoomCard.tsx
+++ b/features/room/components/RoomCard.tsx
@@ -1,6 +1,6 @@
 import type { Room } from "@/requests/rooms";
 
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 import Button, { ButtonSize } from "@/components/shared/Button/v2";
 import { useJoinRoom } from "../hooks";
 
@@ -22,7 +22,7 @@ function RoomCard({ room, onClick }: Readonly<RoomsCardProps>) {
   return (
     <div className="bg-primary-700/40 rounded-2xl">
       <div className="flex p-4 gap-4 text-primary-50">
-        <Cover
+        <Image
           className="w-16 h-16 rounded-lg object-cover"
           src={room.game.imgUrl}
           alt={room.game.name}
diff --git a/next.config.js b/next.config.js
index 6ea2936a..d5b0f8bc 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,6 +9,7 @@ if (process.env.ANALYZE === "true") {
   });
 }
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   i18n,
   output: "standalone",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3d377407..13c93164 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,7 +9,7 @@ import "@/styles/global.css";
 import "@/scripts/whyDidYouRender";
 
 import AxiosProvider from "@/containers/provider/AxiosProvider";
-import AppLayout from "@/containers/layout/AppLayout";
+import getAppLayout from "@/containers/layout/AppLayout";
 import AuthProvider from "@/containers/provider/AuthProvider";
 import Startup from "@/containers/util/Startup";
 import HistoryProvider from "@/containers/provider/HistoryProvider";
@@ -20,7 +20,7 @@ import { SocketProvider } from "@/containers/provider/SocketProvider";
 import ChatroomContextProvider from "@/containers/provider/ChatroomProvider";
 
 export type NextPageWithProps<P = unknown, IP = P> = NextPage<P, IP> & {
-  getLayout?: FC<PropsWithChildren>;
+  getLayout?: (page: React.ReactElement) => React.ReactElement;
   Anonymous?: boolean;
 };
 
@@ -34,9 +34,7 @@ function App({ Component, pageProps }: AppWithProps) {
     Component.Anonymous || !!process.env.NEXT_PUBLIC_CI_MODE || false;
   const isProduction = env !== Env.PROD ? false : true;
 
-  const Layout =
-    Component.getLayout ??
-    (({ children }) => <AppLayout>{children}</AppLayout>);
+  const getLayout = Component.getLayout ?? getAppLayout;
 
   const getHistory = (children: ReactElement) => {
     return isProduction ? (
@@ -58,9 +56,7 @@ function App({ Component, pageProps }: AppWithProps) {
               <SocketProvider>
                 <ChatroomContextProvider>
                   <Startup isAnonymous={isAnonymous}>
-                    <Layout>
-                      <Component {...pageProps} />
-                    </Layout>
+                    {getLayout(<Component {...pageProps} />)}
                     {!isProduction && <HistoryList />}
                   </Startup>
                 </ChatroomContextProvider>
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index de6d18a9..f2cb67d5 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -25,7 +25,7 @@ const Login: NextPageWithProps = () => {
   return <></>;
 };
 
-Login.getLayout = ({ children }) => children;
+Login.getLayout = (page) => page;
 Login.Anonymous = true;
 
 export default Login;
diff --git a/pages/auth/token/[token].tsx b/pages/auth/token/[token].tsx
index dd0f99b1..e56c0129 100644
--- a/pages/auth/token/[token].tsx
+++ b/pages/auth/token/[token].tsx
@@ -21,7 +21,7 @@ const Token: NextPageWithProps = () => {
   return <></>;
 };
 
-Token.getLayout = ({ children }) => children;
+Token.getLayout = (page) => page;
 Token.Anonymous = true;
 
 export default Token;
diff --git a/pages/login.tsx b/pages/login.tsx
index 04e0c1f4..a7ac5604 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -5,7 +5,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 
 import ButtonV2, { ButtonVariant } from "@/components/shared/Button/v2";
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 import Icon, { IconName } from "@/components/shared/Icon";
 
 import useAuth from "@/hooks/context/useAuth";
@@ -53,7 +53,7 @@ const Login: NextPageWithProps = () => {
       <div className="absolute xl:-top-5 xl:-right-5 xl:w-[58%] xl:h-[calc(100%+40px)] rounded-2xl gradient-light shadow blur-[20px]" />
       <div className="px-2 sm:px-6 xl:pl-24 2xl:px-24 flex-1 flex flex-col justify-center items-start">
         <h2 className="relative flex items-center gap-2 text-2xl font-normal text-primary-100 mb-12">
-          <Cover src="/logo.png" alt="logo" width={48} height={48} />
+          <Image src="/logo.png" alt="logo" width={48} height={48} priority />
           遊戲微服務大平台
         </h2>
         <p className="text-primary-50 text-3xl font-medium mb-4">
@@ -86,9 +86,9 @@ const Login: NextPageWithProps = () => {
 
 Login.Anonymous = true;
 
-Login.getLayout = ({ children }) => (
+Login.getLayout = (page) => (
   <div className="w-screen h-screen bg-[#252558]">
-    <Cover
+    <Image
       src="/images/v2/login-bg.png"
       alt="login cover"
       className="fixed w-full h-screen bg-[#252558]"
@@ -96,7 +96,7 @@ Login.getLayout = ({ children }) => (
     />
     <div className="w-full h-full flex items-center p-4 md:p-8 xl:px-36 xl:py-24">
       <BoxFancy className="container m-auto h-full xl:max-h-[calc(max(560px,75%))]">
-        {children}
+        {page}
       </BoxFancy>
     </div>
   </div>
diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
index 27488086..db6b0b5f 100644
--- a/pages/rooms/[roomId]/index.tsx
+++ b/pages/rooms/[roomId]/index.tsx
@@ -3,7 +3,7 @@ import { GetStaticProps, GetStaticPaths } from "next";
 import { useRouter } from "next/router";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 import RoomUserCardList from "@/components/rooms/RoomUserCardList";
 import RoomButtonGroup from "@/components/rooms/RoomButtonGroup";
 import GameWindow from "@/components/rooms/GameWindow";
@@ -137,6 +137,7 @@ export default function Room() {
     currentUser?.id,
     roomId,
     updateRoomId,
+    updateGameUrl,
     addPlayer,
     removePlayer,
     updateUserReadyStatus,
@@ -238,10 +239,9 @@ export default function Room() {
         <>
           <div className="relative w-full h-[280px] overflow-hidden">
             {roomInfo.currentPlayers && (
-              <Cover
+              <Image
                 src={gameInfo?.img || gameDefaultCoverImg.src}
                 alt={gameInfo?.name || "default game cover"}
-                draggable={false}
                 priority
                 fill
                 className="object-cover"
diff --git a/pages/rooms/index.tsx b/pages/rooms/index.tsx
index 080981fe..4e73a76c 100644
--- a/pages/rooms/index.tsx
+++ b/pages/rooms/index.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { GetStaticProps } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import Cover from "@/components/shared/Cover";
+import Image from "@/components/shared/Image";
 import Modal from "@/components/shared/Modal";
 import Tabs, { TabItemType } from "@/components/shared/Tabs";
 import { useGameList } from "@/features/game";
@@ -53,7 +53,7 @@ function TabPaneContent({ tabKey }: Readonly<TabItemType<RoomType>>) {
         {room && (
           <JoinLockRoomForm id={room.id}>
             <div className="flex mb-4 gap-4 text-primary-50">
-              <Cover
+              <Image
                 className="w-12 h-12 rounded-lg object-cover"
                 src={room.game.imgUrl}
                 alt={room.game.name}
diff --git a/pages/without-layout.tsx b/pages/without-layout.tsx
index 4d2a5ab5..bad307be 100644
--- a/pages/without-layout.tsx
+++ b/pages/without-layout.tsx
@@ -13,7 +13,7 @@ const WithoutLayout: NextPageWithProps = () => {
   );
 };
 
-WithoutLayout.getLayout = ({ children }) => children;
+WithoutLayout.getLayout = (page) => page;
 WithoutLayout.Anonymous = true;
 
 export default WithoutLayout;