diff --git a/frontend/src/modules/LayerSpike/layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesContext.ts b/frontend/src/modules/LayerSpike/layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesContext.ts
index 37d1181bf..a0e2941d7 100644
--- a/frontend/src/modules/LayerSpike/layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesContext.ts
+++ b/frontend/src/modules/LayerSpike/layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesContext.ts
@@ -57,10 +57,9 @@ export class DrilledWellTrajectoriesContext implements SettingsContext<DrilledWe
     }
 
     fetchData(oldValues: DrilledWellTrajectoriesSettings, newValues: DrilledWellTrajectoriesSettings): void {
-        if (oldValues[SettingType.ENSEMBLE] === newValues[SettingType.ENSEMBLE]) {
+        if (isEqual(oldValues[SettingType.ENSEMBLE], newValues[SettingType.ENSEMBLE])) {
             return;
         }
-
         const queryClient = this.getDelegate().getLayerManager().getQueryClient();
 
         const settings = this.getDelegate().getSettings();
diff --git a/frontend/src/modules/LayerSpike/layers/implementations/layers/RealizationSurfaceLayer/RealizationSurfaceLayer.ts b/frontend/src/modules/LayerSpike/layers/implementations/layers/RealizationSurfaceLayer/RealizationSurfaceLayer.ts
index b374f74f2..af8c89a13 100644
--- a/frontend/src/modules/LayerSpike/layers/implementations/layers/RealizationSurfaceLayer/RealizationSurfaceLayer.ts
+++ b/frontend/src/modules/LayerSpike/layers/implementations/layers/RealizationSurfaceLayer/RealizationSurfaceLayer.ts
@@ -72,14 +72,14 @@ export class RealizationSurfaceLayer
 
         const surfAddrStr = surfaceAddress ? encodeSurfAddrStr(surfaceAddress) : null;
 
-        const queryKey = ["getSurfaceData", surfAddrStr, null, "float"];
+        const queryKey = ["getSurfaceData", surfAddrStr, null, "png"];
 
         this._layerDelegate.registerQueryKey(queryKey);
 
         const promise = queryClient
             .fetchQuery({
                 queryKey,
-                queryFn: () => apiService.surface.getSurfaceData(surfAddrStr ?? "", "float", null),
+                queryFn: () => apiService.surface.getSurfaceData(surfAddrStr ?? "", "png", null),
                 staleTime: STALE_TIME,
                 gcTime: CACHE_TIME,
             })
diff --git a/frontend/src/modules/LayerSpike/settings/settings.tsx b/frontend/src/modules/LayerSpike/settings/settings.tsx
index 2667c48ee..411a9ce11 100644
--- a/frontend/src/modules/LayerSpike/settings/settings.tsx
+++ b/frontend/src/modules/LayerSpike/settings/settings.tsx
@@ -82,7 +82,7 @@ export function Settings(props: ModuleSettingsProps<any>): React.ReactNode {
             groupDelegate.prependChild(new SharedSetting(new Realization()));
         }
         if (settingType === SharedSettingType.SURFACE_NAME) {
-            groupDelegate.appendChild(new SharedSetting(new SurfaceName()));
+            groupDelegate.prependChild(new SharedSetting(new SurfaceName()));
         }
     }
 
diff --git a/frontend/src/modules/LayerSpike/view/layerFactory.ts b/frontend/src/modules/LayerSpike/view/layerFactory.ts
index 1a38ee914..b7ee3ad86 100644
--- a/frontend/src/modules/LayerSpike/view/layerFactory.ts
+++ b/frontend/src/modules/LayerSpike/view/layerFactory.ts
@@ -1,10 +1,12 @@
-import { PolygonData_api, WellboreTrajectory_api } from "@api";
+import { PolygonData_api, SurfaceDef_api, WellboreTrajectory_api } from "@api";
 import { Layer } from "@deck.gl/core/typed";
 import { GeoJsonLayer } from "@deck.gl/layers/typed";
+import { Vec2, rotatePoint2Around } from "@lib/utils/vec2";
 import { SurfaceDataFloat_trans } from "@modules/_shared/Surface/queryDataTransforms";
-import { MapLayer, WellsLayer } from "@webviz/subsurface-viewer/dist/layers";
+import { ColormapLayer, Hillshading2DLayer, MapLayer, WellsLayer } from "@webviz/subsurface-viewer/dist/layers";
 
 import { Feature } from "geojson";
+import { SurfaceDataPng } from "src/api/models/SurfaceDataPng";
 
 import { DrilledWellTrajectoriesLayer } from "../layers/implementations/layers/DrilledWellTrajectoriesLayer/DrilledWellTrajectoriesLayer";
 import { ObservedSurfaceLayer } from "../layers/implementations/layers/ObservedSurfaceLayer/ObservedSurfaceLayer";
@@ -15,14 +17,15 @@ import { Layer as LayerInterface } from "../layers/interfaces";
 
 export function makeLayer(layer: LayerInterface<any, any>): Layer | null {
     const data = layer.getLayerDelegate().getData();
+
     if (!data) {
         return null;
     }
     if (layer instanceof ObservedSurfaceLayer) {
-        return createMapFloatLayer(data, layer.getItemDelegate().getId());
+        return createMapImageLayer(data, layer.getItemDelegate().getId());
     }
     if (layer instanceof RealizationSurfaceLayer) {
-        return createMapFloatLayer(data, layer.getItemDelegate().getId());
+        return createMapImageLayer(data, layer.getItemDelegate().getId());
     }
     if (layer instanceof StatisticalSurfaceLayer) {
         return createMapFloatLayer(data, layer.getItemDelegate().getId());
@@ -59,6 +62,38 @@ function createMapFloatLayer(layerData: SurfaceDataFloat_trans, id: string): Map
         depthTest: false,
     });
 }
+
+function createMapImageLayer(layerData: SurfaceDataPng, id: string): ColormapLayer {
+    return new ColormapLayer({
+        id: id,
+        image: `data:image/png;base64,${layerData.png_image_base64}`,
+        bounds: _calcBoundsForRotationAroundUpperLeftCorner(layerData.surface_def),
+        rotDeg: layerData.surface_def.rot_deg,
+        valueRange: [layerData.value_min, layerData.value_max],
+        colorMapRange: [layerData.value_min, layerData.value_max],
+        colorMapName: "Physics",
+        parameters: {
+            depthTest: false,
+        },
+    });
+}
+function _calcBoundsForRotationAroundUpperLeftCorner(surfDef: SurfaceDef_api): [number, number, number, number] {
+    const width = (surfDef.npoints_x - 1) * surfDef.inc_x;
+    const height = (surfDef.npoints_y - 1) * surfDef.inc_y;
+    const orgRotPoint: Vec2 = { x: surfDef.origin_utm_x, y: surfDef.origin_utm_y };
+    const orgTopLeft: Vec2 = { x: surfDef.origin_utm_x, y: surfDef.origin_utm_y + height };
+
+    const transTopLeft: Vec2 = rotatePoint2Around(orgTopLeft, orgRotPoint, (surfDef.rot_deg * Math.PI) / 180);
+    const tLeft = transTopLeft.x;
+    const tBottom = transTopLeft.y - height;
+    const tRight = transTopLeft.x + width;
+    const tTop = transTopLeft.y;
+
+    const bounds: [number, number, number, number] = [tLeft, tBottom, tRight, tTop];
+
+    return bounds;
+}
+
 function createFaultPolygonsLayer(polygonsData: PolygonData_api[], id: string): GeoJsonLayer {
     const features: Record<string, unknown>[] = polygonsData.map((polygon) => {
         return surfacePolygonsToGeojson(polygon);
@@ -71,7 +106,7 @@ function createFaultPolygonsLayer(polygonsData: PolygonData_api[], id: string):
     return new GeoJsonLayer({
         id: id,
         data: data,
-        opacity: 0.5,
+        // opacity: 0.5,
         parameters: {
             depthTest: false,
         },