diff --git a/src/components/ui/animated-tooltip.tsx b/src/components/ui/animated-tooltip.tsx
index 896b54e5c..05057583e 100644
--- a/src/components/ui/animated-tooltip.tsx
+++ b/src/components/ui/animated-tooltip.tsx
@@ -8,6 +8,7 @@ import {
   useMotionValue,
   useSpring,
 } from 'framer-motion';
+import { usePathname } from 'next/navigation';
 
 export const AnimatedTooltip = ({
   items,
@@ -22,6 +23,8 @@ export const AnimatedTooltip = ({
   expanded: any;
 }) => {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const pathname = usePathname();
+  const isCoursesRoute = pathname.includes('courses');
   const springConfig = { stiffness: 100, damping: 5 };
   const x = useMotionValue(0); // going to set this value on mouse move
   // rotate the tooltip
@@ -36,54 +39,65 @@ export const AnimatedTooltip = ({
   );
   return (
     <>
-      {items.map((item) => (
-        <div
-          className="group relative"
-          key={item.name}
-          onMouseEnter={() => setHoveredIndex(item.id)}
-          onMouseLeave={() => setHoveredIndex(null)}
-        >
-          {!expanded && (
-            <AnimatePresence>
-              {hoveredIndex === item.id && (
-                <motion.div
-                  initial={{ opacity: 0, y: 20, scale: 0.6 }}
-                  animate={{
-                    opacity: 1,
-                    y: 0,
-                    scale: 1,
-                    transition: {
-                      type: 'spring',
-                      stiffness: 260,
-                      damping: 10,
-                    },
-                  }}
-                  exit={{ opacity: 0, y: 20, scale: 0.6 }}
-                  style={{
-                    translateX,
-                    rotate,
-                    whiteSpace: 'nowrap',
-                  }}
-                  className="absolute -top-16 z-50 flex translate-x-1/2 flex-col items-center justify-center rounded-md bg-[#0c0a09] px-4 py-2 text-xs shadow-xl"
-                >
-                  <div className="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent" />
-                  <div className="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
-                  <div className="relative z-30 text-base font-bold text-white">
-                    {item.name}
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-          <Link
-            href={item.href}
-            className={`flex flex-row ${hoveredIndex === item.id && 'rounded-md bg-gray-700/50'} items-center space-x-6 p-2`}
+      {items.map((item) => {
+        const isActive = isCoursesRoute
+          ? item.name === 'My Courses'
+          : pathname.startsWith(item.href);
+
+        return (
+          <div
+            className="group relative"
+            key={item.name}
+            onMouseEnter={() => setHoveredIndex(item.id)}
+            onMouseLeave={() => setHoveredIndex(null)}
           >
-            <item.Component selected={hoveredIndex === item.id} size={25} />
-            {expanded && <h4 className="font-semibold">{item.name}</h4>}
-          </Link>
-        </div>
-      ))}
+            {!expanded && (
+              <AnimatePresence>
+                {hoveredIndex === item.id && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 20, scale: 0.6 }}
+                    animate={{
+                      opacity: 1,
+                      y: 0,
+                      scale: 1,
+                      transition: {
+                        type: 'spring',
+                        stiffness: 260,
+                        damping: 10,
+                      },
+                    }}
+                    exit={{ opacity: 0, y: 20, scale: 0.6 }}
+                    style={{
+                      translateX,
+                      rotate,
+                      whiteSpace: 'nowrap',
+                    }}
+                    className="absolute -top-16 z-50 flex translate-x-1/2 flex-col items-center justify-center rounded-md bg-[#0c0a09] px-4 py-2 text-xs shadow-xl"
+                  >
+                    <div className="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent" />
+                    <div className="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+                    <div className="relative z-30 text-base font-bold text-white">
+                      {item.name}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            )}
+            <Link
+              href={item.href}
+              className={`flex flex-row items-center space-x-6 rounded-md p-2 ${
+                isActive ? 'bg-gray-700/50' : ''
+              } ${hoveredIndex === item.id ? 'bg-gray-700/30' : ''}`}
+            >
+              <item.Component
+                selected={isActive || hoveredIndex === item.id}
+                size={25}
+              />
+              {expanded && <h4 className="font-semibold">{item.name}</h4>}
+            </Link>
+          </div>
+        );
+      })}
     </>
   );
 };
diff --git a/tsconfig.json b/tsconfig.json
index cec286f06..1f308869a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,14 +16,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"],
-    },
+      "@public/*": ["./public/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }