diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx
index fcbbfa95..0f9d16ac 100644
--- a/components/CharacterHovercard/index.tsx
+++ b/components/CharacterHovercard/index.tsx
@@ -69,53 +69,55 @@ const CharacterHovercard = (props: Props) => {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
-      <HoverCard.Content className="Weapon Hovercard">
-        <div className="top">
-          <div className="title">
-            <h4>{props.gridCharacter.object.name[locale]}</h4>
-            <img
-              alt={props.gridCharacter.object.name[locale]}
-              src={characterImage()}
-            />
-          </div>
-          <div className="subInfo">
-            <div className="icons">
-              <WeaponLabelIcon
-                labelType={Element[props.gridCharacter.object.element]}
+      <HoverCard.Portal>
+        <HoverCard.Content className="Weapon Hovercard">
+          <div className="top">
+            <div className="title">
+              <h4>{props.gridCharacter.object.name[locale]}</h4>
+              <img
+                alt={props.gridCharacter.object.name[locale]}
+                src={characterImage()}
               />
-              <WeaponLabelIcon
-                labelType={
-                  Proficiency[
-                    props.gridCharacter.object.proficiency.proficiency1
-                  ]
-                }
-              />
-              {props.gridCharacter.object.proficiency.proficiency2 ? (
+            </div>
+            <div className="subInfo">
+              <div className="icons">
+                <WeaponLabelIcon
+                  labelType={Element[props.gridCharacter.object.element]}
+                />
                 <WeaponLabelIcon
                   labelType={
                     Proficiency[
-                      props.gridCharacter.object.proficiency.proficiency2
+                      props.gridCharacter.object.proficiency.proficiency1
                     ]
                   }
                 />
-              ) : (
-                ''
-              )}
+                {props.gridCharacter.object.proficiency.proficiency2 ? (
+                  <WeaponLabelIcon
+                    labelType={
+                      Proficiency[
+                        props.gridCharacter.object.proficiency.proficiency2
+                      ]
+                    }
+                  />
+                ) : (
+                  ''
+                )}
+              </div>
+              <UncapIndicator
+                type="character"
+                ulb={props.gridCharacter.object.uncap.ulb || false}
+                flb={props.gridCharacter.object.uncap.flb || false}
+                special={false}
+              />
             </div>
-            <UncapIndicator
-              type="character"
-              ulb={props.gridCharacter.object.uncap.ulb || false}
-              flb={props.gridCharacter.object.uncap.flb || false}
-              special={false}
-            />
           </div>
-        </div>
 
-        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-          {t('buttons.wiki')}
-        </a>
-        <HoverCard.Arrow />
-      </HoverCard.Content>
+          <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
+            {t('buttons.wiki')}
+          </a>
+          <HoverCard.Arrow />
+        </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }
diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx
index 6cfa7e94..5a603cc9 100644
--- a/components/SummonHovercard/index.tsx
+++ b/components/SummonHovercard/index.tsx
@@ -62,34 +62,36 @@ const SummonHovercard = (props: Props) => {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
-      <HoverCard.Content className="Weapon Hovercard">
-        <div className="top">
-          <div className="title">
-            <h4>{props.gridSummon.object.name[locale]}</h4>
-            <img
-              alt={props.gridSummon.object.name[locale]}
-              src={summonImage()}
-            />
-          </div>
-          <div className="subInfo">
-            <div className="icons">
-              <WeaponLabelIcon
-                labelType={Element[props.gridSummon.object.element]}
+      <HoverCard.Portal>
+        <HoverCard.Content className="Weapon Hovercard">
+          <div className="top">
+            <div className="title">
+              <h4>{props.gridSummon.object.name[locale]}</h4>
+              <img
+                alt={props.gridSummon.object.name[locale]}
+                src={summonImage()}
+              />
+            </div>
+            <div className="subInfo">
+              <div className="icons">
+                <WeaponLabelIcon
+                  labelType={Element[props.gridSummon.object.element]}
+                />
+              </div>
+              <UncapIndicator
+                type="summon"
+                ulb={props.gridSummon.object.uncap.ulb || false}
+                flb={props.gridSummon.object.uncap.flb || false}
+                special={false}
               />
             </div>
-            <UncapIndicator
-              type="summon"
-              ulb={props.gridSummon.object.uncap.ulb || false}
-              flb={props.gridSummon.object.uncap.flb || false}
-              special={false}
-            />
           </div>
-        </div>
-        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-          {t('buttons.wiki')}
-        </a>
-        <HoverCard.Arrow />
-      </HoverCard.Content>
+          <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
+            {t('buttons.wiki')}
+          </a>
+          <HoverCard.Arrow />
+        </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index 398d3ae3..28bbf4cc 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -91,7 +91,7 @@
   img {
     position: relative;
     width: 100%;
-    z-index: 2;
+    z-index: 0;
 
     &.Placeholder {
       opacity: 0;
diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss
index b5105f24..a9f5bd57 100644
--- a/components/WeaponHovercard/index.scss
+++ b/components/WeaponHovercard/index.scss
@@ -1,45 +1,41 @@
-.Hovercard {
-  z-index: 99;
+.Weapon.Hovercard {
+  .skills {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-right: $unit * 2;
 
-  .Weapon.HovercardContent {
-    .skills {
+    .axSkill {
+      align-items: center;
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
-      padding-right: $unit * 2;
 
-      .axSkill {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
+      &.primary img {
+        height: 64px;
+        width: 64px;
+      }
 
-        &.primary img {
-          height: 64px;
-          width: 64px;
-        }
+      &.secondary {
+        gap: $unit * 1.5;
 
-        &.secondary {
-          gap: $unit * 1.5;
-
-          img {
-            height: 36px;
-            width: 36px;
-          }
-        }
-
-        span {
-          font-size: $font-small;
-          font-weight: $medium;
-          text-align: center;
+        img {
+          height: 36px;
+          width: 36px;
         }
       }
-    }
 
-    .weaponKeys {
-      display: flex;
-      flex-direction: column;
-      font-size: $normal;
-      gap: calc($unit / 2);
+      span {
+        font-size: $font-small;
+        font-weight: $medium;
+        text-align: center;
+      }
     }
   }
+
+  .weaponKeys {
+    display: flex;
+    flex-direction: column;
+    font-size: $normal;
+    gap: calc($unit / 2);
+  }
 }
diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx
index 854bcb24..db7f002a 100644
--- a/components/WeaponHovercard/index.tsx
+++ b/components/WeaponHovercard/index.tsx
@@ -189,60 +189,63 @@ const WeaponHovercard = (props: Props) => {
   )
 
   return (
-    <HoverCard.Root className="Hovercard">
+    <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
-      <HoverCard.Content className="Weapon HovercardContent" side={hovercardSide()}>
-        <div className="top">
-          <div className="title">
-            <h4>{props.gridWeapon.object.name[locale]}</h4>
-            <img
-              alt={props.gridWeapon.object.name[locale]}
-              src={weaponImage()}
-            />
-          </div>
-          <div className="subInfo">
-            <div className="icons">
-              {props.gridWeapon.object.element !== 0 ||
-              (props.gridWeapon.object.element === 0 &&
-                props.gridWeapon.element != null) ? (
-                <WeaponLabelIcon
-                  labelType={
-                    props.gridWeapon.object.element === 0 &&
-                    props.gridWeapon.element !== 0
-                      ? Element[props.gridWeapon.element]
-                      : Element[props.gridWeapon.object.element]
-                  }
-                />
-              ) : (
-                ''
-              )}
-              <WeaponLabelIcon
-                labelType={Proficiency[props.gridWeapon.object.proficiency]}
+      <HoverCard.Portal>
+        <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
+          <div className="top">
+            <div className="title">
+              <h4>{props.gridWeapon.object.name[locale]}</h4>
+              <img
+                alt={props.gridWeapon.object.name[locale]}
+                src={weaponImage()}
+              />
+            </div>
+            <div className="subInfo">
+              <div className="icons">
+                {props.gridWeapon.object.element !== 0 ||
+                (props.gridWeapon.object.element === 0 &&
+                  props.gridWeapon.element != null) ? (
+                  <WeaponLabelIcon
+                    labelType={
+                      props.gridWeapon.object.element === 0 &&
+                      props.gridWeapon.element !== 0
+                        ? Element[props.gridWeapon.element]
+                        : Element[props.gridWeapon.object.element]
+                    }
+                  />
+                ) : (
+                  ''
+                )}
+                <WeaponLabelIcon
+                  labelType={Proficiency[props.gridWeapon.object.proficiency]}
+                />
+              </div>
+              <UncapIndicator
+                type="weapon"
+                ulb={props.gridWeapon.object.uncap.ulb || false}
+                flb={props.gridWeapon.object.uncap.flb || false}
+                special={false}
               />
             </div>
-            <UncapIndicator
-              type="weapon"
-              ulb={props.gridWeapon.object.uncap.ulb || false}
-              flb={props.gridWeapon.object.uncap.flb || false}
-              special={false}
-            />
           </div>
-        </div>
 
-        {props.gridWeapon.object.ax > 0 &&
-        props.gridWeapon.ax &&
-        props.gridWeapon.ax[0].modifier &&
-        props.gridWeapon.ax[0].strength
-          ? axSection
-          : ''}
-        {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0
-          ? keysSection
-          : ''}
-        <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
-          {t('buttons.wiki')}
-        </a>
-        <HoverCard.Arrow />
-      </HoverCard.Content>
+          {props.gridWeapon.object.ax > 0 &&
+          props.gridWeapon.ax &&
+          props.gridWeapon.ax[0].modifier &&
+          props.gridWeapon.ax[0].strength
+            ? axSection
+            : ''}
+          {props.gridWeapon.weapon_keys &&
+          props.gridWeapon.weapon_keys.length > 0
+            ? keysSection
+            : ''}
+          <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
+            {t('buttons.wiki')}
+          </a>
+          <HoverCard.Arrow />
+        </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 349bb8a3..c9e20df4 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -6,6 +6,7 @@
   position: relative;
   width: 100%;
   height: auto;
+  z-index: 0;
 
   @include breakpoint(tablet) {
     min-height: auto;