diff --git a/app.js b/app.js
index 9c5a0e3..7f62d37 100644
--- a/app.js
+++ b/app.js
@@ -45,13 +45,16 @@ app.get("/", (req, res) => {
     <!DOCTYPE html>
       <html lang="en">
       <head>
-        <script type="text/javascript">
-            (function(c,l,a,r,i,t,y){
-                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-            })(window, document, "clarity", "script", "nrvoacr6ky");
-        </script>
+        <script>
+  window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+  window.op('init', {
+    clientId: '17393df4-4fff-44dc-aac7-bef3acb32aa2',
+    trackScreenViews: true,
+    trackOutgoingLinks: true,
+    trackAttributes: true,
+  });
+</script>
+<script src="https://openpanel.dev/op1.js" defer async></script>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Home | Animator-Studio</title>       
diff --git a/pages/editor/component.html b/pages/editor/component.html
index dc92c19..b766e22 100644
--- a/pages/editor/component.html
+++ b/pages/editor/component.html
@@ -2,13 +2,16 @@
 <html lang="en">
 
 <head>
-    <script type="text/javascript">
-        (function(c,l,a,r,i,t,y){
-            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-        })(window, document, "clarity", "script", "nrvoacr6ky");
-    </script>
+    <script>
+        window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+        window.op('init', {
+          clientId: '17393df4-4fff-44dc-aac7-bef3acb32aa2',
+          trackScreenViews: true,
+          trackOutgoingLinks: true,
+          trackAttributes: true,
+        });
+      </script>
+      <script src="https://openpanel.dev/op1.js" defer async></script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Home</title>
diff --git a/pages/login/component.html b/pages/login/component.html
index 5678903..789b04c 100644
--- a/pages/login/component.html
+++ b/pages/login/component.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <script type="text/javascript">
-    (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "nrvoacr6ky");
-</script>
+  <script>
+    window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+    window.op('init', {
+      clientId: '17393df4-4fff-44dc-aac7-bef3acb32aa2',
+      trackScreenViews: true,
+      trackOutgoingLinks: true,
+      trackAttributes: true,
+    });
+  </script>
+  <script src="https://openpanel.dev/op1.js" defer async></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Login</title>
diff --git a/pages/onboard/component.html b/pages/onboard/component.html
index 0b412a2..760be18 100644
--- a/pages/onboard/component.html
+++ b/pages/onboard/component.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script type="text/javascript">
-        (function(c,l,a,r,i,t,y){
-            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-        })(window, document, "clarity", "script", "nrvoacr6ky");
-    </script>
+    <script>
+        window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+        window.op('init', {
+          clientId: '17393df4-4fff-44dc-aac7-bef3acb32aa2',
+          trackScreenViews: true,
+          trackOutgoingLinks: true,
+          trackAttributes: true,
+        });
+      </script>
+      <script src="https://openpanel.dev/op1.js" defer async></script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Create awesome animations in a snap</title>
diff --git a/pages/signup/component.html b/pages/signup/component.html
index d1783f5..da1a449 100644
--- a/pages/signup/component.html
+++ b/pages/signup/component.html
@@ -2,13 +2,16 @@
 <html lang="en">
 
 <head>
-  <script type="text/javascript">
-    (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "nrvoacr6ky");
-</script>
+  <script>
+    window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+    window.op('init', {
+      clientId: '17393df4-4fff-44dc-aac7-bef3acb32aa2',
+      trackScreenViews: true,
+      trackOutgoingLinks: true,
+      trackAttributes: true,
+    });
+  </script>
+  <script src="https://openpanel.dev/op1.js" defer async></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Signup</title>
