diff --git a/package.json b/package.json
index 92952a0..7836e32 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.153",
     "@mui/material": "^5.14.18",
     "dayjs": "^1.11.10",
     "feed": "^4.2.2",
diff --git a/public/blog/atom.xml b/public/blog/atom.xml
index 7e58e3a..5e83e2f 100644
--- a/public/blog/atom.xml
+++ b/public/blog/atom.xml
@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://srizan.dev/blog</id>
     <title>Sr Izan's Blog</title>
-    <updated>2023-11-17T18:19:59.603Z</updated>
+    <updated>2023-11-20T20:13:38.131Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <author>
         <name>Sr Izan</name>
diff --git a/public/blog/rss.xml b/public/blog/rss.xml
index e1c284a..1dea7f8 100644
--- a/public/blog/rss.xml
+++ b/public/blog/rss.xml
@@ -4,7 +4,7 @@
         <title>Sr Izan's Blog</title>
         <link>https://srizan.dev/blog</link>
         <description>My little donowall place on the net</description>
-        <lastBuildDate>Fri, 17 Nov 2023 18:19:59 GMT</lastBuildDate>
+        <lastBuildDate>Mon, 20 Nov 2023 20:13:38 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>
diff --git a/public/pfp.webp b/public/pfp.webp
index 28b955b..a2789af 100644
Binary files a/public/pfp.webp and b/public/pfp.webp differ
diff --git a/src/app/(pages)/(root)/page.tsx b/src/app/(pages)/(root)/page.tsx
index 7ab4ae8..99047c7 100644
--- a/src/app/(pages)/(root)/page.tsx
+++ b/src/app/(pages)/(root)/page.tsx
@@ -9,8 +9,7 @@ export default function Page() {
   return (
     <div>
       <div className='aboutMeBox'>
-        {/* style={{ borderRadius: '70px' }} */}
-        <Link href='/collab'><Image src='/pfp.webp' alt='main profile picture' width='200' height='200' /></Link>
+        <Image src='/pfp.webp' alt='main profile picture' width='200' height='200' style={{ borderRadius: '100px' }} />
         <p>A spanish hobbyist developer and osu! player</p>
         <p>Stalk me on social media:</p>
           <div className='icons'>
diff --git a/src/app/(pages)/collab/page.tsx b/src/app/(pages)/_collab/page.tsx
similarity index 100%
rename from src/app/(pages)/collab/page.tsx
rename to src/app/(pages)/_collab/page.tsx
diff --git a/src/app/(pages)/blog/[id]/page.tsx b/src/app/(pages)/blog/[id]/page.tsx
index 41e493b..07214db 100644
--- a/src/app/(pages)/blog/[id]/page.tsx
+++ b/src/app/(pages)/blog/[id]/page.tsx
@@ -1,5 +1,4 @@
 import Head from "next/head";
-import * as fs from 'node:fs/promises'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
diff --git a/src/app/_components/BlogPostCard.tsx b/src/app/_components/BlogPostCard.tsx
index 5a72a9a..0db0c66 100644
--- a/src/app/_components/BlogPostCard.tsx
+++ b/src/app/_components/BlogPostCard.tsx
@@ -3,15 +3,18 @@
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
 import Typography from '@mui/material/Typography';
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat.js'
 import '../_css/BlogPostCard.css'
-import { Button, CardActions } from "@mui/material";
 import Link from "next/link";
+import React from 'react';
+import { LoadingButton } from '@mui/lab';
 dayjs.extend(customParseFormat)
 
 export default function BlogPostCard(props: Props) {
+    const [loading, setLoading] = React.useState(false);
     return (
         <Card>
             <Box className={'cardBox'}>
@@ -27,7 +30,7 @@ export default function BlogPostCard(props: Props) {
                     </Typography>
                 </CardContent>
                 <CardActions className={'actions'}>
-                    <Link href={`/blog/${props.id}`}><Button size="small">Read</Button></Link>
+                    <Link href={`/blog/${props.id}`}><LoadingButton size="small" loading={loading} onClick={() => setLoading(true)}>Read</LoadingButton></Link>
                 </CardActions>
             </Box>
         </Card>
diff --git a/src/app/_css/BlogPost.css b/src/app/_css/BlogPost.css
index 3e5cfe7..5fda204 100644
--- a/src/app/_css/BlogPost.css
+++ b/src/app/_css/BlogPost.css
@@ -18,7 +18,7 @@ code .codeHighlighter {
 }
 
 @media (prefers-color-scheme: light) {
-    .codeHighlighter {
-        background-color: #FFF;
+    code {
+        color: #FFF
     }
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2fbd008..c9702f1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
-import { RootStyleRegistry } from './_components/ThemeRegistry/EmotionRootStyleRegistry'
+import { RootStyleRegistry } from './_components/ThemeRegistry/EmotionRootStyleRegistry';
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -19,7 +19,6 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <RootStyleRegistry>
-
           {children}
         </RootStyleRegistry>
       </body>
diff --git a/yarn.lock b/yarn.lock
index 85f1d29..9810844 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -272,6 +272,19 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.18.tgz#f8b187dc89756fa5c0b7d15aea537a6f73f0c2d8"
   integrity sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==
 
+"@mui/lab@^5.0.0-alpha.153":
+  version "5.0.0-alpha.153"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.153.tgz#069f3a6fdd0b917da934d554bff0bb7a93e337d2"
+  integrity sha512-vogVniN5JC7ltqPpPhIGYVImnvu0PnE1UbtFvbzVs3ldt3obWJ5XrhYS/OEV6H2/9dey3nUNU6i36FG1yreFDA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/base" "5.0.0-beta.24"
+    "@mui/system" "^5.14.18"
+    "@mui/types" "^7.2.9"
+    "@mui/utils" "^5.14.18"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.14.18":
   version "5.14.18"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.18.tgz#d0a89be3e27afe90135d542ddbf160b3f34e869c"