diff --git a/package-lock.json b/package-lock.json
index 3e6d6a1..ef115d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "react-dom": "^18.2.0",
         "react-github-calendar": "^4.0.8",
         "react-icons": "^4.12.0",
+        "react-microsoft-clarity": "^1.2.0",
         "react-parallax-tilt": "^1.7.179",
         "react-router-dom": "^6.21.1",
         "react-scripts": "^5.0.1",
@@ -18561,6 +18562,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-microsoft-clarity": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-microsoft-clarity/-/react-microsoft-clarity-1.2.0.tgz",
+      "integrity": "sha512-a1bsJR1uN1daWq3cBc7NheEGPXrotMRE0oFeRio7kXvHawzQfqu5iX9BoYFF9zRUL0dn+Mz57h1fNlcv3pqXEg=="
+    },
     "node_modules/react-parallax-tilt": {
       "version": "1.7.179",
       "resolved": "https://registry.npmjs.org/react-parallax-tilt/-/react-parallax-tilt-1.7.179.tgz",
diff --git a/package.json b/package.json
index 3096f4b..14b899b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-github-calendar": "^4.0.8",
     "react-icons": "^4.12.0",
+    "react-microsoft-clarity": "^1.2.0",
     "react-parallax-tilt": "^1.7.179",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
diff --git a/src/App.tsx b/src/App.tsx
index 0078b7c..0808a10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,14 +6,15 @@
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the required modules
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { clarity } from "react-microsoft-clarity";
 
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the app components
 
-import ScrollToTop from "./components/ScrollToTop"
+import ScrollToTop from "./components/ScrollToTop";
 import Preloader from "./components/Preloader";
 import Navbar from "./components/Navbar";
 import Home from "./components/Home/index";
@@ -22,13 +23,20 @@ import Footer from "./components/Footer";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Import the app styles
 
-import './styles/index.css';
+import "./styles/index.css";
 //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 // ----- Define the App component
 
 function App() {
   const [load, upadateLoad] = useState(true);
 
+  // -- Initialise Microsoft Clarity
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") {
+      clarity.init("mqgrxsm7hq");
+    }
+  }, []);
+
   // -- Set a timer to remove the preloader after 1.2 seconds
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -54,4 +62,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;