diff --git a/css/_common.css b/css/_common.css
index 9d5ab79..2c87e91 100644
--- a/css/_common.css
+++ b/css/_common.css
@@ -1,17 +1,17 @@
 :root {
-    --cell-size: 25px;
-    --rX: -15;
-    --rY: 0;
-    --tZ: 25px;
+  --cell-size: 25px;
+  --rX: -15;
+  --rY: 0;
+  --tZ: 25px;
 }
 
 body {
-  background: linear-gradient(#212529, #14171a) fixed;
+    background: linear-gradient(#212529, #14171a) fixed;
 }
 
 @supports (backdrop-filter: blur()) {
     .modal::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
@@ -31,7 +31,7 @@ body {
 }
 
 #matrixCard {
-    background-image: radial-gradient(#222, #25292d)
+    background-image: radial-gradient(#222, #25292d);
 }
 
 .card-header {
@@ -49,12 +49,12 @@ body {
 }
 
 td#timeCell {
-  min-width: 10ch;
+    min-width: 10ch;
 }
 
 .minoes-table {
-    --piece-column: 0;
-    --piece-row   : 0;
+  --piece-column: 0;
+  --piece-row: 0;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
@@ -71,7 +71,7 @@ td#timeCell {
     }
 }
 .hard-dropped-table-animation {
-    animation: hard-dropped-table-animation ease-in-out .2s;
+    animation: hard-dropped-table-animation ease-in-out 0.2s;
 }
 
 tr.buffer-zone td:not(.mino) {
@@ -79,9 +79,9 @@ tr.buffer-zone td:not(.mino) {
 }
 
 tr.matrix td:not(.mino) {
-    border-left  : 1px solid #333;
-    border-right : 1px solid #333;
-    border-top   : 1px solid #303030;
+    border-left: 1px solid #333;
+    border-right: 1px solid #333;
+    border-top: 1px solid #303030;
     border-bottom: 1px solid #303030;
 }
 
@@ -113,33 +113,39 @@ td {
 }
 
 td.trail-animation {
-    animation: trail-animation ease-out .3s;
+    animation: trail-animation ease-out 0.3s;
 }
 
 @keyframes cleared-line-animation {
     from {
         background-color: white;
         filter: saturate(50%) brightness(300%);
-        box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
+        box-shadow:
+            0 0 0 #adb5bd,
+            0 0 0 #adb5bd;
     }
     60% {
-        box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
+        box-shadow:
+            -60px 0 2px #adb5bd66,
+            60px 0 2px #adb5bd66;
     }
     to {
         background-color: transparent;
-        box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
+        box-shadow:
+            -100px 0 5px transparent,
+            100px 0 5px transparent;
     }
 }
 
 tr.cleared-line-animation {
-    animation: cleared-line-animation ease-out .3s;
+    animation: cleared-line-animation ease-out 0.3s;
 }
 
 #holdTable .J,
 #holdTable .L,
 #holdTable .S,
 #holdTable .T,
-#holdTable .Z, 
+#holdTable .Z,
 #nextTable .J,
 #nextTable .L,
 #nextTable .S,
@@ -193,7 +199,6 @@ tr.cleared-line-animation {
         opacity: 0;
         transform: scale3d(0.3, 0.3, 0.3);
         line-height: var(--bs-body-line-height);
-
     }
     30% {
         opacity: 1;
@@ -213,13 +218,13 @@ tr.cleared-line-animation {
 
 @keyframes rotate-in-animation {
     0% {
-        opacity:0;
-        transform:rotate(200deg);
+        opacity: 0;
+        transform: rotate(200deg);
         line-height: var(--bs-body-line-height);
     }
     30% {
-        opacity:1;
-        transform:translateZ(0);
+        opacity: 1;
+        transform: translateZ(0);
         transform: scale3d(1, 1, 1);
     }
     80% {
@@ -235,15 +240,15 @@ tr.cleared-line-animation {
 }
 
 #messagesSpan div.rotate-in-animation {
-    animation-name:  rotate-in-animation;
-    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
+    animation-name: rotate-in-animation;
+    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
     animation-duration: 1s;
 }
 
 #messagesSpan div.zoom-in-animation {
     animation-name: zoom-in-animation;
-    animation-timing-function: cubic-bezier(.25,.46,.45,.94);
-    transform-origin:center;
+    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transform-origin: center;
     animation-duration: 1s;
 }
 
diff --git a/css/electro.css b/css/electro.css
index 70da9e0..32b61af 100644
--- a/css/electro.css
+++ b/css/electro.css
@@ -1,14 +1,14 @@
 body {
-    background-image: url("electro/bg.jpg");
+    background-image: url('electro/bg.jpg');
     background-size: cover;
 }
 
-body[data-bs-theme="dark"] {
-    --bs-body-bg: #2125296b;
+body[data-bs-theme='dark'] {
+  --bs-body-bg: #2125296b;
 }
 
 .btn-dark {
-    --bs-btn-bg: #2125296b;
+  --bs-btn-bg: #2125296b;
 }
 
 .card {
@@ -16,7 +16,7 @@ body[data-bs-theme="dark"] {
 }
 
 tr.matrix td:not(.mino) {
-    border-left  : none;
+    border-left: none;
     border-bottom: none;
 }
 
@@ -30,29 +30,30 @@ tr.matrix td:not(.mino) {
 }
 
 .mino:not(.ghost):not(.locking):before {
-    content: "";
+    content: '';
     position: absolute;
     z-index: -1;
     inset: 0;
     margin: 1px 1px 0px 0px;
     padding: 2px;
     border-radius: 4px;
-    --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
-    --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
+  --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column)) / 10);
+  --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row)) / 25);
     background: radial-gradient(
         at var(--glint-x) var(--glint-y),
-        rgba(204, 238, 247, 0.9)   0%,
-        rgba(10, 159, 218, 0.9) 150%);
-    mask: 
-       linear-gradient(#666 0 0) content-box, 
-       linear-gradient(#fff 0 0);
+        rgba(204, 238, 247, 0.9) 0%,
+        rgba(10, 159, 218, 0.9) 150%
+    );
+    mask:
+        linear-gradient(#666 0 0) content-box,
+        linear-gradient(#fff 0 0);
     mask-mode: luminance;
     mask-composite: intersect;
 }
 
 .ghost.mino {
     background: rgba(242, 255, 255, 10%);
-    border : 2px solid rgba(255, 255, 255, 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 3px;
     box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
 }
diff --git a/css/jazz.css b/css/jazz.css
index a69dbf5..5c73152 100644
--- a/css/jazz.css
+++ b/css/jazz.css
@@ -1,5 +1,5 @@
 body {
-    --bs-gutter-x: 0;
+  --bs-gutter-x: 0;
     background: black !important;
 }
 
@@ -7,11 +7,11 @@ body {
     gap: 0 !important;
     margin: 0;
     text-transform: uppercase;
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
 }
 
 #screenRow {
-    --bs-gutter-x: 0;
+  --bs-gutter-x: 0;
 }
 
 .card {
@@ -26,7 +26,7 @@ body {
 }
 
 .card-header,
-.card-header th{
+.card-header th {
     background: transparent;
     font-weight: 400 !important;
     font-size: 1.3em;
@@ -34,18 +34,14 @@ body {
 }
 
 #screenRow .table {
-    --bs-border-width: 0;
+  --bs-border-width: 0;
 }
 
 .minoes-table {
     display: flex;
     flex-direction: column;
-    filter: 
-        drop-shadow(-2px 0 0 white)
-        drop-shadow(2px 0 0 white)
-        drop-shadow(0 -2px 0 white)
-        drop-shadow(0 2px 0 white)
-        drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
+    filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
+        drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
 }
 
 .minoes-table tr {
@@ -93,7 +89,7 @@ body {
 }
 
 td#timeCell {
-  text-align: center;
+    text-align: center;
 }
 
 #matrixCard {
@@ -128,45 +124,45 @@ tr.matrix td:not(.mino) {
 }
 
 .I.mino {
-    background-color: #42AFE1;
-    border-color: #6CEAFF;
-    --box-shadow-color: #6CEAFF;
+    background-color: #42afe1;
+    border-color: #6ceaff;
+  --box-shadow-color: #6ceaff;
 }
 
 .J.mino {
-    background-color: #1165B5;
-    border-color: #339BFF;
-    --box-shadow-color: #339BFF;
+    background-color: #1165b5;
+    border-color: #339bff;
+  --box-shadow-color: #339bff;
 }
 
 .L.mino {
-    background-color: #F38927;
-    border-color: #FFBA59;
-    --box-shadow-color: #FFBA59;
+    background-color: #f38927;
+    border-color: #ffba59;
+  --box-shadow-color: #ffba59;
 }
 
 .O.mino {
-    background-color: #F6D03C;
-    border-color: #FFFF7F;
-    --box-shadow-color: #FFFF7F;
+    background-color: #f6d03c;
+    border-color: #ffff7f;
+  --box-shadow-color: #ffff7f;
 }
 
 .S.mino {
     background-color: #32ee3e;
-    border-color: #84F880;
-    --box-shadow-color: #84F880;
+    border-color: #84f880;
+  --box-shadow-color: #84f880;
 }
 
 .T.mino {
-    background-color: #9739A2;
-    border-color: #D958E9;
-    --box-shadow-color: #D958E9;
+    background-color: #9739a2;
+    border-color: #d958e9;
+  --box-shadow-color: #d958e9;
 }
 
 .Z.mino {
-    background-color: #EB4F65;
-    border-color: #FF7F79;
-    --box-shadow-color: #FF7F79;
+    background-color: #eb4f65;
+    border-color: #ff7f79;
+  --box-shadow-color: #ff7f79;
 }
 
 .ghost.mino {
@@ -218,4 +214,4 @@ tr.matrix td:not(.mino) {
     to {
         background-color: transparent;
     }
-}
\ No newline at end of file
+}
diff --git a/css/jazz2.css b/css/jazz2.css
index 8a28e3e..7989868 100644
--- a/css/jazz2.css
+++ b/css/jazz2.css
@@ -36,37 +36,37 @@ tr.matrix td:not(.mino) {
 
 .I.mino {
     background-color: #0293b0;
-    --box-shadow-color: #05d2f2;
+  --box-shadow-color: #05d2f2;
 }
 
 .J.mino {
     background-color: #2c69c2;
-    --box-shadow-color: #7bb7f6;
+  --box-shadow-color: #7bb7f6;
 }
 
 .L.mino {
     background-color: #fa9b23;
-    --box-shadow-color: #FFBA59;
+  --box-shadow-color: #ffba59;
 }
 
 .O.mino {
     background-color: #f9d92c;
-    --box-shadow-color: #fff194;
+  --box-shadow-color: #fff194;
 }
 
 .S.mino {
     background-color: #01a493;
-    --box-shadow-color: #03e7d3;;
+  --box-shadow-color: #03e7d3;
 }
 
 .T.mino {
     background-color: #6830d1;
-    --box-shadow-color: #bb88fc;
+  --box-shadow-color: #bb88fc;
 }
 
 .Z.mino {
     background-color: #ee2b58;
-    --box-shadow-color: #fd4487;;
+  --box-shadow-color: #fd4487;
 }
 
 .ghost.mino {
@@ -115,4 +115,4 @@ tr.matrix td:not(.mino) {
     to {
         background-color: transparent;
     }
-}
\ No newline at end of file
+}
diff --git a/css/jstris-skin.css b/css/jstris-skin.css
index b407374..96867ad 100644
--- a/css/jstris-skin.css
+++ b/css/jstris-skin.css
@@ -1,11 +1,11 @@
 :root {
   --cell-size: 24px;
-  --sprite-size: calc(100% / 8);
+  --sprite-size: round(100% / 8, 1px);
   --skin-url: url(https://i.imgur.com/HqGYC5G.png);
 }
 
 .card {
-  background-color: #1c1c1c;
+    background-color: #1c1c1c;
 }
 
 .card-body {
@@ -15,7 +15,7 @@
 #matrixCard {
     background-image: url(jstris-skin/jstris-grid.png);
     background-position: bottom;
-    background-repeat: no-repeat; 
+    background-repeat: no-repeat;
 }
 
 tr.matrix td:not(.mino) {
@@ -30,40 +30,40 @@ tr.matrix td:not(.mino) {
 }
 
 .I {
-    --sprite-pos: 6;
+  --sprite-pos: 6;
 }
 
 .J {
-    --sprite-pos: 7;
+  --sprite-pos: 7;
 }
 
 .L {
-    --sprite-pos: 3;
+  --sprite-pos: 3;
 }
 
 .O {
-    --sprite-pos: 4;
+  --sprite-pos: 4;
 }
 
 .S {
-    --sprite-pos: 5;
+  --sprite-pos: 5;
 }
 
 .T {
-    --sprite-pos: 8;
+  --sprite-pos: 8;
 }
 
 .Z {
-    --sprite-pos: 2;
+  --sprite-pos: 2;
 }
 
 .ghost {
-    --sprite-pos: 1;
+  --sprite-pos: 1;
     opacity: 50%;
 }
 
 .disabled {
-    --sprite-pos: 0;
+  --sprite-pos: 0;
 }
 
 .locking.mino {
@@ -75,21 +75,7 @@ tr.matrix td:not(.mino) {
     box-shadow: 4px 4px 10px #0002;
 }
 
-.option {
-    display: inline-block;
+.preview {
+  --cell-size: 24px;
     height: var(--cell-size);
-}
-
-.result {
-    --nb-sprites: 9;
-}
-
-.select2-container:not(.select2-container--disabled) .selection {
-    --nb-sprites: 4;
-    --sprite-pos: 4;
-    width: calc(var(--nb-sprites) * var(--cell-size));
-    background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
-    background-image: var(--skin-url);
-    background-size: cover;
-    background-repeat: no-repeat;
 }
\ No newline at end of file
diff --git a/css/minimal.css b/css/minimal.css
index 6be5dd4..90652d5 100644
--- a/css/minimal.css
+++ b/css/minimal.css
@@ -5,12 +5,8 @@
 .minoes-table {
     display: flex;
     flex-direction: column;
-    filter: 
-        drop-shadow(-2px 0 0 white)
-        drop-shadow(2px 0 0 white)
-        drop-shadow(0 -2px 0 white)
-        drop-shadow(0 2px 0 white)
-        drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
+    filter: drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white) drop-shadow(0 -2px 0 white)
+        drop-shadow(0 2px 0 white) drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
 }
 
 .minoes-table tr {
@@ -41,38 +37,38 @@ tr.matrix td:not(.mino) {
 }
 
 .I.mino {
-    --background-color: #42AFE1;
-    --box-shadow-color: #6CEAFF;
+  --background-color: #42afe1;
+  --box-shadow-color: #6ceaff;
 }
 
 .J.mino {
-    --background-color: #1165B5;
-    --box-shadow-color: #339BFF;
+  --background-color: #1165b5;
+  --box-shadow-color: #339bff;
 }
 
 .L.mino {
-    --background-color: #F38927;
-    --box-shadow-color: #FFBA59;
+  --background-color: #f38927;
+  --box-shadow-color: #ffba59;
 }
 
 .O.mino {
-    --background-color: #F6D03C;
-    --box-shadow-color: #FFFF7F;
+  --background-color: #f6d03c;
+  --box-shadow-color: #ffff7f;
 }
 
 .S.mino {
-    --background-color: #51B84D;
-    --box-shadow-color: #84F880;
+  --background-color: #51b84d;
+  --box-shadow-color: #84f880;
 }
 
 .T.mino {
-    --background-color: #9739A2;
-    --box-shadow-color: #D958E9;
+  --background-color: #9739a2;
+  --box-shadow-color: #d958e9;
 }
 
 .Z.mino {
-    --background-color: #EB4F65;
-    --box-shadow-color: #FF7F79;
+  --background-color: #eb4f65;
+  --box-shadow-color: #ff7f79;
 }
 
 .ghost.mino {
@@ -86,8 +82,8 @@ tr.matrix td:not(.mino) {
 }
 
 .locking.mino {
-    --background-color: white;
-    --box-shadow-color: #DDD;
+  --background-color: white;
+  --box-shadow-color: #ddd;
 }
 
 .locked.mino {
@@ -122,4 +118,4 @@ tr.matrix td:not(.mino) {
     to {
         background-color: transparent;
     }
-}
\ No newline at end of file
+}
diff --git a/css/old-school.css b/css/old-school.css
index ebc1f6c..640b627 100644
--- a/css/old-school.css
+++ b/css/old-school.css
@@ -1,15 +1,15 @@
 :root {
-    --cell-size: 20px;
-    --sprite-size: 40px;
+  --cell-size: 20px;
+  --sprite-size: 40px;
 }
 
 @font-face {
-    font-family: "Early GameBoy";
-    src: url("old-school/Early GameBoy.ttf");
+    font-family: 'Early GameBoy';
+    src: url('old-school/Early GameBoy.ttf');
 }
 
 #screenRow {
-    background-image: url("old-school/bg.png");
+    background-image: url('old-school/bg.png');
     background-size: 10px;
     padding: 40px 20px;
     border: 3px inset black;
@@ -21,9 +21,9 @@
 }
 
 .card {
-    background: #8D8E04;
+    background: #8d8e04;
     border-radius: 0;
-    border-image-source: url("old-school/border-sm.png");
+    border-image-source: url('old-school/border-sm.png');
     border-image-slice: 25;
     border-image-width: 13px;
     border-image-repeat: repeat;
@@ -33,12 +33,12 @@
 }
 
 .card-header {
-    background: #8D8E04;
+    background: #8d8e04;
 }
 
 #matrixCard {
     background: #808302;
-    border-image-source: url("old-school/border-lg.png");
+    border-image-source: url('old-school/border-lg.png');
     border-image-slice: 30;
     border-image-width: 15px;
     border-image-outset: 15px;
@@ -48,16 +48,18 @@
 .card,
 .card-header,
 #messagesSpan div {
-    font-family: "Early GameBoy", monospace;
+    font-family: 'Early GameBoy', monospace;
     font-smooth: never;
     -webkit-font-smoothing: none;
     color: #254806;
-    text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%);
+    text-shadow:
+        -1px -1px 3px rgba(0, 0, 0, 40%),
+        1px 1px 1px rgba(0, 0, 0, 40%);
 }
 
 #statsTable {
-    font-size: .7em;
-    letter-spacing: -.1em;
+    font-size: 0.7em;
+    letter-spacing: -0.1em;
 }
 
 #statsTable tr {
@@ -68,7 +70,7 @@
 #statsTable th,
 #statsTable td {
     border: 0;
-    padding: 0 .2rem;
+    padding: 0 0.2rem;
 }
 
 #statsTable td {
@@ -77,7 +79,11 @@
 }
 
 #messagesSpan {
-    text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
+    text-shadow:
+        -2px -2px #808302,
+        -2px 2px #808302,
+        2px -2px #808302,
+        2px 2px #808302;
 }
 
 .minoes-table td {
@@ -85,38 +91,40 @@
 }
 
 .mino {
-    box-shadow: -2px -2px 5px rgba(0, 0, 0, 40%), 1px 1px 2px rgba(0, 0, 0, 40%);
+    box-shadow:
+        -2px -2px 5px rgba(0, 0, 0, 40%),
+        1px 1px 2px rgba(0, 0, 0, 40%);
     background-size: cover;
-    background-image: url("old-school/sprites.png");
+    background-image: url('old-school/sprites.png');
     background-position: calc(var(--sprite-pos) * var(--sprite-size)) 0px;
 }
 
 .I.mino {
-    --sprite-pos: 0;
+  --sprite-pos: 0;
 }
 
 .J.mino {
-    --sprite-pos: 1;
+  --sprite-pos: 1;
 }
 
 .L.mino {
-    --sprite-pos: 2;
+  --sprite-pos: 2;
 }
 
 .O.mino {
-    --sprite-pos: 3;
+  --sprite-pos: 3;
 }
 
 .S.mino {
-    --sprite-pos: 4;
+  --sprite-pos: 4;
 }
 
 .T.mino {
-    --sprite-pos: 5;
+  --sprite-pos: 5;
 }
 
 .Z.mino {
-    --sprite-pos: 6;
+  --sprite-pos: 6;
 }
 
 @keyframes blinker {
@@ -139,18 +147,25 @@
 }
 
 .hard-dropped-table-animation {
-    animation: hard-dropped-table-animation steps(1) .2s;
+    animation: hard-dropped-table-animation steps(1) 0.2s;
 }
 
 @keyframes cleared-line-animation {
-    10%, 30%, 50%, 70%, 90% {
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
         opacity: 0;
     }
-    20%, 40%, 60%, 80% {
+    20%,
+    40%,
+    60%,
+    80% {
         opacity: 100%;
     }
 }
 
 tr.cleared-line-animation {
-    animation: cleared-line-animation ease-out .4s;
-}
\ No newline at end of file
+    animation: cleared-line-animation ease-out 0.4s;
+}
diff --git a/css/opera.css b/css/opera.css
index 6a7897b..31e55ed 100644
--- a/css/opera.css
+++ b/css/opera.css
@@ -1,5 +1,5 @@
 body {
-    --bs-gutter-x: 0;
+  --bs-gutter-x: 0;
     background: black !important;
 }
 
@@ -7,11 +7,11 @@ body {
     gap: 0 !important;
     margin: 0;
     text-transform: uppercase;
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
 }
 
 #screenRow {
-    --bs-gutter-x: 0;
+  --bs-gutter-x: 0;
 }
 
 .card {
@@ -22,7 +22,7 @@ body {
 }
 
 .card-header,
-.card-header th{
+.card-header th {
     background: transparent;
     font-weight: 400 !important;
     font-size: 1.3em;
@@ -30,7 +30,7 @@ body {
 }
 
 #screenRow .table {
-    --bs-border-width: 0;
+  --bs-border-width: 0;
 }
 
 #holdTable {
@@ -76,7 +76,7 @@ body {
 }
 
 td#timeCell {
-  text-align: center;
+    text-align: center;
 }
 
 #matrixCard {
@@ -95,38 +95,38 @@ td#timeCell {
 }
 
 .I.mino {
-    background-color: #42AFE1;
-    border-color: #6CEAFF;
+    background-color: #42afe1;
+    border-color: #6ceaff;
 }
 
 .J.mino {
-    background-color: #1165B5;
-    border-color: #339BFF;
+    background-color: #1165b5;
+    border-color: #339bff;
 }
 
 .L.mino {
-    background-color: #F38927;
-    border-color: #FFBA59;
+    background-color: #f38927;
+    border-color: #ffba59;
 }
 
 .O.mino {
-    background-color: #F6D03C;
-    border-color: #FFFF7F;
+    background-color: #f6d03c;
+    border-color: #ffff7f;
 }
 
 .S.mino {
     background-color: #32ee3e;
-    border-color: #84F880;
+    border-color: #84f880;
 }
 
 .T.mino {
-    background-color: #9739A2;
-    border-color: #D958E9;
+    background-color: #9739a2;
+    border-color: #d958e9;
 }
 
 .Z.mino {
-    background-color: #EB4F65;
-    border-color: #FF7F79;
+    background-color: #eb4f65;
+    border-color: #ff7f79;
 }
 
 .ghost.mino {
diff --git a/css/stereo.css b/css/stereo.css
index 9cedaec..9ab8cd1 100644
--- a/css/stereo.css
+++ b/css/stereo.css
@@ -6,38 +6,42 @@
 }
 
 body {
-  background-image: url(stereo/bg.jpg),
-    radial-gradient(circle at center,
-      #39444f 0%,
-      #2c323b 25%,
-      #293036 28%,
-      #252b32 34%,
-      #242930 38%,
-      #1a1d22 52%,
-      #191c22 53%,
-      #151519 63%,
-      #141418 65%,
-      #0f0f12 74%,
-      #0a0c0d 100%);
-  background-repeat: space;
-  background-position: center;
-  background-size: cover;
+    background-image:
+        url(stereo/bg.jpg),
+        radial-gradient(
+            circle at center,
+            #39444f 0%,
+            #2c323b 25%,
+            #293036 28%,
+            #252b32 34%,
+            #242930 38%,
+            #1a1d22 52%,
+            #191c22 53%,
+            #151519 63%,
+            #141418 65%,
+            #0f0f12 74%,
+            #0a0c0d 100%
+        );
+    background-repeat: space;
+    background-position: center;
+    background-size: cover;
 }
 
 #sceneDiv {
-  perspective: 500px;
-  cursor: grab;
+    perspective: 500px;
+    cursor: grab;
 }
 
 #sceneDiv:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 #screenRow {
   --light-rX: calc(-1 * var(--rY) / 30);
   --light-rY: calc(var(--rX) / 20);
-  display: block;
-  transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
+    display: block;
+    transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
+        rotateY(calc((var(--rY)) * 1deg));
 }
 
 #sceneDiv,
@@ -49,38 +53,37 @@ body {
 .minoes-table tbody,
 .minoes-table tr,
 .minoes-table td {
-  display: block;
-  transform-style: preserve-3d;
+    display: block;
+    transform-style: preserve-3d;
 }
 
 #screenRow .col {
-  display: inline-block !important;
-  width: max-content;
-  height: 100%;
-  vertical-align: top;
+    display: inline-block !important;
+    width: max-content;
+    height: 100%;
+    vertical-align: top;
 }
 
 .card {
-  background: #36394180;
+    background: #36394180;
 }
 
 #matrixCard {
-  background-image: none;
+    background-image: none;
 }
 
-#screenRow .card>* {
-  transform: translateZ(var(--cell-size));
+#screenRow .card > * {
+    transform: translateZ(var(--cell-size));
 }
 
 #screenRow .card-header {
-  background-color: transparent;
-  border: none;
+    background-color: transparent;
+    border: none;
 }
 
 .card,
 .card-header {
-  text-shadow:
-    calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
+    text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
 }
 
 #holdTable .mino {
@@ -95,35 +98,35 @@ body {
 
 .minoes-table th,
 .minoes-table td {
-  display: inline-block !important;
-  width: max-content;
+    display: inline-block !important;
+    width: max-content;
 }
 
 .minoes-table tr {
-  width: max-content;
-  height: var(--cell-size);
+    width: max-content;
+    height: var(--cell-size);
 }
 
 #statsTable tr {
-  display: table;
-  width: 100%;
+    display: table;
+    width: 100%;
 }
 
 #statsTable th,
 #statsTable td {
-  display: table-cell;
-  border: 0;
+    display: table-cell;
+    border: 0;
 }
 
 tr.matrix td:not(.mino) {
-  border: 0;
+    border: 0;
 }
 
 .minoes-table td {
-  width: var(--cell-size);
-  height: var(--cell-size);
-  overflow: visible;
-  position: relative;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    overflow: visible;
+    position: relative;
 }
 
 .mino,
@@ -136,9 +139,9 @@ tr.matrix td:not(.mino) {
   --light-y: calc(var(--light-rY) + var(--light-pY));
   --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
   --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
-  background: var(--center-color);
-  border-radius: 4px;
-  border: 2px outset var(--center-color);
+    background: var(--center-color);
+    border-radius: 4px;
+    border: 2px outset var(--center-color);
 }
 
 .mino::before,
@@ -148,33 +151,29 @@ td.trail-animation::before,
 td.trail-animation::after,
 tr.cleared-line-animation td::before,
 tr.cleared-line-animation td::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: var(--cell-size);
-  height: var(--cell-size);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: var(--cell-size);
+    height: var(--cell-size);
 }
 
 /* Front face */
 .mino,
 td.trail-animation {
-  --light: calc(
-    1
-    + (var(--light-y) * 0.3)
-    + (var(--light-x) * 0.2)
-  );
-  --center-x:  calc(35% + var(--light-x) * 10%);
-  --center-y:  calc(35% + var(--light-y) * 10%);
-  background: radial-gradient(
-    circle at var(--center-x) var(--center-y),
-    var(--center-color) 15%,
-    var(--edge-color) 100%
-  );
-  box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
-  border-style: ridge;
-  border-width: var(--rbw);
+  --light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
+  --center-x: calc(35% + var(--light-x) * 10%);
+  --center-y: calc(35% + var(--light-y) * 10%);
+    background: radial-gradient(
+        circle at var(--center-x) var(--center-y),
+        var(--center-color) 15%,
+        var(--edge-color) 100%
+    );
+    box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
+    border-style: ridge;
+    border-width: var(--rbw);
 }
 
 /* Left face */
@@ -182,13 +181,9 @@ td.trail-animation {
 td.trail-animation::before,
 tr.cleared-line-animation td::before,
 .mino + .mino::before {
-  --light: calc(
-    1.1
-    + (var(--light-x) * -0.2)
-    + (var(--light-y) * 0.15)
-  );
-  transform: var(--t3d) rotateY(-90deg);
-  transform-origin: left;
+  --light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
+    transform: var(--t3d) rotateY(-90deg);
+    transform-origin: left;
 }
 
 /* Right face */
@@ -196,61 +191,111 @@ tr.cleared-line-animation td::before,
 .right .mino + .mino::before,
 .right td.trail-animation::before,
 .right tr.cleared-line-animation td::before {
-  --light: calc(
-    0.85
-    + (var(--light-x) * -0.2)
-    + (var(--light-y) * -0.15)
-  );
-  --center-x:  calc(65% + var(--light-x) * 10%);
-  --center-y:  calc(35% + var(--light-y) * 10%);
-  filter: saturate(0.95);
-  transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
-  transform-origin: left;
+  --light: calc(0.85 + (var(--light-x) * -0.2) + (var(--light-y) * -0.15));
+  --center-x: calc(65% + var(--light-x) * 10%);
+  --center-y: calc(35% + var(--light-y) * 10%);
+    filter: saturate(0.95);
+    transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
+    transform-origin: left;
 }
 
 .right .mino:last-child::before {
-  transform: var(--t3d) rotateY(90deg) !important;
-  transform-origin: right !important;
+    transform: var(--t3d) rotateY(90deg) !important;
+    transform-origin: right !important;
 }
 
 /* Top face */
 .mino::after,
 td.trail-animation::after,
 tr.cleared-line-animation td::after {
-  --light: calc(
-    1.5
-    + (var(--light-y) * 0.2)
-  );
-  transform: var(--t3d) rotateX(90deg);
-  transform-origin: top;
+  --light: calc(1.5 + (var(--light-y) * 0.2));
+    transform: var(--t3d) rotateX(90deg);
+    transform-origin: top;
 }
 
 /* Bottom face */
 .bottom .mino::after,
 .bottom td.trail-animation::after,
 .bottom tr.cleared-line-animation td::after {
-  --light: calc(
-    1.1
-    + (var(--light-y) * -0.3)
-  );
-  --center-x:  calc(65% + var(--light-x) * 10%);
-  --center-y:  calc(65% + var(--light-y) * 10%);
-  filter: saturate(0.95);
-  transform: var(--t3d) rotateX(-90deg);
-  transform-origin: bottom;
+  --light: calc(1.1 + (var(--light-y) * -0.3));
+  --center-x: calc(65% + var(--light-x) * 10%);
+  --center-y: calc(65% + var(--light-y) * 10%);
+    filter: saturate(0.95);
+    transform: var(--t3d) rotateX(-90deg);
+    transform-origin: bottom;
 }
 
-.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
-.L, .L + :not(.mino) { --h: 28deg;  --s: 85%; --l: 52%; --a: 0.75; }
-.O, .O + :not(.mino) { --h: 48deg;  --s: 88%; --l: 52%; --a: 0.75; }
-.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
-.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
-.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
-.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
+.J,
+.J + :not(.mino) {
+  --h: 210deg;
+  --s: 78%;
+  --l: 52%;
+  --a: 0.75;
+}
+.L,
+.L + :not(.mino) {
+  --h: 28deg;
+  --s: 85%;
+  --l: 52%;
+  --a: 0.75;
+}
+.O,
+.O + :not(.mino) {
+  --h: 48deg;
+  --s: 88%;
+  --l: 52%;
+  --a: 0.75;
+}
+.I,
+.I + :not(.mino) {
+  --h: 200deg;
+  --s: 70%;
+  --l: 52%;
+  --a: 0.75;
+}
+.S,
+.S + :not(.mino) {
+  --h: 118deg;
+  --s: 45%;
+  --l: 52%;
+  --a: 0.75;
+}
+.T,
+.T + :not(.mino) {
+  --h: 293deg;
+  --s: 48%;
+  --l: 52%;
+  --a: 0.75;
+}
+.Z,
+.Z + :not(.mino) {
+  --h: 352deg;
+  --s: 75%;
+  --l: 52%;
+  --a: 0.75;
+}
 
-.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
-.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
-.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
+.ghost.mino,
+.ghost.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 55%;
+  --a: 0.4;
+}
+.locking.mino,
+.locking.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 92%;
+  --a: 0.72;
+}
+.disabled.mino,
+.disabled.mino + :not(.mino) {
+  --h: 0deg;
+  --s: 0%;
+  --l: 45%;
+  --a: 0.72;
+}
 
 #holdTable .J + :not(.mino),
 #holdTable .L + :not(.mino),
@@ -262,13 +307,13 @@ tr.cleared-line-animation td::after {
 #nextTable .S + :not(.mino),
 #nextTable .T + :not(.mino),
 #nextTable .Z + :not(.mino) {
-  transform: translateX(50%);
+    transform: translateX(50%);
 }
 
 @keyframes trail-animation {
     from {
         background-color: hsla(180, 100%, 100%, 0.1);
-        border-color:  hsla(180, 100%, 100%, 0.1);
+        border-color: hsla(180, 100%, 100%, 0.1);
     }
     to {
         background-color: transparent;
@@ -278,111 +323,114 @@ tr.cleared-line-animation td::after {
 
 td.trail-animation::before,
 td.trail-animation::after {
-    animation: trail-animation ease-out .3s;
+    animation: trail-animation ease-out 0.3s;
 }
 
 @keyframes locked-animation {
     from {
-        --h: 0deg; --s: 0%; --l: 100%; --a: 1;
-        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+      --h: 0deg;
+      --s: 0%;
+      --l: 100%;
+      --a: 1;
+        box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
     }
 }
 
 .locked.mino::before,
 .locked.mino::after {
     animation: locked-animation;
-    animation-duration: .2s;
+    animation-duration: 0.2s;
 }
 
 @keyframes cleared-line-animation {
-  from {
-    background-color: white !important;
-    box-shadow: 0 0 0 white;
-  }
-  to {
-    background-color: #fff0;
-    box-shadow: 0 0 100px transparent;
-  }
+    from {
+        background-color: white !important;
+        box-shadow: 0 0 0 white;
+    }
+    to {
+        background-color: #fff0;
+        box-shadow: 0 0 100px transparent;
+    }
 }
 
 tr.cleared-line-animation td::before,
 tr.cleared-line-animation td::after {
-  animation: cleared-line-animation ease-out .3s;
+    animation: cleared-line-animation ease-out 0.3s;
 }
 
 @keyframes show-level-animation {
-  from {
-    opacity: 1;
-    transform: translateY(200%);
-  }
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
 
-  50% {
-    transform: translateY(0) scaleY(1);
-    line-height: var(--bs-body-line-height);
-  }
+    50% {
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(-100%) scaleY(0);
-    line-height: 0;
-  }
+    to {
+        opacity: 1;
+        transform: translateY(-100%) scaleY(0);
+        line-height: 0;
+    }
 }
 
 @keyframes zoom-in-animation {
-  from {
-    opacity: 1;
-    transform: scale3d(0.3, 0.3, 0.3);
-    line-height: var(--bs-body-line-height);
-  }
+    from {
+        opacity: 1;
+        transform: scale3d(0.3, 0.3, 0.3);
+        line-height: var(--bs-body-line-height);
+    }
 
-  30% {
-    transform: scale3d(1, 1, 1);
-  }
+    30% {
+        transform: scale3d(1, 1, 1);
+    }
 
-  80% {
-    transform: scale3d(1, 1, 1);
-    line-height: var(--bs-body-line-height);
-  }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
 
-  to {
-    opacity: 1;
-    transform: scale3d(1.5, 0, 1);
-    line-height: 0;
-  }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
 }
 
 @keyframes rotate-in-animation {
-  0% {
-    opacity: 1;
-    transform: rotate(200deg);
-    line-height: var(--bs-body-line-height);
-  }
+    0% {
+        opacity: 1;
+        transform: rotate(200deg);
+        line-height: var(--bs-body-line-height);
+    }
 
-  30% {
-    transform: translateZ(0) scale3d(1, 1, 1);
-  }
+    30% {
+        transform: translateZ(0) scale3d(1, 1, 1);
+    }
 
-  80% {
-    transform: scale3d(1, 1, 1);
-    line-height: var(--bs-body-line-height);
-  }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
 
-  to {
-    opacity: 1;
-    transform: scale3d(1.5, 0, 1);
-    line-height: 0;
-  }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
 }
 
 @keyframes game-over-animation {
-  from {
-    opacity: 1;
-    transform: translateY(200%);
-  }
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-    line-height: var(--bs-body-line-height);
-  }
+    to {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
 }
diff --git a/css/synthwave.css b/css/synthwave.css
index 9ac2140..c59fa78 100644
--- a/css/synthwave.css
+++ b/css/synthwave.css
@@ -3,20 +3,20 @@ body {
     background-size: cover;
 }
 
-body[data-bs-theme="dark"] {
-    --bs-body-bg: #2125296b;
+body[data-bs-theme='dark'] {
+  --bs-body-bg: #2125296b;
 }
 
 .btn-dark {
-    --bs-btn-bg: #2125296b;
+  --bs-btn-bg: #2125296b;
 }
 
 .card {
-  background: #25292d66;
+    background: #25292d66;
 }
 
 #matrixCard {
-  background-image: radial-gradient(#2226, #25292d66);
+    background-image: radial-gradient(#2226, #25292d66);
 }
 
 .card,
@@ -26,8 +26,8 @@ body[data-bs-theme="dark"] {
 }
 
 .minoes-table {
-  background: transparent;
-  border-spacing: 2px;
+    background: transparent;
+    border-spacing: 2px;
 }
 
 #matrixTable {
@@ -35,17 +35,17 @@ body[data-bs-theme="dark"] {
 }
 
 #matrixTable td:not(.mino) {
-  border-color: #8881;
-  border-top: none;
-  border-bottom: none;
+    border-color: #8881;
+    border-top: none;
+    border-bottom: none;
 }
 
 .mino {
-  background: var(--color);
-  border: 3px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 0 8px var(--border);
-  filter: blur(0.5px);
+    background: var(--color);
+    border: 3px solid var(--border);
+    border-radius: 6px;
+    box-shadow: 0 0 8px var(--border);
+    filter: blur(0.5px);
 }
 
 .I {
@@ -79,11 +79,11 @@ body[data-bs-theme="dark"] {
 }
 
 .Z {
-  --color: #E67D8666;
-  --border: #E67D86;
+  --color: #e67d8666;
+  --border: #e67d86;
 }
 
 .ghost {
   --color: #fff4;
   --border: #fff5;
-}
\ No newline at end of file
+}
diff --git a/css/tetrio-skin.css b/css/tetrio-skin.css
index 6e58b71..3d34db0 100644
--- a/css/tetrio-skin.css
+++ b/css/tetrio-skin.css
@@ -1,7 +1,7 @@
 :root {
-    --cell-size: 30px;
-    --sprite-size: round(100% / 11, 1px);
-    --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
+  --cell-size: 30px;
+  --sprite-size: round(100% / 11, 1px);
+  --skin-url: url(https://you.have.fail/ed/at/tetrioplus/data/content/skin/Haley%20Halcyon/tetrio_gameboy_plus.svg);
 }
 
 tr.matrix td:not(.mino) {
@@ -17,40 +17,40 @@ tr.matrix td:not(.mino) {
 }
 
 .I {
-    --sprite-pos: 4;
+  --sprite-pos: 4;
 }
 
 .J {
-    --sprite-pos: 5;
+  --sprite-pos: 5;
 }
 
 .L {
-    --sprite-pos: 1;
+  --sprite-pos: 1;
 }
 
 .O {
-    --sprite-pos: 2;
+  --sprite-pos: 2;
 }
 
 .S {
-    --sprite-pos: 3;
+  --sprite-pos: 3;
 }
 
 .T {
-    --sprite-pos: 6;
+  --sprite-pos: 6;
 }
 
 .Z {
-    --sprite-pos: 0;
+  --sprite-pos: 0;
 }
 
 .ghost {
-    --sprite-pos: 7;
+  --sprite-pos: 7;
     opacity: 40%;
 }
 
 .disabled {
-    --sprite-pos: 8;
+  --sprite-pos: 8;
 }
 
 .locking.mino {
@@ -62,23 +62,7 @@ tr.matrix td:not(.mino) {
     box-shadow: 4px 4px 10px #0002;
 }
 
-.option {
-    --cell-size: 24px;
-    display: inline-block;
+.preview {
+  --cell-size: 24px;
     height: var(--cell-size);
-}
-
-.result {
-    --nb-sprites: 9;
-}
-
-.select2-container:not(.select2-container--disabled) .selection {
-    --padded-cell-size: calc(var(--cell-size) + 1px);
-    --nb-sprites: 4;
-    --sprite-pos: 2;
-    width: calc(var(--nb-sprites) * var(--padded-cell-size) - 1px);
-    background-position-x: calc(-1 * var(--sprite-pos) * var(--padded-cell-size));
-    background-image: var(--skin-url);
-    background-size: cover;
-    background-repeat: no-repeat;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 558a067..acd1937 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@
                 </div>
                 <div class="col-4">
                   <select name="skinURL" id="skinURLSelect" class="form-select"
-                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${encodeURI(this.value)})`)">
+                  oninput="document.documentElement.style.setProperty('--skin-url', `url(${this.value})`)">
                   </select>
                 </div>
                 <label for="skinURLSelect" class="col-2 col-form-label">Sample</label>
diff --git a/js/app.js b/js/app.js
index bb68ab5..6e38ede 100644
--- a/js/app.js
+++ b/js/app.js
@@ -318,14 +318,19 @@ sceneDiv.onwheel = function (event) {
     screenRow.style.setProperty('--tZ', tZ + 'px');
 };
 
+const ImageURLPattern = /^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i
 $.fn.select2.defaults.set("templateResult", (state) =>
     state.id
-    ? $(`<img class="option result" src="${state.id}" title="${state.text}" loading="lazy"/>`)
+    ? $(`<img class="preview" src="${state.id}" title="${state.text}" loading="lazy"/>`)
     : state.text
 )
 $.fn.select2.defaults.set("templateSelection", (state) =>
     state.id
-        ? $(`<span class="option selection" style="--skin-url: url(${state.id})" title="${state.text}" alt="${state.id}" loading="lazy"></span>`)
+        ? $(`
+<table class="minoes-table preview" style="--skin-url: url(${state.id});">
+    <tr><td class="Z mino"></td><td class="O mino"></td><td class="T mino"></td><td class="I mino"></td></tr>
+</table>
+`)
         : state.text
 )
 $.fn.select2.defaults.set("theme", "bootstrap-5")
@@ -336,7 +341,7 @@ $.fn.select2.defaults.set("placeholder", "URL de l'image")
 $.fn.select2.defaults.set("tags", true)
 $.fn.select2.defaults.set("createTag", function (params) {
     const url = encodeURI(params.term);
-    if (/^(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))$/i.test(url)) {
+    if (ImageURLPattern.test(url)) {
         return {
             id: url,
             text: 'Source externe',
@@ -349,6 +354,7 @@ stylesheetSelect.oninput = function (event) {
     selectedStyleSheet.href = this.value;
 
     $("#skinURLSelect").empty();
+
     switch (this.value) {
         case 'css/jstris-skin.css':
             skinURLSelect.disabled = false;
@@ -362,7 +368,7 @@ stylesheetSelect.oninput = function (event) {
                             text: group,
                             children: json[group].map(skin => ({
                                 id: skin.link,
-                                text: `${skin.name} (${skin.author})\n${skin.description}`,
+                                text: `${skin.name} (${skin.author})`,
                             })),
                         };
                         data.push(groupData);
@@ -371,6 +377,7 @@ stylesheetSelect.oninput = function (event) {
                     $('#skinURLSelect').select2({data: data});
                 });
             break;
+
         case 'css/tetrio-skin.css':
             skinURLSelect.disabled = false;
 
@@ -381,10 +388,11 @@ stylesheetSelect.oninput = function (event) {
                         .filter((item) => (item.type == "skin" && item.format == "tetrioraster"))
                         .map((skin) => {
                             return {
-                                id: `https://you.have.fail/tetrioplus/data/${skin.path}`,
-                                text:`${skin.name} (${skin.author})`
+                                id: encodeURI(`https://you.have.fail/tetrioplus/data/${skin.path}`),
+                                text:`${skin.name} (${skin.author})\n${skin.description}`
                             }
                         })
+                        .filter((option) => ImageURLPattern.test(option.id))
                     $('#skinURLSelect').select2({data: data});
                 })
             break;