diff --git a/docs/presentation.md b/docs/presentation.md
index 85c64bc9..7dee1eb3 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -50,9 +50,9 @@ This project uses a singleton instance of the application state, making it avail
 
 The decision to not use third-party state management libraries like [`vuex`](https://web.archive.org/web/20230801191617/https://vuex.vuejs.org/) or [`pinia`](https://web.archive.org/web/20230801191743/https://pinia.vuejs.org/) was made to promote code independence and enhance portability.
 
-Stateful components can mutate and/or react to state changes (e.g., user selection, search queries) in the [ApplicationContext](./../src/application/Context/ApplicationContext.ts). Vue components import [`CollectionState.ts`](./../src/presentation/components/Shared/CollectionState.ts) to access both the application context and the state.
+Stateful components can mutate and/or react to state changes (e.g., user selection, search queries) in the [ApplicationContext](./../src/application/Context/ApplicationContext.ts). Vue components import [`CollectionState.ts`](./../src/presentation/components/Shared/Hooks/UseCollectionState.ts) to access both the application context and the state.
 
-[`CollectionState.ts`](./../src/presentation/components/Shared/CollectionState.ts) provides several functionalities including:
+[`UseCollectionState.ts`](./../src/presentation/components/Shared/Hooks/UseCollectionState.ts) provides several functionalities including:
 
 - **Singleton State Instance**: It creates a singleton instance of the state, which is shared across the presentation layer. The singleton instance ensures that there's a single source of truth for the application's state.
 - **State Change Callback and Lifecycle Management**: It offers a mechanism to register callbacks, which will be invoked when the state initializes or mutates. It ensures that components unsubscribe from state events when they are no longer in use or when [ApplicationContext](./../src/application/Context/ApplicationContext.ts) switches the active [collection](./collection-files.md).
@@ -63,16 +63,7 @@ Stateful components can mutate and/or react to state changes (e.g., user selecti
 
 ## Modals
 
-[ModalDialog.vue](./../src/presentation/components/Shared/ModalDialog.vue) is a shared component utilized for rendering modal windows.
-
-Use the component by wrapping the desired content within its slot and calling the .show() function on its reference, as shown below:
-
-```html
-  <ModalDialog ref="testDialog">
-    <div>Hello world</div>
-  </ModalDialog>
-  <div @click="$refs.testDialog.show()">Show dialog</div>
-```
+- [ModalDialog.vue](./../src/presentation/components/Shared/Modal/ModalDialog.vue) is a shared component utilized for rendering modal windows.
 
 ## Sass naming convention
 
diff --git a/package-lock.json b/package-lock.json
index 851bb873..d6ef7d8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,8 +25,7 @@
         "markdown-it": "^13.0.1",
         "npm": "^9.8.1",
         "v-tooltip": "2.1.3",
-        "vue": "^2.7.14",
-        "vue-js-modal": "^2.0.1"
+        "vue": "^2.7.14"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.2",
@@ -44,6 +43,7 @@
         "@vue/cli-service": "~5.0.8",
         "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
         "@vue/eslint-config-typescript": "^11.0.3",
+        "@vue/test-utils": "^1.3.6",
         "chai": "^4.3.7",
         "cypress": "^12.17.2",
         "electron": "^25.3.2",
@@ -3311,6 +3311,12 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4826,6 +4832,21 @@
         }
       }
     },
+    "node_modules/@vue/test-utils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.6.tgz",
+      "integrity": "sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==",
+      "dev": true,
+      "dependencies": {
+        "dom-event-types": "^1.0.0",
+        "lodash": "^4.17.15",
+        "pretty": "^2.0.0"
+      },
+      "peerDependencies": {
+        "vue": "2.x",
+        "vue-template-compiler": "^2.x"
+      }
+    },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
       "version": "15.10.0",
@@ -5043,6 +5064,12 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "dev": true
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -7053,6 +7080,36 @@
         "typedarray": "^0.0.6"
       }
     },
+    "node_modules/condense-newlines": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
+      "integrity": "sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==",
+      "dev": true,
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-whitespace": "^0.3.0",
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/config-chain/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
     "node_modules/config-file-ts": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.4.tgz",
@@ -7834,6 +7891,13 @@
       "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==",
       "dev": true
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -8419,6 +8483,12 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-event-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.1.0.tgz",
+      "integrity": "sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==",
+      "dev": true
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8554,6 +8624,57 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10374,6 +10495,18 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dev": true,
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -12156,6 +12289,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -12228,6 +12367,15 @@
       "integrity": "sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==",
       "dev": true
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -12575,6 +12723,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-whitespace": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
+      "integrity": "sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -12808,6 +12965,66 @@
       "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==",
       "dev": true
     },
+    "node_modules/js-beautify": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.9.tgz",
+      "integrity": "sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==",
+      "dev": true,
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.3",
+        "glob": "^8.1.0",
+        "nopt": "^6.0.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -13158,6 +13375,18 @@
         "json-buffer": "3.0.0"
       }
     },
+    "node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/klaw": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
@@ -15637,6 +15866,21 @@
       "dev": true,
       "hasInstallScript": true
     },
+    "node_modules/nopt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "^1.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -20360,6 +20604,20 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/pretty": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
+      "integrity": "sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==",
+      "dev": true,
+      "dependencies": {
+        "condense-newlines": "^0.2.1",
+        "extend-shallow": "^2.0.1",
+        "js-beautify": "^1.6.12"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -20580,6 +20838,12 @@
         "levenshtein-edit-distance": "^1.0.0"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -22259,11 +22523,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -25767,17 +26026,6 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
-    "node_modules/vue-js-modal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.1.tgz",
-      "integrity": "sha512-5FUwsH2zoxRKX4a7wkFAqX0eITCcIMunJDEfIxzHs2bHw9o20+Iqm+uQvBcg1jkzyo1+tVgThR/7NGU8djbD8Q==",
-      "dependencies": {
-        "resize-observer-polyfill": "^1.5.1"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.11"
-      }
-    },
     "node_modules/vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -25903,6 +26151,17 @@
       "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
       "dev": true
     },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -29399,6 +29658,12 @@
       "integrity": "sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==",
       "dev": true
     },
+    "@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -30605,6 +30870,17 @@
         "vue-eslint-parser": "^9.1.1"
       }
     },
+    "@vue/test-utils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.6.tgz",
+      "integrity": "sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==",
+      "dev": true,
+      "requires": {
+        "dom-event-types": "^1.0.0",
+        "lodash": "^4.17.15",
+        "pretty": "^2.0.0"
+      }
+    },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.10.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
@@ -30808,6 +31084,12 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -32322,6 +32604,35 @@
         "typedarray": "^0.0.6"
       }
     },
+    "condense-newlines": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
+      "integrity": "sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-whitespace": "^0.3.0",
+        "kind-of": "^3.0.2"
+      }
+    },
+    "config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      },
+      "dependencies": {
+        "ini": {
+          "version": "1.3.8",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+          "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+          "dev": true
+        }
+      }
+    },
     "config-file-ts": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.4.tgz",
@@ -32894,6 +33205,13 @@
       "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==",
       "dev": true
     },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "peer": true
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -33305,6 +33623,12 @@
         "utila": "~0.4"
       }
     },
+    "dom-event-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.1.0.tgz",
+      "integrity": "sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==",
+      "dev": true
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -33413,6 +33737,44 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "requires": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "commander": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "9.0.1",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+          "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -34795,6 +35157,15 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dev": true,
+      "requires": {
+        "is-extendable": "^0.1.0"
+      }
+    },
     "extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -36104,6 +36475,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
     "is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -36149,6 +36526,12 @@
       "integrity": "sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==",
       "dev": true
     },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "dev": true
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -36381,6 +36764,12 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-whitespace": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
+      "integrity": "sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==",
+      "dev": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -36559,6 +36948,51 @@
       "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==",
       "dev": true
     },
+    "js-beautify": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.9.tgz",
+      "integrity": "sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==",
+      "dev": true,
+      "requires": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.3",
+        "glob": "^8.1.0",
+        "nopt": "^6.0.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -36863,6 +37297,15 @@
         "json-buffer": "3.0.0"
       }
     },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "^1.1.5"
+      }
+    },
     "klaw": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
@@ -38685,6 +39128,15 @@
       "integrity": "sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==",
       "dev": true
     },
+    "nopt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "dev": true,
+      "requires": {
+        "abbrev": "^1.0.0"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -41856,6 +42308,17 @@
       "dev": true,
       "optional": true
     },
+    "pretty": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
+      "integrity": "sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==",
+      "dev": true,
+      "requires": {
+        "condense-newlines": "^0.2.1",
+        "extend-shallow": "^2.0.1",
+        "js-beautify": "^1.6.12"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -42024,6 +42487,12 @@
         "levenshtein-edit-distance": "^1.0.0"
       }
     },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -43324,11 +43793,6 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -45949,14 +46413,6 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
-    "vue-js-modal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.1.tgz",
-      "integrity": "sha512-5FUwsH2zoxRKX4a7wkFAqX0eITCcIMunJDEfIxzHs2bHw9o20+Iqm+uQvBcg1jkzyo1+tVgThR/7NGU8djbD8Q==",
-      "requires": {
-        "resize-observer-polyfill": "^1.5.1"
-      }
-    },
     "vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -46056,6 +46512,17 @@
         }
       }
     },
+    "vue-template-compiler": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
diff --git a/package.json b/package.json
index c800b137..c86c2e04 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --include ./tests/bootstrap/setup.ts",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "npm run lint:md && npm run lint:md:consistency && npm run lint:md:relative-urls && npm run lint:eslint && npm run lint:yaml",
     "create-icons": "node img/logo-update.mjs",
@@ -21,7 +21,7 @@
     "lint:yaml": "yamllint **/*.yaml --ignore=node_modules/**/*.yaml",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
-    "test:integration": "vue-cli-service test:unit \"tests/integration/**/*.spec.ts\""
+    "test:integration": "vue-cli-service test:unit \"tests/integration/**/*.spec.ts\" --include ./tests/bootstrap/setup.ts"
   },
   "main": "index.js",
   "dependencies": {
@@ -41,8 +41,7 @@
     "markdown-it": "^13.0.1",
     "npm": "^9.8.1",
     "v-tooltip": "2.1.3",
-    "vue": "^2.7.14",
-    "vue-js-modal": "^2.0.1"
+    "vue": "^2.7.14"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
@@ -60,6 +59,7 @@
     "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^1.3.6",
     "chai": "^4.3.7",
     "cypress": "^12.17.2",
     "electron": "^25.3.2",
diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index ffb0e8b4..c6d2d3fd 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -27,3 +27,21 @@
     */
     -webkit-tap-highlight-color: transparent;
 }
+
+@mixin fade-slide-transition($name, $duration, $offset-upward: null) {
+    .#{$name}-enter-active,
+    .#{$name}-leave-active {
+        transition: all $duration;
+    }
+
+    .#{$name}-leave-active,
+    .#{$name}-enter, // Vue 2.X compatibility
+    .#{$name}-enter-from // Vue 3.X compatibility
+    {
+        opacity: 0;
+
+        @if $offset-upward {
+            transform: translateY($offset-upward);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/presentation/bootstrapping/ApplicationBootstrapper.ts b/src/presentation/bootstrapping/ApplicationBootstrapper.ts
index 3c2830aa..357350ed 100644
--- a/src/presentation/bootstrapping/ApplicationBootstrapper.ts
+++ b/src/presentation/bootstrapping/ApplicationBootstrapper.ts
@@ -1,4 +1,3 @@
-import { VModalBootstrapper } from './Modules/VModalBootstrapper';
 import { TreeBootstrapper } from './Modules/TreeBootstrapper';
 import { IconBootstrapper } from './Modules/IconBootstrapper';
 import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
@@ -19,7 +18,6 @@ export class ApplicationBootstrapper implements IVueBootstrapper {
       new TreeBootstrapper(),
       new VueBootstrapper(),
       new TooltipBootstrapper(),
-      new VModalBootstrapper(),
     ];
   }
 }
diff --git a/src/presentation/bootstrapping/Modules/VModalBootstrapper.ts b/src/presentation/bootstrapping/Modules/VModalBootstrapper.ts
deleted file mode 100644
index 2c59a995..00000000
--- a/src/presentation/bootstrapping/Modules/VModalBootstrapper.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import VModal from 'vue-js-modal';
-import { VueConstructor, IVueBootstrapper } from '../IVueBootstrapper';
-
-export class VModalBootstrapper implements IVueBootstrapper {
-  public bootstrap(vue: VueConstructor): void {
-    vue.use(VModal, { dynamic: true, injectModalsContainer: true });
-  }
-}
diff --git a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
index 682e95cd..1b8e22e1 100644
--- a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
+++ b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
@@ -19,7 +19,7 @@
       icon-prefix="fas"
       icon-name="copy"
     />
-    <ModalDialog v-if="instructions" ref="instructionsDialog">
+    <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
       <InstructionList :data="instructions" />
     </ModalDialog>
   </div>
@@ -30,7 +30,7 @@ import { defineComponent, ref, computed } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import { Clipboard } from '@/infrastructure/Clipboard';
-import ModalDialog from '@/presentation/components/Shared/ModalDialog.vue';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import { Environment } from '@/application/Environment/Environment';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -57,7 +57,7 @@ export default defineComponent({
       currentState, currentContext, onStateChange, events,
     } = useCollectionState();
 
-    const instructionsDialog = ref<typeof ModalDialog>();
+    const areInstructionsVisible = ref(false);
     const canRun = computed<boolean>(() => getCanRunState(currentState.value.os));
     const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
     const hasCode = ref(false);
@@ -73,7 +73,7 @@ export default defineComponent({
 
     function saveCode() {
       saveCodeToDisk(fileName.value, currentState.value);
-      instructionsDialog.value?.show();
+      areInstructionsVisible.value = true;
     }
 
     async function executeCode() {
@@ -103,7 +103,7 @@ export default defineComponent({
       hasCode,
       instructions,
       fileName,
-      instructionsDialog,
+      areInstructionsVisible,
       copyCode,
       saveCode,
       executeCode,
diff --git a/src/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.ts b/src/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.ts
new file mode 100644
index 00000000..75da19e1
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.ts
@@ -0,0 +1,37 @@
+import { Ref, computed, watch } from 'vue';
+
+/**
+ * This function monitors a set of conditions (represented as refs) and
+ * maintains a composite status based on all conditions.
+ */
+export function useAllTrueWatcher(
+  ...conditions: Ref<boolean>[]
+) {
+  const allMetCallbacks = new Array<() => void>();
+
+  const areAllConditionsMet = computed(() => conditions.every((condition) => condition.value));
+
+  watch(areAllConditionsMet, (areMet) => {
+    if (areMet) {
+      allMetCallbacks.forEach((action) => action());
+    }
+  });
+
+  function resetAllConditions() {
+    conditions.forEach((condition) => {
+      condition.value = false;
+    });
+  }
+
+  function onAllConditionsMet(callback: () => void) {
+    allMetCallbacks.push(callback);
+    if (areAllConditionsMet.value) {
+      callback();
+    }
+  }
+
+  return {
+    resetAllConditions,
+    onAllConditionsMet,
+  };
+}
diff --git a/src/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.ts b/src/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.ts
new file mode 100644
index 00000000..357f1d55
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.ts
@@ -0,0 +1,23 @@
+import { Ref, watchEffect } from 'vue';
+
+/**
+ * Manages focus transitions, ensuring good usability and accessibility.
+ */
+export function useCurrentFocusToggle(shouldDisableFocus: Ref<boolean>) {
+  let previouslyFocusedElement: HTMLElement | undefined;
+
+  watchEffect(() => {
+    if (shouldDisableFocus.value) {
+      previouslyFocusedElement = document.activeElement as HTMLElement | null;
+      previouslyFocusedElement?.blur();
+    } else {
+      if (!previouslyFocusedElement || previouslyFocusedElement.tagName === 'BODY') {
+        // It doesn't make sense to return focus to the body after the modal is
+        // closed because the body itself doesn't offer meaningful interactivity
+        return;
+      }
+      previouslyFocusedElement.focus();
+      previouslyFocusedElement = undefined;
+    }
+  });
+}
diff --git a/src/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.ts b/src/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.ts
new file mode 100644
index 00000000..8fc920ab
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.ts
@@ -0,0 +1,17 @@
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+
+export function useEscapeKeyListener(callback: () => void) {
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      callback();
+    }
+  };
+
+  onBeforeMount(() => {
+    window.addEventListener('keyup', onKeyUp);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('keyup', onKeyUp);
+  });
+}
diff --git a/src/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.ts b/src/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.ts
new file mode 100644
index 00000000..6fcd4fe9
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.ts
@@ -0,0 +1,37 @@
+import { Ref, watch, onBeforeUnmount } from 'vue';
+
+/*
+  It blocks background scrolling.
+  Designed to be used by modals, overlays etc.
+*/
+export function useLockBodyBackgroundScroll(isActive: Ref<boolean>) {
+  const originalStyles = {
+    overflow: document.body.style.overflow,
+    width: document.body.style.width,
+  };
+
+  const block = () => {
+    originalStyles.overflow = document.body.style.overflow;
+    originalStyles.width = document.body.style.width;
+
+    document.body.style.overflow = 'hidden';
+    document.body.style.width = '100vw';
+  };
+
+  const unblock = () => {
+    document.body.style.overflow = originalStyles.overflow;
+    document.body.style.width = originalStyles.width;
+  };
+
+  watch(isActive, (shouldBlock) => {
+    if (shouldBlock) {
+      block();
+    } else {
+      unblock();
+    }
+  }, { immediate: true });
+
+  onBeforeUnmount(() => {
+    unblock();
+  });
+}
diff --git a/src/presentation/components/Shared/Modal/ModalContainer.vue b/src/presentation/components/Shared/Modal/ModalContainer.vue
new file mode 100644
index 00000000..8d231da5
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/ModalContainer.vue
@@ -0,0 +1,150 @@
+<template>
+  <div
+    v-if="isRendered"
+    class="modal-container"
+  >
+    <ModalOverlay
+      @transitionedOut="onOverlayTransitionedOut"
+      @click="onBackgroundOverlayClick"
+      :show="isOpen"
+    />
+    <ModalContent
+      class="modal-content"
+      :show="isOpen"
+      @transitionedOut="onContentTransitionedOut"
+    >
+      <slot />
+    </ModalContent>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, ref, watchEffect, nextTick,
+} from 'vue';
+import ModalOverlay from './ModalOverlay.vue';
+import ModalContent from './ModalContent.vue';
+import { useLockBodyBackgroundScroll } from './Hooks/UseLockBodyBackgroundScroll';
+import { useCurrentFocusToggle } from './Hooks/UseCurrentFocusToggle';
+import { useEscapeKeyListener } from './Hooks/UseEscapeKeyListener';
+import { useAllTrueWatcher } from './Hooks/UseAllTrueWatcher';
+
+export default defineComponent({
+  components: {
+    ModalOverlay,
+    ModalContent,
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    input: (isOpen: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    closeOnOutsideClick: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props, { emit }) {
+    const isRendered = ref(false);
+    const isOpen = ref(false);
+    const overlayTransitionedOut = ref(false);
+    const contentTransitionedOut = ref(false);
+
+    useLockBodyBackgroundScroll(isOpen);
+    useCurrentFocusToggle(isOpen);
+    useEscapeKeyListener(() => handleEscapeKeyUp());
+
+    const {
+      onAllConditionsMet: onModalFullyTransitionedOut,
+      resetAllConditions: resetTransitionStatus,
+    } = useAllTrueWatcher(overlayTransitionedOut, contentTransitionedOut);
+
+    onModalFullyTransitionedOut(() => {
+      isRendered.value = false;
+      resetTransitionStatus();
+      if (props.value) {
+        emit('input', false);
+      }
+    });
+
+    watchEffect(() => {
+      if (props.value) {
+        open();
+      } else {
+        close();
+      }
+    });
+
+    function onOverlayTransitionedOut() {
+      overlayTransitionedOut.value = true;
+    }
+
+    function onContentTransitionedOut() {
+      contentTransitionedOut.value = true;
+    }
+
+    function handleEscapeKeyUp() {
+      close();
+    }
+
+    function close() {
+      if (!isRendered.value) {
+        return;
+      }
+
+      isOpen.value = false;
+
+      if (props.value) {
+        emit('input', false);
+      }
+    }
+
+    function open() {
+      if (isRendered.value) {
+        return;
+      }
+
+      isRendered.value = true;
+
+      nextTick(() => { // Let the modal render first
+        isOpen.value = true;
+      });
+
+      if (!props.value) {
+        emit('input', true);
+      }
+    }
+
+    function onBackgroundOverlayClick() {
+      if (props.closeOnOutsideClick) {
+        close();
+      }
+    }
+
+    return {
+      isRendered,
+      onBackgroundOverlayClick,
+      onOverlayTransitionedOut,
+      onContentTransitionedOut,
+      isOpen,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.modal-container {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 999;
+}
+</style>
diff --git a/src/presentation/components/Shared/Modal/ModalContent.vue b/src/presentation/components/Shared/Modal/ModalContent.vue
new file mode 100644
index 00000000..6b65be99
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/ModalContent.vue
@@ -0,0 +1,95 @@
+<template>
+  <transition
+    name="modal-content-transition"
+    @after-leave="onAfterTransitionLeave"
+  >
+    <div v-if="show" class="modal-content-wrapper">
+      <div
+        ref="modalElement"
+        class="modal-content-content"
+        role="dialog"
+        aria-expanded="true"
+        aria-modal="true"
+      >
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'transitionedOut',
+  ],
+  setup(_, { emit }) {
+    const modalElement = ref<HTMLElement>();
+
+    function onAfterTransitionLeave() {
+      emit('transitionedOut');
+    }
+
+    return {
+      onAfterTransitionLeave,
+      modalElement,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$modal-content-transition-duration: 400ms;
+$modal-content-color-shadow: $color-on-surface;
+$modal-content-color-background: $color-surface;
+$modal-content-offset-upward: 20px;
+
+@mixin scrollable() {
+  overflow-y: auto;
+  max-height: 90vh;
+}
+
+.modal-content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  pointer-events: none;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.modal-content-content {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  pointer-events: auto;
+
+  width: auto;
+  height: auto;
+
+  max-width: 600px;
+
+  background-color: $color-surface;
+  border-radius: 3px;
+  box-shadow: 0 20px 60px -2px $color-on-surface;
+
+  @include scrollable;
+}
+
+@include fade-slide-transition('modal-content-transition', $modal-content-transition-duration, $modal-content-offset-upward);
+</style>
diff --git a/src/presentation/components/Shared/Modal/ModalDialog.vue b/src/presentation/components/Shared/Modal/ModalDialog.vue
new file mode 100644
index 00000000..2f9bf380
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/ModalDialog.vue
@@ -0,0 +1,87 @@
+<template>
+  <ModalContainer
+    v-model="showDialog"
+  >
+    <div class="dialog">
+      <div class="dialog__content">
+        <slot />
+      </div>
+      <div
+        class="dialog__close-button"
+        @click="hide"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'times']"
+        />
+      </div>
+    </div>
+  </ModalContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import ModalContainer from './ModalContainer.vue';
+
+export default defineComponent({
+  components: {
+    ModalContainer,
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    input: (isOpen: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const showDialog = computed({
+      get: () => props.value,
+      set: (value) => {
+        if (value !== props.value) {
+          emit('input', value);
+        }
+      },
+    });
+
+    function hide() {
+      showDialog.value = false;
+    }
+
+    return {
+      showDialog,
+      hide,
+    };
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.dialog {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+
+  &__content {
+    margin: 5%;
+  }
+
+  &__close-button {
+    color: $color-primary-dark;
+    width: auto;
+    font-size: 1.5em;
+    margin-right: 0.25em;
+    align-self: flex-start;
+    @include clickable;
+    @include hover-or-touch {
+      color: $color-primary;
+    }
+  }
+}
+</style>
diff --git a/src/presentation/components/Shared/Modal/ModalOverlay.vue b/src/presentation/components/Shared/Modal/ModalOverlay.vue
new file mode 100644
index 00000000..e37dc9cf
--- /dev/null
+++ b/src/presentation/components/Shared/Modal/ModalOverlay.vue
@@ -0,0 +1,65 @@
+<template>
+  <transition
+    name="modal-overlay-transition"
+    @after-leave="onAfterTransitionLeave"
+  >
+    <div
+      v-if="show"
+      class="modal-overlay-background"
+      aria-expanded="true"
+      @click.self.stop="onClick"
+    />
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'click',
+    'transitionedOut',
+  ],
+  setup(_, { emit }) {
+    function onAfterTransitionLeave() {
+      emit('transitionedOut');
+    }
+
+    function onClick() {
+      emit('click');
+    }
+
+    return {
+      onAfterTransitionLeave,
+      onClick,
+    };
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$modal-overlay-transition-duration: 50ms;
+$modal-overlay-color-background: $color-on-surface;
+
+.modal-overlay-background {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba($modal-overlay-color-background, 0.3);
+  opacity: 1;
+}
+
+@include fade-slide-transition('modal-overlay-transition', $modal-overlay-transition-duration);
+</style>
diff --git a/src/presentation/components/Shared/ModalDialog.vue b/src/presentation/components/Shared/ModalDialog.vue
deleted file mode 100644
index c208676c..00000000
--- a/src/presentation/components/Shared/ModalDialog.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <modal
-    :name="name"
-    :adaptive="true"
-    height="auto">
-    <div class="dialog">
-      <div class="dialog__content">
-        <slot />
-      </div>
-      <div class="dialog__close-button">
-        <font-awesome-icon
-          :icon="['fas', 'times']"
-          @click="hide"
-        />
-      </div>
-    </div>
-  </modal>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
-
-let idCounter = 0;
-
-export default defineComponent({
-  setup() {
-    const name = (++idCounter).toString();
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let modal: any;
-
-    onMounted(async () => {
-      // Hack until Vue 3, so we can use vue-js-modal
-      const main = await import('@/presentation/main');
-      const { getVue } = main;
-      modal = getVue().$modal;
-    });
-
-    function show(): void {
-      modal.show(name);
-    }
-
-    function hide(): void {
-      modal.hide();
-    }
-
-    return {
-      name,
-      modal,
-      hide,
-      show,
-    };
-  },
-});
-
-</script>
-
-<style scoped lang="scss">
-@use "@/presentation/assets/styles/main" as *;
-
-@mixin scrollable() {
-  overflow-y: auto;
-  max-height: 100vh;
-}
-
-.dialog {
-  color: $color-surface;
-  font-family: $font-normal;
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-  @include scrollable;
-
-  &__content {
-    color: $color-on-surface;
-    width: 100%;
-    margin: 5%;
-  }
-
-  &__close-button {
-    color: $color-primary-dark;
-    width: auto;
-    font-size: 1.5em;
-    margin-right: 0.25em;
-    align-self: flex-start;
-    @include clickable;
-    @include hover-or-touch {
-      color: $color-primary;
-    }
-  }
-}
-</style>
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index 6474ab0a..d0f1d4c7 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -33,11 +33,11 @@
         </div>
         <div class="footer__section__item">
           <font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
-          <a @click="privacyDialog.show()">Privacy</a>
+          <a @click="showPrivacyDialog()">Privacy</a>
         </div>
       </div>
     </div>
-    <ModalDialog ref="privacyDialog">
+    <ModalDialog v-model="isPrivacyDialogVisible">
       <PrivacyPolicy />
     </ModalDialog>
   </div>
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { Environment } from '@/application/Environment/Environment';
-import ModalDialog from '@/presentation/components/Shared/ModalDialog.vue';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
@@ -62,7 +62,7 @@ export default defineComponent({
   setup() {
     const { info } = useApplication();
 
-    const privacyDialog = ref<typeof ModalDialog>();
+    const isPrivacyDialogVisible = ref(false);
 
     const version = computed<string>(() => info.version.toString());
 
@@ -74,9 +74,14 @@ export default defineComponent({
 
     const feedbackUrl = computed<string>(() => info.feedbackUrl);
 
+    function showPrivacyDialog() {
+      isPrivacyDialogVisible.value = true;
+    }
+
     return {
       isDesktop,
-      privacyDialog,
+      isPrivacyDialogVisible,
+      showPrivacyDialog,
       version,
       homepageUrl,
       repositoryUrl,
diff --git a/src/presentation/shims-vue.d.ts b/src/presentation/shims-vue.d.ts
index 648bc79e..92fffffe 100644
--- a/src/presentation/shims-vue.d.ts
+++ b/src/presentation/shims-vue.d.ts
@@ -1,5 +1,7 @@
-import Vue from 'vue';
+/* eslint-disable */
 
 declare module '*.vue' {
-  export default Vue;
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
 }
diff --git a/tests/bootstrap/setup.ts b/tests/bootstrap/setup.ts
new file mode 100644
index 00000000..1c89ec4d
--- /dev/null
+++ b/tests/bootstrap/setup.ts
@@ -0,0 +1,4 @@
+import 'mocha';
+import { enableAutoDestroy } from '@vue/test-utils';
+
+enableAutoDestroy(afterEach);
diff --git a/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts b/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
index eeede0f3..9b8b751c 100644
--- a/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts
@@ -8,17 +8,18 @@ describe('NonCollapsingDirective', () => {
   describe('NonCollapsing', () => {
     it('adds expected attribute to the element when inserted', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       // act
       NonCollapsing.inserted(element, undefined, undefined, undefined);
       // assert
       expect(element.hasAttribute(expectedAttributeName));
     });
   });
+
   describe('hasDirective', () => {
     it('returns true if the element has expected attribute', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       element.setAttribute(expectedAttributeName, undefined);
       // act
       const actual = hasDirective(element);
@@ -27,8 +28,8 @@ describe('NonCollapsingDirective', () => {
     });
     it('returns true if the element has a parent with expected attribute', () => {
       // arrange
-      const parent = getElementMock();
-      const element = getElementMock();
+      const parent = createElementMock();
+      const element = createElementMock();
       parent.appendChild(element);
       element.setAttribute(expectedAttributeName, undefined);
       // act
@@ -38,16 +39,15 @@ describe('NonCollapsingDirective', () => {
     });
     it('returns false if nor the element or its parent has expected attribute', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       // act
       const actual = hasDirective(element);
       // assert
       expect(actual).to.equal(false);
     });
   });
-});
 
-function getElementMock(): HTMLElement {
-  const element = document.createElement('div');
-  return element;
-}
+  function createElementMock(): HTMLElement {
+    return document.createElement('div');
+  }
+});
diff --git a/tests/unit/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.spec.ts b/tests/unit/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.spec.ts
new file mode 100644
index 00000000..395ae6a0
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher.spec.ts
@@ -0,0 +1,164 @@
+import 'mocha';
+import { ref, nextTick } from 'vue';
+import { expect } from 'chai';
+import { useAllTrueWatcher } from '@/presentation/components/Shared/Modal/Hooks/UseAllTrueWatcher';
+
+describe('useAllTrueWatcher', () => {
+  describe('onAllConditionsMet', () => {
+    it('triggers the callback when all conditions turn true', async () => {
+      // arrange
+      const condition1 = ref(false);
+      const condition2 = ref(false);
+      const { onAllConditionsMet } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCalled = false;
+
+      // act
+      onAllConditionsMet(() => {
+        callbackCalled = true;
+      });
+      condition1.value = true;
+      condition2.value = true;
+      await nextTick();
+
+      // assert
+      expect(callbackCalled).to.equal(true);
+    });
+
+    it('instantly triggers the callback if conditions are true on callback registration', async () => {
+      // arrange
+      const condition1 = ref(true);
+      const condition2 = ref(true);
+      const { onAllConditionsMet } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCalled = false;
+
+      // act
+      onAllConditionsMet(() => {
+        callbackCalled = true;
+      });
+      await nextTick();
+
+      // assert
+      expect(callbackCalled).to.equal(true);
+    });
+
+    it('does not trigger the callback unless all conditions are met', async () => {
+      // arrange
+      const condition1 = ref(true);
+      const condition2 = ref(false);
+      const { onAllConditionsMet } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCalled = false;
+
+      // act
+      onAllConditionsMet(() => {
+        callbackCalled = true;
+      });
+      await nextTick();
+
+      // assert
+      expect(callbackCalled).to.be.equal(false);
+    });
+
+    it('triggers all registered callbacks once all conditions are satisfied', async () => {
+      // arrange
+      const condition1 = ref(false);
+      const condition2 = ref(false);
+      const { onAllConditionsMet } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCount = 0;
+
+      // act
+      onAllConditionsMet(() => callbackCount++);
+      onAllConditionsMet(() => callbackCount++);
+      condition1.value = true;
+      condition2.value = true;
+      await nextTick();
+
+      // assert
+      expect(callbackCount).to.equal(2);
+    });
+
+    it('ensures each callback is invoked only once for a single condition set', async () => {
+      // arrange
+      const condition1 = ref(false);
+      const condition2 = ref(false);
+      const { onAllConditionsMet } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCount = 0;
+
+      // act
+      onAllConditionsMet(() => callbackCount++);
+      condition1.value = true;
+      condition2.value = true;
+      condition1.value = false;
+      condition1.value = true;
+      await nextTick();
+
+      // assert
+      expect(callbackCount).to.equal(1);
+    });
+
+    it('triggers the callback after conditions are sequentially met post-reset', async () => {
+      // arrange
+      const condition1 = ref(false);
+      const condition2 = ref(false);
+      const { onAllConditionsMet, resetAllConditions } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCalled = false;
+
+      // act
+      onAllConditionsMet(() => {
+        callbackCalled = true;
+      });
+      condition1.value = true;
+      resetAllConditions();
+      condition1.value = true;
+      condition2.value = true;
+      await nextTick();
+
+      // assert
+      expect(callbackCalled).to.equal(true);
+    });
+
+    it('avoids triggering the callback for single condition post-reset', async () => {
+      // arrange
+      const condition1 = ref(false);
+      const condition2 = ref(false);
+      const { onAllConditionsMet, resetAllConditions } = useAllTrueWatcher(condition1, condition2);
+
+      let callbackCalled = false;
+
+      // act
+      condition1.value = true;
+      condition2.value = true;
+      resetAllConditions();
+      onAllConditionsMet(() => {
+        callbackCalled = true;
+      });
+      condition1.value = true;
+      await nextTick();
+
+      // assert
+      expect(callbackCalled).to.equal(false);
+    });
+  });
+
+  describe('resetAllConditions', () => {
+    it('returns all conditions to their default false state', async () => {
+      // arrange
+      const condition1 = ref(true);
+      const condition2 = ref(true);
+      const { resetAllConditions } = useAllTrueWatcher(condition1, condition2);
+
+      // act
+      resetAllConditions();
+      await nextTick();
+
+      // assert
+      expect(condition1.value).to.be.equal(false);
+      expect(condition2.value).to.be.equal(false);
+    });
+  });
+});
diff --git a/tests/unit/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.spec.ts b/tests/unit/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.spec.ts
new file mode 100644
index 00000000..3cde5954
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.spec.ts
@@ -0,0 +1,164 @@
+import 'mocha';
+import { ref, nextTick } from 'vue';
+import { expect } from 'chai';
+import { useCurrentFocusToggle } from '@/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle';
+
+describe('useCurrentFocusToggle', () => {
+  describe('initialization', () => {
+    it('blurs active element when initialized with disabled focus', async () => {
+      // arrange
+      const shouldDisableFocus = ref(true);
+      const testElement = createElementInBody('input');
+      testElement.focus();
+
+      // act
+      useCurrentFocusToggle(shouldDisableFocus);
+      await nextTick();
+
+      // assert
+      expect(!isFocused(testElement));
+    });
+    it('doesn\'t blur active element when initialized with enabled focus', async () => {
+      // arrange
+      const isCurrentFocusDisabled = ref(false);
+      const testElement = createElementInBody('input');
+
+      // act
+      testElement.focus();
+      useCurrentFocusToggle(isCurrentFocusDisabled);
+      await nextTick();
+
+      // assert
+      expect(isFocused(testElement));
+    });
+  });
+
+  describe('focus toggling', () => {
+    it('blurs when focus disabled programmatically', async () => {
+      // arrange
+      const shouldDisableFocus = ref(false);
+      const testElement = createElementInBody('input');
+      testElement.focus();
+
+      // act
+      useCurrentFocusToggle(shouldDisableFocus);
+      shouldDisableFocus.value = true;
+      await nextTick();
+
+      // assert
+      expect(!isFocused(testElement));
+    });
+
+    it('restores focus when re-enabled', async () => {
+      // arrange
+      const isCurrentFocusDisabled = ref(true);
+      const testElement = createElementInBody('input');
+
+      // act
+      useCurrentFocusToggle(isCurrentFocusDisabled);
+      testElement.focus();
+      isCurrentFocusDisabled.value = true;
+      await nextTick();
+      isCurrentFocusDisabled.value = false;
+      await nextTick();
+
+      // assert
+      expect(isFocused(testElement));
+    });
+
+    it('maintains focus if not disabled', async () => {
+      // arrange
+      const isCurrentFocusDisabled = ref(false);
+      const testElement = createElementInBody('input');
+
+      // act
+      testElement.focus();
+      useCurrentFocusToggle(isCurrentFocusDisabled);
+      isCurrentFocusDisabled.value = false;
+      await nextTick();
+
+      // assert
+      expect(isFocused(testElement));
+    });
+
+    it('handles multiple toggles correctly', async () => {
+      // arrange
+      const shouldDisableFocus = ref(false);
+      const testElement = createElementInBody('input');
+      testElement.focus();
+
+      // act
+      useCurrentFocusToggle(shouldDisableFocus);
+      shouldDisableFocus.value = true;
+      await nextTick();
+      shouldDisableFocus.value = false;
+      await nextTick();
+      shouldDisableFocus.value = true;
+      await nextTick();
+
+      // assert
+      expect(!isFocused(testElement));
+    });
+  });
+
+  describe('document.body handling', () => {
+    it('blurs body when focus is disabled while body is active', async () => {
+      // arrange
+      document.body.focus();
+
+      const shouldDisableFocus = ref(false);
+
+      // act
+      useCurrentFocusToggle(shouldDisableFocus);
+      shouldDisableFocus.value = true;
+      await nextTick();
+
+      // assert
+      expect(!isFocused(document.body));
+    });
+
+    it('doesn\'t restore focus to document body once focus is re-enabled', async () => {
+      // arrange
+      document.body.focus();
+
+      const shouldDisableFocus = ref(false);
+
+      // act
+      useCurrentFocusToggle(shouldDisableFocus);
+      shouldDisableFocus.value = true;
+      await nextTick();
+      shouldDisableFocus.value = false;
+      await nextTick();
+
+      // assert
+      expect(!isFocused(document.body));
+    });
+  });
+
+  it('handles removal of a previously focused element gracefully', async () => {
+    // arrange
+    const shouldDisableFocus = ref(true);
+    const testElement = createElementInBody('input');
+    testElement.focus();
+
+    useCurrentFocusToggle(shouldDisableFocus);
+    shouldDisableFocus.value = true;
+    await nextTick();
+    testElement.remove();
+    shouldDisableFocus.value = false;
+    await nextTick();
+
+    // assert
+    expect(!isFocused(testElement));
+  });
+
+  function createElementInBody(tagName: keyof HTMLElementTagNameMap): HTMLElement {
+    const element = document.createElement(tagName);
+    document.body.appendChild(element);
+    return element;
+  }
+});
+
+function isFocused(element: HTMLElement): boolean {
+  return document.activeElement === element;
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.spec.ts b/tests/unit/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.spec.ts
new file mode 100644
index 00000000..ae55a5bc
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.spec.ts
@@ -0,0 +1,119 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import { nextTick, defineComponent } from 'vue';
+import { useEscapeKeyListener } from '@/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener';
+
+describe('useEscapeKeyListener', () => {
+  it('executes the callback when the Escape key is pressed', async () => {
+    // arrange
+    let callbackCalled = false;
+    const callback = () => {
+      callbackCalled = true;
+    };
+    createComponent(callback);
+
+    // act
+    const event = new KeyboardEvent('keyup', { key: 'Escape' });
+    window.dispatchEvent(event);
+    await nextTick();
+
+    // assert
+    expect(callbackCalled).to.equal(true);
+  });
+
+  it('does not execute the callback for other key presses', async () => {
+    // arrange
+    let callbackCalled = false;
+    const callback = () => {
+      callbackCalled = true;
+    };
+    createComponent(callback);
+
+    // act
+    const event = new KeyboardEvent('keyup', { key: 'Enter' });
+    window.dispatchEvent(event);
+    await nextTick();
+
+    // assert
+    expect(callbackCalled).to.equal(false);
+  });
+
+  it('adds an event listener on component mount', () => {
+    // arrange
+    const { restore, isAddEventCalled } = createWindowEventSpies();
+
+    // act
+    createComponent();
+
+    // assert
+    expect(isAddEventCalled()).to.equal(true);
+    restore();
+  });
+
+  it('removes the event listener on component unmount', async () => {
+    // arrange
+    const { restore, isRemoveEventCalled } = createWindowEventSpies();
+
+    // act
+    const wrapper = createComponent();
+    wrapper.destroy();
+    await nextTick();
+
+    // assert
+    expect(isRemoveEventCalled()).to.equal(true);
+    restore();
+  });
+});
+
+function createComponent(callback = () => {}) {
+  return shallowMount(defineComponent({
+    setup() {
+      useEscapeKeyListener(callback);
+    },
+    template: '<div></div>',
+  }));
+}
+
+function createWindowEventSpies() {
+  let addEventCalled = false;
+  let removeEventCalled = false;
+
+  const originalAddEventListener = window.addEventListener;
+  const originalRemoveEventListener = window.removeEventListener;
+
+  window.addEventListener = (
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void => {
+    if (type === 'keyup' && typeof listener === 'function') {
+      addEventCalled = true;
+    }
+    originalAddEventListener(type, listener, options);
+  };
+
+  window.removeEventListener = (
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void => {
+    if (type === 'keyup' && typeof listener === 'function') {
+      removeEventCalled = true;
+    }
+    originalRemoveEventListener(type, listener, options);
+  };
+
+  return {
+    restore: () => {
+      window.addEventListener = originalAddEventListener;
+      window.removeEventListener = originalRemoveEventListener;
+    },
+    isAddEventCalled() {
+      return addEventCalled;
+    },
+    isRemoveEventCalled() {
+      return removeEventCalled;
+    },
+  };
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.spec.ts b/tests/unit/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.spec.ts
new file mode 100644
index 00000000..47e6afb8
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.spec.ts
@@ -0,0 +1,113 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import { ref, nextTick, defineComponent } from 'vue';
+import { useLockBodyBackgroundScroll } from '@/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll';
+
+describe('useLockBodyBackgroundScroll', () => {
+  afterEach(() => {
+    document.body.style.overflow = '';
+    document.body.style.width = '';
+  });
+
+  describe('initialization', () => {
+    it('blocks scroll if initially active', async () => {
+      // arrange
+      createComponent(true);
+
+      // act
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).to.equal('hidden');
+      expect(document.body.style.width).to.equal('100vw');
+    });
+
+    it('preserves initial styles if inactive', async () => {
+      // arrange
+      const originalOverflow = 'scroll';
+      const originalWidth = '90vw';
+      document.body.style.overflow = originalOverflow;
+      document.body.style.width = originalWidth;
+
+      // act
+      createComponent(false);
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).to.equal(originalOverflow);
+      expect(document.body.style.width).to.equal(originalWidth);
+    });
+  });
+
+  describe('toggling', () => {
+    it('blocks scroll when activated', async () => {
+      // arrange
+      const { isActive } = createComponent(false);
+
+      // act
+      isActive.value = true;
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).to.equal('hidden');
+      expect(document.body.style.width).to.equal('100vw');
+    });
+
+    it('unblocks scroll when deactivated', async () => {
+      // arrange
+      const { isActive } = createComponent(true);
+
+      // act
+      isActive.value = false;
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).not.to.equal('hidden');
+      expect(document.body.style.width).not.to.equal('100vw');
+    });
+  });
+
+  describe('unmounting', () => {
+    it('restores original styles on unmount', async () => {
+      // arrange
+      const originalOverflow = 'scroll';
+      const originalWidth = '90vw';
+      document.body.style.overflow = originalOverflow;
+      document.body.style.width = originalWidth;
+
+      // act
+      const { component } = createComponent(true);
+      component.destroy();
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).to.equal(originalOverflow);
+      expect(document.body.style.width).to.equal(originalWidth);
+    });
+
+    it('resets styles on unmount', async () => {
+      // arrange
+      const { component } = createComponent(true);
+
+      // act
+      component.destroy();
+      await nextTick();
+
+      // assert
+      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.width).to.equal('');
+    });
+  });
+});
+
+function createComponent(initialIsActiveValue: boolean) {
+  const isActive = ref(initialIsActiveValue);
+  const component = shallowMount(defineComponent({
+    setup() {
+      useLockBodyBackgroundScroll(isActive);
+    },
+    template: '<div></div>',
+  }));
+  return { component, isActive };
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts b/tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts
new file mode 100644
index 00000000..c111a031
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts
@@ -0,0 +1,206 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
+
+const DOM_MODAL_CONTAINER_SELECTOR = '.modal-container';
+const COMPONENT_MODAL_OVERLAY_NAME = 'ModalOverlay';
+const COMPONENT_MODAL_CONTENT_NAME = 'ModalContent';
+
+describe('ModalContainer.vue', () => {
+  describe('rendering based on model prop', () => {
+    it('does not render when model prop is absent or false', () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: false });
+
+      // act
+      const modalContainer = wrapper.find(DOM_MODAL_CONTAINER_SELECTOR);
+
+      // assert
+      expect(modalContainer.exists()).to.equal(false);
+    });
+
+    it('renders modal container when model prop is true', () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true });
+
+      // act
+      const modalContainer = wrapper.find(DOM_MODAL_CONTAINER_SELECTOR);
+
+      // assert
+      expect(modalContainer.exists()).to.equal(true);
+    });
+  });
+
+  describe('modal open/close', () => {
+    it('opens when model prop changes from false to true', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: false });
+
+      // act
+      await wrapper.setProps({ value: true });
+
+      // assert after updating props
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((wrapper.vm as any).isRendered).to.equal(true);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((wrapper.vm as any).isOpen).to.equal(true);
+    });
+
+    it('closes when model prop changes from true to false', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true });
+
+      // act
+      await wrapper.setProps({ value: false });
+
+      // assert after updating props
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((wrapper.vm as any).isOpen).to.equal(false);
+      // isRendered will not be true directly due to transition
+    });
+
+    it('closes on pressing ESC key', async () => {
+      // arrange
+      const { triggerKeyUp, restore } = createWindowEventSpies();
+      const wrapper = mountComponent({ modelValue: true });
+
+      // act
+      const escapeEvent = new KeyboardEvent('keyup', { key: 'Escape' });
+      triggerKeyUp(escapeEvent);
+      await wrapper.vm.$nextTick();
+
+      // assert
+      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      restore();
+    });
+
+    it('emit false value after overlay and content transitions out and model prop is true', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true });
+      const overlayMock = wrapper.findComponent({ name: COMPONENT_MODAL_OVERLAY_NAME });
+      const contentMock = wrapper.findComponent({ name: COMPONENT_MODAL_CONTENT_NAME });
+
+      // act
+      overlayMock.vm.$emit('transitionedOut');
+      contentMock.vm.$emit('transitionedOut');
+      await wrapper.vm.$nextTick();
+
+      // assert
+      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+    });
+  });
+
+  it('renders provided slot content', () => {
+    // arrange
+    const expectedText = 'Slot content';
+    const slotContentClass = 'slot-content';
+
+    // act
+    const wrapper = mountComponent({
+      modelValue: true,
+      slotHtml: `<div class="${slotContentClass}">${expectedText}</div>`,
+    });
+
+    // assert
+    const slotWrapper = wrapper.find(`.${slotContentClass}`);
+    const slotText = slotWrapper.text();
+    expect(slotText).to.equal(expectedText);
+  });
+
+  describe('closeOnOutsideClick', () => {
+    it('does not close on overlay click if prop is false', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true, closeOnOutsideClick: false });
+
+      // act
+      const overlayMock = wrapper.findComponent({ name: COMPONENT_MODAL_OVERLAY_NAME });
+      overlayMock.vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      // assert
+      expect(wrapper.emitted().input).to.equal(undefined);
+    });
+
+    it('closes on overlay click if prop is true', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true, closeOnOutsideClick: true });
+
+      // act
+      const overlayMock = wrapper.findComponent({ name: COMPONENT_MODAL_OVERLAY_NAME });
+      overlayMock.vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      // assert
+      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+    });
+  });
+});
+
+function mountComponent(options: {
+  readonly modelValue: boolean,
+  readonly closeOnOutsideClick?: boolean,
+  readonly slotHtml?: string,
+  readonly attachToDocument?: boolean,
+}) {
+  return shallowMount(ModalContainer as unknown, {
+    propsData: {
+      value: options.modelValue,
+      ...(options.closeOnOutsideClick !== undefined ? {
+        closeOnOutsideClick: options.closeOnOutsideClick,
+      } : {}),
+    },
+    slots: options.slotHtml !== undefined ? { default: options.slotHtml } : undefined,
+    stubs: {
+      [COMPONENT_MODAL_OVERLAY_NAME]: {
+        name: COMPONENT_MODAL_OVERLAY_NAME,
+        template: '<div />',
+      },
+      [COMPONENT_MODAL_CONTENT_NAME]: {
+        name: COMPONENT_MODAL_CONTENT_NAME,
+        template: '<slot />',
+      },
+    },
+  });
+}
+
+function createWindowEventSpies() {
+  const originalAddEventListener = window.addEventListener;
+  const originalRemoveEventListener = window.removeEventListener;
+
+  let savedListener: EventListenerOrEventListenerObject | null = null;
+
+  window.addEventListener = (
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void => {
+    if (type === 'keyup' && typeof listener === 'function') {
+      savedListener = listener;
+    }
+    originalAddEventListener.call(window, type, listener, options);
+  };
+
+  window.removeEventListener = (
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void => {
+    if (type === 'keyup' && typeof listener === 'function') {
+      savedListener = null;
+    }
+    originalRemoveEventListener.call(window, type, listener, options);
+  };
+
+  return {
+    triggerKeyUp: (event: KeyboardEvent) => {
+      if (savedListener) {
+        (savedListener as EventListener)(event);
+      }
+    },
+    restore: () => {
+      window.addEventListener = originalAddEventListener;
+      window.removeEventListener = originalRemoveEventListener;
+    },
+  };
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/ModalContent.spec.ts b/tests/unit/presentation/components/Shared/Modal/ModalContent.spec.ts
new file mode 100644
index 00000000..40e9c54e
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/ModalContent.spec.ts
@@ -0,0 +1,104 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalContent from '@/presentation/components/Shared/Modal/ModalContent.vue';
+
+const DOM_MODAL_CONTENT_SELECTOR = '.modal-content-content';
+const DOM_MODAL_CONTENT_WRAPPER_SELECTOR = '.modal-content-wrapper';
+
+describe('ModalContent.vue', () => {
+  describe('rendering based on `show` prop', () => {
+    it('renders modal content when `show` prop is true', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+
+      // assert
+      expect(modalContentWrapper.exists()).to.equal(true);
+    });
+
+    it('does not render modal content when `show` prop is false', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: false });
+
+      // act
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+
+      // assert
+      expect(modalContentWrapper.exists()).to.equal(false);
+    });
+
+    it('does not render modal content by default', () => {
+      // arrange & act
+      const wrapper = mountComponent();
+
+      // assert
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+      expect(modalContentWrapper.exists()).to.equal(false);
+    });
+  });
+
+  it('renders slot content when provided', () => {
+    // arrange
+    const expectedText = 'Slot content';
+    const slotContentClass = 'slot-content';
+
+    // act
+    const wrapper = mountComponent({
+      showProperty: true,
+      slotHtml: `<div class="${slotContentClass}">${expectedText}</div>`,
+    });
+
+    // assert
+    const slotWrapper = wrapper.find(`.${slotContentClass}`);
+    const slotText = slotWrapper.text();
+    expect(slotText).to.equal(expectedText);
+  });
+
+  describe('aria attributes', () => {
+    it('sets aria-expanded to `true` when visible', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalContent = wrapper.find(DOM_MODAL_CONTENT_SELECTOR);
+      expect(modalContent.attributes('aria-expanded')).to.equal('true');
+    });
+
+    it('always sets aria-modal to true for the modal content', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalContent = wrapper.find(DOM_MODAL_CONTENT_SELECTOR);
+      expect(modalContent.attributes('aria-modal')).to.equal('true');
+    });
+  });
+
+  it('emits `transitionedOut` event after the transition leave', async () => {
+    // arrange
+    const wrapper = mountComponent({ showProperty: true });
+
+    // act
+    await wrapper.vm.$nextTick(); // Ensure the component reflects initial prop
+    wrapper.setProps({ show: false }); // Trigger the transition
+    await wrapper.vm.$nextTick(); // Allow the component to update
+    const transitionWrapper = wrapper.findComponent({ name: 'transition' });
+    transitionWrapper.vm.$emit('after-leave'); // Simulate the after-leave lifecycle hook of the transition
+
+    // assert
+    expect(wrapper.emitted().transitionedOut).to.have.length(1);
+  });
+});
+
+function mountComponent(options?: {
+  readonly showProperty?: boolean,
+  readonly slotHtml?: string,
+}) {
+  return shallowMount(ModalContent as unknown, {
+    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+    slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
+  });
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts b/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
new file mode 100644
index 00000000..df08bd40
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
@@ -0,0 +1,83 @@
+import 'mocha';
+import { shallowMount, mount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
+import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
+
+const DOM_CLOSE_BUTTON_SELECTOR = '.dialog__close-button';
+const MODAL_CONTAINER_COMPONENT_NAME = 'ModalContainer';
+
+describe('ModalDialog.vue', () => {
+  it(`renders ${MODAL_CONTAINER_COMPONENT_NAME}`, () => {
+    // arrange & act
+    const wrapper = mountComponent();
+
+    // assert
+    const modalContainerWrapper = wrapper.findComponent({ name: MODAL_CONTAINER_COMPONENT_NAME });
+    expect(modalContainerWrapper.exists()).to.equal(true);
+  });
+
+  describe(`binds the visibility flag ${MODAL_CONTAINER_COMPONENT_NAME}`, () => {
+    it('given true', () => {
+      // arrange & act
+      const wrapper = mountComponent({ modelValue: true, deepMount: true });
+
+      // assert
+      const modalContainerWrapper = wrapper.findComponent(ModalContainer);
+      expect(modalContainerWrapper.props('value')).to.equal(true);
+    });
+    it('given false', () => {
+      // arrange & act
+      const wrapper = mountComponent({ modelValue: false, deepMount: true });
+
+      // assert
+      const modalContainerWrapper = wrapper.findComponent(ModalContainer);
+      expect(modalContainerWrapper.props('value')).to.equal(false);
+    });
+  });
+
+  describe('close button', () => {
+    it('renders the close button', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true });
+
+      // act
+      const closeButton = wrapper.find(DOM_CLOSE_BUTTON_SELECTOR);
+
+      // assert
+      expect(closeButton.exists()).to.equal(true);
+    });
+
+    it('closes the modal when close button is clicked', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: true });
+
+      // act
+      const closeButton = wrapper.find(DOM_CLOSE_BUTTON_SELECTOR);
+      await closeButton.trigger('click');
+      await wrapper.vm.$nextTick();
+
+      // assert
+      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+    });
+  });
+});
+
+function mountComponent(options?: {
+  readonly modelValue?: boolean,
+  readonly slotHtml?: string,
+  readonly deepMount?: boolean,
+}) {
+  const mountFunction = options?.deepMount === true ? mount : shallowMount;
+  const wrapper = mountFunction(ModalDialog as unknown, {
+    propsData: options?.modelValue !== undefined ? { value: options?.modelValue } : undefined,
+    slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
+    stubs: options?.deepMount === true ? undefined : {
+      [MODAL_CONTAINER_COMPONENT_NAME]: {
+        name: MODAL_CONTAINER_COMPONENT_NAME,
+        template: '<slot />',
+      },
+    },
+  });
+  return wrapper;
+}
diff --git a/tests/unit/presentation/components/Shared/Modal/ModalOverlay.spec.ts b/tests/unit/presentation/components/Shared/Modal/ModalOverlay.spec.ts
new file mode 100644
index 00000000..549f9a2f
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Modal/ModalOverlay.spec.ts
@@ -0,0 +1,106 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalOverlay from '@/presentation/components/Shared/Modal/ModalOverlay.vue';
+
+const DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR = '.modal-overlay-background';
+
+describe('ModalOverlay.vue', () => {
+  describe('show', () => {
+    it('renders when prop is true', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+
+      // assert
+      expect(modalOverlayBackground.exists()).to.equal(true);
+    });
+
+    it('does not render prop is false', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: false });
+
+      // act
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+
+      // assert
+      expect(modalOverlayBackground.exists()).to.equal(false);
+    });
+
+    it('sets aria-expanded to `true` prop is true', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+      expect(modalOverlayBackground.attributes('aria-expanded')).to.equal('true');
+    });
+
+    describe('on modification', () => {
+      it('does not render when initially visible then turned invisible', async () => {
+        // arrange
+        const wrapper = mountComponent({ showProperty: true });
+        await wrapper.vm.$nextTick();
+
+        // act
+        wrapper.setProps({ show: false });
+        await wrapper.vm.$nextTick();
+
+        // assert
+        const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+        expect(modalOverlayBackground.exists()).to.equal(false);
+      });
+
+      it('renders when initially invisible then turned visible', async () => {
+        // arrange
+        const wrapper = mountComponent({ showProperty: false });
+        await wrapper.vm.$nextTick();
+
+        // act
+        wrapper.setProps({ show: true });
+        await wrapper.vm.$nextTick();
+
+        // assert
+        const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+        expect(modalOverlayBackground.exists()).to.equal(true);
+      });
+    });
+  });
+
+  describe('event emission', () => {
+    it('emits `click` event when clicked', async () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const overlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+      await overlayBackground.trigger('click.self.stop');
+
+      // assert
+      expect(wrapper.emitted().click).to.have.length(1);
+    });
+
+    it('emits `transitionedOut` event after leaving transition', async () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+      await wrapper.vm.$nextTick();
+
+      // act
+      wrapper.setProps({ show: false });
+      await wrapper.vm.$nextTick();
+      const transitionWrapper = wrapper.findComponent({ name: 'transition' });
+      transitionWrapper.vm.$emit('after-leave');
+
+      // assert
+      expect(wrapper.emitted().transitionedOut).to.have.length(1);
+    });
+  });
+});
+
+function mountComponent(options?: { readonly showProperty?: boolean }) {
+  return shallowMount(ModalOverlay as unknown, {
+    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+  });
+}