diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..27d956b 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -15,6 +15,7 @@ import { useRouter } from 'next/router'
 import {findMe, logoutUser} from "../stores/authSlice";
 
 import {hasPermission} from "../helpers/userPermissions";
+import InteractiveBackground from "../components/InteractiveBackground";
 
 
 type Props = {
@@ -90,10 +91,12 @@ export default function LayoutAuthenticated({
 
   return (
     <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
+<InteractiveBackground />
       <div
         className={`${layoutAsidePadding} ${
           isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
-        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+        } pt-14 min-h-screen w-screen transition-position lg:w-auto dark:bg-dark-800 dark:text-slate-100`}
+ style={{ position: 'relative', zIndex: 1 }}
       >
         <NavBar
           menu={menuNavBar}
diff --git a/frontend/src/layouts/Guest.tsx b/frontend/src/layouts/Guest.tsx
index 657813c..62b39d5 100644
--- a/frontend/src/layouts/Guest.tsx
+++ b/frontend/src/layouts/Guest.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react'
 import { useAppSelector } from '../stores/hooks'
+import InteractiveBackground from '../components/InteractiveBackground'
 
 type Props = {
   children: ReactNode
@@ -11,7 +12,8 @@ export default function LayoutGuest({ children }: Props) {
 
   return (
     <div className={darkMode ? 'dark' : ''}>
-      <div className={`${bgColor} dark:bg-slate-800 dark:text-slate-100`}>{children}</div>
+      <InteractiveBackground />
+      <div style={{ position: 'relative', zIndex: 1 }} className={`dark:bg-slate-800 dark:text-slate-100`}>{children}</div>
     </div>
   )
 }
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 0c132ad..d7f2d16 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -16,14 +16,11 @@ const Feature = ({ icon, title, text }) => (
   </div>
 );
 
-import InteractiveBackground from '../components/InteractiveBackground';
-
 export default function LandingPage() {
   const title = 'EventCoord Hub'
 
   return (
     <div className="text-gray-800">
-      <InteractiveBackground />
       <Head>
         <title>{getPageTitle('Welcome')}</title>
       </Head>
