diff --git a/packages/app/src/components/BackgroundDecorator/index.jsx b/packages/app/src/components/BackgroundDecorator/index.jsx
new file mode 100644
index 00000000..e126654b
--- /dev/null
+++ b/packages/app/src/components/BackgroundDecorator/index.jsx
@@ -0,0 +1,48 @@
+import React from "react"
+import classnames from "classnames"
+
+export default () => {
+    const [activeColor, setActiveColor] = React.useState(false)
+
+    const hasBackgroundSVG = (value) => {
+        if (value === "unset" || value === "none" || !value) {
+            return false
+        } else {
+            return true
+        }
+    }
+
+    const handleStyleUpdate = (update) => {
+        if (hasBackgroundSVG(update["backgroundSVG"])) {
+            setActiveColor(true)
+        } else {
+            setActiveColor(false)
+        }
+    }
+
+    React.useEffect(() => {
+        app.eventBus.on("style.update", handleStyleUpdate)
+
+        const activeSVG = app.cores.style.getValue("backgroundSVG")
+
+        if (hasBackgroundSVG(activeSVG)) {
+            setActiveColor(true)
+        }
+
+        return () => {
+            app.eventBus.off("style.update", handleStyleUpdate)
+        }
+    }, [])
+
+    return <div
+        id="root_background"
+        className={
+            classnames(
+                "root_background",
+                {
+                    ["active"]: activeColor
+                }
+            )
+        }
+    />
+}
\ No newline at end of file