From 2a41db4dcea1bdaeb2a1ee9aaf3bc20bc6507e0a Mon Sep 17 00:00:00 2001
From: Lolo <mjmorales.mcv@gmail.com>
Date: Tue, 5 Aug 2025 18:56:42 +0200
Subject: [PATCH] iconitos

---
 front/public/assets/icons/_fix-svg-stroke.js  |  2 +-
 .../assets/icons/add-square-svgrepo-com.svg   |  6 ++--
 front/public/assets/icons/add-svgrepo-com.svg |  4 +--
 .../assets/icons/alert-square-svgrepo-com.svg |  6 ++--
 .../icons/align-justify-svgrepo-com.svg       |  8 +++---
 .../assets/icons/align-left-svgrepo-com.svg   |  8 +++---
 .../assets/icons/align-right-svgrepo-com.svg  |  8 +++---
 .../icons/arrow-down-left-svgrepo-com.svg     |  4 +--
 .../icons/arrow-down-right-svgrepo-com.svg    |  4 +--
 .../assets/icons/arrow-down-svgrepo-com.svg   |  4 +--
 .../assets/icons/arrow-left-svgrepo-com.svg   |  4 +--
 .../assets/icons/arrow-right-svgrepo-com.svg  |  4 +--
 .../icons/arrow-up-left-svgrepo-com.svg       |  4 +--
 .../icons/arrow-up-right-svgrepo-com.svg      |  4 +--
 .../assets/icons/arrow-up-svgrepo-com.svg     |  4 +--
 .../public/assets/icons/bell-svgrepo-com.svg  |  4 +--
 .../assets/icons/browsers-svgrepo-com.svg     |  4 +--
 .../icons/bubble-square-svgrepo-com.svg       |  2 +-
 .../assets/icons/cart-minus-svgrepo-com.svg   |  2 +-
 .../assets/icons/cart-plus-svgrepo-com.svg    |  2 +-
 .../icons/cart-shopping-fast-svgrepo-com.svg  |  2 +-
 .../assets/icons/cart-xmark-svgrepo-com.svg   |  2 +-
 .../assets/icons/chevron-down-svgrepo-com.svg |  2 +-
 .../assets/icons/chevron-left-svgrepo-com.svg |  2 +-
 .../icons/chevron-right-svgrepo-com.svg       |  2 +-
 .../assets/icons/circle-svgrepo-com.svg       |  2 +-
 .../public/assets/icons/clock-svgrepo-com.svg |  4 +--
 .../public/assets/icons/code-svgrepo-com.svg  |  4 +--
 .../public/assets/icons/disc-svgrepo-com.svg  |  4 +--
 .../assets/icons/download-svgrepo-com.svg     |  6 ++--
 .../public/assets/icons/edit-svgrepo-com.svg  |  4 +--
 .../assets/icons/expand-svgrepo-com.svg       |  8 +++---
 .../assets/icons/file-add-svgrepo-com.svg     |  6 ++--
 .../assets/icons/file-remove-svgrepo-com.svg  |  4 +--
 .../assets/icons/file-text-svgrepo-com.svg    |  8 +++---
 .../assets/icons/fingerprint-svgrepo-com.svg  |  2 +-
 .../assets/icons/folder-svgrepo-com.svg       |  2 +-
 .../public/assets/icons/grid-svgrepo-com.svg  |  8 +++---
 .../assets/icons/id-badge-svgrepo-com.svg     |  2 +-
 .../assets/icons/info-circle-svgrepo-com.svg  |  6 ++--
 .../assets/icons/info-square-svgrepo-com.svg  |  6 ++--
 .../public/assets/icons/lock-svgrepo-com.svg  |  4 +--
 .../assets/icons/mail-read-svgrepo-com.svg    |  6 ++--
 .../public/assets/icons/mail-svgrepo-com.svg  |  4 +--
 .../assets/icons/maximize-svgrepo-com.svg     |  8 +++---
 .../assets/icons/minimize-svgrepo-com.svg     |  8 +++---
 .../public/assets/icons/minus-svgrepo-com.svg |  2 +-
 .../icons/navigation-ne-svgrepo-com.svg       |  2 +-
 .../icons/navigation-nw-svgrepo-com.svg       |  2 +-
 .../assets/icons/navigation-svgrepo-com.svg   |  2 +-
 .../assets/icons/push-down-svgrepo-com.svg    |  4 +--
 .../assets/icons/push-left-svgrepo-com.svg    |  4 +--
 .../assets/icons/push-right-svgrepo-com.svg   |  4 +--
 .../assets/icons/push-up-svgrepo-com.svg      |  4 +--
 .../assets/icons/send-alt-2-svgrepo-com.svg   |  2 +-
 .../icons/sidebar-bottom-svgrepo-com.svg      |  4 +--
 .../assets/icons/sidebar-left-svgrepo-com.svg |  4 +--
 .../icons/sidebar-right-svgrepo-com.svg       |  4 +--
 .../assets/icons/sidebar-top-svgrepo-com.svg  |  4 +--
 .../assets/icons/signal-svgrepo-com.svg       |  4 +--
 .../assets/icons/stopwatch-svgrepo-com.svg    |  6 ++--
 .../assets/icons/support-svgrepo-com.svg      | 12 ++++----
 .../assets/icons/thumbs-down-svgrepo-com.svg  |  2 +-
 .../assets/icons/thumbs-up-svgrepo-com.svg    |  2 +-
 .../public/assets/icons/tick-svgrepo-com.svg  |  2 +-
 .../assets/icons/unlock-svgrepo-com.svg       |  4 +--
 .../assets/icons/upload-svgrepo-com.svg       |  6 ++--
 .../assets/icons/user-add-svgrepo-com.svg     |  8 +++---
 .../assets/icons/user-remove-svgrepo-com.svg  |  6 ++--
 .../public/assets/icons/user-svgrepo-com.svg  |  4 +--
 .../assets/icons/user-x-svgrepo-com.svg       |  8 +++---
 .../assets/icons/volume-down-svgrepo-com.svg  |  4 +--
 .../assets/icons/volume-mute-svgrepo-com.svg  |  2 +-
 .../assets/icons/volume-off-svgrepo-com.svg   | 10 +++----
 .../assets/icons/volume-up-svgrepo-com.svg    |  6 ++--
 .../assets/icons/x-circle-svgrepo-com.svg     |  6 ++--
 .../assets/icons/x-square-svgrepo-com.svg     |  6 ++--
 .../assets/icons/zoom-out-svgrepo-com.svg     |  6 ++--
 front/src/app/_variables.scss                 |  3 ++
 front/src/app/button/button.scss              | 21 ++++++++++++--
 .../src/app/mid-res-image/mid-res-image.html  | 28 ++++++++++++++++++-
 .../src/app/mid-res-image/mid-res-image.scss  | 22 +++++++++++----
 front/src/app/mid-res-image/mid-res-image.ts  | 20 +++++++++++--
 front/src/styles.scss                         |  6 +++-
 84 files changed, 263 insertions(+), 187 deletions(-)

diff --git a/front/public/assets/icons/_fix-svg-stroke.js b/front/public/assets/icons/_fix-svg-stroke.js
index 9267d71..97ce02d 100644
--- a/front/public/assets/icons/_fix-svg-stroke.js
+++ b/front/public/assets/icons/_fix-svg-stroke.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const iconsDir = path.join(__dirname, 'public', 'assets', 'icons');
+const iconsDir = __dirname;
 fs.readdirSync(iconsDir).forEach(file => {
   if (file.endsWith('.svg')) {
     const filePath = path.join(iconsDir, file);
diff --git a/front/public/assets/icons/add-square-svgrepo-com.svg b/front/public/assets/icons/add-square-svgrepo-com.svg
index 730bddd..60f9b55 100644
--- a/front/public/assets/icons/add-square-svgrepo-com.svg
+++ b/front/public/assets/icons/add-square-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
+<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15.5" x2="8.5" y1="12" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15.5" x2="8.5" y1="12" y2="12"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="15.5" y2="8.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="15.5" y2="8.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/add-svgrepo-com.svg b/front/public/assets/icons/add-svgrepo-com.svg
index 50d7f77..4662c0d 100644
--- a/front/public/assets/icons/add-svgrepo-com.svg
+++ b/front/public/assets/icons/add-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="19" y2="5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="19" y2="5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="12" y2="12"/>
 
 </g>
 
diff --git a/front/public/assets/icons/alert-square-svgrepo-com.svg b/front/public/assets/icons/alert-square-svgrepo-com.svg
index 275cc48..fb71faa 100644
--- a/front/public/assets/icons/alert-square-svgrepo-com.svg
+++ b/front/public/assets/icons/alert-square-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="12"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="16" y2="16"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="16" y2="16"/>
 
-<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/align-justify-svgrepo-com.svg b/front/public/assets/icons/align-justify-svgrepo-com.svg
index c713ed6..8633686 100644
--- a/front/public/assets/icons/align-justify-svgrepo-com.svg
+++ b/front/public/assets/icons/align-justify-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<polygon fill="#ffffff" points="20 18 4 18 4 18 20 18 20 18" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 18 4 18 4 18 20 18 20 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 10 4 10 4 10 20 10 20 10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 10 4 10 4 10 20 10 20 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/align-left-svgrepo-com.svg b/front/public/assets/icons/align-left-svgrepo-com.svg
index 8e15fcb..2a6be29 100644
--- a/front/public/assets/icons/align-left-svgrepo-com.svg
+++ b/front/public/assets/icons/align-left-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<polygon fill="#ffffff" points="12.9 18 4.1 18 4.1 18 12.9 18 12.9 18" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="12.9 18 4.1 18 4.1 18 12.9 18 12.9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="12.9 10 4.1 10 4.1 10 12.9 10 12.9 10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="12.9 10 4.1 10 4.1 10 12.9 10 12.9 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/align-right-svgrepo-com.svg b/front/public/assets/icons/align-right-svgrepo-com.svg
index 6a7381b..b45a18f 100644
--- a/front/public/assets/icons/align-right-svgrepo-com.svg
+++ b/front/public/assets/icons/align-right-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<polygon fill="#ffffff" points="19.9 18 11.1 18 11.1 18 19.9 18 19.9 18" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="19.9 18 11.1 18 11.1 18 19.9 18 19.9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="19.9 10 11.1 10 11.1 10 19.9 10 19.9 10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="19.9 10 11.1 10 11.1 10 19.9 10 19.9 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-down-left-svgrepo-com.svg b/front/public/assets/icons/arrow-down-left-svgrepo-com.svg
index 7353a12..a74722b 100644
--- a/front/public/assets/icons/arrow-down-left-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-down-left-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="5.3 11.6 5.3 18.7 12.4 18.7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="5.3 11.6 5.3 18.7 12.4 18.7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="5.3" y2="17.1"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="5.3" y2="17.1"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-down-right-svgrepo-com.svg b/front/public/assets/icons/arrow-down-right-svgrepo-com.svg
index 773b811..3e64fbb 100644
--- a/front/public/assets/icons/arrow-down-right-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-down-right-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="11.6 18.7 18.7 18.7 18.7 11.6" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="11.6 18.7 18.7 18.7 18.7 11.6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="5.3" y2="17.1"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="5.3" y2="17.1"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-down-svgrepo-com.svg b/front/public/assets/icons/arrow-down-svgrepo-com.svg
index 3da6fb4..aff78bb 100644
--- a/front/public/assets/icons/arrow-down-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-down-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="7 16.4 12 21.5 17 16.4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="7 16.4 12 21.5 17 16.4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.5" y2="19.2"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.5" y2="19.2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-left-svgrepo-com.svg b/front/public/assets/icons/arrow-left-svgrepo-com.svg
index 228f51e..289a108 100644
--- a/front/public/assets/icons/arrow-left-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-left-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="7.6 7 2.5 12 7.6 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="7.6 7 2.5 12 7.6 17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21.5" x2="4.8" y1="12" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21.5" x2="4.8" y1="12" y2="12"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-right-svgrepo-com.svg b/front/public/assets/icons/arrow-right-svgrepo-com.svg
index cdf0f9e..5206b98 100644
--- a/front/public/assets/icons/arrow-right-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-right-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="16.4 7 21.5 12 16.4 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="16.4 7 21.5 12 16.4 17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="2.5" x2="19.2" y1="12" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="2.5" x2="19.2" y1="12" y2="12"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-up-left-svgrepo-com.svg b/front/public/assets/icons/arrow-up-left-svgrepo-com.svg
index 504cab3..afaeba2 100644
--- a/front/public/assets/icons/arrow-up-left-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-up-left-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="5.3 12.4 5.3 5.3 12.4 5.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="5.3 12.4 5.3 5.3 12.4 5.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="18.7" y2="6.9"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="18.7" x2="6.9" y1="18.7" y2="6.9"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-up-right-svgrepo-com.svg b/front/public/assets/icons/arrow-up-right-svgrepo-com.svg
index 0e052fe..cae4485 100644
--- a/front/public/assets/icons/arrow-up-right-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-up-right-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="18.7 12.4 18.7 5.3 11.6 5.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="18.7 12.4 18.7 5.3 11.6 5.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="18.7" y2="6.9"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5.3" x2="17.1" y1="18.7" y2="6.9"/>
 
 </g>
 
diff --git a/front/public/assets/icons/arrow-up-svgrepo-com.svg b/front/public/assets/icons/arrow-up-svgrepo-com.svg
index 508e049..902c038 100644
--- a/front/public/assets/icons/arrow-up-svgrepo-com.svg
+++ b/front/public/assets/icons/arrow-up-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="7 7.5 12 2.5 17 7.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="7 7.5 12 2.5 17 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="21.3" y2="4.8"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="21.3" y2="4.8"/>
 
 </g>
 
diff --git a/front/public/assets/icons/bell-svgrepo-com.svg b/front/public/assets/icons/bell-svgrepo-com.svg
index 47fbee0..2e47e4a 100644
--- a/front/public/assets/icons/bell-svgrepo-com.svg
+++ b/front/public/assets/icons/bell-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<path d="M18.9,11.2s0-8.7-6.9-8.7-6.9,8.7-6.9,8.7v3.9L2.5,17.5h19l-2.6-2.4Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M18.9,11.2s0-8.7-6.9-8.7-6.9,8.7-6.9,8.7v3.9L2.5,17.5h19l-2.6-2.4Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M14.5,20.5s-.5,1-2.5,1-2.5-1-2.5-1" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M14.5,20.5s-.5,1-2.5,1-2.5-1-2.5-1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/browsers-svgrepo-com.svg b/front/public/assets/icons/browsers-svgrepo-com.svg
index 11c023a..9bfecbc 100644
--- a/front/public/assets/icons/browsers-svgrepo-com.svg
+++ b/front/public/assets/icons/browsers-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect fill="none" height="14" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="14" x="3" y="7"/>
+<rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="14" x="3" y="7"/>
 
-<path d="M8,3H19a2,2,0,0,1,2,2V16" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M8,3H19a2,2,0,0,1,2,2V16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/bubble-square-svgrepo-com.svg b/front/public/assets/icons/bubble-square-svgrepo-com.svg
index 1ca2129..02ca5a8 100644
--- a/front/public/assets/icons/bubble-square-svgrepo-com.svg
+++ b/front/public/assets/icons/bubble-square-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="bubble-square">
 
-<path d="M7.7,18.3H19.4a2.1,2.1,0,0,0,2.1-2.1V4.6a2.1,2.1,0,0,0-2.1-2.1H4.6A2.1,2.1,0,0,0,2.5,4.6V21.5Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M7.7,18.3H19.4a2.1,2.1,0,0,0,2.1-2.1V4.6a2.1,2.1,0,0,0-2.1-2.1H4.6A2.1,2.1,0,0,0,2.5,4.6V21.5Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/cart-minus-svgrepo-com.svg b/front/public/assets/icons/cart-minus-svgrepo-com.svg
index b7ddca6..3ef9090 100644
--- a/front/public/assets/icons/cart-minus-svgrepo-com.svg
+++ b/front/public/assets/icons/cart-minus-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M16 6H11M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M16 6H11M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/cart-plus-svgrepo-com.svg b/front/public/assets/icons/cart-plus-svgrepo-com.svg
index 2581f42..88a8fac 100644
--- a/front/public/assets/icons/cart-plus-svgrepo-com.svg
+++ b/front/public/assets/icons/cart-plus-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M16 5.5H13.5M13.5 5.5H11M13.5 5.5V8M13.5 5.5V3M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M16 5.5H13.5M13.5 5.5H11M13.5 5.5V8M13.5 5.5V3M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/cart-shopping-fast-svgrepo-com.svg b/front/public/assets/icons/cart-shopping-fast-svgrepo-com.svg
index 2e31c63..355ca00 100644
--- a/front/public/assets/icons/cart-shopping-fast-svgrepo-com.svg
+++ b/front/public/assets/icons/cart-shopping-fast-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.2998 5H22L20 12H8.37675M21 16H9L7 3H4M4 8H2M5 11H2M6 14H2M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20C8 19.4477 8.44772 19 9 19C9.55228 19 10 19.4477 10 20ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.2998 5H22L20 12H8.37675M21 16H9L7 3H4M4 8H2M5 11H2M6 14H2M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20C8 19.4477 8.44772 19 9 19C9.55228 19 10 19.4477 10 20ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/cart-xmark-svgrepo-com.svg b/front/public/assets/icons/cart-xmark-svgrepo-com.svg
index 2c78ac5..152c31e 100644
--- a/front/public/assets/icons/cart-xmark-svgrepo-com.svg
+++ b/front/public/assets/icons/cart-xmark-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M11 3L13.5 5.5M13.5 5.5L16 8M13.5 5.5L16 3M13.5 5.5L11 8M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 5L19 12H7.37671M20 16H8L6 3H3M11 3L13.5 5.5M13.5 5.5L16 8M13.5 5.5L16 3M13.5 5.5L11 8M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/chevron-down-svgrepo-com.svg b/front/public/assets/icons/chevron-down-svgrepo-com.svg
index 580d077..8bd725b 100644
--- a/front/public/assets/icons/chevron-down-svgrepo-com.svg
+++ b/front/public/assets/icons/chevron-down-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="F-Chevron">
 
-<polyline fill="none" id="Down" points="5 8.5 12 15.5 19 8.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" id="Down" points="5 8.5 12 15.5 19 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/chevron-left-svgrepo-com.svg b/front/public/assets/icons/chevron-left-svgrepo-com.svg
index a7f46ec..0dcb492 100644
--- a/front/public/assets/icons/chevron-left-svgrepo-com.svg
+++ b/front/public/assets/icons/chevron-left-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="F-Chevron">
 
-<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/chevron-right-svgrepo-com.svg b/front/public/assets/icons/chevron-right-svgrepo-com.svg
index 2976c18..eb5736f 100644
--- a/front/public/assets/icons/chevron-right-svgrepo-com.svg
+++ b/front/public/assets/icons/chevron-right-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="F-Chevron">
 
-<polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/circle-svgrepo-com.svg b/front/public/assets/icons/circle-svgrepo-com.svg
index d30042d..df9f2e2 100644
--- a/front/public/assets/icons/circle-svgrepo-com.svg
+++ b/front/public/assets/icons/circle-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="Circle">
 
-<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/clock-svgrepo-com.svg b/front/public/assets/icons/clock-svgrepo-com.svg
index 15e1107..95a7942 100644
--- a/front/public/assets/icons/clock-svgrepo-com.svg
+++ b/front/public/assets/icons/clock-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline fill="none" points="11.9 5.9 11.9 11.9 12 12 14.1 14.1" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="11.9 5.9 11.9 11.9 12 12 14.1 14.1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/code-svgrepo-com.svg b/front/public/assets/icons/code-svgrepo-com.svg
index d8695a9..defea8d 100644
--- a/front/public/assets/icons/code-svgrepo-com.svg
+++ b/front/public/assets/icons/code-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="15.5 7 20.5 12 15.5 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="15.5 7 20.5 12 15.5 17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polyline data-name="Left" fill="none" id="Left-2" points="8.5 7 3.5 12 8.5 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Left" fill="none" id="Left-2" points="8.5 7 3.5 12 8.5 17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/disc-svgrepo-com.svg b/front/public/assets/icons/disc-svgrepo-com.svg
index 16d1a51..4391cb8 100644
--- a/front/public/assets/icons/disc-svgrepo-com.svg
+++ b/front/public/assets/icons/disc-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-3" r="3.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-3" r="3.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/download-svgrepo-com.svg b/front/public/assets/icons/download-svgrepo-com.svg
index 24468d5..1610c42 100644
--- a/front/public/assets/icons/download-svgrepo-com.svg
+++ b/front/public/assets/icons/download-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="7.9 12.3 12 16.3 16.1 12.3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="7.9 12.3 12 16.3 16.1 12.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.7" y2="14.2"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.7" y2="14.2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/edit-svgrepo-com.svg b/front/public/assets/icons/edit-svgrepo-com.svg
index fda12e4..7b02a97 100644
--- a/front/public/assets/icons/edit-svgrepo-com.svg
+++ b/front/public/assets/icons/edit-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/expand-svgrepo-com.svg b/front/public/assets/icons/expand-svgrepo-com.svg
index ef6637a..9527034 100644
--- a/front/public/assets/icons/expand-svgrepo-com.svg
+++ b/front/public/assets/icons/expand-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="3 17.3 3 21 6.7 21" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="3 17.3 3 21 6.7 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="10" x2="3.8" y1="14" y2="20.2"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="10" x2="3.8" y1="14" y2="20.2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14" x2="20.2" y1="10" y2="3.8"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14" x2="20.2" y1="10" y2="3.8"/>
 
-<polyline data-name="Right" fill="none" id="Right-3" points="21 6.7 21 3 17.3 3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-3" points="21 6.7 21 3 17.3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/file-add-svgrepo-com.svg b/front/public/assets/icons/file-add-svgrepo-com.svg
index d371510..46bd4ce 100644
--- a/front/public/assets/icons/file-add-svgrepo-com.svg
+++ b/front/public/assets/icons/file-add-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g id="Add">
 
-<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="17" y2="11"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="17" y2="11"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="15" y1="14" y2="14"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="15" y1="14" y2="14"/>
 
 </g>
 
diff --git a/front/public/assets/icons/file-remove-svgrepo-com.svg b/front/public/assets/icons/file-remove-svgrepo-com.svg
index f0508e9..0ec15fd 100644
--- a/front/public/assets/icons/file-remove-svgrepo-com.svg
+++ b/front/public/assets/icons/file-remove-svgrepo-com.svg
@@ -13,9 +13,9 @@
 
 <g>
 
-<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="15" y1="16.5" y2="16.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="15" y1="16.5" y2="16.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/file-text-svgrepo-com.svg b/front/public/assets/icons/file-text-svgrepo-com.svg
index a3cf826..c9ceb2c 100644
--- a/front/public/assets/icons/file-text-svgrepo-com.svg
+++ b/front/public/assets/icons/file-text-svgrepo-com.svg
@@ -13,13 +13,13 @@
 
 <g>
 
-<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="17.5" y2="17.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="17.5" y2="17.5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="13.5" y2="13.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="13.5" y2="13.5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="13" y1="9.5" y2="9.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="13" y1="9.5" y2="9.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/fingerprint-svgrepo-com.svg b/front/public/assets/icons/fingerprint-svgrepo-com.svg
index abeb87f..4f97240 100644
--- a/front/public/assets/icons/fingerprint-svgrepo-com.svg
+++ b/front/public/assets/icons/fingerprint-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.89258 17.7897C6.9083 17.7633 6.92441 17.7369 6.9409 17.7107C8.14358 15.7988 8.8398 13.5379 8.8398 11.1034C8.8398 9.14189 10.4299 7.55176 12.3915 7.55176C14.353 7.55176 15.9431 9.14189 15.9431 11.1034C15.9431 12.0065 15.8816 12.8957 15.7626 13.7672M13.8825 19.8437C14.4257 18.7596 14.871 17.6179 15.2069 16.4309M18.6156 17.4359C19.1883 15.4236 19.4949 13.2993 19.4949 11.1033C19.4949 7.18026 16.3147 4 12.3916 4C11.0978 4 9.88477 4.34591 8.83997 4.9503M4.40039 14.9783C4.96924 13.8073 5.28831 12.4926 5.28831 11.1033C5.28831 9.8095 5.63422 8.59646 6.2386 7.55166M12.3915 11.1035C12.3915 14.2265 11.4958 17.1403 9.94727 19.6019" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.89258 17.7897C6.9083 17.7633 6.92441 17.7369 6.9409 17.7107C8.14358 15.7988 8.8398 13.5379 8.8398 11.1034C8.8398 9.14189 10.4299 7.55176 12.3915 7.55176C14.353 7.55176 15.9431 9.14189 15.9431 11.1034C15.9431 12.0065 15.8816 12.8957 15.7626 13.7672M13.8825 19.8437C14.4257 18.7596 14.871 17.6179 15.2069 16.4309M18.6156 17.4359C19.1883 15.4236 19.4949 13.2993 19.4949 11.1033C19.4949 7.18026 16.3147 4 12.3916 4C11.0978 4 9.88477 4.34591 8.83997 4.9503M4.40039 14.9783C4.96924 13.8073 5.28831 12.4926 5.28831 11.1033C5.28831 9.8095 5.63422 8.59646 6.2386 7.55166M12.3915 11.1035C12.3915 14.2265 11.4958 17.1403 9.94727 19.6019" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/folder-svgrepo-com.svg b/front/public/assets/icons/folder-svgrepo-com.svg
index 249e720..6f81e19 100644
--- a/front/public/assets/icons/folder-svgrepo-com.svg
+++ b/front/public/assets/icons/folder-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="folder">
 
-<path d="M2,18.8V5.3A2.3,2.3,0,0,1,4.3,3H9.6a1.1,1.1,0,0,1,.8.4l2.8,3.2a1.1,1.1,0,0,0,.8.4h5.6A2.2,2.2,0,0,1,22,9.2v9.7A2.2,2.2,0,0,1,19.8,21H4.2A2.2,2.2,0,0,1,2,18.8Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M2,18.8V5.3A2.3,2.3,0,0,1,4.3,3H9.6a1.1,1.1,0,0,1,.8.4l2.8,3.2a1.1,1.1,0,0,0,.8.4h5.6A2.2,2.2,0,0,1,22,9.2v9.7A2.2,2.2,0,0,1,19.8,21H4.2A2.2,2.2,0,0,1,2,18.8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/grid-svgrepo-com.svg b/front/public/assets/icons/grid-svgrepo-com.svg
index d65943b..51e046f 100644
--- a/front/public/assets/icons/grid-svgrepo-com.svg
+++ b/front/public/assets/icons/grid-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<rect fill="none" height="7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="14.5" y="2.5"/>
+<rect fill="none" height="7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="14.5" y="2.5"/>
 
-<rect fill="none" height="7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="14.5" y="14.5"/>
+<rect fill="none" height="7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="14.5" y="14.5"/>
 
-<rect fill="none" height="7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="2.5" y="2.5"/>
+<rect fill="none" height="7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="2.5" y="2.5"/>
 
-<rect fill="none" height="7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="2.5" y="14.5"/>
+<rect fill="none" height="7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="7" x="2.5" y="14.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/id-badge-svgrepo-com.svg b/front/public/assets/icons/id-badge-svgrepo-com.svg
index a224340..c522e1a 100644
--- a/front/public/assets/icons/id-badge-svgrepo-com.svg
+++ b/front/public/assets/icons/id-badge-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 6H10M15 17C14.7164 15.8589 13.481 15 12 15C10.519 15 9.28364 15.8589 9 17M12 11H12.01M8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V6.2C19 5.0799 19 4.51984 18.782 4.09202C18.5903 3.71569 18.2843 3.40973 17.908 3.21799C17.4802 3 16.9201 3 15.8 3H8.2C7.0799 3 6.51984 3 6.09202 3.21799C5.71569 3.40973 5.40973 3.71569 5.21799 4.09202C5 4.51984 5 5.07989 5 6.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21ZM13 11C13 11.5523 12.5523 12 12 12C11.4477 12 11 11.5523 11 11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6H10M15 17C14.7164 15.8589 13.481 15 12 15C10.519 15 9.28364 15.8589 9 17M12 11H12.01M8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V6.2C19 5.0799 19 4.51984 18.782 4.09202C18.5903 3.71569 18.2843 3.40973 17.908 3.21799C17.4802 3 16.9201 3 15.8 3H8.2C7.0799 3 6.51984 3 6.09202 3.21799C5.71569 3.40973 5.40973 3.71569 5.21799 4.09202C5 4.51984 5 5.07989 5 6.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21ZM13 11C13 11.5523 12.5523 12 12 12C11.4477 12 11 11.5523 11 11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/info-circle-svgrepo-com.svg b/front/public/assets/icons/info-circle-svgrepo-com.svg
index 185cd40..f3d9536 100644
--- a/front/public/assets/icons/info-circle-svgrepo-com.svg
+++ b/front/public/assets/icons/info-circle-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"/>
 
 </g>
 
diff --git a/front/public/assets/icons/info-square-svgrepo-com.svg b/front/public/assets/icons/info-square-svgrepo-com.svg
index ed6b4d4..4650bb7 100644
--- a/front/public/assets/icons/info-square-svgrepo-com.svg
+++ b/front/public/assets/icons/info-square-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
+<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"/>
 
 </g>
 
diff --git a/front/public/assets/icons/lock-svgrepo-com.svg b/front/public/assets/icons/lock-svgrepo-com.svg
index 36569f6..4aed4fb 100644
--- a/front/public/assets/icons/lock-svgrepo-com.svg
+++ b/front/public/assets/icons/lock-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect fill="none" height="10" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="16" x="4" y="11"/>
+<rect fill="none" height="10" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="16" x="4" y="11"/>
 
-<path d="M16.5,11V8h0c0-2.8-.5-5-4.5-5S7.5,5.2,7.5,8h0v3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M16.5,11V8h0c0-2.8-.5-5-4.5-5S7.5,5.2,7.5,8h0v3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/mail-read-svgrepo-com.svg b/front/public/assets/icons/mail-read-svgrepo-com.svg
index e0c8751..ffd8a4a 100644
--- a/front/public/assets/icons/mail-read-svgrepo-com.svg
+++ b/front/public/assets/icons/mail-read-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<polyline fill="none" points="4 9 12 14 20 9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="4 9 12 14 20 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polyline fill="none" points="3 8.5 12 3.5 21 8.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="3 8.5 12 3.5 21 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M21,8.5v10a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V8.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M21,8.5v10a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V8.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/mail-svgrepo-com.svg b/front/public/assets/icons/mail-svgrepo-com.svg
index 2c1b649..59f98b7 100644
--- a/front/public/assets/icons/mail-svgrepo-com.svg
+++ b/front/public/assets/icons/mail-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polyline fill="none" points="4 8.2 12 14.1 20 8.2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="4 8.2 12 14.1 20 8.2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<rect fill="none" height="14" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="6.5"/>
+<rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="6.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/maximize-svgrepo-com.svg b/front/public/assets/icons/maximize-svgrepo-com.svg
index 7084297..9aa6af9 100644
--- a/front/public/assets/icons/maximize-svgrepo-com.svg
+++ b/front/public/assets/icons/maximize-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M3,8V5A2,2,0,0,1,5,3H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M3,8V5A2,2,0,0,1,5,3H8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M21,16v3a2,2,0,0,1-2,2H16" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M21,16v3a2,2,0,0,1-2,2H16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M3,16v3a2,2,0,0,0,2,2H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M3,16v3a2,2,0,0,0,2,2H8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M21,8V5a2,2,0,0,0-2-2H16" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M21,8V5a2,2,0,0,0-2-2H16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/minimize-svgrepo-com.svg b/front/public/assets/icons/minimize-svgrepo-com.svg
index ed75d69..6a51581 100644
--- a/front/public/assets/icons/minimize-svgrepo-com.svg
+++ b/front/public/assets/icons/minimize-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M8,3V6A2,2,0,0,1,6,8H3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M8,3V6A2,2,0,0,1,6,8H3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M16,21V18a2,2,0,0,1,2-2h3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M16,21V18a2,2,0,0,1,2-2h3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M8,21V18a2,2,0,0,0-2-2H3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M8,21V18a2,2,0,0,0-2-2H3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M16,3V6a2,2,0,0,0,2,2h3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M16,3V6a2,2,0,0,0,2,2h3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/minus-svgrepo-com.svg b/front/public/assets/icons/minus-svgrepo-com.svg
index 60a043e..7d29ef7 100644
--- a/front/public/assets/icons/minus-svgrepo-com.svg
+++ b/front/public/assets/icons/minus-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="minus">
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="4" x2="20" y1="12" y2="12"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="4" x2="20" y1="12" y2="12"/>
 
 </g>
 
diff --git a/front/public/assets/icons/navigation-ne-svgrepo-com.svg b/front/public/assets/icons/navigation-ne-svgrepo-com.svg
index eebee53..a30a1fc 100644
--- a/front/public/assets/icons/navigation-ne-svgrepo-com.svg
+++ b/front/public/assets/icons/navigation-ne-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="navigation-ne">
 
-<polyline fill="none" points="21.5 2.5 2.5 10.2 9.6 14.4 13.8 21.5 21.5 2.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="21.5 2.5 2.5 10.2 9.6 14.4 13.8 21.5 21.5 2.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/navigation-nw-svgrepo-com.svg b/front/public/assets/icons/navigation-nw-svgrepo-com.svg
index 3dd88c7..3e8081c 100644
--- a/front/public/assets/icons/navigation-nw-svgrepo-com.svg
+++ b/front/public/assets/icons/navigation-nw-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="navigation-nw">
 
-<polyline fill="none" points="2.5 2.5 10.2 21.5 14.4 14.4 21.5 10.2 2.5 2.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="2.5 2.5 10.2 21.5 14.4 14.4 21.5 10.2 2.5 2.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/navigation-svgrepo-com.svg b/front/public/assets/icons/navigation-svgrepo-com.svg
index 8d49891..32ee540 100644
--- a/front/public/assets/icons/navigation-svgrepo-com.svg
+++ b/front/public/assets/icons/navigation-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="navigation">
 
-<polyline fill="none" points="12 2.5 4 21.5 12 19.4 20 21.5 12 2.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="12 2.5 4 21.5 12 19.4 20 21.5 12 2.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/push-down-svgrepo-com.svg b/front/public/assets/icons/push-down-svgrepo-com.svg
index 4c0e30f..973912f 100644
--- a/front/public/assets/icons/push-down-svgrepo-com.svg
+++ b/front/public/assets/icons/push-down-svgrepo-com.svg
@@ -13,9 +13,9 @@
 
 <g>
 
-<polyline data-name="Down" fill="none" id="Down-2" points="5 6.1 12 13.1 19 6.1" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Down" fill="none" id="Down-2" points="5 6.1 12 13.1 19 6.1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="17.9" y2="17.9"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="19" y1="17.9" y2="17.9"/>
 
 </g>
 
diff --git a/front/public/assets/icons/push-left-svgrepo-com.svg b/front/public/assets/icons/push-left-svgrepo-com.svg
index 58d6d79..d2c4f15 100644
--- a/front/public/assets/icons/push-left-svgrepo-com.svg
+++ b/front/public/assets/icons/push-left-svgrepo-com.svg
@@ -13,9 +13,9 @@
 
 <g>
 
-<polyline fill="none" id="Down" points="17.9 5 10.9 12 17.9 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" id="Down" points="17.9 5 10.9 12 17.9 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6.1" x2="6.1" y1="5" y2="19"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6.1" x2="6.1" y1="5" y2="19"/>
 
 </g>
 
diff --git a/front/public/assets/icons/push-right-svgrepo-com.svg b/front/public/assets/icons/push-right-svgrepo-com.svg
index c3d3b9d..8e5bafc 100644
--- a/front/public/assets/icons/push-right-svgrepo-com.svg
+++ b/front/public/assets/icons/push-right-svgrepo-com.svg
@@ -13,9 +13,9 @@
 
 <g>
 
-<polyline fill="none" id="Down" points="6.1 19 13.1 12 6.1 5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" id="Down" points="6.1 19 13.1 12 6.1 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="17.9" y1="19" y2="5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="17.9" y1="19" y2="5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/push-up-svgrepo-com.svg b/front/public/assets/icons/push-up-svgrepo-com.svg
index 60c3d7e..d51be51 100644
--- a/front/public/assets/icons/push-up-svgrepo-com.svg
+++ b/front/public/assets/icons/push-up-svgrepo-com.svg
@@ -13,9 +13,9 @@
 
 <g>
 
-<polyline data-name="Down" fill="none" id="Down-2" points="19 17.9 12 10.9 5 17.9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Down" fill="none" id="Down-2" points="19 17.9 12 10.9 5 17.9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="19" x2="5" y1="6.1" y2="6.1"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="19" x2="5" y1="6.1" y2="6.1"/>
 
 </g>
 
diff --git a/front/public/assets/icons/send-alt-2-svgrepo-com.svg b/front/public/assets/icons/send-alt-2-svgrepo-com.svg
index c9d2b4a..bae8f5a 100644
--- a/front/public/assets/icons/send-alt-2-svgrepo-com.svg
+++ b/front/public/assets/icons/send-alt-2-svgrepo-com.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.7639 12H10.0556M3 8.00003H5.5M4 12H5.5M4.5 16H5.5M9.96153 12.4896L9.07002 15.4486C8.73252 16.5688 8.56376 17.1289 8.70734 17.4633C8.83199 17.7537 9.08656 17.9681 9.39391 18.0415C9.74792 18.1261 10.2711 17.8645 11.3175 17.3413L19.1378 13.4311C20.059 12.9705 20.5197 12.7402 20.6675 12.4285C20.7961 12.1573 20.7961 11.8427 20.6675 11.5715C20.5197 11.2598 20.059 11.0295 19.1378 10.5689L11.3068 6.65342C10.2633 6.13168 9.74156 5.87081 9.38789 5.95502C9.0808 6.02815 8.82627 6.24198 8.70128 6.53184C8.55731 6.86569 8.72427 7.42461 9.05819 8.54246L9.96261 11.5701C10.0137 11.7411 10.0392 11.8266 10.0493 11.9137C10.0583 11.991 10.0582 12.069 10.049 12.1463C10.0387 12.2334 10.013 12.3188 9.96153 12.4896Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.7639 12H10.0556M3 8.00003H5.5M4 12H5.5M4.5 16H5.5M9.96153 12.4896L9.07002 15.4486C8.73252 16.5688 8.56376 17.1289 8.70734 17.4633C8.83199 17.7537 9.08656 17.9681 9.39391 18.0415C9.74792 18.1261 10.2711 17.8645 11.3175 17.3413L19.1378 13.4311C20.059 12.9705 20.5197 12.7402 20.6675 12.4285C20.7961 12.1573 20.7961 11.8427 20.6675 11.5715C20.5197 11.2598 20.059 11.0295 19.1378 10.5689L11.3068 6.65342C10.2633 6.13168 9.74156 5.87081 9.38789 5.95502C9.0808 6.02815 8.82627 6.24198 8.70128 6.53184C8.55731 6.86569 8.72427 7.42461 9.05819 8.54246L9.96261 11.5701C10.0137 11.7411 10.0392 11.8266 10.0493 11.9137C10.0583 11.991 10.0582 12.069 10.049 12.1463C10.0387 12.2334 10.013 12.3188 9.96153 12.4896Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/front/public/assets/icons/sidebar-bottom-svgrepo-com.svg b/front/public/assets/icons/sidebar-bottom-svgrepo-com.svg
index 2cecc8c..1cd9053 100644
--- a/front/public/assets/icons/sidebar-bottom-svgrepo-com.svg
+++ b/front/public/assets/icons/sidebar-bottom-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="#000000" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
+<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
 
-<line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" x1="21" x2="3" y1="15" y2="15"/>
+<line fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" x1="21" x2="3" y1="15" y2="15"/>
 
 </g>
 
diff --git a/front/public/assets/icons/sidebar-left-svgrepo-com.svg b/front/public/assets/icons/sidebar-left-svgrepo-com.svg
index 996fade..05aa48e 100644
--- a/front/public/assets/icons/sidebar-left-svgrepo-com.svg
+++ b/front/public/assets/icons/sidebar-left-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="#000000" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
+<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
 
-<line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" x1="9" x2="9" y1="21" y2="3"/>
+<line fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" x1="9" x2="9" y1="21" y2="3"/>
 
 </g>
 
diff --git a/front/public/assets/icons/sidebar-right-svgrepo-com.svg b/front/public/assets/icons/sidebar-right-svgrepo-com.svg
index fc98443..f460bf4 100644
--- a/front/public/assets/icons/sidebar-right-svgrepo-com.svg
+++ b/front/public/assets/icons/sidebar-right-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="#000000" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
+<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
 
-<line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" x1="15" x2="15" y1="21" y2="3"/>
+<line fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" x1="15" x2="15" y1="21" y2="3"/>
 
 </g>
 
diff --git a/front/public/assets/icons/sidebar-top-svgrepo-com.svg b/front/public/assets/icons/sidebar-top-svgrepo-com.svg
index 6c26079..d29deb1 100644
--- a/front/public/assets/icons/sidebar-top-svgrepo-com.svg
+++ b/front/public/assets/icons/sidebar-top-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="#000000" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
+<rect data-name="Square" fill="none" height="18" id="Square-2" rx="2" ry="2" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" width="18" x="3" y="3"/>
 
-<line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" x1="21" x2="3" y1="9" y2="9"/>
+<line fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" x1="21" x2="3" y1="9" y2="9"/>
 
 </g>
 
diff --git a/front/public/assets/icons/signal-svgrepo-com.svg b/front/public/assets/icons/signal-svgrepo-com.svg
index d50754c..1aa56a8 100644
--- a/front/public/assets/icons/signal-svgrepo-com.svg
+++ b/front/public/assets/icons/signal-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<path d="M2.5,12A9.5,9.5,0,1,1,12,21.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M2.5,12A9.5,9.5,0,1,1,12,21.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M7.5,12A4.5,4.5,0,1,1,12,16.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M7.5,12A4.5,4.5,0,1,1,12,16.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/stopwatch-svgrepo-com.svg b/front/public/assets/icons/stopwatch-svgrepo-com.svg
index f6b4404..8e16824 100644
--- a/front/public/assets/icons/stopwatch-svgrepo-com.svg
+++ b/front/public/assets/icons/stopwatch-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="10.8" y2="14"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="10.8" y2="14"/>
 
-<circle cx="12" cy="14.5" data-name="Circle" fill="none" id="Circle-2" r="7.9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="14.5" data-name="Circle" fill="none" id="Circle-2" r="7.9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<polyline fill="none" points="12 5.5 12 1.5 9 1.5 15 1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="12 5.5 12 1.5 9 1.5 15 1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/support-svgrepo-com.svg b/front/public/assets/icons/support-svgrepo-com.svg
index a6b6c0d..3c9d459 100644
--- a/front/public/assets/icons/support-svgrepo-com.svg
+++ b/front/public/assets/icons/support-svgrepo-com.svg
@@ -11,17 +11,17 @@
 
 <g>
 
-<circle cx="12" cy="12" fill="none" r="4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"/>
+<circle cx="12" cy="12" fill="none" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"/>
 
-<circle cx="12" cy="12" fill="none" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"/>
+<circle cx="12" cy="12" fill="none" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-5 12) rotate(-45)"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="9" y1="5" y2="9"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="9" y1="5" y2="9"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="9" y2="5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="9" y2="5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="15" y2="19"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="19" y1="15" y2="19"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="5" y1="15" y2="19"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9" x2="5" y1="15" y2="19"/>
 
 </g>
 
diff --git a/front/public/assets/icons/thumbs-down-svgrepo-com.svg b/front/public/assets/icons/thumbs-down-svgrepo-com.svg
index f250926..e2012ad 100644
--- a/front/public/assets/icons/thumbs-down-svgrepo-com.svg
+++ b/front/public/assets/icons/thumbs-down-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="thumbs-down">
 
-<path d="M7.3,12.6,10.1,21a.6.6,0,0,0,.8.3l1-.5a2.6,2.6,0,0,0,1.4-2.3V14.6h6.4a2,2,0,0,0,1.9-2.5l-2-8a2,2,0,0,0-1.9-1.5H4.3a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h3V2.6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M7.3,12.6,10.1,21a.6.6,0,0,0,.8.3l1-.5a2.6,2.6,0,0,0,1.4-2.3V14.6h6.4a2,2,0,0,0,1.9-2.5l-2-8a2,2,0,0,0-1.9-1.5H4.3a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h3V2.6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/thumbs-up-svgrepo-com.svg b/front/public/assets/icons/thumbs-up-svgrepo-com.svg
index 1b12318..7b8c1a5 100644
--- a/front/public/assets/icons/thumbs-up-svgrepo-com.svg
+++ b/front/public/assets/icons/thumbs-up-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="thumbs-up">
 
-<path d="M7.3,11.4,10.1,3a.6.6,0,0,1,.8-.3l1,.5a2.6,2.6,0,0,1,1.4,2.3V9.4h6.4a2,2,0,0,1,1.9,2.5l-2,8a2,2,0,0,1-1.9,1.5H4.3a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h3v10" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M7.3,11.4,10.1,3a.6.6,0,0,1,.8-.3l1,.5a2.6,2.6,0,0,1,1.4,2.3V9.4h6.4a2,2,0,0,1,1.9,2.5l-2,8a2,2,0,0,1-1.9,1.5H4.3a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h3v10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/tick-svgrepo-com.svg b/front/public/assets/icons/tick-svgrepo-com.svg
index d5717c3..bd30433 100644
--- a/front/public/assets/icons/tick-svgrepo-com.svg
+++ b/front/public/assets/icons/tick-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="tick">
 
-<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/unlock-svgrepo-com.svg b/front/public/assets/icons/unlock-svgrepo-com.svg
index 0ea4b61..45d9636 100644
--- a/front/public/assets/icons/unlock-svgrepo-com.svg
+++ b/front/public/assets/icons/unlock-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<rect fill="none" height="10" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="16" x="4" y="11"/>
+<rect fill="none" height="10" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="16" x="4" y="11"/>
 
-<path d="M16.5,11V8h0c0-2.8-.5-5-4.5-5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M16.5,11V8h0c0-2.8-.5-5-4.5-5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/upload-svgrepo-com.svg b/front/public/assets/icons/upload-svgrepo-com.svg
index dbf1256..7c4201d 100644
--- a/front/public/assets/icons/upload-svgrepo-com.svg
+++ b/front/public/assets/icons/upload-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 <g>
 
-<polyline data-name="Right" fill="none" id="Right-2" points="7.9 6.7 12 2.7 16.1 6.7" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline data-name="Right" fill="none" id="Right-2" points="7.9 6.7 12 2.7 16.1 6.7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="16.3" y2="4.8"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="16.3" y2="4.8"/>
 
 </g>
 
diff --git a/front/public/assets/icons/user-add-svgrepo-com.svg b/front/public/assets/icons/user-add-svgrepo-com.svg
index ca2d2c1..1c8b986 100644
--- a/front/public/assets/icons/user-add-svgrepo-com.svg
+++ b/front/public/assets/icons/user-add-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="9" cy="7" fill="none" r="4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="9" cy="7" fill="none" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17" x2="23" y1="11" y2="11"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17" x2="23" y1="11" y2="11"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="20" x2="20" y1="8" y2="14"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="20" x2="20" y1="8" y2="14"/>
 
 </g>
 
diff --git a/front/public/assets/icons/user-remove-svgrepo-com.svg b/front/public/assets/icons/user-remove-svgrepo-com.svg
index 2655365..a9867aa 100644
--- a/front/public/assets/icons/user-remove-svgrepo-com.svg
+++ b/front/public/assets/icons/user-remove-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="9" cy="7" fill="none" r="4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="9" cy="7" fill="none" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17" x2="23" y1="11" y2="11"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17" x2="23" y1="11" y2="11"/>
 
 </g>
 
diff --git a/front/public/assets/icons/user-svgrepo-com.svg b/front/public/assets/icons/user-svgrepo-com.svg
index 2d447eb..3d131af 100644
--- a/front/public/assets/icons/user-svgrepo-com.svg
+++ b/front/public/assets/icons/user-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<path d="M20,21V19a4,4,0,0,0-4-4H8a4,4,0,0,0-4,4v2" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M20,21V19a4,4,0,0,0-4-4H8a4,4,0,0,0-4,4v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="12" cy="7" fill="none" r="4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="7" fill="none" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/user-x-svgrepo-com.svg b/front/public/assets/icons/user-x-svgrepo-com.svg
index b9d36ae..683277c 100644
--- a/front/public/assets/icons/user-x-svgrepo-com.svg
+++ b/front/public/assets/icons/user-x-svgrepo-com.svg
@@ -11,13 +11,13 @@
 
 <g>
 
-<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M17,21V19a4,4,0,0,0-4-4H5a4,4,0,0,0-4,4v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<circle cx="9" cy="7" fill="none" r="4" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="9" cy="7" fill="none" r="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="22.1" y1="13.1" y2="8.9"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="22.1" y1="13.1" y2="8.9"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="22.1" y1="8.9" y2="13.1"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="17.9" x2="22.1" y1="8.9" y2="13.1"/>
 
 </g>
 
diff --git a/front/public/assets/icons/volume-down-svgrepo-com.svg b/front/public/assets/icons/volume-down-svgrepo-com.svg
index 72d6c48..1ecc293 100644
--- a/front/public/assets/icons/volume-down-svgrepo-com.svg
+++ b/front/public/assets/icons/volume-down-svgrepo-com.svg
@@ -11,9 +11,9 @@
 
 <g>
 
-<polygon fill="none" points="4.9 9 8.9 9 13.9 3 13.9 21 8.9 16 3.9 16 3.9 9 4.9 9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="none" points="4.9 9 8.9 9 13.9 3 13.9 21 8.9 16 3.9 16 3.9 9 4.9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M17.5,15a3,3,0,0,0,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M17.5,15a3,3,0,0,0,0-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/volume-mute-svgrepo-com.svg b/front/public/assets/icons/volume-mute-svgrepo-com.svg
index e723faa..693b2bd 100644
--- a/front/public/assets/icons/volume-mute-svgrepo-com.svg
+++ b/front/public/assets/icons/volume-mute-svgrepo-com.svg
@@ -9,7 +9,7 @@
 
 <g id="volume-mute">
 
-<polygon fill="none" points="8 9 12 9 17 3 17 21 12 16 7 16 7 9 8 9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="none" points="8 9 12 9 17 3 17 21 12 16 7 16 7 9 8 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/volume-off-svgrepo-com.svg b/front/public/assets/icons/volume-off-svgrepo-com.svg
index b60b034..1cb4105 100644
--- a/front/public/assets/icons/volume-off-svgrepo-com.svg
+++ b/front/public/assets/icons/volume-off-svgrepo-com.svg
@@ -11,15 +11,15 @@
 
 <g>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="21" y1="3" y2="21"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="21" y1="3" y2="21"/>
 
-<polyline fill="none" points="9.9 5.5 12 3 12 21 7 16 2 16 2 9 3 9 7 9 8 9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polyline fill="none" points="9.9 5.5 12 3 12 21 7 16 2 16 2 9 3 9 7 9 8 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M21.4,16a8.5,8.5,0,0,0,1.1-4.2c0-4.3-3.1-7.8-7-7.8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M21.4,16a8.5,8.5,0,0,0,1.1-4.2c0-4.3-3.1-7.8-7-7.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M15.5,20.5a5.2,5.2,0,0,0,3-1" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M15.5,20.5a5.2,5.2,0,0,0,3-1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M18.3,13a2.7,2.7,0,0,0,.2-1.1,2.9,2.9,0,0,0-3-2.9" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M18.3,13a2.7,2.7,0,0,0,.2-1.1,2.9,2.9,0,0,0-3-2.9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/volume-up-svgrepo-com.svg b/front/public/assets/icons/volume-up-svgrepo-com.svg
index 9915cf1..a3f0adf 100644
--- a/front/public/assets/icons/volume-up-svgrepo-com.svg
+++ b/front/public/assets/icons/volume-up-svgrepo-com.svg
@@ -9,11 +9,11 @@
 
 <g id="volume-up">
 
-<polygon fill="none" points="2.9 9 6.9 9 11.9 3 11.9 21 6.9 16 1.9 16 1.9 9 2.9 9" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<polygon fill="none" points="2.9 9 6.9 9 11.9 3 11.9 21 6.9 16 1.9 16 1.9 9 2.9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M15.5,19.5a7.3,7.3,0,0,0,7-7.5,7.3,7.3,0,0,0-7-7.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M15.5,19.5a7.3,7.3,0,0,0,7-7.5,7.3,7.3,0,0,0-7-7.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<path d="M15.5,15a3,3,0,0,0,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<path d="M15.5,15a3,3,0,0,0,0-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
 </g>
 
diff --git a/front/public/assets/icons/x-circle-svgrepo-com.svg b/front/public/assets/icons/x-circle-svgrepo-com.svg
index 9507347..7d4be12 100644
--- a/front/public/assets/icons/x-circle-svgrepo-com.svg
+++ b/front/public/assets/icons/x-circle-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="9.5" y2="14.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="9.5" y2="14.5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="14.5" y2="9.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="14.5" y2="9.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/x-square-svgrepo-com.svg b/front/public/assets/icons/x-square-svgrepo-com.svg
index 67bac7e..ba92413 100644
--- a/front/public/assets/icons/x-square-svgrepo-com.svg
+++ b/front/public/assets/icons/x-square-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
+<rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" x="2" y="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="9.5" y2="14.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="9.5" y2="14.5"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="14.5" y2="9.5"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.5" x2="9.5" y1="14.5" y2="9.5"/>
 
 </g>
 
diff --git a/front/public/assets/icons/zoom-out-svgrepo-com.svg b/front/public/assets/icons/zoom-out-svgrepo-com.svg
index cde5b67..0b4ef8c 100644
--- a/front/public/assets/icons/zoom-out-svgrepo-com.svg
+++ b/front/public/assets/icons/zoom-out-svgrepo-com.svg
@@ -11,11 +11,11 @@
 
 <g>
 
-<circle cx="10.1" cy="10.1" fill="none" r="8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+<circle cx="10.1" cy="10.1" fill="none" r="8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21.9" x2="16.3" y1="21.9" y2="16.3"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21.9" x2="16.3" y1="21.9" y2="16.3"/>
 
-<line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="13.1" x2="7.1" y1="10.1" y2="10.1"/>
+<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="13.1" x2="7.1" y1="10.1" y2="10.1"/>
 
 </g>
 
diff --git a/front/src/app/_variables.scss b/front/src/app/_variables.scss
index 8afe48b..a75739b 100644
--- a/front/src/app/_variables.scss
+++ b/front/src/app/_variables.scss
@@ -2,6 +2,9 @@
 $primary-white: #fefcf8;   // Blanco ahuevado gentil
 $border-grey: #e0ddd8;     // Gris suave para bordes
 $text-dark: #2a2926;       // Texto principal
+$standard-button-icon: #8d8d8d;       // Texto principal
+$standard-button-border: #b8b8b891;       // Texto principal
+$standard-button-hovered: #494949;       // Texto principal
 $text-muted: #706b63;      // Texto secundario
 
 // Colores de énfasis para cada acción
diff --git a/front/src/app/button/button.scss b/front/src/app/button/button.scss
index 226923c..ecbba6b 100644
--- a/front/src/app/button/button.scss
+++ b/front/src/app/button/button.scss
@@ -2,7 +2,8 @@
 
 button {
 	background: variables.$primary-white;
-	border: 2px solid variables.$border-grey;
+	border: 2px solid variables.$standard-button-border;
+	color: variables.$standard-button-icon;
 	border-radius: 12px;
 	overflow: hidden;
 	cursor: pointer;
@@ -14,8 +15,8 @@ button {
 	flex-shrink: 1;
 
 	&:hover {
-		color: variables.$primary-white;
-		transform: translateY(-2px);
+		color: variables.$standard-button-hovered;
+		transform: translateY(-5px) scale(1.07);
 		box-shadow: 0 6px 16px rgba(42, 41, 38, 0.1);
 	}
 
@@ -44,12 +45,22 @@ button {
 		}
 	}
 
+	&.show-button {
+	}
+	&.hide-button {
+	}
+	&.open-button {
+	}
+	&.close-button {
+	}
+
 	// Edit button - Pencil icon
 	&.edit-button {
 		color: variables.$edit-color;
 		border-color: variables.$edit-color;
 		&:hover {
 			background: variables.$edit-color;
+			color: variables.$primary-white;
 		}
 		svg-loader {
 			fill: variables.$edit-color;
@@ -62,6 +73,7 @@ button {
 		border-color: variables.$delete-color;
 		&:hover {
 			background: variables.$delete-color;
+			color: variables.$primary-white;
 		}
 		svg-loader {
 			fill: variables.$delete-color;
@@ -74,6 +86,7 @@ button {
 		border-color: variables.$download-color;
 		&:hover {
 			background: variables.$download-color;
+			color: variables.$primary-white;
 		}
 		svg-loader {
 			fill: variables.$download-color;
@@ -86,6 +99,7 @@ button {
 		border-color: variables.$share-color;
 		&:hover {
 			background: variables.$share-color;
+			color: variables.$primary-white;
 		}
 		svg-loader {
 			fill: variables.$share-color;
@@ -98,6 +112,7 @@ button {
 		border-color: variables.$buy-color;
 		&:hover {
 			background: variables.$buy-color;
+			color: variables.$primary-white;
 		}
 		svg-loader {
 			fill: variables.$buy-color;
diff --git a/front/src/app/mid-res-image/mid-res-image.html b/front/src/app/mid-res-image/mid-res-image.html
index 5d7c8ce..cd12b14 100644
--- a/front/src/app/mid-res-image/mid-res-image.html
+++ b/front/src/app/mid-res-image/mid-res-image.html
@@ -1,11 +1,37 @@
 <div class="mid-res-image-container">
 	<img [src]="src" [alt]="alt" class="img" loading="lazy" />
 	<div class="panel" (click)="openFullscreen($event)">
+		<div class="infoPanelMenu">
+			@if(isInfoPanelHidden) {
+			<app-button
+				label="ShowInfoPanel"
+				(click)="showInfoPanel($event)"
+				class="show-button"
+				tooltip="Show Image Info"
+				icon="assets/icons/push-left-svgrepo-com.svg"
+			></app-button>
+			} @else{
+			<app-button
+				label="HideInfoPanel"
+				(click)="hideInfoPanel($event)"
+				class="hide-button"
+				tooltip="Hide Image Info"
+				icon="assets/icons/push-right-svgrepo-com.svg"
+			></app-button>
+			}
+			<app-button
+				label="CloseFullscreen"
+				(click)="closeFullscreen($event)"
+				class="close-button"
+				tooltip="Close fullscreen"
+				icon="assets/icons/minimize-svgrepo-com.svg"
+			></app-button>
+		</div>
 		<div class="content">
 			<h3>{{title}}</h3>
 			<p>{{description}}</p>
 		</div>
-		<div class="buttons">
+		<div class="buttons-panel">
 			<app-button
 				label="EditImage"
 				class="edit-button"
diff --git a/front/src/app/mid-res-image/mid-res-image.scss b/front/src/app/mid-res-image/mid-res-image.scss
index 3e7eb4b..32dc007 100644
--- a/front/src/app/mid-res-image/mid-res-image.scss
+++ b/front/src/app/mid-res-image/mid-res-image.scss
@@ -31,14 +31,22 @@
 		flex-direction: column;
 		box-shadow: -4px 0 20px rgba(42, 41, 38, 0.2);
 		border-left: 1px solid variables.$border-grey;
+		padding: 2%;
+
+		.infoPanelMenu {
+			display: flex;
+			flex-grow: 1;
+			align-items: center;
+			justify-content: space-between;
+			margin: 0;
+			padding: 0;
+		}
 
 		div.content {
 			box-sizing: content-box;
 			height: 25%;
 			padding-top: 4rem;
 			padding-bottom: 4rem;
-			padding-left: 2rem;
-			padding-right: 2rem;
 			text-align: left;
 			vertical-align: middle;
 			align-content: center;
@@ -63,13 +71,17 @@
 			}
 		}
 
-		.buttons {
-			padding: 2rem 2rem;
+		.buttons-panel {
+			padding-top: 2rem;
+			padding-bottom: 2rem;
 			display: flex;
 			flex-wrap: wrap;
+			flex-grow: 1;
 			gap: 0.75rem;
 			border-bottom: 1px solid variables.$border-grey;
-			justify-content: space-evenly;
+			justify-content: space-around;
+			width: 100%;
+			align-items: center;
 		}
 
 		.comment-section {
diff --git a/front/src/app/mid-res-image/mid-res-image.ts b/front/src/app/mid-res-image/mid-res-image.ts
index bd4fa86..d746601 100644
--- a/front/src/app/mid-res-image/mid-res-image.ts
+++ b/front/src/app/mid-res-image/mid-res-image.ts
@@ -1,10 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { SvgLoader } from '../svg/svg';
-import { Button } from "../button/button";
+import { Button } from '../button/button';
 
 @Component({
 	selector: 'mid-res-image',
-	imports: [SvgLoader, Button],
+	imports: [Button],
 	templateUrl: './mid-res-image.html',
 	styleUrl: './mid-res-image.scss',
 })
@@ -16,8 +16,24 @@ export class MidResImage {
 		'A short description of the image that must be at least 20 characters long. Then it should be edited.';
 	@Output() closed = new EventEmitter<void>();
 
+	isInfoPanelHidden: boolean = false;
+
 	comments: string[] = [];
 
+	hideInfoPanel(event: MouseEvent): void {
+		event.stopPropagation();
+		this.isInfoPanelHidden = !this.isInfoPanelHidden;
+	}
+
+	showInfoPanel(event: MouseEvent): void {
+		event.stopPropagation();
+		this.isInfoPanelHidden = !this.isInfoPanelHidden;
+	}
+
+	closeFullscreen(event: MouseEvent): void {
+		event.stopPropagation();
+	}
+
 	openFullscreen(event: MouseEvent): void {
 		event.stopPropagation();
 	}
diff --git a/front/src/styles.scss b/front/src/styles.scss
index e50a47e..50a9bbf 100644
--- a/front/src/styles.scss
+++ b/front/src/styles.scss
@@ -1 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
\ No newline at end of file
+/* You can add global styles to this file, and also import other style files */
+html {
+	width: 100dvw;
+	height: 100dvh;
+}