diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg
new file mode 100644
index 00000000..a66e9ff6
--- /dev/null
+++ b/client/images/triangle-arrow-down-white.svg
@@ -0,0 +1,12 @@
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Down Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+            <g id="libraries" transform="translate(21.000000, 32.000000)">
+                <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/triangle-arrow-right-white.svg b/client/images/triangle-arrow-right-white.svg
new file mode 100644
index 00000000..ff4a6b67
--- /dev/null
+++ b/client/images/triangle-arrow-right-white.svg
@@ -0,0 +1,12 @@
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Right Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFFFFF">
+            <g id="libraries" transform="translate(21.000000, 32.000000)">
+                <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index a749eb9c..0131651d 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
 
-const downArrowUrl = require('../../../images/down-arrow.svg');
+const downArrowUrl = require('../../../images/down-filled-triangle.svg');
 const folderRightUrl = require('../../../images/triangle-arrow-right.svg');
 const folderDownUrl = require('../../../images/triangle-arrow-down.svg');
 const fileUrl = require('../../../images/file.svg');
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index c7f825dc..00145a0e 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -4,8 +4,7 @@ import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 import ConnectedFileNode from './FileNode';
 
-const folderUrl = require('../../../images/folder.svg');
-const downArrowUrl = require('../../../images/down-arrow.svg');
+const downArrowUrl = require('../../../images/down-filled-triangle.svg');
 
 class Sidebar extends React.Component {
   constructor(props) {
@@ -72,10 +71,7 @@ class Sidebar extends React.Component {
       <nav className={sidebarClass} title="file-navigation" >
         <div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
           <h3 className="sidebar__title">
-            <span className="sidebar__folder-icon">
-              <InlineSVG src={folderUrl} />
-            </span>
-            <span>project-folder</span>
+            <span>Sketch Files</span>
           </h3>
           <div className="sidebar__icons">
             <button
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 10899bb2..d6bc73f4 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -189,7 +189,7 @@
 	display: flex;
 	position: absolute;
 	flex-direction: column;
-	top: 100%;
+	top: 95%;
 	height: auto;
 	z-index: 9999;
 	border-radius: #{6 / $base-font-size}rem;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 6f85f718..3ef7e420 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -70,8 +70,8 @@ $themes: (
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
     table-row-stripe-color: #d6d6d6,
-    codefold-icon-open: url(../images/down-arrow.svg),
-    codefold-icon-closed: url(../images/right-arrow.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down.svg),
+    codefold-icon-closed: url(../images/triangle-arrow-right.svg),
 
     form-title-color: rgba(51, 51, 51, 0.87),
     form-secondary-title-color: $middleGray,
@@ -133,8 +133,8 @@ $themes: (
     nav-hover-color: $p5js-pink,
     error-color: $p5js-pink,
     table-row-stripe-color: #3f3f3f,
-    codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
 
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
@@ -193,8 +193,8 @@ $themes: (
     nav-hover-color: $yellow,
     error-color: $p5-contrast-pink,
     table-row-stripe-color: #3f3f3f,
-    codefold-icon-open: url(../images/down-arrow-white.svg),
-    codefold-icon-closed: url(../images/right-arrow-white.svg),
+    codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
+    codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
 
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 45fe2739..9c852e9d 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -75,15 +75,15 @@
 .file-item__spacer {
   flex-shrink: 0;
   .sidebar__file-item & {
-    width: #{33 / $base-font-size}rem;
+    width: #{19 / $base-font-size}rem;
     .sidebar__file-item & {
-      width: #{53 / $base-font-size}rem;
+      width: #{39 / $base-font-size}rem;
       .sidebar__file-item & {
-        width: #{73 / $base-font-size}rem;
+        width: #{59 / $base-font-size}rem;
         .sidebar__file-item & {
-          width: #{93 / $base-font-size}rem;
+          width: #{79 / $base-font-size}rem;
           .sidebar__file-item & {
-            width: #{113 / $base-font-size}rem;
+            width: #{99 / $base-font-size}rem;
           }
         }
       }