diff --git a/src/components/SectionContainer.astro b/src/components/SectionContainer.astro
new file mode 100644
index 0000000..a56e6a0
--- /dev/null
+++ b/src/components/SectionContainer.astro
@@ -0,0 +1,24 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+	</head>
+	<body>
+        <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0">
+            <div class="flex flex-col justify-between h-screen">
+                <Header title={SITE_TITLE} />
+
+                <slot />
+                
+                <Footer />
+            </div>
+        </section>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index fac2ed1..b82128d 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,34 +1,26 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
+import SectionContainer from '../components/SectionContainer.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
 const { title, description, pubDate } = Astro.props;
 ---
+<head>
+	<BaseHead title={title} description={description} />
+</head>
 
-<html lang="en">
-	<head>
-		<BaseHead title={title} description={description} />
-	</head>
-
-	<body>
-		<div class="flex flex-col">
-			<Header />
-			<main class="flex flex-col items-center mx-auto mt-8">
-				<article class="flex flex-col mx-auto mb-32">
-					<h1 class="text-4xl font-extrabold">{title}</h1>
-					<p class="italic">{description}</p>
-					<FormattedDate date={pubDate}/>
-					<div class="flex flex-col items-left w-full max-w-prose blog">
-						<slot />
-					</div>
-				</article>
-			</main>
-			<Footer />
-		</div>
-	</body>
-</html>
+<SectionContainer>
+	<main class="mb-auto break-words mt-4">
+		<article>
+			<h1 class="text-4xl font-extrabold">{title}</h1>
+			<p class="italic">{description}</p>
+			<FormattedDate date={pubDate}/>
+			<div class="blog">
+				<slot />
+			</div>
+		</article>
+	</main>
+</SectionContainer>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 5caccb8..58f9cc5 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,26 +1,14 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import SectionContainer from '../components/SectionContainer.astro';
 ---
 
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<div class="flex flex-col fixed w-screen">
-			<Header title={SITE_TITLE} />
-			<main class="flex flex-col justify-center items-left mx-auto">
-				<h1 class="text-4xl font-extrabold">About me</h1>
-                <p>Some information about me & stuff I like</p>
-				<div class="mt-4">
-					<a href="/tools">link to tools</a>
-				</div>
-			</main>
-			<Footer />
-		</div>
-	</body>
-</html>
\ No newline at end of file
+<SectionContainer>
+	<main class="mb-auto break-words mt-4">
+		<h1 class="text-4xl font-extrabold">About me</h1>
+		<p>Some information about me & stuff I like</p>
+		<a href="/tools">link to tools</a>
+		<p>
+			sidojdjosajoidsajaiodoaisoiasdosiadjoiaskflsdmklmdfsmlkfdskmdjdoasijsadkldsanlndsalnasdnlksadnklsdnlkdoasjdoasidjaoisjdoiasjdoasijdoiasjdoaijdio flex justify-center mx-auto md:gap-64 gap-4 py-5
+		</p>
+	</main>
+</SectionContainer>
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2c4c9f6..0b786fd 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,57 +1,44 @@
 ---
-import BaseHead from '../../components/BaseHead.astro';
-import Header from '../../components/Header.astro';
-import Footer from '../../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
 import FormattedDate from '../../components/FormattedDate.astro';
+import SectionContainer from '../../components/SectionContainer.astro';
 
 const posts = (await getCollection('blog')).sort(
 	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
 );
 ---
+<SectionContainer>
+	<main class="flex flex-col h-screen gap-4 mt-4">
+		<h1 class="text-4xl font-extrabold">Blog posts</h1>
+		<section class="mt-4">
+			<ul>
+				{
+					posts.map((post) => (
+						<li>
+							<FormattedDate date={post.data.pubDate} />
+							<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+						</li>
+					))
+				}
+			</ul>
+		</section>
+	</main>
+</SectionContainer>
 
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-		<style>
-			ul {
-				list-style-type: none;
-				padding: unset;
-			}
-			ul li {
-				display: flex;
-			}
-			ul li :global(time) {
-				flex: 0 0 130px;
-				font-style: italic;
-				color: #595959;
-			}
-			ul li a {
-				color: #815B5B;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="flex flex-col fixed w-screen">
-			<Header />
-			<main class="flex flex-col justify-center items-left mx-auto">
-				<h1 class="text-4xl font-extrabold">Blog posts</h1>
-				<section class="mt-4">
-					<ul>
-						{
-							posts.map((post) => (
-								<li>
-									<FormattedDate date={post.data.pubDate} />
-									<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-								</li>
-							))
-						}
-					</ul>
-				</section>
-			</main>
-			<Footer />
-		</div>
-	</body>
-</html>
+<style>
+	ul {
+		list-style-type: none;
+		padding: unset;
+	}
+	ul li {
+		display: flex;
+	}
+	ul li :global(time) {
+		flex: 0 0 130px;
+		font-style: italic;
+		color: #595959;
+	}
+	ul li a {
+		color: #815B5B;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e04dc4e..c5d0cd9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,51 +3,40 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import SectionContainer from '../components/SectionContainer.astro';
 ---
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<div class="flex flex-col fixed w-screen">
-			<Header title={SITE_TITLE} />
-			<main class="flex flex-col justify-center items-center text-center pt-48 description gap-4">
-				<div class="profile"></div>
-				<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
-				<p class="md:max-w">
-					Student at Western University of Applied Sciences.
-				</p>
-				<div class="flex gap-1 social">
-					<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
-						<iconify-icon icon="lucide:linkedin" width="30" height="30" />
-					</a>
-					<a href="https://github.com/SindreKjelsrud">
-						<iconify-icon icon="ri:github-line" width="30" height="30" />
-					</a>
-					<a href="https://www.instagram.com/SindreKjelsrud/">
-						<iconify-icon icon="mdi:instagram" width="30" height="30" />
-					</a>
-					<a href="https://open.spotify.com/user/kjelsrud!">
-						<iconify-icon icon="mdi:spotify" width="30" height="30" />
-					</a>
-				</div>
-			</main>
-			<Footer />
+<SectionContainer>
+	<main class="flex flex-col justify-center items-center h-screen gap-4 description">
+		<div class="profile"></div>
+		<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
+		<p>Student at Western University of Applied Sciences.</p>
+		<div class="flex gap-1 social">
+			<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
+				<iconify-icon icon="lucide:linkedin" width="30" height="30" />
+			</a>
+			<a href="https://github.com/SindreKjelsrud">
+				<iconify-icon icon="ri:github-line" width="30" height="30" />
+			</a>
+			<a href="https://www.instagram.com/SindreKjelsrud/">
+				<iconify-icon icon="mdi:instagram" width="30" height="30" />
+			</a>
+			<a href="https://open.spotify.com/user/kjelsrud!">
+				<iconify-icon icon="mdi:spotify" width="30" height="30" />
+			</a>
 		</div>
-	</body>
-</html>
+	</main>
+</SectionContainer>
 
 <style>
 	.profile {
             width: 10rem;
 			height: 10rem;
-            background: url("../../public/assets/pb.jpg");
+            background: url("../../assets/pb.jpg");
 			background-size: cover;
 			border-radius: 9999px;
         }
diff --git a/src/pages/tools.astro b/src/pages/tools.astro
index 1cdf25b..7378142 100644
--- a/src/pages/tools.astro
+++ b/src/pages/tools.astro
@@ -1,51 +1,38 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-import stackData from '../../public/data/tools.json'
+import stackData from '../../data/tools.json'
+import SectionContainer from '../components/SectionContainer.astro';
 ---
 
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body>
-		<div class="flex flex-col fixed w-screen p-5">
-			<Header title={SITE_TITLE} />
-			<main class="flex flex-col justify-center items-left mx-auto pt-8">
-				<h1 class="text-2xl">Tools</h1>
-                <p>Tools I use everyday (or at least most days)</p>
-                <ul class="pt-2">
-                    {stackData.map((data) => 
-                        <div class="p-2 mb-4 cards">
-                            <ul>
-                                <a 
-                                    href={data.link}
-                                    class="flex gap-2"
-                                >
-                                    <img src={data.icon} class="w-20 h-20" />
-                                    <div class="flex flex-col">
-                                        <p>
-                                            {data.name}
-                                        </p>
-                                        <div class="description">
-                                            <p>{data.description}</p>
-                                        </div>
-                                        <div class="tag">
-                                            <button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
-                                                #{data.tag}
-                                            </button>
-                                        </div>
+<SectionContainer>
+    <main class="flex flex-col justify-center items-left mx-auto pt-8">
+        <h1 class="text-2xl">Tools</h1>
+        <p>Tools I use everyday (or at least most days)</p>
+        <ul class="pt-2">
+            {stackData.map((data) => 
+                <div class="p-2 mb-4 cards">
+                    <ul>
+                        <a 
+                        href={data.link}
+                        class="flex gap-2"
+                        >
+                        <img src={data.icon} class="w-20 h-20" />
+                        <div class="flex flex-col">
+                            <p>
+                                {data.name}
+                                </p>
+                                <div class="description">
+                                    <p>{data.description}</p>
                                     </div>
-                                </a>
-                            </ul>
-                        </div>
-                    )}
-                </ul>
-			</main>
-			<Footer />
-		</div>
-	</body>
-</html>
\ No newline at end of file
+                                    <div class="tag">
+                                        <button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
+                                            #{data.tag}
+                                            </button>
+                                            </div>
+                                            </div>
+                                            </a>
+                                            </ul>
+                                            </div>
+                                            )}
+        </ul>
+    </main>
+</SectionContainer>
\ No newline at end of file