diff --git a/src/components/landing/nav-content/my-work.tsx b/src/components/landing/nav-content/my-work.tsx
index 57148bb..ad97171 100644
--- a/src/components/landing/nav-content/my-work.tsx
+++ b/src/components/landing/nav-content/my-work.tsx
@@ -10,6 +10,7 @@ import Project from "@/types/project";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import Image from "next/image";
 import { truncateText } from "@/lib/utils";
+import SimpleTooltip from "@/components/ui/simple-tooltip";
 
 const projects: Project[] = [
     {
@@ -76,55 +77,64 @@ const MyWork = (): ReactElement => {
     return (
         <ScrollArea className="h-[17.75rem]">
             <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
-                {projects.map((project, index) => (
-                    <Link
+                {projects.map((project: Project, index: number) => (
+                    <SimpleTooltip
                         key={index}
-                        href={project.link || "#"}
-                        target="_blank"
-                    >
-                        <MagicCard
-                            className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
-                            gradientColor={
-                                theme === "dark" ? "#262626" : "#D9D9D9"
-                            }
-                        >
-                            {/* Icon, Name & Years Active */}
-                            <div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
-                                <div className="flex gap-3">
-                                    <Image
-                                        className="rounded-full"
-                                        src={project.icon}
-                                        alt={`The ${project.name} Project Icon`}
-                                        width={24}
-                                        height={24}
-                                    />
-                                    <h1 className="font-semibold select-none pointer-events-none">
-                                        {project.name}
-                                    </h1>
-                                </div>
-                                <div className="flex gap-1 text-sm">
-                                    <span className="text-green-400/80">
-                                        {project.startDate.format("MMM YYYY")}
-                                    </span>
-                                    🞄
-                                    {project.endDate ? (
-                                        <span className="text-red-400/80">
-                                            {project.endDate.format("MMM YYYY")}
-                                        </span>
-                                    ) : (
-                                        <span className="text-green-400/80">
-                                            Present
-                                        </span>
-                                    )}
-                                </div>
-                            </div>
-
-                            {/* Description */}
-                            <p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
-                                {truncateText(project.description, 136)}
+                        content={
+                            <p className="max-w-[23rem] text-center">
+                                {project.description}
                             </p>
-                        </MagicCard>
-                    </Link>
+                        }
+                    >
+                        <Link href={project.link || "#"} target="_blank">
+                            <MagicCard
+                                className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
+                                gradientColor={
+                                    theme === "dark" ? "#262626" : "#D9D9D9"
+                                }
+                            >
+                                {/* Icon, Name & Years Active */}
+                                <div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
+                                    <div className="flex gap-3">
+                                        <Image
+                                            className="rounded-full"
+                                            src={project.icon}
+                                            alt={`The ${project.name} Project Icon`}
+                                            width={24}
+                                            height={24}
+                                        />
+                                        <h1 className="font-semibold select-none pointer-events-none">
+                                            {project.name}
+                                        </h1>
+                                    </div>
+                                    <div className="flex gap-1 text-sm">
+                                        <span className="text-green-400/80">
+                                            {project.startDate.format(
+                                                "MMM YYYY"
+                                            )}
+                                        </span>
+                                        🞄
+                                        {project.endDate ? (
+                                            <span className="text-red-400/80">
+                                                {project.endDate.format(
+                                                    "MMM YYYY"
+                                                )}
+                                            </span>
+                                        ) : (
+                                            <span className="text-green-400/80">
+                                                Present
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Description */}
+                                <p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
+                                    {truncateText(project.description, 136)}
+                                </p>
+                            </MagicCard>
+                        </Link>
+                    </SimpleTooltip>
                 ))}
             </div>
         </ScrollArea>