diff --git a/src/assets/bulls-eye.webp b/src/assets/bulls-eye.webp
new file mode 100644
index 0000000..d7b9c0b
Binary files /dev/null and b/src/assets/bulls-eye.webp differ
diff --git a/src/assets/meh.webp b/src/assets/meh.webp
new file mode 100644
index 0000000..090139e
Binary files /dev/null and b/src/assets/meh.webp differ
diff --git a/src/assets/thumbs-up.webp b/src/assets/thumbs-up.webp
new file mode 100644
index 0000000..16a4605
Binary files /dev/null and b/src/assets/thumbs-up.webp differ
diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx
new file mode 100644
index 0000000..6c2bc40
--- /dev/null
+++ b/src/components/Emoji.tsx
@@ -0,0 +1,24 @@
+import bullsEye from '../assets/bulls-eye.webp';
+import thumbsUp from '../assets/thumbs-up.webp';
+import meh from '../assets/meh.webp';
+import { Image, ImageProps } from '@chakra-ui/react';
+
+interface Props {
+  rating: number;
+}
+
+const Emoji = ({ rating }: Props) => {
+  if (rating < 3) return null;
+
+  const emojiMap: { [key: number]: ImageProps } = {
+    3: { src: meh, alt: 'meh', boxSize: '25px' },
+    4: { src: thumbsUp, alt: 'recommended', boxSize: '25px' },
+    5: { src: bullsEye, alt: 'exceptional', boxSize: '35px' },
+  }
+
+  return (
+    <Image {...emojiMap[rating]} marginTop={1} />
+  )
+}
+
+export default Emoji
\ No newline at end of file
diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index f1595d6..fe3e880 100644
--- a/src/components/GameCard.tsx
+++ b/src/components/GameCard.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { Game } from '../hooks/useGames'
 import getCroppedImageUrl from '../services/image-url'
 import CriticScore from './CriticScore'
+import Emoji from './Emoji'
 import PlatformIconList from './PlatformIconList'
 
 interface Props {
@@ -18,7 +19,7 @@ const GameCard = ({ game }: Props) => {
           <PlatformIconList platforms={game.parent_platforms.map(p => p.platform)} />
           <CriticScore score={game.metacritic} />
         </HStack>
-        <Heading fontSize='2xl'>{game.name}</Heading>
+        <Heading fontSize='2xl'>{game.name}<Emoji rating={game.rating_top}/></Heading>
       </CardBody>
     </Card>
   )
diff --git a/src/hooks/useGames.ts b/src/hooks/useGames.ts
index 1398a2f..b7ccbd4 100644
--- a/src/hooks/useGames.ts
+++ b/src/hooks/useGames.ts
@@ -14,6 +14,7 @@ export interface Game {
   background_image: string;
   parent_platforms: { platform: Platform }[];
   metacritic: number;
+  rating_top: number;
 }
 
 const useGames = (gameQuery: GameQuery) =>