diff --git a/src/pages/calendar/CalendarMain.tsx b/src/pages/calendar/CalendarMain.tsx
index 0da30c99..fc56103f 100644
--- a/src/pages/calendar/CalendarMain.tsx
+++ b/src/pages/calendar/CalendarMain.tsx
@@ -1,12 +1,29 @@
+import type TabInfoMessages from '@shared/messages/TabInfoMessages';
 import Calendar from '@views/components/calendar/Calendar';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
-import React from 'react';
+import { MessageListener } from 'chrome-extension-toolkit';
+import React, { useEffect } from 'react';
 
 /**
  * Calendar page
  * @returns entire page
  */
 export default function CalendarMain() {
+    useEffect(() => {
+        const tabInfoListener = new MessageListener<TabInfoMessages>({
+            getTabInfo: ({ sendResponse }) => {
+                sendResponse({
+                    url: window.location.href,
+                    title: document.title,
+                });
+            },
+        });
+
+        tabInfoListener.listen();
+
+        return () => tabInfoListener.unlisten();
+    }, []);
+
     return (
         <ExtensionRoot className='h-full w-full'>
             <Calendar />
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
index 674df187..9e478a9c 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -1,10 +1,8 @@
 // import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
-import type TabInfoMessages from '@shared/messages/TabInfoMessages';
-import { MessageListener } from 'chrome-extension-toolkit';
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import styles from './ExtensionRoot.module.scss';
 
@@ -17,22 +15,6 @@ interface Props {
  * A wrapper component for the extension elements that adds some basic styling to them
  */
 export default function ExtensionRoot(props: React.PropsWithChildren<Props>): JSX.Element {
-    // TODO: move out of ExtensionRoot
-    useEffect(() => {
-        const tabInfoListener = new MessageListener<TabInfoMessages>({
-            getTabInfo: ({ sendResponse }) => {
-                sendResponse({
-                    url: window.location.href,
-                    title: document.title,
-                });
-            },
-        });
-
-        tabInfoListener.listen();
-
-        return () => tabInfoListener.unlisten();
-    }, []);
-
     return (
         <React.StrictMode>
             <div className={clsx(styles.extensionRoot, props.className)} data-testid={props.testId}>