diff --git a/app/app/components/folder/documents-list.js b/app/app/components/folder/documents-list.js
index 1da7ead7..9db44990 100644
--- a/app/app/components/folder/documents-list.js
+++ b/app/app/components/folder/documents-list.js
@@ -82,7 +82,12 @@ export default Ember.Component.extend({
 
 			this.set('docId', docId);
 
-			$("#new-document-wizard").insertAfter(`#document-${docId}`);
+			if (docId === '') {
+				$("#new-document-wizard").insertAfter('#wizard-placeholder');
+			} else {
+				$("#new-document-wizard").insertAfter(`#document-${docId}`);
+			}
+
 			$("#new-document-wizard").velocity("transition.slideDownIn", { duration: 300, complete:
 				function() {
 					$("#new-document-name").focus();
diff --git a/app/app/styles/view/folder/document.scss b/app/app/styles/view/folder/document.scss
index 9d64ecaf..30748dbb 100644
--- a/app/app/styles/view/folder/document.scss
+++ b/app/app/styles/view/folder/document.scss
@@ -22,7 +22,7 @@
 }
 
 .documents-list {
-	> .document {
+	.document-item {
 		@include content-container();
 		margin: 0;
 		position: relative;
@@ -82,17 +82,17 @@
 		}
 	}
 
-	> .wizard-item {
+	.wizard-item {
 		margin: 0;
 		padding: 0;
 	}
 
-	> .no-wizard-item {
+	.no-wizard-item {
 		margin: 50px 0;
 		padding: 0;
 	}
 
-	> .selected-card {
+	.selected-card {
 		background-color: $color-card-active !important;
 
 		> .checkbox {
diff --git a/app/app/styles/view/folder/wizard.scss b/app/app/styles/view/folder/wizard.scss
index a2ecbf1c..ea408633 100644
--- a/app/app/styles/view/folder/wizard.scss
+++ b/app/app/styles/view/folder/wizard.scss
@@ -49,7 +49,7 @@
 
 .new-document-wizard {
 	@include border-radius(2px);
-	margin: 30px 0 30px 0;
+	margin: 0 0 30px 0;
 	padding: 30px;
 	border: 1px solid $color-stroke;
 	background-color: $color-off-white;
diff --git a/app/app/templates/components/folder/documents-list.hbs b/app/app/templates/components/folder/documents-list.hbs
index 816aeac2..3d32a594 100644
--- a/app/app/templates/components/folder/documents-list.hbs
+++ b/app/app/templates/components/folder/documents-list.hbs
@@ -1,39 +1,55 @@
-<ul class="documents-list">
+<div class="documents-list">
 	{{#each documents key="id" as |document|}}
-		<li id="document-{{document.id}}" class="document {{if document.selected "selected-card"}}">
-			{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
-				<div class="title">{{ document.name }}</div>
-				<div class="snippet">{{ document.excerpt }}</div>
-				<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
-			{{/link-to}}
-			<div class="checkbox" {{action 'selectDocument' document.id}}>
-				{{#if session.authenticated}}
-					{{#if document.selected}}
-						<i class="material-icons">check_box</i>
-					{{else}}
-						<i class="material-icons">check_box_outline_blank</i>
+		<div id="document-{{document.id}}">
+			<div class="document-item {{if document.selected "selected-card"}}">
+				{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
+					<div class="title">{{ document.name }}</div>
+					<div class="snippet">{{ document.excerpt }}</div>
+					<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
+				{{/link-to}}
+				<div class="checkbox" {{action 'selectDocument' document.id}}>
+					{{#if session.authenticated}}
+						{{#if document.selected}}
+							<i class="material-icons">check_box</i>
+						{{else}}
+							<i class="material-icons">check_box_outline_blank</i>
+						{{/if}}
 					{{/if}}
-				{{/if}}
-			</div>
-		</li>
-		{{#if canCreate}}
-			<li class="wizard-item start-document" {{action 'onShowDocumentWizard' document.id}}>
-				<div class="start-button">
-					<div class="round-button round-button-small button-green">
-						<i class="material-icons">add</i>
-					</div>
-					<div class="label">document</div>
 				</div>
-			</li>
-		{{else}}
-			<li class="no-wizard-item" />
-		{{/if}}
+			</div>
+			{{#if canCreate}}
+				<div class="wizard-item start-document" {{action 'onShowDocumentWizard' document.id}}>
+					<div class="start-button">
+						<div class="round-button round-button-small button-green">
+							<i class="material-icons">add</i>
+						</div>
+						<div class="label">document</div>
+					</div>
+				</div>
+			{{else}}
+				<div class="no-wizard-item" />
+			{{/if}}
+		</div>
 	{{/each}}
-</ul>
+</div>
 
-<div id="wizard-placeholder" class="hide margin-top-50" />
 {{folder/start-document folder=folder isEditor=isEditor onImport=(action 'onImport') onHideDocumentWizard=(action 'onHideDocumentWizard')}}
 
 {{#if emptyState}}
-	<div class="regular-button button-red" {{action 'onDelete'}}>delete</div>
+	{{#if canCreate}}
+		<div class="start-document start-document-empty-state" {{action 'onShowDocumentWizard' ''}}>
+			<div class="start-button">
+				<div class="round-button round-button-small button-green">
+					<i class="material-icons">add</i>
+				</div>
+				<div class="label">document</div>
+			</div>
+		</div>
+	{{/if}}
+{{/if}}
+
+<div id="wizard-placeholder" class="hide" />
+
+{{#if emptyState}}
+	<div class="regular-button button-red margin-top-50" {{action 'onDelete'}}>delete space</div>
 {{/if}}