diff --git a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.stories.tsx b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.stories.tsx
index 8d8e74c83..0f5c8480e 100644
--- a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.stories.tsx
+++ b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.stories.tsx
@@ -5,7 +5,7 @@ import { componentStories, LoadingSpinner } from '@dolittle/design-system';
 
 const { metadata, createStory } = componentStories(LoadingSpinner);
 
-//TODO: update component to include text
+// TODO: Update component to improve text.
 
 metadata.parameters = {
     docs: {
@@ -20,26 +20,3 @@ metadata.parameters = {
 export default metadata;
 
 export const Default = createStory();
-
-// //TODO: Implement component
-// export const ErrorSpinner = createStory();
-// ErrorSpinner.parameters = {
-//     docs: {
-//         description: {
-//             story: `When the information is not processed successfully, we provide a clear indication in the UI to the user.
-//             The spinner changes to an error icon with a new description indicating what happened and how the user can resolve it.
-//             Use the main error color.`
-//         },
-//     },
-// };
-
-// //TODO: Implement component
-// export const SuccessSpinner = createStory();
-// SuccessSpinner.parameters = {
-//     docs: {
-//         description: {
-//             story: `When the information has been processed successfully we provide a clear indication in the UI to the user.
-//             The spinner changes to a checkmark icon with a new description indicating what happened. Use the main success color.`
-//         },
-//     },
-// };
diff --git a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
index 6aac1dc58..886acc60f 100644
--- a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
+++ b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
@@ -5,13 +5,12 @@ import React from 'react';
 
 import { Box, CircularProgress, CircularProgressProps } from '@mui/material';
 
+/**
+ * The {@link LoadingSpinner} component is used to display a loading spinner.
+ * @param {CircularProgress} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinner} component.
+ */
 export const LoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 1, p: 2 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', p: 2 }}>
         <CircularProgress {...props} />
     </Box>;
-
-// TODO: Move this to a separate component.
-export const FullPageLoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
-        <LoadingSpinner {...props} />
-    </Box>;
diff --git a/Source/DesignSystem/atoms/LoadingSpinner/index.ts b/Source/DesignSystem/atoms/LoadingSpinner/index.ts
index 3f630ad8a..ff5fa9336 100644
--- a/Source/DesignSystem/atoms/LoadingSpinner/index.ts
+++ b/Source/DesignSystem/atoms/LoadingSpinner/index.ts
@@ -1,4 +1,4 @@
 // Copyright (c) Dolittle. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { FullPageLoadingSpinner, LoadingSpinner } from './LoadingSpinner';
+export { LoadingSpinner } from './LoadingSpinner';
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx
new file mode 100644
index 000000000..1cdcf34ee
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { componentStories, LoadingSpinnerFullPage } from '../../index';
+
+const { metadata, createStory } = componentStories(LoadingSpinnerFullPage);
+
+// TODO: Update component to improve text.
+
+metadata.parameters = {
+    docs: {
+        description: {
+            component: `A loading spinner is a progress indicator used to inform users about the status of ongoing processes, 
+        such as loading data or submitting a form. Provide a descriptive label that indicates the status to the user. 
+        By default, loading spinners are in an indeterminate state.` },
+    },
+    layout: 'centered',
+};
+
+export default metadata;
+
+export const Default = createStory();
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx
new file mode 100644
index 000000000..e29395cab
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { Box, CircularProgressProps } from '@mui/material';
+
+import { LoadingSpinner } from '../../index';
+
+/**
+ * The {@link LoadingSpinnerFullPage} component is used to display a loading spinner full page.
+ * @param {LoadingSpinnerFullPage} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinnerFullPage} component.
+ */
+export const LoadingSpinnerFullPage = (props: CircularProgressProps) =>
+    createPortal(
+        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
+            <LoadingSpinner {...props} />
+        </Box>,
+        document.body,
+    );
diff --git a/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts
new file mode 100644
index 000000000..828997cc3
--- /dev/null
+++ b/Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { LoadingSpinnerFullPage } from './LoadingSpinnerFullPage';
diff --git a/Source/DesignSystem/index.ts b/Source/DesignSystem/index.ts
index acd278275..c169ca814 100644
--- a/Source/DesignSystem/index.ts
+++ b/Source/DesignSystem/index.ts
@@ -17,7 +17,8 @@ export * from './atoms/Forms';
 export { Icon, IconProps } from './atoms/Icon';
 export { IconButton, IconButtonProps } from './atoms/IconButton';
 export { Link, LinkProps } from './atoms/Link';
-export { FullPageLoadingSpinner, LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinnerFullPage } from './atoms/LoadingSpinnerFullPage';
 export { StatusIndicator, StatusIndicatorProps } from './atoms/StatusIndicator';
 export { Summary } from './atoms/Metrics';
 export { Tabs } from './atoms/Tabs';
diff --git a/Source/SelfService/Web/apis/solutions/api.ts b/Source/SelfService/Web/apis/solutions/api.ts
index e9547eb65..23711f8fd 100644
--- a/Source/SelfService/Web/apis/solutions/api.ts
+++ b/Source/SelfService/Web/apis/solutions/api.ts
@@ -105,6 +105,12 @@ export type SimpleIngressPath = {
     pathType: string;
 };
 
+export type InputEditMicroservice = {
+    displayName: string;
+    headImage: string;
+    runtimeImage: string;
+};
+
 export type InputEnvironmentVariable = {
     name: string;
     value: string;
@@ -158,20 +164,18 @@ export function getRuntimes(): LatestRuntimeInfo[] {
         {
             image: 'dolittle/runtime:6.2.4',
             changelog: 'https://github.com/dolittle/Runtime/releases/tag/v6.2.4',
-        }
+        },
     ];
 };
 
-// getMicroservices by applicationId
 export async function getMicroservices(applicationId: string): Promise<HttpResponseMicroservices> {
-    // TODO {"message":"open /tmp/dolittle-k8s/508c1745-5f2a-4b4c-b7a5-2fbb1484346d/11b6cf47-5d9f-438f-8116-0d9828654657/application.json: no such file or directory"}
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/microservices`;
 
     const result = await fetch(
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponseMicroservices = await result.json();
@@ -179,19 +183,6 @@ export async function getMicroservices(applicationId: string): Promise<HttpRespo
     return jsonResult;
 };
 
-export async function deleteMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
-    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
-
-    const result = await fetch(
-        url,
-        {
-            method: 'DELETE',
-            mode: 'cors'
-        });
-
-    return result.status === 200;
-};
-
 export async function saveMicroservice(input: any): Promise<any> {
     const url = `${getServerUrlPrefix()}/microservice`;
 
@@ -202,25 +193,42 @@ export async function saveMicroservice(input: any): Promise<any> {
             body: JSON.stringify(input),
             mode: 'cors',
             headers: {
-                'content-type': 'application/json'
-            }
+                'content-type': 'application/json',
+            },
         });
 
     const text = await response.text();
 
     if (!response.ok) {
         let jsonResponse;
+
         try {
             jsonResponse = JSON.parse(text);
         } catch (error) {
             throw new Exception(`Couldn't parse the error message. The error was ${error}. Response Status ${response.status}. Response Body ${text}`);
-        }
-        throw new Exception(jsonResponse.message);
+        } throw new Exception(jsonResponse.message);
     };
 
     return JSON.parse(text);
 };
 
+export async function editMicroservice(applicationId: string, environment: string, microserviceId: string, input: InputEditMicroservice): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
+
+    const response = await fetch(
+        url,
+        {
+            method: 'PATCH',
+            body: JSON.stringify(input),
+            mode: 'cors',
+            headers: {
+                'content-type': 'application/json',
+            },
+        });
+
+    return response.status === 200;
+};
+
 export async function restartMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment.toLowerCase()}/microservice/${microserviceId}/restart`;
 
@@ -228,12 +236,25 @@ export async function restartMicroservice(applicationId: string, environment: st
         url,
         {
             method: 'DELETE',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     return response.status === 200;
 };
 
+export async function deleteMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
+
+    const result = await fetch(
+        url,
+        {
+            method: 'DELETE',
+            mode: 'cors',
+        });
+
+    return result.status === 200;
+};
+
 export async function getPodStatus(applicationId: string, environment: string, microserviceId: string): Promise<HttpResponsePodStatus> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment.toLowerCase()}/microservice/${microserviceId}/podstatus`;
 
@@ -241,7 +262,7 @@ export async function getPodStatus(applicationId: string, environment: string, m
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponsePodStatus = await result.json();
@@ -260,7 +281,7 @@ export async function getPodLogs(applicationId: string, podName: string, contain
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponsePodLog = await result.json();
@@ -275,7 +296,7 @@ export async function getEnvironmentVariables(applicationId: string, environment
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const data = await response.json();
@@ -287,7 +308,7 @@ export async function updateEnvironmentVariables(applicationId: string, environm
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment}/microservice/${microserviceId}/environment-variables`;
 
     const data = {
-        data: input
+        data: input,
     } as HttpInputEnvironmentVariables;
 
     const response = await fetch(
@@ -297,8 +318,8 @@ export async function updateEnvironmentVariables(applicationId: string, environm
             body: JSON.stringify(data),
             mode: 'cors',
             headers: {
-                'content-type': 'application/json'
-            }
+                'content-type': 'application/json',
+            },
         });
 
     return response.status === 200;
@@ -335,12 +356,11 @@ export async function updateConfigFile(applicationId: string, environment: strin
     return response.status === 200 ? { success: true } : { success: false, error: parsedResponse.message };
 };
 
-
 export async function deleteConfigFile(applicationId: string, environment: string, microserviceId: string, fileName: string): Promise<boolean> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment}/microservice/${microserviceId}/config-files`;
 
     const data = {
-        key: fileName
+        key: fileName,
     } as HttpInputDeleteConfigFile;
 
     const response = await fetch(
@@ -348,7 +368,7 @@ export async function deleteConfigFile(applicationId: string, environment: strin
         {
             method: 'DELETE',
             mode: 'cors',
-            body: JSON.stringify(data)
+            body: JSON.stringify(data),
         });
 
     return response.status === 200;
@@ -359,12 +379,12 @@ export async function parseJSONResponse(response: any): Promise<any> {
 
     if (!response.ok) {
         let jsonResponse;
+
         try {
             jsonResponse = JSON.parse(text);
         } catch (error) {
             throw Error(`Couldn't parse the error message. The error was ${error}. Response Status ${response.status}. Response Body ${text}`);
-        }
-        throw Error(jsonResponse.message);
+        } throw Error(jsonResponse.message);
     };
 
     const data = JSON.parse(text);
diff --git a/Source/SelfService/Web/apis/solutions/application.ts b/Source/SelfService/Web/apis/solutions/application.ts
index b39186219..5e7458884 100644
--- a/Source/SelfService/Web/apis/solutions/application.ts
+++ b/Source/SelfService/Web/apis/solutions/application.ts
@@ -78,7 +78,6 @@ export async function getPersonalisedInfo(applicationId: string): Promise<any> {
     return jsonResult;
 };
 
-
 export async function createApplication(input: HttpApplicationRequest): Promise<JobInfo | any> {
     const url = `${getServerUrlPrefix()}/application`;
 
@@ -142,7 +141,6 @@ export async function getApplications(): Promise<HttpResponseApplications> {
     return jsonResult;
 };
 
-
 export async function getApplicationsListing(): Promise<HttpResponseApplicationsListing> {
     const applicationsWithEnvironment = await getApplications();
 
@@ -154,7 +152,7 @@ export async function getApplicationsListing(): Promise<HttpResponseApplications
         canCreateApplication: applicationsWithEnvironment.canCreateApplication,
         applications: Array.from(uniqueApplications.values()),
     };
-}
+};
 
 export async function getApplication(applicationId: string): Promise<HttpResponseApplication> {
     const url = `${getServerUrlPrefix()}/application/${applicationId}`;
@@ -171,7 +169,7 @@ export async function getApplication(applicationId: string): Promise<HttpRespons
 
     jsonResult.environments.map(environment => {
         environment.connections = environment.connections || {
-            m3Connector: false
+            m3Connector: false,
         };
 
         return environment;
@@ -180,7 +178,6 @@ export async function getApplication(applicationId: string): Promise<HttpRespons
     return jsonResult;
 };
 
-
 export async function getAdminApplicationAccess(customerId: string, applicationId: string): Promise<HttpResponseApplicationAccess> {
     const url = `${getServerUrlPrefix()}/admin/customer/${customerId}/application/${applicationId}/access/users`;
 
diff --git a/Source/SelfService/Web/apis/solutions/containerregistry.ts b/Source/SelfService/Web/apis/solutions/containerregistry.ts
index 20969baa8..33701fdb3 100644
--- a/Source/SelfService/Web/apis/solutions/containerregistry.ts
+++ b/Source/SelfService/Web/apis/solutions/containerregistry.ts
@@ -4,15 +4,14 @@
 import { Image } from '@fluentui/react';
 import { getServerUrlPrefix } from './api';
 
-
 export type HTTPResponseImages = {
     url: string,
-    images: string[]
+    images: string[],
 };
 
 export type ContainerRegistryImages = {
     url: string,
-    images: Image[]
+    images: Image[],
 };
 
 export type Image = {
@@ -24,12 +23,12 @@ export type Tag = {
     createdTime: Date,
     lastUpdateTime: Date,
     digest: string,
-    signed: boolean
+    signed: boolean,
 };
 
 export type ContainerRegistryTags = {
     name: string,
-    tags: Tag[]
+    tags: Tag[],
 };
 
 export type HTTPResponseTag = {
@@ -37,12 +36,12 @@ export type HTTPResponseTag = {
     createdTime: string,
     lastUpdateTime: string,
     digest: string,
-    signed: boolean
+    signed: boolean,
 };
 
 export type HTTPResponseTags = {
     name: string,
-    tags: HTTPResponseTag[]
+    tags: HTTPResponseTag[],
 };
 
 export async function getTagsInContainerRegistry(applicationId: string, image: string): Promise<ContainerRegistryTags> {
@@ -52,8 +51,9 @@ export async function getTagsInContainerRegistry(applicationId: string, image: s
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
+
     const jsonResult = await result.json() as HTTPResponseTags;
 
     const items = jsonResult.tags.map(n => {
@@ -62,7 +62,7 @@ export async function getTagsInContainerRegistry(applicationId: string, image: s
             createdTime: new Date(n.createdTime),
             lastUpdateTime: new Date(n.lastUpdateTime),
             digest: n.digest,
-            signed: n.signed
+            signed: n.signed,
         };
     });
 
@@ -70,7 +70,7 @@ export async function getTagsInContainerRegistry(applicationId: string, image: s
         name: image,
         tags: items,
     };
-}
+};
 
 export async function getReposInContainerRegistry(applicationId: string): Promise<ContainerRegistryImages> {
     const url = `${getServerUrlPrefix()}/application/${applicationId}/containerregistry/images`;
@@ -79,16 +79,19 @@ export async function getReposInContainerRegistry(applicationId: string): Promis
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
+
     const jsonResult = await result.json() as HTTPResponseImages;
+
     const theResult = jsonResult.images.map(n => {
         return {
-            name: n
+            name: n,
         };
     });
+
     return {
         url: jsonResult.url,
-        images: theResult
+        images: theResult,
     };
-}
+};
diff --git a/Source/SelfService/Web/apis/solutions/studio.ts b/Source/SelfService/Web/apis/solutions/studio.ts
index d60c13823..6aa4b68dd 100644
--- a/Source/SelfService/Web/apis/solutions/studio.ts
+++ b/Source/SelfService/Web/apis/solutions/studio.ts
@@ -17,15 +17,15 @@ export async function getStudioConfig(customerID: string): Promise<Studio> {
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     return parseJSONResponse(response);
-}
+};
 
 export async function saveStudioConfig(customerID: string, config: Studio): Promise<boolean> {
     const url = `${getServerUrlPrefix()}/studio/customer/${customerID}`;
-    console.log(JSON.stringify(config));
+
     const response = await fetch(
         url,
         {
@@ -34,8 +34,8 @@ export async function saveStudioConfig(customerID: string, config: Studio): Prom
             body: JSON.stringify(config),
             headers: {
                 'content-type': 'application/json'
-            }
+            },
         });
 
     return response.status === 200;
-}
+};
diff --git a/Source/SelfService/Web/applications/microservice/components/form/containerImageFields.tsx b/Source/SelfService/Web/applications/microservice/components/form/containerImageFields.tsx
index c2bcfec24..95de8c654 100644
--- a/Source/SelfService/Web/applications/microservice/components/form/containerImageFields.tsx
+++ b/Source/SelfService/Web/applications/microservice/components/form/containerImageFields.tsx
@@ -27,10 +27,11 @@ const EntrypointDescription = () =>
 
 export type ContainerImageFieldsProps = {
     hasDashedBorder?: boolean;
+    isEditMode?: boolean;
     isDisabled?: boolean;
 };
 
-export const ContainerImageFields = ({ hasDashedBorder, isDisabled }: ContainerImageFieldsProps) =>
+export const ContainerImageFields = ({ hasDashedBorder, isEditMode, isDisabled }: ContainerImageFieldsProps) =>
     <Stack sx={{ mb: 4 }}>
         <Typography variant='subtitle2' sx={{ mb: 2 }}>Container Image Settings</Typography>
 
@@ -39,7 +40,7 @@ export const ContainerImageFields = ({ hasDashedBorder, isDisabled }: ContainerI
                 id='headImage'
                 label='Image Name'
                 dashedBorder={hasDashedBorder}
-                disabled={isDisabled}
+                disabled={isEditMode}
                 required='Provide an image name.'
                 sx={{ width: 1, maxWidth: 500, minWidth: 220 }}
             />
diff --git a/Source/SelfService/Web/applications/microservice/components/form/setupFields.tsx b/Source/SelfService/Web/applications/microservice/components/form/setupFields.tsx
index a68a93d47..365f40d5f 100644
--- a/Source/SelfService/Web/applications/microservice/components/form/setupFields.tsx
+++ b/Source/SelfService/Web/applications/microservice/components/form/setupFields.tsx
@@ -28,11 +28,12 @@ const runtimeDescription = `By using the Dolittle runtime you'll have access to
 export type SetupFieldsProps = {
     environments: string[];
     hasDashedBorder?: boolean;
+    isEditMode?: boolean;
     isDisabled?: boolean;
     onEnvironmentSelect?: (environment: string) => void;
 };
 
-export const SetupFields = ({ environments, hasDashedBorder, isDisabled, onEnvironmentSelect }: SetupFieldsProps) => {
+export const SetupFields = ({ environments, hasDashedBorder, isEditMode, isDisabled, onEnvironmentSelect }: SetupFieldsProps) => {
     const [showEnvironmentInfo, setShowEnvironmentInfo] = useState(false);
     const [showEntrypointInfo, setShowEntrypointInfo] = useState(false);
 
@@ -80,7 +81,7 @@ export const SetupFields = ({ environments, hasDashedBorder, isDisabled, onEnvir
                     options={runtimeNumberOptions}
                     onOpen={() => setShowEntrypointInfo(true)}
                     required
-                    disabled={isDisabled}
+                    disabled={isEditMode}
                     sx={hasDashedBorder ? { '& fieldset': { borderStyle: 'dashed' } } : {}}
                 />
             </Tooltip>
diff --git a/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx b/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
index fdf3d6b30..3a6c8fdf3 100644
--- a/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
+++ b/Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx
@@ -10,7 +10,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Typography } from '@mui/material';
 
-import { Button, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { saveSimpleMicroservice } from '../../stores/microservice';
 
@@ -91,7 +91,8 @@ export const DeployMicroservice = ({ application }: DeployMicroserviceProps) =>
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
+
             <Typography variant='h1' sx={{ mt: 3, mb: 4 }}>Deploy Base Microservice</Typography>
 
             <Form<MicroserviceFormParameters>
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/headerButtons.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/headerButtons.tsx
deleted file mode 100644
index 03ca2858f..000000000
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/headerButtons.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// Copyright (c) Dolittle. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-
-import { Box, Tooltip } from '@mui/material';
-
-import { Button } from '@dolittle/design-system';
-
-const styles = {
-    display: 'flex',
-    flexDirection: { xs: 'column', md: 'row' },
-    alignItems: 'start',
-    mb: 2,
-    button: { mr: 2.5, mb: 1 },
-};
-
-type HeaderButtonsProps = {
-    handleRestartDialog: () => void;
-    handleDeleteDialog: () => void;
-    disabled?: boolean;
-};
-
-export const HeaderButtons = ({ handleRestartDialog, handleDeleteDialog, disabled }: HeaderButtonsProps) =>
-    <Box sx={styles}>
-        <Tooltip title='Coming soon!' placement='top' arrow>
-            <span>
-                <Button
-                    label='edit'
-                    disabled={disabled}
-                    startWithIcon='EditRounded'
-                //onClick={() => setFormIsNotEditable(false)}
-                />
-            </span>
-        </Tooltip>
-        <Tooltip title='Coming soon!' placement='top' arrow>
-            <span>
-                <Button
-                    label='save'
-                    disabled={disabled}
-                    startWithIcon='SaveRounded'
-                //onClick={() => setFormIsNotEditable(true)}
-                />
-            </span>
-        </Tooltip>
-        <Button
-            label='Restart Microservice'
-            startWithIcon='RestartAltRounded'
-            onClick={handleRestartDialog}
-        />
-        <Button
-            label='Delete Microservice'
-            startWithIcon='DeleteRounded'
-            onClick={handleDeleteDialog}
-        />
-    </Box>;
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
index b8a65f7db..843914067 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx
@@ -6,11 +6,14 @@ import React, { useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
 
-import { Accordion, AlertDialog, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { Box } from '@mui/material';
+
+import { AlertDialog, Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { canDeleteMicroservice, deleteMicroservice, MicroserviceStore } from '../../../../stores/microservice';
 
 import { HttpResponseApplication } from '../../../../../apis/solutions/application';
+import { editMicroservice, InputEditMicroservice } from '../../../../../apis/solutions/api';
 import { MicroserviceFormParameters } from '../../../../../apis/solutions/index';
 
 import { ContainerImageFields } from '../../../components/form/containerImageFields';
@@ -19,9 +22,6 @@ import { PublicUrlFields } from '../../../components/form/publicUrlFields';
 import { RestartMicroserviceDialog } from '../../../components/restartMicroserviceDialog';
 import { SetupFields } from '../../../components/form/setupFields';
 
-import { HeaderButtons } from './headerButtons';
-import { getRuntimeNumberFromString } from '../../../../../utils/helpers';
-
 export type SetupSectionProps = {
     application: HttpResponseApplication;
     currentMicroservice: MicroserviceStore;
@@ -33,7 +33,7 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
 
     const [deleteDialogIsOpen, setDeleteDialogIsOpen] = useState(false);
     const [restartDialogIsOpen, setRestartDialogIsOpen] = useState(false);
-    const [formIsNotEditable, setFormIsNotEditable] = useState(true);
+    const [editMicroserviceMode, setEditMicroserviceMode] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
 
     const applicationId = application.id;
@@ -41,15 +41,11 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
     const microserviceEnvironment = currentMicroservice.environment;
     const microserviceName = currentMicroservice.name;
     const microserviceInfo = currentMicroservice.edit?.extra;
-    const canDelete = canDeleteMicroservice(application.environments, microserviceEnvironment, microserviceId);
-
-    const currentRuntimeImageNumber = {
-        value: microserviceInfo?.runtimeImage,
-        displayValue: getRuntimeNumberFromString(microserviceInfo?.runtimeImage)
-    };
 
+    const canDelete = canDeleteMicroservice(application.environments, microserviceEnvironment, microserviceId);
     const availableEnvironments = application.environments.map(env => env.name);
 
+    const currentRuntimeImageNumber = microserviceInfo?.runtimeImage;
     const hasPublicUrl = microserviceInfo?.isPublic || false;
     const hasM3ConnectorOption = application.environments.find(env => env.name === microserviceEnvironment)?.connections?.m3Connector || false;
     // Remove extra slash from ingress path as it is there already with startAdornment.
@@ -57,32 +53,53 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
     // Convert the head arguments to the format that the form expects.
     const headArgumentValues = microserviceInfo?.headCommand?.args?.map((arg: string) => ({ value: arg })) || [];
 
-    const handleMicroserviceDelete = async () => {
+    const handleMicroserviceEdit = async ({ microserviceName, headImage, runtimeVersion }: MicroserviceFormParameters) => {
+        if (microserviceName === currentMicroservice.name && headImage === microserviceInfo?.headImage && runtimeVersion === currentRuntimeImageNumber) {
+            return;
+        }
+
         setIsLoading(true);
-        setDeleteDialogIsOpen(false);
 
+        const editedMicroservice: InputEditMicroservice = {
+            displayName: microserviceName,
+            headImage,
+            runtimeImage: runtimeVersion,
+        };
+
+        try {
+            await editMicroservice(applicationId, microserviceEnvironment, microserviceId, editedMicroservice);
+            enqueueSnackbar(`Microservice '${microserviceName}' has been updated.`);
+        } catch (error) {
+            enqueueSnackbar(`Failed to update microservice '${microserviceName}'.`, { variant: 'error' });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleMicroserviceDelete = async () => {
         if (!canDelete) {
             enqueueSnackbar('Deleting microservice is disabled.', { variant: 'error' });
             return;
         }
 
-        const success = await deleteMicroservice(applicationId, microserviceEnvironment, microserviceId);
+        setIsLoading(true);
+        setDeleteDialogIsOpen(false);
 
-        if (!success) {
+        try {
+            await deleteMicroservice(applicationId, microserviceEnvironment, microserviceId);
+            enqueueSnackbar(`Microservice '${microserviceName}' has been deleted.`);
+            const href = `/microservices/application/${applicationId}/overview`;
+            navigate(href);
+        } catch (error) {
             enqueueSnackbar(`Failed to delete microservice '${microserviceName}'.`, { variant: 'error' });
+        } finally {
             setIsLoading(false);
-            return;
         }
-
-        enqueueSnackbar(`Microservice '${microserviceName}' has been deleted.`);
-        const href = `/microservices/application/${applicationId}/overview`;
-        navigate(href);
-        setIsLoading(false);
     };
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <AlertDialog
                 id='delete-microservice'
@@ -105,37 +122,34 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
                 handleSuccess={() => window.location.reload()}
             />
 
-            <Accordion id='setup-accordion' title='Configuration Setup' defaultExpanded>
-                <HeaderButtons
-                    handleRestartDialog={() => setRestartDialogIsOpen(true)}
-                    handleDeleteDialog={() => setDeleteDialogIsOpen(true)}
-                    disabled={formIsNotEditable}
-                />
-
-                <Form<MicroserviceFormParameters>
-                    initialValues={{
-                        microserviceName,
-                        developmentEnvironment: microserviceEnvironment,
-                        runtimeVersion: currentRuntimeImageNumber.value,
-                        headImage: microserviceInfo?.headImage,
-                        headPort: microserviceInfo?.headPort,
-                        entrypoint: '',
-                        isPublic: hasPublicUrl,
-                        headArguments: headArgumentValues,
-                        ingressPath: cleanedIngressPath,
-                        hasM3Connector: hasM3ConnectorOption,
-                    }}
-                    sx={{ '& .MuiFormControl-root': { my: 1 } }}
-                >
-                    <SetupFields environments={availableEnvironments} hasDashedBorder isDisabled={formIsNotEditable} />
-
-                    <ContainerImageFields hasDashedBorder isDisabled={formIsNotEditable} />
-
-                    <PublicUrlFields hasDashedBorder hasPublicUrl={hasPublicUrl} isDisabled={formIsNotEditable} />
-
-                    {hasM3ConnectorOption && <HasM3ConnectorField isDisabled={formIsNotEditable} />}
-                </Form>
-            </Accordion>
+            <Form<MicroserviceFormParameters>
+                initialValues={{
+                    microserviceName,
+                    developmentEnvironment: microserviceEnvironment,
+                    runtimeVersion: currentRuntimeImageNumber,
+                    headImage: microserviceInfo?.headImage,
+                    headPort: microserviceInfo?.headPort,
+                    entrypoint: '',
+                    isPublic: hasPublicUrl,
+                    headArguments: headArgumentValues,
+                    ingressPath: cleanedIngressPath,
+                    hasM3Connector: hasM3ConnectorOption,
+                }}
+                onSubmit={handleMicroserviceEdit}
+                sx={{ 'ml': 2, '& .MuiFormControl-root': { my: 1 } }}
+            >
+                <Box sx={{ 'mb': 3, '& button': { 'mr': 2, ':last-of-type': { mr: 0 } } }}>
+                    <Button label='edit' disabled={editMicroserviceMode} startWithIcon='EditRounded' onClick={() => setEditMicroserviceMode(true)} />
+                    <Button label='save' type='submit' disabled={!editMicroserviceMode} startWithIcon='SaveRounded' onClick={() => setEditMicroserviceMode(false)} />
+                    <Button label='Restart Microservice' startWithIcon='RestartAltRounded' onClick={() => setRestartDialogIsOpen(true)} />
+                    <Button label='Delete Microservice' startWithIcon='DeleteRounded' onClick={() => setDeleteDialogIsOpen(true)} />
+                </Box>
+
+                <SetupFields environments={availableEnvironments} hasDashedBorder isEditMode={!editMicroserviceMode} isDisabled />
+                <ContainerImageFields hasDashedBorder isEditMode={!editMicroserviceMode} isDisabled />
+                <PublicUrlFields hasDashedBorder hasPublicUrl={hasPublicUrl} isDisabled />
+                {hasM3ConnectorOption && <HasM3ConnectorField isDisabled />}
+            </Form>
         </>
     );
 };
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
index bb8e83ada..6842b7f2f 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx
@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react';
 
 import { MicroserviceStore } from '../../../stores/microservice';
 
-import { AlertBox, AlertBoxErrorMessage, Button, FullPageLoadingSpinner, Graph } from '@dolittle/design-system';
+import { AlertBox, AlertBoxErrorMessage, Button, Graph } from '@dolittle/design-system';
 
 import { ContainerStatusInfo, HttpResponsePodStatus } from '../../../../apis/solutions/api';
 
diff --git a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceDetails.tsx b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceDetails.tsx
index 0bee58555..6ed8b84a9 100644
--- a/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceDetails.tsx
+++ b/Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceDetails.tsx
@@ -51,55 +51,59 @@ export const MicroserviceDetails = ({ application, currentMicroservice }: Micros
     const podsStatuses = () => podsData.pods.flatMap(pod => pod.containers.map(container => container.state));
     const microserviceHealthStatus = getContainerStatus(podsStatuses());
 
-    // What is the purpose of this??
-    const canEdit = canEditMicroservice(application.environments, microserviceEnvironment, microserviceId);
-    let ms = {} as MicroserviceSimple;
-    let hasEditData = false;
-    if (canEdit) {
-        hasEditData = true;
-        ms = currentMicroservice.edit;
-    }
+    // // What is the purpose of this??
+
+    // const canEdit = canEditMicroservice(application.environments, microserviceEnvironment, microserviceId);
+
+    // let ms = {} as MicroserviceSimple;
+
+    // let hasEditData = false;
+
+    // if (canEdit) {
+    //     hasEditData = true;
+    //     ms = currentMicroservice.edit;
+    // }
 
     // Does this ever run??
-    if (!hasEditData) {
-        // Can I not move this to the store?
-        const headImage = currentMicroservice.live.images.find(img => img.name === 'head')?.image
-            || 'N/A';
-        const runtimeImage = currentMicroservice.live.images.find(img => img.name === 'runtime')?.image
-            || 'N/A';
-
-        const headCommand = {
-            command: [],
-            args: [],
-        };
-
-        const environmentInfo = application.environments.find(environment => environment.name === microserviceEnvironment)!;
-
-        // TODO currently we don't use the ms.extra.ingress in the view
-        // Look to "liveIngressView" for how we "set" the data to uniq paths
-        ms = {
-            dolittle: {
-                applicationId,
-                customerId: application.customerId,
-                microserviceId,
-            },
-            name: microserviceName,
-            kind: 'unknown',
-            environment: microserviceEnvironment,
-            extra: {
-                ingress: {
-                    path: '',
-                    pathType: '',
-                },
-                headPort: 80,
-                isPublic: true,
-                headImage,
-                runtimeImage,
-                headCommand,
-                connections: environmentInfo.connections,
-            },
-        };
-    }
+    // if (!hasEditData) {
+    //     // Can I not move this to the store?
+    //     const headImage = currentMicroservice.live.images.find(img => img.name === 'head')?.image
+    //         || 'N/A';
+    //     const runtimeImage = currentMicroservice.live.images.find(img => img.name === 'runtime')?.image
+    //         || 'N/A';
+
+    //     const headCommand = {
+    //         command: [],
+    //         args: [],
+    //     };
+
+    //     const environmentInfo = application.environments.find(environment => environment.name === microserviceEnvironment)!;
+
+    //     // TODO currently we don't use the ms.extra.ingress in the view
+    //     // Look to "liveIngressView" for how we "set" the data to uniq paths
+    //     ms = {
+    //         dolittle: {
+    //             applicationId,
+    //             customerId: application.customerId,
+    //             microserviceId,
+    //         },
+    //         name: microserviceName,
+    //         kind: 'unknown',
+    //         environment: microserviceEnvironment,
+    //         extra: {
+    //             ingress: {
+    //                 path: '',
+    //                 pathType: '',
+    //             },
+    //             headPort: 80,
+    //             isPublic: true,
+    //             headImage,
+    //             runtimeImage,
+    //             headCommand,
+    //             connections: environmentInfo.connections,
+    //         },
+    //     };
+    // }
 
     const tabs = [
         {
diff --git a/Source/SelfService/Web/applications/stores/documentationInfo.ts b/Source/SelfService/Web/applications/stores/documentationInfo.ts
index e3c0fb5ce..f30b4cb34 100644
--- a/Source/SelfService/Web/applications/stores/documentationInfo.ts
+++ b/Source/SelfService/Web/applications/stores/documentationInfo.ts
@@ -1,9 +1,9 @@
 // Copyright (c) Dolittle. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
 import { writable } from 'use-svelte-store';
-import {
-    getPersonalisedInfo,
-} from '../../apis/solutions/application';
+
+import { getPersonalisedInfo } from '../../apis/solutions/application';
 
 export interface Info {
     containerRegistryName: string;
@@ -25,18 +25,18 @@ export interface ResourceRule {
     apiGroups: string[];
     resources: string[];
     resourceNames: string[];
-}
+};
 
 export interface NonResourceRule {
     verbs: string[];
     nonResourceURLs: string[];
-}
+};
 
 export interface SubjectRulesReviewStatus {
     resourceRules: ResourceRule[];
     nonResourceRules: NonResourceRule[];
     incomplete: boolean;
-}
+};
 
 const data = {
     data: {
@@ -62,7 +62,7 @@ export const info = writable(data.data);
 export const isLoaded = writable(data.isLoaded);
 export const load = (applicationId: string) => {
     Promise.all([
-        getPersonalisedInfo(applicationId)
+        getPersonalisedInfo(applicationId),
     ]).then(values => {
         const data = values[0];
         data.applicationId = applicationId;
@@ -70,5 +70,3 @@ export const load = (applicationId: string) => {
         isLoaded.set(true);
     });
 };
-
-
diff --git a/Source/SelfService/Web/index.ejs b/Source/SelfService/Web/index.ejs
index d7f7fdb51..fe92c5c80 100644
--- a/Source/SelfService/Web/index.ejs
+++ b/Source/SelfService/Web/index.ejs
@@ -17,7 +17,7 @@
         <link rel="icon" href="favicon.ico">
     </head>
 
-    <body style="background-color: #0F1014">
+    <body style="background-color: #0F1014; position: relative">
         <div id="root"></div>
         <% if (htmlWebpackPlugin.options.metadata.server) { %>
             <!-- Webpack Dev Server reload -->
diff --git a/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx b/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
index 087c0b1b9..7bc237133 100644
--- a/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
+++ b/Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx
@@ -9,7 +9,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Stack, Typography } from '@mui/material';
 
-import { Checkbox, DialogForm, FullPageLoadingSpinner, Input } from '@dolittle/design-system';
+import { Checkbox, DialogForm, LoadingSpinnerFullPage, Input } from '@dolittle/design-system';
 
 import { createApplication, HttpApplicationRequest } from '../../apis/solutions/application';
 
@@ -90,7 +90,7 @@ export const ApplicationCreateDialog = ({ isOpen, onClose }: ApplicationCreateDi
             onCancel={onClose}
             onConfirm={handleSpaceCreate}
         >
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <Typography variant='body1' sx={{ my: 2 }}>Provide a name for your new application.</Typography>
             <Input