diff --git a/components/Background.jsx b/components/Background.jsx
index 24b7ea0..0537f13 100644
--- a/components/Background.jsx
+++ b/components/Background.jsx
@@ -1,61 +1,7 @@
 import React from "react";
 
 const Background = ({ ...rest }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 800 450"
-      {...rest}
-    >
-      <defs>
-        <filter
-          id="bbblurry-filter"
-          x="-100%"
-          y="-100%"
-          width="400%"
-          height="400%"
-          filterUnits="objectBoundingBox"
-          primitiveUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feGaussianBlur
-            stdDeviation="130"
-            x="0%"
-            y="0%"
-            width="100%"
-            height="100%"
-            in="SourceGraphic"
-            edgeMode="none"
-            result="blur"
-          ></feGaussianBlur>
-        </filter>
-      </defs>
-      <g filter="url(#bbblurry-filter)">
-        <ellipse
-          rx="219.5"
-          ry="215"
-          cx="614.6378451260654"
-          cy="228.07355707341975"
-          fill="hsl(37, 99%, 67%)"
-        ></ellipse>
-        <ellipse
-          rx="219.5"
-          ry="215"
-          cx="183.14674932306463"
-          cy="352.1817377263849"
-          fill="hsl(316, 73%, 52%)"
-        ></ellipse>
-        <ellipse
-          rx="219.5"
-          ry="215"
-          cx="196.29381491921163"
-          cy="48.65340354225853"
-          fill="hsl(185, 100%, 57%)"
-        ></ellipse>
-      </g>
-    </svg>
-  );
+  return <img src="/background.svg" alt="Background" {...rest} />;
 };
 
 export default Background;
diff --git a/components/Layout.jsx b/components/Layout.jsx
index b48656b..b86cf07 100644
--- a/components/Layout.jsx
+++ b/components/Layout.jsx
@@ -25,7 +25,7 @@ const Layout = ({ children }) => {
           <Navbar />
           {/* LINKS CARDS */}
           <ScrollingCards />
-          <Background className="pointer-events-none fixed z-50 h-full w-full opacity-20 mix-blend-hard-light" />
+          <Background className="pointer-events-none fixed z-50 h-full w-full object-cover opacity-20 mix-blend-hard-light" />
           <main className="">{children}</main>
           <script
             defer
diff --git a/public/background.svg b/public/background.svg
new file mode 100644
index 0000000..6ef7baf
--- /dev/null
+++ b/public/background.svg
@@ -0,0 +1,52 @@
+<svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      viewBox="0 0 800 450"
+    >
+      <defs>
+        <filter
+          id="bbblurry-filter"
+          x="-100%"
+          y="-100%"
+          width="400%"
+          height="400%"
+          filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feGaussianBlur
+            stdDeviation="130"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+            in="SourceGraphic"
+            edgeMode="none"
+            result="blur"
+          ></feGaussianBlur>
+        </filter>
+      </defs>
+      <g filter="url(#bbblurry-filter)">
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="614.6378451260654"
+          cy="228.07355707341975"
+          fill="hsl(37, 99%, 67%)"
+        ></ellipse>
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="183.14674932306463"
+          cy="352.1817377263849"
+          fill="hsl(316, 73%, 52%)"
+        ></ellipse>
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="196.29381491921163"
+          cy="48.65340354225853"
+          fill="hsl(185, 100%, 57%)"
+        ></ellipse>
+      </g>
+    </svg>
\ No newline at end of file