diff --git a/components/SelfView.vue b/components/SelfView.vue
index 630ecbd..9552838 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
-import { CardEffects } from '@/netcode/Effect'
-
-const isTurn = computed(() => goStore.self?.team == goStore.current_game?.current_turn)
 
 </script>
 
@@ -40,7 +37,8 @@ const isTurn = computed(() => goStore.self?.team == goStore.current_game?.curren
 #turn_data {
     position: fixed;
     bottom: 10px;
-    left: 10px;
+    left: 50%;
+    right: 50%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -67,16 +65,16 @@ const isTurn = computed(() => goStore.self?.team == goStore.current_game?.curren
     align-items: stretch;
     flex-direction: row;
     flex-wrap: nowrap;
-    left: 70px;
+    left: 50%;
     bottom: -50px;
     max-width: 100vw;
     justify-content: flex-start;
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
-    transform: translateY(150px)
+    transform: translate(-50%, 150px)
 }
 
 #self_hand:hover {
-    transform: translateY(0px);
+    transform: translate(-50%, 0px);
 }
 
 #end_turn {