diff --git a/front/src/assets/css/main.css b/front/src/assets/css/main.css
index ba651e2..cfd6aa5 100644
--- a/front/src/assets/css/main.css
+++ b/front/src/assets/css/main.css
@@ -8,6 +8,14 @@
     --tertiary-background: #2a2a33;
     --quaternary-background: #303a46;
     --selected: #41474f;
+
+    --border-color: #505050;
+
+    --svg-primary-text: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1934%) hue-rotate(130deg)
+        brightness(114%) contrast(100%);
+
+    --svg-selected: brightness(0) saturate(100%) invert(22%) sepia(1%) saturate(7429%) hue-rotate(175deg)
+        brightness(79%) contrast(69%);
     /* 343a46 */
 }
-/* .badge-primary { */
\ No newline at end of file
+/* .badge-primary { */
diff --git a/front/src/assets/svg/add-line.svg b/front/src/assets/svg/add-line.svg
new file mode 100644
index 0000000..07d1d19
--- /dev/null
+++ b/front/src/assets/svg/add-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/align-center.svg b/front/src/assets/svg/align-center.svg
new file mode 100644
index 0000000..bbd8da2
--- /dev/null
+++ b/front/src/assets/svg/align-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM5 19H19V21H5V19ZM3 14H21V16H3V14ZM5 9H19V11H5V9Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/align-justify.svg b/front/src/assets/svg/align-justify.svg
new file mode 100644
index 0000000..e5c4f55
--- /dev/null
+++ b/front/src/assets/svg/align-justify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM3 19H21V21H3V19ZM3 14H21V16H3V14ZM3 9H21V11H3V9Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/align-left.svg b/front/src/assets/svg/align-left.svg
new file mode 100644
index 0000000..5e29536
--- /dev/null
+++ b/front/src/assets/svg/align-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM3 19H17V21H3V19ZM3 14H21V16H3V14ZM3 9H17V11H3V9Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/align-right.svg b/front/src/assets/svg/align-right.svg
new file mode 100644
index 0000000..21b49dd
--- /dev/null
+++ b/front/src/assets/svg/align-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/attachment-2.svg b/front/src/assets/svg/attachment-2.svg
new file mode 100644
index 0000000..9b90e09
--- /dev/null
+++ b/front/src/assets/svg/attachment-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14.8287 7.7574L9.1718 13.4143C8.78127 13.8048 8.78127 14.4379 9.1718 14.8285C9.56232 15.219 10.1955 15.219 10.586 14.8285L16.2429 9.17161C17.4144 8.00004 17.4144 6.10055 16.2429 4.92897C15.0713 3.7574 13.1718 3.7574 12.0002 4.92897L6.34337 10.5858C4.39075 12.5384 4.39075 15.7043 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4143L14.8287 19.0711C12.095 21.8048 7.66283 21.8048 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17161L10.586 3.51476C12.5386 1.56214 15.7045 1.56214 17.6571 3.51476C19.6097 5.46738 19.6097 8.63321 17.6571 10.5858L12.0002 16.2427C10.8287 17.4143 8.92916 17.4143 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34319L14.8287 7.7574Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/attachment-line.svg b/front/src/assets/svg/attachment-line.svg
new file mode 100644
index 0000000..ec5bc18
--- /dev/null
+++ b/front/src/assets/svg/attachment-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14 13.5V8C14 5.79086 12.2091 4 10 4C7.79086 4 6 5.79086 6 8V13.5C6 17.0899 8.91015 20 12.5 20C16.0899 20 19 17.0899 19 13.5V4H21V13.5C21 18.1944 17.1944 22 12.5 22C7.80558 22 4 18.1944 4 13.5V8C4 4.68629 6.68629 2 10 2C13.3137 2 16 4.68629 16 8V13.5C16 15.433 14.433 17 12.5 17C10.567 17 9 15.433 9 13.5V8H11V13.5C11 14.3284 11.6716 15 12.5 15C13.3284 15 14 14.3284 14 13.5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/bold.svg b/front/src/assets/svg/bold.svg
new file mode 100644
index 0000000..90a2733
--- /dev/null
+++ b/front/src/assets/svg/bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.11929 13.8807 6 12.5 6H8V11ZM18 15.5C18 17.9853 15.9853 20 13.5 20H6V4H12.5C14.9853 4 17 6.01472 17 8.5C17 9.70431 16.5269 10.7981 15.7564 11.6058C17.0979 12.3847 18 13.837 18 15.5ZM8 13V18H13.5C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13H8Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/delete-bin-4-line.svg b/front/src/assets/svg/delete-bin-4-line.svg
new file mode 100644
index 0000000..05ba7d9
--- /dev/null
+++ b/front/src/assets/svg/delete-bin-4-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M20 7V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V7H2V5H22V7H20ZM6 7V20H18V7H6ZM7 2H17V4H7V2ZM11 10H13V17H11V10Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/delete-bin-6-line.svg b/front/src/assets/svg/delete-bin-6-line.svg
new file mode 100644
index 0000000..1a51d34
--- /dev/null
+++ b/front/src/assets/svg/delete-bin-6-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/flag-2-line.svg b/front/src/assets/svg/flag-2-line.svg
new file mode 100644
index 0000000..3a66be8
--- /dev/null
+++ b/front/src/assets/svg/flag-2-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21.1384 3C21.4146 3 21.6385 3.22386 21.6385 3.5C21.6385 3.58701 21.6157 3.67252 21.5725 3.74807L18 10L21.5725 16.2519C21.7095 16.4917 21.6262 16.7971 21.3865 16.9341C21.3109 16.9773 21.2254 17 21.1384 17H4V22H2V3H21.1384ZM18.5536 5H4V15H18.5536L15.6965 10L18.5536 5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/flag-line.svg b/front/src/assets/svg/flag-line.svg
new file mode 100644
index 0000000..a6175a5
--- /dev/null
+++ b/front/src/assets/svg/flag-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.382 3C12.7607 3 13.107 3.214 13.2764 3.55279L14 5H20C20.5523 5 21 5.44772 21 6V17C21 17.5523 20.5523 18 20 18H13.618C13.2393 18 12.893 17.786 12.7236 17.4472L12 16H5V22H3V3H12.382ZM11.7639 5H5V14H13.2361L14.2361 16H19V7H12.7639L11.7639 5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/font-color.svg b/front/src/assets/svg/font-color.svg
new file mode 100644
index 0000000..443dc7b
--- /dev/null
+++ b/front/src/assets/svg/font-color.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.2459 14H8.75407L7.15407 18H5L11 3H13L19 18H16.8459L15.2459 14ZM14.4459 12L12 5.88516L9.55407 12H14.4459ZM3 20H21V22H3V20Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/indent-decrease.svg b/front/src/assets/svg/indent-decrease.svg
new file mode 100644
index 0000000..0603240
--- /dev/null
+++ b/front/src/assets/svg/indent-decrease.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM3 19H21V21H3V19ZM11 14H21V16H11V14ZM11 9H21V11H11V9ZM3 12.5L7 9V16L3 12.5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/indent-increase.svg b/front/src/assets/svg/indent-increase.svg
new file mode 100644
index 0000000..f467fa8
--- /dev/null
+++ b/front/src/assets/svg/indent-increase.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM3 19H21V21H3V19ZM11 14H21V16H11V14ZM11 9H21V11H11V9ZM7 12.5L3 16V9L7 12.5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/italic.svg b/front/src/assets/svg/italic.svg
new file mode 100644
index 0000000..39ca871
--- /dev/null
+++ b/front/src/assets/svg/italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15 20H7V18H9.92661L12.0425 6H9V4H17V6H14.0734L11.9575 18H15V20Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/link.svg b/front/src/assets/svg/link.svg
new file mode 100644
index 0000000..4142c41
--- /dev/null
+++ b/front/src/assets/svg/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75766 14.8282L14.8287 7.75717Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/list-check-2.svg b/front/src/assets/svg/list-check-2.svg
new file mode 100644
index 0000000..9848fdf
--- /dev/null
+++ b/front/src/assets/svg/list-check-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M11 4H21V6H11V4ZM11 8H17V10H11V8ZM11 14H21V16H11V14ZM11 18H17V20H11V18ZM3 4H9V10H3V4ZM5 6V8H7V6H5ZM3 14H9V20H3V14ZM5 16V18H7V16H5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/list-check.svg b/front/src/assets/svg/list-check.svg
new file mode 100644
index 0000000..6c19717
--- /dev/null
+++ b/front/src/assets/svg/list-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/list-ordered.svg b/front/src/assets/svg/list-ordered.svg
new file mode 100644
index 0000000..de0a84d
--- /dev/null
+++ b/front/src/assets/svg/list-ordered.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/list-unordered.svg b/front/src/assets/svg/list-unordered.svg
new file mode 100644
index 0000000..718b17a
--- /dev/null
+++ b/front/src/assets/svg/list-unordered.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-add-line.svg b/front/src/assets/svg/mail-add-line.svg
new file mode 100644
index 0000000..c623235
--- /dev/null
+++ b/front/src/assets/svg/mail-add-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22 13H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM21 18H24V20H21V23H19V20H16V18H19V15H21V18Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-check-line.svg b/front/src/assets/svg/mail-check-line.svg
new file mode 100644
index 0000000..3e80461
--- /dev/null
+++ b/front/src/assets/svg/mail-check-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22 14H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V14ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-line.svg b/front/src/assets/svg/mail-line.svg
new file mode 100644
index 0000000..54c860e
--- /dev/null
+++ b/front/src/assets/svg/mail-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-open-line.svg b/front/src/assets/svg/mail-open-line.svg
new file mode 100644
index 0000000..0119f78
--- /dev/null
+++ b/front/src/assets/svg/mail-open-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M2.24283 6.85419L11.4895 1.30843C11.8062 1.11848 12.2019 1.11855 12.5185 1.30862L21.7573 6.85416C21.9079 6.94453 22 7.10726 22 7.28286V19.9998C22 20.5521 21.5523 20.9998 21 20.9998H3C2.44772 20.9998 2 20.5521 2 19.9998V7.28298C2 7.10732 2.09218 6.94454 2.24283 6.85419ZM4 8.13244V18.9998H20V8.13197L12.0037 3.33221L4 8.13244ZM12.0597 13.6981L17.3556 9.23515L18.6444 10.7645L12.074 16.3016L5.36401 10.7715L6.63599 9.22813L12.0597 13.6981Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-send-line.svg b/front/src/assets/svg/mail-send-line.svg
new file mode 100644
index 0000000..d4b3f56
--- /dev/null
+++ b/front/src/assets/svg/mail-send-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-star-line.svg b/front/src/assets/svg/mail-star-line.svg
new file mode 100644
index 0000000..5714594
--- /dev/null
+++ b/front/src/assets/svg/mail-star-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22 13H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19.5 21.75L16.855 23.1406L17.3601 20.1953L15.2202 18.1094L18.1775 17.6797L19.5 15L20.8225 17.6797L23.7798 18.1094L21.6399 20.1953L22.145 23.1406L19.5 21.75Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/mail-unread-line.svg b/front/src/assets/svg/mail-unread-line.svg
new file mode 100644
index 0000000..a206365
--- /dev/null
+++ b/front/src/assets/svg/mail-unread-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16.1 3C16.0344 3.32311 16 3.65753 16 4C16 4.34247 16.0344 4.67689 16.1 5H4.51146L12.0619 11.662L17.1098 7.14141C17.5363 7.66888 18.0679 8.10787 18.6728 8.42652L12.0718 14.338L4 7.21594V19H20V8.89998C20.3231 8.96557 20.6575 9 21 9C21.3425 9 21.6769 8.96557 22 8.89998V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H16.1ZM21 1C22.6569 1 24 2.34315 24 4C24 5.65685 22.6569 7 21 7C19.3431 7 18 5.65685 18 4C18 2.34315 19.3431 1 21 1Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/menu-add-line.svg b/front/src/assets/svg/menu-add-line.svg
new file mode 100644
index 0000000..f5abcee
--- /dev/null
+++ b/front/src/assets/svg/menu-add-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M18 15L17.999 18H21V20H17.999L18 23H16L15.999 20H13V18H15.999L16 15H18ZM11 18V20H3V18H11ZM21 11V13H3V11H21ZM21 4V6H3V4H21Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/menu-line.svg b/front/src/assets/svg/menu-line.svg
new file mode 100644
index 0000000..3830940
--- /dev/null
+++ b/front/src/assets/svg/menu-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/reply-all-line.svg b/front/src/assets/svg/reply-all-line.svg
new file mode 100644
index 0000000..02e5ae8
--- /dev/null
+++ b/front/src/assets/svg/reply-all-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M14 4.5V9C19.5228 9 24 13.4772 24 19C24 19.2727 23.9891 19.5428 23.9677 19.81C22.5055 17.0364 19.6381 15.119 16.313 15.0053L16 15H13.9999L14 19.5L6 12L14 4.5ZM8 4.5V7.237L2.92 12L7.999 16.761L8 19.5L0 12L8 4.5ZM12 9.11646L8.92423 12L11.9999 14.8834L11.9999 13L16.0341 13.0003L16.3814 13.0065C17.6657 13.0504 18.9053 13.3165 20.0568 13.7734C18.5898 12.0749 16.4204 11 14 11H12V9.11646Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/reply-line.svg b/front/src/assets/svg/reply-line.svg
new file mode 100644
index 0000000..b0a39c0
--- /dev/null
+++ b/front/src/assets/svg/reply-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2727 20.9891 19.5428 20.9677 19.81C19.5055 17.0364 16.6381 15.119 13.313 15.0053L13 15H10.9999L11 20ZM8.99986 13H10.9999L13.0341 13.0003L13.3814 13.0065C14.6657 13.0504 15.9053 13.3165 17.0568 13.7734C15.5898 12.0749 13.4204 11 11 11H9V8.16125L4.20156 12L8.99992 15.8387L8.99986 13Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/send-plane-line.svg b/front/src/assets/svg/send-plane-line.svg
new file mode 100644
index 0000000..8b5ae32
--- /dev/null
+++ b/front/src/assets/svg/send-plane-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21.7264 2.95706L16.2732 22.0433C16.1222 22.5718 15.7976 22.5958 15.5561 22.1127L10.9998 13.0002L1.92266 9.36931C1.41298 9.16544 1.41929 8.86034 1.9567 8.6812L21.0429 2.31913C21.5714 2.14297 21.8745 2.43878 21.7264 2.95706ZM19.0351 5.0966L6.81197 9.17097L12.4486 11.4256L15.4893 17.507L19.0351 5.0966Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/share-forward-line.svg b/front/src/assets/svg/share-forward-line.svg
new file mode 100644
index 0000000..d4fee0c
--- /dev/null
+++ b/front/src/assets/svg/share-forward-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V2.5L23.5 11L13 19.5V14ZM11 12H15V15.3078L20.3214 11L15 6.69224V10H13C10.5795 10 8.41011 11.0749 6.94312 12.7735C8.20873 12.2714 9.58041 12 11 12Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/strikethrough.svg b/front/src/assets/svg/strikethrough.svg
new file mode 100644
index 0000000..8ed6760
--- /dev/null
+++ b/front/src/assets/svg/strikethrough.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/assets/svg/underline.svg b/front/src/assets/svg/underline.svg
new file mode 100644
index 0000000..e7e2a62
--- /dev/null
+++ b/front/src/assets/svg/underline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z" fill="rgba(0,0,0,1)"></path></svg>
\ No newline at end of file
diff --git a/front/src/components/structure/message/Composer.vue b/front/src/components/structure/message/Composer.vue
index 06f76c8..134170f 100644
--- a/front/src/components/structure/message/Composer.vue
+++ b/front/src/components/structure/message/Composer.vue
@@ -20,6 +20,7 @@ import HardBreak from "@tiptap/extension-hard-break";
 import heading from "@tiptap/extension-heading";
 import Image from "@tiptap/extension-image";
 import TaskList from "@tiptap/extension-task-list";
+import SvgLoader from "@/components/utils/SvgLoader.vue";
 
 // todo style link
 // todo link and drop cursor
@@ -80,41 +81,37 @@ const send = () => {
 // Signatures: add a custom signature to the bottom of your email
 // HTML code editing: for advanced users who want to edit the HTML code of their email.
 </script>
-
+<!-- todo tooltip -->
 <template>
     <div class="main">
         <div v-if="editor">
             <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-                <button
+                <SvgLoader
+                    svg="bold"
                     @click="editor.chain().focus().toggleBold().run()"
-                    :class="{ 'is-active': editor.isActive('bold') }"
-                >
-                    Bold
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="italic"
                     @click="editor.chain().focus().toggleItalic().run()"
-                    :class="{ 'is-active': editor.isActive('italic') }"
-                >
-                    Italic
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                    v-tooltip="'Italic'"
+                />
+                <SvgLoader
+                    svg="strikethrough"
                     @click="editor.chain().focus().toggleStrike().run()"
-                    :class="{ 'is-active': editor.isActive('strike') }"
-                >
-                    Strike
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="underline"
                     @click="editor.chain().focus().toggleUnderline().run()"
-                    :class="{ 'is-active': editor.isActive('underline') }"
-                >
-                    toggleUnderline
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="font-color"
                     @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
-                    :class="{ 'is-active': editor.isActive('highlight') }"
-                >
-                    Highlight
-                </button>
+                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+                />
             </bubble-menu>
 
             <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
@@ -140,8 +137,7 @@ const send = () => {
         </div>
 
         <editor-content class="editor" :editor="editor" aria-expanded="false" />
-
-        <button @click="send()">SEND</button>
+        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
     </div>
 </template>
 
@@ -165,7 +161,33 @@ const send = () => {
     padding: 0 10px;
 }
 
-.is-active {
-    background-color: blue;
+.bubble-menu {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    background-color: var(--primary-background);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 2px;
+
+    .editorOption {
+        border-radius: 6px;
+        cursor: pointer;
+
+        &:hover,
+        &.is-active {
+            background-color: var(--selected);
+        }
+
+        ::v-deep img {
+            filter: var(--svg-primary-text);
+            padding: 1px;
+        }
+    }
+}
+
+.sendMessage {
+    filter: var(--svg-primary-text);
+    cursor: pointer;
 }
 </style>
diff --git a/front/src/components/utils/SvgLoader.vue b/front/src/components/utils/SvgLoader.vue
new file mode 100644
index 0000000..fbbf1c8
--- /dev/null
+++ b/front/src/components/utils/SvgLoader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps({
+    svg: { type: String, required: true },
+});
+
+const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
+</script>
+
+<template>
+    <div>
+        <img class="it-has-a-tooltip" :src="pathSvg()" />
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
index 2b1f0d3..900e814 100644
--- a/front/src/views/room/Header.vue
+++ b/front/src/views/room/Header.vue
@@ -42,7 +42,7 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1px solid #505050;
+    border-bottom: 1px solid var(--border-color);
     align-items: center;
     width: 100%;
     height: 35px;
@@ -50,7 +50,7 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
 
 .members-list {
     padding: 3px 5px;
-    border-bottom: 1px solid #505050;
+    border-bottom: 1px solid var(--border-color);
 }
 .members {
 }
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index 0644938..435a341 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -20,7 +20,7 @@ const router = useRouter();
         <div
             class="room"
             @click="router.push(`/${props.room?.id}`)"
-            v-bind:class="store.state.activeRoom == props.room?.id ? 'selected' : ''"
+            :class="{ selected: store.state.activeRoom === props.room?.id }"
         >
             <BaseAvatar url="vue.png" />
             <div class="content">