diff --git a/.eslintrc.json b/.eslintrc.json
index 5fda25464..64b708dcc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,69 +4,22 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 12,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["only-warn", "react", "simple-import-sort", "import"],
+  "plugins": ["only-warn", "react"],
   "rules": {
-    "no-underscore-dangle": "off",
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
-          ],
-          // Packages. `react` related packages come first.
-          ["^react(.*|$)"],
-          ["^@?\\w"],
-          // Internal packages.
-          ["^@src(.*|$)"],
-          ["^@contexts(.*|$)"],
-          ["^@hooks(.*|$)"],
-          ["^@templates(.*|$)"],
-          ["^@utils(.*|$)"],
-          ["^@style(.*|$)"],
-          ["^@components(.*|$)"],
-          ["^@layouts(.*|$)"],
-          ["^@routing(.*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Direct imports for e.g. import "<package>"
-          ["^.+\\.s?css$"]
-        ]
-      }
-    ]
-  },
-  "settings": {
-    "import/resolver": {
-      "alias": {
-        "map": [
-          ["@root", "./"],
-          ["@src", "./src"],
-          ["@components", "./src/components"],
-          ["@contexts", "./src/contexts"],
-          ["@hooks", "./src/hooks"],
-          ["@layouts", "./src/layouts"],
-          ["@routing", "./src/routing"],
-          ["@styles", "./src/styles"],
-          ["@templates", "./src/templates"],
-          ["@utils", "./src/utils"]
-        ],
-        "extensions": [".js", ".jsx", ".scss"]
-      }
-    }
+    "no-underscore-dangle": "off"
   },
   "globals": {
     "cy": "readonly",
diff --git a/craco.config.js b/craco.config.js
deleted file mode 100644
index ac21619a0..000000000
--- a/craco.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* craco.config.js */
-const path = require(`path`)
-
-module.exports = {
-  webpack: {
-    alias: {
-      "@root": path.resolve(__dirname, "."),
-      "@src": path.resolve(__dirname, "src"),
-      "@components": path.resolve(__dirname, "src/components"),
-      "@contexts": path.resolve(__dirname, "src/contexts"),
-      "@hooks": path.resolve(__dirname, "src/hooks"),
-      "@layouts": path.resolve(__dirname, "src/layouts"),
-      "@routing": path.resolve(__dirname, "src/routing"),
-      "@styles": path.resolve(__dirname, "src/styles"),
-      "@templates": path.resolve(__dirname, "src/templates"),
-      "@utils": path.resolve(__dirname, "src/utils"),
-    },
-  },
-}
diff --git a/cypress/integration/editPage.spec.js b/cypress/integration/editPage.spec.js
index 98c72066a..abb9778c9 100644
--- a/cypress/integration/editPage.spec.js
+++ b/cypress/integration/editPage.spec.js
@@ -1,10 +1,9 @@
+import "cypress-file-upload"
 import {
-  generatePageFileName,
-  generateResourceFileName,
   slugifyCategory,
-} from "@src/utils"
-
-import "cypress-file-upload"
+  generateResourceFileName,
+  generatePageFileName,
+} from "../../src/utils"
 
 Cypress.config("baseUrl", Cypress.env("BASEURL"))
 Cypress.config("defaultCommandTimeout", 5000)
diff --git a/cypress/integration/files.spec.js b/cypress/integration/files.spec.js
index 2205077e6..49377dd7c 100644
--- a/cypress/integration/files.spec.js
+++ b/cypress/integration/files.spec.js
@@ -1,6 +1,5 @@
-import { generateImageorFilePath, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { generateImageorFilePath, slugifyCategory } from "../../src/utils"
 
 describe("Files", () => {
   Cypress.config("baseUrl", Cypress.env("BASEURL"))
diff --git a/cypress/integration/homepage.spec.js b/cypress/integration/homepage.spec.js
index 1f5e3fffd..50148873c 100644
--- a/cypress/integration/homepage.spec.js
+++ b/cypress/integration/homepage.spec.js
@@ -13,12 +13,10 @@ describe("Login flow", () => {
 
     // This is necessary to prevent the frontend from throwing the 401 error from the backend.
     // TODO: We should handle this properly in the axios interceptor.
-    cy.on(
-      "uncaught:exception",
-      () =>
-        // returning false here prevents Cypress from failing the test
-        false
-    )
+    cy.on("uncaught:exception", () => {
+      // returning false here prevents Cypress from failing the test
+      return false
+    })
 
     cy.contains(LOGIN_BUTTON_TEXT).click()
     cy.url().should("include", GITHUB_LOGIN_URL)
diff --git a/cypress/integration/images.spec.js b/cypress/integration/images.spec.js
index a25b2e7ed..5d1423280 100644
--- a/cypress/integration/images.spec.js
+++ b/cypress/integration/images.spec.js
@@ -1,6 +1,5 @@
-import { generateImageorFilePath, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { generateImageorFilePath, slugifyCategory } from "../../src/utils"
 
 describe("Images", () => {
   Cypress.config("baseUrl", Cypress.env("BASEURL"))
diff --git a/cypress/integration/pages.spec.js b/cypress/integration/pages.spec.js
index 139b0f149..83822dcb2 100644
--- a/cypress/integration/pages.spec.js
+++ b/cypress/integration/pages.spec.js
@@ -1,9 +1,9 @@
 import {
-  deslugifyDirectory,
   deslugifyPage,
+  deslugifyDirectory,
   generatePageFileName,
   slugifyCategory,
-} from "@src/utils"
+} from "../../src/utils"
 
 const CUSTOM_TIMEOUT = 30000 // 30 seconds
 
diff --git a/cypress/integration/resourceCategory.spec.js b/cypress/integration/resourceCategory.spec.js
index b49d669bb..69cfde281 100644
--- a/cypress/integration/resourceCategory.spec.js
+++ b/cypress/integration/resourceCategory.spec.js
@@ -1,6 +1,5 @@
-import { generateResourceFileName, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { slugifyCategory, generateResourceFileName } from "../../src/utils"
 
 describe("Resource category page", () => {
   Cypress.config("defaultCommandTimeout", 5000)
diff --git a/cypress/integration/resources.spec.js b/cypress/integration/resources.spec.js
index 19493efc2..c3ad0101c 100644
--- a/cypress/integration/resources.spec.js
+++ b/cypress/integration/resources.spec.js
@@ -1,4 +1,4 @@
-import { slugifyCategory } from "@src/utils"
+import { slugifyCategory } from "../../src/utils"
 
 describe("Resources page", () => {
   const CMS_BASEURL = Cypress.env("BASEURL")
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
deleted file mode 100644
index b55e5003e..000000000
--- a/cypress/plugins/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const path = require(`path`)
-const webpack = require('@cypress/webpack-preprocessor')
-
-module.exports = (on) => {
-    const options = {
-        webpackOptions: {
-            resolve: {
-                alias: {
-                    "@root": path.resolve(__dirname, "../../"),
-                    "@src": path.resolve(__dirname, "../../src"),
-                    "@components": path.resolve(__dirname, "../../src/components"),
-                    "@contexts": path.resolve(__dirname, "../../src/contexts"),
-                    "@hooks": path.resolve(__dirname, "../../src/hooks"),
-                    "@layouts": path.resolve(__dirname, "../../src/layouts"),
-                    "@routing": path.resolve(__dirname, "../../src/routing"),
-                    "@styles": path.resolve(__dirname, "../../src/styles"),
-                    "@templates": path.resolve(__dirname, "../../src/templates"),
-                    "@utils": path.resolve(__dirname, "../../src/utils"),
-                }
-            }
-        },
-        watchOptions: {},
-    }
-  on('file:preprocessor', webpack(options))
-}
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index b5ed3f711..000000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2017",
-    "allowSyntheticDefaultImports": false,
-    "jsx": "react",
-    "baseUrl": "./",
-    "paths": {
-      "@src/*": ["./src/*"],
-      "@components/*": ["./src/components/*"],
-      "@contexts/*": ["./src/contexts/*"],
-      "@hooks/*": ["./src/hooks/*"],
-      "@layouts/*": ["./src/layouts/*"],
-      "@routing/*": ["./src/routing/*"],
-      "@styles/*": ["./src/styles/*"],
-      "@templates/*": ["./src/templates/*"],
-      "@utils/*": ["./src/utils/*"]
-    }
-  },
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/package-lock.json b/package-lock.json
index 5a90ef705..ded72ce68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,16 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@atlaskit/tree": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@atlaskit/tree/-/tree-7.1.2.tgz",
+      "integrity": "sha512-D5BB4atomDpmm1rW6jxIMAFKFwJnJExRMpkMPIP4CEOb/cg8qZh7VxQ6hC6VgOACxf7mwUOcerS3n3RtMlAu5w==",
+      "requires": {
+        "css-box-model": "^1.2.0",
+        "react-beautiful-dnd-next": "11.0.5",
+        "tslib": "^1.9.3"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@@ -18,45 +28,318 @@
       "integrity": "sha512-EaI33z19T4qN3xLXsGf48M2cDqa6ei9tPZlfLdb2HC+e/cFtREiRd8hdSqDbwdLB0/+gLwqJmCYASH0z2bUdog=="
     },
     "@babel/core": {
-      "version": "7.12.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
-      "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.12.1",
-        "@babel/helper-module-transforms": "^7.12.1",
-        "@babel/helpers": "^7.12.1",
-        "@babel/parser": "^7.12.3",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.12.1",
-        "@babel/types": "^7.12.1",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
+      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-compilation-targets": "^7.14.5",
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helpers": "^7.14.6",
+        "@babel/parser": "^7.14.6",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.1",
+        "gensync": "^1.0.0-beta.2",
         "json5": "^2.1.2",
-        "lodash": "^4.17.19",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
+        "semver": "^6.3.0",
         "source-map": "^0.5.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz",
+          "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w=="
+        },
+        "@babel/generator": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+          "requires": {
+            "@babel/types": "^7.14.5",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
+          "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+          "requires": {
+            "@babel/compat-data": "^7.14.5",
+            "@babel/helper-validator-option": "^7.14.5",
+            "browserslist": "^4.16.6",
+            "semver": "^6.3.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.14.5",
+            "@babel/template": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+          "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz",
+          "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
+          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.14.5",
+            "@babel/helper-replace-supers": "^7.14.5",
+            "@babel/helper-simple-access": "^7.14.5",
+            "@babel/helper-split-export-declaration": "^7.14.5",
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "@babel/template": "^7.14.5",
+            "@babel/traverse": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
+          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
+          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.14.5",
+            "@babel/helper-optimise-call-expression": "^7.14.5",
+            "@babel/traverse": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
+          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+          "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow=="
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+          "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ=="
+        },
+        "@babel/template": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/parser": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
+          "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/generator": "^7.14.5",
+            "@babel/helper-function-name": "^7.14.5",
+            "@babel/helper-hoist-variables": "^7.14.5",
+            "@babel/helper-split-export-declaration": "^7.14.5",
+            "@babel/parser": "^7.14.5",
+            "@babel/types": "^7.14.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.16.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+          "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+          "requires": {
+            "caniuse-lite": "^1.0.30001219",
+            "colorette": "^1.2.2",
+            "electron-to-chromium": "^1.3.723",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.71"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001237",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
+          "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw=="
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
+        "electron-to-chromium": {
+          "version": "1.3.752",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+          "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
+        "node-releases": {
+          "version": "1.1.73",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+          "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
           "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/eslint-parser": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.14.5.tgz",
+      "integrity": "sha512-20BlOHuGf3UXS7z1QPyllM9Gz8SEgcp/UcKeUmdHIFZO6HF1n+3KaLpeyfwWvjY/Os/ynPX3k8qXE/nZ5dw/0g==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         }
       }
     },
@@ -327,13 +610,171 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.12.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz",
-      "integrity": "sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
       "requires": {
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.12.5",
-        "@babel/types": "^7.12.5"
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+          "requires": {
+            "@babel/types": "^7.14.5",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.14.5",
+            "@babel/template": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+          "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+          "requires": {
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+          "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ=="
+        },
+        "@babel/template": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/parser": "^7.14.5",
+            "@babel/types": "^7.14.5"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
+          "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/generator": "^7.14.5",
+            "@babel/helper-function-name": "^7.14.5",
+            "@babel/helper-hoist-variables": "^7.14.5",
+            "@babel/helper-split-export-declaration": "^7.14.5",
+            "@babel/parser": "^7.14.5",
+            "@babel/types": "^7.14.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "@babel/highlight": {
@@ -1431,76 +1872,6 @@
       "dev": true,
       "optional": true
     },
-    "@craco/craco": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@craco/craco/-/craco-6.1.2.tgz",
-      "integrity": "sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==",
-      "requires": {
-        "cross-spawn": "^7.0.0",
-        "lodash": "^4.17.15",
-        "semver": "^7.3.2",
-        "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-        }
-      }
-    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -1551,34 +1922,6 @@
         "uuid": "^3.3.2"
       }
     },
-    "@cypress/webpack-preprocessor": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@cypress/webpack-preprocessor/-/webpack-preprocessor-5.9.0.tgz",
-      "integrity": "sha512-9mzk9PdbCv+FMXZnlg0BK0PkKvOM7AYjc0c8vDhdcQh2ZId8TvV64t81wyWwN8g2H49Ns0ynhXZCJLu+luO83g==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.7.1",
-        "debug": "4.3.2",
-        "lodash": "^4.17.20"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.2",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
     "@cypress/xvfb": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
@@ -1688,14 +2031,14 @@
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@eslint/eslintrc": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
-      "integrity": "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.1.1",
         "espree": "^7.3.0",
-        "globals": "^12.1.0",
+        "globals": "^13.9.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.2.1",
         "js-yaml": "^3.13.1",
@@ -1712,11 +2055,11 @@
           }
         },
         "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "version": "13.9.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+          "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.20.2"
           }
         },
         "import-fresh": {
@@ -1744,9 +2087,9 @@
           "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
         },
         "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
         }
       }
     },
@@ -4969,6 +5312,29 @@
         "babel-plugin-transform-react-remove-prop-types": "0.4.24"
       },
       "dependencies": {
+        "@babel/core": {
+          "version": "7.12.3",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
+          "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.12.1",
+            "@babel/helper-module-transforms": "^7.12.1",
+            "@babel/helpers": "^7.12.1",
+            "@babel/parser": "^7.12.3",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.12.1",
+            "@babel/types": "^7.12.1",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          }
+        },
         "@babel/plugin-proposal-class-properties": {
           "version": "7.12.1",
           "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
@@ -5118,6 +5484,24 @@
               }
             }
           }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -8127,28 +8511,30 @@
       }
     },
     "eslint": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.21.0.tgz",
-      "integrity": "sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+      "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
       "requires": {
         "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.0",
+        "@eslint/eslintrc": "^0.4.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^2.1.0",
         "eslint-visitor-keys": "^2.0.0",
         "espree": "^7.3.1",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
+        "glob-parent": "^5.1.2",
+        "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
@@ -8156,7 +8542,7 @@
         "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.20",
+        "lodash.merge": "^4.6.2",
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
@@ -8165,7 +8551,7 @@
         "semver": "^7.2.1",
         "strip-ansi": "^6.0.0",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.4",
+        "table": "^6.0.9",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
@@ -8184,9 +8570,9 @@
           }
         },
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -8216,24 +8602,37 @@
           }
         },
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "eslint-visitor-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
-          "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ=="
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
         },
         "globals": {
-          "version": "12.3.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz",
-          "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==",
+          "version": "13.9.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+          "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.20.2"
           }
         },
         "has-flag": {
@@ -8242,9 +8641,9 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "import-fresh": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "requires": {
             "parent-module": "^1.0.0",
             "resolve-from": "^4.0.0"
@@ -8301,9 +8700,9 @@
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
         },
         "semver": {
-          "version": "7.3.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
-          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -8351,9 +8750,9 @@
           }
         },
         "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
         },
         "which": {
           "version": "2.0.2",
@@ -8398,12 +8797,6 @@
       "integrity": "sha512-oKMhGv3ihGbCIimCAjqkdzx2Q+jthoqnXSP+d86M9tptwugycmTFdVR4IpLgq2c4SHifbwO90z2fQ8/Aio73yw==",
       "dev": true
     },
-    "eslint-import-resolver-alias": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz",
-      "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==",
-      "dev": true
-    },
     "eslint-import-resolver-node": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@@ -9777,9 +10170,9 @@
       }
     },
     "gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg=="
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -14210,6 +14603,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -14226,6 +14624,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -14254,6 +14657,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -14883,11 +15291,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "module-alias": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/module-alias/-/module-alias-2.2.2.tgz",
-      "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q=="
-    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -17316,6 +17719,21 @@
         "use-memo-one": "^1.1.1"
       }
     },
+    "react-beautiful-dnd-next": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd-next/-/react-beautiful-dnd-next-11.0.5.tgz",
+      "integrity": "sha512-kM5Mob41HkA3ShS9uXqeMkW51L5bVsfttxfrwwHucu7I6SdnRKCyN78t6QiLH/UJQQ8T4ukI6NeQAQQpGwolkg==",
+      "requires": {
+        "@babel/runtime-corejs2": "^7.4.5",
+        "css-box-model": "^1.1.2",
+        "memoize-one": "^5.0.4",
+        "raf-schd": "^4.0.0",
+        "react-redux": "^7.0.3",
+        "redux": "^4.0.1",
+        "tiny-invariant": "^1.0.4",
+        "use-memo-one": "^1.1.0"
+      }
+    },
     "react-color": {
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.0.tgz",
@@ -17698,6 +18116,36 @@
         "workbox-webpack-plugin": "5.1.4"
       },
       "dependencies": {
+        "@babel/core": {
+          "version": "7.12.3",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
+          "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.12.1",
+            "@babel/helper-module-transforms": "^7.12.1",
+            "@babel/helpers": "^7.12.1",
+            "@babel/parser": "^7.12.3",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.12.1",
+            "@babel/types": "^7.12.1",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "5.7.1",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+            }
+          }
+        },
         "braces": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -17711,6 +18159,14 @@
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
           "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
         },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
         "eslint-config-react-app": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz",
@@ -17787,6 +18243,11 @@
             "picomatch": "^2.0.5"
           }
         },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
         "schema-utils": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -17802,6 +18263,11 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
           "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
         },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -19882,20 +20348,22 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
       "requires": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
         "slice-ansi": "^4.0.0",
-        "string-width": "^4.2.0"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
         "ajv": {
-          "version": "7.2.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.1.tgz",
-          "integrity": "sha512-+nu0HDv7kNSOua9apAVc979qd932rrZeb3WOvoiD31A/p1mIE5/9bN2027pE2rOPYEdS3UHzsvof4hY+lM9/WQ==",
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.0.tgz",
+          "integrity": "sha512-cnUG4NSBiM4YFBxgZIj/In3/6KX+rQ2l2YPRVcvAMQGWEPKuXoPIhxzwqh31jA3IPbI4qEOp/5ILI4ynioXsGQ==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -20717,9 +21185,9 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "v8-compile-cache": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
-      "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
     },
     "v8-to-istanbul": {
       "version": "7.1.0",
@@ -21339,14 +21807,6 @@
         }
       }
     },
-    "webpack-merge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
-      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
-      "requires": {
-        "lodash": "^4.17.15"
-      }
-    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
diff --git a/package.json b/package.json
index ff6cdf009..359d894d5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.1.2",
+    "@atlaskit/tree": "^7.0.2",
     "@sentry/react": "^5.27.6",
     "@sentry/tracing": "^5.27.6",
     "axios": "^0.21.1",
@@ -21,7 +21,6 @@
     "js-base64": "^2.5.1",
     "lodash": "^4.17.21",
     "marked": "^0.7.0",
-    "module-alias": "^2.2.2",
     "moment-timezone": "^0.5.33",
     "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
@@ -45,10 +44,10 @@
     "yaml": "^1.10.2"
   },
   "scripts": {
-    "run": "source .env && craco start",
-    "dev": "source .env && craco start",
-    "build": "craco build",
-    "test": "craco test",
+    "start": "source .env.development.local && react-scripts start",
+    "dev": "source .env && react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
     "test-e2e": "cypress run",
     "lint": "eslint --ext .js --ext .jsx --ignore-path .gitignore .",
     "lint-fix": "eslint --ext .js --ext .jsx --ignore-path .gitignore . --fix",
@@ -73,16 +72,16 @@
     ]
   },
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^5.9.0",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.5",
     "@jest/globals": "^27.0.3",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "cypress": "^7.2.0",
     "cz-conventional-changelog": "^3.0.2",
-    "eslint": "^7.21.0",
+    "eslint": "^7.28.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",
-    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
@@ -99,30 +98,6 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "_moduleAliases": {
-    "@root": ".",
-    "@components": "src/components",
-    "@contexts": "src/contexts",
-    "@hooks": "src/hooks",
-    "@layouts": "src/layouts",
-    "@routing": "src/routing",
-    "@styles": "src/styles",
-    "@templates": "src/templates",
-    "@utils": "src/utils"
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "^@src(.*)": "<rootDir>/src$1",
-      "^@components(.*)": "<rootDir>/src/components$1",
-      "^@contexts(.*)": "<rootDir>/src/contexts$1",
-      "^@hooks(.*)": "<rootDir>/src/hooks$1",
-      "^@layouts(.*)": "<rootDir>/src/layouts$1",
-      "^@routing(.*)": "<rootDir>/src/routing$1",
-      "^@styles(.*)": "<rootDir>/src/styles$1",
-      "^@templates(.*)": "<rootDir>/src/templates$1",
-      "^@utils(.*)": "<rootDir>/src/utils$1"
-    }
-  },
   "lint-staged": {
     "**/*.(js|jsx|ts|tsx)": [
       "eslint --fix",
diff --git a/src/App.jsx b/src/App.jsx
index f902ebd79..cb1f52f8c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,21 +1,18 @@
 import React, { useEffect } from "react"
-import { QueryClient, QueryClientProvider } from "react-query"
 import { BrowserRouter as Router } from "react-router-dom"
-import { ToastContainer } from "react-toastify"
-// we need to import react-toastify before our styles, but that is
-// incompatible with our code linting sorting order. There is no
-// easy way around this (see https://github.com/lydell/eslint-plugin-simple-import-sort/issues/8)
-// so we are importing react-toastify styles as an unused import for now
-// eslint-disable-next-line no-unused-vars
-import reactToastifyStyles from "react-toastify/dist/ReactToastify.css"
-
 import axios from "axios"
+import { QueryClient, QueryClientProvider } from "react-query"
+import { ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
 
-import { LoginProvider } from "@contexts/LoginContext"
+// Styles
+import elementStyles from "./styles/isomer-cms/Elements.module.scss"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+// Import contexts
+import { LoginProvider } from "./contexts/LoginContext"
 
-import { RouteSelector } from "@routing/RouteSelector"
+// Import route selector
+import { RouteSelector } from "./routing/RouteSelector"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -57,4 +54,6 @@ export const App = () => {
       </QueryClientProvider>
     </Router>
   )
-}
\ No newline at end of file
+}
+
+export default App
diff --git a/src/__tests__/RouteSelector.jsx b/src/__tests__/RouteSelector.jsx
index cb7392490..0576b1a64 100644
--- a/src/__tests__/RouteSelector.jsx
+++ b/src/__tests__/RouteSelector.jsx
@@ -1,14 +1,11 @@
 import React from "react"
-import { MemoryRouter } from "react-router-dom"
-
 import { render, screen } from "@testing-library/react"
-
-import { LoginContext } from "@contexts/LoginContext"
-
-import { RouteSelector } from "@routing/RouteSelector"
-
+import { MemoryRouter } from "react-router-dom"
 import "@testing-library/jest-dom/extend-expect"
 
+import { RouteSelector } from "../routing/RouteSelector"
+import { LoginContext } from "../contexts/LoginContext"
+
 const HOME_LAYOUT_TEXT = "Home layout mock text"
 const SITES_LAYOUT_TEXT = "Site layout mock text"
 const SETTINGS_LAYOUT_TEXT = "Settings layout mock text"
@@ -25,52 +22,88 @@ const FOLDERS_LAYOUT_TEXT = "Folders layout mock text"
 const NOT_FOUND_LAYOUT_TEXT = "Route does not exist"
 
 // Layout mocks
-jest.mock("@layouts/Home", () => ({
-  __esModule: true,
-  default: () => <div>{HOME_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Sites", () => ({
-  __esModule: true,
-  default: () => <div>{SITES_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Settings", () => ({
-  __esModule: true,
-  default: () => <div>{SETTINGS_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/EditNavBar", () => ({
-  __esModule: true,
-  default: () => <div>{EDIT_NAVBAR_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Resources", () => ({
-  __esModule: true,
-  default: () => <div>{RESOURCES_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/CategoryPages", () => ({
-  __esModule: true,
-  default: () => <div>{RESOURCES_CATEGORY_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/EditContactUs", () => ({
-  __esModule: true,
-  default: () => <div>{EDIT_CONTACT_US_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/EditHomepage", () => ({
-  __esModule: true,
-  default: () => <div>{EDIT_HOMEPAGE_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Workspace", () => ({
-  __esModule: true,
-  default: () => <div>{WORKSPACE_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Images", () => {
+jest.mock("../layouts/Home", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{HOME_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Sites", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{SITES_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Settings", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{SETTINGS_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/EditNavBar", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{EDIT_NAVBAR_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Resources", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{RESOURCES_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/CategoryPages", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{RESOURCES_CATEGORY_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/EditContactUs", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{EDIT_CONTACT_US_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/EditHomepage", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{EDIT_HOMEPAGE_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Workspace", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{WORKSPACE_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Images", () => {
   return {
     __esModule: true,
     default: () => {
@@ -79,7 +112,7 @@ jest.mock("@layouts/Images", () => {
   }
 })
 
-jest.mock("@layouts/Files", () => {
+jest.mock("../layouts/Files", () => {
   return {
     __esModule: true,
     default: () => {
@@ -88,25 +121,41 @@ jest.mock("@layouts/Files", () => {
   }
 })
 
-jest.mock("@layouts/EditPage", () => ({
-  __esModule: true,
-  default: () => <div>{EDIT_PAGE_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Folders", () => ({
-  __esModule: true,
-  default: () => <div>{FOLDERS_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@layouts/Folders", () => ({
-  __esModule: true,
-  default: () => <div>{FOLDERS_LAYOUT_TEXT}</div>,
-}))
-
-jest.mock("@components/NotFoundPage", () => ({
-  __esModule: true,
-  default: () => <div>{NOT_FOUND_LAYOUT_TEXT}</div>,
-}))
+jest.mock("../layouts/EditPage", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{EDIT_PAGE_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Folders", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{FOLDERS_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../layouts/Folders", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{FOLDERS_LAYOUT_TEXT}</div>
+    },
+  }
+})
+
+jest.mock("../components/NotFoundPage", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>{NOT_FOUND_LAYOUT_TEXT}</div>
+    },
+  }
+})
 
 // Context mocks
 const LoggedInContextProvider = ({ children }) => {
diff --git a/src/api.js b/src/api.js
index 77ae89827..218225544 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,9 +1,8 @@
 import axios from "axios"
-
 import {
-  generateImageorFilePath,
   getNavFolderDropdownFromFolderOrder,
-} from "@src/utils"
+  generateImageorFilePath,
+} from "./utils"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -19,11 +18,12 @@ const getDirectoryFile = async (siteName, folderName) => {
   return resp.data
 }
 
-const setDirectoryFile = async (siteName, folderName, payload) =>
-  axios.post(
+const setDirectoryFile = async (siteName, folderName, payload) => {
+  return axios.post(
     `${BACKEND_URL}/sites/${siteName}/collections/${folderName}/pages/collection.yml`,
     payload
   )
+}
 
 const getLastUpdated = async (siteName) => {
   if (!siteName) return undefined
diff --git a/src/components/CollectionPagesSection.jsx b/src/components/CollectionPagesSection.jsx
index 62e4aaa6d..fbe031a65 100644
--- a/src/components/CollectionPagesSection.jsx
+++ b/src/components/CollectionPagesSection.jsx
@@ -1,39 +1,41 @@
 import React, { useState } from "react"
-import { useMutation, useQuery, useQueryClient } from "react-query"
-
 import axios from "axios"
-import _ from "lodash"
+import { useQuery, useMutation, useQueryClient } from "react-query"
 import PropTypes from "prop-types"
+import _ from "lodash"
 
 import {
+  PAGE_CONTENT_KEY,
+  FOLDERS_CONTENT_KEY,
+  DIR_CONTENT_KEY,
+  RESOURCE_CATEGORY_CONTENT_KEY,
+} from "../constants"
+
+import {
+  getEditPageData,
   deletePageData,
   getAllCategories,
-  getDirectoryFile,
-  getEditPageData,
   moveFile,
-} from "@src/api"
-import {
-  DIR_CONTENT_KEY,
-  FOLDERS_CONTENT_KEY,
-  PAGE_CONTENT_KEY,
-  RESOURCE_CATEGORY_CONTENT_KEY,
-} from "@src/constants"
+  getDirectoryFile,
+} from "../api"
+
 import {
-  convertFolderOrderToArray,
   DEFAULT_RETRY_MSG,
   parseDirectoryFile,
-} from "@src/utils"
-
-import { errorToast, successToast } from "@utils/toasts"
+  convertFolderOrderToArray,
+} from "../utils"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+// Import components
+import OverviewCard from "./OverviewCard"
+import ComponentSettingsModal from "./ComponentSettingsModal"
+import PageSettingsModal from "./PageSettingsModal"
+import { errorToast, successToast } from "../utils/toasts"
+import DeleteWarningModal from "./DeleteWarningModal"
+import GenericWarningModal from "./GenericWarningModal"
 
-import ComponentSettingsModal from "@components/ComponentSettingsModal"
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import GenericWarningModal from "@components/GenericWarningModal"
-import OverviewCard from "@components/OverviewCard"
-import PageSettingsModal from "@components/PageSettingsModal"
+// Import styles
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/components/ColorPicker.jsx b/src/components/ColorPicker.jsx
index d2c488efc..3cc7d6f29 100644
--- a/src/components/ColorPicker.jsx
+++ b/src/components/ColorPicker.jsx
@@ -1,9 +1,7 @@
 import React, { useState } from "react"
-import { SketchPicker } from "react-color"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import { SketchPicker } from "react-color"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const ColorPicker = ({ value, onColorSelect, setRealTimeColor }) => {
   // initiate selectedColor as color passed in as props
diff --git a/src/components/ComponentSettingsModal.jsx b/src/components/ComponentSettingsModal.jsx
index 62c248990..84837e001 100644
--- a/src/components/ComponentSettingsModal.jsx
+++ b/src/components/ComponentSettingsModal.jsx
@@ -4,17 +4,17 @@ import axios from "axios"
 import PropTypes from "prop-types"
 import * as _ from "lodash"
 
-import FormField from "@components/FormField"
-import FormFieldHorizontal from "@components/FormFieldHorizontal"
-import ResourceFormFields from "@components/ResourceFormFields"
-import SaveDeleteButtons from "@components/SaveDeleteButtons"
+import FormField from "./FormField"
+import FormFieldHorizontal from "./FormFieldHorizontal"
+import ResourceFormFields from "./ResourceFormFields"
+import SaveDeleteButtons from "./SaveDeleteButtons"
 import {
   RESOURCE_ROOM_NAME_KEY,
   RESOURCE_CATEGORY_CONTENT_KEY,
-} from "@src/constants"
+} from "../constants"
 
-import useSiteUrlHook from "@hooks/useSiteUrlHook"
-import useRedirectHook from "@hooks/useRedirectHook"
+import useSiteUrlHook from "../hooks/useSiteUrlHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 
 import {
   DEFAULT_RETRY_MSG,
@@ -24,19 +24,19 @@ import {
   concatFrontMatterMdBody,
   deslugifyDirectory,
   slugifyCategory,
-} from "@src/utils"
+} from "../utils"
 
 import {
   createPageData,
   updatePageData,
   renamePageData,
   getResourceRoomName,
-} from "@src/api"
+} from "../api"
 
-import { validateResourceSettings } from "@utils/validators"
-import { errorToast, successToast } from "@utils/toasts"
+import { validateResourceSettings } from "../utils/validators"
+import { errorToast, successToast } from "../utils/toasts"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -159,7 +159,7 @@ const ComponentSettingsModal = ({
             )
             .includes(slugifyCategory(exampleTitle))
         ) {
-          exampleTitle = exampleTitle + "_1"
+          exampleTitle += "_1"
         }
         if (_isMounted) {
           setTitle(exampleTitle)
@@ -208,16 +208,14 @@ const ComponentSettingsModal = ({
     } = event
     if (value === "file") {
       setPermalink("")
-      setFileUrl(originalFileUrl ? originalFileUrl : "")
+      setFileUrl(originalFileUrl || "")
       setIsPost(false)
       setErrors((prevState) => ({
         ...prevState,
         permalink: "",
       }))
     } else {
-      setPermalink(
-        originalPermalink ? originalPermalink : `/${category}/permalink`
-      )
+      setPermalink(originalPermalink || `/${category}/permalink`)
       setFileUrl("")
       setIsPost(true)
       setErrors((prevState) => ({
@@ -339,7 +337,7 @@ const ComponentSettingsModal = ({
                   id="title"
                   value={title}
                   errorMessage={errors.title}
-                  isRequired={true}
+                  isRequired
                   onFieldChange={changeHandler}
                 />
                 <p className={elementStyles.formLabel}>
@@ -364,7 +362,7 @@ const ComponentSettingsModal = ({
                   isPost={isPost}
                   setIsPost={setIsPost}
                   siteName={siteName}
-                  fileUrl={fileUrl ? fileUrl : ""}
+                  fileUrl={fileUrl || ""}
                 />
               </div>
               <SaveDeleteButtons
diff --git a/src/components/DeleteWarningModal.jsx b/src/components/DeleteWarningModal.jsx
index 49e62cf4c..77ab625a9 100644
--- a/src/components/DeleteWarningModal.jsx
+++ b/src/components/DeleteWarningModal.jsx
@@ -1,10 +1,7 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import LoadingButton from "@components/LoadingButton"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import LoadingButton from "./LoadingButton"
 
 const DeleteWarningModal = ({ onDelete, onCancel, type }) => (
   <div className={elementStyles.overlay}>
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index f6e2f3e40..135000704 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -1,10 +1,7 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { slugifyLower } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import { slugifyLower } from "../utils"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const Dropdown = ({
   options,
diff --git a/src/components/FallbackComponent.jsx b/src/components/FallbackComponent.jsx
index 2679a906e..e986975f0 100644
--- a/src/components/FallbackComponent.jsx
+++ b/src/components/FallbackComponent.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import errorStyles from "@styles/isomer-cms/pages/Error.module.scss"
+import errorStyles from "../styles/isomer-cms/pages/Error.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 function FallbackComponent({ error }) {
   console.log(error)
diff --git a/src/components/FileMoveMenuDropdown.jsx b/src/components/FileMoveMenuDropdown.jsx
index 1d271952f..bf5bff6d2 100644
--- a/src/components/FileMoveMenuDropdown.jsx
+++ b/src/components/FileMoveMenuDropdown.jsx
@@ -1,10 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
-import { MenuItem } from "@components/MenuDropdown"
-import { deslugifyDirectory } from "@src/utils"
+import { MenuItem } from "./MenuDropdown"
+import { deslugifyDirectory } from "../utils"
 
 const FileMoveMenuDropdown = ({
   dropdownItems,
@@ -68,17 +68,15 @@ const FileMoveMenuDropdown = ({
           {moveDropdownQuery.split("/").map((folderName, idx, arr) => {
             return idx === arr.length - 1 ? (
               <>
-                {" "}
-                >{" "}
+                {">"}
                 <strong className="ml-1">
-                  {" "}
+                  &nbsp;
                   {deslugifyDirectory(folderName)}
                 </strong>
               </>
             ) : (
               <>
-                {" "}
-                >{" "}
+                {">"}
                 <BreadcrumbButton
                   id={`breadcrumbItem-${idx + 1}`}
                   idx={idx}
diff --git a/src/components/FolderCard.jsx b/src/components/FolderCard.jsx
index 009707f8c..1c9ba0abe 100644
--- a/src/components/FolderCard.jsx
+++ b/src/components/FolderCard.jsx
@@ -1,30 +1,30 @@
 import React, { useEffect, useRef, useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
 import { Link } from "react-router-dom"
-
 import PropTypes from "prop-types"
+import { useQueryClient, useMutation } from "react-query"
+
+import FolderModal from "./FolderModal"
+import DeleteWarningModal from "./DeleteWarningModal"
+import { MenuDropdown } from "./MenuDropdown"
 
 import {
   deleteFolder,
-  deleteMediaSubfolder,
   deleteResourceCategory,
-} from "@src/api"
+  deleteMediaSubfolder,
+} from "../api"
+
+import { errorToast, successToast } from "../utils/toasts"
 import {
+  IMAGE_CONTENTS_KEY,
   DOCUMENT_CONTENTS_KEY,
   FOLDERS_CONTENT_KEY,
-  IMAGE_CONTENTS_KEY,
   RESOURCE_ROOM_CONTENT_KEY,
-} from "@src/constants"
-import { DEFAULT_RETRY_MSG } from "@src/utils"
-
-import { errorToast, successToast } from "@utils/toasts"
+} from "../constants"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import FolderModal from "@components/FolderModal"
-import { MenuDropdown } from "@components/MenuDropdown"
+import { DEFAULT_RETRY_MSG } from "../utils"
 
 const FolderCard = ({
   displayText,
diff --git a/src/components/FolderCreationModal.jsx b/src/components/FolderCreationModal.jsx
index 40f4ffb7a..7e062ca15 100644
--- a/src/components/FolderCreationModal.jsx
+++ b/src/components/FolderCreationModal.jsx
@@ -1,26 +1,24 @@
 import React, { useEffect, useState } from "react"
-import { useMutation } from "react-query"
-
 import axios from "axios"
-import update from "immutability-helper"
-import * as _ from "lodash"
 import PropTypes from "prop-types"
+import * as _ from "lodash"
+import update from "immutability-helper"
+import { useMutation } from "react-query"
+import Select from "react-select"
 
-import { moveFiles } from "@src/api"
-import { DEFAULT_RETRY_MSG, deslugifyPage, slugifyCategory } from "@src/utils"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-
-import { errorToast } from "@utils/toasts"
-import { validateCategoryName } from "@utils/validators"
+import FolderCard from "./FolderCard"
+import LoadingButton from "./LoadingButton"
+import FolderNamingModal from "./FolderNamingModal"
+import { errorToast } from "../utils/toasts"
+import useRedirectHook from "../hooks/useRedirectHook"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import adminStyles from "@styles/isomer-cms/pages/Admin.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import { validateCategoryName } from "../utils/validators"
+import { deslugifyPage, slugifyCategory, DEFAULT_RETRY_MSG } from "../utils"
 
-import FolderCard from "@components/FolderCard"
-import FolderNamingModal from "@components/FolderNamingModal"
-import LoadingButton from "@components/LoadingButton"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
+import adminStyles from "../styles/isomer-cms/pages/Admin.module.scss"
+import { moveFiles } from "../api"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -116,7 +114,9 @@ const FolderCreationModal = ({
   }
 
   const sortFuncs = {
-    title: (a, b) => a.fileName.localeCompare(b.fileName),
+    title: (a, b) => {
+      return a.fileName.localeCompare(b.fileName)
+    },
   }
 
   const sortOrderChangeHandler = (option) => {
diff --git a/src/components/FolderModal.jsx b/src/components/FolderModal.jsx
index f04bc893f..857a02243 100644
--- a/src/components/FolderModal.jsx
+++ b/src/components/FolderModal.jsx
@@ -1,35 +1,33 @@
 import React, { useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-
 import axios from "axios"
 import PropTypes from "prop-types"
+import { useMutation, useQueryClient } from "react-query"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import SaveDeleteButtons from "./SaveDeleteButtons"
+import FormField from "./FormField"
 
 import {
   renameFolder,
-  renameMediaSubfolder,
-  renameResourceCategory,
   renameSubfolder,
-} from "@src/api"
-import {
-  DIR_CONTENT_KEY,
-  DOCUMENT_CONTENTS_KEY,
-  FOLDERS_CONTENT_KEY,
-  IMAGE_CONTENTS_KEY,
-  RESOURCE_ROOM_CONTENT_KEY,
-} from "@src/constants"
+  renameResourceCategory,
+  renameMediaSubfolder,
+} from "../api"
+
 import {
   DEFAULT_RETRY_MSG,
-  deslugifyDirectory,
   slugifyCategory,
-} from "@src/utils"
-
-import { errorToast, successToast } from "@utils/toasts"
-import { validateCategoryName } from "@utils/validators"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+  deslugifyDirectory,
+} from "../utils"
 
-import FormField from "@components/FormField"
-import SaveDeleteButtons from "@components/SaveDeleteButtons"
+import { validateCategoryName } from "../utils/validators"
+import { errorToast, successToast } from "../utils/toasts"
+import {
+  DOCUMENT_CONTENTS_KEY,
+  IMAGE_CONTENTS_KEY,
+  DIR_CONTENT_KEY,
+  FOLDERS_CONTENT_KEY,
+  RESOURCE_ROOM_CONTENT_KEY,
+} from "../constants"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/components/FolderNamingModal.jsx b/src/components/FolderNamingModal.jsx
index bd182592b..36a62e7ba 100644
--- a/src/components/FolderNamingModal.jsx
+++ b/src/components/FolderNamingModal.jsx
@@ -1,12 +1,9 @@
 import React from "react"
-
-import * as _ from "lodash"
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import LoadingButton from "@components/LoadingButton"
+import * as _ from "lodash"
+import FormField from "./FormField"
+import LoadingButton from "./LoadingButton"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FolderNamingModal = ({
   onClose,
diff --git a/src/components/FolderReorderingModal.jsx b/src/components/FolderReorderingModal.jsx
index b3245f995..4e674630f 100644
--- a/src/components/FolderReorderingModal.jsx
+++ b/src/components/FolderReorderingModal.jsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import PropTypes from "prop-types"
-import { Droppable, Draggable } from "react-beautiful-dnd"
-import { DragDropContext } from "react-beautiful-dnd"
+import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd"
+
 import { useMutation } from "react-query"
 import update from "immutability-helper"
 
-import { FolderContentItem } from "@components/folders/FolderContent"
-import LoadingButton from "@components/LoadingButton"
+import { FolderContentItem } from "./folders/FolderContent"
+import LoadingButton from "./LoadingButton"
 
 import {
   DEFAULT_RETRY_MSG,
@@ -14,16 +14,16 @@ import {
   convertSubfolderArray,
   updateDirectoryFile,
   convertArrayToFolderOrder,
-} from "@src/utils"
+} from "../utils"
 
-import { errorToast, successToast } from "@utils/toasts"
+import { errorToast, successToast } from "../utils/toasts"
 
-import { setDirectoryFile } from "@src/api"
+import { setDirectoryFile } from "../api"
 
 // Import styles
-import adminStyles from "@styles/isomer-cms/pages/Admin.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import adminStyles from "../styles/isomer-cms/pages/Admin.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
 const FolderReorderingModal = ({
   siteName,
@@ -140,12 +140,16 @@ const FolderReorderingModal = ({
             <br />
             <div className={contentStyles.segment}>
               <span>
-                Workspace >
+                Workspace {">"}
                 {subfolderName ? (
                   <>
-                    {" "}
-                    {deslugifyDirectory(folderName)}{" "}
-                    <strong> > {deslugifyDirectory(subfolderName)}</strong>{" "}
+                    &nbsp;
+                    {deslugifyDirectory(folderName)}&nbsp;
+                    <strong>
+                      {">"}
+                      {deslugifyDirectory(subfolderName)}
+                    </strong>
+                    &nbsp;
                   </>
                 ) : (
                   <strong> {deslugifyDirectory(folderName)}</strong>
@@ -179,7 +183,7 @@ const FolderReorderingModal = ({
                                 key={folderContentItem.fileName}
                                 folderContentItem={folderContentItem}
                                 itemIndex={folderContentIndex}
-                                disableLink={true}
+                                disableLink
                               />
                             </div>
                           )}
@@ -194,13 +198,13 @@ const FolderReorderingModal = ({
           </div>
           <div className={contentStyles.sectionFooter}>
             <LoadingButton
-              label={`Cancel`}
+              label="Cancel"
               disabledStyle={elementStyles.disabled}
               className={`${elementStyles.warning}`}
               callback={() => setIsRearrangeActive(false)}
             />
             <LoadingButton
-              label={`Done`}
+              label="Done"
               className={elementStyles.blue}
               callback={saveHandler}
             />
diff --git a/src/components/FormField.jsx b/src/components/FormField.jsx
index 8c6735d0e..ea96c65d7 100644
--- a/src/components/FormField.jsx
+++ b/src/components/FormField.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FormField = ({
   title,
diff --git a/src/components/FormFieldColor.jsx b/src/components/FormFieldColor.jsx
index e54f6148f..aa19b074d 100644
--- a/src/components/FormFieldColor.jsx
+++ b/src/components/FormFieldColor.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FormFieldColor = ({
   title,
diff --git a/src/components/FormFieldHorizontal.jsx b/src/components/FormFieldHorizontal.jsx
index 8918dd4bc..cb943542c 100644
--- a/src/components/FormFieldHorizontal.jsx
+++ b/src/components/FormFieldHorizontal.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FormFieldHorizontal = ({
   title,
diff --git a/src/components/FormFieldMedia.jsx b/src/components/FormFieldMedia.jsx
index 116ba5a47..104b30a24 100644
--- a/src/components/FormFieldMedia.jsx
+++ b/src/components/FormFieldMedia.jsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react"
-
 import PropTypes from "prop-types"
 
-import { successToast } from "@utils/toasts"
+import MediaModal from "./media/MediaModal"
+import MediaSettingsModal from "./media/MediaSettingsModal"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import { successToast } from "../utils/toasts"
 
-import MediaModal from "@components/media/MediaModal"
-import MediaSettingsModal from "@components/media/MediaSettingsModal"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FormFieldMedia = ({
   title,
diff --git a/src/components/FormFieldPermalink.jsx b/src/components/FormFieldPermalink.jsx
index f310e79d0..28ce071b5 100644
--- a/src/components/FormFieldPermalink.jsx
+++ b/src/components/FormFieldPermalink.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const FormFieldPermalink = ({
   title,
diff --git a/src/components/FormFieldToggle.jsx b/src/components/FormFieldToggle.jsx
index 9068afc5d..b8a34ffb2 100644
--- a/src/components/FormFieldToggle.jsx
+++ b/src/components/FormFieldToggle.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-import ToggleButton from "react-toggle-button"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import ToggleButton from "react-toggle-button"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const creatableSelectHandler = (callback, dropdownEvent, id) => {
   callback({
diff --git a/src/components/GenericWarningModal.jsx b/src/components/GenericWarningModal.jsx
index 1f4f13b87..a884442d4 100644
--- a/src/components/GenericWarningModal.jsx
+++ b/src/components/GenericWarningModal.jsx
@@ -1,11 +1,8 @@
 import React from "react"
-
-import parse from "html-react-parser"
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import LoadingButton from "@components/LoadingButton"
+import parse from "html-react-parser"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import LoadingButton from "./LoadingButton"
 
 const GenericWarningModal = ({
   displayTitle,
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 99e951dc2..51319cdfe 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,14 +1,10 @@
-import React, { useEffect, useState } from "react"
-
+import React, { useState, useEffect } from "react"
 import axios from "axios"
 import PropTypes from "prop-types"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-import useSiteUrlHook from "@hooks/useSiteUrlHook"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import GenericWarningModal from "@components/GenericWarningModal"
+import GenericWarningModal from "./GenericWarningModal"
+import useRedirectHook from "../hooks/useRedirectHook"
+import useSiteUrlHook from "../hooks/useSiteUrlHook"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/components/HyperlinkModal.jsx b/src/components/HyperlinkModal.jsx
index 8eca33627..f42ed37db 100644
--- a/src/components/HyperlinkModal.jsx
+++ b/src/components/HyperlinkModal.jsx
@@ -1,12 +1,9 @@
 import React, { Component } from "react"
-
-import axios from "axios"
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import SaveDeleteButtons from "@components/SaveDeleteButtons"
+import axios from "axios"
+import FormField from "./FormField"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import SaveDeleteButtons from "./SaveDeleteButtons"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -48,14 +45,14 @@ export default class HyperlinkModal extends Component {
                   title="Text"
                   id="text"
                   value={text}
-                  isRequired={true}
+                  isRequired
                   onFieldChange={this.changeHandler}
                 />
                 <FormField
                   title="Link"
                   id="link"
                   value={link}
-                  isRequired={true}
+                  isRequired
                   onFieldChange={this.changeHandler}
                 />
               </div>
diff --git a/src/components/InputMaskFormField.jsx b/src/components/InputMaskFormField.jsx
index d4110d960..c4cd8f5f6 100644
--- a/src/components/InputMaskFormField.jsx
+++ b/src/components/InputMaskFormField.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-import InputMask from "react-input-mask"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import InputMask from "react-input-mask"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const InputMaskFormField = ({
   title,
diff --git a/src/components/LoadingButton.jsx b/src/components/LoadingButton.jsx
index 8610315ed..b37661804 100644
--- a/src/components/LoadingButton.jsx
+++ b/src/components/LoadingButton.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from "react"
-
 import PropTypes from "prop-types"
 
 export default function LoadingButton(props) {
diff --git a/src/components/LoadingButtonReactQuery.jsx b/src/components/LoadingButtonReactQuery.jsx
index babb9b4fc..909e60c41 100644
--- a/src/components/LoadingButtonReactQuery.jsx
+++ b/src/components/LoadingButtonReactQuery.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 export default function LoadingButton(props) {
diff --git a/src/components/MenuDropdown.jsx b/src/components/MenuDropdown.jsx
index 2c90ef2db..3061a1115 100644
--- a/src/components/MenuDropdown.jsx
+++ b/src/components/MenuDropdown.jsx
@@ -1,6 +1,6 @@
 import React from "react"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const MenuItem = ({ item, menuIndex, dropdownRef, className }) => {
   const getItemType = (type) => {
@@ -58,24 +58,26 @@ const MenuDropdown = ({
   dropdownRef,
   tabIndex,
   onBlur,
-}) => (
-  <div
-    className={`${elementStyles.dropdown} ${elementStyles.right}`}
-    ref={dropdownRef}
-    tabIndex={tabIndex}
-    onBlur={onBlur}
-  >
-    {dropdownItems
-      .filter((x) => x)
-      .map((item) => (
-        <MenuItem
-          key={`${item.type || item.itemId}-${menuIndex}`}
-          item={item}
-          menuIndex={menuIndex}
-          dropdownRef={dropdownRef}
-        />
-      ))}
-  </div>
-)
+}) => {
+  return (
+    <div
+      className={`${elementStyles.dropdown} ${elementStyles.right}`}
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      onBlur={onBlur}
+    >
+      {dropdownItems
+        .filter((x) => x)
+        .map((item) => (
+          <MenuItem
+            key={`${item.type || item.itemId}-${menuIndex}`}
+            item={item}
+            menuIndex={menuIndex}
+            dropdownRef={dropdownRef}
+          />
+        ))}
+    </div>
+  )
+}
 
 export { MenuItem, MenuDropdown }
diff --git a/src/components/NotFoundPage.jsx b/src/components/NotFoundPage.jsx
index 84e6fbac9..1897ea90b 100644
--- a/src/components/NotFoundPage.jsx
+++ b/src/components/NotFoundPage.jsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Link } from "react-router-dom"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import errorStyles from "@styles/isomer-cms/pages/Error.module.scss"
+import errorStyles from "../styles/isomer-cms/pages/Error.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const NotFoundPage = ({ location }) => {
   const siteName = location?.state?.siteName
diff --git a/src/components/OverviewCard.jsx b/src/components/OverviewCard.jsx
index f67f38641..8b3102097 100644
--- a/src/components/OverviewCard.jsx
+++ b/src/components/OverviewCard.jsx
@@ -1,23 +1,21 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useState, useRef } from "react"
 import { Link } from "react-router-dom"
-
 import axios from "axios"
 import PropTypes from "prop-types"
+import { MenuDropdown } from "./MenuDropdown"
+import FileMoveMenuDropdown from "./FileMoveMenuDropdown"
+
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
 // Import utils
 import {
-  deslugifyDirectory,
   prettifyCollectionPageFileName,
-  prettifyDate,
   prettifyPageFileName,
+  prettifyDate,
   retrieveResourceFileMetadata,
-} from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
-
-import FileMoveMenuDropdown from "@components/FileMoveMenuDropdown"
-import { MenuDropdown } from "@components/MenuDropdown"
+  deslugifyDirectory,
+} from "../utils"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/components/PageSettingsModal.jsx b/src/components/PageSettingsModal.jsx
index 1822611bb..35274dc7f 100644
--- a/src/components/PageSettingsModal.jsx
+++ b/src/components/PageSettingsModal.jsx
@@ -11,26 +11,26 @@ import {
   frontMatterParser,
   deslugifyPage,
   deslugifyDirectory,
-} from "@src/utils"
+} from "../utils"
 
-import { createPageData, updatePageData, renamePageData } from "@src/api"
+import { createPageData, updatePageData, renamePageData } from "../api"
 import {
   PAGE_SETTINGS_KEY,
   DIR_CONTENT_KEY,
   PAGE_CONTENT_KEY,
-} from "@src/constants"
+} from "../constants"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
-import { validatePageSettings } from "@utils/validators"
-import { errorToast, successToast } from "@utils/toasts"
+import { validatePageSettings } from "../utils/validators"
+import { errorToast, successToast } from "../utils/toasts"
 
-import FormField from "@components/FormField"
-import FormFieldHorizontal from "@components/FormFieldHorizontal"
-import SaveDeleteButtons from "@components/SaveDeleteButtons"
+import FormField from "./FormField"
+import FormFieldHorizontal from "./FormFieldHorizontal"
+import SaveDeleteButtons from "./SaveDeleteButtons"
 
-import useSiteUrlHook from "@hooks/useSiteUrlHook"
-import useRedirectHook from "@hooks/useRedirectHook"
+import useSiteUrlHook from "../hooks/useSiteUrlHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -167,7 +167,7 @@ const PageSettingsModal = ({
       if (isNewPage) {
         let exampleTitle = "Example Title"
         while (pagesData.includes(generatePageFileName(exampleTitle))) {
-          exampleTitle = exampleTitle + "_1"
+          exampleTitle += "_1"
         }
         const examplePermalink = `/${folderName ? `${folderName}/` : ""}${
           subfolderName ? `${subfolderName}/` : ""
@@ -247,12 +247,18 @@ const PageSettingsModal = ({
                 {isNewPage ? "You may edit page details anytime. " : ""}
                 To edit page content, simply click on the page title. <br />
                 <span className={elementStyles.infoGrey}>
-                  My workspace >
+                  My workspace {">"}
                   {folderName ? (
-                    <span> {deslugifyDirectory(folderName)} > </span>
+                    <span>
+                      {deslugifyDirectory(folderName)}
+                      {">"}
+                    </span>
                   ) : null}
                   {subfolderName ? (
-                    <span> {deslugifyDirectory(subfolderName)} > </span>
+                    <span>
+                      {deslugifyDirectory(subfolderName)}
+                      {">"}
+                    </span>
                   ) : null}
                   <u className="ml-1">{title}</u>
                   <br />
@@ -264,7 +270,7 @@ const PageSettingsModal = ({
                   id="title"
                   value={title}
                   errorMessage={errors.title}
-                  isRequired={true}
+                  isRequired
                   onFieldChange={changeHandler}
                 />
                 <br />
@@ -273,9 +279,9 @@ const PageSettingsModal = ({
                 <FormFieldHorizontal
                   title={siteUrl}
                   id="permalink"
-                  value={permalink ? permalink : ""}
+                  value={permalink || ""}
                   errorMessage={errors.permalink}
-                  isRequired={true}
+                  isRequired
                   onFieldChange={changeHandler}
                   placeholder=" "
                 />
diff --git a/src/components/ResourceFormFields.jsx b/src/components/ResourceFormFields.jsx
index 984b722d3..df6e9ad2e 100644
--- a/src/components/ResourceFormFields.jsx
+++ b/src/components/ResourceFormFields.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import FormFieldMedia from "@components/FormFieldMedia"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import FormField from "./FormField"
+import FormFieldMedia from "./FormFieldMedia"
 
 const ResourceFormFields = ({
   date,
diff --git a/src/components/SaveDeleteButtons.jsx b/src/components/SaveDeleteButtons.jsx
index 83983a760..30f4bebd1 100644
--- a/src/components/SaveDeleteButtons.jsx
+++ b/src/components/SaveDeleteButtons.jsx
@@ -1,10 +1,7 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import LoadingButton from "@components/LoadingButton"
+import LoadingButton from "./LoadingButton"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const SaveDeleteButtons = ({
   saveLabel,
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index cdeea7f2a..f1ee901db 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,20 +1,15 @@
 import React, { useEffect, useState } from "react"
-import { useQuery } from "react-query"
-import { Link } from "react-router-dom"
-
 import axios from "axios"
+import { Link } from "react-router-dom"
+import { useQuery } from "react-query"
 import PropTypes from "prop-types"
-
-import { getLastUpdated } from "@src/api"
-import { LAST_UPDATED_KEY } from "@src/constants"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-import useSiteUrlHook from "@hooks/useSiteUrlHook"
-
-import { errorToast } from "@utils/toasts"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import styles from "@styles/isomer-cms/pages/Admin.module.scss"
+import styles from "../styles/isomer-cms/pages/Admin.module.scss"
+import useRedirectHook from "../hooks/useRedirectHook"
+import useSiteUrlHook from "../hooks/useSiteUrlHook"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import { getLastUpdated } from "../api"
+import { LAST_UPDATED_KEY } from "../constants"
+import { errorToast } from "../utils/toasts"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
index fdb1dd41b..7545135b1 100644
--- a/src/components/Toast.jsx
+++ b/src/components/Toast.jsx
@@ -1,8 +1,7 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const Toast = ({ notificationType, text }) => {
   const toastImg = () => {
diff --git a/src/components/contact-us/ContactCard.jsx b/src/components/contact-us/ContactCard.jsx
index 46ee20caf..180f2a9d8 100644
--- a/src/components/contact-us/ContactCard.jsx
+++ b/src/components/contact-us/ContactCard.jsx
@@ -1,13 +1,9 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import ContactFields from "@components/contact-us/ContactFields"
-import FormField from "@components/FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import ContactFields from "./ContactFields"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
@@ -23,59 +19,61 @@ const EditorContactCard = ({
   displayHandler,
   cardErrors,
   sectionId,
-}) => (
-  <div
-    className={`${elementStyles.card} ${
-      !shouldDisplay && !isEmpty(cardErrors) ? elementStyles.error : ""
-    } move`}
-  >
-    <div className={elementStyles.cardHeader}>
-      <h2>{title}</h2>
-      <button
-        type="button"
-        id={`${sectionId}-${cardIndex}`}
-        onClick={displayHandler}
-      >
-        <i
-          className={`bx ${
-            shouldDisplay ? "bx-chevron-down" : "bx-chevron-right"
-          }`}
-          id={`${sectionId}-${cardIndex}-icon`}
-        />
-      </button>
-    </div>
-    {shouldDisplay ? (
-      <>
-        <div className={elementStyles.cardContent}>
-          <FormField
-            title="Title"
-            id={`${sectionId}-${cardIndex}-title`}
-            value={title}
-            onFieldChange={onFieldChange}
-            errorMessage={cardErrors.title}
-          />
-          <ContactFields
-            cardIndex={cardIndex}
-            content={content}
-            onFieldChange={onFieldChange}
-            errors={cardErrors.content}
-            sectionId={sectionId}
+}) => {
+  return (
+    <div
+      className={`${elementStyles.card} ${
+        !shouldDisplay && !isEmpty(cardErrors) ? elementStyles.error : ""
+      } move`}
+    >
+      <div className={elementStyles.cardHeader}>
+        <h2>{title}</h2>
+        <button
+          type="button"
+          id={`${sectionId}-${cardIndex}`}
+          onClick={displayHandler}
+        >
+          <i
+            className={`bx ${
+              shouldDisplay ? "bx-chevron-down" : "bx-chevron-right"
+            }`}
+            id={`${sectionId}-${cardIndex}-icon`}
           />
-        </div>
-        <div className={`${elementStyles.inputGroup} pt-5`}>
-          <button
-            type="button"
-            id={`${sectionId}-${cardIndex}`}
-            className={`btn-block ${elementStyles.warning}`}
-            onClick={deleteHandler}
-          >
-            Delete section
-          </button>
-        </div>
-      </>
-    ) : null}
-  </div>
-)
+        </button>
+      </div>
+      {shouldDisplay ? (
+        <>
+          <div className={elementStyles.cardContent}>
+            <FormField
+              title="Title"
+              id={`${sectionId}-${cardIndex}-title`}
+              value={title}
+              onFieldChange={onFieldChange}
+              errorMessage={cardErrors.title}
+            />
+            <ContactFields
+              cardIndex={cardIndex}
+              content={content}
+              onFieldChange={onFieldChange}
+              errors={cardErrors.content}
+              sectionId={sectionId}
+            />
+          </div>
+          <div className={`${elementStyles.inputGroup} pt-5`}>
+            <button
+              type="button"
+              id={`${sectionId}-${cardIndex}`}
+              className={`btn-block ${elementStyles.warning}`}
+              onClick={deleteHandler}
+            >
+              Delete section
+            </button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
 
 export default EditorContactCard
 
diff --git a/src/components/contact-us/ContactFields.jsx b/src/components/contact-us/ContactFields.jsx
index 4403589bd..afd4b98b5 100644
--- a/src/components/contact-us/ContactFields.jsx
+++ b/src/components/contact-us/ContactFields.jsx
@@ -1,11 +1,9 @@
 import React, { useState } from "react"
-
-import _ from "lodash"
 import PropTypes from "prop-types"
-
-import Dropdown from "@components/Dropdown"
-import FormField from "@components/FormField"
-import InputMaskFormField from "@components/InputMaskFormField"
+import _ from "lodash"
+import FormField from "../FormField"
+import InputMaskFormField from "../InputMaskFormField"
+import Dropdown from "../Dropdown"
 
 const ContactFields = ({
   cardIndex,
diff --git a/src/components/contact-us/LocationCard.jsx b/src/components/contact-us/LocationCard.jsx
index 426aab449..2b67d08d6 100644
--- a/src/components/contact-us/LocationCard.jsx
+++ b/src/components/contact-us/LocationCard.jsx
@@ -1,16 +1,9 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import {
-  LocationAddressFields,
-  LocationHoursFields,
-} from "@components/contact-us/LocationFields"
-import FormField from "@components/FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import { LocationHoursFields, LocationAddressFields } from "./LocationFields"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/contact-us/LocationFields.jsx b/src/components/contact-us/LocationFields.jsx
index b89fe5840..dfe08ea7f 100644
--- a/src/components/contact-us/LocationFields.jsx
+++ b/src/components/contact-us/LocationFields.jsx
@@ -1,13 +1,9 @@
 import React, { useEffect, useState } from "react"
-
-import _ from "lodash"
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import _ from "lodash"
+import FormField from "../FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import { isEmpty } from "../../utils"
 
 const DEFAULT_NUM_OPERATING_FIELDS = 5
 
@@ -17,70 +13,72 @@ const LocationHoursFields = ({
   onFieldChange,
   errors,
   sectionId,
-}) => (
-  <div className="mt-4">
-    <h6> Operating Hours </h6>
-    {operatingHours &&
-      operatingHours.map((operations, operationsIndex) => (
-        <div className="mb-1" key={operationsIndex}>
-          <div className="d-flex flex-row">
-            <div className="w-50 pr-1">
-              <FormField
-                title="Days"
-                id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-days`}
-                value={operations.days}
-                onFieldChange={onFieldChange}
-                errorMessage={errors[operationsIndex].days}
-              />
+}) => {
+  return (
+    <div className="mt-4">
+      <h6> Operating Hours </h6>
+      {operatingHours &&
+        operatingHours.map((operations, operationsIndex) => (
+          <div className="mb-1" key={operationsIndex}>
+            <div className="d-flex flex-row">
+              <div className="w-50 pr-1">
+                <FormField
+                  title="Days"
+                  id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-days`}
+                  value={operations.days}
+                  onFieldChange={onFieldChange}
+                  errorMessage={errors[operationsIndex].days}
+                />
+              </div>
+              <div className="w-50 pl-1">
+                <FormField
+                  title="Hours"
+                  id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-time`}
+                  value={operations.time}
+                  onFieldChange={onFieldChange}
+                  errorMessage={errors[operationsIndex].time}
+                />
+              </div>
             </div>
-            <div className="w-50 pl-1">
+            <div>
               <FormField
-                title="Hours"
-                id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-time`}
-                value={operations.time}
+                title="Description"
+                id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-description`}
+                value={operations.description}
                 onFieldChange={onFieldChange}
-                errorMessage={errors[operationsIndex].time}
+                errorMessage={errors[operationsIndex].description}
               />
             </div>
+            <a
+              className={elementStyles.formFixedText}
+              id={`${sectionId}-${cardIndex}-remove_operating_hours-${operationsIndex}`}
+              href="#"
+              onClick={onFieldChange}
+            >
+              Remove
+            </a>
           </div>
-          <div>
-            <FormField
-              title="Description"
-              id={`${sectionId}-${cardIndex}-operating_hours-${operationsIndex}-description`}
-              value={operations.description}
-              onFieldChange={onFieldChange}
-              errorMessage={errors[operationsIndex].description}
-            />
-          </div>
+        ))}
+      <div className="mt-3">
+        {operatingHours.length < DEFAULT_NUM_OPERATING_FIELDS ? (
           <a
-            className={elementStyles.formFixedText}
-            id={`${sectionId}-${cardIndex}-remove_operating_hours-${operationsIndex}`}
+            className={elementStyles.formLabel}
+            id={`${sectionId}-${cardIndex}-add_operating_hours`}
             href="#"
             onClick={onFieldChange}
           >
-            Remove
+            Add operating hours
           </a>
-        </div>
-      ))}
-    <div className="mt-3">
-      {operatingHours.length < DEFAULT_NUM_OPERATING_FIELDS ? (
-        <a
-          className={elementStyles.formLabel}
-          id={`${sectionId}-${cardIndex}-add_operating_hours`}
-          href="#"
-          onClick={onFieldChange}
-        >
-          Add operating hours
-        </a>
-      ) : (
-        <p className={elementStyles.formLabel}>
-          {" "}
-          Maximum 5 operating hours fields
-        </p>
-      )}
+        ) : (
+          <p className={elementStyles.formLabel}>
+            {" "}
+            Maximum 5 operating hours fields
+          </p>
+        )}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 const LocationAddressFields = ({
   title,
diff --git a/src/components/contact-us/Section.jsx b/src/components/contact-us/Section.jsx
index cc48e5295..6a9497157 100644
--- a/src/components/contact-us/Section.jsx
+++ b/src/components/contact-us/Section.jsx
@@ -1,16 +1,12 @@
 import React from "react"
-import { Draggable, Droppable } from "react-beautiful-dnd"
-
-import _ from "lodash"
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import styles from "@styles/App.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import EditorContactCard from "@components/contact-us/ContactCard"
-import EditorLocationCard from "@components/contact-us/LocationCard"
+import { Droppable, Draggable } from "react-beautiful-dnd"
+import _ from "lodash"
+import styles from "../../styles/App.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import EditorContactCard from "./ContactCard"
+import EditorLocationCard from "./LocationCard"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/folders/FolderContent.jsx b/src/components/folders/FolderContent.jsx
index 15dd2d466..8a866c551 100644
--- a/src/components/folders/FolderContent.jsx
+++ b/src/components/folders/FolderContent.jsx
@@ -1,15 +1,14 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useState, useRef, useEffect } from "react"
 import { Link } from "react-router-dom"
-
 import PropTypes from "prop-types"
 
-import { deslugifyPage } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import { deslugifyPage } from "../../utils"
+import { MenuDropdown } from "../MenuDropdown"
+import FileMoveMenuDropdown from "../FileMoveMenuDropdown"
 
-import FileMoveMenuDropdown from "@components/FileMoveMenuDropdown"
-import { MenuDropdown } from "@components/MenuDropdown"
+// Import styles
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
 const FolderContentItem = ({
   folderContentItem,
diff --git a/src/components/folders/FolderOptionButton.jsx b/src/components/folders/FolderOptionButton.jsx
index 3101b6be5..c28a39342 100644
--- a/src/components/folders/FolderOptionButton.jsx
+++ b/src/components/folders/FolderOptionButton.jsx
@@ -1,7 +1,8 @@
 import React from "react"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+// Import styles
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
 const iconSelection = {
   rearrange: "bx-sort",
@@ -18,10 +19,11 @@ const FolderOptionButton = ({
   option,
   isDisabled,
   id,
-}) => (
-  <button
-    type="button"
-    className={`
+}) => {
+  return (
+    <button
+      type="button"
+      className={`
                 ${elementStyles.card}
                 ${contentStyles.card}
                 ${isSelected ? elementStyles.folderOptionSelected : ""}
@@ -31,23 +33,26 @@ const FolderOptionButton = ({
                     : elementStyles.folderOption
                 }
             `}
-    disabled={isDisabled}
-    onClick={onClick}
-    id={id}
-  >
-    <div
-      className={`${contentStyles.contentContainerFolderRow} justify-content-center`}
+      disabled={isDisabled}
+      onClick={onClick}
+      id={id}
     >
-      <i
-        className={`bx ${iconSelection[option]} ${
-          elementStyles.folderOptionIcon
-        } ${isSelected ? "text-white" : ""} ${
-          isDisabled ? elementStyles.disabledIcon : ""
-        } mr-2`}
-      />
-      <span className={`${elementStyles.folderOptionText} ml-2`}>{title}</span>
-    </div>
-  </button>
-)
+      <div
+        className={`${contentStyles.contentContainerFolderRow} justify-content-center`}
+      >
+        <i
+          className={`bx ${iconSelection[option]} ${
+            elementStyles.folderOptionIcon
+          } ${isSelected ? "text-white" : ""} ${
+            isDisabled ? elementStyles.disabledIcon : ""
+          } mr-2`}
+        />
+        <span className={`${elementStyles.folderOptionText} ml-2`}>
+          {title}
+        </span>
+      </div>
+    </button>
+  )
+}
 
 export default FolderOptionButton
diff --git a/src/components/homepage/HeroButton.jsx b/src/components/homepage/HeroButton.jsx
index 064c10020..200afde28 100644
--- a/src/components/homepage/HeroButton.jsx
+++ b/src/components/homepage/HeroButton.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import FormField from "@components/FormField"
+import FormField from "../FormField"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/HeroDropdown.jsx b/src/components/homepage/HeroDropdown.jsx
index 1a4d3ff49..2aac3eb5c 100644
--- a/src/components/homepage/HeroDropdown.jsx
+++ b/src/components/homepage/HeroDropdown.jsx
@@ -1,12 +1,9 @@
 import React from "react"
-import { Draggable, Droppable } from "react-beautiful-dnd"
-
 import PropTypes from "prop-types"
-
-import styles from "@styles/App.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import { Droppable, Draggable } from "react-beautiful-dnd"
+import styles from "../../styles/App.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/HeroSection.jsx b/src/components/homepage/HeroSection.jsx
index 8bc79d52c..1aa951d02 100644
--- a/src/components/homepage/HeroSection.jsx
+++ b/src/components/homepage/HeroSection.jsx
@@ -1,18 +1,14 @@
 import React from "react"
-import { Draggable, Droppable } from "react-beautiful-dnd"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import styles from "@styles/App.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import FormFieldMedia from "@components/FormFieldMedia"
-import HeroButton from "@components/homepage/HeroButton"
-import HeroDropdown from "@components/homepage/HeroDropdown"
-import KeyHighlight from "@components/homepage/KeyHighlight"
+import { Droppable, Draggable } from "react-beautiful-dnd"
+import styles from "../../styles/App.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import FormFieldMedia from "../FormFieldMedia"
+import HeroButton from "./HeroButton"
+import HeroDropdown from "./HeroDropdown"
+import KeyHighlight from "./KeyHighlight"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/InfobarSection.jsx b/src/components/homepage/InfobarSection.jsx
index d55114e97..3f5836e36 100644
--- a/src/components/homepage/InfobarSection.jsx
+++ b/src/components/homepage/InfobarSection.jsx
@@ -1,12 +1,8 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/InfopicSection.jsx b/src/components/homepage/InfopicSection.jsx
index 3c4fc122a..bacdbc0f6 100644
--- a/src/components/homepage/InfopicSection.jsx
+++ b/src/components/homepage/InfopicSection.jsx
@@ -1,13 +1,9 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import FormFieldMedia from "@components/FormFieldMedia"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import FormFieldMedia from "../FormFieldMedia"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/KeyHighlight.jsx b/src/components/homepage/KeyHighlight.jsx
index b6a596756..cbaa289ea 100644
--- a/src/components/homepage/KeyHighlight.jsx
+++ b/src/components/homepage/KeyHighlight.jsx
@@ -1,10 +1,7 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/homepage/NewSectionCreator.jsx b/src/components/homepage/NewSectionCreator.jsx
index 5b8aaacd1..e5181ae4d 100644
--- a/src/components/homepage/NewSectionCreator.jsx
+++ b/src/components/homepage/NewSectionCreator.jsx
@@ -1,10 +1,7 @@
 import React, { useState } from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import Dropdown from "@components/Dropdown"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import Dropdown from "../Dropdown"
 
 const NewSectionCreator = ({ createHandler, hasResources }) => {
   const [newSectionType, setNewSectionType] = useState()
diff --git a/src/components/homepage/ResourcesSection.jsx b/src/components/homepage/ResourcesSection.jsx
index 3dfb76701..0a404341d 100644
--- a/src/components/homepage/ResourcesSection.jsx
+++ b/src/components/homepage/ResourcesSection.jsx
@@ -1,12 +1,8 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/media/MediaCard.jsx b/src/components/media/MediaCard.jsx
index b12931ec9..5990036a6 100644
--- a/src/components/media/MediaCard.jsx
+++ b/src/components/media/MediaCard.jsx
@@ -1,15 +1,13 @@
-import React, { useEffect, useRef, useState } from "react"
-import { useQuery } from "react-query"
-
+import React, { useState, useRef, useEffect } from "react"
 import PropTypes from "prop-types"
 
-import { fetchImageURL } from "@src/utils"
-
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
-import mediaStyles from "@styles/isomer-cms/pages/Media.module.scss"
+import { useQuery } from "react-query"
+import { MenuDropdown } from "../MenuDropdown"
+import FileMoveMenuDropdown from "../FileMoveMenuDropdown"
 
-import FileMoveMenuDropdown from "@components/FileMoveMenuDropdown"
-import { MenuDropdown } from "@components/MenuDropdown"
+import mediaStyles from "../../styles/isomer-cms/pages/Media.module.scss"
+import { fetchImageURL } from "../../utils"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
 const MediaCard = ({
   type,
diff --git a/src/components/media/MediaModal.jsx b/src/components/media/MediaModal.jsx
index 9a8eed003..008296433 100644
--- a/src/components/media/MediaModal.jsx
+++ b/src/components/media/MediaModal.jsx
@@ -3,19 +3,19 @@ import PropTypes from "prop-types"
 import _ from "lodash"
 import { useQuery } from "react-query"
 
-import mediaStyles from "@styles/isomer-cms/pages/Media.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import mediaStyles from "../../styles/isomer-cms/pages/Media.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
-import MediaCard from "@components/media/MediaCard"
-import { MediaSearchBar } from "@components/media/MediaSearchBar"
-import LoadingButton from "@components/LoadingButton"
-import useRedirectHook from "@hooks/useRedirectHook"
+import MediaCard from "./MediaCard"
+import { MediaSearchBar } from "./MediaSearchBar"
+import LoadingButton from "../LoadingButton"
+import useRedirectHook from "../../hooks/useRedirectHook"
 
-import { errorToast } from "@utils/toasts"
-import { getMedia } from "@src/api"
-import { DEFAULT_RETRY_MSG, deslugifyDirectory } from "@src/utils"
-import { IMAGE_CONTENTS_KEY, DOCUMENT_CONTENTS_KEY } from "@src/constants"
+import { errorToast } from "../../utils/toasts"
+import { getMedia } from "../../api"
+import { DEFAULT_RETRY_MSG, deslugifyDirectory } from "../../utils"
+import { IMAGE_CONTENTS_KEY, DOCUMENT_CONTENTS_KEY } from "../../constants"
 
 const MediaModal = ({
   siteName,
@@ -176,17 +176,15 @@ const MediaModal = ({
                   {customPath.split("/").map((folderName, idx, arr) => {
                     return idx === arr.length - 1 ? (
                       <>
-                        {" "}
-                        >{" "}
+                        &nbsp;{">"}
                         <strong className="ml-1">
-                          {" "}
+                          &nbsp;
                           {deslugifyDirectory(folderName)}
                         </strong>
                       </>
                     ) : (
                       <>
-                        {" "}
-                        >{" "}
+                        &nbsp;{">"}
                         <BreadcrumbButton
                           idx={idx}
                           name={deslugifyDirectory(folderName)}
diff --git a/src/components/media/MediaSearchBar.jsx b/src/components/media/MediaSearchBar.jsx
index 51a58fe11..b82c29193 100644
--- a/src/components/media/MediaSearchBar.jsx
+++ b/src/components/media/MediaSearchBar.jsx
@@ -1,20 +1,20 @@
 import React from "react"
-
 import PropTypes from "prop-types"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-export const MediaSearchBar = ({ value, onSearchChange }) => (
-  <div className={elementStyles.mediaSearchBarContainer}>
-    <input
-      type="text"
-      placeholder="Search by file name"
-      value={value}
-      autoComplete="off"
-      onChange={onSearchChange}
-    />
-  </div>
-)
+export const MediaSearchBar = ({ value, onSearchChange }) => {
+  return (
+    <div className={elementStyles.mediaSearchBarContainer}>
+      <input
+        type="text"
+        placeholder="Search by file name"
+        value={value}
+        autoComplete="off"
+        onChange={onSearchChange}
+      />
+    </div>
+  )
+}
 
 MediaSearchBar.propTypes = {
   value: PropTypes.string,
diff --git a/src/components/media/MediaSettingsModal.jsx b/src/components/media/MediaSettingsModal.jsx
index 72bdd50ae..4819fd700 100644
--- a/src/components/media/MediaSettingsModal.jsx
+++ b/src/components/media/MediaSettingsModal.jsx
@@ -1,20 +1,18 @@
-import React, { useEffect, useState } from "react"
-import { useMutation, useQuery, useQueryClient } from "react-query"
-
+import React, { useState, useEffect } from "react"
+import { useQuery, useMutation, useQueryClient } from "react-query"
 import PropTypes from "prop-types"
 
-import { createMedia, renameMedia } from "@src/api"
-import { DOCUMENT_CONTENTS_KEY, IMAGE_CONTENTS_KEY } from "@src/constants"
-import { DEFAULT_RETRY_MSG, fetchImageURL } from "@src/utils"
-
-import { errorToast, successToast } from "@utils/toasts"
-import { validateMediaSettings } from "@utils/validators"
+import FormField from "../FormField"
+import SaveDeleteButtons from "../SaveDeleteButtons"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import mediaStyles from "@styles/isomer-cms/pages/Media.module.scss"
+import { validateMediaSettings } from "../../utils/validators"
+import { DEFAULT_RETRY_MSG, fetchImageURL } from "../../utils"
+import { errorToast, successToast } from "../../utils/toasts"
+import { createMedia, renameMedia } from "../../api"
+import { IMAGE_CONTENTS_KEY, DOCUMENT_CONTENTS_KEY } from "../../constants"
 
-import FormField from "@components/FormField"
-import SaveDeleteButtons from "@components/SaveDeleteButtons"
+import mediaStyles from "../../styles/isomer-cms/pages/Media.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
 
 const MediaSettingsModal = ({
   type,
@@ -45,7 +43,13 @@ const MediaSettingsModal = ({
         })
       }
       // Renaming an existing file
-      return renameMedia({ siteName, type, customPath, fileName, newFileName })
+      return renameMedia({
+        siteName,
+        type,
+        customPath,
+        fileName,
+        newFileName,
+      })
     },
     {
       onError: (err) => {
diff --git a/src/components/media/MediaUploadCard.jsx b/src/components/media/MediaUploadCard.jsx
index ff2614e88..0b3d88889 100644
--- a/src/components/media/MediaUploadCard.jsx
+++ b/src/components/media/MediaUploadCard.jsx
@@ -1,10 +1,8 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
-import mediaStyles from "@styles/isomer-cms/pages/Media.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import mediaStyles from "../../styles/isomer-cms/pages/Media.module.scss"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
 const MediaUploadCard = ({ onClick, type }) => (
   <button
diff --git a/src/components/navbar/NavSection.jsx b/src/components/navbar/NavSection.jsx
index e8e719f24..ee76e898b 100644
--- a/src/components/navbar/NavSection.jsx
+++ b/src/components/navbar/NavSection.jsx
@@ -1,16 +1,12 @@
-import React, { useRef, useState } from "react"
-import { Draggable, Droppable } from "react-beautiful-dnd"
-import Select from "react-select"
-
+import React, { useState, useRef } from "react"
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import styles from "@styles/App.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
-import NavSublinkSection from "@components/navbar/NavSublinkSection"
+import { Droppable, Draggable } from "react-beautiful-dnd"
+import Select from "react-select"
+import styles from "../../styles/App.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import NavSublinkSection from "./NavSublinkSection"
+import { isEmpty } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/components/navbar/NavSublinkSection.jsx b/src/components/navbar/NavSublinkSection.jsx
index 257a06bd6..ca4ab275a 100644
--- a/src/components/navbar/NavSublinkSection.jsx
+++ b/src/components/navbar/NavSublinkSection.jsx
@@ -1,14 +1,10 @@
 import React from "react"
-import { Draggable, Droppable } from "react-beautiful-dnd"
-
 import PropTypes from "prop-types"
-
-import { isEmpty } from "@src/utils"
-
-import styles from "@styles/App.module.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-
-import FormField from "@components/FormField"
+import { Droppable, Draggable } from "react-beautiful-dnd"
+import styles from "../../styles/App.module.scss"
+import elementStyles from "../../styles/isomer-cms/Elements.module.scss"
+import FormField from "../FormField"
+import { isEmpty } from "../../utils"
 
 const SublinkElem = ({
   title,
diff --git a/src/contexts/LoginContext.jsx b/src/contexts/LoginContext.jsx
index 072771d79..48125a974 100644
--- a/src/contexts/LoginContext.jsx
+++ b/src/contexts/LoginContext.jsx
@@ -1,8 +1,6 @@
-import React, { createContext, useContext, useEffect, useState } from "react"
-
+import React, { createContext, useEffect, useState, useContext } from "react"
 import axios from "axios"
-
-import { SITES_IS_PRIVATE_KEY } from "@src/constants"
+import { SITES_IS_PRIVATE_KEY } from "../constants"
 
 const { REACT_APP_BACKEND_URL: BACKEND_URL } = process.env
 const LOCAL_STORAGE_USER_ID_KEY = "userId"
@@ -40,8 +38,10 @@ const LoginProvider = ({ children }) => {
 
   // Set interceptors to log users out if an error occurs within the LoginProvider
   axios.interceptors.response.use(
-    (response) => response,
-    async (error) => {
+    function (response) {
+      return response
+    },
+    async function (error) {
       if (error.response && error.response.status === 401) {
         await logout()
       }
diff --git a/src/hooks/useRedirectHook.jsx b/src/hooks/useRedirectHook.jsx
index afcf0e8a4..a8324f52e 100644
--- a/src/hooks/useRedirectHook.jsx
+++ b/src/hooks/useRedirectHook.jsx
@@ -1,7 +1,9 @@
 import { useContext, useEffect, useState } from "react"
 import { useHistory } from "react-router-dom"
+import axios from "axios"
 
-import { LoginContext } from "@contexts/LoginContext"
+// Import contexts
+const { LoginContext } = require("../contexts/LoginContext")
 
 // constants
 const userIdKey = "userId"
diff --git a/src/hooks/useSiteColorsHook.jsx b/src/hooks/useSiteColorsHook.jsx
index dab964972..7c4b948e8 100644
--- a/src/hooks/useSiteColorsHook.jsx
+++ b/src/hooks/useSiteColorsHook.jsx
@@ -1,9 +1,9 @@
 // Utils
 import {
-  createPageStyleSheet,
   defaultSiteColors,
   getSiteColors,
-} from "@utils/siteColorUtils"
+  createPageStyleSheet,
+} from "../utils/siteColorUtils"
 
 // Constants
 const LOCAL_STORAGE_SITE_COLORS = "isomercms_colors"
diff --git a/src/hooks/useSiteUrlHook.jsx b/src/hooks/useSiteUrlHook.jsx
index 72b1a71a2..a7da62625 100644
--- a/src/hooks/useSiteUrlHook.jsx
+++ b/src/hooks/useSiteUrlHook.jsx
@@ -42,11 +42,13 @@ const useSiteUrlHook = () => {
     return localStorageSiteUrl
   }
 
-  const retrieveStagingUrl = async (siteName) =>
-    await retrieveUrl(siteName, "staging")
+  const retrieveStagingUrl = async (siteName) => {
+    return await retrieveUrl(siteName, "staging")
+  }
 
-  const retrieveSiteUrl = async (siteName) =>
-    await retrieveUrl(siteName, "site")
+  const retrieveSiteUrl = async (siteName) => {
+    return await retrieveUrl(siteName, "site")
+  }
 
   return { retrieveStagingUrl, retrieveSiteUrl }
 }
diff --git a/src/index.jsx b/src/index.jsx
index 53e4eb0db..ff3bcfe00 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,14 +1,10 @@
 import React from "react"
 import ReactDOM from "react-dom"
-
 import * as Sentry from "@sentry/react"
 import { Integrations } from "@sentry/tracing"
-
-import { App } from "@src/App"
-
-import "@styles/index.scss"
+import "./styles/index.scss"
 import "sgds-govtech/css/sgds.css"
-
+import App from "./App"
 
 if (
   process.env.REACT_APP_SENTRY_ENV === "staging" ||
diff --git a/src/layouts/CategoryPages.jsx b/src/layouts/CategoryPages.jsx
index ddd1e5eed..af019ec5f 100644
--- a/src/layouts/CategoryPages.jsx
+++ b/src/layouts/CategoryPages.jsx
@@ -1,24 +1,24 @@
-import React, { useEffect, useState } from "react"
-import { useQuery } from "react-query"
-import { Link } from "react-router-dom"
-
+import React, { useState, useEffect } from "react"
 import axios from "axios"
 import PropTypes from "prop-types"
+import { useQuery } from "react-query"
+import { Link } from "react-router-dom"
 
-import { getResourcePages } from "@src/api"
-import { RESOURCE_CATEGORY_CONTENT_KEY } from "@src/constants"
-import { deslugifyDirectory, retrieveResourceFileMetadata } from "@src/utils"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-
-import { errorToast } from "@utils/toasts"
+// Import components
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import CollectionPagesSection from "../components/CollectionPagesSection"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+// Import styles
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
-import CollectionPagesSection from "@components/CollectionPagesSection"
-import Header from "@components/Header"
-import Sidebar from "@components/Sidebar"
+// Import utils
+import { retrieveResourceFileMetadata, deslugifyDirectory } from "../utils.js"
+import { errorToast } from "../utils/toasts"
+import { getResourcePages } from "../api"
+import { RESOURCE_CATEGORY_CONTENT_KEY } from "../constants"
+import useRedirectHook from "../hooks/useRedirectHook"
 
 // Constants
 const BACKEND_URL = process.env.REACT_APP_BACKEND_URL
@@ -120,10 +120,11 @@ const CategoryPages = ({ match, location, isResource }) => {
               <Link to={`/sites/${siteName}/resources`}>
                 <strong>Resources</strong>
               </Link>
+              &nbsp;{">"}
               {collectionName ? (
                 <span>
                   <strong className="ml-1">
-                    {" > "}
+                    &nbsp;
                     {deslugifyDirectory(collectionName)}
                   </strong>
                 </span>
diff --git a/src/layouts/EditContactUs.jsx b/src/layouts/EditContactUs.jsx
index 1417f5296..e4dad3400 100644
--- a/src/layouts/EditContactUs.jsx
+++ b/src/layouts/EditContactUs.jsx
@@ -1,42 +1,41 @@
 // TODO: Clean up formatting, semi-colons, PropTypes etc
 import React, { useEffect, useState } from "react"
-import { DragDropContext } from "react-beautiful-dnd"
-
 import axios from "axios"
-import update from "immutability-helper"
 import _ from "lodash"
 import PropTypes from "prop-types"
+import update from "immutability-helper"
+import { DragDropContext } from "react-beautiful-dnd"
+
+import EditorSection from "../components/contact-us/Section"
+import Header from "../components/Header"
+import LoadingButton from "../components/LoadingButton"
+import FormField from "../components/FormField"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+import GenericWarningModal from "../components/GenericWarningModal"
 
 import {
-  concatFrontMatterMdBody,
   DEFAULT_RETRY_MSG,
   frontMatterParser,
+  concatFrontMatterMdBody,
   isEmpty,
-} from "@src/utils"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-import useSiteColorsHook from "@hooks/useSiteColorsHook"
-
-import TemplateContactsSection from "@templates/contact-us/ContactsSection"
-import TemplateContactUsHeader from "@templates/contact-us/ContactUsHeader"
-import TemplateFeedbackSection from "@templates/contact-us/FeedbackSection"
-import TemplateLocationsSection from "@templates/contact-us/LocationsSection"
+} from "../utils"
+import sanitiseFrontMatter from "../utils/contact-us/dataSanitisers"
+import validateFrontMatter from "../utils/contact-us/validators"
+import { validateContactType, validateLocationType } from "../utils/validators"
+import { errorToast } from "../utils/toasts"
 
-import sanitiseFrontMatter from "@utils/contact-us/dataSanitisers"
-import validateFrontMatter from "@utils/contact-us/validators"
-import { errorToast } from "@utils/toasts"
-import { validateContactType, validateLocationType } from "@utils/validators"
+import "../styles/isomer-template.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import editorStyles from "../styles/isomer-cms/pages/Editor.module.scss"
 
-import "@styles/isomer-template.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import editorStyles from "@styles/isomer-cms/pages/Editor.module.scss"
+import TemplateContactUsHeader from "../templates/contact-us/ContactUsHeader"
+import TemplateLocationsSection from "../templates/contact-us/LocationsSection"
+import TemplateContactsSection from "../templates/contact-us/ContactsSection"
+import TemplateFeedbackSection from "../templates/contact-us/FeedbackSection"
 
-import EditorSection from "@components/contact-us/Section"
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import FormField from "@components/FormField"
-import GenericWarningModal from "@components/GenericWarningModal"
-import Header from "@components/Header"
-import LoadingButton from "@components/LoadingButton"
+// Import hooks
+import useSiteColorsHook from "../hooks/useSiteColorsHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-array-index-key */
@@ -727,7 +726,7 @@ const EditContactUs = ({ match }) => {
         )
       }
 
-      // Update settings
+      // // Update settings
       const updatedFooterContents = _.cloneDeep(footerContent)
 
       const footerParams = {
@@ -756,13 +755,17 @@ const EditContactUs = ({ match }) => {
     }
   }
 
-  const hasErrors = () =>
-    !isEmpty(errors.contacts) || !isEmpty(errors.locations)
+  const hasErrors = () => {
+    return !isEmpty(errors.contacts) || !isEmpty(errors.locations)
+  }
 
-  const hasChanges = () =>
-    JSON.stringify(sanitisedOriginalFrontMatter) ===
-      JSON.stringify(frontMatter) &&
-    JSON.stringify(footerContent) === JSON.stringify(originalFooterContent)
+  const hasChanges = () => {
+    return (
+      JSON.stringify(sanitisedOriginalFrontMatter) ===
+        JSON.stringify(frontMatter) &&
+      JSON.stringify(footerContent) === JSON.stringify(originalFooterContent)
+    )
+  }
 
   return (
     <>
diff --git a/src/layouts/EditHomepage.jsx b/src/layouts/EditHomepage.jsx
index 4e0f17eba..1b35a6ad6 100644
--- a/src/layouts/EditHomepage.jsx
+++ b/src/layouts/EditHomepage.jsx
@@ -1,44 +1,43 @@
-import React, { createRef, useEffect, useState } from "react"
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"
-
+import React, { useEffect, createRef, useState } from "react"
 import axios from "axios"
-import update from "immutability-helper"
 import _ from "lodash"
 import PropTypes from "prop-types"
+import update from "immutability-helper"
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
+
+import EditorInfobarSection from "../components/homepage/InfobarSection"
+import EditorInfopicSection from "../components/homepage/InfopicSection"
+import EditorResourcesSection from "../components/homepage/ResourcesSection"
+import EditorHeroSection from "../components/homepage/HeroSection"
+import NewSectionCreator from "../components/homepage/NewSectionCreator"
+import Header from "../components/Header"
+import LoadingButton from "../components/LoadingButton"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+
+import TemplateHeroSection from "../templates/homepage/HeroSection"
+import TemplateInfobarSection from "../templates/homepage/InfobarSection"
+import TemplateInfopicLeftSection from "../templates/homepage/InfopicLeftSection"
+import TemplateInfopicRightSection from "../templates/homepage/InfopicRightSection"
+import TemplateResourcesSection from "../templates/homepage/ResourcesSection"
 
 import {
+  frontMatterParser,
   concatFrontMatterMdBody,
   DEFAULT_RETRY_MSG,
-  frontMatterParser,
-} from "@src/utils"
-
-import useSiteColorsHook from "@hooks/useSiteColorsHook"
-
-import TemplateHeroSection from "@templates/homepage/HeroSection"
-import TemplateInfobarSection from "@templates/homepage/InfobarSection"
-import TemplateInfopicLeftSection from "@templates/homepage/InfopicLeftSection"
-import TemplateInfopicRightSection from "@templates/homepage/InfopicRightSection"
-import TemplateResourcesSection from "@templates/homepage/ResourcesSection"
-
-import { errorToast } from "@utils/toasts"
+} from "../utils"
 import {
-  validateDropdownElems,
-  validateHighlights,
   validateSections,
-} from "@utils/validators"
-
-import "@styles/isomer-template.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import editorStyles from "@styles/isomer-cms/pages/Editor.module.scss"
-
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import Header from "@components/Header"
-import EditorHeroSection from "@components/homepage/HeroSection"
-import EditorInfobarSection from "@components/homepage/InfobarSection"
-import EditorInfopicSection from "@components/homepage/InfopicSection"
-import NewSectionCreator from "@components/homepage/NewSectionCreator"
-import EditorResourcesSection from "@components/homepage/ResourcesSection"
-import LoadingButton from "@components/LoadingButton"
+  validateHighlights,
+  validateDropdownElems,
+} from "../utils/validators"
+import { errorToast } from "../utils/toasts"
+
+import "../styles/isomer-template.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import editorStyles from "../styles/isomer-cms/pages/Editor.module.scss"
+
+// Import hooks
+import useSiteColorsHook from "../hooks/useSiteColorsHook"
 
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-array-index-key */
diff --git a/src/layouts/EditNavBar.jsx b/src/layouts/EditNavBar.jsx
index b1b92344f..16049d5e7 100644
--- a/src/layouts/EditNavBar.jsx
+++ b/src/layouts/EditNavBar.jsx
@@ -1,32 +1,32 @@
 import React, { useEffect, useState } from "react"
-import { DragDropContext } from "react-beautiful-dnd"
-import { useMutation, useQuery, useQueryClient } from "react-query"
-import { ReactQueryDevtools } from "react-query/devtools"
-
-import update from "immutability-helper"
 import _ from "lodash"
 import PropTypes from "prop-types"
+import update from "immutability-helper"
+import { useQuery, useMutation, useQueryClient } from "react-query"
+import { ReactQueryDevtools } from "react-query/devtools"
+import { DragDropContext } from "react-beautiful-dnd"
 
-import { getEditNavBarData, updateNavBarData } from "@src/api"
-import { NAVIGATION_CONTENT_KEY } from "@src/constants"
-import { DEFAULT_RETRY_MSG, deslugifyDirectory, isEmpty } from "@src/utils"
+import { DEFAULT_RETRY_MSG, deslugifyDirectory, isEmpty } from "../utils"
+import { NAVIGATION_CONTENT_KEY } from "../constants"
+import { validateLink } from "../utils/validators"
+import { errorToast } from "../utils/toasts"
 
-import useRedirectHook from "@hooks/useRedirectHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 
-import TemplateNavBar from "@templates/NavBar"
+import Header from "../components/Header"
+import LoadingButton from "../components/LoadingButton"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+import GenericWarningModal from "../components/GenericWarningModal"
+import NavSection from "../components/navbar/NavSection"
 
-import { errorToast } from "@utils/toasts"
-import { validateLink } from "@utils/validators"
+import TemplateNavBar from "../templates/NavBar"
 
-import "@styles/isomer-template.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import editorStyles from "@styles/isomer-cms/pages/Editor.module.scss"
+import "../styles/isomer-template.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import editorStyles from "../styles/isomer-cms/pages/Editor.module.scss"
 
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import GenericWarningModal from "@components/GenericWarningModal"
-import Header from "@components/Header"
-import LoadingButton from "@components/LoadingButton"
-import NavSection from "@components/navbar/NavSection"
+// Import API
+import { getEditNavBarData, updateNavBarData } from "../api"
 
 const RADIX_PARSE_INT = 10
 
@@ -602,7 +602,9 @@ const EditNavBar = ({ match }) => {
     }
   }
 
-  const hasErrors = () => !isEmpty(errors.links) || !isEmpty(errors.sublinks)
+  const hasErrors = () => {
+    return !isEmpty(errors.links) || !isEmpty(errors.sublinks)
+  }
 
   return (
     <>
diff --git a/src/layouts/EditPage.jsx b/src/layouts/EditPage.jsx
index 1dd80d662..65fb7447d 100644
--- a/src/layouts/EditPage.jsx
+++ b/src/layouts/EditPage.jsx
@@ -1,69 +1,70 @@
 import React, { useEffect, useRef, useState } from "react"
-import { useMutation, useQuery, useQueryClient } from "react-query"
-import SimpleMDE from "react-simplemde-editor"
-
 import axios from "axios"
-import Policy from "csp-parse"
 import _ from "lodash"
-import marked from "marked"
+import { useQuery, useMutation, useQueryClient } from "react-query"
 import PropTypes from "prop-types"
+import SimpleMDE from "react-simplemde-editor"
+import marked from "marked"
+import Policy from "csp-parse"
 
+import SimplePage from "../templates/SimplePage"
+import LeftNavPage from "../templates/LeftNavPage"
+
+import checkCSP from "../utils/cspUtils"
+import { successToast, errorToast } from "../utils/toasts"
+
+// Isomer components
 import {
-  deletePageData,
-  getCsp,
-  getDirectoryFile,
-  getEditPageData,
-  updatePageData,
-} from "@src/api"
-import {
-  CSP_CONTENT_KEY,
-  DIR_CONTENT_KEY,
-  PAGE_CONTENT_KEY,
-} from "@src/constants"
-import {
-  concatFrontMatterMdBody,
   DEFAULT_RETRY_MSG,
-  deslugifyDirectory,
   frontMatterParser,
-  parseDirectoryFile,
+  concatFrontMatterMdBody,
   prependImageSrc,
-  prettifyDate,
   prettifyPageFileName,
   retrieveResourceFileMetadata,
-} from "@src/utils"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-import useSiteColorsHook from "@hooks/useSiteColorsHook"
-
-import LeftNavPage from "@templates/LeftNavPage"
-import SimplePage from "@templates/SimplePage"
-
-import checkCSP from "@utils/cspUtils"
+  prettifyDate,
+  parseDirectoryFile,
+  deslugifyDirectory,
+} from "../utils"
 import {
   boldButton,
-  codeButton,
-  guideButton,
-  headingButton,
   italicButton,
-  orderedListButton,
-  quoteButton,
   strikethroughButton,
-  tableButton,
+  headingButton,
+  codeButton,
+  quoteButton,
   unorderedListButton,
-} from "@utils/markdownToolbar"
-import { errorToast, successToast } from "@utils/toasts"
-
+  orderedListButton,
+  tableButton,
+  guideButton,
+} from "../utils/markdownToolbar"
+import {
+  PAGE_CONTENT_KEY,
+  DIR_CONTENT_KEY,
+  CSP_CONTENT_KEY,
+} from "../constants"
 import "easymde/dist/easymde.min.css"
-import "@styles/isomer-template.scss"
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import editorStyles from "@styles/isomer-cms/pages/Editor.module.scss"
-
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import Header from "@components/Header"
-import HyperlinkModal from "@components/HyperlinkModal"
-import LoadingButton from "@components/LoadingButton"
-import MediaModal from "@components/media/MediaModal"
-import MediaSettingsModal from "@components/media/MediaSettingsModal"
+import "../styles/isomer-template.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import editorStyles from "../styles/isomer-cms/pages/Editor.module.scss"
+import Header from "../components/Header"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+import LoadingButton from "../components/LoadingButton"
+import HyperlinkModal from "../components/HyperlinkModal"
+import MediaModal from "../components/media/MediaModal"
+import MediaSettingsModal from "../components/media/MediaSettingsModal"
+
+// Import hooks
+import useSiteColorsHook from "../hooks/useSiteColorsHook"
+import useRedirectHook from "../hooks/useRedirectHook"
+
+// Import API
+import {
+  getEditPageData,
+  updatePageData,
+  deletePageData,
+  getCsp,
+  getDirectoryFile,
+} from "../api"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -470,81 +471,83 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history }) => {
             onClose={onHyperlinkClose}
           />
         )}
-        <div
-          className={`${editorStyles.pageEditorSidebar} ${
-            isLoadingPageContent || resourceType === "file"
-              ? editorStyles.pageEditorSidebarLoading
-              : null
-          }`}
-        >
-          {resourceType === "file" ? (
-            <>
+        {
+          <div
+            className={`${editorStyles.pageEditorSidebar} ${
+              isLoadingPageContent || resourceType === "file"
+                ? editorStyles.pageEditorSidebarLoading
+                : null
+            }`}
+          >
+            {resourceType === "file" ? (
+              <>
+                <div
+                  className={`text-center ${editorStyles.pageEditorSidebarDisabled}`}
+                >
+                  Editing is disabled for downloadable files.
+                </div>
+              </>
+            ) : isLoadingPageContent ? (
               <div
-                className={`text-center ${editorStyles.pageEditorSidebarDisabled}`}
-              >
-                Editing is disabled for downloadable files.
-              </div>
-            </>
-          ) : isLoadingPageContent ? (
-            <div
-              className={`spinner-border text-primary ${editorStyles.sidebarLoadingIcon}`}
-            />
-          ) : (
-            ""
-          )}
-          <SimpleMDE
-            id="simplemde-editor"
-            className="h-100"
-            onChange={onEditorChange}
-            ref={mdeRef}
-            value={editorValue}
-            options={{
-              toolbar: [
-                headingButton,
-                boldButton,
-                italicButton,
-                strikethroughButton,
-                "|",
-                codeButton,
-                quoteButton,
-                unorderedListButton,
-                orderedListButton,
-                "|",
-                {
-                  name: "image",
-                  action: async () => {
-                    setShowMediaModal(true)
-                    setInsertingMediaType("images")
+                className={`spinner-border text-primary ${editorStyles.sidebarLoadingIcon}`}
+              />
+            ) : (
+              ""
+            )}
+            <SimpleMDE
+              id="simplemde-editor"
+              className="h-100"
+              onChange={onEditorChange}
+              ref={mdeRef}
+              value={editorValue}
+              options={{
+                toolbar: [
+                  headingButton,
+                  boldButton,
+                  italicButton,
+                  strikethroughButton,
+                  "|",
+                  codeButton,
+                  quoteButton,
+                  unorderedListButton,
+                  orderedListButton,
+                  "|",
+                  {
+                    name: "image",
+                    action: async () => {
+                      setShowMediaModal(true)
+                      setInsertingMediaType("images")
+                    },
+                    className: "fa fa-picture-o",
+                    title: "Insert Image",
+                    default: true,
                   },
-                  className: "fa fa-picture-o",
-                  title: "Insert Image",
-                  default: true,
-                },
-                {
-                  name: "file",
-                  action: async () => {
-                    setShowMediaModal(true)
-                    setInsertingMediaType("files")
+                  {
+                    name: "file",
+                    action: async () => {
+                      setShowMediaModal(true)
+                      setInsertingMediaType("files")
+                    },
+                    className: "fa fa-file-pdf-o",
+                    title: "Insert File",
+                    default: true,
                   },
-                  className: "fa fa-file-pdf-o",
-                  title: "Insert File",
-                  default: true,
-                },
-                {
-                  name: "link",
-                  action: async () => {
-                    onHyperlinkOpen()
+                  {
+                    name: "link",
+                    action: async () => {
+                      onHyperlinkOpen()
+                    },
+                    className: "fa fa-link",
+                    title: "Insert Link",
+                    default: true,
                   },
-                  className: "fa fa-link",
-                  title: "Insert Link",
-                  default: true,
-                },
-                tableButton,
-                guideButton,
-              ],
-            }}
-          />
-        </div>
+                  tableButton,
+                  guideButton,
+                ],
+              }}
+            />
+          </div>
+        }
         <div className={editorStyles.pageEditorMain}>
           {isCollectionPage && leftNavPages.length > 0 ? (
             <LeftNavPage
diff --git a/src/layouts/Folders.jsx b/src/layouts/Folders.jsx
index 84f382217..1271cc469 100644
--- a/src/layouts/Folders.jsx
+++ b/src/layouts/Folders.jsx
@@ -6,32 +6,32 @@ import { Link } from "react-router-dom"
 import _ from "lodash"
 
 // Import components
-import Header from "@components/Header"
-import Sidebar from "@components/Sidebar"
-import FolderCreationModal from "@components/FolderCreationModal"
-import FolderOptionButton from "@components/folders/FolderOptionButton"
-import FolderReorderingModal from "@components/FolderReorderingModal"
-import { FolderContent } from "@components/folders/FolderContent"
-import FolderModal from "@components/FolderModal"
-import PageSettingsModal from "@components/PageSettingsModal"
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import GenericWarningModal from "@components/GenericWarningModal"
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import FolderCreationModal from "../components/FolderCreationModal"
+import FolderOptionButton from "../components/folders/FolderOptionButton"
+import FolderReorderingModal from "../components/FolderReorderingModal"
+import { FolderContent } from "../components/folders/FolderContent"
+import FolderModal from "../components/FolderModal"
+import PageSettingsModal from "../components/PageSettingsModal"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+import GenericWarningModal from "../components/GenericWarningModal"
 
-import { errorToast, successToast } from "@utils/toasts"
+import { errorToast, successToast } from "../utils/toasts"
 
-import useRedirectHook from "@hooks/useRedirectHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 import {
   PAGE_CONTENT_KEY,
   FOLDERS_CONTENT_KEY,
   DIR_CONTENT_KEY,
-} from "@src/constants"
+} from "../constants"
 import {
   DEFAULT_RETRY_MSG,
   parseDirectoryFile,
   convertFolderOrderToArray,
   retrieveSubfolderContents,
   deslugifyDirectory,
-} from "@src/utils"
+} from "../utils"
 
 // Import API
 import {
@@ -41,11 +41,11 @@ import {
   deletePageData,
   moveFile,
   getAllCategories,
-} from "@src/api"
+} from "../api"
 
 // Import styles
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
 const Folders = ({ match, location }) => {
   const { siteName, folderName, subfolderName } = match.params
@@ -134,7 +134,7 @@ const Folders = ({ match, location }) => {
       const selectedItem = folderOrderArray.find(
         (item) => item.fileName === selectedPage
       )
-      setIsSelectedItemPage(selectedItem.type === "file" ? true : false)
+      setIsSelectedItemPage(selectedItem.type === "file")
     }
   }, [selectedPage])
 
@@ -201,9 +201,8 @@ const Folders = ({ match, location }) => {
   const { mutateAsync: moveHandler } = useMutation(
     async () => {
       if (
-        `${folderName ? folderName : ""}${
-          subfolderName ? `/${subfolderName}` : ""
-        }` === selectedPath
+        `${folderName || ""}${subfolderName ? `/${subfolderName}` : ""}` ===
+        selectedPath
       )
         return true
       await moveFile({
@@ -268,7 +267,7 @@ const Folders = ({ match, location }) => {
   // parse responses from move-to queries
   const getCategories = (moveDropdownQuery, allFolders, querySubfolders) => {
     const [folderName, subfolderName] = moveDropdownQuery.split("/")
-    if (!!subfolderName) {
+    if (subfolderName) {
       // inside subfolder, show empty
       return []
     }
@@ -369,7 +368,7 @@ const Folders = ({ match, location }) => {
           subfolderName ? `folder/${folderName}` : "workspace"
         }`}
         shouldAllowEditPageBackNav={!isRearrangeActive}
-        isEditPage={true}
+        isEditPage
       />
       {/* main bottom section */}
       <div className={elementStyles.wrapper}>
@@ -399,29 +398,30 @@ const Folders = ({ match, location }) => {
             <span>
               <Link to={`/sites/${siteName}/workspace`}>
                 <strong>Workspace</strong>
-              </Link>{" "}
-              >
+              </Link>
+              &nbsp;
+              {">"}
               {folderName ? (
                 subfolderName ? (
                   <Link to={`/sites/${siteName}/folder/${folderName}`}>
                     <strong className="ml-1">
-                      {" "}
+                      &nbsp;
                       {deslugifyDirectory(folderName)}
                     </strong>
                   </Link>
                 ) : (
                   <strong className="ml-1">
-                    {" "}
+                    &nbsp;
                     {deslugifyDirectory(folderName)}
                   </strong>
                 )
               ) : null}
               {folderName && subfolderName ? (
                 <span>
-                  {" "}
-                  >
+                  &nbsp;
+                  {">"}
                   <strong className="ml-1">
-                    {" "}
+                    &nbsp;
                     {deslugifyDirectory(subfolderName)}
                   </strong>
                 </span>
@@ -446,19 +446,17 @@ const Folders = ({ match, location }) => {
             <FolderOptionButton
               title="Create new subfolder"
               option="create-sub"
-              isDisabled={subfolderName || isLoadingDirectory ? true : false}
+              isDisabled={!!(subfolderName || isLoadingDirectory)}
               onClick={() => setIsFolderCreationActive(true)}
             />
           </div>
           {/* Collections content */}
-          {!isLoadingDirectory &&
-            !queryError &&
-            folderOrderArray.length === 0 && (
-              <span>
-                There are no pages in this{" "}
-                {subfolderName ? `subfolder` : `folder`}.
-              </span>
-            )}
+          {!isLoadingDirectory && !queryError && folderOrderArray.length === 0 && (
+            <span>
+              There are no pages in this&nbsp;
+              {subfolderName ? `subfolder` : `folder`}.
+            </span>
+          )}
           {queryError && (
             <span>
               There was an error retrieving your content. Please refresh the
diff --git a/src/layouts/Home.jsx b/src/layouts/Home.jsx
index c4009cf7f..a44a3d18e 100644
--- a/src/layouts/Home.jsx
+++ b/src/layouts/Home.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import uuid from "uuid"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 const UUID = uuid.v4()
 
diff --git a/src/layouts/Media.jsx b/src/layouts/Media.jsx
index 37dda0c0a..3b8bcbb86 100644
--- a/src/layouts/Media.jsx
+++ b/src/layouts/Media.jsx
@@ -5,37 +5,32 @@ import { Link } from "react-router-dom"
 import { useQuery, useMutation, useQueryClient } from "react-query"
 import { ReactQueryDevtools } from "react-query/devtools"
 
-import Header from "@components/Header"
-import Sidebar from "@components/Sidebar"
-import FolderCard from "@components/FolderCard"
-import FolderOptionButton from "@components/folders/FolderOptionButton"
-import FolderNamingModal from "@components/FolderNamingModal"
-import GenericWarningModal from "@components/GenericWarningModal"
-import DeleteWarningModal from "@components/DeleteWarningModal"
-import MediaCard from "@components/media/MediaCard"
-import MediaSettingsModal from "@components/media/MediaSettingsModal"
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import FolderCard from "../components/FolderCard"
+import FolderOptionButton from "../components/folders/FolderOptionButton"
+import FolderNamingModal from "../components/FolderNamingModal"
+import GenericWarningModal from "../components/GenericWarningModal"
+import DeleteWarningModal from "../components/DeleteWarningModal"
+import MediaCard from "../components/media/MediaCard"
+import MediaSettingsModal from "../components/media/MediaSettingsModal"
 
-import {
-  createMediaSubfolder,
-  getMedia,
-  moveMedia,
-  deleteMedia,
-} from "@src/api"
-import { IMAGE_CONTENTS_KEY, DOCUMENT_CONTENTS_KEY } from "@src/constants"
+import { createMediaSubfolder, getMedia, moveMedia, deleteMedia } from "../api"
+import { IMAGE_CONTENTS_KEY, DOCUMENT_CONTENTS_KEY } from "../constants"
 
-import useRedirectHook from "@hooks/useRedirectHook"
+import useRedirectHook from "../hooks/useRedirectHook"
 
 import {
   DEFAULT_RETRY_MSG,
   deslugifyDirectory,
   slugifyCategory,
-} from "@src/utils"
-import { validateCategoryName } from "@utils/validators"
-import { errorToast, successToast } from "@utils/toasts"
+} from "../utils"
+import { validateCategoryName } from "../utils/validators"
+import { errorToast, successToast } from "../utils/toasts"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
-import mediaStyles from "@styles/isomer-cms/pages/Media.module.scss"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
+import mediaStyles from "../styles/isomer-cms/pages/Media.module.scss"
 
 const mediaNames = {
   images: "images",
@@ -227,7 +222,7 @@ const Media = ({
 
   const folderNameChangeHandler = (event) => {
     const { value } = event.target
-    let errorMessage = validateCategoryName(
+    const errorMessage = validateCategoryName(
       value,
       mediaNames[mediaType],
       directoryNames
@@ -265,7 +260,7 @@ const Media = ({
         setMoveDropdownQuery(initialMoveDropdownQueryState)
         queryClient.removeQueries(
           `${siteName}/images/${
-            customPath === undefined ? "" : customPath + "/"
+            customPath === undefined ? "" : `${customPath}/`
           }${selectedMedia.fileName}`
         )
       },
@@ -328,7 +323,7 @@ const Media = ({
         setPendingMediaUpload(null)
         queryClient.removeQueries(
           `${siteName}/images/${
-            customPath === undefined ? "" : customPath + "/"
+            customPath === undefined ? "" : `${customPath}/`
           }${selectedMedia.fileName}`
         )
       },
@@ -409,24 +404,24 @@ const Media = ({
                   .map((folderName, idx, arr) => {
                     return idx === arr.length - 1 ? (
                       <span>
-                        {" "}
-                        >
+                        &nbsp;
+                        {">"}
                         <strong className="ml-1">
-                          {" "}
+                          &nbsp;
                           {deslugifyDirectory(folderName)}
                         </strong>
                       </span>
                     ) : (
                       <span>
-                        {" "}
-                        >
+                        &nbsp;
+                        {">"}
                         <Link
                           to={`/sites/${siteName}/${mediaType}/${encodeURIComponent(
                             arr.slice(0, idx + 1).join("/")
                           )}`}
                         >
                           <strong className="ml-1">
-                            {" "}
+                            &nbsp;
                             {deslugifyDirectory(folderName)}
                           </strong>
                         </Link>
@@ -540,7 +535,7 @@ const Media = ({
                       mediaItemIndex={mediaItemIndex}
                       setSelectedMedia={setSelectedMedia}
                       setSelectedPath={setSelectedPath}
-                      showSettings={true}
+                      showSettings
                       onClick={() => setIsMediaSettingsActive(true)}
                       setIsMoveModalActive={setIsMoveModalActive}
                       setIsDeleteModalActive={setIsDeleteModalActive}
@@ -555,7 +550,7 @@ const Media = ({
                   ))
                 ) : (
                   <div className={contentStyles.segment}>
-                    There are no {mediaNames[mediaType]} in this{" "}
+                    There are no {mediaNames[mediaType]} in this&nbsp;
                     {mediaType === "images" ? "album" : "directory"}.
                   </div>
                 )}
diff --git a/src/layouts/Resources.jsx b/src/layouts/Resources.jsx
index 7b365d46a..1422f9eaa 100644
--- a/src/layouts/Resources.jsx
+++ b/src/layouts/Resources.jsx
@@ -1,36 +1,36 @@
-import React, { useEffect, useState } from "react"
-import { useMutation, useQuery } from "react-query"
-
+import React, { useState, useEffect } from "react"
 import axios from "axios"
-import * as _ from "lodash"
 import PropTypes from "prop-types"
+import * as _ from "lodash"
+import { useQuery, useMutation } from "react-query"
 
-import { addResourceCategory, getAllResourceCategories } from "@src/api"
-import { RESOURCE_ROOM_CONTENT_KEY } from "@src/constants"
+// Import components
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import FolderCard from "../components/FolderCard"
+import FolderOptionButton from "../components/folders/FolderOptionButton"
+import FolderNamingModal from "../components/FolderNamingModal"
+import FormField from "../components/FormField"
+import LoadingButton from "../components/LoadingButton"
+import useRedirectHook from "../hooks/useRedirectHook"
+
+// Import styles
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
+
+// Import utils
 import {
   DEFAULT_RETRY_MSG,
   deslugifyDirectory,
   slugifyCategory,
-} from "@src/utils"
-
-import useRedirectHook from "@hooks/useRedirectHook"
-
-import { errorToast } from "@utils/toasts"
+} from "../utils"
 import {
-  validateCategoryName,
   validateResourceRoomName,
-} from "@utils/validators"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
-
-import FolderCard from "@components/FolderCard"
-import FolderNamingModal from "@components/FolderNamingModal"
-import FolderOptionButton from "@components/folders/FolderOptionButton"
-import FormField from "@components/FormField"
-import Header from "@components/Header"
-import LoadingButton from "@components/LoadingButton"
-import Sidebar from "@components/Sidebar"
+  validateCategoryName,
+} from "../utils/validators"
+import { errorToast } from "../utils/toasts"
+import { getAllResourceCategories, addResourceCategory } from "../api"
+import { RESOURCE_ROOM_CONTENT_KEY } from "../constants"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/layouts/Settings.jsx b/src/layouts/Settings.jsx
index 196f8cddb..1fd653839 100644
--- a/src/layouts/Settings.jsx
+++ b/src/layouts/Settings.jsx
@@ -1,25 +1,23 @@
 import React, { Component } from "react"
-
 import axios from "axios"
 import PropTypes from "prop-types"
 import * as _ from "lodash"
 
-import { DEFAULT_RETRY_MSG, getObjectDiff } from "@src/utils"
-
-import { errorToast } from "@utils/toasts"
-import { validateSocialMedia } from "@utils/validators"
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import LoadingButton from "../components/LoadingButton"
+import ColorPicker from "../components/ColorPicker"
+import FormFieldToggle from "../components/FormFieldToggle"
+import FormFieldMedia from "../components/FormFieldMedia"
+import FormFieldColor from "../components/FormFieldColor"
+import FormFieldHorizontal from "../components/FormFieldHorizontal"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import { DEFAULT_RETRY_MSG, getObjectDiff } from "../utils"
+import { errorToast } from "../utils/toasts"
+import { validateSocialMedia } from "../utils/validators"
 
-import Header from "@components/Header"
-import Sidebar from "@components/Sidebar"
-import LoadingButton from "@components/LoadingButton"
-import ColorPicker from "@components/ColorPicker"
-import FormFieldToggle from "@components/FormFieldToggle"
-import FormFieldMedia from "@components/FormFieldMedia"
-import FormFieldColor from "@components/FormFieldColor"
-import FormFieldHorizontal from "@components/FormFieldHorizontal"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
 
 const stateFields = {
   title: "",
@@ -265,21 +263,19 @@ export default class Settings extends Component {
           "media-colors": newMediaColors,
         },
       }))
-    } else {
-      if (id === "logo") {
-        this.setState((currState) => ({
-          ...currState,
-          navigationSettings: {
-            ...currState.navigationSettings,
-            [id]: value,
-          },
-        }))
-      } else {
-        this.setState((currState) => ({
-          ...currState,
+    } else if (id === "logo") {
+      this.setState((currState) => ({
+        ...currState,
+        navigationSettings: {
+          ...currState.navigationSettings,
           [id]: value,
-        }))
-      }
+        },
+      }))
+    } else {
+      this.setState((currState) => ({
+        ...currState,
+        [id]: value,
+      }))
     }
   }
 
@@ -325,7 +321,7 @@ export default class Settings extends Component {
       }
 
       // Construct payload
-      let configSettings = {}
+      const configSettings = {}
       let footerSettings = {}
       let navigationSettings = {}
       Object.keys(settingsStateDiff).forEach((field) => {
@@ -347,7 +343,7 @@ export default class Settings extends Component {
             }
 
           if (field === "socialMediaContent")
-            footerSettings["social_media"] = settingsStateDiff[field].obj1
+            footerSettings.social_media = settingsStateDiff[field].obj1
         }
 
         if (NAVIGATION_FIELDS.includes(field)) {
@@ -558,7 +554,7 @@ export default class Settings extends Component {
       <>
         <Header
           siteName={siteName}
-          isEditPage={true}
+          isEditPage
           shouldAllowEditPageBackNav={_.isEmpty(settingsStateDiff)}
         />
         {/* main bottom section */}
@@ -610,7 +606,7 @@ export default class Settings extends Component {
                     errorMessage={errors.navigationSettings.logo}
                     isRequired
                     onFieldChange={this.changeHandler}
-                    inlineButtonText={"Choose Image"}
+                    inlineButtonText="Choose Image"
                     siteName={siteName}
                     placeholder=" "
                     type="images"
@@ -622,7 +618,7 @@ export default class Settings extends Component {
                     errorMessage={errors.favicon}
                     isRequired
                     onFieldChange={this.changeHandler}
-                    inlineButtonText={"Choose Image"}
+                    inlineButtonText="Choose Image"
                     siteName={siteName}
                     placeholder=" "
                     type="images"
@@ -634,7 +630,7 @@ export default class Settings extends Component {
                     errorMessage={errors.shareicon}
                     isRequired
                     onFieldChange={this.changeHandler}
-                    inlineButtonText={"Choose Image"}
+                    inlineButtonText="Choose Image"
                     siteName={siteName}
                     placeholder=" "
                     type="images"
diff --git a/src/layouts/Sites.jsx b/src/layouts/Sites.jsx
index 51852046a..2e907c597 100644
--- a/src/layouts/Sites.jsx
+++ b/src/layouts/Sites.jsx
@@ -1,14 +1,10 @@
 import React, { Component } from "react"
 import { Link } from "react-router-dom"
-
 import axios from "axios"
-
-import { SITES_IS_PRIVATE_KEY } from "@src/constants"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import siteStyles from "@styles/isomer-cms/pages/Sites.module.scss"
-
-import Header from "@components/Header"
+import Header from "../components/Header"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import siteStyles from "../styles/isomer-cms/pages/Sites.module.scss"
+import { SITES_IS_PRIVATE_KEY } from "../constants"
 
 export default class Sites extends Component {
   _isMounted = false
diff --git a/src/layouts/Workspace.jsx b/src/layouts/Workspace.jsx
index a26e5dfed..a62413e64 100644
--- a/src/layouts/Workspace.jsx
+++ b/src/layouts/Workspace.jsx
@@ -1,29 +1,31 @@
-import React, { useEffect, useState } from "react"
+import React, { useState, useEffect } from "react"
+import PropTypes from "prop-types"
 import { useQuery } from "react-query"
 
-import PropTypes from "prop-types"
+// Import components
+import Header from "../components/Header"
+import Sidebar from "../components/Sidebar"
+import CollectionPagesSection from "../components/CollectionPagesSection"
+import FolderCard from "../components/FolderCard"
+import FolderCreationModal from "../components/FolderCreationModal"
+import FolderOptionButton from "../components/folders/FolderOptionButton"
 
-import { getAllCategories, getEditPageData, getPages } from "@src/api"
-import { FOLDERS_CONTENT_KEY, PAGE_CONTENT_KEY } from "@src/constants"
+// Import styles
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
+import contentStyles from "../styles/isomer-cms/pages/Content.module.scss"
+
+// Import utils
 import {
   DEFAULT_RETRY_MSG,
-  frontMatterParser,
   prettifyPageFileName,
-} from "@src/utils"
-
-import useSiteColorsHook from "@hooks/useSiteColorsHook"
-
-import { errorToast } from "@utils/toasts"
-
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+  frontMatterParser,
+} from "../utils"
+import { errorToast } from "../utils/toasts"
+import { getPages, getAllCategories, getEditPageData } from "../api"
+import { PAGE_CONTENT_KEY, FOLDERS_CONTENT_KEY } from "../constants"
 
-import CollectionPagesSection from "@components/CollectionPagesSection"
-import FolderCard from "@components/FolderCard"
-import FolderCreationModal from "@components/FolderCreationModal"
-import FolderOptionButton from "@components/folders/FolderOptionButton"
-import Header from "@components/Header"
-import Sidebar from "@components/Sidebar"
+// Import hooks
+import useSiteColorsHook from "../hooks/useSiteColorsHook"
 
 const CONTACT_US_TEMPLATE_LAYOUT = "contact_us"
 
diff --git a/src/routing/ProtectedRoute.jsx b/src/routing/ProtectedRoute.jsx
index 9ba03d56f..0f127475c 100644
--- a/src/routing/ProtectedRoute.jsx
+++ b/src/routing/ProtectedRoute.jsx
@@ -1,29 +1,31 @@
 import React from "react"
 import { Redirect, Route } from "react-router-dom"
-
 import axios from "axios"
 
-import { LoginConsumer } from "@contexts/LoginContext"
+// Import contexts
+import { LoginConsumer } from "../contexts/LoginContext"
 
 // axios settings
 axios.defaults.withCredentials = true
 
-const ProtectedRoute = ({ children, component: WrappedComponent, ...rest }) => (
-  <LoginConsumer>
-    {({ userId }) =>
-      userId ? (
-        children ||
-        (WrappedComponent && (
-          <Route
-            {...rest}
-            render={(props) => <WrappedComponent {...rest} {...props} />}
-          />
-        ))
-      ) : (
-        <Redirect to="/" />
-      )
-    }
-  </LoginConsumer>
-)
+const ProtectedRoute = ({ children, component: WrappedComponent, ...rest }) => {
+  return (
+    <LoginConsumer>
+      {({ userId }) =>
+        userId ? (
+          children ||
+          (WrappedComponent && (
+            <Route
+              {...rest}
+              render={(props) => <WrappedComponent {...rest} {...props} />}
+            />
+          ))
+        ) : (
+          <Redirect to="/" />
+        )
+      }
+    </LoginConsumer>
+  )
+}
 
 export default ProtectedRoute
diff --git a/src/routing/RedirectIfLoggedInRoute.jsx b/src/routing/RedirectIfLoggedInRoute.jsx
index 42ba12cd0..fd4141a61 100644
--- a/src/routing/RedirectIfLoggedInRoute.jsx
+++ b/src/routing/RedirectIfLoggedInRoute.jsx
@@ -1,7 +1,8 @@
 import React from "react"
 import { Redirect, Route } from "react-router-dom"
 
-import { LoginConsumer } from "@contexts/LoginContext"
+// Import contexts
+const { LoginConsumer } = require("../contexts/LoginContext")
 
 export default function RedirectIfLoggedInRoute({
   children,
diff --git a/src/routing/RouteSelector.jsx b/src/routing/RouteSelector.jsx
index 9e66c6136..9116f2aa5 100644
--- a/src/routing/RouteSelector.jsx
+++ b/src/routing/RouteSelector.jsx
@@ -1,32 +1,34 @@
 import React from "react"
-import { Switch } from "react-router-dom"
-
 import * as Sentry from "@sentry/react"
+import { Switch } from "react-router-dom"
 
-import FallbackComponent from "@components/FallbackComponent"
-import NotFoundPage from "@components/NotFoundPage"
-
-import CategoryPages from "@layouts/CategoryPages"
-import EditContactUs from "@layouts/EditContactUs"
-import EditHomepage from "@layouts/EditHomepage"
-import EditNavBar from "@layouts/EditNavBar"
-import EditPage from "@layouts/EditPage"
-import Folders from "@layouts/Folders"
-import Home from "@layouts/Home"
-import Media from "@layouts/Media"
-import Resources from "@layouts/Resources"
-import Settings from "@layouts/Settings"
-import Sites from "@layouts/Sites"
-import Workspace from "@layouts/Workspace"
+// Layouts
+import Home from "../layouts/Home"
+import Sites from "../layouts/Sites"
+import Workspace from "../layouts/Workspace"
+import Folders from "../layouts/Folders"
+import EditPage from "../layouts/EditPage"
+import CategoryPages from "../layouts/CategoryPages"
+import Media from "../layouts/Media"
+import EditHomepage from "../layouts/EditHomepage"
+import EditContactUs from "../layouts/EditContactUs"
+import Resources from "../layouts/Resources"
+import EditNavBar from "../layouts/EditNavBar"
+import Settings from "../layouts/Settings"
+import NotFoundPage from "../components/NotFoundPage"
+import FallbackComponent from "../components/FallbackComponent"
 
-import ProtectedRoute from "@routing/ProtectedRoute"
-import RedirectIfLoggedInRoute from "@routing/RedirectIfLoggedInRoute"
+// ProtectedRoute component
+import ProtectedRoute from "./ProtectedRoute"
+import RedirectIfLoggedInRoute from "./RedirectIfLoggedInRoute"
 
-const ProtectedRouteWithProps = (props) => (
-  <Sentry.ErrorBoundary fallback={FallbackComponent}>
-    <ProtectedRoute {...props} />
-  </Sentry.ErrorBoundary>
-)
+const ProtectedRouteWithProps = (props) => {
+  return (
+    <Sentry.ErrorBoundary fallback={FallbackComponent}>
+      <ProtectedRoute {...props} />
+    </Sentry.ErrorBoundary>
+  )
+}
 
 export const RouteSelector = () => (
   <Switch>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f5ac8251d..55ccfd254 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,9 +5,10 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  width: 100%;
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
 
   p {
     margin-bottom: 5px;
diff --git a/src/styles/isomer-cms/elements/base.scss b/src/styles/isomer-cms/elements/base.scss
index e3b4d4b7d..bedef62aa 100644
--- a/src/styles/isomer-cms/elements/base.scss
+++ b/src/styles/isomer-cms/elements/base.scss
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap");
-@import "@styles/isomer-cms/elements/variable";
+@import "./variable";
 
 body {
   font-family: "Lato", sans-serif;
diff --git a/src/styles/isomer-cms/elements/buttons.scss b/src/styles/isomer-cms/elements/buttons.scss
index 3f191ba05..ae3fb8c55 100644
--- a/src/styles/isomer-cms/elements/buttons.scss
+++ b/src/styles/isomer-cms/elements/buttons.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "./variable";
 
 @mixin buttonColor($color) {
   background: $color;
diff --git a/src/styles/isomer-cms/elements/card.scss b/src/styles/isomer-cms/elements/card.scss
index 0458cd802..60d29a854 100644
--- a/src/styles/isomer-cms/elements/card.scss
+++ b/src/styles/isomer-cms/elements/card.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "./variable";
 
 .card {
   width: 100%;
diff --git a/src/styles/isomer-cms/elements/form.scss b/src/styles/isomer-cms/elements/form.scss
index 7d65a36d4..5a4c9e72d 100644
--- a/src/styles/isomer-cms/elements/form.scss
+++ b/src/styles/isomer-cms/elements/form.scss
@@ -1,5 +1,5 @@
-@import "@styles/isomer-cms/elements/variable";
-@import "@styles/isomer-cms/elements/buttons";
+@import "./variable";
+@import "./buttons";
 
 .inputGroup {
   margin-bottom: 20px;
diff --git a/src/styles/isomer-cms/elements/header.scss b/src/styles/isomer-cms/elements/header.scss
index d31f8e91a..3e4450fcd 100644
--- a/src/styles/isomer-cms/elements/header.scss
+++ b/src/styles/isomer-cms/elements/header.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "./variable";
 
 .header {
   position: fixed;
diff --git a/src/styles/isomer-cms/elements/modal.scss b/src/styles/isomer-cms/elements/modal.scss
index ec339a008..8869cd685 100644
--- a/src/styles/isomer-cms/elements/modal.scss
+++ b/src/styles/isomer-cms/elements/modal.scss
@@ -1,5 +1,5 @@
-@import "@styles/isomer-cms/elements/variable";
-@import "@styles/isomer-cms/elements/buttons";
+@import "./variable";
+@import "./buttons";
 
 .overlay {
   visibility: visible;
diff --git a/src/styles/isomer-cms/elements/scrollbar.scss b/src/styles/isomer-cms/elements/scrollbar.scss
index cca9f9456..e7e5b22db 100644
--- a/src/styles/isomer-cms/elements/scrollbar.scss
+++ b/src/styles/isomer-cms/elements/scrollbar.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "./variable";
 
 //scrollbar
 /* width */
diff --git a/src/styles/isomer-cms/pages/Admin.module.scss b/src/styles/isomer-cms/pages/Admin.module.scss
index 17adc6137..acb8d0bdd 100644
--- a/src/styles/isomer-cms/pages/Admin.module.scss
+++ b/src/styles/isomer-cms/pages/Admin.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 .adminSidebar {
   width: $sidebar-width;
diff --git a/src/styles/isomer-cms/pages/Content.module.scss b/src/styles/isomer-cms/pages/Content.module.scss
index 3247d3db4..31848a0fd 100644
--- a/src/styles/isomer-cms/pages/Content.module.scss
+++ b/src/styles/isomer-cms/pages/Content.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 @mixin cardFormat {
   width: 100%;
diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss
index 05634f0ad..47208c727 100644
--- a/src/styles/isomer-cms/pages/Editor.module.scss
+++ b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 .homepageEditorSidebar {
   width: $homepage-editor-sidebar-width;
diff --git a/src/styles/isomer-cms/pages/Media.module.scss b/src/styles/isomer-cms/pages/Media.module.scss
index b430b1dea..43ef5cf89 100644
--- a/src/styles/isomer-cms/pages/Media.module.scss
+++ b/src/styles/isomer-cms/pages/Media.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 @mixin single-site {
   margin-right: $site-margin-horizontal;
diff --git a/src/styles/isomer-cms/pages/MenuEditor.module.scss b/src/styles/isomer-cms/pages/MenuEditor.module.scss
index 5560e8a4b..e1851e7b8 100644
--- a/src/styles/isomer-cms/pages/MenuEditor.module.scss
+++ b/src/styles/isomer-cms/pages/MenuEditor.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 .menuEditorSidebar {
   overflow-y: scroll;
diff --git a/src/styles/isomer-cms/pages/Sites.module.scss b/src/styles/isomer-cms/pages/Sites.module.scss
index 65926ba7b..30b6f89bb 100644
--- a/src/styles/isomer-cms/pages/Sites.module.scss
+++ b/src/styles/isomer-cms/pages/Sites.module.scss
@@ -1,4 +1,4 @@
-@import "@styles/isomer-cms/elements/variable";
+@import "../elements/variable";
 
 @mixin single-site {
   margin-left: $site-margin-horizontal;
diff --git a/src/styles/isomer-template.scss b/src/styles/isomer-template.scss
index 6b2cdf49a..8aab260c3 100644
--- a/src/styles/isomer-template.scss
+++ b/src/styles/isomer-template.scss
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import "@styles/isomer-cms/elements/variable";
+@import "./isomer-cms/elements/variable";
 .bg-media-color-0 {
   background-color: #4b268e;
 }
diff --git a/src/templates/LeftNavPage.jsx b/src/templates/LeftNavPage.jsx
index 56e305759..b69898d3c 100644
--- a/src/templates/LeftNavPage.jsx
+++ b/src/templates/LeftNavPage.jsx
@@ -1,29 +1,29 @@
 import React from "react"
-
-import _ from "lodash"
 import PropTypes from "prop-types"
+import _ from "lodash"
+import PageHeader from "./pageComponents/PageHeader"
+import LeftNav from "./pageComponents/LeftNav"
 
-import LeftNav from "@templates/pageComponents/LeftNav"
-import PageHeader from "@templates/pageComponents/PageHeader"
-
-const LeftNavPage = ({ chunk, leftNavPages, fileName, title, collection }) => (
-  <div>
-    <PageHeader title={title} collection={collection} />
-    <section className="bp-section page-content-body">
-      <div className="bp-container padding--top--lg padding--bottom--xl">
-        <div className="row">
-          <LeftNav leftNavPages={leftNavPages} fileName={fileName} />
-          <div className="col is-8 is-offset-1-desktop is-12-touch print-content page-content-body">
-            <div
-              className="content"
-              dangerouslySetInnerHTML={{ __html: chunk }}
-            />
+const LeftNavPage = ({ chunk, leftNavPages, fileName, title, collection }) => {
+  return (
+    <div>
+      <PageHeader title={title} collection={collection} />
+      <section className="bp-section page-content-body">
+        <div className="bp-container padding--top--lg padding--bottom--xl">
+          <div className="row">
+            <LeftNav leftNavPages={leftNavPages} fileName={fileName} />
+            <div className="col is-8 is-offset-1-desktop is-12-touch print-content page-content-body">
+              <div
+                className="content"
+                dangerouslySetInnerHTML={{ __html: chunk }}
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-  </div>
-)
+      </section>
+    </div>
+  )
+}
 
 LeftNavPage.propTypes = {
   chunk: PropTypes.string.isRequired,
diff --git a/src/templates/NavBar.jsx b/src/templates/NavBar.jsx
index 554c7e1ca..df1330ad8 100644
--- a/src/templates/NavBar.jsx
+++ b/src/templates/NavBar.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 const NavDropdownSection = ({ children, link }) => (
diff --git a/src/templates/SimplePage.jsx b/src/templates/SimplePage.jsx
index 01e3c6cf6..922eb8ccf 100644
--- a/src/templates/SimplePage.jsx
+++ b/src/templates/SimplePage.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import PageHeader from "@templates/pageComponents/PageHeader"
+import PageHeader from "./pageComponents/PageHeader"
 
 // This following template was taken from the 'Simple Page'
 const SimplePage = ({
diff --git a/src/templates/contact-us/ContactUsHeader.jsx b/src/templates/contact-us/ContactUsHeader.jsx
index 835765b96..d7fcda384 100644
--- a/src/templates/contact-us/ContactUsHeader.jsx
+++ b/src/templates/contact-us/ContactUsHeader.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import Breadcrumb from "@templates/pageComponents/Breadcrumb"
+import Breadcrumb from "../pageComponents/Breadcrumb"
 
 const TemplateContactUsHeader = React.forwardRef(({ agencyName }, ref) => (
   <section className="bp-section" ref={ref}>
diff --git a/src/templates/contact-us/ContactsSection.jsx b/src/templates/contact-us/ContactsSection.jsx
index a319caebe..449f10b82 100644
--- a/src/templates/contact-us/ContactsSection.jsx
+++ b/src/templates/contact-us/ContactsSection.jsx
@@ -1,7 +1,6 @@
 import React from "react"
-
-import DOMPurify from "dompurify"
 import PropTypes from "prop-types"
+import DOMPurify from "dompurify"
 
 const Contact = React.forwardRef(({ contact }, ref) => (
   <div className="col is-6" ref={ref}>
diff --git a/src/templates/contact-us/FeedbackSection.jsx b/src/templates/contact-us/FeedbackSection.jsx
index a4c4f1d69..37290af4a 100644
--- a/src/templates/contact-us/FeedbackSection.jsx
+++ b/src/templates/contact-us/FeedbackSection.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 const TemplateFeedbackSection = React.forwardRef(({ feedback }, ref) => (
diff --git a/src/templates/contact-us/LocationsSection.jsx b/src/templates/contact-us/LocationsSection.jsx
index f5d43e312..88809ca68 100644
--- a/src/templates/contact-us/LocationsSection.jsx
+++ b/src/templates/contact-us/LocationsSection.jsx
@@ -1,17 +1,18 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 const LocationHours = ({ operatingHours }) => (
   <div className="col is-6">
     {operatingHours &&
-      operatingHours.map((operation, i) => (
-        <p className="margin--top--none" key={i}>
-          <b>{operation.days}</b>:&nbsp;{operation.time}
-          <br />
-          {operation.description}
-        </p>
-      ))}
+      operatingHours.map((operation, i) => {
+        return (
+          <p className="margin--top--none" key={i}>
+            <b>{operation.days}</b>:&nbsp;{operation.time}
+            <br />
+            {operation.description}
+          </p>
+        )
+      })}
   </div>
 )
 
diff --git a/src/templates/homepage/HeroSection.jsx b/src/templates/homepage/HeroSection.jsx
index bf6b3b9da..b208486d4 100644
--- a/src/templates/homepage/HeroSection.jsx
+++ b/src/templates/homepage/HeroSection.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-import { useQuery } from "react-query"
-
 import PropTypes from "prop-types"
-
-import { fetchImageURL } from "@src/utils"
+import { useQuery } from "react-query"
+import { fetchImageURL } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/templates/homepage/InfobarSection.jsx b/src/templates/homepage/InfobarSection.jsx
index f124e4ff3..39886fb65 100644
--- a/src/templates/homepage/InfobarSection.jsx
+++ b/src/templates/homepage/InfobarSection.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 /* eslint
diff --git a/src/templates/homepage/InfopicLeftSection.jsx b/src/templates/homepage/InfopicLeftSection.jsx
index 0baeb76a3..43e2d7fc6 100644
--- a/src/templates/homepage/InfopicLeftSection.jsx
+++ b/src/templates/homepage/InfopicLeftSection.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-import { useQuery } from "react-query"
-
 import PropTypes from "prop-types"
-
-import { fetchImageURL } from "@src/utils"
+import { useQuery } from "react-query"
+import { fetchImageURL } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/templates/homepage/InfopicRightSection.jsx b/src/templates/homepage/InfopicRightSection.jsx
index 075a1d7a4..95c070f21 100644
--- a/src/templates/homepage/InfopicRightSection.jsx
+++ b/src/templates/homepage/InfopicRightSection.jsx
@@ -1,9 +1,7 @@
 import React from "react"
-import { useQuery } from "react-query"
-
 import PropTypes from "prop-types"
-
-import { fetchImageURL } from "@src/utils"
+import { useQuery } from "react-query"
+import { fetchImageURL } from "../../utils"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/templates/homepage/ResourcesSection.jsx b/src/templates/homepage/ResourcesSection.jsx
index 6e923ca88..8f0913fed 100644
--- a/src/templates/homepage/ResourcesSection.jsx
+++ b/src/templates/homepage/ResourcesSection.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import contentStyles from "@styles/isomer-cms/pages/Content.module.scss"
+import contentStyles from "../../styles/isomer-cms/pages/Content.module.scss"
 
 /* eslint
   react/no-array-index-key: 0
diff --git a/src/templates/pageComponents/Breadcrumb.jsx b/src/templates/pageComponents/Breadcrumb.jsx
index 90193f48c..ebe83a98d 100644
--- a/src/templates/pageComponents/Breadcrumb.jsx
+++ b/src/templates/pageComponents/Breadcrumb.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import PropTypes from "prop-types"
 
 const Breadcrumb = ({ title, collection, resourceRoomName }) => (
diff --git a/src/templates/pageComponents/LeftNav.jsx b/src/templates/pageComponents/LeftNav.jsx
index 51d7769b5..12a077aa5 100644
--- a/src/templates/pageComponents/LeftNav.jsx
+++ b/src/templates/pageComponents/LeftNav.jsx
@@ -1,11 +1,8 @@
 /* eslint-disable arrow-body-style */
 import React, { useEffect, useState } from "react"
-
 import PropTypes from "prop-types"
-
-import { generateLeftNav } from "@utils/leftnavGeneration"
-
-import "@styles/isomer-template.scss"
+import { generateLeftNav } from "../../utils/leftnavGeneration"
+import "../../styles/isomer-template.scss"
 
 const LeftNav = ({ leftNavPages, fileName }) => {
   const [leftNavData, setLeftNavData] = useState()
diff --git a/src/templates/pageComponents/PageHeader.jsx b/src/templates/pageComponents/PageHeader.jsx
index 902724fa5..457e7adb7 100644
--- a/src/templates/pageComponents/PageHeader.jsx
+++ b/src/templates/pageComponents/PageHeader.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import PropTypes from "prop-types"
-
-import Breadcrumb from "@templates/pageComponents/Breadcrumb"
+import Breadcrumb from "./Breadcrumb"
 
 const PageHeader = ({
   title,
diff --git a/src/utils.js b/src/utils.js
index 27095398a..666b9c558 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,14 +1,12 @@
 // import dependencies
-import { QueryClient } from "react-query"
-
-import axios from "axios"
+import yaml from "yaml"
 import cheerio from "cheerio"
-import _ from "lodash"
 import slugify from "slugify"
-import yaml from "yaml"
-
-import { getMediaDetails } from "@src/api"
-import { SITES_IS_PRIVATE_KEY } from "@src/constants"
+import axios from "axios"
+import _ from "lodash"
+import { QueryClient } from "react-query"
+import { getMediaDetails } from "./api"
+import { SITES_IS_PRIVATE_KEY } from "./constants"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -287,7 +285,7 @@ export const getObjectDiff = (obj1, obj2) => {
   const allkeys = _.union(_.keys(obj1), _.keys(obj2))
   const difference = _.reduce(
     allkeys,
-    (result, key) => {
+    function (result, key) {
       const newResult = { ...result }
       if (!_.isEqual(obj1[key], obj2[key])) {
         newResult[key] = { obj1: obj1[key], obj2: obj2[key] }
@@ -317,8 +315,8 @@ export const updateDirectoryFile = (folderName, isFolderLive, folderOrder) => {
   return yaml.stringify(newContent)
 }
 
-export const getNavFolderDropdownFromFolderOrder = (folderOrder) =>
-  folderOrder.reduce((acc, curr) => {
+export const getNavFolderDropdownFromFolderOrder = (folderOrder) => {
+  return folderOrder.reduce((acc, curr) => {
     const pathArr = curr.split("/") // sample paths: "prize-sponsor.md", "prize-jury/nominating-committee.md"
 
     if (pathArr.length === 1) {
@@ -335,6 +333,7 @@ export const getNavFolderDropdownFromFolderOrder = (folderOrder) =>
 
     return acc
   }, [])
+}
 
 export const convertFolderOrderToArray = (folderOrder) => {
   let currFolderEntry = {}
@@ -390,8 +389,8 @@ export const convertArrayToFolderOrder = (array) => {
   return _.flatten(updatedFolderOrder)
 }
 
-export const retrieveSubfolderContents = (folderOrder, subfolderName) =>
-  folderOrder.reduce((acc, curr) => {
+export const retrieveSubfolderContents = (folderOrder, subfolderName) => {
+  return folderOrder.reduce((acc, curr) => {
     const folderPathArr = curr.split("/")
     if (folderPathArr.length === 2) {
       const [subfolderTitle, subfolderFileName] = folderPathArr
@@ -405,6 +404,7 @@ export const retrieveSubfolderContents = (folderOrder, subfolderName) =>
     }
     return acc
   }, [])
+}
 
 export const convertSubfolderArray = (
   folderOrderArray,
diff --git a/src/utils/contact-us/dataSanitisers.js b/src/utils/contact-us/dataSanitisers.js
index 35475b615..4aff74cbe 100644
--- a/src/utils/contact-us/dataSanitisers.js
+++ b/src/utils/contact-us/dataSanitisers.js
@@ -12,10 +12,9 @@ function isNotNullAndEqual(arrVal, othVal) {
 }
 
 function getContentDataField(content, dataType) {
-  const dataObj = _.find(
-    content,
-    (obj) => dataType in obj && _.isString(obj[dataType])
-  )
+  const dataObj = _.find(content, (obj) => {
+    return dataType in obj && _.isString(obj[dataType])
+  })
   return _.cloneDeep(dataObj) || { [dataType]: "" }
 }
 
diff --git a/src/utils/contact-us/validators.js b/src/utils/contact-us/validators.js
index 69a76a33c..23f4995e1 100644
--- a/src/utils/contact-us/validators.js
+++ b/src/utils/contact-us/validators.js
@@ -1,4 +1,4 @@
-import { validateContactType, validateLocationType } from "@utils/validators"
+import { validateContactType, validateLocationType } from "../validators"
 
 function validateOperatingHours(operatingHours) {
   const { days, time, description } = operatingHours
diff --git a/src/utils/cspUtils.js b/src/utils/cspUtils.js
index 300ad74a1..ff746cda4 100644
--- a/src/utils/cspUtils.js
+++ b/src/utils/cspUtils.js
@@ -1,11 +1,10 @@
 // Supported CSP checks are img-src, frame-src, media-src, object-src script-src-elem
 // Supported fallbacks are child-src, script-src, and default-src
 
+import _ from "lodash"
 import cheerio from "cheerio"
 import escapeStringRegexp from "escape-string-regexp"
-import _ from "lodash"
-
-import { isLinkInternal } from "@src/utils"
+import { isLinkInternal } from "../utils"
 
 function stringContainsValue(string, value) {
   // regex checks specifically if value is preceded by whitespace or is at the start/ end of the string
diff --git a/src/utils/dropdownUtils.js b/src/utils/dropdownUtils.js
index 28722d9ea..2e519a1c0 100644
--- a/src/utils/dropdownUtils.js
+++ b/src/utils/dropdownUtils.js
@@ -1,8 +1,7 @@
 import axios from "axios"
 
-import { DEFAULT_RETRY_MSG } from "@src/utils"
-
-import { errorToast } from "@utils/toasts.jsx"
+import { DEFAULT_RETRY_MSG } from "../utils"
+import { errorToast } from "./toasts"
 
 // axios settings
 axios.defaults.withCredentials = true
diff --git a/src/utils/leftnavGeneration.jsx b/src/utils/leftnavGeneration.jsx
index 4a9adedb3..92f178c09 100644
--- a/src/utils/leftnavGeneration.jsx
+++ b/src/utils/leftnavGeneration.jsx
@@ -1,8 +1,6 @@
 import React from "react"
-
 import _ from "lodash"
-
-import { deslugifyDirectory, deslugifyPage } from "@src/utils"
+import { deslugifyPage, deslugifyDirectory } from "../utils"
 
 const retrieveCurrentFileThirdNavTitle = (leftNavPages, fileName) => {
   let currentFileThirdNavTitle = ""
@@ -123,8 +121,8 @@ const generateThirdNavDiv = (
   elementThirdNavTitle,
   fileName,
   elementFileName
-) =>
-  thirdNavElements.length > 0 ? (
+) => {
+  return thirdNavElements.length > 0 ? (
     <div
       key={`${currentThirdNavTitle}-div`}
       className={`third-level-nav-div ${calculateThirdNavElementState(
@@ -140,6 +138,7 @@ const generateThirdNavDiv = (
   ) : (
     ""
   )
+}
 
 const generateThirdNavHeader = (
   currentFileThirdNavTitle,
diff --git a/src/utils/markdownToolbar.jsx b/src/utils/markdownToolbar.jsx
index d79546273..e0ba4e9ae 100644
--- a/src/utils/markdownToolbar.jsx
+++ b/src/utils/markdownToolbar.jsx
@@ -9,15 +9,16 @@
  */
 
 import {
-  drawTable,
-  toggleBlockquote,
   toggleBold,
-  toggleCodeBlock,
-  toggleHeadingSmaller,
   toggleItalic,
-  toggleOrderedList,
   toggleStrikethrough,
+  toggleHeadingSmaller,
+  toggleCodeBlock,
+  toggleBlockquote,
   toggleUnorderedList,
+  toggleOrderedList,
+  drawLink,
+  drawTable,
 } from "easymde"
 
 export const boldButton = {
diff --git a/src/utils/toasts.js b/src/utils/toasts.js
deleted file mode 100644
index 148930023..000000000
--- a/src/utils/toasts.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { toast } from 'react-toastify';
-
-import Toast from '../components/Toast';
-
-import { DEFAULT_ERROR_TOAST_MSG } from '../utils';
-
-import elementStyles from '../styles/isomer-cms/Elements.module.scss';
-
-export function errorToast(message) {
-    return toast(
-        <Toast notificationType='error' text={message ? message : DEFAULT_ERROR_TOAST_MSG}/>,
-        {
-            className: `${elementStyles.toastError} ${elementStyles.toastLong}`,
-            toastId: 'error',
-        },
-    );
-}
-
-export function successToast(message) {
-    toast(
-        <Toast notificationType='success' text={message ? message : `Success!`}/>,
-        {
-            className: `${elementStyles.toastSuccess}`,
-            toastId: 'success',
-        },
-    );
-}
\ No newline at end of file
diff --git a/src/utils/toasts.jsx b/src/utils/toasts.jsx
index b1c7de26d..24b2e5d26 100644
--- a/src/utils/toasts.jsx
+++ b/src/utils/toasts.jsx
@@ -1,11 +1,11 @@
 import React from "react"
 import { toast } from "react-toastify"
 
-import { DEFAULT_ERROR_TOAST_MSG } from "@src/utils"
+import Toast from "../components/Toast"
 
-import elementStyles from "@styles/isomer-cms/Elements.module.scss"
+import { DEFAULT_ERROR_TOAST_MSG } from "../utils"
 
-import Toast from "@components/Toast"
+import elementStyles from "../styles/isomer-cms/Elements.module.scss"
 
 export function errorToast(message) {
   return toast(
diff --git a/src/utils/validators.js b/src/utils/validators.js
index f90c89eba..392cfe9a5 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -5,7 +5,7 @@ import {
   generatePageFileName,
   retrieveResourceFileMetadata,
   slugifyCategory,
-} from "@src/utils"
+} from "../utils"
 
 // Common regexes and constants
 // ==============