From 0d243e989ff5c218f5502eaa9b7c58208645fa1a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 7 Jan 2025 21:33:06 -0500
Subject: [PATCH] add classes to all svgs

---
 .trunk/configs/svgo.config.js                 |  1 +
 .../assets/logos/romm_logo_ps2_circle.svg     | 28 ++++++++++++++++-
 .../assets/logos/romm_logo_ps2_square.svg     | 17 ++++++++++-
 .../assets/logos/romm_logo_snes_circle.svg    | 30 ++++++++++++++++++-
 .../assets/logos/romm_logo_snes_square.svg    | 16 +++++++++-
 .../logos/romm_logo_xbox_one_circle.svg       | 29 +++++++++++++++++-
 .../logos/romm_logo_xbox_one_square.svg       | 17 ++++++++++-
 frontend/assets/logotipo.svg                  |  2 +-
 8 files changed, 133 insertions(+), 7 deletions(-)

diff --git a/.trunk/configs/svgo.config.js b/.trunk/configs/svgo.config.js
index b257d1349..f2aa32ecd 100644
--- a/.trunk/configs/svgo.config.js
+++ b/.trunk/configs/svgo.config.js
@@ -7,6 +7,7 @@ module.exports = {
           removeViewBox: false, // https://github.com/svg/svgo/issues/1128
           sortAttrs: true,
           removeOffCanvasPaths: true,
+          cleanupIDs: false,
         },
       },
     },
diff --git a/frontend/assets/logos/romm_logo_ps2_circle.svg b/frontend/assets/logos/romm_logo_ps2_circle.svg
index 403a18001..6cd4a4312 100644
--- a/frontend/assets/logos/romm_logo_ps2_circle.svg
+++ b/frontend/assets/logos/romm_logo_ps2_circle.svg
@@ -1 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><ellipse cx="514.154" cy="512.52" rx="255.965" ry="255.986" style="fill:none"/></clipPath><clipPath id="b" clipPathUnits="userSpaceOnUse"><ellipse cx="136.664" cy="135.457" rx="135.447" ry="135.458" style="fill:none"/></clipPath><clipPath id="c" clipPathUnits="userSpaceOnUse"><ellipse cx="511.887" cy="512.519" rx="255.965" ry="255.986" style="fill:none"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-136.606 -135.75)scale(.52916)"><path d="M258.225 256.532h511.892v511.976H258.225z" clip-path="none" style="fill:#ede5f8;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><path d="M770.12 256.537 258.227 768.43v.08H770.12z" clip-path="none" style="fill:#bea4e1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g><g clip-path="url(#b)" style="display:inline" transform="translate(-1.2)"><path d="M107.995 57.13c1.73.01 3.364-.69 3.768-2.723.033-.168.954-4.76 1.828-10.335 2.114-13.496 2.258-14.034 4.357-16.33.93-1.018 2.158-2.311 2.873-2.581 21.252-8.012 44.259-6.475 59.865-2.615 1.044.258 2.348 1.17 3.004 1.697 1.594 1.281 3.859 4.39 4.502 6.182.664 1.845 2.552 10.261 3.783 16.855l.951 5.098c19.002 12.53 38.002 33.273 38.002 66.139 0 3.905.826 10.024 7.712 57.139 11.304 77.349 11.18 76.379 11.184 87.361-.16 5.897-.418 7.918-.43 7.918-5.057.002-91.488-.056-102.127 0-.95.005-16.078-27.841-20.79-36.368l-4.833-2.92c-3.032 3.51-6.39 6.308-11.03 9.19-9.117 5.663-18.838 8.35-28.642 7.916-5.063-.223-8.059-.79-13.195-2.496-15.15-5.031-27.413-16.434-31.838-29.605l-.953-2.835-34.751-.003s-.024-4.123-.002-156.684z" style="display:inline;fill:#553e98;fill-opacity:1;stroke-width:.529163"/><path d="M207.816 64.307 43.529 228.593c6.075 7.852 14.96 14.244 25.248 17.661 5.137 1.706 8.133 2.273 13.196 2.497 9.803.433 19.525-2.254 28.643-7.917 4.64-2.881 7.997-5.68 11.029-9.19l4.832 2.92c4.713 8.527 19.84 36.373 20.791 36.368 10.638-.055 97.07.001 102.127 0 .012 0 .269-2.02.43-7.918-.005-10.982.12-10.012-11.185-87.36-6.885-47.116-7.71-53.234-7.71-57.14 0-24.063-10.2-41.607-23.114-54.207" style="display:inline;fill:#371f69;fill-opacity:1;stroke-width:.529163"/></g><g clip-path="url(#c)" style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)"><circle cx="546.499" cy="406.565" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="474.097" cy="477.116" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="617.882" cy="477.435" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="547.116" cy="552.273" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933">
+    <defs>
+        <clipPath clipPathUnits="userSpaceOnUse" id="main-clip">
+            <ellipse style="fill:none" cx="514.154" cy="512.52" rx="255.965" ry="255.986"/>
+        </clipPath>
+        <clipPath clipPathUnits="userSpaceOnUse" id="logo-clip">
+            <ellipse style="fill:none" cx="136.664" cy="135.457" rx="135.447" ry="135.458"/>
+        </clipPath>
+        <clipPath clipPathUnits="userSpaceOnUse" id="elements-clip">
+            <ellipse style="fill:none" cx="511.887" cy="512.519" rx="255.965" ry="255.986"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#main-clip)" transform="translate(-136.606 -135.75)scale(.52916)">
+        <path class="background-light" style="fill:#ede5f8;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" d="M258.225 256.532h511.892v511.976H258.225z"/>
+        <path class="background-dark" style="fill:#bea4e1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" d="M770.12 256.537 258.227 768.43v.08H770.12z"/>
+    </g>
+    <g clip-path="url(#logo-clip)" style="display:inline" transform="translate(-1.2)">
+        <path class="logo-primary" style="fill:#553e98;fill-opacity:1;stroke-width:.529163" d="M107.995 57.13c1.73.01 3.364-.69 3.768-2.723.033-.168.954-4.76 1.828-10.335 2.114-13.496 2.258-14.034 4.357-16.33.93-1.018 2.158-2.311 2.873-2.581 21.252-8.012 44.259-6.475 59.865-2.615 1.044.258 2.348 1.17 3.004 1.697 1.594 1.281 3.859 4.39 4.502 6.182.664 1.845 2.552 10.261 3.783 16.855l.951 5.098c19.002 12.53 38.002 33.273 38.002 66.139 0 3.905.826 10.024 7.712 57.139 11.304 77.349 11.18 76.379 11.184 87.361-.16 5.897-.418 7.918-.43 7.918-5.057.002-91.488-.056-102.127 0-.95.005-16.078-27.841-20.79-36.368l-4.833-2.92c-3.032 3.51-6.39 6.308-11.03 9.19-9.117 5.663-18.838 8.35-28.642 7.916-5.063-.223-8.059-.79-13.195-2.496-15.15-5.031-27.413-16.434-31.838-29.605l-.953-2.835-34.751-.003s-.024-4.123-.002-156.684z"/>
+        <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:.529163" d="M207.816 64.307 43.529 228.593c6.075 7.852 14.96 14.244 25.248 17.661 5.137 1.706 8.133 2.273 13.196 2.497 9.803.433 19.525-2.254 28.643-7.917 4.64-2.881 7.997-5.68 11.029-9.19l4.832 2.92c4.713 8.527 19.84 36.373 20.791 36.368 10.638-.055 97.07.001 102.127 0 .012 0 .269-2.02.43-7.918-.005-10.982.12-10.012-11.185-87.36-6.885-47.116-7.71-53.234-7.71-57.14 0-24.063-10.2-41.607-23.114-54.207"/>
+    </g>
+    <g clip-path="url(#elements-clip)" style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)">
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="546.499" cy="406.565" r="31.529"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="474.097" cy="477.116" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="617.882" cy="477.435" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="547.116" cy="552.273" r="31.529"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logos/romm_logo_ps2_square.svg b/frontend/assets/logos/romm_logo_ps2_square.svg
index 01df8feb2..a794ba250 100644
--- a/frontend/assets/logos/romm_logo_ps2_square.svg
+++ b/frontend/assets/logos/romm_logo_ps2_square.svg
@@ -1 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><path d="M258.225 256.532h511.892v511.976H258.225z" style="fill:#ede5f8;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-136.606 -135.75)scale(.52916)"/><path d="M770.12 256.537 258.227 768.43v.08H770.12z" style="fill:#bea4e1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-136.606 -135.75)scale(.52916)"/><g style="display:inline"><path d="M107.995 57.13c1.73.01 3.364-.69 3.768-2.723.033-.168.954-4.76 1.828-10.335 2.114-13.496 2.258-14.034 4.357-16.33.93-1.018 2.158-2.311 2.873-2.581 21.252-8.012 44.259-6.475 59.865-2.615 1.044.258 2.348 1.17 3.004 1.697 1.594 1.281 3.859 4.39 4.502 6.182.664 1.845 2.552 10.261 3.783 16.855l.951 5.098c19.002 12.53 38.002 33.273 38.002 66.139 0 3.905.826 10.024 7.712 57.139 11.304 77.349 11.18 76.379 11.184 87.361-.16 5.897-.418 7.918-.43 7.918-5.057.002-91.488-.056-102.127 0-.95.005-16.078-27.841-20.79-36.368l-4.833-2.92c-3.032 3.51-6.39 6.308-11.03 9.19-9.117 5.663-18.838 8.35-28.642 7.916-5.063-.223-8.059-.79-13.195-2.496-15.15-5.031-27.413-16.434-31.838-29.605l-.953-2.835-34.751-.003s-.024-4.123-.002-156.684z" style="display:inline;fill:#553e98;fill-opacity:1;stroke-width:.529163" transform="translate(-1.2)"/><path d="M207.816 64.307 43.529 228.593c6.075 7.852 14.96 14.244 25.248 17.661 5.137 1.706 8.133 2.273 13.196 2.497 9.803.433 19.525-2.254 28.643-7.917 4.64-2.881 7.997-5.68 11.029-9.19l4.832 2.92c4.713 8.527 19.84 36.373 20.791 36.368 10.638-.055 97.07.001 102.127 0 .012 0 .269-2.02.43-7.918-.005-10.982.12-10.012-11.185-87.36-6.885-47.116-7.71-53.234-7.71-57.14 0-24.063-10.2-41.607-23.114-54.207" style="display:inline;fill:#371f69;fill-opacity:1;stroke-width:.529163" transform="translate(-1.2)"/></g><g style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)"><circle cx="546.499" cy="406.565" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="474.097" cy="477.116" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="617.882" cy="477.435" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="547.116" cy="552.273" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933">
+    <path class="background-light" style="fill:#ede5f8;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-136.606 -135.75)scale(.52916)" d="M258.225 256.532h511.892v511.976H258.225z"/>
+    <path class="background-dark" style="fill:#bea4e1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-136.606 -135.75)scale(.52916)" d="M770.12 256.537 258.227 768.43v.08H770.12z"/>
+
+    <g style="display:inline">
+        <path class="logo-primary" style="fill:#553e98;fill-opacity:1;stroke-width:.529163" transform="translate(-1.2)" d="M107.995 57.13c1.73.01 3.364-.69 3.768-2.723.033-.168.954-4.76 1.828-10.335 2.114-13.496 2.258-14.034 4.357-16.33.93-1.018 2.158-2.311 2.873-2.581 21.252-8.012 44.259-6.475 59.865-2.615 1.044.258 2.348 1.17 3.004 1.697 1.594 1.281 3.859 4.39 4.502 6.182.664 1.845 2.552 10.261 3.783 16.855l.951 5.098c19.002 12.53 38.002 33.273 38.002 66.139 0 3.905.826 10.024 7.712 57.139 11.304 77.349 11.18 76.379 11.184 87.361-.16 5.897-.418 7.918-.43 7.918-5.057.002-91.488-.056-102.127 0-.95.005-16.078-27.841-20.79-36.368l-4.833-2.92c-3.032 3.51-6.39 6.308-11.03 9.19-9.117 5.663-18.838 8.35-28.642 7.916-5.063-.223-8.059-.79-13.195-2.496-15.15-5.031-27.413-16.434-31.838-29.605l-.953-2.835-34.751-.003s-.024-4.123-.002-156.684z"/>
+        <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:.529163" transform="translate(-1.2)" d="M207.816 64.307 43.529 228.593c6.075 7.852 14.96 14.244 25.248 17.661 5.137 1.706 8.133 2.273 13.196 2.497 9.803.433 19.525-2.254 28.643-7.917 4.64-2.881 7.997-5.68 11.029-9.19l4.832 2.92c4.713 8.527 19.84 36.373 20.791 36.368 10.638-.055 97.07.001 102.127 0 .012 0 .269-2.02.43-7.918-.005-10.982.12-10.012-11.185-87.36-6.885-47.116-7.71-53.234-7.71-57.14 0-24.063-10.2-41.607-23.114-54.207"/>
+    </g>
+
+    <g style="display:inline" transform="translate(-135.407 -135.75) scale(.52916)">
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="546.499" cy="406.565" r="31.529"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="474.097" cy="477.116" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"  cx="617.882" cy="477.435" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"  cx="547.116" cy="552.273" r="31.529"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logos/romm_logo_snes_circle.svg b/frontend/assets/logos/romm_logo_snes_circle.svg
index 4dd651af8..2daac4fb3 100644
--- a/frontend/assets/logos/romm_logo_snes_circle.svg
+++ b/frontend/assets/logos/romm_logo_snes_circle.svg
@@ -1 +1,29 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><ellipse cx="511.924" cy="511.984" rx="261.064" ry="261.108" style="fill:none"/></clipPath><clipPath id="b" clipPathUnits="userSpaceOnUse"><ellipse cx="533.565" cy="525.18" rx="261.064" ry="261.108" style="fill:none"/></clipPath><clipPath id="c" clipPathUnits="userSpaceOnUse"><ellipse cx="511.924" cy="511.984" rx="261.064" ry="261.108" style="fill:none"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-130.058 -130.093)scale(.51871)"><path d="M250.857 250.876h522.13v522.215h-522.13z" style="fill:#ede5f8;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><path d="m772.988 302.397-522.13 418.762v51.934h522.13z" style="fill:#bea4e1;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g><g clip-path="url(#b)" transform="translate(-141.283 -136.938)scale(.51871)"><path d="M272.491 676.872s-2.115-.002 4.585-.002c157.422 0 132.045-.964 145.066 8.047 27.763 19.214 55.323 29.911 88.688 34.423 11.025 1.49 37.291 1.734 46.972.435 56.029-7.52 102.142-34.316 135.175-78.55 22.553-30.201 35.59-66.05 37.99-104.47.728-11.659.149-28.413-1.342-38.824-6.04-42.184-24.29-79.402-53.797-109.703-13.101-13.454-27.146-24.417-44.138-34.452-3.37-1.99-3.584-2.41-4.387-8.603l-.442-3.403-7.617-3.812c-12.234-6.12-25.671-10.872-39.699-14.038-16.254-3.669-16.983-3.706-78.698-4.022-31.914-.164-58.797-.104-59.741.133-1.163.292-2.15 1.442-3.06 3.566-.74 1.725-1.986 3.48-2.77 3.899-1.084.58-162.764.9-162.777.9-.008 0-.002 348.476-.002 348.476zm395.41-150.069q-625.582-413.89 0 0" style="fill:#553e98;fill-opacity:1;stroke-width:.51"/><path d="M687.6 401.41 344.145 676.841c73.36.061 67.776.935 78.065 8.056 27.763 19.214 55.323 29.911 88.689 34.423 11.024 1.49 37.29 1.734 46.971.435 56.03-7.52 102.143-34.316 135.176-78.551 22.553-30.2 35.588-66.05 37.989-104.47.728-11.658.15-28.412-1.341-38.824-5.192-36.26-19.465-68.818-42.096-96.502z" style="fill:#371f69;fill-opacity:1;stroke-width:.51"/></g><g clip-path="url(#c)" transform="translate(-130.058 -130.093)scale(.51871)"><rect width="81.956" height="199.373" x="624.479" y="-171.248" ry="40.978" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/><rect width="81.956" height="199.373" x="731.539" y="-197.079" ry="40.978" style="fill:#221342;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/><circle cx="513.278" cy="442.374" r="35.595" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="424.748" cy="511.845" r="35.595" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="511.714" cy="581.19" r="35.595" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="600.951" cy="509.861" r="35.595" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
+<svg width="1024" height="1024" viewBox="0 0 270.933 270.933" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <clipPath clipPathUnits="userSpaceOnUse" id="main-clip">
+            <ellipse style="fill:none" cx="511.924" cy="511.984" rx="261.064" ry="261.108"/>
+        </clipPath>
+        <clipPath clipPathUnits="userSpaceOnUse" id="logo-clip">
+            <ellipse style="fill:none" cx="533.565" cy="525.18" rx="261.064" ry="261.108"/>
+        </clipPath>
+        <clipPath clipPathUnits="userSpaceOnUse" id="elements-clip">
+            <ellipse style="fill:none" cx="511.924" cy="511.984" rx="261.064" ry="261.108"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#main-clip)" transform="translate(-130.058 -130.093) scale(.51871)">
+        <path class="background-light" style="fill:#ede5f8;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" d="M250.857 250.876h522.13v522.215h-522.13z"/>
+        <path class="background-dark" style="fill:#bea4e1;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" d="m772.988 302.397-522.13 418.762v51.934h522.13z"/>
+    </g>
+    <g transform="translate(-141.283 -136.938) scale(.51871)" clip-path="url(#logo-clip)">
+        <path class="logo-primary" style="fill:#553e98;fill-opacity:1;stroke-width:.51" d="M272.491 676.872s-2.115-.002 4.585-.002c157.422 0 132.045-.964 145.066 8.047 27.763 19.214 55.323 29.911 88.688 34.423 11.025 1.49 37.291 1.734 46.972.435 56.029-7.52 102.142-34.316 135.175-78.55 22.553-30.201 35.59-66.05 37.99-104.47.728-11.659.149-28.413-1.342-38.824-6.04-42.184-24.29-79.402-53.797-109.703-13.101-13.454-27.146-24.417-44.138-34.452-3.37-1.99-3.584-2.41-4.387-8.603l-.442-3.403-7.617-3.812c-12.234-6.12-25.671-10.872-39.699-14.038-16.254-3.669-16.983-3.706-78.698-4.022-31.914-.164-58.797-.104-59.741.133-1.163.292-2.15 1.442-3.06 3.566-.74 1.725-1.986 3.48-2.77 3.899-1.084.58-162.764.9-162.777.9-.008 0-.002 348.476-.002 348.476zm395.41-150.069c-417.055-275.927-417.055-275.927 0 0z"/>
+        <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:.51" d="M687.6 401.41 344.145 676.841c73.36.061 67.776.935 78.065 8.056 27.763 19.214 55.323 29.911 88.689 34.423 11.024 1.49 37.29 1.734 46.971.435 56.03-7.52 102.143-34.316 135.176-78.551 22.553-30.2 35.588-66.05 37.989-104.47.728-11.658.15-28.412-1.341-38.824-5.192-36.26-19.465-68.818-42.096-96.502z"/>
+    </g>
+    <g transform="translate(-130.058 -130.093) scale(.51871)" clip-path="url(#elements-clip)">
+        <rect class="stripe-primary" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" width="81.956" height="199.373" x="624.479" y="-171.248" ry="40.978" transform="rotate(51.642)"/>
+        <rect class="stripe-secondary" style="fill:#221342;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" width="81.956" height="199.373" x="731.539" y="-197.079" ry="40.978" transform="rotate(51.642)"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="511.714" cy="581.19" r="35.595"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="600.951" cy="509.861" r="35.595"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="513.278" cy="442.374" r="35.595"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="424.748" cy="511.845" r="35.595"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logos/romm_logo_snes_square.svg b/frontend/assets/logos/romm_logo_snes_square.svg
index 4a65c0b98..6a7654fd2 100644
--- a/frontend/assets/logos/romm_logo_snes_square.svg
+++ b/frontend/assets/logos/romm_logo_snes_square.svg
@@ -1 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><path d="M250.857 250.876h522.13v522.215h-522.13z" style="fill:#ede5f8;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-130.058 -130.093)scale(.51871)"/><path d="m772.988 302.397-522.13 418.762v51.934h522.13z" style="fill:#bea4e1;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-130.058 -130.093)scale(.51871)"/><path d="M272.491 676.872s-2.115-.002 4.585-.002c157.422 0 132.045-.964 145.066 8.047 27.763 19.214 55.323 29.911 88.688 34.423 11.025 1.49 37.291 1.734 46.972.435 56.029-7.52 102.142-34.316 135.175-78.55 22.553-30.201 35.59-66.05 37.99-104.47.728-11.659.149-28.413-1.342-38.824-6.04-42.184-24.29-79.402-53.797-109.703-13.101-13.454-27.146-24.417-44.138-34.452-3.37-1.99-3.584-2.41-4.387-8.603l-.442-3.403-7.617-3.812c-12.234-6.12-25.671-10.872-39.699-14.038-16.254-3.669-16.983-3.706-78.698-4.022-31.914-.164-58.797-.104-59.741.133-1.163.292-2.15 1.442-3.06 3.566-.74 1.725-1.986 3.48-2.77 3.899-1.084.58-162.764.9-162.777.9-.008 0-.002 348.476-.002 348.476zm395.41-150.069q-625.582-413.89 0 0" style="fill:#553e98;fill-opacity:1;stroke-width:.51" transform="translate(-141.283 -136.938)scale(.51871)"/><path d="M687.6 401.41 344.145 676.841c73.36.061 67.776.935 78.065 8.056 27.763 19.214 55.323 29.911 88.689 34.423 11.024 1.49 37.29 1.734 46.971.435 56.03-7.52 102.143-34.316 135.176-78.551 22.553-30.2 35.588-66.05 37.989-104.47.728-11.658.15-28.412-1.341-38.824-5.192-36.26-19.465-68.818-42.096-96.502z" style="fill:#371f69;fill-opacity:1;stroke-width:.51" transform="translate(-141.283 -136.938)scale(.51871)"/><g transform="translate(-130.058 -130.093)scale(.51871)"><rect width="81.956" height="199.373" x="624.479" y="-171.248" ry="40.978" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/><rect width="81.956" height="199.373" x="731.539" y="-197.079" ry="40.978" style="fill:#221342;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/><circle cx="513.278" cy="442.374" r="35.595" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="424.748" cy="511.845" r="35.595" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="511.714" cy="581.19" r="35.595" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="600.951" cy="509.861" r="35.595" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933">
+    <path class="background-light" style="fill:#ede5f8;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-130.058 -130.093)scale(.51871)" d="M250.857 250.876h522.13v522.215h-522.13z"/>
+    <path class="background-dark" style="fill:#bea4e1;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" transform="translate(-130.058 -130.093)scale(.51871)" d="m772.988 302.397-522.13 418.762v51.934h522.13z"/>
+    <path class="logo-primary" style="fill:#553e98;fill-opacity:1;stroke-width:.51" transform="translate(-141.283 -136.938)scale(.51871)" d="M272.491 676.872s-2.115-.002 4.585-.002c157.422 0 132.045-.964 145.066 8.047 27.763 19.214 55.323 29.911 88.688 34.423 11.025 1.49 37.291 1.734 46.972.435 56.029-7.52 102.142-34.316 135.175-78.55 22.553-30.201 35.59-66.05 37.99-104.47.728-11.659.149-28.413-1.342-38.824-6.04-42.184-24.29-79.402-53.797-109.703-13.101-13.454-27.146-24.417-44.138-34.452-3.37-1.99-3.584-2.41-4.387-8.603l-.442-3.403-7.617-3.812c-12.234-6.12-25.671-10.872-39.699-14.038-16.254-3.669-16.983-3.706-78.698-4.022-31.914-.164-58.797-.104-59.741.133-1.163.292-2.15 1.442-3.06 3.566-.74 1.725-1.986 3.48-2.77 3.899-1.084.58-162.764.9-162.777.9-.008 0-.002 348.476-.002 348.476zm395.41-150.069q-625.582-413.89 0 0"/>
+    <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:.51" transform="translate(-141.283 -136.938)scale(.51871)" d="M687.6 401.41 344.145 676.841c73.36.061 67.776.935 78.065 8.056 27.763 19.214 55.323 29.911 88.689 34.423 11.024 1.49 37.29 1.734 46.971.435 56.03-7.52 102.143-34.316 135.176-78.551 22.553-30.2 35.588-66.05 37.989-104.47.728-11.658.15-28.412-1.341-38.824-5.192-36.26-19.465-68.818-42.096-96.502z"/>
+
+    <g transform="translate(-130.058 -130.093) scale(.51871)">
+        <rect class="stripe-primary" width="81.956" height="199.373" x="624.479" y="-171.248" ry="40.978" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/>
+        <rect class="stripe-secondary" width="81.956" height="199.373" x="731.539" y="-197.079" ry="40.978" style="fill:#221342;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="513.278" cy="442.374" r="35.595"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="424.748" cy="511.845" r="35.595"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="511.714" cy="581.19" r="35.595"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="600.951" cy="509.861" r="35.595"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logos/romm_logo_xbox_one_circle.svg b/frontend/assets/logos/romm_logo_xbox_one_circle.svg
index 7f8fc4f5b..3f2c4cdc9 100644
--- a/frontend/assets/logos/romm_logo_xbox_one_circle.svg
+++ b/frontend/assets/logos/romm_logo_xbox_one_circle.svg
@@ -1 +1,28 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><ellipse cx="511.875" cy="512.551" rx="255.946" ry="255.984" style="fill:none"/></clipPath><clipPath id="b" clipPathUnits="userSpaceOnUse"><ellipse cx="135.457" cy="135.471" rx="135.436" ry="135.456" style="fill:none"/></clipPath><clipPath id="c" clipPathUnits="userSpaceOnUse"><ellipse cx="511.875" cy="512.551" rx="255.946" ry="255.984" style="fill:none"/></clipPath></defs><path d="M255.928 256.564H767.82V768.54H255.928Z" clip-path="url(#a)" style="fill:#ede5f8;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)"/><path d="m714.366 256.564-458.44 458.44v53.536H767.82V256.564Z" clip-path="url(#a)" style="fill:#bea4e1;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)"/><g clip-path="url(#b)" style="display:inline"><path d="M601.91 768.54c-2.735-.066-43.37-47.717-83.736-79.261-2.784-2.176-6.65-5.2-8.593-6.721-3.886-3.045-10.784-7.06-11.479-7.461-1.19-.687-2.393-1.272-6.665-3.15-4.524-1.99-13.567-4.542-18.772-5.298-8.498-1.236-33.84-1.639-96.251-1.582l-120.486.11c-.016-82.184-.01-236.036-.013-305.108l88.831.232c39.029.101 40.847-.189 47.144-3.008 13.443-6.019 68.906-76.53 83.114-82.973 7.254-3.29 16.603-4.702 23.918-3.202 1.581.324 6.626 1.157 11.212 1.852 10.895 1.65 18.218 2.754 35.434 7.376 28.676 7.697 56.638 19.386 58.66 20.31 11.937 5.453 25.411 12.472 29.43 16.271 1.59 1.504 3.282 3.542 4.083 4.852 3.524 5.765 11.034 19.845 11.756 22.333 9.175 22.007 17.356 44.381 25.733 66.7 3.979 11.415 8.336 22.57 12.276 33.945 3.358 9.785 10.614 30.128 11.045 30.968 5.604 15.717 10.419 31.655 15.204 47.643 2.989 9.93 6.674 22.862 10.253 36.626 5.39 18.118 10.909 36.205 14.226 54.889.718 3.96 3.264 19.802 3.445 21.053.437 3.026 3.277 25.867 3.851 31.073 2.626 23.81 2.15 68.545-17.678 101.54-.1.167-2.65.031-2.707.032-9.042.065-31.907-.03-39.664-.043-15.94-.029-83.501.005-83.508.005z" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-dasharray:none" transform="translate(-135.407 -135.75)scale(.52916)"/><path d="M115.894 9.256c-7 3.173-37.415 41.18-43.992 44.125-3.331 1.492-4.294 1.645-24.947 1.591l-46.94-.189c0 36.55-.002 117.963.006 161.45l26.456-.023L204.26 38.36c-.75-1.387-1.84-3.095-2.388-3.99-.424-.694-1.18-1.633-2.021-2.428-2.126-2.01-9.256-5.725-15.573-8.61-10.144-4.633-20.204-7.68-31.041-10.748-9.11-2.446-17.249-3.626-18.752-3.903-2.413-.444-5.031-.84-5.932-.98-.641-.098-6.525-1.225-12.658 1.555Z" style="fill:#553e98;fill-opacity:1;stroke-width:0"/></g><g clip-path="url(#c)" style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)"><circle cx="530.532" cy="381.817" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0"/><circle cx="471.565" cy="440.348" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0"/><circle cx="590.601" cy="439.252" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0"/><circle cx="530.441" cy="499.948" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933">
+    <defs>
+        <clipPath id="main-clip" clipPathUnits="userSpaceOnUse">
+            <ellipse cx="511.875" cy="512.551" rx="255.946" ry="255.984" style="fill:none"/>
+        </clipPath>
+        <clipPath id="logo-clip" clipPathUnits="userSpaceOnUse">
+            <ellipse cx="135.457" cy="135.471" rx="135.436" ry="135.456" style="fill:none"/>
+        </clipPath>
+        <clipPath id="elements-clip" clipPathUnits="userSpaceOnUse">
+            <ellipse cx="511.875" cy="512.551" rx="255.946" ry="255.984" style="fill:none"/>
+        </clipPath>
+    </defs>
+
+    <path class="background-light" clip-path="url(#main-clip)" style="fill:#ede5f8;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)" d="M255.928 256.564H767.82V768.54H255.928Z"/>
+    <path class="background-dark" clip-path="url(#main-clip)" style="fill:#bea4e1;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)" d="m714.366 256.564-458.44 458.44v53.536H767.82V256.564Z"/>
+
+    <g clip-path="url(#logo-clip)" style="display:inline">
+        <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:0;stroke-dasharray:none" transform="translate(-135.407 -135.75)scale(.52916)" d="M601.91 768.54c-2.735-.066-43.37-47.717-83.736-79.261-2.784-2.176-6.65-5.2-8.593-6.721-3.886-3.045-10.784-7.06-11.479-7.461-1.19-.687-2.393-1.272-6.665-3.15-4.524-1.99-13.567-4.542-18.772-5.298-8.498-1.236-33.84-1.639-96.251-1.582l-120.486.11c-.016-82.184-.01-236.036-.013-305.108l88.831.232c39.029.101 40.847-.189 47.144-3.008 13.443-6.019 68.906-76.53 83.114-82.973 7.254-3.29 16.603-4.702 23.918-3.202 1.581.324 6.626 1.157 11.212 1.852 10.895 1.65 18.218 2.754 35.434 7.376 28.676 7.697 56.638 19.386 58.66 20.31 11.937 5.453 25.411 12.472 29.43 16.271 1.59 1.504 3.282 3.542 4.083 4.852 3.524 5.765 11.034 19.845 11.756 22.333 9.175 22.007 17.356 44.381 25.733 66.7 3.979 11.415 8.336 22.57 12.276 33.945 3.358 9.785 10.614 30.128 11.045 30.968 5.604 15.717 10.419 31.655 15.204 47.643 2.989 9.93 6.674 22.862 10.253 36.626 5.39 18.118 10.909 36.205 14.226 54.889.718 3.96 3.264 19.802 3.445 21.053.437 3.026 3.277 25.867 3.851 31.073 2.626 23.81 2.15 68.545-17.678 101.54-.1.167-2.65.031-2.707.032-9.042.065-31.907-.03-39.664-.043-15.94-.029-83.501.005-83.508.005z"/>
+        <path class="logo-primary" d="M115.894 9.256c-7 3.173-37.415 41.18-43.992 44.125-3.331 1.492-4.294 1.645-24.947 1.591l-46.94-.189c0 36.55-.002 117.963.006 161.45l26.456-.023L204.26 38.36c-.75-1.387-1.84-3.095-2.388-3.99-.424-.694-1.18-1.633-2.021-2.428-2.126-2.01-9.256-5.725-15.573-8.61-10.144-4.633-20.204-7.68-31.041-10.748-9.11-2.446-17.249-3.626-18.752-3.903-2.413-.444-5.031-.84-5.932-.98-.641-.098-6.525-1.225-12.658 1.555Z" style="fill:#553e98;fill-opacity:1;stroke-width:0" />
+    </g>
+
+    <g clip-path="url(#elements-clip)" style="display:inline" transform="translate(-135.407 -135.75) scale(.52916)">
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="530.532" cy="381.817" r="31.529"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="471.565" cy="440.348" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="590.601" cy="439.252" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="530.441" cy="499.948" r="31.529"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logos/romm_logo_xbox_one_square.svg b/frontend/assets/logos/romm_logo_xbox_one_square.svg
index 15ef95c3a..a2535ef51 100644
--- a/frontend/assets/logos/romm_logo_xbox_one_square.svg
+++ b/frontend/assets/logos/romm_logo_xbox_one_square.svg
@@ -1 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933"><path d="M255.928 256.564H767.82V768.54H255.928z" style="fill:#ede5f8;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)"/><path d="m714.366 256.564-458.44 458.44v53.536H767.82V256.564Z" style="fill:#bea4e1;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)"/><g style="display:inline"><path d="M601.91 768.54c-2.735-.066-43.37-47.717-83.736-79.261-2.784-2.176-6.65-5.2-8.593-6.721-3.886-3.045-10.784-7.06-11.479-7.461-1.19-.687-2.393-1.272-6.665-3.15-4.524-1.99-13.567-4.542-18.772-5.298-8.498-1.236-33.84-1.639-96.251-1.582l-120.486.11c-.016-82.184-.01-236.036-.013-305.108l88.831.232c39.029.101 40.847-.189 47.144-3.008 13.443-6.019 68.906-76.53 83.114-82.973 7.254-3.29 16.603-4.702 23.918-3.202 1.581.324 6.626 1.157 11.212 1.852 10.895 1.65 18.218 2.754 35.434 7.376 28.676 7.697 56.638 19.386 58.66 20.31 11.937 5.453 25.411 12.472 29.43 16.271 1.59 1.504 3.282 3.542 4.083 4.852 3.524 5.765 11.034 19.845 11.756 22.333 9.175 22.007 17.356 44.381 25.733 66.7 3.979 11.415 8.336 22.57 12.276 33.945 3.358 9.785 10.614 30.128 11.045 30.968 5.604 15.717 10.419 31.655 15.204 47.643 2.989 9.93 6.674 22.862 10.253 36.626 5.39 18.118 10.909 36.205 14.226 54.889.718 3.96 3.264 19.802 3.445 21.053.437 3.026 3.277 25.867 3.851 31.073 2.626 23.81 2.15 68.545-17.678 101.54-.1.167-2.65.031-2.707.032-9.042.065-31.907-.03-39.664-.043-15.94-.029-83.501.005-83.508.005z" style="fill:#553e98;fill-opacity:1;stroke-width:0;stroke-dasharray:none" transform="translate(-135.407 -135.75)scale(.52916)"/><path d="M474.911 274.03c-13.227 5.997-70.704 77.822-83.133 83.387-6.296 2.82-8.115 3.11-47.143 3.008l-88.705-.358c.002 69.071-.004 222.924.012 305.107l49.995-.045 335.959-336.097c-1.417-2.623-3.478-5.85-4.512-7.543-.801-1.31-2.229-3.084-3.82-4.587-4.017-3.8-17.491-10.819-29.428-16.271-19.17-8.756-38.18-14.515-58.66-20.311-17.216-4.622-32.595-6.852-35.435-7.376-4.56-.84-9.508-1.589-11.211-1.851-1.211-.187-12.33-2.317-23.919 2.937" style="fill:#371f69;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)"/></g><g style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)"><circle cx="530.532" cy="381.817" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0"/><circle cx="471.565" cy="440.348" r="31.529" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0"/><circle cx="590.601" cy="439.252" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0"/><circle cx="530.441" cy="499.948" r="31.529" style="fill:#e1a38d;fill-opacity:1;stroke-width:0"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024" height="1024" viewBox="0 0 270.933 270.933">
+    <path class="background-light" style="fill:#ede5f8;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)" d="M255.928 256.564H767.82V768.54H255.928z"/>
+    <path class="background-dark" style="fill:#bea4e1;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)" d="m714.366 256.564-458.44 458.44v53.536H767.82V256.564Z"/>
+
+    <g style="display:inline">
+        <path class="logo-primary" style="fill:#553e98;fill-opacity:1;stroke-width:0;stroke-dasharray:none" transform="translate(-135.407 -135.75)scale(.52916)" d="M601.91 768.54c-2.735-.066-43.37-47.717-83.736-79.261-2.784-2.176-6.65-5.2-8.593-6.721-3.886-3.045-10.784-7.06-11.479-7.461-1.19-.687-2.393-1.272-6.665-3.15-4.524-1.99-13.567-4.542-18.772-5.298-8.498-1.236-33.84-1.639-96.251-1.582l-120.486.11c-.016-82.184-.01-236.036-.013-305.108l88.831.232c39.029.101 40.847-.189 47.144-3.008 13.443-6.019 68.906-76.53 83.114-82.973 7.254-3.29 16.603-4.702 23.918-3.202 1.581.324 6.626 1.157 11.212 1.852 10.895 1.65 18.218 2.754 35.434 7.376 28.676 7.697 56.638 19.386 58.66 20.31 11.937 5.453 25.411 12.472 29.43 16.271 1.59 1.504 3.282 3.542 4.083 4.852 3.524 5.765 11.034 19.845 11.756 22.333 9.175 22.007 17.356 44.381 25.733 66.7 3.979 11.415 8.336 22.57 12.276 33.945 3.358 9.785 10.614 30.128 11.045 30.968 5.604 15.717 10.419 31.655 15.204 47.643 2.989 9.93 6.674 22.862 10.253 36.626 5.39 18.118 10.909 36.205 14.226 54.889.718 3.96 3.264 19.802 3.445 21.053.437 3.026 3.277 25.867 3.851 31.073 2.626 23.81 2.15 68.545-17.678 101.54-.1.167-2.65.031-2.707.032-9.042.065-31.907-.03-39.664-.043-15.94-.029-83.501.005-83.508.005z"/>
+        <path class="logo-secondary" style="fill:#371f69;fill-opacity:1;stroke-width:0" transform="translate(-135.407 -135.75)scale(.52916)" d="M474.911 274.03c-13.227 5.997-70.704 77.822-83.133 83.387-6.296 2.82-8.115 3.11-47.143 3.008l-88.705-.358c.002 69.071-.004 222.924.012 305.107l49.995-.045 335.959-336.097c-1.417-2.623-3.478-5.85-4.512-7.543-.801-1.31-2.229-3.084-3.82-4.587-4.017-3.8-17.491-10.819-29.428-16.271-19.17-8.756-38.18-14.515-58.66-20.311-17.216-4.622-32.595-6.852-35.435-7.376-4.56-.84-9.508-1.589-11.211-1.851-1.211-.187-12.33-2.317-23.919 2.937"/>
+    </g>
+
+    <g style="display:inline" transform="translate(-135.407 -135.75)scale(.52916)">
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="530.532" cy="381.817" r="31.529"/>
+        <circle class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="471.565" cy="440.348" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="590.601" cy="439.252" r="31.529"/>
+        <circle class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none" cx="530.441" cy="499.948" r="31.529"/>
+    </g>
+</svg>
diff --git a/frontend/assets/logotipo.svg b/frontend/assets/logotipo.svg
index 5b418c427..d1daf0baf 100644
--- a/frontend/assets/logotipo.svg
+++ b/frontend/assets/logotipo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" version="1.0" viewBox="0 0 375 375"><path fill="#a453ff" d="M8.828 220.458h25.176c1.41 0 2.52-1.207 2.52-2.618v-23.566a2.49 2.49 0 0 1 2.515-2.516h15.105c1.41 0 2.52 1.106 2.52 2.516v23.664c0 1.41 1.105 2.52 2.516 2.52h25.175c1.41 0 2.52-1.207 2.52-2.618v-24.875c0-5.94-4.332-10.273-10.274-10.273h-.906a2.49 2.49 0 0 1-2.515-2.516c0-1.41 1.105-2.52 2.515-2.52h.906c5.942 0 10.274-4.327 10.274-10.269V156.31c0-9.465-6.95-16.414-16.414-16.414H8.828a2.49 2.49 0 0 0-2.516 2.516v75.527c0 1.41 1.106 2.52 2.516 2.52m30.21-51.864a2.49 2.49 0 0 1-2.515-2.515c0-1.41 1.106-2.52 2.516-2.52h15.105c1.41 0 2.52 1.11 2.52 2.52s-1.11 2.515-2.52 2.515Zm73.382 51.863h24.37c11.883 0 20.543-8.66 20.543-20.543v-39.477c0-11.883-8.66-20.543-20.543-20.543h-24.37c-11.883 0-20.544 8.66-20.544 20.543v39.477c0 11.883 8.66 20.543 20.543 20.543m12.183-23.16a2.493 2.493 0 0 1-2.516-2.52v-29.203c0-1.41 1.106-2.52 2.516-2.52s2.52 1.11 2.52 2.52v29.203c0 1.41-1.11 2.52-2.52 2.52m40.356 23.16h25.074c1.41 0 2.52-1.11 2.52-2.52v-44.812a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v45.015c0 1.309 1.207 2.317 2.516 2.317h25.175c1.309 0 2.52-1.008 2.52-2.317v-45.015a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v44.812c0 1.41 1.207 2.52 2.617 2.52h25.074c1.41 0 2.52-1.11 2.52-2.52v-75.527c0-1.41-1.211-2.516-2.617-2.516h-42.7c-1.41 0-2.519 1.207-2.519 2.617v14a2.49 2.49 0 0 1-2.516 2.516c-1.41 0-2.52-1.11-2.52-2.516v-14.101c0-1.41-1.206-2.516-2.616-2.516h-42.7a2.49 2.49 0 0 0-2.515 2.516v75.527c0 1.41 1.207 2.52 2.617 2.52m105.697 0h25.074c1.41 0 2.52-1.11 2.52-2.52v-44.812a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v45.015c0 1.309 1.207 2.317 2.515 2.317h25.176c1.309 0 2.52-1.008 2.52-2.317v-45.015a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v44.812c0 1.41 1.207 2.52 2.617 2.52h25.074c1.41 0 2.52-1.11 2.52-2.52v-75.527c0-1.41-1.211-2.516-2.618-2.516h-42.699c-1.41 0-2.52 1.207-2.52 2.617v14a2.49 2.49 0 0 1-2.515 2.516c-1.41 0-2.52-1.11-2.52-2.516v-14.101c0-1.41-1.206-2.516-2.617-2.516h-42.699a2.49 2.49 0 0 0-2.515 2.516v75.527c0 1.41 1.207 2.52 2.617 2.52m0 0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" version="1.0" viewBox="0 0 375 375"><path fill="#553e98" d="M8.828 220.458h25.176c1.41 0 2.52-1.207 2.52-2.618v-23.566a2.49 2.49 0 0 1 2.515-2.516h15.105c1.41 0 2.52 1.106 2.52 2.516v23.664c0 1.41 1.105 2.52 2.516 2.52h25.175c1.41 0 2.52-1.207 2.52-2.618v-24.875c0-5.94-4.332-10.273-10.274-10.273h-.906a2.49 2.49 0 0 1-2.515-2.516c0-1.41 1.105-2.52 2.515-2.52h.906c5.942 0 10.274-4.327 10.274-10.269V156.31c0-9.465-6.95-16.414-16.414-16.414H8.828a2.49 2.49 0 0 0-2.516 2.516v75.527c0 1.41 1.106 2.52 2.516 2.52m30.21-51.864a2.49 2.49 0 0 1-2.515-2.515c0-1.41 1.106-2.52 2.516-2.52h15.105c1.41 0 2.52 1.11 2.52 2.52s-1.11 2.515-2.52 2.515Zm73.382 51.863h24.37c11.883 0 20.543-8.66 20.543-20.543v-39.477c0-11.883-8.66-20.543-20.543-20.543h-24.37c-11.883 0-20.544 8.66-20.544 20.543v39.477c0 11.883 8.66 20.543 20.543 20.543m12.183-23.16a2.493 2.493 0 0 1-2.516-2.52v-29.203c0-1.41 1.106-2.52 2.516-2.52s2.52 1.11 2.52 2.52v29.203c0 1.41-1.11 2.52-2.52 2.52m40.356 23.16h25.074c1.41 0 2.52-1.11 2.52-2.52v-44.812a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v45.015c0 1.309 1.207 2.317 2.516 2.317h25.175c1.309 0 2.52-1.008 2.52-2.317v-45.015a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v44.812c0 1.41 1.207 2.52 2.617 2.52h25.074c1.41 0 2.52-1.11 2.52-2.52v-75.527c0-1.41-1.211-2.516-2.617-2.516h-42.7c-1.41 0-2.519 1.207-2.519 2.617v14a2.49 2.49 0 0 1-2.516 2.516c-1.41 0-2.52-1.11-2.52-2.516v-14.101c0-1.41-1.206-2.516-2.616-2.516h-42.7a2.49 2.49 0 0 0-2.515 2.516v75.527c0 1.41 1.207 2.52 2.617 2.52m105.697 0h25.074c1.41 0 2.52-1.11 2.52-2.52v-44.812a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v45.015c0 1.309 1.207 2.317 2.515 2.317h25.176c1.309 0 2.52-1.008 2.52-2.317v-45.015a2.49 2.49 0 0 1 2.515-2.516c1.41 0 2.52 1.105 2.52 2.516v44.812c0 1.41 1.207 2.52 2.617 2.52h25.074c1.41 0 2.52-1.11 2.52-2.52v-75.527c0-1.41-1.211-2.516-2.618-2.516h-42.699c-1.41 0-2.52 1.207-2.52 2.617v14a2.49 2.49 0 0 1-2.515 2.516c-1.41 0-2.52-1.11-2.52-2.516v-14.101c0-1.41-1.206-2.516-2.617-2.516h-42.699a2.49 2.49 0 0 0-2.515 2.516v75.527c0 1.41 1.207 2.52 2.617 2.52m0 0"/></svg>