diff --git a/app/components/home.tsx b/app/components/home.tsx
index c4dffb8e0..5da490378 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 require("../polyfill");
-import Hotjar from '@hotjar/browser';
 
 import { useState, useEffect } from "react";
 import styles from "./home.module.scss";
@@ -30,14 +29,7 @@ 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 44c2048ca..d825b42e9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,16 @@
 import { Analytics } from "@vercel/analytics/react";
 import { Home } from "./components/home";
 import { getServerSideConfig } from "./config/server";
+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 (
         <>