diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 6b3ed3815..d955b7efc 100644
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -206,11 +206,9 @@ input:checked + .toggle-switch {
 }
 
 .form-group[collapsible] {
-  margin-left: -$-m;
-  margin-right: -$-m;
   padding: 0 $-m;
-  border-top: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
+  border: 1px solid #DDD;
+  border-radius: 4px;
   .collapse-title {
     margin-left: -$-m;
     margin-right: -$-m;
@@ -238,9 +236,6 @@ input:checked + .toggle-switch {
   &.open .collapse-title label:before {
     transform: rotate(90deg);
   }
-  &+.form-group[collapsible] {
-    margin-top: -($-s + 1);
-  }
 }
 
 .inline-input-style {
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index e7ca26860..f326b2acf 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -50,6 +50,13 @@ body.flexbox {
   flex: 1;
 }
 
+.content-wrap.card {
+  padding: $-l $-xxl;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: $-xl;
+  overflow: auto;
+}
 
 .tri-layout-container {
   display: grid;
@@ -68,17 +75,6 @@ body.flexbox {
   .tri-layout-middle {
     grid-area: b;
   }
-  .content-wrap.card {
-    padding: $-l $-xxl;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: $-xl;
-    overflow: auto;
-    &.thin {
-      width: 940px;
-      max-width: 100%;
-    }
-  }
 }
 @include smaller-than($xxl) {
   .tri-layout-container {
@@ -97,6 +93,7 @@ body.flexbox {
     position: sticky;
     top: $-m;
     max-height: 100vh;
+    min-height: 50vh;
     overflow-y: scroll;
     overflow-x: visible;
     scrollbar-width: none;
@@ -150,7 +147,7 @@ body.flexbox {
 }
 
 .tri-layout-left, .tri-layout-right {
-  opacity: 0.8;
+  opacity: 0.7;
   transition: opacity ease-in-out 120ms;
   &:hover {
     opacity: 1;
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 386113f46..d26997c8f 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -271,6 +271,9 @@ ul.pagination {
     color: $color-page-draft;
     fill: $color-page-draft;
   }
+  > .dropdown-container {
+    display: block;
+  }
 }
 
 .entity-list-item, .icon-list-item {
diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index 3e6da03f0..8cc7c830f 100755
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -38,11 +38,7 @@
   width: 100%;
   max-width: 840px;
   margin: 0 auto;
-  margin-top: $-xxl;
   overflow-wrap: break-word;
-  &.flex {
-    margin-top: $-xl;
-  }
   .align-left {
     text-align: left;
   }
@@ -342,15 +338,10 @@
   }
 }
 
-.comments-container {
-  width: 100%;
-  margin-top: $-xl;
-  margin-bottom: $-m;
-  h5 {
-    color: #888;
-    font-weight: normal;
-    margin-top: 0.5em;
-  }
+.comments-container h5 {
+  color: #888;
+  font-weight: normal;
+  margin-top: 0.5em;
 }
 
 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
@@ -401,6 +392,8 @@
   position: relative;
   overflow: hidden;
   padding: $-xs $-m;
+  color: #666;
+  fill: currentColor;
   &:after {
     content: '';
     position: absolute;
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 908a65536..07820c57e 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -26,7 +26,7 @@ $-s: 12px;
 $-xs: 6px;
 $-xxs: 3px;
 
-$spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
+$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl));
 
 // Fonts
 $text: -apple-system, BlinkMacSystemFont,
diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php
index 2d5e6c455..b21fb3012 100644
--- a/resources/views/books/create.blade.php
+++ b/resources/views/books/create.blade.php
@@ -1,28 +1,24 @@
 @extends('simple-layout')
 
-@section('toolbar')
-    <div class="col-sm-8 faded">
-        <div class="breadcrumbs">
-            <a href="{{ baseUrl('/books') }}" class="text-button">@icon('book'){{ trans('entities.books') }}</a>
-            <span class="sep">&raquo;</span>
-            <a href="{{ baseUrl('/create-book') }}" class="text-button">@icon('add'){{ trans('entities.books_create') }}</a>
-        </div>
-    </div>
-@stop
-
 @section('body')
+    <div class="container small">
+        <div class="breadcrumbs my-l">
+            <a href="{{  baseUrl('/books')  }}" class="">
+                @icon('book'){{ trans('entities.books') }}
+            </a>
+            <div class="separator">@icon('chevron-right')</div>
+            <a href="{{  baseUrl('/create-book')  }}" class="">
+                @icon('add'){{ trans('entities.books_create') }}
+            </a>
+        </div>
 
-<div class="container small">
-    <p>&nbsp;</p>
-    <div class="card">
-        <h3>@icon('add') {{ trans('entities.books_create') }}</h3>
-        <div class="body">
+        <div class="content-wrap card">
+            <h1 class="list-heading">{{ trans('entities.books_create') }}</h1>
             <form action="{{ baseUrl("/books") }}" method="POST" enctype="multipart/form-data">
                 @include('books/form')
             </form>
         </div>
     </div>
-</div>
-<p class="margin-top large"><br></p>
+
     @include('components.image-manager', ['imageType' => 'cover'])
 @stop
\ No newline at end of file
diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php
index bf94b5b07..97ddd9681 100644
--- a/resources/views/books/form.blade.php
+++ b/resources/views/books/form.blade.php
@@ -41,5 +41,5 @@
 
 <div class="form-group text-right">
     <a href="{{ isset($book) ? $book->getUrl() : baseUrl('/books') }}" class="button outline">{{ trans('common.cancel') }}</a>
-    <button type="submit" class="button pos">{{ trans('entities.books_save') }}</button>
+    <button type="submit" class="button primary">{{ trans('entities.books_save') }}</button>
 </div>
\ No newline at end of file
diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index bfb95e33e..fd576e7ed 100644
--- a/resources/views/books/grid-item.blade.php
+++ b/resources/views/books/grid-item.blade.php
@@ -11,7 +11,8 @@
         @endif
     </div>
     <div class="grid-card-footer text-muted text-small">
-        {{--<span>@include('partials.entity-meta', ['entity' => $book])</span>--}}
-        {{--TODO - Add in meta details, in list view too--}}
+        @icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span>
+        <br>
+        @icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span>
     </div>
 </a>
\ No newline at end of file
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 59be7e362..fcf9cb4bb 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -1,5 +1,7 @@
 @extends('tri-layout')
 
+@section('container-classes', 'mt-xl')
+
 @section('left')
     @if($recents)
         <div id="recents" class="mb-xl">
diff --git a/resources/views/books/list-item.blade.php b/resources/views/books/list-item.blade.php
index 05d7e90ef..966f67b22 100644
--- a/resources/views/books/list-item.blade.php
+++ b/resources/views/books/list-item.blade.php
@@ -1,10 +1,10 @@
-<div class="book entity-list-item"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <h4 class="text-book"><a class="text-book entity-list-item-link" href="{{$book->getUrl()}}">@icon('book')<span class="entity-list-item-name break-text">{{$book->name}}</span></a></h4>
-    <div class="entity-item-snippet">
-        @if(isset($book->searchSnippet))
-            <p class="text-muted break-text">{!! $book->searchSnippet !!}</p>
-        @else
-            <p class="text-muted break-text">{{ $book->getExcerpt() }}</p>
-        @endif
+<a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
+    <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')">
     </div>
-</div>
\ No newline at end of file
+    <div class="content">
+        <h4 class="entity-list-item-name break-text">{{ $book->name }}</h4>
+        <div class="entity-item-snippet">
+            <p class="text-muted break-text mb-s">{{ $book->getExcerpt() }}</p>
+        </div>
+    </div>
+</a>
\ No newline at end of file
diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php
index 2155cd5c8..5e077727b 100644
--- a/resources/views/books/list.blade.php
+++ b/resources/views/books/list.blade.php
@@ -1,5 +1,5 @@
 
-<div class="content-wrap card {{ $view === 'list' ? 'thin' : '' }}">
+<div class="content-wrap card">
     <div class="grid halves v-center">
         <h1 class="list-heading">{{ trans('entities.books') }}</h1>
         <div class="text-right">
@@ -12,18 +12,8 @@
         @if($view === 'list')
             <div class="entity-list">
                 @foreach($books as $book)
-                    <a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
-                        <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')">
-                        </div>
-                        <div class="content">
-                            <h4 class="entity-list-item-name break-text">{{ $book->name }}</h4>
-                            <div class="entity-item-snippet">
-                                <p class="text-muted break-text">{{ $book->getExcerpt() }}</p>
-                            </div>
-                        </div>
-                    </a>
+                    @include('books.list-item', ['book' => $book])
                 @endforeach
-                {!! $books->render() !!}
             </div>
         @else
              <div class="grid third">
@@ -31,10 +21,10 @@
                     @include('books.grid-item', ['book' => $book])
                 @endforeach
              </div>
-            <div>
-                {!! $books->render() !!}
-            </div>
         @endif
+        <div>
+            {!! $books->render() !!}
+        </div>
     @else
         <p class="text-muted">{{ trans('entities.books_empty') }}</p>
         @if(userCan('books-create-all'))
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index d47bb660d..282ae21d2 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -1,46 +1,7 @@
-@extends('sidebar-layout')
+@extends('tri-layout')
+@section('container-classes', 'mt-xl')
 
-@section('toolbar')
-    <div class="grid halves">
-        <div>
-            @include('pages._breadcrumbs', ['page' => $page])
-        </div>
-        <div class="action-buttons">
-            <span dropdown class="dropdown-container">
-                <div dropdown-toggle class="text-button text-primary">@icon('export'){{ trans('entities.export') }}</div>
-                <ul class="wide">
-                    <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
-                    <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
-                    <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
-                </ul>
-            </span>
-            @if(userCan('page-update', $page))
-                <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button" >@icon('edit'){{ trans('common.edit') }}</a>
-            @endif
-            @if(userCan('page-update', $page) || userCan('restrictions-manage', $page) || userCan('page-delete', $page))
-                <div dropdown class="dropdown-container">
-                    <a dropdown-toggle class="text-primary text-button">@icon('more') {{ trans('common.more') }}</a>
-                    <ul>
-                        @if(userCan('page-update', $page))
-                            <li><a href="{{ $page->getUrl('/copy') }}" class="text-primary" >@icon('copy'){{ trans('common.copy') }}</a></li>
-                            <li><a href="{{ $page->getUrl('/move') }}" class="text-primary" >@icon('folder'){{ trans('common.move') }}</a></li>
-                            <li><a href="{{ $page->getUrl('/revisions') }}" class="text-primary">@icon('history'){{ trans('entities.revisions') }}</a></li>
-                        @endif
-                        @if(userCan('restrictions-manage', $page))
-                            <li><a href="{{ $page->getUrl('/permissions') }}" class="text-primary">@icon('lock'){{ trans('entities.permissions') }}</a></li>
-                        @endif
-                        @if(userCan('page-delete', $page))
-                            <li><a href="{{ $page->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('common.delete') }}</a></li>
-                        @endif
-                    </ul>
-                </div>
-            @endif
-
-        </div>
-    </div>
-@stop
-
-@section('sidebar')
+@section('left')
 
     @if($page->tags->count() > 0)
         <section>
@@ -49,8 +10,8 @@
     @endif
 
     @if ($page->attachments->count() > 0)
-        <div id="page-attachments" class="card mb-m">
-            <h3>@icon('attach') {{ trans('entities.pages_attachments') }}</h3>
+        <div id="page-attachments" class="mb-xl">
+            <h5>{{ trans('entities.pages_attachments') }}</h5>
             <div class="body">
                 @foreach($page->attachments as $attachment)
                     <div class="attachment">
@@ -62,8 +23,8 @@
     @endif
 
     @if (isset($pageNav) && count($pageNav))
-        <div id="page-navigation" class="card mb-m">
-            <h3>@icon('open-book') {{ trans('entities.pages_navigation') }}</h3>
+        <div id="page-navigation" class="mb-xl">
+            <h5>{{ trans('entities.pages_navigation') }}</h5>
             <div class="body">
                 <div class="sidebar-page-nav menu">
                     @foreach($pageNav as $navItem)
@@ -76,8 +37,8 @@
         </div>
     @endif
 
-    <div id="page-details" class="card entity-details mb-m">
-        <h3>@icon('info') {{ trans('common.details') }}</h3>
+    <div id="page-details" class="entity-details mb-xl">
+        <h5>{{ trans('common.details') }}</h5>
         <div class="body text-muted text-small blended-links">
             @include('partials.entity-meta', ['entity' => $page])
 
@@ -114,14 +75,15 @@
     </div>
 
     @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
-
 @stop
 
-@section('body-wrap-classes', 'flex-fill columns')
-
 @section('body')
 
-    <div class="content-wrap thin">
+    <div class="mb-m">
+        @include('pages._breadcrumbs', ['page' => $page])
+    </div>
+
+    <div class="content-wrap card">
         <div class="page-content flex" page-display="{{ $page->id }}">
 
             <div class="pointer-container" id="pointer">
@@ -138,13 +100,68 @@
                 </div>
             </div>
 
-            @include('pages/page-display')
+            @include('pages.page-display')
         </div>
     </div>
 
     @if ($commentsEnabled)
-      <div class="container small nopad comments-container">
-          @include('comments/comments', ['page' => $page])
+      <div class="container small nopad comments-container mb-l">
+          @include('comments.comments', ['page' => $page])
+          <div class="clearfix"></div>
       </div>
     @endif
 @stop
+
+@section('right')
+    <div class="actions mb-xl">
+        <h5>Actions</h5>
+
+        <div class="icon-list text-primary">
+            {{--Export--}}
+            <div dropdown class="dropdown-container block">
+                <div dropdown-toggle class="icon-list-item">
+                    <span class="icon">@icon('export')</span>
+                    <span>{{ trans('entities.export') }}</span>
+                </div>
+                <ul class="wide">
+                    <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
+                    <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
+                    <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
+                </ul>
+            </div>
+
+            {{--User Actions--}}
+            @if(userCan('page-update', $page))
+                <a href="{{ $page->getUrl('/edit') }}" class="icon-list-item">
+                    <span class="icon">@icon('edit')</span>
+                    <span>{{ trans('common.edit') }}</span>
+                </a>
+                <a href="{{ $page->getUrl('/copy') }}" class="icon-list-item">
+                    <span class="icon">@icon('copy')</span>
+                    <span>{{ trans('common.copy') }}</span>
+                </a>
+                <a href="{{ $page->getUrl('/move') }}" class="icon-list-item">
+                    <span class="icon">@icon('folder')</span>
+                    <span>{{ trans('common.move') }}</span>
+                </a>
+                <a href="{{ $page->getUrl('/revisions') }}" class="icon-list-item">
+                    <span class="icon">@icon('history')</span>
+                    <span>{{ trans('entities.revisions') }}</span>
+                </a>
+            @endif
+            @if(userCan('restrictions-manage', $page))
+                <a href="{{ $page->getUrl('/permissions') }}" class="icon-list-item">
+                    <span class="icon">@icon('lock')</span>
+                    <span>{{ trans('entities.permissions') }}</span>
+                </a>
+            @endif
+            @if(userCan('page-delete', $page))
+                <a href="{{ $page->getUrl('/delete') }}" class="icon-list-item">
+                    <span class="icon">@icon('delete')</span>
+                    <span>{{ trans('common.delete') }}</span>
+                </a>
+            @endif
+        </div>
+
+    </div>
+@stop
diff --git a/resources/views/partials/book-tree.blade.php b/resources/views/partials/book-tree.blade.php
index 29e313fb4..360162b2f 100644
--- a/resources/views/partials/book-tree.blade.php
+++ b/resources/views/partials/book-tree.blade.php
@@ -1,11 +1,12 @@
-<div id="book-tree" class="card book-tree mb-m" v-pre>
+<div id="book-tree" class="book-tree mb-xl" v-pre>
+    <h5>{{ trans('entities.books_navigation') }}</h5>
     @if (userCan('view', $book))
-        @include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
-    @else
-        <h3>@icon('book') {{ trans('entities.books_navigation') }}</h3>
+        <div class="entity-list">
+            @include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
+        </div>
     @endif
 
-    <ul class="sidebar-page-list menu">
+    <ul class="sidebar-page-list menu entity-list">
 
         @foreach($sidebarTree as $bookChild)
             <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}">
diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php
index e008130da..cda9e5047 100644
--- a/resources/views/partials/breadcrumbs.blade.php
+++ b/resources/views/partials/breadcrumbs.blade.php
@@ -1,18 +1,18 @@
-<div class="breadcrumbs">
+<div class="breadcrumbs text-center">
     @if (isset($book) && userCan('view', $book))
-        <a href="{{ $book->getUrl() }}" class="entity-chip text-book">
+        <a href="{{ $book->getUrl() }}" class="text-book">
             @icon('book'){{ $book->getShortName() }}
         </a>
         <div class="separator">@icon('chevron-right')</div>
     @endif
     @if(isset($chapter) && userCan('view', $chapter))
-        <a href="{{ $chapter->getUrl() }}" class="entity-chip text-chapter">
+        <a href="{{ $chapter->getUrl() }}" class="text-chapter">
             @icon('chapter'){{ $chapter->getShortName() }}
         </a>
         <div class="separator">@icon('chevron-right')</div>
     @endif
     @if(isset($page) && userCan('view', $page))
-        <a href="{{ $page->getUrl() }}" class="entity-chip text-page">
+        <a href="{{ $page->getUrl() }}" class="text-page">
             @icon('page'){{ $page->getShortName() }}
         </a>
     @endif
diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php
index b87cd37db..27ba07965 100644
--- a/resources/views/simple-layout.blade.php
+++ b/resources/views/simple-layout.blade.php
@@ -8,7 +8,6 @@
         @yield('toolbar')
     </div>
 
-
     <div class="flex-fill flex">
         <div class="content flex">
             <div class="scroll-body">
diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php
index 33ba6f616..9ae65b037 100644
--- a/resources/views/tri-layout.blade.php
+++ b/resources/views/tri-layout.blade.php
@@ -4,11 +4,11 @@
 
 @section('content')
 
-    <div class="toolbar px-xl py-m">
+    <div class="toolbar px-xl">
         @yield('toolbar')
     </div>
 
-    <div class="tri-layout-container" tri-layout @yield('container-attrs') >
+    <div class="tri-layout-container @yield('container-classes')" tri-layout @yield('container-attrs') >
 
         <div class="tri-layout-left print-hidden " id="sidebar">
             <div class="tri-layout-left-contents">