diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
index 48946d3c50835..79c49e6bbc1d3 100644
--- a/packages/core/src/browser/common-frontend-contribution.ts
+++ b/packages/core/src/browser/common-frontend-contribution.ts
@@ -1761,6 +1761,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'focusBorder'
                 }, description: "The color of the row's top and bottom border when the row is focused."
             },
+            // Toolbar Action colors should be aligned with https://code.visualstudio.com/api/references/theme-color#action-colors
+            {
+                id: 'toolbar.hoverBackground', defaults: {
+                    dark: '#5a5d5e50', light: '#b8b8b850', hc: undefined
+                }, description: 'Toolbar background when hovering over actions using the mouse.'
+            },
 
             // Theia Variable colors
             {
@@ -2042,7 +2048,23 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'editorWidget.background',
                 },
                 description: 'Background color of breadcrumb item picker'
-            }
+            },
+            {
+                id: 'mainToolbar.background',
+                defaults: {
+                    dark: Color.lighten('activityBar.background', 0.1),
+                    light: Color.darken('activityBar.background', 0.1),
+                    hc: Color.lighten('activityBar.background', 0.1),
+                },
+                description: 'Background color of shell\'s global toolbar'
+            },
+            {
+                id: 'mainToolbar.foreground', defaults: {
+                    dark: Color.darken('activityBar.foreground', 0.1),
+                    light: Color.lighten('activityBar.foreground', 0.1),
+                    hc: Color.lighten('activityBar.foreground', 0.1),
+                }, description: 'Foreground color of active toolbar item',
+            },
         );
     }
 }
diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
index df6837cd0c99f..44b9b365859db 100644
--- a/packages/core/src/browser/style/index.css
+++ b/packages/core/src/browser/style/index.css
@@ -188,7 +188,7 @@ blockquote {
 }
 
 .action-item:hover {
-    background-color: rgba(50%, 50%, 50%, 0.2);
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 button.theia-button, .theia-button {
diff --git a/packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx b/packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx
index 121fb8a8fab0c..a976da8c5b35d 100644
--- a/packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx
+++ b/packages/toolbar/src/browser/abstract-main-toolbar-contribution.tsx
@@ -22,6 +22,10 @@ import { ReactTabBarToolbarContribution, ToolbarAlignment } from './main-toolbar
 
 @injectable()
 export abstract class AbstractMainToolbarContribution implements ReactTabBarToolbarContribution {
+    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
+    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
+    @inject(CommandService) protected readonly commandService: CommandService;
+
     abstract id: string;
     abstract column: ToolbarAlignment;
     abstract priority: number;
@@ -30,10 +34,6 @@ export abstract class AbstractMainToolbarContribution implements ReactTabBarTool
     protected didChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.didChangeEmitter.event;
 
-    @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry;
-    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
-    @inject(CommandService) protected readonly commandService: CommandService;
-
     abstract render(): React.ReactNode;
 
     toJSON(): { id: string; group: string } {
diff --git a/packages/toolbar/src/browser/easy-search-toolbar-item.tsx b/packages/toolbar/src/browser/easy-search-toolbar-item.tsx
index 5f0a2c88a84e4..db3d2bf198099 100644
--- a/packages/toolbar/src/browser/easy-search-toolbar-item.tsx
+++ b/packages/toolbar/src/browser/easy-search-toolbar-item.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { CommandContribution, CommandRegistry, CommandService, MenuContribution, MenuModelRegistry } from '@theia/core';
+import { Command, CommandContribution, CommandRegistry, CommandService, MenuContribution, MenuModelRegistry, nls } from '@theia/core';
 import { ContextMenuRenderer, quickCommand } from '@theia/core/lib/browser';
 import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
@@ -29,32 +29,26 @@ import {
     ToolbarAlignment,
 } from './main-toolbar-interfaces';
 
-export const SEARCH_FOR_FILE = {
-    id: 'main.toolbar.search.for.file',
-    category: 'Search',
-    label: 'Search for a File',
-};
-
-export const FIND_IN_WORKSPACE_ROOT = {
+export const FIND_IN_WORKSPACE_ROOT = Command.toLocalizedCommand({
     id: 'main.toolbar.find.in.workspace.root',
     category: 'Search',
     label: 'Search Workspace Root for Text',
-};
+}, 'theia/toolbar/searchWorkspaceRootForText', nls.getDefaultKey('Search'));
 
 @injectable()
 export class EasySearchToolbarItem extends AbstractMainToolbarContribution
     implements CommandContribution,
     MenuContribution {
-    id = 'easy-search-toolbar-widget';
-    column = ToolbarAlignment.RIGHT;
-    priority = 1;
-    newGroup = true;
-
     @inject(CommandService) protected readonly commandService: CommandService;
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
     @inject(SearchInWorkspaceQuickInputService) protected readonly searchPickService: SearchInWorkspaceQuickInputService;
     @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
 
+    id = 'easy-search-toolbar-widget';
+    column = ToolbarAlignment.RIGHT;
+    priority = 1;
+    newGroup = true;
+
     protected handleOnClick = (e: ReactInteraction<HTMLSpanElement>): void => this.doHandleOnClick(e);
     protected doHandleOnClick(e: ReactInteraction<HTMLSpanElement>): void {
         e.stopPropagation();
@@ -63,6 +57,7 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
             const { bottom } = toolbar.getBoundingClientRect();
             const { left } = e.currentTarget.getBoundingClientRect();
             this.contextMenuRenderer.render({
+                includeAnchorArg: false,
                 menuPath: MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU,
                 anchor: { x: left, y: bottom },
             });
@@ -74,9 +69,9 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
             <div
                 role='button'
                 tabIndex={0}
-                className='icon-wrapper'
+                className='icon-wrapper action-item item enabled'
                 onClick={this.handleOnClick}
-                title='Search for files, text, commands, and more... '
+                title={nls.localize('theia/toolbar/search/icon', 'Search for files, text, commands, and more...')}
             >
                 <div
                     className='codicon codicon-search'
@@ -103,37 +98,28 @@ export class EasySearchToolbarItem extends AbstractMainToolbarContribution
                 }
             },
         });
-        registry.registerCommand(SEARCH_FOR_FILE, {
-            execute: () => {
-                this.commandService.executeCommand(quickFileOpen.id);
-            },
-        });
     }
 
     registerMenus(registry: MenuModelRegistry): void {
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: quickCommand.id,
-            label: 'Find a Command',
+            label: nls.localize('theia/toolbar/search/findACommand', 'Find a Command'),
             order: 'a',
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
-            commandId: SEARCH_FOR_FILE.id,
+            commandId: quickFileOpen.id,
             order: 'b',
+            label: nls.localize('theia/toolbar/search/searchForAFile', 'Search for a file')
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: SearchInWorkspaceCommands.OPEN_SIW_WIDGET.id,
-            label: 'Search Entire Workspace For Text',
+            label: nls.localize('theia/toolbar/search/searchWorkspaceForText', 'Search Entire Workspace for Text'),
             order: 'c',
         });
         registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
             commandId: FIND_IN_WORKSPACE_ROOT.id,
             order: 'd',
         });
-        registry.registerMenuAction(MainToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU, {
-            commandId: 'languages.workspace.symbol',
-            label: 'Search for a Symbol',
-            order: 'e',
-        });
     }
 }
 
diff --git a/packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts b/packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts
index 96622c11473e1..6a568ea37ebde 100644
--- a/packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts
+++ b/packages/toolbar/src/browser/main-toolbar-command-quick-input-service.ts
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Command, CommandRegistry, CommandService } from '@theia/core';
+import { Command, CommandRegistry, CommandService, nls } from '@theia/core';
 import { QuickCommandService, QuickInputService, QuickPickItem } from '@theia/core/lib/browser';
 import { injectable, inject } from '@theia/core/shared/inversify';
 import { MainToolbarIconDialogFactory } from './main-toolbar-icon-selector-dialog';
@@ -35,22 +35,31 @@ export class MainToolbarCommandQuickInputService {
     protected iconClass: string | undefined;
     protected commandToAdd: Command | undefined;
 
-    protected columnQuickPickItems: QuickPickItem[] = [ToolbarAlignment.LEFT, ToolbarAlignment.CENTER, ToolbarAlignment.RIGHT]
-        .map(column => ({
-            label: `${column.toUpperCase()} Column`,
-            id: column,
-        }));
+    protected columnQuickPickItems: QuickPickItem[] = [
+        {
+            label: nls.localize('theia/toolbar/leftColumn', 'Left Column'),
+            id: ToolbarAlignment.LEFT,
+        },
+        {
+            label: nls.localize('theia/toolbar/centerColumn', 'Center Column'),
+            id: ToolbarAlignment.CENTER,
+        },
+        {
+            label: nls.localize('theia/toolbar/rightColumn', 'Right Column'),
+            id: ToolbarAlignment.RIGHT
+        },
+    ];
 
     openIconDialog(): void {
         this.quickPickItems = this.generateCommandsList();
         this.quickInputService.showQuickPick(this.quickPickItems, {
-            placeholder: 'Find a command to add to the toolbar',
+            placeholder: nls.localize('theia/toolbar/addCommandPlaceholder', 'Find a command to add to the toolbar'),
         });
     }
 
     protected openColumnQP(): Promise<QuickPickItem> {
         return this.quickInputService.showQuickPick(this.columnQuickPickItems, {
-            placeholder: 'Where would you like the command added?',
+            placeholder: nls.localize('theia/toolbar/toolbarLocationPlaceholder', 'Where would you like the command added?')
         });
     }
 
diff --git a/packages/toolbar/src/browser/main-toolbar-constants.ts b/packages/toolbar/src/browser/main-toolbar-constants.ts
index 137ff51f6a6a5..39a1c49129b8f 100644
--- a/packages/toolbar/src/browser/main-toolbar-constants.ts
+++ b/packages/toolbar/src/browser/main-toolbar-constants.ts
@@ -14,46 +14,53 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { MenuPath } from '@theia/core';
+import { Command, MenuPath, nls } from '@theia/core';
+import { CommonCommands } from '@theia/core/lib/browser';
 import URI from '@theia/core/lib/common/uri';
 import { UserStorageUri } from '@theia/userstorage/lib/browser';
 
 export namespace MainToolbarCommands {
-    export const TOGGLE_MAIN_TOOLBAR = {
+    export const TOGGLE_MAIN_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.view.toggle',
-        category: 'View',
+        category: CommonCommands.VIEW_CATEGORY,
         label: 'Toggle Main Toolbar',
-    };
-    export const REMOVE_COMMAND_FROM_TOOLBAR = {
+    }, 'theia/toolbar/toggleToolbar', nls.getDefaultKey(CommonCommands.VIEW_CATEGORY));
+
+    export const REMOVE_COMMAND_FROM_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.remove.command',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Remove Command From Toolbar',
-    };
-    export const INSERT_GROUP_LEFT = {
+    }, 'theia/toolbar/removeCommand');
+
+    export const INSERT_GROUP_LEFT = Command.toLocalizedCommand({
         id: 'main.toolbar.insert.group.left',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Insert Group Separator (Left)',
-    };
-    export const INSERT_GROUP_RIGHT = {
+    }, 'theia/toolbar/insertGroupLeft');
+
+    export const INSERT_GROUP_RIGHT = Command.toLocalizedCommand({
         id: 'main.toolbar.insert.group.right',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Insert Group Separator (Right)',
-    };
-    export const ADD_COMMAND_TO_TOOLBAR = {
+    }, 'theia/toolbar/insertGroupRight');
+
+    export const ADD_COMMAND_TO_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.add.command',
-        category: 'Edit',
+        category: 'Toolbar',
         label: 'Add Command to Toolbar',
-    };
-    export const RESET_TOOLBAR = {
+    }, 'theia/toolbar/addCommand');
+
+    export const RESET_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.restore.defaults',
         category: 'Toolbar',
         label: 'Restore Toolbar Defaults',
-    };
-    export const CUSTOMIZE_TOOLBAR = {
+    }, 'theia/toolbar/restoreDefaults');
+
+    export const CUSTOMIZE_TOOLBAR = Command.toLocalizedCommand({
         id: 'main.toolbar.customize.toolbar',
         category: 'Toolbar',
         label: 'Customize Toolbar (Open JSON)',
-    };
+    }, 'theia/toolbar/openJSON');
 }
 
 export const UserToolbarURI = Symbol('UserToolbarURI');
@@ -66,8 +73,7 @@ export namespace MainToolbarMenus {
 
 export type ReactInteraction<T = Element, U = MouseEvent> = React.MouseEvent<T, U> | React.KeyboardEvent<T>;
 export namespace ReactKeyboardEvent {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    export function is(obj: any): obj is React.KeyboardEvent {
-        return typeof obj === 'object' && 'key' in obj;
+    export function is(obj: unknown): obj is React.KeyboardEvent {
+        return typeof obj === 'object' && !!obj && 'key' in obj;
     }
 }
diff --git a/packages/toolbar/src/browser/main-toolbar-controller.ts b/packages/toolbar/src/browser/main-toolbar-controller.ts
index e4856731ad108..d252804b78982 100644
--- a/packages/toolbar/src/browser/main-toolbar-controller.ts
+++ b/packages/toolbar/src/browser/main-toolbar-controller.ts
@@ -182,7 +182,7 @@ export class MainToolbarController {
     }
 
     async clearAll(): Promise<boolean> {
-        return this.withBusy<boolean>(async () => this.storageProvider.clearAll());
+        return this.withBusy<boolean>(() => this.storageProvider.clearAll());
     }
 
     async openOrCreateJSONFile(doOpen = false): Promise<Widget | undefined> {
diff --git a/packages/toolbar/src/browser/main-toolbar-icon-selector-dialog.tsx b/packages/toolbar/src/browser/main-toolbar-icon-selector-dialog.tsx
index 60cb1d75f550d..6a85ee49266fd 100644
--- a/packages/toolbar/src/browser/main-toolbar-icon-selector-dialog.tsx
+++ b/packages/toolbar/src/browser/main-toolbar-icon-selector-dialog.tsx
@@ -19,8 +19,8 @@ import * as ReactDOM from '@theia/core/shared/react-dom';
 import { injectable, interfaces, inject, postConstruct } from '@theia/core/shared/inversify';
 import debounce = require('@theia/core/shared/lodash.debounce');
 import { ReactDialog } from '@theia/core/lib/browser/dialogs/react-dialog';
-import { DEFAULT_SCROLL_OPTIONS, DialogProps, Message } from '@theia/core/lib/browser';
-import { Command, Disposable } from '@theia/core';
+import { DEFAULT_SCROLL_OPTIONS, Dialog, DialogProps, Message } from '@theia/core/lib/browser';
+import { Command, Disposable, nls } from '@theia/core';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import PerfectScrollbar from 'perfect-scrollbar';
@@ -117,8 +117,8 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
         return (
             <div className='icon-selector-options'>
                 <div className='icon-set-selector-wrapper'>
-                    Icon Set:
-                    {' '}
+                    {nls.localize('theia/toolbar/iconSet', 'Icon Set')}
+                    {': '}
                     <select
                         className='main-toolbar-icon-select theia-select'
                         onChange={this.handleSelectOnChange}
@@ -131,14 +131,14 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
                 <div className='icon-fuzzy-filter'>
                     <input
                         ref={this.assignFilterRef}
-                        placeholder='Filter Icons'
+                        placeholder={nls.localize('theia/toolbar/filterIcons', 'Filter Icons')}
                         type='text'
                         className='icon-filter-input theia-input'
                         onChange={this.debounceHandleSearch}
                         spellCheck={false}
                     />
                 </div>
-            </div>
+            </div >
         );
     }
 
@@ -166,7 +166,7 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
                             <div className={`${this.activeIconPrefix} ${icon}`} />
                         </div>
                     ))
-                        : <div className='search-placeholder'>The search returned no results</div>}
+                        : <div className='search-placeholder'>nls.localizeByDefault('No results found')</div>}
                 </div>
             </div>
         );
@@ -247,7 +247,7 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
                                 onClick={this.doAccept}
                             >
                                 <span>
-                                    Use Default Icon:
+                                    {`${nls.localize('theia/toolbar/useDefaultIcon', 'Use Default Icon')}:`}
                                 </span>
                                 <div className={`main-toolbar-default-icon ${this.toolbarCommand.iconClass}`} />
                             </button>
@@ -260,14 +260,14 @@ export class MainToolbarIconSelectorDialog extends ReactDialog<string | undefine
                         className='theia-button main'
                         onClick={this.doAccept}
                     >
-                        Select Icon
+                        {nls.localize('theia/toolbar/selectIcon', 'Select Icon')}
                     </button>
                     <button
                         type='button'
                         className='theia-button secondary'
                         onClick={this.doClose}
                     >
-                        Cancel
+                        {Dialog.CANCEL}
                     </button>
 
                 </div>
diff --git a/packages/toolbar/src/browser/main-toolbar-interfaces.ts b/packages/toolbar/src/browser/main-toolbar-interfaces.ts
index f609f263f737a..87857c0330c5a 100644
--- a/packages/toolbar/src/browser/main-toolbar-interfaces.ts
+++ b/packages/toolbar/src/browser/main-toolbar-interfaces.ts
@@ -40,13 +40,6 @@ export namespace ToolbarAlignmentString {
         || obj === ToolbarAlignment.CENTER
         || obj === ToolbarAlignment.RIGHT;
 }
-export namespace DeflatedMainToolbarTreeSchema {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    export const is = (obj: any): obj is DeflatedMainToolbarTreeSchema => !!obj && 'items' in obj
-        && 'left' in obj.items
-        && 'center' in obj.items
-        && 'right' in obj.items;
-}
 
 export interface MainToolbarContributionProperties {
     column: ToolbarAlignment;
diff --git a/packages/toolbar/src/browser/main-toolbar-preference-schema.ts b/packages/toolbar/src/browser/main-toolbar-preference-schema.ts
index fc37f31f20029..c12ffe0379e00 100644
--- a/packages/toolbar/src/browser/main-toolbar-preference-schema.ts
+++ b/packages/toolbar/src/browser/main-toolbar-preference-schema.ts
@@ -16,6 +16,7 @@
 
 import { IJSONSchema } from '@theia/core/lib/common/json-schema';
 import * as Ajv from '@theia/core/shared/ajv';
+import { DeflatedMainToolbarTreeSchema } from './main-toolbar-interfaces';
 
 const toolbarColumnGroup: IJSONSchema = {
     'type': 'array',
@@ -68,6 +69,6 @@ export const toolbarConfigurationSchema: IJSONSchema = {
 };
 
 const validator = new Ajv().compile(toolbarConfigurationSchema);
-export function isToolbarPreferences(candidate: unknown): boolean {
+export function isToolbarPreferences(candidate: unknown): candidate is DeflatedMainToolbarTreeSchema {
     return Boolean(validator(candidate));
 }
diff --git a/packages/toolbar/src/browser/main-toolbar-storage-provider.ts b/packages/toolbar/src/browser/main-toolbar-storage-provider.ts
index ac425da568844..f938b4288c282 100644
--- a/packages/toolbar/src/browser/main-toolbar-storage-provider.ts
+++ b/packages/toolbar/src/browser/main-toolbar-storage-provider.ts
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import * as jsoncParser from 'jsonc-parser';
-import { Command, deepClone, Disposable, DisposableCollection, Emitter, MessageService } from '@theia/core';
+import { Command, deepClone, Disposable, DisposableCollection, Emitter, MessageService, nls } from '@theia/core';
 import { injectable, postConstruct, inject, interfaces } from '@theia/core/shared/inversify';
 import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
@@ -36,6 +36,7 @@ import {
     LateInjector,
 } from './main-toolbar-interfaces';
 import { UserToolbarURI } from './main-toolbar-constants';
+import { isToolbarPreferences } from './main-toolbar-preference-schema';
 
 export const TOOLBAR_BAD_JSON_ERROR_MESSAGE = 'There was an error reading your toolbar.json file. Please check if it is corrupt'
     + ' by right-clicking the toolbar and selecting "Customize Toolbar". You can also reset it to its defaults by selecting'
@@ -46,9 +47,7 @@ export class MainToolbarStorageProvider implements Disposable {
     @inject(MonacoTextModelService) protected readonly textModelService: MonacoTextModelService;
     @inject(FileService) protected readonly fileService: FileService;
     @inject(MessageService) protected readonly messageService: MessageService;
-    @inject(LateInjector)
-    protected lateInjector: <T>(id: interfaces.ServiceIdentifier<T>) => T;
-
+    @inject(LateInjector) protected lateInjector: <T>(id: interfaces.ServiceIdentifier<T>) => T;
     @inject(UserToolbarURI) protected readonly USER_TOOLBAR_URI: URI;
 
     get ready(): Promise<void> {
@@ -293,7 +292,7 @@ export class MainToolbarStorageProvider implements Disposable {
                 await this.model.save();
                 return true;
             } catch (e) {
-                const message = `Failed to update the value of '${path.join('.')}' in '${this.USER_TOOLBAR_URI}'.`;
+                const message = nls.localize('theia/toolbar/failedUpdate', "Failed to update the value of '{0}' in '{1}'.", path.join('.'), this.USER_TOOLBAR_URI.path.toString());
                 this.messageService.error(TOOLBAR_BAD_JSON_ERROR_MESSAGE);
                 console.error(`${message}`, e);
                 return false;
@@ -304,7 +303,7 @@ export class MainToolbarStorageProvider implements Disposable {
 
     protected parseContent(fileContent: string): DeflatedMainToolbarTreeSchema | undefined {
         const rawConfig = this.parse(fileContent);
-        if (!DeflatedMainToolbarTreeSchema.is(rawConfig)) {
+        if (!isToolbarPreferences(rawConfig)) {
             return undefined;
         }
         return rawConfig;
diff --git a/packages/toolbar/src/browser/main-toolbar.tsx b/packages/toolbar/src/browser/main-toolbar.tsx
index 1945dae0af696..0cbc47b330a62 100644
--- a/packages/toolbar/src/browser/main-toolbar.tsx
+++ b/packages/toolbar/src/browser/main-toolbar.tsx
@@ -243,7 +243,7 @@ export class MainToolbarImpl extends TabBarToolbar {
                 id={item.id}
                 data-position={stringifiedPosition}
                 key={`${item.id}-${stringifiedPosition}`}
-                className={`${toolbarItemClassNames} main-toolbar-item`}
+                className={`${toolbarItemClassNames} main-toolbar-item action-item`}
                 onMouseDown={this.onMouseDownEvent}
                 onMouseUp={this.onMouseUpEvent}
                 onMouseOut={this.onMouseUpEvent}
diff --git a/packages/toolbar/src/browser/style/easy-search-style.css b/packages/toolbar/src/browser/style/easy-search-style.css
index ed98113a5d1a6..8be5b82aaff4d 100644
--- a/packages/toolbar/src/browser/style/easy-search-style.css
+++ b/packages/toolbar/src/browser/style/easy-search-style.css
@@ -18,6 +18,9 @@
 #easy-search-toolbar-widget {
     position: relative;
 }
+#easy-search-toolbar-widget .icon-wrapper {
+    margin-left: 0;
+}
 
 #easy-search-toolbar-widget:focus,
 #easy-search-toolbar-widget .icon-wrapper:focus,
@@ -27,13 +30,12 @@
 
 #easy-search-toolbar-widget #easy-search-item-icon.codicon-search {
     position: relative;
-    top: 2px;
     font-size: 20px;
 }
 
 #easy-search-toolbar-widget .icon-wrapper .codicon-triangle-down {
     position: absolute;
-    font-size: 11px;
-    top: 14px;
-    right: -1px;
+    font-size: 10px;
+    bottom: -8px;
+    right: 2px;
 }
diff --git a/packages/toolbar/src/browser/style/toolbar-shell-style.css b/packages/toolbar/src/browser/style/toolbar-shell-style.css
index 85ddb42764817..ed2bf49c35179 100644
--- a/packages/toolbar/src/browser/style/toolbar-shell-style.css
+++ b/packages/toolbar/src/browser/style/toolbar-shell-style.css
@@ -14,28 +14,39 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-
-
 #main-toolbar {
-    --toolbarHeight: calc(var(--theia-private-menubar-height) - 3px);
+    --toolbar-height: calc(var(--theia-private-menubar-height) - 2px);
     --toolbar-item-padding: 5px;
     --dropzone-background: rgb(0, 0, 0, 0.3);
+    --toolbar-icon-size: 20px;
 
-    min-height: var(--toolbarHeight);
-    color: var(--theia-activityBar-foreground);
-    background: var(--theia-activityBar-background);
-    box-shadow: 0px 4px 2px -2px var(--theia-widget-shadow);
+    min-height: var(--toolbar-height);
+    color: var(--theia-mainToolbar-foreground);
+    background: var(--theia-mainToolbar-background);
     padding: 2px 4px;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    position: relative;
+}
+
+#main-toolbar .theia-progress-bar-container {
+    position: absolute;
+    bottom: 0;
 }
 
+#main-toolbar .codicon-split-horizontal:before {
+    content: '\eb56';
+    position: relative;
+    top: 1px;
+    right: 1px;
+  }
+
 .main-toolbar-wrapper {
     display: flex;
     flex-direction: row;
     width: 100%;
     overflow: hidden;
-    margin-top: 1px;
 }
 
 .main-toolbar-wrapper .toolbar-column {
@@ -77,11 +88,14 @@
 }
 
 #main-toolbar .main-toolbar-item .codicon {
-    font-size: 20px;
+    font-size: var(--toolbar-icon-size);
+    width: var(--toolbar-icon-size);
+    height: var(--toolbar-icon-size);
+    line-height: var(--toolbar-icon-size);
 }
 
-#main-toolbar .main-toolbar-item.enabled:hover:not(.dragging):not(.active) {
-    transform: scale(1.1);
+#main-toolbar .main-toolbar-item.action-item.enabled:hover:not(.dragging):not(.active) {
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 #main-toolbar .main-toolbar-item .hover-overlay {
@@ -124,7 +138,7 @@
 #main-toolbar .separator {
     width: 1px;
     background-color: var(--theia-activityBar-foreground);
-    opacity: 0.8;
+    opacity: var(--theia-mod-disabled-opacity);
     margin: 0 5px;
 }