diff --git a/frontend/ui/src/routes/[theme]/+page.svelte b/frontend/ui/src/routes/[theme]/+page.svelte
index c2bc2ad0..b7c7a046 100644
--- a/frontend/ui/src/routes/[theme]/+page.svelte
+++ b/frontend/ui/src/routes/[theme]/+page.svelte
@@ -16,9 +16,11 @@
  import { my } from '$lib/stores/my.js';
 </script>
 
-<Card class="niceborder text-indent mt-2 mb-4">
+<Card class="bg-dark niceborder text-indent mt-2 mb-4">
 
-    <CardBody class="bg-dark text-light">
+    <Row>
+    <Col lg={6} xl={7}>
+    <CardBody class="text-light">
         <div style="position: relative; display: inline-block;">
             {#if $current_theme.locked}
                 <div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
@@ -58,8 +60,9 @@
             </Row>
         </div>
     </CardBody>
-
-    {#if $current_theme.exercices}
+    </Col>
+    <Col lg={6} xl={5}>
+    {#if $current_theme.exercices && $current_theme.exercices.length}
     <ul class="list-group">
         {#each $current_theme.exercices as exercice, index}
             <li
@@ -85,36 +88,40 @@
 	                            d="m 22,20 a 9.5700617,9.5700617 0 0 1 -9.5690181,9.57006 9.5700617,9.5700617 0 0 1 -9.57110534,-9.56797 9.5700617,9.5700617 0 0 1 9.56692984,-9.57215 9.5700617,9.5700617 0 0 1 9.5731926,9.56588" />
 	                    </svg>
                         </div>
-                        {#each exercice.tags as tag, idx}
-	                    <Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
-                        {/each}
-	                <h5 class="fw-bold">
-                            {#if $my && $my.exercices[exercice.id]}
-	                        <span style="white-space: nowrap">
-                                    {#if $my.exercices[exercice.id].wip}
-	                                <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
-                                    {/if}
-	                            {exercice.title}
-                                </span>
-                            {:else}
-	                        <span style="white-space: nowrap">
-	                            <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
-	                            {exercice.title}
-	                        </span>
-                            {/if}
-                            {#if exercice.curcoeff > 1.0}
-	                        <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
-                            {/if}
-	                </h5>
+                        <div class="d-flex justify-content-between flex-wrap">
+	                    <h5 class="fw-bold">
+                                {#if $my && $my.exercices[exercice.id]}
+	                            <span style="white-space: nowrap">
+                                        {#if $my.exercices[exercice.id].wip}
+	                                    <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
+                                        {/if}
+	                                {exercice.title}
+                                    </span>
+                                {:else}
+	                            <span style="white-space: nowrap">
+	                                <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
+	                                {exercice.title}
+	                            </span>
+                                {/if}
+                                {#if exercice.curcoeff > 1.0}
+	                            <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
+                                {/if}
+	                    </h5>
+                            <div>
+                                {#each exercice.tags as tag, idx}
+	                            <Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
+                                {/each}
+                            </div>
+                        </div>
 	                <p>{@html exercice.headline}</p>
                     </div>
-                    <div class="d-none d-md-block col-1">
+                    <div class="d-none d-md-block col-1 pe-0">
                         {#if $my && $my.exercices[exercice.id]}
-	                    <a class="float-right" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
+	                    <a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
                                 <Icon name="chevron-right" aria-hidden="true" />
                             </a>
                         {:else}
-	                    <span class="float-right" style="font-size: 3rem">
+	                    <span class="float-end" style="font-size: 3rem">
                                 <Icon name="chevron-right" aria-hidden="true" />
                             </span>
                         {/if}
@@ -123,7 +130,13 @@
             </li>
         {/each}
     </ul>
+    {:else}
+    <p class="text-center my-5">
+        Aucun contenu disponible actuellement.
+    </p>
     {/if}
+    </Col>
+    </Row>
 
 </Card>