diff --git a/.env.sample b/.env.sample
index c498ab59bf1ce21aeb1323ac3409515f3817a0a3..1c34c9dbe25be35997cf8aca0c4effe7c6a3741e 100644
--- a/.env.sample
+++ b/.env.sample
@@ -4,4 +4,7 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="file:./dev.db"
\ No newline at end of file
+DATABASE_URL="file:./dev.db"
+
+IMDB_CLIENT_ID="imdb-client-id"
+IMDB_AUTH="Bearer imdb-auth-id"
\ No newline at end of file
diff --git a/app/games/Game.tsx b/app/games/Game.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..505c865242f55051ed449b693f5dc6bac6e9418a
--- /dev/null
+++ b/app/games/Game.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Game({ id, name, cover }: { id: any, name: any, cover: any }) {
+    return (
+        <div>
+            <h1>{name}</h1>
+            <Link href={`/games/${id}`}>
+                <Image src={"https:" + cover.url} alt={name} width={200} height={200} />
+            </Link>
+        </div>
+    )
+}
diff --git a/app/games/[gameid]/loading.tsx b/app/games/[gameid]/loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..21df37bfccfa1d93ac617419f02d6d2c214504f4
--- /dev/null
+++ b/app/games/[gameid]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+    return (
+        <div>
+            <h1>Game Loading...</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/games/[gameid]/page.tsx b/app/games/[gameid]/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c385146eba130718ad893e2be94dfe6368acaab0
--- /dev/null
+++ b/app/games/[gameid]/page.tsx
@@ -0,0 +1,35 @@
+import Image from "next/image";
+
+type DetailView = {
+    id: number;
+    name: string;
+    cover: { url: string };
+    summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+
+
+export default async function GameDetail({ params }: { params: any }) {
+    const res = await fetch("https://api.igdb.com/v4/games", {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+            'Authorization': `${process.env.IMDB_AUTH}`,
+        },
+        body: `fields name,cover.*,summary; where cover != null; where id = ${params.gameid};`,
+    });
+    const data: DetailViewArray = await res.json()
+
+    return (
+        <div>
+            Game Detail
+            <h1>{data[0].name}</h1>
+            <Image src={"https:" + data[0].cover.url} alt={data[0].name} width={200} height={200} priority />
+            <p>{data[0].summary}</p>
+        </div>
+    )
+}
diff --git a/app/games/loading.tsx b/app/games/loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d1c0576dc15204c01a5555f3f6719da8321ee36
--- /dev/null
+++ b/app/games/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+    return (
+        <div>
+            <h1>Games Loading...</h1>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/games/page.tsx b/app/games/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80ac725aa80f7ca381a88f235e1901988e95ad68
--- /dev/null
+++ b/app/games/page.tsx
@@ -0,0 +1,33 @@
+import Game from "./Game";
+
+type DetailView = {
+    id: number;
+    name: string;
+    cover: { url: string };
+    summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+export default async function GamesList() {
+    const res = await fetch("https://api.igdb.com/v4/games", {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+            'Authorization': `${process.env.IMDB_AUTH}`,
+        },
+        body: `fields name,cover.*; limit 10; where cover != null;`,
+    });
+    const data: DetailViewArray = await res.json()
+
+    return (
+        <div>
+            Games List Page
+            {data.map((game: any) => (
+                <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+            ))}
+        </div>
+    )
+}
diff --git a/next.config.js b/next.config.js
index dafb0c88e961e6e23d276af61ca2bca5650c03b2..0c342d7cd713e78f9af9d4e49f04ffa6af088cf5 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  images: {
+    domains: ["images.igdb.com"]
+  }
 }
 
 module.exports = nextConfig