diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss
index ca5dc53b5e89..d75e2a60fc2e 100644
--- a/packages/ide/src/fill/dialog.scss
+++ b/packages/ide/src/fill/dialog.scss
@@ -1,13 +1,14 @@
 .msgbox {
+	-webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
+	box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07);
 	padding-top: 25px;
 	padding-left: 40px;
 	padding-right: 40px;
 	padding-bottom: 25px;
-	background: #242424;
-	-webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	-moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	border-radius: 3px;
+	border-radius: 8px;
+	text-align: center;
+	background-color: var(--primary);
 }
 
 .msgbox.input {
@@ -15,55 +16,57 @@
 	width: 100%;
 }
 
-.msgbox > .input {
-	background: #141414;
+.msgbox>.input {
+	background: var(--list-active-selection-foreground);
 	border: none;
 	box-sizing: border-box;
 	padding: 10px;
 	width: 100%;
 }
 
-.msgbox > .msg {
+.msgbox>.msg {
+	color: var(--header-foreground);
 	font-size: 16px;
 	font-weight: bold;
 }
 
-.msgbox > .detail {
+.msgbox>.detail {
 	font-size: 14px;
 	margin: 5px 0;
 }
 
-.msgbox > .errors {
+.msgbox>.errors {
 	margin-top: 20px;
 }
 
-.msgbox > .errors {
+.msgbox>.errors {
 	color: #f44747;
 }
 
-.msgbox > .button-wrapper {
+.msgbox>.button-wrapper {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin-top: 20px;
 }
 
-.msgbox > .button-wrapper > button {
+.msgbox>.button-wrapper>button {
 	flex: 1;
-	border-radius: 2px;
+	border-radius: px;
 	padding: 10px;
 	color: white;
-	background: #3d3d3d;
+	background: var(--list-active-selection-background);
 	border: 0px;
 	cursor: pointer;
 	opacity: 0.8;
+	outline: none;
 }
 
-.msgbox > .button-wrapper > button:hover {
+.msgbox>.button-wrapper>button:hover {
 	opacity: 1;
 }
 
-.msgbox > .button-wrapper > button:not(:last-child) {
+.msgbox>.button-wrapper>button:not(:last-child) {
 	margin-right: 8px;
 }
 
@@ -80,4 +83,4 @@
 	top: 0;
 	transition: 300ms opacity ease;
 	z-index: 15;
-}
+}
\ No newline at end of file
diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss
index b1ffb8462d48..1bc41018b081 100644
--- a/packages/vscode/src/dialog.scss
+++ b/packages/vscode/src/dialog.scss
@@ -1,21 +1,12 @@
 .dialog {
-	--primary: #2A2E37;
-	--border: black;
-	--faded: #a0a1a5;
-	--disabled: #888;
-	--header-background: #161616;
-	--header-foreground: white;
-	--list-active-selection-background: rgb(0, 120, 160);
-	--list-active-selection-foreground: white;
-	--list-hover-background: rgb(36, 39, 46);
 	font-family: inherit;
-	box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07);
 	background-color: var(--primary);
 	display: flex;
 	flex-direction: column;
 	user-select: none;
 	overflow: hidden;
-	border-radius: 5px;
+	border-radius: 8px;
 
 	.monaco-tl-twistie {
 		display: none;
@@ -24,28 +15,57 @@
 	.title {
 		background-color: var(--header-background);
 		color: var(--header-foreground);
-		padding: 1px;
-		font-size: 11px;
-		font-weight: normal;
-		text-transform: uppercase;
+		line-height: initial;
+		font-size: 1.5em;
+		font-weight: 200;
+		margin-bottom: 5px;
+		text-transform: unset;
 		white-space: nowrap;
 		padding: 5px 10px;
 	}
 
 	.nav {
 		display: flex;
+		// flex: 1;
 		flex-direction: row;
 		padding: 4px;
+		cursor: pointer;
 		border-bottom: 1px solid var(--border);
 	}
 
+	.path-editor {
+		display: block;
+		flex-direction: row;
+		margin-top: 12px;
+		margin-bottom: 12px;
+		font-size: 1.02em;
+		border: 1px solid var(--border);
+		color: var(--header-foreground);
+		background-color: var(--header-background);
+		border-radius: 4px;
+	}
+
+	.path-div {
+		display: block;
+		flex-direction: row;
+		padding: 4px;
+		border: 1px solid var(--header-background);
+	}
+
+	.hidden {
+		display: none;
+	}
+
 	.path {
 		display: flex;
 		flex-direction: row;
 
 		.path-part {
 			padding: 5px;
+			list-style-type: none;
+			border: 1px solid var(--border);
 			border-radius: 3px;
+			margin-bottom: 5px;
 			font-size: 1.02em;
 			cursor: pointer;
 
@@ -58,11 +78,17 @@
 				color: var(--list-active-selection-foreground);
 			}
 		}
+
+		.path-btn {
+			align-content: right;
+			font-size: 1.02em;
+			border: 1px solid var(--border);
+		}
 	}
 
 	.dialog-grid {
 		display: grid;
-		grid-template-columns: 2fr 0.2fr 0.8fr;
+		grid-template-columns: 2fr 0.3fr 0.8fr;
 	}
 
 	.headings {
@@ -71,14 +97,14 @@
 	}
 
 	.file-area {
-		flex: 1;
+		flex: auto;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
 
 		.dialog-entry {
 			cursor: pointer;
-			font-size: 1.02em;
+			font-size: 12px;
 			padding: 0px 8px;
 
 			.dialog-entry-info {
@@ -93,11 +119,11 @@
 			}
 
 			.dialog-entry-size {
-				text-align: right;
+				text-align: left;
 			}
 
 			.dialog-entry-mtime {
-				padding-left: 8px;
+				padding-left: 0px;
 			}
 
 			&:hover {
@@ -109,7 +135,8 @@
 				color: var(--list-active-selection-foreground);
 			}
 
-			&.disabled, &.disabled:hover {
+			&.disabled,
+			&.disabled:hover {
 				background-color: var(--primary);
 				color: var(--disabled);
 				cursor: initial;
@@ -132,15 +159,16 @@
 
 		button {
 			background: transparent;
+			font-size: 1.02em;
 			outline: none;
-			border: 0;
-			color: var(--faded);
-			padding: 10px;
+			color: var(--titlebar);
+			padding: 6px;
 			padding-left: 18px;
 			padding-right: 18px;
 			transition: 150ms background ease, 150ms color ease;
 			cursor: pointer;
-			border-radius: 5px;
+			border: 1px solid var(--border);
+			border-radius: 3px;
 
 			&:hover {
 				background: var(--titlebar);
@@ -148,13 +176,25 @@
 			}
 		}
 
-		button[disabled], button[disabled]:hover {
+		button[disabled],
+		button[disabled]:hover {
 			color: var(--disabled);
 			cursor: initial;
 		}
+
+		button[active],
+		button[disabled]:hover {
+			color: var(--list-active-selection-foreground);
+			cursor: initial;
+		}
 	}
 }
 
-.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before {
+.monaco-shell .monaco-tree.focused.no-focused-item:focus:before,
+.monaco-shell .monaco-list:not(.element-focused):focus:before {
 	display: none;
 }
+
+.folder-icon-dialog {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==);
+}
\ No newline at end of file
diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts
index 4ec06306e18d..bee6fe005496 100644
--- a/packages/vscode/src/dialog.ts
+++ b/packages/vscode/src/dialog.ts
@@ -42,7 +42,6 @@ export interface OpenDialogOptions extends CommonDialogOptions {
 		readonly openFile?: boolean;
 	};
 }
-
 export interface SaveDialogOptions extends CommonDialogOptions {
 	readonly type: DialogType.Save;
 	readonly nameFieldLabel?: string;
@@ -73,7 +72,6 @@ interface DialogEntry {
 	readonly lastModified: string;
 	readonly isDisabled?: boolean;
 }
-
 /**
  * Open and save dialogs.
  */
@@ -84,6 +82,7 @@ class Dialog {
 
 	private readonly filesNode: HTMLElement;
 	private readonly pathNode: HTMLElement;
+	private readonly barNode: HTMLElement;
 
 	private readonly entryList: ObjectTree<DialogEntry, string>;
 	private readonly background: HTMLElement;
@@ -112,35 +111,12 @@ class Dialog {
 		this.background.style.background = "rgba(0, 0, 0, 0.25)";
 
 		this.root = document.createElement("div");
-		this.root.style.width = "850px";
-		this.root.style.height = "600px";
+		this.root.style.width = "750px";
+		this.root.style.height = "500px";
 		this.background.appendChild(this.root);
 		(document.querySelector(".monaco-workbench") || document.body).appendChild(this.background);
 		this.root.classList.add("dialog");
 
-		const setProperty = (vari: string, id: string): void => {
-			const getColor = (id: string): string | undefined => {
-				const ts = workbench.serviceCollection.get<IThemeService>(IThemeService) as IThemeService;
-				const c = ts.getTheme().getColor(id);
-				if (!c) {
-					return;
-				}
-
-				return c.toString();
-			};
-			const c = getColor(id);
-			if (c) {
-				this.root.style.setProperty(vari, c);
-			}
-		};
-		setProperty("--primary", "sideBar.background");
-		setProperty("--list-active-selection-background", "list.activeSelectionBackground");
-		setProperty("--list-active-selection-foreground", "list.activeSelectionForeground");
-		setProperty("--list-hover-background", "list.hoverBackground");
-		setProperty("--header-background", "sideBarSectionHeader.background");
-		setProperty("--header-foreground", "sideBarSectionHeader.foreground");
-		setProperty("--border", "panel.border");
-
 		this.background.addEventListener("contextmenu", (event) => {
 			event.preventDefault();
 		});
@@ -166,11 +142,52 @@ class Dialog {
 
 		const navItems = document.createElement("div");
 		navItems.classList.add("nav");
+		navItems.setAttribute("title", "Click to edit");
+		const pathBar = document.createElement("input");
+		pathBar.classList.add("path-editor", "hidden");
 
 		this.pathNode = document.createElement("div");
 		this.pathNode.classList.add("path");
+		this.barNode = document.createElement("div");
 		navItems.appendChild(this.pathNode);
 		this.root.appendChild(navItems);
+		pathBar.appendChild(this.barNode);
+		this.root.appendChild(pathBar);
+		// event listener for pathBar
+		pathBar.addEventListener("keydown", async (e) => {
+			try {
+				if (e.key === "Enter") {
+					navItems.classList.remove("hidden");
+					pathBar.classList.add("hidden");
+					const stat = await util.promisify(fs.stat)(pathBar.value);
+					if (stat.isDirectory() && (this.options as OpenDialogOptions).properties.openFile) {
+						this.path = pathBar.value;
+					} else {
+						this.selectEmitter.emit(pathBar.value);
+					}
+				} else if (e.key === "Escape") {
+					navItems.classList.remove("hidden");
+					pathBar.classList.add("hidden");
+				}
+			} catch (err) {
+				this.errorEmitter.emit(err);
+			}
+		});
+
+		// open/close input field for path
+		const togglePathBar = () => {
+			if (pathBar.classList.contains("hidden")) {
+				this.barNode.classList.add("path-editor");
+				pathBar.defaultValue = this._path!;
+				pathBar.addEventListener("submit", togglePathBar);
+				pathBar.classList.remove("hidden");
+				navItems.classList.add("hidden");
+				pathBar.select();
+			} else {
+				pathBar.classList.add("hidden");
+			}
+		};
+		navItems.addEventListener("click", togglePathBar);
 
 		const headingsNode = document.createElement("div");
 		headingsNode.className = "headings dialog-grid";
@@ -334,6 +351,8 @@ class Dialog {
 	 * Build and insert the path shown at the top of the dialog.
 	 */
 	private buildPath(): void {
+		// @ts-ignore
+		document.querySelector(".path-editor")!.defaultValue = this._path;
 		while (this.pathNode.lastChild) {
 			this.pathNode.removeChild(this.pathNode.lastChild);
 		}
@@ -353,10 +372,12 @@ class Dialog {
 				pathPartNode.classList.add("active");
 			}
 
-			pathPartNode.addEventListener("click", () => {
+			pathPartNode.addEventListener("click", (e) => {
+				e.stopPropagation();
 				this.path = "/" + pathParts.slice(0, i + 1).join("/");
 			});
 
+			document.querySelector(".monaco-scrollable-element")!.setAttribute("overflow", "scroll");
 			this.pathNode.appendChild(pathPartNode);
 		}
 	}
@@ -365,7 +386,6 @@ class Dialog {
 		this.list(directory).then((value) => {
 			this._path = directory;
 			this.buildPath();
-
 			while (this.filesNode.lastChild) {
 				this.filesNode.removeChild(this.filesNode.lastChild);
 			}
@@ -471,6 +491,9 @@ class DialogEntryRenderer implements ITreeRenderer<DialogEntry, string, DialogEn
 		templateData.icon.hidden = classes.length === 0;
 		classes.forEach((c) => {
 			try {
+				if (c === "folder-icon") {
+					c = "folder-icon-dialog";
+				}
 				templateData.icon.classList.add(c);
 			} catch (ex) {
 				// Nothin needed. Sometimes bad classes are given
@@ -506,8 +529,12 @@ class DialogEntryRenderer implements ITreeRenderer<DialogEntry, string, DialogEn
 	private humanReadableSize(bytes: number): string {
 		const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 		const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1000)), units.length - 1);
+		const number = (bytes / Math.pow(1000, i)).toFixed(2);
+		let result = `${number} ${units[i]}`;
+		if (result.includes("undefined" || "NaN")) {
+			result = "";
+		}
 
-		return (bytes / Math.pow(1000, i)).toFixed(2)
-			+ " " + units[i];
+		return result;
 	}
 }
diff --git a/packages/vscode/src/workbench.ts b/packages/vscode/src/workbench.ts
index c2499e87a1f6..0cc16d50c6aa 100644
--- a/packages/vscode/src/workbench.ts
+++ b/packages/vscode/src/workbench.ts
@@ -20,6 +20,7 @@ import { PasteAction } from "./fill/paste";
 
 import { ExplorerItem, ExplorerModel } from "vs/workbench/contrib/files/common/explorerModel";
 import { IEditorGroup } from "vs/workbench/services/editor/common/editorGroupsService";
+import { IThemeService, ITheme } from "vs/platform/theme/common/themeService";
 import { IEditorService, IResourceEditor } from "vs/workbench/services/editor/common/editorService";
 import { INotificationService } from "vs/platform/notification/common/notification";
 import { IProgressService2, ProgressLocation } from "vs/platform/progress/common/progress";
@@ -128,9 +129,11 @@ export class Workbench {
 
 	public set serviceCollection(collection: ServiceCollection) {
 		this._serviceCollection = collection;
-
 		const contextKeys = this.serviceCollection.get(IContextKeyService) as IContextKeyService;
 		const bounded = this.clipboardContextKey.bindTo(contextKeys);
+		const ts = this.serviceCollection.get(IThemeService) as IThemeService;
+		this.updateThemeVars(ts.getTheme()); // update CSS vars when page is loaded
+		ts.onThemeChange(this.updateThemeVars); // update CSS vars when theme is updated
 		client.clipboard.onPermissionChange((enabled) => {
 			bounded.set(enabled);
 		});
@@ -235,6 +238,27 @@ export class Workbench {
 			}
 		}
 	}
+	/**
+	 * Updates CSS vars on page load and when the theme is updated
+	 */
+	private updateThemeVars(theme: ITheme): void {
+		const colorString = (id: any) => {
+			const colorObj = theme.getColor(id);
+			if (colorObj) {
+				return colorObj.toString();
+			} else {
+				return;
+			}
+		};
+		const root = document.documentElement;
+		root.style.setProperty("--primary", colorString("sideBar.background")!);
+		root.style.setProperty("--list-active-selection-background", colorString("list.activeSelectionBackground")!);
+		root.style.setProperty("--list-active-selection-foreground", colorString("list.activeSelectionForeground")!);
+		root.style.setProperty("--list-hover-background", colorString("list.hoverBackground")!);
+		root.style.setProperty("--header-background", colorString("sideBarSectionHeader.background")!);
+		root.style.setProperty("--header-foreground", colorString("sideBarSectionHeader.foreground")!);
+		root.style.setProperty("--border", colorString("panel.border")!);
+	}
 }
 
 export const workbench = new Workbench();