diff --git a/frontend/assets/logos/romm_logo_ps2_circle.svg b/frontend/assets/logos/romm_logo_ps2_circle.svg
index 6cd4a4312..6f68becca 100644
--- a/frontend/assets/logos/romm_logo_ps2_circle.svg
+++ b/frontend/assets/logos/romm_logo_ps2_circle.svg
@@ -1,27 +1 @@
-<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>
+<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" class="background-light" style="fill:#ede5f8;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><path d="M770.12 256.537 258.227 768.43v.08H770.12z" class="background-dark" 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" class="logo-primary" style="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" class="logo-secondary" style="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" class="dot-light" 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" class="dot-light" 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" class="dot-dark" 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" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logos/romm_logo_ps2_square.svg b/frontend/assets/logos/romm_logo_ps2_square.svg
index a794ba250..44bf61b23 100644
--- a/frontend/assets/logos/romm_logo_ps2_square.svg
+++ b/frontend/assets/logos/romm_logo_ps2_square.svg
@@ -1,16 +1 @@
-<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>
+<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" class="background-light" 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" class="background-dark" 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" class="logo-primary" style="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" class="logo-secondary" style="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" class="dot-light" 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" class="dot-light" 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" class="dot-dark" 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" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logos/romm_logo_snes_circle.svg b/frontend/assets/logos/romm_logo_snes_circle.svg
index 2daac4fb3..a6a6fe737 100644
--- a/frontend/assets/logos/romm_logo_snes_circle.svg
+++ b/frontend/assets/logos/romm_logo_snes_circle.svg
@@ -1,29 +1 @@
-<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>
+<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" class="background-light" 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" class="background-dark" 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" class="logo-primary" 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" class="logo-secondary" 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" class="stripe-primary" 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" class="stripe-secondary" ry="40.978" style="fill:#221342;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel" transform="rotate(51.642)"/><circle cx="511.714" cy="581.19" r="35.595" class="dot-dark" 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" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="513.278" cy="442.374" r="35.595" class="dot-light" 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" class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logos/romm_logo_snes_square.svg b/frontend/assets/logos/romm_logo_snes_square.svg
index 6a7654fd2..8c0b04575 100644
--- a/frontend/assets/logos/romm_logo_snes_square.svg
+++ b/frontend/assets/logos/romm_logo_snes_square.svg
@@ -1,15 +1 @@
-<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>
+<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" 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)"/><path d="m772.988 302.397-522.13 418.762v51.934h522.13z" 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)"/><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" class="logo-primary" 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" class="logo-secondary" 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" class="stripe-primary" 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" class="stripe-secondary" 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" class="dot-light" 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" class="dot-light" 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" class="dot-dark" 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" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logos/romm_logo_xbox_one_circle.svg b/frontend/assets/logos/romm_logo_xbox_one_circle.svg
index 3f2c4cdc9..966b571ac 100644
--- a/frontend/assets/logos/romm_logo_xbox_one_circle.svg
+++ b/frontend/assets/logos/romm_logo_xbox_one_circle.svg
@@ -1,28 +1 @@
-<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>
+<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" class="background-light" 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" class="background-dark" 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" class="logo-secondary" 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" class="logo-primary" 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" class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="471.565" cy="440.348" r="31.529" class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="590.601" cy="439.252" r="31.529" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="530.441" cy="499.948" r="31.529" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logos/romm_logo_xbox_one_square.svg b/frontend/assets/logos/romm_logo_xbox_one_square.svg
index a2535ef51..3ed1fe7cd 100644
--- a/frontend/assets/logos/romm_logo_xbox_one_square.svg
+++ b/frontend/assets/logos/romm_logo_xbox_one_square.svg
@@ -1,16 +1 @@
-<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>
+<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" class="background-light" 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" class="background-dark" 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" class="logo-primary" 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" class="logo-secondary" 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" class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="471.565" cy="440.348" r="31.529" class="dot-light" style="fill:#e6c7a7;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="590.601" cy="439.252" r="31.529" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/><circle cx="530.441" cy="499.948" r="31.529" class="dot-dark" style="fill:#e1a38d;fill-opacity:1;stroke-width:0;stroke-linejoin:bevel;stroke-dasharray:none"/></g></svg>
\ No newline at end of file
diff --git a/frontend/assets/logotipo.svg b/frontend/assets/logotipo.svg
index d1daf0baf..8958857fd 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="#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>
+<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>
\ No newline at end of file
diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index b93a3ee75..3562a5b58 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -55,7 +55,7 @@ async function copyDownloadLink(rom: DetailedRom) {
 
 <template>
   <div>
-    <v-btn-group divided density="compact" rounded="0" class="d-flex flex-row">
+    <v-btn-group divided density="compact" class="d-flex flex-row">
       <v-btn
         class="flex-grow-1"
         :disabled="downloadStore.value.includes(rom.id)"
diff --git a/frontend/src/components/Details/BackgroundHeader.vue b/frontend/src/components/Details/BackgroundHeader.vue
index e46c21bb5..434050ca5 100644
--- a/frontend/src/components/Details/BackgroundHeader.vue
+++ b/frontend/src/components/Details/BackgroundHeader.vue
@@ -10,7 +10,7 @@ const { currentRom } = storeToRefs(romsStore);
 </script>
 
 <template>
-  <v-card :key="currentRom.updated_at" v-if="currentRom" rounded="0">
+  <v-card :key="currentRom.updated_at" v-if="currentRom">
     <v-img
       id="background-header"
       :src="
@@ -31,7 +31,7 @@ const { currentRom } = storeToRefs(romsStore);
           <v-progress-circular
             :width="2"
             :size="40"
-            color="romm-accent-1"
+            color="primary"
             indeterminate
           />
         </div>
diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 72b0cd701..32e0c887e 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -58,12 +58,11 @@ watch(
                 <v-btn
                   v-bind="props"
                   variant="flat"
-                  rounded="0"
                   size="small"
                   @click="toggleMainSibling"
                   ><v-icon
                     :class="romUser.is_main_sibling ? '' : 'mr-1'"
-                    :color="romUser.is_main_sibling ? 'romm-accent-1' : ''"
+                    :color="romUser.is_main_sibling ? 'primary' : ''"
                     >{{
                       romUser.is_main_sibling
                         ? "mdi-checkbox-outline"
@@ -94,7 +93,6 @@ watch(
             :label="rom.file_name"
             item-title="file_name"
             :items="rom.files.map((f) => f.filename)"
-            rounded="0"
             density="compact"
             variant="outlined"
             return-object
@@ -143,7 +141,7 @@ watch(
             size="small"
             class="mr-2"
             label
-            color="romm-accent-1"
+            color="primary"
             variant="tonal"
           >
             {{ tag }}
diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 9e79c8220..be42df550 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -133,10 +133,10 @@ function onFilterClick(filter: FilterType, value: string) {
               v-model="carousel"
               hide-delimiter-background
               delimiter-icon="mdi-square"
-              class="bg-primary"
+              class="bg-background"
               show-arrows="hover"
               hide-delimiters
-              progress="terciary"
+              progress="tertiary"
               :height="xs ? '300' : '400'"
             >
               <template #prev="{ props }">
diff --git a/frontend/src/components/Details/Personal.vue b/frontend/src/components/Details/Personal.vue
index c811545fa..cb67e7b18 100644
--- a/frontend/src/components/Details/Personal.vue
+++ b/frontend/src/components/Details/Personal.vue
@@ -62,8 +62,8 @@ watch(
 </script>
 
 <template>
-  <v-card rounded="0" class="mb-2">
-    <v-card-title class="bg-terciary">
+  <v-card class="mb-2">
+    <v-card-title class="bg-toplayer">
       <v-list-item class="pl-2 pr-0">
         <span class="text-h6">{{ t("rom.status") }}</span>
       </v-list-item>
@@ -75,11 +75,7 @@ watch(
         no-gutters
       >
         <v-col cols="12" md="5">
-          <v-checkbox
-            v-model="romUser.backlogged"
-            color="romm-accent-1"
-            hide-details
-          >
+          <v-checkbox v-model="romUser.backlogged" color="primary" hide-details>
             <template #label
               ><span>{{ t("rom.backlogged") }}</span
               ><span class="ml-2">{{
@@ -89,7 +85,7 @@ watch(
           </v-checkbox>
           <v-checkbox
             v-model="romUser.now_playing"
-            color="romm-accent-1"
+            color="primary"
             hide-details
           >
             <template #label
@@ -99,11 +95,7 @@ watch(
               }}</span></template
             >
           </v-checkbox>
-          <v-checkbox
-            v-model="romUser.hidden"
-            color="romm-accent-1"
-            hide-details
-          >
+          <v-checkbox v-model="romUser.hidden" color="primary" hide-details>
             <template #label
               ><span>{{ t("rom.hidden") }}</span
               ><span class="ml-2">{{
@@ -133,7 +125,7 @@ watch(
                   romUser.rating =
                     typeof $event === 'number' ? $event : parseInt($event)
                 "
-                active-color="romm-accent-1"
+                active-color="primary"
               />
             </v-col>
           </v-row>
@@ -149,7 +141,7 @@ watch(
                 max="10"
                 step="1"
                 hide-details
-                track-fill-color="romm-accent-1"
+                track-fill-color="primary"
                 ><template #append>
                   <v-label class="opacity-100">
                     {{
@@ -173,7 +165,7 @@ watch(
                 max="100"
                 step="1"
                 hide-details
-                track-fill-color="romm-accent-1"
+                track-fill-color="primary"
                 ><template #append>
                   <v-label class="ml-2 opacity-100">
                     {{ romUser.completion }}%
@@ -189,7 +181,6 @@ watch(
               hide-details
               :label="t('rom.status')"
               clearable
-              rounded="0"
               variant="outlined"
               density="compact"
               class="mt-1"
@@ -201,11 +192,7 @@ watch(
                 }}</span>
               </template>
               <template #item="{ item }">
-                <v-list-item
-                  link
-                  rounded="0"
-                  @click="onStatusItemClick(item.raw)"
-                >
+                <v-list-item link @click="onStatusItemClick(item.raw)">
                   <span>{{ getEmojiForStatus(item.raw as RomUserStatus) }}</span
                   ><span class="ml-2">{{
                     getTextForStatus(item.raw as RomUserStatus)
@@ -219,8 +206,8 @@ watch(
     </v-card-text>
   </v-card>
 
-  <v-card rounded="0">
-    <v-card-title class="bg-terciary">
+  <v-card>
+    <v-card-title class="bg-toplayer">
       <v-list-item class="pl-2 pr-0">
         <span class="text-h6">{{ t("rom.my-notes") }}</span>
         <template #append>
@@ -235,7 +222,7 @@ watch(
                 <v-btn
                   @click="romUser.note_is_public = !romUser.note_is_public"
                   v-bind="tooltipProps"
-                  class="bg-terciary"
+                  class="bg-toplayer"
                 >
                   <v-icon size="large">
                     {{ romUser.note_is_public ? "mdi-eye" : "mdi-eye-off" }}
@@ -253,7 +240,7 @@ watch(
                 <v-btn
                   @click="editNote"
                   v-bind="tooltipProps"
-                  class="bg-terciary"
+                  class="bg-toplayer"
                 >
                   <v-icon size="large">
                     {{ editingNote ? "mdi-check" : "mdi-pencil" }}
@@ -285,8 +272,8 @@ watch(
     </v-card-text>
   </v-card>
 
-  <v-card rounded="0" v-if="publicNotes && publicNotes.length > 0" class="mt-2">
-    <v-card-title class="bg-terciary">
+  <v-card v-if="publicNotes && publicNotes.length > 0" class="mt-2">
+    <v-card-title class="bg-toplayer">
       <v-list-item class="pl-2 pr-0">
         <span class="text-h6">{{ t("rom.public-notes") }}</span>
       </v-list-item>
@@ -295,12 +282,12 @@ watch(
     <v-divider />
 
     <v-card-text class="pa-0">
-      <v-expansion-panels multiple flat rounded="0" variant="accordion">
+      <v-expansion-panels multiple flat variant="accordion">
         <v-expansion-panel v-for="note in publicNotes">
-          <v-expansion-panel-title class="bg-terciary">
+          <v-expansion-panel-title class="bg-toplayer">
             <span class="text-body-1">{{ note.username }}</span>
           </v-expansion-panel-title>
-          <v-expansion-panel-text class="bg-secondary">
+          <v-expansion-panel-text class="bg-surface">
             <MdPreview
               :model-value="note.note_raw_markdown"
               :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
diff --git a/frontend/src/components/Details/Saves.vue b/frontend/src/components/Details/Saves.vue
index 0a36c2ea9..88e23246d 100644
--- a/frontend/src/components/Details/Saves.vue
+++ b/frontend/src/components/Details/Saves.vue
@@ -85,7 +85,7 @@ onMounted(() => {
     :items-per-page-options="PER_PAGE_OPTIONS"
     :headers="HEADERS"
     return-object
-    class="bg-secondary"
+    class="bg-surface"
     v-model="selectedSaves"
     v-model:page="page"
     show-select
@@ -93,14 +93,14 @@ onMounted(() => {
     <template #header.actions>
       <v-btn-group divided density="compact">
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           size="small"
           @click="emitter?.emit('addSavesDialog', rom)"
         >
           <v-icon>mdi-upload</v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :disabled="!selectedSaves.length"
           :variant="selectedSaves.length > 0 ? 'flat' : 'plain'"
           size="small"
@@ -109,7 +109,7 @@ onMounted(() => {
           <v-icon>mdi-download</v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :class="{
             'text-romm-red': selectedSaves.length,
           }"
@@ -151,7 +151,7 @@ onMounted(() => {
     <template #item.actions="{ item }">
       <v-btn-group divided density="compact">
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :href="item.download_path"
           download
           size="small"
@@ -159,7 +159,7 @@ onMounted(() => {
           <v-icon> mdi-download </v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           size="small"
           @click="
             emitter?.emit('showDeleteSavesDialog', {
@@ -179,8 +179,7 @@ onMounted(() => {
           <v-pagination
             :show-first-last-page="!xs"
             v-model="page"
-            rounded="0"
-            active-color="romm-accent-1"
+            active-color="primary"
             :length="pageCount"
           />
         </v-col>
diff --git a/frontend/src/components/Details/States.vue b/frontend/src/components/Details/States.vue
index 5a5ff8284..c3809b3bf 100644
--- a/frontend/src/components/Details/States.vue
+++ b/frontend/src/components/Details/States.vue
@@ -85,7 +85,7 @@ onMounted(() => {
     :items-per-page="itemsPerPage"
     :items-per-page-options="PER_PAGE_OPTIONS"
     :headers="HEADERS"
-    class="bg-secondary"
+    class="bg-surface"
     return-object
     v-model="selectedStates"
     v-model:page="page"
@@ -94,14 +94,14 @@ onMounted(() => {
     <template #header.actions>
       <v-btn-group divided density="compact">
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           size="small"
           @click="emitter?.emit('addStatesDialog', rom)"
         >
           <v-icon>mdi-upload</v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :disabled="!selectedStates.length"
           :variant="selectedStates.length > 0 ? 'flat' : 'plain'"
           size="small"
@@ -110,7 +110,7 @@ onMounted(() => {
           <v-icon>mdi-download</v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :class="{
             'text-romm-red': selectedStates.length,
           }"
@@ -152,7 +152,7 @@ onMounted(() => {
     <template #item.actions="{ item }">
       <v-btn-group divided density="compact">
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           :href="item.download_path"
           download
           size="small"
@@ -160,7 +160,7 @@ onMounted(() => {
           <v-icon> mdi-download </v-icon>
         </v-btn>
         <v-btn
-          class="bg-secondary"
+          class="bg-surface"
           size="small"
           @click="
             emitter?.emit('showDeleteStatesDialog', {
@@ -180,8 +180,7 @@ onMounted(() => {
           <v-pagination
             :show-first-last-page="!xs"
             v-model="page"
-            rounded="0"
-            active-color="romm-accent-1"
+            active-color="primary"
             :length="pageCount"
           />
         </v-col>
diff --git a/frontend/src/components/Details/VersionSwitcher.vue b/frontend/src/components/Details/VersionSwitcher.vue
index 5cb45353e..11397faad 100644
--- a/frontend/src/components/Details/VersionSwitcher.vue
+++ b/frontend/src/components/Details/VersionSwitcher.vue
@@ -31,7 +31,6 @@ function updateVersion() {
     v-model="version"
     label="Version"
     single-line
-    rounded="0"
     variant="solo-filled"
     density="compact"
     max-width="fit-content"
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 6e64f13fc..541fbd76c 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -152,13 +152,13 @@ async function updateCollection() {
               <v-btn
                 v-if="!isEditable"
                 :loading="updating"
-                class="bg-terciary"
+                class="bg-toplayer"
                 @click="showEditable"
                 size="small"
               >
                 <template #loader>
                   <v-progress-circular
-                    color="romm-accent-1"
+                    color="primary"
                     :width="2"
                     :size="20"
                     indeterminate
@@ -167,13 +167,13 @@ async function updateCollection() {
                 <v-icon>mdi-pencil</v-icon></v-btn
               >
               <template v-else>
-                <v-btn @click="closeEditable" size="small" class="bg-terciary"
+                <v-btn @click="closeEditable" size="small" class="bg-toplayer"
                   ><v-icon color="romm-red">mdi-close</v-icon></v-btn
                 >
                 <v-btn
                   @click="updateCollection()"
                   size="small"
-                  class="bg-terciary ml-1"
+                  class="bg-toplayer ml-1"
                   ><v-icon color="romm-green">mdi-check</v-icon></v-btn
                 >
               </template>
@@ -187,7 +187,7 @@ async function updateCollection() {
             :src="imagePreviewUrl"
           >
             <template v-if="isEditable" #append-inner>
-              <v-btn-group rounded="0" divided density="compact">
+              <v-btn-group divided density="compact">
                 <v-btn
                   title="Search for cover in SteamGridDB"
                   :disabled="
@@ -249,7 +249,7 @@ async function updateCollection() {
             <v-chip
               class="mt-4"
               size="small"
-              :color="currentCollection.is_public ? 'romm-accent-1' : ''"
+              :color="currentCollection.is_public ? 'primary' : ''"
               ><v-icon class="mr-1">{{
                 currentCollection.is_public ? "mdi-lock-open" : "mdi-lock"
               }}</v-icon
@@ -284,7 +284,7 @@ async function updateCollection() {
             <v-switch
               class="mt-2"
               v-model="updatedCollection.is_public"
-              color="romm-accent-1"
+              color="primary"
               false-icon="mdi-lock"
               true-icon="mdi-lock-open"
               inset
@@ -299,7 +299,7 @@ async function updateCollection() {
         </div>
       </v-col>
       <v-col cols="12">
-        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
+        <v-card class="mt-4 bg-toplayer fill-width" elevation="0">
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in collectionInfoFields"
@@ -337,7 +337,7 @@ async function updateCollection() {
       <template #content>
         <div class="text-center">
           <v-btn
-            class="text-romm-red bg-terciary ma-2"
+            class="text-romm-red bg-toplayer ma-2"
             variant="flat"
             @click="
               emitter?.emit('showDeleteCollectionDialog', currentCollection)
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index e74a460ac..975a59cee 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -62,11 +62,11 @@ const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
   transition:
     filter 0.15s ease-in-out,
     transform 0.15s ease-in-out;
-  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
+  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-primary)));
 }
 .platform-icon:hover,
 .platform-icon.active {
-  filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
+  filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-primary)));
   transform: scale(1.1);
 }
 </style>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue
index f536c51a3..99d214590 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue
@@ -21,10 +21,9 @@ const { activeFirmwareDrawer } = storeToRefs(galleryViewStore);
       <v-btn
         class="ml-0"
         variant="text"
-        rounded="0"
         v-bind="props"
         icon="mdi-memory"
-        :color="activeFirmwareDrawer ? 'romm-accent-1' : ''"
+        :color="activeFirmwareDrawer ? 'primary' : ''"
         @click="galleryViewStore.switchActiveFirmwareDrawer()" /></template
   ></v-tooltip>
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
index daecac622..07514e031 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
@@ -201,8 +201,7 @@ onMounted(() => {
             <v-pagination
               :show-first-last-page="!xs"
               v-model="page"
-              rounded="0"
-              active-color="romm-accent-1"
+              active-color="primary"
               :length="pageCount"
             />
           </v-col>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 9f48f5b31..89cffd66e 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -186,13 +186,13 @@ watch(
               <v-btn
                 v-if="!isEditable"
                 :loading="updating"
-                class="bg-terciary"
+                class="bg-toplayer"
                 @click="showEditable"
                 size="small"
               >
                 <template #loader>
                   <v-progress-circular
-                    color="romm-accent-1"
+                    color="primary"
                     :width="2"
                     :size="20"
                     indeterminate
@@ -201,13 +201,13 @@ watch(
                 <v-icon>mdi-pencil</v-icon></v-btn
               >
               <template v-else>
-                <v-btn @click="closeEditable" size="small" class="bg-terciary"
+                <v-btn @click="closeEditable" size="small" class="bg-toplayer"
                   ><v-icon color="romm-red">mdi-close</v-icon></v-btn
                 >
                 <v-btn
                   @click="updatePlatform()"
                   size="small"
-                  class="bg-terciary ml-1"
+                  class="bg-toplayer ml-1"
                   ><v-icon color="romm-green">mdi-check</v-icon></v-btn
                 >
               </template>
@@ -240,7 +240,7 @@ watch(
           </div>
           <div class="mt-6">
             <v-btn
-              class="bg-terciary my-1"
+              class="bg-toplayer my-1"
               @click="emitter?.emit('showUploadRomDialog', currentPlatform)"
             >
               <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
@@ -251,17 +251,17 @@ watch(
               rounded="4"
               :loading="scanning"
               @click="scan"
-              class="ml-2 my-1 bg-terciary"
+              class="ml-2 my-1 bg-toplayer"
             >
               <template #prepend>
-                <v-icon :color="scanning ? '' : 'romm-accent-1'"
+                <v-icon :color="scanning ? '' : 'primary'"
                   >mdi-magnify-scan</v-icon
                 >
               </template>
               {{ t("scan.scan") }}
               <template #loader>
                 <v-progress-circular
-                  color="romm-accent-1"
+                  color="primary"
                   :width="2"
                   :size="20"
                   indeterminate
@@ -295,7 +295,7 @@ watch(
             <span>ID: {{ currentPlatform.moby_id }}</span>
           </v-chip>
         </div>
-        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
+        <v-card class="mt-4 bg-toplayer fill-width" elevation="0">
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in platformInfoFields"
@@ -347,7 +347,7 @@ watch(
             <v-col class="pa-2" v-for="aspectRatio in aspectRatioOptions">
               <v-item v-slot="{ isSelected, toggle }">
                 <v-card
-                  :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
+                  :color="isSelected ? 'primary' : 'romm-gray'"
                   variant="outlined"
                   @click="toggle"
                 >
@@ -386,7 +386,7 @@ watch(
       <template #content>
         <div class="text-center">
           <v-btn
-            class="text-romm-red bg-terciary ma-2"
+            class="text-romm-red bg-toplayer ma-2"
             variant="flat"
             @click="emitter?.emit('showDeletePlatformDialog', currentPlatform)"
           >
@@ -407,7 +407,7 @@ watch(
   z-index: 1;
 }
 .platform-icon {
-  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
+  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-primary)));
 }
 .greyscale {
   filter: grayscale(100%);
diff --git a/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue b/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue
index c3a2ecaec..639a0c635 100644
--- a/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue
+++ b/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue
@@ -86,11 +86,10 @@ function clearFilter() {
     :density="xs ? 'comfortable' : 'default'"
     @click:clear="clearFilter"
     :label="t('common.platform')"
-    class="bg-terciary"
+    class="bg-toplayer"
     item-title="platform_name"
     :disabled="filterPlatforms.length == 0 || searching"
     hide-details
-    rounded="0"
     clearable
     single-line
     return-object
diff --git a/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue b/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue
index 3b9588cd6..e814a7d6c 100644
--- a/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue
@@ -69,8 +69,7 @@ function filterRoms() {
     id="search-btn"
     type="submit"
     @click="fetchRoms"
-    class="bg-terciary"
-    rounded="0"
+    class="bg-toplayer"
     variant="text"
     icon="mdi-magnify"
     :disabled="gettingRoms || !searchText"
diff --git a/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue b/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue
index 738c2b3e9..a829f3002 100644
--- a/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue
+++ b/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue
@@ -106,7 +106,6 @@ function fetchRoms() {
 
 <template>
   <v-text-field
-    rounded="0"
     :density="xs ? 'comfortable' : 'default'"
     clearable
     autofocus
@@ -115,6 +114,6 @@ function fetchRoms() {
     :disabled="gettingRoms"
     :label="t('common.search')"
     hide-details
-    class="bg-terciary"
+    class="bg-toplayer"
   />
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
index 7c64acc26..4ebc6e944 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
@@ -21,10 +21,9 @@ const { activeFilterDrawer } = storeToRefs(galleryFilterStore);
       <v-btn
         class="ml-0"
         variant="text"
-        rounded="0"
         v-bind="props"
         icon="mdi-filter-variant"
-        :color="activeFilterDrawer ? 'romm-accent-1' : ''"
+        :color="activeFilterDrawer ? 'primary' : ''"
         @click="galleryFilterStore.switchActiveFilterDrawer()" /></template
   ></v-tooltip>
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
index be0775ea5..2aedb3322 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
@@ -123,7 +123,6 @@ function resetFilters() {
       </v-list-item>
       <v-list-item v-for="filter in filters">
         <v-autocomplete
-          rounded="0"
           v-model="filter.selected.value"
           hide-details
           clearable
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue
index 8c3296dcb..19b91a119 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue
@@ -21,17 +21,16 @@ function setDuplicates() {
   <v-btn
     block
     variant="tonal"
-    rounded="0"
-    :color="filterDuplicates ? 'romm-accent-1' : 'romm-gray'"
+    :color="filterDuplicates ? 'primary' : 'romm-gray'"
     @click="setDuplicates()"
   >
-    <v-icon :color="filterDuplicates ? 'romm-accent-1' : 'romm-white'"
+    <v-icon :color="filterDuplicates ? 'primary' : 'romm-white'"
       >mdi-content-duplicate</v-icon
     ><span
       class="ml-2"
       :class="{
         'text-romm-white': !filterDuplicates,
-        'text-romm-accent-1': filterDuplicates,
+        'text-primary': filterDuplicates,
       }"
       >{{ t("platform.show-duplicates") }}</span
     ></v-btn
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue
index c09654c89..3286f22cf 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue
@@ -21,17 +21,16 @@ function setFavourites() {
   <v-btn
     block
     variant="tonal"
-    rounded="0"
-    :color="filterFavourites ? 'romm-accent-1' : 'romm-gray'"
+    :color="filterFavourites ? 'primary' : 'romm-gray'"
     @click="setFavourites()"
   >
-    <v-icon :color="filterFavourites ? 'romm-accent-1' : 'romm-white'"
+    <v-icon :color="filterFavourites ? 'primary' : 'romm-white'"
       >mdi-star</v-icon
     ><span
       class="ml-2"
       :class="{
         'text-romm-white': !filterFavourites,
-        'text-romm-accent-1': filterFavourites,
+        'text-primary': filterFavourites,
       }"
       >{{ t("platform.show-favourites") }}</span
     ></v-btn
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterMatchedBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterMatchedBtn.vue
index 00345f8e0..416f59ce1 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterMatchedBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterMatchedBtn.vue
@@ -21,17 +21,16 @@ function setUnmatched() {
   <v-btn
     block
     variant="tonal"
-    rounded="0"
-    :color="filterMatched ? 'romm-accent-1' : 'romm-gray'"
+    :color="filterMatched ? 'primary' : 'romm-gray'"
     @click="setUnmatched()"
   >
-    <v-icon :color="filterMatched ? 'romm-accent-1' : 'romm-white'"
+    <v-icon :color="filterMatched ? 'primary' : 'romm-white'"
       >mdi-file-find</v-icon
     ><span
       class="ml-2"
       :class="{
         'text-romm-white': !filterMatched,
-        'text-romm-accent-1': filterMatched,
+        'text-primary': filterMatched,
       }"
       >{{ t("platform.show-matched") }}</span
     ></v-btn
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue
index 1b73c60f1..3c30d25d9 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue
@@ -21,17 +21,16 @@ function setUnmatched() {
   <v-btn
     block
     variant="tonal"
-    rounded="0"
-    :color="filterUnmatched ? 'romm-accent-1' : 'romm-gray'"
+    :color="filterUnmatched ? 'primary' : 'romm-gray'"
     @click="setUnmatched()"
   >
-    <v-icon :color="filterUnmatched ? 'romm-accent-1' : 'romm-white'"
+    <v-icon :color="filterUnmatched ? 'primary' : 'romm-white'"
       >mdi-file-find-outline</v-icon
     ><span
       class="ml-2"
       :class="{
         'text-romm-white': !filterUnmatched,
-        'text-romm-accent-1': filterUnmatched,
+        'text-primary': filterUnmatched,
       }"
       >{{ t("platform.show-unmatched") }}</span
     ></v-btn
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue b/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
index 96e079a8e..8a7067e17 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
@@ -27,7 +27,6 @@ function clear() {
     v-model="filterText"
     prepend-inner-icon="mdi-filter-outline"
     :label="t('common.filter')"
-    rounded="0"
     hide-details
     clearable
     @click:clear="clear"
diff --git a/frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue b/frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue
index 8348762d9..a1331106e 100644
--- a/frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue
@@ -18,7 +18,6 @@ const galleryView = storeGalleryView();
   >
     <template #activator="{ props }">
       <v-btn
-        rounded="0"
         variant="text"
         v-bind="props"
         class="mr-0"
diff --git a/frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue b/frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue
index 267eb4a91..e104e028b 100644
--- a/frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue
@@ -17,8 +17,7 @@ const romsStore = storeRoms();
   >
     <template #activator="{ props }">
       <v-btn
-        :color="romsStore.selecting ? 'romm-accent-1' : ''"
-        rounded="0"
+        :color="romsStore.selecting ? 'primary' : ''"
         variant="text"
         v-bind="props"
         class="mr-0"
diff --git a/frontend/src/components/Gallery/AppBar/common/SortBar.vue b/frontend/src/components/Gallery/AppBar/common/SortBar.vue
index 98fd99b04..75a73d22f 100644
--- a/frontend/src/components/Gallery/AppBar/common/SortBar.vue
+++ b/frontend/src/components/Gallery/AppBar/common/SortBar.vue
@@ -53,7 +53,7 @@ function sort() {}
     <v-divider
       :thickness="2"
       class="mx-2 mt-1 border-opacity-25"
-      color="romm-accent-1"
+      color="primary"
     />
   </div>
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/common/SortBtn.vue b/frontend/src/components/Gallery/AppBar/common/SortBtn.vue
index 233f9668c..1fab7c147 100644
--- a/frontend/src/components/Gallery/AppBar/common/SortBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/common/SortBtn.vue
@@ -24,10 +24,9 @@ function showSortBar() {
       <v-btn
         class="ml-0"
         variant="text"
-        rounded="0"
         icon="mdi-sort"
         v-bind="props"
-        :color="isShowSortBar ? 'romm-accent-1' : ''"
+        :color="isShowSortBar ? 'primary' : ''"
         @click="showSortBar" /></template
   ></v-tooltip>
 </template>
diff --git a/frontend/src/components/Gallery/FabOverlay.vue b/frontend/src/components/Gallery/FabOverlay.vue
index c0dfd98d4..f08c5c870 100644
--- a/frontend/src/components/Gallery/FabOverlay.vue
+++ b/frontend/src/components/Gallery/FabOverlay.vue
@@ -45,7 +45,7 @@ async function onScan() {
   emitter?.emit("snackbarShow", {
     msg: `Scanning ${romCount} game${romCount > 1 ? "s" : ""}...`,
     icon: "mdi-loading mdi-spin",
-    color: "romm-accent-1",
+    color: "primary",
   });
 
   if (!socket.connected) socket.connect();
@@ -142,12 +142,12 @@ function onDownload() {
       <v-btn
         icon
         v-show="!scrolledToTop && currentView != 2"
-        class="border-romm-accent-1"
+        class="border-selected"
         color="primary"
         elevation="8"
         size="large"
         @click="scrollToTop()"
-        ><v-icon color="romm-accent-1">mdi-chevron-up</v-icon></v-btn
+        ><v-icon color="primary">mdi-chevron-up</v-icon></v-btn
       >
     </v-scroll-y-reverse-transition>
 
@@ -157,7 +157,7 @@ function onDownload() {
           <v-btn
             v-show="selectedRoms.length > 0"
             class="ml-2"
-            color="romm-accent-1"
+            color="primary"
             v-bind="menuProps"
             elevation="8"
             icon
@@ -170,7 +170,7 @@ function onDownload() {
       <v-btn
         key="1"
         v-if="auth.scopes.includes('roms.write')"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon
         size="default"
@@ -181,7 +181,7 @@ function onDownload() {
       <v-btn
         key="2"
         v-if="auth.scopes.includes('roms.write')"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-magnify-scan"
         size="default"
@@ -189,7 +189,7 @@ function onDownload() {
       />
       <v-btn
         key="3"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-download"
         size="default"
@@ -197,7 +197,7 @@ function onDownload() {
       />
       <v-btn
         key="4"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         :icon="
           $route.name == 'platform'
@@ -216,7 +216,7 @@ function onDownload() {
       />
       <v-btn
         key="5"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-star-outline"
         size="default"
@@ -224,7 +224,7 @@ function onDownload() {
       />
       <v-btn
         key="6"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-star"
         size="default"
@@ -232,7 +232,7 @@ function onDownload() {
       />
       <v-btn
         key="7"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-select-all"
         size="default"
@@ -240,7 +240,7 @@ function onDownload() {
       />
       <v-btn
         key="8"
-        color="terciary"
+        color="tertiary"
         elevation="8"
         icon="mdi-select"
         size="default"
diff --git a/frontend/src/components/Home/Stats.vue b/frontend/src/components/Home/Stats.vue
index 7a4378ba0..e11b1d91c 100644
--- a/frontend/src/components/Home/Stats.vue
+++ b/frontend/src/components/Home/Stats.vue
@@ -23,7 +23,7 @@ onBeforeMount(() => {
 </script>
 <template>
   <v-divider />
-  <v-card rounded="0">
+  <v-card>
     <v-card-text class="pa-1">
       <v-row no-gutters class="flex-nowrap overflow-x-auto text-center">
         <v-col>
diff --git a/frontend/src/components/Settings/Administration/TaskOption.vue b/frontend/src/components/Settings/Administration/TaskOption.vue
index 76c079559..a317108ec 100644
--- a/frontend/src/components/Settings/Administration/TaskOption.vue
+++ b/frontend/src/components/Settings/Administration/TaskOption.vue
@@ -14,13 +14,13 @@ withDefaults(
     <v-list-item class="pa-0">
       <v-list-item-title
         class="font-weight-bold"
-        :class="{ 'text-romm-accent-1': enabled }"
+        :class="{ 'text-primary': enabled }"
         >{{ title }}</v-list-item-title
       >
       <v-list-item-subtitle>{{ description }}</v-list-item-subtitle>
       <template #prepend
         ><v-icon
-          :class="enabled ? 'text-romm-accent-1' : ''"
+          :class="enabled ? 'text-primary' : ''"
           :icon="icon" /></template
     ></v-list-item>
   </v-card>
diff --git a/frontend/src/components/Settings/Administration/Tasks.vue b/frontend/src/components/Settings/Administration/Tasks.vue
index d18282295..f1dec2d62 100644
--- a/frontend/src/components/Settings/Administration/Tasks.vue
+++ b/frontend/src/components/Settings/Administration/Tasks.vue
@@ -74,7 +74,7 @@ const runAllTasks = async () => {
         :loading="runningTasks.value"
         prepend-icon="mdi-play"
         variant="outlined"
-        class="text-romm-accent-1"
+        class="text-primary"
         @click="runAllTasks"
       >
         Run All
diff --git a/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
index eaedf69b5..4c89b900d 100644
--- a/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
+++ b/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
@@ -59,7 +59,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.username"
-                rounded="0"
                 variant="outlined"
                 label="username"
                 required
@@ -72,7 +71,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.password"
-                rounded="0"
                 variant="outlined"
                 label="Password"
                 required
@@ -85,7 +83,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.email"
-                rounded="0"
                 variant="outlined"
                 label="email"
                 required
@@ -98,7 +95,6 @@ function closeDialog() {
             <v-col>
               <v-select
                 v-model="user.role"
-                rounded="0"
                 variant="outlined"
                 :items="['viewer', 'editor', 'admin']"
                 label="Role"
@@ -113,11 +109,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
           <v-btn
             :disabled="!user.username || !user.password"
             :variant="!user.username || !user.password ? 'plain' : 'flat'"
-            class="text-romm-green bg-terciary"
+            class="text-romm-green bg-toplayer"
             @click="createUser()"
           >
             Create
diff --git a/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
index 27e037551..4e31b7fde 100644
--- a/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
+++ b/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
@@ -72,15 +72,15 @@ function closeDialog() {
             "
           >
           </v-img> </v-avatar
-        ><span class="text-romm-accent-1 ml-1">{{ user.username }}</span
+        ><span class="text-primary ml-1">{{ user.username }}</span
         ><span class="ml-1">user. Do you confirm?</span>
       </v-row></template
     >
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="bg-terciary text-romm-red" @click="deleteUser()">
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer text-romm-red" @click="deleteUser()">
             Confirm
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
index 90858f72d..4eb5b0f47 100644
--- a/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
@@ -95,7 +95,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.username"
-                rounded="0"
                 variant="outlined"
                 :label="t('settings.username')"
                 required
@@ -108,7 +107,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.password"
-                rounded="0"
                 variant="outlined"
                 :label="t('settings.password')"
                 required
@@ -121,7 +119,6 @@ function closeDialog() {
             <v-col>
               <v-text-field
                 v-model="user.email"
-                rounded="0"
                 variant="outlined"
                 label="email"
                 required
@@ -134,7 +131,6 @@ function closeDialog() {
             <v-col>
               <v-select
                 v-model="user.role"
-                rounded="0"
                 variant="outlined"
                 :items="['viewer', 'editor', 'admin']"
                 :label="t('settings.role')"
@@ -186,13 +182,13 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
             :variant="!user.username ? 'plain' : 'flat'"
             :disabled="!user.username"
-            class="text-romm-green bg-terciary"
+            class="text-romm-green bg-toplayer"
             @click="editUser"
           >
             {{ t("common.apply") }}
diff --git a/frontend/src/components/Settings/Administration/Users/Table.vue b/frontend/src/components/Settings/Administration/Users/Table.vue
index 6105d8054..69758b322 100644
--- a/frontend/src/components/Settings/Administration/Users/Table.vue
+++ b/frontend/src/components/Settings/Administration/Users/Table.vue
@@ -96,12 +96,11 @@ onMounted(() => {
         v-model="userSearch"
         prepend-inner-icon="mdi-magnify"
         label="Search"
-        rounded="0"
         single-line
         hide-details
         clearable
         density="comfortable"
-        class="bg-secondary"
+        class="bg-surface"
       />
       <v-data-table
         v-model:items-per-page="usersPerPage"
@@ -119,7 +118,7 @@ onMounted(() => {
           <v-btn
             prepend-icon="mdi-plus"
             variant="outlined"
-            class="text-romm-accent-1"
+            class="text-primary"
             @click="emitter?.emit('showCreateUserDialog', null)"
           >
             Add
@@ -143,7 +142,7 @@ onMounted(() => {
           <v-switch
             inset
             v-model="item.enabled"
-            color="romm-accent-1"
+            color="primary"
             :disabled="item.id == auth.user?.id"
             hide-details
             @change="disableUser(item)"
@@ -175,8 +174,7 @@ onMounted(() => {
                 <v-pagination
                   :show-first-last-page="!xs"
                   v-model="page"
-                  rounded="0"
-                  active-color="romm-accent-1"
+                  active-color="primary"
                   :length="pageCount"
                 />
               </v-col>
diff --git a/frontend/src/components/Settings/Footer.vue b/frontend/src/components/Settings/Footer.vue
index 5d7e339f9..f8bf8f172 100644
--- a/frontend/src/components/Settings/Footer.vue
+++ b/frontend/src/components/Settings/Footer.vue
@@ -7,46 +7,43 @@ const { t } = useI18n();
 const heartbeatStore = storeHeartbeat();
 </script>
 <template>
-  <v-bottom-navigation
-    :elevation="0"
-    height="36"
-    class="bg-terciary text-caption"
-  >
-    <v-row class="align-center justify-center" no-gutters>
-      <span class="text-romm-accent-1">RomM</span>
-      <span class="ml-1">{{ heartbeatStore.value.SYSTEM.VERSION }}</span>
-      <v-icon>mdi-circle-small</v-icon><v-icon>mdi-github</v-icon>
-      <v-hover v-slot="{ isHovering, props }">
-        <span class="ml-1"
-          ><a
-            :class="{
-              'text-romm-accent-1': isHovering,
-              'text-white': !isHovering,
-            }"
-            v-bind="props"
-            style="text-decoration: none"
-            href="https://github.com/rommapp/romm"
-            target="_blank"
-            >Github</a
-          ></span
-        >
-      </v-hover>
-      <v-icon>mdi-circle-small</v-icon>
-      <v-hover v-slot="{ isHovering, props }">
-        <span class="ml-1"
-          ><a
-            :class="{
-              'text-romm-accent-1': isHovering,
-              'text-white': !isHovering,
-            }"
-            v-bind="props"
-            style="text-decoration: none"
-            href="https://discord.com/invite/P5HtHnhUDH"
-            target="_blank"
-            >{{ t("settings.join-discord") }}</a
-          ></span
-        >
-      </v-hover>
-    </v-row>
-  </v-bottom-navigation>
+  <div class="position-fixed bottom-0 w-100">
+    <v-card class="bg-toplayer ma-2 pa-2">
+      <v-row class="align-center justify-center" no-gutters>
+        <span class="ml-1">{{ heartbeatStore.value.SYSTEM.VERSION }}</span>
+        <v-icon>mdi-circle-small</v-icon><v-icon>mdi-github</v-icon>
+        <v-hover v-slot="{ isHovering, props }">
+          <span class="ml-1"
+            ><a
+              :class="{
+                'text-primary': isHovering,
+                'text-white': !isHovering,
+              }"
+              v-bind="props"
+              style="text-decoration: none"
+              href="https://github.com/rommapp/romm"
+              target="_blank"
+              >Github</a
+            ></span
+          >
+        </v-hover>
+        <v-icon>mdi-circle-small</v-icon>
+        <v-hover v-slot="{ isHovering, props }">
+          <span class="ml-1"
+            ><a
+              :class="{
+                'text-primary': isHovering,
+                'text-white': !isHovering,
+              }"
+              v-bind="props"
+              style="text-decoration: none"
+              href="https://discord.com/invite/P5HtHnhUDH"
+              target="_blank"
+              >{{ t("settings.join-discord") }}</a
+            ></span
+          >
+        </v-hover>
+      </v-row>
+    </v-card>
+  </div>
 </template>
diff --git a/frontend/src/components/Settings/LibraryManagement/AddBtn.vue b/frontend/src/components/Settings/LibraryManagement/AddBtn.vue
index b34e9652d..848f4d366 100644
--- a/frontend/src/components/Settings/LibraryManagement/AddBtn.vue
+++ b/frontend/src/components/Settings/LibraryManagement/AddBtn.vue
@@ -16,11 +16,10 @@ const emit = defineEmits(["click"]);
     <v-btn
       v-if="enabled"
       block
-      rounded="0"
       size="large"
       prepend-icon="mdi-plus"
       variant="outlined"
-      class="text-romm-accent-1"
+      class="text-primary"
       @click="$emit('click')"
     >
       {{ t("common.add") }}
diff --git a/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
index cd7e99670..8901d53b8 100644
--- a/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
@@ -83,11 +83,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="exclusionValue == ''"
             :variant="exclusionValue == '' ? 'plain' : 'flat'"
             @click="addExclusion"
diff --git a/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
index 478eaddb1..eb307ea9f 100644
--- a/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
@@ -92,7 +92,7 @@ function closeDialog() {
         <v-col cols="10">
           <v-icon icon="mdi-controller" class="ml-5" />
           <v-icon icon="mdi-menu-right" class="ml-1 text-romm-gray" />
-          <v-icon icon="mdi-controller" class="ml-1 text-romm-accent-1" />
+          <v-icon icon="mdi-controller" class="ml-1 text-primary" />
         </v-col>
       </v-row>
     </template>
@@ -115,11 +115,11 @@ function closeDialog() {
         <v-col cols="6">
           <v-autocomplete
             v-model="selectedPlatform"
-            class="text-romm-accent-1"
+            class="text-primary"
             :label="t('settings.romm-platform')"
             :items="supportedPlatforms"
-            color="romm-accent-1"
-            base-color="romm-accent-1"
+            color="primary"
+            base-color="primary"
             variant="outlined"
             required
             return-object
@@ -161,11 +161,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="fsSlugToCreate == '' || selectedPlatform?.slug == ''"
             :variant="
               fsSlugToCreate == '' || selectedPlatform?.slug == ''
diff --git a/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
index 7a8c538bc..458957478 100644
--- a/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
@@ -93,7 +93,7 @@ function closeDialog() {
         <v-col cols="10">
           <v-icon icon="mdi-gamepad-variant" class="ml-5" />
           <v-icon icon="mdi-menu-right" class="ml-1 text-romm-gray" />
-          <v-icon icon="mdi-controller" class="ml-1 text-romm-accent-1" />
+          <v-icon icon="mdi-controller" class="ml-1 text-primary" />
         </v-col>
       </v-row>
     </template>
@@ -116,11 +116,11 @@ function closeDialog() {
         <v-col cols="6">
           <v-autocomplete
             v-model="selectedPlatform"
-            class="text-romm-accent-1"
+            class="text-primary"
             :label="t('settings.main-platform')"
-            color="romm-accent-1"
+            color="primary"
             :items="supportedPlatforms"
-            base-color="romm-accent-1"
+            base-color="primary"
             variant="outlined"
             required
             return-object
@@ -162,11 +162,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="fsSlugToCreate == '' || selectedPlatform?.slug == ''"
             :variant="
               fsSlugToCreate == '' || selectedPlatform?.slug == ''
diff --git a/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
index 26c60754a..21dfe86d8 100644
--- a/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
@@ -58,13 +58,11 @@ function closeDialog() {
           :slug="platformBindingSlugToDelete"
         />
         <span>[</span>
-        <span class="text-romm-accent-1 ml-1">
+        <span class="text-primary ml-1">
           {{ platformBindingFSSlugToDelete }}</span
         >
         <span class="mx-1">:</span>
-        <span class="text-romm-accent-1">{{
-          platformBindingSlugToDelete
-        }}</span>
+        <span class="text-primary">{{ platformBindingSlugToDelete }}</span>
         <span class="ml-1">].</span>
         <span class="ml-1">Do you confirm?</span>
       </v-row>
@@ -72,8 +70,8 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="bg-terciary text-romm-red" @click="deleteBindPlatform">
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer text-romm-red" @click="deleteBindPlatform">
             Confirm
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
index 3ca19f83d..2bdb20cc1 100644
--- a/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
@@ -55,9 +55,9 @@ function closeDialog() {
         <span class="mr-1">Deleting platform binding</span>
         <platform-icon class="mx-2" :key="slugToDelete" :slug="slugToDelete" />
         <span>[</span>
-        <span class="text-romm-accent-1 ml-1"> {{ fsSlugToDelete }}</span>
+        <span class="text-primary ml-1"> {{ fsSlugToDelete }}</span>
         <span class="mx-1">:</span>
-        <span class="text-romm-accent-1">{{ slugToDelete }}</span>
+        <span class="text-primary">{{ slugToDelete }}</span>
         <span class="ml-1">].</span>
         <span class="ml-1">Do you confirm?</span>
       </v-row>
@@ -65,9 +65,9 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
           <v-btn
-            class="bg-terciary text-romm-red"
+            class="bg-toplayer text-romm-red"
             @click="deleteVersionPlatform"
           >
             Confirm
diff --git a/frontend/src/components/Settings/LibraryManagement/Excluded.vue b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
index 4175728a5..1e60ed93d 100644
--- a/frontend/src/components/Settings/LibraryManagement/Excluded.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
@@ -57,9 +57,8 @@ const editable = ref(false);
       <v-btn
         v-if="authStore.scopes.includes('platforms.write')"
         class="ma-2"
-        rounded="0"
         size="small"
-        :color="editable ? 'romm-accent-1' : ''"
+        :color="editable ? 'primary' : ''"
         variant="text"
         icon="mdi-cog"
         @click="editable = !editable"
diff --git a/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue b/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
index ee169ae31..fbb4bcd55 100644
--- a/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
+++ b/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
@@ -32,7 +32,7 @@ function removeExclusion(exclusionValue: string) {
 }
 </script>
 <template>
-  <v-card rounded="0" color="terciary">
+  <v-card color="tertiary">
     <v-card-title class="text-body-2 align-center justify-center"
       ><v-icon class="mr-2">{{ icon }}</v-icon
       >{{ title }}</v-card-title
@@ -49,7 +49,6 @@ function removeExclusion(exclusionValue: string) {
         <v-slide-x-reverse-transition>
           <v-btn
             v-if="editable"
-            rounded="0"
             variant="text"
             size="x-small"
             icon="mdi-delete"
@@ -64,7 +63,7 @@ function removeExclusion(exclusionValue: string) {
           rounded="1"
           prepend-icon="mdi-plus"
           variant="outlined"
-          class="text-romm-accent-1 ml-1"
+          class="text-primary ml-1"
           @click="
             emitter?.emit('showCreateExclusionDialog', {
               type: type,
diff --git a/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
index c1e8874b6..94377b72c 100644
--- a/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
@@ -14,19 +14,18 @@ defineProps<{
 }>();
 </script>
 <template>
-  <v-card rounded="0" elevation="0">
+  <v-card elevation="0">
     <v-card-text class="pa-1">
-      <v-list-item class="bg-terciary pa-1 text-truncate">
+      <v-list-item class="bg-toplayer pa-1 text-truncate">
         <template #prepend>
           <platform-icon class="mx-2" :key="slug" :slug="slug" />
         </template>
-        <v-list-item class="bg-primary pr-2 pl-2">
+        <v-list-item class="bg-background pr-2 pl-2">
           <span>{{ fsSlug }}</span>
           <template #append>
             <v-slide-x-reverse-transition>
               <v-btn
                 v-if="editable"
-                rounded="0"
                 variant="text"
                 size="x-small"
                 icon="mdi-pencil"
@@ -37,7 +36,6 @@ defineProps<{
             <v-slide-x-reverse-transition>
               <v-btn
                 v-if="editable"
-                rounded="0"
                 variant="text"
                 size="x-small"
                 icon="mdi-delete"
diff --git a/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
index b01141411..96721467b 100644
--- a/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
@@ -27,9 +27,8 @@ const editable = ref(false);
       <v-btn
         v-if="authStore.scopes.includes('platforms.write')"
         class="ma-2"
-        rounded="0"
         size="small"
-        :color="editable ? 'romm-accent-1' : ''"
+        :color="editable ? 'primary' : ''"
         variant="text"
         icon="mdi-cog"
         @click="editable = !editable"
diff --git a/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
index 2a7746542..3a9024b46 100644
--- a/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
@@ -30,9 +30,8 @@ const editable = ref(false);
       <v-btn
         v-if="authStore.scopes.includes('platforms.write')"
         class="ma-2"
-        rounded="0"
         size="small"
-        :color="editable ? 'romm-accent-1' : ''"
+        :color="editable ? 'primary' : ''"
         variant="text"
         icon="mdi-cog"
         @click="editable = !editable"
diff --git a/frontend/src/components/Settings/UserInterface/InterfaceOption.vue b/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
index bfdfa6b92..f366f97da 100644
--- a/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
+++ b/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
@@ -17,12 +17,12 @@ const emit = defineEmits(["update:modelValue"]);
   <v-card elevation="0">
     <v-list-item class="pa-1"
       ><template #prepend
-        ><v-icon :class="modelValue ? 'text-romm-accent-1' : ''" :icon="icon"
+        ><v-icon :class="modelValue ? 'text-primary' : ''" :icon="icon"
       /></template>
 
       <v-list-item-title
         class="font-weight-bold"
-        :class="{ 'text-romm-accent-1': modelValue }"
+        :class="{ 'text-primary': modelValue }"
         >{{ title }}</v-list-item-title
       >
       <v-list-item-subtitle>{{ description }}</v-list-item-subtitle>
@@ -33,7 +33,7 @@ const emit = defineEmits(["update:modelValue"]);
           :model-value="modelValue"
           @update:model-value="(value) => emit('update:modelValue', value)"
           :class="{ 'pr-16': !xs }"
-          color="romm-accent-1"
+          color="primary"
           hide-details
         /> </template
     ></v-list-item>
@@ -41,7 +41,7 @@ const emit = defineEmits(["update:modelValue"]);
 </template>
 
 <style scoped>
-.text-romm-accent-1 {
+.text-primary {
   transition: color 0.3s ease-in-out;
 }
 
diff --git a/frontend/src/components/Settings/UserInterface/ThemeOption.vue b/frontend/src/components/Settings/UserInterface/ThemeOption.vue
index ee7cad050..1cebe608c 100644
--- a/frontend/src/components/Settings/UserInterface/ThemeOption.vue
+++ b/frontend/src/components/Settings/UserInterface/ThemeOption.vue
@@ -13,7 +13,7 @@ withDefaults(defineProps<{ text: string; icon: string }>(), {
 <template>
   <v-item v-slot="{ isSelected, toggle }">
     <v-card
-      :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
+      :color="isSelected ? 'primary' : 'romm-gray'"
       class="d-flex align-center"
       height="50"
       variant="outlined"
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index f5fbc77ed..ffa26d134 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -42,7 +42,7 @@ const galleryViewStore = storeGalleryView();
       }"
       :elevation="isHovering && transformScale ? 20 : 3"
     >
-      <v-row v-if="showTitle" class="pa-1 justify-center bg-primary">
+      <v-row v-if="showTitle" class="pa-1 justify-center bg-background">
         <div
           :title="collection.name?.toString()"
           class="py-4 px-6 text-truncate text-caption"
@@ -88,7 +88,7 @@ const galleryViewStore = storeGalleryView();
             <v-progress-circular
               :width="2"
               :size="40"
-              color="romm-accent-1"
+              color="primary"
               indeterminate
             />
           </div>
@@ -96,7 +96,7 @@ const galleryViewStore = storeGalleryView();
       </v-img>
       <v-chip
         v-if="showRomCount"
-        class="bg-chip position-absolute"
+        class="bg-background position-absolute"
         size="x-small"
         style="bottom: 0.5rem; right: 0.5rem"
         label
diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index b6c11dbaa..afaf285ec 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -95,7 +95,7 @@ function closeDialog() {
     <template #header>
       <v-row no-gutters class="justify-center">
         <span>{{ t("rom.adding-to-collection-part1") }}</span>
-        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span class="text-primary mx-1">{{ roms.length }}</span>
         <span>{{ t("rom.adding-to-collection-part2") }}</span>
       </v-row>
     </template>
@@ -151,9 +151,8 @@ function closeDialog() {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -175,11 +174,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center my-2">
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+          <v-btn class="bg-toplayer" @click="closeDialog" variant="flat">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="!selectedCollection"
             :variant="!selectedCollection ? 'plain' : 'flat'"
             @click="addRomsToCollection"
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 6cbbc18b1..d8776098f 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -152,7 +152,7 @@ function closeDialog() {
                 :src="imagePreviewUrl"
               >
                 <template #append-inner>
-                  <v-btn-group rounded="0" divided density="compact">
+                  <v-btn-group divided density="compact">
                     <v-btn
                       :disabled="
                         !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED
@@ -203,11 +203,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="!collection.name"
             :variant="!collection.name ? 'plain' : 'flat'"
             @click="createCollection"
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index 37fd42a99..dbabf3c80 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -88,10 +88,10 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center pa-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
-          <v-btn class="bg-terciary text-romm-red" @click="deleteCollection">
+          <v-btn class="bg-toplayer text-romm-red" @click="deleteCollection">
             {{ t("common.confirm") }}
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
index a725c0d00..9ed1bc243 100644
--- a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -100,7 +100,7 @@ function closeDialog() {
     <template #header>
       <v-row no-gutters class="justify-center">
         <span>{{ t("rom.remove-from-collection-part1") }}</span>
-        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span class="text-primary mx-1">{{ roms.length }}</span>
         <span>{{ t("rom.remove-from-collection-part2") }}</span>
       </v-row>
     </template>
@@ -124,9 +124,8 @@ function closeDialog() {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -148,11 +147,11 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center my-2">
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+          <v-btn class="bg-toplayer" @click="closeDialog" variant="flat">
             {{ t("common.cancel") }}
           </v-btn>
           <v-btn
-            class="bg-terciary text-romm-red"
+            class="bg-toplayer text-romm-red"
             variant="flat"
             @click="removeRomsFromCollection"
           >
diff --git a/frontend/src/components/common/Collection/RAvatar.vue b/frontend/src/components/common/Collection/RAvatar.vue
index 3eeae848a..32f129a99 100644
--- a/frontend/src/components/common/Collection/RAvatar.vue
+++ b/frontend/src/components/common/Collection/RAvatar.vue
@@ -9,7 +9,7 @@ const theme = useTheme();
 </script>
 
 <template>
-  <v-avatar :rounded="0" :size="size">
+  <v-avatar :size="size">
     <v-img
       :src="
         collection.has_cover
diff --git a/frontend/src/components/common/Game/AdminMenu.vue b/frontend/src/components/common/Game/AdminMenu.vue
index c996c71d6..770e3c86c 100644
--- a/frontend/src/components/common/Game/AdminMenu.vue
+++ b/frontend/src/components/common/Game/AdminMenu.vue
@@ -89,7 +89,7 @@ async function switchFromFavourites() {
 </script>
 
 <template>
-  <v-list rounded="0" class="pa-0">
+  <v-list class="pa-0">
     <template v-if="auth.scopes.includes('roms.write')">
       <v-list-item
         :disabled="!heartbeat.value.METADATA_SOURCES.ANY_SOURCE_ENABLED"
diff --git a/frontend/src/components/common/Game/Card/ActionBar.vue b/frontend/src/components/common/Game/Card/ActionBar.vue
index 06ef3df5b..be4081d33 100644
--- a/frontend/src/components/common/Game/Card/ActionBar.vue
+++ b/frontend/src/components/common/Game/Card/ActionBar.vue
@@ -43,7 +43,6 @@ const is3DSRom = computed(() => {
         size="x-small"
         :disabled="downloadStore.value.includes(rom.id)"
         icon="mdi-download"
-        rounded="0"
         variant="text"
         @click.prevent="romApi.downloadRom({ rom })"
       />
@@ -64,7 +63,6 @@ const is3DSRom = computed(() => {
           })
         "
         icon="mdi-play"
-        rounded="0"
         variant="text"
       />
       <v-btn
@@ -79,7 +77,6 @@ const is3DSRom = computed(() => {
           })
         "
         icon="mdi-play"
-        rounded="0"
         variant="text"
       />
     </v-col>
@@ -90,7 +87,6 @@ const is3DSRom = computed(() => {
         size="x-small"
         @click="emitter?.emit('showQRCodeDialog', rom)"
         icon="mdi-qrcode"
-        rounded="0"
         variant="text"
       />
     </v-col>
@@ -103,7 +99,6 @@ const is3DSRom = computed(() => {
             size="x-small"
             v-bind="props"
             icon="mdi-dots-vertical"
-            rounded="0"
             variant="text"
           />
         </template>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 9e149d315..56cdc441c 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -96,7 +96,7 @@ const computedAspectRatio = computed(() => {
       }"
       :class="{
         'on-hover': isHovering,
-        'border-romm-accent-1': withBorderRommAccent,
+        'border-selected': withBorderRommAccent,
         'transform-scale': transformScale,
         'with-border': withBorder,
       }"
@@ -105,7 +105,7 @@ const computedAspectRatio = computed(() => {
       <v-card-text class="pa-0">
         <v-progress-linear
           v-if="romsStore.isSimpleRom(rom)"
-          color="romm-accent-1"
+          color="primary"
           :active="downloadStore.value.includes(rom.id)"
           :indeterminate="true"
           absolute
@@ -191,7 +191,7 @@ const computedAspectRatio = computed(() => {
                 class="label-fav"
                 rouded="0"
                 size="small"
-                color="romm-accent-1"
+                color="primary"
               >
                 <v-icon class="icon-fav" size="x-small"
                   >{{
@@ -223,7 +223,7 @@ const computedAspectRatio = computed(() => {
                 <v-progress-circular
                   :width="2"
                   :size="40"
-                  color="romm-accent-1"
+                  color="primary"
                   indeterminate
                 />
               </div>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index cb94ecb05..977239336 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -34,7 +34,6 @@ const galleryViewStore = storeGalleryView();
         ><v-chip
           class="px-2 position-absolute chip-type text-white translucent-dark"
           density="compact"
-          rounded="0"
           label
         >
           <span>
diff --git a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
index d68e21d5f..d825cb03d 100644
--- a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
+++ b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
@@ -116,9 +116,9 @@ function closeDialog() {
     <template #header>
       <v-row no-gutters class="justify-center">
         <span>Removing</span>
-        <span class="text-romm-accent-1 mx-1">{{ assets.length }}</span>
+        <span class="text-primary mx-1">{{ assets.length }}</span>
         <span>{{ assetType.slice(5) }} of</span>
-        <span class="text-romm-accent-1 mx-1">{{ romRef?.name }}</span>
+        <span class="text-primary mx-1">{{ romRef?.name }}</span>
         <span>from RomM</span>
       </v-row>
     </template>
@@ -204,9 +204,8 @@ function closeDialog() {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -243,11 +242,11 @@ function closeDialog() {
       </v-row>
       <v-row class="justify-center my-2">
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+          <v-btn class="bg-toplayer" @click="closeDialog" variant="flat">
             Cancel
           </v-btn>
           <v-btn
-            class="text-romm-red bg-terciary"
+            class="text-romm-red bg-toplayer"
             variant="flat"
             @click="deleteAssets"
           >
diff --git a/frontend/src/components/common/Game/Dialog/Asset/UploadSaves.vue b/frontend/src/components/common/Game/Dialog/Asset/UploadSaves.vue
index 181c6372f..fbaa2d4eb 100644
--- a/frontend/src/components/common/Game/Dialog/Asset/UploadSaves.vue
+++ b/frontend/src/components/common/Game/Dialog/Asset/UploadSaves.vue
@@ -55,7 +55,7 @@ async function uploadSaves() {
   emitter?.emit("snackbarShow", {
     msg: `Uploading ${filesToUpload.value.length} saves to ${rom.value?.name}...`,
     icon: "mdi-loading mdi-spin",
-    color: "romm-accent-1",
+    color: "primary",
   });
 
   saveApi
@@ -169,9 +169,8 @@ watch(itemsPerPage, async () => {
               <v-col class="px-6">
                 <v-pagination
                   v-model="page"
-                  rounded="0"
                   :show-first-last-page="true"
-                  active-color="romm-accent-1"
+                  active-color="primary"
                   :length="pageCount"
                 />
               </v-col>
@@ -195,9 +194,9 @@ watch(itemsPerPage, async () => {
     <template #append>
       <v-row class="justify-center my-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :variant="
               filesToUpload.length == 0 || rom == null ? 'plain' : 'flat'
             "
diff --git a/frontend/src/components/common/Game/Dialog/Asset/UploadStates.vue b/frontend/src/components/common/Game/Dialog/Asset/UploadStates.vue
index 8145fa6ba..b473d5c10 100644
--- a/frontend/src/components/common/Game/Dialog/Asset/UploadStates.vue
+++ b/frontend/src/components/common/Game/Dialog/Asset/UploadStates.vue
@@ -55,7 +55,7 @@ function uploadStates() {
   emitter?.emit("snackbarShow", {
     msg: `Uploading ${filesToUpload.value.length} states to ${rom.value?.name}...`,
     icon: "mdi-loading mdi-spin",
-    color: "romm-accent-1",
+    color: "primary",
   });
 
   stateApi
@@ -161,9 +161,8 @@ watch(itemsPerPage, async () => {
               <v-col class="px-6">
                 <v-pagination
                   v-model="page"
-                  rounded="0"
                   :show-first-last-page="true"
-                  active-color="romm-accent-1"
+                  active-color="primary"
                   :length="pageCount"
                 />
               </v-col>
@@ -187,9 +186,9 @@ watch(itemsPerPage, async () => {
     <template #append>
       <v-row class="justify-center my-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :variant="
               filesToUpload.length == 0 || rom == null ? 'plain' : 'flat'
             "
diff --git a/frontend/src/components/common/Game/Dialog/CopyDownloadLink.vue b/frontend/src/components/common/Game/Dialog/CopyDownloadLink.vue
index 14a90259b..8289171ca 100644
--- a/frontend/src/components/common/Game/Dialog/CopyDownloadLink.vue
+++ b/frontend/src/components/common/Game/Dialog/CopyDownloadLink.vue
@@ -35,7 +35,7 @@ function closeDialog() {
         <v-list-item>{{ t("rom.cant-copy-link") }}:</v-list-item>
       </v-row>
       <v-row class="justify-center text-center pa-2 mb-3" no-gutters>
-        <v-list-item class="bg-terciary">{{ link }}</v-list-item>
+        <v-list-item class="bg-toplayer">{{ link }}</v-list-item>
       </v-row>
     </template></r-dialog
   >
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index 6a43e8f5e..cbac3ba55 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -97,7 +97,7 @@ function closeDialog() {
     <template #header>
       <v-row no-gutters class="justify-center">
         <span>Removing</span>
-        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span class="text-primary mx-1">{{ roms.length }}</span>
         <span>games from RomM</span>
       </v-row>
     </template>
@@ -140,9 +140,8 @@ function closeDialog() {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -178,11 +177,11 @@ function closeDialog() {
       </v-row>
       <v-row class="justify-center my-2">
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+          <v-btn class="bg-toplayer" @click="closeDialog" variant="flat">
             Cancel
           </v-btn>
           <v-btn
-            class="text-romm-red bg-terciary"
+            class="text-romm-red bg-toplayer"
             variant="flat"
             @click="deleteRoms"
           >
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index a27467b16..726127ef3 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -186,7 +186,7 @@ function closeDialog() {
               >
                 <template #details>
                   <v-label class="text-caption text-wrap">
-                    <v-icon size="small" class="mr-2 text-romm-accent-1">
+                    <v-icon size="small" class="mr-2 text-primary">
                       mdi-folder-file-outline
                     </v-icon>
                     <span>
@@ -220,7 +220,7 @@ function closeDialog() {
             <v-col style="max-width: 240px">
               <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner-right>
-                  <v-btn-group rounded="0" divided density="compact">
+                  <v-btn-group divided density="compact">
                     <v-btn
                       :disabled="
                         !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED
@@ -270,17 +270,17 @@ function closeDialog() {
       <v-row class="justify-space-between px-4 py-2 mt-1" no-gutters>
         <v-btn
           :disabled="noMetadataMatch"
-          :class="` ${noMetadataMatch ? '' : 'bg-terciary text-romm-red'}`"
+          :class="` ${noMetadataMatch ? '' : 'bg-toplayer text-romm-red'}`"
           variant="flat"
           @click="unmatchRom"
         >
           {{ t("rom.unmatch-rom") }}
         </v-btn>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
-          <v-btn class="text-romm-green bg-terciary" @click="updateRom">
+          <v-btn class="text-romm-green bg-toplayer" @click="updateRom">
             {{ t("common.apply") }}
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 8d8e780a8..358a243b7 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -297,7 +297,7 @@ onBeforeUnmount(() => {
             id="search-text-field"
             @keyup.enter="searchRom()"
             @click:clear="searchTerm = ''"
-            class="bg-terciary"
+            class="bg-toplayer"
             v-model="searchTerm"
             :disabled="searching"
             :label="t('common.search')"
@@ -309,7 +309,7 @@ onBeforeUnmount(() => {
           <v-select
             :disabled="searching"
             :label="t('rom.by')"
-            class="bg-terciary"
+            class="bg-toplayer"
             :items="['ID', 'Name']"
             v-model="searchBy"
             hide-details
@@ -319,8 +319,7 @@ onBeforeUnmount(() => {
           <v-btn
             type="submit"
             @click="searchRom()"
-            class="bg-terciary"
-            rounded="0"
+            class="bg-toplayer"
             variant="text"
             icon="mdi-search-web"
             block
@@ -352,12 +351,11 @@ onBeforeUnmount(() => {
       <template v-if="showSelectSource">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="mx-auto bg-terciary">
+            <v-card class="mx-auto bg-toplayer">
               <v-card-title class="text-center">
                 <v-btn
-                  color="terciary"
+                  color="tertiary"
                   icon="mdi-arrow-left"
-                  rounded="0"
                   variant="flat"
                   size="small"
                   @click="backToMatched"
@@ -389,8 +387,7 @@ onBeforeUnmount(() => {
                     class="transform-scale mx-2"
                     :class="{
                       'on-hover': isHovering,
-                      'border-romm-accent-1':
-                        selectedCover?.name == source.name,
+                      'border-primary': selectedCover?.name == source.name,
                     }"
                     :elevation="isHovering ? 20 : 3"
                     @click="selectCover(source)"
@@ -410,7 +407,7 @@ onBeforeUnmount(() => {
                           class="d-flex align-center justify-center fill-height"
                         >
                           <v-progress-circular
-                            color="romm-accent-1"
+                            color="primary"
                             :width="2"
                             indeterminate
                           />
@@ -433,7 +430,7 @@ onBeforeUnmount(() => {
                 <v-chip
                   @click="toggleRenameAsSource"
                   :variant="renameAsSource ? 'flat' : 'outlined'"
-                  :color="renameAsSource ? 'romm-accent-1' : ''"
+                  :color="renameAsSource ? 'primary' : ''"
                   :disabled="selectedCover == undefined"
                   ><v-icon class="mr-1">{{
                     selectedCover && renameAsSource
@@ -448,14 +445,14 @@ onBeforeUnmount(() => {
                   <span>{{ t("rom.rename-file-part2") }}</span>
                   <br />
                   <span>{{ t("rom.rename-file-part3") }}</span
-                  ><span class="text-romm-accent-1 ml-1"
+                  ><span class="text-primary ml-1"
                     >{{ rom?.file_name_no_tags }}.{{
                       rom?.file_extension
                     }}</span
                   >
                   <br />
                   <span class="mx-1">{{ t("rom.rename-file-part4") }}</span
-                  ><span class="text-romm-accent-2"
+                  ><span class="text-primary"
                     >{{ selectedMatchRom?.name }}.{{
                       rom?.file_extension
                     }}</span
@@ -471,11 +468,11 @@ onBeforeUnmount(() => {
           <v-col cols="12">
             <v-row no-gutters class="my-4 justify-center">
               <v-btn-group divided density="compact">
-                <v-btn class="bg-terciary" @click="backToMatched">
+                <v-btn class="bg-toplayer" @click="backToMatched">
                   {{ t("common.cancel") }}
                 </v-btn>
                 <v-btn
-                  class="text-romm-green bg-terciary"
+                  class="text-romm-green bg-toplayer"
                   :disabled="selectedCover == undefined"
                   :variant="selectedCover == undefined ? 'plain' : 'flat'"
                   @click="confirm"
@@ -493,7 +490,7 @@ onBeforeUnmount(() => {
         <v-col>
           <v-chip label class="pr-0" size="small"
             >{{ t("rom.results-found") }}:<v-chip
-              color="romm-accent-1"
+              color="primary"
               class="ml-2 px-2"
               label
               >{{ !searching ? matchedRoms.length : ""
@@ -501,7 +498,7 @@ onBeforeUnmount(() => {
                 v-if="searching"
                 :width="1"
                 :size="10"
-                color="romm-accent-1"
+                color="primary"
                 indeterminate
             /></v-chip>
           </v-chip>
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index 6acfa6b2c..d9b1699a3 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -120,14 +120,14 @@ onBeforeUnmount(() => {
             :disabled="searching"
             :label="t('common.search')"
             hide-details
-            class="bg-terciary"
+            class="bg-toplayer"
           />
         </v-col>
         <v-col cols="5" lg="4">
           <v-select
             @click:clear="clearFilter"
             :label="t('common.platform')"
-            class="bg-terciary"
+            class="bg-toplayer"
             item-title="platform_name"
             :disabled="platforms.length == 0 || searching"
             hide-details
@@ -175,8 +175,7 @@ onBeforeUnmount(() => {
           <v-btn
             type="submit"
             @click="searchRoms"
-            class="bg-terciary"
-            rounded="0"
+            class="bg-toplayer"
             variant="text"
             icon="mdi-magnify"
             block
diff --git a/frontend/src/components/common/Game/Dialog/UploadRom.vue b/frontend/src/components/common/Game/Dialog/UploadRom.vue
index d5a1e970e..f2e893c43 100644
--- a/frontend/src/components/common/Game/Dialog/UploadRom.vue
+++ b/frontend/src/components/common/Game/Dialog/UploadRom.vue
@@ -228,8 +228,7 @@ watch(itemsPerPage, async () => {
           <v-btn
             block
             icon=""
-            class="text-romm-accent-1 bg-terciary"
-            rounded="0"
+            class="text-primary bg-toplayer"
             variant="text"
             @click="triggerFileInput"
           >
@@ -293,9 +292,8 @@ watch(itemsPerPage, async () => {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -317,11 +315,11 @@ watch(itemsPerPage, async () => {
     <template #append>
       <v-row class="justify-center mb-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">{{
+          <v-btn class="bg-toplayer" @click="closeDialog">{{
             t("common.cancel")
           }}</v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="filesToUpload.length == 0 || selectedPlatform == null"
             :variant="
               filesToUpload.length == 0 || selectedPlatform == null
diff --git a/frontend/src/components/common/Game/FavBtn.vue b/frontend/src/components/common/Game/FavBtn.vue
index 6c193790e..f948f04ab 100644
--- a/frontend/src/components/common/Game/FavBtn.vue
+++ b/frontend/src/components/common/Game/FavBtn.vue
@@ -91,7 +91,7 @@ async function switchFromFavourites() {
     size="x-small"
     variant="text"
     icon
-    ><v-icon color="romm-accent-1">{{
+    ><v-icon color="primary">{{
       collectionsStore.isFav(rom) ? "mdi-star" : "mdi-star-outline"
     }}</v-icon></v-btn
   >
diff --git a/frontend/src/components/common/Game/ListItem.vue b/frontend/src/components/common/Game/ListItem.vue
index 6f1db5fff..0aec69e68 100644
--- a/frontend/src/components/common/Game/ListItem.vue
+++ b/frontend/src/components/common/Game/ListItem.vue
@@ -41,7 +41,7 @@ withDefaults(
       ><v-col>{{ rom.name }}</v-col></v-row
     >
     <v-row v-if="withFilename" no-gutters
-      ><v-col class="text-romm-accent-1">{{ rom.file_name }}</v-col></v-row
+      ><v-col class="text-primary">{{ rom.file_name }}</v-col></v-row
     >
     <slot name="append-body"></slot>
     <template #append>
diff --git a/frontend/src/components/common/Game/RAvatar.vue b/frontend/src/components/common/Game/RAvatar.vue
index 0daee6dfe..9de2e5131 100644
--- a/frontend/src/components/common/Game/RAvatar.vue
+++ b/frontend/src/components/common/Game/RAvatar.vue
@@ -7,7 +7,7 @@ const theme = useTheme();
 </script>
 
 <template>
-  <v-avatar :rounded="0" :size="size">
+  <v-avatar :size="size">
     <v-img
       :src="
         !rom.igdb_id && !rom.moby_id && !rom.has_cover
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index 021ae87d5..424f84959 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -178,9 +178,7 @@ onMounted(() => {
             <v-col>{{ item.name }}</v-col></v-row
           >
           <v-row no-gutters
-            ><v-col class="text-romm-accent-1">{{
-              item.file_name
-            }}</v-col></v-row
+            ><v-col class="text-primary">{{ item.file_name }}</v-col></v-row
           >
           <template #append>
             <v-chip
@@ -270,8 +268,7 @@ onMounted(() => {
               :show-first-last-page="!xs"
               v-model="page"
               @update:model-value="updateUrlHash"
-              rounded="0"
-              active-color="romm-accent-1"
+              active-color="primary"
               :length="pageCount"
             />
           </v-col>
diff --git a/frontend/src/components/common/Navigation/CollectionsBtn.vue b/frontend/src/components/common/Navigation/CollectionsBtn.vue
index 9bc1cb89a..2749d9d55 100644
--- a/frontend/src/components/common/Navigation/CollectionsBtn.vue
+++ b/frontend/src/components/common/Navigation/CollectionsBtn.vue
@@ -19,12 +19,11 @@ const { activeCollectionsDrawer } = storeToRefs(navigationStore);
 <template>
   <v-btn
     :block="block"
-    rounded="0"
     variant="flat"
-    :color="activeCollectionsDrawer ? 'terciary' : ''"
+    :color="activeCollectionsDrawer ? 'tertiary' : ''"
     icon
     @click="navigationStore.switchActiveCollectionsDrawer"
-    ><v-icon :color="$route.name == 'collection' ? 'romm-accent-1' : ''"
+    ><v-icon :color="$route.name == 'collection' ? 'primary' : ''"
       >mdi-bookmark-box-multiple</v-icon
     ></v-btn
   >
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index 99b867331..cdac40631 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -33,7 +33,7 @@ function clear() {
     mobile
     width="500"
     v-model="activeCollectionsDrawer"
-    class="bg-terciary"
+    class="bg-toplayer"
   >
     <template #prepend>
       <v-text-field
@@ -46,10 +46,9 @@ function clear() {
         single-line
         :label="t('collection.search-collection')"
         variant="solo-filled"
-        rounded="0"
       ></v-text-field>
     </template>
-    <v-list lines="two" rounded="0" class="pa-0">
+    <v-list lines="two" class="pa-0">
       <collection-list-item
         v-for="collection in filteredCollections"
         :collection="collection"
@@ -60,10 +59,9 @@ function clear() {
       <v-btn
         @click="addCollection()"
         variant="tonal"
-        color="romm-accent-1"
+        color="primary"
         prepend-icon="mdi-plus"
         size="large"
-        rounded="0"
         block
         >{{ t("collection.add-collection") }}</v-btn
       >
diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index 6c95ed294..259317d53 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -21,6 +21,6 @@ const navigationStore = storeNavigation();
 }
 .v-avatar:hover,
 .v-avatar.active {
-  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-romm-accent-1)));
+  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-primary)));
 }
 </style>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 3066e8415..431af5b4b 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -26,7 +26,7 @@ const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
   <v-app-bar
     v-if="smAndDown"
     elevation="0"
-    class="bg-primary justify-center px-1"
+    class="bg-background justify-center px-1"
     mode="shift"
     height="45"
     app
diff --git a/frontend/src/components/common/Navigation/PlatformsBtn.vue b/frontend/src/components/common/Navigation/PlatformsBtn.vue
index e6bd9312d..652ff954e 100644
--- a/frontend/src/components/common/Navigation/PlatformsBtn.vue
+++ b/frontend/src/components/common/Navigation/PlatformsBtn.vue
@@ -16,12 +16,11 @@ const { activePlatformsDrawer } = storeToRefs(navigationStore);
 <template>
   <v-btn
     :block="block"
-    rounded="0"
     variant="flat"
-    :color="activePlatformsDrawer ? 'terciary' : ''"
+    :color="activePlatformsDrawer ? 'tertiary' : ''"
     icon
     @click="navigationStore.switchActivePlatformsDrawer"
-    ><v-icon :color="$route.name == 'platform' ? 'romm-accent-1' : ''"
+    ><v-icon :color="$route.name == 'platform' ? 'primary' : ''"
       >mdi-controller</v-icon
     ></v-btn
   >
diff --git a/frontend/src/components/common/Navigation/PlatformsDrawer.vue b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
index 0d40e4a9b..09966ba64 100644
--- a/frontend/src/components/common/Navigation/PlatformsDrawer.vue
+++ b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
@@ -25,7 +25,7 @@ function clear() {
     @update:model-value="clear"
     width="500"
     v-model="activePlatformsDrawer"
-    class="bg-terciary"
+    class="bg-toplayer"
   >
     <template #prepend>
       <v-text-field
@@ -38,10 +38,9 @@ function clear() {
         single-line
         :label="t('platform.search-platform')"
         variant="solo-filled"
-        rounded="0"
       ></v-text-field>
     </template>
-    <v-list lines="two" rounded="0" class="pa-0">
+    <v-list lines="two" class="pa-0">
       <platform-list-item
         v-for="platform in filteredPlatforms"
         :key="platform.slug"
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index d398289c5..2a3305495 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -106,20 +106,18 @@ onBeforeUnmount(() => {
   <v-btn
     v-if="auth.scopes.includes('platforms.write')"
     :block="block"
-    rounded="0"
     variant="flat"
-    color="primary"
     icon
     @click="navigationStore.goScan"
   >
     <v-progress-circular
       v-if="scanning"
-      color="romm-accent-1"
+      color="primary"
       :width="2"
       :size="20"
       indeterminate
     />
-    <v-icon v-else :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
+    <v-icon v-else :color="$route.name == 'scan' ? 'primary' : ''"
       >mdi-magnify-scan</v-icon
     >
   </v-btn>
diff --git a/frontend/src/components/common/Navigation/SearchBtn.vue b/frontend/src/components/common/Navigation/SearchBtn.vue
index 361f0f374..81d7b9163 100644
--- a/frontend/src/components/common/Navigation/SearchBtn.vue
+++ b/frontend/src/components/common/Navigation/SearchBtn.vue
@@ -6,8 +6,8 @@ import { inject } from "vue";
 const emitter = inject<Emitter<Events>>("emitter");
 </script>
 <template>
-  <v-btn icon variant="flat" rounded="0" :to="{ name: 'search' }"
-    ><v-icon :color="$route.name == 'search' ? 'romm-accent-1' : ''"
+  <v-btn icon variant="flat" :to="{ name: 'search' }"
+    ><v-icon :color="$route.name == 'search' ? 'primary' : ''"
       >mdi-magnify</v-icon
     ></v-btn
   >
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index d346f7538..ae0dc431d 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -46,9 +46,9 @@ async function logout() {
     mobile
     width="500"
     v-model="activeSettingsDrawer"
-    class="bg-terciary"
+    class="bg-toplayer"
   >
-    <v-list rounded="0" class="pa-0">
+    <v-list class="pa-0">
       <v-list-img>
         <v-img
           :src="
@@ -67,7 +67,7 @@ async function logout() {
       >
       </v-list-item>
     </v-list>
-    <v-list rounded="0" class="pa-0">
+    <v-list class="pa-0">
       <v-list-item
         @click="emitter?.emit('showEditUserDialog', auth.user as UserSchema)"
         append-icon="mdi-account"
@@ -96,7 +96,7 @@ async function logout() {
       </template>
     </v-list>
     <template v-if="!smAndDown" #append>
-      <v-list rounded="0" class="pa-0">
+      <v-list class="pa-0">
         <v-divider />
         <v-list-item @click="logout" append-icon="mdi-location-exit">{{
           t("common.logout")
diff --git a/frontend/src/components/common/Navigation/UploadBtn.vue b/frontend/src/components/common/Navigation/UploadBtn.vue
index c8ae3d383..495fbcd52 100644
--- a/frontend/src/components/common/Navigation/UploadBtn.vue
+++ b/frontend/src/components/common/Navigation/UploadBtn.vue
@@ -13,7 +13,6 @@ const auth = storeAuth();
     v-if="auth.scopes.includes('roms.write')"
     icon="mdi-upload"
     variant="flat"
-    rounded="0"
     @click="emitter?.emit('showUploadRomDialog', null)"
   />
 </template>
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
index 73caf36d1..ef3124b87 100644
--- a/frontend/src/components/common/Navigation/UserBtn.vue
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -31,6 +31,6 @@ const { user } = storeToRefs(auth);
 }
 .v-avatar:hover,
 .v-avatar.active {
-  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-romm-accent-1)));
+  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-primary)));
 }
 </style>
diff --git a/frontend/src/components/common/NewVersionDialog.vue b/frontend/src/components/common/NewVersionDialog.vue
index 7ffa4e120..d2f6b5512 100644
--- a/frontend/src/components/common/NewVersionDialog.vue
+++ b/frontend/src/components/common/NewVersionDialog.vue
@@ -35,13 +35,12 @@ onMounted(async () => {
           semver.gt(GITHUB_VERSION, VERSION) &&
           !latestVersionDismissed
         "
-        class="pa-1 border-romm-accent-1 mx-auto"
-        rounded="0"
+        class="pa-1 border-selected mx-auto"
         max-width="250"
       >
         <v-card-text class="text-center py-2 px-4">
           <span class="text-white text-shadow">New version available</span>
-          <span class="text-romm-accent-1 ml-1">v{{ GITHUB_VERSION }}</span>
+          <span class="text-primary ml-1">v{{ GITHUB_VERSION }}</span>
           <v-row class="mt-1" no-gutters>
             <v-col>
               <span class="pointer text-grey" @click="dismissVersionBanner"
diff --git a/frontend/src/components/common/Notifications/UploadProgress.vue b/frontend/src/components/common/Notifications/UploadProgress.vue
index 162312fd6..3c0628c08 100644
--- a/frontend/src/components/common/Notifications/UploadProgress.vue
+++ b/frontend/src/components/common/Notifications/UploadProgress.vue
@@ -52,7 +52,7 @@ watch(files, (newList) => {
             {{ file.filename }}
             <v-icon
               :icon="file.finished ? 'mdi-check' : 'mdi-loading mdi-spin'"
-              :color="file.finished ? 'green' : 'romm-accent-1'"
+              :color="file.finished ? 'green' : 'primary'"
               class="mx-2"
             />
           </v-list-item-title>
@@ -60,7 +60,7 @@ watch(files, (newList) => {
             <v-progress-linear
               v-model="file.progress"
               height="4"
-              color="romm-accent-1"
+              color="primary"
               class="mt-1"
             />
             <div class="upload-speeds d-flex justify-space-between mt-1">
@@ -87,7 +87,7 @@ watch(files, (newList) => {
         size="small"
         variant="tonal"
         class="my-2"
-        color="romm-accent-1"
+        color="primary"
         :disabled="!files.some((f) => f.finished || f.failed)"
         @click="clearFinished"
       >
diff --git a/frontend/src/components/common/Platform/Card.vue b/frontend/src/components/common/Platform/Card.vue
index 49a346afb..ce2e7f0cb 100644
--- a/frontend/src/components/common/Platform/Card.vue
+++ b/frontend/src/components/common/Platform/Card.vue
@@ -9,13 +9,13 @@ defineProps<{ platform: Platform }>();
   <v-hover v-slot="{ isHovering, props }">
     <v-card
       v-bind="props"
-      class="bg-terciary transform-scale"
+      class="bg-toplayer transform-scale"
       :class="{ 'on-hover': isHovering }"
       :elevation="isHovering ? 20 : 3"
       :to="{ name: 'platform', params: { platform: platform.id } }"
     >
       <v-card-text>
-        <v-row class="pa-1 justify-center bg-primary">
+        <v-row class="pa-1 justify-center bg-background">
           <div
             :title="platform.display_name"
             class="px-2 text-truncate text-caption"
@@ -32,7 +32,7 @@ defineProps<{ platform: Platform }>();
             class="mt-2"
           />
           <v-chip
-            class="bg-chip position-absolute"
+            class="bg-background position-absolute"
             size="x-small"
             style="bottom: 1rem; right: 1rem"
             label
diff --git a/frontend/src/components/common/Platform/Dialog/DeleteFirmware.vue b/frontend/src/components/common/Platform/Dialog/DeleteFirmware.vue
index e8a8fa7f1..85b96034a 100644
--- a/frontend/src/components/common/Platform/Dialog/DeleteFirmware.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeleteFirmware.vue
@@ -96,7 +96,7 @@ function closeDialog() {
     <template #header>
       <v-row no-gutters class="justify-center">
         <span>Removing</span>
-        <span class="text-romm-accent-1 mx-1">{{ firmwares.length }}</span>
+        <span class="text-primary mx-1">{{ firmwares.length }}</span>
         <span>firmware files from RomM</span>
       </v-row>
     </template>
@@ -181,9 +181,8 @@ function closeDialog() {
             <v-col class="px-6">
               <v-pagination
                 v-model="page"
-                rounded="0"
                 :show-first-last-page="true"
-                active-color="romm-accent-1"
+                active-color="primary"
                 :length="pageCount"
               />
             </v-col>
@@ -220,11 +219,11 @@ function closeDialog() {
       </v-row>
       <v-row class="justify-center my-2">
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+          <v-btn class="bg-toplayer" @click="closeDialog" variant="flat">
             Cancel
           </v-btn>
           <v-btn
-            class="text-romm-red bg-terciary"
+            class="text-romm-red bg-toplayer"
             variant="flat"
             @click="deleteFirmware"
           >
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index a8a95834d..c5094e42f 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -72,7 +72,7 @@ function closeDialog() {
         <span class="mr-1">{{ t("platform.removing-platform-1") }}</span>
         <platform-icon :slug="platform.slug" :name="platform.name" />
         <span class="ml-1"
-          >{{ platform.name }} - [<span class="text-romm-accent-1">{{
+          >{{ platform.name }} - [<span class="text-primary">{{
             platform.fs_slug
           }}</span
           >{{ t("platform.removing-platform-2") }}</span
@@ -82,10 +82,10 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center pa-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog">
+          <v-btn class="bg-toplayer" @click="closeDialog">
             {{ t("common.cancel") }}
           </v-btn>
-          <v-btn class="bg-terciary text-romm-red" @click="deletePlatform">
+          <v-btn class="bg-toplayer text-romm-red" @click="deletePlatform">
             {{ t("common.confirm") }}
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Platform/Dialog/UploadFirmware.vue b/frontend/src/components/common/Platform/Dialog/UploadFirmware.vue
index f4cd63a02..5ddfc7810 100644
--- a/frontend/src/components/common/Platform/Dialog/UploadFirmware.vue
+++ b/frontend/src/components/common/Platform/Dialog/UploadFirmware.vue
@@ -55,7 +55,7 @@ function uploadFirmware() {
   emitter?.emit("snackbarShow", {
     msg: `Uploading ${filesToUpload.value.length} states to ${currentPlatform.value.name}...`,
     icon: "mdi-loading mdi-spin",
-    color: "romm-accent-1",
+    color: "primary",
   });
 
   firmwareApi
@@ -163,9 +163,8 @@ watch(itemsPerPage, async () => {
               <v-col class="px-6">
                 <v-pagination
                   v-model="page"
-                  rounded="0"
                   :show-first-last-page="true"
-                  active-color="romm-accent-1"
+                  active-color="primary"
                   :length="pageCount"
                 />
               </v-col>
@@ -189,9 +188,9 @@ watch(itemsPerPage, async () => {
     <template #append>
       <v-row class="justify-center my-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-toplayer" @click="closeDialog"> Cancel </v-btn>
           <v-btn
-            class="bg-terciary text-romm-green"
+            class="bg-toplayer text-romm-green"
             :disabled="filesToUpload.length == 0 || !currentPlatform"
             :variant="
               filesToUpload.length == 0 || !currentPlatform ? 'plain' : 'flat'
diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index d1ff7eb40..b9a340b89 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -62,24 +62,19 @@ onMounted(() => {
     no-click-animation
     persistent
   >
-    <v-card rounded="0" :min-height="height" :max-height="height">
-      <v-toolbar density="compact" class="bg-terciary">
+    <v-card :min-height="height" :max-height="height">
+      <v-toolbar density="compact" class="bg-toplayer">
         <v-icon v-if="icon" :icon="icon" class="ml-5" />
         <r-isotipo :size="30" class="mx-4" v-if="showRommIcon" />
         <slot name="header"></slot>
         <template #append>
-          <v-btn
-            @click="closeDialog"
-            rounded="0"
-            variant="text"
-            icon="mdi-close"
-          />
+          <v-btn @click="closeDialog" variant="text" icon="mdi-close" />
         </template>
       </v-toolbar>
 
       <v-divider />
 
-      <v-toolbar v-if="hasToolbarSlot" density="compact" class="bg-terciary">
+      <v-toolbar v-if="hasToolbarSlot" density="compact" class="bg-toplayer">
         <slot name="toolbar"></slot>
       </v-toolbar>
       <v-divider />
@@ -101,7 +96,7 @@ onMounted(() => {
           <v-progress-circular
             :width="2"
             :size="40"
-            color="romm-accent-1"
+            color="primary"
             indeterminate
           />
         </v-row>
@@ -128,7 +123,7 @@ onMounted(() => {
 
       <template v-if="hasFooterSlot">
         <v-divider />
-        <v-toolbar class="bg-terciary" density="compact">
+        <v-toolbar class="bg-toplayer" density="compact">
           <slot name="footer"></slot>
         </v-toolbar>
       </template>
diff --git a/frontend/src/components/common/RSection.vue b/frontend/src/components/common/RSection.vue
index d655ee2a6..bcecf3b74 100644
--- a/frontend/src/components/common/RSection.vue
+++ b/frontend/src/components/common/RSection.vue
@@ -9,8 +9,8 @@ withDefaults(
 );
 </script>
 <template>
-  <v-card rounded="0">
-    <v-toolbar class="bg-terciary" density="compact">
+  <v-card>
+    <v-toolbar class="bg-toplayer" density="compact">
       <v-toolbar-title class="text-button">
         <v-icon :color="iconColor" class="mr-3">{{ icon }}</v-icon>
         {{ title }}
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index d394bc504..e76905302 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
             id="search-text-field"
             @keyup.enter="searchCovers()"
             @click:clear="searchTerm = ''"
-            class="bg-terciary"
+            class="bg-toplayer"
             v-model="searchTerm"
             :disabled="searching"
             label="Search"
@@ -150,8 +150,7 @@ onBeforeUnmount(() => {
           <v-btn
             type="submit"
             @click="searchCovers()"
-            class="bg-terciary"
-            rounded="0"
+            class="bg-toplayer"
             variant="text"
             icon="mdi-search-web"
             block
@@ -165,11 +164,10 @@ onBeforeUnmount(() => {
         :model-value="panels"
         multiple
         flat
-        rounded="0"
         variant="accordion"
       >
         <v-expansion-panel v-for="game in filteredCovers" :key="game.name">
-          <v-expansion-panel-title class="bg-terciary">
+          <v-expansion-panel-title class="bg-toplayer">
             <v-row no-gutters class="justify-center">
               <v-list-item class="pa-0">{{ game.name }}</v-list-item>
             </v-row>
@@ -209,7 +207,7 @@ onBeforeUnmount(() => {
                         <v-progress-circular
                           :width="2"
                           :size="40"
-                          color="romm-accent-1"
+                          color="primary"
                           indeterminate
                         />
                       </div>
diff --git a/frontend/src/components/common/ViewLoader.vue b/frontend/src/components/common/ViewLoader.vue
index 00aa794c3..c53baff26 100644
--- a/frontend/src/components/common/ViewLoader.vue
+++ b/frontend/src/components/common/ViewLoader.vue
@@ -21,11 +21,6 @@ emitter?.on("showLoadingDialog", (args) => {
     width="auto"
     persistent
   >
-    <v-progress-circular
-      :width="3"
-      :size="70"
-      color="romm-accent-1"
-      indeterminate
-    />
+    <v-progress-circular :width="3" :size="70" color="primary" indeterminate />
   </v-dialog>
 </template>
diff --git a/frontend/src/styles/common.css b/frontend/src/styles/common.css
index feee58f3c..18bd6b14c 100644
--- a/frontend/src/styles/common.css
+++ b/frontend/src/styles/common.css
@@ -59,8 +59,8 @@ body {
 .pointer {
   cursor: pointer !important;
 }
-.border-romm-accent-1 {
-  border: 1px solid rgba(var(--v-theme-romm-accent-1)) !important;
+.border-selected {
+  border: 1px solid rgba(var(--v-theme-primary)) !important;
   transform: scale(1.05);
 }
 #main-app-bar {
diff --git a/frontend/src/styles/themes.ts b/frontend/src/styles/themes.ts
index d9b4ed329..95cc523a9 100644
--- a/frontend/src/styles/themes.ts
+++ b/frontend/src/styles/themes.ts
@@ -1,8 +1,4 @@
 const commonColors = {
-  "romm-accent-1": "#a452fe",
-  "romm-accent-2": "#c400f7",
-  "romm-accent-3": "#3808a4",
-
   "romm-red": "#da3633",
   "romm-green": "#3FB950",
   "romm-white": "#fefdfe",
@@ -13,15 +9,19 @@ const commonColors = {
 export const dark = {
   dark: true,
   colors: {
-    primary: "#161b22",
-    secondary: "#0d1117",
-    terciary: "#202832",
-    background: "#0d1117",
-
-    surface: "#161b22",
-    tooltip: "#202832",
-    chip: "#161b22",
-
+    primary: "#8168E6",
+    secondary: "#9584D1",
+    tertiary: "#D4C4B9",
+    accent: "#FFB6A3",
+    background: "#0D1117",
+    surface: "#161B22",
+    toplayer: "#202832",
+    "primary-lighten": "#6B42CC",
+    "primary-darken": "#4527A0",
+    "secondary-lighten": "#F5F2FC",
+    "secondary-darken": "#D1C9F2",
+    "tertiary-lighten": "#FFD0C4",
+    "tertiary-darken": "#FFA089",
     ...commonColors,
   },
 };
@@ -29,15 +29,9 @@ export const dark = {
 export const light = {
   dark: false,
   colors: {
-    primary: "#ECEFF4",
-    secondary: "#ECEFF4",
-    terciary: "#ECEFF4",
-    background: "#ECEFF4",
-
-    surface: "#ECEFF4",
-    tooltip: "#ECEFF4",
-    chip: "#ECEFF4",
-
+    primary: "#5933B3",
+    secondary: "#E6E1F9",
+    tertiary: "#FFB6A3",
     ...commonColors,
   },
 };
diff --git a/frontend/src/views/Auth/Login.vue b/frontend/src/views/Auth/Login.vue
index 2c3a65ff2..49ab05012 100644
--- a/frontend/src/views/Auth/Login.vue
+++ b/frontend/src/views/Auth/Login.vue
@@ -100,7 +100,7 @@ async function loginOIDC() {
           />
           <v-btn
             type="submit"
-            class="bg-terciary mt-4"
+            class="bg-toplayer mt-4"
             variant="text"
             block
             :loading="loggingIn"
@@ -112,7 +112,7 @@ async function loginOIDC() {
             {{ t("login.login") }}
             <template #loader>
               <v-progress-circular
-                color="romm-accent-1"
+                color="primary"
                 :width="2"
                 :size="20"
                 indeterminate
@@ -129,7 +129,7 @@ async function loginOIDC() {
           <v-btn
             block
             type="submit"
-            class="bg-terciary"
+            class="bg-toplayer"
             variant="text"
             :disabled="loggingInOIDC || loggingIn"
             :loading="loggingInOIDC"
@@ -153,7 +153,7 @@ async function loginOIDC() {
             }}
             <template #loader>
               <v-progress-circular
-                color="romm-accent-1"
+                color="primary"
                 :width="2"
                 :size="20"
                 indeterminate
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 04da549b4..663409fc9 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -111,14 +111,13 @@ watch(
         >
           <v-tabs
             v-model="tab"
-            slider-color="romm-accent-1"
+            slider-color="primary"
             :class="{ 'mt-4': smAndDown }"
-            rounded="0"
           >
-            <v-tab value="details" rounded="0"> {{ t("rom.details") }} </v-tab>
-            <v-tab value="saves" rounded="0"> {{ t("common.saves") }} </v-tab>
-            <v-tab value="states" rounded="0"> {{ t("common.states") }} </v-tab>
-            <v-tab value="personal" rounded="0">
+            <v-tab value="details"> {{ t("rom.details") }} </v-tab>
+            <v-tab value="saves"> {{ t("common.saves") }} </v-tab>
+            <v-tab value="states"> {{ t("common.states") }} </v-tab>
+            <v-tab value="personal">
               {{ t("rom.personal") }}
             </v-tab>
             <v-tab
@@ -128,12 +127,11 @@ watch(
                   (currentRom.igdb_metadata?.dlcs ?? []).length > 0)
               "
               value="additionalcontent"
-              rounded="0"
             >
               {{ t("rom.additional-content") }}
             </v-tab>
             <!-- TODO: user screenshots -->
-            <!-- <v-tab value="screenshots" rounded="0">Screenshots</v-tab> -->
+            <!-- <v-tab value="screenshots" >Screenshots</v-tab> -->
             <v-tab
               v-if="
                 smAndDown &&
@@ -142,7 +140,6 @@ watch(
                   (currentRom.igdb_metadata?.expanded_games ?? []).length > 0)
               "
               value="relatedgames"
-              rounded="0"
             >
               {{ t("rom.related-content") }}
             </v-tab>
diff --git a/frontend/src/views/Player/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
index ea70e012e..67f83e33d 100644
--- a/frontend/src/views/Player/EmulatorJS/Base.vue
+++ b/frontend/src/views/Player/EmulatorJS/Base.vue
@@ -129,7 +129,7 @@ onMounted(async () => {
       xl="10"
       id="game-wrapper"
       :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
-      class="bg-primary"
+      class="bg-background"
       rounded
     >
       <player
@@ -162,7 +162,6 @@ onMounted(async () => {
             :disabled="gameRunning"
             v-model="coreRef"
             class="my-1"
-            rounded="0"
             hide-details
             variant="outlined"
             clearable
@@ -179,7 +178,6 @@ onMounted(async () => {
             :disabled="gameRunning"
             class="my-1"
             hide-details
-            rounded="0"
             variant="outlined"
             clearable
             :label="t('common.firmware')"
@@ -197,7 +195,6 @@ onMounted(async () => {
             hide-details
             variant="outlined"
             clearable
-            rounded="0"
             :label="t('common.save')"
             :items="
               rom.user_saves?.map((s) => ({
@@ -247,7 +244,6 @@ onMounted(async () => {
             :disabled="gameRunning"
             class="my-1"
             hide-details
-            rounded="0"
             variant="outlined"
             clearable
             :label="t('common.state')"
@@ -299,7 +295,7 @@ onMounted(async () => {
             hide-details
             variant="outlined"
             clearable
-            rounded="0"
+            
             disabled
             label="Patch"
             :items="[
@@ -317,11 +313,10 @@ onMounted(async () => {
               <v-btn
                 block
                 size="large"
-                rounded="0"
                 @click="onFullScreenChange"
                 :disabled="gameRunning"
                 :variant="fullScreenOnPlay ? 'flat' : 'outlined'"
-                :color="fullScreenOnPlay ? 'romm-accent-1' : ''"
+                :color="fullScreenOnPlay ? 'primary' : ''"
                 ><v-icon class="mr-1">{{
                   fullScreenOnPlay
                     ? "mdi-checkbox-outline"
@@ -336,10 +331,9 @@ onMounted(async () => {
               :xl="gameRunning ? 12 : 9"
             >
               <v-btn
-                color="romm-accent-1"
+                color="primary"
                 block
                 :disabled="gameRunning"
-                rounded="0"
                 variant="outlined"
                 size="large"
                 prepend-icon="mdi-play"
@@ -351,7 +345,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-refresh"
@@ -361,7 +354,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-arrow-left"
@@ -376,7 +368,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-arrow-left"
diff --git a/frontend/src/views/Player/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue
index f343a15be..d2f9c37c8 100644
--- a/frontend/src/views/Player/RuffleRS/Base.vue
+++ b/frontend/src/views/Player/RuffleRS/Base.vue
@@ -91,7 +91,7 @@ onMounted(async () => {
       xl="10"
       id="game-wrapper"
       :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
-      class="bg-secondary"
+      class="bg-surface"
       rounded
     >
       <div id="game" />
@@ -122,11 +122,10 @@ onMounted(async () => {
               <v-btn
                 block
                 size="large"
-                rounded="0"
                 @click="onFullScreenChange"
                 :disabled="gameRunning"
                 :variant="fullScreenOnPlay ? 'flat' : 'outlined'"
-                :color="fullScreenOnPlay ? 'romm-accent-1' : ''"
+                :color="fullScreenOnPlay ? 'primary' : ''"
                 ><v-icon class="mr-1">{{
                   fullScreenOnPlay
                     ? "mdi-checkbox-outline"
@@ -141,10 +140,9 @@ onMounted(async () => {
               :xl="gameRunning ? 12 : 9"
             >
               <v-btn
-                color="romm-accent-1"
+                color="primary"
                 block
                 :disabled="gameRunning"
-                rounded="0"
                 variant="outlined"
                 size="large"
                 prepend-icon="mdi-play"
@@ -156,7 +154,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-refresh"
@@ -166,7 +163,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-arrow-left"
@@ -181,7 +177,6 @@ onMounted(async () => {
           <v-btn
             class="mt-4"
             block
-            rounded="0"
             variant="outlined"
             size="large"
             prepend-icon="mdi-arrow-left"
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 8fbd0b818..bf548c898 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -236,14 +236,12 @@ async function stopScan() {
       @click="scan()"
     >
       <template #prepend>
-        <v-icon :color="scanning ? '' : 'romm-accent-1'"
-          >mdi-magnify-scan</v-icon
-        >
+        <v-icon :color="scanning ? '' : 'primary'">mdi-magnify-scan</v-icon>
       </template>
       {{ t("scan.scan") }}
       <template #loader>
         <v-progress-circular
-          color="romm-accent-1"
+          color="primary"
           :width="2"
           :size="20"
           indeterminate
@@ -287,24 +285,13 @@ async function stopScan() {
   <v-divider
     class="border-opacity-100 mt-3"
     :class="{ 'mx-4': !smAndDown }"
-    color="romm-accent-1"
+    color="primary"
   />
 
   <!-- Scan log -->
-  <v-card
-    elevation="0"
-    rounded="0"
-    class="bg-secondary mx-auto mb-1"
-    max-width="800"
-  >
+  <v-card elevation="0" class="bg-surface mx-auto mb-1" max-width="800">
     <v-card-text class="pa-0">
-      <v-expansion-panels
-        v-model="panels"
-        multiple
-        flat
-        rounded="0"
-        variant="accordion"
-      >
+      <v-expansion-panels v-model="panels" multiple flat variant="accordion">
         <v-expansion-panel
           v-for="platform in scanningPlatforms"
           :key="platform.id"
@@ -312,7 +299,7 @@ async function stopScan() {
           <v-expansion-panel-title>
             <v-list-item class="pa-0">
               <template #prepend>
-                <v-avatar :rounded="0" size="40">
+                <v-avatar size="40">
                   <platform-icon
                     :key="platform.slug"
                     :slug="platform.slug"
@@ -322,17 +309,13 @@ async function stopScan() {
               </template>
               {{ platform.name }}
               <template #append>
-                <v-chip
-                  class="ml-3"
-                  color="romm-accent-1"
-                  size="x-small"
-                  label
-                  >{{ platform.roms.length }}</v-chip
-                >
+                <v-chip class="ml-3" color="primary" size="x-small" label>{{
+                  platform.roms.length
+                }}</v-chip>
               </template>
             </v-list-item>
           </v-expansion-panel-title>
-          <v-expansion-panel-text class="bg-terciary">
+          <v-expansion-panel-text class="bg-toplayer">
             <rom-list-item
               v-for="rom in platform.roms"
               class="pa-4"
@@ -369,11 +352,11 @@ async function stopScan() {
     height="40"
     class="text-caption align-center"
   >
-    <v-chip variant="outlined" color="terciary" class="px-1">
+    <v-chip variant="outlined" color="tertiary" class="px-1">
       <v-icon class="text-white"> mdi-information </v-icon>
       <v-chip
         v-if="scanningPlatforms.length > 0"
-        color="romm-accent-1"
+        color="primary"
         text-color="white"
         size="small"
         class="ml-1 my-1"
@@ -392,7 +375,7 @@ async function stopScan() {
       </v-chip>
       <v-chip
         v-if="scanningPlatforms.length > 0"
-        color="romm-accent-1"
+        color="primary"
         size="small"
         text-color="white"
         class="ml-1 my-1"