diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 4d4b931..b0fe561 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -89,6 +89,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     });
 
 
+    usePrompt('You may have some unsaved changes. You still want to leave?', methods.formState.isDirty)
 
     const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);
 
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 3e3d4f9..b3abf4c 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -1,6 +1,4 @@
-import { Navigate, NavLink, Route, Routes, useLocation, useParams } from "react-router-dom";
-import Slider from "src/Components/Slider/Slider";
-import { useAppSelector, useCarousel, useMediaQuery, usePrompt } from "src/utils/hooks";
+import { useCarousel, useMediaQuery, } from "src/utils/hooks";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import Card from "src/Components/Card/Card";
@@ -8,7 +6,7 @@ import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab"
 import TeamTab from "./Components/TeamTab/TeamTab";
 import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
 import FormContainer from "./Components/FormContainer/FormContainer";
-import { useMemo } from "react";
+import { useState } from "react";
 import SaveChangesCard from "./Components/SaveChangesCard/SaveChangesCard";
 
 
@@ -31,21 +29,11 @@ const links = [tabs['project-details'], tabs['team'], tabs['extras']];
 
 type TabsKeys = keyof typeof tabs;
 
-const getCurrentTab = (locattion: string) => {
-    for (const key in tabs) {
-        const tab = tabs[key as TabsKeys];
-        if (locattion.includes(tab.path))
-            return key as TabsKeys;
-    }
-    return null;
-}
 
 export default function ListProjectPage() {
 
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
-
-    const location = useLocation();
-    const currentTab = useMemo(() => getCurrentTab(location.pathname), [location.pathname])
+    const [curTab, setCurTab] = useState<TabsKeys>(tabs['project-details'].path)
     const { viewportRef, } = useCarousel({
         align: 'start', slidesToScroll: 2,
         containScroll: "trimSnaps",
@@ -67,16 +55,19 @@ export default function ListProjectPage() {
                             <ul className=' flex flex-col gap-8'>
                                 {links.map((link, idx) =>
                                     <li key={idx}>
-                                        <NavLink
-                                            replace
-                                            to={link.path}
-                                            className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
-                                 active:scale-95 transition-transform
-                                ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
-                                `}
+                                        <button
+                                            //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+                                            //  active:scale-95 transition-transform
+                                            // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                            // `}
+                                            className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
+                                                        active:scale-95 transition-transform
+                                                        ${link.path === curTab ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                                        `}
+                                            onClick={() => setCurTab(link.path)}
                                         >
                                             {link.text}
-                                        </NavLink>
+                                        </button>
                                     </li>)}
                             </ul>
                         </Card>
@@ -89,25 +80,21 @@ export default function ListProjectPage() {
                             <div className="border-b-2 border-gray-200" ref={viewportRef}>
                                 <div className="select-none w-full flex gap-16">
                                     {links.map((link, idx) =>
-                                        <NavLink
-                                            replace
-                                            to={link.path}
+                                        <button
                                             key={idx}
                                             className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
                                                 active:scale-95 transition-transform`}
-                                            style={({ isActive }) => {
-                                                console.log(isActive);
-                                                return {
-                                                    ...(isActive && {
-                                                        borderBottom: '2px solid var(--primary)',
-                                                        marginBottom: -2
-                                                    }),
-                                                }
+                                            style={{
+                                                ...(link.path === curTab && {
+                                                    borderBottom: '2px solid var(--primary)',
+                                                    marginBottom: -2
+                                                }),
+                                            }
+                                            }
 
-                                            }}
                                         >
                                             {link.text}
-                                        </NavLink>
+                                        </button>
                                     )}
                                 </div>
                             </div>
@@ -118,15 +105,12 @@ export default function ListProjectPage() {
                     <FormContainer>
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
                             <div className="md:col-span-2">
-                                <Routes>
-                                    <Route index element={<Navigate to={tabs['project-details'].path} />} />
-                                    <Route path={tabs['project-details'].path} element={<ProjectDetailsTab />} />
-                                    <Route path={tabs['team'].path} element={<TeamTab />} />
-                                    <Route path={tabs['extras'].path} element={<ExtrasTab />} />
-                                </Routes>
+                                {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
+                                {curTab === tabs["team"].path && <TeamTab />}
+                                {curTab === tabs["extras"].path && <ExtrasTab />}
                             </div>
                             <div className="self-start sticky-side-element">
-                                {currentTab && <SaveChangesCard currentTab={currentTab} />}
+                                <SaveChangesCard currentTab={curTab} />
                             </div>
                         </div>
                     </FormContainer>
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index 845aaeb..f8adab6 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -80,7 +80,7 @@ export const PAGES_ROUTES = {
         default: "/projects",
         hottest: "/projects/hottest",
         byCategoryId: "/projects/category/:id",
-        listProject: "/projects/list-project/*"
+        listProject: "/projects/list-project"
     },
     blog: {
         feed: "/blog",