diff --git a/src/lib/Layout.scss b/src/lib/Layout.scss
new file mode 100644
index 0000000..007494c
--- /dev/null
+++ b/src/lib/Layout.scss
@@ -0,0 +1,4 @@
+.content-div {
+  padding-left: 15px;
+  padding-right: 15px;
+}
diff --git a/src/lib/Layout.svelte b/src/lib/Layout.svelte
index d5fe874..ec4166e 100644
--- a/src/lib/Layout.svelte
+++ b/src/lib/Layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts" module>
+	import "./Layout.scss";
 </script>
 
 <script lang="ts">
 	import { postFromProps, PostHeader } from "./PostHelpers.svelte";
 
 	let props = $props();
-	console.log(props);
 	let post = postFromProps(props);
 </script>
 
@@ -13,10 +13,3 @@
 <div class="content-div">
 	{@render props.children?.()}
 </div>
-
-<style>
-	.content-div {
-		padding-left: 15px;
-		padding-right: 15px;
-	}
-</style>
diff --git a/src/lib/PostHelpers.svelte b/src/lib/PostHelpers.svelte
index ccd99dc..39d5588 100644
--- a/src/lib/PostHelpers.svelte
+++ b/src/lib/PostHelpers.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { tagImg } from "./tag_store/TagImgHelper.svelte";
+	import "./postHelpers.scss";
 
 	let posts = import.meta.glob("/src/routes/posts/**/*.md", {
 		eager: true,
@@ -22,7 +23,6 @@
 		return `${day}/${month}/${year}`;
 	}
 	export function getPosts(): Post[] {
-		console.log(posts);
 		let postsNew: Post[] = new Array();
 		Object.entries(posts).map(([path, module]) => {
 			const metadata = module.metadata;
@@ -42,7 +42,6 @@
 			};
 			postsNew.push(post);
 		});
-		console.log(postsNew);
 		return postsNew;
 	}
 	/// Doesn't provide path
@@ -103,191 +102,3 @@
 		</div>
 	</div>
 {/snippet}
-
-<style lang="scss">
-	.container {
-		width: 100%;
-		text-decoration: none;
-	}
-	.container:hover {
-		text-decoration: underline;
-	}
-	.card-header-top-div {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding-top: 10px;
-	}
-	.card-header-container {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		flex-grow: 1;
-		width: 100%;
-		min-width: 250px;
-		max-width: 750px;
-		background-color: var(--accent-3);
-		border: 3px, inset, var(--accent-2);
-	}
-	.card-header-container-left {
-		display: flex;
-		flex-direction: column;
-		row-gap: 3px;
-		span {
-			padding-left: 4px;
-			border-left-style: inset;
-			border-left-width: 3px;
-			border-left-color: whitesmoke;
-		}
-	}
-	.card-header-container-right {
-		display: flex;
-		flex-direction: column;
-		row-gap: 3px;
-		span {
-			padding-right: 4px;
-			border-right-style: inset;
-			border-right-width: 3px;
-			border-right-color: whitesmoke;
-		}
-	}
-	.card {
-		--text-color: white;
-		position: relative;
-		background: #4f0515;
-		display: flex;
-		align-items: start;
-		align-content: stretch;
-		justify-content: start;
-		padding-inline-start: 10px;
-		padding-inline-end: 10px;
-		padding-block-start: 10px;
-		padding-block-end: 10px;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		flex-grow: 1;
-		flex-shrink: 0;
-
-		border-style: outset;
-		border-color: var(--accent-2);
-		border-width: 4px;
-
-		span {
-			text-decoration: none !important;
-		}
-	}
-	.icons {
-		position: relative;
-		display: grid;
-		align-items: end;
-		justify-items: end;
-		column-gap: 5px;
-		flex-grow: 1;
-		grid-template-rows: 1fr;
-		grid-template-columns: 1fr 1fr 1fr;
-	}
-	.icon_container {
-		position: relative;
-		width: 100%;
-		background: #555555ff;
-		display: grid;
-		align-items: center;
-		align-content: stretch;
-		justify-content: center;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		flex-grow: 1;
-		align-self: center;
-		justify-self: center;
-		grid-row: 1;
-		width: 35px;
-		height: 35px;
-		.img {
-			width: 35px;
-			height: 35px;
-			flex-shrink: 0;
-		}
-		border-width: 2px;
-		border-style: inset;
-		border-color: var(--accent-3);
-	}
-
-	.left {
-		position: relative;
-		width: 100%;
-		display: flex;
-		align-items: start;
-		align-content: stretch;
-		justify-content: center;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		flex: 1;
-		flex-grow: 1;
-	}
-	.right {
-		position: relative;
-		width: 100%;
-		display: flex;
-		align-items: end;
-		align-content: stretch;
-		justify-content: start;
-		row-gap: 2.5px;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		flex: 1;
-		flex-grow: 1;
-		span {
-			color: var(--text-color);
-			margin: 0px;
-			text-box-trim: trim-both;
-			font-family: "sourcesanspro";
-			font-style: normal;
-			font-weight: 400;
-		}
-	}
-	.seperater {
-		width: 115px;
-		height: 2.5px;
-		margin-top: 2px;
-		margin-bottom: 2px;
-		background: #000000ff;
-		flex-shrink: 0;
-	}
-	.post-title {
-		color: var(--text-color);
-		text-transform: none;
-		height: 34px;
-		margin: 0px;
-
-		line-break: auto;
-		overflow-wrap: initial;
-		white-space: pre;
-		font-size: 28px;
-		text-rendering: geometricPrecision;
-		caret-color: rgba(0, 0, 0, 1);
-		text-decoration: none;
-		letter-spacing: 0px;
-		font-family: "sourcesanspro";
-		font-style: normal;
-		font-weight: 400;
-	}
-	.post-descr {
-		color: var(--text-color);
-		text-transform: none;
-		height: 22px;
-		margin: 0px;
-
-		line-break: auto;
-		overflow-wrap: initial;
-		white-space: pre;
-		font-size: 18px;
-		text-rendering: geometricPrecision;
-		caret-color: rgba(0, 0, 0, 1);
-		text-decoration: none;
-		letter-spacing: 0px;
-		font-family: "sourcesanspro";
-		font-style: normal;
-		font-weight: 400;
-		text-decoration: none;
-	}
-</style>
diff --git a/src/lib/postHelpers.scss b/src/lib/postHelpers.scss
new file mode 100644
index 0000000..5a84d22
--- /dev/null
+++ b/src/lib/postHelpers.scss
@@ -0,0 +1,202 @@
+.container {
+  width: 100%;
+  text-decoration: none;
+}
+
+// .container:hover {
+//   text-decoration: underline;
+// }
+
+.card-header-top-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 10px;
+}
+
+.card-header-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-grow: 1;
+  width: 100%;
+  min-width: 250px;
+  max-width: 750px;
+  background-color: var(--accent-3);
+  border: 3px, inset, var(--accent-2);
+}
+
+.card-header-container-left {
+  display: flex;
+  flex-direction: column;
+  row-gap: 3px;
+
+  span {
+    padding-left: 4px;
+    border-left-style: inset;
+    border-left-width: 3px;
+    border-left-color: whitesmoke;
+  }
+}
+
+.card-header-container-right {
+  display: flex;
+  flex-direction: column;
+  row-gap: 3px;
+
+  span {
+    padding-right: 4px;
+    border-right-style: inset;
+    border-right-width: 3px;
+    border-right-color: whitesmoke;
+  }
+}
+
+.card {
+  --text-color: white;
+  position: relative;
+  background: #4f0515;
+  display: flex;
+  align-items: start;
+  align-content: stretch;
+  justify-content: start;
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  border-style: outset;
+  border-color: var(--accent-2);
+  border-width: 4px;
+
+  span {
+    text-decoration: none !important;
+  }
+}
+
+.icons {
+  position: relative;
+  display: grid;
+  align-items: end;
+  justify-items: end;
+  column-gap: 5px;
+  flex-grow: 1;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.icon_container {
+  position: relative;
+  width: 100%;
+  background: #555555ff;
+  display: grid;
+  align-items: center;
+  align-content: stretch;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+  align-self: center;
+  justify-self: center;
+  grid-row: 1;
+  width: 35px;
+  height: 35px;
+
+  .img {
+    width: 35px;
+    height: 35px;
+    flex-shrink: 0;
+  }
+
+  border-width: 2px;
+  border-style: inset;
+  border-color: var(--accent-3);
+}
+
+.left {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: start;
+  align-content: stretch;
+  justify-content: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex: 1;
+  flex-grow: 1;
+}
+
+.right {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: end;
+  align-content: stretch;
+  justify-content: start;
+  row-gap: 2.5px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex: 1;
+  flex-grow: 1;
+
+  span {
+    color: var(--text-color);
+    margin: 0px;
+    text-box-trim: trim-both;
+    font-family: "sourcesanspro";
+    font-style: normal;
+    font-weight: 400;
+  }
+}
+
+.seperater {
+  width: 115px;
+  height: 2.5px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  background: #000000ff;
+  flex-shrink: 0;
+}
+
+.post-title {
+  color: var(--text-color);
+  text-transform: none;
+  height: 34px;
+  margin: 0px;
+
+  line-break: auto;
+  overflow-wrap: initial;
+  white-space: pre;
+  font-size: 28px;
+  text-rendering: geometricPrecision;
+  caret-color: rgba(0, 0, 0, 1);
+  text-decoration: none;
+  letter-spacing: 0px;
+  font-family: "sourcesanspro";
+  font-style: normal;
+  font-weight: 400;
+}
+
+.post-descr {
+  color: var(--text-color);
+  text-transform: none;
+  height: 22px;
+  margin: 0px;
+
+  line-break: auto;
+  overflow-wrap: initial;
+  white-space: pre;
+  font-size: 18px;
+  text-rendering: geometricPrecision;
+  caret-color: rgba(0, 0, 0, 1);
+  text-decoration: none;
+  letter-spacing: 0px;
+  font-family: "sourcesanspro";
+  font-style: normal;
+  font-weight: 400;
+  text-decoration: none;
+}
diff --git a/src/lib/sidebar/sidebar.scss b/src/lib/sidebar/sidebar.scss
new file mode 100644
index 0000000..cce4bbf
--- /dev/null
+++ b/src/lib/sidebar/sidebar.scss
@@ -0,0 +1,71 @@
+.right-sidebar {
+  margin: 5px;
+  margin-right: 0px;
+  height: 800px;
+  width: 125px;
+  background-color: var(--secondary);
+  border: 2px, inset, var(--thirdly);
+  box-sizing: border-box;
+}
+
+.left-sidebar {
+  margin: 5px;
+  margin-left: 0px;
+  height: 800px;
+  width: 125px;
+  background-color: var(--secondary);
+  border: 2px, inset, var(--thirdly);
+  box-sizing: border-box;
+}
+
+.side-card {
+  background-color: var(--thirdly);
+  border: 2px, inset, var(--thirdly);
+}
+
+.side-card+.side-card {
+  margin-top: 5px;
+}
+
+.side-card-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: small;
+}
+
+.side-card-bottom {
+  align-self: flex-end;
+}
+
+.social-button-div {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  justify-content: space-evenly;
+}
+
+.social-button {
+  display: block;
+  width: 30px;
+  height: 30px;
+  border: 2px outset #1da1f2;
+  background: #1da1f2;
+  margin: 2px;
+
+  img {
+    width: 30px;
+    height: auto;
+  }
+}
+
+.social-button:hover {
+  filter: brightness(110%);
+}
+
+.social-button:active {
+  border-style: inset;
+
+  img {}
+}
diff --git a/src/lib/sidebar/sidebar_left.svelte b/src/lib/sidebar/sidebar_left.svelte
index 405ffa8..4c5b917 100644
--- a/src/lib/sidebar/sidebar_left.svelte
+++ b/src/lib/sidebar/sidebar_left.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	export { SidebarLeft };
+	import "./sidebar.scss";
 </script>
 
 {#snippet SidebarLeft()}
@@ -11,23 +12,3 @@
 		</div>
 	</div>
 {/snippet}
-
-<style>
-	.side-card {
-		background-color: var(--thirdly);
-		border: 2px, inset, var(--thirdly);
-	}
-	.side-card + .side-card {
-		margin-top: 5px;
-	}
-	.side-card-inner {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		font-size: small;
-	}
-	.side-card-bottom {
-		align-self: flex-end;
-	}
-</style>
diff --git a/src/lib/sidebar/sidebar_right.svelte b/src/lib/sidebar/sidebar_right.svelte
index 090a5bd..7527ff1 100644
--- a/src/lib/sidebar/sidebar_right.svelte
+++ b/src/lib/sidebar/sidebar_right.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	export { SidebarRight };
+	import "./sidebar.scss";
 </script>
 
 {#snippet SidebarRight()}
@@ -11,8 +12,10 @@
 					<a
 						href="https://doloro.co.uk/"
 						style="width: 95%; height: auto; align-items: center"
+						title="doloro icon"
 						><img
 							class="web-button"
+							alt="doloro web button"
 							src="https://doloro.co.uk/assets/webStamps/doloro.png"
 							style="width: 100%; height: auto; text-align: center"
 						/></a
@@ -24,63 +27,48 @@
 					<a
 						style="border-color: #1DA1F2; background: #1DA1F2"
 						class="social-button"
+						title="doloro private twitter"
 						href="https:&#x2F;&#x2F;x.com&#x2F;Doloror"
 					>
-						<img src="https://doloro.co.uk/assets/socials/twitter.svg" />
+						<img alt="" src="https://doloro.co.uk/assets/socials/twitter.svg" />
 					</a>
 
 					<a
 						style="border-color: #ff90e8; background: #ff90e8"
 						class="social-button"
+						title="gumroad store"
 						href="https:&#x2F;&#x2F;doloro.gumroad.com&#x2F;"
 					>
-						<img src="https://doloro.co.uk/assets/socials/gumroad.svg" />
+						<img
+							alt="gumroad alt"
+							src="https://doloro.co.uk/assets/socials/gumroad.svg"
+						/>
 					</a>
 
 					<a
 						style="border-color: #000000; background: #000000"
 						class="social-button"
+						title="steam profile"
 						href="https:&#x2F;&#x2F;steamcommunity.com&#x2F;id&#x2F;Doloro&#x2F;"
 					>
-						<img src="https://doloro.co.uk/assets/socials/steam.svg" />
+						<img
+							alt="steam img"
+							src="https://doloro.co.uk/assets/socials/steam.svg"
+						/>
 					</a>
 
 					<a
 						style="border-color: #101010; background: #101010"
 						class="social-button"
+						title="jinxxy"
 						href="https:&#x2F;&#x2F;jinxxy.com&#x2F;doloro"
 					>
-						<img src="https://doloro.co.uk/assets/socials/jinxxy.png" />
+						<img
+							alt="jinxxy img"
+							src="https://doloro.co.uk/assets/socials/jinxxy.png"
+						/>
 					</a>
 				</div>
-				<style>
-					.social-button-div {
-						display: flex;
-						flex-wrap: wrap;
-						align-content: stretch;
-						justify-content: space-evenly;
-					}
-					.social-button {
-						display: block;
-						width: 30px;
-						height: 30px;
-						border: 2px outset #1da1f2;
-						background: #1da1f2;
-						margin: 2px;
-						img {
-							width: 30px;
-							height: auto;
-						}
-					}
-					.social-button:hover {
-						filter: brightness(110%);
-					}
-					.social-button:active {
-						border-style: inset;
-						img {
-						}
-					}
-				</style>
 			</div>
 			<div class="side-card side-card-bottom">
 				<div class="side-card-inner">
diff --git a/src/lib/tag_store/TagImgHelper.svelte b/src/lib/tag_store/TagImgHelper.svelte
index b12bdde..e893c70 100644
--- a/src/lib/tag_store/TagImgHelper.svelte
+++ b/src/lib/tag_store/TagImgHelper.svelte
@@ -11,7 +11,6 @@
 			},
 		},
 	);
-	console.log(imgs);
 	let trimmedImgs: Record<string, unknown> = {};
 	Object.entries(imgs).forEach(([key, value]) => {
 		let trimmedString = key.replace("./imgs/", "");
@@ -19,7 +18,6 @@
 		trimmedImgs[trimmedString2] = value;
 	});
 	function getTagImg(name: string): any {
-		console.log(trimmedImgs);
 		if (trimmedImgs[name]) {
 			return trimmedImgs[name];
 		} else {
diff --git a/src/lib/web_buttons/webButton.scss b/src/lib/web_buttons/webButton.scss
new file mode 100644
index 0000000..ac152a4
--- /dev/null
+++ b/src/lib/web_buttons/webButton.scss
@@ -0,0 +1,8 @@
+.web_button_div {
+  display: flex;
+  flex-direction: row;
+}
+
+.web_button_container {}
+
+.web_button_img {}
diff --git a/src/lib/web_buttons/webButtons.svelte b/src/lib/web_buttons/webButtons.svelte
index 1a33d0e..dbc2a3a 100644
--- a/src/lib/web_buttons/webButtons.svelte
+++ b/src/lib/web_buttons/webButtons.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	import json from "./dic.json";
+	import "./webButton.scss";
 	const imageModules = import.meta.glob(
 		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}",
 		{
@@ -37,14 +38,3 @@
 		</a>
 	{/each}
 {/snippet}
-
-<style>
-	.web_button_div {
-		display: flex;
-		flex-direction: row;
-	}
-	.web_button_container {
-	}
-	.web_button_img {
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8fc2d52..bb40a41 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,3 +1,4 @@
+<title>Doloro's Site (Which resides on the internet)</title>
 <div>
 	<h1>hi</h1>
 </div>
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
index 6344efe..8cfc6af 100644
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { getPosts, PostCard } from "src/lib/PostHelpers.svelte";
+	import "./posts.scss";
 
 	const posts = getPosts();
 </script>
 
+<title>Doloro Website [Posts]</title>
 <div class="posts_header">
 	<h2>Posts and what not</h2>
 </div>
@@ -14,23 +16,4 @@
 </div>
 
 <style lang="scss">
-	.posts_container {
-		margin-left: 20px;
-		margin-right: 20px;
-
-		position: relative;
-		display: flex;
-		align-items: center;
-		align-content: stretch;
-		justify-content: start;
-		row-gap: 20px;
-		padding-block-start: 20px;
-		z-index: 0;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		flex-grow: 1;
-	}
-	.posts_header {
-		text-align: center;
-	}
 </style>
diff --git a/src/routes/posts/posts.scss b/src/routes/posts/posts.scss
new file mode 100644
index 0000000..b28332d
--- /dev/null
+++ b/src/routes/posts/posts.scss
@@ -0,0 +1,20 @@
+.posts_container {
+  margin-left: 20px;
+  margin-right: 20px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: stretch;
+  justify-content: start;
+  row-gap: 20px;
+  padding-block-start: 20px;
+  z-index: 0;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+}
+
+.posts_header {
+  text-align: center;
+}
diff --git a/static/shared__.css b/static/shared__.css
index 10e94d5..8c5d624 100644
--- a/static/shared__.css
+++ b/static/shared__.css
@@ -8,15 +8,16 @@
 		--accent-2: #66232e;
 		--accent-3: #44131a;
 	}
+
 	body {
 		background-image: url("/bg.png");
 		margin: 40px auto;
 		max-width: 1280px;
 	}
-	.container {
-	}
+
 	header {
 		text-align: center;
+
 		h1 {
 			display: block;
 			font-size: 2em;
@@ -28,45 +29,32 @@
 			unicode-bidi: isolate;
 		}
 	}
+
 	footer {
 		text-align: center;
 	}
+
 	.body_of_funny_content {
 		display: flex;
 		flex-direction: row;
 	}
-	.left-sidebar {
-		margin: 5px;
-		margin-left: 0px;
-		height: 800px;
-		width: 125px;
-		background-color: var(--secondary);
-		border-style: inset;
-		border: 2px, inset, var(--thirdly);
-		box-sizing: border-box;
-	}
-	.right-sidebar {
-		margin: 5px;
-		margin-right: 0px;
-		height: 800px;
-		width: 125px;
-		background-color: var(--secondary);
-		border: 2px, inset, var(--thirdly);
-		box-sizing: border-box;
-	}
+
 	.actual-content {
 		flex: 1;
 		background-color: var(--primary);
 		/* border:  */
 		margin: 5px;
 	}
+
 	.sticky_top {
 		position: sticky;
 		top: 5px;
 	}
+
 	.a_bit_of_padding {
 		padding: 12px;
 	}
+
 	.stamp_holder {
 		justify-content: center;
 		flex-grow: 0;
diff --git a/svelte.config.ts b/svelte.config.ts
index c22bace..dd5b869 100644
--- a/svelte.config.ts
+++ b/svelte.config.ts
@@ -6,6 +6,7 @@ import { mdsvex } from "mdsvex";
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: [".svelte", ".md"],
+	emitCss: true,
 	preprocess: [
 		mdsvex({
 			// The default mdsvex extension is .svx; this overrides that.
@@ -22,7 +23,9 @@ const config = {
 			],
 		}),
 		scss(),
-		cssModules(),
+		cssModules({
+			mode: "scoped"
+		}),
 	],
 	kit: {
 		alias: {