diff --git a/.gitignore b/.gitignore
index 800f3a8..01975a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env
diff --git a/package-lock.json b/package-lock.json
index 811eb42..b02c3a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,15 +9,21 @@
       "version": "1.0.0",
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@popperjs/core": "^2.11.8",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^29.5.12",
         "@types/node": "^22.5.0",
         "@types/react-dom": "^18.3.0",
+        "@types/react-router-bootstrap": "^0.26.6",
         "@vitejs/plugin-react": "^4.3.1",
+        "bootstrap": "^5.3.3",
         "react": "^18.3.1",
+        "react-bootstrap": "^2.10.4",
         "react-dom": "^18.3.1",
+        "react-router-bootstrap": "^0.26.3",
+        "react-router-dom": "^6.26.1",
         "typescript": "^4.8.4",
         "vite": "^5.4.2"
       },
@@ -33,6 +39,7 @@
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^4.6.2",
         "jsdom": "^24.1.1",
+        "sass": "^1.77.8",
         "source-map-support": "^0.5.21",
         "vitest": "^2.0.5"
       }
@@ -274,11 +281,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
+      "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1014,6 +1021,76 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+      "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -1206,6 +1283,14 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+      "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -1768,6 +1853,22 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router-bootstrap": {
+      "version": "0.26.6",
+      "resolved": "https://registry.npmjs.org/@types/react-router-bootstrap/-/react-router-bootstrap-0.26.6.tgz",
+      "integrity": "sha512-uqDwCdHp/qkXUPd8iOgZ92HQnTfyjpIwqgvbenW5SejrN3l6bkcObZQ/kkirHk39AQK4MJVpQBvcSu/SE6Crnw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -1781,6 +1882,11 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
@@ -2180,6 +2286,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/are-docs-informative": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz",
@@ -2423,6 +2542,36 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2573,11 +2722,52 @@
         "node": ">= 16"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "devOptional": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "devOptional": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/ci-info": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz",
       "integrity": "sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug=="
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2855,7 +3045,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -2889,6 +3078,15 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
       "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4386,6 +4584,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4449,6 +4653,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -4505,6 +4717,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -4579,7 +4803,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4624,7 +4848,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -5342,6 +5566,15 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -5379,7 +5612,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5781,18 +6013,33 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/psl": {
       "version": "1.9.0",
@@ -5846,6 +6093,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.4.tgz",
+      "integrity": "sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.9",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -5864,6 +6140,11 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "peer": true
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -5872,6 +6153,75 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-bootstrap": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.3.tgz",
+      "integrity": "sha512-cBgcWekti6lFRl/vXP8ZfKuA/0Qe7L5xBjQ6OwbGI30+NSAAH/YZGbO6whSeBWFILn6uTVOX939HDGhs+5WzOw==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1",
+        "react-router-dom": ">=6.0.0"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "dependencies": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -5906,9 +6256,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
@@ -6089,6 +6439,23 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6741,8 +7108,7 @@
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -6868,6 +7234,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -7086,6 +7466,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -7600,11 +7988,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
+      "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -8033,6 +8421,56 @@
       "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg=="
+    },
+    "@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+      "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "uncontrollable": {
+          "version": "8.0.4",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+          "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+          "requires": {}
+        }
+      }
+    },
     "@rollup/rollup-android-arm-eabi": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
@@ -8129,6 +8567,14 @@
       "integrity": "sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==",
       "optional": true
     },
+    "@swc/helpers": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+      "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -8570,6 +9016,22 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router-bootstrap": {
+      "version": "0.26.6",
+      "resolved": "https://registry.npmjs.org/@types/react-router-bootstrap/-/react-router-bootstrap-0.26.6.tgz",
+      "integrity": "sha512-uqDwCdHp/qkXUPd8iOgZ92HQnTfyjpIwqgvbenW5SejrN3l6bkcObZQ/kkirHk39AQK4MJVpQBvcSu/SE6Crnw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -8583,6 +9045,11 @@
         "@types/jest": "*"
       }
     },
+    "@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
@@ -8841,6 +9308,16 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "are-docs-informative": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz",
@@ -9021,6 +9498,18 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "devOptional": true
+    },
+    "bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -9113,11 +9602,43 @@
       "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "devOptional": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "devOptional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
     "ci-info": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz",
       "integrity": "sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug=="
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -9331,8 +9852,7 @@
     "dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "peer": true
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
     "dir-glob": {
       "version": "3.0.1",
@@ -9357,6 +9877,15 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
       "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -10483,6 +11012,12 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10530,6 +11065,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -10565,6 +11108,15 @@
         "has-bigints": "^1.0.1"
       }
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -10609,7 +11161,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "devOptional": true
     },
     "is-finalizationregistry": {
       "version": "1.0.2",
@@ -10639,7 +11191,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -11147,6 +11699,12 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
     },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true
+    },
     "npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -11173,8 +11731,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.13.2",
@@ -11449,7 +12006,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -11459,8 +12015,23 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "dev": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -11496,6 +12067,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-bootstrap": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.4.tgz",
+      "integrity": "sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==",
+      "requires": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.9",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -11511,11 +12101,61 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "peer": true
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
       "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="
     },
+    "react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "requires": {
+        "@remix-run/router": "1.19.1"
+      }
+    },
+    "react-router-bootstrap": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.3.tgz",
+      "integrity": "sha512-cBgcWekti6lFRl/vXP8ZfKuA/0Qe7L5xBjQ6OwbGI30+NSAAH/YZGbO6whSeBWFILn6uTVOX939HDGhs+5WzOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "requires": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -11541,9 +12181,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regexp.prototype.flags": {
       "version": "1.5.2",
@@ -11663,6 +12303,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -12156,8 +12807,7 @@
     "tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "type-check": {
       "version": "0.4.0",
@@ -12243,6 +12893,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -12342,6 +13003,14 @@
         "xml-name-validator": "^5.0.0"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 922bee3..996dc2b 100644
--- a/package.json
+++ b/package.json
@@ -3,19 +3,30 @@
   "version": "1.0.0",
   "license": "GPL-3.0-only",
   "description": "TaskNote App - Your daily-basis friend to help you with TODOs and Notes",
-  "keywords": ["react", "typescript", "node", "nestjs"],
+  "keywords": [
+    "react",
+    "typescript",
+    "node",
+    "nestjs"
+  ],
   "repository": "https://github.com/ricardo-campos-org/react-typescript-todolist",
   "private": true,
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.0",
     "@types/react-dom": "^18.3.0",
+    "@types/react-router-bootstrap": "^0.26.6",
     "@vitejs/plugin-react": "^4.3.1",
+    "bootstrap": "^5.3.3",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
+    "react-router-bootstrap": "^0.26.3",
+    "react-router-dom": "^6.26.1",
     "typescript": "^4.8.4",
     "vite": "^5.4.2"
   },
@@ -58,6 +69,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^24.1.1",
+    "sass": "^1.77.8",
     "source-map-support": "^0.5.21",
     "vitest": "^2.0.5"
   }
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
index 3ba59a3..65f2ced 100644
Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
index 822f74c..7afa2d9 100644
Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index 78ab362..ae1f8b5 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
index d3e1dfc..0eb9388 100644
Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
index dfb7a36..3471680 100644
Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 4eaa2c3..40eba6c 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/App.module.css b/src/App.module.css
deleted file mode 100644
index 9412e33..0000000
--- a/src/App.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.main {
-  min-height: 60vh;
-  text-align: center;
-  padding: 2em;
-}
-
-.main h2 {
-  margin-bottom: 0.8em;
-}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 56b5968..2f71b60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,84 +1,57 @@
-import React, { useState } from 'react';
-
-// Components
-import Footer from './components/Footer';
-import Header from './components/Header';
-import TaskForm from './components/TaskForm';
-import TaskList from './components/TaskList';
-import Modal from './components/Modal';
+import React, { useContext, useEffect } from 'react';
 
 // Styles
-import styles from './App.module.css';
+import './styles/custom.scss';
 
 // Interfaces
-import { ITask } from './interfaces/Task';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Landing from './views/Landing';
+import ProtectedRoute from './routes/ProtectedRoute';
+import Layout from './layout/PrivateLayout';
+import browserRoutes from './routes';
+import NotFound from './views/NotFound';
+import AuthContext from './context/AuthContext';
 
 const App: React.FC = () => {
-  const [taskList, setTaskList] = useState<ITask[]>([]);
-  const [taskToUpdate, setTaskToUpdate] = useState<ITask | null>(null);
+  const { signed, checkCurrentAuthUser } = useContext(AuthContext);
 
-  const deleteTask = (id: number) => {
-    setTaskList(
-      taskList.filter((task) => task.id !== id)
-    );
-  };
-
-  const hideOrShowModal = (display: boolean) => {
-    const modal = document.querySelector('#modal');
-    if (display) {
-      modal!.classList.remove('hide');
-    } else {
-      modal!.classList.add('hide');
+  const notSignedRouter = createBrowserRouter([
+    {
+      path: '*',
+      element: <Landing />
     }
+  ]);
+
+  const signedRouter = createBrowserRouter([
+    {
+      path: '/',
+      element: <ProtectedRoute />,
+      children: [
+        {
+          element: <Layout />,
+          children: browserRoutes
+        }
+      ]
+    },
+    {
+      path: '*',
+      element: <NotFound />
+    }
+  ]);
+
+  const getBrowserRoutes = () => {
+    if (signed) {
+      return signedRouter;
+    }
+    return notSignedRouter;
   };
 
-  const editTask = (task: ITask): void => {
-    hideOrShowModal(true);
-    setTaskToUpdate(task);
-  };
-
-  const updateTask = (id: number, title: string, difficulty: number) => {
-    const updatedTask: ITask = { id, title, difficulty };
-    const updatedItems = taskList.map((task) => (task.id === updatedTask.id ? updatedTask : task));
-
-    setTaskList(updatedItems);
-    hideOrShowModal(false);
-  };
+  useEffect(() => {
+    checkCurrentAuthUser(window.location.pathname);
+  }, []);
 
   return (
-    <>
-      <Modal>
-        <TaskForm
-          btnText="Update task"
-          taskList={taskList}
-          task={taskToUpdate}
-          handleUpdate={updateTask}
-        />
-      </Modal>
-      <Header />
-
-      <main className={styles.main}>
-        <div>
-          <h2>What are you going to do?</h2>
-          <TaskForm
-            btnText="New task"
-            taskList={taskList}
-            setTaskList={setTaskList}
-          />
-        </div>
-
-        <div>
-          <h2>Your tasks</h2>
-          <TaskList
-            taskList={taskList}
-            handleDelete={deleteTask}
-            handleEdit={editTask}
-          />
-        </div>
-      </main>
-
-      <Footer />
-    </>
+    <RouterProvider router={getBrowserRoutes()} />
   );
 };
 
diff --git a/src/api-service/api.ts b/src/api-service/api.ts
new file mode 100644
index 0000000..72e20e5
--- /dev/null
+++ b/src/api-service/api.ts
@@ -0,0 +1,37 @@
+const getHeaders = (): Headers => {
+  const headers = new Headers();
+  return headers;
+};
+
+const api = {
+  get: (url: string, params?: object) => fetch(url, {
+    method: 'GET',
+    headers: getHeaders(),
+    ...params
+  }),
+
+  post: (url: string, data: BodyInit) => fetch(url, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: data
+  }),
+
+  put: (url: string, data: BodyInit) => fetch(url, {
+    method: 'PUT',
+    headers: getHeaders(),
+    body: data
+  }),
+
+  patch: (url: string, data: any) => fetch(url, {
+    method: 'PATCH',
+    headers: getHeaders(),
+    body: data
+  }),
+
+  delete: (url: string) => fetch(url, {
+    method: 'DELETE',
+    headers: getHeaders()
+  })
+};
+
+export default api;
diff --git a/src/api-service/apiConfig.ts b/src/api-service/apiConfig.ts
new file mode 100644
index 0000000..5dcd540
--- /dev/null
+++ b/src/api-service/apiConfig.ts
@@ -0,0 +1,36 @@
+import { env } from '../env';
+import { User } from '../types/User';
+
+const server = env.VITE_BACKEND_SERVER;
+
+/**
+ *
+ */
+function privateSessionFake(signed: boolean): Promise<User | undefined> {
+  return new Promise((resolve, reject) => {
+    if (signed) {
+      resolve({
+        name: 'User',
+        email: 'email@domain.com'
+      });
+    } else {
+      reject();
+    }
+  });
+}
+
+const ApiConfig = {
+  login: `${server}/login`,
+
+  loginFake: async (): Promise<void> => new Promise((resolve) => {
+    resolve();
+  }),
+
+  logoutFake: async (): Promise<void> => new Promise((resolve) => {
+    resolve();
+  }),
+
+  currentSessionFake: privateSessionFake
+};
+
+export default ApiConfig;
diff --git a/src/app-constants/app-constants.ts b/src/app-constants/app-constants.ts
new file mode 100644
index 0000000..6175102
--- /dev/null
+++ b/src/app-constants/app-constants.ts
@@ -0,0 +1 @@
+export const REDIRECT_PATH = 'TASKNOTE-REDIRECT';
diff --git a/src/assets/logo-450-450.png b/src/assets/logo-450-450.png
new file mode 100644
index 0000000..829c8cd
Binary files /dev/null and b/src/assets/logo-450-450.png differ
diff --git a/src/assets/logo2-450-450.png b/src/assets/logo2-450-450.png
new file mode 100644
index 0000000..c442aca
Binary files /dev/null and b/src/assets/logo2-450-450.png differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 440f433..68f4a41 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,18 +1,27 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { Button } from 'react-bootstrap';
 import style from './Footer.module.css';
 import { env } from '../env';
+import AuthContext from '../context/AuthContext';
 
 const Footer = () => {
-  const build = env.BUILD;
+  const { signOut } = useContext(AuthContext);
+  const build = env.VITE_BUILD;
 
   return (
     <footer className={style.footer}>
-      <p>
-        <span>React + TS Todo</span>
-        {' '}
-        @ 2022
-        {` Build: ${build}`}
-      </p>
+
+      <span>React + TS Todoo</span>
+      {' '}
+      @ 2024
+      {` Build: ${build}`}
+
+      <Button
+        type="button"
+        onClick={() => signOut()}
+      >
+        Sair
+      </Button>
     </footer>
   );
 };
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
deleted file mode 100644
index eb6a609..0000000
--- a/src/components/Header.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.header {
-  background-color: #282c34;
-  color: #61dafb;
-  text-align: center;
-  padding: 1em;
-}
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 5f60a57..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import styles from './Header.module.css';
-
-const Header = () => (
-  <header className={styles.header}>
-    <h1>React + TS Todo</h1>
-  </header>
-);
-
-export default Header;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..ecc7870
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import { LinkContainer } from 'react-router-bootstrap';
+import Logo from '../../assets/logo2-450-450.png';
+
+/**
+ *
+ */
+function Header() {
+  return (
+    <header>
+      <Navbar expand="lg" className="bg-body-secondary">
+        <Container>
+          <LinkContainer to="/home">
+            <Navbar.Brand>
+              <img width="30" src={Logo} alt="TaskNote logo" />
+            </Navbar.Brand>
+          </LinkContainer>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="me-auto">
+              <LinkContainer to="/home">
+                <Nav.Link>Home</Nav.Link>
+              </LinkContainer>
+              <LinkContainer to="/about">
+                <Nav.Link>About</Nav.Link>
+              </LinkContainer>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/context/AuthContext.ts b/src/context/AuthContext.ts
new file mode 100644
index 0000000..9bc9a09
--- /dev/null
+++ b/src/context/AuthContext.ts
@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { User } from '../types/User';
+
+export interface AuthContextData {
+  signed: boolean;
+  user: User | undefined;
+  checkCurrentAuthUser: (pathname: string) => Promise<void>;
+  signIn: () => void;
+  signOut: () => void;
+  isAdmin: boolean;
+}
+
+const AuthContext = createContext<AuthContextData>({} as AuthContextData);
+
+export default AuthContext;
diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx
new file mode 100644
index 0000000..7ff7529
--- /dev/null
+++ b/src/context/AuthProvider.tsx
@@ -0,0 +1,117 @@
+/* eslint-disable no-console */
+import React, { useMemo, useState } from 'react';
+import { User } from '../types/User';
+import { env } from '../env';
+import ApiConfig from '../api-service/apiConfig';
+import AuthContext, { AuthContextData } from './AuthContext';
+import { REDIRECT_PATH } from '../app-constants/app-constants';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }: Props) => {
+  const [signed, setSigned] = useState<boolean>(false);
+  const [user, setUser] = useState<User | undefined>();
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
+  const [intervalInstance, setIntervalInstance] = useState<NodeJS.Timeout | null>(null);
+
+  const fetchCurrentSession = async (pathname: string): Promise<User | undefined> => {
+    try {
+      const currentUser = await ApiConfig.currentSessionFake(signed);
+      if (currentUser) {
+        setSigned(true);
+      }
+      return currentUser;
+    } catch (e) {
+      if (e instanceof Error) {
+        console.warn(e.message);
+      } else if (e) {
+        console.warn(e);
+      }
+      // Clear stored client id and name
+      localStorage.clear();
+      localStorage.setItem(REDIRECT_PATH, pathname);
+      setUser(undefined);
+      setSigned(false);
+    }
+    return undefined;
+  };
+
+  const updateUserSession = (userPriv: User) => {
+    localStorage.setItem('TaskNote-token', userPriv.email);
+  };
+
+  const checkCurrentAuthUser = async (pathname: string): Promise<void> => {
+    const currentUser = await fetchCurrentSession(pathname);
+    if (currentUser) {
+      updateUserSession(currentUser);
+      setUser(currentUser);
+    }
+  };
+
+  const signIn = async (): Promise<void> => {
+    const appEnv = env.VITE_ENV || 'dev';
+    await ApiConfig.loginFake();
+    setSigned(true);
+    const currentUser: User = {
+      name: `Ricardo ${appEnv}`,
+      email: 'ricardompcampos@gmail.com'
+    };
+
+    setUser(currentUser);
+  };
+
+  const signOut = async (): Promise<void> => {
+    await ApiConfig.logoutFake();
+    setSigned(false);
+    setUser(undefined);
+    setIsAdmin(false);
+    if (intervalInstance) {
+      clearInterval(intervalInstance);
+      setIntervalInstance(null);
+    }
+    localStorage.clear();
+  };
+
+  const refreshTokenPvt = async () => {
+    const currentUser = await fetchCurrentSession('/');
+    if (currentUser) {
+      updateUserSession(currentUser);
+    }
+  };
+
+  // 2 minutes
+  const second = 1000;
+  const minute = second * 60;
+  const REFRESH_TIMER = minute * 2;
+
+  if (intervalInstance == null && signed) {
+    const instance = setInterval(() => {
+      refreshTokenPvt()
+        .then(() => {
+          console.log('User session successfully refreshed!');
+        })
+        .catch((e) => console.error(e));
+    }, REFRESH_TIMER);
+
+    setIntervalInstance(instance);
+  }
+
+  const contextValue: AuthContextData = useMemo(() => ({
+    signed,
+    user,
+    checkCurrentAuthUser,
+    signIn,
+    signOut,
+    isAdmin
+  }), [signed, user, checkCurrentAuthUser, signIn, signOut, isAdmin]);
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      { children }
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e9cae63..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,9 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-  font-family: Helvetica;
-}
-
-.hide {
-  display: none !important;
-}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index ba89038..5238a65 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-
-import './index.css';
+import AuthProvider from './context/AuthProvider';
 
 window.global ||= window;
 
@@ -12,6 +11,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <App />
+    <AuthProvider>
+      <App />
+    </AuthProvider>
   </React.StrictMode>
 );
diff --git a/src/layout/PrivateLayout/index.tsx b/src/layout/PrivateLayout/index.tsx
new file mode 100644
index 0000000..9048d41
--- /dev/null
+++ b/src/layout/PrivateLayout/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Container } from 'react-bootstrap';
+import Header from '../../components/Header';
+import Footer from '../../components/Footer';
+
+/**
+ *
+ */
+function Layout() {
+  return (
+    <>
+      <Header />
+
+      <Container>
+        <Outlet />
+      </Container>
+
+      <Footer />
+    </>
+  );
+}
+
+export default Layout;
diff --git a/src/routes/ProtectedRoute/index.tsx b/src/routes/ProtectedRoute/index.tsx
new file mode 100644
index 0000000..cb9e30f
--- /dev/null
+++ b/src/routes/ProtectedRoute/index.tsx
@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import AuthContext from '../../context/AuthContext';
+
+const ProtectedRoute = (): React.JSX.Element => {
+  const { signed, signOut } = useContext(AuthContext);
+
+  if (!signed) {
+    signOut();
+    return <Navigate to="/" replace />;
+  }
+  return <Outlet />;
+};
+
+export default ProtectedRoute;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..79eda30
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Navigate, RouteObject } from 'react-router-dom';
+import getStoredPath from '../utils/PathUtils';
+import Home from '../views/Home';
+import About from '../views/About';
+import NotFound from '../views/NotFound';
+
+const browserRoutes: RouteObject[] = [
+  {
+    path: '/',
+    element: (
+      <Navigate to={getStoredPath()} replace />
+    )
+  },
+  {
+    path: '/login',
+    element: (
+      <Navigate to="/home" replace />
+    )
+  },
+  {
+    path: '/home',
+    element: (
+      <Home />
+    )
+  },
+  {
+    path: '/about',
+    element: (
+      <About />
+    )
+  },
+  {
+    path: '/404',
+    element: (
+      <NotFound />
+    )
+  }
+];
+
+export default browserRoutes;
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
new file mode 100644
index 0000000..25f135c
--- /dev/null
+++ b/src/styles/custom.scss
@@ -0,0 +1,10 @@
+$theme-colors: (
+  'info': tomato,
+  'danger': teal
+);
+
+@import '~bootstrap/scss/bootstrap';
+
+.bg-body-secondary {
+  background-color: red;
+}
\ No newline at end of file
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 0000000..ed349b9
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,4 @@
+export type User = {
+  name: string;
+  email: string;
+}
diff --git a/src/utils/PathUtils.ts b/src/utils/PathUtils.ts
new file mode 100644
index 0000000..ae0ea34
--- /dev/null
+++ b/src/utils/PathUtils.ts
@@ -0,0 +1,18 @@
+import { REDIRECT_PATH } from '../app-constants/app-constants';
+
+/**
+ *
+ */
+function getStoredPath() {
+  const root: string = '/';
+  const home: string = '/home';
+
+  const storedPath: string | null = localStorage.getItem(REDIRECT_PATH);
+  if (storedPath) {
+    localStorage.removeItem(REDIRECT_PATH);
+    return storedPath === root ? home : storedPath;
+  }
+  return home;
+}
+
+export default getStoredPath;
diff --git a/src/views/About/index.tsx b/src/views/About/index.tsx
new file mode 100644
index 0000000..32a23f6
--- /dev/null
+++ b/src/views/About/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ *
+ */
+function About() {
+  return (
+    <h1>This is about!</h1>
+  );
+}
+
+export default About;
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
new file mode 100644
index 0000000..4b1f73e
--- /dev/null
+++ b/src/views/Home/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ *
+ */
+function Home() {
+  return (
+    <h1>This is home!</h1>
+  );
+}
+
+export default Home;
diff --git a/src/views/Landing/index.tsx b/src/views/Landing/index.tsx
new file mode 100644
index 0000000..32f83e1
--- /dev/null
+++ b/src/views/Landing/index.tsx
@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { Button } from 'react-bootstrap';
+import './styles.scss';
+import AuthContext from '../../context/AuthContext';
+
+/**
+ *
+ */
+function Landing() {
+  const { signIn } = useContext(AuthContext);
+
+  return (
+    <>
+      <h1>This is landing page</h1>
+      <Button
+        type="button"
+        onClick={() => signIn()}
+      >
+        Login
+      </Button>
+    </>
+  );
+}
+
+export default Landing;
diff --git a/src/views/Landing/styles.scss b/src/views/Landing/styles.scss
new file mode 100644
index 0000000..c9121e6
--- /dev/null
+++ b/src/views/Landing/styles.scss
@@ -0,0 +1,3 @@
+body {
+  background-color: #ccc;
+}
diff --git a/src/views/NotFound/index.tsx b/src/views/NotFound/index.tsx
new file mode 100644
index 0000000..2951c55
--- /dev/null
+++ b/src/views/NotFound/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ *
+ */
+function NotFound() {
+  return (
+    <h2>Not found!</h2>
+  );
+}
+
+export default NotFound;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..757869c 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module '*.png';
diff --git a/vite.config.ts b/vite.config.ts
index 33be9da..2a16ecc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { ConfigEnv, defineConfig, UserConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath } from 'url';
+import path from 'path';
 
 export default defineConfig(({ mode }: ConfigEnv) => {
   const config: UserConfig = {
@@ -38,7 +39,8 @@ export default defineConfig(({ mode }: ConfigEnv) => {
     },
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url))
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
       }
     }
   };