diff --git a/packages/bun-landing/components/Layout.tsx b/packages/bun-landing/components/Layout.tsx
index 2e50ce3d87..3c2e0407a1 100644
--- a/packages/bun-landing/components/Layout.tsx
+++ b/packages/bun-landing/components/Layout.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { dataURI } from "macro:./dataURI";
 
 export default function Layout({ children }) {
   return (
@@ -52,13 +53,18 @@ export default function Layout({ children }) {
         <div id="header-wrap">
           <header>
             <a href="/" id="logo-link" aria-label="home">
-              <img height="61px" src="/logo.svg" alt="Bun logo" id="logo" />
               <img
-                height="31.65px"
-                src="/Bun.png"
-                srcSet="/Bun.png 1x, /Bun@2x.png 2x"
+                height="61px"
+                src={dataURI("../public/logo.svg", "components/Layout.tsx")}
+                alt="Bun logo"
+                id="logo"
+              />
+
+              <img
                 alt="Bun"
                 id="logo-text"
+                height="31.65px"
+                src={dataURI("../public/Bun@2x.png", "components/Layout.tsx")}
               />
             </a>
 
diff --git a/packages/bun-landing/components/dataURI.ts b/packages/bun-landing/components/dataURI.ts
new file mode 100644
index 0000000000..8bfc93714c
--- /dev/null
+++ b/packages/bun-landing/components/dataURI.ts
@@ -0,0 +1,19 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+export function dataURI(expr) {
+  const [pathNode, relativeNode] = expr.arguments;
+  const path = pathNode.toString();
+  const relative = relativeNode.toString();
+  try {
+    const toLoad = resolve(process.cwd(), relative, "../", path);
+    const data = readFileSync(toLoad);
+
+    return `data:${Bun.file(toLoad).type};base64, ${btoa(
+      String.fromCharCode(...new Uint8Array(data.buffer))
+    )}`;
+  } catch (e) {
+    console.error(e);
+    return "";
+  }
+}