diff --git a/packages/freesewing.shared/components/icons/filter.js b/packages/freesewing.shared/components/icons/filter.js
new file mode 100644
index 00000000000..b01ff2b564a
--- /dev/null
+++ b/packages/freesewing.shared/components/icons/filter.js
@@ -0,0 +1,7 @@
+const FilterIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+  </svg>
+)
+
+export default FilterIcon
diff --git a/packages/freesewing.shared/components/workbench/draft/part/index.js b/packages/freesewing.shared/components/workbench/draft/part/index.js
index 33223f84cbe..3b46d52e931 100644
--- a/packages/freesewing.shared/components/workbench/draft/part/index.js
+++ b/packages/freesewing.shared/components/workbench/draft/part/index.js
@@ -3,65 +3,28 @@ import Point from '../point'
 import Snippet from '../snippet'
 import { getProps } from '../utils'
 
-const raiseEvent = (evt) => console.log('raiseEVent not implemtned', evt)
+const XrayPart = props => {
+  // Don't bother if this is the only part on display
+  if (props.gist.only && props.gist.only.length === 1) return null
+  const i = Object.keys(props.gist.xray?.reveal).indexOf(props.partName)%10
+  const { topLeft, bottomRight } = props.part
+
+  return (
+    <g>
+      <path d={`
+        M ${topLeft.x} ${topLeft.y}
+        L ${topLeft.x} ${bottomRight.y}
+        L ${bottomRight.x} ${bottomRight.y}
+        L ${bottomRight.x} ${topLeft.y}
+        z`} className={`fill-color-${i} opacity-10`} />
+    </g>
+  )
+}
 
 const Part = props => {
   const { partName, part, app, gist, updateGist } = props
 
-  const focusPoint = (point, i) => {
-    const p = part.points[point]
-    const pathString = `M ${p.x} ${part.topLeft.y} `
-      + `L ${p.x} ${part.bottomRight.y} `
-      + `M ${part.topLeft.x} ${p.y} `
-      + `L ${part.bottomRight.x} ${p.y} `
-    const classes = 'focus point c' + (i % 8) // Cycle through 8 colors
-    return (
-      <React.Fragment key={'fp' + point}>
-        <path d={pathString} className={classes} />
-        <circle
-          cx={p.x}
-          cy={p.y}
-          r="5"
-          className="contrast"
-          onClick={() =>
-            raiseEvent('clearFocus', {
-              part: partName,
-              type: 'points',
-              name: point
-            })
-          }
-        />
-      </React.Fragment>
-    )
-  }
-
-  const focusCoords = (p, i) => {
-    let pathString = `M ${p.x} ${part.topLeft.y} `
-    pathString += `L ${p.x} ${part.bottomRight.y} `
-    pathString += `M ${part.topLeft.x} ${p.y} `
-    pathString += `L ${part.bottomRight.x} ${p.y} `
-    let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
-    return (
-      <React.Fragment key={'cp' + i}>
-        <path d={pathString} className={classes} />
-        <circle
-          cx={p.x}
-          cy={p.y}
-          r="5"
-          className={classes}
-          onClick={() =>
-            raiseEvent('clearFocus', {
-              partName: partName,
-              type: 'coords',
-              data: p
-            })
-          }
-        />
-      </React.Fragment>
-    )
-  }
-
-  let grid = gist.paperless ? (
+  const grid = gist.paperless ? (
     <rect
       x={part.topLeft.x}
       y={part.topLeft.y}
@@ -72,36 +35,10 @@ const Part = props => {
     />
   ) : null
 
-  let focus = []
-  //if (gist.debug) {
-  //  if (focus && typeof props.focus[props.name] !== 'undefined') {
-  //    for (let i in props.focus[props.name].points)
-  //      focus.push(focusPoint(props.focus[props.name].points[i], i))
-  //    for (let i in props.focus[props.name].paths) {
-  //      let name = props.focus[props.name].paths[i]
-  //      focus.push(
-  //        <path
-  //          key={'fpa-' + name}
-  //          d={props.part.paths[name].asPathstring()}
-  //          className={'focus path c' + (i % 4)}
-  //          onClick={() =>
-  //            props.raiseEvent('clearFocus', {
-  //              part: props.name,
-  //              type: 'paths',
-  //              name
-  //            })
-  //          }
-  //        />
-  //      )
-  //    }
-  //    for (let i in props.focus[props.name].coords)
-  //      focus.push(focusCoords(props.focus[props.name].coords[i], i))
-  //  }
-  //}
-
   return (
     <g {...getProps(part)} id={`part-${partName}`}>
       {grid}
+      {props.gist?.xray?.reveal?.[partName] && <XrayPart {...props} />}
       {Object.keys(part.paths).map((pathName) => (
         <Path
           key={name}
diff --git a/packages/freesewing.shared/components/workbench/draft/point/index.js b/packages/freesewing.shared/components/workbench/draft/point/index.js
index f717a02e0c7..5a9b1372bc5 100644
--- a/packages/freesewing.shared/components/workbench/draft/point/index.js
+++ b/packages/freesewing.shared/components/workbench/draft/point/index.js
@@ -1,6 +1,29 @@
 import Text from '../text'
 import Circle from '../circle'
 
+const RevealPoint = props => {
+  const r = 15 * props.gist.scale
+  const { x, y } = props.point
+  const { topLeft, bottomRight } = props.part
+  const i = Object.keys(props.gist.xray.reveal[props.partName].points).indexOf(props.pointName)%10
+  const classes = `stroke-sm stroke-color-${i} stroke-dashed`
+  return (
+    <g>
+      <circle
+        cx={x}
+        cy={y}
+        r={r}
+        className={classes}
+    />
+    <path d={`
+      M ${x} ${topLeft.y} L ${x} ${y - r}
+      m 0 ${2*r} L ${x} ${bottomRight.y}
+      M ${topLeft.x} ${y} L ${x - r} ${y}
+      m ${2*r} 0 L ${bottomRight.x} ${y}`} className={classes} />
+    </g>
+  )
+    }
+
 const XrayPoint = props => (
   <g>
     <circle
@@ -23,9 +46,11 @@ const XrayPoint = props => (
 
 
 const Point = props => {
-  const { point, pointName } = props
+  const { point, pointName, partName, gist } = props
   const output = []
-  if (props.gist.xray) output.push(<XrayPoint {...props} key={'xp-' + pointName} />)
+  if (gist.xray) output.push(<XrayPoint {...props} key={'xp-' + pointName} />)
+  if (gist.xray?.reveal?.[partName]?.points?.[pointName])
+    output.push(<RevealPoint {...props} key={'rp-' + pointName} />)
   if (point.attributes && point.attributes.get('data-text'))
     output.push(<Text {...props} key={'point-' + pointName} />)
   if (point.attributes && point.attributes.get('data-circle'))
diff --git a/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js b/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
index d07da357a0c..1bbad0802e3 100644
--- a/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
+++ b/packages/freesewing.shared/components/workbench/draft/svg-wrapper.js
@@ -29,7 +29,10 @@ const SvgWrapper = props => {
   const { patternProps, gist, app, updateGist, unsetGist } = props
 
   return <SizeMe>{({ size }) => (
-    <TransformWrapper>
+    <TransformWrapper
+      minScale={0.1}
+      centerZoomedOut={true}
+    >
       <TransformComponent>
         <div style={{ width: size.width+'px', }}>
           <Svg {...patternProps} embed={gist.embed}>
diff --git a/packages/freesewing.shared/components/workbench/menu/index.js b/packages/freesewing.shared/components/workbench/menu/index.js
index fdc04f33261..0d2b5dd2e1f 100644
--- a/packages/freesewing.shared/components/workbench/menu/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/index.js
@@ -5,7 +5,11 @@ import CoreSettings from './core-settings'
 import Xray from './xray'
 
 export const Ul = props => <ul className="pl-5 list-inside">{props.children}</ul>
-export const Li = props => <li className="flex flex-row">{props.children}</li>
+export const Li = props => (
+  <li className="flex flex-row hover:border-r-2 hover:border-r-secondary">
+    {props.children}
+  </li>
+)
 export const Details = props => (
   <details className="grow" open={props.open || false}>
     {props.children}
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/list.js b/packages/freesewing.shared/components/workbench/menu/xray/list.js
index 65a109c445a..3fdcd1f4936 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/list.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/list.js
@@ -1,5 +1,6 @@
 import { Chevron } from 'shared/components/navigation/primary.js'
 import ClearIcon from 'shared/components/icons/clear.js'
+import FilterIcon from 'shared/components/icons/filter.js'
 import SearchIcon from 'shared/components/icons/search.js'
 import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
 import Path from './path.js'
@@ -17,6 +18,13 @@ const XrayList = props => {
 
   const part = props.gist.xray.parts[props.partName]
 
+  // Is this the only part on display?
+  const only = (
+    props.gist.only &&
+    props.gist.only.length === 1 &&
+    props.gist.only[0] === props.partName
+  )
+
   return (
     <Li>
       <Details>
@@ -26,6 +34,16 @@ const XrayList = props => {
             <span>{title}</span>
             <span className="ml-2 opacity-60">[{props.partName}]</span>
           </SumDiv>
+          <button
+            className={`px-3 hover:text-secondary-focus ${only ? 'text-accent' : 'text-secondary'}`}
+            title={props.app.t('app.filter')}
+            onClick={only
+              ? () => props.unsetGist(['only'])
+              : () => props.updateGist(['only'], [props.partName])
+            }
+          >
+            <FilterIcon />
+          </button>
           <button
             className="text-accent px-3 hover:text-secondary-focus"
             onClick={() => props.unsetGist(['xray', 'parts', props.partName])}
@@ -62,11 +80,11 @@ const XrayList = props => {
                             </SumDiv>
                             <button
                               className={`px-3 hover:text-secondary-focus"
-                                ${props.gist.xray.reveal[props.partName][type][id]
+                                ${props.gist?.xray?.reveal?.[props.partName]?.[type]?.[id]
                                   ? 'text-accent'
                                   : 'text-secondary'
                                 }`}
-                              onClick={props.gist.xray.reveal[props.partName][type][id]
+                              onClick={props.gist.xray?.reveal?.[props.partName]?.[type]?.[id]
                                 ? () => props.unsetGist(
                                   ['xray', 'reveal', props.partName, type, id]
                                 )
@@ -80,7 +98,10 @@ const XrayList = props => {
                             </button>
                             <button
                               className="text-accent px-3 hover:text-secondary-focus"
-                              onClick={() => props.unsetGist(['xray', 'parts', props.partName, type, id])}
+                              onClick={() => {
+                                props.unsetGist(['xray', 'parts', props.partName, type, id])
+                                props.unsetGist(['xray', 'reveal', props.partName, type, id])
+                              }}
                             >
                               <ClearIcon />
                             </button>
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index 4d219e87d17..d978f6f16eb 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -106,6 +106,66 @@
   svg.freesewing.pattern tspan.fill-note,
   svg.freesewing.pattern path.fill-note,
   svg.freesewing.pattern circle.fill-note { @apply fs-fill-note }
+  .fs-stroke-color-0 { stroke: var(--pattern-color-0); }
+  .fs-stroke-color-1 { stroke: var(--pattern-color-1); }
+  .fs-stroke-color-2 { stroke: var(--pattern-color-2); }
+  .fs-stroke-color-3 { stroke: var(--pattern-color-3); }
+  .fs-stroke-color-4 { stroke: var(--pattern-color-4); }
+  .fs-stroke-color-5 { stroke: var(--pattern-color-5); }
+  .fs-stroke-color-6 { stroke: var(--pattern-color-6); }
+  .fs-stroke-color-7 { stroke: var(--pattern-color-7); }
+  .fs-stroke-color-8 { stroke: var(--pattern-color-8); }
+  .fs-stroke-color-9 { stroke: var(--pattern-color-9); }
+  svg.freesewing.pattern circle.stroke-color-0,
+  svg.freesewing.pattern path.stroke-color-0 { @apply fs-stroke-color-0 }
+  svg.freesewing.pattern circle.stroke-color-1,
+  svg.freesewing.pattern path.stroke-color-1 { @apply fs-stroke-color-1 }
+  svg.freesewing.pattern circle.stroke-color-2,
+  svg.freesewing.pattern path.stroke-color-2 { @apply fs-stroke-color-2 }
+  svg.freesewing.pattern circle.stroke-color-3,
+  svg.freesewing.pattern path.stroke-color-3 { @apply fs-stroke-color-3 }
+  svg.freesewing.pattern circle.stroke-color-4,
+  svg.freesewing.pattern path.stroke-color-4 { @apply fs-stroke-color-4 }
+  svg.freesewing.pattern circle.stroke-color-5,
+  svg.freesewing.pattern path.stroke-color-5 { @apply fs-stroke-color-5 }
+  svg.freesewing.pattern circle.stroke-color-6,
+  svg.freesewing.pattern path.stroke-color-6 { @apply fs-stroke-color-6 }
+  svg.freesewing.pattern circle.stroke-color-7,
+  svg.freesewing.pattern path.stroke-color-7 { @apply fs-stroke-color-7 }
+  svg.freesewing.pattern circle.stroke-color-8,
+  svg.freesewing.pattern path.stroke-color-8 { @apply fs-stroke-color-8 }
+  svg.freesewing.pattern circle.stroke-color-9,
+  svg.freesewing.pattern path.stroke-color-9 { @apply fs-stroke-color-9 }
+  .fs-fill-color-0 { fill: var(--pattern-color-0); }
+  .fs-fill-color-1 { fill: var(--pattern-color-1); }
+  .fs-fill-color-2 { fill: var(--pattern-color-2); }
+  .fs-fill-color-3 { fill: var(--pattern-color-3); }
+  .fs-fill-color-4 { fill: var(--pattern-color-4); }
+  .fs-fill-color-5 { fill: var(--pattern-color-5); }
+  .fs-fill-color-6 { fill: var(--pattern-color-6); }
+  .fs-fill-color-7 { fill: var(--pattern-color-7); }
+  .fs-fill-color-8 { fill: var(--pattern-color-8); }
+  .fs-fill-color-9 { fill: var(--pattern-color-9); }
+  svg.freesewing.pattern circle.fill-color-0,
+  svg.freesewing.pattern path.fill-color-0 { @apply fs-fill-color-0 }
+  svg.freesewing.pattern circle.fill-color-1,
+  svg.freesewing.pattern path.fill-color-1 { @apply fs-fill-color-1 }
+  svg.freesewing.pattern circle.fill-color-2,
+  svg.freesewing.pattern path.fill-color-2 { @apply fs-fill-color-2 }
+  svg.freesewing.pattern circle.fill-color-3,
+  svg.freesewing.pattern path.fill-color-3 { @apply fs-fill-color-3 }
+  svg.freesewing.pattern circle.fill-color-4,
+  svg.freesewing.pattern path.fill-color-4 { @apply fs-fill-color-4 }
+  svg.freesewing.pattern circle.fill-color-5,
+  svg.freesewing.pattern path.fill-color-5 { @apply fs-fill-color-5 }
+  svg.freesewing.pattern circle.fill-color-6,
+  svg.freesewing.pattern path.fill-color-6 { @apply fs-fill-color-6 }
+  svg.freesewing.pattern circle.fill-color-7,
+  svg.freesewing.pattern path.fill-color-7 { @apply fs-fill-color-7 }
+  svg.freesewing.pattern circle.fill-color-8,
+  svg.freesewing.pattern path.fill-color-8 { @apply fs-fill-color-8 }
+  svg.freesewing.pattern circle.fill-color-9,
+  svg.freesewing.pattern path.fill-color-9 { @apply fs-fill-color-9 }
 
   .fs-fill-bg { fill: var(--pattern-bg); }
   .fs-fill-current { fill: currentColor; }
diff --git a/packages/freesewing.shared/themes/light.js b/packages/freesewing.shared/themes/light.js
index c7488dece5e..7a94464334e 100644
--- a/packages/freesewing.shared/themes/light.js
+++ b/packages/freesewing.shared/themes/light.js
@@ -194,22 +194,26 @@ module.exports = {
   // Color for noting things on a pattern
   '--pattern-note': colors.violet['500'],
 
-  // Color 0 in develop mode
-  '--pattern-dev-0': colors.red['500'],
-  // Color 1 in develop mode
-  '--pattern-dev-1': colors.green['500'],
-  // Color 2 in develop mode
-  '--pattern-dev-2': colors.blue['500'],
-  // Color 3 in develop mode
-  '--pattern-dev-3': colors.yellow['500'],
-  // Color 4 in develop mode
-  '--pattern-dev-4': colors.pink['500'],
-  // Color 5 in develop mode
-  '--pattern-dev-5': colors.violet['500'],
-  // Color 6 in develop mode
-  '--pattern-dev-6': colors.teal['500'],
-  // Color 7 in develop mode
-  '--pattern-dev-7': colors.neutral['500'],
+  // Color 0 in xray reveals
+  '--pattern-color-0': colors.red['500'],
+  // Color 1 in xray reveals
+  '--pattern-color-1': colors.green['500'],
+  // Color 2 in xray reveals
+  '--pattern-color-2': colors.blue['500'],
+  // Color 3 in xray reveals
+  '--pattern-color-3': colors.yellow['500'],
+  // Color 4 in xray reveals
+  '--pattern-color-4': colors.pink['500'],
+  // Color 5 in xray reveals
+  '--pattern-color-5': colors.violet['500'],
+  // Color 6 in xray reveals
+  '--pattern-color-6': colors.teal['500'],
+  // Color 7 in xray reveals
+  '--pattern-color-7': colors.amber['500'],
+  // Color 8 in xray reveals
+  '--pattern-color-8': colors.fuchsia['500'],
+  // Color 9 in xray reveals
+  '--pattern-color-9': colors.cyan['500'],
 
   // Pattern xs text size
   '--pattern-text-xs': '0.2rem',