diff --git a/backend_py/primary/primary/routers/well/converters.py b/backend_py/primary/primary/routers/well/converters.py
index f6d01f078..d00be3646 100644
--- a/backend_py/primary/primary/routers/well/converters.py
+++ b/backend_py/primary/primary/routers/well/converters.py
@@ -120,6 +120,9 @@ def convert_wellbore_perforation_to_schema(
 def convert_wellbore_log_curve_header_to_schema(
     wellbore_log_curve_header: WellboreLogCurveHeader,
 ) -> schemas.WellboreLogCurveHeader:
+    if wellbore_log_curve_header.log_name is None:
+        raise AttributeError("Missing log name is not allowed")
+
     return schemas.WellboreLogCurveHeader(
         logName=wellbore_log_curve_header.log_name,
         curveName=wellbore_log_curve_header.curve_name,
@@ -131,6 +134,9 @@ def convert_wellbore_log_curve_data_to_schema(
     wellbore_log_curve_data: WellboreLogCurveData,
 ) -> schemas.WellboreLogCurveData:
     return schemas.WellboreLogCurveData(
+        name=wellbore_log_curve_data.name,
+        unit=wellbore_log_curve_data.unit,
+        curveUnitDesc=wellbore_log_curve_data.curve_unit_desc,
         indexMin=wellbore_log_curve_data.index_min,
         indexMax=wellbore_log_curve_data.index_max,
         minCurveValue=wellbore_log_curve_data.min_curve_value,
diff --git a/backend_py/primary/primary/routers/well/router.py b/backend_py/primary/primary/routers/well/router.py
index 9d8e6c415..fdc35af6a 100644
--- a/backend_py/primary/primary/routers/well/router.py
+++ b/backend_py/primary/primary/routers/well/router.py
@@ -216,6 +216,8 @@ async def get_wellbore_log_curve_headers(
     return [
         converters.convert_wellbore_log_curve_header_to_schema(wellbore_log_curve_header)
         for wellbore_log_curve_header in wellbore_log_curve_headers
+        # Missing log name implies garbage data, so we simply drop them
+        if wellbore_log_curve_header.log_name is not None
     ]
 
 
diff --git a/backend_py/primary/primary/routers/well/schemas.py b/backend_py/primary/primary/routers/well/schemas.py
index 8427292d0..783a1ece4 100644
--- a/backend_py/primary/primary/routers/well/schemas.py
+++ b/backend_py/primary/primary/routers/well/schemas.py
@@ -103,16 +103,19 @@ class WellborePerforation(BaseModel):
 class WellboreLogCurveHeader(BaseModel):
     logName: str
     curveName: str
-    curveUnit: str
+    curveUnit: str | None
 
 
 class WellboreLogCurveData(BaseModel):
+    name: str
     indexMin: float
     indexMax: float
     minCurveValue: float
     maxCurveValue: float
-    dataPoints: list[list[float | None]]
-    curveAlias: str
-    curveDescription: str
+    curveAlias: str | None
+    curveDescription: str | None
     indexUnit: str
-    noDataValue: float
+    noDataValue: float | None
+    unit: str
+    curveUnitDesc: str | None
+    dataPoints: list[list[float | None]]
diff --git a/backend_py/primary/primary/services/ssdl_access/types.py b/backend_py/primary/primary/services/ssdl_access/types.py
index 7e0660d94..84f07a0cf 100644
--- a/backend_py/primary/primary/services/ssdl_access/types.py
+++ b/backend_py/primary/primary/services/ssdl_access/types.py
@@ -1,3 +1,4 @@
+from typing import Any
 from pydantic import BaseModel
 
 
@@ -34,18 +35,33 @@ class WellborePerforation(BaseModel):
 
 
 class WellboreLogCurveHeader(BaseModel):
-    log_name: str
+    log_name: str | None
     curve_name: str
-    curve_unit: str
+    curve_unit: str | None
+
+    # Defining a hash-function to facilitate usage in Sets
+    def __hash__(self) -> int:
+        # No globally unique field, but curve-name should be unique (per wellbore)
+        return hash(self.curve_name + (self.log_name or "N/A"))
+
+    def __eq__(self, other: Any) -> bool:
+        if not isinstance(other, WellboreLogCurveHeader):
+            # delegate to the other item in the comparison
+            return NotImplemented
+
+        return (self.curve_name, self.log_name) == (other.curve_name, other.log_name)
 
 
 class WellboreLogCurveData(BaseModel):
+    name: str
     index_min: float
     index_max: float
     min_curve_value: float
     max_curve_value: float
-    DataPoints: list[list[float | None]]
-    curve_alias: str
-    curve_description: str
+    curve_alias: str | None
+    curve_description: str | None
     index_unit: str
-    no_data_value: float
+    no_data_value: float | None
+    unit: str
+    curve_unit_desc: str | None
+    DataPoints: list[list[float | None]]
diff --git a/backend_py/primary/primary/services/ssdl_access/well_access.py b/backend_py/primary/primary/services/ssdl_access/well_access.py
index acdb4542f..da17dc28e 100644
--- a/backend_py/primary/primary/services/ssdl_access/well_access.py
+++ b/backend_py/primary/primary/services/ssdl_access/well_access.py
@@ -51,10 +51,12 @@ async def get_log_curve_headers_for_wellbore(self, wellbore_uuid: str) -> List[t
         endpoint = f"WellLog/{wellbore_uuid}"
         ssdl_data = await fetch_from_ssdl(access_token=self._ssdl_token, endpoint=endpoint, params=None)
         try:
-            result = [types.WellboreLogCurveHeader.model_validate(log_curve) for log_curve in ssdl_data]
+            # This endpoint is a bit weird, and MIGHT return duplicates which, as far as I can tell, are the exact same. Using a set to drop duplicates. See data model for comparator
+            result_set = {types.WellboreLogCurveHeader.model_validate(log_curve) for log_curve in ssdl_data}
+
         except ValidationError as error:
             raise InvalidDataError(f"Invalid log curve headers for wellbore {wellbore_uuid}", Service.SSDL) from error
-        return result
+        return list(result_set)
 
     async def get_log_curve_headers_for_field(self, field_uuid: str) -> List[types.WellboreLogCurveHeader]:
         endpoint = f"WellLog/field/{field_uuid}"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4d40595bf..eabd00690 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
                 "@webviz/group-tree-plot": "^1.1.14",
                 "@webviz/subsurface-viewer": "^0.25.2",
                 "@webviz/well-completions-plot": "^1.4.1",
+                "@webviz/well-log-viewer": "^1.12.7",
                 "animate.css": "^4.1.1",
                 "axios": "^1.6.5",
                 "culori": "^3.2.0",
@@ -890,6 +891,19 @@
                 "@equinor/videx-linear-algebra": "^1.0.7"
             }
         },
+        "node_modules/@equinor/videx-wellog": {
+            "version": "0.10.3",
+            "resolved": "https://registry.npmjs.org/@equinor/videx-wellog/-/videx-wellog-0.10.3.tgz",
+            "integrity": "sha512-twcQXeXDLcl5szLJ3MDDBbR2ehg0uTgHmK4FTqDzfAGP6y6jVowxoz2V3vOzS5nsk63QsySiEuWNxYMpLwQJmQ==",
+            "dependencies": {
+                "@equinor/videx-math": "^1.1.0",
+                "d3-array": "^3.2.0",
+                "d3-scale": "^4.0.2",
+                "d3-selection": "^3.0.0",
+                "d3-shape": "^3.1.0",
+                "d3-zoom": "^3.0.0"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.19.11",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
@@ -5067,6 +5081,23 @@
                 "react-dom": "^18.0.0"
             }
         },
+        "node_modules/@webviz/well-log-viewer": {
+            "version": "1.12.7",
+            "resolved": "https://registry.npmjs.org/@webviz/well-log-viewer/-/well-log-viewer-1.12.7.tgz",
+            "integrity": "sha512-evCrmtRRIBeQfHDSQmlQERBllCzXXR9mAVnK+sKwy4IH0i5enOEf6BpoVLmoA0eHLlum30H+tj3rEha2xT5ZFg==",
+            "dependencies": {
+                "@emerson-eps/color-tables": "^0.4.71",
+                "@equinor/videx-wellog": "^0.10.0",
+                "@webviz/wsc-common": "*",
+                "convert-units": "^2.3.4",
+                "d3": "^7.8.2"
+            },
+            "peerDependencies": {
+                "@mui/material": "^5.11",
+                "react": "^17 || ^18",
+                "react-dom": "^17 || ^18"
+            }
+        },
         "node_modules/@webviz/wsc-common": {
             "version": "0.0.1-alpha.1",
             "resolved": "https://registry.npmjs.org/@webviz/wsc-common/-/wsc-common-0.0.1-alpha.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c817cbfa3..a4bc0ac9a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
         "@webviz/group-tree-plot": "^1.1.14",
         "@webviz/subsurface-viewer": "^0.25.2",
         "@webviz/well-completions-plot": "^1.4.1",
+        "@webviz/well-log-viewer": "^1.12.7",
         "animate.css": "^4.1.1",
         "axios": "^1.6.5",
         "culori": "^3.2.0",
diff --git a/frontend/src/api/models/WellboreLogCurveData.ts b/frontend/src/api/models/WellboreLogCurveData.ts
index d8d952bd4..81f8170df 100644
--- a/frontend/src/api/models/WellboreLogCurveData.ts
+++ b/frontend/src/api/models/WellboreLogCurveData.ts
@@ -3,14 +3,17 @@
 /* tslint:disable */
 /* eslint-disable */
 export type WellboreLogCurveData = {
+    name: string;
     indexMin: number;
     indexMax: number;
     minCurveValue: number;
     maxCurveValue: number;
-    dataPoints: Array<Array<(number | null)>>;
-    curveAlias: string;
-    curveDescription: string;
+    curveAlias: (string | null);
+    curveDescription: (string | null);
     indexUnit: string;
-    noDataValue: number;
+    noDataValue: (number | null);
+    unit: string;
+    curveUnitDesc: (string | null);
+    dataPoints: Array<Array<(number | null)>>;
 };
 
diff --git a/frontend/src/api/models/WellboreLogCurveHeader.ts b/frontend/src/api/models/WellboreLogCurveHeader.ts
index 12049f97e..3d804b915 100644
--- a/frontend/src/api/models/WellboreLogCurveHeader.ts
+++ b/frontend/src/api/models/WellboreLogCurveHeader.ts
@@ -5,6 +5,6 @@
 export type WellboreLogCurveHeader = {
     logName: string;
     curveName: string;
-    curveUnit: string;
+    curveUnit: (string | null);
 };
 
diff --git a/frontend/src/framework/AtomStoreMaster.ts b/frontend/src/framework/AtomStoreMaster.ts
index 43356331a..7f8a40932 100644
--- a/frontend/src/framework/AtomStoreMaster.ts
+++ b/frontend/src/framework/AtomStoreMaster.ts
@@ -1,5 +1,7 @@
 import { WritableAtom, createStore } from "jotai";
 
+import { CurrentModuleInstanceIdAtom } from "./GlobalAtoms";
+
 export type AtomStore = ReturnType<typeof createStore>;
 
 export class AtomStoreMaster {
@@ -16,6 +18,8 @@ export class AtomStoreMaster {
 
     makeAtomStoreForModuleInstance(moduleInstanceId: string) {
         const atomStore = createStore();
+        // Make the module's own id available within each module's store
+        atomStore.set(CurrentModuleInstanceIdAtom, moduleInstanceId);
         this._atomStores.set(moduleInstanceId, atomStore);
 
         const atomStates = Array.from(this._atomStates.entries());
diff --git a/frontend/src/framework/GlobalAtoms.ts b/frontend/src/framework/GlobalAtoms.ts
index 421bd4320..443e02abc 100644
--- a/frontend/src/framework/GlobalAtoms.ts
+++ b/frontend/src/framework/GlobalAtoms.ts
@@ -8,6 +8,10 @@ import { RealizationFilterSet } from "./RealizationFilterSet";
 import { EnsembleRealizationFilterFunction } from "./WorkbenchSession";
 import { atomWithCompare } from "./utils/atomUtils";
 
+/** A module's instance-id. Available in the jotai-store of each module, otherwise null */
+// ? Should this one be moved to `AtomStoreMaster.ts`?
+export const CurrentModuleInstanceIdAtom = atom<string | null>(null);
+
 export const EnsembleSetAtom = atomWithCompare<EnsembleSet>(new EnsembleSet([]), isEqual);
 
 /**
diff --git a/frontend/src/framework/Module.tsx b/frontend/src/framework/Module.tsx
index dc81aaee0..46bfd1888 100644
--- a/frontend/src/framework/Module.tsx
+++ b/frontend/src/framework/Module.tsx
@@ -15,6 +15,8 @@ import { WorkbenchServices } from "./WorkbenchServices";
 import { WorkbenchSession } from "./WorkbenchSession";
 import { WorkbenchSettings } from "./WorkbenchSettings";
 
+export type OnInstanceUnloadFunc = (instanceId: string) => void;
+
 export enum ModuleCategory {
     MAIN = "main",
     SUB = "sub",
@@ -105,6 +107,7 @@ export interface ModuleOptions {
     description?: string;
     channelDefinitions?: ChannelDefinition[];
     channelReceiverDefinitions?: ChannelReceiverDefinition[];
+    onUnloadInstanceFunc?: OnInstanceUnloadFunc;
 }
 
 export class Module<TInterfaceTypes extends ModuleInterfaceTypes> {
@@ -127,6 +130,7 @@ export class Module<TInterfaceTypes extends ModuleInterfaceTypes> {
     private _workbench: Workbench | null = null;
     private _syncableSettingKeys: SyncSettingKey[];
     private _drawPreviewFunc: DrawPreviewFunc | null;
+    private _onUnloadInstanceFunc: OnInstanceUnloadFunc | null;
     private _description: string | null;
     private _channelDefinitions: ChannelDefinition[] | null;
     private _channelReceiverDefinitions: ChannelReceiverDefinition[] | null;
@@ -143,6 +147,7 @@ export class Module<TInterfaceTypes extends ModuleInterfaceTypes> {
         this.settingsFC = () => <div>Not defined</div>;
         this._syncableSettingKeys = options.syncableSettingKeys ?? [];
         this._drawPreviewFunc = options.drawPreviewFunc ?? null;
+        this._onUnloadInstanceFunc = options.onUnloadInstanceFunc ?? null;
         this._description = options.description ?? null;
         this._channelDefinitions = options.channelDefinitions ?? null;
         this._channelReceiverDefinitions = options.channelReceiverDefinitions ?? null;
@@ -242,6 +247,10 @@ export class Module<TInterfaceTypes extends ModuleInterfaceTypes> {
         return instance;
     }
 
+    onInstanceUnload(instanceId: string) {
+        this._onUnloadInstanceFunc?.(instanceId);
+    }
+
     private setImportState(state: ImportState): void {
         this._importState = state;
         this._moduleInstances.forEach((instance) => {
diff --git a/frontend/src/framework/ModuleInstance.ts b/frontend/src/framework/ModuleInstance.ts
index 968e56d2f..f531aa8ac 100644
--- a/frontend/src/framework/ModuleInstance.ts
+++ b/frontend/src/framework/ModuleInstance.ts
@@ -347,6 +347,10 @@ export class ModuleInstance<TInterfaceTypes extends ModuleInterfaceTypes> {
     getInitialSettings(): InitialSettings | null {
         return this._initialSettings;
     }
+
+    unload() {
+        this._module.onInstanceUnload(this._id);
+    }
 }
 
 export function useModuleInstanceTopicValue<T extends ModuleInstanceTopic>(
diff --git a/frontend/src/framework/ModuleRegistry.ts b/frontend/src/framework/ModuleRegistry.ts
index c6fdc7766..e3898c270 100644
--- a/frontend/src/framework/ModuleRegistry.ts
+++ b/frontend/src/framework/ModuleRegistry.ts
@@ -1,5 +1,12 @@
 import { ChannelDefinition, ChannelReceiverDefinition } from "./DataChannelTypes";
-import { InterfaceEffects, Module, ModuleCategory, ModuleDevState, ModuleInterfaceTypes } from "./Module";
+import {
+    InterfaceEffects,
+    Module,
+    ModuleCategory,
+    ModuleDevState,
+    ModuleInterfaceTypes,
+    OnInstanceUnloadFunc,
+} from "./Module";
 import { ModuleDataTagId } from "./ModuleDataTags";
 import { DrawPreviewFunc } from "./Preview";
 import { SyncSettingKey } from "./SyncSettings";
@@ -17,6 +24,7 @@ export type RegisterModuleOptions = {
     channelReceiverDefinitions?: ChannelReceiverDefinition[];
     preview?: DrawPreviewFunc;
     description?: string;
+    onUnloadInstance?: OnInstanceUnloadFunc;
 };
 
 export class ModuleNotFoundError extends Error {
@@ -49,6 +57,7 @@ export class ModuleRegistry {
             channelDefinitions: options.channelDefinitions,
             channelReceiverDefinitions: options.channelReceiverDefinitions,
             drawPreviewFunc: options.preview,
+            onUnloadInstanceFunc: options.onUnloadInstance,
             description: options.description,
         });
         this._registeredModules[options.moduleName] = module;
diff --git a/frontend/src/framework/Workbench.ts b/frontend/src/framework/Workbench.ts
index 71cbfe105..424813de4 100644
--- a/frontend/src/framework/Workbench.ts
+++ b/frontend/src/framework/Workbench.ts
@@ -182,8 +182,12 @@ export class Workbench {
     }
 
     removeModuleInstance(moduleInstanceId: string): void {
-        const manager = this.getModuleInstance(moduleInstanceId)?.getChannelManager();
-        if (manager) {
+        const moduleInstance = this.getModuleInstance(moduleInstanceId);
+
+        if (moduleInstance) {
+            const manager = moduleInstance.getChannelManager();
+
+            moduleInstance.unload();
             manager.unregisterAllChannels();
             manager.unregisterAllReceivers();
         }
diff --git a/frontend/src/framework/utils/arrays.ts b/frontend/src/framework/utils/arrays.ts
new file mode 100644
index 000000000..1ee291e9a
--- /dev/null
+++ b/frontend/src/framework/utils/arrays.ts
@@ -0,0 +1,14 @@
+/**
+ * Util method to do an immutable item move in an array
+ * @param array The array to move items in
+ * @param from The index of the first item being moved
+ * @param to The index the item(s) should be moved to
+ * @param moveAmt The amount of items (from the start-index) that should be moved
+ * @returns A copy of the original array, with it's items moved accordingly
+ */
+export function arrayMove<t>(array: t[], from: number, to: number, moveAmt = 1): t[] {
+    const newArrray = [...array];
+    const movedItems = newArrray.splice(from, moveAmt);
+
+    return newArrray.toSpliced(to, 0, ...movedItems);
+}
diff --git a/frontend/src/framework/utils/atomUtils.ts b/frontend/src/framework/utils/atomUtils.ts
index bfbf784ae..247fbd572 100644
--- a/frontend/src/framework/utils/atomUtils.ts
+++ b/frontend/src/framework/utils/atomUtils.ts
@@ -1,3 +1,4 @@
+import { CurrentModuleInstanceIdAtom } from "@framework/GlobalAtoms";
 import { DefaultError, QueryClient, QueryKey, QueryObserverOptions, QueryObserverResult } from "@tanstack/query-core";
 
 import { Atom, Getter, atom } from "jotai";
@@ -57,3 +58,54 @@ export function atomWithQueries<
         return results as TCombinedResult;
     });
 }
+
+/**
+ * Creates an writeable atom that persists it's value in localstorage, but keeps it unique per module instance. **Note: must only be used within a module instances own store**
+ * @param storageKey Prefix for the key. Should be unique among a module's atoms. Actual storage key will be: `<prefix>:<moduleInstanceId>`
+ * @param initialValue Initial atom value
+ * @returns A get/set atom
+ */
+export function atomWithModuleInstanceStorage<T>(storageKey: string, initialValue: T) {
+    // simple atom, needed to trigger new lookups
+    const instanceValueAtom = atom<T | null>(null);
+
+    return atom<T, [T], void>(
+        (get) => {
+            const instanceId = getIntanceId(get);
+            const fullStorageKey = makeInstanceStorageKey(instanceId, storageKey);
+            const instanceValue = get(instanceValueAtom);
+            const storedValue = localStorage.getItem(fullStorageKey);
+
+            if (instanceValue !== null) return instanceValue;
+            else if (storedValue !== null) return JSON.parse(storedValue);
+            else return initialValue;
+        },
+        (get, set, newVal: T) => {
+            const instanceId = getIntanceId(get);
+            const fullStorageKey = makeInstanceStorageKey(instanceId, storageKey);
+
+            localStorage.setItem(fullStorageKey, JSON.stringify(newVal));
+            set(instanceValueAtom, newVal);
+        }
+    );
+}
+
+export function clearModuleInstanceStorage(instanceId: string, key: string) {
+    const fullKey = makeInstanceStorageKey(instanceId, key);
+    localStorage.removeItem(fullKey);
+}
+
+function makeInstanceStorageKey(instanceId: string, key: string): string {
+    // ! Be mindful about changing this; existing stored values will dissapear!
+    return `${key}:${instanceId}`;
+}
+
+function getIntanceId(get: Getter): string {
+    const id = get(CurrentModuleInstanceIdAtom);
+
+    if (id === null) {
+        throw new Error("Module instance not set. Make sure this atom is only used within a module storage");
+    }
+
+    return id;
+}
diff --git a/frontend/src/lib/components/Dropdown/dropdown.tsx b/frontend/src/lib/components/Dropdown/dropdown.tsx
index 441b6342c..ef98f6c70 100644
--- a/frontend/src/lib/components/Dropdown/dropdown.tsx
+++ b/frontend/src/lib/components/Dropdown/dropdown.tsx
@@ -20,6 +20,7 @@ export type DropdownOption<TValue = string> = {
     adornment?: React.ReactNode;
     hoverText?: string;
     disabled?: boolean;
+    group?: string;
 };
 
 export type DropdownProps<TValue = string> = {
@@ -32,10 +33,11 @@ export type DropdownProps<TValue = string> = {
     width?: string | number;
     showArrows?: boolean;
     debounceTimeMs?: number;
+    placeholder?: string;
 } & BaseComponentProps;
 
-const minHeight = 200;
-const optionHeight = 32;
+const MIN_HEIGHT = 200;
+const OPTION_HEIGHT = 32;
 
 type DropdownRect = {
     left?: number;
@@ -46,9 +48,36 @@ type DropdownRect = {
     minWidth: number;
 };
 
+type OptionListItem<TValue> =
+    | {
+          type: "option";
+          actualIndex: number;
+          content: DropdownOption<TValue>;
+      }
+    | {
+          type: "separator";
+          actualIndex: never;
+          content: string;
+      };
+
 const noMatchingOptionsText = "No matching options";
 const noOptionsText = "No options";
 
+function makeOptionListItems<TValue>(options: DropdownOption<TValue>[]): OptionListItem<TValue>[] {
+    const optionsWithSeperators: OptionListItem<TValue>[] = options.flatMap((option, index) => {
+        const optionItem = { type: "option", actualIndex: index, content: option } as OptionListItem<TValue>;
+        const seperatorItem = { type: "separator", content: option.group } as OptionListItem<TValue>;
+
+        if (option.group && option.group !== options[index - 1]?.group) {
+            return [seperatorItem, optionItem];
+        } else {
+            return [optionItem];
+        }
+    });
+
+    return optionsWithSeperators;
+}
+
 export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     const { onChange } = props;
 
@@ -63,9 +92,13 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     const [filter, setFilter] = React.useState<string | null>(null);
     const [selection, setSelection] = React.useState<TValue | null>(props.value ?? null);
     const [prevValue, setPrevValue] = React.useState<TValue | null>(props.value ?? null);
-    const [prevFilteredOptions, setPrevFilteredOptions] = React.useState<DropdownOption<TValue>[]>(props.options);
+    const [prevFilteredOptionsWithSeparators, setPrevFilteredOptionsWithSeparators] = React.useState<
+        OptionListItem<TValue>[]
+    >(makeOptionListItems(props.options));
     const [selectionIndex, setSelectionIndex] = React.useState<number>(-1);
-    const [filteredOptions, setFilteredOptions] = React.useState<DropdownOption<TValue>[]>(props.options);
+    const [filteredOptionsWithSeparators, setFilteredOptionsWithSeparators] = React.useState<OptionListItem<TValue>[]>(
+        makeOptionListItems(props.options)
+    );
     const [optionIndexWithFocus, setOptionIndexWithFocus] = React.useState<number>(-1);
     const [startIndex, setStartIndex] = React.useState<number>(0);
     const [keyboardFocus, setKeyboardFocus] = React.useState<boolean>(false);
@@ -78,11 +111,13 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
 
     const setOptionIndexWithFocusToCurrentSelection = React.useCallback(
         function handleFilteredOptionsChange() {
-            const index = filteredOptions.findIndex((option) => isEqual(option.value, selection));
+            const index = filteredOptionsWithSeparators.findIndex(
+                (option) => option.type === "option" && isEqual(option.content.value, selection)
+            );
             setSelectionIndex(index);
             setOptionIndexWithFocus(index);
         },
-        [filteredOptions, selection]
+        [filteredOptionsWithSeparators, selection]
     );
 
     if (!isEqual(prevValue, valueWithDefault)) {
@@ -91,12 +126,12 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
         setPrevValue(valueWithDefault);
     }
 
-    if (!isEqual(prevFilteredOptions, filteredOptions)) {
+    if (!isEqual(prevFilteredOptionsWithSeparators, filteredOptionsWithSeparators)) {
         setOptionIndexWithFocusToCurrentSelection();
-        setPrevFilteredOptions(filteredOptions);
+        setPrevFilteredOptionsWithSeparators(filteredOptionsWithSeparators);
     }
 
-    React.useEffect(function handleMount() {
+    React.useEffect(function mountEffect() {
         return function handleUnmount() {
             if (debounceTimerRef.current) {
                 clearTimeout(debounceTimerRef.current);
@@ -105,7 +140,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     }, []);
 
     React.useEffect(
-        function handleOptionsChange() {
+        function handleOptionsChangeEffect() {
             function handleMouseDown(event: MouseEvent) {
                 if (
                     dropdownRef.current &&
@@ -115,7 +150,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                 ) {
                     setDropdownVisible(false);
                     setFilter(null);
-                    setFilteredOptions(props.options);
+                    setFilteredOptionsWithSeparators(makeOptionListItems(props.options));
                     setOptionIndexWithFocus(-1);
                 }
             }
@@ -130,7 +165,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     );
 
     React.useEffect(
-        function updateDropdownRectWidth() {
+        function updateDropdownRectWidthEffect() {
             let longestOptionWidth = props.options.reduce((prev, current) => {
                 const labelWidth = getTextWidthWithFont(current.label, "Equinor", 1);
                 const adornmentWidth = current.adornment ? convertRemToPixels((5 + 2) / 4) : 0;
@@ -151,33 +186,38 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
             setDropdownRect((prev) => ({ ...prev, width: longestOptionWidth + 32 }));
 
             const newFilteredOptions = props.options.filter((option) => option.label.includes(filter || ""));
-            setFilteredOptions(newFilteredOptions);
+            setFilteredOptionsWithSeparators(makeOptionListItems(newFilteredOptions));
         },
         [props.options, filter]
     );
 
     React.useEffect(
-        function computeDropdownRect() {
+        function computeDropdownRectEffect() {
             if (dropdownVisible) {
                 const inputClientBoundingRect = inputRef.current?.getBoundingClientRect();
                 const bodyClientBoundingRect = document.body.getBoundingClientRect();
 
-                const height = Math.min(minHeight, Math.max(filteredOptions.length * optionHeight, optionHeight)) + 2;
+                const preferredHeight =
+                    Math.min(
+                        MIN_HEIGHT,
+                        Math.max(filteredOptionsWithSeparators.length * OPTION_HEIGHT, OPTION_HEIGHT)
+                    ) + 2;
 
                 if (inputClientBoundingRect && bodyClientBoundingRect) {
                     const newDropdownRect: DropdownRect = {
                         minWidth: inputBoundingRect.width,
                         width: dropdownRect.width,
-                        height: height,
+                        height: preferredHeight,
                     };
 
-                    if (inputClientBoundingRect.y + inputBoundingRect.height + height > window.innerHeight) {
+                    if (inputClientBoundingRect.y + inputBoundingRect.height + preferredHeight > window.innerHeight) {
+                        const height = Math.min(inputClientBoundingRect.y, preferredHeight);
                         newDropdownRect.top = inputClientBoundingRect.y - height;
-                        newDropdownRect.height = Math.min(height, inputClientBoundingRect.y);
+                        newDropdownRect.height = height;
                     } else {
                         newDropdownRect.top = inputClientBoundingRect.y + inputBoundingRect.height;
                         newDropdownRect.height = Math.min(
-                            height,
+                            preferredHeight,
                             window.innerHeight - inputClientBoundingRect.y - inputBoundingRect.height
                         );
                     }
@@ -194,8 +234,10 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                         Math.max(
                             0,
                             Math.round(
-                                (filteredOptions.findIndex((option) => option.value === selection) || 0) -
-                                    height / optionHeight / 2
+                                (filteredOptionsWithSeparators.findIndex(
+                                    (option) => option.type === "option" && option.content.value === selection
+                                ) || 0) -
+                                    preferredHeight / OPTION_HEIGHT / 2
                             )
                         )
                     );
@@ -206,7 +248,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
         [
             inputBoundingRect,
             dropdownVisible,
-            filteredOptions,
+            filteredOptionsWithSeparators,
             selection,
             dropdownRect.width,
             props.options,
@@ -242,7 +284,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
             setSelectionIndex(props.options.findIndex((option) => isEqual(option.value, value)));
             setDropdownVisible(false);
             setFilter(null);
-            setFilteredOptions(props.options);
+            setFilteredOptionsWithSeparators(makeOptionListItems(props.options));
             setOptionIndexWithFocus(-1);
 
             handleOnChange(value);
@@ -253,14 +295,14 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
             setSelectionIndex,
             setDropdownVisible,
             setFilter,
-            setFilteredOptions,
+            setFilteredOptionsWithSeparators,
             setSelection,
             handleOnChange,
         ]
     );
 
     React.useEffect(
-        function addKeyDownEventHandler() {
+        function addKeyDownEventHandlerEffect() {
             function handleKeyDown(e: KeyboardEvent) {
                 if (e.key === "Escape") {
                     setDropdownVisible(false);
@@ -269,35 +311,63 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                     inputRef.current?.blur();
                 }
                 if (dropdownRef.current) {
-                    const currentStartIndex = Math.round(dropdownRef.current?.scrollTop / optionHeight);
+                    const currentStartIndex = Math.round(dropdownRef.current?.scrollTop / OPTION_HEIGHT);
                     if (dropdownVisible) {
                         if (e.key === "ArrowUp") {
                             e.preventDefault();
-                            const adjustedOptionIndexWithFocus =
+                            let adjustedOptionIndexWithFocus =
                                 optionIndexWithFocus === -1 ? selectionIndex : optionIndexWithFocus;
-                            const newIndex = Math.max(0, adjustedOptionIndexWithFocus - 1);
+                            adjustedOptionIndexWithFocus--;
+
+                            // Make sure we are focusing on an option and not a separator
+                            const item = filteredOptionsWithSeparators[adjustedOptionIndexWithFocus];
+                            let scrollToTop = false;
+                            if (item && item.type !== "option") {
+                                if (adjustedOptionIndexWithFocus === 0) {
+                                    adjustedOptionIndexWithFocus = 1;
+                                    scrollToTop = true;
+                                } else {
+                                    adjustedOptionIndexWithFocus--;
+                                }
+                            }
+
+                            const newIndex = Math.max(0, adjustedOptionIndexWithFocus);
                             setOptionIndexWithFocus(newIndex);
-                            if (newIndex < currentStartIndex) {
-                                setStartIndex(newIndex);
+                            const newStartIndex = newIndex - (scrollToTop ? 1 : 0);
+                            if (newStartIndex < currentStartIndex) {
+                                setStartIndex(newStartIndex);
                             }
                             setKeyboardFocus(true);
                         }
                         if (e.key === "ArrowDown") {
                             e.preventDefault();
-                            const adjustedOptionIndexWithFocus =
+                            let adjustedOptionIndexWithFocus =
                                 optionIndexWithFocus === -1 ? selectionIndex : optionIndexWithFocus;
-                            const newIndex = Math.min(filteredOptions.length - 1, adjustedOptionIndexWithFocus + 1);
+                            adjustedOptionIndexWithFocus++;
+
+                            // Make sure we are focusing on an option and not a separator
+                            const item = filteredOptionsWithSeparators[adjustedOptionIndexWithFocus];
+                            if (item && item.type !== "option") {
+                                adjustedOptionIndexWithFocus++;
+                            }
+
+                            const newIndex = Math.min(
+                                filteredOptionsWithSeparators.length - 1,
+                                adjustedOptionIndexWithFocus
+                            );
+
                             setOptionIndexWithFocus(newIndex);
-                            if (newIndex >= currentStartIndex + minHeight / optionHeight - 1) {
-                                setStartIndex(Math.max(0, newIndex - minHeight / optionHeight + 1));
+                            if (newIndex >= currentStartIndex + MIN_HEIGHT / OPTION_HEIGHT - 1) {
+                                setStartIndex(Math.max(0, newIndex - MIN_HEIGHT / OPTION_HEIGHT + 1));
                             }
                             setKeyboardFocus(true);
                         }
                         if (e.key === "Enter") {
                             e.preventDefault();
-                            const option = filteredOptions[keyboardFocus ? optionIndexWithFocus : selectionIndex];
-                            if (option && !option.disabled) {
-                                handleOptionClick(option.value);
+                            const option =
+                                filteredOptionsWithSeparators[keyboardFocus ? optionIndexWithFocus : selectionIndex];
+                            if (option && option.type === "option" && !option.content.disabled) {
+                                handleOptionClick(option.content.value);
                             }
                         }
                     }
@@ -312,7 +382,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
         },
         [
             selection,
-            filteredOptions,
+            filteredOptionsWithSeparators,
             dropdownVisible,
             startIndex,
             handleOptionClick,
@@ -330,7 +400,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
         function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
             setFilter(event.target.value);
             const newFilteredOptions = props.options.filter((option) => option.label.includes(event.target.value));
-            setFilteredOptions(newFilteredOptions);
+            setFilteredOptionsWithSeparators(makeOptionListItems(newFilteredOptions));
             setSelectionIndex(newFilteredOptions.findIndex((option) => isEqual(option.value, selection)));
         },
         [props.options, selection]
@@ -357,8 +427,20 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     }
 
     function handleSelectPreviousOption() {
-        const newIndex = Math.max(0, selectionIndex - 1);
-        const newValue = filteredOptions[newIndex].value;
+        let newIndex = Math.max(0, selectionIndex - 1);
+        let item = filteredOptionsWithSeparators[newIndex];
+        if (item && item.type === "separator") {
+            if (newIndex === 0) {
+                newIndex = 1;
+            } else {
+                newIndex--;
+            }
+            item = filteredOptionsWithSeparators[newIndex];
+        }
+        if (!item || item.type !== "option") {
+            throw new Error("Every separator should be followed by an option");
+        }
+        const newValue = item.content.value;
         setSelectionIndex(newIndex);
         setSelection(newValue);
         handleOnChange(newValue);
@@ -366,14 +448,39 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     }
 
     function handleSelectNextOption() {
-        const newIndex = Math.min(filteredOptions.length - 1, selectionIndex + 1);
-        const newValue = filteredOptions[newIndex].value;
+        let newIndex = Math.min(filteredOptionsWithSeparators.length - 1, selectionIndex + 1);
+        let item = filteredOptionsWithSeparators[newIndex];
+        if (item && item.type === "separator") {
+            newIndex++;
+            item = filteredOptionsWithSeparators[newIndex];
+        }
+        if (newIndex >= filteredOptionsWithSeparators.length - 1 || !item || item.type !== "option") {
+            throw new Error("Every separator should be followed by an option");
+        }
+        const newValue = item.content.value;
         setSelectionIndex(newIndex);
         setSelection(newValue);
         handleOnChange(newValue);
         setOptionIndexWithFocus(-1);
     }
 
+    function renderItem(item: OptionListItem<TValue>, index: number) {
+        if (item.type === "separator") {
+            return <SeparatorItem key={`${item.content}-${index}`} text={item.content} />;
+        } else {
+            return (
+                <OptionItem
+                    key={`${item.content.value}`}
+                    isSelected={isEqual(selection, item.content.value)}
+                    isFocused={optionIndexWithFocus === index}
+                    {...item.content}
+                    onSelect={handleOptionClick}
+                    onPointerOver={() => handlePointerOver(index)}
+                />
+            );
+        }
+    }
+
     return (
         <BaseComponent disabled={props.disabled}>
             <div style={{ width: props.width }} id={props.wrapperId} className="flex hover input-comp rounded">
@@ -400,6 +507,7 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                         onChange={handleInputChange}
                         value={makeInputValue()}
                         rounded={props.showArrows ? "left" : "all"}
+                        placeholder={props.placeholder}
                     />
                 </div>
                 {props.showArrows && (
@@ -420,8 +528,8 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                             className={resolveClassNames(
                                 "border border-gray-300 hover:bg-blue-100 rounded-tr cursor-pointer",
                                 {
-                                    "pointer-events-none": selectionIndex >= filteredOptions.length - 1,
-                                    "text-gray-400": selectionIndex >= filteredOptions.length - 1,
+                                    "pointer-events-none": selectionIndex >= filteredOptionsWithSeparators.length - 1,
+                                    "text-gray-400": selectionIndex >= filteredOptionsWithSeparators.length - 1,
                                 }
                             )}
                             onClick={handleSelectNextOption}
@@ -437,63 +545,23 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
                             style={{ ...dropdownRect }}
                             ref={dropdownRef}
                         >
-                            {filteredOptions.length === 0 && (
+                            {filteredOptionsWithSeparators.length === 0 && (
                                 <div className="p-1 flex items-center text-gray-400 select-none">
                                     {props.options.length === 0 || filter === ""
                                         ? noOptionsText
                                         : noMatchingOptionsText}
                                 </div>
                             )}
-                            <Virtualization
-                                direction="vertical"
-                                items={filteredOptions}
-                                itemSize={optionHeight}
-                                containerRef={dropdownRef}
-                                startIndex={startIndex}
-                                renderItem={(option, index) => (
-                                    <div
-                                        key={option.value}
-                                        className={resolveClassNames(
-                                            "flex",
-                                            "items-center",
-                                            "cursor-pointer",
-                                            "select-none",
-                                            "pl-1",
-                                            "pr-1",
-                                            {
-                                                "bg-blue-600 text-white box-border hover:bg-blue-700": isEqual(
-                                                    selection,
-                                                    option.value
-                                                ),
-                                                "bg-blue-100":
-                                                    !isEqual(selection, option.value) && optionIndexWithFocus === index,
-                                                "bg-blue-700 text-white":
-                                                    !isEqual(selection, option.value) && optionIndexWithFocus === index,
-                                                "pointer-events-none": option.disabled,
-                                                "text-gray-400": option.disabled,
-                                            }
-                                        )}
-                                        onClick={() => {
-                                            if (option.disabled) {
-                                                return;
-                                            }
-                                            handleOptionClick(option.value);
-                                        }}
-                                        style={{ height: optionHeight }}
-                                        onPointerMove={() => handlePointerOver(index)}
-                                        title={option.hoverText ?? option.label}
-                                    >
-                                        <span className="whitespace-nowrap text-ellipsis overflow-hidden min-w-0 flex gap-2">
-                                            {option.adornment && (
-                                                <span className="max-w-5 max-h-5 overflow-hidden">
-                                                    {option.adornment}
-                                                </span>
-                                            )}
-                                            {option.label}
-                                        </span>
-                                    </div>
-                                )}
-                            />
+                            <div style={{ height: filteredOptionsWithSeparators.length * OPTION_HEIGHT }}>
+                                <Virtualization
+                                    direction="vertical"
+                                    items={filteredOptionsWithSeparators}
+                                    itemSize={OPTION_HEIGHT}
+                                    containerRef={dropdownRef}
+                                    startIndex={startIndex}
+                                    renderItem={renderItem}
+                                />
+                            </div>
                         </div>
                     )}
             </div>
@@ -501,4 +569,49 @@ export function Dropdown<TValue = string>(props: DropdownProps<TValue>) {
     );
 }
 
+type OptionProps<TValue> = DropdownOption<TValue> & {
+    isSelected: boolean;
+    isFocused: boolean;
+    onSelect: (value: TValue) => void;
+    onPointerOver: (value: TValue) => void;
+};
+
+function OptionItem<TValue>(props: OptionProps<TValue>): React.ReactNode {
+    return (
+        <div
+            className={resolveClassNames("flex items-center cursor-pointer select-none px-1", {
+                "bg-blue-600 text-white box-border hover:bg-blue-700": props.isSelected,
+                "bg-blue-100": !props.isSelected && props.isFocused,
+                "bg-blue-700 text-white": props.isSelected && props.isFocused,
+                "pointer-events-none": props.disabled,
+                "text-gray-400": props.disabled,
+            })}
+            style={{ height: OPTION_HEIGHT }}
+            title={props.label}
+            onPointerMove={() => props.onPointerOver(props.value)}
+            onClick={() => !props.disabled && props.onSelect(props.value)}
+        >
+            <span
+                className={resolveClassNames("whitespace-nowrap text-ellipsis overflow-hidden min-w-0 flex gap-2", {
+                    "ml-2": props.group !== undefined,
+                })}
+            >
+                {props.adornment && <span className="max-w-5 max-h-5 overflow-hidden">{props.adornment}</span>}
+                {props.label}
+            </span>
+        </div>
+    );
+}
+
+function SeparatorItem(props: { text: string }): React.ReactNode {
+    return (
+        <div
+            className="px-1 flex gap-1 text-xs text-gray-500 uppercase font-semibold items-center pointer-events-none select-none"
+            style={{ height: OPTION_HEIGHT }}
+        >
+            <span className="whitespace-nowrap text-ellipsis overflow-hidden min-w-0 flex gap-2">{props.text}</span>
+        </div>
+    );
+}
+
 Dropdown.displayName = "Dropdown";
diff --git a/frontend/src/lib/components/Virtualization/virtualization.tsx b/frontend/src/lib/components/Virtualization/virtualization.tsx
index b293e2dea..4c770287d 100644
--- a/frontend/src/lib/components/Virtualization/virtualization.tsx
+++ b/frontend/src/lib/components/Virtualization/virtualization.tsx
@@ -97,81 +97,87 @@ export const Virtualization = withDefaults<VirtualizationProps>()(defaultProps,
         }
     }
 
-    React.useEffect(() => {
-        if (props.containerRef.current && initialScrollPositions) {
-            setIsProgrammaticScroll(true);
-            props.containerRef.current.scrollTop = initialScrollPositions.top;
-            props.containerRef.current.scrollLeft = initialScrollPositions.left;
-        }
-    }, [props.containerRef, initialScrollPositions]);
-
-    React.useEffect(() => {
-        let lastScrollPosition = -1;
-        function handleScroll() {
-            if (isProgrammaticScroll) {
-                setIsProgrammaticScroll(false);
-                return;
+    React.useEffect(
+        function applyInitialScrollPositionEffect() {
+            if (props.containerRef.current && initialScrollPositions) {
+                setIsProgrammaticScroll(true);
+                props.containerRef.current.scrollTop = initialScrollPositions.top;
+                props.containerRef.current.scrollLeft = initialScrollPositions.left;
             }
-            if (props.containerRef.current) {
-                const scrollPosition =
-                    props.direction === "vertical"
-                        ? props.containerRef.current.scrollTop
-                        : props.containerRef.current.scrollLeft;
+        },
+        [props.containerRef, initialScrollPositions]
+    );
 
-                if (scrollPosition === lastScrollPosition) {
+    React.useEffect(
+        function mountScrollEffect() {
+            let lastScrollPosition = -1;
+            function handleScroll() {
+                if (isProgrammaticScroll) {
+                    setIsProgrammaticScroll(false);
                     return;
                 }
-
-                lastScrollPosition = scrollPosition;
-
-                const size = props.direction === "vertical" ? containerSize.height : containerSize.width;
-
-                const startIndex = Math.max(0, Math.floor(scrollPosition / props.itemSize) - 1);
-                const endIndex = Math.min(
-                    props.items.length - 1,
-                    Math.ceil((scrollPosition + size) / props.itemSize) + 1
-                );
-
-                setRange({ start: startIndex, end: endIndex });
-                setPlaceholderSizes({
-                    start: startIndex * props.itemSize,
-                    end: (props.items.length - 1 - endIndex) * props.itemSize,
-                });
-
-                if (onScroll) {
-                    onScroll(startIndex);
+                if (props.containerRef.current) {
+                    const scrollPosition =
+                        props.direction === "vertical"
+                            ? props.containerRef.current.scrollTop
+                            : props.containerRef.current.scrollLeft;
+
+                    if (scrollPosition === lastScrollPosition) {
+                        return;
+                    }
+
+                    lastScrollPosition = scrollPosition;
+
+                    const size = props.direction === "vertical" ? containerSize.height : containerSize.width;
+
+                    const startIndex = Math.max(0, Math.floor(scrollPosition / props.itemSize) - 1);
+                    const endIndex = Math.min(
+                        props.items.length - 1,
+                        Math.ceil((scrollPosition + size) / props.itemSize) + 1
+                    );
+
+                    setRange({ start: startIndex, end: endIndex });
+                    setPlaceholderSizes({
+                        start: startIndex * props.itemSize,
+                        end: (props.items.length - 1 - endIndex) * props.itemSize,
+                    });
+
+                    if (onScroll) {
+                        onScroll(startIndex);
+                    }
                 }
             }
-        }
 
-        if (props.containerRef.current) {
-            props.containerRef.current.addEventListener("scroll", handleScroll);
-        }
-        handleScroll();
-
-        return () => {
             if (props.containerRef.current) {
-                props.containerRef.current.removeEventListener("scroll", handleScroll);
+                props.containerRef.current.addEventListener("scroll", handleScroll);
             }
-        };
-    }, [
-        props.containerRef,
-        props.direction,
-        props.items,
-        props.itemSize,
-        containerSize.height,
-        containerSize.width,
-        onScroll,
-        isProgrammaticScroll,
-    ]);
-
-    const makeStyle = (size: number) => {
+            handleScroll();
+
+            return function unmountScrollEffect() {
+                if (props.containerRef.current) {
+                    props.containerRef.current.removeEventListener("scroll", handleScroll);
+                }
+            };
+        },
+        [
+            props.containerRef,
+            props.direction,
+            props.items,
+            props.itemSize,
+            containerSize.height,
+            containerSize.width,
+            onScroll,
+            isProgrammaticScroll,
+        ]
+    );
+
+    function makeStyle(size: number) {
         if (props.direction === "vertical") {
             return { height: size };
         } else {
             return { width: size };
         }
-    };
+    }
 
     return (
         <>
diff --git a/frontend/src/modules/3DViewer/settings/atoms/baseAtoms.ts b/frontend/src/modules/3DViewer/settings/atoms/baseAtoms.ts
index 72c62537b..f7a756ef5 100644
--- a/frontend/src/modules/3DViewer/settings/atoms/baseAtoms.ts
+++ b/frontend/src/modules/3DViewer/settings/atoms/baseAtoms.ts
@@ -10,6 +10,8 @@ export const showIntersectionAtom = atom<boolean>(false);
 export const gridLayerAtom = atom<number>(1);
 export const intersectionExtensionLengthAtom = atom<number>(1000);
 export const colorScaleAtom = atom<ColorScale | null>(null);
+export const viewerHorizontalAtom = atom<boolean>(false);
+
 export const useCustomBoundsAtom = atom<boolean>(false);
 export const intersectionTypeAtom = atom<IntersectionType>(IntersectionType.WELLBORE);
 export const addCustomIntersectionPolylineEditModeActiveAtom = atom<boolean>(false);
diff --git a/frontend/src/modules/MyModule2/atoms.ts b/frontend/src/modules/MyModule2/atoms.ts
index fb658d0b0..3a5af1c1e 100644
--- a/frontend/src/modules/MyModule2/atoms.ts
+++ b/frontend/src/modules/MyModule2/atoms.ts
@@ -1,6 +1,7 @@
 import { apiService } from "@framework/ApiService";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { EnsembleSetAtom } from "@framework/GlobalAtoms";
+import { atomWithModuleInstanceStorage, clearModuleInstanceStorage } from "@framework/utils/atomUtils";
 
 import { atom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
@@ -35,3 +36,8 @@ export const ensembleSetDependentAtom = atom<EnsembleIdent | null>((get) => {
     const firstEnsemble = ensembleSet.getEnsembleArr()[0];
     return firstEnsemble?.getIdent() ?? null;
 });
+
+export const persistentTextSettingAtom = atomWithModuleInstanceStorage<string>("myPersistentValue", "");
+export function cleanUpInstanceAtomStorage(instanceId: string) {
+    clearModuleInstanceStorage(instanceId, "myPersistentValue");
+}
diff --git a/frontend/src/modules/MyModule2/interfaces.ts b/frontend/src/modules/MyModule2/interfaces.ts
index c74218dd6..4b29f99d9 100644
--- a/frontend/src/modules/MyModule2/interfaces.ts
+++ b/frontend/src/modules/MyModule2/interfaces.ts
@@ -1,10 +1,11 @@
 import { InterfaceInitialization } from "@framework/UniDirectionalModuleComponentsInterface";
 
-import { textAtom } from "./atoms";
+import { persistentTextSettingAtom, textAtom } from "./atoms";
 
 type SettingsToViewInterface = {
     text: string;
     derivedText: string;
+    persistentText: string;
 };
 
 export type Interfaces = {
@@ -13,5 +14,6 @@ export type Interfaces = {
 
 export const settingsToViewInterfaceInitialization: InterfaceInitialization<SettingsToViewInterface> = {
     text: (get) => get(textAtom),
+    persistentText: (get) => get(persistentTextSettingAtom),
     derivedText: (get) => get(textAtom).toUpperCase(),
 };
diff --git a/frontend/src/modules/MyModule2/registerModule.ts b/frontend/src/modules/MyModule2/registerModule.ts
index 0bfcc8169..76dbc30b5 100644
--- a/frontend/src/modules/MyModule2/registerModule.ts
+++ b/frontend/src/modules/MyModule2/registerModule.ts
@@ -1,6 +1,7 @@
 import { ModuleCategory, ModuleDevState } from "@framework/Module";
 import { ModuleRegistry } from "@framework/ModuleRegistry";
 
+import { cleanUpInstanceAtomStorage } from "./atoms";
 import { Interfaces } from "./interfaces";
 
 ModuleRegistry.registerModule<Interfaces>({
@@ -8,4 +9,11 @@ ModuleRegistry.registerModule<Interfaces>({
     defaultTitle: "My Module 2",
     category: ModuleCategory.DEBUG,
     devState: ModuleDevState.DEV,
+
+    // Runs whenever you cross out a module
+    onUnloadInstance(instanceId: string) {
+        // eslint-disable-next-line no-console
+        console.log(`Moduel instance ${instanceId} is unloading...`);
+        cleanUpInstanceAtomStorage(instanceId);
+    },
 });
diff --git a/frontend/src/modules/WellLogViewer/interfaces.ts b/frontend/src/modules/WellLogViewer/interfaces.ts
new file mode 100644
index 000000000..da0c8e06f
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/interfaces.ts
@@ -0,0 +1,37 @@
+import { WellboreHeader_api } from "@api";
+import { InterfaceInitialization } from "@framework/UniDirectionalModuleComponentsInterface";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+import { TemplateTrack } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import {
+    allSelectedWellLogCurvesAtom,
+    selectedFieldIdentifierAtom,
+    selectedWellboreAtom,
+    selectedWellborePicksAtom,
+    wellLogTemplateTracks,
+} from "./settings/atoms/derivedAtoms";
+import { padDataWithEmptyRowsAtom, viewerHorizontalAtom } from "./settings/atoms/persistedAtoms";
+
+export type InterfaceTypes = {
+    settingsToView: SettingsToViewInterface;
+};
+
+export type SettingsToViewInterface = {
+    selectedField: string | null;
+    wellboreHeader: WellboreHeader_api | null;
+    requiredDataCurves: string[];
+    templateTracks: TemplateTrack[];
+    viewerHorizontal: boolean;
+    padDataWithEmptyRows: boolean;
+    selectedWellborePicks: WellPicksLayerData;
+};
+
+export const settingsToViewInterfaceInitialization: InterfaceInitialization<SettingsToViewInterface> = {
+    selectedField: (get) => get(selectedFieldIdentifierAtom),
+    wellboreHeader: (get) => get(selectedWellboreAtom),
+    templateTracks: (get) => get(wellLogTemplateTracks),
+    requiredDataCurves: (get) => get(allSelectedWellLogCurvesAtom),
+    viewerHorizontal: (get) => get(viewerHorizontalAtom),
+    padDataWithEmptyRows: (get) => get(padDataWithEmptyRowsAtom),
+    selectedWellborePicks: (get) => get(selectedWellborePicksAtom),
+};
diff --git a/frontend/src/modules/WellLogViewer/loadModule.tsx b/frontend/src/modules/WellLogViewer/loadModule.tsx
new file mode 100644
index 000000000..3381cca53
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/loadModule.tsx
@@ -0,0 +1,13 @@
+import { ModuleRegistry } from "@framework/ModuleRegistry";
+
+import { InterfaceTypes, settingsToViewInterfaceInitialization } from "./interfaces";
+import { MODULE_NAME } from "./registerModule";
+import { Settings } from "./settings/settings";
+import { View } from "./view/view";
+
+const module = ModuleRegistry.initModule<InterfaceTypes>(MODULE_NAME, {
+    settingsToViewInterfaceInitialization,
+});
+
+module.viewFC = View;
+module.settingsFC = Settings;
diff --git a/frontend/src/modules/WellLogViewer/registerModule.ts b/frontend/src/modules/WellLogViewer/registerModule.ts
new file mode 100644
index 000000000..1d1d8f88d
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/registerModule.ts
@@ -0,0 +1,31 @@
+/**
+ * Well log viewer module.
+ * @author Anders Rantala Hunderi
+ * @since 08.14.2024
+ */
+import { ModuleCategory, ModuleDevState } from "@framework/Module";
+import { ModuleRegistry } from "@framework/ModuleRegistry";
+import { SyncSettingKey } from "@framework/SyncSettings";
+
+import { InterfaceTypes } from "./interfaces";
+import { clearStorageForInstance } from "./settings/atoms/persistedAtoms";
+
+export const MODULE_NAME = "WellLogViewer";
+const MODULE_TITLE = "Well log Viewer";
+// TODO: Better description
+const MODULE_DESCRIPTION = "Well log Viewer";
+// TODO: preview Icon
+
+ModuleRegistry.registerModule<InterfaceTypes>({
+    moduleName: MODULE_NAME,
+    defaultTitle: MODULE_TITLE,
+    description: MODULE_DESCRIPTION,
+
+    category: ModuleCategory.MAIN,
+    devState: ModuleDevState.DEV,
+
+    syncableSettingKeys: [SyncSettingKey.INTERSECTION, SyncSettingKey.VERTICAL_SCALE],
+    onUnloadInstance(instanceId) {
+        clearStorageForInstance(instanceId);
+    },
+});
diff --git a/frontend/src/modules/WellLogViewer/settings/atoms/baseAtoms.ts b/frontend/src/modules/WellLogViewer/settings/atoms/baseAtoms.ts
new file mode 100644
index 000000000..5e0f79f75
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/atoms/baseAtoms.ts
@@ -0,0 +1,6 @@
+import { atom } from "jotai";
+
+export const userSelectedFieldIdentifierAtom = atom<string | null>(null);
+export const userSelectedWellboreUuidAtom = atom<string | null>(null);
+export const userSelectedUnitWellpicksAtom = atom<string[]>([]);
+export const userSelectedNonUnitWellpicksAtom = atom<string[]>([]);
diff --git a/frontend/src/modules/WellLogViewer/settings/atoms/derivedAtoms.ts b/frontend/src/modules/WellLogViewer/settings/atoms/derivedAtoms.ts
new file mode 100644
index 000000000..95e5393eb
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/atoms/derivedAtoms.ts
@@ -0,0 +1,107 @@
+import { WellboreHeader_api, WellboreLogCurveHeader_api } from "@api";
+import { EnsembleSetAtom } from "@framework/GlobalAtoms";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+import { TemplatePlot, TemplateTrack } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { atom } from "jotai";
+import _, { Dictionary } from "lodash";
+
+import {
+    userSelectedFieldIdentifierAtom,
+    userSelectedNonUnitWellpicksAtom,
+    userSelectedUnitWellpicksAtom,
+    userSelectedWellboreUuidAtom,
+} from "./baseAtoms";
+import { logViewerTrackConfigs } from "./persistedAtoms";
+import {
+    drilledWellboreHeadersQueryAtom,
+    wellLogCurveHeadersQueryAtom,
+    wellborePicksAndStratigraphyQueryAtom,
+} from "./queryAtoms";
+
+export const selectedEnsembleSetAtom = atom((get) => {
+    const ensembleSetArr = get(EnsembleSetAtom).getEnsembleArr();
+    const selectedFieldId = get(userSelectedFieldIdentifierAtom);
+
+    if (ensembleSetArr.length < 1) {
+        return null;
+    } else {
+        const selectedEnsemble = ensembleSetArr.find((e) => e.getFieldIdentifier() === selectedFieldId);
+
+        return selectedEnsemble ?? ensembleSetArr[0];
+    }
+});
+
+export const selectedFieldIdentifierAtom = atom((get) => {
+    return get(selectedEnsembleSetAtom)?.getFieldIdentifier() ?? null;
+});
+
+export const selectedWellboreAtom = atom<WellboreHeader_api | null>((get) => {
+    const availableWellboreHeaders = get(drilledWellboreHeadersQueryAtom)?.data;
+    const selectedWellboreId = get(userSelectedWellboreUuidAtom);
+
+    return getSelectedWellboreHeader(selectedWellboreId, availableWellboreHeaders);
+});
+
+export const selectedWellborePicksAtom = atom<WellPicksLayerData>((get) => {
+    const wellborePicks = get(wellborePicksAndStratigraphyQueryAtom)?.data;
+    const selectedUnitPicks = get(userSelectedUnitWellpicksAtom);
+    const selectedNonUnitPicks = get(userSelectedNonUnitWellpicksAtom);
+
+    if (!wellborePicks) return { unitPicks: [], nonUnitPicks: [] };
+    else {
+        const unitPicks = wellborePicks.unitPicks.filter((pick) => selectedUnitPicks.includes(pick.name));
+        const nonUnitPicks = wellborePicks.nonUnitPicks.filter((pick) =>
+            selectedNonUnitPicks.includes(pick.identifier)
+        );
+
+        return { unitPicks, nonUnitPicks };
+    }
+});
+
+export const groupedCurveHeadersAtom = atom<Dictionary<WellboreLogCurveHeader_api[]>>((get) => {
+    const logCurveHeaders = get(wellLogCurveHeadersQueryAtom)?.data ?? [];
+
+    return _.groupBy(logCurveHeaders, "logName");
+});
+
+export const wellLogTemplateTracks = atom<TemplateTrack[]>((get) => {
+    const templateTrackConfigs = get(logViewerTrackConfigs);
+
+    return templateTrackConfigs.map((config): TemplateTrack => {
+        return {
+            ...config,
+            plots: config.plots.filter(({ _isValid }) => _isValid) as TemplatePlot[],
+        };
+    });
+});
+
+export const allSelectedWellLogCurvesAtom = atom<string[]>((get) => {
+    const templateTracks = get(wellLogTemplateTracks);
+
+    const curveNames = templateTracks.reduce<string[]>((acc, trackCfg) => {
+        const usedCurves = _.flatMap(trackCfg.plots, ({ name, name2 }) => {
+            if (name2) return [name, name2];
+            else return [name];
+        });
+
+        return _.uniq([...acc, ...usedCurves]);
+    }, []);
+
+    return curveNames;
+});
+
+function getSelectedWellboreHeader(
+    currentId: string | null,
+    wellboreHeaderSet: WellboreHeader_api[] | null | undefined
+): WellboreHeader_api | null {
+    if (!wellboreHeaderSet || wellboreHeaderSet.length < 1) {
+        return null;
+    }
+
+    if (!currentId) {
+        return wellboreHeaderSet[0];
+    }
+
+    return wellboreHeaderSet.find((wh) => wh.wellboreUuid === currentId) ?? wellboreHeaderSet[0];
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/atoms/persistedAtoms.ts b/frontend/src/modules/WellLogViewer/settings/atoms/persistedAtoms.ts
new file mode 100644
index 000000000..56124755b
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/atoms/persistedAtoms.ts
@@ -0,0 +1,55 @@
+import { atomWithModuleInstanceStorage, clearModuleInstanceStorage } from "@framework/utils/atomUtils";
+import { TemplatePlot, TemplateTrack } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { Getter, Setter, atom } from "jotai";
+import { Dictionary } from "lodash";
+
+/**
+ * Extension of the template track type with additional fields used while editing
+ */
+export type TemplatePlotConfig = Partial<TemplatePlot> & {
+    // Used for state updates
+    _id: string;
+    // Wether the config has all required fields for it's curve-type
+    _isValid: boolean;
+    // This is used as the value for dropdowns. Even if the curvename is supposed to be unique,  In some rare cases, the curvename is duplicated across different well-logs.
+    _logAndName: `${string}::${string}`;
+};
+export type TemplateTrackConfig = Omit<TemplateTrack, "plots"> & {
+    // ID used to allow the settings-menu to drag-sort them
+    _id: string;
+    plots: TemplatePlotConfig[];
+};
+
+const STORAGE_KEY = "moduleSettings";
+const moduleSettingsAtom = atomWithModuleInstanceStorage<Dictionary<any>>(STORAGE_KEY, {});
+
+function getPersistentModuleField(get: Getter, valueKey: string, defaultValue: any): typeof defaultValue {
+    return get(moduleSettingsAtom)[valueKey] ?? defaultValue;
+}
+
+function setPersistentModuleField(get: Getter, set: Setter, valueKey: string, newValue: any) {
+    const storageCopy = { ...get(moduleSettingsAtom) };
+    storageCopy[valueKey] = newValue;
+
+    set(moduleSettingsAtom, storageCopy);
+}
+
+export const logViewerTrackConfigs = atom<TemplateTrackConfig[], [TemplateTrackConfig[]], void>(
+    (get) => getPersistentModuleField(get, "logViewerTrackConfigs", []),
+    (get, set, newVal) => setPersistentModuleField(get, set, "logViewerTrackConfigs", newVal)
+);
+
+export const viewerHorizontalAtom = atom<boolean, [boolean], void>(
+    (get) => getPersistentModuleField(get, "viewerHorizontal", false),
+    (get, set, newVal) => setPersistentModuleField(get, set, "viewerHorizontal", newVal)
+);
+
+export const padDataWithEmptyRowsAtom = atom<boolean, [boolean], void>(
+    (get) => getPersistentModuleField(get, "padDataWithEmptyRows", true),
+    (get, set, newVal) => setPersistentModuleField(get, set, "padDataWithEmptyRows", newVal)
+);
+
+export function clearStorageForInstance(instanceId: string) {
+    clearModuleInstanceStorage(instanceId, STORAGE_KEY);
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/atoms/queryAtoms.ts b/frontend/src/modules/WellLogViewer/settings/atoms/queryAtoms.ts
new file mode 100644
index 000000000..809f7b0cc
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/atoms/queryAtoms.ts
@@ -0,0 +1,66 @@
+import { transformFormationData } from "@equinor/esv-intersection";
+import { apiService } from "@framework/ApiService";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+
+import { atomWithQuery } from "jotai-tanstack-query";
+import _ from "lodash";
+
+import { selectedEnsembleSetAtom, selectedFieldIdentifierAtom, selectedWellboreAtom } from "./derivedAtoms";
+
+const STALE_TIME = 60 * 1000;
+const CACHE_TIME = 60 * 1000;
+
+const SHARED_QUERY_OPTS = {
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
+};
+
+export const drilledWellboreHeadersQueryAtom = atomWithQuery((get) => {
+    const fieldId = get(selectedFieldIdentifierAtom) ?? "";
+
+    return {
+        queryKey: ["getDrilledWellboreHeader", fieldId],
+        queryFn: () => apiService.well.getDrilledWellboreHeaders(fieldId),
+        enabled: Boolean(fieldId),
+        ...SHARED_QUERY_OPTS,
+    };
+});
+
+/* ! Note 
+  No logs are returned for any of the Drogon wells, afaik. Found a working set using in one of the TROLL ones. Some of them are still on the old system, so just click around until you find a working one
+
+*/
+export const wellLogCurveHeadersQueryAtom = atomWithQuery((get) => {
+    const wellboreId = get(selectedWellboreAtom)?.wellboreUuid;
+
+    return {
+        queryKey: ["getWellboreLogCurveHeaders", wellboreId],
+        queryFn: () => apiService.well.getWellboreLogCurveHeaders(wellboreId ?? ""),
+        enabled: Boolean(wellboreId),
+        ...SHARED_QUERY_OPTS,
+    };
+});
+
+export const wellborePicksAndStratigraphyQueryAtom = atomWithQuery<WellPicksLayerData>((get) => {
+    const selectedEnsemble = get(selectedEnsembleSetAtom);
+
+    const wellboreId = get(selectedWellboreAtom)?.wellboreUuid ?? "";
+    const caseId = selectedEnsemble?.getIdent()?.getCaseUuid() ?? "";
+
+    return {
+        queryKey: ["getWellborePicksAndStratigraphicUnits", wellboreId, caseId],
+        enabled: Boolean(caseId && wellboreId),
+        queryFn: async () => {
+            const data = await apiService.well.getWellborePicksAndStratigraphicUnits(caseId, wellboreId);
+
+            const transformedData = transformFormationData(data.wellbore_picks, data.stratigraphic_units as any);
+
+            // ! Sometimes the transformation data returns duplicate entries, filtering them out
+            return {
+                nonUnitPicks: _.uniqBy(transformedData.nonUnitPicks, "identifier"),
+                unitPicks: _.uniqBy(transformedData.unitPicks, "name"),
+            };
+        },
+        ...SHARED_QUERY_OPTS,
+    };
+});
diff --git a/frontend/src/modules/WellLogViewer/settings/components/AddItemButton.tsx b/frontend/src/modules/WellLogViewer/settings/components/AddItemButton.tsx
new file mode 100644
index 000000000..00b42001e
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/AddItemButton.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+
+import { Menu } from "@lib/components/Menu";
+import { MenuItem } from "@lib/components/MenuItem";
+import { SelectOption } from "@lib/components/Select";
+import { Button, Dropdown, MenuButton } from "@mui/base";
+import { Add, ArrowDropDown } from "@mui/icons-material";
+
+export type AddItemButtonProps = {
+    buttonText: string;
+    options?: SelectOption[];
+    onAddClicked?: () => void;
+    onOptionClicked?: (value: SelectOption["value"]) => void;
+};
+
+/**
+ * Generic add-button, for the top of  sortable-lists. Uses a dropdown if there's more than 1 available options
+ */
+export function AddItemButton(props: AddItemButtonProps): React.ReactNode {
+    const { onOptionClicked, onAddClicked } = props;
+
+    const handleOptionClicked = React.useCallback(
+        function handleOptionClicked(item: SelectOption) {
+            if (onOptionClicked) onOptionClicked(item.value);
+        },
+        [onOptionClicked]
+    );
+
+    if (!props.options) {
+        return (
+            <Button onClick={onAddClicked}>
+                <ButtonContent text={props.buttonText} />
+            </Button>
+        );
+    }
+
+    return (
+        <Dropdown>
+            <MenuButton>
+                <ButtonContent text={props.buttonText} multiple />
+            </MenuButton>
+
+            <Menu className="text-sm p-1 max-h-96 overflow-auto" anchorOrigin="bottom-end">
+                {props.options.map((entry) => (
+                    <MenuItem key={entry.value} className="text-sm p-0.5" onClick={() => handleOptionClicked(entry)}>
+                        {entry.label}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </Dropdown>
+    );
+}
+
+function ButtonContent(props: { text: string; multiple?: boolean }) {
+    return (
+        <div className="flex items-center gap-1 py-0.5 px-1 text-sm rounded hover:bg-blue-100">
+            <Add fontSize="inherit" />
+            <span>{props.text}</span>
+            {props.multiple && <ArrowDropDown />}
+        </div>
+    );
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortablePlotList.tsx b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortablePlotList.tsx
new file mode 100644
index 000000000..2fdf1252b
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortablePlotList.tsx
@@ -0,0 +1,220 @@
+import React from "react";
+
+import { WellboreLogCurveHeader_api } from "@api";
+import { arrayMove } from "@framework/utils/arrays";
+import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
+import { Label } from "@lib/components/Label";
+import { SortableList, SortableListItem } from "@lib/components/SortableList";
+import { ColorSet } from "@lib/utils/ColorSet";
+import { CURVE_COLOR_PALETTE } from "@modules/WellLogViewer/utils/logViewerColors";
+import { PLOT_TYPE_OPTIONS, makeTrackPlot } from "@modules/WellLogViewer/utils/logViewerTemplate";
+import { Delete, SwapHoriz, Warning } from "@mui/icons-material";
+import { TemplatePlotTypes } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { useAtomValue } from "jotai";
+import _ from "lodash";
+
+import { allSelectedWellLogCurvesAtom } from "../../atoms/derivedAtoms";
+import { TemplatePlotConfig } from "../../atoms/persistedAtoms";
+import { AddItemButton } from "../AddItemButton";
+
+export type SortablePlotListProps = {
+    availableCurveHeaders: WellboreLogCurveHeader_api[];
+    plots: TemplatePlotConfig[];
+    onUpdatePlots: (plots: TemplatePlotConfig[]) => void;
+};
+
+export function SortablePlotList(props: SortablePlotListProps): React.ReactNode {
+    const allSelectedWellLogCurves = useAtomValue(allSelectedWellLogCurvesAtom);
+
+    const { onUpdatePlots } = props;
+
+    const curveHeaderOptions = makeCurveNameOptions(props.availableCurveHeaders);
+
+    // If the current selection does not exist, keep it in the selection, with a warning. This can happen when the user is importing a config, or swapping between wellbores
+    allSelectedWellLogCurves.forEach((curveName) => {
+        if (!curveHeaderOptions.some(({ value }) => value.endsWith("::" + curveName))) {
+            curveHeaderOptions.push(makeMissingCurveOption(curveName));
+        }
+    });
+
+    // TODO, do an offsett or something, so they dont always start on the same color?
+    const colorSet = React.useRef<ColorSet>(new ColorSet(CURVE_COLOR_PALETTE));
+
+    const addPlot = React.useCallback(
+        function addPlot(plotType: string) {
+            const plotConfig: TemplatePlotConfig = makeTrackPlot({
+                color: colorSet.current.getNextColor(),
+                type: plotType as TemplatePlotTypes,
+            });
+
+            onUpdatePlots([...props.plots, plotConfig]);
+        },
+        [onUpdatePlots, props.plots]
+    );
+
+    const removePlot = React.useCallback(
+        function removePlot(plot: TemplatePlotConfig) {
+            onUpdatePlots(props.plots.filter((p) => p._id !== plot._id));
+        },
+        [onUpdatePlots, props.plots]
+    );
+
+    const handlePlotUpdate = React.useCallback(
+        function handlePlotUpdate(newPlot: TemplatePlotConfig) {
+            const newPlots = props.plots.map((p) => (p._id === newPlot._id ? newPlot : p));
+
+            onUpdatePlots(newPlots);
+        },
+        [onUpdatePlots, props.plots]
+    );
+
+    const handleTrackMove = React.useCallback(
+        function handleTrackMove(
+            movedItemId: string,
+            originId: string | null,
+            destinationId: string | null,
+            newPosition: number
+        ) {
+            // Skip update if the item was moved above or below itself, as this means no actual move happened
+            // TODO: This should probably be checked inside SortableList
+            const currentPosition = props.plots.findIndex((p) => p.name === movedItemId);
+            if (currentPosition === newPosition || currentPosition + 1 === newPosition) return;
+
+            const newTrackCfg = arrayMove(props.plots, currentPosition, newPosition);
+
+            onUpdatePlots(newTrackCfg);
+        },
+        [onUpdatePlots, props.plots]
+    );
+
+    return (
+        <div className="">
+            <Label text="Plots" position="left" wrapperClassName="!justify-between" labelClassName="!mb-0">
+                <AddItemButton buttonText="Add plot" options={PLOT_TYPE_OPTIONS} onOptionClicked={addPlot} />
+            </Label>
+
+            <SortableList onItemMoved={handleTrackMove}>
+                {props.plots.map((plot) => (
+                    <SortablePlotItem
+                        key={plot._id}
+                        plot={plot}
+                        curveHeaderOptions={curveHeaderOptions}
+                        onPlotUpdate={handlePlotUpdate}
+                        onDeletePlot={removePlot}
+                    />
+                ))}
+            </SortableList>
+        </div>
+    );
+}
+
+type SortablePlotItemProps = {
+    plot: TemplatePlotConfig;
+    curveHeaderOptions: DropdownOption[];
+    onPlotUpdate: (plot: TemplatePlotConfig) => void;
+    onDeletePlot: (plot: TemplatePlotConfig) => void;
+};
+
+function SortablePlotItem(props: SortablePlotItemProps) {
+    const { onPlotUpdate } = props;
+    const secondCurveNeeded = props.plot.type === "differential";
+
+    const handlePlotChange = React.useCallback(
+        function handlePlotChange(changes: Partial<TemplatePlotConfig>) {
+            const newPlot = makeTrackPlot({
+                ...props.plot,
+                ...changes,
+            });
+
+            onPlotUpdate(newPlot);
+        },
+        [props.plot, onPlotUpdate]
+    );
+
+    const title = (
+        <>
+            <Dropdown
+                placeholder="Select a curve"
+                value={props.plot._logAndName}
+                options={props.curveHeaderOptions}
+                // @ts-expect-error onChange is typed for a completely normal string, but we're using a formatted one
+                onChange={(v) => handlePlotChange({ _logAndName: v, name: v.split("::")[1] })}
+            />
+        </>
+    );
+
+    const endAdornment = (
+        <>
+            {secondCurveNeeded && (
+                <>
+                    <button
+                        title="Swap curves"
+                        aria-label="Swap curves"
+                        className="rounded hover:bg-slate-300 text-base block px-1 -mx-1"
+                        onClick={() => handlePlotChange({ name: props.plot.name2, name2: props.plot.name })}
+                    >
+                        <SwapHoriz fontSize="inherit" />
+                    </button>
+                    <Dropdown
+                        placeholder="Select 2nd curve"
+                        value={props.plot.name2}
+                        options={props.curveHeaderOptions}
+                        onChange={(v) => handlePlotChange({ name2: v })}
+                    />
+                </>
+            )}
+            <div className="text-xs w-28 flex-shrink-0">
+                <Dropdown
+                    value={props.plot.type}
+                    options={PLOT_TYPE_OPTIONS}
+                    onChange={(v) => handlePlotChange({ type: v as TemplatePlotTypes })}
+                />
+            </div>
+
+            <button
+                className="hover:cursor-pointer hover:bg-blue-100 p-0.5 rounded text-xs text-red-800"
+                title="Remove Track"
+                onClick={() => props.onDeletePlot(props.plot)}
+            >
+                <Delete fontSize="inherit" />
+            </button>
+        </>
+    );
+
+    return <SortableListItem id={props.plot._id} title={title} endAdornment={endAdornment} />;
+}
+function sortStatLogsToTop(o: WellboreLogCurveHeader_api) {
+    if (o.logName.startsWith("STAT_")) return 0;
+    else return 1;
+}
+
+function makeCurveNameOptions(curveHeaders: WellboreLogCurveHeader_api[]): DropdownOption[] {
+    // It's my understanding that the STAT logs are the main curves users' would care about, so sorting them to the top first
+    return _.chain(curveHeaders)
+        .sortBy([sortStatLogsToTop, "logName", "curveName"])
+        .map((curveHeader): DropdownOption => {
+            return {
+                // ... surely they wont have log-names with :: in them, RIGHT?
+                value: `${curveHeader.logName}::${curveHeader.curveName}`,
+                label: curveHeader.curveName,
+                group: curveHeader.logName,
+            };
+        })
+        .value();
+}
+
+// Helper method to show a missing curve as a disabled option
+function makeMissingCurveOption(curveAndLogName: string): DropdownOption {
+    return {
+        label: curveAndLogName.split("::")[0],
+        value: curveAndLogName,
+        group: "Unavailable curves!",
+        disabled: true,
+        adornment: (
+            <span title="This plot is is not available for this wellbore!" className="text-yellow-500">
+                <Warning fontSize="inherit" />
+            </span>
+        ),
+    };
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortableTrackItem.tsx b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortableTrackItem.tsx
new file mode 100644
index 000000000..31bb5a01e
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/SortableTrackItem.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+
+import { SettingsStatusWriter } from "@framework/StatusWriter";
+import { SortableListItem } from "@lib/components/SortableList";
+import { Delete, ExpandLess, ExpandMore, Settings, Warning } from "@mui/icons-material";
+
+import { TrackSettings } from "./TrackSettings";
+
+import { TemplateTrackConfig } from "../../atoms/persistedAtoms";
+
+export type CurveTrackItemProps = {
+    trackConfig: TemplateTrackConfig;
+    statusWriter: SettingsStatusWriter;
+    onUpdateTrack: (newTrack: TemplateTrackConfig) => void;
+    onDeleteTrack: (track: TemplateTrackConfig) => void;
+};
+
+export function SortableTrackItem(props: CurveTrackItemProps) {
+    const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
+
+    const itemEndAdornment = (
+        <ListItemEndAdornment
+            track={props.trackConfig}
+            isExpanded={isExpanded}
+            onDeleteTrack={() => props.onDeleteTrack(props.trackConfig)}
+            toggleExpanded={() => setIsExpanded(!isExpanded)}
+        />
+    );
+
+    return (
+        <SortableListItem id={props.trackConfig._id} title={props.trackConfig.title} endAdornment={itemEndAdornment}>
+            <div hidden={!isExpanded}>
+                <TrackSettings {...props} />
+            </div>
+        </SortableListItem>
+    );
+}
+
+type ListItemEndAdornmentProps = {
+    track: TemplateTrackConfig;
+    isExpanded: boolean;
+    onDeleteTrack?: () => void;
+    toggleExpanded?: () => void;
+};
+
+function ListItemEndAdornment(props: ListItemEndAdornmentProps) {
+    return (
+        <>
+            {props.track.plots.length < 1 && (
+                <span title="Track has no plots!" className="text-yellow-500">
+                    <Warning fontSize="inherit" />
+                </span>
+            )}
+
+            <button
+                className=" hover:cursor-pointer hover:bg-blue-100 p-0.5 rounded"
+                title="Open track config"
+                onClick={props.toggleExpanded}
+            >
+                <Settings fontSize="inherit" />
+                {props.isExpanded ? <ExpandLess fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
+            </button>
+            <button
+                className="hover:cursor-pointer hover:bg-blue-100 p-0.5 rounded text-xs text-red-800"
+                title="Remove Track"
+                onClick={props.onDeleteTrack}
+            >
+                <Delete fontSize="inherit" />
+            </button>
+        </>
+    );
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/TrackSettings.tsx b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/TrackSettings.tsx
new file mode 100644
index 000000000..81d30881b
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/TrackSettings.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+
+import { Dropdown } from "@lib/components/Dropdown";
+import { Input } from "@lib/components/Input";
+import { PendingWrapper } from "@lib/components/PendingWrapper";
+import { PLOT_SCALE_OPTIONS } from "@modules/WellLogViewer/utils/logViewerTemplate";
+import { usePropagateApiErrorToStatusWriter } from "@modules/_shared/hooks/usePropagateApiErrorToStatusWriter";
+import { TemplatePlotScaleTypes } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { useAtomValue } from "jotai";
+
+import { SortablePlotList } from "./SortablePlotList";
+import { CurveTrackItemProps } from "./SortableTrackItem";
+
+import { TemplateTrackConfig } from "../../atoms/persistedAtoms";
+import { wellLogCurveHeadersQueryAtom } from "../../atoms/queryAtoms";
+
+export type TrackSettingsProps = CurveTrackItemProps;
+type ConfigChanges = Pick<Partial<TemplateTrackConfig>, "width" | "plots" | "scale" | "title">;
+
+const INPUT_DEBOUNCE_TIME = 500;
+
+export function TrackSettings(props: TrackSettingsProps): React.ReactNode {
+    const { onUpdateTrack } = props;
+
+    const curveHeadersQuery = useAtomValue(wellLogCurveHeadersQueryAtom);
+    const curveHeadersErrorStatus = usePropagateApiErrorToStatusWriter(curveHeadersQuery, props.statusWriter) ?? "";
+
+    const updateTrackConfig = React.useCallback(
+        function updateTrackConfig(configChanges: ConfigChanges) {
+            onUpdateTrack({ ...props.trackConfig, ...configChanges });
+        },
+        [props.trackConfig, onUpdateTrack]
+    );
+
+    return (
+        <div
+            className="pl-3 p-2 grid gap-x-2 gap-y-3 items-center text-sm"
+            style={{ gridTemplateColumns: "auto minmax(0, 1fr)" }}
+        >
+            <label htmlFor="trackTitle">Track title</label>
+            <Input
+                id="trackTitle"
+                value={props.trackConfig.title}
+                debounceTimeMs={INPUT_DEBOUNCE_TIME}
+                onValueChange={(val) => updateTrackConfig({ title: val })}
+            />
+
+            <label htmlFor="trackWidth">Track width </label>
+            <Input
+                id="trackWidth"
+                type="number"
+                value={props.trackConfig.width}
+                min={1}
+                max={6}
+                debounceTimeMs={INPUT_DEBOUNCE_TIME}
+                onValueChange={(val) => updateTrackConfig({ width: Number(val) })}
+            />
+
+            <label htmlFor="trackScale">Scale</label>
+            <Dropdown
+                id="trackScale"
+                value={props.trackConfig.scale ?? ""}
+                options={PLOT_SCALE_OPTIONS}
+                filter={false}
+                onChange={(val) => {
+                    if (!val) updateTrackConfig({ scale: undefined });
+                    else updateTrackConfig({ scale: val as TemplatePlotScaleTypes });
+                }}
+            />
+
+            <div className="col-span-2">
+                <PendingWrapper isPending={curveHeadersQuery.isPending} errorMessage={curveHeadersErrorStatus}>
+                    <SortablePlotList
+                        availableCurveHeaders={curveHeadersQuery.data ?? []}
+                        plots={props.trackConfig.plots}
+                        onUpdatePlots={(plots) => updateTrackConfig({ plots: plots })}
+                    />
+                </PendingWrapper>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/index.tsx b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/index.tsx
new file mode 100644
index 000000000..68723c319
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/TemplateTrackSettings/index.tsx
@@ -0,0 +1,181 @@
+import React from "react";
+
+import { SettingsStatusWriter } from "@framework/StatusWriter";
+import { arrayMove } from "@framework/utils/arrays";
+import { Menu } from "@lib/components/Menu";
+import { MenuItem } from "@lib/components/MenuItem";
+// import { MenuItem } from "@lib/components/MenuItem";
+import { SortableList } from "@lib/components/SortableList";
+import { transformToTrackConfigs } from "@modules/WellLogViewer/utils/logViewerTemplate";
+import { Dropdown, MenuButton } from "@mui/base";
+import { FileDownload, FileUpload, MoreVert } from "@mui/icons-material";
+
+import { useAtom } from "jotai";
+import { v4 } from "uuid";
+
+import { SortableTrackItem } from "./SortableTrackItem";
+
+import { TemplateTrackConfig, logViewerTrackConfigs } from "../../atoms/persistedAtoms";
+import { AddItemButton } from "../AddItemButton";
+
+interface TemplateTrackSettingsProps {
+    statusWriter: SettingsStatusWriter;
+}
+
+export function TemplateTrackSettings(props: TemplateTrackSettingsProps): React.ReactNode {
+    const [trackConfigs, setTrackConfigs] = useAtom(logViewerTrackConfigs);
+    const jsonImportInputRef = React.useRef<HTMLInputElement | null>(null);
+
+    const handleNewPlotTrack = React.useCallback(
+        function handleNewPlotTrack() {
+            const newConfig = createNewConfig(`Plot track #${trackConfigs.length + 1}`);
+
+            setTrackConfigs([...trackConfigs, newConfig]);
+        },
+        [setTrackConfigs, trackConfigs]
+    );
+
+    const handleDeleteTrack = React.useCallback(
+        function handleDeleteTrack(track: TemplateTrackConfig) {
+            setTrackConfigs(trackConfigs.filter((configs) => configs._id !== track._id));
+        },
+        [setTrackConfigs, trackConfigs]
+    );
+
+    const handleEditTrack = React.useCallback(
+        function handleEditTrack(updatedItem: TemplateTrackConfig) {
+            const newConfigs = trackConfigs.map((tc) => (tc._id === updatedItem._id ? updatedItem : tc));
+
+            setTrackConfigs(newConfigs);
+        },
+        [setTrackConfigs, trackConfigs]
+    );
+
+    const handleTrackMove = React.useCallback(
+        function handleTrackMove(
+            movedItemId: string,
+            originId: string | null,
+            destinationId: string | null,
+            newPosition: number
+        ) {
+            // Skip update if the item was moved above or below itself, as this means no actual move happened
+            // TODO: This should probably be checked inside SortableList
+            const currentPosition = trackConfigs.findIndex((cfg) => cfg._id === movedItemId);
+            if (currentPosition === newPosition || currentPosition + 1 === newPosition) return;
+
+            const newTrackCfg = arrayMove(trackConfigs, currentPosition, newPosition);
+
+            setTrackConfigs(newTrackCfg);
+        },
+        [setTrackConfigs, trackConfigs]
+    );
+
+    const encodedConfigJsonUrl = React.useMemo(
+        function generateConfigJsonDataString() {
+            if (trackConfigs.length === 0) return null;
+
+            const configJSON = JSON.stringify(trackConfigs);
+            return `data:text/json;charset=utf-8,${encodeURIComponent(configJSON)}`;
+        },
+        [trackConfigs]
+    );
+
+    const handleConfigJsonImport = React.useCallback(
+        async function readUploadedFile(evt: React.ChangeEvent<HTMLInputElement>) {
+            const file = evt.target.files?.item(0);
+
+            if (!file) return console.warn("No file given");
+            if (file.type !== "application/json") return console.warn("Invalid file extension");
+
+            try {
+                const fileData = await file.text();
+
+                const parsedData = JSON.parse(fileData);
+                const newConfig = transformToTrackConfigs(parsedData);
+
+                setTrackConfigs(newConfig);
+            } catch (error) {
+                console.error(error);
+                console.warn("Invalid JSON content");
+            }
+        },
+        [setTrackConfigs]
+    );
+
+    return (
+        <div className="h-full  [&_>_div]:!flex-grow-0">
+            <div className="flex bg-slate-100 p-2 items-center border-b border-gray-300">
+                <input
+                    ref={jsonImportInputRef}
+                    className="hidden"
+                    type="file"
+                    accept=".json,text/json,application/json"
+                    onChange={handleConfigJsonImport}
+                />
+
+                <div className="flex-grow font-bold text-sm">Plot Tracks</div>
+
+                <AddItemButton buttonText="Add track" onAddClicked={handleNewPlotTrack} />
+                <Dropdown>
+                    <MenuButton className="py-0.5 px-1 text-sm rounded hover:bg-blue-100">
+                        <MoreVert fontSize="inherit" />
+                    </MenuButton>
+                    <Menu anchorOrigin="bottom-end" className="text-sm">
+                        {/* No idea why this wouldnt play along with Typescript
+                        <MenuItem
+                            slots={{
+                                root: MenuItemLinkSlot,
+                            }}
+                            slotProps={{
+                                root: {
+                                    // @ts-expect-error I can't seem to overwrite the type for this, but the href is passed as expected
+                                    href: encodedConfigJsonUrl,
+                                    download: "well-log-plot-config.json",
+                                },
+                            }}
+                        >
+                            <FileDownload fontSize="inherit" /> Export JSON
+                        </MenuItem>
+                        */}
+
+                        <MenuItem disabled={!encodedConfigJsonUrl}>
+                            <a
+                                className="-mx-4 -my-2 px-4 py-2 flex items-center gap-2"
+                                href={encodedConfigJsonUrl ?? undefined}
+                                download="well-log-track-config.json"
+                            >
+                                <FileDownload fontSize="inherit" /> Export JSON
+                            </a>
+                        </MenuItem>
+                        <MenuItem onClick={() => jsonImportInputRef.current?.click()}>
+                            <FileUpload fontSize="inherit" /> Import JSON
+                        </MenuItem>
+                    </Menu>
+                </Dropdown>
+            </div>
+
+            <SortableList onItemMoved={handleTrackMove}>
+                {trackConfigs.map((config) => (
+                    <SortableTrackItem
+                        key={config._id}
+                        trackConfig={config}
+                        statusWriter={props.statusWriter}
+                        // Listeners
+                        onUpdateTrack={handleEditTrack}
+                        onDeleteTrack={handleDeleteTrack}
+                    />
+                ))}
+            </SortableList>
+        </div>
+    );
+}
+
+function createNewConfig(title: string): TemplateTrackConfig {
+    return {
+        _id: v4(),
+        plots: [],
+        scale: "linear",
+        width: 3,
+        title,
+    };
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/ViewerSettings/index.tsx b/frontend/src/modules/WellLogViewer/settings/components/ViewerSettings/index.tsx
new file mode 100644
index 000000000..2d2099953
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/ViewerSettings/index.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+import { SettingsStatusWriter } from "@framework/StatusWriter";
+import { Checkbox } from "@lib/components/Checkbox";
+import { Label } from "@lib/components/Label";
+import { PendingWrapper } from "@lib/components/PendingWrapper";
+import { usePropagateApiErrorToStatusWriter } from "@modules/_shared/hooks/usePropagateApiErrorToStatusWriter";
+
+import { useAtom, useAtomValue } from "jotai";
+
+import { userSelectedNonUnitWellpicksAtom, userSelectedUnitWellpicksAtom } from "../../atoms/baseAtoms";
+import { padDataWithEmptyRowsAtom, viewerHorizontalAtom } from "../../atoms/persistedAtoms";
+import { wellborePicksAndStratigraphyQueryAtom } from "../../atoms/queryAtoms";
+import { WellpickSelect } from "../WellpickSelect";
+
+export type ViewerSettingsProps = {
+    statusWriter: SettingsStatusWriter;
+};
+
+export function ViewerSettings(props: ViewerSettingsProps): React.ReactNode {
+    // Well log selection
+    const [horizontal, setHorizontal] = useAtom(viewerHorizontalAtom);
+    const [padWithEmptyRows, setPadWithEmptyRows] = useAtom(padDataWithEmptyRowsAtom);
+
+    // Wellpick selection
+    const borePicksAndStratQuery = useAtomValue(wellborePicksAndStratigraphyQueryAtom);
+    const availableWellPicks = borePicksAndStratQuery.data ?? { nonUnitPicks: [], unitPicks: [] };
+    const wellpickErrorMsg = usePropagateApiErrorToStatusWriter(borePicksAndStratQuery, props.statusWriter) ?? "";
+
+    const [selectedNonUnitPicks, setSelectedNonUnitPicks] = useAtom(userSelectedNonUnitWellpicksAtom);
+    const [selectedUnitPicks, setSelectedUnitPicks] = useAtom(userSelectedUnitWellpicksAtom);
+
+    return (
+        <div className="space-y-2">
+            {/* TODO: Other settings, like, color, max cols, etc */}
+            <Label text="Horizontal:" position="left" labelClassName="!mb-0">
+                <Checkbox checked={horizontal} onChange={(e, checked) => setHorizontal(checked)} />
+            </Label>
+
+            <Label text="Limit zoom to data:" position="left" labelClassName="!mb-0">
+                <Checkbox checked={!padWithEmptyRows} onChange={(e, checked) => setPadWithEmptyRows(!checked)} />
+            </Label>
+
+            <Label text="Well picks">
+                <PendingWrapper isPending={borePicksAndStratQuery.isPending} errorMessage={wellpickErrorMsg}>
+                    <WellpickSelect
+                        availableWellpicks={availableWellPicks}
+                        selectedNonUnitPicks={selectedNonUnitPicks}
+                        selectedUnitPicks={selectedUnitPicks}
+                        onNonUnitPicksChange={setSelectedNonUnitPicks}
+                        onUnitPicksChange={setSelectedUnitPicks}
+                    />
+                </PendingWrapper>
+            </Label>
+        </div>
+    );
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/components/WellpickSelect.tsx b/frontend/src/modules/WellLogViewer/settings/components/WellpickSelect.tsx
new file mode 100644
index 000000000..d2f0d083c
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/components/WellpickSelect.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+
+import { Select, SelectOption, SelectProps } from "@lib/components/Select";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+
+import _ from "lodash";
+
+export type WellpickSelectProps = {
+    availableWellpicks: WellPicksLayerData;
+    selectedUnitPicks: string[];
+    selectedNonUnitPicks: string[];
+    onNonUnitPicksChange?: (value: string[]) => void;
+    onUnitPicksChange?: (value: string[]) => void;
+} & Omit<SelectProps, "options" | "value" | "onChange">;
+
+export function WellpickSelect(props: WellpickSelectProps): React.ReactNode {
+    const { onNonUnitPicksChange, onUnitPicksChange } = props;
+    const groupedOptions = createWellpickOptions(props.availableWellpicks);
+
+    const handleChangeUnitPicks = React.useCallback(
+        function handleChangeUnitPicks(value: string[]) {
+            if (!onUnitPicksChange) return;
+
+            return _.isEqual(value, props.selectedUnitPicks) ? onUnitPicksChange([]) : onUnitPicksChange(value);
+        },
+        [onUnitPicksChange, props.selectedUnitPicks]
+    );
+
+    const handleChangeNonUnitPicks = React.useCallback(
+        function handleChangeNonUnitPicks(value: string[]) {
+            if (!onNonUnitPicksChange) return;
+
+            return _.isEqual(value, props.selectedNonUnitPicks)
+                ? onNonUnitPicksChange([])
+                : onNonUnitPicksChange(value);
+        },
+        [onNonUnitPicksChange, props.selectedNonUnitPicks]
+    );
+
+    return (
+        <div className="text-sm grid gap-x-3 gap-y-4 grid-cols-[auto_1fr]">
+            <span className="mt-1">Unit picks</span>
+
+            <Select
+                value={props.selectedUnitPicks}
+                options={groupedOptions.unitPicks}
+                size={5}
+                multiple
+                onChange={handleChangeUnitPicks}
+            />
+
+            <span className="mt-1">Non-unit picks</span>
+
+            <Select
+                value={props.selectedNonUnitPicks}
+                options={groupedOptions.nonUnitPicks}
+                size={5}
+                multiple
+                onChange={handleChangeNonUnitPicks}
+            />
+        </div>
+    );
+}
+
+type UnitPicks = WellPicksLayerData["unitPicks"];
+type NonUnitPicks = WellPicksLayerData["nonUnitPicks"];
+
+type WellpickOptions = {
+    unitPicks: SelectOption[];
+    nonUnitPicks: SelectOption[];
+};
+
+function createWellpickOptions(groupedWellpicks: WellPicksLayerData): WellpickOptions {
+    return {
+        unitPicks: unitPickToSelectOptions(groupedWellpicks.unitPicks),
+        nonUnitPicks: nonUnitPickToSelectOptions(groupedWellpicks.nonUnitPicks),
+    };
+}
+
+function nonUnitPickToSelectOptions(picks: NonUnitPicks): SelectOption[] {
+    return picks.map((pick) => ({
+        label: pick.identifier,
+        value: pick.identifier,
+    }));
+}
+
+function unitPickToSelectOptions(picks: UnitPicks): SelectOption[] {
+    return picks.map((pick) => ({
+        label: pick.name,
+        value: pick.name,
+    }));
+}
diff --git a/frontend/src/modules/WellLogViewer/settings/settings.tsx b/frontend/src/modules/WellLogViewer/settings/settings.tsx
new file mode 100644
index 000000000..cc3826d40
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/settings/settings.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+
+import { WellboreHeader_api } from "@api";
+import { ModuleSettingsProps } from "@framework/Module";
+import { useSettingsStatusWriter } from "@framework/StatusWriter";
+import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
+import { useEnsembleSet } from "@framework/WorkbenchSession";
+import { FieldDropdown } from "@framework/components/FieldDropdown";
+import { IntersectionType } from "@framework/types/intersection";
+import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
+import { Label } from "@lib/components/Label";
+import { PendingWrapper } from "@lib/components/PendingWrapper";
+import { Select, SelectOption } from "@lib/components/Select";
+import { usePropagateApiErrorToStatusWriter } from "@modules/_shared/hooks/usePropagateApiErrorToStatusWriter";
+
+import { useAtomValue, useSetAtom } from "jotai";
+
+import { userSelectedFieldIdentifierAtom, userSelectedWellboreUuidAtom } from "./atoms/baseAtoms";
+import { selectedFieldIdentifierAtom, selectedWellboreAtom } from "./atoms/derivedAtoms";
+import { drilledWellboreHeadersQueryAtom } from "./atoms/queryAtoms";
+import { TemplateTrackSettings } from "./components/TemplateTrackSettings";
+import { ViewerSettings } from "./components/ViewerSettings";
+
+import { InterfaceTypes } from "../interfaces";
+import { useTrackedGlobalValue } from "../utils/hooks";
+
+function useSyncedWellboreSetting(
+    syncHelper: SyncSettingsHelper
+): [typeof selectedWellboreHeader, typeof setSelectedWellboreHeader] {
+    const localSetSelectedWellboreHeader = useSetAtom(userSelectedWellboreUuidAtom);
+    // Global syncronization
+    const globalIntersection = syncHelper.useValue(SyncSettingKey.INTERSECTION, "global.syncValue.intersection");
+    useTrackedGlobalValue(globalIntersection, () => {
+        if (globalIntersection?.type === IntersectionType.WELLBORE) {
+            localSetSelectedWellboreHeader(globalIntersection.uuid);
+        }
+    });
+
+    function setSelectedWellboreHeader(wellboreUuid: string | null) {
+        localSetSelectedWellboreHeader(wellboreUuid);
+
+        syncHelper.publishValue(SyncSettingKey.INTERSECTION, "global.syncValue.intersection", {
+            type: IntersectionType.WELLBORE,
+            uuid: wellboreUuid ?? "",
+        });
+    }
+    // Leave AFTER checking global, othwise the select menu will highlight the wrong value
+    const selectedWellboreHeader = useAtomValue(selectedWellboreAtom);
+
+    return [selectedWellboreHeader, setSelectedWellboreHeader];
+}
+
+export function Settings(props: ModuleSettingsProps<InterfaceTypes>) {
+    // Utilities
+    const syncedSettingKeys = props.settingsContext.useSyncedSettingKeys();
+    const syncHelper = new SyncSettingsHelper(syncedSettingKeys, props.workbenchServices);
+
+    // Ensemble selections
+    const ensembleSet = useEnsembleSet(props.workbenchSession);
+
+    const selectedField = useAtomValue(selectedFieldIdentifierAtom);
+    const setSelectedField = useSetAtom(userSelectedFieldIdentifierAtom);
+
+    // Wellbore selection
+    const wellboreHeaders = useAtomValue(drilledWellboreHeadersQueryAtom);
+    const [selectedWellboreHeader, setSelectedWellboreHeader] = useSyncedWellboreSetting(syncHelper);
+
+    const handleWellboreSelectionChange = React.useCallback(
+        function handleWellboreSelectionChange(uuids: string[]) {
+            setSelectedWellboreHeader(uuids[0] ?? null);
+        },
+        [setSelectedWellboreHeader]
+    );
+
+    // Error messages
+    const statusWriter = useSettingsStatusWriter(props.settingsContext);
+    const wellboreHeadersErrorStatus = usePropagateApiErrorToStatusWriter(wellboreHeaders, statusWriter) ?? "";
+
+    return (
+        <div className="flex flex-col h-full">
+            <CollapsibleGroup title="Wellbore" expanded>
+                <Label text="Field">
+                    <FieldDropdown value={selectedField} ensembleSet={ensembleSet} onChange={setSelectedField} />
+                </Label>
+
+                <Label text="Wellbore" wrapperClassName="mt-4">
+                    <PendingWrapper isPending={wellboreHeaders.isFetching} errorMessage={wellboreHeadersErrorStatus}>
+                        {/* 3DViewer has a WellboreSelector, should that one be made shared, and used here? */}
+                        <Select
+                            options={makeWellHeaderOptions(wellboreHeaders.data ?? [])}
+                            value={selectedWellboreHeader ? [selectedWellboreHeader.wellboreUuid] : []}
+                            onChange={handleWellboreSelectionChange}
+                            filter
+                            size={5}
+                        />
+                    </PendingWrapper>
+                </Label>
+            </CollapsibleGroup>
+
+            {/* Spacer to slightly seperate the two collapsible items */}
+            <div className="my-1" />
+
+            <CollapsibleGroup title="Well Log settings" expanded>
+                <ViewerSettings statusWriter={statusWriter} />
+            </CollapsibleGroup>
+
+            <div className="my-1" />
+
+            <TemplateTrackSettings statusWriter={statusWriter} />
+        </div>
+    );
+}
+
+// ? Duplicate from Intersection module code. Move to shared utility file?
+function makeWellHeaderOptions(wellHeaders: WellboreHeader_api[]): SelectOption[] {
+    return wellHeaders.map((wellHeader) => ({
+        value: wellHeader.wellboreUuid,
+        label: wellHeader.uniqueWellboreIdentifier,
+    }));
+}
diff --git a/frontend/src/modules/WellLogViewer/utils/hooks.ts b/frontend/src/modules/WellLogViewer/utils/hooks.ts
new file mode 100644
index 000000000..951f89d3f
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/utils/hooks.ts
@@ -0,0 +1,12 @@
+import React from "react";
+
+import { isEqual } from "lodash";
+
+export function useTrackedGlobalValue<T>(globalValue: T, onGlobalChange: () => void) {
+    const prevGlobal = React.useRef<T | null>(null);
+
+    if (!isEqual(prevGlobal.current, globalValue)) {
+        prevGlobal.current = globalValue;
+        onGlobalChange();
+    }
+}
diff --git a/frontend/src/modules/WellLogViewer/utils/logViewerColors.ts b/frontend/src/modules/WellLogViewer/utils/logViewerColors.ts
new file mode 100644
index 000000000..3acb7df30
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/utils/logViewerColors.ts
@@ -0,0 +1,165 @@
+import { defaultColorPalettes } from "@framework/utils/colorPalettes";
+import { ColorTable } from "@webviz/well-log-viewer/dist/components/ColorTableTypes";
+
+// Using the "Time series" palette to pick line colors
+export const CURVE_COLOR_PALETTE = defaultColorPalettes[2];
+// Colors based on the ones in the Time Series palette
+export const DIFF_CURVE_COLORS = ["#D62728", "#2CA02C"];
+
+// TODO: Copied from the Subsurface component documentation examples, find out how it works exactly, and ask about general color settings
+/* istanbul ignore next  -- Leaving this here as an example, not actually used */
+export const COLOR_TABLES: ColorTable[] = [
+    {
+        name: "Physics",
+        discrete: false,
+        colorNaN: [255, 255, 255],
+        colorBelow: [255, 0, 0],
+        colorAbove: [0, 0, 255],
+        colors: [
+            [0, 255, 0, 0],
+            [0.25, 182, 182, 0],
+            [0.5, 0, 255, 0],
+            [0.75, 0, 182, 182],
+            [1, 0, 0, 255],
+        ],
+    },
+    {
+        name: "Physics reverse",
+        discrete: false,
+        colors: [
+            [0, 0, 0, 255],
+            [0.25, 0, 182, 182],
+            [0.5, 0, 255, 0],
+            [0.75, 182, 182, 0],
+            [1, 255, 0, 0],
+        ],
+    },
+    {
+        name: "Rainbow",
+        discrete: false,
+        colors: [
+            [0, 255, 0, 0],
+            [0.2, 182, 182, 0],
+            [0.4, 0, 255, 0],
+            [0.6, 0, 182, 182],
+            [0.8, 0, 0, 255],
+            [1, 182, 0, 182],
+        ],
+    },
+    {
+        name: "Rainbow reverse",
+        discrete: false,
+        colors: [
+            [0, 182, 0, 182],
+            [0.2, 0, 0, 255],
+            [0.4, 0, 182, 182],
+            [0.6, 0, 255, 0],
+            [0.8, 182, 182, 0],
+            [1, 255, 0, 0],
+        ],
+    },
+    {
+        name: "Colors_set_1",
+        discrete: true,
+        colors: [
+            [0, 255, 13, 186],
+            [1, 255, 64, 53],
+            [2, 247, 255, 164],
+            [3, 112, 255, 97],
+            [4, 9, 254, 133],
+            [5, 254, 4, 135],
+            [6, 255, 5, 94],
+            [7, 32, 50, 255],
+            [8, 109, 255, 32],
+            [9, 254, 146, 92],
+            [10, 185, 116, 255],
+            [11, 255, 144, 1],
+            [12, 157, 32, 255],
+            [13, 255, 26, 202],
+            [14, 73, 255, 35],
+        ],
+    },
+    {
+        name: "Stratigraphy",
+        discrete: true,
+        colorNaN: [255, 64, 64],
+        colors: [
+            [0, 255, 193, 0],
+            [1, 255, 120, 61],
+            [2, 255, 155, 76],
+            [3, 255, 223, 161],
+            [4, 226, 44, 118],
+            [5, 255, 243, 53],
+            [6, 255, 212, 179],
+            [7, 255, 155, 23],
+            [8, 255, 246, 117],
+            [9, 255, 241, 0],
+            [10, 255, 211, 178],
+            [11, 255, 173, 128],
+            [12, 248, 152, 0],
+            [13, 154, 89, 24],
+            [14, 0, 138, 185],
+            [15, 82, 161, 40],
+            [16, 219, 228, 163],
+            [17, 0, 119, 64],
+            [18, 0, 110, 172],
+            [19, 116, 190, 230],
+            [20, 0, 155, 212],
+            [21, 0, 117, 190],
+            [22, 143, 40, 112],
+            [23, 220, 153, 190],
+            [24, 226, 44, 118],
+            [25, 126, 40, 111],
+            [26, 73, 69, 43],
+            [27, 203, 63, 42],
+            [28, 255, 198, 190],
+            [29, 135, 49, 45],
+            [30, 150, 136, 120],
+            [31, 198, 182, 175],
+            [32, 166, 154, 145],
+            [33, 191, 88, 22],
+            [34, 255, 212, 179],
+            [35, 251, 139, 105],
+            [36, 154, 89, 24],
+            [37, 186, 222, 200],
+            [38, 0, 124, 140],
+            [39, 87, 84, 83],
+        ],
+    },
+    {
+        name: "Colors_set_3",
+        discrete: true,
+        colors: [
+            [0, 120, 181, 255],
+            [1, 255, 29, 102],
+            [2, 247, 255, 173],
+            [3, 239, 157, 255],
+            [4, 186, 255, 236],
+            [5, 46, 255, 121],
+            [6, 212, 255, 144],
+            [7, 165, 255, 143],
+            [8, 122, 255, 89],
+            [9, 255, 212, 213],
+        ],
+    },
+    {
+        name: "Porosity",
+        discrete: false,
+        colors: [
+            [0, 255, 246, 117],
+            [0.11, 255, 243, 53],
+            [0.18, 255, 241, 0],
+            [0.25, 155, 193, 0],
+            [0.32, 255, 155, 23],
+            [0.39, 255, 162, 61],
+            [0.46, 255, 126, 45],
+            [0.53, 227, 112, 24],
+            [0.6, 246, 96, 31],
+            [0.67, 229, 39, 48],
+            [0.74, 252, 177, 170],
+            [0.81, 236, 103, 146],
+            [0.88, 226, 44, 118],
+            [1, 126, 40, 111],
+        ],
+    },
+];
diff --git a/frontend/src/modules/WellLogViewer/utils/logViewerTemplate.ts b/frontend/src/modules/WellLogViewer/utils/logViewerTemplate.ts
new file mode 100644
index 000000000..e08f29f37
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/utils/logViewerTemplate.ts
@@ -0,0 +1,156 @@
+/**
+ * Utilities and constants used for generating well-log-viewer template configs
+ */
+import { DropdownOption } from "@lib/components/Dropdown";
+import {
+    Template,
+    TemplatePlotScaleTypes,
+    TemplatePlotTypes,
+    TemplateTrack,
+} from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { v4 } from "uuid";
+
+import { CURVE_COLOR_PALETTE, DIFF_CURVE_COLORS } from "./logViewerColors";
+import { MAIN_AXIS_CURVE } from "./queryDataTransform";
+
+import { TemplatePlotConfig, TemplateTrackConfig } from "../settings/atoms/persistedAtoms";
+
+type PlotDropdownOption = DropdownOption & { value: TemplatePlotTypes };
+type TemplatePlotScaleOption = DropdownOption & { value: TemplatePlotScaleTypes };
+
+export const DEFAULT_MAX_VISIBLE_TRACKS = 5;
+
+export const PLOT_SCALE_OPTIONS: TemplatePlotScaleOption[] = [
+    { label: "Linear", value: "linear" },
+    { label: "Logaritmic", value: "log" },
+];
+
+export const PLOT_TYPES = ["line", "linestep", "dot", "area", "gradientfill", "differential", "stacked"];
+export const PLOT_TYPE_OPTIONS: PlotDropdownOption[] = [
+    { value: "line", label: "Line" },
+    { value: "linestep", label: "Linestep" },
+    { value: "dot", label: "Dot" },
+    { value: "area", label: "Area" },
+    { value: "gradientfill", label: "Gradientfill" },
+    // TODO: Type requires two named curves, ensure the flow for that is good
+    { value: "differential", label: "Differential" },
+
+    // This one is completely different; requires "discrete" metadata
+    // { value: "stacked", label: "Stacked" },
+];
+
+export function isCompositePlotType(type: TemplatePlotTypes) {
+    return ["differential"].includes(type);
+}
+
+export function createLogTemplate(templateTrackConfigs: TemplateTrack[]): Template {
+    return {
+        // AFAIK, this name is not show anywhere
+        name: "Well log viewer",
+        scale: { primary: MAIN_AXIS_CURVE.name, allowSecondary: true },
+        tracks: templateTrackConfigs,
+    };
+}
+
+export function makeTrackPlot(plot: Partial<TemplatePlotConfig>): TemplatePlotConfig {
+    // If colors get put as undefined, new colors are selected EVERY rerender, so we should avoid that
+    const curveColor = plot.color ?? CURVE_COLOR_PALETTE.getColors()[0];
+    const curveColor2 = plot.color2 ?? CURVE_COLOR_PALETTE.getColors()[3];
+    // DIFF_CURVE_COLORS
+    const config: TemplatePlotConfig = {
+        ...plot,
+        _id: plot._id ?? v4(),
+        _isValid: Boolean(plot.name && plot.type),
+        _logAndName: plot._logAndName ?? `${plot.name}::{undefined}`,
+        name: plot.name,
+        type: plot.type,
+        color: curveColor,
+        color2: curveColor2,
+
+        // Reset the values that are curve specific
+        name2: undefined,
+        fill: undefined,
+        fill2: undefined,
+        colorTable: undefined,
+    };
+
+    switch (plot.type) {
+        case "stacked":
+            throw new Error("Stacked graph type currently not supported");
+        case "differential":
+            return {
+                ...config,
+                _isValid: config._isValid && Boolean(plot.name2),
+                name2: plot.name2,
+                fill: DIFF_CURVE_COLORS.at(0),
+                fill2: DIFF_CURVE_COLORS.at(1),
+            };
+
+        case "gradientfill":
+            return {
+                ...config,
+                colorTable: "Continuous",
+            };
+
+        case "line":
+        case "linestep":
+        case "dot":
+        case "area":
+            return config;
+        default:
+            throw new Error(`Unsupported plot type: ${plot.type}`);
+    }
+}
+
+export function isValidPlot(config: Partial<TemplatePlotConfig>): boolean {
+    // This is irregardless of plot type
+    if (!config.type || !config.name || !config.color) return false;
+    if (!PLOT_TYPES.includes(config.type)) return false;
+
+    switch (config.type) {
+        case "stacked":
+            throw new Error("Stacked graph type currently not supported");
+        case "differential":
+            return Boolean(config.name2 && config.color2 && config.fill && config.fill2);
+        case "gradientfill":
+            return Boolean(config.colorTable);
+        default:
+            return true;
+    }
+}
+
+export function transformToTrackConfigs(objs: any[]): TemplateTrackConfig[] {
+    return objs.map(transformToTrackConfig);
+}
+
+function transformToTrackConfig(obj: any): TemplateTrackConfig {
+    // ! Remember to keep this up to date if the config's structure changes
+    const requiredFields = {
+        title: obj.title,
+        plots: obj.plots,
+    };
+
+    const optionalFields = {
+        _id: obj._id,
+        required: obj.required,
+        width: obj.width,
+        scale: obj.scale,
+        domain: obj.domain,
+    };
+
+    validateRequiredFields(requiredFields);
+
+    return {
+        ...optionalFields,
+        _id: optionalFields._id ?? v4(),
+        title: requiredFields.title,
+        plots: requiredFields.plots.map(makeTrackPlot),
+    };
+}
+
+function validateRequiredFields<T>(partialObj: Partial<T>): asserts partialObj is T {
+    if (Object.values(partialObj).some((v) => v === undefined)) {
+        throw new Error("Missing required fields");
+    }
+}
diff --git a/frontend/src/modules/WellLogViewer/utils/queryDataTransform.ts b/frontend/src/modules/WellLogViewer/utils/queryDataTransform.ts
new file mode 100644
index 000000000..f7360958c
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/utils/queryDataTransform.ts
@@ -0,0 +1,212 @@
+/**
+ * Utilities to convert fetched well log data to the JSON well-log format (see https://jsonwelllogformat.org/)
+ */
+import { WellboreLogCurveData_api, WellboreTrajectory_api } from "@api";
+import { IntersectionReferenceSystem } from "@equinor/esv-intersection";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+import {
+    WellLog,
+    WellLogCurve,
+    WellLogDataRow,
+    WellLogHeader,
+} from "@webviz/well-log-viewer/dist/components/WellLogTypes";
+import { WellPickProps } from "@webviz/well-log-viewer/dist/components/WellLogView";
+
+import _ from "lodash";
+
+import { COLOR_TABLES } from "./logViewerColors";
+
+export const MAIN_AXIS_CURVE: WellLogCurve = {
+    name: "MD",
+    unit: "M",
+    dimensions: 1,
+    valueType: "float",
+};
+
+export const SECONDARY_AXIS_CURVE: WellLogCurve = {
+    name: "DVER",
+    unit: "M",
+    dimensions: 1,
+    valueType: "float",
+};
+
+export function createWellLog(
+    curveData: WellboreLogCurveData_api[],
+    wellboreTrajectory: WellboreTrajectory_api,
+    referenceSystem: IntersectionReferenceSystem,
+    padDataWithEmptyRows = false
+): WellLog {
+    // TODO: these all iterate over the curve data list, so should probably just combine them into a single reduce method to optimize
+    const header = createLogHeader(wellboreTrajectory);
+
+    // ! Important: Always make sure that the data row and curve arrays are in the same order!
+    const curves = createLogCurves(curveData);
+    const data = createLogData(curveData, wellboreTrajectory, referenceSystem, padDataWithEmptyRows);
+
+    return { header, curves, data };
+}
+
+function createLogCurves(curveData: WellboreLogCurveData_api[]): WellLogCurve[] {
+    return [MAIN_AXIS_CURVE, SECONDARY_AXIS_CURVE, ...curveData.map(apiCurveToLogCurve)];
+}
+
+function apiCurveToLogCurve(curve: WellboreLogCurveData_api): WellLogCurve {
+    return {
+        name: curve.name,
+        // ! The Well Log JSON format does *technically* support multiple dimensions, but the subsurface component does not
+        // dimensions: curve.dataPoints[0].length - 1,
+        dimensions: 1,
+        valueType: typeof curve.dataPoints[0][1],
+        // ? if this is just gonna be the meter in depth for all of them
+        unit: curve.unit,
+        description: curve.curveDescription,
+        // quantity,
+        // description
+    };
+}
+
+type SafeWellLogDataRow = [number, ...(WellLogDataRow | [])];
+type DataRowAccumulatorMap = Record<number, SafeWellLogDataRow>;
+
+function createLogData(
+    curveData: WellboreLogCurveData_api[],
+    wellboreTrajectory: WellboreTrajectory_api,
+    referenceSystem: IntersectionReferenceSystem,
+    padWithEmptyRows: boolean
+): SafeWellLogDataRow[] {
+    // We add 2 since each row also includes the MD and TVD axis curves
+    const rowLength = curveData.length + 2;
+    const rowAcc: DataRowAccumulatorMap = {};
+
+    let minCurveMd = Number.MAX_VALUE;
+    let maxCurveMd = Number.MIN_VALUE;
+
+    curveData.forEach((curve, curveIndex) => {
+        if (curve.indexMin < minCurveMd) minCurveMd = curve.indexMin;
+        if (curve.indexMax > maxCurveMd) maxCurveMd = curve.indexMax;
+
+        curve.dataPoints.forEach(([scaleIdx, entry, ...restData]) => {
+            if (!scaleIdx) return console.warn("Unexpected null for scale entry");
+            if (restData.length) console.warn("Multi-dimensional data not supported, using first value only");
+
+            maybeInjectDataRow(rowAcc, scaleIdx, rowLength, referenceSystem);
+
+            rowAcc[scaleIdx][curveIndex + 2] = entry === curve.noDataValue ? null : entry;
+        });
+    });
+
+    if (padWithEmptyRows) {
+        wellboreTrajectory.mdArr.forEach((mdValue) => {
+            if (mdValue <= maxCurveMd && mdValue >= minCurveMd) return;
+
+            maybeInjectDataRow(rowAcc, mdValue, rowLength, referenceSystem);
+        });
+    }
+
+    return _.sortBy(Object.values(rowAcc), "0");
+}
+
+function maybeInjectDataRow(
+    rowAcc: DataRowAccumulatorMap,
+    targetMdValue: number,
+    rowLength: number,
+    referenceSystem: IntersectionReferenceSystem
+) {
+    if (!rowAcc[targetMdValue]) {
+        rowAcc[targetMdValue] = Array(rowLength).fill(null) as SafeWellLogDataRow;
+        rowAcc[targetMdValue][0] = targetMdValue;
+        rowAcc[targetMdValue][1] = referenceSystem.project(targetMdValue)[1] ?? 0;
+    }
+}
+
+function createLogHeader(wellboreTrajectory: WellboreTrajectory_api): WellLogHeader {
+    // TODO: Might want more data from https://api.equinor.com/api-details#api=equinor-subsurfacedata-api-v3&operation=get-api-v-api-version-welllog-wellboreuuid, which provides:
+    /*
+    {
+        "logName": "string",
+        "logVersion": 0,
+        "sourceUpdateDate": "string",
+        "curveName": "string",
+        "curveVersion": 0,
+        "curveUnit": "string",
+        "logActivity": "string",
+        "dateLogged": "string",
+        "loggingNumber": "string",
+        "casingSizeManual": "string"
+    }
+    */
+
+    return {
+        ...getDerivedLogHeaderValues(wellboreTrajectory),
+    };
+}
+
+type PartialHeader = Pick<WellLogHeader, "startIndex" | "endIndex" | "step">;
+
+function getDerivedLogHeaderValues(wellboreTrajectory: WellboreTrajectory_api): PartialHeader {
+    return {
+        startIndex: wellboreTrajectory.mdArr[0] ?? 0,
+        endIndex: wellboreTrajectory.mdArr[wellboreTrajectory.mdArr.length - 1] ?? 4000,
+        // Unsure if this one is even used?
+        step: 1,
+    };
+}
+
+export function createLogViewerWellpicks(wellborePicks: WellPicksLayerData): WellPickProps {
+    let wellpickData = generateWellpickData(wellborePicks);
+    wellpickData = mergeStackedPicks(wellpickData);
+
+    return {
+        wellpick: {
+            header: {},
+            curves: [
+                MAIN_AXIS_CURVE,
+                {
+                    name: "PICK",
+                    valueType: "string",
+                    dimensions: 1,
+                },
+            ],
+            data: wellpickData,
+        },
+        name: "PICK",
+        color: "Stratigraphy",
+        // TODO: Color table should be generated form workbench settings
+        colorTables: COLOR_TABLES,
+    };
+}
+
+function generateWellpickData(wellborePicks: WellPicksLayerData): WellLogDataRow[] {
+    const rowsFromNonUnitPicks = wellborePicks.nonUnitPicks.map(pickToDataRow);
+    // Each unit-pick consists of two picks, entry and exit
+    const rowsFromUnitPicks = wellborePicks.unitPicks.flatMap(({ entryPick, exitPick }) => [
+        pickToDataRow(entryPick),
+        pickToDataRow(exitPick),
+    ]);
+
+    return [...rowsFromNonUnitPicks, ...rowsFromUnitPicks];
+}
+
+function pickToDataRow(pick: WellPicksLayerData["nonUnitPicks"][0]): WellLogDataRow {
+    return [pick.md, pick.identifier];
+}
+
+// ! The well log viewer does not support stacked wellpicks (same MD), and will render them on top of eachother!
+// ! As a workaround, we merge stacked picks into a single pick with all their names.
+function mergeStackedPicks(wellborePicks: WellLogDataRow[]): WellLogDataRow[] {
+    const mergedPicks: Record<number, WellLogDataRow> = {};
+
+    wellborePicks.forEach((pick) => {
+        const md = pick[0] as number;
+
+        if (!mergedPicks[md]) mergedPicks[md] = pick;
+        else mergedPicks[md] = mergePicks(mergedPicks[md], pick);
+    });
+
+    return Object.values(mergedPicks);
+}
+
+function mergePicks(pick1: WellLogDataRow, pick2: WellLogDataRow): WellLogDataRow {
+    // ! I have no clue how the well-log viewer computes the colors, but if I DONT use a plus here they all end up having the same color???
+    return [pick1[0], `${pick1[1]} + ${pick2[1]}`];
+}
diff --git a/frontend/src/modules/WellLogViewer/view/ReadoutWrapper.tsx b/frontend/src/modules/WellLogViewer/view/ReadoutWrapper.tsx
new file mode 100644
index 000000000..61be9d318
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/ReadoutWrapper.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { InfoItem, ReadoutBox, ReadoutItem } from "@modules/_shared/components/ReadoutBox";
+import { Info } from "@webviz/well-log-viewer/dist/components/InfoTypes";
+import { TemplateTrack } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import _ from "lodash";
+
+import { DEFAULT_MAX_VISIBLE_TRACKS } from "../utils/logViewerTemplate";
+
+export type ReadoutWrapperProps = {
+    templateTracks: TemplateTrack[];
+    wellLogReadout: Info[];
+    hide?: boolean;
+};
+
+export function ReadoutWrapper(props: ReadoutWrapperProps): React.ReactNode {
+    if (_.maxBy(props.wellLogReadout, "iTrack")?.iTrack === -1) return null;
+
+    const readoutItems = props.hide ? [] : parseWellLogReadout(props.wellLogReadout, props.templateTracks);
+
+    return <ReadoutBox maxNumItems={DEFAULT_MAX_VISIBLE_TRACKS + 1} readoutItems={readoutItems} noLabelColor />;
+}
+
+function parseWellLogReadout(wellLogInfo: Info[], templateTracks: TemplateTrack[]): ReadoutItem[] {
+    return _.chain(wellLogInfo)
+        .filter(({ type }) => type !== "separator")
+        .groupBy("iTrack")
+        .entries()
+        .sortBy(0)
+        .map(([iTrack, infos]) => infoToReadoutItem(infos, Number(iTrack), templateTracks))
+        .value();
+}
+
+function infoToReadoutItem(infos: Info[], iTrack: number, templateTracks: TemplateTrack[]): ReadoutItem {
+    // The axis curves are printes with index -1
+    if (iTrack === -1) {
+        return {
+            label: "Depth",
+            info: infos.map(curveInfoToReadoutInfo),
+        };
+    } else {
+        const trackTemplate = templateTracks[iTrack];
+        return {
+            label: trackTemplate.title,
+            info: infos.map(curveInfoToReadoutInfo),
+        };
+    }
+}
+
+function curveInfoToReadoutInfo(info: Info): InfoItem {
+    return {
+        name: info.name ?? "",
+        value: info.value,
+        unit: info.units ?? "",
+        adornment: <div className="w-2 h-2 rounded-full" style={{ background: info.color }} />,
+    };
+}
diff --git a/frontend/src/modules/WellLogViewer/view/SubsurfaceLogViewerWrapper.tsx b/frontend/src/modules/WellLogViewer/view/SubsurfaceLogViewerWrapper.tsx
new file mode 100644
index 000000000..a0332d80a
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/SubsurfaceLogViewerWrapper.tsx
@@ -0,0 +1,265 @@
+import React from "react";
+
+import { WellboreHeader_api, WellboreLogCurveData_api, WellboreTrajectory_api } from "@api";
+import { IntersectionReferenceSystem } from "@equinor/esv-intersection";
+import { ModuleViewProps } from "@framework/Module";
+import { ViewContext } from "@framework/ModuleContext";
+import { SyncSettingKey } from "@framework/SyncSettings";
+import { GlobalTopicDefinitions, WorkbenchServices } from "@framework/WorkbenchServices";
+import { ColorScaleGradientType } from "@lib/utils/ColorScale";
+import { createContinuousColorScaleForMap } from "@modules/3DViewer/view/utils/colorTables";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+import { WellLogViewer } from "@webviz/well-log-viewer";
+import { Info } from "@webviz/well-log-viewer/dist/components/InfoTypes";
+import { TemplateTrack } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+import { WellLogController } from "@webviz/well-log-viewer/dist/components/WellLogView";
+
+import { isEqual } from "lodash";
+
+import { ReadoutWrapper } from "./ReadoutWrapper";
+
+import { InterfaceTypes } from "../interfaces";
+import { createLogTemplate } from "../utils/logViewerTemplate";
+import { createLogViewerWellpicks, createWellLog } from "../utils/queryDataTransform";
+
+const AXIS_MNEMOS = {
+    md: ["DEPTH", "DEPT", "MD", "TDEP", "MD_RKB"],
+    tvd: ["TVD", "TVDSS", "DVER", "TVD_MSL"],
+    time: ["TIME"],
+};
+
+const AXIS_TITLES = {
+    md: "DEPTH",
+    tvd: "TVD",
+    time: "TIME",
+};
+
+type GlobalHoverMd = GlobalTopicDefinitions["global.hoverMd"];
+
+export type SubsurfaceLogViewerWrapperProps = {
+    // Data
+    wellboreHeader: WellboreHeader_api | null;
+    curveData: WellboreLogCurveData_api[];
+    trajectoryData: WellboreTrajectory_api;
+    intersectionReferenceSystem: IntersectionReferenceSystem;
+    wellpicks: WellPicksLayerData;
+
+    // Viewer config
+    horizontal: boolean;
+    padDataWithEmptyRows: boolean;
+    templateTracks: TemplateTrack[];
+
+    // Passing the module props to make context and service access less cumbersome
+    moduleProps: ModuleViewProps<InterfaceTypes>;
+};
+
+function useGloballySyncedMd(
+    wellboreHeader: WellboreHeader_api | null,
+    wellLogController: WellLogController | null,
+    workbenchServices: WorkbenchServices,
+    viewContext: ViewContext<InterfaceTypes>
+) {
+    const instanceId = viewContext.getInstanceIdString();
+    const wellboreUuid = wellboreHeader?.wellboreUuid ?? "";
+
+    const lastRecievedChange = React.useRef<GlobalHoverMd>(null);
+
+    const handleGlobalValueChange = React.useCallback(
+        (newValue: GlobalHoverMd) => {
+            if (!isEqual(lastRecievedChange, newValue)) {
+                lastRecievedChange.current = newValue;
+
+                if (newValue?.wellboreUuid === wellboreUuid) {
+                    wellLogController?.selectContent([newValue.md, undefined]);
+                }
+            }
+        },
+        [wellLogController, wellboreUuid]
+    );
+
+    const broadcastGlobalMdChange = React.useCallback(
+        (newMd: number | null) => {
+            const payload: GlobalHoverMd = newMd ? { wellboreUuid, md: newMd } : null;
+
+            workbenchServices.publishGlobalData("global.hoverMd", payload, instanceId);
+        },
+        [instanceId, wellboreUuid, workbenchServices]
+    );
+
+    React.useEffect(() => {
+        return workbenchServices.subscribe("global.hoverMd", handleGlobalValueChange, instanceId);
+    }, [handleGlobalValueChange, instanceId, workbenchServices]);
+
+    return broadcastGlobalMdChange;
+}
+
+function useGloballySyncedVerticalScale(
+    wellLogController: WellLogController | null,
+    workbenchServices: WorkbenchServices,
+    viewContext: ViewContext<InterfaceTypes>
+) {
+    // TODO: This value DOES NOT update properly when you ENABLE the setting. So something else needs to trigger a re-render
+    const syncableSettingKeys = viewContext.useSyncedSettingKeys();
+    const moduleInstanceId = viewContext.getInstanceIdString();
+    const verticalSyncActive = syncableSettingKeys.includes(SyncSettingKey.VERTICAL_SCALE);
+
+    // Cannot use the SyncHelper utility here, since we want to avoid a re-render and instead propagate the change via the well log controller
+    const handleGlobalVertScaleChange = React.useCallback(
+        (newScale: number | null) => {
+            if (newScale === null || newScale < 1) return;
+            if (!wellLogController) return console.warn("No well log controller set");
+
+            wellLogController.zoomContent(newScale);
+        },
+        [wellLogController]
+    );
+
+    React.useEffect(() => {
+        if (verticalSyncActive) {
+            const unsubscribe = workbenchServices.subscribe(
+                "global.syncValue.verticalScale",
+                handleGlobalVertScaleChange,
+                moduleInstanceId
+            );
+
+            return unsubscribe;
+        }
+    }, [workbenchServices, verticalSyncActive, syncableSettingKeys, moduleInstanceId, handleGlobalVertScaleChange]);
+
+    const broadcastVerticalScaleChange = React.useCallback(
+        (newScale: number | null) => {
+            if (!verticalSyncActive || newScale === null) return;
+
+            workbenchServices.publishGlobalData("global.syncValue.verticalScale", newScale, moduleInstanceId);
+        },
+        [workbenchServices, moduleInstanceId, verticalSyncActive]
+    );
+
+    return broadcastVerticalScaleChange;
+}
+
+export function useViewerDataTransform(props: SubsurfaceLogViewerWrapperProps) {
+    const trackConfigs = props.templateTracks;
+    const trajectoryData = props.trajectoryData;
+    const curveData = props.curveData;
+    const intersectionReferenceSystem = props.intersectionReferenceSystem;
+    const padDataWithEmptyRows = props.padDataWithEmptyRows;
+
+    // Curve data transform is a bit heavy, so we use Memo-hooks to reduce re-render overhead
+    const template = React.useMemo(() => createLogTemplate(trackConfigs), [trackConfigs]);
+    const wellpicks = React.useMemo(() => createLogViewerWellpicks(props.wellpicks), [props.wellpicks]);
+    const welllog = React.useMemo(
+        () => createWellLog(curveData, trajectoryData, intersectionReferenceSystem, padDataWithEmptyRows),
+        [curveData, trajectoryData, intersectionReferenceSystem, padDataWithEmptyRows]
+    );
+
+    return { template, welllog, wellpicks };
+}
+
+export function SubsurfaceLogViewerWrapper(props: SubsurfaceLogViewerWrapperProps) {
+    // <WellLogViewer /> uses an internal controller to change things like zoom, selection and so on. Use this when possible to avoid uneccessary re-renders
+    const [wellLogController, setWellLogController] = React.useState<WellLogController | null>(null);
+    const [wellLogReadout, setWellLogReadout] = React.useState<Info[]>([]);
+    const [showReadoutBox, setShowReadoutBox] = React.useState<boolean>(false);
+
+    const { template, welllog, wellpicks } = useViewerDataTransform(props);
+
+    const colorScale = props.moduleProps.workbenchSettings.useContinuousColorScale({
+        gradientType: ColorScaleGradientType.Sequential,
+    });
+    const colorTables = React.useMemo(() => createContinuousColorScaleForMap(colorScale), [colorScale]);
+
+    // Global value syncronization
+    const broadcastGlobalMdChange = useGloballySyncedMd(
+        props.wellboreHeader,
+        wellLogController,
+        props.moduleProps.workbenchServices,
+        props.moduleProps.viewContext
+    );
+
+    const broadcastVerticalScaleChange = useGloballySyncedVerticalScale(
+        wellLogController,
+        props.moduleProps.workbenchServices,
+        props.moduleProps.viewContext
+    );
+
+    const handleMouseOut = React.useCallback(
+        function handleMouseOut() {
+            broadcastGlobalMdChange(null);
+            setShowReadoutBox(false);
+        },
+        [broadcastGlobalMdChange]
+    );
+
+    const handleMouseIn = React.useCallback(function handleMouseIn() {
+        setShowReadoutBox(true);
+    }, []);
+
+    // Log viewer module callbacks
+    const handleCreateController = React.useCallback(function handleCreateController(controller: WellLogController) {
+        // ? Something weird happens during HMR, where the controller ref becomes null, but this event still fires?
+        console.debug("Setting well log viewer controller...", controller);
+        setWellLogController(controller);
+    }, []);
+
+    const handleContentRescale = React.useCallback(
+        function handleContentRescale() {
+            const currentScale = wellLogController?.getContentZoom();
+
+            if (currentScale) broadcastVerticalScaleChange(currentScale);
+        },
+        [broadcastVerticalScaleChange, wellLogController]
+    );
+
+    const handleSelection = React.useCallback(
+        function handleSelection() {
+            const currentSelection = wellLogController?.getContentSelection()[0] ?? null;
+
+            broadcastGlobalMdChange(currentSelection);
+
+            // TODO: It's possible to pin and select a range, should we have that color a section of other synced intersections?
+        },
+        [broadcastGlobalMdChange, wellLogController]
+    );
+
+    const handleInfoFilled = React.useCallback(function handleInfoFilled(infos: Info[]) {
+        setWellLogReadout(infos);
+    }, []);
+
+    const handleTrackMouseEvent = React.useCallback(
+        (/* welllogView: WellLogView, e: TrackMouseEvent */) => {
+            // ! No-op method. Passed to the viewer to make it not show the context menu for tracks
+        },
+        []
+    );
+
+    return (
+        // The weird tailwind-class hides the built-in hover tooltip
+        <div
+            className="h-full [&_.welllogview_.overlay_.depth]:!invisible"
+            onMouseEnter={handleMouseIn}
+            onMouseLeave={handleMouseOut}
+        >
+            <WellLogViewer
+                id="well-log-viewer"
+                welllog={welllog}
+                template={template}
+                wellpick={wellpicks}
+                horizontal={props.horizontal}
+                // Removes the default right-side readout panel
+                layout={{ right: undefined }}
+                axisMnemos={AXIS_MNEMOS}
+                axisTitles={AXIS_TITLES}
+                colorTables={colorTables}
+                // Disable the pin and selection logic, since we dont use that for anything yet
+                options={{ hideSelectionInterval: true }}
+                onTrackMouseEvent={handleTrackMouseEvent}
+                onCreateController={handleCreateController}
+                onContentSelection={handleSelection}
+                onContentRescale={handleContentRescale}
+                onInfoFilled={handleInfoFilled}
+            />
+            {showReadoutBox && <ReadoutWrapper templateTracks={props.templateTracks} wellLogReadout={wellLogReadout} />}
+        </div>
+    );
+}
diff --git a/frontend/src/modules/WellLogViewer/view/atoms/derivedAtoms.ts b/frontend/src/modules/WellLogViewer/view/atoms/derivedAtoms.ts
new file mode 100644
index 000000000..373b29e20
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/atoms/derivedAtoms.ts
@@ -0,0 +1,28 @@
+import { WellboreTrajectory_api } from "@api";
+import { IntersectionReferenceSystem } from "@equinor/esv-intersection";
+
+import { atom } from "jotai";
+import _ from "lodash";
+
+import { wellboreTrajectoryQueryAtom } from "./queryAtoms";
+
+export const intersectionReferenceSystemAtom = atom<IntersectionReferenceSystem | null>((get) => {
+    const wellboreTrajectoryQuery = get(wellboreTrajectoryQueryAtom);
+
+    if (wellboreTrajectoryQuery.isPending || wellboreTrajectoryQuery.isError) return null;
+
+    const systemPath = trajectoryToRefferenceSystemPath(wellboreTrajectoryQuery.data);
+    const offset = wellboreTrajectoryQuery.data.mdArr[0];
+
+    const referenceSystem = new IntersectionReferenceSystem(systemPath);
+
+    referenceSystem.offset = offset;
+
+    return referenceSystem;
+});
+
+function trajectoryToRefferenceSystemPath(trajectory: WellboreTrajectory_api): number[][] {
+    return _.zipWith(trajectory.eastingArr, trajectory.northingArr, trajectory.tvdMslArr, (easting, northing, tvd) => {
+        return [easting, northing, tvd];
+    });
+}
diff --git a/frontend/src/modules/WellLogViewer/view/atoms/queryAtoms.ts b/frontend/src/modules/WellLogViewer/view/atoms/queryAtoms.ts
new file mode 100644
index 000000000..eefbda088
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/atoms/queryAtoms.ts
@@ -0,0 +1,20 @@
+import { WellboreTrajectory_api } from "@api";
+import { apiService } from "@framework/ApiService";
+import { settingsToViewInterfaceInitialization } from "@modules/WellLogViewer/interfaces";
+
+import { atomWithQuery } from "jotai-tanstack-query";
+
+import { DEFAULT_OPTIONS } from "../queries/shared";
+
+export const wellboreTrajectoryQueryAtom = atomWithQuery((get) => {
+    // Getting the settings atom via the interface for clearer seperation
+    const wellboreUuid = settingsToViewInterfaceInitialization.wellboreHeader(get)?.wellboreUuid ?? "";
+
+    return {
+        queryKey: ["getWellTrajectories", wellboreUuid],
+        queryFn: () => apiService.well.getWellTrajectories([wellboreUuid]),
+        select: (data: WellboreTrajectory_api[]) => data[0],
+        enabled: Boolean(wellboreUuid),
+        ...DEFAULT_OPTIONS,
+    };
+});
diff --git a/frontend/src/modules/WellLogViewer/view/queries/shared.ts b/frontend/src/modules/WellLogViewer/view/queries/shared.ts
new file mode 100644
index 000000000..c13b577b6
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/queries/shared.ts
@@ -0,0 +1,7 @@
+export const DEFAULT_STALE_TIME = 60 * 1000;
+export const DEFAULT_CACHE_TIME = 60 * 1000;
+
+export const DEFAULT_OPTIONS = {
+    staleTime: DEFAULT_STALE_TIME,
+    gcTime: DEFAULT_CACHE_TIME,
+};
diff --git a/frontend/src/modules/WellLogViewer/view/queries/wellLogQueries.ts b/frontend/src/modules/WellLogViewer/view/queries/wellLogQueries.ts
new file mode 100644
index 000000000..5247516d5
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/queries/wellLogQueries.ts
@@ -0,0 +1,19 @@
+import { WellboreLogCurveData_api } from "@api";
+import { apiService } from "@framework/ApiService";
+import { UseQueryResult, useQueries } from "@tanstack/react-query";
+
+import { DEFAULT_OPTIONS } from "./shared";
+
+export function useCurveDataQueries(
+    wellboreUuid: string,
+    curveNames: string[]
+): UseQueryResult<WellboreLogCurveData_api>[] {
+    return useQueries({
+        queries: curveNames.map((name) => ({
+            queryKey: ["getLogCurveData", wellboreUuid, name],
+            queryFn: () => apiService.well.getLogCurveData(wellboreUuid, name),
+            enabled: Boolean(wellboreUuid && name),
+            ...DEFAULT_OPTIONS,
+        })),
+    });
+}
diff --git a/frontend/src/modules/WellLogViewer/view/queries/wellboreQueries.ts b/frontend/src/modules/WellLogViewer/view/queries/wellboreQueries.ts
new file mode 100644
index 000000000..53ae15c77
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/queries/wellboreQueries.ts
@@ -0,0 +1,13 @@
+import { apiService } from "@framework/ApiService";
+import { useQuery } from "@tanstack/react-query";
+
+import { DEFAULT_OPTIONS } from "./shared";
+
+export function useWellboreTrajectoryQuery(wellboreUuid: string) {
+    return useQuery({
+        queryKey: ["getWellTrajectories", wellboreUuid],
+        queryFn: () => apiService.well.getWellTrajectories([wellboreUuid]),
+        enabled: Boolean(wellboreUuid),
+        ...DEFAULT_OPTIONS,
+    });
+}
diff --git a/frontend/src/modules/WellLogViewer/view/view.tsx b/frontend/src/modules/WellLogViewer/view/view.tsx
new file mode 100644
index 000000000..0c09ba51b
--- /dev/null
+++ b/frontend/src/modules/WellLogViewer/view/view.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+
+import { WellboreLogCurveData_api } from "@api";
+import { ModuleViewProps } from "@framework/Module";
+import { useViewStatusWriter } from "@framework/StatusWriter";
+import { ContentError } from "@modules/_shared/components/ContentMessage";
+import {
+    usePropagateAllApiErrorsToStatusWriter,
+    usePropagateApiErrorToStatusWriter,
+} from "@modules/_shared/hooks/usePropagateApiErrorToStatusWriter";
+import { CircularProgress } from "@mui/material";
+
+import { useAtomValue } from "jotai";
+
+import { SubsurfaceLogViewerWrapper } from "./SubsurfaceLogViewerWrapper";
+import { intersectionReferenceSystemAtom } from "./atoms/derivedAtoms";
+import { wellboreTrajectoryQueryAtom } from "./atoms/queryAtoms";
+import { useCurveDataQueries } from "./queries/wellLogQueries";
+
+import { InterfaceTypes } from "../interfaces";
+
+export function View(props: ModuleViewProps<InterfaceTypes>) {
+    const statusWriter = useViewStatusWriter(props.viewContext);
+
+    // Passed setting atoms
+    const selectedWellboreHeader = props.viewContext.useSettingsToViewInterfaceValue("wellboreHeader");
+    const requiredDataCurves = props.viewContext.useSettingsToViewInterfaceValue("requiredDataCurves");
+    const templateTracks = props.viewContext.useSettingsToViewInterfaceValue("templateTracks");
+    const viewerHorizontal = props.viewContext.useSettingsToViewInterfaceValue("viewerHorizontal");
+    const padDataWithEmptyRows = props.viewContext.useSettingsToViewInterfaceValue("padDataWithEmptyRows");
+
+    const wellborePicks = props.viewContext.useSettingsToViewInterfaceValue("selectedWellborePicks");
+
+    // Derived vals
+    const wellboreUuid = selectedWellboreHeader?.wellboreUuid ?? "";
+
+    // External Data
+    const curveDataQueries = useCurveDataQueries(wellboreUuid, requiredDataCurves);
+    const wellboreTrajectoryDataQuery = useAtomValue(wellboreTrajectoryQueryAtom);
+    const intersectionReferenceSystem = useAtomValue(intersectionReferenceSystemAtom);
+
+    // TODO: Have every single query propagete their errors?
+    // forEach: usePropagateApiErrorToStatusWriter(query, statusWriter);
+    usePropagateApiErrorToStatusWriter(wellboreTrajectoryDataQuery, statusWriter);
+    usePropagateAllApiErrorsToStatusWriter(curveDataQueries, statusWriter);
+
+    const mainElementsLoading = !curveDataQueries.every((q) => q.isFetched) || !wellboreTrajectoryDataQuery.isFetched;
+    statusWriter.setLoading(mainElementsLoading);
+
+    const mainElementsSuccess = curveDataQueries.every((q) => q.isSuccess) && wellboreTrajectoryDataQuery.isSuccess;
+
+    React.useEffect(
+        function setModuleName() {
+            let title = "";
+
+            if (selectedWellboreHeader?.uniqueWellboreIdentifier) {
+                title = selectedWellboreHeader.uniqueWellboreIdentifier;
+            } else {
+                title = "Well log Viewer";
+            }
+
+            props.viewContext.setInstanceTitle(title);
+        },
+        [props.viewContext, selectedWellboreHeader?.uniqueWellboreIdentifier]
+    );
+
+    if (mainElementsLoading) {
+        return (
+            <div className="absolute w-full h-full z-10 bg-white opacity-50 flex items-center justify-center">
+                <CircularProgress />
+            </div>
+        );
+    } else if (!mainElementsSuccess) {
+        return <ContentError>Error loading curve data.</ContentError>;
+    } else {
+        const curveData = curveDataQueries.map(({ data }) => data as WellboreLogCurveData_api);
+        if (!intersectionReferenceSystem) throw new Error("Unexpected null for reference system");
+
+        return (
+            <SubsurfaceLogViewerWrapper
+                wellboreHeader={selectedWellboreHeader}
+                trajectoryData={wellboreTrajectoryDataQuery.data}
+                intersectionReferenceSystem={intersectionReferenceSystem}
+                wellpicks={wellborePicks}
+                curveData={curveData}
+                templateTracks={templateTracks}
+                horizontal={viewerHorizontal}
+                padDataWithEmptyRows={padDataWithEmptyRows}
+                moduleProps={props}
+            />
+        );
+    }
+}
diff --git a/frontend/src/modules/_shared/hooks/usePropagateApiErrorToStatusWriter.ts b/frontend/src/modules/_shared/hooks/usePropagateApiErrorToStatusWriter.ts
index 7cb0ec518..8632f0e3e 100644
--- a/frontend/src/modules/_shared/hooks/usePropagateApiErrorToStatusWriter.ts
+++ b/frontend/src/modules/_shared/hooks/usePropagateApiErrorToStatusWriter.ts
@@ -2,7 +2,7 @@ import { SettingsStatusWriter, ViewStatusWriter } from "@framework/StatusWriter"
 import { ApiErrorHelper } from "@framework/utils/ApiErrorHelper";
 import { UseQueryResult } from "@tanstack/react-query";
 
-export function usePropagateApiErrorToStatusWriter(
+function propagateError(
     queryResult: UseQueryResult<any, any>,
     statusWriter: ViewStatusWriter | SettingsStatusWriter
 ): string | null {
@@ -17,3 +17,17 @@ export function usePropagateApiErrorToStatusWriter(
 
     return errorMessage;
 }
+
+export function usePropagateApiErrorToStatusWriter(
+    queryResult: UseQueryResult<any, any>,
+    statusWriter: ViewStatusWriter | SettingsStatusWriter
+): string | null {
+    return propagateError(queryResult, statusWriter);
+}
+
+export function usePropagateAllApiErrorsToStatusWriter(
+    queryResults: UseQueryResult<any, any>[],
+    statusWriter: ViewStatusWriter | SettingsStatusWriter
+): (string | null)[] {
+    return queryResults.map((res) => propagateError(res, statusWriter)).filter((error) => error);
+}
diff --git a/frontend/src/modules/registerAllModules.ts b/frontend/src/modules/registerAllModules.ts
index f16f380d4..721d354c4 100644
--- a/frontend/src/modules/registerAllModules.ts
+++ b/frontend/src/modules/registerAllModules.ts
@@ -15,6 +15,7 @@ import "./SimulationTimeSeriesSensitivity/registerModule";
 import "./SubsurfaceMap/registerModule";
 import "./TornadoChart/registerModule";
 import "./WellCompletions/registerModule";
+import "./WellLogViewer/registerModule";
 import "./Vfp/registerModule";
 
 
diff --git a/frontend/tests/unit/WellLogViewer/logViewerTemplate.test.ts b/frontend/tests/unit/WellLogViewer/logViewerTemplate.test.ts
new file mode 100644
index 000000000..15c9dabfe
--- /dev/null
+++ b/frontend/tests/unit/WellLogViewer/logViewerTemplate.test.ts
@@ -0,0 +1,385 @@
+import { TemplatePlotConfig } from "@modules/WellLogViewer/settings/atoms/persistedAtoms";
+import { CURVE_COLOR_PALETTE, DIFF_CURVE_COLORS } from "@modules/WellLogViewer/utils/logViewerColors";
+import {
+    PLOT_TYPE_OPTIONS,
+    createLogTemplate,
+    isCompositePlotType,
+    isValidPlot,
+    makeTrackPlot,
+} from "@modules/WellLogViewer/utils/logViewerTemplate";
+import { transformToTrackConfigs } from "@modules/WellLogViewer/utils/logViewerTemplate";
+import { MAIN_AXIS_CURVE } from "@modules/WellLogViewer/utils/queryDataTransform";
+import { TemplatePlotTypes } from "@webviz/well-log-viewer/dist/components/WellLogTemplateTypes";
+
+import { describe, expect, test } from "vitest";
+
+// These plot types are "simple", and only require name and color
+const SIMPLE_PLOT_TYPES = ["line", "linestep", "dot", "area"] as TemplatePlotTypes[];
+
+describe("makeTrackPlot tests", () => {
+    test("should be invalid if no name is provided", () => {
+        const plot = { type: "line" as TemplatePlotTypes };
+        const result = makeTrackPlot(plot);
+
+        expect(result).toMatchObject({
+            ...plot,
+            _id: expect.any(String),
+            _isValid: false,
+            color: CURVE_COLOR_PALETTE.getColors()[0],
+            color2: CURVE_COLOR_PALETTE.getColors()[3],
+            fill: undefined,
+            fill2: undefined,
+            colorTable: undefined,
+        });
+    });
+
+    test("should be valid for all simple types if name is provided", () => {
+        SIMPLE_PLOT_TYPES.forEach((type) => {
+            const plot = { name: "SomeCurve", type: type };
+            const result = makeTrackPlot(plot);
+
+            expect(result).toMatchObject({
+                ...plot,
+                _id: expect.any(String),
+                _isValid: true,
+                color: CURVE_COLOR_PALETTE.getColors()[0],
+                color2: CURVE_COLOR_PALETTE.getColors()[3],
+                fill: undefined,
+                fill2: undefined,
+                colorTable: undefined,
+            });
+        });
+    });
+
+    test("should be valid for differential type if name and name2 are provided", () => {
+        const plot = { name: "SomeCurve", name2: "SomeCurve2", type: "differential" as TemplatePlotTypes };
+        const result = makeTrackPlot(plot);
+
+        expect(result).toMatchObject({
+            ...plot,
+            _id: expect.any(String),
+            _isValid: true,
+            color: CURVE_COLOR_PALETTE.getColors()[0],
+            color2: CURVE_COLOR_PALETTE.getColors()[3],
+            fill: DIFF_CURVE_COLORS[0],
+            fill2: DIFF_CURVE_COLORS[1],
+        });
+    });
+
+    test("should throw an error for unsupported 'stacked' plot type", () => {
+        const plot = { name: "SomeCurve", type: "stacked" as TemplatePlotTypes };
+
+        expect(() => makeTrackPlot(plot)).toThrow("Stacked graph type currently not supported");
+    });
+
+    test("should throw an error for unsupported plot type", () => {
+        const plot = { name: "SomeCurve", type: "unsupported" as TemplatePlotTypes };
+
+        expect(() => makeTrackPlot(plot)).toThrow("Unsupported plot type: unsupported");
+    });
+
+    test("should create a valid gradientfill plot config", () => {
+        const plot = { name: "SomeCurve", type: "gradientfill" as TemplatePlotTypes };
+        const result = makeTrackPlot(plot);
+
+        expect(result).toMatchObject({
+            _id: expect.any(String),
+            _isValid: true,
+            colorTable: "Continuous",
+        });
+    });
+
+    test("should use provided colors if provided", () => {
+        const plot = { name: "SomeCurve", type: "line" as TemplatePlotTypes, color: "#123456", color2: "#654321" };
+        const result = makeTrackPlot(plot);
+
+        expect(result).toMatchObject({
+            _id: expect.any(String),
+            _isValid: true,
+            color: "#123456",
+            color2: "#654321",
+        });
+    });
+
+    test("should generate a new _id if not provided", () => {
+        const plot = { type: "line" as TemplatePlotTypes };
+        const result = makeTrackPlot(plot);
+
+        expect(result._id).toBeDefined();
+        expect(result._id).toHaveLength(36); // UUID length
+    });
+
+    test("should retain the provided _id if available", () => {
+        const plot = { name: "SomeCurve", type: "line" as TemplatePlotTypes, _id: "existing-id" };
+        const result = makeTrackPlot(plot);
+
+        expect(result._id).toBe("existing-id");
+    });
+
+    test("should discard other curve specific values when creating a plot", () => {
+        const plot = {
+            name: "SomeCurve",
+            type: "line" as TemplatePlotTypes,
+            // These values are not relevant line-plots
+            fill: "red",
+            fill2: "blue",
+            colorTable: "Discrete",
+        };
+
+        const result = makeTrackPlot(plot);
+
+        expect(result).toMatchObject({
+            fill: undefined,
+            fill2: undefined,
+            colorTable: undefined,
+        });
+    });
+});
+
+describe("Other utilities", () => {
+    test("Should catch invalid plot configs", () => {
+        const type = "line" as TemplatePlotTypes;
+        const config1 = { name: "SomeCurve", color: "#123456" };
+        const config2 = { color: "#123456", type };
+        const config3 = { name: "SomeCurve", type };
+
+        expect(isValidPlot(config1)).toBe(false);
+        expect(isValidPlot(config2)).toBe(false);
+        expect(isValidPlot(config3)).toBe(false);
+
+        ["differential", "gradientfill"].forEach((type) => {
+            const invalid = {
+                name: "SomeCurve",
+                type: type,
+                color: "#123456",
+            } as TemplatePlotConfig;
+
+            expect(isValidPlot(invalid)).toBe(false);
+        });
+
+        const config = { name: "SomeCurve", type: "unsupported", color: "#123456" };
+        // @ts-expect-error Testing invalid plot type
+        expect(isValidPlot(config)).toBe(false);
+
+        const illegalPlotConfig = {
+            name: "SomeCurve",
+            type: "stacked",
+            color: "#123456",
+        } as Partial<TemplatePlotConfig>;
+
+        expect(() => isValidPlot(illegalPlotConfig)).toThrow("Stacked graph type currently not supported");
+    });
+
+    test("Should correctly validate/invalidate a plot config", () => {
+        const config = { name: "SomeCurve", color: "#123456" };
+        expect(isValidPlot(config)).toBe(false);
+
+        SIMPLE_PLOT_TYPES.forEach((type) => {
+            const validPlotConfig = {
+                name: "SomeCurve",
+                type: type,
+                color: "#123456",
+            } as TemplatePlotConfig;
+
+            expect(isValidPlot(validPlotConfig)).toBe(true);
+        });
+
+        const validGradient = {
+            name: "SomeCurve",
+            type: "gradientfill",
+            color: "#123456",
+            colorTable: "Continuous",
+        } as TemplatePlotConfig;
+
+        const validDifferential = {
+            name: "SomeCurve",
+            name2: "SomeOtherCurve",
+            type: "differential",
+            color: "#123456",
+            color2: "#654321",
+            fill: "#abcdef",
+            fill2: "#fedcba",
+        } as TemplatePlotConfig;
+
+        expect(isValidPlot(validGradient)).toBe(true);
+        expect(isValidPlot(validDifferential)).toBe(true);
+    });
+
+    test("Should create a valid log template when given a tracks", () => {
+        const result = createLogTemplate([
+            {
+                title: "Track test 1",
+                plots: [{ name: "Curve 1", type: "line", color: "#123456" }],
+            },
+        ]);
+
+        expect(result).toMatchObject({
+            name: "Well log viewer",
+            scale: { primary: MAIN_AXIS_CURVE.name, allowSecondary: true },
+        });
+        expect(result.tracks).toHaveLength(1);
+    });
+
+    test("Should create a valid log template when given no plots", () => {
+        const result = createLogTemplate([]);
+
+        expect(result).toMatchObject({
+            name: expect.any(String),
+            scale: { primary: MAIN_AXIS_CURVE.name, allowSecondary: true },
+            tracks: [],
+        });
+    });
+
+    test('Should  only differental curve counts as "composite"', () => {
+        PLOT_TYPE_OPTIONS.forEach(({ value }) => {
+            if (value === "differential") {
+                expect(isCompositePlotType(value)).toBe(true);
+            } else {
+                expect(isCompositePlotType(value)).toBe(false);
+            }
+        });
+    });
+});
+
+describe("transformToTrackConfigs tests", () => {
+    test("should transform an array of objects to an array of TemplateTrackConfig objects", () => {
+        const input = [
+            {
+                title: "Track 1",
+                plots: [{ name: "Curve 1", type: "line", color: "#123456" }],
+            },
+            {
+                title: "Track 2",
+                plots: [{ name: "Curve 2", type: "dot", color: "#654321" }],
+            },
+        ];
+
+        const result = transformToTrackConfigs(input);
+
+        expect(result).toHaveLength(2);
+        result.forEach((trackConfig, index) => {
+            expect(trackConfig).toMatchObject({
+                title: input[index].title,
+                plots: input[index].plots.map((plot) => ({
+                    ...plot,
+                    _id: expect.any(String),
+                    _isValid: true,
+                })),
+            });
+        });
+    });
+
+    test("should generate a new _id if not provided", () => {
+        const input = [
+            {
+                title: "Track 1",
+                plots: [{ name: "Curve 1", type: "line", color: "#123456" }],
+            },
+        ];
+
+        const result = transformToTrackConfigs(input);
+
+        expect(result[0]._id).toBeDefined();
+        expect(result[0]._id).toHaveLength(36); // UUID length
+    });
+
+    test("should retain the provided _id if available", () => {
+        const input = [
+            {
+                title: "Track 1",
+                _id: "existing-id",
+                plots: [{ name: "Curve 1", type: "line", color: "#123456" }],
+            },
+        ];
+
+        const result = transformToTrackConfigs(input);
+
+        expect(result[0]._id).toBe("existing-id");
+    });
+
+    test("should throw an error if required track fields are missing", () => {
+        const input = [{ plots: [] }];
+
+        expect(() => transformToTrackConfigs(input)).toThrow("Missing required fields");
+    });
+
+    test('should mark invalid plots with "_valid: false"', () => {
+        const input = [
+            {
+                title: "Track 1",
+                plots: [
+                    { type: "line", color: "#654321" },
+                    { name: "Curve 2", type: "differential", color: "#654321" },
+                ],
+            },
+        ];
+
+        const result = transformToTrackConfigs(input);
+
+        expect(result).toMatchObject([
+            {
+                plots: input[0].plots.map(() => ({
+                    _isValid: false,
+                })),
+            },
+        ]);
+    });
+
+    describe("isValidPlot tests", () => {
+        test("should return false if type is missing", () => {});
+
+        test("should return false if name is missing", () => {});
+
+        test("should return false if color is missing", () => {});
+
+        test("should return false if type is not in PLOT_TYPES", () => {
+            const config = { name: "SomeCurve", type: "unsupported" as TemplatePlotTypes, color: "#123456" };
+            expect(isValidPlot(config)).toBe(false);
+        });
+
+        test("should throw an error for unsupported 'stacked' plot type", () => {
+            const config = { name: "SomeCurve", type: "stacked" as TemplatePlotTypes, color: "#123456" };
+            expect(() => isValidPlot(config)).toThrow("Stacked graph type currently not supported");
+        });
+
+        test("should return true for valid simple plot types", () => {
+            SIMPLE_PLOT_TYPES.forEach((type) => {
+                const config = { name: "SomeCurve", type: type, color: "#123456" };
+                expect(isValidPlot(config)).toBe(true);
+            });
+        });
+
+        test("should return false for differential type if name2, color2, fill, or fill2 are missing", () => {
+            const config = { name: "SomeCurve", type: "differential" as TemplatePlotTypes, color: "#123456" };
+            expect(isValidPlot(config)).toBe(false);
+        });
+
+        test("should return true for valid differential type", () => {
+            const config = {
+                name: "SomeCurve",
+                name2: "SomeCurve2",
+                type: "differential" as TemplatePlotTypes,
+                color: "#123456",
+                color2: "#654321",
+                fill: "#abcdef",
+                fill2: "#fedcba",
+            };
+            expect(isValidPlot(config)).toBe(true);
+        });
+
+        test("should return false for gradientfill type if colorTable is missing", () => {
+            const config = { name: "SomeCurve", type: "gradientfill" as TemplatePlotTypes, color: "#123456" };
+            expect(isValidPlot(config)).toBe(false);
+        });
+
+        test("should return true for valid gradientfill type", () => {
+            const config = {
+                name: "SomeCurve",
+                type: "gradientfill" as TemplatePlotTypes,
+                color: "#123456",
+                colorTable: "Continuous",
+            };
+            expect(isValidPlot(config)).toBe(true);
+        });
+    });
+});
diff --git a/frontend/tests/unit/WellLogViewer/queryDataTransform.test.ts b/frontend/tests/unit/WellLogViewer/queryDataTransform.test.ts
new file mode 100644
index 000000000..0c8a1fa3e
--- /dev/null
+++ b/frontend/tests/unit/WellLogViewer/queryDataTransform.test.ts
@@ -0,0 +1,255 @@
+import { WellboreLogCurveData_api, WellboreTrajectory_api } from "@api";
+import { IntersectionReferenceSystem } from "@equinor/esv-intersection";
+import { WellPicksLayerData } from "@modules/Intersection/utils/layers/WellpicksLayer";
+import {
+    MAIN_AXIS_CURVE,
+    SECONDARY_AXIS_CURVE,
+    createLogViewerWellpicks,
+    createWellLog,
+} from "@modules/WellLogViewer/utils/queryDataTransform";
+
+import { describe, expect, test } from "vitest";
+
+describe("QueryDataTransform", () => {
+    describe("Well log viewer template test", () => {
+        const mockDataPoints: WellboreLogCurveData_api["dataPoints"] = [
+            [1000, 50],
+            [2000, 60],
+        ];
+
+        const mockDataPointsWithMissing: WellboreLogCurveData_api["dataPoints"] = [
+            [1000, 50],
+            [2000, -999],
+        ];
+
+        const mockCurveData: WellboreLogCurveData_api = {
+            name: "GR",
+            unit: "API",
+            curveAlias: "GR",
+            curveUnitDesc: null,
+            indexUnit: "M",
+            noDataValue: -999,
+            indexMin: 1000,
+            indexMax: 2000,
+            minCurveValue: 50,
+            maxCurveValue: 60,
+            curveDescription: "Gamma Ray",
+            dataPoints: mockDataPoints,
+        };
+
+        const mockTrajectory = {
+            mdArr: [1000, 2000],
+        } as WellboreTrajectory_api;
+
+        const mockReferenceSystem = {
+            project: (md: number) => [md, md * 0.1],
+        } as IntersectionReferenceSystem;
+
+        test("should create a well log with the correct header, curves, and data", () => {
+            const wellLog = createWellLog([mockCurveData], mockTrajectory, mockReferenceSystem);
+
+            expect(wellLog.header.startIndex).toBe(1000);
+            expect(wellLog.header.endIndex).toBe(2000);
+
+            expect(wellLog.curves).toEqual([
+                MAIN_AXIS_CURVE,
+                SECONDARY_AXIS_CURVE,
+                {
+                    name: "GR",
+                    unit: "API",
+                    dimensions: 1,
+                    valueType: "number",
+                    description: "Gamma Ray",
+                },
+            ]);
+
+            expect(wellLog.data).toEqual([
+                [1000, 100, 50],
+                [2000, 200, 60],
+            ]);
+        });
+
+        test("should handle missing curve data", () => {
+            const curveData = { ...mockCurveData, dataPoints: mockDataPointsWithMissing };
+
+            const wellLog = createWellLog([curveData], mockTrajectory, mockReferenceSystem);
+
+            expect(wellLog.data).toEqual([
+                [1000, 100, 50],
+                [2000, 200, null],
+            ]);
+        });
+
+        test("should gracefully handle invalid index values", () => {
+            const curveData = {
+                ...mockCurveData,
+                dataPoints: [
+                    [null, 50],
+                    [null, 60],
+                ],
+            };
+
+            const wellLog = createWellLog([curveData], mockTrajectory, mockReferenceSystem);
+
+            expect(wellLog.data).toEqual([]);
+        });
+
+        test("should handle multiple curves correctly", () => {
+            const secondCurveData: WellboreLogCurveData_api = {
+                name: "RHOB",
+                unit: "g/cm3",
+                curveAlias: null,
+                curveUnitDesc: null,
+                indexUnit: "M",
+                noDataValue: -999,
+                indexMin: 1000,
+                indexMax: 2000,
+                minCurveValue: 50,
+                maxCurveValue: 60,
+                curveDescription: null,
+                dataPoints: [
+                    [1000, 2.3],
+                    [2000, 2.4],
+                ],
+            };
+            const wellLog = createWellLog([mockCurveData, secondCurveData], mockTrajectory, mockReferenceSystem);
+
+            expect(wellLog.curves).toEqual([
+                MAIN_AXIS_CURVE,
+                SECONDARY_AXIS_CURVE,
+                {
+                    name: "GR",
+                    unit: "API",
+                    dimensions: 1,
+                    valueType: "number",
+                    description: "Gamma Ray",
+                },
+                {
+                    name: "RHOB",
+                    unit: "g/cm3",
+                    dimensions: 1,
+                    valueType: "number",
+                    description: null,
+                },
+            ]);
+
+            expect(wellLog.data).toEqual([
+                [1000, 100, 50, 2.3],
+                [2000, 200, 60, 2.4],
+            ]);
+        });
+
+        test("should handle multiple dimensions correctly", () => {
+            const curveData = {
+                ...mockCurveData,
+                dataPoints: [
+                    [1000, 50, 1111],
+                    [2000, 60, 2222],
+                ],
+            };
+
+            const wellLog = createWellLog([curveData], mockTrajectory, mockReferenceSystem);
+
+            expect(wellLog.curves[2].dimensions).toBe(1);
+            expect(wellLog.data).toEqual([
+                [1000, 100, 50],
+                [2000, 200, 60],
+            ]);
+        });
+
+        // Is this test necessary, or is it just an issue types not being strict enough?
+        // - If an mdArr is successfully returned, can it EVER be empty?
+        // - Can intersectionReferenceSystem.project() ever return an empty array?
+        test("should handle missing mdArr and refferenceSystem values", () => {
+            // @ts-expect-error Explicitly testing the case where md-array is empty
+            const brokenTrajectory = {
+                mdArr: [],
+            } as WellboreTrajectory_api;
+
+            // @ts-expect-error Explicitly testing the case where the project return is empty
+            const brokenReferenceSystem = {
+                project: () => [] as number[],
+            } as IntersectionReferenceSystem;
+
+            const wellLog = createWellLog([mockCurveData], brokenTrajectory, brokenReferenceSystem);
+
+            expect(wellLog.header.startIndex).toBe(0);
+            expect(wellLog.header.endIndex).toBe(4000);
+
+            expect(wellLog.data).toEqual([
+                [1000, 0, 50],
+                [2000, 0, 60],
+            ]);
+        });
+
+        test("should be able to inject empty data-rows for entire wellbore lenght", () => {
+            const mockTrajectoryWithExtraRows = {
+                mdArr: [0, 1000, 2000, 3000, 4000],
+            } as WellboreTrajectory_api;
+
+            const wellLog = createWellLog([mockCurveData], mockTrajectoryWithExtraRows, mockReferenceSystem, true);
+
+            expect(wellLog.data).toEqual([
+                [0, 0, null],
+                [1000, 100, 50],
+                [2000, 200, 60],
+                [3000, 300, null],
+                [4000, 400, null],
+            ]);
+        });
+    });
+
+    describe("Well-picks", () => {
+        const mockNonUnitPick = {
+            identifier: "Some pick",
+            md: 1000,
+        } as WellPicksLayerData["nonUnitPicks"][0];
+
+        const mockUnitPick = {
+            entryPick: {
+                identifier: "A units entry-pick",
+                md: 1500,
+            },
+            exitPick: {
+                identifier: "A units exit-pick",
+                md: 2000,
+            },
+        } as WellPicksLayerData["unitPicks"][0];
+
+        const mockTransformedWellpickData: WellPicksLayerData = {
+            nonUnitPicks: [mockNonUnitPick],
+            unitPicks: [mockUnitPick],
+        };
+
+        test("should generate wellpick props from wellpick data", () => {
+            const wellpickProps = createLogViewerWellpicks(mockTransformedWellpickData);
+
+            expect(wellpickProps.wellpick.curves).toEqual([
+                MAIN_AXIS_CURVE,
+                {
+                    name: "PICK",
+                    valueType: "string",
+                    dimensions: 1,
+                },
+            ]);
+
+            expect(wellpickProps.wellpick.data).toEqual([
+                [1000, "Some pick"],
+                [1500, "A units entry-pick"],
+                [2000, "A units exit-pick"],
+            ]);
+        });
+
+        test("should merge stacked well-picks", () => {
+            const stackedNonUnitPick = { ...mockNonUnitPick, md: 1500 };
+            const pickDataWithStacked = { ...mockTransformedWellpickData, nonUnitPicks: [stackedNonUnitPick] };
+
+            const wellpickProps = createLogViewerWellpicks(pickDataWithStacked);
+
+            expect(wellpickProps.wellpick.data).toEqual([
+                [1500, "Some pick + A units entry-pick"],
+                [2000, "A units exit-pick"],
+            ]);
+        });
+    });
+});