diff --git a/docs/audio-source.mdx b/docs/audio-source.mdx
index 36d6eb2..f145696 100644
--- a/docs/audio-source.mdx
+++ b/docs/audio-source.mdx
@@ -3,7 +3,7 @@ Title: Audio Source
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 <Zorn
@@ -18,7 +18,7 @@ import {Zorn} from "@minpluto/zorn"
 Since Zorn was originally built for the MinPluto frontend project, there are scenarios where the video source has no audio to get higher quality options. If you're in a scenario where the video source is missing audio, but you do have the audio itself, you can add that audio source to the video player. A separated `<audio/>` element is used, this will use a sync function in JavaScript to make sure the video and audio are synced. As before with the video source, it can be local or remote. 
 
 **Demo Used Above**
-<Prism lang="jsx" code={
+<Code lang="jsx" code={
 `---
 import {Zorn} from "@minpluto/zorn"
 ---
@@ -34,9 +34,9 @@ import {Zorn} from "@minpluto/zorn"
 `}/>
 
 **Local**
-<Prism lang="jsx" code={`<Zorn Audio="/media/audio.ogg"/>`}/>
+<Code lang="jsx" code={`<Zorn Audio="/media/audio.ogg"/>`}/>
 
 > Use the `/public/` folder in your Astro project.
 
 **Remote**
-<Prism lang="jsx" code={`<Zorn Audio="https://example.org/media/audio.ogg"/>`}/>
\ No newline at end of file
+<Code lang="jsx" code={`<Zorn Audio="https://example.org/media/audio.ogg"/>`}/>
\ No newline at end of file
diff --git a/docs/basic-setup.mdx b/docs/basic-setup.mdx
index 8b09e74..3deae81 100644
--- a/docs/basic-setup.mdx
+++ b/docs/basic-setup.mdx
@@ -3,7 +3,7 @@ Title: Basic Usage
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 <Zorn
@@ -14,7 +14,7 @@ import {Zorn} from "@minpluto/zorn"
 
 You can add it to any page on your Astro website by importing Zorn:
 
-<Prism lang="jsx" code={
+<Code lang="jsx" code={
 `---
 import {Zorn} from "@minpluto/zorn"
 ---
diff --git a/docs/live.mdx b/docs/live.mdx
index 746f9a4..8fcb59b 100644
--- a/docs/live.mdx
+++ b/docs/live.mdx
@@ -3,7 +3,7 @@ Title: HLS
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 <Zorn Live Video="https://twitch.api.sudovanilla.org/proxy/stream/chillhopradio/hls.m3u8"/>
@@ -12,4 +12,4 @@ Zorn can stream `.m3u8` content with HLS support added. The HLS support is only
 
 Just add the `Live` option with an `.m3u8` source.
 
-<Prism lang="jsx" code={`<Zorn Live Video="https://example.org/cats.m3u8"/>`}/>
\ No newline at end of file
+<Code lang="jsx" code={`<Zorn Live Video="https://example.org/cats.m3u8"/>`}/>
\ No newline at end of file
diff --git a/docs/milieu.mdx b/docs/milieu.mdx
index cd4e8e5..3299fb0 100644
--- a/docs/milieu.mdx
+++ b/docs/milieu.mdx
@@ -3,7 +3,7 @@ Title: Milieu
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 
@@ -40,4 +40,4 @@ import {Zorn} from "@minpluto/zorn"
 
 The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes.
 
-<Prism lang="jsx" code={`<Zorn Milieu/>`}/>
\ No newline at end of file
+<Code lang="jsx" code={`<Zorn Milieu/>`}/>
\ No newline at end of file
diff --git a/docs/setting-menus.mdx b/docs/setting-menus.mdx
index bd33e0d..3e95ece 100644
--- a/docs/setting-menus.mdx
+++ b/docs/setting-menus.mdx
@@ -3,7 +3,7 @@ Title: Setting Menus
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 ## Automated items
@@ -12,7 +12,7 @@ When enabling certain functions and features of Zorn, certain items will automat
 
 However, if you don't have your items added at all with no `Settings` variable setup, the Settings icon is setup to not be shown. So if you decide to enable these other functions and features without creating a custom settings menu, at least create a blank one:
 
-<Prism lang="jsx" code={`
+<Code lang="jsx" code={`
 <Zorn
 	Settings={[{"Type": "Button","Name": "","Action": "null"}}
 />
@@ -22,7 +22,7 @@ However, if you don't have your items added at all with no `Settings` variable s
 
 To setup the settings menu with your own custom items, you'll need to setup an array within the Zorn player, here's a quick example:
 
-<Prism lang="jsx" code={`
+<Code lang="jsx" code={`
 <Zorn
 	Settings={
 		[
@@ -57,7 +57,7 @@ You can also enable the "Quality" menu, doing so will automatically add this to
 
 You can set what resolutions are available and set the `onclick` action for it:
 
-<Prism lang="jsx" code={`
+<Code lang="jsx" code={`
 <Zorn
 	Quality={
 		[
diff --git a/docs/subtitles.mdx b/docs/subtitles.mdx
index 7bdd237..1e70380 100644
--- a/docs/subtitles.mdx
+++ b/docs/subtitles.mdx
@@ -3,14 +3,14 @@ Title: Subtitles
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 ![Native HTML5 Subtitles (Firefox)](https://md.sudovanilla.org/images/subtitles-example-native-html5.png)
 
 To apply subtitles to the video player, add a slot for tracks and insert HTML5 [`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks). Make sure to set the `label` and `srclang`.
 
-<Prism lang="jsx" code={`
+<Code lang="jsx" code={`
 <Zorn Subtitles>
 	<slot slot="subtitles">
 		<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
diff --git a/docs/toggles.mdx b/docs/toggles.mdx
index 22dbef7..e369762 100644
--- a/docs/toggles.mdx
+++ b/docs/toggles.mdx
@@ -3,7 +3,7 @@ Title: Toggles
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 Zorn has plent of controls to show, some are enabled or disabled by default with their toggle option.
@@ -12,4 +12,4 @@ Zorn has plent of controls to show, some are enabled or disabled by default with
 
 By default, these buttons are hidden. If you want to show them, just add the `ShowBackAndForward` option:
 
-<Prism lang="jsx" code={`<Zorn ShowBackAndForward/>`}/>
\ No newline at end of file
+<Code lang="jsx" code={`<Zorn ShowBackAndForward/>`}/>
\ No newline at end of file
diff --git a/docs/youtube.mdx b/docs/youtube.mdx
index 86f8a3b..5cc281c 100644
--- a/docs/youtube.mdx
+++ b/docs/youtube.mdx
@@ -3,7 +3,7 @@ Title: YouTube
 Type: Document
 ---
 
-import {Prism} from "@astrojs/prism"
+import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
 <Zorn
@@ -19,7 +19,7 @@ import {Zorn} from "@minpluto/zorn"
 
 Zorn supports YouTube videos, using Invidious. Set the video id and quality in Zorn. If you do not set the quality, it'll default to `137`, which is the itag for 1080p.
 
-<Prism lang="jsx" code={`<Zorn YouTube Audio WatchId="a0a0-0a000" YouTubeQuality="137">`}/>
+<Code lang="jsx" code={`<Zorn YouTube Audio WatchId="a0a0-0a000" YouTubeQuality="137">`}/>
 
 If you're setting the quality to 1080p or up, using `Audio` is required for Dash support.