diff --git a/package-lock.json b/package-lock.json
index 3adf528e7..caa6985ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@once-ui-system/magic-portfolio",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@once-ui-system/magic-portfolio",
-      "version": "1.3.0",
+      "version": "2.0.0",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
         "@mdx-js/loader": "^3.1.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6abaa10c7..ff8667c2f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import "@/once-ui/tokens/index.scss";
 
 import classNames from "classnames";
 
-import { Footer, Header, RouteGuard } from "@/components";
+import { Footer, Header, RouteGuard, CustomCursor } from "@/components";
 import { baseURL, effects, style, font, home } from "@/app/resources";
 
 import { Background, Column, Flex, ThemeProvider, ToastProvider } from "@/once-ui/components";
@@ -71,6 +71,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
       <ThemeProvider>
         <ToastProvider>
           <Column style={{ minHeight: "100vh" }} as="body" fillWidth margin="0" padding="0">
+            <CustomCursor />
             <Background
               position="fixed"
               mask={{
diff --git a/src/components/CustomCursor.module.scss b/src/components/CustomCursor.module.scss
new file mode 100644
index 000000000..c8e0d7ed0
--- /dev/null
+++ b/src/components/CustomCursor.module.scss
@@ -0,0 +1,24 @@
+.cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgb(172, 172, 172); /* iPadOS-like semi-transparent */
+  border: 2px solid rgba(255,255,255,0.5);
+  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.10);
+  pointer-events: none;
+  z-index: 2147483647;
+  mix-blend-mode: normal;
+  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, box-shadow 0.2s;
+  will-change: transform, background;
+  display: block;
+  transform: translate3d(-50%, -50%, 0); /* Center the cursor on pointer */
+}
+
+@media (max-width: 768px) {
+  .cursor {
+    display: none;
+  }
+}
diff --git a/src/components/CustomCursor.tsx b/src/components/CustomCursor.tsx
new file mode 100644
index 000000000..32656cfce
--- /dev/null
+++ b/src/components/CustomCursor.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import styles from "./CustomCursor.module.scss";
+
+const CustomCursor: React.FC = () => {
+  const cursorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Hide the default cursor
+    document.body.style.cursor = "none";
+    const moveCursor = (e: MouseEvent) => {
+      if (cursorRef.current) {
+        // Center the custom cursor on the pointer
+        cursorRef.current.style.transform = `translate3d(${e.clientX - 10}px, ${e.clientY - 10}px, 0)`;
+      }
+    };
+    document.addEventListener("mousemove", moveCursor);
+    return () => {
+      document.body.style.cursor = "";
+      document.removeEventListener("mousemove", moveCursor);
+    };
+  }, []);
+
+  return <div ref={cursorRef} className={styles.cursor} />;
+};
+
+export default CustomCursor;
diff --git a/src/components/index.ts b/src/components/index.ts
index abafa481d..4d53a541e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,3 +4,4 @@ export { Mailchimp } from "@/components/Mailchimp";
 export { ProjectCard } from "@/components/ProjectCard";
 export { HeadingLink } from "@/components/HeadingLink";
 export { RouteGuard } from "@/components/RouteGuard";
+export { default as CustomCursor } from "@/components/CustomCursor";