diff --git a/docs/Basics/cannyEdgeMask.demo.tsx b/docs/Basics/cannyEdgeMask.demo.tsx
index c27f3885..7d046a0c 100644
--- a/docs/Basics/cannyEdgeMask.demo.tsx
+++ b/docs/Basics/cannyEdgeMask.demo.tsx
@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function maskDemo(image: Image) {
-  let mask = image.grey().cannyEdgeDetector();
+  const mask = image.grey().cannyEdgeDetector();
   return mask;
 }
diff --git a/docs/Basics/image.demo.tsx b/docs/Basics/image.demo.tsx
index d63b3b88..7a35c53b 100644
--- a/docs/Basics/image.demo.tsx
+++ b/docs/Basics/image.demo.tsx
@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function ImageDemo(image: Image) {
-  let mask = image.invert();
+  const mask = image.invert();
   return mask;
 }
diff --git a/docs/Basics/thresholdMask.demo.tsx b/docs/Basics/thresholdMask.demo.tsx
index 8104a08f..0771ac68 100644
--- a/docs/Basics/thresholdMask.demo.tsx
+++ b/docs/Basics/thresholdMask.demo.tsx
@@ -1,6 +1,6 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function maskDemo(image: Image) {
-  let mask = image.grey().threshold();
+  const mask = image.grey().threshold();
   return mask;
 }
diff --git a/docs/Features/Filters/demos/blur.demo.tsx b/docs/Features/Filters/demos/blur.demo.tsx
index a67b57b3..cf843472 100644
--- a/docs/Features/Filters/demos/blur.demo.tsx
+++ b/docs/Features/Filters/demos/blur.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function blur(image: Image) {
   return image.blur({ width: 3, height: 3 });
diff --git a/docs/Features/Filters/demos/derivative.demo.tsx b/docs/Features/Filters/demos/derivative.demo.tsx
index 4d159536..bf0a324e 100644
--- a/docs/Features/Filters/demos/derivative.demo.tsx
+++ b/docs/Features/Filters/demos/derivative.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function derivativeFilter(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Filters/demos/gaussianBlur.demo.tsx b/docs/Features/Filters/demos/gaussianBlur.demo.tsx
index 1e6a40e1..668b8d06 100644
--- a/docs/Features/Filters/demos/gaussianBlur.demo.tsx
+++ b/docs/Features/Filters/demos/gaussianBlur.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function blur(image: Image) {
   return image.gaussianBlur({ sigma: 2 });
diff --git a/docs/Features/Filters/demos/gradient.demo.tsx b/docs/Features/Filters/demos/gradient.demo.tsx
index ce37e258..95b4c17e 100644
--- a/docs/Features/Filters/demos/gradient.demo.tsx
+++ b/docs/Features/Filters/demos/gradient.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function gradientFilter(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Filters/demos/grayscale.demo.tsx b/docs/Features/Filters/demos/grayscale.demo.tsx
index 9413094e..40b43149 100644
--- a/docs/Features/Filters/demos/grayscale.demo.tsx
+++ b/docs/Features/Filters/demos/grayscale.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function grey(image: Image) {
   return image.grey({ algorithm: 'luma601' });
diff --git a/docs/Features/Filters/demos/invert.demo.tsx b/docs/Features/Filters/demos/invert.demo.tsx
index 286c58b9..d50316f2 100644
--- a/docs/Features/Filters/demos/invert.demo.tsx
+++ b/docs/Features/Filters/demos/invert.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function invert(image: Image) {
   return image.invert();
diff --git a/docs/Features/Filters/demos/invert.mask.demo.tsx b/docs/Features/Filters/demos/invert.mask.demo.tsx
index fff69a9b..68307232 100644
--- a/docs/Features/Filters/demos/invert.mask.demo.tsx
+++ b/docs/Features/Filters/demos/invert.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function invert(mask: Mask) {
   return mask.invert();
diff --git a/docs/Features/Filters/demos/level.demo.tsx b/docs/Features/Filters/demos/level.demo.tsx
index 829595e3..8d2631c9 100644
--- a/docs/Features/Filters/demos/level.demo.tsx
+++ b/docs/Features/Filters/demos/level.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function level(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Filters/demos/median.demo.tsx b/docs/Features/Filters/demos/median.demo.tsx
index 40fbc3df..0fe247a1 100644
--- a/docs/Features/Filters/demos/median.demo.tsx
+++ b/docs/Features/Filters/demos/median.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function median(image: Image) {
   return image.medianFilter({ borderType: 'constant', cellSize: 3 });
diff --git a/docs/Features/Filters/demos/pixelate.demo.tsx b/docs/Features/Filters/demos/pixelate.demo.tsx
index 4d386036..5a82c94f 100644
--- a/docs/Features/Filters/demos/pixelate.demo.tsx
+++ b/docs/Features/Filters/demos/pixelate.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function pixelate(image: Image) {
   return image.pixelate({ cellSize: 7 });
diff --git a/docs/Features/Geometry/demos/flip.demo.tsx b/docs/Features/Geometry/demos/flip.demo.tsx
index c40fa711..0cf49a93 100644
--- a/docs/Features/Geometry/demos/flip.demo.tsx
+++ b/docs/Features/Geometry/demos/flip.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function derivativeFilter(image: Image) {
   return image.flip();
diff --git a/docs/Features/Geometry/demos/resize.demo.tsx b/docs/Features/Geometry/demos/resize.demo.tsx
index 1fc8b8ff..d7060bb3 100644
--- a/docs/Features/Geometry/demos/resize.demo.tsx
+++ b/docs/Features/Geometry/demos/resize.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function resize(image: Image) {
   return image.resize({ xFactor: 2 });
diff --git a/docs/Features/Geometry/demos/rotate.demo.tsx b/docs/Features/Geometry/demos/rotate.demo.tsx
index 0b0e3d12..a487707f 100644
--- a/docs/Features/Geometry/demos/rotate.demo.tsx
+++ b/docs/Features/Geometry/demos/rotate.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function resize(image: Image) {
   return image.rotate(90);
diff --git a/docs/Features/Geometry/demos/transform.demo.tsx b/docs/Features/Geometry/demos/transform.demo.tsx
index a319b73e..d22c04db 100644
--- a/docs/Features/Geometry/demos/transform.demo.tsx
+++ b/docs/Features/Geometry/demos/transform.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function transform(image: Image) {
   const imageMatrix = [
diff --git a/docs/Features/Geometry/demos/transformRotate.demo.tsx b/docs/Features/Geometry/demos/transformRotate.demo.tsx
index 07898da0..c43ecf92 100644
--- a/docs/Features/Geometry/demos/transformRotate.demo.tsx
+++ b/docs/Features/Geometry/demos/transformRotate.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function transformRotate(image: Image) {
   return image.transformRotate(25);
diff --git a/docs/Features/Morphology/demos/bottomHat.demo.tsx b/docs/Features/Morphology/demos/bottomHat.demo.tsx
index 2b0ff945..6d5b11a0 100644
--- a/docs/Features/Morphology/demos/bottomHat.demo.tsx
+++ b/docs/Features/Morphology/demos/bottomHat.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function bottomHat(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/bottomHat.mask.demo.tsx b/docs/Features/Morphology/demos/bottomHat.mask.demo.tsx
index a742d752..dd2cc2a3 100644
--- a/docs/Features/Morphology/demos/bottomHat.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/bottomHat.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function bottomHat(mask: Mask) {
   return mask.bottomHat();
diff --git a/docs/Features/Morphology/demos/cannyEdgeDetector.demo.tsx b/docs/Features/Morphology/demos/cannyEdgeDetector.demo.tsx
index 55165099..8fff285c 100644
--- a/docs/Features/Morphology/demos/cannyEdgeDetector.demo.tsx
+++ b/docs/Features/Morphology/demos/cannyEdgeDetector.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function cannyEdgeDetector(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/cannyEdgeDetector.mask.demo.tsx b/docs/Features/Morphology/demos/cannyEdgeDetector.mask.demo.tsx
index 1f285e4a..d0deb6ba 100644
--- a/docs/Features/Morphology/demos/cannyEdgeDetector.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/cannyEdgeDetector.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function cannyEdgeDetector(mask: Mask) {
   return mask.morphologicalGradient();
diff --git a/docs/Features/Morphology/demos/close.demo.tsx b/docs/Features/Morphology/demos/close.demo.tsx
index d05ecada..f0257781 100644
--- a/docs/Features/Morphology/demos/close.demo.tsx
+++ b/docs/Features/Morphology/demos/close.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function close(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/close.mask.demo.tsx b/docs/Features/Morphology/demos/close.mask.demo.tsx
index 0340c602..0303de6f 100644
--- a/docs/Features/Morphology/demos/close.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/close.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function close(mask: Mask) {
   return mask.close();
diff --git a/docs/Features/Morphology/demos/dilate.demo.tsx b/docs/Features/Morphology/demos/dilate.demo.tsx
index f6a3a6dd..decc2c2c 100644
--- a/docs/Features/Morphology/demos/dilate.demo.tsx
+++ b/docs/Features/Morphology/demos/dilate.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function dilate(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/dilate.mask.demo.tsx b/docs/Features/Morphology/demos/dilate.mask.demo.tsx
index 580e335f..e32a8a4e 100644
--- a/docs/Features/Morphology/demos/dilate.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/dilate.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function dilate(mask: Mask) {
   return mask.dilate();
diff --git a/docs/Features/Morphology/demos/erode.demo.tsx b/docs/Features/Morphology/demos/erode.demo.tsx
index b8875759..5095c3ff 100644
--- a/docs/Features/Morphology/demos/erode.demo.tsx
+++ b/docs/Features/Morphology/demos/erode.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function erode(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/erode.mask.demo.tsx b/docs/Features/Morphology/demos/erode.mask.demo.tsx
index e9124d56..d3bfaa50 100644
--- a/docs/Features/Morphology/demos/erode.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/erode.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function erode(mask: Mask) {
   return mask.erode();
diff --git a/docs/Features/Morphology/demos/morphologicalGradient.demo.tsx b/docs/Features/Morphology/demos/morphologicalGradient.demo.tsx
index da84f1bf..8e576e25 100644
--- a/docs/Features/Morphology/demos/morphologicalGradient.demo.tsx
+++ b/docs/Features/Morphology/demos/morphologicalGradient.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function morphologicalGradient(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/morphologicalGradient.mask.demo.tsx b/docs/Features/Morphology/demos/morphologicalGradient.mask.demo.tsx
index db7c8d07..aeacc96d 100644
--- a/docs/Features/Morphology/demos/morphologicalGradient.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/morphologicalGradient.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function morphologicalGradient(mask: Mask) {
   return mask.morphologicalGradient();
diff --git a/docs/Features/Morphology/demos/open.demo.tsx b/docs/Features/Morphology/demos/open.demo.tsx
index b642cb42..1e827360 100644
--- a/docs/Features/Morphology/demos/open.demo.tsx
+++ b/docs/Features/Morphology/demos/open.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function open(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/open.mask.demo.tsx b/docs/Features/Morphology/demos/open.mask.demo.tsx
index fab47f83..edbb3149 100644
--- a/docs/Features/Morphology/demos/open.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/open.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function open(mask: Mask) {
   return mask.open();
diff --git a/docs/Features/Morphology/demos/topHat.demo.tsx b/docs/Features/Morphology/demos/topHat.demo.tsx
index 83cfc4e7..abc595af 100644
--- a/docs/Features/Morphology/demos/topHat.demo.tsx
+++ b/docs/Features/Morphology/demos/topHat.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function topHat(image: Image) {
   image = image.grey();
diff --git a/docs/Features/Morphology/demos/topHat.mask.demo.tsx b/docs/Features/Morphology/demos/topHat.mask.demo.tsx
index 7c0fbb49..df067288 100644
--- a/docs/Features/Morphology/demos/topHat.mask.demo.tsx
+++ b/docs/Features/Morphology/demos/topHat.mask.demo.tsx
@@ -1,4 +1,4 @@
-import { Mask } from 'image-js';
+import type { Mask } from 'image-js';
 
 export default function topHat(mask: Mask) {
   return mask.topHat();
diff --git a/docs/Features/Operations/demos/threshold.demo.tsx b/docs/Features/Operations/demos/threshold.demo.tsx
index 2cfac300..5fc358f2 100644
--- a/docs/Features/Operations/demos/threshold.demo.tsx
+++ b/docs/Features/Operations/demos/threshold.demo.tsx
@@ -1,4 +1,4 @@
-import { Image } from 'image-js';
+import type { Image } from 'image-js';
 
 export default function threshold(image: Image) {
   image = image.grey();
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4f6fdb7f..cf92a775 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -44,7 +44,7 @@ async function createConfig() {
   return {
     title: 'ImageJS',
     tagline: 'Advanced image processing and manipulation in JavaScript.',
-    favicon: 'img/favicon.ico',
+    favicon: 'img/image-js-favicon.svg',
 
     // Set the production url of your site here
     url: 'https://image-js-docs.pages.dev/',
@@ -123,11 +123,12 @@ async function createConfig() {
       ({
         // Replace with your project's social card
         image: 'img/docusaurus-social-card.jpg',
+        colorMode: {},
         navbar: {
           title: 'ImageJS',
           logo: {
             alt: 'ImageJS',
-            src: 'img/logo.svg',
+            src: 'img/image-js-favicon.svg',
           },
           items: [
             {
diff --git a/package.json b/package.json
index 11e347b4..142b24bd 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
     "cspell": "cspell lint \"**/*.md\"",
-    "eslint": "eslint --cache ./src",
+    "eslint": "eslint --cache ./src ./docs",
     "eslint-fix": "npm run eslint -- --fix",
     "prettier": "prettier --check ./",
     "prettier-write": "prettier --write ./",
diff --git a/src/css/custom.css b/src/css/custom.css
index d0e051d6..a7cb68b1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,26 +6,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #1d4ed8;
+  --ifm-color-primary-dark: #1e40af;
+  --ifm-color-primary-darker: #1e3a8a;
+  --ifm-color-primary-darkest: #172554;
+  --ifm-color-primary-light: #2563eb;
+  --ifm-color-primary-lighter: #3b82f6;
+  --ifm-color-primary-lightest: #60a5fa;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #0891b2;
+  --ifm-color-primary-dark: #0e7490;
+  --ifm-color-primary-darker: #155e75;
+  --ifm-color-primary-darkest: #083344;
+  --ifm-color-primary-light: #06b6d4;
+  --ifm-color-primary-lighter: #22d3ee;
+  --ifm-color-primary-lightest: #67e8f9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 #frontPage {
diff --git a/src/demo/components/ImageDemo.tsx b/src/demo/components/ImageDemo.tsx
index b939db7a..35b6b790 100644
--- a/src/demo/components/ImageDemo.tsx
+++ b/src/demo/components/ImageDemo.tsx
@@ -34,7 +34,7 @@ export default function ImageDemo({
     >
       <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
         <div
-          className="filter-demo alert--success"
+          className="filter-demo alert--info"
           style={{
             margin: 4,
             borderRadius: 4,
diff --git a/src/demo/contexts/demo/demoReducer.ts b/src/demo/contexts/demo/demoReducer.ts
index fc1df657..01199151 100644
--- a/src/demo/contexts/demo/demoReducer.ts
+++ b/src/demo/contexts/demo/demoReducer.ts
@@ -88,7 +88,7 @@ function getInitialState(initial: DemoInitialConfig): DemoState {
   return {
     selectedImage: null,
     selectedDevice: null,
-    addon: null,
+    addon: 'code',
     code: initial.initialCode,
     noAutoRun: initial.noAutoRun || false,
     name: initial.name,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bf1a1c6b..a9b05654 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -14,7 +14,12 @@ function HomepageHeader() {
       className={clsx('hero hero--primary', styles.heroBanner)}
     >
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <img
+          alt="image-js logo"
+          src="/img/image-js.svg"
+          width={200}
+          height={200}
+        />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <p className="frontPage__text">
           ImageJS is a JavaScript library designed to facilitate image
diff --git a/static/img/image-js-favicon.svg b/static/img/image-js-favicon.svg
new file mode 100644
index 00000000..5eb4ec38
--- /dev/null
+++ b/static/img/image-js-favicon.svg
@@ -0,0 +1,19 @@
+<svg width="420" height="420" viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="420" height="420" fill="white"/>
+<rect x="320" y="20" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="220" y="120" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="320" y="220" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="320" y="320" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="220" y="20" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="220" y="320" width="80" height="80" rx="2" fill="#FFE40F"/>
+<rect x="120" y="120" width="80" height="80" rx="2" fill="#2762BA"/>
+<rect x="120" y="220" width="80" height="80" rx="2" fill="#2762BA"/>
+<rect x="120" y="320" width="80" height="80" rx="2" fill="#2762BA"/>
+<rect x="120" y="20" width="80" height="80" rx="2" fill="#2762BA"/>
+<rect x="20" y="320" width="80" height="80" rx="2" fill="#2762BA"/>
+<path d="M285.904 276.856C285.904 279.8 285.488 282.488 284.656 284.92C283.824 287.288 282.352 289.336 280.24 291.064C278.192 292.728 275.344 294.04 271.696 295C268.048 295.96 263.408 296.44 257.776 296.44C252.208 296.44 247.6 295.96 243.952 295C240.368 294.04 237.52 292.728 235.408 291.064C233.36 289.336 231.92 287.288 231.088 284.92C230.32 282.488 229.936 279.8 229.936 276.856V261.304C229.936 260.088 230.192 259.224 230.704 258.712C231.28 258.136 232.176 257.848 233.392 257.848H247.312C248.528 257.848 249.392 258.136 249.904 258.712C250.48 259.224 250.768 260.088 250.768 261.304V273.016C250.768 274.296 251.152 275.384 251.92 276.28C252.752 277.112 254.64 277.528 257.584 277.528C260.336 277.528 262.064 277.112 262.768 276.28C263.536 275.384 263.92 274.296 263.92 273.016V229.336C263.92 228.12 264.176 227.256 264.688 226.744C265.264 226.168 266.16 225.88 267.376 225.88H282.448C283.664 225.88 284.528 226.168 285.04 226.744C285.616 227.256 285.904 228.12 285.904 229.336V276.856Z" fill="black"/>
+<path d="M366.688 195H336.352C335.136 195 334.24 194.744 333.664 194.232C333.152 193.656 332.896 192.76 332.896 191.544V180.312C332.896 179.096 333.152 178.232 333.664 177.72C334.24 177.144 335.136 176.856 336.352 176.856H362.176C363.008 176.856 363.616 176.6 364 176.088C364.448 175.512 364.672 174.84 364.672 174.072C364.672 172.984 364.448 172.184 364 171.672C363.616 171.16 363.008 170.872 362.176 170.808L347.776 168.792C343.296 168.152 339.68 166.68 336.928 164.376C334.24 162.072 332.896 158.232 332.896 152.856V142.776C332.896 137.336 334.656 133.176 338.176 130.296C341.696 127.352 346.56 125.88 352.768 125.88H379.648C380.864 125.88 381.728 126.168 382.24 126.744C382.816 127.256 383.104 128.12 383.104 129.336V140.76C383.104 141.976 382.816 142.872 382.24 143.448C381.728 143.96 380.864 144.216 379.648 144.216H357.28C356.448 144.216 355.808 144.504 355.36 145.08C354.912 145.592 354.688 146.264 354.688 147.096C354.688 147.928 354.912 148.632 355.36 149.208C355.808 149.784 356.448 150.104 357.28 150.168L371.584 152.088C376.064 152.728 379.68 154.2 382.432 156.504C385.184 158.808 386.56 162.648 386.56 168.024V178.104C386.56 183.544 384.768 187.736 381.184 190.68C377.664 193.56 372.832 195 366.688 195Z" fill="black"/>
+<path d="M38.544 95C37.328 95 36.432 94.744 35.856 94.232C35.344 93.656 35.088 92.76 35.088 91.544V80.12C35.088 78.904 35.344 78.04 35.856 77.528C36.432 76.952 37.328 76.664 38.544 76.664H48.048L48.048 44.408H38.544C37.328 44.408 36.432 44.152 35.856 43.64C35.344 43.064 35.088 42.168 35.088 40.952V29.336C35.088 28.12 35.344 27.256 35.856 26.744C36.432 26.168 37.328 25.88 38.544 25.88L79.44 25.88C80.656 25.88 81.52 26.168 82.032 26.744C82.608 27.256 82.896 28.12 82.896 29.336V40.952C82.896 42.168 82.608 43.064 82.032 43.64C81.52 44.152 80.656 44.408 79.44 44.408H70.128L70.128 76.664L79.44 76.664C80.656 76.664 81.52 76.952 82.032 77.528C82.608 78.04 82.896 78.904 82.896 80.12V91.544C82.896 92.76 82.608 93.656 82.032 94.232C81.52 94.744 80.656 95 79.44 95L38.544 95Z" fill="black"/>
+<path d="M43.384 195H29.08C27.864 195 26.968 194.744 26.392 194.232C25.88 193.656 25.624 192.76 25.624 191.544L25.624 129.336C25.624 128.12 25.88 127.256 26.392 126.744C26.968 126.168 27.864 125.88 29.08 125.88H44.536C45.56 125.88 46.392 126.104 47.032 126.552C47.736 127 48.376 127.736 48.952 128.76L57.592 144.408C57.912 144.984 58.168 145.4 58.36 145.656C58.616 145.912 58.936 146.04 59.32 146.04H60.184C60.568 146.04 60.856 145.912 61.048 145.656C61.304 145.4 61.592 144.984 61.912 144.408L70.456 128.76C71.032 127.736 71.64 127 72.28 126.552C72.984 126.104 73.848 125.88 74.872 125.88H90.424C91.64 125.88 92.504 126.168 93.016 126.744C93.592 127.256 93.88 128.12 93.88 129.336L93.88 191.544C93.88 192.76 93.592 193.656 93.016 194.232C92.504 194.744 91.64 195 90.424 195H75.64C74.424 195 73.528 194.744 72.952 194.232C72.44 193.656 72.184 192.76 72.184 191.544L72.184 157.752L66.52 168.216C65.944 169.304 65.24 170.104 64.408 170.616C63.64 171.064 62.648 171.288 61.432 171.288H57.592C56.376 171.288 55.352 171.064 54.52 170.616C53.752 170.104 53.08 169.304 52.504 168.216L46.84 157.752L46.84 191.544C46.84 192.76 46.552 193.656 45.976 194.232C45.464 194.744 44.6 195 43.384 195Z" fill="black"/>
+<path d="M85.424 295H55.184C47.184 295 41.232 293.4 37.328 290.2C33.488 287 31.568 282.072 31.568 275.416L31.568 245.464C31.568 238.808 33.488 233.88 37.328 230.68C41.232 227.48 47.184 225.88 55.184 225.88H79.184C80.4 225.88 81.264 226.168 81.776 226.744C82.352 227.256 82.64 228.12 82.64 229.336V240.952C82.64 242.168 82.352 243.064 81.776 243.64C81.264 244.152 80.4 244.408 79.184 244.408H59.216C57.232 244.408 55.76 244.824 54.8 245.656C53.84 246.424 53.36 247.608 53.36 249.208L53.36 272.152C53.36 273.752 53.712 274.936 54.416 275.704C55.184 276.472 56.304 276.856 57.776 276.856H67.088L67.088 261.88C67.088 260.664 67.344 259.8 67.856 259.288C68.432 258.712 69.328 258.424 70.544 258.424H85.424C86.64 258.424 87.504 258.712 88.016 259.288C88.592 259.8 88.88 260.664 88.88 261.88L88.88 291.544C88.88 292.76 88.592 293.656 88.016 294.232C87.504 294.744 86.64 295 85.424 295Z" fill="black"/>
+</svg>
diff --git a/static/img/image-js.svg b/static/img/image-js.svg
new file mode 100644
index 00000000..84177b48
--- /dev/null
+++ b/static/img/image-js.svg
@@ -0,0 +1,17 @@
+<svg width="460" height="460" viewBox="0 0 460 460" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="460" height="460" fill="white"/>
+<rect x="345" y="45" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="245" y="145" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="345" y="245" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="345" y="345" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="245" y="45" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="245" y="345" width="70" height="70" rx="2" fill="#FFE40F"/>
+<rect x="145" y="145" width="70" height="70" rx="2" fill="#2762BA"/>
+<rect x="145" y="245" width="70" height="70" rx="2" fill="#2762BA"/>
+<rect x="145" y="345" width="70" height="70" rx="2" fill="#2762BA"/>
+<rect x="145" y="45" width="70" height="70" rx="2" fill="#2762BA"/>
+<rect x="45" y="345" width="70" height="70" rx="2" fill="#2762BA"/>
+<path d="M106 309.592C106 310.504 105.808 311.176 105.424 311.608C104.992 311.992 104.32 312.184 103.408 312.184L94.84 312.184C93.928 312.184 93.28 311.992 92.896 311.608C92.464 311.176 92.248 310.504 92.248 309.592L92.248 302.464L68.056 302.464L68.056 309.592C68.056 310.504 67.864 311.176 67.48 311.608C67.048 311.992 66.376 312.184 65.464 312.184L56.752 312.184C55.84 312.184 55.192 311.992 54.808 311.608C54.376 311.176 54.16 310.504 54.16 309.592L54.16 278.92C54.16 278.008 54.376 277.36 54.808 276.976C55.192 276.544 55.84 276.328 56.752 276.328L65.464 276.328C66.376 276.328 67.048 276.544 67.48 276.976C67.864 277.36 68.056 278.008 68.056 278.92L68.056 285.904L92.248 285.904L92.248 278.92C92.248 278.008 92.464 277.36 92.896 276.976C93.28 276.544 93.928 276.328 94.84 276.328L103.408 276.328C104.32 276.328 104.992 276.544 105.424 276.976C105.808 277.36 106 278.008 106 278.92L106 309.592ZM106 249.798L106 260.526C106 261.438 105.808 262.11 105.424 262.542C104.992 262.926 104.32 263.118 103.408 263.118L56.752 263.118C55.84 263.118 55.192 262.926 54.808 262.542C54.376 262.11 54.16 261.438 54.16 260.526L54.16 248.934C54.16 248.166 54.328 247.542 54.664 247.062C55 246.534 55.552 246.054 56.32 245.622L68.056 239.142C68.488 238.902 68.8 238.71 68.992 238.566C69.184 238.374 69.28 238.134 69.28 237.846L69.28 237.198C69.28 236.91 69.184 236.694 68.992 236.55C68.8 236.358 68.488 236.142 68.056 235.902L56.32 229.494C55.552 229.062 55 228.606 54.664 228.126C54.328 227.598 54.16 226.95 54.16 226.182L54.16 214.518C54.16 213.606 54.376 212.958 54.808 212.574C55.192 212.142 55.84 211.926 56.752 211.926L103.408 211.926C104.32 211.926 104.992 212.142 105.424 212.574C105.808 212.958 106 213.606 106 214.518L106 225.606C106 226.518 105.808 227.19 105.424 227.622C104.992 228.006 104.32 228.198 103.408 228.198L78.064 228.198L85.912 232.446C86.728 232.878 87.328 233.406 87.712 234.03C88.048 234.606 88.216 235.35 88.216 236.262L88.216 239.142C88.216 240.054 88.048 240.822 87.712 241.446C87.328 242.022 86.728 242.526 85.912 242.958L78.064 247.206L103.408 247.206C104.32 247.206 104.992 247.422 105.424 247.854C105.808 248.238 106 248.886 106 249.798ZM69.28 178.905L80.224 182.289L80.224 170.985L69.28 174.369C68.848 174.561 68.536 174.777 68.344 175.017C68.152 175.209 68.056 175.449 68.056 175.737L68.056 177.537C68.056 177.825 68.152 178.089 68.344 178.329C68.536 178.521 68.848 178.713 69.28 178.905ZM103.408 183.009C104.32 183.009 104.992 183.225 105.424 183.657C105.808 184.041 106 184.689 106 185.601L106 196.185C106 197.097 105.808 197.769 105.424 198.201C104.992 198.585 104.32 198.777 103.408 198.777L84.4 198.777C82.96 198.777 81.304 198.561 79.432 198.129C77.56 197.649 75.376 196.929 72.88 195.969L56.536 189.705C55.72 189.417 55.12 188.985 54.736 188.409C54.352 187.785 54.16 186.993 54.16 186.033L54.16 166.665C54.16 165.753 54.352 165.009 54.736 164.433C55.12 163.809 55.72 163.353 56.536 163.065L72.88 156.801C75.376 155.841 77.56 155.145 79.432 154.713C81.304 154.233 82.96 153.993 84.4 153.993L103.408 153.993C104.32 153.993 104.992 154.209 105.424 154.641C105.808 155.025 106 155.673 106 156.585L106 167.457C106 168.417 105.808 169.137 105.424 169.617C104.992 170.049 104.32 170.265 103.408 170.265L93.328 170.265L93.328 183.009L103.408 183.009ZM106 101.183L106 123.863C106 129.863 104.8 134.327 102.4 137.255C100 140.135 96.304 141.575 91.312 141.575L68.848 141.575C63.856 141.575 60.16 140.135 57.76 137.255C55.36 134.327 54.16 129.863 54.16 123.863L54.16 105.863C54.16 104.951 54.376 104.303 54.808 103.919C55.192 103.487 55.84 103.271 56.752 103.271L65.464 103.271C66.376 103.271 67.048 103.487 67.48 103.919C67.864 104.303 68.056 104.951 68.056 105.863L68.056 120.839C68.056 122.327 68.368 123.431 68.992 124.151C69.568 124.871 70.456 125.231 71.656 125.231L88.864 125.231C90.064 125.231 90.952 124.967 91.528 124.439C92.104 123.863 92.392 123.023 92.392 121.919L92.392 114.935L81.16 114.935C80.248 114.935 79.6 114.743 79.216 114.359C78.784 113.927 78.568 113.255 78.568 112.343L78.568 101.183C78.568 100.271 78.784 99.6229 79.216 99.2389C79.6 98.8069 80.248 98.5909 81.16 98.5909L103.408 98.5909C104.32 98.5909 104.992 98.8069 105.424 99.2389C105.808 99.6229 106 100.271 106 101.183ZM106 49.4864L106 82.8944C106 83.8064 105.808 84.4784 105.424 84.9104C104.992 85.2944 104.32 85.4864 103.408 85.4864L56.752 85.4864C55.84 85.4864 55.192 85.2944 54.808 84.9104C54.376 84.4784 54.16 83.8064 54.16 82.8944L54.16 49.4864C54.16 48.5744 54.376 47.9264 54.808 47.5424C55.192 47.1104 55.84 46.8944 56.752 46.8944L65.176 46.8944C66.088 46.8944 66.76 47.1104 67.192 47.5424C67.576 47.9264 67.768 48.5744 67.768 49.4864L67.768 69.3584L73.312 69.3584L73.312 55.3184C73.312 54.4064 73.528 53.7584 73.96 53.3744C74.344 52.9424 74.992 52.7264 75.904 52.7264L83.608 52.7264C84.52 52.7264 85.192 52.9424 85.624 53.3744C86.008 53.7584 86.2 54.4064 86.2 55.3184L86.2 69.3584L92.392 69.3584L92.392 49.4864C92.392 48.5744 92.608 47.9264 93.04 47.5424C93.424 47.1104 94.072 46.8944 94.984 46.8944L103.408 46.8944C104.32 46.8944 104.992 47.1104 105.424 47.5424C105.808 47.9264 106 48.5744 106 49.4864Z" fill="black"/>
+<path d="M302.168 294.502C302.168 297.017 301.813 299.313 301.102 301.39C300.391 303.413 299.134 305.162 297.33 306.638C295.581 308.059 293.148 309.18 290.032 310C286.916 310.82 282.953 311.23 278.142 311.23C273.386 311.23 269.45 310.82 266.334 310C263.273 309.18 260.84 308.059 259.036 306.638C257.287 305.162 256.057 303.413 255.346 301.39C254.69 299.313 254.362 297.017 254.362 294.502V281.218C254.362 280.179 254.581 279.441 255.018 279.004C255.51 278.512 256.275 278.266 257.314 278.266H269.204C270.243 278.266 270.981 278.512 271.418 279.004C271.91 279.441 272.156 280.179 272.156 281.218V291.222C272.156 292.315 272.484 293.245 273.14 294.01C273.851 294.721 275.463 295.076 277.978 295.076C280.329 295.076 281.805 294.721 282.406 294.01C283.062 293.245 283.39 292.315 283.39 291.222V253.912C283.39 252.873 283.609 252.135 284.046 251.698C284.538 251.206 285.303 250.96 286.342 250.96H299.216C300.255 250.96 300.993 251.206 301.43 251.698C301.922 252.135 302.168 252.873 302.168 253.912V294.502Z" fill="black"/>
+<path d="M386.046 210H360.134C359.095 210 358.33 209.781 357.838 209.344C357.401 208.852 357.182 208.087 357.182 207.048V197.454C357.182 196.415 357.401 195.677 357.838 195.24C358.33 194.748 359.095 194.502 360.134 194.502H382.192C382.903 194.502 383.422 194.283 383.75 193.846C384.133 193.354 384.324 192.78 384.324 192.124C384.324 191.195 384.133 190.511 383.75 190.074C383.422 189.637 382.903 189.391 382.192 189.336L369.892 187.614C366.065 187.067 362.977 185.81 360.626 183.842C358.33 181.874 357.182 178.594 357.182 174.002V165.392C357.182 160.745 358.685 157.192 361.692 154.732C364.699 152.217 368.853 150.96 374.156 150.96H397.116C398.155 150.96 398.893 151.206 399.33 151.698C399.822 152.135 400.068 152.873 400.068 153.912V163.67C400.068 164.709 399.822 165.474 399.33 165.966C398.893 166.403 398.155 166.622 397.116 166.622H378.01C377.299 166.622 376.753 166.868 376.37 167.36C375.987 167.797 375.796 168.371 375.796 169.082C375.796 169.793 375.987 170.394 376.37 170.886C376.753 171.378 377.299 171.651 378.01 171.706L390.228 173.346C394.055 173.893 397.143 175.15 399.494 177.118C401.845 179.086 403.02 182.366 403.02 186.958V195.568C403.02 200.215 401.489 203.795 398.428 206.31C395.421 208.77 391.294 210 386.046 210Z" fill="black"/>
+</svg>