diff --git a/pages/_app.tsx b/pages/_app.tsx
index c7e2542..d846cb2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import type { AppProps } from 'next/app';
-import Script from 'next/script';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
@@ -36,57 +35,6 @@ const App = ({ Component, pageProps }: AppProps) => {
 
 	return (
 		<>
-			<Script
-				id='styles-init'
-				strategy='afterInteractive'
-				dangerouslySetInnerHTML={{
-					__html: `
-						function getInitialThemeMode() {
-							const persistedColorPreference = window.localStorage.getItem('mode');
-							const hasPersistedPreference = typeof persistedColorPreference === 'string';
-
-							if (hasPersistedPreference) {
-								return persistedColorPreference;
-							}
-
-							const mql = window.matchMedia('(prefers-color-scheme: dark)');
-							const hasMediaQueryPreference = typeof mql.matches === 'boolean';
-
-							if (hasMediaQueryPreference) {
-								return mql.matches ? 'dark' : 'light';
-							}
-
-							return 'light';
-						}
-
-						(() => {
-							const mode = getInitialThemeMode();
-							const root = document.documentElement;
-							const lightFavicon = document.querySelector('link#light-favicon');
-							const darkFavicon = document.querySelector('link#dark-favicon');
-
-							root.style.setProperty('--mode', mode);
-							root.style.setProperty(
-								'--background',
-								mode === 'light' ? '#F9F9F9' : '#262626'
-							);
-							root.style.setProperty(
-								'--secondary-background',
-								mode === 'light' ? 'white' : '#2F2F2F'
-							);
-							root.style.setProperty(
-								'--text',
-								mode === 'light' ? 'black' : 'white'
-							);
-							root.style.setProperty(
-								'--text-inverted',
-								mode === 'light' ? 'white' : 'black'
-							);
-							document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
-						})();
-					`
-				}}
-			/>
 			<Head>
 				<link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link>
 				<link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 6942d6b..d5e9573 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -3,7 +3,8 @@ import Script from 'next/script';
 
 import { ServerStyleSheet } from 'styled-components';
 
-import { GOOGLE_ANALYTICS_KEY } from '../utils/gtag';
+import { GOOGLE_ANALYTICS_KEY, initAnalytics } from '../utils/gtag';
+import { initStyles } from '../utils/styles';
 
 class Doc extends Document {
 	static async getInitialProps(ctx: DocumentContext) {
@@ -43,18 +44,13 @@ class Doc extends Document {
 						id='google-analytics'
 						strategy='afterInteractive'
 						dangerouslySetInnerHTML={{
-							__html: `
-						window.dataLayer = window.dataLayer || [];
-						
-						function gtag() {
-							dataLayer.push(arguments);
-						}
-						
-						gtag('js', new Date());
-						gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
-              page_path: window.location.pathname,
-            });
-					`
+							__html: initAnalytics()
+						}}
+					/>
+					<script
+						id='styles-init'
+						dangerouslySetInnerHTML={{
+							__html: initStyles()
 						}}
 					/>
 				</Head>
diff --git a/utils/gtag.ts b/utils/gtag.ts
index 7a215c9..7114031 100644
--- a/utils/gtag.ts
+++ b/utils/gtag.ts
@@ -17,3 +17,16 @@ export const event = ({ action, category, label, value }: any) => {
 		value: value
 	});
 };
+
+export const initAnalytics = () => `
+	window.dataLayer = window.dataLayer || [];
+						
+	function gtag() {
+		dataLayer.push(arguments);
+	}
+	
+	gtag('js', new Date());
+	gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
+		page_path: window.location.pathname,
+	});
+`;
diff --git a/utils/styles.ts b/utils/styles.ts
new file mode 100644
index 0000000..6f06928
--- /dev/null
+++ b/utils/styles.ts
@@ -0,0 +1,45 @@
+export const initStyles = () => `
+  function getInitialThemeMode() {
+    const persistedColorPreference = window.localStorage.getItem('mode');
+    const hasPersistedPreference = typeof persistedColorPreference === 'string';
+
+    if (hasPersistedPreference) {
+      return persistedColorPreference;
+    }
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const hasMediaQueryPreference = typeof mql.matches === 'boolean';
+
+    if (hasMediaQueryPreference) {
+      return mql.matches ? 'dark' : 'light';
+    }
+
+    return 'light';
+  }
+
+  (() => {
+    const mode = getInitialThemeMode();
+    const root = document.documentElement;
+    const lightFavicon = document.querySelector('link#light-favicon');
+    const darkFavicon = document.querySelector('link#dark-favicon');
+
+    root.style.setProperty('--mode', mode);
+    root.style.setProperty(
+      '--background',
+      mode === 'light' ? '#F9F9F9' : '#262626'
+    );
+    root.style.setProperty(
+      '--secondary-background',
+      mode === 'light' ? 'white' : '#2F2F2F'
+    );
+    root.style.setProperty(
+      '--text',
+      mode === 'light' ? 'black' : 'white'
+    );
+    root.style.setProperty(
+      '--text-inverted',
+      mode === 'light' ? 'white' : 'black'
+    );
+    document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
+  })();
+`;
