diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..9a31620
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
+NEXT_PUBLIC_CLARITY_ID=XXXXXXXXXX
diff --git a/.gitignore b/.gitignore
index 8f322f0..45c1abc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/package-lock.json b/package-lock.json
index 2806232..bbcffb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "leticia-pro",
       "version": "0.1.0",
       "dependencies": {
+        "@microsoft/clarity": "^1.0.2",
+        "@next/third-parties": "^16.2.1",
         "@types/node": "20.2.1",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
@@ -221,6 +223,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@microsoft/clarity": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/clarity/-/clarity-1.0.2.tgz",
+      "integrity": "sha512-9EZYROFpJxEGmQpHvUFqvD3ZJ7QQSqnibYSWmS+1xusoZfG1QQ1/Al9yVBBc11DWMbJrs1pe1hLT273it/skJg==",
+      "license": "MIT"
+    },
     "node_modules/@next/env": {
       "version": "13.4.2",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.2.tgz",
@@ -380,6 +388,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-16.2.1.tgz",
+      "integrity": "sha512-XyeT9WVBUdVXMrKFz0wTSrMc+O5JN2B08yU7JpK8YJiP/qBgc3q1kIfjop/pdnhT4W4oLjwXaqrMh7uWaoYILQ==",
+      "license": "MIT",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0-beta.0",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4536,6 +4557,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==",
+      "license": "ISC"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 87975bb..e342bc2 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@microsoft/clarity": "^1.0.2",
+    "@next/third-parties": "^16.2.1",
     "@types/node": "20.2.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
diff --git a/src/app/components/ClarityInit.tsx b/src/app/components/ClarityInit.tsx
new file mode 100644
index 0000000..5cb4eeb
--- /dev/null
+++ b/src/app/components/ClarityInit.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import Clarity from '@microsoft/clarity'
+import { useEffect } from 'react'
+
+export default function ClarityInit() {
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_CLARITY_ID) {
+      console.warn('Warning: NEXT_PUBLIC_CLARITY_ID is not set. Microsoft Clarity will not be initialized.')
+      return
+    }
+    Clarity.init(process.env.NEXT_PUBLIC_CLARITY_ID)
+  }, [])
+
+  return null
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e561461..91c803f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import './globals.css'
 import { Poppins } from 'next/font/google'
+import { GoogleAnalytics } from '@next/third-parties/google'
+import ClarityInit from './components/ClarityInit'
 
 const poppins = Poppins({
   weight: ['200', '300', '400', '500', '600', '700'],
@@ -18,9 +20,17 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
+  if (!process.env.NEXT_PUBLIC_GA_ID) {
+    console.warn('Warning: NEXT_PUBLIC_GA_ID is not set. Google Analytics will not be initialized.')
+  }
+
   return (
     <html lang='en' className='scroll-smooth'>
       <body className={poppins.className}>{children}</body>
+      {process.env.NEXT_PUBLIC_GA_ID && (
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+      )}
+      <ClarityInit />
     </html>
   )
 }