diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index afb6bf42..0316b275 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/workspaces/circular-sequence/src/Article/index.tsx b/workspaces/circular-sequence/src/Article/index.tsx
index ec46cdd3..3c3c0edf 100644
--- a/workspaces/circular-sequence/src/Article/index.tsx
+++ b/workspaces/circular-sequence/src/Article/index.tsx
@@ -134,8 +134,8 @@ let seq_2: Sequence = [6, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0];
             id="get-length"
             description="Implementation to return the actual length of a sequence"
             language="rust"
-            startLineNumber={7}
-            endLineNumber={23}
+            startLineNumber={10}
+            endLineNumber={26}
           >
             {fileContentsSequence}
           </ArticleFigCodeBlock>
@@ -271,8 +271,8 @@ let seq_2: Sequence = [6, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0];
             id="is-symmetrical"
             description="Implementation to retrieve the starting index of the reverse sequence if it exists"
             language="rust"
-            startLineNumber={25}
-            endLineNumber={61}
+            startLineNumber={28}
+            endLineNumber={64}
           >
             {fileContentsSequence}
           </ArticleFigCodeBlock>
diff --git a/workspaces/circular-sequence/src/index.ts b/workspaces/circular-sequence/src/index.ts
index 29259438..16d085ab 100644
--- a/workspaces/circular-sequence/src/index.ts
+++ b/workspaces/circular-sequence/src/index.ts
@@ -8,7 +8,7 @@ export const meta: Project = {
   id: ProjectKey.circular_sequence,
   name: 'Matching symmetric circular sequences with Knuth-Morris-Pratt (KMP)',
   description:
-    'identifying and comparing unique geometric shape arrangements without a defined start or endpoint using the Knuth-Morris-Pratt algorithm in Rust.',
+    'Identifying and comparing unique geometric shape arrangements without a defined start or endpoint using the Knuth-Morris-Pratt algorithm in Rust.',
   image,
   tags: ['algorithms', 'data structures', 'sequences', 'rust'],
   deploy: true,
diff --git a/workspaces/common/src/ProjectPage/ProjectPageLink.tsx b/workspaces/common/src/ProjectPage/ProjectPageLink.tsx
index c7478633..8f43b410 100644
--- a/workspaces/common/src/ProjectPage/ProjectPageLink.tsx
+++ b/workspaces/common/src/ProjectPage/ProjectPageLink.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'preshape';
+import { Link, LinkProps } from 'preshape';
 import { Project } from '../types';
 import { getProjectRoutePath } from '../utils';
 
@@ -6,7 +6,7 @@ type Props = {
   project: Project;
 };
 
-export default function ProjectPageLink({ project }: Props) {
+export default function ProjectPageLink({ project }: Props & LinkProps) {
   return (
     <Link to={getProjectRoutePath(project)} underline>
       '{project.name}'
diff --git a/workspaces/common/src/ProjectPage/ProjectPageWIP.tsx b/workspaces/common/src/ProjectPage/ProjectPageWIP.tsx
new file mode 100644
index 00000000..3118bb97
--- /dev/null
+++ b/workspaces/common/src/ProjectPage/ProjectPageWIP.tsx
@@ -0,0 +1,15 @@
+import { Box, BoxProps } from 'preshape';
+import { useProjectPageContext } from '..';
+import ProjectPageHeader from './ProjectPageHeader';
+
+type ProjectPageWIPProps = BoxProps;
+
+export default function ProjectPageWIP(props: ProjectPageWIPProps) {
+  const {} = useProjectPageContext();
+
+  return (
+    <Box {...props} flex="vertical" grow maxWidth="800px">
+      <ProjectPageHeader />
+    </Box>
+  );
+}
diff --git a/workspaces/common/src/index.ts b/workspaces/common/src/index.ts
index 29580f17..52588cfe 100644
--- a/workspaces/common/src/index.ts
+++ b/workspaces/common/src/index.ts
@@ -30,6 +30,7 @@ export {
   default as ProjectPage,
   type ProjectPageProps,
 } from './ProjectPage/ProjectPage';
+export { default as ProjectPageWIP } from './ProjectPage/ProjectPageWIP';
 export { default as ProjectPageLink } from './ProjectPage/ProjectPageLink';
 export { default as ProjectPageProvider } from './ProjectPage/ProjectPageProvider';
 export { useProjectPageContext } from './ProjectPage/useProjectPageContext';
diff --git a/workspaces/common/src/types.ts b/workspaces/common/src/types.ts
index 726ead20..4dcb836e 100644
--- a/workspaces/common/src/types.ts
+++ b/workspaces/common/src/types.ts
@@ -5,6 +5,7 @@ export enum ProjectKey {
   circle_art = 'circle-art',
   circle_intersections = 'circle-intersections',
   circular_sequence = 'circular-sequence',
+  gap_validation = 'gap-validation',
   evolution = 'evolution',
   line_segment_extending = 'line-segment-extending',
   snake = 'snake',
diff --git a/workspaces/gap-validation/package.json b/workspaces/gap-validation/package.json
new file mode 100644
index 00000000..f1efc342
--- /dev/null
+++ b/workspaces/gap-validation/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@hogg/gap-validation",
+  "version": "0.0.0",
+  "author": "Harry Hogg <harry@hogg.io>",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types.ts"
+  },
+  "dependencies": {
+    "@hogg/common": "workspace:^",
+    "lucide-react": "0.445.0",
+    "preshape": "^19.1.5",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "typescript": "^5.0.4"
+  }
+}
diff --git a/workspaces/gap-validation/src/Article/index.tsx b/workspaces/gap-validation/src/Article/index.tsx
new file mode 100644
index 00000000..07fd2a4f
--- /dev/null
+++ b/workspaces/gap-validation/src/Article/index.tsx
@@ -0,0 +1,61 @@
+import {
+  ArticleFig,
+  ArticleFigCodeBlock,
+  ArticleFigLink,
+  ArticleFigs,
+  ArticlePage,
+  ProjectPageLink,
+} from '@hogg/common';
+import { ColorMode, TilingRenderer, meta as tilingsMeta } from '@hogg/tilings';
+import {
+  ArticleHeading,
+  ArticleParagraph,
+  ArticleSection,
+  Code,
+  Link,
+  Text,
+  sizeX12Px,
+} from 'preshape';
+
+const Article = () => {
+  return (
+    <ArticlePage>
+      <ArticleSection>
+        <ArticleHeading>Introduction</ArticleHeading>
+
+        {/* <ArticleParagraph>
+          While working on my <ProjectPageLink project={tilingsMeta} /> project,
+          I was needing to build up a list of distinct shape arrangements (
+          <ArticleFigLink fig="dodecagon-shape-arrangement" />
+          ). This needed a way to check an arrangement against a list of
+          previously seen arrangements.
+        </ArticleParagraph>
+
+        <ArticleParagraph>
+          The complexity and interesting part of this problem came because the
+          shapes could be arranged cyclicly, and there was no defined start or
+          end point. This meant that the same arrangement could be represented
+          in multiple ways. I was also dealing with an infinite amount of these
+          arrangements, and 100,000s of them every second.
+        </ArticleParagraph>
+
+        <ArticleFigs>
+          <ArticleFig
+            id="dodecagon-shape-arrangement"
+            description="Shape arrangement of a dodecagon at the center, with alternating triangles, squares and hexagons on it's edges."
+          >
+            <TilingRenderer
+              height="200px"
+              notation="12-3,4,6,4,3,4,6,4,3,4,6,4"
+              options={{
+                colorMode: ColorMode.None,
+              }}
+            />
+          </ArticleFig>
+        </ArticleFigs> */}
+      </ArticleSection>
+    </ArticlePage>
+  );
+};
+
+export default Article;
diff --git a/workspaces/gap-validation/src/Project.tsx b/workspaces/gap-validation/src/Project.tsx
new file mode 100644
index 00000000..cde27e94
--- /dev/null
+++ b/workspaces/gap-validation/src/Project.tsx
@@ -0,0 +1,6 @@
+import { ProjectPage, ProjectPageProps } from '@hogg/common';
+import Article from './Article';
+
+export default function Project(props: ProjectPageProps) {
+  return <ProjectPage {...props} article={<Article />} />;
+}
diff --git a/workspaces/gap-validation/src/index.ts b/workspaces/gap-validation/src/index.ts
new file mode 100644
index 00000000..88e749fa
--- /dev/null
+++ b/workspaces/gap-validation/src/index.ts
@@ -0,0 +1,15 @@
+import { type Project, ProjectKey } from '@hogg/common';
+
+export { default as Project } from './Project';
+
+export const meta: Project = {
+  id: ProjectKey.gap_validation,
+  name: 'Validating a tiled plane for gaps',
+  description:
+    'An approach for checking a tiled plane for gaps by ensure there is a single continuous perimeter.',
+  tags: ['algorithms', 'data structures', 'sequences', 'rust'],
+  deploy: false,
+  wip: true,
+  created: '2024-03-17',
+  updated: '2024-04-10',
+};
diff --git a/workspaces/tilings/package.json b/workspaces/tilings/package.json
index 8700d2bd..86aba995 100644
--- a/workspaces/tilings/package.json
+++ b/workspaces/tilings/package.json
@@ -20,7 +20,10 @@
     "generate:results": "cargo run  --release --bin tiling-searcher -- --reset --log-to-file"
   },
   "dependencies": {
+    "@hogg/circular-sequence": "workspace:^",
     "@hogg/common": "workspace:^",
+    "@hogg/gap-validation": "workspace:^",
+    "@hogg/spatial-grid-map": "workspace:^",
     "@hogg/wasm": "workspace:^",
     "@visx/axis": "^3.5.0",
     "@visx/curve": "^3.3.0",
diff --git a/workspaces/tilings/src-rust/tiling/src/validation/flag.rs b/workspaces/tilings/src-rust/tiling/src/validation/flag.rs
index f3d9ea8c..b58111ce 100644
--- a/workspaces/tilings/src-rust/tiling/src/validation/flag.rs
+++ b/workspaces/tilings/src-rust/tiling/src/validation/flag.rs
@@ -24,10 +24,10 @@ impl Flag {
 impl From<Flag> for &'static str {
   fn from(flag: Flag) -> Self {
     match flag {
-      Flag::Overlaps => "validation_overlaps",
-      Flag::Gaps => "validation_gaps",
-      Flag::Expanded => "validation_expansion",
-      Flag::VertexTypes => "validation_vertex_types",
+      Flag::Overlaps => "validation_Overlaps",
+      Flag::Gaps => "validation_Gaps",
+      Flag::Expanded => "validation_Expanded",
+      Flag::VertexTypes => "validation_VertexTypes",
     }
   }
 }
diff --git a/workspaces/tilings/src-rust/tiling/src/validation/validator.rs b/workspaces/tilings/src-rust/tiling/src/validation/validator.rs
index c457c7af..6e82ddc2 100644
--- a/workspaces/tilings/src-rust/tiling/src/validation/validator.rs
+++ b/workspaces/tilings/src-rust/tiling/src/validation/validator.rs
@@ -117,7 +117,7 @@ impl Validator {
 
     loop {
       let mid_point: (f64, f64) = current_line_segment.mid_point().into();
-      let near_by = line_segments.iter_values_around(&mid_point, 3);
+      let near_by = line_segments.iter_values_around(&mid_point, 1);
 
       let mut found = false;
 
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/ArrangementStats.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/ArrangementStats.tsx
index 708cb50a..b78b1c0c 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/ArrangementStats.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/ArrangementStats.tsx
@@ -2,6 +2,7 @@ import { Box } from 'preshape';
 import ArrangementStatsProvider from './ArrangementStatsProvider';
 import PolygonsBreakdown from './PolygonsBreakdown';
 import TotalDurationBreakdown from './TotalDurationBreakdown';
+import ValidationDurationBreakdown from './ValidationDurationBreakdown';
 
 export default function ArrangementStats() {
   return (
@@ -9,6 +10,7 @@ export default function ArrangementStats() {
       <Box flex="vertical" gap="x10">
         <TotalDurationBreakdown />
         <PolygonsBreakdown />
+        <ValidationDurationBreakdown />
       </Box>
     </ArrangementStatsProvider>
   );
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBar.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBar.tsx
index 1a37408f..25cd46d9 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBar.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBar.tsx
@@ -1,10 +1,8 @@
 import { Point, SvgLabelsProvider } from '@hogg/common';
 import { Box, BoxProps, useResizeObserver } from 'preshape';
 import BreakdownBarSection from './BreakdownBarSection';
-import { barHeight } from './utils';
 
-const heightWithLabels = 50;
-const gap = barHeight * 0.5;
+const labelHeight = 46;
 
 // Even points will move to the left from half way to 0
 // Odd points will move to the right from half way to width
@@ -24,6 +22,7 @@ const toEitherSide = (count: number, width: number) => {
 };
 
 type BreakdownBarProps = BoxProps & {
+  height?: number;
   sections: {
     name?: string;
     color: string;
@@ -31,13 +30,19 @@ type BreakdownBarProps = BoxProps & {
   }[];
 };
 
-export default function BreakdownBar({ sections, ...rest }: BreakdownBarProps) {
+export default function BreakdownBar({
+  height = 6,
+  sections,
+  ...rest
+}: BreakdownBarProps) {
   const [size, ref] = useResizeObserver();
   const { width } = size;
 
+  const gap = height * 0.5;
+  const hasLabels = sections.some(({ name }) => name);
   const total = sections.reduce((acc, { value }) => acc + value, 0);
   const widths = sections.map(({ value }) =>
-    Math.max(barHeight, total ? (value / total) * width : 0)
+    Math.max(height, total ? (value / total) * width : 0)
   );
   const lefts = sections.map((_, i) =>
     widths.slice(0, i).reduce((acc, width) => acc + width + gap, 0)
@@ -47,18 +52,20 @@ export default function BreakdownBar({ sections, ...rest }: BreakdownBarProps) {
     (lefts[lefts.length - 1] ?? 0) + (widths[widths.length - 1] ?? 0);
   const offsetScaleX = width / totalWidth;
 
-  const height = sections.some(({ name }) => name)
-    ? heightWithLabels
-    : barHeight;
+  const heightWithLabels = hasLabels ? height + labelHeight : height;
 
   return (
     <Box {...rest} ref={ref}>
-      <SvgLabelsProvider width={width} height={height} getPoints={toEitherSide}>
+      <SvgLabelsProvider
+        width={width}
+        height={heightWithLabels}
+        getPoints={toEitherSide}
+      >
         <Box
           tag="svg"
-          height={height}
+          height={heightWithLabels}
           width={width}
-          viewBox={`0 0 ${width} ${height}`}
+          viewBox={`0 0 ${width} ${heightWithLabels}`}
           style={{
             shapeRendering: 'geometricPrecision',
           }}
@@ -67,6 +74,7 @@ export default function BreakdownBar({ sections, ...rest }: BreakdownBarProps) {
             <BreakdownBarSection
               color={section.color}
               first={index === 0}
+              height={height}
               key={index}
               last={index === sections.length - 1}
               name={section.name}
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBarSection.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBarSection.tsx
index 56d0fa85..0e364c5d 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBarSection.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/BreakdownBarSection.tsx
@@ -2,12 +2,13 @@ import { SvgLabel, useSvgLabelsContext } from '@hogg/common';
 import { motion } from 'framer-motion';
 import { useEffect } from 'react';
 import { formatMs } from '../../utils/formatting';
-import { barHeight } from './utils';
+import { createRectPath } from './utils';
 
 type TotalDurationBreakdownSectionProps = {
   name?: string;
   color: string;
   left: number;
+  height: number;
   width: number;
   value: number;
   first?: boolean;
@@ -18,6 +19,7 @@ export default function TotalDurationBreakdownSection({
   name,
   color,
   left,
+  height,
   width,
   value,
   first,
@@ -31,12 +33,12 @@ export default function TotalDurationBreakdownSection({
       type: 'solid',
       geometry: {
         width,
-        height: barHeight,
+        height,
         x: left,
         y: 0,
       },
     });
-  }, [registerObstacle, name, left, width]);
+  }, [registerObstacle, height, name, left, width]);
 
   return (
     <g>
@@ -60,8 +62,8 @@ export default function TotalDurationBreakdownSection({
           }
           textColor="text-shade-1"
           targetX={left + width / 2}
-          targetY={barHeight / 2}
-          offsetY={barHeight + 24}
+          targetY={height / 2}
+          offsetY={height + 24}
           lineColor="text-shade-3"
         />
       )}
@@ -70,11 +72,11 @@ export default function TotalDurationBreakdownSection({
         <motion.path
           d={createRectPath({
             width,
-            height: barHeight,
-            topLeftRadius: first ? barHeight * 0.5 : 0,
-            topRightRadius: last ? barHeight * 0.5 : 0,
-            bottomRightRadius: last ? barHeight * 0.5 : 0,
-            bottomLeftRadius: first ? barHeight * 0.5 : 0,
+            height: height,
+            topLeftRadius: first ? height * 0.5 : 0,
+            topRightRadius: last ? height * 0.5 : 0,
+            bottomRightRadius: last ? height * 0.5 : 0,
+            bottomLeftRadius: first ? height * 0.5 : 0,
           })}
           fill={color}
         />
@@ -82,57 +84,3 @@ export default function TotalDurationBreakdownSection({
     </g>
   );
 }
-
-type CreateRectPathProps = {
-  width: number;
-  height: number;
-  topLeftRadius: number;
-  topRightRadius: number;
-  bottomRightRadius: number;
-  bottomLeftRadius: number;
-};
-
-function createRectPath({
-  width,
-  height,
-  topLeftRadius,
-  topRightRadius,
-  bottomRightRadius,
-  bottomLeftRadius,
-}: CreateRectPathProps) {
-  return [
-    `M ${topLeftRadius} 0`,
-    // Draw a horizontal line to the top right corner, considering top right radius
-    `H ${width - topRightRadius}`,
-    // Draw an arc for top right corner if radius is greater than 0
-    topRightRadius > 0
-      ? `A ${topRightRadius} ${topRightRadius} 0 0 1 ${width} ${topRightRadius}`
-      : null,
-    // Draw a vertical line to the bottom right corner, considering bottom right radius
-    `V ${height - bottomRightRadius}`,
-    // Draw an arc for bottom right corner if radius is greater than 0
-    bottomRightRadius > 0
-      ? `A ${bottomRightRadius} ${bottomRightRadius} 0 0 1 ${
-          width - bottomRightRadius
-        } ${height}`
-      : null,
-    // Draw a horizontal line to the bottom left corner, considering bottom left radius
-    `H ${bottomLeftRadius}`,
-    // Draw an arc for bottom left corner if radius is greater than 0
-    bottomLeftRadius > 0
-      ? `A ${bottomLeftRadius} ${bottomLeftRadius} 0 0 1 0 ${
-          height - bottomLeftRadius
-        }`
-      : null,
-    // Draw a vertical line to the top left corner, considering top left radius
-    `V ${topLeftRadius}`,
-    // Draw an arc for top left corner if radius is greater than 0
-    topLeftRadius > 0
-      ? `A ${topLeftRadius} ${topLeftRadius} 0 0 1 ${topLeftRadius} 0`
-      : null,
-    // Close the path
-    'Z',
-  ]
-    .filter((v) => v != null)
-    .join(' ');
-}
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/utils.ts b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/utils.ts
index 45814a8d..ac7a5c08 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/utils.ts
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/BreakdownBar/utils.ts
@@ -1 +1,47 @@
 export const barHeight = 6;
+
+type CreateRectPathProps = {
+  width: number;
+  height: number;
+  topLeftRadius: number;
+  topRightRadius: number;
+  bottomRightRadius: number;
+  bottomLeftRadius: number;
+};
+
+export function createRectPath({
+  width,
+  height,
+  topLeftRadius,
+  topRightRadius,
+  bottomRightRadius,
+  bottomLeftRadius,
+}: CreateRectPathProps) {
+  function a(r: number, x: number, y: number) {
+    return r > 0 ? `A ${r} ${r} 0 0 1 ${x} ${y}` : null;
+  }
+
+  return [
+    `M ${topLeftRadius} 0`,
+    // Draw a horizontal line to the top right corner, considering top right radius
+    `H ${width - topRightRadius}`,
+    // Draw an arc for top right corner if radius is greater than 0
+    a(topRightRadius, width, topRightRadius),
+    // Draw a vertical line to the bottom right corner, considering bottom right radius
+    `V ${height - bottomRightRadius}`,
+    // Draw an arc for bottom right corner if radius is greater than 0
+    a(bottomRightRadius, width - bottomRightRadius, height),
+    // Draw a horizontal line to the bottom left corner, considering bottom left radius
+    `H ${bottomLeftRadius}`,
+    // Draw an arc for bottom left corner if radius is greater than 0
+    a(bottomLeftRadius, 0, height - bottomLeftRadius),
+    // Draw a vertical line to the top left corner, considering top left radius
+    `V ${topLeftRadius}`,
+    // Draw an arc for top left corner if radius is greater than 0
+    a(topLeftRadius, topLeftRadius, 0),
+    // Close the path
+    'Z',
+  ]
+    .filter((v) => v != null)
+    .join(' ');
+}
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/StageCards.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/StageCards.tsx
index 27994ee6..c7040820 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/StageCards.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/StageCards.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps } from 'preshape';
 
 export default function StageCards(props: BoxProps) {
-  return <Box {...props} flex="horizontal" gap="x8" />;
+  return <Box {...props} flex="vertical" gap="x8" />;
 }
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/TotalDurationBreakdown.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/TotalDurationBreakdown.tsx
index 8c66e122..df915077 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/TotalDurationBreakdown.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/TotalDurationBreakdown.tsx
@@ -18,10 +18,10 @@ export default function TotalDurationBreakdown() {
   const {
     totalDuration,
     transforms,
-    validations,
     stageDurationPlacement,
     stageDurationDraw,
     stageDurationRender,
+    stageDurationValidation,
   } = useArrangementStatsContext();
 
   return (
@@ -55,20 +55,15 @@ export default function TotalDurationBreakdown() {
             color: colorTransform,
             value: totalDuration,
           })),
-          ...Object.entries(validations).map(([flag, { totalDuration }]) => ({
-            name: flag.toLocaleLowerCase(),
-            color: colorValidation,
-            value: totalDuration,
-          })),
           {
-            name: 'draw',
-            color: colorRender,
-            value: stageDurationDraw,
+            name: 'validations',
+            color: colorValidation,
+            value: stageDurationValidation,
           },
           {
             name: 'render',
             color: colorRender,
-            value: stageDurationRender,
+            value: stageDurationDraw + stageDurationRender,
           },
         ]}
       />
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/ValidationDurationBreakdown.tsx b/workspaces/tilings/src/Presentation/ArrangementStats/ValidationDurationBreakdown.tsx
index 33504591..f882bcee 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/ValidationDurationBreakdown.tsx
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/ValidationDurationBreakdown.tsx
@@ -1,4 +1,9 @@
-import { Text, useThemeContext } from 'preshape';
+import { meta as circularSequenceProject } from '@hogg/circular-sequence';
+import { ProjectPageLink } from '@hogg/common';
+import { meta as gapValidationProject } from '@hogg/gap-validation';
+import { meta as spatialGridMapProject } from '@hogg/spatial-grid-map';
+import { Box, Separator, Text, useThemeContext } from 'preshape';
+import { Flag } from '../../types';
 import { formatMs, formatPercent } from '../utils/formatting';
 import BreakdownBar from './BreakdownBar/BreakdownBar';
 import StageCard from './StageCard';
@@ -8,43 +13,140 @@ import { useArrangementStatsContext } from './useArrangementStatsContext';
 
 export default function ValidationDurationBreakdown() {
   const { colors } = useThemeContext();
-  const { validations, totalDuration } = useArrangementStatsContext();
+  const { validations, totalDuration, stageDurationValidation } =
+    useArrangementStatsContext();
+
+  const validationNames: Record<Flag, string> = {
+    [Flag.Expanded]: 'Tiling expanded',
+    [Flag.Gaps]: 'Gaps between shapes',
+    [Flag.Overlaps]: 'Shape overlaps',
+    [Flag.VertexTypes]: 'Only contains valid vertex types',
+  };
+
+  const validationDescriptions: Record<Flag, JSX.Element> = {
+    [Flag.Expanded]: (
+      <>
+        A check that the tiling has expanded, by ensuring all shapes from the
+        fist placement stage have adjacent shapes
+      </>
+    ),
+    [Flag.Gaps]: (
+      <>
+        A checks for gaps between other shapes, using{' '}
+        <ProjectPageLink
+          project={gapValidationProject}
+          target={gapValidationProject.id}
+        />
+        .'
+      </>
+    ),
+    [Flag.Overlaps]: (
+      <>
+        A check for overlapping shapes, by performing line intersections
+        efficiently using{' '}
+        <ProjectPageLink
+          project={spatialGridMapProject}
+          target={spatialGridMapProject.id}
+        />
+        .
+      </>
+    ),
+    [Flag.VertexTypes]: (
+      <>
+        A check that the vertex types are part of the known set, using{' '}
+        <ProjectPageLink
+          project={circularSequenceProject}
+          target={circularSequenceProject.id}
+        />
+        .
+      </>
+    ),
+  };
 
   return (
-    <StageCards>
-      {Object.entries(validations).map(
-        ([flag, { totalDuration: validationTotalDuration }]) => (
-          <StageCard key={flag} padding="x6">
+    <Box>
+      <StageCards>
+        <StageCard padding="x6">
+          <Box flex="horizontal" gap="x6">
             <Text
-              flex="horizontal"
-              alignChildrenHorizontal="between"
-              gap="x4"
-              margin="x3"
+              align="start"
+              margin="x4"
+              size="x5"
               weight="x2"
-              size="x3"
+              basis="0"
+              grow="3"
             >
-              <Text>{flag}</Text>
-              <Text>
-                {formatMs(validationTotalDuration)} |{' '}
-                {formatPercent(validationTotalDuration / totalDuration)}
+              Validations
+            </Text>
+
+            <Text basis="0" grow="1" weight="x2">
+              <Text align="end" margin="x2">
+                {formatMs(stageDurationValidation)} |{' '}
+                {formatPercent(stageDurationValidation / totalDuration)}
               </Text>
             </Text>
+          </Box>
+
+          <BreakdownBar
+            sections={[
+              {
+                color: colorValidation,
+                value: stageDurationValidation,
+              },
+              {
+                color: colors.colorBackgroundShade4,
+                value: totalDuration - stageDurationValidation,
+              },
+            ]}
+          />
 
-            <BreakdownBar
-              sections={[
-                {
-                  color: colorValidation,
-                  value: validationTotalDuration,
-                },
-                {
-                  color: colors.colorBackgroundShade4,
-                  value: totalDuration - validationTotalDuration,
-                },
-              ]}
-            />
-          </StageCard>
-        )
-      )}
-    </StageCards>
+          <Separator borderColor="background-shade-4" margin="x4" />
+
+          {Object.entries(validations)
+            .sort(([, a], [, b]) => b.totalDuration - a.totalDuration)
+            .map(([flag, { totalDuration: validationTotalDuration }]) => (
+              <Text
+                borderBottom
+                borderColor="background-shade-4"
+                borderSize="x1"
+                flex="horizontal"
+                gap="x6"
+                key={flag}
+                margin="x4"
+                paddingBottom="x4"
+                size="x3"
+              >
+                <Text basis="0" grow="3">
+                  <Text weight="x2" margin="x2">
+                    {validationNames[flag as Flag]}
+                  </Text>
+
+                  <Text size="x2">{validationDescriptions[flag as Flag]}</Text>
+                </Text>
+
+                <Text basis="0" grow="1" weight="x2">
+                  <Text align="end" margin="x2">
+                    {formatMs(validationTotalDuration)} |{' '}
+                    {formatPercent(validationTotalDuration / totalDuration)}
+                  </Text>
+
+                  <BreakdownBar
+                    sections={[
+                      {
+                        color: colorValidation,
+                        value: validationTotalDuration,
+                      },
+                      {
+                        color: colors.colorBackgroundShade4,
+                        value: totalDuration - validationTotalDuration,
+                      },
+                    ]}
+                  />
+                </Text>
+              </Text>
+            ))}
+        </StageCard>
+      </StageCards>
+    </Box>
   );
 }
diff --git a/workspaces/tilings/src/Presentation/ArrangementStats/constants.ts b/workspaces/tilings/src/Presentation/ArrangementStats/constants.ts
index df834a56..8d2e92f4 100644
--- a/workspaces/tilings/src/Presentation/ArrangementStats/constants.ts
+++ b/workspaces/tilings/src/Presentation/ArrangementStats/constants.ts
@@ -1,6 +1,16 @@
 import colors from 'open-color';
 
+const hexToRgb = (hex: string): [number, number, number] => {
+  const hexValue = hex.replace('#', '');
+  return [
+    parseInt(hexValue.substring(0, 2), 16),
+    parseInt(hexValue.substring(2, 4), 16),
+    parseInt(hexValue.substring(4, 6), 16),
+  ];
+};
+
 export const colorPath = colors.red[5];
 export const colorTransform = colors.green[5];
+export const colorValidationLight = `rgba(${hexToRgb(colors.yellow[2])}, 0.5)`;
 export const colorValidation = colors.yellow[5];
 export const colorRender = colors.blue[5];
diff --git a/workspaces/website/package.json b/workspaces/website/package.json
index 27910217..78a4b136 100644
--- a/workspaces/website/package.json
+++ b/workspaces/website/package.json
@@ -34,6 +34,7 @@
     "@hogg/circle-art": "workspace:^",
     "@hogg/circle-intersections": "workspace:^",
     "@hogg/circular-sequence": "workspace:^",
+    "@hogg/gap-validation": "workspace:^",
     "@hogg/line-segment-extending": "workspace:^",
     "@hogg/preshape": "workspace:^",
     "@hogg/snake": "workspace:^",
diff --git a/workspaces/website/src/App.tsx b/workspaces/website/src/App.tsx
index 5bda35f6..4a5843db 100644
--- a/workspaces/website/src/App.tsx
+++ b/workspaces/website/src/App.tsx
@@ -8,7 +8,7 @@ import Page404 from './pages/404';
 import Landing from './pages/Landing/Landing';
 import ProjectPage from './pages/Project/Project';
 import TilingGenerationPage from './pages/TilingGenerationPage';
-import { projects, shouldShowProject } from './projects';
+import { projects } from './projects';
 import 'preshape/dist/style.css';
 import './App.css';
 
@@ -28,10 +28,7 @@ export default function App({ helmetContext = {} }: Props) {
                   <Route index element={<Landing />} />
 
                   {projects
-                    .filter(
-                      ({ Component, meta }) =>
-                        Component && shouldShowProject(meta)
-                    )
+                    .filter(({ Component }) => Component)
                     .map(({ Component, meta }) => (
                       <Route
                         key={meta.id}
diff --git a/workspaces/website/src/components/Page/PageChangeButtons.tsx b/workspaces/website/src/components/Page/PageChangeButtons.tsx
index 1299c7cf..28aa2000 100644
--- a/workspaces/website/src/components/Page/PageChangeButtons.tsx
+++ b/workspaces/website/src/components/Page/PageChangeButtons.tsx
@@ -1,4 +1,3 @@
-import { Lines } from '@hogg/common';
 import { Box, BoxProps } from 'preshape';
 import PageChangeButton, { PageChangeButtonProps } from './PageChangeButton';
 
@@ -10,14 +9,6 @@ type Props = BoxProps & {
 export default function PageChangeButtons({ previous, next, ...rest }: Props) {
   return (
     <Box {...rest}>
-      <Lines
-        backgroundColor="text-shade-1"
-        count={2}
-        size={5}
-        grow
-        margin="x2"
-      />
-
       <Box alignChildrenVertical="middle" flex="horizontal" gap="x8" wrap>
         {previous && (
           <Box
@@ -36,14 +27,6 @@ export default function PageChangeButtons({ previous, next, ...rest }: Props) {
           </Box>
         )}
 
-        <Lines
-          backgroundColor="text-shade-1"
-          minWidth="300px"
-          size={5}
-          grow
-          count={3}
-        />
-
         {next && (
           <Box
             basis="0"
@@ -61,14 +44,6 @@ export default function PageChangeButtons({ previous, next, ...rest }: Props) {
           </Box>
         )}
       </Box>
-
-      <Lines
-        backgroundColor="text-shade-1"
-        count={2}
-        size={5}
-        grow
-        margin="x2"
-      />
     </Box>
   );
 }
diff --git a/workspaces/website/src/pages/Project/Project.tsx b/workspaces/website/src/pages/Project/Project.tsx
index 497d5832..aebda1db 100644
--- a/workspaces/website/src/pages/Project/Project.tsx
+++ b/workspaces/website/src/pages/Project/Project.tsx
@@ -1,6 +1,7 @@
 import {
   type Project,
   Media,
+  ProjectPageWIP,
   ProjectPageProps,
   ProjectPageProvider,
   getProjectRoutePath,
@@ -10,7 +11,11 @@ import Header from '../../components/Header/Header';
 import Page from '../../components/Page/Page';
 import PageBackButton from '../../components/Page/PageBackButton';
 import PageChangeButtons from '../../components/Page/PageChangeButtons';
-import { getNextProject, getPreviousProject } from '../../projects';
+import {
+  getNextProject,
+  getPreviousProject,
+  shouldShowProject,
+} from '../../projects';
 
 export type Props = {
   Component: ComponentType<ProjectPageProps>;
@@ -39,13 +44,19 @@ export default function Project({ Component, meta }: Props) {
           <PageBackButton title="Home" path="/" />
         </Header>
 
-        <Media lessThan="desktop">
-          <Component layout="vertical" gap="x16" />
-        </Media>
+        {shouldShowProject(meta) ? (
+          <>
+            <Media lessThan="desktop">
+              <Component layout="vertical" gap="x16" />
+            </Media>
 
-        <Media greaterThanOrEqual="desktop">
-          <Component layout="horizontal" gap="x24" />
-        </Media>
+            <Media greaterThanOrEqual="desktop">
+              <Component layout="horizontal" gap="x24" />
+            </Media>
+          </>
+        ) : (
+          <ProjectPageWIP />
+        )}
 
         <PageChangeButtons
           previous={
diff --git a/workspaces/website/src/projects.ts b/workspaces/website/src/projects.ts
index 3452c89b..35d0e4da 100644
--- a/workspaces/website/src/projects.ts
+++ b/workspaces/website/src/projects.ts
@@ -3,6 +3,7 @@ import * as CircleIntersections from '@hogg/circle-intersections';
 import * as CircularSequence from '@hogg/circular-sequence';
 import { Project, ProjectKey, ProjectPageProps } from '@hogg/common';
 import * as Evolution from '@hogg/evolution';
+import * as GapValidation from '@hogg/gap-validation';
 import * as LineSegmentExtending from '@hogg/line-segment-extending';
 import * as Preshape from '@hogg/preshape';
 import * as Snake from '@hogg/snake';
@@ -54,6 +55,10 @@ export const projects: {
     meta: SpatialGridMap.meta,
     Component: SpatialGridMap.Project,
   },
+  {
+    meta: GapValidation.meta,
+    Component: GapValidation.Project,
+  },
 ];
 
 projects.sort((a, b) => (a.meta.created > b.meta.created ? -1 : 1));
diff --git a/yarn.lock b/yarn.lock
index 0cbf10a2..4a3de692 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -896,6 +896,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@hogg/gap-validation@workspace:^, @hogg/gap-validation@workspace:workspaces/gap-validation":
+  version: 0.0.0-use.local
+  resolution: "@hogg/gap-validation@workspace:workspaces/gap-validation"
+  dependencies:
+    "@hogg/common": "workspace:^"
+    "@types/react": ^18.0.28
+    lucide-react: 0.445.0
+    preshape: ^19.1.5
+    react: ^18.2.0
+    typescript: ^5.0.4
+  languageName: unknown
+  linkType: soft
+
 "@hogg/line-segment-extending@workspace:^, @hogg/line-segment-extending@workspace:workspaces/line-segment-extending":
   version: 0.0.0-use.local
   resolution: "@hogg/line-segment-extending@workspace:workspaces/line-segment-extending"
@@ -1037,6 +1050,7 @@ __metadata:
     "@hogg/circle-art": "workspace:^"
     "@hogg/circle-intersections": "workspace:^"
     "@hogg/circular-sequence": "workspace:^"
+    "@hogg/gap-validation": "workspace:^"
     "@hogg/line-segment-extending": "workspace:^"
     "@hogg/preshape": "workspace:^"
     "@hogg/snake": "workspace:^"