diff --git a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryTitle.tsx b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryTitle.tsx
index 59dba3c38..8d191421c 100644
--- a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryTitle.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryTitle.tsx
@@ -103,12 +103,14 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
             href={populatedFullHref ?? "#"}
             target="_blank"
             rel="noopener noreferrer"
-            className={"select-text break-words text-2xl font-medium leading-normal"}
+            className={
+              "select-text break-words text-2xl font-medium leading-normal hover:before:-inset-x-3"
+            }
           >
             <EntryTranslation
               source={entry.entries.title}
               target={translation.data?.title}
-              className="select-text hyphens-auto"
+              className="inline-block select-text hyphens-auto duration-200 hover:scale-[1.02]"
             />
           </MagneticHoverEffect>
         </div>
diff --git a/packages/components/src/ui/effect/MagneticHoverEffect.tsx b/packages/components/src/ui/effect/MagneticHoverEffect.tsx
index 2eda09aa3..4552a59f9 100644
--- a/packages/components/src/ui/effect/MagneticHoverEffect.tsx
+++ b/packages/components/src/ui/effect/MagneticHoverEffect.tsx
@@ -16,9 +16,16 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
 
   const itemRef = useRef<HTMLElement>(null)
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
     if (!itemRef.current) return
+    const rect = itemRef.current.getBoundingClientRect()
+
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+
     itemRef.current.style.transition = "transform 0.2s cubic-bezier(0.33, 1, 0.68, 1)"
+    itemRef.current.style.setProperty("--origin-x", `${x}%`)
+    itemRef.current.style.setProperty("--origin-y", `${y}%`)
   }
 
   const handleMouseLeave = () => {
@@ -50,7 +57,7 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
       className={cn(
         "relative !cursor-none",
         "inline-block transition-all duration-200 ease-out",
-        "before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:origin-center before:scale-[0.92] before:rounded-xl before:bg-black/[0.03] before:opacity-0 before:backdrop-blur before:transition-all before:duration-200 hover:before:scale-100 hover:before:opacity-100 dark:before:bg-white/[0.10]",
+        "before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:bg-black/[0.03] before:opacity-0 before:backdrop-blur before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100 dark:before:bg-white/[0.10]",
         rest.className,
       )}
     >