diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index ff80821c..c69bc5a4 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -99,7 +99,7 @@ $screen-md-max: $screen-lg-min - 1 !default
 $sidebar-width: 50px !default
 
 /* Project specifics */
-$project_nav-width: 240px !default
+$project_nav-width: 250px !default
 $project-sidebar-width: 50px !default
 $project_header-height: 50px !default
 $project_footer-height: 30px !default
@@ -120,10 +120,7 @@ $list-node-children-item-width_square: 160px !default
 $z-index-base: 13 !default
 
 .container
-	@media (min-width: $screen-sm-min) 
-		width: 750px
-
-	@media (min-width: $screen-md-min) 
+	@media (min-width: $screen-md-min)
 		width: 1100px
 
 	@media (min-width: $screen-lg-min)
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 00e7e571..f326e84d 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -10,6 +10,12 @@ body.workshops
 body.blog
 	background-color: white
 
+	#project_nav,
+	#project_nav-container
+		+media-xs
+			width: 100%
+		width: $project_nav-width * 1.5
+
 #project-container
 	display: flex
 	flex-direction: row
@@ -40,9 +46,8 @@ body.blog
 		text-align: left
 
 #project_nav-container
-	position: fixed
-	z-index: $z-index-base + 5
-	width: $project_nav-width
+	+media-lg
+		width: $project_nav-width * 1.33
 
 	+media-xs
 		display: block
@@ -50,6 +55,11 @@ body.blog
 		position: relative
 		height: initial !important
 
+	position: fixed
+	z-index: $z-index-base + 5
+	width: $project_nav-width
+
+
 #project_sidebar
 	width: $project-sidebar-width
 	z-index: $z-index-base + 6
@@ -125,14 +135,23 @@ body.blog
 			&.active
 				background-color: $color-background-nav-light
 
+				// The tiny triangle
 				&:after
-					content: ''
+					+media-xs
+						border-top-color: $project-sidebar-background
+						border-right-color: transparent
+						left: 50%
+						right: initial
+						transform: translateX(-50%)
+						top: 0
+
 					border: 7px solid transparent
 					border-right-color: $project-sidebar-background
+					content: ''
 					display: block
 					position: absolute
-					top: 50%
 					right: 0
+					top: 50%
 					transform: translateY(-50%)
 
 				a
@@ -174,20 +193,23 @@ body.blog
 
 /* Container for navigation on the left */
 #project_nav
+	+media-lg
+		width: $project_nav-width * 1.33
+
+	+media-xs
+		width: initial
+
+	background-color: $project-sidebar-background
 	display: block
+	left: 0
+	position: relative
 	visibility: visible
 	width: $project_nav-width
-	position: relative
-	background-color: $project-sidebar-background
-	left: 0
 
 	&.about
 		display: none
 		visibility: hidden
 
-	+media-xs
-		width: initial
-
 
 /* Header with name and node edit tools */
 #project_nav-header,
@@ -714,12 +736,15 @@ ul.project_nav-edit-list
 
 /* The actual navigation tree container */
 #project_tree
-	padding: 0 0 5px 0// some padding on top/bottom of jstree
-	position: relative
-	margin-top: $project_header-height
+	+media-xs
+		margin-top: 0
+
 	background-color: $project-sidebar-background
 	border-right: thin solid $color-background
+	margin-top: $project_header-height
 	overflow-y: auto
+	padding: 0 0 5px 0// some padding on top/bottom of jstree
+	position: relative
 
 	&.edit
 		margin-top: 0
@@ -2669,8 +2694,7 @@ section.node-children
 #project_context
 	#blog_container
 		padding: 0
-		#blog_index-container,
-		#blog_post-container
+		#blog_index-container
 			width: 100%
 			padding: 0
 			border: none
diff --git a/src/styles/base.sass b/src/styles/base.sass
index b57e3df9..f57d8ae5 100644
--- a/src/styles/base.sass
+++ b/src/styles/base.sass
@@ -158,32 +158,31 @@ strong, b
 header.navbar-header
 	position: relative
 	margin: 0
-	z-index: 1 // to be on top of the overlay
 	height: 100%
+	z-index: 1 // to be on top of the overlay
 
 	.navbar-toggle
 		color: white
+		float: none
+		margin: 5px 0 0 10px
 
+		i
+			margin: 0
 
 .navbar-overlay
-	display: none
-	position: absolute
-	top: 0
-	left: 0
-	right: 0
 	bottom: 0
-	z-index: 0
-	width: 100%
+	display: none
+	left: 0
 	height: 100%
-
+	position: absolute
+	right: 0
+	top: 0
 	transition: background-color 350ms ease-in-out
+	width: 100%
+	z-index: 0
 
 	&+.navbar-container
 		.search-input
-			margin: 8px 0
-			border-radius: 3px
-			border: thin solid transparent
-
 			+media-lg
 				border: thin solid rgba(white, .2)
 
@@ -191,6 +190,9 @@ header.navbar-header
 					&::placeholder
 						color: rgba(white, .8)
 
+			border: thin solid transparent
+			border-radius: 3px
+			margin: 8px 0
 
 	&.is-active
 		background-color: $color-background-nav
@@ -346,8 +348,10 @@ nav.sidebar
 				+position-center-translate
 
 	.navbar-brand
-		display: flex
+		+media-xs
+			padding-left: 10px
 		align-items: center
+		display: flex
 		color: white
 		padding:
 			top: 8px
@@ -1037,11 +1041,6 @@ button, .btn
 		background-color: rgba($color-background-nav, .7)
 
 .search-input
-	position: relative
-	float: left
-	padding: 0
-	margin: 0
-
 	+media-lg
 		max-width: 350px
 	+media-md
@@ -1051,11 +1050,14 @@ button, .btn
 	+media-xs
 		display: block
 		margin: 0 10px
-		width: 75%
 		position: absolute
 		z-index: $z-index-base
-		top: 2px
-		left: 40px
+		right: 5px
+	position: relative
+	float: left
+	padding: 0
+	margin: 0
+
 
 	.search-icon
 		position: absolute
@@ -1089,17 +1091,17 @@ button, .btn
 
 	#cloud-search, .tt-hint
 		+text-overflow-ellipsis
-		outline: none
 		border: thin solid $color-background-nav-light
 		border-radius: 3px
+		color: white
 		font:
 			size: 1em
 			weight: 400
 			family: $font-body
 		margin: 0
-		padding: 0 20px 0 40px
 		min-height: 32px
-		color: white
+		outline: none
+		padding: 0 20px 0 40px
 		transition: border 100ms ease-in-out
 
 		&:focus
diff --git a/src/styles/blog.sass b/src/styles/blog.sass
index 0167f7f8..cca3b6fc 100644
--- a/src/styles/blog.sass
+++ b/src/styles/blog.sass
@@ -8,160 +8,148 @@
 
 
 #blog_container
-	padding:
-		top: 15px
-		bottom: 15px
-	display: flex
-	justify-content: center
-
 	+media-xs
 		flex-direction: column
 		padding-top: 0
+	display: flex
+	padding:
+		top: 15px
+		bottom: 15px
 
-	#blog_post-edit-form
-		padding: 20px
+#blog_post-edit-form
+	padding: 20px
 
-		.form-group
-			position: relative
-			margin: 0 auto 30px auto
-			font-family: $font-body
+	.form-group
+		position: relative
+		margin: 0 auto 30px auto
+		font-family: $font-body
 
-			input, textarea, select
+		input, textarea, select
+			+input-generic
+
+			&#fileupload
+				color: $color-info
+
+		&.tags .select2-container
+			.select2-selection
 				+input-generic
 
-				&#fileupload
-					color: $color-info
+		select
+			text-transform: capitalize
 
-			&.tags .select2-container
-				.select2-selection
-					+input-generic
-
-			select
-				text-transform: capitalize
+		label
+			+label-generic
+			text-transform: capitalize
 
+		&.error
+			color: $color-danger
+			background-color: $color-background-light
+			padding: 10px 15px
+			border: thin solid lighten($color-danger, 10%)
+			border-top: 2px solid $color-danger
+			border-bottom-left-radius: 3px
+			border-bottom-right-radius: 3px
 			label
-				+label-generic
-				text-transform: capitalize
-
-			&.error
 				color: $color-danger
-				background-color: $color-background-light
-				padding: 10px 15px
-				border: thin solid lighten($color-danger, 10%)
-				border-top: 2px solid $color-danger
-				border-bottom-left-radius: 3px
-				border-bottom-right-radius: 3px
-				label
-					color: $color-danger
-					font-weight: 500
+				font-weight: 500
 
-			&.file
-				background-color: $color-background-light
-				padding: 10px 15px
-				border: thin solid $color-background
-				border-top: 2px solid $color-info
-				border-bottom-left-radius: 3px
-				border-bottom-right-radius: 3px
+		&.file
+			background-color: $color-background-light
+			padding: 10px 15px
+			border: thin solid $color-background
+			border-top: 2px solid $color-info
+			border-bottom-left-radius: 3px
+			border-bottom-right-radius: 3px
 
-		.form-upload-progress
-			.form-upload-progress-bar
-				margin-top: 5px
-				background-color: $color-success
-				height: 5px
-				min-width: 0
-				border-radius: 3px
+	.form-upload-progress
+		.form-upload-progress-bar
+			margin-top: 5px
+			background-color: $color-success
+			height: 5px
+			min-width: 0
+			border-radius: 3px
 
-		.form-group
-			.node-preview-thumbnail
-				display: block
+	.form-group
+		.node-preview-thumbnail
+			display: block
 
-			&.attachments
+		&.attachments
+			+clearfix
+
+			.form-control
+				padding: 0
+				margin: 0
+				border: none
+				list-style-type: none
 				+clearfix
 
-				.form-control
-					padding: 0
-					margin: 0
-					border: none
-					list-style-type: none
-					+clearfix
+				label[for^='attachments-']
+					margin-top: 15px
+					font-weight: 400
 
-					label[for^='attachments-']
-						margin-top: 15px
-						font-weight: 400
-
-					div[id^='attachments-']
-						margin-bottom: 15px
-						border-top: thin solid $color-text-dark-hint
+				div[id^='attachments-']
+					margin-bottom: 15px
+					border-top: thin solid $color-text-dark-hint
 
 
-		.form-group.description,
-		.form-group.summary,
-		.form-group.content
-			position: relative
+	.form-group.description,
+	.form-group.summary,
+	.form-group.content
+		position: relative
 
-			textarea
-				width: 100%
-				min-height: 220px
+		textarea
+			width: 100%
+			min-height: 220px
 
-				line-height: 1.5em
-				border: 1px solid $color-background-dark
-				border-radius: 3px
-				margin: 0 auto 10px auto
-				padding: 10px
-				color: $color-text-dark
+			line-height: 1.5em
+			border: 1px solid $color-background-dark
+			border-radius: 3px
+			margin: 0 auto 10px auto
+			padding: 10px
+			color: $color-text-dark
 
-				transition: all 300ms ease-in-out
-				resize: vertical
+			transition: all 300ms ease-in-out
+			resize: vertical
 
 
-				&:focus
-					border: 1px solid $color-info
-					outline: none
+			&:focus
+				border: 1px solid $color-info
+				outline: none
 
-				&.field-error
-					border-color: $color-danger
+			&.field-error
+				border-color: $color-danger
 
-			.md-preview-loading
+		.md-preview-loading
+			position: absolute
+			left: 85px
+			padding-top: 5px
+			font-size: .9em
+			color: $color-text-dark-secondary
+			display: none
+
+		.node-edit-form-md-preview
+
+			+markdown-preview-container
+
+			&:before
+				content: 'Live Preview'
 				position: absolute
-				left: 85px
-				padding-top: 5px
-				font-size: .9em
+				top: -25px
+				left: 20px
+				font-size: .7em
 				color: $color-text-dark-secondary
-				display: none
+				transition: color 150ms ease-in-out
 
-			.node-edit-form-md-preview
+			&:after
+				content: 'Markdown Supported'
+				position: absolute
+				top: -25px
+				right: 20px
+				font-size: .7em
+				color: $color-text-dark-hint
+				transition: color 150ms ease-in-out
 
-				+markdown-preview-container
-
-				margin:
-					left: -20px
-					right: -20px
-
-				padding:
-					top: 20px
-					left: 0
-					right: 0
-
-				&:before
-					content: 'Live Preview'
-					position: absolute
-					top: -25px
-					left: 20px
-					font-size: .7em
-					color: $color-text-dark-secondary
-					transition: color 150ms ease-in-out
-
-				&:after
-					content: 'Markdown Supported'
-					position: absolute
-					top: -25px
-					right: 20px
-					font-size: .7em
-					color: $color-text-dark-hint
-					transition: color 150ms ease-in-out
-
-
-			.node-edit-form-md-preview:empty
+			&:empty
 				color: transparent
 				margin: 0 auto
 				padding: 0 10px
@@ -171,206 +159,193 @@
 					color: transparent
 
 
-		#node-edit-form-md-preview
-			padding: 20px
+#blog_post-create-container,
+#blog_post-edit-container
+	padding: 25px
 
-	&.post-create
-		flex-direction: row-reverse
+#blog_index-container,
+#blog_post-create-container,
+#blog_post-edit-container
+	+container-box
+	width: 75%
 
-	#blog_post-create-container,
-	#blog_post-edit-container
-		padding: 25px
-
-	#blog_index-container,
-	#blog_post-container,
-	#blog_post-create-container,
-	#blog_post-edit-container
-		+container-box
+	+media-xs
+		border-radius: 0
+		width: 100%
+		clear: both
+		display: block
+	+media-sm
+		width: 60%
+	+media-md
+		width: 70%
+	+media-lg
 		width: 75%
 
-		+media-xs
-			border-radius: 0
-			width: 100%
-			clear: both
-			display: block
-		+media-sm
-			width: 60%
-		+media-md
-			width: 70%
-		+media-lg
-			width: 75%
+	.blog_index-header
+		border-top-left-radius: 3px
+		border-top-right-radius: 3px
+		display: block
+		overflow: hidden
+		position: relative
+		text-align: center
+		width: 100%
 
-		.blog_index-header
+		img
+			width: 100%
+
+	.blog_index-item
+		+media-lg
+			max-width: 880px
+		+media-md
+			max-width: 880px
+		+media-sm
+			max-width: 780px
+
+		margin: 15px auto
+
+		&:hover
+			.item-info a
+				color: $color-primary
+
+		.item-picture
+			position: relative
+			width: 100%
+			max-height: 350px
+			min-height: 200px
+			height: auto
+			overflow: hidden
 			border-top-left-radius: 3px
 			border-top-right-radius: 3px
-			display: block
-			overflow: hidden
-			position: relative
-			text-align: center
-			width: 100%
+			+clearfix
 
 			img
+				+position-center-translate
 				width: 100%
-
-		.blog_index-item
-			+media-lg
-				max-width: 780px
-
-			margin: 0 auto 15px auto
-
-			&:hover
-				.item-info a
-					color: $color-primary
-
-
-			.item-picture
-				position: relative
-				width: 100%
-				max-height: 350px
-				min-height: 200px
-				height: auto
-				overflow: hidden
 				border-top-left-radius: 3px
 				border-top-right-radius: 3px
-				+clearfix
-
-				img
-					+position-center-translate
-					width: 100%
-					border-top-left-radius: 3px
-					border-top-right-radius: 3px
-
-				+media-xs
-					min-height: 150px
-				+media-sm
-					min-height: 150px
-				+media-md
-					min-height: 250px
-				+media-lg
-					min-height: 250px
-
-			.item-title
-				color: $color-text-dark
-				display: block
-				font:
-					family: $font-body
-					size: 2em
-				padding: 25px 25px 10px 25px
-
-			.item-info
-				color: $color-text-dark-secondary
-				font-size: 1em
-				padding:
-					left: 25px
-					right: 25px
-
-				a
-					color: $color-text-dark-secondary
-					&:hover
-						color: $color-primary
-
-			.item-content
-				+node-details-description
-				padding: 35px 25px
-				font-size: 1.3em
-
-				+media-xs
-					padding:
-						left: 0
-						right: 0
-
-				img
-					display: block
-					margin: 0 auto
-
-			.item-meta
-				color: $color-text-dark-secondary
-				padding:
-					left: 25px
-					right: 25px
-
-				+media-xs
-					padding:
-						left: 10px
-						right: 10px
-
-		.button-create, .button-edit
-			position: absolute
-			z-index: 2
-			top: 20px
-			right: 20px
-			+button($color-success, 6px, true)
-
-		.button-edit
-			right: 170px
-			top: 15px
-
-		.item-picture+.button-back+.button-edit
-			right: 20px
-			top: 20px
-
-		.comments-container
-			padding:
-				left: 20px
-				right: 20px
-			max-width: 680px
-			margin: 0 auto
 
+			+media-xs
+				min-height: 150px
+			+media-sm
+				min-height: 150px
+			+media-md
+				min-height: 250px
 			+media-lg
+				min-height: 250px
+
+		.item-title
+			color: $color-text-dark
+			display: block
+			font:
+				family: $font-body
+				size: 1.8em
+			padding-bottom: 10px
+			padding-top: 20px
+
+		.item-info
+			color: $color-text-dark-secondary
+			font-size: 1em
+
+			a
+				color: $color-text-dark-secondary
+				&:hover
+					color: $color-primary
+
+		.item-content
+			+node-details-description
+			padding: 35px 25px
+			font-size: 1.3em
+
+			+media-xs
 				padding:
 					left: 0
 					right: 0
 
-			.comment-reply-container
-				background-color: transparent
-
-				.comment-reply-field
-					textarea, .comment-reply-meta
-						background-color: $color-background-light
-
-					&.filled
-						.comment-reply-meta
-							background-color: $color-success
-
-			.comment-reply-form
-				+media-xs
-					padding:
-						left: 0
-
-	#blog_post-edit-form
-		padding: 0
-
-		.form-group
-			label
-				text-transform: capitalize
-
-		.form-group.content
-			.form-control
-				min-height: 350px
-
-		.form-group.url
-			label
-				text-transform: uppercase
-
-		.form-group.picture
-			+text-overflow-ellipsis
-
 			img
 				display: block
-				max-width: 100%
+				margin: 0 auto
 
-			a
-				display: block
-				padding: 10px 0
-				text-align: right
+		.item-meta
+			color: $color-text-dark-secondary
+			padding:
+				left: 25px
+				right: 25px
 
-			.original a
-				color: $color-info
-			.delete a
-				color: $color-danger
+			+media-xs
+				padding:
+					left: 10px
+					right: 10px
 
-		.form-upload-file-meta
-			width: initial
+	.button-create,
+	.button-edit
+		+button($color-success, 3px, true)
+
+	.item-picture+.button-back+.button-edit
+		right: 20px
+		top: 20px
+
+	.comments-container
+		padding:
+			left: 20px
+			right: 20px
+		max-width: 680px
+		margin: 0 auto
+
+		+media-lg
+			padding:
+				left: 0
+				right: 0
+
+		.comment-reply-container
+			background-color: transparent
+
+			.comment-reply-field
+				textarea, .comment-reply-meta
+					background-color: $color-background-light
+
+				&.filled
+					.comment-reply-meta
+						background-color: $color-success
+
+		.comment-reply-form
+			+media-xs
+				padding:
+					left: 0
+
+#blog_post-edit-form
+	padding: 0
+
+	.form-group
+		label
+			text-transform: capitalize
+
+	.form-group.content
+		.form-control
+			min-height: 350px
+
+	.form-group.url
+		label
+			text-transform: uppercase
+
+	.form-group.picture
+		+text-overflow-ellipsis
+
+		img
+			display: block
+			max-width: 100%
+
+		a
+			display: block
+			padding: 10px 0
+			text-align: right
+
+		.original a
+			color: $color-info
+		.delete a
+			color: $color-danger
+
+	.form-upload-file-meta
+		width: initial
 
 #blog_post-edit-title
 	padding: 0
@@ -403,9 +378,9 @@
 		margin: 0
 
 	.button-back
+		+button($color-info, 6px, true)
 		display: block
 		width: 100%
-		+button($color-info, 6px)
 		margin: 15px 0 0 0
 
 	#blog_post-edit-form
@@ -478,7 +453,6 @@
 				transition: opacity 150ms ease-in-out
 				+position-center-translate
 
-
 		.item-info
 			padding: 10px 20px
 			background-color: white
@@ -501,63 +475,33 @@
 					text-decoration: none
 					color: $color-primary
 
-#blog_post-container
-	.button-create
-		+button($color-success, 6px)
-	.button-back
-		position: absolute
-		top: 15px
-		right: 15px
-		z-index: 2
-		+button($color-info, 6px, true)
-	.button-create, .button-edit
-		position: absolute
-		z-index: 2
-		top: 15px
-		right: 15px
-		+button($color-success, 6px, true)
-
-	.button-edit
-		right: 170px
-		top: 15px
-
-	.button-back+.button-edit
-		right: 15px
-		top: 15px
-
 
 #blog_container
 	&.cloud-blog
 		#blog_index-container,
-		#blog_post-container,
 		#blog_post-create-container,
 		#blog_post-edit-container
 			width: 90%
 			padding: 25px 30px 20px 30px
 
-		#blog_index-container+#blog_index-sidebar,
-		#blog_post-container+#blog_index-sidebar
+		#blog_index-container+#blog_index-sidebar
 			display: none
 
-	&.cloud-blog #blog_index-container,
-	&.cloud-blog #blog_post-container,
-	#blog_index-container, #blog_post-container
-		padding: 0 0 50px 0
-
+	#blog_index-container,
+	&.cloud-blog #blog_index-container
 		+media-sm
 			width: 100%
-			padding: 25px 20px 20px 20px
+
 		+media-xs
 			width: 100%
-			padding: 0 0 20px 0
+
+		padding: 0 0 50px 0
+		margin: 0 auto
 
 		.blog_index-item
-			padding: 25px 80px 20px 80px
-			position: relative
-
 			+media-xs
 				width: 100%
-				padding: 25px 0 20px 0
+				padding: 10px 25px
 
 			&.list
 				margin: 0 auto
@@ -613,29 +557,21 @@
 				a.item-title, .item-info
 					padding-left: 70px
 
-	#blog_index-container,
-	#blog_post-container
-		.blog_index-item
-			padding: 25px 10px 20px 10px
-			position: relative
+#blog_index-container
+	.blog_index-item
+		position: relative
+
+		+media-xs
+			padding: 25px 0 20px 0
+
+		&.list
+			padding: 15px 10px
+			margin: 0
 
 			+media-xs
-				padding: 25px 0 20px 0
-
-			&.list
+				width: 100%
 				padding: 15px 10px
-				margin: 0 25px
-
-				+media-xs
-					width: 100%
-					padding: 15px 10px
-					margin: 0
-
-	&.cloud-blog #blog_post-container,
-	#blog_post-container
-		.blog_index-item
-			padding-top: 55px
-			font-size: .9em
+				margin: 0
 
 
 .blog-archive-navigation
@@ -674,3 +610,14 @@
 	right: 0
 	top: 0
 	z-index: 1
+
+#project_context
+	.blog_index-item
+		+media-xs
+			margin-left: 0
+		padding: 0
+		margin-left: 10px
+
+	#blog_container
+		.comments-container
+			margin-left: 30px
diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass
index 4485423f..b485e69b 100644
--- a/src/styles/plugins/_jstree.sass
+++ b/src/styles/plugins/_jstree.sass
@@ -8,57 +8,41 @@ $tree-color-highlight-background-text: white
 .jstree-default
 	/* list item */
 	.jstree-node
-		position: relative
-		max-width: 100% // Needed for ellipsis on long names
-		margin: 0 !important
-		color: $tree-color-text
-		background-image: none !important
-
-		transition: color 100ms ease-in-out, background-color 150ms ease-in-out
-
 		+media-xs
 			width: 100%
+		background-image: none !important
+		border: none
+		color: $tree-color-text
+		margin: 0 !important
+		max-width: 100% // Needed for ellipsis on long names
+		position: relative
 
 		&[data-node-type="asset"],
 		&[data-node-type="texture"],
 		&[data-node-type="hdri"]
 			.jstree-anchor
 				padding-right: 20px
-				&:before
-					font-family: 'pillar-font'
-					content: '\e84d'
-					color: $color-text-dark-hint
-					font-size: .8em
-					padding: 0 5px
-					position: absolute
-					right: 5px
 
-				&.jstree-clicked
-					&:before
-						color: $tree-color-highlight-background-text !important
-					&:after
-						display: none
 			&[is_free='true']
 				.jstree-anchor
 					padding-right: initial
-					&:before
-						display: none
+
 					&:after
-						display: none
+						color: $tree-color-highlight
+						content: '\e84e' !important
+						display: block
 
 		&[data-node-type="page"],
 		&[data-node-type="blog"]
-			font-size: 1.15em
 			color: darken($tree-color-highlight, 5%)
-			border-bottom: 2px solid $tree-color-highlight
-
-			&:hover
-				border-bottom-color: lighten($tree-color-highlight, 5%)
+			font-weight: bold
 
 			.jstree-anchor
 				padding: 5px 8px 1px 8px
+
 				&:after
 					top: 3px !important
+
 			.jstree-icon
 				display: none
 
@@ -95,7 +79,7 @@ $tree-color-highlight-background-text: white
 						font-size: .85em !important
 
 				.jstree-anchor
-					border-left: thin solid rgba($tree-color-text, .2)
+					box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
 
 		/* Closed Folder */
 		// &.jstree-closed
@@ -110,51 +94,58 @@ $tree-color-highlight-background-text: white
 
 		/* The text of the last level item */
 		.jstree-anchor
-			width: 100%
-			padding-left: 28px
-			padding-right: 10px
-			height: inherit
-			line-height: 26px
-			white-space: nowrap
-			text-overflow: ellipsis
-			overflow: hidden
-			border-bottom: thin solid transparent
-			transition: none
-
 			+media-xs
 				width: 98%
 				padding: 0 !important
+			border: none
+			height: inherit
+			line-height: 26px
+			overflow: hidden
+			padding-left: 28px
+			padding-right: 10px
+			text-overflow: ellipsis
+			transition: none
+			transition: color 50ms ease-in-out, background-color 100ms ease-in-out
+			white-space: nowrap
+			width: 100%
 
+			// Little arrow on the right
+			&:after
+				content: '\e83a' !important
+				font-family: 'pillar-font'
+				color: white
+				display: none
+				position: absolute
+				right: 7px
+				top: 1px
+
+			// Icon, not selected
 			.jstree-icon
-				margin: 0 !important
-				font-size: 95% !important
 				color: $color-text-dark-secondary
+				font-size: 95% !important
+				margin: 0 !important
 
 			/* Selected item */
 			&.jstree-clicked
 				background-color: $tree-color-highlight-background !important
-				color: $tree-color-highlight-background-text !important
-
-				.jstree-ocl, .jstree-icon
-					color: $tree-color-highlight-background-text !important
+				color: white !important
 
 				&:after
-					content: '\e83a'
-					font-family: 'pillar-font'
-					color: $tree-color-highlight-background-text
-					position: absolute
-					right: 7px
-					top: 1px
+					display: block
+					color: white !important
 
-				li
-					a.jstree-anchor:after
-						content: ''
+				.jstree-ocl,
+				.jstree-icon
+					color: white
 
 				/* hover an active item */
-				&.jstree-hovered,
-				&.jstree-hovered .jstree-icon
-					color: $tree-color-highlight-background-text !important
+				&.jstree-hovered
+					background-color: lighten($tree-color-highlight-background, 10%) !important
 					box-shadow: none
+					color: white !important
+
+				&.jstree-hovered .jstree-icon
+					color: white !important
 
 			.jstree-hovered
 				background-color: rgba($tree-color-highlight, .1) !important
@@ -196,45 +187,70 @@ $tree-color-highlight-background-text: white
 			line-height: 26px
 			left: 5px
 
-	&.is_subscriber .jstree-anchor
-		padding-right: initial
-		&:before
-			display: none
-		&:after
-			display: none
+	&.is_subscriber
+		.jstree-node
+			&[is_free='true']
+				.jstree-anchor
+					padding-right: initial
+
+					&:after
+						display: none !important
 
 	&.blog
 		.jstree-anchor
-			padding: 5px 5px 5px 10px
-			&:hover, &:hover i
+			padding: 6px 6px 6px 12px
+
+			&:hover
 				color: $tree-color-highlight
 
-			&.jstree-clicked .tree-item-info
-				color: white
+			&.post
+				border-bottom: thin solid $color-background-dark
 
-		.tree-item-info
-			display: block
-			font-size: .85em
-			margin-left: 40px
-			padding-top: 2px
-			line-height: 1em
-			color: $color-text-dark-secondary
+			&.jstree-clicked
+				&.post
+					background-color: transparent !important
 
-		.tree-item-thumbnail
-			display: flex
-			align-items: center
-			justify-content: center
-			background-color: $color-background
-			width: 40px
-			height: 40px
-			float: left
-			margin: 0 5px 0 -5px
-			border-radius: 3px
-			color: $color-text-dark-secondary
-			img
+					&:after
+						top: 8px
+						color: $tree-color-highlight !important
+
+					.tree-item-info
+						color: $color-text
+
+					.tree-item-title
+						color: $tree-color-highlight
+
+		.tree-item
+			line-height: initial
+			padding-right: 10px
+
+			&-title
+				font-size: 1.2em
+				overflow: initial
+				text-overflow: initial
+				white-space: normal
+
+			&-info
+				color: $color-text-dark-secondary
+				display: block
+				font-size: .8em
+				padding: 5px
+
+			&-thumbnail
+				align-items: center
+				background-color: $color-background
 				border-radius: 3px
-				width: 40px
-				height: 40px
+				color: $color-text-dark-secondary
+				display: flex
+				float: left
+				height: 70px
+				justify-content: center
+				margin: 0 10px 0 -5px
+				width: 70px
+
+				img
+					height: 70px
+					width: 70px
 
 
 .jstree-loading
@@ -263,14 +279,16 @@ $tree-color-highlight-background-text: white
 
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
-	background-color: rgba($tree-color-highlight-background, .7) !important
+	background-color: rgba($tree-color-highlight-background, .8) !important
+	color: white !important
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .8) !important
+	color: white !important
 
 i.jstree-icon.jstree-ocl
-	height: 26px !important
 	color: rgba($tree-color-text, .5) !important
+	height: 26px !important
 	+media-xs
 		height: 40px !important