diff --git a/app/layout.tsx b/app/layout.tsx
index 68b6d6c0..78287aed 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import RollbarScript from '../components/head/RollbarScript';
 
 // Nextjs automatically includes for each route two default meta tags, charset and viewport
 // https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
@@ -22,6 +23,7 @@ export default function RootLayout({
         but sending an event using sendGTMEvent requires an object rather than a list of arguments so the current gtag api function would need to be adapted
         */}
         <GoogleTagManagerScript />
+        <RollbarScript />
         {children}
       </body>
     </html>
diff --git a/components/head/RollbarScript.tsx b/components/head/RollbarScript.tsx
index 57b74f2e..fcf18e23 100644
--- a/components/head/RollbarScript.tsx
+++ b/components/head/RollbarScript.tsx
@@ -1,6 +1,11 @@
+import Script from 'next/script';
+
 const RollbarScript = () => {
   return (
-    <script
+    // eslint-disable-next-line @next/next/no-before-interactive-script-outside-document
+    <Script
+      id="rollbar"
+      strategy="beforeInteractive"
       dangerouslySetInnerHTML={{
         __html: `
 var _rollbarConfig = {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bc38749a..b1b01fa1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -14,6 +14,7 @@ import { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import CrispScript from '../components/crisp/CrispScript';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import RollbarScript from '../components/head/RollbarScript';
 import Consent from '../components/layout/Consent';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 import Footer from '../components/layout/Footer';
@@ -83,6 +84,7 @@ function MyApp(props: MyAppProps) {
           <meta name="viewport" content="initial-scale=1, width=device-width" />
         </Head>
         <GoogleTagManagerScript />
+        <RollbarScript />
         <CrispScript />
         <ThemeProvider theme={theme}>
           <CssBaseline />
diff --git a/pages/_document.tsx b/pages/_document.tsx
index d2c58b42..e4b8c399 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -4,7 +4,6 @@ import { AppType } from 'next/app';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import * as React from 'react';
 import OpenGraphMetadata from '../components/head/OpenGraphMetadata';
-import RollbarScript from '../components/head/RollbarScript';
 import createEmotionCache from '../config/emotionCache';
 import { MyAppProps } from './_app';
 
@@ -26,7 +25,6 @@ export default class MyDocument extends Document<NewRelicProps> {
             rel="stylesheet"
           />
           <OpenGraphMetadata />
-          <RollbarScript />
         </Head>
         <body>
           <Main />
