diff --git a/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap b/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap
index 7fcf9dc024..55a4015dff 100644
--- a/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap
+++ b/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap
@@ -43,77 +43,22 @@ exports[`renders correctly with permissions 1`] = `
 `;
 
 exports[`renders correctly without permission 1`] = `
-<div
-  className="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
-  style={
-    Object {
-      "borderRadius": "10px",
-      "boxShadow": "none",
-    }
-  }
->
+<div>
+  <p>
+    Loading...
+  </p>
   <div
-    className="makeStyles-headerContainer-1"
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+    role="progressbar"
   >
     <div
-      className="makeStyles-headerTitleContainer-5"
-    >
-      <div
-        className=""
-        data-loading={true}
-      >
-        <h2
-          className="MuiTypography-root makeStyles-headerTitle-6 MuiTypography-h2"
-        >
-          <span
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-              }
-            }
-          >
-            <div
-              className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
-              style={
-                Object {
-                  "marginRight": "8px",
-                }
-              }
-            >
-              <span
-                aria-hidden={true}
-                className="material-icons MuiIcon-root"
-              >
-                apps
-              </span>
-            </div>
-          </span>
-        </h2>
-      </div>
-      <div
-        className="makeStyles-headerActions-7"
-      />
-    </div>
-  </div>
-  <div
-    className="makeStyles-bodyContainer-2"
-  >
-    <div>
-      <p
-        className="MuiTypography-root MuiTypography-body1"
-      >
-        
-      </p>
-      <p
-        className="MuiTypography-root MuiTypography-body2"
-      >
-        Created: 
-        <strong>
-          02/02/2022
-        </strong>
-      </p>
-    </div>
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+      style={Object {}}
+    />
+    <div
+      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+      style={Object {}}
+    />
   </div>
 </div>
 `;
diff --git a/frontend/src/component/application/__tests__/application-edit-component-test.js b/frontend/src/component/application/__tests__/application-edit-component-test.js
index bceb3822aa..7a48f3e00a 100644
--- a/frontend/src/component/application/__tests__/application-edit-component-test.js
+++ b/frontend/src/component/application/__tests__/application-edit-component-test.js
@@ -1,26 +1,29 @@
 import { ThemeProvider } from '@material-ui/core';
-import ApplicationEdit from '../ApplicationEdit/ApplicationEdit';
+import { ApplicationEdit } from '../ApplicationEdit/ApplicationEdit';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
 import { ADMIN } from '../../providers/AccessProvider/permissions';
 import theme from '../../../themes/main-theme';
 import { createFakeStore } from '../../../accessStoreFake';
 import AccessProvider from '../../providers/AccessProvider/AccessProvider';
+import UIProvider from '../../providers/UIProvider/UIProvider';
 
 test('renders correctly if no application', () => {
     const tree = renderer
         .create(
             <AccessProvider store={createFakeStore([{ permission: ADMIN }])}>
                 <ThemeProvider theme={theme}>
-                    <MemoryRouter initialEntries={['/test']}>
-                        <ApplicationEdit
-                            fetchApplication={() => Promise.resolve({})}
-                            storeApplicationMetaData={jest.fn()}
-                            deleteApplication={jest.fn()}
-                            history={{}}
-                            locationSettings={{ locale: 'en-GB' }}
-                        />
-                    </MemoryRouter>
+                    <UIProvider>
+                        <MemoryRouter initialEntries={['/test']}>
+                            <ApplicationEdit
+                                fetchApplication={() => Promise.resolve({})}
+                                storeApplicationMetaData={jest.fn()}
+                                deleteApplication={jest.fn()}
+                                history={{}}
+                                locationSettings={{ locale: 'en-GB' }}
+                            />
+                        </MemoryRouter>
+                    </UIProvider>
                 </ThemeProvider>
             </AccessProvider>
         )
@@ -34,54 +37,56 @@ test('renders correctly without permission', () => {
         .create(
             <MemoryRouter>
                 <ThemeProvider theme={theme}>
-                    <AccessProvider store={createFakeStore([])}>
-                        <ApplicationEdit
-                            fetchApplication={() => Promise.resolve({})}
-                            storeApplicationMetaData={jest.fn()}
-                            deleteApplication={jest.fn()}
-                            history={{}}
-                            application={{
-                                appName: 'test-app',
-                                instances: [
-                                    {
-                                        instanceId: 'instance-1',
-                                        clientIp: '123.123.123.123',
-                                        lastSeen: '2017-02-23T15:56:49',
-                                        sdkVersion: '4.0',
-                                    },
-                                ],
-                                strategies: [
-                                    {
-                                        name: 'StrategyA',
-                                        description: 'A description',
-                                    },
-                                    {
-                                        name: 'StrategyB',
-                                        description: 'B description',
-                                        notFound: true,
-                                    },
-                                ],
-                                seenToggles: [
-                                    {
-                                        name: 'ToggleA',
-                                        description: 'this is A toggle',
-                                        enabled: true,
-                                        project: 'default',
-                                    },
-                                    {
-                                        name: 'ToggleB',
-                                        description: 'this is B toggle',
-                                        enabled: false,
-                                        notFound: true,
-                                        project: 'default',
-                                    },
-                                ],
-                                url: 'http://example.org',
-                                description: 'app description',
-                            }}
-                            locationSettings={{ locale: 'en-GB' }}
-                        />
-                    </AccessProvider>
+                    <UIProvider>
+                        <AccessProvider store={createFakeStore([])}>
+                            <ApplicationEdit
+                                fetchApplication={() => Promise.resolve({})}
+                                storeApplicationMetaData={jest.fn()}
+                                deleteApplication={jest.fn()}
+                                history={{}}
+                                application={{
+                                    appName: 'test-app',
+                                    instances: [
+                                        {
+                                            instanceId: 'instance-1',
+                                            clientIp: '123.123.123.123',
+                                            lastSeen: '2017-02-23T15:56:49',
+                                            sdkVersion: '4.0',
+                                        },
+                                    ],
+                                    strategies: [
+                                        {
+                                            name: 'StrategyA',
+                                            description: 'A description',
+                                        },
+                                        {
+                                            name: 'StrategyB',
+                                            description: 'B description',
+                                            notFound: true,
+                                        },
+                                    ],
+                                    seenToggles: [
+                                        {
+                                            name: 'ToggleA',
+                                            description: 'this is A toggle',
+                                            enabled: true,
+                                            project: 'default',
+                                        },
+                                        {
+                                            name: 'ToggleB',
+                                            description: 'this is B toggle',
+                                            enabled: false,
+                                            notFound: true,
+                                            project: 'default',
+                                        },
+                                    ],
+                                    url: 'http://example.org',
+                                    description: 'app description',
+                                }}
+                                locationSettings={{ locale: 'en-GB' }}
+                            />
+                        </AccessProvider>
+                    </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>
         )
@@ -95,56 +100,58 @@ test('renders correctly with permissions', () => {
         .create(
             <MemoryRouter>
                 <ThemeProvider theme={theme}>
-                    <AccessProvider
-                        store={createFakeStore([{ permission: ADMIN }])}
-                    >
-                        <ApplicationEdit
-                            fetchApplication={() => Promise.resolve({})}
-                            storeApplicationMetaData={jest.fn()}
-                            history={{}}
-                            deleteApplication={jest.fn()}
-                            application={{
-                                appName: 'test-app',
-                                instances: [
-                                    {
-                                        instanceId: 'instance-1',
-                                        clientIp: '123.123.123.123',
-                                        lastSeen: '2017-02-23T15:56:49',
-                                        sdkVersion: '4.0',
-                                    },
-                                ],
-                                strategies: [
-                                    {
-                                        name: 'StrategyA',
-                                        description: 'A description',
-                                    },
-                                    {
-                                        name: 'StrategyB',
-                                        description: 'B description',
-                                        notFound: true,
-                                    },
-                                ],
-                                seenToggles: [
-                                    {
-                                        name: 'ToggleA',
-                                        description: 'this is A toggle',
-                                        enabled: true,
-                                        project: 'default',
-                                    },
-                                    {
-                                        name: 'ToggleB',
-                                        description: 'this is B toggle',
-                                        enabled: false,
-                                        notFound: true,
-                                        project: 'default',
-                                    },
-                                ],
-                                url: 'http://example.org',
-                                description: 'app description',
-                            }}
-                            locationSettings={{ locale: 'en-GB' }}
-                        />
-                    </AccessProvider>
+                    <UIProvider>
+                        <AccessProvider
+                            store={createFakeStore([{ permission: ADMIN }])}
+                        >
+                            <ApplicationEdit
+                                fetchApplication={() => Promise.resolve({})}
+                                storeApplicationMetaData={jest.fn()}
+                                history={{}}
+                                deleteApplication={jest.fn()}
+                                application={{
+                                    appName: 'test-app',
+                                    instances: [
+                                        {
+                                            instanceId: 'instance-1',
+                                            clientIp: '123.123.123.123',
+                                            lastSeen: '2017-02-23T15:56:49',
+                                            sdkVersion: '4.0',
+                                        },
+                                    ],
+                                    strategies: [
+                                        {
+                                            name: 'StrategyA',
+                                            description: 'A description',
+                                        },
+                                        {
+                                            name: 'StrategyB',
+                                            description: 'B description',
+                                            notFound: true,
+                                        },
+                                    ],
+                                    seenToggles: [
+                                        {
+                                            name: 'ToggleA',
+                                            description: 'this is A toggle',
+                                            enabled: true,
+                                            project: 'default',
+                                        },
+                                        {
+                                            name: 'ToggleB',
+                                            description: 'this is B toggle',
+                                            enabled: false,
+                                            notFound: true,
+                                            project: 'default',
+                                        },
+                                    ],
+                                    url: 'http://example.org',
+                                    description: 'app description',
+                                }}
+                                locationSettings={{ locale: 'en-GB' }}
+                            />
+                        </AccessProvider>
+                    </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>
         )