diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
index 0504b954..58a79bbb 100644
--- a/apps/artboard/src/pages/artboard.tsx
+++ b/apps/artboard/src/pages/artboard.tsx
@@ -49,17 +49,10 @@ export const ArtboardPage = () => {
 
   // Typography Options
   useEffect(() => {
-    if (metadata.typography.hideIcons) {
-      document.querySelector("#root")!.classList.add("hide-icons");
-    } else {
-      document.querySelector("#root")!.classList.remove("hide-icons");
-    }
-
-    if (metadata.typography.underlineLinks) {
-      document.querySelector("#root")!.classList.add("underline-links");
-    } else {
-      document.querySelector("#root")!.classList.remove("underline-links");
-    }
+    document.querySelectorAll(`[data-page]`).forEach((el) => {
+      el.classList.toggle("hide-icons", metadata.typography.hideIcons);
+      el.classList.toggle("underline-links", metadata.typography.underlineLinks);
+    });
   }, [metadata]);
 
   return <Outlet />;
diff --git a/apps/artboard/src/styles/main.css b/apps/artboard/src/styles/main.css
index c6c95180..7903d7d8 100644
--- a/apps/artboard/src/styles/main.css
+++ b/apps/artboard/src/styles/main.css
@@ -12,11 +12,11 @@
   @apply antialiased;
 }
 
-#root.hide-icons .ph {
+[data-page].hide-icons .ph {
   @apply hidden;
 }
 
-#root.underline-links a {
+[data-page].underline-links a {
   @apply underline underline-offset-2;
 }