diff --git a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
index 9554995..bbb4a7b 100644
--- a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
+++ b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
@@ -5,7 +5,8 @@ import { useState } from "react";
 import { PAGE_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
 import PageLinks from "../../../components/PageLinks/PageLinks";
 import "./sideBar.scss";
-import clsx from "clsx";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 const SideBar = () => {
   const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
@@ -33,7 +34,11 @@ const SideBar = () => {
               {link.icon && <link.icon />}
               <span className="sidebar__text">{link.title}</span>
               <span className="sidebar__arrow">
-                {openMenus[link.title] ? "▲" : "▼"}
+                {!openMenus[link.title] ? (
+                  <KeyboardArrowRightIcon />
+                ) : (
+                  <KeyboardArrowDownIcon />
+                )}
               </span>
             </button>
             {openMenus[link.title] && (
diff --git a/payment-iq/app/features/dashboard/sidebar/sideBar.scss b/payment-iq/app/features/dashboard/sidebar/sideBar.scss
index 123db72..45b1832 100644
--- a/payment-iq/app/features/dashboard/sidebar/sideBar.scss
+++ b/payment-iq/app/features/dashboard/sidebar/sideBar.scss
@@ -67,7 +67,7 @@
       transition: color 0.2s ease;
 
       &:hover {
-        color: var(--primary-color); // Define your highlight color in variables
+        color: var(--primary-color);
       }
     }
   }