diff --git a/package-lock.json b/package-lock.json
index bd39f8b..fc1d93e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "firebase": "^11.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-focus-lock": "^2.13.5",
         "react-icons": "^5.3.0",
         "react-redux": "^9.1.2",
         "react-router-dom": "^6.28.0",
@@ -7568,6 +7569,11 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -9156,6 +9162,17 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw=="
     },
+    "node_modules/focus-lock": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.5.tgz",
+      "integrity": "sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -15472,6 +15489,17 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-clientside-effect": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.7.tgz",
+      "integrity": "sha512-gce9m0Pk/xYYMEojRI9bgvqQAkl6hm7ozQvqWPyQx+kULiatdHgkNM1QG4DQRx5N9BAzWSCJmt9mMV8/KsdgVg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15663,6 +15691,28 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-focus-lock": {
+      "version": "2.13.5",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.13.5.tgz",
+      "integrity": "sha512-HjHuZFFk2+j6ZT3LDQpyqffue541HrxUG/OFchCEwis9nstgNg0rREVRAxHBcB1lHJ5Fsxtx1qya/5xFwxDb4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "focus-lock": "^1.3.5",
+        "prop-types": "^15.6.2",
+        "react-clientside-effect": "^1.2.6",
+        "use-callback-ref": "^1.3.2",
+        "use-sidecar": "^1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
@@ -18064,6 +18114,47 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
diff --git a/package.json b/package.json
index a9d23b2..56fe1e9 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "firebase": "^11.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-focus-lock": "^2.13.5",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.28.0",
diff --git a/src/App.css b/src/App.css
index 0aa1a5a..264cb42 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,11 +1,12 @@
 [data-testid='app_main'] {
   display: flex;
   justify-content: center;
-  margin: auto;
+  height: 100%;
   width: 80%;
-  padding-top: 9rem;
   gap: 2rem;
-  height: 100%;
+  padding-top: 9rem;
+  padding-bottom: 2rem;
+  margin: auto;
   font-size: 1.5rem;
 }
 
diff --git a/src/components/common/modal/Modal.css b/src/components/common/modal/Modal.css
index 503eaa9..99320a7 100644
--- a/src/components/common/modal/Modal.css
+++ b/src/components/common/modal/Modal.css
@@ -11,6 +11,7 @@ div[data-testid='modal_overlay'] {
   overflow-y: auto;
   z-index: 1000;
   padding-top: 9rem;
+  backdrop-filter: blur(5px);
 }
 
 div[data-testid='modal_component'] {
diff --git a/src/components/common/modal/Modal.jsx b/src/components/common/modal/Modal.jsx
index c07dcaa..109f43c 100644
--- a/src/components/common/modal/Modal.jsx
+++ b/src/components/common/modal/Modal.jsx
@@ -1,3 +1,4 @@
+import FocusLock from 'react-focus-lock'
 import Button from '../button/Button'
 import './Modal.css'
 
@@ -5,18 +6,20 @@ const Modal = ({ isOpen, onClose, 'data-testid': testId, children }) => {
   if (!isOpen) return null
 
   return (
-    <div data-testid="modal_overlay">
-      <div open={isOpen} data-testid="modal_component">
-        <div data-testid="modal_header">
-          <Button
-            text="Close"
-            data-testid="modal_close_btn"
-            onClick={onClose}
-          ></Button>
+    <FocusLock>
+      <div data-testid="modal_overlay" onClick={onClose}>
+        <div open={isOpen} data-testid="modal_component">
+          <div data-testid="modal_header">
+            <Button
+              text="Close"
+              data-testid="modal_close_btn"
+              onClick={onClose}
+            ></Button>
+          </div>
+          <div data-testid={testId}>{children}</div>
         </div>
-        <div data-testid={testId}>{children}</div>
       </div>
-    </div>
+    </FocusLock>
   )
 }