diff --git a/app/assets/scripts/components/common/card-list.js b/app/assets/scripts/components/common/card-list.js
index 7b2cd41e..3ceb5bc5 100644
--- a/app/assets/scripts/components/common/card-list.js
+++ b/app/assets/scripts/components/common/card-list.js
@@ -172,6 +172,7 @@ Card.propTypes = {
 
 const CardListContainer = styled.ol`
   display: grid;
+  height: min-content;
   grid-template-columns: ${({ numColumns }) => {
     if (numColumns) {
       return css`repeat(${numColumns}, 1fr)`;
@@ -185,7 +186,7 @@ const CardListScroll = styled(ShadowScrollbar)`
   flex: 1;
 `;
 const CardListWrapper = styled(PanelBlockBody)`
-  height: 100%;
+  height: min-content;
   ${({ nonScrolling }) =>
     nonScrolling &&
     css`
diff --git a/app/assets/scripts/components/common/map/constants.js b/app/assets/scripts/components/common/map/constants.js
index 30d6429c..ed1b843f 100644
--- a/app/assets/scripts/components/common/map/constants.js
+++ b/app/assets/scripts/components/common/map/constants.js
@@ -1 +1,3 @@
 export const BOUNDS_PADDING = [25, 25];
+
+export const MOSAIC_LAYER_OPACITY = 0.8;
diff --git a/app/assets/scripts/components/common/tabbed-block-body.js b/app/assets/scripts/components/common/tabbed-block-body.js
index 4d28ba54..d1e60162 100644
--- a/app/assets/scripts/components/common/tabbed-block-body.js
+++ b/app/assets/scripts/components/common/tabbed-block-body.js
@@ -80,8 +80,10 @@ const TabbedBlockHeader = styled(PanelBlockHeader)`
     ${listReset}
     display: flex;
     flex-flow: row nowrap;
-    justify-content: space-between;
-    padding: 0 ${glsp(1.5)};
+    justify-content: ${({ leftAligned }) =>
+      leftAligned ? 'flex-start' : 'space-between'};
+    gap: ${glsp()};
+    padding: ${({ leftAligned }) => (leftAligned ? '0' : '0 1.5rem')};
     box-shadow: inset 0 -1px 0 0 ${themeVal('color.baseAlphaB')};
   }
   /* PanelBlockHeader sets z-index. This causes
@@ -108,11 +110,11 @@ const PanelBlockScroll = styled(ScrollableBody)`
 `;
 
 function TabbedBlock(props) {
-  const { children, activeTab } = props;
+  const { children, activeTab, leftAligned } = props;
 
   return (
     <>
-      <TabbedBlockHeader as='nav' role='navigation'>
+      <TabbedBlockHeader as='nav' role='navigation' leftAligned={leftAligned}>
         <ul>
           {Children.map(children, (child, ind) => {
             const { name, icon, tabId, disabled, tabTooltip } = child.props;
@@ -153,7 +155,6 @@ function TabbedBlock(props) {
             <>
               {React.cloneElement(child, {
                 active: active,
-                //style: active ? {} : { display: 'none' },
                 className: active ? className : `${className} inactive-panel`,
               })}
             </>
@@ -167,5 +168,6 @@ function TabbedBlock(props) {
 TabbedBlock.propTypes = {
   children: T.node.isRequired,
   activeTab: T.number.isRequired,
+  leftAligned: T.bool,
 };
 export default TabbedBlock;
diff --git a/app/assets/scripts/components/explore/prime-panel/tabs/predict/mosaic-selector/modal.js b/app/assets/scripts/components/explore/prime-panel/tabs/predict/mosaic-selector/modal.js
index 54a11889..7fbb5f9f 100644
--- a/app/assets/scripts/components/explore/prime-panel/tabs/predict/mosaic-selector/modal.js
+++ b/app/assets/scripts/components/explore/prime-panel/tabs/predict/mosaic-selector/modal.js
@@ -59,7 +59,7 @@ export function MosaicSelectorModal({
         <ModalHeader>
           <Headline>
             {' '}
-            <Heading>Select an base mosaic</Heading>
+            <Heading>Select a base mosaic</Heading>
             <Button
               hideText
               variation='base-plain'
diff --git a/app/assets/scripts/components/project/map/index.js b/app/assets/scripts/components/project/map/index.js
index ad09f29b..a3fd10f8 100644
--- a/app/assets/scripts/components/project/map/index.js
+++ b/app/assets/scripts/components/project/map/index.js
@@ -25,13 +25,15 @@ import { RETRAIN_MAP_MODES } from '../../../fsm/project/constants';
 import FreehandDrawControl from './freehand-draw-control';
 import PolygonDrawControl from './polygon-draw-control';
 import selectors from '../../../fsm/project/selectors';
-import { BOUNDS_PADDING } from '../../common/map/constants';
+import {
+  BOUNDS_PADDING,
+  MOSAIC_LAYER_OPACITY,
+} from '../../common/map/constants';
 
 const center = [19.22819, -99.995841];
 const zoom = 12;
 
 const DEFAULT_PREDICTION_LAYER_OPACITY = 0.7;
-const MOSAIC_LAYER_OPACITY = 0.8;
 
 const Container = styled.div`
   height: 100%;
diff --git a/app/assets/scripts/components/project/prime-panel/tabs/predict/imagery-source-selector/modal.js b/app/assets/scripts/components/project/prime-panel/tabs/predict/imagery-source-selector/modal.js
index 34fb4896..1c259911 100644
--- a/app/assets/scripts/components/project/prime-panel/tabs/predict/imagery-source-selector/modal.js
+++ b/app/assets/scripts/components/project/prime-panel/tabs/predict/imagery-source-selector/modal.js
@@ -81,7 +81,7 @@ export function ImagerySourceSelectorModal({ showModal, setShowModal }) {
         <ModalContent>
           <HeadingWrapper>
             <Heading size='small' as='h4'>
-              Available mosaics for the AOI
+              Imagery sources available for the selected AOI
             </Heading>
           </HeadingWrapper>
           <CardList
diff --git a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/index.js b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/index.js
index 52b087b4..385630dc 100644
--- a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/index.js
+++ b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/index.js
@@ -52,7 +52,7 @@ export function MosaicSelector() {
       />
       <HeadOption>
         <HeadOptionHeadline usePadding>
-          <Subheading>Base Mosaic</Subheading>
+          <Subheading>Imagery Mosaic Date Range</Subheading>
         </HeadOptionHeadline>
         <SubheadingStrong
           data-cy='mosaic-selector-label'
diff --git a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/modal.js b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/modal.js
index 4811c3cb..4bb1151b 100644
--- a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/modal.js
+++ b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/modal.js
@@ -1,21 +1,23 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 import { Modal } from '@devseed-ui/modal';
 import { glsp } from '@devseed-ui/theme-provider';
 import { Button } from '@devseed-ui/button';
 import { Heading } from '@devseed-ui/typography';
-import CardList, { Card } from '../../../../../common/card-list';
+import { ExistingMosaicsSection } from './sections/list-mosaics';
+import { CreateMosaicSection } from './sections/create-mosaic';
+import TabbedBlock from '../../../../../common/tabbed-block-body';
 import { ProjectMachineContext } from '../../../../../../fsm/project';
-import selectors from '../../../../../../fsm/project/selectors';
-import { formatDateTime } from '../../../../../../utils/format';
 
 const ModalHeader = styled.header`
   padding: ${glsp(2)} ${glsp(2)} 0;
 `;
 
 const ModalContent = styled.div`
-  display: block;
+  display: flex;
+  flex-flow: column;
+  height: 60vh;
 `;
 
 const Headline = styled.div`
@@ -34,26 +36,19 @@ const Headline = styled.div`
   }
 `;
 
-const HeadingWrapper = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: baseline;
-`;
+export function MosaicSelectorModal({ showModal, setShowModal }) {
+  const [activeTab, setActiveTab] = React.useState(0);
 
-export function MosaicSelectorModal({ showModal, setShowModal, isProjectNew }) {
-  const actorRef = ProjectMachineContext.useActorRef();
-  const mosaicsList = ProjectMachineContext.useSelector(selectors.mosaicsList);
-  const currentMosaic = ProjectMachineContext.useSelector(
-    selectors.currentMosaic
-  );
-  const currentImagerySource = ProjectMachineContext.useSelector(
-    selectors.currentImagerySource
+  const mapRef = ProjectMachineContext.useSelector(
+    ({ context }) => context.mapRef
   );
 
-  const selectableMosaics = mosaicsList.filter(
-    (mosaic) => mosaic.imagery_source_id === currentImagerySource?.id
-  );
+  // Get the current map zoom and center on modal open
+  const [mapZoom, mapCenter] = useMemo(() => {
+    if (!showModal || !mapRef) return [null, null];
+    const { lng, lat } = mapRef.getCenter();
+    return [mapRef.getZoom(), [lat, lng]];
+  }, [mapRef, showModal]);
 
   return (
     <Modal
@@ -66,8 +61,7 @@ export function MosaicSelectorModal({ showModal, setShowModal, isProjectNew }) {
       renderHeader={() => (
         <ModalHeader>
           <Headline>
-            {' '}
-            <Heading>Select an base mosaic</Heading>
+            <Heading>Set Mosaic Date Range</Heading>
             <Button
               hideText
               variation='base-plain'
@@ -84,54 +78,27 @@ export function MosaicSelectorModal({ showModal, setShowModal, isProjectNew }) {
       )}
       content={
         <ModalContent>
-          <HeadingWrapper>
-            <Heading size='small' as='h4'>
-              Available mosaics for the AOI
-            </Heading>
-          </HeadingWrapper>
-          <CardList
-            nonScrolling
-            numColumns={2}
-            data={selectableMosaics}
-            renderCard={(mosaic) => {
-              const { name, mosaic_ts_end, mosaic_ts_start } = mosaic;
-
-              return (
-                <Card
-                  data-cy={`select-mosaic-${mosaic.id}-card`}
-                  key={mosaic.id}
-                  title={mosaic.name}
-                  details={{
-                    name,
-                    'Mosaic Start Date': mosaic_ts_start
-                      ? formatDateTime(mosaic_ts_start)
-                      : 'N/A',
-                    'Mosaic End Date': mosaic_ts_end
-                      ? formatDateTime(mosaic_ts_end)
-                      : 'N/A',
-                  }}
-                  borderlessMedia
-                  selected={currentMosaic && currentMosaic.id === mosaic.id}
-                  onClick={() => {
-                    if (isProjectNew) {
-                      if (!currentMosaic || currentMosaic.id !== mosaic.id) {
-                        actorRef.send({
-                          type: 'Mosaic was selected',
-                          data: { mosaic },
-                        });
-                      }
-                    } else if (currentMosaic?.id !== mosaic.id) {
-                      actorRef.send({
-                        type: 'Mosaic was selected',
-                        data: { mosaic },
-                      });
-                    }
-                    setShowModal(false);
-                  }}
-                />
-              );
-            }}
-          />
+          <TabbedBlock activeTab={activeTab} leftAligned={true}>
+            <ExistingMosaicsSection
+              name='Select Preset'
+              className='select-preset-mosaic'
+              tabId='select-preset-mosaic-tab-trigger'
+              onTabClick={() => setActiveTab(0)}
+              setShowModal={setShowModal}
+            />
+            <CreateMosaicSection
+              name='Create Mosaic'
+              className='create-mosaic'
+              tabId='create-mosaic-tab-trigger'
+              initialMapZoom={mapZoom}
+              initialMapCenter={mapCenter}
+              onTabClick={() => setActiveTab(1)}
+              onMosaicCreated={() => {
+                setActiveTab(0);
+                setShowModal(false);
+              }}
+            />
+          </TabbedBlock>
         </ModalContent>
       }
     />
@@ -139,7 +106,6 @@ export function MosaicSelectorModal({ showModal, setShowModal, isProjectNew }) {
 }
 
 MosaicSelectorModal.propTypes = {
-  isProjectNew: T.bool,
   showModal: T.bool,
   setShowModal: T.func.isRequired,
 };
diff --git a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/create-mosaic.js b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/create-mosaic.js
new file mode 100644
index 00000000..418456e6
--- /dev/null
+++ b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/create-mosaic.js
@@ -0,0 +1,226 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { MapContainer, TileLayer } from 'react-leaflet';
+
+import { Heading } from '@devseed-ui/typography';
+import {
+  Form,
+  FormGroup,
+  FormGroupHeader,
+  FormGroupBody,
+  FormLabel,
+  FormInput,
+} from '@devseed-ui/form';
+import { Button } from '@devseed-ui/button';
+import { glsp, themeVal, rgba } from '@devseed-ui/theme-provider';
+import { formatTimestampToSimpleUTCDate } from '../../../../../../../utils/dates';
+import { ProjectMachineContext } from '../../../../../../../fsm/project';
+import selectors from '../../../../../../../fsm/project/selectors';
+import toasts from '../../../../../../common/toasts';
+import { format, subDays } from 'date-fns';
+import {
+  generateSentinel2L2AMosaic,
+  getMosaicTileUrl,
+} from '../../../../../../../utils/mosaics';
+import { MOSAIC_LAYER_OPACITY } from '../../../../../../../fsm/project/constants';
+
+const MOSAIC_DATE_RANGE_IN_DAYS = 90;
+
+const SectionWrapper = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  gap: ${glsp()};
+  height: 100%;
+`;
+
+const FormWrapper = styled.div`
+  width: 300px;
+`;
+
+const MapPreviewWrapper = styled.div`
+  width: 100%;
+`;
+
+const MapPreviewPlaceholder = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border: ${themeVal('layout.border')} solid
+    ${rgba(themeVal('color.base'), 0.16)};
+  border-radius: ${themeVal('shape.rounded')};
+  justify-content: center;
+`;
+
+const CreateMosaicForm = ({ setNewMosaic, handleMosaicCreation }) => {
+  const currentImagerySource = ProjectMachineContext.useSelector(
+    selectors.currentImagerySource
+  );
+  const [selectedDate, setSelectedDate] = useState('');
+  const [selectedTimeframe, setSelectedTimeframe] = useState(null);
+
+  const maxDate = subDays(new Date(), MOSAIC_DATE_RANGE_IN_DAYS);
+  const handleDateChange = async (event) => {
+    setSelectedDate(event.target.value);
+
+    const selectedDateUTCStart = new Date(event.target.value).getTime();
+    const selectedDateUTCEnd = selectedDateUTCStart + 90 * 24 * 60 * 60 * 1000;
+
+    const newTimeframe = {
+      start: selectedDateUTCStart,
+      end: selectedDateUTCEnd,
+    };
+    const newMosaic = await generateSentinel2L2AMosaic({
+      startTime: newTimeframe.start,
+      endTime: newTimeframe.end,
+      imagerySourceId: currentImagerySource?.id,
+    });
+    setNewMosaic(newMosaic);
+    setSelectedTimeframe(newTimeframe);
+  };
+
+  return (
+    <FormWrapper>
+      <Form>
+        <Heading size='small' as='h4'>
+          Custom mosaic filters
+        </Heading>
+
+        <FormGroup>
+          <FormGroupHeader>
+            <FormLabel>Start date:</FormLabel>{' '}
+          </FormGroupHeader>
+          <FormGroupBody>
+            <FormInput
+              type='date'
+              value={selectedDate}
+              max={format(maxDate, 'yyyy-MM-dd')}
+              onChange={handleDateChange}
+            />
+          </FormGroupBody>
+        </FormGroup>
+        <FormGroup>
+          <FormGroupHeader>
+            <FormLabel>End date:</FormLabel>{' '}
+          </FormGroupHeader>
+          <FormInput
+            type='date'
+            value={
+              selectedTimeframe?.end
+                ? formatTimestampToSimpleUTCDate(selectedTimeframe.end)
+                : ''
+            }
+            disabled
+          />
+        </FormGroup>
+        <Button
+          variation='primary-raised-dark'
+          size='medium'
+          useIcon='tick--small'
+          type='button'
+          onClick={handleMosaicCreation}
+          style={{
+            gridColumn: '1 / -1',
+          }}
+        >
+          Create Mosaic
+        </Button>
+      </Form>
+    </FormWrapper>
+  );
+};
+
+CreateMosaicForm.propTypes = {
+  setNewMosaic: PropTypes.func.isRequired,
+  handleMosaicCreation: PropTypes.func.isRequired,
+};
+
+const MosaicPreviewMap = ({
+  mosaicTileUrl,
+  initialMapCenter,
+  initialMapZoom,
+}) => {
+  return (
+    <MapPreviewWrapper>
+      {mosaicTileUrl && initialMapZoom && initialMapCenter ? (
+        <MapContainer
+          center={initialMapCenter}
+          zoom={initialMapZoom}
+          style={{ height: '100%' }}
+        >
+          <TileLayer
+            key={mosaicTileUrl}
+            url={mosaicTileUrl}
+            opacity={MOSAIC_LAYER_OPACITY}
+            attribution='&copy; Copernicus Sentinel'
+          />
+        </MapContainer>
+      ) : (
+        <MapPreviewPlaceholder>
+          <span>Set date to display map preview</span>
+        </MapPreviewPlaceholder>
+      )}
+    </MapPreviewWrapper>
+  );
+};
+
+MosaicPreviewMap.propTypes = {
+  mosaicTileUrl: PropTypes.string,
+  initialMapZoom: PropTypes.number,
+  initialMapCenter: PropTypes.array,
+};
+
+export const CreateMosaicSection = ({
+  onMosaicCreated,
+  className,
+  initialMapZoom,
+  initialMapCenter,
+}) => {
+  const [newMosaic, setNewMosaic] = useState(null);
+
+  const actorRef = ProjectMachineContext.useActorRef();
+  const apiClient = ProjectMachineContext.useSelector(
+    ({ context }) => context.apiClient
+  );
+
+  const handleMosaicCreation = async () => {
+    if (!newMosaic) {
+      return;
+    }
+
+    try {
+      const mosaic = await apiClient.post('mosaic', newMosaic);
+      const { mosaics: mosaicsList } = await apiClient.get('mosaic');
+      onMosaicCreated();
+      actorRef.send({
+        type: 'Mosaic was selected',
+        data: { mosaic, mosaicsList },
+      });
+    } catch (error) {
+      toasts.error('Error creating mosaic');
+    }
+  };
+
+  return (
+    <SectionWrapper className={className}>
+      <CreateMosaicForm
+        onMosaicCreated={onMosaicCreated}
+        setNewMosaic={setNewMosaic}
+        handleMosaicCreation={handleMosaicCreation}
+      />
+      <MosaicPreviewMap
+        initialMapZoom={initialMapZoom}
+        initialMapCenter={initialMapCenter}
+        mosaicTileUrl={newMosaic && getMosaicTileUrl(newMosaic)}
+      />
+    </SectionWrapper>
+  );
+};
+
+CreateMosaicSection.propTypes = {
+  onMosaicCreated: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  initialMapZoom: PropTypes.number,
+  initialMapCenter: PropTypes.array,
+};
diff --git a/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/list-mosaics.js b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/list-mosaics.js
new file mode 100644
index 00000000..af8a2a67
--- /dev/null
+++ b/app/assets/scripts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/list-mosaics.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { ProjectMachineContext } from '../../../../../../../fsm/project';
+import selectors from '../../../../../../../fsm/project/selectors';
+import * as guards from '../../../../../../../fsm/project/guards';
+
+import { Heading } from '@devseed-ui/typography';
+import { glsp } from '@devseed-ui/theme-provider';
+import CardList, { Card } from '../../../../../../common/card-list';
+import { formatTimestampToSimpleUTC } from '../../../../../../../utils/dates';
+
+const HeadingWrapper = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+const ModalInnerContent = styled.div`
+  display: flex;
+  flex-flow: column;
+  gap: ${glsp()};
+`;
+
+export const ExistingMosaicsSection = ({ setShowModal, className }) => {
+  const actorRef = ProjectMachineContext.useActorRef();
+  const isProjectNew = ProjectMachineContext.useSelector((s) =>
+    guards.isProjectNew(s.context)
+  );
+  const mosaicsList = ProjectMachineContext.useSelector(selectors.mosaicsList);
+  const currentMosaic = ProjectMachineContext.useSelector(
+    selectors.currentMosaic
+  );
+  const currentImagerySource = ProjectMachineContext.useSelector(
+    selectors.currentImagerySource
+  );
+
+  const selectableMosaics = mosaicsList.filter(
+    (mosaic) => mosaic.imagery_source_id === currentImagerySource?.id
+  );
+
+  return (
+    <ModalInnerContent className={className}>
+      <HeadingWrapper>
+        <Heading size='small' as='h4'>
+          Mosaics availble for your selected AOI
+        </Heading>
+      </HeadingWrapper>
+      <CardList
+        nonScrolling
+        numColumns={2}
+        data={selectableMosaics}
+        renderCard={(mosaic) => {
+          const { name, mosaic_ts_end, mosaic_ts_start } = mosaic;
+
+          return (
+            <Card
+              data-cy={`select-mosaic-${mosaic.id}-card`}
+              key={mosaic.id}
+              title={mosaic.name}
+              details={{
+                name,
+                'Start Time': mosaic_ts_start
+                  ? formatTimestampToSimpleUTC(mosaic_ts_start)
+                  : 'N/A',
+                'End Time': mosaic_ts_end
+                  ? formatTimestampToSimpleUTC(mosaic_ts_end)
+                  : 'N/A',
+              }}
+              borderlessMedia
+              selected={currentMosaic && currentMosaic.id === mosaic.id}
+              onClick={() => {
+                if (isProjectNew) {
+                  if (!currentMosaic || currentMosaic.id !== mosaic.id) {
+                    actorRef.send({
+                      type: 'Mosaic was selected',
+                      data: { mosaic },
+                    });
+                  }
+                } else if (currentMosaic?.id !== mosaic.id) {
+                  actorRef.send({
+                    type: 'Mosaic was selected',
+                    data: { mosaic },
+                  });
+                }
+                setShowModal(false);
+              }}
+            />
+          );
+        }}
+      />
+    </ModalInnerContent>
+  );
+};
+
+ExistingMosaicsSection.propTypes = {
+  setShowModal: PropTypes.func.isRequired,
+  className: PropTypes.string,
+};
diff --git a/app/assets/scripts/fsm/project/actions.js b/app/assets/scripts/fsm/project/actions.js
index 2e0835b5..231cf90c 100644
--- a/app/assets/scripts/fsm/project/actions.js
+++ b/app/assets/scripts/fsm/project/actions.js
@@ -5,7 +5,7 @@ import L from 'leaflet';
 import turfBboxPolygon from '@turf/bbox-polygon';
 import turfArea from '@turf/area';
 import toasts from '../../components/common/toasts';
-import { getMosaicTileUrl } from './helpers';
+import { getMosaicTileUrl } from '../../utils/mosaics';
 import history from '../../history';
 import { RETRAIN_MAP_MODES, SESSION_MODES } from './constants';
 
@@ -73,12 +73,12 @@ export const actions = {
       ...nextContext,
     };
   }),
-  setCurrentMosaic: assign((context, event) => {
-    const { mosaic } = event.data;
+  setCurrentMosaic: assign((_, event) => {
+    const { mosaic, mosaicsList } = event.data;
+    const currentMosaic = { ...mosaic, tileUrl: getMosaicTileUrl(mosaic) };
 
-    return {
-      currentMosaic: { ...mosaic, tileUrl: getMosaicTileUrl(mosaic) },
-    };
+    // Optionally update mosaic list if provided
+    return mosaicsList ? { mosaicsList, currentMosaic } : { currentMosaic };
   }),
   setCurrentModel: assign((context, event) => {
     const { currentModel, currentImagerySource } = context;
diff --git a/app/assets/scripts/fsm/project/helpers.js b/app/assets/scripts/fsm/project/helpers.js
deleted file mode 100644
index 05b6bf67..00000000
--- a/app/assets/scripts/fsm/project/helpers.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export function getMosaicTileUrl(mosaic) {
-  if (!mosaic) return;
-  const mosaicParams = mosaic?.ui_params || mosaic?.params;
-
-  if (!mosaicParams) return;
-
-  const { assets, ...otherParams } = mosaicParams;
-
-  let params = [];
-
-  // The tiler doesn't support array[] notation in the querystring, this will
-  // generate a custom notation like 'asset=a&asset=b&asset=c'
-  if (Array.isArray(assets)) {
-    assets.forEach((a) => params.push(`assets=${a}`));
-  } else {
-    params.push(`assets=${assets}`);
-  }
-
-  // Serialize remaining params
-  for (var p in otherParams) params.push(p + '=' + otherParams[p]);
-
-  return `https://planetarycomputer.microsoft.com/api/data/v1/mosaic/tiles/${
-    mosaic.id
-  }/{z}/{x}/{y}?${params.join('&')}`;
-}
diff --git a/app/assets/scripts/fsm/project/services.js b/app/assets/scripts/fsm/project/services.js
index 92be1157..c991b97a 100644
--- a/app/assets/scripts/fsm/project/services.js
+++ b/app/assets/scripts/fsm/project/services.js
@@ -6,7 +6,7 @@ import { delay } from '../../utils/utils';
 import { WebsocketClient } from './websocket-client';
 import logger from '../../utils/logger';
 import toasts from '../../components/common/toasts';
-import { getMosaicTileUrl } from './helpers';
+import { getMosaicTileUrl } from '../../utils/mosaics';
 import { SESSION_MODES } from './constants';
 import { round } from '../../utils/format';
 
@@ -93,7 +93,12 @@ export const services = {
             );
           } catch (error) {
             logger('Error fetching tilejson');
-            toasts.error('There was an error fetching the prediction layer.');
+
+            currentTimeframe = undefined;
+            currentMosaic = undefined;
+            toasts.error(
+              'There was an error loading the prediction for the latest AOI timeframe, please run a prediction again.'
+            );
           }
         }
       }
@@ -407,7 +412,10 @@ export const services = {
               // Instance is processing a different timeframe, abort it
               if (instanceConfig.timeframe_id !== data.timeframe) {
                 websocket.sendMessage({
-                  action: 'model#abort',
+                  action: 'instance#terminate',
+                });
+                callback({
+                  type: 'Instance activation has failed',
                 });
               }
             } else {
diff --git a/app/assets/scripts/utils/dates.js b/app/assets/scripts/utils/dates.js
new file mode 100644
index 00000000..fff9c24e
--- /dev/null
+++ b/app/assets/scripts/utils/dates.js
@@ -0,0 +1,16 @@
+/**
+ * This function formats a timestamp to a simple UTC string, generally used
+ * for displaying timestamps for mosaics.
+ */
+export function formatTimestampToSimpleUTC(timestamp) {
+  const isoString = new Date(timestamp).toISOString();
+  const datePart = isoString.split('T')[0];
+  const timePart = isoString.split('T')[1].slice(0, 5);
+  return `${datePart} ${timePart} UTC`;
+}
+
+export function formatTimestampToSimpleUTCDate(timestamp) {
+  const isoString = new Date(timestamp).toISOString();
+  const datePart = isoString.split('T')[0];
+  return `${datePart}`;
+}
diff --git a/app/assets/scripts/utils/mosaics.js b/app/assets/scripts/utils/mosaics.js
new file mode 100644
index 00000000..1f1ef4cb
--- /dev/null
+++ b/app/assets/scripts/utils/mosaics.js
@@ -0,0 +1,126 @@
+import { formatTimestampToSimpleUTC } from './dates';
+
+const MAX_CLOUD_COVER_PERCENTAGE = 10;
+
+/**
+ * Get the tile url for a mosaic.
+ * @param {object} mosaic
+ * @returns {string} url
+ */
+export function getMosaicTileUrl(mosaic) {
+  if (!mosaic) return;
+  const mosaicParams = mosaic?.ui_params || mosaic?.params;
+
+  if (!mosaicParams) return;
+
+  const { assets, ...otherParams } = mosaicParams;
+
+  let params = [];
+
+  // The tiler doesn't support array[] notation in the querystring, this will
+  // generate a custom notation like 'asset=a&asset=b&asset=c'
+  if (Array.isArray(assets)) {
+    assets.forEach((a) => params.push(`assets=${a}`));
+  } else {
+    params.push(`assets=${assets}`);
+  }
+
+  // Serialize remaining params
+  for (var p in otherParams) params.push(p + '=' + otherParams[p]);
+
+  return `https://planetarycomputer.microsoft.com/api/data/v1/mosaic/tiles/${
+    mosaic.id
+  }/{z}/{x}/{y}?${params.join('&')}`;
+}
+
+/**
+ * Get planetary computer search id for a Sentinel 2 Level2a for a interval
+ * and other filters.
+ *
+ * @param {object} options
+ * @param {Date} options.start
+ * @param {Date} options.end
+ * @returns {string} searchid
+ */
+export async function getSentinel2PCSearchId({ start, end }) {
+  const res = await fetch(
+    'https://planetarycomputer.microsoft.com/api/data/v1/mosaic/register',
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        'filter-lang': 'cql2-json',
+        filter: {
+          op: 'and',
+          args: [
+            { op: '=', args: [{ property: 'collection' }, 'sentinel-2-l2a'] },
+            {
+              op: 'anyinteracts',
+              args: [
+                { property: 'datetime' },
+                { interval: [start.toISOString(), end.toISOString()] },
+              ],
+            },
+            {
+              op: '<=',
+              args: [
+                { property: 'eo:cloud_cover' },
+                MAX_CLOUD_COVER_PERCENTAGE,
+              ],
+            },
+          ],
+        },
+        sortby: [{ field: 'datetime', direction: 'desc' }],
+      }),
+      method: 'POST',
+    }
+  );
+
+  const { searchid } = await res.json();
+
+  return searchid;
+}
+
+/**
+ * Generate a mosaic object for Sentinel 2 Level2a to be used in the API.
+ *
+ * @param {object} options
+ * @param {number} options.startTime
+ * @param {number} options.endTime
+ * @param {number} options.imagerySourceId
+ * @returns {object} mosaic
+ */
+export async function generateSentinel2L2AMosaic({
+  startTime,
+  endTime,
+  imagerySourceId,
+}) {
+  const baseSentinelMosaic = {
+    params: {
+      assets: ['B04', 'B03', 'B02', 'B08'],
+      rescale: '0,10000',
+      collection: 'sentinel-2-l2a',
+    },
+    imagery_source_id: 2,
+    ui_params: {
+      assets: ['B04', 'B03', 'B02'],
+      collection: 'sentinel-2-l2a',
+      color_formula: 'Gamma+RGB+3.2+Saturation+0.8+Sigmoidal+RGB+25+0.35',
+    },
+  };
+
+  return {
+    ...baseSentinelMosaic,
+    id: await getSentinel2PCSearchId({
+      start: new Date(startTime),
+      end: new Date(endTime),
+    }),
+    imagery_source_id: imagerySourceId,
+    name: `Sentinel-2 Level-2A ${formatTimestampToSimpleUTC(
+      startTime
+    )} - ${formatTimestampToSimpleUTC(endTime)}`,
+    mosaic_ts_start: startTime,
+    mosaic_ts_end: endTime,
+  };
+}