diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx
index 8996f8e15a..262e49dd30 100644
--- a/editor.planx.uk/src/@planx/components/ui.tsx
+++ b/editor.planx.uk/src/@planx/components/ui.tsx
@@ -7,6 +7,7 @@ import ContactPage from "@mui/icons-material/ContactPage";
 import CopyAll from "@mui/icons-material/CopyAll";
 import Create from "@mui/icons-material/Create";
 import Event from "@mui/icons-material/Event";
+import FilterAltOutlined from "@mui/icons-material/FilterAltOutlined";
 import FunctionsIcon from "@mui/icons-material/Functions";
 import Home from "@mui/icons-material/Home";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
@@ -17,13 +18,12 @@ import PaymentOutlined from "@mui/icons-material/PaymentOutlined";
 import Pin from "@mui/icons-material/Pin";
 import PlaylistAdd from "@mui/icons-material/PlaylistAdd";
 import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck";
-import RateReview from "@mui/icons-material/RateReview";
+import RateReviewOutlined from "@mui/icons-material/RateReviewOutlined";
 import ReportProblemOutlined from "@mui/icons-material/ReportProblemOutlined";
 import SearchOutlined from "@mui/icons-material/SearchOutlined";
 import Send from "@mui/icons-material/Send";
 import SquareFoot from "@mui/icons-material/SquareFoot";
 import TextFields from "@mui/icons-material/TextFields";
-import ViewAgenda from "@mui/icons-material/ViewAgenda";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { Store } from "pages/FlowEditor/lib/store";
 import type { handleSubmit } from "pages/Preview/Node";
@@ -68,7 +68,7 @@ export const ICONS: {
   [TYPES.ExternalPortal]: CopyAll,
   [TYPES.FileUpload]: CloudUpload,
   [TYPES.FileUploadAndLabel]: CloudUpload,
-  [TYPES.Filter]: undefined,
+  [TYPES.Filter]: FilterAltOutlined,
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
@@ -80,8 +80,8 @@ export const ICONS: {
   [TYPES.PropertyInformation]: LocationOnOutlined,
   [TYPES.Answer]: undefined,
   [TYPES.Result]: PlaylistAddCheck,
-  [TYPES.Review]: RateReview,
-  [TYPES.Section]: ViewAgenda,
+  [TYPES.Review]: RateReviewOutlined,
+  [TYPES.Section]: List,
   [TYPES.Send]: Send,
   [TYPES.SetValue]: PlaylistAdd,
   [TYPES.Question]: CallSplit,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
index bb60498034..86c1b003eb 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -73,7 +73,7 @@ const Checklist: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
+        className={classNames("card", "decision", "question", {
           isDragging,
           isClone: isClone(props.id),
           isNote: childNodes.length === 0,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
index 5883d65acf..8a48609f6e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx
@@ -12,7 +12,7 @@ const Option: React.FC<any> = (props) => {
 
   const href = "";
 
-  let background = "#AEAEAE"; // no flag color
+  let background = "#666"; // no flag color
   let color = "#000";
   try {
     const flag = flatFlags.find(({ value }) =>
@@ -26,13 +26,9 @@ const Option: React.FC<any> = (props) => {
     <li
       className={classNames("card", "option", { wasVisited: props.wasVisited })}
     >
-      <Link
-        href={href}
-        prefetch={false}
-        onClick={(e) => e.preventDefault()}
-        style={{ background, color }}
-      >
-        <span>{props.data.text}</span>
+      <Link href={href} prefetch={false} onClick={(e) => e.preventDefault()}>
+        <div className="band" style={{ background, color }}></div>
+        <div className="text">{props.data.text}</div>
       </Link>
       <ol className="decisions">
         {childNodes.map((child: any) => (
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
index 73a69d9fed..db541551ba 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@apollo/client";
+import DoorFrontOutlined from "@mui/icons-material/DoorFrontOutlined";
 import MoreVert from "@mui/icons-material/MoreVert";
 import classNames from "classnames";
 import gql from "graphql-tag";
@@ -84,7 +85,7 @@ const ExternalPortal: React.FC<any> = (props) => {
         <Link href={`/${href}`} prefetch={false} ref={drag}>
           <span>{href}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </li>
@@ -132,9 +133,10 @@ const InternalPortal: React.FC<any> = (props) => {
           ref={drag}
           onContextMenu={handleContext}
         >
+          <DoorFrontOutlined />
           <span>{props.data.text}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </li>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
index d3f0ae5e39..2de72feecb 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -57,13 +57,18 @@ const Question: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
-          isDragging,
-          isClone: isClone(props.id),
-          isNote: childNodes.length === 0,
-          wasVisited: props.wasVisited,
-          hasFailed: props.hasFailed,
-        })}
+        className={classNames(
+          "card",
+          "decision",
+          "type-" + TYPES[props.type as TYPES],
+          {
+            isDragging,
+            isClone: isClone(props.id),
+            isNote: childNodes.length === 0,
+            wasVisited: props.wasVisited,
+            hasFailed: props.hasFailed,
+          },
+        )}
       >
         <Link
           href={href}
diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
index 1481c21f65..6a12a3cce1 100644
--- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
+++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -1,11 +1,16 @@
-$background: #f2f2f2;
-$black: #2c2c2c;
-$endpointRadius: 45px;
-$hangerRadius: 14px;
-$lineColor: #cacaca;
-$lineWidth: 1px;
-$padding: 7px;
-$pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNc8B8AAkUBofXwZpQAAAAASUVORK5CYII=);
+$black: #0b0c0c;
+$nodeBorder: $black;
+$optionBorder: #b1b4b6;
+$hangerBackground: #f2f2f2;
+$focus: #ffdd00;
+
+$endpointWidth: 50px;
+$hangerWidth: 16px;
+$lineWidth: 2px;
+$nodeBorderWidth: 1px;
+$padding: 10px;
+$editorPadding: 30px;
+$pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADElEQVQImWO4cOECAATkAnFXdNPtAAAAAElFTkSuQmCC);
 
 // Import custom typeface for data inputs
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap");
@@ -40,13 +45,19 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 #editor {
   flex: 1;
   overflow: auto;
-  padding: 20px;
+  padding: $editorPadding;
 
   ol,
   li {
     list-style: none;
     padding: 0;
     margin: 0;
+
+    > a:focus,
+    > a:active {
+      outline: 4px solid $focus;
+      outline-offset: 0;
+    }
   }
 
   ol:empty {
@@ -83,6 +94,8 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 // ------------------------------------------------
 
 .card {
+  position: relative;
+
   &.isDragging {
     opacity: 0.3;
     & + .hanger {
@@ -103,7 +116,8 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     span {
       opacity: 1;
     }
-    border: 2px solid limegreen;
+    outline: 4px solid #8cc485;
+    outline-offset: 0;
   }
 
   &.isClone > a {
@@ -111,7 +125,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   }
 
   &.hasFailed {
-    border: 1px dashed red;
+    border: $nodeBorderWidth dashed red;
   }
 
   & > a {
@@ -121,7 +135,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     text-decoration: none;
     cursor: pointer;
     color: $black;
-    border: 1px solid $lineColor;
+    border: $nodeBorderWidth solid $nodeBorder;
     background: white;
     user-select: none;
     padding: 6px 12px;
@@ -131,21 +145,65 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     }
 
     > span {
-      max-width: 170px;
+      min-width: 80px;
+      max-width: 200px;
       overflow-wrap: break-word;
     }
 
     > svg {
       margin-left: -6px;
+      margin-top: 0.5px;
       width: 16px;
       height: 16px;
-      opacity: 0.3;
+      opacity: 0.6;
     }
 
     > span:not(:nth-child(1)) {
       margin-left: 6px;
     }
   }
+
+  &.type-Section {
+    [data-layout="top-down"] & {
+      width: 100%;
+    }
+    [data-layout="left-right"] & {
+      height: 100%;
+    }
+  }
+
+  &.type-Section::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    height: 2px;
+    margin-top: -1px;
+    width: calc(100% + ($editorPadding * 2));
+    z-index: -1;
+    background-image: linear-gradient(
+      90deg,
+      $optionBorder,
+      $optionBorder 40%,
+      transparent 40%,
+      transparent 100%
+    );
+    background-size: 12px 2px;
+    border: none;
+    [data-layout="left-right"] & {
+      top: unset;
+      width: 2px;
+      height: 100vh;
+      left: 50%;
+      background-image: linear-gradient(
+        0deg,
+        $optionBorder,
+        $optionBorder 50%,
+        transparent 50%,
+        transparent 100%
+      );
+      background-size: 2px 12px;
+    }
+  }
 }
 
 .page {
@@ -161,9 +219,9 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 }
 
 .endpoint > a {
-  @include circle($endpointRadius);
+  @include circle($endpointWidth);
   display: block;
-  line-height: $endpointRadius;
+  line-height: $endpointWidth;
   color: white;
   background: $black;
   text-align: center;
@@ -171,10 +229,31 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   cursor: pointer;
 }
 
+.option {
+  > a {
+    border-color: $optionBorder;
+    flex-direction: column;
+    padding: 0;
+    min-width: 60px;
+    max-width: 200px;
+  }
+  .band {
+    width: 100%;
+    height: 12px;
+    border-bottom: $nodeBorderWidth solid $optionBorder;
+  }
+  .text {
+    align-self: center;
+    margin: 0;
+    padding: 6px 12px;
+  }
+}
+
 .hanger {
   align-self: center;
   background-image: $pixel;
   background-size: $lineWidth;
+  line-height: 0;
 
   [data-layout="left-right"] & {
     background-position: left center;
@@ -199,18 +278,19 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   }
 
   > a {
-    $size: 14px;
+    $size: $hangerWidth;
     display: inline-block;
     // width: $size;
     text-decoration: none;
-    border: 1px solid #a0a0a0;
+    border: $nodeBorderWidth solid $nodeBorder;
     min-width: $size;
     max-width: 200px;
     min-height: $size;
     border-radius: $size;
     color: $black;
     padding: 5px;
-    background: $background;
+    background: $hangerBackground;
+    line-height: 1.5;
 
     margin: $padding;
 
@@ -220,7 +300,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     transition: transform 0.2s;
 
     &:empty:hover {
-      background-color: yellow;
+      background-color: $focus;
       transform: scale(1.7);
     }
 
@@ -238,10 +318,38 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     border: none;
   }
   &.breadcrumb {
-    background: none;
+    background-image: $pixel;
+    background-repeat: no-repeat;
+    [data-layout="top-down"] & {
+      background-position: center top;
+      background-size: $lineWidth $padding;
+      > a {
+        margin: $padding 0 0;
+      }
+    }
+    [data-layout="left-right"] & {
+      background-position: left center;
+      background-size: $padding $lineWidth;
+      > a {
+        margin: 0 0 0 $padding;
+      }
+    }
     > a {
       background: #666;
-      margin: 5px 0;
+      text-align: center;
+    }
+  }
+  .portalMenu {
+    border-left: $nodeBorderWidth solid #aaa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 6px;
+    svg {
+      opacity: 1;
+      margin: 0;
+      width: 16px;
+      height: 16px;
     }
   }
 }
@@ -259,6 +367,11 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   display: none;
 }
 
+.category > span {
+  padding: 6px 12px;
+  background: #d0d0d0;
+}
+
 .decision,
 .category {
   [data-layout="top-down"] & {
@@ -274,9 +387,32 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   }
   align-items: center;
 
-  &.isNote {
+  &.question.isNote {
     > a {
-      background: yellow !important;
+      background: #fffdb0 !important;
+      position: relative;
+      padding-right: 20px;
+      // Triangle shapes to simulate paper fold on sticky note
+      &::before {
+        content: "";
+        position: absolute;
+        right: -$nodeBorderWidth;
+        bottom: -$nodeBorderWidth;
+        width: 0;
+        height: 0;
+        border-bottom: 12px solid #fff;
+        border-left: 12px solid transparent;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        right: -$nodeBorderWidth;
+        bottom: -$nodeBorderWidth;
+        width: 0;
+        height: 0;
+        border-top: 12px solid #555;
+        border-right: 12px solid transparent;
+      }
     }
   }
 
@@ -289,18 +425,18 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 
     [data-layout="top-down"] & {
       flex-direction: row;
-      padding-top: 5px !important;
+      padding-top: $padding !important;
 
       background-position: center top;
-      background-size: $lineWidth 5px;
+      background-size: $lineWidth $padding;
     }
 
     [data-layout="left-right"] & {
       flex-direction: column;
-      padding-left: 5px !important;
+      padding-left: $padding !important;
 
       background-position: left center;
-      background-size: 5px $lineWidth;
+      background-size: $padding $lineWidth;
     }
 
     &:empty {
@@ -310,7 +446,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     > li {
       background-image: $pixel, $pixel, $pixel;
       [data-layout="top-down"] & {
-        padding: 5px 5px 0 5px !important;
+        padding: $padding $padding 0 $padding !important;
         flex-direction: column;
 
         background-position:
@@ -318,7 +454,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
           top center,
           bottom center;
         background-size:
-          $lineWidth 5px,
+          $lineWidth $padding,
           $lineWidth,
           $lineWidth;
         background-repeat: no-repeat, repeat-x, repeat-x;
@@ -329,7 +465,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             top right,
             bottom right;
           background-size:
-            $lineWidth 5px,
+            $lineWidth $padding,
             50% $lineWidth,
             50% $lineWidth;
           background-repeat: no-repeat, no-repeat, no-repeat;
@@ -341,14 +477,14 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             top left,
             bottom left;
           background-size:
-            $lineWidth 5px,
+            $lineWidth $padding,
             50% $lineWidth,
             50% $lineWidth;
           background-repeat: no-repeat, no-repeat, no-repeat;
         }
       }
       [data-layout="left-right"] & {
-        padding: 5px 0 5px 5px !important;
+        padding: $padding 0 $padding $padding !important;
         flex-direction: row;
 
         background-position:
@@ -359,9 +495,9 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 
         // BUG: 1px NOT VISIBLE IN CHROME
         background-size:
-          5px $lineWidth,
+          $padding $lineWidth,
           $lineWidth 100%,
-          1px 100%;
+          2px 100%;
 
         &:nth-child(1) {
           background-position:
@@ -369,7 +505,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             left bottom,
             right bottom;
           background-size:
-            5px $lineWidth,
+            $padding $lineWidth,
             $lineWidth 50%,
             $lineWidth 50%;
         }
@@ -380,7 +516,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             left top,
             right top;
           background-size:
-            5px $lineWidth,
+            $padding $lineWidth,
             $lineWidth 50%,
             $lineWidth 50%;
         }