diff --git a/src/App.vue b/src/App.vue
index 1177ccf..edfabff 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,7 +35,7 @@ onMounted(async () => {
   <Error/>
   <Toast/>
   <div class="flex flex-1 flex-col">
-    <routerView/>
+    <Suspense><routerView/></Suspense>
   </div>
   <Footer v-if="!$route.path.startsWith('/admin/')"/>
 </template>
diff --git a/src/components/GroupTable.vue b/src/components/GroupTable.vue
new file mode 100644
index 0000000..0e03798
--- /dev/null
+++ b/src/components/GroupTable.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Group } from '@/models/group';
+import type { Team } from '@/models/team';
+
+const props = defineProps<{
+  group: Group;
+  teams: Record<string, Team[]>;
+}>();
+const get_validated_team_by_id = (id: number) => props.teams.validated_teams.find((team) => team.id === id);
+
+</script>
+<template>
+  <table :key="group.id" border="1" class="text-bold text-3xl">
+    <thead>
+      <tr>
+        <th colspan="2" class="bg-slate-400 p-3 text-black">
+          {{ group.name }}
+        </th>
+      </tr>
+      <tr>
+        <th align="center" class="troncate border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Equipe
+        </th>
+        <th align="center" class="border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Score
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="team_id in group.teams" :key="team_id">
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{
+            get_validated_team_by_id(team_id)?.name }}
+        </td>
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{ group.scores[team_id] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/src/components/KnockoutMatchCard.vue b/src/components/KnockoutMatchCard.vue
new file mode 100644
index 0000000..235357e
--- /dev/null
+++ b/src/components/KnockoutMatchCard.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+defineProps<{
+  teamPerMatch: number;
+  teams: Record<string, string | number | boolean | undefined>[];
+  status: string;
+}>();
+</script>
+
+<template>
+  <div v-for="idx in teamPerMatch" :key="idx" class="flex justify-between bg-slate-700 p-2 text-xl" :class="{ 'bg-slate-900': status == 'ONGOING' }">
+    <!-- max-w-lg min-w-[22rem]-->
+    <div class="text-grey-500">
+      {{ teams[idx - 1]?.name || "TBD" }}
+    </div> <div v-if="status == 'COMPLETED'" :class="teams[idx - 1]?.is_winner ? 'text-emerald-300' : 'text-white'" class="text-3xl font-black">
+      {{ teams[idx - 1]?.score }}
+    </div>
+    <div v-else class="text-3xl font-black">
+      0
+    </div>
+  </div>
+</template>
diff --git a/src/components/SwissRoundTable.vue b/src/components/SwissRoundTable.vue
new file mode 100644
index 0000000..8d07ded
--- /dev/null
+++ b/src/components/SwissRoundTable.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import KnockoutMatchCard from '@/components/KnockoutMatchCard.vue';
+
+defineProps<{
+  rounds: Record<string, Record<string, string | Record<string, string | number | boolean | undefined>[]>[]>;
+  teamPerMatch: number;
+  roundCount: number;
+}>();
+</script>
+
+<template>
+  <div class="grid h-full items-center gap-x-20 gap-y-5" :style="{ 'grid-template-columns': `repeat(${roundCount},26rem)` }">
+    <div v-for="round_idx in roundCount" :key="round_idx" class="flex flex-col">
+      <h1 class="text-4xl">
+        Tour {{ round_idx }}
+      </h1>
+    </div>
+    <div v-for="round_idx in roundCount" :key="round_idx" class="flex flex-col">
+      <div v-for="(match, idx) in rounds[round_idx]" :key="idx" class="my-3 divide-y">
+        <KnockoutMatchCard
+          :team-per-match="teamPerMatch"
+          :teams="(match.teams as Record<string, string | number | boolean | undefined>[])"
+          :status="(match.status as string)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 3aae3b2..8ba42a2 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
+  faArrowLeft,
   faArrowsRotate, faBolt, faChevronDown, faChevronUp,
   faCircle, faCircleCheck, faCirclePlus, faClock,
   faDownload, faEye, faEyeSlash,
@@ -37,6 +38,7 @@ library.add(
   faMagnifyingGlass,
   faTrashCan,
   faBolt,
+  faArrowLeft,
 );
 
 axios.defaults.baseURL = import.meta.env.VITE_API_URL;
diff --git a/src/models/bracket.ts b/src/models/bracket.ts
new file mode 100644
index 0000000..e28e937
--- /dev/null
+++ b/src/models/bracket.ts
@@ -0,0 +1,26 @@
+import type { Match } from '@/models/match';
+
+export enum BracketType {
+  SINGLE = 'SINGLE',
+  DOUBLE = 'DOUBLE',
+}
+
+export enum BracketSet {
+  WINNER = 'WINNER',
+  LOOSER = 'LOOSER',
+}
+export interface Bracket {
+  id: number;
+  name: string;
+  tournament: number;
+  bracket_type: BracketType;
+  depth: number;
+  winner: number;
+  teams: number[];
+  matchs: KnockoutMatch[];
+}
+
+export interface KnockoutMatch extends Match {
+  bracket: Bracket;
+  bracket_set: BracketSet;
+}
diff --git a/src/models/game.ts b/src/models/game.ts
index c8d9ed0..91d2c12 100644
--- a/src/models/game.ts
+++ b/src/models/game.ts
@@ -3,4 +3,5 @@ export interface Game {
   name: string;
   short_name?: string;
   players_per_team: number;
+  team_per_match: number;
 }
diff --git a/src/models/group.ts b/src/models/group.ts
new file mode 100644
index 0000000..a1e451f
--- /dev/null
+++ b/src/models/group.ts
@@ -0,0 +1,12 @@
+import type { Match } from '@/models/match';
+import type { Tournament } from '@/models/tournament';
+
+export interface Group {
+  id: number;
+  name: string;
+  tournament: Tournament;
+  matchs: Match[];
+  teams: number;
+  round_count: number;
+  scores: { [id:string]: number };
+}
diff --git a/src/models/match.ts b/src/models/match.ts
new file mode 100644
index 0000000..a236b1e
--- /dev/null
+++ b/src/models/match.ts
@@ -0,0 +1,52 @@
+import type { Team } from '@/models/team';
+
+export enum MatchStatus {
+  SCHEDULED = 'SCHEDULED',
+  ONGOING = 'ONGOING',
+  COMPLETED = 'COMPLETED',
+}
+
+export enum BestofType {
+  BO1 = 1,
+  BO3 = 3,
+  BO5 = 5,
+  BO7 = 7,
+  RANKING = 0,
+}
+export enum MatchTypeEnum {
+  GROUP = 'group',
+  BRACKET = 'bracket',
+  SWISS = 'swiss',
+}
+
+export interface BaseMatch {
+  id: number;
+  round_number: number;
+  score: Record<number, number>;
+  index_in_round: number;
+  status: MatchStatus;
+  bo_type: BestofType;
+}
+
+export interface MatchType {
+  id: number;
+  type: MatchTypeEnum;
+}
+
+export interface Match extends BaseMatch {
+  teams: number[];
+  times: number[];
+}
+export interface ScorePatch {
+  score: { [id: number]: number };
+  times: number[];
+}
+export interface OngoingMatch extends BaseMatch {
+  teams: { id: number; name: string }[];
+  match_type: MatchType;
+}
+export interface Score {
+  team: Team;
+  match: Match;
+  score: number;
+}
diff --git a/src/models/swiss.ts b/src/models/swiss.ts
new file mode 100644
index 0000000..752ee84
--- /dev/null
+++ b/src/models/swiss.ts
@@ -0,0 +1,20 @@
+import type { Match } from '@/models/match';
+import type { Team } from '@/models/team';
+
+export interface SwissRound {
+  id: number;
+  tournament: number;
+  min_score: number;
+  teams: Team[];
+  matchs: SwissMatch[];
+}
+
+export interface SwissSeeding {
+  swiss: SwissRound;
+  team: Team;
+  seeding: number;
+}
+
+export interface SwissMatch extends Match {
+  swiss: SwissRound;
+}
diff --git a/src/models/tournament.ts b/src/models/tournament.ts
index 71001e8..bdc7bea 100644
--- a/src/models/tournament.ts
+++ b/src/models/tournament.ts
@@ -1,6 +1,9 @@
+import type { Bracket } from '@/models/bracket';
 import type { Caster } from '@/models/caster';
 import type { EventDeref } from '@/models/event';
 import type { Game } from '@/models/game';
+import type { Group } from '@/models/group';
+import type { SwissRound } from '@/models/swiss';
 import type { Team } from '@/models/team';
 
 interface BaseTournament {
@@ -17,7 +20,6 @@ interface BaseTournament {
   manager_price_online: string;
   manager_price_onsite: string;
   cashprizes: number[];
-  game: Game | Game['id'];
   manager_online_product: number;
   player_online_product: number;
   substitute_online_product: number;
@@ -30,8 +32,16 @@ interface BaseTournament {
 
 export interface TournamentDeref extends BaseTournament {
   event: EventDeref;
+  game: Game;
+  groups: Group[];
+  brackets: Bracket[];
+  swissRounds: SwissRound[];
 }
 
 export interface Tournament extends BaseTournament {
   event: number;
+  game: Game;
+  groups: Group[];
+  brackets: Bracket[];
+  swissRounds: SwissRound[];
 }
diff --git a/src/stores/tournament.store.ts b/src/stores/tournament.store.ts
index a736de3..e771160 100755
--- a/src/stores/tournament.store.ts
+++ b/src/stores/tournament.store.ts
@@ -1,7 +1,12 @@
 import axios from 'axios';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
+import {
+  type Bracket, BracketSet, BracketType, type KnockoutMatch,
+} from '@/models/bracket';
 import type { Event } from '@/models/event';
+import type { Group } from '@/models/group';
+import { BestofType, type Match } from '@/models/match';
 import type { PlayerRegistrationDeref } from '@/models/registration';
 import type { Team } from '@/models/team';
 import type { Tournament } from '@/models/tournament';
@@ -11,7 +16,7 @@ import { useUserStore } from './user.store';
 const { get_csrf } = useUserStore();
 const { csrf, inscriptions } = storeToRefs(useUserStore());
 
-function groupBy<T>(items: T[], key: keyof T): Record<string, T[]> {
+export function groupBy<T>(items: T[], key: keyof T): Record<string, T[]> {
   return items.reduce((result, item) => ({
     ...result,
     [item[key] as keyof T]: [
@@ -31,6 +36,8 @@ export const useTournamentStore = defineStore('tournament', () => {
     'team': string;
   }[]>([]);
 
+  const tourney_teams = ref<Record<string, Team[]>>({});
+  const tournament = ref<Tournament>();
   const ongoingEvents = computed(() => Object.values(eventsList.value).reduce((res, item) => {
     if (item.ongoing) {
       res.push(item);
@@ -123,7 +130,6 @@ export const useTournamentStore = defineStore('tournament', () => {
       await fetchTournament(id);
     }
   }
-
   async function getTournaments(ids: number[]) {
     const missing: number[] = [];
     ids.forEach((id) => {
@@ -140,6 +146,7 @@ export const useTournamentStore = defineStore('tournament', () => {
     if (!(id in tournamentsList.value) || typeof tournamentsList.value[id].event === 'number') {
       await fetchTournamentFull(id);
     }
+    tournament.value = tournamentsList.value[id];
   }
 
   async function getTournamentsFull(ids: number[]) {
@@ -220,18 +227,18 @@ export const useTournamentStore = defineStore('tournament', () => {
   }
 
   async function payRegistration(
-    tournament: Tournament,
+    tournament_obj: Tournament,
     role: string,
   ) {
     await get_csrf();
 
     let product_id;
     if (role === 'player') {
-      product_id = tournament.player_online_product;
+      product_id = tournament_obj.player_online_product;
     } else if (role === 'manager') {
-      product_id = tournament.manager_online_product;
+      product_id = tournament_obj.manager_online_product;
     } else if (role === 'substitute') {
-      product_id = tournament.substitute_online_product;
+      product_id = tournament_obj.substitute_online_product;
     }
     if (!product_id) return;
 
@@ -247,7 +254,7 @@ export const useTournamentStore = defineStore('tournament', () => {
         'X-CSRFToken': csrf.value,
       },
     });
-    await fetchTournamentFull(tournament.id);
+    await fetchTournamentFull(tournament_obj.id);
 
     const { redirect_url } = response.data;
 
@@ -283,6 +290,16 @@ export const useTournamentStore = defineStore('tournament', () => {
     document.body.appendChild(link);
     link.click();
   }
+  function getTournamentTeams() {
+    tourney_teams.value = (tournament.value?.teams as Team[]).reduce((ret, team) => {
+      if (team.validated) {
+        ret.validated_teams.push(team);
+      } else {
+        ret.non_validated_teams.push(team);
+      }
+      return ret;
+    }, { validated_teams: [] as Team[], non_validated_teams: [] as Team[] });
+  }
 
   async function get_unpaid_registration() {
     const response = await axios.get<{
@@ -313,6 +330,43 @@ export const useTournamentStore = defineStore('tournament', () => {
     ));
   }
 
+  function get_validated_team_by_id(id: number) {
+    return tourney_teams.value.validated_teams.find((team) => team.id === id);
+  }
+  function get_group_by_id(groups: Group[], id: number) {
+    return groups.find((group) => group.id === id);
+  }
+  function is_winning_team(match: Match, team_id: number) {
+    if (match.bo_type === BestofType.RANKING) {
+      return match.score[team_id] >= Object.keys(match.score).length;
+    }
+    return match.score[team_id] >= Math.ceil(match.bo_type / 2);
+  }
+
+  function get_bracket_cols_count(bracket: Bracket) {
+    if (bracket.bracket_type === BracketType.SINGLE) {
+      return bracket.depth + 1;
+    }
+    return 2 * (bracket.depth - 1) + 3;
+  }
+  function get_winner_matchs_per_round(matchs: KnockoutMatch[], round: number) {
+    const winner_matchs = matchs.filter((match) => match.bracket_set === BracketSet.WINNER);
+    const round_matchs = groupBy(winner_matchs, 'round_number');
+    return round_matchs[round];
+  }
+  function get_col_class(bracket: Bracket) {
+    const nb_cols = get_bracket_cols_count(bracket);
+    return `grid-cols-[repeat(${nb_cols},26rem)]`;
+  }
+  function get_col_style(bracket: Bracket) {
+    const nb_cols = get_bracket_cols_count(bracket);
+    return { 'grid-template-columns': `repeat(${nb_cols},26rem)` };
+  }
+
+  const get_matchs_per_round = (matchs: Match[]) => {
+    const reversed_rounds = groupBy(matchs, 'round_number');
+    return Object.values(reversed_rounds).reverse();
+  };
   function $reset() {
     eventsList.value = {};
     tournamentsList.value = {};
@@ -323,8 +377,19 @@ export const useTournamentStore = defineStore('tournament', () => {
     ongoingEvents,
     tournamentsList,
     unpaidRegistration,
+    tourney_teams,
+    tournament,
+    is_winning_team,
+    get_validated_team_by_id,
+    get_winner_matchs_per_round,
+    get_group_by_id,
+    get_col_class,
+    get_col_style,
+    get_bracket_cols_count,
+    get_matchs_per_round,
     getEvent,
     getEvents,
+    getTournamentTeams,
     getEventsByYears,
     getOngoingEvents,
     getTournament,
@@ -347,7 +412,6 @@ export const useTournamentStore = defineStore('tournament', () => {
     payRegistration,
     patch_registration,
     $reset,
-    groupBy,
     get_ticket_pdf,
     get_unpaid_registration,
     validate_registration,
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index f9124c6..543dcae 100755
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -2,6 +2,7 @@ import axios, { type AxiosError, isAxiosError } from 'axios';
 import { defineStore } from 'pinia';
 import { computed, type Ref, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import type { OngoingMatch, ScorePatch } from '@/models/match';
 import { PaymentStatus, type PlayerRegistrationDeref, type RegistrationDeref } from '@/models/registration';
 import type { User, UserPatch, UserPatchError } from '@/models/user';
 
@@ -16,6 +17,7 @@ export const useUserStore = defineStore('user', () => {
   const router = useRouter();
   const ToastStore = useToastStore();
   const ErrorStore = useErrorStore();
+  const ongoing_match = ref<OngoingMatch>({} as OngoingMatch);
   const inscriptions = ref<{
     ongoing: Ref<[string, PlayerRegistrationDeref | RegistrationDeref][]>;
     past: Ref<[string, PlayerRegistrationDeref | RegistrationDeref][]>;
@@ -163,7 +165,7 @@ export const useUserStore = defineStore('user', () => {
       const past: [string, PlayerRegistrationDeref | RegistrationDeref][] = [];
       const unpaid: { [key: number]: boolean } = {};
       // Get all the inscription of the user
-      const registrations = await axios.get<{ 'player': PlayerRegistrationDeref[]; 'manager': RegistrationDeref[]; 'substitute': PlayerRegistrationDeref[] }>('/tournament/me');
+      const registrations = await axios.get<{ 'player': PlayerRegistrationDeref[]; 'manager': RegistrationDeref[]; 'substitute': PlayerRegistrationDeref[]; 'ongoing_match': OngoingMatch }>('/tournament/me');
       // Set the value of the ref object
       registrations.data.player.forEach((registration) => {
         if (registration.team.tournament.event.ongoing) {
@@ -198,7 +200,7 @@ export const useUserStore = defineStore('user', () => {
           unpaid[registration.id] = true;
         }
       });
-
+      ongoing_match.value = registrations.data.ongoing_match || {} as OngoingMatch;
       inscriptions.value = {
         ongoing,
         past,
@@ -258,6 +260,29 @@ export const useUserStore = defineStore('user', () => {
       setContent('Votre session a expiré, veuillez vous reconnecter', 'error');
     }
   }
+  async function send_score(match: OngoingMatch, data: ScorePatch) {
+    await get_csrf();
+    const { type } = ongoing_match.value.match_type;
+    const { id } = ongoing_match.value.match_type;
+    try {
+      const res = await axios.patch(`/tournament/${type}/${id}/match/${match.id}`, data, {
+        withCredentials: true,
+        headers: {
+          'X-CSRFToken': csrf.value,
+          'Content-Type': 'application/json',
+        },
+      });
+      if (res.status === 200) {
+        setContent('Le score a bien été mis à jour', 'success');
+      }
+    } catch (err: unknown) {
+      const error = err as Error | AxiosError;
+      if (isAxiosError(error)) {
+        // TODO: catch error
+      }
+    }
+    ongoing_match.value = {} as OngoingMatch;
+  }
 
   const role = computed(() => {
     if (user.value.is_superuser) return 'dev';
@@ -276,10 +301,12 @@ export const useUserStore = defineStore('user', () => {
     ask_reset_password,
     reset_password,
     get_csrf,
+    send_score,
     handle_session_cookie_expiration,
     role,
     isConnected,
     inscriptions,
+    ongoing_match,
     MailVerified,
     csrf,
     connectionTimestamp,
diff --git a/src/views/Me.vue b/src/views/Me.vue
index 200a350..b844776 100755
--- a/src/views/Me.vue
+++ b/src/views/Me.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import {
-  email, minLength, required, sameAs,
+  email, minLength,
+  required, sameAs,
 } from '@vuelidate/validators';
 import { storeToRefs } from 'pinia';
 import {
-  computed, onMounted, reactive, ref,
+  computed, reactive, ref,
 } from 'vue';
 import placeholder from '@/assets/images/logo_home.png';
 import FormField from '@/components/FormField.vue';
 import Modal from '@/components/Modal.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
+import { BestofType, type ScorePatch } from '@/models/match';
 import type { PlayerRegistrationDeref } from '@/models/registration';
 import type { Tournament } from '@/models/tournament';
 import { useTournamentStore } from '@/stores/tournament.store';
@@ -18,13 +20,13 @@ import { useUserStore } from '@/stores/user.store';
 
 const userStore = useUserStore();
 const tournamentStore = useTournamentStore();
-const { user, role, inscriptions } = storeToRefs(userStore);
-const { fetch_user_inscription_full, patch_user } = userStore;
+const {
+  user, role, inscriptions, ongoing_match,
+} = storeToRefs(userStore);
+const { fetch_user_inscription_full, patch_user, send_score } = userStore;
 const { patch_registration, payRegistration, get_ticket_pdf } = tournamentStore;
 
-onMounted(async () => {
-  await fetch_user_inscription_full();
-});
+await fetch_user_inscription_full();
 
 // Register form validation
 const data_name = reactive({
@@ -53,6 +55,9 @@ const data_name_in_game = computed(() => ({
 const rules_name_in_game = computed(() => ({
   name_in_game: { required },
 }));
+const rules_score = computed(() => ({
+  times: { required },
+}));
 const v$_name_in_game = useVuelidate(rules_name_in_game, data_name_in_game);
 
 const data_password = reactive({
@@ -72,13 +77,63 @@ const focus = ref('');
 const title = ref('Test title');
 
 const modal_payment = ref(false);
+const modal_enter_score = ref(false);
+const modal_enter_times = ref(false);
+const invalid_score = ref('');
+
+const data_score: { score: { [id: number]: number }; times: number[] } = reactive({
+  score: {},
+  times: [],
+});
+
+const NextModalEnterScore = () => {
+  if (ongoing_match.value.bo_type !== BestofType.RANKING) {
+    const score_total = Object.values(data_score.score).reduce((a, b) => a + b, 0);
+    if (score_total > (ongoing_match.value.bo_type as number)
+        || Object.keys(data_score.score).length === 0) {
+      invalid_score.value = "Le score que vous avez rentrés n'est pas valide!";
+    } else {
+      invalid_score.value = '';
+      modal_enter_times.value = true;
+      modal_enter_score.value = false;
+    }
+  } else { // we are in ranking
+    const ranks = Object.values(data_score.score).reduce((a, b) => a + b, 0);
+    const n = Object.keys(ongoing_match.value.teams).length;
+    if (ranks !== (n * (n + 1)) / 2) {
+      invalid_score.value = "Le score que vous avez rentrés n'est pas valide!";
+    } else {
+      invalid_score.value = '';
+      modal_enter_times.value = true;
+      modal_enter_score.value = false;
+    }
+  }
+};
 
+const PrevModalEnterScore = () => {
+  modal_enter_times.value = false;
+  modal_enter_score.value = true;
+  invalid_score.value = '';
+};
 const showModalNameInGame = ref(false);
 
+const game_number = computed(() => {
+  if (ongoing_match.value.bo_type === BestofType.RANKING) {
+    return 1;
+  }
+  return Object.values(data_score.score).reduce((a, b) => a + b, 0);
+});
+
+const v$_time_game = useVuelidate(rules_score, data_score, { $autoDirty: true });
+
 const closeModalNameInGame = () => {
   showModalNameInGame.value = false;
 };
 
+const closeModalEnterScore = () => {
+  invalid_score.value = '';
+  modal_enter_score.value = false;
+};
 const ValidateModalNameInGame = async () => {
   let data = {};
   const isValid = await v$_name_in_game.value.$validate();
@@ -106,7 +161,21 @@ const openModal = () => {
 const closeModal = () => {
   showModal.value = false;
 };
-
+const sendScore = async () => {
+  const scores = ({} as ScorePatch);
+  const times = data_score.times.filter((time) => time !== null);
+  if (times.length !== game_number.value) {
+    invalid_score.value = 'Les temps ne peuvent pas être nuls';
+    return;
+  }
+  scores.times = times;
+  scores.score = data_score.score;
+  await send_score(ongoing_match.value, scores);
+  data_score.score = {};
+  data_score.times = [];
+  modal_enter_times.value = false;
+  modal_enter_score.value = false;
+};
 const validateModal = async () => {
   let data = {};
   let isValid;
@@ -152,6 +221,12 @@ const editField = (field: string) => {
   }
   openModal();
 };
+const openScoreModal = () => {
+  Object.keys(ongoing_match?.value.teams).forEach((id) => {
+    data_score.score[parseInt(id, 10)] = 0;
+  });
+  modal_enter_score.value = true;
+};
 </script>
 
 <template>
@@ -237,6 +312,23 @@ const editField = (field: string) => {
            Supprimer son compte</button>
         </div-->
       </div>
+      <div v-if="Object.keys(ongoing_match).length > 0" id="ongoing_match">
+        <h1 class="m-3 text-center text-4xl font-bold">
+          Partie en cours
+        </h1>
+        <div class="mx-4 flex flex-col justify-around rounded-md bg-cyan-900">
+          <div class="flex w-full flex-col divide-y">
+            <div v-for="team in ongoing_match.teams" :key="team.id" class="mx-2 p-4">
+              <p class="truncate text-xl font-bold">
+                {{ team }}
+              </p>
+            </div>
+          </div>
+          <button type="button" class="w-full rounded-b-md bg-red-400 p-2 duration-100 hover:bg-red-700" @click="openScoreModal()">
+            Terminer la partie
+          </button>
+        </div>
+      </div>
     </div>
     <div class="hidden h-auto w-[2px] bg-white sm:block"/>
     <div id="team" class="md:w-4/6">
@@ -589,4 +681,119 @@ const editField = (field: string) => {
       <div/>
     </template>
   </Modal>
+
+  <Modal v-if="modal_enter_score" :close-on-click="false">
+    <template #icon>
+      <div/>
+    </template>
+    <template #title>
+      <h3 id="open_modal-title" class="text-white-900 text-base font-semibold leading-6">
+        Enregistrer le score
+      </h3>
+    </template>
+    <template #body>
+      <form id="patch-user" class="mt-2" @submit.prevent="validateModal">
+        <FormField
+          v-for="(name, id) in ongoing_match.teams"
+          :key="id"
+          v-slot="context"
+          :validations="v$_name_in_game.name_in_game"
+          class="flex justify-between"
+          label="{{id}}"
+        >
+          <label :for="'input' + id">{{ name }}</label>
+          <input
+            :id="'input' + id"
+            v-model="data_score.score[id]"
+            :class="{ error: context.invalid }"
+            aria-label="score"
+            class="w-24 border-2 bg-theme-bg"
+            placeholder="score"
+            required
+            type="number"
+            min="0"
+          />
+        </FormField>
+        <!-- hidden submit button with tailwind-->
+        <button class="hidden" type="submit"/>
+      </form>
+      <p v-if="invalid_score.length > 0" class="bg-red-400">
+        {{ invalid_score }}
+      </p>
+    </template>
+    <template #buttons>
+      <button
+        class="mx-4 inline-flex w-full justify-center rounded-md bg-green-500 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-300 sm:mt-0 sm:w-auto"
+        type="button"
+        @click.prevent="NextModalEnterScore"
+      >
+        Suivant
+      </button>
+      <button
+        class="inline-flex w-full justify-center rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-300 sm:mt-0 sm:w-auto"
+        type="button"
+        @click="closeModalEnterScore"
+      >
+        Annuler
+      </button>
+    </template>
+  </Modal>
+
+  <Modal v-if="modal_enter_times" :close-on-click="false">
+    <template #icon>
+      <div/>
+    </template>
+    <template #title>
+      <h3 id="open_modal-title" class="text-white-900 text-base font-semibold leading-6">
+        Enregistrer les durées de match
+      </h3>
+    </template>
+    <template #body>
+      <form id="patch-user" class="mt-2" @submit.prevent="validateModal">
+        <FormField
+          v-for="n in game_number"
+          :key="n"
+          v-slot="context"
+          class="flex justify-between"
+          :validations="v$_time_game.times"
+          :on-blur="v$_time_game.$touch"
+          label="times"
+        >
+          <label :for="'input' + n">Partie {{ n }} </label>
+          <input
+            :id="'input' + n"
+            v-model="data_score.times[n]"
+            :class="{ error: context.invalid }"
+            aria-label="duration"
+            class="w-24 border-2 bg-theme-bg"
+            placeholder="5 min"
+            required
+            type="number"
+            min="1"
+          />
+        </FormField>
+        <p v-if="invalid_score.length > 0" class="bg-red-400">
+          {{ invalid_score }}
+        </p>
+        <!-- hidden submit button with tailwind-->
+        <button class="hidden" type="submit"/>
+      </form>
+    </template>
+    <template #buttons>
+      <button
+        class="duration inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
+        type="submit"
+        @click="sendScore"
+      >
+        Envoyer
+      </button>
+      <button
+        class="inline-flex w-full justify-center rounded-md bg-red-500 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-300 sm:mt-0 sm:w-auto"
+        type="button"
+        @click="PrevModalEnterScore"
+      >
+        Retour
+      </button>
+    </template>
+  </Modal>
 </template>
diff --git a/src/views/TournamentDetail.vue b/src/views/TournamentDetail.vue
index 3a588e4..1bd7835 100755
--- a/src/views/TournamentDetail.vue
+++ b/src/views/TournamentDetail.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import {
-  computed, onMounted, reactive, ref,
+  onMounted, reactive, ref,
 } from 'vue';
 import { useRouter } from 'vue-router';
 import Content from '@/components/Content.vue';
+import GroupTable from '@/components/GroupTable.vue';
+import KnockoutMatchCard from '@/components/KnockoutMatchCard.vue';
+import SwissRoundTable from '@/components/SwissRoundTable.vue';
 import TeamCard from '@/components/TeamCard.vue';
+import {
+  BracketSet, BracketType, type KnockoutMatch,
+} from '@/models/bracket';
 import type { Game } from '@/models/game';
-import type { Team } from '@/models/team';
-import type { Tournament } from '@/models/tournament';
+import type { Group } from '@/models/group';
+import type { SwissMatch } from '@/models/swiss';
 import { useContentStore } from '@/stores/content.store';
-import { useTournamentStore } from '@/stores/tournament.store';
+import { groupBy, useTournamentStore } from '@/stores/tournament.store';
 
 const props = defineProps<{
   id: number;
@@ -20,21 +26,15 @@ const props = defineProps<{
 const { md, getContent } = useContentStore();
 
 const tournamentStore = useTournamentStore();
-const { getTournamentFull } = tournamentStore;
-const { tournamentsList } = storeToRefs(tournamentStore);
-const tournament = computed<Tournament | undefined>(() => tournamentsList.value[props.id]);
-const teams = computed<Record<string, Team[]>>(() => (tournament.value?.teams as Team[]).reduce((ret, team) => {
-  if (team.validated) {
-    ret.validated_teams.push(team);
-  } else {
-    ret.non_validated_teams.push(team);
-  }
-  return ret;
-}, { validated_teams: [] as Team[], non_validated_teams: [] as Team[] }));
-
+const {
+  getTournamentFull, getTournamentTeams, get_matchs_per_round, is_winning_team,
+  get_validated_team_by_id, get_col_style, get_bracket_cols_count, get_group_by_id, get_winner_matchs_per_round,
+} = tournamentStore;
+const { tournament, tourney_teams } = storeToRefs(tournamentStore);
 const open_drop = ref(false);
 const drop_label = ref('Informations');
 const trans = ref('translateX(0vw)');
+const show_detail_group = ref<number>(0);
 const sections = reactive<Record<string, [boolean, number]>>({
   info: [false, 0],
   teams: [false, 1],
@@ -55,13 +55,57 @@ const select_tag = (e: Event) => {
   sections[target.id][0] = true;
 };
 
+const get_looser_matchs = (matchs: KnockoutMatch[]) => {
+  const looser_matchs = matchs.filter((match) => match.bracket_set === BracketSet.LOOSER);
+  const round_matchs = groupBy(looser_matchs, 'round_number');
+  return Object.values(round_matchs).reverse();
+};
+
+const knockout_match_results = (match: KnockoutMatch) => {
+  const match_results = [] as Record<string, string | number | boolean | undefined>[];
+  match.teams.forEach((team) => {
+    const data = {} as Record<string, string | number | boolean | undefined>;
+    data.name = get_validated_team_by_id(team)?.name;
+    data.score = match.score[team];
+    data.is_winner = is_winning_team(match, team);
+    match_results.push(data);
+  });
+
+  return match_results;
+};
+
+const swiss_match_results = (matchs : SwissMatch[]) => {
+  const round_matchs = groupBy(matchs, 'round_number');
+  const res = {} as Record<string, Record<string, string | Record<string, string | number | boolean | undefined>[]>[]>;
+  Object.entries(round_matchs).forEach(([round, roundMatchs]) => {
+    res[round] = [] as Record<string, string | Record<string, string | number | boolean | undefined>[]>[];
+    roundMatchs.forEach((match) => {
+      const tmp = {} as { teams: Record<string, string | number | boolean | undefined>[]; status: string };
+      tmp.teams = [];
+      tmp.status = match.status;
+      match.teams.forEach((team) => {
+        const data = {} as { name: string | undefined; score: number; is_winner: boolean };
+        data.name = get_validated_team_by_id(team)?.name;
+        data.score = match.score[team];
+        data.is_winner = is_winning_team(match, team);
+        tmp.teams.push(data);
+      });
+      res[round].push(tmp);
+    });
+  });
+
+  return res;
+};
+
 const router = useRouter();
+try {
+  await getTournamentFull(props.id);
+  getTournamentTeams();
+} catch (err: unknown) {
+  router.go(-1);
+}
+
 onMounted(async () => {
-  try {
-    await getTournamentFull(props.id);
-  } catch (err: unknown) {
-    router.go(-1);
-  }
   if (props.section !== undefined && props.section.s in sections) {
     sections[props.section.s][0] = true;
     drop_label.value = props.section.s;
@@ -283,27 +327,193 @@ onMounted(async () => {
       <h1 v-if="tournament?.teams.length === 0" class="mt-6 text-center text-4xl">
         Aucune équipe inscrite
       </h1>
-      <div v-if="teams.validated_teams.length > 0">
+      <div v-if="tourney_teams?.validated_teams.length > 0">
         <h1 class="title">
           Équipes validées
         </h1>
         <div class="grid gap-4 p-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          <TeamCard v-for="team in teams.validated_teams" :key="team.id" :team="team"/>
+          <TeamCard v-for="team in tourney_teams.validated_teams" :key="team.id" :team="team"/>
         </div>
       </div>
-      <div v-if="teams.non_validated_teams.length > 0">
+      <div v-if="tourney_teams?.non_validated_teams.length > 0">
         <h1 class="title">
           Équipes en cours de validation
         </h1>
         <div class="grid gap-4 p-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          <TeamCard v-for="team in teams.non_validated_teams" :key="team.id" :team="team"/>
+          <TeamCard v-for="team in tourney_teams.non_validated_teams" :key="team.id" :team="team"/>
         </div>
       </div>
     </section>
 
-    <section id="groups" :class="{ hidden: !sections.groups[0] }"/>
+    <section id="groups" :class="{ hidden: !sections.groups[0] || show_detail_group }" class="flex content-center">
+      <h1 v-if="tournament?.groups?.length === 0 && tournament?.swissRounds.length === 0" class="mt-6 flex flex-1 justify-center text-center text-4xl">
+        Les poules ou les rondes suisse ne sont pas disponibles.
+      </h1>
+      <div v-if="tournament?.groups?.length > 0" class="my-10 flex flex-1 flex-wrap justify-center gap-20">
+        <div
+          v-for="group in tournament?.groups"
+          :key="group.id"
+          class=" border-collapse border-slate-500 hover:ring-8 hover:ring-slate-500"
+          @click="show_detail_group = group.id"
+          @keydown.enter="show_detail_group = group.id"
+        >
+          <GroupTable :teams="tourney_teams" :group="group"/>
+        </div>
+      </div>
+      <div v-else-if="tournament?.swissRounds?.length > 0" class="mt-6 flex h-full justify-center">
+        <div v-for="swiss in tournament?.swissRounds" :key="swiss.id" class="mx-3 overflow-x-auto">
+          <SwissRoundTable
+            :rounds="swiss_match_results(swiss.matchs)"
+            :team-per-match="tournament?.game.team_per_match"
+            :round-count="2 * swiss.min_score - 1"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section v-if="get_group_by_id(tournament?.groups || [], show_detail_group) !== undefined" id="group" :class="{ hidden: show_detail_group === null || !sections.groups[0] }" class="flex flex-col p-4">
+      <nav class="my-5 flex justify-center gap-3">
+        <button type="button" class="w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto" @click="show_detail_group = 0">
+          <fa-awesome-icon icon="fa-solid fa-arrow-left"/> Retour
+        </button>
+        <h1 class="text-center text-3xl font-black">
+          {{ get_group_by_id(tournament?.groups, show_detail_group)?.name }}
+        </h1>
+      </nav>
+      <div class="flex justify-center gap-3">
+        <GroupTable
+          class="max-w-96 max-h-96 w-1/2"
+          :teams="tourney_teams"
+          :group="get_group_by_id(tournament.groups, show_detail_group) as Group"
+        />
+        <div class="w-1/2">
+          <div
+            v-for="matchs in get_matchs_per_round(get_group_by_id(tournament.groups, show_detail_group)?.matchs ?? [])"
+            :key="matchs[0].id"
+          >
+            <h1 class="text-center text-3xl font-black">
+              Round {{ matchs[0].round_number }}
+            </h1>
+            <div class="gap-4">
+              <div v-for="game in matchs" :key="game.id">
+                <div v-if="game.teams.length == 2" class="flex justify-center">
+                  <div class="mb-4 ml-10 flex flex-1 justify-between divide-x border-2 text-xl font-bold">
+                    <div class="p-3">
+                      {{ get_validated_team_by_id(game.teams[0])?.name || "TBD" }}
+                    </div>
+                    <div class="p-3">
+                      {{ game.score[game.teams[0]] }}
+                    </div>
+                  </div>
+                  <div class="mb-4 mr-10 flex flex-1 divide-x border-2 text-xl font-bold">
+                    <div class="p-3">
+                      {{ game.score[game.teams[1]] }}
+                    </div>
+                    <div class="p-3">
+                      {{ get_validated_team_by_id(game.teams[1])?.name || "TBD" }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="flex justify-center">
+                  <div>
+                    <div class="mx-5 mb-4 flex flex-1 justify-between divide-x border-2 text-xl font-bold">
+                      <table>
+                        <tr>
+                          <th align="center" class="troncate border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+                            Equipe
+                          </th>
+                          <th align="center" class="border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+                            Score
+                          </th>
+                        </tr>
+                        <tr v-for="team_id in game.teams" :key="team_id">
+                          <td align="center" class="border-separate border border-slate-500 p-4">
+                            {{ get_validated_team_by_id(team_id)?.name || "TBD" }}
+                          </td>
+                          <td align="center" class="border-separate border border-slate-500 p-4">
+                            {{ game.score[team_id] }}
+                          </td>
+                        </tr>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
-    <section id="brackets" :class="{ hidden: !sections.brackets[0] }"/>
+    <section id="brackets" :class="{ hidden: !sections.brackets[0] }">
+      <!-- TODO: refactor in component -->
+      <h1 v-if="tournament?.brackets?.length === 0" class="mt-6 text-center text-4xl">
+        Les arbres ne sont pas disponibles.
+      </h1>
+      <div v-for="bracket in tournament.brackets" v-else :key="bracket.id">
+        <h1 class="title">
+          {{ bracket.name }}
+        </h1>
+        <div v-if="bracket.bracket_type === BracketType.SINGLE" :key="bracket.id" class="overflow-x-auto">
+          <div class="grid items-center gap-10" :style="get_col_style(bracket)">
+            <div v-for="(games, round_idx) in get_matchs_per_round(bracket.matchs)" :key="round_idx" class="flex flex-col justify-around">
+              <div v-for="game in games" :key="game.id" class="m-2 divide-y">
+                <KnockoutMatchCard
+                  :team-per-match="tournament.game.team_per_match"
+                  :teams="knockout_match_results(game as KnockoutMatch)"
+                  :status="game.status"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="bracket.bracket_type === BracketType.DOUBLE" :key="bracket.id" class="overflow-x-auto">
+          <div class="grid items-center gap-10" :style="get_col_style(bracket)">
+            <div class="flex flex-col justify-around">
+              <div v-for="game in get_winner_matchs_per_round(bracket.matchs, bracket.depth)" :key="game.id" class="m-2 divide-y">
+                <KnockoutMatchCard
+                  :team-per-match="tournament.game.team_per_match"
+                  :teams="knockout_match_results(game)"
+                  :status="game.status"
+                />
+              </div>
+            </div>
+            <div v-for="col_idx in get_bracket_cols_count(bracket) - 2" :key="col_idx" class="flex flex-col justify-around">
+              <div v-if="col_idx % 2">
+                <div v-for="game in get_winner_matchs_per_round(bracket.matchs, bracket.depth - (col_idx - 1) / 2 - 1)" :key="game.id" class="m-2 divide-y">
+                  <KnockoutMatchCard
+                    :team-per-match="tournament.game.team_per_match"
+                    :teams="knockout_match_results(game)"
+                    :status="game.status"
+                  />
+                </div>
+              </div>
+            </div>
+            <div v-if="bracket.winner !== null" class="w-40 bg-yellow-600 p-2">
+              <h1 class="text-bold text-center text-2xl">
+                Vainqueur
+              </h1>
+              <p class="text-center text-xl">
+                {{ get_validated_team_by_id(bracket.winner)?.name }}
+              </p>
+            </div>
+          </div>
+          <div class="grid items-center gap-10" :style="get_col_style(bracket)">
+            <div/>
+            <div v-for="(games, round_idx) in get_looser_matchs(bracket.matchs)" :key="round_idx" class="flex flex-col justify-around">
+              <div v-for="game in games" :key="game.id" class="m-2 divide-y">
+                <KnockoutMatchCard
+                  :team-per-match="tournament.game.team_per_match"
+                  :teams="knockout_match_results(game)"
+                  :status="game.status"
+                />
+              </div>
+            </div>
+            <div/>
+          </div>
+        </div>
+      </div>
+    </section>
 
     <section id="planning" :class="{ hidden: !sections.planning[0] }">
       <div class="m-1 flex justify-center rounded bg-cyan-900 p-2">
@@ -335,6 +545,7 @@ section {
   flex-grow: 1;
   width: 100%;
   height: 100%;
+  overflow-x: scroll;
 }
 
 a {
diff --git a/tailwind.config.js b/tailwind.config.js
index 30314c9..1e208f5 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,11 @@ export default {
     './index.html',
     './src/**/*.{vue,ts,js,jsx,tsx}',
   ],
+  safelist: [
+    {
+      pattern: /grid-cols-\d+/,
+    },
+  ],
   theme: {
     extend: {
       colors: {