diff --git a/resources/img/icons/button-arrow-down-small.svg b/resources/img/icons/button-arrow-down-small.svg
new file mode 100644
index 0000000..11944fb
--- /dev/null
+++ b/resources/img/icons/button-arrow-down-small.svg
@@ -0,0 +1,12 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2159_20039)">
+<path d="M14.5469 20.4253L14.5469 10.5" stroke="#136F63" stroke-width="2"/>
+<path d="M8.53276 14.1263L14.5536 20.4253L20.5684 14.1263" stroke="#136F63" stroke-width="2"/>
+</g>
+<circle cx="15" cy="15" r="14" transform="rotate(90 15 15)" stroke="#136F63" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_2159_20039">
+<rect width="10.8" height="12.9" fill="white" transform="translate(21 10.5) rotate(90)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-document.svg b/resources/img/icons/carhop-document.svg
new file mode 100644
index 0000000..69ee81a
--- /dev/null
+++ b/resources/img/icons/carhop-document.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="document" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.1 42.76">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="1 1 27.02 1 34.1 8.08 34.1 41.76 1 41.76 1 1"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-ecouter.svg b/resources/img/icons/carhop-ecouter.svg
new file mode 100644
index 0000000..c2e3ce3
--- /dev/null
+++ b/resources/img/icons/carhop-ecouter.svg
@@ -0,0 +1,14 @@
+<svg width="29" height="27" viewBox="0 0 29 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1459_14383)">
+<path d="M14.1953 0V27" stroke="white" stroke-width="2"/>
+<path d="M7.93359 5.05997V21.9333" stroke="white" stroke-width="2"/>
+<path d="M0.691406 10.3231V16.6769" stroke="white" stroke-width="2"/>
+<path d="M21.0664 5.05997V21.9333" stroke="white" stroke-width="2"/>
+<path d="M28.3086 10.3231V16.6769" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_1459_14383">
+<rect width="29" height="27" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-lien.svg b/resources/img/icons/carhop-lien.svg
new file mode 100644
index 0000000..29e154f
--- /dev/null
+++ b/resources/img/icons/carhop-lien.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="imprimer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.12 20.12">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M9.01,3.56l1-1c2.08-2.08,5.46-2.08,7.55,0h0c2.08,2.08,2.08,5.46,0,7.55l-4.65,4.65-3.07-3.07"/>
+  <path class="cls-1" d="M11.11,16.56l-1,1c-2.08,2.08-5.46,2.08-7.55,0h0c-2.08-2.08-2.08-5.46,0-7.55l4.65-4.65,3.18,3.18"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-note-biographique.svg b/resources/img/icons/carhop-note-biographique.svg
new file mode 100644
index 0000000..4657d55
--- /dev/null
+++ b/resources/img/icons/carhop-note-biographique.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="note-biographique" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.99 42.47">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="5.63 36.84 13.89 36.84 31.99 18.74 31.99 2.41 5.63 28.78 5.63 36.84"/>
+  <line class="cls-1" x1=".71" y1="41.76" x2="12.86" y2="29.61"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-notes.svg b/resources/img/icons/carhop-notes.svg
new file mode 100644
index 0000000..58ad2e8
--- /dev/null
+++ b/resources/img/icons/carhop-notes.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="notes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.22 35.69">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="18.11" cy="17.81" r="16.72"/>
+  <rect class="cls-1" x="14.06" y="14.09" width="8.08" height="8.08" transform="translate(-7.51 18.11) rotate(-45)"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-pause.svg b/resources/img/icons/carhop-pause.svg
new file mode 100644
index 0000000..cbc3618
--- /dev/null
+++ b/resources/img/icons/carhop-pause.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1459_14367)">
+<path d="M0.941406 0V23" stroke="#136F63" stroke-width="2"/>
+<path d="M15.0586 0V23" stroke="#136F63" stroke-width="2"/>
+</g>
+</svg>
diff --git a/resources/img/icons/carhop-plan.svg b/resources/img/icons/carhop-plan.svg
new file mode 100644
index 0000000..ee5db64
--- /dev/null
+++ b/resources/img/icons/carhop-plan.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="plan" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.12 36.42">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <line class="cls-1" x1="34.12" y1="12.47" x2="0" y2="12.47"/>
+  <line class="cls-1" x1="34.12" y1="35.42" x2="0" y2="35.42"/>
+  <line class="cls-1" x1="24.62" y1="1" x2="0" y2="1"/>
+  <line class="cls-1" x1="24.62" y1="23.95" x2="0" y2="23.95"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-plume-white.svg b/resources/img/icons/carhop-plume-white.svg
new file mode 100644
index 0000000..d39e5de
--- /dev/null
+++ b/resources/img/icons/carhop-plume-white.svg
@@ -0,0 +1,12 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1328_11789)">
+<path d="M24.6411 4.88879L22.2345 6.53778V15.3777L7.16797 23.8166L8.99849 7.32024L16.9158 3.09753L17.0438 0.0258789" stroke="white" stroke-width="2"/>
+<path d="M7.16797 23.8166L13.4084 14.3753" stroke="white" stroke-width="2"/>
+<path d="M0 24.3533H7.16846" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_1328_11789">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-plume.svg b/resources/img/icons/carhop-plume.svg
new file mode 100644
index 0000000..15febf0
--- /dev/null
+++ b/resources/img/icons/carhop-plume.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="plume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.06 38.66">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polyline class="cls-1" points="38.5 7.56 34.74 10.11 34.74 23.78 11.2 36.83 14.06 11.32 26.43 4.79 26.63 .04"/>
+  <line class="cls-1" x1="11.2" y1="36.83" x2="20.95" y2="22.23"/>
+  <line class="cls-1" y1="37.66" x2="11.2" y2="37.66"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-rechercher-green-circle.svg b/resources/img/icons/carhop-rechercher-green-circle.svg
new file mode 100644
index 0000000..9f01070
--- /dev/null
+++ b/resources/img/icons/carhop-rechercher-green-circle.svg
@@ -0,0 +1,12 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_420_14310)">
+<path d="M22.2969 22.9976L26.6451 27.3529" stroke="#136F63" stroke-width="2"/>
+<path d="M17.1329 25.1788C21.2341 25.1788 24.5588 21.7151 24.5588 17.4423C24.5588 13.1696 21.2341 9.70587 17.1329 9.70587C13.0317 9.70587 9.70703 13.1696 9.70703 17.4423C9.70703 21.7151 13.0317 25.1788 17.1329 25.1788Z" stroke="#136F63" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<circle cx="18" cy="18" r="17" stroke="#136F63" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_420_14310">
+<rect width="18.1482" height="18.8541" fill="white" transform="translate(9 9)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-rechercher-green.svg b/resources/img/icons/carhop-rechercher-green.svg
new file mode 100644
index 0000000..a4ad0d0
--- /dev/null
+++ b/resources/img/icons/carhop-rechercher-green.svg
@@ -0,0 +1,11 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_420_14311)">
+<path d="M13.2969 13.9976L17.6451 18.3529" stroke="#136F63" stroke-width="2"/>
+<path d="M8.13291 16.1788C12.2341 16.1788 15.5588 12.7151 15.5588 8.44234C15.5588 4.16961 12.2341 0.705872 8.13291 0.705872C4.03171 0.705872 0.707031 4.16961 0.707031 8.44234C0.707031 12.7151 4.03171 16.1788 8.13291 16.1788Z" stroke="#136F63" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_420_14311">
+<rect width="18.1482" height="18.8541" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-rechercher-special.svg b/resources/img/icons/carhop-rechercher-special.svg
new file mode 100644
index 0000000..3335d8a
--- /dev/null
+++ b/resources/img/icons/carhop-rechercher-special.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1328_11790)">
+<path d="M17.5859 18.5605L23.3362 24.3354" stroke="white" stroke-width="2"/>
+<path d="M10.7539 21.4526C16.1775 21.4526 20.5742 16.8598 20.5742 11.1943C20.5742 5.52879 16.1775 0.935974 10.7539 0.935974C5.33029 0.935974 0.933594 5.52879 0.933594 11.1943C0.933594 16.8598 5.33029 21.4526 10.7539 21.4526Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M10.7556 6.68164L6.25391 11.1954L10.7556 15.7091L15.2573 11.1954L10.7556 6.68164Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_1328_11790">
+<rect width="24" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/img/icons/carhop-reset-search-cross-green.svg b/resources/img/icons/carhop-reset-search-cross-green.svg
new file mode 100644
index 0000000..2585f88
--- /dev/null
+++ b/resources/img/icons/carhop-reset-search-cross-green.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="17" stroke="#136F63" stroke-width="2"/>
+<path d="M11.8828 25L26.0005 11" stroke="#136F63" stroke-width="2"/>
+<path d="M25.1172 25L10.9995 11" stroke="#136F63" stroke-width="2"/>
+</svg>
diff --git a/resources/img/icons/carhop-resume.svg b/resources/img/icons/carhop-resume.svg
new file mode 100644
index 0000000..4b0ac47
--- /dev/null
+++ b/resources/img/icons/carhop-resume.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="resume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.12 36.42">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <line class="cls-1" x1="34.12" y1="12.47" x2="9.41" y2="12.47"/>
+  <line class="cls-1" x1="34.12" y1="35.42" x2="9.41" y2="35.42"/>
+  <line class="cls-1" x1="24.62" y1="1" y2="1"/>
+  <line class="cls-1" x1="27.24" y1="23.95" x2="9.41" y2="23.95"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/carhop-stop-reading.svg b/resources/img/icons/carhop-stop-reading.svg
new file mode 100644
index 0000000..d8c39b4
--- /dev/null
+++ b/resources/img/icons/carhop-stop-reading.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect width="16" height="16" style="fill: #fff;"/>
+</svg>
\ No newline at end of file
diff --git a/resources/img/icons/cite-icon.svg b/resources/img/icons/cite-icon.svg
new file mode 100644
index 0000000..25fc4d6
--- /dev/null
+++ b/resources/img/icons/cite-icon.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48 46.125L0 48V0L48 1.96875V46.125Z" fill="#136F63"/>
+</svg>
diff --git a/resources/img/icons/icon-activites.svg b/resources/img/icons/icon-activites.svg
new file mode 100644
index 0000000..f4463eb
--- /dev/null
+++ b/resources/img/icons/icon-activites.svg
@@ -0,0 +1 @@
+<svg width="33.243" xmlns="http://www.w3.org/2000/svg" height="33.243" id="screenshot-a2556a6c-3214-8099-8006-165931dde031" viewBox="-0.121 -0.121 33.243 33.243" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde031" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-a2556a6c-3214-8099-8006-165931dde032" style="display: none;"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde032"><rect width="32.99999999999818" height="32.997226940004225" x="-0.000010239060429739766" transform="matrix(0.999973, 0.007385, -0.007385, 0.999973, 0.122307, -0.121397)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" fill="none" rx="0" y="0.0027730221845558845"/></g></g><g id="shape-a2556a6c-3214-8099-8006-165931dde033"/><g id="shape-a2556a6c-3214-8099-8006-165931dde034"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde034"><rect width="28.870975068950884" height="17.792708437504757" class="cls-1" x="2.0645861314221747" transform="matrix(0.712339, -0.701836, 0.701896, 0.712280, -6.833029, 16.326982)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" rx="0" y="7.601056546915743"/></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/img/icons/open-close-arrow-button.svg b/resources/img/icons/open-close-arrow-button.svg
new file mode 100644
index 0000000..574fe8d
--- /dev/null
+++ b/resources/img/icons/open-close-arrow-button.svg
@@ -0,0 +1,4 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 22.5C1 10.6259 10.6259 1 22.5 1C34.3741 1 44 10.6259 44 22.5C44 34.3741 34.3741 44 22.5 44C10.6259 44 1 34.3741 1 22.5Z" stroke="white" stroke-width="2"/>
+<path d="M13.5 18.4499L22.2518 26.9999L31.5 18.45" stroke="white" stroke-width="2"/>
+</svg>