diff --git a/Everywhen/src/css/conditional-visibility.css b/Everywhen/src/css/conditional-visibility.css
new file mode 100644
index 0000000000..53b3c834f3
--- /dev/null
+++ b/Everywhen/src/css/conditional-visibility.css
@@ -0,0 +1,85 @@
+/* TABS */
+/* configure the tab buttons */
+.pc-core,
+.npc-core,
+.journal,
+.spells,
+.configuration {
+    display: none;
+}
+
+/* style the active button */
+
+.tabstoggle[value="character"] ~ div .button0,
+.tabstoggle[value="journal"] ~ div .button1 ,
+.tabstoggle[value="spells"] ~ div .button2 ,
+.tabstoggle[value="configuration"] ~ div .button3 {
+    border-color : darkred;
+    color: darkred;
+    font-weight: bold;
+}
+
+/* show the selected tab */
+.tabstoggle[value="character"] ~ .charactertoogle[value="pc"] ~ div.pc-core,
+.tabstoggle[value="character"] ~ .charactertoogle[value="npc"] ~ div.npc-core,
+.tabstoggle[value="journal"] ~ div.journal,
+.tabstoggle[value="spells"] ~ div.spells,
+.tabstoggle[value="configuration"] ~ div.configuration {
+    display: flex;
+}
+
+/* Options */
+
+/* OPTIONS FLAGS */
+.options-flag ~ .options-display {
+    display: flex !important;
+}
+
+.options-flag ~ .options-options {
+    background-color: #CCC;
+    border: 1px dotted #999;
+    padding: .5rem;
+    display: none !important;
+}
+
+.options-flag:checked ~ .options-options {
+    display: flex !important;
+}
+
+.options-flag:checked ~ .options-display {
+    display: none !important;
+}
+
+.options-flag,
+.options-flag + span {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 18px !important;
+    height: 18px !important;
+}
+
+.options-flag + span {
+    white-space: nowrap;
+    font-size: 20px;
+    font-family: pictos;
+    color: #A0A0A0;
+    cursor: pointer;
+    margin-top: 0px;
+    display: none;
+}
+
+.options-flag {
+    opacity: 0;
+    z-index: 10;
+}
+
+.hoverable{
+    position: relative;
+}
+.hoverable:hover > .options-flag,
+.hoverable:hover > .options-flag + span{
+    display: block;
+}
+
+/* Modifiers Conditional Visibility */
\ No newline at end of file
diff --git a/Everywhen/src/css/frames.css b/Everywhen/src/css/frames.css
index df129ace17..a4614e892d 100644
--- a/Everywhen/src/css/frames.css
+++ b/Everywhen/src/css/frames.css
@@ -3,4 +3,4 @@
     background-color: lightgray;
     padding: 0.5rem;
     border-radius : 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/Everywhen/src/css/general-inputs.css b/Everywhen/src/css/general-inputs.css
index 7207689637..bef70f3d16 100644
--- a/Everywhen/src/css/general-inputs.css
+++ b/Everywhen/src/css/general-inputs.css
@@ -31,6 +31,13 @@ input{
     border-radius: 0.75rem;
     padding: 0.35rem;
 }
+.white-roll{
+    background: white;
+    border-radius: 0.75rem;
+}
+.white-roll::before{
+    content:""
+}
 /* Labels */
 .centered{
     text-align: center;
@@ -54,7 +61,12 @@ input{
     background-color: lightgray;
     padding: 0.25rem 0.5rem;
     width: fit-content;
+    z-index: 20;
 }
 .title + input{
     padding-top: .75rem;
+}
+
+.boons{
+    margin-top: 1.25rem;
 }
\ No newline at end of file
diff --git a/Everywhen/src/css/main.css b/Everywhen/src/css/main.css
index a974ccd2cd..8fe6e759ad 100644
--- a/Everywhen/src/css/main.css
+++ b/Everywhen/src/css/main.css
@@ -12,6 +12,7 @@
         box-sizing: border-box !important;
     }
 
+    /*=include conditional-visibility.css */
     /*=include general-inputs.css */
     /*=include flex.css */
     /*=include frames.css */
diff --git a/Everywhen/src/html/components/boons.html b/Everywhen/src/html/components/boons.html
new file mode 100644
index 0000000000..06486ac1af
--- /dev/null
+++ b/Everywhen/src/html/components/boons.html
@@ -0,0 +1,26 @@
+
+<div class="boons">
+    <fieldset class="repeating_boons">
+        <div class="hoverable flex-column">
+            <input class="options-flag" type="checkbox" name="attr_options-flag" checked><span>y</span>
+            <div class="flex-row align-center">
+                <input type="hidden" name="attr_boon_rollvalue"
+                       value="&{template:main} {{titre=Attaque avec @{name}}} {{subtitle=@{character_name}}}">
+                <button type="roll" name="attr_boon_roll" value="@{boon_rollvalue}"
+                        class="flex-row bold w-12 white-roll">
+                    <span class="w-12" name="attr_name"></span>
+                </button>
+            </div>
+            <div class="flex-column options-options option-frame">
+                <div class="flex-row align-center">
+                    <label class="attq-label w-3"><span data-i18n="common.name">Name</span></label>
+                    <input type="text" class="visible-input text-left w-9" name="attr_name">
+                </div>
+                <div class="flex-column w-12">
+                    <label class="skill-label w-3"><span data-i18n="common.description">Description</span></label>
+                    <input type="text" class="visible-input w-12" name="attr_notes">
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>
\ No newline at end of file
diff --git a/Everywhen/src/html/pc.html b/Everywhen/src/html/pc.html
index bd7247a9ea..66adb85db5 100644
--- a/Everywhen/src/html/pc.html
+++ b/Everywhen/src/html/pc.html
@@ -228,7 +228,7 @@
         <div class="flex-column w-6">
             <div class="flex-column frame">
                 <label class="title label"><span data-i18n="resources.boons">Boons</span></label>
-                <input type="text" class="input w-12" name="attr_boons"></input>
+                <!--=include components/boons.html -->
             </div>
             <div class="flex-column frame">
                 <label class="title label"><span data-i18n="resources.flaws">Flaws</span></label>
diff --git a/Everywhen/translation.json b/Everywhen/translation.json
index ac485428fa..8b7620902a 100644
--- a/Everywhen/translation.json
+++ b/Everywhen/translation.json
@@ -1,5 +1,7 @@
 {
   "common.name": "Name",
+  "common.description": "Description",
+  "common.notes": "Notes",
   "common.languages": "Languages",
   "attributes.strength": "Strength",
   "attributes.agility": "Agility",