diff --git a/frontend/README.md b/frontend/README.md
index aaba594..57c719e 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -5,7 +5,8 @@ Une fois compilé le frontend utilise [Bun](https://bun.sh/).
 # TODO 
 
 - [ ] Fix : Mettre en forme la liste des cartes sur mobile
-- [ ] Fix : Mettre en forme les titres de liste de carte
+- [x] Fix : Mettre en forme les titres de liste de carte
+- [ ] Fix : Ajouter les icones de couleur pour les tops commandants
 - [ ] Fix : Changer le menu mobile
 - [x] Fix : Changer les cartes recto / verso
 - [ ] Feat : Ajouter la liste des decks dans l'espace decks
diff --git a/frontend/src/lib/components/icons/ArtifactIcon.svelte b/frontend/src/lib/components/icons/ArtifactIcon.svelte
new file mode 100644
index 0000000..4bb8371
--- /dev/null
+++ b/frontend/src/lib/components/icons/ArtifactIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/artifact.svg" alt="Artifact icon"/>
diff --git a/frontend/src/lib/components/icons/CommanderIcon.svelte b/frontend/src/lib/components/icons/CommanderIcon.svelte
new file mode 100644
index 0000000..c903447
--- /dev/null
+++ b/frontend/src/lib/components/icons/CommanderIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/commander.svg" alt="Commander icon"/>
diff --git a/frontend/src/lib/components/icons/CreatureIcon.svelte b/frontend/src/lib/components/icons/CreatureIcon.svelte
new file mode 100644
index 0000000..7054398
--- /dev/null
+++ b/frontend/src/lib/components/icons/CreatureIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/creature.svg" alt="Creature icon"/>
diff --git a/frontend/src/lib/components/icons/EnchantmentIcon.svelte b/frontend/src/lib/components/icons/EnchantmentIcon.svelte
new file mode 100644
index 0000000..f129964
--- /dev/null
+++ b/frontend/src/lib/components/icons/EnchantmentIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/enchantment.svg" alt="Enchantment icon"/>
diff --git a/frontend/src/lib/components/icons/InstantIcon.svelte b/frontend/src/lib/components/icons/InstantIcon.svelte
new file mode 100644
index 0000000..fcb2aac
--- /dev/null
+++ b/frontend/src/lib/components/icons/InstantIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/instant.svg" alt="Instant icon"/>
diff --git a/frontend/src/lib/components/icons/LandIcon.svelte b/frontend/src/lib/components/icons/LandIcon.svelte
new file mode 100644
index 0000000..61eab5d
--- /dev/null
+++ b/frontend/src/lib/components/icons/LandIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/land.svg" alt="Land icon"/>
diff --git a/frontend/src/lib/components/icons/PlaneswalkerIcon.svelte b/frontend/src/lib/components/icons/PlaneswalkerIcon.svelte
new file mode 100644
index 0000000..0a29790
--- /dev/null
+++ b/frontend/src/lib/components/icons/PlaneswalkerIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/planeswalker.svg" alt="Planeswalker icon"/>
diff --git a/frontend/src/lib/components/icons/SorceryIcon.svelte b/frontend/src/lib/components/icons/SorceryIcon.svelte
new file mode 100644
index 0000000..e01a3bb
--- /dev/null
+++ b/frontend/src/lib/components/icons/SorceryIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/sorcery.svg" alt="Sorcery icon"/>
diff --git a/frontend/src/routes/bset/[slug]/+page.svelte b/frontend/src/routes/bset/[slug]/+page.svelte
index 89b2c9f..36e3c74 100644
--- a/frontend/src/routes/bset/[slug]/+page.svelte
+++ b/frontend/src/routes/bset/[slug]/+page.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
-    import { onMount } from 'svelte';
 	import type { PageProps } from './$types';
+    import ArtifactIcon from '$lib/components/icons/ArtifactIcon.svelte';
+    import InstantIcon from '$lib/components/icons/InstantIcon.svelte';
+    import LandIcon from '$lib/components/icons/LandIcon.svelte';
+    import EnchantmentIcon from '$lib/components/icons/EnchantmentIcon.svelte';
+    import SorceryIcon from '$lib/components/icons/SorceryIcon.svelte';
+    import CreatureIcon from '$lib/components/icons/CreatureIcon.svelte';
+    import PlaneswalkerIcon from '$lib/components/icons/PlaneswalkerIcon.svelte';
+    import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
 	let { data }: PageProps = $props();
 
   let commander = $state([])
@@ -35,58 +42,80 @@
 </script>
 
 <div class="flex flex-col w-full items-center">
-  <h1>{slug}</h1>
-
-  <h2>Commandants</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
+    <CommanderIcon />
+    <h2 class="font-beleren text-2xl">Commandants</h2>
+  </div>
   <CardGrid>
     {#each commander as card}
       <Card card={card} isCommander={true} showUrl={true} />
     {/each}
   </CardGrid>
 
-  <h2>Planeswalker</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <PlaneswalkerIcon />
+    <h2 class="font-beleren text-2xl">Planeswalker</h2>
+  </div>
   <CardGrid>
     {#each planeswalker as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Creature</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <CreatureIcon />
+    <h2 class="font-beleren text-2xl">Créatures</h2>
+  </div>
   <CardGrid>
     {#each creature as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Rituels</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <SorceryIcon />
+    <h2 class="font-beleren text-2xl">Rituels</h2>
+  </div>
   <CardGrid>
     {#each sorcery as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Artefacts</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <ArtifactIcon />
+    <h2 class="font-beleren text-2xl">Artefacts</h2>
+  </div>
   <CardGrid>
     {#each artifact as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Éphémères</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <InstantIcon />
+    <h2 class="font-beleren text-2xl">Éphemères</h2>
+  </div>
   <CardGrid>
     {#each instant as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Enchantements</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <EnchantmentIcon />
+    <h2 class="font-beleren text-2xl">Enchantements</h2>
+  </div>
   <CardGrid>
     {#each enchantment as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Terrains</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <LandIcon />
+    <h2 class="font-beleren text-2xl">Terrains</h2>
+  </div>
   <CardGrid>
     {#each land as card}
       <Card card={card}/>
diff --git a/frontend/src/routes/commander/[slug]/+page.svelte b/frontend/src/routes/commander/[slug]/+page.svelte
index 0945f5c..6f7ace4 100644
--- a/frontend/src/routes/commander/[slug]/+page.svelte
+++ b/frontend/src/routes/commander/[slug]/+page.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
+    import ArtifactIcon from '$lib/components/icons/ArtifactIcon.svelte';
+    import CreatureIcon from '$lib/components/icons/CreatureIcon.svelte';
+    import EnchantmentIcon from '$lib/components/icons/EnchantmentIcon.svelte';
+    import InstantIcon from '$lib/components/icons/InstantIcon.svelte';
+    import LandIcon from '$lib/components/icons/LandIcon.svelte';
+    import PlaneswalkerIcon from '$lib/components/icons/PlaneswalkerIcon.svelte';
+    import SorceryIcon from '$lib/components/icons/SorceryIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 
@@ -39,52 +46,87 @@
     <Card card={mainCardData} isCommander={true}/>
   </div>
 
-  <h2>Planeswalker</h2>
+  {#if planeswalker != [] && planeswalker != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <PlaneswalkerIcon />
+    <h2 class="font-beleren text-2xl">Planeswalker</h2>
+  </div>
   <CardGrid>
     {#each planeswalker as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Creature</h2>
+  {#if creature != [] && creature != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <CreatureIcon />
+    <h2 class="font-beleren text-2xl">Créatures</h2>
+  </div>
   <CardGrid>
     {#each creature as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Rituels</h2>
+  {#if sorcery != [] && sorcery != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <SorceryIcon />
+    <h2 class="font-beleren text-2xl">Rituels</h2>
+  </div>
   <CardGrid>
     {#each sorcery as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Artefacts</h2>
+  {#if artifact != [] && artifact != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <ArtifactIcon />
+    <h2 class="font-beleren text-2xl">Artefacts</h2>
+  </div>
   <CardGrid>
     {#each artifact as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Éphémères</h2>
+  {#if instant != [] && instant != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <InstantIcon />
+    <h2 class="font-beleren text-2xl">Éphemères</h2>
+  </div>
   <CardGrid>
     {#each instant as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Enchantements</h2>
+  {#if enchantment != [] && enchantment != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <EnchantmentIcon />
+    <h2 class="font-beleren text-2xl">Enchantements</h2>
+  </div>
   <CardGrid>
     {#each enchantment as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Terrains</h2>
+  {#if land != [] && land != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <LandIcon />
+    <h2 class="font-beleren text-2xl">Terrains</h2>
+  </div>
   <CardGrid>
     {#each land as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 </div>
diff --git a/frontend/src/routes/top/commander/[slug]/+page.svelte b/frontend/src/routes/top/commander/[slug]/+page.svelte
index e69a7bc..31859b8 100644
--- a/frontend/src/routes/top/commander/[slug]/+page.svelte
+++ b/frontend/src/routes/top/commander/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
+    import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 
@@ -58,9 +59,10 @@
 </script>
 
 <div class="flex flex-col w-full items-center">
-  <h1>{slug}</h1>
-
-  <h2>Commandants</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
+    <CommanderIcon />
+    <h2 class="font-beleren text-2xl">Top Commandants {slug != "all" ? "- " + slug.charAt(0).toUpperCase() + slug.slice(1) : ""}</h2>
+  </div>
   <CardGrid>
     {#each commander as card}
       <Card card={card} isCommander={true} showUrl={true} />