diff --git a/src/App.tsx b/src/App.tsx
index e19b506..ae8253f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import {
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import LayerTree from "./components/LayerTree";
+import Light from "./components/Light";
 
 function App() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -35,6 +36,7 @@ function App() {
       <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}>
         <LayerTree />
       </Sidebar>
+      <Light />
     </>
   );
 }
diff --git a/src/components/Light.tsx b/src/components/Light.tsx
new file mode 100644
index 0000000..1787a2e
--- /dev/null
+++ b/src/components/Light.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { LightingEffect, AmbientLight, DirectionalLight } from "@deck.gl/core";
+import { useDeckGl } from "@mapcomponents/deck-gl";
+
+const effect = new LightingEffect({
+  ambientLight: new AmbientLight({ color: [255, 255, 255], intensity: 1.8 }),
+  sunLight: new DirectionalLight({
+    color: [255, 240, 200],
+    intensity: 2.0,
+    direction: [-2, -4, -3],
+  }),
+});
+
+export default function LightingSetup() {
+  const { addEffect, removeEffect } = useDeckGl();
+
+  useEffect(() => {
+    addEffect(effect);
+    return () => removeEffect(effect);
+  }, []);
+
+  return null;
+}
+