diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 3f4841a7f..a81c11e74 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -200,14 +200,24 @@ header .search-box {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-
-.breadcrumbs .separator {
-  fill: #aaa;
-  font-size: 1.6em;
-  line-height: 0.8;
-  margin: 0 $-xs;
-  margin-top: -2px;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .icon-list-item {
+    width: auto;
+    padding-top: $-xs;
+    padding-bottom: $-xs;
+    &:not(:hover) {
+      color: #666;
+      fill: #888;
+    }
+  }
+  .separator {
+    display: inline-block;
+    fill: #aaa;
+    font-size: 1.6em;
+    line-height: 0.8;
+    margin: -2px 0 0;
+  }
 }
 
 .faded {
diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php
index 4915d64cf..db93c3d1e 100644
--- a/resources/views/books/create.blade.php
+++ b/resources/views/books/create.blade.php
@@ -2,10 +2,16 @@
 
 @section('body')
     <div class="container small">
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
-                '/books' => trans('entities.books'),
-                '/create-book' => trans('entities.books_create')
+                '/books' => [
+                    'text' => trans('entities.books'),
+                    'icon' => 'book'
+                ],
+                '/create-book' => [
+                    'text' => trans('entities.books_create'),
+                    'icon' => 'add'
+                ]
             ]])
         </div>
 
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php
index e50589866..2860e8bcd 100644
--- a/resources/views/books/delete.blade.php
+++ b/resources/views/books/delete.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
-                $book->getUrl('/delete') => trans('entities.books_delete')
+                $book->getUrl('/delete') => [
+                    'text' => trans('entities.books_delete'),
+                    'icon' => 'delete',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/books/edit.blade.php b/resources/views/books/edit.blade.php
index e1162d4b4..caeae9175 100644
--- a/resources/views/books/edit.blade.php
+++ b/resources/views/books/edit.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
-                $book->getUrl('/edit') => trans('entities.books_edit')
+                $book->getUrl('/edit') => [
+                    'text' => trans('entities.books_edit'),
+                    'icon' => 'edit',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/books/permissions.blade.php b/resources/views/books/permissions.blade.php
index b1ff3b0a8..64322cf85 100644
--- a/resources/views/books/permissions.blade.php
+++ b/resources/views/books/permissions.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
-                $book->getUrl('/permissions') => trans('entities.books_permissions')
+                $book->getUrl('/permissions') => [
+                    'text' => trans('entities.books_permissions'),
+                    'icon' => 'lock',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php
index 4483af35b..771a68fcb 100644
--- a/resources/views/books/sort.blade.php
+++ b/resources/views/books/sort.blade.php
@@ -6,7 +6,7 @@
 
     <div class="container">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
                 $book->getUrl('/sort') => [
diff --git a/resources/views/chapters/_breadcrumbs.blade.php b/resources/views/chapters/_breadcrumbs.blade.php
deleted file mode 100644
index 81e270694..000000000
--- a/resources/views/chapters/_breadcrumbs.blade.php
+++ /dev/null
@@ -1,4 +0,0 @@
-@include('partials.breadcrumbs', ['crumbs' => [
-        $chapter->book,
-        $chapter,
-]])
\ No newline at end of file
diff --git a/resources/views/chapters/create.blade.php b/resources/views/chapters/create.blade.php
index e8325c247..8953eb0cc 100644
--- a/resources/views/chapters/create.blade.php
+++ b/resources/views/chapters/create.blade.php
@@ -3,10 +3,13 @@
 @section('body')
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
-                $book->getUrl('create-chapter') => trans('entities.chapters_create')
+                $book->getUrl('create-chapter') => [
+                    'text' => trans('entities.chapters_create'),
+                    'icon' => 'add',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php
index c2580883d..3444ee0fb 100644
--- a/resources/views/chapters/delete.blade.php
+++ b/resources/views/chapters/delete.blade.php
@@ -4,11 +4,14 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $chapter->book,
                 $chapter,
-                $chapter->getUrl('/delete') => trans('entities.chapters_delete')
+                $chapter->getUrl('/delete') => [
+                    'text' => trans('entities.chapters_delete'),
+                    'icon' => 'delete',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/chapters/edit.blade.php b/resources/views/chapters/edit.blade.php
index 8bf22dbb9..570182344 100644
--- a/resources/views/chapters/edit.blade.php
+++ b/resources/views/chapters/edit.blade.php
@@ -4,11 +4,14 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $book,
                 $chapter,
-                $chapter->getUrl('/edit') => trans('entities.chapters_edit')
+                $chapter->getUrl('/edit') => [
+                    'text' => trans('entities.chapters_edit'),
+                    'icon' => 'edit'
+                ]
             ]])
         </div>
 
diff --git a/resources/views/chapters/move.blade.php b/resources/views/chapters/move.blade.php
index afdc570f8..7f3de1322 100644
--- a/resources/views/chapters/move.blade.php
+++ b/resources/views/chapters/move.blade.php
@@ -4,11 +4,14 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $chapter->book,
                 $chapter,
-                $chapter->getUrl('/move') => trans('entities.chapters_move')
+                $chapter->getUrl('/move') => [
+                    'text' => trans('entities.chapters_move'),
+                    'icon' => 'folder',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/chapters/permissions.blade.php b/resources/views/chapters/permissions.blade.php
index 2c8fba18e..cb5808e7d 100644
--- a/resources/views/chapters/permissions.blade.php
+++ b/resources/views/chapters/permissions.blade.php
@@ -4,11 +4,14 @@
 
     <div class="container">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $chapter->book,
                 $chapter,
-                $chapter->getUrl('/permissions') => trans('entities.chapters_permissions')
+                $chapter->getUrl('/permissions') => [
+                    'text' => trans('entities.chapters_permissions'),
+                    'icon' => 'lock',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 5906e7e02..397d75254 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -9,7 +9,10 @@
 @section('body')
 
     <div class="mb-m">
-        @include('chapters._breadcrumbs', ['chapter' => $chapter])
+        @include('partials.breadcrumbs', ['crumbs' => [
+            $chapter->book,
+            $chapter,
+        ]])
     </div>
 
     <div class="content-wrap card">
diff --git a/resources/views/pages/_breadcrumbs.blade.php b/resources/views/pages/_breadcrumbs.blade.php
deleted file mode 100644
index f28bb464a..000000000
--- a/resources/views/pages/_breadcrumbs.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-@include('partials.breadcrumbs', ['crumbs' => [
-        $page->book,
-        $page->hasChapter() ? $page->chapter : null,
-        $page,
-]])
\ No newline at end of file
diff --git a/resources/views/pages/copy.blade.php b/resources/views/pages/copy.blade.php
index 5c987a9eb..8bb9859cf 100644
--- a/resources/views/pages/copy.blade.php
+++ b/resources/views/pages/copy.blade.php
@@ -4,12 +4,15 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $page->book,
                 $page->chapter,
                 $page,
-                $page->getUrl('/copy') => trans('entities.pages_copy')
+                $page->getUrl('/copy') => [
+                    'text' => trans('entities.pages_copy'),
+                    'icon' => 'copy',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php
index 21f97cc5b..a72157a83 100644
--- a/resources/views/pages/delete.blade.php
+++ b/resources/views/pages/delete.blade.php
@@ -4,12 +4,15 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $page->book,
                 $page->chapter,
                 $page,
-                $page->getUrl('/delete') => trans('entities.pages_delete')
+                $page->getUrl('/delete') => [
+                    'text' => trans('entities.pages_delete'),
+                    'icon' => 'delete',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/pages/move.blade.php b/resources/views/pages/move.blade.php
index 33dc506b0..83421be93 100644
--- a/resources/views/pages/move.blade.php
+++ b/resources/views/pages/move.blade.php
@@ -4,12 +4,15 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $page->book,
                 $page->chapter,
                 $page,
-                $page->getUrl('/move') => trans('entities.pages_move')
+                $page->getUrl('/move') => [
+                    'text' => trans('entities.pages_move'),
+                    'icon' => 'folder',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/pages/permissions.blade.php b/resources/views/pages/permissions.blade.php
index 156b36d0e..260f0e49f 100644
--- a/resources/views/pages/permissions.blade.php
+++ b/resources/views/pages/permissions.blade.php
@@ -4,12 +4,15 @@
 
     <div class="container">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $page->book,
                 $page->chapter,
                 $page,
-                $page->getUrl('/permissions') => trans('entities.pages_permissions')
+                $page->getUrl('/permissions') => [
+                    'text' => trans('entities.pages_permissions'),
+                    'icon' => 'lock',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/pages/revision.blade.php b/resources/views/pages/revision.blade.php
index 06ef078a2..3ce5b349f 100644
--- a/resources/views/pages/revision.blade.php
+++ b/resources/views/pages/revision.blade.php
@@ -16,7 +16,10 @@
             $page->$book,
             $page->chapter,
             $page,
-            $page->getUrl('/revisions') => trans('entities.pages_revisions'),
+            $page->getUrl('/revisions') => [
+                'text' => trans('entities.pages_revisions'),
+                'icon' => 'history',
+            ],
             $revision->getUrl('/changes') => $diff ? trans('entities.pages_revisions_numbered_changes', ['id' => $revision->id]) : null,
             $revision->getUrl() => !$diff ? trans('entities.pages_revisions_numbered', ['id' => $revision->id]) : null,
         ]])
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php
index d3a55a2e6..134b8f5c2 100644
--- a/resources/views/pages/revisions.blade.php
+++ b/resources/views/pages/revisions.blade.php
@@ -3,12 +3,15 @@
 @section('body')
     <div class="container">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $page->book,
                 $page->chapter,
                 $page,
-                $page->getUrl('/revisions') => trans('entities.pages_revisions')
+                $page->getUrl('/revisions') => [
+                    'text' => trans('entities.pages_revisions'),
+                    'icon' => 'history',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index af610e358..8444155a6 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -3,7 +3,11 @@
 @section('body')
 
     <div class="mb-m">
-        @include('pages._breadcrumbs', ['page' => $page])
+        @include('partials.breadcrumbs', ['crumbs' => [
+            $page->book,
+            $page->hasChapter() ? $page->chapter : null,
+            $page,
+        ]])
     </div>
 
     <div class="content-wrap card">
diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php
index 54d7b74cb..d9c1b4681 100644
--- a/resources/views/partials/breadcrumbs.blade.php
+++ b/resources/views/partials/breadcrumbs.blade.php
@@ -13,34 +13,16 @@
                 {{ $crumb }}
             </a>
         @elseif (is_array($crumb))
-            <a href="{{  baseUrl($key)  }}">
-                @icon($crumb['icon']) {{ $crumb['text'] }}
+            <a href="{{  baseUrl($key)  }}" class="icon-list-item">
+                <span>@icon($crumb['icon'])</span>
+                <span>{{ $crumb['text'] }}</span>
             </a>
         @elseif($crumb instanceof \BookStack\Entities\Entity)
-            <a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}}">
-                @icon($crumb->getType()){{ $crumb->getShortName() }}
+            <a href="{{ $crumb->getUrl() }}" class="text-{{$crumb->getType()}} icon-list-item">
+                <span>@icon($crumb->getType())</span>
+                <span>{{ $crumb->getShortName() }}</span>
             </a>
         @endif
         <?php $breadcrumbCount++; ?>
     @endforeach
-
-    {{--@if (isset($book) && userCan('view', $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="text-chapter">--}}
-            {{--@icon('chapter'){{ $chapter->getShortName() }}--}}
-        {{--</a>--}}
-        {{--@if (isset($page))--}}
-            {{--<div class="separator">@icon('chevron-right')</div>--}}
-        {{--@endif--}}
-    {{--@endif--}}
-    {{--@if(isset($page) && userCan('view', $page))--}}
-        {{--<a href="{{ $page->getUrl() }}" class="text-page">--}}
-            {{--@icon('page'){{ $page->getShortName() }}--}}
-        {{--</a>--}}
-    {{--@endif--}}
 </div>
\ No newline at end of file
diff --git a/resources/views/shelves/create.blade.php b/resources/views/shelves/create.blade.php
index 6caa83554..72bf904fe 100644
--- a/resources/views/shelves/create.blade.php
+++ b/resources/views/shelves/create.blade.php
@@ -4,10 +4,16 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
-                '/shelves' => trans('entities.shelves'),
-                '/create-shelf' => trans('entities.shelves_create')
+                '/shelves' => [
+                    'text' => trans('entities.shelves'),
+                    'icon' => 'bookshelf',
+                ],
+                '/create-shelf' => [
+                    'text' => trans('entities.shelves_create'),
+                    'icon' => 'add',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/shelves/delete.blade.php b/resources/views/shelves/delete.blade.php
index f5a84c8ad..2a78227bd 100644
--- a/resources/views/shelves/delete.blade.php
+++ b/resources/views/shelves/delete.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $shelf,
-                $shelf->getUrl('/delete') => trans('entities.shelves_delete')
+                $shelf->getUrl('/delete') => [
+                    'text' => trans('entities.shelves_delete'),
+                    'icon' => 'delete',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/shelves/edit.blade.php b/resources/views/shelves/edit.blade.php
index 2199d1a54..81f4846a3 100644
--- a/resources/views/shelves/edit.blade.php
+++ b/resources/views/shelves/edit.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $shelf,
-                $shelf->getUrl('/edit') => trans('entities.shelves_edit')
+                $shelf->getUrl('/edit') => [
+                    'text' => trans('entities.shelves_edit'),
+                    'icon' => 'edit',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/shelves/permissions.blade.php b/resources/views/shelves/permissions.blade.php
index 174c9c83b..df50be8dd 100644
--- a/resources/views/shelves/permissions.blade.php
+++ b/resources/views/shelves/permissions.blade.php
@@ -4,10 +4,13 @@
 
     <div class="container small">
 
-        <div class="my-l">
+        <div class="my-s">
             @include('partials.breadcrumbs', ['crumbs' => [
                 $shelf,
-                $shelf->getUrl('/permissions') => trans('entities.shelves_permissions')
+                $shelf->getUrl('/permissions') => [
+                    'text' => trans('entities.shelves_permissions'),
+                    'icon' => 'lock',
+                ]
             ]])
         </div>
 
diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php
index 1eeaf970a..a77bb5d75 100644
--- a/resources/views/tri-layout.blade.php
+++ b/resources/views/tri-layout.blade.php
@@ -8,9 +8,9 @@
         {{--@yield('toolbar')--}}
     {{--</div>--}}
 
-    <div class="tri-layout-container mt-xl" tri-layout @yield('container-attrs') >
+    <div class="tri-layout-container mt-m" tri-layout @yield('container-attrs') >
 
-        <div class="tri-layout-left print-hidden " id="sidebar">
+        <div class="tri-layout-left print-hidden pt-m" id="sidebar">
             <div class="tri-layout-left-contents">
                 @yield('left')
             </div>
@@ -20,7 +20,7 @@
             @yield('body')
         </div>
 
-        <div class="tri-layout-right print-hidden">
+        <div class="tri-layout-right print-hidden pt-m">
             <div class="tri-layout-right-contents">
                 @yield('right')
             </div>