diff --git a/package-lock.json b/package-lock.json
index 3722d31..437e368 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-        "svelte": "^3.44.0",
+        "svelte": "^3.49.0",
         "vite": "^2.7.2"
       }
     },
@@ -395,9 +395,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -514,9 +514,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.45.0.tgz",
-      "integrity": "sha512-6AWftH2eqqKLYH1HvKpuUWe8OfjflarhegN57P/Cqwc2Rb2F5oIdDtANU/jMscyZMzG0v6nTQox0siZR9cmRVQ==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -806,9 +806,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
     "path-parse": {
@@ -885,9 +885,9 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.45.0.tgz",
-      "integrity": "sha512-6AWftH2eqqKLYH1HvKpuUWe8OfjflarhegN57P/Cqwc2Rb2F5oIdDtANU/jMscyZMzG0v6nTQox0siZR9cmRVQ==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true
     },
     "svelte-hmr": {
diff --git a/package.json b/package.json
index 93a3fa9..d286b86 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-    "svelte": "^3.44.0",
+    "svelte": "^3.49.0",
     "vite": "^2.7.2"
   }
 }
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 5663787..251d9b2 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,11 +1,13 @@
 <script>
+  import { ColorsStore } from "../store/Colors";
+  
   $: showModal = false;
 
   const toggleModal = () => {
     showModal = !showModal;
   };
 
-  const cssBlock = `#gradient-canvas {\nwidth: 100%;\nheight: 100%;\n--gradient-color-1: #161d22;\n--gradient-color-2: #6ec3f4;\n--gradient-color-3: #5c4c85;\n--gradient-color-4: #313ab9;\n}`;
+  $: cssBlock = `#gradient-canvas {\nwidth: 100%;\nheight: 100%;\n--gradient-color-1: ${$ColorsStore?.color1};\n--gradient-color-2: ${$ColorsStore?.color2};\n--gradient-color-3: ${$ColorsStore?.color3};\n--gradient-color-4: ${$ColorsStore?.color4};\n}`;
   const htmlBlock = ` <canvas id="gradient-canvas" data-transition-in />`;
   const jsBlock = `import { Gradient } from './Gradient.js'\n\n// Create your instance\nconst gradient = new Gradient()\n\n// Call initGradient with the selector to your canvas\ngradient.initGradient('#gradient-canvas')`;
 </script>