diff --git a/src/css/utilities.css b/src/css/utilities.css
index 4c00598..892c33d 100644
--- a/src/css/utilities.css
+++ b/src/css/utilities.css
@@ -106,7 +106,7 @@ h2::selection {
 /* Project cards */
 .card {
   padding: 1rem;
-  background: var(--card-background);
+  background: var(--card-background) center center/cover;
   color: #ffffff;
   border-radius: 5px;
   transition: 0.4s ease-in-out;
@@ -132,38 +132,6 @@ h2::selection {
   opacity: 1;
 }
 
-/* Project Images */
-
-/* project 1 */
-.card:nth-child(1) {
-  background: url(../assets/project/project-one.png) center center/cover;
-}
-
-/* Project 2 */
-.card:nth-child(2) {
-  background: url(../assets/project/project-two.png) center center/cover;
-}
-
-/* Project 3 */
-.card:nth-child(3) {
-  background: url(../assets/project/project-three.png) center center/cover;
-}
-
-/* Project 4 */
-.card:nth-child(4) {
-  background: url(../assets/project/project-four.png) center center/cover;
-}
-
-/* Project 5 */
-.card:nth-child(5) {
-  background: url(../assets/project/project-five.png) center center/cover;
-}
-
-/* Project 6 */
-.card:nth-child(6) {
-  background: url(../assets/project/project-six.png) center center/cover;
-}
-
 /* Media Queries */
 @media (max-width: 768px) {
   .header-container {
diff --git a/src/index.html b/src/index.html
index 0c8dcbb..9b6ed0c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -163,7 +163,7 @@ <h2>Projects</h2>
 
       <article class="project">
         <!-- Project 1 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-one.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project One</h3>
@@ -178,7 +178,7 @@ <h3>Project One</h3>
         </div>
 
         <!-- Project 2 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-two.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project Two</h3>
@@ -193,7 +193,7 @@ <h3>Project Two</h3>
         </div>
 
         <!-- Porject 3 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-three.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project Three</h3>
@@ -208,7 +208,7 @@ <h3>Project Three</h3>
         </div>
 
         <!-- Project 4 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-four.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project Four</h3>
@@ -223,7 +223,7 @@ <h3>Project Four</h3>
         </div>
 
         <!-- Project 5 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-five.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project Five</h3>
@@ -238,7 +238,7 @@ <h3>Project Five</h3>
         </div>
 
         <!-- Project 6 -->
-        <div href="" class="card">
+        <div href="" class="card" style="--card-background: url(../assets/project/project-six.png)">
           <div class="project-info">
             <div class="project-bio">
               <h3>Project Six</h3>