diff --git a/src/components/PluginCard.astro b/src/components/PluginCard.astro
index f08a86d29..d1f476ef6 100644
--- a/src/components/PluginCard.astro
+++ b/src/components/PluginCard.astro
@@ -2,7 +2,7 @@
 import { Markdown } from "@astropub/md";
 import PluginModal from "./PluginModal.astro";
 import DeprecatedIcon from "./DeprecatedIcon.astro";
-import type { Plugin } from "../utils/types";
+import type { Plugin } from "~/utils/types";
 
 type Props = Plugin;
 
diff --git a/src/components/PluginModal.astro b/src/components/PluginModal.astro
index f093656a0..a2086ee90 100644
--- a/src/components/PluginModal.astro
+++ b/src/components/PluginModal.astro
@@ -1,7 +1,7 @@
 ---
 import { Code } from "@astrojs/starlight/components";
 import { Markdown } from "@astropub/md";
-import type { Plugin } from "../utils/types";
+import type { Plugin } from "~/utils/types";
 import Modal from "./Modal.astro";
 
 type Props = Plugin;
diff --git a/src/components/SponsorCard.astro b/src/components/SponsorCard.astro
index ca7830f69..84b018e13 100644
--- a/src/components/SponsorCard.astro
+++ b/src/components/SponsorCard.astro
@@ -1,5 +1,5 @@
 ---
-import type { Contributor } from "../utils/types";
+import type { Contributor } from "~/utils/types";
 
 type Props = Contributor;
 
diff --git a/src/content/docs/blog/2023-7-4.md b/src/content/docs/blog/2023-7-4.mdx
similarity index 70%
rename from src/content/docs/blog/2023-7-4.md
rename to src/content/docs/blog/2023-7-4.mdx
index 7873cbdb8..ec8a7fe36 100644
--- a/src/content/docs/blog/2023-7-4.md
+++ b/src/content/docs/blog/2023-7-4.mdx
@@ -16,17 +16,26 @@ And here we are!
 
 # Who did our new branding?
 
+import { Image } from 'astro:assets';
+import paperPrototypes from '~/assets/blog/paper-prototypes.jpg';
+import paperLogo from '~/assets/blog/paper-logo.png';
+import serenTried from '~/assets/blog/seren-tried.png';
+import sernLogo from '~/assets/logo/sern-logo.png';
+
 [Ropox](https://github.com/Murtatrxx)!  
+
 Bro's the GOAT. This website is maintained by him, the domain costs are funded by him and also he started brainstorming how the logo would be on paper:  
-![](/src/assets/blog/paper-prototypes.jpg)
+<Image src={paperPrototypes} alt="paper prototypes" />
+
 And there it all clicked:  
-![](/src/assets/blog/paper-logo.png)
+<Image src={paperLogo} alt="paper logo" />
+
 seren tried by the way!
-![](/src/assets/blog/seren-tried.png)
+<Image src={serenTried} alt="seren tried" />
 
 # Anyways, here it is:
 
-![](/img/logo.png)
+<Image src={sernLogo} alt="sern logo" />
 
 Pretty nice!
 
diff --git a/src/content/docs/cli/publish.md b/src/content/docs/cli/publish.mdx
similarity index 96%
rename from src/content/docs/cli/publish.md
rename to src/content/docs/cli/publish.mdx
index 7be66c396..573755f75 100644
--- a/src/content/docs/cli/publish.md
+++ b/src/content/docs/cli/publish.mdx
@@ -34,7 +34,10 @@ If you do not know how to obtain either of these credentials, [click here](https
 
 ## Usage
 
-![usage](/src/assets/docs/sern-publish.gif)
+import { Image } from 'astro:assets';
+import sernPublish from '~/assets/docs/sern-publish.gif';
+
+<Image src={sernPublish} alt="usage" />
 
 ## Features
 
diff --git a/src/content/docs/guide/walkthrough/plugins.md b/src/content/docs/guide/walkthrough/plugins.mdx
similarity index 93%
rename from src/content/docs/guide/walkthrough/plugins.md
rename to src/content/docs/guide/walkthrough/plugins.mdx
index f1a654337..2066a9e8b 100644
--- a/src/content/docs/guide/walkthrough/plugins.md
+++ b/src/content/docs/guide/walkthrough/plugins.mdx
@@ -29,7 +29,7 @@ import { ownerOnly } from '../plugins'
 
 export default commandModule({
     type: CommandType.Both,
-    plugins: [ownerOnly(['182326315813306368')],
+    plugins: [ownerOnly(['182326315813306368'])],
     description: 'ping command',
     execute: (ctx) => {
         ctx.reply('hello, owner');
@@ -80,7 +80,10 @@ Above, this simple plugin logs that the module has been loaded along with a time
 
 ## Event Plugins
 
-![control-plugins](/src/assets/docs/event-plugins.png)
+import { Image } from 'astro:assets';
+import eventPlugins from '~/assets/docs/event-plugins.png';
+
+<Image src={eventPlugins} alt="control plugins" />
 
 - An event is emitted by discord.js.
 - This event is passed to all plugins (**in order!!**),
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index 953c02493..8b1226ed2 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -5,7 +5,7 @@ description: With the support of the community made plugins and a powerful CLI,
 hero:
   tagline: With the support of the community made plugins and a powerful CLI, it's more than just a handler.
   image:
-    file: ../../assets/logo/sern-logo.png
+    file: ~/assets/logo/sern-logo.png
   actions:
     - text: <b>npm create @sern/bot</b>
       link: /guide/walkthrough/new-project
diff --git a/src/overrides/Head.astro b/src/overrides/Head.astro
index 0a37a1c99..ab3e8944f 100644
--- a/src/overrides/Head.astro
+++ b/src/overrides/Head.astro
@@ -1,8 +1,6 @@
 ---
 import type { Props } from "@astrojs/starlight/props";
 import DefaultHead from "@astrojs/starlight/components/Head.astro";
-
-const logo = new URL("/sern-logo.png", Astro.url);
 ---
 
 <DefaultHead {...Astro.props}><slot /></DefaultHead>
@@ -14,7 +12,7 @@ const logo = new URL("/sern-logo.png", Astro.url);
 <meta property="og:url" content="https://sern.dev" />
 <meta property="og:type" content="website" />
 <meta property="og:image:alt" content="sern logo" />
-<meta property="og:image" content={logo} />
+<meta property="og:image" content="/sern-logo.png" />
 <meta property="og:image:height" content="512" />
 <meta property="og:image:width" content="1024" />
 <meta name="theme-color" content="#F25186" />
@@ -27,6 +25,6 @@ const logo = new URL("/sern-logo.png", Astro.url);
   name="twitter:description"
   content="A modular, customizable, fast Discord.js framework to streamline bot development"
 />
-<meta name="twitter:image" content={logo} />
+<meta name="twitter:image" content="/sern-logo.png" />
 <meta name="twitter:url" content="https://sern.dev" />
 <meta property="twitter:site" content="@sern-handler" />
diff --git a/src/pages/plugins.astro b/src/pages/plugins.astro
index 11a7642de..b2d222434 100644
--- a/src/pages/plugins.astro
+++ b/src/pages/plugins.astro
@@ -2,9 +2,9 @@
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { CardGrid } from "@astrojs/starlight/components";
 import { z } from "astro/zod";
-import PluginCard from "../components/PluginCard.astro";
-import { PluginSchema } from "../utils/types";
-import { zodFetch } from "../utils/fetch";
+import PluginCard from "~/components/PluginCard.astro";
+import { PluginSchema } from "~/utils/types";
+import { zodFetch } from "~/utils/fetch";
 
 const pluginResponse = await zodFetch(
   z.array(PluginSchema),
diff --git a/src/pages/sponsors.astro b/src/pages/sponsors.astro
index a8fc967a2..e127fec63 100644
--- a/src/pages/sponsors.astro
+++ b/src/pages/sponsors.astro
@@ -1,9 +1,9 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { z } from "astro/zod";
-import SponsorCard from "../components/SponsorCard.astro";
-import { zodFetch } from "../utils/fetch";
-import { OpenCollectiveAccountSchema } from "../utils/types";
+import SponsorCard from "~/components/SponsorCard.astro";
+import { zodFetch } from "~/utils/fetch";
+import { OpenCollectiveAccountSchema } from "~/utils/types";
 
 const sponsorResponse = await zodFetch(
   z.object({
diff --git a/tsconfig.json b/tsconfig.json
index d631108af..88dd27952 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "exclude": ["sern-handler"]
+  "exclude": [
+    "sern-handler"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "src/*"
+      ]
+    },
+  }
 }
\ No newline at end of file