diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx
index 98db74f..dd0bd26 100644
--- a/lightning/src/components/BadassMap.tsx
+++ b/lightning/src/components/BadassMap.tsx
@@ -1,8 +1,6 @@
 import { createSignal, Show } from 'solid-js';
 import * as maplibre from 'maplibre-gl';
-import MapGL, { Viewport, Camera, Layer, Popup, Marker } from 'solid-map-gl';
-import { MapboxLayer } from '@deck.gl/mapbox/typed';
-import { ArcLayer, ScatterplotLayer } from '@deck.gl/layers/typed';
+import MapGL, { Viewport, Camera, Marker } from 'solid-map-gl';
 
 import MapControls from './MapControls';
 import MapScatLayer from './MapScatLayer';
@@ -13,13 +11,30 @@ import type { MapOptions } from 'maplibre-gl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 
+// test data
+const FANEUIL_HALL: number[] = [-71.05625, 42.36]
+const GD_TAVERN: number[] = [-71.056922, 42.360919]
+const BBC: number[] = [-71.103, 42.3145]
+const GARDEN: number[] = [-71.062228, 42.366303]
+const PR_HOUSE: number[] = [-71.053678, 42.363722]
+
+const ARC_DATA = [
+    { source: FANEUIL_HALL, target: GD_TAVERN },
+    { source: FANEUIL_HALL, target: BBC },
+    { source: FANEUIL_HALL, target: GARDEN },
+    { source: FANEUIL_HALL, target: PR_HOUSE },
+];
+
+const SCAT_DATA = [
+    { coordinates: FANEUIL_HALL },
+    { coordinates: GD_TAVERN },
+    { coordinates: BBC },
+    { coordinates: GARDEN },
+    { coordinates: PR_HOUSE },
+];
+
 
 function BadassMap(): JSX.Element {
-    const FANEUIL_HALL: number[] = [-71.05625, 42.36]
-    const GD_TAVERN: number[] = [-71.056922, 42.360919]
-    const BBC: number[] = [-71.103, 42.3145]
-    const GARDEN: number[] = [-71.062228, 42.366303] 
-    const PR_HOUSE: number[] = [-71.053678,	42.363722]
 
     const TILES_URL: string = 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM'
     const options: MapOptions = {
@@ -38,42 +53,6 @@ function BadassMap(): JSX.Element {
     const [rotate, setRotate] = createSignal<boolean>(true);
     const toggleRotate = () => setRotate<boolean>(!rotate());
 
-    const ARC_DATA = [
-            { source: FANEUIL_HALL, target: GD_TAVERN },
-            { source: FANEUIL_HALL, target: BBC },
-            { source: FANEUIL_HALL, target: GARDEN },
-            { source: FANEUIL_HALL, target: PR_HOUSE },
-        ];
-
-    const arcLayer = new MapboxLayer({
-        id: 'deckgl-arc',
-        type: ArcLayer,
-        data: ARC_DATA,
-        getSourcePosition: (d: any) => d.source,
-        getTargetPosition: (d: any) => d.target,
-        getSourceColor: [200, 0, 0],
-        getTargetColor: [0, 230, 0],
-        getWidth: 6,
-    });
-
-    const SCATTER_DATA = [
-            { coordinates: FANEUIL_HALL },
-            { coordinates: GD_TAVERN },
-            { coordinates: BBC },
-            { coordinates: GARDEN },
-            { coordinates: PR_HOUSE },
-        ];
-
-    const scatterplotLayer = new MapboxLayer({
-        id: 'deckgl-scatterplot',
-        type: ScatterplotLayer,
-        data: SCATTER_DATA,
-        getPosition: (d: any) => d.coordinates,
-        getRadius: 30,
-        getFillColor: [255, 140, 0],
-        getLineColor: [0, 0, 0,]
-    });
-
     return (
         <MapGL
             mapLib={maplibre}
@@ -81,8 +60,8 @@ function BadassMap(): JSX.Element {
             viewport={viewport()}
             onViewportChange={(evt: Viewport) => setViewport(evt)}
         >
-            <Layer customLayer={arcLayer} />
-            <Layer customLayer={scatterplotLayer} />
+            <MapScatLayer data={SCAT_DATA} />
+            <MapArcLayer data={ARC_DATA} />
 
             <Marker
                 lngLat={FANEUIL_HALL}
diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx
new file mode 100644
index 0000000..1c8a03a
--- /dev/null
+++ b/lightning/src/components/MapArcLayer.tsx
@@ -0,0 +1,28 @@
+import { ArcLayer } from '@deck.gl/layers/typed';
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { Layer } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
+
+
+function MapArcLayer(props): JSX.Element {
+
+    const arcLayer = new MapboxLayer({
+        id: 'deckgl-arc',
+        type: ArcLayer,
+        data: props.data,
+        getSourcePosition: (d: any) => d.source,
+        getTargetPosition: (d: any) => d.target,
+        getSourceColor: [200, 0, 0],
+        getTargetColor: [0, 230, 0],
+        getWidth: 6,
+    });
+
+    return (
+        <>
+            <Layer customLayer={arcLayer} />
+        </>
+    );
+};
+
+export default MapArcLayer;
diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx
index d923c1d..14e65b2 100644
--- a/lightning/src/components/MapScatLayer.tsx
+++ b/lightning/src/components/MapScatLayer.tsx
@@ -1,7 +1,26 @@
 import { ScatterplotLayer } from '@deck.gl/layers/typed';
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { Layer } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
+
 
 function MapScatLayer(props): JSX.Element {
 
-}
+    const scatterplotLayer = new MapboxLayer({
+        id: 'deckgl-scatterplot',
+        type: ScatterplotLayer,
+        data: props.data,
+        getPosition: (d: any) => d.coordinates,
+        getRadius: 30,
+        getFillColor: [255, 140, 0],
+        getLineColor: [0, 0, 0,]
+    });
+    return (
+        <>
+            <Layer customLayer={scatterplotLayer} />
+        </>
+    );
+};
 
 export default MapScatLayer;