diff --git a/src/components/layout/Project.tsx b/src/components/layout/Project.tsx
index a40068d..0cd7792 100644
--- a/src/components/layout/Project.tsx
+++ b/src/components/layout/Project.tsx
@@ -70,7 +70,6 @@ export default component$((props: { project: Project | null }) => {
 
       <div
         class="object-og u-cursor-pointer"
-        style="height: 200px;"
         onClick$={async () => await nav(`/projects/${project.$id}`)}
       >
         <img src={AppwriteService.getProjectThumbnail(project.imageId)} />
diff --git a/src/components/layout/ProjectFeatured.tsx b/src/components/layout/ProjectFeatured.tsx
index b0e2e47..8b136e4 100644
--- a/src/components/layout/ProjectFeatured.tsx
+++ b/src/components/layout/ProjectFeatured.tsx
@@ -14,11 +14,10 @@ export default component$((props: { project: Project }) => {
         <div class="u-flex-basis-50-percent u-flex-shrink-0">
           <button
             onClick$={async () => await nav(`/projects/${project.$id}`)}
-            class="object-og"
+            class="object-og object-og-rounded"
           >
             <img
               src={AppwriteService.getProjectThumbnail(project.imageId, 1920)}
-              style="border-radius: var(--border-radius-medium);"
             />
           </button>
         </div>
diff --git a/src/global.css b/src/global.css
index 820e93d..6213da5 100644
--- a/src/global.css
+++ b/src/global.css
@@ -58,25 +58,34 @@
 }
 
 .object-og {
-  aspect-ratio: 1.8 / 1;
   width: 100%;
-  height: 100%;
+  position: relative;
 }
 
 .object-og img {
+  display: block;
   width: 100%;
   object-fit: cover;
+  object-position: center;
+  aspect-ratio: 16 / 9;
 }
 
-.object-square {
-  aspect-ratio: 1 / 1;
+.object-og::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  pointer-events: none;
 }
 
-.object-square img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.object-og-rounded {
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+  display: inline-block;
 }
 
 .vertical-button {
diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx
index d5f2fbc..f9b480d 100644
--- a/src/routes/projects/[projectId]/index.tsx
+++ b/src/routes/projects/[projectId]/index.tsx
@@ -225,10 +225,10 @@ export default component$(() => {
             />
           </div>
         </div>
-        <div class="u-flex-vertical u-gap-24 u-width-full-line">
-          <div class="object-og u-width-full-line">
+
+        <div>
+          <div class="object-og object-og-rounded">
             <img
-              style="border-radius: var(--border-radius-medium);"
               src={AppwriteService.getProjectThumbnail(
                 projectData.value.project.imageId
               )}