diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index e51237bc..7722f5fc 100644
--- a/client/assets/styles/game.less
+++ b/client/assets/styles/game.less
@@ -88,6 +88,13 @@
     stroke: whitesmoke;
 }
 
+.resolving-skill {
+    grid-area: target;
+    align-self: center;
+    text-align: center;
+    height: auto;
+}
+
 /* some stupid bug in chrome makes it fill the entire screen */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     #targeting {
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index ac087830..ed822459 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -17,8 +17,9 @@ class TargetSvg extends Component {
 
         this.onResize = throttle(() => {
             const svg = document.getElementById('targeting');
+            if (!svg) return setTimeout(this.onResize, 500);
             const { width, height } = svg.getBoundingClientRect();
-            const path = document.querySelector('#targeting path');
+            // const path = document.querySelector('#targeting path');
             this.setState({ width, height });
         }, 500);
     }
@@ -34,15 +35,7 @@ class TargetSvg extends Component {
             if (!animTarget) return false;
 
             return (
-                <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
-                    <text
-                        x={`${(width / 2) - 50}`}
-                        y={`${(height / 2) + 16}`}
-                        font-family="Jura"
-                        font-size="2em">
-                        {animTarget.skill}
-                    </text>
-                </svg>
+                <h1 class="resolving-skill">{animTarget.skill}</h1>
             );
         }