diff --git a/package.json b/package.json
index f571eed..436bf01 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d16bc07..d177ce9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
         version: 1.3.0(react@18.3.1)
@@ -757,6 +760,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-hover-card@1.1.1':
+    resolution: {integrity: sha512-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-icons@1.3.0':
     resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
     peerDependencies:
@@ -3552,6 +3568,23 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-hover-card@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-icons@1.3.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
diff --git a/src/App.tsx b/src/App.tsx
index 910a6e4..4464a77 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Slash } from "lucide-react";
+import { Slash, CalendarDays } from "lucide-react";
 import { useState } from "react";
 import { useTheme } from "@Components/hooks";
 import {
@@ -15,6 +15,7 @@ import {
   Typography,
   ContextMenu,
   Tooltip,
+  HoverCard,
 } from "@Components/ui";
 
 const App = () => (
@@ -23,7 +24,7 @@ const App = () => (
     ScreenType="container"
     fullHeight
     border
-    className="p-20 flex items-center flex-col"
+    className="p-20 mb-40 flex items-center flex-col"
   >
     <Flex flexDirection="column" className="gap-10" alignItems="center">
       <ThemeBtn />
@@ -182,6 +183,10 @@ const App = () => (
         </Tooltip>
       </Tooltip.Provider>
     </Flex>
+
+    <Flex asElement="section" className="w-full">
+      <HoverCardDemo />
+    </Flex>
   </Container>
 );
 
@@ -222,6 +227,34 @@ const AreYouSure = () => {
   );
 };
 
+export const HoverCardDemo = () => (
+  <HoverCard>
+    <HoverCard.Trigger asChild>
+      <Button variant="link">@nextjs</Button>
+    </HoverCard.Trigger>
+    <HoverCard.Content className="w-80">
+      <div className="flex justify-between space-x-4">
+        <Avatar>
+          <Avatar.Image src="https://github.com/vercel.png" />
+          <Avatar.Fallback>VC</Avatar.Fallback>
+        </Avatar>
+        <div className="space-y-1">
+          <h4 className="text-sm font-semibold">@nextjs</h4>
+          <p className="text-sm">
+            The React Framework – created and maintained by @vercel.
+          </p>
+          <div className="flex items-center pt-2">
+            <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+            <span className="text-xs text-muted-foreground">
+              Joined December 2021
+            </span>
+          </div>
+        </div>
+      </div>
+    </HoverCard.Content>
+  </HoverCard>
+);
+
 const ThemeBtn = () => {
   const { setTheme } = useTheme();
 
diff --git a/src/components/ui/HoverCard/HoverCard.tsx b/src/components/ui/HoverCard/HoverCard.tsx
new file mode 100644
index 0000000..353b109
--- /dev/null
+++ b/src/components/ui/HoverCard/HoverCard.tsx
@@ -0,0 +1,36 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { cn } from "@Utils/className";
+
+interface HoverCardProps extends HoverCardPrimitive.HoverCardProps {
+  Trigger?: typeof HoverCardPrimitive.Trigger;
+  Content?: typeof HoverCardPrimitive.Content;
+}
+
+const HoverCard = ({ children }: HoverCardProps) => (
+  <HoverCardPrimitive.Root>{children}</HoverCardPrimitive.Root>
+);
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = forwardRef<
+  ElementRef<typeof HoverCardPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-white p-4 text-text shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+HoverCard.Trigger = HoverCardTrigger;
+HoverCard.Content = HoverCardContent;
+
+export { HoverCard };
diff --git a/src/components/ui/HoverCard/index.ts b/src/components/ui/HoverCard/index.ts
new file mode 100644
index 0000000..f7accbd
--- /dev/null
+++ b/src/components/ui/HoverCard/index.ts
@@ -0,0 +1 @@
+export * from "./HoverCard";
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 8717183..00e33eb 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -13,3 +13,4 @@ export { Breadcrumb } from "./Breadcrumb";
 export { Checkbox } from "./CheckBox";
 export { ContextMenu } from "./ContextMenu";
 export { Tooltip } from "./ToolTip";
+export { HoverCard } from "./HoverCard";