diff --git a/src/assets/images/projects/artapi.png b/src/assets/images/projects/artapi.png
index 51250bf..563f7fb 100644
Binary files a/src/assets/images/projects/artapi.png and b/src/assets/images/projects/artapi.png differ
diff --git a/src/assets/images/projects/artclick.png b/src/assets/images/projects/artclick.png
index fbdc6cb..dc74e11 100644
Binary files a/src/assets/images/projects/artclick.png and b/src/assets/images/projects/artclick.png differ
diff --git a/src/assets/images/projects/artsite.png b/src/assets/images/projects/artsite.png
index dede828..6500fcd 100644
Binary files a/src/assets/images/projects/artsite.png and b/src/assets/images/projects/artsite.png differ
diff --git a/src/assets/images/projects/erisium.png b/src/assets/images/projects/erisium.png
index bddf4ac..9a01de3 100644
Binary files a/src/assets/images/projects/erisium.png and b/src/assets/images/projects/erisium.png differ
diff --git a/src/components/Project.vue b/src/components/Project.vue
index ec7b766..12d0809 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,8 +1,8 @@
 <template>
   <a :href="url" target="_blank" rel="noopener noreferrer">
     <div class="rounded-lg shadow-xl h-92 w-full lg:w-84 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
-      <div class="h-1/2 w-full post flex justify-center">
-        <img :src="getCover" alt="Project Image" class="h-full rounded-t-lg"/>
+      <div class="h-1/2 w-full h-2/5 project rounded-t-lg"
+           :style="{ backgroundImage: `url(${getCover})` }">
       </div>
       <div class="h-1/2 p-4 flex flex-col justify-between">
         <div>
@@ -69,7 +69,6 @@ export default {
 .project {
   background-position: center;
   background-size: cover;
-  background-repeat: no-repeat;
   @apply bg-opacity-50;
 }
 </style>