diff --git a/WORKLOG.md b/WORKLOG.md
index 1d9bca15..fa73444e 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -4,6 +4,7 @@
 * serde serialize privatise
 * stripe prod
 * mobile styles
+* pct based translates for combat animation
 * info fix
 * account page
 * graphs n shit
diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index 33f14c8d..4df23a5b 100644
--- a/client/assets/styles/controls.less
+++ b/client/assets/styles/controls.less
@@ -30,6 +30,6 @@ aside {
 .ready {
     color: forestgreen;
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-timing-function: ease;
 }
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 190a28be..83218972 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -351,6 +351,10 @@
 
 .equipping, .receiving {
     transition: border-color 0.5s ease-in;
+    transition-duration: 0.25s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+
     border: 2px dashed @gray-hint;
 }
 
diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css
index 5256c675..52eceb82 100644
--- a/client/assets/styles/instance.mobile.css
+++ b/client/assets/styles/instance.mobile.css
@@ -101,7 +101,7 @@
         padding: 0;
 
         transition-property: all;
-        transition-duration: 0.5s;
+        transition-duration: 0.25s;
         transition-delay: 0;
         transition-timing-function: ease;
     }
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index d9b99561..b1d78d6e 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -144,7 +144,7 @@ tr.right:focus, tr.right:hover {
 
 tr {
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
@@ -163,7 +163,7 @@ button, input {
 
     /*the transitions */
     transition-property: color, background;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
@@ -360,7 +360,7 @@ header {
     animation: saw 2s infinite linear;
 
     transition-property: stroke-color;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-timing-function: ease;
 }
 
@@ -400,7 +400,7 @@ header {
 
     border: 1px solid black;
     transition-property: border;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 
@@ -604,7 +604,7 @@ main .top button {
 .timer {
     background: whitesmoke;
     transition-property: all;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
diff --git a/client/src/components/controls.jsx b/client/src/components/controls.jsx
index cc4fe990..2c642ed8 100644
--- a/client/src/components/controls.jsx
+++ b/client/src/components/controls.jsx
@@ -30,8 +30,8 @@ function Controls(args) {
         sendGameReady,
     } = args;
 
-    if (instance) return <InstanceCtrl />;
     if (game) return <GameCtrl />;
+    if (instance) return <InstanceCtrl />;
     if (nav === 'play' || !nav) return <PlayCtrl />
 
     return false;
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx
index e158ce7e..4f209cc0 100644
--- a/client/src/components/game.ctrl.jsx
+++ b/client/src/components/game.ctrl.jsx
@@ -1,8 +1,6 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const InstanceCtrl = require('./instance.ctrl');
-
 const addState = connect(
     function receiveState(state) {
         const {
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index 0e01cd59..09805b55 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -35,6 +35,7 @@ function Main(props) {
         return <Instance />;
     }
 
+    if (nav === 'transition') return false;
     if (nav === 'play') return <Play />;
     if (nav === 'team') return <Team />;
 
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index ba8f7f8e..77eacc76 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -74,8 +74,8 @@ function Nav(args) {
     }
 
     function joinInstance(i) {
-        if (game) navTo(null);
         sendInstanceState(i);
+        if (game) navTo('transition');
         return true;
     }
 
diff --git a/client/src/components/play.ctrl.jsx b/client/src/components/play.ctrl.jsx
index 9efd672a..b0dab22a 100644
--- a/client/src/components/play.ctrl.jsx
+++ b/client/src/components/play.ctrl.jsx
@@ -29,13 +29,13 @@ function JoinButtons(args) {
     return (
         <aside>
             <button
-                class='pvp'
+                class='pvp ready'
                 onClick={() => sendInstanceQueue()}
                 type="submit">
                 PVP
             </button>
             <button
-                class='practice'
+                class='practice ready'
                 onClick={() => sendInstancePractice()}
                 type="submit">
                 Practice