diff --git a/app/components/home.tsx b/app/components/home.tsx
index 5da490378..c4dffb8e0 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 require("../polyfill");
+import Hotjar from '@hotjar/browser';
 
 import { useState, useEffect } from "react";
 import styles from "./home.module.scss";
@@ -29,7 +30,14 @@ import { getClientConfig } from "../config/client";
 import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
 import clsx from "clsx";
+const siteId = 5237727;
+const hotjarVersion = 6;
+Hotjar.init(siteId, hotjarVersion);
 
+// Initializing with `debug` option:
+Hotjar.init(siteId, hotjarVersion, {
+  debug: true
+});
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={clsx("no-dark", styles["loading-content"])}>
diff --git a/app/page.tsx b/app/page.tsx
index f20c9a298..44c2048ca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,9 @@
 import { Analytics } from "@vercel/analytics/react";
 import { Home } from "./components/home";
 import { getServerSideConfig } from "./config/server";
-import Hotjar from '@hotjar/browser';
-const siteId = 5237727;
-const hotjarVersion = 6;
 
 const serverConfig = getServerSideConfig();
-Hotjar.init(siteId, hotjarVersion);
 
-// Initializing with `debug` option:
-Hotjar.init(siteId, hotjarVersion, {
-    debug: true
-});
 export default async function App() {
     return (
         <>