diff --git a/TODO.md b/TODO.md
index 8d4d65d..80d8d17 100644
--- a/TODO.md
+++ b/TODO.md
@@ -15,6 +15,7 @@
 - [x] Basic UI layout
   - [x] Replace all tags by mui
   - [x] Add a scroll to top button
+  - [ ] Format the prices for currency
   - [x] Add float sidebar
     - [x] Enable button to enable and disable sidebar
     - [x] Add float sidebar with website socials and theme toggle
@@ -30,6 +31,36 @@
     - [x] Create section for popular games
     - [x] Create section for most liked games
     - [x] Create section for future games
+  - [x] Create a game details page
+    - [x] Create the main details of a game
+      - [x] Display name, cover and release date
+      - [x] Display a short description of the game
+      - [x] Show game details
+        - [x] Display the real game website
+        - [x] Display the age rating
+        - [x] Display the game protection
+        - [x] Display the crack status
+        - [x] Display the game hearts quantity
+      - [x] Display the game platforms with a link for all platform games
+      - [x] Display the game genres with a link for all genre games
+      - [x] Display the game tags with a link for all tag games
+      - [x] Display the game categories with a link for all category games
+      - [x] Display the game publishers
+      - [x] Display the game developers
+    - [x] Display the torrent links availables for that game
+    - [x] Display the game availability on platforms to be purchased
+    - [x] Display the game detailed description
+    - [x] Display the game gallery
+    - [x] Display some game reviews
+    - [x] Display the game critics
+    - [x] Display the available DLCs for the game
+      - [x] Display the DLC name
+      - [x] Display the DLC release date
+      - [x] Display the DLC platforms
+      - [x] Display the DLC gallery
+      - [x] Display the DLC availability on platforms to be purchased
+    - [x] Display the game requirements for each OS and type (minimum, recommended or maximum)
+    - [x] Display the game languages availability
 - [ ] Game news and reviews section
   - [ ] Fetch and display the latest gaming news
   - [ ] Add reviews section with filtering options
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 546aafa..d54cb7b 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -6,6 +6,7 @@ import { DefaultLayout } from './layouts'
 
 export const Routes = () => {
   const Home = L(lazy(() => import('./pages/Home')))
+  const GameDetails = L(lazy(() => import('./pages/Game/Details')))
 
   return useRoutes([
     {
@@ -15,6 +16,13 @@ export const Routes = () => {
           path: '/',
           element: <Home />,
         },
+        {
+          path: '/games',
+          children: [
+            { index: true, element: <>Games</> },
+            { path: ':slug', element: <GameDetails /> },
+          ],
+        },
       ],
     },
   ])
diff --git a/src/components/Header/modules/HeaderCarousel.tsx b/src/components/Header/modules/HeaderCarousel.tsx
index e3599cc..0d33cf2 100644
--- a/src/components/Header/modules/HeaderCarousel.tsx
+++ b/src/components/Header/modules/HeaderCarousel.tsx
@@ -22,10 +22,10 @@ function HeaderCarousel(props: HeaderCarouselProps) {
       emulateTouch
       preventMovementUntilSwipeScrollTolerance={true}
       swipeScrollTolerance={50}>
-      {banners.map((banner) => (
-        <Box className="relative h-screen" key={banner.id}>
+      {banners.map(({ id, banner, related }) => (
+        <Box className="relative h-screen" key={id}>
           <img
-            src={banner.banner}
+            src={banner}
             alt="Game Banner"
             className="w-full h-full object-cover"
           />
@@ -34,27 +34,27 @@ function HeaderCarousel(props: HeaderCarouselProps) {
               <Box className="flex flex-col max-w-md">
                 <Typography className="text-4xl md:text-5xl font-bold mb-4">
                   <Tooltip
-                    title={`Go to ${banner.title} details`}
+                    title={`Go to ${related.title} details`}
                     disableInteractive>
                     <Link
-                      href="#"
+                      href={`games/${related.slug}`}
                       className="hover:text-yellow-400 transition duration-300">
-                      {banner.title}
+                      {related.title}
                     </Link>
                   </Tooltip>
                 </Typography>
                 <Typography className="text-xl mb-2">
-                  Best Price: $59.99
+                  Best Price: {related.best_price}
                 </Typography>
               </Box>
 
               <Stack className="flex flex-col max-w-xl md:text-right text-center">
                 <Typography className="mb-4">
-                  {banner.description}
+                  {related.short_description}
                 </Typography>
                 <Typography className="mb-2">Available on:</Typography>
                 <Box className="flex md:justify-end justify-center gap-2 mb-4">
-                  {banner.platforms.map(({ id, name }) => (
+                  {related.platforms.map(({ id, name }) => (
                     <Box
                       component="span"
                       className="bg-gray-800 px-3 py-1 rounded-full text-sm"
@@ -64,7 +64,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
                   ))}
                 </Box>
                 <Box className="flex flex-wrap md:justify-end justify-center gap-2">
-                  {banner.tags.map(({ id, name }) => (
+                  {related.tags.map(({ id, name }) => (
                     <Box
                       component="span"
                       className="bg-gray-700 px-3 py-1 rounded-full text-sm"
diff --git a/src/mocks/banners.ts b/src/mocks/banners.ts
index 5d76276..086a2ce 100644
--- a/src/mocks/banners.ts
+++ b/src/mocks/banners.ts
@@ -4,121 +4,151 @@ export const MOCK_BANNERS: Banner[] = [
   {
     id: 1,
     banner: 'https://images5.alphacoders.com/112/thumb-1920-1129255.jpg',
-    title: 'Black Myth: Wukong',
-    description: `Black Myth: Wukong is an action RPG that draws on Chinese
-        mythology. Fight through a richly detailed world inspired
-        by ancient Chinese literature.`,
-    platforms: [
-      { id: 1, slug: 'pc', name: 'PC' },
-      { id: 2, slug: 'ps5', name: 'PS5' },
-      { id: 3, slug: 'xbox-series-x', name: 'Xbox Series X' },
-    ],
-    tags: [
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-      { id: 4, slug: 'fantasy', name: 'Fantasy' },
-      { id: 5, slug: 'mythologic', name: 'Mythologic' },
-      { id: 12, slug: 'uncracked', name: 'Uncracked' },
-      { id: 9, slug: 'denuvo', name: 'Denuvo' },
-      { id: 13, slug: 'souls', name: 'Souls' },
-    ],
+    related: {
+      id: 1,
+      best_price: 22999,
+      slug: 'black-myth-wukong',
+      title: 'Black Myth: Wukong',
+      short_description: `Black Myth: Wukong is an action RPG that draws on Chinese
+          mythology. Fight through a richly detailed world inspired
+          by ancient Chinese literature.`,
+      platforms: [
+        { id: 1, slug: 'pc', name: 'PC' },
+        { id: 2, slug: 'ps5', name: 'PS5' },
+        { id: 3, slug: 'xbox-series-x', name: 'Xbox Series X' },
+      ],
+      tags: [
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+        { id: 4, slug: 'fantasy', name: 'Fantasy' },
+        { id: 5, slug: 'mythologic', name: 'Mythologic' },
+        { id: 12, slug: 'uncracked', name: 'Uncracked' },
+        { id: 9, slug: 'denuvo', name: 'Denuvo' },
+        { id: 13, slug: 'souls', name: 'Souls' },
+      ],
+    },
   },
   {
     id: 2,
     banner: 'https://images2.alphacoders.com/137/thumb-1920-1370582.jpeg',
-    title: 'God of War: Ragnarok',
-    description: `God of War: Ragnarok follows Kratos and Atreus as they
-        face the apocalyptic events of Ragnarok. Experience an
-        epic journey with intense combat and rich storytelling.`,
-    platforms: [
-      { id: 2, slug: 'ps5', name: 'PS5' },
-      { id: 4, slug: 'ps4', name: 'PS4' },
-    ],
-    tags: [
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-      { id: 5, slug: 'mythologic', name: 'Mythologic' },
-      { id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
-    ],
+    related: {
+      id: 2,
+      best_price: 14999,
+      slug: 'god-of-war-ragnarok',
+      title: 'God of War: Ragnarok',
+      short_description: `God of War: Ragnarok follows Kratos and Atreus as they
+          face the apocalyptic events of Ragnarok. Experience an
+          epic journey with intense combat and rich storytelling.`,
+      platforms: [
+        { id: 2, slug: 'ps5', name: 'PS5' },
+        { id: 4, slug: 'ps4', name: 'PS4' },
+      ],
+      tags: [
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+        { id: 5, slug: 'mythologic', name: 'Mythologic' },
+        { id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
+      ],
+    },
   },
   {
     id: 3,
     banner: 'https://images7.alphacoders.com/124/thumb-1920-1244875.jpg',
-    title: 'The Last of Us: Part II - Remastered',
-    description: `The Last of Us Part II is an action-adventure game with survival horror elements released as an exclusive for PlayStation 4 in 2020
-      as the sequel to the Last of Us released in 2013. The action of the game is set in the post-apocalyptic United States around five years after the
-      events presented in the first game where the world has been devastated by a mysterious pandemic.`,
-    platforms: [{ id: 2, slug: 'ps5', name: 'PS5' }],
-    tags: [
-      { id: 7, slug: 'tps', name: 'TPS' },
-      { id: 6, slug: 'thriller', name: 'Thriller' },
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-      { id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
-    ],
+    related: {
+      id: 3,
+      best_price: 19900,
+      slug: 'the-last-of-us-part-ii-remastered',
+      title: 'The Last of Us: Part II - Remastered',
+      short_description: `The Last of Us Part II is an action-adventure game with survival horror elements released as an exclusive for PlayStation 4 in 2020
+        as the sequel to the Last of Us released in 2013. The action of the game is set in the post-apocalyptic United States around five years after the
+        events presented in the first game where the world has been devastated by a mysterious pandemic.`,
+      platforms: [{ id: 2, slug: 'ps5', name: 'PS5' }],
+      tags: [
+        { id: 7, slug: 'tps', name: 'TPS' },
+        { id: 6, slug: 'thriller', name: 'Thriller' },
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+        { id: 10, slug: 'action-adventure', name: 'Action-Adventure' },
+      ],
+    },
   },
   {
     id: 4,
     banner: 'https://images7.alphacoders.com/133/thumb-1920-1335668.jpeg',
-    title: 'Alan Wake 2',
-    description: `Alan Wake 2 is a survival horror game developed by Remedy Entertainment.
-      This is a sequel to Alan Wake, released in 2010 - a game that set the bar quite high.
-      This time, the developers are aiming even higher. The question is, will they succeed?`,
-    platforms: [
-      { id: 2, slug: 'ps5', name: 'PS5' },
-      { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
-      { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
-      { id: 3, slug: 'pc', name: 'PC' },
-      { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
-    ],
-    tags: [
-      { id: 14, slug: 'survival', name: 'Survival' },
-      { id: 15, slug: 'horror', name: 'Horror' },
-      { id: 6, slug: 'thriller', name: 'Thriller' },
-      { id: 16, slug: 'puzzle', name: 'Puzzle' },
-      { id: 7, slug: 'tps', name: 'TPS' },
-      { id: 2, slug: 'adventure', name: 'Adventure' },
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-    ],
+    related: {
+      id: 4,
+      best_price: 24999,
+      slug: 'alan-wake-2',
+      title: 'Alan Wake 2',
+      short_description: `Alan Wake 2 is a survival horror game developed by Remedy Entertainment.
+        This is a sequel to Alan Wake, released in 2010 - a game that set the bar quite high.
+        This time, the developers are aiming even higher. The question is, will they succeed?`,
+      platforms: [
+        { id: 2, slug: 'ps5', name: 'PS5' },
+        { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
+        { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
+        { id: 3, slug: 'pc', name: 'PC' },
+        { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
+      ],
+      tags: [
+        { id: 14, slug: 'survival', name: 'Survival' },
+        { id: 15, slug: 'horror', name: 'Horror' },
+        { id: 6, slug: 'thriller', name: 'Thriller' },
+        { id: 16, slug: 'puzzle', name: 'Puzzle' },
+        { id: 7, slug: 'tps', name: 'TPS' },
+        { id: 2, slug: 'adventure', name: 'Adventure' },
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+      ],
+    },
   },
   {
     id: 5,
     banner: 'https://images8.alphacoders.com/129/thumb-1920-1293291.png',
-    title: 'Hades II',
-    description: `Hades II is the sequel from the Supergiant Games studio, consisting of the most enjoyable aspects of the original indie game and developing them.
-      Like its predecessor, Hades 2, action-packed, roguelike RPG continues the story in the world of Greek mythology, presenting a whole new, infinitely playable
-      adventure where myths about the underworld twist with tales of witchcraft and magic.`,
-    platforms: [
-      { id: 1, slug: 'ps5', name: 'PS5' },
-      { id: 2, slug: 'ps4', name: 'PS4' },
-      { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
-      { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
-      { id: 3, slug: 'pc', name: 'PC' },
-      { id: 7, slug: 'xbox-one', name: 'Xbox One' },
-    ],
-    tags: [
-      { id: 17, slug: 'rogue', name: 'Rogue' },
-      { id: 8, slug: 'rpg', name: 'RPG' },
-      { id: 2, slug: 'adventure', name: 'Adventure' },
-      { id: 1, slug: 'action', name: 'Action' },
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-    ],
+    related: {
+      id: 5,
+      best_price: 19900,
+      slug: 'hades-ii',
+      title: 'Hades II',
+      short_description: `Hades II is the sequel from the Supergiant Games studio, consisting of the most enjoyable aspects of the original indie game and developing them.
+        Like its predecessor, Hades 2, action-packed, roguelike RPG continues the story in the world of Greek mythology, presenting a whole new, infinitely playable
+        adventure where myths about the underworld twist with tales of witchcraft and magic.`,
+      platforms: [
+        { id: 1, slug: 'ps5', name: 'PS5' },
+        { id: 2, slug: 'ps4', name: 'PS4' },
+        { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
+        { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
+        { id: 3, slug: 'pc', name: 'PC' },
+        { id: 7, slug: 'xbox-one', name: 'Xbox One' },
+      ],
+      tags: [
+        { id: 17, slug: 'rogue', name: 'Rogue' },
+        { id: 8, slug: 'rpg', name: 'RPG' },
+        { id: 2, slug: 'adventure', name: 'Adventure' },
+        { id: 1, slug: 'action', name: 'Action' },
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+      ],
+    },
   },
   {
     id: 6,
     banner: 'https://images7.alphacoders.com/132/thumb-1920-1323282.jpeg',
-    title: 'Star Wars: Outlaws',
-    description: `Star Wars: Outlaws is an action-adventure game developed by Massive Entertainment with cooperation from other Ubisoft divisions.
-      This highly anticipated official video game of the Star Wars franchise was published by Ubisoft under licence by Lucasfilm Games in August of 2024.`,
-    platforms: [
-      { id: 1, slug: 'ps5', name: 'PS5' },
-      { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
-      { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
-      { id: 3, slug: 'pc', name: 'PC' },
-      { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
-    ],
-    tags: [
-      { id: 2, slug: 'adventure', name: 'Adventure' },
-      { id: 1, slug: 'action', name: 'Action' },
-      { id: 3, slug: 'single-player', name: 'Single-player' },
-      { id: 18, slug: 'shooting', name: 'Shooting' },
-    ],
+    related: {
+      id: 6,
+      best_price: 34999,
+      slug: 'star-wars-outlaws',
+      title: 'Star Wars: Outlaws',
+      short_description: `Star Wars: Outlaws is an action-adventure game developed by Massive Entertainment with cooperation from other Ubisoft divisions.
+        This highly anticipated official video game of the Star Wars franchise was published by Ubisoft under licence by Lucasfilm Games in August of 2024.`,
+      platforms: [
+        { id: 1, slug: 'ps5', name: 'PS5' },
+        { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
+        { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
+        { id: 3, slug: 'pc', name: 'PC' },
+        { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
+      ],
+      tags: [
+        { id: 2, slug: 'adventure', name: 'Adventure' },
+        { id: 1, slug: 'action', name: 'Action' },
+        { id: 3, slug: 'single-player', name: 'Single-player' },
+        { id: 18, slug: 'shooting', name: 'Shooting' },
+      ],
+    },
   },
 ]
diff --git a/src/mocks/game.ts b/src/mocks/game.ts
new file mode 100644
index 0000000..73e7b14
--- /dev/null
+++ b/src/mocks/game.ts
@@ -0,0 +1,367 @@
+import { GameDetails } from '@/types'
+
+export const MOCK_GAME_DETAILS: GameDetails = {
+  id: 1,
+  cover: 'https://images5.alphacoders.com/112/thumb-1920-1129255.jpg',
+  title: 'Black Myth: Wukong',
+  slug: 'black-myth-wukong',
+  release: '2024-09-01',
+  age: 14,
+  about: `Black Myth: Wukong is an action RPG rooted in Chinese mythology. The story is based on Journey to the West, one of the Four Great Classical Novels of Chinese literature.
+      You shall set out as the Destined One to venture into the challenges and marvels ahead, to uncover the obscured truth beneath the veil of a glorious legend from the past.
+      <br><br><img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/extras/img_steamline.png?t=1725007201" className="w-full" /><br><br><img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/extras/SteamGIF_Scene.gif?t=1725007201" />
+      <h2 class="bb_tag">• Explore a Land of Vast Wonders</h2><br><i>&quot;A world unseen, where wonders gleam,<br>And with each stride, a new scene streams.&quot;</i><br><br>Enter a fascinating realm filled with the wonders and discoveries of ancient Chinese mythology!<br>
+      As the Destined One, you shall traverse an array of breathtaking and distinctive landscapes from the classic tale, composing an epic of adventure that is seen anew.<br><br><br><img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/extras/SteamGIF_Boss.gif?t=1725007201" />
+      <h2 class="bb_tag">• Confront Mighty Foes, Old and New</h2><br><i>&quot;Heroic Monkey, might and fame, <br>Adversaries rise, to test his name.&quot;</i><br><br>One of the major highlights of Journey to the West is its diverse cast of adversaries, each with their unique strengths.<br>
+      As the Destined One, you will encounter powerful foes and worthy rivals throughout your journey. Fearlessly engage them in epic battles where surrender is not an option.<br><br><br><img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/extras/SteamGIF_Battle.gif?t=1725007201" />
+      <h2 class="bb_tag">• Temper Your Mastery of Varied Spells</h2><br><i>&quot;Spells unbound, talents in play,<br>Unleashed abilities seize the day.&quot;</i><br><br>Spells, transformations, and magic vessels of all manifestations, in which some counteract while others amplify, have long been iconic combat elements of Chinese mythology.
+      <br>As the Destined One, aside from mastering various staff techniques, you can also freely combine different spells, abilities, weapons, and equipment to find a winning strategy that best suits your combat style.<br><br><br><img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/extras/SteamGIF_NPC.gif?t=1725007201" />
+      <h2 class="bb_tag">• Discover Heartfelt Tales Behind Every Facade</h2><br><i>&quot;Within all souls, both wild and tame,<br>There thrives a tale of life's fierce flame.&quot;</i><br><br>Beneath the ferocity and craftiness of your foes lies an engaging tapestry of their origins, personalities, and motivations waiting to be revealed.<br>
+      As the Destined One, you will uncover the stories behind a variety of characters, delving beyond your battles with them to taste the love, hate, greed, and fury they once held and still carry within.`,
+  short_description: `Black Myth: Wukong is an action RPG that draws on Chinese
+      mythology. Fight through a richly detailed world inspired
+      by ancient Chinese literature.`,
+  website: 'https://www.heishenhua.com/',
+  hearts_count: 839123,
+  badge: 'hot',
+  crack: {
+    id: 1,
+    status: 'Uncracked',
+    torrent: null,
+    cracked_at: null,
+    by: null,
+    protection: {
+      id: 1,
+      name: 'Denuvo',
+    },
+  },
+  galleries: [
+    {
+      id: 1,
+      path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/ss_86c4b7462bba219a0d0b89931a35812b9f188976.1920x1080.jpg?t=1725007201',
+      thumbnail:
+        'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/ss_86c4b7462bba219a0d0b89931a35812b9f188976.600x338.jpg?t=1725007201',
+      media_type: { id: 1, name: 'photo' },
+    },
+    {
+      id: 2,
+      path: 'http://video.akamai.steamstatic.com/store_trailers/257048125/movie_max.mp4?t=1724238304',
+      thumbnail:
+        'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/257048125/movie.293x165.jpg?t=1724238304',
+      media_type: { id: 2, name: 'video' },
+    },
+  ],
+  reviews: [
+    {
+      id: 1,
+      played: true,
+      rate: 10,
+      comment: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!`,
+      user: {
+        id: 1,
+        name: 'Player 1',
+        email: 'dev@dev.com',
+        nickname: 'theplayer1',
+        birthdate: '2000-03-25',
+        created_at: '2024-01-01T00:00:00.000Z',
+        updated_at: '2024-01-01T00:00:00.000Z',
+        profile: {
+          photo:
+            'https://wac-cdn.atlassian.com/dam/jcr:ba03a215-2f45-40f5-8540-b2015223c918/Max-R_Headshot%20(1).jpg?cdnVersion=2199',
+          share: true,
+        },
+      },
+    },
+    {
+      id: 2,
+      played: false,
+      rate: 5.8,
+      comment: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!`,
+      user: {
+        id: 2,
+        name: 'Player 2',
+        email: 'dev2@dev.com',
+        nickname: 'theplayer2',
+        birthdate: '2000-03-25',
+        created_at: '2024-01-01T00:00:00.000Z',
+        updated_at: '2024-01-01T00:00:00.000Z',
+        profile: {
+          photo:
+            'https://wac-cdn.atlassian.com/dam/jcr:ba03a215-2f45-40f5-8540-b2015223c918/Max-R_Headshot%20(1).jpg?cdnVersion=2199',
+          share: true,
+        },
+      },
+    },
+    {
+      id: 3,
+      played: false,
+      rate: 5,
+      comment:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!',
+      user: {
+        id: 3,
+        name: 'Player 3',
+        email: 'dev3@dev.com',
+        nickname: 'theplayer3',
+        birthdate: '2000-03-25',
+        created_at: '2024-01-01T00:00:00.000Z',
+        updated_at: '2024-01-01T00:00:00.000Z',
+        profile: {
+          photo:
+            'https://wac-cdn.atlassian.com/dam/jcr:ba03a215-2f45-40f5-8540-b2015223c918/Max-R_Headshot%20(1).jpg?cdnVersion=2199',
+          share: true,
+        },
+      },
+    },
+    {
+      id: 4,
+      played: true,
+      rate: 2.4,
+      comment:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laudantium praesentium architecto quis iusto aut et non facere, incidunt quo corrupti? Quibusdam ipsum voluptate quaerat distinctio ea. Quasi, debitis maiores!',
+      user: {
+        id: 4,
+        name: 'Player 4',
+        email: 'dev4@dev.com',
+        nickname: 'theplayer4',
+        birthdate: '2000-03-25',
+        created_at: '2024-01-01T00:00:00.000Z',
+        updated_at: '2024-01-01T00:00:00.000Z',
+        profile: {
+          photo:
+            'https://wac-cdn.atlassian.com/dam/jcr:ba03a215-2f45-40f5-8540-b2015223c918/Max-R_Headshot%20(1).jpg?cdnVersion=2199',
+          share: true,
+        },
+      },
+    },
+  ],
+  dlcs: [
+    {
+      id: 1,
+      release: '2024-08-19',
+      name: 'Black Myth: Wukong Deluxe Edition Upgrade',
+      cover:
+        'https://cdn1.epicgames.com/spt-assets/ca9ef1bcf2f54043baac351366aec677/black-myth-wukong-1t5ca.jpg',
+      galleries: [
+        {
+          id: 1,
+          path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_fda62ee2e4ead7eac83ef0e825c6a644d6d38fa2.1920x1080.jpg?t=1725007043',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_fda62ee2e4ead7eac83ef0e825c6a644d6d38fa2.600x338.jpg?t=1725007043',
+          media_type: { id: 1, name: 'photo' },
+        },
+        {
+          id: 2,
+          path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.1920x1080.jpg?t=1725007043',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.600x338.jpg?t=1725007043',
+          media_type: { id: 1, name: 'photo' },
+        },
+        {
+          id: 3,
+          path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_fda62ee2e4ead7eac83ef0e825c6a644d6d38fa2.1920x1080.jpg?t=1725007043',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_fda62ee2e4ead7eac83ef0e825c6a644d6d38fa2.600x338.jpg?t=1725007043',
+          media_type: { id: 1, name: 'photo' },
+        },
+        {
+          id: 4,
+          path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.1920x1080.jpg?t=1725007043',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.600x338.jpg?t=1725007043',
+          media_type: { id: 1, name: 'photo' },
+        },
+        {
+          id: 5,
+          path: 'http://video.akamai.steamstatic.com/store_trailers/257048125/movie_max.mp4?t=1724238304',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/257048125/movie.293x165.jpg?t=1724238304',
+          media_type: { id: 2, name: 'video' },
+        },
+        {
+          id: 6,
+          path: 'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.1920x1080.jpg?t=1725007043',
+          thumbnail:
+            'https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2672610/ss_86c4b7462bba219a0d0b89931a35812b9f188976.600x338.jpg?t=1725007043',
+          media_type: { id: 1, name: 'photo' },
+        },
+      ],
+      platforms: [
+        { id: 1, slug: 'ps5', name: 'PS5' },
+        { id: 3, slug: 'pc', name: 'PC' },
+        { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
+        { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
+        { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
+      ],
+      categories: [
+        { id: 1, slug: 'single-player', name: 'Single-player' },
+        {
+          id: 2,
+          slug: 'downloadable-content',
+          name: 'Downloadable Content',
+        },
+      ],
+      genres: [
+        { id: 1, slug: 'action', name: 'Action' },
+        { id: 2, slug: 'adventure', name: 'Adventure' },
+        { id: 8, slug: 'rpg', name: 'RPG' },
+        { id: 9, slug: 'souls', name: 'Souls' },
+      ],
+      companies: [
+        {
+          id: 1,
+          name: 'Steam',
+          slug: 'steam',
+          url: 'https://store.steampowered.com/app/2672610/Black_Myth_Wukong__Atualizacao_para_Edicao_Digital_Deluxe/',
+          country: 'Bellevue, Washington',
+          logo: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Steam_Logo.png',
+          company_game_id: '2672610',
+          price: 5000,
+        },
+      ],
+    },
+  ],
+  tags: [
+    { id: 13, slug: 'souls', name: 'Souls' },
+    { id: 12, slug: 'uncracked', name: 'Uncracked' },
+    { id: 9, slug: 'denuvo', name: 'Denuvo' },
+    { id: 8, slug: 'rpg', name: 'RPG' },
+    { id: 1, slug: 'action', name: 'Action' },
+    { id: 2, slug: 'adventure', name: 'Adventure' },
+    { id: 3, slug: 'single-player', name: 'Single-player' },
+    { id: 4, slug: 'fantasy', name: 'Fantasy' },
+    { id: 5, slug: 'mythologic', name: 'Mythologic' },
+  ],
+  publishers: [
+    {
+      id: 1,
+      name: 'Game Science',
+      acting: true,
+      created_at: '2020-08-01T08:00:00.000Z',
+    },
+  ],
+  developers: [
+    {
+      id: 1,
+      name: 'Game Science',
+      acting: true,
+      created_at: '2020-08-01T08:00:00.000Z',
+    },
+  ],
+  critics: [
+    {
+      id: 1,
+      logo: 'https://w7.pngwing.com/pngs/41/567/png-transparent-metacritic-video-game-review-aggregator-app-miscellaneous-game-text.png',
+      name: 'Metacritic',
+      rate: 7.9,
+      url: 'https://www.metacritic.com/game/black-myth-wukong/',
+      created_at: '2024-08-19T00:00:00.000Z',
+    },
+  ],
+  languages: [
+    {
+      id: 1,
+      iso: 'zh-cn',
+      name: 'Simplified Chinese',
+      dubs: true,
+      menu: true,
+      subtitles: true,
+    },
+    {
+      id: 2,
+      iso: 'en-us',
+      name: 'English',
+      dubs: true,
+      menu: true,
+      subtitles: true,
+    },
+    {
+      id: 3,
+      iso: 'pt-br',
+      name: 'Brazilian Portuguese',
+      dubs: false,
+      menu: true,
+      subtitles: true,
+    },
+  ],
+  companies: [
+    {
+      id: 1,
+      name: 'Steam',
+      slug: 'steam',
+      country: 'Bellevue, Washington',
+      url: 'https://store.steampowered.com/app/2358720/Black_Myth_Wukong/',
+      company_game_id: '2358720',
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Steam_Logo.png',
+      price: 22999,
+    },
+    {
+      id: 2,
+      name: 'Epic Games',
+      slug: 'epic-games',
+      country: 'Cary, North Carolina',
+      url: 'https://store.epicgames.com/pt-BR/p/black-myth-wukong-87a72b/',
+      company_game_id: 'black-myth-wukong-87a72b',
+      logo: 'https://w7.pngwing.com/pngs/787/226/png-transparent-epic-games-logo-icons-logos-emojis-iconic-brands.png',
+      price: 22999,
+    },
+  ],
+  categories: [],
+  platforms: [
+    { id: 1, slug: 'ps5', name: 'PS5' },
+    { id: 3, slug: 'pc', name: 'PC' },
+    { id: 4, slug: 'xbox-series-s', name: 'Xbox Series S' },
+    { id: 5, slug: 'xbox-series-x', name: 'Xbox Series X' },
+    { id: 6, slug: 'geforce-now', name: 'GeForce Now' },
+  ],
+  genres: [
+    { id: 1, slug: 'action', name: 'Action' },
+    { id: 2, slug: 'adventure', name: 'Adventure' },
+    { id: 3, slug: 'single-player', name: 'Single-player' },
+    { id: 4, slug: 'fantasy', name: 'Fantasy' },
+    { id: 5, slug: 'mythologic', name: 'Mythologic' },
+    { id: 9, slug: 'souls', name: 'Souls' },
+  ],
+  requirements: [
+    {
+      id: 1,
+      bits: 64,
+      cpu: 'Intel Core i5-8400 / AMD Ryzen 5 1600',
+      ram: '16 GB RAM',
+      gpu: 'NVIDIA GeForce GTX 1060 6GB / AMD Radeon RX 580 8GB',
+      dx: 'Version 11',
+      rom: '130 GB available space',
+      so: 'Windows 10 64-bit',
+      obs: 'HDD Supported, SSD Recommended. The above specifications were tested with DLSS/FSR/XeSS enabled.',
+      type: { id: 1, name: 'minimum', type: 'windows' },
+    },
+    {
+      id: 2,
+      bits: 64,
+      cpu: 'Intel Core i7-9700 / AMD Ryzen 5 5500',
+      ram: '16 GB RAM',
+      gpu: 'NVIDIA GeForce RTX 2060 / AMD Radeon RX 5700 XT / INTEL Arc A750',
+      dx: 'Version 12',
+      rom: '130 GB available space',
+      so: 'Windows 10 64-bit',
+      obs: 'SSD Required. The above specifications were tested with DLSS/FSR/XeSS enabled.',
+      type: { id: 2, name: 'recommended', type: 'windows' },
+    },
+  ],
+  torrents: [
+    {
+      id: 1,
+      posted_in: '2024-02-09T00:00:00.000Z',
+      url: 'https://google.com',
+      provider: {
+        id: 1,
+        name: 'FitGirl Repacks',
+        url: 'https://google.com',
+      },
+    },
+  ],
+}
diff --git a/src/mocks/index.ts b/src/mocks/index.ts
index b1a1433..2989b07 100644
--- a/src/mocks/index.ts
+++ b/src/mocks/index.ts
@@ -1,3 +1,4 @@
+export * from './game'
 export * from './tags'
 export * from './games'
 export * from './genres'
diff --git a/src/pages/Game/Details.tsx b/src/pages/Game/Details.tsx
new file mode 100644
index 0000000..1e3547f
--- /dev/null
+++ b/src/pages/Game/Details.tsx
@@ -0,0 +1,126 @@
+import { Box, Container, List, Stack, Typography } from '@mui/material'
+
+import { MOCK_GAME_DETAILS } from '@/mocks'
+
+import {
+  Availables,
+  Critics,
+  DLCs,
+  Galleries,
+  Languages,
+  MainDetails,
+  Requirements,
+  ReviewCard,
+  Torrents,
+} from './modules'
+
+function Details() {
+  const game = MOCK_GAME_DETAILS
+
+  return (
+    <Stack className="dark:bg-theme-dark-900 bg-white dark:text-white text-black p-6">
+      <Container maxWidth="xl" className="space-y-6">
+        <MainDetails game={game} />
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            Available at
+          </Typography>
+          {game.companies.map((company) => (
+            <Availables key={company.id} company={company} />
+          ))}
+        </Box>
+
+        {game.torrents.length > 0 && (
+          <Box component="section" className="flex flex-col gap-4">
+            <Typography
+              variant="h2"
+              className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+              Torrents
+            </Typography>
+            {game.torrents.map((torrent) => (
+              <Torrents key={torrent.id} torrent={torrent} />
+            ))}
+          </Box>
+        )}
+
+        <Box
+          component="section"
+          className="my-4 text-lg leading-relaxed text-center animate-fade-in w-full flex flex-col items-center gap-2"
+          dangerouslySetInnerHTML={{ __html: game.about }}
+        />
+
+        <Box component="section" className="my-6">
+          <Galleries galleries={game.galleries} />
+        </Box>
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            Reviews
+          </Typography>
+          <Box className="grid sm:grid-cols-2 grid-cols-1 gap-4">
+            {game.reviews.map((review) => (
+              <ReviewCard key={review.id} review={review} />
+            ))}
+          </Box>
+        </Box>
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            Críticas
+          </Typography>
+          <List className="flex flex-col gap-4">
+            {game.critics.map((critic) => (
+              <Critics key={critic.id} critic={critic} />
+            ))}
+          </List>
+        </Box>
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            Downloadable Content (DLC)
+          </Typography>
+          {game.dlcs.length > 0 ? (
+            <List className="flex flex-col gap-4 sm:text-left text-center">
+              {game.dlcs.map((dlc) => (
+                <DLCs key={dlc.id} dlc={dlc} />
+              ))}
+            </List>
+          ) : (
+            <Typography>No one DLC available for this game.</Typography>
+          )}
+        </Box>
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            System Requirements
+          </Typography>
+
+          <Requirements requirements={game.requirements} />
+        </Box>
+
+        <Box component="section" className="flex flex-col gap-4">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+            Languages Supported
+          </Typography>
+
+          <Languages languages={game.languages} />
+        </Box>
+      </Container>
+    </Stack>
+  )
+}
+
+export default Details
diff --git a/src/pages/Game/modules/Availables.tsx b/src/pages/Game/modules/Availables.tsx
new file mode 100644
index 0000000..3a946c9
--- /dev/null
+++ b/src/pages/Game/modules/Availables.tsx
@@ -0,0 +1,56 @@
+import { Box, Link, Typography } from '@mui/material'
+
+import { Company } from '@/types'
+
+interface AvailablesProps {
+  company: Company
+}
+
+function Availables(props: AvailablesProps) {
+  const { company } = props
+
+  return (
+    <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg duration-500 relative flex items-center gap-4 sm:flex-row flex-col sm:text-left text-center">
+      <img
+        src={company.logo}
+        alt={company.name}
+        className="w-16 h-16 object-contain rounded-full shadow-md"
+      />
+      <Box>
+        <Typography
+          variant="h2"
+          className="font-bold sm:text-2xl text-xl ">
+          <Link
+            target="_blank"
+            href={`/companies/${company.slug}`}
+            className="dark:text-white text-black">
+            {company.name}
+          </Link>
+        </Typography>
+        <Typography
+          component="p"
+          className="dark:text-gray-300 text-gray-700">
+          Available in {company.country}
+        </Typography>
+        <Typography
+          component="p"
+          className="dark:text-gray-300 text-gray-700">
+          Price:{' '}
+          {(company.price / 100).toLocaleString('en-US', {
+            currency: 'USD',
+            style: 'currency',
+          })}
+        </Typography>
+        <Link
+          href={company.url}
+          className="text-theme-red-900 underline hover:opacity-70 transition-opacity duration-300 hover:text-red-500"
+          target="_blank"
+          rel="noopener noreferrer">
+          Buy Now
+        </Link>
+      </Box>
+    </Box>
+  )
+}
+
+export default Availables
diff --git a/src/pages/Game/modules/Critics.tsx b/src/pages/Game/modules/Critics.tsx
new file mode 100644
index 0000000..7e351a9
--- /dev/null
+++ b/src/pages/Game/modules/Critics.tsx
@@ -0,0 +1,48 @@
+import { Box, Link, Typography } from '@mui/material'
+import { format } from 'date-fns'
+
+import { Critic } from '@/types'
+
+interface CriticsProps {
+  critic: Critic
+}
+
+function Critics(props: CriticsProps) {
+  const { critic } = props
+
+  return (
+    <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg duration-500 relative flex items-center gap-4">
+      <img
+        src={critic.logo}
+        alt={critic.name}
+        className="w-16 h-16 object-contain rounded-full shadow-md"
+      />
+      <Box>
+        <Typography
+          variant="h2"
+          className="sm:text-2xl text-xl font-bold dark:text-white text-black">
+          {critic.name}
+        </Typography>
+        <Typography
+          component="p"
+          className="dark:text-gray-300 text-gray-700">
+          Rate: {critic.rate}
+        </Typography>
+        <Typography
+          component="p"
+          className="dark:text-gray-300 text-gray-700">
+          Date: {format(new Date(critic.created_at), 'LLL, dd yyyy')}
+        </Typography>
+        <Link
+          href={critic.url}
+          className="text-theme-red-900 underline hover:opacity-70 transition-opacity duration-300 hover:text-red-500"
+          target="_blank"
+          rel="noopener noreferrer">
+          Read Critic
+        </Link>
+      </Box>
+    </Box>
+  )
+}
+
+export default Critics
diff --git a/src/pages/Game/modules/DLCs.tsx b/src/pages/Game/modules/DLCs.tsx
new file mode 100644
index 0000000..9f6ceae
--- /dev/null
+++ b/src/pages/Game/modules/DLCs.tsx
@@ -0,0 +1,150 @@
+import { Box, Link, Typography } from '@mui/material'
+import { useState } from 'react'
+import { IoPlay } from 'react-icons/io5'
+
+import { DLC } from '@/types'
+
+import { DLCsModal } from '.'
+
+interface DLCsProps {
+  dlc: DLC
+}
+
+function DLCs(props: DLCsProps) {
+  const { dlc } = props
+  const [modalPath, setModalPath] = useState<{
+    path: string
+    type: 'photo' | 'video'
+  } | null>(null)
+
+  const openModal = (path: string, type: 'photo' | 'video') => {
+    setModalPath({ path, type })
+  }
+
+  const closeModal = () => {
+    setModalPath(null)
+  }
+
+  return (
+    <>
+      <Box
+        component="li"
+        className="p-8 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent rounded-lg bg-transparent animate-slide-in transition-all duration-500 relative overflow-hidden flex flex-col gap-10 z-10">
+        <Box className="absolute inset-0 z-0 bg-gradient-to-br from-transparent to-theme-red-900 opacity-0 hover:opacity-20 transition-opacity duration-500 pointer-events-none" />
+
+        <Box className="flex flex-col sm:flex-row items-center gap-4 relative">
+          <img
+            src={dlc.cover}
+            alt={`${dlc.name} Cover`}
+            className="sm:w-48 w-full rounded-lg border-2 border-theme-red-900 shadow-md hover:shadow-red-500/50 hover:scale-105 transition-transform duration-300"
+          />
+          <Box className="flex-1">
+            <Typography
+              variant="h3"
+              className="text-xl font-bold text-theme-red-900 dark:text-white dark:neon-text">
+              {dlc.name}
+            </Typography>
+            <Typography
+              component="span"
+              className="text-gray-600 dark:text-gray-400 block mt-2">
+              Release Date: {dlc.release}
+            </Typography>
+
+            <Box className="mt-4 flex flex-wrap gap-2 sm:justify-start justify-center text-center">
+              {dlc.platforms.map((platform) => (
+                <Typography
+                  key={platform.id}
+                  component="span"
+                  className="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-semibold transition-all duration-300 hover:shadow-md hover:shadow-theme-red-900/50">
+                  {platform.name}
+                </Typography>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+
+        <Box className="relative">
+          <Typography
+            variant="h4"
+            className="text-lg font-semibold text-theme-red-900 dark:text-white mb-2 dark:neon-text">
+            Gallery
+          </Typography>
+          <Box className="flex flex-wrap gap-4">
+            {dlc.galleries.map(({ id, media_type, thumbnail, path }) => (
+              <Box
+                key={id}
+                className="relative group cursor-pointer p-1 rounded-lg sm:w-auto w-full"
+                onClick={() =>
+                  openModal(path, media_type.name as 'photo' | 'video')
+                }>
+                {media_type.name === 'photo' ? (
+                  <img
+                    src={thumbnail}
+                    alt={`Gallery ${id}`}
+                    className="sm:w-48 w-full rounded-md shadow-md duration-300 hover:shadow-lg hover:shadow-red-400/50"
+                  />
+                ) : (
+                  <Box className="relative">
+                    <img
+                      src={thumbnail}
+                      alt={`Gallery ${id}`}
+                      className="sm:w-48 w-full rounded-md shadow-md duration-300 hover:shadow-lg hover:shadow-red-400/50"
+                    />
+                    <Box className="absolute inset-0 flex items-center justify-center">
+                      <Box className="bg-black bg-opacity-50 p-4 rounded-full flex items-center justify-center">
+                        <IoPlay />
+                      </Box>
+                    </Box>
+                  </Box>
+                )}
+
+                <Box className="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-md" />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        <Box className="relative">
+          <Typography
+            variant="h4"
+            className="text-lg font-semibold text-theme-red-900 dark:text-white mb-2 dark:neon-text">
+            Available At
+          </Typography>
+          <Box className="flex flex-wrap gap-4">
+            {dlc.companies.map((company) => (
+              <Link
+                key={company.id}
+                href={company.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex sm:flex-row flex-col items-center justify-center gap-3 p-4 border border-gray-600 rounded-lg bg-gradient-to-br from-gray-100 dark:from-gray-800 to-white dark:to-zinc-900 transition-all duration-500 hover:shadow-lg hover:shadow-theme-red-900/50 sm:w-auto w-full">
+                <img
+                  src={company.logo}
+                  alt={`${company.name} Logo`}
+                  className="w-12 h-12 object-contain"
+                />
+                <Box>
+                  <Typography
+                    variant="h5"
+                    className="text-sm font-bold text-gray-800 dark:text-white">
+                    {company.name}
+                  </Typography>
+                  <Typography className="text-gray-600 dark:text-gray-400">
+                    {(company.price / 100).toLocaleString('en-US', {
+                      currency: 'USD',
+                      style: 'currency',
+                    })}
+                  </Typography>
+                </Box>
+              </Link>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+
+      <DLCsModal closeModal={closeModal} modalPath={modalPath} />
+    </>
+  )
+}
+
+export default DLCs
diff --git a/src/pages/Game/modules/DLCsModal.tsx b/src/pages/Game/modules/DLCsModal.tsx
new file mode 100644
index 0000000..cf22c61
--- /dev/null
+++ b/src/pages/Game/modules/DLCsModal.tsx
@@ -0,0 +1,78 @@
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+function DLCsModal({
+  modalPath,
+  closeModal,
+}: {
+  modalPath: { path: string; type: 'photo' | 'video' } | null
+  closeModal: () => void
+}) {
+  const [showModal, setShowModal] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    if (modalPath) {
+      setShowModal(true)
+      setTimeout(() => setIsVisible(true), 80)
+    } else if (showModal) {
+      setIsVisible(false)
+      setTimeout(() => setShowModal(false), 500)
+    }
+  }, [modalPath, showModal])
+
+  if (!showModal || !modalPath) return null
+
+  return (
+    <Box
+      className={`fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 transition-opacity duration-300 ${
+        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      }`}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          setIsVisible(false)
+          setTimeout(closeModal, 400)
+        }
+      }}
+      onClick={() => {
+        setIsVisible(false)
+        setTimeout(closeModal, 400)
+      }}>
+      <Box
+        className={`relative p-4 max-w-3xl w-full transition-transform transform duration-300 ${
+          isVisible ? 'scale-100' : 'scale-90'
+        }`}
+        onClick={(e) => e.stopPropagation()}>
+        <button
+          className="absolute top-2 right-2 text-white text-2xl bg-red-600 rounded-full w-8 h-8 flex items-center justify-center"
+          onClick={(e) => {
+            e.stopPropagation()
+            setIsVisible(false)
+            setTimeout(closeModal, 400)
+          }}>
+          &times;
+        </button>
+        {modalPath.type === 'photo' ? (
+          <img
+            src={modalPath.path}
+            alt={`Gallery ${modalPath.path}`}
+            className="w-full h-auto rounded-md shadow-xl"
+          />
+        ) : (
+          <video controls className="w-full h-auto rounded-md shadow-xl">
+            <track
+              default
+              kind="captions"
+              srcLang="en"
+              src={modalPath.path}
+            />
+            <source src={modalPath.path} type="video/mp4" />
+            Your browser does not support the video.
+          </video>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export default DLCsModal
diff --git a/src/pages/Game/modules/Galleries.tsx b/src/pages/Game/modules/Galleries.tsx
new file mode 100644
index 0000000..d9a0edd
--- /dev/null
+++ b/src/pages/Game/modules/Galleries.tsx
@@ -0,0 +1,41 @@
+import { Navigation } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import { Gallery } from '@/types'
+
+interface GalleriesProps {
+  galleries: Gallery[]
+}
+
+function Galleries(props: GalleriesProps) {
+  const { galleries } = props
+
+  return (
+    <Swiper loop modules={[Navigation]} navigation>
+      {galleries.map((gallery) => (
+        <SwiperSlide key={gallery.id}>
+          {gallery.media_type.name === 'photo' ? (
+            <img
+              src={gallery.path}
+              alt={`Gallery ${gallery.id}`}
+              className="w-full h-auto rounded-md shadow-md transition transform hover:scale-105 duration-300"
+            />
+          ) : (
+            <video controls className="w-full h-auto rounded-md shadow-md">
+              <track
+                default
+                kind="captions"
+                srcLang="en"
+                src={gallery.path}
+              />
+              <source src={gallery.path} type="video/mp4" />
+              Your browser does not support the video.
+            </video>
+          )}
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
+
+export default Galleries
diff --git a/src/pages/Game/modules/Languages.tsx b/src/pages/Game/modules/Languages.tsx
new file mode 100644
index 0000000..210d2bc
--- /dev/null
+++ b/src/pages/Game/modules/Languages.tsx
@@ -0,0 +1,75 @@
+import {
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+
+import { Language } from '@/types'
+
+interface LanguagesProps {
+  languages: Language[]
+}
+
+function Languages(props: LanguagesProps) {
+  const { languages } = props
+
+  return (
+    <Stack className="overflow-x-auto">
+      <Table className="w-full table-auto bg-transparent text-white">
+        <TableHead>
+          <TableRow>
+            <TableCell className="border-b border-gray-700 px-4 py-2">
+              Language
+            </TableCell>
+            <TableCell
+              align="center"
+              className="border-b border-gray-700 px-4 py-2">
+              Dubs
+            </TableCell>
+            <TableCell
+              align="center"
+              className="border-b border-gray-700 px-4 py-2">
+              Menu
+            </TableCell>
+            <TableCell
+              align="center"
+              className="border-b border-gray-700 px-4 py-2">
+              Subtitles
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {languages.map((lang) => (
+            <TableRow
+              key={lang.name}
+              className="hover:opacity-40 transition duration-500">
+              <TableCell className="border-b border-gray-700 px-4 py-2">
+                {lang.name}
+              </TableCell>
+              <TableCell
+                align="center"
+                className="border-b border-gray-700 px-4 py-2">
+                {lang.dubs ? '✓' : '✖'}
+              </TableCell>
+              <TableCell
+                align="center"
+                className="border-b border-gray-700 px-4 py-2">
+                {lang.menu ? '✓' : '✖'}
+              </TableCell>
+              <TableCell
+                align="center"
+                className="border-b border-gray-700 px-4 py-2">
+                {lang.subtitles ? '✓' : '✖'}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Stack>
+  )
+}
+
+export default Languages
diff --git a/src/pages/Game/modules/MainDetails.tsx b/src/pages/Game/modules/MainDetails.tsx
new file mode 100644
index 0000000..00f282b
--- /dev/null
+++ b/src/pages/Game/modules/MainDetails.tsx
@@ -0,0 +1,324 @@
+import { Box, Chip, Link, List, ListItem, Typography } from '@mui/material'
+
+import { GameDetails } from '@/types'
+
+interface MainDetailsProps {
+  game: GameDetails
+}
+
+function MainDetails(props: MainDetailsProps) {
+  const { game } = props
+
+  return (
+    <>
+      <Box
+        component="section"
+        className="my-4 animate-zoom-in relative group">
+        <img
+          src={game.cover}
+          alt={`${game.title} Cover`}
+          className="w-full h-auto rounded-md shadow-lg duration-500 group-hover:shadow-theme-red-900/50"
+        />
+        <Box className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-50 transition-opacity duration-500 rounded-md" />
+      </Box>
+
+      <Box
+        component="section"
+        className="flex items-center justify-between sm:flex-row flex-col sm:text-left text-center mt-6 mb-8">
+        <Typography
+          variant="h1"
+          className="text-5xl font-extrabold animate-pulse tracking-wider drop-shadow-lg mb-4 sm:mb-0 dark:hot-neon-text dark:text-white text-theme-red-900">
+          {game.title}
+        </Typography>
+        <Typography
+          component="span"
+          className="dark:text-gray-400 text-white bg-gradient-to-r dark:from-zinc-900 dark:via-transparent dark:to-transparent from-theme-red-900 to-theme-dark-900 px-4 py-2 rounded-full shadow-md">
+          Release Date: {game.release}
+        </Typography>
+      </Box>
+
+      <Box className="flex flex-col md:flex-row md:space-x-8 mb-12 mt-4 relative space-y-8 md:space-y-0">
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
+            Short Description
+          </Typography>
+          <Typography className="leading-relaxed dark:text-gray-300 text-gray-700">
+            {game.short_description}
+          </Typography>
+        </Box>
+
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl sm:text-left text-center font-bold mb-4 dark:text-white text-black">
+            Game details
+          </Typography>
+          <Box className="flex flex-col gap-4">
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography
+                component="span"
+                className="inline-block font-bold dark:text-white text-black">
+                Website:
+              </Typography>
+              <Link
+                href={game.website}
+                target="_blank"
+                rel="noopener noreferrer">
+                <Typography className="text-theme-red-900 underline hover:opacity-70 transition-opacity duration-300 hover:text-red-500 break-all">
+                  {game.website}
+                </Typography>
+              </Link>
+            </Box>
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography
+                component="span"
+                className="inline-block font-bold dark:text-white text-black">
+                Age Rating:
+              </Typography>
+              <Typography
+                component="span"
+                className="px-2 py-1 bg-red-500 text-white rounded-full">
+                {game.age}+
+              </Typography>
+            </Box>
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography
+                component="span"
+                className="inline-block font-bold dark:text-white text-black">
+                Protection:
+              </Typography>
+              <Typography component="span" className="text-lg">
+                {game.crack.protection.name}
+              </Typography>
+            </Box>
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography
+                component="span"
+                className="inline-block font-bold dark:text-white text-black">
+                Status:
+              </Typography>
+              <Chip
+                label={game.crack.status}
+                className={`${game.crack.status === 'Cracked' ? 'bg-green-500' : 'bg-red-500'} text-white`}
+              />
+            </Box>
+            {game.crack.torrent && (
+              <Box className="flex sm:flex-row flex-col items-center gap-1">
+                <Typography
+                  component="span"
+                  className="inline-block font-bold dark:text-white text-black">
+                  Torrent:
+                </Typography>
+                <Typography component="span" className="text-lg">
+                  {game.crack.torrent}
+                </Typography>
+              </Box>
+            )}
+            {game.crack.by && (
+              <Box className="flex sm:flex-row flex-col items-center gap-1">
+                <Typography
+                  component="span"
+                  className="inline-block font-bold dark:text-white text-black">
+                  Cracked By:
+                </Typography>
+                <Typography component="span" className="text-lg">
+                  {game.crack.by.name}
+                </Typography>
+              </Box>
+            )}
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography
+                component="span"
+                className="inline-block font-bold dark:text-white text-black">
+                ❤️:
+              </Typography>
+              <Typography component="span" className="text-lg">
+                {game.hearts_count}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box
+        component="span"
+        className="flex flex-col md:flex-row md:space-x-8 mb-12 mt-4 relative space-y-8 md:space-y-0">
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
+            Platforms
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.platforms.map((platform) => (
+              <ListItem disableGutters disablePadding key={platform.id}>
+                <Link
+                  href={`/platforms/${platform.slug}`}
+                  target="_blank"
+                  className="dark:text-gray-200 text-black">
+                  {platform.name}
+                </Link>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="text-2xl font-bold mb-4 dark:text-white text-black">
+            Genres
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.genres.map((genre) => (
+              <ListItem disableGutters disablePadding key={genre.id}>
+                <Link
+                  href={`/genres/${genre.slug}`}
+                  target="_blank"
+                  className="dark:text-gray-200 text-black">
+                  {genre.name}
+                </Link>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Box>
+
+      <Box
+        component="span"
+        className="flex flex-col md:flex-row md:space-x-8 mb-12 mt-4 relative space-y-8 md:space-y-0">
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
+            Tags
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.tags.map((tag) => (
+              <ListItem disableGutters disablePadding key={tag.id}>
+                <Link
+                  href={`/tags/${tag.slug}`}
+                  target="_blank"
+                  className="dark:text-gray-200 text-black">
+                  {tag.name}
+                </Link>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="text-2xl font-bold mb-4 dark:text-white text-black">
+            Categories
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.categories.map((category) => (
+              <ListItem disableGutters disablePadding key={category.id}>
+                <Link
+                  href={`/categories/${category.slug}`}
+                  target="_blank"
+                  className="dark:text-gray-200 text-black">
+                  {category.name}
+                </Link>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Box>
+
+      <Box
+        component="span"
+        className="flex flex-col md:flex-row md:space-x-8 mb-12 mt-4 relative space-y-8 md:space-y-0">
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
+            Publishers
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.publishers.map((publisher) => (
+              <ListItem disableGutters disablePadding key={publisher.id}>
+                {publisher.name}
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+
+        <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-500 relative">
+          <Typography
+            variant="h2"
+            className="text-2xl font-bold mb-4 dark:text-white text-black">
+            Developers
+          </Typography>
+          <List
+            disablePadding
+            className="dark:text-gray-300 text-black"
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+              '& .MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}>
+            {game.developers.map((developer) => (
+              <ListItem disableGutters disablePadding key={developer.id}>
+                {developer.name}
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default MainDetails
diff --git a/src/pages/Game/modules/Requirements.tsx b/src/pages/Game/modules/Requirements.tsx
new file mode 100644
index 0000000..e8081aa
--- /dev/null
+++ b/src/pages/Game/modules/Requirements.tsx
@@ -0,0 +1,114 @@
+import { useState } from 'react'
+
+import { Requirement } from '@/types'
+
+interface RequirementsProps {
+  requirements: Requirement[]
+}
+
+function Requirements(props: RequirementsProps) {
+  const { requirements } = props
+
+  const uniqueTypes = Array.from(
+    new Set(
+      requirements.map((req) => `${req.type.name}-${req.type.type}`),
+    ),
+  ).map((key) => {
+    const [name, type] = key.split('-')
+    return { name, type }
+  })
+
+  const [activeTab, setActiveTab] = useState<string>(
+    uniqueTypes.length > 0
+      ? `${uniqueTypes[0].name}-${uniqueTypes[0].type}`
+      : '',
+  )
+
+  return (
+    <>
+      <div className="flex gap-4 sm:flex-row flex-col">
+        {uniqueTypes.map(({ name, type }, index) => (
+          <button
+            key={index}
+            className={`px-4 py-2 rounded-md text-white font-semibold transition-colors duration-300 break-words ${
+              activeTab === `${name}-${type}`
+                ? 'bg-theme-red-900 shadow-lg hover:bg-red-700'
+                : 'bg-zinc-900 hover:bg-zinc-800'
+            }`}
+            onClick={() => setActiveTab(`${name}-${type}`)}>
+            {`${name.charAt(0).toUpperCase() + name.slice(1)} (${type.charAt(0).toUpperCase() + type.slice(1)})`}
+          </button>
+        ))}
+      </div>
+
+      <div className="space-y-8 animate-fade-in">
+        {requirements
+          .filter(
+            (req) => `${req.type.name}-${req.type.type}` === activeTab,
+          )
+          .map((req) => (
+            <div
+              key={req.id}
+              className="p-6 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent rounded-lg shadow-lg relative duration-500 break-words">
+              <div className="absolute inset-0 rounded-lg opacity-10 hover:opacity-30 transition-opacity duration-500 pointer-events-none" />
+
+              <h3 className="sm:text-left text-center text-xl font-bold text-theme-red-900 mb-4">
+                {req.type.name.charAt(0).toUpperCase() +
+                  req.type.name.slice(1)}{' '}
+                Requirements
+              </h3>
+
+              <ul className="space-y-2 dark:text-gray-300 text-gray-700">
+                <li>
+                  <span className="font-bold dark:text-white text-black">
+                    OS:
+                  </span>{' '}
+                  {req.so}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">CPU:</span>{' '}
+                  {req.cpu}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">RAM:</span>{' '}
+                  {req.ram}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">GPU:</span>{' '}
+                  {req.gpu}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">
+                    DirectX:
+                  </span>{' '}
+                  {req.dx}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">
+                    Storage:
+                  </span>{' '}
+                  {req.rom}
+                </li>
+                <li>
+                  <span className=" dark:text-white text-black">
+                    Bits:
+                  </span>{' '}
+                  {req.bits}-bit
+                </li>
+                {req.obs && (
+                  <li>
+                    <span className=" dark:text-white text-black">
+                      Notes:
+                    </span>{' '}
+                    {req.obs}
+                  </li>
+                )}
+              </ul>
+            </div>
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default Requirements
diff --git a/src/pages/Game/modules/ReviewCard.tsx b/src/pages/Game/modules/ReviewCard.tsx
new file mode 100644
index 0000000..b9ffb20
--- /dev/null
+++ b/src/pages/Game/modules/ReviewCard.tsx
@@ -0,0 +1,64 @@
+import { Box, Typography } from '@mui/material'
+
+import { Review } from '@/types'
+
+interface ReviewCardProps {
+  review: Review
+}
+
+function ReviewCard(props: ReviewCardProps) {
+  const { review } = props
+
+  const rateColor = () => {
+    if (review.rate < 5) return 'text-theme-red-900'
+    else if (review.rate === 5) return 'text-yellow-500'
+
+    return 'text-green-500'
+  }
+
+  return (
+    <Box className="relative p-4 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent rounded-lg shadow-lg transition-all duration-300 sm:text-left text-center flex flex-col gap-2">
+      <Box className="flex items-center sm:flex-row flex-col gap-2">
+        <img
+          src={review.user.profile?.photo}
+          alt={review.user.nickname}
+          className="w-16 h-16 rounded-full border-4 border-primary"
+        />
+        <Box>
+          <Typography className="text-lg font-bold text-dark dark:text-white">
+            {review.user.nickname}
+          </Typography>
+          <Typography className="text-sm text-gray-700 dark:text-gray-300">
+            {review.user.name}
+          </Typography>
+        </Box>
+      </Box>
+
+      <Typography className="text-sm text-gray-800 dark:text-gray-400 mb-4">
+        {review.comment}
+      </Typography>
+
+      <Box className="flex sm:justify-end justify-center items-center">
+        <Typography
+          component="span"
+          className={`text-2xl font-bold ${rateColor()}`}>
+          {review.rate}
+        </Typography>
+        <Typography
+          component="span"
+          className="text-lg font-semibold text-gray-700 dark:text-gray-300">
+          /10
+        </Typography>
+      </Box>
+      {review.played && (
+        <Typography
+          component="span"
+          className="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded animate-bounce absolute top-4 right-4">
+          Played
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+export default ReviewCard
diff --git a/src/pages/Game/modules/Torrents.tsx b/src/pages/Game/modules/Torrents.tsx
new file mode 100644
index 0000000..0cffef0
--- /dev/null
+++ b/src/pages/Game/modules/Torrents.tsx
@@ -0,0 +1,43 @@
+import { Box, Link, Typography } from '@mui/material'
+import { format } from 'date-fns'
+
+import { Torrent } from '@/types'
+
+interface TorrentsProps {
+  torrent: Torrent
+}
+
+function Torrents(props: TorrentsProps) {
+  const { torrent } = props
+
+  return (
+    <Box className="flex-1 border dark:border-gray-800 border-gray-100 bg-gradient-to-b dark:from-zinc-900 from-gray-200 to-transparent p-6 rounded-lg shadow-lg duration-500 relative flex items-center gap-4 sm:flex-row flex-col sm:text-left text-center">
+      <Box className="flex flex-col gap-4 w-full">
+        <Box className="flex justify-between items-center sm:flex-row flex-col sm:gap-0 gap-4">
+          <Typography
+            variant="h2"
+            className="font-bold sm:text-2xl text-xl ">
+            <Link href={torrent.url} target="_blank" className="underline">
+              {torrent.provider.name}
+            </Link>
+          </Typography>
+          <Typography
+            component="p"
+            className="dark:text-gray-300 text-gray-700">
+            Posted at:{' '}
+            {format(new Date(torrent.posted_in), 'LLL, dd yyyy')}
+          </Typography>
+        </Box>
+        <Link
+          href={torrent.url}
+          className="text-theme-red-900 underline hover:opacity-70 transition-opacity duration-300 hover:text-red-500"
+          target="_blank"
+          rel="noopener noreferrer">
+          Go to torrent
+        </Link>
+      </Box>
+    </Box>
+  )
+}
+
+export default Torrents
diff --git a/src/pages/Game/modules/index.ts b/src/pages/Game/modules/index.ts
new file mode 100644
index 0000000..393bd70
--- /dev/null
+++ b/src/pages/Game/modules/index.ts
@@ -0,0 +1,10 @@
+export { default as DLCs } from './DLCs'
+export { default as Critics } from './Critics'
+export { default as Torrents } from './Torrents'
+export { default as DLCsModal } from './DLCsModal'
+export { default as Galleries } from './Galleries'
+export { default as Languages } from './Languages'
+export { default as Availables } from './Availables'
+export { default as ReviewCard } from './ReviewCard'
+export { default as MainDetails } from './MainDetails'
+export { default as Requirements } from './Requirements'
diff --git a/src/pages/Home/modules/HotGames.tsx b/src/pages/Home/modules/HotGames.tsx
index ca02b89..1f2057a 100644
--- a/src/pages/Home/modules/HotGames.tsx
+++ b/src/pages/Home/modules/HotGames.tsx
@@ -1,4 +1,10 @@
-import { Box, IconButton, Link, Stack, Typography } from '@mui/material'
+import {
+  Box,
+  Container,
+  IconButton,
+  Link,
+  Typography,
+} from '@mui/material'
 import { useState } from 'react'
 import { MdViewList, MdViewModule } from 'react-icons/md'
 
@@ -28,10 +34,7 @@ function HotGames(props: HotGamesProps) {
   const filteres = filteredGamesFn(games, search)
 
   return (
-    <Stack
-      component="section"
-      spacing={1}
-      className="relative container mx-auto p-6">
+    <Container maxWidth="xl" className="relative p-6" component="section">
       <Box component="section">
         <Box className="absolute inset-0 pointer-events-none">
           <Box className="absolute top-0 left-0 w-40 h-40 bg-gradient-to-r from-theme-red-900 to-transparent rounded-full blur-2xl opacity-50 animate-pulse" />
@@ -91,7 +94,7 @@ function HotGames(props: HotGamesProps) {
         className="flex justify-center p-4 mt-6 border border-theme-red-900 sm:max-w-48 w-full mx-auto rounded-lg hover:bg-theme-red-900 transition duration-500 dark:text-white text-black hover:text-white">
         See more...
       </Link>
-    </Stack>
+    </Container>
   )
 }
 
diff --git a/src/pages/Home/modules/PopularGames.tsx b/src/pages/Home/modules/PopularGames.tsx
index cd3f780..c87a6e2 100644
--- a/src/pages/Home/modules/PopularGames.tsx
+++ b/src/pages/Home/modules/PopularGames.tsx
@@ -1,4 +1,10 @@
-import { Box, IconButton, Link, Stack, Typography } from '@mui/material'
+import {
+  Box,
+  Container,
+  IconButton,
+  Link,
+  Typography,
+} from '@mui/material'
 import { useState } from 'react'
 import { MdViewList, MdViewModule } from 'react-icons/md'
 
@@ -28,10 +34,7 @@ function PopularGames(props: PopularGamesProps) {
   const filteres = filteredGamesFn(games, search)
 
   return (
-    <Stack
-      component="section"
-      spacing={1}
-      className="relative container mx-auto p-6">
+    <Container maxWidth="xl" className="relative p-6" component="section">
       <Box component="section">
         <Box className="absolute inset-0 pointer-events-none">
           <Box className="absolute top-0 left-0 w-40 h-40 bg-gradient-to-r from-theme-red-900 to-transparent rounded-full blur-2xl opacity-50 animate-pulse" />
@@ -91,7 +94,7 @@ function PopularGames(props: PopularGamesProps) {
         className="flex justify-center p-4 mt-6 border border-theme-red-900 sm:max-w-48 w-full mx-auto rounded-lg hover:bg-theme-red-900 transition duration-500 dark:text-white text-black hover:text-white">
         See more...
       </Link>
-    </Stack>
+    </Container>
   )
 }
 
diff --git a/src/pages/Home/modules/UpcomingGames.tsx b/src/pages/Home/modules/UpcomingGames.tsx
index 8356b69..f626db4 100644
--- a/src/pages/Home/modules/UpcomingGames.tsx
+++ b/src/pages/Home/modules/UpcomingGames.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Container, Typography } from '@mui/material'
 import { Autoplay, EffectCoverflow } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
@@ -12,7 +12,7 @@ function UpcomingGames(props: UpcomingGamesProps) {
   const { games } = props
 
   return (
-    <Box className="container mx-auto p-6 pb-12 mt-16 relative">
+    <Container maxWidth="xl" className="relative p-6" component="section">
       <Box className="absolute inset-0 pointer-events-none">
         <Box className="absolute top-0 left-0 w-full h-48 bg-gradient-to-r from-theme-red-900 via-yellow-900 to-theme-dark-900 rounded-full blur-3xl opacity-20 animate-pulse" />
       </Box>
@@ -94,7 +94,7 @@ function UpcomingGames(props: UpcomingGamesProps) {
           </SwiperSlide>
         ))}
       </Swiper>
-    </Box>
+    </Container>
   )
 }
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 85122d3..6ca795a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -90,6 +90,10 @@
     animation: slide-in 1s ease-out;
   }
 
+  .animate-flicker {
+    animation: flicker 1.5s infinite;
+  }
+
   .swiper-pagination-bullet {
     background-color: #ff1b6b;
     opacity: 0.7;
@@ -104,6 +108,26 @@
     animation: glow 2s infinite;
   }
 
+  .neon-text {
+    text-shadow:
+      0 0 5px #f40,
+      0 0 10px #f40,
+      0 0 20px #f40,
+      0 0 30px #f40;
+  }
+}
+
+@layer utilities {
+  @keyframes flicker {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.8;
+    }
+  }
+
   @keyframes slide-in {
     from {
       transform: translateY(100%);
diff --git a/src/types/banners.ts b/src/types/banners.ts
index 02915be..753b25a 100644
--- a/src/types/banners.ts
+++ b/src/types/banners.ts
@@ -4,8 +4,13 @@ import { Tag } from './tags'
 export interface Banner {
   id: number
   banner: string
-  title: string
-  description: string
-  platforms: Platform[]
-  tags: Tag[]
+  related: {
+    id: number
+    slug: string
+    title: string
+    best_price: number
+    short_description: string
+    tags: Tag[]
+    platforms: Platform[]
+  }
 }
diff --git a/src/types/categories.ts b/src/types/categories.ts
index f86e0c3..74cb17d 100644
--- a/src/types/categories.ts
+++ b/src/types/categories.ts
@@ -1,4 +1,5 @@
 export interface Category {
   id: number
+  slug: string
   name: string
 }
diff --git a/src/types/companies.ts b/src/types/companies.ts
index 4d2b983..6a67bcc 100644
--- a/src/types/companies.ts
+++ b/src/types/companies.ts
@@ -4,5 +4,7 @@ export interface Company {
   slug: string
   name: string
   logo: string
+  price: number
   country: string
+  company_game_id: string
 }
diff --git a/src/types/galleries.ts b/src/types/galleries.ts
index 549fa90..016e9f5 100644
--- a/src/types/galleries.ts
+++ b/src/types/galleries.ts
@@ -1,4 +1,11 @@
+export interface MediaType {
+  id: number
+  name: string
+}
+
 export interface Gallery {
   id: number
   path: string
+  thumbnail: string
+  media_type: MediaType
 }
diff --git a/src/types/games.ts b/src/types/games.ts
index 9b6b0aa..bbacf60 100644
--- a/src/types/games.ts
+++ b/src/types/games.ts
@@ -11,7 +11,6 @@ import {
 export interface Price {
   id: number
   price: number
-  company: Company
 }
 
 export interface Crackers {
@@ -20,13 +19,18 @@ export interface Crackers {
   acting: boolean
 }
 
+export interface Protection {
+  id: number
+  name: string
+}
+
 export interface Crack {
   id: number
-  by: Crackers
   status: string
-  torrent?: string
-  protection: string
-  created_at: string
+  torrent: string | null
+  cracked_at: string | null
+  by: Crackers | null
+  protection: Protection
 }
 
 export interface Developer {
@@ -43,6 +47,12 @@ export interface Publisher {
   created_at: string
 }
 
+export interface RequirementType {
+  id: number
+  name: 'minimum' | 'recommended' | 'maximum'
+  type: 'windows' | 'mac' | 'linux'
+}
+
 export interface Requirement {
   id: number
   so: string
@@ -53,7 +63,8 @@ export interface Requirement {
   rom: string
   bits: number
   obs?: string
-  network: string
+  network?: string
+  type: RequirementType
 }
 
 export interface GameList {
@@ -75,16 +86,23 @@ export interface Language {
   id: number
   iso: string
   name: string
+  menu: boolean
+  dubs: boolean
+  subtitles: boolean
 }
 
 export interface DLC {
   id: number
   name: string
+  cover: string
+  release: string
   game?: {
     id: number
     title: string
   }
   genres: Genre[]
+  galleries: Gallery[]
+  companies: Company[]
   platforms: Platform[]
   categories: Category[]
 }
@@ -92,11 +110,25 @@ export interface DLC {
 export interface Critic {
   id: number
   url: string
+  logo: string
   name: string
-  since: string
+  rate: number
   created_at: string
 }
 
+export interface TorrentProvider {
+  id: number
+  url: string
+  name: string
+}
+
+export interface Torrent {
+  id: number
+  url: string
+  posted_in: string
+  provider: TorrentProvider
+}
+
 export interface GameDetails {
   id: number
   age: number
@@ -107,22 +139,24 @@ export interface GameDetails {
   badge?: string
   release: string
   website?: string
-  description: string
+  description?: string
   hearts_count: number
+  short_description?: string
   tags: Tag[]
   dlcs: DLC[]
   genres: Genre[]
-  prices: Price[]
   reviews: Review[]
   companies: Company[]
   galleries: Gallery[]
-  language: Language[]
+  languages: Language[]
   platforms: Platform[]
   categories: Category[]
   developers: Developer[]
   publishers: Publisher[]
   requirements: Requirement[]
-  critics: Critic & { rate: number }[]
+  critics: Critic[]
+  torrents: Torrent[]
+  crack: Crack
 }
 
 export interface NextRelease {
diff --git a/src/types/user.ts b/src/types/user.ts
index 4605898..f32a0a7 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -4,28 +4,15 @@ export interface Profile {
   linkedin?: string
   facebook?: string
   share: boolean
-  share_avatar: boolean
-}
-
-export interface Address {
-  city: string
-  state: string
-  street: string
-  number: string
-  district: string
-  postalcode: string
-  complement?: string
 }
 
 export interface User {
   id: number
   name: string
   email: string
-  coduser: string
   nickname?: string
   birthdate: string
   created_at: string
   updated_at: string
   profile?: Profile
-  address?: Address
 }