diff --git a/frontend/src/components/Works.css b/frontend/src/components/Works.css
index a8e246a..2a01395 100644
--- a/frontend/src/components/Works.css
+++ b/frontend/src/components/Works.css
@@ -107,10 +107,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
-  background:
-    radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 42%),
-    linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
+  padding: 8px;
+  background: #ffffff;
 }
 
 .work-image::after {
@@ -123,8 +121,10 @@
 }
 
 .work-image img {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
   object-fit: contain;
   transition: transform 0.5s ease;
 }
diff --git a/frontend/src/components/Works.jsx b/frontend/src/components/Works.jsx
index 6d5fa6d..e7a8260 100644
--- a/frontend/src/components/Works.jsx
+++ b/frontend/src/components/Works.jsx
@@ -103,7 +103,13 @@ const Works = ({ title, type, categoryFilter, sectionId }) => {
               cover={
                 <div className="work-image">
                   <img
-                    src={work.thumbnail_image ? `${API_CONFIG.baseURL}${work.thumbnail_image}` : getImageUrl(work.id)}
+                    src={
+                      work.watermarked_image
+                        ? `${API_CONFIG.baseURL}${work.watermarked_image}`
+                        : work.thumbnail_image
+                          ? `${API_CONFIG.baseURL}${work.thumbnail_image}`
+                          : getImageUrl(work.id)
+                    }
                     alt={work.title}
                     loading="lazy"
                     onError={(e) => {
diff --git a/frontend/src/pages/WorkDetail.css b/frontend/src/pages/WorkDetail.css
index dc7ffd0..bbf6ca5 100644
--- a/frontend/src/pages/WorkDetail.css
+++ b/frontend/src/pages/WorkDetail.css
@@ -167,25 +167,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 520px;
-  padding: 24px;
-  background:
-    radial-gradient(circle at top, rgba(255, 255, 255, 0.7), transparent 40%),
-    linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
+  padding: 0;
+  background: #ffffff;
+  border: 1px solid rgba(232, 223, 214, 0.95);
 }
 
 .work-image-shell::after {
-  content: '';
-  position: absolute;
-  inset: auto 0 0;
-  height: 26%;
-  background: linear-gradient(180deg, transparent, rgba(28, 22, 18, 0.12));
-  pointer-events: none;
+  display: none;
 }
 
 .work-image {
   width: 100%;
-  max-height: min(72vh, 880px);
+  height: auto;
   display: block;
   object-fit: contain;
 }