diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
index 40f08be0..7eea8156 100644
--- a/components/WeaponModal/index.tsx
+++ b/components/WeaponModal/index.tsx
@@ -78,13 +78,15 @@ const WeaponModal = (props: Props) => {
     setElement(props.gridWeapon.element)
 
     if (props.gridWeapon.weapon_keys) {
-      if (props.gridWeapon.weapon_keys[0]) {
-        setWeaponKey1(props.gridWeapon.weapon_keys[0])
-      }
-      if (props.gridWeapon.weapon_keys[1])
-        setWeaponKey2(props.gridWeapon.weapon_keys[1])
-      if (props.gridWeapon.weapon_keys[2])
-        setWeaponKey3(props.gridWeapon.weapon_keys[2])
+      props.gridWeapon.weapon_keys.forEach((key) => {
+        if (key.slot + 1 === 1) {
+          setWeaponKey1(key)
+        } else if (key.slot + 1 === 2) {
+          setWeaponKey2(key)
+        } else if (key.slot + 1 === 3) {
+          setWeaponKey3(key)
+        }
+      })
     }
   }, [props])
 
@@ -119,14 +121,17 @@ const WeaponModal = (props: Props) => {
 
     if (props.gridWeapon.object.element == 0) object.weapon.element = element
 
-    if ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) {
+    if (
+      [2, 3, 17, 24].includes(props.gridWeapon.object.series) &&
+      weaponKey1Id
+    ) {
       object.weapon.weapon_key1_id = weaponKey1Id
     }
 
-    if ([2, 3, 17].includes(props.gridWeapon.object.series))
+    if ([2, 3, 17].includes(props.gridWeapon.object.series) && weaponKey2Id)
       object.weapon.weapon_key2_id = weaponKey2Id
 
-    if (props.gridWeapon.object.series == 17)
+    if (props.gridWeapon.object.series == 17 && weaponKey3Id)
       object.weapon.weapon_key3_id = weaponKey3Id
 
     if (props.gridWeapon.object.ax > 0) {
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index db499054..84598500 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -127,6 +127,79 @@ const WeaponUnit = (props: Props) => {
     }
   }
 
+  function opusImage(index: number) {
+    const baseUrl = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-keys/`
+    let filename = ''
+    let altText = ''
+
+    // If there is a grid weapon, it is a Dark Opus Weapon and it has keys
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.object.series === 2 &&
+      props.gridWeapon.weapon_keys
+    ) {
+      if (
+        props.gridWeapon.weapon_keys[index] &&
+        props.gridWeapon.weapon_keys[index].slot === 0
+      ) {
+        altText = `${props.gridWeapon.weapon_keys[index].name[locale]}`
+        filename = `${props.gridWeapon.weapon_keys[index].slug}.png`
+      } else if (
+        props.gridWeapon.weapon_keys[index] &&
+        props.gridWeapon.weapon_keys[index].slot === 1
+      ) {
+        altText = `${props.gridWeapon.weapon_keys[index].name[locale]}`
+
+        const element = props.gridWeapon.object.element
+        const mod = props.gridWeapon.object.name.en.includes('Repudiation')
+          ? 'primal'
+          : 'magna'
+
+        const suffix = `${mod}-${element}`
+        const weaponKey = props.gridWeapon.weapon_keys[index]
+
+        if (
+          [
+            'pendulum-strength',
+            'pendulum-zeal',
+            'pendulum-strife',
+            'chain-temperament',
+            'chain-restoration',
+            'chain-glorification',
+          ].includes(weaponKey.slug)
+        ) {
+          filename = `${props.gridWeapon.weapon_keys[index].slug}-${suffix}.png`
+        } else {
+          filename = `${props.gridWeapon.weapon_keys[index].slug}.png`
+        }
+      }
+
+      return (
+        <img
+          alt={`${altText}`}
+          className="Skill"
+          src={`${baseUrl}${filename}`}
+        />
+      )
+    }
+  }
+
+  function opusImages() {
+    let images: JSX.Element[] = []
+    if (
+      props.gridWeapon &&
+      props.gridWeapon.weapon_keys &&
+      props.gridWeapon.weapon_keys.length > 0
+    ) {
+      for (let i = 0; i < props.gridWeapon.weapon_keys.length; i++) {
+        const image = opusImage(i)
+        if (image) images.push(image)
+      }
+    }
+
+    return images
+  }
+
   function axImage(index: number) {
     const axSkill = getCanonicalAxSkill(index)
 
@@ -194,6 +267,7 @@ const WeaponUnit = (props: Props) => {
           {axImage(1)}
           {telumaImage(0)}
           {telumaImage(1)}
+          {opusImages()}
         </div>
       </div>
       <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />