diff --git a/src/components/project/ClientBrief/AddImagesModal.vue b/src/components/project/ClientBrief/AddImagesModal.vue
index 0dac680..57c4ba1 100644
--- a/src/components/project/ClientBrief/AddImagesModal.vue
+++ b/src/components/project/ClientBrief/AddImagesModal.vue
@@ -15,82 +15,139 @@
           <li>Inspirations</li>
         </ul>
       </nav>
-      <div
-        class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
-        style="--min: 15rem; --gap: 0.5rem"
-      >
-        <FileUpload
-          mode="basic"
-          name="images[]"
-          :url="'/upload-images.json?pageUri=' + page.uri"
-          @upload="onAdvancedUpload($event)"
-          :auto="true"
-          :multiple="true"
-          accept="image/*"
-          :maxFileSize="1000000"
-          invalidFileSizeMessage="Fichier trop lourd"
-          chooseLabel="Ajouter une ou plusieurs images"
-          class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
-        >
-          <template #chooseicon>
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
-                stroke="currentColor"
-                stroke-width="1.25"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </template>
-          <template
-            #content="{
-              files,
-              uploadedFiles,
-              removeUploadedFileCallback,
-              removeFileCallback,
-            }"
+      <div class="with-sidebar | h-full" data-side="right" style="--sidebar-width: 26rem; gap: var(--gap)">
+        <div class="bg-grey-50 | border border-grey-200 | rounded-2xl | p-8 | overflow-y">
+          <div
+            class="auto-grid"
+            style="--min: 15rem; --gap: 0.5rem"
           >
-            <div v-if="files.length > 0">Fichiers importés</div>
-          </template>
-        </FileUpload>
-        <figure class="image">
-          <img
-            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt=""
-          />
-        </figure>
-        <figure class="image">
-          <img
-            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt=""
-          />
-        </figure>
-        <figure class="image">
-          <img
-            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt=""
-          />
-        </figure>
-        <figure class="image">
-          <img
-            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt=""
-          />
-        </figure>
-        <figure class="image">
-          <img
-            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt=""
-          />
-        </figure>
-        <Toast />
+            <FileUpload
+              mode="basic"
+              name="images[]"
+              :url="'/upload-images.json?pageUri=' + page.uri"
+              @upload="onAdvancedUpload($event)"
+              :auto="true"
+              :multiple="true"
+              accept="image/*"
+              :maxFileSize="1000000"
+              invalidFileSizeMessage="Fichier trop lourd"
+              chooseLabel="Ajouter une ou plusieurs images"
+              class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
+            >
+              <template #chooseicon>
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
+                    stroke="currentColor"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </template>
+              <template
+                #content="{
+                  files,
+                  uploadedFiles,
+                  removeUploadedFileCallback,
+                  removeFileCallback,
+                }"
+              >
+                <div v-if="files.length > 0">Fichiers importés</div>
+              </template>
+            </FileUpload>
+            <figure class="image">
+              <img
+                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt=""
+              />
+            </figure>
+            <figure class="image">
+              <img
+                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt=""
+              />
+            </figure>
+            <figure class="image">
+              <img
+                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt=""
+              />
+            </figure>
+            <figure class="image">
+              <img
+                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt=""
+              />
+            </figure>
+            <figure class="image">
+              <img
+                src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt=""
+              />
+            </figure>
+            <Toast />
+          </div>
+        </div>
+        <div class="flex flex-col items-start | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8">
+          <Accordion value="0" class="flex flex-col" style="--row-gap:var(--space-8)">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value" class="w-full | bg-white | rounded-xl | p-12 pt-8">
+              <AccordionHeader>
+                <span class="badge">{{ tab.title }}</span>
+              </AccordionHeader>
+              <AccordionContent>
+                <div class="image-details__description | my-16">
+                  <label
+                    for="image-description"
+                    class="flex | text-sm text-grey-700 | mb-8"
+                    >Description</label
+                  >
+                  <textarea
+                    name="image-description"
+                    id="image-description"
+                    placeholder="Ajoutez une description à cette image…"
+                    rows="3"
+                    class="border border-grey-200 | rounded-xl | p-16 | w-full"
+                    @input="saveDescription()"
+                  ></textarea>
+                </div>
+                <fieldset class="image-details__filters | flex-1">
+                  <legend class="text-sm text-grey-700 | mb-8">Sélectionner un ou plusieurs tags</legend>
+                  <div class="flex" style="gap: var(--space-8)">
+                    <template v-for="tag in ['Parachèvements', 'Forme & Design', 'Matériaux & Textures', 'Coloris & Nuances']" :key="tag">
+                      <input
+                        class="sr-only"
+                        type="checkbox"
+                        :id="`${tag}`"
+                        :name="`${tag}`"
+                        :value="`${tag}`"
+                        v-model="localSelectedTags"
+                      />
+                      <label class="btn btn--sm btn--primary" :for="`${tag}`">{{ tag }}</label>
+                    </template>
+                  </div>
+                </fieldset>
+              </AccordionContent>
+            </AccordionPanel>
+            <template #collapseicon>
+              <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(180deg)">
+                <path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </template>
+            <template #expandicon>
+              <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625" stroke="#5E6060" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </template>
+          </Accordion>
+          <button class="btn | w-full | mt-auto">Ajouter les images sélectionnées</button>
+        </div>
       </div>
     </div>
   </Dialog>
@@ -101,6 +158,10 @@ import Dialog from "primevue/dialog";
 import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import FileUpload from "primevue/fileupload";
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
 import { usePageStore } from "../../../stores/page";
 import { ref, watch } from "vue";
 
@@ -116,6 +177,25 @@ const isOpen = ref(isAddImagesModalOpen);
 watch(isOpen, (newValue) => {
   emit("close");
 });
+
+const tabs = [
+  {
+    "title": "1",
+    "value": "0"
+  },
+  {
+    "title": "2",
+    "value": "1"
+  },
+  {
+    "title": "3",
+    "value": "2"
+  },
+  {
+    "title": "4",
+    "value": "3"
+  }
+]
 </script>
 
 <style>
@@ -174,4 +254,18 @@ watch(isOpen, (newValue) => {
   width: 1.5rem;
   height: 1.5rem;
 }
+
+.with-sidebar[data-side="right"] > * {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Accordion */
+[data-pc-name="accordionheader"] {
+  height: var(--space-40);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>