diff --git a/src/common/base/menu.ts b/src/common/base/menu.ts
index 6749243..495eb80 100644
--- a/src/common/base/menu.ts
+++ b/src/common/base/menu.ts
@@ -14,6 +14,7 @@ export interface MenuItemCommon<T extends MenuItemCommon<T>> {
   readonly label?: string;
   readonly role?: MenuItemRole;
   readonly type?: MenuItemType;
+  readonly checked?: boolean;
   readonly icon?: string;
   readonly enabled?: boolean;
   readonly submenu?: ReadonlyArray<T>;
diff --git a/src/renderer/application/useCases/appMenu/initAppMenu.ts b/src/renderer/application/useCases/appMenu/initAppMenu.ts
index 538ec35..c284908 100644
--- a/src/renderer/application/useCases/appMenu/initAppMenu.ts
+++ b/src/renderer/application/useCases/appMenu/initAppMenu.ts
@@ -14,6 +14,10 @@ import { OpenAboutUseCase } from '@/application/useCases/about/openAbout';
 import { ShellProvider } from '@/application/interfaces/shellProvider';
 import { OpenProjectManagerUseCase } from '@/application/useCases/projectManager/openProjectManager';
 import { OpenAppManagerUseCase } from '@/application/useCases/appManager/openAppManager';
+import { EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
+import { ToggleTopBarUseCase } from '@/application/useCases/toggleTopBar';
+import { SetProjectSwitcherPositionUseCase } from '@/application/useCases/projectSwitcher/setProjectSwitcherPosition';
+import { SetEditTogglePositionUseCase } from '@/application/useCases/setEditTogglePosition';
 
 const urlDownload = 'https://freeter.io/v2/download';
 const urlTwitter = 'https://twitter.com/FreeterApp';
@@ -28,6 +32,9 @@ type Deps = {
   shellProvider: ShellProvider;
   toggleEditModeUseCase: ToggleEditModeUseCase;
   toggleMenuBarUseCase: ToggleMenuBarUseCase;
+  toggleTopBarUseCase: ToggleTopBarUseCase;
+  setProjectSwitcherPositionUseCase: SetProjectSwitcherPositionUseCase;
+  setEditTogglePositionUseCase: SetEditTogglePositionUseCase;
   openApplicationSettingsUseCase: OpenApplicationSettingsUseCase;
   openAboutUseCase: OpenAboutUseCase;
   openProjectManagerUseCase: OpenProjectManagerUseCase;
@@ -42,6 +49,9 @@ export function createInitAppMenuUseCase({
   shellProvider,
   toggleEditModeUseCase,
   toggleMenuBarUseCase,
+  toggleTopBarUseCase,
+  setProjectSwitcherPositionUseCase,
+  setEditTogglePositionUseCase,
   openApplicationSettingsUseCase,
   openAboutUseCase,
   openProjectManagerUseCase,
@@ -99,9 +109,17 @@ export function createInitAppMenuUseCase({
     ]
   }
 
-  const menuEdit: MenuItem = {
+  const createMenuEdit: (
+    editMode: boolean,
+  ) => MenuItem = (editMode) => ({
     label: '&Edit',
     submenu: [
+      {
+        accelerator: 'CmdOrCtrl+E',
+        label: `${editMode ? 'Disable' : 'Enable'} Edit Mode`,
+        doAction: async () => toggleEditModeUseCase()
+      },
+      itemSeparator,
       {
         role: 'undo'
       }, {
@@ -116,24 +134,91 @@ export function createInitAppMenuUseCase({
         role: 'selectAll'
       }
     ]
-  }
+  })
 
-  const createMenuView: (editMode: boolean, menuBar: boolean) => MenuItem = (editMode, menuBar) => ({
+  const createMenuView: (
+    menuBar: boolean,
+    topBar: boolean,
+    prjSwitcherPos: ProjectSwitcherPos,
+    editTogglePos: EditTogglePos,
+  ) => MenuItem = (menuBar, topBar, prjSwitcherPos, editTogglePos) => ({
     label: '&View',
     submenu: [
-      { role: 'togglefullscreen' },
-      ...(!isMac
-        ? [{
-          label: menuBar ? 'Hide Menu Bar (ALT to restore)' : 'Show Menu Bar',
-          doAction: async () => toggleMenuBarUseCase()
-        }]
-        : []
-      ),
-      itemSeparator,
       {
-        accelerator: 'CmdOrCtrl+E',
-        label: `${editMode ? 'Disable' : 'Enable'} Edit Mode`,
-        doAction: async () => toggleEditModeUseCase()
+        label: 'Appearance',
+        submenu: [
+          { role: 'togglefullscreen' },
+          ...(!isMac
+            ? [{
+              label: menuBar ? 'Hide Menu Bar (ALT to restore)' : 'Show Menu Bar',
+              doAction: async () => toggleMenuBarUseCase()
+            }]
+            : []
+          ),
+          {
+            label: topBar ? 'Hide Top Bar' : 'Show Top Bar',
+            doAction: async () => toggleTopBarUseCase()
+          },
+          itemSeparator,
+          {
+            label: 'Project Switcher Position',
+            submenu: [
+              {
+                label: 'On Top Bar',
+                type: 'radio',
+                checked: prjSwitcherPos === ProjectSwitcherPos.TopBar,
+                doAction: async () => setProjectSwitcherPositionUseCase(ProjectSwitcherPos.TopBar)
+              },
+              {
+                label: 'On Tab Bar (Left)',
+                type: 'radio',
+                checked: prjSwitcherPos === ProjectSwitcherPos.TabBarLeft,
+                doAction: async () => setProjectSwitcherPositionUseCase(ProjectSwitcherPos.TabBarLeft)
+              },
+              {
+                label: 'On Tab Bar (Right)',
+                type: 'radio',
+                checked: prjSwitcherPos === ProjectSwitcherPos.TabBarRight,
+                doAction: async () => setProjectSwitcherPositionUseCase(ProjectSwitcherPos.TabBarRight)
+              },
+              {
+                label: 'Hidden',
+                type: 'radio',
+                checked: prjSwitcherPos === ProjectSwitcherPos.Hidden,
+                doAction: async () => setProjectSwitcherPositionUseCase(ProjectSwitcherPos.Hidden)
+              },
+            ]
+          },
+          {
+            label: 'Edit Mode Toggle Position',
+            submenu: [
+              {
+                label: 'On Top Bar',
+                type: 'radio',
+                checked: editTogglePos === EditTogglePos.TopBar,
+                doAction: async () => setEditTogglePositionUseCase(EditTogglePos.TopBar)
+              },
+              {
+                label: 'On Tab Bar (Left)',
+                type: 'radio',
+                checked: editTogglePos === EditTogglePos.TabBarLeft,
+                doAction: async () => setEditTogglePositionUseCase(EditTogglePos.TabBarLeft)
+              },
+              {
+                label: 'On Tab Bar (Right)',
+                type: 'radio',
+                checked: editTogglePos === EditTogglePos.TabBarRight,
+                doAction: async () => setEditTogglePositionUseCase(EditTogglePos.TabBarRight)
+              },
+              {
+                label: 'Hidden',
+                type: 'radio',
+                checked: editTogglePos === EditTogglePos.Hidden,
+                doAction: async () => setEditTogglePositionUseCase(EditTogglePos.Hidden)
+              },
+            ]
+          },
+        ]
       },
       itemSeparator,
       {
@@ -210,16 +295,22 @@ export function createInitAppMenuUseCase({
       isLoading: state.isLoading,
       editMode: state.ui.editMode,
       menuBar: state.ui.menuBar,
+      topBar: state.ui.topBar,
+      prjSwitcherPos: state.ui.projectSwitcher.pos,
+      editTogglePos: state.ui.editTogglePos,
     }), ({
       isLoading,
       editMode,
-      menuBar
+      menuBar,
+      topBar,
+      prjSwitcherPos,
+      editTogglePos
     }) => {
       if (!isLoading) {
         appMenu.setMenu([
           (isMac ? menuApp : menuFile),
-          menuEdit,
-          createMenuView(editMode, menuBar),
+          createMenuEdit(editMode),
+          createMenuView(menuBar, topBar, prjSwitcherPos, editTogglePos),
           menuHelp,
           ...(isDevMode
             ? [menuDev]
diff --git a/src/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.ts b/src/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.ts
new file mode 100644
index 0000000..a20ad33
--- /dev/null
+++ b/src/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { AppStore } from '@/application/interfaces/store';
+import { ProjectSwitcherPos } from '@/base/state/ui';
+
+type Deps = {
+  appStore: AppStore;
+}
+
+export function createSetProjectSwitcherPositionUseCase({
+  appStore
+}: Deps) {
+  const useCase = (newPos: ProjectSwitcherPos) => {
+    const state = appStore.get();
+    appStore.set({
+      ...state,
+      ui: {
+        ...state.ui,
+        projectSwitcher: {
+          ...state.ui.projectSwitcher,
+          pos: newPos
+        }
+      }
+    })
+  }
+
+  return useCase;
+}
+
+export type SetProjectSwitcherPositionUseCase = ReturnType<typeof createSetProjectSwitcherPositionUseCase>;
diff --git a/src/renderer/application/useCases/setEditTogglePosition.ts b/src/renderer/application/useCases/setEditTogglePosition.ts
new file mode 100644
index 0000000..1a1db8b
--- /dev/null
+++ b/src/renderer/application/useCases/setEditTogglePosition.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { AppStore } from '@/application/interfaces/store';
+import { EditTogglePos } from '@/base/state/ui';
+
+type Deps = {
+  appStore: AppStore;
+}
+
+export function createSetEditTogglePositionUseCase({
+  appStore
+}: Deps) {
+  const useCase = (newPos: EditTogglePos) => {
+    const state = appStore.get();
+    appStore.set({
+      ...state,
+      ui: {
+        ...state.ui,
+        editTogglePos: newPos
+      }
+    })
+  }
+
+  return useCase;
+}
+
+export type SetEditTogglePositionUseCase = ReturnType<typeof createSetEditTogglePositionUseCase>;
diff --git a/src/renderer/application/useCases/toggleTopBar.ts b/src/renderer/application/useCases/toggleTopBar.ts
new file mode 100644
index 0000000..e9d9ef2
--- /dev/null
+++ b/src/renderer/application/useCases/toggleTopBar.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { AppStore } from '@/application/interfaces/store';
+
+type Deps = {
+  appStore: AppStore;
+}
+
+export function createToggleTopBarUseCase({
+  appStore
+}: Deps) {
+  const useCase = () => {
+    const state = appStore.get();
+    const { topBar } = state.ui;
+    appStore.set({
+      ...state,
+      ui: {
+        ...state.ui,
+        topBar: !topBar
+      }
+    })
+  }
+
+  return useCase;
+}
+
+export type ToggleTopBarUseCase = ReturnType<typeof createToggleTopBarUseCase>;
diff --git a/src/renderer/base/state/ui.ts b/src/renderer/base/state/ui.ts
index 66c53d5..e27eb31 100644
--- a/src/renderer/base/state/ui.ts
+++ b/src/renderer/base/state/ui.ts
@@ -88,9 +88,17 @@ export interface ProjectManagerState {
   duplicateProjectIds: Record<EntityId, EntityId> | null;
 }
 
+export enum ProjectSwitcherPos {
+  Hidden = 0,
+  TopBar = 1,
+  TabBarLeft = 2,
+  TabBarRight = 3,
+}
+
 export interface ProjectSwitcherState {
   projectIds: EntityIdList;
   currentProjectId: EntityId;
+  pos: ProjectSwitcherPos;
 }
 
 export interface AppManagerState {
@@ -190,9 +198,18 @@ export interface MemSaverState {
   workflowTimeouts: Record<EntityId, NodeJS.Timeout>;
 }
 
+export enum EditTogglePos {
+  Hidden = 0,
+  TopBar = 1,
+  TabBarLeft = 2,
+  TabBarRight = 3,
+}
+
 export interface UiState {
   editMode: boolean;
   menuBar: boolean;
+  topBar: boolean;
+  editTogglePos: EditTogglePos;
   appConfig: AppConfig;
   apps: AppsState;
   dragDrop: DragDropState;
@@ -210,6 +227,8 @@ export function createUiState(): UiState {
     dragDrop: {},
     editMode: false,
     menuBar: true,
+    topBar: false,
+    editTogglePos: EditTogglePos.TabBarRight,
     appConfig: {
       mainHotkey: 'CmdOrCtrl+Shift+F',
       memSaver: {
@@ -267,7 +286,8 @@ export function createUiState(): UiState {
     },
     projectSwitcher: {
       currentProjectId: '',
-      projectIds: []
+      projectIds: [],
+      pos: ProjectSwitcherPos.TabBarRight,
     },
     shelf: {
       widgetList: []
diff --git a/src/renderer/init.ts b/src/renderer/init.ts
index 6c21aa9..7666afa 100644
--- a/src/renderer/init.ts
+++ b/src/renderer/init.ts
@@ -15,8 +15,8 @@ import { createDropOnWorktableLayoutUseCase } from '@/application/useCases/dragD
 import { createResizeLayoutItemUseCase, createResizeLayoutItemEndUseCase, createResizeLayoutItemStartUseCase } from '@/application/useCases/worktable/resizeLayoutItem';
 import { uuidv4IdGenerator } from '@/infra/idGenerator/uuidv4IdGenerator';
 import { createAppComponent } from '@/ui/components/app';
-import { createPaletteComponent } from '@/ui/components/topBar/palette';
-import { createPaletteViewModelHook } from '@/ui/components/topBar/palette/paletteViewModel';
+import { createPaletteComponent } from '@/ui/components/palette';
+import { createPaletteViewModelHook } from '@/ui/components/palette/paletteViewModel';
 import { createTopBarComponent } from '@/ui/components/topBar';
 import { createShelfComponent, createShelfItemComponent } from '@/ui/components/topBar/shelf';
 import { createShelfViewModelHook } from '@/ui/components/topBar/shelf/shelfViewModel';
@@ -24,7 +24,7 @@ import { createWorktableComponent } from '@/ui/components/worktable';
 import { createWidgetLayoutComponent, createWidgetLayoutItemComponent } from '@/ui/components/worktable/widgetLayout';
 import { createWidgetLayoutViewModelHook } from '@/ui/components/worktable/widgetLayout/widgetLayoutViewModel';
 import { createWorkflowSwitcherComponent, createWorkflowSwitcherViewModelHook } from '@/ui/components/workflowSwitcher';
-import { createProjectSwitcherComponent, createProjectSwitcherViewModelHook } from '@/ui/components/topBar/projectSwitcher';
+import { createProjectSwitcherComponent, createProjectSwitcherViewModelHook } from '@/ui/components/projectSwitcher';
 import { createSwitchProjectUseCase } from '@/application/useCases/projectSwitcher/switchProject';
 import { createSwitchWorkflowUseCase } from '@/application/useCases/workflowSwitcher/switchWorkflow';
 import { createDragOverWorkflowSwitcherUseCase } from '@/application/useCases/dragDrop/dragOverWorkflowSwitcher';
@@ -38,7 +38,7 @@ import { createCloseWidgetSettingsUseCase } from '@/application/useCases/widgetS
 import { createSaveWidgetSettingsUseCase } from '@/application/useCases/widgetSettings/saveWidgetSettings';
 import { createWidgetByIdComponent } from '@/ui/components/widget/widgetById';
 import { createWidgetByIdViewModelHook } from '@/ui/components/widget/widgetByIdViewModel';
-import { createEditModeToggleComponent, createEditModeToggleViewModelHook } from '@/ui/components/topBar/editModeToggle';
+import { createEditModeToggleComponent, createEditModeToggleViewModelHook } from '@/ui/components/editModeToggle';
 import { createToggleEditModeUseCase } from '@/application/useCases/toggleEditMode';
 import { createToggleMenuBarUseCase } from '@/application/useCases/toggleMenuBar';
 import { createAppStore } from '@/data/appStore';
@@ -77,7 +77,7 @@ import { createToggleDeletionInProjectManagerUseCase } from '@/application/useCa
 import { createUpdateProjectSettingsInProjectManagerUseCase } from '@/application/useCases/projectManager/updateProjectSettingsInProjectManager';
 import { createUpdateProjectsOrderInProjectManagerUseCase } from '@/application/useCases/projectManager/updateProjectsOrderInProjectManager';
 import { createCloseProjectManagerUseCase } from '@/application/useCases/projectManager/closeProjectManager';
-import { createManageProjectsButtonComponent, createManageProjectsButtonViewModelHook } from '@/ui/components/topBar/manageProjectsButton';
+import { createManageProjectsButtonComponent, createManageProjectsButtonViewModelHook } from '@/ui/components/manageProjectsButton';
 import { createOpenProjectManagerUseCase } from '@/application/useCases/projectManager/openProjectManager';
 import { createAddWorkflowUseCase } from '@/application/useCases/workflowSwitcher/addWorkflow';
 import { createRenameWorkflowUseCase } from '@/application/useCases/workflowSwitcher/renameWorkflow';
@@ -140,6 +140,9 @@ import { createOpenAppManagerUseCase } from '@/application/useCases/appManager/o
 import { createShowOpenFileDialogUseCase } from '@/application/useCases/dialog/showOpenFileDialog';
 import { createInitMemSaverUseCase } from '@/application/useCases/memSaver/initMemSaver';
 import { createDeactivateWorkflowUseCase } from '@/application/useCases/memSaver/deactivateWorkflow';
+import { createToggleTopBarUseCase } from '@/application/useCases/toggleTopBar';
+import { createSetProjectSwitcherPositionUseCase } from '@/application/useCases/projectSwitcher/setProjectSwitcherPosition';
+import { createSetEditTogglePositionUseCase } from '@/application/useCases/setEditTogglePosition';
 
 function prepareDataStorageForRenderer(dataStorage: DataStorage): DataStorageRenderer {
   return setTextOnlyIfChanged(withJson(dataStorage));
@@ -226,6 +229,9 @@ async function createUseCases(store: ReturnType<typeof createStore>) {
 
   const toggleEditModeUseCase = createToggleEditModeUseCase(deps);
   const toggleMenuBarUseCase = createToggleMenuBarUseCase(deps);
+  const toggleTopBarUseCase = createToggleTopBarUseCase(deps);
+  const setProjectSwitcherPositionUseCase = createSetProjectSwitcherPositionUseCase(deps);
+  const setEditTogglePositionUseCase = createSetEditTogglePositionUseCase(deps);
 
   const clickContextMenuItemUseCase = createClickContextMenuItemUseCase();
   const osContextMenuProvider = createOsContextMenuProvider({ clickContextMenuItemUseCase });
@@ -327,6 +333,9 @@ async function createUseCases(store: ReturnType<typeof createStore>) {
     shellProvider,
     toggleEditModeUseCase,
     toggleMenuBarUseCase,
+    toggleTopBarUseCase,
+    setProjectSwitcherPositionUseCase,
+    setEditTogglePositionUseCase,
     openApplicationSettingsUseCase,
     openAboutUseCase,
     openAppManagerUseCase,
@@ -602,7 +611,11 @@ function createUI(stateHooks: ReturnType<typeof createUiHooks>, useCases: Awaite
 
   const useWorkflowSwitcherViewModel = createWorkflowSwitcherViewModelHook(deps);
   const WorkflowSwitcher = createWorkflowSwitcherComponent({
-    useWorkflowSwitcherViewModel
+    useWorkflowSwitcherViewModel,
+    EditModeToggle,
+    ManageProjectsButton,
+    Palette,
+    ProjectSwitcher,
   })
   const useWorktableViewModel = createWorktableViewModelHook(deps);
   const Worktable = createWorktableComponent({
diff --git a/src/renderer/ui/components/app/app.module.scss b/src/renderer/ui/components/app/app.module.scss
index 2481fe9..30f49c3 100644
--- a/src/renderer/ui/components/app/app.module.scss
+++ b/src/renderer/ui/components/app/app.module.scss
@@ -3,13 +3,19 @@
  * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
  */
 
-.no-projects {
-  background-color: var(--freeter-inAppNoteNoProjectsBackground);
+.main-screen {
+  display: flex;
+  flex-direction: column;
   position: fixed;
-  top: 62px;
-  left: 0;
+  top: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+}
+
+.no-projects {
+  background-color: var(--freeter-inAppNoteNoProjectsBackground);
+  flex-grow: 1;
 }
 
 .manage-icon {
diff --git a/src/renderer/ui/components/app/app.tsx b/src/renderer/ui/components/app/app.tsx
index fed47f2..d2e962c 100644
--- a/src/renderer/ui/components/app/app.tsx
+++ b/src/renderer/ui/components/app/app.tsx
@@ -27,20 +27,20 @@ export function createAppComponent({
   useAppViewModel
 }: Deps) {
   function App() {
-    const {modalScreens, hasModalScreens, hasProjects, contextMenuHandler, uiThemeId} = useAppViewModel();
+    const {modalScreens, hasModalScreens, hasProjects, contextMenuHandler, uiThemeId, hasTopBar} = useAppViewModel();
     return (
       <div onContextMenu={contextMenuHandler}>
         <UITheme themeId={uiThemeId} />
-        <div data-testid="main-screen" {...{ inert: hasModalScreens ? true : undefined }}>
-          <TopBar />
+        <div className={styles['main-screen']} data-testid="main-screen" {...{ inert: hasModalScreens ? true : undefined }}>
+          {hasTopBar && <TopBar />}
+          <WorkflowSwitcher />
           {
             hasProjects
             ? <>
-                <WorkflowSwitcher />
                 <Worktable />
               </>
             : <InAppNote className={styles['no-projects']}>
-                {'You don\'t have any projects. Use the Manage Projects '} <SvgIcon svg={manage24Svg} className={styles['manage-icon']} /> {' button at the Top Bar to create a first one.'}
+                {'You don\'t have any projects. Use the Manage Projects '} <SvgIcon svg={manage24Svg} className={styles['manage-icon']} /> {' button above (or under the View menu) to create a first one.'}
               </InAppNote>
           }
         </div>
diff --git a/src/renderer/ui/components/app/appViewModel.ts b/src/renderer/ui/components/app/appViewModel.ts
index 848fc39..bfb1dec 100644
--- a/src/renderer/ui/components/app/appViewModel.ts
+++ b/src/renderer/ui/components/app/appViewModel.ts
@@ -39,7 +39,8 @@ export function createAppViewModelHook({
       projects,
       workflows,
       modalScreensOrder,
-      uiTheme
+      uiTheme,
+      hasTopBar
     ] = useAppState(state => [
       state.ui.editMode,
       state.ui.projectSwitcher.projectIds,
@@ -47,7 +48,8 @@ export function createAppViewModelHook({
       state.entities.projects,
       state.entities.workflows,
       state.ui.modalScreens.order,
-      state.ui.appConfig.uiTheme
+      state.ui.appConfig.uiTheme,
+      state.ui.topBar
     ])
 
     const projectList = useAppState.useEntityList(state => state.entities.projects, projectIds);
@@ -92,7 +94,8 @@ export function createAppViewModelHook({
       modalScreens,
       hasModalScreens,
       contextMenuHandler,
-      uiThemeId
+      uiThemeId,
+      hasTopBar
     }
   }
 
diff --git a/src/renderer/ui/components/topBar/editModeToggle/editModeToggle.tsx b/src/renderer/ui/components/editModeToggle/editModeToggle.tsx
similarity index 100%
rename from src/renderer/ui/components/topBar/editModeToggle/editModeToggle.tsx
rename to src/renderer/ui/components/editModeToggle/editModeToggle.tsx
diff --git a/src/renderer/ui/components/topBar/editModeToggle/editModeToggleViewModel.ts b/src/renderer/ui/components/editModeToggle/editModeToggleViewModel.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/editModeToggle/editModeToggleViewModel.ts
rename to src/renderer/ui/components/editModeToggle/editModeToggleViewModel.ts
diff --git a/src/renderer/ui/components/topBar/editModeToggle/index.ts b/src/renderer/ui/components/editModeToggle/index.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/editModeToggle/index.ts
rename to src/renderer/ui/components/editModeToggle/index.ts
diff --git a/src/renderer/ui/components/topBar/manageProjectsButton/index.ts b/src/renderer/ui/components/manageProjectsButton/index.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/manageProjectsButton/index.ts
rename to src/renderer/ui/components/manageProjectsButton/index.ts
diff --git a/src/renderer/ui/components/topBar/manageProjectsButton/manageProjectsButton.tsx b/src/renderer/ui/components/manageProjectsButton/manageProjectsButton.tsx
similarity index 100%
rename from src/renderer/ui/components/topBar/manageProjectsButton/manageProjectsButton.tsx
rename to src/renderer/ui/components/manageProjectsButton/manageProjectsButton.tsx
diff --git a/src/renderer/ui/components/topBar/manageProjectsButton/manageProjectsButtonViewModel.ts b/src/renderer/ui/components/manageProjectsButton/manageProjectsButtonViewModel.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/manageProjectsButton/manageProjectsButtonViewModel.ts
rename to src/renderer/ui/components/manageProjectsButton/manageProjectsButtonViewModel.ts
diff --git a/src/renderer/ui/components/topBar/palette/index.ts b/src/renderer/ui/components/palette/index.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/palette/index.ts
rename to src/renderer/ui/components/palette/index.ts
diff --git a/src/renderer/ui/components/topBar/palette/palette.module.scss b/src/renderer/ui/components/palette/palette.module.scss
similarity index 95%
rename from src/renderer/ui/components/topBar/palette/palette.module.scss
rename to src/renderer/ui/components/palette/palette.module.scss
index 3f843d6..06f2535 100644
--- a/src/renderer/ui/components/topBar/palette/palette.module.scss
+++ b/src/renderer/ui/components/palette/palette.module.scss
@@ -17,7 +17,6 @@
   z-index:1;
   display: inline-block;
   font-family: 'Roboto Condensed';
-  padding: 22px 16px;
   font-size: 16px;
   line-height: 16px;
   background-color: var(--freeter-paletteTabBackground);
@@ -33,6 +32,17 @@
     }
   }
 }
+.pos-tab-bar {
+  .palette-tab {
+    padding: 10px 12px;
+  }
+}
+.pos-top-bar {
+  .palette-tab {
+    padding: 22px 16px;
+  }
+}
+
 .palette-section {
   box-sizing: border-box;
   overflow-x: hidden;
diff --git a/src/renderer/ui/components/topBar/palette/palette.tsx b/src/renderer/ui/components/palette/palette.tsx
similarity index 82%
rename from src/renderer/ui/components/topBar/palette/palette.tsx
rename to src/renderer/ui/components/palette/palette.tsx
index 8094701..b2de2f4 100644
--- a/src/renderer/ui/components/topBar/palette/palette.tsx
+++ b/src/renderer/ui/components/palette/palette.tsx
@@ -13,10 +13,21 @@ type Deps = {
   usePaletteViewModel: PaletteViewModelHook
 }
 
+export enum PalettePropsPos {
+  TopBar = 1,
+  TabBar = 2
+}
+
+export interface PaletteProps extends React.PropsWithChildren<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>> {
+  pos: PalettePropsPos
+};
+
 export function createPaletteComponent({
   usePaletteViewModel
 }: Deps) {
-  function Palette() {
+  function Palette({
+    pos
+  }: PaletteProps) {
     const {
       onAddItemDragEnd,
       onAddItemDragStart,
@@ -33,7 +44,12 @@ export function createPaletteComponent({
 
     return (
       <div
-        className={clsx(styles.palette, hideSections && styles['hide-sections'])}
+        className={clsx(
+          styles.palette,
+          hideSections && styles['hide-sections'],
+          pos === PalettePropsPos.TabBar && styles['pos-tab-bar'],
+          pos === PalettePropsPos.TopBar && styles['pos-top-bar'],
+        )}
       >
         <span className={clsx(styles['palette-tab'], styles['palette-tab-add'])} tabIndex={0}>Add Widget</span>
         <span className={clsx(styles['palette-tab'], styles['palette-tab-paste'])} tabIndex={0}>Paste Widget</span>
diff --git a/src/renderer/ui/components/topBar/palette/paletteItem.tsx b/src/renderer/ui/components/palette/paletteItem.tsx
similarity index 100%
rename from src/renderer/ui/components/topBar/palette/paletteItem.tsx
rename to src/renderer/ui/components/palette/paletteItem.tsx
diff --git a/src/renderer/ui/components/topBar/palette/paletteViewModel.ts b/src/renderer/ui/components/palette/paletteViewModel.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/palette/paletteViewModel.ts
rename to src/renderer/ui/components/palette/paletteViewModel.ts
diff --git a/src/renderer/ui/components/topBar/projectSwitcher/index.ts b/src/renderer/ui/components/projectSwitcher/index.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/projectSwitcher/index.ts
rename to src/renderer/ui/components/projectSwitcher/index.ts
diff --git a/src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.module.scss b/src/renderer/ui/components/projectSwitcher/projectSwitcher.module.scss
similarity index 89%
rename from src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.module.scss
rename to src/renderer/ui/components/projectSwitcher/projectSwitcher.module.scss
index 557ab69..cfaf5c4 100644
--- a/src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.module.scss
+++ b/src/renderer/ui/components/projectSwitcher/projectSwitcher.module.scss
@@ -4,13 +4,11 @@
  */
 
 .project-switcher {
-  height: 36px;
   line-height: 24px;
   font-family: 'Roboto Condensed';
   font-size: 16px;
   min-width: 140px;
   max-width: 280px;
-  margin-right: 12px;
   option[disabled] {
     display: none;
   }
diff --git a/src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.tsx b/src/renderer/ui/components/projectSwitcher/projectSwitcher.tsx
similarity index 72%
rename from src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.tsx
rename to src/renderer/ui/components/projectSwitcher/projectSwitcher.tsx
index 7fe2774..f60878b 100644
--- a/src/renderer/ui/components/topBar/projectSwitcher/projectSwitcher.tsx
+++ b/src/renderer/ui/components/projectSwitcher/projectSwitcher.tsx
@@ -3,7 +3,7 @@
  * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
  */
 
-import { ProjectSwitcherViewModelHook } from '@/ui/components/topBar/projectSwitcher/projectSwitcherViewModel';
+import { ProjectSwitcherViewModelHook } from '@/ui/components/projectSwitcher/projectSwitcherViewModel';
 import clsx from 'clsx';
 import * as styles from './projectSwitcher.module.scss';
 
@@ -11,10 +11,14 @@ type Deps = {
   useProjectSwitcherViewModel: ProjectSwitcherViewModelHook
 }
 
+export type ProjectSwitcherProps = React.PropsWithChildren<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSelectElement>, HTMLSelectElement>>;
+
 export function createProjectSwitcherComponent({
   useProjectSwitcherViewModel
 }: Deps) {
-  function ProjectSwitcher() {
+  function ProjectSwitcher({
+    className
+  }: ProjectSwitcherProps) {
     const {
       currentProjectId,
       projects,
@@ -25,7 +29,7 @@ export function createProjectSwitcherComponent({
     return (
       <select
         value={currentProjectId}
-        className={clsx(styles['project-switcher'])}
+        className={clsx(styles['project-switcher'], className)}
         disabled={noProjects}
         onChange={handleChange}
       >
diff --git a/src/renderer/ui/components/topBar/projectSwitcher/projectSwitcherViewModel.ts b/src/renderer/ui/components/projectSwitcher/projectSwitcherViewModel.ts
similarity index 100%
rename from src/renderer/ui/components/topBar/projectSwitcher/projectSwitcherViewModel.ts
rename to src/renderer/ui/components/projectSwitcher/projectSwitcherViewModel.ts
diff --git a/src/renderer/ui/components/topBar/topBar.module.scss b/src/renderer/ui/components/topBar/topBar.module.scss
index 3987fb3..eeb07d1 100644
--- a/src/renderer/ui/components/topBar/topBar.module.scss
+++ b/src/renderer/ui/components/topBar/topBar.module.scss
@@ -5,14 +5,10 @@
 
 .top-bar {
   display: flex;
-  position: fixed;
   z-index: 3;
   background-color: var(--freeter-topBarBackground);
   border-top: 1px solid var(--freeter-topBarBorder);
   border-bottom: 1px solid var(--freeter-topBarBorder);
-  top: 0;
-  left: 0;
-  right: 0;
 }
 
 .top-bar-section {
@@ -31,9 +27,15 @@
 
 .top-bar-palette-section {
   z-index: 1;
+  flex-shrink: 0;
 }
 
 .top-bar-shelf-section {
   flex-grow: 1;
   position: relative;
 }
+
+.project-switcher {
+  height: 36px;
+  margin-right: 12px;
+}
diff --git a/src/renderer/ui/components/topBar/topBar.tsx b/src/renderer/ui/components/topBar/topBar.tsx
index 0ddbbc6..96d11f5 100644
--- a/src/renderer/ui/components/topBar/topBar.tsx
+++ b/src/renderer/ui/components/topBar/topBar.tsx
@@ -7,12 +7,14 @@ import React, { memo } from 'react';
 import * as styles from './topBar.module.scss';
 import clsx from 'clsx';
 import { TopBarViewModelHook } from '@/ui/components/topBar/topBarViewModel';
+import { ProjectSwitcherProps } from '@/ui/components/projectSwitcher';
+import { PaletteProps, PalettePropsPos } from '@/ui/components/palette';
 
 type Deps = {
   EditModeToggle: React.FC;
-  ProjectSwitcher: React.FC;
+  ProjectSwitcher: React.FC<ProjectSwitcherProps>;
   ManageProjectsButton: React.FC;
-  Palette: React.FC;
+  Palette: React.FC<PaletteProps>;
   Shelf: React.FC;
   useTopBarViewModel: TopBarViewModelHook;
 }
@@ -26,25 +28,29 @@ export function createTopBarComponent({
   useTopBarViewModel,
 }: Deps) {
   function TopBar() {
-    const {showPalette} = useTopBarViewModel();
+    const {showPalette, showEditToggle, showPrjSwitcher} = useTopBarViewModel();
     return (
       <div className={styles['top-bar']}>
-        <div className={styles['top-bar-section']}>
-          <ProjectSwitcher />
-          <ManageProjectsButton />
-        </div>
-        {showPalette &&
-          <div className={clsx(styles['top-bar-section'], styles['top-bar-palette-section'])}>
-            <Palette />
+        {showPrjSwitcher &&
+          <div className={styles['top-bar-section']}>
+            <ProjectSwitcher className={styles['project-switcher']} />
+            <ManageProjectsButton />
           </div>
         }
-
         <div className={clsx(styles['top-bar-section'], styles['top-bar-shelf-section'])}>
           <Shelf />
         </div>
-        <div className={styles['top-bar-section']}>
-          <EditModeToggle />
-        </div>
+
+        {showPalette &&
+          <div className={clsx(styles['top-bar-section'], styles['top-bar-palette-section'])}>
+            <Palette pos={PalettePropsPos.TopBar} />
+          </div>
+        }
+        {showEditToggle &&
+          <div className={styles['top-bar-section']}>
+            <EditModeToggle />
+          </div>
+        }
       </div>
     )
   }
diff --git a/src/renderer/ui/components/topBar/topBarViewModel.ts b/src/renderer/ui/components/topBar/topBarViewModel.ts
index 212a12b..e7846fd 100644
--- a/src/renderer/ui/components/topBar/topBarViewModel.ts
+++ b/src/renderer/ui/components/topBar/topBarViewModel.ts
@@ -3,6 +3,7 @@
  * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
  */
 
+import { EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
 import { UseAppState } from '@/ui/hooks/appState';
 
 type Deps = {
@@ -18,17 +19,25 @@ export function createTopBarViewModelHook({
       currentProjectId,
       projects,
       workflows,
+      editTogglePos,
+      prjSwitcherPos
     ] = useAppState(state => [
       state.ui.editMode,
       state.ui.projectSwitcher.currentProjectId,
       state.entities.projects,
       state.entities.workflows,
+      state.ui.editTogglePos,
+      state.ui.projectSwitcher.pos
     ])
 
     const currentWorkflow = workflows[projects[currentProjectId]?.currentWorkflowId || ''];
-    const showPalette = editMode && !!currentWorkflow;
+    const showPalette = editMode && !!currentWorkflow && (editTogglePos === EditTogglePos.TopBar || editTogglePos === EditTogglePos.Hidden);
+    const showEditToggle = editTogglePos === EditTogglePos.TopBar;
+    const showPrjSwitcher = prjSwitcherPos === ProjectSwitcherPos.TopBar;
     return {
       showPalette,
+      showEditToggle,
+      showPrjSwitcher
     }
   }
 
diff --git a/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.module.scss b/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.module.scss
index 78505d1..738f1f8 100644
--- a/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.module.scss
+++ b/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.module.scss
@@ -6,27 +6,48 @@
 .workflow-switcher-bar {
   background-color: var(--freeter-workflowSwitcherBackground);
   border-bottom: 1px solid var(--freeter-workflowSwitcherBorder);
-  position: fixed;
   z-index: 2;
-  top: 62px;
-  left: 0;
-  right: 0;
   box-sizing: content-box;
   height: 36px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.workflow-switcher-bar-section {
+  box-sizing: border-box;
+  padding: 0 6px;
+  display: flex;
+  &:not(:last-child) {
+    border-right: 1px solid var(--freeter-workflowSwitcherBorder);
+  }
+}
+
+.workflow-switcher-bar-palette-section {
+  padding: 0;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.workflow-switcher-bar-project-switcher-section {
+  align-items: center;
+  flex-shrink: 0;
+  .project-switcher {
+    height: 32px;
+    line-height: 20px;
+    margin-right: 2px;
+  }
 }
 
 .workflow-switcher {
+  flex-grow: 1;
   display: flex;
   margin: 0;
   padding: 0;
-  position: absolute;
   overflow-x: auto;
   overflow-y: hidden;
-  top: -1px;
-  left: 0px;
-  right: 0px;
-  bottom: -1px;
   box-sizing: content-box;
+  margin-bottom: -1px;
   &.is-drop-area {
     background-color: var(--freeter-workflowSwitcherDropAreaBackground);
   }
@@ -39,6 +60,7 @@
   height: 36px;
   margin: 0 24px 0 12px;
   min-width: 100px;
+  padding:0;
   &:first-child {
     padding-left: 12px;
   }
@@ -52,6 +74,7 @@
 .workflow-switcher-item {
   position: relative;
   display: inline-block;
+  margin-top: -1px;
   &:not(:first-child) {
     margin-left:-1px;
   }
diff --git a/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.tsx b/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.tsx
index 9f3d035..d0c39a9 100644
--- a/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.tsx
+++ b/src/renderer/ui/components/workflowSwitcher/workflowSwitcher.tsx
@@ -9,12 +9,22 @@ import * as styles from './workflowSwitcher.module.scss';
 import { ActionBar } from '@/ui/components/basic/actionBar';
 import { WorkflowSwitcherItem } from '@/ui/components/workflowSwitcher/workflowSwitcherItem';
 import { memo } from 'react';
+import { ProjectSwitcherProps } from '@/ui/components/projectSwitcher';
+import { PaletteProps, PalettePropsPos } from '@/ui/components/palette';
 
 type Deps = {
+  EditModeToggle: React.FC;
+  ProjectSwitcher: React.FC<ProjectSwitcherProps>;
+  ManageProjectsButton: React.FC;
+  Palette: React.FC<PaletteProps>;
   useWorkflowSwitcherViewModel: WorkflowSwitcherViewModelHook;
 }
 
 export function createWorkflowSwitcherComponent({
+  EditModeToggle,
+  ProjectSwitcher,
+  ManageProjectsButton,
+  Palette,
   useWorkflowSwitcherViewModel
 }: Deps) {
   function WorkflowSwitcher() {
@@ -42,13 +52,40 @@ export function createWorkflowSwitcherComponent({
       actionBarItems,
       itemActionBarItemsFactory,
       dontShowActionBar,
+      showPrjSwitcherLeft,
+      showPaletteLeft,
+      showPaletteRight,
+      showEditToggleLeft,
+      showPrjSwitcherRight,
+      showEditToggleRight,
     } = useWorkflowSwitcherViewModel();
 
-    return workflows ? (
+    const compPrjSwitcher =
+      <div
+        className={clsx(styles['workflow-switcher-bar-section'], styles['workflow-switcher-bar-project-switcher-section'])}>
+          <ProjectSwitcher className={styles['project-switcher']} />
+          <ManageProjectsButton />
+      </div>
+
+    const compEditToggle =
+      <div className={styles['workflow-switcher-bar-section']}>
+        <EditModeToggle />
+      </div>
+
+    const compPalette =
+      <div className={clsx(styles['workflow-switcher-bar-section'], styles['workflow-switcher-bar-palette-section'])}>
+        <Palette pos={PalettePropsPos.TabBar}/>
+      </div>
+
+    return (
       <div className={styles['workflow-switcher-bar']}>
-        <div
+        {showPrjSwitcherLeft && compPrjSwitcher}
+        {showEditToggleLeft && compEditToggle}
+        {showPaletteLeft && compPalette}
+        {workflows ? <div
           role="tablist"
           className={clsx(
+            styles['workflow-switcher-bar-section'],
             styles['workflow-switcher'],
             isEditMode && dndTargetListItemId === null && styles['is-drop-area'],
             dontShowActionBar && styles['dont-show-action-bar']
@@ -86,8 +123,19 @@ export function createWorkflowSwitcherComponent({
             className={styles['workflow-switcher-action-bar']}
           ></ActionBar>
         </div>
+        : <div
+            className={clsx(
+              styles['workflow-switcher-bar-section'],
+              styles['workflow-switcher'],
+            )}
+          ></div>
+        }
+
+        {showPrjSwitcherRight && compPrjSwitcher}
+        {showPaletteRight && compPalette}
+        {showEditToggleRight && compEditToggle}
       </div>
-    ) : <div/>
+    )
   }
 
   return memo(WorkflowSwitcher);
diff --git a/src/renderer/ui/components/workflowSwitcher/workflowSwitcherViewModel.ts b/src/renderer/ui/components/workflowSwitcher/workflowSwitcherViewModel.ts
index 4db0d6d..293facb 100644
--- a/src/renderer/ui/components/workflowSwitcher/workflowSwitcherViewModel.ts
+++ b/src/renderer/ui/components/workflowSwitcher/workflowSwitcherViewModel.ts
@@ -22,7 +22,7 @@ import { DeleteWorkflowUseCase } from '@/application/useCases/workflowSwitcher/d
 import { ShowContextMenuUseCase } from '@/application/useCases/contextMenu/showContextMenu';
 import { MenuItem, MenuItems } from '@common/base/menu';
 import { EntityList, mapIdListToEntityList } from '@/base/entityList';
-import { CopiedEntitiesItem } from '@/base/state/ui';
+import { CopiedEntitiesItem, EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
 import { Workflow } from '@/base/workflow';
 import { WorkflowEntityDeps } from '@/base/state/entities';
 import { PasteWorkflowUseCase } from '@/application/useCases/workflowSwitcher/pasteWorkflow';
@@ -234,6 +234,10 @@ export function createWorkflowSwitcherViewModelHook({
       resizingItem,
       copiedWorkflowsEntitites,
       copiedWorkflowsList,
+      currentWorkflow,
+      topBarIsHidden,
+      editTogglePos,
+      prjSwitcherPos,
     } = useAppState(state => {
       const { editMode: isEditMode } = state.ui;
       const { currentProjectId } = state.ui.projectSwitcher;
@@ -244,6 +248,10 @@ export function createWorkflowSwitcherViewModelHook({
       const resizingItem = state.ui.worktable.resizingItem;
       const copiedWorkflowsEntitites = state.ui.copy.workflows.entities;
       const copiedWorkflowsList = state.ui.copy.workflows.list;
+      const currentWorkflow = state.entities.workflows[currentWorkflowId || ''];
+      const topBarIsHidden = !state.ui.topBar;
+      const editTogglePos = state.ui.editTogglePos;
+      const prjSwitcherPos = state.ui.projectSwitcher.pos;
       return {
         isEditMode,
         currentProjectId,
@@ -254,6 +262,10 @@ export function createWorkflowSwitcherViewModelHook({
         resizingItem,
         copiedWorkflowsEntitites,
         copiedWorkflowsList,
+        currentWorkflow,
+        topBarIsHidden,
+        editTogglePos,
+        prjSwitcherPos,
       }
     })
 
@@ -369,6 +381,13 @@ export function createWorkflowSwitcherViewModelHook({
       showContextMenuUseCase(contextMenuItems);
     }, [copiedWorkflows, isEditMode])
 
+    const showPrjSwitcherLeft = prjSwitcherPos === ProjectSwitcherPos.TabBarLeft;
+    const showPrjSwitcherRight = prjSwitcherPos === ProjectSwitcherPos.TabBarRight;
+    const showEditToggleLeft = editTogglePos === EditTogglePos.TabBarLeft;
+    const showEditToggleRight = editTogglePos === EditTogglePos.TabBarRight;
+    const showPalette = isEditMode && !!currentWorkflow;
+    const showPaletteLeft = showPalette && showEditToggleLeft;
+    const showPaletteRight = showPalette && !showPaletteLeft && (showEditToggleRight || topBarIsHidden);
 
     return {
       isEditMode,
@@ -394,6 +413,12 @@ export function createWorkflowSwitcherViewModelHook({
       dontShowActionBar,
       onContextMenu,
       onItemContextMenu,
+      showPaletteLeft,
+      showPaletteRight,
+      showPrjSwitcherLeft,
+      showPrjSwitcherRight,
+      showEditToggleLeft,
+      showEditToggleRight,
     }
   }
 
diff --git a/src/renderer/ui/components/worktable/widgetLayout/widgetLayout.tsx b/src/renderer/ui/components/worktable/widgetLayout/widgetLayout.tsx
index 182034f..cf40a29 100644
--- a/src/renderer/ui/components/worktable/widgetLayout/widgetLayout.tsx
+++ b/src/renderer/ui/components/worktable/widgetLayout/widgetLayout.tsx
@@ -55,10 +55,10 @@ export function createWidgetLayoutComponent({
         ? <InAppNote className={styles['no-widgets']}>
             {'The workflow is empty. Enable Edit Mode with '}
             <SvgIcon svg={editMode24Svg} className={styles['edit-mode-icon']} />
-            {' button at the Top Bar to edit it.'}
+            {' button above (or under the Edit menu) to edit it.'}
           </InAppNote>
         : <InAppNote className={styles['no-widgets']}>
-            {'Click or drag a widget from the Add/Paste Widget at the Top Bar to add it to the workflow.'}
+            {'Click or drag a widget from the Add/Paste Widget above to add it to the workflow.'}
           </InAppNote>
       )}
       <div
diff --git a/src/renderer/ui/components/worktable/worktable.module.scss b/src/renderer/ui/components/worktable/worktable.module.scss
index 51b3533..fe928cb 100644
--- a/src/renderer/ui/components/worktable/worktable.module.scss
+++ b/src/renderer/ui/components/worktable/worktable.module.scss
@@ -4,11 +4,8 @@
  */
 
 .no-workflows, .worktable {
-  position: fixed;
-  top: 99px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  position: relative;
+  flex-grow: 1;
 }
 
 .worktable {
diff --git a/src/renderer/ui/components/worktable/worktable.tsx b/src/renderer/ui/components/worktable/worktable.tsx
index 766727b..ac4bd0a 100644
--- a/src/renderer/ui/components/worktable/worktable.tsx
+++ b/src/renderer/ui/components/worktable/worktable.tsx
@@ -41,12 +41,12 @@ export function createWorktableComponent({
         ? <InAppNote className={styles['no-workflows']}>
             {'The project does not have any workflows. Enable Edit Mode with '}
             <SvgIcon svg={editMode24Svg} className={styles['edit-mode-icon']} />
-            {' button at the Top Bar to edit it.'}
+            {' button above (or under the Edit menu) to edit it.'}
           </InAppNote>
         : <InAppNote className={styles['no-workflows']}>
             {'Click '}
             <SvgIcon svg={add14Svg} className={styles['add-icon']} />
-            {' button at the Workflow Bar above to add a workflow to the project.'}
+            {' button at the Tab Bar above to add a workflow to the project.'}
           </InAppNote>
         )
       : <div
diff --git a/tests/renderer/application/useCases/appMenu/initAppMenu.spec.ts b/tests/renderer/application/useCases/appMenu/initAppMenu.spec.ts
index 483c39e..688f6ce 100644
--- a/tests/renderer/application/useCases/appMenu/initAppMenu.spec.ts
+++ b/tests/renderer/application/useCases/appMenu/initAppMenu.spec.ts
@@ -29,6 +29,9 @@ async function setup(initState: AppState, opts?: {
   })
   const toggleEditModeUseCase = jest.fn();
   const toggleMenuBarUseCase = jest.fn();
+  const toggleTopBarUseCase = jest.fn();
+  const setProjectSwitcherPositionUseCase = jest.fn();
+  const setEditTogglePositionUseCase = jest.fn();
   const openApplicationSettingsUseCase = jest.fn();
   const openAboutUseCase = jest.fn();
   const openAppManagerUseCase = jest.fn();
@@ -40,10 +43,13 @@ async function setup(initState: AppState, opts?: {
     shellProvider: shellProviderMock,
     toggleEditModeUseCase,
     toggleMenuBarUseCase,
+    toggleTopBarUseCase,
+    setProjectSwitcherPositionUseCase,
+    setEditTogglePositionUseCase,
     openApplicationSettingsUseCase,
     openAboutUseCase,
     openAppManagerUseCase,
-    openProjectManagerUseCase
+    openProjectManagerUseCase,
   });
   return {
     appStore,
@@ -52,6 +58,8 @@ async function setup(initState: AppState, opts?: {
     initAppMenuUseCase,
     toggleEditModeUseCase,
     toggleMenuBarUseCase,
+    toggleTopBarUseCase,
+    setProjectSwitcherPositionUseCase,
     openAboutUseCase,
   }
 }
@@ -65,7 +73,7 @@ describe('initAppMenuUseCase()', () => {
 
     initAppMenuUseCase();
 
-    expect(appMenuProviderMock.setAutoHide).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setAutoHide).toHaveBeenCalledTimes(1);
   });
 
   it('should subscribe to state changes and call appMenu\'s setAutoHide() with right params, when the menuBar state value changes', async () => {
@@ -86,7 +94,7 @@ describe('initAppMenuUseCase()', () => {
       }
     })
 
-    expect(appMenuProviderMock.setAutoHide).toBeCalledTimes(2);
+    expect(appMenuProviderMock.setAutoHide).toHaveBeenCalledTimes(2);
     expect(appMenuProviderMock.setAutoHide).toHaveBeenNthCalledWith(2, false);
 
     appStore.set({
@@ -118,7 +126,7 @@ describe('initAppMenuUseCase()', () => {
       }
     })
 
-    expect(appMenuProviderMock.setAutoHide).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setAutoHide).toHaveBeenCalledTimes(1);
   });
 
   it('should not call appMenu\'s setAutoHide(), when the new state has isLoading=true', async () => {
@@ -133,7 +141,7 @@ describe('initAppMenuUseCase()', () => {
 
     appStore.set({ ...state, isLoading: true, ui: { ...state.ui, menuBar: false } })
 
-    expect(appMenuProviderMock.setAutoHide).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setAutoHide).toHaveBeenCalledTimes(1);
   });
 
   it('should call appMenu\'s setAutoHide(), when the new state has isLoading=undefined', async () => {
@@ -148,7 +156,7 @@ describe('initAppMenuUseCase()', () => {
 
     appStore.set({ ...state, ui: { ...state.ui, menuBar: false } })
 
-    expect(appMenuProviderMock.setAutoHide).toBeCalledTimes(2);
+    expect(appMenuProviderMock.setAutoHide).toHaveBeenCalledTimes(2);
   });
 
   it('should call appMenu\'s setMenu() right after call', async () => {
@@ -159,7 +167,7 @@ describe('initAppMenuUseCase()', () => {
 
     initAppMenuUseCase();
 
-    expect(appMenuProviderMock.setMenu).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setMenu).toHaveBeenCalledTimes(1);
   });
 
   it('should subscribe to state changes and call appMenu\'s setMenu(), when the new state has changes the app menu depends on', async () => {
@@ -180,7 +188,7 @@ describe('initAppMenuUseCase()', () => {
       }
     })
 
-    expect(appMenuProviderMock.setMenu).toBeCalledTimes(2);
+    expect(appMenuProviderMock.setMenu).toHaveBeenCalledTimes(2);
   });
 
   it('should not call appMenu\'s setMenu(), when the new state does not have changes the app menu depends on', async () => {
@@ -197,7 +205,7 @@ describe('initAppMenuUseCase()', () => {
       ...state,
     })
 
-    expect(appMenuProviderMock.setMenu).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setMenu).toHaveBeenCalledTimes(1);
   });
 
   it('should not call appMenu\'s setMenu(), when the new state has isLoading=true', async () => {
@@ -212,7 +220,7 @@ describe('initAppMenuUseCase()', () => {
 
     appStore.set({ ...state, isLoading: true, ui: { ...state.ui, editMode: false } })
 
-    expect(appMenuProviderMock.setMenu).toBeCalledTimes(1);
+    expect(appMenuProviderMock.setMenu).toHaveBeenCalledTimes(1);
   });
 
   it('should call appMenu\'s setMenu(), when the new state has isLoading=undefined', async () => {
@@ -227,6 +235,6 @@ describe('initAppMenuUseCase()', () => {
 
     appStore.set({ ...state, ui: { ...state.ui, editMode: false } })
 
-    expect(appMenuProviderMock.setMenu).toBeCalledTimes(2);
+    expect(appMenuProviderMock.setMenu).toHaveBeenCalledTimes(2);
   });
 })
diff --git a/tests/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.spec.ts b/tests/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.spec.ts
new file mode 100644
index 0000000..d140741
--- /dev/null
+++ b/tests/renderer/application/useCases/projectSwitcher/setProjectSwitcherPosition.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { createSetProjectSwitcherPositionUseCase } from '@/application/useCases/projectSwitcher/setProjectSwitcherPosition';
+import { AppState } from '@/base/state/app';
+import { ProjectSwitcherPos } from '@/base/state/ui';
+import { fixtureAppState } from '@tests/base/state/fixtures/appState';
+import { fixtureProjectSwitcher } from '@tests/base/state/fixtures/projectSwitcher';
+import { fixtureAppStore } from '@tests/data/fixtures/appStore';
+
+async function setup(initState: AppState) {
+  const [appStore] = await fixtureAppStore(initState);
+  const setProjectSwitcherPosition = createSetProjectSwitcherPositionUseCase({
+    appStore
+  });
+  return {
+    appStore,
+    setProjectSwitcherPosition
+  }
+}
+
+describe('setProjectSwitcherPositionUseCase()', () => {
+  it('should set new pos state', async () => {
+    const initState = fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TabBarLeft
+        })
+      }
+    });
+    const newPos = ProjectSwitcherPos.TopBar
+    const expectState: AppState = {
+      ...initState,
+      ui: {
+        ...initState.ui,
+        projectSwitcher: {
+          ...initState.ui.projectSwitcher,
+          pos: newPos
+        }
+      }
+    }
+    const {
+      appStore,
+      setProjectSwitcherPosition
+    } = await setup(initState)
+
+    setProjectSwitcherPosition(newPos);
+
+    expect(appStore.get()).toEqual(expectState);
+  })
+})
diff --git a/tests/renderer/application/useCases/setEditTogglePosition.spec.ts b/tests/renderer/application/useCases/setEditTogglePosition.spec.ts
new file mode 100644
index 0000000..6e72f76
--- /dev/null
+++ b/tests/renderer/application/useCases/setEditTogglePosition.spec.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { createSetEditTogglePositionUseCase } from '@/application/useCases/setEditTogglePosition';
+import { AppState } from '@/base/state/app';
+import { EditTogglePos } from '@/base/state/ui';
+import { fixtureAppState } from '@tests/base/state/fixtures/appState';
+import { fixtureAppStore } from '@tests/data/fixtures/appStore';
+
+async function setup(initState: AppState) {
+  const [appStore] = await fixtureAppStore(initState);
+  const setEditTogglePosition = createSetEditTogglePositionUseCase({
+    appStore
+  });
+  return {
+    appStore,
+    setEditTogglePosition
+  }
+}
+
+describe('setEditTogglePositionUseCase()', () => {
+  it('should set new pos state', async () => {
+    const initState = fixtureAppState({
+      ui: {
+        editTogglePos: EditTogglePos.TabBarRight
+      }
+    });
+    const newPos = EditTogglePos.TopBar
+    const expectState: AppState = {
+      ...initState,
+      ui: {
+        ...initState.ui,
+        editTogglePos: newPos
+      }
+    }
+    const {
+      appStore,
+      setEditTogglePosition
+    } = await setup(initState)
+
+    setEditTogglePosition(newPos);
+
+    expect(appStore.get()).toEqual(expectState);
+  })
+})
diff --git a/tests/renderer/application/useCases/toggleTopBar.spec.ts b/tests/renderer/application/useCases/toggleTopBar.spec.ts
new file mode 100644
index 0000000..a1107cc
--- /dev/null
+++ b/tests/renderer/application/useCases/toggleTopBar.spec.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright: (c) 2024, Alex Kaul
+ * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+import { createToggleTopBarUseCase } from '@/application/useCases/toggleTopBar';
+import { AppState } from '@/base/state/app';
+import { fixtureAppState } from '@tests/base/state/fixtures/appState';
+import { fixtureAppStore } from '@tests/data/fixtures/appStore';
+
+async function setup(initState: AppState) {
+  const [appStore] = await fixtureAppStore(initState);
+  const toggleTopBarUseCase = createToggleTopBarUseCase({
+    appStore
+  });
+  return {
+    appStore,
+    toggleTopBarUseCase
+  }
+}
+
+describe('toggleTopBarUseCase()', () => {
+  it('should toggle topBar state', async () => {
+    const initState = fixtureAppState({
+      ui: {
+        topBar: false
+      }
+    });
+    const expectState: AppState = {
+      ...initState,
+      ui: {
+        ...initState.ui,
+        topBar: true
+      }
+    }
+    const {
+      appStore,
+      toggleTopBarUseCase
+    } = await setup(initState)
+
+    toggleTopBarUseCase();
+
+    expect(appStore.get()).toEqual(expectState);
+
+    toggleTopBarUseCase();
+
+    expect(appStore.get()).toEqual(initState);
+  })
+})
diff --git a/tests/renderer/base/state/app.spec.ts b/tests/renderer/base/state/app.spec.ts
index 362c77d..a954df8 100644
--- a/tests/renderer/base/state/app.spec.ts
+++ b/tests/renderer/base/state/app.spec.ts
@@ -12,6 +12,7 @@ import { fixtureAppAInColl, fixtureAppBInColl, fixtureProjectAInColl, fixturePro
 import { fixtureProjectSwitcher } from '@tests/base/state/fixtures/projectSwitcher'
 import { fixtureShelf } from '@tests/base/state/fixtures/shelf'
 import { fixtureApps } from '@tests/base/state/fixtures/apps';
+import { EditTogglePos } from '@/base/state/ui';
 
 type Settings = {
   prop: string;
@@ -122,6 +123,8 @@ describe('AppState', () => {
           appConfig: state.ui.appConfig,
           apps: state.ui.apps,
           menuBar: state.ui.menuBar,
+          topBar: state.ui.topBar,
+          editTogglePos: state.ui.editTogglePos,
           projectSwitcher: state.ui.projectSwitcher,
           shelf: state.ui.shelf
         }
@@ -166,6 +169,8 @@ describe('AppState', () => {
           appConfig: fixtureAppConfig({ mainHotkey: 'Accelerator' }),
           apps: fixtureApps({ appIds: ['APP1', 'APP2'] }),
           menuBar: false,
+          topBar: true,
+          editTogglePos: EditTogglePos.TabBarRight,
           projectSwitcher: fixtureProjectSwitcher({ currentProjectId: 'B1', projectIds: ['B1', 'B2'] }),
           shelf: fixtureShelf({ widgetList: [{ id: 'A1', widgetId: 'A1' }] })
         }
diff --git a/tests/renderer/base/state/fixtures/appState.ts b/tests/renderer/base/state/fixtures/appState.ts
index 1f01ef3..f063509 100644
--- a/tests/renderer/base/state/fixtures/appState.ts
+++ b/tests/renderer/base/state/fixtures/appState.ts
@@ -4,6 +4,7 @@
  */
 
 import { AppState } from '@/base/state/app';
+import { EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
 import { StateInStore } from '@common/application/interfaces/store';
 import { deepFreeze } from '@common/helpers/deepFreeze';
 import { fixtureEntitiesState } from '@tests/base/state/fixtures/entitiesState';
@@ -14,6 +15,8 @@ const appState: AppState = {
     dragDrop: {},
     editMode: false,
     menuBar: true,
+    topBar: true,
+    editTogglePos: EditTogglePos.TabBarRight,
     appConfig: {
       mainHotkey: '',
       memSaver: {
@@ -55,6 +58,7 @@ const appState: AppState = {
     projectSwitcher: {
       currentProjectId: '',
       projectIds: [],
+      pos: ProjectSwitcherPos.TabBarLeft
     },
     shelf: {
       widgetList: []
diff --git a/tests/renderer/base/state/fixtures/projectSwitcher.ts b/tests/renderer/base/state/fixtures/projectSwitcher.ts
index 0582d87..792c2d9 100644
--- a/tests/renderer/base/state/fixtures/projectSwitcher.ts
+++ b/tests/renderer/base/state/fixtures/projectSwitcher.ts
@@ -3,12 +3,13 @@
  * GNU General Public License v3.0 or later (see COPYING or https://www.gnu.org/licenses/gpl-3.0.txt)
  */
 
-import { ProjectSwitcherState } from '@/base/state/ui';
+import { ProjectSwitcherPos, ProjectSwitcherState } from '@/base/state/ui';
 import { deepFreeze } from '@common/helpers/deepFreeze';
 
 const projectSwitcherState: ProjectSwitcherState = {
   currentProjectId: 'SOME-ID',
-  projectIds: []
+  projectIds: [],
+  pos: ProjectSwitcherPos.TabBarLeft
 }
 
 export const fixtureProjectSwitcher = (testData?: Partial<ProjectSwitcherState>): ProjectSwitcherState => deepFreeze({
diff --git a/tests/renderer/ui/components/app.spec.tsx b/tests/renderer/ui/components/app.spec.tsx
index 7464779..03d250b 100644
--- a/tests/renderer/ui/components/app.spec.tsx
+++ b/tests/renderer/ui/components/app.spec.tsx
@@ -109,39 +109,11 @@ describe('<App />', () => {
     expect(screen.getByText(/You don't have any projects/i)).toBeInTheDocument();
   });
 
-  it('should display Workflow Switcher, when there are projects in the project switcher', async () => {
-    const projectId = 'PROJECT-ID';
-    await setup(fixtureAppState({
-      entities: {
-        projects: {
-          ...fixtureProjectAInColl({id: projectId})
-        }
-      },
-      ui: {
-        projectSwitcher: fixtureProjectSwitcher({
-          projectIds: [projectId]
-        })
-      }
-    }));
+  it('should display Workflow Switcher', async () => {
+    await setup(fixtureAppState({}));
     expect(screen.getByText(strWorkflowSwitcher)).toBeInTheDocument();
   });
 
-  it('should not display Workflow Switcher, when there are no projects in the project switcher', async () => {
-    await setup(fixtureAppState({
-      entities: {
-        projects: {
-          ...fixtureProjectAInColl()
-        }
-      },
-      ui: {
-        projectSwitcher: fixtureProjectSwitcher({
-          projectIds: ['NO-SUCH-ID']
-        })
-      }
-    }));
-    expect(screen.queryByText(strWorkflowSwitcher)).not.toBeInTheDocument();
-  });
-
   it('should display Worktable, when there are projects', async () => {
     const projectId = 'PROJECT-ID';
     await setup(fixtureAppState({
diff --git a/tests/renderer/ui/components/topBar/editModeToggle.spec.tsx b/tests/renderer/ui/components/editModeToggle.spec.tsx
similarity index 97%
rename from tests/renderer/ui/components/topBar/editModeToggle.spec.tsx
rename to tests/renderer/ui/components/editModeToggle.spec.tsx
index 867766f..f22bced 100644
--- a/tests/renderer/ui/components/topBar/editModeToggle.spec.tsx
+++ b/tests/renderer/ui/components/editModeToggle.spec.tsx
@@ -4,7 +4,7 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import { createEditModeToggleViewModelHook, createEditModeToggleComponent } from '@/ui/components/topBar/editModeToggle'
+import { createEditModeToggleViewModelHook, createEditModeToggleComponent } from '@/ui/components/editModeToggle'
 import userEvent from '@testing-library/user-event';
 import { createAppStateHook } from '@/ui/hooks/appState';
 import { fixtureAppState } from '@tests/base/state/fixtures/appState';
diff --git a/tests/renderer/ui/components/topBar/manageProjects.spec.tsx b/tests/renderer/ui/components/manageProjects.spec.tsx
similarity index 94%
rename from tests/renderer/ui/components/topBar/manageProjects.spec.tsx
rename to tests/renderer/ui/components/manageProjects.spec.tsx
index 34dd61c..a5643b3 100644
--- a/tests/renderer/ui/components/topBar/manageProjects.spec.tsx
+++ b/tests/renderer/ui/components/manageProjects.spec.tsx
@@ -4,7 +4,7 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import { createManageProjectsButtonViewModelHook, createManageProjectsButtonComponent } from '@/ui/components/topBar/manageProjectsButton'
+import { createManageProjectsButtonViewModelHook, createManageProjectsButtonComponent } from '@/ui/components/manageProjectsButton'
 import userEvent from '@testing-library/user-event';
 
 async function setup() {
diff --git a/tests/renderer/ui/components/topBar/palette.spec.tsx b/tests/renderer/ui/components/palette.spec.tsx
similarity index 98%
rename from tests/renderer/ui/components/topBar/palette.spec.tsx
rename to tests/renderer/ui/components/palette.spec.tsx
index 55bd87c..adc97da 100644
--- a/tests/renderer/ui/components/topBar/palette.spec.tsx
+++ b/tests/renderer/ui/components/palette.spec.tsx
@@ -4,8 +4,8 @@
  */
 
 import { render, screen, fireEvent, within } from '@testing-library/react';
-import { createPaletteComponent } from '@/ui/components/topBar/palette/palette';
-import { createPaletteViewModelHook } from '@/ui/components/topBar/palette/paletteViewModel';
+import { createPaletteComponent, PalettePropsPos } from '@/ui/components/palette/palette';
+import { createPaletteViewModelHook } from '@/ui/components/palette/paletteViewModel';
 import { createDragEndUseCase } from '@/application/useCases/dragDrop/dragEnd';
 import { createDragWidgetFromPaletteUseCase } from '@/application/useCases/dragDrop/dragWidgetFromPalette';
 import { createAppStateHook } from '@/ui/hooks/appState';
@@ -20,7 +20,8 @@ import { fixtureWidgetA, fixtureWidgetB, fixtureWidgetC, fixtureWidgetD } from '
 import { fixtureWidgetTypeA } from '@tests/base/fixtures/widgetType';
 
 async function setup(
-  appState: AppState
+  appState: AppState,
+  palettePos = PalettePropsPos.TabBar
 ) {
   const [appStore, appStoreForUi] = await fixtureAppStore(appState);
   const useAppState = createAppStateHook(appStoreForUi);
@@ -49,7 +50,7 @@ async function setup(
     usePaletteViewModel
   })
   const comp = render(
-    <Palette/>
+    <Palette pos={palettePos}/>
   );
 
   return {
diff --git a/tests/renderer/ui/components/topBar/projectSwitcher.spec.tsx b/tests/renderer/ui/components/projectSwitcher.spec.tsx
similarity index 91%
rename from tests/renderer/ui/components/topBar/projectSwitcher.spec.tsx
rename to tests/renderer/ui/components/projectSwitcher.spec.tsx
index 86cde14..d3104e5 100644
--- a/tests/renderer/ui/components/topBar/projectSwitcher.spec.tsx
+++ b/tests/renderer/ui/components/projectSwitcher.spec.tsx
@@ -5,12 +5,13 @@
 
 import { createSwitchProjectUseCase } from '@/application/useCases/projectSwitcher/switchProject';
 import { AppState } from '@/base/state/app';
-import { createProjectSwitcherComponent, createProjectSwitcherViewModelHook} from '@/ui/components/topBar/projectSwitcher';
+import { createProjectSwitcherComponent, createProjectSwitcherViewModelHook} from '@/ui/components/projectSwitcher';
 import { createAppStateHook } from '@/ui/hooks/appState';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import { fixtureProjectSettingsA } from '@tests/base/fixtures/project';
 import { fixtureAppState } from '@tests/base/state/fixtures/appState';
 import { fixtureProjectAInColl, fixtureProjectBInColl } from '@tests/base/state/fixtures/entitiesState';
+import { fixtureProjectSwitcher } from '@tests/base/state/fixtures/projectSwitcher';
 import { fixtureAppStore } from '@tests/data/fixtures/appStore';
 
 async function setup(
@@ -63,10 +64,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idA]
-        }
+        })
       }
     }))
     expect(screen.getByRole('combobox')).toBeEnabled();
@@ -84,10 +85,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idA, idB]
-        }
+        })
       }
     }))
     expect(screen.getAllByRole('option').length).toBe(3);
@@ -102,10 +103,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idA]
-        }
+        })
       }
     }))
     const elOpt = screen.getAllByRole('option')[0];
@@ -123,10 +124,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: '',
           projectIds: [idA]
-        }
+        })
       }
     }))
 
@@ -143,10 +144,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: 'NO-SUCH-ID',
           projectIds: [idA]
-        }
+        })
       }
     }))
 
@@ -163,10 +164,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idA]
-        }
+        })
       }
     }))
 
@@ -184,10 +185,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idB, idA]
-        }
+        })
       }
     }))
 
@@ -208,10 +209,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idB,
           projectIds: [idA, idB]
-        }
+        })
       }
     })
     const {appStore} = await setup(state)
@@ -244,10 +245,10 @@ describe('<ProjectSwitcher />', () => {
         }
       },
       ui: {
-        projectSwitcher: {
+        projectSwitcher: fixtureProjectSwitcher({
           currentProjectId: idA,
           projectIds: [idB, idA]
-        }
+        })
       }
     }))
 
diff --git a/tests/renderer/ui/components/topBar/topBar.spec.tsx b/tests/renderer/ui/components/topBar/topBar.spec.tsx
index 4185517..47f0413 100644
--- a/tests/renderer/ui/components/topBar/topBar.spec.tsx
+++ b/tests/renderer/ui/components/topBar/topBar.spec.tsx
@@ -11,6 +11,8 @@ import { fixtureAppStore } from '@tests/data/fixtures/appStore';
 import { createAppStateHook } from '@/ui/hooks/appState';
 import { fixtureAppState } from '@tests/base/state/fixtures/appState';
 import { fixtureProjectAInColl, fixtureWorkflowAInColl } from '@tests/base/state/fixtures/entitiesState';
+import { fixtureProjectSwitcher } from '@tests/base/state/fixtures/projectSwitcher';
+import { EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
 
 const strEditModeToggle = 'Edit Mode Toggle';
 const strProjectSwitcher = 'Project Switcher';
@@ -52,16 +54,60 @@ async function setup(
 }
 
 describe('<TopBar />', () => {
-  it('should display EditModeToggle', async() => {
-    await setup(fixtureAppState({}));
+  it('should not display EditModeToggle, when its pos!==TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        editTogglePos: EditTogglePos.TabBarLeft
+      }
+    }));
+    expect(screen.queryByText(strEditModeToggle)).not.toBeInTheDocument();
+  });
+  it('should display EditModeToggle, when its pos===TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        editTogglePos: EditTogglePos.TopBar
+      }
+    }));
     expect(screen.getByText(strEditModeToggle)).toBeInTheDocument();
   });
-  it('should display ProjectSwitcher', async() => {
-    await setup(fixtureAppState({}));
+  it('should not display ProjectSwitcher, when its pos!==TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TabBarLeft
+        })
+      }
+    }));
+    expect(screen.queryByText(strProjectSwitcher)).not.toBeInTheDocument();
+  });
+  it('should display ProjectSwitcher, when its pos===TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TopBar
+        })
+      }
+    }));
     expect(screen.getByText(strProjectSwitcher)).toBeInTheDocument();
   });
-  it('should display ManageProjectsButton', async() => {
-    await setup(fixtureAppState({}));
+  it('should not display ManageProjectsButton, when its pos!==TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TabBarLeft
+        })
+      }
+    }));
+    expect(screen.queryByText(strManageProjectsButton)).not.toBeInTheDocument();
+  });
+  it('should display ManageProjectsButton, when its pos===TopBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TopBar
+        })
+      }
+    }));
     expect(screen.getByText(strManageProjectsButton)).toBeInTheDocument();
   });
   it('should display Shelf', async() => {
@@ -70,7 +116,7 @@ describe('<TopBar />', () => {
   });
 
   describe('when edit mode is on', () => {
-    it('should display Palette, when the current project and the current workflow exist', async () => {
+    it('should display Palette, when its pos===TopBar, the current project and the current workflow exist', async () => {
       const workflowId = 'workflow-id';
       const projectId = 'project-id';
       await setup(fixtureAppState({
@@ -80,15 +126,36 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: true,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: [projectId],
             currentProjectId: projectId
-          }
+          })
         }
       }));
       expect(screen.getByText(strPalette)).toBeInTheDocument();
     });
 
+    it('should not display Palette, when its pos!==TopBar, the current project and the current workflow exist', async () => {
+      const workflowId = 'workflow-id';
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: [workflowId], currentWorkflowId: workflowId}),
+          workflows: fixtureWorkflowAInColl({id: workflowId})
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+
     it('should not display Palette, when there are no projects', async () => {
       await setup(fixtureAppState({
         entities: {
@@ -97,10 +164,11 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: true,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: [],
             currentProjectId: ''
-          }
+          })
         }
       }));
       expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
@@ -115,10 +183,11 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: true,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: [projectId],
             currentProjectId: projectId
-          }
+          })
         }
       }));
       expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
@@ -132,10 +201,11 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: true,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: ['no such id'],
             currentProjectId: 'no such id'
-          }
+          })
         }
       }));
       expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
@@ -150,10 +220,11 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: true,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: [projectId],
             currentProjectId: projectId
-          }
+          })
         }
       }));
       expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
@@ -171,10 +242,11 @@ describe('<TopBar />', () => {
         },
         ui: {
           editMode: false,
-          projectSwitcher: {
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
             projectIds: [projectId],
             currentProjectId: projectId
-          }
+          })
         }
       }));
       expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
diff --git a/tests/renderer/ui/components/workflowSwitcher.spec.tsx b/tests/renderer/ui/components/workflowSwitcher.spec.tsx
index 46a9819..5b9d9b4 100644
--- a/tests/renderer/ui/components/workflowSwitcher.spec.tsx
+++ b/tests/renderer/ui/components/workflowSwitcher.spec.tsx
@@ -17,9 +17,19 @@ import { createAddWorkflowUseCase } from '@/application/useCases/workflowSwitche
 import userEvent from '@testing-library/user-event';
 import { fixtureWorktableNotResizing, fixtureWorktableResizingItem } from '@tests/base/state/fixtures/worktable';
 import { createCreateWorkflowSubCase } from '@/application/useCases/workflow/subs/createWorkflow';
+import { EditTogglePos, ProjectSwitcherPos } from '@/base/state/ui';
 
 const newWorkflowId = 'NEW-WORKFLOW-ID';
 
+const strEditModeToggle = 'Edit Mode Toggle';
+const strProjectSwitcher = 'Project Switcher';
+const strManageProjectsButton = 'Manage Projects Button';
+const strPalette = 'Palette';
+const mockEditModeToggle = () => <div>{strEditModeToggle}</div>;
+const mockProjectSwitcher = () => <div>{strProjectSwitcher}</div>;
+const mockManageProjectsButton = () => <div>{strManageProjectsButton}</div>
+const mockPalette = () => <div>{strPalette}</div>;
+
 async function setup(
   appState: AppState,
   opts?: {
@@ -62,7 +72,11 @@ async function setup(
     pasteWorkflowUseCase,
   })
   const WorkflowSwitcher = createWorkflowSwitcherComponent({
-    useWorkflowSwitcherViewModel
+    useWorkflowSwitcherViewModel,
+    EditModeToggle: mockEditModeToggle,
+    ManageProjectsButton: mockManageProjectsButton,
+    Palette: mockPalette,
+    ProjectSwitcher: mockProjectSwitcher,
   })
   const comp = render(
     <WorkflowSwitcher/>
@@ -90,6 +104,201 @@ const dragItemId = 'DRAG-ITEM-ID';
 const overItemId = 'OVER-ITEM-ID';
 
 describe('<WorkflowSwitcher />', () => {
+  it('should not display EditModeToggle, when its pos!==TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        editTogglePos: EditTogglePos.TopBar
+      }
+    }));
+    expect(screen.queryByText(strEditModeToggle)).not.toBeInTheDocument();
+  });
+  it('should display EditModeToggle, when its pos===TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        editTogglePos: EditTogglePos.TabBarLeft
+      }
+    }));
+    expect(screen.getByText(strEditModeToggle)).toBeInTheDocument();
+  });
+  it('should not display ProjectSwitcher, when its pos!==TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TopBar
+        })
+      }
+    }));
+    expect(screen.queryByText(strProjectSwitcher)).not.toBeInTheDocument();
+  });
+  it('should display ProjectSwitcher, when its pos===TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TabBarLeft
+        })
+      }
+    }));
+    expect(screen.getByText(strProjectSwitcher)).toBeInTheDocument();
+  });
+  it('should not display ManageProjectsButton, when its pos!==TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TopBar
+        })
+      }
+    }));
+    expect(screen.queryByText(strManageProjectsButton)).not.toBeInTheDocument();
+  });
+  it('should display ManageProjectsButton, when its pos===TabBar', async() => {
+    await setup(fixtureAppState({
+      ui: {
+        projectSwitcher: fixtureProjectSwitcher({
+          pos: ProjectSwitcherPos.TabBarLeft
+        })
+      }
+    }));
+    expect(screen.getByText(strManageProjectsButton)).toBeInTheDocument();
+  });
+
+  describe('when edit mode is on', () => {
+    it('should display Palette, when its pos===TabBar, the current project and the current workflow exist', async () => {
+      const workflowId = 'workflow-id';
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: [workflowId], currentWorkflowId: workflowId}),
+          workflows: fixtureWorkflowAInColl({id: workflowId})
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.getByText(strPalette)).toBeInTheDocument();
+    });
+
+    it('should not display Palette, when its pos!==TabBar, the current project and the current workflow exist', async () => {
+      const workflowId = 'workflow-id';
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: [workflowId], currentWorkflowId: workflowId}),
+          workflows: fixtureWorkflowAInColl({id: workflowId})
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TopBar,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+
+    it('should not display Palette, when there are no projects', async () => {
+      await setup(fixtureAppState({
+        entities: {
+          projects: {},
+          workflows: fixtureWorkflowAInColl()
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [],
+            currentProjectId: ''
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+
+    it('should not display Palette, when there are no workflows', async () => {
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: [], currentWorkflowId: ''}),
+          workflows: {}
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+
+    it('should not display Palette, when the current project does not exist', async () => {
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl(),
+          workflows: fixtureWorkflowAInColl()
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: ['no such id'],
+            currentProjectId: 'no such id'
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+
+    it('should not display Palette, when the current workflow does not exist', async () => {
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: ['no-such-id'], currentWorkflowId: 'no-such-id'}),
+          workflows: fixtureWorkflowAInColl()
+        },
+        ui: {
+          editMode: true,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+  })
+
+  describe('when edit mode is off', () => {
+    it('should not display Palette', async () => {
+      const workflowId = 'workflow-id';
+      const projectId = 'project-id';
+      await setup(fixtureAppState({
+        entities: {
+          projects: fixtureProjectAInColl({id: projectId, workflowIds: [workflowId], currentWorkflowId: workflowId}),
+          workflows: fixtureWorkflowAInColl({id: workflowId})
+        },
+        ui: {
+          editMode: false,
+          editTogglePos: EditTogglePos.TabBarLeft,
+          projectSwitcher: fixtureProjectSwitcher({
+            projectIds: [projectId],
+            currentProjectId: projectId
+          })
+        }
+      }));
+      expect(screen.queryByText(strPalette)).not.toBeInTheDocument();
+    });
+  })
+
   describe('when current project does not exist', () => {
     it('should not display a tablist', async () => {
       await setup(fixtureAppState({}));
diff --git a/tests/renderer/ui/components/worktable/worktable.spec.tsx b/tests/renderer/ui/components/worktable/worktable.spec.tsx
index 65589c9..e4ab6ec 100644
--- a/tests/renderer/ui/components/worktable/worktable.spec.tsx
+++ b/tests/renderer/ui/components/worktable/worktable.spec.tsx
@@ -88,7 +88,7 @@ describe('<Worktable />', () => {
       },
     }));
     expect(screen.getByText(/The project does not have any workflows/i)).toBeInTheDocument();
-    expect(screen.queryByText(/button at the Workflow Bar/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/button at the Tab Bar/i)).not.toBeInTheDocument();
   });
 
   it('should replace "No Workflows" with "Click button" text, when edit mode is on', async () => {
@@ -106,7 +106,7 @@ describe('<Worktable />', () => {
       },
     }));
     expect(screen.queryByText(/The project does not have any workflows/i)).not.toBeInTheDocument();
-    expect(screen.getByText(/button at the Workflow Bar/i)).toBeInTheDocument();
+    expect(screen.getByText(/button at the Tab Bar/i)).toBeInTheDocument();
   });
 
   it('should display 0 WidgetLayout components, when there are no workflows active in mem saver', async () => {