diff --git a/src/App.tsx b/src/App.tsx
index f0c00f6..7e7f765 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
import { Box, Flex, Grid, GridItem, HStack, Show } from "@chakra-ui/react";
import { useState } from "react";
import GameGrid from "./components/GameGrid";
+import GameHeading from "./components/GameHeading";
import GenreList from "./components/GenreList";
import NavBar from "./components/NavBar";
import PlatformSelector from "./components/PlatformSelector";
@@ -39,12 +40,15 @@ function App() {
-
-
- setGameQuery({ ...gameQuery, platform}) } />
-
- setGameQuery({ ...gameQuery, sortOrder })} />
-
+
+
+
+
+ setGameQuery({ ...gameQuery, platform}) } />
+
+ setGameQuery({ ...gameQuery, sortOrder })} />
+
+
diff --git a/src/components/GameHeading.tsx b/src/components/GameHeading.tsx
new file mode 100644
index 0000000..92b8d5a
--- /dev/null
+++ b/src/components/GameHeading.tsx
@@ -0,0 +1,16 @@
+import { Heading } from '@chakra-ui/react'
+import { GameQuery } from '../App'
+
+interface Props {
+ gameQuery: GameQuery
+}
+
+const GameHeading = ({ gameQuery }: Props) => {
+ const heading = `${gameQuery.platform?.name || ''} ${gameQuery.genre?.name || ''} Games`;
+
+ return (
+ {heading}
+ )
+}
+
+export default GameHeading
\ No newline at end of file