diff --git a/OliverBooth/Pages/Projects/Index.cshtml b/OliverBooth/Pages/Projects/Index.cshtml
index 32706ab..cadb193 100644
--- a/OliverBooth/Pages/Projects/Index.cshtml
+++ b/OliverBooth/Pages/Projects/Index.cshtml
@@ -24,40 +24,48 @@
                         case ProjectStatus.Ongoing:
                             <div class="project-card">
                                 <div class="ribbon ribbon-top-left green">
+                                    <span>Ongoing</span>
+                                </div>
+                                <div class="project-image">
                                     <a asp-page="Project" asp-route-slug="@project.Slug">
-                                        <span>Ongoing</span>
+                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
+                                    </a>
+                                    <a asp-page="Project" asp-route-slug="@project.Slug">
+                                        <p class="project-title">@project.Name</p>
                                     </a>
                                 </div>
-                                <a asp-page="Project" asp-route-slug="@project.Slug">
-                                    <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
-                                </a>
                             </div>
                             break;
 
                         case ProjectStatus.Past:
                             <div class="border-info project-card">
                                 <div class="ribbon ribbon-top-left blue">
+                                    <span>Past Work</span>
+                                </div>
+                                <div class="project-image">
                                     <a asp-page="Project" asp-route-slug="@project.Slug">
-                                        <span>Past Work</span>
+                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
+                                    </a>
+                                    <a asp-page="Project" asp-route-slug="@project.Slug">
+                                        <p class="project-title">@project.Name</p>
                                     </a>
                                 </div>
-                                <a asp-page="Project" asp-route-slug="@project.Slug">
-                                    <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
-                                </a>
                             </div>
                             break;
 
                         case ProjectStatus.Hiatus:
                             <div class="border-danger project-card">
                                 <div class="ribbon ribbon-top-left red">
-
+                                    <span>On Hiatus</span>
+                                </div>
+                                <div class="project-image">
                                     <a asp-page="Project" asp-route-slug="@project.Slug">
-                                        <span>On Hiatus</span>
+                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
+                                    </a>
+                                    <a asp-page="Project" asp-route-slug="@project.Slug">
+                                        <p class="project-title">@project.Name</p>
                                     </a>
                                 </div>
-                                <a asp-page="Project" asp-route-slug="@project.Slug">
-                                    <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
-                                </a>
                             </div>
                             break;
                     }
diff --git a/src/scss/app.scss b/src/scss/app.scss
index d6d73d1..d6b0a7f 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -182,6 +182,21 @@ article {
   position: relative;
   background: #000;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
+
+  .project-image a {
+    &:link, &:visited, &:hover &:active {
+      color: #fff;
+    }
+  }
+  
+  .project-image p.project-title {
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    margin: -34px 0 0;
+    padding: 5px;
+    background-color: rgba(#000, 50%);
+  }
 }
 
 .blog-card {