diff --git a/src/GameProjects.jsx b/src/GameProjects.jsx
index f38543e..3ea6640 100644
--- a/src/GameProjects.jsx
+++ b/src/GameProjects.jsx
@@ -2,6 +2,7 @@ import { h, render, Component } from "preact";
 import {
   Grid,
   Container,
+  Paper,
   Card,
   CardHeader,
   CardMedia,
@@ -49,7 +50,10 @@ memory footprint returning to this project in my final year of university.`,
     return (
       <Container>
         <p />
-        <Typography variant="h4">Game Projects</Typography>
+        <Card>
+          <CardHeader title="Game Development Projects" />
+        </Card>
+        <p />
         <Grid container spacing={3}>
           {this.content.map((project) => {
             return (
diff --git a/src/WebProjects.jsx b/src/WebProjects.jsx
index 1fc7805..f10f8b0 100644
--- a/src/WebProjects.jsx
+++ b/src/WebProjects.jsx
@@ -1,6 +1,7 @@
 import { h, render, Component } from "preact";
 import {
   Container,
+  Paper,
   Card,
   CardHeader,
   CardMedia,
@@ -15,7 +16,10 @@ class WebProjects extends Component {
     return (
       <Container>
         <p />
-        <Typography variant="h4">Web Development Projects</Typography>
+        <Card>
+          <CardHeader title="Web Development Projects" />
+        </Card>
+        <p />
         <Card>
           <CardHeader
             title="ramble.fm"