diff --git a/webview-ui/src/components/FileList/FileNode.tsx b/webview-ui/src/components/FileList/FileNode.tsx
index 453797bf..388353c5 100644
--- a/webview-ui/src/components/FileList/FileNode.tsx
+++ b/webview-ui/src/components/FileList/FileNode.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 
 import { useWorkspaceContext } from "../../Context";
 import FileNodeChildren from "./FileNodeChildren";
-import nextflowIcon from "../../images/nextflow-icon.svg";
+import processIcon from "../../images/process.svg";
 
 import styles from "./styles.module.css";
 
@@ -25,7 +25,7 @@ const FileNode = ({ node }: Props) => {
     <div className={clsx(styles.row, { [styles[typeStyleName]]: !!type })}>
       <label className={clsx(styles.item)}>
         <span className={styles.name} onClick={() => openFile(node)}>
-          <img className={styles.icon} src={nextflowIcon} />
+          <img className={styles.icon} src={processIcon} />
           {node.name}
         </span>
         {type === "processes" && (
diff --git a/webview-ui/src/components/FileList/styles.module.css b/webview-ui/src/components/FileList/styles.module.css
index 0be70efa..4d2bd80b 100644
--- a/webview-ui/src/components/FileList/styles.module.css
+++ b/webview-ui/src/components/FileList/styles.module.css
@@ -19,8 +19,8 @@
       width: 100%;
     }
     & .icon {
-      width: 10px;
-      height: 10px;
+      width: 15px;
+      height: 14px;
       margin-right: 6px;
     }
   }
diff --git a/webview-ui/src/components/FileTree/FileNode.tsx b/webview-ui/src/components/FileTree/FileNode.tsx
index 28e5aabb..9fa76192 100644
--- a/webview-ui/src/components/FileTree/FileNode.tsx
+++ b/webview-ui/src/components/FileTree/FileNode.tsx
@@ -3,6 +3,9 @@ import { useState, useEffect } from "react";
 import { useWorkspaceContext } from "../../Context";
 import styles from "./styles.module.css";
 import { FileNode as FileNodeType } from "../../Context/WorkspaceProvider/types";
+import folderClosed from "../../images/folder-closed.svg";
+import folderOpen from "../../images/folder-open.svg";
+import file from "../../images/file.svg";
 
 type Props = {
   node: FileNodeType;
@@ -53,16 +56,31 @@ const FileNode = ({ node, level = 0, searchTerm }: Props) => {
   }
   if (!hasChildren && !isMatch) return null;
 
+  let icon = null;
+  let iconClassName = "";
+  if (isFolder) {
+    if (expanded) {
+      icon = folderOpen;
+      iconClassName = styles.folderIconOpen;
+    } else {
+      icon = folderClosed;
+      iconClassName = styles.folderIconClosed;
+    }
+  } else {
+    icon = file;
+    iconClassName = styles.fileIcon;
+  }
+
   return (
-    <div className={clsx(styles.row, { [styles.folder]: isFolder })}>
+    <div
+      className={clsx(styles.row, {
+        [styles.folder]: isFolder,
+        [styles.expanded]: expanded
+      })}
+    >
       <label className={clsx(styles.item)}>
         <span className={styles.name} onClick={handleClick}>
-          <i
-            className={clsx(
-              "codicon",
-              isFolder ? "codicon-symbol-method" : "codicon-symbol-method"
-            )}
-          />
+          <img src={icon} className={clsx(styles.icon, iconClassName)} />
           {node.name}
         </span>
         {hasChildren && (
diff --git a/webview-ui/src/components/FileTree/styles.module.css b/webview-ui/src/components/FileTree/styles.module.css
index 9bbced3e..3c2ccd32 100644
--- a/webview-ui/src/components/FileTree/styles.module.css
+++ b/webview-ui/src/components/FileTree/styles.module.css
@@ -21,17 +21,12 @@
       align-items: center;
       padding: 6px 8px;
       width: 100%;
-      & i {
-        margin-right: 6px;
-        opacity: 0.8;
-        font-size: 14px;
-      }
     }
   }
   & .children {
     padding: 0 0 4px 0;
     margin-left: 7px;
-    border-left: 1px solid var(--vscode-dropdown-border);
+    border-left: 1px solid var(--vscode-tree-inactiveIndentGuidesStroke);
   }
   &.folder {
     & > .item > .name {
@@ -42,3 +37,15 @@
     }
   }
 }
+.icon {
+  margin-right: 6px;
+  height: 13px;
+  width: 20px;
+  &.fileIcon {
+    width: 11px;
+    height: 14px;
+  }
+  &.folderIconOpen {
+    transform: translateX(1px);
+  }
+}
diff --git a/webview-ui/src/images/file.svg b/webview-ui/src/images/file.svg
new file mode 100644
index 00000000..094651a3
--- /dev/null
+++ b/webview-ui/src/images/file.svg
@@ -0,0 +1,4 @@
+<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M7.1875 1L0.999999 1L1 13L10 13L10 3.60869L7.1875 1Z" stroke="#606060" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M6.71875 1L6.71875 4L9.95313 4" stroke="#606060" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/webview-ui/src/images/folder-closed.svg b/webview-ui/src/images/folder-closed.svg
new file mode 100644
index 00000000..7d88dd86
--- /dev/null
+++ b/webview-ui/src/images/folder-closed.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.44 12.2H1V1H5.62038L7.86037 2.6H14.44V12.2Z" stroke="#606060" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M15 4.35999H6.55691L5.47999 5.97537H1" stroke="#606060" stroke-width="1.2" />
+</svg>
diff --git a/webview-ui/src/images/folder-open.svg b/webview-ui/src/images/folder-open.svg
new file mode 100644
index 00000000..74fbb707
--- /dev/null
+++ b/webview-ui/src/images/folder-open.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M11.8387 10.0322H1V1H4.72611L6.53256 2.29032H11.8387V4.61289" stroke="#606060" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M1 10.0323L3.70967 5.91565H7.32257L8.19105 4.61292H15L11.8387 10.0323" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/webview-ui/src/images/process.svg b/webview-ui/src/images/process.svg
new file mode 100644
index 00000000..771662b6
--- /dev/null
+++ b/webview-ui/src/images/process.svg
@@ -0,0 +1,14 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_169_5880)">
+		<path d="M13.7068 0.31189H0.312012V13.688H13.7068V0.31189Z" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+		<path d="M2.28345 3.25671H7.71125" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+		<path d="M2.28345 5.60254H9.02141" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+		<path d="M2.28345 7.94836H10.0383" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+		<path d="M2.28345 10.2941H11.6417" stroke="#606060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+	</g>
+	<defs>
+		<clipPath id="clip0_169_5880">
+			<rect width="14.0187" height="14" fill="white" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/webview-ui/src/styles/index.css b/webview-ui/src/styles/index.css
index 4c5de6ae..bc67c49f 100644
--- a/webview-ui/src/styles/index.css
+++ b/webview-ui/src/styles/index.css
@@ -8,7 +8,7 @@ html,
 body,
 #root,
 #root > * {
-  background-color: var(--vscode-editor-background) !important;
+  background-color: var(--vscode-sideBar-background) !important;
 }
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -17,7 +17,6 @@ body,
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  /* background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;