diff --git a/apps/nowcasting-app/components/Toggle.tsx b/apps/nowcasting-app/components/Toggle.tsx
new file mode 100644
index 00000000..aecfd9e9
--- /dev/null
+++ b/apps/nowcasting-app/components/Toggle.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+const Toggle: FC<{
+  onClick: () => void;
+  visible: boolean;
+}> = ({ onClick, visible }) => {
+  return (
+    <label className="inline-flex items-center cursor-pointer px-1 ml-2">
+      <input type="checkbox" checked={visible} onChange={onClick} className={`toggle`}></input>
+    </label>
+  );
+};
+
+export default Toggle;
diff --git a/apps/nowcasting-app/components/charts/ChartLegend.tsx b/apps/nowcasting-app/components/charts/ChartLegend.tsx
index 263bb5d6..aad4cad8 100644
--- a/apps/nowcasting-app/components/charts/ChartLegend.tsx
+++ b/apps/nowcasting-app/components/charts/ChartLegend.tsx
@@ -1,115 +1,85 @@
 import Tooltip from "../tooltip";
 import { ChartInfo } from "../../ChartInfo";
 import { InfoIcon, LegendLineGraphIcon } from "../icons/icons";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import useGlobalState from "../helpers/globalState";
-import { getRounded4HoursAgoString } from "../helpers/utils";
-
-const LegendItem: FC<{
-  iconClasses: string;
-  label: string;
-  dashed?: boolean;
-  dataKey: string;
-}> = ({ iconClasses, label, dashed, dataKey }) => {
-  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
-  const isVisible = visibleLines.includes(dataKey);
-
-  const toggleLineVisibility = () => {
-    if (isVisible) {
-      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
-    } else {
-      setVisibleLines([...visibleLines, dataKey]);
-    }
-  };
-
-  return (
-    <div className="flex items-center flex-1">
-      <LegendLineGraphIcon className={iconClasses} dashed={dashed} />
-      <button
-        className="inline-flex flex-1 text-left pl-1 max-w-full w-44 dash:w-auto text-xs dash:text-base dash:tracking-wider dash:pb-1"
-        onClick={toggleLineVisibility}
-      >
-        <span
-          className={`block w-auto uppercase pl-1${
-            isVisible ? " font-extrabold dash:font-semibold" : ""
-          }`}
-        >
-          {label}
-        </span>
-      </button>
-    </div>
-  );
-};
+import LegendItem from "./LegendItem";
+import { N_HOUR_FORECAST_OPTIONS } from "../../constant";
 
 type ChartLegendProps = {
   className?: string;
 };
-export const ChartLegend: React.FC<ChartLegendProps> = ({ className }) => {
-  const [show4hView] = useGlobalState("show4hView");
+export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
+  const [showNHourView] = useGlobalState("showNHourView");
+  const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast");
 
-  const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = `flex flex-initial flex-col lg:flex-row 3xl:flex-col justify-between${
+  const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${
     className ? ` ${className}` : ""
   }`;
   return (
-    <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 pt-3 bg-mapbox-black-500 overflow-y-visible">
-      <div className={`flex flex-1 justify-around flex-col 3xl:flex-row pb-3 overflow-x-auto`}>
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            dashed
-            label={"PV live initial estimate"}
-            dataKey={`GENERATION`}
-          />
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            label={"PV live updated"}
-            dataKey={`GENERATION_UPDATED`}
-          />
-        </div>
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-yellow"}
-            dashed
-            label={"OCF Forecast"}
-            dataKey={`FORECAST`}
-          />
-          <LegendItem
-            iconClasses={"text-ocf-yellow"}
-            label={"OCF Final Forecast"}
-            dataKey={`PAST_FORECAST`}
-          />
-        </div>
-        {show4hView && (
+    <div className="@container flex flex-initial">
+      <div className="flex flex-1 flex-col justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 gap-3 bg-mapbox-black-500 overflow-y-visible @sm:flex-row @xl:gap-6">
+        <div
+          className={`flex flex-initial pr-2 justify-between flex-col overflow-x-auto @sm:gap-1 @md:pr-0 @md:flex-col @md:gap-1 @lg:flex-row @lg:gap-8 @3xl:gap-12 @6xl:gap-6`}
+        >
           <div className={legendItemContainerClasses}>
             <LegendItem
-              iconClasses={"text-ocf-orange"}
-              dashed
-              // label={`OCF ${fourHoursAgo} Forecast`}
-              label={`OCF 4hr+ Forecast`}
-              dataKey={`4HR_FORECAST`}
+              iconClasses={"text-ocf-black"}
+              dashStyle={"dashed"}
+              label={"PV live initial estimate"}
+              dataKey={`GENERATION`}
             />
             <LegendItem
-              iconClasses={"text-ocf-orange"}
-              label={"OCF 4hr Forecast"}
-              dataKey={`4HR_PAST_FORECAST`}
+              iconClasses={"text-ocf-black"}
+              label={"PV live updated"}
+              dataKey={`GENERATION_UPDATED`}
             />
           </div>
-        )}
-      </div>
-      <div className="flex-initial flex items-center pb-3">
-        <Tooltip
-          tip={
-            <div className="w-64 rounded-md">
-              <ChartInfo />
-            </div>
-          }
-          position="top"
-          className={"text-right"}
-          fullWidth
-        >
-          <InfoIcon />
-        </Tooltip>
+          <div className={legendItemContainerClasses}>
+            <LegendItem
+              iconClasses={"text-ocf-yellow"}
+              dashStyle={"both"}
+              label={"OCF Latest Forecast"}
+              dataKey={`FORECAST`}
+            />
+            {/*<LegendItem*/}
+            {/*  iconClasses={"text-ocf-yellow"}*/}
+            {/*  label={"OCF Final Forecast"}*/}
+            {/*  dataKey={`PAST_FORECAST`}*/}
+            {/*/>*/}
+            {showNHourView && (
+              <LegendItem
+                iconClasses={"text-ocf-orange"}
+                dashStyle={"both"}
+                label={`OCF ${nHourForecast}hr Forecast`}
+                dataKey={`N_HOUR_FORECAST`}
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex flex-1 w-full justify-end items-end gap-3 pr-3 @md:flex-col @lg:gap-4 @2xl:flex-row @3xl:gap-12">
+          <div className="flex">
+            <div className="h-8 w-10 mr-2 custom-select bg-mapbox-black-600 rounded-md">
+              <select
+                value={nHourForecast}
+                onChange={(e) => setNHourForecast(Number(e.target.value))}
+                className="text-sm px-2 py-0 rounded-md"
+              >
+                {N_HOUR_FORECAST_OPTIONS.map((option) => (
+                  <option
+                    key={`N-hour-select-option-${option}`}
+                    className="text-black bg-white"
+                    value={option}
+                  >
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>{" "}
+            hour <br />
+            forecast
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx b/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
index 2a3d1a38..4cce6719 100644
--- a/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
+++ b/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
@@ -31,7 +31,7 @@ const DataLoadingChartStatus = <
   const isLoadingData =
     !loadingState.initialLoadComplete ||
     (loadingState.showMessage && !!loadingState.message.length);
-  const [show4hView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
 
   if (!loadingState || !loadingState.endpointStates || !loadingState.endpointStates.type)
     return null;
@@ -42,7 +42,7 @@ const DataLoadingChartStatus = <
         isLoadingData={isLoadingData}
         message={loadingState.message}
         endpointStates={loadingState.endpointStates}
-        show4hView={show4hView}
+        showNHourView={showNHourView}
       />
     );
   } else if (isEndpointStateType<SitesEndpointStates>(loadingState.endpointStates, "sites")) {
@@ -51,7 +51,7 @@ const DataLoadingChartStatus = <
         message={loadingState.message}
         endpointStates={loadingState.endpointStates}
         isLoadingData={isLoadingData}
-        show4hView={show4hView}
+        showNHourView={showNHourView}
       />
     );
   }
@@ -63,18 +63,18 @@ type EndpointStatusListProps<K> = {
   isLoadingData: boolean;
   message: string;
   endpointStates: K;
-  show4hView: boolean | undefined;
+  showNHourView: boolean | undefined;
 };
 const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStates>({
   isLoadingData,
   message,
   endpointStates,
-  show4hView = false
+  showNHourView = false
 }: EndpointStatusListProps<K>) => {
   const endpointsArray = Array.from(Object.entries(endpointStates));
   return (
     <div
-      className={`absolute -top-4 right-4 flex items-center h-9 ${isLoadingData ? "z-40" : "z-0"}`}
+      className={`absolute -top-4 right-2 flex items-center h-9 ${isLoadingData ? "z-40" : "z-0"}`}
     >
       <div
         className={`chart-data-loading-message flex flex-row relative h-6 cursor-default justify-between items-center rounded-sm bg-mapbox-black  ${
@@ -92,7 +92,7 @@ const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStat
             {!!endpointsArray.length &&
               endpointsArray.map(([key, val]) => {
                 if (!endpointStates) return null;
-                if (key === "national4Hour" && !show4hView) return null;
+                if (key === "nationalNHour" && !showNHourView) return null;
                 // Filter out "type" key with string state value
                 if (typeof val === "string") return null;
                 const state = endpointStates[key as keyof typeof endpointStates];
diff --git a/apps/nowcasting-app/components/charts/LegendItem.tsx b/apps/nowcasting-app/components/charts/LegendItem.tsx
new file mode 100644
index 00000000..a62f5383
--- /dev/null
+++ b/apps/nowcasting-app/components/charts/LegendItem.tsx
@@ -0,0 +1,44 @@
+import { FC } from "react";
+import useGlobalState from "../helpers/globalState";
+import { LegendLineGraphIcon } from "../icons/icons";
+import Toggle from "../Toggle";
+
+const LegendItem: FC<{
+  iconClasses: string;
+  label: string;
+  dashStyle?: "both" | "dashed" | "solid";
+  dataKey: string;
+}> = ({ iconClasses, label, dashStyle, dataKey }) => {
+  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
+  const isVisible = visibleLines.includes(dataKey);
+
+  const toggleLineVisibility = () => {
+    if (isVisible) {
+      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
+    } else {
+      setVisibleLines([...visibleLines, dataKey]);
+    }
+  };
+
+  return (
+    <div className="flex items-center flex-initial">
+      <LegendLineGraphIcon className={iconClasses} dashStyle={dashStyle} />
+      <button
+        className="inline-flex flex-1 text-left pl-1 max-w-full w-auto leading-tight text-2xs @lg:pr-1 @xl:pr-0 @2xl:text-xs dash:text-base dash:tracking-wider dash:pb-1"
+        onClick={toggleLineVisibility}
+      >
+        <span
+          className={`block sometimes-bold w-auto uppercase pl-1${
+            isVisible ? " font-extrabold dash:font-semibold" : " text-ocf-gray-700"
+          }`}
+          title={label}
+        >
+          {label}
+        </span>
+      </button>
+      <Toggle onClick={toggleLineVisibility} visible={isVisible} />
+    </div>
+  );
+};
+
+export default LegendItem;
diff --git a/apps/nowcasting-app/components/charts/delta-view/delta-buckets-ui.tsx b/apps/nowcasting-app/components/charts/delta-view/delta-buckets-ui.tsx
index a847f04b..da45eec6 100644
--- a/apps/nowcasting-app/components/charts/delta-view/delta-buckets-ui.tsx
+++ b/apps/nowcasting-app/components/charts/delta-view/delta-buckets-ui.tsx
@@ -38,13 +38,13 @@ const BucketItem: React.FC<Bucket> = ({
             flex-col items-center rounded`}
       >
         <button
-          className={`flex flex-col flex-1 w-full h-16 items-center p-1 pt-2 rounded-md justify-center border-2 ${bucketColor} ${
+          className={`flex flex-col flex-1 w-full items-center p-1 rounded-md justify-center border-2 ${bucketColor} ${
             isSelected ? selectedClass : unselectedClass
           }`}
           onClick={toggleBucketSelection}
         >
-          <span className="text-2xl font-semibold">{quantity}</span>
-          <span className="flex text-xs pb-2">
+          <span className="text-xl font-semibold leading-tight">{quantity}</span>
+          <span className="flex text-xs">
             {text === DELTA_BUCKET.ZERO.toString() ? `-/+` : `${text} MW`}
           </span>
         </button>
@@ -86,7 +86,7 @@ const DeltaBuckets: React.FC<{
 
   return (
     <>
-      <div className="flex justify-center mx-3 pb-10 gap-1 lg:gap-3">
+      <div className="sticky top-0 bg-mapbox-black-500 z-10 mx-3 pb-1 flex justify-center gap-1 lg:gap-3">
         {buckets.map((bucket) => {
           return <BucketItem key={`Bucket-${bucket.dataKey}`} {...bucket}></BucketItem>;
         })}
diff --git a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
index b8caaf10..268b7779 100644
--- a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
+++ b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
@@ -2,13 +2,9 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo } from "react";
 import RemixLine from "../remix-line";
 import { DELTA_BUCKET, MAX_NATIONAL_GENERATION_MW } from "../../../constant";
 import ForecastHeader from "../forecast-header";
-import useGlobalState, { get30MinNow, getNext30MinSlot } from "../../helpers/globalState";
+import useGlobalState, { get30MinSlot } from "../../helpers/globalState";
 import useFormatChartData from "../use-format-chart-data";
-import {
-  convertISODateStringToLondonTime,
-  formatISODateString,
-  getRounded4HoursAgoString
-} from "../../helpers/utils";
+import { convertToLocaleDateString, formatISODateString } from "../../helpers/utils";
 import GspPvRemixChart from "../gsp-pv-remix-chart";
 import { useStopAndResetTime } from "../../hooks/use-and-update-selected-time";
 import Spinner from "../../icons/spinner";
@@ -22,40 +18,6 @@ import useTimeNow from "../../hooks/use-time-now";
 import { ChartLegend } from "../ChartLegend";
 import DataLoadingChartStatus from "../DataLoadingChartStatus";
 
-const LegendItem: FC<{
-  iconClasses: string;
-  label: string;
-  dashed?: boolean;
-  dataKey: string;
-  show4hrView: boolean | undefined;
-}> = ({ iconClasses, label, dashed, dataKey, show4hrView }) => {
-  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
-  const isVisible = visibleLines.includes(dataKey);
-
-  const toggleLineVisibility = () => {
-    if (isVisible) {
-      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
-    } else {
-      setVisibleLines([...visibleLines, dataKey]);
-    }
-  };
-
-  return (
-    <div className="flex items-center">
-      <LegendLineGraphIcon className={iconClasses} dashed={dashed} />
-      <button className="text-left pl-1 max-w-full" onClick={toggleLineVisibility}>
-        <span
-          className={`uppercase block whitespace-nowrap ${show4hrView ? "pr-3" : "pr-6"} pl-1${
-            isVisible ? " font-extrabold" : ""
-          }`}
-        >
-          {label}
-        </span>
-      </button>
-    </div>
-  );
-};
-
 const GspDeltaColumn: FC<{
   gspDeltas: Map<string, GspDeltaValue> | undefined;
   setClickedGspId: Dispatch<SetStateAction<number | undefined>>;
@@ -77,7 +39,7 @@ const GspDeltaColumn: FC<{
   let hasRows = false;
   return (
     <>
-      <div className={`flex flex-col flex-1 mb-24 ${!negative ? "pl-1" : "pr-1 "}`}>
+      <div className={`flex flex-col flex-1`}>
         {deltaArray.sort(sortFunc).map((gspDelta) => {
           let bucketColor = "";
           let dataKey = "";
@@ -136,80 +98,70 @@ const GspDeltaColumn: FC<{
               break;
           }
 
-          const isSelected = selectedBuckets.includes(gspDelta.deltaBucketKey);
-          if (isSelected && !hasRows) {
+          const bucketIsSelected = selectedBuckets.includes(gspDelta.deltaBucketKey);
+          if (bucketIsSelected && !hasRows) {
             hasRows = true;
           }
 
+          const isSelectedGsp = Number(clickedGspId) === Number(gspDelta.gspId);
+
           // this is normalized putting the delta value over the installed capacity of a gsp
           const deltaNormalizedPercentage = Math.abs(
             Number(gspDelta.deltaNormalized) * 100
           ).toFixed(0);
 
-          const tickerColor = `${clickedGspId === gspDelta.gspId ? `h-2.5` : `h-2`} ${
+          const tickerColor = `${isSelectedGsp ? `h-2.5` : `h-2`} ${
             gspDelta.delta > 0 ? `bg-ocf-delta-900` : `bg-ocf-delta-100`
           }`;
 
-          const selectedClasses = `${bucketColor} transition duration-200 ease-out hover:ease-in items-start`;
+          const deltaRowClasses = `bg-ocf-delta-950`;
 
-          const selectedDeltaClass = `bg-ocf-gray-800 ${bucketColor} items-end`;
+          const selectedDeltaRowClasses = `bg-ocf-gray-800 items-end`;
 
-          if (!isSelected) {
+          if (!bucketIsSelected) {
             return null;
           }
 
           return (
             <div
-              className={`mb-0.5 bg-ocf-delta-950 cursor-pointer relative flex w-full transition duration-200 ease-out hover:bg-ocf-gray-800 hover:ease-in`}
+              className={`mb-0.5 border-mapbox-black-600 border ${
+                isSelectedGsp ? selectedDeltaRowClasses : deltaRowClasses
+              } ${
+                negative ? "rounded-l" : "rounded-r"
+              } box-content cursor-pointer relative flex w-full transition duration-200 ease-out 
+              hover:bg-ocf-gray-900 hover:ease-in`}
               key={`gspCol${gspDelta.gspId}`}
               onClick={() => setClickedGspId(gspDelta.gspId)}
             >
               <div
-                className={`static items-start xl:items-center flex flex-col xl:flex-row flex-1 py-2 justify-between pl-1 pr-1 ${
-                  clickedGspId === gspDelta.gspId ? selectedDeltaClass : selectedClasses
-                } ${gspDelta.delta > 0 ? `border-l-8` : `border-r-8`}`}
+                className={`items-start xl:items-center text-xs grid grid-cols-12 flex-1 py-1.5 justify-between px-2 
+                transition duration-200 ease-out hover:ease-in ${bucketColor} ${
+                  gspDelta.delta > 0 ? `border-l-8` : `border-r-8`
+                }`}
                 key={`gspCol${gspDelta.gspId}`}
               >
-                <div className="flex-initial flex justify-between self-stretch items-center pl-1 dash:max-w-full">
+                <div className="col-span-10 xl:col-span-5 flex-initial flex justify-between self-stretch items-center dash:max-w-full">
                   <span className="">{gspDelta.gspRegion}</span>
                   {/* normalized percentage: delta value/gsp installed mw capacity */}
-                  <div className="block flex-initial xl:hidden">
-                    <DeltaForecastLabel
-                      tip={
-                        <div className="w-28 text-xs">
-                          <p>{"Normalized Delta"}</p>
-                        </div>
-                      }
-                    >
-                      <div className="flex text-right opacity-80 text-sm">
-                        <p>
-                          {negative ? "-" : "+"}
-                          {deltaNormalizedPercentage}%
-                        </p>
-                      </div>
-                    </DeltaForecastLabel>
-                  </div>
                 </div>
-                <div className="flex flex-initial flex-end justify-between self-stretch items-center">
-                  {/* normalized percentage: delta value/gsp installed mw capacity */}
-                  <div className="hidden xl:block">
-                    <DeltaForecastLabel
-                      tip={
-                        <div className="w-28 text-xs">
-                          <p>{"Normalized Delta"}</p>
-                        </div>
-                      }
-                    >
-                      <div className="flex pr-3 text-right opacity-80 text-sm">
-                        <p>
-                          {negative ? "-" : "+"}
-                          {deltaNormalizedPercentage}%
-                        </p>
+                <div className="col-span-2 xl:col-span-2 flex">
+                  <DeltaForecastLabel
+                    className="flex-1 text-right justify-end xl:justify-start "
+                    tip={
+                      <div className="px-1 text-xs">
+                        <p>{"Normalized Delta"}</p>
                       </div>
-                    </DeltaForecastLabel>
-                  </div>
+                    }
+                  >
+                    <span className={"self-stretch opacity-80"}>
+                      {negative ? "-" : "+"}
+                      {deltaNormalizedPercentage}%
+                    </span>
+                  </DeltaForecastLabel>
+                </div>
 
-                  {/* delta value in mw */}
+                {/* delta value in mw */}
+                <div className="col-span-6 xl:col-span-2 flex justify-start">
                   <DeltaForecastLabel
                     tip={
                       <div className="w-28 text-xs">
@@ -217,36 +169,42 @@ const GspDeltaColumn: FC<{
                       </div>
                     }
                   >
-                    <div className="flex pr-3 font-semibold justify-start">
-                      <div>
-                        <p>
-                          {!negative && "+"}
-                          {Number(gspDelta.delta).toFixed(0)}{" "}
-                          <span className="opacity-80 text-xs font-thin">MW</span>
-                        </p>
-                      </div>
+                    <div>
+                      <p>
+                        {!negative && "+"}
+                        <span className="font-semibold">
+                          {Number(gspDelta.delta).toFixed(0)}
+                        </span>{" "}
+                        <span className="opacity-80 text-2xs font-thin">MW</span>
+                      </p>
                     </div>
                   </DeltaForecastLabel>
+                </div>
 
-                  {/* currentYield/forecasted yield */}
-                  <div>
-                    <DeltaForecastLabel
-                      tip={
-                        <div className="w-28 text-xs">
-                          <p>{"Actual PV / Forecast"}</p>
-                        </div>
-                      }
-                    >
-                      <div className="flex flex-col pr-1 text-right font-semibold text-sm">
-                        <div>
-                          {Number(gspDelta.currentYield).toFixed(0)}/
-                          {Number(gspDelta.forecast).toFixed(0)}{" "}
-                          <span className={`opacity-80 text-xs font-thin`}>MW</span>
-                        </div>
+                {/* currentYield/forecasted yield */}
+                <div className="col-span-6 xl:col-span-3">
+                  <DeltaForecastLabel
+                    tip={
+                      <div className="px-1 text-xs">
+                        <p>{"Actual PV / Forecast"}</p>
                       </div>
-                    </DeltaForecastLabel>
-                  </div>
+                    }
+                  >
+                    <div className="flex flex-1 items-end justify-end text-right font-semibold">
+                      <div>
+                        <span className={"text-black"}>
+                          {Number(gspDelta.currentYield).toFixed(0)}
+                        </span>{" "}
+                        /{" "}
+                        <span className="text-ocf-yellow">
+                          {Number(gspDelta.forecast).toFixed(0)}
+                        </span>{" "}
+                        <span className={`opacity-80 text-2xs font-thin`}>MW</span>
+                      </div>
+                    </div>
+                  </DeltaForecastLabel>
                 </div>
+                {/*</div>*/}
               </div>
               <div className={`absolute bottom-0 right-0 left-0 ${bucketColor}`}>
                 <div
@@ -255,15 +213,11 @@ const GspDeltaColumn: FC<{
                   }`}
                 >
                   <div
-                    className={`${
-                      clickedGspId === gspDelta.gspId ? `h-2.5` : `h-2`
-                    } ${progressLineColor}`}
-                    style={{ width: `1px` }}
+                    className={`${isSelectedGsp ? `h-1.5` : `h-1`} bg-ocf-gray-800`}
+                    style={{ width: `2px` }}
                   ></div>
                   <div
-                    className={`${
-                      clickedGspId === gspDelta.gspId ? `h-1.5` : `h-1`
-                    } ${progressLineColor}`}
+                    className={`${isSelectedGsp ? `h-1.5` : `h-1`} ${progressLineColor}`}
                     style={{ width: `${deltaNormalizedPercentage}%` }}
                   ></div>
                 </div>
@@ -273,7 +227,7 @@ const GspDeltaColumn: FC<{
         })}
 
         {!hasRows && (
-          <div className={`${negative ? "pl" : "pr"}-3`}>
+          <div className={`${negative ? "pr-1.5" : "pl-1.5"}`}>
             <div
               className={`flex flex-col flex-1 items-center justify-center border-dashed border border-ocf-gray-400 rounded-md p-6`}
             >
@@ -296,7 +250,7 @@ type DeltaChartProps = {
 };
 const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErrors }) => {
   // const [view] = useGlobalState("view");
-  const [show4hView] = useGlobalState("show4hView");
+  const [show4hView] = useGlobalState("showNHourView");
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
   const [visibleLines] = useGlobalState("visibleLines");
   const [globalZoomArea] = useGlobalState("globalZoomArea");
@@ -307,10 +261,10 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
   const [loadingState] = useGlobalState("loadingState");
   const { stopTime, resetTime } = useStopAndResetTime();
   const selectedTime = formatISODateString(selectedISOTime || new Date().toISOString());
-  const selectedTimeHalfHourSlot = getNext30MinSlot(new Date(selectedTime));
-  const halfHourAgoDate = new Date(timeNow).setMinutes(new Date(timeNow).getMinutes() - 30);
-  const halfHourAgo = `${formatISODateString(new Date(halfHourAgoDate).toISOString())}:00Z`;
-  const hasGspPvInitialForSelectedTime = !!combinedData.pvRealDayInData?.find(
+  const selectedTimeHalfHourSlot = get30MinSlot(new Date(convertToLocaleDateString(selectedTime)));
+  // const halfHourAgoDate = new Date(timeNow).setMinutes(new Date(timeNow).getMinutes() - 30);
+  // const halfHourAgo = `${formatISODateString(new Date(halfHourAgoDate).toISOString())}:00Z`;
+  const hasGspPvInitialForSelectedTime = combinedData.pvRealDayInData?.find(
     (d) =>
       d.datetimeUtc.slice(0, 16) ===
       `${formatISODateString(selectedTimeHalfHourSlot.toISOString())}`
@@ -320,7 +274,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspForecastData,
     allGspRealData,
     gspDeltas
@@ -329,7 +283,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspForecastError
   } = combinedErrors;
 
@@ -345,14 +299,14 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
 
   const chartData = useFormatChartData({
     forecastData: nationalForecastData,
-    fourHourData: national4HourData,
+    fourHourData: nationalNHourData,
     pvRealDayInData,
     pvRealDayAfterData,
     timeTrigger: selectedTime,
     delta: true
   });
 
-  // While 4-hour is not available, we default to the latest interval with an Initial Estimate
+  // While N-hour is not available, we default to the latest interval with an Initial Estimate
   // useEffect(() => {
   //   if (selectedISOTime === get30MinNow() && view === VIEWS.DELTA) {
   //     setSelectedISOTime(get30MinNow(-60));
@@ -363,7 +317,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastError ||
     pvRealDayInError ||
     pvRealDayAfterError ||
-    national4HourError ||
+    nationalNHourError ||
     allGspForecastError
   )
     return <div className={`h-full flex ${className}`}>Failed to load data.</div>;
@@ -379,33 +333,32 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     stopTime();
     setSelectedISOTime(time + ":00.000Z");
   };
-  const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = "flex flex-initial flex-col xl:flex-col justify-between";
 
   return (
-    <div className={`flex flex-col flex-1 mb-1 ${className || ""}`}>
-      <div className="flex-auto flex flex-col mb-7">
-        <ForecastHeader
-          pvForecastData={nationalForecastData}
-          pvLiveData={pvRealDayInData}
-          deltaView={true}
-        ></ForecastHeader>
-
-        <div className="flex-1 relative min-h-[30vh] max-h-[40vh] h-auto mt-4">
-          <DataLoadingChartStatus<NationalEndpointStates> loadingState={loadingState} />
-          <RemixLine
-            resetTime={resetTime}
-            timeNow={formatISODateString(timeNow)}
-            timeOfInterest={selectedTime}
-            setTimeOfInterest={setSelectedTime}
-            data={chartData}
-            yMax={MAX_NATIONAL_GENERATION_MW}
-            visibleLines={visibleLines}
+    <>
+      <div className={`flex flex-col flex-1 ${className || ""}`}>
+        <div className="flex flex-1 flex-col relative">
+          <ForecastHeader
+            pvForecastData={nationalForecastData}
+            pvLiveData={pvRealDayInData}
             deltaView={true}
-          />
+          ></ForecastHeader>
+          <div className={"flex-1 relative"}>
+            <DataLoadingChartStatus<NationalEndpointStates> loadingState={loadingState} />
+            <RemixLine
+              resetTime={resetTime}
+              timeNow={formatISODateString(timeNow)}
+              timeOfInterest={selectedTime}
+              setTimeOfInterest={setSelectedTime}
+              data={chartData}
+              yMax={MAX_NATIONAL_GENERATION_MW}
+              visibleLines={visibleLines}
+              deltaView={true}
+            />
+          </div>
         </div>
         {clickedGspId && (
-          <div className="flex-1 flex flex-col relative min-h-[30vh] h-auto">
+          <div className="flex-1 flex flex-col relative dash:h-auto">
             <GspPvRemixChart
               close={() => {
                 setClickedGspId(undefined);
@@ -420,25 +373,27 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
             ></GspPvRemixChart>
           </div>
         )}
-        <div>
+        <div
+          className={`flex flex-col flex-grow-0 flex-shrink overflow-y-scroll ${
+            clickedGspId ? "h-[30%]" : "h-[40%]"
+          }`}
+        >
           <DeltaBuckets bucketSelection={selectedBuckets} gspDeltas={gspDeltas} />
-        </div>
-        <div className="flex flex-initial justify-between mb-15">
           {!hasGspPvInitialForSelectedTime && (
-            <div className="flex flex-1 mb-16 px-4 justify-center items-center text-center text-ocf-gray-600 w-full">
+            <div className="flex flex-1 m-3 p-4 font-thin tracking-wide border border-dashed border-ocf-gray-600 rounded-md justify-center items-center text-center text-ocf-gray-600">
               [ Delta values not available until PV Live output available ]
             </div>
           )}
           {hasGspPvInitialForSelectedTime && gspDeltas && (
-            <>
+            <div className="flex pt-2 mx-3 max-h-96">
               <GspDeltaColumn gspDeltas={gspDeltas} negative setClickedGspId={setClickedGspId} />
               <GspDeltaColumn gspDeltas={gspDeltas} setClickedGspId={setClickedGspId} />
-            </>
+            </div>
           )}
         </div>
       </div>
-      <ChartLegend />
-    </div>
+      {!className?.includes("hidden") && <ChartLegend />}
+    </>
   );
 };
 
diff --git a/apps/nowcasting-app/components/charts/forecast-header/ui.tsx b/apps/nowcasting-app/components/charts/forecast-header/ui.tsx
index a47354e4..6d19230f 100644
--- a/apps/nowcasting-app/components/charts/forecast-header/ui.tsx
+++ b/apps/nowcasting-app/components/charts/forecast-header/ui.tsx
@@ -164,7 +164,10 @@ const ForecastHeaderUI: React.FC<ForecastHeaderProps> = ({
   forecastNextTimeOnly
 }) => {
   return (
-    <div data-test="national-chart-header" className="flex content-between bg-ocf-gray-800 h-auto">
+    <div
+      data-test="national-chart-header"
+      className="flex flex-initial content-between bg-ocf-gray-800 h-auto mb-4"
+    >
       <div className="text-white dash:3xl:text-5xl dash:2xl:text-4xl dash:xl:text-3xl dash:tracking-wide lg:text-2xl md:text-lg text-base font-black m-auto ml-5 flex justify-evenly">
         National
       </div>
diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
index 8535cf07..7e13c448 100644
--- a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
+++ b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
@@ -39,21 +39,20 @@ const GspPvRemixChart: FC<{
   visibleLines,
   deltaView = false
 }) => {
-  //when adding 4hour forecast data back in, add gsp4HourData to list in line 27
   const {
     errors,
     pvRealDataAfter,
     pvRealDataIn,
     gspLocationInfo,
     gspForecastDataOneGSP,
-    gsp4HourData
+    gspNHourData
   } = useGetGspData(gspId);
   // const gspData = fcAll?.forecasts.find((fc) => fc.location.gspId === gspId);
   const gspInstalledCapacity = gspLocationInfo?.[0]?.installedCapacityMw;
   const gspName = gspLocationInfo?.[0]?.regionName;
   const chartData = useFormatChartData({
     forecastData: gspForecastDataOneGSP,
-    fourHourData: gsp4HourData,
+    fourHourData: gspNHourData,
     pvRealDayInData: pvRealDataIn,
     pvRealDayAfterData: pvRealDataAfter,
     timeTrigger: selectedTime,
@@ -71,7 +70,7 @@ const GspPvRemixChart: FC<{
   const pvPercentage = (forecastAtSelectedTime.expectedPowerGenerationNormalized || 0) * 100;
 
   const fourHourForecastAtSelectedTime: ForecastValue =
-    gsp4HourData?.find((fc) => formatISODateString(fc?.targetTime) === now30min) ||
+    gspNHourData?.find((fc) => formatISODateString(fc?.targetTime) === now30min) ||
     ({} as ForecastValue);
 
   //
@@ -141,7 +140,7 @@ const GspPvRemixChart: FC<{
           <span className="text-xs dash:text-2xl text-ocf-gray-300"> MW</span>
         </ForecastHeaderGSP>
       </div>
-      <div className="flex-1 relative min-h-[30vh] max-h-[40vh] h-auto">
+      <div className="flex-1 relative">
         {dataMissing && (
           <div className="h-full absolute flex pb-7 items-center justify-center inset-0 z-30">
             <Spinner />
diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
index 49804294..18a271d9 100644
--- a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
+++ b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
@@ -4,7 +4,8 @@ import useGlobalState from "../../helpers/globalState";
 import { useLoadDataFromApi } from "../../hooks/useLoadDataFromApi";
 
 const useGetGspData = (gspId: number) => {
-  const [show4hView] = useGlobalState("show4hView");
+  const [show4hView] = useGlobalState("showNHourView");
+  const [nHourForecast] = useGlobalState("nHourForecast");
 
   const { data: pvRealDataIn, error: pvRealInDat } = useLoadDataFromApi<PvRealData>(
     `${API_PREFIX}/solar/GB/gsp/pvlive/${gspId}?regime=in-day`
@@ -16,16 +17,19 @@ const useGetGspData = (gspId: number) => {
 
   //add new useSWR for gspChartData
   const { data: gspForecastDataOneGSP, error: gspForecastDataOneGSPError } =
-    useLoadDataFromApi<ForecastData>(`${API_PREFIX}/solar/GB/gsp/${gspId}/forecast?UI`);
+    useLoadDataFromApi<ForecastData>(`${API_PREFIX}/solar/GB/gsp/${gspId}/forecast`, {
+      dedupingInterval: 1000 * 30
+    });
 
   //add new useSWR for gspLocationInfo since this is not
   const { data: gspLocationInfo, error: gspLocationError } = useLoadDataFromApi<GspEntities>(
     `${API_PREFIX}/system/GB/gsp/?gsp_id=${gspId}`
   );
 
-  const { data: gsp4HourData, error: pv4HourError } = useLoadDataFromApi<ForecastData>(
+  const nMinuteForecast = nHourForecast * 60;
+  const { data: gspNHourData, error: pvNHourError } = useLoadDataFromApi<ForecastData>(
     show4hView
-      ? `${API_PREFIX}/solar/GB/gsp/${gspId}/forecast?forecast_horizon_minutes=240&historic=true&only_forecast_values=true`
+      ? `${API_PREFIX}/solar/GB/gsp/${gspId}/forecast?forecast_horizon_minutes=${nMinuteForecast}&historic=true&only_forecast_values=true`
       : null
   );
 
@@ -35,9 +39,9 @@ const useGetGspData = (gspId: number) => {
       pvRealDayAfter,
       gspForecastDataOneGSPError,
       gspLocationError,
-      pv4HourError
+      pvNHourError
     ].filter((e) => !!e),
-    gsp4HourData,
+    gspNHourData: gspNHourData,
     pvRealDataIn,
     pvRealDataAfter,
     gspForecastDataOneGSP,
diff --git a/apps/nowcasting-app/components/charts/pv-remix-chart.tsx b/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
index 1bde1f43..7e03f524 100644
--- a/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
+++ b/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
@@ -33,7 +33,7 @@ const PvRemixChart: FC<{
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspForecastData,
     allGspRealData,
     gspDeltas
@@ -42,7 +42,7 @@ const PvRemixChart: FC<{
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspForecastError
   } = combinedErrors;
 
@@ -60,7 +60,7 @@ const PvRemixChart: FC<{
   const chartData = useFormatChartData({
     forecastData: nationalForecastData,
     probabilisticRangeData: nationalForecastData,
-    fourHourData: national4HourData,
+    fourHourData: nationalNHourData,
     pvRealDayInData,
     pvRealDayAfterData,
     timeTrigger: selectedTime
@@ -70,7 +70,7 @@ const PvRemixChart: FC<{
     nationalForecastError ||
     pvRealDayInError ||
     pvRealDayAfterError ||
-    national4HourError ||
+    nationalNHourError ||
     allGspForecastError
   )
     return <div className={`${className}`}>failed to load</div>;
@@ -81,15 +81,14 @@ const PvRemixChart: FC<{
   };
 
   return (
-    <div className={`flex flex-col flex-1 mb-1 ${className || ""}`}>
-      <div className="flex flex-col flex-auto">
-        <ForecastHeader
-          pvForecastData={nationalForecastData || []}
-          pvLiveData={pvRealDayInData || []}
-          deltaView={false}
-        ></ForecastHeader>
-
-        <div className="flex-1 relative h-60 dash:h-auto mt-4">
+    <>
+      <div className={`flex flex-col flex-auto ${className || ""}`}>
+        <div className="flex flex-col flex-1 dash:h-auto">
+          <ForecastHeader
+            pvForecastData={nationalForecastData || []}
+            pvLiveData={pvRealDayInData || []}
+            deltaView={false}
+          ></ForecastHeader>
           {(!nationalForecastData || !pvRealDayInData || !pvRealDayAfterData) && (
             <div
               className={`h-full absolute flex pb-7 items-center justify-center inset-0 z-30 ${className}`}
@@ -97,19 +96,21 @@ const PvRemixChart: FC<{
               <Spinner></Spinner>
             </div>
           )}
-          <DataLoadingChartStatus loadingState={loadingState} />
-          <RemixLine
-            resetTime={resetTime}
-            timeNow={formatISODateString(timeNow)}
-            timeOfInterest={selectedTime}
-            setTimeOfInterest={setSelectedTime}
-            data={chartData}
-            yMax={MAX_NATIONAL_GENERATION_MW}
-            visibleLines={visibleLines}
-          />
+          <div className="flex-1 relative">
+            <DataLoadingChartStatus loadingState={loadingState} />
+            <RemixLine
+              resetTime={resetTime}
+              timeNow={formatISODateString(timeNow)}
+              timeOfInterest={selectedTime}
+              setTimeOfInterest={setSelectedTime}
+              data={chartData}
+              yMax={MAX_NATIONAL_GENERATION_MW}
+              visibleLines={visibleLines}
+            />
+          </div>
         </div>
-        <div className="flex-1 flex flex-col relative h-60 dash:h-auto">
-          {clickedGspId && (
+        {clickedGspId && (
+          <div className="flex-1 flex flex-col relative dash:h-auto">
             <GspPvRemixChart
               close={() => {
                 setClickedGspId(undefined);
@@ -121,11 +122,11 @@ const PvRemixChart: FC<{
               resetTime={resetTime}
               visibleLines={visibleLines}
             ></GspPvRemixChart>
-          )}
-        </div>
+          </div>
+        )}
       </div>
-      <ChartLegend />
-    </div>
+      {!className?.includes("hidden") && <ChartLegend />}
+    </>
   );
 };
 
diff --git a/apps/nowcasting-app/components/charts/remix-line.tsx b/apps/nowcasting-app/components/charts/remix-line.tsx
index e09a45e3..3544436e 100644
--- a/apps/nowcasting-app/components/charts/remix-line.tsx
+++ b/apps/nowcasting-app/components/charts/remix-line.tsx
@@ -18,7 +18,6 @@ import {
   convertToLocaleDateString,
   dateToLondonDateTimeString,
   formatISODateStringHumanNumbersOnly,
-  getRounded4HoursAgoString,
   dateToLondonDateTimeOnlyString,
   getRoundedTickBoundary,
   prettyPrintChartAxisLabelDate,
@@ -42,8 +41,8 @@ export type ChartData = {
   GENERATION?: number;
   FORECAST?: number;
   PAST_FORECAST?: number;
-  "4HR_FORECAST"?: number;
-  "4HR_PAST_FORECAST"?: number;
+  N_HOUR_FORECAST?: number;
+  N_HOUR_PAST_FORECAST?: number;
   DELTA?: number;
   DELTA_BUCKET?: DELTA_BUCKET;
   PROBABILISTIC_UPPER_BOUND?: number;
@@ -58,10 +57,9 @@ const toolTiplabels: Record<string, string> = {
   PROBABILISTIC_UPPER_BOUND: "OCF 90%",
   FORECAST: "OCF Forecast",
   PAST_FORECAST: "OCF Forecast",
-  // "4HR_FORECAST": `OCF ${getRounded4HoursAgoString()} Forecast`,
   PROBABILISTIC_LOWER_BOUND: "OCF 10%",
-  "4HR_FORECAST": `OCF 4hr+ Forecast`,
-  "4HR_PAST_FORECAST": "OCF 4hr Forecast",
+  N_HOUR_FORECAST: `OCF N-hour Forecast`,
+  N_HOUR_PAST_FORECAST: "OCF N-hour Forecast",
   DELTA: "Delta"
 };
 
@@ -70,8 +68,8 @@ const toolTipColors: Record<string, string> = {
   GENERATION: "white",
   FORECAST: yellow,
   PAST_FORECAST: yellow,
-  "4HR_FORECAST": orange,
-  "4HR_PAST_FORECAST": orange,
+  N_HOUR_FORECAST: orange,
+  N_HOUR_PAST_FORECAST: orange,
   DELTA: deltaPos,
   PROBABILISTIC_UPPER_BOUND: yellow,
   PROBABILISTIC_LOWER_BOUND: yellow
@@ -148,20 +146,19 @@ const RemixLine: React.FC<RemixLineProps> = ({
 }) => {
   // Set the y max. If national then set to 12000, for gsp plot use 'auto'
   const preppedData = data.sort((a, b) => a.formattedDate.localeCompare(b.formattedDate));
-  const [show4hView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
   const [view] = useGlobalState("view");
   const [largeScreenMode] = useGlobalState("dashboardMode");
   const currentTime = getNext30MinSlot(new Date()).toISOString().slice(0, 16);
   const localeTimeOfInterest = convertToLocaleDateString(timeOfInterest + "Z").slice(0, 16);
-  const fourHoursFromNow = new Date(currentTime);
   const defaultZoom = { x1: "", x2: "" };
   const [filteredPreppedData, setFilteredPreppedData] = useState(preppedData);
   const [globalZoomArea, setGlobalZoomArea] = useGlobalState("globalZoomArea");
   const [globalIsZooming, setGlobalIsZooming] = useGlobalState("globalChartIsZooming");
   const [globalIsZoomed, setGlobalIsZoomed] = useGlobalState("globalChartIsZoomed");
   const [temporaryZoomArea, setTemporaryZoomArea] = useState(defaultZoom);
-
-  fourHoursFromNow.setHours(fourHoursFromNow.getHours() + 4);
+  const [nHourForecast] = useGlobalState("nHourForecast");
+  const [clickedGspId] = useGlobalState("clickedGspId");
 
   function prettyPrintYNumberWithCommas(
     x: string | number,
@@ -175,13 +172,6 @@ const RemixLine: React.FC<RemixLineProps> = ({
     return roundedNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
 
-  const prettyPrintDate = (x: string | number) => {
-    if (typeof x === "number") {
-      return dateToLondonDateTimeOnlyString(new Date(x));
-    }
-    return dateToLondonDateTimeOnlyString(new Date(x));
-  };
-
   const CustomBar = (props: { DELTA: number }) => {
     const { DELTA } = props;
     let fill = DELTA > 0 ? deltaPos : deltaNeg;
@@ -230,21 +220,58 @@ const RemixLine: React.FC<RemixLineProps> = ({
     setFilteredPreppedData(preppedData);
   }
 
+  const updateFilteredData = () => {
+    const { x1, x2 } = globalZoomArea;
+
+    if (!x1 || !x2) return;
+
+    const dataInAreaRange = preppedData.filter(
+      (d) => d?.formattedDate >= x1 && d?.formattedDate <= x2
+    );
+    setFilteredPreppedData(dataInAreaRange);
+  };
+
   useEffect(() => {
     if (!zoomEnabled) return;
 
     if (!globalIsZooming) {
-      const { x1, x2 } = globalZoomArea;
+      updateFilteredData();
+    }
+  }, [globalZoomArea, globalIsZooming, preppedData, zoomEnabled]);
 
-      if (!x1 || !x2) return;
+  useEffect(() => {
+    updateFilteredData();
+  }, [nHourForecast]);
+
+  const DeltaTick: FC<{ x?: number; y?: number; stroke?: string; payload?: any }> = ({
+    x,
+    y,
+    stroke,
+    payload
+  }) => {
+    return (
+      <g transform={`translate(${x},${y})`}>
+        <text className="fill-white text-xs text-right" x={0} y={0} dy={3} textAnchor={"start"}>
+          {`${payload.value > 0 ? "+" : ""}${prettyPrintYNumberWithCommas(payload.value)}`}
+        </text>
+      </g>
+    );
+  };
 
-      const dataInAreaRange = preppedData.filter(
-        (d) => d?.formattedDate >= x1 && d?.formattedDate <= x2
-      );
-      setFilteredPreppedData(dataInAreaRange);
-      setGlobalZoomArea({ x1: "", x2: "" });
+  let rightChartMargin = 16;
+  let deltaLabelOffset = roundTickMax ? -20 : -10;
+  if (deltaView) {
+    if (clickedGspId) {
+      rightChartMargin = 15;
+      if (roundTickMax) {
+        deltaLabelOffset = 0;
+      } else {
+        deltaLabelOffset = -5;
+      }
+    } else {
+      rightChartMargin = 0;
     }
-  }, [globalZoomArea, globalIsZooming, preppedData, zoomEnabled]);
+  }
 
   return (
     <div style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -260,392 +287,422 @@ const RemixLine: React.FC<RemixLineProps> = ({
           </button>
         </div>
       )}
-      <ResponsiveContainer>
-        <ComposedChart
-          className="select-none"
-          width={500}
-          height={400}
-          data={zoomEnabled && globalIsZoomed ? filteredPreppedData : preppedData}
-          margin={{
-            top: 20,
-            right: 16,
-            bottom: 20,
-            left: 16
-          }}
-          onClick={(e?: { activeLabel?: string }) => {
-            if (globalIsZooming) return;
-
-            if (setTimeOfInterest && e?.activeLabel) {
-              view === VIEWS.SOLAR_SITES
-                ? setTimeOfInterest(
-                    new Date(Number(e.activeLabel))?.toISOString() || new Date().toISOString()
-                  )
-                : setTimeOfInterest(e.activeLabel);
-            }
-          }}
-          onMouseDown={(e?: { activeLabel?: string }) => {
-            if (!zoomEnabled) return;
-            setTemporaryZoomArea(globalZoomArea);
-            setGlobalIsZooming(true);
-            let xValue = e?.activeLabel;
-            if (typeof xValue === "string" && xValue.length > 0) {
-              setGlobalZoomArea({ x1: xValue, x2: xValue });
-            }
-          }}
-          onMouseMove={(e?: { activeLabel?: string }) => {
-            if (!zoomEnabled) return;
-
-            if (globalIsZooming) {
+      <div className="absolute inset-0">
+        <ResponsiveContainer debounce={100}>
+          <ComposedChart
+            className="select-none"
+            width={500}
+            height={400}
+            data={zoomEnabled && globalIsZoomed ? filteredPreppedData : preppedData}
+            margin={{
+              top: 20,
+              right: rightChartMargin,
+              bottom: -10,
+              left: 16
+            }}
+            onClick={(e?: { activeLabel?: string }) => {
+              if (globalIsZooming) return;
+
+              if (setTimeOfInterest && e?.activeLabel) {
+                view === VIEWS.SOLAR_SITES
+                  ? setTimeOfInterest(
+                      new Date(Number(e.activeLabel))?.toISOString() || new Date().toISOString()
+                    )
+                  : setTimeOfInterest(e.activeLabel);
+              }
+            }}
+            onMouseDown={(e?: { activeLabel?: string }) => {
+              if (!zoomEnabled) return;
+              setTemporaryZoomArea(globalZoomArea);
+              setGlobalIsZooming(true);
               let xValue = e?.activeLabel;
-              if (!xValue) return;
-              setGlobalZoomArea((zoom) => ({ ...zoom, x2: xValue || "" }));
-            }
-          }}
-          onMouseUp={(e?: { activeLabel?: string }) => {
-            if (!zoomEnabled) return;
-
-            if (globalIsZooming) {
-              if (globalZoomArea.x1 === globalZoomArea.x2 && e?.activeLabel && setTimeOfInterest) {
-                setGlobalZoomArea(temporaryZoomArea);
-                setTimeOfInterest(e?.activeLabel);
-              } else if (globalZoomArea?.x1?.length && globalZoomArea?.x2?.length) {
-                let { x1 } = globalZoomArea;
-                let x2 = e?.activeLabel || "";
-                if (x1 > x2) {
-                  [x1, x2] = [x2, x1];
+              if (typeof xValue === "string" && xValue.length > 0) {
+                setGlobalZoomArea({ x1: xValue, x2: xValue });
+              }
+            }}
+            onMouseMove={(e?: { activeLabel?: string }) => {
+              if (!zoomEnabled) return;
+
+              if (globalIsZooming) {
+                let xValue = e?.activeLabel;
+                if (!xValue) return;
+                setGlobalZoomArea((zoom) => ({ ...zoom, x2: xValue || "" }));
+              }
+            }}
+            onMouseUp={(e?: { activeLabel?: string }) => {
+              if (!zoomEnabled) return;
+
+              if (globalIsZooming) {
+                if (
+                  globalZoomArea.x1 === globalZoomArea.x2 &&
+                  e?.activeLabel &&
+                  setTimeOfInterest
+                ) {
+                  setGlobalZoomArea(temporaryZoomArea);
+                  setTimeOfInterest(e?.activeLabel);
+                } else if (globalZoomArea?.x1?.length && globalZoomArea?.x2?.length) {
+                  let { x1 } = globalZoomArea;
+                  let x2 = e?.activeLabel || "";
+                  if (x1 > x2) {
+                    [x1, x2] = [x2, x1];
+                  }
+                  setGlobalZoomArea({ x1, x2 });
+                  setGlobalIsZoomed(true);
                 }
-                setGlobalZoomArea({ x1, x2 });
-                setGlobalIsZoomed(true);
+                setGlobalIsZooming(false);
               }
-              setGlobalIsZooming(false);
-            }
-          }}
-        >
-          <CartesianGrid verticalFill={["#545454", "#6C6C6C"]} fillOpacity={0.5} />
-          <XAxis
-            dataKey="formattedDate"
-            xAxisId={"x-axis"}
-            tickFormatter={prettyPrintChartAxisLabelDate}
-            scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
-            tick={{ fill: "white", style: { fontSize: "12px" } }}
-            tickLine={true}
-            type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
-            ticks={view === VIEWS.SOLAR_SITES ? ticks : undefined}
-            domain={view === VIEWS.SOLAR_SITES ? [ticks[0], ticks[ticks.length - 1]] : undefined}
-            interval={view === VIEWS.SOLAR_SITES ? undefined : 11}
-          />
-          <XAxis
-            className="select-none"
-            dataKey="formattedDate"
-            xAxisId={"x-axis-2"}
-            tickFormatter={prettyPrintChartAxisLabelDate}
-            scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
-            tick={{ fill: "white", style: { fontSize: "12px" } }}
-            tickLine={true}
-            type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
-            ticks={view === VIEWS.SOLAR_SITES ? ticks : undefined}
-            domain={view === VIEWS.SOLAR_SITES ? [ticks[0], ticks[ticks.length - 1]] : undefined}
-            interval={view === VIEWS.SOLAR_SITES ? undefined : 11}
-            orientation="top"
-            padding="no-gap"
-            hide={true}
-          />
-          <XAxis
-            dataKey="formattedDate"
-            xAxisId={"x-axis-3"}
-            tickFormatter={prettyPrintDayLabelWithDate}
-            scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
-            tick={{ fill: "white", style: { fontSize: "12px" } }}
-            tickLine={false}
-            type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
-            ticks={view === VIEWS.SOLAR_SITES ? timeTicks : undefined}
-            domain={
-              view === VIEWS.SOLAR_SITES
-                ? [timeTicks[0], timeTicks[timeTicks.length - 1]]
-                : undefined
-            }
-            interval={view === VIEWS.SOLAR_SITES ? undefined : 47}
-            orientation="bottom"
-            axisLine={false}
-            tickMargin={-12}
-            hide={false}
-          />
-
-          <YAxis
-            tickFormatter={
-              view === VIEWS.SOLAR_SITES ? undefined : (val, i) => prettyPrintYNumberWithCommas(val)
-            }
-            yAxisId={"y-axis"}
-            tick={{ fill: "white", style: { fontSize: "12px" } }}
-            tickLine={false}
-            domain={
-              globalIsZoomed && view !== VIEWS.SOLAR_SITES ? [0, Number(zoomYMax * 1.1)] : [0, yMax]
-            }
-            label={{
-              value: view === VIEWS.SOLAR_SITES ? "Generation (KW)" : "Generation (MW)",
-              angle: 270,
-              position: "outsideLeft",
-              fill: "white",
-              style: { fontSize: "12px" },
-              offset: 0,
-              dx: -26,
-              dy: 0
             }}
-          />
-
-          {deltaView && (
-            <>
-              <YAxis
-                tickFormatter={(val, i) => prettyPrintYNumberWithCommas(val, roundTickMax ? 0 : 2)}
-                tick={{
-                  fill: "white",
-                  style: { fontSize: "12px" },
-                  textAnchor: "end",
-                  dx: roundTickMax ? 36 : 24
-                }}
-                ticks={[deltaYMax, deltaYMax / 2, 0, -deltaYMax / 2, -deltaYMax]}
-                tickCount={5}
-                tickLine={false}
-                yAxisId={"delta"}
-                scale={"auto"}
-                orientation="right"
-                label={{
-                  value: `Delta (MW)`,
-                  angle: 90,
-                  position: "insideRight",
-                  fill: "white",
-                  style: { fontSize: "12px" },
-                  offset: 0,
-                  dx: roundTickMax ? 0 : -10,
-                  dy: 30
-                }}
-                domain={[-deltaYMax, deltaYMax]}
-              />
-              <ReferenceLine
+          >
+            <CartesianGrid verticalFill={["#545454", "#6C6C6C"]} fillOpacity={0.5} />
+            <XAxis
+              dataKey="formattedDate"
+              xAxisId={"x-axis"}
+              tickFormatter={prettyPrintChartAxisLabelDate}
+              scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
+              tick={{ fill: "white", style: { fontSize: "12px" } }}
+              tickLine={true}
+              type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
+              ticks={view === VIEWS.SOLAR_SITES ? ticks : undefined}
+              domain={view === VIEWS.SOLAR_SITES ? [ticks[0], ticks[ticks.length - 1]] : undefined}
+              interval={view === VIEWS.SOLAR_SITES ? undefined : 11}
+            />
+            <XAxis
+              className="select-none"
+              dataKey="formattedDate"
+              xAxisId={"x-axis-2"}
+              tickFormatter={prettyPrintChartAxisLabelDate}
+              scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
+              tick={{ fill: "white", style: { fontSize: "12px" } }}
+              tickLine={true}
+              type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
+              ticks={view === VIEWS.SOLAR_SITES ? ticks : undefined}
+              domain={view === VIEWS.SOLAR_SITES ? [ticks[0], ticks[ticks.length - 1]] : undefined}
+              interval={view === VIEWS.SOLAR_SITES ? undefined : 11}
+              orientation="top"
+              padding="no-gap"
+              hide={true}
+            />
+            <XAxis
+              dataKey="formattedDate"
+              xAxisId={"x-axis-3"}
+              tickFormatter={prettyPrintDayLabelWithDate}
+              scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
+              tick={{ fill: "white", style: { fontSize: "12px" } }}
+              tickLine={false}
+              type={view === VIEWS.SOLAR_SITES ? "number" : "category"}
+              ticks={view === VIEWS.SOLAR_SITES ? timeTicks : undefined}
+              domain={
+                view === VIEWS.SOLAR_SITES
+                  ? [timeTicks[0], timeTicks[timeTicks.length - 1]]
+                  : undefined
+              }
+              interval={view === VIEWS.SOLAR_SITES ? undefined : 47}
+              orientation="bottom"
+              axisLine={false}
+              tickMargin={-12}
+              hide={false}
+            />
+
+            <YAxis
+              tickFormatter={
+                view === VIEWS.SOLAR_SITES
+                  ? undefined
+                  : (val, i) => prettyPrintYNumberWithCommas(val)
+              }
+              yAxisId={"y-axis"}
+              tick={{ fill: "white", style: { fontSize: "12px" } }}
+              tickLine={false}
+              domain={
+                globalIsZoomed && view !== VIEWS.SOLAR_SITES
+                  ? [0, Number(zoomYMax * 1.1)]
+                  : [0, yMax]
+              }
+              label={{
+                value: view === VIEWS.SOLAR_SITES ? "Generation (KW)" : "Generation (MW)",
+                angle: 270,
+                position: "outsideLeft",
+                fill: "white",
+                style: { fontSize: "12px" },
+                offset: 0,
+                dx: -26,
+                dy: 0
+              }}
+            />
+
+            {deltaView && (
+              <>
+                <YAxis
+                  tickFormatter={(val, i) =>
+                    prettyPrintYNumberWithCommas(val, roundTickMax ? 0 : 2)
+                  }
+                  tick={<DeltaTick />}
+                  ticks={[deltaYMax, deltaYMax / 2, 0, -deltaYMax / 2, -deltaYMax]}
+                  tickCount={5}
+                  tickLine={false}
+                  yAxisId={"delta"}
+                  scale={"auto"}
+                  orientation="right"
+                  label={{
+                    value: `Delta (MW)`,
+                    angle: 90,
+                    position: "insideRight",
+                    fill: "white",
+                    style: { fontSize: "11px" },
+                    offset: 0,
+                    dx: deltaLabelOffset,
+                    dy: 29
+                  }}
+                  domain={[-deltaYMax, deltaYMax]}
+                  padding={{ top: 0, bottom: 0 }}
+                />
+                <ReferenceLine
+                  yAxisId={"delta"}
+                  xAxisId={"x-axis"}
+                  y={0}
+                  stroke="white"
+                  strokeWidth={0.1}
+                />
+              </>
+            )}
+
+            <ReferenceLine
+              x={view === VIEWS.SOLAR_SITES ? new Date(currentTime).getTime() : currentTime}
+              stroke="white"
+              strokeWidth={currentTime === timeOfInterest ? 2 : 1}
+              yAxisId={"y-axis"}
+              xAxisId={"x-axis"}
+              scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
+              strokeDasharray="3 3"
+              className={currentTime !== timeOfInterest ? "" : "hidden"}
+              label={
+                <CustomizedLabel
+                  className={`fill-amber-400 cursor-pointer text-sm`}
+                  value={"LIVE"}
+                  onClick={resetTime}
+                />
+              }
+            />
+
+            <ReferenceLine
+              x={
+                view === VIEWS.SOLAR_SITES
+                  ? new Date(localeTimeOfInterest).getTime()
+                  : timeOfInterest
+              }
+              stroke="white"
+              strokeWidth={2}
+              yAxisId={"y-axis"}
+              xAxisId={"x-axis"}
+              scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
+              label={
+                <CustomizedLabel
+                  className={`text-sm ${currentTime === timeOfInterest ? "fill-amber-400" : ""}`}
+                  value={prettyPrintChartAxisLabelDate(timeOfInterest)}
+                  solidLine={true}
+                ></CustomizedLabel>
+              }
+            />
+
+            {deltaView && (
+              <Bar
+                type="monotone"
+                dataKey="DELTA"
                 yAxisId={"delta"}
                 xAxisId={"x-axis"}
-                y={0}
-                stroke="white"
-                strokeWidth={0.1}
-              />
-            </>
-          )}
-
-          <ReferenceLine
-            x={view === VIEWS.SOLAR_SITES ? new Date(currentTime).getTime() : currentTime}
-            stroke="white"
-            strokeWidth={currentTime === timeOfInterest ? 2 : 1}
-            yAxisId={"y-axis"}
-            xAxisId={"x-axis"}
-            scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
-            strokeDasharray="3 3"
-            className={currentTime !== timeOfInterest ? "" : "hidden"}
-            label={
-              <CustomizedLabel
-                className={`fill-amber-400 cursor-pointer text-sm`}
-                value={"LIVE"}
-                onClick={resetTime}
+                // @ts-ignore
+                shape={<CustomBar />}
+                barSize={3}
               />
-            }
-          />
-
-          <ReferenceLine
-            x={
-              view === VIEWS.SOLAR_SITES ? new Date(localeTimeOfInterest).getTime() : timeOfInterest
-            }
-            stroke="white"
-            strokeWidth={2}
-            yAxisId={"y-axis"}
-            xAxisId={"x-axis"}
-            scale={view === VIEWS.SOLAR_SITES ? "time" : "auto"}
-            label={
-              <CustomizedLabel
-                className={`text-sm ${currentTime === timeOfInterest ? "fill-amber-400" : ""}`}
-                value={prettyPrintChartAxisLabelDate(timeOfInterest)}
-                solidLine={true}
-              ></CustomizedLabel>
-            }
-          />
-
-          {deltaView && (
-            <Bar
+            )}
+            {showNHourView && (
+              <>
+                <Line
+                  type="monotone"
+                  dataKey="N_HOUR_FORECAST"
+                  dot={false}
+                  yAxisId={"y-axis"}
+                  xAxisId={"x-axis"}
+                  strokeDasharray="5 5"
+                  strokeDashoffset={3}
+                  stroke={orange} // blue
+                  strokeWidth={largeScreenMode ? 4 : 2}
+                  hide={!visibleLines.includes("N_HOUR_FORECAST")}
+                  isAnimationActive={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="N_HOUR_PAST_FORECAST"
+                  dot={false}
+                  yAxisId={"y-axis"}
+                  xAxisId={"x-axis"}
+                  // strokeDasharray="10 10"
+                  stroke={orange} // blue
+                  strokeWidth={largeScreenMode ? 4 : 2}
+                  hide={!visibleLines.includes("N_HOUR_FORECAST")}
+                  isAnimationActive={false}
+                />
+              </>
+            )}
+
+            <Area
               type="monotone"
-              dataKey="DELTA"
-              yAxisId={"delta"}
+              dataKey="PROBABILISTIC_RANGE"
+              dot={false}
               xAxisId={"x-axis"}
-              // @ts-ignore
-              shape={<CustomBar />}
-              barSize={3}
+              yAxisId={"y-axis"}
+              stroke={yellow}
+              fill={yellow}
+              fillOpacity={0.4}
+              strokeWidth={0}
+              hide={!visibleLines.includes("FORECAST")}
+              isAnimationActive={false}
             />
-          )}
-          {show4hView && (
-            <>
-              <Line
-                type="monotone"
-                dataKey="4HR_FORECAST"
-                dot={false}
-                yAxisId={"y-axis"}
-                xAxisId={"x-axis"}
-                strokeDasharray="5 5"
-                strokeDashoffset={3}
-                stroke={orange} // blue
-                strokeWidth={largeScreenMode ? 4 : 2}
-                hide={!visibleLines.includes("4HR_FORECAST")}
-              />
-              <Line
-                type="monotone"
-                dataKey="4HR_PAST_FORECAST"
-                dot={false}
-                yAxisId={"y-axis"}
-                xAxisId={"x-axis"}
-                // strokeDasharray="10 10"
-                stroke={orange} // blue
-                strokeWidth={largeScreenMode ? 4 : 2}
-                hide={!visibleLines.includes("4HR_PAST_FORECAST")}
-              />
-            </>
-          )}
-
-          <Area
-            type="monotone"
-            dataKey="PROBABILISTIC_RANGE"
-            dot={false}
-            xAxisId={"x-axis"}
-            yAxisId={"y-axis"}
-            stroke={yellow}
-            fill={yellow}
-            fillOpacity={0.4}
-            strokeWidth={0}
-          />
-
-          <Line
-            type="monotone"
-            dataKey="GENERATION"
-            dot={false}
-            xAxisId={"x-axis"}
-            yAxisId={"y-axis"}
-            stroke="black"
-            strokeWidth={largeScreenMode ? 4 : 2}
-            strokeDasharray="5 5"
-            hide={!visibleLines.includes("GENERATION")}
-          />
-          <Line
-            type="monotone"
-            dataKey="GENERATION_UPDATED"
-            strokeWidth={largeScreenMode ? 4 : 2}
-            stroke="black"
-            xAxisId={"x-axis"}
-            yAxisId={"y-axis"}
-            dot={false}
-            hide={!visibleLines.includes("GENERATION_UPDATED")}
-          />
-          <Line
-            type="monotone"
-            dataKey="PAST_FORECAST"
-            dot={false}
-            connectNulls={true}
-            xAxisId={"x-axis"}
-            yAxisId={"y-axis"}
-            stroke={yellow} //yellow
-            fill="transparent"
-            fillOpacity={100}
-            strokeWidth={largeScreenMode ? 4 : 2}
-            hide={!visibleLines.includes("PAST_FORECAST")}
-          />
-          <Line
-            type="monotone"
-            dataKey="FORECAST"
-            dot={false}
-            xAxisId={"x-axis"}
-            yAxisId={"y-axis"}
-            strokeDasharray="5 5"
-            stroke={yellow} //yellow
-            fill="transparent"
-            fillOpacity={100}
-            strokeWidth={largeScreenMode ? 4 : 2}
-            hide={!visibleLines.includes("FORECAST")}
-          />
-          {zoomEnabled && globalIsZooming && (
-            <ReferenceArea
-              x1={globalZoomArea?.x1}
-              x2={globalZoomArea?.x2}
-              fill="#FFD053"
-              fillOpacity={0.3}
+
+            <Line
+              type="monotone"
+              dataKey="GENERATION"
+              dot={false}
               xAxisId={"x-axis"}
               yAxisId={"y-axis"}
+              stroke="black"
+              strokeWidth={largeScreenMode ? 4 : 2}
+              strokeDasharray="5 5"
+              hide={!visibleLines.includes("GENERATION")}
+              isAnimationActive={false}
             />
-          )}
-          <Tooltip
-            content={({ payload, label }) => {
-              const data = payload && payload[0]?.payload;
-              if (!data || (data["GENERATION"] === 0 && data["FORECAST"] === 0)) return <div></div>;
-
-              let formattedDate = data?.formattedDate + ":00+00:00";
-              if (view === VIEWS.SOLAR_SITES) {
-                const date = new Date(Number(data?.formattedDate));
-                formattedDate = dateToLondonDateTimeString(date);
-              }
+            <Line
+              type="monotone"
+              dataKey="GENERATION_UPDATED"
+              strokeWidth={largeScreenMode ? 4 : 2}
+              stroke="black"
+              xAxisId={"x-axis"}
+              yAxisId={"y-axis"}
+              dot={false}
+              hide={!visibleLines.includes("GENERATION_UPDATED")}
+              isAnimationActive={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="PAST_FORECAST"
+              dot={false}
+              connectNulls={true}
+              xAxisId={"x-axis"}
+              yAxisId={"y-axis"}
+              stroke={yellow} //yellow
+              fill="transparent"
+              fillOpacity={100}
+              strokeWidth={largeScreenMode ? 4 : 2}
+              hide={!visibleLines.includes("FORECAST")}
+              isAnimationActive={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="FORECAST"
+              dot={false}
+              xAxisId={"x-axis"}
+              yAxisId={"y-axis"}
+              strokeDasharray="5 5"
+              stroke={yellow} //yellow
+              fill="transparent"
+              fillOpacity={100}
+              strokeWidth={largeScreenMode ? 4 : 2}
+              hide={!visibleLines.includes("FORECAST")}
+              isAnimationActive={false}
+            />
+            {zoomEnabled && globalIsZooming && (
+              <ReferenceArea
+                x1={globalZoomArea?.x1}
+                x2={globalZoomArea?.x2}
+                fill="#FFD053"
+                fillOpacity={0.3}
+                xAxisId={"x-axis"}
+                yAxisId={"y-axis"}
+              />
+            )}
+            <Tooltip
+              content={({ payload, label }) => {
+                const data = payload && payload[0]?.payload;
+                if (!data || (data["GENERATION"] === 0 && data["FORECAST"] === 0))
+                  return <div></div>;
+
+                let formattedDate = data?.formattedDate + ":00+00:00";
+                if (view === VIEWS.SOLAR_SITES) {
+                  const date = new Date(Number(data?.formattedDate));
+                  formattedDate = dateToLondonDateTimeString(date);
+                }
 
-              return (
-                <div className="px-3 py-2 bg-mapbox-black bg-opacity-70 shadow">
-                  <ul className="">
-                    {Object.entries(toolTiplabels).map(([key, name]) => {
-                      const value = data[key];
-                      if (key === "DELTA" && !deltaView) return null;
-                      if (typeof value !== "number") return null;
-                      if (deltaView && key === "GENERATION" && data["GENERATION_UPDATED"] >= 0)
-                        return null;
-                      if (key.includes("4HR") && (!show4hView || !visibleLines.includes(key)))
-                        return null;
-                      if (key.includes("PROBABILISTIC") && Math.round(value * 100) < 0) return null;
-                      let textClass = "font-normal";
-                      if (["FORECAST", "PAST_FORECAST"].includes(key)) textClass = "font-semibold";
-                      if (["PROBABILISTIC_UPPER_BOUND", "PROBABILISTIC_LOWER_BOUND"].includes(key))
-                        textClass = "text-xs";
-                      const pvLiveTextClass =
-                        data["GENERATION_UPDATED"] >= 0 &&
-                        data["GENERATION"] >= 0 &&
-                        key === "GENERATION"
-                          ? "text-xs"
-                          : "";
-                      const sign = ["DELTA"].includes(key) ? (Number(value) > 0 ? "+" : "") : "";
-                      const color = ["DELTA"].includes(key)
-                        ? Number(value) > 0
-                          ? deltaPos
-                          : deltaNeg
-                        : toolTipColors[key];
-                      const computedValue =
-                        key === "DELTA" &&
-                        !show4hView &&
-                        `${data["formattedDate"]}:00.000Z` >= currentTime
-                          ? "-"
-                          : prettyPrintYNumberWithCommas(String(value), 1);
-
-                      return (
-                        <li className={`font-sans`} key={`item-${key}`} style={{ color }}>
-                          <div className={`flex justify-between ${textClass} ${pvLiveTextClass}`}>
-                            <div>{toolTiplabels[key]}: </div>
-                            <div className={`font-sans ml-7`}>
-                              {(show4hView || key !== "DELTA") && sign}
-                              {computedValue}{" "}
+                return (
+                  <div className="px-3 py-2 bg-mapbox-black bg-opacity-70 shadow">
+                    <ul className="">
+                      {Object.entries(toolTiplabels).map(([key, name]) => {
+                        const value = data[key];
+                        if (key === "DELTA" && !deltaView) return null;
+                        if (typeof value !== "number") return null;
+                        if (deltaView && key === "GENERATION" && data["GENERATION_UPDATED"] >= 0)
+                          return null;
+                        if (
+                          key.includes("N_HOUR") &&
+                          (!showNHourView || !visibleLines.some((key) => key.includes("N_HOUR")))
+                        )
+                          return null;
+                        if (key.includes("PROBABILISTIC") && Math.round(value * 100) < 0)
+                          return null;
+                        let textClass = "font-normal";
+                        if (["FORECAST", "PAST_FORECAST"].includes(key))
+                          textClass = "font-semibold";
+                        if (
+                          ["PROBABILISTIC_UPPER_BOUND", "PROBABILISTIC_LOWER_BOUND"].includes(key)
+                        )
+                          textClass = "text-xs";
+                        const pvLiveTextClass =
+                          data["GENERATION_UPDATED"] >= 0 &&
+                          data["GENERATION"] >= 0 &&
+                          key === "GENERATION"
+                            ? "text-xs"
+                            : "";
+                        const sign = ["DELTA"].includes(key) ? (Number(value) > 0 ? "+" : "") : "";
+                        const color = ["DELTA"].includes(key)
+                          ? Number(value) > 0
+                            ? deltaPos
+                            : deltaNeg
+                          : toolTipColors[key];
+                        const computedValue =
+                          key === "DELTA" &&
+                          !showNHourView &&
+                          `${data["formattedDate"]}:00.000Z` >= currentTime
+                            ? "-"
+                            : prettyPrintYNumberWithCommas(String(value), 1);
+                        let title = toolTiplabels[key];
+                        if (key.includes("N_HOUR")) {
+                          title = title.replace("N-hour", `${nHourForecast}-hour`);
+                        }
+
+                        return (
+                          <li className={`font-sans`} key={`item-${key}`} style={{ color }}>
+                            <div className={`flex justify-between ${textClass} ${pvLiveTextClass}`}>
+                              <div>{title}:</div>
+                              <div className={`font-sans ml-7`}>
+                                {(showNHourView || key !== "DELTA") && sign}
+                                {computedValue}{" "}
+                              </div>
                             </div>
-                          </div>
-                        </li>
-                      );
-                    })}
-                    <li className={`flex justify-between pt-4 text-sm text-white font-sans`}>
-                      <div className="pr-4">
-                        {formatISODateStringHumanNumbersOnly(formattedDate)}{" "}
-                      </div>
-                      <div>{view === VIEWS.SOLAR_SITES ? "KW" : "MW"}</div>
-                    </li>
-                  </ul>
-                </div>
-              );
-            }}
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+                          </li>
+                        );
+                      })}
+                      <li className={`flex justify-between pt-4 text-sm text-white font-sans`}>
+                        <div className="pr-4">
+                          {formatISODateStringHumanNumbersOnly(formattedDate)}{" "}
+                        </div>
+                        <div>{view === VIEWS.SOLAR_SITES ? "KW" : "MW"}</div>
+                      </li>
+                    </ul>
+                  </div>
+                );
+              }}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
     </div>
   );
 };
diff --git a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
index 1bd715c7..25f40f85 100644
--- a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
+++ b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
@@ -5,7 +5,6 @@ import useGlobalState from "../../helpers/globalState";
 import {
   convertISODateStringToLondonTime,
   formatISODateString,
-  getRounded4HoursAgoString,
   getRoundedTickBoundary
 } from "../../helpers/utils";
 import { useStopAndResetTime } from "../../hooks/use-and-update-selected-time";
@@ -25,34 +24,8 @@ import { ForecastHeadlineFigure } from "../forecast-header/ui";
 import { AggregatedDataTable } from "./solar-site-tables";
 import ForecastHeaderSite from "./forecast-header";
 import DataLoadingChartStatus from "../DataLoadingChartStatus";
-
-const LegendItem: FC<{
-  iconClasses: string;
-  label: string;
-  dashed?: boolean;
-  dataKey: string;
-}> = ({ iconClasses, label, dashed, dataKey }) => {
-  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
-  const isVisible = visibleLines.includes(dataKey);
-  const [show4hView] = useGlobalState("show4hView");
-
-  const toggleLineVisibility = () => {
-    if (isVisible) {
-      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
-    } else {
-      setVisibleLines([...visibleLines, dataKey]);
-    }
-  };
-
-  return (
-    <div className="flex items-center">
-      <LegendLineGraphIcon className={iconClasses} dashed={dashed} />
-      <button className="text-left pl-1 max-w-full w-44" onClick={toggleLineVisibility}>
-        <span className={`uppercase pl-1${isVisible ? " font-extrabold" : ""}`}>{label}</span>
-      </button>
-    </div>
-  );
-};
+import Link from "next/link";
+import LegendItem from "../LegendItem";
 
 const SolarSiteChart: FC<{
   combinedSitesData: CombinedSitesData;
@@ -60,7 +33,6 @@ const SolarSiteChart: FC<{
   date?: string;
   className?: string;
 }> = ({ combinedSitesData, aggregatedSitesData, className }) => {
-  const [show4hView] = useGlobalState("show4hView");
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
   const [clickedSiteGroupId, setClickedSiteGroupId] = useGlobalState("clickedSiteGroupId");
   const [visibleLines] = useGlobalState("visibleLines");
@@ -190,7 +162,7 @@ const SolarSiteChart: FC<{
         return gsp.name || "";
       case AGGREGATION_LEVELS.SITE:
         const site = filteredSites.find((s) => s.site_uuid === clickedGroupId);
-        return site?.client_site_id || "";
+        return site?.client_site_name || "";
     }
   };
 
@@ -209,172 +181,200 @@ const SolarSiteChart: FC<{
       </div>
     );
 
+  if (!combinedSitesData.allSitesData?.length) {
+    return (
+      <div className={`h-full flex ${className}`}>
+        <div className="flex-1 flex flex-col justify-center items-center p-32">
+          <div className={"flex-initial flex flex-col"}>
+            <h2 className="text-ocf-gray-300 text-4xl pb-6">Welcome to Site View.</h2>
+            <p className="text-ocf-gray-300 text-lg pb-3 font-semibold tracking-wide">
+              It looks like you don&apos;t currently have any sites.
+            </p>
+            {/* TODO: add func. to create sites from UI */}
+            {/*<p className="text-ocf-gray-300 text-base pb-6">*/}
+            {/*  To add a site, you can use the &quot;+&quot; button in the top left corner.*/}
+            {/*</p>*/}
+            <p className="text-ocf-gray-300 text-base pb-6">
+              To add a site, you can use our{" "}
+              <Link
+                className={"underline underline-offset-4 decoration-ocf-yellow"}
+                target={"_blank"}
+                href={"https://api.quartz.solar/docs"}
+              >
+                API
+              </Link>{" "}
+              or our{" "}
+              <Link
+                className={"underline underline-offset-4 decoration-ocf-yellow"}
+                target={"_blank"}
+                href={"https://api.quartz.solar/swagger"}
+              >
+                Swagger UI
+              </Link>
+              .
+            </p>
+            <blockquote className={"border-l-2 border-ocf-gray pl-3"}>
+              <p className="text-ocf-gray-300 text-base py-1">
+                If you think you should have sites here, have any questions or need some further
+                information, please get in touch at{" "}
+                <a
+                  className={"underline underline-offset-4 decoration-ocf-yellow"}
+                  href="mailto:quartz.support@openclimatefix.org"
+                >
+                  quartz.support@openclimatefix.org
+                </a>
+              </p>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   const setSelectedTime = (time: string) => {
     stopTime();
     setSelectedISOTime(time);
   };
-  const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = "flex flex-initial flex-col xl:flex-col justify-between";
   return (
-    <div className={`flex flex-col flex-1 mb-1 ${className || ""}`}>
-      <div className="flex-auto flex flex-col mb-2">
-        <div className="flex content-between bg-ocf-gray-800 h-auto">
-          <div className="flex-1 justify-start text-white lg:text-2xl md:text-lg text-base font-black m-auto mx-3 flex">
-            All Sites
-          </div>
-          <div className="flex justify-end flex-initial my-2 pr-6 pl-3">
-            <div className="">
-              <ForecastHeadlineFigure
-                tip={`PV Actual / OCF Forecast`}
-                time={allSitesChartDateTime}
-                color="ocf-yellow"
-                unit={"KW"}
-              >
-                <span className="text-black">{nationalPVActual?.toFixed(1)}</span>
-                <span className="text-ocf-gray-300 mx-1"> / </span>
-                {nationalPVExpected?.toFixed(1)}
-              </ForecastHeadlineFigure>
-            </div>
-            <div>
-              {/*<NextForecast*/}
-              {/*  pv={forecastNextPV}*/}
-              {/*  time={`${forecastNextTimeOnly}`}*/}
-              {/*  tip={`Next OCF Forecast`}*/}
-              {/*  color="ocf-yellow"*/}
-              {/*/>*/}
+    <div className={`flex flex-col flex-1 ${className || ""}`}>
+      <div className="flex-1 flex flex-col">
+        <div className="flex flex-col flex-1 relative">
+          <div className="flex content-between bg-ocf-gray-800 mb-4">
+            <div className="flex-1 justify-start text-white lg:text-2xl md:text-lg text-base font-black m-auto mx-3 flex">
+              All Sites
             </div>
-          </div>
-          <div className="inline-flex h-full"></div>
-          {/*<div className="inline-flex h-full">{children}</div>*/}
-        </div>
-        <div className="flex-1 relative h-60 mt-4 mb-3">
-          <DataLoadingChartStatus loadingState={sitesLoadingState} />
-          <RemixLine
-            resetTime={resetTime}
-            timeNow={formatISODateString(timeNow)}
-            timeOfInterest={selectedTime}
-            setTimeOfInterest={setSelectedTime}
-            data={chartData}
-            zoomEnabled={false}
-            yMax={yMax}
-            visibleLines={visibleLines}
-          />
-        </div>
-        {clickedSiteGroupId && aggregationLevel !== AGGREGATION_LEVELS.NATIONAL && (
-          <div className="flex-1 flex flex-col relative h-60 dash:h-auto">
-            <>
-              <ForecastHeaderSite
-                onClose={() => {
-                  setClickedSiteGroupId(undefined);
-                }}
-                title={
-                  getSiteName(selectedSiteData, aggregationLevel, clickedSiteGroupId) ||
-                  "No name found for selected group"
-                }
-              >
+            <div className="flex justify-end flex-initial my-2 pr-6 pl-3">
+              <div className="">
                 <ForecastHeadlineFigure
                   tip={`PV Actual / OCF Forecast`}
                   time={allSitesChartDateTime}
                   color="ocf-yellow"
                   unit={"KW"}
                 >
-                  <span className="text-black">
-                    {getTotalPvActualGenerationForGroup(
-                      selectedSiteData.map((site) => site.site_uuid),
-                      selectedTime
-                    ).toFixed(1) || "0"}
-                  </span>
+                  <span className="text-black">{nationalPVActual?.toFixed(1)}</span>
                   <span className="text-ocf-gray-300 mx-1"> / </span>
-                  {getTotalPvForecastGenerationForGroup(
+                  {nationalPVExpected?.toFixed(1)}
+                </ForecastHeadlineFigure>
+              </div>
+              <div>
+                {/*<NextForecast*/}
+                {/*  pv={forecastNextPV}*/}
+                {/*  time={`${forecastNextTimeOnly}`}*/}
+                {/*  tip={`Next OCF Forecast`}*/}
+                {/*  color="ocf-yellow"*/}
+                {/*/>*/}
+              </div>
+            </div>
+          </div>
+          <div className="flex-1 relative">
+            <DataLoadingChartStatus loadingState={sitesLoadingState} />
+            <RemixLine
+              resetTime={resetTime}
+              timeNow={formatISODateString(timeNow)}
+              timeOfInterest={selectedTime}
+              setTimeOfInterest={setSelectedTime}
+              data={chartData}
+              zoomEnabled={false}
+              yMax={yMax}
+              visibleLines={visibleLines}
+            />
+          </div>
+        </div>
+        {clickedSiteGroupId && aggregationLevel !== AGGREGATION_LEVELS.NATIONAL && (
+          <div className="flex-1 flex flex-col relative">
+            <ForecastHeaderSite
+              onClose={() => {
+                setClickedSiteGroupId(undefined);
+              }}
+              title={
+                getSiteName(selectedSiteData, aggregationLevel, clickedSiteGroupId) ||
+                "No name found for selected group"
+              }
+            >
+              <ForecastHeadlineFigure
+                tip={`PV Actual / OCF Forecast`}
+                time={allSitesChartDateTime}
+                color="ocf-yellow"
+                unit={"KW"}
+              >
+                <span className="text-black">
+                  {getTotalPvActualGenerationForGroup(
                     selectedSiteData.map((site) => site.site_uuid),
                     selectedTime
                   ).toFixed(1) || "0"}
-                </ForecastHeadlineFigure>
-              </ForecastHeaderSite>
-              <div className="h-60 mt-4 mb-2">
-                <RemixLine
-                  resetTime={resetTime}
-                  timeNow={formatISODateString(timeNow)}
-                  timeOfInterest={selectedTime}
-                  setTimeOfInterest={setSelectedTime}
-                  data={filteredChartData}
-                  yMax={getRoundedTickBoundary(Number(selectedSiteCapacity), yMax_levels)}
-                  visibleLines={visibleLines}
-                />
-              </div>
-            </>
+                </span>
+                <span className="text-ocf-gray-300 mx-1"> / </span>
+                {getTotalPvForecastGenerationForGroup(
+                  selectedSiteData.map((site) => site.site_uuid),
+                  selectedTime
+                ).toFixed(1) || "0"}
+              </ForecastHeadlineFigure>
+            </ForecastHeaderSite>
+            <div className="flex-1 mt-4">
+              <RemixLine
+                resetTime={resetTime}
+                timeNow={formatISODateString(timeNow)}
+                timeOfInterest={selectedTime}
+                setTimeOfInterest={setSelectedTime}
+                data={filteredChartData}
+                yMax={getRoundedTickBoundary(Number(selectedSiteCapacity), yMax_levels)}
+                visibleLines={visibleLines}
+              />
+            </div>
           </div>
         )}
-      </div>
 
-      <AggregatedDataTable
-        className={currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "" : "hidden"}
-        title={"National"}
-        tableData={Array.from(aggregatedSitesData.national.values())}
-      />
-      <AggregatedDataTable
-        className={currentAggregation(AGGREGATION_LEVELS.REGION) ? "" : "hidden"}
-        title={"Region"}
-        tableData={Array.from(aggregatedSitesData.regions.values())}
-      />
-      <AggregatedDataTable
-        className={currentAggregation(AGGREGATION_LEVELS.GSP) ? "" : "hidden"}
-        title={"GSP"}
-        tableData={Array.from(aggregatedSitesData.gsps.values())}
-      />
-      <AggregatedDataTable
-        className={currentAggregation(AGGREGATION_LEVELS.SITE) ? "" : "hidden"}
-        title={"Sites"}
-        tableData={Array.from(aggregatedSitesData.sites.values())}
-      />
-
-      <div className="flex flex-none justify-end align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 pt-3 mb-1 bg-mapbox-black-500 overflow-y-visible">
+        <div className="flex-1 flex flex-col">
+          <AggregatedDataTable
+            className={currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "" : "hidden"}
+            title={"National"}
+            tableData={Array.from(aggregatedSitesData.national.values())}
+          />
+          <AggregatedDataTable
+            className={currentAggregation(AGGREGATION_LEVELS.REGION) ? "" : "hidden"}
+            title={"Region"}
+            tableData={Array.from(aggregatedSitesData.regions.values())}
+          />
+          <AggregatedDataTable
+            className={currentAggregation(AGGREGATION_LEVELS.GSP) ? "" : "hidden"}
+            title={"GSP"}
+            tableData={Array.from(aggregatedSitesData.gsps.values())}
+          />
+          <AggregatedDataTable
+            className={currentAggregation(AGGREGATION_LEVELS.SITE) ? "" : "hidden"}
+            title={"Sites"}
+            tableData={Array.from(aggregatedSitesData.sites.values())}
+          />
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
         <div
-          className={`flex flex-1 justify-around max-w-2xl flex-row pb-3 overflow-x-auto ${
-            show4hView ? " pl-32" : ""
-          }`}
+          className={`flex flex-col lg:flex-row flex-initial gap-x-6 justify-around max-w-2xl overflow-x-auto`}
         >
-          <div className={legendItemContainerClasses}>
-            <LegendItem
-              iconClasses={"text-ocf-black"}
-              label={"PV Actual"}
-              dataKey={`GENERATION_UPDATED`}
-            />
-          </div>
-          <div className={legendItemContainerClasses}>
-            <LegendItem
-              iconClasses={"text-ocf-yellow"}
-              dashed
-              label={"OCF Forecast"}
-              dataKey={`FORECAST`}
-            />
-          </div>
-          <div className={legendItemContainerClasses}>
-            <LegendItem
-              iconClasses={"text-ocf-yellow"}
-              label={"OCF Final Forecast"}
-              dataKey={`PAST_FORECAST`}
-            />
-          </div>
+          <LegendItem
+            iconClasses={"text-ocf-black"}
+            label={"PV Actual"}
+            dataKey={`GENERATION_UPDATED`}
+          />
+          <LegendItem
+            iconClasses={"text-ocf-yellow"}
+            dashStyle={"both"}
+            label={"OCF Forecast"}
+            dataKey={`FORECAST`}
+          />
         </div>
-        {/* {show4hView && (
-            <div className={legendItemContainerClasses}>
-              <LegendItem
-                iconClasses={"text-ocf-orange"}
-                dashed
-                label={`OCF ${fourHoursAgo} Forecast`}
-                dataKey={`4HR_FORECAST`}
-              />
-              <LegendItem
-                iconClasses={"text-ocf-orange"}
-                label={"OCF 4hr Forecast"}
-                dataKey={`4HR_PAST_FORECAST`}
-              />
-            </div>
-          )} */}
 
-        <div className="flex-initial flex items-center pb-6 pl-6">
-          <Tooltip tip={<ChartInfo />} position="top" className={"text-right"} fullWidth>
+        <div className="flex-initial flex self-center items-start">
+          <Tooltip
+            tip={
+              <div className="w-64 rounded-md">
+                <ChartInfo />
+              </div>
+            }
+            position="top"
+            className={"text-right"}
+            fullWidth
+          >
             <InfoIcon />
           </Tooltip>
         </div>
diff --git a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx
index 63da9699..728cf77a 100644
--- a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx
+++ b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx
@@ -81,7 +81,7 @@ const TableData: React.FC<TableDataProps> = ({ rows }) => {
 
   return (
     <>
-      <div className="flex-1 h-72 overflow-y-scroll">
+      <div className="flex-1 overflow-y-scroll">
         {rows?.sort(sortFn).map((site) => {
           const mostAccurateGeneration = site.actualPV || site.expectedPV;
           return (
diff --git a/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx b/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
index 7ab829c1..94b1c615 100644
--- a/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
+++ b/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
@@ -13,8 +13,8 @@ const getForecastChartData = (
 ) => {
   if (!fr) return {};
 
-  const futureKey = forecast_horizon === 240 ? "4HR_FORECAST" : "FORECAST";
-  const pastKey = forecast_horizon === 240 ? "4HR_PAST_FORECAST" : "PAST_FORECAST";
+  const futureKey = forecast_horizon === 240 ? "N_HOUR_FORECAST" : "FORECAST";
+  const pastKey = forecast_horizon === 240 ? "N_HOUR_PAST_FORECAST" : "PAST_FORECAST";
   const generation =
     fr.expected_generation_kw > 20 ? fr.expected_generation_kw / 7000 : fr.expected_generation_kw;
 
@@ -38,8 +38,8 @@ const getForecastChartData = (
 //     } else if (datum.GENERATION !== undefined) {
 //       return Number(datum.GENERATION) - Number(datum.PAST_FORECAST);
 //     }
-//   } else if (datum.FORECAST !== undefined && datum["4HR_FORECAST"] !== undefined) {
-//     return Number(datum.FORECAST) - Number(datum["4HR_FORECAST"]);
+//   } else if (datum.FORECAST !== undefined && datum["N_HOUR_FORECAST"] !== undefined) {
+//     return Number(datum.FORECAST) - Number(datum["N_HOUR_FORECAST"]);
 //   }
 //   return 0;
 // };
diff --git a/apps/nowcasting-app/components/charts/use-format-chart-data.tsx b/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
index 00726ae4..a6e15340 100644
--- a/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
+++ b/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { get30MinNow } from "../helpers/globalState";
+import { get30MinNow, useGlobalState } from "../helpers/globalState";
 import { ForecastData, PvRealData } from "../types";
 import { formatISODateString, getDeltaBucket } from "../helpers/utils";
 import { ChartData } from "./remix-line";
@@ -16,8 +16,8 @@ const getForecastChartData = (
 ) => {
   if (!fr) return {};
 
-  const futureKey = forecast_horizon === 240 ? "4HR_FORECAST" : "FORECAST";
-  const pastKey = forecast_horizon === 240 ? "4HR_PAST_FORECAST" : "PAST_FORECAST";
+  const futureKey = forecast_horizon ? "N_HOUR_FORECAST" : "FORECAST";
+  const pastKey = forecast_horizon ? "N_HOUR_PAST_FORECAST" : "PAST_FORECAST";
 
   if (new Date(fr.targetTime).getTime() > new Date(timeNow + ":00.000Z").getTime())
     return {
@@ -39,8 +39,8 @@ const getDelta: (datum: ChartData) => number = (datum) => {
     } else if (datum.GENERATION !== undefined) {
       return Number(datum.GENERATION) - Number(datum.PAST_FORECAST);
     }
-  } else if (datum.FORECAST !== undefined && datum["4HR_FORECAST"] !== undefined) {
-    return Number(datum.FORECAST) - Number(datum["4HR_FORECAST"]);
+  } else if (datum.FORECAST !== undefined && datum["N_HOUR_FORECAST"] !== undefined) {
+    return Number(datum.FORECAST) - Number(datum["N_HOUR_FORECAST"]);
   }
   return 0;
 };
@@ -62,6 +62,8 @@ const useFormatChartData = ({
   timeTrigger?: string;
   delta?: boolean;
 }) => {
+  const [nHourForecast] = useGlobalState("nHourForecast");
+
   const data = useMemo(() => {
     if (forecastData && pvRealDayAfterData && pvRealDayInData && timeTrigger) {
       const timeNow = formatISODateString(get30MinNow());
@@ -148,7 +150,7 @@ const useFormatChartData = ({
           addDataToMap(
             fc,
             (db) => db.targetTime,
-            (db) => getForecastChartData(timeNow, db, 240)
+            (db) => getForecastChartData(timeNow, db, nHourForecast * 60)
           )
         );
       }
@@ -166,7 +168,7 @@ const useFormatChartData = ({
     }
     return [];
     // timeTrigger is used to trigger chart calculation when time changes
-  }, [forecastData, fourHourData, pvRealDayInData, pvRealDayAfterData, timeTrigger]);
+  }, [forecastData, fourHourData, pvRealDayInData, pvRealDayAfterData, timeTrigger, nHourForecast]);
   return data;
 };
 
diff --git a/apps/nowcasting-app/components/delta-forecast-label.tsx b/apps/nowcasting-app/components/delta-forecast-label.tsx
index e6b663b1..44995ee8 100644
--- a/apps/nowcasting-app/components/delta-forecast-label.tsx
+++ b/apps/nowcasting-app/components/delta-forecast-label.tsx
@@ -8,24 +8,28 @@ type DeltaForecastLabelProps = {
 const DeltaForecastLabel: React.FC<DeltaForecastLabelProps> = ({
   children,
   tip,
-  position = "left",
+  position = "middle",
   className
 }) => {
   const getPositionClass = (position: "left" | "right" | "middle") => {
     if (position === "left") return "-left-10";
     if (position === "right") return "-right-10";
-    if (position === "middle") return "";
+    if (position === "middle") return "left-[50%] transform -translate-x-1/2";
   };
   return (
     <div
-      className={`relative cursor-default flex flex-1 whitespace-nowrap group ${className || ""}`}
+      className={`relative cursor-default flex flex-initial whitespace-nowrap group ${
+        className || ""
+      }`}
     >
       {children}
-      <div className="absolute flex hidden mt-6 group-hover:flex flex-wrap">
+      <div
+        className={`absolute ${getPositionClass(
+          position
+        )} flex hidden pointer-events-none z-40 mt-3 group-hover:flex flex-wrap`}
+      >
         <span
-          className={`relative ${getPositionClass(
-            position
-          )} flex top-1 text-center mb-0 mt-2 z-10 text-xs px-1 py-1 leading-snug bg-ocf-gray-300 rounded-lg text-black`}
+          className={`relative flex top-1 text-center mb-0 mt-2 z-10 text-xs px-1 py-1 leading-snug rounded-lg text-white bg-ocf-black`}
         >
           {tip}
         </span>
diff --git a/apps/nowcasting-app/components/helpers/data.ts b/apps/nowcasting-app/components/helpers/data.ts
index c8c50367..627bfd2e 100644
--- a/apps/nowcasting-app/components/helpers/data.ts
+++ b/apps/nowcasting-app/components/helpers/data.ts
@@ -45,16 +45,30 @@ export const generateGeoJsonForecastData: (
       );
       let selectedFC;
       let selectedFCValue;
+      let selectedActualValueMW: number | undefined;
+      const gspRealData =
+        combinedData?.allGspRealData as components["schemas"]["GSPYieldGroupByDatetime"][];
       if (gspForecastsDataByTimestamp && targetTime) {
         selectedFC = gspForecastsDataByTimestamp.find(
           (fc) => fc.datetimeUtc.slice(0, 16) === formatISODateString(targetTime)
         );
         if (selectedFC) selectedFCValue = selectedFC.forecastValues[index + 1];
+        selectedActualValueMW =
+          Number(
+            gspRealData?.find(
+              (realData) => realData.datetimeUtc.slice(0, 16) === formatISODateString(targetTime)
+            )?.generationKwByGspId?.[String(index + 1)]
+          ) / 1000;
       } else if (gspForecastsDataByTimestamp) {
         let latestTimestamp = get30MinNow();
         selectedFCValue = gspForecastsDataByTimestamp.find(
           (fc) => fc.datetimeUtc.slice(0, 16) === latestTimestamp
         )?.forecastValues[index];
+        selectedActualValueMW =
+          Number(
+            gspRealData?.find((realData) => realData.datetimeUtc.slice(0, 16) === latestTimestamp)
+              ?.generationKwByGspId?.[String(index + 1)]
+          ) / 1000;
       }
 
       const updatedFeatureObj: MapFeatureObject = {
@@ -62,13 +76,26 @@ export const generateGeoJsonForecastData: (
         properties: {
           ...featureObj.properties,
           [SelectedData.expectedPowerGenerationMegawatts]:
+            selectedFCValue && getRoundedPv(selectedFCValue, false),
+          [SelectedData.expectedPowerGenerationMegawattsRounded]:
             selectedFCValue && getRoundedPv(selectedFCValue),
           [SelectedData.expectedPowerGenerationNormalized]:
+            selectedFCValue &&
+            getOpacityValueFromPVNormalized(
+              (selectedFCValue || 0) / (gspSystemInfo?.installedCapacityMw || 1) || 0,
+              false
+            ),
+          [SelectedData.expectedPowerGenerationNormalizedRounded]:
             selectedFCValue &&
             getOpacityValueFromPVNormalized(
               (selectedFCValue || 0) / (gspSystemInfo?.installedCapacityMw || 1) || 0
             ),
-          [SelectedData.installedCapacityMw]: getRoundedPv(gspSystemInfo?.installedCapacityMw || 0),
+          [SelectedData.actualPowerGenerationMegawatts]:
+            selectedActualValueMW && getRoundedPv(Number(selectedActualValueMW), false),
+          [SelectedData.installedCapacityMw]: getRoundedPv(
+            gspSystemInfo?.installedCapacityMw || 0,
+            false
+          ),
           gspDisplayName: gspSystemInfo?.regionName || ""
         }
       };
@@ -77,8 +104,11 @@ export const generateGeoJsonForecastData: (
         updatedFeatureObj.properties = {
           ...updatedFeatureObj.properties,
           [SelectedData.expectedPowerGenerationMegawatts]: currentGspDelta?.delta || 0,
+          [SelectedData.expectedPowerGenerationMegawattsRounded]: currentGspDelta?.delta || 0,
           [SelectedData.expectedPowerGenerationNormalized]:
             Number(currentGspDelta?.deltaNormalized) || 0,
+          [SelectedData.expectedPowerGenerationNormalizedRounded]:
+            Number(currentGspDelta?.deltaNormalized) || 0,
           [SelectedData.delta]: currentGspDelta?.delta || 0,
           deltaBucket: currentGspDelta?.deltaBucket || 0
         };
diff --git a/apps/nowcasting-app/components/helpers/globalState.tsx b/apps/nowcasting-app/components/helpers/globalState.tsx
index 3dfbb686..4fee3e81 100644
--- a/apps/nowcasting-app/components/helpers/globalState.tsx
+++ b/apps/nowcasting-app/components/helpers/globalState.tsx
@@ -1,7 +1,7 @@
 import { createGlobalState } from "react-hooks-global-state";
 import { getDeltaBucketKeys, AGGREGATION_LEVELS, VIEWS, SORT_BY } from "../../constant";
 import mapboxgl from "mapbox-gl";
-import { enable4hView } from "./utils";
+import { enableNHourView } from "./utils";
 import {
   getArraySettingFromCookieStorage,
   getBooleanSettingFromLocalStorage,
@@ -22,6 +22,20 @@ export function get30MinNow(offsetMinutes = 0) {
   date = getNext30MinSlot(date);
   return date.toISOString();
 }
+export function get30MinSlot(isoTime: Date) {
+  if (isoTime.getMinutes() === 30) {
+    return isoTime;
+  } else if (isoTime.getMinutes() === 0) {
+    return isoTime;
+  } else if (isoTime.getMinutes() < 30) {
+    isoTime.setHours(isoTime.getHours());
+    isoTime.setMinutes(30, 0, 0); // Resets also seconds and milliseconds
+  } else {
+    isoTime.setHours(isoTime.getHours() + 1);
+    isoTime.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
+  }
+  return isoTime;
+}
 export function getNext30MinSlot(isoTime: Date) {
   if (isoTime.getMinutes() === 30) {
     isoTime.setHours(isoTime.getHours() + 1);
@@ -52,7 +66,7 @@ export type GlobalStateType = {
   lat: number;
   zoom: number;
   showSiteCount?: boolean;
-  show4hView?: boolean;
+  showNHourView?: boolean;
   dashboardMode: boolean;
   sortBy: SORT_BY;
   autoZoom: boolean;
@@ -61,6 +75,7 @@ export type GlobalStateType = {
   globalZoomArea: { x1: string; x2: string };
   loadingState: LoadingState<NationalEndpointStates>;
   sitesLoadingState: LoadingState<SitesEndpointStates>;
+  nHourForecast: number;
 };
 
 export const { useGlobalState, getGlobalState, setGlobalState } =
@@ -76,7 +91,7 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
       "GENERATION",
       "GENERATION_UPDATED",
       "FORECAST",
-      "PAST_FORECAST"
+      "N_HOUR_FORECAST"
     ],
     selectedBuckets: getDeltaBucketKeys().filter((key) => key !== "ZERO"),
     maps: [],
@@ -90,7 +105,9 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
     showSiteCount: undefined,
     aggregationLevel: AGGREGATION_LEVELS.REGION,
     sortBy: SORT_BY.CAPACITY,
-    show4hView: enable4hView && getBooleanSettingFromLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW),
+    showNHourView:
+      (enableNHourView && getBooleanSettingFromLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW)) ||
+      true,
     dashboardMode: getBooleanSettingFromLocalStorage(CookieStorageKeys.DASHBOARD_MODE),
     loadingState: {
       initialLoadComplete: false,
@@ -101,7 +118,8 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
       initialLoadComplete: false,
       showMessage: false,
       message: "Loading data"
-    }
+    },
+    nHourForecast: 4
   });
 
 export default useGlobalState;
diff --git a/apps/nowcasting-app/components/helpers/mapUtils.ts b/apps/nowcasting-app/components/helpers/mapUtils.ts
index 539b00fc..3f9b3a95 100644
--- a/apps/nowcasting-app/components/helpers/mapUtils.ts
+++ b/apps/nowcasting-app/components/helpers/mapUtils.ts
@@ -1,9 +1,11 @@
 import mapboxgl from "mapbox-gl";
+import { ActiveUnit } from "../map/types";
 
 export const safelyUpdateMapData = (
   map: mapboxgl.Map,
   updateMapData: (map: mapboxgl.Map) => void
 ) => {
+  const mapTitle = map.getContainer().dataset.title;
   if (
     typeof map !== "object" ||
     typeof map.getSource !== "function" ||
@@ -11,37 +13,42 @@ export const safelyUpdateMapData = (
     map._removed ||
     !map.isStyleLoaded()
   ) {
-    if (!map.isStyleLoaded()) {
-      console.warn("📍map style not loaded yet, skipping update");
-      // -- Check if we've already set a timeout for this map and therefore a check is already pending
-      const existingTimeout = localStorage.getItem(
-        `MapTimeoutId-${map.getContainer().dataset.title}`
-      );
-      // -- If we have, skip the update and return
-      if (existingTimeout) {
-        console.debug("existing timeout running, skipping");
-        return;
-      }
-      // -- Set a new timeout to check whether the map is ready and update the data
-      console.debug(`setting new map timeout for ${map.getContainer().dataset.title}`);
-      const newTimeout = setTimeout(() => {
-        safelyUpdateMapData(map, updateMapData);
-        // console.log(`clearing new map timeout for ${map.getContainer().dataset.title}`);
-        localStorage.removeItem(`MapTimeoutId-${map.getContainer().dataset.title}`);
-      }, 500);
-      // -- Save the timeout id to local storage
-      console.debug(
-        `saving new map timeout id for ${map.getContainer().dataset.title}`,
-        newTimeout
-      );
-      localStorage.setItem(
-        `MapTimeoutId-${map.getContainer().dataset.title}`,
-        newTimeout.toString()
-      );
+    console.warn(`📍${mapTitle} map & style not loaded yet, skipping update`);
+    // -- Check if we've already set a timeout for this map and therefore a check is already pending
+    const existingTimeout = sessionStorage.getItem(`MapTimeoutId-${mapTitle}`);
+    // -- If we have, skip the update and return
+    if (existingTimeout) {
+      console.debug(`existing timeout running for ${mapTitle}, skipping`);
+      return;
     }
-    return;
+    // -- Set a new timeout to check whether the map is ready and update the data
+    console.debug(`setting new map timeout for ${mapTitle}`);
+    const newTimeout = setTimeout(() => {
+      // console.log(`clearing new map timeout for ${map.getContainer().dataset.title}`);
+      sessionStorage.removeItem(`MapTimeoutId-${mapTitle}`);
+      console.log(`Timer finished, MapTimeoutId-${mapTitle} rerunning...`);
+      safelyUpdateMapData(map, updateMapData);
+    }, 500);
+    // -- Save the timeout id to local storage
+    console.debug(`saving new map timeout id for ${mapTitle}`, newTimeout);
+    sessionStorage.setItem(`MapTimeoutId-${mapTitle}`, newTimeout.toString());
   } else {
-    console.debug("🎉 map is ready, updating data");
+    console.debug(`🎉 ${mapTitle} map is ready, updating data`);
     updateMapData(map);
   }
 };
+
+export const setActiveUnitOnMap = (mapContainer: HTMLDivElement | null, unit: ActiveUnit) => {
+  if (!mapContainer) {
+    console.warn("Map container not found, skipping unit update");
+    return;
+  }
+  if (!Object.values(ActiveUnit).includes(unit)) {
+    console.warn(`Invalid unit: ${unit}, skipping unit update`);
+    return;
+  }
+  mapContainer.dataset.unit = unit;
+};
+
+export const getActiveUnitFromMap = (map: mapboxgl.Map) =>
+  (map.getContainer().dataset.unit as ActiveUnit) || "MW";
diff --git a/apps/nowcasting-app/components/helpers/utils.ts b/apps/nowcasting-app/components/helpers/utils.ts
index 8c3e100a..7954456b 100644
--- a/apps/nowcasting-app/components/helpers/utils.ts
+++ b/apps/nowcasting-app/components/helpers/utils.ts
@@ -24,7 +24,7 @@ import { PathsWithMethod } from "openapi-typescript-helpers";
 
 export const isProduction = process.env.NEXT_PUBLIC_IS_PRODUCTION === "true";
 
-export const enable4hView = process.env.NEXT_PUBLIC_4H_VIEW === "true";
+export const enableNHourView = process.env.NEXT_PUBLIC_4H_VIEW === "true";
 
 export const allForecastsAccessor = (d: any) => d.forecastValues;
 const forecastAccessor0 = (d: any) => d.forecastValues[0].expectedPowerGenerationMegawatts;
@@ -51,7 +51,9 @@ export const getLoadingState = (
   combinedErrors: CombinedErrors,
   combinedData: CombinedData
 ): LoadingState<NationalEndpointStates> => {
-  let initialLoadComplete = Object.values(combinedLoading).every((loading) => !loading);
+  let initialLoadComplete = Object.entries(combinedLoading).every(
+    ([key, loading]) => key === "nationalNHourLoading" || !loading
+  );
   let showMessage = !initialLoadComplete;
   let message = "Loading initial data";
   if (initialLoadComplete) {
@@ -71,10 +73,10 @@ export const getLoadingState = (
         : `Loading latest ${NationalEndpointLabel.pvRealDayAfter}`;
       showMessage = true;
     }
-    if (combinedValidating.national4HourValidating) {
+    if (combinedValidating.nationalNHourValidating) {
       message = showMessage
         ? "Loading latest data"
-        : `Loading latest ${NationalEndpointLabel.national4Hour}`;
+        : `Loading latest ${NationalEndpointLabel.nationalNHour}`;
       showMessage = true;
     }
     if (combinedValidating.allGspForecastValidating) {
@@ -110,11 +112,11 @@ export const getLoadingState = (
       error: combinedErrors.pvRealDayAfterError,
       hasData: !!combinedData.pvRealDayAfterData
     },
-    national4Hour: {
-      loading: combinedLoading.national4HourLoading,
-      validating: combinedValidating.national4HourValidating,
-      error: combinedErrors.national4HourError,
-      hasData: !!combinedData.national4HourData
+    nationalNHour: {
+      loading: combinedLoading.nationalNHourLoading,
+      validating: combinedValidating.nationalNHourValidating,
+      error: combinedErrors.nationalNHourError,
+      hasData: !!combinedData.nationalNHourData
     },
     allGspForecast: {
       loading: combinedLoading.allGspForecastLoading,
@@ -350,6 +352,17 @@ export const getRoundedPv = (pv: number, round: boolean = true) => {
   // round To: 0, 100, 200, 300, 400, 500
   return Math.round(pv / 100) * 100;
 };
+
+export const getRoundedPvPercent = (per: number, round: boolean = true) => {
+  if (!round) return per;
+  // round to : 0, 0.2, 0.4, 0.6 0.8, 1
+  let rounded = Math.round(per * 10);
+  if (rounded % 2) {
+    if (per * 10 > rounded) return (rounded + 1) / 10;
+    else return (rounded - 1) / 10;
+  } else return rounded / 10;
+};
+
 export const getOpacityValueFromPVNormalized = (val: number, round: boolean = true) => {
   if (!round) return val;
   // This function is to rounds the value down and then select the correct opacity
diff --git a/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.test.tsx b/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.test.tsx
new file mode 100644
index 00000000..de15fc5f
--- /dev/null
+++ b/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.test.tsx
@@ -0,0 +1,10 @@
+import { describe, expect, test } from "@jest/globals";
+import { formatDNORegionName } from "./useAggregateSitesDataForTimestamp";
+
+describe("check formatDNORegionName ", () => {
+  test("Check we are getting the correct respsonse", () => {
+    expect(formatDNORegionName("UKPN (East)")).toBe("East (UKPN)");
+    expect(formatDNORegionName("SSE")).toBe("SSE");
+    expect(formatDNORegionName("NPG (Northern Electric)")).toBe("Northern Electric (NPG)");
+  });
+});
diff --git a/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.tsx b/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.tsx
index 08beacf2..c719e484 100644
--- a/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.tsx
+++ b/apps/nowcasting-app/components/hooks/useAggregateSitesDataForTimestamp.tsx
@@ -42,6 +42,27 @@ const getPvActualGenerationForSite = (
   );
 };
 
+export const formatDNORegionName = (regionName: string) => {
+  /* The long name is like this "UKPN (East)" or just "SSE".
+  We want to change this to "East (UKPN)" or just "SSE" */
+
+  // if regionName is empty then return now
+  if (!regionName) return regionName;
+
+  // remove last ')'
+  const regionNameParts = regionName.replace(")", "");
+
+  // split by first ' ('
+  const regionAbbAndName = regionNameParts.split(" (");
+
+  if (regionAbbAndName.length > 1) {
+    // join names back together
+    regionName = `${regionAbbAndName[1]} (${regionAbbAndName[0]})`;
+  }
+
+  return regionName;
+};
+
 export const useAggregateSitesDataForTimestamp = (
   combinedSitesData: CombinedSitesData,
   selectedISOTime: string
@@ -108,9 +129,12 @@ export const useAggregateSitesDataForTimestamp = (
         const regionLatLong = dnoLatLongMap.get(region.dno_id);
         const regionLat = regionLatLong?.lat || 0;
         const regionLong = regionLatLong?.long || 0;
+
+        const regionNameFormatted = formatDNORegionName(regionName);
+
         let updatedRegionData = sitesTableData.regions.get(regionId) || {
           id: regionId,
-          label: regionName,
+          label: regionNameFormatted,
           capacity: 0,
           actualPV: 0,
           expectedPV: 0,
diff --git a/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx b/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
index 4c04b912..0c2e2849 100644
--- a/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
+++ b/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
@@ -5,7 +5,7 @@ import {
   ForecastData,
   GspAllForecastData,
   GspEntities,
-  National4HourData,
+  NationalNHourData,
   PvRealData,
   SitesPvActual,
   SitesPvForecast,
@@ -24,7 +24,7 @@ const t2min = 1000 * 60 * 2;
 type APIResponseType =
   | ForecastData
   | PvRealData
-  | National4HourData
+  | NationalNHourData
   | GspAllForecastData
   | GspEntities
   | AllGspRealData
diff --git a/apps/nowcasting-app/components/icons/icons.tsx b/apps/nowcasting-app/components/icons/icons.tsx
index bcbe9af8..98f2bc7a 100644
--- a/apps/nowcasting-app/components/icons/icons.tsx
+++ b/apps/nowcasting-app/components/icons/icons.tsx
@@ -3,7 +3,7 @@ import logout from "../../pages/logout";
 
 type LegendLineGraphIconProps = {
   className?: string;
-  dashed?: boolean;
+  dashStyle?: "both" | "dashed" | "solid";
 };
 
 type IconProps = {
@@ -16,24 +16,38 @@ type InfoIconProps = {
 
 export const LegendLineGraphIcon: React.FC<LegendLineGraphIconProps> = ({
   className,
-  dashed = false
-}) => (
-  <svg
-    className={className}
-    width="24"
-    height="22"
-    viewBox="0 0 24 22"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3 19C7 19 12 16 12.5 11C13 6 17 3 21 3"
-      strokeWidth={2}
-      stroke="currentColor"
-      strokeDasharray={dashed ? "3 3" : "0"}
-    />
-  </svg>
-);
+  dashStyle = "solid"
+}) => {
+  let dash = "0";
+  switch (dashStyle) {
+    case "both":
+      dash = "8 4 3 4 3";
+      break;
+    case "dashed":
+      dash = "3 3";
+      break;
+    case "solid":
+      break;
+  }
+  return (
+    <svg
+      className={className}
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.5 15.5C5.8 15.5 10 13 10.4 9.1C10.8 5.1 14.2 2.5 17.5 2.5"
+        strokeWidth={2}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeDasharray={dash}
+      />
+    </svg>
+  );
+};
 
 export const CloseButtonIcon: React.FC<IconProps> = ({ className }) => (
   <svg
diff --git a/apps/nowcasting-app/components/layout/header/index.tsx b/apps/nowcasting-app/components/layout/header/index.tsx
index 7be2d812..1c66cc02 100644
--- a/apps/nowcasting-app/components/layout/header/index.tsx
+++ b/apps/nowcasting-app/components/layout/header/index.tsx
@@ -3,7 +3,7 @@ import ProfileDropDown from "./profile-dropdown";
 import { OCFlogo } from "../../icons/logo";
 import Link from "next/link";
 import { Menu } from "@headlessui/react";
-import { VIEWS } from "../../../constant";
+import { getViewTitle, VIEWS } from "../../../constant";
 import { Dispatch, SetStateAction } from "react";
 import { ExternalLinkIcon } from "../../icons/icons";
 import useGlobalState from "../../helpers/globalState";
@@ -29,7 +29,7 @@ const HeaderLink: React.FC<HeaderLinkProps> = ({
   const computedClasses = classNames(
     className || "",
     disabled ? "text-gray-500 cursor-not-allowed" : "cursor-pointer hover:text-ocf-yellow-400",
-    "flex px-4 py-2 font-semibold text-sm"
+    "flex px-1 sm:px-4 py-2 font-semibold text-xs sm:text-sm"
   );
 
   // Denotes external link for styling
@@ -80,7 +80,7 @@ type HeaderProps = { view: VIEWS; setView: Dispatch<SetStateAction<VIEWS>> };
 
 const Header: React.FC<HeaderProps> = ({ view, setView }) => {
   return (
-    <header className="h-16 text-white text-right px-4 bg-black flex absolute top-0 w-full p-1 text-sm items-center z-30">
+    <header className="h-16 text-white text-right sm:px-4 bg-black flex absolute top-0 w-full overflow-y-visible p-1 text-sm items-center z-30">
       <div className="flex-grow-0 -mt-0.5 flex-shrink-0">
         <a
           className="flex h-8 self-center w-auto"
@@ -109,21 +109,21 @@ const Header: React.FC<HeaderProps> = ({ view, setView }) => {
           <OCFlogo />
         </div>
       </div>
-      <div className="grow text-center inline-flex px-8 gap-5 items-center">
+      <div className="grow text-center inline-flex px-2 sm:px-8 gap-2 sm:gap-5 items-center">
         <Menu>
           <HeaderLink
             url="/"
             view={VIEWS.FORECAST}
             currentView={view}
             setViewFunc={setView}
-            text="PV Forecast"
+            text={getViewTitle(VIEWS.FORECAST)}
           />
           <HeaderLink
             url="/"
             view={VIEWS.SOLAR_SITES}
             currentView={view}
             setViewFunc={setView}
-            text="Solar Sites"
+            text={getViewTitle(VIEWS.SOLAR_SITES)}
             disabled={isProduction}
           />
           <HeaderLink
@@ -131,7 +131,7 @@ const Header: React.FC<HeaderProps> = ({ view, setView }) => {
             view={VIEWS.DELTA}
             currentView={view}
             setViewFunc={setView}
-            text="Delta"
+            text={getViewTitle(VIEWS.DELTA)}
           />
         </Menu>
       </div>
diff --git a/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx b/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
index e692049d..0a2c6847 100644
--- a/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
+++ b/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
@@ -15,7 +15,7 @@ interface IProfileDropDown {}
 
 const ProfileDropDown = ({}: IProfileDropDown) => {
   const { user } = useUser();
-  const [show4hView, setShow4hView] = useGlobalState("show4hView");
+  const [show4hView, setShow4hView] = useGlobalState("showNHourView");
   const [dashboardMode, setDashboardMode] = useGlobalState("dashboardMode");
   const toggleDashboardMode = () => {
     setDashboardMode(!dashboardMode);
@@ -60,11 +60,11 @@ const ProfileDropDown = ({}: IProfileDropDown) => {
                     </span>
                   )}
                   <button
-                    id={"UserMenu-4hViewBtn"}
+                    id={"UserMenu-NhViewBtn"}
                     onClick={toggle4hView}
                     className="ml-1 text-sm  font-medium text-ocf-black-600"
                   >
-                    {`4-hour forecast`}
+                    {`N-hour forecast`}
                   </button>
                 </div>
               )}
diff --git a/apps/nowcasting-app/components/layout/layout.tsx b/apps/nowcasting-app/components/layout/layout.tsx
index a9413fee..20ef5f3f 100644
--- a/apps/nowcasting-app/components/layout/layout.tsx
+++ b/apps/nowcasting-app/components/layout/layout.tsx
@@ -1,7 +1,8 @@
 import Head from "next/head";
-import { API_PREFIX } from "../../constant";
+import { API_PREFIX, getViewTitle } from "../../constant";
 import { useLoadDataFromApi } from "../hooks/useLoadDataFromApi";
 import { SolarStatus } from "../types";
+import useGlobalState from "../helpers/globalState";
 
 interface ILayout {
   children: React.ReactNode;
@@ -10,14 +11,17 @@ interface ILayout {
 
 const Layout = ({ children }: ILayout) => {
   const { data: solarStatus } = useLoadDataFromApi<SolarStatus>(`${API_PREFIX}/solar/GB/status`);
+  const [view] = useGlobalState("view");
+  const viewTitle = getViewTitle(view);
+  const pageTitle = view && viewTitle ? `Quartz Solar - ${viewTitle}` : "Quartz Solar";
 
   return (
     <>
       <Head>
-        <title>Solar PV Forecast</title>
+        <title>{pageTitle}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="absolute inset-0 flex flex-col h-screen">
+      <main className="flex flex-col h-screen">
         {!solarStatus || solarStatus?.status === "ok" ? null : (
           <div className="blue text-white text-m px-4 py-2" style={{ backgroundColor: "#48B0DF" }}>
             <p>{solarStatus?.message}</p>
diff --git a/apps/nowcasting-app/components/map/deltaMap.tsx b/apps/nowcasting-app/components/map/deltaMap.tsx
index c40cfd49..556fe3d3 100644
--- a/apps/nowcasting-app/components/map/deltaMap.tsx
+++ b/apps/nowcasting-app/components/map/deltaMap.tsx
@@ -17,7 +17,7 @@ import {
   ForecastValue,
   GspAllForecastData,
   GspDeltaValue,
-  National4HourData,
+  NationalNHourData,
   PvRealData
 } from "../types";
 import { theme } from "../../tailwind.config";
@@ -31,21 +31,6 @@ import dynamic from "next/dynamic";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
-const getRoundedPv = (pv: number, round: boolean = true) => {
-  if (!round) return Math.round(pv);
-  // round To: 0, 100, 200, 300, 400, 500
-  return Math.round(pv / 100) * 100;
-};
-const getRoundedPvPercent = (per: number, round: boolean = true) => {
-  if (!round) return per;
-  // round to : 0, 0.2, 0.4, 0.6 0.8, 1
-  let rounded = Math.round(per * 10);
-  if (rounded % 2) {
-    if (per * 10 > rounded) return (rounded + 1) / 10;
-    else return (rounded - 1) / 10;
-  } else return rounded / 10;
-};
-
 type DeltaMapProps = {
   className?: string;
   combinedData: CombinedData;
diff --git a/apps/nowcasting-app/components/map/loadingState.tsx b/apps/nowcasting-app/components/map/loadingState.tsx
index 76a52e14..74f48436 100644
--- a/apps/nowcasting-app/components/map/loadingState.tsx
+++ b/apps/nowcasting-app/components/map/loadingState.tsx
@@ -1,8 +1,9 @@
 const LoadStateMap = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative h-full">
-    <div className="absolute top-0 left-0 z-10 px-2 py-3 m-3 min-w-[20rem]">{children}</div>
-    <div className="map-overlay top"></div>
-  </div>
+  <>
+    <div className="absolute flex items-center justify-center bg-mapbox-black/50 inset-0 z-10 pointer-events-none">
+      {children}
+    </div>
+  </>
 );
 
 export default LoadStateMap;
diff --git a/apps/nowcasting-app/components/map/map.tsx b/apps/nowcasting-app/components/map/map.tsx
index 8f54273e..15ffaf8b 100644
--- a/apps/nowcasting-app/components/map/map.tsx
+++ b/apps/nowcasting-app/components/map/map.tsx
@@ -99,6 +99,7 @@ const Map: FC<IMap> = ({
     // TODO: unsure as to whether react cleans up/ends up with multiple maps when re-rendering
     // or whether removing will cause more issues elsewhere in the app.
     // Will just keep an eye on performance etc. for now.
+    //
     // return () => map.current?.remove();
   }, []);
 
diff --git a/apps/nowcasting-app/components/map/pvLatestMap.tsx b/apps/nowcasting-app/components/map/pvLatestMap.tsx
index 28e36131..f62962d4 100644
--- a/apps/nowcasting-app/components/map/pvLatestMap.tsx
+++ b/apps/nowcasting-app/components/map/pvLatestMap.tsx
@@ -1,22 +1,21 @@
-import { SWRResponse } from "swr";
-
-import React, { Dispatch, SetStateAction, useMemo } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import mapboxgl, { Expression } from "mapbox-gl";
 
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
 import { ActiveUnit, SelectedData } from "./types";
 import { MAX_POWER_GENERATED, VIEWS } from "../../constant";
-import gspShapeData from "../../data/gsp_regions_20220314.json";
 import useGlobalState from "../helpers/globalState";
-import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
-import { CombinedData, CombinedErrors, GspAllForecastData } from "../types";
+import { formatISODateStringHuman } from "../helpers/utils";
+import { CombinedData, CombinedErrors, CombinedLoading, CombinedValidating } from "../types";
 import { theme } from "../../tailwind.config";
 import ColorGuideBar from "./color-guide-bar";
-import { FeatureCollection } from "geojson";
-import { safelyUpdateMapData } from "../helpers/mapUtils";
+import { getActiveUnitFromMap, safelyUpdateMapData, setActiveUnitOnMap } from "../helpers/mapUtils";
 import { components } from "../../types/quartz-api";
 import { generateGeoJsonForecastData } from "../helpers/data";
 import dynamic from "next/dynamic";
+import throttle from "lodash/throttle";
+import Spinner from "../icons/spinner";
+
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 
 const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
@@ -24,6 +23,8 @@ const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr
 type PvLatestMapProps = {
   className?: string;
   combinedData: CombinedData;
+  combinedLoading: CombinedLoading;
+  combinedValidating: CombinedValidating;
   combinedErrors: CombinedErrors;
   activeUnit: ActiveUnit;
   setActiveUnit: Dispatch<SetStateAction<ActiveUnit>>;
@@ -32,24 +33,71 @@ type PvLatestMapProps = {
 const PvLatestMap: React.FC<PvLatestMapProps> = ({
   className,
   combinedData,
+  combinedLoading,
+  combinedValidating,
   combinedErrors,
   activeUnit,
   setActiveUnit
 }) => {
   const [selectedISOTime] = useGlobalState("selectedISOTime");
+  const [shouldUpdateMap, setShouldUpdateMap] = useState(false);
+  const [mapDataLoading, setMapDataLoading] = useState(true);
+
+  const getSelectedDataFromActiveUnit = (activeUnit: ActiveUnit) => {
+    switch (activeUnit) {
+      case ActiveUnit.MW:
+        return SelectedData.expectedPowerGenerationMegawattsRounded;
+      case ActiveUnit.percentage:
+        return SelectedData.expectedPowerGenerationNormalizedRounded;
+      case ActiveUnit.capacity:
+        return SelectedData.installedCapacityMw;
+    }
+  };
+  const [selectedDataName, setSelectedDataName] = useState(
+    getSelectedDataFromActiveUnit(activeUnit)
+  );
+
+  useEffect(() => {
+    setMapDataLoading(true);
+    setSelectedDataName(getSelectedDataFromActiveUnit(activeUnit));
+    // Add unit to map container so that it can be accessed by popup in the map event listeners
+    const map: HTMLDivElement | null = document.querySelector(`#Map-${VIEWS.FORECAST}`);
+    if (map) {
+      setActiveUnitOnMap(map, activeUnit);
+    }
+  }, [activeUnit]);
 
   const latestForecastValue = 0;
   const isNormalized = activeUnit === ActiveUnit.percentage;
-  let selectedDataName = SelectedData.expectedPowerGenerationMegawatts;
-  if (activeUnit === ActiveUnit.percentage)
-    selectedDataName = SelectedData.expectedPowerGenerationNormalized;
-  if (activeUnit === ActiveUnit.capacity) selectedDataName = SelectedData.installedCapacityMw;
 
   const forecastLoading = false;
   const initForecastData =
     combinedData?.allGspForecastData as components["schemas"]["OneDatetimeManyForecastValues"][];
   const forecastError = combinedErrors?.allGspForecastError;
 
+  // Show loading spinner when selectedISOTime changes
+  useEffect(() => {
+    if (!combinedData?.allGspForecastData) return;
+
+    setMapDataLoading(true);
+  }, [selectedISOTime]);
+
+  // Update map data when forecast data is loaded
+  useEffect(() => {
+    if (!combinedData?.allGspForecastData) return;
+
+    setShouldUpdateMap(true);
+  }, [combinedData, combinedLoading, combinedValidating, selectedISOTime]);
+
+  // Hide loading spinner if there is an error to prevent infinite loading
+  useEffect(() => {
+    if (combinedErrors.allGspForecastError) {
+      setMapDataLoading(false);
+    }
+  }, [combinedErrors.allGspForecastError]);
+
+  console.log("## shouldUpdateMap render", shouldUpdateMap);
+
   const getFillOpacity = (selectedData: string, isNormalized: boolean): Expression => [
     "interpolate",
     ["linear"],
@@ -64,22 +112,57 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
 
   const generatedGeoJsonForecastData = useMemo(() => {
     return generateGeoJsonForecastData(initForecastData, selectedISOTime, combinedData);
-  }, [initForecastData, selectedISOTime]);
+  }, [
+    combinedData.allGspForecastData,
+    combinedLoading.allGspForecastLoading,
+    combinedValidating.allGspForecastValidating,
+    selectedISOTime,
+    combinedData.allGspSystemData
+  ]);
+
+  // Create a popup, but don't add it to the map yet.
+  const popup = useMemo(() => {
+    return new mapboxgl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      anchor: "bottom-right",
+      maxWidth: "none"
+    });
+  }, []);
+
+  const nationalCapacityMW = useMemo(() => {
+    return (
+      (combinedData.allGspSystemData?.reduce(
+        (acc, gsp) => acc + (gsp.installedCapacityMw || 0),
+        0
+      ) || 0) / 1000
+    );
+  }, [combinedData.allGspSystemData]);
 
   const addOrUpdateMapData = (map: mapboxgl.Map) => {
+    const geoJsonHasData =
+      generatedGeoJsonForecastData.forecastGeoJson.features.length > 0 &&
+      typeof generatedGeoJsonForecastData.forecastGeoJson?.features?.[0]?.properties
+        ?.expectedPowerGenerationMegawatts === "number";
+    if (!geoJsonHasData) {
+      console.log("geoJsonForecastData empty, trying again...");
+      setShouldUpdateMap(true);
+      return;
+    }
+    setShouldUpdateMap(false);
+
     const source = map.getSource("latestPV") as unknown as mapboxgl.GeoJSONSource;
 
     if (!source) {
-      const { forecastGeoJson } = generateGeoJsonForecastData(
-        initForecastData,
-        selectedISOTime,
-        combinedData
-      );
+      const { forecastGeoJson } = generatedGeoJsonForecastData;
       map.addSource("latestPV", {
         type: "geojson",
         data: forecastGeoJson
       });
+    } else {
+      source.setData(generatedGeoJsonForecastData.forecastGeoJson);
     }
+    console.log("latestPV source set");
 
     const pvForecastLayer = map.getLayer("latestPV-forecast");
     if (!pvForecastLayer) {
@@ -93,16 +176,125 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
           "fill-opacity": getFillOpacity(selectedDataName, isNormalized)
         }
       });
+      console.log("pvForecastLayer added");
+
+      // Also add map event listeners but only the first time
+      const popupFunction = throttle(
+        (e) => {
+          // Change the cursor style as a UI indicator.
+          map.getCanvas().style.cursor = "pointer";
+          const currentActiveUnit = getActiveUnitFromMap(map);
+
+          const properties = e.features?.[0].properties;
+          if (!properties) return;
+          let actualValue = "";
+          let forecastValue = "";
+          let unit = "";
+          if (currentActiveUnit === ActiveUnit.MW) {
+            // Map in MW mode
+            actualValue = properties?.[SelectedData.actualPowerGenerationMegawatts]
+              ? properties?.[SelectedData.actualPowerGenerationMegawatts].toFixed(0)
+              : "-";
+            forecastValue =
+              properties?.[SelectedData.expectedPowerGenerationMegawatts]?.toFixed(0) || 0;
+            unit = "MW";
+          } else if (currentActiveUnit === ActiveUnit.percentage) {
+            // Map in % mode
+            actualValue = properties?.[SelectedData.actualPowerGenerationMegawatts]
+              ? (
+                  Number(
+                    properties?.[SelectedData.actualPowerGenerationMegawatts] /
+                      properties?.[SelectedData.installedCapacityMw] || 0
+                  ) * 100
+                ).toFixed(0)
+              : "-";
+            forecastValue =
+              (
+                Number(properties?.[SelectedData.expectedPowerGenerationNormalized] || 0) * 100
+              ).toFixed(0) || "-";
+            unit = "%";
+          } else if (currentActiveUnit === ActiveUnit.capacity) {
+            // Map in Capacity mode
+            actualValue =
+              (
+                Number(properties?.[SelectedData.installedCapacityMw] || 0) / nationalCapacityMW
+              ).toFixed(1) || "-";
+            forecastValue = "-";
+            unit = "MW";
+          }
+
+          let actualAndForecastSection = `<span class="text-2xs uppercase tracking-wide text-mapbox-black-300">Actual / Forecast</span>
+              <div>
+                <span class="">${actualValue}</span>  /  
+                <span class="text-ocf-yellow">${forecastValue}</span>  <span class="text-2xs text-mapbox-black-300">${unit}</span>
+              </div>`;
+          if (currentActiveUnit === ActiveUnit.capacity) {
+            actualAndForecastSection = `<span class="text-2xs uppercase tracking-wide text-mapbox-black-300">% of National</span>
+            <div><span>${actualValue}</span> <span class="text-2xs text-mapbox-black-300">%</span></div>`;
+          }
+
+          const popupContent = `<div class="flex flex-col min-w-[16rem] text-white">
+          <div class="flex justify-between gap-3 items-center mb-1">
+            <div class="text-sm font-semibold">${properties?.gspDisplayName}</div>
+            <div class="text-xs text-mapbox-black-300">${properties?.GSPs} • #${
+            properties?.gsp_id
+          }</div>
+          </div>
+          <div class="flex justify-between items-center">
+            
+            <div class="flex flex-col text-xs">
+              <span class="text-2xs uppercase tracking-wide text-mapbox-black-300">Capacity</span>
+              <div><span>${
+                properties?.[SelectedData.installedCapacityMw]
+              }</span> <span class="text-2xs text-mapbox-black-300">MW</span></div>
+            </div>
+            <div class="flex flex-col text-xs items-end">
+              ${actualAndForecastSection}
+            </div>
+          </div>
+        </div>`;
+
+          // Populate the popup and set its coordinates
+          // based on the feature found.
+          popup.setHTML(popupContent).trackPointer().addTo(map);
+        },
+        32,
+        {}
+      );
+      map.on("mousemove", "latestPV-forecast", popupFunction);
+
+      map.on("mouseleave", "latestPV-forecast", () => {
+        map.getCanvas().style.cursor = "";
+        popup.remove();
+      });
+
+      map.on("data", (e) => {
+        if (e.sourceId === "latestPV" && e.isSourceLoaded) {
+          setMapDataLoading(false);
+        }
+      });
+
+      map.on("sourcedata", (e) => {
+        if (e.sourceId === "latestPV" && e.isSourceLoaded) {
+          setMapDataLoading(false);
+        }
+      });
     } else {
       if (generatedGeoJsonForecastData && source) {
+        const currentActiveUnit = getActiveUnitFromMap(map);
+        const isNormalized = currentActiveUnit === ActiveUnit.percentage;
         source?.setData(generatedGeoJsonForecastData.forecastGeoJson);
         map.setPaintProperty(
           "latestPV-forecast",
           "fill-opacity",
           getFillOpacity(selectedDataName, isNormalized)
         );
+        console.log("pvForecastLayer updated", generatedGeoJsonForecastData.forecastGeoJson);
+      } else {
+        console.log("pvForecastLayer not updated");
       }
     }
+    console.log("pvForecastLayer set");
 
     const pvForecastBordersLayer = map.getLayer("latestPV-forecast-borders");
     if (!pvForecastBordersLayer) {
@@ -134,36 +326,42 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
   };
 
   return (
-    <div className={`relative h-full w-full ${className}`}>
+    <div className={`pv-map relative h-full w-full ${className}`}>
       {forecastError ? (
         <FailedStateMap error="Failed to load" />
       ) : (
         // ) : !forecastError && !initForecastData ? (
-        //   <LoadStateMap>
-        //     <ButtonGroup rightString={formatISODateStringHuman(selectedISOTime || "")} />
-        //   </LoadStateMap>
-        <Map
-          loadDataOverlay={(map: { current: mapboxgl.Map }) =>
-            safelyUpdateMapData(map.current, addOrUpdateMapData)
-          }
-          updateData={{
-            newData: !!initForecastData,
-            updateMapData: (map) => safelyUpdateMapData(map, addOrUpdateMapData)
-          }}
-          controlOverlay={(map: { current?: mapboxgl.Map }) => (
-            <>
-              <ButtonGroup rightString={formatISODateStringHuman(selectedISOTime || "")} />
-              <MeasuringUnit
-                activeUnit={activeUnit}
-                setActiveUnit={setActiveUnit}
-                isLoading={!initForecastData}
-              />
-            </>
+        <>
+          {(!combinedData.allGspForecastData ||
+            combinedLoading.allGspForecastLoading ||
+            mapDataLoading) && (
+            <LoadStateMap>
+              <Spinner />
+            </LoadStateMap>
           )}
-          title={VIEWS.FORECAST}
-        >
-          <ColorGuideBar unit={activeUnit} />
-        </Map>
+          <Map
+            loadDataOverlay={(map: { current: mapboxgl.Map }) =>
+              safelyUpdateMapData(map.current, addOrUpdateMapData)
+            }
+            updateData={{
+              newData: shouldUpdateMap,
+              updateMapData: (map) => safelyUpdateMapData(map, addOrUpdateMapData)
+            }}
+            controlOverlay={(map: { current?: mapboxgl.Map }) => (
+              <>
+                <ButtonGroup rightString={formatISODateStringHuman(selectedISOTime || "")} />
+                <MeasuringUnit
+                  activeUnit={activeUnit}
+                  setActiveUnit={setActiveUnit}
+                  isLoading={!initForecastData}
+                />
+              </>
+            )}
+            title={VIEWS.FORECAST}
+          >
+            <ColorGuideBar unit={activeUnit} />
+          </Map>
+        </>
       )}
     </div>
   );
diff --git a/apps/nowcasting-app/components/map/sitesMap.tsx b/apps/nowcasting-app/components/map/sitesMap.tsx
index 390d62de..f349d9b6 100644
--- a/apps/nowcasting-app/components/map/sitesMap.tsx
+++ b/apps/nowcasting-app/components/map/sitesMap.tsx
@@ -13,7 +13,12 @@ import {
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import dnoShapeData from "../../data/dno_regions_lat_long_converted.json";
 import useGlobalState from "../helpers/globalState";
-import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
+import {
+  formatISODateString,
+  formatISODateStringHuman,
+  getRoundedPv,
+  getRoundedPvPercent
+} from "../helpers/utils";
 import {
   AggregatedSitesCombinedData,
   AggregatedSitesDataGroupMap,
@@ -23,28 +28,12 @@ import {
 import { theme } from "../../tailwind.config";
 import { Feature, FeatureCollection } from "geojson";
 import Slider from "./sitesMapFeatures/sitesZoomSlider";
-import SitesLegend from "./sitesMapFeatures/sitesLegend";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
 import dynamic from "next/dynamic";
 
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
-const getRoundedPv = (pv: number, round: boolean = true) => {
-  if (!round) return Math.round(pv);
-  // round To: 0, 100, 200, 300, 400, 500
-  return Math.round(pv / 100) * 100;
-};
-const getRoundedPvPercent = (per: number, round: boolean = true) => {
-  if (!round) return per;
-  // round to : 0, 0.2, 0.4, 0.6 0.8, 1
-  let rounded = Math.round(per * 10);
-  if (rounded % 2) {
-    if (per * 10 > rounded) return (rounded + 1) / 10;
-    else return (rounded - 1) / 10;
-  } else return rounded / 10;
-};
-
 type SitesMapProps = {
   className?: string;
   sitesData: CombinedSitesData;
@@ -140,9 +129,9 @@ const SitesMap: React.FC<SitesMapProps> = ({
           ...featureObj,
           properties: {
             ...featureObj.properties,
-            [SelectedData.expectedPowerGenerationMegawatts]:
+            [SelectedData.expectedPowerGenerationMegawattsRounded]:
               selectedFCValue && getRoundedPv(selectedFCValue.expectedPowerGenerationMegawatts),
-            [SelectedData.expectedPowerGenerationNormalized]:
+            [SelectedData.expectedPowerGenerationNormalizedRounded]:
               selectedFCValue &&
               getRoundedPvPercent(selectedFCValue?.expectedPowerGenerationNormalized || 0),
             [SelectedData.installedCapacityMw]: getRoundedPv(
@@ -523,7 +512,7 @@ const SitesMap: React.FC<SitesMapProps> = ({
           )}
           title={VIEWS.SOLAR_SITES}
         >
-          <SitesLegend color={"color"} />
+          {/*<SitesLegend color={"color"} />*/}
         </MapComponent>
       )}
     </div>
diff --git a/apps/nowcasting-app/components/map/types.ts b/apps/nowcasting-app/components/map/types.ts
index c08407b8..e08cd3bb 100644
--- a/apps/nowcasting-app/components/map/types.ts
+++ b/apps/nowcasting-app/components/map/types.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export enum ActiveUnit {
   MW = "MW",
   percentage = "%",
@@ -7,12 +9,15 @@ export enum ActiveUnit {
 export enum SelectedData {
   expectedPowerGenerationNormalized = "expectedPowerGenerationNormalized",
   expectedPowerGenerationMegawatts = "expectedPowerGenerationMegawatts",
+  expectedPowerGenerationMegawattsRounded = "expectedPowerGenerationMegawattsRounded",
+  expectedPowerGenerationNormalizedRounded = "expectedPowerGenerationNormalizedRounded",
+  actualPowerGenerationMegawatts = "actualPowerGenerationMegawatts",
   installedCapacityMw = "installedCapacityMw",
   delta = "delta"
 }
 
 export interface IMap {
-  children: React.ReactNode;
+  children?: ReactNode;
   loadDataOverlay: any;
   controlOverlay: any;
   bearing?: number;
diff --git a/apps/nowcasting-app/components/side-layout/expand-button.tsx b/apps/nowcasting-app/components/side-layout/expand-button.tsx
index 485c4198..0f034af2 100644
--- a/apps/nowcasting-app/components/side-layout/expand-button.tsx
+++ b/apps/nowcasting-app/components/side-layout/expand-button.tsx
@@ -5,15 +5,15 @@ type ExpandButtonProps = { isOpen: boolean; onClick: () => void };
 const ExpandButton: React.FC<ExpandButtonProps> = ({ onClick, isOpen }) => {
   return (
     <button
-      className="items-center w-10 h-10  text-lg m text-black bg-amber-400  hover:bg-amber-400 focus:bg-amber-400 "
+      className="items-center w-8 h-8 text-lg m text-black bg-amber-400  hover:bg-amber-400 focus:bg-amber-400 "
       onClick={() => {
         onClick();
       }}
     >
       {!isOpen ? (
-        <MdKeyboardArrowRight size={40} className="m-auto" />
+        <MdKeyboardArrowRight size={32} className="m-auto" />
       ) : (
-        <MdKeyboardArrowLeft size={40} className="m-auto" />
+        <MdKeyboardArrowLeft size={32} className="m-auto" />
       )}
     </button>
   );
diff --git a/apps/nowcasting-app/components/side-layout/index.tsx b/apps/nowcasting-app/components/side-layout/index.tsx
index 42faf6c8..55795ecf 100644
--- a/apps/nowcasting-app/components/side-layout/index.tsx
+++ b/apps/nowcasting-app/components/side-layout/index.tsx
@@ -1,23 +1,39 @@
-import { useState } from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import ExpandButton from "./expand-button";
 import useGlobalState from "../helpers/globalState";
+import { ChartInfo } from "../../ChartInfo";
+import { InfoIcon } from "../icons/icons";
+import Tooltip, { TooltipPosition } from "../tooltip";
+import { VIEWS } from "../../constant";
 
 type SideLayoutProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   dashboardModeActive?: boolean;
   bottomPadding?: boolean;
 };
 
-const SideLayout: React.FC<SideLayoutProps> = ({
+const SideLayout: FC<SideLayoutProps> = ({
   children,
   className,
   dashboardModeActive = false,
   bottomPadding = true
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [view] = useGlobalState("view");
   // const closedWidth = dashboardModeActive ? "50%" : "44%";
   const closedWidth = "50%";
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (window.innerWidth < 1024) {
+      setIsOpen(true);
+      setIsMobile(true);
+    }
+  }, []);
+  let position: TooltipPosition = "top";
+  if (isMobile) {
+    position = isOpen ? "top-left" : "top-middle";
+  }
   return (
     <div
       className={`h-full pt-16 absolute top-0 left-0 z-20 ${className || ""}`}
@@ -28,15 +44,28 @@ const SideLayout: React.FC<SideLayoutProps> = ({
           "focus:outline-none h-full text-white justify-between flex flex-col bg-mapbox-black-500 z-20 "
         }
       >
-        <div
-          className={`min-h-full flex flex-col overflow-y-scroll${bottomPadding ? " pb-32" : ""}`}
-        >
-          {children}
-        </div>
+        <div className={`min-h-full max-h-full flex flex-col overflow-y-scroll`}>{children}</div>
       </div>
-      <div className="absolute bottom-16 -right-5 h-10 mb-[3px]">
+      <div className="absolute bottom-12 -right-4 h-10">
         <ExpandButton isOpen={isOpen} onClick={() => setIsOpen((o) => !o)} />
       </div>
+
+      {view !== VIEWS.SOLAR_SITES && (
+        <div className="absolute bottom-3 -right-4 bg-mapbox-black-500 p-1.5 rounded-full">
+          <Tooltip
+            tip={
+              <div className="w-64 rounded-md">
+                <ChartInfo />
+              </div>
+            }
+            position={position}
+            className={"text-right"}
+            fullWidth
+          >
+            <InfoIcon />
+          </Tooltip>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/nowcasting-app/components/tooltip.tsx b/apps/nowcasting-app/components/tooltip.tsx
index e899d6b1..bdfe3535 100644
--- a/apps/nowcasting-app/components/tooltip.tsx
+++ b/apps/nowcasting-app/components/tooltip.tsx
@@ -1,7 +1,8 @@
+export type TooltipPosition = "left" | "right" | "middle" | "top" | "top-middle" | "top-left";
 type TooltipProps = {
   children: React.ReactNode;
   tip: string | React.ReactNode;
-  position?: "left" | "right" | "middle" | "top";
+  position?: TooltipPosition;
   className?: string;
   fullWidth?: boolean;
 };
@@ -32,6 +33,15 @@ const Tooltip: React.FC<TooltipProps> = ({
     case "top":
       containerPositionClass = "bottom-5 right-2";
       tipPositionClass = "-right-2 bottom-0";
+      break;
+    case "top-middle":
+      containerPositionClass = "bottom-6 -left-32 transform translate-x-2";
+      tipPositionClass = "-left-1 bottom-0";
+      break;
+    case "top-left":
+      containerPositionClass = "bottom-8 right-64 transform -translate-x-2";
+      tipPositionClass = "-left-1 bottom-0";
+      break;
   }
   return (
     <div
diff --git a/apps/nowcasting-app/components/types.d.ts b/apps/nowcasting-app/components/types.d.ts
index b0932413..bd91a7b1 100644
--- a/apps/nowcasting-app/components/types.d.ts
+++ b/apps/nowcasting-app/components/types.d.ts
@@ -11,7 +11,7 @@ export enum NationalEndpointLabel {
   nationalForecast = "National Forecast",
   pvRealDayIn = "PV Live Estimate",
   pvRealDayAfter = "PV Live Updated",
-  national4Hour = "4-hour forecast",
+  nationalNHour = "N-hour forecast",
   allGspForecast = "All GSP Forecast",
   allGspReal = "All GSP PV Live"
 }
@@ -81,13 +81,13 @@ type PvRealData = {
   datetimeUtc: string;
   solarGenerationKw: number;
 }[];
-type National4HourData = ForecastValue[];
+type NationalNHourData = ForecastValue[];
 type AllGspRealData = GspRealData[];
 type CombinedData = {
   nationalForecastData: ForecastData | undefined;
   pvRealDayInData: PvRealData | undefined;
   pvRealDayAfterData: PvRealData | undefined;
-  national4HourData: National4HourData | undefined;
+  nationalNHourData: NationalNHourData | undefined;
   allGspSystemData: components["schemas"]["Location"][] | undefined;
   // TODO: slight mashup of custom and generated types atm,
   //  ideally should be able to use just the generated for API typings
@@ -102,7 +102,7 @@ type CombinedLoading = {
   nationalForecastLoading: boolean;
   pvRealDayInLoading: boolean;
   pvRealDayAfterLoading: boolean;
-  national4HourLoading: boolean;
+  nationalNHourLoading: boolean;
   allGspSystemLoading: boolean;
   allGspForecastLoading: boolean;
   allGspRealLoading: boolean;
@@ -111,7 +111,7 @@ type CombinedValidating = {
   nationalForecastValidating: boolean;
   pvRealDayInValidating: boolean;
   pvRealDayAfterValidating: boolean;
-  national4HourValidating: boolean;
+  nationalNHourValidating: boolean;
   allGspSystemValidating: boolean;
   allGspForecastValidating: boolean;
   allGspRealValidating: boolean;
@@ -120,7 +120,7 @@ type CombinedErrors = {
   nationalForecastError: any;
   pvRealDayInError: any;
   pvRealDayAfterError: any;
-  national4HourError: any;
+  nationalNHourError: any;
   allGspSystemError: any;
   allGspForecastError: any;
   allGspRealError: any;
@@ -297,7 +297,10 @@ export type AggregatedSitesCombinedData = {
 export type MapFeatureObject = {
   properties: {
     expectedPowerGenerationMegawatts: number | undefined;
+    expectedPowerGenerationMegawattsRounded: number | undefined;
     expectedPowerGenerationNormalized: number | undefined;
+    expectedPowerGenerationNormalizedRounded: number | undefined;
+    actualPowerGenerationMegawatts: number | undefined;
     delta?: number;
     deltaBucket?: number;
     installedCapacityMw: number;
diff --git a/apps/nowcasting-app/constant.ts b/apps/nowcasting-app/constant.ts
index 905342ea..647dd8da 100644
--- a/apps/nowcasting-app/constant.ts
+++ b/apps/nowcasting-app/constant.ts
@@ -62,6 +62,16 @@ export enum VIEWS {
   DELTA = "DELTA",
   SOLAR_SITES = "SOLAR SITES"
 }
+export const getViewTitle = (view: VIEWS) => {
+  switch (view) {
+    case VIEWS.FORECAST:
+      return "PV Forecast";
+    case VIEWS.DELTA:
+      return "Delta";
+    case VIEWS.SOLAR_SITES:
+      return "Solar Sites";
+  }
+};
 
 export enum AGGREGATION_LEVELS {
   NATIONAL = "NATIONAL",
@@ -102,3 +112,5 @@ export enum DELTA_BUCKET {
   POS4 = 100
 }
 export const getDeltaBucketKeys = () => Object.keys(DELTA_BUCKET).filter((k) => isNaN(Number(k)));
+
+export const N_HOUR_FORECAST_OPTIONS = [1, 2, 4, 8];
diff --git a/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js b/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
index 98d8769f..54be736e 100644
--- a/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
+++ b/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
@@ -41,9 +41,9 @@ describe("Load the page", () => {
     cy.get("header #UserMenu-4hViewBtn").should("not.exist");
     cy.get("header button").contains("Open user menu").should("exist");
     cy.get("header button").contains("Open user menu").parent().click();
-    cy.get("header #UserMenu-4hViewBtn").should("exist");
-    cy.get("header #UserMenu-4hViewBtn").should("be.visible");
-    cy.get("header #UserMenu-4hViewBtn").should("contain", "4-hour forecast");
+    cy.get("header #UserMenu-NhViewBtn").should("exist");
+    cy.get("header #UserMenu-NhViewBtn").should("be.visible");
+    cy.get("header #UserMenu-NhViewBtn").should("contain", "N-hour forecast");
     cy.get("header #UserMenu-DashboardModeBtn").should("contain", "Dashboard mode");
     cy.get("header #UserMenu-DocumentationBtn").should("contain", "Documentation");
     cy.get("header #UserMenu-ContactBtn").should("contain", "Contact");
diff --git a/apps/nowcasting-app/package.json b/apps/nowcasting-app/package.json
index befb1c4f..b1de0328 100644
--- a/apps/nowcasting-app/package.json
+++ b/apps/nowcasting-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openclimatefix/nowcasting-app",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
diff --git a/apps/nowcasting-app/pages/_document.tsx b/apps/nowcasting-app/pages/_document.tsx
index 05c50568..d84ee9de 100644
--- a/apps/nowcasting-app/pages/_document.tsx
+++ b/apps/nowcasting-app/pages/_document.tsx
@@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from "next/document";
 class MyDocument extends Document {
   render() {
     return (
-      <Html className="h-full bg-gray-50">
+      <Html className="bg-gray-50">
         <Head>
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           {/*// @ts-ignore*/}
@@ -15,7 +15,7 @@ class MyDocument extends Document {
           <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
           <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" defer></script>
         </Head>
-        <body className="h-full">
+        <body>
           <Main />
           <NextScript />
         </body>
diff --git a/apps/nowcasting-app/pages/index.tsx b/apps/nowcasting-app/pages/index.tsx
index 060174a7..ea249ca7 100644
--- a/apps/nowcasting-app/pages/index.tsx
+++ b/apps/nowcasting-app/pages/index.tsx
@@ -20,7 +20,7 @@ import {
   CombinedValidating,
   ForecastData,
   GspAllForecastData,
-  National4HourData,
+  NationalNHourData,
   PvRealData,
   SitePvActual,
   SitePvForecast,
@@ -57,7 +57,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
   useAndUpdateSelectedTime();
   const [view, setView] = useGlobalState("view");
   const [activeUnit, setActiveUnit] = useState<ActiveUnit>(ActiveUnit.MW);
-  const [show4hView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
   const [selectedISOTime] = useGlobalState("selectedISOTime");
   const selectedTime = formatISODateString(selectedISOTime || new Date().toISOString());
   const [timeNow] = useGlobalState("timeNow");
@@ -70,6 +70,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
   const [visibleLines] = useGlobalState("visibleLines");
   const [, setSitesLoadingState] = useGlobalState("sitesLoadingState");
   const [, setLoadingState] = useGlobalState("loadingState");
+  const [nHourForecast] = useGlobalState("nHourForecast");
 
   const [forecastLastFetch30MinISO, setForecastLastFetch30MinISO] = useState(get30MinNow(-30));
   const [forecastHistoricBackwardIntervalMinutes, setForecastHistoricBackwardIntervalMinutes] =
@@ -129,16 +130,6 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     });
   }, [view, maps]);
 
-  useEffect(() => {
-    // Clear any previous map timeouts on initial page load
-    for (const map of maps) {
-      localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`) &&
-        clearTimeout(
-          Number(localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`))
-        );
-    }
-  }, [maps]);
-
   useEffect(() => {
     maps.forEach((map) => {
       console.log("-- -- -- resizing map");
@@ -180,14 +171,15 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     isValidating: pvRealDayAfterValidating,
     error: pvRealDayAfterError
   } = useLoadDataFromApi<PvRealData>(`${API_PREFIX}/solar/GB/national/pvlive?regime=day-after`);
+  const nMinuteForecast = nHourForecast * 60;
   const {
-    data: national4HourData,
-    isLoading: national4HourLoading,
-    isValidating: national4HourValidating,
-    error: national4HourError
-  } = useLoadDataFromApi<National4HourData>(
-    show4hView
-      ? `${API_PREFIX}/solar/GB/national/forecast?forecast_horizon_minutes=240&historic=true&only_forecast_values=true`
+    data: nationalNHourData,
+    isLoading: nationalNHourLoading,
+    isValidating: nationalNHourValidating,
+    error: nationalNHourError
+  } = useLoadDataFromApi<NationalNHourData>(
+    showNHourView
+      ? `${API_PREFIX}/solar/GB/national/forecast?forecast_horizon_minutes=${nMinuteForecast}&historic=true&only_forecast_values=true`
       : null
   );
   const {
@@ -216,6 +208,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       `${forecastLastFetch30MinISO.slice(0, 19)}+00:00`
     )}`,
     {
+      keepPreviousData: true,
       onSuccess: (data) => {
         const forecastHistoricStart = get30MinNow(forecastHistoricBackwardIntervalMinutes);
         const prev30MinFromNowISO = `${get30MinNow(-30)}:00+00:00`;
@@ -244,6 +237,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       `${forecastLastFetch30MinISO.slice(0, 19)}+00:00`
     )}`,
     {
+      keepPreviousData: true,
       refreshInterval: 0, // Only load this once at beginning
       onSuccess: (data) => {
         if (!data) return;
@@ -444,7 +438,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspSystemData,
     allGspForecastData,
     allGspRealData,
@@ -455,7 +449,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastLoading,
       pvRealDayInLoading,
       pvRealDayAfterLoading,
-      national4HourLoading,
+      nationalNHourLoading: nationalNHourLoading,
       allGspSystemLoading,
       allGspForecastLoading,
       allGspRealLoading
@@ -464,7 +458,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastLoading,
       pvRealDayInLoading,
       pvRealDayAfterLoading,
-      national4HourLoading,
+      nationalNHourLoading,
       allGspSystemLoading,
       allGspForecastLoading,
       allGspRealLoading
@@ -475,7 +469,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastValidating,
       pvRealDayInValidating,
       pvRealDayAfterValidating,
-      national4HourValidating,
+      nationalNHourValidating,
       allGspSystemValidating,
       allGspForecastValidating,
       allGspRealValidating: allGspActualValidating
@@ -484,7 +478,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastValidating,
       pvRealDayInValidating,
       pvRealDayAfterValidating,
-      national4HourValidating,
+      nationalNHourValidating,
       allGspSystemValidating,
       allGspForecastValidating,
       allGspActualValidating
@@ -494,7 +488,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspSystemError,
     allGspForecastError,
     allGspRealError: allGspActualError
@@ -642,6 +636,8 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
           <PvLatestMap
             className={currentView(VIEWS.FORECAST) ? "" : "hidden"}
             combinedData={combinedData}
+            combinedLoading={combinedLoading}
+            combinedValidating={combinedValidating}
             combinedErrors={combinedErrors}
             activeUnit={activeUnit}
             setActiveUnit={setActiveUnit}
diff --git a/apps/nowcasting-app/sentry.properties b/apps/nowcasting-app/sentry.properties
index 0816039a..0711d42b 100644
--- a/apps/nowcasting-app/sentry.properties
+++ b/apps/nowcasting-app/sentry.properties
@@ -1,4 +1,4 @@
 defaults.url=https://sentry.io/
 defaults.org=openclimatefix
-defaults.project=nowcasting-app
+defaults.project=quartz-solar-app
 cli.executable=../../../../../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli
diff --git a/apps/nowcasting-app/styles/globals.css b/apps/nowcasting-app/styles/globals.css
index ea7d9997..2e25745e 100644
--- a/apps/nowcasting-app/styles/globals.css
+++ b/apps/nowcasting-app/styles/globals.css
@@ -11,13 +11,18 @@
   @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-mapbox-black bg-ocf-yellow hover:bg-ocf-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ocf-delta-500;
 }
 
-.delta-map .mapboxgl-popup-content {
-  background: rgba(0,0,0,0.5);
+.pv-map a.mapboxgl-ctrl-logo, .delta-map a.mapboxgl-ctrl-logo {
+  margin-left: 0.5rem;
+}
+
+.pv-map .mapboxgl-popup-content, .delta-map .mapboxgl-popup-content {
+  background: rgba(0,0,0,0.75);
   color: white;
-  padding: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem 0.5rem 0 0.5rem;
 }
 
-.delta-map .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+.pv-map .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip, .delta-map .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
   border-top-color: rgba(0,0,0,0.5);
 }
 
@@ -57,3 +62,55 @@
     opacity: 0;
   }
 }
+
+.toggle {
+  @apply inline-flex items-center relative w-6 h-2 rounded-full bg-ocf-yellow
+  border border-ocf-yellow/0 transition-all duration-100 ease-in-out delay-0 cursor-pointer
+  bg-opacity-25 checked:bg-opacity-100 after:-ml-0.5 checked:after:ml-0 checked:after:-mr-0.5
+  checked:bg-none checked:text-ocf-yellow
+  focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-transparent focus:ring-transparent
+  after:will-change-transform after:transition-all after:duration-200 after:ease-in-out after:inline-flex
+  after:content-[''] after:bg-white after:border-ocf-gray-300 after:border after:rounded-full after:h-3 after:w-3
+  checked:after:translate-x-full checked:after:border-white;
+}
+
+.custom-select {
+  /*min-width: 350px;*/
+  position: relative;
+}
+
+.custom-select select {
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  padding: 0.25em 0.5em 0.25em 0.5em;
+  background: transparent;
+  border: 1px solid #FF9736;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.custom-select::before,
+.custom-select::after {
+  --size: 0.25rem;
+  position: absolute;
+  content: "";
+  right: 0.5rem;
+  pointer-events: none;
+}
+
+.custom-select::after {
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-top: var(--size) solid white;
+  top: calc(50% - var(--size) / 2);
+}
+
+.sometimes-bold::before {
+  display: block;
+  content: attr(title);
+  font-weight: bold;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
diff --git a/apps/nowcasting-app/tailwind.config.js b/apps/nowcasting-app/tailwind.config.js
index d0709b01..7512638d 100644
--- a/apps/nowcasting-app/tailwind.config.js
+++ b/apps/nowcasting-app/tailwind.config.js
@@ -192,7 +192,7 @@ module.exports = {
           700: "#9F973A",
           800: "#FCED4F",
           900: "#F19F38",
-          950: "#595959"
+          950: "#646464"
         },
         "ocf-sites": {
           DEFAULT: "#6C6C6C",