diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
index a2ba190..fb32bcd 100755
--- a/src/layouts/Document.astro
+++ b/src/layouts/Document.astro
@@ -14,6 +14,11 @@ import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
 import {Zorn} from "@minpluto/zorn"
 
 // Styles
+/// When Zorn is not imported first in the layout, it's CSS does not carry
+/// over when importing it into your own documents. So, it's CSS here are imported.
+import "../../node_modules/@minpluto/zorn/src/Styles/Index.scss"
+import "../../node_modules/@minpluto/zorn/src/Styles/Iconoir.css"
+
 import "@styles/index.scss"
 import "@styles/feelback.css"
 import "@styles/prism.css"
@@ -41,10 +46,5 @@ import "@styles/prism.css"
             }
         </div>
     </article>
-    <Footer/>    
-    <!-- Zorn is broken if a player is not already set -->
-    <Zorn is:raw PlayerName="zorn_null" Poster="#" Video="#"/>
-</div>
-
-<!-- Zorn is broken if a player is not already set -->
-<style is:global>#zorn-player-zorn_null {display: none}</style>
\ No newline at end of file
+    <Footer/>
+</div>
\ No newline at end of file