diff --git a/src/store/index.js b/src/store/index.js
index d9c45f1..c479aef 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,9 +4,22 @@ export default createStore({
   state: {
     id64: '',
     vanityUrl: '',
-    matchDetails: {}
+    matchDetails: {},
+    playerDetails: {}
   },
   mutations: {
+    changeId64(state, payload) {
+      state.id64 = payload.id
+    },
+    changeVanityUrl(state, payload) {
+      state.vanityUrl = payload.id
+    },
+    changeMatchDetails(state, payload) {
+      state.matchDetails = payload.data
+    },
+    changePlayerDetails(state, payload) {
+      state.playerDetails = payload.data
+    },
   },
   actions: {
   },
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
index ff57b7f..3d7f7ca 100644
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -45,3 +45,24 @@ export const getPlayerArr = (stats, team, color) => {
   return arr
 }
 
+export const constructAvatarUrl = (hash, size) => {
+  const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars'
+  const imgSize = size ? `_${size}` : ''
+  const hashDir = hash.substring(0, 2)
+
+  return `${base}/${hashDir}/${hash}${imgSize}.jpg`
+}
+
+export const GetAvgRank = (stats) => {
+  let count = 0
+  let fullRank = 0
+
+  stats.map(player => {
+    if (player.rank?.old) {
+      fullRank += player.rank?.old
+      count += 1
+    }
+  })
+
+  return count === 0 ? 0 : Math.floor(fullRank / count)
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 102d56a..0766fdc 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
 import {GetUser, TrackMe} from "./ApiRequests";
-import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr} from "./Utils";
+import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank} from "./Utils";
 
 export {
   FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
   GetHLTV_1,
   DisplayRank, LoadImage,
   GetUser, TrackMe,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr
+  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank
 }
diff --git a/src/views/Match.vue b/src/views/Match.vue
index cb75953..6f48527 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
+import {DisplayRank, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 
@@ -92,7 +92,7 @@ export default {
     const store = useStore()
     const route = useRoute()
 
-    store.state.matchDetails = {}
+    const matchIdPattern = /^\d{19}$/
 
     // Refs
     const data = reactive({
@@ -105,56 +105,57 @@ export default {
 
     // Functions
     const GetMatch = () => {
-      axios
-          .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
-          .then((response) => {
-            document.title = `${response.data.map} | csgoWTF`
-            data.matchDetails = response.data
-            data.stats = response.data.stats
-            data.score = response.data.score
+      if (matchIdPattern.test(props.match_id))
+        axios
+            .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
+            .then((response) => {
+              document.title = `${response.data.map} | csgoWTF`
+              store.commit({
+                type: 'changeMatchDetails',
+                data: response.data
+              })
 
-            store.state.matchDetails = response.data
+              data.matchDetails = store.state.matchDetails
+              data.stats = data.matchDetails.stats
+              data.score = data.matchDetails.score
 
-            LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
+              LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
-            console.log(response.data)
-          })
-          .catch((e) => {
-            console.log(e)
-          })
-    }
+              GetAvgRank(data.stats)
 
-    const GetAvgRank = () => {
-      let count = 0
-      let fullRank = 0
-
-      data.stats?.map(player => {
-        if (player.rank?.old) {
-          fullRank += player.rank?.old
-          count += 1
-        }
-      })
-
-      if (count === 0)
-        data.avgRank = 0
-      else
-        data.avgRank = Math.floor(fullRank / count)
+              console.log(data.matchDetails)
+            })
+            .catch((e) => {
+              console.log(e)
+              // TODO: needs 404
+            })
+      else {
+        console.log('Match not found')
+        // TODO: needs 404
+      }
     }
 
     const checkRoute = () => {
       if (route.fullPath.split('/')[3]) {
         const sub = route.fullPath.split('/')[3]
-        GoToLink(`/match/${props.match_id}/${sub}`)
+        if (matchIdPattern.test(props.match_id))
+          GoToLink(`/match/${props.match_id}/${sub}`)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       } else if (route.fullPath.split('/')[3] === undefined) {
-        // setTimeout(() => {
+        if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/overview`)
-        // }, 200)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       }
     }
 
     // Watchers
     watch(() => props.match_id, GetMatch)
-    watch(() => data.stats, GetAvgRank)
 
     // Run on create
     onBeforeMount(() => {
@@ -165,8 +166,15 @@ export default {
       checkRoute()
     })
 
+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changeMatchDetails',
+        data: {}
+      })
+    })
+
     return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
+      data, DisplayRank, FormatFullDate
     }
   }
 }
@@ -241,6 +249,9 @@ export default {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+
+  padding-left: 70px;
+
   z-index: 1;
   height: 100%;
   width: 100%;
@@ -252,4 +263,11 @@ export default {
       rgba(0, 0, 0, .6) 100%
   );
 }
+
+@media screen and (max-width: 991px) {
+  #scoreWrapper {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+}
 </style>
diff --git a/src/views/Player.vue b/src/views/Player.vue
index d2fb1e3..d314975 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -6,10 +6,16 @@
         <div class="row g-0">
           <div class="img-container col-md-2 pt-3">
             <img
-                :class="data.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
+                :class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
                 :title="data.tracked ? 'Tracked' : ''"
                 alt="Player avatar"
                 class="img-fluid avatar">
+            <!--            <img-->
+            <!--                :class="data.tracked ? 'tracked' : ''"-->
+            <!--                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"-->
+            <!--                :title="data.tracked ? 'Tracked' : ''"-->
+            <!--                alt="Player avatar"-->
+            <!--                class="img-fluid avatar">-->
           </div>
           <div class="col-md-8 d-flex">
             <div class="card-body">
@@ -18,7 +24,7 @@
                   class="text-decoration-none text-white"
                   target="_blank"
                   title="Open steam profile">{{
-                  data.playerDetails.name
+                  store.state.playerDetails.name
                 }}
                 <i class="fas fa-link"></i>
               </a></h3>
@@ -100,71 +106,72 @@
           </div>
         </div>
       </div>
-      <div class="matches m-auto">
-        <table v-if="data.matches" class="table table-borderless">
-          <thead class="border-bottom">
-          <tr>
-            <th class="text-center map" scope="col">Map</th>
-            <th class="text-center rank" scope="col">Rank</th>
-            <th class="text-center length" scope="col" title="Match Length">
-              <i class="far fa-clock"></i>
-            </th>
-            <th class="text-center score" scope="col">Score</th>
-            <th class="text-center kills" scope="col">K</th>
-            <th class="text-center assists" scope="col">A</th>
-            <th class="text-center deaths" scope="col">D</th>
-            <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
-            <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
-            <th class="text-center duration" scope="col">Duration</th>
-            <th class="date" scope="col">Date</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr v-for="match in data.matches"
-              :key="match.match_id"
-              :class="GetWinLoss(match.match_result, match.stats.team_id)"
-              class="match"
-              @click="GoToMatch(match.match_id)">
-            <td class="td-map text-center">
-              <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
-                 title="Demo has been parsed for additional data"></i>
-              <img :alt="match.map ? match.map : 'Map not found'"
-                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
-                   :title="match.map"
-                   class="map-icon">
-            </td>
-            <td class="td-rank text-center">
-              <img
-                  :alt="DisplayRank(match.stats.rank?.new)[1]"
-                  :src="DisplayRank(match.stats.rank?.new)[0]"
-                  :title="DisplayRank(match.stats.rank?.new)[1]"
-                  class="rank-icon">
-            </td>
-            <td class="td-length text-center">
-              <i v-if="match.max_rounds === 30 || !match.max_rounds" class="fas fa-circle text-muted"
-                 title="Long match"></i>
-              <i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
-            </td>
-            <td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
-                class="td-score text-center fw-bold">
-              {{ match.score[0] }} - {{ match.score[1] }}
-            </td>
-            <td class="td-kills text-center">
-              {{ match.stats.kills ? match.stats.kills : "0" }}
-            </td>
-            <td class="td-assists text-center">
-              {{ match.stats.assists ? match.stats.assists : "0" }}
-            </td>
-            <td class="td-deaths text-center">
-              {{ match.stats.deaths ? match.stats.deaths : "0" }}
-            </td>
-            <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
-                class="td-plus text-center">
-              {{
-                (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
-              }}
-            </td>
-            <td :class="GetHLTV_1(
+      <div class="match-container">
+        <div class="matches">
+          <table v-if="data.matches" class="table table-borderless">
+            <thead class="border-bottom">
+            <tr>
+              <th class="text-center map" scope="col">Map</th>
+              <th class="text-center rank" scope="col">Rank</th>
+              <th class="text-center length" scope="col" title="Match Length">
+                <i class="far fa-clock"></i>
+              </th>
+              <th class="text-center score" scope="col">Score</th>
+              <th class="text-center kills" scope="col">K</th>
+              <th class="text-center assists" scope="col">A</th>
+              <th class="text-center deaths" scope="col">D</th>
+              <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
+              <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
+              <th class="text-center duration" scope="col">Duration</th>
+              <th class="date" scope="col">Date</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="match in data.matches"
+                :key="match.match_id"
+                :class="GetWinLoss(match.match_result, match.stats.team_id)"
+                class="match"
+                @click="GoToMatch(match.match_id)">
+              <td class="td-map text-center">
+                <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
+                   title="Demo has been parsed for additional data"></i>
+                <img :alt="match.map ? match.map : 'Map not found'"
+                     :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
+                     :title="match.map"
+                     class="map-icon">
+              </td>
+              <td class="td-rank text-center">
+                <img
+                    :alt="DisplayRank(match.stats.rank?.new)[1]"
+                    :src="DisplayRank(match.stats.rank?.new)[0]"
+                    :title="DisplayRank(match.stats.rank?.new)[1]"
+                    class="rank-icon">
+              </td>
+              <td class="td-length text-center">
+                <i v-if="match.max_rounds === 30 || !match.max_rounds" class="fas fa-circle text-muted"
+                   title="Long match"></i>
+                <i v-if="match.max_rounds === 16" class="far fa-circle text-muted" title="Short match"></i>
+              </td>
+              <td :class="match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
+                  class="td-score text-center fw-bold">
+                {{ match.score[0] }} - {{ match.score[1] }}
+              </td>
+              <td class="td-kills text-center">
+                {{ match.stats.kills ? match.stats.kills : "0" }}
+              </td>
+              <td class="td-assists text-center">
+                {{ match.stats.assists ? match.stats.assists : "0" }}
+              </td>
+              <td class="td-deaths text-center">
+                {{ match.stats.deaths ? match.stats.deaths : "0" }}
+              </td>
+              <td :class="(match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+                  class="td-plus text-center">
+                {{
+                  (match.stats.kills ? match.stats.kills : 0) - (match.stats.deaths ? match.stats.deaths : 0)
+                }}
+              </td>
+              <td :class="GetHLTV_1(
                       match.stats.kills,
                       match.score[0] + match.score[1],
                       match.stats.deaths,
@@ -172,36 +179,79 @@
                       match.stats.multi_kills?.triple,
                       match.stats.multi_kills?.quad,
                       match.stats.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
-                class="td-hltv text-center fw-bold">
-              {{
-                GetHLTV_1(
-                    match.stats.kills,
-                    match.score[0] + match.score[1],
-                    match.stats.deaths,
-                    match.stats.multi_kills?.duo,
-                    match.stats.multi_kills?.triple,
-                    match.stats.multi_kills?.quad,
-                    match.stats.multi_kills?.pent)
-              }}
-            </td>
-            <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
-              {{ FormatDuration(match.duration) }}
+                  class="td-hltv text-center fw-bold">
+                {{
+                  GetHLTV_1(
+                      match.stats.kills,
+                      match.score[0] + match.score[1],
+                      match.stats.deaths,
+                      match.stats.multi_kills?.duo,
+                      match.stats.multi_kills?.triple,
+                      match.stats.multi_kills?.quad,
+                      match.stats.multi_kills?.pent)
+                }}
+              </td>
+              <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
+                {{ FormatDuration(match.duration) }}
 
-            </td>
-            <td :title="FormatFullDate(match.date)" class="td-date">
-              {{ FormatDate(match.date) }}
-            </td>
-          </tr>
-          </tbody>
-        </table>
-        <h5 v-else>No matches on record</h5>
+              </td>
+              <td :title="FormatFullDate(match.date)" class="td-date">
+                {{ FormatDate(match.date) }}
+              </td>
+            </tr>
+            </tbody>
+          </table>
+          <h5 v-else>No matches on record</h5>
+        </div>
+        <div class="side-info">
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Best Mate</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Mate 1</li>
+              <li>Mate 2</li>
+              <li>Mate 3</li>
+              <li>Mate 4</li>
+              <li>Mate 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Most played with</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Player 1</li>
+              <li>Player 2</li>
+              <li>Player 3</li>
+              <li>Player 4</li>
+              <li>Player 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Preferred Weapons</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Weapon 1</li>
+              <li>Weapon 2</li>
+              <li>Weapon 3</li>
+              <li>Weapon 4</li>
+              <li>Weapon 5</li>
+            </ul>
+          </div>
+        </div>
       </div>
+
     </div>
   </div>
 </template>
 
 <script>
-import {onMounted, reactive, watch} from "vue";
+import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
   DisplayRank,
@@ -215,7 +265,8 @@ import {
   GoToLink,
   GoToMatch,
   LoadImage,
-  SaveLastVisitedToLocalStorage, setTitle,
+  SaveLastVisitedToLocalStorage,
+  setTitle,
   TrackMe
 } from "../utils";
 
@@ -231,7 +282,6 @@ export default {
         authcode: '',
         sharecode: ''
       },
-      playerDetails: {},
       tracked: false,
       matches: [],
       statusError: '',
@@ -243,43 +293,63 @@ export default {
       }
     })
 
+    const SetPlayerData = () => {
+      data.tracked = store.state.playerDetails.tracked
+      data.matches = store.state.playerDetails.matches
+      data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
+      data.match_stats.win = store.state.playerDetails.match_stats.win || 0
+      data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
+
+      store.commit({
+        type: 'changeId64',
+        id: store.state.playerDetails.steamid64
+      })
+      store.commit({
+        type: 'changeVanityUrl',
+        id: store.state.playerDetails.vanity_url || ''
+      })
+
+      if (data.matches)
+        LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
+
+      let player = {
+        'steamid64': store.state.playerDetails.steamid64,
+        'vanity_url': store.state.playerDetails.vanity_url || '',
+        'name': store.state.playerDetails.name,
+        'avatar': store.state.playerDetails.avatar
+        // 'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
+      }
+      SaveLastVisitedToLocalStorage(player)
+
+      setTitle(store.state.playerDetails.name)
+    }
+
     const GetPlayer = async () => {
       if (props.id) {
         const [res, resData] = await GetUser(props.id)
 
         if (res === 200 && resData) {
-          data.playerDetails = resData
-          data.tracked = resData.tracked
-          data.matches = data.playerDetails.matches
-          data.match_stats.loss = data.playerDetails.match_stats.loss || 0
-          data.match_stats.win = data.playerDetails.match_stats.win || 0
-          data.match_stats.tie = data.playerDetails.match_stats.tie || 0
+          store.commit({
+            type: 'changePlayerDetails',
+            data: resData
+          })
 
-          if (data.matches)
-            LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
+          SetPlayerData()
 
-          let player = {
-            'steamid64': data.playerDetails.steamid64,
-            'vanity_url': data.playerDetails.vanity_url || '',
-            'name': data.playerDetails.name,
-            'avatar': data.playerDetails.avatar
-          }
-          SaveLastVisitedToLocalStorage(player)
-
-          setTitle(data.playerDetails.name)
-
-          console.log(data.playerDetails)
+          console.log(store.state.playerDetails)
         } else {
           GoToLink('/')
+          // TODO: needs 404
         }
       } else {
         GoToLink('/')
+        // TODO: needs 404
       }
     }
 
     const TrackPlayer = async () => {
       if (data.userData.authcode !== '') {
-        [data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+        [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
 
         if (data.statusErrorCode === 202) {
           data.statusErrorCode = 0
@@ -298,11 +368,22 @@ export default {
 
     onMounted(() => {
           setTimeout(() => {
-            GetPlayer()
+            if (Object.entries(store.state.playerDetails).length === 0) {
+              GetPlayer()
+            } else {
+              SetPlayerData()
+            }
           }, 200)
         }
     )
 
+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changePlayerDetails',
+        data: {}
+      })
+    })
+
     return {
       data,
       store,
@@ -406,6 +487,59 @@ export default {
   }
 }
 
+.match-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .matches {
+    width: 75%;
+  }
+
+  .side-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: 25%;
+    height: auto;
+    margin-top: 30px;
+
+    .side-info-box {
+      width: 100%;
+      height: auto;
+      background: rgba(20, 20, 20, .8);
+      border: 1px solid rgba(white, .3);
+      border-radius: 5px;
+    }
+
+    .best-mate {
+      .heading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 40px;
+
+        h5 {
+          margin: 0;
+          padding: 0;
+        }
+      }
+
+      hr {
+        margin: 0;
+        border-color: rgba(white, .3);
+      }
+
+      ul {
+        padding: 10px;
+      }
+    }
+  }
+}
+
 table {
   margin-bottom: 0;
 
@@ -490,21 +624,10 @@ table {
 }
 
 @media screen and (max-width: 768px) {
-  .win {
-    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .loss {
-    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .draw {
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
   .card {
     .avatar {
-      height: 75px;
-      width: 75px;
+      height: 75px !important;
+      width: 75px !important;
     }
   }
   .trackme-btn {
@@ -550,4 +673,26 @@ table {
     display: none;
   }
 }
+
+@media screen and (max-width: 991px) {
+  .matches {
+    width: 100% !important;
+  }
+  .side-info {
+    display: none !important;
+  }
+  .avatar {
+    width: 100px !important;
+    height: 100px !important;
+  }
+  .trackme-btn {
+    top: 25px;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .td-plus, .kdiff {
+    display: none;
+  }
+}
 </style>