diff --git a/packages/docs/src/components/Features/index.tsx b/packages/docs/src/components/Features/index.tsx
index f987b9c..b8532e4 100644
--- a/packages/docs/src/components/Features/index.tsx
+++ b/packages/docs/src/components/Features/index.tsx
@@ -11,7 +11,7 @@ import {
   useMantineTheme,
   darken,
 } from "@mantine/core";
-import { TiltCard } from "../HoverCard";
+import { TiltCard } from "../TiltCard";
 
 import { motion } from "framer-motion";
 
diff --git a/packages/docs/src/components/HoverCard/index.tsx b/packages/docs/src/components/TiltCard/index.tsx
similarity index 96%
rename from packages/docs/src/components/HoverCard/index.tsx
rename to packages/docs/src/components/TiltCard/index.tsx
index 57a3790..e01b8ab 100644
--- a/packages/docs/src/components/HoverCard/index.tsx
+++ b/packages/docs/src/components/TiltCard/index.tsx
@@ -127,6 +127,8 @@ export function TiltCard({
           right: 0,
           bottom: 0,
           padding: "20px",
+          opacity: active ? 1 : 0,
+          transition: "opacity 0.5s",
         }}
       >
         <Title order={4} ta="center" mt="sm">
@@ -153,6 +155,8 @@ export function TiltCard({
           right: 0,
           bottom: 0,
           padding: "20px",
+          opacity: active ? 1 : 0,
+          transition: "opacity 0.5s",
         }}
       >
         {" "}