diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0933bc9..25b4f40 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,10 +10,13 @@
       "dependencies": {
         "sortablejs": "^1.15.6",
         "sortablejs-vue3": "^1.3.0",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-toggles": "^2.2.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.3",
+        "sass": "^1.92.0",
+        "sass-loader": "^16.0.5",
         "vite": "^3.0.7"
       }
     },
@@ -103,6 +106,316 @@
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -217,12 +530,56 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -619,6 +976,20 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -657,6 +1028,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -673,6 +1051,42 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.18",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
@@ -682,6 +1096,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -700,6 +1129,21 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -713,6 +1157,20 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -741,6 +1199,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -778,6 +1250,68 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.92.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.0.tgz",
+      "integrity": "sha512-KDNI0BxgIRDAfJgzNm5wuy+4yOCIZyrUbjSpiU/JItfih+KGXAVefKL53MTml054MmBA3DDKIBMSI/7XLxZJ3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.5.tgz",
+      "integrity": "sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sortablejs": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
@@ -824,6 +1358,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/vite": {
       "version": "3.2.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.11.tgz",
@@ -894,6 +1442,15 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-toggles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-toggles/-/vue-toggles-2.2.1.tgz",
+      "integrity": "sha512-6KTLk44SksHAuMEIVrNR2foZ8nBxny245D4PW56SwB1ZG4BtA7vpx6j5QBwynuDObSawsrA+kPx6ioCly/Z9eQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.5.13"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index c03649d..09cbf97 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,10 +11,13 @@
   "dependencies": {
     "sortablejs": "^1.15.6",
     "sortablejs-vue3": "^1.3.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-toggles": "^2.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
+    "sass": "^1.92.0",
+    "sass-loader": "^16.0.5",
     "vite": "^3.0.7"
   }
 }
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index e79e42f..5087e33 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-91459b66ec08e5e074e66a71f077b53b
\ No newline at end of file
+9e76917a1f4070f8e81187964374d12e
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6a6bb1d..cf40d55 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,9 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { OpenImageFile, SaveImageFile, ApplyEffects } from '../wailsjs/go/main/App'
 import { Sortable } from 'sortablejs-vue3'
+import VueToggles from 'vue-toggles'
+import logo from './assets/images/logo.svg'
 
 const source = ref(null)
 const type = ref(null)
@@ -9,8 +11,8 @@ const result = ref(null)
 const effects = ref([])
 const resultLoading = ref(false)
 
-const makeSetting = (value, min, max, step) => {
-  return {value, min, max, step}
+const makeSetting = (label, value, min, max, step) => {
+  return {label, value, min, max, step}
 }
 
 const openImageFile = () => {
@@ -25,47 +27,80 @@ const openImageFile = () => {
 
     effects.value = [
       {
-        name: "Crop",
+        label: "Crop",
+        name: "crop",
         enabled: false,
         settings: {
-          width: makeSetting(info.width, 0, info.width, 1),
-          height: makeSetting(info.height, 0, info.height, 1)
+          x0: makeSetting("Top left X", 0, 0, info.width-1, 1),
+          y0: makeSetting("Top left Y", 0, 0, info.height-1, 1),
+          x1: makeSetting("Bottom right X", 0, 0, info.width, 1),
+          y1: makeSetting("Bottom right left Y", 0, 0, info.height, 1),
         }
       },
       {
-        name: "Resize",
+        label: "Crop center",
+        name: "crop-center",
         enabled: false,
         settings: {
-          width: makeSetting(info.width, 1, info.width, 1),
-          height: makeSetting(info.height, 1, info.height, 1)
+          width: makeSetting("Width", info.width, 0, info.width, 1),
+          height: makeSetting("Height", info.height, 0, info.height, 1)
         }
       },
       {
-        name: "Brightness",
+        label: "Scale width",
+        name: "scale-width",
         enabled: false,
         settings: {
-          value: makeSetting(0, -100, 100, 1),
+          value: makeSetting("Value", info.width, 1, info.width, 1),
         }
       },
       {
-        name: "Contrast",
+        label: "Scale height",
+        name: "scale-height",
         enabled: false,
         settings: {
-          value: makeSetting(0, -100, 100, 1),
+          value: makeSetting("Value", info.height, 1, info.height, 1),
         }
       },
       {
-        name: "Saturation",
+        label: "Resize",
+        name: "resize",
         enabled: false,
         settings: {
-          value: makeSetting(0, -100, 100, 1),
+          width: makeSetting("Width",info.width, 1, info.width, 1),
+          height: makeSetting("Height", info.height, 1, info.height, 1)
         }
       },
       {
-        name: "Blur",
+        label: "Brightness",
+        name: "brightness",
         enabled: false,
         settings: {
-          value: makeSetting(0, 0, 50, 0.1),
+          value: makeSetting("Value", 0, -100, 100, 1),
+        }
+      },
+      {
+        label: "Contrast",
+        name: "contrast",
+        enabled: false,
+        settings: {
+          value: makeSetting("Value", 0, -100, 100, 1),
+        }
+      },
+      {
+        label: "Saturation",
+        name: "saturation",
+        enabled: false,
+        settings: {
+          value: makeSetting("Value", 0, -100, 100, 1),
+        }
+      },
+      {
+        label: "Blur",
+        name: "blur",
+        enabled: false,
+        settings: {
+          value: makeSetting("Value", 0, 0, 50, 0.1),
         }
       },
     ]
@@ -85,8 +120,6 @@ const sortEnd = (event) => {
 const appliedEffects = () => {
   const result = []
 
-  console.log(effects.value)
-
   effects.value.forEach((effect) => {
     if (!effect.enabled) {
       return
@@ -103,8 +136,6 @@ const appliedEffects = () => {
 
     result.push(item)
   })
-  
-  console.log(result)
 
   return result
 }
@@ -123,12 +154,21 @@ const applyEffects = () => {
   })
 }
 
+const makeRenderStyle = () => {
+  return {
+    'align-items': source.value !== null ? 'top' : 'center'
+  }
+}
+
 const makeImageSrc = (data) => {
   return `data:image/${data.type};base64, ${data.base64}`
 }
+
+onMounted(openImageFile)
 </script>
 
 <template>
+  <img v-if="source" :src="logo" id="logo-top">
   <div id="wrapper">
     <div v-if="source !== null" id="effects">
       <Sortable
@@ -144,12 +184,12 @@ const makeImageSrc = (data) => {
             <div class="effect-move">
               ↕
             </div>
-            <div class="effect-name">
-              <input type="checkbox" :id="'effect' + index" v-model="element.enabled">
-              <label :for="'effect' + index">{{ element.name }}</label>
+            <div class="effect-name" @click="element.enabled = !element.enabled">
+              <VueToggles :value="element.enabled" :width="40" />
+              {{ element.label }}
             </div>
             <div class="effect-settings" v-if="element.enabled">
-              <div v-for="setting, name in element.settings" :key="name" class="effect-setting">
+              <div v-for="setting in element.settings" :key="setting.name" class="effect-setting">
                 <input
                   type="range"
                   :min="setting.min"
@@ -163,23 +203,33 @@ const makeImageSrc = (data) => {
                   :max="setting.max"
                   v-model="setting.value"
                 >
-                {{ name }}
+                {{ setting.label }}
               </div>
             </div>
           </div>
         </template>
       </Sortable>
-      <button @click="applyEffects" :disabled="resultLoading">
-        <template v-if="resultLoading">
-          Loading...
-        </template>
-        <template v-else>
-          Apply
-        </template>
-      </button>
+      <div class="text-center">
+        <button @click="applyEffects" :disabled="resultLoading">
+          <template v-if="resultLoading">
+            Loading...
+          </template>
+          <template v-else>
+            Apply
+          </template>
+        </button>
+      </div>
     </div>
     <div id="render">
       <div class="split">
+        <div class="text-center">
+          <div>
+            <img v-if="!source" :src="logo" id="logo-split">
+          </div>
+
+          <button @click="openImageFile">Choose a file</button>
+        </div>
+
         <div v-if="source">
           <div class="img-wrapper">
             <img :src="makeImageSrc(source)">
@@ -196,49 +246,51 @@ const makeImageSrc = (data) => {
             </div>
           </div>
         </div>
-
-        <button @click="openImageFile">Choose a file</button>
       </div>
       <div class="split" v-if="result">
-        <div>
-          <div class="img-wrapper">
-            <img :src="makeImageSrc(result)">
-          </div>
-
-          <div class="info">
-            <div>
-              <strong>Width</strong>
-              {{ result.width }}
-            </div>
-            <div>
-              <strong>Height</strong>
-              {{ result.height }}
-            </div>
-          </div>
-
+        <div class="text-center">
           <button @click="saveImageFile">Save</button>
         </div>
+
+        <div class="img-wrapper">
+          <img :src="makeImageSrc(result)">
+        </div>
+
+        <div class="info">
+          <div>
+            <strong>Width</strong>
+            {{ result.width }}
+          </div>
+          <div>
+            <strong>Height</strong>
+            {{ result.height }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style>
+<style lang="scss">
+.text-center {
+  text-align: center;
+}
+
 #wrapper {
   margin: 20px;
   padding: 10px;
+  height: calc(100vh - 120px);
   border-radius: 10px;
-  background: #ffffff22;
+  background: #33333322;
   display: flex;
   justify-content: space-around;
 }
 
 #render {
   width: 100%;
-  min-height: 400px;
   display: flex;
   justify-content: space-around;
-  align-items: center;
+  align-items: top;
 }
 
 #effects + #render {
@@ -248,54 +300,82 @@ const makeImageSrc = (data) => {
 #effects {
   border-radius: 10px;
   padding-bottom: 20px;
+  height: calc(100vh - 140px);
+  overflow: auto;
   width: 400px;
   background: #ffffff33;
-}
 
-#effects button {
-  margin-top: 20px;
+  button {
+    margin-top: 20px;
+  }
 }
 
 .effect {
   padding: 20px;
   text-align: left;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #999;
+
+  &-move {
+    cursor: pointer;
+    float: right;
+    display: inline-block;
+    background: #ffffff33;
+    padding: 3px;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 2px;
+
+    &:hover {
+      background: #ffffff99;
+    }
+  }
+
+  &-name {
+    display: flex;
+    gap: 10px;
+    font-weight: bold;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &-setting {
+    padding: 5px 0;
+
+    input {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
 }
 
-.effect-move {
-  cursor: pointer;
-  float: right;
-  display: inline-block;
-  background: #ffffff33;
-  padding: 3px;
+#logo-top {
+  margin-left: 20px;
+  margin-top: 20px;
+  height: 30px;
 }
 
-.effect-name {
-  font-weight: bold;
-}
-
-.effect-name input {
-  margin-right: 8px;
-}
-
-.effect-setting {
-  padding: 5px 0;
-}
-
-.effect-setting input {
-  vertical-align: middle;
-  margin-right: 8px;
+#logo-split {
+  margin-top: 20vh;
+  margin-bottom: 50px;
 }
 
 .split {
   width: 40%;
-}
 
-.split img {
-  max-width: 100%;
-  max-height: 70vh;
-  margin: 0;
-  padding: 0;
+  button {
+    margin-bottom: 20px;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 70vh;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .img-wrapper {
@@ -303,6 +383,7 @@ const makeImageSrc = (data) => {
   background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
+  text-align: center;
 }
 
 .info {
diff --git a/frontend/src/assets/fonts/OFL.txt b/frontend/src/assets/fonts/OFL.txt
deleted file mode 100644
index 9cac04c..0000000
--- a/frontend/src/assets/fonts/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/frontend/src/assets/fonts/nunito-v16-latin-regular.woff2 b/frontend/src/assets/fonts/nunito-v16-latin-regular.woff2
deleted file mode 100644
index 2f9cc59..0000000
Binary files a/frontend/src/assets/fonts/nunito-v16-latin-regular.woff2 and /dev/null differ
diff --git a/frontend/src/assets/images/logo.svg b/frontend/src/assets/images/logo.svg
new file mode 100644
index 0000000..18ff709
--- /dev/null
+++ b/frontend/src/assets/images/logo.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="300"
+   height="66.683777"
+   viewBox="0 0 79.374997 17.643416"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xml:space="preserve"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#ffffff"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="4.7572177"
+     inkscape:cx="114.66786"
+     inkscape:cy="49.188415"
+     inkscape:window-width="1898"
+     inkscape:window-height="1019"
+     inkscape:window-x="1930"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true" /><defs
+     id="defs1" /><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(705.99995,-64.466267)"><g
+       aria-label="GoImager"
+       id="text110"
+       style="font-size:20.2285px;font-family:Tahoma;-inkscape-font-specification:'Tahoma, Normal';letter-spacing:0px;word-spacing:0px;stroke-width:0.948225px"
+       transform="matrix(0.62479217,0,0,0.62479217,-230.43241,1.7730521)"><path
+         d="m -719.32134,110.57939 q -2.20491,0 -3.19611,1.23394 -0.97096,1.21371 -0.97096,3.3377 0,1.03165 0.24274,1.88125 0.24274,0.82937 0.72822,1.43622 0.48549,0.60686 1.21371,0.95074 0.72823,0.32366 1.6992,0.32366 0.52594,0 0.89005,-0.0202 0.38434,-0.0202 0.66754,-0.0809 v -4.87507 h 3.15565 v 6.93837 q -0.5664,0.22252 -1.82057,0.46526 -1.25416,0.26297 -3.09496,0.26297 -1.57782,0 -2.87244,-0.48548 -1.2744,-0.48549 -2.18468,-1.416 -0.91028,-0.93051 -1.416,-2.28582 -0.48548,-1.35531 -0.48548,-3.09496 0,-1.75988 0.54617,-3.11519 0.54617,-1.35531 1.49691,-2.28582 0.95074,-0.95074 2.22513,-1.43622 1.29463,-0.48549 2.75108,-0.48549 0.9912,0 1.78011,0.1416 0.80914,0.12137 1.37554,0.30343 0.58662,0.16183 0.95073,0.34388 0.38435,0.18206 0.54617,0.2832 l -0.91028,2.52856 q -0.64731,-0.34388 -1.49691,-0.58662 -0.82937,-0.26297 -1.82056,-0.26297 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path411" /><path
+         d="m -702.20804,116.82999 q 0,1.25417 -0.36411,2.30605 -0.36411,1.03166 -1.05188,1.78011 -0.68777,0.72823 -1.65874,1.1328 -0.95074,0.40457 -2.14422,0.40457 -1.17325,0 -2.14422,-0.40457 -0.95074,-0.40457 -1.63851,-1.1328 -0.68777,-0.74845 -1.07211,-1.78011 -0.38434,-1.05188 -0.38434,-2.30605 0,-1.25416 0.38434,-2.28582 0.40457,-1.03165 1.09234,-1.75988 0.708,-0.72822 1.65873,-1.13279 0.97097,-0.40457 2.10377,-0.40457 1.15302,0 2.10376,0.40457 0.97097,0.40457 1.65874,1.13279 0.68777,0.72823 1.07211,1.75988 0.38434,1.03166 0.38434,2.28582 z m -3.07473,0 q 0,-1.39576 -0.5664,-2.18467 -0.54617,-0.80914 -1.57782,-0.80914 -1.03165,0 -1.59805,0.80914 -0.5664,0.78891 -0.5664,2.18467 0,1.39577 0.5664,2.22514 0.5664,0.80914 1.59805,0.80914 1.03165,0 1.57782,-0.80914 0.5664,-0.82937 0.5664,-2.22514 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path413" /><path
+         d="m -699.67947,108.15197 h 3.15565 v 14.01835 h -3.15565 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path415" /><path
+         d="m -687.64351,116.52657 q 0,-1.45646 -0.38434,-2.06331 -0.36412,-0.60686 -1.2744,-0.60686 -0.2832,0 -0.58663,0.0405 -0.30342,0.0202 -0.58662,0.0607 v 8.21277 h -3.01405 v -10.27608 q 0.38434,-0.10114 0.89005,-0.20228 0.52595,-0.12138 1.09234,-0.20229 0.58663,-0.10114 1.19349,-0.1416 0.60685,-0.0607 1.19348,-0.0607 1.15302,0 1.86102,0.30342 0.72822,0.2832 1.19348,0.68777 0.64731,-0.46525 1.47668,-0.72822 0.8496,-0.26297 1.5576,-0.26297 1.27439,0 2.08353,0.36411 0.82937,0.34388 1.31485,0.99119 0.48549,0.64732 0.66754,1.53737 0.18206,0.89005 0.18206,1.98239 v 6.00787 h -3.01405 v -5.64375 q 0,-1.45646 -0.38434,-2.06331 -0.36411,-0.60686 -1.27439,-0.60686 -0.24275,0 -0.68777,0.12138 -0.4248,0.12137 -0.708,0.30342 0.1416,0.46526 0.18206,0.9912 0.0405,0.50571 0.0405,1.09234 v 5.80558 h -3.01404 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path417" /><path
+         d="m -671.98666,120.06655 q 0.44502,0 0.84959,-0.0202 0.40457,-0.0202 0.64732,-0.0607 v -2.28582 q -0.18206,-0.0405 -0.54617,-0.0809 -0.36412,-0.0405 -0.66754,-0.0405 -0.4248,0 -0.80914,0.0607 -0.36412,0.0405 -0.64732,0.18206 -0.28319,0.1416 -0.44502,0.38434 -0.16183,0.24274 -0.16183,0.60686 0,0.708 0.46526,0.99119 0.48548,0.26297 1.31485,0.26297 z m -0.24274,-8.81962 q 1.33508,0 2.22513,0.30343 0.89005,0.30342 1.416,0.86982 0.54617,0.5664 0.76868,1.37554 0.22251,0.80914 0.22251,1.80034 v 6.27083 q -0.64731,0.1416 -1.80033,0.32366 -1.15303,0.20228 -2.79154,0.20228 -1.03165,0 -1.88125,-0.18205 -0.82937,-0.18206 -1.43622,-0.58663 -0.60686,-0.4248 -0.93051,-1.09234 -0.32366,-0.66754 -0.32366,-1.63851 0,-0.93051 0.36411,-1.57782 0.38435,-0.64731 1.01143,-1.03166 0.62708,-0.38434 1.43622,-0.54616 0.80914,-0.18206 1.67897,-0.18206 0.58663,0 1.03165,0.0607 0.46526,0.0405 0.74846,0.12138 v -0.2832 q 0,-0.76869 -0.46526,-1.23394 -0.46525,-0.46526 -1.61828,-0.46526 -0.76868,0 -1.51714,0.12137 -0.74845,0.10115 -1.29462,0.30343 l -0.38434,-2.42742 q 0.26297,-0.0809 0.64731,-0.16183 0.40457,-0.10114 0.86983,-0.16183 0.46525,-0.0809 0.97096,-0.12137 0.52594,-0.0607 1.05189,-0.0607 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path419" /><path
+         d="m -662.29722,116.50634 q 0,2.52856 2.04308,2.52856 0.46525,0 0.86982,-0.12137 0.40457,-0.12137 0.68777,-0.2832 v -4.81438 q -0.22251,-0.0405 -0.52594,-0.0607 -0.30343,-0.0405 -0.708,-0.0405 -1.19348,0 -1.7801,0.78891 -0.58663,0.78891 -0.58663,2.00262 z m 6.61472,4.3289 q 0,2.60947 -1.33508,3.86364 -1.31485,1.2744 -4.08616,1.2744 -0.97097,0 -1.94193,-0.18206 -0.97097,-0.16183 -1.80034,-0.44503 l 0.52594,-2.52856 q 0.708,0.2832 1.47668,0.44503 0.78891,0.16183 1.78011,0.16183 1.29462,0 1.82056,-0.5664 0.54617,-0.5664 0.54617,-1.45645 v -0.38435 q -0.48548,0.22252 -1.01142,0.34389 -0.50571,0.10114 -1.11257,0.10114 -2.20491,0 -3.37816,-1.29462 -1.17325,-1.31486 -1.17325,-3.66136 0,-1.17325 0.36411,-2.12399 0.36411,-0.97097 1.05188,-1.65874 0.708,-0.68777 1.71943,-1.05188 1.01142,-0.38434 2.28582,-0.38434 0.54617,0 1.11256,0.0607 0.58663,0.0405 1.15303,0.12137 0.5664,0.0809 1.07211,0.20229 0.52594,0.10114 0.93051,0.22251 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path421" /><path
+         d="m -653.35623,116.93114 q 0,-1.416 0.4248,-2.46788 0.44503,-1.07211 1.15303,-1.78011 0.70799,-0.708 1.61828,-1.07211 0.93051,-0.36411 1.90147,-0.36411 2.2656,0 3.58045,1.39576 1.31485,1.37554 1.31485,4.06593 0,0.26297 -0.0202,0.58663 -0.0202,0.30343 -0.0404,0.54617 h -6.83724 q 0.10115,0.93051 0.86983,1.47668 0.76868,0.54617 2.06331,0.54617 0.82936,0 1.61828,-0.1416 0.80914,-0.16183 1.31485,-0.38434 l 0.40457,2.44765 q -0.24274,0.12137 -0.64731,0.24274 -0.40457,0.12137 -0.91029,0.20228 -0.48548,0.10115 -1.05188,0.16183 -0.5664,0.0607 -1.13279,0.0607 -1.43623,0 -2.50834,-0.4248 -1.05188,-0.4248 -1.75988,-1.15303 -0.68777,-0.74845 -1.03165,-1.75987 -0.32366,-1.01143 -0.32366,-2.18468 z m 7.07998,-1.15303 q -0.0202,-0.38434 -0.1416,-0.74845 -0.10114,-0.36412 -0.34389,-0.64731 -0.22251,-0.2832 -0.58662,-0.46526 -0.34389,-0.18206 -0.86983,-0.18206 -0.50571,0 -0.86982,0.18206 -0.36412,0.16183 -0.60686,0.44503 -0.24274,0.2832 -0.38434,0.66754 -0.12137,0.36411 -0.18206,0.74845 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path423" /><path
+         d="m -634.62464,114.20029 q -0.40457,-0.10114 -0.95074,-0.20229 -0.54617,-0.12137 -1.17325,-0.12137 -0.2832,0 -0.68777,0.0607 -0.38435,0.0405 -0.58663,0.10114 v 8.13186 h -3.01405 v -10.07379 q 0.80914,-0.2832 1.90148,-0.52595 1.11257,-0.26297 2.46788,-0.26297 0.24274,0 0.58663,0.0405 0.34388,0.0202 0.68777,0.0809 0.34388,0.0405 0.68776,0.12138 0.34389,0.0607 0.58663,0.16182 z"
+         style="-inkscape-font-specification:'Ubuntu Bold'"
+         id="path425" /></g><path
+       style="fill:#ffcc00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0482686px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -688.15885,81.002693 c -0.0686,0.533302 -0.10901,1.110651 -0.52174,1.106973 l -7.42037,-0.132966 -9.45217,-0.147825 -0.44682,-16.984277 c 0,0 0.086,-0.700386 1.05518,-0.195259 l 3.33445,0.08403 0.30207,-0.121492 0.25867,0.08699 1.71137,0.0042 c 0,0 4.46851,0.364109 5.03562,0.14099 0,0 0.4699,-0.201399 0.84472,-0.140357 l 1.71523,0.0072 c 0,0 -0.0645,0.311198 0.70836,0.03478 l 1.12949,-0.02448 1.87041,-0.03413 c 0.10601,0.104918 0.31323,0.488657 0.002,0.555843 l -0.0287,0.484621 c 0,0 0.0706,0.287764 0.0443,0.959225 l -0.0574,1.466995 -0.0372,6.904662 -0.0799,4.937095 c 0.0345,-0.01449 -0.24983,0.403351 0.0316,1.007175"
+       id="path44"
+       sodipodi:nodetypes="ccccccccccccccccccscccc" /><path
+       id="path46"
+       style="fill:#ffffff;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.0482686px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M -698.96214 66.143167 L -699.16057 66.512654 L -699.00555 70.374433 L -695.40835 70.557368 L -694.98512 70.107266 L -695.38044 66.328686 L -695.71892 66.181408 L -698.96214 66.143167 z M -690.64223 70.930989 C -690.85965 70.925977 -691.10732 71.069998 -691.10732 71.069998 L -693.78881 71.019355 L -693.67564 74.280655 L -693.85392 74.714737 L -693.60019 75.0496 L -690.27998 74.874934 C -690.27998 74.874934 -690.27968 74.521722 -690.27068 73.600593 C -690.26138 72.679464 -690.1983 71.472223 -690.36525 71.104105 C -690.42264 70.977562 -690.52835 70.933614 -690.64223 70.930989 z M -690.6505 75.701757 C -691.14988 75.697518 -693.32631 75.777204 -693.32631 75.777204 C -693.32631 75.777204 -694.14775 75.555591 -693.92782 76.963178 C -693.70787 78.370772 -693.87563 79.594542 -693.87563 79.594542 C -693.87563 79.594542 -693.77764 79.980174 -693.32631 80.04051 C -692.87493 80.10085 -690.92438 79.969196 -690.92438 79.969196 C -690.92438 79.969196 -690.38514 79.981743 -690.35491 79.364582 C -690.32471 78.747417 -690.38902 76.717199 -690.38902 76.717199 L -690.38953 76.011815 C -690.38953 76.011815 -690.29817 75.721064 -690.57402 75.703824 C -690.59126 75.702748 -690.61721 75.702039 -690.6505 75.701757 z M -696.23982 75.713126 C -696.76923 75.718214 -698.74871 75.796841 -698.74871 75.796841 L -698.99314 76.241259 L -698.91098 78.076805 L -698.71822 78.685037 L -698.9487 79.08708 L -698.46759 80.113374 C -698.46759 80.113374 -696.06867 80.206466 -695.68999 79.912352 C -695.3113 79.618234 -695.35874 79.007498 -695.35874 79.007498 C -695.35874 79.007498 -695.43572 77.13892 -695.45382 76.398355 C -695.47186 75.657794 -696.06006 75.737786 -696.11166 75.716226 C -696.11812 75.713529 -696.16419 75.712399 -696.23982 75.713126 z M -703.027 75.73483 C -703.33538 75.738913 -703.47401 75.833532 -703.47401 75.833532 L -703.78561 75.940502 L -703.80112 76.308438 L -703.5355 79.923204 L -701.0385 79.948009 L -700.50003 79.608495 L -700.49279 76.323941 C -700.22785 75.66512 -700.74032 75.746198 -700.74032 75.746198 L -702.49836 75.802526 C -702.71156 75.749691 -702.88683 75.732974 -703.027 75.73483 z " /></g></svg>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3940d6c..524ef65 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,26 +1,16 @@
 html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
+  background-color: #ccc;
 }
 
 body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-}
-
-@font-face {
-    font-family: "Nunito";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
-    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+  margin: 0;
+  color: 333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  sans-serif;
 }
 
 #app {
-    height: 100vh;
-    text-align: center;
+  height: 100vh;
+  overflow: hidden;
 }
diff --git a/pkg/img/info.go b/pkg/img/info.go
index 38e7cf8..625ad83 100644
--- a/pkg/img/info.go
+++ b/pkg/img/info.go
@@ -8,6 +8,7 @@ import (
 	_ "image/jpeg"
 	"image/png"
 	_ "image/png"
+	"math"
 	"os"
 
 	"github.com/disintegration/imaging"
@@ -66,28 +67,58 @@ func ApplyFilters(src *ImageInfo, effects []ImageEffect) *ImageInfo {
 	result := base.Image
 
 	for _, effect := range effects {
-		if effect.Name == "Crop" {
+		if effect.Name == "scale-width" {
+			width := cast.ToFloat64(effect.Settings["value"])
+			height := cast.ToInt(math.Round(float64(result.Bounds().Dy()) * width / float64(result.Bounds().Dx())))
+
+			result = imaging.Resize(
+				result,
+				cast.ToInt(width),
+				cast.ToInt(height),
+				imaging.Lanczos,
+			)
+		} else if effect.Name == "scale-height" {
+			height := cast.ToFloat64(effect.Settings["value"])
+			width := cast.ToInt(math.Round(float64(result.Bounds().Dx()) * height / float64(result.Bounds().Dy())))
+
+			result = imaging.Resize(
+				result,
+				cast.ToInt(width),
+				cast.ToInt(height),
+				imaging.Lanczos,
+			)
+		} else if effect.Name == "crop" {
+			result = imaging.Crop(
+				result,
+				image.Rect(
+					cast.ToInt(effect.Settings["x0"]),
+					cast.ToInt(effect.Settings["y0"]),
+					cast.ToInt(effect.Settings["x1"]),
+					cast.ToInt(effect.Settings["y1"]),
+				),
+			)
+		} else if effect.Name == "crop-center" {
 			result = imaging.CropCenter(
 				result,
 				cast.ToInt(effect.Settings["width"]),
 				cast.ToInt(effect.Settings["height"]),
 			)
-		} else if effect.Name == "Resize" {
+		} else if effect.Name == "resize" {
 			result = imaging.Resize(
 				result,
 				cast.ToInt(effect.Settings["width"]),
 				cast.ToInt(effect.Settings["height"]),
 				imaging.Lanczos,
 			)
-		} else if effect.Name == "Brightness" {
+		} else if effect.Name == "brightness" {
 			result = imaging.AdjustBrightness(result, cast.ToFloat64(effect.Settings["value"]))
-		} else if effect.Name == "Contrast" {
+		} else if effect.Name == "contrast" {
 			result = imaging.AdjustContrast(result, cast.ToFloat64(effect.Settings["value"]))
-		} else if effect.Name == "Saturation" {
+		} else if effect.Name == "saturation" {
 			result = imaging.AdjustSaturation(result, cast.ToFloat64(effect.Settings["value"]))
-		} else if effect.Name == "Gamma" {
+		} else if effect.Name == "gamma" {
 			result = imaging.AdjustGamma(result, cast.ToFloat64(effect.Settings["value"]))
-		} else if effect.Name == "Blur" {
+		} else if effect.Name == "blur" {
 			result = imaging.Blur(result, cast.ToFloat64(effect.Settings["value"]))
 		}
 	}