diff --git a/sports-matcher/src/App.js b/sports-matcher/src/App.js
index cf568dc..6e0a8e0 100644
--- a/sports-matcher/src/App.js
+++ b/sports-matcher/src/App.js
@@ -1,22 +1,13 @@
-import logo from './logo.svg';
 import './App.css';
 import MatchInfo from './matchinfo';
-import { Stack } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import SuggestedMatches from './SuggestedMatches';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-      </header>
       <main>
-        <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
-          <MatchInfo>
-          </MatchInfo>
-          <MatchInfo>
-          </MatchInfo>
-          <MatchInfo>
-          </MatchInfo>
-        </Stack>
+        <SuggestedMatches />
       </main>
     </div>
   );
diff --git a/sports-matcher/src/SuggestedMatches.js b/sports-matcher/src/SuggestedMatches.js
new file mode 100644
index 0000000..dde7f3e
--- /dev/null
+++ b/sports-matcher/src/SuggestedMatches.js
@@ -0,0 +1,20 @@
+import { Stack, Typography } from "@mui/material";
+import MatchInfo from "./matchinfo";
+
+export default function SuggestedMatches() {
+    return (
+        <div style={{ padding: 25 }}>
+            <Typography variant="h4" component="div">
+                Suggested
+            </Typography>
+            <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+            </Stack >
+        </div>
+    );
+}
\ No newline at end of file