diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..1b8ac88
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
index 0a42524..6160f1a 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,19 @@
-
-
 ## Coverview
+
 Creating cover images for your blogs is now super easy.
+
 <p>
 <a href="https://github.com/rutikwankhade/CoverView"><img src="https://img.shields.io/github/stars/rutikwankhade/CoverView.svg?style=social&label=Star"></a>
 <a href="https://github.com/rutikwankhade/CoverView"><img src="https://badges.frapsoft.com/os/v1/open-source.svg?v=103"></a>
 <a href="https://lbesson.mit-license.org"><img src="https://img.shields.io/badge/License-MIT-blue.svg"></a>
 
-
-
 </p>
 
-
-
-
 <img src="https://gist.github.com/user-attachments/assets/1d1c1833-29bc-45d6-97dd-e26c2d1019cb
 " height="auto" width="800px"  margin="20px">
 
-
-
- 
-
-
 ## ⚡ Features
+
 - 🚀 super fast and easy to use
 - ✨ unsplash integration to search images
 - 🌈 7 different themes, multiple fonts
@@ -30,9 +21,8 @@ Creating cover images for your blogs is now super easy.
 - 💾 Cover size based on blogging platform (i.e hashnode and dev)
 
 ## 👩‍💻 Developing
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ```shell
 git clone https://github.com/rutikwankhade/CoverView.git
@@ -40,10 +30,9 @@ cd CoverView/
 npm start
 ```
 
-
 ## 👇 Contributing
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
 1. Fork it (<https://github.com/rutikwankhade/CoverView/fork>)
 2. Create your feature branch (`git checkout -b feature/fooBar`)
@@ -51,12 +40,10 @@ Pull requests are welcome. For major changes, please open an issue first to disc
 4. Push to the branch (`git push origin feature/fooBar`)
 5. Create a new Pull Request
 
-
 ## 🙏 Acknowledgments
+
 - [dom-to-image](https://github.com/tsayen/dom-to-image)
 - [Hero Patterns](https://www.heropatterns.com/)
 - [Devicons](https://github.com/devicons/devicon)
 
 Don't forget to leave a ⭐ if you found this useful. Also checkout more products i built at [rutik.dev](https://rutik.dev)
-
-
diff --git a/package-lock.json b/package-lock.json
index b83498a..0964ddf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.4",
         "postcss": "^8.4.12",
+        "prettier": "3.5.2",
         "tailwindcss": "^3.0.24"
       }
     },
@@ -5398,9 +5399,10 @@
       }
     },
     "node_modules/acorn": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
-      "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5417,6 +5419,18 @@
         "acorn-walk": "^7.1.1"
       }
     },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
@@ -5443,6 +5457,18 @@
         "xtend": "^4.0.2"
       }
     },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-node/node_modules/acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -5491,14 +5517,15 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-      "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -5521,33 +5548,11 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+    "node_modules/ajv/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
     },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
@@ -6042,6 +6047,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -7297,21 +7311,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7323,11 +7322,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -8712,6 +8706,22 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -8877,17 +8887,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -9342,6 +9341,22 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "node_modules/fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -9580,6 +9595,31 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -10012,6 +10052,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/har-validator/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -14157,17 +14213,6 @@
         }
       }
     },
-    "node_modules/jsdom/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/jsdom/node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -14732,21 +14777,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -14758,11 +14788,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16630,6 +16655,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.2.tgz",
+      "integrity": "sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -17919,6 +17960,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -19064,17 +19114,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/terser/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -19288,6 +19327,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -19622,21 +19675,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -19648,11 +19686,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -19740,21 +19773,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -19766,11 +19784,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -19852,17 +19865,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -20039,21 +20041,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -20068,11 +20055,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
diff --git a/package.json b/package.json
index cd1036b..a3ea208 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
+    "prettier": "3.5.2",
     "tailwindcss": "^3.0.24"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index c8df799..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,6 @@
 module.exports = {
- 
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/public/index.html b/public/index.html
index 8dc21ab..475439f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,71 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="./logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="./logo.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://coverview.vercel.app/" />
+    <meta
+      property="og:title"
+      content="Coverview: Creating cover images for your blogs is now super easy"
+    />
+    <meta
+      property="og:description"
+      content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more."
+    />
+    <meta
+      property="og:image"
+      content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png"
+    />
 
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://coverview.vercel.app/">
-  <meta property="og:title" content="Coverview: Creating cover images for your blogs is now super easy">
-  <meta property="og:description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more.">
-  <meta property="og:image"
-    content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png">
-
-  <meta name="description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more." />
-  <meta property="twitter:card" content="summary_large_image">
-  <meta property="twitter:url" content="https://coverview.vercel.app/">
-  <meta property="twitter:title" content="CoverView: Creating cover images for your blogs is now super easy">
-  <meta property="twitter:description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more.">
-  <meta property="twitter:image"
-    content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png">
-  <link rel="apple-touch-icon" href="./logo.png" />
-  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
+    <meta
+      name="description"
+      content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more."
+    />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://coverview.vercel.app/" />
+    <meta
+      property="twitter:title"
+      content="CoverView: Creating cover images for your blogs is now super easy"
+    />
+    <meta
+      property="twitter:description"
+      content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more."
+    />
+    <meta
+      property="twitter:image"
+      content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png"
+    />
+    <link rel="apple-touch-icon" href="./logo.png" />
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
     integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css" crossorigin="anonymous">
-  <!--
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css"
+      crossorigin="anonymous"
+    />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
 
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
 
-  <link href="https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?" rel="stylesheet" crossorigin="anonymous">
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" crossorigin="anonymous">
-
-  <!--
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -46,17 +74,27 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <!-- Place this tag in your head or just before your close body tag. -->
-  <script defer type="text/javascript" src="https://api.pirsch.io/pirsch.js" id="pirschjs"
-    data-code="y1wOy094LZLgd8a0GcLjDsPVQygfceIB"></script>
-<meta name="google-site-verification" content="iC9xqg_PeFTmMUq-zSDqnsyaimqm8NQ2bp6Kxpbyzz4" />
-    <title>Coverview - Creating cover images for your blogs is now super easy</title>
-</head>
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script
+      defer
+      type="text/javascript"
+      src="https://api.pirsch.io/pirsch.js"
+      id="pirschjs"
+      data-code="y1wOy094LZLgd8a0GcLjDsPVQygfceIB"
+    ></script>
+    <meta
+      name="google-site-verification"
+      content="iC9xqg_PeFTmMUq-zSDqnsyaimqm8NQ2bp6Kxpbyzz4"
+    />
+    <title>
+      Coverview - Creating cover images for your blogs is now super easy
+    </title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -66,6 +104,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/src/assets/css/patterns.css b/src/assets/css/patterns.css
index 749bf91..fc397ec 100644
--- a/src/assets/css/patterns.css
+++ b/src/assets/css/patterns.css
@@ -1,80 +1,80 @@
 .graph-paper {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.77'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.77'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .jigsaw {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ffffff' fill-opacity='0.75' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ffffff' fill-opacity='0.75' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .hideout {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .dots {
-	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 .falling-triangles {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .circuit-board {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .temple {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .anchors {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .brickwall {
-	background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .overlapping-circles {
-	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .wiggle {
-	background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.76'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .tic-tac-toe {
-	background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 .leaf {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%23ffffff' fill-opacity='0.76' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .bubbles {
-	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.76' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 .squares {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%23ffffff' fill-opacity='0.76' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%23ffffff' fill-opacity='0.76' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .explorer {
-	background-color: #ee5522;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-	background-attachment: fixed;
-	background-size: cover;
+  background-color: #ee5522;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
 }
 
 .jupiter {
-	background-color: #ff9d00;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
-	background-attachment: fixed;
-	background-size: cover;
+  background-color: #ff9d00;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
 }
 
 .sun {
-	background-color: #ffaa00;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbf00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffd624' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe038' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffeb49' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff558' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffff66' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-	background-attachment: fixed;
-	background-size: cover;
+  background-color: #ffaa00;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbf00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffd624' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe038' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffeb49' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff558' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffff66' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
 }
diff --git a/src/components/App.js b/src/components/App.js
index 3bebd83..14a1a5e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,22 +1,20 @@
-import React from 'react';
+import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import Editor from './Editor';
-import Home from './Home'
-import Faq from './Faq';
+import Editor from "./Editor";
+import Home from "./Home";
+import Faq from "./Faq";
 
 const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route exact path="/editor" element={<Editor />} />
+        <Route exact path="/faq" element={<Faq />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
 
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route exact path="/" element={<Home />} />
-                <Route exact path="/editor" element={<Editor />} />
-                <Route exact path="/faq" element={<Faq />} />
-            </Routes>
-        </BrowserRouter>
-    );
-
-}
-
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index f50852e..94fd865 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -6,78 +6,93 @@ import unsplash from "../utils/unsplashConfig";
 import domtoimage from "dom-to-image";
 
 const ComponentToImg = (props) => {
-
-	const [loading, setLoading] = useState(false)
-
-	const { unsplashImage } = useContext(ImgContext);
-	const componentRef = React.createRef();
-
-
-
-
-	async function saveImage(data) {
-		var a = document.createElement("A");
-		a.href = data;
-		a.download = `cover.png`;
-		document.body.appendChild(a);
-		setLoading(false)
-
-		a.click();
-		document.body.removeChild(a);
-	}
-
-	const downloadImage = async () => {
-		// exportComponentAsPNG(componentRef, 'cover')
-		setLoading(true)
-
-		const element = componentRef.current;
-
-		// console.log(element)
-		// console.log(element.offsetHeight)
-
-		let data = await domtoimage.toPng(componentRef.current, {
-			height: element.offsetHeight * 2,
-			width: element.offsetWidth * 2,
-			style: {
-				transform: "scale(" + 2 + ")",
-				transformOrigin: "top left",
-				width: element.offsetWidth + "px",
-				height: element.offsetHeight + "px",
-			}
-		})
-
-		// console.log(data)
-		await saveImage(data);
-
-
-		if (unsplashImage) {
-			unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, });
-		}
-	}
-
-
-	return (
-		<React.Fragment>
-			<div ref={componentRef}>{props.children}</div>
-			<button
-				className="border p-2 bg-gray-700 hover:bg-gray-800 flex items-center text-white text-xl rounded-lg m-4 px-4"
-				onClick={() => downloadImage()}>
-
-
-				<span>
-					{
-						loading ?
-							<svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-white animate animate-spin" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" ><path d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"></path></svg>
-							:
-							<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
-					}
-				</span>
-
-				<span className="mx-2">Download</span>
-			</button>
-		</React.Fragment>
-	);
-
-}
+  const [loading, setLoading] = useState(false);
+
+  const { unsplashImage } = useContext(ImgContext);
+  const componentRef = React.createRef();
+
+  async function saveImage(data) {
+    var a = document.createElement("A");
+    a.href = data;
+    a.download = `cover.png`;
+    document.body.appendChild(a);
+    setLoading(false);
+
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  const downloadImage = async () => {
+    // exportComponentAsPNG(componentRef, 'cover')
+    setLoading(true);
+
+    const element = componentRef.current;
+
+    // console.log(element)
+    // console.log(element.offsetHeight)
+
+    let data = await domtoimage.toPng(componentRef.current, {
+      height: element.offsetHeight * 2,
+      width: element.offsetWidth * 2,
+      style: {
+        transform: "scale(" + 2 + ")",
+        transformOrigin: "top left",
+        width: element.offsetWidth + "px",
+        height: element.offsetHeight + "px",
+      },
+    });
+
+    // console.log(data)
+    await saveImage(data);
+
+    if (unsplashImage) {
+      unsplash.photos.trackDownload({
+        downloadLocation: unsplashImage.downloadLink,
+      });
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <div ref={componentRef}>{props.children}</div>
+      <button
+        className="border p-2 bg-gray-700 hover:bg-gray-800 flex items-center text-white text-xl rounded-lg m-4 px-4"
+        onClick={() => downloadImage()}
+      >
+        <span>
+          {loading ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6 text-white animate animate-spin"
+              fill="currentColor"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"></path>
+            </svg>
+          ) : (
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+              ></path>
+            </svg>
+          )}
+        </span>
+
+        <span className="mx-2">Download</span>
+      </button>
+    </React.Fragment>
+  );
+};
 
 export default ComponentToImg;
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index ade91dc..d6cce45 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -1,10 +1,9 @@
 .dev {
-    height: 340px;
-    width: 860px;
+  height: 340px;
+  width: 860px;
 }
 
 .hashnode {
-    height: 420px;
-    width: 800px;
-
-}
\ No newline at end of file
+  height: 420px;
+  width: 800px;
+}
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index 8dafd0c..7d7b71c 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -10,42 +10,50 @@ import MobileMockupTheme from "./Themes/MobileMockupTheme";
 import BackgroundTheme from "./Themes/BackgroundTheme";
 
 const CoverImage = (props) => {
-	// hexToRgbA(hex, opacity) {
-	// 	var c;
-	// 	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-	// 		c = hex.substring(1).split("");
-	// 		if (c.length === 3) {
-	// 			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-	// 		}
-	// 		c = "0x" + c.join("");
-	// 		return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
-	// 	}
-	// 	throw new Error("Bad Hex");
-	// }
-
-	const { theme } = props;
-
-	const selectTheme = (theme) => {
-		switch (theme) {
-			case 'basic': return <BasicTheme config={props} />
-			case 'modern': return <ModernTheme config={props} />
-			case 'outline': return <OutlineTheme config={props} />
-			case 'preview': return <PreviewTheme config={props} />
-			case 'stylish': return <StylishTheme config={props} />
-			case 'mobile': return <MobileMockupTheme config={props} />
-			case 'background': return <BackgroundTheme config={props} />
-
-			default: return <BasicTheme config={props} />
-		}
-	}
-
-
-	return (
-		<div className={`border-2  border-gray-50 md:scale-100 scale-50 ${props.platform}`}>
-			{selectTheme(theme)}
-		</div>
-	);
-
-}
+  // hexToRgbA(hex, opacity) {
+  // 	var c;
+  // 	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+  // 		c = hex.substring(1).split("");
+  // 		if (c.length === 3) {
+  // 			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  // 		}
+  // 		c = "0x" + c.join("");
+  // 		return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
+  // 	}
+  // 	throw new Error("Bad Hex");
+  // }
+
+  const { theme } = props;
+
+  const selectTheme = (theme) => {
+    switch (theme) {
+      case "basic":
+        return <BasicTheme config={props} />;
+      case "modern":
+        return <ModernTheme config={props} />;
+      case "outline":
+        return <OutlineTheme config={props} />;
+      case "preview":
+        return <PreviewTheme config={props} />;
+      case "stylish":
+        return <StylishTheme config={props} />;
+      case "mobile":
+        return <MobileMockupTheme config={props} />;
+      case "background":
+        return <BackgroundTheme config={props} />;
+
+      default:
+        return <BasicTheme config={props} />;
+    }
+  };
+
+  return (
+    <div
+      className={`border-2  border-gray-50 md:scale-100 scale-50 ${props.platform}`}
+    >
+      {selectTheme(theme)}
+    </div>
+  );
+};
 
 export default CoverImage;
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 5796605..70f3e30 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -1,163 +1,183 @@
 import React from "react";
 import CoverImage from "./CoverImage";
 import ComponentToImg from "./ComponentToImg";
-import Select from 'react-select';
-import RandomTheme from './RandomTheme';
-import { ImgProvider } from '../utils/ImgContext'
+import Select from "react-select";
+import RandomTheme from "./RandomTheme";
+import { ImgProvider } from "../utils/ImgContext";
 import Header from "./Header";
 
-
 import { THEMES } from "../utils/constants";
 
-const defaultIcon = { 'label': 'react', 'value': 'react' }
+const defaultIcon = { label: "react", value: "react" };
 
 const defaultSettings = {
-	title: "A beginners guide to frontend development",
-	bgColor: "#949ee5",
-	pattern: "",
-	download: "PNG",
-	author: 'Rutik Wankhade',
-	icon: defaultIcon,
-	devIconOptions: [defaultIcon],
-	font: 'font-Anek',
-	theme: 'background',
-	customIcon: '',
-	platform: 'hashnode'
+  title: "A beginners guide to frontend development",
+  bgColor: "#949ee5",
+  pattern: "",
+  download: "PNG",
+  author: "Rutik Wankhade",
+  icon: defaultIcon,
+  devIconOptions: [defaultIcon],
+  font: "font-Anek",
+  theme: "background",
+  customIcon: "",
+  platform: "hashnode",
 };
 
-const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
+const devIconsUrl =
+  "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json";
 
 class Editor extends React.Component {
-
-
-	state = defaultSettings;
-	componentDidMount() {
-		// console.log("Mount")
-		fetch(devIconsUrl).then(r => r.json()).then(data => {
-			data.unshift({ name: 'upload your own' })
-			this.setState({ devIconOptions: data.map(item => ({ 'value': item.name, 'label': item.name })) })
-		})
-	}
-	handleReset = () => {
-		this.setState({
-			...defaultSettings,
-			devIconOptions: this.state.devIconOptions,
-		});
-	};
-
-	getRandomTheme = (theme, Pattern) => {
-		this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern });
-	}
-
-	formatOptionLabel = ({ value, label }) => (
-		<div className="flex">
-			<span className="mr-2">{label}</span>
-			<div className="ml-auto mr-2">
-				<i className={`devicon-${value}-plain dev-icon text-2xl`}></i>
-			</div>
-		</div>
-	);
-
-
-
-	render() {
-		return (
-			<div className="max-w-[1400px]  mx-auto">
-				<Header />
-
-				<ImgProvider>
-					<div className="flex md:flex-row flex-col  ">
-
-						<div className="bg-white flex flex-col h-100 md:w-3/12">
-
-							<div>
-								<div className="flex md:flex-row flex-col">
-
-
-
-									<div className="bg-white font-Inter  border-dashed border-r-2 border-gray-100 w-full p-4 ">
-										<div>
-
-											<div className="m-2 flex flex-col">
-												<span className="font-medium text-sm pb-1">Blog Title</span>
-												<textarea
-													type="text"
-													value={this.state.title}
-													placeholder="Enter title here"
-													className="focus:outline-none border text-gray-700 text-lg  rounded p-2 h-24"
-													onChange={(e) => this.setState({ title: e.target.value })}
-												/>
-											</div>
-
-											<div className="flex flex-col m-2 ">
-												<span className="font-medium text-sm pb-1">Author</span>
-												<input
-													type="text"
-													value={this.state.author}
-													placeholder="Author"
-													className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
-													onChange={(e) => this.setState({ author: e.target.value })}
-												></input>
-											</div>
-
-											<div className="flex flex-col m-2 ">
-												<span className="font-medium text-sm pb-1">Icon</span>
-												<Select value={this.state.icon}
-													onChange={(selectedOption) => this.setState({ icon: selectedOption })}
-													options={this.state.devIconOptions}
-													formatOptionLabel={this.formatOptionLabel}
-													className="outline-none focus:outline-none items-center text-lg text-gray-700"
-												/>
-											</div>
-											<div className="w-full">
-
-												{this.state.icon.label === 'upload your own' ?
-													<div className="flex items-center justify-center w-64 mx-auto">
-														<input type="file"
-															className="focus:outline-none w-full text-sm cursor-pointer bg-white rounded border"
-															onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
-														/>
-													</div>
-													:
-													<div></div>
-												}
-
-											</div>
-
-											<div className="flex items-center">
-
-												<div className="flex flex-col m-2 w-1/2">
-													<span className="font-medium text-sm pb-1">Font</span>
-
-													<select
-														value={this.state.font}
-														onChange={(e) => this.setState({ font: e.target.value })}
-														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
-														<option>font-serif</option>
-														<option>font-sans</option>
-														<option>font-mono</option>
-														<option>font-Inter</option>
-														<option>font-Poppins</option>
-														<option>font-Anek</option>
-													</select>
-												</div>
-												<div className="flex flex-col m-2 w-1/2">
-													<span className="font-medium text-sm pb-1">Color</span>
-													<div className="border rounded flex items-center p-1">
-
-														{/* <span className="text-base text-gray-700  mx-2">{this.state.bgColor}</span> */}
-														<input type="color" value={this.state.bgColor}
-															onChange={(e) => this.setState({ bgColor: e.target.value })}
-															className="h-8 w-full  rounded"
-														/>
-													</div>
-												</div>
-
-											</div>
-
-
-											<div className="flex items-center">
-												{/* <div className="flex flex-col m-2 w-1/2">
+  state = defaultSettings;
+  componentDidMount() {
+    // console.log("Mount")
+    fetch(devIconsUrl)
+      .then((r) => r.json())
+      .then((data) => {
+        data.unshift({ name: "upload your own" });
+        this.setState({
+          devIconOptions: data.map((item) => ({
+            value: item.name,
+            label: item.name,
+          })),
+        });
+      });
+  }
+  handleReset = () => {
+    this.setState({
+      ...defaultSettings,
+      devIconOptions: this.state.devIconOptions,
+    });
+  };
+
+  getRandomTheme = (theme, Pattern) => {
+    this.setState({
+      bgColor: theme.bgColor,
+      borderColor: theme.bdColor,
+      pattern: Pattern,
+    });
+  };
+
+  formatOptionLabel = ({ value, label }) => (
+    <div className="flex">
+      <span className="mr-2">{label}</span>
+      <div className="ml-auto mr-2">
+        <i className={`devicon-${value}-plain dev-icon text-2xl`}></i>
+      </div>
+    </div>
+  );
+
+  render() {
+    return (
+      <div className="max-w-[1400px]  mx-auto">
+        <Header />
+
+        <ImgProvider>
+          <div className="flex md:flex-row flex-col  ">
+            <div className="bg-white flex flex-col h-100 md:w-3/12">
+              <div>
+                <div className="flex md:flex-row flex-col">
+                  <div className="bg-white font-Inter  border-dashed border-r-2 border-gray-100 w-full p-4 ">
+                    <div>
+                      <div className="m-2 flex flex-col">
+                        <span className="font-medium text-sm pb-1">
+                          Blog Title
+                        </span>
+                        <textarea
+                          type="text"
+                          value={this.state.title}
+                          placeholder="Enter title here"
+                          className="focus:outline-none border text-gray-700 text-lg  rounded p-2 h-24"
+                          onChange={(e) =>
+                            this.setState({ title: e.target.value })
+                          }
+                        />
+                      </div>
+
+                      <div className="flex flex-col m-2 ">
+                        <span className="font-medium text-sm pb-1">Author</span>
+                        <input
+                          type="text"
+                          value={this.state.author}
+                          placeholder="Author"
+                          className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+                          onChange={(e) =>
+                            this.setState({ author: e.target.value })
+                          }
+                        ></input>
+                      </div>
+
+                      <div className="flex flex-col m-2 ">
+                        <span className="font-medium text-sm pb-1">Icon</span>
+                        <Select
+                          value={this.state.icon}
+                          onChange={(selectedOption) =>
+                            this.setState({ icon: selectedOption })
+                          }
+                          options={this.state.devIconOptions}
+                          formatOptionLabel={this.formatOptionLabel}
+                          className="outline-none focus:outline-none items-center text-lg text-gray-700"
+                        />
+                      </div>
+                      <div className="w-full">
+                        {this.state.icon.label === "upload your own" ? (
+                          <div className="flex items-center justify-center w-64 mx-auto">
+                            <input
+                              type="file"
+                              className="focus:outline-none w-full text-sm cursor-pointer bg-white rounded border"
+                              onChange={(e) =>
+                                this.setState({
+                                  customIcon: URL.createObjectURL(
+                                    e.target.files[0],
+                                  ),
+                                })
+                              }
+                            />
+                          </div>
+                        ) : (
+                          <div></div>
+                        )}
+                      </div>
+
+                      <div className="flex items-center">
+                        <div className="flex flex-col m-2 w-1/2">
+                          <span className="font-medium text-sm pb-1">Font</span>
+
+                          <select
+                            value={this.state.font}
+                            onChange={(e) =>
+                              this.setState({ font: e.target.value })
+                            }
+                            className="focus:outline-none text-gray-700 text-lg p-2 rounded border"
+                          >
+                            <option>font-serif</option>
+                            <option>font-sans</option>
+                            <option>font-mono</option>
+                            <option>font-Inter</option>
+                            <option>font-Poppins</option>
+                            <option>font-Anek</option>
+                          </select>
+                        </div>
+                        <div className="flex flex-col m-2 w-1/2">
+                          <span className="font-medium text-sm pb-1">
+                            Color
+                          </span>
+                          <div className="border rounded flex items-center p-1">
+                            {/* <span className="text-base text-gray-700  mx-2">{this.state.bgColor}</span> */}
+                            <input
+                              type="color"
+                              value={this.state.bgColor}
+                              onChange={(e) =>
+                                this.setState({ bgColor: e.target.value })
+                              }
+                              className="h-8 w-full  rounded"
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center">
+                        {/* <div className="flex flex-col m-2 w-1/2">
 													<span className="font-medium text-sm pb-1">Pattern</span>
 													<select
 														onChange={(e) => this.setState({ pattern: e.target.value })}
@@ -186,38 +206,45 @@ class Editor extends React.Component {
 													</select>
 												</div> */}
 
-												<div className="flex flex-col m-2 w-full">
-													<span className="font-medium text-sm pb-1">Platform</span>
-
-													<select
-														onChange={(e) => this.setState({ platform: e.target.value })}
-														value={this.state.platform}
-														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
-														<option>hashnode</option>
-														<option>dev</option>
-													</select>
-												</div>
-
-											</div>
-
-											<button
-												className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
-												onClick={this.handleReset}>
-												<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white mr-2 " fill="currentColor" viewBox="0 0 24 24" ><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
-												<span className="font-Inter">Reset All</span>
-											</button>
-
-										</div>
-
-
-
-									</div>
-
-								</div>
-							</div>
-
-
-							{/* <div className="mx-4 my-1">
+                        <div className="flex flex-col m-2 w-full">
+                          <span className="font-medium text-sm pb-1">
+                            Platform
+                          </span>
+
+                          <select
+                            onChange={(e) =>
+                              this.setState({ platform: e.target.value })
+                            }
+                            value={this.state.platform}
+                            className="focus:outline-none text-gray-700 text-lg p-2 rounded border"
+                          >
+                            <option>hashnode</option>
+                            <option>dev</option>
+                          </select>
+                        </div>
+                      </div>
+
+                      <button
+                        className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
+                        onClick={this.handleReset}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="w-5 h-5 text-white mr-2 "
+                          fill="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path>
+                          <path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path>
+                        </svg>
+                        <span className="font-Inter">Reset All</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* <div className="mx-4 my-1">
 						<h6>Download As</h6>
 						<select onChange={(e) => this.setState({ download: e.target.value })}
 							className="form-control input"
@@ -226,58 +253,53 @@ class Editor extends React.Component {
 							<option>JPEG</option>
 						</select>
 					</div> */}
-
-						</div>
-
-						{/* cover image preview */}
-
-						<div className=" flex m-2 flex-col items-center justify-center ">
-
-							<ComponentToImg downloadAs={this.state.download}>
-								<CoverImage {...this.state} />
-							</ComponentToImg>
-						</div>
-
-						{/* themes section */}
-
-						<div className="md:w-60 px-4 border-dashed border-l-2 border-gray-100 bg-white">
-							<div className="h-99 w-full flex flex-col justify-center">
-
-								<div className="flex items-center">
-									<h2 className="text-lg pl-2 font-inter font-semibold">Themes</h2>
-									<div className="ml-auto mr-1 p-2">
-										<RandomTheme onThemeChange={this.getRandomTheme} />
-
-									</div>
-								</div>
-
-								<div className="  flex gap-2 flex-wrap justify-center overflow-y-scroll ">
-
-									{
-										THEMES.map(themePlaceholder => (
-											<div className={`${themePlaceholder.label === this.state.theme ? 'border-blue-400 border-2' : ''}`} key={themePlaceholder.label}>
-
-
-												<img src={themePlaceholder.preview} alt={themePlaceholder.label}
-													onClick={(e) => this.setState({ theme: themePlaceholder.label })}
-													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 "
-												/>
-											</div>
-										))
-									}
-
-								</div>
-
-
-							</div>
-						</div>
-
-					</div>
-				</ImgProvider>
-			</div>
-
-		);
-	}
+            </div>
+
+            {/* cover image preview */}
+
+            <div className=" flex m-2 flex-col items-center justify-center ">
+              <ComponentToImg downloadAs={this.state.download}>
+                <CoverImage {...this.state} />
+              </ComponentToImg>
+            </div>
+
+            {/* themes section */}
+
+            <div className="md:w-60 px-4 border-dashed border-l-2 border-gray-100 bg-white">
+              <div className="h-99 w-full flex flex-col justify-center">
+                <div className="flex items-center">
+                  <h2 className="text-lg pl-2 font-inter font-semibold">
+                    Themes
+                  </h2>
+                  <div className="ml-auto mr-1 p-2">
+                    <RandomTheme onThemeChange={this.getRandomTheme} />
+                  </div>
+                </div>
+
+                <div className="  flex gap-2 flex-wrap justify-center overflow-y-scroll ">
+                  {THEMES.map((themePlaceholder) => (
+                    <div
+                      className={`${themePlaceholder.label === this.state.theme ? "border-blue-400 border-2" : ""}`}
+                      key={themePlaceholder.label}
+                    >
+                      <img
+                        src={themePlaceholder.preview}
+                        alt={themePlaceholder.label}
+                        onClick={(e) =>
+                          this.setState({ theme: themePlaceholder.label })
+                        }
+                        className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 "
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </ImgProvider>
+      </div>
+    );
+  }
 }
 
 export default Editor;
diff --git a/src/components/Faq.js b/src/components/Faq.js
index 6853d68..74afbca 100644
--- a/src/components/Faq.js
+++ b/src/components/Faq.js
@@ -1,71 +1,128 @@
-import React, { useState } from 'react';
-import Header from './Header';
+import React, { useState } from "react";
+import Header from "./Header";
 const Faq = () => {
+  const [showMsg, setShowMsg] = useState(false);
+
+  return (
+    <div>
+      <Header />
+
+      <div className=" md:w-10/12 mx-auto md:p-20 p-4">
+        <h1 className="font-bold md:text-4xl  text-2xl font-Anek text-center">
+          Frequently asked questions
+        </h1>
+
+        <div className="flex flex-wrap justify-center mt-20 font-Inter">
+          <div className="md:w-5/12 m-4 ">
+            <p className="text-xl font-bold py-2">What is Coverview?</p>
+            <p className="text-lg text-gray-700">
+              Coverview is a tool to create cover images for your blogs quickly
+              and easily.
+            </p>
+          </div>
+
+          <div className="md:w-5/12 m-4">
+            <p className="text-xl font-bold py-2">Is Coverview free?</p>
+            <p className="text-lg text-gray-700">
+              Yes! Coverview is absolutely free to use.
+            </p>
+          </div>
+
+          <div className="md:w-5/12 m-4">
+            <p className="text-xl  font-bold py-2">
+              Can I upload my custom brand logo?
+            </p>
+            <p className="text-lg text-gray-700">
+              Yes.Just search and select{" "}
+              <span className="font-semibold">custom</span> in icon section and
+              you can upload your own logo to personalize your cover images.
+            </p>
+            <p className="italic mt-2">
+              See{" "}
+              <a
+                href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg"
+                className="text-blue-400"
+                target="_blank"
+                rel="noreferrer"
+              >
+                example
+              </a>
+            </p>
+          </div>
+
+          <div className="md:w-5/12 m-4">
+            <p className="text-xl font-bold my-2">
+              Can I use coverview for non-technical/personal blogs?
+            </p>
+            <p className="text-lg text-gray-700">
+              Yes! Why not? Even though coverview was built with technical blogs
+              in mind, you can still use it for your personal blogs. Check out
+              the stylish theme for more.
+            </p>
+          </div>
+
+          <div className="md:w-5/12 m-4">
+            <p className="text-xl font-bold my-2">Why use Coverview?</p>
+            <p className="text-lg text-gray-700">
+              Because it's simple, quick and easy to use. Why spend hours
+              designing when you can create cover images in seconds?
+            </p>
+          </div>
+
+          <div className="md:w-5/12 m-4">
+            <p className="text-xl font-bold my-2">
+              Want to support/sponsor the project?
+            </p>
+            <p className="text-lg text-gray-700">
+              If coverview adds value in your life and you wish to support this
+              project, you can{" "}
+              <a
+                href="https://github.com/sponsors/rutikwankhade"
+                target="_blank"
+                rel="noreferrer"
+                className="font-semibold hover:underline"
+              >
+                sponsor me on Github
+              </a>{" "}
+              or{" "}
+              <a
+                href="https://www.buymeacoffee.com/rutikwankhade"
+                target="_blank"
+                rel="noreferrer"
+                className="hover:underline text-pink-400 font-semibold"
+              >
+                buy me a coffee
+              </a>
+              .
+            </p>
+          </div>
+        </div>
 
-    const [showMsg, setShowMsg] = useState(false)
-
-    return (
-        <div>
-            <Header />
-
-            <div className=" md:w-10/12 mx-auto md:p-20 p-4">
-                <h1 className="font-bold md:text-4xl  text-2xl font-Anek text-center">Frequently asked questions</h1>
-
-
-                <div className="flex flex-wrap justify-center mt-20 font-Inter">
-
-                    <div className="md:w-5/12 m-4 ">
-                        <p className="text-xl font-bold py-2">What is Coverview?</p>
-                        <p className="text-lg text-gray-700">Coverview is a tool to create cover images for your blogs quickly and easily.</p>
-                    </div>
-
-                    <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold py-2">Is Coverview free?</p>
-                        <p className="text-lg text-gray-700">Yes! Coverview is absolutely free to use.</p>
-                    </div>
-
-                    <div className="md:w-5/12 m-4">
-                        <p className="text-xl  font-bold py-2">Can I upload my custom brand logo?</p>
-                        <p className="text-lg text-gray-700">Yes.Just search and select <span className="font-semibold">custom</span> in icon section and you can upload your own logo to personalize your cover images.</p>
-                        <p className="italic mt-2">See <a href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg" className="text-blue-400" target="_blank" rel="noreferrer">example</a></p>
-                    </div>
-
-                    <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Can I use coverview for non-technical/personal blogs?</p>
-                        <p className="text-lg text-gray-700">Yes! Why not? Even though coverview was built with technical blogs in mind, you can still use it for your personal blogs. Check out the stylish theme for more.</p>
-                    </div>
-
-                    <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Why use Coverview?</p>
-                        <p className="text-lg text-gray-700">Because it's simple, quick and easy to use. Why spend hours designing when you can create cover images in seconds?</p>
-                    </div>
-
-                    <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Want to support/sponsor the project?</p>
-                        <p className="text-lg text-gray-700">If coverview adds value in your life and you wish to support this project, you can <a href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer" className="font-semibold hover:underline">sponsor me on Github</a> or <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline text-pink-400 font-semibold">buy me a coffee</a>.</p>
-                    </div>
-
-                </div>
-
-                <div className="md:w-1/2 mx-auto text-center mt-20">
-                    <button
-                        onClick={() => setShowMsg(!showMsg)}
-                        className="text-6xl text-center m-2">💡</button>
-                    <p className="text-xl font-Anek font-semibold text-gray-800">Want to know a secret? Click me</p>
-
-                </div>
-
-                {
-                    showMsg ?
-                        <div>
-                            <h2 className="md:w-7/12 text-4xl border text-center mx-auto my-10 p-10 rounded-xl shadow-sm font-Nunito">Blog titles with a minimum of 8 words have 21% better click-through</h2>
-                        </div> :
-                        <div></div>
-                }
-
-            </div>
+        <div className="md:w-1/2 mx-auto text-center mt-20">
+          <button
+            onClick={() => setShowMsg(!showMsg)}
+            className="text-6xl text-center m-2"
+          >
+            💡
+          </button>
+          <p className="text-xl font-Anek font-semibold text-gray-800">
+            Want to know a secret? Click me
+          </p>
         </div>
-    );
-}
 
-export default Faq;
\ No newline at end of file
+        {showMsg ? (
+          <div>
+            <h2 className="md:w-7/12 text-4xl border text-center mx-auto my-10 p-10 rounded-xl shadow-sm font-Nunito">
+              Blog titles with a minimum of 8 words have 21% better
+              click-through
+            </h2>
+          </div>
+        ) : (
+          <div></div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Faq;
diff --git a/src/components/Header.js b/src/components/Header.js
index f042eae..9ac7c1c 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,28 +1,37 @@
-import React from 'react';
-import { Link } from 'react-router-dom'
-import logo from '../assets/icons/logo.png'
+import React from "react";
+import { Link } from "react-router-dom";
+import logo from "../assets/icons/logo.png";
 const Header = () => {
-
-	const tweetText = encodeURIComponent(`type your thoughts here, Try https://coverview.vercel.app by @rutikdotdev`)
-
-	return (
-
-		<div className="bg-white text-xl md:px-2 flex  border-dashed border-b-2 border-gray-100 p-2">
-			<Link to="/" className="flex items-center">
-				<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
-				<h1 className="font-semibold">Coverview</h1>
-
-			</Link>
-
-			<div className="ml-auto md:mr-4 flex items-center ">
-				{/* <Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4"><span className="hidden md:inline-block">How to use</span></Link> */}
-				<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="bg-gray-700 hover:bg-gray-800 px-4 rounded-full p-1 text-white md:text-sm md:flex hidden items-center text-xs mx-2 font-Nunito">⭐ Star on Github</a>
-				<a href={`https://x.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 hover:bg-blue-500 md:text-sm text-xs rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
-			</div>
-
-		</div>
-
-	);
-}
-
-export default Header;
\ No newline at end of file
+  const tweetText = encodeURIComponent(
+    `type your thoughts here, Try https://coverview.vercel.app by @rutikdotdev`,
+  );
+
+  return (
+    <div className="bg-white text-xl md:px-2 flex  border-dashed border-b-2 border-gray-100 p-2">
+      <Link to="/" className="flex items-center">
+        <img src={logo} alt="logo" className="w-8 h-8 mx-4" />
+        <h1 className="font-semibold">Coverview</h1>
+      </Link>
+
+      <div className="ml-auto md:mr-4 flex items-center ">
+        {/* <Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4"><span className="hidden md:inline-block">How to use</span></Link> */}
+        <a
+          href="https://github.com/rutikwankhade/CoverView"
+          target="_blank"
+          rel="noreferrer"
+          className="bg-gray-700 hover:bg-gray-800 px-4 rounded-full p-1 text-white md:text-sm md:flex hidden items-center text-xs mx-2 font-Nunito"
+        >
+          ⭐ Star on Github
+        </a>
+        <a
+          href={`https://x.com/intent/tweet?text=${tweetText}`}
+          className="mx-2 bg-blue-400 hover:bg-blue-500 md:text-sm text-xs rounded-full px-4 font-semibold text-white p-1"
+        >
+          Share on Twitter
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Home.js b/src/components/Home.js
index c937037..e4a731b 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,227 +1,303 @@
-import React from 'react';
-import logo from '../assets/icons/logo.png'
-import { Link } from 'react-router-dom';
-import cover1 from '../assets/images/cover1.webp'
-import cover2 from '../assets/images/cover2.webp'
-import cover3 from '../assets/images/cover3.webp'
-import cover4 from '../assets/images/cover4.webp'
+import React from "react";
+import logo from "../assets/icons/logo.png";
+import { Link } from "react-router-dom";
+import cover1 from "../assets/images/cover1.webp";
+import cover2 from "../assets/images/cover2.webp";
+import cover3 from "../assets/images/cover3.webp";
+import cover4 from "../assets/images/cover4.webp";
 
+import step1 from "../assets/images/step1.png";
+import step2 from "../assets/images/step2.png";
 
+import hashnodeLogo from "../assets/images/hashnode-logo.png";
+import devLogo from "../assets/images/dev-logo.png";
 
-import step1 from '../assets/images/step1.png'
-import step2 from '../assets/images/step2.png'
-
-import hashnodeLogo from '../assets/images/hashnode-logo.png'
-import devLogo from '../assets/images/dev-logo.png'
-
-import WallOfLove from './walloflove';
+import WallOfLove from "./walloflove";
 const Home = () => {
+  return (
+    <div className="">
+      <div className="">
+        <div className="text-xl  flex   p-2 md:w-10/12 mx-auto">
+          <div className="flex items-center">
+            <img src={logo} alt="logo" className="w-8 h-8 mx-2" />
+            <h1 className="font-semibold md:text-xl text-lg font-Inter">
+              Coverview
+            </h1>
+          </div>
+
+          <a
+            href="https://github.com/rutikwankhade/CoverView"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:translate-x-2 flex items-center justify-center duration-300 bg-gray-700 group rounded-xl   text-white  ml-auto mr-4 font-Inter font-semibold "
+          >
+            <span className="md:text-sm text-xs px-2 md:px-4 py-1 md:py-2">
+              ⭐ Star on Github
+            </span>
+          </a>
+        </div>
 
+        <div className="  mx-auto md:px-20 py-6   flex flex-col items-center">
+          <h1 className="md:w-7/12 md:mx-10 mx-6 my-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Anek">
+            Creating cover images for your blogs is now super easy
+          </h1>
+          <Link
+            to="/editor"
+            className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full border-4 border-gray-100 px-6 md:px-8 text-white md:text-2xl text-base mx-auto font-Poppins font-semibold md:p-4 p-2"
+          >
+            <span className="md:text-2xl font-semibold text-lg">
+              Create Now
+            </span>
+          </Link>
+        </div>
 
-    return (
-        <div className="">
-
-
-            <div className="">
-
-                <div className="text-xl  flex   p-2 md:w-10/12 mx-auto">
-                    <div className="flex items-center">
-                        <img src={logo} alt="logo" className="w-8 h-8 mx-2" />
-                        <h1 className="font-semibold md:text-xl text-lg font-Inter">Coverview</h1>
-                    </div>
-
-                    <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:translate-x-2 flex items-center justify-center duration-300 bg-gray-700 group rounded-xl   text-white  ml-auto mr-4 font-Inter font-semibold ">
-                        <span className="md:text-sm text-xs px-2 md:px-4 py-1 md:py-2">⭐ Star on Github</span>
-                    </a>
-                </div>
-
-                <div className="  mx-auto md:px-20 py-6   flex flex-col items-center">
-                    <h1 className="md:w-7/12 md:mx-10 mx-6 my-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Anek">
-                        Creating cover images for your blogs is now super easy
-                    </h1>
-                    <Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full border-4 border-gray-100 px-6 md:px-8 text-white md:text-2xl text-base mx-auto font-Poppins font-semibold md:p-4 p-2">
-                        <span className="md:text-2xl font-semibold text-lg">Create Now</span>
-                    </Link>
-
-                </div>
-
-
-
-
-                <div className="  flex flex-row items-center justify-center mx-auto md:w-10/12">
-
-                    <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:-rotate-3  rotate-6 duration-100 bg-white p-2 shadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
-                        <img src={cover2} className="border border-gray-100 rounded mb-2" alt="cover1" />
-                        <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-                        <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-
-                    </div>
-
-                    <div className="m-4 transform hover:scale-105 hover:rotate-3 -rotate-2  duration-300 bg-white p-4 shadow-lg shadow-gray-50 w-1/3 rounded-lg flex flex-col ">
-                        <img src={cover1} className="rounded border border-gray-100 mb-2" alt="cover-2" />
-                        <p className="animate animate-pulse bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
-                        <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
-
-                    </div>
-
-                    <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:rotate-3 -rotate-6 duration-100 bg-white p-2 sshadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
-                        <img src={cover3} className="rounded border border-gray-100 mb-2" alt="cover3" />
-                        <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-                        <p className="animate animate-pulse w-8/12 bg-gray-50 md:odd:h-5 h-2 rounded mb-2"></p>
-
-                    </div>
-
-                </div>
-
-
+        <div className="  flex flex-row items-center justify-center mx-auto md:w-10/12">
+          <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:-rotate-3  rotate-6 duration-100 bg-white p-2 shadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
+            <img
+              src={cover2}
+              className="border border-gray-100 rounded mb-2"
+              alt="cover1"
+            />
+            <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
+            <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
+          </div>
+
+          <div className="m-4 transform hover:scale-105 hover:rotate-3 -rotate-2  duration-300 bg-white p-4 shadow-lg shadow-gray-50 w-1/3 rounded-lg flex flex-col ">
+            <img
+              src={cover1}
+              className="rounded border border-gray-100 mb-2"
+              alt="cover-2"
+            />
+            <p className="animate animate-pulse bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
+            <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
+          </div>
+
+          <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:rotate-3 -rotate-6 duration-100 bg-white p-2 sshadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
+            <img
+              src={cover3}
+              className="rounded border border-gray-100 mb-2"
+              alt="cover3"
+            />
+            <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
+            <p className="animate animate-pulse w-8/12 bg-gray-50 md:odd:h-5 h-2 rounded mb-2"></p>
+          </div>
+        </div>
+      </div>
+
+      <div className="md:mt-32  my-t0 mx-auto">
+        <div className=" mx-auto flex flex-col md:w-10/12">
+          <div className="w-full text-center mx-auto p-10 md:p-4 ">
+            <h2 className="md:text-5xl md:w-9/12 mx-auto text-3xl px-4 font-bold font-Anek text-gray-700">
+              Why cover images are more important than you think?
+            </h2>
+          </div>
+
+          <div className="flex md:flex-row flex-col justify-center md:gap-6 gap-2 mx-auto">
+            <div className=" p-10  rounded-xl  shadow-gray-100 flex flex-col gap-4 md:w-4/12 ">
+              <div className=" my-2 md:mx-0 mx-auto bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
+                <svg
+                  className="text-white w-20 h-20"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+                  ></path>
+                </svg>
+              </div>
+              <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">
+                Around <span className="font-bold">7 million</span> blog posts
+                are published daily. And with the rise of new-age blogging
+                tools, it will only go up.
+              </p>
             </div>
 
-
-
-
-            <div className="md:mt-32  my-t0 mx-auto">
-
-                <div className=" mx-auto flex flex-col md:w-10/12">
-                    <div className="w-full text-center mx-auto p-10 md:p-4 ">
-                        <h2 className="md:text-5xl md:w-9/12 mx-auto text-3xl px-4 font-bold font-Anek text-gray-700">Why cover images are more important than you think?</h2>
-
-                    </div>
-
-                    <div className="flex md:flex-row flex-col justify-center md:gap-6 gap-2 mx-auto">
-
-                        <div className=" p-10  rounded-xl  shadow-gray-100 flex flex-col gap-4 md:w-4/12 ">
-                            <div className=" my-2 md:mx-0 mx-auto bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
-                                <svg className="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
-                            </div>
-                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">Around <span className="font-bold">7 million</span> blog posts are published daily. And with the rise of new-age blogging tools, it will only go up.</p>
-                        </div>
-
-                        <div className="p-10  rounded-xl  shadow-gray-100 flex  flex-col gap-4  md:w-4/12 ">
-                            <div className="md:mx-0 mx-auto my-2 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
-                                <svg className="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
-                            </div>
-                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">A good cover image can lead to <span className="font-bold">higher conversion rate</span> than a random stock image.</p>
-                        </div>
-
-                    </div>
-
-
-
-                </div>
-
-
-                <h2 className="md:text-5xl text-3xl md:w-7/12 md:mx-auto mt-12 md:mt-32 mx-10 font-bold font-Anek text-center text-gray-700">With coverview, you can create cover images in <span className="text-indigo-400">seconds</span></h2>
-
-
-                <div className="md:w-8/12 md:my-16 p-4 flex md:flex-row flex-col gap-4 mx-auto">
-
-                    <div className="md:w-1/2 md:border border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
-
-                        <div className="text-center">
-                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 1</div>
-
-                            <p className="md:text-3xl text-2xl p-4 text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Add your blog title and author name</p>
-                        </div>
-                        <img src={step1} alt="preview" className="mt-2 w-10/12 mx-auto rounded-t-xl shadow-sm" />
-
-                    </div>
-
-                    <div className="md:w-1/2 md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
-
-                        <div className="text-center">
-                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 2</div>
-
-                            <p className="md:text-3xl text-2xl p-4  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Customize with colors, fonts and icons</p>
-                        </div>
-                        <img src={step2} alt="preview" className="mt-auto mb-0 w-10/12 mx-auto rounded-t-xl shadow-sm" />
-
-                    </div>
-
-
-                </div>
-
-
-
-                <div className="md:w-7/12 p-6 mx-auto   rounded-xl md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50  flex md:flex-row flex-col justify-center items-center ">
-
-                    <div className="text-center md:w-1/2 m-4">
-                        <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 3</div>
-                        <p className="md:text-3xl mt-4 text-2xl pb-2  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Choose your style from different themes</p>
-
-                        <p className="md:text-xl text-gray-500 text-lg">Unsplash integration, custom icon for personal branding and more.</p>
-                    </div>
-
-                    <div className="flex md:w-1/2 hideout p-6">
-                        <div className="flex flex-col w-1/2 ">
-                            <img src={cover1} alt="preview" className=" hover:scale-105 duration-300 m-2 rounded-lg shadow-sm" />
-                            <img src={cover2} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
-
-                        </div>
-
-
-                        <div className="flex flex-col mt-4 w-1/2">
-                            <img src={cover3} alt="preview" className="hover:scale-105 duration-300   m-2 rounded-lg shadow-sm" />
-                            <img src={cover4} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
-
-                        </div>
-
-                    </div>
-
-                </div>
-
-
-                <div className="md:w-6/12 md:my-20 mb-6 mx-auto">
-
-                    <div className="text-center m-6 px-6">
-
-                        <p className="md:text-2xl text-xl my-2 font-semibold font-Inter text-gray-700">Supports platforms like Hashnode or Dev.to</p>
-                    </div>
-                    <div className="flex mx-auto justify-center gap-4">
-                        <img src={hashnodeLogo} className="md:w-20 w-10" alt="hashnode" />
-                        <img src={devLogo} className="md:w-20 w-10" alt="dev" />
-                    </div>
-                </div>
-
-
-                <WallOfLove />
-
-                <div className="bg-gray-800  text-white p-2">
-                    <div className="md:w-8/12 mx-auto pt-32 p-6">
-                        <h2 className="md:text-6xl text-4xl text-center font-Anek font-bold  mx-auto">Simple, quick, and easy to use</h2>
-                        <p className="md:text-2xl text-lg font-Inter text-gray-300 text-center py-4 md:w-8/12 mx-auto">So you can focus on writing your blog and never worry about those cover images.</p>
-                        <Link to="/editor" >
-                            <button className="flex mx-auto my-4 hover:translate-x-2 duration-300 bg-indigo-500 hover:bg-indigo-600  rounded-full  text-white md:text-xl text-base font-Nunito font-semibold p-4 px-8">It's Free! Try Now &rarr;</button>
-                        </Link>
-                    </div>
-
-                    <footer className=" p-10 gap-2 flex md:flex-row flex-col-reverse font-Inter md:px-20 md:justify-between justify-center mx-auto md:w-10/12 w-full items-center">
-
-                        <div className=" flex flex-col">
-                            <span className="md:text-lg text-sm">Made with 💛 by <a href="https://rutik.dev" className="font-semibold underline decoration-wavy underline-offset-4" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
-                        </div>
-
-                        <div className="md:text-lg text-sm flex flex-wrap gap-4 ">
-                            <Link to="/faq" className="hover:underline">How to use</Link>
-                            <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:underline">Github</a>
-                            <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline">Buy me a coffee</a>
-                        </div>
-
-
-                    </footer>
-
-                </div>
-
-
-
+            <div className="p-10  rounded-xl  shadow-gray-100 flex  flex-col gap-4  md:w-4/12 ">
+              <div className="md:mx-0 mx-auto my-2 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
+                <svg
+                  className="text-white w-20 h-20"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+                  ></path>
+                </svg>
+              </div>
+              <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">
+                A good cover image can lead to{" "}
+                <span className="font-bold">higher conversion rate</span> than a
+                random stock image.
+              </p>
             </div>
+          </div>
+        </div>
 
+        <h2 className="md:text-5xl text-3xl md:w-7/12 md:mx-auto mt-12 md:mt-32 mx-10 font-bold font-Anek text-center text-gray-700">
+          With coverview, you can create cover images in{" "}
+          <span className="text-indigo-400">seconds</span>
+        </h2>
+
+        <div className="md:w-8/12 md:my-16 p-4 flex md:flex-row flex-col gap-4 mx-auto">
+          <div className="md:w-1/2 md:border border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
+            <div className="text-center">
+              <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">
+                Step 1
+              </div>
+
+              <p className="md:text-3xl text-2xl p-4 text-center mx-auto my-2 font-semibold font-Inter text-gray-700">
+                Add your blog title and author name
+              </p>
+            </div>
+            <img
+              src={step1}
+              alt="preview"
+              className="mt-2 w-10/12 mx-auto rounded-t-xl shadow-sm"
+            />
+          </div>
+
+          <div className="md:w-1/2 md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
+            <div className="text-center">
+              <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">
+                Step 2
+              </div>
+
+              <p className="md:text-3xl text-2xl p-4  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">
+                Customize with colors, fonts and icons
+              </p>
+            </div>
+            <img
+              src={step2}
+              alt="preview"
+              className="mt-auto mb-0 w-10/12 mx-auto rounded-t-xl shadow-sm"
+            />
+          </div>
+        </div>
 
+        <div className="md:w-7/12 p-6 mx-auto   rounded-xl md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50  flex md:flex-row flex-col justify-center items-center ">
+          <div className="text-center md:w-1/2 m-4">
+            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">
+              Step 3
+            </div>
+            <p className="md:text-3xl mt-4 text-2xl pb-2  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">
+              Choose your style from different themes
+            </p>
+
+            <p className="md:text-xl text-gray-500 text-lg">
+              Unsplash integration, custom icon for personal branding and more.
+            </p>
+          </div>
+
+          <div className="flex md:w-1/2 hideout p-6">
+            <div className="flex flex-col w-1/2 ">
+              <img
+                src={cover1}
+                alt="preview"
+                className=" hover:scale-105 duration-300 m-2 rounded-lg shadow-sm"
+              />
+              <img
+                src={cover2}
+                alt="preview"
+                className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm"
+              />
+            </div>
 
+            <div className="flex flex-col mt-4 w-1/2">
+              <img
+                src={cover3}
+                alt="preview"
+                className="hover:scale-105 duration-300   m-2 rounded-lg shadow-sm"
+              />
+              <img
+                src={cover4}
+                alt="preview"
+                className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm"
+              />
+            </div>
+          </div>
+        </div>
 
+        <div className="md:w-6/12 md:my-20 mb-6 mx-auto">
+          <div className="text-center m-6 px-6">
+            <p className="md:text-2xl text-xl my-2 font-semibold font-Inter text-gray-700">
+              Supports platforms like Hashnode or Dev.to
+            </p>
+          </div>
+          <div className="flex mx-auto justify-center gap-4">
+            <img src={hashnodeLogo} className="md:w-20 w-10" alt="hashnode" />
+            <img src={devLogo} className="md:w-20 w-10" alt="dev" />
+          </div>
+        </div>
 
+        <WallOfLove />
+
+        <div className="bg-gray-800  text-white p-2">
+          <div className="md:w-8/12 mx-auto pt-32 p-6">
+            <h2 className="md:text-6xl text-4xl text-center font-Anek font-bold  mx-auto">
+              Simple, quick, and easy to use
+            </h2>
+            <p className="md:text-2xl text-lg font-Inter text-gray-300 text-center py-4 md:w-8/12 mx-auto">
+              So you can focus on writing your blog and never worry about those
+              cover images.
+            </p>
+            <Link to="/editor">
+              <button className="flex mx-auto my-4 hover:translate-x-2 duration-300 bg-indigo-500 hover:bg-indigo-600  rounded-full  text-white md:text-xl text-base font-Nunito font-semibold p-4 px-8">
+                It's Free! Try Now &rarr;
+              </button>
+            </Link>
+          </div>
+
+          <footer className=" p-10 gap-2 flex md:flex-row flex-col-reverse font-Inter md:px-20 md:justify-between justify-center mx-auto md:w-10/12 w-full items-center">
+            <div className=" flex flex-col">
+              <span className="md:text-lg text-sm">
+                Made with 💛 by{" "}
+                <a
+                  href="https://rutik.dev"
+                  className="font-semibold underline decoration-wavy underline-offset-4"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Rutik Wankhade
+                </a>
+              </span>
+            </div>
 
+            <div className="md:text-lg text-sm flex flex-wrap gap-4 ">
+              <Link to="/faq" className="hover:underline">
+                How to use
+              </Link>
+              <a
+                href="https://github.com/rutikwankhade/CoverView"
+                target="_blank"
+                rel="noreferrer"
+                className="hover:underline"
+              >
+                Github
+              </a>
+              <a
+                href="https://www.buymeacoffee.com/rutikwankhade"
+                target="_blank"
+                rel="noreferrer"
+                className="hover:underline"
+              >
+                Buy me a coffee
+              </a>
+            </div>
+          </footer>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/components/RandomTheme.css b/src/components/RandomTheme.css
index f49d8f9..0ac876e 100644
--- a/src/components/RandomTheme.css
+++ b/src/components/RandomTheme.css
@@ -1,13 +1,10 @@
-
-.shuffle-btn:active{
-    transform: rotate(720deg);
-    transition: all 0.6s ease-out;
+.shuffle-btn:active {
+  transform: rotate(720deg);
+  transition: all 0.6s ease-out;
 }
 
-.bi-shuffle{
-    height: 20px;
-    width: 20px;
-    opacity: 0.6;
+.bi-shuffle {
+  height: 20px;
+  width: 20px;
+  opacity: 0.6;
 }
-
-
diff --git a/src/components/RandomTheme.js b/src/components/RandomTheme.js
index bb74639..e02a9e3 100644
--- a/src/components/RandomTheme.js
+++ b/src/components/RandomTheme.js
@@ -1,119 +1,147 @@
-import React from 'react';
-import './RandomTheme.css';
+import React from "react";
+import "./RandomTheme.css";
 class RandomTheme extends React.Component {
+  changeTheme = () => {
+    const colorThemes = [
+      {
+        bgColor: "#d972ff",
+        bdColor: "#581b98",
+      },
+      {
+        bgColor: "#a7ff83",
+        bdColor: "#17b978",
+      },
+      {
+        bgColor: "#CB91FE",
+        bdColor: "#5F01B2",
+      },
+      {
+        bgColor: "#9D2EFE",
+        bdColor: "#3D0C6A",
+      },
+      {
+        bgColor: "#88EF69",
+        bdColor: "#362E48",
+      },
+      {
+        bgColor: "#ffa600",
+        bdColor: "#44475a",
+      },
+      {
+        bgColor: "#8078E7",
+        bdColor: "#4B4681",
+      },
+      {
+        bgColor: "#B1B3E4",
+        bdColor: "#333794",
+      },
+      {
+        bgColor: "#CA96DB",
+        bdColor: "#7D3394",
+      },
+      {
+        bgColor: "#F9A6A8",
+        bdColor: "#55456F",
+      },
+      {
+        bgColor: "#dcd6f7",
+        bdColor: "#424874",
+      },
+      {
+        bgColor: "#aba9e9",
+        bdColor: "#64638f",
+      },
+      {
+        bgColor: "#ffe9e3",
+        bdColor: "#7c73e6",
+      },
+      {
+        bgColor: "#efb1ff",
+        bdColor: "#742dd2",
+      },
+      {
+        bgColor: "#fee856",
+        bdColor: "#1b0044",
+      },
+      {
+        bgColor: "#fee856",
+        bdColor: "#5c2a9d",
+      },
+      {
+        bgColor: "#16db93",
+        bdColor: "#2c699a",
+      },
+      {
+        bgColor: "#ffc4d6",
+        bdColor: "#ff5d8f",
+      },
+      {
+        bgColor: "#80ed99",
+        bdColor: "#22577a",
+      },
+      {
+        bgColor: "#ffb2e6",
+        bdColor: "#8447ff",
+      },
+      {
+        bgColor: "",
+        bdColor: "",
+      },
+    ];
+    const patterns = [
+      "graph-paper",
+      "gigsaw",
+      "",
+      "hideout",
+      "dots",
+      "",
+      "falling-triangles",
+      "circuit-board",
+      "",
+      "temple",
+      "anchors",
+      "",
+      "brickwall",
+      "wiggle",
+      "overlapping-circles",
+      "",
+      "tic-tac-toe",
+      "leaf",
+      "",
+      "bubbles",
+      "squares",
+      "",
+    ];
+    const indexOfColors = Math.floor(Math.random() * colorThemes.length);
+    const theme = colorThemes[indexOfColors];
 
-    changeTheme = () => {
-        const colorThemes = [
-            {
-                bgColor: '#d972ff',
-                bdColor: '#581b98'
-            },
-            {
-                bgColor: '#a7ff83',
-                bdColor: '#17b978'
+    const indexOfPattern = Math.floor(Math.random() * patterns.length);
+    const Pattern = patterns[indexOfPattern];
 
-            },
-            {
-                bgColor: '#CB91FE',
-                bdColor: '#5F01B2'
+    this.props.onThemeChange(theme, Pattern);
+  };
 
-            },
-            {
-                bgColor: '#9D2EFE',
-                bdColor: '#3D0C6A'
-
-            },
-            {
-                bgColor: '#88EF69',
-                bdColor: '#362E48'
-
-            },
-            {
-                bgColor: '#ffa600',
-                bdColor: '#44475a'
-            },
-            {
-                bgColor: '#8078E7',
-                bdColor: '#4B4681'
-            },
-            {
-                bgColor: '#B1B3E4',
-                bdColor: '#333794'
-            },
-            {
-                bgColor: '#CA96DB',
-                bdColor: '#7D3394'
-            },
-            {
-                bgColor: '#F9A6A8',
-                bdColor: '#55456F'
-            },
-            {
-                bgColor: '#dcd6f7',
-                bdColor: '#424874'
-            },
-            {
-                bgColor: '#aba9e9',
-                bdColor: '#64638f'
-            },
-            {
-                bgColor: '#ffe9e3',
-                bdColor: '#7c73e6'
-            },
-            {
-                bgColor: '#efb1ff',
-                bdColor: '#742dd2'
-            },
-            {
-                bgColor: '#fee856',
-                bdColor: '#1b0044'
-            },
-            {
-                bgColor: '#fee856',
-                bdColor: '#5c2a9d'
-            },
-            {
-                bgColor: '#16db93',
-                bdColor: '#2c699a'
-            },
-            {
-                bgColor: '#ffc4d6',
-                bdColor: '#ff5d8f'
-            },
-            {
-                bgColor: '#80ed99',
-                bdColor: '#22577a'
-            },
-            {
-                bgColor: '#ffb2e6',
-                bdColor: '#8447ff'
-            },
-            {
-                bgColor: '',
-                bdColor: ''
-            }
-
-        ];
-        const patterns = ['graph-paper', 'gigsaw', '', 'hideout', 'dots', '', 'falling-triangles', 'circuit-board', '',
-            'temple', 'anchors', '', 'brickwall', 'wiggle', 'overlapping-circles', '', 'tic-tac-toe', 'leaf', '', 'bubbles', 'squares', ''];
-        const indexOfColors = Math.floor(Math.random() * colorThemes.length);
-        const theme = colorThemes[indexOfColors];
-
-        const indexOfPattern = Math.floor(Math.random() * patterns.length);
-        const Pattern = patterns[indexOfPattern];
-
-        this.props.onThemeChange(theme, Pattern);
-    }
-
-    render() {
-        return (
-            <div className="flex flex-col justify-center">
-                <div className="shuffle-btn  flex justify-center items-center    p-2    cursor-pointer" onClick={this.changeTheme}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray-600 hover:text-gray-700 " width="20" height="20" viewBox="0 0 24 24" ><path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path><path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path></svg>
-                </div>
-
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className="flex flex-col justify-center">
+        <div
+          className="shuffle-btn  flex justify-center items-center    p-2    cursor-pointer"
+          onClick={this.changeTheme}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className="text-gray-600 hover:text-gray-700 "
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+          >
+            <path d="M17 17h-1.559l-9.7-10.673A1 1 0 0 0 5.001 6H2v2h2.559l4.09 4.5-4.09 4.501H2v2h3.001a1 1 0 0 0 .74-.327L10 13.987l4.259 4.686a1 1 0 0 0 .74.327H17v3l5-4-5-4v3z"></path>
+            <path d="M15.441 8H17v3l5-3.938L17 3v3h-2.001a1 1 0 0 0-.74.327l-3.368 3.707 1.48 1.346L15.441 8z"></path>
+          </svg>
+        </div>
+      </div>
+    );
+  }
 }
 export default RandomTheme;
diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 1725e9d..42a56fd 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -1,91 +1,116 @@
-import React, { useContext } from 'react';
-import { ImgContext } from '../../utils/ImgContext';
-import UnsplashSearch from '../UnsplashSearch';
+import React, { useContext } from "react";
+import { ImgContext } from "../../utils/ImgContext";
+import UnsplashSearch from "../UnsplashSearch";
 
 const BackgroundTheme = ({ config }) => {
-    const { title, author, font, icon, customIcon, bgColor } = config;
-    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
-
-
-    return (
-        <div className=" bg-white ">
-
-
-            <div className={` overflow-y-hidden flex flex-col`}
-                style={{ backgroundColor: bgColor }}
-            >
-
-                <div className="flex flex-row  items-center bg-white  justify-center ">
-
-                    <div className="w-full">
-
-                        {unsplashImage ?
-                            <div className='relative flex group'>
-
-                                <div className="h-max w-full ">
-                                    <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-full w-full  " alt="preview" />
-                                </div>
-
-
-                                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
-                                    <button
-                                        onClick={() => setUnsplashImage('')}
-                                        className="absolute  top-2 right-2 cursor-pointer">
-                                        <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
-                                    </button>
-
-                                    <div className={`${font} px-10 pt-32  text-left rounded-xl h-full p-4 flex flex-col`}>
-                                        <h1 className=" md:text-5xl text-center text-2xl font-bold text-white">{title}</h1>
-                                        <div className="flex flex-col items-center py-10  ">
-
-                                            <h2 className="text-xl  font-semibold text-left text-white ">{author}</h2>
-                                            {
-                                                customIcon ?
-                                                    <div className=" ">
-                                                        <img src={customIcon} alt="img" className="w-12 h-12 m-2 rounded-full bg-white border-2 border-white" />
-                                                    </div>
-                                                    :
-                                                    <div className="mr-2 items-center justify-center flex">
-                                                        <i className={`devicon-${icon.value}-plain text-white dev-icon text-3xl`}></i>
-                                                    </div>
-                                            }
-
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="absolute  bottom-4 right-4 opacity-80">
-                                    <div className=" group-hover:flex hidden items-center">
-                                        <span className="text-sm text-white mx-2">Photo by</span>
-                                        <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
-                                            <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
-
-                                            <span className="pr-2">{unsplashImage.name}</span>
-                                        </a>
-
-                                        <a href="https://unsplash.com/?utm_source=https://coverview.vercel.app&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
-                                    </div>
-
-                                </div>
-                            </div>
-                            :
-                            <div className="flex flex-col p-2  bg-white items-center justify-center">
-
-                                <UnsplashSearch largeImgPreview />
-
-                            </div>
-
-                        }
+  const { title, author, font, icon, customIcon, bgColor } = config;
+  const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+
+  return (
+    <div className=" bg-white ">
+      <div
+        className={` overflow-y-hidden flex flex-col`}
+        style={{ backgroundColor: bgColor }}
+      >
+        <div className="flex flex-row  items-center bg-white  justify-center ">
+          <div className="w-full">
+            {unsplashImage ? (
+              <div className="relative flex group">
+                <div className="h-max w-full ">
+                  <img
+                    src={unsplashImage.url && unsplashImage.url}
+                    className=" object-cover h-full w-full  "
+                    alt="preview"
+                  />
+                </div>
 
+                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
+                  <button
+                    onClick={() => setUnsplashImage("")}
+                    className="absolute  top-2 right-2 cursor-pointer"
+                  >
+                    <svg
+                      className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M6 18L18 6M6 6l12 12"
+                      ></path>
+                    </svg>
+                  </button>
+
+                  <div
+                    className={`${font} px-10 pt-32  text-left rounded-xl h-full p-4 flex flex-col`}
+                  >
+                    <h1 className=" md:text-5xl text-center text-2xl font-bold text-white">
+                      {title}
+                    </h1>
+                    <div className="flex flex-col items-center py-10  ">
+                      <h2 className="text-xl  font-semibold text-left text-white ">
+                        {author}
+                      </h2>
+                      {customIcon ? (
+                        <div className=" ">
+                          <img
+                            src={customIcon}
+                            alt="img"
+                            className="w-12 h-12 m-2 rounded-full bg-white border-2 border-white"
+                          />
+                        </div>
+                      ) : (
+                        <div className="mr-2 items-center justify-center flex">
+                          <i
+                            className={`devicon-${icon.value}-plain text-white dev-icon text-3xl`}
+                          ></i>
+                        </div>
+                      )}
                     </div>
+                  </div>
                 </div>
 
-
-            </div>
-
+                <div className="absolute  bottom-4 right-4 opacity-80">
+                  <div className=" group-hover:flex hidden items-center">
+                    <span className="text-sm text-white mx-2">Photo by</span>
+                    <a
+                      href={unsplashImage.profile}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm"
+                    >
+                      <img
+                        src={unsplashImage.avatar && unsplashImage.avatar}
+                        alt={unsplashImage.name}
+                        className="h-6 w-6 rounded-full mr-2"
+                      />
+
+                      <span className="pr-2">{unsplashImage.name}</span>
+                    </a>
+
+                    <a
+                      href="https://unsplash.com/?utm_source=https://coverview.vercel.app&utm_medium=referral"
+                      className="text-sm text-white mx-2"
+                    >
+                      Unsplash
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col p-2  bg-white items-center justify-center">
+                <UnsplashSearch largeImgPreview />
+              </div>
+            )}
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default BackgroundTheme;
\ No newline at end of file
+export default BackgroundTheme;
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index b5e6041..93052ae 100644
--- a/src/components/Themes/BasicTheme.js
+++ b/src/components/Themes/BasicTheme.js
@@ -1,45 +1,48 @@
-import React from 'react';
-
+import React from "react";
 
 const BasicTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
-
-    return (
-        <div className=" bg-white w-full h-full ">
-            <div className={`overflow-y-hidden flex  text-gray-800 items-center h-full ${pattern} `}
-                style={{ backgroundColor: bgColor }}
-            >
-
-                <div className={`${font} bg-white md:w-10/12  m-auto flex flex-col pt-12 rounded-xl`}>
-                    <div className="px-12">
-                        <div>
-                            <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
-                        </div>
-                    </div>
-
-                    <div className=" flex mx-4  p-4 rounded-xl items-center bg-white">
-                        {
-                            customIcon ?
-                                <div className="w-12 h-12  ">
-                                    <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
-                                </div>
-                                :
-                                <div className="mr-auto ml-2 items-center justify-center flex">
-                                    <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
-                                </div>
-                        }
-
-
-                        <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
-
-                    </div>
-
-                </div>
-
+  const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+
+  return (
+    <div className=" bg-white w-full h-full ">
+      <div
+        className={`overflow-y-hidden flex  text-gray-800 items-center h-full ${pattern} `}
+        style={{ backgroundColor: bgColor }}
+      >
+        <div
+          className={`${font} bg-white md:w-10/12  m-auto flex flex-col pt-12 rounded-xl`}
+        >
+          <div className="px-12">
+            <div>
+              <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">
+                {title}
+              </h1>
             </div>
-
+          </div>
+
+          <div className=" flex mx-4  p-4 rounded-xl items-center bg-white">
+            {customIcon ? (
+              <div className="w-12 h-12  ">
+                <img
+                  src={customIcon}
+                  alt="img"
+                  className="rounded-full bg-white p-1 border-white"
+                />
+              </div>
+            ) : (
+              <div className="mr-auto ml-2 items-center justify-center flex">
+                <i
+                  className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}
+                ></i>
+              </div>
+            )}
+
+            <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default BasicTheme;
\ No newline at end of file
+export default BasicTheme;
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js
index ec23940..d546e68 100644
--- a/src/components/Themes/MobileMockupTheme.js
+++ b/src/components/Themes/MobileMockupTheme.js
@@ -1,67 +1,75 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const MobileMockupTheme = ({ config }) => {
-    const { bgColor, title, font } = config;
-
-    const [image, setImage] = useState()
-
-    return (
-        <div className={`bg-white w-full h-full`}>
-
-
-            <div className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
-                style={{ backgroundColor: bgColor }}
-            >
-
-
-                <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
-
-                <div className="w-5/12 mx-auto m-4 mt-10 group h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
-                    <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
-
-                        <div className="flex mx-auto items-center">
-
-                            <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
-                            <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
-
-                        </div>
-
-
-                    </div>
-
-
-
-                    {image ?
-                        <div className="group relative">
-                            <img src={image && image} className="object-cover rounded -translate-y-1 h-full" alt="preview" />
-                            <button
-                                onClick={() => setImage('')}
-                                className="ml-auto mr-4 cursor-pointer">
-                                <svg className="group-hover:inline-block absolute top-4 right-2  bg-gray-500 hidden w-8 h-8 p-2 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
-                            </button>
-                        </div>
-                        :
-                        <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center">
-                            <input type="file"
-                                className="text-sm  flex flex-col cursor-pointer mb-2 bg-white rounded border"
-                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
-                            />
-                            <span className=" text-center italic">click to upload a screenshot</span>
-                        </div>
-
-                    }
-                </div>
-
-
-
-
-
+  const { bgColor, title, font } = config;
+
+  const [image, setImage] = useState();
+
+  return (
+    <div className={`bg-white w-full h-full`}>
+      <div
+        className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
+        style={{ backgroundColor: bgColor }}
+      >
+        <h1
+          className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}
+        >
+          {title}
+        </h1>
+
+        <div className="w-5/12 mx-auto m-4 mt-10 group h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
+          <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
+            <div className="flex mx-auto items-center">
+              <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
+              <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
             </div>
-
-
+          </div>
+
+          {image ? (
+            <div className="group relative">
+              <img
+                src={image && image}
+                className="object-cover rounded -translate-y-1 h-full"
+                alt="preview"
+              />
+              <button
+                onClick={() => setImage("")}
+                className="ml-auto mr-4 cursor-pointer"
+              >
+                <svg
+                  className="group-hover:inline-block absolute top-4 right-2  bg-gray-500 hidden w-8 h-8 p-2 text-white rounded-full z-10"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+          ) : (
+            <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center">
+              <input
+                type="file"
+                className="text-sm  flex flex-col cursor-pointer mb-2 bg-white rounded border"
+                onChange={(e) =>
+                  setImage(URL.createObjectURL(e.target.files[0]))
+                }
+              />
+              <span className=" text-center italic">
+                click to upload a screenshot
+              </span>
+            </div>
+          )}
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default MobileMockupTheme;
\ No newline at end of file
+export default MobileMockupTheme;
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js
index 35205f1..e544dd1 100644
--- a/src/components/Themes/ModernTheme.js
+++ b/src/components/Themes/ModernTheme.js
@@ -1,41 +1,47 @@
-import React from 'react';
-
+import React from "react";
 
 const ModernTheme = ({ config }) => {
-
-    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
-
-    return (
-        <div className="w-full h-full bg-white ">
-            <div className=" overflow-y-hidden w-full h-full flex  items-center">
-                <div className={`  h-full w-full p-4 text-gray-800 flex  items-center ${pattern} `}
-                    style={{ backgroundColor: bgColor }}
-                >
-
-                    {
-                        customIcon ?
-                            <div className="  mx-auto items-center justify-center flex">
-                                <img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
-                            </div>
-                            :
-                            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
-                            </div>
-                    }
-
-
-                    <div className="h-full w-2/3">
-                        <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
-                            <h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
-                            <h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
-                        </div>
-                    </div>
-                </div>
-
+  const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+
+  return (
+    <div className="w-full h-full bg-white ">
+      <div className=" overflow-y-hidden w-full h-full flex  items-center">
+        <div
+          className={`  h-full w-full p-4 text-gray-800 flex  items-center ${pattern} `}
+          style={{ backgroundColor: bgColor }}
+        >
+          {customIcon ? (
+            <div className="  mx-auto items-center justify-center flex">
+              <img
+                src={customIcon}
+                alt="img"
+                className="w-28 h-28 rounded-full bg-white border-4 border-white"
+              />
             </div>
-
+          ) : (
+            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+              <i
+                className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}
+              ></i>
+            </div>
+          )}
+
+          <div className="h-full w-2/3">
+            <div
+              className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}
+            >
+              <h1 className="text-3xl md:text-5xl font-bold text-gray-800">
+                {title}
+              </h1>
+              <h2 className="text-xl mt-10 font-semibold text-left ">
+                {author}
+              </h2>
+            </div>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default ModernTheme;
\ No newline at end of file
+export default ModernTheme;
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index c1f6866..abc65fe 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -1,43 +1,42 @@
-import React from 'react';
+import React from "react";
 const OutlineTheme = ({ config }) => {
-    const { title, bgColor, author, icon, font, customIcon } = config;
-
-    return (
-        <div className="w-full h-full bg-white ">
-
-
-            <div className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
-                style={{ backgroundColor: bgColor }}
-            >
-
-
-                <div className={`${font} rounded-2xl py-6 flex flex-col  `}>
-                    {
-                        customIcon ?
-                            <div className=" m-6">
-                                <img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
-                            </div>
-                            :
-                            <div className="  mr-auto ml-2 items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
-                            </div>
-                    }
-                    <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">{title}</h1>
-
-                    <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
-
-                        <h2 className="text-2xl text-white font-semibold">{author}</h2>
-
-                    </div>
-                </div>
-
-
-
+  const { title, bgColor, author, icon, font, customIcon } = config;
+
+  return (
+    <div className="w-full h-full bg-white ">
+      <div
+        className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
+        style={{ backgroundColor: bgColor }}
+      >
+        <div className={`${font} rounded-2xl py-6 flex flex-col  `}>
+          {customIcon ? (
+            <div className=" m-6">
+              <img
+                src={customIcon}
+                alt="img"
+                className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white"
+              />
             </div>
-
-
+          ) : (
+            <div className="  mr-auto ml-2 items-center justify-center flex">
+              <i
+                className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}
+              ></i>
+            </div>
+          )}
+          <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">
+            {title}
+          </h1>
+
+          <div
+            className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}
+          >
+            <h2 className="text-2xl text-white font-semibold">{author}</h2>
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default OutlineTheme;
\ No newline at end of file
+export default OutlineTheme;
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index 6e2279b..e7ef3c2 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,55 +1,74 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const PreviewTheme = ({ config }) => {
-    const { bgColor, title, font } = config;
+  const { bgColor, title, font } = config;
 
-    const [image, setImage] = useState()
+  const [image, setImage] = useState();
 
-    return (
-        <div className="w-full h-full bg-white">
+  return (
+    <div className="w-full h-full bg-white">
+      <div
+        className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
+        style={{ backgroundColor: bgColor }}
+      >
+        <h1
+          className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}
+        >
+          {title}
+        </h1>
 
-
-            <div className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
-                style={{ backgroundColor: bgColor }}
+        <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
+          <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
+            <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
+            <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
+            <div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
+            <button
+              onClick={() => setImage("")}
+              className="ml-auto mr-4 cursor-pointer"
             >
+              <svg
+                className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              </svg>
+            </button>
+          </div>
 
-                <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
-
-                <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
-                    <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
-                        <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
-                        <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
-                        <div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
-                        <button
-                            onClick={() => setImage('')}
-                            className="ml-auto mr-4 cursor-pointer">
-                            <svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
-                        </button>
-                    </div>
-
-
-                    {image ?
-                        <div className="">
-                            <img src={image && image} className="object-cover " alt="preview" />
-
-                        </div>
-                        :
-                        <div className="flex flex-col p-20 py-28 bg-white items-center justify-center">
-                            <input type="file"
-                                className="text-xl cursor-pointer mb-2 bg-white rounded border"
-                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
-                            />
-                            <span className=" text-center italic">click to upload a screenshot</span>
-                        </div>
-
-                    }
-                </div>
-
+          {image ? (
+            <div className="">
+              <img
+                src={image && image}
+                className="object-cover "
+                alt="preview"
+              />
             </div>
-
+          ) : (
+            <div className="flex flex-col p-20 py-28 bg-white items-center justify-center">
+              <input
+                type="file"
+                className="text-xl cursor-pointer mb-2 bg-white rounded border"
+                onChange={(e) =>
+                  setImage(URL.createObjectURL(e.target.files[0]))
+                }
+              />
+              <span className=" text-center italic">
+                click to upload a screenshot
+              </span>
+            </div>
+          )}
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default PreviewTheme;
\ No newline at end of file
+export default PreviewTheme;
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 3cc81ff..7393926 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -1,88 +1,109 @@
-import React, { useContext } from 'react';
-import { ImgContext } from '../../utils/ImgContext';
-import UnsplashSearch from '../UnsplashSearch';
+import React, { useContext } from "react";
+import { ImgContext } from "../../utils/ImgContext";
+import UnsplashSearch from "../UnsplashSearch";
 
 const StylishTheme = ({ config }) => {
-    const { title, author, font, icon, customIcon, bgColor } = config;
-    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
-
-
-    return (
-        <div className=" bg-white w-full h-full">
-
-
-            <div className={` overflow-y-hidden flex flex-col`}
-                style={{ backgroundColor: bgColor }}
+  const { title, author, font, icon, customIcon, bgColor } = config;
+  const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+
+  return (
+    <div className=" bg-white w-full h-full">
+      <div
+        className={` overflow-y-hidden flex flex-col`}
+        style={{ backgroundColor: bgColor }}
+      >
+        <div className="flex flex-row  items-center bg-white  justify-center">
+          <div className="h-full w-1/2  bg-white rounded-l-xl">
+            <div
+              className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}
             >
-
-                <div className="flex flex-row  items-center bg-white  justify-center">
-
-                    <div className="h-full w-1/2  bg-white rounded-l-xl">
-                        <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
-                            <h1 className=" text-4xl font-bold text-gray-800">{title}</h1>
-                            <div className="flex items-center mt-10 text-left">
-                                {
-                                    customIcon ?
-                                        <div className=" ">
-                                            <img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
-                                        </div>
-                                        :
-                                        <div className="mr-2 items-center justify-center flex">
-                                            <i className={`devicon-${icon.value}-plain  dev-icon text-3xl`}></i>
-                                        </div>
-                                }
-                                <h2 className="text-xl  font-semibold text-left ">{author}</h2>
-
-
-                            </div>
-                        </div>
-                    </div>
-                    <div className="w-1/2 h-full">
-
-
-                        {unsplashImage ?
-                            <div className='relative w-full h-max flex group'>
-
-                                <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full  " alt="preview" />
-
-
-                                <button
-                                    onClick={() => setUnsplashImage('')}
-                                    className="absolute  top-4 right-2 cursor-pointer">
-                                    <svg className="group-hover:inline-block hidden w-6 h-6 text-gray-800 bg-white p-1 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
-                                </button>
-
-                                <div className="absolute  bottom-4 right-4 opacity-80">
-                                    <div className=" group-hover:flex hidden items-center">
-                                        <span className="text-sm text-white mx-2">Photo by</span>
-                                        <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
-                                            <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
-
-                                            <span className="pr-2">{unsplashImage.name}</span>
-                                        </a>
-
-                                        <a href="https://unsplash.com/?utm_source=https://coverview.vercel.app&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
-                                    </div>
-
-                                </div>
-                            </div>
-                            :
-                            <div className="flex h-max w-full flex-col bg-white items-center justify-center">
-
-                                <UnsplashSearch />
-                            </div>
-
-                        }
-
-                    </div>
-                </div>
-
-
+              <h1 className=" text-4xl font-bold text-gray-800">{title}</h1>
+              <div className="flex items-center mt-10 text-left">
+                {customIcon ? (
+                  <div className=" ">
+                    <img
+                      src={customIcon}
+                      alt="img"
+                      className="w-12 h-12 mr-2 rounded-full bg-white border border-white"
+                    />
+                  </div>
+                ) : (
+                  <div className="mr-2 items-center justify-center flex">
+                    <i
+                      className={`devicon-${icon.value}-plain  dev-icon text-3xl`}
+                    ></i>
+                  </div>
+                )}
+                <h2 className="text-xl  font-semibold text-left ">{author}</h2>
+              </div>
             </div>
-
+          </div>
+          <div className="w-1/2 h-full">
+            {unsplashImage ? (
+              <div className="relative w-full h-max flex group">
+                <img
+                  src={unsplashImage.url && unsplashImage.url}
+                  className=" object-cover w-full h-full  "
+                  alt="preview"
+                />
+
+                <button
+                  onClick={() => setUnsplashImage("")}
+                  className="absolute  top-4 right-2 cursor-pointer"
+                >
+                  <svg
+                    className="group-hover:inline-block hidden w-6 h-6 text-gray-800 bg-white p-1 rounded-full z-10"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    ></path>
+                  </svg>
+                </button>
+
+                <div className="absolute  bottom-4 right-4 opacity-80">
+                  <div className=" group-hover:flex hidden items-center">
+                    <span className="text-sm text-white mx-2">Photo by</span>
+                    <a
+                      href={unsplashImage.profile}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm"
+                    >
+                      <img
+                        src={unsplashImage.avatar && unsplashImage.avatar}
+                        alt={unsplashImage.name}
+                        className="h-6 w-6 rounded-full mr-2"
+                      />
+
+                      <span className="pr-2">{unsplashImage.name}</span>
+                    </a>
+
+                    <a
+                      href="https://unsplash.com/?utm_source=https://coverview.vercel.app&utm_medium=referral"
+                      className="text-sm text-white mx-2"
+                    >
+                      Unsplash
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex h-max w-full flex-col bg-white items-center justify-center">
+                <UnsplashSearch />
+              </div>
+            )}
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default StylishTheme;
\ No newline at end of file
+export default StylishTheme;
diff --git a/src/components/UnsplashSearch.js b/src/components/UnsplashSearch.js
index 5517c85..203b6b9 100644
--- a/src/components/UnsplashSearch.js
+++ b/src/components/UnsplashSearch.js
@@ -1,108 +1,114 @@
-import React, { useState, useEffect, useContext } from 'react';
-import unsplash from '../utils/unsplashConfig';
-import { ImgContext } from '../utils/ImgContext';
+import React, { useState, useEffect, useContext } from "react";
+import unsplash from "../utils/unsplashConfig";
+import { ImgContext } from "../utils/ImgContext";
 
 const UnsplashSearch = ({ largeImgPreview }) => {
+  const [imageList, setImageList] = useState([]);
+  const [searchText, setSearchText] = useState("setup");
+  const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+
+  const searchImages = () => {
+    unsplash.search
+      .getPhotos({
+        query: searchText,
+        page: 1,
+        per_page: 30,
+        // orientation:'portrait'
+      })
+      .then((response) => {
+        // console.log(response.response.results);
+        setImageList(response.response.results);
+      });
+  };
+
+  const selectImage = (image) => {
+    setUnsplashImage({
+      url: image.urls.regular,
+      name: image.user.name,
+      avatar: image.user.profile_image.small,
+      profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
+      downloadLink: image.links.download_location,
+    });
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    searchImages(searchText);
+  };
+
+  useEffect(() => {
+    unsplash.search
+      .getPhotos({
+        query: "setup",
+        page: 1,
+        per_page: 30,
+      })
+      .then((response) => {
+        // console.log(response.response.results);
+        setImageList(response.response.results);
+      });
+  }, []);
+
+  return (
+    <div className="w-full h-full">
+      <div className="flex flex-col p-2  bg-white items-center justify-center">
+        <div className="flex items-center w-full px-6 ">
+          <form
+            onSubmit={(e) => handleSearchSubmit(e)}
+            className=" mx-auto w-full flex bg-gray-50 rounded-full border border-gray-50 mb-2"
+          >
+            <input
+              type="text"
+              value={searchText}
+              placeholder="Search photos"
+              className="focus:outline-none w-full text-lg bg-gray-50  p-1 px-4  rounded-full  "
+              onChange={(e) => setSearchText(e.target.value)}
+            />
+
+            <button type="submit" onClick={() => searchImages(searchText)}>
+              <svg
+                className="w-9 h-9 ml-auto  p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                ></path>
+              </svg>
+            </button>
+          </form>
+        </div>
 
-    const [imageList, setImageList] = useState([]);
-    const [searchText, setSearchText] = useState('setup');
-    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
-
-
-    const searchImages = () => {
-
-        unsplash.search
-            .getPhotos({
-                query: searchText,
-                page: 1,
-                per_page: 30,
-                // orientation:'portrait'
-
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }
-
-
-    const selectImage = (image) => {
-        setUnsplashImage({
-            url: image.urls.regular,
-            name: image.user.name,
-            avatar: image.user.profile_image.small,
-            profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
-            downloadLink: image.links.download_location
-
-        })
-
-
-    }
-
-    const handleSearchSubmit = (e) => {
-        e.preventDefault();
-        searchImages(searchText);
-
-    }
-
-    useEffect(() => {
-
-        unsplash.search
-            .getPhotos({
-                query: 'setup',
-                page: 1,
-                per_page: 30
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }, [])
-
-    return (
-        <div className='w-full h-full'>
-            <div className="flex flex-col p-2  bg-white items-center justify-center">
-
-                <div className="flex items-center w-full px-6 ">
-                    <form onSubmit={(e) => handleSearchSubmit(e)} className=" mx-auto w-full flex bg-gray-50 rounded-full border border-gray-50 mb-2">
-                        <input type="text"
-                            value={searchText}
-                            placeholder="Search photos"
-                            className="focus:outline-none w-full text-lg bg-gray-50  p-1 px-4  rounded-full  "
-                            onChange={(e) => setSearchText(e.target.value)}
-                        />
-
-                        <button type="submit" onClick={() => searchImages(searchText)}>
-                            <svg className="w-9 h-9 ml-auto  p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                        </button>
-                    </form>
-
-                </div>
-
-
-                <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden h-max justify-center flex flex-wrap">
-                    {
-                        imageList.map(image => {
-                            return <div key={image.id}
-                                className={`rounded-lg relative cursor-pointer m-1 ${largeImgPreview ? ' h-44 w-60' : 'h-24 w-40'
-                                    }`}
-                            >
-                                <span className="font-Inter top-2 left-2 absolute text-sm font-semibold text-white opacity-50 ">Click to Select</span>
-                                <img src={image.urls.regular}
-                                    alt={image.alt_description}
-                                    onClick={() => selectImage(image)
-                                    }
-                                    className="rounded-lg object-cover h-full w-full"
-                                />
-                            </div>
-                        })
-                    }
-                </div>
-            </div>
+        <div className="overflow-y-scroll w-full pb-12 overflow-x-hidden h-max justify-center flex flex-wrap">
+          {imageList.map((image) => {
+            return (
+              <div
+                key={image.id}
+                className={`rounded-lg relative cursor-pointer m-1 ${
+                  largeImgPreview ? " h-44 w-60" : "h-24 w-40"
+                }`}
+              >
+                <span className="font-Inter top-2 left-2 absolute text-sm font-semibold text-white opacity-50 ">
+                  Click to Select
+                </span>
+                <img
+                  src={image.urls.regular}
+                  alt={image.alt_description}
+                  onClick={() => selectImage(image)}
+                  className="rounded-lg object-cover h-full w-full"
+                />
+              </div>
+            );
+          })}
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
-export default UnsplashSearch;
\ No newline at end of file
+export default UnsplashSearch;
diff --git a/src/components/walloflove.js b/src/components/walloflove.js
index 50396e2..407875e 100644
--- a/src/components/walloflove.js
+++ b/src/components/walloflove.js
@@ -1,40 +1,41 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 
 const WallOfLove = () => {
+  useEffect(() => {
+    let script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute(
+      "src",
+      "https://widget.senja.io/js/iframeResizer.min.js",
+    );
 
+    // window.iFrameResize(
+    //     { log: false, checkOrigin: false },
+    //     '#senja-frame-902012ea');
 
-    useEffect(() => {
-        let script = document.createElement('script');
-        script.setAttribute('type', 'text/javascript');
-        script.setAttribute('src', 'https://widget.senja.io/js/iframeResizer.min.js');
-
-        // window.iFrameResize(
-        //     { log: false, checkOrigin: false },
-        //     '#senja-frame-902012ea');
-
-        let frame = document.getElementById('senja-frame-902012ea');
-        frame.setAttribute('src', "https://widget.senja.io/widget/902012ea-9b49-433a-96df-5cb43fd9a648");
-        document.body.appendChild(script);
-
-    })
-
-
-    return (
-        <div className='md:h-[800px] h-screen w-full'>
-            <iframe id="senja-frame-902012ea"
-                title="wall of love"
-                src=""
-                data-src="https://widget.senja.io/widget/902012ea-9b49-433a-96df-5cb43fd9a648"
-                frameBorder="0"
-                scrolling="no"
-                width="100%"
-                height="100%"
-                className="md:w-9/12  h-full py-4 px-6 mx-auto"
-            >
-            </iframe>
-
-        </div>
+    let frame = document.getElementById("senja-frame-902012ea");
+    frame.setAttribute(
+      "src",
+      "https://widget.senja.io/widget/902012ea-9b49-433a-96df-5cb43fd9a648",
     );
-}
-
-export default WallOfLove;
\ No newline at end of file
+    document.body.appendChild(script);
+  });
+
+  return (
+    <div className="md:h-[800px] h-screen w-full">
+      <iframe
+        id="senja-frame-902012ea"
+        title="wall of love"
+        src=""
+        data-src="https://widget.senja.io/widget/902012ea-9b49-433a-96df-5cb43fd9a648"
+        frameBorder="0"
+        scrolling="no"
+        width="100%"
+        height="100%"
+        className="md:w-9/12  h-full py-4 px-6 mx-auto"
+      ></iframe>
+    </div>
+  );
+};
+
+export default WallOfLove;
diff --git a/src/index.css b/src/index.css
index 32ba69b..c7e7582 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,24 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap?crossorigin=anonymous');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap?crossorigin=anonymous");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
 
-@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?crossorigin=anonymous');
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap?crossorigin=anonymous");
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap");
 
-
-.h-100{
-    height:36rem;
+.h-100 {
+  height: 36rem;
 }
 
 /* Solve the problem of poor display effect caused by the height of the cover image exceeding the range under the first theme */
 .h-max.w-full {
-    height: 420px;
+  height: 420px;
 }
 
-.h-99{
-    height:35rem;
+.h-99 {
+  height: 35rem;
 }
 
 ::-webkit-scrollbar {
@@ -27,17 +26,16 @@
   display: none;
 }
 
-Track
-::-webkit-scrollbar-track {
+Track ::-webkit-scrollbar-track {
   background: #f1f1f1;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background:  #ccccff;
+  background: #ccccff;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background:  #b3b3ff;
+  background: #b3b3ff;
 }
diff --git a/src/index.js b/src/index.js
index f3c2183..c64c9c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-
-import App from './components/App';
-
-ReactDOM.render(
-    <App />,
-    document.querySelector('#root')
-);
-
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
 
+import App from "./components/App";
 
+ReactDOM.render(<App />, document.querySelector("#root"));
diff --git a/src/utils/ImgContext.js b/src/utils/ImgContext.js
index 0f8b865..f5f49c4 100644
--- a/src/utils/ImgContext.js
+++ b/src/utils/ImgContext.js
@@ -3,7 +3,7 @@ const ImgContext = createContext();
 
 const ImgProvider = ({ children }) => {
   const [unsplashImage, setUnsplashImage] = useState();
-    
+
   return (
     <ImgContext.Provider value={{ unsplashImage, setUnsplashImage }}>
       {children}
@@ -11,4 +11,4 @@ const ImgProvider = ({ children }) => {
   );
 };
 
-export {ImgProvider, ImgContext}
\ No newline at end of file
+export { ImgProvider, ImgContext };
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 1dae0fb..474b04c 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -1,41 +1,38 @@
-
-
-import backgroundThemePlaceholder from '../assets/images/background-theme-placeholder.webp'
-import basicThemePlaceholder from '../assets/images/basic-theme-placeholder.webp'
-import modernThemePlaceholder from '../assets/images/modern-theme-placeholder.webp'
-import stylishThemePlaceholder from '../assets/images/stylish-theme-placeholder.webp'
-import outlineThemePlaceholder from '../assets/images/outline-theme-placeholder.webp'
-import previewThemePlaceholder from '../assets/images/preview-theme-placeholder.webp'
-import mobileThemePlaceholder from '../assets/images/mobile-theme-placeholder.webp'
-
+import backgroundThemePlaceholder from "../assets/images/background-theme-placeholder.webp";
+import basicThemePlaceholder from "../assets/images/basic-theme-placeholder.webp";
+import modernThemePlaceholder from "../assets/images/modern-theme-placeholder.webp";
+import stylishThemePlaceholder from "../assets/images/stylish-theme-placeholder.webp";
+import outlineThemePlaceholder from "../assets/images/outline-theme-placeholder.webp";
+import previewThemePlaceholder from "../assets/images/preview-theme-placeholder.webp";
+import mobileThemePlaceholder from "../assets/images/mobile-theme-placeholder.webp";
 
 export const THEMES = [
-    {
-        label: 'background',
-        preview: backgroundThemePlaceholder
-    },
-    {
-        label: 'stylish',
-        preview: stylishThemePlaceholder
-    },
-    {
-        label: 'basic',
-        preview: basicThemePlaceholder
-    },
-    {
-        label: 'modern',
-        preview: modernThemePlaceholder
-    },
-    {
-        label: 'outline',
-        preview: outlineThemePlaceholder
-    },
-    {
-        label: 'preview',
-        preview: previewThemePlaceholder
-    },
-    {
-        label: 'mobile',
-        preview: mobileThemePlaceholder
-    },
-]
\ No newline at end of file
+  {
+    label: "background",
+    preview: backgroundThemePlaceholder,
+  },
+  {
+    label: "stylish",
+    preview: stylishThemePlaceholder,
+  },
+  {
+    label: "basic",
+    preview: basicThemePlaceholder,
+  },
+  {
+    label: "modern",
+    preview: modernThemePlaceholder,
+  },
+  {
+    label: "outline",
+    preview: outlineThemePlaceholder,
+  },
+  {
+    label: "preview",
+    preview: previewThemePlaceholder,
+  },
+  {
+    label: "mobile",
+    preview: mobileThemePlaceholder,
+  },
+];
diff --git a/src/utils/unsplashConfig.js b/src/utils/unsplashConfig.js
index 336e026..e7893cd 100644
--- a/src/utils/unsplashConfig.js
+++ b/src/utils/unsplashConfig.js
@@ -1,8 +1,8 @@
-import { createApi } from 'unsplash-js';
+import { createApi } from "unsplash-js";
 
-const key= process.env.REACT_APP_API_ACCESS_KEY
+const key = process.env.REACT_APP_API_ACCESS_KEY;
 const unsplash = createApi({
-    accessKey: key
+  accessKey: key,
 });
 
-export default unsplash;
\ No newline at end of file
+export default unsplash;
diff --git a/tailwind.config.js b/tailwind.config.js
index 636f5ea..155112f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,14 @@
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
       fontFamily: {
-        Inter: ['Inter', 'sans-serif'],
-        Poppins: ['Poppins', 'sans-serif'],
-        Anek: ['Anek Latin', 'sans-serif'],
-        Nunito: ['Nunito', 'sans-serif']
-
-
-
-      }
+        Inter: ["Inter", "sans-serif"],
+        Poppins: ["Poppins", "sans-serif"],
+        Anek: ["Anek Latin", "sans-serif"],
+        Nunito: ["Nunito", "sans-serif"],
+      },
     },
   },
   plugins: [],
-
-}
+};