diff --git a/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx b/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
index 8a74ef2d..2a267e97 100644
--- a/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
+++ b/components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
@@ -14,7 +14,7 @@ type GroupedGamesType = {
 
 function GameList({ gameList, onGameChange, activeGameId }: GameListProp) {
   const groupedGames = gameList.reduce((result: GroupedGamesType, game) => {
-    const category = game.category || "其他";
+    const category = "其他";
     if (!result[category]) {
       result[category] = [];
     }
diff --git a/components/shared/Button/v2/Button.tsx b/components/shared/Button/v2/Button.tsx
index 92819f68..d9138c3b 100644
--- a/components/shared/Button/v2/Button.tsx
+++ b/components/shared/Button/v2/Button.tsx
@@ -7,6 +7,7 @@ import { PolymorphicRef } from "@/lib/types";
 
 export enum ButtonVariant {
   PRIMARY = "primary",
+  PRIMARY_TRANSPARENT = "primaryTransparent",
   SECONDARY = "secondary",
   HIGHLIGHT = "highlight",
 }
@@ -22,6 +23,8 @@ const commonDisabledClasses =
 const buttonTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "text-primary-700 bg-primary-200 hover:text-primary-50 hover:bg-primary-300 active:text-primary-50 active:bg-primary-400",
+  primaryTransparent:
+    "text-primary-800 bg-primary-200/60 hover:text-primary-800 hover:bg-primary-300/50 active:text-primary-800 active:bg-primary-300/50",
   secondary:
     "text-primary-200 bg-transparent hover:bg-primary-300/40 active:bg-primary-200/20 disabled:bg-transparent disabled:border",
   highlight:
@@ -51,6 +54,8 @@ type InnerButtonComponent = (
 const iconTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50",
+  primaryTransparent:
+    "stroke-primary-700 hover:stroke-primary-700 active:stroke-primary-700",
   secondary: "stroke-primary-200 disabled:stroke-grey-500",
   highlight: "stroke-primary-50",
 };
diff --git a/components/shared/Carousel/v2/Carousel.stories.tsx b/components/shared/Carousel/v2/Carousel.stories.tsx
index ec6d9e42..27cc64a7 100644
--- a/components/shared/Carousel/v2/Carousel.stories.tsx
+++ b/components/shared/Carousel/v2/Carousel.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta<typeof Carousel> = {
     },
   ],
   args: {
-    uniqueKey: "name",
+    renderKey: (props: any) => props.name,
     items: [{ name: "TEST 1" }, { name: "TEST 2" }, { name: "TEST 3" }],
     Component: Card,
   },
diff --git a/components/shared/Carousel/v2/Carousel.tsx b/components/shared/Carousel/v2/Carousel.tsx
index 5c010fd7..3f1249bb 100644
--- a/components/shared/Carousel/v2/Carousel.tsx
+++ b/components/shared/Carousel/v2/Carousel.tsx
@@ -1,18 +1,15 @@
-import { CSSProperties, FC, useEffect, useRef, useState } from "react";
+import { CSSProperties, FC, Key, useEffect, useRef, useState } from "react";
 import Icon from "../../Icon/v2/Icon";
 
-interface CarouselProps<
-  Item extends Record<string, unknown>,
-  Key extends keyof Item = keyof Item,
-> {
-  items: (Item & Record<Key, string>)[];
-  uniqueKey: Key;
+interface CarouselProps<Item extends Record<string, unknown>> {
+  items: Item[];
+  renderKey: (item: Item) => Key;
   Component: FC<Item>;
 }
 
 export default function Carousel<Item extends Record<string, unknown>>({
   items,
-  uniqueKey,
+  renderKey,
   Component,
 }: Readonly<CarouselProps<Item>>) {
   const [showIndex, setShowIndex] = useState(0);
@@ -68,7 +65,7 @@ export default function Carousel<Item extends Record<string, unknown>>({
           {Array.isArray(items) &&
             items.map((item) => (
               <li
-                key={item[uniqueKey]}
+                key={renderKey(item)}
                 className="shrink-0 w-[var(--max-width)]"
                 style={
                   {
diff --git a/components/shared/Chat/v2/Chat.tsx b/components/shared/Chat/v2/Chat.tsx
index 50edd911..3e4567ad 100644
--- a/components/shared/Chat/v2/Chat.tsx
+++ b/components/shared/Chat/v2/Chat.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ChatHeader, { ChatTab } from "./ChatHeader";
 import ChatMessages from "./ChatMessages";
 import ChatFriendList, { FriendType, getTargetUser } from "./ChatFriendList";
@@ -6,6 +6,7 @@ import ChatInput from "./ChatInput";
 import type { MessageType } from "./ChatMessages";
 import { createMockFriendMessages } from "./__mocks__/mock";
 import Icon from "../../Icon";
+import { cn } from "@/lib/utils";
 
 export type ChatProps = {
   userId: string;
@@ -13,7 +14,7 @@ export type ChatProps = {
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
-  maxHeight?: string;
+  className?: string;
   onSubmit: (message: Pick<MessageType, "content" | "target">) => void;
 };
 
@@ -23,7 +24,7 @@ export default function Chat({
   lobbyMessages,
   friendList,
   roomMessages,
-  maxHeight = "calc(100vh - 168px)",
+  className,
   onSubmit,
 }: Readonly<ChatProps>) {
   const [messages, setMessages] = useState(lobbyMessages);
@@ -74,17 +75,14 @@ export default function Chat({
   };
 
   return (
-    <div
-      className="w-[308px] h-[var(--chat-height))] gradient-purple rounded-lg"
-      style={{ "--chat-height": maxHeight } as CSSProperties}
-    >
+    <div className={cn("w-80 gradient-purple rounded-lg", className)}>
       <div className="h-full body-bg border border-transparent bg-clip-padding rounded-lg overflow-hidden">
         <ChatHeader
           tabs={chatTabs}
           activeTab={activeTab}
           onToggle={handleToggleTab}
         />
-        <div className="relative h-[calc(var(--chat-height)-120px)] bg-primary-50/4">
+        <div className="relative h-[calc(100%-182px)] bg-primary-50/4">
           {isFriendList ? (
             <ChatFriendList
               userId={userId}
diff --git a/components/shared/Chat/v2/ChatMessages.tsx b/components/shared/Chat/v2/ChatMessages.tsx
index bf87f9c2..2cd7f02d 100644
--- a/components/shared/Chat/v2/ChatMessages.tsx
+++ b/components/shared/Chat/v2/ChatMessages.tsx
@@ -37,7 +37,7 @@ export default function ChatMessages({
   }, [messages]);
 
   return (
-    <div className="flex flex-col justify-end min-h-full max-h-[calc(var(--chat-height)-120px)]">
+    <div className="flex flex-col justify-end min-h-full max-h-[calc(100%-182px)]">
       <div ref={messagesRef} className="overflow-y-scroll scrollbar">
         <div className="p-4 pr-0">
           {messages.map(({ from, content }, index) => {
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index d0cd3111..8ed31784 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -21,10 +21,14 @@ interface ButtonProps {
 }
 
 interface HeaderProps {
+  className?: string;
   onClickChatButton: () => void;
 }
 
-export default function Header({ onClickChatButton }: Readonly<HeaderProps>) {
+export default function Header({
+  className,
+  onClickChatButton,
+}: Readonly<HeaderProps>) {
   const [openProfile, setOpenProfile] = useState(false);
 
   const buttons: ButtonProps[] = [
@@ -51,7 +55,12 @@ export default function Header({ onClickChatButton }: Readonly<HeaderProps>) {
   ];
 
   return (
-    <header className="flex flex-row items-center justify-between px-8 py-2 bg-white/8 glass-shadow">
+    <header
+      className={cn(
+        "flex items-center justify-between px-8 py-2 bg-white/8 glass-shadow backdrop-blur-3xl",
+        className
+      )}
+    >
       <div className="flex items-center gap-3">
         <Icon name="logo" className="bg-transparent" />
         <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
index cfdaad59..8d4b2232 100644
--- a/components/shared/Sidebar.tsx
+++ b/components/shared/Sidebar.tsx
@@ -20,7 +20,11 @@ interface RouteProps {
   isShow: boolean;
 }
 
-export default function Sidebar() {
+interface SidebarProps {
+  className?: string;
+}
+
+export default function Sidebar({ className }: SidebarProps) {
   const { pathname } = useRouter();
   const { currentUser } = useAuth();
   const { logout, getRoomId } = useUser();
@@ -52,7 +56,12 @@ export default function Sidebar() {
   };
 
   return (
-    <nav className="flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 h-full gap-5">
+    <nav
+      className={cn(
+        "flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 gap-5",
+        className
+      )}
+    >
       {routes
         .filter((route) => route.isShow)
         .map((routeProps) => (
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index 8a54d738..3a1746d4 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -14,16 +14,20 @@ export default function Layout({ children }: PropsWithChildren) {
   } = useChat();
 
   return (
-    <div className="inset-0 flex flex-col w-full h-full">
-      <Header onClickChatButton={toggleChatVisibility} />
-      <div className="ml-2 mr-4 my-6 flex grow max-w-[100vw]">
+    <>
+      <Header
+        className="sticky top-0 z-40"
+        onClickChatButton={toggleChatVisibility}
+      />
+      <div className="ml-2 mr-4 my-6 flex grow">
         <div className="shrink-0">
-          <Sidebar />
+          <Sidebar className="sticky top-20 z-30 h-main-height" />
         </div>
         <main className="grow overflow-x-hidden">{children}</main>
         {isChatVisible && (
           <div className="shrink-0">
             <Chat
+              className="sticky top-20 z-30 h-main-height"
               userId=""
               roomId={roomId}
               friendList={[]}
@@ -34,6 +38,6 @@ export default function Layout({ children }: PropsWithChildren) {
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/hooks/useRequest.ts b/hooks/useRequest.ts
index 00adcc78..94b25910 100644
--- a/hooks/useRequest.ts
+++ b/hooks/useRequest.ts
@@ -34,7 +34,7 @@ const useRequest = () => {
         requestWrapper: IRequestWrapper<T>,
         options: FetchOptions = {
           toast: {
-            show: true,
+            show: false,
             options: {
               position: "bottom-right",
             },
diff --git a/mocks/games.ts b/mocks/games.ts
index 13425fbb..d7d9d75f 100644
--- a/mocks/games.ts
+++ b/mocks/games.ts
@@ -6,7 +6,7 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 10,
-    category: "心機",
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "133456",
@@ -14,6 +14,7 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 2,
     maxPlayers: 4,
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "133416",
@@ -21,6 +22,7 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 8,
+    createdOn: "2024-01-01T00:00:00",
   },
 
   {
@@ -29,6 +31,7 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 3,
     maxPlayers: 6,
+    createdOn: "2024-01-01T00:00:00",
   },
   {
     id: "184456",
@@ -36,7 +39,7 @@ const mock_gameList: GameType[] = [
     img: "http://localhost:3030/images/game-avatar.jpg",
     minPlayers: 1,
     maxPlayers: 5,
-    category: "策略",
+    createdOn: "2024-01-01T00:00:00",
   },
 ];
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 4f44a40c..22632ceb 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      <body className="body-bg text-primary-200 overflow-hidden">
+      <body className="body-bg text-primary-200">
         <Main />
         <NextScript />
       </body>
diff --git a/pages/index.tsx b/pages/index.tsx
index d7f902d7..5f67e110 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,96 +1,136 @@
 import { GetStaticProps } from "next";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import Image from "next/image";
-import Link from "next/link";
+import { ReactEventHandler, useEffect, useState } from "react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { useTranslation } from "next-i18next";
+import { AxiosError } from "axios";
 
-import Button from "@/components/shared/Button";
+import Button from "@/components/shared/Button/v2";
 import CreateRoomModal from "@/components/lobby/CreateRoomModal";
-import { mockCarouselItems } from "@/components/shared/Carousel";
 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 { fastJoinGameEndpoint } from "@/requests/rooms";
+import { GameType, getAllGamesEndpoint } from "@/requests/games";
 import useRequest from "@/hooks/useRequest";
+import useUser from "@/hooks/useUser";
+import { useToast } from "@/components/shared/Toast";
+import gameDefaultCoverImg from "@/public/images/game-default-cover.png";
+
+const onImageError: ReactEventHandler<HTMLImageElement> = (e) => {
+  if (e.target instanceof HTMLImageElement) {
+    e.target.src = gameDefaultCoverImg.src;
+  }
+};
 
 function CarouselCard({
-  imgUrl,
-  imgAlt,
-}: Readonly<(typeof mockCarouselItems)[number]>) {
+  id,
+  img,
+  name,
+  createdOn,
+  maxPlayers,
+  minPlayers,
+}: Readonly<GameType>) {
+  // 待重構將邏輯統一管理
+  const { fetch } = useRequest();
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+  const toast = useToast();
+  const { updateRoomId } = useUser();
+
+  const handleFastJoin = async () => {
+    try {
+      setIsLoading(true);
+      const { roomId } = await fetch(fastJoinGameEndpoint(id));
+      router.push(`/rooms/${roomId}`);
+      updateRoomId(roomId);
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        toast(
+          { state: "error", children: error.response?.data.message },
+          { position: "top" }
+        );
+      } else {
+        toast(
+          { state: "error", children: `無法預期的錯誤： ${error}` },
+          { position: "top" }
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="flex text-white px-12 gap-4">
-      <div className="relative flex-[60%]">
-        <Image src={imgUrl} alt={imgAlt} draggable={false} priority fill />
+      <div className="relative flex items-end justify-end flex-[60%]">
+        <Image
+          src={img || gameDefaultCoverImg.src}
+          alt={name}
+          draggable={false}
+          priority
+          fill
+          objectFit="cover"
+          onError={onImageError}
+        />
+        <div className="m-4 flex gap-4">
+          <Button
+            variant="primaryTransparent"
+            disabled={isLoading}
+            onClick={handleFastJoin}
+          >
+            快速遊戲
+          </Button>
+          <Button variant="primaryTransparent" className="w-11 h-11 p-0">
+            ...
+          </Button>
+        </div>
       </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">{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>
+        <div className="text-xs text-primary-300">Game Name</div>
+        <div className="text-xl text-primary-100">{name}</div>
+        <div className="flex gap-6 mb-2 text-xs text-primary-300">
+          <div className="flex-1">4.8 ＊ ＊ ＊ ＊ ＊ (66)</div>
+          <time className="flex-1">
+            {createdOn.slice(0, 10).replace(/-/g, ".")}
+          </time>
         </div>
         <div className="mb-3">
           <ul className="flex gap-3">
             <li className="relative w-16 h-10">
-              <Image
-                src="https://images.unsplash.com/photo-1533237264985-ee62f6d342bb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80"
-                alt={imgAlt}
-                draggable={false}
-                priority
-                fill
-              />
-            </li>
-            <li className="relative w-16 h-10">
-              <Image
-                src="https://images.unsplash.com/photo-1613160717888-faa82cdb8a94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
-                alt={imgAlt}
-                draggable={false}
-                priority
-                fill
-              />
-            </li>
-            <li className="relative w-16 h-10">
-              <Image
-                src="https://images.unsplash.com/photo-1601987177651-8edfe6c20009?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
-                alt={imgAlt}
-                draggable={false}
-                priority
-                fill
-              />
-            </li>
-            <li className="relative w-16 h-10">
-              <Image
-                src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80"
-                alt={imgAlt}
-                draggable={false}
-                priority
-                fill
-              />
+              {img && (
+                <Image
+                  src={img}
+                  alt={name}
+                  draggable={false}
+                  priority
+                  fill
+                  objectFit="cover"
+                  onError={onImageError}
+                />
+              )}
             </li>
           </ul>
         </div>
-        <div className="mb-3 text-xs text-primary-50">
-          《AZUL》是強手棋類休閒遊戲，在遊戲中，你可以任意選擇比賽地圖、參賽角色和組隊方式，使用卡片等方式賺取金錢，最終取得比賽勝利。
-        </div>
+        <div className="mb-3 text-xs text-primary-50 h-12">暫無描述</div>
         <div>
-          <ul className="flex flex-wrap gap-2 text-xs">
-            <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5">
-              回合制
-            </li>
-            <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5">
-              第三人稱
-            </li>
-            <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5">
-              策略型
-            </li>
-            <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5">
-              玩家對戰
-            </li>
-            <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5">
-              輕鬆休閒
-            </li>
+          <ul className="flex flex-wrap gap-2 text-xs h-12">
+            {maxPlayers === 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                單人遊戲
+              </li>
+            )}
+            {maxPlayers === minPlayers && maxPlayers > 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                {maxPlayers} 人遊戲
+              </li>
+            )}
+            {maxPlayers !== minPlayers && maxPlayers > 1 && (
+              <li className="bg-primary-800 text-primary-300 rounded-full px-2 py-0.5 h-fit">
+                {minPlayers} - {maxPlayers} 玩家
+              </li>
+            )}
           </ul>
         </div>
       </div>
@@ -114,38 +154,59 @@ const tabs: TabItemType<TabKey>[] = [
   { tabKey: TabKey.COLLECT, label: "收藏遊戲" },
 ];
 
-const TabPaneContent = (tabItem: TabItemType<TabKey>) => {
-  const { t } = useTranslation("rooms");
-  if (tabItem.tabKey === TabKey.HOT) {
+const TabPaneContent = ({
+  tabKey,
+  gameList,
+}: TabItemType<TabKey> & { gameList: GameType[] }) => {
+  if ([TabKey.HOT, TabKey.NEW].includes(tabKey)) {
+    const data =
+      tabKey === TabKey.HOT
+        ? gameList
+        : gameList
+            .concat()
+            .sort(
+              (a, b) =>
+                new Date(b.createdOn).getTime() -
+                new Date(a.createdOn).getTime()
+            );
+
     return (
-      <div className="my-6 flex gap-3">
-        <CreateRoomModal />
-        <Button component={Link} href="/rooms">
-          {t("rooms_list")}
-        </Button>
-        <FastJoinButton />
-      </div>
+      <ul className="mt-6 grid grid-cols-4 gap-4">
+        {data.map((game) => (
+          <li key={game.id}>
+            <div
+              className="cursor-pointer"
+              onClick={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
+              onKeyDown={() => alert("遊戲詳細介紹頁尚未實作，敬請期待")}
+            >
+              <picture className="relative aspect-game-cover overflow-hidden">
+                <Image
+                  src={game.img}
+                  alt={game.name}
+                  draggable={false}
+                  priority
+                  fill
+                  objectFit="cover"
+                  onError={onImageError}
+                />
+              </picture>
+              <h2>{game.name}</h2>
+            </div>
+          </li>
+        ))}
+      </ul>
     );
   }
-  return <div>實作中...</div>;
+
+  return <div className="mt-6">實作中...</div>;
 };
 
 export default function Home() {
   const { fetch } = useRequest();
-  const [gameList, setGameList] = useState<typeof mockCarouselItems>([]);
+  const [gameList, setGameList] = useState<GameType[]>([]);
 
   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(getAllGamesEndpoint()).then(setGameList);
   }, [fetch]);
 
   return (
@@ -162,12 +223,17 @@ export default function Home() {
       <div>
         <CarouselV2
           items={gameList}
-          uniqueKey="imgAlt"
+          renderKey={(item) => item.id}
           Component={CarouselCard}
         />
       </div>
       <div className="mt-6">
-        <Tabs tabs={tabs} renderTabPaneContent={TabPaneContent} />
+        <Tabs
+          tabs={tabs}
+          renderTabPaneContent={(props) => (
+            <TabPaneContent gameList={gameList} {...props} />
+          )}
+        />
       </div>
     </div>
   );
diff --git a/public/images/game-default-cover.png b/public/images/game-default-cover.png
new file mode 100644
index 00000000..f4b06ee6
Binary files /dev/null and b/public/images/game-default-cover.png differ
diff --git a/requests/games/index.ts b/requests/games/index.ts
index 52f2c7b3..c77c326b 100644
--- a/requests/games/index.ts
+++ b/requests/games/index.ts
@@ -6,7 +6,7 @@ export type GameType = {
   img: string;
   minPlayers: number;
   maxPlayers: number;
-  category?: string;
+  createdOn: string;
 };
 
 export const getAllGamesEndpoint = (): IRequestWrapper<GameType[]> => {
diff --git a/styles/global.css b/styles/global.css
index eddb2cb9..b5c61c95 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,8 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* The height will effect the children's height  */
-#__next {
-  height: 100%;
-}
diff --git a/styles/reset.css b/styles/reset.css
index 782d6c53..f6a77594 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -1,38 +1,17 @@
 /* https://www.joshwcomeau.com/css/custom-css-reset/#one-box-sizing-model-2 */
 
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
-/*
-  2. Remove default margin
-*/
 * {
   margin: 0;
 }
-/*
-  3. Allow percentage-based heights in the application
-*/
-html,
-body {
-  height: 100%;
-}
-/*
-  Typographic tweaks!
-  4. Add accessible line-height
-  5. Improve text rendering
-*/
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
-/*
-  6. Improve media defaults
-*/
 img,
 picture,
 video,
@@ -41,18 +20,12 @@ svg {
   display: block;
   max-width: 100%;
 }
-/*
-  7. Remove built-in form typography styles
-*/
 input,
 button,
 textarea,
 select {
   font: inherit;
 }
-/*
-  8. Avoid text overflows
-*/
 p,
 h1,
 h2,
@@ -63,16 +36,11 @@ h6 {
   overflow-wrap: break-word;
   margin: 0;
 }
-/*
-  9. Create a root stacking context
-*/
-#root,
-#__next {
-  isolation: isolate;
-}
-
-/* Reset hyperlink styles */
 a {
   text-decoration: none;
   color: inherit;
 }
+#root,
+#__next {
+  isolation: isolate;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 91012eab..e333e6c7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,9 +15,16 @@ module.exports = {
       width: {
         18: "4.5rem" /** 72px */,
       },
+      height: {
+        "main-height": "calc(100vh - 100px)",
+      },
+      aspectRatio: {
+        "game-cover": "235 / 156",
+      },
       opacity: {
         4: 0.04,
         8: 0.08,
+        60: 0.6,
       },
       colors: {
         primary: {