diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss
index 2b580d56d..0ba90c1e1 100644
--- a/src/assets/styles/components/_web-ide.scss
+++ b/src/assets/styles/components/_web-ide.scss
@@ -181,6 +181,9 @@
     color: #c2c2c2 !important;
   }
 
+  .file-browser-scroll-container {
+  } 
+
   .file-browser button {
     color: lightgray;
   }
@@ -239,10 +242,6 @@
     // #5e5e5e;
   }
 
-  .file-browser {
-    background: #f9f9f9;
-  }
-
   .file.folder-selected {
     background: rgba(200, 200, 200, 0.2) !important;
     //background: lightgray !important; 
@@ -359,21 +358,15 @@
   }
 
   .file-browser-scroll-container {
-    height: 100%;
-    overflow-y: auto;
-
-  }
-
 
-
-  // top-level element (left-side)
-  .file-browser-outer-container {
+    background: transparent;
     height: 100%;
     overflow-y: auto;
   }
 
-  .file-browser-inner-container {
+  .file-browser-outer-container {
 
+    height: 100%;
     padding: 20px;
 
     .file-menu {
diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js
index 4ed5fb56a..83e59464f 100644
--- a/src/components/shared/webide/index.js
+++ b/src/components/shared/webide/index.js
@@ -121,116 +121,114 @@ function WebIDE({
   return (
     <Row className="web-ide">
       <Col md="3" className="file-browser-outer-container">
-        <div className="file-browser-inner-container" >
-          <FileMenu>
-            <AddProjectButton
-              onAddProject={
-                () => {
-                  updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_WINDOW, activeEditorWindow);
-                }
-              } />
-            <AddProjectFolderButton
-              disabled={ !canAddProjectFolder }
-              onAddProjectFolder={() => {
-                updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_FOLDER_WINDOW, activeEditorWindow);
-              }} />
-            <DeleteFolderButton
-              disabled={ !canDeleteFolder }
-              onClick={
-                () => {
-                  if (selectedPackage) {
-                    updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_PACKAGE_WINDOW, activeEditorWindow);
-                  } else if (selectedFolder) {
-                    updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_FOLDER_WINDOW, activeEditorWindow);
-                  }
-                }
-              } />
-            <AddFileButton
-              onAddFile={() => {
-                updateActiveEditorWindow(EDITOR_WINDOWS.NAME_FILE_WINDOW, activeEditorWindow);
-              }}
-              disabled={ !canAddFile } />
-            <DeleteFileButton
-              disabled={ !selectedFile?.path }
-              onClick={
-                () => {
-                  updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_FILE_WINDOW, activeEditorWindow);
-                }
-              } />
-            <InstallPackageButton
-              onClick={
-                () => {
-                  setSelectedPackage(null);
-                  updateActiveEditorWindow(EDITOR_WINDOWS.INSTALL_PACKAGE_WINDOW, activeEditorWindow)
+        <FileMenu>
+          <AddProjectButton
+            onAddProject={
+              () => {
+                updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_WINDOW, activeEditorWindow);
+              }
+            } />
+          <AddProjectFolderButton
+            disabled={ !canAddProjectFolder }
+            onAddProjectFolder={() => {
+              updateActiveEditorWindow(EDITOR_WINDOWS.NAME_PROJECT_FOLDER_WINDOW, activeEditorWindow);
+            }} />
+          <DeleteFolderButton
+            disabled={ !canDeleteFolder }
+            onClick={
+              () => {
+                if (selectedPackage) {
+                  updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_PACKAGE_WINDOW, activeEditorWindow);
+                } else if (selectedFolder) {
+                  updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_FOLDER_WINDOW, activeEditorWindow);
                 }
               }
-              />
-          </FileMenu>
-          <FileBrowser
-            files={ fileTree }
-            root={ fileTree.path }
-            selectedFile={ selectedFile?.path }
-            selectedFolder={ selectedFolder }
-            selectedPackage={ selectedPackage }
-            onFolderRename={() => {
-              // updateActiveEditorWindow(EDITOR_WINDOWS.RENAME_FOLDER_WINDOW, activeEditorWindow);
-            }}
-            onFileRename={() => {
-              // updateActiveEditorWindow(EDITOR_WINDOWS.RENAME_FILE_WINDOW, activeEditorWindow);
+            } />
+          <AddFileButton
+            onAddFile={() => {
+              updateActiveEditorWindow(EDITOR_WINDOWS.NAME_FILE_WINDOW, activeEditorWindow);
             }}
-            onDeployProject={
-              (e) => {
-                onDeployProject(e);
-                // TODO: open deploy package window
+            disabled={ !canAddFile } />
+          <DeleteFileButton
+            disabled={ !selectedFile?.path }
+            onClick={
+              () => {
+                updateActiveEditorWindow(EDITOR_WINDOWS.DELETE_FILE_WINDOW, activeEditorWindow);
               }
-            }
-            onFolderSelect={
-              (folder) => {
-                // shouldnt deselect anything
-                setSelectedFolder(folder);
+            } />
+          <InstallPackageButton
+            onClick={
+              () => {
+                setSelectedPackage(null);
+                updateActiveEditorWindow(EDITOR_WINDOWS.INSTALL_PACKAGE_WINDOW, activeEditorWindow)
               }
             }
-            onPackageSelect={
-              (pkg) => {
-                // set selected package,
-                // unset selectedFile
-                // TODO: make sure 'remote fetch package' window has correct data.
-
-                setSelectedPackage(pkg);
-                setSelectedFile(null);
-
-                if (!pkg) {
-                  updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow)
-                } else {
-                  updateActiveEditorWindow(EDITOR_WINDOWS.INSTALL_PACKAGE_WINDOW, activeEditorWindow)
-                }
-
+            />
+        </FileMenu>
+        <FileBrowser
+          files={ fileTree }
+          root={ fileTree.path }
+          selectedFile={ selectedFile?.path }
+          selectedFolder={ selectedFolder }
+          selectedPackage={ selectedPackage }
+          onFolderRename={() => {
+            // updateActiveEditorWindow(EDITOR_WINDOWS.RENAME_FOLDER_WINDOW, activeEditorWindow);
+          }}
+          onFileRename={() => {
+            // updateActiveEditorWindow(EDITOR_WINDOWS.RENAME_FILE_WINDOW, activeEditorWindow);
+          }}
+          onDeployProject={
+            (e) => {
+              onDeployProject(e);
+              // TODO: open deploy package window
+            }
+          }
+          onFolderSelect={
+            (folder) => {
+              // shouldnt deselect anything
+              setSelectedFolder(folder);
+            }
+          }
+          onPackageSelect={
+            (pkg) => {
+              // set selected package,
+              // unset selectedFile
+              // TODO: make sure 'remote fetch package' window has correct data.
+
+              setSelectedPackage(pkg);
+              setSelectedFile(null);
+
+              if (!pkg) {
+                updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow)
+              } else {
+                updateActiveEditorWindow(EDITOR_WINDOWS.INSTALL_PACKAGE_WINDOW, activeEditorWindow)
               }
+
             }
-            onFileSelect={
-              async (entry) => {
+          }
+          onFileSelect={
+            async (entry) => {
 
-                setSelectedPackage(null);
+              setSelectedPackage(null);
 
-                // file unselected
-                if (!entry) {
+              // file unselected
+              if (!entry) {
 
-                  setSelectedFile(null);
-                  updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow);
+                setSelectedFile(null);
+                updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow);
 
-                } else {
+              } else {
 
-                  // file selected
-                  const { content } = await onFileSelect(entry);
-                  setSelectedFile({ ...entry, content });
-                  updateActiveEditorWindow(EDITOR_WINDOWS.CODE_EDITOR_WINDOW, activeEditorWindow);
+                // file selected
+                const { content } = await onFileSelect(entry);
+                setSelectedFile({ ...entry, content });
+                updateActiveEditorWindow(EDITOR_WINDOWS.CODE_EDITOR_WINDOW, activeEditorWindow);
 
-                }
+              }
 
 
-              }
-            } />
-        </div>
+            }
+          } />
       </Col>
       <Col className="editor-window-container col-md-8">
         <EditorMenu