diff --git a/polsevev.dev.frontend/src/Hooks/useComponentVisible.tsx b/polsevev.dev.frontend/src/Hooks/useComponentVisible.tsx
deleted file mode 100644
index 03b9f97..0000000
--- a/polsevev.dev.frontend/src/Hooks/useComponentVisible.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-export default function useComponentVisible(initialIsVisible: boolean) {
-    const [isCompVisible, setIsCompVisible] =
-        useState<boolean>(initialIsVisible);
-
-    const ref = useRef<HTMLDivElement>(null);
-    const handleClickOutsideComp = (event: Event) => {
-        if (ref.current && !ref.current.contains(event.target as Node)) {
-            setIsCompVisible(false);
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutsideComp, true);
-        return () => {
-            document.removeEventListener("click", handleClickOutsideComp, true);
-        };
-    });
-
-    const openComp = () => setIsCompVisible(true);
-
-    return { ref, isCompVisible, openComp };
-}
diff --git a/polsevev.dev.frontend/src/components/NavigationMenu.tsx b/polsevev.dev.frontend/src/components/NavigationMenu.tsx
index e392d8c..bd1ad3b 100644
--- a/polsevev.dev.frontend/src/components/NavigationMenu.tsx
+++ b/polsevev.dev.frontend/src/components/NavigationMenu.tsx
@@ -1,11 +1,13 @@
 import { FC, useEffect, useState } from "react";
-import { NavItem, SideBarBox } from "../styles/TopBarStyle";
+import { ExitLayer, NavItem, SideBarBox } from "../styles/TopBarStyle";
 import { useNavigate } from "react-router";
-import useComponentVisible from "../Hooks/useComponentVisible";
 
 const NavigationMenu: FC = () => {
     const navigate = useNavigate();
-    const handleClick = (loc: string) => navigate(loc);
+    const handleClick = (loc: string) => {
+        setIsNavMenuOpen(false);
+        navigate(loc);
+    };
     const locations: Array<string> = ["/", "/about", "CV", "/projects"];
     const [isPhone, setIsPhone] = useState(
         window.matchMedia("(min-width: 720px)").matches
@@ -13,9 +15,7 @@ const NavigationMenu: FC = () => {
     const locationButtons = locations.map((location) => (
         <NavItem onClick={() => handleClick(location)}>{location}</NavItem>
     ));
-
-    const { ref, isCompVisible, openComp } = useComponentVisible(false);
-
+    const [isNavMenuOpen, setIsNavMenuOpen] = useState<boolean>(false);
     useEffect(() => {
         const recheckIsPhone = () => {
             setIsPhone(window.matchMedia("(min-width: 720px)").matches);
@@ -30,11 +30,14 @@ const NavigationMenu: FC = () => {
                 locationButtons
             ) : (
                 <>
-                    <button onClick={() => openComp()}>
+                    <button onClick={() => setIsNavMenuOpen(true)}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
-                    {isCompVisible && (
-                        <SideBarBox ref={ref}>{locationButtons}</SideBarBox>
+                    <SideBarBox xPosition={isNavMenuOpen ? 0 : 20}>
+                        {locationButtons}
+                    </SideBarBox>
+                    {isNavMenuOpen && (
+                        <ExitLayer onClick={() => setIsNavMenuOpen(false)} />
                     )}
                 </>
             )}
diff --git a/polsevev.dev.frontend/src/styles/TopBarStyle.tsx b/polsevev.dev.frontend/src/styles/TopBarStyle.tsx
index 854d00a..e5cfec0 100644
--- a/polsevev.dev.frontend/src/styles/TopBarStyle.tsx
+++ b/polsevev.dev.frontend/src/styles/TopBarStyle.tsx
@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 
 export const Wrapper = styled("div")`
     position: fixed;
@@ -34,19 +34,10 @@ export const GithubLogo = styled("img")(() => ({
     padding: "5px",
 }));
 
-const comeFromLeft = keyframes`
-    from{
-        left: 100%;
-    }
-    to {
-        left: calc(100% - 10em);
-    }
-`;
-
-export const SideBarBox = styled("div")`
+export const SideBarBox = styled("div")<{ xPosition: number }>`
+    z-index: 100;
     position: absolute;
-    top: 0;
-    animation: ${comeFromLeft} 0.2s linear;
+    top: 2px;
     left: calc(100% - 10em);
     overflow: overlay;
     background-color: ${(props) => props.theme.palette.aero};
@@ -55,4 +46,16 @@ export const SideBarBox = styled("div")`
     border: 2px solid #ffffff;
     padding-bottom: 5px;
     padding-top: 5px;
+    transform: translateX(${({ xPosition }) => `${xPosition}em`});
+    transition: transform 0.2s ease-in-out;
+`;
+
+export const ExitLayer = styled("div")`
+    position: absolute;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 90;
+    transform: translateX(-20px);
 `;