diff --git a/package.json b/package.json
index 67dbb24..e070338 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@popperjs/core": "^2.10.2",
     "axios": "^0.22.0",
-    "babel-eslint": "^10.1.0",
     "bootstrap": "^5.1.2",
     "core-js": "^3.18.2",
     "luxon": "^2.0.2",
@@ -25,6 +25,7 @@
     "@vue/cli-plugin-vuex": "~4.5.13",
     "@vue/cli-service": "~4.5.13",
     "@vue/compiler-sfc": "^3.2.19",
+    "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^7.19.1",
     "sass": "^1.42.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80881f8..5e6463f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@fortawesome/fontawesome-free': ^5.15.4
   '@popperjs/core': ^2.10.2
   '@vue/cli-plugin-babel': ~4.5.13
   '@vue/cli-plugin-eslint': ~4.5.13
@@ -23,9 +24,9 @@ specifiers:
   vuex: ^4.0.2
 
 dependencies:
+  '@fortawesome/fontawesome-free': 5.15.4
   '@popperjs/core': 2.10.2
   axios: 0.22.0
-  babel-eslint: 10.1.0_eslint@6.8.0
   bootstrap: 5.1.2_@popperjs+core@2.10.2
   core-js: 3.18.2
   luxon: 2.0.2
@@ -40,6 +41,7 @@ devDependencies:
   '@vue/cli-plugin-vuex': 4.5.13_@vue+cli-service@4.5.13
   '@vue/cli-service': 4.5.13_14d4d8446413226c330137c0feac1b91
   '@vue/compiler-sfc': 3.2.19
+  babel-eslint: 10.1.0_eslint@6.8.0
   eslint: 6.8.0
   eslint-plugin-vue: 7.19.1_eslint@6.8.0
   sass: 1.42.1
@@ -53,6 +55,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/highlight': 7.14.5
+    dev: true
 
   /@babel/compat-data/7.15.0:
     resolution: {integrity: sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==}
@@ -89,6 +92,7 @@ packages:
       '@babel/types': 7.15.6
       jsesc: 2.5.2
       source-map: 0.5.7
+    dev: true
 
   /@babel/helper-annotate-as-pure/7.15.4:
     resolution: {integrity: sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==}
@@ -178,18 +182,21 @@ packages:
       '@babel/helper-get-function-arity': 7.15.4
       '@babel/template': 7.15.4
       '@babel/types': 7.15.6
+    dev: true
 
   /@babel/helper-get-function-arity/7.15.4:
     resolution: {integrity: sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.15.6
+    dev: true
 
   /@babel/helper-hoist-variables/7.15.4:
     resolution: {integrity: sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.15.6
+    dev: true
 
   /@babel/helper-member-expression-to-functions/7.15.4:
     resolution: {integrity: sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==}
@@ -275,10 +282,12 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.15.6
+    dev: true
 
   /@babel/helper-validator-identifier/7.15.7:
     resolution: {integrity: sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-validator-option/7.14.5:
     resolution: {integrity: sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==}
@@ -315,6 +324,7 @@ packages:
       '@babel/helper-validator-identifier': 7.15.7
       chalk: 2.4.2
       js-tokens: 4.0.0
+    dev: true
 
   /@babel/parser/7.15.8:
     resolution: {integrity: sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==}
@@ -1165,6 +1175,7 @@ packages:
       '@babel/code-frame': 7.15.8
       '@babel/parser': 7.15.8
       '@babel/types': 7.15.6
+    dev: true
 
   /@babel/traverse/7.15.4:
     resolution: {integrity: sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==}
@@ -1181,6 +1192,7 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@babel/types/7.15.6:
     resolution: {integrity: sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==}
@@ -1188,6 +1200,13 @@ packages:
     dependencies:
       '@babel/helper-validator-identifier': 7.15.7
       to-fast-properties: 2.0.0
+    dev: true
+
+  /@fortawesome/fontawesome-free/5.15.4:
+    resolution: {integrity: sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
 
   /@hapi/address/2.1.4:
     resolution: {integrity: sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==}
@@ -2078,6 +2097,7 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
+    dev: true
 
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -2265,7 +2285,7 @@ packages:
       resolve: 1.20.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
+    dev: true
 
   /babel-loader/8.2.2_7f185b6b63b1b293762538aa414d8c1b:
     resolution: {integrity: sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==}
@@ -2712,6 +2732,7 @@ packages:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
+    dev: true
 
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -2897,6 +2918,7 @@ packages:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
       color-name: 1.1.3
+    dev: true
 
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -2907,6 +2929,7 @@ packages:
 
   /color-name/1.1.3:
     resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=}
+    dev: true
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -3373,6 +3396,7 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
+    dev: true
 
   /debug/4.3.2_supports-color@6.1.0:
     resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==}
@@ -3775,6 +3799,7 @@ packages:
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
     engines: {node: '>=0.8.0'}
+    dev: true
 
   /eslint-loader/2.2.1_eslint@6.8.0+webpack@4.46.0:
     resolution: {integrity: sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==}
@@ -3840,6 +3865,7 @@ packages:
   /eslint-visitor-keys/1.3.0:
     resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
     engines: {node: '>=4'}
+    dev: true
 
   /eslint/6.8.0:
     resolution: {integrity: sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==}
@@ -4371,6 +4397,7 @@ packages:
 
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
 
   /functional-red-black-tree/1.0.1:
     resolution: {integrity: sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=}
@@ -4464,6 +4491,7 @@ packages:
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
+    dev: true
 
   /globals/12.4.0:
     resolution: {integrity: sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==}
@@ -4546,6 +4574,7 @@ packages:
   /has-flag/3.0.0:
     resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=}
     engines: {node: '>=4'}
+    dev: true
 
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -4600,6 +4629,7 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
+    dev: true
 
   /hash-base/3.1.0:
     resolution: {integrity: sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==}
@@ -5071,6 +5101,7 @@ packages:
     resolution: {integrity: sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==}
     dependencies:
       has: 1.0.3
+    dev: true
 
   /is-data-descriptor/0.1.4:
     resolution: {integrity: sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=}
@@ -5337,6 +5368,7 @@ packages:
 
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -5359,6 +5391,7 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: true
 
   /json-parse-better-errors/1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
@@ -5859,6 +5892,7 @@ packages:
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
 
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -6408,6 +6442,7 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
 
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
@@ -7233,6 +7268,7 @@ packages:
     dependencies:
       is-core-module: 2.7.0
       path-parse: 1.0.7
+    dev: true
 
   /restore-cursor/2.0.0:
     resolution: {integrity: sha1-n37ih/gv0ybU/RYpI9YhKe7g368=}
@@ -7656,6 +7692,7 @@ packages:
   /source-map/0.5.7:
     resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -7929,6 +7966,7 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       has-flag: 3.0.0
+    dev: true
 
   /supports-color/6.1.0:
     resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==}
@@ -8081,6 +8119,7 @@ packages:
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
     engines: {node: '>=4'}
+    dev: true
 
   /to-object-path/0.3.0:
     resolution: {integrity: sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=}
diff --git a/scss/custom.scss b/scss/custom.scss
index 29a3d63..7c54427 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -27,3 +27,4 @@ $success: #609926;
 
 // Bootstrap
 @import "../node_modules/bootstrap/scss/bootstrap";
+@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index ce17406..9fd31b1 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -2,11 +2,8 @@
   <div class="bg-secondary text-center pt-5 pb-4">
     <div class="icons pb-4">
       <a class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
-        <svg class="bi bi-github" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
-             xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
-        </svg>
+<!--        <i class="bi bi-github"></i>-->
+        <img src="../images/icons/gitea.svg" alt="">
       </a>
     </div>
     <div class="text">
@@ -26,6 +23,10 @@ export default {
 </script>
 
 <style scoped>
+img {
+  width: 35px;
+  height: 35px;
+}
 p {
   font-size: .85rem;
 }
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index b898813..55d5ef3 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -18,15 +18,13 @@
         </ul>
         <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
           <label for="search">
-            <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-              <path
-                  d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-            </svg>
+            <i class="bi bi-search"></i>
           </label>
 
           <input id="search" v-model="data.searchInput" aria-label="Search"
                  class="form-control bg-transparent border-0"
                  placeholder="SteamID64, Profile Link or Custom URL"
+                 title="SteamID64, Profile Link or Custom URL"
                  type="search">
           <button
               class="btn border-2 btn-outline-info"
@@ -144,6 +142,7 @@ nav {
 
   label {
     padding-top: 6px;
+    font-size: 1.4rem;
   }
 
   input[type="search"] {
@@ -195,16 +194,30 @@ nav {
       }
 
       form {
+        max-width: 87vw;
+        margin-left: -40px;
+
         label {
           display: none;
         }
 
         input[type="search"] {
           margin-bottom: 15px;
-          width: 100%;
+          max-width: 100%;
+          min-width: 82%;
+          font-size: 1rem;
+
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          &::placeholder {
+            background: var(--bs-body-bg);
+          }
         }
 
         button {
+          margin-left: 10px;
           display: block;
           margin-top: -15px;
         }
diff --git a/src/components/ScoreTeam.vue b/src/components/ScoreTeam.vue
index df88402..d692449 100644
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -40,6 +40,7 @@
             :player_score="player.score"
             :rank="player.extended?.rank?.old"
             :rounds_played="props.rounds_played"
+            :color="player.extended?.color"
         />
       </tr>
       </tbody>
@@ -78,7 +79,7 @@ export default {
       type: Number,
       required: true,
       default: 0
-    }
+    },
   },
   setup(props) {
     return {props}
diff --git a/src/components/ScoreTeamPlayer.vue b/src/components/ScoreTeamPlayer.vue
index 02151e8..4a8178f 100644
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -1,16 +1,10 @@
 <template>
   <td>
-    <img :src="props.avatar" alt="Player avatar" class="player__avatar">
+    <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
   </td>
   <td class="player__name" @click="GoToPlayer(props.steamid64)">
     {{ props.name }}
-    <svg class="bi bi-link-45deg" fill="currentColor" height="12" viewBox="0 0 16 16"
-         width="12" xmlns="http://www.w3.org/2000/svg">
-      <path
-          d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
-      <path
-          d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
-    </svg>
+    <i class="fas fa-link"></i>
   </td>
   <td>
     <img :src="DisplayRank(props.rank)[0]"
@@ -142,6 +136,11 @@ export default {
       type: Number,
       required: true,
       default: 0
+    },
+    color: {
+      type: String,
+      required: true,
+      default: ''
     }
   },
   setup(props) {
@@ -151,6 +150,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.team-color-Blue, .team-color-Orange, .team-color-Green, .team-color-Purple, .team-color-Yellow {
+  outline: 3px solid;
+}
+.team-color-Orange {
+  outline-color: #FE9A28;
+}
+.team-color-Blue {
+  outline-color: #5BA7FE;
+}
+.team-color-Yellow {
+  outline-color: #F7F52F;
+}
+.team-color-Purple {
+  outline-color: #A01BEF;
+}
+.team-color-Green {
+  outline-color: #04B462;
+}
+.team-color-Grey {
+  outline: none;
+}
+
 .player__avatar {
   width: 30px;
   height: 30px;
@@ -165,6 +186,11 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
+
+  .fas {
+    font-size: .5rem;
+    vertical-align: top;
+  }
 }
 
 .player__rank {
diff --git a/src/images/icons/gitea.svg b/src/images/icons/gitea.svg
new file mode 100644
index 0000000..384318f
--- /dev/null
+++ b/src/images/icons/gitea.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#FFFFFF" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#FFFFFF" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/images/map_screenshots/ar_baggage.webp b/src/images/map_screenshots/ar_baggage.webp
index c6d06ba..00dad78 100644
Binary files a/src/images/map_screenshots/ar_baggage.webp and b/src/images/map_screenshots/ar_baggage.webp differ
diff --git a/src/images/map_screenshots/ar_dizzy.webp b/src/images/map_screenshots/ar_dizzy.webp
index e383bb8..9593fbb 100644
Binary files a/src/images/map_screenshots/ar_dizzy.webp and b/src/images/map_screenshots/ar_dizzy.webp differ
diff --git a/src/images/map_screenshots/ar_lunacy.webp b/src/images/map_screenshots/ar_lunacy.webp
index 64b8a96..4e76939 100644
Binary files a/src/images/map_screenshots/ar_lunacy.webp and b/src/images/map_screenshots/ar_lunacy.webp differ
diff --git a/src/images/map_screenshots/ar_monastery.webp b/src/images/map_screenshots/ar_monastery.webp
index f84890a..ba49147 100644
Binary files a/src/images/map_screenshots/ar_monastery.webp and b/src/images/map_screenshots/ar_monastery.webp differ
diff --git a/src/images/map_screenshots/ar_shoots.webp b/src/images/map_screenshots/ar_shoots.webp
index b7806cf..4a90876 100644
Binary files a/src/images/map_screenshots/ar_shoots.webp and b/src/images/map_screenshots/ar_shoots.webp differ
diff --git a/src/images/map_screenshots/coop_autumn.webp b/src/images/map_screenshots/coop_autumn.webp
index 9abc745..860a275 100644
Binary files a/src/images/map_screenshots/coop_autumn.webp and b/src/images/map_screenshots/coop_autumn.webp differ
diff --git a/src/images/map_screenshots/coop_fall.webp b/src/images/map_screenshots/coop_fall.webp
index 8a09f34..7864cde 100644
Binary files a/src/images/map_screenshots/coop_fall.webp and b/src/images/map_screenshots/coop_fall.webp differ
diff --git a/src/images/map_screenshots/coop_kasbah.webp b/src/images/map_screenshots/coop_kasbah.webp
index 90b89bb..f5870e1 100644
Binary files a/src/images/map_screenshots/coop_kasbah.webp and b/src/images/map_screenshots/coop_kasbah.webp differ
diff --git a/src/images/map_screenshots/cs_agency.webp b/src/images/map_screenshots/cs_agency.webp
index 5d3cd41..357cda8 100644
Binary files a/src/images/map_screenshots/cs_agency.webp and b/src/images/map_screenshots/cs_agency.webp differ
diff --git a/src/images/map_screenshots/cs_apollo.webp b/src/images/map_screenshots/cs_apollo.webp
index 257b06a..4d649d1 100644
Binary files a/src/images/map_screenshots/cs_apollo.webp and b/src/images/map_screenshots/cs_apollo.webp differ
diff --git a/src/images/map_screenshots/cs_assault.webp b/src/images/map_screenshots/cs_assault.webp
index a8c4cfd..75ee8ff 100644
Binary files a/src/images/map_screenshots/cs_assault.webp and b/src/images/map_screenshots/cs_assault.webp differ
diff --git a/src/images/map_screenshots/cs_cruise.webp b/src/images/map_screenshots/cs_cruise.webp
index 825794c..6ceecb3 100644
Binary files a/src/images/map_screenshots/cs_cruise.webp and b/src/images/map_screenshots/cs_cruise.webp differ
diff --git a/src/images/map_screenshots/cs_downtown.webp b/src/images/map_screenshots/cs_downtown.webp
index 916f545..6812b64 100644
Binary files a/src/images/map_screenshots/cs_downtown.webp and b/src/images/map_screenshots/cs_downtown.webp differ
diff --git a/src/images/map_screenshots/cs_insertion.webp b/src/images/map_screenshots/cs_insertion.webp
index 1a4806e..3af71f5 100644
Binary files a/src/images/map_screenshots/cs_insertion.webp and b/src/images/map_screenshots/cs_insertion.webp differ
diff --git a/src/images/map_screenshots/cs_insertion2.webp b/src/images/map_screenshots/cs_insertion2.webp
index f3b3790..01f3a1d 100644
Binary files a/src/images/map_screenshots/cs_insertion2.webp and b/src/images/map_screenshots/cs_insertion2.webp differ
diff --git a/src/images/map_screenshots/cs_italy.webp b/src/images/map_screenshots/cs_italy.webp
index 445a4a8..dd3cc1e 100644
Binary files a/src/images/map_screenshots/cs_italy.webp and b/src/images/map_screenshots/cs_italy.webp differ
diff --git a/src/images/map_screenshots/cs_militia.webp b/src/images/map_screenshots/cs_militia.webp
index de5f77f..e167dda 100644
Binary files a/src/images/map_screenshots/cs_militia.webp and b/src/images/map_screenshots/cs_militia.webp differ
diff --git a/src/images/map_screenshots/cs_motel.webp b/src/images/map_screenshots/cs_motel.webp
index 4d0c127..2c1db14 100644
Binary files a/src/images/map_screenshots/cs_motel.webp and b/src/images/map_screenshots/cs_motel.webp differ
diff --git a/src/images/map_screenshots/cs_museum.webp b/src/images/map_screenshots/cs_museum.webp
index b111b21..d3ff955 100644
Binary files a/src/images/map_screenshots/cs_museum.webp and b/src/images/map_screenshots/cs_museum.webp differ
diff --git a/src/images/map_screenshots/cs_office.webp b/src/images/map_screenshots/cs_office.webp
index 4aaa2d0..43e6a5c 100644
Binary files a/src/images/map_screenshots/cs_office.webp and b/src/images/map_screenshots/cs_office.webp differ
diff --git a/src/images/map_screenshots/cs_rush.webp b/src/images/map_screenshots/cs_rush.webp
index 0528770..c5517c9 100644
Binary files a/src/images/map_screenshots/cs_rush.webp and b/src/images/map_screenshots/cs_rush.webp differ
diff --git a/src/images/map_screenshots/cs_seaside.webp b/src/images/map_screenshots/cs_seaside.webp
index 0644d45..3ff4990 100644
Binary files a/src/images/map_screenshots/cs_seaside.webp and b/src/images/map_screenshots/cs_seaside.webp differ
diff --git a/src/images/map_screenshots/cs_thunder.webp b/src/images/map_screenshots/cs_thunder.webp
index 07cd27a..5787f8e 100644
Binary files a/src/images/map_screenshots/cs_thunder.webp and b/src/images/map_screenshots/cs_thunder.webp differ
diff --git a/src/images/map_screenshots/cs_workout.webp b/src/images/map_screenshots/cs_workout.webp
index 2326bff..3668b8c 100644
Binary files a/src/images/map_screenshots/cs_workout.webp and b/src/images/map_screenshots/cs_workout.webp differ
diff --git a/src/images/map_screenshots/de_abbey.webp b/src/images/map_screenshots/de_abbey.webp
index 2739026..68c58ef 100644
Binary files a/src/images/map_screenshots/de_abbey.webp and b/src/images/map_screenshots/de_abbey.webp differ
diff --git a/src/images/map_screenshots/de_ancient.webp b/src/images/map_screenshots/de_ancient.webp
index 11854b0..2f6aa66 100644
Binary files a/src/images/map_screenshots/de_ancient.webp and b/src/images/map_screenshots/de_ancient.webp differ
diff --git a/src/images/map_screenshots/de_anubis.webp b/src/images/map_screenshots/de_anubis.webp
index 22d7c7d..fa0daa3 100644
Binary files a/src/images/map_screenshots/de_anubis.webp and b/src/images/map_screenshots/de_anubis.webp differ
diff --git a/src/images/map_screenshots/de_austria.webp b/src/images/map_screenshots/de_austria.webp
index 441bfb2..0d16452 100644
Binary files a/src/images/map_screenshots/de_austria.webp and b/src/images/map_screenshots/de_austria.webp differ
diff --git a/src/images/map_screenshots/de_aztec.webp b/src/images/map_screenshots/de_aztec.webp
index a8b7593..a82f92d 100644
Binary files a/src/images/map_screenshots/de_aztec.webp and b/src/images/map_screenshots/de_aztec.webp differ
diff --git a/src/images/map_screenshots/de_bank.webp b/src/images/map_screenshots/de_bank.webp
index c38466d..41f7661 100644
Binary files a/src/images/map_screenshots/de_bank.webp and b/src/images/map_screenshots/de_bank.webp differ
diff --git a/src/images/map_screenshots/de_basalt.webp b/src/images/map_screenshots/de_basalt.webp
index d1283a7..b390999 100644
Binary files a/src/images/map_screenshots/de_basalt.webp and b/src/images/map_screenshots/de_basalt.webp differ
diff --git a/src/images/map_screenshots/de_bazaar.webp b/src/images/map_screenshots/de_bazaar.webp
index dbfd035..4438974 100644
Binary files a/src/images/map_screenshots/de_bazaar.webp and b/src/images/map_screenshots/de_bazaar.webp differ
diff --git a/src/images/map_screenshots/de_biome.webp b/src/images/map_screenshots/de_biome.webp
index 02843ef..18c23c2 100644
Binary files a/src/images/map_screenshots/de_biome.webp and b/src/images/map_screenshots/de_biome.webp differ
diff --git a/src/images/map_screenshots/de_blackgold.webp b/src/images/map_screenshots/de_blackgold.webp
index 31a9e5d..695b1cd 100644
Binary files a/src/images/map_screenshots/de_blackgold.webp and b/src/images/map_screenshots/de_blackgold.webp differ
diff --git a/src/images/map_screenshots/de_breach.webp b/src/images/map_screenshots/de_breach.webp
index 0dff5ad..7b91646 100644
Binary files a/src/images/map_screenshots/de_breach.webp and b/src/images/map_screenshots/de_breach.webp differ
diff --git a/src/images/map_screenshots/de_cache.webp b/src/images/map_screenshots/de_cache.webp
index 6b1a782..6cabb3d 100644
Binary files a/src/images/map_screenshots/de_cache.webp and b/src/images/map_screenshots/de_cache.webp differ
diff --git a/src/images/map_screenshots/de_calavera.webp b/src/images/map_screenshots/de_calavera.webp
index ac892ac..e4a67d0 100644
Binary files a/src/images/map_screenshots/de_calavera.webp and b/src/images/map_screenshots/de_calavera.webp differ
diff --git a/src/images/map_screenshots/de_canals.webp b/src/images/map_screenshots/de_canals.webp
index 41b02a4..6c11e80 100644
Binary files a/src/images/map_screenshots/de_canals.webp and b/src/images/map_screenshots/de_canals.webp differ
diff --git a/src/images/map_screenshots/de_castle.webp b/src/images/map_screenshots/de_castle.webp
index 7468609..b138b15 100644
Binary files a/src/images/map_screenshots/de_castle.webp and b/src/images/map_screenshots/de_castle.webp differ
diff --git a/src/images/map_screenshots/de_cbble.webp b/src/images/map_screenshots/de_cbble.webp
index 60271f0..f8d4d5b 100644
Binary files a/src/images/map_screenshots/de_cbble.webp and b/src/images/map_screenshots/de_cbble.webp differ
diff --git a/src/images/map_screenshots/de_chlorine.webp b/src/images/map_screenshots/de_chlorine.webp
index 0042a5e..1128039 100644
Binary files a/src/images/map_screenshots/de_chlorine.webp and b/src/images/map_screenshots/de_chlorine.webp differ
diff --git a/src/images/map_screenshots/de_coast.webp b/src/images/map_screenshots/de_coast.webp
index 1a22e3f..ea73a4f 100644
Binary files a/src/images/map_screenshots/de_coast.webp and b/src/images/map_screenshots/de_coast.webp differ
diff --git a/src/images/map_screenshots/de_dust.webp b/src/images/map_screenshots/de_dust.webp
index 95b16d0..0adb3cd 100644
Binary files a/src/images/map_screenshots/de_dust.webp and b/src/images/map_screenshots/de_dust.webp differ
diff --git a/src/images/map_screenshots/de_dust2.webp b/src/images/map_screenshots/de_dust2.webp
index 511edd2..ec094da 100644
Binary files a/src/images/map_screenshots/de_dust2.webp and b/src/images/map_screenshots/de_dust2.webp differ
diff --git a/src/images/map_screenshots/de_elysion.webp b/src/images/map_screenshots/de_elysion.webp
index aa11ac8..a69110a 100644
Binary files a/src/images/map_screenshots/de_elysion.webp and b/src/images/map_screenshots/de_elysion.webp differ
diff --git a/src/images/map_screenshots/de_empire.webp b/src/images/map_screenshots/de_empire.webp
index 0701b23..a3d0bb1 100644
Binary files a/src/images/map_screenshots/de_empire.webp and b/src/images/map_screenshots/de_empire.webp differ
diff --git a/src/images/map_screenshots/de_engage.webp b/src/images/map_screenshots/de_engage.webp
index f9168d6..c5a10d3 100644
Binary files a/src/images/map_screenshots/de_engage.webp and b/src/images/map_screenshots/de_engage.webp differ
diff --git a/src/images/map_screenshots/de_extraction.webp b/src/images/map_screenshots/de_extraction.webp
index 18ebe21..d525691 100644
Binary files a/src/images/map_screenshots/de_extraction.webp and b/src/images/map_screenshots/de_extraction.webp differ
diff --git a/src/images/map_screenshots/de_facade.webp b/src/images/map_screenshots/de_facade.webp
index 99cdbd7..b0cddb3 100644
Binary files a/src/images/map_screenshots/de_facade.webp and b/src/images/map_screenshots/de_facade.webp differ
diff --git a/src/images/map_screenshots/de_favela.webp b/src/images/map_screenshots/de_favela.webp
index e054432..80823b7 100644
Binary files a/src/images/map_screenshots/de_favela.webp and b/src/images/map_screenshots/de_favela.webp differ
diff --git a/src/images/map_screenshots/de_grind.webp b/src/images/map_screenshots/de_grind.webp
index 6e7b4d9..b353168 100644
Binary files a/src/images/map_screenshots/de_grind.webp and b/src/images/map_screenshots/de_grind.webp differ
diff --git a/src/images/map_screenshots/de_guard.webp b/src/images/map_screenshots/de_guard.webp
index a5a98f8..10428fa 100644
Binary files a/src/images/map_screenshots/de_guard.webp and b/src/images/map_screenshots/de_guard.webp differ
diff --git a/src/images/map_screenshots/de_inferno.webp b/src/images/map_screenshots/de_inferno.webp
index 6b6998e..d54b87e 100644
Binary files a/src/images/map_screenshots/de_inferno.webp and b/src/images/map_screenshots/de_inferno.webp differ
diff --git a/src/images/map_screenshots/de_lake.webp b/src/images/map_screenshots/de_lake.webp
index 6e0b1d5..b1235d8 100644
Binary files a/src/images/map_screenshots/de_lake.webp and b/src/images/map_screenshots/de_lake.webp differ
diff --git a/src/images/map_screenshots/de_library.webp b/src/images/map_screenshots/de_library.webp
index caed178..1eee270 100644
Binary files a/src/images/map_screenshots/de_library.webp and b/src/images/map_screenshots/de_library.webp differ
diff --git a/src/images/map_screenshots/de_lite.webp b/src/images/map_screenshots/de_lite.webp
index 61563c9..139235a 100644
Binary files a/src/images/map_screenshots/de_lite.webp and b/src/images/map_screenshots/de_lite.webp differ
diff --git a/src/images/map_screenshots/de_marquis.webp b/src/images/map_screenshots/de_marquis.webp
index 1923438..8be7074 100644
Binary files a/src/images/map_screenshots/de_marquis.webp and b/src/images/map_screenshots/de_marquis.webp differ
diff --git a/src/images/map_screenshots/de_mikla.webp b/src/images/map_screenshots/de_mikla.webp
index fb2aa7f..eba80c9 100644
Binary files a/src/images/map_screenshots/de_mikla.webp and b/src/images/map_screenshots/de_mikla.webp differ
diff --git a/src/images/map_screenshots/de_mirage.webp b/src/images/map_screenshots/de_mirage.webp
index fd5f987..cfbfc26 100644
Binary files a/src/images/map_screenshots/de_mirage.webp and b/src/images/map_screenshots/de_mirage.webp differ
diff --git a/src/images/map_screenshots/de_mist.webp b/src/images/map_screenshots/de_mist.webp
index 9658efc..aa426a5 100644
Binary files a/src/images/map_screenshots/de_mist.webp and b/src/images/map_screenshots/de_mist.webp differ
diff --git a/src/images/map_screenshots/de_mocha.webp b/src/images/map_screenshots/de_mocha.webp
index 9aed9b9..26cc1a3 100644
Binary files a/src/images/map_screenshots/de_mocha.webp and b/src/images/map_screenshots/de_mocha.webp differ
diff --git a/src/images/map_screenshots/de_mutiny.webp b/src/images/map_screenshots/de_mutiny.webp
index 3e8d854..a4dd634 100644
Binary files a/src/images/map_screenshots/de_mutiny.webp and b/src/images/map_screenshots/de_mutiny.webp differ
diff --git a/src/images/map_screenshots/de_nuke.webp b/src/images/map_screenshots/de_nuke.webp
index 3b24dfb..2f5d456 100644
Binary files a/src/images/map_screenshots/de_nuke.webp and b/src/images/map_screenshots/de_nuke.webp differ
diff --git a/src/images/map_screenshots/de_overgrown.webp b/src/images/map_screenshots/de_overgrown.webp
index ec63802..ca7762b 100644
Binary files a/src/images/map_screenshots/de_overgrown.webp and b/src/images/map_screenshots/de_overgrown.webp differ
diff --git a/src/images/map_screenshots/de_overpass.webp b/src/images/map_screenshots/de_overpass.webp
index 17fa3a9..e2bb3f8 100644
Binary files a/src/images/map_screenshots/de_overpass.webp and b/src/images/map_screenshots/de_overpass.webp differ
diff --git a/src/images/map_screenshots/de_pitstop.webp b/src/images/map_screenshots/de_pitstop.webp
index 5c8bcb1..23ef3bc 100644
Binary files a/src/images/map_screenshots/de_pitstop.webp and b/src/images/map_screenshots/de_pitstop.webp differ
diff --git a/src/images/map_screenshots/de_ravine.webp b/src/images/map_screenshots/de_ravine.webp
index 150b72b..75e0a65 100644
Binary files a/src/images/map_screenshots/de_ravine.webp and b/src/images/map_screenshots/de_ravine.webp differ
diff --git a/src/images/map_screenshots/de_royal.webp b/src/images/map_screenshots/de_royal.webp
index 01549dc..a4a5bfb 100644
Binary files a/src/images/map_screenshots/de_royal.webp and b/src/images/map_screenshots/de_royal.webp differ
diff --git a/src/images/map_screenshots/de_ruby.webp b/src/images/map_screenshots/de_ruby.webp
index f068d85..72104cd 100644
Binary files a/src/images/map_screenshots/de_ruby.webp and b/src/images/map_screenshots/de_ruby.webp differ
diff --git a/src/images/map_screenshots/de_safehouse.webp b/src/images/map_screenshots/de_safehouse.webp
index 89b4ec3..5e1bc6b 100644
Binary files a/src/images/map_screenshots/de_safehouse.webp and b/src/images/map_screenshots/de_safehouse.webp differ
diff --git a/src/images/map_screenshots/de_santorini.webp b/src/images/map_screenshots/de_santorini.webp
index b6322b2..733ed76 100644
Binary files a/src/images/map_screenshots/de_santorini.webp and b/src/images/map_screenshots/de_santorini.webp differ
diff --git a/src/images/map_screenshots/de_seaside.webp b/src/images/map_screenshots/de_seaside.webp
index 565fa93..be2a678 100644
Binary files a/src/images/map_screenshots/de_seaside.webp and b/src/images/map_screenshots/de_seaside.webp differ
diff --git a/src/images/map_screenshots/de_season.webp b/src/images/map_screenshots/de_season.webp
index caf091d..5874628 100644
Binary files a/src/images/map_screenshots/de_season.webp and b/src/images/map_screenshots/de_season.webp differ
diff --git a/src/images/map_screenshots/de_shipped.webp b/src/images/map_screenshots/de_shipped.webp
index 96bd8c4..4a4fd2f 100644
Binary files a/src/images/map_screenshots/de_shipped.webp and b/src/images/map_screenshots/de_shipped.webp differ
diff --git a/src/images/map_screenshots/de_shortdust.webp b/src/images/map_screenshots/de_shortdust.webp
index 95b16d0..4c6be27 100644
Binary files a/src/images/map_screenshots/de_shortdust.webp and b/src/images/map_screenshots/de_shortdust.webp differ
diff --git a/src/images/map_screenshots/de_shortnuke.webp b/src/images/map_screenshots/de_shortnuke.webp
index 3b24dfb..8ea1f82 100644
Binary files a/src/images/map_screenshots/de_shortnuke.webp and b/src/images/map_screenshots/de_shortnuke.webp differ
diff --git a/src/images/map_screenshots/de_stmarc.webp b/src/images/map_screenshots/de_stmarc.webp
index c43b0fc..a60f822 100644
Binary files a/src/images/map_screenshots/de_stmarc.webp and b/src/images/map_screenshots/de_stmarc.webp differ
diff --git a/src/images/map_screenshots/de_studio.webp b/src/images/map_screenshots/de_studio.webp
index 871444a..c25d1a9 100644
Binary files a/src/images/map_screenshots/de_studio.webp and b/src/images/map_screenshots/de_studio.webp differ
diff --git a/src/images/map_screenshots/de_subzero.webp b/src/images/map_screenshots/de_subzero.webp
index 71cd4da..2660980 100644
Binary files a/src/images/map_screenshots/de_subzero.webp and b/src/images/map_screenshots/de_subzero.webp differ
diff --git a/src/images/map_screenshots/de_sugarcane.webp b/src/images/map_screenshots/de_sugarcane.webp
index 0fbbd0e..f850bea 100644
Binary files a/src/images/map_screenshots/de_sugarcane.webp and b/src/images/map_screenshots/de_sugarcane.webp differ
diff --git a/src/images/map_screenshots/de_swamp.webp b/src/images/map_screenshots/de_swamp.webp
index 4b906d5..b615f76 100644
Binary files a/src/images/map_screenshots/de_swamp.webp and b/src/images/map_screenshots/de_swamp.webp differ
diff --git a/src/images/map_screenshots/de_thrill.webp b/src/images/map_screenshots/de_thrill.webp
index bc2898a..9219981 100644
Binary files a/src/images/map_screenshots/de_thrill.webp and b/src/images/map_screenshots/de_thrill.webp differ
diff --git a/src/images/map_screenshots/de_train.webp b/src/images/map_screenshots/de_train.webp
index f0b66f5..f98a5d8 100644
Binary files a/src/images/map_screenshots/de_train.webp and b/src/images/map_screenshots/de_train.webp differ
diff --git a/src/images/map_screenshots/de_tulip.webp b/src/images/map_screenshots/de_tulip.webp
index 7ae9972..e03682f 100644
Binary files a/src/images/map_screenshots/de_tulip.webp and b/src/images/map_screenshots/de_tulip.webp differ
diff --git a/src/images/map_screenshots/de_vertigo.webp b/src/images/map_screenshots/de_vertigo.webp
index b72d66c..37a4520 100644
Binary files a/src/images/map_screenshots/de_vertigo.webp and b/src/images/map_screenshots/de_vertigo.webp differ
diff --git a/src/images/map_screenshots/de_zoo.webp b/src/images/map_screenshots/de_zoo.webp
index 18f5897..97065e5 100644
Binary files a/src/images/map_screenshots/de_zoo.webp and b/src/images/map_screenshots/de_zoo.webp differ
diff --git a/src/images/map_screenshots/default.webp b/src/images/map_screenshots/default.webp
index 1e2b3a3..ceaa7c2 100644
Binary files a/src/images/map_screenshots/default.webp and b/src/images/map_screenshots/default.webp differ
diff --git a/src/images/map_screenshots/dz_blacksite.webp b/src/images/map_screenshots/dz_blacksite.webp
index 4f245cd..570ee74 100644
Binary files a/src/images/map_screenshots/dz_blacksite.webp and b/src/images/map_screenshots/dz_blacksite.webp differ
diff --git a/src/images/map_screenshots/dz_county.webp b/src/images/map_screenshots/dz_county.webp
index 46aac08..9bd8ad1 100644
Binary files a/src/images/map_screenshots/dz_county.webp and b/src/images/map_screenshots/dz_county.webp differ
diff --git a/src/images/map_screenshots/dz_frostbite.webp b/src/images/map_screenshots/dz_frostbite.webp
index af9ebfd..2f72dc1 100644
Binary files a/src/images/map_screenshots/dz_frostbite.webp and b/src/images/map_screenshots/dz_frostbite.webp differ
diff --git a/src/images/map_screenshots/dz_junglety.webp b/src/images/map_screenshots/dz_junglety.webp
index 3e7f76c..421d191 100644
Binary files a/src/images/map_screenshots/dz_junglety.webp and b/src/images/map_screenshots/dz_junglety.webp differ
diff --git a/src/images/map_screenshots/dz_sirocco.webp b/src/images/map_screenshots/dz_sirocco.webp
index 9e1e65b..dac3ce3 100644
Binary files a/src/images/map_screenshots/dz_sirocco.webp and b/src/images/map_screenshots/dz_sirocco.webp differ
diff --git a/src/images/map_screenshots/gd_rialto.webp b/src/images/map_screenshots/gd_rialto.webp
index 65d698b..fd8cf33 100644
Binary files a/src/images/map_screenshots/gd_rialto.webp and b/src/images/map_screenshots/gd_rialto.webp differ
diff --git a/src/images/map_screenshots/lobby_mapveto.webp b/src/images/map_screenshots/lobby_mapveto.webp
index b47fed7..7872df5 100644
Binary files a/src/images/map_screenshots/lobby_mapveto.webp and b/src/images/map_screenshots/lobby_mapveto.webp differ
diff --git a/src/images/map_screenshots/random.webp b/src/images/map_screenshots/random.webp
index 11f65e9..817978b 100644
Binary files a/src/images/map_screenshots/random.webp and b/src/images/map_screenshots/random.webp differ
diff --git a/src/images/map_screenshots/training.webp b/src/images/map_screenshots/training.webp
index ac8a074..39b0d4f 100644
Binary files a/src/images/map_screenshots/training.webp and b/src/images/map_screenshots/training.webp differ
diff --git a/src/images/map_screenshots/vs_background_00.webp b/src/images/map_screenshots/vs_background_00.webp
index e7f876c..6c61acc 100644
Binary files a/src/images/map_screenshots/vs_background_00.webp and b/src/images/map_screenshots/vs_background_00.webp differ
diff --git a/src/utils/Display.js b/src/utils/Display.js
index b6329c5..0e2a383 100644
--- a/src/utils/Display.js
+++ b/src/utils/Display.js
@@ -21,4 +21,20 @@ export const DisplayRank = (rankNr = 0) => {
         [18, 'Global Elite'],
     ])
     return [require(`../images/rank_icons/skillgroup${rankNr}.svg`), rankMap.get(rankNr)]
-}
\ No newline at end of file
+}
+
+export const LoadImage = (mapName) => {
+    let img = new Image()
+    let background = document.querySelector('.bg-img')
+
+    img.onload = function() {
+        background.src = img.src
+    }
+
+    img.onerror = function () {
+        img.src = require(`../images/map_screenshots/${mapName}.jpg`)
+        img.onerror = null
+    }
+
+    img.src = require(`../images/map_screenshots/${mapName}.webp`)
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index d6c66c1..a8a9aad 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -2,12 +2,12 @@ import {FormatDate, FormatDuration, FormatFullDate, FormatFullDuration} from "./
 import {GoToMatch, GoToPlayer, GoToLink} from "./GoTo";
 import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
-import {DisplayRank} from "./Display";
+import {DisplayRank, LoadImage} from "./Display";
 
 export {
     FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
     GoToMatch, GoToPlayer, GoToLink,
     SaveLastVisitedToLocalStorage,
     GetHLTV_1,
-    DisplayRank
+    DisplayRank, LoadImage
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6c68f6d..b71c97f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,28 +20,19 @@
     <hr v-if="recentVisited !== null" class="m-auto text-muted">
     <div class="body container m-auto row mt-5 mb-5 justify-content-center">
       <div class="col-sm-12 col-md-4 col-lg-3">
-        <svg class="mb-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M7,12 L14.5,12 C16.277025,12 17.7447372,10.6756742 17.970024,8.96013518 C16.2885152,8.7047201 15,7.25283448 15,5.5 C15,3.56700338 16.5670034,2 18.5,2 C20.4329966,2 22,3.56700338 22,5.5 C22,7.27155475 20.6838151,8.73569805 18.9759671,8.96790818 C18.7419236,11.2333126 16.8272778,13 14.5,13 L7,13 L7,15.0354444 C8.69614707,15.2780593 10,16.736764 10,18.5 C10,20.4329966 8.43299662,22 6.5,22 C4.56700338,22 3,20.4329966 3,18.5 C3,16.736764 4.30385293,15.2780593 6,15.0354444 L6,8.96455557 C4.30385293,8.72194074 3,7.26323595 3,5.5 C3,3.56700338 4.56700338,2 6.5,2 C8.43299662,2 10,3.56700338 10,5.5 C10,7.26323595 8.69614707,8.72194074 7,8.96455557 L7,12 Z M4,18.5 C4,19.8807119 5.11928813,21 6.5,21 C7.88071187,21 9,19.8807119 9,18.5 C9,17.1192881 7.88071187,16 6.5,16 C5.11928813,16 4,17.1192881 4,18.5 Z M4,5.5 C4,6.88071187 5.11928813,8 6.5,8 C7.88071187,8 9,6.88071187 9,5.5 C9,4.11928813 7.88071187,3 6.5,3 C5.11928813,3 4,4.11928813 4,5.5 Z M18.5,3 C17.1192881,3 16,4.11928813 16,5.5 C16,6.88071187 17.1192881,8 18.5,8 C19.8807119,8 21,6.88071187 21,5.5 C21,4.11928813 19.8807119,3 18.5,3 Z"
-              fill="white"/>
-        </svg>
+        <i class="fas fa-code-branch"></i>
+
         <h4 class="fw-light">Open Source</h4>
         <p class="fw-light">All project code is open source and available for contributors to improve and
           modify.</p>
       </div>
       <div class="col-sm-12 col-md-4 col-lg-3">
-        <svg class="bi bi-bar-chart-fill mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
-        </svg>
+        <i class="fas fa-chart-pie"></i>
         <h4 class="fw-light">In-Depth Data</h4>
         <p class="fw-light">Parsing replay files provides highly detailed match data.</p>
       </div>
       <div class="col-sm-12 col-md-4 col-lg-3">
-        <svg class="bi bi-stars mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
-        </svg>
+        <i class="fas fa-money-bill-wave-alt"></i>
         <h4 class="fw-light">Free of Charge</h4>
         <p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
       </div>
@@ -72,6 +63,10 @@ export default {
 
 
 <style lang="scss" scoped>
+.fas {
+  font-size: 5rem;
+  padding-bottom: 1.5rem;
+}
 .main-content {
   .head {
     background-image: url("../images/map_screenshots/default.jpg");
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 75a34c7..2393ea3 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,47 +1,68 @@
 <template>
-  <picture v-if="data.matchDetails.map" >
-    <source :srcset="require('../images/map_screenshots/' + data.matchDetails.map + '.webp')" class="bg-img">
-    <img :alt="data.matchDetails.map"
-         :src="require('../images/map_screenshots/' + data.matchDetails.map + '.jpg')"
-         class="bg-img">
-  </picture>
+  <img class="bg-img" src="" alt="">
+
   <div class="">
-    <div v-if="data.matchDetails.map" class="head row m-auto text-center">
+    <div class="head row m-auto text-center">
       <div class="m-auto map">
-        <img :alt="data.matchDetails.map"
+        <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
              :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
              :title="data.matchDetails.map" class="map-icon">
+        <img v-if="!data.matchDetails.map" alt="Map icon"
+             :src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
+             title="Map unknown" class="map-icon">
       </div>
-      <p class="text-center fs-6">Average Rank: <img
+      <p class="text-center text-muted fs-6">
+        {{ FormatFullDate(data.matchDetails.date) }}
+      </p>
+      <p class="text-center fs-6">
+        <span class="text-muted">Match Length:</span> {{ data.matchDetails.rounds === 16 ? 'Short' : 'Long' }}
+        <svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8"
+             xmlns="http://www.w3.org/2000/svg">
+          <circle cx="8" cy="8" r="8"/>
+        </svg>
+        <span class="text-muted">Average Rank:</span> <img
           :alt="DisplayRank(data.avgRank)[1]"
           :src="DisplayRank(data.avgRank)[0]"
           :title="DisplayRank(data.avgRank)[1]"
-          class="rank-icon"/></p>
+          class="rank-icon"/>
+      </p>
     </div>
   </div>
-  <div class="nav">
-    <ul class="list-unstyled d-flex m-auto">
-      <li class="list-item active">Scoreboard</li>
-      <li class="list-item">Rounds</li>
-      <li class="list-item">Weapons</li>
-      <li class="list-item">Duels</li>
-      <li class="list-item">Heatmaps</li>
-    </ul>
-  </div>
-  <div class="scoreboard">
-    <div v-if="data.score.length === 2 && data.stats">
-      <ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]"
-                 :stats="data.stats" :team_id="1"/>
-      <ScoreTeam :rounds="data.matchDetails.rounds" :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]"
-                 :stats="data.stats" :team_id="2"/>
+  <div class="nav navbar-dark navbar-expand-lg">
+    <button aria-controls="matchNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
+            data-bs-target="#matchNav" data-bs-toggle="collapse" type="button">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div id="matchNav" class="collapse navbar-collapse">
+      <ul class="list-unstyled d-flex m-auto">
+        <li class="list-item active">Scoreboard</li>
+        <li class="list-item">Flashes</li>
+        <li class="list-item">Grenades</li>
+        <li class="list-item">Damage</li>
+      </ul>
     </div>
   </div>
+  <div v-if="data.score.length === 2 && data.stats" class="scoreboard">
+    <div id="scoreboard">
+      <ScoreTeam
+          :rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score[data.matchDetails.match_result - 1] === 16 ? 30 : data.score[data.matchDetails.match_result - 1] === 15 ? 30 : 16"
+          :rounds_played="data.score.reduce((a, b) => a + b)"
+          :score="data.score[0]"
+          :stats="data.stats" :team_id="1"/>
+      <ScoreTeam
+          :rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score.reduce((a, b) => a + b) >= 16 ? 30 : 16"
+          :rounds_played="data.score.reduce((a, b) => a + b)"
+          :score="data.score[1]"
+          :stats="data.stats" :team_id="2"/>
+    </div>
+
+  </div>
 </template>
 
 <script>
 import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
+import {DisplayRank, GetHLTV_1, GoToPlayer, FormatFullDate, LoadImage} from "../utils";
 
 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
 
@@ -68,6 +89,9 @@ export default {
             data.matchDetails = response.data
             data.stats = response.data.stats
             data.score = response.data.score
+
+            LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
+
             console.log(response.data)
           })
           .catch((e) => {
@@ -102,7 +126,7 @@ export default {
     })
 
     return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank
+      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
     }
   }
 }
@@ -111,11 +135,7 @@ export default {
 <style lang="scss" scoped>
 .bg-img {
   z-index: -1;
-  //top: 0;
-  //left: 0;
   position: fixed;
-  //max-width: 100%;
-  //height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -124,11 +144,12 @@ export default {
 
 .head {
   background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(15, 15, 15, 0.8) 30%,
-      rgba(15, 15, 15, 0.8) 70%,
-      rgba(0, 0, 0, 0) 100%
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.95) 30%,
+      rgba(0, 0, 0, 0.95) 70%,
+      rgba(0, 0, 0, .7) 100%
   );
+  border-bottom: 1px solid rgba(255, 255, 255, .2);
 
   .map img {
     width: auto;
@@ -146,8 +167,8 @@ export default {
   max-width: 100vw;
   background: linear-gradient(90deg,
       rgba(0, 0, 0, 0) 0%,
-      rgba(15, 15, 15, 0.8) 30%,
-      rgba(15, 15, 15, 0.8) 70%,
+      rgba(15, 15, 15, 0.9) 25%,
+      rgba(15, 15, 15, 0.9) 75%,
       rgba(0, 0, 0, 0) 100%
   );
 
diff --git a/src/views/Player.vue b/src/views/Player.vue
index f5303c9..317fb4d 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,158 +1,162 @@
 <template>
-  <div class="container">
-    <div class="card mb-3 bg-transparent border-0">
-      <div class="row g-0">
-        <div class="img-container col-md-2 pt-3">
-          <img
-              :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
-        </div>
-        <div class="col-md-8">
-          <div class="card-body">
-            <h3 class="card-title"><a
-                :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
-                class="text-decoration-none text-white"
-                target="_blank"
-                title="Open steam profile">{{
-                data.playerDetails.name
-              }}
-              <svg class="bi bi-link-45deg" fill="currentColor" height="16" viewBox="0 0 16 16"
-                   width="16" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
-                <path
-                    d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
-              </svg>
-            </a></h3>
-            <table class="table table-borderless text-center">
-              <tr>
-                <th class="wlt-win text-uppercase text-muted">Wins</th>
-                <th class="wlt-loss text-uppercase text-muted">Losses</th>
-                <th class="wlt-tie text-uppercase text-muted">Ties</th>
-                <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
-                <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
-              </tr>
-              <tr>
-                <td class="wlt-win">{{ data.match_stats.win }}</td>
-                <td class="wlt-loss">{{ data.match_stats.loss }}</td>
-                <td class="wlt-tie">{{ data.match_stats.tie }}</td>
-                <td class="wlt-win-rate">{{
-                    (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
-                  }}%
-                </td>
-                <td class="wlt-tie-rate">{{
-                    (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
-                  }}%
-                </td>
-              </tr>
-            </table>
-            <small v-if="data.playerDetails.tracked" class="card-text text-muted">
-              Currently tracked
-            </small>
-            <div v-else class="dropdown">
-              <button
-                  id="login-dropdown"
-                  aria-expanded="false"
-                  class="btn border-2 btn-outline-info"
-                  data-bs-toggle="dropdown"
-                  type="button"
-              >
-                Track Me!
-              </button>
-              <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
-                   style="width: 320px">
-                <form class="px-4 py-3">
-                  <!-- AuthCode input -->
-                  <div class="form-outline mb-4">
-                    <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
-                           placeholder="AuthCode*"
-                           required type="text"/>
-                  </div>
+  <img class="bg-img" src="" alt="">
+  <div class="wrapper">
+    <div class="container">
+      <div class="card mb-3 bg-transparent border-0">
+        <div class="row g-0">
+          <div class="img-container col-md-2 pt-3">
+            <img
+                :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h3 class="card-title"><a
+                  :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
+                  class="text-decoration-none text-white"
+                  target="_blank"
+                  title="Open steam profile">{{
+                  data.playerDetails.name
+                }}
+                <i class="fas fa-link"></i>
+              </a></h3>
+              <table class="table table-borderless text-center">
+                <tr>
+                  <th class="wlt-win text-uppercase text-muted">Wins</th>
+                  <th class="wlt-loss text-uppercase text-muted">Losses</th>
+                  <th class="wlt-tie text-uppercase text-muted">Ties</th>
+                  <th class="wlt-win-rate text-uppercase text-muted">Win-Rate</th>
+                  <th class="wlt-tie-rate text-uppercase text-muted">Tie-Rate</th>
+                </tr>
+                <tr>
+                  <td class="wlt-win">{{ data.match_stats.win }}</td>
+                  <td class="wlt-loss">{{ data.match_stats.loss }}</td>
+                  <td class="wlt-tie">{{ data.match_stats.tie }}</td>
+                  <td class="wlt-win-rate">{{
+                      (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
+                    }}%
+                  </td>
+                  <td class="wlt-tie-rate">{{
+                      (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(2)
+                    }}%
+                  </td>
+                </tr>
+              </table>
+              <small v-if="data.playerDetails.tracked" class="card-text text-muted">
+                Currently tracked
+              </small>
+              <div v-else class="dropdown">
+                <button
+                    id="login-dropdown"
+                    aria-expanded="false"
+                    class="btn border-2 btn-outline-info"
+                    data-bs-toggle="dropdown"
+                    type="button"
+                >
+                  Track Me!
+                </button>
+                <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
+                     style="width: 320px">
+                  <form class="px-4 py-3">
+                    <!-- AuthCode input -->
+                    <div class="form-outline mb-4">
+                      <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
+                             placeholder="AuthCode*"
+                             required type="text"/>
+                    </div>
 
-                  <!-- ShareCode input -->
-                  <div class="form-outline mb-2">
-                    <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
-                           placeholder="ShareCode"
-                           type="text"/>
-                  </div>
+                    <!-- ShareCode input -->
+                    <div class="form-outline mb-2">
+                      <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
+                             placeholder="ShareCode"
+                             type="text"/>
+                    </div>
 
-                  <div class="form-outline mb-4">
-                    <small>You can find your AuthCode and ShareCode <a
-                        href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
-                        target="_blank">here</a>.</small>
-                  </div>
+                    <div class="form-outline mb-4">
+                      <small>You can find your AuthCode and ShareCode <a
+                          href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
+                          target="_blank">here</a>.</small>
+                    </div>
 
-                  <!-- Submit button -->
-                  <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
-                    TrackMe
-                  </button>
-                </form>
+                    <!-- Submit button -->
+                    <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
+                      TrackMe
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </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 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 adr" scope="col" style="cursor: help" title="Average damage per round">ADR</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[0].team_id)"
-            class="match"
-            @click="match.map !== '' ? GoToMatch(match.match_id) : ''">
-          <td class="td-map text-center">
-            <img :alt="match.map ? match.map : 'Map not found'"
-                 :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
-                 :title="match.map"
-                 class="map-icon">
-          </td>
-          <td class="td-rank text-center">
-            <img
-                :alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
-                :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
-                :title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
-                class="rank-icon">
-          </td>
-          <td :class="match.stats[0].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[0].kills ? match.stats[0].kills : "0" }}
-          </td>
-          <td class="td-assists text-center">
-            {{ match.stats[0].assists ? match.stats[0].assists : "0" }}
-          </td>
-          <td class="td-deaths text-center">
-            {{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
-          </td>
-          <td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
-              class="td-plus text-center">
-            {{
-              (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
-            }}
-          </td>
-          <td class="td-adr text-center">
-            {{
-              Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
-            }}
-          </td>
-          <td :class="GetHLTV_1(
+      <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 adr" scope="col" style="cursor: help" title="Average damage per round">ADR</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[0].team_id)"
+              class="match"
+              @click="GoToMatch(match.match_id)">
+            <td class="td-map text-center">
+              <img :alt="match.map ? match.map : 'Map not found'"
+                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
+                   :title="match.map"
+                   class="map-icon">
+            </td>
+            <td class="td-rank text-center">
+              <img
+                  :alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
+                  :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
+                  :title="DisplayRank(match.stats[0].extended?.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[0].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[0].kills ? match.stats[0].kills : "0" }}
+            </td>
+            <td class="td-assists text-center">
+              {{ match.stats[0].assists ? match.stats[0].assists : "0" }}
+            </td>
+            <td class="td-deaths text-center">
+              {{ match.stats[0].deaths ? match.stats[0].deaths : "0" }}
+            </td>
+            <td :class="(match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0) >= 0 ? 'text-success' : 'text-danger'"
+                class="td-plus text-center">
+              {{
+                (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
+              }}
+            </td>
+            <td class="td-adr text-center">
+              {{
+                Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
+              }}
+            </td>
+            <td :class="GetHLTV_1(
                       match.stats[0].kills,
                       match.score[0] + match.score[1],
                       match.stats[0].deaths,
@@ -160,34 +164,30 @@
                       match.stats[0].extended?.multi_kills?.triple,
                       match.stats[0].extended?.multi_kills?.quad,
                       match.stats[0].extended?.multi_kills?.pent) >= 1 ? 'text-success' : 'text-warning'"
-              class="td-hltv text-center fw-bold">
-            {{
-              GetHLTV_1(
-                  match.stats[0].kills,
-                  match.score[0] + match.score[1],
-                  match.stats[0].deaths,
-                  match.stats[0].extended?.multi_kills?.duo,
-                  match.stats[0].extended?.multi_kills?.triple,
-                  match.stats[0].extended?.multi_kills?.quad,
-                  match.stats[0].extended?.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[0].kills,
+                    match.score[0] + match.score[1],
+                    match.stats[0].deaths,
+                    match.stats[0].extended?.multi_kills?.duo,
+                    match.stats[0].extended?.multi_kills?.triple,
+                    match.stats[0].extended?.multi_kills?.quad,
+                    match.stats[0].extended?.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">
-            <svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16"
-                 viewBox="0 0 16 16" width="16"
-                 xmlns="http://www.w3.org/2000/svg">
-              <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
-            </svg>
-            {{ 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>
   </div>
 </template>
@@ -203,7 +203,7 @@ import {
   FormatFullDate,
   FormatFullDuration,
   GetHLTV_1,
-  GoToMatch,
+  GoToMatch, LoadImage,
   SaveLastVisitedToLocalStorage
 } from "../utils";
 
@@ -263,6 +263,8 @@ export default {
             data.match_stats.tie = response.data.match_stats.tie ? response.data.match_stats.tie : 0
             store.state.id64 = response.data.steamid64
 
+            LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
+
             console.log(response.data)
 
             let player = {
@@ -315,6 +317,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.bg-img {
+  z-index: -1;
+  position: fixed;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  left: 0;
+}
+
+.wrapper {
+  padding-bottom: 1rem;
+  background: rgba(0, 0, 0, .7);
+  min-width: 100%;
+  min-height: 100%;
+}
+
 .card {
   padding-top: 10px;
 
@@ -325,6 +344,11 @@ export default {
     box-shadow: 0 0 10px black;
   }
 
+  .fas, .far {
+    font-size: .75rem;
+    vertical-align: top;
+  }
+
   table {
     max-width: 500px;
 
@@ -343,30 +367,31 @@ export default {
 }
 
 .win {
-  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
 
   &:hover {
-    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
   }
 }
 
 .loss {
-  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
 
   &:hover {
-    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
   }
 }
 
 .draw {
-  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
 
   &:hover {
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
   }
 }
 
 table {
+  margin-bottom: 0;
   tr {
     th {
       line-height: 1;
@@ -465,8 +490,8 @@ table {
     font-size: 1rem !important;
   }
 
-  .kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv,
-  .td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv {
+  .kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv, .length,
+  .td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv, .td-length {
     display: none;
   }
 }