diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
index 7a2d177..51093aa 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
@@ -289,13 +289,11 @@
                 var css = option.css;
                 selections.forEach((element) => {
                     var name = element.name;
-                    var value = element.value;
-                    var selected = saved == name ? 'selected="selected"' : "";
+                    var value = element.css;
+                    var selected = saved == name ? ' selected="selected"' : "";
                     html +=
-                        '<option data-css= "' +
-                        css +
-                        '"value=' +
-                        value +
+                        '<option value= "' +
+                        value + '"' +
                         selected +
                         ">" +
                         name +
@@ -402,9 +400,7 @@
                 var css = $("#cssOptions").val();
                 savedHtml += document.getElementById("cssOptions").innerHTML;
                 var checkboxes = document.getElementsByClassName("checkbox");
-                for (let element of checkboxes) {
-                    savedHtml += element.innerHTML;
-                }
+              
                 var selectedOptions = $(".checkbox:checked")
                     .map(function() {
                         return this.getAttribute("data-css");
@@ -417,9 +413,10 @@
 
                 //proccess selector
                 var selectors = document.getElementsByClassName("selector");
-                for (let element of selectors) {
+                for (var i = 0;i<selectors.length;i++) {
+                    var element = selectors[i]
                     css +=
-                        element.getAttribute("data-css").replaceAll("$", element.value) +
+                        element.selectedOptions[0].value +
                         "\n";
                     savedHtml += element.outerHTML;
                 }
@@ -465,7 +462,7 @@
                         var element = fontPickers[i]
                         if (element.value != "") {
                             var url = "https://fonts.googleapis.com/css?family=" + element.value;
-                            var promise = await fetch(url)
+                            var promise = await fetch(url, {mode: 'no-cors'})
                             var text = await promise.text()
                             css += text
                             css += element.getAttribute("data-css").replaceAll("$", element.value.replaceAll("+", " "));
diff --git a/skins-3.0.json b/skins-3.0.json
index c6e6f67..a347cdc 100644
--- a/skins-3.0.json
+++ b/skins-3.0.json
@@ -244,23 +244,31 @@
                     "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
                     "selections": [{
                             "name": "Default",
-                            "value": ""
+                            "value": "",
+							"css" : "@import url('https://prayag17.github.io/JellySkin/default.css');"
                         },
                         {
                             "name": "Sea Gradient",
-                            "value": "seaGradient"
+                            "value": "seaGradient",
+							"css" : "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
                         },
                         {
                             "name": "Sunset Gradient",
-                            "value": "sunsetGradient"
+                            "value": "sunsetGradient",
+							"css" : "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
+
                         },
                         {
                             "name": "Night Sky Gradient",
-                            "value": "nightSkyGradient"
+                            "value": "nightSkyGradient",
+							"css" : "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
+
                         },
                         {
                             "name": "Morning Gradient",
-                            "value": "morningGradient"
+                            "value": "morningGradient",
+							"css" : "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
+
                         }
                     ]
                 },
@@ -313,7 +321,7 @@
                         "css": "",
                         "selections": [{
                                 "name": "Scale in and out",
-                                "css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
+                                "css": " /* Dynamic Poster effect-option1*/ .cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
                             },
                             {
                                 "name": "Pop up and down",