diff --git a/.github/workflows/webviz.yml b/.github/workflows/webviz.yml
index 9aa735ff1..1d3de3ca4 100644
--- a/.github/workflows/webviz.yml
+++ b/.github/workflows/webviz.yml
@@ -39,6 +39,8 @@ jobs:
       - name: 🏗️ Build JavaScript bundle
         working-directory: ./frontend
         run: |
+          # Building wsc requires increasing memory allocated to Node
+          export NODE_OPTIONS="--max_old_space_size=4096"
           npm run build
 
       - name: 🕵️ Check code style & linting
diff --git a/backend/poetry.lock b/backend/poetry.lock
index 69fa7f710..799aa4913 100644
--- a/backend/poetry.lock
+++ b/backend/poetry.lock
@@ -1350,6 +1350,72 @@ files = [
     {file = "numpy-1.24.1.tar.gz", hash = "sha256:2386da9a471cc00a1f47845e27d916d5ec5346ae9696e01a8a34760858fe9dd2"},
 ]
 
+[[package]]
+name = "orjson"
+version = "3.8.10"
+description = "Fast, correct Python JSON library supporting dataclasses, datetimes, and numpy"
+category = "main"
+optional = false
+python-versions = ">= 3.7"
+files = [
+    {file = "orjson-3.8.10-cp310-cp310-macosx_10_7_x86_64.whl", hash = "sha256:4dfe0651e26492d5d929bbf4322de9afbd1c51ac2e3947a7f78492b20359711d"},
+    {file = "orjson-3.8.10-cp310-cp310-macosx_10_9_x86_64.macosx_11_0_arm64.macosx_10_9_universal2.whl", hash = "sha256:bc30de5c7b3a402eb59cc0656b8ee53ca36322fc52ab67739c92635174f88336"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c08b426fae7b9577b528f99af0f7e0ff3ce46858dd9a7d1bf86d30f18df89a4c"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:bce970f293825e008dbf739268dfa41dfe583aa2a1b5ef4efe53a0e92e9671ea"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9b23fb0264bbdd7218aa685cb6fc71f0dcecf34182f0a8596a3a0dff010c06f9"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:0826ad2dc1cea1547edff14ce580374f0061d853cbac088c71162dbfe2e52205"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a7bce6e61cea6426309259b04c6ee2295b3f823ea51a033749459fe2dd0423b2"},
+    {file = "orjson-3.8.10-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:0b470d31244a6f647e5402aac7d2abaf7bb4f52379acf67722a09d35a45c9417"},
+    {file = "orjson-3.8.10-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:48824649019a25d3e52f6454435cf19fe1eb3d05ee697e65d257f58ae3aa94d9"},
+    {file = "orjson-3.8.10-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:faee89e885796a9cc493c930013fa5cfcec9bfaee431ddf00f0fbfb57166a8b3"},
+    {file = "orjson-3.8.10-cp310-none-win_amd64.whl", hash = "sha256:3cfe32b1227fe029a5ad989fbec0b453a34e5e6d9a977723f7c3046d062d3537"},
+    {file = "orjson-3.8.10-cp311-cp311-macosx_10_7_x86_64.whl", hash = "sha256:2073b62822738d6740bd2492f6035af5c2fd34aa198322b803dc0e70559a17b7"},
+    {file = "orjson-3.8.10-cp311-cp311-macosx_10_9_x86_64.macosx_11_0_arm64.macosx_10_9_universal2.whl", hash = "sha256:b2c4faf20b6bb5a2d7ac0c16f58eb1a3800abcef188c011296d1dc2bb2224d48"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8c1825997232a324911d11c75d91e1e0338c7b723c149cf53a5fc24496c048a4"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f7e85d4682f3ed7321d36846cad0503e944ea9579ef435d4c162e1b73ead8ac9"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2b8cdaacecb92997916603ab232bb096d0fa9e56b418ca956b9754187d65ca06"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:ddabc5e44702d13137949adee3c60b7091e73a664f6e07c7b428eebb2dea7bbf"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:27bb26e171e9cfdbec39c7ca4739b6bef8bd06c293d56d92d5e3a3fc017df17d"},
+    {file = "orjson-3.8.10-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:1810e5446fe68d61732e9743592da0ec807e63972eef076d09e02878c2f5958e"},
+    {file = "orjson-3.8.10-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:61e2e51cefe7ef90c4fbbc9fd38ecc091575a3ea7751d56fad95cbebeae2a054"},
+    {file = "orjson-3.8.10-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f3e9ac9483c2b4cd794e760316966b7bd1e6afb52b0218f068a4e80c9b2db4f6"},
+    {file = "orjson-3.8.10-cp311-none-win_amd64.whl", hash = "sha256:26aee557cf8c93b2a971b5a4a8e3cca19780573531493ce6573aa1002f5c4378"},
+    {file = "orjson-3.8.10-cp37-cp37m-macosx_10_7_x86_64.whl", hash = "sha256:11ae68f995a50724032af297c92f20bcde31005e0bf3653b12bff9356394615b"},
+    {file = "orjson-3.8.10-cp37-cp37m-macosx_10_9_x86_64.macosx_11_0_arm64.macosx_10_9_universal2.whl", hash = "sha256:35d879b46b8029e1e01e9f6067928b470a4efa1ca749b6d053232b873c2dcf66"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:345e41abd1d9e3ecfb554e1e75ff818cf42e268bd06ad25a96c34e00f73a327e"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:45a5afc9cda6b8aac066dd50d8194432fbc33e71f7164f95402999b725232d78"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:ad632dc330a7b39da42530c8d146f76f727d476c01b719dc6743c2b5701aaf6b"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:4bf2556ba99292c4dc550560384dd22e88b5cdbe6d98fb4e202e902b5775cf9f"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b88afd662190f19c3bb5036a903589f88b1d2c2608fbb97281ce000db6b08897"},
+    {file = "orjson-3.8.10-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:abce8d319aae800fd2d774db1106f926dee0e8a5ca85998fd76391fcb58ef94f"},
+    {file = "orjson-3.8.10-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:e999abca892accada083f7079612307d94dd14cc105a699588a324f843216509"},
+    {file = "orjson-3.8.10-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:a3fdee68c4bb3c5d6f89ed4560f1384b5d6260e48fbf868bae1a245a3c693d4d"},
+    {file = "orjson-3.8.10-cp37-none-win_amd64.whl", hash = "sha256:e5d7f82506212e047b184c06e4bcd48c1483e101969013623cebcf51cf12cad9"},
+    {file = "orjson-3.8.10-cp38-cp38-macosx_10_7_x86_64.whl", hash = "sha256:d953e6c2087dcd990e794f8405011369ee11cf13e9aaae3172ee762ee63947f2"},
+    {file = "orjson-3.8.10-cp38-cp38-macosx_10_9_x86_64.macosx_11_0_arm64.macosx_10_9_universal2.whl", hash = "sha256:81aa3f321d201bff0bd0f4014ea44e51d58a9a02d8f2b0eeab2cee22611be8e1"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7d27b6182f75896dd8c10ea0f78b9265a3454be72d00632b97f84d7031900dd4"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:1486600bc1dd1db26c588dd482689edba3d72d301accbe4301db4b2b28bd7aa4"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:344ea91c556a2ce6423dc13401b83ab0392aa697a97fa4142c2c63a6fd0bbfef"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:979f231e3bad1c835627eef1a30db12a8af58bfb475a6758868ea7e81897211f"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6fa3a26dcf0f5f2912a8ce8e87273e68b2a9526854d19fd09ea671b154418e88"},
+    {file = "orjson-3.8.10-cp38-cp38-manylinux_2_28_x86_64.whl", hash = "sha256:b6e79d8864794635974b18821b49a7f27859d17b93413d4603efadf2e92da7a5"},
+    {file = "orjson-3.8.10-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:ce49999bcbbc14791c61844bc8a69af44f5205d219be540e074660038adae6bf"},
+    {file = "orjson-3.8.10-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:c2ef690335b24f9272dbf6639353c1ffc3f196623a92b851063e28e9515cf7dd"},
+    {file = "orjson-3.8.10-cp38-none-win_amd64.whl", hash = "sha256:5a0b1f4e4fa75e26f814161196e365fc0e1a16e3c07428154505b680a17df02f"},
+    {file = "orjson-3.8.10-cp39-cp39-macosx_10_7_x86_64.whl", hash = "sha256:af7601a78b99f0515af2f8ab12c955c0072ffcc1e437fb2556f4465783a4d813"},
+    {file = "orjson-3.8.10-cp39-cp39-macosx_10_9_x86_64.macosx_11_0_arm64.macosx_10_9_universal2.whl", hash = "sha256:6bbd7b3a3e2030b03c68c4d4b19a2ef5b89081cbb43c05fe2010767ef5e408db"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4355c9aedfefe60904e8bd7901315ebbc8bb828f665e4c9bc94b1432e67cb6f7"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b7b0ba074375e25c1594e770e2215941e2017c3cd121889150737fa1123e8bfe"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:34b6901c110c06ab9e8d7d0496db4bc9a0c162ca8d77f67539d22cb39e0a1ef4"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cb62ec16a1c26ad9487727b529103cb6a94a1d4969d5b32dd0eab5c3f4f5a6f2"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:595e1e7d04aaaa3d41113e4eb9f765ab642173c4001182684ae9ddc621bb11c8"},
+    {file = "orjson-3.8.10-cp39-cp39-manylinux_2_28_x86_64.whl", hash = "sha256:64ffd92328473a2f9af059410bd10c703206a4bbc7b70abb1bedcd8761e39eb8"},
+    {file = "orjson-3.8.10-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:b1f648ec89c6a426098868460c0ef8c86b457ce1378d7569ff4acb6c0c454048"},
+    {file = "orjson-3.8.10-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:6a286ad379972e4f46579e772f0477e6b505f1823aabcd64ef097dbb4549e1a4"},
+    {file = "orjson-3.8.10-cp39-none-win_amd64.whl", hash = "sha256:d2874cee6856d7c386b596e50bc517d1973d73dc40b2bd6abec057b5e7c76b2f"},
+    {file = "orjson-3.8.10.tar.gz", hash = "sha256:dcf6adb4471b69875034afab51a14b64f1026bc968175a2bb02c5f6b358bd413"},
+]
+
 [[package]]
 name = "packaging"
 version = "23.0"
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index f5ad83e9d..17261f759 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -20,6 +20,7 @@ pydantic = "^1.10.4"
 numpy = "^1.24.1"
 sumo-wrapper-python = {git = "https://github.com/equinor/sumo-wrapper-python.git", rev = "master"}
 fmu-sumo = {git = "https://github.com/equinor/fmu-sumo.git", rev = "afb37e944fdf510c68033e11b588ff6f44d7a2b6"}
+orjson = "^3.8.10"
 
 
 [tool.poetry.group.dev.dependencies]
diff --git a/backend/src/fastapi_app/routers/surface/converters.py b/backend/src/fastapi_app/routers/surface/converters.py
index 95ee4771f..48fef702b 100644
--- a/backend/src/fastapi_app/routers/surface/converters.py
+++ b/backend/src/fastapi_app/routers/surface/converters.py
@@ -1,11 +1,7 @@
-import base64
-
+import orjson
 import xtgeo
 
-from src.services.utils.surface_to_png import surface_to_png_bytes_optimized
-from src.services.utils.surface_orientation import (
-    calc_surface_orientation_for_colormap_layer,
-)
+from src.services.utils.surface_to_float32 import surface_to_float32_array
 from . import schemas
 
 
@@ -13,18 +9,17 @@ def to_api_surface_data(xtgeo_surf: xtgeo.RegularSurface) -> schemas.SurfaceData
     """
     Create API SurfaceData from xtgeo regular surface
     """
-    png_bytes: bytes = surface_to_png_bytes_optimized(xtgeo_surf)
-    base64_data = base64.b64encode(png_bytes).decode("ascii")
-
-    surf_orient = calc_surface_orientation_for_colormap_layer(xtgeo_surf)
+    float32values = surface_to_float32_array(xtgeo_surf)
 
     return schemas.SurfaceData(
-        x_min=surf_orient.x_min,
-        x_max=surf_orient.x_max,
-        y_min=surf_orient.y_min,
-        y_max=surf_orient.y_max,
+        x_ori=xtgeo_surf.xori,
+        y_ori=xtgeo_surf.yori,
+        x_count=xtgeo_surf.ncol,
+        y_count=xtgeo_surf.nrow,
+        x_inc=xtgeo_surf.xinc,
+        y_inc=xtgeo_surf.yinc,
         val_min=xtgeo_surf.values.min(),
         val_max=xtgeo_surf.values.max(),
-        rot_deg=surf_orient.rot_around_xmin_ymax_deg,
-        base64_encoded_image=f"{base64_data}",
+        rot_deg=xtgeo_surf.rotation,
+        mesh_data=orjson.dumps(float32values),
     )
diff --git a/backend/src/fastapi_app/routers/surface/schemas.py b/backend/src/fastapi_app/routers/surface/schemas.py
index 7e6c40912..83ea6af21 100644
--- a/backend/src/fastapi_app/routers/surface/schemas.py
+++ b/backend/src/fastapi_app/routers/surface/schemas.py
@@ -1,5 +1,5 @@
 from enum import Enum
-from typing import List, Tuple, Dict
+from typing import List
 
 from pydantic import BaseModel
 
@@ -27,11 +27,13 @@ class StaticSurfaceDirectory(BaseModel):
 
 
 class SurfaceData(BaseModel):
-    x_min: float
-    x_max: float
-    y_min: float
-    y_max: float
+    x_ori: float
+    y_ori: float
+    x_count: int
+    y_count: int
+    x_inc: float
+    y_inc: float
     val_min: float
     val_max: float
     rot_deg: float
-    base64_encoded_image: str
+    mesh_data: str
diff --git a/backend/src/services/utils/surface_to_float32.py b/backend/src/services/utils/surface_to_float32.py
new file mode 100644
index 000000000..c85ddfd80
--- /dev/null
+++ b/backend/src/services/utils/surface_to_float32.py
@@ -0,0 +1,17 @@
+from typing import List
+
+import numpy as np
+import xtgeo
+
+
+def surface_to_float32_array(surface: xtgeo.RegularSurface) -> List[float]:
+    values = surface.values.astype(np.float32)
+    values.fill_value = np.nan
+    values = np.ma.filled(values)
+
+    # Rotate 90 deg left.
+    # This will cause the width of to run along the X axis
+    # and height of along Y axis (starting from bottom.)
+    values = np.rot90(values)
+
+    return values.flatten().tolist()
diff --git a/frontend-prod.Dockerfile b/frontend-prod.Dockerfile
index a484c5abb..11de7b20f 100644
--- a/frontend-prod.Dockerfile
+++ b/frontend-prod.Dockerfile
@@ -14,6 +14,9 @@ COPY --chown=node:node . /usr/src/app
 WORKDIR /usr/src/app/frontend
 ENV NODE_ENV production
 
+# Building wsc requires increasing memory allocated to Node
+ENV NODE_OPTIONS="--max-old-space-size=4096"
+
 RUN npm ci --ignore-scripts --include=dev && npm run build && node compress_static.cjs
 
 ###########################################
diff --git a/frontend/src/api/models/SurfaceData.ts b/frontend/src/api/models/SurfaceData.ts
index 96ca0fb73..a5a767366 100644
--- a/frontend/src/api/models/SurfaceData.ts
+++ b/frontend/src/api/models/SurfaceData.ts
@@ -3,13 +3,15 @@
 /* eslint-disable */
 
 export type SurfaceData = {
-    x_min: number;
-    x_max: number;
-    y_min: number;
-    y_max: number;
+    x_ori: number;
+    y_ori: number;
+    x_count: number;
+    y_count: number;
+    x_inc: number;
+    y_inc: number;
     val_min: number;
     val_max: number;
     rot_deg: number;
-    base64_encoded_image: string;
+    mesh_data: string;
 };
 
diff --git a/frontend/src/modules/Map/MapView.tsx b/frontend/src/modules/Map/MapView.tsx
index 32bac7ad3..c86d0b11b 100644
--- a/frontend/src/modules/Map/MapView.tsx
+++ b/frontend/src/modules/Map/MapView.tsx
@@ -6,7 +6,7 @@ import { useElementSize } from "@lib/hooks/useElementSize";
 import { useSurfaceDataQueryByAddress } from "./MapQueryHooks";
 import { MapState } from "./MapState";
 import { makeSurfAddrString } from "./SurfAddr";
-
+import {SubsurfaceViewer} from "@webviz/subsurface-components"
 //-----------------------------------------------------------------------------------------------------------
 export function MapView({ moduleContext }: ModuleFCProps<MapState>) {
     const wrapperDivRef = React.useRef<HTMLDivElement>(null);
@@ -22,41 +22,48 @@ export function MapView({ moduleContext }: ModuleFCProps<MapState>) {
 
     const surfDataQuery = useSurfaceDataQueryByAddress(surfAddr);
     const surfAddrAsAny = surfAddr as any;
+    if (surfDataQuery.data) {
+        return (
+        <div className="relative w-full h-full flex flex-col">
+            <SubsurfaceViewer 
+                id="deckgl" 
+                layers={[   {
+                    "@@type": "MapLayer",
+                    "id": "mesh-layer",
+                    "meshData": JSON.parse(surfDataQuery.data?.mesh_data),
+                    "frame": {
+                      "origin": [
+                        surfDataQuery.data?.x_ori,
+                        surfDataQuery.data?.y_ori
+                      ],
+                      "count": [
+                        surfDataQuery.data?.x_count,
+                        surfDataQuery.data?.y_count
+                      ],
+                      "increment": [
+                        surfDataQuery.data?.x_inc,
+                        surfDataQuery.data?.y_inc
+                      ],
+                      "rotDeg": surfDataQuery.data?.rot_deg,
+                      
+                    },
+                    
+                    "contours": [
+                      0,
+                      100
+                    ],
+                    "isContoursDepth": true,
+                    "gridLines": false,
+                    "material": true,
+                    "smoothShading": true,
+                    "colorMapName": "Physics"
+                  }, 
+                ]}
+            />
+           
 
-    return (
-        <div className="w-full h-full flex flex-col">
-            <div>
-                addressType: {surfAddr?.addressType ?? "---"}
-                <br />
-                caseUuid: {surfAddr?.caseUuid ?? "---"}
-                <br />
-                ensembleName: {surfAddr?.ensemble ?? "---"}
-                <br />
-                surfaceName: {surfAddr?.name ?? "---"}
-                <br />
-                surfaceAttribute: {surfAddr?.attribute ?? "---"}
-                <br />
-                timeOrInterval: {surfAddrAsAny?.timeOrInterval ?? "---"}
-                <br />
-                realizationNum: {surfAddrAsAny?.realizationNum ?? "---"}
-                <br />
-                statisticFunction: {surfAddrAsAny?.statisticFunction ?? "Single realization"}
-            </div>
-            <br />
-            min x,y: {surfDataQuery.data?.x_min.toFixed(2)}, {surfDataQuery.data?.y_min.toFixed(2)}
-            <br />
-            min/max val: {surfDataQuery.data?.val_min.toFixed(2)}, {surfDataQuery.data?.val_max.toFixed(2)}
-            <br />
-            rot: {surfDataQuery.data?.rot_deg.toFixed(2)}
-            <br />
-            renderCount: {renderCount.current}
-            <div className="flex-grow h-0" ref={wrapperDivRef}>
-                <img
-                    alt={surfDataQuery.status}
-                    src={surfDataQuery.data ? `data:image/png;base64,${surfDataQuery.data.base64_encoded_image}` : ""}
-                    style={{ objectFit: "contain", width: wrapperDivSize.width, height: wrapperDivSize.height }}
-                ></img>
-            </div>
         </div>
     );
+            }
+    return (<div/>)
 }