diff --git a/src/ReplicatedStorage/ui/components/acrylic/index.tsx b/src/ReplicatedStorage/ui/components/acrylic/index.tsx
index e59eaa1..82cd98d 100644
--- a/src/ReplicatedStorage/ui/components/acrylic/index.tsx
+++ b/src/ReplicatedStorage/ui/components/acrylic/index.tsx
@@ -27,6 +27,13 @@ interface acrylicProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
+Make("DepthOfFieldEffect", {
+	FarIntensity: 0,
+	InFocusRadius: 0.1,
+	NearIntensity: 1,
+	Parent: Lighting
+})
+
 function acrylic(props: acrylicProps): Roact.Element {
 	const { radius, distance } = props
 
@@ -123,13 +130,6 @@ function acrylic(props: acrylicProps): Roact.Element {
 		const fovHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("FieldOfView").Connect(updateInstance)
 		const viewportHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("ViewportSize").Connect(updateInstance)
 
-		Make("DepthOfFieldEffect", {
-			FarIntensity: 0,
-			InFocusRadius: 0.1,
-			NearIntensity: 1,
-			Parent: Lighting
-		})
-
 		return () => {
 			posHandle.Disconnect()
 			fovHandle.Disconnect()