diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx
index be3d93e..7b75139 100644
--- a/components/GlobalStyles.tsx
+++ b/components/GlobalStyles.tsx
@@ -35,6 +35,8 @@ const GlobalStyles = createGlobalStyle`
 	html {
 		position: relative;
 		min-height: 100%;
+		background: var(--background) !important;
+    color: var(--text) !important;
 	}
 	
 	ul, ol {
@@ -43,8 +45,6 @@ const GlobalStyles = createGlobalStyle`
 
 	body {
 		margin: 0 0 100px;
-		background: var(--background);
-    color: var(--text); 
 		transition: color 250ms ease-in-out, background 250ms ease-in-out;
 		scroll-behavior: smooth;
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ae4bf75..285b38d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,7 @@
 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';
 
@@ -35,7 +36,80 @@ const App = ({ Component, pageProps }: AppProps) => {
 
 	return (
 		<>
+			<Script
+				strategy='afterInteractive'
+				src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_KEY}`}
+			/>
+			<Script
+				id='analytics-init'
+				strategy='afterInteractive'
+				dangerouslySetInnerHTML={{
+					__html: `
+						window.dataLayer = window.dataLayer || [];
+						
+						function gtag() {
+							dataLayer.push(arguments);
+						}
+						
+						gtag('js', new Date());
+						gtag('config', ${process.env.GOOGLE_ANALYTICS_KEY});
+					`
+				}}
+			/>
+			<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>
 				<link rel='preconnect' href='https://fonts.gstatic.com' />
 				<link
 					href='https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 4fe00b8..676adcf 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,15 +1,15 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { DocumentContext } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
 class Doc extends Document {
-	static async getInitialProps(ctx: any) {
+	static async getInitialProps(ctx: DocumentContext) {
 		const sheet = new ServerStyleSheet();
 		const originalRenderPage = ctx.renderPage;
 
 		try {
 			ctx.renderPage = () =>
 				originalRenderPage({
-					enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />)
+					enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
 				});
 
 			const initialProps = await Document.getInitialProps(ctx);
@@ -26,85 +26,6 @@ class Doc extends Document {
 			sheet.seal();
 		}
 	}
-
-	render() {
-		return (
-			<Html>
-				<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>
-					<script async src='https://www.googletagmanager.com/gtag/js?id=G-FMD81GLKS3'></script>
-					<script
-						dangerouslySetInnerHTML={{
-							__html: `
-								window.dataLayer = window.dataLayer || [];
-								
-								function gtag() {
-									dataLayer.push(arguments);
-								}
-								
-								gtag('js', new Date());
-								gtag('config', ${process.env.GOOGLE_ANALYTICS_KEY});
-							`
-						}}
-					/>
-					<script
-						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>
-				<body>
-					<Main />
-					<NextScript />
-				</body>
-			</Html>
-		);
-	}
 }
 
 export default Doc;
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index c5443b1..1093093 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { FC, useEffect } from 'react';
 import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio';
 import { useRouter } from 'next/router';
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
@@ -21,7 +21,6 @@ interface Props {
 
 const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	const router = useRouter();
-	const metaRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -58,7 +57,7 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				<title>{frontMatter.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
-				<div className='meta' ref={metaRef}>
+				<div className='meta'>
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
diff --git a/styles/blog/slug.tsx b/styles/blog/slug.tsx
index 6c7ee35..7b083b0 100644
--- a/styles/blog/slug.tsx
+++ b/styles/blog/slug.tsx
@@ -11,13 +11,25 @@ export const Wrapper = styled.div`
 		row-gap: 1rem;
 	}
 
+	h1,
+	h2,
+	p,
+	span,
+	ul,
+	ol {
+		color: var(--text);
+	}
+
 	.meta {
 		.back {
 			cursor: pointer;
 			text-align: left;
-			color: #3f9aee;
 			display: inline-flex;
 			align-items: center;
+
+			span {
+				color: ${({ theme }) => theme.colors.blue} !important;
+			}
 		}
 
 		.image {
diff --git a/styles/portfolio/slug.tsx b/styles/portfolio/slug.tsx
index 212f614..ace0e18 100644
--- a/styles/portfolio/slug.tsx
+++ b/styles/portfolio/slug.tsx
@@ -11,13 +11,25 @@ export const Wrapper = styled.div`
 		row-gap: 1rem;
 	}
 
+	h1,
+	h2,
+	p,
+	span,
+	ul,
+	ol {
+		color: var(--text);
+	}
+
 	.meta {
 		.back {
 			cursor: pointer;
 			text-align: left;
-			color: #3f9aee;
 			display: inline-flex;
 			align-items: center;
+
+			span {
+				color: ${({ theme }) => theme.colors.blue} !important;
+			}
 		}
 
 		.image {
diff --git a/tsconfig.json b/tsconfig.json
index 790501e..b0b1075 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,32 +1,22 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "incremental": true
-  },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"incremental": true,
+		"jsx": "preserve"
+	},
+	"exclude": ["node_modules"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }
