From 0df603e2118a2502176324da2902a23b6cbc6b57 Mon Sep 17 00:00:00 2001
From: Andrea Cordoba <dandrea.cordoba@gmail.com>
Date: Mon, 2 Sep 2024 16:47:50 +0200
Subject: [PATCH] feat: add/update launcher with custom environment

---
 client/.eslintrc.json                         |   1 +
 client/src/components/MoreInfo.tsx            |  52 ++
 .../sessionsV2/AddSessionLauncherButton.tsx   |   5 +-
 .../sessionsV2/SessionLauncherFormContent.tsx | 644 ------------------
 .../SessionView/EnvironmentCard.tsx           | 263 +++++++
 .../sessionsV2/SessionView/SessionView.tsx    | 105 +--
 client/src/features/sessionsV2/SessionsV2.tsx |   2 +-
 .../sessionsV2/UpdateSessionLauncherModal.tsx | 192 ------
 .../SessionForm/AdvanceSettingsFields.tsx     | 252 +++++++
 .../SessionForm/CustomEnvironmentFields.tsx   |  82 +++
 .../SessionForm/EditLauncherFormContent.tsx   | 254 +++++++
 .../SessionForm/EnvironmentField.tsx          |  77 +++
 .../SessionForm/EnvironmentKindField.tsx      |  67 ++
 .../SessionForm/GlobalEnvironmentFields.tsx   | 101 +++
 .../SessionForm/LauncherDetailsFields.tsx     | 125 ++++
 .../SessionForm/SessionEnvironmentItem.tsx    | 134 ++++
 .../SessionLauncherBreadcrumbNavbar.tsx       |  69 ++
 .../components/SessionModals/AddSession.tsx   | 364 ----------
 .../SessionModals/NewSessionLauncherModal.tsx | 256 +++++++
 .../UpdateSessionLauncherModal.tsx            | 174 +++++
 .../src/features/sessionsV2/session.utils.ts  | 133 +++-
 .../features/sessionsV2/sessionsV2.types.ts   |  69 +-
 .../sessionsV2/useSessionLaunchState.hook.ts  |  34 +-
 tests/cypress/e2e/projectV2setup.spec.ts      |  21 +
 .../fixtures/projectV2/session-launchers.json |   8 +-
 25 files changed, 2128 insertions(+), 1356 deletions(-)
 create mode 100644 client/src/components/MoreInfo.tsx
 delete mode 100644 client/src/features/sessionsV2/SessionLauncherFormContent.tsx
 create mode 100644 client/src/features/sessionsV2/SessionView/EnvironmentCard.tsx
 delete mode 100644 client/src/features/sessionsV2/UpdateSessionLauncherModal.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/AdvanceSettingsFields.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/GlobalEnvironmentFields.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/LauncherDetailsFields.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/SessionEnvironmentItem.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx
 delete mode 100644 client/src/features/sessionsV2/components/SessionModals/AddSession.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx
 create mode 100644 client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index f3a3d759ae..2e39b3a202 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -168,6 +168,7 @@
           "jupyter",
           "katex",
           "kernelspec",
+          "kubernetes",
           "Keycloak",
           "Lausanne",
           "linkify",
diff --git a/client/src/components/MoreInfo.tsx b/client/src/components/MoreInfo.tsx
new file mode 100644
index 0000000000..4ac2738ef2
--- /dev/null
+++ b/client/src/components/MoreInfo.tsx
@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { ReactNode, useRef } from "react";
+import { InfoCircleFill } from "react-bootstrap-icons";
+import { PopoverBody, UncontrolledPopover } from "reactstrap";
+import LazyRenkuMarkdown from "./markdown/LazyRenkuMarkdown";
+
+export function MoreInfo({
+  help,
+  trigger = "hover focus",
+  children,
+}: {
+  help: string;
+  trigger?: string;
+  children?: ReactNode;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      <span ref={ref}>
+        <InfoCircleFill
+          className={cx("bi", "ms-1", "cursor-pointer", "text-light-emphasis")}
+          tabIndex={0}
+        />
+      </span>
+      <UncontrolledPopover target={ref} placement="right" trigger={trigger}>
+        <PopoverBody>
+          <LazyRenkuMarkdown markdownText={help} />
+          {children}
+        </PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}
diff --git a/client/src/features/sessionsV2/AddSessionLauncherButton.tsx b/client/src/features/sessionsV2/AddSessionLauncherButton.tsx
index f63a5e6464..1bdbc23ab2 100644
--- a/client/src/features/sessionsV2/AddSessionLauncherButton.tsx
+++ b/client/src/features/sessionsV2/AddSessionLauncherButton.tsx
@@ -20,8 +20,7 @@ import cx from "classnames";
 import { useCallback, useState } from "react";
 import { PlusLg } from "react-bootstrap-icons";
 import { Button } from "reactstrap";
-
-import { Step1AddSessionModal } from "./components/SessionModals/AddSession.tsx";
+import NewSessionLauncherModal from "./components/SessionModals/NewSessionLauncherModal.tsx";
 
 export default function AddSessionLauncherButton({
   "data-cy": dataCy,
@@ -52,7 +51,7 @@ export default function AddSessionLauncherButton({
           <PlusLg className="icon-text" />
         </Button>
       )}
-      <Step1AddSessionModal isOpen={isOpen} toggleModal={toggle} />
+      <NewSessionLauncherModal isOpen={isOpen} toggle={toggle} />
     </>
   );
 }
diff --git a/client/src/features/sessionsV2/SessionLauncherFormContent.tsx b/client/src/features/sessionsV2/SessionLauncherFormContent.tsx
deleted file mode 100644
index 26f3ad345b..0000000000
--- a/client/src/features/sessionsV2/SessionLauncherFormContent.tsx
+++ /dev/null
@@ -1,644 +0,0 @@
-/*!
- * Copyright 2024 - Swiss Data Science Center (SDSC)
- * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
- * Eidgenössische Technische Hochschule Zürich (ETHZ).
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import cx from "classnames";
-import { useEffect, useMemo, useState } from "react";
-import { SingleValue } from "react-select";
-import {
-  Control,
-  Controller,
-  ControllerRenderProps,
-  FieldErrors,
-  FieldNamesMarkedBoolean,
-  UseFormResetField,
-  UseFormSetValue,
-  UseFormWatch,
-} from "react-hook-form";
-import {
-  Card,
-  CardBody,
-  Input,
-  Label,
-  ListGroup,
-  ListGroupItem,
-  Row,
-} from "reactstrap";
-import { Globe2 } from "react-bootstrap-icons";
-
-import { Loader } from "../../components/Loader";
-import { TimeCaption } from "../../components/TimeCaption";
-import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
-import { useGetSessionEnvironmentsQuery } from "./sessionsV2.api";
-import { EnvironmentKind, SessionEnvironment } from "./sessionsV2.types";
-import { WarnAlert } from "../../components/Alert.jsx";
-import { useGetResourcePoolsQuery } from "../dataServices/computeResources.api";
-import {
-  ResourceClass,
-  ResourcePool,
-} from "../dataServices/dataServices.types";
-import { SessionClassSelectorV2 } from "../session/components/options/SessionClassOption";
-
-export interface SessionLauncherForm {
-  name: string;
-  description: string;
-  environment_kind: EnvironmentKind;
-  environment_id: string;
-  container_image: string;
-  default_url: string;
-  resourceClass: ResourceClass;
-}
-
-/* Edit session launcher */
-interface SessionLauncherFormContentProps {
-  control: Control<SessionLauncherForm, unknown>;
-  errors: FieldErrors<SessionLauncherForm>;
-  watch: UseFormWatch<SessionLauncherForm>;
-  touchedFields: Partial<
-    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
-  >;
-}
-export default function SessionLauncherFormContent({
-  control,
-  errors,
-  watch,
-  touchedFields,
-}: SessionLauncherFormContentProps) {
-  const {
-    data: environments,
-    error,
-    isLoading,
-  } = useGetSessionEnvironmentsQuery();
-  const watchEnvironmentKind = watch("environment_kind");
-
-  return (
-    <>
-      <div className="mb-3">
-        <Label className="form-label" for="addSessionLauncherName">
-          Name
-        </Label>
-        <Controller
-          control={control}
-          name="name"
-          render={({ field }) => (
-            <Input
-              className={cx(errors.name && "is-invalid")}
-              id="addSessionLauncherName"
-              placeholder="session name"
-              type="text"
-              data-cy="edit-session-name"
-              {...field}
-            />
-          )}
-          rules={{ required: true }}
-        />
-        <div className="invalid-feedback">Please provide a name</div>
-      </div>
-      <div className="mb-3">
-        <Label className="form-label" for="addSessionLauncherDescription">
-          Description
-        </Label>
-        <Controller
-          control={control}
-          name="description"
-          render={({ field }) => (
-            <textarea
-              className="form-control"
-              id="addSessionLauncherDescription"
-              placeholder="session description"
-              rows={3}
-              {...field}
-            />
-          )}
-        />
-      </div>
-
-      <div className="mb-3">
-        <div className="form-label">Environment Type</div>
-
-        <Controller
-          control={control}
-          name="environment_kind"
-          render={({ field }) => (
-            <div className={cx("d-flex", "gap-4")}>
-              <div
-                className={cx(
-                  environments && environments.length == 0 && "d-none"
-                )}
-              >
-                <Input
-                  id="addSessionLauncherGlobalEnvironment"
-                  type="radio"
-                  {...field}
-                  value={"global_environment"}
-                  checked={field.value === "global_environment"}
-                  disabled={environments && environments.length == 0}
-                  data-cy="edit-session-type-existing"
-                />
-                <Label
-                  className="ms-2"
-                  for="addSessionLauncherGlobalEnvironment"
-                >
-                  Global environment
-                </Label>
-              </div>
-              <div>
-                <Input
-                  id="addSessionLauncherContainerImage"
-                  type="radio"
-                  {...field}
-                  value={"container_image"}
-                  checked={field.value === "container_image"}
-                  data-cy="edit-session-type-custom"
-                />
-                <Label className="ms-2" for="addSessionLauncherContainerImage">
-                  Custom Image
-                </Label>
-              </div>
-            </div>
-          )}
-        />
-      </div>
-
-      <div
-        className={cx(
-          watchEnvironmentKind !== "global_environment" && "d-none"
-        )}
-      >
-        <div className="form-label">Environment</div>
-        {isLoading && (
-          <p>
-            <Loader className="me-1" inline size={16} />
-            Loading environments...
-          </p>
-        )}
-        {error && (
-          <>
-            <p>Cannot load environments</p>
-            <RtkErrorAlert dismissible={false} error={error} />
-          </>
-        )}
-        {environments && environments.length > 0 && (
-          <Controller
-            control={control}
-            name="environment_id"
-            render={({ field }) => (
-              <>
-                <Row>
-                  {environments.map((environment) => (
-                    <SessionEnvironmentItem
-                      key={environment.id}
-                      environment={environment}
-                      field={field}
-                      touchedFields={touchedFields}
-                      errors={errors}
-                      control={control}
-                    />
-                  ))}
-                </Row>
-                <Input
-                  className={cx(errors.environment_id && "is-invalid")}
-                  id="addSessionLauncherEnvironmentId"
-                  type="hidden"
-                  {...field}
-                />
-                <div className="invalid-feedback">
-                  Please choose an environment
-                </div>
-              </>
-            )}
-            rules={{
-              required: watchEnvironmentKind === "global_environment",
-            }}
-          />
-        )}
-      </div>
-
-      <div
-        className={cx(
-          watchEnvironmentKind !== "container_image" && "d-none",
-          "mb-3"
-        )}
-      >
-        <Label className="form-label" for="addSessionLauncherContainerImage">
-          Container Image
-        </Label>
-        <Controller
-          control={control}
-          name="container_image"
-          render={({ field }) => (
-            <Input
-              className={cx(errors.container_image && "is-invalid")}
-              id="addSessionLauncherContainerImage"
-              placeholder="Docker image"
-              type="text"
-              {...field}
-            />
-          )}
-          rules={{ required: watchEnvironmentKind === "container_image" }}
-        />
-        <div className="invalid-feedback">Please provide a container image</div>
-      </div>
-
-      <div>
-        <Label className="form-label" for="addSessionLauncherDefaultUrl">
-          Default URL
-        </Label>
-        <Controller
-          control={control}
-          name="default_url"
-          render={({ field }) => (
-            <Input
-              className="form-control"
-              id="addSessionLauncherDefaultUrl"
-              placeholder="/lab"
-              type="text"
-              {...field}
-            />
-          )}
-        />
-      </div>
-    </>
-  );
-}
-
-/* Add custom session launcher */
-interface CustomEnvFormContentProps {
-  control: Control<SessionLauncherForm, unknown>;
-  errors: FieldErrors<SessionLauncherForm>;
-  setValue: UseFormSetValue<SessionLauncherForm>;
-}
-export function CustomEnvFormContent({
-  control,
-  errors,
-  setValue,
-}: CustomEnvFormContentProps) {
-  const { data: resourcePools, isLoading: isLoadingResourcesPools } =
-    useGetResourcePoolsQuery({});
-
-  const onChangeResourceClass = (resourceClass: SingleValue<ResourceClass>) => {
-    if (resourceClass) setValue("resourceClass", resourceClass);
-  };
-
-  const defaultSessionClass = useMemo(
-    () =>
-      resourcePools
-        ?.filter((pool) => pool.default)
-        .flatMap((pool) => pool.classes)
-        .find((c) => c.default) ??
-      resourcePools?.find(() => true)?.classes[0] ??
-      undefined,
-    [resourcePools]
-  );
-
-  return (
-    <>
-      <div className="mb-3">
-        <Label className="form-label" for="addSessionLauncherName">
-          Session launcher name
-        </Label>
-        <Controller
-          control={control}
-          name="name"
-          render={({ field }) => (
-            <Input
-              className={cx(errors.name && "is-invalid")}
-              id="addSessionLauncherName"
-              placeholder="session name"
-              type="text"
-              data-cy="launcher-name-input"
-              {...field}
-            />
-          )}
-          rules={{ required: true }}
-        />
-        <div className="invalid-feedback">Please provide a name</div>
-      </div>
-      <div className="mb-3">
-        <Label className="form-label" for="addSessionLauncherContainerImage">
-          Container Image
-        </Label>
-        <Controller
-          control={control}
-          name="container_image"
-          rules={{ required: true }}
-          render={({ field }) => (
-            <Input
-              className={cx(errors.container_image && "is-invalid")}
-              id="addSessionLauncherContainerImage"
-              placeholder="Docker image"
-              type="text"
-              data-cy="custom-image-input"
-              {...field}
-            />
-          )}
-        />
-        <div className="invalid-feedback">Please provide a container image</div>
-      </div>
-      <div className="mb-3">
-        <Label className="form-label" for="addSessionLauncherDefaultUrl">
-          Default URL (Optional)
-        </Label>
-        <Controller
-          control={control}
-          name="default_url"
-          render={({ field }) => (
-            <Input
-              className="form-control"
-              id="addSessionLauncherDefaultUrl"
-              placeholder="/lab"
-              type="text"
-              {...field}
-            />
-          )}
-        />
-      </div>
-      <div>
-        <Label className="form-label" for="addSessionResourceClass">
-          Compute resources
-        </Label>
-        {!isLoadingResourcesPools &&
-        resourcePools &&
-        resourcePools?.length > 0 ? (
-          <Controller
-            control={control}
-            name="resourceClass"
-            defaultValue={defaultSessionClass}
-            render={() => (
-              <>
-                <SessionClassSelectorV2
-                  id="addSessionResourceClass"
-                  resourcePools={resourcePools}
-                  onChange={onChangeResourceClass}
-                  defaultSessionClass={defaultSessionClass}
-                />
-                {errors?.resourceClass && (
-                  <div className={cx("small", "text-danger")}>
-                    Please provide a resource class
-                  </div>
-                )}
-              </>
-            )}
-            rules={{ required: true }}
-          />
-        ) : (
-          <WarnAlert>
-            There are no one resource pool available to create a session
-          </WarnAlert>
-        )}
-      </div>
-    </>
-  );
-}
-
-/* Add existing session launcher */
-interface ExistingEnvFormContentProps {
-  control: Control<SessionLauncherForm, unknown>;
-  errors: FieldErrors<SessionLauncherForm>;
-  watch: UseFormWatch<SessionLauncherForm>;
-  setValue: UseFormSetValue<SessionLauncherForm>;
-  touchedFields: Partial<
-    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
-  >;
-  resetField: UseFormResetField<SessionLauncherForm>;
-}
-export function ExistingEnvFormContent({
-  control,
-  errors,
-  watch,
-  setValue,
-  touchedFields,
-  resetField,
-}: ExistingEnvFormContentProps) {
-  const {
-    data: environments,
-    error,
-    isLoading,
-  } = useGetSessionEnvironmentsQuery();
-  const { data: resourcePools, isLoading: isLoadingResourcesPools } =
-    useGetResourcePoolsQuery({});
-  const watchEnvironmentId = watch("environment_id");
-  const defaultSessionClass = useMemo(
-    () =>
-      resourcePools
-        ?.filter((pool) => pool.default)
-        .flatMap((pool) => pool.classes)
-        .find((c) => c.default) ??
-      resourcePools?.find(() => true)?.classes[0] ??
-      undefined,
-    [resourcePools]
-  );
-
-  useEffect(() => {
-    if (watchEnvironmentId == null) {
-      return;
-    }
-    if (environments && environments.length > 0 && watchEnvironmentId) {
-      const selectedEnv = environments.filter(
-        (e) => e.id === watchEnvironmentId
-      );
-      if (selectedEnv) {
-        setValue("name", selectedEnv[0].name);
-        resetField("resourceClass");
-        if (defaultSessionClass) setValue("resourceClass", defaultSessionClass);
-      }
-    }
-  }, [
-    watchEnvironmentId,
-    setValue,
-    environments,
-    resetField,
-    defaultSessionClass,
-  ]);
-
-  const onChangeResourceClass = (resourceClass: SingleValue<ResourceClass>) => {
-    if (resourceClass) setValue("resourceClass", resourceClass);
-  };
-
-  if (error)
-    return (
-      <div>
-        <p>Cannot load environments</p>
-        <RtkErrorAlert dismissible={false} error={error} />
-      </div>
-    );
-  if (isLoading)
-    return (
-      <p>
-        <Loader className="me-1" inline size={16} />
-        Loading environments...
-      </p>
-    );
-  if (!environments)
-    return (
-      <p>
-        <p>Cannot load environments</p>
-      </p>
-    );
-  if (environments && environments.length === 0)
-    return (
-      <WarnAlert dismissible={false}>
-        No existing environments available. Please contact an admin to update
-        this list.
-      </WarnAlert>
-    );
-
-  return (
-    <>
-      <Controller
-        control={control}
-        name="environment_id"
-        render={({ field }) => (
-          <>
-            <ListGroup>
-              {environments.map((environment) => (
-                <SessionEnvironmentItem
-                  key={environment.id}
-                  environment={environment}
-                  field={field}
-                  touchedFields={touchedFields}
-                  resourcePools={resourcePools}
-                  onChangeResourceClass={onChangeResourceClass}
-                  isLoadingResourcesPools={isLoadingResourcesPools}
-                  errors={errors}
-                  control={control}
-                  defaultSessionClass={defaultSessionClass}
-                />
-              ))}
-            </ListGroup>
-            <Input
-              className={cx(errors.environment_id && "is-invalid")}
-              id="addSessionLauncherEnvironmentId"
-              type="hidden"
-              {...field}
-            />
-            <div className="invalid-feedback">Please choose an environment</div>
-          </>
-        )}
-        rules={{ required: true }}
-      />
-    </>
-  );
-}
-
-/* Environment Item */
-interface SessionEnvironmentItemProps {
-  environment: SessionEnvironment;
-  field: ControllerRenderProps<SessionLauncherForm, "environment_id">;
-  touchedFields: Partial<
-    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
-  >;
-  resourcePools?: ResourcePool[];
-  isLoadingResourcesPools?: boolean;
-  onChangeResourceClass?: (resourceClass: SingleValue<ResourceClass>) => void;
-  errors: FieldErrors<SessionLauncherForm>;
-  control: Control<SessionLauncherForm, unknown>;
-  defaultSessionClass?: ResourceClass;
-}
-
-export function SessionEnvironmentItem({
-  environment,
-  control,
-  defaultSessionClass,
-  field,
-  touchedFields,
-  resourcePools,
-  isLoadingResourcesPools,
-  onChangeResourceClass,
-  errors,
-}: SessionEnvironmentItemProps) {
-  const { creation_date, id, name, description } = environment;
-  const isSelected = field.value === id;
-
-  const [orderCard, setOrderCard] = useState(isSelected);
-  const isEnvironmentIdTouched = touchedFields.environment_id;
-
-  useEffect(() => {
-    if (!orderCard || isEnvironmentIdTouched) setOrderCard(false);
-  }, [isSelected, orderCard, isEnvironmentIdTouched]);
-
-  const selector = !isLoadingResourcesPools &&
-    resourcePools &&
-    resourcePools?.length > 0 && (
-      <Card className="mt-2">
-        <Controller
-          control={control}
-          name="resourceClass"
-          defaultValue={defaultSessionClass}
-          render={() => (
-            <CardBody>
-              <Label for="resource-class-selector">Compute resources</Label>
-              <SessionClassSelectorV2
-                id="resource-class-selector"
-                resourcePools={resourcePools}
-                onChange={onChangeResourceClass}
-                defaultSessionClass={defaultSessionClass}
-              />
-              {errors.resourceClass && (
-                <Label className={cx("text-danger", "fs-small")}>
-                  Select compute resource to continue{" "}
-                </Label>
-              )}
-            </CardBody>
-          )}
-          rules={{ required: true }}
-        />
-      </Card>
-    );
-
-  return (
-    <ListGroupItem
-      action
-      className={cx(
-        isSelected && orderCard && "order-first",
-        isSelected && "bg-primary",
-        isSelected && "bg-opacity-10"
-      )}
-      data-cy="global-environment-item"
-    >
-      <Input
-        className="btn-check"
-        id={`addSessionLauncherGlobalEnvironment-${id}`}
-        type="radio"
-        {...field}
-        value={id}
-        checked={isSelected}
-      />
-      <div>
-        <Label
-          className={cx("cursor-pointer", "m-0", "w-100")}
-          for={`addSessionLauncherGlobalEnvironment-${id}`}
-        >
-          <h5>{name}</h5>
-          <p className="mb-2">
-            <Globe2 className={cx("bi", "me-1")} />
-            Global environment
-          </p>
-          {description ? <p className="mb-2">description</p> : null}
-          <p className="m-0">
-            <TimeCaption
-              datetime={creation_date}
-              enableTooltip
-              prefix="Created"
-            />
-          </p>
-        </Label>
-        {isSelected && selector}
-      </div>
-    </ListGroupItem>
-  );
-}
diff --git a/client/src/features/sessionsV2/SessionView/EnvironmentCard.tsx b/client/src/features/sessionsV2/SessionView/EnvironmentCard.tsx
new file mode 100644
index 0000000000..d9ae82f50c
--- /dev/null
+++ b/client/src/features/sessionsV2/SessionView/EnvironmentCard.tsx
@@ -0,0 +1,263 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { Clock, Globe2, Link45deg } from "react-bootstrap-icons";
+import { Card, CardBody, Col, Row } from "reactstrap";
+import { CommandCopy } from "../../../components/commandCopy/CommandCopy";
+import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils";
+import { SessionLauncher } from "../sessionsV2.types";
+
+export function CustomEnvironmentValues({
+  launcher,
+}: {
+  launcher: SessionLauncher;
+}) {
+  const environment = launcher.environment;
+  return (
+    environment.environment_kind === "CUSTOM" && (
+      <>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Default URL:</label>
+          <code>{`${environment.default_url ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Port:</label>
+          <code>{`${environment.port ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Working directory:</label>
+          <code>{`${environment.working_directory ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Mount directory:</label>
+          <code>{`${environment.mount_directory ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>UID:</label>
+          <code>{`${environment.uid ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>GUI:</label>
+          <code>{`${environment.gid ?? ""}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Command:</label>
+          <code>{`${environment.command?.join(" ") ?? "-"}`}</code>
+        </Col>
+        <Col
+          xs={12}
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "justify-content-start",
+            "gap-3",
+            "py-2"
+          )}
+        >
+          <label>Args:</label>
+          <code>{`${environment.args?.join(" ") ?? "-"}`}</code>
+        </Col>
+      </>
+    )
+  );
+}
+export function EnvironmentCard({ launcher }: { launcher: SessionLauncher }) {
+  const environment = launcher.environment;
+  return (
+    <>
+      <Card className={cx("border")}>
+        <CardBody className={cx("d-flex", "flex-column")}>
+          <Row>
+            <Col
+              xs={12}
+              className={cx(
+                "d-flex",
+                "align-items-center",
+                "justify-content-between",
+                "py-2"
+              )}
+            >
+              <div className={cx("d-flex", "gap-3")}>
+                <h5 className={cx("fw-bold", "mb-0")}>
+                  <small>
+                    {environment.environment_kind === "GLOBAL"
+                      ? environment?.name || ""
+                      : launcher.name}
+                  </small>
+                </h5>
+              </div>
+            </Col>
+            <Col
+              xs={12}
+              className={cx(
+                "d-flex",
+                "align-items-center",
+                "justify-content-start",
+                "py-2"
+              )}
+            >
+              {environment.environment_kind === "CUSTOM" ? (
+                <div className="d-flex align-items-center gap-2">
+                  <Link45deg size={24} />
+                  Custom image
+                </div>
+              ) : (
+                <div className="d-flex align-items-center gap-2">
+                  <Globe2 size={24} />
+                  Global environment
+                </div>
+              )}
+            </Col>
+            {environment.environment_kind === "GLOBAL" ? (
+              <>
+                <Col
+                  xs={12}
+                  className={cx(
+                    "d-flex",
+                    "align-items-center",
+                    "justify-content-start",
+                    "py-2"
+                  )}
+                >
+                  {environment?.description ? (
+                    <p>{environment.description}</p>
+                  ) : (
+                    <p className="fst-italic mb-0">No description</p>
+                  )}
+                </Col>
+                <Col
+                  xs={12}
+                  className={cx(
+                    "d-flex",
+                    "align-items-center",
+                    "justify-content-start",
+                    "gap-2",
+                    "py-0"
+                  )}
+                >
+                  <label>Container image:</label>
+                  <CommandCopy command={environment?.container_image || ""} />
+                </Col>
+                <Col
+                  xs={12}
+                  className={cx(
+                    "d-flex",
+                    "flex-wrap",
+                    "align-items-center",
+                    "gap-2",
+                    "py-2"
+                  )}
+                >
+                  <Clock size="16" className="flex-shrink-0" />
+                  Created by <strong>Renku</strong> on{" "}
+                  {toHumanDateTime({
+                    datetime: launcher.creation_date,
+                    format: "date",
+                  })}
+                </Col>
+              </>
+            ) : (
+              <>
+                <Col
+                  xs={12}
+                  className={cx(
+                    "d-flex",
+                    "align-items-center",
+                    "justify-content-start",
+                    "gap-3",
+                    "py-2"
+                  )}
+                >
+                  <label>Container image:</label>
+                  <CommandCopy noMargin command={environment.container_image} />
+                </Col>
+                {environment.environment_kind === "CUSTOM" && (
+                  <CustomEnvironmentValues launcher={launcher} />
+                )}
+              </>
+            )}
+          </Row>
+        </CardBody>
+      </Card>
+    </>
+  );
+}
diff --git a/client/src/features/sessionsV2/SessionView/SessionView.tsx b/client/src/features/sessionsV2/SessionView/SessionView.tsx
index 9afb0474df..3d8bbd6dad 100644
--- a/client/src/features/sessionsV2/SessionView/SessionView.tsx
+++ b/client/src/features/sessionsV2/SessionView/SessionView.tsx
@@ -19,21 +19,18 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
-  Boxes,
-  Clock,
   CircleFill,
+  Clock,
   Database,
   ExclamationTriangleFill,
-  Globe2,
-  Pencil,
   FileCode,
+  Pencil,
 } from "react-bootstrap-icons";
 import {
   Badge,
   Button,
   Card,
   CardBody,
-  CardHeader,
   Col,
   ListGroup,
   ListGroupItem,
@@ -45,7 +42,6 @@ import {
 
 import { TimeCaption } from "../../../components/TimeCaption";
 import { CommandCopy } from "../../../components/commandCopy/CommandCopy";
-import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils";
 import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay";
 import { Project } from "../../projectsV2/api/projectV2.api";
 import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api";
@@ -60,17 +56,17 @@ import {
   SessionStatusV2Label,
   SessionStatusV2Title,
 } from "../components/SessionStatus/SessionStatus";
-import sessionsV2Api from "../sessionsV2.api";
-import { SessionEnvironment, SessionLauncher } from "../sessionsV2.types";
-
+import { DEFAULT_URL } from "../session.utils.ts";
+import { SessionLauncher } from "../sessionsV2.types";
 import MembershipGuard from "../../ProjectPageV2/utils/MembershipGuard";
 import {
   useGetResourceClassByIdQuery,
   useGetResourcePoolsQuery,
 } from "../../dataServices/computeResources.api";
 import { useGetProjectsByProjectIdMembersQuery } from "../../projectsV2/api/projectV2.enhanced-api";
-import UpdateSessionLauncherModal from "../UpdateSessionLauncherModal";
+import UpdateSessionLauncherModal from "../components/SessionModals/UpdateSessionLauncherModal.tsx";
 import { ModifyResourcesLauncherModal } from "../components/SessionModals/ModifyResourcesLauncher";
+import { EnvironmentCard } from "./EnvironmentCard";
 
 interface SessionCardContentProps {
   color: string;
@@ -192,68 +188,6 @@ function getSessionColor(state: string) {
     : "dark";
 }
 
-function EnvironmentCard({
-  launcher,
-  environment,
-}: {
-  launcher: SessionLauncher;
-  environment?: SessionEnvironment;
-}) {
-  return (
-    <>
-      <Card>
-        <CardHeader tag="h5">
-          {launcher.environment_kind === "global_environment"
-            ? environment?.name || <span className="fst-italic">No name</span>
-            : launcher.name}
-        </CardHeader>
-        <CardBody className={cx("d-flex", "flex-column", "gap-3")}>
-          <p className="m-0">
-            {launcher.environment_kind === "container_image" ? (
-              <>
-                <Boxes className={cx("bi", "me-1")} />
-                Custom image
-              </>
-            ) : (
-              <>
-                <Globe2 className={cx("bi", "me-1")} />
-                Global environment
-              </>
-            )}
-          </p>
-          {launcher.environment_kind === "global_environment" ? (
-            <>
-              <p className="m-0">
-                {environment?.description ? (
-                  environment.description
-                ) : (
-                  <span className="fst-italic">No description</span>
-                )}
-              </p>
-              <div>
-                <span>Container image:</span>
-                <CommandCopy command={environment?.container_image || ""} />
-              </div>
-              <div>
-                <Clock className={cx("bi", "me-1")} />
-                Created by <strong>Renku</strong> on{" "}
-                {toHumanDateTime({
-                  datetime: launcher.creation_date,
-                  format: "date",
-                })}
-              </div>
-            </>
-          ) : (
-            <div>
-              <label>Container image:</label>
-              <CommandCopy command={launcher.container_image || ""} />
-            </div>
-          )}
-        </CardBody>
-      </Card>
-    </>
-  );
-}
 interface SessionViewProps {
   launcher?: SessionLauncher;
   sessions?: Sessions;
@@ -279,19 +213,7 @@ export function SessionView({
   const { data: members } = useGetProjectsByProjectIdMembersQuery({
     projectId: project.id,
   });
-  const { data: environments, isLoading } =
-    sessionsV2Api.endpoints.getSessionEnvironments.useQueryState(
-      launcher && launcher.environment_kind === "global_environment"
-        ? undefined
-        : skipToken
-    );
-  const environment = useMemo(() => {
-    if (!launcher || launcher.environment_kind === "container_image")
-      return undefined;
-    if (launcher.environment_kind === "global_environment" && environments)
-      return environments?.find((env) => env.id === launcher.environment_id);
-    return undefined;
-  }, [environments, launcher]);
+  const environment = launcher?.environment;
 
   const { data: dataSources } = useGetStoragesV2Query({
     storageV2Params: {
@@ -402,7 +324,7 @@ export function SessionView({
               </div>
             )}
           </div>
-          {launcher && !isLoading && (
+          {launcher && (
             <div>
               <div className={cx("d-flex", "justify-content-between", "mb-2")}>
                 <h4 className="my-auto">Session Environment</h4>
@@ -428,7 +350,7 @@ export function SessionView({
                   minimumRole="editor"
                 />
               </div>
-              <EnvironmentCard launcher={launcher} environment={environment} />
+              <EnvironmentCard launcher={launcher} />
               <UpdateSessionLauncherModal
                 isOpen={isUpdateOpen}
                 launcher={launcher}
@@ -483,12 +405,15 @@ export function SessionView({
               upon launch
             </p>
             <div>
-              {launcher && launcher.default_url ? (
-                <CommandCopy command={launcher.default_url} noMargin />
+              {launcher && launcher.environment.default_url ? (
+                <CommandCopy
+                  command={launcher.environment.default_url}
+                  noMargin
+                />
               ) : environment && environment.default_url ? (
                 <CommandCopy command={environment.default_url} noMargin />
               ) : (
-                <CommandCopy command="/lab" noMargin />
+                <CommandCopy command={DEFAULT_URL} noMargin />
               )}
             </div>
           </div>
diff --git a/client/src/features/sessionsV2/SessionsV2.tsx b/client/src/features/sessionsV2/SessionsV2.tsx
index 7fcc310435..14a55bcafa 100644
--- a/client/src/features/sessionsV2/SessionsV2.tsx
+++ b/client/src/features/sessionsV2/SessionsV2.tsx
@@ -44,7 +44,7 @@ import AddSessionLauncherButton from "./AddSessionLauncherButton";
 import DeleteSessionV2Modal from "./DeleteSessionLauncherModal";
 import { SessionItemDisplay } from "./SessionList/SessionItemDisplay";
 import { SessionView } from "./SessionView/SessionView";
-import UpdateSessionLauncherModal from "./UpdateSessionLauncherModal";
+import UpdateSessionLauncherModal from "./components/SessionModals/UpdateSessionLauncherModal";
 import { useGetProjectSessionLaunchersQuery } from "./sessionsV2.api";
 import { SessionLauncher } from "./sessionsV2.types";
 import SessionItem from "./SessionList/SessionItem";
diff --git a/client/src/features/sessionsV2/UpdateSessionLauncherModal.tsx b/client/src/features/sessionsV2/UpdateSessionLauncherModal.tsx
deleted file mode 100644
index d3ec49be1b..0000000000
--- a/client/src/features/sessionsV2/UpdateSessionLauncherModal.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/*!
- * Copyright 2024 - Swiss Data Science Center (SDSC)
- * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
- * Eidgenössische Technische Hochschule Zürich (ETHZ).
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import cx from "classnames";
-import { useCallback, useEffect } from "react";
-import { CheckLg, XLg } from "react-bootstrap-icons";
-import { useForm } from "react-hook-form";
-import {
-  Button,
-  Form,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "reactstrap";
-
-import { Loader } from "../../components/Loader";
-import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
-import SessionLauncherFormContent, {
-  SessionLauncherForm,
-} from "./SessionLauncherFormContent";
-import {
-  useGetSessionEnvironmentsQuery,
-  useUpdateSessionLauncherMutation,
-} from "./sessionsV2.api";
-import {
-  SessionLauncher,
-  SessionLauncherEnvironment,
-} from "./sessionsV2.types";
-
-interface UpdateSessionLauncherModalProps {
-  isOpen: boolean;
-  launcher: SessionLauncher;
-  toggle: () => void;
-}
-
-export default function UpdateSessionLauncherModal({
-  isOpen,
-  launcher,
-  toggle,
-}: UpdateSessionLauncherModalProps) {
-  const { data: environments } = useGetSessionEnvironmentsQuery();
-  const [updateSessionLauncher, result] = useUpdateSessionLauncherMutation();
-
-  const {
-    control,
-    formState: { errors, isDirty, touchedFields },
-    handleSubmit,
-    reset,
-    setValue,
-    watch,
-  } = useForm<SessionLauncherForm>({
-    defaultValues: {
-      name: launcher.name,
-      description: launcher.description ?? "",
-      environment_kind: launcher.environment_kind,
-      environment_id:
-        launcher.environment_kind === "global_environment"
-          ? launcher.environment_id
-          : "",
-      container_image:
-        launcher.environment_kind === "container_image"
-          ? launcher.container_image
-          : "",
-      default_url: launcher.default_url ?? "",
-    },
-  });
-  const onSubmit = useCallback(
-    (data: SessionLauncherForm) => {
-      const { default_url, description, name } = data;
-      const environment: SessionLauncherEnvironment =
-        data.environment_kind === "global_environment"
-          ? {
-              environment_kind: "global_environment",
-              environment_id: data.environment_id,
-            }
-          : {
-              environment_kind: "container_image",
-              container_image: data.container_image,
-            };
-      updateSessionLauncher({
-        launcherId: launcher.id,
-        name,
-        description: description.trim() ? description : undefined,
-        default_url: default_url.trim() ? default_url : undefined,
-        ...environment,
-      });
-    },
-    [launcher.id, updateSessionLauncher]
-  );
-
-  useEffect(() => {
-    if (environments == null) {
-      return;
-    }
-    if (environments.length == 0) {
-      setValue("environment_kind", "container_image");
-    }
-  }, [environments, setValue]);
-
-  useEffect(() => {
-    if (!result.isSuccess) {
-      return;
-    }
-    toggle();
-  }, [result.isSuccess, toggle]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      reset();
-      result.reset();
-    }
-  }, [isOpen, reset, result]);
-
-  useEffect(() => {
-    reset({
-      name: launcher.name,
-      description: launcher.description ?? "",
-      environment_kind: launcher.environment_kind,
-      environment_id:
-        launcher.environment_kind === "global_environment"
-          ? launcher.environment_id
-          : "",
-      container_image:
-        launcher.environment_kind === "container_image"
-          ? launcher.container_image
-          : "",
-      default_url: launcher.default_url ?? "",
-    });
-  }, [launcher, reset]);
-
-  return (
-    <Modal
-      backdrop="static"
-      centered
-      fullscreen="lg"
-      isOpen={isOpen}
-      size="lg"
-      toggle={toggle}
-      scrollable
-    >
-      <ModalHeader toggle={toggle}>Edit session {launcher.name}</ModalHeader>
-      <ModalBody>
-        <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-          {result.error && <RtkErrorAlert error={result.error} />}
-
-          <SessionLauncherFormContent
-            control={control}
-            errors={errors}
-            watch={watch}
-            touchedFields={touchedFields}
-          />
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button color="outline-primary" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Cancel
-        </Button>
-        <Button
-          color="primary"
-          data-cy="edit-session-button"
-          disabled={result.isLoading || !isDirty}
-          onClick={handleSubmit(onSubmit)}
-          type="submit"
-        >
-          {result.isLoading ? (
-            <Loader className="me-1" inline size={16} />
-          ) : (
-            <CheckLg className={cx("bi", "me-1")} />
-          )}
-          Update session
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
diff --git a/client/src/features/sessionsV2/components/SessionForm/AdvanceSettingsFields.tsx b/client/src/features/sessionsV2/components/SessionForm/AdvanceSettingsFields.tsx
new file mode 100644
index 0000000000..8fb397a63f
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/AdvanceSettingsFields.tsx
@@ -0,0 +1,252 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { Control, Controller, FieldErrors } from "react-hook-form";
+import { Input, Label } from "reactstrap";
+import { MoreInfo } from "../../../../components/MoreInfo";
+import { DEFAULT_URL, getFormCustomValuesDesc } from "../../session.utils";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+
+interface AdvanceSettingsProp {
+  control: Control<SessionLauncherForm, unknown>;
+  errors?: FieldErrors<SessionLauncherForm>;
+}
+export function AdvanceSettingsFields({
+  control,
+  errors,
+}: AdvanceSettingsProp) {
+  const desc = getFormCustomValuesDesc();
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <div className="row">
+        <div className={cx("col-12", "col-md-9")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherDefaultUrl"
+          >
+            Default URL
+          </Label>
+          <MoreInfo help={desc.urlPath} />
+          <Controller
+            control={control}
+            name="default_url"
+            render={({ field }) => (
+              <Input
+                className="form-control"
+                id="addSessionLauncherDefaultUrl"
+                placeholder={DEFAULT_URL}
+                type="text"
+                {...field}
+              />
+            )}
+          />
+        </div>
+        <div className={cx("col-12", "col-md-3")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherPort"
+          >
+            Port (Optional)
+          </Label>
+          <MoreInfo help={desc.port} />
+          <Controller
+            control={control}
+            name="port"
+            render={({ field }) => (
+              <Input
+                className={cx(errors?.port && "is-invalid")}
+                id="addSessionLauncherPort"
+                placeholder="e.g. 8080"
+                type="text"
+                {...field}
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className={cx("col-12")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherMountDirectory"
+          >
+            Mount directory (Optional)
+          </Label>
+          <MoreInfo help={desc.mountDirectory} />
+          <Controller
+            control={control}
+            name="mount_directory"
+            render={({ field }) => (
+              <Input
+                className={cx(errors?.mount_directory && "is-invalid")}
+                id="addSessionLauncherMountDirectory"
+                placeholder=""
+                type="text"
+                {...field}
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className={cx("col-12", "col-md-9")}>
+          <Label className={cx("form-label", "me-2", "fw-bold")}>
+            Docker settings
+          </Label>
+        </div>
+      </div>
+      <div className="row">
+        <div className={cx("col-12")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherWorkingDirectory"
+          >
+            Working directory (Optional)
+          </Label>
+          <MoreInfo help={desc.workingDirectory} />
+          <Controller
+            control={control}
+            name="working_directory"
+            render={({ field }) => (
+              <Input
+                className={cx(errors?.working_directory && "is-invalid")}
+                id="addSessionLauncherWorkingDirectory"
+                placeholder=""
+                type="text"
+                {...field}
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className={cx("col-12", "col-md-6")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherGid"
+          >
+            GID (Optional)
+          </Label>
+          <MoreInfo help={desc.gid} />
+          <Controller
+            control={control}
+            name="gid"
+            rules={{ required: false, min: 1000 }}
+            render={({ field }) => (
+              <Input
+                className={cx(errors?.gid && "is-invalid")}
+                id="addSessionLauncherGID"
+                placeholder="e.g. 1000"
+                type="number"
+                {...field}
+              />
+            )}
+          />
+        </div>
+        <div className={cx("col-12", "col-md-6")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherUid"
+          >
+            UID (Optional)
+          </Label>
+          <MoreInfo help={desc.uid} />
+          <Controller
+            control={control}
+            name="uid"
+            rules={{ required: false, min: 1000 }}
+            render={({ field }) => (
+              <Input
+                className={cx(errors?.uid && "is-invalid")}
+                id="addSessionLauncherUID"
+                placeholder="e.g 1000"
+                type="number"
+                {...field}
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className={cx("col-12", "col-md-6")}>
+          <Controller
+            control={control}
+            name="command"
+            render={({ field }) => (
+              <div className="d-flex flex-column justify-content-between h-100">
+                <div>
+                  <Label
+                    className={cx("form-label", "me-2")}
+                    for="addSessionLauncherCommand"
+                  >
+                    Command ENTRYPOINT (Optional)
+                  </Label>
+                  <MoreInfo help={desc.command} />
+                  <div className={cx("small", "text-light-emphasis")}>
+                    e.g. <code>{'["python3","main.py"]'}</code> or{" "}
+                    <code>python3 main.py</code>
+                  </div>
+                </div>
+                <div>
+                  <Input
+                    className={cx(errors?.uid && "is-invalid")}
+                    id="addSessionLauncherCommand"
+                    placeholder=""
+                    type="text"
+                    {...field}
+                  />
+                </div>
+              </div>
+            )}
+          />
+        </div>
+        <div className={cx("col-12", "col-md-6")}>
+          <Label
+            className={cx("form-label", "me-2")}
+            for="addSessionLauncherArgs"
+          >
+            Command Arguments CMD (Optional)
+          </Label>
+          <MoreInfo help={desc.args} />
+          <Controller
+            control={control}
+            name="args"
+            render={({ field }) => (
+              <>
+                <div className={cx("small", "text-light-emphasis")}>
+                  e.g. <code>{'["--arg1", "--arg2", "--pwd=/home/user"]'}</code>
+                </div>
+                <div className={cx("small", "text-light-emphasis", "mb-2")}>
+                  or <code>--arg1 --arg2 --pwd=$HOME</code>
+                </div>
+                <Input
+                  className={cx(errors?.uid && "is-invalid")}
+                  id="addSessionLauncherArgs"
+                  placeholder=""
+                  type="text"
+                  {...field}
+                />
+              </>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx b/client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx
new file mode 100644
index 0000000000..580c7c8aef
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx
@@ -0,0 +1,82 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { useState, useCallback } from "react";
+import { Controller } from "react-hook-form";
+import { Label, Input, Collapse } from "reactstrap";
+import ChevronFlippedIcon from "../../../../components/icons/ChevronFlippedIcon";
+import { EnvironmentFieldsProps } from "./EnvironmentField";
+import { AdvanceSettingsFields } from "./AdvanceSettingsFields";
+
+export function CustomEnvironmentFields({
+  watch,
+  control,
+  errors,
+}: EnvironmentFieldsProps) {
+  const watchEnvironmentKind = watch("environment_kind");
+  const [isAdvanceSettingOpen, setIsAdvanceSettingsOpen] = useState(false);
+  const toggleIsOpen = useCallback(
+    () =>
+      setIsAdvanceSettingsOpen((isAdvanceSettingOpen) => !isAdvanceSettingOpen),
+    []
+  );
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <p className={cx("mb-0")}>
+        Use a custom image to create a session launcher. Provide an image URL,
+        such as one from https://hub.docker.com.
+      </p>
+      <div className={cx("d-flex", "flex-column")}>
+        <Label
+          className={cx("form-label")}
+          for="addSessionLauncherContainerImage"
+        >
+          Container Image
+        </Label>
+        <Controller
+          control={control}
+          name="container_image"
+          render={({ field }) => (
+            <Input
+              className={cx(errors.container_image && "is-invalid")}
+              id="addSessionLauncherContainerImage"
+              placeholder="Docker image"
+              type="text"
+              autoFocus={true}
+              {...field}
+            />
+          )}
+          rules={{ required: watchEnvironmentKind === "CUSTOM" }}
+        />
+        <div className="invalid-feedback">Please provide a container image</div>
+      </div>
+      <div>
+        <span
+          className={cx("fw-bold", "cursor-pointer")}
+          onClick={toggleIsOpen}
+        >
+          Advance settings <ChevronFlippedIcon flipped={isAdvanceSettingOpen} />
+        </span>
+      </div>
+      <Collapse isOpen={isAdvanceSettingOpen}>
+        <AdvanceSettingsFields control={control} errors={errors} />
+      </Collapse>
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx b/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
new file mode 100644
index 0000000000..088e78d48c
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
@@ -0,0 +1,254 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import {
+  Control,
+  Controller,
+  FieldErrors,
+  FieldNamesMarkedBoolean,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { Collapse, Input, Label, ListGroup } from "reactstrap";
+import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
+import ChevronFlippedIcon from "../../../../components/icons/ChevronFlippedIcon";
+import { Loader } from "../../../../components/Loader";
+import { orderEnvironments } from "../../session.utils";
+import { useGetSessionEnvironmentsQuery } from "../../sessionsV2.api";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+import { AdvanceSettingsFields } from "./AdvanceSettingsFields";
+import { EnvironmentKindField } from "./EnvironmentKindField";
+import { SessionEnvironmentItem } from "./SessionEnvironmentItem";
+
+interface SessionLauncherFormContentProps {
+  control: Control<SessionLauncherForm, unknown>;
+  errors: FieldErrors<SessionLauncherForm>;
+  watch: UseFormWatch<SessionLauncherForm>;
+  touchedFields: Partial<
+    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
+  >;
+}
+
+interface EditLauncherFormContentProps extends SessionLauncherFormContentProps {
+  environmentId?: string;
+  setValue: UseFormSetValue<SessionLauncherForm>;
+}
+export default function EditLauncherFormContent({
+  control,
+  errors,
+  watch,
+  touchedFields,
+  environmentId,
+  setValue,
+}: EditLauncherFormContentProps) {
+  const {
+    data: environments,
+    error,
+    isLoading,
+  } = useGetSessionEnvironmentsQuery();
+  const watchEnvironmentKind = watch("environment_kind");
+  const [isAdvanceSettingOpen, setIsAdvanceSettingsOpen] = useState(false);
+  const toggleIsOpen = useCallback(
+    () =>
+      setIsAdvanceSettingsOpen((isAdvanceSettingOpen) => !isAdvanceSettingOpen),
+    []
+  );
+
+  const orderEnvironment = useMemo(
+    () => orderEnvironments(environments, environmentId),
+    [environments, environmentId]
+  );
+
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <div>
+        <Label className="form-label" for="addSessionLauncherName">
+          Session launcher name
+        </Label>
+        <Controller
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <Input
+              className={cx(errors.name && "is-invalid")}
+              id="addSessionLauncherName"
+              placeholder="session name"
+              type="text"
+              data-cy="edit-session-name"
+              {...field}
+            />
+          )}
+          rules={{ required: true }}
+        />
+        <div className="invalid-feedback">Please provide a name</div>
+      </div>
+      <div>
+        <Label className="form-label" for="addSessionLauncherDescription">
+          Session launcher description
+        </Label>
+        <Controller
+          control={control}
+          name="description"
+          render={({ field }) => (
+            <textarea
+              className="form-control"
+              id="addSessionLauncherDescription"
+              placeholder="session description"
+              rows={3}
+              {...field}
+            />
+          )}
+        />
+      </div>
+      <div>
+        <EnvironmentKindField control={control} setValue={setValue} />
+        {/*<div className="form-label">Environment Type</div>*/}
+        {/*<Controller*/}
+        {/*  control={control}*/}
+        {/*  name="environment_kind"*/}
+        {/*  render={({ field }) => (*/}
+        {/*    <div className={cx("d-flex", "gap-4")}>*/}
+        {/*      <div*/}
+        {/*        className={cx(*/}
+        {/*          environments && environments.length == 0 && "d-none"*/}
+        {/*        )}*/}
+        {/*      >*/}
+        {/*        <Input*/}
+        {/*          id="addSessionLauncherGlobalEnvironment"*/}
+        {/*          type="radio"*/}
+        {/*          {...field}*/}
+        {/*          value={"GLOBAL"}*/}
+        {/*          checked={field.value === "GLOBAL"}*/}
+        {/*          disabled={environments && environments.length == 0}*/}
+        {/*          data-cy="edit-session-type-existing"*/}
+        {/*        />*/}
+        {/*        <Label*/}
+        {/*          className="ms-2"*/}
+        {/*          for="addSessionLauncherGlobalEnvironment"*/}
+        {/*        >*/}
+        {/*          Global environment*/}
+        {/*        </Label>*/}
+        {/*      </div>*/}
+        {/*      <div>*/}
+        {/*        <Input*/}
+        {/*          id="addSessionLauncherContainerImage"*/}
+        {/*          type="radio"*/}
+        {/*          {...field}*/}
+        {/*          value={"CUSTOM"}*/}
+        {/*          checked={field.value === "CUSTOM"}*/}
+        {/*          data-cy="edit-session-type-custom"*/}
+        {/*        />*/}
+        {/*        <Label className="ms-2" for="addSessionLauncherContainerImage">*/}
+        {/*          Custom Environment*/}
+        {/*        </Label>*/}
+        {/*      </div>*/}
+        {/*    </div>*/}
+        {/*  )}*/}
+        {/*/>*/}
+      </div>
+      <div className={cx(watchEnvironmentKind !== "GLOBAL" && "d-none")}>
+        <div className="form-label">Environment</div>
+        {isLoading && (
+          <p>
+            <Loader className="me-1" inline size={16} />
+            Loading environments...
+          </p>
+        )}
+        {error && (
+          <>
+            <p>Cannot load environments</p>
+            <RtkErrorAlert dismissible={false} error={error} />
+          </>
+        )}
+        {orderEnvironment && orderEnvironment.length > 0 && (
+          <Controller
+            control={control}
+            name="environment_id"
+            render={({ field }) => (
+              <>
+                <ListGroup>
+                  {orderEnvironment.map((environment) => (
+                    <SessionEnvironmentItem
+                      key={environment.id}
+                      environment={environment}
+                      field={field}
+                      touchedFields={touchedFields}
+                      errors={errors}
+                      control={control}
+                    />
+                  ))}
+                </ListGroup>
+                <Input
+                  className={cx(errors.environment_id && "is-invalid")}
+                  id="addSessionLauncherEnvironmentId"
+                  type="hidden"
+                  {...field}
+                />
+                <div className="invalid-feedback">
+                  Please choose an environment
+                </div>
+              </>
+            )}
+            rules={{
+              required: watchEnvironmentKind === "GLOBAL",
+            }}
+          />
+        )}
+      </div>
+
+      <div className={cx(watchEnvironmentKind !== "CUSTOM" && "d-none")}>
+        <Label className="form-label" for="addSessionLauncherContainerImage">
+          Container Image
+        </Label>
+        <Controller
+          control={control}
+          name="container_image"
+          render={({ field }) => (
+            <Input
+              className={cx(errors.container_image && "is-invalid")}
+              id="addSessionLauncherContainerImage"
+              placeholder="Docker image"
+              type="text"
+              {...field}
+            />
+          )}
+          rules={{ required: watchEnvironmentKind === "CUSTOM" }}
+        />
+        <div className="invalid-feedback">Please provide a container image</div>
+      </div>
+      {watchEnvironmentKind === "CUSTOM" && (
+        <>
+          <div>
+            <span
+              className={cx("fw-bold", "cursor-pointer")}
+              onClick={toggleIsOpen}
+            >
+              Advance settings{" "}
+              <ChevronFlippedIcon flipped={isAdvanceSettingOpen} />
+            </span>
+          </div>
+          <Collapse isOpen={isAdvanceSettingOpen}>
+            <AdvanceSettingsFields control={control} errors={errors} />
+          </Collapse>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
new file mode 100644
index 0000000000..47818dc51f
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
@@ -0,0 +1,77 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import {
+  Control,
+  FieldErrors,
+  FieldNamesMarkedBoolean,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+import { CustomEnvironmentFields } from "./CustomEnvironmentFields";
+import { EnvironmentKindField } from "./EnvironmentKindField";
+import { GlobalEnvironmentFields } from "./GlobalEnvironmentFields";
+
+export interface EnvironmentFieldsProps {
+  control: Control<SessionLauncherForm, unknown>;
+  errors: FieldErrors<SessionLauncherForm>;
+  watch: UseFormWatch<SessionLauncherForm>;
+  touchedFields: Partial<
+    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
+  >;
+  setValue: UseFormSetValue<SessionLauncherForm>;
+}
+
+export function EnvironmentFields({
+  watch,
+  control,
+  errors,
+  touchedFields,
+  setValue,
+}: EnvironmentFieldsProps) {
+  const watchEnvironmentKind = watch("environment_kind");
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <div className={cx("form-label", "mb-0")}>
+        <span className="fw-bold">1 of 2. Define environment</span>
+      </div>
+      <div>
+        <EnvironmentKindField control={control} setValue={setValue} />
+      </div>
+      <div className={cx(watchEnvironmentKind !== "GLOBAL" && "d-none")}>
+        <GlobalEnvironmentFields
+          errors={errors}
+          touchedFields={touchedFields}
+          control={control}
+          watch={watch}
+          setValue={setValue}
+        />
+      </div>
+      <div className={cx(watchEnvironmentKind !== "CUSTOM" && "d-none")}>
+        <CustomEnvironmentFields
+          errors={errors}
+          touchedFields={touchedFields}
+          control={control}
+          watch={watch}
+          setValue={setValue}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
new file mode 100644
index 0000000000..177cd5a7b7
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
@@ -0,0 +1,67 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { Control, Controller, UseFormSetValue } from "react-hook-form";
+import { Button, ButtonGroup } from "reactstrap";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+
+interface EnvironmentKindField {
+  control: Control<SessionLauncherForm, unknown>;
+  setValue: UseFormSetValue<SessionLauncherForm>;
+}
+export function EnvironmentKindField({
+  control,
+  setValue,
+}: EnvironmentKindField) {
+  return (
+    <Controller
+      control={control}
+      name="environment_kind"
+      render={({ field }) => (
+        <div className={cx("d-flex", "gap-4")}>
+          <ButtonGroup size="sm">
+            <Button
+              active={field.value === "GLOBAL"}
+              data-cy="edit-session-type-existing-global"
+              onClick={() => setValue("environment_kind", "GLOBAL")}
+              className={cx(
+                field.value === "GLOBAL"
+                  ? "text-white bg-primary"
+                  : "text-primary bg-white"
+              )}
+            >
+              Global environment
+            </Button>
+            <Button
+              active={field.value === "CUSTOM"}
+              data-cy="edit-session-type-existing-custom"
+              onClick={() => setValue("environment_kind", "CUSTOM")}
+              className={cx(
+                field.value === "CUSTOM"
+                  ? "text-white bg-primary"
+                  : "text-primary bg-white"
+              )}
+            >
+              Custom Environment
+            </Button>
+          </ButtonGroup>
+        </div>
+      )}
+    />
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/GlobalEnvironmentFields.tsx b/client/src/features/sessionsV2/components/SessionForm/GlobalEnvironmentFields.tsx
new file mode 100644
index 0000000000..864e312640
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/GlobalEnvironmentFields.tsx
@@ -0,0 +1,101 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { Controller } from "react-hook-form";
+import { Input, ListGroup } from "reactstrap";
+import { WarnAlert } from "../../../../components/Alert";
+import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
+import { Loader } from "../../../../components/Loader";
+import { useGetSessionEnvironmentsQuery } from "../../sessionsV2.api";
+import { EnvironmentFieldsProps } from "./EnvironmentField";
+import { SessionEnvironmentItem } from "./SessionEnvironmentItem";
+
+export function GlobalEnvironmentFields({
+  watch,
+  control,
+  touchedFields,
+  errors,
+}: EnvironmentFieldsProps) {
+  const {
+    data: environments,
+    error,
+    isLoading,
+  } = useGetSessionEnvironmentsQuery();
+  const watchEnvironmentKind = watch("environment_kind");
+
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <p className="mb-0">
+        Reuse an environment already defined on RenkuLab to create an
+        interactive session for your project
+      </p>
+      {isLoading && (
+        <p>
+          <Loader className="me-1" inline size={16} />
+          Loading environments...
+        </p>
+      )}
+      {error && (
+        <>
+          <p>Cannot load environments</p>
+          <RtkErrorAlert dismissible={false} error={error} />
+        </>
+      )}
+      {environments && environments.length === 0 && (
+        <WarnAlert dismissible={false}>
+          No existing environments available. Please contact an admin to update
+          this list.
+        </WarnAlert>
+      )}
+      {environments && environments.length > 0 && (
+        <Controller
+          control={control}
+          name="environment_id"
+          render={({ field }) => (
+            <div>
+              <Input
+                className={cx(errors.environment_id && "is-invalid")}
+                id="addSessionLauncherEnvironmentId"
+                type="hidden"
+                {...field}
+              />
+              <div className={cx("invalid-feedback", "mt-0")}>
+                Please choose an environment
+              </div>
+              <ListGroup>
+                {environments.map((environment) => (
+                  <SessionEnvironmentItem
+                    key={environment.id}
+                    environment={environment}
+                    field={field}
+                    touchedFields={touchedFields}
+                    errors={errors}
+                    control={control}
+                  />
+                ))}
+              </ListGroup>
+            </div>
+          )}
+          rules={{
+            required: watchEnvironmentKind === "GLOBAL",
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/LauncherDetailsFields.tsx b/client/src/features/sessionsV2/components/SessionForm/LauncherDetailsFields.tsx
new file mode 100644
index 0000000000..8c185efd0c
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/LauncherDetailsFields.tsx
@@ -0,0 +1,125 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { useMemo } from "react";
+import {
+  Control,
+  FieldErrors,
+  UseFormSetValue,
+  Controller,
+} from "react-hook-form";
+import { SingleValue } from "react-select";
+import { Label, Input } from "reactstrap";
+import { WarnAlert } from "../../../../components/Alert";
+import { useGetResourcePoolsQuery } from "../../../dataServices/computeResources.api";
+import { ResourceClass } from "../../../dataServices/dataServices.types";
+import { SessionClassSelectorV2 } from "../../../session/components/options/SessionClassOption";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+
+interface LauncherDetailsFieldsProps {
+  control: Control<SessionLauncherForm, unknown>;
+  errors: FieldErrors<SessionLauncherForm>;
+  setValue: UseFormSetValue<SessionLauncherForm>;
+}
+export function LauncherDetailsFields({
+  setValue,
+  control,
+  errors,
+}: LauncherDetailsFieldsProps) {
+  const { data: resourcePools, isLoading: isLoadingResourcesPools } =
+    useGetResourcePoolsQuery({});
+
+  const onChangeResourceClass = (resourceClass: SingleValue<ResourceClass>) => {
+    if (resourceClass) setValue("resourceClass", resourceClass);
+  };
+
+  const defaultSessionClass = useMemo(
+    () =>
+      resourcePools
+        ?.filter((pool) => pool.default)
+        .flatMap((pool) => pool.classes)
+        .find((c) => c.default) ??
+      resourcePools?.find(() => true)?.classes[0] ??
+      undefined,
+    [resourcePools]
+  );
+
+  return (
+    <div className={cx("d-flex", "flex-column", "gap-3")}>
+      <div className={cx("form-label", "mb-0")}>
+        <span className="fw-bold">2 of 2. Define launcher details</span>
+      </div>
+      <div>
+        <Label className="form-label" for="addSessionLauncherName">
+          Session launcher name
+        </Label>
+        <Controller
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <Input
+              className={cx(errors.name && "is-invalid")}
+              id="addSessionLauncherName"
+              placeholder="session name"
+              type="text"
+              data-cy="launcher-name-input"
+              autoFocus={true}
+              {...field}
+            />
+          )}
+          rules={{ required: true }}
+        />
+        <div className="invalid-feedback">Please provide a name</div>
+      </div>
+      <div>
+        <Label className="form-label" for="addSessionResourceClass">
+          Session launcher compute resources
+        </Label>
+        {!isLoadingResourcesPools &&
+        resourcePools &&
+        resourcePools?.length > 0 ? (
+          <Controller
+            control={control}
+            name="resourceClass"
+            defaultValue={defaultSessionClass}
+            render={() => (
+              <>
+                <SessionClassSelectorV2
+                  id="addSessionResourceClass"
+                  resourcePools={resourcePools}
+                  onChange={onChangeResourceClass}
+                  defaultSessionClass={defaultSessionClass}
+                />
+                {errors?.resourceClass && (
+                  <div className={cx("small", "text-danger")}>
+                    Please provide a resource class
+                  </div>
+                )}
+              </>
+            )}
+            rules={{ required: true }}
+          />
+        ) : (
+          <WarnAlert>
+            There are no one resource pool available to create a session
+          </WarnAlert>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/SessionEnvironmentItem.tsx b/client/src/features/sessionsV2/components/SessionForm/SessionEnvironmentItem.tsx
new file mode 100644
index 0000000000..84bf619fe6
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/SessionEnvironmentItem.tsx
@@ -0,0 +1,134 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { Globe2 } from "react-bootstrap-icons";
+import {
+  Control,
+  Controller,
+  ControllerRenderProps,
+  FieldErrors,
+  FieldNamesMarkedBoolean,
+} from "react-hook-form";
+import { SingleValue } from "react-select";
+import { Card, CardBody, Input, Label, ListGroupItem } from "reactstrap";
+import { TimeCaption } from "../../../../components/TimeCaption";
+import {
+  ResourceClass,
+  ResourcePool,
+} from "../../../dataServices/dataServices.types";
+import { SessionClassSelectorV2 } from "../../../session/components/options/SessionClassOption";
+import {
+  SessionEnvironment,
+  SessionLauncherForm,
+} from "../../sessionsV2.types";
+
+interface SessionEnvironmentItemProps {
+  environment: SessionEnvironment;
+  field: ControllerRenderProps<SessionLauncherForm, "environment_id">;
+  touchedFields: Partial<
+    Readonly<FieldNamesMarkedBoolean<SessionLauncherForm>>
+  >;
+  resourcePools?: ResourcePool[];
+  isLoadingResourcesPools?: boolean;
+  onChangeResourceClass?: (resourceClass: SingleValue<ResourceClass>) => void;
+  errors: FieldErrors<SessionLauncherForm>;
+  control: Control<SessionLauncherForm, unknown>;
+  defaultSessionClass?: ResourceClass;
+}
+
+export function SessionEnvironmentItem({
+  environment,
+  control,
+  defaultSessionClass,
+  field,
+  resourcePools,
+  isLoadingResourcesPools,
+  onChangeResourceClass,
+  errors,
+}: SessionEnvironmentItemProps) {
+  const { creation_date, id, name, description } = environment;
+  const isSelected = field.value === id;
+
+  const selector = !isLoadingResourcesPools &&
+    resourcePools &&
+    resourcePools?.length > 0 && (
+      <Card className="mt-2">
+        <Controller
+          control={control}
+          name="resourceClass"
+          defaultValue={defaultSessionClass}
+          render={() => (
+            <CardBody>
+              <Label for="resource-class-selector">Compute resources</Label>
+              <SessionClassSelectorV2
+                id="resource-class-selector"
+                resourcePools={resourcePools}
+                onChange={onChangeResourceClass}
+                defaultSessionClass={defaultSessionClass}
+              />
+              {errors.resourceClass && (
+                <Label className={cx("text-danger", "fs-small")}>
+                  Select compute resource to continue{" "}
+                </Label>
+              )}
+            </CardBody>
+          )}
+          rules={{ required: true }}
+        />
+      </Card>
+    );
+
+  return (
+    <ListGroupItem
+      action
+      className={cx(isSelected && "bg-primary", isSelected && "bg-opacity-10")}
+      data-cy="global-environment-item"
+    >
+      <Input
+        className="btn-check"
+        id={`addSessionLauncherGlobalEnvironment-${id}`}
+        type="radio"
+        {...field}
+        value={id}
+        checked={isSelected}
+      />
+      <div>
+        <Label
+          className={cx("cursor-pointer", "m-0", "w-100")}
+          for={`addSessionLauncherGlobalEnvironment-${id}`}
+        >
+          <h5>{name}</h5>
+          <p className="mb-2">
+            <Globe2 className={cx("bi", "me-1")} />
+            Global environment
+          </p>
+          {description ? <p className="mb-2">description</p> : null}
+          <p className="m-0">
+            <TimeCaption
+              datetime={creation_date}
+              enableTooltip
+              prefix="Created"
+            />
+          </p>
+        </Label>
+        {isSelected && selector}
+      </div>
+    </ListGroupItem>
+  );
+}
diff --git a/client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx b/client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx
new file mode 100644
index 0000000000..5fe5264bf0
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx
@@ -0,0 +1,69 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import cx from "classnames";
+import { Breadcrumb, BreadcrumbItem, Button } from "reactstrap";
+
+interface SessionLauncherBreadcrumbNavbarProps {
+  setStep: (newState: "environment" | "launcherDetails") => void;
+  step: "environment" | "launcherDetails";
+  readyToGoNext: boolean;
+}
+export const SessionLauncherBreadcrumbNavbar = ({
+  setStep,
+  step,
+  readyToGoNext,
+}: SessionLauncherBreadcrumbNavbarProps) => {
+  return (
+    <Breadcrumb data-cy="add-session-launcher-navigation">
+      <BreadcrumbItem active={step === "environment"} key={"link-environment"}>
+        <Button
+          className={cx(
+            "p-0",
+            step === "environment" && ["text-decoration-none", "fw-bold"]
+          )}
+          color="link"
+          onClick={() => {
+            setStep("environment");
+          }}
+        >
+          {" "}
+          1. Define Environment
+        </Button>
+      </BreadcrumbItem>
+      <BreadcrumbItem
+        active={step === "launcherDetails"}
+        key={"link-launcher-details"}
+      >
+        <Button
+          className={cx(
+            "p-0",
+            step === "launcherDetails" && ["text-decoration-none", "fw-bold"]
+          )}
+          color="link"
+          disabled={!readyToGoNext}
+          onClick={() => {
+            setStep("launcherDetails");
+          }}
+        >
+          {" "}
+          2. Define launcher details
+        </Button>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+};
diff --git a/client/src/features/sessionsV2/components/SessionModals/AddSession.tsx b/client/src/features/sessionsV2/components/SessionModals/AddSession.tsx
deleted file mode 100644
index d0e767f7e8..0000000000
--- a/client/src/features/sessionsV2/components/SessionModals/AddSession.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-/*!
- * Copyright 2024 - Swiss Data Science Center (SDSC)
- * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
- * Eidgenössische Technische Hochschule Zürich (ETHZ).
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { skipToken } from "@reduxjs/toolkit/query";
-import cx from "classnames";
-import { useCallback, useEffect, useState } from "react";
-import { Box2, Boxes, PlayCircle, PlusLg, XLg } from "react-bootstrap-icons";
-import { useForm } from "react-hook-form";
-import { useParams } from "react-router-dom-v5-compat";
-import {
-  Button,
-  Col,
-  Form,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Row,
-} from "reactstrap";
-import { Loader } from "../../../../components/Loader";
-import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
-import { useGetProjectsByNamespaceAndSlugQuery } from "../../../projectsV2/api/projectV2.enhanced-api";
-import {
-  CustomEnvFormContent,
-  ExistingEnvFormContent,
-  SessionLauncherForm,
-} from "../../SessionLauncherFormContent";
-import { useAddSessionLauncherMutation } from "../../sessionsV2.api";
-import { SessionLauncherEnvironment } from "../../sessionsV2.types";
-import { InfoAlert } from "../../../../components/Alert";
-
-interface AddSessionLauncherModalProps {
-  isOpen: boolean;
-  toggle: () => void;
-}
-function AddSessionCustomImageModal({
-  isOpen,
-  toggle,
-}: AddSessionLauncherModalProps) {
-  const { namespace, slug } = useParams<{ namespace: string; slug: string }>();
-  const { data: project } = useGetProjectsByNamespaceAndSlugQuery(
-    namespace && slug ? { namespace, slug } : skipToken
-  );
-  const projectId = project?.id;
-
-  const [addSessionLauncher, result] = useAddSessionLauncherMutation();
-
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-    reset,
-    setValue,
-  } = useForm<SessionLauncherForm, unknown>({
-    defaultValues: {
-      name: "",
-      environment_kind: "container_image",
-      container_image: "",
-      default_url: "",
-    },
-  });
-  const onSubmit = useCallback(
-    (data: SessionLauncherForm) => {
-      const { default_url, name } = data;
-      const environment: SessionLauncherEnvironment = {
-        environment_kind: "container_image",
-        container_image: data.container_image,
-      };
-      addSessionLauncher({
-        project_id: projectId ?? "",
-        resource_class_id: data.resourceClass.id,
-        name,
-        default_url: default_url.trim() ? default_url : undefined,
-        ...environment,
-      });
-    },
-    [addSessionLauncher, projectId]
-  );
-
-  useEffect(() => {
-    if (!result.isSuccess) {
-      return;
-    }
-    toggle();
-  }, [result.isSuccess, toggle]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      reset();
-      result.reset();
-    }
-  }, [isOpen, reset, result]);
-
-  return (
-    <Modal
-      backdrop="static"
-      centered
-      fullscreen="lg"
-      isOpen={isOpen}
-      size="lg"
-      toggle={toggle}
-    >
-      <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-        <ModalHeader toggle={toggle}>
-          <Boxes className={cx("bi", "me-1")} />
-          Provide a custom image
-        </ModalHeader>
-        <ModalBody>
-          <p>
-            Create a session launcher from a custom image. You can provide an
-            image URL from a registry, for example from https://hub.docker.com
-          </p>
-          <InfoAlert dismissible={false} timeout={0}>
-            The image must be public.
-          </InfoAlert>
-          {result.error && <RtkOrNotebooksError error={result.error} />}
-
-          <CustomEnvFormContent
-            control={control}
-            errors={errors}
-            setValue={setValue}
-          />
-        </ModalBody>
-        <ModalFooter className="gap-2">
-          <Button color="outline-primary" onClick={toggle}>
-            <XLg className={cx("bi", "me-1")} />
-            Cancel
-          </Button>
-          <Button
-            color="primary"
-            data-cy="add-launcher-custom-button"
-            disabled={result.isLoading}
-            type="submit"
-          >
-            {result.isLoading ? (
-              <Loader className="me-1" inline size={16} />
-            ) : (
-              <PlusLg className={cx("bi", "me-1")} />
-            )}
-            Add session launcher
-          </Button>
-        </ModalFooter>
-      </Form>
-    </Modal>
-  );
-}
-function AddSessionExistingEnvModal({
-  isOpen,
-  toggle,
-}: AddSessionLauncherModalProps) {
-  const { namespace, slug } = useParams<{ namespace: string; slug: string }>();
-  const { data: project } = useGetProjectsByNamespaceAndSlugQuery(
-    namespace && slug ? { namespace, slug } : skipToken
-  );
-  const projectId = project?.id;
-
-  const [addSessionLauncher, result] = useAddSessionLauncherMutation();
-
-  const {
-    control,
-    formState: { errors, touchedFields },
-    handleSubmit,
-    reset,
-    watch,
-    setValue,
-    resetField,
-  } = useForm<SessionLauncherForm, unknown>({
-    defaultValues: {
-      name: "",
-      environment_kind: "global_environment",
-      environment_id: "",
-      default_url: "",
-    },
-  });
-  const onSubmit = useCallback(
-    (data: SessionLauncherForm) => {
-      const { default_url, name, resourceClass } = data;
-      const environment: SessionLauncherEnvironment = {
-        environment_kind: "global_environment",
-        environment_id: data.environment_id,
-      };
-      addSessionLauncher({
-        project_id: projectId ?? "",
-        resource_class_id: resourceClass.id,
-        name,
-        default_url: default_url.trim() ? default_url : undefined,
-        ...environment,
-      });
-    },
-    [addSessionLauncher, projectId]
-  );
-
-  useEffect(() => {
-    if (!result.isSuccess) {
-      return;
-    }
-    toggle();
-  }, [result.isSuccess, toggle]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      reset();
-      result.reset();
-    }
-  }, [isOpen, reset, result]);
-
-  return (
-    <Modal
-      backdrop="static"
-      centered
-      fullscreen="lg"
-      isOpen={isOpen}
-      scrollable
-      size="lg"
-      toggle={toggle}
-    >
-      <ModalHeader toggle={toggle}>
-        <Box2 className={cx("bi", "me-1")} />
-        Select an existing environment
-      </ModalHeader>
-      <ModalBody>
-        <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-          <p>
-            Reuse an environment already defined on RenkuLab to create an
-            interactive session for your project.
-          </p>
-          {result.error && <RtkOrNotebooksError error={result.error} />}
-          <ExistingEnvFormContent
-            control={control}
-            errors={errors}
-            watch={watch}
-            setValue={setValue}
-            touchedFields={touchedFields}
-            resetField={resetField}
-          />
-        </Form>
-      </ModalBody>
-      <ModalFooter className="gap-2">
-        <Button color="outline-primary" onClick={toggle}>
-          <XLg className={cx("bi", "me-1")} />
-          Cancel
-        </Button>
-        <Button
-          color="primary"
-          disabled={result.isLoading}
-          type="submit"
-          onClick={handleSubmit(onSubmit)}
-          data-cy="add-session-launcher-button"
-        >
-          {result.isLoading ? (
-            <>
-              <Loader className="me-1" inline size={16} />
-              Adding Session launcher
-            </>
-          ) : (
-            <>
-              <PlusLg className={cx("bi", "me-1")} />
-              Add session launcher
-            </>
-          )}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-
-export function Step1AddSessionModal({
-  toggleModal,
-  isOpen,
-}: {
-  toggleModal: () => void;
-  isOpen: boolean;
-}) {
-  const [isOpenCustomEnv, setIsOpenCustomEnv] = useState(false);
-  const [isOpenExistingEnv, setIsOpenExistingEnv] = useState(false);
-  const toggleCustom = useCallback(() => {
-    setIsOpenCustomEnv((open) => !open);
-  }, []);
-  const toggleExisting = useCallback(() => {
-    setIsOpenExistingEnv((open) => !open);
-  }, []);
-  const goNextStep = useCallback(
-    (isCustom: boolean) => {
-      if (isCustom) {
-        toggleCustom();
-        toggleModal();
-      } else {
-        toggleExisting();
-        toggleModal();
-      }
-    },
-    [toggleModal, toggleCustom, toggleExisting]
-  );
-
-  return (
-    <>
-      <Modal size="lg" isOpen={isOpen} toggle={toggleModal} centered>
-        <ModalHeader toggle={toggleModal}>
-          <PlayCircle className={cx("bi", "me-1")} />
-          Add session launcher
-        </ModalHeader>
-        <ModalBody>
-          <p>
-            Define an interactive environment in which to do your work and share
-            it with others.
-          </p>
-          <p>
-            Everyone who can see the project can launch a session. Running
-            sessions are only accessible by the person who launched it.
-          </p>
-          <p>
-            All project code repositories and data sources will be automatically
-            mounted in your session.
-          </p>
-          <Row className="gap-3">
-            <Col className="d-grid" xs={12}>
-              <Button
-                color="outline-primary"
-                data-cy="add-existing-environment"
-                onClick={() => goNextStep(false)}
-              >
-                <Box2 className={cx("bi", "me-1")} />
-                Select an existing environment
-              </Button>
-            </Col>
-            <Col className="d-grid" xs={12}>
-              <Button
-                color="outline-primary"
-                data-cy="add-custom-image"
-                onClick={() => goNextStep(true)}
-              >
-                <Boxes className={cx("bi", "me-1")} />
-                Provide a custom image
-              </Button>
-            </Col>
-          </Row>
-        </ModalBody>
-      </Modal>
-      <AddSessionCustomImageModal
-        isOpen={isOpenCustomEnv}
-        toggle={toggleCustom}
-      />
-      <AddSessionExistingEnvModal
-        isOpen={isOpenExistingEnv}
-        toggle={toggleExisting}
-      />
-    </>
-  );
-}
diff --git a/client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx b/client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx
new file mode 100644
index 0000000000..a99c624ed2
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx
@@ -0,0 +1,256 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { skipToken } from "@reduxjs/toolkit/query";
+import cx from "classnames";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ArrowRight, CheckLg, XLg } from "react-bootstrap-icons";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom-v5-compat";
+import {
+  Button,
+  Form,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "reactstrap";
+import { SuccessAlert } from "../../../../components/Alert";
+import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
+import { Loader } from "../../../../components/Loader";
+import { useGetProjectsByNamespaceAndSlugQuery } from "../../../projectsV2/api/projectV2.enhanced-api";
+import {
+  DEFAULT_PORT,
+  DEFAULT_URL,
+  getFormattedEnvironmentValues,
+} from "../../session.utils";
+import {
+  useAddSessionLauncherMutation,
+  useGetSessionEnvironmentsQuery,
+} from "../../sessionsV2.api";
+import { SessionLauncherForm } from "../../sessionsV2.types";
+import { EnvironmentFields } from "../SessionForm/EnvironmentField";
+import { LauncherDetailsFields } from "../SessionForm/LauncherDetailsFields";
+import { SessionLauncherBreadcrumbNavbar } from "../SessionForm/SessionLauncherBreadcrumbNavbar";
+
+interface NewSessionLauncherModalProps {
+  isOpen: boolean;
+  toggle: () => void;
+}
+
+export default function NewSessionLauncherModal({
+  isOpen,
+  toggle,
+}: NewSessionLauncherModalProps) {
+  const [step, setStep] = useState<"environment" | "launcherDetails">(
+    "environment"
+  );
+  const { namespace, slug } = useParams<{ namespace: string; slug: string }>();
+  const { data: environments } = useGetSessionEnvironmentsQuery();
+  const [addSessionLauncher, result] = useAddSessionLauncherMutation();
+  const { data: project } = useGetProjectsByNamespaceAndSlugQuery(
+    namespace && slug ? { namespace, slug } : skipToken
+  );
+  const projectId = project?.id;
+
+  const {
+    control,
+    formState: { errors, isDirty, touchedFields },
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    trigger,
+  } = useForm<SessionLauncherForm>({
+    defaultValues: {
+      name: "",
+      environment_kind: "GLOBAL",
+      environment_id: "",
+      container_image: "",
+      default_url: DEFAULT_URL,
+      port: DEFAULT_PORT,
+    },
+  });
+
+  const watchEnvironmentId = watch("environment_id");
+  const watchEnvironmentCustomImage = watch("container_image");
+  const watchEnvironmentKind = watch("environment_kind");
+
+  const isEnvironmentDefined = useMemo(() => {
+    return (
+      (watchEnvironmentKind === "GLOBAL" && !!watchEnvironmentId) ||
+      (watchEnvironmentKind === "CUSTOM" &&
+        watchEnvironmentCustomImage?.length > 0)
+    );
+  }, [watchEnvironmentId, watchEnvironmentCustomImage, watchEnvironmentKind]);
+
+  const onNext = useCallback(() => {
+    trigger(["environment_id", "container_image"]);
+
+    if (isDirty && isEnvironmentDefined) setStep("launcherDetails");
+  }, [isDirty, setStep, trigger, isEnvironmentDefined]);
+
+  const onCancel = useCallback(() => {
+    setStep("environment");
+    reset();
+    toggle();
+  }, [reset, toggle, setStep]);
+
+  const onSubmit = useCallback(
+    (data: SessionLauncherForm) => {
+      const { name, resourceClass } = data;
+      const environment = getFormattedEnvironmentValues(data);
+      addSessionLauncher({
+        project_id: projectId ?? "",
+        resource_class_id: resourceClass.id,
+        name,
+        environment,
+      });
+    },
+    [projectId, addSessionLauncher]
+  );
+
+  useEffect(() => {
+    trigger(["container_image"]);
+  }, [watchEnvironmentCustomImage, trigger]);
+
+  useEffect(() => {
+    trigger(["environment_id"]);
+    if (environments?.length) {
+      const environmentSelected = environments.find(
+        (env) => env.id === watchEnvironmentId
+      );
+      setValue("name", environmentSelected?.name ?? "");
+    }
+  }, [watchEnvironmentId, setValue, environments, trigger]);
+
+  useEffect(() => {
+    if (environments == null) {
+      return;
+    }
+    if (environments.length == 0) {
+      setValue("environment_kind", "CUSTOM");
+    }
+  }, [environments, setValue]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setStep("environment");
+      reset();
+      result.reset();
+    }
+  }, [isOpen, reset, result, setStep]);
+
+  return (
+    <Modal
+      backdrop="static"
+      centered
+      fullscreen="lg"
+      isOpen={isOpen}
+      size="lg"
+      toggle={toggle}
+      scrollable
+    >
+      <ModalHeader toggle={toggle}>Add session launcher</ModalHeader>
+      <ModalBody style={{ height: result.isSuccess ? "auto" : "600px" }}>
+        {result.isSuccess ? (
+          <ConfirmationCreate />
+        ) : (
+          <div className={cx("d-flex", "flex-column", "gap-3")}>
+            {step === "environment" && (
+              <>
+                <p className="mb-0">
+                  Define an interactive environment in which to do your work and
+                  share it with others.
+                </p>
+              </>
+            )}
+            <Form noValidate onSubmit={handleSubmit(onSubmit)}>
+              {result.error && <RtkErrorAlert error={result.error} />}
+              {step === "environment" && (
+                <EnvironmentFields
+                  errors={errors}
+                  touchedFields={touchedFields}
+                  control={control}
+                  watch={watch}
+                  setValue={setValue}
+                />
+              )}
+              {step === "launcherDetails" && (
+                <LauncherDetailsFields
+                  setValue={setValue}
+                  errors={errors}
+                  control={control}
+                />
+              )}
+            </Form>
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        {!result.isSuccess && (
+          <div className={cx("d-flex", "flex-grow-1")}>
+            <SessionLauncherBreadcrumbNavbar
+              step={step}
+              setStep={setStep}
+              readyToGoNext={!!isEnvironmentDefined}
+            />
+          </div>
+        )}
+        <Button color="outline-primary" onClick={onCancel}>
+          <XLg className={cx("bi", "me-1")} />
+          {result.isSuccess ? "Close" : "Cancel"}
+        </Button>
+        {!result.isSuccess && step === "environment" && (
+          <Button
+            color="primary"
+            data-cy="next-session-button"
+            onClick={onNext}
+            type="submit"
+          >
+            Next <ArrowRight />
+          </Button>
+        )}
+        {!result.isSuccess && step === "launcherDetails" && (
+          <Button
+            color="primary"
+            data-cy="edit-session-button"
+            disabled={result.isLoading || !isDirty}
+            onClick={handleSubmit(onSubmit)}
+            type="submit"
+          >
+            {result.isLoading ? (
+              <Loader className="me-1" inline size={16} />
+            ) : (
+              <CheckLg className={cx("bi", "me-1")} />
+            )}
+            Add session launcher
+          </Button>
+        )}
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+const ConfirmationCreate = () => {
+  return (
+    <SuccessAlert dismissible={false} timeout={0}>
+      <p className="mb-0">Session launcher was created successfully!</p>
+    </SuccessAlert>
+  );
+};
diff --git a/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx b/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx
new file mode 100644
index 0000000000..f80af0defb
--- /dev/null
+++ b/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx
@@ -0,0 +1,174 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { useCallback, useEffect, useMemo } from "react";
+import { CheckLg, XLg } from "react-bootstrap-icons";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  Form,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "reactstrap";
+import { SuccessAlert } from "../../../../components/Alert";
+import { Loader } from "../../../../components/Loader";
+import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
+import {
+  getFormattedEnvironmentValues,
+  getLauncherDefaultValues,
+} from "../../session.utils";
+import {
+  useGetSessionEnvironmentsQuery,
+  useUpdateSessionLauncherMutation,
+} from "../../sessionsV2.api";
+import { SessionLauncherForm, SessionLauncher } from "../../sessionsV2.types";
+import EditLauncherFormContent from "../SessionForm/EditLauncherFormContent";
+
+interface UpdateSessionLauncherModalProps {
+  isOpen: boolean;
+  launcher: SessionLauncher;
+  toggle: () => void;
+}
+
+export default function UpdateSessionLauncherModal({
+  isOpen,
+  launcher,
+  toggle,
+}: UpdateSessionLauncherModalProps) {
+  const { data: environments } = useGetSessionEnvironmentsQuery();
+  const [updateSessionLauncher, result] = useUpdateSessionLauncherMutation();
+  const defaultValues = useMemo(
+    () => getLauncherDefaultValues(launcher),
+    [launcher]
+  );
+
+  const {
+    control,
+    formState: { errors, isDirty, touchedFields },
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+  } = useForm<SessionLauncherForm>({
+    defaultValues,
+  });
+  const onSubmit = useCallback(
+    (data: SessionLauncherForm) => {
+      const { description, name } = data;
+      const environment = getFormattedEnvironmentValues(data);
+      updateSessionLauncher({
+        launcherId: launcher.id,
+        name,
+        description: description.trim() ? description : undefined,
+        environment,
+      });
+    },
+    [launcher.id, updateSessionLauncher]
+  );
+
+  useEffect(() => {
+    if (environments == null) {
+      return;
+    }
+    if (environments.length == 0) {
+      setValue("environment_kind", "CUSTOM");
+    }
+  }, [environments, setValue]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+      result.reset();
+    }
+  }, [isOpen, reset, result]);
+
+  useEffect(() => {
+    reset(defaultValues);
+  }, [launcher, reset, defaultValues]);
+
+  return (
+    <Modal
+      backdrop="static"
+      centered
+      fullscreen="lg"
+      isOpen={isOpen}
+      size="lg"
+      toggle={toggle}
+      scrollable
+    >
+      <ModalHeader toggle={toggle}>
+        Edit session launcher {launcher.name}
+      </ModalHeader>
+      <ModalBody>
+        {result.isSuccess ? (
+          <ConfirmationUpdate />
+        ) : (
+          <Form noValidate onSubmit={handleSubmit(onSubmit)}>
+            {result.error && <RtkErrorAlert error={result.error} />}
+
+            <EditLauncherFormContent
+              control={control}
+              errors={errors}
+              watch={watch}
+              touchedFields={touchedFields}
+              environmentId={launcher.environment.id}
+              setValue={setValue}
+            />
+          </Form>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="outline-primary" onClick={toggle}>
+          <XLg className={cx("bi", "me-1")} />
+          {result.isSuccess ? "Close" : "Cancel"}
+        </Button>
+        {!result.isSuccess && (
+          <Button
+            color="primary"
+            data-cy="edit-session-button"
+            disabled={result.isLoading || !isDirty}
+            onClick={handleSubmit(onSubmit)}
+            type="submit"
+          >
+            {result.isLoading ? (
+              <Loader className="me-1" inline size={16} />
+            ) : (
+              <CheckLg className={cx("bi", "me-1")} />
+            )}
+            Update session launcher
+          </Button>
+        )}
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+const ConfirmationUpdate = () => {
+  return (
+    <SuccessAlert dismissible={false} timeout={0}>
+      <p className="fw-bold">Session launcher updated successfully!</p>
+      <p className="mb-0">
+        The changes will take effect the next time you launch a session with
+        this launcher. Current sessions will not be affected.
+      </p>
+    </SuccessAlert>
+  );
+};
diff --git a/client/src/features/sessionsV2/session.utils.ts b/client/src/features/sessionsV2/session.utils.ts
index f4f277320c..eec94584d7 100644
--- a/client/src/features/sessionsV2/session.utils.ts
+++ b/client/src/features/sessionsV2/session.utils.ts
@@ -16,30 +16,33 @@
  * limitations under the License
  */
 import faviconICO from "../../styles/assets/favicon/Favicon.ico";
-import faviconErrorICO from "../../styles/assets/favicon/FaviconError.ico";
-import faviconPauseICO from "../../styles/assets/favicon/FaviconPause.ico";
-import faviconRunningICO from "../../styles/assets/favicon/FaviconRunning.ico";
-import faviconWaitingICO from "../../styles/assets/favicon/FaviconWaiting.ico";
-import { FaviconStatus } from "../display/display.types";
-import { SessionStatusState } from "../session/sessions.types";
-
 import faviconSVG from "../../styles/assets/favicon/Favicon.svg";
-import faviconErrorSVG from "../../styles/assets/favicon/FaviconError.svg";
-import faviconPauseSVG from "../../styles/assets/favicon/FaviconPause.svg";
-import faviconRunningSVG from "../../styles/assets/favicon/FaviconRunning.svg";
-import faviconWaitingSVG from "../../styles/assets/favicon/FaviconWaiting.svg";
-
 import favicon16px from "../../styles/assets/favicon/Favicon16px.png";
-import faviconError16px from "../../styles/assets/favicon/FaviconError16px.png";
-import faviconPause16px from "../../styles/assets/favicon/FaviconPause16px.png";
-import faviconRunning16px from "../../styles/assets/favicon/FaviconRunning16px.png";
-import faviconWaiting16px from "../../styles/assets/favicon/FaviconWaiting16px.png";
-
 import favicon32px from "../../styles/assets/favicon/Favicon32px.png";
+import faviconErrorICO from "../../styles/assets/favicon/FaviconError.ico";
+import faviconErrorSVG from "../../styles/assets/favicon/FaviconError.svg";
+import faviconError16px from "../../styles/assets/favicon/FaviconError16px.png";
 import faviconError32px from "../../styles/assets/favicon/FaviconError32px.png";
+import faviconPauseICO from "../../styles/assets/favicon/FaviconPause.ico";
+import faviconPauseSVG from "../../styles/assets/favicon/FaviconPause.svg";
+import faviconPause16px from "../../styles/assets/favicon/FaviconPause16px.png";
 import faviconPause32px from "../../styles/assets/favicon/FaviconPause32px.png";
+import faviconRunningICO from "../../styles/assets/favicon/FaviconRunning.ico";
+import faviconRunningSVG from "../../styles/assets/favicon/FaviconRunning.svg";
+import faviconRunning16px from "../../styles/assets/favicon/FaviconRunning16px.png";
 import faviconRunning32px from "../../styles/assets/favicon/FaviconRunning32px.png";
+import faviconWaitingICO from "../../styles/assets/favicon/FaviconWaiting.ico";
+import faviconWaitingSVG from "../../styles/assets/favicon/FaviconWaiting.svg";
+import faviconWaiting16px from "../../styles/assets/favicon/FaviconWaiting16px.png";
 import faviconWaiting32px from "../../styles/assets/favicon/FaviconWaiting32px.png";
+import { FaviconStatus } from "../display/display.types";
+import { SessionStatusState } from "../session/sessions.types";
+import {
+  SessionEnvironmentList,
+  SessionLauncher,
+  SessionLauncherEnvironmentParams,
+  SessionLauncherForm,
+} from "./sessionsV2.types";
 
 export function getSessionFavicon(
   sessionState?: SessionStatusState,
@@ -99,3 +102,99 @@ export const FAVICON_BY_SESSION_STATUS = {
     svg: faviconPauseSVG,
   },
 };
+
+export function getFormCustomValuesDesc() {
+  return {
+    urlPath: `Specify a subpath for your Renku session. By default, the session opens at the path defined by the environment variable \`RENKU_SESION_PATH\`. If you set a subpath (e.g., "foo"), the session will open at \`<RENKU_SESION_PATH>/foo\`.`,
+    port: `The network port that your application will use to listen for incoming connections.  
+Default: \`8080\`.`,
+    workingDirectory: `Set the directory where your session will open. If not specified, Renku uses the Docker image setting. Renku will also create the project inside this directory including any data sources and repositories.`,
+    uid: `The identifier assigned to the user that will run the application. This determines file permissions and ownership.  
+Default: \`1000\`.`,
+    gid: `The identifier assigned to the group that will run the application. This helps manage group-based permissions.  
+Default: \`1000\`.`,
+    mountDirectory: `Renku will provide persistent storage for your session even when you pause or resume it. Set the location where this storage should be mounted. It should be the same as or a parent of the working directory to avoid data loss. Defaults to the working directory if not specified.`,
+    command: `The command that will be run i.e. will overwrite the image Dockerfile \`ENTRYPOINT\`.`,
+    args: `The arguments that will follow the command, i.e. will overwrite the image Dockerfile \`CMD\`.`,
+  };
+}
+export const DEFAULT_URL = "/";
+export const DEFAULT_PORT = 8888;
+
+export function orderEnvironments(
+  environments?: SessionEnvironmentList,
+  environmentId?: string
+): SessionEnvironmentList | undefined {
+  if (!environments || !environmentId) return environments;
+  const targetEnvironment = environments.find(
+    (env) => env.id === environmentId
+  );
+
+  if (!targetEnvironment) {
+    return environments;
+  }
+  const otherEnvironments = environments.filter(
+    (env) => env.id !== environmentId
+  );
+  return [targetEnvironment, ...otherEnvironments];
+}
+
+export function getFormattedEnvironmentValues(
+  data: SessionLauncherForm
+): SessionLauncherEnvironmentParams {
+  const {
+    container_image,
+    default_url,
+    name,
+    port,
+    working_directory,
+    uid,
+    gid,
+    mount_directory,
+    environment_id,
+    environment_kind,
+    command,
+    args,
+  } = data;
+  return environment_kind === "GLOBAL"
+    ? {
+        id: environment_id,
+      }
+    : {
+        environment_kind: "CUSTOM",
+        container_image,
+        name,
+        default_url: default_url.trim() ? default_url : DEFAULT_URL,
+        port,
+        working_directory,
+        mount_directory,
+        uid,
+        gid,
+        command: command?.length > 0 ? [`${command}`] : undefined,
+        args: args?.length > 0 ? [`${args}`] : undefined,
+      };
+}
+
+export function getLauncherDefaultValues(launcher: SessionLauncher) {
+  return {
+    name: launcher.name,
+    description: launcher.description ?? "",
+    environment_kind: launcher.environment.environment_kind,
+    environment_id:
+      launcher.environment.environment_kind === "GLOBAL"
+        ? launcher.environment.id
+        : "",
+    container_image:
+      launcher.environment.environment_kind === "CUSTOM"
+        ? launcher.environment.container_image
+        : "",
+    default_url: launcher.environment.default_url ?? DEFAULT_URL,
+    port: launcher.environment.port,
+    working_directory: launcher.environment.working_directory,
+    mount_directory: launcher.environment.mount_directory,
+    uid: launcher.environment.uid,
+    gid: launcher.environment.gid,
+    command: launcher.environment.command,
+    args: launcher.environment.args,
+  };
+}
diff --git a/client/src/features/sessionsV2/sessionsV2.types.ts b/client/src/features/sessionsV2/sessionsV2.types.ts
index 12f10bd97d..21d009b233 100644
--- a/client/src/features/sessionsV2/sessionsV2.types.ts
+++ b/client/src/features/sessionsV2/sessionsV2.types.ts
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { ResourceClass } from "../dataServices/dataServices.types";
+
 export interface SessionEnvironment {
   container_image: string;
   creation_date: string;
@@ -32,22 +34,46 @@ export type SessionLauncher = {
   project_id: string;
   name: string;
   creation_date: string;
-  default_url?: string;
   description?: string;
   resource_class_id?: number;
-  environment_kind: EnvironmentKind;
-} & SessionLauncherEnvironment;
+  environment: SessionLauncherEnvironment;
+};
 
-export type EnvironmentKind = "global_environment" | "container_image";
+export type EnvironmentKind = "GLOBAL" | "CUSTOM";
+
+export type SessionLauncherEnvironment = {
+  id?: string;
+  name: string;
+  description?: string;
+  container_image: string;
+  default_url?: string;
+  uid?: number;
+  gid?: number;
+  working_directory?: string;
+  mount_directory?: string;
+  port?: number;
+  environment_kind: EnvironmentKind;
+  command?: string[];
+  args?: string[];
+};
 
-export type SessionLauncherEnvironment =
+export type SessionLauncherEnvironmentParams =
   | {
-      environment_kind: Extract<EnvironmentKind, "global_environment">;
-      environment_id: string;
+      id: string;
     }
   | {
-      environment_kind: Extract<EnvironmentKind, "container_image">;
+      name: string;
+      description?: string;
       container_image: string;
+      default_url?: string;
+      uid?: number;
+      gid?: number;
+      working_directory?: string;
+      mount_directory?: string;
+      port?: number;
+      environment_kind: EnvironmentKind;
+      command?: string[];
+      args?: string[];
     };
 
 export type SessionLauncherList = SessionLauncher[];
@@ -57,25 +83,38 @@ export interface GetProjectSessionLaunchersParams {
 }
 
 export type AddSessionLauncherParams = {
-  default_url?: string;
   description?: string;
   name: string;
   project_id: string;
   resource_class_id?: number;
-  environment_kind: EnvironmentKind;
-} & SessionLauncherEnvironment;
+  environment: SessionLauncherEnvironmentParams;
+};
 
 export interface UpdateSessionLauncherParams {
   launcherId?: string;
-  default_url?: string;
   description?: string;
   name?: string;
-  environment_kind?: EnvironmentKind;
-  environment_id?: string;
   resource_class_id?: number;
-  container_image?: string;
+  environment?: SessionLauncherEnvironmentParams;
 }
 
 export interface DeleteSessionLauncherParams {
   launcherId: string;
 }
+
+export interface SessionLauncherForm {
+  name: string;
+  container_image: string;
+  description: string;
+  default_url: string;
+  environment_kind: EnvironmentKind;
+  environment_id: string;
+  resourceClass: ResourceClass;
+  port: number;
+  working_directory: string;
+  uid: number;
+  gid: number;
+  mount_directory: string;
+  command: string[];
+  args: string[];
+}
diff --git a/client/src/features/sessionsV2/useSessionLaunchState.hook.ts b/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
index 5de80c6cc0..f85c2dde13 100644
--- a/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
+++ b/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
@@ -18,10 +18,8 @@
 
 import { skipToken } from "@reduxjs/toolkit/query";
 import { useEffect, useMemo } from "react";
-
 import useAppDispatch from "../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../utils/customHooks/useAppSelector.hook";
-
 import { useGetResourcePoolsQuery } from "../dataServices/computeResources.api";
 import useDataSourceConfiguration from "../ProjectPageV2/ProjectPageContent/DataSources/useDataSourceConfiguration.hook";
 import type { Project } from "../projectsV2/api/projectV2.api";
@@ -29,8 +27,7 @@ import { useGetStoragesV2Query } from "../projectsV2/api/storagesV2.api";
 import { useGetDockerImageQuery } from "../session/sessions.api";
 import { SESSION_CI_PIPELINE_POLLING_INTERVAL_MS } from "../session/startSessionOptions.constants";
 import { DockerImageStatus } from "../session/startSessionOptions.types";
-
-import { useGetSessionEnvironmentsQuery } from "./sessionsV2.api";
+import { DEFAULT_URL } from "./session.utils";
 import { SessionLauncher } from "./sessionsV2.types";
 import startSessionOptionsV2Slice from "./startSessionOptionsV2.slice";
 import useSessionResourceClass from "./useSessionResourceClass.hook";
@@ -46,7 +43,7 @@ export default function useSessionLauncherState({
   project,
   isCustomLaunch,
 }: StartSessionFromLauncherProps) {
-  const { environment_kind, default_url } = launcher;
+  const { default_url } = launcher.environment;
 
   const {
     data: storages,
@@ -64,23 +61,7 @@ export default function useSessionLauncherState({
     resourcePools,
   });
 
-  const { data: environments } = useGetSessionEnvironmentsQuery(
-    environment_kind === "global_environment" ? undefined : skipToken
-  );
-
-  const environment = useMemo(
-    () =>
-      launcher.environment_kind === "global_environment" &&
-      environments?.find((env) => env.id === launcher.environment_id),
-    [environments, launcher]
-  );
-
-  const containerImage =
-    environment_kind === "global_environment" && environment
-      ? environment.container_image
-      : environment_kind === "global_environment"
-      ? "unknown"
-      : launcher.container_image;
+  const containerImage = launcher.environment.container_image ?? "";
 
   const startSessionOptionsV2 = useAppSelector(
     ({ startSessionOptionsV2 }) => startSessionOptionsV2
@@ -123,16 +104,11 @@ export default function useSessionLauncherState({
 
   // Set the default URL
   useEffect(() => {
-    const defaultUrl = default_url
-      ? default_url
-      : environment && environment.default_url
-      ? environment.default_url
-      : "/lab";
-
+    const defaultUrl = default_url ?? DEFAULT_URL;
     if (startSessionOptionsV2.defaultUrl !== defaultUrl) {
       dispatch(startSessionOptionsV2Slice.actions.setDefaultUrl(defaultUrl));
     }
-  }, [environment, default_url, dispatch, startSessionOptionsV2.defaultUrl]);
+  }, [default_url, dispatch, startSessionOptionsV2.defaultUrl]);
 
   // Set the image status
   useEffect(() => {
diff --git a/tests/cypress/e2e/projectV2setup.spec.ts b/tests/cypress/e2e/projectV2setup.spec.ts
index 49d53d2b4c..c838547b58 100644
--- a/tests/cypress/e2e/projectV2setup.spec.ts
+++ b/tests/cypress/e2e/projectV2setup.spec.ts
@@ -246,4 +246,25 @@ describe("Set up project components", () => {
       cy.getDataCy("start-session-button").should("contain.text", "Launch");
     });
   });
+
+  it("create a launcher ON PROGRESS", () => {
+    // TODO: update e2e tests
+    cy.intercept("/ui-server/api/notebooks/servers*", {
+      body: { servers: {} },
+    }).as("getSessions");
+    fixtures
+      .readProjectV2({ fixture: "projectV2/read-projectV2-empty.json" })
+      .sessionLaunchers()
+      .newLauncher()
+      .editLauncher()
+      .resourcePoolsTest()
+      .getResourceClass()
+      .environments();
+    cy.visit("/v2/projects/user1-uuid/test-2-v2-project");
+    cy.wait("@readProjectV2");
+    cy.wait("@getSessions");
+    cy.wait("@sessionLaunchers");
+    // ADD SESSION CUSTOM IMAGE
+    cy.getDataCy("add-session-launcher").click();
+  });
 });
diff --git a/tests/cypress/fixtures/projectV2/session-launchers.json b/tests/cypress/fixtures/projectV2/session-launchers.json
index 56422ad89a..fe08d4e70f 100644
--- a/tests/cypress/fixtures/projectV2/session-launchers.json
+++ b/tests/cypress/fixtures/projectV2/session-launchers.json
@@ -6,6 +6,12 @@
     "creation_date": "2024-05-23T09:59:59Z",
     "environment_kind": "container_image",
     "container_image": "renku/renkulab-py:latest",
-    "resource_class_id": 2
+    "resource_class_id": 2,
+    "port": "8080",
+    "workingDirectory": "/",
+    "uid": "1000",
+    "gid": "1000",
+    "mountDirectory": "",
+    "default_url": "/jdbqksdgsahd/bsajhfdjhsdv/jasgdjhf/lab"
   }
 ]