diff --git a/website/src/router/shared-routes.js b/website/src/router/shared-routes.js
index d760836d..e0165e75 100644
--- a/website/src/router/shared-routes.js
+++ b/website/src/router/shared-routes.js
@@ -16,6 +16,7 @@ import News from "@/views/News";
 import DetailedMatch from "@/views/DetailedMatch";
 import MatchVOD from "@/views/sub-views/MatchVOD";
 import MatchHistory from "@/views/sub-views/MatchHistory";
+import TeamComposition from "@/views/sub-views/TeamComposition";
 
 export default [
     {
@@ -27,7 +28,8 @@ export default [
             { path: "", component: TeamMain },
             { path: "matches", component: TeamMatches },
             { path: "theme", component: TeamTheme },
-            { path: "details", component: TeamDetails }
+            { path: "details", component: TeamDetails },
+            { path: "composition", component: TeamComposition }
         ]
     },
     {
diff --git a/website/src/views/Team.vue b/website/src/views/Team.vue
index 6a5e8da3..0d4938b9 100644
--- a/website/src/views/Team.vue
+++ b/website/src/views/Team.vue
@@ -4,6 +4,7 @@
         <SubPageNav class="my-2">
             <li class="nav-item"><router-link class="nav-link" :to="subLink('')">Overview</router-link></li>
             <li class="nav-item" v-if="team.matches"><router-link class="nav-link" :to="subLink('matches')">Matches</router-link></li>
+            <li class="nav-item" v-if="useTeamCompositions"><router-link class="nav-link" :to="subLink('composition')">Composition</router-link></li>
             <li class="nav-item" v-if="team.theme"><router-link class="nav-link" :to="subLink('theme')">Theme</router-link></li>
 <!--            <li class="nav-item"><router-link class="nav-link" :to="subLink('details')">Details</router-link></li>-->
 
@@ -81,6 +82,17 @@ export default {
                     })
                 })
             });
+        },
+        eventSettings() {
+            if (!this.team?.event?.blocks) return null;
+            try {
+                return JSON.parse(this.team?.event.blocks);
+            } catch (e) {
+                return null;
+            }
+        },
+        useTeamCompositions() {
+            return this.eventSettings?.composition?.use && (this.team?.players || []).some(p => p.composition_tank_sr || p.composition_dps_sr || p.composition_support_sr);
         }
     }
 };
diff --git a/website/src/views/sub-views/TeamComposition.vue b/website/src/views/sub-views/TeamComposition.vue
new file mode 100644
index 00000000..30692bb7
--- /dev/null
+++ b/website/src/views/sub-views/TeamComposition.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="container team-composition">
+        <h2>Approved team composition</h2>
+
+
+        <table class="table table-bordered table-dark table-sm">
+            <thead>
+            <tr v-if="category">
+                <th class="text-center" colspan="5">{{ category }}</th>
+            </tr>
+            <tr>
+                <th>Name</th>
+                <th>Battletag</th>
+                <th>Tank SR</th>
+                <th>DPS SR</th>
+                <th>Support SR</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="player in team.players" v-bind:key="player.id">
+                <td><LinkedPlayers :players="[player]"/></td>
+                <td>{{ player.battletag }}</td>
+                <td>{{ player.composition_tank_sr }}</td>
+                <td>{{ player.composition_dps_sr }}</td>
+                <td>{{ player.composition_support_sr }}</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <div class="w-100 d-flex flex-wrap justify-content-center">
+            <div class="flex-grow-1 text-left mb-3" v-if="compositionText">{{ compositionText }}</div>
+            <a v-if="useCalculator" class="btn btn-light text-dark font-weight-bold" target="_blank" :href="`https://slmn.io/calc?custom=${encodeURIComponent(dataString)}&category=${encodeURIComponent(category)}`">SLMN Calculator <i class="fas fa-chevron-right ml-2 fa-fw"></i></a>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import LinkedPlayers from "@/components/website/LinkedPlayers";
+export default {
+    name: "TeamComposition.vue",
+    components: { LinkedPlayers },
+    props: ["team"],
+    computed: {
+        eventSettings() {
+            if (!this.team?.event?.blocks) return null;
+            try {
+                return JSON.parse(this.team?.event.blocks);
+            } catch (e) {
+                return null;
+            }
+        },
+        compositionText() {
+            return this.eventSettings?.composition?.text;
+        },
+        useCalculator() {
+            return this.eventSettings?.composition?.useCalculator;
+        },
+        category() {
+            if (!this.team?.team_category) return null;
+            const split = this.team.team_category.split(";");
+            if (split.length === 2) {
+                return split[1];
+            }
+            return split[0];
+        },
+        dataString() {
+            const data = [];
+            this.team.players.forEach(p => {
+                data.push([p.name, p.composition_tank_sr || "", p.composition_dps_sr || "", p.composition_support_sr || ""].join(","));
+            });
+
+            return data.join(";");
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>