diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index cd09e5c1..353f222f 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -212,6 +212,7 @@
 
 .combat-text svg {
     height: 7em;
+    max-width: 100%;
 }
 
 .combat-anim {
@@ -220,10 +221,12 @@
     position: absolute;
     object-fit: contain;
     top: 15%;
+    max-width: 100%;
 }
 
 .combat-anim svg {
     height: 7em;
+    width: 100%;
 }
 
 .game-construct.active-skill {
diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx
index 812b32cb..0bde891b 100644
--- a/client/src/components/anims/block.jsx
+++ b/client/src/components/anims/block.jsx
@@ -13,27 +13,20 @@ class Block extends Component {
     render() {
         return (
             <svg
-                class='skill-animation red'
+                class='skill-animation white'
                 version="1.1"
                 id="block"
                 xmlns="http://www.w3.org/2000/svg"
-                style={{ transform: 'rotate(180deg)' }}
+                transform="rotate(180)"
                 viewBox="0 0 256 256">
-                <filter id='blockFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
                 <polygon
                     points='128,168 80,240 176,240'
-                    style={{ filter: 'url("#blockFilter")' }}
                     id="charge"/>
                 <polyline
                     points='176,240 212,216 128,96 44,216 80,240'
-                    style={{ filter: 'url("#blockFilter")' }}
                     id="charge"/>
                 <polyline
                     points='212,216 248,192 128,24 8,192 44,216'
-                    style={{ filter: 'url("#blockFilter")' }}
                     id="charge"/>
             </svg>
         );
@@ -47,16 +40,6 @@ class Block extends Component {
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DELAY_MS,
         }));
-
-        this.animations.push(anime({
-            targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
-        }));
     }
 
     // this is necessary because
diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx
index beca0500..80e682f9 100644
--- a/client/src/components/anims/buff.jsx
+++ b/client/src/components/anims/buff.jsx
@@ -17,12 +17,8 @@ class Buff extends Component {
                 class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 300">
-                <filter id='buffFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <g filter='url("#buffFilter")'>
+                viewBox="0 0 200 200">
+                <g>
                     <polygon class='buff-one' points='0,190    100,300   190,190'/>
                     <polygon class='buff-two' points='40,170    100,300   160,170'/>
                     <polygon class='buff-three' points='70,150    100,300   130,150'/>
@@ -44,34 +40,29 @@ class Buff extends Component {
         this.animations.push(anime({
             targets: ['#buff .buff-one'],
             points: '0,190    100,10   190,190',
+
             easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,
         }));
 
         this.animations.push(anime({
             targets: ['#buff .buff-two'],
             points: '40,170    100,50   160,170',
+
             easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,
         }));
 
         this.animations.push(anime({
             targets: ['#buff .buff-three'],
             points: '70,150    100,90   130,150',
+
             easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,
         }));
-
-        this.animations.push(anime({
-            targets: ['#buffFilter feTurbulence', ' #buffFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
-
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
-        }));
-
     }
 
     // this is necessary because
diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index bf7efe98..7d5a1fda 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -18,12 +18,8 @@ class Debuff extends Component {
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: 'rotate(180deg)' }}
-                viewBox="0 0 300 300">
-                <filter id='debuffFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                </filter>
-                <g filter='url("#debuffFilter")'>
+                viewBox="0 0 200 200">
+                <g>
                     <polygon class='debuff-one' points='0,190    100,300   190,190'/>
                     <polygon class='debuff-two' points='40,170    100,300   160,170'/>
                     <polygon class='debuff-three' points='70,150    100,300   130,150'/>
@@ -46,6 +42,7 @@ class Debuff extends Component {
             targets: ['#debuff .debuff-one'],
             points: '0,190    100,10   190,190',
             easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,
         }));
 
@@ -53,6 +50,7 @@ class Debuff extends Component {
             targets: ['#debuff .debuff-two'],
             points: '40,170    100,50   160,170',
             easing: 'easeOutExpo',
+            delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,
         }));
 
@@ -60,17 +58,8 @@ class Debuff extends Component {
             targets: ['#debuff .debuff-three'],
             points: '70,150    100,90   130,150',
             easing: 'easeOutExpo',
-            duration: TIMES.START_SKILL,
-        }));
-
-        this.animations.push(anime({
-            targets: ['#debuffFilter feTurbulence', ' #debuffFilter feDisplacementMap'],
-            baseFrequency: 0,
-            scale: 1,
-            easing: 'easeOutSine',
-
             delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS,
+            duration: TIMES.START_SKILL,
         }));
     }
 
diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index 206457eb..317f3d08 100644
--- a/client/src/components/anims/decay.jsx
+++ b/client/src/components/anims/decay.jsx
@@ -29,6 +29,10 @@ class Decay extends Component {
                     <rect x="135" y="135" width="30" height="30" />
                     <rect x="135" y="135" width="30" height="30" />
                     <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
+                    <rect x="135" y="135" width="30" height="30" />
                 </g>
             </svg>
         );
@@ -46,7 +50,10 @@ class Decay extends Component {
 
         this.animations.push(anime({
             targets: ['#decay rect'],
-            transform: () => `translate(${anime.random(-100, 100)} ${anime.random(-100, 100)}) rotate(${anime.random(-15, 15)})`,
+            x: () => anime.random(30, 270),
+            y: () => anime.random(30, 270),
+            transform: `rotate(${anime.random(-15, 15)})`,
+            filter: ['brightness(1)', 'brightness(1.5)'],
             opacity: 0,
             easing: 'linear',
             delay: TIMES.TARGET_DELAY_MS,
diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx
index 1ba65274..e89cf07f 100644
--- a/client/src/components/anims/haste.jsx
+++ b/client/src/components/anims/haste.jsx
@@ -14,10 +14,10 @@ class Haste extends Component {
         return (
             <svg
                 id='haste'
-                class="skill-animation white"
+                class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 300">
+                viewBox="0 0 200 200">
                 <filter id='hasteFilter'>
                     <feTurbulence type="turbulence"
                         baseFrequency="0"
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 23c34fee..87e415ed 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,7 +1,7 @@
 module.exports = {
     TIMES: {
         RESOLUTION_TOTAL_MS: 2000,
-        // RESOLUTION_TOTAL_MS: 20000,
+        // RESOLUTION_TOTAL_MS: 200000,
 
         SOURCE_DURATION_MS: 1000,
         TARGET_DELAY_MS: 500,