diff --git a/package-lock.json b/package-lock.json
index af52879..a210cea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.2.1",
         "emoji-picker-react": "^4.4.7",
+        "focus-trap-react": "^10.2.3",
         "form-data": "^4.0.0",
         "immer": "^9.0.16",
         "react": "^18.2.0",
@@ -8397,6 +8398,28 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "node_modules/focus-trap-react": {
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.3.tgz",
+      "integrity": "sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==",
+      "dependencies": {
+        "focus-trap": "^7.5.4",
+        "tabbable": "^6.2.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -16399,6 +16422,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
@@ -23871,6 +23899,23 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "requires": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "focus-trap-react": {
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.3.tgz",
+      "integrity": "sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==",
+      "requires": {
+        "focus-trap": "^7.5.4",
+        "tabbable": "^6.2.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -29457,6 +29502,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
diff --git a/package.json b/package.json
index 647edbd..82a47bd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.2.1",
     "emoji-picker-react": "^4.4.7",
+    "focus-trap-react": "^10.2.3",
     "form-data": "^4.0.0",
     "immer": "^9.0.16",
     "react": "^18.2.0",
diff --git a/src/component/Sidebar/SideBar.jsx b/src/component/Sidebar/SideBar.jsx
index c5a8460..b409803 100644
--- a/src/component/Sidebar/SideBar.jsx
+++ b/src/component/Sidebar/SideBar.jsx
@@ -33,7 +33,7 @@ import NoChats from "../Messages/NoChats";
 import { ViewNotifyAction } from "../../react-redux/actions/Notifications";
 
 function Sidebar() {
-
+    const [isLogoutModalOpen, setIsLogoutModalOpen] = useState();
     const auth = useSelector((s) => s.AuthReducer)
     const { user, toFgtPwd } = auth;
     const nameInApi = user?.user_name
@@ -183,9 +183,9 @@ function Sidebar() {
         document.getElementById("CTReplyDiv").style.display = "none"
         setOPacity()
     }
-    function handleLogout() {
-        document.getElementsByClassName("logoutDiv")[0].style.display = "flex";
-        setOPacity()
+
+    function openLogoutModal() {
+        setIsLogoutModalOpen(true);
     }
 
     const pro = useSelector((p) => p.ProfileNameReducer)
@@ -266,7 +266,7 @@ else{
                         navigate("/phonesearch")
                     }} />
                 </div>
-                <img src={logoutIcon} className="NV3Logout" onClick={handleLogout} />
+                <img src={logoutIcon} className="NV3Logout" onClick={openLogoutModal} />
             </div>
             </div>
             <div className="navbar3">
@@ -295,7 +295,7 @@ else{
                     <Link to={`/profile/${nameInApi}`}><li className="sbListItem" onClick={() => { handleProfile() }}><img className="sbListIcon" src={profile} id="profileIcon" />   <span className="sbListName">Profile  </span></li></Link>
                 </ul>
                 <button className="sideBarTweetBtn" onClick={() => { xyz() }}>Create Tweet</button>
-                <button className="logOutBtn" onClick={handleLogout}><img src={logoutIcon} className="logoutIcon" />Log Out</button>
+                <button className="logOutBtn" onClick={openLogoutModal}><img src={logoutIcon} className="logoutIcon" />Log Out</button>
             </div>
             <div id="SEARCHBOX">
                 <div className="searchBar">
@@ -321,7 +321,7 @@ else{
             </div>
 
             <CreateTweet />
-            <LogOut />
+            {isLogoutModalOpen ? <LogOut onClose={() => setIsLogoutModalOpen(false)} /> : null}
 
         </div>
         {(loading === true) ? <Spinner animation="border" variant="light" id="loadSpinner" /> : null}
diff --git a/src/component/logOut/logOut.jsx b/src/component/logOut/logOut.jsx
index a482f6d..3cca01e 100644
--- a/src/component/logOut/logOut.jsx
+++ b/src/component/logOut/logOut.jsx
@@ -4,42 +4,38 @@ import logout from "../Assets/logout.svg"
 import "./logout.css"
 import { useDispatch } from "react-redux";
 import { setLogout } from "../../react-redux/actions/authAction";
+import FocusTrap from "focus-trap-react";
 
-function LogOut() {
-    const naavigate = useNavigate()
+function LogOut({ onClose }) {
+    const navigate = useNavigate()
     const dispatch = useDispatch()
+
     async function handleLogOut() {
         await localStorage.clear();
-        await dispatch(setLogout())
-        naavigate("/login");
-        document.getElementsByClassName("logoutDiv")[0].style.display = "none";
-    }
-    function setOPacity() {
-        var items = document.getElementsByClassName("POPUPBG")
-        for (var i = 0; i < items.length; i++) {
-            document.getElementsByClassName("POPUPBG")[i].style.opacity = 1;
-        }
-    }
+        await dispatch(setLogout());
 
-    function handleCancelLog() {
-        document.getElementsByClassName("logoutDiv")[0].style.display = "none";
-        setOPacity()
+        onClose();
+
+        navigate("/login");
     }
 
-    return <>
-        <div className="logoutDiv">
-            <div className="lOut1">
-                <p className="logoutText1">Log Out?</p>
-                <p className="logoutText2">Are you sure you want to log out?</p>
-                <button className="logoutbtn1" onClick={handleLogOut}>Yes</button>
-                <button className="logoutbtn2" onClick={handleCancelLog}>No</button>
-            </div>
-            <div className="lOut2">
-                <img src={logout} className="logoutImage" />
+    return (
+        <FocusTrap active>
+            <div class="background">
+                <div className="logoutDiv">
+                    <div className="lOut1">
+                        <p className="logoutText1">Log Out?</p>
+                        <p className="logoutText2">Are you sure you want to log out?</p>
+                        <button className="logoutbtn1" onClick={handleLogOut}>Yes</button>
+                        <button className="logoutbtn2" onClick={onClose}>No</button>
+                    </div>
+                    <div className="lOut2">
+                        <img src={logout} className="logoutImage" alt="" />
+                    </div>
+                </div>
             </div>
-        </div>
-
-    </>
+        </FocusTrap>
+    );
 }
 
-export default LogOut;
\ No newline at end of file
+export default LogOut;
diff --git a/src/component/logOut/logout.css b/src/component/logOut/logout.css
index ccd9eac..0154025 100644
--- a/src/component/logOut/logout.css
+++ b/src/component/logOut/logout.css
@@ -1,6 +1,13 @@
+.background {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 10000000;
+}
+
 .logoutDiv{
 display: flex;
-position:absolute;
+position: fixed;
 top:20vh;
 left:29vw;
 width:38vw;
@@ -13,7 +20,6 @@ border-radius: 16px;
 box-shadow: 0px 50px 80px #1A1C1E;
 border: 0.7px solid rgba(255, 255, 255, 0.2);
 z-index:110;
-display: none;
 }
 .lOut1{
 display: flex;
@@ -222,4 +228,4 @@ margin-left:-30vw;
         .logoutImage{
             width:115px;
         }
-    }
\ No newline at end of file
+    }