diff --git a/frontend/src/pages/Layout/Sidebar.tsx b/frontend/src/pages/Layout/Sidebar.tsx
index 14b4fe1..a739f55 100644
--- a/frontend/src/pages/Layout/Sidebar.tsx
+++ b/frontend/src/pages/Layout/Sidebar.tsx
@@ -1,11 +1,11 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { Button, Drawer, Menu, Popover } from "antd";
 import {
   CloseOutlined,
   MenuOutlined,
   SettingOutlined,
 } from "@ant-design/icons";
-import { ClipboardList, Sparkles, X } from "lucide-react";
+import { ClipboardList, X } from "lucide-react";
 import { menuItems } from "@/pages/Layout/menu";
 import { NavLink, useLocation, useNavigate } from "react-router";
 import TaskUpload from "./TaskUpload";
@@ -13,6 +13,9 @@ import SettingsPage from "../SettingsPage/SettingsPage";
 import { useAppSelector, useAppDispatch } from "@/store/hooks";
 import { showSettings, hideSettings } from "@/store/slices/settingsSlice";
 
+const isPathMatch = (currentPath: string, targetPath: string) =>
+  currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
+
 const AsiderAndHeaderLayout = () => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -23,27 +26,27 @@ const AsiderAndHeaderLayout = () => {
   const dispatch = useAppDispatch();
 
   // Initialize active item based on current pathname
-  const initActiveItem = () => {
+  const initActiveItem = useCallback(() => {
+    const dataPath = pathname.startsWith("/data/") ? pathname.slice(6) : pathname;
     for (let index = 0; index < menuItems.length; index++) {
       const element = menuItems[index];
       if (element.children) {
-        element.children.forEach((subItem) => {
-          if (pathname.includes(subItem.id)) {
+        for (const subItem of element.children) {
+          if (isPathMatch(dataPath, subItem.id)) {
             setActiveItem(subItem.id);
             return;
           }
-        });
-      } else if (pathname.includes(element.id)) {
+        }
+      } else if (isPathMatch(dataPath, element.id)) {
         setActiveItem(element.id);
         return;
       }
     }
-    console.log(pathname);
-  };
+  }, [pathname]);
 
   useEffect(() => {
     initActiveItem();
-  }, [pathname]);
+  }, [initActiveItem]);
 
   useEffect(() => {
     const handleShowTaskPopover = (event: CustomEvent) => {