diff --git a/src/MainContent.tsx b/src/MainContent.tsx
index b1d117a5..79493dcc 100644
--- a/src/MainContent.tsx
+++ b/src/MainContent.tsx
@@ -37,6 +37,7 @@ import { SuiCanvas } from './MainContent.styles';
 import { Project, ProjectConfig } from './types/types';
 import { APP_WRAPPER_ID } from './utils/constants';
 import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds';
+import { OutputSettingsContextProvider } from './components/navbar/OutputSettingsContext';
 
 declare global {
     interface Window {
@@ -117,7 +118,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
             })
             .catch((err: Error) => {
                 // eslint-disable-next-line no-console
-                console.error(`[${MainContent.name}] Error`, err);
+                console.log(`[${MainContent.name}]`, err);
                 return err;
             });
     }, [projectConfig.onProjectInfoRequested, projectConfig.projectId, projectConfig]);
@@ -281,7 +282,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
             })
             .catch((err: Error) => {
                 // eslint-disable-next-line no-console
-                console.error(`[${MainContent.name}] Error`, err);
+                console.log(`[${MainContent.name}]`, err);
                 return err;
             });
 
@@ -371,20 +372,27 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
         <AppProvider isDocumentLoaded={isDocumentLoaded} isAnimationPlaying={animationStatus} dataSource={dataSource}>
             <ShortcutProvider projectConfig={projectConfig} undoStackState={undoStackState} zoom={currentZoom}>
                 <Container>
-                    <UiConfigContextProvider projectConfig={projectConfig} layoutIntent={layoutIntent}>
+                    <UiConfigContextProvider projectConfig={projectConfig}>
                         <VariablePanelContextProvider
                             connectors={{ mediaConnectors, fontsConnectors }}
                             variables={variables}
                         >
                             <div id={APP_WRAPPER_ID} className="app">
-                                {projectConfig.sandboxMode ? (
-                                    <UiThemeProvider theme="studio" mode="dark">
-                                        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                                        <StudioNavbar {...navbarProps} />
-                                    </UiThemeProvider>
-                                ) : (
-                                    // eslint-disable-next-line react/jsx-props-no-spreading
-                                    <Navbar {...navbarProps} />
+                                {projectConfig.uiOptions.widgets?.navBar?.visible === false ? null : (
+                                    <OutputSettingsContextProvider
+                                        projectConfig={projectConfig}
+                                        layoutIntent={layoutIntent}
+                                    >
+                                        {projectConfig.sandboxMode ? (
+                                            <UiThemeProvider theme="studio" mode="dark">
+                                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                                                <StudioNavbar {...navbarProps} />
+                                            </UiThemeProvider>
+                                        ) : (
+                                            // eslint-disable-next-line react/jsx-props-no-spreading
+                                            <Navbar {...navbarProps} />
+                                        )}
+                                    </OutputSettingsContextProvider>
                                 )}
 
                                 <MainContentContainer
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index c877e85c..48a42b09 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -1,5 +1,4 @@
 import { css } from 'styled-components';
-import { useUiConfigContext } from '../../contexts/UiConfigContext';
 import { getDataIdForSUI, getDataTestIdForSUI } from '../../utils/dataIds';
 import { NavbarItem, StyledNavbar } from './Navbar.styles';
 import { INavbar } from './Navbar.types';
@@ -9,7 +8,6 @@ import useNavbar from './useNavbar';
 
 function Navbar(props: INavbar) {
     const { projectName, goBack, projectConfig, zoom, undoStackState } = props;
-    const { uiOptions } = useUiConfigContext();
 
     const { isDownloadPanelVisible, showDownloadPanel, hideDownloadPanel, handleDownload } = useDownloadPanel(
         projectConfig,
@@ -24,7 +22,6 @@ function Navbar(props: INavbar) {
         onDownloadPanelOpen: showDownloadPanel,
     });
 
-    if (uiOptions.widgets?.navBar?.visible === false) return null;
     return (
         <StyledNavbar
             data-id={getDataIdForSUI('navbar')}
diff --git a/src/components/navbar/OutputSettingsContext.tsx b/src/components/navbar/OutputSettingsContext.tsx
new file mode 100644
index 00000000..f1151888
--- /dev/null
+++ b/src/components/navbar/OutputSettingsContext.tsx
@@ -0,0 +1,82 @@
+import { ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+    ProjectConfig,
+    UserInterfaceOutputSettings,
+    UserInterfaceWithOutputSettings,
+    defaultOutputSettings,
+} from '../../types/types';
+import { IOutputSettingsContext } from './OutputSettingsContext.types';
+import { useAppContext } from '../../contexts/AppProvider';
+import { OutputType } from '../../utils/ApiTypes';
+
+export const OutputSettingsContextDefaultValues: IOutputSettingsContext = {
+    selectedUserInterfaceId: '',
+    outputSettings: defaultOutputSettings,
+    userInterfaceOutputSettings: null,
+    onUserInterfaceChange: () => null,
+};
+
+export const OutputSettingsContext = createContext<IOutputSettingsContext>(OutputSettingsContextDefaultValues);
+
+export const useOutputSettingsContext = () => {
+    return useContext(OutputSettingsContext);
+};
+
+export function OutputSettingsContextProvider({
+    projectConfig,
+    layoutIntent,
+    children,
+}: {
+    projectConfig: ProjectConfig;
+    layoutIntent: string | null;
+    children: ReactNode;
+}) {
+    const { dataSource } = useAppContext();
+
+    const [selectedUserInterfaceId, setSelectedUserInterfaceId] = useState<string | null>(
+        projectConfig.userInterfaceID || null,
+    );
+    const [userInterfaceOutputSettings, setUserInterfaceOutputSettings] = useState<
+        UserInterfaceOutputSettings[] | null
+    >([]);
+
+    const fetchOutputSettings = useCallback(
+        async (userInterfaceId?: string) => {
+            if (projectConfig.onFetchOutputSettings) {
+                projectConfig
+                    .onFetchOutputSettings(userInterfaceId)
+                    .then((res: UserInterfaceWithOutputSettings | null) => {
+                        let settings = res?.outputSettings?.filter((val) =>
+                            val.layoutIntents.includes(layoutIntent ?? ''),
+                        );
+
+                        settings = dataSource ? settings : settings?.filter((s) => s.outputType !== OutputType.Batch);
+                        setUserInterfaceOutputSettings(settings ?? null);
+                        setSelectedUserInterfaceId(res?.userInterface?.id || null);
+                    });
+            }
+        },
+        [layoutIntent, projectConfig, dataSource],
+    );
+
+    useEffect(() => {
+        fetchOutputSettings(selectedUserInterfaceId || undefined);
+    }, [selectedUserInterfaceId, fetchOutputSettings]);
+
+    const data = useMemo(
+        () => ({
+            selectedUserInterfaceId,
+            outputSettings: projectConfig.outputSettings,
+            userInterfaceOutputSettings,
+            onUserInterfaceChange: setSelectedUserInterfaceId,
+        }),
+        [
+            selectedUserInterfaceId,
+            userInterfaceOutputSettings,
+            projectConfig.outputSettings,
+            setSelectedUserInterfaceId,
+        ],
+    );
+
+    return <OutputSettingsContext.Provider value={data}>{children}</OutputSettingsContext.Provider>;
+}
diff --git a/src/components/navbar/OutputSettingsContext.types.tsx b/src/components/navbar/OutputSettingsContext.types.tsx
new file mode 100644
index 00000000..65d43959
--- /dev/null
+++ b/src/components/navbar/OutputSettingsContext.types.tsx
@@ -0,0 +1,8 @@
+import { OutputSettings, UserInterfaceOutputSettings } from '../../types/types';
+
+export interface IOutputSettingsContext {
+    outputSettings: OutputSettings;
+    userInterfaceOutputSettings: UserInterfaceOutputSettings[] | null;
+    selectedUserInterfaceId: string | null;
+    onUserInterfaceChange: (_: string) => void;
+}
diff --git a/src/components/navbar/downloadPanel/useDownload.tsx b/src/components/navbar/downloadPanel/useDownload.tsx
index 1b42e42a..be30b016 100644
--- a/src/components/navbar/downloadPanel/useDownload.tsx
+++ b/src/components/navbar/downloadPanel/useDownload.tsx
@@ -2,12 +2,12 @@ import { AvailableIcons, SelectOptions, useOnClickOutside } from '@chili-publish
 import { DownloadFormats } from '@chili-publish/studio-sdk';
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import DropdownOption from './DropdownOption';
-import { useUiConfigContext } from '../../../contexts/UiConfigContext';
 import { UserInterfaceOutputSettings } from '../../../types/types';
 import { outputTypesIcons } from './DownloadPanel.types';
+import { useOutputSettingsContext } from '../OutputSettingsContext';
 
 const useDownload = (hideDownloadPanel: () => void) => {
-    const { outputSettings, userInterfaceOutputSettings } = useUiConfigContext();
+    const { outputSettings, userInterfaceOutputSettings } = useOutputSettingsContext();
     const initialDownloadState: Record<DownloadFormats, boolean> = {
         [DownloadFormats.JPG]: false,
         [DownloadFormats.PNG]: false,
diff --git a/src/components/navbar/navbarItems/useNavbarDownloadBtn.tsx b/src/components/navbar/navbarItems/useNavbarDownloadBtn.tsx
index ba1a6681..7e04bee0 100644
--- a/src/components/navbar/navbarItems/useNavbarDownloadBtn.tsx
+++ b/src/components/navbar/navbarItems/useNavbarDownloadBtn.tsx
@@ -1,11 +1,13 @@
 import { useMemo } from 'react';
 import { AvailableIcons, ButtonVariant, useMobileSize } from '@chili-publish/grafx-shared-components';
+import { useUiConfigContext } from '../../../contexts/UiConfigContext';
 import NavbarButton from '../../navbarButton/NavbarButton';
 import { NavbarLabel } from '../Navbar.styles';
-import { useUiConfigContext } from '../../../contexts/UiConfigContext';
+import { useOutputSettingsContext } from '../OutputSettingsContext';
 
 const useNavbarDownloadBtn = (onDownloadPanelOpen: () => void) => {
-    const { isDownloadBtnVisible, userInterfaceOutputSettings } = useUiConfigContext();
+    const { isDownloadBtnVisible } = useUiConfigContext();
+    const { userInterfaceOutputSettings } = useOutputSettingsContext();
     const isMobile = useMobileSize();
 
     const navbarItem = useMemo(
diff --git a/src/components/navbar/navbarItems/useUserInterfaceSelector.tsx b/src/components/navbar/navbarItems/useUserInterfaceSelector.tsx
index 7f44436c..e20c785f 100644
--- a/src/components/navbar/navbarItems/useUserInterfaceSelector.tsx
+++ b/src/components/navbar/navbarItems/useUserInterfaceSelector.tsx
@@ -1,11 +1,23 @@
 import { AvailableIcons, Select } from '@chili-publish/grafx-shared-components';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { SESSION_USER_INTEFACE_ID_KEY } from '../../../utils/constants';
 import { getDataIdForSUI, getDataTestIdForSUI } from '../../../utils/dataIds';
+import { useOutputSettingsContext } from '../OutputSettingsContext';
+import { UserInterface } from '../../../types/types';
 import { useUiConfigContext } from '../../../contexts/UiConfigContext';
 
 const useUserInterfaceSelector = () => {
-    const { selectedUserInterfaceId, userInterfaces, onUserInterfaceChange } = useUiConfigContext();
+    const { projectConfig } = useUiConfigContext();
+    const [userInterfaces, setUserInterfaces] = useState<UserInterface[]>([]);
+    const { selectedUserInterfaceId, onUserInterfaceChange } = useOutputSettingsContext();
+
+    useEffect(() => {
+        if (projectConfig.onFetchUserInterfaces) {
+            projectConfig.onFetchUserInterfaces().then((res) => {
+                setUserInterfaces(res?.data?.data || []);
+            });
+        }
+    }, [projectConfig]);
 
     const options = useMemo(
         () => userInterfaces.map((item) => ({ label: item.name, value: item.id })),
diff --git a/src/contexts/UiConfigContext.tsx b/src/contexts/UiConfigContext.tsx
index 487ba67a..bbaea901 100644
--- a/src/contexts/UiConfigContext.tsx
+++ b/src/contexts/UiConfigContext.tsx
@@ -1,27 +1,13 @@
-import { ReactNode, createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import {
-    ProjectConfig,
-    UserInterface,
-    UserInterfaceOutputSettings,
-    UserInterfaceWithOutputSettings,
-    defaultOutputSettings,
-    defaultUiOptions,
-} from '../types/types';
-import { OutputType } from '../utils/ApiTypes';
-import { useAppContext } from './AppProvider';
+import { ReactNode, createContext, useContext, useMemo } from 'react';
+import { ProjectConfig, defaultUiOptions } from '../types/types';
 import { IUiConfigContext } from './UiConfigContext.types';
 
 export const UiConfigContextDefaultValues: IUiConfigContext = {
+    projectConfig: {} as ProjectConfig,
     uiOptions: defaultUiOptions,
-    outputSettings: defaultOutputSettings,
-    userInterfaceOutputSettings: null,
     isDownloadBtnVisible: false,
     isBackBtnVisible: defaultUiOptions.widgets.downloadButton?.visible || false,
     graFxStudioEnvironmentApiBaseUrl: '',
-
-    userInterfaces: [],
-    selectedUserInterfaceId: '',
-    onUserInterfaceChange: () => null,
     onVariableFocus: () => null,
     onVariableBlur: () => null,
 };
@@ -35,77 +21,21 @@ export const useUiConfigContext = () => {
 export function UiConfigContextProvider({
     children,
     projectConfig,
-    layoutIntent,
 }: {
     children: ReactNode;
     projectConfig: ProjectConfig;
-    layoutIntent: string | null;
 }) {
-    const { dataSource } = useAppContext();
-
-    const [selectedUserInterfaceId, setSelectedUserInterfaceId] = useState<string | null>(
-        projectConfig.userInterfaceID || null,
-    );
-    const [userInterfaces, setUserInterfaces] = useState<UserInterface[]>([]);
-    const [userInterfaceOutputSettings, setUserInterfaceOutputSettings] = useState<
-        UserInterfaceOutputSettings[] | null
-    >([]);
-
-    const fetchOutputSettings = useCallback(
-        async (userInterfaceId?: string) => {
-            if (projectConfig.onFetchOutputSettings) {
-                projectConfig
-                    .onFetchOutputSettings(userInterfaceId)
-                    .then((res: UserInterfaceWithOutputSettings | null) => {
-                        let settings = res?.outputSettings?.filter((val) =>
-                            val.layoutIntents.includes(layoutIntent ?? ''),
-                        );
-
-                        settings = dataSource ? settings : settings?.filter((s) => s.outputType !== OutputType.Batch);
-                        setUserInterfaceOutputSettings(settings ?? null);
-                        setSelectedUserInterfaceId(res?.userInterface?.id || null);
-                    });
-            }
-        },
-        [layoutIntent, projectConfig, dataSource],
-    );
-
-    useEffect(() => {
-        fetchOutputSettings(selectedUserInterfaceId || undefined);
-    }, [selectedUserInterfaceId, fetchOutputSettings]);
-
-    useEffect(() => {
-        if (projectConfig.onFetchUserInterfaces) {
-            projectConfig.onFetchUserInterfaces().then((res) => {
-                setUserInterfaces(res?.data?.data || []);
-            });
-        }
-    }, [projectConfig]);
-
     const data = useMemo(
         () => ({
-            userInterfaces,
-            selectedUserInterfaceId,
-            onUserInterfaceChange: setSelectedUserInterfaceId,
+            projectConfig,
             uiOptions: projectConfig.uiOptions,
-            outputSettings: projectConfig.outputSettings,
             graFxStudioEnvironmentApiBaseUrl: projectConfig.graFxStudioEnvironmentApiBaseUrl,
-            userInterfaceOutputSettings,
             isDownloadBtnVisible: projectConfig.uiOptions.widgets?.downloadButton?.visible ?? false,
             isBackBtnVisible: projectConfig.uiOptions.widgets?.backButton?.visible ?? false,
             onVariableFocus: projectConfig.onVariableFocus,
             onVariableBlur: projectConfig.onVariableBlur,
         }),
-        [
-            userInterfaces,
-            selectedUserInterfaceId,
-            projectConfig.uiOptions,
-            projectConfig.outputSettings,
-            projectConfig.graFxStudioEnvironmentApiBaseUrl,
-            projectConfig.onVariableFocus,
-            projectConfig.onVariableBlur,
-            userInterfaceOutputSettings,
-        ],
+        [projectConfig],
     );
 
     return <UiConfigContext.Provider value={data}>{children}</UiConfigContext.Provider>;
diff --git a/src/contexts/UiConfigContext.types.tsx b/src/contexts/UiConfigContext.types.tsx
index 4626650b..c646cdc8 100644
--- a/src/contexts/UiConfigContext.types.tsx
+++ b/src/contexts/UiConfigContext.types.tsx
@@ -1,16 +1,12 @@
-import { OutputSettings, UiOptions, UserInterface, UserInterfaceOutputSettings } from '../types/types';
+import { ProjectConfig, UiOptions } from '../types/types';
 
 export interface IUiConfigContext {
+    projectConfig: ProjectConfig;
+
     uiOptions: UiOptions;
-    outputSettings: OutputSettings;
-    userInterfaceOutputSettings: UserInterfaceOutputSettings[] | null;
     isDownloadBtnVisible: boolean;
     isBackBtnVisible: boolean;
     graFxStudioEnvironmentApiBaseUrl: string;
-
-    userInterfaces: UserInterface[];
-    selectedUserInterfaceId: string | null;
-    onUserInterfaceChange: (_: string) => void;
     onVariableFocus?: (id: string) => void;
     onVariableBlur?: (id: string) => void;
 }
diff --git a/src/tests/integration/StudioLoaderUndefinedProject.test.tsx b/src/tests/integration/StudioLoaderUndefinedProject.test.tsx
index 71cfe43f..22f1572f 100644
--- a/src/tests/integration/StudioLoaderUndefinedProject.test.tsx
+++ b/src/tests/integration/StudioLoaderUndefinedProject.test.tsx
@@ -36,19 +36,17 @@ describe('StudioLoader integration - no projectId', () => {
     });
 
     it('Should not try to load project details when there is no projectId provided in the config', async () => {
-        const config = {
-            selector: 'sui-root',
-            projectDownloadUrl,
-            projectUploadUrl: `${environmentBaseURL}/projects/${projectID}`,
-            graFxStudioEnvironmentApiBaseUrl: environmentBaseURL,
-            authToken: token,
-            projectName,
-            refreshTokenAction: () => Promise.resolve(''),
-        };
-
         render(<div id="sui-root" />);
         act(() => {
-            StudioUI.studioLoaderConfig(config);
+            StudioUI.studioLoaderConfig({
+                selector: 'sui-root',
+                projectDownloadUrl,
+                projectUploadUrl: `${environmentBaseURL}/projects/${projectID}`,
+                graFxStudioEnvironmentApiBaseUrl: environmentBaseURL,
+                authToken: token,
+                projectName,
+                refreshTokenAction: () => Promise.resolve(''),
+            });
         });
 
         await waitFor(() => {
diff --git a/src/tests/navbar/Navbar.test.tsx b/src/tests/navbar/Navbar.test.tsx
index cb133e80..fb8a6d74 100644
--- a/src/tests/navbar/Navbar.test.tsx
+++ b/src/tests/navbar/Navbar.test.tsx
@@ -5,12 +5,51 @@ import { mockOutputSetting } from '@mocks/mockOutputSetting';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Navbar from '../../components/navbar/Navbar';
 import AppProvider from '../../contexts/AppProvider';
-import * as UiConfigContext from '../../contexts/UiConfigContext';
 import { ProjectConfig, defaultOutputSettings, defaultPlatformUiOptions } from '../../types/types';
 import { OutputType } from '../../utils/ApiTypes';
 import { APP_WRAPPER_ID } from '../../utils/constants';
 import { getDataTestIdForSUI } from '../../utils/dataIds';
+import { OutputSettingsContextProvider } from '../../components/navbar/OutputSettingsContext';
+import { UiConfigContextProvider } from '../../contexts/UiConfigContext';
 
+const renderComponent = (config?: ProjectConfig, layoutIntent?: LayoutIntent, dataSource?: ConnectorInstance) => {
+    const prjConfig = {
+        ...ProjectConfigs.empty,
+        onFetchOutputSettings: () =>
+            Promise.resolve({
+                userInterface: { id: '1', name: 'name' },
+                outputSettings: [
+                    { ...mockOutputSetting, layoutIntents: ['print', 'digitalStatic', 'digitalAnimated'] },
+                ],
+            }),
+    };
+    const projectConfig = config || prjConfig;
+
+    render(
+        <AppProvider dataSource={dataSource || undefined}>
+            <UiConfigContextProvider projectConfig={projectConfig}>
+                <OutputSettingsContextProvider
+                    projectConfig={projectConfig}
+                    layoutIntent={layoutIntent || LayoutIntent.digitalAnimated}
+                >
+                    <div id={APP_WRAPPER_ID}>
+                        <UiThemeProvider theme="platform">
+                            <Navbar
+                                projectName=""
+                                projectConfig={projectConfig}
+                                zoom={100}
+                                undoStackState={{
+                                    canRedo: false,
+                                    canUndo: false,
+                                }}
+                            />
+                        </UiThemeProvider>
+                    </div>
+                </OutputSettingsContextProvider>
+            </UiConfigContextProvider>
+        </AppProvider>,
+    );
+};
 describe('Navbar', () => {
     let prjConfig: ProjectConfig;
     beforeEach(() => {
@@ -26,28 +65,9 @@ describe('Navbar', () => {
         };
     });
     it('Should render 4 navbar items', async () => {
-        const { getByTestId } = render(
-            <UiConfigContext.UiConfigContextProvider
-                projectConfig={prjConfig}
-                layoutIntent={LayoutIntent.digitalAnimated}
-            >
-                <div id={APP_WRAPPER_ID}>
-                    <UiThemeProvider theme="platform">
-                        <Navbar
-                            projectName=""
-                            projectConfig={prjConfig}
-                            zoom={100}
-                            undoStackState={{
-                                canRedo: false,
-                                canUndo: false,
-                            }}
-                        />
-                    </UiThemeProvider>
-                </div>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+        renderComponent();
         await waitFor(() => {
-            const navbarItems = Array.from(getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
+            const navbarItems = Array.from(screen.getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
             expect(navbarItems).toHaveLength(4);
         });
     });
@@ -63,24 +83,11 @@ describe('Navbar', () => {
                 },
             },
         };
-        const { getByTestId } = render(
-            <UiConfigContext.UiConfigContextProvider projectConfig={config} layoutIntent={LayoutIntent.digitalAnimated}>
-                <UiThemeProvider theme="platform">
-                    <Navbar
-                        projectName=""
-                        projectConfig={config}
-                        zoom={100}
-                        undoStackState={{
-                            canRedo: false,
-                            canUndo: false,
-                        }}
-                    />
-                </UiThemeProvider>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+
+        renderComponent(config);
 
         await waitFor(() => {
-            const navbarItems = Array.from(getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
+            const navbarItems = Array.from(screen.getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
             expect(navbarItems).toHaveLength(3);
         });
 
@@ -101,21 +108,8 @@ describe('Navbar', () => {
                 },
             },
         };
-        const { getByTestId } = render(
-            <UiConfigContext.UiConfigContextProvider projectConfig={config} layoutIntent={LayoutIntent.digitalAnimated}>
-                <UiThemeProvider theme="platform">
-                    <Navbar
-                        projectName=""
-                        projectConfig={config}
-                        zoom={100}
-                        undoStackState={{
-                            canRedo: false,
-                            canUndo: false,
-                        }}
-                    />
-                </UiThemeProvider>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+        renderComponent(config);
+
         const backButton = screen.queryByTestId(getDataTestId('back-btn'));
         expect(backButton).not.toBeInTheDocument();
 
@@ -124,44 +118,25 @@ describe('Navbar', () => {
             expect(downloadButton).toBeInTheDocument();
         });
         await waitFor(() => {
-            const navbarItems = Array.from(getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
+            const navbarItems = Array.from(screen.getByTestId(getDataTestIdForSUI('navbar')).children[0].children);
             expect(navbarItems).toHaveLength(3);
         });
     });
 
     it('Should show download panel when download button is clicked', async () => {
-        const { getByRole, getByText } = render(
-            <UiConfigContext.UiConfigContextProvider
-                projectConfig={prjConfig}
-                layoutIntent={LayoutIntent.digitalAnimated}
-            >
-                <div id={APP_WRAPPER_ID}>
-                    <UiThemeProvider theme="platform">
-                        <Navbar
-                            projectName=""
-                            projectConfig={prjConfig}
-                            zoom={100}
-                            undoStackState={{
-                                canRedo: false,
-                                canUndo: false,
-                            }}
-                        />
-                    </UiThemeProvider>
-                </div>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+        renderComponent();
 
         await waitFor(() => {
             const downloadButton = screen.getByRole('button', { name: /download/i });
             expect(downloadButton).toBeInTheDocument();
         });
 
-        const downloadButton = getByRole('button', { name: /download/i });
+        const downloadButton = screen.getByRole('button', { name: /download/i });
 
         fireEvent.click(downloadButton);
-        expect(getByText(/output/i)).toBeInTheDocument();
+        expect(screen.getByText(/output/i)).toBeInTheDocument();
 
-        const dropdown = getByText(/gif/i);
+        const dropdown = screen.getByText(/gif/i);
         expect(dropdown).toBeInTheDocument();
 
         fireEvent.click(dropdown);
@@ -194,38 +169,19 @@ describe('Navbar', () => {
                     ],
                 }),
         };
-        const { getByRole, getByText } = render(
-            <UiConfigContext.UiConfigContextProvider
-                projectConfig={prjConfig}
-                layoutIntent={LayoutIntent.digitalAnimated}
-            >
-                <div id={APP_WRAPPER_ID}>
-                    <UiThemeProvider theme="platform">
-                        <Navbar
-                            projectName=""
-                            projectConfig={prjConfig}
-                            zoom={100}
-                            undoStackState={{
-                                canRedo: false,
-                                canUndo: false,
-                            }}
-                        />
-                    </UiThemeProvider>
-                </div>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+        renderComponent(prjConfig);
 
         await waitFor(() => {
             const downloadButton = screen.getByRole('button', { name: /download/i });
             expect(downloadButton).toBeInTheDocument();
         });
 
-        const downloadButton = getByRole('button', { name: /download/i });
+        const downloadButton = screen.getByRole('button', { name: /download/i });
 
         fireEvent.click(downloadButton);
-        expect(getByText(/output/i)).toBeInTheDocument();
+        expect(screen.getByText(/output/i)).toBeInTheDocument();
 
-        const dropdown = getByText(/user interface MP4/i);
+        const dropdown = screen.getByText(/user interface MP4/i);
         expect(dropdown).toBeInTheDocument();
     });
 
@@ -256,35 +212,19 @@ describe('Navbar', () => {
                     ],
                 }),
         };
-        const { getByRole, getByText } = render(
-            <UiConfigContext.UiConfigContextProvider projectConfig={prjConfig} layoutIntent={LayoutIntent.print}>
-                <div id={APP_WRAPPER_ID}>
-                    <UiThemeProvider theme="platform">
-                        <Navbar
-                            projectName=""
-                            projectConfig={prjConfig}
-                            zoom={100}
-                            undoStackState={{
-                                canRedo: false,
-                                canUndo: false,
-                            }}
-                        />
-                    </UiThemeProvider>
-                </div>
-            </UiConfigContext.UiConfigContextProvider>,
-        );
+        renderComponent(prjConfig, LayoutIntent.print);
 
         await waitFor(() => {
             const downloadButton = screen.getByRole('button', { name: /download/i });
             expect(downloadButton).toBeInTheDocument();
         });
 
-        const downloadButton = getByRole('button', { name: /download/i });
+        const downloadButton = screen.getByRole('button', { name: /download/i });
 
         fireEvent.click(downloadButton);
-        expect(getByText(/output/i)).toBeInTheDocument();
+        expect(screen.getByText(/output/i)).toBeInTheDocument();
 
-        const dropdown = getByText(/Single for PDF/i);
+        const dropdown = screen.getByText(/Single for PDF/i);
         expect(dropdown).toBeInTheDocument();
     });
 
@@ -315,37 +255,20 @@ describe('Navbar', () => {
                     ],
                 }),
         };
-        const { getByRole, getByText } = render(
-            <AppProvider dataSource={{} as ConnectorInstance}>
-                <UiConfigContext.UiConfigContextProvider projectConfig={prjConfig} layoutIntent={LayoutIntent.print}>
-                    <div id={APP_WRAPPER_ID}>
-                        <UiThemeProvider theme="platform">
-                            <Navbar
-                                projectName=""
-                                projectConfig={prjConfig}
-                                zoom={100}
-                                undoStackState={{
-                                    canRedo: false,
-                                    canUndo: false,
-                                }}
-                            />
-                        </UiThemeProvider>
-                    </div>
-                </UiConfigContext.UiConfigContextProvider>
-            </AppProvider>,
-        );
+
+        renderComponent(prjConfig, LayoutIntent.print, {} as ConnectorInstance);
 
         await waitFor(() => {
             const downloadButton = screen.getByRole('button', { name: /download/i });
             expect(downloadButton).toBeInTheDocument();
         });
 
-        const downloadButton = getByRole('button', { name: /download/i });
+        const downloadButton = screen.getByRole('button', { name: /download/i });
 
         fireEvent.click(downloadButton);
-        expect(getByText(/output/i)).toBeInTheDocument();
+        expect(screen.getByText(/output/i)).toBeInTheDocument();
 
-        const dropdown = getByText(/Batch for PDF/i);
+        const dropdown = screen.getByText(/Batch for PDF/i);
         expect(dropdown).toBeInTheDocument();
     });
 });
diff --git a/src/tests/navbar/StudioNavbar.test.tsx b/src/tests/navbar/StudioNavbar.test.tsx
index 9304e885..5928848c 100644
--- a/src/tests/navbar/StudioNavbar.test.tsx
+++ b/src/tests/navbar/StudioNavbar.test.tsx
@@ -6,7 +6,6 @@ import { AxiosResponse } from 'axios';
 import { mockUserInterface, mockUserInterface2 } from '@mocks/mockUserinterface';
 import { LayoutIntent } from '@chili-publish/studio-sdk';
 import userEvent from '@testing-library/user-event';
-import { UiConfigContextProvider } from '../../contexts/UiConfigContext';
 import {
     defaultOutputSettings,
     defaultPlatformUiOptions,
@@ -17,6 +16,8 @@ import {
 } from '../../types/types';
 import { getDataTestIdForSUI } from '../../utils/dataIds';
 import StudioNavbar from '../../components/navbar/studioNavbar/StudioNavbar';
+import { OutputSettingsContextProvider } from '../../components/navbar/OutputSettingsContext';
+import { UiConfigContextProvider } from '../../contexts/UiConfigContext';
 
 type OutpuSettingsFn = (_?: string | undefined) => Promise<UserInterfaceWithOutputSettings | null>;
 
@@ -79,10 +80,12 @@ const renderTemplate = (fetchOuptputSettingsFn: OutpuSettingsFn) => {
         projectConfig,
     };
     render(
-        <UiConfigContextProvider projectConfig={projectConfig} layoutIntent={LayoutIntent.digitalAnimated}>
-            <UiThemeProvider theme="studio" mode="dark">
-                <StudioNavbar {...navbarProps} />
-            </UiThemeProvider>
+        <UiConfigContextProvider projectConfig={projectConfig}>
+            <OutputSettingsContextProvider projectConfig={projectConfig} layoutIntent={LayoutIntent.digitalAnimated}>
+                <UiThemeProvider theme="studio" mode="dark">
+                    <StudioNavbar {...navbarProps} />
+                </UiThemeProvider>
+            </OutputSettingsContextProvider>
         </UiConfigContextProvider>,
     );
 };
diff --git a/src/tests/navbar/useDownload.test.tsx b/src/tests/navbar/useDownload.test.tsx
index 20db332f..0d8727c9 100644
--- a/src/tests/navbar/useDownload.test.tsx
+++ b/src/tests/navbar/useDownload.test.tsx
@@ -3,6 +3,7 @@ import { renderHook } from '@testing-library/react';
 import useDownload from '../../components/navbar/downloadPanel/useDownload';
 import * as UiConfigContext from '../../contexts/UiConfigContext';
 import { OutputType } from '../../utils/ApiTypes';
+import * as OutputSettingsContext from '../../components/navbar/OutputSettingsContext';
 
 describe('useDownload', () => {
     test('default download options show all download options', () => {
@@ -14,9 +15,9 @@ describe('useDownload', () => {
     });
 
     test('only false download options, show the onew that are not false', () => {
-        jest.spyOn(UiConfigContext, 'useUiConfigContext').mockImplementation(() => {
+        jest.spyOn(OutputSettingsContext, 'useOutputSettingsContext').mockImplementation(() => {
             return {
-                ...UiConfigContext.UiConfigContextDefaultValues,
+                ...OutputSettingsContext.OutputSettingsContextDefaultValues,
                 outputSettings: { mp4: false, gif: false, jpg: false, pdf: false },
             };
         });
@@ -26,9 +27,9 @@ describe('useDownload', () => {
     });
 
     test('only true download options, show only that option', () => {
-        jest.spyOn(UiConfigContext, 'useUiConfigContext').mockImplementation(() => {
+        jest.spyOn(OutputSettingsContext, 'useOutputSettingsContext').mockImplementation(() => {
             return {
-                ...UiConfigContext.UiConfigContextDefaultValues,
+                ...OutputSettingsContext.OutputSettingsContextDefaultValues,
                 outputSettings: { mp4: true, gif: true },
             };
         });
@@ -38,9 +39,9 @@ describe('useDownload', () => {
     });
 
     test('mix true and false listens to those, not provided means same as falls', () => {
-        jest.spyOn(UiConfigContext, 'useUiConfigContext').mockImplementation(() => {
+        jest.spyOn(OutputSettingsContext, 'useOutputSettingsContext').mockImplementation(() => {
             return {
-                ...UiConfigContext.UiConfigContextDefaultValues,
+                ...OutputSettingsContext.OutputSettingsContextDefaultValues,
                 outputSettings: { mp4: true, gif: false },
             };
         });
@@ -50,9 +51,9 @@ describe('useDownload', () => {
     });
 
     test('Show output settings that are coming from selected user interface', () => {
-        jest.spyOn(UiConfigContext, 'useUiConfigContext').mockImplementation(() => {
+        jest.spyOn(OutputSettingsContext, 'useOutputSettingsContext').mockImplementation(() => {
             return {
-                ...UiConfigContext.UiConfigContextDefaultValues,
+                ...OutputSettingsContext.OutputSettingsContextDefaultValues,
                 userInterfaceOutputSettings: [
                     {
                         name: 'MP4',