diff --git a/src/assets.js b/src/assets.js
index 5862e059..0ebdd4a5 100644
--- a/src/assets.js
+++ b/src/assets.js
@@ -218,6 +218,10 @@ function buildAssetHTML(assetUrl, categories) {
         <a-mixin shadow id="street-element-traffic-island" scale="1.5 1.5 1.5" rotation="0 0 0" gltf-model="url(${assetUrl}sets/uoregon/gltf-exports/draco/curb-traffic-island.glb)"></a-mixin>
         <a-mixin shadow id="street-element-speed-hump" scale="1.5 1.5 1.5" rotation="0 0 0" gltf-model="url(${assetUrl}sets/uoregon/gltf-exports/draco/speed-hump.glb)"></a-mixin>
         <a-mixin shadow id="crosswalk-zebra-box" geometry="primitive: box; height: 0.1; width: 2; depth: 10" material="src: url(${assetUrl}materials/markings-crosswalk.png)"></a-mixin>
+        <a-mixin shadow id="crosswalk-rainbow" geometry="primitive: plane; width:2; height:12; skipCache: true;" material="src:${assetUrl}materials/crosswalk-rainbow.png; transparent: true;"></a-mixin>
+        <a-mixin shadow id="crosswalk-double" geometry="primitive: plane; width:2; height:12; skipCache: true;" material="src:${assetUrl}materials/crosswalk-double.png; transparent: true;"></a-mixin>
+        <a-mixin shadow id="crosswalk-mural" geometry="primitive: plane; width:2; height:12; skipCache: true;" material="src:${assetUrl}materials/crosswalk-mural.png; transparent: true;"></a-mixin>
+        <a-mixin shadow id="crosswalk-piano" geometry="primitive: plane; width:2; height:12; skipCache: true;" material="src:${assetUrl}materials/crosswalk-piano.png; transparent: true;"></a-mixin>
         <a-mixin shadow id="traffic-calming-bumps" gltf-model="url(${assetUrl}sets/uoregon/gltf-exports/draco/traffic-calming-bumps.glb)"></a-mixin>
         <a-mixin shadow id="corner-island" gltf-model="url(${assetUrl}sets/uoregon/gltf-exports/draco/corner-island.glb)"></a-mixin>
         `,
diff --git a/src/components/intersection.js b/src/components/intersection.js
index 4acf6f71..ae48aea2 100644
--- a/src/components/intersection.js
+++ b/src/components/intersection.js
@@ -1,5 +1,40 @@
 import * as THREE from 'three';
 
+export const CROSSWALKS = {
+  none: 0,
+  'crosswalk-zebra': 1,
+  'street-element-crosswalk-raised': 2,
+  'crosswalk-rainbow': 3,
+  'crosswalk-double': 4,
+  'crosswalk-mural': 5,
+  'crosswalk-piano': 6
+};
+export const CROSSWALKS_REV = {};
+Object.keys(CROSSWALKS).forEach((key) => {
+  CROSSWALKS_REV[CROSSWALKS[key]] = key;
+});
+
+const transformImageCrosswalk = (entity, length, rotZ) => {
+  entity.setAttribute('rotation', { x: 0, y: 0, z: rotZ });
+  entity.setAttribute('scale', { x: 1.5, y: length / 12, z: 1 });
+};
+
+const CROSSWALK_TRANSFORMS = {
+  none: function () {},
+  'crosswalk-zebra': (entity, length, rotZ) => {
+    entity.setAttribute('rotation', { x: 0, y: 0, z: rotZ });
+    entity.setAttribute('scale', { x: 1, y: length / 12, z: 1 });
+  },
+  'street-element-crosswalk-raised': (entity, length, rotX) => {
+    entity.setAttribute('rotation', { x: rotX, y: 90, z: 90 });
+    entity.setAttribute('scale', { x: length / 7, y: 1, z: 1.5 });
+  },
+  'crosswalk-rainbow': transformImageCrosswalk,
+  'crosswalk-double': transformImageCrosswalk,
+  'crosswalk-mural': transformImageCrosswalk,
+  'crosswalk-piano': transformImageCrosswalk
+};
+
 /* global AFRAME */
 AFRAME.registerComponent('intersection', {
   schema: {
@@ -41,7 +76,7 @@ AFRAME.registerComponent('intersection', {
     const trafficsignalArray = data.trafficsignal
       .split(' ')
       .map((i) => Number(i));
-    const crosswalklArray = data.crosswalk.split(' ').map((i) => Number(i));
+    const crosswalkArray = data.crosswalk.split(' ').map((i) => Number(i));
 
     const intersectWidth = dimensionsArray[0];
     const intersectDepth = dimensionsArray[1];
@@ -399,52 +434,52 @@ AFRAME.registerComponent('intersection', {
       }
     });
 
-    if (crosswalklArray[0]) {
+    if (crosswalkArray[0]) {
       const cw1 = document.createElement('a-entity');
       cw1.setAttribute('position', { x: -intersectWidth / 2 + 2, z: 0.11 });
-      cw1.setAttribute('rotation', { x: 0, y: 0, z: 180 });
-      cw1.setAttribute('scale', { y: intersectDepth / 12 });
-      cw1.setAttribute('mixin', 'markings crosswalk-zebra');
+      cw1.setAttribute('mixin', CROSSWALKS_REV[crosswalkArray[0]]);
       cw1.setAttribute('data-layer-name', 'Crosswalk • West');
       cw1.setAttribute('data-no-transform', '');
       cw1.setAttribute('data-ignore-raycaster', '');
       cw1.classList.add('autocreated');
+      const transform = CROSSWALK_TRANSFORMS[CROSSWALKS_REV[crosswalkArray[0]]];
+      transform && transform(cw1, intersectDepth, 180);
       el.appendChild(cw1);
     }
-    if (crosswalklArray[1]) {
+    if (crosswalkArray[1]) {
       const cw2 = document.createElement('a-entity');
       cw2.setAttribute('position', { x: intersectWidth / 2 - 2, z: 0.11 });
-      cw2.setAttribute('rotation', { x: 0, y: 0, z: 180 });
-      cw2.setAttribute('scale', { y: intersectDepth / 12 });
-      cw2.setAttribute('mixin', 'markings crosswalk-zebra');
+      cw2.setAttribute('mixin', CROSSWALKS_REV[crosswalkArray[1]]);
       cw2.setAttribute('data-layer-name', 'Crosswalk • East');
       cw2.setAttribute('data-no-transform', '');
       cw2.setAttribute('data-ignore-raycaster', '');
       cw2.classList.add('autocreated');
+      const transform = CROSSWALK_TRANSFORMS[CROSSWALKS_REV[crosswalkArray[1]]];
+      transform && transform(cw2, intersectDepth, 180);
       el.appendChild(cw2);
     }
-    if (crosswalklArray[2]) {
+    if (crosswalkArray[2]) {
       const cw3 = document.createElement('a-entity');
       cw3.setAttribute('position', { y: intersectDepth / 2 - 2, z: 0.11 });
-      cw3.setAttribute('rotation', { x: 0, y: 0, z: 90 });
-      cw3.setAttribute('scale', { y: intersectWidth / 12 });
-      cw3.setAttribute('mixin', 'markings crosswalk-zebra');
+      cw3.setAttribute('mixin', CROSSWALKS_REV[crosswalkArray[2]]);
       cw3.setAttribute('data-layer-name', 'Crosswalk • North');
       cw3.setAttribute('data-no-transform', '');
       cw3.setAttribute('data-ignore-raycaster', '');
       cw3.classList.add('autocreated');
+      const transform = CROSSWALK_TRANSFORMS[CROSSWALKS_REV[crosswalkArray[2]]];
+      transform && transform(cw3, intersectWidth, 90);
       el.appendChild(cw3);
     }
-    if (crosswalklArray[3]) {
+    if (crosswalkArray[3]) {
       const cw4 = document.createElement('a-entity');
       cw4.setAttribute('position', { y: -intersectDepth / 2 + 2, z: 0.11 });
       cw4.setAttribute('data-layer-name', 'Crosswalk • South');
       cw4.setAttribute('data-no-transform', '');
       cw4.setAttribute('data-ignore-raycaster', '');
-      cw4.setAttribute('rotation', { x: 0, y: 0, z: 90 });
-      cw4.setAttribute('scale', { y: intersectWidth / 12 });
-      cw4.setAttribute('mixin', 'markings crosswalk-zebra');
+      cw4.setAttribute('mixin', CROSSWALKS_REV[crosswalkArray[3]]);
       cw4.classList.add('autocreated');
+      const transform = CROSSWALK_TRANSFORMS[CROSSWALKS_REV[crosswalkArray[3]]];
+      transform && transform(cw4, intersectWidth, 90);
       el.appendChild(cw4);
     }
   },
diff --git a/src/editor/components/components/IntersectionSidebar.js b/src/editor/components/components/IntersectionSidebar.js
index 1f346a43..dc7ce4d6 100644
--- a/src/editor/components/components/IntersectionSidebar.js
+++ b/src/editor/components/components/IntersectionSidebar.js
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import SelectWidget from '../widgets/SelectWidget';
 import NumberWidget from '../widgets/NumberWidget';
-import BooleanWidget from '../widgets/BooleanWidget';
+import { CROSSWALKS, CROSSWALKS_REV } from '../../../components/intersection';
 
 const IntersectionSidebar = ({ entity }) => {
   const intersectionData = entity.getAttribute('intersection');
@@ -147,13 +147,14 @@ const IntersectionSidebar = ({ entity }) => {
           </div>
           <div className="propertyRow">
             <label className="text">Crosswalk:</label>
-            <BooleanWidget
+
+            <SelectWidget
               name="crosswalk"
-              componentname="crosswalk"
-              value={crosswalkArray[index] === 1}
+              options={Object.keys(CROSSWALKS)}
+              value={CROSSWALKS_REV[crosswalkArray[index]]}
               onChange={(name, value) => {
                 const newCrosswalkArray = [...crosswalkArray];
-                newCrosswalkArray[index] = value ? 1 : 0;
+                newCrosswalkArray[index] = CROSSWALKS[value];
                 setCrosswalkArray(newCrosswalkArray);
                 updateEntity(
                   'intersection',
@@ -161,7 +162,7 @@ const IntersectionSidebar = ({ entity }) => {
                   newCrosswalkArray.join(' ')
                 );
               }}
-            />
+            ></SelectWidget>
           </div>
           <div className="propertyRow">
             <label className="text">Sidewalk:</label>