diff --git a/frontend/ui/package-lock.json b/frontend/ui/package-lock.json
index 21f3ade8..7ab00696 100644
--- a/frontend/ui/package-lock.json
+++ b/frontend/ui/package-lock.json
@@ -86,8 +86,7 @@
     "@popperjs/core": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
-      "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==",
-      "dev": true
+      "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ=="
     },
     "@rollup/pluginutils": {
       "version": "4.1.1",
@@ -105,15 +104,15 @@
       "integrity": "sha512-RKYNkQxtsMgt0wD8PhfXR1hGT1Tmq1E5eZeTr1KxIerczITRnWVT8LElfu/9Kusv44yYlyQtNc1mLoYqgloOQw=="
     },
     "@sveltejs/kit": {
-      "version": "1.0.0-next.156",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.156.tgz",
-      "integrity": "sha512-YHT3sbPKpBGSYYFgEpXUx7JhN682wdXhc5INYZGqFfaGqkIOrThosz8qRsLQBfRbFnu0fzgWSsfj7FKq8YeFuA==",
+      "version": "1.0.0-next.160",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.160.tgz",
+      "integrity": "sha512-JmacpK+VsppUKDQu1B3oJ70SnE9BXb/PSAP3f91K/DMnaSEGj7vtHn/3e6l7Mop12t1PkBk5lImh/ULqBO+YfA==",
       "dev": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.16",
         "cheap-watch": "^1.0.3",
         "sade": "^1.7.4",
-        "vite": "^2.5.0"
+        "vite": "^2.5.2"
       }
     },
     "@sveltejs/vite-plugin-svelte": {
@@ -175,6 +174,16 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -196,6 +205,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "bootstrap": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz",
@@ -206,6 +221,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
       "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
     },
+    "bootswatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.1.0.tgz",
+      "integrity": "sha512-HwQjahQSq0u+ydqY0fFyl/GsJIHhBvzjBA8D2XvMvIrHdqYfL1LdD5bnnaEDoJugMCYGud9PQSgq/XkuyFFPMg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -216,6 +236,15 @@
         "concat-map": "0.0.1"
       }
     },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -279,6 +308,22 @@
       "integrity": "sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -357,9 +402,9 @@
       }
     },
     "esbuild": {
-      "version": "0.12.22",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.22.tgz",
-      "integrity": "sha512-yWCr9RoFehpqoe/+MwZXJpYOEIt7KOEvNnjIeMZpMSyQt+KCBASM3y7yViiN5dJRphf1wGdUz1+M4rTtWd/ulA==",
+      "version": "0.12.24",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
+      "integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==",
       "dev": true
     },
     "escape-string-regexp": {
@@ -565,6 +610,15 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -691,6 +745,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
@@ -721,6 +784,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -761,6 +830,12 @@
       "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -840,6 +915,18 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -937,6 +1024,15 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -998,6 +1094,25 @@
         "mri": "^1.1.0"
       }
     },
+    "sass": {
+      "version": "1.38.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.38.2.tgz",
+      "integrity": "sha512-Bz1fG6qiyF0FX6m/I+VxtdVKz1Dfmg/e9kfDy2PhWOkq3T384q2KxwIfP0fXpeI+EyyETdOauH+cRHQDFASllA==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
+      "integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "seedrandom": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
@@ -1178,6 +1293,15 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -1209,9 +1333,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.1.tgz",
-      "integrity": "sha512-FwmLbbz8MB1pBs9dKoRDgpiqoijif8hSK1+NNUYc12/cnf+pM2UFhhQ1rcpXgbMhm/5c2USZdVAf0FSkSxaFDA==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.2.tgz",
+      "integrity": "sha512-JK5uhiVyMqHiAJbgBa8rCvpP8bEhAE9dKDv1gCmP+EUP2FSPmEeW3WXlCXauPB3MDa8behPW+ntyNXqnGaxslg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.12.17",
diff --git a/frontend/ui/package.json b/frontend/ui/package.json
index 371fa71a..0e8b6d29 100644
--- a/frontend/ui/package.json
+++ b/frontend/ui/package.json
@@ -15,6 +15,8 @@
     "eslint-plugin-svelte3": "^3.2.0",
     "prettier": "~2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
+    "sass": "^1.38.2",
+    "sass-loader": "^12.1.0",
     "svelte": "^3.34.0",
     "sveltestrap": "^5.6.2"
   },
@@ -24,6 +26,7 @@
     "@sveltejs/adapter-static": "^1.0.0-next.17",
     "bootstrap": "^5.1.0",
     "bootstrap-icons": "^1.5.0",
+    "bootswatch": "^5.1.0",
     "seedrandom": "^3.0.5"
   }
 }
diff --git a/frontend/ui/src/components/ExerciceDownloads.svelte b/frontend/ui/src/components/ExerciceDownloads.svelte
index a56b5abb..aca38b08 100644
--- a/frontend/ui/src/components/ExerciceDownloads.svelte
+++ b/frontend/ui/src/components/ExerciceDownloads.svelte
@@ -13,8 +13,8 @@
 </script>
 
 {#if files.length}
-    <Card class="mb-2">
-	<CardHeader>
+    <Card class="mb-4">
+	<CardHeader class="text-light">
             <Icon name="download" />
             Téléchargements
         </CardHeader>
@@ -23,18 +23,19 @@
 		<strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
             </CardText>
         </CardBody>
-        <ListGroup>
+        <ListGroup class="border-dark">
             {#each files as file, index}
-                <ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex">
-		    <h1><Icon name="arrow-down-circle" /></h1>
-                    <div>
+                <ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex align-items-center">
+		    <h1 class="me-3">
+                        <Icon name="arrow-down-circle" />
+                    </h1>
+                    <div style="min-width: 0">
 		        <h4 class="fw-bold"><samp>{file.name}</samp></h4>
                         <nobr>
                             Taille&nbsp;:
                             <span title="{file.size} octets">{file.size}</span>
                         </nobr>
-                        &ndash;
-                        <nobr>
+                        <nobr class="d-block text-truncate">
                             <span title="blake2.net">b2sum</span>&nbsp;:
                             <samp class="cksum" title="{file.checksum}">{file.checksum}</samp>
                         </nobr>
diff --git a/frontend/ui/src/components/ExerciceFlags.svelte b/frontend/ui/src/components/ExerciceFlags.svelte
index 12c87377..03524589 100644
--- a/frontend/ui/src/components/ExerciceFlags.svelte
+++ b/frontend/ui/src/components/ExerciceFlags.svelte
@@ -94,7 +94,7 @@
 </script>
 
 <Card class="border-danger mb-2">
-    <CardHeader class="bg-danger">
+    <CardHeader class="bg-danger text-light">
         <Icon name="flag-fill" />
         Faire son rapport
     </CardHeader>
@@ -109,20 +109,20 @@
         </Progress>
     {/if}
     {#if exercice.tries || exercice.submitted || sberr}
-        <ListGroup>
+        <ListGroup class="border-dark">
             {#if exercice.solved_time && exercice.tries}
-                <ListGroupItem class="text-warning">
+                <ListGroupItem class="text-warning rounded-0">
                     {exercice.tries} {exercice.tries==1?"tentative effectuée":"tentatives effectuées"}.
                     Dernière solution envoyée à {exercice.solved_time}.
                 </ListGroupItem>
             {/if}
             {#if exercice.solve_dist}
-                <ListGroupItem>
+                <ListGroupItem class="rounded-0">
                     {exercice.solve_dist} {exercice.solve_dist == 1?"réponse erronée":"réponses erronées"}.
                 </ListGroupItem>
             {/if}
             {#if exercice.submitted || sberr}
-	        <ListGroupItem class="{messageClass}">
+	        <ListGroupItem class="{messageClass} rounded-0">
                     {#if !sberr}
                         <strong>Votre solution a bien été envoyée !</strong>
                     {:else}
@@ -131,7 +131,7 @@
                 </ListGroupItem>
             {/if}
             {#if timeouted}
-	        <ListGroupItem class="text-danger">
+	        <ListGroupItem class="text-danger rounded-0">
                     <strong>Oops</strong>
                     La requête a dépassé le délai d'attente. Vous devriez réessayer dans quelques instant&hellip;
                 </ListGroupItem>
diff --git a/frontend/ui/src/components/ExerciceHints.svelte b/frontend/ui/src/components/ExerciceHints.svelte
index 8adb6526..e92f6d94 100644
--- a/frontend/ui/src/components/ExerciceHints.svelte
+++ b/frontend/ui/src/components/ExerciceHints.svelte
@@ -86,13 +86,13 @@
         {/if}
         <ListGroup>
             {#each hints as hint (hint.id)}
-                <ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex">
+                <ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex align-items-center">
                     {#if hint.file}
 		        <h1 class="me-3">
                             <Icon name="arrow-down-circle" />
                         </h1>
                     {/if}
-                    <div>
+                    <div class="flex-fill" style="min-width:0">
                         {#if !(hint.content || hint.file)}
 		            <button type="button" on:click={openHint(hint)} class="float-end btn btn-info" class:disabled={hints_submitted[hint.id]}>
                                 {#if hints_submitted[hint.id]}
@@ -111,7 +111,7 @@
                         {/if}
 		        <h4 class="fw-bold">{hint.title}</h4>
                         {#if hint.file}
-		            <p>
+		            <p style="overflow-x: auto">
                                 Cliquez ici pour télécharger l'indice.<br>
                                 b2sum&nbsp;:
                                 <samp class="cksum" title="Somme de contrôle BLAKE2b : {hint.content}">{hint.content}</samp>
diff --git a/frontend/ui/src/components/ExerciceSolved.svelte b/frontend/ui/src/components/ExerciceSolved.svelte
index 6e89e357..a962e08f 100644
--- a/frontend/ui/src/components/ExerciceSolved.svelte
+++ b/frontend/ui/src/components/ExerciceSolved.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <Card class="border-success mb-2">
-    <CardHeader class="bg-success">
+    <CardHeader class="bg-success text-light">
         <Icon name="flag-fill" />
         Défi réussi&nbsp;!
     </CardHeader>
diff --git a/frontend/ui/src/components/ExerciceVideo.svelte b/frontend/ui/src/components/ExerciceVideo.svelte
index 496c3c98..5411f8d6 100644
--- a/frontend/ui/src/components/ExerciceVideo.svelte
+++ b/frontend/ui/src/components/ExerciceVideo.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Card class="border-success mb-2">
-    <CardHeader class="bg-success">
+    <CardHeader class="bg-success text-light">
         <Icon name="laptop-fill" />
         Solution du défi
     </CardHeader>
diff --git a/frontend/ui/src/components/Header.svelte b/frontend/ui/src/components/Header.svelte
index d96f232b..244ebafa 100644
--- a/frontend/ui/src/components/Header.svelte
+++ b/frontend/ui/src/components/Header.svelte
@@ -51,7 +51,8 @@
         <HeaderPartners />
     </Container>
 </div>
-<Navbar class="sticky-top" color="dark" dark expand="md">
+<div class="sticky-top">
+<Navbar color="dark" dark expand="md">
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
         <Nav navbar>
@@ -103,6 +104,7 @@
     </Collapse>
 </Navbar>
 <Progress value={$time.progression * 100} color="info" style="height: 5px; border-radius: 0;" />
+</div>
 
 <style>
  .teamname {
diff --git a/frontend/ui/src/components/ThemeNav.svelte b/frontend/ui/src/components/ThemeNav.svelte
index 54855b7c..9460abb7 100644
--- a/frontend/ui/src/components/ThemeNav.svelte
+++ b/frontend/ui/src/components/ThemeNav.svelte
@@ -12,42 +12,40 @@
  export let exercice = {};
 </script>
 
-<Card body class="mb-3" color="dark">
-    <Breadcrumb listClassName="mb-0">
-        {#each Object.keys(theme.exercices) as k, index}
-            <BreadcrumbItem active={k == exercice.id}>
-                {#if k == exercice.id}
-	            <strong class="text-info">
-		        {theme.exercices[k].title}
-                        {#if theme.exercices[k].curcoeff > 1.0}
-                            <Icon name="gift" aria-hidden="true" />
-                        {/if}
-                        {#if $my && $my.team_id && $my.exercices[k] && $my.exercices[k].solved}
-		            <Icon name="check" class="text-success" aria-hidden="true" />
-                        {/if}
-	            </strong>
-                {:else if $my && $my.exercices[k]}
-	            <a href="/{theme.urlid}/{theme.exercices[k].urlid}" class:text-success={$my.exercices[k].solved}>
-		        {theme.exercices[k].title}
-                        {#if theme.exercices[k].curcoeff > 1.0}
-                            <Icon name="gift" aria-hidden="true" />
-                        {/if}
-                        {#if $my.team_id && $my.exercices[k].solved}
-		            <Icon name="check" class="text-success" aria-hidden="true" />
-                        {/if}
-	            </a>
-                {:else}
-	            <span class="text-muted">
-                        {theme.exercices[k].title}
-                        {#if theme.exercices[k].curcoeff > 1.0}
-                            <Icon name="gift" aria-hidden="true" />
-                        {/if}
-                    </span>
-                {/if}
-            </BreadcrumbItem>
-        {/each}
-    </Breadcrumb>
-</Card>
+<Breadcrumb listClassName="mb-0 px-3 py-2">
+    {#each Object.keys(theme.exercices) as k, index}
+        <BreadcrumbItem active={k == exercice.id}>
+            {#if k == exercice.id}
+	        <strong class="text-info">
+		    {theme.exercices[k].title}
+                    {#if theme.exercices[k].curcoeff > 1.0}
+                        <Icon name="gift" aria-hidden="true" />
+                    {/if}
+                    {#if $my && $my.team_id && $my.exercices[k] && $my.exercices[k].solved}
+		        <Icon name="check" class="text-success" aria-hidden="true" />
+                    {/if}
+	        </strong>
+            {:else if $my && $my.exercices[k]}
+	        <a href="/{theme.urlid}/{theme.exercices[k].urlid}" class:text-success={$my.exercices[k].solved}>
+		    {theme.exercices[k].title}
+                    {#if theme.exercices[k].curcoeff > 1.0}
+                        <Icon name="gift" aria-hidden="true" />
+                    {/if}
+                    {#if $my.team_id && $my.exercices[k].solved}
+		        <Icon name="check" class="text-success" aria-hidden="true" />
+                    {/if}
+	        </a>
+            {:else}
+	        <span class="text-muted">
+                    {theme.exercices[k].title}
+                    {#if theme.exercices[k].curcoeff > 1.0}
+                        <Icon name="gift" aria-hidden="true" />
+                    {/if}
+                </span>
+            {/if}
+        </BreadcrumbItem>
+    {/each}
+</Breadcrumb>
 
 <style>
  a {
diff --git a/frontend/ui/src/fic.scss b/frontend/ui/src/fic.scss
new file mode 100644
index 00000000..ca720b6f
--- /dev/null
+++ b/frontend/ui/src/fic.scss
@@ -0,0 +1,24 @@
+// Your variable overrides can go here, e.g.:
+// $h1-font-size: 3rem;
+$white: white;
+$gray-500: #999;
+$gray-900: #272b30;
+
+$body-bg: $white;
+
+$old-body-bg:                   $gray-900;
+$dropdown-link-hover-bg:            $old-body-bg;
+$card-bg:                           lighten($old-body-bg, 5%);
+$popover-bg:                        lighten($old-body-bg, 5%);
+$toast-background-color:            lighten($old-body-bg, 5%);
+$modal-content-bg:                  lighten($old-body-bg, 5%);
+$list-group-bg:                     lighten($old-body-bg, 5%);
+$list-group-hover-bg:               lighten($old-body-bg, 10%);
+
+$list-group-border-color:           rgba($gray-500, .6);
+
+$enable-print-styles: false;
+
+@import "bootswatch/dist/slate/_variables";
+@import "bootstrap/scss/bootstrap";
+@import "bootswatch/dist/slate/_bootswatch";
diff --git a/frontend/ui/src/routes/[theme]/[exercice].svelte b/frontend/ui/src/routes/[theme]/[exercice].svelte
index f6de6fb8..7edefe51 100644
--- a/frontend/ui/src/routes/[theme]/[exercice].svelte
+++ b/frontend/ui/src/routes/[theme]/[exercice].svelte
@@ -142,16 +142,22 @@
     {#if $my && $my.exercices[exercice.id]}
         <Row class="mt-4">
             {#if $my.exercices[exercice.id].files || $my.exercices[exercice.id].hints}
-                <Col lg class="mb-5">
+                <Col lg="6" class="mb-5">
                 {#if $my.exercices[exercice.id].files}
-                    <ExerciceDownloads files={$my.exercices[exercice.id].files} />
+                    <ExerciceDownloads
+                        files={$my.exercices[exercice.id].files}
+                    />
                 {/if}
                 {#if $my.exercices[exercice.id].hints}
-                    <ExerciceHints hints={$my.exercices[exercice.id].hints} />
+                    <ExerciceHints
+                        {refresh_my}
+                        exercice={$my.exercices[exercice.id]}
+                        hints={$my.exercices[exercice.id].hints}
+                    />
                 {/if}
             </Col>
             {/if}
-            <Col lg class="mb-5">
+            <Col lg="6" class="mb-5">
             {#if !$my.exercices[exercice.id].solved_rank}
                 <ExerciceFlags
                     {refresh_my}
@@ -160,7 +166,10 @@
                     flags={$my.exercices[exercice.id].flags}
                 />
             {:else}
-                <ExerciceSolved theme={theme} exercice={$my.exercices[exercice.id]} />
+                <ExerciceSolved
+                    {theme}
+                    exercice={$my.exercices[exercice.id]}
+                />
             {/if}
             {#if $my.exercices[exercice.id].video_uri}
                 <ExerciceVideo uri={$my.exercices[exercice.id].video_uri} />
diff --git a/frontend/ui/src/routes/[theme]/index.svelte b/frontend/ui/src/routes/[theme]/index.svelte
index 888cc432..ef3e6c23 100644
--- a/frontend/ui/src/routes/[theme]/index.svelte
+++ b/frontend/ui/src/routes/[theme]/index.svelte
@@ -38,13 +38,13 @@
                 on:click={goto(`/${theme.urlid}/${theme.exercices[k].urlid}`)}
             >
                 <div class="row">
-                    <div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved_rank ? '62c462' : 'aaa'}">
+                    <div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved_rank ? '62c462' : 'bbb'}">
                     </div>
                     <div class="col-10">
                         <div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
 	                    <svg style="height: 50px; width: 23px;">
 	                        <rect
-	                            style="fill:#{$my && $my.exercices[k] && (index < 1 || $my.exercices[Object.keys(theme.exercices)[index-1]].solved_rank) ? '62c462' : 'aaa'}"
+	                            style="fill:#{$my && $my.exercices[k] && (index < 1 || ($my.exercices[Object.keys(theme.exercices)[index-1]] && $my.exercices[Object.keys(theme.exercices)[index-1]].solved_rank)) ? '62c462' : 'bbb'}"
 	                            width="5"
 	                            height="30"
 	                            x="10"
diff --git a/frontend/ui/src/routes/__layout.svelte b/frontend/ui/src/routes/__layout.svelte
index 0f65d56c..d1a1c65e 100644
--- a/frontend/ui/src/routes/__layout.svelte
+++ b/frontend/ui/src/routes/__layout.svelte
@@ -105,7 +105,7 @@
 </script>
 
 <script>
- import 'bootstrap/dist/css/bootstrap.min.css';
+ import '../fic.scss'
  import "bootstrap-icons/font/bootstrap-icons.css";
 
  import {
diff --git a/frontend/ui/src/routes/edit.svelte b/frontend/ui/src/routes/edit.svelte
index 88bea7fc..0079db0d 100644
--- a/frontend/ui/src/routes/edit.svelte
+++ b/frontend/ui/src/routes/edit.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <Container class="my-3">
-    <h1>
+    <h1 class="text-dark">
         Votre équipe
         {#if $my}
             <small class="text-muted">{$my.name}</small>
diff --git a/frontend/ui/src/routes/rank.svelte b/frontend/ui/src/routes/rank.svelte
index f542217d..e08442c8 100644
--- a/frontend/ui/src/routes/rank.svelte
+++ b/frontend/ui/src/routes/rank.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Container fluid class="my-3">
-<h1>
+<h1 class="text-dark">
     {$settings.title}
     <small class="text-muted">Classement</small>
 </h1>
diff --git a/frontend/ui/src/routes/rules.svelte b/frontend/ui/src/routes/rules.svelte
index b16c1e27..02d09e19 100644
--- a/frontend/ui/src/routes/rules.svelte
+++ b/frontend/ui/src/routes/rules.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Container class="my-3">
-<h1>
+<h1 class="text-dark">
     {$settings.title}
     <small class="text-muted">Règles générales</small>
 </h1>
diff --git a/frontend/ui/src/routes/tags/[tag].svelte b/frontend/ui/src/routes/tags/[tag].svelte
index e4ddac8c..7a4898a3 100644
--- a/frontend/ui/src/routes/tags/[tag].svelte
+++ b/frontend/ui/src/routes/tags/[tag].svelte
@@ -45,7 +45,7 @@
 </script>
 
 <Container class="mt-3">
-<h1>
+<h1 class="text-dark">
     Challenges <em>{tag}</em>
 </h1>
 
diff --git a/password_paper/dingbat.log b/password_paper/dingbat.log
new file mode 100644
index 00000000..2dcecae8
--- /dev/null
+++ b/password_paper/dingbat.log
@@ -0,0 +1,114 @@
+This is pdfTeX, Version 3.14159265-2.6-1.40.20 (TeX Live 2019 Gentoo Linux) (preloaded format=latex 2019.12.8)  12 DEC 2019 17:23
+entering extended mode
+ restricted \write18 enabled.
+ %&-line parsing enabled.
+**dingbat.ins
+(./dingbat.ins
+LaTeX2e <2018-12-01>
+(/usr/share/texmf-dist/tex/latex/base/docstrip.tex
+\blockLevel=\count80
+\emptyLines=\count81
+\processedLines=\count82
+\commentsRemoved=\count83
+\commentsPassed=\count84
+\codeLinesPassed=\count85
+\TotalprocessedLines=\count86
+\TotalcommentsRemoved=\count87
+\TotalcommentsPassed=\count88
+\TotalcodeLinesPassed=\count89
+\NumberOfFiles=\count90
+\inFile=\read1
+\inputcheck=\read2
+\off@0=\count91
+\off@1=\count92
+\off@2=\count93
+\off@3=\count94
+\off@4=\count95
+\off@5=\count96
+\off@6=\count97
+\off@7=\count98
+\off@8=\count99
+\off@9=\count100
+\off@10=\count101
+\off@11=\count102
+\off@12=\count103
+\off@13=\count104
+\off@14=\count105
+\off@15=\count106
+\@maxfiles=\count107
+\@maxoutfiles=\count108
+
+Utility: `docstrip' 2.5g <2018/05/03>
+English documentation    <2018/05/03>
+
+**********************************************************
+* This program converts documented macro-files into fast *
+* loadable files by stripping off (nearly) all comments! *
+**********************************************************
+
+********************************************************
+* No Configuration file found, using default settings. *
+********************************************************
+
+)
+
+Generating file(s) ./dingbat.sty 
+\openout0 = `./dingbat.sty'.
+
+
+Processing file dingbat.dtx (package) -> dingbat.sty
+Lines  processed: 329
+Comments removed: 277
+Comments  passed: 1
+Codelines passed: 36
+
+
+Generating file(s) ./uark.fd 
+\openout0 = `./uark.fd'.
+
+
+Processing file dingbat.dtx (uarkfd) -> uark.fd
+Lines  processed: 329
+Comments removed: 277
+Comments  passed: 1
+Codelines passed: 36
+
+
+Generating file(s) ./udingbat.fd 
+\openout0 = `./udingbat.fd'.
+
+
+Processing file dingbat.dtx (udingbatfd) -> udingbat.fd
+Lines  processed: 329
+Comments removed: 277
+Comments  passed: 1
+Codelines passed: 36
+
+***********************************************************
+*
+* To finish the installation, you have to move
+* dingbat.sty, uark.fd, ark10.mf, and dingbat.mf into
+* directories searched by TeX.
+*
+* To produce the documentation, run dingbat.dtx
+* through LaTeX.
+*
+* Happy TeXing!
+***********************************************************
+Overall statistics:
+Files  processed: 3
+Lines  processed: 987
+Comments removed: 831
+Comments  passed: 3
+Codelines passed: 108
+ ) 
+Here is how much of TeX's memory you used:
+ 332 strings out of 494525
+ 3336 string characters out of 6176718
+ 60622 words of memory out of 5000000
+ 4103 multiletter control sequences out of 15000+600000
+ 3640 words of font info for 14 fonts, out of 8000000 for 9000
+ 14 hyphenation exceptions out of 8191
+ 11i,0n,15p,152b,129s stack positions out of 5000i,500n,10000p,200000b,80000s
+
+No pages of output.