diff --git a/src/components/react/noise-bg.tsx b/src/components/react/noise-bg.tsx
new file mode 100644
index 0000000..2712853
--- /dev/null
+++ b/src/components/react/noise-bg.tsx
@@ -0,0 +1,19 @@
+export function NoiseBg() {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: -1,
+        width: "100%",
+        height: "100%",
+        backgroundSize: "128px",
+        backgroundRepeat: "repeat",
+        backgroundImage:
+          "url('https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png')",
+        opacity: 0.06,
+        borderRadius: 0,
+      }}
+    ></div>
+  )
+}
diff --git a/src/components/react/test.tsx b/src/components/react/test.tsx
deleted file mode 100644
index c8a449b..0000000
--- a/src/components/react/test.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export function Test() {
-  return (
-    <div className="text-3xl text-blue-500">Test React and TailwindCSS</div>
-  )
-}
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 5bf4475..6fd97fc 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,6 +1,7 @@
 ---
 import "~/styles/globals.css"
 import { config } from "~/config"
+import { NoiseBg } from "~/components/react/noise-bg"
 ---
 
 <!doctype html>
@@ -35,6 +36,7 @@ import { config } from "~/config"
   <body class="dark:bg-[#121212] dark:text-white">
     <div class="flex min-h-screen w-full justify-center px-10 md:p-0">
       <slot />
+      <NoiseBg />
     </div>
   </body>
 </html>
