diff --git a/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx b/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
index e8195251..6264312e 100644
--- a/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
+++ b/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
@@ -1,4 +1,3 @@
-import {Button} from "@/components/ui/button"
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
 import {currentUser} from "@/auth/current-user";
 import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
diff --git a/src/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu.tsx b/src/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu.tsx
new file mode 100644
index 00000000..0913dddf
--- /dev/null
+++ b/src/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu.tsx
@@ -0,0 +1,62 @@
+"use client"
+import {SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem} from "@/components/ui/sidebar";
+import Link from "next/link";
+import {cn} from "@/lib/utils";
+import {buttonVariants} from "@/components/ui/button";
+import {PropsWithChildren, useState} from "react";
+import {ChartArea, Home, Settings, ShieldHalf} from "lucide-react";
+
+export type SidebarMenuCustomProps = {}
+
+export const SidebarMenuCustom = (props: SidebarMenuCustomProps) => {
+
+    const BASE_URL = "/dashboard";
+    // Menu items.
+    const items = [
+        {
+            title: "Home",
+            url: "/",
+            icon: Home,
+        },
+        {
+            title: "Agents",
+            url: "agents",
+            icon: ShieldHalf,
+        },
+        {
+            title: "Statistic",
+            url: "kpi",
+            icon: ChartArea,
+        },
+        {
+            title: "Settings",
+            url: "settings",
+            icon: Settings,
+        },
+    ]
+
+    const [activeItem, setActiveItem] = useState(items[0].title);
+    const handleItemClick = (title: string) => {
+        setActiveItem(title);
+        console.log(title)
+    }
+    return(
+        <SidebarMenu>
+            {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild >
+                        <Link
+                            className={cn(buttonVariants({size: "lg", variant: activeItem === item.title ? "secondary" : 'ghost'}), "justify-start p-0")}
+                            href={`${BASE_URL}/${item.url}`}
+                            onClick={() => handleItemClick(item.title)}
+                        >
+                            <item.icon/>
+                            <span>{item.title}</span>
+                        </Link>
+                    </SidebarMenuButton>
+                    <SidebarMenuAction className={`peer-data-[active=true]/menu-button:opacity-100 ${activeItem === item.title ? 'active' : ''}`}/>
+                </SidebarMenuItem>
+            ))}
+        </SidebarMenu>
+    )
+}
\ No newline at end of file
diff --git a/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx b/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
index 2246d5d5..2bd88e3a 100644
--- a/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
+++ b/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
@@ -3,61 +3,19 @@ import {
     SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
     SidebarGroupLabel,
     SidebarHeader,
-    SidebarMenu, SidebarMenuAction,
+    SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
 } from "@/components/ui/sidebar"
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
 import {
-    Calendar,
-    ChartArea,
-    ChevronDown,
-    ChevronUp,
-    Home,
-    Inbox,
-    Search,
-    Settings,
-    ShieldHalf,
-    User2
+    ChevronDown
 } from "lucide-react";
-import Link from "next/link";
-import {signOutAction} from "@/features/auth/auth.action";
-import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
-import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
 import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
-import {Button, buttonVariants} from "@/components/ui/button"
-import {cn} from "@/lib/utils";
-
+import {SidebarMenuCustom} from "@/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu";
 
 export function AppSidebar() {
 
-
-    const BASE_URL = "/dashboard";
-
-    // Menu items.
-    const items = [
-        {
-            title: "Home",
-            url: "/",
-            icon: Home,
-        },
-        {
-            title: "Agents",
-            url: "agents",
-            icon: ShieldHalf,
-        },
-        {
-            title: "Statistic",
-            url: "kpi",
-            icon: ChartArea,
-        },
-        {
-            title: "Settings",
-            url: "settings",
-            icon: Settings,
-        },
-    ]
-
     return (
         <Sidebar collapsible="icon">
             <SidebarHeader>
@@ -86,63 +44,17 @@ export function AppSidebar() {
                 <SidebarGroup>
                     <SidebarGroupLabel>Application</SidebarGroupLabel>
                     <SidebarGroupContent>
-                        <SidebarMenu>
-                            {items.map((item) => (
-                                <SidebarMenuItem key={item.title}>
-                                    <SidebarMenuButton asChild >
-                                        <Link
-                                            className={cn(buttonVariants({size: "lg", variant: "ghost"}), "justify-start p-0")}
-                                            href={`${BASE_URL}/${item.url}`}>
-                                                <item.icon/>
-                                                <span>{item.title}</span>
-                                        </Link>
-                                    </SidebarMenuButton>
-                                    <SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />
-
-                                </SidebarMenuItem>
-
-                            ))}
-
-                        </SidebarMenu>
+                        <SidebarMenuCustom/>
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
                 <SidebarMenu>
                     <SidebarMenuItem>
-                        {/*<DropdownMenu>*/}
-                        {/*    <DropdownMenuTrigger asChild>*/}
-                        {/*        <SidebarMenuButton>*/}
-                        {/*            <UserAvatar/>*/}
-                        {/*            <User2 /> Username*/}
-                        {/*            <ChevronUp className="ml-auto" />*/}
-                        {/*        </SidebarMenuButton>*/}
-                        {/*    </DropdownMenuTrigger>*/}
-                        {/*    <DropdownMenuContent*/}
-                        {/*        side="top"*/}
-                        {/*        className="w-[--radix-popper-anchor-width]"*/}
-                        {/*    >*/}
-                        {/*        <DropdownMenuItem>*/}
-                        {/*            <span>Account</span>*/}
-                        {/*        </DropdownMenuItem>*/}
-                        {/*        <DropdownMenuItem>*/}
-                        {/*            <span>Billing</span>*/}
-                        {/*        </DropdownMenuItem>*/}
-                        {/*        /!*<DropdownMenuItem onClick={() => {*!/*/}
-                        {/*        /!*    signOutAction()*!/*/}
-                        {/*        /!*}}>*!/*/}
-                        {/*        /!*    <span>Sign out</span>*!/*/}
-                        {/*        /!*</DropdownMenuItem>*!/*/}
-                        {/*    </DropdownMenuContent>*/}
-                        {/*</DropdownMenu>*/}
-
-
                         <LoggedInButton/>
                     </SidebarMenuItem>
                 </SidebarMenu>
             </SidebarFooter>
-
         </Sidebar>
-
     )
 }
\ No newline at end of file