diff --git a/apps/d0rich.me/pages/blog/[page].vue b/apps/d0rich.me/pages/blog/[page].vue
index f8722629..3bb9735a 100644
--- a/apps/d0rich.me/pages/blog/[page].vue
+++ b/apps/d0rich.me/pages/blog/[page].vue
@@ -50,7 +50,7 @@ const blogQuery: QueryBuilderParams = {
         mask="owl"
         color
         outline
-        class="h-full absolute top-0 right-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
+        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
       />
     </div>
 
diff --git a/apps/d0rich.me/pages/projects/[page].vue b/apps/d0rich.me/pages/projects/[page].vue
index d97862d9..7eca72ca 100644
--- a/apps/d0rich.me/pages/projects/[page].vue
+++ b/apps/d0rich.me/pages/projects/[page].vue
@@ -34,7 +34,7 @@ const { data } = useAsyncData(`/projects/pages/${currentPage.value}`, () =>
         mask="spider"
         color
         outline
-        class="h-full absolute top-0 right-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
+        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
       />
     </div>
     <section v-if="data">
diff --git a/apps/d0rich.me/pages/resume/[type].vue b/apps/d0rich.me/pages/resume/[type].vue
index 678eb072..75ec7c20 100644
--- a/apps/d0rich.me/pages/resume/[type].vue
+++ b/apps/d0rich.me/pages/resume/[type].vue
@@ -93,7 +93,7 @@ const { data: resumeList } = useAsyncData(
           mask="wolf"
           color
           outline
-          class="h-full absolute top-0 right-0 -z-10 brightness-[25%] md:brightness-100 transition-all print:hidden"
+          class="h-full w-full flex flex-row-reverse absolute top-0 right-0 -z-10 brightness-[25%] md:brightness-100 transition-all print:hidden"
         />
       </section>
       <ContentRenderer
diff --git a/packages/nuxt-design-system/components/d/Mask.vue b/packages/nuxt-design-system/components/d/Mask.vue
index ad75b836..fa5471b0 100644
--- a/packages/nuxt-design-system/components/d/Mask.vue
+++ b/packages/nuxt-design-system/components/d/Mask.vue
@@ -52,11 +52,21 @@ function getAsset(mask: MaskType) {
 </script>
 
 <template>
-  <Transition name="mask" mode="out-in">
-    <img v-if="mask === 'spider'" :src="getAsset('spider')" alt="Spider mask" />
-    <img v-else-if="mask === 'owl'" :src="getAsset('owl')" alt="Owl mask" />
-    <img v-else-if="mask === 'wolf'" :src="getAsset('wolf')" alt="Wolf mask" />
-  </Transition>
+  <div>
+    <Transition name="mask" mode="out-in">
+      <img
+        v-if="mask === 'spider'"
+        :src="getAsset('spider')"
+        alt="Spider mask"
+      />
+      <img v-else-if="mask === 'owl'" :src="getAsset('owl')" alt="Owl mask" />
+      <img
+        v-else-if="mask === 'wolf'"
+        :src="getAsset('wolf')"
+        alt="Wolf mask"
+      />
+    </Transition>
+  </div>
 </template>
 
 <style scoped>