diff --git a/DONE.md b/DONE.md
index 6fdd94c..efca004 100644
--- a/DONE.md
+++ b/DONE.md
@@ -1,7 +1,18 @@
-# 📝 TODO List
+# 📝 DONE List
 
 ## 🚀 Project Roadmap
 
+### Basic Components
+
+- [x] Input
+- [x] Backdrop
+- [x] Logo
+- [x] Icon
+- [x] Header
+- [x] Footer
+- [x] Tabs
+- [x] Button
+
 ### MVP (Minimum Viable Product)
 
 - [x] Set up project repository
@@ -61,6 +72,10 @@
       - [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
+- [x] Features for games
+  - [x] Implement some tabs for the game detauls
+  - [x] Implement the views of a game
+  - [x] Display the game comments and the possibility to comment in a game
 
 ### Post MVP
 
diff --git a/TODO.md b/TODO.md
index 698b207..796126a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,9 +2,18 @@
 
 ## 🚀 Project Roadmap
 
+### Basic Components
+
+- [ ] ...
+
 ### MVP (Minimum Viable Product)
 
-    - [ ] Display the game comments and the possibility to comment in a game
+- [ ] Implement the search on system
+  - [ ] Search should display at least 100 games with no pagination on backend
+  - [ ] Search should have a debounce time on change
+  - [ ] Search should allow the user to filter category, genre, tag or platform
+  - [ ] Search should allow the user to sort by likes quantity, views quantity, release date or title
+  - [ ] Search should allow the user to change the quantities of items per page (pagination should work only on frontend)
 - [ ] Game news and reviews section
   - [ ] Fetch and display the latest gaming news
   - [ ] Add reviews section with filtering options
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..ce7eef0
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,52 @@
+import { Box, CircularProgress } from '@mui/material'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  isLoading?: boolean
+  icon?: ReactNode
+  fullWidth?: boolean
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      isLoading = false,
+      icon,
+      fullWidth = false,
+      className = '',
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={`
+          flex items-center justify-center gap-2 px-6 py-3 rounded-md font-semibold text-white 
+          transition-colors duration-300 disabled:bg-opacity-50 disabled:cursor-not-allowed
+          ${fullWidth ? 'w-full' : 'w-auto'} 
+          ${isLoading ? 'bg-theme-red-900' : 'bg-theme-red-900 hover:bg-red-700'} 
+          ${className}
+        `}
+        disabled={isLoading}
+        {...rest}>
+        {isLoading ? (
+          <Box className="flex items-center justify-center">
+            <CircularProgress size={20} sx={{ color: 'white' }} />
+          </Box>
+        ) : (
+          <>
+            {icon && <span className="flex items-center">{icon}</span>}{' '}
+            {children}
+          </>
+        )}
+      </button>
+    )
+  },
+)
+
+Button.displayName = 'Button'
+
+export default Button
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
new file mode 100644
index 0000000..3389ecb
--- /dev/null
+++ b/src/components/Button/index.ts
@@ -0,0 +1 @@
+export { default } from './Button'
diff --git a/src/components/Forms/Review/ReviewForm.tsx b/src/components/Forms/Review/ReviewForm.tsx
new file mode 100644
index 0000000..2ab94da
--- /dev/null
+++ b/src/components/Forms/Review/ReviewForm.tsx
@@ -0,0 +1,144 @@
+import {
+  Box,
+  Grid2,
+  Rating as MuiRating,
+  Stack,
+  Switch,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { RegisterOptions, SubmitHandler, useForm } from 'react-hook-form'
+import toast from 'react-hot-toast'
+
+import { Button, Input } from '@/components'
+import { GameDetails, ReviewStore } from '@/types'
+
+import { validations } from './validations'
+
+interface ReviewFormProps {
+  game: GameDetails
+}
+
+function ReviewForm(props: ReviewFormProps) {
+  const { game } = props
+  const [played, setPlayed] = useState<boolean>(false)
+  const [rating, setRating] = useState<number | null>(null)
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ReviewStore>({
+    defaultValues: { comment: '' },
+  })
+
+  const getProps = (
+    key: keyof typeof validations,
+    options?: RegisterOptions,
+  ) => ({
+    ...register(key, {
+      ...validations[key],
+      ...options,
+    } as RegisterOptions<ReviewStore>),
+    error: !!errors[key],
+    helperText: errors[key] && errors[key]?.message,
+  })
+
+  const onSubmit: SubmitHandler<ReviewStore> = async (data) => {
+    if (!rating) {
+      toast.error('You need to rate this game to submit a review.')
+
+      return
+    }
+
+    const payload: ReviewStore = {
+      ...data,
+      played,
+      userId: 1,
+      rate: rating,
+      gameId: game.id,
+    }
+
+    console.log(payload)
+  }
+
+  return (
+    <Stack component="form" onSubmit={handleSubmit(onSubmit)}>
+      <Grid2 container spacing={1.5} mb={2}>
+        <Box className="w-full flex flex-col gap-2">
+          <Typography
+            variant="h6"
+            className="dark:text-white text-gray-600">
+            Rate the Game
+          </Typography>
+          <MuiRating
+            value={rating}
+            precision={0.5}
+            onChange={(_, v) => {
+              if (v) {
+                setRating(v)
+
+                return
+              }
+
+              setRating(null)
+            }}
+            max={5}
+            size="large"
+            sx={{
+              color: '#ff4d4d',
+              '& .MuiRating-iconFilled': {
+                color: '#ff4d4d',
+              },
+              '& .MuiRating-iconHover': {
+                color: '#ff6666',
+              },
+            }}
+          />
+          {rating && (
+            <Typography className="block text-gray-400 font-semibold mt-1">
+              Rating: {rating}
+            </Typography>
+          )}
+        </Box>
+        <Box className="w-full flex flex-col gap-2">
+          <Typography
+            variant="h6"
+            className="dark:text-white text-gray-600">
+            Did you played this game?
+          </Typography>
+          <Switch
+            value={played}
+            checked={played}
+            onChange={(_, v) => setPlayed(v)}
+            sx={{
+              '& .MuiSwitch-switchBase': {
+                color: '#ff4d4d',
+              },
+              '& .MuiSwitch-switchBase.Mui-checked': {
+                color: '#ff4d4d',
+              },
+              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                backgroundColor: '#ff4d4d',
+              },
+              '& .MuiSwitch-track': {
+                backgroundColor: '#ccc',
+              },
+            }}
+          />
+        </Box>
+
+        <Input
+          area
+          isFull
+          label="Comment"
+          placeholder="Write your comment here..."
+          {...getProps('comment')}
+        />
+      </Grid2>
+
+      <Button>Submit</Button>
+    </Stack>
+  )
+}
+
+export default ReviewForm
diff --git a/src/components/Forms/Review/index.ts b/src/components/Forms/Review/index.ts
new file mode 100644
index 0000000..cb4120c
--- /dev/null
+++ b/src/components/Forms/Review/index.ts
@@ -0,0 +1 @@
+export { default } from './ReviewForm'
diff --git a/src/components/Forms/Review/validations.ts b/src/components/Forms/Review/validations.ts
new file mode 100644
index 0000000..9c3dd7d
--- /dev/null
+++ b/src/components/Forms/Review/validations.ts
@@ -0,0 +1,20 @@
+export const validations = {
+  rate: {
+    required: 'Please, write a number between 0 and 10.',
+    min: { value: 0, message: 'The minimum value for a review is 0.' },
+    max: { value: 10, message: 'The maximum value for a review is 10.' },
+  },
+  played: {
+    required: 'Please, tell me if you already played this game.',
+  },
+  comment: {
+    minLength: {
+      value: 15,
+      message: 'Your review must have at least 15 characters.',
+    },
+    maxLength: {
+      value: 2000,
+      message: 'Your review can not have more than 2000 characters!',
+    },
+  },
+}
diff --git a/src/components/Forms/index.ts b/src/components/Forms/index.ts
new file mode 100644
index 0000000..cf5ef87
--- /dev/null
+++ b/src/components/Forms/index.ts
@@ -0,0 +1 @@
+export { default as ReviewForm } from './Review'
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..f9c105e
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,101 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  InputHTMLAttributes,
+  ReactNode,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react'
+import { IoEyeOffOutline, IoEyeOutline } from 'react-icons/io5'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean
+  type?: string
+  placeholder?: string
+  icon?: ReactNode
+  isFull?: boolean
+  helperText?: string
+  area?: boolean
+  customClass?: string
+  label?: string
+  rows?: number
+}
+
+function Input(
+  {
+    icon,
+    isFull = false,
+    area = false,
+    type,
+    error,
+    label,
+    rows = 4,
+    helperText,
+    customClass,
+    ...rest
+  }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
+  const [passVisible, setPassVisible] = useState<boolean>(false)
+
+  const toggleVisibility = () => {
+    setPassVisible((prev) => !prev)
+  }
+
+  const baseClass = `px-4 py-2 rounded-md bg-transparent dark:text-white text-black placeholder-gray-400 focus:outline-none transition-colors duration-300 ${
+    isFull ? 'w-full' : 'w-auto'
+  } ${error ? 'border-red-500' : 'border-zinc-600'} ${customClass}`
+
+  return (
+    <div className={`relative ${isFull ? 'w-full' : 'inline-block'}`}>
+      {label && (
+        <label className="block dark:text-white text-gray-600 font-semibold mb-1">
+          {label}
+        </label>
+      )}
+
+      <div className="flex items-center border border-zinc-600 rounded-md">
+        {area ? (
+          <textarea
+            rows={rows}
+            ref={ref as React.Ref<HTMLTextAreaElement>}
+            className={`${baseClass} resize-y flex-grow`}
+            {...(rest as TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        ) : (
+          <input
+            ref={ref as React.Ref<HTMLInputElement>}
+            type={type === 'password' && passVisible ? 'text' : type}
+            className={`${baseClass} pr-12 flex-grow`}
+            {...rest}
+          />
+        )}
+
+        {type === 'password' && (
+          <button
+            type="button"
+            onClick={toggleVisibility}
+            className="flex items-center text-gray-500 hover:text-white focus:outline-none p-2">
+            {passVisible ? (
+              <IoEyeOutline size={20} />
+            ) : (
+              <IoEyeOffOutline size={20} />
+            )}
+          </button>
+        )}
+
+        {icon && (
+          <div className="flex items-center text-gray-500 p-2">{icon}</div>
+        )}
+      </div>
+
+      {error && helperText && (
+        <span className="text-red-500 flex justify-start mt-1 text-sm">
+          {helperText}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default forwardRef(Input)
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
new file mode 100644
index 0000000..aa97178
--- /dev/null
+++ b/src/components/Input/index.ts
@@ -0,0 +1 @@
+export { default } from './Input'
diff --git a/src/components/index.ts b/src/components/index.ts
index a06e6f2..a7eafea 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,7 @@
 export { default as Icon } from './Icon'
 export { default as Logo } from './Logo'
+export { default as Input } from './Input'
+export { default as Button } from './Button'
 export { default as Header } from './Header'
 export { default as Footer } from './Footer'
 export { default as Backdrop } from './Backdrop'
@@ -8,3 +10,5 @@ export { default as Loadable } from './Loadable'
 export { default as SwitchTheme } from './SwitchTheme'
 export { default as LoadingScreen } from './LoadingScreen'
 export { default as SwitchSidebar } from './SwitchSidebar'
+
+export * from './Forms'
diff --git a/src/mocks/game.ts b/src/mocks/game.ts
index 73e7b14..4c29d7b 100644
--- a/src/mocks/game.ts
+++ b/src/mocks/game.ts
@@ -22,7 +22,8 @@ export const MOCK_GAME_DETAILS: GameDetails = {
       mythology. Fight through a richly detailed world inspired
       by ancient Chinese literature.`,
   website: 'https://www.heishenhua.com/',
-  hearts_count: 839123,
+  views_count: 97857,
+  hearts_count: 20492,
   badge: 'hot',
   crack: {
     id: 1,
@@ -35,6 +36,47 @@ export const MOCK_GAME_DETAILS: GameDetails = {
       name: 'Denuvo',
     },
   },
+  messages: [
+    {
+      id: 1,
+      message:
+        'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero, recusandae repudiandae quia itaque, animi quasi iste atque porro nisi sit suscipit consequatur autem deserunt vel deleniti quae harum aliquam aliquid?',
+      by: {
+        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,
+        },
+      },
+      replies: [
+        {
+          id: 1,
+          message:
+            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero, recusandae repudiandae quia itaque, animi quasi iste atque porro nisi sit suscipit consequatur autem deserunt vel deleniti quae harum aliquam aliquid?',
+          by: {
+            id: 1,
+            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: {
+              share: true,
+            },
+          },
+          replies: [],
+        },
+      ],
+    },
+  ],
   galleries: [
     {
       id: 1,
@@ -55,7 +97,7 @@ export const MOCK_GAME_DETAILS: GameDetails = {
     {
       id: 1,
       played: true,
-      rate: 10,
+      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!
           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!`,
@@ -77,7 +119,7 @@ export const MOCK_GAME_DETAILS: GameDetails = {
     {
       id: 2,
       played: false,
-      rate: 5.8,
+      rate: 3.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!
           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!`,
@@ -99,7 +141,7 @@ export const MOCK_GAME_DETAILS: GameDetails = {
     {
       id: 3,
       played: false,
-      rate: 5,
+      rate: 2.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: {
@@ -120,7 +162,7 @@ export const MOCK_GAME_DETAILS: GameDetails = {
     {
       id: 4,
       played: true,
-      rate: 2.4,
+      rate: 2,
       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: {
diff --git a/src/mocks/games.ts b/src/mocks/games.ts
index 416c4de..5e9d2e3 100644
--- a/src/mocks/games.ts
+++ b/src/mocks/games.ts
@@ -21,6 +21,7 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 10, slug: 'samurai', name: 'Samurai' },
     ],
     badge: 'hot',
+    views_count: 4958,
     hearts_count: 1982,
     sale: false,
   },
@@ -48,7 +49,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 9, slug: 'souls', name: 'Souls' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 10293,
+    views_count: 69823,
     sale: true,
   },
   {
@@ -69,12 +71,13 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 5, slug: 'mythologic', name: 'Mythologic' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 50948,
+    hearts_count: 1029,
     sale: false,
   },
   {
     id: 4,
-    cover: 'https://picfiles.alphacoders.com/582/582126.jpg',
+    cover: 'https://wallpapercave.com/wp/wp11402292.jpg',
     title: 'The Callisto Protocol',
     slug: 'the-callisto-protocol',
     short_description: '',
@@ -94,7 +97,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 6, slug: 'thriller', name: 'Thriller' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 569,
+    views_count: 9827,
     sale: false,
   },
   {
@@ -123,7 +127,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 59,
+    views_count: 992,
     sale: true,
   },
   {
@@ -142,7 +147,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 7, slug: 'tps', name: 'TPS' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 12,
+    hearts_count: 10,
     sale: false,
   },
   {
@@ -167,7 +173,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 11,
+    views_count: 287,
     sale: true,
   },
   {
@@ -195,7 +202,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 278,
+    views_count: 231,
     sale: true,
   },
   {
@@ -221,7 +229,8 @@ export const MOCK_HOT_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 213,
+    views_count: 2812,
     sale: false,
   },
 ]
@@ -246,7 +255,8 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
       { id: 10, slug: 'samurai', name: 'Samurai' },
     ],
-    badge: 'popular',
+    badge: 'hot',
+    views_count: 4958,
     hearts_count: 1982,
     sale: false,
   },
@@ -273,8 +283,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 5, slug: 'mythologic', name: 'Mythologic' },
       { id: 9, slug: 'souls', name: 'Souls' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 10293,
+    views_count: 69823,
     sale: true,
   },
   {
@@ -294,8 +305,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 2, slug: 'adventure', name: 'Adventure' },
       { id: 5, slug: 'mythologic', name: 'Mythologic' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    views_count: 50948,
+    hearts_count: 1029,
     sale: false,
   },
   {
@@ -319,8 +331,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
       { id: 6, slug: 'thriller', name: 'Thriller' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 569,
+    views_count: 9827,
     sale: false,
   },
   {
@@ -348,8 +361,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 2, slug: 'adventure', name: 'Adventure' },
       { id: 3, slug: 'single-player', name: 'Single-player' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 59,
+    views_count: 992,
     sale: true,
   },
   {
@@ -367,8 +381,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
       { id: 7, slug: 'tps', name: 'TPS' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    views_count: 12,
+    hearts_count: 10,
     sale: false,
   },
   {
@@ -392,8 +407,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 4, slug: 'fantasy', name: 'Fantasy' },
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 11,
+    views_count: 287,
     sale: true,
   },
   {
@@ -420,8 +436,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 4, slug: 'fantasy', name: 'Fantasy' },
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 278,
+    views_count: 231,
     sale: true,
   },
   {
@@ -446,8 +463,9 @@ export const MOCK_POPULAR_GAMES: GameList[] = [
       { id: 4, slug: 'fantasy', name: 'Fantasy' },
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
-    badge: 'popular',
-    hearts_count: 0,
+    badge: 'hot',
+    hearts_count: 213,
+    views_count: 2812,
     sale: false,
   },
 ]
@@ -473,6 +491,7 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 10, slug: 'samurai', name: 'Samurai' },
     ],
     badge: 'hot',
+    views_count: 4958,
     hearts_count: 1982,
     sale: false,
   },
@@ -500,7 +519,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 9, slug: 'souls', name: 'Souls' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 10293,
+    views_count: 69823,
     sale: true,
   },
   {
@@ -521,7 +541,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 5, slug: 'mythologic', name: 'Mythologic' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 50948,
+    hearts_count: 1029,
     sale: false,
   },
   {
@@ -546,7 +567,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 6, slug: 'thriller', name: 'Thriller' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 569,
+    views_count: 9827,
     sale: false,
   },
   {
@@ -575,7 +597,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 59,
+    views_count: 992,
     sale: true,
   },
   {
@@ -594,7 +617,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 7, slug: 'tps', name: 'TPS' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 12,
+    hearts_count: 10,
     sale: false,
   },
   {
@@ -619,7 +643,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 11,
+    views_count: 287,
     sale: true,
   },
   {
@@ -647,7 +672,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 278,
+    views_count: 231,
     sale: true,
   },
   {
@@ -673,7 +699,8 @@ export const MOCK_MOST_LIKED_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 213,
+    views_count: 2812,
     sale: false,
   },
 ]
@@ -699,6 +726,7 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 10, slug: 'samurai', name: 'Samurai' },
     ],
     badge: 'hot',
+    views_count: 4958,
     hearts_count: 1982,
     sale: false,
   },
@@ -726,7 +754,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 9, slug: 'souls', name: 'Souls' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 10293,
+    views_count: 69823,
     sale: true,
   },
   {
@@ -747,7 +776,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 5, slug: 'mythologic', name: 'Mythologic' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 50948,
+    hearts_count: 1029,
     sale: false,
   },
   {
@@ -772,7 +802,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 6, slug: 'thriller', name: 'Thriller' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 569,
+    views_count: 9827,
     sale: false,
   },
   {
@@ -801,7 +832,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 3, slug: 'single-player', name: 'Single-player' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 59,
+    views_count: 992,
     sale: true,
   },
   {
@@ -820,7 +852,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 7, slug: 'tps', name: 'TPS' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    views_count: 12,
+    hearts_count: 10,
     sale: false,
   },
   {
@@ -845,7 +878,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 11,
+    views_count: 287,
     sale: true,
   },
   {
@@ -873,7 +907,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 278,
+    views_count: 231,
     sale: true,
   },
   {
@@ -899,7 +934,8 @@ export const MOCK_UPCOMING_GAMES: GameList[] = [
       { id: 8, slug: 'rpg', name: 'RPG' },
     ],
     badge: 'hot',
-    hearts_count: 0,
+    hearts_count: 213,
+    views_count: 2812,
     sale: false,
   },
 ]
diff --git a/src/pages/Calendar/Calendar.tsx b/src/pages/Calendar/Calendar.tsx
index 0e66870..d5c7828 100644
--- a/src/pages/Calendar/Calendar.tsx
+++ b/src/pages/Calendar/Calendar.tsx
@@ -5,7 +5,7 @@ import {
   Typography,
   useMediaQuery,
 } from '@mui/material'
-import { format, isSameDay } from 'date-fns'
+import { format, isSameDay, parseISO } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
 
 import { useTheme } from '@/hooks'
@@ -30,7 +30,7 @@ function Calendar() {
 
   const getTileContent = ({ date, view }: CalendarTileProperties) => {
     const appointment = games.filter((game) =>
-      isSameDay(new Date(game.release), date),
+      isSameDay(parseISO(game.release), date),
     )
 
     if (!appointment || view !== 'month') return null
@@ -39,7 +39,7 @@ function Calendar() {
       <Box sx={{ padding: isMobile ? '0.25rem' : '0.5rem' }}>
         {appointment.map((item) => (
           <Tooltip
-            title={`${item.title} - ${format(item.release, 'yyyy-MM-dd')}`}
+            title={`${item.title} - ${format(parseISO(item.release), 'yyyy-MM-dd')}`}
             sx={{ display: 'block' }}
             disableInteractive
             key={item.id}>
diff --git a/src/pages/Game/Details.tsx b/src/pages/Game/Details.tsx
index 1e3547f..00959cb 100644
--- a/src/pages/Game/Details.tsx
+++ b/src/pages/Game/Details.tsx
@@ -1,5 +1,7 @@
 import { Box, Container, List, Stack, Typography } from '@mui/material'
+import { IoStar } from 'react-icons/io5'
 
+import { ReviewForm } from '@/components'
 import { MOCK_GAME_DETAILS } from '@/mocks'
 
 import {
@@ -11,6 +13,7 @@ import {
   MainDetails,
   Requirements,
   ReviewCard,
+  Tabs,
   Torrents,
 } from './modules'
 
@@ -18,106 +21,162 @@ 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>
-        )}
-
+    <Stack className="dark:bg-theme-dark-900 bg-white dark:text-white text-black sm:p-6 p-0">
+      <Container maxWidth="xl">
         <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>
+          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 flex-col gap-4">
+        <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="h2"
-            className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
-            Downloadable Content (DLC)
+            variant="h1"
+            className="xl:text-5xl lg:text-4xl md:text-3xl sm:text-2xl text-xl 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>
-          {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
+            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>
-
-          <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>
+        <Tabs
+          tabs={[
+            {
+              tab: 'Info',
+              element: <MainDetails game={game} />,
+            },
+            {
+              tab: 'Torrents',
+              element: (
+                <Box component="section" className="flex flex-col gap-4">
+                  <Torrents game={game} />
+                </Box>
+              ),
+            },
+            {
+              tab: 'Gallery',
+              element: (
+                <Box component="section">
+                  <Galleries galleries={game.galleries} />
+                </Box>
+              ),
+            },
+            {
+              tab: 'Reviews',
+              element: (
+                <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">
+                    User reviews
+                  </Typography>
+                  {game.reviews.length > 0 && (
+                    <Box
+                      component="span"
+                      className="flex items-center gap-1">
+                      <IoStar size={18} className="text-yellow-500" />
+                      {game.reviews.reduce(
+                        (total, curr) => total + curr.rate,
+                        0,
+                      ) / game.reviews.length}
+                    </Box>
+                  )}
+                  <Box
+                    component="section"
+                    className="grid sm:grid-cols-2 grid-cols-1 gap-4">
+                    {game.reviews.map((review) => (
+                      <ReviewCard key={review.id} review={review} />
+                    ))}
+                  </Box>
+
+                  <Typography
+                    variant="h2"
+                    className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+                    Critics
+                  </Typography>
+                  {game.critics.length > 0 && (
+                    <Box
+                      component="span"
+                      className="flex items-center gap-1">
+                      <IoStar size={18} className="text-yellow-500" />
+                      {game.critics.reduce(
+                        (total, curr) => total + curr.rate,
+                        0,
+                      ) / game.critics.length}
+                    </Box>
+                  )}
+                  <Box component="section" className="flex flex-col gap-4">
+                    {game.critics.map((critic) => (
+                      <Critics key={critic.id} critic={critic} />
+                    ))}
+                  </Box>
+
+                  <Typography
+                    variant="h2"
+                    className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+                    Leave a review
+                  </Typography>
+
+                  <ReviewForm game={game} />
+                </Box>
+              ),
+            },
+            {
+              tab: 'Purchase',
+              element: (
+                <Box component="section" className="flex flex-col gap-4">
+                  {game.companies.map((company) => (
+                    <Availables key={company.id} company={company} />
+                  ))}
+                </Box>
+              ),
+            },
+            {
+              tab: 'DLCs',
+              element: (
+                <Box component="section">
+                  {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>
+              ),
+            },
+            {
+              tab: 'Requirements',
+              element: (
+                <Box component="section" className="flex flex-col gap-4">
+                  <Requirements requirements={game.requirements} />
+                </Box>
+              ),
+            },
+            {
+              tab: 'Languages',
+              element: (
+                <Box component="section" className="flex flex-col gap-4">
+                  <Languages languages={game.languages} />
+                </Box>
+              ),
+            },
+          ]}
+        />
       </Container>
     </Stack>
   )
diff --git a/src/pages/Game/modules/Availables.tsx b/src/pages/Game/modules/Availables.tsx
index 3a946c9..4dcd163 100644
--- a/src/pages/Game/modules/Availables.tsx
+++ b/src/pages/Game/modules/Availables.tsx
@@ -16,31 +16,28 @@ function Availables(props: AvailablesProps) {
         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>
+      <Box className="flex sm:justify-between justify-center sm:text-left text-center sm:gap-0 gap-4 sm:flex-row flex-col items-center w-full">
+        <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">
+            Price:{' '}
+            {(company.price / 100).toLocaleString('en-US', {
+              currency: 'USD',
+              style: 'currency',
+            })}
+          </Typography>
+        </Box>
         <Link
           href={company.url}
           className="text-theme-red-900 underline hover:opacity-70 transition-opacity duration-300 hover:text-red-500"
diff --git a/src/pages/Game/modules/Critics.tsx b/src/pages/Game/modules/Critics.tsx
index 7e351a9..9b32910 100644
--- a/src/pages/Game/modules/Critics.tsx
+++ b/src/pages/Game/modules/Critics.tsx
@@ -11,7 +11,7 @@ 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">
+    <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={critic.logo}
         alt={critic.name}
diff --git a/src/pages/Game/modules/DLCs.tsx b/src/pages/Game/modules/DLCs.tsx
index 9f6ceae..b92eb8a 100644
--- a/src/pages/Game/modules/DLCs.tsx
+++ b/src/pages/Game/modules/DLCs.tsx
@@ -29,7 +29,7 @@ function DLCs(props: DLCsProps) {
     <>
       <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">
+        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 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">
diff --git a/src/pages/Game/modules/GameChat.tsx b/src/pages/Game/modules/GameChat.tsx
new file mode 100644
index 0000000..b33313e
--- /dev/null
+++ b/src/pages/Game/modules/GameChat.tsx
@@ -0,0 +1,206 @@
+import {
+  Avatar,
+  Box,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { IoChatboxEllipsesOutline, IoSendOutline } from 'react-icons/io5'
+
+import { Input } from '@/components'
+import { GameDetails, Message } from '@/types'
+
+interface GameChatProps {
+  game: GameDetails
+}
+
+function GameChat(props: GameChatProps) {
+  const { game } = props
+  const [messages, setMessages] = useState<Message[]>(game.messages)
+  const [newMessage, setNewMessage] = useState<string>('')
+  const [replyMessage, setReplyMessage] = useState<string>('')
+  const [replyTo, setReplyTo] = useState<number | null>(null)
+
+  const handleSendMessage = () => {
+    if (newMessage.trim()) {
+      setMessages([
+        ...messages,
+        {
+          id: Date.now(),
+          message: newMessage,
+          by: {
+            id: 2,
+            name: 'Current User',
+            email: 'current@user.com',
+            nickname: 'currentuser',
+            birthdate: '1990-01-01',
+            created_at: '2024-01-01T00:00:00.000Z',
+            updated_at: '2024-01-01T00:00:00.000Z',
+            profile: {
+              photo: 'https://via.placeholder.com/40',
+              share: true,
+            },
+          },
+          replies: [],
+        },
+      ])
+      setNewMessage('')
+    }
+  }
+
+  const handleReplyMessage = (id: number) => {
+    if (replyMessage.trim()) {
+      setMessages(
+        messages.map((msg) =>
+          msg.id === id
+            ? {
+                ...msg,
+                replies: [
+                  ...msg.replies,
+                  {
+                    id: Date.now(),
+                    message: replyMessage,
+                    by: {
+                      id: 2,
+                      name: 'Current User',
+                      email: 'current@user.com',
+                      nickname: 'currentuser',
+                      birthdate: '1990-01-01',
+                      created_at: '2024-01-01T00:00:00.000Z',
+                      updated_at: '2024-01-01T00:00:00.000Z',
+                      profile: {
+                        photo: 'https://via.placeholder.com/40',
+                        share: true,
+                      },
+                    },
+                    replies: [],
+                  },
+                ],
+              }
+            : msg,
+        ),
+      )
+      setReplyMessage('')
+      setReplyTo(null)
+    }
+  }
+
+  const toggleReplyInput = (id: number) => {
+    setReplyTo(replyTo === id ? null : id)
+    setReplyMessage('')
+  }
+
+  return (
+    <Box>
+      <Typography
+        variant="h2"
+        className="sm:text-2xl text-xl font-semibold animate-flicker text-theme-red-900 dark:text-white break-words">
+        Chat
+      </Typography>
+
+      <List
+        sx={{
+          mt: 2,
+          width: '100%',
+          bgcolor: 'background.paper',
+        }}>
+        {messages.map((msg) => (
+          <ListItem
+            key={msg.id}
+            sx={{ flexDirection: 'column', alignItems: 'flex-start' }}>
+            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+              <Avatar src={msg.by.profile?.photo} alt={msg.by.name}>
+                {Array.from(msg.by.name)[0]}
+              </Avatar>
+              <ListItemText
+                primary={msg.message}
+                secondary={`by ${msg.by.nickname}`}
+                primaryTypographyProps={{
+                  className: 'dark:text-white text-gray-800',
+                  variant: 'body1',
+                  fontWeight: 'bold',
+                }}
+                secondaryTypographyProps={{
+                  className: 'dark:text-gray-400 text-gray-600',
+                  variant: 'body2',
+                }}
+              />
+            </Box>
+            <Box width="100%" sx={{ display: 'flex', gap: 1 }}>
+              <Tooltip title={`Answer ${msg.by.nickname}`}>
+                <IconButton
+                  size="large"
+                  onClick={() => toggleReplyInput(msg.id)}
+                  className="text-theme-red-900">
+                  <IoChatboxEllipsesOutline fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              {replyTo === msg.id && (
+                <Input
+                  isFull
+                  value={replyMessage}
+                  placeholder="Type your reply..."
+                  onChange={(e) => setReplyMessage(e.target.value)}
+                  icon={
+                    <IconButton onClick={() => handleReplyMessage(msg.id)}>
+                      <IoSendOutline className="text-theme-red-900" />
+                    </IconButton>
+                  }
+                />
+              )}
+            </Box>
+
+            {msg.replies.length > 0 && (
+              <List className="w-full sm:pl-4 pl-1">
+                {msg.replies.map((reply) => (
+                  <ListItem key={reply.id}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        gap: 2,
+                        alignItems: 'center',
+                      }}>
+                      <Avatar
+                        src={reply.by.profile?.photo}
+                        alt={reply.by.name}>
+                        {Array.from(reply.by.name)[0]}
+                      </Avatar>
+                      <ListItemText
+                        primary={reply.message}
+                        secondary={`by ${reply.by.nickname}`}
+                        primaryTypographyProps={{
+                          className: 'dark:text-gray-400 text-gray-600',
+                          variant: 'body2',
+                        }}
+                      />
+                    </Box>
+                  </ListItem>
+                ))}
+              </List>
+            )}
+          </ListItem>
+        ))}
+      </List>
+
+      <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
+        <Input
+          isFull
+          value={newMessage}
+          placeholder="Type your message..."
+          onChange={({ target }) => setNewMessage(target.value)}
+          icon={
+            <IconButton onClick={handleSendMessage}>
+              <IoSendOutline className="text-theme-red-900" />
+            </IconButton>
+          }
+        />
+      </Box>
+    </Box>
+  )
+}
+
+export default GameChat
diff --git a/src/pages/Game/modules/MainDetails.tsx b/src/pages/Game/modules/MainDetails.tsx
index 00f282b..fac116e 100644
--- a/src/pages/Game/modules/MainDetails.tsx
+++ b/src/pages/Game/modules/MainDetails.tsx
@@ -1,4 +1,13 @@
-import { Box, Chip, Link, List, ListItem, Typography } from '@mui/material'
+import {
+  Box,
+  Chip,
+  Link,
+  List,
+  ListItem,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { IoEyeOutline, IoHeartOutline } from 'react-icons/io5'
 
 import { GameDetails } from '@/types'
 
@@ -12,33 +21,9 @@ function MainDetails(props: MainDetailsProps) {
   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">
+        component="span"
+        className="flex flex-col md:flex-row relative sm:gap-4 gap-4 mb-4">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
@@ -49,11 +34,11 @@ function MainDetails(props: MainDetailsProps) {
           </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">
+        <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-[1.02] 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
+            Info
           </Typography>
           <Box className="flex flex-col gap-4">
             <Box className="flex sm:flex-row flex-col items-center gap-1">
@@ -62,14 +47,16 @@ function MainDetails(props: MainDetailsProps) {
                 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>
+              <Tooltip title="Go to game official website">
+                <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>
+              </Tooltip>
             </Box>
             <Box className="flex sm:flex-row flex-col items-center gap-1">
               <Typography
@@ -129,14 +116,19 @@ function MainDetails(props: MainDetailsProps) {
               </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 component="span">
+                <IoHeartOutline
+                  className="text-theme-red-900 animate-pulse"
+                  size={28}
+                />
               </Typography>
-              <Typography component="span" className="text-lg">
-                {game.hearts_count}
+              {game.hearts_count}
+            </Box>
+            <Box className="flex sm:flex-row flex-col items-center gap-1">
+              <Typography component="span">
+                <IoEyeOutline size={28} />
               </Typography>
+              {game.views_count}
             </Box>
           </Box>
         </Box>
@@ -144,8 +136,8 @@ function MainDetails(props: MainDetailsProps) {
 
       <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">
+        className="flex flex-col md:flex-row relative sm:gap-4 gap-4 mb-4">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
@@ -174,7 +166,7 @@ function MainDetails(props: MainDetailsProps) {
           </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">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="text-2xl font-bold mb-4 dark:text-white text-black">
@@ -206,8 +198,8 @@ function MainDetails(props: MainDetailsProps) {
 
       <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">
+        className="flex flex-col md:flex-row relative sm:gap-4 gap-4 mb-4">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
@@ -236,7 +228,7 @@ function MainDetails(props: MainDetailsProps) {
           </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">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="text-2xl font-bold mb-4 dark:text-white text-black">
@@ -268,8 +260,8 @@ function MainDetails(props: MainDetailsProps) {
 
       <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">
+        className="flex flex-col md:flex-row relative sm:gap-4 gap-4 mb-4">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="sm:text-2xl text-xl font-bold mb-4 dark:text-white text-black">
@@ -293,7 +285,7 @@ function MainDetails(props: MainDetailsProps) {
           </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">
+        <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-[1.02] duration-500 relative">
           <Typography
             variant="h2"
             className="text-2xl font-bold mb-4 dark:text-white text-black">
@@ -317,6 +309,12 @@ function MainDetails(props: MainDetailsProps) {
           </List>
         </Box>
       </Box>
+
+      <Box
+        component="section"
+        className="text-lg leading-relaxed text-center animate-fade-in w-full flex flex-col items-center gap-2"
+        dangerouslySetInnerHTML={{ __html: game.about }}
+      />
     </>
   )
 }
diff --git a/src/pages/Game/modules/Requirements.tsx b/src/pages/Game/modules/Requirements.tsx
index e8081aa..5d7ae2c 100644
--- a/src/pages/Game/modules/Requirements.tsx
+++ b/src/pages/Game/modules/Requirements.tsx
@@ -41,72 +41,66 @@ function Requirements(props: RequirementsProps) {
         ))}
       </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" />
+      {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 animate-fade-in">
+            <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>
+            <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>
+            <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">
-                    DirectX:
+                    Notes:
                   </span>{' '}
-                  {req.dx}
+                  {req.obs}
                 </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>
+              )}
+            </ul>
+          </div>
+        ))}
     </>
   )
 }
diff --git a/src/pages/Game/modules/ReviewCard.tsx b/src/pages/Game/modules/ReviewCard.tsx
index b9ffb20..20a8167 100644
--- a/src/pages/Game/modules/ReviewCard.tsx
+++ b/src/pages/Game/modules/ReviewCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Rating, Typography } from '@mui/material'
 
 import { Review } from '@/types'
 
@@ -10,8 +10,8 @@ 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'
+    if (review.rate < 2.5) return 'text-theme-red-900'
+    else if (review.rate === 2.5) return 'text-orange-500'
 
     return 'text-green-500'
   }
@@ -39,16 +39,12 @@ function ReviewCard(props: ReviewCardProps) {
       </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>
+        <Rating
+          readOnly
+          value={review.rate}
+          precision={0.5}
+          className={rateColor()}
+        />
       </Box>
       {review.played && (
         <Typography
diff --git a/src/pages/Game/modules/Tabs.tsx b/src/pages/Game/modules/Tabs.tsx
new file mode 100644
index 0000000..a6a2685
--- /dev/null
+++ b/src/pages/Game/modules/Tabs.tsx
@@ -0,0 +1,41 @@
+import { Fragment, ReactNode, useState } from 'react'
+
+interface TabsProps {
+  tabs: { tab: string; element: ReactNode }[]
+}
+
+function Tabs(props: TabsProps) {
+  const { tabs } = props
+  const [activeTab, setActiveTab] = useState<string>(tabs[0].tab)
+
+  return (
+    <>
+      <div className="grid xl:grid-cols-8 lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-2">
+        {tabs.map(({ tab }) => (
+          <button
+            key={tab}
+            className={`px-4 py-2 rounded-md text-white font-semibold transition-colors duration-300 break-words ${
+              activeTab === tab
+                ? 'bg-theme-red-900 shadow-lg hover:bg-red-700'
+                : 'bg-zinc-900 hover:bg-zinc-800'
+            }`}
+            onClick={() => setActiveTab(tab)}>
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-4">
+        {tabs
+          .filter(({ tab }) => tab === activeTab)
+          .map(({ tab, element }) => (
+            <Fragment key={tab}>
+              <div className="animate-slide-in">{element}</div>
+            </Fragment>
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default Tabs
diff --git a/src/pages/Game/modules/Torrents.tsx b/src/pages/Game/modules/Torrents.tsx
index 0cffef0..0759300 100644
--- a/src/pages/Game/modules/Torrents.tsx
+++ b/src/pages/Game/modules/Torrents.tsx
@@ -1,42 +1,64 @@
-import { Box, Link, Typography } from '@mui/material'
+import { Box, Link, Tooltip, Typography } from '@mui/material'
 import { format } from 'date-fns'
 
-import { Torrent } from '@/types'
+import { GameDetails } from '@/types'
+
+import { GameChat } from '.'
 
 interface TorrentsProps {
-  torrent: Torrent
+  game: GameDetails
 }
 
 function Torrents(props: TorrentsProps) {
-  const { torrent } = props
+  const { game } = 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>
+    <>
+      {game.torrents.length > 0 ? (
+        game.torrents.map((torrent) => (
+          <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"
+            key={torrent.id}>
+            <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">
+                  <Tooltip title={`Go to ${torrent.provider.name}`}>
+                    <Link
+                      href={torrent.url}
+                      target="_blank"
+                      className="underline dark:text-gray-400 text-zinc-700">
+                      {torrent.provider.name}
+                    </Link>
+                  </Tooltip>
+                </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>
+        ))
+      ) : (
+        <Typography className="text-theme-red-900 dark:text-white break-words">
+          No torrent available yet. Please, check the crack status on
+          details section or wait for the torrent post.
+        </Typography>
+      )}
+
+      <GameChat game={game} />
+    </>
   )
 }
 
diff --git a/src/pages/Game/modules/index.ts b/src/pages/Game/modules/index.ts
index 393bd70..0ea3f9d 100644
--- a/src/pages/Game/modules/index.ts
+++ b/src/pages/Game/modules/index.ts
@@ -1,5 +1,7 @@
 export { default as DLCs } from './DLCs'
+export { default as Tabs } from './Tabs'
 export { default as Critics } from './Critics'
+export { default as GameChat } from './GameChat'
 export { default as Torrents } from './Torrents'
 export { default as DLCsModal } from './DLCsModal'
 export { default as Galleries } from './Galleries'
diff --git a/src/styles/global.css b/src/styles/global.css
index 6ca795a..7084a8a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -86,10 +86,6 @@
       0 20px 60px rgba(255, 255, 255, 0.2);
   }
 
-  .animate-slide-in {
-    animation: slide-in 1s ease-out;
-  }
-
   .animate-flicker {
     animation: flicker 1.5s infinite;
   }
@@ -128,17 +124,6 @@
     }
   }
 
-  @keyframes slide-in {
-    from {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   @keyframes dashArray {
     0% {
       stroke-dasharray: 0 1 359 0;
diff --git a/src/types/games.ts b/src/types/games.ts
index bbacf60..fd07209 100644
--- a/src/types/games.ts
+++ b/src/types/games.ts
@@ -6,6 +6,7 @@ import {
   Platform,
   Review,
   Tag,
+  User,
 } from '.'
 
 export interface Price {
@@ -76,6 +77,7 @@ export interface GameList {
   badge?: string
   release: string
   best_price: number
+  views_count: number
   hearts_count: number
   short_description: string
   genres: Genre[]
@@ -129,6 +131,13 @@ export interface Torrent {
   provider: TorrentProvider
 }
 
+export interface Message {
+  id: number
+  message: string
+  by: User
+  replies: Message[]
+}
+
 export interface GameDetails {
   id: number
   age: number
@@ -141,6 +150,7 @@ export interface GameDetails {
   website?: string
   description?: string
   hearts_count: number
+  views_count: number
   short_description?: string
   tags: Tag[]
   dlcs: DLC[]
@@ -156,6 +166,7 @@ export interface GameDetails {
   requirements: Requirement[]
   critics: Critic[]
   torrents: Torrent[]
+  messages: Message[]
   crack: Crack
 }
 
diff --git a/src/types/reviews.ts b/src/types/reviews.ts
index 686f60f..a1c40f0 100644
--- a/src/types/reviews.ts
+++ b/src/types/reviews.ts
@@ -7,3 +7,11 @@ export interface Review {
   played: boolean
   user: User
 }
+
+export interface ReviewStore {
+  rate: number
+  gameId: number
+  userId: number
+  played: boolean
+  comment?: string
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c760367..92f9e62 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -10,6 +10,26 @@ export default {
         'theme-dark-900': 'rgb(13, 13, 13)',
         'theme-red-900': '#ff4d4d',
       },
+      animation: {
+        'fade-in': 'fadeIn 1s ease-out',
+        'slide-in': 'slideIn 0.5s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
+        },
+        slideIn: {
+          '0%': {
+            transform: 'translateX(-100%)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+            opacity: '1',
+          },
+        },
+      },
     },
   },
   plugins: [],