diff --git a/backend/src/backend/auth/auth_helper.py b/backend/src/backend/auth/auth_helper.py
index 57fb1e969..041e4be4a 100644
--- a/backend/src/backend/auth/auth_helper.py
+++ b/backend/src/backend/auth/auth_helper.py
@@ -101,7 +101,6 @@ async def _authorized_callback_route(self, request: Request) -> Response:
     def get_authenticated_user(
         request_with_session: Request,
     ) -> Optional[AuthenticatedUser]:
-
         timer = PerfTimer()
 
         # We may already have created and stored the AuthenticatedUser object on the request
@@ -173,6 +172,9 @@ def get_authenticated_user(
             # print("-------------------------------------------------")
             smda_token = token_dict.get("access_token") if token_dict else None
 
+        token_dict = cca.acquire_token_silent(scopes=config.GRAPH_SCOPES, account=accounts[0])
+        graph_token = token_dict.get("access_token") if token_dict else None
+
         # print(f"  get tokens {timer.lap_ms():.1f}ms")
 
         _save_token_cache_in_session(request_with_session, token_cache)
@@ -187,10 +189,13 @@ def get_authenticated_user(
         authenticated_user = AuthenticatedUser(
             user_id=user_id,
             username=user_name,
-            sumo_access_token=sumo_token,
-            smda_access_token=smda_token,
-            pdm_access_token=None,
-            ssdl_access_token=None,
+            access_tokens={
+                "graph_access_token": graph_token,
+                "sumo_access_token": sumo_token,
+                "smda_access_token": smda_token,
+                "pdm_access_token": None,
+                "ssdl_access_token": None,
+            },
         )
 
         request_with_session.state.authenticated_user_obj = authenticated_user
@@ -203,7 +208,6 @@ def get_authenticated_user(
 def _create_msal_confidential_client_app(
     token_cache: msal.TokenCache,
 ) -> msal.ConfidentialClientApplication:
-
     authority = f"https://login.microsoftonline.com/{config.TENANT_ID}"
     return msal.ConfidentialClientApplication(
         client_id=config.CLIENT_ID,
@@ -217,7 +221,6 @@ def _create_msal_confidential_client_app(
 # Note that this function will NOT return the token itself, but rather a dict
 # that typically has an "access_token" key
 def _get_token_dict_from_session_token_cache(request_with_session: Request, scopes: List[str]) -> Optional[dict]:
-
     token_cache = _load_token_cache_from_session(request_with_session)
     cca = _create_msal_confidential_client_app(token_cache)
 
diff --git a/backend/src/backend/primary/main.py b/backend/src/backend/primary/main.py
index 9386e9b9b..36c29c12e 100644
--- a/backend/src/backend/primary/main.py
+++ b/backend/src/backend/primary/main.py
@@ -17,7 +17,7 @@
 from .routers.correlations.router import router as correlations_router
 from .routers.grid.router import router as grid_router
 from .routers.pvt.router import router as pvt_router
-from .routers.well_completion.router import router as well_completion_router
+from .routers.well_completions.router import router as well_completions_router
 from .routers.well.router import router as well_router
 from .routers.surface_polygons.router import router as surface_polygons_router
 
@@ -53,7 +53,7 @@ def custom_generate_unique_id(route: APIRoute) -> str:
 app.include_router(correlations_router, prefix="/correlations", tags=["correlations"])
 app.include_router(grid_router, prefix="/grid", tags=["grid"])
 app.include_router(pvt_router, prefix="/pvt", tags=["pvt"])
-app.include_router(well_completion_router, prefix="/well_completion", tags=["well_completion"])
+app.include_router(well_completions_router, prefix="/well_completions", tags=["well_completions"])
 app.include_router(well_router, prefix="/well", tags=["well"])
 app.include_router(surface_polygons_router, prefix="/surface_polygons", tags=["surface_polygons"])
 
diff --git a/backend/src/backend/primary/routers/general.py b/backend/src/backend/primary/routers/general.py
index 304c0d3ee..29e9c7f9f 100644
--- a/backend/src/backend/primary/routers/general.py
+++ b/backend/src/backend/primary/routers/general.py
@@ -1,19 +1,24 @@
+import asyncio
 import datetime
 import logging
 
+import httpx
 import starsessions
 from starlette.responses import StreamingResponse
-from fastapi import APIRouter, HTTPException, Request, status, Depends
+from fastapi import APIRouter, HTTPException, Request, status, Depends, Query
 from pydantic import BaseModel
 
 from src.backend.auth.auth_helper import AuthHelper, AuthenticatedUser
 from src.backend.primary.user_session_proxy import proxy_to_user_session
+from src.services.graph_access.graph_access import GraphApiAccess
 
 LOGGER = logging.getLogger(__name__)
 
 
 class UserInfo(BaseModel):
     username: str
+    display_name: str | None
+    avatar_b64str: str | None
     has_sumo_access: bool
     has_smda_access: bool
 
@@ -34,7 +39,12 @@ def alive_protected() -> str:
 
 
 @router.get("/logged_in_user", response_model=UserInfo)
-async def logged_in_user(request: Request) -> UserInfo:
+async def logged_in_user(
+    request: Request,
+    includeGraphApiInfo: bool = Query(
+        False, description="Set to true to include user avatar and display name from Microsoft Graph API"
+    ),
+) -> UserInfo:
     print("entering logged_in_user route")
 
     await starsessions.load_session(request)
@@ -47,10 +57,29 @@ async def logged_in_user(request: Request) -> UserInfo:
 
     user_info = UserInfo(
         username=authenticated_user.get_username(),
+        avatar_b64str=None,
+        display_name=None,
         has_sumo_access=authenticated_user.has_sumo_access_token(),
         has_smda_access=authenticated_user.has_smda_access_token(),
     )
 
+    if authenticated_user.has_graph_access_token() and includeGraphApiInfo:
+        graph_api_access = GraphApiAccess(authenticated_user.get_graph_access_token())
+        try:
+            avatar_b64str_future = asyncio.create_task(graph_api_access.get_user_profile_photo())
+            graph_user_info_future = asyncio.create_task(graph_api_access.get_user_info())
+
+            avatar_b64str = await avatar_b64str_future
+            graph_user_info = await graph_user_info_future
+
+            user_info.avatar_b64str = avatar_b64str
+            if graph_user_info is not None:
+                user_info.display_name = graph_user_info.get("displayName", None)
+        except httpx.HTTPError as e:
+            print("Error while fetching user avatar and info from Microsoft Graph API (HTTP error):\n", e)
+        except httpx.InvalidURL as e:
+            print("Error while fetching user avatar and info from Microsoft Graph API (Invalid URL):\n", e)
+
     return user_info
 
 
diff --git a/backend/src/backend/primary/routers/well_completion/router.py b/backend/src/backend/primary/routers/well_completion/router.py
deleted file mode 100644
index f9044792a..000000000
--- a/backend/src/backend/primary/routers/well_completion/router.py
+++ /dev/null
@@ -1,30 +0,0 @@
-from typing import Optional
-
-from fastapi import APIRouter, Depends, Query
-
-from src.backend.auth.auth_helper import AuthHelper
-from src.services.utils.authenticated_user import AuthenticatedUser
-
-from src.services.sumo_access.well_completion_access import WellCompletionAccess
-from src.services.utils.well_completion_utils import WellCompletionDataModel
-
-from . import schemas
-
-router = APIRouter()
-
-
-@router.get("/well_completion_data/")
-def get_well_completion_data(
-    # fmt:off
-    authenticated_user: AuthenticatedUser = Depends(AuthHelper.get_authenticated_user),
-    case_uuid: str = Query(description="Sumo case uuid"),
-    ensemble_name: str = Query(description="Ensemble name"),
-    realization: Optional[int] = Query(None, description="Optional realization to include. If not specified, all realizations will be returned."),
-    # fmt:on
-) -> schemas.WellCompletionData:
-    access = WellCompletionAccess(authenticated_user.get_sumo_access_token(), case_uuid, ensemble_name)
-
-    well_completion_df = access.get_well_completion_data(realization=realization)
-    well_completion_data_model = WellCompletionDataModel(well_completion_df)
-
-    return schemas.WellCompletionData(json_data=well_completion_data_model.create_well_completion_dataset())
diff --git a/backend/src/backend/primary/routers/well_completion/schemas.py b/backend/src/backend/primary/routers/well_completion/schemas.py
deleted file mode 100644
index e04e65187..000000000
--- a/backend/src/backend/primary/routers/well_completion/schemas.py
+++ /dev/null
@@ -1,7 +0,0 @@
-from pydantic import BaseModel
-
-from src.services.utils.well_completion_utils import WellCompletionDataSet
-
-
-class WellCompletionData(BaseModel):
-    json_data: WellCompletionDataSet
diff --git a/backend/src/backend/primary/routers/well_completions/router.py b/backend/src/backend/primary/routers/well_completions/router.py
new file mode 100644
index 000000000..de3bb50a6
--- /dev/null
+++ b/backend/src/backend/primary/routers/well_completions/router.py
@@ -0,0 +1,29 @@
+from typing import Optional
+
+from fastapi import APIRouter, Depends, HTTPException, Query
+
+from src.backend.auth.auth_helper import AuthHelper
+from src.services.utils.authenticated_user import AuthenticatedUser
+
+from src.services.sumo_access.well_completions_access import WellCompletionsAccess
+from src.services.sumo_access.well_completions_types import WellCompletionsData
+
+router = APIRouter()
+
+
+@router.get("/well_completions_data/")
+def get_well_completions_data(
+    # fmt:off
+    authenticated_user: AuthenticatedUser = Depends(AuthHelper.get_authenticated_user),
+    case_uuid: str = Query(description="Sumo case uuid"),
+    ensemble_name: str = Query(description="Ensemble name"),
+    realization: Optional[int] = Query(None, description="Optional realization to include. If not specified, all realizations will be returned."),
+    # fmt:on
+) -> WellCompletionsData:
+    access = WellCompletionsAccess(authenticated_user.get_sumo_access_token(), case_uuid, ensemble_name)
+    well_completions_data = access.get_well_completions_data(realization=realization)
+
+    if not well_completions_data:
+        raise HTTPException(status_code=404, detail="Well completions data not found")
+
+    return well_completions_data
diff --git a/backend/src/services/graph_access/graph_access.py b/backend/src/services/graph_access/graph_access.py
new file mode 100644
index 000000000..fe3b92c6e
--- /dev/null
+++ b/backend/src/services/graph_access/graph_access.py
@@ -0,0 +1,39 @@
+import base64
+from typing import Mapping
+
+# Using the same http client as sumo
+import httpx
+
+
+class GraphApiAccess:
+    def __init__(self, access_token: str):
+        self._access_token = access_token
+
+    def _make_headers(self) -> Mapping[str, str]:
+        return {"Authorization": f"Bearer {self._access_token}"}
+
+    async def _request(self, url: str) -> httpx.Response:
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                url,
+                headers=self._make_headers(),
+            )
+            return response
+
+    async def get_user_profile_photo(self) -> str | None:
+        print("entering get_user_profile_photo")
+        response = await self._request("https://graph.microsoft.com/v1.0/me/photo/$value")
+
+        if response.status_code == 200:
+            return base64.b64encode(response.content).decode("utf-8")
+        else:
+            return None
+
+    async def get_user_info(self) -> Mapping[str, str] | None:
+        print("entering get_user_info")
+        response = await self._request("https://graph.microsoft.com/v1.0/me")
+
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return None
diff --git a/backend/src/services/sumo_access/well_completion_access.py b/backend/src/services/sumo_access/well_completion_access.py
deleted file mode 100644
index d226d0ee5..000000000
--- a/backend/src/services/sumo_access/well_completion_access.py
+++ /dev/null
@@ -1,70 +0,0 @@
-from typing import Optional
-
-import pandas as pd
-
-from fmu.sumo.explorer.explorer import CaseCollection, Case, SumoClient
-from ._helpers import create_sumo_client_instance
-
-
-class WellCompletionAccess:
-    """
-    Class for accessing and retrieving well completion data
-    """
-
-    def __init__(self, access_token: str, case_uuid: str, iteration_name: str) -> None:
-        sumo_client: SumoClient = create_sumo_client_instance(access_token)
-        case_collection = CaseCollection(sumo_client).filter(uuid=case_uuid)
-        if len(case_collection) > 1:
-            raise ValueError(f"Multiple sumo cases found {case_uuid=}")
-        if len(case_collection) < 1:
-            raise ValueError(f"No sumo cases found {case_uuid=}")
-
-        self._case: Case = case_collection[0]
-        self._iteration_name = iteration_name
-        self._tagname = str("wellcompletiondata")  # Should tagname be hard coded?
-
-    def get_well_completion_data(self, realization: Optional[int]) -> pd.DataFrame:
-        """Get well completion data for case and iteration"""
-
-        # With single realization, return the table including additional column REAL
-        if realization is not None:
-            well_completion_tables = self._case.tables.filter(
-                tagname=self._tagname, realization=realization, iteration=self._iteration_name
-            )
-            well_completion_df = well_completion_tables[0].to_pandas if len(well_completion_tables) > 0 else None
-            if well_completion_df is None:
-                return {}
-
-            well_completion_df["REAL"] = realization
-            return well_completion_df
-
-        # With multiple realizations, retrieve each column and concatenate
-        # Expect one table with aggregated OP/SH and one with aggregate KH data
-        well_completion_tables = self._case.tables.filter(
-            tagname=self._tagname, aggregation="collection", iteration=self._iteration_name
-        )
-
-        # Improve code (iterate over tables and concatenate) - concat gives issue? See jupyter-notebook
-        if len(well_completion_tables) < 2:
-            return {}
-
-        first_df = well_completion_tables[0].to_pandas
-        second_df = well_completion_tables[1].to_pandas
-
-        expected_columns = set(["WELL", "DATE", "ZONE", "REAL"])
-        if not set(first_df.columns).issuperset(expected_columns) or not set(second_df.columns).issuperset(
-            expected_columns
-        ):
-            raise ValueError(
-                f"Expected df columns to be superset of columns: {expected_columns} - got: {first_df.columns} and {second_df.columns}"
-            )
-
-        if "OP/SH" in first_df.columns and "KH" in second_df.columns:
-            first_df["KH"] = second_df["KH"]
-            return first_df
-
-        if "OP/SH" in second_df.columns and "KH" in first_df.columns:
-            second_df["KH"] = first_df["KH"]
-            return second_df
-
-        raise ValueError('Expected columns "OP/SH" and "KH" not found in tables')
diff --git a/backend/src/services/sumo_access/well_completions_access.py b/backend/src/services/sumo_access/well_completions_access.py
new file mode 100644
index 000000000..276e03140
--- /dev/null
+++ b/backend/src/services/sumo_access/well_completions_access.py
@@ -0,0 +1,277 @@
+import itertools
+from typing import Dict, Iterator, List, Optional, Set, Tuple
+
+import pandas as pd
+
+from fmu.sumo.explorer.explorer import CaseCollection, Case, SumoClient
+from ._helpers import create_sumo_client_instance
+
+from .well_completions_types import (
+    Completions,
+    WellCompletionsAttributeType,
+    WellCompletionsWell,
+    WellCompletionsData,
+    WellCompletionsZone,
+    WellCompletionsUnitInfo,
+    WellCompletionsUnits,
+)
+
+
+class WellCompletionsAccess:
+    """
+    Class for accessing and retrieving well completions data
+    """
+
+    def __init__(self, access_token: str, case_uuid: str, iteration_name: str) -> None:
+        sumo_client: SumoClient = create_sumo_client_instance(access_token)
+        case_collection = CaseCollection(sumo_client).filter(uuid=case_uuid)
+        if len(case_collection) > 1:
+            raise ValueError(f"Multiple sumo cases found {case_uuid=}")
+        if len(case_collection) < 1:
+            raise ValueError(f"No sumo cases found {case_uuid=}")
+
+        self._case: Case = case_collection[0]
+        self._iteration_name = iteration_name
+        self._tagname = str("wellcompletiondata")  # Should tagname be hard coded?
+
+    def get_well_completions_data(self, realization: Optional[int]) -> Optional[WellCompletionsData]:
+        """Get well completions data for case and iteration"""
+
+        # With single realization, filter on realization
+        if realization is not None:
+            well_completions_tables = self._case.tables.filter(
+                tagname=self._tagname, realization=realization, iteration=self._iteration_name
+            )
+            well_completions_df = well_completions_tables[0].to_pandas if len(well_completions_tables) > 0 else None
+            if well_completions_df is None:
+                return None
+
+            return WellCompletionDataConverter(well_completions_df).create_data()
+
+        # With multiple realizations, expect one table with aggregated OP/SH and one with aggregate KH data
+        well_completions_tables = self._case.tables.filter(
+            tagname=self._tagname, aggregation="collection", iteration=self._iteration_name
+        )
+
+        # As of now, two tables are expected - one with OP/SH and one with KH
+        if len(well_completions_tables) < 2:
+            return None
+
+        expected_common_columns = set(["WELL", "DATE", "ZONE", "REAL"])
+        first_df = well_completions_tables[0].to_pandas
+        second_df = well_completions_tables[1].to_pandas
+
+        # Validate columns and ensure equal column content in both tables
+        self._validate_common_dataframe_columns(expected_common_columns, first_df, second_df)
+
+        # Assign "KH" column to the dataframe with missing column
+        if "OP/SH" in first_df.columns and "KH" in second_df.columns:
+            first_df["KH"] = second_df["KH"]
+            return WellCompletionDataConverter(first_df).create_data()
+        if "OP/SH" in second_df.columns and "KH" in first_df.columns:
+            second_df["KH"] = first_df["KH"]
+            return WellCompletionDataConverter(second_df).create_data()
+
+        raise ValueError('Expected columns "OP/SH" and "KH" not found in tables')
+
+    def _validate_common_dataframe_columns(
+        self, common_column_names: Set[str], first_df: pd.DataFrame, second_df: pd.DataFrame
+    ) -> None:
+        """
+        Validates that the two dataframes contains same common columns and that the columns have the same content,
+        raises value error if not matching.
+        """
+        # Ensure expected columns are present
+        if not common_column_names.issubset(first_df.columns):
+            raise ValueError(f"Expected columns of first table: {common_column_names} - got: {first_df.columns}")
+        if not common_column_names.issubset(second_df.columns):
+            raise ValueError(f"Expected columns of second table: {common_column_names} - got: {second_df.columns}")
+
+        # Verify equal columns in both tables
+        for column_name in common_column_names:
+            if not (first_df[column_name] == second_df[column_name]).all():
+                raise ValueError(f'Expected equal column content, "{column_name}", in first and second dataframe')
+
+
+class WellCompletionDataConverter:
+    """
+    Class for converter into WellCompletionData type from a pandas dataframe with well completions data
+
+    Accessor retrieves well completions data from Sumo as table data. This converter class handles
+    the pandas dataframe and provides a data structure for API to consume.
+    """
+
+    def __init__(self, well_completions_df: pd.DataFrame) -> None:
+        # NOTE: Which level of verification?
+        # - Only columns names?
+        # - Verify dtype of columns?
+        # - Verify dimension of columns - only 2D df?
+
+        # Based on realization filtering in Accessor, the "REAL" column is optional - not expected
+        expected_columns = set(["WELL", "DATE", "ZONE", "OP/SH", "KH"])
+
+        if not expected_columns.issubset(well_completions_df.columns):
+            raise ValueError(f"Expected columns: {expected_columns} - got: {well_completions_df.columns}")
+
+        self._well_completions_df = well_completions_df
+
+        # NOTE: Metadata should be provided by Sumo?
+        # _kh_unit = (
+        #         kh_metadata.unit
+        #         if kh_metadata is not None and kh_metadata.unit is not None
+        #         else ""
+        #     )
+        self._kh_unit = "mDm"  # NOTE: How to find metadata?
+        self._kh_decimal_places = 2
+        self._datemap = {dte: i for i, dte in enumerate(sorted(self._well_completions_df["DATE"].unique()))}
+        self._zones = list(sorted(self._well_completions_df["ZONE"].unique()))
+
+        self._well_completions_df["TIMESTEP"] = self._well_completions_df["DATE"].map(self._datemap)
+
+        # NOTE:
+        # - How to handle well attributes? Should be provided by Sumo?
+        # - How to handle theme colors?
+        self._well_attributes: Dict[
+            str, Dict[str, WellCompletionsAttributeType]
+        ] = {}  # Each well has dict of attributes
+        self._theme_colors = ["#6EA35A", "#EDAF4C", "#CA413D"]  # Hard coded
+
+    def _dummy_stratigraphy(self) -> List[WellCompletionsZone]:
+        """
+        Returns a default stratigraphy for TESTING, should be provided by Sumo
+        """
+        return [
+            WellCompletionsZone(
+                name="TopVolantis_BaseVolantis",
+                color="#6EA35A",
+                subzones=[
+                    WellCompletionsZone(name="Valysar", color="#6EA35A"),
+                    WellCompletionsZone(name="Therys", color="#EDAF4C"),
+                    WellCompletionsZone(name="Volon", color="#CA413D"),
+                ],
+            ),
+        ]
+
+    def create_data(self) -> WellCompletionsData:
+        """Creates well completions dataset for front-end"""
+
+        return WellCompletionsData(
+            version="1.1.0",
+            units=WellCompletionsUnits(
+                kh=WellCompletionsUnitInfo(unit=self._kh_unit, decimalPlaces=self._kh_decimal_places)
+            ),
+            stratigraphy=self._extract_stratigraphy(self._dummy_stratigraphy(), self._zones),
+            timeSteps=[pd.to_datetime(str(dte)).strftime("%Y-%m-%d") for dte in self._datemap.keys()],
+            wells=self._extract_wells(),
+        )
+
+    def _extract_wells(self) -> List[WellCompletionsWell]:
+        """Generates the wells part of the dataset to front-end"""
+        # Optional "REAL" column, i.e. no column implies only one realization
+        no_real = self._well_completions_df["REAL"].nunique() if "REAL" in self._well_completions_df.columns else 1
+
+        well_list = []
+        for well_name, well_group in self._well_completions_df.groupby("WELL"):
+            well_data = self._extract_well(well_group, well_name, no_real)
+            well_data.attributes = self._well_attributes[well_name] if well_name in self._well_attributes else {}
+            well_list.append(well_data)
+        return well_list
+
+    def _extract_well(self, well_group: pd.DataFrame, well_name: str, no_real: int) -> WellCompletionsWell:
+        """Extract completions events and kh values for a single well"""
+        well: WellCompletionsWell = WellCompletionsWell(name=well_name, attributes={}, completions={})
+
+        completions: Dict[str, Completions] = {}
+        for (zone, timestep), group_df in well_group.groupby(["ZONE", "TIMESTEP"]):
+            data = group_df["OP/SH"].value_counts()
+            if zone not in completions:
+                completions[zone] = Completions(t=[], open=[], shut=[], kh_mean=[], kh_min=[], kh_max=[])
+
+            zone_completions = completions[zone]
+            zone_completions.t.append(int(timestep))
+            zone_completions.open.append(float(data["OPEN"] / no_real if "OPEN" in data else 0))
+            zone_completions.shut.append(float(data["SHUT"] / no_real if "SHUT" in data else 0))
+            zone_completions.kh_mean.append(round(float(group_df["KH"].mean()), 2))
+            zone_completions.kh_min.append(round(float(group_df["KH"].min()), 2))
+            zone_completions.kh_max.append(round(float(group_df["KH"].max()), 2))
+
+        well.completions = completions
+        return well
+
+    def _extract_stratigraphy(
+        self, stratigraphy: Optional[List[WellCompletionsZone]], zones: List[str]
+    ) -> List[WellCompletionsZone]:
+        """Returns the stratigraphy part of the dataset to front-end"""
+        color_iterator = itertools.cycle(self._theme_colors)
+
+        # If no stratigraphy file is found then the stratigraphy is
+        # created from the unique zones in the well completions data input.
+        # They will then probably not come in the correct order.
+        if stratigraphy is None:
+            return [WellCompletionsZone(name=zone, color=next(color_iterator)) for zone in zones]
+
+        # If stratigraphy is not None the following is done:
+        stratigraphy, remaining_valid_zones = self._filter_valid_nodes(stratigraphy, zones)
+
+        if remaining_valid_zones:
+            raise ValueError(
+                "The following zones are defined in the well completions data, "
+                f"but not in the stratigraphy: {remaining_valid_zones}"
+            )
+
+        return self._add_colors_to_stratigraphy(stratigraphy, color_iterator)
+
+    def _add_colors_to_stratigraphy(
+        self,
+        stratigraphy: List[WellCompletionsZone],
+        color_iterator: Iterator,
+        zone_color_mapping: Optional[Dict[str, str]] = None,
+    ) -> List[WellCompletionsZone]:
+        """Add colors to the stratigraphy tree. The function will recursively parse the tree.
+
+        There are tree sources of color:
+        1. The color is given in the stratigraphy list, in which case nothing is done to the node
+        2. The color is the optional the zone->color map
+        3. If none of the above applies, the color will be taken from the theme color iterable for \
+        the leaves. For other levels, a dummy color grey is used
+        """
+        for zone in stratigraphy:
+            if zone.color == "":
+                if zone_color_mapping is not None and zone.name in zone_color_mapping:
+                    zone.color = zone_color_mapping[zone.name]
+                elif zone.subzones is None:
+                    zone = next(color_iterator)  # theme colors only applied on leaves
+                else:
+                    zone.color = "#808080"  # grey
+            if zone.subzones is not None:
+                zone.subzones = self._add_colors_to_stratigraphy(
+                    zone.subzones,
+                    color_iterator,
+                    zone_color_mapping=zone_color_mapping,
+                )
+        return stratigraphy
+
+    def _filter_valid_nodes(
+        self, stratigraphy: List[WellCompletionsZone], valid_zone_names: List[str]
+    ) -> Tuple[List[WellCompletionsZone], List[str]]:
+        """Returns the stratigraphy tree with only valid nodes.
+        A node is considered valid if it self or one of it's subzones are in the
+        valid zone names list (passed from the lyr file)
+
+        The function recursively parses the tree to add valid nodes.
+        """
+
+        output = []
+        remaining_valid_zones = valid_zone_names
+        for zone in stratigraphy:
+            if zone.subzones is not None:
+                zone.subzones, remaining_valid_zones = self._filter_valid_nodes(zone.subzones, remaining_valid_zones)
+            if zone.name in remaining_valid_zones:
+                output.append(zone)
+                remaining_valid_zones = [
+                    elm for elm in remaining_valid_zones if elm != zone.name
+                ]  # remove zone name from valid zones if it is found in the stratigraphy
+            elif zone.subzones is not None:
+                output.append(zone)
+
+        return output, remaining_valid_zones
diff --git a/backend/src/services/sumo_access/well_completions_types.py b/backend/src/services/sumo_access/well_completions_types.py
new file mode 100644
index 000000000..4e23be989
--- /dev/null
+++ b/backend/src/services/sumo_access/well_completions_types.py
@@ -0,0 +1,45 @@
+from typing import Dict, List, Optional, Union
+from pydantic import BaseModel
+
+
+WellCompletionsAttributeType = Union[str, int, bool]
+
+
+class Completions(BaseModel):
+    t: List[int]
+    open: List[float]
+    shut: List[float]
+    kh_mean: List[float]
+    kh_min: List[float]
+    kh_max: List[float]
+
+
+class WellCompletionsWell(BaseModel):
+    name: str
+    attributes: Dict[str, WellCompletionsAttributeType]
+    completions: Dict[str, Completions]
+
+
+class WellCompletionsZone(BaseModel):
+    name: str
+    color: str
+    subzones: Optional[List["WellCompletionsZone"]] = None
+
+
+class WellCompletionsUnitInfo(BaseModel):
+    unit: str
+    decimalPlaces: int
+
+
+class WellCompletionsUnits(BaseModel):
+    kh: WellCompletionsUnitInfo
+
+
+class WellCompletionsData(BaseModel):
+    """Type definition for well completions data"""
+
+    version: str
+    units: WellCompletionsUnits
+    stratigraphy: List[WellCompletionsZone]
+    timeSteps: List[str]
+    wells: List[WellCompletionsWell]
diff --git a/backend/src/services/types/well_completion_types.py b/backend/src/services/types/well_completion_types.py
deleted file mode 100644
index 0df76ca7a..000000000
--- a/backend/src/services/types/well_completion_types.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from pydantic import BaseModel
-from typing import Dict, List, Optional, Union
-
-
-WellCompletionAttributeType = Union[str, int, bool]
-
-
-class Completions(BaseModel):
-    t: List[int]
-    open: List[float]
-    shut: List[float]
-    kh_mean: List[float]
-    kh_min: List[float]
-    kh_max: List[float]
-
-
-class WellCompletionWellInfo(BaseModel):
-    name: str
-    attributes: Dict[str, WellCompletionAttributeType]
-
-
-class WellCompletionWell(WellCompletionWellInfo):
-    completions: Dict[str, Completions]
-
-
-class WellCompletionZone(BaseModel):
-    name: str
-    color: str
-    subzones: Optional[List["WellCompletionZone"]] = None
-
-
-class WellCompletionUnitInfo(BaseModel):
-    unit: str
-    decimalPlaces: int
-
-
-class WellCompletionUnits(BaseModel):
-    kh: WellCompletionUnitInfo
-
-
-class WellCompletionDataSet(BaseModel):
-    """Type definition for well completion data set"""
-
-    version: str
-    units: WellCompletionUnits
-    stratigraphy: List[WellCompletionZone]
-    timeSteps: List[str]
-    wells: List[WellCompletionWell]
diff --git a/backend/src/services/utils/authenticated_user.py b/backend/src/services/utils/authenticated_user.py
index 97f3ed7df..3b28aa515 100644
--- a/backend/src/services/utils/authenticated_user.py
+++ b/backend/src/services/utils/authenticated_user.py
@@ -1,6 +1,14 @@
 # pylint: disable=bare-except
 
-from typing import Any, Optional
+from typing import Any, Optional, TypedDict
+
+
+class AccessTokens(TypedDict):
+    graph_access_token: Optional[str]
+    sumo_access_token: Optional[str]
+    smda_access_token: Optional[str]
+    pdm_access_token: Optional[str]
+    ssdl_access_token: Optional[str]
 
 
 class AuthenticatedUser:
@@ -8,17 +16,15 @@ def __init__(
         self,
         user_id: str,
         username: str,
-        sumo_access_token: Optional[str],
-        smda_access_token: Optional[str],
-        pdm_access_token: Optional[str],
-        ssdl_access_token: Optional[str],
+        access_tokens: AccessTokens,
     ) -> None:
         self._user_id = user_id
         self._username = username
-        self._sumo_access_token = sumo_access_token
-        self._smda_access_token = smda_access_token
-        self._pdm_access_token = pdm_access_token
-        self._ssdl_access_token = ssdl_access_token
+        self._graph_access_token = access_tokens.get("graph_access_token")
+        self._sumo_access_token = access_tokens.get("sumo_access_token")
+        self._smda_access_token = access_tokens.get("smda_access_token")
+        self._pdm_access_token = access_tokens.get("pdm_access_token")
+        self._ssdl_access_token = access_tokens.get("ssdl_access_token")
 
     def __hash__(self) -> int:
         return hash(self._user_id)
@@ -29,6 +35,19 @@ def __eq__(self, other: Any) -> bool:
     def get_username(self) -> str:
         return self._username
 
+    def get_graph_access_token(self) -> str:
+        if isinstance(self._graph_access_token, str) and self._graph_access_token:
+            return self._graph_access_token
+
+        raise ValueError("User has no graph access token")
+
+    def has_graph_access_token(self) -> bool:
+        try:
+            self.get_graph_access_token()
+            return True
+        except ValueError:
+            return False
+
     def get_sumo_access_token(self) -> str:
         if isinstance(self._sumo_access_token, str) and len(self._sumo_access_token) > 0:
             return self._sumo_access_token
diff --git a/backend/src/services/utils/well_completion_utils.py b/backend/src/services/utils/well_completion_utils.py
deleted file mode 100644
index 7f51e26e4..000000000
--- a/backend/src/services/utils/well_completion_utils.py
+++ /dev/null
@@ -1,187 +0,0 @@
-import itertools
-from typing import Dict, Iterator, List, Optional, Tuple
-
-import pandas as pd
-
-from src.services.types.well_completion_types import (
-    Completions,
-    WellCompletionAttributeType,
-    WellCompletionWell,
-    WellCompletionDataSet,
-    WellCompletionZone,
-    WellCompletionUnitInfo,
-    WellCompletionUnits,
-)
-
-
-class WellCompletionDataModel:
-    def __init__(self, well_completion_data: pd.DataFrame) -> None:
-        # NOTE: Which level of verification?
-        # - Only columns names?
-        # - Verify dtype of columns?
-        # - Verify dimension of columns - only 2D df?
-
-        expected_columns = set(["WELL", "DATE", "ZONE", "REAL", "OP/SH", "KH"])
-        if expected_columns != set(well_completion_data.columns):
-            raise ValueError(f"Expected columns: {expected_columns} - got: {well_completion_data.columns}")
-
-        self._well_completion_df = well_completion_data
-
-        # NOTE: Metadata should be provided by Sumo?
-        # _kh_unit = (
-        #         kh_metadata.unit
-        #         if kh_metadata is not None and kh_metadata.unit is not None
-        #         else ""
-        #     )
-        self._kh_unit = "mDm"  # NOTE: How to find metadata?
-        self._kh_decimal_places = 2
-        self._datemap = {dte: i for i, dte in enumerate(sorted(self._well_completion_df["DATE"].unique()))}
-        self._zones = list(sorted(self._well_completion_df["ZONE"].unique()))
-
-        self._well_completion_df["TIMESTEP"] = self._well_completion_df["DATE"].map(self._datemap)
-
-        # NOTE:
-        # - How to handle well attributes? Should be provided by Sumo?
-        # - How to handle theme colors?
-        self._well_attributes: Dict[
-            str, Dict[str, WellCompletionAttributeType]
-        ] = {}  # Each well has dict of attributes
-        self._theme_colors = ["#6EA35A", "#EDAF4C", "#CA413D"]  # Hard coded
-
-    def _dummy_stratigraphy(self) -> List[WellCompletionZone]:
-        """
-        Returns a default stratigraphy for TESTING, should be provided by Sumo
-        """
-        return [
-            WellCompletionZone(
-                name="TopVolantis_BaseVolantis",
-                color="#6EA35A",
-                subzones=[
-                    WellCompletionZone(name="Valysar", color="#6EA35A"),
-                    WellCompletionZone(name="Therys", color="#EDAF4C"),
-                    WellCompletionZone(name="Volon", color="#CA413D"),
-                ],
-            ),
-        ]
-
-    def create_well_completion_dataset(self) -> WellCompletionDataSet:
-        """Creates well completion dataset for front-end"""
-
-        return WellCompletionDataSet(
-            version="1.1.0",
-            units=WellCompletionUnits(
-                kh=WellCompletionUnitInfo(unit=self._kh_unit, decimalPlaces=self._kh_decimal_places)
-            ),
-            stratigraphy=self._extract_stratigraphy(self._dummy_stratigraphy(), self._zones),
-            timeSteps=[pd.to_datetime(str(dte)).strftime("%Y-%m-%d") for dte in self._datemap.keys()],
-            wells=self._extract_wells(),
-        )
-
-    def _extract_wells(self) -> List[WellCompletionWell]:
-        """Generates the wells part of the dataset to front-end"""
-        well_list = []
-        no_real = self._well_completion_df["REAL"].nunique()
-        for well_name, well_group in self._well_completion_df.groupby("WELL"):
-            well_data = self._extract_well(well_group, well_name, no_real)
-            well_data.attributes = self._well_attributes[well_name] if well_name in self._well_attributes else {}
-            well_list.append(well_data)
-        return well_list
-
-    def _extract_well(self, well_group: pd.DataFrame, well_name: str, no_real: int) -> WellCompletionWell:
-        """Extract completion events and kh values for a single well"""
-        well: WellCompletionWell = WellCompletionWell(name=well_name, attributes={}, completions={})
-
-        completions: Dict[str, Completions] = {}
-        for (zone, timestep), group_df in well_group.groupby(["ZONE", "TIMESTEP"]):
-            data = group_df["OP/SH"].value_counts()
-            if zone not in completions:
-                completions[zone] = Completions(t=[], open=[], shut=[], kh_mean=[], kh_min=[], kh_max=[])
-
-            zone_completions = completions[zone]
-            zone_completions.t.append(int(timestep))
-            zone_completions.open.append(float(data["OPEN"] / no_real if "OPEN" in data else 0))
-            zone_completions.shut.append(float(data["SHUT"] / no_real if "SHUT" in data else 0))
-            zone_completions.kh_mean.append(round(float(group_df["KH"].mean()), 2))
-            zone_completions.kh_min.append(round(float(group_df["KH"].min()), 2))
-            zone_completions.kh_max.append(round(float(group_df["KH"].max()), 2))
-
-        well.completions = completions
-        return well
-
-    def _extract_stratigraphy(
-        self, stratigraphy: Optional[List[WellCompletionZone]], zones: List[str]
-    ) -> List[WellCompletionZone]:
-        """Returns the stratigraphy part of the dataset to front-end"""
-        color_iterator = itertools.cycle(self._theme_colors)
-
-        # If no stratigraphy file is found then the stratigraphy is
-        # created from the unique zones in the wellcompletiondata input.
-        # They will then probably not come in the correct order.
-        if stratigraphy is None:
-            return [WellCompletionZone(name=zone, color=next(color_iterator)) for zone in zones]
-
-        # If stratigraphy is not None the following is done:
-        stratigraphy, remaining_valid_zones = self._filter_valid_nodes(stratigraphy, zones)
-
-        if remaining_valid_zones:
-            raise ValueError(
-                "The following zones are defined in the well completion data, "
-                f"but not in the stratigraphy: {remaining_valid_zones}"
-            )
-
-        return self._add_colors_to_stratigraphy(stratigraphy, color_iterator)
-
-    def _add_colors_to_stratigraphy(
-        self,
-        stratigraphy: List[WellCompletionZone],
-        color_iterator: Iterator,
-        zone_color_mapping: Optional[Dict[str, str]] = None,
-    ) -> List[WellCompletionZone]:
-        """Add colors to the stratigraphy tree. The function will recursively parse the tree.
-
-        There are tree sources of color:
-        1. The color is given in the stratigraphy list, in which case nothing is done to the node
-        2. The color is the optional the zone->color map
-        3. If none of the above applies, the color will be taken from the theme color iterable for \
-        the leaves. For other levels, a dummy color grey is used
-        """
-        for zone in stratigraphy:
-            if zone.color == "":
-                if zone_color_mapping is not None and zone.name in zone_color_mapping:
-                    zone.color = zone_color_mapping[zone.name]
-                elif zone.subzones is None:
-                    zone = next(color_iterator)  # theme colors only applied on leaves
-                else:
-                    zone.color = "#808080"  # grey
-            if zone.subzones is not None:
-                zone.subzones = self._add_colors_to_stratigraphy(
-                    zone.subzones,
-                    color_iterator,
-                    zone_color_mapping=zone_color_mapping,
-                )
-        return stratigraphy
-
-    def _filter_valid_nodes(
-        self, stratigraphy: List[WellCompletionZone], valid_zone_names: List[str]
-    ) -> Tuple[List[WellCompletionZone], List[str]]:
-        """Returns the stratigraphy tree with only valid nodes.
-        A node is considered valid if it self or one of it's subzones are in the
-        valid zone names list (passed from the lyr file)
-
-        The function recursively parses the tree to add valid nodes.
-        """
-
-        output = []
-        remaining_valid_zones = valid_zone_names
-        for zone in stratigraphy:
-            if zone.subzones is not None:
-                zone.subzones, remaining_valid_zones = self._filter_valid_nodes(zone.subzones, remaining_valid_zones)
-            if zone.name in remaining_valid_zones:
-                output.append(zone)
-                remaining_valid_zones = [
-                    elm for elm in remaining_valid_zones if elm != zone.name
-                ]  # remove zone name from valid zones if it is found in the stratigraphy
-            elif zone.subzones is not None:
-                output.append(zone)
-
-        return output, remaining_valid_zones
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9dc9be156..06fad83bd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.0",
             "dependencies": {
                 "@headlessui/react": "^1.7.8",
-                "@heroicons/react": "^2.0.14",
                 "@mui/base": "^5.0.0-beta.3",
+                "@mui/icons-material": "^5.14.9",
                 "@tanstack/react-query": "^4.24.10",
                 "@tanstack/react-query-devtools": "^4.24.12",
                 "@webviz/subsurface-viewer": "^0.0.2-alpha.9",
@@ -647,9 +647,9 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.22.11",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz",
-            "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==",
+            "version": "7.22.15",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+            "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
             "dependencies": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -1408,14 +1408,6 @@
                 "react-dom": "^16 || ^17 || ^18"
             }
         },
-        "node_modules/@heroicons/react": {
-            "version": "2.0.18",
-            "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
-            "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
-            "peerDependencies": {
-                "react": ">= 16"
-            }
-        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -2791,12 +2783,11 @@
             }
         },
         "node_modules/@mui/icons-material": {
-            "version": "5.14.7",
-            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.7.tgz",
-            "integrity": "sha512-mWp4DwMa8c1Gx9yOEtPgxM4b+e6hAbtZyzfSubdBwrnEE6G5D2rbAJ5MB+If6kfI48JaYaJ5j8+zAdmZLuZc0A==",
-            "peer": true,
+            "version": "5.14.9",
+            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.9.tgz",
+            "integrity": "sha512-xTRQbDsogsJo7tY5Og8R9zbuG2q+KIPVIM6JQoKxtJlz9DPOw1u0T2fGrvwD+XAOVifQf6epNMcGCDLfJAz4Nw==",
             "dependencies": {
-                "@babel/runtime": "^7.22.10"
+                "@babel/runtime": "^7.22.15"
             },
             "engines": {
                 "node": ">=12.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 968995756..dc3cd32be 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,8 +16,8 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.7.8",
-        "@heroicons/react": "^2.0.14",
         "@mui/base": "^5.0.0-beta.3",
+        "@mui/icons-material": "^5.14.9",
         "@tanstack/react-query": "^4.24.10",
         "@tanstack/react-query-devtools": "^4.24.12",
         "@webviz/subsurface-viewer": "^0.0.2-alpha.9",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4a0e9b82f..5f7e01cd2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 
 import { DrawerContent, LayoutElement, Workbench } from "@framework/Workbench";
-import { LoginDialog } from "@framework/internal/components/LoginDialog";
 import { NavBar } from "@framework/internal/components/NavBar";
 import { SettingsContentPanels } from "@framework/internal/components/SettingsContentPanels";
 import { useQueryClient } from "@tanstack/react-query";
@@ -41,13 +40,10 @@ function App() {
     }, []);
 
     return (
-        <>
-            <LoginDialog />
-            <div className="h-screen flex flex-row">
-                <NavBar workbench={workbench.current} />
-                <SettingsContentPanels workbench={workbench.current} />
-            </div>
-        </>
+        <div className="h-screen flex flex-row">
+            <NavBar workbench={workbench.current} />
+            <SettingsContentPanels workbench={workbench.current} />
+        </div>
     );
 }
 
diff --git a/frontend/src/GlobalErrorBoundary.tsx b/frontend/src/GlobalErrorBoundary.tsx
index 5c1adc268..446b666f1 100644
--- a/frontend/src/GlobalErrorBoundary.tsx
+++ b/frontend/src/GlobalErrorBoundary.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-import { BugAntIcon, Square2StackIcon } from "@heroicons/react/20/solid";
 import { Button } from "@lib/components/Button";
 import { IconButton } from "@lib/components/IconButton";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { BugReport, ContentCopy } from "@mui/icons-material";
 
 type Props = {
     children?: React.ReactNode;
@@ -68,7 +68,7 @@ export class GlobalErrorBoundary extends React.Component<Props, State> {
                                         {freshStartUrl.toString()}
                                     </a>
                                     <IconButton onClick={copyToClipboard} title="Copy URL to clipboard">
-                                        <Square2StackIcon className="w-4 h-4" />
+                                        <ContentCopy fontSize="small" />
                                     </IconButton>
                                 </div>
                                 <div
@@ -91,7 +91,7 @@ export class GlobalErrorBoundary extends React.Component<Props, State> {
                                         this.state.error?.stack ?? ""
                                     )
                                 }
-                                startIcon={<BugAntIcon className="w-4 h-4" />}
+                                startIcon={<BugReport fontSize="small" />}
                             >
                                 Report issue
                             </Button>
diff --git a/frontend/src/api/ApiService.ts b/frontend/src/api/ApiService.ts
index 44c7fe0f9..d0fab3543 100644
--- a/frontend/src/api/ApiService.ts
+++ b/frontend/src/api/ApiService.ts
@@ -15,7 +15,7 @@ import { SurfaceService } from './services/SurfaceService';
 import { SurfacePolygonsService } from './services/SurfacePolygonsService';
 import { TimeseriesService } from './services/TimeseriesService';
 import { WellService } from './services/WellService';
-import { WellCompletionService } from './services/WellCompletionService';
+import { WellCompletionsService } from './services/WellCompletionsService';
 
 type HttpRequestConstructor = new (config: OpenAPIConfig) => BaseHttpRequest;
 
@@ -31,7 +31,7 @@ export class ApiService {
     public readonly surfacePolygons: SurfacePolygonsService;
     public readonly timeseries: TimeseriesService;
     public readonly well: WellService;
-    public readonly wellCompletion: WellCompletionService;
+    public readonly wellCompletions: WellCompletionsService;
 
     public readonly request: BaseHttpRequest;
 
@@ -58,7 +58,7 @@ export class ApiService {
         this.surfacePolygons = new SurfacePolygonsService(this.request);
         this.timeseries = new TimeseriesService(this.request);
         this.well = new WellService(this.request);
-        this.wellCompletion = new WellCompletionService(this.request);
+        this.wellCompletions = new WellCompletionsService(this.request);
     }
 }
 
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 1923f75da..174ba475c 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -47,12 +47,11 @@ export type { VectorStatisticData as VectorStatisticData_api } from './models/Ve
 export type { VectorStatisticSensitivityData as VectorStatisticSensitivityData_api } from './models/VectorStatisticSensitivityData';
 export type { WellBoreHeader as WellBoreHeader_api } from './models/WellBoreHeader';
 export type { WellBoreTrajectory as WellBoreTrajectory_api } from './models/WellBoreTrajectory';
-export type { WellCompletionData as WellCompletionData_api } from './models/WellCompletionData';
-export type { WellCompletionDataSet as WellCompletionDataSet_api } from './models/WellCompletionDataSet';
-export type { WellCompletionUnitInfo as WellCompletionUnitInfo_api } from './models/WellCompletionUnitInfo';
-export type { WellCompletionUnits as WellCompletionUnits_api } from './models/WellCompletionUnits';
-export type { WellCompletionWell as WellCompletionWell_api } from './models/WellCompletionWell';
-export type { WellCompletionZone as WellCompletionZone_api } from './models/WellCompletionZone';
+export type { WellCompletionsData as WellCompletionsData_api } from './models/WellCompletionsData';
+export type { WellCompletionsUnitInfo as WellCompletionsUnitInfo_api } from './models/WellCompletionsUnitInfo';
+export type { WellCompletionsUnits as WellCompletionsUnits_api } from './models/WellCompletionsUnits';
+export type { WellCompletionsWell as WellCompletionsWell_api } from './models/WellCompletionsWell';
+export type { WellCompletionsZone as WellCompletionsZone_api } from './models/WellCompletionsZone';
 
 export { DefaultService } from './services/DefaultService';
 export { ExploreService } from './services/ExploreService';
@@ -64,4 +63,4 @@ export { SurfaceService } from './services/SurfaceService';
 export { SurfacePolygonsService } from './services/SurfacePolygonsService';
 export { TimeseriesService } from './services/TimeseriesService';
 export { WellService } from './services/WellService';
-export { WellCompletionService } from './services/WellCompletionService';
+export { WellCompletionsService } from './services/WellCompletionsService';
diff --git a/frontend/src/api/models/UserInfo.ts b/frontend/src/api/models/UserInfo.ts
index 1d80b9237..efffcd292 100644
--- a/frontend/src/api/models/UserInfo.ts
+++ b/frontend/src/api/models/UserInfo.ts
@@ -4,6 +4,8 @@
 
 export type UserInfo = {
     username: string;
+    display_name: (string | null);
+    avatar_b64str: (string | null);
     has_sumo_access: boolean;
     has_smda_access: boolean;
 };
diff --git a/frontend/src/api/models/WellCompletionData.ts b/frontend/src/api/models/WellCompletionData.ts
deleted file mode 100644
index 9d9d24caf..000000000
--- a/frontend/src/api/models/WellCompletionData.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-import type { WellCompletionDataSet } from './WellCompletionDataSet';
-
-export type WellCompletionData = {
-    json_data: WellCompletionDataSet;
-};
-
diff --git a/frontend/src/api/models/WellCompletionDataSet.ts b/frontend/src/api/models/WellCompletionDataSet.ts
deleted file mode 100644
index add799c58..000000000
--- a/frontend/src/api/models/WellCompletionDataSet.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-import type { WellCompletionUnits } from './WellCompletionUnits';
-import type { WellCompletionWell } from './WellCompletionWell';
-import type { WellCompletionZone } from './WellCompletionZone';
-
-/**
- * Type definition for well completion data set
- */
-export type WellCompletionDataSet = {
-    version: string;
-    units: WellCompletionUnits;
-    stratigraphy: Array<WellCompletionZone>;
-    timeSteps: Array<string>;
-    wells: Array<WellCompletionWell>;
-};
-
diff --git a/frontend/src/api/models/WellCompletionUnits.ts b/frontend/src/api/models/WellCompletionUnits.ts
deleted file mode 100644
index 9aa8c07cd..000000000
--- a/frontend/src/api/models/WellCompletionUnits.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-import type { WellCompletionUnitInfo } from './WellCompletionUnitInfo';
-
-export type WellCompletionUnits = {
-    kh: WellCompletionUnitInfo;
-};
-
diff --git a/frontend/src/api/models/WellCompletionsData.ts b/frontend/src/api/models/WellCompletionsData.ts
new file mode 100644
index 000000000..272ec94d2
--- /dev/null
+++ b/frontend/src/api/models/WellCompletionsData.ts
@@ -0,0 +1,19 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { WellCompletionsUnits } from './WellCompletionsUnits';
+import type { WellCompletionsWell } from './WellCompletionsWell';
+import type { WellCompletionsZone } from './WellCompletionsZone';
+
+/**
+ * Type definition for well completions data
+ */
+export type WellCompletionsData = {
+    version: string;
+    units: WellCompletionsUnits;
+    stratigraphy: Array<WellCompletionsZone>;
+    timeSteps: Array<string>;
+    wells: Array<WellCompletionsWell>;
+};
+
diff --git a/frontend/src/api/models/WellCompletionUnitInfo.ts b/frontend/src/api/models/WellCompletionsUnitInfo.ts
similarity index 74%
rename from frontend/src/api/models/WellCompletionUnitInfo.ts
rename to frontend/src/api/models/WellCompletionsUnitInfo.ts
index b3b6e2512..8eafff910 100644
--- a/frontend/src/api/models/WellCompletionUnitInfo.ts
+++ b/frontend/src/api/models/WellCompletionsUnitInfo.ts
@@ -2,7 +2,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export type WellCompletionUnitInfo = {
+export type WellCompletionsUnitInfo = {
     unit: string;
     decimalPlaces: number;
 };
diff --git a/frontend/src/api/models/WellCompletionsUnits.ts b/frontend/src/api/models/WellCompletionsUnits.ts
new file mode 100644
index 000000000..26ea69dfa
--- /dev/null
+++ b/frontend/src/api/models/WellCompletionsUnits.ts
@@ -0,0 +1,10 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { WellCompletionsUnitInfo } from './WellCompletionsUnitInfo';
+
+export type WellCompletionsUnits = {
+    kh: WellCompletionsUnitInfo;
+};
+
diff --git a/frontend/src/api/models/WellCompletionWell.ts b/frontend/src/api/models/WellCompletionsWell.ts
similarity index 87%
rename from frontend/src/api/models/WellCompletionWell.ts
rename to frontend/src/api/models/WellCompletionsWell.ts
index d0ee31077..d9afb14c2 100644
--- a/frontend/src/api/models/WellCompletionWell.ts
+++ b/frontend/src/api/models/WellCompletionsWell.ts
@@ -4,7 +4,7 @@
 
 import type { Completions } from './Completions';
 
-export type WellCompletionWell = {
+export type WellCompletionsWell = {
     name: string;
     attributes: Record<string, (string | number | boolean)>;
     completions: Record<string, Completions>;
diff --git a/frontend/src/api/models/WellCompletionZone.ts b/frontend/src/api/models/WellCompletionsZone.ts
similarity index 56%
rename from frontend/src/api/models/WellCompletionZone.ts
rename to frontend/src/api/models/WellCompletionsZone.ts
index 15202c456..02047e005 100644
--- a/frontend/src/api/models/WellCompletionZone.ts
+++ b/frontend/src/api/models/WellCompletionsZone.ts
@@ -2,9 +2,9 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export type WellCompletionZone = {
+export type WellCompletionsZone = {
     name: string;
     color: string;
-    subzones: (Array<WellCompletionZone> | null);
+    subzones: (Array<WellCompletionsZone> | null);
 };
 
diff --git a/frontend/src/api/services/DefaultService.ts b/frontend/src/api/services/DefaultService.ts
index 6cc8012e0..71efe87fa 100644
--- a/frontend/src/api/services/DefaultService.ts
+++ b/frontend/src/api/services/DefaultService.ts
@@ -69,13 +69,22 @@ export class DefaultService {
 
     /**
      * Logged In User
+     * @param includeGraphApiInfo Set to true to include user avatar and display name from Microsoft Graph API
      * @returns UserInfo Successful Response
      * @throws ApiError
      */
-    public loggedInUser(): CancelablePromise<UserInfo> {
+    public loggedInUser(
+        includeGraphApiInfo: boolean = false,
+    ): CancelablePromise<UserInfo> {
         return this.httpRequest.request({
             method: 'GET',
             url: '/logged_in_user',
+            query: {
+                'includeGraphApiInfo': includeGraphApiInfo,
+            },
+            errors: {
+                422: `Validation Error`,
+            },
         });
     }
 
diff --git a/frontend/src/api/services/WellCompletionService.ts b/frontend/src/api/services/WellCompletionsService.ts
similarity index 72%
rename from frontend/src/api/services/WellCompletionService.ts
rename to frontend/src/api/services/WellCompletionsService.ts
index 99c919b59..23bf1ecf6 100644
--- a/frontend/src/api/services/WellCompletionService.ts
+++ b/frontend/src/api/services/WellCompletionsService.ts
@@ -1,31 +1,31 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { WellCompletionData } from '../models/WellCompletionData';
+import type { WellCompletionsData } from '../models/WellCompletionsData';
 
 import type { CancelablePromise } from '../core/CancelablePromise';
 import type { BaseHttpRequest } from '../core/BaseHttpRequest';
 
-export class WellCompletionService {
+export class WellCompletionsService {
 
     constructor(public readonly httpRequest: BaseHttpRequest) {}
 
     /**
-     * Get Well Completion Data
+     * Get Well Completions Data
      * @param caseUuid Sumo case uuid
      * @param ensembleName Ensemble name
      * @param realization Optional realization to include. If not specified, all realizations will be returned.
-     * @returns WellCompletionData Successful Response
+     * @returns WellCompletionsData Successful Response
      * @throws ApiError
      */
-    public getWellCompletionData(
+    public getWellCompletionsData(
         caseUuid: string,
         ensembleName: string,
         realization?: (number | null),
-    ): CancelablePromise<WellCompletionData> {
+    ): CancelablePromise<WellCompletionsData> {
         return this.httpRequest.request({
             method: 'GET',
-            url: '/well_completion/well_completion_data/',
+            url: '/well_completions/well_completions_data/',
             query: {
                 'case_uuid': caseUuid,
                 'ensemble_name': ensembleName,
diff --git a/frontend/src/framework/Module.tsx b/frontend/src/framework/Module.tsx
index 770447afe..9d825f3b1 100644
--- a/frontend/src/framework/Module.tsx
+++ b/frontend/src/framework/Module.tsx
@@ -44,13 +44,15 @@ export class Module<StateType extends StateBaseType> {
     private _syncableSettingKeys: SyncSettingKey[];
     private _channelsDef: BroadcastChannelsDef;
     private _drawPreviewFunc: DrawPreviewFunc | null;
+    private _description: string | null;
 
     constructor(
         name: string,
         defaultTitle: string,
         syncableSettingKeys: SyncSettingKey[] = [],
         broadcastChannelsDef: BroadcastChannelsDef = {},
-        drawPreviewFunc: DrawPreviewFunc | null = null
+        drawPreviewFunc: DrawPreviewFunc | null = null,
+        description: string | null = null
     ) {
         this._name = name;
         this._defaultTitle = defaultTitle;
@@ -63,6 +65,7 @@ export class Module<StateType extends StateBaseType> {
         this._syncableSettingKeys = syncableSettingKeys;
         this._channelsDef = broadcastChannelsDef;
         this._drawPreviewFunc = drawPreviewFunc;
+        this._description = description;
     }
 
     getDrawPreviewFunc(): DrawPreviewFunc | null {
@@ -73,14 +76,18 @@ export class Module<StateType extends StateBaseType> {
         return this._importState;
     }
 
-    getName() {
+    getName(): string {
         return this._name;
     }
 
-    getDefaultTitle() {
+    getDefaultTitle(): string {
         return this._defaultTitle;
     }
 
+    getDescription(): string | null {
+        return this._description;
+    }
+
     setWorkbench(workbench: Workbench): void {
         this._workbench = workbench;
     }
diff --git a/frontend/src/framework/ModuleRegistry.ts b/frontend/src/framework/ModuleRegistry.ts
index b3c470b0d..92e3edc22 100644
--- a/frontend/src/framework/ModuleRegistry.ts
+++ b/frontend/src/framework/ModuleRegistry.ts
@@ -11,6 +11,7 @@ export type RegisterModuleOptions = {
     syncableSettingKeys?: SyncSettingKey[];
     broadcastChannelsDef?: BroadcastChannelsDef;
     preview?: DrawPreviewFunc;
+    description?: string;
 };
 
 export class ModuleNotFoundError extends Error {
@@ -38,7 +39,8 @@ export class ModuleRegistry {
             options.defaultTitle,
             options.syncableSettingKeys,
             options.broadcastChannelsDef,
-            options.preview || null
+            options.preview ?? null,
+            options.description ?? null
         );
         this._registeredModules[options.moduleName] = module;
         return module;
diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/crashView.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/crashView.tsx
index 179ed3ad5..51d067680 100644
--- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/crashView.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/crashView.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { ArrowPathIcon, DocumentMagnifyingGlassIcon, FaceFrownIcon, MegaphoneIcon } from "@heroicons/react/20/solid";
 import { Button } from "@lib/components/Button";
 import { Dialog } from "@lib/components/Dialog";
+import { BugReport, Info, MoodBad, Refresh } from "@mui/icons-material";
 
 export type FormattedErrorProps = {
     moduleName: string;
@@ -79,24 +79,20 @@ export const CrashView: React.FC<FormattedErrorProps> = (props) => {
     return (
         <div className="flex flex-col h-full w-full">
             <div className="bg-red-400 flex flex-col justify-center items-center h-[50%] text-white gap-4">
-                <FaceFrownIcon className="h-16 w-16" />
+                <MoodBad fontSize="small" />
                 <div className="font-bold text-center">{props.error.message}</div>
             </div>
             <div className="flex flex-col items-center h-[50%] gap-6 p-8">
                 The above error made your module instance crash. Unfortunately, this means that its state is lost. You
                 can try to reset the instance to its initial state in order to start over.
                 <div className="flex gap-4">
-                    <Button
-                        onClick={handleReload}
-                        variant="contained"
-                        startIcon={<ArrowPathIcon className="w-4 h-4" />}
-                    >
+                    <Button onClick={handleReload} variant="contained" startIcon={<Refresh fontSize="small" />}>
                         Reset to initial state
                     </Button>
-                    <Button onClick={handleShowDetails} startIcon={<DocumentMagnifyingGlassIcon className="w-4 h-4" />}>
+                    <Button onClick={handleShowDetails} startIcon={<Info fontSize="small" />}>
                         Show error details
                     </Button>
-                    <Button onClick={handleReportError} startIcon={<MegaphoneIcon className="w-4 h-4" />}>
+                    <Button onClick={handleReportError} startIcon={<BugReport fontSize="small" />}>
                         Report error
                     </Button>
                 </div>
diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
index c9acc4517..eb0f42009 100644
--- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import { ModuleInstance } from "@framework/ModuleInstance";
 import { SyncSettingKey, SyncSettingsMeta } from "@framework/SyncSettings";
-import { XMarkIcon } from "@heroicons/react/20/solid";
 import { isDevMode } from "@lib/utils/devMode";
+import { Close } from "@mui/icons-material";
 
 export type HeaderProps = {
     moduleInstance: ModuleInstance<any>;
@@ -38,6 +38,10 @@ export const Header: React.FC<HeaderProps> = (props) => {
         return unsubscribeFunc;
     }, []);
 
+    function handlePointerUp(e: React.PointerEvent<HTMLDivElement>) {
+        e.stopPropagation();
+    }
+
     return (
         <div
             className={`bg-slate-100 p-2 pl-4 pr-4 flex items-center select-none shadow ${
@@ -73,9 +77,10 @@ export const Header: React.FC<HeaderProps> = (props) => {
             <div
                 className="hover:text-slate-500 cursor-pointer"
                 onPointerDown={props.onRemoveClick}
+                onPointerUp={handlePointerUp}
                 title="Remove this module"
             >
-                <XMarkIcon className="w-4 h-4" />
+                <Close className="w-4 h-4" />
             </div>
         </div>
     );
diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx
index c00cb8e2a..c284464fd 100644
--- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx
@@ -92,6 +92,8 @@ export const ViewWrapper: React.FC<ViewWrapperProps> = (props) => {
         handleModuleClick();
     }
 
+    const showAsActive = props.isActive && [DrawerContent.ModuleSettings, DrawerContent.SyncSettings].includes(drawerContent);
+
     return (
         <>
             {props.isDragged && (
@@ -111,7 +113,7 @@ export const ViewWrapper: React.FC<ViewWrapperProps> = (props) => {
             >
                 <div
                     className={`bg-white h-full w-full flex flex-col ${
-                        props.isActive ? "border-blue-500" : ""
+                        showAsActive && drawerContent ? "border-blue-500" : ""
                     } border-solid border-2 box-border shadow ${
                         props.isDragged ? "cursor-grabbing select-none" : "cursor-grab"
                     }}`}
diff --git a/frontend/src/framework/internal/components/Content/private-components/layout.tsx b/frontend/src/framework/internal/components/Content/private-components/layout.tsx
index 49927b695..7ba57d698 100644
--- a/frontend/src/framework/internal/components/Content/private-components/layout.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/layout.tsx
@@ -286,6 +286,11 @@ export const Layout: React.FC<LayoutProps> = (props) => {
                 LayoutEventTypes.MODULE_INSTANCE_POINTER_DOWN,
                 handleModuleInstancePointerDown
             );
+            document.removeEventListener(LayoutEventTypes.NEW_MODULE_POINTER_DOWN, handleNewModulePointerDown);
+            document.removeEventListener(
+                LayoutEventTypes.REMOVE_MODULE_INSTANCE_REQUEST,
+                handleRemoveModuleInstanceRequest
+            );
             document.removeEventListener("pointerup", handlePointerUp);
             document.removeEventListener("pointermove", handlePointerMove);
             document.removeEventListener("keydown", handleButtonClick);
diff --git a/frontend/src/framework/internal/components/Drawer/drawer.tsx b/frontend/src/framework/internal/components/Drawer/drawer.tsx
index 9fffc0309..e998ab8a6 100644
--- a/frontend/src/framework/internal/components/Drawer/drawer.tsx
+++ b/frontend/src/framework/internal/components/Drawer/drawer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { Input } from "@lib/components/Input";
+import { Search } from "@mui/icons-material";
 
 export type DrawerProps = {
     title: string;
@@ -17,7 +17,7 @@ export const Drawer: React.FC<DrawerProps> = (props) => {
     return (
         <div className={`flex flex-col bg-white min-h-0 h-full${props.visible ? "" : " hidden"}`}>
             <div className="flex justify-center items-center p-2 bg-slate-100 h-10">
-                {props.icon && React.cloneElement(props.icon, { className: "w-5 h-5 mr-2" })}
+                {props.icon && React.cloneElement(props.icon, { fontSize: "small", className: "mr-2" })}
                 <span className="font-bold flex-grow p-0 text-sm">{props.title}</span>
             </div>
             <div className="flex-grow flex flex-col">
@@ -25,7 +25,7 @@ export const Drawer: React.FC<DrawerProps> = (props) => {
                     <div className="p-2 bg-slate-50">
                         <Input
                             placeholder={props.filterPlaceholder}
-                            startAdornment={<MagnifyingGlassIcon className="w-4 h-4" />}
+                            startAdornment={<Search fontSize="small" />}
                             onChange={props.onFilterChange}
                         />
                     </div>
diff --git a/frontend/src/framework/internal/components/LoginButton/loginButton.tsx b/frontend/src/framework/internal/components/LoginButton/loginButton.tsx
index bc365854c..55d994d32 100644
--- a/frontend/src/framework/internal/components/LoginButton/loginButton.tsx
+++ b/frontend/src/framework/internal/components/LoginButton/loginButton.tsx
@@ -1,13 +1,26 @@
 import React from "react";
 
 import { AuthState, useAuthProvider } from "@framework/internal/providers/AuthProvider";
-import { ArrowLeftOnRectangleIcon, ArrowRightOnRectangleIcon, UserIcon } from "@heroicons/react/20/solid";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Menu } from "@lib/components/Menu";
 import { MenuItem } from "@lib/components/MenuItem";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
 import { Dropdown, MenuButton } from "@mui/base";
+import { AccountCircle, Login, Logout } from "@mui/icons-material";
+
+function makeInitials(name: string): string | null {
+    const regExp = new RegExp(/([^()]+)(\([\w ]+\))/);
+    const match = regExp.exec(name);
+
+    if (match) {
+        const names = match[1].trim().split(" ");
+        if (names.length > 1) {
+            return names[0].charAt(0) + names[names.length - 1].charAt(0);
+        }
+    }
+    return null;
+}
 
 export type LoginButtonProps = {
     className?: string;
@@ -29,9 +42,29 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
 
     function makeIcon() {
         if (authState === AuthState.LoggedIn) {
-            return <UserIcon className="w-5 h-5 mr-1" />;
+            if (userInfo?.avatar_b64str) {
+                return (
+                    <img
+                        src={`data:image/png;base64,${userInfo.avatar_b64str}`}
+                        alt="Avatar"
+                        className="w-5 h-5 rounded-full mr-1"
+                    />
+                );
+            }
+            if (userInfo?.display_name) {
+                const initials = makeInitials(userInfo.display_name);
+                if (initials) {
+                    return (
+                        <div className="w-5 h-5 rounded-full bg-slate-300 text-[0.6em] flex items-center justify-center mr-1">
+                            {initials}
+                        </div>
+                    );
+                }
+            }
+            return <AccountCircle className="w-5 h-5 mr-1" />;
+
         } else if (authState === AuthState.NotLoggedIn) {
-            return <ArrowLeftOnRectangleIcon className="w-5 h-5 mr-1" />;
+            return <Login fontSize="small" className=" mr-1" />;
         } else {
             return <CircularProgress size="medium-small" className="mr-1" />;
         }
@@ -39,7 +72,7 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
 
     function makeText() {
         if (authState === AuthState.LoggedIn) {
-            return userInfo?.username || "Unknown user";
+            return userInfo?.display_name || userInfo?.username || "Unknown user";
         } else if (authState === AuthState.NotLoggedIn) {
             return "Sign in";
         } else {
@@ -71,7 +104,7 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
             >
                 <span
                     className="flex items-center gap-2"
-                    title={authState === AuthState.LoggedIn ? `Signed in as ${userInfo?.username}` : "Sign in"}
+                    title={makeText()}
                 >
                     {makeIcon()}
                     <span className="overflow-hidden text-ellipsis min-w-0 whitespace-nowrap" ref={textRef}>
@@ -81,7 +114,7 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
             </MenuButton>
             <Menu anchorOrigin="bottom-start">
                 <MenuItem onClick={handleLogout}>
-                    <ArrowRightOnRectangleIcon className="w-4 h-4 mr-2" />
+                    <Logout fontSize="small" className="mr-2" />
                     Sign out
                 </MenuItem>
             </Menu>
diff --git a/frontend/src/framework/internal/components/LoginDialog/index.ts b/frontend/src/framework/internal/components/LoginDialog/index.ts
deleted file mode 100644
index 3b09d5b99..000000000
--- a/frontend/src/framework/internal/components/LoginDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LoginDialog } from "./loginDialog";
diff --git a/frontend/src/framework/internal/components/LoginDialog/loginDialog.tsx b/frontend/src/framework/internal/components/LoginDialog/loginDialog.tsx
deleted file mode 100644
index dfd5cb46d..000000000
--- a/frontend/src/framework/internal/components/LoginDialog/loginDialog.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import { AuthState, useAuthProvider } from "@framework/internal/providers/AuthProvider";
-import { Button } from "@lib/components/Button";
-import { CircularProgress } from "@lib/components/CircularProgress";
-import { Dialog } from "@lib/components/Dialog";
-
-export const LoginDialog: React.FC = () => {
-    const auth = useAuthProvider();
-
-    function signIn() {
-        window.location.href = `/api/login?redirect_url_after_login=${btoa("/")}`;
-    }
-
-    if (auth.authState !== AuthState.LoggedIn) {
-        return (
-            <Dialog
-                title="Sign in"
-                open
-                modal
-                actions={
-                    <Button onClick={signIn} disabled={auth.authState !== AuthState.NotLoggedIn}>
-                        {auth.authState === AuthState.NotLoggedIn ? "Sign in" : <CircularProgress size="medium" />}
-                    </Button>
-                }
-            >
-                You have to sign in in order to use this application.
-            </Dialog>
-        );
-    } else {
-        return null;
-    }
-};
diff --git a/frontend/src/framework/internal/components/NavBar/navBar.tsx b/frontend/src/framework/internal/components/NavBar/navBar.tsx
index ccff4ee24..11c0c6f40 100644
--- a/frontend/src/framework/internal/components/NavBar/navBar.tsx
+++ b/frontend/src/framework/internal/components/NavBar/navBar.tsx
@@ -3,27 +3,27 @@ import React from "react";
 import WebvizLogo from "@assets/webviz.svg";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { useStoreState } from "@framework/StateStore";
-import { DrawerContent, Workbench } from "@framework/Workbench";
+import { DrawerContent, Workbench, WorkbenchEvents } from "@framework/Workbench";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { LoginButton } from "@framework/internal/components/LoginButton";
 import { SelectEnsemblesDialog } from "@framework/internal/components/SelectEnsemblesDialog";
 import { EnsembleItem } from "@framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog";
-import {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    Cog6ToothIcon,
-    LinkIcon,
-    QueueListIcon,
-    Squares2X2Icon,
-    StarIcon,
-    SwatchIcon,
-    WindowIcon,
-} from "@heroicons/react/20/solid";
 import { Badge } from "@lib/components/Badge";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { isDevMode } from "@lib/utils/devMode";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import {
+    ChevronLeft,
+    ChevronRight,
+    GitHub,
+    GridView,
+    Link,
+    List,
+    Palette,
+    Settings,
+    WebAsset,
+} from "@mui/icons-material";
 import { useQueryClient } from "@tanstack/react-query";
 
 type NavBarProps = {
@@ -36,6 +36,7 @@ const NavBarDivider: React.FC = () => {
 
 export const NavBar: React.FC<NavBarProps> = (props) => {
     const [ensembleDialogOpen, setEnsembleDialogOpen] = React.useState<boolean>(false);
+    const [layoutEmpty, setLayoutEmpty] = React.useState<boolean>(props.workbench.getLayout().length === 0);
     const [expanded, setExpanded] = React.useState<boolean>(localStorage.getItem("navBarExpanded") === "true");
     const [loadingEnsembleSet, setLoadingEnsembleSet] = useStoreState(
         props.workbench.getGuiStateStore(),
@@ -50,6 +51,27 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
 
     const queryClient = useQueryClient();
 
+    React.useEffect(
+        function reactToModuleInstancesChanged() {
+            function listener() {
+                if (
+                    props.workbench.getLayout().length === 0 &&
+                    [DrawerContent.ModuleSettings, DrawerContent.SyncSettings].includes(drawerContent)
+                ) {
+                    setDrawerContent(DrawerContent.ModulesList);
+                }
+                setLayoutEmpty(props.workbench.getLayout().length === 0);
+            }
+
+            const unsubscribeFunc = props.workbench.subscribe(WorkbenchEvents.ModuleInstancesChanged, listener);
+
+            return () => {
+                unsubscribeFunc();
+            };
+        },
+        [drawerContent]
+    );
+
     function ensureSettingsPanelIsVisible() {
         if (settingsPanelWidth <= 5) {
             setSettingsPanelWidth(20);
@@ -126,7 +148,7 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                         className="!text-slate-800"
                         title={expanded ? "Collapse menu" : "Expand menu"}
                     >
-                        {expanded ? <ChevronLeftIcon className="w-5 h-5" /> : <ChevronRightIcon className="w-5 h-5" />}
+                        {expanded ? <ChevronLeft fontSize="small" /> : <ChevronRight fontSize="small" />}
                     </Button>
                 </div>
                 <NavBarDivider />
@@ -136,7 +158,7 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                     className="w-full !text-slate-800 h-10"
                     startIcon={
                         selectedEnsembles.length === 0 && !loadingEnsembleSet ? (
-                            <QueueListIcon className="w-5 h-5 mr-2" />
+                            <List fontSize="small" className="w-5 h-5 mr-2" />
                         ) : (
                             <Badge
                                 className="mr-2"
@@ -149,7 +171,7 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                                     )
                                 }
                             >
-                                <QueueListIcon className="w-5 h-5" />
+                                <List fontSize="small" className="w-5 h-5" />
                             </Badge>
                         )
                     }
@@ -160,24 +182,26 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                 <Button
                     title="Show module settings"
                     onClick={handleModuleSettingsClick}
-                    startIcon={<Cog6ToothIcon className="w-5 h-5 mr-2" />}
+                    startIcon={<Settings fontSize="small" className="w-5 h-5 mr-2" />}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
-                        drawerContent === DrawerContent.ModuleSettings ? "text-red-600" : "!text-slate-800"
+                        drawerContent === DrawerContent.ModuleSettings ? "text-cyan-600" : "!text-slate-800"
                     )}
+                    disabled={layoutEmpty}
                 >
                     {expanded ? "Module settings" : ""}
                 </Button>
                 <Button
                     title="Show sync settings"
                     onClick={handleSyncSettingsClick}
-                    startIcon={<LinkIcon className="w-5 h-5 mr-2" />}
+                    startIcon={<Link fontSize="small" className="w-5 h-5 mr-2" />}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
-                        drawerContent === DrawerContent.SyncSettings ? "text-red-600" : "!text-slate-800"
+                        drawerContent === DrawerContent.SyncSettings ? "text-cyan-600" : "!text-slate-800"
                     )}
+                    disabled={layoutEmpty}
                 >
                     {expanded ? "Sync settings" : ""}
                 </Button>
@@ -185,11 +209,11 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                 <Button
                     title="Show modules list"
                     onClick={handleModulesListClick}
-                    startIcon={<WindowIcon className="w-5 h-5 mr-2" />}
+                    startIcon={<WebAsset fontSize="small" className="w-5 h-5 mr-2" />}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
-                        drawerContent === DrawerContent.ModulesList ? "text-red-600" : "!text-slate-800"
+                        drawerContent === DrawerContent.ModulesList ? "text-cyan-600" : "!text-slate-800"
                     )}
                 >
                     {expanded ? "Add modules" : ""}
@@ -197,11 +221,11 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                 <Button
                     title="Show templates list"
                     onClick={handleTemplatesListClick}
-                    startIcon={<Squares2X2Icon className="w-5 h-5 mr-2" />}
+                    startIcon={<GridView fontSize="small" className="w-5 h-5 mr-2" />}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
-                        drawerContent === DrawerContent.TemplatesList ? "text-red-600" : "!text-slate-800"
+                        drawerContent === DrawerContent.TemplatesList ? "text-cyan-600" : "!text-slate-800"
                     )}
                 >
                     {expanded ? "Use templates" : ""}
@@ -210,11 +234,11 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                 <Button
                     title="Show color settings"
                     onClick={handleColorPaletteSettingsClick}
-                    startIcon={<SwatchIcon className="w-5 h-5 mr-2" />}
+                    startIcon={<Palette fontSize="small" className="w-5 h-5 mr-2" />}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
-                        drawerContent === DrawerContent.ColorPaletteSettings ? "text-red-600" : "!text-slate-800"
+                        drawerContent === DrawerContent.ColorPaletteSettings ? "text-cyan-600" : "!text-slate-800"
                     )}
                 >
                     {expanded ? "Color settings" : ""}
@@ -229,7 +253,7 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                     className={resolveClassNames("w-full !text-slate-500 hover:!text-slate-800 h-10", {
                         "mb-16": isDevMode(),
                     })}
-                    startIcon={<StarIcon className="w-5 h-5" />}
+                    startIcon={<GitHub fontSize="small" />}
                 >
                     {expanded ? "Webviz on GitHub" : ""}
                 </Button>
diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
index f3be24941..618bc9666 100644
--- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
+++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import { CaseInfo_api, EnsembleInfo_api } from "@api";
 import { apiService } from "@framework/ApiService";
-import { CheckIcon, PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
@@ -12,6 +11,7 @@ import { IconButton } from "@lib/components/IconButton";
 import { Label } from "@lib/components/Label";
 import { Select } from "@lib/components/Select";
 import { useValidState } from "@lib/hooks/useValidState";
+import { Add, Check, Remove } from "@mui/icons-material";
 import { useQuery } from "@tanstack/react-query";
 
 import { isEqual } from "lodash";
@@ -232,11 +232,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                 color={ensembleAlreadySelected ? "success" : "primary"}
                                 disabled={ensembleAlreadySelected || ensembleOpts.length === 0}
                                 startIcon={
-                                    ensembleAlreadySelected ? (
-                                        <CheckIcon className="w-5 h-5" />
-                                    ) : (
-                                        <PlusIcon className="w-5 h-5" />
-                                    )
+                                    ensembleAlreadySelected ? <Check fontSize="small" /> : <Add fontSize="small" />
                                 }
                             >
                                 {ensembleAlreadySelected ? "Ensemble already selected" : "Add Ensemble"}
@@ -282,7 +278,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                                     }
                                                     color="danger"
                                                 >
-                                                    <TrashIcon className="w-5 h-5" />
+                                                    <Remove fontSize="small" />
                                                 </IconButton>{" "}
                                             </td>
                                         </tr>
diff --git a/frontend/src/framework/internal/components/Settings/private-components/colorPaletteSettings.tsx b/frontend/src/framework/internal/components/Settings/private-components/colorPaletteSettings.tsx
index e21fd805d..eb9af71fa 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/colorPaletteSettings.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/colorPaletteSettings.tsx
@@ -5,7 +5,6 @@ import { useStoreValue } from "@framework/StateStore";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { ColorPaletteType, ColorScaleDiscreteSteps } from "@framework/WorkbenchSettings";
 import { Drawer } from "@framework/internal/components/Drawer";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { ColorGradient } from "@lib/components/ColorGradient";
 import { ColorTileGroup } from "@lib/components/ColorTileGroup";
 import { IconButton } from "@lib/components/IconButton";
@@ -16,6 +15,7 @@ import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { ColorPalette } from "@lib/utils/ColorPalette";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { convertRemToPixels } from "@lib/utils/screenUnitConversions";
+import { ExpandMore, Palette } from "@mui/icons-material";
 
 enum ColorPaletteSelectorType {
     Categorical = "categorical",
@@ -144,7 +144,7 @@ const ColorPaletteSelector: React.FC<ColorPaletteSelectorProps> = (props) => {
         <div className="bg-slate-100 rounded p-2 flex items-center gap-4" ref={ref}>
             <div className="flex-grow">{makeColorPalettePreview(selectedColorPalette, props.type, props.steps)}</div>
             <IconButton onClick={handleChevronClick}>
-                <ChevronDownIcon className="flex-grow-0 w-4 h-4" />
+                <ExpandMore fontSize="small" className="flex-grow-0" />
             </IconButton>
             {open &&
                 ReactDOM.createPortal(
@@ -201,7 +201,11 @@ export const ColorPaletteSettings: React.FC<ColorPaletteSettingsProps> = (props)
     }
 
     return (
-        <Drawer title="Color palette settings" visible={drawerContent === DrawerContent.ColorPaletteSettings}>
+        <Drawer
+            title="Color palette settings"
+            icon={<Palette />}
+            visible={drawerContent === DrawerContent.ColorPaletteSettings}
+        >
             <div className="flex flex-col gap-2">
                 <Label text="Categorical colors">
                     <ColorPaletteSelector
diff --git a/frontend/src/framework/internal/components/Settings/private-components/modulesList.tsx b/frontend/src/framework/internal/components/Settings/private-components/modulesList.tsx
index d4264526f..46bf1131e 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/modulesList.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/modulesList.tsx
@@ -6,7 +6,6 @@ import { useStoreValue } from "@framework/StateStore";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { LayoutEventTypes } from "@framework/internal/components/Content/private-components/layout";
 import { Drawer } from "@framework/internal/components/Drawer";
-import { WindowIcon } from "@heroicons/react/20/solid";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import {
     MANHATTAN_LENGTH,
@@ -17,11 +16,13 @@ import {
     pointRelativeToDomRect,
     pointerEventToPoint,
 } from "@lib/utils/geometry";
+import { Help, WebAsset } from "@mui/icons-material";
 
 type ModulesListItemProps = {
-    moduleName: string;
-    moduleDisplayName: string;
-    moduleDrawPreviewFunc: DrawPreviewFunc | null;
+    name: string;
+    displayName: string;
+    description: string | null;
+    drawPreviewFunc: DrawPreviewFunc | null;
     relContainer: HTMLDivElement | null;
 };
 
@@ -66,7 +67,7 @@ const ModulesListItem: React.FC<ModulesListItemProps> = (props) => {
                 document.dispatchEvent(
                     new CustomEvent(LayoutEventTypes.NEW_MODULE_POINTER_DOWN, {
                         detail: {
-                            name: props.moduleName,
+                            name: props.name,
                             elementPosition: pointDifference(point, pointRelativeToDomRect(point, rect)),
                             pointerPoint: point,
                         },
@@ -137,14 +138,19 @@ const ModulesListItem: React.FC<ModulesListItemProps> = (props) => {
                 style={makeStyle(isDragged, dragSize, dragPosition)}
             >
                 <div ref={ref} className="bg-slate-100 p-2 cursor-move flex items-center text-xs font-bold shadow">
-                    {props.moduleDisplayName}
+                    <span className="flex-grow">{props.displayName}</span>
+                    {props.description && (
+                        <span
+                            title={props.description ?? ""}
+                            className="cursor-help text-slate-500 hover:text-slate-900"
+                        >
+                            <Help fontSize="small" />
+                        </span>
+                    )}
                 </div>
                 <div className="p-4 flex flex-grow items-center justify-center ">
-                    {props.moduleDrawPreviewFunc
-                        ? props.moduleDrawPreviewFunc(
-                              Math.max(0, itemSize.width - 40),
-                              Math.max(0, itemSize.height - 60)
-                          )
+                    {props.drawPreviewFunc
+                        ? props.drawPreviewFunc(Math.max(0, itemSize.width - 40), Math.max(0, itemSize.height - 60))
                         : "No preview available"}
                 </div>
             </div>
@@ -171,25 +177,28 @@ export const ModulesList: React.FC<ModulesListProps> = (props) => {
     };
 
     return (
-        <Drawer
-            visible={drawerContent === DrawerContent.ModulesList}
-            title="Add modules"
-            icon={<WindowIcon />}
-            showFilter
-            filterPlaceholder="Filter modules..."
-            onFilterChange={handleSearchQueryChange}
-        >
-            {Object.values(ModuleRegistry.getRegisteredModules())
-                .filter((mod) => mod.getDefaultTitle().toLowerCase().includes(searchQuery.toLowerCase()))
-                .map((mod) => (
-                    <ModulesListItem
-                        relContainer={props.relContainer}
-                        key={mod.getName()}
-                        moduleName={mod.getName()}
-                        moduleDisplayName={mod.getDefaultTitle()}
-                        moduleDrawPreviewFunc={mod.getDrawPreviewFunc()}
-                    />
-                ))}
-        </Drawer>
+        <>
+            <Drawer
+                visible={drawerContent === DrawerContent.ModulesList}
+                title="Add modules"
+                icon={<WebAsset />}
+                showFilter
+                filterPlaceholder="Filter modules..."
+                onFilterChange={handleSearchQueryChange}
+            >
+                {Object.values(ModuleRegistry.getRegisteredModules())
+                    .filter((mod) => mod.getDefaultTitle().toLowerCase().includes(searchQuery.toLowerCase()))
+                    .map((mod) => (
+                        <ModulesListItem
+                            relContainer={props.relContainer}
+                            key={mod.getName()}
+                            name={mod.getName()}
+                            displayName={mod.getDefaultTitle()}
+                            description={mod.getDescription()}
+                            drawPreviewFunc={mod.getDrawPreviewFunc()}
+                        />
+                    ))}
+            </Drawer>
+        </>
     );
 };
diff --git a/frontend/src/framework/internal/components/Settings/private-components/setting.tsx b/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
index c589cb01b..eb8f4386f 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
@@ -5,9 +5,9 @@ import { ModuleInstance, ModuleInstanceState } from "@framework/ModuleInstance";
 import { Workbench } from "@framework/Workbench";
 import { ErrorBoundary } from "@framework/internal/components/ErrorBoundary";
 import { useImportState } from "@framework/internal/hooks/moduleHooks";
-import { Cog6ToothIcon } from "@heroicons/react/20/solid";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Settings as SettingsIcon } from "@mui/icons-material";
 
 import { DebugProfiler } from "../../DebugProfiler";
 
@@ -81,7 +81,7 @@ export const Setting: React.FC<SettingProps> = (props) => {
         >
             <ErrorBoundary moduleInstance={props.moduleInstance}>
                 <div className="flex justify-center items-center p-2 bg-slate-100 h-10">
-                    <Cog6ToothIcon className="w-4 h-4 mr-2" />{" "}
+                    <SettingsIcon fontSize="small" className="mr-2" />{" "}
                     <span
                         title={props.moduleInstance.getTitle()}
                         className="font-bold flex-grow p-0 text-ellipsis whitespace-nowrap overflow-hidden text-sm"
diff --git a/frontend/src/framework/internal/components/Settings/private-components/syncSettings.tsx b/frontend/src/framework/internal/components/Settings/private-components/syncSettings.tsx
index 908b875c6..a2afe107f 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/syncSettings.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/syncSettings.tsx
@@ -5,8 +5,8 @@ import { SyncSettingKey, SyncSettingsMeta } from "@framework/SyncSettings";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { Drawer } from "@framework/internal/components/Drawer";
 import { useActiveModuleId } from "@framework/internal/hooks/workbenchHooks";
-import { GlobeAltIcon, LinkIcon, MapPinIcon } from "@heroicons/react/20/solid";
 import { Checkbox } from "@lib/components/Checkbox";
+import { Link, PinDrop, Public } from "@mui/icons-material";
 
 type ModulesListProps = {
     workbench: Workbench;
@@ -84,11 +84,11 @@ export const SyncSettings: React.FC<ModulesListProps> = (props) => {
             <table className="w-full">
                 <thead>
                     <tr className="border-b">
-                        <th className="border-r p-2 w-6">
-                            <GlobeAltIcon className="w-4 h-4" title="Sync for all module instances" />
+                        <th className="border-r p-2 w-6" title="Sync for all module instances">
+                            <Public fontSize="small" />
                         </th>
-                        <th className="border-r p-2 w-6">
-                            <MapPinIcon className="w-4 h-4" title="Sync for active module instance" />
+                        <th className="border-r p-2 w-6" title="Sync for active module instance">
+                            <PinDrop fontSize="small" />
                         </th>
                         <th></th>
                     </tr>
@@ -120,7 +120,7 @@ export const SyncSettings: React.FC<ModulesListProps> = (props) => {
     }
 
     return (
-        <Drawer title="Sync settings" icon={<LinkIcon />} visible={drawerContent === DrawerContent.SyncSettings}>
+        <Drawer title="Sync settings" icon={<Link />} visible={drawerContent === DrawerContent.SyncSettings}>
             {makeContent()}
         </Drawer>
     );
diff --git a/frontend/src/framework/internal/components/Settings/private-components/templatesList.tsx b/frontend/src/framework/internal/components/Settings/private-components/templatesList.tsx
index ca1a27df2..8cf27295d 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/templatesList.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/templatesList.tsx
@@ -5,7 +5,7 @@ import { useStoreState } from "@framework/StateStore";
 import { Template, TemplateRegistry } from "@framework/TemplateRegistry";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { Drawer } from "@framework/internal/components/Drawer";
-import { Squares2X2Icon } from "@heroicons/react/20/solid";
+import { GridView } from "@mui/icons-material";
 
 function drawTemplatePreview(template: Template, width: number, height: number): React.ReactNode {
     return (
@@ -115,7 +115,7 @@ export const TemplatesList: React.FC<TemplatesListProps> = (props) => {
             onFilterChange={handleSearchQueryChange}
             filterPlaceholder="Filter templates..."
             title="Select a template"
-            icon={<Squares2X2Icon />}
+            icon={<GridView />}
             visible={drawerContent === DrawerContent.TemplatesList}
         >
             {Object.keys(TemplateRegistry.getRegisteredTemplates())
diff --git a/frontend/src/framework/internal/components/Settings/settings.tsx b/frontend/src/framework/internal/components/Settings/settings.tsx
index c9e2324fb..59e6b31f3 100644
--- a/frontend/src/framework/internal/components/Settings/settings.tsx
+++ b/frontend/src/framework/internal/components/Settings/settings.tsx
@@ -3,8 +3,8 @@ import React from "react";
 import { useStoreValue } from "@framework/StateStore";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { useActiveModuleId, useModuleInstances } from "@framework/internal/hooks/workbenchHooks";
-import { Cog6ToothIcon } from "@heroicons/react/20/solid";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Settings as SettingsIcon } from "@mui/icons-material";
 
 import { ColorPaletteSettings } from "./private-components/colorPaletteSettings";
 import { ModulesList } from "./private-components/modulesList";
@@ -51,7 +51,7 @@ export const Settings: React.FC<SettingsProps> = (props) => {
                 ))}
                 {moduleInstances.length === 0 && (
                     <div className="flex flex-col items-center justify-center h-full">
-                        <Cog6ToothIcon className="w-20 h-20 text-slate-200" />
+                        <SettingsIcon fontSize="large" className="text-slate-200" />
                     </div>
                 )}
             </div>
diff --git a/frontend/src/framework/internal/components/StartScreen/index.ts b/frontend/src/framework/internal/components/StartScreen/index.ts
new file mode 100644
index 000000000..2e17b79d3
--- /dev/null
+++ b/frontend/src/framework/internal/components/StartScreen/index.ts
@@ -0,0 +1 @@
+export { StartScreen } from "./startScreen";
diff --git a/frontend/src/framework/internal/components/StartScreen/startScreen.tsx b/frontend/src/framework/internal/components/StartScreen/startScreen.tsx
new file mode 100644
index 000000000..268b0f991
--- /dev/null
+++ b/frontend/src/framework/internal/components/StartScreen/startScreen.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+import WebvizLogo from "@assets/webviz.svg";
+import { AuthState, useAuthProvider } from "@framework/internal/providers/AuthProvider";
+import { Button } from "@lib/components/Button";
+import { CircularProgress } from "@lib/components/CircularProgress";
+
+export type StartScreenProps = {
+    children?: React.ReactNode;
+};
+
+export const StartScreen: React.FC<StartScreenProps> = (props) => {
+    const { authState } = useAuthProvider();
+
+    function signIn() {
+        window.location.href = `/api/login?redirect_url_after_login=${btoa("/")}`;
+    }
+
+    if (authState === AuthState.Loading) {
+        return (
+            <div className="w-screen h-screen flex flex-col items-center justify-center gap-8">
+                <CircularProgress />
+            </div>
+        );
+    }
+
+    if (authState === AuthState.NotLoggedIn) {
+        return (
+            <div className="w-screen h-screen flex flex-col items-center justify-center gap-8">
+                <img src={WebvizLogo} alt="Webviz logo" className="w-32 h-32" />
+                <p className="text-lg">Please sign in to continue.</p>
+                <Button onClick={signIn}>Sign in</Button>
+            </div>
+        );
+    }
+
+    return <>{props.children}</>;
+};
+
+StartScreen.displayName = "StartScreen";
diff --git a/frontend/src/framework/internal/providers/AuthProvider.tsx b/frontend/src/framework/internal/providers/AuthProvider.tsx
index 120dce7aa..454d0c622 100644
--- a/frontend/src/framework/internal/providers/AuthProvider.tsx
+++ b/frontend/src/framework/internal/providers/AuthProvider.tsx
@@ -43,7 +43,7 @@ export const AuthProvider: React.FC<{ children: React.ReactElement }> = (props)
         }
 
         apiService.default
-            .loggedInUser()
+            .loggedInUser(true)
             .then((user) => {
                 if (user) {
                     setAuthState(AuthState.LoggedIn);
diff --git a/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx b/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx
index bcb7aee29..af32352a2 100644
--- a/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx
+++ b/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 
@@ -40,7 +40,7 @@ export const CollapsibleGroup: React.FC<CollapsibleGroupProps> = (props) => {
                 >
                     {props.icon && React.cloneElement(props.icon, { className: "w-4 h-4" })}
                     <h3 className="text-sm font-semibold flex-grow leading-none">{props.title}</h3>
-                    {expanded ? <ChevronUpIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
+                    {expanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
                 </div>
                 <div
                     className={resolveClassNames("p-2", {
diff --git a/frontend/src/lib/components/Dialog/dialog.tsx b/frontend/src/lib/components/Dialog/dialog.tsx
index bb7fee514..8d3339ed5 100644
--- a/frontend/src/lib/components/Dialog/dialog.tsx
+++ b/frontend/src/lib/components/Dialog/dialog.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Close } from "@mui/icons-material";
 
 export type DialogProps = {
     title?: string;
@@ -78,7 +78,7 @@ export const Dialog: React.FC<DialogProps> = (props) => {
                             onPointerDown={handleClose}
                             title="Close dialog"
                         >
-                            <XMarkIcon width={24} />
+                            <Close width={24} />
                         </div>
                     )}
                 </div>
diff --git a/frontend/src/lib/components/Dropdown/dropdown.tsx b/frontend/src/lib/components/Dropdown/dropdown.tsx
index 870f38617..57826cc5f 100644
--- a/frontend/src/lib/components/Dropdown/dropdown.tsx
+++ b/frontend/src/lib/components/Dropdown/dropdown.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 import { IconButton } from "../IconButton";
@@ -273,7 +273,7 @@ export const Dropdown = withDefaults<DropdownProps>()(defaultProps, (props) => {
                     onClick={() => handleInputClick()}
                     endAdornment={
                         <IconButton size="small" onClick={() => setDropdownVisible((prev) => !prev)}>
-                            {dropdownVisible ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                            {dropdownVisible ? <ExpandLess /> : <ExpandMore />}
                         </IconButton>
                     }
                     onChange={handleInputChange}
diff --git a/frontend/src/lib/components/Label/label.tsx b/frontend/src/lib/components/Label/label.tsx
index ac83f2259..9f1bf49c5 100644
--- a/frontend/src/lib/components/Label/label.tsx
+++ b/frontend/src/lib/components/Label/label.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { LinkIcon } from "@heroicons/react/20/solid";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Link } from "@mui/icons-material";
 
 import { v4 } from "uuid";
 
@@ -41,7 +41,7 @@ export const Label: React.FC<LabelProps> = (props) => {
                         className="bg-indigo-700 w-5 h-5 flex justify-center items-center rounded mr-2"
                         title={`"${props.text}" is synced on the current page`}
                     >
-                        <LinkIcon className="w-4 h-4 text-white" />
+                        <Link fontSize="small" className="text-white" />
                     </span>
                 )}
                 {props.text}
diff --git a/frontend/src/lib/components/ListBox/list-box.tsx b/frontend/src/lib/components/ListBox/list-box.tsx
index 9eb520cb5..437299a80 100644
--- a/frontend/src/lib/components/ListBox/list-box.tsx
+++ b/frontend/src/lib/components/ListBox/list-box.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { Check, UnfoldMore } from "@mui/icons-material";
 
 export type ListBoxItem = {
     value: string | number;
@@ -24,7 +24,7 @@ export const ListBoxDeprecated: React.FC<ListBoxProps> = (props) => {
                     <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
                         <span className="block truncate">{selectedItemLabel}</span>
                         <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                            <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                            <UnfoldMore fontSize="small" className="text-gray-400" aria-hidden="true" />
                         </span>
                     </Listbox.Button>
                     <Transition
@@ -54,7 +54,7 @@ export const ListBoxDeprecated: React.FC<ListBoxProps> = (props) => {
                                             </span>
                                             {selected ? (
                                                 <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
-                                                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                                    <Check fontSize="small" aria-hidden="true" />
                                                 </span>
                                             ) : null}
                                         </>
diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
index f9734183c..f58253968 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
@@ -1,14 +1,7 @@
 import React from "react";
 
-import {
-    ChevronDownIcon,
-    ChevronUpIcon,
-    ExclamationCircleIcon,
-    ExclamationTriangleIcon,
-    QuestionMarkCircleIcon,
-    XMarkIcon,
-} from "@heroicons/react/20/solid";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Close, Error, ExpandLess, ExpandMore, Help, Warning } from "@mui/icons-material";
 
 import "animate.css";
 
@@ -174,7 +167,7 @@ export class Tag extends React.Component<TagProps> {
                             e.stopPropagation();
                         }}
                     >
-                        <ChevronUpIcon className="w-4 h-4 text-white" />
+                        <ExpandLess fontSize="small" className="text-white" />
                     </button>
                     <button
                         key={"TagNextButton_" + index}
@@ -194,7 +187,7 @@ export class Tag extends React.Component<TagProps> {
                             e.stopPropagation();
                         }}
                     >
-                        <ChevronDownIcon className="w-4 h-4 text-white" />
+                        <ExpandMore fontSize="small" className="text-white" />
                     </button>
                 </div>
             );
@@ -386,7 +379,7 @@ export class Tag extends React.Component<TagProps> {
                         title="Remove"
                         onClick={(e): void => removeTag(e, index)}
                     >
-                        <XMarkIcon className="w-3 h-3 text-white" />
+                        <Close fontSize="small" className="text-white" />
                     </button>
                 )}
                 {this.createBrowseButtons(treeNodeSelection, index)}
@@ -406,15 +399,15 @@ export class Tag extends React.Component<TagProps> {
                     }
                 >
                     {this.addAdditionalClasses(!valid) && !valid && !currentTag && (
-                        <ExclamationCircleIcon className="w-4 h-4 mr-2" />
+                        <Error fontSize="small" className="mr-2" />
                     )}
                     {this.addAdditionalClasses(!valid) && valid && duplicate && (
-                        <ExclamationTriangleIcon className="w-4 h-4 mr-2" />
+                        <Warning fontSize="small" className="mr-2" />
                     )}
                     {this.addAdditionalClasses(!valid) &&
                         (valid || currentTag) &&
                         !duplicate &&
-                        treeNodeSelection.icons().length > 1 && <QuestionMarkCircleIcon className="w-4 h-4 mr-2" />}
+                        treeNodeSelection.icons().length > 1 && <Help fontSize="small" className="mr-2" />}
                     {this.createMatchesCounter(treeNodeSelection, index)}
                     <div className="flex whitespace-nowrap relative">
                         <input
diff --git a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
index ea60350ad..53bd89cba 100644
--- a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { XMarkIcon } from "@heroicons/react/20/solid";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Close } from "@mui/icons-material";
 
 import _ from "lodash";
 
@@ -1680,7 +1680,7 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
                             onClick={this.clearAllTags}
                             disabled={this.countTags() <= 1 && this.hasLastEmptyTag()}
                         >
-                            <XMarkIcon className="w-4 h-4" />
+                            <Close fontSize="small" />
                         </button>
                     </div>
                     {showSuggestions && (
diff --git a/frontend/src/lib/components/Table/table.tsx b/frontend/src/lib/components/Table/table.tsx
index 3bbac9515..b74d83f0d 100644
--- a/frontend/src/lib/components/Table/table.tsx
+++ b/frontend/src/lib/components/Table/table.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { Close, ExpandLess, ExpandMore } from "@mui/icons-material";
 
 import { v4 } from "uuid";
 
@@ -182,7 +182,7 @@ export const Table: React.FC<TableProps<TableHeading>> = (props) => {
                                                         : undefined
                                                 }
                                             >
-                                                <ChevronUpIcon />
+                                                <ExpandLess />
                                             </IconButton>
                                             <IconButton
                                                 size="small"
@@ -194,7 +194,7 @@ export const Table: React.FC<TableProps<TableHeading>> = (props) => {
                                                         : undefined
                                                 }
                                             >
-                                                <ChevronDownIcon />
+                                                <ExpandMore />
                                             </IconButton>
                                         </div>
                                     </div>
@@ -206,7 +206,7 @@ export const Table: React.FC<TableProps<TableHeading>> = (props) => {
                                             onChange={(e) => handleFilterChange(col, e.target.value)}
                                             endAdornment={
                                                 <IconButton size="small" onClick={() => handleFilterChange(col, "")}>
-                                                    <XMarkIcon />
+                                                    <Close />
                                                 </IconButton>
                                             }
                                         />
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bd15e2748..86e1f2ce4 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
+import { StartScreen } from "@framework/internal/components/StartScreen";
 import { AuthProvider } from "@framework/internal/providers/AuthProvider";
 import { CustomQueryClientProvider } from "@framework/internal/providers/QueryClientProvider";
 
@@ -32,9 +33,11 @@ root.render(
     <React.StrictMode>
         <GlobalErrorBoundary>
             <AuthProvider>
-                <CustomQueryClientProvider>
-                    <App />
-                </CustomQueryClientProvider>
+                <StartScreen>
+                    <CustomQueryClientProvider>
+                        <App />
+                    </CustomQueryClientProvider>
+                </StartScreen>
             </AuthProvider>
         </GlobalErrorBoundary>
     </React.StrictMode>
diff --git a/frontend/src/modules/MyModule/registerModule.ts b/frontend/src/modules/MyModule/registerModule.ts
index 4f34a3185..a55be4116 100644
--- a/frontend/src/modules/MyModule/registerModule.ts
+++ b/frontend/src/modules/MyModule/registerModule.ts
@@ -2,4 +2,8 @@ import { ModuleRegistry } from "@framework/ModuleRegistry";
 
 import { State } from "./state";
 
-ModuleRegistry.registerModule<State>({ moduleName: "MyModule", defaultTitle: "My Module" });
+ModuleRegistry.registerModule<State>({
+    moduleName: "MyModule",
+    defaultTitle: "My Module",
+    description: "My module description",
+});
diff --git a/frontend/src/modules/Sensitivity/view.tsx b/frontend/src/modules/Sensitivity/view.tsx
index 1dd06118c..2989e09b6 100644
--- a/frontend/src/modules/Sensitivity/view.tsx
+++ b/frontend/src/modules/Sensitivity/view.tsx
@@ -4,8 +4,8 @@ import { BroadcastChannelData, BroadcastChannelMeta } from "@framework/Broadcast
 import { Ensemble } from "@framework/Ensemble";
 import { ModuleFCProps } from "@framework/Module";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
-import { AdjustmentsHorizontalIcon, ChartBarIcon, TableCellsIcon } from "@heroicons/react/20/solid";
 import { useElementSize } from "@lib/hooks/useElementSize";
+import { BarChart, TableChart, Tune } from "@mui/icons-material";
 
 import SensitivityChart from "./sensitivityChart";
 import { EnsembleScalarResponse, SensitivityResponseCalculator } from "./sensitivityResponseCalculator";
@@ -114,18 +114,23 @@ export const view = ({ moduleContext, workbenchSession, workbenchServices }: Mod
             <div>
                 <div>
                     <div className="flex justify-end space-x-2">
-                        <button onClick={togglePlotType} className="p-2 bg-indigo-600 text-white rounded-md">
+                        <button
+                            onClick={togglePlotType}
+                            className="p-2 bg-indigo-600 text-white rounded-md"
+                            title={plotType == PlotType.TORNADO ? "Show table" : "Show tornado"}
+                        >
                             {plotType == PlotType.TORNADO ? (
-                                <TableCellsIcon title="Show table" className="h-5 w-5" />
+                                <TableChart fontSize="small" />
                             ) : (
-                                <ChartBarIcon title="Show tornado" className="h-5 w-5" />
+                                <BarChart fontSize="small" />
                             )}
                         </button>
                         <button
                             className="p-2 bg-indigo-600 text-white rounded-md"
                             onClick={() => setSettingsIsOpen(!settingsIsOpen)}
+                            title="Show no impact sensitivities"
                         >
-                            <AdjustmentsHorizontalIcon title="Show no impact sensitivities" className="h-5 w-5" />
+                            <Tune fontSize="small" />
                         </button>
                     </div>
 
diff --git a/frontend/src/modules/SimulationTimeSeries/registerModule.ts b/frontend/src/modules/SimulationTimeSeries/registerModule.ts
index 780d98c67..729c04808 100644
--- a/frontend/src/modules/SimulationTimeSeries/registerModule.ts
+++ b/frontend/src/modules/SimulationTimeSeries/registerModule.ts
@@ -10,5 +10,6 @@ ModuleRegistry.registerModule<State>({
     defaultTitle: "Simulation time series",
     syncableSettingKeys: [SyncSettingKey.ENSEMBLE, SyncSettingKey.TIME_SERIES],
     broadcastChannelsDef,
-    preview
+    preview,
+    description: "Time series of simulation results",
 });
diff --git a/frontend/src/modules/WellCompletion/loadModule.tsx b/frontend/src/modules/WellCompletions/loadModule.tsx
similarity index 81%
rename from frontend/src/modules/WellCompletion/loadModule.tsx
rename to frontend/src/modules/WellCompletions/loadModule.tsx
index 715bc51e8..ce61ed7ad 100644
--- a/frontend/src/modules/WellCompletion/loadModule.tsx
+++ b/frontend/src/modules/WellCompletions/loadModule.tsx
@@ -10,7 +10,7 @@ const initialState: State = {
     plotData: null,
 };
 
-const module = ModuleRegistry.initModule<State>("WellCompletion", initialState);
+const module = ModuleRegistry.initModule<State>("WellCompletions", initialState);
 
 module.viewFC = view;
 module.settingsFC = settings;
diff --git a/frontend/src/modules/WellCompletion/queryHooks.tsx b/frontend/src/modules/WellCompletions/queryHooks.tsx
similarity index 58%
rename from frontend/src/modules/WellCompletion/queryHooks.tsx
rename to frontend/src/modules/WellCompletions/queryHooks.tsx
index dbb4915a7..77e3689d0 100644
--- a/frontend/src/modules/WellCompletion/queryHooks.tsx
+++ b/frontend/src/modules/WellCompletions/queryHooks.tsx
@@ -1,19 +1,19 @@
-import { WellCompletionData_api } from "@api";
+import { WellCompletionsData_api } from "@api";
 import { apiService } from "@framework/ApiService";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 const STALE_TIME = 60 * 1000;
 const CACHE_TIME = 60 * 1000;
 
-export function useWellCompletionQuery(
+export function useWellCompletionsQuery(
     caseUuid: string | undefined,
     ensembleName: string | undefined,
     realizationNumber: number | undefined
-): UseQueryResult<WellCompletionData_api> {
+): UseQueryResult<WellCompletionsData_api> {
     return useQuery({
-        queryKey: ["getWellCompletion", caseUuid, ensembleName, realizationNumber],
+        queryKey: ["getWellCompletions", caseUuid, ensembleName, realizationNumber],
         queryFn: () =>
-            apiService.wellCompletion.getWellCompletionData(caseUuid ?? "", ensembleName ?? "", realizationNumber),
+            apiService.wellCompletions.getWellCompletionsData(caseUuid ?? "", ensembleName ?? "", realizationNumber),
         staleTime: STALE_TIME,
         cacheTime: CACHE_TIME,
         enabled: caseUuid && ensembleName ? true : false,
diff --git a/frontend/src/modules/WellCompletion/registerModule.ts b/frontend/src/modules/WellCompletions/registerModule.ts
similarity index 78%
rename from frontend/src/modules/WellCompletion/registerModule.ts
rename to frontend/src/modules/WellCompletions/registerModule.ts
index c0c559d90..ed66141d7 100644
--- a/frontend/src/modules/WellCompletion/registerModule.ts
+++ b/frontend/src/modules/WellCompletions/registerModule.ts
@@ -2,4 +2,4 @@ import { ModuleRegistry } from "@framework/ModuleRegistry";
 
 import { State } from "./state";
 
-ModuleRegistry.registerModule<State>({ moduleName: "WellCompletion", defaultTitle: "Well Completion" });
+ModuleRegistry.registerModule<State>({ moduleName: "WellCompletions", defaultTitle: "Well Completions" });
diff --git a/frontend/src/modules/WellCompletion/settings.tsx b/frontend/src/modules/WellCompletions/settings.tsx
similarity index 95%
rename from frontend/src/modules/WellCompletion/settings.tsx
rename to frontend/src/modules/WellCompletions/settings.tsx
index e4839f37c..c57ca179c 100644
--- a/frontend/src/modules/WellCompletion/settings.tsx
+++ b/frontend/src/modules/WellCompletions/settings.tsx
@@ -18,7 +18,7 @@ import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import { isEqual } from "lodash";
 
-import { useWellCompletionQuery } from "./queryHooks";
+import { useWellCompletionsQuery } from "./queryHooks";
 import { DataLoadingStatus, State } from "./state";
 import { TimeAggregationType, WellCompletionsDataAccessor } from "./utils/wellCompletionsDataAccessor";
 
@@ -62,7 +62,7 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
         setSelectedEnsembleIdent(computedEnsembleIdent, acceptInvalidState);
     }
 
-    const wellCompletionQuery = useWellCompletionQuery(
+    const wellCompletionsQuery = useWellCompletionsQuery(
         selectedEnsembleIdent?.getCaseUuid(),
         selectedEnsembleIdent?.getEnsembleName(),
         realizationSelection === RealizationSelection.Single ? selectedRealizationNumber : undefined
@@ -73,14 +73,14 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
 
     React.useEffect(
         function handleNewQueryData() {
-            if (!wellCompletionQuery.data) {
+            if (!wellCompletionsQuery.data) {
                 wellCompletionsDataAccessor.current.clearWellCompletionsData();
                 setAvailableTimeSteps(null);
                 setPlotData(null);
                 return;
             }
 
-            wellCompletionsDataAccessor.current.parseWellCompletionsData(wellCompletionQuery.data);
+            wellCompletionsDataAccessor.current.parseWellCompletionsData(wellCompletionsQuery.data);
 
             // Update available time steps
             const allTimeSteps = wellCompletionsDataAccessor.current.getTimeSteps();
@@ -116,20 +116,20 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
             }
             createAndSetPlotData(allTimeSteps, timeStepIndex, selectedTimeStepOptions.timeAggregationType);
         },
-        [wellCompletionQuery.data, selectedTimeStepOptions]
+        [wellCompletionsQuery.data, selectedTimeStepOptions]
     );
 
     React.useEffect(
         function handleQueryStateChange() {
-            if (wellCompletionQuery.status === "loading" && wellCompletionQuery.fetchStatus === "fetching") {
+            if (wellCompletionsQuery.status === "loading" && wellCompletionsQuery.fetchStatus === "fetching") {
                 setDataLoadingStatus(DataLoadingStatus.Loading);
-            } else if (wellCompletionQuery.status === "error") {
+            } else if (wellCompletionsQuery.status === "error") {
                 setDataLoadingStatus(DataLoadingStatus.Error);
-            } else if (wellCompletionQuery.status === "success") {
+            } else if (wellCompletionsQuery.status === "success") {
                 setDataLoadingStatus(DataLoadingStatus.Idle);
             }
         },
-        [wellCompletionQuery.status, wellCompletionQuery.fetchStatus]
+        [wellCompletionsQuery.status, wellCompletionsQuery.fetchStatus]
     );
 
     function createAndSetPlotData(
@@ -279,14 +279,14 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
                     />
                     {
                         <div className="text-red-500 text-sm h-4">
-                            {wellCompletionQuery.isError
+                            {wellCompletionsQuery.isError
                                 ? "Current ensemble does not contain well completions data"
                                 : ""}
                         </div>
                     }
                 </>
             </Label>
-            <div className={resolveClassNames({ "pointer-events-none opacity-40": wellCompletionQuery.isError })}>
+            <div className={resolveClassNames({ "pointer-events-none opacity-40": wellCompletionsQuery.isError })}>
                 <Label text="Realization selection">
                     <RadioGroup
                         options={[
diff --git a/frontend/src/modules/WellCompletion/state.ts b/frontend/src/modules/WellCompletions/state.ts
similarity index 100%
rename from frontend/src/modules/WellCompletion/state.ts
rename to frontend/src/modules/WellCompletions/state.ts
diff --git a/frontend/src/modules/WellCompletion/utils/stringUtils.ts b/frontend/src/modules/WellCompletions/utils/stringUtils.ts
similarity index 92%
rename from frontend/src/modules/WellCompletion/utils/stringUtils.ts
rename to frontend/src/modules/WellCompletions/utils/stringUtils.ts
index 6dbabf849..0635d9837 100644
--- a/frontend/src/modules/WellCompletion/utils/stringUtils.ts
+++ b/frontend/src/modules/WellCompletions/utils/stringUtils.ts
@@ -1,5 +1,5 @@
 /**
- * NOTE: This file is a copy from the WellCompletion-component in webviz-subsurface-components/packages/dash-components
+ * NOTE: This file is a copy from the WellCompletions-component in webviz-subsurface-components/packages/dash-components
  */
 
 /**
diff --git a/frontend/src/modules/WellCompletion/utils/wellCompletionsDataAccessor.ts b/frontend/src/modules/WellCompletions/utils/wellCompletionsDataAccessor.ts
similarity index 86%
rename from frontend/src/modules/WellCompletion/utils/wellCompletionsDataAccessor.ts
rename to frontend/src/modules/WellCompletions/utils/wellCompletionsDataAccessor.ts
index 42a57852e..a1c6154c1 100644
--- a/frontend/src/modules/WellCompletion/utils/wellCompletionsDataAccessor.ts
+++ b/frontend/src/modules/WellCompletions/utils/wellCompletionsDataAccessor.ts
@@ -1,9 +1,8 @@
 import {
-    WellCompletionDataSet_api,
-    WellCompletionData_api,
-    WellCompletionUnits_api,
-    WellCompletionWell_api,
-    WellCompletionZone_api,
+    WellCompletionsData_api,
+    WellCompletionsUnits_api,
+    WellCompletionsWell_api,
+    WellCompletionsZone_api,
 } from "@api";
 import { CompletionPlotData, PlotData, WellPlotData, Zone } from "@webviz/well-completions-plot";
 
@@ -34,14 +33,14 @@ export class WellCompletionsDataAccessor {
      * The data is parsed from the WellCompletionData_api object and methods are taken from the
      * WellCompletions-component of webviz-subsurface-components package, and modified to fit.
      */
-    private _dataSet: WellCompletionDataSet_api | null;
+    private _data: WellCompletionsData_api | null;
     private _subzones: Zone[];
-    private _wells: WellCompletionWell_api[];
+    private _wells: WellCompletionsWell_api[];
     private _searchWellText: string;
     private _hideZeroCompletions: boolean;
 
     constructor() {
-        this._dataSet = null;
+        this._data = null;
         this._subzones = [];
         this._wells = [];
         this._searchWellText = "";
@@ -51,22 +50,22 @@ export class WellCompletionsDataAccessor {
     clearWellCompletionsData(): void {
         // Do not clear search text and hide zero completions
 
-        this._dataSet = null;
+        this._data = null;
         this._subzones = [];
         this._wells = [];
     }
 
-    parseWellCompletionsData(data: WellCompletionData_api): void {
+    parseWellCompletionsData(data: WellCompletionsData_api): void {
         // TODO:
         // - Filter wells when filter functionality is in place
         // - Filter subzones when filter functionality is in place
 
-        this._dataSet = data.json_data;
-        this._wells = this._dataSet.wells;
+        this._data = data;
+        this._wells = this._data.wells;
 
         // Exctract all subzones
         this._subzones = [];
-        this._dataSet.stratigraphy.forEach((zone) => WellCompletionsDataAccessor.findSubzones(zone, this._subzones));
+        this._data.stratigraphy.forEach((zone) => WellCompletionsDataAccessor.findSubzones(zone, this._subzones));
     }
 
     setSearchWellText(searchWell: string): void {
@@ -78,8 +77,8 @@ export class WellCompletionsDataAccessor {
     }
 
     getTimeSteps(): string[] {
-        if (!this._dataSet) return [];
-        return this._dataSet.timeSteps;
+        if (!this._data) return [];
+        return this._data.timeSteps;
     }
 
     createPlotData(
@@ -88,16 +87,16 @@ export class WellCompletionsDataAccessor {
     ): PlotData | null {
         // TODO: Consider removing function arguments, and use setter-methods for each argument and set to an attribute.
         //       This would make it easier to modify/adjust single attributes and call "createPlotData" again.
-        if (!this._dataSet) return null;
+        if (!this._data) return null;
 
         let timeStepIndexRange: [number, number] | null = null;
         if (typeof timeStepSelection === "string") {
-            const timeStepIndex = this._dataSet.timeSteps.indexOf(timeStepSelection);
+            const timeStepIndex = this._data.timeSteps.indexOf(timeStepSelection);
             timeStepIndexRange = [timeStepIndex, timeStepIndex];
         } else {
             timeStepIndexRange = [
-                this._dataSet.timeSteps.indexOf(timeStepSelection[0]),
-                this._dataSet.timeSteps.indexOf(timeStepSelection[1]),
+                this._data.timeSteps.indexOf(timeStepSelection[0]),
+                this._data.timeSteps.indexOf(timeStepSelection[1]),
             ];
         }
         if (timeStepIndexRange[0] === -1 || timeStepIndexRange[1] === -1) return null;
@@ -106,7 +105,7 @@ export class WellCompletionsDataAccessor {
         // TODO: Add filtering of attributes as well
         const wellNameRegex = getRegexPredicate(this._searchWellText);
         const filteredWells = this._searchWellText
-            ? Array.from(this._wells as WellCompletionWell_api[]).filter((well) => wellNameRegex(well.name))
+            ? Array.from(this._wells as WellCompletionsWell_api[]).filter((well) => wellNameRegex(well.name))
             : this._wells;
 
         return WellCompletionsDataAccessor.computePlotData(
@@ -115,11 +114,11 @@ export class WellCompletionsDataAccessor {
             timeStepIndexRange,
             timeAggregation,
             this._hideZeroCompletions,
-            this._dataSet?.units
+            this._data?.units
         );
     }
 
-    private static findEarliestCompletionDateIndices(well: WellCompletionWell_api, subzones: Zone[]): number {
+    private static findEarliestCompletionDateIndices(well: WellCompletionsWell_api, subzones: Zone[]): number {
         let earliestCompDateIndex = Number.POSITIVE_INFINITY;
         subzones.forEach((zone) => {
             if (zone.name in well.completions) {
@@ -135,11 +134,11 @@ export class WellCompletionsDataAccessor {
 
     private static computePlotData(
         subzones: Zone[],
-        wells: WellCompletionWell_api[],
+        wells: WellCompletionsWell_api[],
         range: [number, number],
         timeAggregation: TimeAggregationType,
         hideZeroCompletions: boolean,
-        units: WellCompletionUnits_api
+        units: WellCompletionsUnits_api
     ): PlotData {
         const wellPlotData: WellPlotData[] = [];
         wells.forEach((well) => {
@@ -222,7 +221,7 @@ export class WellCompletionsDataAccessor {
         );
     }
 
-    private static findSubzones(apiZone: WellCompletionZone_api, result: Zone[]): void {
+    private static findSubzones(apiZone: WellCompletionsZone_api, result: Zone[]): void {
         // Depth-first search to find all leaf nodes
         if (!apiZone.subzones || apiZone.subzones.length === 0) {
             result.push({ name: apiZone.name, color: apiZone.color });
diff --git a/frontend/src/modules/WellCompletion/view.tsx b/frontend/src/modules/WellCompletions/view.tsx
similarity index 93%
rename from frontend/src/modules/WellCompletion/view.tsx
rename to frontend/src/modules/WellCompletions/view.tsx
index a2e604d2b..e727a3209 100644
--- a/frontend/src/modules/WellCompletion/view.tsx
+++ b/frontend/src/modules/WellCompletions/view.tsx
@@ -14,7 +14,7 @@ export const view = ({ moduleContext }: ModuleFCProps<State>) => {
             {!plotData ? (
                 dataLoadingStatus === DataLoadingStatus.Error ? (
                     <div className="w-full h-full flex justify-center items-center text-red-500">
-                        Error loading well completion data for selected Ensemble and realization
+                        Error loading well completions data for selected Ensemble and realization
                     </div>
                 ) : dataLoadingStatus === DataLoadingStatus.Loading ? (
                     <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
diff --git a/frontend/src/modules/registerAllModules.ts b/frontend/src/modules/registerAllModules.ts
index 407540a7f..6caa0df27 100644
--- a/frontend/src/modules/registerAllModules.ts
+++ b/frontend/src/modules/registerAllModules.ts
@@ -14,7 +14,7 @@ import "./SimulationTimeSeriesMatrix/registerModule";
 import "./SimulationTimeSeriesSensitivity/registerModule";
 import "./TimeSeriesParameterDistribution/registerModule";
 import "./TopographicMap/registerModule";
-import "./WellCompletion/registerModule";
+import "./WellCompletions/registerModule";
 
 if (isDevMode()) {
     await import("./MyModule/registerModule");