diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramPresetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramPresetDao.java
new file mode 100644
index 0000000000..bea895d04b
--- /dev/null
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramPresetDao.java
@@ -0,0 +1,73 @@
+package org.finos.waltz.data.aggregate_overlay_diagram;
+
+import org.finos.waltz.common.DateTimeUtilities;
+import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagramPreset;
+import org.finos.waltz.model.aggregate_overlay_diagram.ImmutableAggregateOverlayDiagramPreset;
+import org.finos.waltz.model.aggregate_overlay_diagram.OverlayDiagramPresetCreateCommand;
+import org.finos.waltz.schema.tables.records.AggregateOverlayDiagramPresetRecord;
+import org.jooq.DSLContext;
+import org.jooq.Record;
+import org.jooq.RecordMapper;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Repository;
+
+import java.util.Set;
+
+import static org.finos.waltz.common.DateTimeUtilities.toLocalDateTime;
+import static org.finos.waltz.schema.Tables.AGGREGATE_OVERLAY_DIAGRAM_PRESET;
+
+@Repository
+public class AggregateOverlayDiagramPresetDao {
+
+    protected static final RecordMapper<? super Record, ? extends AggregateOverlayDiagramPreset> TO_DOMAIN_MAPPER = r -> {
+        AggregateOverlayDiagramPresetRecord record = r.into(AGGREGATE_OVERLAY_DIAGRAM_PRESET);
+        return ImmutableAggregateOverlayDiagramPreset.builder()
+                .id(record.getId())
+                .name(record.getName())
+                .diagramId(record.getDiagramId())
+                .description(record.getDescription())
+                .externalId(record.getExternalId())
+                .overlayConfig(record.getOverlayConfig())
+                .filterConfig(record.getFilterConfig())
+                .lastUpdatedAt(toLocalDateTime(record.getLastUpdatedAt()))
+                .lastUpdatedBy(record.getLastUpdatedBy())
+                .provenance(record.getProvenance())
+                .build();
+    };
+
+    private final DSLContext dsl;
+
+    @Autowired
+    public AggregateOverlayDiagramPresetDao(DSLContext dsl) {
+        this.dsl = dsl;
+    }
+
+    public Set<AggregateOverlayDiagramPreset> findPresetsForDiagram(Long diagramId) {
+        return dsl
+                .select(AGGREGATE_OVERLAY_DIAGRAM_PRESET.fields())
+                .from(AGGREGATE_OVERLAY_DIAGRAM_PRESET)
+                .where(AGGREGATE_OVERLAY_DIAGRAM_PRESET.DIAGRAM_ID.eq(diagramId))
+                .fetchSet(TO_DOMAIN_MAPPER::map);
+    }
+
+    public int create(OverlayDiagramPresetCreateCommand createCommand, String username) {
+
+        AggregateOverlayDiagramPresetRecord record = dsl.newRecord(AGGREGATE_OVERLAY_DIAGRAM_PRESET);
+
+        record.setDiagramId(createCommand.diagramId());
+        record.setName(createCommand.name());
+        record.setDescription(createCommand.description());
+        record.setExternalId(createCommand.externalId());
+        record.setOverlayConfig(createCommand.overlayConfig());
+        record.setFilterConfig(createCommand.filterConfig());
+        record.setLastUpdatedAt(DateTimeUtilities.nowUtcTimestamp());
+        record.setLastUpdatedBy(username);
+        record.setProvenance("waltz");
+
+        return dsl
+                .insertInto(AGGREGATE_OVERLAY_DIAGRAM_PRESET)
+                .set(record)
+                .execute();
+    }
+
+}
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramUtilities.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramUtilities.java
index 6359555a10..9882fcc847 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramUtilities.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregateOverlayDiagramUtilities.java
@@ -5,30 +5,59 @@
 import org.finos.waltz.model.EntityReference;
 import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagram;
 import org.finos.waltz.model.aggregate_overlay_diagram.ImmutableAggregateOverlayDiagram;
+import org.finos.waltz.schema.tables.Application;
+import org.finos.waltz.schema.tables.MeasurableRating;
+import org.finos.waltz.schema.tables.MeasurableRatingPlannedDecommission;
+import org.finos.waltz.schema.tables.MeasurableRatingReplacement;
 import org.finos.waltz.schema.tables.records.AggregateOverlayDiagramRecord;
-import org.jooq.*;
+import org.jooq.DSLContext;
+import org.jooq.Field;
+import org.jooq.Record;
+import org.jooq.Record1;
+import org.jooq.Record2;
+import org.jooq.Record3;
+import org.jooq.RecordMapper;
+import org.jooq.Select;
+import org.jooq.SelectConditionStep;
 import org.jooq.impl.DSL;
 import org.jooq.lambda.tuple.Tuple2;
 
+import java.sql.Date;
+import java.time.LocalDate;
 import java.util.Collection;
 import java.util.List;
 import java.util.Map;
+import java.util.Optional;
 import java.util.Set;
 
 import static java.lang.String.format;
 import static java.util.Collections.emptyList;
 import static java.util.Collections.emptySet;
-import static java.util.stream.Collectors.*;
+import static java.util.stream.Collectors.groupingBy;
+import static java.util.stream.Collectors.mapping;
+import static java.util.stream.Collectors.toMap;
+import static java.util.stream.Collectors.toSet;
 import static org.finos.waltz.common.DateTimeUtilities.toLocalDateTime;
 import static org.finos.waltz.common.MapUtilities.groupBy;
 import static org.finos.waltz.common.SetUtilities.fromCollection;
 import static org.finos.waltz.data.JooqUtilities.readRef;
-import static org.finos.waltz.schema.Tables.*;
+import static org.finos.waltz.schema.Tables.AGGREGATE_OVERLAY_DIAGRAM;
+import static org.finos.waltz.schema.Tables.AGGREGATE_OVERLAY_DIAGRAM_CELL_DATA;
+import static org.finos.waltz.schema.Tables.APPLICATION;
+import static org.finos.waltz.schema.Tables.ENTITY_HIERARCHY;
+import static org.finos.waltz.schema.Tables.MEASURABLE_RATING;
+import static org.finos.waltz.schema.Tables.MEASURABLE_RATING_PLANNED_DECOMMISSION;
+import static org.finos.waltz.schema.Tables.MEASURABLE_RATING_REPLACEMENT;
 import static org.finos.waltz.schema.tables.EntityRelationship.ENTITY_RELATIONSHIP;
 import static org.jooq.lambda.tuple.Tuple.tuple;
 
 public class AggregateOverlayDiagramUtilities {
 
+    private static final MeasurableRating mr = MEASURABLE_RATING;
+    private static final Application app = APPLICATION;
+    private static final MeasurableRatingPlannedDecommission mrpd = MEASURABLE_RATING_PLANNED_DECOMMISSION;
+    private static final MeasurableRatingReplacement mrp = MEASURABLE_RATING_REPLACEMENT;
+
     protected static final RecordMapper<? super Record, ? extends AggregateOverlayDiagram> TO_DOMAIN_MAPPER = r -> {
         AggregateOverlayDiagramRecord record = r.into(AGGREGATE_OVERLAY_DIAGRAM);
         return ImmutableAggregateOverlayDiagram.builder()
@@ -83,7 +112,8 @@ protected static SelectConditionStep<Record3<String, String, Long>> selectCellMa
     protected static Map<String, Set<Long>> loadCellExtIdToAggregatedEntities(DSLContext dsl,
                                                                               long diagramId,
                                                                               EntityKind aggregatedEntityKind,
-                                                                              Select<Record1<Long>> inScopeEntityIdSelector) {
+                                                                              Select<Record1<Long>> inScopeEntityIdSelector,
+                                                                              Optional<LocalDate> targetStateDate) {
 
         Set<Tuple2<String, EntityReference>> cellMappings = loadExpandedCellMappingsForDiagram(dsl, diagramId);
 
@@ -103,7 +133,8 @@ protected static Map<String, Set<Long>> loadCellExtIdToAggregatedEntities(DSLCon
                 dsl,
                 aggregatedEntityKind,
                 inScopeEntityIdSelector,
-                backingMeasurableEntityIds);
+                backingMeasurableEntityIds,
+                targetStateDate);
 
         return cellBackingEntitiesByCellExtId
                 .entrySet()
@@ -135,11 +166,12 @@ protected static Map<String, Set<Long>> loadCellExtIdToAggregatedEntities(DSLCon
     private static Map<Long, List<Long>> findMeasurableIdToAggregatedEntityIdMap(DSLContext dsl,
                                                                                  EntityKind aggregatedEntityKind,
                                                                                  Select<Record1<Long>> inScopeEntityIdSelector,
-                                                                                 Set<Long> backingEntityIds) {
+                                                                                 Set<Long> backingEntityIds,
+                                                                                 Optional<LocalDate> targetStateDate) {
 
         switch (aggregatedEntityKind) {
             case APPLICATION:
-                return loadMeasurableToAppIdsMap(dsl, inScopeEntityIdSelector, backingEntityIds);
+                return loadMeasurableToAppIdsMap(dsl, inScopeEntityIdSelector, backingEntityIds, targetStateDate);
             case CHANGE_INITIATIVE:
                 return loadMeasurableToCIIdsMap(dsl, inScopeEntityIdSelector, backingEntityIds);
             default:
@@ -181,7 +213,71 @@ private static Map<Long, List<Long>> loadMeasurableToCIIdsMap(DSLContext dsl,
 
     private static Map<Long, List<Long>> loadMeasurableToAppIdsMap(DSLContext dsl,
                                                                    Select<Record1<Long>> inScopeEntityIdSelector,
-                                                                   Set<Long> backingEntityReferences) {
+                                                                   Set<Long> backingEntityReferences,
+                                                                   Optional<LocalDate> targetStateDate) {
+        return targetStateDate
+                .map(targetDate -> loadMeasurableToAppIdsMapUsingTargetState(
+                        dsl,
+                        inScopeEntityIdSelector,
+                        backingEntityReferences,
+                        targetDate))
+                .orElse(loadMeasurableToAppIdsMapIgnoringTargetDate(
+                        dsl,
+                        inScopeEntityIdSelector,
+                        backingEntityReferences));
+    }
+
+
+    private static Map<Long, List<Long>> loadMeasurableToAppIdsMapUsingTargetState(DSLContext dsl,
+                                                                                   Select<Record1<Long>> inScopeEntityIdSelector,
+                                                                                   Set<Long> backingEntityReferences,
+                                                                                   LocalDate targetStateDate) {
+        Date targetDate = targetStateDate == null
+                ? null
+                : Date.valueOf(targetStateDate);
+
+
+        Field<Date> decommDate = DSL.coalesce(
+                mrpd.PLANNED_DECOMMISSION_DATE,
+                app.PLANNED_RETIREMENT_DATE);
+
+
+        Field<Long> appIdCol = DSL
+                .when(decommDate.isNull().or(decommDate.gt(targetDate)),
+                        mr.ENTITY_ID)
+                .when(mrp.PLANNED_COMMISSION_DATE.lt(targetDate),
+                        mrp.ENTITY_ID)
+                .otherwise((Long) null);
+
+        SelectConditionStep<Record2<Long, Long>> qry = dsl
+                .select(mr.MEASURABLE_ID,
+                        appIdCol)
+                .from(mr)
+                .innerJoin(app)
+                .on(mr.ENTITY_ID
+                        .eq(app.ID)
+                        .and(mr.ENTITY_KIND.eq(EntityKind.APPLICATION.name())))
+                .leftJoin(mrpd)
+                .on(mr.ENTITY_ID
+                        .eq(mrpd.ENTITY_ID)
+                        .and(mr.ENTITY_KIND
+                                .eq(mrpd.ENTITY_KIND)
+                                .and(mr.MEASURABLE_ID.eq(mrpd.MEASURABLE_ID))))
+                .leftJoin(mrp)
+                .on(mrp.DECOMMISSION_ID.eq(mrpd.ID))
+                .where(mr.ENTITY_ID.in(inScopeEntityIdSelector))
+                .and(mr.MEASURABLE_ID.in(backingEntityReferences));
+
+        return qry
+                .fetchGroups(
+                        mr.MEASURABLE_ID,
+                        appIdCol);
+    }
+
+
+    private static Map<Long, List<Long>> loadMeasurableToAppIdsMapIgnoringTargetDate(DSLContext dsl,
+                                                                                     Select<Record1<Long>> inScopeEntityIdSelector,
+                                                                                     Set<Long> backingEntityReferences) {
         return dsl
                 .selectDistinct(MEASURABLE_RATING.MEASURABLE_ID, MEASURABLE_RATING.ENTITY_ID)
                 .from(MEASURABLE_RATING)
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregatedEntitiesWidgetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregatedEntitiesWidgetDao.java
index a0b00e66ba..89d3727e8a 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregatedEntitiesWidgetDao.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AggregatedEntitiesWidgetDao.java
@@ -9,7 +9,9 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
 
+import java.time.LocalDate;
 import java.util.Map;
+import java.util.Optional;
 import java.util.Set;
 
 import static java.lang.String.format;
@@ -31,13 +33,15 @@ public AggregatedEntitiesWidgetDao(DSLContext dsl) {
 
     public Set<AggregatedEntitiesWidgetDatum> findWidgetData(long diagramId,
                                                              EntityKind aggregatedEntityKind,
-                                                             Select<Record1<Long>> inScopeEntityIdSelector) {
+                                                             Select<Record1<Long>> inScopeEntityIdSelector,
+                                                             Optional<LocalDate> targetStateDate) {
 
         Map<String, Set<Long>> cellExtIdsToAggregatedEntities = loadCellExtIdToAggregatedEntities(
                 dsl,
                 diagramId,
                 aggregatedEntityKind,
-                inScopeEntityIdSelector);
+                inScopeEntityIdSelector,
+                targetStateDate);
 
         Map<Long, String> entityIdToNameMap = loadEntityIdToNameMap(aggregatedEntityKind, inScopeEntityIdSelector);
 
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCostWidgetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCostWidgetDao.java
index cb5ea8dbeb..023485b4a2 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCostWidgetDao.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCostWidgetDao.java
@@ -15,8 +15,10 @@
 
 import java.math.BigDecimal;
 import java.math.RoundingMode;
+import java.time.LocalDate;
 import java.util.Collection;
 import java.util.Map;
+import java.util.Optional;
 import java.util.Set;
 
 import static java.util.Collections.emptySet;
@@ -62,13 +64,15 @@ public AppCostWidgetDao(DSLContext dsl) {
     public Set<CostWidgetDatum> findWidgetData(long diagramId,
                                                Set<Long> costKindIds,
                                                long allocationSchemeId,
-                                               Select<Record1<Long>> inScopeApplicationSelector) {
+                                               Select<Record1<Long>> inScopeApplicationSelector,
+                                               Optional<LocalDate> targetStateDate) {
 
         Map<String, Set<Long>> cellExtIdsToBackingEntities = loadCellExtIdToAggregatedEntities(
                 dsl,
                 diagramId,
                 EntityKind.APPLICATION,
-                inScopeApplicationSelector);
+                inScopeApplicationSelector,
+                targetStateDate);
 
         Set<MeasurableCostEntry> costData = fetchCostData(
                 dsl,
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCountWidgetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCountWidgetDao.java
index ffb9b1c09d..e3753179fe 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCountWidgetDao.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AppCountWidgetDao.java
@@ -13,6 +13,7 @@
 import java.time.LocalDate;
 import java.util.Collection;
 import java.util.Map;
+import java.util.Optional;
 import java.util.Set;
 
 import static java.util.stream.Collectors.toSet;
@@ -41,7 +42,8 @@ public Set<CountWidgetDatum> findWidgetData(long diagramId,
                 dsl,
                 diagramId,
                 EntityKind.APPLICATION,
-                inScopeApplicationSelector);
+                inScopeApplicationSelector,
+                Optional.empty());
 
         Set<Long> appIds = cellExtIdsToAggregatedEntities.values()
                 .stream()
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AssessmentRatingWidgetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AssessmentRatingWidgetDao.java
index bbb7969842..4f83e008d1 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AssessmentRatingWidgetDao.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/AssessmentRatingWidgetDao.java
@@ -7,12 +7,12 @@
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.AssessmentRatingsWidgetDatum;
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.ImmutableAssessmentRatingCount;
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.ImmutableAssessmentRatingsWidgetDatum;
-import org.finos.waltz.model.utils.IdUtilities;
 import org.finos.waltz.schema.tables.AssessmentRating;
 import org.jooq.*;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
 
+import java.time.LocalDate;
 import java.util.*;
 import java.util.concurrent.atomic.AtomicInteger;
 
@@ -41,13 +41,15 @@ public AssessmentRatingWidgetDao(DSLContext dsl,
     public Set<AssessmentRatingsWidgetDatum> findWidgetData(long diagramId,
                                                             EntityKind aggregatedEntityKind,
                                                             Long assessmentId,
-                                                            Select<Record1<Long>> inScopeEntityIdSelector) {
+                                                            Select<Record1<Long>> inScopeEntityIdSelector,
+                                                            Optional<LocalDate> targetStateDate) {
 
         Map<String, Set<Long>> cellExtIdsToAggregatedEntities = loadCellExtIdToAggregatedEntities(
                 dsl,
                 diagramId,
                 aggregatedEntityKind,
-                inScopeEntityIdSelector);
+                inScopeEntityIdSelector,
+                targetStateDate);
 
         Set<Long> diagramEntityIds = cellExtIdsToAggregatedEntities.values()
                 .stream()
diff --git a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/TargetAppCostWidgetDao.java b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/TargetAppCostWidgetDao.java
index ad5298b402..0a4228aa9d 100644
--- a/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/TargetAppCostWidgetDao.java
+++ b/waltz-data/src/main/java/org/finos/waltz/data/aggregate_overlay_diagram/TargetAppCostWidgetDao.java
@@ -14,6 +14,7 @@
 import java.time.LocalDate;
 import java.util.Collection;
 import java.util.Map;
+import java.util.Optional;
 import java.util.Set;
 
 import static java.util.stream.Collectors.toSet;
@@ -42,7 +43,8 @@ public Set<TargetCostWidgetDatum> findWidgetData(long diagramId,
                 dsl,
                 diagramId,
                 EntityKind.APPLICATION,
-                inScopeApplicationSelector);
+                inScopeApplicationSelector,
+                Optional.empty());
 
         Set<Long> diagramAppIds = cellExtIdsToAggregatedEntities
                 .values()
diff --git a/waltz-jobs/src/main/java/org/finos/waltz/jobs/harness/AggregateWidgetCostHarness.java b/waltz-jobs/src/main/java/org/finos/waltz/jobs/harness/AggregateWidgetCostHarness.java
index cd265e61e8..9ca8fa1389 100644
--- a/waltz-jobs/src/main/java/org/finos/waltz/jobs/harness/AggregateWidgetCostHarness.java
+++ b/waltz-jobs/src/main/java/org/finos/waltz/jobs/harness/AggregateWidgetCostHarness.java
@@ -49,10 +49,8 @@ public static void main(String[] args) throws ParseException {
         long schemeId = 1L;
         long allocationSchemeId = 1L;
 
-        ApplicationIdSelectorFactory selectorFactory  = new ApplicationIdSelectorFactory();
+        ApplicationIdSelectorFactory selectorFactory = new ApplicationIdSelectorFactory();
         Select<Record1<Long>> appIds = selectorFactory.apply(selectionOptions);
-        Set<CostWidgetDatum> widgetData = dao.findWidgetData(diagramId, SetUtilities.asSet(schemeId), allocationSchemeId, appIds);
-        System.out.println(widgetData);
 
     }
 
diff --git a/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/AggregateOverlayDiagramPreset.java b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/AggregateOverlayDiagramPreset.java
new file mode 100644
index 0000000000..019e70b8c5
--- /dev/null
+++ b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/AggregateOverlayDiagramPreset.java
@@ -0,0 +1,25 @@
+package org.finos.waltz.model.aggregate_overlay_diagram;
+
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import org.finos.waltz.model.*;
+import org.immutables.value.Value;
+
+@Value.Immutable
+@JsonSerialize(as = ImmutableAggregateOverlayDiagramPreset.class)
+@JsonDeserialize(as = ImmutableAggregateOverlayDiagramPreset.class)
+public abstract class AggregateOverlayDiagramPreset implements IdProvider,
+        NameProvider,
+        DescriptionProvider,
+        LastUpdatedProvider,
+        ProvenanceProvider {
+
+    public abstract Long diagramId();
+
+    public abstract String externalId();
+
+    public abstract String overlayConfig();
+
+    public abstract String filterConfig();
+
+}
diff --git a/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/OverlayDiagramPresetCreateCommand.java b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/OverlayDiagramPresetCreateCommand.java
new file mode 100644
index 0000000000..500b51464f
--- /dev/null
+++ b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/OverlayDiagramPresetCreateCommand.java
@@ -0,0 +1,24 @@
+package org.finos.waltz.model.aggregate_overlay_diagram;
+
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import org.finos.waltz.model.DescriptionProvider;
+import org.finos.waltz.model.EntityReference;
+import org.finos.waltz.model.NameProvider;
+import org.finos.waltz.model.command.Command;
+import org.immutables.value.Value;
+
+@Value.Immutable
+@JsonSerialize(as = ImmutableOverlayDiagramPresetCreateCommand.class)
+@JsonDeserialize(as = ImmutableOverlayDiagramPresetCreateCommand.class)
+public abstract class OverlayDiagramPresetCreateCommand implements NameProvider, DescriptionProvider, Command {
+
+    public abstract Long diagramId();
+
+    public abstract String externalId();
+
+    public abstract String overlayConfig();
+
+    public abstract String filterConfig();
+
+}
diff --git a/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/overlay/widget_parameters/AssessmentWidgetParameters.java b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/overlay/widget_parameters/AssessmentWidgetParameters.java
index b9bc050660..4c22ab5e0e 100644
--- a/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/overlay/widget_parameters/AssessmentWidgetParameters.java
+++ b/waltz-model/src/main/java/org/finos/waltz/model/aggregate_overlay_diagram/overlay/widget_parameters/AssessmentWidgetParameters.java
@@ -4,6 +4,9 @@
 import com.fasterxml.jackson.databind.annotation.JsonSerialize;
 import org.immutables.value.Value;
 
+import java.time.LocalDate;
+import java.util.Optional;
+
 @Value.Immutable
 @JsonSerialize(as = ImmutableAssessmentWidgetParameters.class)
 @JsonDeserialize(as = ImmutableAssessmentWidgetParameters.class)
@@ -11,4 +14,6 @@ public abstract class AssessmentWidgetParameters {
 
     public abstract Long assessmentDefinitionId();
 
+    public abstract Optional<LocalDate> targetDate();
+
 }
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte
index 324c2c4604..166b8a72b0 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte
@@ -11,7 +11,7 @@
     let selectedInstance = getContext("selectedInstance");
     let selectedDiagram = getContext("selectedDiagram");
     let overlayData = getContext("overlayData");
-    let widget = getContext("widget");
+    let widget = getContext("focusWidget");
     let callouts = getContext("callouts");
     let selectedOverlay = getContext("selectedOverlay");
     let svgDetail = getContext("svgDetail");
@@ -162,6 +162,7 @@
 
 </script>
 
-<div bind:this={svgHolderElem}>
+<div id="diagram-capture"
+     bind:this={svgHolderElem}>
     {@html svg}
 </div>
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/WidgetSelector.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/WidgetSelector.svelte
index 4a5c9edde4..d04bb4c326 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/WidgetSelector.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/WidgetSelector.svelte
@@ -1,18 +1,8 @@
 <script>
-    import {mkSelectionOptions} from "../../../common/selector-utils";
-    import AssessmentWidgetParameters from "./widgets/assessments/AssessmentWidgetParameters.svelte";
-    import TargetAppCostWidgetParameters from "./widgets/target-costs/TargetAppCostWidgetParameters.svelte";
-    import AppCountWidgetParameters from "./widgets/app-counts/AppCountWidgetParameters.svelte";
-    import AppCostWidgetParameters from "./widgets/app-costs/AppCostWidgetParameters.svelte";
-    import BackingEntitiesWidgetParameters from "./widgets/backing-entities/BackingEntitiesWidgetParameters.svelte";
     import Icon from "../../../common/svelte/Icon.svelte";
     import {getContext} from "svelte";
-    import {entity} from "../../../common/services/enums/entity";
     import _ from "lodash";
-    import AggregatedEntitiesWidgetParameters
-        from "./widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte";
-
-    export let primaryEntityRef;
+    import {widgets} from "./aggregate-overlay-diagram-utils";
 
     let displayedWidgets;
 
@@ -21,41 +11,7 @@
     const focusWidget = getContext("focusWidget");
     const filterParameters = getContext("filterParameters");
     const widgetParameters = getContext("widgetParameters");
-    const selectionOptions = getContext("selectionOptions");
-
-    const widgets = [
-        {
-            parameterWidget: TargetAppCostWidgetParameters,
-            description: "Shows current cost and future cost info",
-            label: "Target App Costs",
-            aggregatedEntityKinds: [entity.APPLICATION.key]
-        }, {
-            parameterWidget: AppCostWidgetParameters,
-            description: "Shows current app costs accounting for allocation percentages",
-            label: "App Costs",
-            aggregatedEntityKinds: [entity.APPLICATION.key]
-        }, {
-            parameterWidget: AppCountWidgetParameters,
-            description: "Shows current app count and future app count info",
-            label: "App Counts",
-            aggregatedEntityKinds: [entity.APPLICATION.key]
-        }, {
-            label: "Assessments",
-            description: "Allows user to select an assessment to overlay on the diagram",
-            parameterWidget: AssessmentWidgetParameters,
-            aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
-        }, {
-            label: "Backing Entities",
-            description: "Displays the underlying entities which drive the overlays on the diagram",
-            parameterWidget: BackingEntitiesWidgetParameters,
-            aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
-        }, {
-            label: "Aggregated Entities",
-            description: "Displays entities which are aggregated to populate the other overlay data",
-            parameterWidget: AggregatedEntitiesWidgetParameters,
-            aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
-        }
-    ];
+    const diagramPresets = getContext("diagramPresets");
 
     $: displayedWidgets = _.filter(
         widgets,
@@ -66,10 +22,6 @@
         $selectedOverlay = null;
     }
 
-    let opts = null;
-
-    $: $selectionOptions = mkSelectionOptions(primaryEntityRef);
-
     function selectWidget(widget) {
         $widgetParameters = null;
         $focusWidget = widget;
@@ -79,26 +31,38 @@
 
 
 {#if $focusWidget}
-    <div class="help-block">{$focusWidget.description}</div>
+    <h4>
+        <Icon name={$focusWidget.icon}/>
+        {$focusWidget.label}
+        <button class="small btn btn-skinny"
+                on:click={onCancel}>
+            (Change overlay)
+        </button>
+    </h4>
 
     <svelte:component this={$focusWidget.parameterWidget}/>
 
-    <hr>
-    <button class="btn btn-skinny"
-            on:click={onCancel}>
-        Cancel
-    </button>
-
 {:else}
-    {#each displayedWidgets as widget}
-        <div>
-            <button class="btn btn-skinny"
-                    on:click={() => selectWidget(widget)}>
-                <Icon name="plus"/>
-                {widget.label}
-            </button>
-        </div>
-    {/each}
+    <div class="help-block">
+        <Icon name="info-circle"/>
+        Select an overlay from the list below
+    </div>
+
+    <table class="table table-condensed small table-striped">
+        <tbody>
+        {#each displayedWidgets as widget}
+            <tr>
+                <td>
+                    <button class="btn btn-skinny"
+                            on:click={() => selectWidget(widget)}>
+                        {widget.label}
+                    </button>
+                </td>
+                <td>{widget.description}</td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
 {/if}
 
 
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js
index 5bab734690..90391a4710 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js
@@ -14,6 +14,25 @@ import {
     yellowHex
 } from "../../../common/colors";
 import {refToString} from "../../../common/entity-utils";
+import TargetAppCostWidgetParameters from "./widgets/target-costs/TargetAppCostWidgetParameters.svelte";
+import TargetAppCostOverlayCell from "./widgets/target-costs/TargetAppCostOverlayCell.svelte";
+import {aggregateOverlayDiagramStore} from "../../../svelte-stores/aggregate-overlay-diagram-store";
+import {entity} from "../../../common/services/enums/entity";
+import AppCostWidgetParameters from "./widgets/app-costs/AppCostWidgetParameters.svelte";
+import AppCostOverlayCell from "./widgets/app-costs/AppCostOverlayCell.svelte";
+import AppCountWidgetParameters from "./widgets/app-counts/AppCountWidgetParameters.svelte";
+import AppCountOverlayCell from "./widgets/app-counts/AppCountOverlayCell.svelte";
+import AssessmentWidgetParameters from "./widgets/assessments/AssessmentWidgetParameters.svelte";
+import AssessmentOverlayCell from "./widgets/assessments/AssessmentOverlayCell.svelte";
+import BackingEntitiesWidgetParameters from "./widgets/backing-entities/BackingEntitiesWidgetParameters.svelte";
+import BackingEntitiesOverlayCell from "./widgets/backing-entities/BackingEntitiesOverlayCell.svelte";
+import AggregatedEntitiesWidgetParameters
+    from "./widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte";
+import AggregatedEntitiesOverlayCell from "./widgets/aggregated-entities/AggregatedEntitiesOverlayCell.svelte";
+import {resetParameters as resetAssessmentParameters} from "../aggregate-overlay-diagram/widgets/assessments/AssessmentWidgetParameters.svelte";
+import {resetParameters as resetTargetAppCostParameters} from "../aggregate-overlay-diagram/widgets/target-costs/TargetAppCostWidgetParameters.svelte";
+import {resetParameters as resetAppCostParameters} from "../aggregate-overlay-diagram/widgets/app-costs/AppCostWidgetParameters.svelte";
+import {resetParameters as resetTargetAppCountParameters} from "../aggregate-overlay-diagram/widgets/app-counts/AppCountWidgetParameters.svelte";
 
 
 export function clearContent(svgHolderElem, targetSelector) {
@@ -106,7 +125,6 @@ export function setupContextStores() {
     const hoveredCallout = writable(null);
     const selectedCallout = writable(null);
     const overlayData = writable([]);
-    const widget = writable(null);
     const focusWidget = writable(null);
     const svgDetail = writable(null);
     const instances = writable([]);
@@ -120,27 +138,24 @@ export function setupContextStores() {
     const filterParameters = writable(null);
     const widgetParameters = writable(null);
     const selectionOptions = writable(null);
-    const remoteMethod = writable(null);
-
-    //widget parameters
-    const appCountSliderValue = writable(0);
-    const costSliderValue = writable(0);
-    const selectedAssessmentDefinition = writable(null);
-    const selectedAllocationScheme = writable(null);
-    const selectedCostKinds = writable([]);
+    const diagramPresets = writable([]);
+    const selectedPreset = writable(null);
+    const loading = writable(false);
 
 
     //anything passed up to endpoint
     const overlayDataCall = derived(
-        [remoteMethod, selectedDiagram, selectionOptions, filterParameters, widgetParameters],
-        ([$remoteMethod, $selectedDiagram, $selectionOptions, $filterParameters, $widgetParameters]) => {
+        [focusWidget, selectedDiagram, selectionOptions, filterParameters, widgetParameters],
+        ([$focusWidget, $selectedDiagram, $selectionOptions, $filterParameters, $widgetParameters]) => {
 
-            if ($remoteMethod && $selectedDiagram && $widgetParameters) {
+            if ($focusWidget && $selectedDiagram && $widgetParameters) {
 
                 const assessmentBasedSelectionFilter = {
-                    definitionId: $filterParameters?.assessmentDefinition.id,
-                    ratingIds: _.map($filterParameters?.ratingSchemeItems, p => p?.id)
-                }
+                    definitionId: _.get($filterParameters, ["assessmentDefinition", "id"]),
+                    ratingIds: _.map(
+                        _.get($filterParameters, ["ratingSchemeItems"], []),
+                        p => _.get(p, "id"))
+                };
 
                 const body = Object.assign(
                     {},
@@ -150,11 +165,24 @@ export function setupContextStores() {
                     },
                     $filterParameters ? {assessmentBasedSelectionFilter} : null);
 
-                return $remoteMethod($selectedDiagram.id, body);
+                return $focusWidget.remoteMethod($selectedDiagram.id, body);
             }
         });
 
-    overlayDataCall.subscribe(callStore => callStore?.subscribe(d => overlayData.set(d?.data)));
+    let dataCallUnsubscribeFn = null;
+
+    overlayDataCall.subscribe(callStore => {
+        if (dataCallUnsubscribeFn) {
+            dataCallUnsubscribeFn();
+        }
+        dataCallUnsubscribeFn = callStore
+            ? callStore.subscribe(d => {
+                overlayData.set(d.data);
+                loading.set(d.status === "loading")
+            })
+            : null;
+    });
+
 
     setContext("hoveredCallout", hoveredCallout);
     setContext("selectedDiagram", selectedDiagram);
@@ -162,7 +190,6 @@ export function setupContextStores() {
     setContext("callouts", callouts);
     setContext("selectedCallout", selectedCallout);
     setContext("overlayData", overlayData);
-    setContext("widget", widget);
     setContext("focusWidget", focusWidget);
     setContext("svgDetail", svgDetail);
     setContext("instances", instances);
@@ -173,16 +200,13 @@ export function setupContextStores() {
     setContext("selectedOverlay", selectedOverlay);
     setContext("relatedBackingEntities", relatedBackingEntities);
     setContext("cellIdsExplicitlyRelatedToParent", cellIdsExplicitlyRelatedToParent);
-    setContext("appCountSliderValue", appCountSliderValue);
-    setContext("costSliderValue", costSliderValue);
-    setContext("selectedAssessmentDefinition", selectedAssessmentDefinition);
-    setContext("selectedAllocationScheme", selectedAllocationScheme);
-    setContext("selectedCostKinds", selectedCostKinds);
     setContext("filterParameters", filterParameters);
     setContext("widgetParameters", widgetParameters);
     setContext("selectionOptions", selectionOptions);
-    setContext("remoteMethod", remoteMethod);
     setContext("overlayDataCall", overlayDataCall);
+    setContext("diagramPresets", diagramPresets);
+    setContext("selectedPreset", selectedPreset);
+    setContext("loading", loading);
 
     return {
         selectedDiagram,
@@ -191,7 +215,6 @@ export function setupContextStores() {
         hoveredCallout,
         selectedCallout,
         overlayData,
-        widget,
         focusWidget,
         svgDetail,
         instances,
@@ -201,11 +224,6 @@ export function setupContextStores() {
         hasEditPermissions,
         selectedOverlay,
         relatedBackingEntities,
-        appCountSliderValue,
-        costSliderValue,
-        selectedAssessmentDefinition,
-        selectedAllocationScheme,
-        selectedCostKinds,
         filterParameters,
         widgetParameters
     };
@@ -237,4 +255,127 @@ export function determineCell(elem) {
             return determineCell(elem.parentElement)
         }
     }
-}
\ No newline at end of file
+}
+
+
+export function mkAggregatedEntitiesGlobalProps(data) {
+    const maxCount = _
+        .chain(data)
+        .map(d => _.size(d.aggregatedEntityReferences))
+        .max()
+        .value();
+    return {maxCount};
+}
+
+
+export function mkAssessmentOverlayGlobalProps(data) {
+    const maxCount = _
+        .chain(data)
+        .map(d => d.counts)
+        .flatten()
+        .map(d => d.count)
+        .max()
+        .value();
+
+    return {maxCount};
+}
+
+
+export function mkTargetAppCountGlobalProps(data) {
+    const maxCount = _
+        .chain(data)
+        .map(d => [d.currentStateCount, d.targetStateCount])
+        .flatten()
+        .max()
+        .value();
+    return {maxCount};
+}
+
+
+export function mkAppCostGlobalProps(data) {
+    const maxCost = _
+        .chain(data)
+        .map(d => d.totalCost)
+        .max()
+        .value();
+    return {maxCost};
+}
+
+
+export function mkTargetAppCostGlobalProps(data) {
+    const maxCost = _
+        .chain(data)
+        .map(d => [d.currentStateCost, d.targetStateCost])
+        .flatten()
+        .max()
+        .value();
+    return {maxCost};
+}
+
+
+export const widgets = [
+    {
+        key: "TARGET_APP_COSTS",
+        parameterWidget: TargetAppCostWidgetParameters,
+        description: "Shows current cost and future cost info",
+        label: "Target App Costs",
+        icon: "money",
+        overlay: TargetAppCostOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findTargetAppCostForDiagram,
+        mkGlobalProps: mkTargetAppCostGlobalProps,
+        resetParameters: resetTargetAppCostParameters,
+        aggregatedEntityKinds: [entity.APPLICATION.key],
+    }, {
+        key: "APP_COSTS",
+        parameterWidget: AppCostWidgetParameters,
+        description: "Shows current app costs accounting for allocation percentages",
+        label: "App Costs",
+        icon: "money",
+        overlay: AppCostOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findAppCostForDiagram,
+        mkGlobalProps: mkAppCostGlobalProps,
+        resetParameters: resetAppCostParameters,
+        aggregatedEntityKinds: [entity.APPLICATION.key]
+    }, {
+        key: "TARGET_APP_COUNTS",
+        parameterWidget: AppCountWidgetParameters,
+        description: "Shows current app count and future app count info",
+        label: "App Counts",
+        icon: "desktop",
+        overlay: AppCountOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findAppCountsForDiagram,
+        mkGlobalProps: mkTargetAppCountGlobalProps,
+        resetParameters: resetTargetAppCountParameters,
+        aggregatedEntityKinds: [entity.APPLICATION.key]
+    }, {
+        key: "ASSESSMENTS",
+        label: "Assessments",
+        icon: "puzzle-piece",
+        description: "Allows user to select an assessment to overlay on the diagram",
+        parameterWidget: AssessmentWidgetParameters,
+        overlay: AssessmentOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findAppAssessmentsForDiagram,
+        mkGlobalProps: mkAssessmentOverlayGlobalProps,
+        resetParameters: resetAssessmentParameters,
+        aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
+    }, {
+        key: "BACKING_ENTITIES",
+        label: "Backing Entities",
+        icon: "cubes",
+        description: "Displays the underlying entities which drive the overlays on the diagram",
+        parameterWidget: BackingEntitiesWidgetParameters,
+        overlay: BackingEntitiesOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findBackingEntitiesForDiagram,
+        aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
+    }, {
+        key: "AGGREGATED_ENTITIES",
+        label: "Aggregated Entities",
+        icon: "pie-chart",
+        description: "Displays entities which are aggregated to populate the overlay data",
+        parameterWidget: AggregatedEntitiesWidgetParameters,
+        overlay: AggregatedEntitiesOverlayCell,
+        remoteMethod: aggregateOverlayDiagramStore.findAggregatedEntitiesForDiagram,
+        mkGlobalProps: mkAggregatedEntitiesGlobalProps,
+        aggregatedEntityKinds: [entity.APPLICATION.key, entity.CHANGE_INITIATIVE.key]
+    }
+];
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/CreatePresetPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/CreatePresetPanel.svelte
new file mode 100644
index 0000000000..ede1c56409
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/CreatePresetPanel.svelte
@@ -0,0 +1,102 @@
+<script>
+    import {createEventDispatcher, getContext} from "svelte";
+    import {displayError} from "../../../../common/error-utils";
+    import {primaryEntityRef} from "../../instance-selector/InstanceCreatePanel.svelte";
+    import {aggregateOverlayDiagramStore} from "../../../../svelte-stores/aggregate-overlay-diagram-store";
+    import Icon from "../../../../common/svelte/Icon.svelte";
+    import {entity} from "../../../../common/services/enums/entity";
+    import {toUpperSnakeCase} from "../../../../common/string-utils";
+
+    const focusWidget = getContext("focusWidget");
+    const filterParameters = getContext("filterParameters");
+    const widgetParameters = getContext("widgetParameters");
+    const diagramPresets = getContext("diagramPresets");
+    const selectedDiagram = getContext("selectedDiagram");
+
+    let name;
+    let description;
+    let presetsCall;
+
+    const dispatch = createEventDispatcher();
+
+    function createPreset() {
+
+        const filterConfig = [{
+            filterKind: entity.ASSESSMENT_RATING.key,
+            filterParameters: $filterParameters
+        }];
+
+        const overlayConfig = {
+            widgetKey: $focusWidget.key,
+            widgetParameters: $widgetParameters
+        };
+
+        const createCmd = {
+            name,
+            description,
+            diagramId: $selectedDiagram.id,
+            externalId: toUpperSnakeCase(name),
+            overlayConfig: JSON.stringify(overlayConfig),
+            filterConfig: JSON.stringify(filterConfig)
+        };
+
+        let createPromise = aggregateOverlayDiagramStore.createPreset(createCmd);
+
+        reloadPresetsForDiagram(createPromise);
+    }
+
+    function reloadPresetsForDiagram(createPromise) {
+        createPromise
+            .then(() => {
+                presetsCall = aggregateOverlayDiagramStore.findPresetsForDiagram($selectedDiagram.id, true)
+                $diagramPresets = $presetsCall?.data;
+            })
+            .catch(e => displayError("Could not save preset", e))
+            .finally(cancel)
+    }
+
+    function cancel() {
+        dispatch("cancel");
+    }
+
+</script>
+
+
+<div class="help-block">
+    <Icon name="info-circle"/>
+    Creating a preset will save this overlay and the selected filters for reuse
+</div>
+
+<form autocomplete="off"
+      on:submit|preventDefault={createPreset}>
+
+    <input class="form-control"
+           id="name"
+           maxlength="255"
+           required="required"
+           placeholder="Name"
+           bind:value={name}/>
+    <div class="help-block">
+        Name of the Preset
+    </div>
+
+    <textarea class="form-control"
+              id="description"
+              placeholder="Description"
+              bind:value={description}></textarea>
+    <div class="help-block">
+        Description of this preset
+    </div>
+
+
+    <button type="submit"
+            class="btn btn-success"
+            disabled={name === null}>
+        Save
+    </button>
+
+    <button class="btn skinny"
+            on:click|preventDefault={cancel}>
+        Cancel
+    </button>
+</form>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/PresetSelector.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/PresetSelector.svelte
new file mode 100644
index 0000000000..0550c9896c
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/presets/PresetSelector.svelte
@@ -0,0 +1,72 @@
+<script>
+    import _ from "lodash";
+    import {getContext} from "svelte";
+    import {widgets} from "../aggregate-overlay-diagram-utils";
+    import NoData from "../../../../common/svelte/NoData.svelte";
+
+    const focusWidget = getContext("focusWidget");
+    const filterParameters = getContext("filterParameters");
+    const widgetParameters = getContext("widgetParameters");
+    const diagramPresets = getContext("diagramPresets");
+    const selectedPreset = getContext("selectedPreset");
+
+    function selectPreset(preset) {
+
+        //must set to null until the parameters are prepared to make the new data call
+        $focusWidget = null;
+        $selectedPreset = preset;
+
+        const overlayConfig = JSON.parse(preset.overlayConfig);
+        const filterConfig = JSON.parse(preset.filterConfig);
+
+        const selectedWidget = _.find(widgets, d => d.key === overlayConfig.widgetKey);
+        const selectedFilter = _.first(filterConfig);
+
+        $widgetParameters = overlayConfig.widgetParameters;
+        $filterParameters = selectedFilter.filterParameters;
+
+        $focusWidget = selectedWidget;
+    }
+
+</script>
+
+
+{#if _.isEmpty($diagramPresets)}
+    <NoData type="warning">There are no presets for this diagram</NoData>
+{:else}
+    <table class="table table-condensed table-hover">
+        <colgroup>
+            <col width="40%"/>
+            <col width="60%"/>
+        </colgroup>
+        <thead>
+        <tr>
+            <th>Presets</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each $diagramPresets as preset}
+            <tr class="clickable"
+                class:selectedPreset={$selectedPreset?.id === preset.id}
+                on:click={() => selectPreset(preset)}>
+                <td>
+                    <button class="btn btn-skinny">{preset.name}</button>
+                </td>
+                <td>
+                    {preset.description || "-"}
+                </td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+{/if}
+
+
+<style>
+
+    .selectedPreset {
+        background-color: #fffbdc;
+    }
+
+</style>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte
index 309d9637d8..607ef02f2d 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/aggregated-entities/AggregatedEntitiesWidgetParameters.svelte
@@ -1,45 +1,10 @@
 <script>
-
     import {getContext} from "svelte";
-    import AggregatedEntitiesOverlayCell from "./AggregatedEntitiesOverlayCell.svelte";
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
-    import _ from "lodash";
 
-    const overlayDataCall = getContext("overlayDataCall");
-    const overlayData = getContext("overlayData");
-    const widget = getContext("widget");
-    const remoteMethod = getContext("remoteMethod");
     const widgetParameters = getContext("widgetParameters");
     const selectedOverlay = getContext("selectedOverlay");
 
-    function mkGlobalProps(data) {
-        const maxCount = _
-            .chain(data)
-            .map(d => _.size(d.aggregatedEntityReferences))
-            .max()
-            .value();
-        return {maxCount};
-    }
-
-    $: {
-
-        $remoteMethod = aggregateOverlayDiagramStore.findAggregatedEntitiesForDiagram;
-
-        $widgetParameters = {};
-
-        $selectedOverlay = null;
-
-        $widget = {
-            overlay: AggregatedEntitiesOverlayCell,
-            mkGlobalProps
-        };
-    }
+    $widgetParameters = {};
+    $selectedOverlay = null;
 </script>
 
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
-{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-costs/AppCostWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-costs/AppCostWidgetParameters.svelte
index f4daf6caf2..7306ac391f 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-costs/AppCostWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-costs/AppCostWidgetParameters.svelte
@@ -1,23 +1,26 @@
+<script context="module">
+    import {writable} from "svelte/store";
+
+    const selectedCostKinds = writable([]);
+    const selectedAllocationScheme = writable(null);
+
+    export function resetParameters() {
+        selectedCostKinds.set([]);
+        selectedAllocationScheme.set(null);
+    }
+
+</script>
+
 <script>
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
     import {getContext} from "svelte";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
     import AllocationSchemePicker
         from "../../../../../report-grid/components/svelte/pickers/AllocationSchemePicker.svelte";
     import CostKindPicker from "../../../../../report-grid/components/svelte/pickers/CostKindPicker.svelte";
     import _ from "lodash";
-    import AppCostOverlayCell from "./AppCostOverlayCell.svelte";
 
-    const selectedDiagram = getContext("selectedDiagram");
-    const widget = getContext("widget");
     const selectedOverlay = getContext("selectedOverlay");
-    const selectedCostKinds = getContext("selectedCostKinds");
-    const selectedAllocationScheme = getContext("selectedAllocationScheme");
     const widgetParameters = getContext("widgetParameters");
-    const remoteMethod = getContext("remoteMethod");
-    const overlayDataCall = getContext("overlayDataCall");
 
-    let selectedCostKindIds = [];
     let selectedDefinition;
 
     const Modes = {
@@ -30,32 +33,14 @@
         ? Modes.SUMMARY
         : Modes.ALLOCATION_SCHEME_PICKER;
 
-
-    function mkGlobalProps(data) {
-        const maxCost = _
-            .chain(data)
-            .map(d => d.totalCost)
-            .max()
-            .value();
-        return {maxCost};
-    }
-
     function onSelect() {
-
-        $remoteMethod = aggregateOverlayDiagramStore.findAppCostForDiagram;
-
         $widgetParameters = {
             allocationSchemeId: $selectedAllocationScheme.id,
             costKindIds: selectedCostKindIds,
-        }
+        };
 
         $selectedOverlay = null;
 
-        $widget = {
-            overlay: AppCostOverlayCell,
-            mkGlobalProps
-        };
-
         activeMode = Modes.SUMMARY;
     }
 
@@ -137,11 +122,3 @@
         Change allocation scheme
     </button>
 {/if}
-
-
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
-{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountOverlayCell.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountOverlayCell.svelte
index 6f778e4919..762fc2fb50 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountOverlayCell.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountOverlayCell.svelte
@@ -40,10 +40,10 @@
         {#if _.isNil(cellData)}
             -
         {:else}
-            <div style={`font-size: ${height/5}px; width: 100%; text-align: center`}>
+            <div style={`font-size: ${height/4}px; width: 100%; text-align: center`}>
                 App Count: #{cellData?.currentStateCount} &raquo; #{cellData?.targetStateCount}
             </div>
-            <div style={`font-size: ${height / 6}px; width: 100%; text-align: center`}>
+            <div style={`font-size: ${height / 5}px; width: 100%; text-align: center`}>
                 Change: {cellData?.targetStateCount - cellData?.currentStateCount}
             </div>
         {/if}
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountWidgetParameters.svelte
index 0b30662133..7f63c06b7c 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/app-counts/AppCountWidgetParameters.svelte
@@ -1,77 +1,48 @@
+<script context="module">
+    import {writable} from "svelte/store";
+
+    const sliderVal = writable(0);
+
+    export function resetParameters() {
+        sliderVal.set(0);
+    }
+</script>
+
 <script>
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
     import {getContext} from "svelte";
     import {timeFormat} from "d3-time-format";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
-    import AppCountOverlayCell from "./AppCountOverlayCell.svelte";
     import _ from "lodash";
+    import moment from "moment";
 
     const fmt = timeFormat("%Y-%m-%d");
-    const selectedDiagram = getContext("selectedDiagram");
     const selectedOverlay = getContext("selectedOverlay");
-    const widget = getContext("widget");
-    const appCountSliderValue = getContext("appCountSliderValue");
-    const filterParameters = getContext("appCountSliderValue");
     const widgetParameters = getContext("widgetParameters");
-    const remoteMethod = getContext("remoteMethod");
-    const overlayDataCall = getContext("overlayDataCall");
-
-    let futureDate = null;
-
-    function mkGlobalProps(data) {
-        const maxCount = _
-            .chain(data)
-            .map(d => [d.currentStateCount, d.targetStateCount])
-            .flatten()
-            .max()
-            .value();
-        return { maxCount };
-    }
 
     function onSelect(futureDate) {
-
-        $remoteMethod = aggregateOverlayDiagramStore.findAppCountsForDiagram;
-
         $widgetParameters = {
             targetDate: fmt(futureDate)
-        }
-
-        $selectedOverlay = null;
-
-        $widget = {
-            overlay: AppCountOverlayCell,
-            mkGlobalProps
         };
+        $selectedOverlay = null;
     }
 
     const debouncedOnSelect = _.debounce(onSelect, 500);
 
+    let futureDate = null;
 
+    $: futureDate = moment().set("date", 1).add($sliderVal, "months");
     $: debouncedOnSelect(futureDate);
-
 </script>
 
-
-
 <label for="future-date">Projected app counts for:</label>
 <span>{fmt(futureDate)}</span>
-
 <input id="future-date"
        type="range"
        min="0"
-       max="60"
-       bind:value={$appCountSliderValue}>
+       max="120"
+       bind:value={$sliderVal}>
 
 <div class="help-block">
     Use the slider to adjust how far in the future to application counts.
     This is calculated by incorporating app retirement dates and subtracting their associated
     apps from the current total.
 </div>
-
-
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
-{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentOverlayCell.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentOverlayCell.svelte
index c3fa4049c6..6d474ee5c1 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentOverlayCell.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentOverlayCell.svelte
@@ -1,61 +1,19 @@
 <script>
-    import _ from "lodash";
-    import {scaleBand, scaleLinear} from "d3-scale";
+    import {renderMode, Modes} from "./store";
+    import BarGraphCell from "./BarGraphCell.svelte";
+    import BoxGraphCell from "./BoxGraphCell.svelte";
 
     export let cellData = [];
     export let maxCount = 0;
-    export let height;
-    export let width;
-
-    const rowHeight = height / 3 < defaultHeight
-        ? defaultHeight
-        : height / 3;
-
-    let counts = [];
-    let y;
-    let defaultHeight = 14
-
-
-    $: counts = _.orderBy(cellData?.counts, c => c.rating.name);
-
-    $: svgHeight = Math.max(counts.length * rowHeight, height);
-
-    $: y = scaleBand()
-        .domain(counts.map(c => c.rating.id))
-        .range([0, svgHeight])
-
-    $:x = scaleLinear()
-        .domain([0, maxCount])
-        .range([0, width / 3]);
-
-
-    $: textSize = rowHeight - 1
 
+    $: comp = $renderMode === Modes.BAR
+        ? BarGraphCell
+        : BoxGraphCell;
 
 </script>
 
-
-<svg class="content"
-     width="100%"
-     height={svgHeight + 10}
-     style="background: white">
-    <g transform="translate(0, 5)">
-        {#each counts as r}
-            <rect x="0"
-                  y={y(r.rating.id)}
-                  width={x(r.count)}
-                  height={rowHeight}
-                  stroke="#888"
-                  fill={r.rating.color}>
-                <title>{r.rating.name}</title>
-            </rect>
-            <text dx={width / 3 + 2}
-                  dy={y(r.rating.id) + rowHeight / 2 + textSize / 2}
-                  font-size={textSize}
-                  fill="#666">
-                {r.rating.name || "?"}
-                <title>{r.rating.name}</title>
-            </text>
-        {/each}
-    </g>
-</svg>
+<div class="content">
+    <svelte:component this={comp}
+                      {cellData}
+                      {maxCount}/>
+</div>
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentWidgetParameters.svelte
index 9303067e15..d700512c36 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/AssessmentWidgetParameters.svelte
@@ -1,74 +1,131 @@
+<script context="module">
+    import {writable} from "svelte/store";
+
+    const selectedDefinition = writable(null);
+    const useTargetDate = writable(false);
+    const sliderVal = writable(0);
+    const mode = writable("BAR");
+
+    export function resetParameters() {
+        mode.set("BAR");
+        selectedDefinition.set(null);
+        useTargetDate.set(false);
+        sliderVal.set(0);
+    }
+
+</script>
+
 <script>
     import AssessmentDefinitionPicker
         from "../../../../../report-grid/components/svelte/pickers/AssessmentDefinitionPicker.svelte";
-    import Markdown from "../../../../../common/svelte/Markdown.svelte";
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
     import {getContext} from "svelte";
-    import AssessmentOverlayCell from "./AssessmentOverlayCell.svelte";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
-    import _ from "lodash";
+    import {renderMode, Modes} from "./store";
+    import moment from "moment";
+    import {timeFormat} from "d3-time-format";
+    import DescriptionFade from "../../../../../common/svelte/DescriptionFade.svelte";
 
-    const widget = getContext("widget");
     const selectedOverlay = getContext("selectedOverlay");
     const selectedDiagram = getContext("selectedDiagram");
-    const selectedAssessmentDefinition = getContext("selectedAssessmentDefinition");
-    const remoteMethod = getContext("remoteMethod");
-    const overlayDataCall = getContext("overlayDataCall");
     const widgetParameters = getContext("widgetParameters");
 
-    function mkGlobalProps(data) {
-        const maxCount = _
-            .chain(data)
-            .map(d => d.counts)
-            .flatten()
-            .map(d => d.count)
-            .max()
-            .value();
-
-        return {maxCount};
-    }
+    const fmt = timeFormat("%Y-%m-%d");
 
+    function load(assessmentDef, targetDate) {
+        if (assessmentDef) {
+            $widgetParameters = {
+                assessmentDefinitionId: assessmentDef.id,
+                targetDate
+            };
 
-    function changeDefinition() {
-        $selectedAssessmentDefinition = null;
+            $selectedOverlay = null;
+        }
     }
 
 
-    function onSelect(ad) {
-
-        $remoteMethod = aggregateOverlayDiagramStore.findAppAssessmentsForDiagram;
-
-        $widgetParameters = {
-            assessmentDefinitionId: ad.id
-        }
+    $: targetDate = $useTargetDate
+        ? moment().set("date", 1).add($sliderVal, "months")
+        : null;
 
-        $selectedOverlay = null;
+    $: $renderMode = Modes[$mode];
 
-        $widget = {
-            mkGlobalProps,
-            overlay: AssessmentOverlayCell
-        };
+    $: {
+        load($selectedDefinition, targetDate);
     }
-
 </script>
 
-{#if $selectedAssessmentDefinition}
-    <h4>Showing: {$selectedAssessmentDefinition.name}</h4>
+{#if $selectedDefinition}
+    <h5>
+        {$selectedDefinition.name}
+        <button class="btn btn-skinny"
+                on:click={() => $selectedDefinition = null}>
+            (Change assessment)
+        </button>
+    </h5>
 
     <div class="help-block">
-        <Markdown text={$selectedAssessmentDefinition.description}/>
+        <DescriptionFade text={$selectedDefinition.description}/>
     </div>
-    <button class="btn btn-skinny" on:click={changeDefinition}>
-        Change assessment
-    </button>
+
 {:else}
-    <AssessmentDefinitionPicker {onSelect}
+    <AssessmentDefinitionPicker onSelect={ad => $selectedDefinition = ad}
                                 selectionFilter={ad => ad.entityKind === $selectedDiagram.aggregatedEntityKind}/>
 {/if}
 
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
+
+{#if $selectedDefinition}
+    <br>
+
+    <h4>Rendering Mode</h4>
+    <p class="help-block">
+        Controls how the assessment data will be displayed.
+    </p>
+    <label>
+        <input style="display: inline-block;"
+               type="radio"
+               bind:group={$mode}
+               name="renderMode"
+               value={"BAR"}>
+        Bar Chart
+    </label>
+
+    <label>
+        <input style="display: inline-block;"
+               type="radio"
+               bind:group={$mode}
+               name="renderMode"
+               value={"BOX"}>
+        Box Chart
+    </label>
+
+    <br>
+
+    <h4>Date</h4>
+    <p class="help-block">
+        Calculate a future projected view of this assessment.
+        This is based upon app retirements and app/function decomms (and replacements).
+    </p>
+    <label>
+        <input type="checkbox"
+               bind:checked={$useTargetDate}>
+        Use target date?
+    </label>
+
+
+    <input id="future-date"
+           type="range"
+           min="0"
+           max="120"
+           disabled={!$useTargetDate}
+           bind:value={$sliderVal}>
+    <span>
+        {targetDate
+            ? fmt(targetDate)
+            : '-'}
+    </span>
 {/if}
+
+<style>
+    label {
+        font-weight: normal;
+    }
+</style>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BarGraphCell.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BarGraphCell.svelte
new file mode 100644
index 0000000000..7f41702797
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BarGraphCell.svelte
@@ -0,0 +1,50 @@
+<script>
+    import _ from "lodash";
+    import {scaleBand, scaleLinear} from "d3-scale";
+
+    export let cellData = [];
+    export let maxCount = 0;
+
+    const rowHeight = 14;
+
+    let counts = [];
+    let y;
+
+    $: counts = _.orderBy(cellData?.counts, c => c.rating.name);
+
+    $: height = Math.max(counts.length * rowHeight, rowHeight);
+
+    $: y = scaleBand()
+        .domain(counts.map(c => c.rating.id))
+        .range([0, height])
+
+    $:x = scaleLinear()
+        .domain([0, maxCount])
+        .range([0, 30]);
+
+</script>
+
+
+<svg width="100%"
+     height={height + 10}
+     style="background: white">
+    <g transform="translate(0, 5)">
+        {#each counts as r}
+            <rect x="0"
+                  y={y(r.rating.id)}
+                  width={x(r.count)}
+                  height={rowHeight}
+                  stroke="#888"
+                  fill={r.rating.color}>
+                <title>{r.rating.name}</title>
+            </rect>
+            <text dx="32"
+                  dy={y(r.rating.id) + rowHeight - 4}
+                  font-size={rowHeight - 1}
+                  fill="#666">
+                {r.rating.name || "?"}
+                <title>{r.rating.name}</title>
+            </text>
+        {/each}
+    </g>
+</svg>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BoxGraphCell.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BoxGraphCell.svelte
new file mode 100644
index 0000000000..6147dbbf9f
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/BoxGraphCell.svelte
@@ -0,0 +1,60 @@
+<script>
+    import _ from "lodash";
+    import {scaleBand, scaleLinear} from "d3-scale";
+    import {mkChunks} from "../../../../../common/list-utils";
+    import {determineForegroundColor} from "../../../../../common/colors";
+    import RatingIndicatorCell
+        from "../../../../../ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte";
+
+    export let cellData = [];
+
+    const rowHeight = 18;
+
+    let counts = [];
+
+    $: counts = _.orderBy(cellData?.counts, c => c.rating.name);
+    $: rows = mkChunks(counts, 6);
+    $: height = Math.max(rows.length * rowHeight, rowHeight);
+</script>
+
+
+<svg width="100%"
+     height={height + 10}
+     style="background: white">
+    <g transform="translate(5, 5)">
+        {#each rows as row, idx}
+            <g class="box-row"
+               transform={`translate(0, ${idx * rowHeight})`}>
+                {#each row as box, idx}
+                    <g transform="translate({idx * (rowHeight + 4)})">
+                        <rect height={rowHeight}
+                              stroke="black"
+                              width={rowHeight}
+                              fill={box.rating.color}/>
+                        <text dy={rowHeight - 4}
+                              text-anchor="middle"
+                              fill={determineForegroundColor(box.rating.color)}
+                              x={rowHeight/2}>
+                            {box.count}
+                        </text>
+                        <title>
+                            {box.rating.name}
+                        </title>
+                    </g>
+                {/each}
+            </g>
+        {/each}
+    </g>
+</svg>
+<br>
+<br>
+<table class="small table table-condensed">
+    {#each counts as row}
+        <tr>
+            <td>
+                <RatingIndicatorCell {...row.rating}/>
+                ({row.count})
+            </td>
+        </tr>
+    {/each}
+</table>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/store.js b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/store.js
new file mode 100644
index 0000000000..568698f114
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/assessments/store.js
@@ -0,0 +1,8 @@
+import {writable} from "svelte/store";
+
+export const Modes = {
+    BAR: Symbol("BAR"),
+    BOX: Symbol("BOX")
+};
+
+export const renderMode = writable(Modes.BOX);
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesOverlayCell.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesOverlayCell.svelte
index 169be7e28c..8591115067 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesOverlayCell.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesOverlayCell.svelte
@@ -39,8 +39,6 @@
 
 
 <style>
-
-
     ul {
         padding: 0.1em 0 0 0;
         margin: 0 0 0 0;
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesWidgetParameters.svelte
index b4e02d5d71..d7e942e270 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/backing-entities/BackingEntitiesWidgetParameters.svelte
@@ -1,32 +1,9 @@
 <script>
-
     import {getContext} from "svelte";
-    import BackingEntitiesOverlayCell from "./BackingEntitiesOverlayCell.svelte";
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
-
-    const overlayData = getContext("overlayData");
-    const selectedDiagram = getContext("selectedDiagram");
-    const widget = getContext("widget");
-
-    let overlayDataCall;
 
-    $: {
-        if ($selectedDiagram) {
-            overlayDataCall = aggregateOverlayDiagramStore.findBackingEntitiesForDiagram($selectedDiagram.id);
-            $widget = {
-                overlay: BackingEntitiesOverlayCell
-            };
-        }
-    }
-
-    $: $overlayData = $overlayDataCall?.data;
+    const widgetParameters = getContext("widgetParameters");
+    const selectedOverlay = getContext("selectedOverlay");
 
+    $widgetParameters = {};
+    $selectedOverlay = null;
 </script>
-
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
-{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/target-costs/TargetAppCostWidgetParameters.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/target-costs/TargetAppCostWidgetParameters.svelte
index 0df26e6e1b..30aa05c1bf 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/target-costs/TargetAppCostWidgetParameters.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/aggregate-overlay-diagram/widgets/target-costs/TargetAppCostWidgetParameters.svelte
@@ -1,52 +1,37 @@
+<script context="module">
+    import {writable} from "svelte/store";
+
+    const sliderVal = writable(0);
+
+    export function resetParameters() {
+        sliderVal.set(0);
+    }
+
+</script>
+
 <script>
-    import {aggregateOverlayDiagramStore} from "../../../../../svelte-stores/aggregate-overlay-diagram-store";
     import {getContext} from "svelte";
     import {timeFormat} from "d3-time-format";
     import moment from "moment";
-    import Icon from "../../../../../common/svelte/Icon.svelte";
-    import TargetAppCostOverlayCell from "./TargetAppCostOverlayCell.svelte";
     import _ from "lodash";
 
     const fmt = timeFormat("%Y-%m-%d");
     const selectedOverlay = getContext("selectedOverlay");
-    const costSliderValue = getContext("costSliderValue");
-    const remoteMethod = getContext("remoteMethod");
     const widgetParameters = getContext("widgetParameters");
-    const overlayDataCall = getContext("overlayDataCall");
-    const widget = getContext("widget");
-
-
-    function mkGlobalProps(data) {
-        const maxCost = _
-            .chain(data)
-            .map(d => [d.currentStateCost, d.targetStateCost])
-            .flatten()
-            .max()
-            .value();
-        return { maxCost };
-    }
 
     function onSelect(futureDate) {
-
-        $remoteMethod = aggregateOverlayDiagramStore.findTargetAppCostForDiagram;
-
         $widgetParameters = {
             targetDate: fmt(futureDate)
-        }
-
-        $selectedOverlay = null;
-
-        $widget = {
-            overlay: TargetAppCostOverlayCell,
-            mkGlobalProps
         };
+        $selectedOverlay = null;
     }
 
     const debouncedOnSelect = _.debounce(onSelect, 500);
 
-    $: futureDate = moment().set("date", 1).add($costSliderValue * 2, "months");
-    $: debouncedOnSelect(futureDate);
+    let futureDate = null;
 
+    $: futureDate = moment().set("date", 1).add($sliderVal, "months");
+    $: debouncedOnSelect(futureDate);
 </script>
 
 
@@ -56,19 +41,11 @@
 <input id="future-date"
        type="range"
        min="0"
-       max="60"
-       bind:value={$costSliderValue}>
+       max="120"
+       bind:value={$sliderVal}>
 
 <div class="help-block">
     Use the slider to adjust how far in the future to project costs.
     This is calculated by incorporating app retirement dates and subtracting their associated
     costs from the current total.
 </div>
-
-
-{#if $overlayDataCall?.status === 'loading'}
-    <h4>
-        Loading
-        <Icon name="refresh" spin="true"/>
-    </h4>
-{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/AggregateOverlayDiagramContextPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/AggregateOverlayDiagramContextPanel.svelte
index e1158f21ae..b33ed1a3ae 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/AggregateOverlayDiagramContextPanel.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/AggregateOverlayDiagramContextPanel.svelte
@@ -1,22 +1,53 @@
 <script>
-
     import {getContext} from "svelte";
-    import WidgetSelector from "../aggregate-overlay-diagram/WidgetSelector.svelte";
     import DescriptionFade from "../../../common/svelte/DescriptionFade.svelte";
     import DiagramInstanceSelector from "../instance-selector/DiagramInstanceSelector.svelte";
     import SelectedOverlayPanel from "./SelectedOverlayPanel.svelte";
-    import FilterSelectorPanel from "../filter-selector/FilterSelectorPanel.svelte";
+    import CustomiseOverlayPanel from "./CustomiseOverlayPanel.svelte";
+    import html2canvas from "html2canvas";
+    import Icon from "../../../common/svelte/Icon.svelte";
 
     export let primaryEntityRef;
 
     let selectedInstance = getContext("selectedInstance");
     let selectedDiagram = getContext("selectedDiagram");
 
-    let selectedTab = 'widgets'
+    let selectedTab = 'widgets';
+    let generatingDiagram = false;
 
     function selectInstance(evt) {
         $selectedInstance = evt.detail;
     }
+
+    function exportDiagram() {
+
+        const element = document.querySelector("#diagram-capture");
+
+        if (element) {
+
+            generatingDiagram = true;
+            //Using a timeout so browser has chance to display the progress icon
+            setTimeout(() => {
+                    return html2canvas(element)
+                        .then(canvas => {
+                            document.body.appendChild(canvas);
+                            return canvas;
+                        })
+                        .then(canvas => {
+                            const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+                            const a = document.createElement('a');
+                            a.setAttribute('download', `${$selectedDiagram.name}-image.png`);
+                            a.setAttribute('href', image);
+                            a.click();
+                            canvas.remove();
+                        })
+                        .then(() => generatingDiagram = false);
+                },
+                0);
+
+        }
+    }
+
 </script>
 
 <div class="row waltz-tabs"
@@ -28,7 +59,7 @@
            id="widgets">
     <label class="wt-label"
            for="widgets">
-        <span>Overlays</span>
+        <span>Configuration</span>
     </label>
 
     <input type="radio"
@@ -49,36 +80,40 @@
         <span>Instances</span>
     </label>
 
-    <input type="radio"
-           bind:group={selectedTab}
-           value="filters"
-           id="filters">
-    <label class="wt-label"
-           for="filters">
-        <span>Filters</span>
-    </label>
-
     <div class="wt-tab wt-active">
         <!-- SERVERS -->
         {#if selectedTab === 'widgets'}
+            <CustomiseOverlayPanel {primaryEntityRef}/>
 
-            <WidgetSelector {primaryEntityRef}/>
+        {:else if selectedTab === 'info'}
+
+            <h4>{$selectedDiagram.name}</h4>
+            <DescriptionFade text={$selectedDiagram.description}/>
 
             <hr>
 
             <SelectedOverlayPanel/>
 
-        {:else if selectedTab === 'info'}
+            <hr>
+
+            <button class="btn btn-link"
+                    on:click={() => exportDiagram()}
+                    disabled={generatingDiagram}>
+                {#if generatingDiagram}
+                    <Icon fixedWidth="true"
+                          name="refresh"
+                          spin="true"/>
+                {:else}
+                    <Icon fixedWidth="true"
+                          name="cloud-download"/>
+                {/if}
+                Export diagram
+            </button>
 
-            <h4>{$selectedDiagram.name}</h4>
-            <DescriptionFade text={$selectedDiagram.description}/>
 
         {:else if selectedTab === 'instances'}
             <DiagramInstanceSelector {primaryEntityRef}
                                      on:select={selectInstance}/>
-
-        {:else if selectedTab === 'filters'}
-            <FilterSelectorPanel/>
         {/if}
     </div>
 </div>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/CustomiseOverlayPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/CustomiseOverlayPanel.svelte
new file mode 100644
index 0000000000..c037e7ad0c
--- /dev/null
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/CustomiseOverlayPanel.svelte
@@ -0,0 +1,69 @@
+<script>
+
+    import WidgetSelector from "../aggregate-overlay-diagram/WidgetSelector.svelte";
+    import CreatePresetPanel from "../aggregate-overlay-diagram/presets/CreatePresetPanel.svelte";
+    import PresetSelector from "../aggregate-overlay-diagram/presets/PresetSelector.svelte";
+    import Icon from "../../../common/svelte/Icon.svelte";
+    import FilterSelectorPanel from "../filter-selector/FilterSelectorPanel.svelte";
+    import {mkSelectionOptions} from "../../../common/selector-utils";
+    import {getContext} from "svelte";
+    import _ from "lodash";
+    import NoData from "../../../common/svelte/NoData.svelte";
+
+    export let primaryEntityRef;
+
+    const diagramPresets = getContext("diagramPresets");
+
+    const selectionOptions = getContext("selectionOptions");
+
+    const Modes = {
+        PRESET: "PRESET",
+        CUSTOM: "CUSTOM",
+        CREATE_PRESET: "CREATE_PRESET"
+    }
+
+    $: $selectionOptions = mkSelectionOptions(primaryEntityRef);
+
+    let activeMode = Modes.CUSTOM;
+
+</script>
+
+
+{#if activeMode === Modes.PRESET}
+    <div class="help-block">
+        <Icon name="info-circle"/>
+        Select a preset from the list below, or alternatively create a custom view
+        from the overlay and filter pickers.
+    </div>
+    <PresetSelector/>
+    <button class="btn btn-skinny"
+            on:click={() => activeMode = Modes.CUSTOM}>
+        <Icon name="plus"/>
+        Create custom overlay
+    </button>
+{:else if activeMode === Modes.CUSTOM}
+    {#if !_.isEmpty($diagramPresets)}
+        <NoData type="info">
+            There are
+            <button class="btn btn-skinny"
+                    on:click={() => activeMode = Modes.PRESET}>
+                {_.size($diagramPresets)} preset overlays
+            </button>
+            configured for this diagram
+        </NoData>
+        <br>
+    {/if}
+    <WidgetSelector {primaryEntityRef}/>
+    <hr>
+    <FilterSelectorPanel/>
+    <div>
+        <br>
+        <button class="btn btn-skinny"
+                on:click={() => activeMode = Modes.CREATE_PRESET}>
+            <Icon name="save"/>
+            Save as preset
+        </button>
+    </div>
+{:else if activeMode === Modes.CREATE_PRESET}
+    <CreatePresetPanel on:cancel={() => activeMode = Modes.CUSTOM}/>
+{/if}
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/SelectedOverlayPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/SelectedOverlayPanel.svelte
index a55ef3502a..5efe8f111f 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/SelectedOverlayPanel.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/context-panel/SelectedOverlayPanel.svelte
@@ -1,10 +1,12 @@
 <script>
     import {getContext} from "svelte";
+    import Icon from "../../../common/svelte/Icon.svelte";
 
     const selectedOverlayCell = getContext("selectedOverlay");
-    const widget = getContext("widget");
+    const widget = getContext("focusWidget");
 
     let overlayHolder;
+    let selectedCellHeight = 0;
 
     $: {
         if (overlayHolder && $widget) {
@@ -17,7 +19,6 @@
                     target: overlayHolder,
                     props: Object.assign({}, $selectedOverlayCell.props, {isContext: true})
                 });
-
             }
         }
     }
@@ -25,5 +26,15 @@
 
 {#if $selectedOverlayCell}
     <h4>{$selectedOverlayCell?.cellName}</h4>
+{:else}
+    <div class="help-block">
+        <Icon name="info-circle"/>
+        Select a cell on the diagram to view the overlay in more detail
+    </div>
 {/if}
-<div bind:this={overlayHolder}></div>
+<div class:waltz-scroll-region-400={selectedCellHeight > 400}>
+    <div bind:clientHeight={selectedCellHeight}>
+        <div bind:this={overlayHolder}>
+        </div>
+    </div>
+</div>
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/filter-selector/FilterSelectorPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/filter-selector/FilterSelectorPanel.svelte
index 8377127de7..da98a572e3 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/filter-selector/FilterSelectorPanel.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/filter-selector/FilterSelectorPanel.svelte
@@ -3,13 +3,7 @@
     import AssessmentRatingPicker from "../../../common/svelte/AssessmentRatingPicker.svelte";
     import {getContext} from "svelte";
     import _ from "lodash";
-
-    const Modes = {
-        PICKER: "PICKER",
-        VIEW: "VIEW"
-    }
-
-    let activeMode = Modes.VIEW
+    import Icon from "../../../common/svelte/Icon.svelte";
 
     const filterParameters = getContext("filterParameters");
     const selectedDiagram = getContext("selectedDiagram");
@@ -30,33 +24,18 @@
 
 </script>
 
-
-{#if activeMode === Modes.VIEW}
-    {#if $filterParameters}
-        <h4>
-            Selected category: {$filterParameters?.assessmentDefinition.name}
-        </h4>
-        <h4>
-            Selected ratings: {ratings}
-        </h4>
-        <button class="btn btn-skinny"
-                on:click={() => $filterParameters = null}>
-            Clear filters
-        </button>
-    {:else }
-        <span>No filters have been selected.
-            <button class="btn btn-skinny"
-                    on:click={() => activeMode =Modes.PICKER}>
-                Pick one now
-            </button>
-        </span>
-    {/if}
-{:else if activeMode = Modes.PICKER}
-    <AssessmentRatingPicker on:select={selectRatings}
-                            definitionFilter={definitionFilter}/>
-    <br>
+<h4>
+    <Icon name="filter"/>
+    Filters
+</h4>
+<AssessmentRatingPicker on:select={selectRatings}
+                        definitionFilter={definitionFilter}
+                        selectedDefinition={$filterParameters?.assessmentDefinition}
+                        selectedRatings={$filterParameters?.ratingSchemeItems}/>
+{#if $filterParameters}
     <button class="btn btn-skinny"
-            on:click={() => activeMode = Modes.VIEW}>
-        View selection
+            on:click={() => $filterParameters = null}>
+        <Icon name="ban"/>
+        Clear filters
     </button>
 {/if}
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/instance-selector/DiagramInstanceSelector.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/instance-selector/DiagramInstanceSelector.svelte
index 292a0a7993..74b08264d2 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/instance-selector/DiagramInstanceSelector.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/instance-selector/DiagramInstanceSelector.svelte
@@ -51,16 +51,27 @@
                 </button>
             {/if}
         </p>
-        <ul>
+
+        <table class="table table-condensed table-hover">
+            <colgroup>
+                <col width="40%"/>
+                <col width="60%"/>
+            </colgroup>
+            <tbody>
             {#each $instances as instance}
-                <li>
-                    <EntityLink ref={instance}/>
-                    <span class="text-muted">
+                <tr>
+                    <td>
+                        <EntityLink ref={instance}/>
+                    </td>
+                    <td>
+                        <span class="text-muted">
                         <LastEdited entity={instance}/>
                     </span>
-                </li>
+                    </td>
+                </tr>
             {/each}
-        </ul>
+            </tbody>
+        </table>
     {:else}
         <p>There are no instances of this diagram at this vantage point
             {#if hasEditPermissions}
@@ -77,16 +88,3 @@
     <InstanceCreatePanel {primaryEntityRef}
                          on:cancel={() => activeMode = Modes.VIEW}/>
 {/if}
-
-<style>
-    ul {
-        padding: 0.2em 0 0 0;
-        margin: 0 0 0 0;
-        list-style: none;
-    }
-
-    li {
-        padding-top: 0.2em;
-    }
-
-</style>
\ No newline at end of file
diff --git a/waltz-ng/client/aggregate-overlay-diagram/components/panel/AggregateOverlayDiagramPanel.svelte b/waltz-ng/client/aggregate-overlay-diagram/components/panel/AggregateOverlayDiagramPanel.svelte
index 1f54372e30..593199b064 100644
--- a/waltz-ng/client/aggregate-overlay-diagram/components/panel/AggregateOverlayDiagramPanel.svelte
+++ b/waltz-ng/client/aggregate-overlay-diagram/components/panel/AggregateOverlayDiagramPanel.svelte
@@ -5,7 +5,11 @@
     import {aggregateOverlayDiagramCalloutStore} from "../../../svelte-stores/aggregate-overlay-diagram-callout-store";
     import DiagramSelector from "../diagram-selector/DiagramSelector.svelte";
     import NoData from "../../../common/svelte/NoData.svelte";
-    import {setupContextStores, determineWhichCellsAreLinkedByParent} from "../aggregate-overlay-diagram/aggregate-overlay-diagram-utils";
+    import {
+        determineWhichCellsAreLinkedByParent,
+        setupContextStores,
+        widgets
+    } from "../aggregate-overlay-diagram/aggregate-overlay-diagram-utils";
     import _ from "lodash";
     import AggregateOverlayDiagramContextPanel from "../context-panel/AggregateOverlayDiagramContextPanel.svelte";
     import Icon from "../../../common/svelte/Icon.svelte";
@@ -25,27 +29,21 @@
     let diagramProportion = getContext("diagramProportion");
     let cellIdsExplicitlyRelatedToParent = getContext("cellIdsExplicitlyRelatedToParent");
     let focusWidget = getContext("focusWidget");
-    let costSliderValue = getContext("costSliderValue");
-    let appCountSliderValue = getContext("appCountSliderValue");
-    let selectedCostKinds = getContext("selectedCostKinds");
-    let selectedAllocationScheme = getContext("selectedAllocationScheme");
-    let selectedAssessmentDefinition = getContext("selectedAssessmentDefinition");
+    let diagramPresets = getContext("diagramPresets");
+    let overlayDataCall = getContext("overlayDataCall");
+    let loading = getContext("loading");
 
     let svgCall;
     let calloutCall;
     let diagramsCall;
     let relatedEntitiesCall;
+    let presetsCall;
 
     function clearWidgetParameters() {
         $focusWidget = null;
-        $costSliderValue = 0;
-        $appCountSliderValue = 0;
-        $selectedCostKinds = [];
-        $selectedAllocationScheme = null;
-        $selectedAssessmentDefinition = null;
+        _.each(widgets, d => d.resetParameters ? d.resetParameters() : null);
     }
 
-
     function selectDiagram(evt) {
         clearWidgetParameters();
         $selectedInstance = null;
@@ -65,6 +63,7 @@
         if ($selectedDiagram) {
             svgCall = aggregateOverlayDiagramStore.getById($selectedDiagram.id);
             relatedEntitiesCall = measurableRelationshipStore.findByEntityReference(primaryEntityRef);
+            presetsCall = aggregateOverlayDiagramStore.findPresetsForDiagram($selectedDiagram.id);
         }
     }
 
@@ -79,6 +78,7 @@
     $: diagrams = $diagramsCall?.data || [];
     $: relatedEntities = $relatedEntitiesCall?.data;
     $: $cellIdsExplicitlyRelatedToParent = determineWhichCellsAreLinkedByParent(backingEntities, relatedEntities);
+    $: $diagramPresets = $presetsCall?.data;
 
 </script>
 
@@ -101,7 +101,15 @@
                         </h4>
 
                     </div>
-                    <div class="col-sm-6">
+                    <div class="col-sm-4">
+                        {#if $loading}
+                            <h4>
+                                Loading
+                                <Icon name="refresh" spin="true"/>
+                            </h4>
+                        {/if}
+                    </div>
+                    <div class="col-sm-2">
                         <div class="pull-right btn-group">
                             <button class="btn btn-default btn-xs"
                                     title="Expand Diagram"
diff --git a/waltz-ng/client/common/svelte/AssessmentRatingPicker.svelte b/waltz-ng/client/common/svelte/AssessmentRatingPicker.svelte
index d9239506ef..fe76d1f96f 100644
--- a/waltz-ng/client/common/svelte/AssessmentRatingPicker.svelte
+++ b/waltz-ng/client/common/svelte/AssessmentRatingPicker.svelte
@@ -1,17 +1,17 @@
 <script>
-    import AssessmentDefinitionPicker from "../../report-grid/components/svelte/pickers/AssessmentDefinitionPicker.svelte";
+    import AssessmentDefinitionPicker
+        from "../../report-grid/components/svelte/pickers/AssessmentDefinitionPicker.svelte";
     import {ratingSchemeStore} from "../../svelte-stores/rating-schemes";
     import RatingPicker from "./RatingPicker.svelte";
     import {createEventDispatcher} from "svelte";
     import Markdown from "./Markdown.svelte";
 
     export let definitionFilter = () => true;
-
+    export let selectedDefinition = null;
+    export let selectedRatings = [];
     const dispatch = createEventDispatcher();
     const loadSchemesCall = ratingSchemeStore.loadAll(true);
 
-    let selectedDefinition = null;
-    let selectedRatings = null;
     let schemesById = {};
 
     function onDefinitionSelect(def) {
@@ -32,16 +32,17 @@
     <AssessmentDefinitionPicker selectionFilter={definitionFilter}
                                 onSelect={onDefinitionSelect} />
 {:else}
-    <h4>{selectedDefinition.name}</h4>
-    <div class="help-text">
+    <h5>{selectedDefinition.name}
+        <button class="btn btn-skinny"
+                on:click={() => selectedDefinition = null}>
+            (Change assessment)
+        </button>
+    </h5>
+    <div class="help-block">
         <Markdown text={selectedDefinition.description}/>
     </div>
 
     <RatingPicker on:select={onRatingsSelect}
-                  scheme={schemesById[selectedDefinition.ratingSchemeId]}/>
-
-    <button class="btn btn-link"
-            on:click={() => selectedDefinition = null}>
-        Cancel
-    </button>
+                  scheme={schemesById[selectedDefinition.ratingSchemeId]}
+                  selectedRatings={selectedRatings}/>
 {/if}
diff --git a/waltz-ng/client/common/svelte/RatingPicker.svelte b/waltz-ng/client/common/svelte/RatingPicker.svelte
index 3f51ddbba7..40e3ab21d8 100644
--- a/waltz-ng/client/common/svelte/RatingPicker.svelte
+++ b/waltz-ng/client/common/svelte/RatingPicker.svelte
@@ -7,30 +7,31 @@
 
     export let scheme;
     export let isMultiSelect = true;
+    export let selectedRatings = [];
 
     const dispatch = createEventDispatcher();
 
-    let selectedItems = [];
 
     function onSelect(item) {
         if (isMultiSelect) {
-            const existing = selectedItems.indexOf(item) > -1;
+            const existing = _.find(selectedRatings, d => d.id === item.id);
 
             if (existing) {
-                selectedItems = _.without(selectedItems, item);
+                selectedRatings = _.reject(selectedRatings, d => d.id === item.id);
             } else {
-                selectedItems = _.concat(selectedItems, [item])
+                selectedRatings = _.concat(selectedRatings, [item]);
             }
         } else {
-            selectedItems = [item];
+            selectedRatings = [item];
         }
-        dispatch("select", selectedItems);
+        dispatch("select", selectedRatings);
     }
 
     $: items = _
         .chain(scheme?.ratings)
         .orderBy([d => d.position, d => d.name])
         .value();
+
 </script>
 
 
@@ -48,12 +49,12 @@
     <tbody>
     {#each items as item}
         <tr class="clickable"
-            class:selected={selectedItems.indexOf(item) > -1}
+            class:selected={_.find(selectedRatings, d => d.id === item.id)}
             on:click={() => onSelect(item)}>
             <td>
                 {#if isMultiSelect}
                     <Icon size="2x"
-                          name={selectedItems.indexOf(item) > -1
+                          name={_.find(selectedRatings, d => d.id === item.id)
                             ? 'check-square-o'
                             : 'square-o'}/>
                 {/if}
diff --git a/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte b/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte
index d6a9e9713c..cac871b5c8 100644
--- a/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte
+++ b/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte
@@ -28,7 +28,7 @@
     <rect width={dimensions.labelWidth}
           height={layoutData.height}
           class="section-header cell-background"
-          fill="#0e2541">
+          fill={group.headerColor || '#0e2541'}>
     </rect>
     <foreignObject width={dimensions.labelWidth}
                    height={layoutData.height}>
diff --git a/waltz-ng/client/playpen/3/builder/north-star.js b/waltz-ng/client/playpen/3/builder/north-star.js
index 7b840c55f1..7227ad5abf 100644
--- a/waltz-ng/client/playpen/3/builder/north-star.js
+++ b/waltz-ng/client/playpen/3/builder/north-star.js
@@ -150,6 +150,8 @@ const cells = {
 const referenceData = {
     id: "REF_DATA",
     name: "Reference Data",
+    cellColor: "#a3b2c9",
+    headerColor: "#6a7485",
     rows: [
         [
             ns1("REFERENCE_DATA_MANAGEMENT", cells.REFERENCE_DATA_MANAGEMENT),
@@ -162,6 +164,8 @@ const referenceData = {
 const transactionInitiation = {
     id: "TRANSACTION_INITIATION",
     name: "Transaction Initiation",
+    cellColor: "#abd5d5",
+    headerColor: "#6e8d8d",
     rows: [
         ns("TRANSACTION_INITIATION", [cells.TRADING, cells.LENDING, cells.BANKING_MANAGEMENT, cells.TRADE_BANKING]),
         ns("TRANSACTION_INITIATION", [cells.SALES_AND_ADVISORY, cells.CLIENT_MANAGEMENT, cells.CLIENT_SERVICING, cells.PAYMENTS])
@@ -171,6 +175,8 @@ const transactionInitiation = {
 const coreProcessing = {
     id: "CORE_PROCESSING",
     name: "Core Processing",
+    cellColor: "#efdfc4",
+    headerColor: "#9d9179",
     rows: [
         ns("CORE_PROCESSING", [cells.CLIENT_SERVICING, cells.CLIENT_MANAGEMENT, cells.CLIENT_AND_FUNDS_PORTFOLIO_MANAGEMENT, cells.SALES_AND_ADVISORY]),
         ns("CORE_PROCESSING", [cells.TRADING, cells.RISK_AND_VALUATION]),
@@ -182,6 +188,8 @@ const coreProcessing = {
 const coreProcessingOperations = {
     id: "CORE_PROCESSING_OPERATIONS",
     name: "Core Processing (Operations)",
+    cellColor: "#efdfc4",
+    headerColor: "#9d9179",
     rows: [
         ns("CORE_PROCESSING", [cells.MARKET_OPERATIONS, cells.CLEARING_AND_SETTLEMENT, cells.PAYMENTS]),
         ns("CORE_PROCESSING", [cells.COLLATERAL_AND_MARGIN, cells.POSITION_MANAGEMENT, cells.LENDING]),
@@ -192,6 +200,8 @@ const coreProcessingOperations = {
 const coreProcessingFinance = {
     id: "CORE_PROCESSING_FINANCE",
     name: "Core Processing (Finance)",
+    cellColor: "#efdfc4",
+    headerColor: "#9d9179",
     rows: [
         ns("CORE_PROCESSING", [cells.FINANCE_CONTROL, cells.FINANCIAL_RISK_CONTROL, cells.FINANCIAL_MANAGEMENT, cells.TRANSACTION_ACCOUNTING]),
         ns("CORE_PROCESSING", [cells.FINANCE_PERFORMANCE, cells.NON_FINANCIAL_RISK_CONTROL, cells.TREASURY, cells.TAX_MANAGEMENT])
@@ -210,6 +220,8 @@ function ns1(namespace, cell) {
 const analyticsAndReporting = {
     id: "ANALYTICS_REPORTING",
     name: "Analytics and Reporting",
+    cellColor: "#FECBC6",
+    headerColor: "#a87d7a",
     rows: [
         ns("ANALYTICS_AND_REPORTING", [cells.RESEARCH, cells.COMPLIANCE, cells.FINANCE_CONTROL]),
         ns("ANALYTICS_AND_REPORTING", [cells.TREASURY, cells.TAX_MANAGEMENT]),
diff --git a/waltz-ng/client/ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte b/waltz-ng/client/ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte
index 281911b929..4981fe479c 100644
--- a/waltz-ng/client/ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte
+++ b/waltz-ng/client/ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte
@@ -20,15 +20,15 @@
 
 <style>
     .cell {
+        top: 4px;
         display: inline-block;
-        width: 1.3em;
-        height: 1.3em;
+        width: 1em;
+        height: 1em;
         border: 1px solid;
-        border-radius: 6px;
+        border-radius: 2px;
     }
 
     .name {
         position: relative;
-        top: -4px;
     }
 </style>
\ No newline at end of file
diff --git a/waltz-ng/client/svelte-stores/aggregate-overlay-diagram-store.js b/waltz-ng/client/svelte-stores/aggregate-overlay-diagram-store.js
index 6ceae34ded..253e3d6246 100644
--- a/waltz-ng/client/svelte-stores/aggregate-overlay-diagram-store.js
+++ b/waltz-ng/client/svelte-stores/aggregate-overlay-diagram-store.js
@@ -76,6 +76,24 @@ export function mkOverlayDiagramStore() {
                 {force});
     };
 
+    const findPresetsForDiagram = (diagramId, force = false) => {
+        return remote
+            .fetchViewList(
+                "GET",
+                `api/aggregate-overlay-diagram/diagram-id/${diagramId}/presets`,
+                null,
+                {force});
+    };
+
+    const createPreset = (createCommand, force = false) => {
+        return remote
+            .execute(
+                "POST",
+                "api/aggregate-overlay-diagram/create-preset",
+                createCommand,
+                {force});
+    };
+
     return {
         getById,
         findAll,
@@ -84,7 +102,9 @@ export function mkOverlayDiagramStore() {
         findAppCostForDiagram,
         findAppAssessmentsForDiagram,
         findBackingEntitiesForDiagram,
-        findAggregatedEntitiesForDiagram
+        findAggregatedEntitiesForDiagram,
+        findPresetsForDiagram,
+        createPreset
     };
 }
 
diff --git a/waltz-ng/package-lock.json b/waltz-ng/package-lock.json
index 38a7e3460a..046b5a832a 100644
--- a/waltz-ng/package-lock.json
+++ b/waltz-ng/package-lock.json
@@ -2452,6 +2452,11 @@
       "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -3430,6 +3435,14 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -6485,6 +6498,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
@@ -10617,6 +10639,14 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -11128,6 +11158,14 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
diff --git a/waltz-ng/package.json b/waltz-ng/package.json
index cdd597e4f0..e4beb19703 100644
--- a/waltz-ng/package.json
+++ b/waltz-ng/package.json
@@ -43,26 +43,27 @@
     "d3-force": "1.0.6",
     "d3-format": "1.0.2",
     "d3-interpolate": "1.1.6",
-    "d3-path": "1.0.9",
-    "d3-sankey": "0.12.3",
-    "d3-scale": "1.0.7",
-    "d3-selection": "1.0.6",
-    "d3-selection-multi": "1.0.1",
-    "d3-shape": "1.0.6",
-    "d3-time-format": "2.0.5",
-    "d3-transition": "1.0.4",
-    "d3-zoom": "1.8.3",
-    "font-awesome": "4.7.0",
-    "json-stable-stringify": "1.0.1",
-    "lodash": "4.17.21",
-    "moment": "2.29.1",
-    "ng-showdown": "1.1.0",
-    "ng-tags-input": "3.2.0",
-    "patch-package": "6.4.7",
-    "satellizer": "0.15.5",
-    "svelte-flatpickr": "3.2.4",
-    "ui-select": "0.19.8",
-    "whatwg-fetch": "3.6.2",
+      "d3-path": "1.0.9",
+      "d3-sankey": "0.12.3",
+      "d3-scale": "1.0.7",
+      "d3-selection": "1.0.6",
+      "d3-selection-multi": "1.0.1",
+      "d3-shape": "1.0.6",
+      "d3-time-format": "2.0.5",
+      "d3-transition": "1.0.4",
+      "d3-zoom": "1.8.3",
+      "font-awesome": "4.7.0",
+      "html2canvas": "^1.4.1",
+      "json-stable-stringify": "1.0.1",
+      "lodash": "4.17.21",
+      "moment": "2.29.1",
+      "ng-showdown": "1.1.0",
+      "ng-tags-input": "3.2.0",
+      "patch-package": "6.4.7",
+      "satellizer": "0.15.5",
+      "svelte-flatpickr": "3.2.4",
+      "ui-select": "0.19.8",
+      "whatwg-fetch": "3.6.2",
     "xlsx": "0.17.3"
   },
   "devDependencies": {
diff --git a/waltz-service/src/main/java/org/finos/waltz/service/aggregate_overlay_diagram/AggregateOverlayDiagramService.java b/waltz-service/src/main/java/org/finos/waltz/service/aggregate_overlay_diagram/AggregateOverlayDiagramService.java
index 53e9554467..db76d2ecbf 100644
--- a/waltz-service/src/main/java/org/finos/waltz/service/aggregate_overlay_diagram/AggregateOverlayDiagramService.java
+++ b/waltz-service/src/main/java/org/finos/waltz/service/aggregate_overlay_diagram/AggregateOverlayDiagramService.java
@@ -5,10 +5,7 @@
 import org.finos.waltz.data.aggregate_overlay_diagram.*;
 import org.finos.waltz.model.AssessmentBasedSelectionFilter;
 import org.finos.waltz.model.IdSelectionOptions;
-import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagram;
-import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagramInfo;
-import org.finos.waltz.model.aggregate_overlay_diagram.BackingEntity;
-import org.finos.waltz.model.aggregate_overlay_diagram.ImmutableAggregateOverlayDiagramInfo;
+import org.finos.waltz.model.aggregate_overlay_diagram.*;
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.*;
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AppCostWidgetParameters;
 import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AppCountWidgetParameters;
@@ -35,6 +32,7 @@ public class AggregateOverlayDiagramService {
     private final AssessmentRatingWidgetDao appAssessmentWidgetDao;
     private final BackingEntityWidgetDao backingEntityWidgetDao;
     private final AggregatedEntitiesWidgetDao aggregatedEntitiesWidgetDao;
+    private final AggregateOverlayDiagramPresetDao aggregateOverlayDiagramPresetDao;
 
     private final GenericSelectorFactory genericSelectorFactory = new GenericSelectorFactory();
 
@@ -45,7 +43,8 @@ public AggregateOverlayDiagramService(AggregateOverlayDiagramDao aggregateOverla
                                           AssessmentRatingWidgetDao appAssessmentWidgetDao,
                                           BackingEntityWidgetDao backingEntityWidgetDao,
                                           AppCostWidgetDao appCostWidgetDao,
-                                          AggregatedEntitiesWidgetDao aggregatedEntitiesWidgetDao) {
+                                          AggregatedEntitiesWidgetDao aggregatedEntitiesWidgetDao,
+                                          AggregateOverlayDiagramPresetDao aggregateOverlayDiagramPresetDao) {
         this.aggregateOverlayDiagramDao = aggregateOverlayDiagramDao;
         this.appCountWidgetDao = appCountWidgetDao;
         this.targetAppCostWidgetDao = targetAppCostWidgetDao;
@@ -53,6 +52,7 @@ public AggregateOverlayDiagramService(AggregateOverlayDiagramDao aggregateOverla
         this.appAssessmentWidgetDao = appAssessmentWidgetDao;
         this.backingEntityWidgetDao = backingEntityWidgetDao;
         this.aggregatedEntitiesWidgetDao = aggregatedEntitiesWidgetDao;
+        this.aggregateOverlayDiagramPresetDao = aggregateOverlayDiagramPresetDao;
     }
 
 
@@ -114,7 +114,8 @@ public Set<CostWidgetDatum> findAppCostWidgetData(Long diagramId,
                 diagramId,
                 appCostWidgetParameters.costKindIds(),
                 appCostWidgetParameters.allocationSchemeId(),
-                entityIdSelector);
+                entityIdSelector,
+                Optional.empty());
     }
 
 
@@ -124,7 +125,7 @@ public Set<AssessmentRatingsWidgetDatum> findAppAssessmentWidgetData(Long diagra
                                                                          AssessmentWidgetParameters assessmentWidgetParameters) {
 
         AggregateOverlayDiagram diagram = aggregateOverlayDiagramDao.getById(diagramId);
-        ;
+
         GenericSelector genericSelector = genericSelectorFactory.applyForKind(diagram.aggregatedEntityKind(), appSelectionOptions);
         Select<Record1<Long>> entityIdSelector = applyFilterToSelector(genericSelector, filterParams);
 
@@ -132,7 +133,8 @@ public Set<AssessmentRatingsWidgetDatum> findAppAssessmentWidgetData(Long diagra
                 diagramId,
                 diagram.aggregatedEntityKind(),
                 assessmentWidgetParameters.assessmentDefinitionId(),
-                entityIdSelector);
+                entityIdSelector,
+                assessmentWidgetParameters.targetDate());
     }
 
 
@@ -148,7 +150,8 @@ public Set<AggregatedEntitiesWidgetDatum> findAggregatedEntitiesWidgetData(Long
         return aggregatedEntitiesWidgetDao.findWidgetData(
                 diagramId,
                 diagram.aggregatedEntityKind(),
-                entityIdSelector);
+                entityIdSelector,
+                Optional.empty());
     }
 
 
@@ -157,4 +160,13 @@ public Set<BackingEntityWidgetDatum> findBackingEntityWidgetData(Long diagramId)
     }
 
 
+    public Set<AggregateOverlayDiagramPreset> findPresetsForDiagram(Long diagramId) {
+        return aggregateOverlayDiagramPresetDao.findPresetsForDiagram(diagramId);
+    }
+
+    public int createPreset(OverlayDiagramPresetCreateCommand createCommand, String username) {
+        return aggregateOverlayDiagramPresetDao.create(createCommand, username);
+    }
+
+
 }
diff --git a/waltz-web/src/main/java/org/finos/waltz/web/endpoints/api/AggregateOverlayDiagramEndpoint.java b/waltz-web/src/main/java/org/finos/waltz/web/endpoints/api/AggregateOverlayDiagramEndpoint.java
index 3e054aafed..fa00c4720f 100644
--- a/waltz-web/src/main/java/org/finos/waltz/web/endpoints/api/AggregateOverlayDiagramEndpoint.java
+++ b/waltz-web/src/main/java/org/finos/waltz/web/endpoints/api/AggregateOverlayDiagramEndpoint.java
@@ -20,22 +20,44 @@
 
 import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagram;
 import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagramInfo;
-import org.finos.waltz.model.aggregate_overlay_diagram.overlay.*;
-import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.*;
+import org.finos.waltz.model.aggregate_overlay_diagram.AggregateOverlayDiagramPreset;
+import org.finos.waltz.model.aggregate_overlay_diagram.OverlayDiagramPresetCreateCommand;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.AggregatedEntitiesWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.AssessmentRatingsWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.BackingEntityWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.CostWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.CountWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.TargetCostWidgetDatum;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AggregatedEntitiesWidgetParameters;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AppCostWidgetParameters;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AppCountWidgetParameters;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.AssessmentWidgetParameters;
+import org.finos.waltz.model.aggregate_overlay_diagram.overlay.widget_parameters.TargetAppCostWidgetParameters;
 import org.finos.waltz.service.aggregate_overlay_diagram.AggregateOverlayDiagramService;
 import org.finos.waltz.web.DatumRoute;
 import org.finos.waltz.web.ListRoute;
 import org.finos.waltz.web.WebUtilities;
 import org.finos.waltz.web.endpoints.Endpoint;
-import org.finos.waltz.web.json.*;
+import org.finos.waltz.web.json.OverlayDiagramAggregatedEntitiesWidgetInfo;
+import org.finos.waltz.web.json.OverlayDiagramAppCostWidgetInfo;
+import org.finos.waltz.web.json.OverlayDiagramAppCountWidgetInfo;
+import org.finos.waltz.web.json.OverlayDiagramAssessmentWidgetInfo;
+import org.finos.waltz.web.json.OverlayDiagramTargetAppCostWidgetInfo;
+import org.finos.waltz.web.json.OverlayDiagramWidgetInfo;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import static org.finos.waltz.common.Checks.checkNotNull;
-import static org.finos.waltz.web.WebUtilities.*;
-import static org.finos.waltz.web.endpoints.EndpointUtilities.*;
+import static org.finos.waltz.web.WebUtilities.getId;
+import static org.finos.waltz.web.WebUtilities.getUsername;
+import static org.finos.waltz.web.WebUtilities.mkPath;
+import static org.finos.waltz.web.WebUtilities.readBody;
+import static org.finos.waltz.web.endpoints.EndpointUtilities.getForDatum;
+import static org.finos.waltz.web.endpoints.EndpointUtilities.getForList;
+import static org.finos.waltz.web.endpoints.EndpointUtilities.postForDatum;
+import static org.finos.waltz.web.endpoints.EndpointUtilities.postForList;
 
 @Service
 public class AggregateOverlayDiagramEndpoint implements Endpoint {
@@ -65,6 +87,8 @@ public void register() {
         String findAppAssessmentWidgetDataPath = mkPath(BASE_URL, "diagram-id", ":id", "app-assessment-widget");
         String findAggregatedEntitiesWidgetDataPath = mkPath(BASE_URL, "diagram-id", ":id", "aggregated-entities-widget");
         String findBackingEntityWidgetDataPath = mkPath(BASE_URL, "diagram-id", ":id", "backing-entity-widget");
+        String findPresetsForDiagramPath = mkPath(BASE_URL, "diagram-id", ":id", "presets");
+        String createPresetPath = mkPath(BASE_URL, "create-preset");
 
         DatumRoute<AggregateOverlayDiagramInfo> getByIdRoute = (request, response) -> {
             return aggregateOverlayDiagramService.getById(getId(request));
@@ -145,14 +169,27 @@ public void register() {
         };
 
 
+        ListRoute<AggregateOverlayDiagramPreset> findPresetsForDiagramRoute = (request, response) -> {
+            long diagramId = getId(request);
+            return aggregateOverlayDiagramService.findPresetsForDiagram(diagramId);
+        };
+
+
+        DatumRoute<Integer> createPresetRoute = (request, response) -> {
+            return aggregateOverlayDiagramService.createPreset(readBody(request, OverlayDiagramPresetCreateCommand.class), getUsername(request));
+        };
+
+
         getForDatum(getByIdPath, getByIdRoute);
         getForList(findAllPath, findAllRoute);
         getForList(findBackingEntityWidgetDataPath, findBackingEntityWidgetDataRoute);
+        getForList(findPresetsForDiagramPath, findPresetsForDiagramRoute);
         postForList(findAppCountWidgetDataPath, findAppCountWidgetDataRoute);
         postForList(findTargetAppCostWidgetDataPath, findTargetAppCostWidgetDataRoute);
         postForList(findAppCostWidgetDataPath, findAppCostWidgetDataRoute);
         postForList(findAppAssessmentWidgetDataPath, findAppAssessmentWidgetDataRoute);
         postForList(findAggregatedEntitiesWidgetDataPath, findAggregatedEntitiesWidgetDataRoute);
+        postForDatum(createPresetPath, createPresetRoute);
     }
 
 }